/* ==========================================================================
   HELMOR Software – main.css
   Aufbau: Fonts · Tokens · Basis · Layout · Komponenten · Abschnitte · Motion
   ========================================================================== */

/* ---------- Fonts (selbst gehostet, keine Drittanbieter) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2-variations"),
       url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial");
  size-adjust: 103%;
  ascent-override: 88%;
  descent-override: 21%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  /* Farbe: Schwarz, Weiß, neutrale Grautöne + Signalorange als einziger Akzent */
  --white: oklch(1 0 0);
  --surface: oklch(0.965 0 0);
  --gray-200: oklch(0.9 0 0);
  --line: oklch(0.89 0 0);
  --line-strong: oklch(0.62 0 0);
  --ink: oklch(0.17 0 0);
  --ink-soft: oklch(0.44 0 0);
  --word-dim: oklch(0.64 0 0);
  --black: oklch(0.17 0 0);
  --black-deep: oklch(0.13 0 0);
  --black-soft: oklch(0.25 0 0);
  --fog: oklch(0.97 0 0);
  --fog-muted: oklch(0.78 0 0);
  --fog-line: oklch(0.97 0 0 / 0.16);
  /* Akzent in vier Rollen: Fläche, Text auf der Fläche, Akzent auf Hell, Akzent auf Dunkel */
  --accent: oklch(0.5 0.2 266);         /* Ultramarinblau, Weiß darauf 6,3:1 */
  --on-accent: var(--white);
  --accent-ink: oklch(0.5 0.2 266);     /* auf Weiß 6,3:1 */
  --accent-light: oklch(0.76 0.12 262); /* auf Schwarz 8,9:1 */
  --accent-mid: oklch(0.6 0.21 265);    /* Durchstreichung: kräftig auf Weiß und Schwarz */
  --danger: oklch(0.55 0.2 27);

  /* Typo */
  --font: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --fs-display-xl: clamp(2.5rem, 0.6rem + 6.4vw, 6rem);
  --fs-display-l: clamp(2.1rem, 1rem + 3.6vw, 4.25rem);
  --fs-statement: clamp(1.55rem, 1rem + 1.9vw, 2.7rem);
  --fs-title: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.35vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.8125rem;

  /* Raum */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section: clamp(5.5rem, 4rem + 7vw, 11rem);
  --pad: clamp(1rem, 0.4rem + 3vw, 3.5rem);
  --gutter: clamp(1rem, 0.6rem + 1.4vw, 2rem);
  --max: 90rem;
  --header-h: 4.25rem;
  --radius: 0.375rem;
  --radius-l: 0.75rem;

  /* Ebenen */
  --z-base: 1;
  --z-overlay: 20;
  --z-sticky: 30;
  --z-dialog: 40;
  --z-cursor: 50;

  /* Bewegung */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  interpolate-size: allow-keywords;
}

@media (min-width: 1024px) {
  :root { --header-h: 4.75rem; }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
/* Kein scroll-behavior: smooth (18.10.2026): ScrollTrigger springt beim Neuberechnen kurz
   an andere Stellen, mit smooth würde der Browser diese Sprünge sichtbar animieren.
   Weiche Sprünge zu Ankern macht main.js selbst (scrollToTarget). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
[data-lenis-prevent] { overscroll-behavior: contain; }

body {
  min-height: 100vh;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-stretch: 100%;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  left: var(--s-4);
  top: var(--s-4);
  z-index: var(--z-cursor);
  padding: var(--s-3) var(--s-4);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 650;
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform 0.3s var(--ease-expo);
}
.skip-link:focus { transform: none; }

main:focus, [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
section[tabindex="-1"]:focus { outline: none; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.display-l {
  font-size: var(--fs-display-l);
  font-stretch: 118%;
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.text-accent { color: var(--accent-ink); }

/* ---------- Komponenten: Buttons & Links ---------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3.25rem;
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: var(--radius);
  font-size: 1rem;
  font-stretch: 108%;
  font-weight: 650;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: color 0.35s var(--ease-out), translate 0.2s var(--ease-out), background-color 0.35s var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover-bg, var(--ink));
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.45s var(--ease-expo);
}
.btn:hover::before { transform: scaleY(1); }
.btn:focus-visible {
  /* Zweifarbiger Ring: auf hellen und dunklen Flächen sichtbar */
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--fog);
}
.btn:active { translate: 0 1px; }

.btn--accent { background: var(--accent); color: var(--on-accent); --btn-hover-bg: var(--ink); }
.btn--accent:hover { color: var(--accent-light); }
.btn--ink { background: var(--ink); color: var(--fog); --btn-hover-bg: var(--accent); }
.btn--ink:hover { color: var(--on-accent); }
/* Auf schwarzen Flächen würde der schwarze Hover den Button verschlucken */
.btn--accent.btn--on-dark { --btn-hover-bg: var(--fog); }
.btn--accent.btn--on-dark:hover { color: var(--accent-ink); }
.btn--sm { min-height: 2.75rem; padding: 0.6rem 1.1rem; font-size: 0.9375rem; }

.btn__spinner {
  display: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.btn[aria-busy="true"] .btn__spinner { display: inline-block; }
.btn[aria-busy="true"] { pointer-events: none; }
@keyframes spin { to { transform: rotate(1turn); } }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  font-weight: 650;
  font-stretch: 108%;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.55rem) / 0% 1.5px no-repeat;
  transition: background-size 0.5s var(--ease-expo);
}
.link-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.45s var(--ease-expo);
}
.link-arrow:hover { background-size: calc(100% - 1.75rem) 1.5px; }
.link-arrow:hover svg { transform: translateX(0.3rem); }
.link-arrow--light { color: var(--fog); }

.dot-led {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent-light);
  flex: none;
}
.dot-led--on { background: var(--fog); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-sticky);
  height: var(--header-h);
  color: var(--ink);
  transition: transform 0.5s var(--ease-expo), color 0.35s var(--ease-out);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--header-bg, transparent);
  border-bottom: 1px solid var(--header-line, transparent);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}
.site-header[data-scrolled="true"]::before { opacity: 1; }
.site-header[data-hidden="true"] { transform: translateY(-100%); }
.site-header[data-theme="dark"] { color: var(--fog); --header-bg: oklch(0.17 0 0 / 0.94); --header-line: var(--fog-line); }
.site-header[data-theme="light"] { color: var(--ink); --header-bg: oklch(1 0 0 / 0.94); --header-line: var(--line); }
.site-header[data-theme="accent"] { color: var(--on-accent); --header-bg: var(--accent); --header-line: oklch(0.5 0 0 / 0.25); }

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  margin-right: auto;
  padding-block: var(--s-2);
  text-decoration: none;
  font-size: 1.375rem;
  font-stretch: 125%;
  font-weight: 850;
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand__led {
  display: inline-block;
  width: 0.38em;
  height: 0.38em;
  margin-left: 0.08em;
  border-radius: 0.06em;
  background: var(--accent);
  transform: translateY(-0.04em);
}
.site-header[data-theme="dark"] .brand__led { background: var(--accent-light); }
.site-header[data-theme="accent"] .brand__led { background: var(--white); }
.motion-ok .brand__led { animation: led 3.6s var(--ease-in-out) infinite; }
@keyframes led {
  0%, 70%, 100% { opacity: 1; }
  80% { opacity: 0.35; }
}

.nav { display: none; }
.nav__list { display: flex; gap: clamp(1.25rem, 2vw, 2.25rem); }
.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--s-3);
  font-size: 0.9375rem;
  font-weight: 560;
  text-decoration: none;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.45rem;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--ease-expo);
}
.nav__link:hover::after, .nav__link[aria-current="true"]::after { transform: scaleX(1); transform-origin: 0 50%; }

.site-header__cta { display: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.75rem;
  padding: 0 0.25rem 0 0.75rem;
  border: 0;
  background: none;
  font-size: 0.9375rem;
  font-weight: 600;
}
.menu-toggle__icon {
  position: relative;
  display: inline-block;
  width: 1.5rem;
  height: 0.75rem;
}
.menu-toggle__icon i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.45s var(--ease-expo), top 0.45s var(--ease-expo);
}
.menu-toggle__icon i:first-child { top: 0; }
.menu-toggle__icon i:last-child { top: calc(100% - 2px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child { top: calc(50% - 1px); transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { top: calc(50% - 1px); transform: rotate(-45deg); }

@media (min-width: 480px) {
  .site-header__cta { display: inline-flex; }
}
@media (min-width: 1024px) {
  .nav { display: block; }
  .menu-toggle { display: none; }
  .brand { font-size: 1.5rem; }
}

/* Ohne JS: Navigation einfach sichtbar */
html:not(.js) .menu-toggle { display: none; }
html:not(.js) .nav { display: block; overflow-x: auto; }
@media (max-width: 1023px) {
  html:not(.js) .site-header { position: absolute; }
  html:not(.js) .nav__list { gap: 1rem; }
  html:not(.js) .site-header__cta { display: none; }
}

/* ---------- Mobile Menü ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--header-h) + 2rem) var(--pad) 2rem;
  background: var(--black);
  color: var(--fog);
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__list { display: grid; gap: 0.15rem; }
.mobile-menu__list a {
  display: block;
  overflow: hidden;
  padding-block: 0.2rem;
  font-size: clamp(2.25rem, 10.5vw, 3.75rem);
  font-stretch: 118%;
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.mobile-menu__list a span { display: inline-block; }
.mobile-menu__list a:hover span, .mobile-menu__list a:focus-visible span { color: var(--accent-light); }
.mobile-menu__foot {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-6);
  border-top: 1px solid var(--fog-line);
  font-size: 1.0625rem;
}
.mobile-menu__foot a { text-decoration: none; padding-block: 0.4rem; }
.mobile-menu__foot .mobile-menu__cta { justify-self: start; margin-bottom: var(--s-2); padding-block: 0.85rem; }
html.menu-open .site-header { color: var(--fog); transform: none; }
html.menu-open .site-header::before { opacity: 0; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 4.5rem));
  background-color: var(--surface);
  color: var(--ink);
  overflow: clip;
  isolation: isolate;
}

.hero__grid {
  flex: 1;
  display: grid;
  gap: clamp(3rem, 8vw, 5rem);
  align-items: center;
  padding-bottom: clamp(2rem, 6vh, 4rem);
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  font-size: var(--fs-small);
  font-weight: 560;
  color: var(--ink-soft);
}
.hero__kicker .dot-led { background: var(--accent); }

.hero__title {
  font-size: var(--fs-display-xl);
  font-stretch: 125%;
  font-weight: 820;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-wrap: nowrap;
}
.hero__line {
  display: block;
  overflow: hidden;
  padding: 0.07em 0.1em 0.06em 0;
  margin-bottom: -0.05em;
}
.hero__line-inner { display: inline-block; }
.hero__line--thin {
  padding-left: 1.4em;
  font-weight: 260;
  color: var(--ink-soft);
}
.hero__lead {
  max-width: 36rem;
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
}
.hero__assure {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 36rem;
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Häkchen als Strich-Icon (Zusagen, Hero) */
.tick {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.05rem;
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ---------- Aufteilung ohne Bild (seit 21.10.2026) ----------
   Links die große Überschrift mit der blauen Zeile, rechts unten Absatz, Buttons und
   Zusagen. Beide Spalten enden unten auf einer Linie, der Block steht senkrecht in der
   Mitte. Untereinander (unter 1100 px)
   steht alles in einer Spalte. */
.hero__grid { row-gap: clamp(1.25rem, 3vh, 2rem); }
.hero__side .hero__lead { margin-top: 0; }

@media (min-width: 1100px) {
  .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(3rem, 5vw, 6rem);
    align-content: center;
    align-items: end;
  }
  .hero__title { font-size: min(0.6rem + 7.4vw, 7.5rem, 15vh); }
  .hero__side { padding-bottom: 0.35rem; }
}
@media (max-width: 520px) {
  .hero__title { font-stretch: 108%; font-size: calc(0.6rem + 9.2vw); }
  .hero__line--thin { padding-left: 0.9em; }
}

/* ==========================================================================
   MANIFEST
   ========================================================================== */
.manifest {
  padding-block: var(--section);
  background: var(--white);
}
.manifest__grid {
  display: grid;
  gap: var(--s-6) var(--gutter);
}
.section-label,
.manifest__label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-small);
  font-weight: 650;
  font-stretch: 105%;
  line-height: 1.3;
  color: var(--ink);
}
.manifest__text {
  max-width: 34ch;
  font-size: var(--fs-statement);
  font-weight: 470;
  line-height: 1.24;
  letter-spacing: -0.012em;
}
.manifest__text .w { transition: color 0.2s linear; }
.motion-ok .manifest__text .w { color: var(--word-dim); }
.manifest__aside {
  display: grid;
  gap: var(--s-4);
  max-width: 30rem;
  color: var(--ink-soft);
}
.manifest__aside .link-arrow { color: var(--ink); justify-self: start; }
@media (min-width: 900px) {
  .manifest__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .manifest__label { grid-column: 1 / 4; align-self: start; padding-top: 0.9rem; }
  .manifest__text { grid-column: 4 / 13; }
  .manifest__aside { grid-column: 8 / 13; margin-top: var(--s-6); }
}

/* ==========================================================================
   COLLEKTRA – eigenes Produkt als Referenz
   Schaufenster: Kapitel links als Reiter, Browserfenster rechts. Seit
   14.10.2026 ohne Scroll-Kopplung: Ein Reiter wechselt nur das Kapitel, und
   das Schaufenster rückt an den oberen Rand.
   ========================================================================== */
.product {
  position: relative;
  padding-top: var(--section);
  background: var(--black-deep);
  color: var(--fog);
  isolation: isolate;
}

.product__head {
  display: grid;
  gap: var(--s-5) var(--gutter);
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
.product__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-small);
  font-weight: 560;
  color: var(--fog-muted);
}
.dot-led--live { position: relative; }
.product__head .display-l { max-width: 13ch; }
.product__intro {
  display: grid;
  gap: var(--s-4);
  align-content: end;
  max-width: 30rem;
  color: var(--fog-muted);
}
.product__logo { width: clamp(9rem, 7rem + 5vw, 12rem); height: auto; margin-bottom: var(--s-1); }
.product__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
button.link-arrow {
  padding: 0;
  border: 0;
  background-color: transparent;
  font: inherit;
  font-weight: 650;
  font-stretch: 108%;
}
@media (min-width: 900px) {
  .product__head { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .product__kicker { grid-column: 1 / -1; }
  .product__head .display-l { grid-column: 1 / 8; }
  .product__intro { grid-column: 8 / 13; }
}

/* ---------- Schaufenster ---------- */
.showcase { position: relative; }
.showcase__grid {
  display: grid;
  gap: var(--s-6) var(--gutter);
}
/* Mobil: Reiter → Bild → Text (die Spalte löst sich auf) */
.showcase__copy { display: contents; }
.showcase__tabs { order: 1; }
.showcase__stage { order: 2; }
.showcase__panels { order: 3; }

.showcase__tabs {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--pad) * -1);
  padding: 0.25rem var(--pad);
}
.showcase__tabs::-webkit-scrollbar { display: none; }
.showcase__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--fog-line);
  border-radius: 999px;
  background: none;
  color: var(--fog-muted);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.showcase__tab:hover { color: var(--fog); border-color: oklch(0.97 0 0 / 0.4); }
.showcase__tab[aria-selected="true"] { color: var(--ink); background: var(--fog); border-color: var(--fog); }
.showcase__tab:focus-visible { outline: 2px solid var(--fog); outline-offset: 3px; }
.showcase__num { font-size: var(--fs-xs); font-weight: 650; font-variant-numeric: tabular-nums; opacity: 0.75; }

.showcase__panels { display: grid; }
.showcase__panel {
  grid-area: 1 / 1;
  display: grid;
  gap: var(--s-4);
  align-content: start;
}
.showcase__panel:focus-visible { outline: 2px solid var(--fog); outline-offset: 0.75rem; }
.js .showcase__panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: opacity 0.3s var(--ease-out), transform 0.6s var(--ease-expo), visibility 0s linear 0.3s;
}
.js .showcase__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s 0.12s var(--ease-out), transform 0.9s 0.12s var(--ease-expo), visibility 0s;
}
.showcase__title {
  max-width: 18ch;
  font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.4rem);
  font-stretch: 112%;
  font-weight: 740;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.showcase__panel p { max-width: 42ch; color: var(--fog-muted); }
.showcase__points { display: grid; margin-top: var(--s-2); counter-reset: hs; }
.showcase__points li {
  counter-increment: hs;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.5rem;
  border-top: 1px solid var(--fog-line);
  font-size: 0.9375rem;
  font-weight: 560;
  line-height: 1.35;
}
.showcase__points li::before {
  content: counter(hs);
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  transition: transform 0.45s var(--ease-expo), background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.showcase__points li.is-hot::before { transform: scale(1.2); background: var(--accent-light); color: var(--ink); }

/* ---------- Bühne: Browserfenster ---------- */
.showcase__stage {
  position: relative;
  min-width: 0;
  transform: perspective(2200px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg));
}
.window {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: oklch(0.21 0 0);
  box-shadow:
    0 0 0 1px var(--fog-line),
    0 2.5rem 5rem -2rem oklch(0 0 0 / 0.85),
    0 1rem 2rem -1rem oklch(0 0 0 / 0.5);
  transform-origin: 0 50%;
  transition: transform 0.9s var(--ease-expo), filter 0.6s var(--ease-out);
}
.window__bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: 2.25rem;
  padding-inline: 0.85rem;
  border-bottom: 1px solid oklch(0.97 0 0 / 0.08);
}
.window__dots { display: flex; gap: 0.4rem; flex: none; }
.window__dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: oklch(0.97 0 0 / 0.2); }
.window__url {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 72%;
  margin-inline: auto;
  padding: 0.2rem 0.85rem;
  border-radius: 999px;
  background: oklch(0.97 0 0 / 0.07);
  font-size: 0.75rem;
  font-stretch: 94%;
  color: var(--fog-muted);
  white-space: nowrap;
  overflow: hidden;
  translate: -1.4rem 0;
}
.window__url svg { flex: none; width: 0.8rem; height: 0.8rem; fill: none; stroke: currentColor; stroke-width: 2; }
.window__url b { display: inline-block; overflow: hidden; text-overflow: ellipsis; font-weight: 560; color: var(--fog); }

.window__screen {
  position: relative;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  background: oklch(0.965 0.003 265);
}
.shot { position: absolute; inset: 0; margin: 0; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.js .shot { clip-path: inset(0 0 100% 0); }
.js [data-dir="back"] > .shot { clip-path: inset(100% 0 0 0); }
.js .shot.is-prev { clip-path: inset(0); z-index: 1; }
.js .shot.is-active { clip-path: inset(0); z-index: 2; transition: clip-path 0.95s var(--ease-expo); }
.js .shot img { scale: 1.04; transform-origin: 50% 0; }
.js .shot.is-active img { scale: 1; transition: scale 1.4s var(--ease-expo); }

/* Scanlinie folgt der Kante des neuen Bildes */
.window__screen::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  height: 2px;
  background: var(--accent-light);
  box-shadow: 0 0 1.25rem 0.3rem oklch(0.6 0.21 265 / 0.55);
  opacity: 0;
  pointer-events: none;
}
.window__screen.is-scanning::after { animation: scan-down 0.95s var(--ease-expo) both; }
.window__screen.is-scanning[data-dir="back"]::after { animation-name: scan-up; }
@keyframes scan-down { 0% { top: 0; opacity: 1; } 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes scan-up { 0% { top: 100%; opacity: 1; } 80% { opacity: 1; } 100% { top: 0; opacity: 0; } }

/* ---------- Markierungen auf den Bildern ---------- */
.shot__hs { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hs { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); --i: 0; }
.hs:nth-child(2) { --i: 1; }
.hs:nth-child(3) { --i: 2; }
.hs:nth-child(4) { --i: 3; }
.hs b {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 750;
  translate: -50% -50%;
  box-shadow: 0 0 0 3px oklch(1 0 0 / 0.92), 0 0.5rem 1rem -0.25rem oklch(0.3 0.15 266 / 0.6);
  transition: scale 0.45s var(--ease-expo), background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.hs b::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
}
.hs em {
  position: absolute;
  top: 0;
  left: 1.2rem;
  padding: 0.32rem 0.6rem;
  border-radius: 0.4rem;
  background: var(--ink);
  color: var(--fog);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  translate: 0 -50%;
  box-shadow: 0 0.75rem 1.5rem -0.5rem oklch(0 0 0 / 0.55);
}
.hs[data-side="l"] em { left: auto; right: 1.2rem; }
.hs.is-hot b { scale: 1.25; background: var(--accent-light); color: var(--ink); }

/* Einblenden nur auf dem aktiven Bild bzw. dem vorderen Handy */
.js .hs b, .js .hs em { opacity: 0; }
.js .hs b { scale: 0.4; }
.js .hs em { transform: translateX(-0.5rem); }
.js .hs[data-side="l"] em { transform: translateX(0.5rem); }
.js .shot.is-active .hs b,
.js [data-mode="phone"] .phone--front .hs b {
  opacity: 1;
  scale: 1;
  transition: opacity 0.35s calc(0.55s + var(--i) * 0.12s) var(--ease-out), scale 0.6s calc(0.55s + var(--i) * 0.12s) var(--ease-expo), background-color 0.3s, color 0.3s;
}
.js .shot.is-active .hs.is-hot b,
.js [data-mode="phone"] .phone--front .hs.is-hot b { scale: 1.25; transition-delay: 0s; }
.js .shot.is-active .hs em,
.js [data-mode="phone"] .phone--front .hs em {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s calc(0.7s + var(--i) * 0.12s) var(--ease-out), transform 0.7s calc(0.7s + var(--i) * 0.12s) var(--ease-expo);
}
[data-mode="phone"] .window .shot__hs { visibility: hidden; }
@media (max-width: 639px) {
  .hs em { display: none; }
  .hs b { width: 1.3rem; height: 1.3rem; font-size: 0.6875rem; box-shadow: 0 0 0 2px oklch(1 0 0 / 0.92), 0 0.4rem 0.8rem -0.2rem oklch(0.3 0.15 266 / 0.6); }
}

/* ---------- Bühne: Handys (Schuldnerportal) ---------- */
.phones {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  translate: calc(var(--ry, 0) * -0.7%) calc(var(--rx, 0) * 0.7%);
}
.phone {
  /* Rahmen 412 × 910: 11 px Rand, 44 px Statusleiste, Bild 390 × 844 */
  position: absolute;
  bottom: -9%;
  height: 112%;
  aspect-ratio: 412 / 910;
  margin: 0;
  border-radius: 13.6% / 6.15%;
  background: oklch(0.13 0 0);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.16),
    inset 0 0 0 3px oklch(0.09 0 0),
    0 2.5rem 4rem -1.5rem oklch(0 0 0 / 0.85);
  container-type: inline-size;
  opacity: 0;
  transition: transform 1s var(--ease-expo), opacity 0.45s var(--ease-out);
}
.phone__status {
  position: absolute;
  top: 1.209%;
  left: 2.67%;
  width: 94.66%;
  height: 4.835%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 9%;
  border-radius: 11.8% 11.8% 0 0 / 100% 100% 0 0;
  background: #17181c;
  color: #fff;
}
.phone__status b { font-size: 3.6cqw; font-weight: 650; font-variant-numeric: tabular-nums; }
.phone__status i {
  /* Akku */
  width: 6.5cqw;
  height: 3cqw;
  border: 1px solid oklch(1 0 0 / 0.75);
  border-radius: 0.8cqw;
  background: linear-gradient(to right, #fff 70%, transparent 70%) content-box;
  padding: 1px;
}
.phone__status::after {
  /* Kamera-Insel */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 29%;
  height: 72%;
  border-radius: 999px;
  background: #000;
  translate: -50% -42%;
}
.phone img {
  position: absolute;
  top: 6.044%;
  left: 2.67%;
  width: 94.66%;
  height: 92.747%;
  object-fit: cover;
  object-position: top;
  border-radius: 0 0 11.8% 11.8% / 0 0 5.45% 5.45%;
}
.phone .shot__hs { inset: 6.044% 2.67% 1.209%; }
.phone--front { right: 22%; transform: translateY(20%) rotate(5deg); z-index: 2; }
.phone--back { right: 1%; transform: translateY(28%) rotate(11deg) scale(0.86); }

.showcase__stage[data-mode="phone"] .window { transform: scale(0.9); filter: brightness(0.42) saturate(0.6); }
.showcase__stage[data-mode="phone"] .phone { opacity: 1; }
.showcase__stage[data-mode="phone"] .phone--front { transform: translateY(0) rotate(-2.5deg); }
.showcase__stage[data-mode="phone"] .phone--back { transform: translateY(-5%) rotate(6deg) scale(0.86); transition-delay: 0.08s; }

/* ---------- Große Bildschirme: Kapitel links, Bühne rechts ---------- */
@media (min-width: 1024px) {
  .showcase__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .showcase__copy { display: grid; gap: clamp(1.75rem, 4vh, 3rem); grid-column: 1 / 5; align-content: center; }
  .showcase__stage { grid-column: 5 / 13; width: 100%; max-width: calc((100svh - 9rem) * 1.52); justify-self: end; }
  .showcase__tabs { flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; overflow: visible; }
  .showcase__tab {
    min-height: 2.4rem;
    padding: 0.35rem 0 0.35rem 1.1rem;
    border: 0;
    border-radius: 0;
    font-size: 1rem;
  }
  .showcase__tab::before,
  .showcase__tab::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3rem;
    bottom: 0.3rem;
    width: 2px;
  }
  .showcase__tab::before { background: var(--fog-line); }
  .showcase__tab::after {
    background: var(--accent-light);
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition: transform 0.5s var(--ease-expo);
  }
  .showcase__tab[aria-selected="true"] { color: var(--fog); background: none; }
  .showcase__tab[aria-selected="true"] .showcase__num { color: var(--accent-light); opacity: 1; }
  .showcase__tab[aria-selected="true"]::after { transform: scaleY(1); }
  .showcase__tab:focus-visible { outline-offset: 0; }
}

/* Niedrige Bildschirme: Kapitelspalte kompakter, damit alles in eine Höhe passt */
@media (min-width: 1024px) and (max-height: 820px) {
  .showcase__copy { gap: 1.25rem; }
  .showcase__tab { min-height: 1.9rem; padding-block: 0.2rem; font-size: 0.9375rem; }
  .showcase__panel { gap: var(--s-3); }
  .showcase__title { font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem); }
  .showcase__panel p { font-size: 0.9375rem; line-height: 1.5; }
  .showcase__points li { padding-block: 0.3rem; font-size: 0.875rem; }
  .showcase__points li::before { width: 1.3rem; height: 1.3rem; }
}

/* ---------- Zahlen, Hinweis, Laufband ---------- */
.product__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--gutter);
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-top: var(--s-6);
  border-top: 1px solid var(--fog-line);
}
.product__facts li { display: grid; gap: var(--s-2); align-content: start; }
.product__facts b {
  font-size: clamp(2.6rem, 1.6rem + 3vw, 4.5rem);
  font-stretch: 120%;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.product__facts li:last-child b { color: var(--accent-light); }
.product__facts span { max-width: 24ch; font-size: var(--fs-small); color: var(--fog-muted); }
@media (min-width: 900px) {
  .product__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.product__note { margin-top: var(--s-6); font-size: var(--fs-xs); color: var(--fog-muted); }

.product__more {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--fog-line);
  overflow: hidden;
}
.product__more-title { margin-bottom: var(--s-4); font-size: var(--fs-small); font-weight: 600; color: var(--fog-muted); }
.marquee { overflow: hidden; }
.marquee__track {
  display: flex;
  gap: clamp(2rem, 4vw, 3.5rem);
  width: max-content;
  padding-inline: var(--pad);
}
.marquee__track li {
  display: inline-flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  font-stretch: 118%;
  font-weight: 720;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.marquee__track li::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  background: var(--accent-ink);
}
.marquee--dark .marquee__track li { color: var(--fog); }
.marquee--dark .marquee__track li::after { background: var(--accent-light); }
.motion-ok .marquee.is-running .marquee__track { animation: marquee var(--marquee-dur, 50s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
html:not(.motion-ok) .marquee__track { flex-wrap: wrap; width: auto; row-gap: 0.75rem; }

/* Ohne JS: alle Bilder untereinander, Texte sichtbar, keine Reiter */
html:not(.js) .showcase__tabs { display: none; }
html:not(.js) .showcase__panels { gap: var(--s-7); }
html:not(.js) .showcase__panel { grid-area: auto; }
html:not(.js) .showcase .window__screen { display: grid; gap: 2px; aspect-ratio: auto; }
html:not(.js) .shot { position: relative; }
html:not(.js) .shot__hs { display: none; }
html:not(.js) .phones { position: relative; display: flex; justify-content: center; gap: var(--s-5); margin-top: var(--s-6); }
html:not(.js) .phones .phone { position: relative; inset: auto; height: auto; width: min(14rem, 42%); opacity: 1; transform: none; }

/* ==========================================================================
   PRODUKTE (eigene Seite) – Kopf, Produktkarte, Überleitung
   ========================================================================== */
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; }
.products-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 9vw, 7rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: var(--surface);
  color: var(--ink);
}
.products-hero__grid { display: grid; gap: var(--s-5) var(--gutter); }
.products-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-small);
  font-weight: 560;
  color: var(--ink-soft);
}
.products-hero__kicker .dot-led { background: var(--accent); }
.products-hero__title {
  max-width: 14ch;
  font-size: var(--fs-display-xl);
  font-stretch: 125%;
  font-weight: 820;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.products-hero__lead { max-width: 36rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); }
.products-list { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.product-card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 1rem 2rem -1.5rem oklch(0.2 0 0 / 0.25);
  transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.product-card:hover { border-color: var(--line-strong); box-shadow: 0 1.25rem 2.5rem -1.5rem oklch(0.2 0 0 / 0.35); }
.product-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.product-card__mark { flex: none; width: 2.75rem; height: 2.75rem; }
.product-card__body { display: grid; gap: 0.1rem; min-width: 0; }
.product-card__body b { font-size: 1.25rem; font-stretch: 112%; font-weight: 740; }
.product-card__body span { font-size: var(--fs-small); color: var(--ink-soft); }
.product-card__state {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--accent-ink);
}
.product-card__state .dot-led { background: var(--accent); }
.product-card__arrow {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.45s var(--ease-expo);
}
.product-card:hover .product-card__arrow { transform: translateY(0.25rem); }
@media (min-width: 900px) {
  .products-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .products-hero__kicker { grid-column: 1 / -1; }
  .products-hero__title { grid-column: 1 / 8; }
  .products-hero__lead { grid-column: 8 / 13; }
  .products-list { grid-column: 1 / 8; }
}
/* Auf der Produktseite folgt das Schaufenster direkt auf den Kopf */
.products-hero + .product { padding-top: clamp(4rem, 8vw, 7rem); }

.products-cta {
  padding-block: clamp(4rem, 3rem + 4vw, 7rem);
  background: var(--accent);
  color: var(--on-accent);
}
.products-cta__grid { display: grid; gap: var(--s-6) var(--gutter); align-items: center; }
.products-cta__text {
  max-width: 30ch;
  font-size: var(--fs-statement);
  font-weight: 470;
  line-height: 1.24;
  letter-spacing: -0.012em;
}
.products-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.products-cta__link { color: var(--on-accent); }
@media (min-width: 900px) {
  .products-cta__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .products-cta__text { grid-column: 1 / 8; }
  .products-cta__actions { grid-column: 9 / 13; justify-content: flex-end; }
}

/* ==========================================================================
   STARTSEITE: Teaser „Unser eigenes Produkt“
   ========================================================================== */
.teaser {
  padding-block: var(--section);
  background: var(--white);
  overflow: clip;
}
.teaser__grid { display: grid; gap: clamp(3rem, 6vw, 5rem) var(--gutter); align-items: center; }
.teaser__copy { display: grid; gap: var(--s-5); max-width: 34rem; }
.teaser__copy .display-l { max-width: 12ch; }
.teaser__text { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); }
.teaser__copy .link-arrow { justify-self: start; color: var(--ink); }
.teaser__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.teaser__copy .teaser__cta { color: var(--accent-ink); }
.teaser__media {
  position: relative;
  display: block;
  padding: 0 14% 9% 0;
  transform: perspective(2200px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg));
}
.teaser__media .window {
  display: block;
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.08), 0 2.5rem 5rem -2rem oklch(0 0 0 / 0.38), 0 1rem 2rem -1rem oklch(0 0 0 / 0.2);
}
.teaser__media:hover .window { transform: translateY(-0.3rem); }
.teaser__media .window__screen { display: block; }
.teaser__media .window__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.teaser__phone { right: 0; bottom: 0; height: 80%; opacity: 1; transform: rotate(-4deg); transition: none; }
@media (min-width: 1024px) {
  .teaser__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .teaser__copy { grid-column: 1 / 6; }
  .teaser__media { grid-column: 6 / 13; }
}

/* ==========================================================================
   LEISTUNGEN
   ========================================================================== */
.services {
  padding-block: var(--section);
  background: var(--white);
}
/* Folgt direkt auf das Manifest (beide weiß): eine Lücke reicht, eine feine Linie trennt */
.manifest + .services { padding-top: 0; }
.manifest + .services .services__grid {
  padding-top: var(--section);
  background: linear-gradient(var(--line), var(--line)) var(--pad) 0 / calc(100% - 2 * var(--pad)) 1px no-repeat;
}
.services__grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem) var(--gutter);
}
.services__sticky { display: grid; gap: var(--s-5); }
.services__intro { max-width: 32rem; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.5; }
@media (min-width: 1024px) {
  .services__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .services__aside { grid-column: 1 / 6; }
  .services__sticky { position: sticky; top: calc(var(--header-h) + 2rem); }
  .services__list { grid-column: 7 / 13; padding-top: 0.5rem; }
}

.service { border-top: 1px solid var(--line); }
.service:last-of-type { border-bottom: 1px solid var(--line); }
.service__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name toggle" "price price";
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  list-style: none;
  cursor: pointer;
}
.service__summary::-webkit-details-marker { display: none; }
.service__summary::marker { content: ""; }
.service__name {
  grid-area: name;
  font-size: clamp(1.45rem, 1rem + 1.6vw, 2.4rem);
  font-stretch: 112%;
  font-weight: 720;
  line-height: 1.05;
  letter-spacing: -0.018em;
  hyphens: manual;
  transition: transform 0.6s var(--ease-expo), color 0.35s var(--ease-out);
}
.service__price {
  grid-area: price;
  justify-self: start;
  padding: 0.3rem 0.75rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.service__toggle {
  grid-area: toggle;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), transform 0.6s var(--ease-expo);
}
.service__toggle::before, .service__toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.9rem;
  height: 2px;
  background: currentColor;
  translate: -50% -50%;
  transition: rotate 0.5s var(--ease-expo);
}
.service__toggle::after { rotate: 90deg; }
.service[open] .service__toggle { background: var(--ink); border-color: var(--ink); color: var(--fog); }
.service[open] .service__toggle::after { rotate: 0deg; }
.service__summary:hover .service__name { transform: translateX(0.4rem); color: var(--accent-ink); }
.service__summary:hover .service__toggle { transform: rotate(90deg); }
.service__summary:focus-visible { outline-offset: -2px; }

.service__content {
  display: grid;
  gap: var(--s-4);
  padding: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}
.service__lead { max-width: 40ch; font-size: var(--fs-lead); line-height: 1.45; }
.service__examples { display: grid; gap: 0.45rem; color: var(--ink-soft); }
.service__examples li { position: relative; padding-left: 1.4rem; }
.service__examples li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent-ink);
}
.service__meta { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.service__cta { justify-self: start; margin-top: calc(var(--s-2) * -1); color: var(--accent-ink); }
.services__note { margin-top: var(--s-5); font-size: var(--fs-small); color: var(--ink-soft); }

.service::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size 0.55s var(--ease-expo), content-visibility 0.55s allow-discrete;
}
.service[open]::details-content { block-size: auto; }
/* Öffnet man eine andere Leistung, schließt die bisherige sofort: sonst rutscht die neue beim Zuklappen weg */
.service.is-instant::details-content { transition: none; }

@media (min-width: 640px) {
  .service__summary {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "name price toggle";
  }
}

/* ==========================================================================
   PREISE / BELEGE
   ========================================================================== */
.pricing {
  padding-block: var(--section);
  background: var(--surface);
  overflow: clip;
}
.pricing__head { display: grid; gap: var(--s-5); max-width: 62rem; }
.pricing__intro { max-width: 40rem; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.5; }

.receipts {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  justify-content: center;
  align-items: start;
  margin-block: clamp(3.5rem, 7vw, 6rem);
}
.receipt {
  position: relative;
  width: min(100%, 25rem);
  justify-self: center;
  filter: drop-shadow(0 1.75rem 1.75rem oklch(0.19 0 0 / 0.13)) drop-shadow(0 0.25rem 0.4rem oklch(0.19 0 0 / 0.08));
}
.receipt--agency { rotate: -1.6deg; }
.receipt--helmor { rotate: 1.2deg; }
.receipt__paper {
  --zz: 0.9rem;
  padding: 2.25rem 1.75rem 2.5rem;
  background: var(--white);
  font-stretch: 74%;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x;
}
.receipt--agency .receipt__paper { background: oklch(0.985 0 0); color: var(--ink-soft); }
.receipt__brand {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: 1.5rem;
  font-stretch: 125%;
  font-weight: 820;
  line-height: 1.1;
  color: var(--ink);
  text-align: center;
}
.receipt--agency .receipt__brand { font-stretch: 100%; font-weight: 600; font-size: 1.25rem; color: var(--ink-soft); }
.receipt__sub {
  margin-top: 0.35rem;
  padding-bottom: 1rem;
  border-bottom: 1.5px dashed var(--line-strong);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.receipt__table { width: 100%; margin-top: 0.75rem; border-collapse: collapse; }
.receipt__table th { padding: 0.45rem 0.75rem 0.45rem 0; text-align: left; font-weight: 450; line-height: 1.3; }
.receipt__table td { padding: 0.45rem 0; text-align: right; white-space: nowrap; font-weight: 560; vertical-align: top; }
.receipt__table tfoot th, .receipt__table tfoot td {
  padding-top: 0.9rem;
  border-top: 3px double var(--ink);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
}
.receipt__small {
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1.5px dashed var(--line-strong);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.receipt__stamp {
  position: absolute;
  right: -1.5rem;
  top: -1.1rem;
  padding: 0.3rem 0.7rem 0.25rem;
  border: 3px solid var(--accent-ink);
  border-radius: 0.4rem;
  color: var(--accent-ink);
  font-size: 1.125rem;
  font-stretch: 125%;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  rotate: -11deg;
  mix-blend-mode: multiply;
  pointer-events: none;
}
@media (max-width: 639px) {
  .receipts { justify-content: stretch; }
  .receipt { width: calc(100% - 1.75rem); }
  .receipt--agency { justify-self: end; }
  .receipt--helmor { justify-self: start; }
  .receipt__paper { padding-inline: 1.25rem; }
  .receipt__stamp { right: -1.1rem; top: auto; bottom: -0.9rem; font-size: 0.9375rem; }
}
@media (min-width: 860px) {
  .receipts { grid-template-columns: repeat(2, minmax(0, 25rem)); }
  .receipt--helmor { margin-top: 4.5rem; }
}

.reasons { display: grid; border-top: 1px solid var(--line); }
.reason {
  display: grid;
  gap: var(--s-3) var(--gutter);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}
.reason__title {
  font-size: var(--fs-title);
  font-stretch: 114%;
  font-weight: 720;
  letter-spacing: -0.01em;
}
.reason p { max-width: 52ch; color: var(--ink-soft); }
@media (min-width: 900px) {
  .reason { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; }
  .reason__title { grid-column: 1 / 6; }
  .reason p { grid-column: 6 / 12; }
}

/* Handlungsaufforderung nach den Belegen: die eine weiße Fläche im Abschnitt */
.pricing__cta {
  display: grid;
  gap: var(--s-5) var(--gutter);
  align-items: center;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: 0 1.5rem 3rem -2rem oklch(0.2 0 0 / 0.3), 0 0 0 1px var(--line);
}
.pricing__cta-text { display: grid; gap: var(--s-3); max-width: 46rem; }
.pricing__cta-title {
  font-size: var(--fs-title);
  font-stretch: 114%;
  font-weight: 720;
  letter-spacing: -0.01em;
}
.pricing__cta-text p { color: var(--ink-soft); }
.pricing__cta-text .pricing__cta-note { font-size: var(--fs-small); }
.pricing__cta-btn { justify-self: start; }
@media (min-width: 900px) {
  .pricing__cta { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pricing__cta-text { grid-column: 1 / 9; }
  .pricing__cta-btn { grid-column: 9 / 13; justify-self: end; }
}

/* ==========================================================================
   HALTUNG & ABLAUF
   ========================================================================== */
.approach {
  padding-block: var(--section);
  background: var(--black);
  color: var(--fog);
  overflow: clip;
}
.approach__title { max-width: 15ch; }

.principles {
  display: grid;
  gap: 0 var(--gutter);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.principle {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--fog-line);
}
.principle__title {
  font-size: clamp(1.45rem, 1.05rem + 1.3vw, 2.25rem);
  font-stretch: 112%;
  font-weight: 720;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.principle p { max-width: 44ch; color: var(--fog-muted); line-height: 1.65; }
@media (min-width: 860px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 5rem); }
}

.process { margin-top: clamp(4.5rem, 9vw, 8rem); }
.process__title {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-size: var(--fs-title);
  font-stretch: 112%;
  font-weight: 700;
}
.process__track {
  display: none;
  position: relative;
  height: 2px;
  margin-bottom: var(--s-6);
  background: var(--fog-line);
}
.process__fill {
  position: absolute;
  inset: 0;
  background: var(--accent-light);
  transform-origin: 0 50%;
}
.motion-ok .process__fill { transform: scaleX(0); }
.process__steps { display: grid; gap: var(--s-6); counter-reset: step; }
.step { display: grid; gap: var(--s-2); align-content: start; position: relative; }
.step__num {
  font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem);
  font-stretch: 125%;
  font-weight: 820;
  line-height: 1;
  color: var(--fog);
  font-variant-numeric: tabular-nums;
  transition: color 0.5s var(--ease-out);
}
.step__title { font-size: 1.25rem; font-stretch: 110%; font-weight: 700; margin-top: var(--s-2); }
.step__time { font-size: var(--fs-small); font-weight: 600; color: var(--accent-light); }
.step p:last-child { color: var(--fog-muted); font-size: 1rem; }

@media (max-width: 899px) {
  .process__steps { padding-left: 1.5rem; border-left: 2px solid var(--fog-line); }
  .step::before {
    content: "";
    position: absolute;
    left: calc(-1.5rem - 6px);
    top: 0.9rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-light);
  }
}
@media (min-width: 900px) {
  .process__track { display: block; }
  .process__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gutter); }
}
.process__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5) var(--s-6);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: var(--s-6);
  border-top: 1px solid var(--fog-line);
}
.process__cta p {
  max-width: 28ch;
  font-size: var(--fs-title);
  font-stretch: 110%;
  font-weight: 650;
  line-height: 1.25;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
  padding-block: var(--section);
  background: var(--surface);
}
.faq__grid { display: grid; gap: var(--s-7) var(--gutter); }
.faq__title { max-width: 12ch; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-of-type { border-bottom: 1px solid var(--line); }
.faq__item summary {
  position: relative;
  display: block;
  padding: 1.35rem 3.5rem 1.35rem 0;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 650;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
  transition: color 0.3s var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
.faq__item summary::before, .faq__item summary::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 1rem;
  height: 2px;
  background: currentColor;
  transition: rotate 0.5s var(--ease-expo);
}
.faq__item summary::after { rotate: 90deg; }
.faq__item[open] summary::after { rotate: 0deg; }
.faq__item summary:hover { color: var(--accent-ink); }
.faq__item summary:focus-visible { outline-offset: -2px; }
.faq__item p { max-width: 60ch; padding-bottom: 1.5rem; color: var(--ink-soft); }
.faq__item::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size 0.5s var(--ease-expo), content-visibility 0.5s allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }
.faq__item p a { color: var(--ink); font-weight: 650; }
.faq__item p a:hover { color: var(--accent-ink); }

/* Frage stellen: zwei Felder direkt unter den Fragen */
.ask {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: 0 1.5rem 3rem -2rem oklch(0.2 0 0 / 0.3), 0 0 0 1px var(--line);
}
.ask__head { display: grid; gap: var(--s-1); }
.ask__title { font-size: var(--fs-title); font-stretch: 112%; font-weight: 720; line-height: 1.2; }
.ask__lead { color: var(--ink-soft); }
.ask__row { display: grid; gap: var(--s-4); align-items: start; }
.ask .field textarea { min-height: 5.5rem; }
@media (min-width: 640px) {
  .ask__row { grid-template-columns: minmax(0, 1fr) auto; }
  .ask__row .btn { margin-top: 1.75rem; }
}
.ask__done {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  align-items: center;
  margin-top: var(--s-7);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line);
}
.ask__done[hidden] { display: none; }
.ask__done:focus { outline: none; }
.ask__done p { color: var(--ink-soft); }
.ask__done .ask__title { color: var(--ink); }
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .faq__title { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--header-h) + 2rem); }
  .faq__list { grid-column: 6 / 13; }
}

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.contact {
  padding-block: var(--section);
  background: var(--accent);
  color: var(--on-accent);
}
.contact__title {
  max-width: 13ch;
  font-size: var(--fs-display-xl);
  font-stretch: 125%;
  font-weight: 820;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.contact__intro { max-width: 34rem; margin-top: var(--s-5); font-size: var(--fs-lead); line-height: 1.5; }
.contact__grid {
  display: grid;
  gap: var(--gutter);
  align-items: start;
  margin-top: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .next { grid-column: 1 / 6; position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .form-card { grid-column: 6 / 13; }
}

/* Was nach der Anfrage passiert: dunkle Karte neben dem Formular */
.next {
  display: grid;
  gap: var(--s-5);
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-l);
  background: var(--ink);
  color: var(--fog);
}
.next__title { font-size: var(--fs-title); font-stretch: 112%; font-weight: 720; line-height: 1.2; }
.next__steps { display: grid; counter-reset: next; }
.next__steps li {
  counter-increment: next;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem var(--s-4);
  padding-block: var(--s-4);
  border-top: 1px solid var(--fog-line);
}
.next__steps li::before {
  content: counter(next);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.next__steps b { font-size: 1.0625rem; font-weight: 680; line-height: 1.35; }
.next__steps span { color: var(--fog-muted); line-height: 1.55; }
.next__note { padding-top: var(--s-4); border-top: 1px solid var(--fog-line); font-weight: 560; line-height: 1.5; }
.next__place { color: var(--fog-muted); line-height: 1.55; }

.form-card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-l);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 2rem 4rem -2.5rem oklch(0.19 0 0 / 0.45);
}
.form-card:focus { outline: none; }
.form-card__head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.form-card__title { font-size: var(--fs-title); font-stretch: 112%; font-weight: 720; }
.form-card__lead { color: var(--ink-soft); }
/* Erreichbarkeit nach den Geschäftszeiten Mo–Fr 8–17 Uhr (deutsche Zeit) */
.availability {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-small);
  font-weight: 560;
}
.availability__led { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--line-strong); }
.availability[data-open="true"] .availability__led { background: var(--accent); }
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) {
  .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.field { display: grid; gap: 0.4rem; align-content: start; }
.field label { font-size: 0.9375rem; font-weight: 620; }
.field__opt { font-weight: 450; color: var(--ink-soft); }
.field input, .field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 7.5rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); }
.field input:hover, .field textarea:hover { border-color: var(--ink-soft); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px oklch(0.4 0 0 / 0.25);
}
.field [aria-invalid="true"] { border-color: var(--danger); }
.field__error {
  display: flex;
  gap: 0.4rem;
  font-size: var(--fs-small);
  font-weight: 550;
  color: var(--danger);
}
.field__error::before { content: "!"; display: grid; place-items: center; flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; border-radius: 50%; background: var(--danger); color: var(--white); font-size: 0.75rem; font-weight: 800; }
.form__privacy { font-size: var(--fs-small); color: var(--ink-soft); }
.form__status:empty { display: none; }
.form__status {
  padding: var(--s-4);
  border-radius: var(--radius);
  background: var(--gray-200);
  color: var(--ink);
  font-weight: 550;
}
.form__status[data-type="error"] { background: oklch(0.94 0.04 27); }

.form-card__foot {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.promises {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-size: var(--fs-small);
  font-weight: 620;
}
.promises li { display: inline-flex; align-items: flex-start; gap: 0.4rem; }
.form-card__direct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-4);
  font-size: 1rem;
}
.form-card__direct p { color: var(--ink-soft); }
.form-card__direct a { font-weight: 650; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-block: 0.4rem; }
.form-card__direct a:hover { color: var(--accent-ink); }

/* ==========================================================================
   ANFRAGE-ASSISTENT – vier kurze Schritte statt eines langen Formulars
   Ohne JS stehen alle Schritte untereinander und das Formular geht direkt
   an kontakt.php.
   ========================================================================== */
.funnel__progress { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.funnel__count {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
.funnel__count b { font-weight: 700; }
.funnel__count span { color: var(--ink-soft); }
.funnel__track {
  position: relative;
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--gray-200);
}
.funnel__fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(var(--progress, 0.25));
  transform-origin: 0 50%;
  transition: transform 0.6s var(--ease-expo);
}
html:not(.js) .funnel__progress { display: none; }

.funnel__step {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.funnel__step:focus { outline: none; }
.js .funnel__step:not(.is-current) { display: none; }
html:not(.js) .funnel__step + .funnel__step { padding-top: var(--s-6); border-top: 1px solid var(--line); }
.motion-ok .funnel__step.is-current { animation: step-in 0.55s var(--ease-expo) both; }
.motion-ok .funnel[data-dir="back"] .funnel__step.is-current { animation-name: step-in-back; }
.motion-ok .funnel[data-dir="none"] .funnel__step.is-current { animation: none; }
@keyframes step-in { from { opacity: 0; transform: translateX(1.5rem); } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-1.5rem); } }

.funnel__q {
  padding: 0;
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  font-stretch: 110%;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* float löst die Legende aus dem Rahmen des Fieldsets: Sie wird ein normales
   Grid-Element (Abstände per gap) und sitzt nicht mehr auf der Trennlinie. */
.funnel__step > legend, .chips-group > legend { float: left; width: 100%; }

/* Große Antworten (Schritt 1, Wunsch in Schritt 4) */
.choices, .modes { display: grid; gap: var(--s-2); }
/* Rückruf: Zeitfenster nur, wenn „Rückruf“ gewählt ist (ohne JS immer sichtbar) */
.js .callback:not(.is-on) { display: none; }
.choice {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.choice input, .chip input, .check input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.choice:hover { border-color: var(--ink); }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.choice__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.choice__mark::after {
  content: "";
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--on-accent);
  border-bottom: 2px solid var(--on-accent);
  transform: translate(0, -1px) rotate(-45deg) scale(0);
  transition: transform 0.35s var(--ease-expo);
}
.choice input:checked ~ .choice__mark { border-color: var(--accent); background: var(--accent); }
.choice input:checked ~ .choice__mark::after { transform: translate(0, -1px) rotate(-45deg) scale(1); }
.choice__body { display: grid; gap: 0.1rem; min-width: 0; }
.choice__body b { font-weight: 650; line-height: 1.3; }
.choice__body small { font-size: var(--fs-small); line-height: 1.4; color: var(--ink-soft); }
.choice__price {
  font-size: var(--fs-small);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.choice--mode { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.choice--mode .choice__mark { margin-top: 0.05rem; }
@media (max-width: 479px) {
  .choice { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .choice__mark { margin-top: 0.05rem; }
  .choice__price { grid-column: 2; }
}

/* Kleine Antworten (Branche, Größe, Start) */
.chips-group { display: grid; gap: var(--s-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.chips-group__label { padding: 0; font-size: 0.9375rem; font-weight: 620; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { position: relative; display: inline-flex; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.45rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 560;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.25s var(--ease-out), background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--fog); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Häkchen-Felder */
.checks { display: grid; gap: var(--s-3); }
.check {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  cursor: pointer;
}
.check[hidden] { display: none; }
.check__box {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.02rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 0.3rem;
  background: var(--white);
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.check__box::after {
  content: "";
  width: 0.6rem;
  height: 0.32rem;
  border-left: 2px solid var(--on-accent);
  border-bottom: 2px solid var(--on-accent);
  transform: translate(0, -1px) rotate(-45deg) scale(0);
  transition: transform 0.3s var(--ease-expo);
}
.check:hover .check__box { border-color: var(--ink); }
.check input:checked + .check__box { border-color: var(--accent); background: var(--accent); }
.check input:checked + .check__box::after { transform: translate(0, -1px) rotate(-45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--ink); outline-offset: 2px; }
.check b { font-weight: 700; font-variant-numeric: tabular-nums; }

.field__hint { margin-top: -0.2rem; font-size: var(--fs-small); color: var(--ink-soft); }
.field__suggest { font-size: var(--fs-small); color: var(--ink); }
.field__suggest button {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 700;
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.funnel__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}
.funnel__nav .btn { margin-left: auto; }
.funnel__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-weight: 600;
  transition: color 0.25s var(--ease-out);
}
.funnel__back:hover { color: var(--ink); }
.funnel__back svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.45s var(--ease-expo); }
.funnel__back:hover svg { transform: translateX(-0.2rem); }
html:not(.js) .funnel__nav .btn { margin-left: 0; }

/* Spamschutz: für Menschen unsichtbar */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Nach dem Absenden */
.funnel-done, .funnel-mail { display: grid; gap: var(--s-4); }
.funnel-done[hidden], .funnel-mail[hidden] { display: none; }
.funnel-done:focus, .funnel-mail:focus { outline: none; }
.funnel-done__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.25rem;
  font-weight: 800;
}
.motion-ok .funnel-done:not([hidden]) .funnel-done__icon { animation: tick-in 0.6s var(--ease-expo) both; }
.funnel-done__title { font-size: var(--fs-title); font-stretch: 112%; font-weight: 720; line-height: 1.2; }
.funnel-done__steps { display: grid; gap: var(--s-3); counter-reset: done; }
.funnel-done__steps li {
  counter-increment: done;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
}
.funnel-done__steps li::before {
  content: counter(done);
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.funnel-done__tip { padding: var(--s-4); border-radius: var(--radius); background: var(--surface); color: var(--ink-soft); font-size: 0.9375rem; }
.funnel-done__confirm { font-size: var(--fs-small); color: var(--ink-soft); }
.funnel-done__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.funnel-mail p { color: var(--ink-soft); }
.funnel-mail p a { color: var(--ink); font-weight: 650; }
.funnel-mail__text {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.875rem;
  line-height: 1.5;
  resize: vertical;
}
.funnel-mail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }

/* ==========================================================================
   CTA-LEISTE (mobil) – erscheint nach dem Hero, verschwindet bei Kontakt und Footer
   ========================================================================== */
.cta-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  display: none;
  padding: 0 var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
@media (max-width: 1023px) {
  .js .cta-bar { display: block; }
}
html.menu-open .cta-bar, html.dialog-open .cta-bar { display: none; }
.cta-bar__btn {
  width: 100%;
  pointer-events: auto;
  box-shadow: 0 1rem 2rem -0.75rem oklch(0.25 0.12 266 / 0.55), 0 0 0 1px oklch(1 0 0 / 0.18);
  transform: translateY(calc(100% + 2.5rem + env(safe-area-inset-bottom, 0px)));
  visibility: hidden;
  transition: transform 0.45s var(--ease-expo), visibility 0s linear 0.45s, color 0.35s var(--ease-out);
}
.cta-bar[data-show="true"] .cta-bar__btn {
  transform: none;
  visibility: visible;
  transition: transform 0.6s var(--ease-expo), visibility 0s, color 0.35s var(--ease-out);
}
.cta-bar__btn svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  padding-top: clamp(4.5rem, 8vw, 7rem);
  background: var(--black-deep);
  color: var(--fog);
  overflow: hidden;
}
.footer__top { display: grid; gap: var(--s-7) var(--gutter); }
.footer__claim { max-width: 26ch; font-size: var(--fs-title); font-stretch: 108%; font-weight: 560; line-height: 1.3; }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--s-6) var(--gutter); }
.footer__h { margin-bottom: var(--s-3); font-size: var(--fs-small); font-weight: 600; color: var(--fog-muted); }
.footer__col ul { display: grid; gap: 0.15rem; }
.footer__col li { color: var(--fog-muted); }
.footer__col a {
  display: inline-block;
  padding-block: 0.35rem;
  color: var(--fog);
  text-decoration: none;
  background: linear-gradient(var(--accent-light), var(--accent-light)) 0 calc(100% - 0.2rem) / 0% 1.5px no-repeat;
  transition: background-size 0.45s var(--ease-expo), color 0.3s var(--ease-out);
}
.footer__col a:hover { background-size: 100% 1.5px; color: var(--accent-light); }
@media (min-width: 900px) {
  .footer__top { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .footer__claim { grid-column: 1 / 6; }
  .footer__cols { grid-column: 7 / 13; }
}

.footer__word {
  display: flex;
  justify-content: space-between;
  margin-top: clamp(3rem, 8vw, 6rem);
  /* Wortbreite ≈ 5,53 em: Schriftgröße so wählen, dass „HELMOR“ exakt in die Spalte passt */
  font-size: min(calc((100vw - 2 * var(--pad) - 1.25rem) / 5.6), calc((var(--max) - 2 * var(--pad)) / 5.6));
  font-stretch: 125%;
  font-weight: 850;
  line-height: 0.78;
  letter-spacing: -0.035em;
  color: var(--black-soft);
  user-select: none;
  overflow: hidden;
  padding-bottom: 0.04em;
}
.footer__word span { display: inline-block; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  padding-block: var(--s-5) var(--s-6);
  border-top: 1px solid var(--fog-line);
  font-size: var(--fs-small);
  color: var(--fog-muted);
}
.footer__top-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  color: var(--fog);
  font-weight: 600;
  text-decoration: none;
}
.footer__top-link svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.45s var(--ease-expo); }
.footer__top-link:hover svg { transform: translateY(-0.25rem); }

/* ==========================================================================
   FALLSTUDIEN-DIALOG
   ========================================================================== */
.case-dialog {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(58rem, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--white);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.55s var(--ease-expo), overlay 0.55s allow-discrete, display 0.55s allow-discrete;
}
.case-dialog[open] { transform: none; }
@starting-style {
  .case-dialog[open] { transform: translateX(100%); }
}
.case-dialog::backdrop {
  background: oklch(0.2 0 0 / 0);
  transition: background-color 0.45s var(--ease-out), overlay 0.45s allow-discrete, display 0.45s allow-discrete;
}
.case-dialog[open]::backdrop { background: oklch(0.2 0 0 / 0.7); }
@starting-style {
  .case-dialog[open]::backdrop { background: oklch(0.2 0 0 / 0); }
}

.case-dialog__inner { padding: clamp(1.25rem, 4vw, 3.5rem); padding-top: 0; }
.cd__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  margin-inline: calc(clamp(1.25rem, 4vw, 3.5rem) * -1);
  margin-bottom: var(--s-5);
  padding: var(--s-4) clamp(1.25rem, 4vw, 3.5rem);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.cd__count { font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cd__close {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--fog);
  font-size: 0.9375rem;
  font-weight: 620;
  transition: background-color 0.3s var(--ease-out);
}
.cd__close:hover { background: var(--black-soft); }
.cd__close svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 2.2; fill: none; }
.cd__meta { font-size: var(--fs-small); font-weight: 600; color: var(--accent-ink); }
.cd__title {
  margin-top: var(--s-2);
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  font-stretch: 118%;
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.025em;
}
.cd__lead { margin-top: var(--s-4); max-width: 40ch; font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.45; }
.cd__img--shot { aspect-ratio: 1440 / 900 !important; object-position: top left; box-shadow: 0 0 0 1px var(--line); }
.cd__img { width: 100%; margin-top: var(--s-6); aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--surface); }
.cd__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--s-4);
  margin-block: var(--s-6);
  padding-block: var(--s-5);
  border-block: 1px solid var(--line);
}
.cd__facts dt { font-size: var(--fs-xs); color: var(--ink-soft); }
.cd__facts dd { font-weight: 650; font-stretch: 105%; }
.cd__facts div:last-child dd { color: var(--accent-ink); }
.cd__cols { display: grid; gap: var(--s-6) var(--s-7); }
.cd__cols h3, .cd__h { font-size: 1.125rem; font-stretch: 110%; font-weight: 720; margin-bottom: var(--s-2); }
.cd__cols p { color: var(--ink-soft); }
@media (min-width: 720px) {
  .cd__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cd__h { margin-top: var(--s-7); }
.cd__results { display: grid; gap: var(--s-5); margin-top: var(--s-4); }
.cd__results li { display: grid; gap: 0.2rem; padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.cd__results b {
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  font-stretch: 118%;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cd__results span { color: var(--ink-soft); font-size: 1rem; }
@media (min-width: 640px) {
  .cd__results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cd__quote {
  margin-top: var(--s-8);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-l);
  background: var(--black);
  color: var(--fog);
}
.cd__quote p { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.3; font-weight: 480; max-width: 32ch; }
.cd__quote footer { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--fog-muted); }
.cd__tech { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.cd__text { max-width: 60ch; margin-top: var(--s-2); color: var(--ink-soft); }
.cd__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-7); }
.cd__actions .link-arrow { color: var(--ink); }
.cd__small { margin-top: var(--s-6); font-size: var(--fs-xs); color: var(--ink-soft); }
.cd__tech span { padding: 0.35rem 0.8rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-small); }
.cd__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.cd__nav button {
  display: grid;
  gap: 0.15rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.cd__nav button:last-child { text-align: right; margin-left: auto; }
.cd__nav small { font-size: var(--fs-xs); color: var(--ink-soft); }
.cd__nav span { font-size: 1.125rem; font-weight: 700; font-stretch: 110%; }
.cd__nav button:hover span { color: var(--accent-ink); }
html.dialog-open { overflow: clip; }

/* ==========================================================================
   Unterseiten (Impressum, Datenschutz, 404)
   ========================================================================== */
.subpage-hero {
  padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  background: var(--surface);
  color: var(--ink);
}
.subpage-hero h1 {
  font-size: var(--fs-display-l);
  font-stretch: 118%;
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.025em;
}
.subpage-hero p { margin-top: var(--s-4); max-width: 44rem; color: var(--ink-soft); }
.legal { padding-block: clamp(3rem, 6vw, 5rem) var(--section); }
.legal__body { max-width: 46rem; }
.legal__body h2 { margin-top: var(--s-7); margin-bottom: var(--s-3); font-size: 1.375rem; font-stretch: 110%; font-weight: 720; }
.legal__body h3 { margin-top: var(--s-5); margin-bottom: var(--s-2); font-size: 1.125rem; font-weight: 680; }
.legal__body p, .legal__body li { color: var(--ink-soft); }
.legal__body p + p { margin-top: var(--s-3); }
.legal__body ul { display: grid; gap: 0.3rem; margin-top: var(--s-3); padding-left: 1.2rem; list-style: square; }
.legal__body a { color: var(--ink); font-weight: 600; }
.legal__body address { font-style: normal; color: var(--ink); line-height: 1.7; }
.placeholder {
  padding: 0.05rem 0.3rem;
  border-radius: 0.2rem;
  background: var(--gray-200);
  outline: 1px dashed var(--ink-soft);
  color: var(--ink);
  font-weight: 600;
}
.legal__note {
  margin-bottom: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--surface);
}
.subpage .site-header { position: absolute; color: var(--ink); }
.thanks { display: grid; gap: var(--s-5); }
.thanks h2 { margin: 0; }
.thanks .funnel-done__steps li { color: var(--ink); }
.thanks__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }

/* ==========================================================================
   Reduzierte Bewegung
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.nowrap { white-space: nowrap; }

/* Von GSAP über CSS-Variablen gesteuerte Bewegungen (Hover-Effekte nutzen scale/translate separat) */
[data-magnetic] { transform: translate(calc(var(--bx, 0) * 1px), calc(var(--by, 0) * 1px)); }

/* ==========================================================================
   INHALTSSEITEN (Leistungen und Ratgeber) – seit 15.10.2026
   Vorlage mit allen HTML-Blöcken: _werkzeuge/vorlage.md. Reihenfolge einer
   Seite: heller Kopf (.page-hero) → Lesebereich (.doc) → „Weitere Leistungen“
   (.more) → blaue Abschlussleiste (.products-cta) → Fußzeile mit vier Spalten.
   Nur vorhandene Tokens, mobile zuerst; keine Häkchen, keine Pillen, keine
   Striche vor Überschriften.
   ========================================================================== */

/* ---------- Kopf: Brotkrumen, Kicker, H1, Antwort, Button, „Auf einen Blick“ ---------- */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 3.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--surface);
  color: var(--ink);
}
.page-hero__grid { display: grid; gap: var(--s-6) var(--gutter); }
.page-hero__copy { display: grid; gap: var(--s-5); min-width: 0; }

.crumbs { font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-soft); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before {
  content: "›";
  content: "›" / "";
  margin-inline: 0.5rem;
  color: var(--line-strong);
}
.crumbs a {
  display: inline-block;
  padding-block: 0.4rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  transition: color 0.3s var(--ease-out);
}
.crumbs a:hover { color: var(--ink); text-decoration-color: currentColor; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 560; }

.page-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-small);
  font-weight: 560;
  line-height: 1.35;
  color: var(--ink-soft);
}
.page-hero__kicker .dot-led { background: var(--accent); }
.page-hero__title {
  /* eine Stufe unter .products-hero__title; lange Wörter trennen statt überlaufen */
  font-size: clamp(1.85rem, 1rem + 3.2vw, 3.5rem);
  font-stretch: 112%;
  font-weight: 780;
  line-height: 1.02;
  letter-spacing: -0.025em;
  hyphens: auto;
  overflow-wrap: break-word;
}
.page-hero__answer { max-width: 40rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }
.page-hero__actions .link-arrow { color: var(--ink); }
@media (max-width: 520px) {
  .page-hero__title { font-stretch: 100%; }
}

/* „Auf einen Blick“: ruhige Faktentabelle als dl */
.glance {
  align-self: end;
  min-width: 0;
  max-width: 40rem;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--white);
}
.glance__title { margin-bottom: var(--s-2); font-size: var(--fs-small); font-stretch: 105%; font-weight: 650; line-height: 1.3; }
.glance__list > div {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: var(--s-4);
  align-items: baseline;
  padding-block: 0.65rem;
  border-top: 1px solid var(--line);
}
.glance__list dt { font-size: var(--fs-small); line-height: 1.35; color: var(--ink-soft); }
.glance__list dd { font-weight: 650; font-stretch: 105%; line-height: 1.35; font-variant-numeric: tabular-nums; }
.glance__note {
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-soft);
}
@media (min-width: 1024px) {
  .page-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .page-hero__grid > .crumbs { grid-column: 1 / -1; }
  .page-hero__copy { grid-column: 1 / 8; }
  .glance { grid-column: 8 / 13; justify-self: end; width: min(100%, 25rem); max-width: none; }
}

/* ---------- Lesebereich ---------- */
.doc {
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(4rem, 3rem + 5vw, 8rem);
  background: var(--white);
}
.doc__grid { display: grid; gap: var(--s-7) var(--gutter); }

/* Inhaltsübersicht „Auf dieser Seite“: erst ab 1024 px, läuft links mit */
.toc { display: none; }
.toc__title { margin-bottom: var(--s-3); font-size: var(--fs-small); font-stretch: 105%; font-weight: 650; }
.toc__list { display: grid; gap: 0.1rem; }
.toc__list a {
  display: block;
  padding-block: 0.4rem;
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}
.toc__list a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); }
@media (min-width: 1024px) {
  .doc__grid--toc { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .doc__grid--toc .toc {
    display: block;
    grid-column: 1 / 4;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 4rem);
    overflow-y: auto;
    padding-right: var(--s-4);
  }
  .doc__grid--toc .prose { grid-column: 4 / -1; }
}

/* Fließtext: ~46rem Lesemaß, klare Abstände zwischen h2 und h3 */
.prose { max-width: 46rem; min-width: 0; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 {
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem);
  font-stretch: 112%;
  font-weight: 740;
  line-height: 1.12;
  letter-spacing: -0.018em;
  hyphens: auto;
}
.prose > h2:first-child { margin-top: 0; }
.prose h2 + * { margin-top: var(--s-4); }
.prose h3 {
  margin-top: var(--s-6);
  font-size: 1.1875rem;
  font-stretch: 106%;
  font-weight: 690;
  line-height: 1.3;
}
.prose h3 + * { margin-top: var(--s-2); }
.prose p, .prose li { color: var(--ink); }
.prose ul, .prose ol { display: grid; gap: var(--s-2); padding-left: 1.25rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--ink-soft); }
.prose strong { font-weight: 650; }
.prose a:not([class]) {
  color: var(--accent-ink);
  font-weight: 560;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.prose a:not([class]):hover { text-decoration-thickness: 2px; }
.prose .link-arrow { color: var(--ink); }

/* Tabelle im Beleg-Stil; auf dem Handy waagrecht scrollbar (Container mit tabindex="0") */
.table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.table-wrap:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.prose .table-title { margin-top: var(--s-5); }
.prose .table-title + .table-wrap { margin-top: 0; }
.prose .table-wrap { margin-top: var(--s-5); }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
/* Tabellentitel steht außerhalb des Scroll-Containers, damit er auf dem Handy nicht mitwandert */
.table-title, .data-table caption {
  padding-bottom: var(--s-3);
  text-align: left;
  font-size: var(--fs-small);
  font-weight: 650;
  font-stretch: 105%;
  color: var(--ink);
}
.data-table th, .data-table td {
  padding: 0.7rem 1.25rem 0.7rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.data-table tr > :last-child { padding-right: 0; }
.data-table thead th {
  padding-block: 0 0.55rem;
  border-bottom: 1.5px solid var(--ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-soft);
}
.data-table tbody th { font-weight: 600; }
.data-table td { color: var(--ink); }
.data-table--wide { min-width: 36rem; }
/* Breite Tabellen auf dem Handy als Karten untereinander: Zeilentitel oben, darunter je Zelle Spaltenname und Wert.
   Die Spaltennamen kommen aus data-label, die ARIA-Rollen im HTML erhalten die Tabellen-Semantik. */
@media (max-width: 719px) {
  .data-table--wide { min-width: 0; }
  .data-table--wide thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .data-table--wide tbody, .data-table--wide tr, .data-table--wide th, .data-table--wide td { display: block; }
  .data-table--wide tbody tr { padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
  .data-table--wide tbody tr:first-child { border-top: 1.5px solid var(--ink); }
  .data-table--wide tbody th, .data-table--wide tbody td { padding: 0; border: 0; }
  .data-table--wide tbody th { margin-bottom: var(--s-2); font-size: 1.0625rem; font-stretch: 105%; }
  /* Spaltenname links absolut, damit Zellen mit Link und Text als ein Absatz fließen */
  .data-table--wide tbody td {
    position: relative;
    min-height: 1.6em;
    padding: 0.3rem 0 0.3rem calc(34% + var(--s-3));
  }
  .data-table--wide tbody td::before {
    content: attr(data-label);
    position: absolute;
    top: 0.3rem;
    left: 0;
    width: 34%;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.6;
    color: var(--ink-soft);
  }
}
.data-table tfoot th, .data-table tfoot td { border-top: 3px double var(--ink); border-bottom: 0; font-weight: 750; }
.data-table [aria-current="page"] { font-weight: 700; }

/* Bild im Browserfenster (.window von der Startseite) mit Bildunterschrift */
.prose .figure { margin-block: var(--s-6); }
.figure .window {
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.08), 0 2.5rem 5rem -2rem oklch(0 0 0 / 0.38), 0 1rem 2rem -1rem oklch(0 0 0 / 0.2);
}
.figure .window__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.figure__caption { margin-top: var(--s-4); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }

/* Hinweis-Kasten: nur eine Linie, keine Farbfläche */
.note {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.prose .note { margin-block: var(--s-6); }
.note__title { font-weight: 650; font-stretch: 105%; }
.note p { font-size: 0.9375rem; line-height: 1.55; }

/* Häufige Fragen offen: h3 + Absatz, Linien wie .faq__item */
.qa { border-top: 1px solid var(--line); }
.prose .qa { margin-top: var(--s-5); }
.qa__item { padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.prose .qa__item h3 { margin-top: 0; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3rem); font-stretch: 100%; font-weight: 650; }
.qa__item > * + * { margin-top: var(--s-2); }
.qa__item .qa__small { font-size: var(--fs-small); color: var(--ink-soft); }

/* Quellen, Stand und Autor */
.sources {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.prose .sources__title { margin-top: 0; font-size: var(--fs-small); font-stretch: 105%; font-weight: 650; letter-spacing: 0; line-height: 1.3; }
.prose .sources__list { margin-top: var(--s-3); gap: var(--s-2); padding-left: 1.1rem; }
.prose .sources__list li { color: var(--ink-soft); overflow-wrap: anywhere; }
.prose .sources__list a { font-weight: 500; }
.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-5);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.prose .page-meta { margin-top: var(--s-6); }
.prose .page-meta p { color: var(--ink-soft); }
.sources + .page-meta { margin-top: var(--s-4); }

/* ---------- „Weitere Leistungen“: drei Link-Karten im Stil von .product-card ---------- */
.more {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  background: var(--surface);
}
.more__title {
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem);
  font-stretch: 112%;
  font-weight: 740;
  line-height: 1.12;
  letter-spacing: -0.018em;
}
.more__list { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.more__list > li { display: grid; }
.more-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 1rem 2rem -1.5rem oklch(0.2 0 0 / 0.25);
  transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.more-card:hover { border-color: var(--line-strong); box-shadow: 0 1.25rem 2.5rem -1.5rem oklch(0.2 0 0 / 0.35); }
.more-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.more-card__name { font-size: 1.25rem; font-stretch: 112%; font-weight: 740; line-height: 1.2; hyphens: auto; }
.more-card__arrow {
  grid-column: 2;
  grid-row: 1;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.45s var(--ease-expo);
}
.more-card:hover .more-card__arrow { transform: translateX(0.3rem); }
.more-card__text { grid-column: 1 / -1; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-soft); }
.more-card__price { grid-column: 1 / -1; font-size: var(--fs-small); font-weight: 650; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .more__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Mobiles Menü: kleine Gruppen unter den großen Punkten ---------- */
.mobile-menu__more {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s-5) var(--gutter);
  margin-top: var(--s-6);
}
.mobile-menu__h { margin-bottom: var(--s-1); font-size: var(--fs-small); font-weight: 600; color: var(--fog-muted); }
.mobile-menu__group a {
  display: inline-block;
  padding-block: 0.3rem;
  font-size: 1.0625rem;
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}
.mobile-menu__group a:hover, .mobile-menu__group a:focus-visible, .mobile-menu__group a[aria-current="page"] { color: var(--accent-light); }

/* ---------- Fußzeile mit vier Spalten (Leistungen, Ratgeber, HELMOR, Rechtliches) ---------- */
.footer__cols--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--gutter); }
.footer__cols--four ul { grid-template-columns: minmax(0, 1fr); }
.footer__cols--four a { hyphens: auto; overflow-wrap: break-word; }
.footer__col a[aria-current="page"] { color: var(--accent-light); }
@media (min-width: 720px) {
  .footer__cols--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .footer__top--four .footer__claim, .footer__top--four .footer__cols { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .footer__top--four .footer__claim { grid-column: 1 / 5; }
  .footer__top--four .footer__cols { grid-column: 5 / 13; }
}

/* ==========================================================================
   STARTSEITE: Feinschliff für Suche und KI-Antworten (15.10.2026)
   Leistungsnamen sind jetzt h3 in der summary. Die weichen Trennstriche
   (­) an der Wortfuge bleiben im HTML, weil nicht jeder Browser ein
   deutsches Trennwörterbuch hat (ohne sie brach „Prozessautomatisie|rung“
   ohne Trennstrich um). Wo der Browser selbst trennt (lang="de"), begrenzen
   --trenn-vor/--trenn-nach die Trennung auf die Wortfuge. text-wrap: wrap
   wie beim früheren span, sonst verteilt balance die Zeilen anders.
   Nur vorhandene Tokens.
   ========================================================================== */
.service__name {
  -webkit-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-before: var(--trenn-vor, auto);
  -webkit-hyphenate-limit-after: var(--trenn-nach, auto);
  hyphenate-limit-chars: auto var(--trenn-vor, auto) var(--trenn-nach, auto);
  text-wrap: wrap;
  overflow-wrap: break-word;
}
/* Bei 1024–1099 px fehlen „automatisierung“ ein paar Pixel Spaltenbreite. Wie vorher
   läuft das Wort dann minimal in den Abstand zum Preis, statt mitten im Wort umzubrechen. */
@media (min-width: 1024px) and (max-width: 1099px) {
  .service__name { overflow-wrap: normal; }
}

/* Hinweis unter der Preis-Einleitung: an Unternehmen, netto, Stand */
.services__b2b { max-width: 32rem; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }

/* Je Leistung: Textlink auf die eigene Leistungsseite über dem Erstgespräch-Link */
.service__page a {
  color: var(--ink);
  font-weight: 600;
  text-decoration-color: var(--line-strong);
  transition: color 0.3s var(--ease-out), text-decoration-color 0.3s var(--ease-out);
}
.service__page a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }

/* Textlinks im Kasten „Was würde das in Ihrem Betrieb kosten?“ wie in den häufigen Fragen */
.pricing__cta-text a:not([class]) { color: var(--ink); font-weight: 650; transition: color 0.3s var(--ease-out); }
.pricing__cta-text a:not([class]):hover { color: var(--accent-ink); }

/* Der Hero-Text hat einen Satz mehr. Auf großen Bildschirmen darf er etwas breiter
   laufen, damit der Hinweis unter den Buttons bei 1440 × 790 im ersten Bild bleibt.
   Er endet weiter links als die Bühne. */
@media (min-width: 1100px) {
  .hero__lead { max-width: 40rem; }
}

/* Die Preis-Einleitung neben den Leistungen nennt jetzt auch die Dauer und ist dadurch
   höher. Auf niedrigen Bildschirmen würde der mitlaufende Block unten abgeschnitten
   (Stand-Hinweis nicht lesbar). Dort läuft er normal mit der Seite. */
@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 729px) {
  .services__sticky { position: static; }
}
@media (min-width: 1280px) and (max-height: 704px) {
  .services__sticky { position: static; }
}

/* „Auf einen Blick“ im Lesetext (produkte.html, 18.10.2026): volle Lesebreite statt der
   schmalen rechten Spalte, die .glance im Seitenkopf der Ratgeber hat. */
.prose .glance { justify-self: auto; width: auto; max-width: none; margin-block: var(--s-6); }

/* ==========================================================================
   BEZAHLEN: Kaufen, in Raten zahlen oder mieten (21.10.2026)
   Drei Karten nach den Preisen. Die Balken zeigen schematisch, wann gezahlt
   wird (ein Balken je Monat, die gestrichelte Linie markiert die Monate),
   ohne Beträge. Die Miete ist die hervorgehobene Karte (Schwarz, wie der
   folgende Abschnitt „So arbeiten wir“). Ohne JS oder Bewegung stehen die
   Balken von Anfang an; sonst wachsen sie beim Hineinscrollen (main.js).
   ========================================================================== */
.pay {
  padding-block: var(--section);
  background: var(--white);
}
.pay__head { display: grid; gap: var(--s-5); max-width: 62rem; }
.pay__intro { max-width: 42rem; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.5; }
.pay__legend { margin-top: clamp(3rem, 6vw, 4.5rem); font-size: var(--fs-small); color: var(--ink-soft); }
.pay__ways { display: grid; gap: var(--gutter); margin-top: var(--s-4); }
.pay__foot { max-width: 46rem; margin-top: clamp(2rem, 4vw, 3rem); color: var(--ink-soft); }

.pay-way {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-l);
  background: var(--surface);
}
.pay-way__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  font-size: 1.0625rem;
  font-stretch: 110%;
  font-weight: 700;
  line-height: 1.2;
}
.pay-way__num {
  color: var(--accent-ink);
  font-stretch: 125%;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}
.pay-way__tag {
  margin-left: auto;
  margin-block: -0.25rem; /* macht die Zeile nicht höher, die Grafik bleibt auf einer Linie mit den anderen Karten */
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-xs);
  font-stretch: 105%;
  font-weight: 650;
  line-height: 1.4;
}
.pay-way__chart { width: 100%; max-width: 26rem; margin-block: var(--s-2) var(--s-1); }
.pay-way__chart svg { width: 100%; height: auto; overflow: visible; }
.pay-way__axis { stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 6 4; }
.pay-way__bar {
  fill: var(--accent);
  opacity: var(--o, 1);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.pay-way__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: var(--fs-xs);
  font-stretch: 90%;
  color: var(--ink-soft);
}
.pay-way__title {
  font-size: var(--fs-title);
  font-stretch: 114%;
  font-weight: 720;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.pay-way__text { color: var(--ink-soft); }
.pay-way__meta {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1.5px dashed var(--line-strong);
  font-size: var(--fs-small);
  font-weight: 600;
}
.pay-way__cta { align-self: flex-start; margin-top: calc(var(--s-2) * -1); color: var(--accent-ink); }

/* Miete: die hervorgehobene Karte */
.pay-way--rent { background: var(--black); color: var(--fog); }
.pay-way--rent .pay-way__num { color: var(--accent-light); }
.pay-way--rent .pay-way__axis { stroke: var(--fog-muted); opacity: 0.45; }
.pay-way--rent .pay-way__bar { fill: var(--accent-light); }
.pay-way--rent .pay-way__scale,
.pay-way--rent .pay-way__text { color: var(--fog-muted); }
.pay-way--rent .pay-way__meta { border-top-color: var(--fog-line); }
.pay-way--rent .pay-way__cta { color: var(--accent-light); }

/* Balken wachsen nacheinander, Verzögerung je Balken aus --i */
.motion-ok .pay-way__bar { transform: scaleY(0); }
.motion-ok .pay-way.is-in .pay-way__bar {
  transform: scaleY(1);
  transition: transform 0.7s var(--ease-expo) calc(var(--i, 0) * 45ms);
}

@media (min-width: 640px) and (max-width: 959px) {
  .pay__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Miete über die volle Breite: Grafik links, Text rechts, sonst bleibt die Karte oben leer */
  .pay-way--rent {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: var(--s-4) var(--gutter);
    align-items: start;
  }
  .pay-way--rent > * { grid-column: 2; }
  .pay-way--rent .pay-way__name { grid-column: 1 / -1; }
  .pay-way--rent .pay-way__chart { grid-column: 1; grid-row: 2 / span 4; align-self: center; margin: 0; }
  .pay-way--rent .pay-way__meta { margin-top: var(--s-2); }
}
@media (min-width: 960px) {
  .pay__ways { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Hinweis neben den Leistungen: die drei Wege, mit Sprung zum Abschnitt */
.services__pay { max-width: 32rem; font-weight: 600; line-height: 1.5; }
.services__pay a { color: var(--accent-ink); font-weight: 650; text-decoration-color: currentColor; }
.services__pay a:hover { text-decoration-thickness: 2px; }
/* ==========================================================================
   KUNDENSTIMME, COLLEKTRA FÜR IHRE KANZLEI, PRODUKT ODER INDIVIDUALSOFTWARE (21.10.2026)
   Kundenstimme: ruhiger Satz ohne Striche, Name fett darunter. --card als hellgraue
   Fläche auf Weiß (Startseite, Portalseite), --wide als großer Satz auf Grau
   (Produktseite). Der Kanzlei-Bereich nutzt Karte und Formular aus dem Kontaktbereich.
   ========================================================================== */
.quote { display: grid; gap: var(--s-4); margin: 0; }
.quote blockquote { margin: 0; }
.quote p {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 470;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.quote figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; font-size: var(--fs-small); color: var(--ink-soft); }
.quote figcaption b { font-weight: 680; color: var(--ink); }
.quote--card { padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--radius-l); background: var(--surface); }
.prose .quote--card { margin-block: var(--s-6); }
.prose .quote p { color: var(--ink); }
.quote--wide { max-width: 54rem; margin-top: clamp(3rem, 6vw, 4.5rem); }
.quote--wide p { font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.85rem); line-height: 1.34; letter-spacing: -0.01em; }

.teaser__text a { color: var(--accent-ink); font-weight: 650; }
.teaser__note { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
.teaser__note b { color: var(--ink); font-weight: 650; }

.products-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-2); }
.products-hero__note { font-size: var(--fs-small); color: var(--ink-soft); }
@media (min-width: 900px) {
  .products-hero__actions { grid-column: 1 / 8; }
}

.kanzlei { padding-block: var(--section); background: var(--surface); }
.kanzlei__head { display: grid; gap: var(--s-5); max-width: 62rem; }
.kanzlei__intro { max-width: 42rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); }
.kanzlei__grid { margin-top: clamp(3rem, 6vw, 5rem); }
.kanzlei .form .btn { justify-self: start; }
.kanzlei .form-card { box-shadow: 0 1.5rem 3rem -2rem oklch(0.2 0 0 / 0.3), 0 0 0 1px var(--line); }

/* Fertiges Produkt oder Software nur für Sie: zwei ruhige Karten nebeneinander */
.split { display: grid; gap: var(--gutter); }
.prose .split { margin-block: var(--s-6); }
.split__item { display: grid; gap: var(--s-2); align-content: start; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--radius-l); background: var(--surface); }
.split__item--own { background: var(--black); color: var(--fog); }
.split__label { font-size: var(--fs-small); font-weight: 650; font-stretch: 105%; color: var(--accent-ink); }
.split__item--own .split__label { color: var(--accent-light); }
.prose .split__title, .split__title { margin: 0; font-size: 1.25rem; font-stretch: 110%; font-weight: 720; line-height: 1.25; }
.prose .split__item p { color: inherit; }
.split__item p:not(.split__label) { font-size: 0.9375rem; line-height: 1.55; }
.split__item--own p:not(.split__label) { color: var(--fog-muted); }
@media (min-width: 720px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Zweite Zusage im Hero (Miete) rückt an die erste heran; der Link bleibt ruhig */
.hero__assure--next { margin-top: var(--s-2); }
.hero__assure a { color: var(--ink); font-weight: 600; text-decoration-color: var(--line-strong); }
.hero__assure a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
/* Trennungs-Karten: Farben gegen die Lesetext-Regel (.prose .split__item p) absichern */
.split p.split__label { color: var(--accent-ink); }
.split .split__item--own p.split__label { color: var(--accent-light); }
.split p.split__title { color: var(--ink); }
.split .split__item--own p.split__title { color: var(--fog); }
.split .split__item--own a { color: var(--accent-light); }
/* ==========================================================================
   KOPFZEILE ALS SCHWEBENDE LEISTE (21.10.2026, Vorbild vom Inhaber)
   Helle, leicht durchscheinende Leiste mit runden Enden und Abstand zum Rand.
   Logo links, Navigation in der Mitte, „Erstgespräch“ rechts als umrandeter
   runder Button. Sie bleibt auf allen Abschnitten hell; data-theme aus main.js
   ändert die Farben nicht mehr. Die Gesamthöhe bleibt --header-h (Abstand oben
   plus Leiste), damit Sprungziele, Hero-Abstand und mitlaufende Blöcke stimmen.
   ========================================================================== */
:root { --header-gap: 0.625rem; }
@media (min-width: 1024px) {
  :root { --header-gap: 0.875rem; }
}

.site-header,
.site-header[data-theme] {
  padding: var(--header-gap) var(--pad) 0;
  color: var(--ink);
  pointer-events: none;
}
.site-header::before { display: none; }
.site-header[data-hidden="true"] { transform: translateY(calc(-100% - 1.5rem)); }
.site-header__inner {
  pointer-events: auto;
  max-width: calc(var(--max) - 2 * var(--pad));
  padding-inline: 1.1rem 0.5rem;
  border-radius: 999px;
  background: oklch(0.985 0 0 / 0.84);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 0 0 1px oklch(0.17 0 0 / 0.07), 0 0.75rem 2rem -1rem oklch(0.17 0 0 / 0.3);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header__inner { background: oklch(0.985 0 0 / 0.97); }
}
.site-header[data-theme] .brand__led { background: var(--accent); }

/* Erstgespräch: umrandet, füllt sich beim Darüberfahren blau */
.site-header .site-header__cta {
  border-radius: 999px;
  padding-inline: 1.25rem;
  background: transparent;
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1.5px var(--accent);
  --btn-hover-bg: var(--accent);
}
.site-header .site-header__cta:hover { color: var(--on-accent); }

/* Offenes Menü: Die Leiste bleibt hell über dem schwarzen Menü */
html.menu-open .site-header,
html.menu-open .site-header[data-theme] { color: var(--ink); }

@media (min-width: 1024px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    padding-inline: 1.75rem 0.625rem;
  }
  .site-header__inner .brand { justify-self: start; margin-right: 0; }
  .site-header__inner .site-header__cta { justify-self: end; }
}
/* Gleicher Innenabstand links und rechts, damit die Navigation genau in der Mitte steht;
   das Logo bekommt seinen Abstand selbst */
.site-header__inner { padding-inline: 0.5rem; }
.site-header__inner .brand { padding-left: 0.6rem; }
@media (min-width: 1024px) {
  .site-header__inner { padding-inline: 0.625rem; }
  .site-header__inner .brand { padding-left: 1.125rem; }
}
html.menu-open .site-header__inner { background: var(--white); }
/* Etwas deckender, damit die Leiste auch über Schwarz und Blau hell bleibt */
.site-header__inner { background: oklch(0.985 0 0 / 0.93); }
/* Hero, ruhiger und klarer (21.10.2026): Was HELMOR macht, steht als zweite Zeile der
   Hauptüberschrift direkt unter „Software für Ihren Betrieb.“, kräftig und in Blau wie
   die zweiten Zeilen der anderen großen Überschriften. Die kleine graue Zeile darüber
   und „Weiter scrollen“ sind entfallen. */
.hero__title .hero__what {
  display: block;
  max-width: 20em;
  margin-top: clamp(1rem, 2.4vh, 1.5rem);
  font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.875rem);
  font-stretch: 108%;
  font-weight: 680;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--accent-ink);
}
.hero__what + * { margin-top: 0; }

/* ==========================================================================
   COLLEKTRA-SEITE (collektra.html, seit 21.10.2026)
   Eigene Landingpage für Collektra: Kopf mit Fenster und Handy, Beleg 5×,
   Schaubild Kanzlei/Schuldner/Auftraggeber, dunkler Block mit Stufen und
   Schaufenster, beide Portale, Galerie, Funktionen als Kacheln, Zahlen,
   Fragen, Vorführung. Farben wie die ganze Website, Collektra-Grün nur im Logo.
   Nichts blinkt oder pulsiert (User 21.10.2026).
   ========================================================================== */
.ck-kicker { font-size: var(--fs-small); font-weight: 650; letter-spacing: 0.01em; color: var(--accent-ink); }
.ck-head { display: grid; gap: var(--s-4); max-width: 58rem; }
.ck-head .display-l { max-width: 18ch; }
.ck-head__lead { max-width: 40rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); }
.ck-head--dark .ck-kicker { color: var(--accent-light); }
.ck-head--dark .ck-head__lead { color: var(--fog-muted); }
.ck-head--sub { margin-top: clamp(4rem, 8vw, 7rem); margin-bottom: var(--s-6); }
.ck-subtitle { font-size: var(--fs-statement); font-stretch: 112%; font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; }
@media (min-width: 1024px) {
  .ck-head--row { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: end; max-width: none; gap: var(--s-4) var(--gutter); }
}

/* ---------- Kopf ---------- */
.ck-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(1.5rem, 4vh, 3rem));
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
  background: var(--surface);
  overflow: clip;
}
.ck-hero__grid { display: grid; gap: clamp(3rem, 7vw, 4.5rem) var(--gutter); align-items: center; margin-top: clamp(1.5rem, 4vh, 3rem); }
.ck-brand { display: inline-flex; align-items: center; gap: 0.75rem; }
.ck-brand img { width: 2.75rem; height: 2.75rem; flex: none; padding: 0.35rem; border-radius: 0.7rem; background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.ck-brand span { display: grid; font-size: var(--fs-small); line-height: 1.3; color: var(--ink-soft); }
.ck-brand b { font-size: 1.0625rem; font-stretch: 112%; font-weight: 750; color: var(--ink); }
.ck-hero__title {
  margin-top: var(--s-5);
  /* „Inkassosoftware“ muss in die Spalte passen: auf dem Handy 32 px, bei 1440 px etwa 60 px */
  font-size: clamp(2rem, 0.9rem + 3.1vw, 3.75rem);
  font-stretch: 106%;
  hyphens: manual;
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.ck-hero__title span {
  display: block;
  margin-top: clamp(0.75rem, 1.8vh, 1.1rem);
  font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.875rem);
  font-stretch: 108%;
  font-weight: 680;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--accent-ink);
}
.ck-hero__lead { max-width: 36rem; margin-top: var(--s-5); font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-soft); }
.ck-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin: var(--s-6) 0 var(--s-2); }
.ck-hero__actions .link-arrow { color: var(--ink); }

.ck-stage { position: relative; padding: 0 0 12% 0; }
.ck-stage__window { display: block; box-shadow: 0 0 0 1px oklch(0 0 0 / 0.08), 0 2.5rem 5rem -2rem oklch(0 0 0 / 0.38), 0 1rem 2rem -1rem oklch(0 0 0 / 0.2); }
.ck-stage__window .window__screen, .ck-portal__window .window__screen { display: block; }
.ck-stage__window .window__screen img, .ck-portal__window .window__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.ck-stage__phone { left: auto; right: -2%; bottom: 0; height: 74%; opacity: 1; transform: rotate(-3deg); transition: none; }
@media (min-width: 1100px) {
  .ck-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Beleg 5× ---------- */
.ck-proof { padding-block: clamp(4.5rem, 9vw, 8rem); background: var(--white); }
.ck-proof__grid { display: grid; gap: var(--s-6) var(--gutter); align-items: start; }
.ck-proof__big {
  font-size: clamp(6rem, 3rem + 12vw, 13rem);
  font-stretch: 125%;
  font-weight: 850;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--accent-ink);
}
.ck-proof__body { display: grid; gap: var(--s-6); max-width: 52rem; }
.ck-proof__title { font-size: var(--fs-statement); font-stretch: 112%; font-weight: 720; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.ck-proof__quote p { color: var(--ink-soft); }
@media (min-width: 900px) {
  .ck-proof__grid { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-6) clamp(2.5rem, 6vw, 6rem); }
}

/* ---------- Schaubild: drei Zugänge, eine Akte ---------- */
.ck-loop { padding-block: var(--section); background: var(--surface); }
.ck-loop__grid { position: relative; display: grid; gap: var(--s-6); margin-top: clamp(2.5rem, 5vw, 4rem); }
.ck-loop__card, .ck-loop__core {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line);
  color: var(--ink);
  text-decoration: none;
}
.ck-loop__card { transition: box-shadow 0.4s var(--ease-out), transform 0.6s var(--ease-expo); }
.ck-loop__card:hover { transform: translateY(-0.25rem); box-shadow: 0 0 0 1px var(--line-strong), 0 1.5rem 3rem -2rem oklch(0.2 0 0 / 0.35); }
.ck-loop__card:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.ck-loop__who { font-size: var(--fs-title); font-stretch: 112%; font-weight: 750; line-height: 1.15; }
.ck-loop__where { font-size: var(--fs-small); color: var(--ink-soft); }
.ck-loop__more { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--fs-small); font-weight: 650; color: var(--accent-ink); }
.ck-loop__more svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.4s var(--ease-expo); }
.ck-loop__card:hover .ck-loop__more svg { transform: translateX(0.25rem); }
.ck-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.ck-chips li { padding: 0.4rem 0.75rem; border-radius: 999px; background: var(--surface); font-size: var(--fs-small); font-weight: 560; line-height: 1.25; }
.ck-loop__core { background: var(--black-deep); color: var(--fog); box-shadow: none; }
.ck-loop__core .ck-loop__where { color: var(--fog-muted); }
.ck-loop__mark { width: 3rem; height: 3rem; margin-bottom: var(--s-2); padding: 0.4rem; border-radius: 0.75rem; background: var(--white); }
.ck-loop__gets { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.ck-loop__gets li { position: relative; padding-left: 1.1rem; font-size: var(--fs-small); line-height: 1.45; color: var(--fog); }
.ck-loop__gets li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.45rem; height: 0.45rem; border-radius: 0.1rem; background: var(--accent-light); }
/* Verbindungslinien zwischen den Karten: untereinander senkrecht, ab 1024 px waagerecht */
.ck-loop__core::before, .ck-loop__core::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  height: var(--s-6);
  translate: -50% 0;
  background: var(--line-strong);
}
.ck-loop__core::before { bottom: 100%; }
.ck-loop__core::after { top: 100%; }
@media (min-width: 1024px) {
  .ck-loop__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 3.5vw, 3.5rem); align-items: center; }
  .ck-loop__core::before, .ck-loop__core::after {
    top: 50%;
    bottom: auto;
    left: auto;
    width: clamp(2rem, 3.5vw, 3.5rem);
    height: 2px;
    translate: 0 -50%;
  }
  .ck-loop__core::before { right: 100%; }
  .ck-loop__core::after { left: 100%; }
}

/* ---------- Dunkler Block: Stufen und Kanzlei-App ---------- */
.ck-app { padding-bottom: clamp(4rem, 8vw, 7rem); }
.ck-app .ck-head .display-l { color: var(--fog); }
.ck-steps { display: grid; gap: var(--s-5); margin-top: clamp(2.5rem, 5vw, 4rem); }
.ck-steps li { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-5); border-top: 1px solid var(--fog-line); }
.ck-steps__n {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--s-2);
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-small);
  font-weight: 750;
}
.ck-steps b { font-size: 1.125rem; font-stretch: 108%; font-weight: 720; color: var(--fog); }
.ck-steps span:not(.ck-steps__n) { font-size: var(--fs-small); line-height: 1.55; color: var(--fog-muted); }
.ck-steps__note { max-width: 46rem; margin-top: var(--s-6); font-size: var(--fs-small); line-height: 1.55; color: var(--fog-muted); }
.ck-app .ck-subtitle { color: var(--fog); }
.ck-app .product__note { margin-top: var(--s-7); }
@media (min-width: 700px) { .ck-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--gutter); } }
@media (min-width: 1100px) { .ck-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- Portale ---------- */
.ck-portal { padding-block: var(--section); background: var(--white); overflow: clip; }
.ck-portal--glaeubiger { background: var(--surface); }
.ck-portal__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3rem, 7vw, 5rem) var(--gutter); align-items: center; }
.ck-portal__grid > * { min-width: 0; }
.ck-portal__copy { display: grid; gap: var(--s-4); max-width: 38rem; }
.ck-portal__copy .display-l { max-width: 13ch; }
.ck-portal__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); }
.ck-portal__foot { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
.ck-list { display: grid; margin-block: var(--s-2); border-top: 1px solid var(--line); }
.ck-list li { position: relative; display: grid; gap: 0.15rem; padding: 0.85rem 0 0.85rem 1.4rem; border-bottom: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.45; color: var(--ink-soft); }
.ck-list li::before { content: ""; position: absolute; left: 0; top: 1.3rem; width: 0.5rem; height: 0.5rem; border-radius: 0.12rem; background: var(--accent); }
.ck-list b { font-size: 1rem; font-weight: 680; color: var(--ink); }

.ck-phones { position: relative; display: flex; justify-content: center; align-items: flex-end; padding: var(--s-4) 0 var(--s-7); }
.ck-phones .phone { position: relative; inset: auto; flex: none; height: auto; width: min(36%, 15rem); opacity: 1; transition: none; }
.ck-phones__a { z-index: 3; transform: rotate(-3deg); }
.ck-phones__b { z-index: 2; margin-left: -10%; transform: translateY(6%) rotate(5deg) scale(0.92); }
.ck-phones__c { z-index: 1; margin-left: -10%; transform: translateY(12%) rotate(10deg) scale(0.84); }

.ck-portal__media--gp { position: relative; padding: 0 9% 12% 0; }
.ck-portal__window { display: block; box-shadow: 0 0 0 1px oklch(0 0 0 / 0.08), 0 2.5rem 5rem -2rem oklch(0 0 0 / 0.38); }
.ck-portal__phone { right: 0; bottom: 0; height: 72%; opacity: 1; transform: rotate(4deg); transition: none; }
@media (min-width: 1024px) {
  .ck-portal__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ck-portal--glaeubiger .ck-portal__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .ck-phones .phone { width: min(36%, 15.5rem); }
}
@media (max-width: 1023px) {
  .ck-portal__media { order: 2; }
}

/* ---------- Galerie ---------- */
.ck-gallery { padding-block: var(--section); background: var(--white); }
.ck-gallery__grid { display: grid; gap: var(--s-6) var(--gutter); margin-top: clamp(2.5rem, 5vw, 4rem); }
.ck-shot {
  display: grid;
  gap: var(--s-3);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: zoom-in;
}
.ck-shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 900;
  object-fit: cover;
  object-position: top left;
  border-radius: var(--radius-l);
  box-shadow: 0 0 0 1px var(--line), 0 1.25rem 2.5rem -2rem oklch(0.2 0 0 / 0.4);
  transition: transform 0.7s var(--ease-expo), box-shadow 0.5s var(--ease-out);
}
.ck-shot:hover img { transform: translateY(-0.3rem); box-shadow: 0 0 0 1px var(--line-strong), 0 1.75rem 3rem -2rem oklch(0.2 0 0 / 0.5); }
.ck-shot:focus-visible { outline: none; }
.ck-shot:focus-visible img { outline: 2px solid var(--accent-ink); outline-offset: 4px; }
.ck-shot__cap { display: grid; gap: 0.1rem; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-soft); }
.ck-shot__cap b { font-size: 1rem; font-weight: 680; color: var(--ink); }
@media (min-width: 640px) { .ck-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ck-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Großansicht */
.ck-zoom {
  width: min(96vw, 112rem);
  max-width: none;
  max-height: 94vh;
  margin: auto;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  border: 0;
  border-radius: var(--radius-l);
  background: var(--white);
  color: var(--ink);
  overflow: auto;
}
.ck-zoom::backdrop { background: oklch(0.13 0 0 / 0.82); }
.ck-zoom__close {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3) auto;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
}
.ck-zoom__close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
.ck-zoom__close:hover { border-color: var(--line-strong); }
.ck-zoom__fig { display: grid; gap: var(--s-3); margin: 0; }
.ck-zoom__fig img { width: 100%; height: auto; max-height: calc(94vh - 8rem); object-fit: contain; border-radius: var(--radius); }
.ck-zoom__fig figcaption { font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------- Alle Funktionen ---------- */
.ck-features { padding-block: var(--section); background: var(--surface); }
.ck-features__grid { display: grid; gap: var(--gutter); margin-top: clamp(2.5rem, 5vw, 4rem); }
.ck-feature { display: grid; align-content: start; gap: var(--s-4); padding: clamp(1.4rem, 2.6vw, 1.9rem); border-radius: var(--radius-l); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.ck-feature h3 { font-size: 1.1875rem; font-stretch: 110%; font-weight: 740; line-height: 1.2; }
.ck-feature ul { display: grid; gap: 0.6rem; }
.ck-feature li { position: relative; padding-left: 1.1rem; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-soft); }
.ck-feature li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.42rem; height: 0.42rem; border-radius: 0.1rem; background: var(--accent); }
@media (min-width: 700px) { .ck-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ck-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Zahlen ---------- */
.ck-numbers { padding-block: clamp(4rem, 8vw, 6.5rem); background: var(--black-deep); color: var(--fog); }
.ck-numbers__list { margin-top: 0; padding-top: 0; border-top: 0; row-gap: clamp(2rem, 4vw, 3rem); }
.ck-numbers__list li:last-child b { color: inherit; }

/* ---------- Fragen, Vorführung, Überleitung ---------- */
.ck-faq { background: var(--white); }
.ck-own { display: grid; gap: var(--s-3); }
.ck-own__title { font-size: var(--fs-statement); font-stretch: 112%; font-weight: 740; line-height: 1.1; letter-spacing: -0.015em; color: var(--on-accent); }