/* ==========================================================================
   L1 — Landing-Hero „Produkt im Mittelpunkt"
   Gehoert zu teile/landing-hero.html. Praefix: hero-
   Nutzt ausschliesslich Tokens und Bauteile aus css/warm-modern.css.
   Keine eigenen Farbwerte, keine eigene Schrift, keine externe Ressource.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sektion und Raster
   Zweispaltig ab 1000 px. Text hoechstens 46 % breit, Produktdarstellung
   rechts. Die Buehne darf nach rechts ueber den Container hinauslaufen —
   body { overflow-x: hidden } aus der Grundschicht beschneidet sauber.
   -------------------------------------------------------------------------- */
.hero-sekt {
  padding-block: var(--s9) var(--s10);
}

.hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s8);
  align-items: center;
}

@media (min-width: 1000px) {
  .hero-raster {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    gap: var(--s7);
  }
}

/* --------------------------------------------------------------------------
   2. Textspalte
   -------------------------------------------------------------------------- */
.hero-titel {
  font-size: var(--t-h1);
  max-width: 20ch;
  text-wrap: balance;
}

.hero-lauf {
  margin-top: var(--s5);
  max-width: 44ch;
  font-size: var(--t-gross);
  color: var(--text-muted);
}

.hero-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}

.hero-vertrauen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  margin-top: var(--s6);
}

.hero-vertrauen__punkt {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-klein);
  font-weight: 700;
  color: var(--text);
}

.hero-vertrauen__zeichen {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--r-s);
  background: var(--forest-soft);
  color: var(--forest);
}

/* --------------------------------------------------------------------------
   3. Buehne
   -------------------------------------------------------------------------- */
.hero-buehne {
  margin: 0;
  min-width: 0;
}

.hero-szene {
  position: relative;
  width: 100%;
}

@media (min-width: 1000px) {
  /* Ueberstand nach rechts: die Fenster laufen ueber den Container hinaus wie
     im Referenzbild, ohne dass die Textspalte schmaler wird. Der Ueberstand
     bleibt klein genug, dass rechts daneben noch der Streifen des hinteren
     Fensters Platz hat. */
  .hero-szene { width: calc(100% + var(--s7)); }
}

.hero-unterschrift {
  margin-top: var(--s4);
  max-width: 52ch;
  font-size: var(--t-klein);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   4. Fensterrahmen
   -------------------------------------------------------------------------- */
.hero-fenster {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  overflow: hidden;
}

.hero-fenster--vorn {
  position: relative;
  z-index: 2;
}

.hero-fenster--hinten {
  display: none;
}

@media (min-width: 1000px) {
  .hero-fenster--hinten {
    display: block;
    position: absolute;
    z-index: 1;
    top: calc(var(--s6) * -1);
    left: 46%;
    right: calc(var(--s6) * -1);
    box-shadow: var(--sh-3);
    opacity: .92;
  }
}

.hero-leiste {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
}

.hero-leiste__punkte {
  display: inline-flex;
  gap: 6px;
  flex: none;
}

.hero-leiste__punkte i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
}

.hero-leiste__feld {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  border-radius: var(--r-s);
  background: var(--surface);
  border: 1px solid var(--border);
}

.hero-marker {
  flex: none;
  padding: 3px var(--s2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   5. Vorderes Fenster: Objekt-Detailseite
   -------------------------------------------------------------------------- */
.hero-flaeche {
  padding: var(--s4);
}

.hero-zurueck {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--s3);
}

.hero-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
}

@media (min-width: 620px) {
  .hero-detail { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
}

.hero-medien {
  position: relative;
  min-height: 172px;
  aspect-ratio: 16 / 10;
}

@media (min-width: 620px) {
  .hero-medien { aspect-ratio: auto; }
}

.hero-illu {
  position: absolute;
  inset: 0;
}

.hero-angaben {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.hero-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
}

.hero-kopf__text { min-width: 0; }

.hero-kopf__titel {
  font-size: var(--t-h3);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.018em;
}

.hero-kopf__unter {
  margin-top: var(--s1);
  font-size: var(--t-klein);
  color: var(--text-muted);
}

.hero-score { flex: none; }
.hero-score .wm-score__wert { font-size: var(--t-h2); }

.hero-marken {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.hero-quellen {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.hero-quelle .wm-quelle__wert { font-size: var(--t-klein); }

.hero-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s2);
}

/* --------------------------------------------------------------------------
   6. Kontaktzeile — ehrlicher Leerzustand statt erfundener Rufnummern
   -------------------------------------------------------------------------- */
.hero-kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}

@media (min-width: 620px) {
  .hero-kontakt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hero-kontakt__karte {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  background: var(--surface-muted);
  min-width: 0;
}

.hero-kontakt__zeichen {
  flex: none;
  margin-top: 2px;
  color: var(--text-muted);
}

.hero-kontakt__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hero-kontakt__rubrik {
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero-kontakt__wert {
  margin-top: 2px;
  font-size: var(--t-klein);
  font-weight: 700;
  line-height: 1.3;
}

.hero-kontakt__zusatz {
  margin-top: 2px;
  font-size: var(--t-mikro);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   7. Hinteres Fenster: angedeutete Chancenliste
   -------------------------------------------------------------------------- */
.hero-liste {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  /* rechts mehr Luft, damit der angeschnittene Rand keine halbe Ziffer zeigt */
  padding: var(--s3) var(--s5) var(--s3) var(--s3);
}

.hero-zeile {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.hero-zeile__bild {
  flex: none;
  width: 52px;
  height: 40px;
  border-radius: var(--r-s);
  background: var(--surface-sink);
  box-shadow: inset 0 0 0 1px var(--border);
}

.hero-zeile__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.hero-zeile__name {
  font-size: var(--t-klein);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-zeile__ort {
  font-size: var(--t-mikro);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-zeile__score {
  flex: none;
  font-size: var(--t-gross);
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--forest);
}

/* --------------------------------------------------------------------------
   8. Enge Breiten
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-sekt { padding-block: var(--s8); }
}

@media (max-width: 640px) {
  .hero-titel { max-width: none; }
  .hero-lauf { margin-top: var(--s4); font-size: var(--t-lauf); }
  .hero-aktionen { margin-top: var(--s5); }
  .hero-aktionen .wm-btn { flex: 1 1 220px; }
  .hero-vertrauen { margin-top: var(--s5); gap: var(--s3) var(--s4); }
  .hero-flaeche { padding: var(--s3); }
  .hero-kopf__titel { font-size: var(--t-h4); }
}

/* Unter 560 px bleibt die Detailkarte lesbar: die dritte Quellenlinie
   (Mögliche Assets, UNBESTÄTIGT) entfällt — rein per CSS, ohne Skript. */
@media (max-width: 560px) {
  .hero-quelle--dritte { display: none; }
}

/* ==========================================================================
   Anzeigeprüfung 29.07.: Bei 1024 px ragten die Produktfenster 48 px über die
   Seite hinaus (scrollWidth 1072 > 1024). Sichtbar war das nicht, weil
   body { overflow-x: hidden } es abfängt — aber sich darauf zu verlassen ist
   heikel: overflow auf dem Wurzelelement kann in manchen Browsern
   position:sticky der Kopfleiste aushebeln. Deshalb wird der Überstand dort
   beschnitten, wo er entsteht. Der gewollte Anschnitt rechts bleibt.
   ========================================================================== */
.hero-sekt { overflow: hidden; }