/* Unterseiten (Funktionen, Hilfe, Neuigkeiten, Über uns, Sneak Peeks) – gleiche Welt wie die Reise. */
.unterseite main { padding-bottom: 72px; }
.krumen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 18px; padding-bottom: 4px; font: 600 13.5px/1.4 var(--schrift); color: var(--leise); }
.krumen a { color: var(--gedaempft); text-decoration: none; }
.krumen a:hover { color: var(--bernstein); }
.krumen span:last-child { color: var(--text); }
.seiten-kopf { padding: 36px 0 30px; max-width: 52em; }
.seiten-kopf h1 { font-size: clamp(30px, 3.6vw, 50px); margin: 10px 0 16px; }
.seiten-kopf .lead { color: var(--gedaempft); font-size: 19px; margin: 0; text-wrap: pretty; }
.seiten-kopf time { color: var(--bernstein); font: 700 14px/1 var(--schrift); }
.unterseite section { padding: 40px 0 0; }
.unterseite h2 { font: 700 clamp(22px, 2vw, 30px)/1.1 var(--plakat); letter-spacing: -.02em; margin: 0 0 16px; }
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.zwei-spalten.text { grid-template-columns: 1fr 1fr; gap: 8px 48px; }
.zwei-spalten.text p { color: var(--gedaempft); }
.film { margin: 0; }
.film video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-l); border: 1px solid var(--linie); }
.film figcaption { color: var(--leise); font-size: 13px; margin-top: 6px; }
.film-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.haken-liste { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.haken-liste li { display: flex; gap: 10px; }
.haken-liste .ico { color: var(--gruen); width: 20px; height: 20px; margin-top: 2px; flex: none; }
.schritt-liste { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.schritt-liste li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; align-items: baseline; }
.schritt-liste li::before { content: counter(s); font: 600 24px/1 var(--mono); color: var(--bernstein); }
.artikel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.artikel-liste a { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start; padding: 13px 10px; border-radius: 10px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--linie); }
.artikel-liste a:hover { background: var(--panel); }
.artikel-liste .ico { color: var(--gedaempft); margin-top: 1px; }
.artikel-liste b { display: block; font-weight: 650; }
.artikel-liste small { display: block; color: var(--gedaempft); font-size: 14.5px; line-height: 1.45; margin-top: 2px; }
.artikel-liste em { font: 600 12px/1 var(--schrift); font-style: normal; color: var(--leise); white-space: nowrap; padding-top: 4px; }
.artikel-liste em.frei { color: var(--ok-text); }
.chip-liste { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.chip-liste a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie-2); background: var(--panel-2); color: var(--text); text-decoration: none; font: 650 14.5px/1 var(--schrift); }
.chip-liste a:hover { border-color: var(--bernstein); color: var(--bernstein); }
.news-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.news-karte { display: grid; gap: 8px; align-content: start; color: var(--text); text-decoration: none; }
.news-karte img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--linie); }
.news-karte time { color: var(--leise); font: 600 13px/1 var(--schrift); }
.news-karte b { font-size: 16.5px; line-height: 1.3; }
.news-karte:hover b { color: var(--bernstein); }
.funktions-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px 22px; }
.funktions-raster a { display: grid; gap: 8px; color: var(--text); text-decoration: none; }
.funktions-raster img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-l); border: 1px solid var(--linie); transition: border-color .2s; }
.funktions-raster b { font: 700 20px/1.1 var(--plakat); }
.funktions-raster span { color: var(--gedaempft); font-size: 15px; }
.funktions-raster a:hover img { border-color: var(--bernstein); }

/* Hilfe-Text: gleiche Lesbreite wie das Hilfe-Center der App */
.hilfe-text { max-width: 72ch; font-size: 16.5px; }
.hilfe-text section { padding: 22px 0 0; }
.hilfe-text h2 { font: 700 21px/1.15 var(--plakat); letter-spacing: -.02em; margin: 0 0 10px; }
.hilfe-text p, .hilfe-text li { color: #cdd2db; }
.hilfe-text ul, .hilfe-text ol { padding-left: 22px; }
.hilfe-text li { margin: 6px 0; }
.hilfe-text kbd { font: 600 12.5px/1 "SF Mono", ui-monospace, Menlo, monospace; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--linie-2); background: var(--panel-2); }
.hilfe-text figure { margin: 18px 0; }
.hilfe-text figure img, .hilfe-text figure video { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--linie); background: var(--panel); }
.hilfe-text figcaption { color: var(--leise); font-size: 13.5px; margin-top: 6px; }
.hilfe-text a { color: var(--bernstein); }
.hilfe-artikel .film { max-width: 72ch; margin-bottom: 10px; }
.schranke { display: flex; gap: 14px; align-items: flex-start; max-width: 72ch; margin: 28px 0 8px; padding: 20px; border-radius: var(--r-l); background: var(--loop-grund); border: 1px solid var(--loop-rand); }
.schranke .ico { color: var(--bernstein); width: 26px; height: 26px; flex: none; }
.schranke p { color: var(--gedaempft); margin: 6px 0 14px; }
.kapitel-block h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kapitel-block .beispiel { margin: -6px 0 10px; }

.bild-gross { margin: 0 0 20px; }
.bild-gross img { width: 100%; border-radius: var(--r-l); border: 1px solid var(--linie); }
.bild-gross figcaption { color: var(--leise); font-size: 13.5px; margin-top: 6px; }
.zahlen-reihe { list-style: none; display: flex; flex-wrap: wrap; gap: 36px; padding: 28px 0 0; margin: 0; }
.zahlen-reihe b { display: block; font: 600 36px/1 var(--mono); color: var(--bernstein); }
.zahlen-reihe span { color: var(--gedaempft); font-size: 14px; }
.sneak-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.sneak-karte { padding: 22px; border-radius: var(--r-l); background: var(--panel); border: 1px solid var(--linie); display: grid; gap: 10px; align-content: start; }
.sneak-karte h2 { margin: 4px 0 0; }
.sneak-karte p { color: var(--gedaempft); margin: 0; }
.sneak-karte video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #000; }
.news-artikel .cta, .unterseite .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.testen { border-top: 1px solid var(--linie); padding: 64px 0; background: radial-gradient(80% 140% at 0% 100%, #2a2110 0%, var(--schwarz) 60%); }
.testen p { color: var(--gedaempft); font-size: 17px; max-width: 44em; }

@media (max-width: 860px) {
  .zwei-spalten, .zwei-spalten.text, .film-raster, .sneak-raster { grid-template-columns: 1fr; gap: 24px; }
  .artikel-liste a { grid-template-columns: 22px 1fr; }
  .artikel-liste em { grid-column: 2; padding-top: 0; }
  .seiten-kopf .lead { font-size: 17px; }
}