/* ============================================================
   responsive.css — Mobile/Tablet-Overrides (ADDITIV, LETZTE Kaskade-Schicht)
   Laedt NACH landing.css. Desktop (> 1024px) bleibt der abgenommene
   Fix-1920-Stand voellig unberuehrt — hier stehen NUR Overrides.

   Grundtechnik:
   - Die fixen --lp-Positions-Transforms (auf 1920 getunt) werden per
     transform:none neutralisiert.
   - 2-Spalten-Grids -> 1 Spalte, feste px-Breiten -> fluid.
   - Mehrere Schriftgroessen sind fix (nicht via Token) -> direkt uebersteuert.

   Reihenfolge: MOBILE (<= 640px) zuerst gebaut/abgenommen; TABLET (641-1024)
   folgt in eigener Runde (Platzhalter am Ende).
   ============================================================ */

/* Hamburger-Button — Basis: auf Desktop VERSTECKT (erst im Mobile-Block sichtbar).
   Muss ausserhalb der Media-Query stehen, sonst waere der <button> auf Desktop sichtbar. */
.kopf-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:11px 9px;
  background:transparent;
  border:0;
  flex:0 0 auto;
}
.kopf-burger span{
  display:block;
  width:100%;
  height:2px;
  background:rgba(255,255,255,0.88);
  border-radius:2px;
  transition:transform .22s ease, opacity .22s ease;
}
.kopf-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.kopf-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.kopf-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Wisch-Punkte zur §6-Leiste — Basis: auf Desktop VERSTECKT (dort steht der
   Filmstreifen komplett da, es gibt nichts zu wischen). Sichtbar erst im
   Mobile-Block, wie beim Hamburger. */
.weg-punkte{ display:none; }

/* Kraeftigerer Demo-Puls am Handy (Inhaber 25.07.: „dadurch dass alles kleiner ist,
   faellt das pulsieren gar nicht so auf … wenn sich die ganze Seite bewegt kann das
   leicht untergehen"). Desktop bleibt bei den abgenommenen 3,5 % (demoBreath in
   landing.css) — hier 7,5 %, weil das Mockup mobil nur 279px breit ist.
   Nur der Name wird getauscht, Tempo/Anzahl/Pause bleiben wie gehabt.
   ⚠ Die no-preference-Bedingung ist PFLICHT: landing.css schaltet den Puls bei
   „Bewegung reduzieren" per `animation:none` ab — das setzt auch animation-name.
   Ohne die Bedingung wuerde diese spaetere Datei den Namen wieder setzen und der
   Puls liefe trotz Abschaltung. */
@keyframes demoBreathMobil{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.075); } }
@media (max-width: 640px) and (prefers-reduced-motion: no-preference){
  .phone-screen{ animation-name:demoBreathMobil; }
}


/* ===================== MOBILE  (<= 640px) ===================== */
@media (max-width: 640px){

  /* --- Positions-Transforms neutralisieren (--lp-Werte sind auf 1920 getunt) --- */
  .kopf-wortmarke,
  .hero-kicker, .hero-word, .hero-lead-line, .hero-actions, .phone,
  .sektion h2, #vergleich .kicker,
  .welt-grid > div, .welt-stage,
  .weg-intro, .weg-strip, .aktions-zeile,
  #vergleich .chips, #vergleich p,
  .preis-grid, .trust-strip, .faq-liste,
  .herkunft-grid > div, .herkunft-visuals,
  #schluss .container{ transform:none !important; }

  /* --- Container + Grundwerte --- */
  .container{ max-width:100%; padding:0 18px; }
  html{ scroll-padding-top:64px; }

  /* Bau-Panels (⚙-Positionen, Schimmer-Schalter) auf Mobile ausblenden — sie
     ueberlagern dort den Inhalt. Nur lokal; im Deploy ohnehin entfernt. Desktop unberuehrt. */
  #lc, #dev-schimmer{ display:none !important; }
  :root{
    /* Hero-Phone: Rahmen (.phone) UND iframe teilen sich diese Variable ->
       eine Zahl skaliert beides konsistent auf Handy-Breite (450 * 0.62 = 279px). */
    --lp-app-demo-scale:0.62;
  }

  /* --- Schrift-Stufen runter (viele sind fix, nicht via Token) --- */
  .hero-headline{ font-size:2.55rem; line-height:0.99; letter-spacing:-0.04em; }
  .hero-kicker{ font-size:1.3rem; white-space:normal; line-height:1.15; }
  .hero-lead{ font-size:1.05rem; }
  .sektion h2{ font-size:1.55rem; }
  .schluss h1, .schluss h2{ font-size:2.05rem; }

  /* ---------- Header + Hamburger ---------- */
  .kopf-inner{ min-height:58px; gap:8px; }
  .kopf-wortmarke{ margin-left:0; }
  .kopf-wortmarke img{ width:158px; }
  .kopf-burger{ display:inline-flex; }
  .kopf-sprachen a{ min-width:36px; padding:0 4px; }

  /* Nav -> aufklappbares Panel unter dem Header (Toggle per Hamburger, nav.js) */
  .kopf-nav{
    position:absolute;
    left:0; right:0; top:100%;
    transform:none;                 /* Desktop-Zentrier-Transform (-50%,-50%) zuruecksetzen */
    z-index:20;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--chrome);
    border-top:1px solid rgba(255,255,255,0.08);
    border-bottom:1px solid rgba(255,255,255,0.08);
    box-shadow:0 18px 34px rgba(0,0,0,0.32);
    padding:4px 18px 12px;
    display:none;
  }
  .kopf-nav.offen{ display:flex; }
  .kopf-nav a{
    min-height:52px;
    padding:0 2px;
    font-size:1.06rem;
    justify-content:flex-start;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .kopf-nav a:last-child{ border-bottom:0; }

  /* ---------- Hero ---------- */
  /* Der 600px-Schimmer ragt rechnerisch bis 488px (Viewport 375) — geklammert wird er
     von `.hero{overflow:hidden}` aus landing.css:100, die hier bewusst NICHT wiederholt
     wird. Geprueft: document.scrollWidth bleibt 375, kein Quer-Scrollen. */
  .hero{ padding:36px 0 44px; }
  .hero-inner{ grid-template-columns:1fr; gap:30px; min-height:0; }
  /* ZENTRIERT (Inhaber 24.07., Handy-Test: „die Texte so nach links geschoben schauen
     etwas seltsam aus … der Hero kommt ein bisschen mehr in die Mitte und wahrscheinlich
     dann auch der Text. CTA muss mittig.")
     ⚠ Preis: die Headline-TREPPE (Einrueckungen 2.72/1.34/0.16ch) faellt mobil weg —
     zentrierte Woerter koennen nicht gleichzeitig gestaffelt sein. VETO = die zwei Zeilen
     `.hero-headline{align-items:center}` + `.hero-word{margin-left:0}` loeschen, dann
     steht die Treppe wieder und nur Kicker/Lead/CTA bleiben mittig. */
  .hero-copy{ padding-top:6px; text-align:center; }

  /* KICKER mobil ZWEIZEILIG + VERSETZT (Inhaber 25.07.: „Du bist der Trainer bleibt,
     und dann in der Zeile unten drunter — so dass der Strich ungefaehr unter dem a von
     Trainer ist — nicht der Bildhauer").
     Die beiden Spans aus index.html werden zu Bloecken; der Versatz ist eine feste Zahl
     statt eines Umbruch-Tricks (ein haengender Einzug scheiterte: negativer text-indent
     verbreitert Zeile 1 um genau den Einzug und verschiebt die Umbruchstelle).
     Der Block selbst ist linksbuendig und wird als Ganzes zentriert (inline-block im
     zentrierten .hero-copy) — sonst wuerde jede Zeile einzeln zentriert und der Versatz
     waere weg. Zahlen = gemessene Position des „a" in „Trainer" (Cormorant italic
     20.8px): DE 108px, EN 35px („A Trainer,"). ES nutzt den deutschen Text -> DE-Wert. */
  .hero-kicker{ display:inline-block; text-align:left; }
  .hero-kicker-line{ display:block; }
  .hero-kicker-line.kk2{ margin-left:108px; }
  html[lang="en"] .hero-kicker-line.kk2{ margin-left:35px; }
  /* LUFT statt Stauchung (Inhaber 25.07.: „jetzt ist alles so gestaucht … wir brauchen
     da mehr Luft"): 2-3 Zeilenhoehen vor der Headline und vor dem Lead (Kicker-Zeile
     ~24px, also ~2,6 Zeilen). */
  .hero-kicker{ margin:0 0 62px; }
  .hero-headline{ align-items:center; }
  /* Doppelklassen-Selektor noetig: landing.css setzt die Treppen-Einrueckung als
     `.hero-word.w1{margin-left:2.72ch}` — ein einfaches `.hero-word{}` verliert
     die Spezifitaet und die Woerter blieben nach rechts versetzt (gemessen 226/206/190
     statt 188). Das sind die zwei Zeilen, die bei einem Treppen-Veto rausfliegen. */
  .hero-word.w1,
  .hero-word.w2,
  .hero-word.w3{ margin-left:0; }
  .hero-lead{ margin:62px 0 0; max-width:none; }   /* zweiter Luft-Abstand, s.o. */
  /* Hero-CTA „App öffnen" am Handy AUSGEBLENDET (Inhaber 29.07.): an dieser
     Stelle tippen Leute in die App, bevor sie wissen worum es geht — der CTA
     kommt nach den Erklaerungen noch 3-4x, immer wenn schon Verstaendnis da ist.
     ⚑ visibility:hidden (NICHT display:none), WEIL das Mockup EXAKT an seiner
     Position bleiben soll (Inhaber ausdruecklich „nicht nach oben ruecken"):
     der Knopf-Kasten haelt weiter seinen Platz (56px + 34px margin), ist nur
     unsichtbar und nicht mehr antippbar. Desktop (>=901px) behaelt den CTA. */
  .hero-actions{ margin:34px 0 0; justify-content:center; visibility:hidden; }
  .hero-actions .pill{ width:auto; }   /* nicht voll-breit (Inhaber: zu breit/aufdringlich) — natuerliche Breite */
  /* App-Mockup deutlich TIEFER (Inhaber 25.07.: „das Mockup von der App weiter runter,
     so dass man es vielleicht noch spueren kann — die alleroberste Kante mit der
     Wortmarke"). Der Textblock bekommt damit den ganzen ersten Bildschirm; vom Handy
     lugt unten nur noch der obere Rand herein. Zusammen mit der neuen Luft im Text
     steht die Oberkante rund 150px tiefer als heute frueh.
     ⚑ EINE ZAHL zum Nachjustieren: groesser = Handy tiefer/knapper angeschnitten.
     Gemessen bei 393x700: Oberkante Seiten-y 643, Wortmarke im Mockup 45-89px darunter. */
  .hero-visual{ min-height:0; justify-content:center; padding-top:0; margin-top:56px; }
  /* Hintergrund-Icon (Schimmer): Desktop 859px zeigt auf 375px nur die Mitte -> Huf
     links/rechts extrem beschnitten. 300px war dem Inhaber ZU KLEIN (Handy-Test 24.07.)
     -> 600px = gut doppelt, deckt die Bildschirmbreite. Zum ANSEHEN gebaut: der Inhaber
     erwaegt, ihn mobil ganz zu streichen (liegt direkt unter dem Demo-Handy).
     Reiner Mobile-Override, --lp-icon-groesse (Panel/Desktop 859px) bleibt unberuehrt. */
  /* Position: Desktop-Wert ist top:46 % — bei der jetzt viel hoeheren Handy-Sektion
     landet die Mitte damit hinter dem App-Mockup statt hinter dem Text („der Schimmer
     kommt ueberhaupt nicht zum Ausdruck", Inhaber 25.07.). Fester px-Wert setzt die
     Mitte in den Textblock; die 35px aus --lp-icon-y kommen noch dazu. */
  .hero-schimmer{ width:600px; top:265px; }

  /* ---------- Sektionen: 2-Spalten -> 1 Spalte ---------- */
  .sektion{ padding:56px 0 48px; }
  .welt-grid,
  .herkunft-grid{ grid-template-columns:1fr; gap:26px; margin-top:22px; }

  /* ⚑ BUEHNEN-COLLAPSE-FIX (24.07., Inhaber: „ein komisches ovales Ding … da scheint ein
     Foto zu fehlen"). Ursache: `.stage` UND `.welt-stage` sind DASSELBE Element (ein
     Grid-Kind von .welt-grid). Mein `margin:0 auto` machte daraus auto-Raender ->
     das deaktiviert `justify-self:stretch`, die Buehne fiel auf fit-content (nur Padding,
     ~40px) und das darin auf `width:100%` gesetzte Foto damit auf 0 -> mit border-radius:32px
     blieb ein dunkles Oval stehen. Darum jetzt EXPLIZIT width:100% + margin:0 statt
     auto-Raender (haelt auch bei 400-640px Breite, wo ein max-width-Cap links kleben wuerde). */
  .welt-stage{ justify-self:stretch; }
  .stage{ width:100%; max-width:none; margin:0; }
  /* landing.css setzt fuer §2/§4 `#demo .stage{width:auto}` — hoehere Spezifitaet als
     die Zeile darueber, darum hier gleichrangig nachgezogen (sonst haengt die Breite
     an justify-self statt an einer klaren Zahl). */
  #demo .stage,
  #vergleich .stage{ width:100%; }

  /* §2/§4 Sonder-Buehnen (Desktop fix 368x670) -> fuellen die Spalte, Format bleibt 9:16 */
  #demo .stage-frame--video,
  #vergleich .stage-frame--foto{
    width:100%;
    max-width:none;
    height:auto;
    aspect-ratio:9/16;
  }

  /* ---------- CTAs mittig (Inhaber 24.07., mehrfach: „CTA muss in die Mitte") ----------
     Gilt fuer §4/§5/§6/§7 (.aktions-zeile) — der Fliesstext der Sektionen bleibt
     bewusst linksbuendig (Lesbarkeit), nur die Handlungs-Knoepfe ruecken in die Mitte.
     .pill ist inline-flex, deshalb greift text-align. */
  .aktions-zeile{ text-align:center; }   /* §11 ist ueber .schluss{text-align:center} schon mittig */

  /* ---------- §3 Zwei Tueren: nebeneinander -> gestapelt ----------
     .tueren-grid ist ein FLEX-Row (nicht Grid): zwei 400px-Karten schrumpfen auf ~145px,
     der Titel „Hufberatung am Foto" lief rechts raus (Inhaber-Screenshot 24.07.).
     Untereinander bekommt jede Karte die volle Breite; max-width haelt das
     Grid-Format 1108:1962 bei ~570px Hoehe statt ~600px+. */
  .tueren-grid{ flex-direction:column; align-items:center; gap:22px; margin-top:26px; }
  .tuer{ width:100%; max-width:320px; }

  /* ---------- §6 Filmstreifen -> horizontale Wisch-Leiste (Inhaber-Wahl) ---------- */
  .weg-strip{
    display:flex;
    grid-template-columns:none;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:18px;    /* gewischte Kachel rastet buendig zur Textkante */
    -webkit-overflow-scrolling:touch;
    margin:22px -18px 0;         /* bis an den Bildschirmrand wischen */
    padding:0 18px 12px;
    scrollbar-width:none;
    /* Wisch-Affordanz (Inhaber 24.07.: „die Galerie laeuft rechts raus" — gewollt, las
       sich aber wie ein Fehler): rechte Kante weich auslaufen lassen = sichtbares
       „hier geht es weiter". Links faellt der Verlauf in den 18px-Innenabstand, ist
       also praktisch unsichtbar und haelt die Textkante scharf. */
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 40px), transparent 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 40px), transparent 100%);
  }
  .weg-strip::-webkit-scrollbar{ display:none; }
  /* 55 % statt 62 % -> die naechste Kachel lugt deutlicher herein (zweite Affordanz) */
  .weg-tile{ flex:0 0 55%; scroll-snap-align:start; }

  /* Wisch-PUNKTE (Inhaber 25.07.): dauerhafte Orientierung „hier sind fuenf, du bist
     bei Nummer zwei" — der Anschnitt allein reichte als Hinweis nicht. Den aktiven
     Punkt setzt das Script „Wisch-Hinweis" in index.html beim Scrollen. */
  .weg-punkte{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:14px;
  }
  .weg-punkte span{
    width:7px; height:7px;
    border-radius:50%;
    background:rgba(255,255,255,0.26);
    transition:background .25s ease, transform .25s ease;
  }
  .weg-punkte span.aktiv{
    background:rgba(255,255,255,0.85);
    transform:scale(1.15);
  }

  /* ---------- §8 Preise: 3 Spalten -> 1 ---------- */
  .preis-grid{ grid-template-columns:1fr; gap:16px; }
  /* `min-height:340px` (landing.css:751) macht die drei Karten NEBENEINANDER
     gleich hoch. Gestapelt gibt es nichts anzugleichen — die Zahl wird zu
     purer Leere, die `.preis-cta{margin-top:auto}` (landing.css:785) komplett
     ueber dem Knopf sammelt. Ohne Leistungspunkte waren das 149px. */
  .preis-karte{ width:auto; min-height:0; }

  /* ---------- §10 Herkunft (Flex-Row -> stapeln, Foto fluid) ---------- */
  .herkunft-visuals{ flex-direction:column; align-items:center; gap:28px; margin-top:32px; }
  .arbeitsfoto{ width:100%; max-width:340px; }
  .herkunft-links{ flex-direction:column; gap:14px; }
  .buch-cover{ margin:0 auto; }

  /* ---------- Footer ---------- */
  .fuss{ padding:40px 0 28px; }
}


/* ===================== TABLET + LAPTOPS  (641 – 1689px) =====================
   Zweite Responsive-Runde (25.07.), nach der Mobile-Abnahme.

   ⚑ WARUM DAS BAND SO WEIT REICHT (Messbefund):
   Der abgenommene Fix-Entwurf ist erst ab **1690px** vollstaendig im Bild.
   Zwei Beitraege, die man getrennt rechnen muss:
     1. das Raster        640 + 610 + 54 Abstand + 2x40 Rand   = 1384px
     2. die --lp-Feinjustage obendrauf: der Hero-Knopf steht per
        translate(865px) weit rechts (Aussenkante 1505px hinter der
        Container-Innenkante), der Hero-Kicker per translate(-170px) links
        DAVOR. Der Inhalt spannt also 1675px — und weil `.container` bei
        1400px stehen bleibt und zentriert, braucht es links wie rechts
        Rand: gemessen 1688 -> 1px raus, 1690 -> sauber.
   Ein Band bis nur 1383 haette also ein Loch 1384-1689 gelassen, genau dort,
   wo die verbreiteten Laptops liegen (1440, 1512, 1600). Erste Fassung war auf
   1383 gebaut (Zahl aus Punkt 1 allein) — bei der Gegenprobe bei 1384 fielen
   47 abgeschnittene Elemente auf, daher korrigiert.

   ⚑ DAS ABSCHNEIDEN IST UNSICHTBAR: die Sektionen haben `overflow:hidden`,
   also gibt es keinen Quer-Scrollbalken — `document.scrollWidth` = Viewport
   sieht gesund aus, der Inhalt ist trotzdem weg. Gemessen im Ausgangszustand:
   84 abgeschnittene Elemente bei 768, 78 bei 1024, 55 bei 1280, 47 bei 1384.

   ANLAGE (Inhaber-Entscheid 25.07.): gemischt.
     A · 641-1689  gemeinsame Grundlage (Transforms neutralisieren, Container,
                   Schriftgroessen mitwachsend)
     B · 641- 900  gestapelt wie am Handy
     C · 901-1689  zwei Spalten, aber mitwachsend statt fest
     D · 641-1024  §6-Filmstreifen als Wisch-Leiste (eigene Grenze, s. dort)

   ⚠ FALLEN, die in der Mobile-Runde schon Zeit gekostet haben:
   - `margin:auto` deaktiviert `justify-self:stretch` -> Buehne faellt auf
     fit-content, Foto auf 0, es bleibt ein dunkles Oval. Darum hier NIRGENDS
     auto-Raender an .stage, sondern klare Breiten + margin:0.
   - Spezifitaet: `#demo .stage` (1,1,0) schlaegt `.stage` (0,1,0);
     `.hero-word.w1` (0,2,0) schlaegt `.hero-word` (0,1,0).
   - `minmax(0,1fr)` statt `1fr` gegen Grid-Blowout (Lehre .com-Runde).
   =================================================================== */


/* ---------- A · GEMEINSAM  (641 – 1689px) ---------- */
@media (min-width: 641px) and (max-width: 1689px){

  /* --- Positions-Transforms neutralisieren (--lp-Werte sind auf 1920 getunt) ---
     Dieselbe Liste wie im Mobile-Block. ⚠ `.kopf-nav` steht bewusst NICHT drin:
     deren translate(-50%,-50%) zentriert die Navigation und wird hier gebraucht
     (Block B setzt sie stattdessen gezielt auf statisch).
     ⚠ `.hero-schimmer` ebenfalls nicht: dessen translate(-50%,-50%) ist die
     Zentrierung, nicht die Feinjustage. */
  .kopf-wortmarke,
  .hero-kicker, .hero-word, .hero-lead-line, .hero-actions, .phone,
  .sektion h2, #vergleich .kicker,
  .welt-grid > div, .welt-stage,
  .weg-intro, .weg-strip, .aktions-zeile,
  #vergleich .chips, #vergleich p,
  .preis-grid, .trust-strip, .faq-liste,
  .herkunft-grid > div, .herkunft-visuals,
  #schluss .container{ transform:none !important; }

  /* --- Container + Grundwerte ---
     ⚠ Der Deckel `max-width:1400px` aus tokens.css BLEIBT bewusst stehen (kein
     max-width:100 %): unterhalb von 1400 ist der Container ohnehin voll breit,
     oberhalb haelt der Deckel die Spalten bei der abgenommenen Breite an. Ohne
     ihn wuerden die zwei Spalten bis 1689 immer weiter auseinanderlaufen und an
     der Desktop-Grenze sichtbar zurueckspringen. Nur der Rand wird schmaler. */
  .container{ padding:0 40px; }
  html{ scroll-padding-top:88px; }        /* Kopf ist sticky, min-height 78px */

  /* Bau-Panels (⚙-Positionen, Schimmer-Schalter) ausblenden — sie ueberlagern
     hier den Inhalt. Nur lokal; im Deploy ohnehin entfernt. */
  #lc, #dev-schimmer{ display:none !important; }

  /* --- Kopf: Wortmarke zurueck ins Bild ---
     base.css schiebt sie mit margin-left:-103px (plus --lp-marke-x -50px, oben
     schon neutralisiert) nach links; auf 1920 sitzt sie damit richtig, im Band
     stand sie bei x = -113 und war angeschnitten. */
  .kopf-wortmarke{ margin-left:0; }

  /* --- Schrift mitwachsend statt in Stufen ---
     Im Band waeren die 1920er-Groessen zu gross (Headline 77px, Kicker 37px).
     clamp() = eine Regel fuer die ganze Spanne: unten Handy-nah, oben exakt der
     abgenommene Desktop-Wert, dazwischen linear. Jede Zeile ist so gerechnet,
     dass sie bei 641px den Wunschwert und bei 1689px (Bandende) punktgenau den
     Desktop-Wert trifft — an der Grenze zum Desktop springt also nichts. */
  .hero-headline{ font-size:clamp(2.75rem, 1.49rem + 3.15vw, 4.8125rem); } /* 44 -> 77px */
  .hero-kicker{
    font-size:clamp(1.5rem, 0.99rem + 1.28vw, 2.34rem);                    /* 24 -> 37.4px */
    white-space:normal;   /* Desktop-nowrap wuerde im Band rechts hinauslaufen */
  }
  /* ⚑ ABER: der Umbruch darf nur an der NAHT fallen, nicht mitten im Satz.
     Gemessen bei 901px (Textspalte nur 410px): „Du bist der Trainer – nicht der /
     Bildhauer" — der Strich landete in Zeile 1, das Wort allein in Zeile 2.
     Genau diese Naht hat der Inhaber am Handy von Hand gesetzt (.kk1/.kk2,
     s. Mobile-Block). Hier braucht es keine Breitenangabe: jede Haelfte bleibt
     in sich unzerbrechlich, also ist die EINZIGE Umbruchstelle der Zwischenraum
     zwischen den beiden Spans. Passt alles in eine Zeile -> eine Zeile (wie
     Desktop); passt es nicht -> Bruch exakt vor dem Gedankenstrich.
     Geprueft, dass keine Haelfte je breiter ist als die Spalte: laengste ist
     „– nicht der Bildhauer" mit 275px bei 901px Fenster (Spalte 410px). */
  .hero-kicker-line{ white-space:nowrap; }
  .sektion h2{ font-size:clamp(1.7rem, 1.49rem + 0.48vw, 2rem); }          /* 27 -> 32px */
  .schluss h1,
  .schluss h2{ font-size:clamp(2.25rem, 1.29rem + 2.39vw, 3.815rem); }     /* 36 -> 61px */

  /* --- Vertikale Luft: 1920er-Werte sind unten im Band zu grosszuegig ---
     Gleiche Rechnung wie oben: bei 641px knapper, bei 1689px exakt die
     abgenommenen 112/96 bzw. 132. */
  .sektion{ padding:clamp(84px, 67px + 2.67vw, 112px) 0 clamp(72px, 57px + 2.29vw, 96px); }
  .schluss{ padding:clamp(96px, 74px + 3.44vw, 132px) 0; }

  /* --- Hintergrund-Schimmer mitwachsend ---
     Fester Desktop-Wert 859px wuerde ein 768er-Display fast ganz zudecken
     (gesehen im Screenshot-Test: 92 % der Breite, das ist kein „mehr spueren
     als sehen" mehr). Mobil sind es 600px. Diese Kurve setzt beide Enden
     stufenlos zusammen: bei 641px 590px (schliesst an den Handy-Wert an),
     bei 1690px exakt die abgenommenen 859px. Dazwischen 768 -> 623,
     1024 -> 688, 1280 -> 754.
     ⓘ EINE ZAHL zum Nachjustieren, wenn der Inhaber ihn kraeftiger/leiser will. */
  .hero-schimmer{ width:clamp(590px, 426px + 25.6vw, 859px); }

  /* --- §3 Tueren: nebeneinander, nur der Abstand schrumpft ---
     Sie bleiben im Band nebeneinander (gemessen: auch bei 641 noch 278px breit,
     der Titel „Hufberatung am Foto" bricht dort um, laeuft aber nicht hinaus —
     das Handy-Problem trat erst bei ~145px auf). */
  .tueren-grid{ gap:clamp(18px, 3vw, 48px); }

  /* RUNDE 2 „MASSSTAB" (Inhaber 25.07.: „alle Fotos/Videos/Montagen kleiner"):
     Die Tueren sind das Format 1108:1962, also 1,77x so hoch wie breit — bei
     400px Breite werden daraus 708px Hoehe, und die Sektion war damit 962px
     hoch (1,37 Bildschirmhoehen auf seinem iPad quer). 300px Breite ergibt
     531px Hoehe -> Sektion ~785px (1,12).
     ⓘ WARUM MITWACHSEND statt fester 300: sonst spraenge die Tuer an der
     Bandgrenze von 300 auf die abgenommenen 400 zurueck. Diese Kurve trifft bei
     1689px punktgenau die 400 — dieselbe Rechenweise wie bei den Schriftgroessen
     weiter oben. Unter ~1080px greift der Boden 300; unter ~700px schrumpft der
     Flex-Container die Tueren ohnehin weiter (bei 641 auf 271) — dort aendert
     die Regel also nichts. */
  .tuer{ width:clamp(300px, 122.7px + 16.42vw, 400px); }

  /* --- §9 FAQ: linke Kante an die Ueberschrift ---
     Gemessen bei 1080px: Ueberschrift bei x=32, die Liste daneben bei x=130,
     weil landing.css sie mit `margin:44px auto 0` zentriert. Zusammen mit der
     Schritte-Liste (~60 durch die Ziffernspalte) hatte EINE Sektion drei
     verschiedene linke Kanten — das ist vermutlich das, was der Inhaber als
     „Ueberschriften tendenziell zu weit links" wahrgenommen hat: die
     Ueberschrift ist mit nichts darunter buendig. Der 820er-Deckel bleibt
     (Lesbarkeit), nur der linke auto-Rand faellt weg. */
  .faq-liste{ margin-left:0; margin-right:auto; }
}


/* ---------- B · SCHMAL  (641 – 900px) · gestapelt ---------- */
@media (min-width: 641px) and (max-width: 900px){

  /* --- Kopf: Navigation von „absolut mittig" auf normale Zeile ---
     Die mittig gesetzte Nav ist 282px breit und ihr linker Rand liegt bei
     Fensterbreite/2 − 141. Unter rund 810px schiebt sich das UNTER die
     Wortmarke (bei 641 um 58px). Statt eines Hamburgers (alle drei Links
     passen noch bequem) laeuft die Nav hier einfach in der Flex-Zeile mit:
     [Wortmarke] ......... [Nav][Sprachen]. */
  .kopf-inner{ gap:12px; }
  .kopf-nav{
    position:static;
    transform:none;
    gap:14px;
  }
  .kopf-nav a{ padding:0 6px; }
  .kopf-wortmarke img{ width:170px; }

  /* --- Hero gestapelt: ZENTRIERT wie am Handy (Inhaber 29.07.) ---
     Frueher linksbuendig mit Treppe; der Inhaber wuenscht auf dem Tablet
     dieselbe saubere Mitte wie mobil ("eigentlich wuensche ich mir ein Layout
     wie mobile … sauber zentriert, klare Struktur mit den Abstaenden").
     Gespiegelt: die Mobile-Zentrierregeln + die luftige 62/62/34-Rhythmik.
     ⚠ EINE ABWEICHUNG vom Handy: der Kicker bleibt hier EINZEILIG. Bei
     641-900px passt "Du bist der Trainer – nicht der Bildhauer" in eine Zeile
     (~387px im 688er-Block), darum KEIN zweizeiliger kk2-Versatz wie mobil
     (der waere eine zweite, pro Sprache kalibrierte Magie-Zahl: DE 108 / EN 35px)
     — text-align:center zentriert die eine Zeile sauber. Ab 901px bleibt der
     Hero 2-spaltig (Block C) und linksbuendig neben dem Mockup — richtig, weil
     dort NICHT gestapelt wird. */
  .hero{ padding:64px 0 64px; }
  .hero-inner{ grid-template-columns:minmax(0,1fr); gap:40px; min-height:0; }
  .hero-copy{ text-align:center; }
  .hero-kicker{ margin:0 0 62px; }                 /* Luft wie am Handy; einzeilig -> text-align zentriert */
  .hero-headline{ align-items:center; }
  /* Doppelklassen-Selektor: landing.css setzt die Treppe als
     `.hero-word.w1{margin-left:2.72ch}` — gleiche Spezifitaet, spaetere Quelle
     gewinnt; ein einfaches `.hero-word{}` verloere sie und die Woerter blieben
     rechts versetzt. */
  .hero-word.w1,
  .hero-word.w2,
  .hero-word.w3{ margin-left:0; }
  .hero-lead{ margin:62px auto 0; }                /* zentrierter Block (max-width-Deckel aus landing.css bleibt) */
  /* Hero-CTA raus wie am Handy (Inhaber 29.07.); visibility:hidden statt
     display:none -> das Mockup bleibt EXAKT an seiner Position (nicht hoch). */
  .hero-actions{ justify-content:center; margin:34px 0 0; visibility:hidden; }
  .hero-visual{ min-height:0; justify-content:center; padding-top:0; }
  :root{
    /* Rahmen (.phone) UND iframe teilen sich die Variable -> eine Zahl skaliert
       beides. 0.80 = 360x736px (Desktop 0.84 = 378x773). */
    --lp-app-demo-scale:0.80;
  }
  /* Schimmer sitzt auf Desktop bei top:46 % — in der jetzt viel hoeheren,
     gestapelten Sektion laege die Mitte hinter dem Mockup statt hinter dem
     Text (gleicher Effekt wie am Handy). Fester Wert holt sie in den Textblock.
     ⚑ Nach dem Zentrieren waechst der Textblock (62/62/34 statt ~30/44/46) um
     ~+38px, das Mockup rutscht mit — die Schimmer-Mitte muss weiter im
     .hero-copy-Block sitzen (sonst „kommt er nicht zum Ausdruck" wie mobil).
     Gemessen bei 641-900px: 320px haelt die Mitte im Textblock. */
  .hero-schimmer{ top:320px; }

  /* --- Sektionen: 2 Spalten -> 1 --- */
  .welt-grid{ grid-template-columns:minmax(0,1fr); gap:32px; margin-top:32px; }

  /* ⚑ BUEHNEN: KEINE auto-Raender (s. Fallen-Notiz oben). Die Buehne ist EIN
     Element (.stage = .welt-stage, Grid-Kind von .welt-grid); auto-Raender
     wuerden justify-self ausser Kraft setzen und sie auf fit-content kippen. */
  .welt-stage{ justify-self:center; }
  .stage{ width:min(100%, 480px); margin:0; }
  /* landing.css setzt fuer §2/§4 `#demo .stage{width:auto}` (hoehere Spezifitaet
     als die Zeile darueber) — darum hier gleichrangig nachgezogen. 404 = der
     abgenommene Rahmen 368 + 2x18 Innenabstand. */
  #demo .stage,
  #vergleich .stage{ width:min(100%, 404px); }

  /* --- §5 + §7: Bild direkt unter die Ueberschrift, Text darunter ---
     Inhaber 26.07. vom iPad HOCHKANT, zu §5: „Da wuerde ich tatsaechlich das
     Bild unter die Ueberschrift setzen und dann den Text mit der Erklaerung."
     Zu §7: „Und hier das selbe Prinzip."
     URSACHE: In der DOM-Reihenfolge steht der Textblock VOR der Buehne
     (`.welt-grid > div` dann `.welt-stage`). Gestapelt ergibt das
     Ueberschrift -> Text -> Bild; das Bild rutschte dadurch weit nach unten
     (gemessen bei 810px: §5 566px unter der Ueberschrift, §7 494px — genau die
     beiden Sektionen, die er fotografiert hat; §2/§4 liegen bei 199/269px).
     `order:-1` dreht nur die visuelle Reihenfolge, die Vorlesereihenfolge
     bleibt unveraendert (h2 -> Text -> Bild).
     ⚠ FOLGE: der „App oeffnen"-Knopf sitzt im Textblock und wandert damit
     unter das Bild. */
  #beratung .welt-stage,
  #testdrive .welt-stage{ order:-1; }

  /* --- §7 Galerie-Foto vollstaendig zeigen (gleiche Rechnung wie in Block C) ---
     Inhaber 26.07.: „den Rahmen bitte so gross machen, dass man alle Fotos
     sauber sehen kann. Das haben wir in der anderen Version auch schon so."
     Die „andere Version" ist das Querformat-Band, wo diese Zeile seit `3955c5c`
     steht. `galerie-anriss.jpg` ist 626x1028 und damit hochkantiger als der
     3:4-Rahmen aus `.stage-frame`; `object-fit:cover` schnitt die unterste
     Huf-Reihe weg. ⚠ PREIS: der Rahmen waechst von 592 auf 729px (+137).
     Desktop ab 1690 bleibt beim abgenommenen 3:4. */
  #testdrive .stage-frame--foto{ aspect-ratio:626/1028; }

  /* --- §8 Preise: 3 Spalten -> 1, Karte gedeckelt ---
     Eine Karte ueber die volle Tablet-Breite waere unlesbar breit.
     `min-height:0`: s. Begruendung im Mobile-Block. Gestapelt gibt es keine
     Nachbarkarte, an die anzugleichen waere. */
  .preis-grid{ grid-template-columns:min(100%, 460px); gap:18px; }
  .preis-karte{ min-height:0; }

  /* --- §10 Herkunft: Foto + Cover untereinander ---
     Nebeneinander braucht 400 + 48 + 280 = 728px; bei 641 sind nur 577px
     Innenbreite da, das Cover hat eine feste Hoehe und wuerde verzerren. */
  .herkunft-visuals{ flex-direction:column; align-items:center; gap:32px; margin-top:40px; }
  .arbeitsfoto{ width:100%; max-width:400px; }
  .herkunft-links{ gap:24px; }
}


/* ---------- C · BREIT  (901 – 1689px) · zwei Spalten, mitwachsend ---------- */
@media (min-width: 901px) and (max-width: 1689px){

  /* Verhaeltnis 1.05 : 1 = das abgenommene 640 : 610, nur eben mitwachsend.
     minmax(0,…) statt 1fr, sonst kann ein breites Kind (Foto, nowrap-Zeile)
     die Spalte ueber ihre Bahn hinausdruecken (Grid-Blowout).
     Am oberen Bandende sind es 666:634 — praktisch der Desktop-Wert 640:610,
     weil der Container bei 1400px stehen bleibt (s. Block A). */
  .hero-inner,
  .welt-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:36px; }

  /* ⚑ RUNDE 2, der wichtigste Einzelfund: der Hero wird NICHT vom Mockup hoch
     gehalten, sondern von zwei Mindesthoehen aus landing.css (`.hero-inner`
     720px, `.hero-visual` 700px — auf 1920 sinnvoll, dort ist der Schirm 1080
     hoch). Auf 1080x700 zwangen sie den Hero auf 965px = 1,38 Bildschirmhoehen,
     voellig unabhaengig davon, wie klein das Mockup ist. Ohne diese zwei Zeilen
     haette die Verkleinerung des Mockups am Hero fast nichts bewirkt.
     Der Mobile-Block macht es seit v2 genauso; hier fehlte es. */
  .hero-inner{ min-height:0; }
  .hero-visual{ min-height:0; }

  /* --- Buehnen: Hoehen-Budget (Inhaber 25.07.) ---
     AUSGANGSLAGE, gemessen auf 1080x700 (sein iPad quer): jede Buehne war rund
     EINE ganze Bildschirmhoehe hoch (§2/§4 704px, §5 824px, §7 625px). Weil das
     Raster oben ausrichtet (`align-items:start`, Inhaber-Gesetz — NICHT auf
     center aendern), stand der kurze Text oben und darunter klafften 225-513px
     Leere. Genau das hat er als „Bilder zu gross" UND „Texte komisch weit oben"
     beschrieben — eine Ursache, zwei Symptome.
     MASSSTAB fuer „richtig": §6 ist mit 735px = 1,05 Bildschirmhoehen
     ausdruecklich abgenommen. Darauf zielen die Werte unten.
     ⓘ Alle drei Kurven sind so gerechnet, dass sie bei 1080px den neuen Wert und
     bei 1689px punktgenau den abgenommenen Desktop-Wert treffen — sonst spraenge
     die Buehne an der Bandgrenze zurueck. Zum Nachjustieren jeweils die ERSTE
     Zahl (den Boden) aendern. */
  .stage{ width:min(100%, 480px); margin:0; }

  /* §2 + §4 · Handy-Hochkant 368:670.
     ⚑ RUNDE 3 (Inhaber 25.07. abends, zwei iPad-Screenshots): ZURUECK AUF DIE
     ABGENOMMENE GROESSE. Wortlaut zu §2: „der Rahmen ist jetzt echt sehr klein.
     Man kann eigentlich gar nicht mehr richtig sehen, um was es geht." Zu §4:
     „Wir haben angenommen, dass durch das Verkleinern vom Rahmen irgendetwas
     mit den Schriften besser wird. Ist aber nicht so. … Also bitte wieder auf
     den urspruenglichen Zustand."
     Die Hoehe holt jetzt der Umbau darunter (Ueberschrift NEBEN das Bild statt
     darueber) — das spart mehr, als das Schrumpfen gebracht hat, und kostet
     keine Erkennbarkeit. §5 bleibt bei 360 (Inhaber: „ok"), §7 bei 400.

     ⚑ RUNDE 4 (Inhaber 25.07., §4 auf dem iPad quer): „Der Rahmen ist zu hoch."
     Mit den vollen 404 ist die Buehne 704px hoch — auf seinem 700er-Schirm sind
     abzueglich des mitlaufenden Kopfes (78px) aber nur 622px sichtbar. Der
     Rahmen konnte also nie ganz ins Bild passen, egal wo man scrollt.
     Die 356 sind die groesste Breite, bei der er vollstaendig sichtbar ist:
     356 − 36 Innenabstand = 320 Rahmenbreite, x 670/368 = 583 hoch, + 36 = 619.
     ⓘ DAS IST EINE HARTE DECKE, keine Geschmacksfrage: das Video ist 9:16, jeder
     Pixel Breite kostet 1,82 Pixel Hoehe. Ueber 356 heisst zwangslaeufig „passt
     nicht auf einen Schirm" — nach unten ist Luft, nach oben nicht.
     Die Kurve trifft bei 1689 weiterhin punktgenau die abgenommenen 404. */
  #demo .stage,
  #vergleich .stage{ width:min(100%, clamp(356px, 270.9px + 7.88vw, 404px)); }
  #demo .stage-frame--video,
  #vergleich .stage-frame--foto{
    width:100%;
    height:auto;
    aspect-ratio:368/670;
  }

  /* §5 · 12er-Raster, die hoechste Buehne der Seite. 478 -> 360 bei 1080
     => Buehne 612 statt 824 (0,87 statt 1,18).
     ⚠ PREIS, dem Inhaber gemeldet: die zwoelf Einzelfotos werden dadurch von
     130px auf ~90px schmal. Weiter runter geht ohne Erkennbarkeits-Verlust
     nicht — die einzige Loesung, die Hoehe UND Fotogroesse rettet, waere eine
     andere Anordnung (4 Spalten x 3 Reihen statt 3 x 4). Das aendert aber die
     Bedeutung der Spalten (Solar | Heel | Lateral, s. landing.css:466), also
     Inhaber-Entscheid, nicht stillschweigend gebaut. */
  #beratung .stage{ width:min(100%, clamp(360px, 147.2px + 19.7vw, 480px)); }

  /* §7 · 478 -> 392 bei 1080.
     ⚑ RUNDE 4: die 400 aus Runde 2 waren nach dem Entzerren des Fotos (s.
     weiter unten, Rahmen bekommt 626:1028 statt 3:4) 632px hoch — also 11px
     mehr, als unter dem mitlaufenden Kopf sichtbar sind. Dieselbe Rechnung wie
     bei §2/§4, nur mit dem steileren Foto-Verhaeltnis 1:1,64:
     392 − 36 = 356 Rahmenbreite, x 1028/626 = 584 hoch, + 36 = 620 <= 621.
     Der Inhaber hat §7 nicht bemaengelt — aber es waere derselbe Fehler, den er
     bei §4 gesehen hat, nur 11px klein. Darum mitgezogen und hier vermerkt. */
  #testdrive .stage{ width:min(100%, clamp(392px, 235.9px + 14.45vw, 480px)); }


  /* ================================================================
     RUNDE 3 · UEBERSCHRIFT NEBEN DAS BILD STATT DARUEBER
     (Inhaber 25.07. abends, aus drei iPad-Screenshots)
     ================================================================
     WARUM DAS VERKLEINERN DIE UEBERSCHRIFT NIE ERREICHT HAT: sie steht
     technisch gar nicht in der Textspalte. Die Anlage ist
        .container > [.kicker] h2  +  .welt-grid > (Text | Buehne)
     Die Ueberschrift ist also eine eigene Zeile ueber dem zweispaltigen Raster,
     quer ueber die volle Breite — an der rechten Spalte zu drehen konnte sie
     nie bewegen. Deshalb blieb sie bei jeder Buehnengroesse oben kleben, und
     der Inhaber sah zweimal dasselbe: „die Ueberschrift klemmt trotzdem mit
     dem Text da oben links drin."

     LOESUNG: der Container wird selbst zum zweispaltigen Raster, `.welt-grid`
     wird per `display:contents` durchsichtig (die Kinder ruecken eine Ebene
     hoch, ohne dass am HTML etwas geaendert wird). Dann liegen Kicker,
     Ueberschrift und Fliesstext untereinander in Spalte 1, die Buehne spannt
     rechts ueber alle Zeilen. Die zwei `1fr`-Polsterzeilen oben und unten
     teilen sich den Rest — dadurch steht der Textblock mittig zur Buehne,
     also genau das vom Inhaber verlangte „nach unten schieben".

     ⚠ AUSDRUECKLICHER INHABER-ENTSCHEID 25.07.: das ueberstimmt fuer diese vier
     Sektionen die Regel „align-items:start, nicht center" — er hat es selbst
     verlangt, nachdem er die Leere gesehen hat („Da ist locker Platz fuer beide
     Elemente"). GILT NUR IM BAND; ab 1690 bleibt alles wie abgenommen.

     NEBENGEWINN: die Ueberschrift stapelt nicht mehr ueber der Buehne, das
     spart je Sektion rund 76px Hoehe — mehr, als das Schrumpfen der Rahmen
     gebracht hatte. Darum durften §2/§4 zurueck auf die abgenommene Groesse.
     Das ist zugleich die Antwort auf „der Rahmen klebt so weit unten" (§5):
     die Buehne beginnt jetzt ganz oben statt unter der Ueberschrift.
     ================================================================ */
  #demo .container,
  #vergleich .container,
  #beratung .container,
  #testdrive .container,
  #pferde .container{                    /* #pferde 01.08.: kurzer Text mittig zur Buehne (Inhaber „im gleichen Stil") */
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    /* Polster | Kicker | Ueberschrift | Text | Polster */
    grid-template-rows:1fr auto auto auto 1fr;
    column-gap:36px;
  }
  #demo .welt-grid,
  #vergleich .welt-grid,
  #beratung .welt-grid,
  #testdrive .welt-grid,
  #pferde .welt-grid{ display:contents; }

  /* Kicker gibt es nur in §4; die leere auto-Zeile faellt in den anderen
     Sektionen auf 0. Abstand Kicker->Ueberschrift bleibt seine eigene
     margin-bottom (18px, vom Inhaber am 23.07. so gesetzt). */
  #vergleich .container > .kicker{ grid-column:1; grid-row:2; }

  #demo .container > h2,
  #vergleich .container > h2,
  #beratung .container > h2,
  #testdrive .container > h2,
  #pferde .container > h2{ grid-column:1; grid-row:3; }

  /* „den Fliesstext mit einer Zeile Abstand" (Inhaber-Wortlaut zu §4):
     1.8rem = 28.8px = exakt eine Zeile des Fliesstexts (18px x 1.6). Vorher
     waren es die 44px, die `.welt-grid` als margin-top mitbrachte — die faellt
     mit display:contents weg. */
  #demo .welt-grid > div:not(.welt-stage),
  #vergleich .welt-grid > div:not(.welt-stage),
  #beratung .welt-grid > div:not(.welt-stage),
  #testdrive .welt-grid > div:not(.welt-stage),
  #pferde .welt-grid > div:not(.welt-stage){
    grid-column:1;
    grid-row:4;
    margin-top:1.8rem;
  }

  /* Buehne rechts ueber die volle Hoehe. `align-self:start`, damit sie sich
     nicht dehnt, falls die Textspalte einmal hoeher wird als sie selbst —
     dann fallen die Polsterzeilen auf 0 und alles bleibt heil. */
  #demo .welt-stage,
  #vergleich .welt-stage,
  #beratung .welt-stage,
  #testdrive .welt-stage,
  #pferde .welt-stage{
    grid-column:2;
    grid-row:1 / -1;
    align-self:start;
  }

  /* --- §7 Galerie-Foto vollstaendig zeigen (Inhaber 25.07.: „ich weiss schon,
     auf der Desktop-Variante sind die Hufe im Rahmen auch abgeschnitten. Aber
     hier im Tablet koennten wir den Rahmen ein klein wenig nach oben aufziehen.
     Dann kann man alle Fotos von den Hufen komplett sehen.") ---
     URSACHE: `galerie-anriss.jpg` ist 626x1028, also deutlich hochkantiger als
     der 3:4-Rahmen aus `.stage-frame`. `object-fit:cover` schneidet die
     Differenz oben und unten weg — die unterste Huf-Reihe fiel dadurch raus.
     Der Rahmen bekommt hier das Eigenformat des Fotos, damit nichts mehr
     beschnitten wird. Desktop ab 1690 bleibt beim abgenommenen 3:4.
     ⚠ PREIS: die Buehne wird dadurch von 521 auf 634px hoch.
     ⓘ Dieselbe Zeile steht seit 26.07. auch in Block B (iPad hochkant) — beim
     Aendern BEIDE Stellen anfassen. */
  #testdrive .stage-frame--foto{ aspect-ratio:626/1028; }

  /* --- §3 Tueren weiter auseinander (Inhaber: „den linken ein bisschen nach
     links, den rechten ein bisschen nach rechts") ---
     Vorher standen beide mit 32px Abstand in der Mitte und liessen links und
     rechts je ~184px leer. Diese Kurve macht daraus bei 1080 einen Abstand von
     180px (jede Tuer rueckt ~74px nach aussen, aussen bleiben ~100px) und
     laeuft bis 1689 auf die abgenommenen 48px zurueck.
     ⓘ EINE ZAHL zum Nachjustieren: die 180 am Ende der Zeile.
     ⚠ Die 180 sind zugleich die Obergrenze aus Sicherheitsgruenden: bei 901px
     sind nur 221px frei, 180 passen mit 41px Reserve — mehr darf es nicht
     werden, sonst schrumpft der Flex-Container die Tueren wieder. */
  .tueren-grid{ gap:clamp(48px, 414px - 21.67vw, 180px); }

  /* §8 Preise: 3 Karten bleiben, Spalten mitwachsend (oben ~429px, Desktop 418) */
  .preis-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
  /* Die Preiszeile soll wie auf dem Desktop EINZEILIG bleiben. Sie braucht am
     Stueck 207px („9,99 € / Monat") bzw. 232px („19,99 € / Monat"). Bei 901px
     sind die Karten nur 263px breit — mit den Desktop-Werten brach sie um
     (gemessen: Karte 386 statt 340px hoch, mittlere Karte aus der Reihe).
     Zwei kleine Stellschrauben zusammen loesen es: schmalerer Innenabstand
     (223px nutzbar) und eine mitwachsende Ziffer, die bei 901px 38px misst
     statt 41,6 (dort braucht die laengste Zeile dann 212px = 11px Luft) und
     ab ~1400px wieder den abgenommenen Desktop-Wert erreicht. */
  .preis-karte{ padding:28px 20px 32px; }
  .preis-wert{ font-size:clamp(2.375rem, 1.97rem + 0.72vw, 2.6rem); }
}


/* ---------- C3 · §5-UEBERSCHRIFT: UMBRUCH NACH „…EIGENEN FOTOS" ----------
   Inhaber-Wunsch 25.07.: „… eigenen Fotos / so markiert zu sehen."
   Die Naht sitzt im HTML (zwei .titel-zeile-Spans, Muster Hero-Kicker) —
   ⚠ ABER DIE NAHT ALLEIN REICHT NICHT: gemessen bei 1080px braucht die erste
   Haelfte „Hast du Lust, deine eigenen Fotos" 526px, die Textspalte hat nur
   494px. Ohne mehr Platz wuerde `nowrap` den Satz aus der Spalte schieben.
   Darum hier BEIDES: die Spalte bekommt fuer §5 mehr Anteil (1.35 statt 1.05
   — §5 hat die schmalste Buehne, 360px, dort ist der Platz am ehesten
   entbehrlich; bei 1080 wird die Textspalte damit 554px, also 28px Reserve),
   und erst dann werden die Haelften unzerbrechlich.

   ⚑ UNTERGRENZE 1040px, GEMESSEN, NICHT GERATEN: darunter waechst die Spalte
   langsamer als die Schrift, bei 1020px fehlen wieder 2px. Unterhalb 1040
   bleibt deshalb ALLES wie bisher und der Satz bricht natuerlich um (so wie
   der Inhaber es bis jetzt gesehen hat) — kein Ueberlauf, nur eine andere
   Umbruchstelle. Sein Geraet ist 1080 breit.
   ⓘ EN braucht die Regel nicht (dort bricht der Satz ohnehin an der Naht),
   schadet aber auch nicht — die Haelften sind kuerzer. */
@media (min-width: 1040px) and (max-width: 1689px){
  #beratung .container{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
  #beratung .titel-zeile{ white-space:nowrap; }
}


/* ---------- C2 · HERO-MOCKUP IN STUFEN  (901 – 1689px) ----------
   Inhaber 25.07.: „Das Mockup ist sehr gross. Bitte kleiner." Auf 1080x700 war
   es 378x773 = 1,10 Bildschirmhoehen.

   ⚠ WARUM STUFEN UND KEINE KURVE: die Groesse haengt an --lp-app-demo-scale,
   einer EINHEITENLOSEN Zahl (`.phone` rechnet 450px x Zahl, der iframe wird mit
   `transform:scale(Zahl)` auf dieselbe Groesse gebracht — beide muessen exakt
   zusammenpassen, sonst rutscht die Demo aus dem Rahmen). Eine Zahl laesst sich
   nicht aus vw ableiten: `calc(300px / 450px)` ist ungueltiges CSS. Deshalb drei
   Stufen; die Spruenge sind 0.08 / 0.08 / 0.06 (36 / 36 / 27px Breite) und
   liegen an Stellen, an denen sich die Fensterbreite ohnehin stark aendert.
   Die letzte Stufe endet dicht am abgenommenen Desktop-Wert 0.84.

   1080px (iPad quer) faellt in die erste Stufe: 0.62 = 279x570 statt 378x773.
   Zusammen mit den beiden geloeschten Mindesthoehen (Block C) sinkt der Hero
   damit von 965px auf rund 750px = 1,07 Bildschirmhoehen. */
@media (min-width: 901px)  and (max-width: 1150px){ :root{ --lp-app-demo-scale:0.62; } }
@media (min-width: 1151px) and (max-width: 1400px){ :root{ --lp-app-demo-scale:0.70; } }
@media (min-width: 1401px) and (max-width: 1689px){ :root{ --lp-app-demo-scale:0.78; } }


/* ---------- D · §6 FILMSTREIFEN: Wisch-Leiste bis 1024px ----------
   Eigene Grenze, absichtlich quer zur B/C-Teilung: fuenf Kacheln nebeneinander
   ergeben erst ab rund 1025px eine brauchbare Groesse (dort 177px breit).
   Bei 901px waeren es 153px, bei 641px nur 101px — die Bildunterschriften
   waeren nicht mehr lesbar. Darum uebernimmt das Band die abgenommene
   Handy-Loesung: wischen statt quetschen.
   ⓘ Dem Inhaber zu zeigen: ob die Grenze bei 1025 richtig sitzt. */
@media (min-width: 641px) and (max-width: 1024px){
  .weg-strip{
    display:flex;
    grid-template-columns:none;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:40px;      /* gewischte Kachel rastet buendig zur Textkante */
    -webkit-overflow-scrolling:touch;
    margin:28px -40px 0;           /* bis an den Bildschirmrand wischen */
    padding:0 40px 12px;
    scrollbar-width:none;
    /* Rechte Kante weich auslaufen = sichtbares „hier geht es weiter".
       Links faellt der Verlauf in den 40px-Innenabstand, bleibt also unsichtbar
       und haelt die Textkante scharf.
       ⓘ Die vier 40 in dieser Regel muessen dem Container-Innenabstand aus
       Block A entsprechen (Runde 2: 32 -> 40) — sonst steht die Leiste nicht
       mehr buendig zur Textkante. */
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 48px), transparent 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 48px), transparent 100%);
  }
  .weg-strip::-webkit-scrollbar{ display:none; }
  .weg-tile{ flex:0 0 clamp(155px, 24%, 215px); scroll-snap-align:start; }

  /* ⚑ KEINE Wisch-Punkte in diesem Band (am Handy gibt es sie, hier bewusst nicht).
     Gemessen bei 641px: von den fuenf Kacheln sind bereits 3,7 im Bild, der ganze
     Scrollweg betraegt 262px, und das Schnapp-Raster laesst genau DREI Ruhepunkte
     zu (0 / 171 / 262). Fuenf Punkte wuerden dort also etwas anzeigen, das es
     nicht gibt — sie kamen ueber „1 von 5" nie hinaus und sprangen dann ans Ende.
     Am Handy stimmt die Rechnung (Kachel 55 % breit, 673px Weg, 0→1→2→3→4 komplett),
     darum bleibt die Regel dort unveraendert.
     Die Wisch-Aufforderung traegt hier der Anschnitt der naechsten Kachel plus der
     auslaufende rechte Rand — beides oben in dieser Regel.
     ⓘ Falls der Inhaber die Punkte trotzdem will: dann muessten die Kacheln breiter
     werden (mehr Raster-Punkte), nicht die Punkte-Logik gebogen werden. */
}


/* ====== Sektions-Reihenfolge im gestapelten Layout (Inhaber 29.07.) ==============
   Beim Testen aufgefallen: am Desktop stehen Text & Bild jeder Sektion NEBENEINANDER
   (2-spaltige welt-grid) — dort ist die jetzige Reihenfolge stimmig, man vergleicht
   nebeneinander (wie die zwei Tueren links Hufberatung / rechts Vergleich). Sobald
   alles EINSPALTIG untereinander steht (<=900px), liest der Nutzer die Sektionen als
   lineare Abfolge, und die Reihenfolge muss selbsterklaerend sein: erst „was ist das"
   (eine App, zwei Funktionen), dann Funktion 1 (Vergleich: wie -> Lernsystem), dann
   Funktion 2 (Beratung), Weg/Testdrive, Preise, Herkunft, Pferde, Fragen zum Schluss.

   Mechanik: <main> ist sonst display:block (von keiner Regel getroffen). NUR hier wird
   es zu Flex, damit `order` je Sektion greift. KEIN gap — die Abstaende kommen aus dem
   .sektion-padding, ein gap wuerde sie verdoppeln. Ab 901px bleibt <main> block ->
   DOM-Reihenfolge = abgenommene Desktop-Reihenfolge (kein HTML-Umbau noetig). Die
   900/901-Grenze ist bereits die bestehende 1-Spalte<->2-Spalten-Umschaltung der
   welt-grid, also keine neue Sprungstelle. Jedes Flexkind braucht ein explizites order —
   sonst faellt ein ungesetztes auf order:0 und springt vor alle positiven.

   Iter.2 (Tueren auftrennen, Inhaber 29.07.): Die zwei Tueren (Hufberatung / Vergleich&Galerie)
   liegen in EINER Sektion (#tueren > .container > .tueren-grid). Damit jede Tuer einzeln VOR
   ihre Welt kann, werden diese drei Wrapper hier `display:contents` -> Ueberschrift + beide
   Tueren werden eigene main-Flexkinder und einzeln orderbar (Vergleich-Tuer VOR Demo,
   Hufberatung-Tuer VOR Beratung). Die Tueren behalten ihr max-width:320px und werden per
   margin:auto zentriert (= wie jetzt: 320x567 px, 35px Rand @390) — KEIN Redesign. Die
   Abstaende 56/26px + die .sektion-Paddings der Nachbarn bilden das fruehere Tueren-Padding
   nach. Ab 901px bleibt #tueren eine normale 2-spaltige Sektion (Desktop unberuehrt).

   Iter.3 (Galerie-Bild hoch, Inhaber 29.07.): Das App-Galerie-Bild (galerie-anriss.jpg) war das
   Stage-Bild von #testdrive („Ohne Anmeldung reinschauen"), sass am Handy aber ganz unten —
   obwohl es die „Galerie" der rechten Tuer zeigt. Darum wird #testdrive ebenso via
   display:contents aufgeloest und NUR sein .welt-stage (das Bild) per order zwischen Vergleich-
   Tuer und Demo gezogen; #testdrive-Ueberschrift + Text (Schritte/Caption/CTA) bleiben an alter
   Stelle (am Handy dann textbasiert, ohne Bild). Die Buehne braucht eine definierte Breite
   (min(340px,100%-36px)), sonst kollabiert der aspect-ratio-Rahmen auf ~40px. Desktop: #testdrive
   bleibt normale 2-spaltige Sektion MIT Bild. */
/* Echo-Ueberschrift „Eine App, zwei Funktionen": Duplikat in #tueren > .container, das
   <=900px die Wiederholung VOR Funktion A traegt. Basis display:none -> >=901px unsichtbar
   (Desktop byte-identisch); der <=900-Block schaltet sie auf display:block/order:8. */
.tueren-echo{ display:none; }
/* CTA (A) „Eine App, zwei Funktionen"-Uebergang: Basis display:none -> >=901px unsichtbar
   (Desktop byte-identisch); der <=900-Block schaltet ihn auf display:flex/order:8 (Inhaber 01.08.). */
.cta-zwischen{ display:none; }

@media (max-width:900px){
  main{ display:flex; flex-direction:column; }

  /* Nur #tueren aufloesen -> Ueberschrift, Echo-Ueberschrift und beide Tueren werden eigene
     main-Flexkinder, damit jede Tuer ihren Funktions-Block eroeffnet (Inhaber 31.07.).
     #testdrive ist wieder EIN ganzer Block (order 7); das Galerie-Bild sitzt in seiner Sektion. */
  #tueren, #tueren > .container, #tueren > .container > .tueren-grid{ display:contents; }
  /* ⚠ Spezifitaet: die order:2-Regel unten ist `#tueren > .container > h2` und trifft die
     Echo-h2 mit — daher hier mit .tueren-echo hochspezifisch auf order:8 setzen. */
  #tueren > .container > h2.tueren-echo{ display:block; order:9; margin:56px 18px 0; }  /* „Eine App, zwei Funktionen" WIEDERHOLT (vor Funktion A) */

  /* Reihenfolge (Inhaber 31.07. + CTA-Runde 01.08.): zwei getrennte Funktions-Bloecke, jeder
     von der Ueberschrift eroeffnet. = neue Desktop-DOM-Ordnung, nur die zwei Tueren klammern ihre
     Funktion. CTA NUR an zwei Stellen (Inhaber 01.08.): (A) .cta-zwischen order:8 zwischen Funktion
     B & A (ueber der zweiten Ueberschrift); (B) #schluss ganz unten NACH #preise. */
  #hero{ order:1; }                                           /* Startseite + Phone-Demo */
  #tueren > .container > h2{ order:2; margin:56px 18px 0; }   /* „Eine App, zwei Funktionen" */
  #tueren .tuer--kuehl{ order:3; margin:26px auto 40px; }     /* Tuer Vergleich & Galerie -> eroeffnet Funktion B (Abstand UNTEN: getoente Karte darf nicht am getoenten Panel #vergleich kleben, Inhaber 01.08.) */
  #vergleich{ order:4; }                                      /* Sichtbar, vergleichbar — Lernsystem */
  #weg{ order:5; }                                            /* Dein Weg durch die App */
  #demo{ order:6; }                                           /* Wie kannst du Hufe vergleichen? (Demo-Video) */
  #testdrive{ order:7; }                                      /* Ohne Anmeldung reinschauen — Galerie (ganzer Block) */
  .cta-zwischen{ order:8; display:flex; justify-content:center; margin:40px 0 0; }  /* CTA (A) zwischen Funktion B & A — Abstand OBEN (getoentes #testdrive darueber) */
  #tueren .tuer--warm{ order:10; margin:26px auto 40px; }     /* Tuer Hufberatung am Foto -> eroeffnet Funktion A (Abstand unten wie kuehle Tuer) */
  #beratung{ order:11; }                                      /* Hast du Lust… */
  #herkunft{ order:12; }                                      /* aus Erfahrung entstanden */
  #pferde{ order:13; }                                        /* Das sagen die Pferde */
  #faq{ order:14; }                                           /* Deine Fragen, meine Antworten */
  #preise{ order:15; }                                        /* Klare Preise */
  #schluss{ order:16; }                                       /* Vom Zuschauer zum Macher — CTA (B) ganz unten, NACH Preise (Inhaber 01.08.) */

  /* CTAs am Handy/Tablet-hochkant NUR an zwei Stellen (Inhaber 01.08., „lenken total ab"): die vier
     Sektions-CTAs (#vergleich/#weg/#testdrive/#beratung) raus; die Hero-Pill ist schon
     visibility:hidden. Bleiben: .cta-zwischen (A) + Schluss-Pill (B). */
  .aktions-zeile{ display:none; }

  /* Buch-Cover NUR Querformat/Desktop (Inhaber 01.08.): am Handy + Tablet-hochkant raus — nach der
     Bio wirkt es zusammenhanglos. Das Arbeitsfoto-Loop bleibt. */
  #herkunft .buch-cover{ display:none; }

  /* Luft unter dem Mockup: der Puls-Hinweis „hier testen" (absolut, top:100%) darf nicht an der
     naechsten Ueberschrift kleben (Inhaber 01.08.). */
  #hero .phone{ margin-bottom:38px; }

  /* Galerie-Foto (626x1028) im testdrive-Rahmen nicht oben/unten beschneiden */
  #testdrive .stage-frame--foto{ aspect-ratio:626/1028; }
}

/* ====== §3-Tueren <=900px: VOLLE Beschreibung sichtbar (Inhaber 31.07.) ==============
   „Ganz besonders die Beschreibungen sind wichtig" + „Beschreibung kommt vor dem Foto".
   Jede Tuer eroeffnet ihren Funktions-Block MIT dem erklaerenden Text. Die Tuer war eine feste
   Fotokachel (aspect-ratio 1108/1962 + overflow:hidden), die die im <a> steckende .tuer-beschr
   abschnitt. Jetzt: Karte waechst, Reihenfolge Titel -> Zeile -> Beschreibung -> Foto; das Foto
   wandert aus dem Karten-Hintergrund in .tuer-visual (warm) bzw. das Vorher/Nachher-Video wird
   die Kachel (kuehl). Verifiziert @390: warme Tuer 1040px, Beschreibung komplett sichtbar, kein
   H-Scroll. Feinschliff (Kachelhoehe/Farben/Abstaende) live. */
@media (max-width:900px){
  #tueren .tuer{ aspect-ratio:auto; overflow:visible; height:auto; padding:22px 20px; }
  #tueren .tuer::after{ display:none; }                       /* Lesbarkeits-Verlauf weg — Text nicht mehr auf Foto */
  #tueren .tuer--warm{                                        /* nur Toenung/Sheen; Foto wandert in .tuer-visual */
    background-image:linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  }

  #tueren .tuer-titel{ order:1; }
  #tueren .tuer-zeile{ order:2; margin-bottom:6px; }
  #tueren .tuer-beschr{
    order:3; display:block; white-space:pre-line;
    color:rgba(255,255,255,0.88); font-size:0.94rem; line-height:1.5;
  }

  /* Fotokachel UNTER dem Text */
  #tueren .tuer-visual{
    order:4; display:block;
    width:100%; height:auto; aspect-ratio:1108/1000;
    margin:14px 0 0; border-radius:14px;
  }
  /* Grid-PNG ist 1108x1962 (hochkant) -> Kachel auf das ECHTE Bildverhaeltnis, sonst schneidet
     die kurze 1108/1000-Kachel + cover das Grid unten ab (Inhaber 01.08.: „voll sichtbar"). */
  #tueren .tuer--warm .tuer-visual{ aspect-ratio:1108/1962; background:url("../fotos/tueren/tuer-links_grid.png") center / contain no-repeat; }
  /* kuehle Tuer: Vorher/Nachher-Video wird die Kachel (statt absolutem Vollflaechen-BG) */
  #tueren .tuer--kuehl .tuer-visual{ display:none; }
  #tueren .tuer--kuehl .tuer-video{
    position:static; order:4; display:block;
    width:100%; height:auto; aspect-ratio:1108/1000;
    object-fit:cover; margin:14px 0 0; border-radius:14px;
  }
}

/* ============ §3 „Zwei Tueren" — DESKTOP-SPLIT + Beschreibungen (Inhaber 2026-07-30) ============
   Weiterentwicklung des Splits vom 29.07. (Tester erkannten die zwei App-Funktionen
   nicht): Ueberschrift zentriert mit viel Luft darunter (Fotos ruecken runter -> die
   Ueberschrift kommt frei, „geht nicht mehr unter"); beide Foto-Karten an die
   Container-Raender; in der Mitte je eine Text-SPALTE (Titel + Unterzeile +
   ausfuehrliche Beschreibung), oben am Fotorand beginnend, linksbuendig; dazwischen
   eine DEZENTE Trennlinie (Gewicht wie der Kartenrahmen = leichte Betonung, keine
   harte Trennung).
   Technik: Titel/Zeile/Beschreibung liegen im Wrapper .tuer-textblock INNERHALB der
   <a>-Karten und werden als ein absoluter Block in die Mitte gezogen -> KEIN DOM-Umbau.
   .tuer-textblock ist sonst display:contents -> <=1479px (Handy/Tablet + mittlerer
   Desktop) unveraendert, Beschreibung dort ausgeblendet. Scope 1480 = ab da Container
   fix 1400 (Inhalt 1320).
   ⚠ ENTWURF: der gelieferte Text ist laenger als die Fotos -> die Spalte ragt unter
   das Foto; Inhaber sagte, die Texte sind noch nicht final (Detail kann in Folge-
   sektionen wandern). Werte sind zum Draufschauen, nicht endgueltig. */
@media (min-width:1480px){
  /* Ueberschrift eine Zeile hoeher (padding-top runter); die Spalten-Titel bleiben
     auf ihrer Hoehe (grid margin-top faengt es auf) -> groesserer Abstand zwischen
     Hauptueberschrift und den zwei Spaltentiteln (Inhaber 30.07.). */
  #tueren{ padding-top:80px; }
  #tueren h2{ text-align:center; margin-top:0; }

  /* Fotos bleiben 340px; Foto-OBERKANTE auf Hoehe der Titel-Unterkante (Inhaber 30.07.:
     „die untere Linie der Titelzeile ist die obere Linie vom Foto") -> Fotos per
     margin-top unter die Titel geschoben, oben buendig mit dem Beschreibungs-Anfang.
     align-items:flex-start; min-height traegt die hohe Textspalte (sonst clippt .sektion). */
  #tueren .tueren-grid{
    position:relative;
    justify-content:space-between;
    align-items:flex-start;
    gap:0;
    margin-top:114px;
    min-height:756px;          /* traegt die hohe linke Textspalte (Text top:6 + ~744) */
  }
  #tueren .tuer{
    width:340px;
    margin-top:84px;           /* DE-Foto-Anker: Foto-OBERKANTE auf die Einleitungs-Unterkante,
                                  mit neuer Abstands-Ordnung nachgezogen (Inhaber 31.07.):
                                  6 + Titel 28.08 + 25 + Einleitung 25.09 = 84 (war 73) */
    overflow:visible;          /* Textspalte ragt aus der Karte zur Mitte */
  }
  /* EN behaelt die Fotoposition der abgenommenen EN-Layout-Runde (31.07., 73px)
     samt Textblock-Offset -67 — der Anker "Foto = Einleitungs-Unterkante" ist ein
     DE-Gesetz (1h), EN-Spalten sind 2-zeilig und laegen sonst deutlich tiefer. */
  :root:lang(en) #tueren .tuer{ margin-top:73px; }
  :root:lang(en) #tueren .tuer-textblock{ top:-67px; }
  #tueren .tuer::after{ display:none; }   /* Verlauf weg (Text nicht mehr auf Foto) */

  /* Text-SPALTE oben verankert: Titel + Unterzeile oben (beide Spalten gleich hoch),
     Beschreibung darunter. Hoehe waechst mit dem Text (Inhaber prueft, wie viel
     v.a. der linke Text zulegt). Der Block liegt absolut IN der Karte, die per
     margin-top:73 nach unten geschoben ist -> top:-67 hebt den Text wieder auf die
     grid-Oberkante (73 - 67 = 6), damit die Titel oben stehen und NICHT mit dem Foto
     mitwandern. (Foto-Oberkante 73 = Unterkante der Titelzeile.) */
  #tueren .tuer-textblock{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:-78px;                 /* = -(margin-top 84 - 6): Titel bleiben auf grid+6,
                                  waehrend die Karte fuer den DE-Foto-Anker tiefer sitzt */
    width:280px;
    z-index:1;
  }
  /* Abstands-Ordnung (Inhaber 31.07., erst EN, dann "auch fuer Deutsch"):
     (1) 2-zeiliger Titel nicht "auseinandergerissen" -> line-height 1.3 (halbe
         Zeile Abstand statt 1.6);
     (2) Titel -> Einleitung EINE Zeile Abstand (25px = Einleitungs-Zeilenhoehe),
         Einleitung -> Fliesstext nur eine HALBE Zeile (12px). */
  #tueren .tuer-titel{ line-height:1.3; }
  #tueren .tuer-zeile{ margin-top:25px; }
  #tueren .tuer-beschr{
    display:block;
    margin-top:12px;
    font-size:0.94rem;
    line-height:1.62;
    color:rgba(255,255,255,0.75);
    white-space:pre-line;      /* \n aus dem i18n-Wert -> Zeilenumbrueche */
  }
  /* NUR EN: beide Spalten beginnen auf gleicher Hoehe, linke Spalte = Referenz
     (Titel + Einleitung dort 2-zeilig): Titel- und Einleitungs-Slot per min-height
     auf die 2-zeilige linke Hoehe (2.6em = 2 x 1.3 Titelzeilen, 3.2em = 2 x 1.6
     Einleitungszeilen) -> rechte 1-zeilige Spalte rueckt auf dieselben Startlinien.
     DE ist beidseitig 1-zeilig und braucht keine Slots. */
  :root:lang(en) #tueren .tuer-titel{ min-height:2.6em; }
  :root:lang(en) #tueren .tuer-zeile{ min-height:3.2em; }
  /* Text mit SICHTBAREM Abstand zur Mittellinie (Inhaber: „einige Pixel Abstand";
     6px klebten zu sehr): -303px = Karten-Innenkante bis ~18px vor die Achse (660);
     dadurch ~22px Luft zwischen Foto und Text. */
  #tueren .tuer--warm .tuer-textblock{ right:-303px; }
  #tueren .tuer--kuehl .tuer-textblock{ left:-303px; }

  /* DEZENTE Trennlinie ueber die Texthoehe (rgba .15 = Gewicht wie Kartenrahmen).
     Leichte Betonung, keine harte Trennung; kein Blau/Verlauf. */
  #tueren .tueren-grid::after{
    content:"";
    position:absolute;
    left:50%; top:6px;
    width:1px; height:744px;
    background:rgba(255,255,255,0.15);
  }

  /* #weg „Dein Weg durch die App": Sektion war mit 880px klar kuerzer als die Nachbarn
     (~980–1105) und top-lastig (Ueberschrift am Top-Padding, kaum Luft unter dem Knopf),
     waehrend die anderen Sektionen ihren Inhalt nach unten schieben und ober/unterhalb
     Luft haben. Darum min-height wie die Nachbarn + Inhalt vertikal balanciert
     (Inhaber 30.07.). .container zentriert weiter per margin:0 auto (Flex-Auto-Margin). */
  #weg{
    min-height:1035px;              /* ~Hoehe der Nachbarn (vergleich 1035) */
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  /* Eine Zeile Abstand Ueberschrift -> Intro (Inhaber 30.07.) UND der gewuenschte Umbruch
     nach dem ersten Satz: white-space:pre-line rendert das \n aus landing.js (weg.p1).
     <=1479px bleibt normal (kein erzwungener Umbruch, kein Extra-Abstand) = Handy/Tablet
     unveraendert. */
  #weg .weg-intro{
    margin-top:1.6em;               /* ~eine Zeile (line-height 1.6) */
    white-space:pre-line;
  }
}

/* ============ #herkunft TABLET-QUER (901–1689): 2 gleichmaessige Foto-Spalten ============
   Inhaber 01.08.: im Querformat sassen Arbeitsfoto (ganz links) + Buch-Cover (Mitte-links)
   mit ~385px Leerraum rechts; und die Ueberschriften gehoeren jeweils UEBER ihr Bild
   („The hoofolution story" ueber das Arbeitsfoto, „View book" ueber das Cover — Inhaber-Wahl
   „die zwei Links hoch"). CSS-only: .herkunft-grid wird ein 2-Spalten-Raster; der Text-Wrapper,
   die Links-<p> und .herkunft-visuals werden per display:contents durchsichtig -> Intro
   (h2/Bio/Signatur), beide Links und beide Bilder sind direkte Grid-Items. Intro spannt oben
   ueber beide Spalten; Story-Link (1.) + Arbeitsfoto = Spalte 1, Buch-Link (2.) + Cover =
   Spalte 2, je zentriert -> gleichmaessig verteilt. NUR im Band; >=1690 (Transform-Layout,
   abgenommen) und <=900 (gestapelt, Cover aus) unberuehrt. Abstaende 44/16px = fein justierbar. */
@media (min-width:901px) and (max-width:1689px){
  #herkunft .herkunft-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:40px;
    align-items:start;
  }
  #herkunft .herkunft-grid > div:first-child,
  #herkunft .herkunft-links,
  #herkunft .herkunft-visuals{ display:contents; }               /* Wrapper aufloesen -> direkte Grid-Items */

  #herkunft h2{ grid-column:1 / -1; grid-row:1; }                /* Intro volle Breite, linksbuendig */
  #herkunft .herkunft-bio{ grid-column:1 / -1; grid-row:2; }
  #herkunft .herkunft-signatur{ grid-column:1 / -1; grid-row:3; }

  #herkunft .herkunft-links a:nth-of-type(1){ grid-column:1; grid-row:4; justify-self:center; margin-top:44px; }  /* Story ueber Arbeitsfoto */
  #herkunft .herkunft-links a:nth-of-type(2){ grid-column:2; grid-row:4; justify-self:center; margin-top:44px; }  /* Buch ueber Cover */

  #herkunft .arbeitsfoto{ grid-column:1; grid-row:5; justify-self:center; margin-top:16px; }
  #herkunft .buch-cover{ grid-column:2; grid-row:5; justify-self:center; margin-top:16px; }
}

/* ============ HERO-TOUR — Mobile-Feinlage (Conversion-Runde 26.08.) ============
   Auf schmalen Schirmen fuellt das Tour-Handy fast die Breite; der Schliessen-
   Knopf sass 56px NEBEN dem Handy und ragte aus dem Bild (Messung: -22px).
   Mobil wandert er AUF die Handy-Ecke. Desktop/Tablet bleiben unberuehrt. */
@media (max-width: 640px){
  .tour-zu{ top:8px; right:8px; }
}