/* ============================================================
   A-Maze Onepager v2 — Basis-Styles auf Ben-Stand (FigJam 11.08.)
   Tokens: Cyan/Orange/Pills/Nunito aus Bens Mocks (fj_z2/z4/z8).
   Cyan-Interim #00b3fd gepipettet — TODO: exakter Wert von Ben.
   ============================================================ */

:root {
  --cyan: #00a9ff;            /* Bens exaktes Flächen-Cyan (aus SVG a-maze_hero_claim) */
  --cyan-deep: #0a7fb8;       /* Text-Cyan auf Weiß (AA-fest) */
  --cyan-soft: #e3f5fe;
  --orange: #ff7c00;          /* Bens Hexcode (Feedback 21.08. nachmittags) */
  --orange-deep: #d96800;
  --ink: #262624;             /* Ben-Feedback 24.08.: alle Schwarztöne #262624 */
  --black: #262624;
  --yellow: #ffb400;          /* Ben-Feedback 24.08.: Gelbton */
  --paper: #ffffff;
  --paper-tint: #f4f4f4;   /* = Bens smile_transition-Grau */
  --kraft: #d4a782;
  --kraft-deep: #b98d63;
  --red: #e03131;             /* Garantie-Flags (Ben fj_z8) */
  --line: rgba(16, 16, 16, .14);
  --shadow-card: 0 10px 28px rgba(16, 16, 16, .13);
  --r-pill: 999px;
  --r-card: 14px;
  --font: "Nunito Sans", system-ui, -apple-system, sans-serif;
  --header-h: 64px;
  --wrap: 1180px;
  /* Bens Typo-System (21.08.): Illustrator-pt auf 1920er-Basis, responsive */
  --h1: clamp(64px, 6.25vw, 120px);
  --h2: clamp(50px, 4.69vw, 90px);
  --h3: clamp(36px, 3.13vw, 60px);
  --h4: clamp(30px, 2.5vw, 48px);
  --h5: clamp(24px, 1.88vw, 36px);
  --h6: clamp(19px, 1.25vw, 24px);
  --p1: clamp(18px, 1.09vw, 21px);
  --p2: clamp(16px, 0.94vw, 18px);
  --ls-h: -0.02em;   /* Illustrator −20 */
  --ls-p: -0.01em;   /* Illustrator −10 */
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--p2);            /* Ben: P2 = 18, SemiBold */
  font-weight: 600;
  letter-spacing: var(--ls-p);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
b, strong { font-weight: 800; }
img { max-width: 100%; height: auto; }
q { quotes: "„" "“"; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.skip-link {
  position: fixed; top: -48px; left: 12px; z-index: 99;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--r-pill);
  transition: top .2s ease-out; text-decoration: none; font-weight: 700;
}
.skip-link:focus { top: 10px; }

/* ---------- Preloader (Ben Vol.3 00 — 1:1 von a-maze-onepager.vercel.app) ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--cyan);
  display: flex; align-items: center; justify-content: center;
  pointer-events: all;
}
#preloader-lottie { width: clamp(140px, 22vw, 240px); height: clamp(120px, 19vw, 208px); }
#preloader.is-leaving { transition: opacity 0.45s ease; opacity: 0; pointer-events: none; }
.no-js #preloader { display: none; }

/* ---------- Sprung-Vorhang (Vol.7, Ben 16:47) ----------
   „Das geht zu langsam. Wenn man mehr als einen Anker ueberspringt, kannst du irgendwie eine
    Transition machen, waehrend der quasi zu dem Punkt springt. Irgendein Cyan Fade in und Fade
    out, wenn er wieder am Punkt ist. Dass du nicht diese Reise von ganz unten nach oben scrollst,
    dass das visuell zu sehen ist. Sieht total kacke aus."
   Gleiche Mechanik wie der Preloader: Cyan-Vollflaeche, rein, hart springen, wieder raus. */
#jumpveil {
  position: fixed; inset: 0; z-index: 9998; background: var(--cyan);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease-out;
}
#jumpveil.is-on { opacity: 1; }
.no-motion #jumpveil { display: none; }

/* ---------- Buttons: Pills (Ben) ----------
   Ben 24.08. (00): btn--lg-Maß (21px, 10/40) gilt für ALLE Buttons außer
   denen im Header; on hover KEIN Transform (nur Header behält seinen). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 800 var(--p1)/1.1 var(--font);
  padding: 10px 40px; border-radius: var(--r-pill);
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease-out, background-color .15s ease-out, color .15s ease-out;
}
/* Vol.7 (Ben 00:52): „der Button springt um zwei Pixel nach oben — fix that". Der Header-Button
   hatte als einziger noch ein Hover-Transform; jetzt gilt Bens Regel „on hover KEIN Transform"
   ueberall. Die transform-Transition oben bleibt, sie traegt das Auto-Hide des Headers. */
.btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
/* Vol.5 (Ben 04.09.): Hover-Prinzip vereinheitlicht — Pills invertieren (Farbe des anderen
   Zustands), Haupt-CTAs gehen auf Ink + Akzent (Bens Workflow-Ansage: „weißer Button auf
   grauem Grund geht nicht — on hover schwarzer Button, orange Schrift"). */
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--ink); color: var(--orange); }
.btn--roast { background: var(--orange); color: #fff; }
.btn--roast:hover { background: var(--ink); color: var(--orange); }
/* Vol.6 (Ben 01:00/14:35): auf DUNKLEM Grund (Header, Footer) invertiert der orange Button zu
   Weiß + Orange-Schrift — Ink auf Ink wäre unsichtbar */
.site-header .btn--roast:hover, .site-footer .btn--primary:hover { background: #fff; color: var(--orange); }
/* Vol.6 (Ben 02:01): Text-Markierung nicht in Browser-Standardfarbe — Kanon-Cyan, auf Cyan-
   Flächen Ink. Ben wählt ggf. noch einen eigenen Ton nach. */
::selection { background: var(--cyan); color: #fff; }
.band--cyan ::selection, .modell ::selection, .umsetzung ::selection { background: var(--ink); color: #fff; }
.btn--ghost { background: var(--cyan); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--cyan); }
.btn--pillcyan { background: var(--cyan); color: #fff; }
.btn--pillcyan:hover { background: #fff; color: var(--cyan); }
/* Ben 28.08. (07.5): weiße Pills ohne Border (galt seit 24.08. schon fürs Umsetzungs-Band) */
.btn--pillwhite { background: #fff; color: var(--ink); border-color: transparent; }
.btn--pillwhite:hover { background: var(--cyan); color: #fff; }
.site-header .btn--sm { font-size: .85rem; padding: .55em 1.1em; }
.btn--lg { font-size: var(--p1); padding: 10px 40px; }

/* ---------- Header (schwarz, Progress-Linie — Ben fj_z4) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--black); color: #fff;
  transition: transform .32s ease-out;
}
/* Auto-Hide: runter = weg, hoch = da (JS toggelt); Intro startet versteckt */
.site-header.is-hidden { transform: translateY(-102%); }
/* Ben 28.08. (01.1): vor/während des Intros ist der Header ab der ersten Millisekunde
   unsichtbar (Klasse setzt das Inline-Skript im <head>, js/main.js nimmt sie am Ende weg) */
.intro-hold .site-header { transform: translateY(-102%); transition: none; }
.intro-hold .scroll-progress { opacity: 0; }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;   /* Ben: 100 vw, Logo links 20 px, Nav rechts 20 px */
  /* Vol.7 (Ben 18:38) / Walter 09.09.: mit dem Roast-Button ist das hoechste Element aus der
     Kopfzeile verschwunden — sie waere von 62 auf 56 px geschrumpft. js/main.js misst die Hoehe
     und schreibt sie nach --header-h, woran der GESAMTE Karton-Aufdruck haengt (act1.css: Hero-
     Padding, face__top, Stempel) und die Fortschrittslinie. Ein schrumpfender Header haette den
     kompletten Aufdruck verschoben. Hoehe deshalb festgenagelt auf den bisherigen Wert.
     Achtung: global gilt box-sizing: border-box (styles.css:41), min-height meint also die
     Gesamthoehe inklusive der 2 x 14 px Padding, nicht den Inhalt. */
  min-height: 62px;
}
.brandmark { display: inline-flex; }
.mainnav { display: flex; align-items: center; }
.navmenu {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
  list-style: none; margin: 0; padding: 0;
}
.navmenu a:not(.btn) {
  color: #fff; text-decoration: none; font-weight: 700; font-size: 16px;
  letter-spacing: var(--ls-p); line-height: 1;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  /* Vol.7 (Ben 00:25): „on hover irgendeine Transition, fade in ab 0,5 Sekunden von diesem
     Streifen aber nur. Und on hover out das gleiche rueckwaerts." Nur der Unterstrich fadet,
     die Schrift bleibt unangetastet. */
  transition: border-bottom-color .5s ease-out;
}
.navmenu a:not(.btn):hover { border-bottom-color: var(--cyan); }
.navtoggle { display: none; }
/* Ben 28.08. (02.3): Fortschrittslinie wie in Bens Design an der Header-UNTERKANTE —
   als eigenes fixiertes Element, damit sie beim Header-Auto-Hide nicht verschwindet:
   versteckt sich der Header, gleitet die Linie mit dessen Kante an den oberen Bildrand
   (.hdr-hidden toggelt js/main.js synchron zum Header). */
.scroll-progress {
  position: fixed; top: calc(var(--header-h) - 3px); left: 0; right: 0; z-index: 50;
  height: 3px; overflow: hidden;
  background: rgba(255, 255, 255, .12);
  transition: top .32s ease-out, opacity .3s ease-out;
}
.hdr-hidden .scroll-progress { top: 0; }
.no-motion .scroll-progress, .act1--static ~ * .scroll-progress { top: calc(var(--header-h) - 3px); }
.scroll-progress::after {
  content: ""; position: absolute; inset: 0;
  background: var(--cyan);
  transform: translateX(calc(-100% + var(--progress, 0%)));
}

/* ---------- Smile-Übergänge (Bens SVGs, 21.08.) ---------- */
/* Bogen-Übergänge. Walter 01.09. (Video 4): an der Unterkante jedes Bogens stand eine Haarlinie —
   die SVG-Höhe ist ein Bruchteil eines Pixels (vw-basiert), die letzte Zeile wird halbtransparent
   gerastert und lässt die Container-Farbe durchscheinen. Fix: jeder Separator überlappt die
   Folgesektion um 1 px (margin-bottom −1 px); die Sektion malt später und deckt die Kante. */
.smile-sep { line-height: 0; font-size: 0; position: relative; margin-bottom: -1px; }   /* positioniert: liegt über dem .act1-Pin-Spacer (Malreihenfolge) */
.smile-sep img { display: block; width: 100%; height: auto; }
.smile-sep--to-paper { background: var(--paper); }     /* Cyan-Smile auf Weiß */
.smile-sep--to-cyan { background: var(--cyan); }       /* Grau-Kuppe auf Cyan */
.smile-sep--to-tint { background: var(--paper-tint); } /* Cyan-Kuppe auf Grau */
.smile-sep--flip img { transform: scaleY(-1); }        /* Bogen als Kuppe nach oben */

/* ---------- Sektionen ---------- */
.band { position: relative; padding-block: clamp(64px, 9vw, 128px); }
.band--paper { background: var(--paper); }
.band--tint { background: var(--paper-tint); }
.band--cyan { background: var(--cyan); color: #fff; }
/* Ben-PDF 12_AM (04.09.): Beweis-Zahlen + Workflow + Outcome laufen auf DUNKEL */
.band--dark { background: var(--ink); color: #fff; }
/* Bens Bogensprache (Nachschliff 04.09., Walter): weite 210er-Kuppen statt flacher
   70px-Kanten. dome-top wölbt die EIGENE Fläche nach oben in den Vorgänger,
   dome-bottom nach unten in den Nachfolger — background:inherit macht beide
   texturfähig (FAQ-Karton). Vorgänger/Nachfolger brauchen genug Leer-Padding. */
/* Nachschliff 2 (Walter 04.09., PDF VERMESSEN statt interpretiert): Bens Boegen sind
   KREISBOEGEN (R = 1,23 Viewportbreiten, Fit-Fehler 6 px — die Ellipse lag 101 px daneben).
   Umsetzung als Inline-SVG-Separatoren im Fluss (arc-sep), Farbe des Blocks = --ink
   (gemessen #262623 im PDF = bit-gleich). Hoehen: oben 10,625 % der Breite, unten 8,375 %. */
.arc-sep { line-height: 0; font-size: 0; position: relative; margin-bottom: -1px; }
.arc-sep svg { display: block; width: 100%; height: auto; }
.arc-sep--tint { background: var(--paper-tint); }   /* Zwickel = Vorgaenger-Grau */
.arc-sep--cyan { background: var(--cyan); }          /* Zwickel = Cyan */
.arc-sep--ink { background: var(--ink); color: var(--cyan); }   /* Block = Vorgaenger-Dunkel, Zwickel (Pfad) = Cyan — keine Haarlinie an der Oberkante (12.09.) */
.band--dark .ix, .band--dark .section-h2 { color: #fff; }
.band--dark .stat__lab { color: rgba(255,255,255,.88); }
.band--dark .bene__stats { border-bottom-color: rgba(255,255,255,.22); }
.band--dark .wf__h { color: var(--cyan); }
.band--dark .wf__b { color: rgba(255,255,255,.88); }
.band--dark .wf__arrow { color: rgba(255,255,255,.4); }
.band--dark .befundstapel__caption { color: rgba(255,255,255,.92); }
.smile-sep--to-dark { background: var(--ink); }
/* Kompaktere Rhythmik INNERHALB des dunklen Bogens (Walter 04.09.: Zwischenräume zu groß) */
#benefits.band--dark { padding-bottom: clamp(28px, 3.2vw, 48px); }
#workflow.band--dark { padding-block: clamp(28px, 3.2vw, 48px); }
#outcome.band--dark { padding-top: clamp(28px, 3.2vw, 48px); }
/* Workflow-Icons (Bens PDF, Strichstärken vereinheitlicht) ersetzen die Step-Nummern */
.wf__icon { width: 76px; height: 76px; margin-bottom: 4px; }

/* Geschwungene Schnittkanten (Ben fj_z8) — Bens Sektionen sind NICHT
   rechteckig gestapelt, sondern durch weite, flache Bögen getrennt.
   Die Zackenkante aus v2 ist raus: Ben zeichnet Kurven, keine Risse. */
.band--arc-top { margin-top: -1px; }
/* Bogen exakt viewportbreit (0/0) — jeder Überhang landet sonst 1:1 im
   horizontalen Dokument-Scroll. Gemessen: -3 % Überhang = +3 % scrollWidth
   auf JEDEM Viewport. */
.band--arc-top::before {
  content: ""; position: absolute; z-index: 0;
  left: 0; right: 0; top: -68px; height: 70px;
  background: inherit;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.band--arc-bottom { margin-bottom: -1px; padding-bottom: clamp(72px, 10vw, 140px); }
.band--arc-bottom::after {
  content: ""; position: absolute; z-index: 0;
  left: 0; right: 0; bottom: -68px; height: 70px;
  background: inherit;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.band > .wrap { position: relative; z-index: 1; }

/* Ben Vol.4 (03): ALLE Handles/Kicker in einer Typo — wie die Karton-Handles
   („Dein Pain:", act1: h5, Black, kein Letter-Spacing) */
.ix {
  font-size: var(--h5); font-weight: 900; letter-spacing: 0;
  margin: 0 0 .6em;
}
.ix--oncyan { color: rgba(255, 255, 255, .92); }
.section-h2 {
  font-size: var(--h4); font-weight: 900; line-height: 1.04;
  letter-spacing: var(--ls-h);
  margin: 0 0 .7em; max-width: 21ch;
}
.section-h2--oncyan { color: #fff; }
.lead { font-size: var(--p1); max-width: 56ch; }
.kernsatz { font-weight: 900; font-size: 1.25rem; max-width: 46ch; margin-top: 2.2em; }
.callout {
  border-left: 5px solid var(--cyan); padding: .55em 0 .55em 1em;
  font-weight: 700; max-width: 52ch;
}

/* ---------- Lösung: Bens Editorial-Satz ----------
   Bens Layout ist NICHT ein zentrierter Absatz in einer Farbfläche, sondern
   eine dicht gesetzte Magazinseite: fette Display-Zeile links, Fließtext
   rechts in schmalen Spalten. Das ist der Unterschied zwischen „Agentur"
   und „Baukasten" — und er hat mit 3D nichts zu tun. */
/* Die Lösung schließt farbgleich an die Cyan-Naht des Kartons an — deshalb
   oben wenig Polster, sonst entsteht eine leere Cyan-Wüste. */
/* Ben Vol.3 (08.1) + Walter 01.09. (Video 3): #modell-frame (Modell + Bogen + Services) liegt UNTER
   der letzten Bildschirmhöhe der Karton-Stage (z 1 < Stage 3). Während der Öffnung wird der GANZE
   Rahmen fixiert und um die Bildmitte skaliert (--s aus js/main.js: Kameraabstand am Tauch-Ende ÷
   aktueller Abstand zum Boden) — dasselbe DOM, dasselbe CSS wie im Seitenfluss, nur kleiner.
   Am Pin-Ende (scrollY = end) ist die Flow-Position exakt top 0 → Wechsel ohne Sprung. */
.js:not(.no-motion) #modell-frame { position: relative; margin-top: -100svh; z-index: 1; background: var(--cyan); }
/* Ben Vol.4 (02): kein Zoom aufs Modell nach dem Öffnen — der Rahmen liegt fixiert in
   Endgröße (1:1) hinter dem Loch, keine Skalierung mehr. */
.js:not(.no-motion) #modell-frame.is-fixed {
  position: fixed; top: 0; left: 0; right: 0; margin-top: 0;
}
/* Walter 02.09.: mehr Cyan-Boden — der weiße Bogen sitzt tiefer (Modell füllt mind. eine
   Viewporthöhe). Nur Desktop — die Mobile-Regel (≤900px, min-height 0) bleibt unangetastet. */
@media (min-width: 901px) {
  .js:not(.no-motion) .modell { min-height: max(calc(.592 * var(--cw) + var(--sep-h)), 100svh); }
}
.ed-grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4.5vw, 76px); align-items: start;
  margin-top: clamp(18px, 2.5vw, 34px);
}
.display-h2 {
  font-size: var(--h2); font-weight: 900; line-height: 1;
  letter-spacing: var(--ls-h); color: #fff; margin: 0 0 .5em; max-width: 11ch;
}
.ed-sub {
  font-size: var(--h5); font-weight: 900; line-height: 1.06;
  letter-spacing: var(--ls-h);
  color: #fff; margin: 0 0 .6em; max-width: 20ch;
}
.ed-claim {
  font-size: 1.02rem; font-weight: 800; color: #fff;
  margin: 0 0 1.3em; max-width: 44ch;
}
.ed-cols {
  columns: 2; column-gap: clamp(20px, 2.4vw, 34px);
  font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.94);
  text-align: left; hyphens: auto;   /* Vol.5 (Ben): kein Blocksatz */
}
.ed-cols p { margin: 0 0 .9em; break-inside: avoid-column; }
.visualslot {
  aspect-ratio: 16 / 10; border-radius: 10px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3);
  display: grid; place-content: center; text-align: center;
  color: rgba(255,255,255,.82); font-weight: 800; font-size: .9rem;
  padding: 1em;
}
.ed-center {
  text-align: center; margin: clamp(38px, 5.5vw, 72px) 0 0;
  font-size: clamp(1.4rem, 2.8vw, 2.1rem); font-weight: 900; color: var(--ink);
}
@media (max-width: 900px) {
  .ed-grid { grid-template-columns: 1fr; }
  .ed-cols { columns: 1; text-align: left; }
}

/* ---------- Leistungen: 3 Karten (Ben fj_z8) ---------- */
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px);
  align-items: stretch; margin-top: 2.2em;
}
.svc {
  position: relative; background: #fff; border-radius: var(--r-card);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
  padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
}
/* Ben 24.08. (07.5): Account-Diagnose-Karte ohne schwarze Border */
.svc--main { border: 1px solid var(--line); }
/* Bens Eck-Banner: sitzt bündig in der oberen rechten Kartenecke, nicht als
   freischwebendes Label über dem Rand */
.svc__flag {
  position: absolute; top: 0; right: 0; margin: 0;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: #fff;
  padding: .45em 1.1em; border-radius: 0 var(--r-card) 0 12px;
}
.svc__flag--free { background: var(--cyan); }
.svc__flag--garantie { background: var(--yellow); color: var(--ink); }   /* Ben 24.08. (07.4): #ffb400 */
.svc--main .svc__flag--garantie { background: #f2721f; color: #fff; }
/* Button-Progression Cyan → Gelb → Orange (Ben: die Stufen werden „teurer")
   Ben 24.08. (07.4/07.6): Gelb = #ffb400, Schrift schwarz */
.btn--pillyellow { background: var(--yellow); color: var(--ink); }
.btn--pillyellow:hover { background: #e0a000; color: var(--ink); }
.svc__details {
  font-size: .86rem; font-weight: 800; color: var(--cyan-deep);
  text-decoration: underline; text-underline-offset: 3px;
}
.svc__icon { width: 40px; height: 40px; color: var(--ink); }
.svc__title { font-size: var(--h6); font-weight: 900; letter-spacing: var(--ls-h); line-height: 1; margin: .35em 0 0; }
.svc__cat { margin: 0; font-size: .85rem; font-weight: 700; color: rgba(38,38,36,.6); }
.svc__price {
  display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: .9em; margin: .9em 0 0;
}
.svc__pricelabel { font-size: .85rem; font-weight: 700; }
.svc__amount { font-size: 1.6rem; font-weight: 900; color: var(--cyan-deep); margin-left: auto; }
.svc__pricenote { flex-basis: 100%; font-size: .76rem; color: rgba(38,38,36,.55); text-align: right; }
.svc__teaser { margin: .2em 0 0; font-size: .95rem; }
.svc__list { margin: 0; padding-left: 1.15em; font-size: .92rem; display: grid; gap: .45em; }
.svc__fine { font-size: .8rem; color: rgba(38,38,36,.65); margin: 0; }
.svc__cta { margin-top: auto; align-self: stretch; }
/* Ben 24.08. (07.7): Details-Link sitzt direkt unter dem Copytext (vor dem CTA) */
.svc .svc__details { align-self: flex-start; margin-top: -4px; }

/* Umsetzungs-Band (Ben fj_z8) */
.umsetzung {
  margin-top: clamp(28px, 4vw, 44px);
  background: var(--cyan); color: #fff; border-radius: 18px;
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
  padding: clamp(18px, 2.6vw, 28px) clamp(20px, 3vw, 36px);
  flex-wrap: wrap;
}
.umsetzung__icon { width: 44px; height: 44px; flex: none; }
/* Ben 24.08. (07.8): „Details besprechen"-Button ohne Border */
.umsetzung .btn--pillwhite { border: 0; }
.umsetzung__text { flex: 1 1 380px; border-left: 1px solid rgba(255,255,255,.42); padding-left: clamp(16px, 2vw, 28px); }
.umsetzung__title { margin: 0; font-weight: 900; font-size: 1.15rem; }
.umsetzung__body { margin: .3em 0 0; font-size: .95rem; }   /* war `.three` — ungültiger Wert */

/* ---------- Benefits ---------- */
.bene__stats {
  display: flex; gap: clamp(24px, 5vw, 72px); flex-wrap: wrap;
  margin: 2em 0 0; padding-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--line);          /* Bens Trennlinie unter der Zahlenreihe */
}
.stat { display: grid; gap: .2em; max-width: 230px; }
/* Vol.5 (Ben): Kanon-Cyan statt Text-Cyan, Label eine Stufe größer */
.stat__fig { font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 900; color: var(--cyan); line-height: 1; }
/* ∞ (Walter 22.09.): die Glyphe ist in Nunito Sans nur x-hoch und wirkt neben „2.000 €" mickrig.
   Hochskalieren auf Versalhöhe, line-height 0, damit die Zeile (und damit das Label darunter)
   exakt auf der Höhe der Nachbar-Stats bleibt. */
.stat__sym { display: inline-block; font-size: 1.75em; line-height: 0; vertical-align: -.06em; }
.stat__lab { font-size: .95rem; }
.bene__stats + .befund { margin-top: clamp(28px, 4vw, 48px); }

/* ---------- Workflow (Ben fj_z8: 4 Spalten mit Cyan-Überschriften) ----------
   Fehlte in v3 komplett — steht aber in Bens Screendesign. */
.wf__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 46px); margin-top: clamp(26px, 4vw, 46px);
}
.wf__step { display: grid; gap: .5em; align-content: start; }
.wf__h {
  font-size: var(--h6); font-weight: 900; line-height: 1.1;
  letter-spacing: var(--ls-h);
  color: var(--cyan-deep); margin: 0;
}
.wf__b { font-size: .9rem; margin: 0; }
@media (max-width: 900px) { .wf__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wf__grid { grid-template-columns: 1fr; } }
.befund { margin: 0; max-width: 720px; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); }
.befund__bar { display: flex; align-items: center; gap: .6em; padding: .6em 1em; background: var(--paper-tint); border-bottom: 1px solid var(--line); font-size: .85rem; font-weight: 700; }
.befund__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); }
.befund__tag { margin-left: auto; font-size: .72rem; background: var(--ink); color: #fff; padding: .2em .7em; border-radius: 4px; }
.befund__body { margin: 0; padding: 1.1em 1.2em; font-size: .98rem; }

/* ---------- Über ---------- */
.ueber__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
/* v21.5 (Walter 12.09.): kein Spalt mehr zwischen Freisteller und Etikett — das Etikett
   klebt am Bild, wie auf einem Paket. */
.ueber__side { display: grid; gap: 0; }
.fotoslot {
  aspect-ratio: 3 / 4; border: 2px dashed var(--kraft-deep); border-radius: var(--r-card);
  background: var(--paper-tint);
  display: grid; place-content: center; gap: .5em; text-align: center;
}
.fotoslot__tag { font-size: .8rem; font-weight: 700; }
.fotoslot__name { font-size: 1.6rem; font-weight: 900; color: var(--kraft-deep); }
.idlabel {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 16px 18px; display: grid; gap: 4px; font-size: .85rem;
  box-shadow: var(--shadow-card);
  /* v21.5: eigene Textfarbe — auf .band--cyan erbten die Kinder sonst Weiß und
     standen weiß auf weißem Etikett (nur __head hatte eine eigene color). */
  color: var(--ink);
}
.idlabel__head { font-size: .7rem; letter-spacing: .1em; font-weight: 800; color: rgba(38,38,36,.55); }
.idlabel__name { font-weight: 900; font-size: 1.05rem; }
.idlabel__role { font-size: .8rem; color: rgba(38,38,36,.7); }
/* Steckbrief-Felder wie auf einem echten Versandetikett: Label links, Wert rechts */
.idlabel__specs {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line);
  display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: .78rem;
}
.idlabel__specs dt {
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  font-size: .64rem; color: rgba(38,38,36,.5); align-self: center;
}
.idlabel__specs dd { margin: 0; font-weight: 600; }
.idlabel__barcode {
  margin-top: 8px; height: 34px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 8px, transparent 8px 10px, var(--ink) 10px 11px, transparent 11px 15px);
}
/* Über auf Cyan — echter Walter-Freisteller + Namensschild */
.callout--oncyan { border-left: 0; padding-left: 0; }
.fotoreal { position: relative; margin: 0; align-self: end; }
.fotoreal__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.28)); }
.fotoreal__tag {
  position: absolute; left: 50%; top: 33%; transform: translateX(-50%) rotate(-3deg);
  background: #fff; color: var(--ink); font-weight: 900; font-size: .82rem;
  padding: 4px 14px; border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,.28);
  border: 1px solid rgba(0,0,0,.06);
}
/* Dev-TODO-Chips in der Präsentation ausblenden (Marker bleiben im Code) */
.todo-copy { display: none !important; }

/* ---------- FAQ (auf Cyan) ---------- */
.faq { display: grid; gap: 12px; max-width: 760px; }
.faq details { background: #fff; color: var(--ink); border-radius: 12px; box-shadow: var(--shadow-card); }
/* Vol.6 (Ben 13:20 „nach Schema F"): Frage = H6 Black wie alle Titel-Stufen (svc__title),
   Antwort = P2 Semibold wie der Fließtext — keine FAQ-eigenen Typo-Werte mehr */
.faq summary {
  cursor: pointer; font-size: var(--h6); font-weight: 900; letter-spacing: var(--ls-h); line-height: 1.2;
  padding: 16px 20px; border-radius: 12px;
  list-style: none; position: relative; padding-right: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
/* Vol.5 (Ben): Plus aus zwei echten Strichen — beim Öffnen dreht der vertikale um 90°
   und verschmilzt mit dem horizontalen zum Minus („das ist doch super") */
.faq summary::before,
.faq summary::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 14px; height: 2.5px; border-radius: 2px;
  background: var(--cyan-deep);
  transform: translateY(-50%);
}
.faq summary::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform .3s ease-out;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(0deg); }
.faq details p { margin: 0; padding: 0 20px 18px; font-size: var(--p2); font-weight: 600; line-height: 1.5; }
/* Vol.6 (Ben 13:30): kein Snap — die Box wächst weich (Höhe animiert js/ui.js über den
   .faq__body-Wrapper), der Text fadet 0,5 s von oben ein (Vol.5-Idee, jetzt in Bens Dauer) */
.faq__body { overflow: hidden; }
.js:not(.no-motion) .faq__body { transition: height .5s ease-out; }
.js:not(.no-motion) .faq details[open] .faq__body p { animation: faq-in .5s ease-out both; }
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: #fff; padding-block: clamp(48px, 6vw, 80px); }
.site-footer__grid {
  display: grid; grid-template-columns: 1.2fr .8fr;
  gap: clamp(28px, 5vw, 90px); align-items: start;
}
.site-footer__col { display: grid; gap: 16px; justify-items: start; }
.site-footer__col--right { justify-items: start; }
.site-footer__claim { margin: -6px 0 0; font-weight: 800; letter-spacing: .14em; color: var(--cyan); }
/* Vol.6 (Ben 14:50): „Welche Typo ist das? Versalien hatten wir nirgendwo" — Spaltenköpfe in
   System-Typo P2 Black, Einträge P2 Semibold (= Fließtext); gleiche Zeilenhöhe → ein Raster */
.site-footer__head { margin: 0; font-size: var(--p2); font-weight: 900; letter-spacing: var(--ls-p); line-height: 1.2; color: #fff; }
.site-footer__line { margin: 0; font-weight: 700; }
@media (max-width: 720px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; margin: 0; padding: 0; }
.site-footer__nav a { color: #fff; text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; }
.site-footer__nav a:hover { border-bottom-color: var(--cyan); }
.site-footer__copy { margin: 0; color: rgba(255,255,255,.55); font-size: .85rem; }

/* ---------- TODO-Chip (Prototyp — vor Live-Gang entfernen) ---------- */
.todo-copy {
  display: inline-block; vertical-align: middle;
  background: #ffe45c; color: var(--ink);
  font-size: .62rem; font-weight: 800; letter-spacing: .02em;
  padding: .25em .6em; border-radius: 4px; margin-left: .5em;
  text-transform: uppercase;
}

/* ---------- Reveals (IO, nur mit JS + Motion) ---------- */
.js:not(.no-motion) .reveal-target { opacity: 0; transform: translateY(22px); }
.js:not(.no-motion) .reveal-target.is-inview {
  opacity: 1; transform: none;
  transition: opacity .6s ease-out, transform .6s ease-out;
}

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  .svc-grid { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 900px) {
  .ueber__grid { grid-template-columns: 1fr; }
  .fotoslot { max-width: 320px; }
}
/* Vol.7: das Menue unter 1024 px ist jetzt ein Vollbild-Overlay (responsive.css). Diese aeltere
   767er-Panel-Regel wuerde es teilweise ueberschreiben und ist deshalb still gelegt — der Block
   bleibt als Historie stehen, greift aber nur noch ohne responsive.css. */
@media (max-width: 767px) {
  .navmenu:not([id]) {
    position: absolute; right: 0; top: 100%;
    flex-direction: column; align-items: flex-end; gap: 14px;
    background: var(--black); padding: 18px 22px; border-radius: 0 0 0 14px;
    transform: scaleY(0); transform-origin: top; transition: transform .2s ease-out;
  }
  .mainnav.is-open .navmenu { transform: scaleY(1); }
  .navtoggle {
    display: grid; gap: 4px; background: none; border: 0; padding: 8px; cursor: pointer;
  }
  .navtoggle__bar { width: 22px; height: 2px; background: #fff; }
}



/* ============================================================
   MODELL — Ben 01.09. („Modell+Services.pdf"), am 200-dpi-Render nachgemessen und auf die
   Rasterbreite --cw (= .wrap-Inhalt, max 1084 px) übertragen. Mock-Raster 70,6 vw breit:
   Kicker/H1 oben bei 9,6 vw → .137·cw · Textspalte ab 56,2 % der Rasterbreite · Foto 42,2 vw
   breit (.598·cw), Kopf bei 5,6 vw (.080·cw), linke Kante 3,3 vw links vom Raster (.047·cw),
   Unterkante 10,5 vw unter dem Bogen-Start = auf der Kurve · Sektion bis Bogen-Start 41,8 vw
   (.592·cw), darunter die Bogenzone (10,94 vw), in die der Text laufen darf.
   Farben (Mock): Kicker + H1 weiß, Sub + Fließtext #262624, Fließtext Regular.
   ============================================================ */
.modell {
  --cw: min(100vw - 2 * clamp(20px, 4vw, 48px), 1084px);
  --sep-h: 10.94vw;                                 /* Bens Kurve 1920×210 */
  padding-top: calc(.137 * var(--cw));
  padding-bottom: 0;                                /* Text darf in die Bogenzone laufen (Mock) */
  min-height: calc(.592 * var(--cw) + var(--sep-h));   /* Sektion + Bogenzone */
  overflow: visible;
}
/* Ben Vol.4 (03): nach Raster — Textbox = rechte Rasterhälfte (50/50), definierter
   Abstand von der Mitte zur Textbox (column-gap), globale Paddings über --cw. */
.modell__grid {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 2.5vw, 44px);
}
.modell__kicker {
  grid-column: 1; align-self: start;
  font-size: var(--h5); font-weight: 900; letter-spacing: 0; margin: 0;   /* Ben Vol.4: gleiche Typo wie alle Handles */
  color: #fff; position: relative; z-index: 4;
}
/* Foto: Platzhalter (Walter 01.09.), Bens Bild mit Namensschild folgt. Geometrie nach Mock;
   object-fit: cover/top schneidet unser hochformatiges Cutout wie Bens Crop unterhalb der Arme */
.modell__photo {
  position: absolute; z-index: 2; margin: 0;
  left: calc((100vw - var(--cw)) / 2 - .047 * var(--cw));
  top: calc(.080 * var(--cw));
  bottom: 0;                                        /* Unterkante = Sektionsende; die Kurven-Maske deckt sie (+1 px) → Foto endet exakt im Bogen (Mock) */
  /* Ben Vol.4 (03): 50/50-Raster — rechte Fotokante endet an der Rastermitte,
     damit der Fließtext der rechten Hälfte nie ins Foto läuft (war .598·cw) */
  width: calc(.547 * var(--cw));
}
.modell__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.modell__text { grid-column: 2; position: relative; z-index: 4; }   /* Ben Vol.4: volle rechte Rasterhälfte (max-width raus) */
/* Typo im Mock (1920er-Artboard, Raster 1355 px): H1 ≈ 120, Sub ≈ 48, Kicker 36, Fließtext ≈ 12,5 px
   Regular mit weitem Durchschuss — auf unser 1084er-Raster übertragen (·cw), H1 am Token-Max gedeckelt.
   „Me, myself" bleibt wie im Mock einzeilig (hängt rechts über die Textspalte hinaus). */
/* Vol.5 (Ben): „Headline viel zu groß, keine durchgängigen H-Stufen" — auf Token --h2
   gedeckelt statt Mock-Maß (war min(.0886·cw, 120px) ≈ H1-Größe) */
.modell__h2 {
  font-size: var(--h2); font-weight: 900; line-height: .96; letter-spacing: var(--ls-h);
  color: #fff; margin: 0 0 .3em; white-space: nowrap;
}
.modell__sub {
  font-size: calc(.0354 * var(--cw)); font-weight: 900; line-height: 1.02; letter-spacing: var(--ls-h);
  color: var(--ink); margin: 0 0 .7em;              /* Mock: dunkel */
}
.modell__cols {
  columns: 2; column-gap: clamp(16px, 1.3vw, 26px);
  /* Walter 02.09. (Video): Fließtext war mit Mock-12px zu klein → globaler p-Text (--p2).
     Vol.5 (Ben): Durchschuss 150 % wie überall + kein Blocksatz */
  font-size: var(--p2); font-weight: 400; line-height: 1.5; color: var(--ink);
  text-align: left; hyphens: auto;
  /* Ben Vol.4 (03): Text sitzt nicht mehr an der Bogenkante — Luft nach unten,
     die Sektion wächst entsprechend (Bogen rutscht mit). */
  margin-bottom: calc(var(--sep-h) * .6);
}
.modell__cols p { margin: 0 0 .9em; break-inside: avoid-column; }
/* Graue Ecken-Maske über dem Sektionsende: Kurve = Bens Asset; liegt ÜBER dem Foto (z 3) */
/* Die Maske ragt 2 px in die graue Services-Sektion hinein: ihre gerasterte Unterkante liegt dann
   über Grau (unsichtbar) statt über dem Cyan-Sektionsende (Haarlinie). */
.smile-sep--mask { margin-top: calc(-10.94vw - 1px); margin-bottom: -2px; z-index: 3; }
.smile-sep--mask svg { display: block; width: 100%; height: calc(10.94vw + 3px); }
@media (max-width: 900px) {
  .modell { min-height: 0; padding-bottom: calc(10.94vw + 24px); }
  .modell__grid { grid-template-columns: 1fr; }
  .modell__photo { position: static; width: min(100%, 360px); margin: 12px 0 0; }
  .modell__photo img { height: auto; }
  .modell__h2 { white-space: normal; }
  .modell__text { grid-column: 1; }
  .modell__cols { columns: 1; text-align: left; }
}

/* ============================================================
   SERVICES — Ben 01.09.: Karten flach auf Grau, Icon-Kreise, Preis rechts in Cyan,
   Trennlinien unter Kopf und über Button, weiße Schrift auf Gelb, Umsetzung-Band
   ============================================================ */
.services { padding-top: clamp(48px, 5.5vw, 88px); }
/* Vol.5 (Ben): Page-Handles einheitlich — gleicher Schnitt/Größe wie alle .ix (h5, Black) */
.services__kicker { font-size: var(--h5); font-weight: 900; letter-spacing: 0; color: var(--ink); margin: 0 0 .6em; }
.services__h2 { font-size: clamp(32px, 3.6vw, 56px); max-width: none; margin-bottom: .55em; }
.services__h2--umsetzung { margin-top: clamp(48px, 5.5vw, 88px); }
/* Sternchen-Aufloesung der Garantie-Fahnen (14.09.) */
.services__fn { margin: 1.6em 0 0; max-width: 72ch; font-size: .8rem; line-height: 1.55;
  color: rgba(38,38,36,.62); }
.services__fn b { font-weight: 700; color: rgba(38,38,36,.8); }
.services .svc {
  border: 0; box-shadow: none; border-radius: 16px;
  padding: 32px 30px 30px; gap: 16px;
}
.services .svc__flag { font-size: .82rem; font-weight: 700; padding: .55em 1.35em; border-radius: 0 16px 0 12px; }
.services .svc__flag--free { background: var(--cyan); color: #fff; }
.services .svc__flag--garantie { background: var(--yellow); color: #fff; }        /* Mock: weiß auf Gelb */
.services .svc--main .svc__flag--garantie { background: var(--orange); color: #fff; }
.services .svc__head { border-bottom: 2px solid var(--line); padding-bottom: 22px; }   /* Vol.5 (Ben): Divider 2 px */
.services .svc__icon { width: 50px; height: 50px; }
.services .svc__title { font-size: clamp(24px, 1.9vw, 30px); margin: .55em 0 0; }
/* Vol.5 (Ben 19.02): einzeilige Stufen-Zeile („Das volle Programm.") rutscht auf die
   2. Zeile runter — alle drei Karten-Köpfe schließen auf derselben Grundlinie ab */
.services .svc__cat { font-size: 1rem; font-weight: 600; color: rgba(38,38,36,.75); margin: .25em 0 0; min-height: 3em; display: flex; align-items: flex-end; }
.services .svc__price { border-top: 0; padding-top: 0; margin: 1.2em 0 0; align-items: baseline; }
.services .svc__pricelabel { font-size: 1rem; font-weight: 700; }
.services .svc__amount { font-size: 2rem; color: var(--cyan); line-height: 1; }
/* Vol.6 (Ben 09:45): Abstand Euro-Wert → „zzgl."-Zeile um zwei Drittel reduziert (Zeilenkasten
   des großen Betrags eng, Note rückt an die Grundlinie) */
.services .svc__pricenote { font-size: .78rem; margin-top: -.55em; }
.services .svc__teaser { font-size: 1rem; margin: 0; min-height: 4.5em; }   /* Vol.5 (Ben 20.11): Teaser auf 3-Zeilen-Raster — Listen starten bündig */
.services .svc__list { font-size: .98rem; font-weight: 600; gap: .55em; padding-left: 1em; }   /* Vol.5 (Ben 20.11): kein 2-zeiliger Bullet — Größe/Einzug minimal runter */
.services .svc__details { color: var(--cyan); font-size: 1rem; font-weight: 800; text-decoration: none; }
.services .svc__details:hover { text-decoration: underline; }
/* Trennlinie über dem Button (Mock), von Kante zu Kante.
   Ben Vol.4 (04): Buttons + Divider aller Karten auf EINER y-Achse — CTA ans
   Kartenende (margin-top auto), die Karten sind im Grid gleich hoch. */
.services .svc__cta { position: relative; margin-top: auto; }
.services .svc .svc__details { margin-bottom: 26px; }
/* Vol.5 (Ben): Strich läuft mit dem Karten-Padding (nicht Kante zu Kante) + 2 px */
.services .svc__cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 2px; background: var(--line);
}
/* Mock: weiße Schrift auf dem gelben Button (überschreibt Vol.1-Spec nur hier) */
.services .btn--pillyellow { color: #fff; }
/* Walter 02.09.: Karten-CTAs on hover schwarzer Grund mit Akzentfarbe der Karte */
.services .btn--pillcyan:hover { background: var(--ink); color: var(--cyan); }
.services .btn--pillyellow:hover { background: var(--ink); color: var(--yellow); }
.services .svc__cta.btn--primary:hover { background: var(--ink); color: var(--orange); }
.services .umsetzung .btn--pillwhite:hover { background: var(--ink); color: #fff; }
#ueber .btn--pillwhite:hover { background: var(--ink); color: #fff; }

/* Vol.6 (Ben 11:50): der Trennstrich war mit der längeren Preiszeile („Preisschild kommt mit dem
   Befund.", nowrap, max-content) nach rechts gerutscht. Jetzt: linke Hälfte (Lead .8 + Preis 1.2)
   = rechte Hälfte (Text 2) → Strich sitzt bei exakt 50 % (absolut, nicht als Spalte), die
   Preiszeile darf zweizeilig werden, die Textbox bekommt die frei gewordene Breite. */
.services .umsetzung {
  position: relative; margin-top: 30px;   /* Ben Vol.4 (05): Vollgas-Fahne saß in der H2 — Luft nach oben */
  border-radius: 20px; padding: clamp(30px, 3.2vw, 44px) clamp(24px, 3vw, 40px) clamp(24px, 2.6vw, 34px);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 44px); align-items: stretch;
}
/* Vol.7 (Ben 05:48): „hier sitzt der Handle genau oben rechts drin mit dem Framing. Hier soll
   der auch mit dem Framing drin sitzen. Nur hier ist er rechts, da ist er links." Die Fahne
   ragte 15 px ueber die Oberkante und sass links; jetzt buendig in der Ecke wie .svc__flag,
   gleiche Seite (rechts), gleiche Radius-Logik (aussen der Kartenradius, innen 12). */
.umsetzung__flag {
  position: absolute; top: 0; right: 0; left: auto; margin: 0;
  background: var(--ink); color: var(--cyan); font-size: .82rem; font-weight: 700;   /* Mock: Cyan auf Dunkel */
  padding: .55em 1.35em; border-radius: 0 20px 0 12px;
}
.umsetzung__lead { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.services .umsetzung__icon { width: 56px; height: 56px; flex: none; display: block; }
.services .umsetzung__title { font-size: clamp(26px, 2.1vw, 34px); font-weight: 900; margin: 0; line-height: 1; }
.umsetzung__cat { margin: .3em 0 0; font-size: 1rem; font-weight: 600; color: rgba(255,255,255,.92); }
/* Vol.6 (Ben 11:50): Preiszeile darf zweizeilig umbrechen (statt den Strich zu verschieben) */
.umsetzung__price { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 .15em; font-size: clamp(20px, 1.6vw, 28px); font-weight: 900; line-height: 1.1; color: var(--ink); }
/* Trennstrich absolut bei 50 % der Bandbreite — unabhängig von Spalteninhalten (Vol.6) */
.services .umsetzung::before {
  content: ""; position: absolute; left: 50%; width: 1px;
  top: clamp(30px, 3.2vw, 44px); bottom: clamp(24px, 2.6vw, 34px);
  background: rgba(255,255,255,.6);
}
.services .umsetzung__text {
  border-left: 0; padding-left: 0; grid-column: 3 / 5; grid-row: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
}
.services .umsetzung__body { margin: 0; font-size: 1rem; color: var(--ink); }   /* Mock: schwarz */
.umsetzung__cta { align-self: flex-end; }
.services .umsetzung .btn--pillwhite { color: var(--cyan); }                      /* Mock: Cyan-Schrift */
@media (max-width: 900px) {
  .services .umsetzung { grid-template-columns: 1fr; row-gap: 18px; }
  .services .umsetzung::before { display: none; }
  .umsetzung__lead { grid-column: 1; grid-row: 1; }
  .umsetzung__price { grid-column: 1; grid-row: 2; }
  .services .umsetzung__text { grid-column: 1; grid-row: 3; }
  .umsetzung__cta { align-self: flex-start; }
}

/* ============================================================
   Walter-Video 02.09. — Onepager-Ergänzungen (v13)
   ============================================================ */

/* Header-Logo: Smile-Strich verformt sich on hover in der Y-Achse (größeres Lächeln) */
.brandlogo { display: block; overflow: visible; }
.brandlogo__smile {
  transform-box: fill-box; transform-origin: 50% 12%;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
/* Vol.5 (Ben): Hover nicht so dick — moderater strecken; „mehr Lächeln über tiefere
   mittlere Ankerpunkte" braucht eine zweite Pfad-Variante von Ben (vermerkt) */
.brandmark:hover .brandlogo__smile,
.brandmark:focus-visible .brandlogo__smile { transform: scaleY(1.3); }

/* FAQ: Cardboard-Hintergrund, Headline cyan; Reiter schwarz mit cyaner Typo + cyanem Plus,
   aufgeklappt weißer Antworttext auf Schwarz */
#faq {
  /* gleiche Textur wie der 3D-Karton (bereits im Cache) — konsistenter Look.
     Vol.6 (Ben 14:05): mit `cover` skalierte die Textur bei jeder Höhenänderung der Sektion
     (FAQ auf/zu) sichtbar mit. Jetzt Breite = Sektion, Kachelung nach unten: die Textur
     steht fest, egal wie viele Antworten offen sind. */
  background: var(--kraft) url("assets/ben/cardboard_texture_lowres.webp") center top / 100% auto repeat-y;
}
#faq .ix--oncyan { color: var(--ink); }
/* Vol.7 (Ben 08:11): „Typo, weiss auf Kartonhintergrund." Die FAQ-Ueberschrift stand als
   einzige cyan auf der Kartonflaeche. Kicker bleibt Ink (Kontrast), Reiter bleiben Cyan. */
#faq .section-h2--oncyan { color: #fff; }
#faq .faq details { background: var(--ink); color: #fff; }
#faq .faq summary { color: var(--cyan); }
#faq .faq summary::before, #faq .faq summary::after { background: var(--cyan); }
#faq .faq details p { color: #fff; }

/* Footer (Ben Vol.4): Adresszeile, vertikale Nav-Spalten „Sitemap" + „Social/Rechtliches" */
.site-footer__address { margin: -6px 0 0; color: rgba(255,255,255,.72); font-weight: 600; font-size: .92rem; }
.site-footer__col--right {
  display: grid; grid-template-columns: repeat(2, max-content);
  gap: 0 clamp(48px, 7vw, 110px); align-content: start;
}
/* Vol.5 (Ben): beide Spalten auf denselben Zeilenrhythmus — Kopf→Item = Item→Item,
   dann schließen Sitemap (Kopf + 4 Zeilen) und Social/Rechtliches (Kopf+1+Kopf+2) bündig ab */
.site-footer__navcol { display: grid; gap: 12px; align-content: start; }
/* Vol.6 (Ben 14:40): eine Leerzeile (Rasterzeile + Gap) zwischen „LinkedIn" und dem zweiten
   Kopf „Rechtliches" — sonst lesen sich beide Blöcke als einer. Folge (Ben selbst): „Datenschutz"
   schließt eine Rasterzeile unter „Über" ab. */
.site-footer__navcol .site-footer__head:not(:first-child) { margin-top: calc(1.2em + 12px); }
.site-footer__nav--v { flex-direction: column; gap: 12px; }
.site-footer__nav--v a { line-height: 1.2; display: inline-block; }

/* Workflow: Bens PDF-Icons (04.09.) statt Nummern-Kreise + Pfeil-Connectoren */
/* Vol.7 (Ben 07:05): „hier zum Icon mehr Platz" — Abstand Icon zu Titel von 20 auf 32 px
   (Icon ist 76 px hoch, padding-top traegt den Abstand). */
.wf__step { position: relative; padding-top: 108px; }
.wf__step .wf__icon { position: absolute; top: 0; left: 0; }
.wf__arrow {
  position: absolute; top: 16px; right: 8px; color: var(--cyan-deep); opacity: .85;
}
.wf__step:last-child .wf__arrow { display: none; }
@media (max-width: 900px) { .wf__arrow { display: none; } }

/* Garantie-Popover (Hover-Sidenote am Badge) + Details-Modal — Funktionalität steht,
   Texte/Layout (Ben/Walter) folgen; Inhalt bis dahin Platzhalter */
.svc__flag--garantie { cursor: pointer; }   /* Vol.5 (Ben): Händchen statt Fragezeichen */
.popover {
  position: absolute; z-index: 60; width: min(320px, 84vw);
  background: #fff; color: var(--ink); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(16,16,16,.25); border: 1px solid var(--line);
  padding: 14px 16px; font-size: .88rem; line-height: 1.5; font-weight: 600;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .18s ease-out, transform .18s ease-out;
}
.popover.is-on { opacity: 1; transform: none; pointer-events: auto; }
.popover__title { margin: 0 0 .35em; font-size: .95rem; font-weight: 900; color: var(--cyan-deep); }
.popover__note { display: block; margin-top: .6em; font-size: .74rem; font-weight: 700; color: rgba(38,38,36,.55); }
.popover p { margin: 0; }

/* Details-Modal nach Bens Roast_Details.pdf (03.09.): vollflächige Akzent-Karte mit
   Corner-Flag, Icon-Kreis + Titel links, Befund-Terminal rechts, weiße schließen-Pille.
   Farbvariante je Karte: --cyan (Roast) / --yellow (Leck-Bilanz) / --orange (Diagnose). */
.modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
.modal[hidden] { display: none; }
/* Vol.5 (Ben): Öffnen/Schließen animiert — Backdrop + Karte faden/skalieren (ui.js toggelt .is-open) */
.modal__backdrop { position: absolute; inset: 0; background: rgba(16,16,16,.45); backdrop-filter: blur(5px); }
.js:not(.no-motion) .modal .modal__backdrop { opacity: 0; transition: opacity .25s ease-out; }
.js:not(.no-motion) .modal .modal__card { opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .25s ease-out, transform .25s ease-out; }
.js:not(.no-motion) .modal.is-open .modal__backdrop { opacity: 1; }
.js:not(.no-motion) .modal.is-open .modal__card { opacity: 1; transform: none; }
.modal__card {
  --acc: var(--cyan); --acc-deep: var(--cyan-deep);
  position: relative; width: min(920px, 94vw); max-height: 88vh; overflow: auto;
  background: var(--acc); color: var(--ink); border-radius: 24px;
  box-shadow: 0 24px 70px rgba(16,16,16,.35); padding: clamp(24px, 3.4vw, 44px);
}
.modal__card:focus { outline: none; }   /* Script-Fokus (tabindex −1) ohne Ring — Ben sah einen */
.modal__card--yellow { --acc: var(--yellow); --acc-deep: var(--yellow); }   /* Vol.5 (Ben): nur DAS definierte Gelb, kein erfundenes Dunkelgelb */
.modal__card--orange { --acc: var(--orange); --acc-deep: var(--orange-deep); }
/* Ben Vol.4 (04): keine Corner-Flag mehr im Popup (auf allen drei Karten) */
.modal__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.modal__icon {
  width: 76px; height: 76px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
/* Vol.6 (Ben 10:40, 2. Anlauf): Glyphe PROPORTIONAL zum Kreis wie im Karten-Icon — die Glyph-SVGs
   tragen denselben 64er-viewBox wie Bens Kreis-Icons (Glyphe ≈ 75 % der Scheibe), also muss die
   Maske exakt Kreisgröße haben (100 %), nicht 48 px in 76 px */
.modal__icon i { display: block; width: 100%; height: 100%; background: var(--acc); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.modal__title { margin: 0; font-size: clamp(30px, 2.6vw, 42px); font-weight: 900; letter-spacing: var(--ls-h); color: #fff; line-height: 1.05; }
.modal__cat { margin: .15em 0 1em; font-size: var(--h6); font-weight: 800; color: #fff; }
.modal__intro { margin: 0 0 .7em; font-weight: 800; }
.modal__body p { margin: 0 0 .8em; font-weight: 600; }
.modal__note { display: block; margin-top: .4em; font-size: .76rem; font-weight: 700; color: rgba(38,38,36,.65); }
/* Vol.7 (Ben 05:32, von Walter am 09.09. aufgeloest): „das fehlt aber immer noch, hier diese Ecke,
   genau wie diese, und diese — das sieht gerade aus."
   Gemeint war die STUFE an der linken Kante: der Akzentbalken sass nur am Textblock, nicht an der
   Kopfzeile darueber. Die Kopfzeile begann dadurch 4 px weiter links als der Text, und weil der
   Balken dieselbe Farbe hat wie die Karte, las sich das als versetzte Ecke.
   Jetzt haengt der Balken an der AEUSSEREN Box und laeuft ueber die volle Hoehe durch. */
/* Zitat-Karte (Walter 22.09.: ersetzt die Terminal-Box aus Bens Roast_Details.pdf) —
   Bauform wie .roastquote auf der Roast-LP: dunkle Karte, Cyan-Setup, fette Punch-Zeile */
.modal__quote {
  align-self: start; margin: 0;
  background: var(--ink); color: #fff; border-radius: 20px;
  padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 32px);
  box-shadow: 0 24px 60px rgba(16, 16, 16, .28);
  transform: rotate(-1.5deg);
}
.modal__quote-setup { margin: 0 0 .45em; color: var(--acc); font-weight: 800; font-size: .95rem; }
.modal__quote-punch { margin: 0; font-size: clamp(19px, 1.5vw, 26px); font-weight: 900; line-height: 1.3; letter-spacing: var(--ls-h); }
.modal__quote-punch--long { font-size: clamp(15px, 1.05vw, 18px); font-weight: 700; line-height: 1.6; letter-spacing: 0; }
/* Vol.7 (Ben 15:08): Kreuz oben rechts in der Karte. Position folgt dem Karten-Padding,
   damit es auf allen Breiten gleich weit von der Ecke sitzt. */
.modal__x {
  position: absolute; top: clamp(14px, 1.6vw, 20px); right: clamp(14px, 1.6vw, 20px); z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--acc-deep);
  cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out;
}
.modal__x:hover { background: var(--ink); color: #fff; }
.modal__x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.modal__close {
  display: block; width: 100%; margin-top: clamp(18px, 2.6vw, 30px);
  border: 0; border-radius: var(--r-pill); background: #fff; color: var(--acc-deep);
  font: 800 var(--p1)/1.1 var(--font); padding: 14px 40px; cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.modal__close:hover { background: var(--ink); color: #fff; }
.modal__close:focus { outline: none; }                     /* Script-Fokus beim Öffnen ohne Ring */
.modal__close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 760px) {
  .modal__grid { grid-template-columns: 1fr; }
  .modal__card { padding: 22px 18px; }
}

/* Workflow-Stagger: Steps kommen nacheinander, sobald das Grid in-view ist (nur Motion-Modus) */
.js:not(.no-motion) .wf__grid .wf__step { opacity: 0; transform: translateY(14px); transition: opacity .5s ease-out, transform .5s ease-out; }
.js:not(.no-motion) .wf__grid.is-inview .wf__step { opacity: 1; transform: none; }
.js:not(.no-motion) .wf__grid.is-inview .wf__step:nth-child(2) { transition-delay: .12s; }
.js:not(.no-motion) .wf__grid.is-inview .wf__step:nth-child(3) { transition-delay: .24s; }
.js:not(.no-motion) .wf__grid.is-inview .wf__step:nth-child(4) { transition-delay: .36s; }

/* ============================================================
   Copy-Runde 03.09. — Befund-Stapel (07 „Beweis") + Workflow-CTA
   ============================================================ */
/* Fetter Papierstapel: Top-Seite (Muster V2) auf mehreren versetzten Blättern
   plus sichtbarer Blockkante — das Dokument als Objekt, nicht als Behauptung. */
.befundstapel { margin: clamp(28px, 4vw, 48px) 0 0; display: grid; gap: 18px; justify-items: start; }
.befundstapel__stack { position: relative; width: min(320px, 72vw); }
.befundstapel__stack img {
  position: relative; z-index: 5; display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 16px 34px rgba(16, 16, 16, .22);
  transform: rotate(-1.6deg);
}
.befundstapel__sheet {
  position: absolute; inset: 0; background: #fff;
  border: 1px solid rgba(16, 16, 16, .18); border-radius: 6px;
}
.befundstapel__sheet--2 { transform: rotate(1.4deg) translate(7px, 5px); z-index: 4; }
.befundstapel__sheet--3 { transform: rotate(-2.8deg) translate(-5px, 10px); z-index: 3; background: #fbfbfb; }
.befundstapel__sheet--4 { transform: rotate(2.9deg) translate(12px, 14px); z-index: 2; background: #f7f7f7; }
.befundstapel__sheet--5 { transform: rotate(-1.1deg) translate(3px, 19px); z-index: 1; background: #f2f2f2; }
/* Blockkante unterm Stapel: viele Blattkanten = „das Ding ist DICK" */
.befundstapel__edge {
  position: absolute; left: 4%; right: 2%; bottom: -20px; height: 24px; z-index: 0;
  border-radius: 0 0 6px 6px; border: 1px solid rgba(16, 16, 16, .2); border-top: 0;
  background:
    linear-gradient(180deg, rgba(16,16,16,.06), rgba(16,16,16,.16)),
    repeating-linear-gradient(180deg, #ffffff 0 2px, #dcdcdc 2px 3px);
  box-shadow: 0 14px 24px rgba(16, 16, 16, .18);
  transform: rotate(-.6deg);
}
.befundstapel__caption { margin-top: 16px; font-weight: 700; max-width: 56ch; }
/* Befund-Karton (Walter 22.09.2026): freigestelltes Render statt der CSS-Blaetter.
   Doppelte Klasse + #outcome, damit die Tablet-Breite aus responsive.css (min(420px, 62vw))
   und die Hover-Schatten der alten Papierkante hier nicht greifen. */
/* Walter 22.09. abends: halb so groß, Klick-Zoom vorerst aus (daher kein zoom-in-Cursor) */
#outcome .befundstapel__stack.befundstapel__stack--karton { width: min(280px, 64vw); cursor: default; }
#outcome .befundstapel__stack--karton img,
#outcome .befundstapel__stack--karton:hover img {
  border: 0; border-radius: 0; box-shadow: none; transform: none;
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .55));
}
.wf__cta { margin-top: clamp(24px, 3vw, 40px); }

/* ============================================================
   Vol.5 (Ben 04.09.) — Befund-Stapel zoombar: Klick öffnet den Muster-
   Befund groß (Desktop lesbar), Lupe-Cursor als Affordance, BEISPIEL-
   Chip wächst mit (Muster-Zahlen dürfen nie als echter Fall lesbar sein).
   ============================================================ */
.befundstapel__stack { cursor: zoom-in; }
.befundstapel__stack:hover img { box-shadow: 0 20px 44px rgba(16, 16, 16, .3); }
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 3vh 3vw;
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(16,16,16,.62); backdrop-filter: blur(5px); }
.lightbox__inner { position: relative; max-width: min(860px, 92vw); max-height: 92vh; cursor: zoom-out; }
.lightbox__inner img {
  display: block; max-width: 100%; max-height: calc(92vh - 40px);
  width: auto; height: auto; border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45); background: #fff;
}
.lightbox__tag {
  position: absolute; top: 14px; right: 14px;
  background: var(--ink); color: #fff; font-weight: 800; font-size: .8rem;
  letter-spacing: .06em; padding: .35em 1em; border-radius: 6px;
}
.lightbox__close {
  position: absolute; top: -14px; left: -14px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #fff; color: var(--ink); font-size: 1.2rem; font-weight: 900;
  cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.js:not(.no-motion) .lightbox .lightbox__backdrop { opacity: 0; transition: opacity .25s ease-out; }
.js:not(.no-motion) .lightbox .lightbox__inner { opacity: 0; transform: scale(.96); transition: opacity .25s ease-out, transform .25s ease-out; }
.js:not(.no-motion) .lightbox.is-open .lightbox__backdrop { opacity: 1; }
.js:not(.no-motion) .lightbox.is-open .lightbox__inner { opacity: 1; transform: none; }