/* ==========================================================================
   Marco Groß Onepager — v3.92
   2026-05-29: v3.92 — Footer-Bottom mobil auf eine Linie. Statt gestapelter Column (v3.91) jetzt Row mit `justify-content: space-between; align-items: baseline; flex-wrap: nowrap` → „© 2026 Marco Groß" links und „designed by Lumina Reach" rechts auf gleicher Höhe (wie Desktop). Auf User-Wunsch.
   2026-05-29: v3.91 — Footer-Bottom mobil: „designed by Lumina Reach" nach rechts. Im ≤760px-Block (`.ws-footer__bottom` ist column/flex-start) bekommt `.ws-footer__credit` ein `align-self: flex-end` → Copy „© 2026 Marco Groß" bleibt links, Credit-Zeile rechtsbündig darunter. Nur Mobile, Desktop (space-between row) unverändert. Auf User-Wunsch.
   2026-05-29: v3.90 — Drei Layout-Anpassungen. (a) Cases-Rail: Desktop (`min-width: 761px`) auf 2-Spalten-Grid (`overflow-x: visible`, `scroll-snap-type: none`, container-zentriert) → kein horizontales Scrollen mehr; Mobile (≤760px) behält Scroll-Snap-Rail. (b) Cases-Scroll-Hinweis `.ws-cases__hint` auf Desktop `display: none` (nur mobil sichtbar). (c) Erfahrungs-Werte-Donuts mobil von 1-spaltig auf 3-spaltig nebeneinander (`repeat(3,1fr)`, ring-wrap `width: 100%`, Num/Label verkleinert für die kleineren Kreise).
   2026-05-29: v3.89 — Footer-Credit „Lumina Reach": Unterstrich wieder raus (`text-decoration: none`), stattdessen wird der Name beim Hover/Focus orange (`var(--ws-secondary)`). Auf User-Wunsch.
   2026-05-29: v3.88 — Footer-Credit „Lumina Reach" dauerhaft unterstrichen. `.ws-footer__credit a` von `text-decoration: none` + Hover-Border-Bottom auf permanentes `text-decoration: underline` (offset 2px, thickness 1px) umgestellt; Hover ändert nur noch die Farbe. Auf User-Wunsch.
   2026-05-29: v3.87 — Header-Nav echt mittig (TEST). `.ws-nav__inner` auf Desktop (`min-width: 761px`) von Flex `space-between` auf 3-Spalten-Grid `1fr auto 1fr` umgestellt → Menü sitzt exakt in der Bildschirmmitte, unabhängig von Logo-/CTA-Breite (vorher links-of-center weil CTA-Gruppe breiter als Logo). Brand `justify-self: start`, Menü `center`, CTAs `end`. Mobile (≤760px, nur Logo + Hamburger) bleibt auf Flex.
   2026-05-29: v3.86 — Bewertungs-Laufband Seiten-Fade kleiner: horizontale Maske 6%/94% → 3%/97% (verschwommener Rand schmaler). Auf User-Wunsch.
   2026-05-29: v3.85 — Bewertungs-Laufband: (a) langsamer, Marquee-Dauer 50s → 70s. (b) Karten wieder gleiche Höhe (oben + unten bündig) via `align-items: stretch`, ABER `.ws-greview__text` auf `-webkit-line-clamp: 8` begrenzt → höchste Karte bleibt moderat, keine Riesen-Höhe wie in v3.84-Vorzustand. Sehr lange Reviews (Anton/Philipp) werden mit „…" abgeschnitten; voller Text via Google-Link.
   2026-05-29: v3.84 — Bewertungs-Karten Riesenhöhe gefixt. `.ws-greviews__track` `align-items: flex-start` ergänzt — Flex-Default `stretch` hatte alle Karten auf die Höhe der längsten (Anton/Philipp) gezogen. Jetzt ist jede Karte nur so hoch wie ihr Inhalt, oben ausgerichtet.
   2026-05-29: v3.83 — `.ws-voices__google`-Hover-Lift entfernt (User: „soll auf einer stelle bleiben"). Kein `transform: translateY` mehr, keine transform-transition — nur noch dezentes Aufhellen des Count-Texts bei Hover/Focus. (Zusätzlich gleiche Welle: 3 Video-Poster auf Firmenlogos getauscht, reine Asset-Änderung, kein CSS.)
   2026-05-29: v3.82 — `.ws-voices__google` ist jetzt ein Link (`<a>`). Ergänzt: text-decoration none, cursor pointer, Hover/Focus -3px Lift + Count-Text hellt auf. HTML v2.72.
   2026-05-29: v3.81 — v3.80 rückgängig (User: vertikaler Kanten-Fade gefällt nicht, in keiner Stärke). `.ws-greviews` endgültig nur horizontaler Edge-Fade (6%/94%), kein vertikaler Fade mehr. = v3.79-Stand. Thema vertikaler Karten-Kanten-Fade abgeschlossen, nicht weiter probieren.
   2026-05-29: v3.80 — Vertikaler Kanten-Fade neu, diesmal sehr dezent. Nach v3.78-Revert klargestellt: User will die Ober-/Unterkante der Karten weicher (nicht den Seiten-Fade). v3.78 war zu stark (7% ≈ ~35px → Header angeschnitten). Jetzt px-basiert: nur äußere 14px oben/unten weichgezeichnet (liegen im Karten-Padding, cremefarben → Kante weich, Name/Text scharf). Horizontaler Fade (6%/94%) unverändert, beide via mask-composite: intersect. Kein padding-block, margin-bottom unverändert.
   2026-05-29: v3.79 — v3.78 rückgängig (sah laut User „blöd aus"). `.ws-greviews`-Maske zurück auf rein-horizontalen Edge-Fade (6%/94%), padding-block + vertikale Maske + mask-composite entfernt, margin-bottom zurück auf clamp(20px,2.4vw,32px). Stand = wie v3.77.
   2026-05-28: v3.78 — Marquee-Edge-Fade auf alle 4 Kanten. `.ws-greviews`-Maske von rein-horizontal auf horizontal + vertikal (zwei linear-gradients, `mask-composite: intersect` / `-webkit-mask-composite: source-in`) → weiche Ecken oben/unten statt harter Kante. `padding-block: 18px` gibt dem vertikalen Fade Raum, damit er nur den Rand weichzeichnet statt den Karten-Text; margin-bottom entsprechend reduziert. Auf User-Wunsch „den verlauf in den ecken oben und unten besser machen".
   2026-05-28: v3.77 — Google-Bewertungen Endlos-Laufband. `.ws-greviews` von 3-Spalten-Grid auf Marquee-Viewport (overflow:hidden + Edge-Fade-Mask) umgestellt. Neuer `.ws-greviews__track` (flex, width:max-content, animation `ws-greviews-marquee` 50s linear infinite). `.ws-greview` bekommt feste Breite (`flex: 0 0 clamp(280px,30vw,360px)`) + `margin-right` statt grid-gap (damit translateX -50% exakt ein geklontes Set ist → nahtlos). Pause bei `:hover`/`:focus-within`. `prefers-reduced-motion` → overflow-x:auto, Animation aus, Mask aus. Mobile-Block: alter scroll-snap-Override durch Marquee-kompatible Karten-Breite (78vw / max 340px / margin-right 14px) ersetzt. HTML v2.68.
   2026-05-28: v3.76 — Pillar-Lead-Absatz-Abstand. Neue Regel `.ws-pillar__lead + .ws-pillar__lead { margin-top: -14px; }` — bei zwei aufeinanderfolgenden Lead-Absätzen (Pillar 03 seit HTML v2.66) reduziert sich der effektive Abstand von 28px (margin-bottom) auf ~14px. Wirkt als echter Absatz, nicht als Section-Lücke. Auf User-Wunsch „den abstand nicht so groß".
   2026-05-21: v3.75 — Erfahrungs-Werte Plus-Centering halbiert. `.ws-exp-val__num` padding-left `0.55em` → `0.28em` (halbe Plus-Breite statt voller). Optischer Ausgleich zwischen v3.71-b (Zahl strikt mittig, Plus außen rechts) und v3.72 (Plus inline, Gruppe mittig, Zahl links). Der halbe Wert wirkt für das Auge symmetrisch — Zahl rückt nur leicht links der Ring-Mitte, Plus ragt nur leicht rechts darüber. User-Anforderung „einfach gute Optik".
   2026-05-21: v3.74 — Strat-Wheel Op-Pfeil: neue Regel `.ws-strat-wheel__op-arrow { opacity: 0.55; }`. Root-Cause der „Pfeil zu dunkel"-Optik trotz gleicher Farbe `#1F2A30`: der `.ws-strat-wheel__outer-ring` hatte schon eine bestehende CSS-Regel `opacity: 0.55` (war mir bei den letzten 3 Color-Iterationen v2.53/v2.54 entgangen — Inline-Stroke-Color geprüft, Opacity-Regel im CSS-File übersehen). Der Pfeil hatte keine entsprechende Opacity → rendere in voller `#1F2A30`-Stärke, wirkte schwarz-deutlich gegen den 55-%-Outer-Ring. Mit gleicher Opacity 0.55 sind Pfeil + Outer-Ring jetzt in identischer Hellgrad-Familie als grauer Loop um das dunkle Center.
   2026-05-21: v3.73 — Erfahrungs-Werte: optische Zahl-Mittigkeit per padding-Trick. `.ws-exp-val__num` bekommt `padding-left: 0.55em` (= Breite des hochgestellten `+`-Sup-Elements). Wirkung: die text-align:center-Achse innerhalb des `<p>` verschiebt sich um halbe sup-Breite nach rechts → die ZAHL selbst sitzt jetzt strikt mittig im Ring, das hochgestellte `+` ragt symmetrisch über den rechten Zahl-Rand hinaus. User-Wunsch „es soll einfach nur mittig aussehen". Hybrid zwischen v3.71 (Zahl strikt mittig, Plus absolut außerhalb) und v3.72 (Plus inline, Gruppe mittig).
   2026-05-21: v3.72 — Erfahrungs-Werte: Plus-Zeichen zurück in den Inline-Flow. User-Korrektur: „mache das plus mittig bei allen zahlen" — das absolut-positionierte `+` (v3.71-b mit `left: 100%; top: 0.1em`) hing rechts AUSSERHALB der Zahl, sollte aber als visueller Bestandteil der Center-Gruppe wirken. Revert: `.ws-exp-val__num` zurück auf Block-Default (kein `position: relative` / `display: inline-block`). `.ws-exp-val__num sup` zurück auf `position: static` + `vertical-align: super` + `margin-left: 2px`. Das `+` rendert jetzt wieder als hochgestelltes Inline-Element direkt neben der Zahl, beide gemeinsam vom Flex-Center des Inner-Container zentriert. Hover-Orange-Ring + Label-fett-600 aus v3.71 bleiben erhalten.
   2026-05-21: v3.71 — Erfahrungs-Werte (`.ws-experience-values`) Polish-Trio. (a) `.ws-exp-val__label`: font-weight 400 → 600 (User-Wunsch: Text etwas fetter — Trainingstage / Coachingstunden / Berater-Tage stehen jetzt kraftvoller als Brand-Beleg). (b) `.ws-exp-val__num`: `position: relative; display: inline-block` ergänzt (statt block-default). `.ws-exp-val__num sup`: von `vertical-align: super` + Inline auf `position: absolute; left: 100%; top: 0.1em; margin-left: 4px; vertical-align: baseline` umgestellt — das Plus-Zeichen sitzt jetzt aus der Layout-Box der Zahl heraus, dadurch ist die ZAHL selbst optisch mittig im Ring (vorher schob das +-Zeichen die Gruppe leicht nach links). (c) Neue Hover-Regel `.ws-exp-val:hover .ws-exp-val__ring circle, .ws-exp-val:focus-within .ws-exp-val__ring circle { stroke: var(--ws-secondary); }` + `transition: stroke 260ms ease-out` auf der Basis-Regel — Ring wechselt beim Hover/Tab-Fokus von Brand-Petrol zu Brand-Orange (gleiches Orange wie die orange CTAs).
   2026-05-21: v3.70 — Neue Sibling-Regel `.ws-act__sub--outro + .ws-act__sub { margin-top: 12px; }`. Greift im Hero Akt 3 Outro-Block, wo seit HTML v2.51 zwei `ws-act__sub`-Sätze direkt aufeinander folgen: erst „35+ Jahre Berufserfahrung …" (mit `--outro` Modifier, margin-top 28 px nach `<ul>`), dann „Ich war selbst Geschäftsführer …" (nur `ws-act__sub`, bekommt jetzt 12 px Top-Abstand zum Vorgänger statt 0).
   2026-05-21: v3.69 — Erfahrungs-Werte (`.ws-experience-values`): padding-top `clamp(24px, 3vw, 56px)` → `0`. Section rückt eng an die About-/Coops-Section heran, ohne sichtbare Leerzone dazwischen. Padding-bottom bleibt großzügig (`clamp(56px, 7vw, 96px)`).
   2026-05-21: v3.68 — Neue Modifier-Regel `.ws-act__sub--outro { margin-top: 28px; }`. Hero Akt 3 Outro-Satz „Ich war selbst Geschäftsführer …" trägt jetzt die `ws-act__sub`-Basisregel (Body-Read-Size clamp 17–20px, line-height 1.6, text-muted, max-width 56ch) + diesen Outro-Modifier für sauberen Top-Abstand nach dem `<ul class="ws-act__list">`. Ersetzt die alte Klassen-Kombi `ws-act__eyebrow ws-act__eyebrow--lead ws-act__eyebrow--outro` (Uppercase / Letter-Spacing / Lead-Strich) — passt jetzt visuell zum Sub-Satz „Konkrete Ergebnisse …" über der Liste.
   2026-05-21: v3.67 — Fördermittel-Logos kompakter + sicher in einer Reihe. `.ws-footer__seals`: flex-wrap nowrap (vorher wrap), gap 14px → 10px. `.ws-footer__seals img`: height 52px → 40px + object-fit:contain. Neue `.ws-footer__seals li`-Regel mit `min-width:0; flex:0 1 auto;` damit Logos bei schmaler Footer-Col notfalls shrinken statt umbrechen.
   2026-05-15: v3.66 — Neue Regel `.ws-about__pdf-row { margin: 22px 0 0; text-align: center; }`. Info-PDF-Button wandert von der ws-about__text-Spalte unter das Portrait (in figure, nach figcaption). Klasse im HTML auf ws-btn--primary umgehängt — orange Default, dunkleres Orange im Hover.
   2026-05-15: v3.65 — Neue Regel `.ws-footer__seals` (list-style:none, flex row mit gap 14px) + `.ws-footer__seals img` (height 52px, width auto). Hosting für 3 Fördermittel-Logos (BAFA / INQA / Hamburger Digital Check) im Footer, ersetzt den vorherigen Note-Text. Logos kommen aus dem entfernten About-`ws-about__seals`-Block.
   2026-05-15: v3.64 — `.ws-btn--camp:hover` background/border `var(--ws-text)` → `#DE7C24` (dunkleres Orange). Camp-Button bleibt jetzt im Hover orange (analog `.ws-btn--primary:hover` v3.40) statt nach Dunkelblau zu kippen. Konsistente Orange-Hover-Familie über alle Brand-CTAs der Seite — User-Korrektur „beim raufgehen orange". Revertiert effektiv v3.26-Angleichung (die war Stand v3.26 korrekt, weil primary damals auch dark-hover hatte; nach v3.40 ist primary auf #DE7C24 umgestellt — Camp zieht jetzt nach).
   2026-05-15: v3.63 — Erfahrungs-Werte (`.ws-experience-values`): padding-top reduziert (`clamp(64px, 8vw, 112px)` → `clamp(24px, 3vw, 56px)` oben, padding-bottom bleibt großzügig). Section-Head margin-bottom kleiner (`clamp(40px, 5vw, 64px)` → `clamp(24px, 3vw, 40px)`). Neue Regel `.ws-exp-val__ring circle { stroke: var(--ws-primary-dark); stroke-width: 5; }` — single source of truth für Ring-Stroke (vorher pro Ring mit Inline-Stroke #7FAEBD / #1F2A30 / #3F7A8C gemischt, jetzt einheitlich Brand-Petrol). `.ws-exp-val__num` font-weight 400 → 700 + leicht größer (clamp 1.9–2.6rem) — Zahlen wirken jetzt als kraftvoller Brand-Anker.
   2026-05-15: v3.62 — Neue Modifier-Klasse `.ws-act__eyebrow--outro` (Akt 3): margin-top 28px (Default-Eyebrow-Margins greifen sonst falsch nach Liste). Wird gemeinsam mit `.ws-act__eyebrow--lead` an den Hamsterrad-Satz UNTER der Liste gehängt (Reihenfolge revertiert zu Pre-v2.38: kurzer „In 90 Tagen"-Eyebrow oben, langer Lead-Satz unten).
   2026-05-15: v3.61 — Neue generische Modifier-Klasse `.ws-btn--dark-hover` (Hover-Override: BG/Border → var(--ws-text), color #fff). Einsatz auf Pillar-1-Sekundär-CTA „Ausführliche Informationen" zusammen mit ws-btn--primary — Default orange, Hover dunkles Blaugrau statt dunkleres Orange. Globaler ws-btn--primary:hover (v3.40, dunkleres Orange #DE7C24) bleibt unverändert.
   2026-05-15: v3.60 — Hero Akt 3 Lead-Eyebrow. Neue Modifier-Klasse `.ws-act__eyebrow--lead` (kein Uppercase, normales Letter-Spacing, font-size 14px, max-width 48ch, line-height 1.55) für längere Lead-Sätze über der H1 (Hamsterrad-Satz wandert von unten nach oben analog Akt 2 „Erkennst du das?").
   2026-05-14: v3.59 — Korrekturen II Block J (Pkt 4): Logo-Marquee schneller. Desktop animation-duration 56s → 42s (~25%). Mobile-Override 72s → 54s.
   2026-05-14: v3.58 — Korrekturen II Block G (Pkt 12c): Neue Section .ws-experience-values mit 3 Donut-Countern (Trainingstage 420+ / Coachingstunden 1.300+ / Berater-Tage 200+). SVG-Ring + absolute-positioned Inner mit Label + Num + Brand-Plus-Akzent. Mobile stapelt 3-spaltig → 1-spaltig. Neue Section-Head-Variante .ws-section-head--center.
   2026-05-14: v3.57 — Korrekturen II Block C (Pkt 9): LEGO „Ideal für"-Block in Listenform. Neue Klassen .ws-lego__ideal-head + .ws-lego__ideal-list (list-style:none + Custom-„–"-Marker via ::before).
   2026-05-11: v3.56 — OE-Donut + Strat-Wheel: Dual-Regeln (.ws-is-hover + .ws-is-clicked) → einzelne .ws-is-active-Regel. Behebt CSS-Transition-Konflikt (Orange-Ring verschwand bei Maus-Leave). Mobile-Override ebenfalls auf .ws-is-active umgestellt.
   2026-05-10: v3.55 — .ws-stage__bg-stage img blur(1.5px) entfernt — Hintergrundbild schärfer.
   2026-05-10: v3.54 — ws-oe-donut__wedge.ws-is-clicked transform:scale(1.02) entfernt — Scale öffnete Lücken zu Nachbar-Fills, Stroke wurde sichtbar.
   2026-05-10: v3.53 — ws-oe-donut__wedge hover+clicked: stroke-linejoin:bevel — kein Ausriß gerundeter Ecken bei schmalen Wedges.
   2026-05-10: v3.52 — ws-oe-donut__wedge hover+clicked: stroke-width:6 + paint-order:stroke fill — Stroke nur außen sichtbar, keine inneren Trennlinien orange.
   2026-05-10: v3.51 — ws-oe-donut__wedge.ws-is-hover stroke: var(--ws-secondary) — Hover-Wedge orange.
   2026-05-10: v3.50 — ws-oe-donut__wedge.ws-is-clicked stroke: var(--ws-secondary) — aktiver Wedge orange statt dunkel.
   2026-05-10: v3.49 — ws-logos__img[src*=ehg] height:38px + margin:0 12px; tecis margin:0 14px — EHG größer + engerer Abstand.
   2026-05-10: v3.48 — ws-logos__img[src*=ehg] height:32px — EHG-Emblem etwas kleiner als andere Logos.
   2026-05-10: v3.47 — ws-logos__img[src*=tecis/ehg] margin:0 18px — reduzierter Abstand für kleine Emblem-Logos.
   2026-05-10: v3.46 — ws-logos__img height:44px + width:auto + max-width:140px — visuelle Linienhöhe einheitlich, natürliche Proportionen pro Logo.
   2026-05-10: v3.45 — ws-logos__img width:120px (fest) statt width:auto+max-width:160px — einheitliche Logo-Größe + gleiche Abstände im Marquee.
   2026-05-10: v3.44 — ws-logos__track background:var(--ws-bg) — GPU-Layer bekommt Cream-Hintergrund damit mix-blend-mode:multiply korrekt arbeitet.
   2026-05-10: v3.43 — ws-logos__img mix-blend-mode:multiply (weißer Bildhintergrund auf Cream-BG unsichtbar).
   2026-05-10: v3.42 — ws-quote flex-column + ws-quote__author margin-top:auto (Namen auf gleicher Höhe).
   2026-05-10: v3.41 — ws-stage__progress entfernt (3 orange Akt-Fortschritts-Striche rechts im Hero).
   2026-05-08: v3.40 — ws-btn--primary:hover — dunkles Blau → dunkleres Orange #DE7C24 (brightness 88%).
   2026-05-08: v3.39 — Nav Termin Desktop+Mobile: zurück auf var(--ws-secondary) #FC8D29 (revert v3.37+v3.38).
   2026-05-08: v3.38 — Desktop Nav-Pill Termin: #E8791E + box-shadow (revertiert in v3.39).
   2026-05-08: v3.37 — Mobile Nav-Button Termin: #E8791E + box-shadow (revertiert in v3.39).
   2026-05-08: v3.36 — ws-kontext__points li font-style italic → normal.
   2026-05-08: v3.35 — Footer-Logo 36px → 52px.
   2026-05-08: v3.34 — Google-Bewertungs-Links: a.ws-trust__item (Trust-Strip) + a.ws-act__trust (Hero-Badge) — Link-Reset (text-decoration:none, color:inherit) + Hover-Feedback (opacity / border-color).
   2026-05-08: v3.33 — Technische Optimierungen: .is-active/.is-visible/.is-scrolled/.is-hover/.is-clicked/.is-open → .ws-is-* (6 replace_all, ws-Prefix-Compliance).
   2026-05-04: v3.32-mobile-16 — Live-Google-Bewertungen-Block in Voices-Section. Neue Klassen `.ws-greviews-block` (Container), `.ws-greviews` (3-Spalten-Grid Desktop, scroll-snap mobil), `.ws-greview` (Card mit Initial-Avatar + Stars + Time + Text), `.ws-greview__avatar` (40 px Kreis ws-primary BG, weiße Initialen 13 px Bold), `.ws-greview__stars` (ws-secondary Orange ★), `.ws-greviews__source` (Google-G-Icon + Live-Hinweis + Link zum Profil). Mobile: 1-Spalten-Stack mit scroll-snap-x für 320–760 px. Cards Cream-BG analog Voices-Quotes, Border-Top 2 px ws-primary als Differenziator zur Hand-Quote.
   2026-05-04: v3.32-mobile-15 — Voices + Cases: echte Inhalte aus Korrektur v2 vom 2026-05-04. (1) Stimmen 1+2+3 ersetzt: Marcel F. (Geschäftsführer 50+ MA, Berlin), Ole J. (Geschäftsführer Logistik, Bremen), T.M. (Geschäftsführer Malereibetrieb, Hamburg) mit jeweils echten Zitaten aus der Korrektur-PDF. Bisheriger Marco-Leitsatz + „Stimme aus der Begleitung" + Ralf raus. (2) Cases: 3 echte Fallbeispiele statt 2 Platzhalter — Geschäftsmodell-Neuausrichtung (12 Mt., 30 % Umsatz), B2B-Wachstumsstrategie digitales Unternehmen (5 Mt., 5 Produkt-Launch), Malereibetrieb-Gründung (6 Mt., 800k € Umsatz, 4 MA). Section-Sub „Echte Fallbeispiele folgen…" entfernt. Neue `.ws-case__list` mit ws-secondary-Strich-Bullets ergänzt (Vorgehen + Ergebnis als Bullet-Liste). Mobile: Demnächst-Badge + dashed-Border raus, Border bleibt solid (Inhalte sind echt), Bullet-Liste mobil 14 px enger.
   2026-05-04: v3.32-mobile-14 — OE-Donut Center-Items lesbar im Donut-Hole gehalten (User: „leider ragt die Schrift manchmal über den Bereich in der Mitte"). Bug: Items font 10px + Center-Container 180px (50% von 360px Stage) — lange Items wie „Workshops, Schulungen, Coaching" (33 Zeichen ≈ 200px) ragten seitlich raus. Fix: Items font 10→9px + line-height 1.3→1.25 + padding 0 → 0 8% am Center-Active-Container (mehr Innenrand) + overflow-wrap:break-word für sehr lange Wörter. Center-Name clamp(11,3vw,13) statt (12,3.4vw,14) — proportional verkleinert. Center-Default analog clamp(12,3.2vw,14) statt (13,3.5vw,16). Center-Num 9px statt 10.
   2026-05-04: v3.32-mobile-13 — Hero Komplett-Redesign „Stacked Pro" (User-GO nach Web-Recherche zu Mobile-Hero-Best-Practices). Sticker-Konzept aufgegeben weil Cutout (freigestellte PNG mit Brusthoch-Crop, Hemd-Farbe ähnlich Cream) optisch mit Headline konkurriert + Office-BG eine zweite atmosphärische Schicht ist (Anti-Default §2 max 1 Element). Neuer Aufbau: Text OBEN above-fold (Eyebrow + H1 + Sub + 2 CTAs + neue Mikro-Trust-Badge ★ 5,0 · 100+ Bewertungen), Foto-Card DARUNTER als sauberer 4:5 Block (echtes Foto marco-portrait.jpg statt Cutout-PNG), border-radius 16, dezenter Schatten, Caption „Marco Groß · Hamburg". Pattern aus Recherche: thrivethemes/perfectafternoon/coachingsitesthatwork — Stack ist Standard-B2B-Coach-Hero, Cutout-Sticker ist Spezial-Editorial-Pattern das nur mit perfekter Foto-Komposition funktioniert.
     • HTML: figure.ws-act__photo (echtes Foto + figcaption) und p.ws-act__trust (Mikro-Badge mit ★) ergänzt in Akt 1 nach CTAs. Default display:none (Desktop unangetastet).
     • CSS Mobile: figure.ws-act__portrait display:none (Cutout aus), .ws-stage__bg-track display:none (KI-BG aus). .ws-act--1 padding-bottom auf 32px (kein Cutout-Platz mehr nötig). .ws-act__trust display:flex mit ★ + Text. .ws-act__photo display:block max-width 320px aspect-ratio 4/5 border-radius 16 box-shadow + img object-fit cover. .ws-stage background bleibt zarter Cream-Wash (1 atmosphärisches Element okay).
   2026-05-04: v3.32-mobile-12 — (1) Cutout endlich sichtbar: Default-display:none-Block für `.ws-act__avatar / .ws-act__portrait / .ws-strat-wheel__list-mobile` aus Datei-Ende (Z. ~4042) entfernt und stattdessen VOR dem Mobile-Hauptblock (Z. ~3336) gesetzt. CSS-Cascade-Reihenfolge war die Ursache: Default kam im Code NACH dem Mobile-Override → spätere Regel gewinnt = display:none. Hamburger funktionierte zufällig weil sein Mobile-Block am Datei-Ende selbst NACH der Default-Liste stand. (2) KI-Office-BG mobil reaktiviert (User: „bau doch den Hintergrund von der Desktop-Version ein"): `.ws-stage__bg-track` display:block + position:absolute + top 0 + width 100% + height 100svh + z-index 0 (nur erster Viewport, Akte 2+3 darunter im Block-Flow ohne BG). Image dezent: opacity 0.32, blur 3px, saturate 0.85. Mask-Fade nach unten zu transparent damit Übergang zu Cream weich.
   2026-05-04: v3.32-mobile-11 — Cascade-Bug-Fix: alte `.ws-act--2, .ws-act--3 { display: none }` aus dem v3.32-mobile-7-Block (Z. 3918) gewann gegen mein `display: flex` aus v3.32-mobile-10 (Z. 3766) — beide im selben @media-Query, gleiche Spezifität, also gewann die spätere Regel = display:none. User sah weiterhin nur Akt 1. Fix: alten display:none-Block entfernt, nur Kommentar-Pointer auf neue Regel hinterlassen. Akte 2+3 sind jetzt mobil wirklich sichtbar.
   2026-05-04: v3.32-mobile-10 — Sticker-Hero Korrektur: Akte 2 + 3 wieder mobil sichtbar (User: „du musst die fehlenden Inhalte wieder reinpacken, da fehlt ja 2/3"). Bug v3.32-mobile-9: bei reaktiviertem .ws-stage__portrait als position:absolute innerhalb .ws-stage__inner würde der Cutout bei aktivierten Akt 2+3 am NEUEN Stage-Bottom kleben (also unter Akt 3), nicht am Akt-1-Bottom. Lösung: neues mobile-only HTML-Element .ws-act__portrait innerhalb Akt 1 (figure mit cutout-img). Cutout wird Children von Akt 1 → position:absolute klebt am Akt-1-Bottom = im ersten Viewport. Original .ws-stage__portrait mobil display:none. Akt 2 + Akt 3 wieder mobil display:flex (default). Stage-Inner min-height 100svh entfernt (Akte 2+3 brauchen mehr Höhe). HTML-Eingriff: figure.ws-act__portrait in Akt 1 ergänzt mit cutout-img (800x1000 wie Original), Default display:none.
   2026-05-04: v3.32-mobile-9 — Hero-Variante A (Sticker-Hero) auf User-Wahl. Avatar 88px wird mobil entfernt (display:none), Cutout-Container reaktiviert (.ws-stage__portrait wieder display:block) und als absolute Bottom-Layer positioniert: position absolute, bottom 0, right -8 prozent (leichte Überlappung nach rechts), width 78 prozent, height clamp(300px, 52vh, 440px). Akt 1 bekommt position relative z-index 2 und padding-bottom clamp(300px, 52vh, 440px) damit CTAs nicht von Cutout überdeckt werden — Inhalt sitzt OBEN, Cutout unten rechts als visueller Anker. Stage-BG bekommt zarten Brand-Wash-Gradient (cream zu primary-tint 6 prozent) für atmosphärische Tiefe (1 atmosphärisches Element = Anti-Default-Regel okay). Vignette + Progress-Punkte mobil aus. Cutout-Img height 100 prozent + max-width 110 prozent + transform translate(-50%,0) zentriert horizontal in seinem Container.
   2026-05-03: v3.32-mobile-8 — Dritter Korrektur-Sweep. (1) FOOTER-LÜCKE Root-Cause endlich gefunden: `.ws-footer__claim { flex: 1 1 320px }` wirkt bei mobile-`flex-direction: column` als 320px-HÖHE-Stretch → Claim wird auf 320px hoch gestreckt = Riesenleerraum. Plus `.ws-footer__top { padding-bottom: clamp(40,5vw,64) }` und `.ws-footer__grid { padding: clamp(40,5vw,64) 0 }` brachten Default-Padding mit, das mein margin-Override nicht überschrieben hat. Fix: claim flex auf 0 0 auto, max-width none, text-align left + alle padding-Werte explizit auf 16-20 mobil. (2) GRAFIK-CENTER-ITEMS WIEDER REIN — User: „die sollen definitiv lesbar sein". Strat-Wheel Center 32→40%, Items zurück mit font 9.5/line-1.25/padding 4. OE-Donut Center 38→50%, Items zurück mit font 10/line-1.3/padding 4. Vorschläge falls Items dann noch zu klein wirken: (a) Center größer (>44/55%), (b) max 2 Items pro Phase im JS-Datenfeld kürzen (würde Desktop mit ändern), (c) Stage selbst größer (>360px, würde Container sprengen), (d) Items als horizontale Pills statt vertikale Liste (bräuchte JS-Markup-Änderung).
   2026-05-03: v3.32-mobile-7 — Zweiter Korrektur-Sweep (User-Visual-Check Runde 2). 4 Befunde nicht korrekt umgesetzt: (1) Hero immer noch Textwand mit 3 Akten gestapelt → mobil nur Akt 1 sichtbar (Akt 2 = Schmerzbild, Akt 3 = Versprechen) sind in Kontext-Section bzw Pillars+Process redundant abgedeckt. Hero wird kompakt + persönlich (Avatar + Eyebrow + H1 + Sub + 2 CTAs). (2) Strat-Wheel Slice-Beschriftungen wieder sichtbar mit kompakter Schrift, Center-Items mobil ausgeblendet (kommen aus Mobile-Phasen-Liste darunter), Center kleiner aber lesbar, Op-Geschäft-Labels WIEDER sichtbar mit kleiner Schrift (8.5px) — User: „nicht raus, sondern kleiner und passender". (3) OE-Donut Wedge-Labels wieder sichtbar, Center-Items mobil ausgeblendet (in Liste-Akkordeon darunter), Center kleiner. (4) Footer-Lücke aggressiver: Section-Padding mobil von clamp(72,9vw,144) auf 28px 0 22px (drastisch). (5) Hamburger-Drawer-Menu: 6 Eigen-Items → 4 Desktop-Originale (Portfolio/Vorgehen/Kundenstimmen/Über mich) + Kontakt — User wollte Tablet-Desktop-Sprünge, nicht meine Erfindung.
   2026-05-03: v3.32-mobile-6 — Korrektur-Sweep nach User-Visual-Feedback (11 strukturelle Befunde aus Mobile-Screenshots). Root-Cause war: ich habe Mobile-Layouts NICHT visuell verifiziert, nur Code geschrieben + behauptet sie funktionieren. Tablet-Erbschaft + stumpfe Layout-Übernahme = Antipattern.
     • Hero: Marco-Cutout-Container mobil komplett display:none. Stattdessen kleiner runder Avatar-Anker (88px) als .ws-act__avatar in Akt 1 oben — visuelle Persönlichkeit ohne Foto-Wand. (HTML-Edit: figure.ws-act__avatar mit cutout-Image, mobile-only via Default-display:none.)
     • Pillars-Index + Formats-Index mobil display:none — Sticky-Funktion war mobil schon aus, statische Liste war redundant zu den darunter folgenden Pillar-Cards.
     • Strat-Wheel: Op-Geschäft-Labels (3 Cream-Boxen) display:none mobil — sie überdeckten die Slices mit ihrem BG. Mobile-Phasen-Liste UNTER dem Wheel sichtbar (HTML-Edit: ol.ws-strat-wheel__list-mobile mit 7 Phasen + Namen, mobile-only via Default-display:none). Center kleiner: width 32→28%, name clamp 13-15, items 11.5, default 14-16.
     • OE-Donut: Center kleiner (38% max 180), Schriften 11.5-16. Liste-Akkordeon war schon sichtbar.
     • Tag-Listen Pillar 2 + 3 (.ws-tags): 1-Spalten-Wand → 2-Spalten-Grid mit gap 6, padding 8 10, font 12.5, Items wrappen (lange Items wie „Führungs- und Kommunikationsverhalten" 2-zeilig okay).
     • Geo City-List: 1-Spalten-Wand → 2-Spalten-Grid (Border-Bottom raus, padding 5, font 16). Spart ~50% Höhe.
     • Voices Quotes: 1-Spalten-Stapel → manueller horizontaler Scroll-Snap-Rail (analog Cases-Rail), flex 0 0 84vw max 360. Mask-Fade. Spart Höhe deutlich. (User wollte auto-marquee — manueller Slider liefert 80% des Ziels — Höhe-Sparen — ohne HTML-Klone-Aufblähung. Auto-Marquee als Folge-Iteration nachreichbar.)
     • Voices Videos: 1-Spalten-Stapel → manueller Scroll-Snap-Rail (analog Quotes/Cases), flex 0 0 84vw max 360.
     • Footer-Lücke: footer__top gap+margin-bottom kompakter — Riesenleerraum zwischen Logo+Claim und Footer-Grid weg.
     • Sticky-Bottom-CTA komplett raus (HTML-Element entfernt, body padding-bottom 0). User: „Spam, nicht conversion-orientiert." — recht hat er, CTAs sind in Hero+Process+Kontakt+Header+Hamburger-Drawer ausreichend.
     Kein Build-Mode-Bündel — kombinierter Korrektur-Sweep nach Visual-Feedback.
   2026-05-03: v3.32-mobile-5 — Mobile-Overhaul Bündel 5 (FAQ + UnternehmerCamp + Kontakt + Footer + Hamburger-Nav + Sticky-Bottom-CTA). Letzter Build des 5-Bündel-Sweeps. Erster Eingriff jenseits von CSS-only: HTML-Hamburger + Drawer + Backdrop + Bottom-CTA-Bar (alle nur mobil sichtbar via display:none auf Desktop), JS-IIFE für Hamburger-Toggle (script.js v3.12).
     • Hamburger-Nav (User-Vorgabe Punkt 2): Neuer Button .ws-nav__hamburger im Header rechts neben CTA-Group (3 Bars, 48×48px Touch). Off-Canvas-Drawer von rechts (.ws-nav__drawer position:fixed top:0 right:0 bottom:0 width: min(85vw, 320px) transform: translateX(100%) → is-open: translateX(0)). Backdrop mit fade-in. 6 Section-Sprünge (Start / Kompetenzen / Formate / Vorgehen / Über mich / Kontakt) + 3 CTAs (Termin / Anrufen / WhatsApp). Body-Scroll-Lock via .ws-nav-locked. ESC + Backdrop-Click + Section-Link-Click → close. aria-expanded/aria-hidden konsistent.
     • Sticky-Bottom-CTA: Neue .ws-mobile-bottom-cta position:fixed bottom:0 mit 3 Buttons (Termin/Anrufen/WhatsApp) + SVG-Icons. Cream-BG + Top-Border. Body padding-bottom 78px mobil reserviert damit Content nicht unter Bar verschwindet. z-index 50 unter Drawer (60).
     • FAQ Mobile-Polish: Akkordeon-Trigger padding größer (Touch ≥48px), Body-Schrift 16px line-1.6, Eyebrow + Intro + Header-CTA kompakter.
     • UnternehmerCamp CLS-Fix (NICE N4): Video aspect-ratio: auto+height 180px → aspect-ratio: 16/9 + max-height: 320px (Browser kann Layout vor Load reservieren, kein CLS-Sprung). Container padding kompakt.
     • Kontakt Mobile-Polish: H2 clamp safer, Sub kompakt, CTAs stacken via flex-wrap (waren wrap schon, hier nur 100%-Btn-Width für klare Stack-Optik).
     • Footer Mobile-Polish: Footer-Förderung-Note kompakter (lange Text-Spalte bei 1fr 1fr Grid mobil zwischen 420-760px), Bottom-Bar tighter.
     Bündel 5 von 5. HTML-Eingriffe: Hamburger+Drawer in Nav, Bottom-CTA vor body-end. JS-Eingriff: 2. IIFE im script.js.
   2026-05-03: v3.32-mobile-4 — Mobile-Overhaul Bündel 4 (About + Geo + Voices + Cases). User-Vorgabe Punkt 5: „sichtbare Inhalte folgen-Card" für Cases (Variante a — bestehende Platzhalter mobil als hübschere Coming-Soon-Card stylen, kein HTML-Eingriff).
     • Cases (Inhalte folgen-Card-Optik mobil): .ws-case border solid → dashed mobil, opacity 0.96 (dezent reduziert), neuer ::after-Badge „Demnächst" oben rechts (orange Pill, font 10px). Bestehende ::before-Eck-Akzent (orange L-Border top-left) bleibt. Header-Sub „Echte Fallbeispiele folgen nach Kunden-Input — die Struktur steht." wird durch die Card-Optik mobil deutlich verstärkt. Section-Sub mobil 15.5px line-height 1.6.
     • Voices Mobile-Polish: Quotes-Grid 1fr 1fr (Tablet) → 1fr (mobil schon aus Bündel 1 indirekt), Quote-Text font-size kompakter, Quote-Author lesbarer. Videos 1-Spaltig (Tablet schon). Google-Badge mobil engerer Padding. Section-Sub kompakter.
     • Geo Mobile-Polish: Lead font-size 17→16px line-height 1.6, Regions-Items padding 18→14px (4 Regionen kompakter sichtbar), Cities-Card padding clamp(28,3vw,44) → 22px mobil (engere Box auf 360px), Cities-List 1-Spaltig (schon Bündel 1) + Cities-Items font-size auf clamp(16,5vw,19) für 360-Lesbarkeit.
     • About Mobile-Polish: Bio-Bodycopy mobil 17→16px line-height 1.6, About-H2 margin-bottom kompakter, Stats-V (Zahlen) clamp safer, Stat-L (Labels) 11→10.5 mit gleichem letter-spacing, Coops-Grid li height 56→54 (kleiner aber Logo bleibt sichtbar). Caption unter Portrait kompakter.
     Bündel 4 von 5 — alle Änderungen ausschließlich im @max 760px-Block. HTML/JS unangetastet.
   2026-05-03: v3.32-mobile-3 — Mobile-Overhaul Bündel 3 (LEGO + Process + Phases-Wrapper). Polish-Bündel — Step-Layout war bereits mobil-optimiert (aus Bündel 1), LEGO erbt 1-Spalten aus Tablet-Block. Eingriffe: LEGO-Caption mobil kompakter (padding 32 28 20 → 22 18 14, font-size 11→10.5px), LEGO-BG-Glow dezenter (480→320px Width/Height, weiter raus positioniert) — Aufmerksamkeits-Klau im 360px-Viewport reduziert. LEGO-H2 mobil margin-bottom 24→18px. Process Step-Padding 28→24px (engere Liste, mehr Sichtbarkeit pro Viewport). Step-Body max-width 60ch → none mobil (volle Breite, da Spalte schmal ist und Crop ohnehin durch Container greift). Step-Desc font-size 17→16px für 360px-Lesbarkeit. Process-CTA margin-top mobil reduziert (clamp greift schon, ergänzt). Phases-Wrapper Section-Head Sub-Text font-size 17→15.5px mobil. Bündel 3 von 5 — alle Änderungen ausschließlich im @max 760px-Block. HTML/JS unangetastet.
   2026-05-03: v3.32-mobile-2 — Mobile-Overhaul Bündel 2 (Pillars + Formate). User-Vorgabe „Visualisierungen sollen mobil sichtbar sein und funktionieren" → beide interaktive Grafiken bleiben jetzt mobil sichtbar+touch-fähig (vorher: OE-Donut komplett display:none mit Liste-Fallback / Strat-Wheel zu klein mit unlesbaren Labels).
     • Strat-Wheel Mobile (BLOCKER B3): Stage max-width 480px → 100% (volle Container-Breite bis ~360px). Labels (Slice-Beschriftungen mit clamp ~9.5px) komplett display:none mobil — Slice-Tap reicht, Center-Reveal zeigt Phase-Name + Items. Touch-Target-Berechnung bei 320px Stage: Slice-Mid-Sehne ~46px (✓ ≥44 Touch-Min). Number-Badges 32→26px (passen besser am Außenrand bei kleinerer Stage). Op-Labels font-size 9→11px für Lesbarkeit. Center-Schriften: name clamp +2 (auf 14-17px), items 12→13px (über 12px-Schwelle), default 16-20px. Hint-Margin nach unten 10px für Tap-Hint-Bereich.
     • OE-Donut Mobile (BLOCKER teil): vorher `display:none` ab 720px → Liste-Fallback. Jetzt Stage SICHTBAR+TOUCHABLE mit Liste als Detail-Akkordeon DARUNTER (statt statt). Labels mobil display:none (Wedges direkt tappbar, sind Pfeil-Shapes mit großer Touch-Fläche). Center-Items mobil 13px. Stage padding-bottom 12px für Gap zum Liste-Akkordeon. Liste-Items mobil mit kleinerem Padding für engere Optik unter dem Donut.
     • Pillar 2 Antreibertest-Addon (WICHTIG W5): mobile visuelle Trennung zur Tag-Liste darüber — margin-top 28→32px, border-left orange bleibt, neuer subtiler Cream-Tint-BG `rgba(252,141,41,0.04)` damit Addon als eigene Insel wirkt (statt nahtlos angepappt). Padding mobil etwas kompakter.
     • .ws-btn--sm Touch-Pflicht: in Bündel 1 als Ausnahme — jetzt mobil min-height: 44px (Touch-Min, nicht 48 wie Primary). Antreibertest-CTA + sonstige sm-Buttons werden ohne Größen-Sprung in Optik leicht höher.
     • Formate Mobile-Polish: Format-Steps Padding 22 26 → 18 22, Format-Cards Border-Top sichtbarer (1→1.5px), Format-Index-Liste mobil engere padding (22→16). Step-Items inline bleiben, ab 420px display:block (Bündel 1 / pre-existing).
     Bündel 2 von 5 — alle Änderungen ausschließlich im @max 760px-Bereich (+ Strat-Wheel + OE-Donut Mobile-Overrides). HTML/JS unangetastet.
   2026-05-03: v3.32-mobile-1 — Mobile-Overhaul Bündel 1 (Hero + Trust + Logos + Kontext). Quelle: _review/mobile-analyse-v1.md. Desktop (≥1025px) und Tablet (@max 1024px) bleiben UNANGETASTET. Änderungen ausschließlich im @media max-width: 760px-Block.
     • Hero Above-the-Fold-Fix (BLOCKER B1+B2): Stage-Inner als Grid-Reorder via display:contents auf .ws-stage__acts + grid-row pro Element. Akt 1 (Eyebrow+H1+Sub+Doppel-CTA) jetzt grid-row 1 → above-the-fold sichtbar bei 360/390/430px. Cutout grid-row 2, Höhe 38vh (min 280 / max 360px) — stärker gedeckelt, blockt nicht mehr. Akt 2 grid-row 3, Akt 3 grid-row 4. Portrait-Img height:100% width:auto bottom:0 (statt width:100% bottom:-9%) — Marco füllt Container-Höhe statt Container-Breite.
     • Akt-Padding kompakter: alle Akte 56→32px vertical, gap 18→14px. Akt 1 zusätzlich padding-top 24px für engere Nav-Anbindung.
     • Touch-Pflicht (BLOCKER teil): .ws-btn:not(.ws-btn--sm) { min-height: 48px } im Mobile-Block — fix für 47px-Default-Höhe (mobile-ux §4 + §17).
     • Logos-Marquee mobil dezenter (WICHTIG W4): logo height 52→36px, margin 32→22px, animation-duration 56s→72s, Label-Margin-Bottom 22→18px. Trust-Signal bleibt sichtbar, Aufmerksamkeits-Klau reduziert.
     • Trust mobil 360px-safer: .ws-trust__num clamp(1.9rem, 7vw, 2.4rem) statt fixe 2.2rem — 2-Spalten-Grid bei 360px Viewport sicher lesbar.
     Bündel 1 von 5 (5 Bündel: Hero+Trust+Logos+Kontext / Pillars+Formate / LEGO+Process+Phases / About+Geo+Voices+Cases / FAQ+Camp+Kontakt+Footer+Nav-Hamburger+Sticky-Bottom-CTA).
   2026-05-03: v3.34 — Hero-Verteilung Mix-Lösung (User-Feedback nach v3.33: Marco zu klein bei 40%-Spalte): Drei verbundene Änderungen damit Marco wachsen kann ohne den Text-Atemraum zu verlieren. (1) `.ws-stage__inner` grid-template-columns 40% → 50% — Text-Spalte und Portrait-Spalte gleichberechtigt. (2) `.ws-stage__portrait-sticky` overflow:hidden → clip-path:inset(0 -100vw 0 -100vw) — horizontal frei (Marco darf über die Spalten-Grenzen treten), vertikal weiter geclippt am Container-Bottom (PNG-Hemdknöpfe-Schnitt unsichtbar bei Sticky-Release). (3) `.ws-stage__portrait-img` max-width 100% → 120% — Marco kann bis 60% des Inners wachsen (= 120% von 50%-Spalte) und überlappt 10% in die Text-Spalte links + 10% in BG-Area rechts. Marco ist via z-index 3 vor dem Text (z 2); transparente PNG-Bereiche zeigen Text durch. Kombination erfüllt alle drei User-Kriterien gleichzeitig: (a) Cream-Linksraum bleibt groß, (b) Text-Spalte bleibt bei 50%, (c) Marco wächst sichtbar ohne JEMALS beschnitten zu werden.
   2026-05-03: v3.33 — Hero-Polish (drei Fixes nach v3.32-Test): (1) BG-Track Width 72% → 60% — KI-Office-BG sitzt weiter rechts, Cream-Section bekommt mehr Atemraum links. (2) BG-Stage Mask-Fade verbreitert von `transparent 4% → opaque 32%` auf `transparent 5% → opaque 65%` — Übergang von Cream zu KI-BG ist jetzt deutlich länger und weicher (Fade-Range 60% von bg-stage statt 28%). (3) Marco-Cutout-Skalierung umgestellt: fixe `height: 92%` + `max-width: 180%` → bound-basiert `max-width: 100%` + `max-height: 92%` + `width/height: auto` — Browser wählt automatisch die kleinere Schranke und skaliert proportional. Marco füllt den verfügbaren Spalten-Platz vollständig aus (Width-Bound greift bei schmaler Spalte) ohne JEMALS seitlich vom overflow:hidden des Sticky-Containers beschnitten zu werden. Akt-Lifts (-3/-7px) und reduced-motion bleiben kompatibel.
   2026-05-03: v3.32 — Hero-Verteilung (User-Optik-Korrektur, nur _preview): Portrait-Spalte 56% → 40% (Desktop). Grund: Foto + Full-Bleed-KI-BG-Track + zentrierter Marco mit hohem Visual-Weight (blaues Hemd, helles Fenster, Vollkontrast) dominierten optisch ~65% der Hero-Fläche, obwohl CSS-Grid bei 44/56 lag. Headline bricht auf 4 Zeilen, längste Zeile ~60% der Spaltenbreite → Text-Spalte wirkte zusammengedrückt. Mit 60/40 im Grid landet die gefühlte Wirkung näher an 50/50. ⚠️ Marco-Cutout bei height:92% wird seitlich beschnitten (overflow:hidden im Sticky-Container) — falls störend: portrait-img height 92% → 75% + max-width 180% → 140% (analog v3.19-Stand). Tablet-Breakpoint und Mobile unangetastet. _deploy bleibt auf v3.28.
   2026-05-03: v3.31 — Neue Regel `.ws-oe-donut__finetuning-text` für SVG-Text "Finetuning" im neuen Donut-Doppelpfeil-Block (HTML v2.7.17). Sync mit _deploy v3.28.
   2026-05-03: v3.30 — OE-Donut Center-Text wieder weiß. Nach v2.7.16 (HTML)-Umstellung des Center-Gradients von hellem Blaugrau auf dunkles Blaugrau (analog Strat-Wheel) saßen die Center-Texte (color var(--ws-text)) auf dunklem BG = unlesbar. Jetzt 1:1 wie Strat-Wheel-Center: `.ws-oe-donut__center` color → `#fff`, `.ws-oe-donut__center-default` + `__center-name` text-shadow (heller Lift) entfernt, `.ws-oe-donut__center-items li` color rgba(255,255,255,0.9). Center-Num bleibt orange. Sync mit _deploy v3.27.
   2026-05-03: v3.29 — Hero-Portrait-Spalte breiter (Desktop 48% → 56%, Tablet 50% → 56%) damit Marcos Schultern bei der neuen Bild-Höhe (height 92%) seitlich nicht mehr abgeschnitten werden. Sticky-Container behält overflow:hidden, aber das Bild passt jetzt fast komplett in die Spalte rein (statt ~320px je Seite überzulaufen).
   2026-05-03: v3.28 — Hero-Marco vergrößert: `.ws-stage__portrait-img` height 75% → 92%, max-width 160% → 180%. User-Feedback: Marco wirkt im Hero zu klein, hat oben und rechts noch Platz. Plus HTML: `.ws-stage__portrait-meta` (Marco Groß / Hamburg · seit 2020) entfernt — lag hinter dem Cutout (Stacking-Context-Effekt durch transform am Bild) und war redundant zu About-Caption + Footer.
   2026-05-03: v3.27 — Nav-CTAs aufgeräumt + Hover-Feedback für aktiven Button. (1) `.ws-nav__ctas` background `rgba(31,42,48,0.04)` + padding 4px raus → grauer Capsule-Hintergrund verschwindet, beide Buttons sitzen offen nebeneinander. (2) `.ws-nav__pill` Inset-Berechnung an „kein padding" angepasst (top/bottom/left 0, width 50%). (3) Neue `:has()`-Hover-Regeln: wenn der gerade AKTIVE Button gehovert wird (Pill liegt schon drunter, JS schaltet `data-active` nicht um), bekommt die Pill `filter: brightness(0.88)` für orange / `filter: brightness(1.25)` für dunkelblau — sichtbarer Farbnuance-Wechsel ohne Brand-Farbfamilie zu verlassen. Transition um `filter 240ms` ergänzt damit es sauber überblendet.
   2026-05-03: v3.26 — `.ws-btn--camp:hover` an `.ws-btn--primary:hover` angeglichen. background `#fff` → `var(--ws-text)` (#1F2A30 dunkles Blaugrau), color `var(--ws-primary-deep)` → `#fff`, border-color `#fff` → `var(--ws-text)`. Camp-Button (orange) wechselt jetzt im Hover ins gleiche Dunkelblau wie alle anderen Brand-Primary-Buttons (z.B. Header-CTA, Hero-CTA, Kontakt-CTA), statt nach Weiß zu kippen — Hover-Behandlung ist nun konsistent über die ganze Seite.
   2026-05-03: v3.25 — UnternehmerCamp-Banner Video deutlich präsenter auf Desktop und Tablet. Default `.ws-camp__inner` grid-template-columns 200px → clamp(380px, 38vw, 520px) (Video-Spalte von ~5× Pixelfläche bis ~7× größer je nach Viewport). `.ws-camp__media` width 200px+height 130px → width 100% + aspect-ratio 16/9 (skaliert mit Spalte, 16:9 statt 1.54:1 = mehr Filmcharakter), zusätzlich box-shadow 0 18px 40px rgba(0,0,0,0.28) für Tiefe gegen den dunklen Banner-BG. Tablet-Block (max-width 1024): height 200px → aspect-ratio 16/9 + max-height 480px (auf 720er-Container = 405px Video-Höhe statt 200px → ~2× Fläche). Mobile (max-width 760): aspect-ratio: auto + height 180px (unverändert, expliziter Reset gegen die neue Default-aspect-ratio).
   2026-04-25: Konzept B "Sticky Journey" (v2.0)
   2026-05-01: Korrektur-Update v3.0 (PDF + Korrektur 2)
   2026-05-01: v3.1 — OE-Donut interaktiv (5 Pfeil-Wedges + Mobile-Akkordeon)
   2026-05-01: v3.2 — OE-Donut Bug-Fix (Wedges nahtlos verbunden, Labels per JS-Inline-Position, Center-Grid)
   2026-05-01: v3.3 — OE-Donut Polish (Active=schwarzer Stroke um Pfeil-Form, Labels nur Text, kein Tile)
   2026-05-01: v3.4 — OE-Donut Hover/Click-Trennung (is-hover=brightness, is-clicked=Stroke, Outline:none)
   2026-05-01: v3.5 — OE-Donut Polish 2 (kleine dunkle Label-Tiles, weiße Trennränder zw Wedges)
   2026-05-02: v3.6 — OE-Donut Center-Text dunkel (var(--ws-text) statt #fff, Shadows zu hellem Lift, Items-Zeilen rgba(31,42,48,0.85))
   2026-05-02: v3.7 — OE-Donut Center-Text dicker+präsenter (weight 600/700, größer, Phase-Num orange voll opak) + Crossfade-Bug-Fix (visibility-Toggle gegen Doppel-Sichtbarkeit beim Hover)
   2026-05-02: v3.8 — Hero-Verteilung neu: Portrait-Spalte 56%→42% (Desktop), 50%→44% (Tablet) — Text-Akte bekommen mehr Atemraum nach rechts
   2026-05-02: v3.9 — Hero-Foto breiter zurück (42%→48% / 44%→50%) + Default-Zoom raus (transform scale 1.04→1, Akt 3 1.08→1.03) + object-position 18%→22% (mehr Luft über dem Kopf, weiter rausgezoomt-Wirkung)
   2026-05-02: v3.10 — .ws-case::before angeglichen an .ws-deliver::before — orange Eck-Border (56×56, top+left, border-radius oben links) statt 64×2-Strich. Cases (Aus der Praxis) jetzt visuell konsistent mit Kontext-Box (Warum jetzt)
   2026-05-02: v3.11 — Hero-Inszenierung neu: KI-Office-BG-Bild (Flux Pro Ultra, 4:3, Fenster rechts, Hamburger Backstein-Subtext) als Parallax-Layer hinter freigestelltem Marco-Cutout. Layer-Stack: BG mit blur(5px) + mask-fade nach links + Vignette + Cutout mit drop-shadow. Mobile: BG-Bild aus, Brand-Wash-Gradient + Soft-Shadow. Frame-Ornament + border-left raus.
   2026-05-02: v3.12 — Hero-BG-Layer aus Portrait-Sticky in Stage-Inner herausgezogen → ws-stage__bg-track (absolut, right:0, width:72%) + ws-stage__bg-stage (sticky innen, mask-fade auf 32%). BG reicht jetzt von ganz rechts bis nahe an den Text und fadet weich zur Cream-Section aus. Cutout-Datei durch echten freigestellten Marco ersetzt.
   2026-05-02: v3.13 — Hero-Fixup nach User-Feedback: BG-Track aus inner direkt in stage gehängt (dann volle Stage-Breite ohne Cream-Streifen rechts). .ws-stage overflow-x:clip (sticky-safe). Cream-linear-gradient aus Vignette raus (war als Mask-Verstärker gedacht, jetzt redundant + erzeugte sichtbaren weißen Overlay-Kasten neben Marco). Blur 5px → 1.5px (User: zu unscharf).
   2026-05-02: v3.14 — milchiger Kasten weg + Akt-3-Sprung sanfter: Brand-Wash-BG vom .ws-stage__portrait-sticky in den Mobile-Breakpoint verschoben (lag auf Desktop als Cream-mit-Blaugrau-Tint vor dem KI-BG-Track). Akt-3-Lift: translate -12 → -7 mit Akt-2-Zwischenstop -3, transition 1200ms → 2400ms (langsamer Übergang).
   2026-05-02: v3.15 — schwarzer Kasten weg + Cream-Schlitz unten weg: Vignette-radial-gradient auf Desktop deaktiviert (dunkle Edges fielen sichtbar als Streifen links neben Marco). BG-Track top:0 → top:64px synchronisiert Sticky-Range mit Inner (Inner ist 300svh, Stage durch padding-top:64 für fixed Nav 300svh+64; vorher endete BG-Sticky 64px später als Portrait-Sticky → Cream-Schlitz beim Akt-3-Release).
   2026-05-02: v3.16 — Marco bottom-bündig: object-fit contain → cover (PNG-Aspect ~0.94 vs Container ~0.85, contain ließ ~10% Cream-Lücke unten). drop-shadow raus (erzeugte sichtbaren Schatten unter Marco gegen Cream-Section am Akt-3-Übergang).
   2026-05-02: v3.17 — Marco wieder mit natural aspect: object-fit komplett raus, stattdessen position:absolute bottom:0 + width:100% + height:auto. Kein Crop links/rechts (cover beschnitt Schultern), kein Stretch (zu groß-Eindruck weg), bottom-bündig am Container, oberer Bereich durchscheinend zum BG-Track.
   2026-05-02: v3.18 — Marco bottom-bündig ohne sichtbares PNG-Ende: bottom:0 → bottom:-9% (Container-relativ). Bei width:100%+height:auto ist Bild-Höhe ~PNG-Aspect × Container-Width = ca. 60% Container-Höhe (Marco klebt unten, Lücke oben für BG durchscheinend). Bei bottom:0 lag das abrupte PNG-Ende (Hemdknöpfe-Schnitt) genau am Container-Bottom = sichtbar bei Sticky-Release als "schwebendes Bild-Ende" über der Trust-Sektion. Mit bottom:-9% rutscht das PNG-Ende unter den overflow:hidden-Container, wird geclippt — Marco geht visuell durchgehend bis zur Trust-Bar. Akt-Lift max -7px (~0.65% von 1080svh) bleibt deutlich unter 9% → kein Cream-Schlitz beim Akt-Übergang. Mobile-Override `object-position: center 14%` entfernt (no-op seit v3.17, object-fit raus).
   2026-05-02: v3.19 — Marco größer auf großen Displays: width:100% (Container-Width-basiert) → height:75% + max-width:160% (Container-Höhe-basiert). Auf 1440/4K-Displays ist Sticky-Container schmal+hoch (~614w × 1440h+) → mit width:100%+height:auto füllte Marco nur 40-60% Container-Höhe = visuell zu klein. Jetzt fixiert height:75% den Marco-Anteil an der Container-Höhe (= 75% sichtbarer Höhe), Width passt sich am PNG-Aspect (0.94) an und ragt seitlich über die Spalte hinaus → vom overflow:hidden des Sticky-Containers seitlich geclippt. max-width:160% cappt den Crop bei sehr breiten Displays. Marco wird zentriert (left:50% + translateX(-50%)) statt left:0+right:0. Akt-Lifts (-3/-7px), Reduced-Motion-Reset, Mobile-Override und globaler RM-Block (Z. 2988) auf neue Geometrie angepasst.
   2026-05-02: v3.20 — Pillar 2 Hexagon-Grafik raus, Pills visuell aufgewertet. Hexagon-Konstrukt (.ws-graph.ws-graph--lead mit 6 Knoten Klarheit/Vertrauen/Verantwortung/Feedback/Sprache/Transfer) wirkte überladen + falsch interpretiert (Original-Quelle war eine simple Tag-Liste). Stattdessen Tag-Liste behalten + um "Mentoring" ergänzt (=6 Tags wie auf marco-gross.hamburg-Original). .ws-tags li: padding 8x14 → 10x18, font-size 13 → 13.5px + weight 500, BG-Opacity 55% → 65%, sanfter Box-Shadow + Hover-Lift via translateY(-1px). .ws-graph*-Stile bleiben im File (unused, kein Conflict — Aufräumen separater Pass).
   2026-05-02: v3.21 — Pillar 1 Strategie-Wheel: statisches Bild (grafik-strategie-praxis.png) durch interaktive SVG-Pizza-Slice-Grafik ersetzt. Neue Klassen .ws-strat-wheel + Sub-Komponenten (.ws-strat-wheel__stage / __svg / __slice / __center / __center-default / __center-active / __center-num / __center-name / __center-items / __labels / __badges / __outer-ring / __op / __list / __list-item / __list-num / __list-name / __hint). Pizza-Slice-Geometrie (klassisch, kein Pfeil-Notch) mit Cream/Apricot-Gradient (#FCE5C2 → #F5C896), dunkles Center-Gradient (#3F5763 → #1E323B), Outer-Ring gestrichelt grau. Number-Badges (orange Kreis 26px) am Außenrand jeder Slice. Phase-Labels in Slice positioniert (28% off-center), Badges 41% off-center. Hover/Click-State analog .ws-oe-donut (is-hover / is-clicked-Klassen, Center-Detail-Reveal). Phasen-Liste darunter als Akkordeon (auto-fit minmax 220px Grid). Mobile (≤760px): Stage 360px, Labels 8.5px, Badges 22px. Reduced-motion: Slice/Label/Center-Transitions aus.
   2026-05-03: v3.24 — Strat-Wheel Slice-Labels: 3 Fixes. (1) `color: #fff` → `color: var(--ws-text)` (dunkles Blaugrau wie sonst auf der Site, lesbarer auf Apricot). (2) `text-shadow` invertiert: dunkler Drop `0 1px 2px rgba(31,42,48,0.32)` → heller Lift `0 1px 1px rgba(255,255,255,0.55)` (passt zu dunklem Text). (3) `white-space: normal` → `white-space: pre-line` (rendert die im JS gesetzten `\n`-Zeilenumbrüche bei mehrteiligen Labels wie ZUKUNFTS-\nBILD oder UMBAU\nORGANISATION als echte Zeilenumbrüche statt Leerzeichen). (4) Label-Container width 26% → 22% (schmaler — passt jetzt sauber in die Slice-Mid-Radius-Sehnen-Breite ~24% bei 7 Slices à 51.43°, vorher ragten Texte über die Slice-Ränder hinaus).
   2026-05-03: v3.23 — Zwei zusätzliche "Operatives Geschäft"-Labels am Strat-Wheel-Pfeil. Bestehender Stil-Block für `.ws-strat-wheel__op` umstrukturiert: gemeinsame Basis-Stile (font, color, background cream, padding) auf 3 Klassen `.ws-strat-wheel__op + __op-left + __op-right` aufgeteilt, individuelle Position pro Klasse. `__op-left` bei top:95% left:19% (links am Pfeil-Anfang), `__op-right` bei top:95% left:81% (rechts vor Pfeilspitze). Beide zentriert mit `translate(-50%, -50%)`. Cream-BG überdeckt die Pfeil-Linie an der Label-Position.
   2026-05-02: v3.22 — Strat-Wheel größer: Stage max-width 480 → 640px, Center-Container 30% → 26% (passt jetzt sauber in den Inkreis statt aus Center rauszuragen), Center-BG-Circle r 74 → 92 (HTML-SVG), R_INNER (JS) 78 → 95 → größerer Donut-Hole für mehr Center-Fläche. Schriftgrößen hochgesetzt: center-num 9 → 10.5px, center-name clamp(10/1.1/13) → clamp(13/1.5/17), center-items clamp(8/0.85/10.5) → clamp(10/1.05/12), center-default clamp(13/1.6/18) → clamp(15/1.8/22), label clamp(8.5/0.95/11) → clamp(11/1.2/14). Number-Badges 26 → 32px. Mobile-Override: Stage 360 → 480px, Badges 22 → 26px, Center-Schriften proportional hoch.
   Visual Intensity: Level 2-3-Hybrid
   Archetype: H — Off-Center / Editorial Photography (Sticky Portrait)
   ========================================================================== */

/* ----- Fonts (lokal, DSGVO-konform) ----- */
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ----- Tokens ----- */
:root {
  /* Brand */
  --ws-primary: #7FAEBD;
  --ws-secondary: #FC8D29;
  --ws-primary-dark: #2F4853;
  --ws-primary-deep: #1E323B;
  --ws-primary-tint: #E8F0F3;
  --ws-cream: #FAF7F2;
  --ws-cream-deep: #F2EDE5;

  /* Text */
  --ws-text: #1F2A30;
  --ws-text-muted: #5E6E76;
  --ws-text-light: #ECF1F3;
  --ws-text-light-muted: #A9BBC1;

  /* Borders */
  --ws-border: rgba(31, 42, 48, 0.10);
  --ws-border-strong: rgba(31, 42, 48, 0.20);
  --ws-border-light: rgba(236, 241, 243, 0.18);

  /* Typography */
  --ws-font-display: Georgia, 'Times New Roman', 'Iowan Old Style', serif;
  --ws-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --ws-container: 1280px;
  --ws-pad-x: clamp(20px, 4vw, 56px);
  --ws-section-y: clamp(72px, 9vw, 144px);
  --ws-radius: 4px;
  --ws-radius-lg: 14px;

  /* Shadow */
  --ws-shadow-sm: 0 2px 8px rgba(31, 42, 48, 0.05);
  --ws-shadow-md: 0 18px 38px rgba(31, 42, 48, 0.08);
  --ws-shadow-lg: 0 28px 60px rgba(31, 42, 48, 0.14);

  /* Easing */
  --ws-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ws-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* WICHTIG: clip statt hidden — sonst stickt der Sticky-Hero relativ zum body */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--ws-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ws-text);
  background: var(--ws-cream);
  font-feature-settings: 'kern', 'liga', 'calt';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { font-style: italic; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

a { color: var(--ws-text); text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ws-secondary);
  outline-offset: 4px;
  border-radius: 2px;
}

ul, ol { padding: 0; margin: 0; list-style: none; }
p { margin: 0; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.ws-container {
  width: 100%;
  max-width: var(--ws-container);
  margin: 0 auto;
  padding-inline: var(--ws-pad-x);
}

/* ==========================================================================
   Typography
   ========================================================================== */
.ws-h2 {
  font-family: var(--ws-font-display);
  font-weight: 400;
  font-size: clamp(1.95rem, 2.6vw + 1rem, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ws-text);
}
.ws-h2 em {
  font-style: italic;
  color: var(--ws-secondary);
}
.ws-h2--light { color: var(--ws-text-light); }
.ws-h2--light em { color: var(--ws-secondary); }

.ws-eyebrow {
  font-family: var(--ws-font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ws-primary-dark);
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.ws-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--ws-secondary);
}
.ws-eyebrow--light { color: var(--ws-text-light-muted); }
.ws-eyebrow--light::before { background: var(--ws-secondary); }

.ws-bodycopy {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ws-text-muted);
  max-width: 56ch;
  margin: 0 0 18px;
}
.ws-bodycopy em {
  color: var(--ws-text);
  font-style: italic;
}
.ws-orch {
  color: var(--ws-text);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ws-dropcap {
  font-family: var(--ws-font-display);
  font-size: 1.25em;
  font-weight: 400;
  color: var(--ws-secondary);
  font-style: italic;
}

.ws-section-head {
  margin: 0 0 clamp(40px, 5vw, 72px);
  max-width: 720px;
}
.ws-section-head__sub {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ws-text-muted);
}
.ws-section-head__sub--light { color: var(--ws-text-light-muted); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.ws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ws-font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 16px 26px;
  border-radius: 999px;
  transition: background-color 240ms var(--ws-ease),
              color 240ms var(--ws-ease),
              border-color 240ms var(--ws-ease),
              transform 240ms var(--ws-ease);
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ws-btn:hover { transform: translateY(-1px); }
.ws-btn:active { transform: translateY(0); }

.ws-btn--primary {
  background: var(--ws-secondary);
  color: #fff;
  border-color: var(--ws-secondary);
}
.ws-btn--primary:hover {
  background: #DE7C24;
  color: #fff;
  border-color: #DE7C24;
}

/* Generischer Dark-Hover-Override: orange BG (primary) bleibt im Default,
   wechselt im Hover ins Brand-Dunkelblau statt nur dunkleres Orange.
   Einsatz: dort wo der Hover starken Kontrast-Wechsel zeigen soll
   (z.B. Pillar-1-Sekundär-CTA „Ausführliche Informationen"). */
.ws-btn--dark-hover:hover {
  background: var(--ws-text);
  color: #fff;
  border-color: var(--ws-text);
}

.ws-btn--secondary {
  background: var(--ws-text-light);
  color: var(--ws-primary-deep);
  border-color: var(--ws-text-light);
}
.ws-btn--secondary:hover {
  background: var(--ws-secondary);
  color: #fff;
  border-color: var(--ws-secondary);
}

.ws-btn--ghost {
  background: transparent;
  color: var(--ws-text);
  border-color: var(--ws-border-strong);
}
.ws-btn--ghost:hover {
  background: var(--ws-secondary);
  color: #fff;
  border-color: var(--ws-secondary);
}

.ws-btn--ghost-light {
  background: transparent;
  color: var(--ws-text-light);
  border-color: rgba(255, 255, 255, 0.30);
}
.ws-btn--ghost-light:hover {
  background: var(--ws-secondary);
  color: #fff;
  border-color: var(--ws-secondary);
}

.ws-btn--lg { padding: 19px 34px; font-size: 16px; }
.ws-btn--sm { padding: 11px 18px; font-size: 13px; }

/* ==========================================================================
   Reveal Animation (IntersectionObserver-driven)
   ========================================================================== */
.ws-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 720ms var(--ws-ease-out),
              transform 720ms var(--ws-ease-out);
  will-change: opacity, transform;
}
.ws-reveal.ws-is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ws-reveal--delay-1.ws-is-visible { transition-delay: 100ms; }
.ws-reveal--delay-2.ws-is-visible { transition-delay: 200ms; }

/* ==========================================================================
   Lumina-Reach-Bar (Topbar über der Hauptnavigation)
   "Website by Lumina Reach" — Schwarzes PNG-Symbol per CSS-Filter
   invertiert, damit es auf dunklem Brand-BG weiß erscheint.
   ========================================================================== */
.ws-lumina-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: block;
  padding: 5px 16px;
  background: rgba(250, 247, 242, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ws-border);
  text-align: center;
  line-height: 0;
  transition: transform 360ms var(--ws-ease),
              opacity 280ms var(--ws-ease);
  will-change: transform;
}
.ws-lumina-bar img {
  height: 16px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.6;
  transition: opacity 240ms var(--ws-ease);
}
.ws-lumina-bar:hover img,
.ws-lumina-bar:focus-visible img { opacity: 1; }

/* Sobald gescrollt wird: Bar weg, Nav rückt nach oben */
body.ws-is-scrolled .ws-lumina-bar {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 760px) {
  .ws-lumina-bar { padding: 4px 16px; }
  .ws-lumina-bar img { height: 14px; }
}

/* ==========================================================================
   Nav
   ========================================================================== */
.ws-nav {
  position: fixed;
  top: 26px; left: 0; right: 0;
  z-index: 50;
  background: rgba(250, 247, 242, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background-color 280ms var(--ws-ease),
              border-color 280ms var(--ws-ease),
              top 360ms var(--ws-ease);
}
body.ws-is-scrolled .ws-nav { top: 0; }
.ws-nav.ws-is-scrolled {
  background: rgba(250, 247, 242, 0.94);
  border-bottom-color: var(--ws-border);
}
.ws-nav__inner {
  max-width: var(--ws-container);
  margin: 0 auto;
  padding: 14px var(--ws-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Desktop: 3-Spalten-Grid → Menü exakt mittig, unabhängig von Logo-/CTA-Breite.
   Mobile (≤760px) bleibt auf Flex (nur Logo + Hamburger). */
@media (min-width: 761px) {
  .ws-nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .ws-nav__brand { justify-self: start; }
  .ws-nav__menu  { justify-self: center; }
  .ws-nav__ctas  { justify-self: end; }
}
.ws-nav__brand { display: inline-flex; flex-shrink: 0; }
.ws-nav__logo { width: auto; height: 38px; }

/* Onsite-Navigation */
.ws-nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.5vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ws-nav__link {
  font-family: var(--ws-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ws-text);
  letter-spacing: 0.01em;
  position: relative;
  padding: 6px 0;
  transition: color 240ms var(--ws-ease);
}
.ws-nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ws-secondary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 280ms var(--ws-ease);
}
.ws-nav__link:hover { color: var(--ws-primary-dark); }
.ws-nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

/* CTA-Group mit Slide-Pill (Default: Termin hat Pill, Hover Tel gleitet rüber) */
.ws-nav__ctas {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border-radius: 999px;
  flex-shrink: 0;
}
.ws-nav__pill {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 50%;
  background: var(--ws-text);
  border-radius: 999px;
  transition: transform 360ms var(--ws-ease-out),
              background-color 280ms var(--ws-ease),
              filter 240ms var(--ws-ease);
  pointer-events: none;
  z-index: 1;
}
.ws-nav__ctas[data-active="termin"] .ws-nav__pill {
  transform: translateX(100%);
  background: var(--ws-secondary);
}
/* Hover über den AKTIVEN Button → Pill bekommt sichtbares Feedback (sonst snappt sie nicht — sie ist ja schon dort).
   filter statt Farbwechsel: bleibt in der Brand-Farbfamilie (orange dunkler / dunkelblau heller). */
.ws-nav__ctas[data-active="termin"]:has(.ws-nav__btn[data-target="termin"]:hover) .ws-nav__pill {
  filter: brightness(0.88);
}
.ws-nav__ctas[data-active="tel"]:has(.ws-nav__btn[data-target="tel"]:hover) .ws-nav__pill {
  filter: brightness(1.25);
}
.ws-nav__btn {
  position: relative;
  z-index: 2;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 22px;
  border-radius: 999px;
  color: var(--ws-text);
  white-space: nowrap;
  transition: color 240ms var(--ws-ease);
  flex: 1 1 auto;
  text-align: center;
}
.ws-nav__ctas[data-active="tel"] .ws-nav__btn[data-target="tel"],
.ws-nav__ctas[data-active="termin"] .ws-nav__btn[data-target="termin"] {
  color: var(--ws-text-light);
}

/* ==========================================================================
   HERO STAGE — Sticky-Portrait + 3 Acts (SIGNATURE MOVE)
   ========================================================================== */
.ws-stage {
  position: relative;
  background: var(--ws-cream);
  padding-top: 90px; /* Lumina-Bar 26 + Nav 64 */
  overflow-x: clip; /* Container für absolute BG-Layer; clip statt hidden — sticky-safe */
}
.ws-stage__inner {
  position: relative;
  display: grid;
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr) minmax(0, 50%);
  /* align-items default = stretch — rechte Spalte streckt auf 3×100svh,
     damit das Sticky-Portrait einen 300svh-Container zum Sticken hat.
     v3.8: Portrait-Spalte 56% → 42% — Text-Akte bekommen mehr Atemraum.
     v3.9: Spalte auf 48% — User-Feedback "Foto etwas breiter zurück".
     v3.29: Spalte auf 56% — Marco wird seitlich nicht mehr abgeschnitten.
     v3.32: 56% → 40% — Foto-Gewicht reduzieren (Marco war zu klein im Result).
     v3.34: 40% → 50% — Text + Portrait gleichberechtigt im Grid-Layout.
     Marco selbst darf via max-width:120% bis ~60% des Inners wachsen
     (überlappt 10% ins Text-Feld) — siehe .ws-stage__portrait-img + clip-path
     auf .ws-stage__portrait-sticky. */
  max-width: var(--ws-container);
  margin: 0 auto;
  padding-inline: var(--ws-pad-x);
}

/* LEFT — 3 Akte, je 100svh, vertikal gestapelt */
.ws-stage__acts {
  position: relative;
  z-index: 2;
  padding-right: clamp(24px, 4vw, 64px);
}
.ws-act {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 80px 0;
  position: relative;
}
/* Lead-Variante für längere Lead-Sätze über der H1 (Korrekturen II Block A, Akt 3):
   gleiche Position + Lead-Strich wie Standard-Eyebrow, aber lesbar (kein Uppercase,
   normales Letter-Spacing, etwas größer). */
.ws-act__eyebrow--lead {
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ws-text-muted);
  line-height: 1.55;
  display: block;
  max-width: 48ch;
  font-weight: 400;
  margin-bottom: 18px;
}
/* Outro-Position (Akt 3, nach der Liste): kombiniert mit --lead.
   Liste hat eigene margin-bottom, hier brauchen wir spürbaren Top-Abstand. */
.ws-act__eyebrow--outro {
  margin-top: 28px;
  margin-bottom: 0;
}
.ws-act__eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-primary-dark);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.ws-act__eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--ws-secondary);
}
.ws-act__h1 {
  font-family: var(--ws-font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.4vw + 1rem, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ws-text);
  margin: 0;
}
.ws-act__h1 em {
  font-style: italic;
  color: var(--ws-secondary);
}
.ws-act__sub {
  font-size: clamp(17px, 1.1vw + 0.6rem, 20px);
  line-height: 1.6;
  color: var(--ws-text-muted);
  max-width: 56ch;
  margin: 0;
}
.ws-act__sub--outro {
  margin-top: 28px;
}
.ws-act__sub--outro + .ws-act__sub {
  margin-top: 12px;
}
.ws-act__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  max-width: 50ch;
}
.ws-act__list li {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ws-text);
  padding-left: 32px;
  position: relative;
}
.ws-act__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 22px;
  height: 1px;
  background: var(--ws-secondary);
}
.ws-act__list--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 18px;
  max-width: 100%;
}
.ws-act__list--inline li {
  font-family: var(--ws-font-display);
  font-style: italic;
  font-size: clamp(17px, 1.2vw + 0.4rem, 21px);
  color: var(--ws-text);
  padding-left: 22px;
}
.ws-act__list--inline li::before {
  width: 14px;
  top: 0.65em;
}
.ws-act__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.ws-act__hint {
  position: absolute;
  bottom: 32px;
  left: 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.ws-act__hint-line {
  display: inline-block;
  width: 1px;
  height: 32px;
  background: var(--ws-text-muted);
  animation: ws-hint-pulse 2.4s var(--ws-ease) infinite;
  transform-origin: top;
}
@keyframes ws-hint-pulse {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* RIGHT — Sticky Portrait */
.ws-stage__portrait {
  position: relative;
  z-index: 1;
}
.ws-stage__portrait-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  /* v3.34: overflow:hidden → clip-path mit horizontaler Erweiterung.
     Marco darf via max-width:120% horizontal über die Spalten-Grenzen treten
     (Überlappung in die Text-Spalte links — gewünschtes Effekt-Detail).
     Vertikal bleibt geclippt: bottom:0 im inset clippt am Container-Bottom,
     damit Marcos abruptes PNG-Ende (Hemdknöpfe-Schnitt) bei bottom:-9% unter
     dem Container bleibt — Sticky-Release ohne sichtbare Bild-Kante. */
  clip-path: inset(0 -100vw 0 -100vw);
  /* Desktop: kein BG hier — der Stage-weite .ws-stage__bg-track liefert das Visual.
     Mobile: BG-Track ist display:none → Brand-Wash kommt im Mobile-Breakpoint. */
}

/* BG-Layer (KI-Office) — Stage-weiter Container, ragt von rechts ~72% in die
   Stage hinein und fadet links zur Cream-Section aus. Sitzt UNTER allen Inhalten
   (z-index 0) — Texte (z-index 2) und Cutout (z-index 3) bleiben sichtbar.
   Sticky-inner gepinnt während Scroll, Parallax via JS. */
.ws-stage__bg-track {
  position: absolute;
  right: 0;
  /* v3.33: width 72% → 60% — BG-Track sitzt weiter rechts; Cream-Section
     bekommt mehr Platz links. Mask-Fade unten (bg-stage) entsprechend
     verbreitert für sanfteren Übergang. */
  /* top:64px = nach dem Stage padding-top (Nav-Höhe).
     Damit ist Track-Höhe = Inner-Höhe = 300svh, BG-Stage Sticky-Range
     identisch zum Portrait-Sticky → kein Cream-Schlitz beim Akt-3-Release. */
  top: 64px;
  bottom: 0;
  width: 60%;
  pointer-events: none;
  z-index: 0;
}
.ws-stage__bg-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  /* v3.33: Mask-Fade verbreitert. Vorher: transparent 0–4% → fade → opaque ab 32%
     (Fade-Range nur 28% von bg-stage-width = ~17% von Stage). Jetzt: transparent
     0–5% → fade → opaque ab 65% (Fade-Range 60% von bg-stage-width = ~36% von
     Stage). Sanfterer/längerer Übergang von Cream zu KI-BG, BG-Solid-Bereich
     erst ab ~24% von rechts (statt vorher ~13%). */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 5%, #000 65%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, transparent 5%, #000 65%, #000 100%);
  will-change: transform;
}
.ws-stage__bg-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.02);
  transform: translate3d(0, var(--bg-shift, 0px), 0);
  pointer-events: none;
}

/* Vignette: Desktop-Default deaktiviert (radial-dark-edges erzeugten
   sichtbaren dunklen Streifen auf der linken Sticky-Container-Seite,
   wo die Ellipse-Edges fallen). BG hat ohnehin DOF-Tiefe.
   Mobile-Override greift weiterhin und setzt Bottom-Glow. */
.ws-stage__portrait-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Marco freigestellt — img Container-Höhe-basiert skaliert, bottom-bündig.
   Kein object-fit (würde croppen oder Lücke lassen weil Container-Aspect
   ~0.5 (schmal+hoch) vs. PNG-Aspect ~0.94 stark unterschiedlich).
   Stattdessen: height:75% bindet Marco-Höhe an Container-Höhe → Marco
   wirkt auf jedem Display gleich groß (75% Container-Höhe). width:auto
   skaliert proportional am PNG-Aspect, max-width:160% cappt seitliche
   Überlappung — overflow:hidden des Sticky-Containers clippt Schultern
   leicht. left:50% + translateX(-50%) zentriert horizontal.
   bottom:-9% schiebt das abrupte PNG-Ende (Hemdknöpfe-Schnitt) unter den
   overflow:hidden-Container — wird geclippt, Marco geht visuell
   durchgehend bis zum Container-Bottom (= Trust-Bar bei Sticky-Release).
   Oberer Bereich durchscheinend (BG-Track wird sichtbar — gewollt, gibt
   Tiefenwirkung mit Office-Background). */
.ws-stage__portrait-img {
  position: absolute;
  bottom: -9%;
  left: 50%;
  z-index: 3;
  /* v3.33/v3.34: Bound-basierte Skalierung. v3.33 hatte max-width:100% (Marco
     blieb in Spalten-Grenzen, wurde aber zu klein bei schmaler Spalte). v3.34:
     max-width 100% → 120% — Marco darf bis 60% des Inners wachsen (= 120% von
     50%-Spalte) und überlappt 10% in die Text-Spalte links/in BG-Area rechts
     (gewünschtes Effekt-Detail "Portrait überlappt leicht den Text"). Möglich
     weil .ws-stage__portrait-sticky overflow:hidden → clip-path:inset(0 -100vw 0 -100vw)
     ersetzt ist (horizontal frei, bottom geclippt). Marco ist über z-index 3
     vor dem Text (z-index 2); transparente PNG-Bereiche zeigen Text durch. */
  max-width: 120%;
  max-height: 92%;
  width: auto;
  height: auto;
  transform: translate3d(-50%, 0, 0);
  transition: transform 2400ms var(--ws-ease);
}
.ws-stage[data-act-active="2"] .ws-stage__portrait-img {
  transform: translate3d(-50%, -3px, 0);
}
.ws-stage[data-act-active="3"] .ws-stage__portrait-img {
  transform: translate3d(-50%, -7px, 0);
}

/* Reduced-Motion: Parallax aus, Marco-Akt-Lift aus (Zentrierung bleibt) */
@media (prefers-reduced-motion: reduce) {
  .ws-stage__bg-stage img { transform: none; }
  .ws-stage[data-act-active="2"] .ws-stage__portrait-img,
  .ws-stage[data-act-active="3"] .ws-stage__portrait-img {
    transform: translate3d(-50%, 0, 0);
  }
  .ws-stage__portrait-img { transition: none; }
}

/* unused legacy frame ornament — vollständig deaktiviert */
.ws-stage__portrait-frame {
  display: none;
}
.ws-stage__portrait-frame::before,
.ws-stage__portrait-frame::after {
  content: '';
  position: absolute;
  width: 24px; height: 24px;
  border: 1px solid var(--ws-secondary);
}
.ws-stage__portrait-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.ws-stage__portrait-frame::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.ws-stage__portrait-meta {
  position: absolute;
  left: 36px; bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ws-text);
  text-shadow: 0 2px 12px rgba(255, 255, 255, 0.55);
}
.ws-stage__portrait-name {
  font-family: var(--ws-font-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.ws-stage__portrait-role {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}


/* Akt-Headline — keine Fade-In Animation mehr (war Bug-Quelle bei Akt 2/3 wenn IO nicht triggerte) */
.ws-act > * {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ws-ease-out),
              transform 600ms var(--ws-ease-out);
}

/* ==========================================================================
   TRUST STRIP — Counter-Band auf Primary-Dark
   ========================================================================== */
.ws-trust {
  background: var(--ws-primary-dark);
  color: var(--ws-text-light);
  padding: clamp(40px, 5vw, 64px) var(--ws-pad-x);
  border-top: 1px solid var(--ws-border-light);
}
.ws-trust__inner {
  max-width: var(--ws-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}
.ws-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
a.ws-trust__item {
  text-decoration: none;
  color: inherit;
  transition: opacity 200ms ease;
}
a.ws-trust__item:hover { opacity: 0.75; }
.ws-trust__num {
  font-family: var(--ws-font-display);
  font-size: clamp(2.2rem, 3.6vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  color: var(--ws-text-light);
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
}
.ws-trust__star {
  color: #FFC400;
  font-style: normal;
  filter: drop-shadow(0 0 6px rgba(255, 196, 0, 0.35));
}
.ws-trust__lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-text-light-muted);
}
.ws-trust__divider {
  width: 1px;
  height: 48px;
  background: var(--ws-border-light);
}

/* ==========================================================================
   LOGOS — Kunden-Marquee mit echten Logos
   ========================================================================== */
.ws-logos {
  background: var(--ws-cream);
  border-top: 1px solid var(--ws-border);
  border-bottom: 1px solid var(--ws-border);
  padding: 28px 0 32px;
}
.ws-logos__label {
  text-align: center;
  font-family: var(--ws-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
  margin: 0 0 22px;
}
.ws-logos__overflow {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.ws-logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  background: var(--ws-bg);
  animation: ws-logos-scroll 42s linear infinite;
}
.ws-logos__track:hover {
  animation-play-state: paused;
}
.ws-logos__img {
  flex-shrink: 0;
  height: 44px;
  width: auto;
  max-width: 140px;
  margin: 0 32px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  mix-blend-mode: multiply;
  transition: opacity 0.3s var(--ws-ease),
              filter 0.3s var(--ws-ease);
}
.ws-logos__track:hover .ws-logos__img {
  opacity: 0.75;
}
.ws-logos__img:hover {
  opacity: 1;
  filter: grayscale(0);
}
.ws-logos__img[src*="tecis"] {
  margin: 0 14px;
}
.ws-logos__img[src*="ehg"] {
  height: 38px;
  margin: 0 12px;
}
@keyframes ws-logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ws-logos__track { animation: none; }
}

/* ==========================================================================
   KONTEXT — Editorial Spread
   ========================================================================== */
.ws-kontext {
  background: #fff;
  padding: var(--ws-section-y) 0;
}
.ws-kontext__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}
.ws-kontext__intro .ws-h2 {
  margin-bottom: 28px;
}
.ws-kontext__points {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ws-kontext__points li {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  color: var(--ws-text);
  line-height: 1.55;
  font-style: normal;
}
.ws-kontext__points li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 22px; height: 1px;
  background: var(--ws-secondary);
}

.ws-deliver {
  background: var(--ws-cream);
  border: 1px solid var(--ws-border);
  padding: clamp(28px, 3vw, 48px);
  border-radius: var(--ws-radius-lg);
  position: relative;
}
.ws-deliver::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 56px; height: 56px;
  border-top: 1px solid var(--ws-secondary);
  border-left: 1px solid var(--ws-secondary);
  border-radius: var(--ws-radius-lg) 0 0 0;
  pointer-events: none;
}
.ws-deliver__h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ws-primary-dark);
  margin: 0 0 5px;
  line-height: 1.4;
}
.ws-deliver__sub {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
  margin: 0 0 24px;
}
.ws-deliver__list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ws-deliver__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 18px;
  align-items: start;
}
.ws-deliver__num {
  font-family: var(--ws-font-display);
  font-size: 22px;
  font-style: italic;
  color: var(--ws-secondary);
  line-height: 1.1;
  min-width: 40px;
  grid-row: 1 / 3;
}
.ws-deliver__list dt {
  display: block;
  font-weight: 600;
  color: var(--ws-text);
  margin-bottom: 4px;
}
.ws-deliver__list dd {
  display: block;
  font-size: 15px;
  color: var(--ws-text-muted);
  line-height: 1.55;
  margin: 0;
}
.ws-deliver__abgrenz {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--ws-border);
  font-size: 14px;
  font-style: italic;
  color: var(--ws-text-muted);
  line-height: 1.6;
}

/* ==========================================================================
   PILLARS — Sticky Index + Scrollendes Detail
   ========================================================================== */
.ws-pillars {
  background: var(--ws-primary-tint);
  padding: var(--ws-section-y) 0;
}
.ws-pillars__layout {
  display: grid;
  grid-template-columns: minmax(260px, 32%) 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.ws-pillars__index {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ws-pillars__index li {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--ws-border);
  cursor: default;
  transition: opacity 280ms var(--ws-ease);
  opacity: 0.40;
}
.ws-pillars__index li:last-child { border-bottom: 1px solid var(--ws-border); }
.ws-pillars__index li.ws-is-active { opacity: 1; }
.ws-pillars__num {
  font-family: var(--ws-font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ws-secondary);
}
.ws-pillars__title {
  font-family: var(--ws-font-display);
  font-size: clamp(18px, 1.4vw + 0.5rem, 24px);
  color: var(--ws-text);
  letter-spacing: -0.01em;
}

.ws-pillars__detail {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 80px);
}
.ws-pillar {
  border-top: 1px solid var(--ws-border);
  padding-top: 32px;
}
.ws-pillar:first-child { border-top: 0; padding-top: 0; }
.ws-pillar__num {
  font-family: var(--ws-font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ws-secondary);
  margin: 0 0 12px;
}
.ws-pillar__h3 {
  font-family: var(--ws-font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2vw + 0.6rem, 2.4rem);
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  color: var(--ws-text);
}
.ws-pillar__lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ws-text);
  max-width: 60ch;
  margin: 0 0 28px;
}
/* Zwei aufeinanderfolgende Lead-Absätze: engerer Abstand (echter Absatz, nicht Section-Lücke) */
.ws-pillar__lead + .ws-pillar__lead {
  margin-top: -14px;
}
.ws-pillar__img {
  width: 100%;
  max-width: 540px;
  border-radius: var(--ws-radius);
  margin: 0 0 28px;
  background: #fff;
  padding: 8px;
  box-shadow: var(--ws-shadow-sm);
}

.ws-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ws-tags li {
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--ws-border);
  border-radius: 999px;
  color: var(--ws-text);
  letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(31, 42, 48, 0.04);
  transition: background-color 240ms var(--ws-ease),
              border-color 240ms var(--ws-ease),
              box-shadow 240ms var(--ws-ease),
              transform 240ms var(--ws-ease);
}
.ws-tags li:hover {
  background: #fff;
  border-color: var(--ws-primary);
  box-shadow: 0 4px 12px rgba(31, 42, 48, 0.08);
  transform: translateY(-1px);
}

/* ==========================================================================
   STRAT-WHEEL — interaktives 7-Phasen-Strategie-Wheel (Pillar 1)
   Pizza-Slice-Geometrie (klassisch), Cream/Apricot-Farbverlauf, dunkles
   Center "STRATEGIE", Number-Badges, Outer-Ring "Operatives Geschäft".
   Funktional analog ws-oe-donut: Hover/Click → Center wechselt zu
   Phase-Detail, Klick toggelt persistent.
   ========================================================================== */
.ws-strat-wheel {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  margin: 24px 0 28px;
}
.ws-strat-wheel__stage {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1;
  margin: 0 auto;
}
.ws-strat-wheel__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ws-strat-wheel__outer-ring {
  opacity: 0.55;
}
.ws-strat-wheel__op-arrow {
  opacity: 0.55;
}
.ws-strat-wheel__slice {
  fill: url(#ws-strat-slice-grad);
  stroke: #fff;
  stroke-width: 2.5;
  cursor: pointer;
  transition: filter 220ms var(--ws-ease);
}
.ws-strat-wheel__slice.ws-is-active {
  stroke: var(--ws-secondary);
  stroke-width: 3;
  paint-order: stroke fill;
  filter: brightness(1.06);
}
.ws-strat-wheel__slice:focus { outline: none; }
.ws-strat-wheel__slice:focus-visible {
  stroke: var(--ws-secondary);
  stroke-width: 3;
}

/* Center-Overlay (HTML über SVG-Center-Circle) */
.ws-strat-wheel__center {
  position: absolute;
  top: 50%; left: 50%;
  width: 26%;
  height: 26%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.ws-strat-wheel__center-default {
  font-family: var(--ws-font-display);
  font-size: clamp(15px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  transition: opacity 220ms var(--ws-ease), visibility 0s linear 220ms;
}
.ws-strat-wheel__center-active {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ws-ease), visibility 0s linear 220ms;
}
.ws-strat-wheel__center.ws-is-active .ws-strat-wheel__center-default {
  opacity: 0;
  visibility: hidden;
}
.ws-strat-wheel__center.ws-is-active .ws-strat-wheel__center-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms var(--ws-ease), visibility 0s linear 0s;
}
.ws-strat-wheel__center-num {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ws-secondary);
  margin: 0;
  font-weight: 700;
}
.ws-strat-wheel__center-name {
  font-family: var(--ws-font-display);
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 600;
  line-height: 1.15;
  margin: 4px 0 6px;
  letter-spacing: -0.005em;
}
.ws-strat-wheel__center-items {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(10px, 1.05vw, 12px);
  line-height: 1.35;
  opacity: 0.92;
  text-align: center;
}
.ws-strat-wheel__center-items li { margin: 1.5px 0; }

/* Slice-Labels (Phase-Name in der Slice, per JS positioniert) */
.ws-strat-wheel__labels {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.ws-strat-wheel__labels li {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  width: 22%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-strat-wheel__label {
  font-family: var(--ws-font-display);
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ws-text);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  line-height: 1.15;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
  transition: transform 220ms var(--ws-ease);
  white-space: pre-line;
}
.ws-strat-wheel__label:hover,
.ws-strat-wheel__label.ws-is-active {
  transform: scale(1.06);
}
.ws-strat-wheel__label:focus { outline: none; }
.ws-strat-wheel__label:focus-visible {
  outline: 2px solid var(--ws-secondary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Number-Badges am Außenrand jeder Slice */
.ws-strat-wheel__badges {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 2;
}
.ws-strat-wheel__badges li {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ws-secondary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(252, 141, 41, 0.40);
  border: 2px solid #fff;
}

/* "Operatives Geschäft"-Labels: oben am Outer-Ring + links/rechts auf Pfeil-Höhe.
   Background überdeckt die Linie an der Stelle (analog wie das obere Label
   die Outer-Ring-Linie überdeckt). */
.ws-strat-wheel__op,
.ws-strat-wheel__op-left,
.ws-strat-wheel__op-right {
  position: absolute;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(31, 42, 48, 0.45);
  margin: 0;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  background: var(--ws-cream);
  padding: 0 8px;
}
.ws-strat-wheel__op {
  top: 1.5%;
  left: 50%;
  transform: translateX(-50%);
}
.ws-strat-wheel__op-left {
  top: 95%;
  left: 19%;
  transform: translate(-50%, -50%);
}
.ws-strat-wheel__op-right {
  top: 95%;
  left: 81%;
  transform: translate(-50%, -50%);
}

/* Phasen-Liste unter dem Wheel (Akkordeon) */
.ws-strat-wheel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
}
.ws-strat-wheel__list-item {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--ws-border);
  border-radius: 10px;
  transition: border-color 220ms var(--ws-ease), background-color 220ms var(--ws-ease);
}
.ws-strat-wheel__list-item:hover {
  border-color: var(--ws-primary);
  background: #fff;
}
.ws-strat-wheel__list-item details summary {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}
.ws-strat-wheel__list-item details summary::-webkit-details-marker { display: none; }
.ws-strat-wheel__list-num {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ws-secondary);
  font-weight: 700;
  flex-shrink: 0;
}
.ws-strat-wheel__list-name {
  font-weight: 500;
  color: var(--ws-text);
  line-height: 1.3;
}
.ws-strat-wheel__list-item details ul {
  list-style: none;
  margin: 0;
  padding: 0 14px 11px 36px;
  font-size: 12.5px;
  color: var(--ws-text);
  line-height: 1.45;
  opacity: 0.78;
}
.ws-strat-wheel__list-item details ul li {
  position: relative;
  padding: 2px 0;
}
.ws-strat-wheel__list-item details ul li::before {
  content: '·';
  position: absolute;
  left: -10px;
  color: var(--ws-secondary);
  font-weight: 700;
}

.ws-strat-wheel__hint {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(31, 42, 48, 0.50);
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ws-strat-wheel__slice,
  .ws-strat-wheel__label,
  .ws-strat-wheel__center-default,
  .ws-strat-wheel__center-active { transition: none; }
}

@media (max-width: 760px) {
  /* Mobile-Strat-Wheel-Overhaul (Bündel 2): User-Vorgabe „Visualisierungen
     mobil sichtbar+funktional". Stage volle Container-Breite, Slice-Labels
     raus (Center-Reveal zeigt Phase-Detail per Slice-Tap), Schriften lesbar.
     Touch bei 320px Stage: Slice-Tiefe ~83px, Mid-Sehne ~46px → ≥44 ✓. */
  .ws-strat-wheel__stage { max-width: 100%; }
  .ws-strat-wheel__labels { display: none; }
  .ws-strat-wheel__badges li {
    width: 26px;
    height: 26px;
    font-size: 11px;
    border-width: 1.5px;
  }
  .ws-strat-wheel__center { width: 32%; height: 32%; }
  .ws-strat-wheel__center-default { font-size: clamp(16px, 4.5vw, 20px); }
  .ws-strat-wheel__center-name { font-size: clamp(14px, 4vw, 17px); }
  .ws-strat-wheel__center-items { font-size: 13px; line-height: 1.4; }
  .ws-strat-wheel__center-num { font-size: 11px; }
  .ws-strat-wheel__op,
  .ws-strat-wheel__op-left,
  .ws-strat-wheel__op-right { font-size: 11px; padding: 0 6px; }
  .ws-strat-wheel__hint {
    font-size: 12px;
    margin-top: 12px;
  }
  .ws-strat-wheel__list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FORMATS — Sticky Index + Scrollendes Detail
   ========================================================================== */
.ws-formats {
  background: var(--ws-cream);
  padding: var(--ws-section-y) 0;
}
.ws-formats__layout {
  display: grid;
  grid-template-columns: minmax(260px, 32%) 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.ws-formats__index {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ws-formats__index li {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: baseline;
  gap: 4px 12px;
  padding: 22px 0;
  border-top: 1px solid var(--ws-border);
  cursor: default;
  transition: opacity 280ms var(--ws-ease);
  opacity: 0.4;
}
.ws-formats__index li:last-child { border-bottom: 1px solid var(--ws-border); }
.ws-formats__index li.ws-is-active { opacity: 1; }
.ws-formats__num {
  font-family: var(--ws-font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ws-secondary);
  grid-row: 1 / span 2;
}
.ws-formats__title {
  font-family: var(--ws-font-display);
  font-size: clamp(18px, 1.4vw + 0.5rem, 24px);
  color: var(--ws-text);
  letter-spacing: -0.01em;
}
.ws-formats__dur {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
}

.ws-formats__detail {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 80px);
}
.ws-format {
  border-top: 1px solid var(--ws-border);
  padding-top: 32px;
}
.ws-format:first-child { border-top: 0; padding-top: 0; }
.ws-format__num {
  font-family: var(--ws-font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ws-secondary);
  margin: 0 0 8px;
}
.ws-format__h3 {
  font-family: var(--ws-font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2vw + 0.6rem, 2.4rem);
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--ws-text);
}
.ws-format__dur {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
  margin: 0 0 20px;
}
.ws-format__wofuer {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ws-text);
  max-width: 60ch;
  margin: 0 0 28px;
}
.ws-format__steps {
  background: #fff;
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg);
  padding: 22px 26px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.ws-format__steps::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 2px;
  background: var(--ws-secondary);
}
.ws-format__steps-lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
  margin: 0 0 14px;
}
.ws-format__steps ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  counter-reset: ws-step;
}
.ws-format__steps ol li {
  counter-increment: ws-step;
  font-family: var(--ws-font-display);
  font-size: 17px;
  color: var(--ws-text);
  display: inline-flex;
  align-items: center;
}
.ws-format__steps ol li::before {
  content: counter(ws-step, decimal-leading-zero);
  font-style: italic;
  font-size: 13px;
  color: var(--ws-secondary);
  margin-right: 8px;
}
.ws-format__steps ol li:not(:last-child)::after {
  content: '→';
  color: var(--ws-text-muted);
  margin-left: 14px;
  font-family: var(--ws-font-body);
  font-size: 14px;
}
.ws-format__output {
  font-size: 15px;
  color: var(--ws-text-muted);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ws-format__output strong {
  font-family: var(--ws-font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-primary-dark);
}

/* ==========================================================================
   LEGO® — Full-Bleed Statement
   ========================================================================== */
.ws-lego {
  background: var(--ws-primary-dark);
  color: var(--ws-text-light);
  padding: var(--ws-section-y) 0;
  position: relative;
  overflow: hidden;
}
.ws-lego::before {
  content: '';
  position: absolute;
  top: -160px;
  right: -160px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(252, 141, 41, 0.16) 0%, transparent 60%);
  pointer-events: none;
}
.ws-lego__layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  position: relative;
}
.ws-lego__text .ws-h2 {
  margin: 0 0 24px;
  font-size: clamp(2rem, 3.4vw + 0.6rem, 3.6rem);
}
.ws-lego__text sup {
  font-size: 0.5em;
  vertical-align: super;
  font-style: normal;
  color: var(--ws-secondary);
}
.ws-lego__lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ws-text-light);
  margin: 0 0 18px;
  max-width: 56ch;
}
.ws-lego__ideal {
  font-size: 15px;
  color: var(--ws-text-light-muted);
  margin: 0 0 32px;
  max-width: 56ch;
}
.ws-lego__ideal strong {
  color: var(--ws-text-light);
  font-weight: 500;
}
.ws-lego__ideal-head {
  margin: 0 0 6px;
}
.ws-lego__ideal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ws-lego__ideal-list li {
  position: relative;
  padding-left: 16px;
  margin: 0 0 4px;
}
.ws-lego__ideal-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--ws-text-light-muted);
}
.ws-lego__visual {
  position: relative;
  margin: 0;
  border-radius: var(--ws-radius-lg);
  overflow: hidden;
  box-shadow: var(--ws-shadow-lg);
  border: 1px solid var(--ws-border-light);
}
.ws-lego__visual::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ws-secondary), transparent);
  z-index: 2;
}
.ws-lego__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 6s var(--ws-ease);
}
.ws-lego__visual:hover .ws-lego__img {
  transform: scale(1.04);
}
.ws-lego__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 32px 28px 20px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-text-light);
  background: linear-gradient(180deg, transparent, rgba(15, 24, 28, 0.85));
}

/* ==========================================================================
   PROCESS — Riesen Display-Numbers
   ========================================================================== */
.ws-process {
  background: #fff;
  padding: var(--ws-section-y) 0;
}
.ws-process__list {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
}
.ws-step {
  display: grid;
  grid-template-columns: 64px minmax(80px, 14%) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--ws-border);
}
.ws-step:first-child { border-top: 0; }
.ws-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ws-secondary);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(252, 141, 41, 0.18);
  transition: transform 320ms var(--ws-ease);
}
.ws-step:hover .ws-step__icon {
  transform: translateY(-2px) scale(1.04);
}
.ws-step__num {
  font-family: var(--ws-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1;
  color: var(--ws-primary);
  margin: 0;
  letter-spacing: -0.04em;
  font-feature-settings: 'lnum';
}
.ws-step__body {
  max-width: 60ch;
}
.ws-step__h3 {
  font-family: var(--ws-font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.8vw + 0.5rem, 2rem);
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ws-text);
}
.ws-step__desc {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ws-text-muted);
  margin: 0;
}

.ws-process__cta {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   ABOUT — Editorial Portrait + Bio
   ========================================================================== */
.ws-about {
  background: var(--ws-cream);
  padding: var(--ws-section-y) 0;
}
.ws-about__layout {
  display: grid;
  grid-template-columns: minmax(280px, 38%) 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.ws-about__portrait {
  margin: 0;
  position: sticky;
  top: 96px;
}
.ws-about__portrait-img {
  width: 100%;
  height: auto;
  border-radius: var(--ws-radius);
  box-shadow: var(--ws-shadow-md);
  background: var(--ws-cream-deep);
}
.ws-about__caption {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
  text-align: center;
}
/* Info-PDF-Button unter dem Portrait — zentriert, eigener Top-Abstand zur Caption. */
.ws-about__pdf-row {
  margin: 22px 0 0;
  text-align: center;
}
.ws-about__text .ws-h2 {
  margin-bottom: 28px;
}
.ws-about__text .ws-bodycopy {
  margin-bottom: 32px;
}
.ws-about__seals {
  padding: 24px 0 28px;
  border-top: 1px solid var(--ws-border);
  border-bottom: 1px solid var(--ws-border);
  margin-bottom: 32px;
}
.ws-about__seals-lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-primary-dark);
  margin: 0 0 18px;
}
.ws-about__seals-row {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  flex-wrap: wrap;
}
.ws-about__seal {
  width: 110px;
  height: 110px;
  object-fit: contain;
  filter: saturate(0.95);
  transition: transform 320ms var(--ws-ease);
}
.ws-about__seal:hover {
  transform: translateY(-3px);
}
.ws-about__seal-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.ws-about__seal-cap {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
  text-align: center;
  max-width: 130px;
  line-height: 1.4;
}
.ws-about__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  margin-bottom: 40px;
}
.ws-about__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-about__stat-v {
  font-family: var(--ws-font-display);
  font-size: clamp(1.6rem, 2vw + 0.5rem, 2.4rem);
  font-weight: 400;
  color: var(--ws-text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.ws-about__stat-l {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
}

/* Accordion (shared) */
.ws-accordion { display: flex; flex-direction: column; }
.ws-acc-item {
  border-top: 1px solid var(--ws-border);
}
.ws-acc-item:last-child { border-bottom: 1px solid var(--ws-border); }
.ws-acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  text-align: left;
  font-family: var(--ws-font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ws-text);
  transition: color 220ms var(--ws-ease);
}
.ws-acc-trigger:hover { color: var(--ws-primary-dark); }
.ws-acc-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.ws-acc-icon::before,
.ws-acc-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 280ms var(--ws-ease);
}
.ws-acc-icon::before {
  top: 8px; left: 0; width: 18px; height: 1px;
}
.ws-acc-icon::after {
  left: 8px; top: 0; width: 1px; height: 18px;
}
.ws-acc-trigger[aria-expanded="true"] .ws-acc-icon::after {
  transform: scaleY(0);
}
.ws-acc-content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 360ms var(--ws-ease),
              opacity 320ms var(--ws-ease),
              padding 360ms var(--ws-ease);
  padding: 0;
}
.ws-acc-trigger[aria-expanded="true"] + .ws-acc-content {
  max-height: 720px;
  opacity: 1;
  padding-bottom: 22px;
}
.ws-acc-content p,
.ws-acc-content .ws-acc-list {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ws-text-muted);
  margin: 0 0 16px;
}
.ws-acc-content p:last-child,
.ws-acc-content .ws-acc-list:last-child { margin-bottom: 0; }
.ws-acc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ws-acc-list li {
  padding-left: 22px;
  position: relative;
}
.ws-acc-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 14px; height: 1px;
  background: var(--ws-secondary);
}

/* ==========================================================================
   VOICES — Pull-Quotes + Videos auf Dark
   ========================================================================== */
.ws-voices {
  background: var(--ws-primary-deep);
  color: var(--ws-text-light);
  padding: var(--ws-section-y) 0;
  position: relative;
  overflow: hidden;
}
.ws-voices::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -200px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 174, 189, 0.12) 0%, transparent 70%);
  transform: translateY(-50%);
  pointer-events: none;
}
.ws-voices__quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: clamp(56px, 7vw, 96px);
  position: relative;
}
.ws-quote {
  margin: 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--ws-border-light);
  position: relative;
  display: flex;
  flex-direction: column;
}
.ws-quote::before {
  content: '“';
  position: absolute;
  top: -22px; left: -8px;
  font-family: var(--ws-font-display);
  font-size: 56px;
  color: var(--ws-secondary);
  line-height: 1;
}
.ws-quote__text {
  font-family: var(--ws-font-display);
  font-size: clamp(18px, 1.4vw + 0.5rem, 22px);
  line-height: 1.45;
  color: var(--ws-text-light);
  margin: 0 0 22px;
  font-style: normal;
}
.ws-quote__text em {
  font-style: italic;
  color: var(--ws-text-light);
}
.ws-quote__author {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--ws-text-light-muted);
  margin-top: auto;
}
.ws-quote__author span:first-child {
  color: var(--ws-text-light);
  font-weight: 500;
}
.ws-quote__role {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ws-voices__videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(40px, 5vw, 64px);
  position: relative;
}
.ws-video {
  background: var(--ws-primary-dark);
  border: 1px solid var(--ws-border-light);
  border-radius: var(--ws-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ws-video__el {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}
.ws-video__lbl {
  padding: 14px 18px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-text-light);
}

.ws-voices__google {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid var(--ws-border-light);
  position: relative;
  text-decoration: none;
  cursor: pointer;
}
/* Kein Lift/Verschieben beim Hover — Block bleibt an Ort und Stelle, nur dezentes Aufhellen. */
.ws-voices__google:hover .ws-voices__google-cnt,
.ws-voices__google:focus-visible .ws-voices__google-cnt {
  color: var(--ws-text-light);
}
.ws-voices__google-score {
  font-family: var(--ws-font-display);
  font-size: clamp(2rem, 3vw, 3rem);
  margin: 0;
  color: var(--ws-text-light);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.ws-voices__google-score strong {
  color: var(--ws-secondary);
  font-weight: 400;
  font-style: italic;
  margin-right: 4px;
}
.ws-voices__google-stars {
  color: #FFC400;
  font-size: 0.85em;
  letter-spacing: 2px;
  filter: drop-shadow(0 0 6px rgba(255, 196, 0, 0.4));
}
.ws-voices__google-cnt {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-text-light-muted);
  margin: 0;
}

/* ==========================================================================
   GOOGLE-REVIEWS LIVE — Block in Voices-Section
   ========================================================================== */
.ws-greviews-block {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(28px, 3.5vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.ws-greviews-block__head {
  text-align: center;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.ws-greviews-block__h {
  font-family: var(--ws-font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.8vw + 0.5rem, 1.9rem);
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 8px 0;
}
.ws-greviews-block__sub {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
/* Endlos-Laufband (Marquee). Viewport = overflow hidden, Edge-Fade per Mask (nur horizontal). */
.ws-greviews {
  overflow: hidden;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.ws-greviews__track {
  display: flex;
  align-items: stretch; /* Karten gleiche Höhe (oben + unten bündig); lange Texte sind per line-clamp begrenzt, daher moderat */
  width: max-content;
  animation: ws-greviews-marquee 70s linear infinite;
  will-change: transform;
}
/* Pause beim Drüberfahren / Tastatur-Fokus auf einer Karte */
.ws-greviews:hover .ws-greviews__track,
.ws-greviews:focus-within .ws-greviews__track {
  animation-play-state: paused;
}
/* translateX -50% = exakt ein Karten-Set (Set einmal geklont) → nahtloser Loop.
   margin-right statt gap, damit -50% den Trenner mit einschließt (kein Ruckler). */
@keyframes ws-greviews-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ws-greview {
  flex: 0 0 clamp(280px, 30vw, 360px);
  margin-right: clamp(18px, 2vw, 28px);
  background: var(--ws-cream);
  border-radius: var(--ws-radius-lg);
  padding: clamp(22px, 2.4vw, 28px);
  border-top: 2px solid var(--ws-primary-deep);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: transform 320ms var(--ws-ease),
              box-shadow 320ms var(--ws-ease);
}
.ws-greview:hover {
  transform: translateY(-3px);
  box-shadow: var(--ws-shadow-md);
}
@media (prefers-reduced-motion: reduce) {
  .ws-greviews {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .ws-greviews__track { animation: none; }
}
.ws-greview__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.ws-greview__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ws-primary-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.ws-greview__meta {
  flex: 1;
  min-width: 0;
}
.ws-greview__name {
  margin: 0 0 2px 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ws-text);
  line-height: 1.25;
}
.ws-greview__rating {
  margin: 0;
  font-size: 12px;
  color: var(--ws-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.ws-greview__stars {
  color: var(--ws-secondary);
  letter-spacing: 0.04em;
  font-size: 14px;
  line-height: 1;
}
.ws-greview__time {
  font-size: 12px;
  color: var(--ws-text-muted);
}
.ws-greview__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ws-text);
  /* Lange Reviews auf 8 Zeilen begrenzen → höchste Karte bleibt moderat,
     damit die einheitliche Höhe (stretch) nicht riesig wird. */
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ws-greviews__source {
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
}
.ws-greviews__google-icon {
  flex: 0 0 auto;
  vertical-align: middle;
}
.ws-greviews__source a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 200ms var(--ws-ease);
}
.ws-greviews__source a:hover {
  color: var(--ws-secondary);
}

/* ==========================================================================
   CASES — Horizontal Scroll-Snap
   ========================================================================== */
.ws-cases {
  background: #fff;
  padding: var(--ws-section-y) 0 calc(var(--ws-section-y) * 0.6);
  overflow: hidden;
}
.ws-cases .ws-section-head {
  margin-bottom: clamp(32px, 4vw, 56px);
}
.ws-cases__rail {
  display: flex;
  gap: clamp(20px, 2.5vw, 32px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(var(--ws-pad-x), calc((100vw - var(--ws-container)) / 2 + var(--ws-pad-x)));
  padding: 8px max(var(--ws-pad-x), calc((100vw - var(--ws-container)) / 2 + var(--ws-pad-x))) 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--ws-border-strong) transparent;
}
.ws-cases__rail::-webkit-scrollbar { height: 6px; }
.ws-cases__rail::-webkit-scrollbar-track { background: transparent; }
.ws-cases__rail::-webkit-scrollbar-thumb { background: var(--ws-border-strong); border-radius: 3px; }

/* Desktop: kein horizontales Scrollen — beide Fälle als 2-Spalten-Grid nebeneinander.
   Mobile (≤760px) behält den horizontalen Scroll-Snap-Rail. */
@media (min-width: 761px) {
  .ws-cases__rail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
    max-width: var(--ws-container);
    margin: 0 auto;
    padding: 8px var(--ws-pad-x) 8px;
  }
  /* Scroll-Hinweis nur mobil zeigen — auf Desktop gibt es keinen Scroll. */
  .ws-cases__hint { display: none; }
}

.ws-case {
  flex: 0 0 min(82vw, 540px);
  scroll-snap-align: start;
  background: var(--ws-cream);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg);
  padding: clamp(28px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  transition: transform 320ms var(--ws-ease),
              box-shadow 320ms var(--ws-ease);
}
.ws-case:hover {
  transform: translateY(-4px);
  box-shadow: var(--ws-shadow-md);
}
.ws-case::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 56px; height: 56px;
  border-top: 1px solid var(--ws-secondary);
  border-left: 1px solid var(--ws-secondary);
  border-radius: var(--ws-radius-lg) 0 0 0;
  pointer-events: none;
}
.ws-case__lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-secondary);
  margin: 0;
}
.ws-case__h3 {
  font-family: var(--ws-font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.8vw + 0.5rem, 2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ws-text);
}
.ws-case__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ws-border);
  align-items: baseline;
}
.ws-case__row-lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
  margin: 0;
}
.ws-case__row-body {
  margin: 0;
  font-size: 15px;
  color: var(--ws-text);
  line-height: 1.5;
  font-style: italic;
}
.ws-case__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ws-case__list li {
  position: relative;
  padding-left: 18px;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ws-text);
  font-style: italic;
}
.ws-case__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 1px;
  background: var(--ws-secondary);
}
.ws-cases__edge {
  flex: 0 0 var(--ws-pad-x);
}
.ws-cases__hint {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
  text-align: right;
}

/* ==========================================================================
   FAQ — 2-spaltig Editorial
   ========================================================================== */
.ws-faq {
  background: var(--ws-cream);
  padding: var(--ws-section-y) 0;
}
.ws-faq__layout {
  display: grid;
  grid-template-columns: minmax(260px, 36%) 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.ws-faq__head {
  position: sticky;
  top: 96px;
}
.ws-faq__head .ws-h2 {
  margin-bottom: 18px;
}
.ws-faq__intro {
  font-size: 15px;
  color: var(--ws-text-muted);
  line-height: 1.55;
  margin: 0 0 24px;
}

/* ==========================================================================
   CONTACT CTA — Cinematic Close
   ========================================================================== */
.ws-contact {
  background: var(--ws-primary-deep);
  color: var(--ws-text-light);
  padding: clamp(96px, 12vw, 168px) 0;
  position: relative;
  overflow: hidden;
}
.ws-contact::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--ws-secondary) 14%,
    transparent 50%);
  opacity: 0.5;
  pointer-events: none;
}
.ws-contact__inner {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ws-contact__inner .ws-eyebrow {
  margin-bottom: 24px;
  justify-content: center;
}
.ws-contact .ws-h2 {
  font-size: clamp(2rem, 3.4vw + 0.6rem, 3.6rem);
  margin-bottom: 24px;
}
.ws-contact__sub {
  font-size: 17px;
  color: var(--ws-text-light-muted);
  margin: 0 0 40px;
}
.ws-contact__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 32px;
}
.ws-contact__mail {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ws-text-light-muted);
  margin: 0;
}
.ws-contact__mail a {
  color: var(--ws-text-light);
  border-bottom: 1px solid var(--ws-border-light);
}
.ws-contact__mail a:hover { border-bottom-color: var(--ws-secondary); }

/* ==========================================================================
   FOOTER — hell, Logo + Claim + Legal
   ========================================================================== */
.ws-footer {
  background: var(--ws-cream);
  color: var(--ws-text);
  padding: clamp(64px, 7vw, 96px) 0 32px;
  border-top: 1px solid var(--ws-border);
}
.ws-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--ws-border);
}
.ws-footer__brand { display: inline-flex; }
.ws-footer__logo { width: auto; height: 52px; }
.ws-footer__claim {
  font-family: var(--ws-font-display);
  font-size: clamp(17px, 1.3vw + 0.5rem, 22px);
  line-height: 1.4;
  color: var(--ws-text);
  margin: 0;
  max-width: 56ch;
  text-align: right;
  flex: 1 1 320px;
}
.ws-footer__claim em {
  font-style: italic;
  color: var(--ws-secondary);
}
.ws-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(40px, 5vw, 64px) 0;
}
.ws-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ws-footer__lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
  margin: 0 0 10px;
}
.ws-footer__col a,
.ws-footer__col span {
  font-size: 14px;
  color: var(--ws-text);
  transition: color 220ms var(--ws-ease);
}
.ws-footer__col a:hover { color: var(--ws-secondary); }
.ws-footer__mail {
  user-select: text;
  cursor: text;
}
.ws-footer__note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ws-text-muted);
  margin: 0;
}
/* Fördermittel-Logos im Footer — kompakte Reihe, ersetzt den vorherigen Note-Text.
   Logos liegen ehemals in der About-Section unter ws-about__seals (entfernt). */
.ws-footer__seals {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}
.ws-footer__seals li {
  min-width: 0;
  flex: 0 1 auto;
}
.ws-footer__seals img {
  height: 40px;
  width: auto;
  display: block;
  max-width: 100%;
  object-fit: contain;
}
.ws-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  border-top: 1px solid var(--ws-border);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--ws-text-muted);
  margin: 0;
  gap: 14px;
  flex-wrap: wrap;
}
.ws-footer__credit {
  font-size: 11.5px;
  opacity: 0.8;
}
.ws-footer__credit a {
  color: var(--ws-text-muted);
  text-decoration: none;
  transition: color 220ms var(--ws-ease);
}
.ws-footer__credit a:hover,
.ws-footer__credit a:focus-visible {
  color: var(--ws-secondary);
}

/* ==========================================================================
   ANTREIBERTEST — Service-Tool (Pflicht-Verlinkung)
   ========================================================================== */
.ws-tool {
  background: var(--ws-cream);
  padding: var(--ws-section-y) 0;
  position: relative;
}
.ws-tool__layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.ws-tool__text .ws-h2 {
  margin: 0 0 24px;
}
.ws-tool__lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ws-text);
  margin: 0 0 18px;
  max-width: 56ch;
}
.ws-tool__hint {
  font-size: 15px;
  font-style: italic;
  color: var(--ws-text-muted);
  margin: 0;
  max-width: 56ch;
}
.ws-tool__panel {
  background: #fff;
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg);
  padding: clamp(28px, 3vw, 44px);
  position: relative;
  overflow: hidden;
}
.ws-tool__panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 2px;
  background: var(--ws-secondary);
}
.ws-tool__panel-lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-primary-dark);
  margin: 0 0 18px;
}
.ws-tool__chips {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 28px;
}
.ws-tool__chips li {
  font-family: var(--ws-font-display);
  font-size: clamp(18px, 1.6vw + 0.4rem, 24px);
  line-height: 1.2;
  color: var(--ws-text);
  padding: 12px 0;
  border-top: 1px solid var(--ws-border);
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-style: italic;
}
.ws-tool__chips li:last-child {
  border-bottom: 1px solid var(--ws-border);
}
.ws-tool__chips li::before {
  content: '·';
  color: var(--ws-secondary);
  font-style: normal;
  font-size: 1.2em;
}

/* ==========================================================================
   GEO REACH — Standort + Serviceregionen (Pflicht aus Briefing)
   ========================================================================== */
.ws-geo {
  background: var(--ws-cream-deep);
  padding: var(--ws-section-y) 0;
  position: relative;
}
.ws-geo__layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.ws-geo__text .ws-h2 {
  margin: 0 0 28px;
}
.ws-geo__lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ws-text-muted);
  margin: 0 0 36px;
  max-width: 56ch;
}
.ws-geo__regions {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ws-geo__regions li {
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 14px;
  padding: 18px 0;
  border-top: 1px solid var(--ws-border);
}
.ws-geo__regions li:last-child { border-bottom: 1px solid var(--ws-border); }
.ws-geo__regions li strong {
  font-family: var(--ws-font-display);
  font-size: clamp(18px, 1.4vw + 0.4rem, 22px);
  font-weight: 400;
  color: var(--ws-text);
  letter-spacing: -0.01em;
}
.ws-geo__regions li > span:last-child {
  font-size: 14px;
  color: var(--ws-text-muted);
  grid-column: 2;
}
.ws-geo__pin {
  position: relative;
  width: 14px;
  height: 14px;
  margin-top: 8px;
  grid-row: 1 / span 2;
  align-self: start;
}
.ws-geo__pin::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ws-secondary);
  border-radius: 50%;
}
.ws-geo__pin::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid var(--ws-secondary);
  border-radius: 50%;
  opacity: 0.4;
}

.ws-geo__cities {
  background: #fff;
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg);
  padding: clamp(28px, 3vw, 44px);
  position: relative;
  overflow: hidden;
}
.ws-geo__cities::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 56px; height: 56px;
  border-top: 1px solid var(--ws-secondary);
  border-left: 1px solid var(--ws-secondary);
  border-radius: var(--ws-radius-lg) 0 0 0;
  pointer-events: none;
}
.ws-geo__cities-lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-primary-dark);
  margin: 0 0 22px;
}
.ws-geo__city-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin: 0 0 24px;
}
.ws-geo__city-list li {
  font-family: var(--ws-font-display);
  font-size: clamp(17px, 1.3vw + 0.4rem, 21px);
  line-height: 1.3;
  color: var(--ws-text);
  padding: 8px 0;
  border-bottom: 1px solid var(--ws-border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.ws-geo__city-list li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--ws-secondary);
  border-radius: 50%;
  flex: 0 0 6px;
}
.ws-geo__cities-hint {
  font-size: 13px;
  font-style: italic;
  color: var(--ws-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ==========================================================================
   UNTERNEHMERCAMP — Banner-Block (Pflicht-Verlinkung)
   ========================================================================== */
.ws-camp {
  background: linear-gradient(135deg, #2A4853 0%, #1E3540 100%);
  color: var(--ws-text-light);
  padding: clamp(36px, 5vw, 56px) 0;
  position: relative;
  overflow: hidden;
}
.ws-camp::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ws-secondary) 0%, transparent 38%);
}
.ws-camp__inner {
  display: grid;
  grid-template-columns: clamp(380px, 38vw, 520px) 1fr auto;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}
.ws-camp__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--ws-radius);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.ws-camp__img,
.ws-camp__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ws-camp__text .ws-eyebrow {
  color: var(--ws-text-light-muted);
  margin-bottom: 10px;
}
.ws-camp__h2 {
  font-family: var(--ws-font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw + 0.4rem, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ws-text-light);
  margin: 0 0 8px;
}
.ws-camp__h2 em {
  font-style: italic;
  color: var(--ws-secondary);
  display: block;
}
.ws-camp__lead {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ws-text-light-muted);
  margin: 0;
  max-width: 60ch;
}
.ws-camp__cta {
  white-space: nowrap;
}
/* Camp-Button in eigener Farbgebung — Sekundär statt Cream */
.ws-btn--camp {
  background: var(--ws-secondary);
  color: #fff;
  border: 1px solid var(--ws-secondary);
}
.ws-btn--camp:hover {
  background: #DE7C24;
  color: #fff;
  border-color: #DE7C24;
}

/* ==========================================================================
   GRAPH — Interaktive 3D-Tilt-Diagramme (Pillar 01 + 02)
   ========================================================================== */
.ws-graph {
  width: 100%;
  max-width: 640px;
  margin: 0 0 32px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  /* --r ist der Radius des Knoten-Kreises in Pixeln. Wird auch in keyframe + node transform genutzt. */
  --r: 200px;
}
.ws-graph__inner {
  position: relative;
  width: 100%;
  max-width: 560px;
  /* Höhe = 2*Radius + Knoten-Padding (~140px für 130px breite Knoten) */
  height: calc(var(--r) * 2 + 140px);
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: transform 360ms var(--ws-ease);
  will-change: transform;
}
.ws-graph__center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate3d(-50%, -50%, 32px);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--ws-secondary), #d97316 80%);
  box-shadow: 0 12px 40px rgba(252, 141, 41, 0.32),
              inset 0 -4px 12px rgba(0, 0, 0, 0.18),
              inset 0 4px 8px rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.ws-graph__center-lbl {
  font-family: var(--ws-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13px, 1.5vw, 18px);
  line-height: 1.1;
  color: #fff;
  text-align: center;
  padding: 0 8px;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.ws-graph__nodes {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
}
.ws-graph__node {
  position: absolute;
  top: 50%; left: 50%;
  width: 130px;
  /* Auf Kreis verteilen: --n / --total (1-basiert), --r geerbt vom .ws-graph */
  --angle: calc((var(--n) - 1) / var(--total) * 360deg);
  transform: translate(-50%, -50%)
             rotate(var(--angle))
             translate(0, calc(var(--r) * -1))
             rotate(calc(var(--angle) * -1))
             translateZ(16px);
  background: #fff;
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg);
  padding: 10px 14px;
  box-shadow: 0 10px 24px rgba(31, 42, 48, 0.10);
  text-align: center;
  transition: transform 360ms var(--ws-ease),
              box-shadow 320ms var(--ws-ease),
              border-color 320ms var(--ws-ease);
  cursor: default;
}
.ws-graph__node:hover {
  transform: translate(-50%, -50%)
             rotate(var(--angle))
             translate(0, calc(var(--r) * -1))
             rotate(calc(var(--angle) * -1))
             translateZ(48px) scale(1.08);
  border-color: var(--ws-secondary);
  box-shadow: 0 18px 40px rgba(31, 42, 48, 0.18),
              0 0 0 2px rgba(252, 141, 41, 0.18);
  z-index: 10;
}
.ws-graph__node-num {
  display: inline-block;
  font-family: var(--ws-font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ws-secondary);
  margin-bottom: 2px;
}
.ws-graph__node-lbl {
  display: block;
  font-family: var(--ws-font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--ws-text);
  line-height: 1.25;
  margin-bottom: 3px;
}
.ws-graph__node-desc {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ws-text-muted);
}
.ws-graph__hint {
  margin: 18px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
  opacity: 0.6;
}

/* Reveal mit Stagger pro Knoten */
.ws-graph__node {
  opacity: 0;
}
.ws-graph.ws-is-visible .ws-graph__node {
  opacity: 1;
  animation: ws-graph-pop 600ms var(--ws-ease-out) both;
  animation-delay: calc(var(--n) * 80ms);
}
@keyframes ws-graph-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -50%)
               rotate(var(--angle))
               translate(0, calc(var(--r) * -1))
               rotate(calc(var(--angle) * -1))
               translateZ(0) scale(0.75);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%)
               rotate(var(--angle))
               translate(0, calc(var(--r) * -1))
               rotate(calc(var(--angle) * -1))
               translateZ(16px) scale(1);
  }
}

/* ==========================================================================
   PILLAR-Addon — Antreibertest reingehängt unter Leadership 02
   ========================================================================== */
.ws-pillar__lead-sub {
  font-size: 14px;
  color: var(--ws-text-muted);
  margin: -16px 0 16px;
  font-style: italic;
}
.ws-pillar__addon {
  margin-top: clamp(28px, 3.5vw, 44px);
  padding: clamp(22px, 2.5vw, 32px);
  background: #fff;
  border: 1px solid var(--ws-border);
  border-left: 3px solid var(--ws-secondary);
  border-radius: var(--ws-radius-lg);
  position: relative;
}
.ws-pillar__addon-lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-secondary);
  margin: 0 0 10px;
  font-weight: 600;
}
.ws-pillar__addon-h {
  font-family: var(--ws-font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.4vw + 0.4rem, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ws-text);
}
.ws-pillar__addon-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ws-text);
  margin: 0 0 20px;
  max-width: 60ch;
}
.ws-pillar__addon-text em {
  font-style: italic;
  color: var(--ws-text-muted);
}

/* ==========================================================================
   ABOUT-Kooperationen — Logos-Grid (5 Bilder + 1 Text-Tile Lumina)
   ========================================================================== */
.ws-about__coops {
  margin: 0 0 32px;
  padding: 24px 0 28px;
  border-bottom: 1px solid var(--ws-border);
}
.ws-about__coops-lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-primary-dark);
  margin: 0 0 18px;
}
.ws-about__coops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 18px;
  align-items: center;
}
.ws-about__coops-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius);
  transition: border-color 240ms var(--ws-ease),
              transform 240ms var(--ws-ease);
}
.ws-about__coops-grid li:hover {
  border-color: var(--ws-primary);
  transform: translateY(-2px);
}
.ws-about__coops-grid li img {
  max-width: 100%;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(0.92);
}
.ws-about__coops-text {
  font-family: var(--ws-font-display);
  font-style: italic;
  color: var(--ws-text);
}
.ws-about__coops-text span {
  font-size: 17px;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   PHASES — 5-Phasen-Modell (Systemische Organisationsentwicklung)
   ========================================================================== */
.ws-phases {
  background: #fff;
  padding: var(--ws-section-y) 0;
}

/* ==========================================================================
   OE-DONUT — interaktiver 5-Phasen-Pfeil-Donut
   ========================================================================== */
.ws-oe-donut {
  margin: 0 auto;
  max-width: 980px;
}
.ws-oe-donut__stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.ws-oe-donut__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.ws-oe-donut__wedge {
  fill: url(#ws-oe-wedge-grad);
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linejoin: round;
  cursor: pointer;
  pointer-events: fill;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 250px 250px;
  transition: stroke 220ms var(--ws-ease),
              stroke-width 220ms var(--ws-ease),
              filter 240ms var(--ws-ease),
              transform 280ms var(--ws-ease);
  will-change: transform;
}
.ws-oe-donut__wedge:focus,
.ws-oe-donut__wedge:focus-visible,
.ws-oe-donut__wedge:active {
  outline: none;
}
.ws-oe-donut__wedge.ws-is-active {
  stroke: var(--ws-secondary);
  stroke-width: 6;
  paint-order: stroke fill;
  stroke-linejoin: bevel;
  filter: brightness(1.06);
}
.ws-oe-donut__center-bg {
  pointer-events: none;
}

.ws-oe-donut__finetuning-text {
  font-family: var(--ws-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  fill: var(--ws-text);
}

.ws-oe-donut__center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
  max-width: 220px;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
  color: #fff;
  z-index: 2;
}
.ws-oe-donut__center-default,
.ws-oe-donut__center-active {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  margin: 0;
  transition: opacity 220ms var(--ws-ease), visibility 0s linear 220ms;
}
.ws-oe-donut__center-default {
  font-family: var(--ws-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(15px, 1.55vw, 20px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
}
.ws-oe-donut__center-active {
  opacity: 0;
  visibility: hidden;
}
.ws-oe-donut__center.ws-is-active .ws-oe-donut__center-default {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, 220ms;
}
.ws-oe-donut__center.ws-is-active .ws-oe-donut__center-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
}
.ws-oe-donut__center-num {
  margin: 0 0 5px;
  font-family: var(--ws-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-secondary);
  opacity: 1;
}
.ws-oe-donut__center-name {
  margin: 0 0 9px;
  font-family: var(--ws-font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.85vw, 23px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.ws-oe-donut__center-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ws-oe-donut__center-items li {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.32;
  color: rgba(255, 255, 255, 0.9);
}

.ws-oe-donut__labels {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.ws-oe-donut__labels li {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.ws-oe-donut__label {
  display: inline-block;
  background: var(--ws-primary-deep);
  color: var(--ws-text-light);
  border: none;
  border-radius: 4px;
  padding: 4px 9px;
  font-family: var(--ws-font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(31, 42, 48, 0.16);
  transition: background-color 240ms var(--ws-ease),
              color 240ms var(--ws-ease),
              box-shadow 240ms var(--ws-ease);
}
.ws-oe-donut__label-num {
  font-family: var(--ws-font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ws-secondary);
  margin-right: 2px;
}
.ws-oe-donut__label:hover,
.ws-oe-donut__label.ws-is-active {
  background: var(--ws-secondary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(252, 141, 41, 0.32);
}
.ws-oe-donut__label:hover .ws-oe-donut__label-num,
.ws-oe-donut__label.ws-is-active .ws-oe-donut__label-num {
  color: #fff;
}
.ws-oe-donut__label:focus-visible {
  outline: 2px solid var(--ws-secondary);
  outline-offset: 3px;
}

.ws-oe-donut__hint {
  margin: 24px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
  opacity: 0.7;
}

.ws-oe-donut__list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ws-oe-donut__list-item {
  border-bottom: 1px solid var(--ws-border);
}
.ws-oe-donut__list-item details {
  padding: 14px 4px;
}
.ws-oe-donut__list-item summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  font-family: var(--ws-font-display);
  font-weight: 400;
  color: var(--ws-text);
}
.ws-oe-donut__list-item summary::-webkit-details-marker { display: none; }
.ws-oe-donut__list-item summary::after {
  content: '+';
  margin-left: auto;
  font-size: 22px;
  color: var(--ws-secondary);
  line-height: 1;
  transition: transform 220ms var(--ws-ease);
}
.ws-oe-donut__list-item details[open] summary::after { content: '−'; }
.ws-oe-donut__list-num {
  font-family: var(--ws-font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ws-secondary);
  letter-spacing: 0.04em;
}
.ws-oe-donut__list-name {
  font-size: clamp(1.05rem, 1.2vw + 0.4rem, 1.3rem);
}
.ws-oe-donut__list-item details ul {
  margin: 12px 0 4px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-oe-donut__list-item details li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ws-text-muted);
  padding-left: 16px;
  position: relative;
  list-style: none;
}
.ws-oe-donut__list-item details li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 8px; height: 1px;
  background: var(--ws-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .ws-oe-donut__wedge,
  .ws-oe-donut__label,
  .ws-oe-donut__center-active,
  .ws-oe-donut__center-default { transition: none; }
  .ws-oe-donut__wedge.ws-is-active { transform: none; }
}

@media (max-width: 720px) {
  /* Mobile-OE-Donut (Bündel 2): User-Vorgabe „Visualisierungen mobil sichtbar
     + funktional". Vorher: Stage display:none + Liste-Fallback. Jetzt: Stage
     SICHTBAR + interaktiv per Tap (Wedges sind Pfeil-Shapes mit großer Touch-
     Fläche), Labels raus (Wedges direkt antippbar), Liste BLEIBT sichtbar als
     Detail-Akkordeon UNTER dem Donut (statt statt). Center-Items lesbar. */
  .ws-oe-donut__stage {
    padding-bottom: 12px;
  }
  .ws-oe-donut__labels { display: none; }
  .ws-oe-donut__center { width: 44%; max-width: 200px; }
  .ws-oe-donut__center-default { font-size: clamp(14px, 4vw, 18px); }
  .ws-oe-donut__center-name { font-size: clamp(14px, 4vw, 17px); }
  .ws-oe-donut__center-items { font-size: 13px; line-height: 1.4; }
  .ws-oe-donut__center-num { font-size: 11px; }
  .ws-oe-donut__hint {
    font-size: 12px;
    margin-top: 10px;
  }
  /* Liste mobil als Detail-Akkordeon unter dem Donut, kompakter */
  .ws-oe-donut__list {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ws-border);
  }
  .ws-oe-donut__list-item summary { padding: 12px 14px; font-size: 14px; }
  .ws-oe-donut__finetuning-text { font-size: 11px; }
}

@media (min-width: 721px) and (max-width: 900px) {
  .ws-oe-donut__label { font-size: 11px; padding: 6px 10px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .ws-stage__inner { grid-template-columns: 1fr 56%; }
  .ws-trust__inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .ws-trust__divider { display: none; }
  .ws-kontext__grid { grid-template-columns: 1fr; gap: 48px; }
  .ws-pillars__layout,
  .ws-formats__layout,
  .ws-faq__layout { grid-template-columns: 1fr; gap: 48px; }
  .ws-pillars__index,
  .ws-formats__index,
  .ws-about__portrait,
  .ws-faq__head { position: static; }
  .ws-lego__layout { grid-template-columns: 1fr; gap: 32px; }
  .ws-about__layout { grid-template-columns: 1fr; gap: 48px; }
  .ws-about__portrait { max-width: 380px; margin: 0 auto; }
  .ws-voices__quotes { grid-template-columns: 1fr 1fr; }
  .ws-voices__videos { grid-template-columns: 1fr 1fr; }
  .ws-tool__layout,
  .ws-geo__layout { grid-template-columns: 1fr; gap: 40px; }
  .ws-camp__inner { grid-template-columns: 1fr; gap: 28px; }
  .ws-camp__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 480px;
  }
  .ws-camp__cta { justify-self: start; }
}

/* Default-Verstecken für mobile-only HTML-Elemente — MUSS vor dem
   @max 760px-Mobile-Hauptblock stehen, damit dessen `display: block`
   per CSS-Cascade gewinnt (spätere Regel bei gleicher Spezifität).
   Vorherige Default-Liste am Datei-Ende kam NACH dem Mobile-Block und
   überschrieb die Mobile-Aktivierung — Cutout + Mobile-Phasen-Liste
   blieben unsichtbar. */
.ws-act__avatar,
.ws-act__portrait,
.ws-act__photo,
.ws-act__trust,
.ws-strat-wheel__list-mobile {
  display: none;
}

@media (max-width: 760px) {
  .ws-nav__inner { padding: 14px var(--ws-pad-x); }
  .ws-nav__logo { height: 28px; }
  .ws-nav__tel { display: none; }
  .ws-nav__cta { padding: 9px 16px; font-size: 13px; }

  /* Mobile-Touch-Pflicht: Buttons ≥ 48px Höhe (mobile-ux §4 + §17).
     Default .ws-btn padding 16+15+16 = 47px — knapp unter Pflicht.
     .ws-btn--sm bewusst klein (Antreibertest etc.) → ausgenommen. */
  .ws-btn:not(.ws-btn--sm) { min-height: 48px; }

  /* ----- HERO Above-the-Fold-Fix (BLOCKER B1+B2 aus mobile-analyse-v1.md) -----
     Reorder via Grid-Row: Akt1 → Cutout → Akt2 → Akt3.
     display:contents auf .ws-stage__acts löst den Wrapper aus dem Box-Model
     → die 3 Akte werden direkte Grid-Children und können einzeln per grid-row
     positioniert werden. ARIA bleibt intakt (modern browsers).
     Vorher: portrait order:-1 + 70vh → Foto blockierte komplettes erstes
     Viewport, Headline+CTA waren unterm Fold. */
  .ws-stage__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  .ws-stage__acts {
    display: contents;
    padding-right: 0;
  }
  .ws-act--1        { grid-row: 1; order: 0; }
  .ws-stage__portrait { grid-row: 2; order: 0; }
  .ws-act--2        { grid-row: 3; order: 0; }
  .ws-act--3        { grid-row: 4; order: 0; }

  /* KI-BG raus (Performance + Visual) */
  .ws-stage__bg-track { display: none; }
  .ws-stage__portrait-vignette {
    background: radial-gradient(ellipse at 50% 100%,
      rgba(31, 42, 48, 0.08) 0%,
      transparent 60%);
  }
  /* Cutout-Container deutlich kleiner (war 70vh / min 420px → blockierte Hero).
     Jetzt 38vh, max 360px, min 280px — sitzt zwischen Akt 1 und Akt 2 als
     visuelle Marke „so sieht Marco aus", drängt die Inhalte nicht weg. */
  .ws-stage__portrait-sticky {
    position: relative;
    top: auto;
    height: 38vh;
    min-height: 280px;
    max-height: 360px;
    border-top: 1px solid var(--ws-border);
    border-bottom: 1px solid var(--ws-border);
    background: linear-gradient(180deg,
      var(--ws-cream) 0%,
      rgba(127, 174, 189, 0.16) 55%,
      var(--ws-cream) 100%);
  }
  /* Cutout-Bild: Container-Höhe-basiert (height:100%) statt -breite-basiert
     (width:100%). Bei 360px-Container und PNG-Aspect 0.94 würde width:100%
     den Marco zu hoch machen (480px) → mit height:100% (max 360px) ist Marco
     immer im Container. bottom:0 statt -9% (kein Sticky-Release-Schnitt nötig,
     da kein Sticky mehr aktiv). */
  .ws-stage__portrait-img,
  .ws-stage[data-act-active="2"] .ws-stage__portrait-img,
  .ws-stage[data-act-active="3"] .ws-stage__portrait-img {
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
  }
  /* Akte kompakter: padding 80→32, gap 24→14. Akt 1 zusätzlich knappes
     padding-top damit Eyebrow direkt unter Nav startet. Above-the-Fold-Test
     bei 390px iPhone 14: Nav 56 + Akt 1 (Eyebrow 16 + H1 ~78 + Sub ~62 + CTAs
     50 + 4×gap 14 + padding 24+24) ≈ 366px → solide above-fold. */
  .ws-act {
    min-height: auto;
    padding: 32px 0;
    gap: 14px;
  }
  .ws-act--1 { padding-top: 24px; padding-bottom: 28px; }
  .ws-act--3 { padding-bottom: 48px; }
  .ws-act__hint { display: none; }
  .ws-act > * { opacity: 1; transform: none; }

  /* Akt-Listen mobil enger (W3): inline-Tags wrappen sauber */
  .ws-act__list { gap: 10px; }
  .ws-act__list--inline { gap: 8px 14px; }

  .ws-trust__inner {
    grid-template-columns: 1fr 1fr;
    gap: 28px 16px;
  }
  /* Trust-Num bei 360px-Viewport safer (NICE N2). vorher fix 2.2rem → bei
     360px / 2-Spalten knapp; clamp lässt Spielraum nach unten. */
  .ws-trust__num { font-size: clamp(1.9rem, 7vw, 2.4rem); }

  /* Logos-Marquee mobil dezenter (WICHTIG W4): kleinere Logos, größere
     Margin-Reduktion, langsamere Animation → Trust-Signal bleibt sichtbar,
     Aufmerksamkeits-Klau im 360px-Viewport reduziert. */
  .ws-logos { padding: 22px 0 26px; }
  .ws-logos__label {
    font-size: 0.65rem;
    margin-bottom: 18px;
  }
  .ws-logos__img {
    height: 34px;
    width: auto;
    max-width: 110px;
    margin: 0 22px;
  }
  .ws-logos__track { animation-duration: 54s; }

  .ws-deliver { padding: 24px; }
  .ws-deliver::before { display: none; }

  .ws-step {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    gap: 12px 16px;
    padding: 28px 0;
  }
  .ws-step__icon {
    width: 48px;
    height: 48px;
    grid-row: 1;
    grid-column: 1;
  }
  .ws-step__num {
    font-size: 2.5rem;
    grid-row: 1;
    grid-column: 2;
    align-self: center;
  }
  .ws-step__body {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .ws-camp__inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ws-camp__media {
    width: 100%;
    aspect-ratio: auto;
    height: 180px;
  }
  .ws-camp__cta { justify-self: start; }

  .ws-graph { --r: 130px; }
  .ws-graph__inner { max-width: 360px; }
  .ws-graph__center { width: 90px; height: 90px; }
  .ws-graph__center-lbl { font-size: 11px; }
  .ws-graph__node {
    width: 100px;
    padding: 8px 10px;
  }
  .ws-graph__node-lbl { font-size: 12px; }
  .ws-graph__node-desc { display: none; }

  .ws-about__seal { width: 90px; height: 90px; }
  .ws-about__coops-grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 12px;
  }
  .ws-about__coops-grid li { height: 56px; }

  .ws-nav__menu { display: none; }

  .ws-about__seals { gap: 16px; }
  .ws-about__seal { width: 56px; height: 56px; }
  .ws-about__stats { grid-template-columns: 1fr 1fr; gap: 18px; }

  .ws-voices__quotes { grid-template-columns: 1fr; }
  .ws-voices__videos { grid-template-columns: 1fr; }

  .ws-case { flex-basis: 86vw; padding: 26px; }

  .ws-tool__chips li { padding: 10px 0; }
  .ws-geo__city-list { grid-template-columns: 1fr; }

  .ws-footer__top { flex-direction: column; }
  .ws-footer__claim { text-align: left; }
  .ws-footer__grid { grid-template-columns: 1fr 1fr; }
  .ws-footer__bottom { justify-content: space-between; align-items: baseline; flex-wrap: nowrap; }

  /* ----- Bündel 2: Pillar-Addon + Btn-sm + Formate Mobile-Polish ----- */

  /* Pillar 2 Antreibertest-Addon (W5): visuelle Trennung zur Tag-Liste
     darüber + leichter Cream-Tint-BG, damit Addon mobil als eigene Insel
     wirkt statt an die Tags angeklatscht zu wirken. */
  .ws-pillar__addon {
    margin-top: 32px;
    padding: 22px 20px;
    background: rgba(252, 141, 41, 0.04);
    border-left-width: 3px;
  }
  .ws-pillar__addon-h { font-size: 1.15rem; }
  .ws-pillar__addon-text { font-size: 14.5px; }

  /* Btn--sm Touch-Pflicht mobil: Default 35px → mind. 44px (Touch-Min,
     nicht 48 wie Primary; sm bleibt visuell schmal, aber tappbar). */
  .ws-btn--sm { min-height: 44px; }

  /* Formate Mobile-Polish: Steps-Card kompakter, Index-Liste mobil schmaler
     padding (oben/unten je 22→16). Format-Cards-Header etwas enger. */
  .ws-formats__index li { padding: 16px 0; }
  .ws-format__steps { padding: 18px 22px; }
  .ws-format__num { font-size: 16px; }
  .ws-format__h3 { font-size: clamp(1.4rem, 5vw, 1.8rem); }
  .ws-format__wofuer { font-size: 16px; line-height: 1.6; }

  /* ----- Bündel 3: LEGO + Process + Phases-Wrapper Polish ----- */

  /* LEGO Mobile (dunkle Section, dezenter BG-Glow + kompaktere Caption) */
  .ws-lego::before {
    width: 320px;
    height: 320px;
    top: -120px;
    right: -120px;
  }
  .ws-lego__text .ws-h2 { margin-bottom: 18px; }
  .ws-lego__caption {
    padding: 22px 18px 14px;
    font-size: 10.5px;
    letter-spacing: 0.18em;
  }
  .ws-lego__lead { font-size: 16.5px; line-height: 1.6; }
  .ws-lego__ideal { font-size: 14.5px; }

  /* Process Step-Polish: engere Step-Liste, Body volle Breite, Desc 16px */
  .ws-process__list { gap: 28px; }
  .ws-step { padding: 24px 0; }
  .ws-step__body { max-width: none; }
  .ws-step__h3 { font-size: 1.35rem; margin-bottom: 8px; }
  .ws-step__desc { font-size: 16px; line-height: 1.6; }
  .ws-process__cta { margin-top: 32px; }

  /* Phases-Wrapper Section-Head kompakter (OE-Donut sitzt dann darunter) */
  .ws-phases .ws-section-head__sub { font-size: 15.5px; line-height: 1.6; }
  .ws-phases .ws-section-head { margin-bottom: 32px; }

  /* ----- Bündel 4: About + Geo + Voices + Cases ----- */

  /* About Mobile-Polish: Bio lesbar, Stats kompakter, Coops-Logos */
  .ws-about__text .ws-h2 { margin-bottom: 18px; }
  .ws-about__text .ws-bodycopy { font-size: 16px; line-height: 1.6; }
  .ws-about__caption { font-size: 13px; }
  .ws-about__stat-v { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .ws-about__stat-l { font-size: 10.5px; }
  .ws-about__coops-grid li { height: 54px; padding: 6px; }
  .ws-about__coops-grid li img { max-height: 38px; }

  /* Geo Mobile-Polish: Lead kompakter, Regions-Items engerer Padding,
     Cities-Card mobil schmaleres Padding für 360px-Viewport. */
  .ws-geo__lead { font-size: 16px; line-height: 1.6; margin-bottom: 28px; }
  .ws-geo__text .ws-h2 { margin-bottom: 22px; }
  .ws-geo__regions { gap: 12px; }
  .ws-geo__regions li { padding: 14px 0; }
  .ws-geo__regions li strong { font-size: clamp(17px, 5vw, 20px); }
  .ws-geo__regions li > span:last-child { font-size: 13.5px; }
  .ws-geo__cities { padding: 22px; }
  .ws-geo__city-list li { font-size: clamp(16px, 5vw, 19px); padding: 6px 0; }
  .ws-geo__cities-lbl { margin-bottom: 16px; }
  .ws-geo__cities-hint { font-size: 12.5px; }

  /* Voices Mobile-Polish: Quotes 1-Spaltig, Texte kompakter, Google-Badge
     enger. Voices-Quotes übernimmt 1fr-Grid aus Bündel 1 / Tablet ist 1fr 1fr. */
  .ws-voices .ws-section-head { margin-bottom: 28px; }
  .ws-voices__quotes { gap: 18px; }
  .ws-quote { padding: 24px 22px; }
  .ws-quote__text { font-size: 17px; line-height: 1.55; }
  .ws-quote__author { font-size: 12.5px; }
  .ws-voices__videos { gap: 18px; margin-top: 28px; }
  .ws-voices__google { margin-top: 28px; padding: 18px 22px; }
  .ws-voices__google-score strong { font-size: 1.8rem; }
  .ws-voices__google-cnt { font-size: 13px; }

  /* Live-Google-Reviews Mobile (v3.32-mobile-16): 3 Cards horizontal scroll-snap analog Quotes-Rail */
  .ws-greviews-block { margin-top: 32px; padding-top: 24px; }
  .ws-greviews-block__h { font-size: 1.35rem; }
  .ws-greviews-block__sub { font-size: 13.5px; line-height: 1.5; }
  /* Marquee bleibt auch mobil aktiv — Viewport randvoll, Karten schmaler. */
  .ws-greviews {
    margin: 0 calc(-1 * var(--ws-pad-x)) 24px;
  }
  .ws-greview {
    flex: 0 0 78vw;
    max-width: 340px;
    margin-right: 14px;
    padding: 20px 18px;
    gap: 12px;
  }
  .ws-greview__avatar { width: 36px; height: 36px; font-size: 12px; }
  .ws-greview__name { font-size: 14px; }
  .ws-greview__text { font-size: 14px; line-height: 1.5; }
  .ws-greviews__source { font-size: 12px; flex-wrap: wrap; padding: 0 8px; }

  /* Cases mobil — echte Fallbeispiele (v3.32-mobile-15): Demnächst-Badge + dashed-
     Border entfernt, da seit 2026-05-04 echte Inhalte vorliegen. Border bleibt solid
     wie Desktop. Bullet-Liste mobil leicht enger, weiterhin gut lesbar. */
  .ws-cases__rail { padding-bottom: 28px; }
  .ws-case {
    flex: 0 0 86vw;
    padding: 24px 20px;
  }
  .ws-case__h3 { font-size: 1.2rem; line-height: 1.25; }
  .ws-case__row { grid-template-columns: 78px 1fr; gap: 12px; padding-top: 12px; }
  .ws-case__row-lbl { font-size: 10px; }
  .ws-case__row-body { font-size: 14px; }
  .ws-case__list { gap: 8px; }
  .ws-case__list li { font-size: 14px; line-height: 1.5; padding-left: 16px; }
  .ws-cases__hint { font-size: 11px; padding: 0 var(--ws-pad-x); }

  /* ----- Bündel 5: FAQ + Camp + Kontakt + Footer + Bottom-CTA-Reservierung ----- */

  /* FAQ Mobile-Polish: Akkordeon-Trigger Touch ≥48px, Body 16px */
  .ws-faq__head { margin-bottom: 8px; }
  .ws-faq__head .ws-h2 { margin-bottom: 12px; }
  .ws-faq__intro { font-size: 15px; line-height: 1.55; margin-bottom: 18px; }
  .ws-acc-trigger {
    padding: 18px 0;
    font-size: 15.5px;
    line-height: 1.4;
    min-height: 52px;
  }
  .ws-acc-content p,
  .ws-acc-content .ws-acc-list { font-size: 15px; line-height: 1.6; }

  /* UnternehmerCamp CLS-Fix (NICE N4): aspect-ratio 16/9 statt fix 180px height */
  .ws-camp__inner { padding: 28px 22px; gap: 20px; }
  .ws-camp__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 320px;
  }
  .ws-camp__h2 { font-size: clamp(1.5rem, 5.5vw, 1.9rem); }
  .ws-camp__lead { font-size: 15px; line-height: 1.6; }

  /* Kontakt Mobile-Polish: Sub kompakter, CTAs voll-breit gestapelt */
  .ws-contact .ws-h2 { margin-bottom: 18px; }
  .ws-contact__sub { font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
  .ws-contact__ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .ws-contact__ctas .ws-btn { width: 100%; }

  /* Footer Mobile-Polish: Note kompakter, Bottom-Bar tighter */
  .ws-footer__note { font-size: 13px; line-height: 1.5; }
  .ws-footer__bottom { gap: 8px; font-size: 13px; }
  /* Footer-Lücke-Fix: Top-Block kompakter, kein Riesenleerraum zwischen
     Logo+Claim und Footer-Grid darunter. */
  .ws-footer__top { gap: 12px; margin-bottom: 24px; padding-bottom: 0; }
  .ws-footer__claim { margin: 0; }
  .ws-footer__grid { margin-top: 0; }

  /* Body padding-bottom raus (Sticky-Bottom-CTA wurde komplett entfernt
     — siehe Korrektur-Sweep v3.32-mobile-6 Root-Cause: User-Spam). */
  body { padding-bottom: 0; }

  /* ====================================================================
     KORREKTUR-SWEEP v3.32-mobile-6 — Visual-Feedback-Fixes
     ==================================================================== */

  /* HERO „Stacked Pro" v3.32-mobile-13 (User-GO nach Web-Recherche).
     Sticker-Cutout + KI-BG aufgegeben (zwei konkurrierende visuelle Anker
     gegen Headline). Stattdessen: Text above-fold + Foto-Card darunter. */
  .ws-act__avatar { display: none; }
  .ws-act__portrait { display: none; }
  .ws-stage__portrait { display: none; }
  .ws-stage__bg-track { display: none; }

  .ws-stage {
    background: linear-gradient(180deg,
      var(--ws-cream) 0%,
      rgba(127, 174, 189, 0.07) 100%);
  }
  .ws-stage__inner {
    display: block;
    position: relative;
  }
  .ws-stage__acts {
    display: block;
    padding-right: 0;
  }

  /* Akt 1 „Stacked Pro": Text above-fold, Foto-Card darunter */
  .ws-act--1 {
    position: relative;
    padding-top: 32px;
    padding-bottom: 32px;
    grid-row: auto;
    min-height: auto;
    gap: 16px;
  }

  /* Trust-Mikro-Badge — sitzt zwischen CTAs und Foto-Card */
  .ws-act__trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--ws-border);
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    color: var(--ws-text);
    align-self: flex-start;
  }
  a.ws-act__trust {
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease;
  }
  a.ws-act__trust:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--ws-primary);
  }
  .ws-act__trust strong { font-weight: 600; }
  .ws-act__trust-stars {
    color: #FFC400;
    letter-spacing: 1px;
    font-size: 13px;
  }

  /* Foto-Card — 4:5 echte Photo (nicht Cutout) */
  .ws-act__photo {
    display: block;
    margin: 16px 0 0;
    width: 100%;
    max-width: 340px;
    align-self: center;
    border-radius: 16px;
    overflow: hidden;
    background: var(--ws-cream);
    border: 1px solid var(--ws-border);
    box-shadow: 0 12px 32px rgba(15, 24, 28, 0.12);
    position: relative;
  }
  .ws-act__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 22%;
  }
  .ws-act__photo figcaption {
    padding: 12px 16px 14px;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ws-text-muted);
    text-align: center;
    background: var(--ws-cream);
    border-top: 1px solid var(--ws-border);
  }

  /* Akte 2 + 3 wieder sichtbar (User-Korrektur 2026-05-04) */
  .ws-act--2,
  .ws-act--3 {
    display: flex;
    grid-row: auto;
    min-height: auto;
    padding: 32px 0;
    gap: 14px;
    position: relative;
    z-index: 2;
  }
  .ws-act--3 { padding-bottom: 48px; }

  /* PILLARS-INDEX + FORMATS-INDEX raus mobil — keine Sticky-Funktion mehr,
     statische Liste war redundant zu den Pillar-Cards darunter. */
  .ws-pillars__index,
  .ws-formats__index { display: none; }

  /* STRAT-WHEEL Korrektur: Op-Geschäft-Labels weg (überdeckten Slices),
     Mobile-Phasen-Liste sichtbar, Center kleiner. */
  .ws-strat-wheel__op,
  .ws-strat-wheel__op-left,
  .ws-strat-wheel__op-right { display: none; }

  .ws-strat-wheel__center { width: 28%; height: 28%; }
  .ws-strat-wheel__center-default { font-size: clamp(13px, 3.6vw, 16px); }
  .ws-strat-wheel__center-name { font-size: clamp(12px, 3.2vw, 15px); margin: 2px 0 4px; }
  .ws-strat-wheel__center-items { font-size: 11.5px; line-height: 1.35; }
  .ws-strat-wheel__center-num { font-size: 10px; }

  .ws-strat-wheel__list-mobile {
    display: block;
    list-style: none;
    margin: 22px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--ws-border);
  }
  .ws-strat-wheel__list-mobile li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 0 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ws-border);
    align-items: baseline;
  }
  .ws-strat-wheel__list-mobile li:last-child { border-bottom: 0; }
  .ws-strat-wheel__list-mobile-num {
    font-family: var(--ws-font-display);
    font-style: italic;
    color: var(--ws-secondary);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .ws-strat-wheel__list-mobile-name {
    font-size: 14.5px;
    color: var(--ws-text);
    line-height: 1.35;
  }

  /* OE-Donut Korrektur: Center kleiner (Schrift war zu groß lt. User) */
  .ws-oe-donut__center { width: 38%; max-width: 180px; }
  .ws-oe-donut__center-default { font-size: clamp(13px, 3.5vw, 16px); line-height: 1.2; }
  .ws-oe-donut__center-name { font-size: clamp(13px, 3.5vw, 15px); }
  .ws-oe-donut__center-items { font-size: 11.5px; line-height: 1.35; }
  .ws-oe-donut__center-num { font-size: 10px; }

  /* TAG-LISTEN (Pillar 2 + 3) — 1-Spalten-Wand → 2-Spalten-Grid */
  .ws-tags {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .ws-tags li {
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.25;
    text-align: center;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
  }

  /* GEO CITY-LIST 1-Spalten-Wand → 2-Spalten, Border-Bottom raus */
  .ws-geo__city-list {
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
  }
  .ws-geo__city-list li {
    font-size: 16px;
    padding: 5px 0;
    border-bottom: 0;
  }
  .ws-geo__city-list li::before {
    width: 5px; height: 5px; flex: 0 0 5px;
  }

  /* VOICES QUOTES — manueller Scroll-Snap-Rail */
  .ws-voices__quotes {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px var(--ws-pad-x) 18px;
    margin: 0 calc(var(--ws-pad-x) * -1) 0;
    scrollbar-width: thin;
    scrollbar-color: var(--ws-border-light) transparent;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
  }
  .ws-voices__quotes::-webkit-scrollbar { height: 4px; }
  .ws-voices__quotes::-webkit-scrollbar-thumb { background: var(--ws-border-light); border-radius: 2px; }
  .ws-voices__quotes .ws-quote {
    flex: 0 0 84vw;
    max-width: 340px;
    scroll-snap-align: start;
    margin: 0;
  }

  /* VOICES VIDEOS — manueller Scroll-Snap-Rail (analog Quotes/Cases) */
  .ws-voices__videos {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px var(--ws-pad-x) 18px;
    margin: 24px calc(var(--ws-pad-x) * -1) 0;
    grid-template-columns: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
  }
  .ws-voices__videos .ws-video {
    flex: 0 0 84vw;
    max-width: 340px;
    scroll-snap-align: start;
  }

  /* STICKY-BOTTOM-CTA komplett deaktivieren (HTML-Element wurde entfernt,
     Stile am Datei-Ende bleiben für Backward-Compat — diese Override-Regel
     macht doppelt sicher dass nichts auftaucht falls Element wiederkommt). */
  .ws-mobile-bottom-cta { display: none !important; }

  /* ====================================================================
     ZWEITER KORREKTUR-SWEEP v3.32-mobile-7 — Visual-Feedback Runde 2
     ==================================================================== */

  /* HERO: Akt 2 + Akt 3 wieder sichtbar in v3.32-mobile-10 + v3.32-mobile-11
     (User-Korrektur „da fehlt ja 2/3"). Sticker-Cutout sitzt ab v10 in Akt 1
     (figure.ws-act__portrait), Akte 2+3 als reine Text-Akte darunter sichtbar.
     Reaktivierungs-Regel ist im Sticker-Hero-Block oben (Z. ~3766 ff). */

  /* STRAT-WHEEL Korrektur 2: Slice-Labels wieder sichtbar, Op-Geschäft
     wieder sichtbar (kleiner), Center-Items raus (in Mobile-Phasen-Liste
     unter dem Wheel ohnehin sichtbar). */
  .ws-strat-wheel__labels { display: block; }  /* Override Bündel 2 */
  .ws-strat-wheel__label {
    font-size: 9px;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
  }
  /* Op-Geschäft wieder rein, kompakt */
  .ws-strat-wheel__op,
  .ws-strat-wheel__op-left,
  .ws-strat-wheel__op-right {
    display: block;
    font-size: 8.5px;
    letter-spacing: 0.18em;
    padding: 0 5px;
  }
  /* Center: kleiner aber Items raus (sind in List-Mobile darunter) */
  .ws-strat-wheel__center { width: 32%; height: 32%; }
  .ws-strat-wheel__center-items { display: none; }
  .ws-strat-wheel__center-name { font-size: clamp(11px, 3vw, 13px); margin: 4px 0 0; }
  .ws-strat-wheel__center-num { font-size: 9.5px; }
  .ws-strat-wheel__center-default { font-size: clamp(13px, 3.6vw, 16px); }

  /* OE-DONUT Korrektur 2: Wedge-Labels wieder sichtbar, Center-Items raus
     (in Liste-Akkordeon darunter sichtbar). */
  .ws-oe-donut__labels { display: block; }  /* Override Bündel 2 */
  .ws-oe-donut__label { font-size: 10px; padding: 4px 8px; }
  /* Center: Items raus, Name kompakt */
  .ws-oe-donut__center-items { display: none; }
  .ws-oe-donut__center-name { font-size: clamp(12px, 3.3vw, 14px); margin: 4px 0 0; }
  .ws-oe-donut__center-num { font-size: 9.5px; }
  .ws-oe-donut__center-default { font-size: clamp(13px, 3.4vw, 15px); line-height: 1.2; }

  /* FOOTER Korrektur 3: Echter Root-Cause endlich gefixt.
     Bug 1: .ws-footer__claim { flex: 1 1 320px } wirkt bei column-flex
            als 320px HÖHE-Stretch → Claim wird auf 320px hoch.
     Bug 2: .ws-footer__top padding-bottom clamp(40,5vw,64) bringt 40-64px
            Default-Padding mit (mein margin-bottom-Override hat es nicht
            ersetzt, sondern dazu addiert).
     Bug 3: .ws-footer__grid padding clamp(40,5vw,64) 0 nochmal 40-64px
            oben+unten am Grid. */
  .ws-footer { padding: 24px 0 16px; }
  .ws-footer__top {
    gap: 8px;
    margin-bottom: 0;
    padding-bottom: 16px;
  }
  .ws-footer__claim {
    flex: 0 0 auto;
    max-width: none;
    text-align: left;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
  }
  .ws-footer__grid {
    margin: 0;
    padding: 16px 0;
    gap: 20px;
  }
  .ws-footer__col { gap: 8px; }
  .ws-footer__bottom { margin: 0; padding-top: 14px; }

  /* GRAFIK-CENTER-ITEMS WIEDER SICHTBAR (User: „sollen lesbar sein").
     Strat-Wheel Center 32→40%, Items font 9.5px line-1.25 padding 4. */
  .ws-strat-wheel__center { width: 40%; height: 40%; }
  .ws-strat-wheel__center-active { padding: 4%; }
  .ws-strat-wheel__center-items {
    display: block;
    font-size: 9.5px;
    line-height: 1.25;
    margin-top: 3px;
  }
  .ws-strat-wheel__center-items li { margin: 1px 0; }
  .ws-strat-wheel__center-name { font-size: clamp(11px, 3.2vw, 13px); margin: 3px 0 2px; }

  /* OE-Donut Center 38→50%, Items font 9px line-1.25 mit safer
     padding damit lange Items wie „Workshops, Schulungen, Coaching"
     im Center-Donut-Hole bleiben statt seitlich rauszuragen. */
  .ws-oe-donut__center { width: 50%; max-width: 220px; }
  .ws-oe-donut__center-active { padding: 4% 8%; }
  .ws-oe-donut__center-items {
    display: block;
    font-size: 9px;
    line-height: 1.25;
    margin-top: 4px;
    padding: 0;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .ws-oe-donut__center-items li { margin: 1.5px 0; }
  .ws-oe-donut__center-name { font-size: clamp(11px, 3vw, 13px); margin: 3px 0 2px; line-height: 1.15; }
  .ws-oe-donut__center-default { font-size: clamp(12px, 3.2vw, 14px); line-height: 1.18; }
  .ws-oe-donut__center-num { font-size: 9px; }

  /* ----------------------------------------------------------------------
     2026-05-04 Mobile-Refinement (Bug-Sweep nach User-Visual-Check)
     ---------------------------------------------------------------------- */

  /* Header-Slim: nur "Termin buchen" zentriert + Hamburger rechts.
     "Jetzt anrufen" raus + Slide-Pill raus (mit nur 1 Button sinnlos). */
  .ws-nav__inner { padding: 10px var(--ws-pad-x); gap: 10px; }
  .ws-nav__logo { height: 24px; }
  .ws-nav__pill { display: none; }
  .ws-nav__btn[data-target="tel"] { display: none; }
  .ws-nav__btn[data-target="termin"] {
    background: var(--ws-secondary);
    color: #fff;
    padding: 8px 16px;
    font-size: 13.5px;
    border-radius: 999px;
  }
  .ws-nav__ctas { background: transparent; }

  /* Strat-Wheel Center-Pop-up: noch kleiner + mehr horizontaler Inset
     damit lange Items nicht über den dunklen Kreis ragen.
     Kreis-Diameter ≈ 36.8% Stage, Container 40% — Diff = 3.2% beidseitig.
     Mit padding 4% 12% bekommt Text-Area ~32% Stage = passt in den Kreis. */
  .ws-strat-wheel__center-active { padding: 4% 12%; }
  .ws-strat-wheel__center-name {
    font-size: clamp(8.5px, 2.5vw, 10.5px);
    line-height: 1.1;
  }
  .ws-strat-wheel__center-default { font-size: clamp(10px, 2.8vw, 12px); }
  .ws-strat-wheel__center-items {
    font-size: 7.5px;
    line-height: 1.15;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .ws-strat-wheel__center-items li { margin: 0.5px 0; }
  .ws-strat-wheel__center-num { font-size: 8.5px; }

  /* Strat-Wheel Op-Labels: kleiner, damit der Pfeil sichtbar bleibt */
  .ws-strat-wheel__op,
  .ws-strat-wheel__op-left,
  .ws-strat-wheel__op-right {
    font-size: 6.5px;
    letter-spacing: 0.06em;
    padding: 0 3px;
  }

  /* OE-Donut Center-Pop-up: noch kleiner + mehr horizontaler Inset.
     Container width 50% / max 220 — padding 4% 14% gibt ~32% Text-Area
     was sicher innerhalb des dunklen Donut-Holes liegt. */
  .ws-oe-donut__center-active { padding: 4% 14%; }
  .ws-oe-donut__center-name {
    font-size: clamp(8.5px, 2.5vw, 10.5px);
    line-height: 1.1;
  }
  .ws-oe-donut__center-default {
    font-size: clamp(10px, 2.8vw, 12px);
    line-height: 1.15;
  }
  .ws-oe-donut__center-items {
    font-size: 7px;
    line-height: 1.15;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .ws-oe-donut__center-items li { margin: 0.5px 0; }
  .ws-oe-donut__center-num { font-size: 8.5px; }

  /* Strat-Wheel Slice-Labels (1, 4, 5 ragten raus): kleiner + tighter */
  .ws-strat-wheel__label {
    font-size: 7.5px;
    letter-spacing: 0.01em;
    line-height: 1.05;
  }

  /* OE-Donut Wedge-Labels (Pill 5 ragte raus): kleiner */
  .ws-oe-donut__label {
    font-size: 8.5px;
    padding: 3px 6px;
    letter-spacing: 0.02em;
  }

  /* Mobile-Phasen-Liste 01–07 unter dem Strat-Wheel komplett raus
     (User-Wunsch: Phasen-Inhalt soll nur im Wheel-Center erscheinen,
     keine zusätzliche Liste). */
  .ws-strat-wheel__list-mobile { display: none; }
}

@media (max-width: 420px) {
  .ws-act__h1 { font-size: 2.1rem; }
  .ws-format__steps ol li:not(:last-child)::after { display: none; }
  .ws-format__steps ol li { display: block; }
  .ws-footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
  html { scroll-behavior: auto; }
  .ws-reveal { opacity: 1; transform: none; }
  .ws-act > * { opacity: 1; transform: none; }
  .ws-act__hint-line { animation: none; transform: scaleY(1); }
}

/* ==========================================================================
   MOBILE: Hamburger + Drawer + Backdrop + Sticky-Bottom-CTA
   Bündel 5 Mobile-Overhaul. Alle Komponenten Default display:none → werden
   nur im @max 760px aktiv. Desktop bleibt 1:1 unangetastet.
   ========================================================================== */

.ws-nav__hamburger,
.ws-nav__backdrop,
.ws-nav__drawer,
.ws-mobile-bottom-cta {
  display: none !important;
}
@media (max-width: 760px) {
  .ws-nav__hamburger { display: inline-flex !important; }
  .ws-nav__backdrop { display: block !important; }
  .ws-nav__drawer { display: flex !important; }
  .ws-mobile-bottom-cta { display: flex !important; }
}
/* .ws-act__avatar, .ws-act__portrait, .ws-strat-wheel__list-mobile
   werden in einem separaten Default-Block VOR dem Mobile-Hauptblock
   versteckt (siehe Z. ~3330) — diese Liste hier kommt im Code NACH
   dem Mobile-Block-Override und würde sonst die @media display:block
   überschreiben (CSS-Cascade: spätere Regel gewinnt bei gleicher
   Spezifität — @media beeinflusst Reihenfolge nicht). */

@media (max-width: 760px) {

  /* ---------- Hamburger-Button ---------- */
  .ws-nav__hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    margin-left: 6px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--ws-border);
    border-radius: 10px;
    cursor: pointer;
    color: var(--ws-text);
    transition: background-color 220ms var(--ws-ease),
                border-color 220ms var(--ws-ease);
    flex-shrink: 0;
  }
  .ws-nav__hamburger:hover {
    background: rgba(31, 42, 48, 0.04);
    border-color: var(--ws-border-strong);
  }
  .ws-nav__hamburger:focus-visible {
    outline: 2px solid var(--ws-secondary);
    outline-offset: 2px;
  }
  .ws-nav__hamburger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 240ms var(--ws-ease),
                opacity 200ms var(--ws-ease);
  }
  .ws-nav__hamburger[aria-expanded="true"] .ws-nav__hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .ws-nav__hamburger[aria-expanded="true"] .ws-nav__hamburger-bar:nth-child(2) {
    opacity: 0;
  }
  .ws-nav__hamburger[aria-expanded="true"] .ws-nav__hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ---------- Backdrop ---------- */
  .ws-nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 24, 28, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms var(--ws-ease);
    z-index: 55;
  }
  .ws-nav__backdrop.ws-is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---------- Drawer (rechts off-canvas) ---------- */
  .ws-nav__drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(85vw, 320px);
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    background: var(--ws-cream);
    border-left: 1px solid var(--ws-border);
    box-shadow: -8px 0 28px rgba(15, 24, 28, 0.18);
    transform: translateX(100%);
    transition: transform 320ms var(--ws-ease);
    z-index: 60;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ws-nav__drawer.ws-is-open {
    transform: translateX(0);
  }
  .ws-nav__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--ws-border);
    background: #fff;
    flex-shrink: 0;
  }
  .ws-nav__drawer-lbl {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ws-text-muted);
    font-weight: 600;
  }
  .ws-nav__drawer-close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid var(--ws-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--ws-text);
    font-size: 24px;
    line-height: 1;
    transition: background-color 220ms var(--ws-ease);
  }
  .ws-nav__drawer-close:hover {
    background: rgba(31, 42, 48, 0.04);
  }
  .ws-nav__drawer-close:focus-visible {
    outline: 2px solid var(--ws-secondary);
    outline-offset: 2px;
  }
  .ws-nav__drawer-menu {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    flex: 1 1 auto;
    display: block;
    min-height: 0;
  }
  .ws-nav__drawer-menu li {
    display: block;
    list-style: none;
    border-bottom: 1px solid var(--ws-border);
  }
  .ws-nav__drawer-menu li:last-child { border-bottom: 0; }
  .ws-nav__drawer-menu a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 10px 20px;
    font-family: var(--ws-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--ws-text);
    text-decoration: none;
    background: transparent;
    transition: background-color 220ms var(--ws-ease),
                color 220ms var(--ws-ease);
  }
  .ws-nav__drawer-menu a:hover,
  .ws-nav__drawer-menu a:focus-visible {
    background: rgba(252, 141, 41, 0.06);
    color: var(--ws-primary-dark);
    outline: none;
    text-decoration: none;
  }
  .ws-nav__drawer-ctas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ws-border);
    background: #fff;
    flex-shrink: 0;
  }
  .ws-nav__drawer-ctas .ws-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
  }

  /* Body-Scroll-Lock wenn Drawer offen */
  body.ws-nav-locked {
    overflow: hidden;
    touch-action: none;
  }

  /* ---------- Sticky-Bottom-CTA ---------- */
  .ws-mobile-bottom-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    background: rgba(250, 247, 242, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--ws-border);
    box-shadow: 0 -4px 16px rgba(15, 24, 28, 0.06);
    z-index: 50;
  }
  .ws-mobile-bottom-cta__btn {
    flex: 1 1 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 8px 4px;
    background: #fff;
    border: 1px solid var(--ws-border);
    border-radius: 12px;
    color: var(--ws-text);
    font-family: var(--ws-font-body);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    transition: background-color 220ms var(--ws-ease),
                border-color 220ms var(--ws-ease),
                color 220ms var(--ws-ease);
  }
  .ws-mobile-bottom-cta__btn:hover,
  .ws-mobile-bottom-cta__btn:focus-visible {
    background: rgba(252, 141, 41, 0.06);
    border-color: var(--ws-secondary);
    color: var(--ws-primary-dark);
    outline: none;
  }
  .ws-mobile-bottom-cta__btn--primary {
    background: var(--ws-secondary);
    border-color: var(--ws-secondary);
    color: #fff;
  }
  .ws-mobile-bottom-cta__btn--primary:hover,
  .ws-mobile-bottom-cta__btn--primary:focus-visible {
    background: var(--ws-text);
    border-color: var(--ws-text);
    color: #fff;
  }
  .ws-mobile-bottom-cta__btn svg {
    flex-shrink: 0;
  }
  .ws-mobile-bottom-cta__btn span {
    font-size: 11.5px;
  }

  /* Wenn Drawer offen ist → Bottom-CTA darunter (Drawer hat z-index 60) und
     leicht ausgeblendet damit kein Tap-Konflikt */
  body.ws-nav-locked .ws-mobile-bottom-cta {
    opacity: 0.4;
    pointer-events: none;
  }
}

/* Reduced-Motion: Drawer + Bottom-CTA Transitions aus */
@media (prefers-reduced-motion: reduce) {
  .ws-nav__drawer,
  .ws-nav__backdrop,
  .ws-nav__hamburger-bar { transition: none !important; }
}

/* ==========================================================================
   ERFAHRUNGS-WERTE — 3 Donut-Counter (Korrektur II Pkt 12c, style.css v3.58)
   Vorlage: PDF II Seite 2 (3 Kreis-Counter mit Brand-Farb-Variation)
   ========================================================================== */
.ws-experience-values {
  padding: 0 0 clamp(56px, 7vw, 96px);
  background: var(--ws-bg);
}
.ws-section-head--center {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(24px, 3vw, 40px);
}
.ws-experience-values__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 64px);
  max-width: 880px;
  margin-inline: auto;
}
.ws-exp-val {
  display: flex;
  justify-content: center;
}
.ws-exp-val__ring-wrap {
  position: relative;
  width: clamp(160px, 18vw, 220px);
  aspect-ratio: 1 / 1;
}
.ws-exp-val__ring {
  width: 100%;
  height: 100%;
  display: block;
}
/* Ring-Stroke einheitlich in Brand-Petrol — single source of truth,
   ersetzt die zuvor pro Ring gemischten Inline-Stroke-Werte
   (#7FAEBD / #1F2A30 / #3F7A8C). Hover via .ws-exp-val:hover → orange. */
.ws-exp-val__ring circle {
  stroke: var(--ws-primary-dark);
  stroke-width: 5;
  transition: stroke 260ms ease-out;
}
.ws-exp-val:hover .ws-exp-val__ring circle,
.ws-exp-val:focus-within .ws-exp-val__ring circle {
  stroke: var(--ws-secondary);
}
.ws-exp-val__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 12%;
}
.ws-exp-val__label {
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ws-text-muted);
  margin: 0 0 6px;
  font-weight: 600;
}
.ws-exp-val__num {
  font-size: clamp(1.9rem, 3.1vw, 2.6rem);
  font-weight: 700;
  color: var(--ws-text);
  margin: 0;
  /* padding-left halbe Plus-Breite — optischer Ausgleich zwischen „Zahl strikt mittig"
     (0.55em, das + hängt rechts raus) und „Gruppe mathematisch mittig" (0, die Zahl rückt
     links). Der halbe Wert wirkt für das Auge symmetrisch — User-Anforderung „gute Optik". */
  padding-left: 0.28em;
  letter-spacing: 0.01em;
  font-feature-settings: "tnum" 1;
}
.ws-exp-val__num sup {
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 2px;
  color: var(--ws-secondary);
  font-weight: 500;
}

/* Mobile-Override — 3 Donuts nebeneinander (kompakt, Typo verkleinert) */
@media (max-width: 760px) {
  .ws-experience-values {
    padding: 48px 0 56px;
  }
  .ws-experience-values__list {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(6px, 2vw, 14px);
    max-width: none;
  }
  .ws-exp-val__ring-wrap {
    width: 100%;
  }
  .ws-exp-val__inner {
    padding: 0 5%;
  }
  .ws-exp-val__label {
    font-size: clamp(7px, 2.2vw, 10px);
    letter-spacing: 0.02em;
    margin-bottom: 3px;
  }
  .ws-exp-val__num {
    font-size: clamp(0.95rem, 4.4vw, 1.5rem);
    padding-left: 0.18em;
  }
}