/* ==========================================================================
   Now & Beyond — Schauseite, Ergänzung zu theme.css
   „Warm & ruhig"

   theme.css ist die EINZIGE Quelle für Farbe, Schrift, Radius und Abstand.
   Diese Datei enthält ausschliesslich, was nur die Schauseite braucht:
   Prüfband, Kopfleiste, Held, Die Probe, Der Grund, So geht es,
   Sicherheit, Preise, Schluss, Fußzeile.

   Regeln, die hier eingehalten werden:
   · kein einziger Farbwert — nur Merkmale aus theme.css
   · Radien nur über --r-xs/--r-sm/--r-md/--r-lg/--r-pill
   · Schriftgrößen des Fließtextes über clamp() oder rem
   · jedes Bedienelement mindestens 44 px hoch
   ========================================================================== */

/* ---------- 0. Grundmaße der Seite --------------------------------------- */

[hidden] { display: none !important; }

.wrap {
  width: 100%;
  max-width: var(--seite);
  margin-inline: auto;
  padding-inline: var(--luft);
}
.wrap--weit { max-width: calc(var(--seite) + 140px); }

.takt { padding-block: clamp(46px, 7vw, 88px); }
.takt--eng { padding-block: clamp(34px, 5vw, 58px); }

.linie { border: 0; border-top: 1px solid var(--border); margin: 0; }
.linie--kurz {
  border: 0; border-top: 2px solid var(--border-strong);
  width: 54px; margin: 22px 0 0;
}

.kopfblock { max-width: 62ch; }
.kopfblock h2 { margin-top: 10px; max-width: 22ch; }
.kopfblock .lede { margin-top: 20px; max-width: 58ch; }

.fussnote { font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
.fussnote--luft { margin-top: 26px; }

.reihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.reihe--aktion { margin-top: 28px; }

/* Einmaliger Vermerk: die Beispieldaten bleiben deutsch */
.hinweis-daten {
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 22px; padding: 12px 16px;
  background: var(--surface-sunk);
  border-radius: var(--r-sm);
  font-size: 0.875rem; line-height: 1.5; color: var(--muted);
}
.hinweis-daten .ic { flex: none; margin-top: 2px; }

/* ---------- 2. Kopfleiste ------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 30;
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.kopf__innen {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 22px);
  min-height: 78px; padding-block: 11px;
}

/* Die Marke ist das Originallogo des Eigentümers, nicht ein nachgebautes
   Zeichen: eine Datei für hellen Grund, eine für dunklen. Umgeschaltet wird
   per data-theme, damit beim Themenwechsel nichts nachgeladen wird.
   Das Seitenverhältnis steht fest, damit beim Laden nichts springt. */
.kopf .brand { padding: 0; flex: none; gap: 12px; }
/* NICHT .marke nennen — der Name ist weiter unten schon an die Auszeichnung
   der empfohlenen Tarifkarte vergeben und wuerde diese Regeln ueberschreiben. */
.markenzeichen {
  display: block;
  height: clamp(44px, 3.6vw, 56px);
  width: auto;
  aspect-ratio: 1448 / 1086;
}
.markenzeichen--abend { display: none; }
[data-theme="abend"] .markenzeichen--tag { display: none; }
[data-theme="abend"] .markenzeichen--abend { display: block; }

/* flex-wrap ist der Auffangnetz zu flex:none weiter unten: die Eintraege
   duerfen nicht mehr in sich umbrechen, also muss der Kasten als Ganzes
   ausweichen koennen. Sonst schiebt eine laengere Sprache — Französisch ist
   rund ein Fünftel breiter als Deutsch — die Kopfleiste ueber den Rand,
   bevor die 1180-px-Regel greift. */
.kopf__nav {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(10px, 1.8vw, 26px); row-gap: 0;
  margin-inline: auto;
}
/* white-space: nowrap ist Pflicht, nicht Kosmetik — ohne sie bricht der
   Flex-Kasten „Die Probe" in zwei Zeilen um, sobald der Platz knapp wird,
   und die Kopfleiste wird doppelt so hoch. flex: none verhindert, dass ein
   Eintrag unter seine eigene Textbreite gestaucht wird. */
.kopf__nav a {
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; flex: none;
  min-height: 44px; padding: 0 2px;
  font-size: 0.9375rem; font-weight: 500;
  color: var(--fg-soft); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}
.kopf__nav a:hover { color: var(--fg); border-bottom-color: var(--border-strong); }
.kopf__nav a[aria-current="page"] { color: var(--accent-ink); border-bottom-color: var(--accent); }

.kopf__werkzeuge { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.kopf__nav + .kopf__werkzeuge { margin-left: 0; }

/* ---------- 3. Held ------------------------------------------------------- */

.held {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 52px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 76px);
}
.held h1 { margin-top: 14px; max-width: 17ch; }
/* Kein Terracotta in der Überschrift: der Akzent gehört der Hauptaktion.
   Betont wird über die Kursive der Newsreader, nicht über Farbe. */
.held h1 em { font-style: italic; }
.held .lede { margin-top: 22px; max-width: 50ch; }

.held__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: 0; }
.held__bilder .tile { aspect-ratio: 1 / 1; }
.held__bilder .tile--gross { grid-column: 1 / -1; aspect-ratio: 4 / 3; }

/* ---------- 4. Menschen aus dem Beispiel ---------------------------------- */

.leute { margin-top: clamp(30px, 4vw, 46px); }
.leute .people { gap: 12px; margin-top: 12px; }
.leute .progress-line { margin-top: 22px; margin-bottom: 0; }
/* Der Name der Person trägt die volle Tinte, die Rolle bleibt ruhig */
.person > span > b { color: var(--fg); }

/* Kacheln ohne Ziel sind Bild, nicht Schaltfläche */
span.tile { cursor: default; }
span.tile:hover { transform: none; box-shadow: var(--shadow-card); }

/* ---------- 5. Die Probe -------------------------------------------------- */

.probe {
  background: var(--surface-warm);
  border-block: 1px solid var(--border);
}
.probe__raster {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 52px);
  align-items: start;
  margin-top: 34px;
}

/* Die vier Stationen: ohne Skript und unter 641 px schlichte Sprungziele,
   darüber rüstet das Skript sie zu Reitern auf (role=tab). */
.station { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.station a, .station button {
  display: flex; align-items: flex-start; gap: 13px;
  width: 100%; min-height: 56px; padding: 13px 15px;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  font: inherit; text-align: left; text-decoration: none;
  color: var(--fg-soft); cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.station a:hover, .station button:hover { background: var(--surface); border-color: var(--border); color: var(--fg); }
.station [aria-selected="true"] {
  background: var(--accent-soft); border-color: transparent; color: var(--accent-ink);
}
.station [aria-selected="true"] .station__nr,
.station [aria-selected="true"] .station__b { color: inherit; }
.station__nr {
  flex: none; font-family: var(--font-display);
  font-size: 0.8125rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--muted);
  padding-top: 2px;
}
.station__t { display: block; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.station__b { display: block; margin-top: 3px; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }

.buehne { min-width: 0; }
.buehne__szene { min-width: 0; }
.buehne__szene + .buehne__szene {
  margin-top: 38px; padding-top: 38px; border-top: 1px solid var(--border);
}
[data-reiter="an"] .buehne__szene + .buehne__szene { margin-top: 0; padding-top: 0; border-top: 0; }

.szene__kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.szene__kopf h3 { flex: none; }
.szene__kopf .eyebrow { order: -1; width: 100%; }

.buehne__fuss {
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 20px; font-size: 0.875rem; line-height: 1.55; color: var(--muted);
}
.buehne__fuss .ic { flex: none; margin-top: 3px; }

/* 5a. Der Umschlag */
.umschlag { padding: 22px 24px 20px; }
.umschlag__empf {
  display: flex; align-items: center; gap: 13px;
  padding-bottom: 16px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.umschlag__empf .avatar { width: 46px; height: 46px; }
.umschlag__empf b { display: block; font-size: 1.02rem; font-weight: 600; }
.umschlag__empf span { font-size: 0.8125rem; color: var(--muted); }
.umschlag__empf .chip { margin-left: auto; }

.umschlag__zeile {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--border-soft);
  font-size: 0.9375rem;
}
.umschlag__zeile:last-of-type { border-bottom: 0; }
.umschlag__k {
  flex: 0 0 118px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
}
.umschlag__v { flex: 1 1 180px; min-width: 0; color: var(--fg-soft); }
.umschlag__v strong { color: var(--fg); font-weight: 600; }

.umschlag__siegel {
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 18px; padding: 13px 15px;
  background: var(--surface-sunk); border-radius: var(--r-sm);
  font-size: 0.875rem; line-height: 1.5; color: var(--fg-soft);
}
.umschlag__siegel .ic { flex: none; margin-top: 2px; color: var(--muted); }

/* 5b. Der Brief — die eine Briefecke der Seite (.letter aus theme.css) */
.brief__initial {
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 1rem + 0.42vw, 1.26rem);
  line-height: 1.5; color: var(--fg);
}
.brief p + p { margin-top: 15px; }
.brief__gruss { font-family: var(--font-display); font-style: italic; color: var(--fg-soft); }

/* 5c. Die Erinnerungen */
.exponate { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 14px; }
.exponat { aspect-ratio: 4 / 3; min-height: 44px; }
.exponat[aria-expanded="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.exponat .tile-scrim { flex-direction: column; align-items: flex-start; gap: 2px; }
.exponat .tile-scrim small { font-size: 0.75rem; opacity: 0.92; }

.schau {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
  gap: clamp(18px, 2.6vw, 30px);
  margin-top: 16px; padding: clamp(18px, 2.4vw, 26px);
}
.schau__bild { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-sunk); }
/* Dieselbe zurückhaltende Bildbehandlung wie bei .tile img (theme.css) —
   entsättigt, dezent wärmer, kein glattes Stockfoto-Weiß. */
.schau__bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.87) contrast(1.03) sepia(0.05) brightness(calc(1 - var(--foto-schleier)));
}

.schau__daten { margin: 15px 0 0; display: grid; gap: 10px; }
.schau__daten > div { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.schau__daten dt {
  flex: 0 0 104px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.schau__daten dd { flex: 1 1 140px; margin: 0; min-width: 0; font-size: 0.875rem; color: var(--fg-soft); }

.schau__kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.schau__meta { font-size: 0.875rem; color: var(--muted); }

.notiz {
  padding: 16px 18px;
  background: var(--surface-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
}
.notiz .zitat {
  margin-top: 9px;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.1rem);
  line-height: 1.55; color: var(--fg);
}

.abschrift { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.abschrift li { display: flex; gap: 14px; align-items: baseline; font-size: 0.9375rem; line-height: 1.55; color: var(--fg-soft); }
.abschrift .zeit {
  flex: none; min-width: 44px;
  font-size: 0.75rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--muted);
}

.rezept { margin-top: 16px; }
.rezept__titel { font-family: var(--font-display); font-size: 1.05rem; }
.rezept ul { list-style: none; margin: 12px 0 0; padding: 0; }
.rezept li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid var(--border-soft);
  font-size: 0.9375rem; color: var(--fg-soft);
}
.rezept li span:last-child { font-variant-numeric: tabular-nums; color: var(--fg); }
.rezept p { margin-top: 14px; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-soft); }
.rezept__rand { font-size: 0.875rem; color: var(--muted); }

.schau__schliessen { margin-top: 18px; }

/* ---------- 6. Der Grund -------------------------------------------------- */

.gruende { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 16px; margin-top: 34px; }
.grund { display: flex; flex-direction: column; gap: 11px; padding: 24px 22px; }
.grund__nr {
  font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.09em; color: var(--muted); font-variant-numeric: tabular-nums;
}
.grund .ic { color: var(--muted); }
.grund p { font-size: 0.9375rem; line-height: 1.6; color: var(--fg-soft); }

/* ---------- 7. So geht es ------------------------------------------------- */

.schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 34px; }
.schritt { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; }
.schritt__kopf { display: flex; align-items: center; gap: 10px; }
.schritt__kopf .ic { flex: none; color: var(--muted); }
.schritt__nr {
  margin-left: auto; font-family: var(--font-display);
  font-size: 0.8125rem; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.schritt p { font-size: 0.9375rem; line-height: 1.6; color: var(--fg-soft); }

/* ---------- 8. Sicherheit ------------------------------------------------- */

.sicher__raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(24px, 3.5vw, 48px); align-items: center; margin-top: 34px;
}
.zusagen { display: grid; gap: 12px; }
.zusage {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 15px 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 0.9375rem; line-height: 1.5; color: var(--fg-soft);
}
.zusage .ic { flex: none; margin-top: 2px; color: var(--calm); }
.sicher__bild .tile { aspect-ratio: 4 / 5; }

/* ---------- 9. Preise ----------------------------------------------------- */

.tarife { display: grid; grid-template-columns: repeat(auto-fit, minmax(244px, 1fr)); gap: 16px; margin-top: 34px; }
.tarif { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px 22px; }
.tarif[data-empfohlen] { border-color: var(--border-strong); box-shadow: var(--shadow-lift); }
.marke {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.tarif__name { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; }
.tarif__claim { font-size: 0.875rem; line-height: 1.45; color: var(--muted); }
.tarif__preis {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.1rem);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.tarif__per { font-size: 0.9375rem; color: var(--muted); }
.tarif__jahr { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--muted); }
.tarif__liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.tarif__liste li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.9375rem; line-height: 1.5; color: var(--fg-soft); }
.tarif__liste .ic { flex: none; margin-top: 3px; color: var(--calm); }
.tarif__quota { font-size: 0.8125rem; color: var(--muted); }
.tarif .btn { margin-top: auto; width: 100%; }

.naechstes {
  display: flex; align-items: flex-start; gap: 13px;
  margin-top: 22px; padding: 20px 22px;
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-radius: var(--r-md); color: var(--warn-ink);
}
.naechstes .ic { flex: none; margin-top: 3px; }
.naechstes h3 { font-size: 1.05rem; }
.naechstes p { margin-top: 7px; font-size: 0.9375rem; line-height: 1.6; }

/* ---------- 10. Schluss --------------------------------------------------- */

.schluss__raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(24px, 3.5vw, 48px); align-items: center;
}
.schluss h2 { margin-top: 12px; max-width: 18ch; }
.schluss .lede { margin-top: 20px; }
.schluss__bild .tile { aspect-ratio: 4 / 3; }

/* ---------- 11. Fußzeile -------------------------------------------------- */

.fuss { background: var(--surface-warm); border-top: 1px solid var(--border); }
.fuss__innen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  padding-block: 34px;
}
.fuss .brand { padding: 0; }
.fuss .markenzeichen { height: 40px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 2px 20px; margin-inline: auto; }
.fuss nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.875rem; color: var(--fg-soft); text-decoration: none;
}
.fuss nav a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.fuss small { font-size: 0.875rem; color: var(--muted); }

/* ---------- 12. Maßstäbe -------------------------------------------------- */

/* Ab hier steht die Bühne unter den Stationen */
@media (max-width: 1000px) {
  .probe__raster { grid-template-columns: minmax(0, 1fr); }
  .station { flex-direction: row; flex-wrap: wrap; }
  .station li { flex: 1 1 232px; }
}

/* Unter 1180 px passen Marke, fünf Navigationseinträge und die Werkzeuge
   nicht mehr nebeneinander — die Navigation bekommt eine eigene Zeile.
   Umbruch statt Überlauf: nichts ragt heraus, auch bei 320 px nicht. */
@media (max-width: 1180px) {
  .kopf__innen { flex-wrap: wrap; row-gap: 4px; min-height: 0; }
  .kopf__nav { order: 3; width: 100%; margin-inline: 0; justify-content: flex-start; flex-wrap: wrap; gap: 2px 18px; }
  .kopf__werkzeuge { margin-left: auto; }
}

@media (max-width: 900px) {
  .kopf { position: static; }
  .held { grid-template-columns: minmax(0, 1fr); }
  .sicher__raster, .schluss__raster { grid-template-columns: minmax(0, 1fr); }
  .sicher__bild .tile { aspect-ratio: 16 / 10; }
}

@media (max-width: 760px) {
  .schau { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* Die Kopfzeile behält Marke, Thema und Sprache. Die Hauptaktion steht
     zwei Zeilen tiefer im Held — zweimal nebeneinander wäre sie Lärm. */
  .kopf .btn { display: none; }

  /* Die Reiter werden hier zu gestapelten Abschnitten — das Skript
     nimmt die Reiterrollen zurück, alle Tafeln stehen offen. */
  .station { flex-direction: column; }
  .station li { flex: 1 1 auto; }
  .held__bilder { grid-template-columns: 1fr; }
  .held__bilder .tile--gross { aspect-ratio: 5 / 4; }
  .held__bilder .tile { aspect-ratio: 16 / 10; }
  .exponate { grid-template-columns: minmax(0, 1fr); }
  .exponat { aspect-ratio: 16 / 10; }
  .fuss nav { margin-inline: 0; width: 100%; }
  .kopfblock h2 { max-width: none; }
  .held h1 { max-width: none; }
}

@media (max-width: 400px) {
  .kopf__innen { gap: 8px; padding-block: 9px; }
  .kopf .brand { gap: 10px; }
  .markenzeichen { height: 40px; }
  .kopf__nav a { font-size: 0.875rem; }
  .umschlag { padding: 18px 16px 16px; }
  .umschlag__k { flex: 1 1 100%; }
  .umschlag__v { flex: 1 1 100%; }
  .schau__daten dt { flex: 1 1 100%; }
  .schau__daten dd { flex: 1 1 100%; }
  .grund, .schritt, .tarif { padding: 20px 17px; }
  .notiz { padding: 14px 15px; }
  .abschrift li { flex-direction: column; gap: 3px; }
  .rezept li { flex-direction: column; gap: 2px; }
}

@media print {
  .kopf__werkzeuge, .schau__schliessen { display: none !important; }
  .kopf { position: static; }
  .buehne__szene { display: block !important; }
}

/* Die Vorgaengerseite hatte die Sprungmarken #warum und #kapseln. Sie tragen
   jetzt die Ueberschriften der inhaltlich entsprechenden Abschnitte, damit
   eingehende Links zielgenau springen statt oben zu landen. Der Abstand haelt
   das Ziel unter der festen Kopfleiste frei. */
h2[id]{scroll-margin-top:6rem}