/* ==============================================================
   hero.css  ·  Besitzer: P2 Hero & Umschalter
   Teil A (unten): v4 „Leuchttisch“ K20 + Lade-Moment 9.2, Markup aus
     includes/hero-stapel.php (kh_hero_stapel / kh_hero_start).
     Klassen .hero-lt-*; keine Ueberschneidung mit Teil B.
   Teil B (direkt hier): ALTBESTAND v3 (.hero-gross, .hero-bild,
     .trust-*), aus style.css herausgeloest am 24.09.2026 (P0).
     Wird noch von index.php (bis Montage P12) und zuhause.php (bis
     Montage P13) benutzt. Rueckbau durch P14, sobald beide Seiten
     kh_hero_stapel() nutzen (Pruefung: grep "hero-gross" *.php = 0).
   ============================================================== */

/* ==============================================================
   Premium-Ausbau: Hero mit Bild, Zahlen, Bewertungen, Bildband
   ============================================================== */
/* ---- Hero zweispaltig ---------------------------------------- */

.hero-grid{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:center;grid-template-columns:1fr}

@media (min-width:60rem){
  .hero-grid{grid-template-columns:1.05fr .95fr}
}

.hero-text{min-width:0}

/* Die Magenta-Haarlinie aus dem Logo als Kante am Bild */

/* ---- Trust-Streifen im Hero ---------------------------------- */

/* Gold-Hue 36 Grad, aber abgedunkelt: das helle #E8A33B haette auf dem
   hellen Streifen nur 1,81:1 und waere praktisch unsichtbar gewesen.
   #996516 liegt bei 4,18:1 und bleibt als Gold erkennbar. */

.trust-txt{font-size:.94rem;color:var(--text)}

.trust-txt strong{font-family:var(--schrift-titel);font-weight:700}

/* ---- Erster Bildschirm (Peters Update 23.09.2026) --------------
   Hero + Bewertung + Bereichswahl + Zahlenband sollen ohne Scrollen
   sichtbar sein. Dafuer die Abstaende im Hero enger und die Wahl
   kompakt; alles fluid, keine feste Hoehe (die Texte sind im
   Redaktionsbereich aenderbar, eine feste Hoehe wuerde abschneiden). */

.hero-cta{row-gap:.8rem}

/* Die Textspalte bekommt mehr Breite: so stehen die zwei Knoepfe
   nebeneinander statt untereinander, die H1 braucht eine Zeile weniger. */

/* ---- "Jetzt Bewertung abgeben" neben der Bewertung ------------ */
.trust-bewerten{
  display:inline-flex;align-items:center;gap:.35rem;min-height:44px;
  font-family:var(--schrift-titel);font-weight:600;font-size:.94rem;
  color:var(--accent-text);text-decoration:none;
}

/* Durchgezogener Strich statt Unterstreichung: text-decoration setzt an
   Unterlaengen (g) aus und bricht zwischen Flex-Teilen ab. Die Linie
   sitzt deshalb als Rahmen unter einem einzigen Textblock. */
.tb-linie{border-bottom:2px solid currentColor;padding-bottom:1px;line-height:1.25}

.trust-bewerten:hover .tb-linie{border-bottom-width:3px;padding-bottom:0}

/* ==============================================================
   Umbau 23.09.2026 (Word-Datei, Teil 2)
   ============================================================== */
/* Ab dem Trennstrich eine graue Flaeche: trennt die Bereichswahl
   sichtbar vom Hero, ohne eine weitere Linie zu ziehen. */

/* "Jetzt Bewertung abgeben" als Knopf, gleiche Hoehe wie die Bewertung */
.btn-bewerten{
  min-height:44px;padding:.55rem 1.05rem;font-size:.94rem;
  border-color:var(--accent-text);color:var(--accent-text);gap:.4rem;
}

.btn-bewerten:hover{background:var(--wash)}

/* ---- Hero: das Material liegt auf dem Tisch -------------------------
   Ab 60rem steht das Bild rechts hinter dem Text und laeuft bis an den
   Fensterrand; ein Verlauf in --bg macht die linke Bildkante zur Tisch-
   flaeche, auf der der Text liegt. Mobil bleibt es unter dem Text. */
/* Ab 70rem (Review 24.09.: bei 960-1060 px lag der Text auf dem Bild,
   gemessen 1,8-2,9:1). Darunter bleibt das zweispaltige Raster von oben. */

/* Der Moment: der Lichttisch geht an. Einmal beim Laden, ~1,6 s. */

@keyframes licht-an{from{filter:brightness(.42) saturate(.25)}to{filter:none}}

@keyframes lichtstreif{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

@keyframes rule-zieht{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ##############################################################
   TEIL A · v4 „Leuchttisch“ (P2, Plan 8.3 K20, 9.2, 11.1)
   Aufbau:  section.hero-lt.f-papier > .wrap.hero-lt-raster
              .hero-lt-text   Kicker, H1, Lead, Knoepfe (bewegt sich nie)
              .hero-lt-stapel [data-hero-stapel]
                .hero-lt-licht  warmer Schein (nur Deko, nie hinter Text)
                .hero-lt-tisch  .hero-lt-neben--oben, --unten, .hero-lt-haupt,
                                .hero-lt-etikett
                .hero-lt-karte  Bewertung (Entscheidung 2)
   Regeln fuer die Ueberdeckung (Plan 12.1): Karte und Etikett liegen nie
   auf dem Bogenrand (KI-Hinweis, Bildangabe). Die Karte greift nur in den
   unteren Papierrand des Hauptbogens (Plattenversatz + 8 px, Text beginnt
   erst ~10 px ueber der Unterkante), das Etikett nur ins Bild oben.
   Die kleinen Boegen liegen HINTER dem Hauptbogen und tragen auf der
   Startseite keinen Randtext.
   ############################################################## */
.hero-lt{
  position:relative;overflow-x:clip;
  padding-block:clamp(1.75rem, .9rem + 3.4vw, 4rem) clamp(2.5rem, 1.4rem + 4vw, 5rem);
}
.hero-lt-raster{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem, .5rem + 2.4vw, 2.5rem);align-items:center;
}
.hero-lt-text{min-width:0}
.hero-lt h1{margin:0 0 1.1rem;max-width:none}
/* Lead: keine Silbentrennung - im Hero wirkt jede Trennung wie ein Stolperer */
.hero-lt-lead{margin:0 0 1.6rem;hyphens:manual}
.hero-lt-cta{row-gap:.8rem}

/* ---- Stapel ---- */
.hero-lt-stapel{position:relative;isolation:isolate;min-width:0}
.hero-lt-licht{
  position:absolute;inset:-6% -4% -2% -2%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, var(--licht) 30%, color-mix(in oklch, var(--licht) 0%, transparent));
}
.hero-lt-tisch{position:relative;padding-top:1.1rem}
.hero-lt-haupt{position:relative;z-index:2}
/* Mehr Papier unter dem Randtext: dort greift die Bewertungskarte hinein */
.hero-lt-haupt .bogen-rand{padding-bottom:.75rem}
/* Mobil: nur der Hauptbogen (Plan 8.3). lazy + display:none = nie geladen */
.hero-lt-neben{display:none}

/* Etikett „klebt“ schraeg an der Oberkante - im Bild, nie auf dem Rand */
.hero-lt-etikett{
  position:absolute;z-index:3;top:0;left:clamp(1rem, 4%, 1.75rem);margin:0;
  padding:.3rem .7rem;border-radius:var(--r-chip);
  background:var(--flaeche-licht);color:var(--text);
  box-shadow:3px 3px 0 var(--platte), var(--sh-1);
  rotate:-2deg;
}

/* ---- Bewertungskarte ---- */
.hero-lt-karte{
  position:relative;z-index:3;
  display:grid;justify-items:start;gap:.1rem;
  /* mobil links: der Hauptbogen ist um +1,5 Grad gedreht, links liegt sein Rand hoeher */
  width:min(100% - 1.5rem, 21rem);margin:calc(-1 * var(--versatz) - 10px) auto 0 .75rem;
  padding:.9rem 1.15rem .75rem;
  background:var(--flaeche-licht);color:var(--text);
  border-radius:var(--r-karte);
  box-shadow:inset 0 3px 0 var(--platte), var(--sh-2);
}
.hero-lt-sterne{display:inline-flex;gap:2px;color:var(--cyan)}
.hero-lt-sterne svg{display:block}
.hero-lt-schnitt{
  display:block;padding-block:.25rem;
  color:var(--text);text-decoration:none;line-height:1.35;font-size:1rem;
}
.hero-lt-schnitt strong{
  font-family:var(--schrift-titel);font-weight:780;font-stretch:88%;
  font-size:1.5rem;letter-spacing:-.01em;line-height:1.1;
}
.hero-lt-bewerten{
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  font-family:var(--schrift-titel);font-weight:640;font-stretch:96%;font-size:1rem;
  color:var(--accent-text);text-decoration:none;
}
/* Durchgezogener Strich statt Unterstreichung (bricht nicht an Unterlaengen) */
.hero-lt-linie{border-bottom:2px solid currentColor;padding-bottom:1px;line-height:1.25;white-space:nowrap}
.hero-lt-bewerten .pfeil{display:inline-block;transition:translate var(--t-kurz) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .hero-lt-schnitt:hover{text-decoration:underline;text-underline-offset:.2em}
  .hero-lt-bewerten:hover .hero-lt-linie{border-bottom-width:3px;padding-bottom:0}
  .hero-lt-bewerten:hover .pfeil{translate:4px 0}
}

/* ---- Ab 60rem: zwei Spalten 1,1 : 1, drei Boegen ---- */
@media (min-width:60rem){
  .hero-lt-raster{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .hero-lt-tisch{padding-top:2.75rem}
  .hero-lt-haupt{width:84%}
  .hero-lt-neben{display:block;position:absolute;z-index:1;margin:0}
  /* oben rechts, schaut ueber und neben dem Hauptbogen hervor */
  .hero-lt-neben--oben{top:0;right:var(--versatz);width:42%}
  /* unten rechts, ragt unter dem Hauptbogen hervor; rechts von der Karte */
  .hero-lt-neben--unten{right:var(--versatz);bottom:-5rem;width:38%}
  .hero-lt-etikett{top:calc(2.75rem - 1.1rem)}
  /* Karte ueber der Unterkante, links ueber die Bogenkante hinaus */
  .hero-lt-karte{width:min(62%, 20rem);margin-left:-1.25rem;margin-right:0}
}

/* ---- Der eine Lade-Moment: Reissleine ohne JS-Abhaengigkeit (Plan 9.2) ----
   Nur mit JavaScript (html.js bzw. html.js-menu aus js-an.js im Kopf) und
   nur ohne Bewegungswunsch: die Teile warten verborgen auf hero.js. hero.js
   setzt sofort .ist-bereit und spielt die Landung per WAAPI (fill backwards,
   danach cancel). Startet hero.js nie, stehen die Teile nach 2,5 s trotzdem da. */
@media (prefers-reduced-motion:no-preference){
  :is(.js, .js-menu) .hero-lt-stapel:not(.ist-bereit) .hero-lt-teil,
  :is(.js, .js-menu) .hero-lt-stapel:not(.ist-bereit) .hero-lt-licht{
    opacity:0;animation:kh-hero-sichtbar 0s 2.5s forwards;
  }
}
@keyframes kh-hero-sichtbar{to{opacity:1}}

/* Zweiter axe-Lauf ohne Deko */
.ohne-deko .hero-lt-licht{display:none}

/* ##############################################################
   NACHBESSERUNG 25.09.2026 (Design-Jury Befunde 2, 3, 4, 15)
   ############################################################## */
/* Befund 2 (Groessenkontrast) bewusst NICHT ueber die H1-Groesse geloest:
   Peter will H1 hoechstens 3rem (Word-Datei 23.09.), Sebastian bestaetigt
   25.09. "keine riesen H1". Die Obergrenze steht in basis.css (h1, max 3rem),
   die Betonung der zweiten Haelfte bleibt ueber Saira-Achsen + Akzentfarbe
   (basis.css "h1 b"). Kein font-size-Override fuer .hero-lt h1 hier. */
/* Befund 3: der warme Leuchttisch-Schein ist im Endzustand zu sehen */
.hero-lt-licht{
  inset:-12% -8% -6% -6%;
  background:radial-gradient(closest-side, var(--licht) 55%, color-mix(in oklch, var(--licht) 0%, transparent));
}
/* Befund 4: ruhiger Stapel - ein Nebenbogen ohne eigene Registermarken,
   er schaut oben rechts deutlich hervor statt fast ganz verdeckt zu liegen. */
.hero-lt-neben.bogen::before,.hero-lt-neben.bogen::after{display:none}
@media (min-width:60rem){
  .hero-lt-tisch{padding-top:3.75rem}
  .hero-lt-haupt{width:86%}
  .hero-lt-neben--oben{top:0;right:0;width:40%}
  .hero-lt-etikett{top:calc(3.75rem - 1.1rem)}
}