/* ============================================================
   responsive-pages.css — Mobile-Overrides der UNTERSEITEN
   (method / insider / book / app). ADDITIV, LETZTE Kaskaden-
   Schicht: laedt NACH base.css / sections.css / [page].css, darum
   gewinnt sie. Desktop (> 640px) bleibt der abgenommene Fix-1920-
   Stand voellig unberuehrt — hier stehen NUR Mobile-Overrides.

   Gilt bewusst NICHT fuer die Startseite (index.html): die hat einen
   eigenen statischen <header>, laedt weder base.css noch components.js,
   und bringt ihre eigene responsive.css mit. Diese Datei ist NICHT dort
   verlinkt.

   RUNDE 1 = gemeinsames FUNDAMENT aller vier Unterseiten:
   Kopf/Hamburger (aus components.js) + Container-Luft + Footer. Die
   Per-Page-Sektionen (Hero-Skalen, Grids, absolute Positionen in den
   [page].css) bekommen ihren Feinschliff Seite fuer Seite in RUNDE 2 —
   dort koennen einzelne Sektionen noch ueberlaufen, das ist erwartet.

   Der Hamburger ist 1:1 aus der abgenommenen .app gespiegelt
   (site-app/assets/css/responsive.css), nur die Klassennamen an die
   .com-Kopfstruktur angepasst: .kopf-burger -> .site-header__burger,
   .kopf-nav -> .site-nav, .offen -> .is-open, .kopf-sprachen -> .lang-switch.
   ============================================================ */

/* Hamburger-Button — Basis AUSSERHALB der Media-Query (sonst waere der
   <button> auf Desktop sichtbar). Desktop: display:none; der Mobile-Block
   schaltet ihn auf inline-flex. Drei Striche -> X bei aria-expanded=true. */
.site-header__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;
  cursor:pointer;
}
.site-header__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;
}
.site-header__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-header__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.site-header__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }


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

  /* --- Container: Innen-Luft schmaler. max-width ist schon fluid
         (var(--container) via base.css), darum reicht das Padding. --- */
  .container{ padding:0 18px; }

  /* --- Bau-/Dev-Panels der Unterseiten mobil ausblenden, falls sie
         (ungegatet) sichtbar sind — sie ueberlagern sonst den Inhalt.
         Bekanntes Muster #lc wie Startseite/.app; schadet nicht, wenn
         die Panels ohnehin ?panel-gegatet sind. --- */
  #lc{ display:none !important; }

  /* ============================================================
     HEADER: 3-Zonen-Grid -> einfache Flex-Leiste.
     base.css platziert brand/nav/lang per grid-column im
     .site-header__inner; display:flex macht diese Platzierungen
     wirkungslos (grid-column wirkt nur im Grid-Container). Ergebnis:
     Wortmarke links (margin-right:auto), Sprachen + Burger rechts;
     die Nav wandert ins Aufklapp-Panel (absolut, unten).
     ============================================================ */
  .site-header__inner{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:60px;
  }
  .site-header__brand{ margin-right:auto; }   /* schiebt Sprachen + Burger nach rechts */
  .site-header__burger{ display:inline-flex; }
  .lang-switch{ flex:0 0 auto; }              /* bleibt sichtbar (wie im Screenshot) */

  /* Nav -> aufklappbares Panel unter dem Header (Toggle per Burger, components.js).
     Panel-Grund = Marken-Dunkelblau (var(--blue-deep)); den exakten Header-Ton
     ggf. in Runde 2 angleichen. Nav-Links sind hell (base.css). */
  .site-nav{
    position:absolute;
    left:0; right:0; top:100%;
    z-index:20;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--blue-deep);
    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;
  }
  .site-nav.is-open{ display:flex; }
  .site-nav a{
    min-height:52px;
    display:flex;
    align-items:center;
    padding:0 2px;
    font-size:1.06rem;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .site-nav a:last-child{ border-bottom:0; }

  /* ---------- Footer (umbricht schon; nur Tap-Luft + engere Luecken) ---------- */
  .site-footer__nav{ gap:14px 18px; }
  .site-footer__nav a{ padding:6px 2px; }
  .site-footer__meta{ flex-wrap:wrap; row-gap:8px; }
}


/* Handy-Fassung des Drei-Farben-Intros (method.html): auf dem Desktop aus.
   Basis AUSSERHALB der Media-Query, sonst waere der Absatz dort sichtbar. */
.m-colors__intro--klein{ display:none; }


/* ============================================================
   RUNDE 2 · SEITE 1 von 4 — /method, HANDY
   ------------------------------------------------------------
   Gebaut LAENGS: diese Seite komplett bis zur Abnahme, dann die naechste.
   (Runde 2a war quer gebaut — ein Wildcard-Raster ueber alle vier Heros —
   und wurde deshalb revertiert. Hier stehen ausschliesslich benannte
   Selektoren.)

   KEIN `!important` noetig und keins verwendet: das Dev-Panel steigt ohne
   ?panel=1 aus (_dev-method-panel.js:20), es gibt auf der Seite also keine
   Inline-Styles (nachgemessen: 0). Diese Datei laedt als letztes Stylesheet
   und gewinnt allein ueber die Reihenfolge.

   Grundmuster:
   - Positions-Variablen NULLEN statt Transforms bekaempfen (--m-*).
   - Feste px-Breiten fluid machen. Beide Bildkaesten tragen aspect-ratio,
     darum reicht width:100% — die Hoehe folgt, kein JS.
   - Sektions-Polster runter: einspaltig gestapelt wird die Seite ohnehin
     laenger, die Desktop-Werte (112/96) wirken am Handy wie Leerlauf.
   - NICHT angefasst: .proof-layer{transform:scale(1.01)} (kaschiert die
     Kanten waehrend der Ueberblendung), die FAQ-Pfeil-Drehung und der
     Hover-Pfeil der Kontext-Links.

   ⚠ FESTE UMBRUECHE: .m-hero__lead (EN) und .m-concept__p--lines tragen vom
   Desktop gewaehlte Zeilenumbrueche. Auf ~340px Textbreite zerfaellt jede
   dieser Zeilen in zwei bis drei — das Ergebnis waere ein ausgefranster
   Block. Beide stehen hier deshalb auf white-space:normal, brechen am Handy
   also von selbst. Der Desktop-Zeilenfall bleibt unberuehrt. Dem Inhaber
   gemeldet; eigene Handy-Umbrueche kann er wie beim Drei-Farben-Intro
   jederzeit diktieren.
   ============================================================ */
@media (max-width: 640px){

  /* ---------- Schrift-Skala (tokens.css:52-61) ----------
     Einmal zentral kleiner; wirkt auf alle vier Unterseiten und spart pro
     Seite ein Dutzend Einzelregeln. --t-body bleibt bei 17px: „Content-
     Sektionen lesbar" ist Inhaber-Richtlinie, nur die Schau-Groessen
     schrumpfen. Die Startseite laedt diese Datei nicht (verifiziert). */
  :root{
    --t-hero:2.6rem;          /* 42px, war 76 */
    --t-display:2.1rem;       /* 34px, war 61 */
    --t-h1:1.75rem;           /* 28px, war 39 */
    --t-h2:1.5rem;            /* 24px, war 31 */
    --t-h3:1.3rem;            /* 21px, war 25 */
    --t-kicker-hero:1.5rem;   /* 24px, war 39 */
    --t-lead:1.125rem;        /* 18px, war 20 */
  }

  /* ---------- Positions-Variablen des /method-Heros auf 0 ----------
     Die Transform-Regeln in method.css bleiben unangetastet — sie rechnen
     nur noch mit Null. So muss hier nichts ueberschrieben werden, und das
     Dev-Panel funktioniert auf dem Desktop weiter wie bisher. */
  :root{
    /* Kicker NICHT genullt: er behaelt seinen Aufwaertsversatz (Inhaber 25.07.,
       CI-Merkmal). Am Desktop bricht er mit -160/-75 nach links UND oben aus der
       Textspalte aus; am Handy gibt es links keinen Platz mehr, dort uebernimmt
       text-align:left weiter unten die Links-Haelfte, und hier bleibt der
       Aufwaertsversatz — verkleinert im Verhaeltnis zur kleineren Schrift.
       Stellschraube fuer „mehr/weniger versetzt": nur dieser eine Wert. */
    --m-kicker-x:0px; --m-kicker-y:-14px;
    --m-head-x:0px;   --m-head-y:0px;
    --m-w1-x:0px;     --m-w1-y:0px;
    --m-w2-x:0px;     --m-w2-y:0px;
    --m-w3-x:0px;     --m-w3-y:0px;
    --m-lead-x:0px;   --m-lead-y:0px;
    --m-cta-x:0px;    --m-cta-y:0px;
  }

  /* ============ 1 · HERO ============
     Ueberarbeitet nach Inhaber-Abnahme 25.07. („alles gequetscht", „Die Methode
     zu weit unten", „Fließtext und CTA kleben aneinander", unten ein breiter
     weisser Streifen) und nach seinem Grundsatz fuer ALLE Unterseiten:
     der erste Bildschirm soll komplett im Marken-Blau stehen — „das sieht
     einfach wesentlich edler und ruhiger aus".

     min-height:100lvh statt einer Rechnung wie auf der Startseite: dort musste
     der gap zum Huf-Block und das Fuss-Polster abgezogen werden, hier sitzt
     nichts ueber dem Text. Der Kopfbalken (61px, sticky und ebenfalls blau)
     kommt oben drauf — die Buehne reicht damit sicher ueber den Falz, und der
     helle Streifen kann nicht mehr ins Bild kommen.
     lvh (grosse Viewporthoehe) NICHT dvh: dvh springt, wenn Safari beim
     Scrollen die Adressleiste ein- und ausklappt. */
  .m-hero{
    padding:48px 0 64px;                       /* war 88 oben — Kicker rueckt hoch */
    min-height:100lvh;
  }
  /* Mittig (Inhaber 25.07.: „Funktion schlägt Optik sollte wahrscheinlich doch
     mittig stehen"). Bewusst die GANZE Spalte, nicht nur die Ueberschrift:
     eine zentrierte Zeile ueber linksbuendigem Text liest sich unruhig, und die
     abgenommene Startseite ist ebenfalls durchgehend mittig. Falls doch nur die
     Ueberschrift gemeint war, ist es eine Zeile Aenderung. */
  .m-hero__copy{ max-width:none; text-align:center; }

  /* Kicker BLEIBT links und leicht nach oben versetzt, auch wenn der Rest der
     Spalte mittig steht (Inhaber 25.07.: „das haben wir CI-mäßig immer auf dem
     Desktop, das würde ich gerne auf dem Mobile beibehalten"). Der Versatz nach
     oben steckt in --m-kicker-y weiter oben; hier nur die Links-Ausrichtung
     gegen das text-align:center der Spalte. */
  .m-hero__kicker{
    margin:0 0 24px;
    margin-left:0;                             /* -0.12ch Feinversatz raus */
    text-align:left;
  }

  /* 77px sind hart in method.css gesetzt und ignorieren die Token-Skala oben. */
  .m-hero__headline{
    font-size:2.55rem;                         /* war 77px */
    line-height:0.92;
    letter-spacing:-0.055em;
    align-items:center;                        /* war flex-start */
  }
  /* Treppe faellt mobil weg — zentrierte Woerter koennen nicht gleichzeitig
     gestaffelt sein. Die Desktop-Staffelung steckt in margin-left UND transform;
     die Transforms sind oben genullt, die margins muessen hier mit weg, sonst
     bliebe eine halbe Treppe stehen. nowrap raus als Ueberlaufschutz.
     ⚠ VETO-Zeilen fuer eine gestaffelte Handy-Treppe: align-items oben und die
     drei margin-left-Zeilen loeschen. */
  .m-hero__word{ white-space:normal; }
  .m-hero__word.w1,
  .m-hero__word.w2,
  .m-hero__word.w3{ margin-left:0; }

  /* Abstaende mit Gefaelle statt drei fast gleicher Werte (war 20/26/30 — genau
     das las sich als „gequetscht"): Kicker bleibt eng an der Ueberschrift,
     danach oeffnet es sich stufenweise. */
  .m-hero__lead{
    margin:40px 0 0;                           /* war 26 */
    max-width:none;
    white-space:normal;                        /* s. „FESTE UMBRUECHE" im Kopf */
  }
  .m-hero__actions{
    margin-top:56px;                           /* war 30 — „kleben aneinander" */
    flex-wrap:wrap;
    justify-content:center;
  }

  /* --- ES-Feinschliff /method-Hero (Inhaber-Diktat 02.08., Handy-Sichtung) ---
     Block ab "Función" EINE Headline-Zeile tiefer (2.55rem × 0.92);
     Folge-Abstaende unveraendert — alles darunter rutscht mit.
     Lead pre-line NUR fuer ES: die diktierte Naht (no empieza / con la
     herramienta. / Empieza…) hat max. 31ch je Zeile und traegt am Handy —
     DE/EN bleiben auf white-space:normal (Desktop-Naehte zerfransen dort). */
  :lang(es) .m-hero__headline{ margin-top:2.35rem; }
  :lang(es) .m-hero__lead{ white-space:pre-line; }

  /* ============ 2 · KONZEPT ============ */
  .m-concept{ padding:64px 0 56px; }           /* war 112/69 */
  .m-concept__grid{
    grid-template-columns:minmax(0, 1fr);      /* war 720px 460px */
    gap:44px;
  }
  .m-concept__p{ max-width:none; }
  /* width:max-content machte den Absatz so breit wie seine laengste Zeile
     (~790px) — am Handy die groesste einzelne Ueberlaufquelle der Sektion. */
  .m-concept__p--lines{ white-space:normal; width:auto; max-width:none; }

  .m-context-links{ margin-top:30px; gap:8px 24px; flex-wrap:wrap; }

  /* Randspalte wird zum normalen Block: der 64/27-Versatz war eine
     Desktop-Optikkorrektur und schoebe die Spalte hier aus dem Bild. */
  .m-concept__origin{
    margin-top:4px;
    padding-left:18px;
    transform:none;
  }

  /* ============ 3 · DREI-FARBEN-SYSTEM ============ */
  .m-colors{ padding:64px 0 56px; }            /* war 112/96 */
  .m-colors__header{ margin-bottom:32px; }

  /* Texttausch (Inhaber 25.07.): lange Fassung raus, Kurzfassung rein.
     pre-wrap statt pre-line, damit die Luecke zwischen „Rot = Messer" und
     „Grün = Raspel" stehen bleibt — pre-line wuerde sie zu einem einzigen
     Leerzeichen zusammenziehen. */
  .m-colors__intro--gross{ display:none; }
  .m-colors__intro--klein{
    display:block;
    white-space:pre-wrap;
    max-width:none;
  }

  .m-colors__grid{
    grid-template-columns:minmax(0, 1fr);      /* war 3 x 418px */
    gap:16px;
  }
  .m-color-card{ padding:24px 22px 26px; }
  .m-color-card__text{ min-height:0; }         /* 4.7em Leerslot-Reserve wird hier nicht gebraucht */

  /* ============ 4 · SOHLE ============ */
  .m-read{ padding:56px 0 64px; }              /* war 96/112 */
  .m-read__proof{ margin-top:64px; }           /* war 112 */

  .m-sole__grid{
    grid-template-columns:minmax(0, 1fr);      /* war 560px 640px */
    gap:28px;
  }
  .m-sole__media{ width:100%; border-radius:20px; }   /* aspect-ratio 4/5 traegt die Hoehe */
  .m-sole__copy{
    margin-top:0;                              /* 180px war der Hoehenausgleich zum Bild daneben */
    max-width:none;
  }
  .m-sole__p{ max-width:none; }

  /* ============ 5 · PROOF-BUEHNE ============ */
  /* Der flush-Container traegt die 1400px, die das Desktop-Grid braucht. */
  .m-container-flush{
    width:100%;
    max-width:100%;
    padding:0 18px;                            /* method.css setzt hier 0 */
  }
  .proof-grid{
    grid-template-columns:minmax(0, 1fr);      /* war 559px 805px */
    gap:24px;
  }
  .proof-copy{
    max-width:none;
    justify-self:start;                        /* war end — in einer Spalte klebt es sonst rechts */
    margin-top:0;                              /* 189px Hoehenausgleich raus */
    padding-top:0;
    transform:none;                            /* hartes translateX(18px), nicht variablengesteuert */
  }
  /* „Sieh, wie es wirkt." in EINE Zeile (Inhaber 25.07.) — die Treppe faellt
     hier ganz weg. Das Flex-Column-Layout wird zur Zeile; zwischen Flex-Kindern
     wird der Wortzwischenraum aus dem Markup ignoriert, darum ein gap.
     Groesse: 19 Zeichen muessen bei 375px-Geraeten in 339px passen — der Wert
     ist gemessen, nicht geschaetzt.
     margin oben und unten je eine Zeilenhoehe (0.95em = line-height): so bleibt
     die verbleibende Zeile genau dort stehen, wo vorher „wie es" stand, und der
     Text darunter verschiebt sich nicht — Inhaber: „den Abstand zwischen den
     Fließtexten würde ich lassen". */
  .proof-title{
    font-size:2.05rem;                         /* gemessen: 293px Text auf 339px Platz beim
                                                  engsten Geraet (375) = 46px Reserve */
    line-height:0.95;
    letter-spacing:-0.04em;
    flex-direction:row;
    align-items:baseline;
    gap:0.26em;
    margin:0.95em 0;
  }
  .proof-word{ white-space:nowrap; }
  .proof-word.how{ margin-left:0; }            /* Treppen-Versatz raus */
  .proof-line{ max-width:none; font-size:1.15rem; }
  .proof-detail{ max-width:none; }

  .proof-stage{
    width:100%;                                /* war 610px */
    justify-self:stretch;                      /* war end */
    border-radius:20px;
  }
  /* Chips und Notizen sitzen absolut in der Buehne — auf der kleinen Flaeche
     wuerden sie sonst mehrzeilig stapeln und das Bild zudecken. */
  .proof-topbar{ top:12px; left:12px; right:12px; gap:6px; }
  .proof-chip{ height:26px; padding:0 9px; font-size:0.62rem; letter-spacing:0.06em; }
  .proof-bottom{ left:12px; right:12px; bottom:12px; gap:6px; }
  .proof-note{ min-height:28px; padding:0 9px; font-size:0.7rem; }

  /* ============ 6 · FALLVERLAUF + STIMMEN ============ */
  .m-case{ padding:64px 0 56px; }              /* war 112/96 */
  .m-case__header{ margin-bottom:32px; }

  .m-case-card{
    grid-template-columns:minmax(0, 1fr);      /* war 560px 540px */
    width:auto;                                /* war fix 1100px */
    max-width:100%;
    margin:0;                                  /* auto-Zentrierung wird ohne feste Breite ueberfluessig */
  }
  /* Trennlinie folgt der Stapelung: rechts -> unten */
  .m-case-card__thumb{
    border-right:0;
    border-bottom:1px solid rgba(0,0,0,0.06);
  }
  .m-case-card__body{ padding:26px 22px 28px; }
  .m-case-card__text{ min-height:0; }

  .m-voices{
    margin-top:48px;                           /* war 96 */
    grid-template-columns:minmax(0, 1fr);      /* war 2 x 560px */
    gap:36px;                                  /* war 120 */
  }
  .m-voice__text{ min-height:0; }

  /* ============ 7 · FAQ ============ */
  .m-faq{ padding:64px 0 56px; }               /* war 112/96 */
  .faq-header{ margin-bottom:32px; }
  .faq-title{ font-size:1.45rem; }
  .faq-question{ font-size:1rem; padding:16px 0; min-height:56px; }
  /* Der Desktop-Deckel von 480px schnitt die erste Antwort ab: bei ~340px
     Textbreite ist sie 607px hoch (@393) bzw. 634px (@375) — alle sechs
     Antworten in DE und EN nachgemessen, das ist das Maximum.
     800px statt eines noch grosszuegigeren Werts mit Absicht: max-height
     animiert immer die volle Distanz. Bei einem Deckel weit ueber dem
     Inhalt laeuft eine kurze Antwort schon nach einem Bruchteil der
     0,35 s vollstaendig sichtbar und der Rest der Zeit passiert nichts —
     das Aufklappen wirkt dann abgehackt. 800 laesst ueber der laengsten
     Antwort noch 166px Luft fuer laengere Uebersetzungen und haelt die
     Bewegung ruhig. */
  .faq-item.open .faq-answer{ max-height:800px; }

  /* ============ 8 · ABSCHLUSS-CTA ============ */
  .m-cta{ padding:56px 0 64px; }               /* war 112/112 */
  .m-cta__title{ max-width:none; }
  .m-cta__actions{ margin-top:32px; flex-wrap:wrap; justify-content:center; gap:12px; }
}


/* ============================================================
   RUNDE 2 · SEITE 2 von 4 — /book, HANDY
   ------------------------------------------------------------
   Gleiches Rezept wie /method (Seite 1, abgenommen 25.07.):
   Positions-Variablen nullen · feste px-Breiten fluid · Sektions-
   Polster runter · benannte Selektoren, kein `!important`
   (_dev-book-panel.js:20 steigt ohne ?panel=1 aus -> keine Inline-Styles).

   Uebernommene Inhaber-Entscheide von /method:
   - Hero mittig, ABER der Kicker bleibt links und leicht nach oben
     versetzt („das haben wir CI-mäßig immer auf dem Desktop").
     Gleicher Versatz wie dort (-14px), damit alle vier Unterseiten
     denselben Kopf haben.
   - Erster Bildschirm komplett im Marken-Blau („edler und ruhiger") —
     min-height:100lvh, lvh NICHT dvh.
   - Desktop-Treppen tragen am Handy nicht: die drei Hero-Woerter
     stehen zentriert untereinander statt gestaffelt.

   ⚠ SCHWERSTER EINZELFEHLER dieser Seite war --b-cta-x:1276px: der
   Amazon-Knopf im Hero stand am Handy bei x=1294 und war wegen
   .section{overflow:hidden} (sections.css:10) UNSICHTBAR — nicht
   scrollbar, einfach weg. Ein Verkaufsknopf auf der Buchseite.
   Nachgemessen ist er jetzt in beiden Sprachen im Bild.

   ⚠ NICHT GEBAUT: .b-sample__stage / __figure / __caption (die
   Doppelseiten-Figur). Diese Selektoren haben in book.html kein
   Element — die Leseprobe laeuft als Text-Route B. Mobile Regeln dafuer
   waeren tote Regeln; beim spaeteren Bild-Einbau mitbauen.
   ============================================================ */
@media (max-width: 640px){

  /* ---------- Positions-Variablen des /book-Heros auf 0 ----------
     Die Transform-Regeln in book.css bleiben unangetastet, sie rechnen nur
     noch mit Null. Das Dev-Panel funktioniert auf dem Desktop weiter. */
  :root{
    /* Kicker NICHT genullt (CI, s. Kopf): nur der Links-Ausbruch faellt weg,
       der Aufwaertsversatz bleibt. Stellschraube fuer „mehr/weniger
       versetzt": nur dieser eine Wert. */
    --b-kicker-x:0px; --b-kicker-y:-14px;
    --b-w1-x:0px;     --b-w1-y:0px;
    --b-w2-x:0px;     --b-w2-y:0px;
    --b-w3-x:0px;     --b-w3-y:0px;
    --b-lead-x:0px;   --b-lead-y:0px;
    --b-cta-x:0px;    --b-cta-y:0px;    /* war 1276/-85 -> Knopf ausserhalb des Bildes */
    --b-cover-x:0px;  --b-cover-y:0px;  /* .b-cover neutralisieren; die rotateY sitzt im __frame und bleibt */
  }

  /* ============ 1 · HERO + COVER ============ */
  .b-hero{
    padding:48px 0 64px;                       /* war 140/112 */
    min-height:100lvh;
  }
  /* Traegt am Desktop die 1400px des Cover-Grids (687+54+659) OHNE Innen-Padding. */
  .b-container-flush{
    width:100%;
    max-width:100%;
    padding:0 18px;                            /* book.css setzt hier 0 */
  }
  /* ---------- Reihenfolge im Hero (Inhaber 26.07.) ----------
     „Der CTA gehört unter das Foto vom Buch." Am Desktop stehen Text und Cover
     NEBENeinander, der Knopf sitzt frei rechts — dort bleibt alles, wie es ist.
     Am Handy stapeln sich beide, und dann gehoert der Kaufknopf ans Buch.

     Der Knopf steckt im Markup INNERHALB der Textspalte, das Cover ist deren
     Geschwister — sie liegen also nicht im selben Layout-Kontext und `order`
     allein koennte sie nicht sortieren. display:contents loest die Textspalte
     auf: ihre Kinder werden selbst zu Grid-Zellen, danach sortiert `order`.
     text-align vererbt sich weiter (display:contents unterbricht die Vererbung
     nicht), das Markup bleibt unangetastet.
     Folge: der Grid-gap wuerde jetzt zwischen ALLEN Teilen gelten (auch zwischen
     Kicker und Ueberschrift). Deshalb gap:0 — die Abstaende stehen ohnehin
     schon als margins an den Einzelteilen. */
  .b-hero__grid{
    grid-template-columns:minmax(0, 1fr);      /* war 687px 659px */
    gap:0;                                     /* s.o.; war 54 */
  }
  .b-hero__copy{ display:contents; text-align:center; }
  .b-cover{ order:1; margin-top:72px; }        /* traegt jetzt den frueheren gap */
  .b-hero__actions{ order:2; }                 /* ans Ende: unter das Cover */

  .b-hero__kicker{ margin:0 0 32px; text-align:left; }   /* war 24 */

  /* 73px stehen hart in book.css (--b-head-size) und ignorieren die
     Token-Skala. Ueber die Klasse statt ueber die Variable, damit das
     Dev-Panel am Desktop unveraendert weiterschreibt. */
  /* line-height 1.02 statt 0.92 (Inhaber 26.07.): 0.82 vom Desktop gehoert zu einer
     Treppe aus versetzten Woertern, wo die Zeilen sich optisch nicht beruehren. Hier
     stehen drei zentrierte Zeilen exakt uebereinander — dieselbe Enge liest sich dann
     als Block. DE ist ohnehin dreizeilig, EN ebenfalls, es kostet also 3 x 4px. */
  .b-hero__headline{
    font-size:2.55rem;                         /* war 73px */
    line-height:1.02;                          /* war 0.82 */
    letter-spacing:-0.055em;                   /* war -0.095em */
    align-items:center;                        /* war flex-start */
  }
  /* Treppe faellt weg — zentrierte Woerter koennen nicht gestaffelt sein.
     Die Staffelung steckt in margin-left UND transform; die Transforms sind
     oben genullt, die margins muessen hier mit weg.
     nowrap BLEIBT (anders als bei .m-hero__lead): die laengste Zeile ist
     EN „hoof problems" und passt gemessen in die Spalte — ohne nowrap
     haette EN vier gestapelte Zeilen gegen DE's drei.
     ⚠ VETO-Zeilen fuer eine gestaffelte Handy-Treppe: align-items oben und
     die drei margin-left-Zeilen loeschen. */
  .b-hero__word.w1,
  .b-hero__word.w2,
  .b-hero__word.w3{ margin-left:0; }
  /* ES: ganze Treppe einen halben Punkt kleiner (Inhaber 02.08.) —
     „problemas del casco" lief mit nowrap sonst aus der Spalte. */
  :lang(es) .b-hero__headline{ font-size:2.5rem; }

  /* ⚠ book.hero.lead ist derzeit LEER (Inhalts-Phase). min-height:0 nimmt die
     reservierte Leerzeile raus; sobald der Slot Text bekommt, traegt er seine
     Hoehe selbst und die Abstaende stimmen weiter. */
  .b-hero__lead{ margin:40px 0 0; max-width:none; min-height:0; }
  .b-hero__actions{
    margin-top:48px;
    flex-wrap:wrap;
    justify-content:center;
  }

  /* Cover: Groesse ueber width + aspect-ratio, NICHT ueber scale() — scale wuerde die
     Layoutbox bei 361x540 lassen. height:auto ist Pflicht, sonst bleiben die 540px
     stehen und das Seitenverhaeltnis bricht.
     Die perspective/rotateY(-4deg) im __frame ist Design und bleibt. */
  .b-cover__frame{
    width:min(300px, 78vw);                    /* war 361px */
    height:auto;                               /* war 540px */
    aspect-ratio:1159 / 1733;                  /* echtes Cover-Verhaeltnis */
  }
  /* Band mitskaliert: 46px gehoerten zu 361px Cover, hier sind es 300px. */
  .b-cover__preview{ font-size:38px; }

  /* ============ 2 · PROLOG ============ */
  .b-prolog{ padding:56px 0 64px; }            /* war 80/96 */
  .b-prolog__col{ max-width:none; }
  .b-prolog__p{ max-width:none; }
  .b-prolog__links{ margin-top:18px; gap:8px 24px; flex-wrap:wrap; }

  /* ============ 3 · INHALTSVERZEICHNIS ============ */
  .b-toc{ padding:64px 0 56px; }               /* war 112/96 */
  .b-toc__header{ margin-bottom:32px; }        /* war 64 */
  .b-toc__list{ max-width:none; }

  /* Zwei Spalten statt drei: Nummer neben dem Kapiteltitel, der Kommentar
     darunter in derselben Spalte (also unter dem Titel eingerueckt).
     Asymmetrischer gap mit Absicht — der 36er galt auch zwischen den Zeilen
     und haette unter jedem Titel 36px Luft fuer den leeren Kommentar gelassen. */
  .b-toc__row{
    grid-template-columns:28px minmax(0, 1fr); /* war 90px 480px 1fr */
    gap:4px 14px;                              /* war 36 rundum */
    padding:20px 0;                            /* war 26 */
  }
  /* Feste 28px statt auto: jede Zeile ist ein EIGENES Grid, auto haette pro
     Zeile neu gemessen — die Ziffern sind nicht tabellarisch, die Titel standen
     dadurch auf 47/49/… px statt buendig. */
  /* ⚠ Alle fuenf book.toc.ch*_note sind derzeit LEER (Inhalts-Phase).
     min-height:0 nimmt die reservierte Zeile raus; sobald Kommentare
     kommen, stehen sie automatisch unter dem jeweiligen Titel. */
  .b-toc__note{ grid-column:2; min-height:0; }

  /* ============ 4 · LESEPROBE ============ */
  .b-sample{ padding:64px 0 56px; }            /* war 112/96 */
  .b-sample__header{ margin-bottom:32px; }     /* war 56 */
  .b-sample__excerpts{ max-width:none; }
  .b-excerpt{ padding:32px 0; }                /* war 44 */
  .b-excerpt__text{ max-width:none; }

  /* ============ 5 · APP-BENEFIT ============ */
  .b-app{ padding:64px 0 56px; }               /* war 112/96 */
  .b-app__cards{
    grid-template-columns:minmax(0, 1fr);      /* war 3 x 1fr */
    gap:16px;                                  /* war 28 */
    margin-top:32px;                           /* war 48 */
  }
  .b-app__card{ padding:26px 22px 24px; }      /* war 32/30/28 */
  /* Kontext-Link und Amazon-Knopf nebeneinander sind auf ~340px zu breit. */
  .b-app__actions{ margin-top:32px; flex-wrap:wrap; gap:8px 20px; }

  /* ============ 6 · AUTHOR-MINI-BOX ============ */
  .b-author{ padding:56px 0 64px; }            /* war 112/96 */
  .b-author__card{
    width:auto;                                /* war fix 820px */
    max-width:100%;
    grid-template-columns:minmax(0, 1fr);      /* war 120px 1fr — Avatar wandert nach oben */
    gap:22px;                                  /* war 40 */
    padding:28px 22px 30px;                    /* war 40/44/44 */
  }
  /* ⚠ Beide book.author.p* sind derzeit LEER (Inhalts-Phase) — ohne
     min-height:0 stuenden hier zwei reservierte Leerzeilen in einer
     ansonsten leeren Karte. */
  .b-author__p{ max-width:none; min-height:0; }

  /* ============ 7 · ABSCHLUSS-CTA ============ */
  .b-cta{ padding:56px 0 64px; }               /* war 112/112 */
  .b-cta__title{ max-width:none; }
  .b-cta__actions{ margin-top:32px; flex-wrap:wrap; justify-content:center; gap:12px; }
}


/* ============================================================
   RUNDE 2 · SEITE 3 von 4 — /app, HANDY
   ------------------------------------------------------------
   Gleiches Rezept wie /method (Seite 1) und /book (Seite 2):
   Positions-Variablen nullen · feste px-Breiten fluid · Sektions-
   Polster runter · benannte Selektoren, kein `!important`
   (_dev-hero-panel.js:20 steigt ohne ?panel=1 aus -> keine Inline-Styles).

   ⚑ ZWEI QUELLEN, bewusst getrennt gehalten:
   - Das DEMO-HANDY kommt 1:1 von der abgenommenen .app-Landing
     (site-app/assets/css/responsive.css): dort haengt exakt dasselbe
     Mockup, mobil abgenommen am 25.07. Uebernommen sind die Scale 0.62
     (= 279px) und der kraeftigere Puls — nicht neu erfunden.
   - Der HERO-RHYTHMUS kommt von /method + /book (Kicker links mit
     -14px Aufwaertsversatz, 32px Luft, Lead 40, min-height:100lvh).
     Die .app hat an derselben Stelle einen anderen Textblock und
     eigene Werte (62px Luft) — die gehoeren NICHT hierher.
   Nur die Ueberschriften-Masse (2.55rem / 0.99 / -0.04em) sind von der
   .app, weil dort woertlich dieselben drei Woerter stehen.

   ⚠ AUSGANGSSCHADEN (gemessen bei 393px, vor diesem Block): 26 Elemente
   ausserhalb des Bildes, davon vollstaendig unsichtbar das Demo-Handy
   (begann bei x=678), der Trial-Knopf (x=1210) und zwei der drei
   Funktions-Karten. Wegen .section{overflow:hidden} (sections.css:10)
   war das kein Querscrollen, sondern schlicht weg — dieselbe Falle wie
   der Amazon-Knopf auf /book.

   ⚠ demo.html ist TABU und bleibt es. Die Demo bringt Rahmen, Schatten
   und Fonts selbst mit und schaltet unter 430px EIGENbreite auf
   randlos-fuellend um (demo.html:55) — dann waere der Handy-Rahmen weg
   und ein blauer Kasten uebrig. Sie sieht sich immer 450px breit, weil
   das <iframe> layout-seitig 450px bleibt und nur per transform
   skaliert wird. Deshalb wird hier ausschliesslich --lp-phone-scale
   angefasst, NIE die iframe-Breite in app.css:139-146.

   ⚠ NICHT GEBAUT: .app-stage / .app-topbar / .app-chip (die alte
   Landscape-Buehne). app.css:205 fuehrt sie ausdruecklich als
   "SUPERSEDED, inert" — in app.html gibt es dazu kein Element mehr
   (im 393er-Scan taucht keins auf). Mobile Regeln waeren tote Regeln.

   ⚠ LP_STAND (_dev-hero-panel.js:20) bleibt bei 2026-07-06-a: der
   :root-Block in app.css wird NICHT angefasst, nur hier ueberschrieben.
   Ein Hochsetzen wuerde nur die gespeicherte Desktop-Sitzung verwerfen.
   ============================================================ */

/* Kraeftigerer Demo-Puls am Handy — 1:1 von der .app uebernommen
   (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"). Dort ist das Mockup mobil 279px breit — hier genau so.
   Desktop bleibt bei den abgenommenen 3,5 % (demoBreath in app.css).
   ⚠ Die no-preference-Bedingung ist PFLICHT und darf NICHT in den grossen
   Mobile-Block wandern: app.css:201 schaltet den Puls bei „Bewegung
   reduzieren" per `animation:none` ab — das setzt auch animation-name
   zurueck. Ohne die Bedingung wuerde diese spaetere Datei den Namen
   wieder setzen, und der Puls liefe trotz Abschaltung.
   ⚠ ZURUECKNEHMEN = diese beiden Bloecke loeschen, sonst nichts. */
@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; }
}

@media (max-width: 640px){

  /* ---------- Positions-Variablen des /app-Heros auf 0 ----------
     Die Transform-Regeln in app.css bleiben unangetastet, sie rechnen nur
     noch mit Null. Das Dev-Panel arbeitet auf dem Desktop weiter. */
  :root{
    /* Kicker NICHT genullt (CI, s. /method + /book): nur der Links-Ausbruch
       faellt weg, der Aufwaertsversatz bleibt. Stellschraube fuer
       „mehr/weniger versetzt": nur dieser eine Wert. */
    --lp-kicker-x:0px; --lp-kicker-y:-14px;
    --lp-z1-x:0px;     --lp-z1-y:0px;
    --lp-z2-x:0px;     --lp-z2-y:0px;
    --lp-z3-x:0px;     --lp-z3-y:0px;
    --lp-lead1-x:0px;  --lp-lead1-y:0px;
    --lp-lead2-x:0px;  --lp-lead2-y:0px;
    --lp-lead3-x:0px;  --lp-lead3-y:0px;
    /* war 552/-382 -> der Trial-Knopf stand bei x=1210, also ausserhalb.
       Die 1.11 muessen mit weg: app.css skaliert die Knopfzeile ab
       transform-origin:left top — auf einer mittig gesetzten Zeile
       schoebe das den Knopf sichtbar nach rechts aus der Mitte. */
    --lp-cta-x:0px;    --lp-cta-y:0px;   --lp-cta-groesse:1;
    /* war -266/5 -> das ganze Demo-Handy stand links ausserhalb.
       0.62 statt 0.72 = 450 x 0.62 -> 279px Mockup, exakt der auf der
       .app abgenommene Wert. Bei 375px Geraetebreite bleiben damit
       (375 - 36 Container-Polster - 279) / 2 = 30px Luft je Seite;
       0.72 haette nur 7px gelassen. Beide Teile (.phone-Rahmen UND das
       iframe-transform) haengen an dieser einen Zahl. */
    --lp-phone-x:0px;  --lp-phone-y:0px;  --lp-phone-scale:0.62;
  }

  /* ============ 1 · VIDEO-HERO + DEMO ============
     Erster Bildschirm komplett im Marken-Blau (Inhaber-Grundsatz fuer alle
     vier Unterseiten: „das sieht einfach wesentlich edler und ruhiger aus").
     lvh NICHT dvh — dvh springt, wenn Safari die Adressleiste ein-/ausklappt. */
  .a-hero{
    padding:48px 0 64px;                       /* war 140/112 */
    min-height:100lvh;
  }
  /* Textspalte oben, Demo-Handy darunter, Trial-Knopf ganz unten — das gibt
     das Markup von selbst her (.a-hero__side enthaelt Handy UND Knopf).
     Damit steht der Knopf hier genauso unter dem Bild wie der Amazon-Knopf
     auf /book (Inhaber 26.07.), ohne display:contents-Umsortierung. */
  .a-hero__grid{
    grid-template-columns:minmax(0, 1fr);      /* war 640px 610px */
    gap:56px;
  }
  .a-hero__copy{ max-width:none; text-align:center; }

  /* Kicker bleibt links und leicht nach oben versetzt, auch wenn der Rest
     der Spalte mittig steht (Inhaber 25.07.: „das haben wir CI-mäßig immer
     auf dem Desktop, das würde ich gerne auf dem Mobile beibehalten").
     Der Versatz nach oben steckt in --lp-kicker-y; hier nur die
     Links-Ausrichtung gegen das text-align:center der Spalte. */
  .a-hero__kicker{ margin:0 0 32px; text-align:left; }

  /* 77px stehen hart in app.css und ignorieren die Token-Skala.
     Masse 1:1 von der abgenommenen .app — dort traegt derselbe Hero
     woertlich dieselben drei Woerter. */
  .a-hero__headline{
    font-size:2.55rem;                         /* war 77px */
    line-height:0.99;                          /* war 0.82 */
    letter-spacing:-0.04em;                    /* war -0.095em */
    align-items:center;                        /* war flex-start */
  }
  /* Treppe faellt mobil weg — zentrierte Woerter koennen nicht gleichzeitig
     gestaffelt sein. Die Staffelung steckt in margin-left UND transform;
     die Transforms sind oben genullt, die margins muessen hier mit weg.
     Doppelklassen-Selektor noetig, sonst gewinnt .a-hero__word.w1 aus app.css.
     ⚠ VETO-Zeilen fuer eine gestaffelte Handy-Treppe: align-items oben und
     die drei margin-left-Zeilen loeschen. */
  .a-hero__word{ white-space:normal; }
  .a-hero__word.w1,
  .a-hero__word.w2,
  .a-hero__word.w3{ margin-left:0; }

  /* Die drei Lead-Zeilen stehen jetzt zentriert untereinander; die
     Pyramiden-Staffelung lag komplett in den --lp-leadN-Werten oben. */
  .a-hero__lead{ margin:40px 0 0; max-width:none; }

  /* Rechte Spalte wird volle Breite; das Handy mittig statt rechts aussen. */
  .a-hero__side{ width:auto; }
  .phone{ margin:0 auto; }                     /* war margin-left:auto */

  /* 72px statt 40: der Klick-Hinweis „hier testen" haengt absolut 10px
     unter dem Mockup und ist 36px hoch — bei 40px klebte der Knopf daran,
     bei 64px blieben nur 18px und die beiden Pillen lasen sich als Paar.
     Nachgemessen sind es jetzt 26px zwischen Hinweis-Unterkante und Knopf. */
  .a-hero__actions{
    margin-top:72px;
    flex-wrap:wrap;
    justify-content:center;
  }

  /* ============ 2 · UX-ERKLAERUNG ============ */
  .a-ux{ padding:64px 0 56px; }                /* war 112/96 */
  .a-ux__main{ max-width:none; }
  .a-ux__title{ margin:0 0 22px; }             /* war 28 */
  .a-ux__p{ max-width:none; }
  .a-context-links{ margin-top:24px; gap:8px 24px; flex-wrap:wrap; }

  /* ============ 3 · FUNKTIONEN ============ */
  .a-feat{ padding:64px 0 56px; }              /* war 112/96 */
  .a-feat__header{ margin-bottom:32px; }       /* war 64 */
  .a-feat__grid{
    grid-template-columns:minmax(0, 1fr);      /* war 418px 418px 418px */
    gap:16px;                                  /* war 32 */
  }
  .a-feat-card{ padding:26px 22px 28px; }      /* war 32/30/36 */
  .a-feat__links{ margin-top:32px; }           /* war 48 */

  /* ============ 4 · HUFBERATUNG-TEASER ============ */
  .a-consult{ padding:56px 0; }                /* war 96 */
  .a-consult__q{ max-width:none; }
  .a-consult__a{ max-width:none; }

  /* ============ 5 · ABSCHLUSS-CTA ============ */
  .a-cta{ padding:56px 0 64px; }               /* war 112/112 */
  .a-cta__title{ max-width:none; }
  /* Knopf und Kontext-Link nebeneinander sind auf ~340px zu breit. */
  .a-cta__actions{ margin-top:32px; flex-wrap:wrap; gap:12px; }
}


/* ============================================================
   RUNDE 2 · SEITE 4 von 4 — /insider, HANDY
   ------------------------------------------------------------
   Gleiches Rezept wie /method (1), /book (2) und /app (3):
   Positions-Variablen nullen · feste px-Breiten fluid · Sektions-
   Polster runter · benannte Selektoren, kein `!important`
   (_dev-insider-panel.js:20 steigt ohne ?panel=1 aus -> keine
   Inline-Styles).

   Inhaber-Entscheide 27.07. fuer diese Seite:
   - SKETCH RECHTS UNTEN in der Ecke des ersten Bildschirms. Sein
     Wortlaut: die rechte untere Ecke des Sketchs ist im 90-Grad-
     Winkel angeschnitten und muss praezise unten rechts auf dem
     Start-Screen sitzen. Gemessen am PNG stimmt das: rechts laeuft
     die Schulter mit voller Deckung hart bis an die Kante, unten
     laeuft die Zeichnung weich ins Transparente aus — buendig
     rechts angedockt liest sich beides als „von der Ecke
     angeschnitten". Klein („kann gerne klein sein"), Deckkraft
     bleibt 0.18 („soll nur dezent zu sehen sein").
   - ZAHLEN-KACHELN 2x2 (wie die Hub-Karten der Startseite).
   - MAKING-OF-VIDEO UNTER DEN FALZ: erster Bildschirm nur Text +
     Sketch im Marken-Blau (Grundsatz von /method: „edler und
     ruhiger"). Das Video bleibt im Markup Teil der dunklen
     Hero-Sektion (Seiten-Rhythmus, keine Naht) — es rutscht nur
     unter die Falzkante und kommt beim Scrollen als Erstes.

   ⚠ ABWEICHUNG von der Bau-Notiz „.i-hero__bg-avatar darf KEIN
   transform:none bekommen": die galt fuer den MITTEN-Anker des
   Desktops (left:68% + translate(-50%,-50%) — ohne die Translate
   stuende das Bild dort versetzt). Am Handy wechselt der Anker auf
   die ECKE (right:0 + top-Rechnung), und dafuer muss die Zentrier-
   Translate weg, sonst huenge das Bild zur Haelfte ausserhalb.
   Groesse deshalb ueber width statt ueber scale(); --i-av-x/y und
   --i-av-scale bleiben unangefasst und wirken nur noch am Desktop —
   das Dev-Panel schreibt dort weiter wie bisher. I_STAND bleibt
   2026-07-16-a: der :root-Block in insider.css wird NICHT angefasst.

   ⚠ LEERE SLOTS (Inhalts-Phase, wie auf /book gemeldet): die Titel
   von Videos/Social/Presse/CTA und alle drei Zitat-Karten sind noch
   ohne Text. Titel behalten ihre reservierte Zeile (kommt Text, steht
   er richtig); nur in den Zitat-Karten nehmen min-height:0-Zeilen
   die grossen Leer-Reserven raus, damit keine hohen weissen
   Leerkaesten stapeln.
   ============================================================ */
@media (max-width: 640px){

  /* ---------- Positions-Variablen des /insider-Heros auf 0 ----------
     Die Transform-Regeln in insider.css bleiben unangetastet, sie
     rechnen nur noch mit Null. Das Dev-Panel arbeitet am Desktop weiter. */
  :root{
    /* Kicker NICHT genullt (CI, s. /method): nur der Links-Ausbruch
       faellt weg, der Aufwaertsversatz bleibt. Stellschraube fuer
       „mehr/weniger versetzt": nur dieser eine Wert. */
    --i-kicker-x:0px; --i-kicker-y:-14px;
    --i-w1-x:0px;     --i-w1-y:0px;
    --i-w2-x:0px;     --i-w2-y:0px;
    --i-w3-x:0px;     --i-w3-y:0px;
    --i-lead-x:0px;   --i-lead-y:0px;
    --i-cta-x:0px;    --i-cta-y:0px;
  }

  /* ============ 1 · HERO ============ */
  /* overflow:clip statt des geerbten hidden — FEHLERFUND beim Bau:
     eine overflow:hidden-Box ist trotzdem ein Scroll-Container. Der
     Link /insider.html#making (method.html:166) laesst den Browser das
     Fragment INNERHALB der Hero-Sektion scrollen (hero.scrollTop=133,
     die Glow-Ebene erzeugt den Scroll-Spielraum) — der Nutzer landet
     oben auf einem um 133px hochgeschobenen Hero: Kicker unterm
     Kopfbalken, Headline angeschnitten, Sketch verrutscht. clip
     clippt identisch, ist aber UNSCROLLBAR -> der Sprung scrollt
     wieder das Fenster und landet wirklich beim Video.
     ⚠ Am DESKTOP besteht derselbe Fehler weiter (sections.css:10) —
     dem Inhaber gemeldet, Fix dort ist sein Entscheid. */
  .i-hero{ padding:48px 0 64px; overflow:clip; }   /* war 140/112 */

  /* Erster Bildschirm exakt = Viewport: 100lvh minus Kopfbalken (60px,
     sticky, nimmt Flusshoehe) minus padding-top (48px). Ersetzt die
     Desktop-Reservierung calc(940px - 140px) — die liesse am Handy fast
     zwei leere Bildschirmhoehen stehen. Unterkante der Textspalte =
     Falzkante, dahinter beginnt der Making-of-Block.
     lvh NICHT dvh — dvh springt mit der Safari-Adressleiste. */
  .i-hero__copy{
    max-width:none;
    text-align:center;
    min-height:calc(100lvh - 108px);
  }

  /* Kicker bleibt links und leicht nach oben versetzt, auch wenn der
     Rest der Spalte mittig steht (Inhaber 25.07.: „das haben wir
     CI-maessig immer auf dem Desktop"). Versatz steckt in --i-kicker-y. */
  .i-hero__kicker{ margin:0 0 32px; text-align:left; }

  /* 76px kommen aus --i-head-size und ignorieren die Token-Skala.
     Ueber die Klasse statt ueber die Variable, damit das Dev-Panel am
     Desktop unveraendert weiterschreibt.
     line-height 1.02 wie /book (drei volle Textzeilen exakt uebereinander
     — die 0.82-Enge des Desktops gehoert zur Treppe, deren Zeilen sich
     optisch nie beruehren).

     GROESSE GEMESSEN, nicht die 2.55rem der Geschwisterseiten pauschal:
     die /insider-Zeilen sind laenger. DE „3-Farben-System" ist bei
     2.55rem 334px breit — auf 375er-Geraeten blieben 5px Reserve, auf
     360er-Androids liefe es ueber. Der vw-Deckel greift deshalb erst
     UNTER ~390px: auf dem 393er-Referenzgeraet steht DE in vollen
     2.55rem wie /method + /book + /app, schmalere Geraete skalieren
     mit (10.4vw @375 = 39px -> 319px Zeile, 20px Reserve; passt bis
     runter zu 320px).
     EN braucht einen EIGENEN Deckel: „20 years of practice" ist bei
     2.55rem 381px breit (laeuft schon @393 ueber). 9.3vw laesst auf
     jedem Geraet 11-16px Reserve (i18n.js:64 setzt das lang-Attribut
     beim Umschalten, darum traegt :lang). Alternative waere ein
     EN-Zeilenumbruch mitten im Gedanken („20 years of / practice") —
     bewusst nicht gebaut, Textkuerzung waere Inhaber-Entscheid. */
  .i-hero__headline{
    font-size:min(2.55rem, 10.4vw);            /* war 76px */
    line-height:1.02;                          /* war 0.82 */
    letter-spacing:-0.055em;                   /* war -0.095em */
    align-items:center;                        /* war flex-start */
  }
  :lang(en) .i-hero__headline{ font-size:min(2.55rem, 9.3vw); }
  /* ES 0,5 Punkt kleiner (Inhaber 02.08.: „stoesst in zwei Zeilen an den
     Rand") + EN-Deckel: „Sistema de 3 colores" hat 20 Zeichen wie die
     EN-Rekordzeile — ohne 9.3vw stiesse es auf 360-393ern weiter an. */
  :lang(es) .i-hero__headline{ font-size:min(2.5rem, 9.3vw); }
  /* ES: Block ab der Treppe EINE Zeile tiefer (Inhaber 03.08., Muster
     /method) — 2.5rem x 1.02 Zeilenhoehe; Kicker + Folge-Abstaende bleiben. */
  :lang(es) .i-hero__headline{ margin-top:2.55rem; }
  /* Treppe faellt mobil weg — zentrierte Woerter koennen nicht
     gestaffelt sein. Staffelung steckt in margin-left UND transform;
     Transforms oben genullt, margins hier mit weg.
     ⚠ VETO-Zeilen fuer eine gestaffelte Handy-Treppe: align-items oben
     und die drei margin-left-Zeilen loeschen. */
  .i-hero__word.w1,
  .i-hero__word.w2,
  .i-hero__word.w3{ margin-left:0; }

  /* pre-line (der \n im Lead) bleibt vom Desktop. ⚠ Der \n ist hier auch
     die SATZGRENZE („…entstanden(\n)Eine Methode…") — white-space:normal
     wie auf /method geht nicht, die Saetze fluessen ohne Punkt ineinander.
     Bei den 18px des Tokens brechen aber BEIDE gewollten Zeilen um
     (gemessen 377/386px auf 357px Platz) — „entstanden" und „Praxis."
     stuenden allein. Der vw-Deckel haelt die zwei gewollten Zeilen auf
     jeder Breite: @393 -> 15.9px (Zeilen 333/341 auf 357), @375 -> 15.2,
     @360 -> 14.6. EN ist zweizeilig kurz und unkritisch.
     Dem Inhaber gemeldet — eigene Handy-Umbrueche kann er wie beim
     Drei-Farben-Intro jederzeit diktieren. */
  .i-hero__lead{ margin:40px 0 0; max-width:none; font-size:min(1.125rem, 4.05vw); }
  /* .i-hero__cta-Regel 28.07. raus — der Hero-Knopf ist ersatzlos entfernt */

  /* ---------- Sketch: rechts unten in der Ecke des ersten Bildschirms ----------
     top statt bottom, weil die Sektion viel tiefer reicht als der erste
     Bildschirm (das Video haengt mit drin): Falzkante relativ zur
     Sektionsoberkante = 100lvh - 60px Kopfbalken; minus 180px Bildhoehe
     (PNG ist quadratisch, width = height) = Oberkante des Sketchs.
     Die harte Schnittkante des PNGs liegt damit buendig auf dem rechten
     Rand, der weiche Auslauf endet auf der Falzkante. */
  .i-hero__bg-avatar{
    left:auto; right:0;
    top:calc(100lvh - 240px);
    width:180px;
    transform:none;                            /* s. Kopf: Ecken-Anker statt Mitten-Anker */
  }

  /* ============ 1b · MAKING-OF (unter dem Falz) ============ */
  .i-making{ padding-top:64px; }               /* war 112 */
  .i-making__caption{ margin:0 auto 32px; }    /* war 48 */

  /* Play-Knopf schrumpft mit der Videokarte (Karte @393: ~357x201) —
     72px Kreis mit 36px Fussabstand saesse fast auf halber Kartenhoehe. */
  .i-making__play{
    width:56px; height:56px;
    margin-left:-28px;
    bottom:20px;
  }
  .i-making__play::after{
    margin:-10px 0 0 -6px;
    border-width:10px 0 10px 16px;
  }

  /* ============ 2 · BEI DER ARBEIT ============ */
  .i-atwork{ padding:64px 0 56px; }            /* war 112/96 */
  .i-atwork__row{
    grid-template-columns:minmax(0, 1fr);      /* war 636px 1fr */
    gap:28px;
  }
  /* 120px waren der Hoehenausgleich NEBEN der 636px-Karte */
  .i-atwork__copy{ padding-top:0; }
  .i-atwork__p{ max-width:none; }

  /* ============ 3 · DATEN-ARCHIV ============ */
  .i-data{ padding:64px 0 56px; }              /* war 112/96 */
  .i-data__header{ margin-bottom:32px; }       /* war 64 */
  .i-data__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));  /* Inhaber 27.07.: 2x2; war 4 x 306px */
    gap:12px;                                  /* war 32 */
  }
  .i-stat{ padding:22px 18px 24px; }           /* war 32/30/36 */
  /* --t-h1 (28px mobil) ist fuer die halbe Kachelbreite zu gross:
     „über 20 Jahre" braeuchte ~200px, die Kachel hat ~136px Innenmass. */
  .i-stat__value{ font-size:1.3rem; }

  /* ============ 4 · DAS SAGEN DIE PFERDE (Hochkant-Video, Inhaber 27.07.) ============ */
  .i-videos{ padding:64px 0 56px; }            /* war 112/96 */
  .i-videos__row{
    grid-template-columns:minmax(0, 1fr);      /* war 1fr 340px — Text oben, Video drunter */
    gap:28px;                                  /* war 64; 1:1 wie .i-atwork__row mobil */
  }
  .i-videos__copy{ padding-top:0; }            /* 120px waren der Hoehenausgleich NEBEN dem Video */
  .i-videos__lead{ max-width:none; }
  .i-videos__stage{ width:min(75vw, 300px); margin:0 auto; }  /* Desktop 340px; @393 -> 295x524 */

  /* ============ 5 · SOCIAL-OUTBOUND ============ */
  .i-social{ padding:56px 0; }                 /* war 112/96 */
  .i-social__header{ margin-bottom:32px; }     /* war 48 */
  .i-social__pills{ gap:10px 12px; }           /* war 16 — sechs Pillen wickeln in Reihen */

  /* ============ 6 · EXTERNE BELEGE (nur noch Creme-Band mit 2 Links) ============ */
  .i-press{ padding:40px 0; }                  /* Desktop 56/56 */
  .i-press__links{ gap:8px 24px; flex-wrap:wrap; }  /* war 36 */

  /* ============ 7 · ABSCHLUSS-CTA ============ */
  .i-cta{ padding:56px 0 64px; }               /* war 112/112 */
  .i-cta__title{ max-width:none; }
  .i-cta__actions{ margin-top:32px; flex-wrap:wrap; justify-content:center; gap:12px; }  /* war 48/16 */
}


/* ===================== TABLET + LAPTOPS  (641 – 1689px) ===================== */
/* Bandgrenze GEMESSEN 27.07. (siehe responsive.css der Startseite): das
   Fix-1920-Design ist erst ab 1686px ueberlauffrei — Band wie die .app,
   Desktop ab 1690 unberuehrt. Anlage = Inhaber-Entscheid 27.07. (wie .app):
   B · 641-900 gestapelt wie Handy · C · 901-1689 zweispaltig mitwachsend.
   Gebaut im Takt EINE Seite pro Runde: FUNDAMENT + /method (Runde 2) ✓;
   /book (Runde 3) ✓ · /app (Runde 4) ✓ · /insider (Runde 5) ✓ —
   damit ist das Band auf allen vier Unterseiten komplett. */

/* ---------- FUNDAMENT · 641-1689 (alle vier Unterseiten) ---------- */
@media (min-width:641px) and (max-width:1689px){

  #lc{ display:none !important; }    /* doppelter Boden wie mobil */

  /* Token-Kurven statt Einzelregeln (Muster Mobile-Block): treffen bei 1689
     punktgenau die Desktop-Werte aus tokens.css — kein Sprung an der Kante.
     --t-body bleibt 17px (Inhaber-Richtlinie: Content lesbar). */
  :root{
    --t-hero:clamp(44px, 24.43px + 3.0534vw, 76px);
    --t-display:clamp(38px, 23.93px + 2.1947vw, 61px);
    --t-h1:clamp(28px, 21.27px + 1.0496vw, 39px);
    --t-h2:clamp(24px, 19.72px + 0.6679vw, 31px);
    --t-h3:clamp(21px, 18.55px + 0.3817vw, 25px);
    --t-kicker-hero:clamp(24px, 14.82px + 1.4313vw, 39px);
    --t-lead:clamp(18px, 16.78px + 0.1908vw, 20px);
  }
}

/* ============================================================
   TABLET · SEITE 1 — /method (Runde 2, 27.07.)
   ============================================================ */

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

  /* Positions-Variablen nullen (wie mobil): die 1920-getunten Fluege — Lead
     x+733, CTA x+935 in die rechte Spalte — funktionieren nur auf 1920.
     Kicker behaelt den Aufwaertsversatz (CI-Gesetz aller Unterseiten). */
  :root{
    --m-kicker-x:0px; --m-kicker-y:-14px;
    --m-head-x:0px;   --m-head-y:0px;
    --m-w1-x:0px;     --m-w1-y:0px;
    --m-w2-x:0px;     --m-w2-y:0px;
    --m-w3-x:0px;     --m-w3-y:0px;
    --m-lead-x:0px;   --m-lead-y:0px;
    --m-cta-x:0px;    --m-cta-y:0px;
  }

  /* 77px stehen hart in method.css (ignorieren die Token-Skala) */
  .m-hero__headline{ font-size:clamp(44px, 23.82px + 3.1489vw, 77px); }
  .m-hero{ padding:clamp(88px, 56.19px + 4.9618vw, 140px) 0 clamp(80px, 60.43px + 3.0534vw, 112px); }
  .m-hero__kicker{ margin-left:0; }            /* -0.12ch Feinversatz raus */

  /* Vom Desktop gewaehlte Zeilenbreite (~790px max-content) passt in keine
     Band-Spalte — bricht frei, wie mobil (dem Inhaber gemeldet) */
  .m-concept__p--lines{ white-space:normal; width:auto; max-width:none; }
  .m-concept__origin{ transform:none; }        /* 64/27 war Desktop-Optikkorrektur */

  /* Flush-Container der Proof-Buehne: fixe 1400 -> fluid */
  .m-container-flush{ width:100%; max-width:1400px; padding:0 40px; }
  .proof-copy{ transform:none; }               /* hartes translateX(18px), 1920-getunt */

  .m-case-card{ width:min(100%, 1100px); }     /* war fix 1100px */
}

/* ---------- /method · B 641-900 GESTAPELT (Handy-Rezept, Tablet-Masse) ---------- */
@media (min-width:641px) and (max-width:900px){

  /* Erster Bildschirm komplett im Marken-Blau (Inhaber-Grundsatz Unterseiten) */
  .m-hero{ padding:48px 0 64px; min-height:100lvh; }
  .m-hero__copy{ max-width:none; text-align:center; }
  .m-hero__kicker{ margin:0 0 24px; text-align:left; }
  /* Textblock tiefer (Inhaber 27.07., iPad hochkant: „der Text weiter runter" —
     auf dem hohen Schirm hing alles oben, darunter viel Leere). vh-Anteil:
     je hoeher der Schirm, desto weiter rueckt der Block Richtung Mitte. */
  .m-hero__headline{ margin-top:clamp(56px, 12vh, 150px); line-height:0.92; letter-spacing:-0.055em; align-items:center; }
  .m-hero__word{ white-space:normal; }
  .m-hero__word.w1,
  .m-hero__word.w2,
  .m-hero__word.w3{ margin-left:0; }           /* Treppe faellt gestapelt weg (wie Handy) */
  /* pre-line statt normal: der \n nach „tools."/„Werkzeug." aus content/method.js
     traegt den gewollten Satz-Umbruch (Inhaber 27.07.: „Zeilenumbruch nach Tools").
     Abstaende: Treppe->Text 96 (40 + 2 Zeilen) und Text->CTA 140 (84 + 2 Zeilen),
     beide Inhaber 27.07. iPad hochkant. */
  .m-hero__lead{ margin:96px 0 0; max-width:none; white-space:pre-line; }
  .m-hero__actions{ margin-top:140px; flex-wrap:wrap; justify-content:center; }

  .m-concept{ padding:64px 0 56px; }
  .m-concept__grid{ grid-template-columns:minmax(0, 1fr); gap:44px; }
  .m-concept__p{ max-width:none; }
  .m-context-links{ gap:8px 24px; flex-wrap:wrap; }
  .m-concept__origin{ margin-top:4px; padding-left:18px; }

  .m-colors{ padding:64px 0 56px; }
  .m-colors__header{ margin-bottom:40px; }
  .m-colors__grid{ grid-template-columns:minmax(0, 1fr); gap:16px; }
  .m-color-card__text{ min-height:0; }

  .m-read{ padding:56px 0 64px; }
  .m-read__proof{ margin-top:64px; }
  .m-sole__grid{ grid-template-columns:minmax(0, 1fr); gap:28px; }
  .m-sole__media{ width:min(100%, 560px); justify-self:center; }
  .m-sole__copy{ margin-top:0; max-width:none; }
  .m-sole__p{ max-width:none; }

  .proof-grid{ grid-template-columns:minmax(0, 1fr); gap:24px; }
  .proof-copy{ max-width:none; justify-self:start; margin-top:0; padding-top:0; }
  /* „Sieh, wie es wirkt." einzeilig (Inhaber-Entscheid vom Handy, gilt gestapelt) */
  .proof-title{
    font-size:2.5rem;
    line-height:0.95;
    letter-spacing:-0.04em;
    flex-direction:row;
    align-items:baseline;
    gap:0.26em;
    margin:0.95em 0;
  }
  .proof-word{ white-space:nowrap; }
  .proof-word.how{ margin-left:0; }
  .proof-line{ max-width:none; }
  .proof-detail{ max-width:none; }
  .proof-stage{ width:min(100%, 610px); justify-self:center; }

  .m-case{ padding:64px 0 56px; }
  .m-case__header{ margin-bottom:40px; }
  .m-case-card{ grid-template-columns:minmax(0, 1fr); margin:0 auto; }
  .m-case-card__thumb{ border-right:0; border-bottom:1px solid rgba(0,0,0,0.06); }
  .m-case-card__text{ min-height:0; }
  .m-voices{ margin-top:48px; grid-template-columns:minmax(0, 1fr); gap:36px; }
  .m-voice__text{ min-height:0; }

  .m-faq{ padding:64px 0 56px; }
  .faq-header{ margin-bottom:32px; }
  /* Desktop-Deckel 480px kann bei ~580px Textbreite noch schneiden (Handy-Messung) */
  .faq-item.open .faq-answer{ max-height:800px; }

  .m-cta{ padding:56px 0 64px; }
  .m-cta__title{ max-width:none; }
  .m-cta__actions{ margin-top:32px; flex-wrap:wrap; justify-content:center; gap:12px; }
}

/* ---------- /method · C 901-1689 ZWEISPALTIG MITWACHSEND ---------- */
@media (min-width:901px) and (max-width:1689px){

  /* Hero: Layout WIE AM DESKTOP (Inhaber 27.07., iPad quer): Kicker links
     oben, darunter zwei Haelften — Treppe links der Mitte, Lead + Knopf in
     der rechten Haelfte. Am Desktop entsteht das durch die (hier genullten)
     1920-Fluege --m-lead/--m-cta; im Band traegt ein Grid dieselbe Anlage,
     jede Haelfte zentriert ihren Inhalt (den Desktop-Positionen nachgemessen).
     align-items:start = Gesetz. */
  :root{ --m-kicker-y:-48px; }       /* „Kicker etwas hoeher" (Inhaber 27.07. quer; Band-Basis -14) */
  .m-hero__copy{
    max-width:none;                  /* Basis-Deckel 980 machte die Haelften 455px schmal — der 1. Lead-Satz braucht 456 */
    display:grid;
    /* Text-Haelfte etwas breiter: der laengste DE-Satz („…mit dem Werkzeug.")
       braucht ~525px und brach bei 1fr/1fr auf Jans 1180er iPad noch um;
       die Treppe braucht die Breite nicht. */
    grid-template-columns:minmax(0, 0.92fr) minmax(0, 1.08fr);
    column-gap:clamp(48px, 6vw, 120px);
    align-items:start;
  }
  .m-hero__kicker{ grid-column:1 / -1; }
  .m-hero__headline{ grid-column:1; grid-row:2; justify-self:center; }
  .m-hero__lead{
    grid-column:2; grid-row:2;
    justify-self:center;
    margin:0;
    max-width:none;                  /* Basis-Deckel zwang den 1. Satz in den Umbruch — „zweiteilig, ohne den Umbruch" (Inhaber) */
    padding-top:clamp(40px, 5.7px + 3.807vw, 70px);  /* Lead sitzt wie am Desktop etwas unter der Treppen-Oberkante */
  }
  .m-hero__actions{
    grid-column:2; grid-row:3;
    justify-self:center;
    margin-top:clamp(72px, -17.2px + 9.898vw, 150px); /* grosse Desktop-Luft Lead -> Knopf, skaliert */
  }

  /* ⚠ Die BASIS-Margins der Treppen-Woerter sind Gegen-Versaetze zu den
     Transforms (w1 ~108px, w3 ~6px) — genullt ergaebe das eine RUECKWAERTS-
     Treppe. Hier die Desktop-Richtung (~1.4ch-Rhythmus) mit eigenen Margins. */
  .m-hero__word.w1{ margin-left:0; }
  .m-hero__word.w2{ margin-left:1.4ch; }
  .m-hero__word.w3{ margin-left:2.8ch; }

  /* 720:460 als Verhaeltnis weitergefuehrt */
  .m-concept__grid{
    grid-template-columns:minmax(0, 1.57fr) minmax(0, 1fr);
    justify-content:normal;
    gap:clamp(44px, -42.9px + 9.645vw, 120px);
  }

  .m-colors__grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:clamp(16px, -2.3px + 2.03vw, 32px);
  }

  .m-sole__grid{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.14fr);
    gap:clamp(48px, -34.3px + 9.137vw, 120px);
  }
  .m-sole__media{ width:100%; }                /* Spalte deckelt, 4/5 traegt die Hoehe */
  /* Hoehenausgleich neben dem mitwachsenden Bild skaliert mit */
  .m-sole__copy{ margin-top:clamp(60px, -77.2px + 15.228vw, 180px); }

  .proof-grid{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.44fr);
    gap:clamp(24px, 10.3px + 1.523vw, 36px);
  }
  .proof-stage{ width:100%; }
  .proof-title{ font-size:clamp(48px, 13.24px + 3.858vw, 78.4px); }
  .proof-copy{ margin-top:clamp(64px, -78.9px + 15.863vw, 189px); }

  .m-case-card{ grid-template-columns:minmax(0, 1.04fr) minmax(0, 1fr); }
  .m-voices{
    margin-top:clamp(64px, 27.4px + 4.061vw, 96px);
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:clamp(48px, -34.3px + 9.137vw, 120px);
  }

  .faq-item.open .faq-answer{ max-height:640px; }
}

/* ============================================================
   TABLET · SEITE 2 — /book (Runde 3, 28.07.)
   Nach dem Standard-Rezept aus Runde 2; Desktop-Anker NACHGEMESSEN
   @1920: Treppe visuell 0/+152/+176 (bei 73px), Zeilenraster 85px,
   Lead 34px unter der Treppe, Cover-Frame 361x540, CTA frei rechts.
   ============================================================ */

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

  /* Positions-Variablen nullen (wie mobil): --b-cta-x:1276px fliegt den
     Amazon-Knopf am Desktop frei rechts NEBEN das Cover — reines 1920-
     Tuning, der Knopf ragt schon dort ueber den 1400er-Container hinaus.
     Kicker behaelt den Aufwaertsversatz (CI-Gesetz aller Unterseiten). */
  :root{
    --b-kicker-x:0px; --b-kicker-y:-14px;
    --b-w1-x:0px;     --b-w1-y:0px;
    --b-w2-x:0px;     --b-w2-y:0px;
    --b-w3-x:0px;     --b-w3-y:0px;
    --b-lead-x:0px;   --b-lead-y:0px;
    --b-cta-x:0px;    --b-cta-y:0px;
    --b-cover-x:0px;  --b-cover-y:0px;
  }

  /* 73px stehen hart in book.css (--b-head-size, Inhaber-justiert) */
  .b-hero__headline{ font-size:clamp(44px, 26.26px + 2.7672vw, 73px); }
  .b-hero{ padding:clamp(88px, 56.19px + 4.9618vw, 140px) 0 clamp(80px, 60.43px + 3.0534vw, 112px); }

  /* Flush-Container des Cover-Grids: fixe 1400 -> fluid */
  .b-container-flush{ width:100%; max-width:1400px; padding:0 40px; }

  /* Der Kaufknopf gehoert im Band ANS BUCH (Inhaber-Logik vom Handy:
     „Der CTA gehoert unter das Foto vom Buch" — fuer den Frei-Flug rechts
     ist unter 1690 kein Platz). display:contents loest die Textspalte auf,
     ihre Kinder werden Grid-Zellen: B sortiert per order (wie mobil),
     C platziert explizit. text-align vererbt sich weiter. */
  .b-hero__copy{ display:contents; }

  /* Cover: Groesse ueber width (B und C verschieden) + aspect-ratio;
     height:auto ist Pflicht, sonst stehen die 540px und das Verhaeltnis
     bricht (Lehre vom Handy-Block). */
  .b-cover__frame{ height:auto; aspect-ratio:1159 / 1733; }

  .b-author__card{ width:min(100%, 820px); }    /* war fix 820px */
}

/* ---------- /book · B 641-900 GESTAPELT (Handy-Rezept, Tablet-Masse) ---------- */
@media (min-width:641px) and (max-width:900px){

  /* Erster Bildschirm komplett im Marken-Blau (Inhaber-Grundsatz Unterseiten) */
  .b-hero{ padding:48px 0 64px; min-height:100lvh; }
  .b-hero__grid{ grid-template-columns:minmax(0, 1fr); gap:0; }
  .b-hero__copy{ text-align:center; }
  .b-cover{ order:1; margin-top:96px; }        /* Buch folgt dem Text, gleicher Atem wie Treppe->Text */
  .b-hero__actions{ order:2; margin-top:56px; flex-wrap:wrap; justify-content:center; }

  .b-hero__kicker{ margin:0 0 24px; text-align:left; }
  /* Textblock tiefer (Inhaber-Gesetz von /method, iPad hochkant) +
     line-height 1.02 statt 0.82: drei zentrierte Zeilen exakt uebereinander
     lesen sich mit der Treppen-Enge sonst als Klotz (wie mobil). */
  .b-hero__headline{
    margin-top:clamp(56px, 12vh, 150px);
    line-height:1.02;
    letter-spacing:-0.055em;
    align-items:center;
  }
  .b-hero__word.w1,
  .b-hero__word.w2,
  .b-hero__word.w3{ margin-left:0; }           /* Treppe faellt gestapelt weg (Gegen-Versaetze!) */
  .b-hero__lead{ margin:96px 0 0; max-width:none; }   /* Treppe->Text 96 (Inhaber-Gesetz 27.07.) */

  .b-cover__frame{ width:min(340px, 44vw); }
  .b-cover__preview{ font-size:clamp(36px, 18.7px + 2.703vw, 43px); }  /* 46px gehoerten zu 361px Cover */

  .b-prolog{ padding:56px 0 64px; }
  .b-prolog__links{ flex-wrap:wrap; gap:8px 24px; }

  .b-toc{ padding:64px 0 56px; }
  .b-toc__header{ margin-bottom:40px; }
  /* Nummer neben Titel, Kommentar-Slot darunter (wie mobil); feste Nummern-
     Spalte, sonst stehen die Titel pro Zeile unterschiedlich (jede Zeile
     ist ein eigenes Grid). Notes derzeit LEER -> min-height:0. */
  .b-toc__row{
    grid-template-columns:32px minmax(0, 1fr); /* war 90px 480px 1fr */
    gap:4px 16px;
    padding:20px 0;
  }
  .b-toc__note{ grid-column:2; min-height:0; }

  .b-sample{ padding:64px 0 56px; }
  .b-sample__header{ margin-bottom:40px; }
  .b-excerpt{ padding:36px 0; }                /* war 44 */

  .b-app{ padding:64px 0 56px; }
  .b-app__cards{ grid-template-columns:minmax(0, 1fr); gap:16px; margin-top:32px; }
  .b-app__actions{ margin-top:32px; flex-wrap:wrap; gap:8px 20px; }

  .b-author{ padding:56px 0 64px; }            /* Karte bleibt 120px/Text — passt ab 641 */

  .b-cta{ padding:56px 0 64px; }
  .b-cta__actions{ margin-top:32px; flex-wrap:wrap; justify-content:center; gap:12px; }
}

/* ---------- /book · C 901-1689 ZWEISPALTIG MITWACHSEND ---------- */
@media (min-width:901px) and (max-width:1689px){

  /* Hero: Desktop-Anlage — Kicker links oben, darunter Treppe + Lead in
     der linken Haelfte, Cover rechts, Kaufknopf UNTERM Cover (s. A-Block).
     grid-template-rows auto/auto/1fr/auto: das Cover spannt Zeile 1-3, die
     1fr-Zeile (Lead) schluckt seine Ueberhoehe — die linke Spalte behaelt
     ihren Rhythmus (30/44er-Margins), statt auseinandergespreizt zu werden,
     und Zeile 4 (Knopf) beginnt exakt unter der Cover-Unterkante. */
  :root{ --b-kicker-y:-48px; }       /* „Kicker etwas hoeher" (CI wie /method C; Band-Basis -14) */
  .b-hero__grid{
    grid-template-columns:minmax(0, 1.04fr) minmax(0, 1fr);   /* Desktop 687:659 */
    grid-template-rows:auto auto 1fr auto;
    gap:0 clamp(24px, -10.3px + 3.807vw, 54px);               /* Zeilen-Rhythmus tragen die Margins */
  }
  .b-hero__kicker{ grid-column:1; grid-row:1; }
  /* Desktop-Zeilenraster 85px bei 60px Zeilenbox: +25px Luft = 0.34em (skaliert mit) */
  .b-hero__headline{ grid-column:1; grid-row:2; gap:0.34em; }
  .b-hero__lead{ grid-column:1; grid-row:3; }
  .b-cover{ grid-column:2; grid-row:1 / span 3; }
  .b-hero__actions{ grid-column:2; grid-row:4; justify-self:center; }

  /* ⚠ Die BASIS-Margins der Treppen-Woerter sind Gegen-Versaetze zu den
     Transforms — genullt ergaebe das eine RUECKWAERTS-Treppe. Desktop
     NACHGEMESSEN: Stufen 0/+152/+176 bei 73px = em-Rhythmus, der mit der
     Schrift mitschrumpft (EN „hoof problems" passt so auch bei 901). */
  .b-hero__word.w1{ margin-left:0; }
  .b-hero__word.w2{ margin-left:2.08em; }
  .b-hero__word.w3{ margin-left:2.41em; }
  /* ES: w3 fuenf Buchstaben weiter links (Inhaber 02.08.) —
     5 x ~0.455em mittlere Zeichenbreite (0.55em - 0.095 letter-spacing). */
  :lang(es) .b-hero__word.w3{ margin-left:0.14em; }

  .b-cover__frame{ width:clamp(280px, 187.4px + 10.279vw, 361px); }
  .b-cover__preview{ font-size:clamp(36px, 23.9px + 1.31vw, 46px); }

  /* Inhaltsverzeichnis: 90/480/378 als Verhaeltnis, Nummern-Spalte clampt */
  .b-toc__row{
    grid-template-columns:clamp(56px, 17.1px + 4.315vw, 90px) minmax(0, 1.27fr) minmax(0, 1fr);
    gap:clamp(20px, 1.71px + 2.03vw, 36px);
  }

  .b-app__cards{ gap:clamp(16px, 2.28px + 1.523vw, 28px); }
}

/* ============================================================
   TABLET · SEITE 3 — /app (Runde 4, 28.07.)
   Nach dem Standard-Rezept; Desktop-Anker NACHGEMESSEN @1920:
   Treppe visuell w2=0 / w3=+6 / w1=+72 (bei 77px), Zeilenraster 108px
   (= +0.584em Luft), Lead-Pyramide ~235px unter der Treppe mit Stufen
   0/+38/+63, Phone 324x662 (Scale 0.72), Trial-Knopf frei rechts.
   Das DEMO-HANDY skaliert NUR ueber --lp-phone-scale (eine einheiten-
   lose Zahl fuer Rahmen UND iframe-transform — eine vw-Kurve ist dafuer
   unmoeglich, darum STUFEN; Muster der abgenommenen .app-Landing). */

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

  /* Positions-Variablen nullen (wie mobil): CTA-Flug x552/-382 in die
     rechte Spalte und Phone-Versatz -266 sind reines 1920-Tuning.
     Kicker behaelt den Aufwaertsversatz (CI-Gesetz aller Unterseiten). */
  :root{
    --lp-kicker-x:0px; --lp-kicker-y:-14px;
    --lp-z1-x:0px;     --lp-z1-y:0px;
    --lp-z2-x:0px;     --lp-z2-y:0px;
    --lp-z3-x:0px;     --lp-z3-y:0px;
    --lp-lead1-x:0px;  --lp-lead1-y:0px;
    --lp-lead2-x:0px;  --lp-lead2-y:0px;
    --lp-lead3-x:0px;  --lp-lead3-y:0px;
    --lp-cta-x:0px;    --lp-cta-y:0px;   --lp-cta-groesse:1;
    --lp-phone-x:0px;  --lp-phone-y:0px;
  }

  /* 77px stehen hart in app.css (ignorieren die Token-Skala) */
  .a-hero__headline{ font-size:clamp(44px, 23.82px + 3.1489vw, 77px); }
  .a-hero{ padding:clamp(88px, 56.19px + 4.9618vw, 140px) 0 clamp(80px, 60.43px + 3.0534vw, 112px); }
  .a-hero__copy{ max-width:none; }             /* Deckel 640 — die fr-Spalte traegt die Breite */
  .a-hero__side{ width:auto; }                 /* war fix 610px */

  /* Der Klick-Hinweis „hier testen" haengt absolut 10px unterm Mockup und
     ist 36px hoch — 96px halten den Trial-Knopf frei davon (Handy-Lehre,
     dort 72; hier eine Zeile mehr = Buch-Rhythmus Text->CTA). */
  .a-hero__actions{ margin-top:96px; flex-wrap:wrap; justify-content:center; }
}

/* ---------- /app · B 641-900 GESTAPELT (Handy-Rezept, Tablet-Masse) ---------- */
@media (min-width:641px) and (max-width:900px){

  /* Demo-Handy: 0.80 = die auf der .app abgenommene Tablet-Stufe (360px) */
  :root{ --lp-phone-scale:0.80; }

  /* Erster Bildschirm komplett im Marken-Blau (Inhaber-Grundsatz Unterseiten) */
  .a-hero{ padding:48px 0 64px; min-height:100lvh; }
  .a-hero__grid{ grid-template-columns:minmax(0, 1fr); justify-content:normal; gap:0; }
  .a-hero__copy{ text-align:center; }
  .a-hero__kicker{ margin:0 0 24px; text-align:left; }
  /* Textblock tiefer (Inhaber-Gesetz von /method, iPad hochkant); 0.99/-0.04em
     wie mobil — die .app traegt woertlich dieselben drei Woerter. */
  .a-hero__headline{
    margin-top:clamp(56px, 12vh, 150px);
    line-height:0.99;
    letter-spacing:-0.04em;
    align-items:center;
  }
  .a-hero__word{ white-space:normal; }
  .a-hero__word.w1,
  .a-hero__word.w2,
  .a-hero__word.w3{ margin-left:0; }           /* Treppe faellt gestapelt weg (Gegen-Versaetze!) */
  .a-hero__lead{ margin:96px 0 0; max-width:none; }   /* Treppe->Text 96 (Inhaber-Gesetz 27.07.) */

  .phone{ margin:96px auto 0; }                /* Handy folgt dem Text, gleicher Atem */

  .a-ux{ padding:56px 0 64px; }
  .a-ux__title{ margin:0 0 24px; }
  .a-context-links{ margin-top:24px; gap:8px 24px; flex-wrap:wrap; }

  .a-feat{ padding:64px 0 56px; }
  .a-feat__header{ margin-bottom:40px; }
  .a-feat__grid{ grid-template-columns:minmax(0, 1fr); gap:16px; }
  .a-feat__links{ margin-top:32px; }

  .a-consult{ padding:56px 0; }

  .a-cta{ padding:56px 0 64px; }
  .a-cta__actions{ margin-top:32px; flex-wrap:wrap; justify-content:center; gap:12px; }
}

/* ---------- /app · C 901-1689 ZWEISPALTIG MITWACHSEND ---------- */
@media (min-width:901px) and (max-width:1689px){

  /* Hero: Desktop-Anlage — Kicker links oben, Treppe + Lead-Pyramide in
     der linken Haelfte, Demo-Handy rechts mit dem Trial-Knopf darunter
     (der Desktop-Frei-Flug des Knopfs braucht 1920). */
  :root{ --lp-kicker-y:-48px; }      /* „Kicker etwas hoeher" (CI wie /method + /book C) */
  .a-hero__grid{
    grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);   /* Desktop 640:610 */
    justify-content:normal;
    gap:clamp(36px, -2.9px + 4.315vw, 70px);
  }

  /* ⚠ Die BASIS-Margins der Treppen-Woerter sind Gegen-Versaetze zu den
     Transforms — genullt ergaebe eine falsche Staffelung. Desktop
     NACHGEMESSEN: „Du" +72 eingerueckt, „bist der" 0, „Trainer" +6
     (bei 77px) = em-Rhythmus, der mit der Schrift mitschrumpft. */
  .a-hero__word.w1{ margin-left:0.94em; }
  .a-hero__word.w2{ margin-left:0; }
  .a-hero__word.w3{ margin-left:0.08em; }
  /* Treppe + Pyramide MITTIG in der linken Haelfte (Inhaber 28.07. iPad quer:
     „immer noch sehr weit links, gilt auch fuer den Text" — dasselbe Wort wie
     bei /method C). fit-content + auto-Raender zentrieren den Block, die
     Staffelungs-Margins wirken innerhalb weiter; Kicker bleibt links (CI). */
  .a-hero__headline{ gap:0.584em; width:fit-content; margin-inline:auto; }
  /* Desktop-Zeilenraster 108px bei 63px Zeilenbox: +45px Luft = 0.584em */

  /* Lead-Pyramide: Anlage vom Desktop (~235px unter der Treppe, Stufen
     0/+38/+63 = 1.9em/3.15em der Lead-Schrift). Kurve trifft 235 bei 1689;
     „eine Zeile naeher an den Hero" (Inhaber 28.07., iPad 1180): dort jetzt
     116 statt 145 — eine Lead-Zeile (29px) hoeher. */
  .a-hero__lead{ margin-top:clamp(51px, -159.9px + 23.379vw, 235px); max-width:none; width:fit-content; margin-inline:auto; }
  .a-hero__lead-line.ll2{ margin-left:1.9em; }
  .a-hero__lead-line.ll3{ margin-left:3.15em; }

  /* Demo-Handy mittig in der rechten Haelfte; Scale in STUFEN (s. Kopf),
     trifft bei 1689 mit 0.72 exakt den Desktop-Wert — kein Kanten-Sprung. */
  .phone{ margin:0 auto; }
  .a-feat__grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:clamp(20px, 6.28px + 1.523vw, 32px);
  }
}
@media (min-width:901px) and (max-width:1150px){
  :root{ --lp-phone-scale:0.62; }              /* 279px — die .app-Stufe */
}
@media (min-width:1151px) and (max-width:1400px){
  :root{ --lp-phone-scale:0.67; }              /* 302px */
}
@media (min-width:1401px) and (max-width:1689px){
  :root{ --lp-phone-scale:0.72; }              /* 324px = Desktop-Wert */
}

/* ============================================================
   TABLET · SEITE 4 — /insider (Runde 5, 28.07.)
   Nach dem Standard-Rezept; Desktop-Anker NACHGEMESSEN @1920:
   der Hero ist KEINE Zweispalter — freie Komposition ueber die
   volle Breite: Treppe faellt nach LINKS ab (w1 rechts oben, w3
   links unten; Stufen ab w3: 0/+165/+378 = 0/2.17em/4.97em bei
   76px, Zeilen-Extra-Luft +60/+71 = 0.79em + w3 +0.14em), der
   Treppen-Block als Ganzes steht exakt SEITENMITTIG (509-1416,
   Mitte 962 bei 1920) — das Mittig-Muster des Inhabers steckt
   schon im Desktop. Lead 90 unter der Treppe, CTA 114 unter dem
   Lead, Sketch buendig an der rechten Kante (Mitte bei 57% des
   ersten Bildschirms, 525px breit, Deckkraft 0.18 bleibt).
   KOPFBALKEN IM BAND = 79px (gemessen 641-1920, nicht die 60 der
   Handy-Annahme) — alle Falz-Rechnungen hier nutzen 79. */

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

  /* Positions-Variablen nullen (wie mobil): die Treppe entsteht am
     Desktop rein aus positiven 1920-Fluegen (587/327/115), Lead- und
     CTA-Flug (212/176 + 760/256) sind reines 1920-Tuning.
     Kicker behaelt den Aufwaertsversatz (CI-Gesetz aller Unterseiten).
     --i-av-* bleiben unangetastet (Panel schreibt am Desktop weiter);
     der Sketch wird wie mobil ueber Element-Regeln verankert. */
  :root{
    --i-kicker-x:0px; --i-kicker-y:-14px;
    --i-w1-x:0px;     --i-w1-y:0px;
    --i-w2-x:0px;     --i-w2-y:0px;
    --i-w3-x:0px;     --i-w3-y:0px;
    --i-lead-x:0px;   --i-lead-y:0px;
    --i-cta-x:0px;    --i-cta-y:0px;
  }

  /* 76px stehen hart in insider.css (--i-head-size, Panel-justiert) —
     Kurve identisch mit --t-hero des FUNDAMENTS (Desktop-Wert 76 = Token) */
  .i-hero__headline{ font-size:clamp(44px, 24.43px + 3.0534vw, 76px); }
  .i-hero{ padding:clamp(88px, 56.19px + 4.9618vw, 140px) 0 clamp(80px, 60.43px + 3.0534vw, 112px); }

  /* overflow:clip statt hidden — derselbe FEHLERFUND wie im Handy-Block:
     der Anker-Link /insider.html#making scrollt sonst INNERHALB der
     Hero-Sektion (hidden = Scroll-Container) und schiebt den Hero hoch. */
  .i-hero{ overflow:clip; }

  /* Basis-Deckel 1100 wuerde die mittige Komposition auf eine linkslastige
     1100er-Box beziehen statt auf die Containermitte */
  .i-hero__copy{ max-width:none; }
}

/* ---------- /insider · B 641-900 GESTAPELT (Handy-Rezept, Tablet-Masse) ---------- */
@media (min-width:641px) and (max-width:900px){

  /* Erster Bildschirm = Viewport: Text + Sketch im Marken-Blau, Making-of
     unterm Falz (Inhaber-Entscheid vom Handy — das Video bleibt im Markup
     Teil der dunklen Sektion, es rutscht nur unter die Falzkante).
     min-height auf der COPY, nicht der Sektion (das Video haengt mit drin);
     127 = 79 Kopfbalken + 48 padding-top. lvh, nicht dvh (Safari-Leiste). */
  .i-hero{ padding:48px 0 64px; }
  .i-hero__copy{ text-align:center; min-height:calc(100lvh - 127px); }
  .i-hero__kicker{ margin:0 0 24px; text-align:left; }

  /* Textblock tiefer (Inhaber-Gesetz von /method, iPad hochkant);
     1.02/-0.055em wie mobil — drei zentrierte Zeilen, keine Treppen-Enge */
  .i-hero__headline{
    margin-top:clamp(56px, 12vh, 150px);
    line-height:1.02;
    letter-spacing:-0.055em;
    align-items:center;
  }
  .i-hero__word.w1,
  .i-hero__word.w2,
  .i-hero__word.w3{ margin-left:0; }           /* Treppe faellt gestapelt weg */
  .i-hero__lead{ margin:96px 0 0; max-width:none; }   /* Treppe->Text 96 (Inhaber-Gesetz 27.07.) */

  /* Sketch rechts unten in der Ecke des ersten Bildschirms (Handy-Muster:
     harte PNG-Schnittkante buendig rechts, weicher Auslauf endet auf der
     Falzkante = 100lvh - 79px Kopfbalken - Bildhoehe). Ecken-Anker statt
     Mitten-Anker -> transform:none (s. Handy-Block-Kopf); Groesse ueber
     width, waechst dezent mit (190@641 -> 240@900), Deckkraft bleibt 0.18. */
  .i-hero__bg-avatar{
    --i-av-b-w:clamp(190px, 66.25px + 19.305vw, 240px);
    left:auto; right:0;
    top:calc(100lvh - 79px - var(--i-av-b-w));
    width:var(--i-av-b-w);
    transform:none;
  }

  /* ============ 1b · MAKING-OF (unter dem Falz) ============ */
  .i-making{ padding-top:64px; }               /* war 112 */
  .i-making__caption{ margin:0 auto 32px; }    /* war 48 */
  /* Play-Knopf schrumpft mit der Videokarte (Karte 641-900: ~315-461 hoch) */
  .i-making__play{
    width:64px; height:64px;
    margin-left:-32px;
    bottom:24px;
  }
  .i-making__play::after{
    margin:-10px 0 0 -6px;
    border-width:10px 0 10px 16px;
  }

  /* ============ 2 · BEI DER ARBEIT ============ */
  .i-atwork{ padding:64px 0 56px; }            /* war 112/96 */
  .i-atwork__row{
    grid-template-columns:minmax(0, 1fr);      /* war 636px 1fr */
    gap:28px;
  }
  /* 1:1-Karte gedeckelt (Cap wie proof-stage /method B): volle 820px
     Quadrat waeren am oberen Bandrand zu wuchtig */
  .i-atwork__card{ width:min(100%, 610px); justify-self:center; }
  .i-atwork__copy{ padding-top:0; }            /* 120 waren der Hoehenausgleich neben der 636er-Karte */
  .i-atwork__p{ max-width:none; }

  /* ============ 3 · DATEN-ARCHIV ============ */
  .i-data{ padding:64px 0 56px; }              /* war 112/96 */
  .i-data__header{ margin-bottom:40px; }       /* war 64 */
  .i-data__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));  /* 2x2 (Inhaber-Muster vom Handy) */
    gap:16px;                                  /* war 32 */
  }

  /* ============ 4 · DAS SAGEN DIE PFERDE ============ */
  .i-videos{ padding:64px 0 56px; }            /* war 112/96 */
  .i-videos__row{
    grid-template-columns:minmax(0, 1fr);      /* war 1fr 340px — Text oben, Video drunter */
    gap:28px;
  }
  .i-videos__copy{ padding-top:0; }            /* 120 waren der Hoehenausgleich neben dem Video */
  .i-videos__lead{ max-width:none; }
  .i-videos__stage{ width:min(100%, 340px); margin:0 auto; }

  /* ============ 5 · SOCIAL-OUTBOUND ============ */
  .i-social{ padding:56px 0; }                 /* war 112/96 */
  .i-social__header{ margin-bottom:32px; }     /* war 48 */
  .i-social__pills{ gap:12px 16px; }

  /* ============ 6 · EXTERNE BELEGE (Creme-Band, 2 Links) ============ */
  .i-press{ padding:48px 0; }                  /* Desktop 56/56 */
  .i-press__links{ gap:8px 24px; flex-wrap:wrap; }

  /* ============ 7 · ABSCHLUSS-CTA ============ */
  .i-cta{ padding:56px 0 64px; }               /* war 112/112 */
  .i-cta__title{ max-width:none; }
  .i-cta__actions{ margin-top:32px; flex-wrap:wrap; justify-content:center; gap:12px; }
}

/* ---------- /insider · C 901-1689 FREIE KOMPOSITION MITWACHSEND ---------- */
@media (min-width:901px) and (max-width:1689px){

  /* Hero: Desktop-Anlage — Kicker links oben, darunter die linksfallende
     Treppe, Lead und CTA. Alle drei Bloecke MITTIG ueber die volle Breite
     (fit-content + auto-Raender = Jans festes Muster; der Desktop-Treppen-
     block steht nachgemessen exakt seitenmittig). Erster Bildschirm =
     Text + Sketch, Making-of unterm Falz: die Copy reserviert
     min(Falzhoehe, 800px) — 800 = exakt die Desktop-Reservierung
     (940 - 140), damit springt an der 1690er-Kante nichts. */
  :root{ --i-kicker-y:-48px; }       /* „Kicker etwas hoeher" (CI wie /method + /book + /app C) */
  .i-hero{ --i-band-pad:clamp(88px, 56.19px + 4.9618vw, 140px); }
  .i-hero__copy{ min-height:min(calc(100lvh - 79px - var(--i-band-pad)), 800px); }

  /* ⚠ Die BASIS-Margins der Treppen-Woerter (0/0.9ch/1.8ch) gehoeren zu den
     genullten 1920-Fluegen. Desktop NACHGEMESSEN: Stufen ab w3 (linkeste
     Zeile) 0/+165/+378 bei 76px = em-Rhythmus, der mit der Schrift
     mitschrumpft (EN-Zeilen sind aehnlich breit — passt ab 901). */
  .i-hero__word.w1{ margin-left:4.97em; }
  .i-hero__word.w2{ margin-left:2.17em; }
  .i-hero__word.w3{ margin-left:0; }
  /* Desktop-Zeilenraster: +60/+71 Extra-Luft bei 62er-Zeilenbox.
     Inhaber 28.07. (iPad quer): „Zeilen um eine halbe Zeile enger, ‚über
     100 Pferde' als Anker" — die Schrift selbst ist korrekt (Kurve wie die
     Geschwisterseiten; die langen /insider-Zeilen lassen sie nur groesser
     wirken). Der Anker traegt von selbst: die Flex-Spalte haengt an w1,
     enger = w2/w3 ruecken hoch. Kurve: 0.38em (= halbe 0.82er-Zeilenbox
     enger) @1180, waechst auf die vollen 0.79em @1689 = Desktop-Anschluss;
     die em-Klemmen halten beide Enden schriftproportional. */
  .i-hero__headline{ gap:clamp(0.38em, -62.77px + 7.269vw, 0.79em); width:fit-content; margin-inline:auto; }
  .i-hero__word.w3{ margin-top:0.14em; }

  /* Lead mittig unter der Treppe, die zwei pre-line-Zeilen bleiben im Block
     linksbuendig wie am Desktop; Links-Tick -28 als eigener Transform
     (Inhaber 28.07., die Panel-Fluege sind genullt). Hoehe zweimal
     nachjustiert (Inhaber 28.07.): erst „eine Zeile hoeher" (40@1180),
     dann — nach dem ersatzlosen CTA-Aus — „um zwei Zeilen tiefer, sonst
     schaut das unten drunter leer aus": jetzt 96@1180, Kurve faellt leicht
     zur Kante und trifft weiter 90@1689 = Desktop-Anschluss. */
  .i-hero__lead{ margin-top:clamp(90px, 109.91px - 1.179vw, 100px); width:fit-content; margin-inline:auto; transform:translateX(-28px); }

  /* Hero-CTA 28.07. ersatzlos raus (Inhaber) — Markup entfernt, s. insider.html */

  /* Sketch buendig an der rechten Kante (Desktop laeuft 10px hinaus =
     derselbe Angeschnitten-Look), Mitte bei 57% des ersten Bildschirms
     (Kopfbalken bis Falz bzw. 800er-Deckel — identisch zur Copy-Rechnung).
     Inhaber 28.07. (iPad quer): „10% kleiner, etwas weiter nach unten" —
     Breite @1180 jetzt 371 statt 412 (−10%); Absenkung erst +50, dann
     Nachzug „noch eine Zeile weiter nach unten" (hing in der Luft) =
     +78@1180; beide Korrekturen laufen zur Kante hin aus und treffen
     @1689 weiter die Desktop-Werte (525 / 57%-Anker). Ecken-/Kanten-
     Anker statt Mitten-Anker -> transform:none (s. Handy-Block-Kopf);
     --i-av-x/y/scale wirken nur noch am Desktop, das Panel schreibt
     dort weiter. */
  .i-hero__bg-avatar{
    --i-av-c-w:clamp(286px, 14px + 30.26vw, 525px);
    left:auto; right:0;
    top:calc((var(--i-band-pad) + min(calc(100lvh - 79px - var(--i-band-pad)), 800px)) * 0.57 - var(--i-av-c-w) / 2 + clamp(0px, 258.83px - 15.324vw, 120px));
    width:var(--i-av-c-w);
    transform:none;
  }

  /* ============ 2 · BEI DER ARBEIT ============ */
  /* 636:620 des Desktops als Verhaeltnis; gap + Hoehenausgleich skalieren
     und treffen bei 1689 die Desktop-Werte (Container deckelt auf 1320) */
  .i-atwork__row{
    grid-template-columns:minmax(0, 1.03fr) minmax(0, 1fr);
    gap:clamp(40px, 12.56px + 3.046vw, 64px);
  }
  .i-atwork__copy{ padding-top:clamp(75px, 23.55px + 5.711vw, 120px); }

  /* ============ 3 · DATEN-ARCHIV ============ */
  /* 4 nebeneinander braucht die vollen 306er-Karten („über 20 Jahre" laeuft
     sonst um) — unterhalb ~1400 als 2x2 (Inhaber-Muster vom Handy), gedeckelt
     und mittig; ab 1401 traegt der 1320er-Container exakt die Desktop-Masse. */
  .i-data__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
    max-width:820px;
    margin-inline:auto;
  }

  /* ============ 4 · DAS SAGEN DIE PFERDE ============ */
  /* Desktop-Anlage (1fr 340px, gap 64, Ausgleich 120) passt ab 901
     unveraendert — Textspalte @901 noch 417px breit, kein Eingriff. */
}
@media (min-width:1401px) and (max-width:1689px){
  /* Daten-Archiv zurueck auf die Desktop-Reihe: Container ist ab 1400
     gedeckelt (Inhalt 1320) -> 4 Spalten a 306 + gap 32 = Desktop exakt */
  .i-data__grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:32px;
    max-width:none;
    margin-inline:0;
  }
}

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