/* ============================================================
   responsive.css — Startseite Mobile/Tablet-Overrides
   (ADDITIV, LETZTE Kaskaden-Schicht — laedt NACH home-hub.css).
   Desktop (> 640px) bleibt der abgenommene Fix-1920-Stand voellig
   unberuehrt; hier stehen NUR Mobile-Overrides.

   Vorbild: die abgenommene .app-responsive.css. EIN entscheidender
   Unterschied zur .app: Die Startseiten-Hero-Positionen kommen NICHT
   aus CSS-Variablen, sondern werden per Inline-JS (updateLP() in
   index.html) als element.style.transform gesetzt (1920-getunte Werte,
   laufen immer — auch ohne ?panel=1). Eine normale CSS-Regel verliert
   gegen einen Inline-Style — ABER ein Stylesheet-`!important` schlaegt
   normale Inline-Styles (Kaskade sortiert erst nach Herkunft+Wichtigkeit,
   DANN nach Spezifitaet: important-author > normal-inline). Darum stehen
   die Hero-Neutralisierungen unten mit `!important`. Die JS-Datei bleibt
   damit unberuehrt — die delikate Sprach-Werte-Mechanik der Startseite
   ist tabu.

   Zwei UNABHAENGIGE Ueberlaufquellen werden hier geschlossen:
   (1) .container{width:1400px}  (2) .hub-teaser-grid = 4x fixe 322px.
   Nur .hero hat overflow:hidden — Hub/Footer nicht, darum sind
   BEIDE Zeilen tragend, nicht kosmetisch.

   Reihenfolge: MOBILE (<= 640px) zuerst; TABLET (641-1024) folgt als
   eigene Runde (Platzhalter am Ende).
   ============================================================ */

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

  /* --- Container: fixe 1400px killen (Ueberlaufquelle 1) --- */
  .container{ width:100%; max-width:100%; padding:0 18px; }

  /* --- Bau-Panel + Viewport-Anzeige mobil aus (schon ?panel=1-gated;
         doppelter Boden, am Handy ohnehin unbedienbar) --- */
  #lc, #vp-ind{ display:none !important; }

  /* ============================================================
     HERO — die JS-Inline-Transforms neutralisieren (s. Kopf).
     Trifft ALLE per updateLP() positionierten Elemente; `!important`
     ist Pflicht (schlaegt den Inline-Style).
     ============================================================ */
  .hero-kicker,
  .hero-headline .hero-word,
  .hero-problem,
  .hero-subline,
  .hero-actions,
  .hero-brand-group,
  .hero-motto,
  .hero-hoof{ transform:none !important; }

  .hero{ padding:66px 0 56px; }        /* Inhaber 25.07.: Wortmarke ~1 Zeile hoeher (war 92). Mehr geht nicht — bei y<~60 kollidiert die zentrierte Wortmarke mit der DE/EN/ES-Zeile (y6-54). */
  /* LUFT-Runde (Inhaber 25.07.: „klebt noch zu sehr aneinander"): die Hero-Bloecke
     grosszuegiger trennen — hier Huf-Block ↔ Textblock (Kicker).
     `minmax(0,1fr)` statt `1fr`: der breit gemachte Huf (min(380px,96vw)) hat eine
     feste min-content-Breite; ein blankes `1fr` (Minimum = auto = min-content) waere
     dadurch auf Huf-Breite aufgeblaeht worden -> Grid-Blowout, alles 2px ueber den
     Rand. minmax(0,…) haelt die Spalte auf Container-Breite; der Huf zentriert einfach
     symmetrisch darueber hinaus (bleibt im Viewport). */
  .hero-inner{
    grid-template-columns:minmax(0, 1fr); /* zwei feste Spalten -> eine (blowout-fest) */
    gap:66px;                          /* Huf-Icon ↔ Kicker +1 Zeile (Inhaber 25.07.). War 36. Das ist der EINZIGE Abstand zwischen den beiden Bloecken — .hero-visual steht per order:-1 vor .hero-copy. */
    min-height:0;                      /* 800px killen */
  }
  .hero-copy{
    max-width:none;
    padding-top:0;
    text-align:center;
    /* DUNKLE FLAECHE = MINDESTENS EIN BILDSCHIRM (Inhaber 25.07.).
       Problem: sobald der Huf oben gerade aus dem Bild gescrollt ist, endete die
       Buehne schon 754px spaeter — bei jedem Bildschirm, der mehr als 754px zeigt,
       leuchtete darunter der helle Hub-Streifen herein. Wieviel, schwankte mit
       Safaris Adressleiste (ein-/ausgeklappt = ~734 bis ~850px sichtbar), was wie
       ein Sprachunterschied aussah — DE und EN sind pixelgleich (nachgemessen).

       Die Strecke von der Huf-Unterkante bis zum Buehnenende ist
       gap + diese Box + .hero-padding-bottom. Setzt man die Box auf
       „Bildschirm minus die beiden festen Anteile", ist die Strecke genau ein
       Bildschirm — der helle Streifen kann nicht mehr ins Bild kommen. Der Glow
       des Hufs (~50px transparenter Rand unten) ist stiller Zusatzpuffer.

       lvh = die GROSSE Viewporthoehe (Leisten eingeklappt) und damit der
       unguenstigste Fall; sie bleibt beim Scrollen stabil, anders als dvh — sonst
       wuerde das Layout beim Ein-/Ausklappen der Leiste springen. Die 100vh-Zeile
       darueber ist der Fallback fuer aeltere Browser; auf iOS meint 100vh ohnehin
       schon dieselbe grosse Hoehe.
       ⚠ Die zwei Abzuege muessen mitgepflegt werden, wenn .hero-inner{gap} oder
       .hero{padding-bottom} sich aendern. */
    min-height:calc(100vh  - 66px - 56px);
    min-height:calc(100lvh - 66px - 56px);
  }

  /* Kicker: nowrap raus (sprengt sonst 375px), Groesse runter. Der Basis-Transform
     translateY(-132px)… faellt durch das !important oben weg.
     ZWEIZEILIG + VERSETZT (Inhaber 25.07., wie .app-Kicker „A Trainer,/Not a
     Sculptor"): erste Behauptung „Stop cutting" oben, „hooves out of shape."
     leicht eingerueckt darunter. Die zwei Spans (kicker-highlight + unbenannt)
     existieren schon in index.html -> reine CSS-Umschaltung, KEIN JS.
     Als inline-block linksbuendig, im zentrierten .hero-copy als Ganzes zentriert
     (sonst wuerde jede Zeile einzeln zentriert und der Versatz waere weg). */
  .hero-kicker{
    display:inline-block;
    text-align:left;
    margin:0 0 72px;                   /* Kicker ↔ Headline +1 Zeile (Inhaber 25.07.). War 42. */
    font-size:1.5rem;
    line-height:1.3;
    white-space:normal;
  }
  .hero-kicker .kicker-highlight{ display:block; }
  .hero-kicker .kicker-highlight + span{ display:block; margin-left:1.7em; }
  .hero-mainblock{ margin-top:0; }     /* Desktop-Abstand 104px raus */

  /* Headline zentriert; die Treppe (margin-left je Wort) faellt mobil weg —
     zentrierte Woerter koennen nicht gleichzeitig gestaffelt sein. Gewinnt per
     Ladereihenfolge (responsive.css nach home.css, gleiche Spezifitaet).
     ⚠ VETO-Zeilen fuer eine gestaffelte Handy-Treppe: align-items + der
     margin-left-Reset direkt darunter loeschen. */
  .hero-headline{
    align-items:center;
    font-size:2.6rem;
    line-height:1.0;
    letter-spacing:-0.04em;
  }
  .hero-headline .hero-word{ margin-left:0; }

  /* Problem / Subline: linksbuendigen 0.9ch-Versatz raus, mittig, lesbare Breite. */
  .hero-problem{
    margin:64px auto 0;                 /* Headline ↔ „Why most" +1 Zeile eingeschoben (Inhaber 25.07.). War 34. */
    font-size:1.7rem;
    max-width:20ch;
    line-height:1.1;
    /* pre-line = die \n aus content/home.js werden zu Zeilenumbruechen, alles
       andere bricht weiter normal um. Betrifft nur EN/ES („Why most / hoof
       problems / never disappear.", Inhaber 25.07.); der DE-Text enthaelt kein
       \n und bricht unveraendert von selbst. Desktop bleibt white-space:normal
       -> dort ist das \n ein Leerzeichen, die Zeile sieht aus wie bisher. */
    white-space:pre-line;
  }
  /* ES ein Punkt kleiner als EN (Inhaber 02.08.). :lang noetig, sonst
     gewinnt die Desktop-ES-Regel aus home.css (:lang-Spezifitaet
     schlaegt die .hero-problem-Zeile darueber) auch am Handy. */
  :lang(es) .hero-problem{ font-size:1.6rem; }
  .hero-subline{
    margin:22px auto 0;                 /* Luft-Runde (war 16) */
    font-size:1.05rem;
    max-width:34ch;
  }

  /* CTA mittig (Inhaber-Linie von der .app uebernommen), natuerliche Breite. */
  .hero-actions{
    margin:68px 0 0;                    /* Subline („Hufprobleme erkennen und loesen") ↔ CTA +1 Zeile (Inhaber 25.07.). War 38. */
    justify-content:center;
  }
  .hero-actions .button-primary{ width:auto; }

  /* ---------- Hero-Visual: Marken-Block (Wortmarke + Motto + Huf) ----------
     Desktop: absolut gesetztes Schaustueck rechts (720px min-height,
     Brand-Group absolute top:-176px, Huf 566/549px).
     MOBIL BRAND-FIRST (Inhaber 25.07.): alles in den normalen Fluss, zentriert,
     und per `order:-1` VOR den Text — Wortmarke + Motto + Huf oeffnen den Hero
     (Marken-Moment), der Kicker lugt darunter am Falz herein. Reorder nur mobil
     (order gilt nur hier), Desktop unberuehrt. Der gluehende Huf ist bewusst das
     Highlight — kein Hintergrund-Schimmer (Reserve-Hebel, s. Report 25.07.). */
  .hero-visual{
    order:-1;
    min-height:0;                      /* 720px killen */
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    margin-top:0;
    gap:52px;                          /* Marke ↔ Huf; +26 haelt den Huf an Ort, waehrend die Wortmarke ~1 Zeile hochrueckt (Inhaber 25.07.: „Icon bleibt stehen"). War 26. */
  }
  .hero-visual::before,
  .hero-visual::after{ display:none; } /* Glow-Blobs (Prozent-Insets) mobil raus */

  .hero-brand-group{
    position:static;                   /* aus absolute in den Fluss */
    left:auto; top:auto;
    align-items:center;
    gap:18px;                          /* Luft-Runde: Wortmarke ↔ Motto (war 4) */
  }
  .hero-wordmark{
    width:min(280px, 78vw) !important; /* Inline 416px ueberschreiben */
  }
  /* Motto: nowrap + weites Tracking ist bei ~339px Inhaltsbreite knapp —
     Groesse leicht runter, damit es sicher nicht abgeschnitten wird. */
  .hero-motto{
    font-size:12.5px;
    letter-spacing:0.14em;
  }
  .hero-hoof{
    /* Inline 549px ueberschreiben. Der Glow frisst Rand: die FARBIGE Huf-Masse ist
       nur ~73% der PNG-Box (gemessen 749/1024). Damit die sichtbare Masse die
       Wortmarke (~280px) erreicht -> Box ~380px (380*0.73 ≈ 278px Masse). Der
       96vw-Deckel haelt schmale Geraete (z.B. 375) ueberlauffrei; Desktop unberuehrt.
       Inhaber 25.07.: „Icon so breit wie die Wortmarke, vielleicht etwas breiter". */
    width:min(380px, 96vw) !important;
    margin-top:6px;
  }

  /* ============================================================
     HUB-KARTEN (Saeulen-Teaser) — 4 feste 322px-Spalten (=1360px,
     Ueberlaufquelle 2, eigene: nur .hero hat overflow:hidden) -> 2x2.
     ============================================================ */
  .hub-teaser{ padding:60px 0 56px; }
  .hub-teaser-header{ margin-bottom:28px; }
  .hub-teaser-title{ font-size:1.5rem; }
  .hub-teaser-grid{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  /* „Preview"-Tag der Buch-Karte: 42px ist auf der kleinen Karte zu gross. */
  .hub-card-preview{ font-size:24px; letter-spacing:0.08em; }

  /* Trust-Strip 2026-07-25 entfernt (Inhaber) — mobile .hub-trust-Regeln mit raus. */

  /* ---------- Footer-Nav (umbricht schon; nur Tap-Luft + engere Luecken) ---------- */
  .site-footer{ padding:36px 0; }
  .footer-nav{ gap:14px 18px; }
  .footer-nav a{ padding:6px 2px; }

  /* ---------- Header (nur Sprachfelder + leerer Brand-Anker) ---------- */
  .header-inner{ min-height:60px; gap:12px; }
}


/* ===================== TABLET + LAPTOPS  (641 – 1689px) ===================== */
/* Bandgrenze GEMESSEN, nicht geplant (27.07.): das Fix-1920-Design ist auf allen
   fuenf Seiten erst ab 1686px ueberlauffrei (Ausreisser ueberall = der Hero-
   Kicker-Versatz links vom 1400er-Container). 641-1689 wie die abgenommene .app
   (dort dieselbe Kante) — Desktop ab 1690 voellig unberuehrt.
   Anlage = Inhaber-Entscheid 27.07., Spiegel der .app:
   A · 641-1689 gemeinsam (Transforms neutral, Container fluid, clamp-Kurven, die
       bei 1689 punktgenau die Desktop-Werte treffen — kein Sprung an der Kante)
   B · 641-900  gestapelt wie Handy (brand-first, zentriert)
   C · 901-1689 zweispaltig mitwachsend                                        */

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

  /* Fixe 1400 -> fluid mit Deckel (Lehre .app: der Deckel BLEIBT, sonst laufen
     die Spalten auseinander und springen an der Desktop-Grenze zurueck) */
  .container{ width:100%; max-width:1400px; padding:0 40px; }

  /* Bau-Panel + Viewport-Anzeige im Band aus (wie mobil) */
  #lc, #vp-ind{ display:none !important; }

  /* Die updateLP()-Inline-Transforms neutralisieren — !important schlaegt
     Inline-Styles (siehe Kopf der Datei). Uebrig bleibt die CSS-Basis:
     die kleinen ch-Treppen-Margins der Headline-Woerter tragen in C eine
     natuerliche linksbuendige Treppe (Muster .app-Tablet). */
  .hero-kicker,
  .hero-headline .hero-word,
  .hero-problem,
  .hero-subline,
  .hero-actions,
  .hero-brand-group,
  .hero-motto,
  .hero-hoof{ transform:none !important; }

  .hero-inner{ min-height:0; }         /* 800px killen */
  .hero-visual{ min-height:0; }        /* 720px killen */
  .hero-visual::before,
  .hero-visual::after{ display:none; } /* Glow-Blobs (Prozent-Insets) wie mobil raus */
  .hero-brand-group{
    position:static;                   /* aus absolute in den Fluss */
    left:auto; top:auto;
    align-items:center;
    gap:16px;
  }

  /* Der nowrap-Kicker braeuchte einspaltig ~690px — unterhalb ~1490 darf er
     umbrechen (B baut ihn ohnehin zweizeilig-versetzt um). */
  .hero-kicker{ white-space:normal; }

  /* Schriftkurven: treffen bei 1689 punktgenau den Desktop-Wert (Muster .app).
     Headline 44->77 · Kicker 24->37.44 · Problem 24->36.8 · Subline 16->18.24 */
  .hero-headline{ font-size:clamp(44px, 23.82px + 3.1489vw, 77px); }
  .hero-kicker{ font-size:clamp(24px, 15.78px + 1.2824vw, 37.44px); }
  .hero-problem{ font-size:clamp(24px, 16.17px + 1.2214vw, 36.8px); }
  .hero-subline{ font-size:clamp(16px, 14.63px + 0.2137vw, 18.24px); }
  /* ES ein Punkt (0.1rem=1.6px) unter der EN-Kurve (Inhaber 02.08.); Deckel
     35.2px = Desktop-ES 2.2rem -> kein Kantensprung bei 1690. :lang noetig,
     sonst sticht die Desktop-ES-Regel aus home.css das ganze Band. */
  :lang(es) .hero-problem{ font-size:clamp(22.4px, 14.57px + 1.2214vw, 35.2px); }

  /* Sektions-Polster: 96/64 -> 180/84 (Hero) · 84/72 -> 112/96 (Hub) */
  .hero{ padding:clamp(96px, 44.62px + 8.0153vw, 180px) 0 clamp(64px, 51.77px + 1.9084vw, 84px); }
  .hub-teaser{ padding:clamp(84px, 66.87px + 2.6718vw, 112px) 0 clamp(72px, 57.32px + 2.2901vw, 96px); }
  .hub-teaser-header{ margin-bottom:clamp(36px, 23.77px + 1.9084vw, 56px); }
  .hub-teaser-title{ font-size:clamp(24px, 19.11px + 0.7634vw, 32px); }
}

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

  .hero{ padding:72px 0 64px; }
  .hero-inner{
    grid-template-columns:minmax(0, 1fr); /* blowout-fest, s. Mobile-Block */
    gap:66px;
  }
  /* Dunkle Flaeche = mindestens ein Bildschirm (Inhaber-Prinzip vom Handy).
     ⚠ Abzuege = .hero-padding oben+unten — mitpflegen bei Aenderung. */
  .hero-copy{
    max-width:none;
    padding-top:0;
    text-align:center;
    min-height:calc(100vh  - 136px);
    min-height:calc(100lvh - 136px);
  }

  /* Kicker zweizeilig-versetzt wie am Handy (Spans existieren im Markup) */
  .hero-kicker{
    display:inline-block;
    text-align:left;
    margin:0 0 72px;
    line-height:1.3;
  }
  .hero-kicker .kicker-highlight{ display:block; }
  .hero-kicker .kicker-highlight + span{ display:block; margin-left:1.7em; }
  .hero-mainblock{ margin-top:0; }     /* Desktop-104 raus */

  /* Headline zentriert, Treppe faellt weg (wie Handy — Veto-Zeilen:
     align-items + margin-Reset darunter loeschen) */
  .hero-headline{ align-items:center; line-height:1.0; letter-spacing:-0.04em; }
  .hero-headline .hero-word{ margin-left:0; }

  .hero-problem{
    margin:64px auto 0;
    max-width:20ch;
    line-height:1.1;
    white-space:pre-line;              /* \n aus content/home.js (EN/ES) */
  }
  .hero-subline{ margin:22px auto 0; max-width:34ch; }
  .hero-actions{ margin:68px 0 0; justify-content:center; }
  .hero-actions .button-primary{ width:auto; }

  /* Brand-first: Wortmarke + Motto + Huf oeffnen den Hero (wie Handy) */
  .hero-visual{
    order:-1;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    margin-top:0;
    gap:56px;
  }
  .hero-wordmark{ width:min(320px, 42vw) !important; }
  .hero-hoof{ width:min(430px, 56vw) !important; margin-top:6px; }  /* Masse ~73% der Box ≈ Wortmarke */
  .hero-motto{ font-size:13px; letter-spacing:0.16em; }

  .hub-teaser-grid{ grid-template-columns:1fr 1fr; gap:20px; }       /* 4x322 -> 2x2 */
  .hub-card-preview{ font-size:26px; letter-spacing:0.08em; }
}

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

  /* Kopf-Polster ~100px runter = ~2,5 Kicker-Zeilen hoeher (Inhaber 02.08.:
     „ewig viel Platz nach oben", alle Sprachen). Gleiche Steigung wie die
     Band-Kurve (96->180), nur abgesenkt — kein Sprung im Band; galt seit
     der Abnahme 28.07. unveraendert, jetzt bewusst korrigiert. */
  .hero{ padding-top:clamp(20px, -55.38px + 8.0153vw, 80px); }

  /* 687:659 als Verhaeltnis weitergefuehrt */
  .hero-inner{
    grid-template-columns:minmax(0, 1.04fr) minmax(0, 1fr);
    gap:clamp(36px, 15.42px + 2.284vw, 54px);
  }

  .hero-mainblock{ margin-top:48px; }  /* Desktop-104 galt mit hochgezogenem Kicker */

  /* Marken-Spalte im Fluss: Wortmarke + Motto + Huf untereinander, mittig.
     Groessen konvergieren bei 1689 auf die Desktop-Inline-Werte (416/549). */
  .hero-visual{
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:48px;
    padding-top:24px;
  }
  .hero-wordmark{ width:clamp(300px, 167.36px + 14.72vw, 416px) !important; }
  .hero-hoof{ width:clamp(380px, 186.76px + 21.447vw, 549px) !important; }

  /* Hub bleibt 4-in-Reihe, Karten fluid (Tuer-Rezept traegt via aspect-ratio) */
  .hub-teaser-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:clamp(16px, 6.85px + 1.015vw, 24px);
  }
  .hub-card-preview{ font-size:clamp(28px, 11.99px + 1.7766vw, 42px); }
}