/* ============================================================
   landing.css — Seiten-Layout der .app-Landing
   UMBAU 02.07. (Inhaber-Go): .com-Designsprache auf das bestehende
   11-Sektionen-Skelett. Struktur/IDs unveraendert.
   Viewport fix 1920x1080 wie .com — kein Responsive, kein clamp,
   keine Media Queries (D5). Grid-Regel: align-items start, nie center.
   Rezept-Quellen: site/assets/css/home.css (Hero-Treppe, Stage, Chips,
   FAQ, Buch-Cover), home-hub.css (Karten-Hover, Trust-Werte),
   app.css (Stage-Chrome). Grids = Unterseiten-Mass 640/610 (Pad-Container).
   ============================================================ */

/* ============================================================
   POSITIONS-WERTE — EINZIGE QUELLE DER WAHRHEIT (Stand: 2026-07-20-b)
   Die Seite rendert IMMER aus diesen Werten — auch ohne das
   Positions-Panel (Bau-Werkzeug). Panel-Entfernen verschiebt nichts.
   Feintuning-Ritual (Sicherungs-Konzept, Inhaber-Hinweis 02.07.,
   ANGEPASST 17.07.): Panel (Taste s) → "Werte kopieren" liefert einen
   TEILBLOCK (nur aktive Panel-Gruppen §2/§4/§5 + §6–§11) → diese Zeilen hier
   EINPFLEGEN — NIE den ganzen :root ersetzen, die Hero-/Marken-Werte
   stehen NUR noch hier (Panel-Gruppen dafür entfernt, Inhaber 17.07.;
   letzter Voll-Panel-Stand: Git 0cc5c03) → LP_STAND im Panel-Script
   auf denselben neuen Stand setzen (alte Sitzungen verfallen).
   Stand -c: Hero-Feinlage nach beweglichem Panel (Inhaber 04.07.).
   Stand 2026-07-17-a: Panel-Gruppe "§2 Demo-Buehne" NEU (Head/Text/
   Stage je X/Y); alle d2-Werte 0 = Ist-Lage vor dem Feintuning.
   Stand 2026-07-17-b: Panel verschlankt (Hero/Marke raus) + Gruppen
   "§4 Lernsystem" (Kicker/Head/Chips/Text/Knopf/Buehne) und
   "§5 Hufberatung" (Schriftblock/Karte) NEU; alle v4-/b5-Werte 0.
   Stand 2026-07-20-a: Inhaber-Feintuning §2/§4/§5 EINGEPFLEGT (Teilblock
   20.07., 22 Werte) + Panel-Gruppen §6–§11 NEU (Muster §5: Schriftblock
   + Stage bzw. Head/Karten, Liste, Visuals, Block); alle w6-/t7-/p8-/
   f9-/h10-/s11-Werte 0 = Ist-Lage.
   Stand 2026-07-20-b: POSITIONS-VORSCHLAG §6–§11 (CC auf Inhaber-Auftrag
   "Textbloecke inkl. Ueberschrift+CTA weiter nach unten, Karten bleiben";
   ABNAHME AUSSTEHEND): Mess-Basis = abgenommene §2/§4/§5 (h2 ~200-280 vom
   Sektionsstart, unten war alles bei 112). §6/§7/§10-Textbloecke +150,
   §8/§9 Head UND Karten/Liste je +70 (gemeinsam, sonst Quetschung),
   §11-Block +40. Stages/Visuals unveraendert (Inhaber: "in Ordnung").
   Stand 2026-07-31-a: §4 Lernsystem (Inhaber 31.07., DE+EN gemeinsam):
   Head eine Zeile tiefer (head-y 46->81), Text zwei Zeilen an die Head
   heran (text-y 177->119); Kicker/Chips/CTA/Buehne unveraendert.
   ============================================================ */
:root{
  /* Icon (Schimmer, zentral) */
  --lp-icon-x:0px;  --lp-icon-y:35px;  --lp-icon-groesse:859px;  --lp-icon-staerke:0.12;
  /* App-Mockup (Phone) — Position ueber x/y (Panel-steuerbar wie gehabt).
     Demo-Groesse = --lp-app-demo-scale (die Demo bringt EIGENEN Rahmen mit;
     --lp-app-breite war die alte Platzhalter-Breite, steuert die Demo nicht mehr). */
  --lp-app-x:171px;   --lp-app-y:-20px;   --lp-app-breite:326px;   --lp-app-demo-scale:0.84;
  /* Kicker */
  --lp-kicker-x:-170px; --lp-kicker-y:-60px;
  /* Treppe, Zeile fuer Zeile */
  --lp-z1-x:-82px; --lp-z1-y:95px;
  --lp-z2-x:-101px; --lp-z2-y:146px;
  --lp-z3-x:-57px; --lp-z3-y:201px;
  /* Lead — 3 einzeln positionierbare Zeilen (Inhaber 06.07.); Pyramide per Panel */
  --lp-lead1-x:-95px; --lp-lead1-y:301px;
  --lp-lead2-x:31px; --lp-lead2-y:336px;
  --lp-lead3-x:169px; --lp-lead3-y:362px;
  /* CTA-Pill */
  --lp-cta-x:865px; --lp-cta-y:251px; --lp-cta-groesse:1;
  /* Wortmarke im Header */
  --lp-marke-x:-50px; --lp-marke-y:0px; --lp-marke-breite:206px;
  /* §2 Demo-Buehne (Panel-Gruppe seit 2026-07-17-a) — Inhaber-Feintuning EINGEPFLEGT 20.07. */
  --lp-d2-head-x:-2px;  --lp-d2-head-y:166px;
  --lp-d2-text-x:0px;  --lp-d2-text-y:190px;
  --lp-d2-stage-x:77px; --lp-d2-stage-y:-21px;
  /* §4 Lernsystem (Panel-Gruppe seit 2026-07-17-b) — Inhaber-Feintuning EINGEPFLEGT 20.07. */
  --lp-v4-kicker-x:93px; --lp-v4-kicker-y:46px;   /* 23.07. Inhaber-Sichtung EN: Kicker zur Headline gerueckt (= Head-Versatz, natuerlicher Abstand); Feintuning-Wert vorher -205/-27 */
  --lp-v4-head-x:93px;   --lp-v4-head-y:81px;   /* 31.07. Inhaber: Head EINE Zeile tiefer (46+35=h2-Zeile); Kicker bleibt auf 46 */
  --lp-v4-chips-x:240px;  --lp-v4-chips-y:157px;
  --lp-v4-text-x:168px;   --lp-v4-text-y:119px;  /* 31.07. Inhaber: Text ZWEI Zeilen an die Head heran (177-2x28.8) */
  --lp-v4-cta-x:341px;    --lp-v4-cta-y:327px;
  --lp-v4-stage-x:138px;  --lp-v4-stage-y:-69px;
  /* §5 Hufberatung (Panel-Gruppe seit 2026-07-17-b) — Schriftblock gesamt + Karte; Inhaber-Feintuning EINGEPFLEGT 20.07. */
  --lp-b5-text-x:-67px;  --lp-b5-text-y:159px;
  --lp-b5-stage-x:130px; --lp-b5-stage-y:-22px;
  /* §6 Weg (Panel-Gruppe) — 24.07. einspaltiger Filmstreifen (4 Screens + Video):
     alter +150 (2-Spalten-Zeit) liess den hohen Streifen 54px ueber das Sektionsende
     ragen -> auf 0 gemessen (Inhalt sitzt mit 112/96 Padding mittig). Wie §10-Lehre (Z.89).
     Feinschliff per Panel beim Inhaber. */
  --lp-w6-text-x:0px;  --lp-w6-text-y:0px;
  --lp-w6-stage-x:0px; --lp-w6-stage-y:0px;
  /* §7 Test-Drive (seit 2026-07-20-a) — CC-Vorschlag -b: Textblock +150 */
  --lp-t7-text-x:0px;  --lp-t7-text-y:150px;
  --lp-t7-stage-x:0px; --lp-t7-stage-y:0px;
  /* §8 Preise (seit 2026-07-20-a) — CC-Vorschlag -b: Head+Karten GEMEINSAM +70 */
  --lp-p8-head-x:0px;   --lp-p8-head-y:70px;
  --lp-p8-karten-x:0px; --lp-p8-karten-y:70px;
  /* §9 FAQ (seit 2026-07-20-a) — CC-Vorschlag -b: Head+Liste GEMEINSAM +70 */
  --lp-f9-head-x:0px;  --lp-f9-head-y:70px;
  --lp-f9-liste-x:0px; --lp-f9-liste-y:70px;
  /* §10 Herkunft (seit 2026-07-20-a) — CC-Vorschlag -b: Textblock +150, Visuals bleiben */
  --lp-h10-text-x:0px;    --lp-h10-text-y:60px;
  --lp-h10-visuals-x:0px; --lp-h10-visuals-y:60px;   /* 23.07.: Layout einspaltig (Visuals UNTER Statement), Gleichtakt-Versatz; alte +150 (Zweispalt-Zeit) liess den vollen Inhalt 54px ueber das Sektionsende ragen — Feinschliff per Panel beim Inhaber */
  /* §11 Schluss (seit 2026-07-20-a) — CC-Vorschlag -b: Block moderat +40 */
  --lp-s11-block-x:0px; --lp-s11-block-y:40px;
}

/* ============ ES-FEINLAGEN (Inhaber-Zurufe 02.08., ES-Layout-Runde) ============
   NUR fuer die spanische Ansicht: i18n.js setzt html[lang] beim Sprachwechsel,
   dieser Block uebersteuert dann einzelne :root-Werte. DE/EN rendern weiter
   exakt den abgenommenen :root-Stand — der :root-Block selbst bleibt
   unangetastet (Schieber-Sicherung: LP_STAND unveraendert).
   Einheit "Buchstabe" = am 1920er-Band gemessene mittlere Zeichenbreite des
   jeweiligen Elements (Kicker ~13px/Zeichen, Treppenwoerter ~34/43px). */
html[lang="es"]{
  --lp-kicker-x:-210px;  /* -170 → 3 Buchstaben (~40px) nach links */
  --lp-z2-x:0px;         /* "reales" -101 → 3 Buchstaben (~101px) nach rechts */
  --lp-z3-x:-144px;      /* "comparados" -57 → 2 Buchstaben (~87px) nach links */
}
/* #pferde-Titel hing 244px ueber seinem Textblock "alleine in der Luft"
   (Inhaber 02.08.) — runter zur Text/Video-Gruppe (~54px Abstand zum Text).
   War zunaechst ES-only; Inhaber 03.08. (Sprachseiten-Abnahme): die ES-Position
   ist die richtige → gilt jetzt fuer ALLE Sprachen (DE/EN nachgezogen, Regel
   darum raus aus dem ES-Feinlagen-Kontext).
   Media-Schranke: Handy/Tablet (<=1689) layouten die Sektion eigenstaendig
   in responsive.css — dort NICHT eingreifen. */
@media (min-width: 1690px){
  #pferde .container > h2{ transform:translateY(190px); }
}

/* ============ 1 · HERO (Rezept .com .hero — Glow TL in Hero-Staerke 0.32) ============ */
.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:var(--ink-body);                 /* Grundwert gedaempft; Hero-Texte setzen ihre eigenen Werte */
  padding:96px 0 84px;
  background:
    radial-gradient(circle at 2% 3%, rgba(227,130,50,0.32), rgba(227,130,50,0.08) 14%, rgba(227,130,50,0.00) 24%),
    linear-gradient(135deg, #1a3050 0%, #13283F 30%, #0f1f30 100%);
}
.hero::after{
  content:""; position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.016) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.010) 0 1px, transparent 1px 28px);
  opacity:0.12; mix-blend-mode:soft-light;
}

/* Icon ZENTRAL — "mehr spueren als sehen" (Inhaber 02.07.); Staerke per Schalter pruefbar */
.hero-schimmer{
  position:absolute;
  left:50%; top:46%;
  transform:translate(-50%,-50%) translate(var(--lp-icon-x), var(--lp-icon-y));
  width:var(--lp-icon-groesse);
  aspect-ratio:1/1;
  z-index:0;
  pointer-events:none;
  background:url("../logo/hoofolution-icon-rund.webp") center/contain no-repeat;
  opacity:0;
  transition:opacity 0.6s ease;
}
body[data-schimmer="an"] .hero-schimmer{ opacity:var(--lp-icon-staerke); }   /* Vorgabe 0.10–0.15 */

.hero-inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:640px 610px;   /* Unterseiten-Mass: 640+610+54 = 1304 <= 1320 Innenbreite */
  gap:54px;
  align-items:start;                   /* Regel: nie center */
  min-height:720px;
}

.hero-copy{ padding-top:44px; }

.hero-kicker{
  margin:0 0 30px;
  font-family:var(--font-kicker);
  font-size:2.34rem;
  font-weight:600;
  font-style:italic;
  letter-spacing:0.01em;
  line-height:1;
  color:rgba(255,255,255,0.90);   /* .com-Einheitswert fuer Kicker (Inhaber 22.07.) */
  white-space:nowrap;
  text-shadow:0 8px 24px rgba(0,0,0,0.10);
  transform:translate(var(--lp-kicker-x), var(--lp-kicker-y));
}

/* Headline-Treppe — Rezept 1:1 .com (77px / 0.82 / -0.095em / 760, ch-Einrueckungen).
   Inversion: keine orangen Woerter — Dramaturgie ueber zwei Weiss-Stufen. */
.hero-headline{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  font-size:77px;
  line-height:0.82;
  font-weight:760;
  letter-spacing:-0.095em;
}
.hero-word{ display:block; white-space:nowrap; text-shadow:0 10px 30px rgba(0,0,0,0.14); }
.hero-word.w1{ margin-left:2.72ch; color:rgba(255,255,255,0.95); transform:translate(var(--lp-z1-x), var(--lp-z1-y)); }
.hero-word.w2{ margin-left:1.34ch; color:rgba(255,255,255,0.95); transform:translate(var(--lp-z2-x), var(--lp-z2-y)); }
.hero-word.w3{ margin-left:0.16ch; color:rgba(255,255,255,0.95); transform:translate(var(--lp-z3-x), var(--lp-z3-y)); }  /* 0.78 -> 0.95: gleiche Deckung wie w1/w2 (Inhaber 01.08.: „compared war dunkler") */

.hero-lead{
  margin:44px 0 0 0.9ch;
  font-size:var(--t-lead);
  font-weight:500;
  line-height:1.45;
  color:rgba(255,255,255,0.82);
  max-width:44ch;
}
/* Lead: 3 einzeln positionierbare Zeilen — je eigener --lp-leadN-Versatz.
   Stapelung untereinander = Startpunkt; Pyramide macht der Inhaber per Panel-Schieber. */
.hero-lead-line{ display:block; }
.hero-lead-line.ll1{ transform:translate(var(--lp-lead1-x), var(--lp-lead1-y)); }
.hero-lead-line.ll2{ transform:translate(var(--lp-lead2-x), var(--lp-lead2-y)); }
.hero-lead-line.ll3{ transform:translate(var(--lp-lead3-x), var(--lp-lead3-y)); }
.hero-actions{
  margin-top:46px;
  margin-left:0.9ch;
  display:flex;
  align-items:center;
  gap:16px;
  transform:translate(var(--lp-cta-x), var(--lp-cta-y)) scale(var(--lp-cta-groesse));
  transform-origin:left top;
}

/* Hero rechts: Phone-Rahmen (wird in Schritt 2 zum Klick-Dummy mit echten Screenshots) */
.hero-visual{
  position:relative;
  z-index:1;
  min-height:700px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;   /* Mockup rechts aussen (Inhaber 02.07.) — Mitte bleibt dem Icon */
  padding-top:12px;
}
/* RAHMENLOS: die Demo bringt Rahmen + Schatten selbst mit — sonst Doppelrahmen.
   Position weiter ueber --lp-app-x/y. Groesse = iframe 450x920 * --lp-app-demo-scale. */
.phone{
  width:calc(450px * var(--lp-app-demo-scale));
  height:calc(920px * var(--lp-app-demo-scale));
  transform:translate(var(--lp-app-x), var(--lp-app-y));
  display:flex;
}
.phone-screen{
  position:relative;          /* Anker fuer das Demo-<iframe> (absolut, skaliert) */
  flex:1;
  overflow:visible;           /* der Schatten der Demo darf hinaus */
}
/* Demo-Export: iframe intrinsisch 450x920 (>=430 → Demo bleibt im Frame-Modus MIT
   Schatten), oben links verankert und per --lp-app-demo-scale in die getunte Groesse
   gebracht. demo.html selbst wird NICHT umgebaut — nur von aussen skaliert. */
.phone-screen > iframe.demo-frame{
  position:absolute; top:0; left:0;
  width:450px; height:920px;
  border:0;
  transform:scale(var(--lp-app-demo-scale));
  transform-origin:top left;
}

/* ============ Klick-Hinweis am Demo-Handy (Puls-Sequenz) ============
   1:1 nach Vorlage UEBERGABE_demo-hinweis-puls.md (.com-Chat, 06.07.):
   Mockup atmet 2x allein, dann 3x gemeinsam mit dem Button „hier testen"
   (zentral UNTER dem Mockup), danach Ruhe. Klick in die Demo → .is-calm
   stoppt alles sofort. Der Atem-Puls liegt auf .phone-screen (transform-frei),
   kollidiert also NICHT mit dem iframe-scale (--lp-app-demo-scale) oder der
   Panel-Position auf .phone. Tunen: Tempo 1.15s an 3 Stellen synchron halten
   (Button-Start = 2x Tempo, Gesamtdauer = 5x Tempo). */
.phone{ position:relative; }    /* Anker fuer den absolut positionierten Button */

/* Mockup atmet: 2x allein + 3x mit Button = 5 Pulse, dann Ruhe. */
.phone-screen{
  transform-origin:center;
  animation:demoBreath 1.15s ease-in-out 0s 5 both;
}

/* Button zentral unter dem Mockup; erscheint nach 2 Pulsen, haelt 3 Pulse, verschwindet */
.demo-hint{
  position:absolute;
  top:100%; left:50%;
  transform:translateX(-50%);
  margin-top:10px;
  opacity:0;                       /* Grund- UND Endzustand: unsichtbar */
  transition:opacity .35s ease;    /* fuer den Klick-Stop */
  animation:demoHintCycle 5.75s ease both;
  pointer-events:none;             /* Demo bleibt voll bedienbar */
  z-index:4;
}
.demo-hint__label{
  display:inline-block;
  padding:6px 15px;
  border-radius:999px;
  font-size:14px; font-weight:600; letter-spacing:0.01em;
  color:rgba(255,255,255,0.92);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.20);
  box-shadow:0 8px 22px rgba(0,0,0,0.18);
  animation:demoBreathLabel 1.15s ease-in-out 2.30s 3 both;   /* 3x im Takt mit dem Mockup */
}

/* WARTE-ZUSTAND (25.07.): Die Sequenz laeuft von Haus aus beim Laden — genau wie
   vorher. Das Script unten in index.html nimmt sie SOFORT weg (.is-wartet) und gibt
   sie frei, sobald das Mockup im Bild ist; verlaesst es das Bild, kommt .is-wartet
   zurueck. Grund: am Handy steht das Mockup unter der Falz, die 5 Pulse (5,75s)
   waren abgelaufen, bevor man hinscrollte.
   Bewusst als WEGNAHME und nicht als Start-Schalter gebaut: faellt das Script aus,
   ist JavaScript blockiert oder liefert ein Cache eine aeltere Seite aus, laeuft der
   Puls wie frueher los. Ein Start-Schalter wuerde dann GAR NICHT mehr pulsen.
   ⚑ `animation:none` und NICHT `animation-play-state:paused`: eine abgelaufene
   Animation laesst sich nicht mehr pausieren (playState „finished" — gemessen bei
   15,8s), sie liefe beim Wiedersehen nie erneut. Mit none-und-wieder-zurueck legt
   der Browser bei jeder Freigabe eine NEUE Animation an -> es pulst jedes Mal. */
.phone.is-wartet .phone-screen,
.phone.is-wartet .demo-hint,
.phone.is-wartet .demo-hint__label{ animation:none; }

@keyframes demoBreath{        0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }
@keyframes demoBreathLabel{   0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07);  } }

/* Sichtbarkeit: unsichtbar bis 2 Pulse (40% von 5.75s), einblenden, halten, ausblenden */
@keyframes demoHintCycle{
  0%, 40%  { opacity:0; }
  47%, 93% { opacity:1; }
  100%     { opacity:0; }
}

/* Klick aufs Mockup: alles beruhigen + Button ausblenden */
.phone.is-calm .phone-screen,
.phone.is-calm .demo-hint,
.phone.is-calm .demo-hint__label{ animation:none; }
.phone.is-calm .demo-hint{ opacity:0; }

/* Barrierefreiheit: kein Scale-Puls (nur die Ein-/Ausblendung bleibt) */
@media (prefers-reduced-motion: reduce){
  .phone-screen, .demo-hint__label{ animation:none; }
}

/* ============ Inhalts-Raster der Sektionen (Rezept .com .app-grid) ============ */
.welt-grid{
  display:grid;
  grid-template-columns:640px 610px;
  gap:54px;
  align-items:start;
  margin-top:44px;
}
.sektion h2{
  font-size:2.0rem;                    /* .com Content-Titel-Stufe (760) */
  font-weight:760;
  letter-spacing:-0.02em;
  line-height:1.1;
  margin:0;
}
.aktions-zeile{ margin-top:32px; }

/* ============ 2 · Demo-Buehne: Text-Zeilen + Panel-Positionierung ============
   Zeilen als display:block-Spans (harte Umbrueche, Inhaber-Vorgabe 17.07.;
   fix 1920, darum stabil). Transforms NUR im #demo-Scope — §4 nutzt dieselben
   Klassen (welt-grid/welt-stage) und bleibt unberuehrt. */
.demo-zeile{ display:block; }
#demo h2{ transform:translate(var(--lp-d2-head-x), var(--lp-d2-head-y)); }
#demo .welt-grid > div:first-child{ transform:translate(var(--lp-d2-text-x), var(--lp-d2-text-y)); }
#demo .welt-stage{ transform:translate(var(--lp-d2-stage-x), var(--lp-d2-stage-y)); }

/* ============ 4 · Lernsystem: Panel-Positionierung (seit 2026-07-17-b) ============
   Scope #vergleich; Chips-Regel trifft NUR die linke Spalte (die Buehne
   hat eigene Stage-Chips). Kicker/H2 stehen VOR dem welt-grid im Container. */
#vergleich .kicker{ transform:translate(var(--lp-v4-kicker-x), var(--lp-v4-kicker-y)); }
#vergleich h2{ transform:translate(var(--lp-v4-head-x), var(--lp-v4-head-y)); }
#vergleich .welt-grid > div:first-child .chips{ transform:translate(var(--lp-v4-chips-x), var(--lp-v4-chips-y)); }
#vergleich .welt-grid > div:first-child p{ transform:translate(var(--lp-v4-text-x), var(--lp-v4-text-y)); }
#vergleich .aktions-zeile{ transform:translate(var(--lp-v4-cta-x), var(--lp-v4-cta-y)); }
#vergleich .welt-stage{ transform:translate(var(--lp-v4-stage-x), var(--lp-v4-stage-y)); }

/* ============ 5 · Hufberatung: Panel-Positionierung (seit 2026-07-17-b) ============
   Inhaber-Vorgabe 17.07.: NUR zwei Griffe — kompletter Schriftblock
   (H2 + Schritte + Grenzsatz + Knopf, EIN Wertepaar) und die Karte. */
#beratung h2,
#beratung .welt-grid > div:first-child{ transform:translate(var(--lp-b5-text-x), var(--lp-b5-text-y)); }
#beratung .welt-stage{ transform:translate(var(--lp-b5-stage-x), var(--lp-b5-stage-y)); }

/* ============ 6–11 · Panel-Positionierung (seit 2026-07-20-a) ============
   Muster wie §5: Schriftblock = EIN Wertepaar (h2 + linke Spalte), Stage/
   Besonderheit = zweites Paar. Nur CONTAINER werden transformiert —
   Karten-Hover und Buch-Kipp (Kind-Elemente) bleiben unberuehrt. */
/* §6 seit 24.07. einspaltig (Filmstreifen statt welt-grid): ganzer Inhalt = EIN
   Wertepaar (--lp-w6-text). --lp-w6-stage bleibt fuer den Panel-Griff definiert,
   aktuell ungenutzt. Gleicher Translate auf alle Bloecke -> sie wandern als Einheit. */
#weg h2,
#weg .weg-intro,
#weg .weg-strip,
#weg .aktions-zeile{ transform:translate(var(--lp-w6-text-x), var(--lp-w6-text-y)); }
#testdrive h2,
#testdrive .welt-grid > div:first-child{ transform:translate(var(--lp-t7-text-x), var(--lp-t7-text-y)); }
#testdrive .welt-stage{ transform:translate(var(--lp-t7-stage-x), var(--lp-t7-stage-y)); }
#preise h2{ transform:translate(var(--lp-p8-head-x), var(--lp-p8-head-y)); }
#preise .preis-grid,
#preise .trust-strip{ transform:translate(var(--lp-p8-karten-x), var(--lp-p8-karten-y)); }
#faq h2{ transform:translate(var(--lp-f9-head-x), var(--lp-f9-head-y)); }
#faq .faq-liste{ transform:translate(var(--lp-f9-liste-x), var(--lp-f9-liste-y)); }
#herkunft .herkunft-grid > div:first-child{ transform:translate(var(--lp-h10-text-x), var(--lp-h10-text-y)); }
#herkunft .herkunft-visuals{ transform:translate(var(--lp-h10-visuals-x), var(--lp-h10-visuals-y)); }
#schluss .container{ transform:translate(var(--lp-s11-block-x), var(--lp-s11-block-y)); }

/* ============ Stage-Rahmen (Rezept .com .app-stage, Portrait) ============ */
.stage{
  position:relative;
  width:480px;
  border-radius:32px;
  overflow:hidden;
  background:linear-gradient(145deg, #1c3652, #0f1f30);
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,0.08);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.welt-stage{ justify-self:end; }
.stage-frame{
  aspect-ratio:3/4;                    /* FOTO-REGEL: Huf-Fotos/App-Screens Portrait, nie verzerrt */
  background:var(--stage);
  border:2px dashed rgba(255,255,255,0.15);
  border-radius:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  padding:16px;
}
.stage-unten{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
/* Frame-Variante mit echtem Foto (23.07., §4 Fall-Foto): Platzhalter-dashed
   → dezenter Solid-Rand (Muster §5-Grid), Foto fuellt den 3:4-Rahmen exakt */
.stage-frame--foto{
  border-style:solid;
  border-width:1px;
  border-color:rgba(255,255,255,0.14);
  padding:0;
  overflow:hidden;
}
.stage-frame--foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
}
/* §2 App-Demo-Video (24.07.): Zwilling zu --foto, Video fuellt den 3:4-Rahmen randlos.
   Stiller Autoplay-Loop; Ton bleibt in der Datei fuer den geplanten Ton-Schalter (③). */
.stage-frame--video{
  border-style:solid;
  border-width:1px;
  border-color:rgba(255,255,255,0.14);
  padding:0;
  overflow:hidden;
}
.stage-frame--video video{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
}
/* §2: Demo-Video randlos + so hoch wie der Sektions-Bereich (Inhaber 24.07.):
   Rahmen bekommt EXAKT das Video-Format 720:1310 (9:16) -> kein Beschnitt, keine
   Verzerrung; Karte folgt der schmalen Breite (Handy-Aufnahme). Nur #demo-Scope,
   damit §4 (gleiche Klassen) unberuehrt bleibt. */
#demo .stage{ width:auto; }
#demo .stage-frame--video{
  aspect-ratio:auto;        /* 3:4-Basis aus .stage-frame abschalten */
  width:368px;
  height:670px;             /* 368 x 1310/720 = 9:16; ~Hoehe des Sektions-Bereichs */
}
/* §4: Vergleich-Screenshot (Handy 9:16) im gleichen Rahmen wie das §2-Video,
   damit der Screenshot nicht beschnitten wird. Karte folgt der schmalen Breite. */
#vergleich .stage{ width:auto; }
#vergleich .stage-frame--foto{
  aspect-ratio:auto;
  width:368px;
  height:670px;
}
/* §7 „Ohne Anmeldung reinschauen": Galerie-Anriss ist 626x1028 (hochkant) → Rahmen
   folgt dem Bildformat. Sonst quetscht object-fit:cover ihn ab ≥1690px auf die 3:4-Basis
   und beschneidet die Galerie oben+unten (Inhaber 30.07.). Tablet bleibt 480px breit,
   die Sektion waechst entsprechend. (≤1689px setzen die Media-Queries denselben Wert.) */
#testdrive .stage-frame--foto{ aspect-ratio:626/1028; }
/* ============ "Das sagen die Pferde" (#pferde): Rahmen + Textposition (Inhaber 27.07.) ============
   (a) Rahmen EXAKT 9:16 fuers 720x1280-Video (kein Beschnitt): 3:4-Basis aus .stage-frame
       abschalten, gleiche Breite wie §2/§4 (368px), Hoehe = 368 x 1280/720 = 654px.
   (b) Textspalte auf gleiche Hoehe wie beim Zwilling §2 (nicht oben geklebt) = konstantes Layout;
       Versatz nach unten wie die --lp-*-Transforms der anderen Sektionen (~200px unter Bahnoberkante). */
#pferde .stage{ width:auto; }
#pferde .stage-frame--video{ aspect-ratio:auto; width:368px; height:654px; }
#pferde .welt-grid > div:first-child{ transform:translateY(200px); }
/* Vollbild-Fix: im Vollbild NICHT cover (das skaliert das Hochkant-Video auf die
   Bildschirmbreite und ueberragt das Fenster) -> contain = passt sich dem Fenster an,
   nie groesser. Getrennte Regeln, damit ein nicht unterstuetztes Pseudo die andere
   nicht killt. */
.demo-video:fullscreen{ width:100%; height:100%; object-fit:contain; background:#000; }
.demo-video:-webkit-full-screen{ width:100%; height:100%; object-fit:contain; background:#000; }

/* §5: 12er-Grid „Hufberatung am Foto" (EINGEBAUT 18.07., Haupt-Chat-Material):
   12 Referenz-Fotos aus dem Demo-Paket (fall-raum/1–12.jpg, 675x900 3:4) im
   App-Raster 4 Reihen x 3 Spalten (Solar | Heel | Lateral).
   FOTO-REGEL: width 100 % + height auto = Proportionen 100 %, nie beschnitten;
   der Frame verliert dafuer sein 3/4-Aspect (Rahmen folgt dem Foto — Gesamtform
   des Grids ist hoeher als 3:4) und den Platzhalter-Strichrand (echter Inhalt
   → dezenter Solid-Rand; Inhaber-Veto = eine Zeile). */
.stage-frame--grid12{
  aspect-ratio:auto;
  border-style:solid;
}
.grid12{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  width:100%;
}
.grid12 img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
}

/* GRID-LOOP (seit 20.07., Inhaber-Konzept): je Kachel 3 Ebenen —
   ref (blass) / b (vorher) / m (markiert). Sichtbarkeit per Klasse
   .zeigt-b / .zeigt-m (Script "grid-loop" in index.html), sanfte
   Opacity-Blende. Radius wandert auf die Kachel (overflow clippt). */
.grid12--loop .kachel{
  position:relative;
  display:block;
  border-radius:8px;
  overflow:hidden;
}
.grid12--loop .kachel img{ border-radius:0; }
.grid12--loop .ebene--ref{
  opacity:0.30;                      /* Blass-Grad Ausgangszustand (Inhaber tunt) */
  filter:saturate(0.5);
}
.grid12--loop .ebene--b,
.grid12--loop .ebene--m{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity 0.3s ease;
}
.grid12--loop .kachel.zeigt-b .ebene--b{ opacity:1; }
.grid12--loop .kachel.zeigt-m .ebene--m{ opacity:1; }
/* Blitz beim B→M-Wechsel (Inhaber-Wunsch 20.07.): weisses Leerfeld leuchtet
   schlagartig auf (Klasse .blitzt, Dauer BLITZ_MS im Script) und klingt beim
   Entfernen der Klasse weich ab — gibt das markierte Foto frei. */
.grid12--loop .kachel::after{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease;     /* Abklingen des Blitzes */
}
.grid12--loop .kachel.blitzt::after{
  opacity:1;
  transition:none;                   /* Aufleuchten schlagartig */
}

/* Modus-/Zustands-Chips (Rezept .com .app-chip; D3-Inversion: aktiv = WEISS) */
.chips{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.chip{
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(19,40,63,0.72);
  color:var(--white);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(8px);
}
.chip.active{
  background:rgba(255,255,255,0.92);   /* Inversion: aktiv WEISS, nicht orange (Budget) */
  border-color:rgba(255,255,255,0.92);
  color:var(--blue-deep);
  font-weight:600;
}

/* weisse Notiz-Pills (Rezept .com .proof-note) */
.note-pill{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.88);
  color:var(--blue-deep);
  font-size:0.82rem;
  border:1px solid rgba(19,40,63,0.08);
  backdrop-filter:blur(8px);
}
.note-pill strong{ font-weight:650; }

/* Drei-Farben-Punkte (Rezept .com .app-color-dot; fachliche Hex-Ausnahme wie .com) */
.color-dots{ display:flex; gap:10px; }
.color-dot{
  width:12px; height:12px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.15);
}
.color-dot--rot{   background:#e04040; }
.color-dot--gruen{ background:#4ab84a; }
.color-dot--blau{  background:#4a7aba; }

/* Video-Andeutung (Rezept .com .app-video: CSS-Play-Kreis) */
.play-kreis{
  width:64px; height:64px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.20);
  display:grid;
  place-items:center;
}
.play-kreis::after{
  content:""; display:block; margin-left:4px;
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent rgba(255,255,255,0.55);
}

/* ============ 3 · Zwei Tueren (dunkles Karten-Rezept + Welt-Ton + Hub-Hover) ============ */
/* 23.07. (Inhaber, Screenshot-Feedback): Karten-Rahmen = GRID-FORMAT (1108:1962,
   Ratio des Anriss-PNGs) — das ganze 4x3-Grid ist sichtbar, kein Anschnitt;
   BEIDE Tueren symmetrisch (rechts kommt spaeter die App-Galerie im selben
   Format rein). Vorher: 2x 1fr-Breitkarten min-height 320 (Grid unkenntlich). */
.tueren-grid{
  display:flex;
  justify-content:center;
  gap:48px;
  margin-top:44px;
}
.tuer{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:400px;
  aspect-ratio:1108/1962;   /* = tuer-links_grid.png — cover trifft damit pixelgenau */
  padding:30px 28px 26px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:var(--shadow-soft);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.tuer:hover{ transform:translateY(-3px); box-shadow:0 28px 80px rgba(7,17,29,0.35); }
/* 23.07.: 12er-Grid-Anriss als Foto-Hintergrund (NOTIZ Visual-Slots ①) —
   Sheen bleibt oberste Ebene, Foto darunter, Anriss = oberer Bildrand */
.tuer--warm{
  background-color:var(--welt-warm);
  background-image:
    linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)),
    url("../fotos/tueren/tuer-links_grid.png");
  background-size:auto, cover;
  background-position:center, top center;
  background-repeat:repeat, no-repeat;
}
.tuer--kuehl{ background-color:var(--welt-kuehl); background-image:linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)); }
/* Lesbarkeits-Verlauf (PFLICHT, sobald Foto-Hintergruende kommen) */
.tuer::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, rgba(0,0,0,0.00) 40%, rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}
.tuer > *{ position:relative; z-index:1; }
.tuer-visual{ margin-bottom:auto; }
.tuer-titel{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.35rem;
  color:var(--ink-strong);
}
.tuer-zeile{ color:rgba(255,255,255,0.82); font-size:0.98rem; }
/* Wrapper um Titel+Zeile+Beschreibung. Standard = display:contents -> fuers Layout
   unsichtbar, Titel/Zeile verhalten sich wie direkte Karten-Kinder (Handy/Tablet +
   mittlerer Desktop unveraendert). Erst der Desktop-Split (responsive.css >=1480px)
   macht daraus einen echten absoluten Text-Spalten-Block. */
.tuer-textblock{ display:contents; }
/* Ausfuehrliche Beschreibung: NUR im Desktop-Split sichtbar (>=1480px). */
.tuer-beschr{ display:none; }
/* §3 kühle Tür: Vorher/Nachher-Loop als Hintergrund (24.07.). Fuellt die Karte wie
   das background-image der warmen Tuer, liegt aber unter dem Lesbarkeits-Verlauf
   (.tuer::after) und dem Text (.tuer > * z-index:1). Klicks gehen an die Karte (Link). */
.tuer--kuehl .tuer-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
}

/* ============ 5/7 · Ablauf-Schritte (Cormorant-Nummern — Echo der .com Buch-TOC) ============ */
.schritte{
  margin:0;
  max-width:56ch;
  counter-reset:schritt;
}
.schritte li{
  counter-increment:schritt;
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.86);
}
.schritte li::before{
  content:counter(schritt);
  font-family:var(--font-kicker);
  font-style:italic;
  font-weight:600;
  font-size:1.6rem;
  line-height:1;
  color:rgba(255,255,255,0.45);
  min-width:28px;
}

/* ============ 6 · Weg durch die App: 4 App-Screens + Demo-Video, EINE Zeile ============
   Inhaber 24.07.: die vier Screens (Lobby -> Galerie -> Fall -> Vergleich) und das
   Live-Demo-Video liegen unten in EINER gemeinsamen Zeile (Filmstreifen). Alle Kacheln
   im Handy-Format 9:16, object-fit:cover -> Proportion nie verzerrt/beschnitten. */
.weg-intro{ margin-top:0; max-width:74ch; }
.weg-strip{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:18px;
  margin-top:36px;
}
.weg-tile{
  position:relative;
  margin:0;
  aspect-ratio:9/16.4;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  background:var(--stage);
}
.weg-tile img,
.weg-tile video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.weg-tile figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:22px 8px 9px;
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.92);
  text-align:center;
  background:linear-gradient(to top, rgba(9,20,32,0.92), rgba(9,20,32,0));
}

/* ============ 8 · Preise (dunkles Karten-Rezept, .com Standard-3er-Grid) ============ */
.preis-grid{
  display:grid;
  grid-template-columns:418px 418px 418px;
  gap:32px;
  justify-content:center;
  align-items:start;
  margin-top:44px;
}
.preis-karte{
  background:linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  padding:32px 30px 36px;
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:340px;
}
.preis-karte--warm{
  background-color:var(--welt-warm);
  background-image:linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
}
.preis-karte h3{ margin:0; font-size:1.12rem; font-weight:700; }
.preis-wert{
  margin:0;
  font-family:var(--font-head);
  font-weight:760;
  font-size:2.6rem;                    /* Rezept .com .hub-trust-value */
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--ink-strong);
  min-height:1.05em;                   /* Slot-Reservierung */
}
/* Abrechnungs-Takt (/ Monat) klein neben dem Abo-Preis */
.preis-wert .preis-takt{
  font-size:0.42em; font-weight:500; letter-spacing:0;
  color:var(--ink-body);
}
/* Anker-Preis: regulaer 45 € durchgestrichen, davor; hervorgehoben ist die 35 € */
.preis-wert .preis-alt{
  font-size:0.5em; font-weight:500; letter-spacing:0;
  color:rgba(255,255,255,0.45);
  text-decoration:line-through;
  margin-right:10px; vertical-align:middle;
}
.preis-hinweis{
  margin:6px 0 0;
  font-size:0.9rem;
  color:var(--ink-body);
}
.preis-cta{ margin-top:auto; align-self:flex-start; }
.trust-strip{
  margin:36px auto 0;
  text-align:center;
  color:rgba(255,255,255,0.62);
}

/* ============ 9 · FAQ (Rezept .com .faq-question/+−, auf dunkel gedreht) ============ */
.faq-liste{
  max-width:820px;
  margin:44px auto 0;
}
.faq-liste details{ border-bottom:1px solid rgba(255,255,255,0.14); }
.faq-liste summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-head);
  font-weight:600;
  font-size:1.06rem;
  color:var(--ink-strong);
  line-height:1.5;
}
.faq-liste summary::-webkit-details-marker{ display:none; }
.faq-liste summary::after{
  content:"+";
  font-size:1.6rem;
  font-weight:300;
  color:rgba(255,255,255,0.72);        /* Inversion: weiss statt orange */
  margin-left:24px;
  flex-shrink:0;
}
.faq-liste details[open] summary::after{ content:"\2212"; }
.faq-liste details p,
.faq-liste details .slot{
  margin:0 0 24px;
  color:rgba(255,255,255,0.70);
}

/* ============ 10 · Herkunft & Buch-Bruecke ============
   23.07. (Inhaber): einspaltig — Statement oben, Visuals-Reihe DARUNTER
   (Foto links, Cover rechts); vorher 2fr/1fr-Grid mit rechter Spalte. */
.herkunft-grid{
  display:block;
}
.herkunft-bio{
  max-width:820px;
  margin:28px 0 0;
  color:rgba(255,255,255,0.80);
}
.herkunft-signatur{
  margin:20px 0 0;
  font-family:var(--font-kicker);
  font-style:italic;
  font-size:1.4rem;
  color:var(--orange);   /* Inhaber-Wort 23.07. "machen wir bitte orange" (dunkle Flaeche → --orange) */
}
.herkunft-links{
  margin:24px 0 0;
  display:flex;
  gap:36px;
}
.herkunft-links a{
  color:rgba(255,255,255,0.75);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,0.35);
}
.herkunft-links a:hover{ color:rgba(255,255,255,0.95); }
.herkunft-visuals{
  display:flex;
  gap:48px;
  align-items:flex-start;
  margin-top:56px;
}
/* Arbeitsfoto-Loop — Fade-Rezept .com insider.css .i-making__stage--atwork 1:1
   (Bilder gestapelt, .is-aktiv blendet in .6s; Rahmen folgt Foto: 1:1-Quadrat) */
.arbeitsfoto{
  position:relative;
  width:400px;
  aspect-ratio:1 / 1;
  border-radius:16px;
  overflow:hidden;
  isolation:isolate;
}
.arbeitsfoto img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s ease;
}
.arbeitsfoto img.is-aktiv{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .arbeitsfoto img{ transition:none; }
  .arbeitsfoto img:first-child{ opacity:1; }  /* Standbild-Fallback wie .com */
}
/* Buch-Cover — Rahmen-Rezept .com book.css .b-cover__frame (3D-Kipp);
   Abweichung benannt: Border solid statt dashed (Rahmen traegt jetzt Inhalt,
   dashed ist drueben die Leer-Slot-Optik). Echtes Cover ersetzt spaeter als <img>. */
.buch-cover{
  width:280px;
  height:400px;
  border-radius:8px;
  background:#13283F;                    /* Passepartout (Rezept .com 24.07., Inhaber-abgestimmt) */
  border:1px solid rgba(255,255,255,0.14);
  display:grid;
  place-items:center;
  padding:0;                             /* Cover fuellt 80 % Breite -> Passepartout-Rand entsteht aus der Differenz */
  overflow:hidden;
  box-shadow:
    12px 16px 48px rgba(0,0,0,0.30),
    0 0 0 1px rgba(255,255,255,0.04);
  transform:perspective(800px) rotateY(-4deg);
}
.buch-cover-bild{
  width:80%;                             /* 80 % von 280 = 224 -> ~28 px Passepartout je Seite */
  height:auto;
  border-radius:6px;
  display:block;
  box-shadow:0 6px 22px rgba(0,0,0,0.38);
}
/* Quer ueber das Cover: "PREVIEW" (Rezept .com) — Montserrat 700 (self-hosted),
   Rot #e04040 (= color-dot--rot; NICHT Orange -> Kollision mit den orangen Labels,
   Inhaber-Entscheid 24.07.), gedreht -24deg. 42px auf 322px (.com) -> 36px auf 280px. */
.buch-preview{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%) rotate(-24deg);
  font-family:var(--font-head);
  font-weight:700;
  font-size:36px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#e04040;
  opacity:0.92;
  pointer-events:none;
  white-space:nowrap;
}
.buch-cover-titel{
  margin:0;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.4rem;               /* 1:1 .com .b-cover__title */
  color:rgba(255,255,255,0.60);
  line-height:1.4;
}

/* ============ 11 · Schluss-CTA (Rezept .com Abschluss: Display-Zeile, zentriert) ============ */
.schluss{
  position:relative;
  text-align:center;
  padding:132px 0;
  background:var(--ground);            /* Grund pur — Lobby-Stimmung */
  overflow:hidden;
}
.schluss h1,
.schluss h2{
  font-size:var(--t-display);
  font-weight:760;
  letter-spacing:-0.03em;
  line-height:1.1;
  max-width:22ch;
  margin:0 auto;
}
.schluss .pill{ margin-top:48px; }
.schluss-caption{
  margin:20px auto 0;
  font-size:var(--t-caption);
  color:rgba(255,255,255,0.62);
  max-width:none;
}

/* ============ Slot-Platzhalter (Bau-Phase; funktionale Texte >= AA) ============ */
.slot{
  border:1.5px dashed rgba(255,255,255,0.28);
  border-radius:10px;
  padding:16px 18px;
  color:rgba(255,255,255,0.72);
  font-size:0.95rem;
  max-width:none;
}
.slot-label{
  font-size:0.82rem;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.38);        /* Rezept .com .app-placeholder-label */
  line-height:1.7;
}
.slot-text{ color:inherit; }

/* ============ HERO-TOUR (Conversion-Runde 26.08.) ============
   Overlay: Handy fliegt per FLIP-Animation aus der Hero-Position ins Zentrum
   (Startversatz setzt das Inline-Script aus der echten .phone-Lage), waechst
   auf ~88vh und spielt die App-Tour (Video, Inhaber-Schnitt). CTA ab Sekunde 29.
   Bewusst nur viewport-relative Masse — funktioniert in allen Baendern,
   Feinlagen fuer Handy/Tablet bei Bedarf spaeter in responsive.css. */
.tour{
  position:fixed; inset:0; z-index:1200;   /* ueber dem Kopfbalken (z 1000) */
  display:flex; align-items:center; justify-content:center;
}
.tour[hidden]{ display:none; }
.tour-schleier{
  position:absolute; inset:0;
  background:rgba(6,13,24,0.82);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; transition:opacity 0.5s ease;
}
.tour.an .tour-schleier{ opacity:1; }
.tour-handy{
  position:relative; margin:0;
  height:min(88vh, 1496px);
  aspect-ratio:720/1496;
  transition:transform 1.15s cubic-bezier(0.22,0.9,0.24,1);   /* Inhaber 26.08.: ruhiger fliegen */
  will-change:transform;
}
.tour-handy video{
  width:100%; height:100%; display:block;
  border-radius:34px;                       /* Video bringt den Handy-Rahmen selbst mit; Radius nur als Kanten-Fang */
  box-shadow:0 34px 96px rgba(0,0,0,0.55);
}
.tour-zu{
  position:absolute; top:10px; right:-56px;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.85);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:50%;
  font-size:1.3rem; line-height:1;
  cursor:pointer;
  opacity:0; transition:opacity 0.4s ease 1.15s;   /* erscheint erst nach der Flugphase */
}
.tour.an .tour-zu{ opacity:1; }
/* Wiederholungs-Knopf unterm Hero-Handy (Inhaber-Frage 26.08.: „wie schaut man
   das Video ein zweites Mal?") — erscheint erst, nachdem die Tour einmal lief. */
.tour-nochmal{
  position:absolute; left:50%; top:calc(100% + 16px);
  transform:translateX(-50%);
  white-space:nowrap;
  min-height:36px; padding:6px 16px;
  background:rgba(255,255,255,0.07);
  color:rgba(255,255,255,0.75);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:var(--radius-pill);
  font-size:0.85rem; cursor:pointer;
}
.tour-nochmal:hover{ background:rgba(255,255,255,0.12); color:var(--white); }
.tour-nochmal[hidden]{ display:none; }
.tour-cta{
  position:absolute; left:50%; bottom:30px;
  transform:translate(-50%, 14px);
  opacity:0; pointer-events:none;
  transition:opacity 0.5s ease, transform 0.5s ease;
  white-space:nowrap;
}
.tour.cta-an .tour-cta{
  opacity:1; pointer-events:auto;
  transform:translate(-50%, 0);
}

/* --- Nur Bau-Phase: Schimmer-Abnahme-Schalter (fliegt vor Livegang raus) --- */
.dev-schalter{
  position:fixed;
  bottom:14px; left:14px;
  z-index:50;
  min-height:36px;
  padding:6px 14px;
  background:rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.85);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius-pill);
  font-size:0.8rem;
  cursor:pointer;
}