/* TFCZ Berichte: eine lange Seite ohne Seitenumbrüche (Bildschirm und PDF). Aufbau aus Z8 «Sportteil».
   Inhalt aus ausgabe.js. Bilder in voller Proportion, nie beschnitten. Navy nur für Titel, Ticker und den Vergleich. */
@page { margin: 0 }
html, body { margin: 0; background: var(--surface-base); color: var(--ink); font-family: var(--font-ui); -webkit-print-color-adjust: exact; print-color-adjust: exact }
.bericht { width: 100%; max-width: 210mm; margin: 0 auto; background: var(--surface-base); overflow-x: clip }
.innen { padding-inline: 14mm }
.nb { white-space: nowrap }
img { display: block; width: 100%; height: auto }
figure { margin: 0 }
figcaption { font-size: var(--text-2xs); color: var(--ink-muted); margin-top: var(--space-2xs) }
.ober { margin: 0; font-size: var(--text-2xs); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-2) }
h2 { font-size: var(--text-2xl); line-height: var(--leading-tight); margin: var(--space-2xs) 0 var(--space-sm); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: -.005em }
p { margin: 0 0 var(--space-sm); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-muted) }
.abschnitt-b { padding-block: 12mm }
.abschnitt-b + .abschnitt-b { border-top: var(--border-w) solid var(--border-subtle) }

/* Titelfolie */
.titel { position: relative; min-height: 297mm; display: grid; align-content: end; color: var(--ink); overflow: hidden }
.titel > .titel__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.titel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--accent-ink) 96%, transparent) 18%, color-mix(in oklab, var(--accent-ink) 55%, transparent) 55%, color-mix(in oklab, var(--accent-ink) 25%, transparent)) }
.titel__logo { position: absolute; z-index: 1; top: 16mm; left: 14mm; width: 120mm !important; height: auto }
.titel__inhalt { position: relative; z-index: 1; padding: 0 14mm 18mm; display: grid; gap: var(--space-md) }
.titel__marke { font-size: var(--text-lg); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-2) }
.titel h1 { margin: 0; font-size: 4.6rem; line-height: .9; font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: -.02em }
.titel__zeile { display: flex; gap: var(--space-md); flex-wrap: wrap; font-size: var(--text-md); font-weight: var(--fw-bold) }
.titel__zeile span + span::before { content: "·"; margin-right: var(--space-md); color: var(--accent-2) }
.titel__zahlen { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; border-top: var(--border-w) solid color-mix(in oklab, var(--ink) 25%, transparent); padding-top: var(--space-md) }
.titel__zahlen > div { padding-inline: 0 9mm }
.titel__zahlen > div + div { padding-left: 9mm; border-left: var(--border-w) solid color-mix(in oklab, var(--ink) 30%, transparent) }
.titel__zahlen b { display: block; font-size: var(--text-4xl); line-height: 1; font-weight: var(--fw-extrabold) }
.titel__zahlen small { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-muted) }

/* Ticker und Kopf */
.ticker { display: flex; background: var(--accent-ink); color: var(--ink); font-size: var(--text-2xs); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden }
.ticker b { background: var(--accent-2); color: var(--accent-ink); padding: var(--space-2xs) var(--space-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--fw-extrabold) }
.ticker span { padding: var(--space-2xs) var(--space-sm); border-right: var(--border-w) solid color-mix(in oklab, var(--ink) 15%, transparent) }
.ticker em { font-style: normal; color: var(--accent-2); font-weight: var(--fw-extrabold); margin-right: var(--space-2xs) }
.kopf { display: flex; justify-content: space-between; align-items: center; padding-block: 7mm 4mm; border-bottom: var(--border-w-stark) solid var(--ink) }
.kopf b { font-size: var(--text-xl); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-wide) }
.kopf span { display: block; font-size: var(--text-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-muted); margin-top: var(--space-3xs) }
.kopf img { width: 36mm }

/* Aufmacher */
.aufmacher h2 { font-size: 3.2rem; line-height: .92; margin: var(--space-xs) 0 var(--space-md) }
.aufmacher h2 em { font-style: normal; display: block; color: var(--accent-2); font-size: 1.4em }
.lead { font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--ink); font-weight: var(--fw-bold); max-width: 150mm }
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg) var(--space-md); margin-top: var(--space-lg) }
.zahlen div { border-top: var(--border-w-stark) solid var(--accent-2); padding-top: var(--space-xs) }
.zahlen b { display: block; font-size: var(--text-3xl); font-weight: var(--fw-extrabold); line-height: 1 }
.zahlen small { display: block; font-size: var(--text-xs); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-top: var(--space-2xs) }
.zahlen span { font-size: var(--text-2xs); color: var(--ink-muted) }

/* Bild-Text-Paare, abwechselnd */
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; align-items: center }
.paar--um figure { order: 2 }
.paar figure > img { border-radius: var(--r-lg) }
.voll figure > img, .haupt figure > img, .nati__bilder img { border-radius: var(--r-xl) }
/* Lupe nur bei Atmosphärenbildern und Geräten, nie bei Bildern mit Gesichtern (Vasco, 2026-10-19). Lupe aus dem Kern (marke.js, system/lupe.js): Maus über dem Bild vergrössert. Im PDF unsichtbar. */
.lupe { gap: 0 }
.lupe__flaeche { border: 0; border-radius: var(--r-lg); background: transparent; --lupe-groesse: 11rem }
.voll .lupe__flaeche, .haupt .lupe__flaeche { border-radius: var(--r-xl); --lupe-groesse: 14rem }
@media print { .lupe__glas, .lupe__ring { display: none } }

/* Hauptartikel: zu wenig Medaillen */
.haupt h2 { font-size: 3.4rem; line-height: .92; margin: var(--space-xs) 0 var(--space-md) }
.haupt h2 em { font-style: normal; color: var(--accent-2) }
.haupt figure { margin-block: var(--space-md) var(--space-lg) }
.haupt__text { columns: 2; column-gap: 10mm }
.haupt__text p:not(:first-child) { margin: 0 }
.haupt__text p:first-child { column-span: all; margin: 0; padding-bottom: var(--space-md); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--ink); font-weight: var(--fw-bold) }
.fakten { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-top: var(--space-lg) }
.fakten div { border-top: var(--border-w-stark) solid var(--accent-2); padding-top: var(--space-xs) }
.fakten div:first-child b { color: var(--accent-2) }
.fakten b { display: block; font-size: var(--text-4xl); font-weight: var(--fw-extrabold); line-height: 1 }
.fakten small { display: block; font-size: var(--text-xs); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-top: var(--space-2xs) }
.fakten span { font-size: var(--text-2xs); color: var(--ink-muted) }

/* Nati: zweimal Silber, einmal Bronze */
.nati h2 { font-size: 3rem; line-height: .92; margin: var(--space-xs) 0 var(--space-md) }
.nati__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; margin-block: var(--space-md) var(--space-lg) }
.nati__unten { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; align-items: start }
.nati .fakten { grid-template-columns: repeat(3, 1fr) }
.nati .fakten div:first-child b { color: inherit }

/* Ranglisten-Spalte */
.ergebnisse { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xs) 10mm; list-style: none; margin: 0; padding: 0 }
.ergebnisse li { display: grid; grid-template-columns: 14mm 1fr; gap: var(--space-sm); align-items: baseline; padding-block: var(--space-xs); border-bottom: var(--border-w) solid var(--border-subtle) }
.ergebnisse b { font-size: var(--text-2xl); font-weight: var(--fw-extrabold); color: var(--accent-2); line-height: 1 }
.ergebnisse span { font-size: var(--text-sm); font-weight: var(--fw-bold) }
.ergebnisse small { display: block; font-size: var(--text-2xs); font-weight: var(--fw-regular); color: var(--ink-muted) }

/* Vergleich TFCZ gegen philoro */
.vergleich { background: var(--surface-base); color: var(--ink); border-radius: var(--r-xl); padding: 9mm }
.vergleich h2 { color: var(--ink); margin-top: var(--space-2xs) }
.vergleich h2 span { color: var(--accent-2) }
/* Netz wie das Club-Netz der Ranglisten-Seite (rl.css): TFCZ Blau, Gegner Tertiärfarbe */
.vnetz { display: grid; grid-template-columns: 1.6fr 1fr; gap: 6mm; align-items: center; margin-inline: -4mm }
.netz { display: block; width: 100%; height: auto; overflow: visible }
.netz__gitter { fill: none; stroke: var(--border-subtle); stroke-width: 1 }
.netz__aussen { fill: var(--surface-overlay); fill-opacity: .5; stroke: var(--border-subtle) }
.netz__form { stroke-width: 2.4; stroke-linejoin: round; fill-opacity: .28 }
.netz__form--a { fill: var(--accent); stroke: var(--accent) }
.netz__form--b { fill: var(--ton-5); stroke: var(--ton-5); stroke-dasharray: 7 4 }
.netz__name { fill: var(--ink-muted); font-size: 15px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em }
.netz__a { fill: var(--accent); font-size: 19px; font-weight: var(--fw-extrabold) }
.netz__b { fill: var(--ton-5); font-size: 19px; font-weight: var(--fw-extrabold) }
.netz__trenn { fill: var(--ink-faint); font-size: 17px }
.vleg2 { display: grid; gap: var(--space-sm); margin-bottom: var(--space-md) }
.vleg2 span { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-xs); align-items: center; font-weight: var(--fw-extrabold) }
.vleg2 i { grid-row: span 2; width: 5mm; height: 5mm; border-radius: var(--r-pill); background: var(--accent) }
.vleg2 span + span i { background: var(--ton-5) }
.vleg2 small { font-size: var(--text-2xs); font-weight: var(--fw-regular); color: var(--ink-faint) }
.top5 { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--border-w) solid var(--border-subtle) }
.top5 h3 { margin: 0 0 var(--space-xs); font-size: var(--text-sm); padding-left: var(--space-sm); border-left: var(--border-w-stark) solid var(--accent) }
.top5 div + div h3 { border-left-color: var(--ton-5) }
.top5 ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3xs) }
.top5 li { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--ink-muted); padding-block: var(--space-3xs); border-bottom: var(--border-w) solid var(--border-subtle) }
.top5 li b { color: var(--ink); font-variant-numeric: tabular-nums }
.vnetz__lesart { font-size: var(--text-2xs) !important; color: var(--ink-faint) !important }
.vergleich p { color: var(--ink-muted); margin: var(--space-md) 0 0 }

.zitat { margin: 0; font-size: 2.4rem; font-weight: var(--fw-extrabold); text-transform: uppercase; line-height: 1; letter-spacing: -.01em; color: var(--ink) }
.zitat::before { content: "«"; color: var(--accent-2) } .zitat::after { content: "»"; color: var(--accent-2) }
.ziel { display: grid; grid-template-columns: auto 1fr; gap: 10mm; align-items: center }
.ziel b.jahr { font-size: 6rem; line-height: .85; font-weight: var(--fw-extrabold); color: var(--accent-2) }
.ziel h2 { margin-top: 0 }

/* Berichte-Seite */
.geraete { position: relative; height: 128mm; margin-block: var(--space-lg) }
.laptop { position: absolute; left: 0; top: 0; width: 150mm }
.laptop__schirm { background: var(--accent-ink); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 3mm 3mm 4mm }
.laptop__schirm img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--r-xs) }
.laptop__fuss { height: 4mm; margin-inline: -9mm; background: linear-gradient(var(--ink-faint), var(--border-strong)); border-radius: 0 0 var(--r-lg) var(--r-lg) }
.handy { position: absolute; right: 0; bottom: 0; width: 50mm; background: var(--accent-ink); border-radius: 7mm; padding: 2.2mm }
.handy img { border-radius: 5mm; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top }
.punkte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md) 10mm; counter-reset: p }
.punkte li { counter-increment: p; padding-left: 10mm; position: relative }
.punkte li::before { content: counter(p); position: absolute; left: 0; top: 0; width: 7mm; height: 7mm; border-radius: var(--r-pill); display: grid; place-items: center; font-weight: var(--fw-extrabold); font-size: var(--text-xs); background: var(--accent-2); color: var(--accent-ink) }
.punkte b { display: block; font-size: var(--text-sm) } .punkte span { font-size: var(--text-xs); color: var(--ink-muted) }
.knoepfe { display: flex; gap: var(--space-sm); margin-top: var(--space-lg) }
.fuss { display: flex; justify-content: space-between; align-items: center; padding-block: 6mm 10mm; border-top: var(--border-w) solid var(--border-subtle); font-size: var(--text-2xs); color: var(--ink-faint) }
.fuss img { width: 30mm }

/* Handy und schmale Fenster: alles einspaltig. Das PDF rendert mit 210 mm und bleibt davon unberührt. */
@media (max-width: 760px) {
  .innen { padding-inline: var(--space-md) }
  .abschnitt-b { padding-block: var(--space-2xl) }
  .titel { min-height: 100svh }
  .titel__logo { top: var(--space-lg); left: var(--space-md); width: min(72vw, 120mm) !important }
  .titel__inhalt { padding: 0 var(--space-md) var(--space-xl) }
  .titel h1 { font-size: clamp(2.4rem, 12vw, 4.6rem) }
  .titel__zeile { gap: var(--space-2xs) var(--space-sm); font-size: var(--text-sm) }
  .titel__zeile span + span::before { margin-right: var(--space-sm) }
  .titel__zahlen { grid-template-columns: 1fr 1fr; row-gap: var(--space-md) }
  .titel__zahlen > div, .titel__zahlen > div + div { padding-inline: 0; border-left: 0 }
  .titel__zahlen b { font-size: var(--text-3xl) }
  .ticker { overflow-x: auto }
  .kopf img { width: 28mm }
  .aufmacher h2, .haupt h2, .nati h2 { font-size: clamp(2rem, 10vw, 3.2rem) }
  .lead { font-size: var(--text-md) }
  .zahlen, .fakten, .nati .fakten { grid-template-columns: 1fr 1fr }
  .zahlen b, .fakten b { font-size: var(--text-3xl) }
  .paar, .nati__bilder, .nati__unten, .vnetz, .top5, .ergebnisse, .punkte, .ziel { grid-template-columns: 1fr }
  .paar { gap: var(--space-md) }
  .paar--um figure { order: 0 }
  .haupt__text { columns: 1 }
  .vergleich { padding: var(--space-lg) var(--space-md) }
  .vnetz { margin-inline: 0 }
  .zitat { font-size: 1.7rem }
  .ziel { gap: var(--space-sm) }
  .ziel b.jahr { font-size: 4rem }
  .geraete { height: auto; display: grid; gap: var(--space-md); justify-items: center }
  .laptop, .handy { position: static }
  .laptop { width: 100% }
  .laptop__fuss { margin-inline: -4% }
  .handy { width: 52% }
  .knoepfe { flex-direction: column }
  .fuss { flex-wrap: wrap; gap: var(--space-xs) }
}

/* ---------- Web-Fassung (seite.html, data-bericht="seite") ---------- */
[data-bericht="seite"] .bericht { max-width: none; background: transparent }
[data-bericht="seite"] .innen { max-width: 210mm; margin-inline: auto; box-sizing: border-box }
[data-bericht="seite"] .einblenden.abschnitt-b:not(.paar):not(.ziel) { display: block }
.titel-seite .aufziehen__titel { font-size: clamp(2.4rem, 7vw, 5rem); text-transform: uppercase; line-height: .95 }
.titel-seite .aufziehen__tafel { max-width: 46rem; gap: var(--space-md) }
.titel-seite .aufziehen__tafel h2 { font-size: var(--text-3xl); text-transform: uppercase }
.titel-seite .titel__zahlen { color: var(--ink) }
[data-bericht="seite"] .tempoband { margin-block: var(--space-lg) 0 }
/* Netz zieht sich auf. Vorübergehend im Projekt, Eintrag in design-system/docs/offen.md (Aus Projekten). */
@media (prefers-reduced-motion: no-preference) {
  .netz--auf .netz__form { transform-box: view-box; transform-origin: 50% 50%; transform: scale(.15); opacity: 0;
    transition: transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease) }
  .netz--auf .netz__form--a { transition-delay: var(--t-fast) }
  .netz--auf.ist-da .netz__form { transform: none; opacity: 1 }
}
@media (max-width: 760px) {
  [data-bericht="seite"] .innen { padding-inline: var(--space-md) }
  .titel-seite .titel__zahlen { grid-template-columns: 1fr 1fr }
}
/* Ohne Bewegung steht der Kern-Baustein still; der Titel braucht dann Abstand zur festen Menüleiste */
@media (prefers-reduced-motion: reduce) {
  .titel-seite { padding-top: var(--space-4xl) }
  .titel-seite .aufziehen__titel, .titel-seite .aufziehen__ueberlage { padding-inline: var(--space-md) }
}

/* ---------- Stil K1: Seitenregel von tfcz.ch (data-stil="k1", nur Web-Fassung) ----------
   Gold nur in Titeln, Fläche wechselt je Abschnitt, Schriftgrössen nur aus --text-*, ein Ziel-Knopf. */
/* Seitengrund wie tfcz.ch (tfcz-berichte.html): Verlauf mit Goldschein, darüber der Schwerkraft-Wirbel (bg-swirl.js) */
[data-stil="k1"] { background: var(--blue-dk) }
[data-stil="k1"] body { background: transparent }
[data-stil="k1"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; height: 100lvh; background: linear-gradient(165deg, var(--blue) 0%, var(--blue-mid) 46%, var(--blue-dk) 100%) }
[data-stil="k1"] main { position: relative; z-index: 1 }
[data-stil="k1"] .abschnitt-b, [data-stil="k1"] .tempoband { background: transparent; color: var(--ink) }
[data-stil="k1"] .innen { max-width: 1160px; padding-inline: var(--space-lg) }
[data-stil="k1"] .abschnitt-b + .abschnitt-b { border-top: 0 }
[data-stil="k1"] .tempoband__reihe { border-color: transparent }
[data-stil="k1"] .ober { color: var(--ink-muted); font-size: var(--text-xs) }
[data-stil="k1"] h2 { font-size: var(--text-3xl) }
[data-stil="k1"] :is(.aufmacher, .haupt, .nati) h2 { font-size: var(--text-4xl) }
[data-stil="k1"] .aufmacher h2 em { font-size: 1em }
[data-stil="k1"] .lead { font-size: var(--text-lg) }
[data-stil="k1"] .titel__marke { color: var(--ink); font-size: var(--text-sm) }
[data-stil="k1"] .titel-seite .aufziehen__titel { font-size: var(--text-5xl) }
[data-stil="k1"] :is(.zahlen, .fakten) div { border-top-color: var(--border-strong) }
[data-stil="k1"] .fakten div:first-child b, [data-stil="k1"] .fakten .bronze, [data-stil="k1"] .fakten .silber, [data-stil="k1"] .ergebnisse b { color: var(--ink) !important }
[data-stil="k1"] .punkte li::before { background: var(--surface-raised); color: var(--ink); border: var(--border-w) solid var(--border-strong); box-sizing: border-box }
[data-stil="k1"] .ziel b.jahr { color: var(--ink); font-size: var(--text-5xl) }
[data-stil="k1"] .vnetz { margin-inline: 0 }
/* Liste ohne Nummern: die vier Teile der Statistik sind gleichwertig */
.punkte li, [data-stil="k1"] .punkte li { padding-left: var(--space-sm); border-left: var(--border-w-stark) solid var(--border-strong) }
.punkte li::before, [data-stil="k1"] .punkte li::before { content: none }
[data-stil="k1"] .quelle { margin-block: 0; font-size: var(--text-2xs); color: var(--ink-faint) }
[data-stil="k1"] .mitmachen h2 { font-size: var(--text-4xl) }
.mitmachen h2 em { font-style: normal; color: var(--accent-2) }
.mitmachen .lead { max-width: 150mm }
[data-stil="k1"] .netz__name { font-size: var(--text-sm) }
[data-stil="k1"] :is(.netz__a, .netz__b) { font-size: var(--text-lg) }
[data-stil="k1"] .netz__trenn { font-size: var(--text-md) }
/* K1: Laptop und Handy in der breiten Spalte nebeneinander, unten bündig */
@media (min-width: 761px) {
  [data-stil="k1"] .geraete { height: auto; display: grid; grid-template-columns: 70% 21%; justify-content: center; gap: 4%; align-items: end }
  [data-stil="k1"] .laptop, [data-stil="k1"] .handy { position: static; width: auto }
}

/* Beste Plätze in der Web-Fassung: Kern-Baustein rollwoerter, Zeilenhöhe über seine Variable für zwei Zeilen Text */
.platz-rolle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-xl); align-items: center }
.platz-rolle__satz { color: var(--ink-muted) }
.platz-rolle .rollwoerter { --rollwoerter-zeile: calc(var(--space-3xl) + var(--space-lg)); display: block }
.platz-rolle .rollwoerter__feld { height: calc(var(--rollwoerter-zeile) * 5); padding-block: calc(var(--rollwoerter-zeile) * 2) }
.platz-rolle .rollwoerter__feld li { gap: var(--space-md); line-height: var(--leading-tight) }
.platz-rolle .rollwoerter__feld li b { min-width: 3ch; font-weight: var(--fw-extrabold) }
.platz-rolle .rollwoerter__feld li small { display: block; font-size: var(--text-sm); font-weight: var(--fw-regular); margin-top: var(--space-3xs) }
@media (max-width: 760px) {
  .platz-rolle { grid-template-columns: 1fr; gap: var(--space-md) }
  .platz-rolle .rollwoerter__feld li { font-size: var(--text-xl) }
  .platz-rolle .rollwoerter { --rollwoerter-zeile: calc(var(--space-2xl) + var(--space-md)) }
}

/* Laptop und Handy als ein Bild (werkzeug/geraete.py), mit Lupe */
.geraete-bild { margin-block: var(--space-lg) }
.geraete-bild .lupe__flaeche { border-radius: 0 }
/* Titel auf dem Handy: still, Bild und Tafel untereinander (statt Kern-Baustein aufziehen) */
.titel-still { padding-top: var(--space-4xl); display: grid; gap: var(--space-md) }
.titel-still .aufziehen__titel { padding-inline: var(--space-md); font-size: var(--text-4xl); text-transform: uppercase; line-height: .95 }
.titel-still .aufziehen__titel > span { background: none; padding: 0 }
.titel-still .aufziehen__rahmen { border-radius: 0 }
.titel-still .aufziehen__ueberlage { padding-inline: var(--space-md) }
.titel-still .aufziehen__hinweis { display: none }

/* Rollwörter: jeder Wisch rastet auf genau einem Platz ein, die Seite rollt nicht mit (Vasco, 2026-10-20).
   Vorübergehend im Projekt, Eintrag in design-system/docs/offen.md. */
.platz-rolle .rollwoerter__feld { scroll-snap-type: y mandatory; overscroll-behavior-y: contain }
.platz-rolle .rollwoerter__feld li { scroll-snap-align: center; scroll-snap-stop: always }

/* Erklärung je Wert (berechnung.md, Grundsatz 5) */
.erkl { display: block; margin-top: var(--space-2xs); font-style: normal; font-size: var(--text-2xs); line-height: var(--leading-snug); color: var(--ink-faint) }
.erkl-liste { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs) var(--space-lg); margin: var(--space-md) 0 0 }
.erkl-liste dt { font-size: var(--text-2xs); font-weight: var(--fw-bold); color: var(--ink-muted) }
.erkl-liste dd { margin: 0; font-size: var(--text-2xs); color: var(--ink-faint) }
.rechnen .aufklapp-gruppe { max-width: 150mm; margin-top: var(--space-md) }
.rechnen .aufklapp p { margin: var(--space-xs) 0 var(--space-sm) }
@media (max-width: 760px) { .erkl-liste { grid-template-columns: 1fr } }

/* Vergleich: rechts Clubs und Top 3, Text und Erklärungen im Klappbereich (Vasco, 2026-10-20) */
.vnetz .top5 { grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-md) }
.vergleich__mehr { margin-top: var(--space-lg) }
.vergleich__mehr > p { margin: var(--space-sm) 0 0 }