/* =========================================================================
   Schwebewerk® Multizonenrahmen — Landingpage
   Designsystem 1:1 aus dem gemessenen Brand-Kit (../../brand/BRAND.md):
   Türkis ist der einzige Akzent, Flächen sind Weiß / #EEEEEE / #252525,
   EINE Karte (r10, 1px Rand, 30px Innenabstand), Bilder r16, Pill-Buttons
   mit Pfeilkreis. Keine Verläufe, keine Blobs.
   Reihenfolge der Datei = Reihenfolge der Kaskade:
   1 Schrift · 2 Tokens · 3 Grundgerüst · 4 Typo · 5 Bausteine ·
   6 Kopfzeilen · 7 Hero+3D · 8 Sektionen · 9 Formular · 10 Fuß ·
   11 Motion · 12 Barrierefreiheit · 13 Mobil (ganz am Ende, gewinnt).
   ========================================================================= */

/* ---- 1 Schrift ---------------------------------------------------------- */
/* Ersatzschrift mit angeglichenen Metriken: ohne sie springt das Layout,
   sobald Manrope nachlaedt (gemessen CLS 0,21 auf dem Handy). */
@font-face{
  font-family:ManropeErsatz;src:local("Arial");font-weight:100 500;
  ascent-override:101%;descent-override:28%;line-gap-override:0%;size-adjust:103%;
}
/* Fette Schnitte bekommen Arial Bold als Ersatz. Vorher lief fetter Text im normalen
   Arial-Schnitt 6–9 % schmaler als Manrope 700/800; Ueberschriften brachen beim
   Schriftwechsel anders um (23.09.2026). Breiten gemessen: jetzt ±1 %. */
@font-face{
  font-family:ManropeErsatz;src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600;
  ascent-override:101%;descent-override:28%;line-gap-override:0%;size-adjust:98.5%;
}
@font-face{
  font-family:ManropeErsatz;src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700 900;
  ascent-override:101%;descent-override:28%;line-gap-override:0%;size-adjust:102%;
}
@font-face{font-family:Manrope;src:url(../fonts/manrope-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(../fonts/manrope-500.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url(../fonts/manrope-600.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url(../fonts/manrope-700.woff2)format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url(../fonts/manrope-800.woff2)format("woff2");font-weight:800;font-display:swap}

/* ---- 2 Tokens ----------------------------------------------------------- */
:root{
  /* Marke */
  --tk:#00B6AA;                    /* Fuellfarbe: Flaechen, Icon-Fuellungen, Raender, Tints */
  --tk-fest:#00736A;               /* Text + Icons auf Weiss/Tint (5,7:1) */
  --tk-knopf:#007F76;              /* Button-Fuellung unter weissem Text (4,9:1) */
  --tk-gross:#008C82;              /* grosse Akzentwoerter auf Weiss + Marker-Tint (3,4:1; ohne Marker 4,1:1) */
  --tk-hell:#33C5BB;               /* Tuerkis-Text auf Dunkel (7,2:1) */
  /* Kanal-Tripel fuer rgba(var(--x),a): Schimmer, Tints, Schatten. Eine Markenschicht
     (z. B. ReeZone) tauscht nur diese Tokens, die Regeln bleiben gleich (26.09.2026). */
  --tk-rgb:0,182,170;
  --tk-fest-rgb:0,115,106;
  --tk-tief-rgb:0,150,140;
  --tk-akzent-rgb:0,155,144;
  --tk-akzent-grau:#00847A;        /* Akzentwort auf Grau (3,4:1 mit Marker) */
  --tk-tint:rgba(var(--tk-rgb),.10);
  --tk-tint-2:rgba(var(--tk-rgb),.14);
  --ink:#252525;
  --text:#575857;                  /* Fliesstext, Lead */
  --text-karte:rgba(37,37,37,.80); /* Kartentext */
  --grau:#EEEEEE;
  --weiss:#FFFFFF;
  --gelb:#FBC114;                  /* nur Sterne */
  --rot:#B92D26;      --rot-tint:rgba(185,45,38,.08);
  --gruen:#0F7B4E;    --gruen-tint:rgba(15,123,78,.10);

  /* Auf-Flaeche-Farben, je Sektion ueberschrieben */
  --auf:var(--ink);
  --auf-2:var(--text);
  --rand:1px solid rgba(37,37,37,.10);
  --rand-bedien:1px solid rgba(37,37,37,.5);   /* Bedienelemente: WCAG 1.4.11 */
  --karte-bg:rgba(255,255,255,.62);
  --karte-rand:rgba(37,37,37,.10);
  --akzent:var(--tk-gross);

  /* Formen */
  --box:1180px;
  --r-karte:10px;
  --r-bild:16px;
  --r-gross:24px;
  --r-pill:70px;
  --p-karte:var(--s-3);
  --schatten-bild:0 24px 60px rgba(37,37,37,.16);
  --schatten-hover:0 18px 40px -22px rgba(37,37,37,.30);
  --schatten-karte:0 1px 2px rgba(37,37,37,.03),0 14px 34px -24px rgba(37,37,37,.18);
  /* Milchglas — nur dort, wo etwas dahinter liegt (Foto, 3D, Dunkel).
     Auf Weiss ist Glas unsichtbar und kostet nur Leistung. */
  --glas:rgba(255,255,255,.64);
  --glas-rand:1px solid rgba(255,255,255,.72);
  --glas-blur:blur(18px) saturate(1.5);
  --glas-schatten:0 10px 30px -14px rgba(37,37,37,.35);

  /* Kopfzeilen */
  --h-top:38px;        /* Vertrauensleiste (im Fluss, nicht mehr fixiert) */
  --h-kopf:76px;       /* Menue-Pille 64 + 12 Abstand — klebt oben        */

  /* Abstandsskala = das 5er-Raster der Marke (Elementor-Regelwerk von Mikes
     LPs: Sektion 120/80/64 · Kopf->Inhalt 60/40 · Karte 30 · Gap 20).
     Jeder vertikale Abstand ist einer dieser Werte. */
  --s-1:10px;   /* eng: Label -> Wert, Icon -> Text                */
  --s-2:20px;   /* Standard: Ueberschrift -> Text, Grid-Gap        */
  --s-3:30px;   /* Karten-Innenabstand                             */
  --s-4:40px;   /* Innenblock, Leisten                             */
  --s-5:60px;   /* Sektionskopf -> Inhalt                          */
  --s-6:80px;   /* grosser Block innerhalb einer Sektion           */
  --s-sekt:120px;   /* Sektion (Tablet 80, Handy 64)               */
  --s-naht:80px;    /* Naht innerhalb des dunklen Kapitels         */

  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---- 3 Grundgeruest ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--h-kopf) + 24px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Scroll-Verankerung aus (Messpflicht Sprungziele, 23.09.2026): Chrome verschob
   den Anker-Sprung zum Formular 100 ms nach der Ankunft um +30 px — das Ziel
   landete unter der Kopfzeile. Ohne Verankerung landet er exakt; Spruenge faehrt
   seite.js selbst an. Voraussetzung: nichts ueber dem Blickfeld aendert spaeter
   seine Hoehe (Bilder mit Massen, Panel-Umzug beim Laden). */
html,body{overflow-anchor:none}
/* Sprungziele bekommen per Skript tabindex=-1 + Fokus (Vorlesesoftware liest dort
   weiter). Kein Rahmen um ganze Sektionen: das Ziel ist sichtbar, der Fokus nur Lesemarke. */
section[tabindex="-1"]:focus,main [id][tabindex="-1"]:focus{outline:none}
body{
  margin:0;font:400 16px/1.625 Manrope,ManropeErsatz,system-ui,sans-serif;
  color:var(--ink);background:var(--weiss);
  -webkit-font-smoothing:antialiased;overflow-x:clip;   /* clip, nicht hidden: hidden killt sticky */
}
img,svg,canvas,video{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
b,strong{font-weight:700}
.box{width:min(var(--box),100% - 40px);margin-inline:auto}
.box--schmal{max-width:900px}

.sekt{padding:var(--s-sekt) 0}
main{display:block}

/* Flaechen: exakt drei Grundtoene (Marke). Darueber liegen leise Tuerkis-
   Schimmer und feine Strukturen — Landingpage, nicht Katalog. Die Karten
   sind Milchglas und lassen genau diese Schimmer durch. */
.fl-weiss{background:
  radial-gradient(70% 55% at 88% -6%,rgba(var(--tk-rgb),.11),transparent 70%),
  radial-gradient(55% 45% at -6% 106%,rgba(var(--tk-rgb),.07),transparent 70%),
  var(--weiss)}
main > .fl-weiss:nth-of-type(even):not(.hero){background:
  radial-gradient(70% 55% at 10% -6%,rgba(var(--tk-rgb),.11),transparent 70%),
  radial-gradient(55% 45% at 104% 100%,rgba(var(--tk-rgb),.07),transparent 70%),
  var(--weiss)}
.fl-grau{background:
  radial-gradient(60% 50% at 0% 0%,rgba(var(--tk-rgb),.12),transparent 70%),
  radial-gradient(50% 45% at 100% 100%,rgba(var(--tk-rgb),.07),transparent 70%),
  linear-gradient(180deg,#F1F3F3,#EAEEED);
  --karte-bg:rgba(255,255,255,.72);--akzent:var(--tk-akzent-grau)}   /* auf Grau + Marker 3,4:1 */
.fl-tief{background:
  radial-gradient(45% 55% at 82% 18%,rgba(var(--tk-rgb),.20),transparent 70%),
  radial-gradient(40% 40% at 8% 92%,rgba(var(--tk-rgb),.10),transparent 70%),
  linear-gradient(160deg,#282C2C,#1C2423 55%,#172120);
  color:var(--weiss);
  --auf:var(--weiss);--auf-2:rgba(255,255,255,.80);
  --rand:1px solid rgba(255,255,255,.10);--karte-bg:rgba(255,255,255,.07);
  --karte-rand:rgba(255,255,255,.14);--akzent:var(--tk-hell)}
/* Strukturen im Hintergrund — leise, ueber Masken ausgeblendet */
.sekt,.trust,.kapitel-dunkel,.hero{position:relative;isolation:isolate}
.sekt > .box,.trust > .box,.hero > *{position:relative;z-index:1}
/* Aurora: zwei weiche Lichtflecken pendeln langsam (transform-only, laeuft
   nur, solange die Sektion im Bild ist — app.js setzt .ist-sichtbar). */
.deko-aurora{overflow:clip}
.deko-aurora::before,.deko-aurora::after{content:"";position:absolute;z-index:0;pointer-events:none;border-radius:50%;
  will-change:transform;animation-play-state:paused}
.deko-aurora::before{left:-12%;top:-35%;width:64vmax;height:64vmax;
  background:radial-gradient(circle at center,rgba(var(--tk-rgb),.30),rgba(var(--tk-rgb),0) 62%);
  animation:auroraA 22s ease-in-out infinite alternate}
.deko-aurora::after{right:-18%;bottom:-45%;width:56vmax;height:56vmax;
  background:radial-gradient(circle at center,rgba(var(--tk-tief-rgb),.24),rgba(var(--tk-tief-rgb),0) 62%);
  animation:auroraB 27s ease-in-out infinite alternate}
.hero.deko-aurora::before{background:radial-gradient(circle at center,rgba(var(--tk-rgb),.13),rgba(var(--tk-rgb),0) 62%);left:-20%;top:-50%}
.hero.deko-aurora::after{background:radial-gradient(circle at center,rgba(var(--tk-rgb),.09),rgba(var(--tk-rgb),0) 62%);right:-20%;bottom:-20%}
.deko-aurora.ist-sichtbar::before,.deko-aurora.ist-sichtbar::after{animation-play-state:running}
@keyframes auroraA{from{transform:translate(0,0) scale(1)}to{transform:translate(14%,12%) scale(1.18)}}
@keyframes auroraB{from{transform:translate(0,0) scale(1.12)}to{transform:translate(-12%,-16%) scale(.92)}}
.kapitel-dunkel > *{position:relative;z-index:1}
.fl-tief h1,.fl-tief h2,.fl-tief h3{color:var(--weiss)}
.fl-tief .lead,.fl-tief p{color:var(--auf-2)}

/* ---- 4 Typografie ------------------------------------------------------- */
h1,h2,h3,h4{margin:0;color:var(--auf);text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(36px,4.5vw,64px);line-height:1.04;font-weight:700}
h2{font-size:clamp(32px,3.5vw,50px);line-height:1.2;font-weight:700}
h3{font-size:18px;line-height:28px;font-weight:800;letter-spacing:-.01em}
.lead{font-size:18px;line-height:1.6;color:var(--auf-2);max-width:66ch;text-wrap:pretty}
p{color:var(--auf-2)}
.akzent,.akzent-hell{
  color:var(--akzent);
  background-image:linear-gradient(rgba(var(--tk-rgb),.2),rgba(var(--tk-rgb),.2));
  background-repeat:no-repeat;background-size:100% .38em;background-position:0 84%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.akzent-hell{color:var(--tk-hell)}
.fl-tief .akzent,.kapitel-dunkel .akzent,.akzent-hell{background-image:linear-gradient(rgba(var(--tk-rgb),.3),rgba(var(--tk-rgb),.3))}
small,.klein{font-size:14px;line-height:20px}

/* Sektionskopf: Badge -> H2 -> Lead. Zentriert als Standard, links in Splits. */
.sekt__kopf{margin-bottom:var(--s-5)}
.sekt__kopf--mitte{text-align:center}
.sekt__kopf--mitte .lead{margin-inline:auto}
.sekt__kopf .badge{margin-bottom:var(--s-2)}
.sekt__kopf h2 + .lead{margin-top:var(--s-2)}
.sekt__kopf--zeile{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap}

/* Badge — Markenelement: 12/700, versal, 2px gesperrt, Tuerkis auf Tint, r10 */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:var(--r-karte);
  background:var(--tk-tint);color:var(--tk-fest);
  font-size:12px;line-height:18px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
}
.fl-tief .badge,.badge--hell{background:var(--tk-tint-2);color:var(--tk-hell)}

/* ---- 5 Bausteine -------------------------------------------------------- */

/* Icons */
.ic-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;color:var(--tk-fest)}
.ic--20{width:20px;height:20px}
.ic--28{width:28px;height:28px}
.ic--gelb{fill:var(--gelb);stroke:none;color:var(--gelb)}
/* Icon-Kreis: hell = Tint + Tuerkis-Icon, dunkel = Kontur weiss/40 + weisses Icon */
.ic-kreis{
  display:grid;place-items:center;flex:0 0 auto;
  width:50px;height:50px;border-radius:50%;
  background:rgba(var(--tk-rgb),.12);color:var(--tk-fest);
}
.ic-kreis .ic{color:inherit}
.fl-tief .ic-kreis{width:56px;height:56px;background:transparent;border:1px solid rgba(255,255,255,.4);color:var(--weiss)}

/* Buttons — Pille mit Pfeilkreis, wie auf schwebewerk.de */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:20px;
  min-height:60px;padding:5px 5px 5px 30px;border-radius:var(--r-pill);
  background:var(--tk-knopf);color:var(--weiss);text-decoration:none;
  font:700 14px/1.2 Manrope,ManropeErsatz,system-ui,sans-serif;letter-spacing:2px;text-transform:uppercase;
  border:0;cursor:pointer;text-wrap:balance;text-align:left;
  transition:background .2s var(--ease),transform .12s var(--ease),box-shadow .2s var(--ease);
}
.btn:hover{background:var(--tk-fest);box-shadow:0 12px 30px -14px rgba(var(--tk-fest-rgb),.6)}
.btn:active{transform:scale(.98)}
.btn__pfeil{
  display:grid;place-items:center;flex:0 0 auto;
  width:50px;height:50px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.btn__pfeil svg{width:18px;height:18px;stroke:currentColor;color:inherit;stroke-width:2;transition:transform .25s var(--ease)}
.btn:hover .btn__pfeil{background:rgba(255,255,255,.14)}
.btn:hover .btn__pfeil svg{transform:translate(2px,-2px)}
.btn--klein{min-height:50px;padding-left:25px;gap:14px}
.btn--klein .btn__pfeil{width:40px;height:40px}
.btn--geist{background:transparent;color:var(--auf);border:1px solid rgba(37,37,37,.25)}
.btn--geist:hover{background:rgba(37,37,37,.05);box-shadow:none}
.btn--geist .btn__pfeil{border-color:rgba(37,37,37,.4)}
.btn--geist[data-3d]{border:2px solid var(--tk-fest);color:var(--tk-fest)}   /* Mike 02.11.2026 Punkt 11: „Deutlicher auffordern zur 3D ansicht“ */
.btn--geist[data-3d] .btn__pfeil{border-color:var(--tk-fest)}
.fl-tief .btn--geist,.kapitel-dunkel .btn--geist{color:var(--weiss);border-color:rgba(255,255,255,.4)}
.fl-tief .btn--geist:hover{background:rgba(255,255,255,.08)}
.fl-tief .btn--geist .btn__pfeil{border-color:rgba(255,255,255,.4)}
.btn--film .btn__pfeil svg{transform:none;width:16px}
.btn--film:hover .btn__pfeil svg{transform:translateX(2px)}
.btn--voll{width:100%}

/* DIE Karte. Es gibt genau eine. */
.karte{
  position:relative;
  background:var(--karte-bg);border:1px solid var(--karte-rand);border-radius:var(--r-karte);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);
  padding:var(--p-karte);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(37,37,37,.04),0 14px 34px -24px rgba(37,37,37,.22);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.fl-tief .karte{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 34px -24px rgba(0,0,0,.6)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.karte{background:rgba(255,255,255,.94)}.fl-tief .karte{background:rgba(255,255,255,.07)}}

.karte h3{color:var(--auf)}
.karte h3 + p{margin-top:var(--s-1)}
.karte p{font-size:16px;line-height:26px;color:var(--text-karte)}
.fl-tief .karte p{color:var(--auf-2)}
.karte .ic-kreis{margin-bottom:var(--s-2)}
@media(hover:hover){
  .karte--hebt:hover{transform:translateY(-4px);box-shadow:var(--schatten-hover);border-color:rgba(37,37,37,.18)}
  .fl-tief .karte--hebt:hover{border-color:rgba(255,255,255,.22);box-shadow:0 18px 40px -20px rgba(0,0,0,.6)}
}
.karte--gross{border-radius:var(--r-gross);padding:var(--s-4)}
.karte--top{border:2px solid var(--tk);box-shadow:var(--schatten-bild)}
.karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.karten--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Nummernkarte (Bento) */
.karte__nr{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--tk-tint-2);color:var(--tk-fest);font-size:14px;font-weight:800;
  margin-bottom:var(--s-2);
}
.karte__zahl{color:var(--tk-fest);font-weight:800;margin-right:10px;font-variant-numeric:tabular-nums}

/* Bild */
.bild{position:relative;border-radius:var(--r-bild);box-shadow:var(--schatten-bild);overflow:hidden;margin:0}
.bild img{width:100%;height:100%;object-fit:cover}
.bild__glas{
  position:absolute;left:16px;right:16px;bottom:16px;z-index:2;
  padding:12px 16px;border-radius:var(--r-karte);
  background:var(--glas);-webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);
  border:var(--glas-rand);box-shadow:var(--glas-schatten);
  font-size:14px;line-height:20px;font-weight:700;color:var(--ink);
}
.bild__glas--person{display:grid;gap:2px}
.bild__glas--person b{font-size:15px;font-weight:800}
.bild__glas--person span{font-size:13px;line-height:18px;font-weight:500;color:var(--text)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.bild__glas{background:rgba(255,255,255,.92)}}
img.frei{box-shadow:none;border-radius:0}

/* Split: Bild + Text */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:60px;align-items:stretch}
.split__bild{height:100%;min-height:360px}
.split__bild img{height:100%;width:100%;object-fit:cover}
.split__text{align-self:center}
.split--text-links{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.split--text-links .split__bild{order:2}
.split h2 + .lead{margin-top:var(--s-2)}
.split .lead + .lead{margin-top:var(--s-1)}
.split .lead + .hakenliste,.split .lead + .callout,.split .hakenliste + .callout{margin-top:var(--s-2)}

/* Bereichs-Stapel (05.10.2026, LP3 #einstellungen): breite Erklaerkarten, Bild und Text im
   Wechsel (ungerade Bild links, gerade Bild rechts). Sie kleben auf ALLEN Breiten versetzt
   unter der Menue-Pille, die naechste schiebt sich darueber (Muster Karten-Stapel Nr. 22).
   Deckender Grund, sonst scheint die untere Karte durch. seite.js setzt .ist-oben, --zu
   (0..1: wie weit die Folgekarte diese Karte verdeckt; sie wird minimal kleiner, ihr Bild dunkler) und
   .stapel__karte--frei, wenn eine Karte nicht ins Fenster passt (sie klebt dann nicht, sonst
   bliebe ihr unterer Teil unerreichbar). Ohne Skript kleben die Karten trotzdem. */
/* Gleich hohe Karten (1fr = hoechste): sonst ragt eine hoehere Vorgaengerkarte unten unter
   der naechsten heraus (Fehlerklasse vom Karten-Stapel, gemessen 16/18 px bei 390/360) */
.stapel{display:grid;gap:var(--s-5);grid-auto-rows:1fr}
.stapel__karte{
  position:sticky;top:calc(var(--h-kopf) + var(--s-1) + var(--i,0) * 8px);   /* eng: passt so auch auf 1366x768 (657 px Fenster) */
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-5);align-items:center;
  padding:var(--s-4);border-radius:var(--r-gross);
  background:linear-gradient(160deg,#2C3232,#1E2726);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 -18px 40px -24px rgba(0,0,0,.8);
  transform-origin:50% 0;transform:scale(calc(1 - var(--zu,0) * .05));
  transition:border-color .25s var(--ease);
}
.stapel__karte:nth-child(even){grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.stapel__karte:nth-child(even) .stapel__bild{order:2}
.stapel__karte.ist-oben{border-color:rgba(var(--tk-rgb),.5)}
/* nicht klebend: Spezifitaet ueber den Breiten-Regeln (die setzen top mit :nth-child), sonst
   verschoebe position:relative die Karte um ihren top-Wert nach unten */
.stapel > .stapel__karte.stapel__karte--frei{position:relative;top:auto}
.stapel__bild{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--r-bild);overflow:hidden;
  background:#101010;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.stapel__bild img{width:100%;height:100%;object-fit:cover}
/* Zuruecktreten: nur das BILD dunkelt ab. Abgedunkelter Text fiel unter 4,5:1, solange er noch
   zu sehen war (Badge 3,1:1) — Text in Leseposition bleibt voll lesbar (GATE scrollgebundene Zustaende) */
.stapel__bild::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:#0B1010;opacity:calc(var(--zu,0) * .55)}
.stapel__text .badge{margin-bottom:var(--s-2)}
.stapel__text h3{font-size:24px;line-height:1.2;color:var(--weiss)}
.stapel__text h3 + p{margin-top:var(--s-2)}
.stapel__text p{font-size:16px;line-height:26px;color:var(--auf-2);max-width:52ch}
/* Zwei Zustaende in einem Bild (Demo): Beschriftung je Bildhaelfte, Punkt in der Zustandsfarbe */
.stapel__zustand{position:absolute;left:12px;z-index:1;display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:var(--r-karte);background:rgba(16,16,16,.8);
  color:var(--weiss);font-size:13px;line-height:18px;font-weight:700}
.stapel__zustand::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--farbe)}
.stapel__zustand--oben{top:12px;--farbe:#F26B55}
.stapel__zustand--unten{top:calc(50% + 12px);--farbe:var(--tk-hell)}
.stapel__schluss{margin-top:var(--s-5);display:grid;justify-items:center;gap:var(--s-3);text-align:center}
/* Icon im Titel (Mike 14.10.2026: „auch die koennte man mit Icons versehen, einfach in dem Titel").
   Vertrag: <h3><span class="ic-kreis"><svg class="ic">…</svg></span>Kopfteil per Fernbedienung</h3> */
.stapel__text h3:has(> .ic-kreis){display:flex;align-items:center;gap:12px}
.stapel__text h3 .ic-kreis{width:40px;height:40px;flex:none}
.stapel__text h3 .ic-kreis .ic{width:20px;height:20px}
/* Bereichs-Stapel auf heller Flaeche (Mike 14.10.2026: „die Sektion wirkt sehr dunkel … in den helleren
   Stil umwandeln"): weisse Karte mit Haarlinie, Tuerkis-Rand oben liegend, Zuruecktreten hellt das Bild
   auf statt es abzudunkeln. Text bleibt voll deckend (Kontrast gemessen in docs/AENDERUNGEN-2026-10-14.md). */
.fl-grau .stapel__karte,.fl-weiss .stapel__karte{background:var(--weiss);border:1px solid rgba(37,37,37,.10);
  box-shadow:var(--schatten-karte),0 -18px 40px -24px rgba(37,37,37,.25)}
.fl-grau .stapel__karte.ist-oben,.fl-weiss .stapel__karte.ist-oben{border-color:var(--tk)}
.fl-grau .stapel__text h3,.fl-weiss .stapel__text h3{color:var(--ink)}
.fl-grau .stapel__text p,.fl-weiss .stapel__text p{color:var(--text-karte)}
.fl-grau .stapel__bild,.fl-weiss .stapel__bild{background:var(--grau);box-shadow:0 0 0 1px rgba(37,37,37,.08)}
.fl-grau .stapel__bild::after,.fl-weiss .stapel__bild::after{background:var(--weiss);opacity:calc(var(--zu,0) * .45)}

/* Hakenliste — brand: 20px Tuerkis-Haken, fette Titel */
.hakenliste{display:grid;gap:14px}
.hakenliste li{display:grid;grid-template-columns:22px 1fr;column-gap:12px;align-items:start;color:var(--auf-2)}
.hakenliste li b{color:var(--auf)}
.hakenliste li .ic{width:22px;height:22px;stroke-width:2.2;margin-top:2px}
.hakenliste li b + span,.hakenliste li b + p{display:block;margin-top:2px}
/* Vorteile fuer den Kunden: gruen statt Markentuerkis (Mikes Wunsch) */
.hakenliste--gruen .ic{color:var(--gruen)}
.hakenliste--gross.hakenliste--gruen .haken{background:var(--gruen);color:#fff}
.hakenliste--gross.hakenliste--gruen .haken .ic{color:#fff}
.hero__mikro .ic{color:var(--gruen)}
/* grosse Variante: eine Karte, Zeilen mit Haarlinie */
.hakenliste--gross{gap:0}
.hakenliste--gross li{grid-template-columns:32px 1fr;column-gap:16px;padding:var(--s-2) 0;border-top:1px solid rgba(37,37,37,.08)}
.hakenliste--gross li:first-child{border-top:0;padding-top:0}
.hakenliste--gross li:last-child{padding-bottom:0}
.hakenliste--gross .haken{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:rgba(var(--tk-rgb),.12);color:var(--tk-fest);
}
.hakenliste--gross .haken .ic{width:16px;height:16px;stroke-width:2.6;margin:0}
.hakenliste--gross b{font-size:16px;line-height:26px}
.hakenliste--gross p{margin-top:4px;font-size:16px;line-height:26px;color:var(--text-karte)}

/* Info-Container: kleine, dezente Notiz mit Icon (Bedienhinweise, Zusagen) */
.info{display:inline-flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:var(--r-karte);
  background:var(--tk-tint);border:1px solid rgba(var(--tk-rgb),.22);
  font-size:14px;line-height:20px;color:var(--text-karte);text-align:left;max-width:100%}
.info b{color:var(--ink)}
.info__ic{display:grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--tk-fest);color:#fff}
.info__ic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.info--hell{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.85)}
.info--hell .info__ic{background:rgba(255,255,255,.18)}
.drucktest__hinweis.info{margin-top:var(--s-2)}
.form-hinweis.info{margin-top:var(--s-2);display:flex;width:100%;max-width:none}
.abschluss__klein.info{margin-top:var(--s-2);font-size:14px}
.info--voll{display:flex;width:100%;max-width:none;margin-top:var(--s-3)}
/* Callout tuerkis + Hinweisbox */
.callout{
  padding:28px;border-radius:var(--r-bild);
  background:var(--tk-knopf);color:var(--weiss);
  font-size:16px;line-height:26px;font-weight:700;
}
/* Callout mit Haken (Mike 14.10.2026 zu „Perfekter Schlaf beginnt unter der Matratze": „mit einem
   Check-Icon versehen … und horizontal zentriert"). Vertrag: <div class="callout callout--haken">
   <svg class="ic"><use href="#i-haken"/></svg><span>…</span></div>. Handy: Haken ueber dem Text, beides
   mittig (in einer Zeile laege die Textmitte um Haken + Abstand neben der Kastenmitte). */
.callout--haken{display:flex;align-items:center;justify-content:center;text-align:center;gap:12px}   /* mittig auf allen Breiten (Mike 14.10.2026: allgemein zentriert) */
.callout--haken .ic{width:24px;height:24px;flex:none;color:var(--weiss);stroke-width:2.4}
.hinweis{
  margin-top:var(--s-5);padding:20px 24px;border-radius:var(--r-bild);
  display:flex;gap:16px;align-items:flex-start;
  background:rgba(251,193,20,.14);border:1px solid rgba(183,121,31,.35);
  font-size:15px;line-height:24px;color:var(--text-karte);
}
.hinweis__ic{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#B7791F;color:#fff}
.hinweis__ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hinweis p{color:var(--text-karte)}
.hinweis b{display:block;color:#7A5210;font-size:13px;line-height:18px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px}

/* Trust-Leiste (dunkel, 4 Icons) */
.trust{padding:var(--s-4) 0}
.trust__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.trust__item{display:flex;align-items:center;justify-content:center;gap:16px;font-size:16px;line-height:26px;font-weight:400}
.trust__bild{width:64px;height:64px;flex:0 0 auto;border-radius:50%;transition:transform .34s var(--ease)}
.trust__item:hover .trust__bild{transform:scale(1.06) rotate(-3deg)}
.trust__icon{
  display:grid;place-items:center;flex:0 0 auto;
  width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  color:var(--weiss);
}
.trust__icon .ic{color:inherit;width:26px;height:26px}

/* Slider (Fachstimmen) */
.slider{position:relative}
/* Alle Folien liegen uebereinander; die aktive blendet ein (Foto faded,
   Zitatkarte tauscht). Hoehe = hoechste Folie, damit nichts springt. */
.slider__spur{display:grid;overflow:visible;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.slider__spur > *{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.slider__spur > .ist-aktiv{opacity:1;pointer-events:auto}
html:not(.js-slider) .slider__spur > *{opacity:1;position:static;margin-bottom:var(--s-4)}
.slider__pfeile{display:flex;gap:10px}
.slider__pfeil{
  display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-karte);
  border:0;background:var(--ink);color:var(--weiss);cursor:pointer;
  transition:background .2s var(--ease),transform .12s var(--ease),opacity .2s;
}
.slider__pfeil svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.slider__pfeil:hover{background:var(--tk-knopf)}
.slider__pfeil:active{transform:scale(.96)}
.slider__pfeil[disabled]{opacity:.35;cursor:default}
.slider__pfeil[disabled]:hover{background:var(--ink)}
.slider__punkte{display:flex;justify-content:center;gap:8px;margin-top:var(--s-2)}
.slider__punkt{width:44px;height:44px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.slider__punkt i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(37,37,37,.22);transition:width .25s var(--ease),background .25s var(--ease)}
.slider__punkt[aria-current="true"] i{width:26px;border-radius:4px;background:var(--tk-fest)}

/* Zitat = Foto links, Text rechts */
.zitat{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:40px;align-items:stretch}
.zitat .bild{aspect-ratio:4/5;max-height:520px}
/* Hohe Zitatkarten: Inhalt vertikal mittig (Mike 14.10.2026: „relativ hohe Zitate … die koennte man
   vertikal zentrieren"); die Attribution folgt mit festem Abstand statt unten angeklebt. Foto unveraendert. */
.zitat .zitat__text{display:flex;flex-direction:column;justify-content:center;height:100%}
.zitat .bild img{object-position:50% 20%}
.zitat__text{position:relative}
.zitat__text .badge{margin-bottom:var(--s-2);align-self:flex-start}
.zitat__zeichen{width:36px;height:36px;color:var(--tk);opacity:.7;margin-bottom:var(--s-2)}
.zitat__wer{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid rgba(37,37,37,.08);display:grid;gap:2px}
.zitat__wer b{font-size:16px;line-height:24px;color:var(--ink)}
.zitat__wer span{font-size:14px;line-height:20px;color:var(--text)}
.zitat__mehr{margin-bottom:var(--s-2)}
.zitat__satz{font-size:clamp(22px,2vw,26px);line-height:1.4;font-weight:700;color:var(--ink);letter-spacing:-.01em;text-wrap:pretty}
.zitat__name{margin-top:var(--s-2);font-weight:800;font-size:16px;color:var(--ink)}
.zitat__rolle{font-size:14px;line-height:20px;color:var(--text)}
.zitat__mehr{margin-top:var(--s-2);font-size:16px;line-height:26px;color:var(--text)}

/* FAQ — eine Karte, Zeilen mit Haarlinie, Plus dreht */
.faq{width:100%}
.faq details{border-top:1px solid rgba(37,37,37,.08)}
.faq details:first-child{border-top:0}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  display:flex;align-items:center;gap:20px;
  min-height:56px;padding:20px 56px 20px 0;
  font-size:18px;line-height:28px;font-weight:700;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;translate:0 -50%;
  width:36px;height:36px;border-radius:50%;background:var(--tk-tint-2);
  /* Plus aus zwei Balken */
  background-image:linear-gradient(var(--tk-fest),var(--tk-fest)),linear-gradient(var(--tk-fest),var(--tk-fest));
  background-size:14px 2px,2px 14px;background-position:center;background-repeat:no-repeat;
  transition:transform .3s var(--ease),background-color .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq__antwort{overflow:hidden}
.faq__antwort p{padding:0 0 24px;max-width:70ch;font-size:16px;line-height:26px;color:var(--text)}

/* Laufband — Partnerlogos als Endlosschleife */
.laufband{width:min(var(--box),100%);margin-top:var(--s-6);text-align:left;overflow:hidden;display:grid;justify-items:stretch}
.laufband__kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-2)}
.laufband__titel{display:block;font-size:12px;line-height:18px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
.laufband__fenster{
  overflow:clip;width:100%;max-width:100%;contain:layout paint;position:relative;height:44px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.laufband__spur{
  position:absolute;left:0;top:0;height:100%;
  display:flex;align-items:center;gap:var(--s-5);width:max-content;
  will-change:transform;
}
/* Ohne JS laeuft die CSS-Schleife; mit JS (.js-laufband) treibt app.js die
   Position — dann laesst sich die Leiste greifen und endlos wischen. */
html:not(.js-laufband) .laufband__spur{animation:laufband 34s linear infinite}
html:not(.js-laufband) .laufband__fenster:hover .laufband__spur{animation-play-state:paused}
.js-laufband .laufband__fenster{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.js-laufband .laufband__fenster.ist-gegriffen{cursor:grabbing}
.laufband__spur li{flex:0 0 auto}
.laufband__spur img{height:40px;width:auto;object-fit:contain;-webkit-user-drag:none;user-select:none;pointer-events:none;
  transition:transform .3s var(--ease)}
.laufband__spur li:hover img{transform:scale(1.06)}
@keyframes laufband{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.laufband__pause{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;
  border:var(--rand);border-radius:var(--r-pill);
  background:rgba(255,255,255,.6);cursor:pointer;
  font:700 13px Manrope,system-ui,sans-serif;color:var(--ink);
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.laufband__pause svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.laufband__pause:hover{background:#fff;border-color:rgba(37,37,37,.25)}
.laufband.ist-pausiert .laufband__spur{animation-play-state:paused}

/* ---- 6 Kopfzeilen ------------------------------------------------------- */
/* Vertrauensleiste: NICHT fixiert, in Content-Breite — ein dunkler Balken
   mit runden unteren Ecken ueber der Menue-Pille, scrollt mit weg. */
.topleiste{position:relative;z-index:51;color:rgba(255,255,255,.86);font-size:13.5px;line-height:1.4}
.topleiste__inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:var(--h-top);flex-wrap:nowrap;padding:0 20px;
  background:var(--ink);border-radius:0 0 var(--r-karte) var(--r-karte);
}
.topleiste p{display:flex;align-items:center;gap:10px;margin:0;color:inherit}
.topleiste__bewertung strong{color:var(--weiss);font-weight:800;font-size:15px}
.topleiste__bewertung img{width:18px;height:18px;flex:0 0 auto}
.topleiste__sterne{display:inline-flex;gap:1px}
.topleiste__sterne svg{width:14px;height:14px;fill:var(--gelb);color:var(--gelb)}   /* color: das Symbol fuellt mit currentColor */
.topleiste__kontakt{gap:24px}
.topleiste__kontakt a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:inherit;transition:color .2s}
.topleiste__kontakt a:hover{color:var(--tk-hell)}
.topleiste__kontakt svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--tk);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Schwebende Milchglas-Pille (Mikes Wunsch) — Inhalt im Markenstil */
.kopf{position:sticky;top:12px;z-index:50;pointer-events:none;margin-top:12px}
.kopf__inner{
  pointer-events:auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-1);
  height:64px;padding:0 8px 0 20px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(37,37,37,.06),0 16px 44px -18px rgba(37,37,37,.32);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.js-gescrollt .kopf__inner{background:rgba(255,255,255,.74);box-shadow:0 1px 2px rgba(37,37,37,.06),0 18px 46px -18px rgba(37,37,37,.36)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.kopf__inner{background:rgba(255,255,255,.96)}}
.kopf__logo{display:flex;align-items:center;text-decoration:none}
.kopf__logo img{height:34px;width:auto}
.kopf__nav{display:flex;gap:2px}
.kopf__nav a{
  display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-pill);
  text-decoration:none;color:var(--ink);
  font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.kopf__nav a:hover{color:var(--tk-fest);background:var(--tk-tint)}
.kopf__nav a[aria-current="true"]{color:var(--tk-fest);background:var(--tk-tint-2)}
.kopf .btn{min-height:50px;padding-left:25px;gap:14px}
.kopf .btn .btn__pfeil{width:40px;height:40px}
/* Kopfzeile passt immer (seite.js kopfPasst, 05.10.2026): ab 901 px behalten Logo und Knopf ihre
   Groesse, Menuepunkte weichen (.ist-weg), passt keiner, ist das Menue aus (.ist-aus). Ohne Skript
   bleibt es beim alten Verhalten. Am Handy unveraendert (Menue dort ohnehin aus). */
@media(min-width:901px){
  .js-kopf .kopf__logo,.js-kopf .kopf .btn{flex-shrink:0}
  .js-kopf .kopf .btn{white-space:nowrap}
}
.kopf__nav a.ist-weg,.kopf__nav.ist-aus{display:none}

/* ---- 7 Hero + 3D-Buehne ------------------------------------------------- */
.hero{
  background:
    radial-gradient(48% 36% at 50% 9%,rgba(var(--tk-rgb),.15),transparent 70%),
    radial-gradient(38% 40% at 6% 58%,rgba(var(--tk-rgb),.07),transparent 70%),
    radial-gradient(38% 40% at 96% 40%,rgba(var(--tk-rgb),.06),transparent 70%),
    var(--weiss);
  position:relative;isolation:isolate;overflow:clip;
  padding:var(--s-5) 20px var(--s-6);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero__titel{margin-top:var(--s-2);max-width:none;white-space:nowrap}
.hero__lead{margin-top:var(--s-2);max-width:56ch;margin-inline:auto;font-size:20px;line-height:1.55}
.hero__ctas{margin-top:var(--s-5);display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.hero__mikro{
  margin-top:var(--s-2);display:flex;flex-wrap:nowrap;justify-content:center;gap:var(--s-2);
  font-size:15px;line-height:1.4;font-weight:600;color:var(--text);white-space:nowrap;
}
/* Text im Punkt linksbuendig, Haken an der ersten Zeile: sonst bleibt beim Umbruch der
   Text zentriert und der Haken steht abseits (gemessen 19–72 px Luecke, 23.09.2026) */
.hero__mikro span{display:inline-flex;align-items:flex-start;gap:8px;text-align:left}
.hero__mikro .ic{width:20px;height:20px;stroke-width:2.4;flex:none;margin-top:.5px}
/* Hero-Bild statt 3D-Buehne (Beratungs-LP): gleiche Rolle, gleicher Platz */
.hero__bild{width:min(var(--box),100%);margin-top:var(--s-6);aspect-ratio:16/9}
.hero__bild img{width:100%;height:100%;object-fit:cover}

/* Problem -> Loesung: drei Karten, jede aus rotem und gruenem Block.
   Bewusste Ausnahme von "nur Tuerkis" — Mikes Wunsch: rot X, gruen Haken. */
.probleme{
  margin:var(--s-6) 0 0;width:min(var(--box),100%);text-align:left;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
}
.probleme{grid-template-rows:auto auto}
.problem{
  display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;overflow:hidden;
  border-radius:var(--r-karte);border:var(--rand);background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(37,37,37,.04),0 14px 34px -24px rgba(37,37,37,.22);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.problem__rot,.problem__gruen{display:grid;grid-template-columns:40px 1fr;column-gap:16px;align-items:center;padding:var(--s-2) var(--s-3)}
.problem__rot{background:var(--rot-tint);color:var(--rot)}
.problem__gruen{background:var(--gruen-tint);color:var(--gruen);border-top:1px solid rgba(37,37,37,.06)}
.problem__ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;align-self:center}
.problem__ic svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.problem__ic--rot{background:var(--rot)}
.problem__ic--gruen{background:var(--gruen)}
.problem b{display:block;font-size:16px;font-weight:800;line-height:1.3;margin-bottom:8px;color:inherit}
.problem span:not(.problem__ic){font-size:14px;line-height:1.5;color:var(--text-karte)}

/* Buehne */
.buehne{position:relative;width:100%;height:100%;overflow:visible;scroll-margin-top:var(--s-6)}
.buehne::before{content:"";position:absolute;left:50%;top:56%;translate:-50% -50%;z-index:0;pointer-events:none;
  width:78%;aspect-ratio:1/.5;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(var(--tk-rgb),.16),rgba(var(--tk-rgb),0) 70%)}
.buehne__canvas{position:relative;display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab}
.buehne__canvas:active{cursor:grabbing}
.buehne__fallback{position:absolute;inset:0;display:grid;place-items:center;padding:20px}
.buehne__fallback img{max-height:100%;object-fit:contain}
.buehne__laden{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  background:var(--weiss);font-size:14px;font-weight:600;color:var(--text);transition:opacity .5s var(--ease)}
.buehne__laden[hidden]{display:none!important}
.buehne__hinweis{
  position:absolute;left:clamp(16px,6%,80px);bottom:18px;z-index:2;pointer-events:none;
  display:inline-flex;align-items:center;gap:11px;padding:11px 21px;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--weiss);border:var(--rand);box-shadow:0 6px 22px rgba(37,37,37,.13);
  font-size:14px;font-weight:600;color:var(--ink);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.buehne__hinweis svg{width:19px;height:19px;flex:0 0 auto;stroke:var(--tk-fest);stroke-width:1.9;fill:none;stroke-linecap:round;
  animation:wisch 2.4s ease-in-out infinite}
@keyframes wisch{0%,100%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
.buehne__hinweis.ist-weg{opacity:0;transform:translateY(8px)}
.hinweis__finger{display:none}
.buehne__geste{display:none}
@media(pointer:coarse){
  .hinweis__maus{display:none}
  .hinweis__finger{display:inline}
}

/* Scroll-Fahrt: drei Akte auf 420vh. --f schreibt app.js. */
.fahrt{position:relative;width:100%;max-width:var(--box);margin:var(--s-6) auto 0}
.fahrt__klebt{position:relative;height:clamp(360px,36vw,520px)}
.js-fahrt .fahrt{height:420vh;max-width:none;margin-top:var(--s-6)}
/* Die Buehne ist so breit wie das Fenster (minus Rand), ohne Box, ohne Schatten.
   Rahmen und Panel schieben sich waehrend der Heranfahrt (Akt 1, --f 0..0,4)
   von der Content-Breite nach aussen — das Panel an die Fensterkante, der
   Rahmen waechst und rueckt nach links — und fahren am Ende (--f 0,9..1,0)
   wieder in die Content-Breite zurueck. Das Canvas selbst bleibt gleich gross
   (kein Resize pro Frame). */
.js-fahrt .fahrt__klebt{
  position:sticky;top:calc(var(--h-kopf) + 8px);
  height:calc(100vh - var(--h-kopf) - 16px);
  width:calc(100% - 40px);margin-inline:auto;
  --oeffnung:calc(clamp(0, calc(var(--f, 0) / 0.4), 1) - clamp(0, calc((var(--f, 0) - 0.9) / 0.1), 1));
  --einzug:calc(max(0px, (100% - var(--box)) / 2) * (1 - var(--oeffnung)));
}
.js-fahrt .buehne{position:relative;z-index:1}
.js-fahrt .konfig{right:calc(var(--rail-luft) + var(--einzug))}   /* Panel weicht der Schnellkontakt-Leiste aus */
.js-fahrt .buehne__hinweis{left:calc(clamp(16px,6%,80px) + var(--einzug))}
.fahrt__hinweis{
  position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--text);
  opacity:0;transition:opacity .4s var(--ease);pointer-events:none;
}
.js-fahrt .fahrt__hinweis{opacity:calc(1 - var(--f,0) * 4)}
.fahrt__pfeil{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--tk-knopf);color:#fff;
  animation:pfeilBlinkt 1.6s var(--ease) 4}
.fahrt__pfeil svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fahrt__pfeil--klein{width:22px;height:22px;background:rgba(255,255,255,.22);animation-duration:1.4s}
.fahrt__pfeil--klein svg{width:13px;height:13px}
@keyframes pfeilBlinkt{0%,100%{transform:translateY(0);box-shadow:0 0 0 0 rgba(var(--tk-rgb),.5)}50%{transform:translateY(4px);box-shadow:0 0 0 9px rgba(var(--tk-rgb),0)}}
.js-fahrt .buehne__hinweis{opacity:calc((var(--f,0) - .35) * 5)}
.js-fahrt .buehne__hinweis.ist-weg{opacity:0}
.fahrt__titel{
  position:absolute;left:50%;top:14px;translate:-50% 0;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:14px 26px;border-radius:var(--r-bild);
  background:var(--glas);-webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);
  border:var(--glas-rand);box-shadow:var(--glas-schatten);
  pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
}
.js-fahrt .fahrt__titel{opacity:calc(1 - var(--f,0) * 3.2)}
.fahrt__titel-klein{font-size:12px;line-height:18px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--tk-fest)}
.fahrt__titel-gross{font-size:clamp(18px,1.6vw,22px);font-weight:800;letter-spacing:-.015em;color:var(--ink);max-width:34ch}

/* Zonen-Marker (Akt 3) */
.zonen-marker{position:absolute;inset:0;z-index:2;pointer-events:none}
/* Position ueber transform (--mx/--my aus app.js), nicht ueber left/top:
   left/top-Aenderungen zaehlen als Layout-Shift, transform nicht — und
   laeuft auf dem Compositor. */
.marker{
  position:absolute;left:0;top:0;--sc:.86;
  transform:translate(var(--mx,0px),var(--my,0px)) translate(-50%,-50%) scale(var(--sc));
  display:grid;grid-template-columns:22px 1fr;align-items:center;column-gap:9px;
  padding:8px 14px 8px 8px;border-radius:var(--r-karte);
  background:rgba(255,255,255,.95);border:var(--rand);
  box-shadow:0 8px 24px -10px rgba(37,37,37,.35);
  font:700 13px/1.2 Manrope,system-ui,sans-serif;color:var(--ink);white-space:nowrap;max-width:260px;
  opacity:0;
  transition:opacity .45s var(--ease),--sc .45s var(--ease);transition-delay:calc(var(--i,0) * 70ms);
}
@property --sc{syntax:'<number>';inherits:false;initial-value:.86}
.marker.ist-da{opacity:1;--sc:.96}
.marker.ist-da.ist-aktiv{--sc:1.04;z-index:3;border-color:var(--tk);box-shadow:0 12px 32px -10px rgba(37,37,37,.4)}
.marker.ist-aktiv .marker__nr{background:var(--tk-fest)}
.marker__nr{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px}
.marker small{display:block;font-weight:500;color:var(--text);font-size:13px;margin-top:var(--s-1);white-space:normal;max-width:190px}
.marker::before{content:"";position:absolute;left:50%;top:100%;width:8px;height:8px;border-radius:50%;
  background:var(--tk-fest);translate:-50% 12px;box-shadow:0 0 0 4px rgba(var(--tk-fest-rgb),.18)}

/* Zonen-Fokus: auf dem Handy EINE Plakette fuer die aktuelle Zone */
.zonen-fokus{display:none;position:absolute;left:12px;right:12px;bottom:12px;z-index:3;
  grid-template-columns:28px 1fr;column-gap:12px;align-items:center;
  padding:12px 14px;border-radius:var(--r-karte);
  background:rgba(255,255,255,.94);border:var(--rand);box-shadow:0 10px 30px -14px rgba(37,37,37,.35);
  opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.zonen-fokus.ist-da{opacity:1;transform:none}
.zonen-fokus__nr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--tk-fest);color:#fff;font-size:12px;font-weight:800}
.zonen-fokus{text-align:left}
.zonen-fokus__text b{display:block;font-size:14px;line-height:20px;color:var(--ink)}
.zonen-fokus__text small{display:block;font-size:13px;line-height:18px;color:var(--text)}

/* Konfigurator (Akt 2) — Karte auf der Buehne. Kein Blur ueber dem Canvas
   (gemessen: p95 256ms mit, 42ms ohne). */
.konfig{
  position:absolute;right:22px;top:50%;z-index:3;
  width:min(300px,42%);max-height:calc(100% - 44px);
  display:flex;flex-direction:column;gap:13px;
  padding:18px 18px 16px;border-radius:var(--r-karte);overflow:hidden;
  background:rgba(255,255,255,.96);border:var(--rand);box-shadow:0 18px 50px -20px rgba(37,37,37,.35);
  --f2:1;transform:translate(calc((1 - var(--f2)) * 60px),-50%);opacity:var(--f2);pointer-events:auto;
}
/* Milchglas, sobald der Scroll ruht. Waehrend der Fahrt bleibt das Panel
   deckend — der Blur muesste sonst pro Frame den WebGL-Canvas abtasten
   (gemessen: p95 256ms mit, 42ms ohne). app.js setzt .js-scrollt. */
html:not(.js-scrollt) .konfig{background:var(--glas);-webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);border:var(--glas-rand)}
html:not(.js-scrollt) .marker{background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:var(--glas-rand)}
html:not(.js-scrollt) .buehne__hinweis{background:var(--glas);-webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);border:var(--glas-rand)}
.konfig,.marker,.buehne__hinweis{transition:background .35s var(--ease),border-color .35s var(--ease)}
.js-fahrt .konfig[data-weg]{pointer-events:none;visibility:hidden}
.js-fahrt .konfig{transition:opacity .35s var(--ease),visibility 0s;will-change:transform,opacity}
.js-fahrt .marker{will-change:transform,opacity}
.js-fahrt .fahrt__klebt{will-change:transform}
.konfig__kopf{display:flex;align-items:center;justify-content:space-between}
.konfig__titel{font-size:15px;font-weight:800;letter-spacing:-.01em}
.konfig__live{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tk-fest)}
.konfig__live i{width:7px;height:7px;border-radius:50%;background:var(--tk);animation:livePuls 2s var(--ease) 3}
@keyframes livePuls{0%{box-shadow:0 0 0 0 rgba(var(--tk-rgb),.55)}70%{box-shadow:0 0 0 8px rgba(var(--tk-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--tk-rgb),0)}}
.konfig__regler{display:grid;gap:8px}
.konfig__zeile{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name wert" "range range";gap:6px 10px;align-items:center;cursor:pointer}
.konfig__name{grid-area:name;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.konfig__wert{grid-area:wert;font-variant-numeric:tabular-nums;font-size:15px;font-weight:800;color:var(--tk-fest);min-width:3.2ch;text-align:right;transition:transform .18s var(--ease)}
.konfig__zeile:has(input:active) .konfig__wert{transform:scale(1.12)}
.konfig__zeile input[type=range]{grid-area:range;height:44px}
.konfig__zonen{display:grid;gap:8px}
.konfig__label{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.zonen__liste{display:flex;flex-wrap:wrap;gap:6px}
.zonen__btn{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:5px 12px 5px 6px;border-radius:var(--r-pill);
  border:var(--rand-bedien);background:var(--weiss);
  font:600 13px/1 Manrope,system-ui,sans-serif;color:var(--ink);cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .12s var(--ease);
}
.zonen__btn small{display:none}
.zonen__nr{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--tk-tint-2);color:var(--tk-fest);font-size:12px;font-weight:800}
.zonen__btn:hover{border-color:var(--tk)}
.zonen__btn:active{transform:scale(.97)}
.zonen__btn[aria-selected="true"],.zonen__btn[aria-pressed="true"]{border-color:var(--tk);background:var(--tk-tint)}
.zonen__btn[aria-selected="true"] .zonen__nr,.zonen__btn[aria-pressed="true"] .zonen__nr{background:var(--tk-fest);color:#fff}
.konfig__fuss{margin-top:auto;display:grid;gap:8px}
.konfig__reset{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;min-height:44px;padding:0 16px;
  border-radius:var(--r-pill);border:var(--rand-bedien);background:transparent;color:var(--ink);
  font:700 14px Manrope,system-ui,sans-serif;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease);
}
.konfig__reset:hover{background:var(--grau)}
.konfig__reset:active{transform:scale(.97)}
.konfig__reset .ic{transform:rotate(180deg)}
.konfig__weiter{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;
  border-radius:var(--r-pill);background:var(--tk-knopf);color:#fff;text-decoration:none;
  font:700 13px Manrope,system-ui,sans-serif;transition:background .2s var(--ease),transform .12s var(--ease);
}
.konfig__weiter:hover{background:var(--tk-fest)}
.konfig__weiter:active{transform:scale(.97)}
input[type=range]{width:100%;height:44px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:rgba(37,37,37,.45)}
input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:rgba(37,37,37,.45)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--tk-knopf);border:3px solid #fff;box-shadow:0 2px 8px rgba(37,37,37,.22);margin-top:-11px}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;border:3px solid #fff;background:var(--tk-knopf);box-shadow:0 2px 8px rgba(37,37,37,.22)}
/* Tastatur-Einstieg in den Konfigurator, nur bei Fokus sichtbar */
.konfig-einstieg{
  position:absolute;left:50%;translate:-50% 0;top:-70px;z-index:9;min-height:44px;padding:0 20px;
  border-radius:var(--r-pill);border:var(--rand);background:#fff;cursor:pointer;
  font:700 14px Manrope,system-ui,sans-serif;color:var(--ink);transition:top .15s var(--ease);
}
.konfig-einstieg:focus-visible{top:10px}

/* ---- 8 Sektionen -------------------------------------------------------- */

/* Drucktest (Beweis) */
.drucktest{margin:0;display:grid;gap:var(--s-1)}
.drucktest__buehne{
  position:relative;display:grid;gap:var(--s-2);padding:30px 26px 24px;
  background:var(--weiss);border:var(--rand);border-radius:var(--r-karte);
  touch-action:pan-y;cursor:ew-resize;
}
.drucktest__reihe{display:grid;gap:11px}
.drucktest__marke{display:inline-flex;align-items:center;gap:9px;justify-self:start;font:700 14px/1 Manrope,system-ui,sans-serif;letter-spacing:.02em;color:var(--text)}
.drucktest__marke::before{content:"";width:9px;height:9px;border-radius:50%;background:#B5B9B9}
.drucktest__reihe--neu .drucktest__marke{color:var(--tk-fest)}
.drucktest__reihe--neu .drucktest__marke::before{background:var(--tk)}
.drucktest__flaeche{position:relative;height:78px;border-radius:8px;background:linear-gradient(180deg,rgba(37,37,37,.035),transparent 60%)}
.drucktest__reihe--neu .drucktest__flaeche{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-content:start;padding-top:14px}
.drucktest__latte{position:absolute;left:0;right:0;top:14px;height:14px;border-radius:8px;background:#B5B9B9;
  transform-origin:50% 0;transform:translateY(calc(var(--senke,0) * 22px)) rotate(var(--kipp,0deg));transition:transform 120ms linear}
.drucktest__teller{height:14px;border-radius:8px;background:var(--tk);transform:translateY(calc(var(--senke,0) * 22px));transition:transform 120ms linear}
.drucktest__mess{font:400 15px/1.5 Manrope,system-ui,sans-serif;color:var(--text)}
.drucktest__mess b{color:var(--ink);font-variant-numeric:tabular-nums}
.drucktest__reihe--neu .drucktest__mess b{color:var(--tk-fest)}
/* Schieberegler: Schiene unter den beiden Reihen, Griff darauf, duenne Linie
   nach oben durch beide Reihen — ein Regler, zwei Wirkungen. */
.drucktest__buehne{padding-bottom:64px}
.drucktest__schiene{position:absolute;left:26px;right:26px;bottom:34px;height:6px;border-radius:3px;background:rgba(37,37,37,.14)}
.drucktest__punkt{position:absolute;top:24px;bottom:37px;left:calc(26px + (100% - 52px) * var(--xf,.5));width:0;pointer-events:none}
.drucktest__linie{position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--tk);opacity:.85}
.drucktest__griff{position:absolute;left:0;bottom:-19px;translate:-50% 0;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;background:var(--tk-knopf);border:3px solid #fff;box-shadow:0 8px 22px rgba(var(--tk-fest-rgb),.35)}
.drucktest__griff svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.drucktest__hinweis.info{display:flex;width:100%;max-width:none}
.drucktest__hinweis{max-width:none}
.drucktest__buehne:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* Bento wie auf der Marken-LP: 2x2, oben links die Teller-Buehne (so hoch
   wie die Karte daneben — die Animation entspricht der Texthoehe). */
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:20px}
.karte--buehne{padding:0;overflow:hidden;display:flex;flex-direction:column;min-height:280px}
.karte--buehne .tellerbuehne{flex:1 1 auto;min-height:0}
.karte--buehne__text{padding:12px 24px;border-top:var(--rand);font-size:14px;line-height:20px;color:var(--text)}
.karte--buehne__text b{color:var(--ink)}

/* Teller-Buehne: vier 3D-Teller, wandernder Druckpunkt */
.tellerbuehne{position:relative;width:100%;min-width:0;height:100%;min-height:200px}
.tellerbuehne__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tellerbuehne__fallback{position:absolute;inset:8%;width:84%;height:auto;margin:auto;object-fit:contain}
.tellerbuehne.hat-3d .tellerbuehne__fallback{display:none}
.tellerbuehne:not(.hat-3d) .tellerbuehne__canvas{display:none}
.tellerbuehne__druck{position:absolute;left:var(--x,50%);top:var(--y,30%);translate:-50% -50%;z-index:2;pointer-events:none;
  display:grid;place-items:center;opacity:0;transition:opacity .3s var(--ease)}
.tellerbuehne__druck span{padding:5px 11px;border-radius:var(--r-pill);background:var(--rot);color:#fff;
  font:800 11px/1 Manrope,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 6px 18px -6px rgba(185,45,38,.6)}
.tellerbuehne__druck::before{content:"";position:absolute;width:72px;height:72px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(185,45,38,.30),rgba(185,45,38,0) 68%)}
.tellerbuehne.hat-3d .tellerbuehne__druck{opacity:1}
.tellerbuehne__druck::after{content:"";position:absolute;width:72px;height:72px;border-radius:50%;border:2px solid rgba(185,45,38,.45);
  animation:druckPuls 1.8s var(--ease) 4}
@keyframes druckPuls{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.35);opacity:0}}

/* Varianten: zwei grosse Karten, die zweite hervorgehoben */
.varianten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.variante{display:flex;flex-direction:column}
.variante__bild{display:flex;align-items:center;justify-content:center;height:260px;margin:-8px 0 var(--s-2);border-radius:var(--r-bild);background:var(--grau);overflow:hidden}
.variante__bild img{max-height:224px;max-width:88%;width:auto;height:auto;object-fit:contain}
.variante > .badge{align-self:flex-start}
.variante h3{font-size:24px;line-height:1.2;margin-top:var(--s-2)}
.variante > p{margin-top:var(--s-1);font-size:16px;line-height:26px;color:var(--text-karte)}
.variante .hakenliste{margin-top:var(--s-2)}
/* Knopf auf voller Kartenbreite, auf allen Breiten (Mike 14.10.2026: „Die Buttons wuerde ich tatsaechlich
   auf die volle Breite ziehen") — Text links, Pfeilkreis rechts wie im Funnel */
.variante .btn{margin-top:var(--s-5);width:100%;justify-content:space-between}

/* Dunkles Kapitel: Manufaktur + Film in EINEM Block */
.kapitel-dunkel{position:relative;isolation:isolate;color:#fff}
.kapitel-dunkel__teil{background:none!important;box-shadow:none!important}
.kapitel-dunkel .sekt{padding-bottom:var(--s-naht)}
.kapitel-dunkel .film{padding-top:var(--s-naht)}
.kapitel-dunkel .kapitel-dunkel__teil h2{color:#fff}
.film{position:relative;padding:var(--s-sekt) 0;color:var(--weiss)}
.film__inner{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:60px;align-items:center}
.film__text .badge{margin-bottom:var(--s-2)}
.film__text .lead{margin-top:var(--s-2)}
.film__buehne{margin:0}
.film__start{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;background:none;
  border-radius:var(--r-bild);overflow:hidden;line-height:0;box-shadow:var(--schatten-bild)}
/* height:auto: das height-Attribut des Posters schlug aspect-ratio — 661×653 bzw. 661×1000 bei 1440 (gefunden 14.10.2026) */
.film__start img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .6s var(--ease),filter .4s var(--ease);filter:brightness(.82)}
.film__start:hover img,.film__start:focus-visible img{transform:scale(1.035);filter:brightness(.72)}
.film__play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;background:var(--tk-knopf);
  display:grid;place-items:center;box-shadow:0 10px 34px rgba(0,0,0,.34);transition:transform .3s var(--ease),background .3s var(--ease)}
.film__start:hover .film__play,.film__start:focus-visible .film__play{transform:scale(1.09);background:var(--tk-fest)}
.film__play svg{width:34px;height:34px;fill:#fff;margin-left:4px}
.film__play::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(var(--tk-rgb),.55);animation:filmPuls 2.6s var(--ease) 3}
@keyframes filmPuls{0%{transform:scale(.92);opacity:.9}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}
.film__dauer{position:absolute;right:14px;bottom:14px;background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:13px;font-weight:700;padding:6px 12px;border-radius:8px;line-height:1.3}
.film__hinweis{margin-top:var(--s-1);font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.7)}
.film__hinweis a{color:var(--tk-hell)}
.film__rahmen{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-bild);display:block}
/* Film auf heller Flaeche (14.10.2026: LP1/LP3 holen die Filmsektion aus dem dunklen Kapitel,
   section.film.fl-weiss / .fl-grau): .film setzt sonst hart Weiss. Text/Hinweis --text, Links --tk-fest. */
.film.fl-weiss,.film.fl-grau{color:var(--ink)}
.film.fl-weiss .lead,.film.fl-grau .lead,.film.fl-weiss .film__hinweis,.film.fl-grau .film__hinweis{color:var(--text)}
.film.fl-weiss .film__hinweis a,.film.fl-grau .film__hinweis a{color:var(--tk-fest)}

/* Zusammenspiel: sechs Karten */
.karten .karte{display:flex;flex-direction:column}

/* Abschluss (dunkel, zentriert) */
.abschluss{text-align:center}
/* Abschluss-Bande mit Bild (Ausstattung Nr. 13, Referenz Roemer .cta-bande): Kundenfoto
   als leise Textur unter Aurora und Text. Graustufen (Marke: Tuerkis + Neutral, kein
   Braun), Deckkraft .12 auf #252525: ueber den echten Pixeln gemessen (Aurora an 5 Stellen)
   haelt Kleintext >= 4,84:1 und Akzent >= 3,33:1; bei .2 fiel beides unter AA. */
.abschluss__bild{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;opacity:.12;pointer-events:none}
.abschluss .box{display:flex;flex-direction:column;align-items:center}
.abschluss .lead{margin:var(--s-2) auto 0}
.abschluss .btn{margin-top:var(--s-5)}
.abschluss__klein{margin-top:var(--s-2)}
/* Zusagen als Hakenliste statt einer Pille mit „·" (Mike 14.10.2026 zu „Lassen Sie Ihr Fundament ansehen"
   bei 390: „Einfach aufraeumen"). Vertrag: <ul class="abschluss__zusagen"><li><svg class="ic">…</svg>…</li></ul>.
   Desktop eine zentrierte Zeile, Handy untereinander mit gemeinsamer linker Kante, als Block mittig. */
.abschluss__zusagen{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-1) var(--s-3);margin-top:var(--s-2);
  font-size:14px;line-height:20px;color:var(--auf-2)}
.abschluss__zusagen li{display:inline-flex;align-items:center;gap:8px}
.abschluss__zusagen .ic{width:18px;height:18px;flex:none;color:var(--tk-hell);stroke-width:2.4}


/* ---- 8b Bausteine der Beratungs-LP -------------------------------------
   Neu hinzugekommen mit der Schlafgesundheitsberatung. Sie gehoeren zum
   gemeinsamen Kasten — jede kuenftige Schwebewerk-LP darf sie benutzen.
   Alle Abstaende aus der 5er-Skala, Karte r10/p30, Glas nur auf Farbe. */

/* Schlafsystem-Schichten — der interaktive Kern der Beratungsseite.
   Links der Querschnitt, rechts die fuenf Faktoren. Ohne JS steht jeder
   Faktor mit seinem Text da; JS hebt nur zusaetzlich hervor. */
.schichten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:stretch}
.schichten__buehne{
  position:relative;border-radius:var(--r-bild);background:var(--weiss);
  border:var(--rand);padding:var(--s-3);box-shadow:var(--schatten-karte);
  display:grid;place-items:center;min-height:0}
.schichten__svg{width:100%;height:auto;max-height:100%;display:block}
.schichten__svg .schicht{transition:opacity .35s var(--ease)}
.schichten__svg .schicht *{transition:stroke .35s var(--ease),fill .35s var(--ease)}
.schichten__svg .zeichnung{fill:none;stroke:#B5B9B9;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.schichten__svg .flaeche{fill:rgba(37,37,37,.05);stroke:#B5B9B9;stroke-width:2.2}
.schichten__svg .punkt{fill:#B5B9B9;stroke:none}
.js-schichten .schichten__svg .schicht{opacity:.5}
.js-schichten .schichten__svg .schicht.ist-aktiv{opacity:1}
.schichten__svg .schicht.ist-aktiv .zeichnung,
.schichten__svg .schicht.ist-aktiv .flaeche{stroke:var(--tk)}
.schichten__svg .schicht.ist-aktiv .flaeche{fill:var(--tk-tint-2)}
.schichten__svg .schicht.ist-aktiv .punkt{fill:var(--tk)}
.schichten__marke{
  font:700 12px/18px Manrope,ManropeErsatz,system-ui,sans-serif;letter-spacing:2px;
  text-transform:uppercase;fill:var(--text);stroke:none}
.schichten__svg .schicht.ist-aktiv .schichten__marke{fill:var(--tk-fest)}

.schichten__liste{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:sch}
.schichten__zeile{
  display:grid;grid-template-columns:44px 1fr;column-gap:var(--s-2);align-items:start;
  width:100%;text-align:left;border:0;border-top:1px solid rgba(37,37,37,.10);
  background:transparent;padding:var(--s-2) var(--s-1);font:inherit;color:inherit;
  border-radius:var(--r-karte);transition:background .25s var(--ease)}
.schichten__liste li:first-child .schichten__zeile{border-top:0}
button.schichten__zeile{cursor:pointer}
button.schichten__zeile:hover{background:var(--tk-tint)}
.schichten__zeile[aria-pressed="true"]{background:var(--tk-tint)}
.schichten__nr{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  background:var(--weiss);border:1px solid rgba(37,37,37,.14);color:var(--text);
  font-weight:800;font-size:15px;line-height:1;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.schichten__zeile[aria-pressed="true"] .schichten__nr{background:var(--tk-knopf);border-color:var(--tk-knopf);color:#fff}
.schichten__wort b{display:block;font-size:17px;line-height:26px;color:var(--ink)}
.schichten__wort > span{display:block;margin-top:4px;font-size:16px;line-height:26px;color:var(--text-karte)}

/* Vergleichstabelle — Muster der Marke: tuerkise Kopfspalte rechts */
.vergleich{border:var(--rand);border-radius:var(--r-karte);overflow:hidden;background:var(--weiss)}
.vergleich__zeile{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.15fr)}
.vergleich__zeile > *{padding:var(--s-2) var(--s-3);font-size:16px;line-height:26px;
  border-top:1px solid rgba(37,37,37,.10);display:flex;align-items:center;gap:10px}
.vergleich__zeile:first-child > *{border-top:0}
.vergleich__krit{font-weight:800;color:var(--ink)}
.vergleich__std{color:var(--text)}
.vergleich__sw{background:var(--tk-tint);color:var(--ink);font-weight:600}
.vergleich__sw .ic{width:20px;height:20px;flex:0 0 auto;color:var(--gruen);stroke-width:2.6}
.vergleich__kopf > *{background:var(--grau);font-weight:800;font-size:14px;line-height:20px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--text)}
.vergleich__kopf .vergleich__sw{background:var(--tk-knopf);color:#fff}
.vergleich__marke{display:none}

/* Zahlenband — vier belegbare Werte, keine Hero-Metrik-Tapete */
/* Alle Kaesten gleich hoch (auch ueber Zeilen: 1fr), Inhalt vertikal mittig (Mike 14.10.2026: „die Boxen
   sollten grundsaetzlich alle vertikal zentriert werden"). */
.zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:20px;margin-top:var(--s-6)}
.zahl{background:var(--weiss);border:var(--rand);border-radius:var(--r-karte);
  padding:var(--s-3);text-align:center;display:grid;gap:var(--s-1);align-content:center}
.zahl b{font-size:clamp(28px,3vw,36px);line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--tk-fest)}
.zahl span{font-size:14px;line-height:20px;color:var(--text)}
.zahl .ic{width:20px;height:20px;margin-inline:auto;color:var(--gelb);fill:var(--gelb);stroke:none}
/* Google-Zeile ueber „5,0" (Mike: „hier muessen auf jeden Fall das Google Symbol mit dazu"):
   Logo 22 px + gelber Stern, mittig. Vertrag: <span class="zahl__google"><img …google.svg><svg class="ic">…</span> */
.zahl__google{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.zahl__google img{width:22px;height:22px;flex:none}
.zahl .zahl__google .ic{margin-inline:0;flex:none}
/* Korrekturrunde 2 Vital Pro (19.10.2026, K11): Google-Symbol neben der Zahl statt darüber, damit alle Kästen dieselbe
   Inhaltshöhe haben. Vertrag: <b class="zahl__mit-google"><img …google.svg><span data-zaehlen>5,0</span><svg class="ic">…</b> */
.zahl b.zahl__mit-google{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.zahl__mit-google img{width:26px;height:26px;flex:none}
.zahl .zahl__mit-google .ic{width:22px;height:22px;margin-inline:0;flex:none}
.zahl b.zahl__mit-google span{line-height:inherit}

/* Ablauf — nummerierte Schritte untereinander, funktioniert hell wie dunkel */
.ablauf{display:grid;gap:0}
.ablauf li{display:grid;grid-template-columns:54px 1fr;column-gap:var(--s-3);
  padding:var(--s-3) 0;border-top:1px solid rgba(37,37,37,.10)}
.ablauf li:first-child{border-top:0;padding-top:0}
.fl-tief .ablauf li,.kapitel-dunkel .ablauf li{border-color:rgba(255,255,255,.14)}
.ablauf__nr{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  border:1px solid var(--tk);color:var(--tk-fest);font-weight:800;font-size:20px;
  font-variant-numeric:tabular-nums;transition:transform .34s var(--ease)}
.fl-tief .ablauf__nr,.kapitel-dunkel .ablauf__nr{border-color:rgba(255,255,255,.4);color:var(--tk-hell)}
.ablauf li:hover .ablauf__nr{transform:scale(1.06)}
.ablauf h3{font-size:18px;line-height:28px;font-weight:800;margin:0}
.ablauf p{margin-top:var(--s-1);font-size:16px;line-height:26px;color:var(--auf-2);max-width:70ch}
.ablauf__dauer{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s-2);
  padding:6px 14px;border-radius:var(--r-pill);background:var(--tk-tint-2);
  color:var(--tk-fest);font-size:13px;line-height:18px;font-weight:700}
.fl-tief .ablauf__dauer,.kapitel-dunkel .ablauf__dauer{color:var(--tk-hell)}
.ablauf__dauer .ic{width:15px;height:15px;stroke-width:2.2}
.ablauf__cta{margin-top:var(--s-5)}

/* Banner — grosse tuerkise Flaeche fuer ein einzelnes Angebot */
.banner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-5);
  align-items:center;background:var(--tk-knopf);color:#fff;border-radius:var(--r-gross);padding:var(--s-4)}
.banner h2,.banner h3{color:#fff}
/* Flaechen IM Banner dunkel tinten, nicht hell: Weiss-auf-Weisstint ueber
   Tuerkis blieb unter AA (gemessen 3,7-4,0:1). Dunkel getintet sind es 5,9-6,5:1. */
.banner p{margin-top:var(--s-2);color:#fff;font-size:16px;line-height:26px}
/* Korrekturrunde 2 Vital Pro (19.10.2026, K8, Mike: „Das ist ein Padding nach unten, das muss man dann noch setzen.“):
   Knopf direkt unter dem Absatz bekommt Luft (vorher 0 px). */
.banner p + .btn{margin-top:var(--s-3)}
.banner .badge{background:rgba(0,0,0,.16);color:#fff;margin-bottom:var(--s-2)}
.banner .akzent-hell{color:#fff;background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18))}
.banner__fakten{display:grid;gap:var(--s-1)}
.banner__fakten li{display:grid;grid-template-columns:22px 1fr;column-gap:12px;align-items:start;
  background:rgba(0,0,0,.14);border-radius:var(--r-karte);padding:14px 18px;
  font-size:16px;line-height:26px;font-weight:600;color:#fff}
.banner__fakten .ic{width:22px;height:22px;stroke-width:2.4;margin-top:2px;color:#fff}

/* Kundenstimme — Karte mit Sternen */
.stimme__sterne{display:flex;gap:2px;margin-bottom:var(--s-2)}
.stimme__sterne .ic{width:18px;height:18px;fill:var(--gelb);stroke:none;color:var(--gelb)}
.stimme__satz{font-size:17px;line-height:28px;color:var(--ink);text-wrap:pretty}
.stimme__wer{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid rgba(37,37,37,.08);
  font-size:14px;line-height:20px;color:var(--text)}
.stimme__wer b{display:block;font-size:15px;color:var(--ink)}

/* Zitatkarte — ein einzelnes Zitat als Beleg, mit Zeichen wie beim Partner-Slider */
.zitatkarte{display:grid;gap:var(--s-2);margin-top:var(--s-2)}
.zitatkarte .zitat__zeichen{margin-bottom:0}
.zitatkarte__satz{font-size:clamp(19px,1.7vw,22px);line-height:1.5;font-weight:700;
  color:var(--ink);letter-spacing:-.01em;text-wrap:pretty}
.zitatkarte__quelle{font-size:14px;line-height:20px;color:var(--text)}

/* Ortkarte — zwei grosse Karten mit Bildkachel (Muster der Varianten-Karten) */
.ort__bild{border-radius:var(--r-bild);overflow:hidden;margin-bottom:var(--s-3);aspect-ratio:16/10;background:var(--grau)}
.ort__bild img{width:100%;height:100%;object-fit:cover}
.variante .ort__bild + .badge{margin-bottom:var(--s-2)}


/* ---- 8c Kampagnen-Bausteine (Briefing Schwebewerk 23.09.2026) ------------
   Ziel der Kampagne: Termine bei Kunden zu Hause. Diese Bausteine kommen aus
   dem InGlory-Ausstattungsstandard (Referenzen Polier Behr, DehmInvest, HMG)
   und sind hier in die Schwebewerk-Sprache uebersetzt. Sie gelten fuer beide
   Seiten. */

/* Schnellkontakt-Leiste: Desktop rechts senkrecht, Handy als Leiste unten.
   Gleiches Glas wie die Menue-Pille — beide sind schwebende Bedienelemente.
   Beschriftungen fahren als Pille NACH LINKS aus, nur transform/opacity. */
:root{--rail-b:56px;--rail-luft:calc(var(--rail-b) + 20px);--h-bar:0px}
.rail{position:fixed;right:0;top:50%;z-index:45;transform:translateY(-50%);
  display:flex;flex-direction:column;
  background:var(--glas);-webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);
  border:var(--glas-rand);border-right:0;border-radius:14px 0 0 14px;box-shadow:var(--glas-schatten)}
.rail__knopf{position:relative;display:grid;place-items:center;width:var(--rail-b);height:56px;
  color:var(--tk-fest);text-decoration:none;transition:background .2s var(--ease),color .2s var(--ease)}
.rail__knopf:first-child{border-radius:13px 0 0 0}
.rail__knopf:last-child{border-radius:0 0 0 13px}
.rail__knopf + .rail__knopf{border-top:1px solid rgba(37,37,37,.08)}
.rail__knopf svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rail__knopf--termin{background:var(--tk-knopf);color:#fff}
.rail__text{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(10px,-50%);opacity:0;pointer-events:none;
  white-space:nowrap;background:var(--ink);color:#fff;border-radius:var(--r-pill);padding:8px 14px;
  font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  transition:transform .28s var(--ease),opacity .2s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .rail__knopf:hover{background:var(--tk-knopf);color:#fff}
  .rail__knopf--termin:hover{background:var(--tk-fest)}
  .rail__knopf:hover .rail__text{transform:translate(0,-50%);opacity:1}
}
.rail__knopf:focus-visible .rail__text{transform:translate(0,-50%);opacity:1}
/* Die Leiste liegt NIE ueber dem Inhalt: zwischen 768 und 1323 px weicht die
   Content-Breite so weit aus, dass zur Leiste 16 px Luft bleiben
   (Messpflicht Polier.Behr: Overlap bei 1280/1366). */
/* gemessen 15 px bei 768–1324 (1-px-Rand der Leiste nicht mitgerechnet) -> jetzt 19 px */
@media(min-width:768px){:root{--box:min(1180px, 100vw - 2 * var(--rail-luft))}}

/* Scroll-Fortschritt: duenner Balken ganz oben, nur transform */
.fortschritt{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.fortschritt i{display:block;height:100%;background:var(--tk);transform-origin:left center;transform:scaleX(var(--p,0))}

/* Bewertungs-Slider: Google-Kopf + Spur mit Scroll-Snap. Pfeile fahren ueber
   GEMESSENE Positionen und laufen im Kreis (Messpflicht Slider-Zyklus). */
.bewertungen__kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-3)}
.google{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px;border-radius:var(--r-pill);
  background:var(--weiss);border:var(--rand);text-decoration:none;color:var(--ink);box-shadow:var(--schatten-karte);
  transition:border-color .2s var(--ease)}
.google:hover{border-color:var(--tk)}
.google img{width:22px;height:22px;flex:0 0 auto}
.google b{font-size:18px;font-weight:800}
.google__sterne{display:inline-flex;gap:1px}
.google__sterne svg{width:16px;height:16px;fill:var(--gelb);color:var(--gelb)}
.google__text{font-size:14px;line-height:20px;color:var(--text)}
.bewertungen__spur{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 20px) / 3);gap:20px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:6px 2px 12px;margin:-6px -2px 0}
.bewertungen__spur::-webkit-scrollbar{display:none}
.bewertungen__spur > *{scroll-snap-align:start;display:flex;flex-direction:column}
.bewertungen__spur .stimme__wer{margin-top:auto}
.bewertungen__spur:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:var(--r-karte)}

/* Animierter Zeitstrahl (Referenz DehmInvest/Immo Best), seit 14.10.2026 SCROLLGEBUNDEN (Mike zu LP3
   „Das passt in keinen Karton" und ReeZone-Ablauf: „beim Scrollen bewegt, auch auf der mobilen Ansicht").
   Grundzustand FERTIG gezeichnet. Erst seite.js setzt data-strahl="an": die Linie folgt dem Scrollen
   (--zug 0..1 am Linien-Element, nur transform), jeder Schritt bekommt .ist-aktiv, sobald sein Kreis die
   Lesemarke (55 % Fensterhoehe) erreicht: Kreis fuellt sich, Text voll deckend. Davor Kontur-Kreis und
   Text .55 — nie in Leseposition (Mitte ueber 60 %, GATE scrollgebundene Textzustaende), das sichert
   seite.js. Ohne Skript und bei reduzierter Bewegung steht alles fertig da, ohne Zustaende. */
.strahl{position:relative;display:grid;grid-template-columns:1fr;gap:var(--s-2);margin:0;padding:0;list-style:none}
.strahl--3{--n:3}.strahl--4{--n:4}.strahl--5{--n:5}.strahl--6{--n:6}
.strahl::before,.strahl__linie{content:"";position:absolute;left:28px;top:28px;bottom:28px}
.strahl::before{width:1px;margin-left:-.5px;background:rgba(37,37,37,.16)}
.strahl__linie{width:2px;margin-left:-1px;background:var(--tk);transform-origin:top center;transform:scaleY(var(--zug,1))}
.schritt{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:var(--s-2);text-align:left}
.schritt__kreis{grid-column:1;grid-row:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  border:1.5px solid var(--tk);background:var(--tk-knopf);color:#fff;position:relative;z-index:1}
.schritt__kreis svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-strahl="an"] .schritt__kreis{transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
[data-strahl="an"] .schritt:not(.ist-aktiv) .schritt__kreis{background:var(--weiss);color:var(--tk-fest)}
.schritt__karte{grid-column:2;grid-row:1;display:grid;gap:var(--s-1);align-content:start}
.schritt__titel{font-size:17px;line-height:24px;font-weight:800;color:var(--ink);text-wrap:balance}
.schritt__text{font-size:15px;line-height:24px;color:var(--text-karte)}
[data-strahl="an"] .schritt__karte{transition:opacity .35s var(--ease)}
[data-strahl="an"] .schritt:not(.ist-aktiv) .schritt__karte{opacity:.55}
/* Auf Dunkel (Kontur-Kreis im Dunkelton der Marke; Schwebewerk ohne Token: #252525 wie bisher) */
.fl-tief .strahl::before,.kapitel-dunkel .strahl::before{background:rgba(255,255,255,.18)}
.fl-tief .strahl__linie,.kapitel-dunkel .strahl__linie{background:var(--tk-hell)}
.fl-tief .schritt__kreis,.kapitel-dunkel .schritt__kreis{border-color:var(--tk-hell)}
.fl-tief [data-strahl="an"] .schritt:not(.ist-aktiv) .schritt__kreis,.kapitel-dunkel [data-strahl="an"] .schritt:not(.ist-aktiv) .schritt__kreis{background:var(--dunkel,#252525);color:var(--tk-hell)}
.fl-tief .schritt__titel,.kapitel-dunkel .schritt__titel{color:#fff}
.fl-tief .schritt__text,.kapitel-dunkel .schritt__text{color:var(--auf-2)}
/* Ab 1024 px waagerecht: Spalten = Schritte, Linie von Kreismitte zu Kreismitte */
@media(min-width:1024px){
  .strahl{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));column-gap:var(--s-2);row-gap:0}
  .strahl::before,.strahl__linie{left:calc((100% - (var(--n) - 1) * var(--s-2)) / var(--n) / 2);
    right:calc((100% - (var(--n) - 1) * var(--s-2)) / var(--n) / 2);top:28px;bottom:auto;width:auto;margin-left:0}
  .strahl::before{height:1px;margin-top:-.5px}
  .strahl__linie{height:2px;margin-top:-1px;transform-origin:left center;transform:scaleX(var(--zug,1))}
  /* auto 1fr + start: die Resthoehe geht in Zeile 2, alle Titel fluchten oben.
     Ohne das streckte das Raster kurze Schritte, die Titel sprangen (gemessen). */
  .schritt{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-content:start;justify-items:center;text-align:center;row-gap:var(--s-2)}
  .schritt__kreis{grid-row:1;grid-column:1}
  .schritt__karte{grid-row:2;grid-column:1;justify-items:center}
}
/* Zeitstrahl als Karten-Stapel (opt-in .strahl--stapel, 14.10.2026; Ausstattung Nr. 22, Mechanik aus
   Zirbe .zh-strahl-stapel / lp.css .karten--stapel): bis 900 px kleben die Schritte versetzt unter der
   Menue-Pille, der naechste schiebt sich darueber. Deckende Karte (sonst scheint die untere durch), gleich
   hohe Zeilen (1fr, sonst ragt eine hoehere Vorgaengerkarte heraus), Linie aus. .ist-oben = der zuletzt
   aktive Schritt (gleiche 55-%-Logik in seite.js): Tuerkis-Rand. */
@media(max-width:900px){
  .strahl--stapel{gap:14px;grid-auto-rows:1fr}
  .strahl--stapel::before,.strahl--stapel .strahl__linie{display:none}
  .strahl--stapel .schritt{position:sticky;top:calc(var(--h-kopf) + 8px + var(--i,0) * 10px);align-items:start;
    padding:var(--s-3) var(--s-2);border-radius:var(--r-karte);background:var(--weiss);border:var(--rand);
    box-shadow:0 -14px 34px -18px rgba(37,37,37,.45);
    transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
  .strahl--stapel .schritt.ist-oben{border-color:rgba(var(--tk-rgb),.55);
    box-shadow:0 -14px 34px -18px rgba(37,37,37,.45),0 0 0 3px rgba(var(--tk-rgb),.14)}
  .strahl--stapel .schritt.ist-oben .schritt__kreis{transform:scale(1.06)}
  .fl-tief .strahl--stapel .schritt,.kapitel-dunkel .strahl--stapel .schritt{background:var(--dunkel,#252525);
    border-color:rgba(255,255,255,.16);box-shadow:0 -16px 34px -18px rgba(0,0,0,.7)}
  .fl-tief .strahl--stapel .schritt.ist-oben,.kapitel-dunkel .strahl--stapel .schritt.ist-oben{border-color:rgba(var(--tk-rgb),.55);
    box-shadow:0 -16px 34px -18px rgba(0,0,0,.7),0 0 0 3px rgba(var(--tk-rgb),.18)}
}
@media(prefers-reduced-motion:reduce){.strahl__linie,.schritt,.schritt__kreis,.schritt__karte,.karten--stapel > .karte{transition:none!important}}
/* Bereichs-Stapel ohne Zuruecktreten: die Karten kleben weiter, nur Skalierung und Abdunklung entfallen */
@media(prefers-reduced-motion:reduce){.stapel__karte{transform:none;transition:none}.stapel__bild::after{display:none}}

/* Zaehler: der Zielwert steht im Markup, das Skript zaehlt nur hoch */
[data-zaehlen]{font-variant-numeric:tabular-nums}

/* Wort-Reveal (Referenz DehmInvest/Klickwinkel): nur Deckkraft, inline, kein
   Layout-Shift. var(--pe,1) ist der Rueckfall: ohne Skript steht alles da. */
[data-woerter] .w{display:inline;opacity:clamp(.34,.34 + 2.9 * (var(--pe,1) - var(--w,0) * .75),1)}
html.reduziert [data-woerter] .w{opacity:1}

/* Hero mit Bewegung (Beratungsseite): Bildwechsel mit Ueberblendung und
   langsamem Ken-Burns. Anhalten ueber den gemeinsamen Bewegungs-Knopf. */
.wechsel{position:relative;overflow:hidden}
.wechsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.wechsel img:first-child{position:relative}
.wechsel img.ist-aktiv{opacity:1}
/* Unsichtbare Bilder des Wechsels fangen keine Klicks (Messpflicht Klickfaenger) */
.wechsel img{pointer-events:none}
html:not(.js-wechsel) .wechsel img:first-child{opacity:1}
.js-wechsel .wechsel img.ist-aktiv{animation:kenBurns 9s linear both}
@keyframes kenBurns{from{transform:scale(1)}to{transform:scale(1.06)}}
.wechsel__zaehler{font-variant-numeric:tabular-nums;font-weight:800;margin-left:10px;color:var(--tk-fest)}
.bewegung-aus .wechsel img{animation-play-state:paused!important}
.bewegung-aus .deko-aurora::before,.bewegung-aus .deko-aurora::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.js-wechsel .wechsel img.ist-aktiv{animation:none}}
/* Bedienung des Bildwechsels (14.10.2026): Glas-Pfeile mittig links/rechts, Punkte unten ueber der Plakette
   (Abstand je Seite ueber --wechsel-punkte-unten), Wischen per touch-action:pan-y, kein Textmarkieren beim Ziehen. */
.wechsel{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.wechsel__nav{position:absolute;inset:0;z-index:3;pointer-events:none}
.wechsel__pfeil{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:0;border-radius:50%;
  border:var(--glas-rand);background:var(--glas);-webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);
  box-shadow:var(--glas-schatten);display:grid;place-items:center;cursor:pointer;color:var(--ink);pointer-events:auto;
  transition:background .2s var(--ease),transform .15s var(--ease)}
.wechsel__pfeil--zurueck{left:14px}.wechsel__pfeil--weiter{right:14px}
.wechsel__pfeil svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.wechsel__pfeil:hover{background:#fff}}
.wechsel__pfeil:active{transform:translateY(-50%) scale(.94)}
.wechsel__punkte{position:absolute;left:50%;bottom:var(--wechsel-punkte-unten,74px);transform:translateX(-50%);display:flex;gap:2px;
  padding:0 6px;border-radius:999px;background:rgba(37,37,37,.3);pointer-events:auto}
.wechsel__punkt{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.wechsel__punkt::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);transition:transform .2s var(--ease),background .2s var(--ease)}
.wechsel__punkt[aria-current="true"]::before{background:#fff;transform:scale(1.4)}
.wechsel__punkt:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:50%}
html:not(.js-wechsel) .wechsel__nav{display:none}

/* Empfehlungs-Marke auf einer Wahl-Kachel (Beratung zu Hause) */
.kw__marke{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:1;pointer-events:none;
  padding:4px 10px;border-radius:var(--r-karte);background:var(--tk-knopf);color:#fff;
  font-size:11px;line-height:16px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap}

/* Zitat des Kunden als Aussage (keine Karte): eine Zeile, die haengen bleibt */
.aussage{max-width:34ch;margin:var(--s-5) auto 0;text-align:center;font-size:clamp(22px,2.4vw,30px);line-height:1.35;
  font-weight:700;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.aussage small{display:block;margin-top:var(--s-1);font-size:15px;line-height:24px;font-weight:400;letter-spacing:0;color:var(--text)}
.fl-tief .aussage{color:#fff}
/* Zitatzeichen der Marke ueber der Aussage (Mike 14.10.2026: „die Zitatzeichen in dem Schwebewerk",
   wie beim Partner-Slider). Vertrag: <p class="aussage"><svg class="zitat__zeichen">…</svg>„…"<small>…</small></p> */
.aussage .zitat__zeichen{display:block;margin:0 auto var(--s-2);width:36px;height:36px;color:var(--tk);opacity:1}

/* Merksatz unter den Schlafsystem-Schichten: gleicher Abstand wie Kopf -> Inhalt */
.schichten + .callout{margin-top:var(--s-4)}

/* Zentrierter Knopf unter einer Aussage */
.zentriert{display:flex;justify-content:center;margin-top:var(--s-4)}
/* Zahlenband auf Dunkel (Manufaktur-Kapitel) */
.kapitel-dunkel .zahl,.fl-tief .zahl{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.kapitel-dunkel .zahl b,.fl-tief .zahl b{color:var(--tk-hell)}
.kapitel-dunkel .zahl span,.fl-tief .zahl span{color:var(--auf-2)}
.zahl b span{color:inherit;font-size:inherit}

/* Partner-Bereich (B2B): Text + Rollen links, kompaktes Formular rechts */
.partner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:60px;align-items:center}   /* mittig neben dem Funnel (nebeneinander.py 14.10.2026: Text 438 px in 692-px-Reihe) */
.partner__rollen{display:grid;gap:var(--s-1);margin-top:var(--s-3)}
.partner__rolle{display:grid;grid-template-columns:50px 1fr;column-gap:var(--s-2);align-items:center}
.partner__rolle b{display:block;font-size:17px;line-height:24px;color:var(--ink)}
.partner__rolle span{font-size:15px;line-height:24px;color:var(--text)}
.partner__form{padding:var(--s-4)}
.partner__form legend{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:var(--s-1);padding:0}
.partner__form fieldset{border:0;margin:0 0 var(--s-2);padding:0;min-width:0}
.wahlpillen{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.wahlpille{position:relative}
.wahlpille input{position:absolute;opacity:0;width:1px;height:1px;margin:0;left:50%;top:50%;pointer-events:none}
.wahlpille{cursor:pointer}
.wahlpille span{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:var(--r-pill);
  border:1.5px solid rgba(37,37,37,.5);background:var(--weiss);font-size:15px;font-weight:600;color:var(--ink);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.wahlpille:hover span{border-color:var(--tk)}
.wahlpille input:checked + span{border-color:var(--tk);background:var(--tk-tint)}
.wahlpille input:focus-visible + span{outline:3px solid var(--ink);outline-offset:3px}
.partner__form .btn{width:100%;justify-content:space-between}
/* Partner-Sektion abgegrenzt (Mike 14.10.2026: „etwas abgegrenzter, weil das ist nicht unbedingt relevant
   fuer den Kunden"): eigener Rahmen in Grau (auf Grau weiss), kleinere Ueberschrift. Vertrag:
   <section class="sekt fl-weiss sekt--partner" id="partner"><div class="box partner__rahmen">… */
.partner__rahmen{border:1px solid rgba(37,37,37,.12);border-radius:var(--r-gross);padding:var(--s-4);background:var(--grau)}
.fl-grau .partner__rahmen{background:var(--weiss)}
.sekt--partner h2{font-size:clamp(26px,2.6vw,36px)}

/* Partner-Funnel: die Formularspalte ist bei 1440 innen ~505 px breit — zwei quadratische Kacheln
   (minmax(200,250) + 20) passen nicht nebeneinander, die Rollen stapelten sich einzeln (Formular
   ~1 700 px hoch, gemessen 14.10.2026). Deshalb dort auf allen Breiten die Zeilen-Form von K28. */
.partner__form.funnel{margin-top:0}
.partner__form .karten-wahl{grid-template-columns:1fr;gap:10px}
.partner__form .kw__inhalt{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;row-gap:2px;
  align-content:center;align-items:center;justify-content:start;text-align:left;
  aspect-ratio:auto;min-height:64px;padding:14px 16px}
.partner__form .kw__inhalt .ic{grid-column:1;grid-row:1 / span 2;width:28px;height:28px}
.partner__form .kw__inhalt b,.partner__form .kw__inhalt small{grid-column:2;justify-self:start}

/* ---- 9 Formular (Funnel) ------------------------------------------------ */
.funnel{position:relative;margin-top:var(--s-5);padding:var(--s-4)}
.funnel__kopf{margin-bottom:var(--s-2)}
.funnel__schritte{margin:0 0 16px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;font-size:14px;font-weight:700;color:var(--text)}
.funnel__schritte li{display:flex;align-items:center;gap:9px;transition:color .3s var(--ease)}
.funnel__schritte li span{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:13px;
  background:var(--tk-tint-2);color:var(--tk-fest);transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.funnel__schritte li.ist-hier{color:var(--ink)}
.funnel__schritte li.ist-hier span{background:var(--tk-knopf);color:#fff;transform:scale(1.1)}
.funnel__schritte li.ist-fertig span{background:var(--tk-fest);color:#fff}
.funnel__balken{height:5px;border-radius:3px;background:rgba(37,37,37,.14);overflow:hidden}
.funnel__balken i{display:block;height:100%;border-radius:3px;width:calc(var(--p,.25) * 100%);background:var(--tk-knopf);transition:width .45s var(--ease)}
.funnel__stufe{border:0;padding:0;margin:0;min-width:0}
/* Stufen klappen nur in Formularen zu, die seite.js wirklich fuehrt (es setzt data-stufe am Formular).
   Seit 14.10.2026 mehrere Funnels je Seite: ein Formular, dessen Fuehrung nicht anspringt (fehlender
   Knopf), bleibt ganz sichtbar statt Stufen zu verstecken. */
.js-funnel .funnel[data-stufe] .funnel__stufe{display:none}
.js-funnel .funnel[data-stufe] .funnel__stufe.ist-aktiv{display:block;animation:stufeRein .24s var(--ease)}
@keyframes stufeRein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.funnel__stufe legend{font-size:clamp(19px,1.6vw,23px);font-weight:800;letter-spacing:-.015em;margin:0 auto var(--s-2);padding:0;line-height:1.25;color:var(--ink);text-align:center;width:100%}
.funnel__stufe legend em{display:block;font-style:normal;font-size:15px;font-weight:400;color:var(--text);margin-top:var(--s-1)}
/* Wahl-Kacheln: immer 4 pro Reihe, quadratisch, Inhalt mittig; mehr als vier
   brechen um. Handy: 2 pro Reihe. */
.karten-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,250px));justify-content:center;gap:var(--s-2)}
.kw__inhalt{aspect-ratio:1;justify-content:center;align-items:center;text-align:center;gap:10px}
.kw__inhalt .ic{width:32px;height:32px}
.kw{position:relative;display:block;cursor:pointer}
/* Das <label> waehlt beim Klick; das Input muss die Kachel nicht deckend belegen
   (Messpflicht unsichtbare Klickfaenger). Visuell versteckt, fokussierbar. */
.kw input{position:absolute;opacity:0;width:1px;height:1px;margin:0;left:50%;top:50%;pointer-events:none}
.kw__inhalt{
  display:flex;flex-direction:column;gap:8px;height:100%;padding:20px;border-radius:var(--r-karte);min-height:44px;
  background:var(--weiss);border:1.5px solid rgba(37,37,37,.5);
  transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.kw__inhalt .ic{color:var(--tk-fest);transition:transform .3s var(--ease)}
.kw__inhalt b{font-size:16px;font-weight:700;line-height:1.3;color:var(--ink)}
.kw__inhalt small{font-size:14px;color:var(--text);line-height:1.45}
.kw:hover .kw__inhalt{border-color:var(--tk);transform:translateY(-2px);box-shadow:var(--schatten-hover)}
.kw:hover .kw__inhalt .ic{transform:scale(1.12)}
.kw input:checked + .kw__inhalt{border-color:var(--tk);background:var(--tk-tint);box-shadow:0 0 0 3px rgba(var(--tk-rgb),.16)}
.funnel__fuss{display:grid;grid-template-columns:1fr;gap:var(--s-1);align-items:center;margin-top:var(--s-4)}
.funnel__fuss .btn{width:100%;justify-content:space-between}
.funnel__fuss .btn--geist{justify-content:center}
.funnel[data-stufe]:not([data-stufe="1"]) .funnel__fuss{grid-template-columns:1fr 1fr}
.funnel__fuss [hidden]{display:none!important}
@media(max-width:380px){
  .funnel[data-stufe]:not([data-stufe="1"]) .funnel__fuss{grid-template-columns:1fr}
  .funnel__fuss .btn:not(.btn--geist){order:-1}
}
.feld{display:grid;gap:8px;margin-bottom:var(--s-2);text-align:left}
.feld label{font-size:14px;font-weight:700;color:var(--ink)}
.feld em{font-style:normal;font-weight:400;color:var(--text)}
.feld input,.feld textarea,.feld select{padding:15px 16px;border:var(--rand-bedien);border-radius:8px;
  font:400 16px Manrope,sans-serif;background:var(--weiss);color:var(--ink);width:100%}
.feld input::placeholder,.feld textarea::placeholder{color:#6B6B6B}
.feld--paar{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dsgvo{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--text);margin:22px 0}
.dsgvo input{margin-top:var(--s-1);width:19px;height:19px;accent-color:var(--tk-fest);flex:0 0 auto}
.dsgvo a{color:var(--tk-fest)}
.form-hinweis{margin-top:var(--s-1)}

/* ---- 10 Fuss — Aufbau wie die Hauptseite, Sprache wie diese Seite: heller
   Grund mit Schimmer, Glas-Kacheln fuer Social/Kontakt, keine Menuetabelle ---- */
.fuss{position:relative;isolation:isolate;overflow:clip;
  background:
    radial-gradient(60% 55% at 0% 0%,rgba(var(--tk-rgb),.14),transparent 70%),
    radial-gradient(50% 45% at 100% 100%,rgba(var(--tk-rgb),.09),transparent 70%),
    linear-gradient(180deg,#F1F3F3,#E9EDEC);
  color:var(--text-karte);padding:var(--s-6) 0 40px;font-size:16px;line-height:26px}
.fuss > .box{position:relative;z-index:1}
.fuss a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
.fuss a:hover{color:var(--tk-fest)}
.fuss__oben{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap}
.fuss__marke{display:grid;gap:18px}
.fuss__logo{height:50px;width:auto}
.fuss__bewertung{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:20px;color:var(--text-karte)}
.fuss__bewertung b{font-size:18px;color:var(--ink)}
.fuss__sterne{display:inline-flex;gap:1px}
.fuss__sterne .ic{width:16px;height:16px;fill:var(--gelb);stroke:none;color:var(--gelb)}
/* Glas-Kachel: Social, Nach-oben, Kontakt */
.fuss__social a,.fuss__hoch,.fuss__kachel{
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(37,37,37,.04),0 12px 30px -22px rgba(37,37,37,.25);
  border-radius:var(--r-karte);color:var(--ink);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.fuss__social{display:flex;gap:10px}
.fuss__social a{display:grid;place-items:center;width:60px;height:60px}
.fuss__social a:hover,.fuss__hoch:hover{background:#fff;border-color:rgba(var(--tk-rgb),.5);color:var(--tk-fest);transform:translateY(-2px)}
.fuss__social svg{width:22px;height:22px;fill:currentColor}
.fuss__siegel{display:flex;align-items:center;gap:16px}
.fuss__siegel img{height:100px;width:auto;object-fit:contain}
.fuss__kontakt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:var(--s-5)}
.fuss__kontakt li{display:grid}
.fuss__kachel{display:flex;align-items:center;gap:14px;padding:16px 18px;min-height:76px;font-size:15px;line-height:22px}
.fuss__kachel b{display:block;font-size:12px;line-height:18px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--tk-fest)}
.fuss__kachel .ic-kreis{width:44px;height:44px}
.fuss__kachel .ic-kreis .ic{width:22px;height:22px;stroke-width:1.6}
a.fuss__kachel:hover{background:#fff;border-color:rgba(var(--tk-rgb),.5);transform:translateY(-2px);color:var(--ink)}
.fuss__unten{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;
  margin-top:var(--s-5);padding-top:var(--s-2);border-top:1px solid rgba(37,37,37,.10);font-size:14px;line-height:22px}
.fuss__unten b{color:var(--ink)}
.fuss__recht a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(37,37,37,.3)}
.fuss__rechts{display:flex;align-items:center;gap:20px}
.fuss__hoch{display:grid;place-items:center;width:60px;height:60px}
.fuss__hoch svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* InGlory-Kennung (Pflicht) — schwarze Plakette mit Monogramm, wie im Fuss der Hauptseite */
.credit-badge,.fuss .credit-badge{display:inline-flex;align-items:center;gap:12px;height:60px;padding:0 20px;border-radius:var(--r-karte);
  background:#111411;color:#fff;text-decoration:none;font-size:15px;font-weight:600}
.credit-badge:hover,.fuss .credit-badge:hover{color:#fff;background:#000}
.credit-badge svg{width:30px;height:30px}

/* ---- 11 Motion ---------------------------------------------------------- */
/* Reveal darf Inhalt NIE gaten: Standard sichtbar, .js-rev kommt erst, wenn der Observer laeuft. */
.js-rev .rev{opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease) var(--verzug,0ms),transform .6s var(--ease) var(--verzug,0ms)}
.js-rev .rev.ist-da{opacity:1;transform:none}
/* Noch nicht eingeblendet = unsichtbar -> faengt keine Klicks (Messpflicht Klickfaenger) */
.js-rev .rev:not(.ist-da){pointer-events:none}
/* Staffelung innerhalb von Gruppen (JS setzt --rev-i) */
.js-rev :is(.karten,.karten-wahl,.trust__grid,.varianten,.bento,.probleme,.hakenliste--gross,.hero__mikro,.funnel__schritte,.sekt__kopf,.split__text,.film__text,.abschluss .box)>*{--verzug:calc(var(--rev-i,0) * 90ms)}
/* Akzent-Marker zieht sich nach dem Erscheinen auf */
.js-rev .rev .akzent,.js-rev .rev .akzent-hell{background-size:0% .38em;
  transition:background-size .7s var(--ease) calc(var(--verzug,0ms) + 380ms)}
.js-rev .rev.ist-da .akzent,.js-rev .rev.ist-da .akzent-hell{background-size:100% .38em}
/* Zitat-Folie: Text setzt sich, wenn die Folie aktiv wird */
.zitat__text > *{transition:opacity .5s var(--ease) calc(var(--i,0) * 70ms + 80ms),transform .55s var(--ease) calc(var(--i,0) * 70ms + 80ms)}
.js-slider .zitat:not(.ist-aktiv) .zitat__text > *{opacity:0;transform:translateX(18px)}
.zitat__zeichen{transition:none!important}
/* Hero-Einstieg: Badge, Zeilen, Subline, Knoepfe, Zusagen nacheinander */
@media (prefers-reduced-motion:no-preference){
  .hero > .badge,.hero__titel,.hero__lead,.hero__ctas,.hero__mikro{animation:heroRein .8s var(--ease) backwards}
  .hero > .badge{animation-delay:.05s}
  .hero__titel{animation-delay:.14s}
  .hero__lead{animation-delay:.26s}
  .hero__ctas{animation-delay:.36s}
  .hero__mikro{animation-delay:.46s}
  .hero__titel .akzent{animation:akzentRein .8s var(--ease) .95s backwards}
  /* Nur Gleiten, kein Einblenden: der Text ist ab dem ersten Bild sichtbar. Mit Deckkraft 0 -> 1
     zaehlte Chrome das groesste Element erst am Ende der Einblendung (LCP gemessen 26.09.2026:
     Handy gedrosselt 3,3 s statt 2,3 s, Desktop 1,1 s statt 0,6 s). */
  @keyframes heroRein{from{transform:translateY(18px)}to{transform:none}}
  @keyframes akzentRein{from{background-size:0% .38em}to{background-size:100% .38em}}
}
/* Icons zeichnen sich beim Erscheinen (pathLength=1 setzt app.js) */
@media (prefers-reduced-motion:no-preference){
  .js-rev .rev.ist-da .ic *{animation:icZeichnet .85s var(--ease) calc(var(--verzug,0ms) + 120ms) both}
  .js-rev .rev.ist-da .ic [fill="currentColor"]{animation:icTaucht .5s var(--ease) calc(var(--verzug,0ms) + 320ms) both}
  @keyframes icZeichnet{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
  @keyframes icTaucht{from{opacity:0}to{opacity:1}}
  .ic{transition:transform .32s var(--ease)}
  .ic-kreis,.trust__icon{transition:transform .34s var(--ease),background .3s var(--ease)}
  @media (hover:hover){
    .karte:hover .ic-kreis,.trust__item:hover .trust__icon{transform:scale(1.07) rotate(-3deg)}
    .kw:hover .ic,.zonen__btn:hover .ic{transform:scale(1.14)}
    .problem:hover{transform:translateY(-4px);box-shadow:var(--schatten-hover)}
  }
  .zonen__btn[aria-pressed="true"] .ic,.zonen__btn[aria-selected="true"] .ic{animation:icPuls 2.4s var(--ease) infinite}
  @keyframes icPuls{0%,100%{transform:none}50%{transform:scale(1.12)}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .laufband__spur,html:not(.js-laufband) .laufband__spur{animation:none;flex-wrap:wrap;justify-content:center;width:auto;position:static}
  .laufband__fenster{height:auto}
  .laufband__pause{display:none}
  .js-fahrt .fahrt{height:auto}
  .js-fahrt .fahrt__klebt{position:relative;top:auto;height:clamp(360px,36vw,520px)}
  .js-fahrt .konfig{--f2:1!important}
  .marker{opacity:1;--sc:1;transition:none}
  .js-fahrt .konfig[data-weg]{visibility:visible;pointer-events:auto}
  .slider__spur{scroll-behavior:auto}
  .js-slider .zitat:not(.ist-aktiv) .zitat__text > *{opacity:1;transform:none}
  .hero > .badge,.hero__titel,.hero__lead,.hero__ctas,.hero__mikro,.hero__titel .akzent{animation:none}
}

/* ---- 11c Rechtsseiten (Impressum, Datenschutz) ---------------------------
   Wortlaut 1:1 von schwebewerk.de (gemeinsam/teile/recht/), Rahmen aus der
   index.html (gemeinsam/teile/rechtsseiten.py). Lesespalte statt Content-Breite. */
.rechtsseite{padding-top:var(--s-5)}
.rechtstext{max-width:36em;color:var(--text)}   /* 576 px: ~70 Zeichen je Zeile (gemessen, vorher 95) */
.rechtstext h1{font-size:clamp(36px,4vw,48px);line-height:1.1;color:var(--auf);margin-bottom:var(--s-4)}
.rechtstext h2{font-size:20px;line-height:1.35;font-weight:700;color:var(--auf);margin:var(--s-4) 0 var(--s-1)}
.rechtstext p,.rechtstext li{font-size:16px;line-height:1.7}
.rechtstext p + p,.rechtstext ul + p,.rechtstext p + ul{margin-top:var(--s-2)}
.rechtstext ul{padding-left:1.2em;list-style:disc}
.rechtstext li + li{margin-top:var(--s-1)}
.rechtstext strong{font-weight:700;color:var(--auf)}
.rechtstext a{color:var(--tk-fest);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.rechtstext a:hover{color:var(--auf)}
/* InGlory-Hinweis unter dem Impressum (Stempel; Aufbau 1:1 Referenz Artearth, Farben neutral:
   Karte im Schwarz des Fuß-Badges #111411, Schrift weiß — keine Kundenfarbe, keine InGlory-Marke) */
.inglory-note{display:flex;align-items:flex-start;gap:20px;max-width:36em;margin-top:var(--s-5);padding:26px 28px;
  background:#111411;color:#fff;border-radius:var(--r-karte);transition:box-shadow .4s var(--ease)}
.inglory-note:hover{box-shadow:0 12px 34px -14px rgba(17,20,17,.55)}
.inglory-note__mark{width:36px;height:36px;flex:none;margin-top:2px;color:#fff}
.inglory-note p{margin:0}
.inglory-note .inglory-note__label{font-size:12px;line-height:18px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.inglory-note .inglory-note__name{margin-top:4px;font-size:18px;line-height:26px;font-weight:700;color:#fff}
.inglory-note__meta{display:grid;gap:6px;margin-top:10px;font-size:14px;line-height:1.6;color:#fff}
.inglory-note__meta span{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.inglory-note__ico{width:15px;height:15px;flex:none;color:rgba(255,255,255,.72)}
.inglory-note__meta a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.inglory-note__meta a:hover{text-decoration-thickness:2px}
.inglory-note a:focus-visible{outline-color:#fff}
@media(max-width:560px){.inglory-note{flex-direction:column;gap:14px;padding:22px 20px}}
/* Tabellen (Cookie-Übersicht der ReeZone-Datenschutzerklärung) — schmal lesbar, auf dem Handy wischbar */
.rechtstext table{display:block;overflow-x:auto;margin-top:var(--s-2);border-collapse:collapse;font-size:14px;line-height:1.5}
.rechtstext th,.rechtstext td{padding:10px 12px;border:1px solid rgba(37,37,37,.14);text-align:left;vertical-align:top}
.rechtstext th{background:var(--grau);color:var(--auf);font-weight:700}

/* ---- 11d Einwilligung (Conversion-Tracking) --------------------------------
   Erscheint nur, wenn in der Seite eine Google-Ads-ID eingetragen ist (seite.js).
   Beide Knöpfe gleich gewichtet (DSGVO/TTDSG: Ablehnen so leicht wie Annehmen). */
.einwilligung{position:fixed;left:20px;bottom:20px;z-index:70;width:min(520px,calc(100vw - 40px));
  animation:einwilligungRein .3s var(--ease) both}
.einwilligung[hidden],[data-einwilligung][hidden]{display:none!important}
.einwilligung__karte{background:#fff;border:1px solid rgba(37,37,37,.12);border-radius:var(--r-karte);
  padding:var(--s-3);box-shadow:0 24px 60px -24px rgba(37,37,37,.45)}
/* 0,2,0: sonst gewinnt body.entwurf h2 (entwurf.css) und der Titel wird 32–52 px groß (Prüfung 09.11.2026, K1) */
.einwilligung .einwilligung__titel{font-size:18px;line-height:1.35;color:var(--auf)}
.einwilligung__text{margin-top:var(--s-1);font-size:14px;line-height:1.6;color:var(--text)}
.einwilligung__text a{color:var(--tk-fest);text-decoration:underline;text-underline-offset:2px}
.einwilligung__knoepfe{margin-top:var(--s-2);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:380px){.einwilligung__knoepfe{grid-template-columns:1fr}}
.einwilligung__knopf{width:100%;justify-content:center;padding-right:25px}
@keyframes einwilligungRein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.einwilligung{animation:none}}
.fuss__einwilligung{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(37,37,37,.3)}
/* ab 768 px rechts unten neben der Rail, damit die Hero-Knöpfe frei bleiben (K5, 09.11.2026) */
@media(min-width:768px){.einwilligung{left:auto;right:calc(var(--rail-b) + 24px);width:min(440px,calc(100vw - 40px))}}
@media(max-width:767px){
  .einwilligung{left:12px;right:12px;width:auto;bottom:calc(var(--h-bar) + 12px)}
  .einwilligung__karte{padding:var(--s-2)}
}

/* ---- 12 Barrierefreiheit ------------------------------------------------ */
.nur-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:10px;top:-70px;z-index:99;padding:12px 20px;background:var(--ink);color:#fff;border-radius:var(--r-pill);
  font-weight:700;text-decoration:none;transition:top .15s var(--ease)}
.skip:focus{top:10px}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.kw input:focus-visible + .kw__inhalt{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px rgba(255,255,255,.9)}
.buehne__canvas:focus-visible{outline:3px solid var(--ink);outline-offset:-9px;box-shadow:inset 0 0 0 9px rgba(255,255,255,.9);border-radius:var(--r-karte)}
.fl-tief :where(a,button):focus-visible,.topleiste :where(a,button):focus-visible,
.kapitel-dunkel :where(a,button):focus-visible{outline-color:#fff;box-shadow:0 0 0 6px rgba(0,0,0,.55)}
@media not all and (hover:hover){
  .btn:hover,.problem:hover,.karte--hebt:hover,.kw:hover .kw__inhalt{transform:none;box-shadow:none}
}

/* ---- 13 Mobil — ganz am Ende, gewinnt die Kaskade ----------------------- */
@media(max-width:1200px){
  .hero__titel{white-space:normal;max-width:24ch;margin-inline:auto}
  .hero__mikro{flex-wrap:wrap;white-space:normal}
}
@media(max-width:1100px){
  .split,.split--text-links{grid-template-columns:1fr 1fr;gap:40px}
  .zitat{grid-template-columns:minmax(0,340px) 1fr;gap:40px}
  .film__inner{gap:40px}
}
@media(max-width:1024px){
  :root{--s-sekt:80px;--s-naht:60px;--s-5:40px;--s-6:60px}
}
@media(max-width:900px){
  .karte,.problem{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.9)}
  .fl-tief .karte{background:rgba(255,255,255,.08)}
  .laufband__kopf{flex-direction:column;align-items:flex-start;gap:var(--s-1)}
  .kopf__nav{display:none}
  .karten,.karten--2{grid-template-columns:1fr}
  .probleme{grid-template-columns:1fr;grid-template-rows:none}
  .problem{grid-row:auto;grid-template-rows:auto auto}
  .split,.split--text-links{grid-template-columns:1fr}
  .split--text-links .split__bild{order:0}
  .split__bild{max-width:640px}
  .bento{grid-template-columns:1fr}
  .karte--buehne{grid-row:auto;min-height:0}
  .tellerbuehne{min-height:clamp(240px,56vw,340px)}
  .zitat{grid-template-columns:1fr;gap:var(--s-2)}
  .zitat .bild{max-width:360px;aspect-ratio:4/3}
  .film__inner{grid-template-columns:1fr;gap:var(--s-2)}
  /* Vorschau flacher (Mike 14.10.2026: „deutlich weniger hoch …, weil wir den ja eh in der Vollansicht
     oeffnen"): 21:9, hoechstens 180 px; Play-Kreis 56 px. height:auto, sonst gewinnt das height-Attribut
     des Bildes und das Seitenverhaeltnis greift nie (gemessen vorher 350 x 653 px bei 390). */
  .film__start img{height:auto;aspect-ratio:21/9;max-height:180px}
  .film__play{width:56px;height:56px}
  .film__play svg{width:23px;height:23px;margin-left:3px}
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .varianten{grid-template-columns:1fr}
  .fuss__kontakt{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .fuss__oben{gap:var(--s-5)}
  .fuss__siegel img{height:80px}
  /* Bausteine der Beratungs-LP */
  .schichten{grid-template-columns:1fr;gap:var(--s-4)}
  .schichten__buehne{padding:var(--s-3)}
  .hero__bild{aspect-ratio:4/3}
  .banner{grid-template-columns:1fr;gap:var(--s-3);padding:var(--s-3)}
  .zahlen{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s-5)}
  .ablauf li{grid-template-columns:44px 1fr;column-gap:var(--s-2)}
  .ablauf__nr{width:44px;height:44px;font-size:17px}
  /* Vergleich stapelt: Kriterium wird zur Zwischenzeile, jede Zelle nennt ihre Spalte */
  .vergleich__zeile{grid-template-columns:1fr}
  .vergleich__kopf{display:none}
  .vergleich__kopf + .vergleich__zeile > *{border-top:0}
  .vergleich__krit{background:var(--grau);font-size:13px;line-height:18px;
    letter-spacing:1.5px;text-transform:uppercase;color:var(--text)}
  .vergleich__marke{display:block;font-size:12px;line-height:18px;font-weight:700;
    letter-spacing:1.5px;text-transform:uppercase;color:var(--text);margin-bottom:2px}
  .vergleich__sw .vergleich__marke{color:var(--tk-fest)}
}
/* 641–900: 21:9 mit 180-px-Deckel wurde bei 768 zu 616×180 (3,4:1) — dort 16:9 ohne Deckel (Nebenbefund SW-Seite) */
@media(min-width:641px) and (max-width:900px){
  .film__start img{aspect-ratio:16/9;max-height:none}
}
@media(max-width:860px){
  p.topleiste__kontakt{display:none}
  .topleiste__text{display:none}
  .topleiste__inner{justify-content:center}
}
@media(max-width:820px){
  /* HANDY: die Fahrt bleibt — der SCROLL fuehrt das Modell (Heranfahrt +
     Zonentour). Buehne klebt unter der Menue-Pille, statt sieben Markern
     zeigt eine Plakette die aktuelle Zone. Das Panel steht als normaler
     Block UNTER der Strecke (app.js verschiebt es dorthin). Kein Fingerdrehen. */
  .fahrt{margin-top:var(--s-4)}
  .js-fahrt .fahrt{height:320vh;margin-top:var(--s-4)}
  .js-fahrt .fahrt__klebt{position:sticky;top:calc(var(--h-kopf) + 8px);
    height:calc(100vh - var(--h-kopf) - 16px);max-height:620px;width:100%;margin:0}
  html:not(.js-fahrt) .fahrt__klebt{height:clamp(300px,90vw,420px)}
  .js-fahrt .fahrt__klebt{--einzug:0px}
  .js-fahrt .konfig{right:auto}
  .buehne__canvas{height:100%}
  .konfig,.js-fahrt .konfig{position:static;width:100%;height:auto;max-height:none;overflow:visible;
    transform:none;opacity:1;margin:var(--s-4) auto 0;pointer-events:auto;visibility:visible;
    padding:var(--s-2);box-shadow:none;max-width:var(--box)}
  .konfig__zonen .zonen__liste{gap:8px}
  .konfig__reset,.konfig__weiter{min-height:48px}
  .konfig[data-weg]{pointer-events:auto}
  .buehne__hinweis,.js-fahrt .buehne__hinweis{display:none}
  .fahrt__hinweis{display:flex}
  .fahrt__titel{padding:10px 14px;gap:4px;width:calc(100% - 24px)}
  .fahrt__titel-gross{font-size:15px;line-height:1.3}
  .fahrt__titel-klein{font-size:11px;letter-spacing:1.5px}
  .zonen-marker,.konfig-einstieg{display:none}
  .zonen-fokus{display:grid}
  .karten-wahl{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;justify-content:stretch}
  .kw__inhalt{aspect-ratio:auto;min-height:150px;padding:16px 12px}
  /* Kachel mit Empfehlungs-Marke: Inhalt beginnt unter der Marke (gemessen 26.09.2026:
     „Empfohlen" lag bei 390 px 7 px ueber dem Haus-Symbol) */
  .kw__marke + .kw__inhalt{padding-top:36px}
  .split__bild{height:auto;min-height:0}
  .split__bild img{height:auto}
  .funnel__schritte{font-size:13px;gap:6px 16px}
  .hero{padding:var(--s-4) 12px 0}
  .hero__ctas{flex-direction:column;align-items:stretch;width:100%;max-width:420px}
  .hero__ctas .btn{width:100%;justify-content:space-between}
  .hero__mikro{gap:var(--s-1) var(--s-2)}
  .probleme{margin-top:var(--s-5);gap:12px}
  .laufband{margin-top:var(--s-5)}
  .sekt__kopf--zeile{align-items:flex-start}
  .btn{letter-spacing:1.5px}
}
@media(max-width:700px){
  :root{--s-sekt:64px}
  .feld--paar{grid-template-columns:1fr}
  .laufband__spur{gap:34px}
  .laufband__spur img{height:30px}
  .funnel{padding:24px 18px}
  .karte--gross{padding:28px 22px}
  .karte{padding:24px 20px}
  .variante__bild{height:200px}
  .variante__bild img{max-height:170px}
  .partner__rahmen{padding:var(--s-3) var(--s-2)}
}
@media(max-width:560px){
  .nur-breit{display:none}
  .kopf .btn{letter-spacing:1px;font-size:13px}
  .trust__grid{grid-template-columns:1fr;gap:var(--s-2)}
  .trust__item{flex-direction:column;text-align:center;gap:10px}
  .drucktest__buehne{padding:22px 16px 64px}
  .drucktest__schiene{left:16px;right:16px}
  .drucktest__punkt{left:calc(16px + (100% - 32px) * var(--xf,.5))}
  .drucktest__flaeche{height:64px}
  .kopf__logo img{height:30px}
  .fuss__kontakt{grid-template-columns:1fr}
  .hakenliste--gross li{grid-template-columns:28px 1fr;column-gap:12px;padding:16px 0}
  .hinweis{padding:20px}
  .faq summary{font-size:16px;line-height:24px;padding-right:50px}
  .zitat .bild{max-width:100%}
  .btn{padding-left:22px;gap:12px}
  /* Knoepfe im Inhalt: kleine Markenvariante (Pille 50, Kreis 40) und 13 px / 1 px Sperrung.
     Gemessen 23.09.2026: vorher brachen bei 360–430 px bis zu 7 Beschriftungen um, zwei davon
     dreizeilig; jetzt ab 390 px LP3 alle einzeilig, nirgends mehr drei Zeilen. */
  main .btn{min-height:50px;padding-left:20px;font-size:13px;letter-spacing:1px}
  main .btn .btn__pfeil{width:40px;height:40px}
}
/* Kleinstgeraete: lange Woerter in Ueberschriften duerfen trennen („Multizonen-rahmen"
   stand bei 320 px 1 px ueber dem Rand). Nur Woerter ab 12 Zeichen, je 5 Zeichen vor/nach. */
@media(max-width:380px){
  h2,h3{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 5 5;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5}
}
/* Kleinstgeraete (320er-Klasse): Pfeilkreis weg, sonst werden 34–35 Zeichen dreizeilig */
@media(max-width:359px){
  main .btn .btn__pfeil{display:none}
  main .btn{padding-right:20px;justify-content:center;text-align:center}
}
/* Hero-H1 auf Handys fliessend: bei festen 36 px stand LP1 bei 390 px auf 1 px Kante
   („Wieder ruhig schlafen" 365 px bei 366 px Platz) und kippte beim Schriftwechsel.
   8,6vw laesst auf allen Handybreiten 3–5 % Reserve, beide H1 bleiben zweizeilig. */
@media(max-width:430px){
  .hero__titel{font-size:min(36px,8.6vw)}
}

/* ---- 13b Mobil: Kampagnen-Bausteine (23.09.2026) -------------------------- */
@media(max-width:1023px){
  .partner{grid-template-columns:1fr;gap:var(--s-4)}
}
@media(max-width:900px){
  .bewertungen__spur{grid-auto-columns:calc((100% - 20px) / 2)}
  /* Karten-Stapel (Ausstattung Nr. 22, Referenz HMG): Karten haengen sich unter
     der Menue-Pille ein, die naechste schiebt sich darueber, 10 px Versatz je
     Karte lassen die Vorgaenger als Kanten stehen. Deckender Grund, sonst
     scheint die untere Karte durch. */
  /* Gleich hohe Zeilen (1fr = hoechste Karte): sonst ragt eine hoehere Vorgaengerkarte
     unten unter der naechsten heraus (gemessen 16/18 px bei 390/360). Kein Innenabstand
     unten wie bei HMG: in Chromium bringt er der letzten Karte nichts (gemessen), nur
     50 px Weissraum neben der Skala. Die oben liegende Karte markiert seite.js (.ist-oben). */
  .karten--stapel{gap:14px;grid-auto-rows:1fr}
  .karten--stapel > .karte{position:sticky;top:calc(var(--h-kopf) + 8px + var(--i,0) * 10px);
    background:#fff;box-shadow:0 -14px 34px -18px rgba(37,37,37,.45);
    transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
  .karten--stapel > .karte.ist-oben{border-color:rgba(var(--tk-akzent-rgb),.55);
    box-shadow:0 -14px 34px -18px rgba(37,37,37,.45),0 0 0 3px rgba(var(--tk-rgb),.14)}
  .karten--stapel > :nth-child(1){--i:0}.karten--stapel > :nth-child(2){--i:1}.karten--stapel > :nth-child(3){--i:2}
  .karten--stapel > :nth-child(4){--i:3}.karten--stapel > :nth-child(5){--i:4}.karten--stapel > :nth-child(6){--i:5}
  /* Bereichs-Stapel einspaltig (zwei Spalten liessen bei 768 px nur 237 px Textbreite):
     TEXT OBEN, Bild darunter. Die Folgekarte schiebt sich von unten ueber die Karte; so
     verdeckt sie zuerst das Bild und der Absatz bleibt am laengsten lesbar (mit Bild oben lag
     der Absatz nach 40 px Scrollweg schon darunter, gemessen 390 px). Engerer Versatz, damit
     acht Kanten nicht das halbe Fenster belegen. */
  .stapel{gap:var(--s-4)}
  .stapel__karte,.stapel__karte:nth-child(even){grid-template-columns:minmax(0,1fr);gap:var(--s-2);
    padding:var(--s-3);top:calc(var(--h-kopf) + 8px + var(--i,0) * 6px)}
  .stapel__karte .stapel__bild,.stapel__karte:nth-child(even) .stapel__bild{order:1}
  .stapel__karte{align-content:space-between}   /* Text oben, Bild buendig unten, auch in gestreckten Karten */
  .stapel__text h3{font-size:21px}
  .stapel__text h3 + p{margin-top:var(--s-1)}
  .stapel__text p{max-width:none}
}
@media(max-width:767px){
  /* Leiste unten, volle Breite, Beschriftung unter dem Symbol */
  :root{--h-bar:calc(58px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:var(--h-bar)}
  .rail{top:auto;bottom:0;left:0;right:0;transform:none;flex-direction:row;border-radius:0;
    border:0;border-top:var(--glas-rand);padding-bottom:env(safe-area-inset-bottom,0px);
    background:rgba(255,255,255,.94)}
  .rail__knopf{flex:1;width:auto;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:0!important}
  .rail__knopf + .rail__knopf{border-top:0;border-left:1px solid rgba(37,37,37,.08)}
  .rail__text{position:static;transform:none;opacity:1;pointer-events:auto;background:none;color:inherit;
    padding:0;font-size:11px;line-height:14px;letter-spacing:1px}
  .rail__knopf--termin{flex:1.4}
  /* Klebende 3D-Buehne endet ueber der Leiste */
  .js-fahrt .fahrt__klebt{height:calc(100vh - var(--h-kopf) - 16px - var(--h-bar))}
  /* kompakt, damit die Karte auch im Handy-Fenster ganz steht (iPhone Safari ~750 px mit
     eingeklappten Leisten): Bild 16:10, Abstaende auf der Skala */
  .stapel__karte,.stapel__karte:nth-child(even){padding:var(--s-2);border-radius:20px}
  .stapel__bild{aspect-ratio:16/10}
  .stapel__text .badge{margin-bottom:var(--s-1)}
  /* Zustandsschilder klein: auf dem 16:10-Bild deckten sie sonst die rote Wirbelsaeule ab */
  .stapel__zustand{left:8px;gap:6px;padding:3px 8px;font-size:11px;line-height:16px}
  .stapel__zustand::before{width:8px;height:8px}
  .stapel__zustand--oben{top:8px}
  .stapel__zustand--unten{top:calc(50% + 8px)}
}
@media(max-width:640px){
  /* Handy: Zusagen als Checkliste mit gemeinsamer linker Kante, als Block zentriert */
  .hero__mikro{display:grid;justify-content:center;justify-items:start}
  /* Zeilenfuellung (Messpflicht, gemessen 23.09.2026: bis 28 % Luft bei 390 px in
     Chromium und WebKit): Fliesstext mobil ohne „pretty" (haelt Platz frei) und mit
     deutscher Silbentrennung — lange Komposita erzwangen sonst fruehe Umbrueche.
     Ueberschriften bleiben ohne Auto-Trennung (dort setzen wir &shy; von Hand). */
  main p,main li,.lead,.schritt__text,.stimme__satz,.zitat__satz,.zitat__mehr,.schichten__wort > span{
    text-wrap:wrap;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:8 4 3;
    /* WebKit kennt hyphenate-limit-chars nicht und trennte „Posi-tion", „Schlafsituati-on" */
    -webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-lines:2}
  .bewertungen__spur{grid-auto-columns:86%}
  /* Knoepfe mobil in voller Breite (Ausstattung Nr. 21); Zurueck/Weiter im
     Funnel bleiben ein Paar. */
  .hero__ctas{flex-direction:column;align-items:stretch;width:100%}
  main .btn{width:100%;justify-content:space-between}
  main .btn--geist:not(:has(.btn__pfeil)){justify-content:center}
  .funnel__fuss .btn--geist{justify-content:center}
  .aussage{font-size:21px}
  .partner__form{padding:var(--s-3)}
  /* Google-Pille als Karte (Mike 14.10.2026: „wir haben nie so fette abgerundete Ecken gehabt";
     Radius = Karte): volle Breite, Logo · 5,0 · Sterne in Zeile 1, Text ueber die volle Breite in Zeile 2 */
  .google{width:100%;border-radius:var(--r-karte);display:grid;grid-template-columns:auto auto 1fr;
    align-items:center;gap:8px 12px;padding:14px 16px}
  .google__text{grid-column:1/-1}
  /* Wahl-Kacheln als Zeilen untereinander (Mike: „bitte als 3 untereinander"): Symbol 28 px links, Titel
     und Zusatz rechts in einer Spalte (darum Raster statt Flex), „Empfohlen" oben rechts auf der Kante */
  .karten-wahl{grid-template-columns:1fr;gap:10px}
  .kw__inhalt{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;row-gap:2px;
    align-content:center;align-items:center;justify-content:start;text-align:left;
    aspect-ratio:auto;min-height:64px;padding:14px 16px}
  .kw__inhalt .ic{grid-column:1;grid-row:1 / span 2;width:28px;height:28px}
  .kw__inhalt b,.kw__inhalt small{grid-column:2;justify-self:start}
  .kw__marke{left:auto;right:12px;top:-8px;transform:none}
  .kw__marke + .kw__inhalt{padding-top:14px}
  /* Fuss (Mike 14.10.2026: Social-Icons „mittig zentrieren, inklusive der Google Bewertung"; Nach-oben
     „ganz rechts an den Rand", die InGlory-Plakette so breit, dass der Knopf daneben passt) */
  .fuss__oben{flex-direction:column;align-items:center;text-align:center}
  .fuss__marke{justify-items:center}
  .fuss__bewertung{justify-content:center;flex-wrap:wrap}
  .fuss__social,.fuss__siegel{justify-content:center}
  .fuss__unten{flex-direction:column;align-items:stretch}
  .fuss__rechts{display:grid;grid-template-columns:minmax(0,1fr) 60px;gap:12px;width:100%}
  .fuss .credit-badge{justify-content:center;width:100%}
  /* Callout mit Haken: Haken ueber dem Text, beides mittig */
  .callout--haken{flex-direction:column;justify-content:center;text-align:center;gap:var(--s-1)}
  /* Abschluss-Zusagen untereinander, gemeinsame linke Kante, als Block mittig */
  .abschluss__zusagen{flex-direction:column;align-items:flex-start;width:max-content;max-width:100%;margin-inline:auto}
}

/* ---------------------------------------------------------------- Demo-Film aus dem 3D-Modell
   14.10.2026 (Termin 14.10., Mike: „wir kriegen das 3D-Modell so nicht eingebaut“): Aufnahme der Demo-Ansicht aus
   Felix Saleikes 3D-Modell (Parallelwelt) als Film; ein Klick öffnet das Modell im neuen Tab. Der Pause-Knopf liegt
   neben dem Link, nicht darin (WCAG 2.2.2). Verhalten: seite.js demoFilm() — startet erst im Bild, ruht bei
   reduzierter Bewegung, „Bewegung anhalten“ und verdecktem Tab. Ohne Skript: Standbild + Link. */
.demo{position:relative;margin:0;display:grid;gap:var(--s-1)}
.demo__buehne{position:relative;aspect-ratio:16/9;border-radius:var(--r-bild);overflow:hidden;background:#111;box-shadow:var(--schatten-bild)}
.demo__link{position:absolute;inset:0;display:block;color:inherit;text-decoration:none;border-radius:inherit}
.demo__link:focus-visible{outline:3px solid var(--tk);outline-offset:-3px}
.demo__film{display:block;width:100%;height:100%;object-fit:cover}
.demo__marke{position:absolute;left:18px;bottom:18px;isolation:isolate;display:inline-flex;align-items:center;gap:12px;padding:9px 9px 9px 22px;
  border-radius:999px;background:#fff;color:var(--ink);font-size:clamp(15px,1.25vw,18px);line-height:1.2;font-weight:800;
  box-shadow:0 10px 30px rgba(0,0,0,.34);transition:transform .25s var(--ease)}   /* Mike 02.11.2026 Punkt 11: „Deutlicher auffordern zur 3D ansicht“ (vorher 12 px) */
.demo__pfeil{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tk-fest);color:#fff}
.demo__pfeil .ic{width:20px;height:20px;color:#fff}
.demo__pfeil::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--tk-fest);opacity:0}
@media (prefers-reduced-motion:no-preference){html:not(.bewegung-aus) .demo__pfeil::after{animation:drei-d-puls 2.6s var(--ease) infinite}}
@keyframes drei-d-puls{0%{transform:scale(1);opacity:.45}70%,100%{transform:scale(1.6);opacity:0}}
@media (hover:hover){.demo__link:hover .demo__marke{transform:translateY(-2px)}}
.demo__pause{position:absolute;right:14px;top:14px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.demo__pause svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.demo__pause:focus-visible{outline:3px solid var(--tk);outline-offset:2px}
html:not(.js-demo) .demo__pause{display:none}
.demo__text{font-size:14px;line-height:22px;color:var(--text)}
/* Split mit Film links: Film bekommt die breitere Spalte (16:9 braucht Breite, sonst wirkt er klein) */
@media(min-width:1101px){.split--demo{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.split--demo{align-items:center}
@media(max-width:900px){.demo__marke{left:10px;bottom:10px;gap:10px;padding:6px 6px 6px 14px;font-size:14px}.demo__pfeil{width:34px;height:34px}.demo__pfeil .ic{width:18px;height:18px}}

/* ==== Vorteile auf einen Blick + Premium-Servicepaket Plus (Meeting 21.10.2026, Mike: „usps bzw vorteile mit schwebewerk /
   reezone müssen zusammengefasst werden wichtig ist das dieses + Paket deutlich hervorgehoben wird"). Beide Marken, je mit
   ihren Tokens: Kacheln mit Bild (Bildwelt medizinisch + echte Menschen), die Plus-Kachel und die Plus-Karte in Knopffarbe. */
.vorteile__titel{font-size:24px;line-height:1.25;margin:var(--s-6) 0 var(--s-3)}
.vorteile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none;text-align:left}
.vorteil{display:flex;flex-direction:column;min-width:0;background:var(--karte-bg);border:1px solid var(--karte-rand);
  border-radius:var(--r-karte);overflow:hidden;box-shadow:0 18px 40px -32px rgba(37,37,37,.45)}
.vorteil__bild{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--grau)}
.vorteil__bild--logo{object-fit:contain;padding:12% 18%;background:#fff}
.vorteil__text{display:flex;flex-direction:column;flex:1;padding:20px 22px 24px}
.vorteil h3{margin:0;font-size:18px;line-height:26px}
.vorteil p{margin:6px 0 0;font-size:15px;line-height:24px;color:var(--text)}
.vorteil--plus{background:var(--tk-knopf);border-color:transparent;color:#fff}
.vorteil--plus a{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.vorteil--plus .vorteil__text{padding-top:44px}
.vorteil__rahmen{position:relative;display:block}
.vorteil__zeichen{position:absolute;left:20px;bottom:-28px;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:#fff;color:var(--tk-knopf);font:800 40px/1 Manrope,ManropeErsatz,system-ui,sans-serif;box-shadow:0 12px 26px -12px rgba(0,0,0,.55)}
.vorteil--plus h3{color:#fff}
.vorteil--plus p{color:rgba(255,255,255,.92)}
.vorteil__mehr{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;font-size:13px;line-height:18px;
  font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.vorteil__mehr .ic{width:18px;height:18px;color:#fff;stroke:currentColor}
.vorteil--plus a:hover .vorteil__mehr .ic,.vorteil--plus a:focus-visible .vorteil__mehr .ic{transform:translateX(3px)}
.vorteil__mehr .ic{transition:transform .2s var(--ease)}
.vorteile--hero{margin-top:var(--s-5);width:min(var(--box),100%)}
@media(max-width:900px){.vorteile{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  .vorteile{grid-template-columns:1fr;gap:12px}
  .vorteil{flex-direction:row;align-items:stretch}
  .vorteil__bild{flex:0 0 112px;width:112px;min-height:112px;aspect-ratio:auto;align-self:stretch}
  .vorteil__bild--logo{padding:16px}
  .vorteil__text{padding:14px 16px}
  .vorteil h3{font-size:16px;line-height:22px}
  .vorteil p{font-size:14px;line-height:21px}
  .vorteil--plus a{flex-direction:row;align-items:stretch}
  .vorteil__rahmen{flex:0 0 112px;width:112px}
  .vorteil__rahmen .vorteil__bild{width:100%;height:100%;min-height:112px}
  .vorteil__zeichen{left:auto;right:-18px;bottom:auto;top:50%;transform:translateY(-50%);width:38px;height:38px;font-size:28px}
  .vorteil--plus .vorteil__text{padding:14px 16px 14px 30px}
}

.plus{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;margin-top:var(--s-5);align-items:stretch;
  scroll-margin-top:calc(var(--h-kopf) + 24px);text-align:left}
.plus--allein{grid-template-columns:1fr}
.plus__karte{position:relative;overflow:hidden;background:var(--tk-knopf);color:#fff;border-radius:var(--r-gross);padding:var(--s-4)}
.plus__karte::after{content:"+";position:absolute;right:-.04em;top:-.3em;font:800 340px/1 Manrope,ManropeErsatz,system-ui,sans-serif;
  color:rgba(255,255,255,.08);pointer-events:none}
.plus__karte > *{position:relative;z-index:1}
.plus__marke{display:inline-flex;align-items:center;gap:12px;font-size:12px;line-height:18px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:#fff}
.plus__zeichen{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--tk-knopf);
  font:800 30px/1 Manrope,ManropeErsatz,system-ui,sans-serif}
.plus__titel{margin:var(--s-2) 0 0;max-width:24ch;color:#fff;font-size:clamp(26px,3vw,36px);line-height:1.2}
.plus__karte p{margin:var(--s-2) 0 0;max-width:62ch;color:#fff;font-size:16px;line-height:26px}
.plus__liste{display:grid;gap:10px;margin:var(--s-3) 0 0;padding:0;list-style:none}
.plus__liste li{display:grid;grid-template-columns:22px 1fr;column-gap:12px;align-items:start;font-size:16px;line-height:24px;font-weight:600}
.plus__liste .ic{width:22px;height:22px;stroke-width:2.4;margin-top:1px;color:#fff}
.plus__karte .plus__usp{margin-top:var(--s-3);padding:16px 20px;border-radius:var(--r-karte);background:rgba(0,0,0,.16);font-weight:600}
.plus__usp b{display:block;font-size:20px;line-height:28px;font-weight:800}
.plus__karte .plus__hinweis{font-size:14px;line-height:22px;color:rgba(255,255,255,.86)}
.plus__karte .btn{margin-top:var(--s-3)}
.plus__basis{display:flex;flex-direction:column;padding:var(--s-4);background:var(--karte-bg);border:1px solid var(--karte-rand);
  border-radius:var(--r-gross)}
.plus__basis-titel{margin:0;font-size:12px;line-height:18px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--tk-fest)}
.plus__basis h3{margin:var(--s-1) 0 0;font-size:22px;line-height:30px}
.plus__basis p{margin:var(--s-2) 0 0;font-size:16px;line-height:26px;color:var(--text)}
.plus__basis-bild{display:block;width:100%;height:auto;margin-top:auto;padding-top:var(--s-3)}
/* Plus-Karte allein (ReeZone): Text links, Liste + Knopf rechts, damit die volle Breite nicht leer läuft */
@media(min-width:901px){.plus--allein .plus__karte{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:var(--s-5);align-items:start}
  .plus__rechts{padding-top:58px}.plus__rechts .plus__liste{margin-top:0}}
@media(max-width:900px){
  .plus{grid-template-columns:1fr}
  .plus__karte,.plus__basis{padding:var(--s-3)}
  .plus__karte::after{font-size:220px}
}