/* ============================================================
   TVF 1912 — Komponenten
   ============================================================ */

/* ---- Knöpfe -------------------------------------------- */
.tvf-btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  border:1.5px solid transparent; border-radius:var(--r);
  font:600 var(--t-small)/1 var(--font); padding:14px 22px; cursor:pointer;
  transition:opacity var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease),
             gap var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.tvf-btn:active{ transform:translateY(1px) }
.tvf-btn--primary{ background:var(--action); color:var(--on-action) }
.tvf-btn--primary:hover{ opacity:.86; gap:14px }
.tvf-btn--ghost{ border-color:var(--border-strong); color:var(--fg) }
.tvf-btn--ghost:hover{ border-color:var(--fg) }
.tvf-btn--text{ color:var(--accent); padding-inline:0 }
.tvf-btn--text:hover{ gap:14px }
.tvf-btn[disabled],.tvf-btn[aria-disabled="true"]{ opacity:.4; pointer-events:none }

/* ---- Kopfbereich --------------------------------------- */
.tvf-header{
  position:sticky; top:0; z-index:60;
  background:var(--bg);                     /* bewusst deckend, siehe 08-Mockup */
  border-bottom:1px solid var(--border);
}
.tvf-header__in{ display:flex; align-items:center; gap:var(--s5); padding-block:14px }
.tvf-logo{
  font:600 12px/1 var(--mono); letter-spacing:.16em;
  border:1.5px solid currentColor; padding:9px 11px; border-radius:var(--r);
  white-space:nowrap; flex:0 0 auto;
}
/* Kopfelemente dürfen nicht schrumpfen — sonst wird "Dunkel" zu "Du". */
.tvf-header .tvf-mode,
.tvf-header .tvf-btn,
.tvf-header .tvf-burger{ flex:0 0 auto }
.tvf-mode button{ white-space:nowrap }
.tvf-nav{ display:flex; gap:var(--s6); font-size:var(--t-small); color:var(--fg-muted) }
.tvf-nav a{ transition:color var(--d-fast) var(--ease) }
.tvf-nav a:hover,.tvf-nav .current-menu-item > a{ color:var(--fg) }

/* Klappe je Hauptpunkt.
   Öffnet bei :hover und bei :focus-within — damit sie auch mit der
   Tastatur erreichbar ist, ohne eine Zeile JavaScript. Ein Mensch, der
   sich mit Tab durch die Seite bewegt, bekommt dieselbe Übersicht wie
   jemand mit Maus. */
.tvf-nav > li{ position:relative }
.tvf-nav .sub-menu{
  position:absolute; top:100%; left:calc(var(--s4) * -1);
  min-width:16rem; margin:0; padding:var(--s4) 0;
  list-style:none; z-index:80;
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:0 12px 32px rgba(20,22,26,.10);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity var(--d-fast) var(--ease),
             transform var(--d-fast) var(--ease),
             visibility var(--d-fast);
}
.tvf-nav > li:hover > .sub-menu,
.tvf-nav > li:focus-within > .sub-menu{
  opacity:1; visibility:visible; transform:none;
}
.tvf-nav .sub-menu a{
  display:block; padding:9px var(--s5);
  color:var(--fg-muted); white-space:nowrap;
}
.tvf-nav .sub-menu a:hover,
.tvf-nav .sub-menu a:focus-visible,
.tvf-nav .sub-menu .current-menu-item > a{ color:var(--fg); background:var(--bg-2) }

/* Die Klappe hängt unter der Kopfzeile. Ohne diese Brücke schließt sie
   sich, sobald die Maus den Zwischenraum überquert. */
.tvf-nav > li:has(.sub-menu)::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:var(--s4);
}

:root[data-theme="dark"] .tvf-nav .sub-menu{ box-shadow:0 12px 32px rgba(0,0,0,.45) }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tvf-nav .sub-menu{ box-shadow:0 12px 32px rgba(0,0,0,.45) }
}
.tvf-spacer{ flex:1 }

/* Farbschema-Umschalter */
.tvf-mode{ display:flex; border:1px solid var(--border-strong); border-radius:var(--r); overflow:hidden }
.tvf-mode button{
  border:0; background:transparent; color:var(--fg-muted);
  font:11px var(--mono); padding:7px 11px; cursor:pointer;
}
.tvf-mode button[aria-pressed="true"]{ background:var(--fg); color:var(--bg) }

/* ---- Elfenbeinfläche ----------------------------------- */
/* RAL 1015 trägt Flächen, nie Text auf Hell — Regel aus Phase 5 */
/* Feste Fläche: Sie behält ihre Farbe in BEIDEN Modi. Deshalb müssen die
   Rollentoken hier überschrieben werden — sonst kippt z. B. --accent im
   Dunkelmodus auf Elfenbein und wird auf Elfenbein unsichtbar (1,00:1). */
.tvf-elf{
  --fg:        var(--tvf-ink);        /* 12,06:1 auf RAL 1015 */
  --fg-muted:  #3A3226;               /*  8,56:1 */
  --accent:    #6E5730;               /*  4,64:1 — reicht für 11px */
  --border:    rgba(20,22,26,.18);
  --border-strong: rgba(20,22,26,.42);
  --action:    var(--tvf-ink);
  --on-action: var(--accent-flaeche);
  --focus-ring:var(--tvf-ink);
  background:var(--accent-flaeche); color:var(--fg);
  border-radius:var(--r-lg); padding:clamp(40px, 7vw, 88px);
}
.tvf-elf .tvf-eyebrow{ color:#6E5730 }
.tvf-elf .tvf-body{ color:var(--fg-muted) }

/* ---- Invertierter Block -------------------------------- */
.tvf-invert{
  background:var(--tvf-ink); color:var(--tvf-surface);
  border-radius:var(--r-lg); padding:clamp(48px, 8vw, 110px);
  border:1px solid transparent;
}
/* Im Dunkelmodus absenken statt aufhellen — sonst konkurriert der Block
   mit der Elfenbeinfläche und verliert seine Absetzung. */
:root[data-theme="dark"] .tvf-invert{
  background:#08090B; border-color:rgba(230,210,181,.22);
}
/* Ebenfalls feste Fläche — gleiche Begründung wie bei .tvf-elf. */
.tvf-invert{
  --fg:        var(--tvf-surface);
  --fg-muted:  rgba(247,245,241,.72);
  --accent:    var(--tvf-elfenbein);  /* 12,29:1 auf Anthrazit */
  --border:    rgba(230,210,181,.22);
  --border-strong: rgba(230,210,181,.42);
  --action:    var(--tvf-elfenbein);
  --on-action: var(--tvf-ink);
  --focus-ring:var(--tvf-elfenbein);
  color:var(--fg);
}
.tvf-invert .tvf-body{ color:var(--fg-muted) }
.tvf-invert .tvf-eyebrow{ color:rgba(230,210,181,.75) }

/* ---- Die Linie ----------------------------------------- */
.tvf-linie{ position:relative; padding-left:clamp(28px, 5vw, 60px) }
.tvf-linie::before{
  content:""; position:absolute; left:5px; top:10px; bottom:0; width:2px;
  background:linear-gradient(to bottom, var(--accent), var(--border) 78%, transparent);
}
.tvf-linie__pkt{ position:relative; padding-bottom:var(--s8) }
.tvf-linie__pkt:last-child{ padding-bottom:0 }
.tvf-linie__pkt::before{
  content:""; position:absolute; left:calc(-1 * clamp(28px,5vw,60px) + 1px); top:9px;
  width:9px; height:9px; border-radius:var(--r-full);
  background:var(--accent); outline:4px solid var(--bg);
}
.tvf-jahr{
  display:block; font:600 11px/1 var(--mono); letter-spacing:.2em;
  color:var(--accent); margin-bottom:var(--s3);
}

/* ---- Tageszähler --------------------------------------- */
.tvf-zaehler{ display:flex; align-items:baseline; gap:var(--s4); flex-wrap:wrap }
.tvf-zaehler__n{
  font:600 clamp(2.6rem, 7vw, 6rem)/.9 var(--font);
  letter-spacing:-.045em; color:var(--accent); font-variant-numeric:tabular-nums;
}
.tvf-zaehler__l{
  font:11px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--fg-muted);
}

/* ---- Karte --------------------------------------------- */
.tvf-card{
  border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s5); background:var(--bg);
}
:root[data-theme="dark"] .tvf-card{ background:var(--bg-2) }

/* ---- Marke / Status ------------------------------------ */
.tvf-tag{
  display:inline-block; font:600 10px/1 var(--mono); letter-spacing:.1em;
  text-transform:uppercase; padding:5px 10px; border-radius:var(--r-full);
  border:1px solid var(--border-strong); color:var(--fg-muted);
}
.tvf-tag--solid{ background:var(--fg); color:var(--bg); border-color:var(--fg) }

/* ---- Raster -------------------------------------------- */
.tvf-g2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s7) }
.tvf-g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5) }
.tvf-g4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5) }
.tvf-split{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,6vw,96px); align-items:start }

/* ---- Bildfläche (Platzhalter bis zur Fotoproduktion) ---- */
.tvf-ph{
  position:relative; border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  background:linear-gradient(150deg,#33383F,#191C22 55%,#0D0F12);
}
.tvf-ph::after{
  content:""; position:absolute; inset:0; opacity:.3; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tvf-ph--sepia{ background:linear-gradient(150deg,#6B5738,#3A2F1F 58%,#191510) }
.tvf-ph--hell{ background:linear-gradient(150deg,#DAD6CD,#B5B0A5 58%,#8B877E) }
/* Beschriftung auf Bildflächen.
   Volle Deckkraft, nicht abgesenkt: Gegen die HELLSTE Stufe des Verlaufs
   ergibt .75 nur 3,40:1 — zu wenig. Bei 1.0 sind es 4,68:1.
   Diese Stelle fällt keinem automatischen Prüfer auf, weil ein Verlauf
   keinen einzelnen Hintergrundwert hat. Von Hand nachgerechnet. */
.tvf-ph__cap{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font:10px var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--tvf-elfenbein);                    /* 4,68:1 auf #6B5738 */
  text-shadow:0 1px 3px rgba(0,0,0,.45);          /* trägt auf hellen Stufen zusätzlich */
}
.tvf-ph--hell .tvf-ph__cap{
  color:rgba(20,22,26,.85);                       /* 8,75:1 auf #DAD6CD */
  text-shadow:none;
}

/* ---- Fußbereich ---------------------------------------- */
.tvf-footer{
  border-top:1px solid var(--border); padding-block:var(--s9) var(--s7);
  color:var(--fg-muted); font-size:var(--t-small);
}
.tvf-footer h2{ font:600 11px var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg); margin-bottom:var(--s4) }
.tvf-footer li{ margin-bottom:10px }
.tvf-footer a:hover{ color:var(--fg) }

/* ---- Umbruch ------------------------------------------- */
@media (max-width:900px){
  /* Unter 900 px übernimmt das Vollbildmenü. Dort stehen „Mitglied werden"
     und „Anmelden" bereits — im Kopf würden sie den Platz nehmen, den der
     Umschalter und die Menütaste brauchen. */
  .tvf-nav, .tvf-header .tvf-btn--primary, .tvf-anmelden{ display:none }
  .tvf-g2,.tvf-g3,.tvf-g4,.tvf-split{ grid-template-columns:1fr }
  .tvf-g2,.tvf-g3,.tvf-g4,.tvf-split{ gap:var(--s5) }
}

/* ---- Akttrenner ---------------------------------------- */
.tvf-akt{
  border-top:1px solid var(--border); padding-top:var(--s5);
  display:flex; gap:var(--s5); align-items:baseline; flex-wrap:wrap;
}
.tvf-akt__n{ font:600 11px var(--mono); letter-spacing:.24em; color:var(--accent) }
.tvf-akt__t{ font:600 11px var(--mono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-muted) }

/* ---- Hero ---------------------------------------------- */
/* Trägt ein Bild und folgt deshalb bewusst nicht dem Farbschema:
   Sonst müsste die Fotografie zweimal existieren. */
.tvf-hero{
  position:relative; min-height:94vh; display:flex; align-items:flex-end;
  padding-bottom:var(--s9); overflow:hidden; color:#F7F5F1;
}
.tvf-hero__in{ position:relative; z-index:1; width:100% }
.tvf-hero a{ color:#F7F5F1 }
/* Trägt im Kopf der Startseite die Einordnung der Vereinigung. Vorher
   11 px bei 75 % Deckkraft — für eine beiläufige Beschriftung richtig, für
   die Angabe, worum es auf dieser Website geht, zu leise. */
.tvf-hero__eyebrow{
  font-size:13px; letter-spacing:.16em;
  color:rgba(230,210,181,.95);
}

/* „Seit 1912." eine Spur kleiner als der Name und in der Akzentfarbe:
   Es ist der Nachsatz, nicht die Aussage — und es nimmt die Zahl auf,
   die direkt darunter in Tagen steht. */
/* Der Vereinsname ist eine Benennung, kein Schlagwort. In der vollen
   Anzeigengröße (bis 136 px) füllte er den ganzen Bildschirm und drängte
   alles darunter aus dem Blick. Eine Stufe kleiner, Zeilenlänge begrenzt:
   zwei Zeilen, die man in einem Blick erfasst. */
.tvf-d1--name{
  font-size:clamp(2.4rem, 6.2vw, 5.4rem);
  line-height:.96;
  max-width:21ch;
}
.tvf-d1--name .tvf-d1__nach{ display:block; margin-top:var(--s4) }

.tvf-d1__nach{ font-size:.62em; color:var(--accent) }
/* Im dunklen Kopf der Startseite dieselbe Elfenbeinfarbe wie die
   Tageszahl darunter — die beiden Angaben sagen dasselbe in zwei
   Maßeinheiten und sollen als Paar erkennbar sein. */
.tvf-hero .tvf-d1__nach{ color:var(--tvf-elfenbein-tief) }
.tvf-hero__bg{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(160deg,#31353E,#181B21 45%,#0B0D10);
}
.tvf-hero__bg::after{
  content:""; position:absolute; inset:0; opacity:.28; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tvf-hero__veil{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(to top, rgba(11,13,16,.94) 12%, rgba(11,13,16,.35) 55%, rgba(11,13,16,.15));
}
.tvf-hero .tvf-zaehler{ margin-top:var(--s5) }
.tvf-hero .tvf-zaehler__n{ color:var(--tvf-elfenbein) }
.tvf-hero .tvf-zaehler__l{ color:rgba(247,245,241,.62) }

/* ---- Rechner im Hero ----------------------------------- */
.tvf-rechner{
  margin-top:var(--s7); max-width:720px;
  background:rgba(247,245,241,.07); border:1px solid rgba(230,210,181,.28);
  border-radius:var(--r-lg); padding:var(--s5); backdrop-filter:blur(18px);
}
.tvf-rechner__routen{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s4) }
.tvf-rechner__routen button{
  background:transparent; border:1px solid rgba(247,245,241,.3); color:#F7F5F1;
  font:12px var(--font); padding:9px 14px; border-radius:var(--r-full); cursor:pointer;
  transition:all var(--d-fast) var(--ease);
}
.tvf-rechner__routen button:hover{ border-color:var(--tvf-elfenbein) }
.tvf-rechner__routen button[aria-pressed="true"]{
  background:var(--tvf-elfenbein); color:var(--tvf-ink);
  border-color:var(--tvf-elfenbein); font-weight:600;
}
.tvf-rechner__ergebnis{ display:flex; align-items:baseline; gap:var(--s4); flex-wrap:wrap }
.tvf-rechner__preis{
  font:600 clamp(2rem,4.5vw,3.4rem)/1 var(--font);
  letter-spacing:-.035em; color:var(--tvf-elfenbein);
}
.tvf-rechner__weg{ font:11px var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:rgba(247,245,241,.6) }
.tvf-rechner__hinweis{
  margin-top:var(--s4); padding-top:var(--s4);
  border-top:1px solid rgba(247,245,241,.14);
  font-size:13px; line-height:1.6; color:rgba(247,245,241,.74);
}
.tvf-rechner__hinweis strong{ color:#F7F5F1; font-weight:600 }

@media (max-width:900px){
  .tvf-hero{ min-height:auto; padding-top:120px }
}

/* ============================================================
   Zeitstrahl
   ============================================================ */
.tvf-auftakt{
  min-height:88vh; display:flex; flex-direction:column; justify-content:center;
  padding-block:var(--s9);
}
.tvf-jahr-gross{
  font:600 clamp(5rem,20vw,17rem)/.82 var(--font);
  letter-spacing:-.055em; color:var(--fg);
}
.tvf-auftakt__h1{
  font:600 clamp(1.6rem,3.6vw,3rem)/1.12 var(--font);
  letter-spacing:-.03em; max-width:20ch; margin-top:var(--s6);
}
.tvf-auftakt__z{ margin-top:var(--s7); padding-top:var(--s6); border-top:1px solid var(--border) }
.tvf-auftakt .tvf-zaehler__n{ font-size:clamp(1.8rem,4vw,3rem) }

/* Jahresleiste — bewusst deckend, siehe Kopfbereich */
.tvf-leiste{
  position:sticky; top:57px; z-index:50; background:var(--bg);
  border-bottom:1px solid var(--border); padding-block:11px;
}
.tvf-leiste ol{ display:flex; overflow-x:auto; scrollbar-width:none }
.tvf-leiste ol::-webkit-scrollbar{ display:none }
.tvf-leiste a{
  display:block; flex:0 0 auto; font:11px var(--mono); letter-spacing:.12em;
  color:var(--fg-muted); padding:6px 14px; white-space:nowrap;
  border-bottom:2px solid transparent; transition:color var(--d-fast) var(--ease);
}
.tvf-leiste a:hover{ color:var(--fg) }
.tvf-leiste a.is-aktiv{ color:var(--fg); border-bottom-color:var(--accent); font-weight:600 }

/* Die Spur — durchgehende Linie mit Fortschritt */
.tvf-spur{ position:relative; padding-left:var(--spur, clamp(34px,7vw,120px)) }
.tvf-spur::before,.tvf-spur::after{
  content:""; position:absolute; left:calc(var(--spur, clamp(34px,7vw,120px)) / 2 - 1px);
  top:0; width:2px;
}
.tvf-spur::before{ bottom:0; background:var(--border) }
.tvf-spur::after{ height:var(--fortschritt,0%); background:var(--accent); transition:height 120ms linear }

.tvf-epoche{ position:relative; padding-block:clamp(56px,9vh,120px) }
.tvf-epoche::before{
  content:""; position:absolute;
  left:calc(var(--spur, clamp(34px,7vw,120px)) / -2 - 5px);
  top:calc(clamp(56px,9vh,120px) + 10px);
  width:12px; height:12px; border-radius:var(--r-full);
  background:var(--bg); border:2px solid var(--border-strong);
  transition:background var(--d-base) var(--ease), border-color var(--d-base) var(--ease),
             transform var(--d-base) var(--ease);
}
.tvf-epoche.is-in::before{ background:var(--accent); border-color:var(--accent); transform:scale(1.15) }
.tvf-epoche__jahr{
  font:600 clamp(1.05rem,2vw,1.5rem)/1 var(--font);
  letter-spacing:.02em; color:var(--accent);
}
.tvf-epoche__h2{
  font:600 clamp(1.5rem,3.4vw,2.7rem)/1.1 var(--font);
  letter-spacing:-.03em; margin-top:var(--s4); max-width:22ch;
}
.tvf-epoche--dunkel .tvf-invert{ padding:clamp(36px,5vw,72px) }

/* Offene Angaben — sichtbar als Platzhalter markiert, nicht erfunden */
.tvf-offen{
  display:inline-block; font:500 9px var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
  border:1px dashed var(--accent); padding:3px 7px; border-radius:var(--r-full);
}

.tvf-ende{ padding-block:clamp(72px,12vh,150px) clamp(96px,16vh,190px); position:relative }
.tvf-ende::before{
  content:""; position:absolute; left:calc(var(--spur, clamp(34px,7vw,120px)) / 2 - 1px);
  top:0; width:2px; height:100%;
  background:linear-gradient(to bottom, var(--accent), transparent);
}
.tvf-ende > *{ margin-left:var(--spur, clamp(34px,7vw,120px)) }

@media (max-width:820px){
  .tvf-leiste{ top:55px }
}

/* ============================================================
   Mobile Navigation
   ============================================================ */
.tvf-burger{
  display:none; margin-left:auto;
  border:1.5px solid var(--border-strong); background:transparent; color:var(--fg);
  font:600 var(--t-small)/1 var(--font); padding:13px 18px;
  border-radius:var(--r); cursor:pointer;
  transition:border-color var(--d-fast) var(--ease);
}
.tvf-burger:hover{ border-color:var(--fg) }

.tvf-menue{
  position:fixed; inset:0; z-index:70; background:var(--bg);
  overflow-y:auto; overscroll-behavior:contain;
  padding-top:calc(57px + var(--s6));
}
.tvf-menue[hidden]{ display:none }
.tvf-menue__in{ padding-bottom:var(--s9) }

.tvf-menue__liste li{ border-bottom:1px solid var(--border) }
.tvf-menue__liste a{
  display:block; padding:var(--s5) 0;
  font:600 clamp(1.35rem,5vw,1.9rem)/1.2 var(--font); letter-spacing:-.02em;
}
.tvf-menue__liste .sub-menu{ padding:0 0 var(--s4) var(--s4) }
.tvf-menue__liste .sub-menu li{ border:0 }
.tvf-menue__liste .sub-menu a{
  font:400 var(--t-body)/1.4 var(--font); letter-spacing:0;
  color:var(--fg-muted); padding:var(--s3) 0;
}
.tvf-menue__aktionen{
  display:flex; flex-direction:column; gap:var(--s3);
  margin-top:var(--s8);
}
.tvf-menue__aktionen .tvf-btn{ justify-content:center }

/* Sperrt das Scrollen dahinter, solange das Menü offen ist. */
body.tvf-menue-offen{ overflow:hidden }

@media (max-width:900px){
  .tvf-burger{ display:inline-flex }
}
/* Auf großen Bildschirmen bleibt das Menü aus, auch wenn JavaScript fehlt. */
@media (min-width:901px){
  .tvf-menue{ display:none }
}

/* ============================================================
   Festpreisrechner
   ============================================================ */
.tvf-strecken{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s5) }
.tvf-strecken button{
  background:transparent; border:1px solid var(--border-strong); color:var(--fg);
  font:13px var(--font); padding:11px 16px; border-radius:var(--r-full); cursor:pointer;
  transition:border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.tvf-strecken button:hover{ border-color:var(--fg) }
.tvf-strecken button[aria-pressed="true"]{
  background:var(--fg); color:var(--bg); border-color:var(--fg); font-weight:600;
}

.tvf-preise{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); margin-top:var(--s7) }
.tvf-preis{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:transparent; color:inherit; font:inherit;
  border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s6);
  transition:border-color var(--d-base) var(--ease);
}
.tvf-preis[aria-pressed="true"]{ border-color:var(--fg); border-width:2px; padding:calc(var(--s6) - 1px) }
.tvf-preis__lab{ display:block; font:11px var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-muted) }
.tvf-preis__val{ display:block; font:600 clamp(2rem,4.2vw,3.1rem)/1 var(--font);
  letter-spacing:-.035em; margin-top:var(--s4) }
.tvf-preis__par{ display:block; font:11px var(--mono); color:var(--accent); margin-top:var(--s2) }
.tvf-preis__sub{ display:block; font-size:13px; color:var(--fg-muted); margin-top:var(--s3) }
.tvf-guenstiger{
  display:inline-block; font:600 10px var(--mono); letter-spacing:.1em; text-transform:uppercase;
  background:var(--tvf-elfenbein); color:var(--tvf-ink);
  padding:4px 8px; border-radius:var(--r-full); margin-left:var(--s3);
}
/* Muss NACH .tvf-guenstiger stehen: eine Klasse schlägt sonst das hidden-Attribut. */
[hidden]{ display:none !important }

/* ---- Wasserfall ---------------------------------------- */
.tvf-wf{ width:100%; border-collapse:collapse }
.tvf-wf th{
  text-align:left; font:500 11px var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-muted); padding:0 0 var(--s4);
}
.tvf-wf th:last-child{ text-align:right }
.tvf-wf td{ padding:9px 0; vertical-align:middle; border:0 }
.tvf-wf__nm{ font-size:14.5px; color:var(--fg-muted); width:38% }
.tvf-wf__tr{ width:44% }
.tvf-wf__vl{ text-align:right; font:14.5px var(--mono); width:18% }
.tvf-wf__bar{
  display:block; height:20px; background:var(--border-strong); border-radius:2px;
  transition:width var(--d-slow) var(--ease);
}
.tvf-wf__summe .tvf-wf__nm,.tvf-wf__summe .tvf-wf__vl{ font-weight:700; color:var(--fg) }
.tvf-wf__summe .tvf-wf__bar{ background:var(--accent) }
.tvf-wf__sep td{ border-top:1.5px solid var(--border); padding-top:var(--s4) }
.tvf-wf__offen td{ opacity:.5 }
.tvf-wf__offen .tvf-wf__bar{ background:transparent; border:1.5px dashed var(--border-strong) }

.tvf-hinweis{
  border-left:3px solid var(--accent); background:var(--bg-2);
  padding:var(--s5); border-radius:0 var(--r) var(--r) 0;
  font-size:14px; color:var(--fg-muted); margin-top:var(--s6); max-width:64ch;
}
.tvf-hinweis strong{
  display:block; font:500 10px var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg); margin-bottom:var(--s2);
}

/* ---- Besetztgrad --------------------------------------- */
.tvf-besetzt{ display:flex; height:38px; border:1px solid var(--border-strong);
  border-radius:var(--r); overflow:hidden }
.tvf-besetzt__voll{ flex:1; background:var(--fg) }
.tvf-besetzt__leer{ flex:1;
  background:repeating-linear-gradient(45deg,transparent,transparent 6px,var(--border) 6px,var(--border) 12px) }
.tvf-besetzt__l{ display:flex; justify-content:space-between; font:11px var(--mono);
  letter-spacing:.1em; text-transform:uppercase; color:var(--fg-muted); margin-top:var(--s3) }

.tvf-schluss{ font:600 clamp(1.5rem,3.4vw,2.6rem)/1.2 var(--font);
  letter-spacing:-.03em; max-width:20ch }

@media (max-width:820px){
  .tvf-preise{ grid-template-columns:1fr }
  .tvf-wf thead{ display:none }
  .tvf-wf tr{ display:block; padding:var(--s3) 0; border-bottom:1px solid var(--border) }
  .tvf-wf td{ display:block; width:auto; padding:2px 0 }
  .tvf-wf__vl{ text-align:left }
}

.tvf-preis__hint{
  display:block; margin-top:var(--s4); padding-top:var(--s4);
  border-top:1px solid var(--border);
  font:600 13px var(--font); color:var(--accent);
}

/* ============================================================
   Regelwerk
   ============================================================ */
.tvf-regel__kopf{ display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center; margin-top:var(--s5) }
.tvf-regel__kurz{ margin-top:var(--s7); padding:clamp(28px,4vw,48px) }

.tvf-regel{ display:grid; grid-template-columns:250px 1fr; gap:clamp(32px,6vw,80px);
  align-items:start; margin-top:var(--s8) }
.tvf-regel__toc{ position:sticky; top:90px; border-left:2px solid var(--border); padding-left:var(--s5) }
.tvf-regel__toc ol{ margin-top:var(--s3) }
.tvf-regel__toc li{ margin-bottom:var(--s2) }
.tvf-regel__toc a{ display:block; font-size:14px; color:var(--fg-muted); line-height:1.4;
  padding:3px 0; transition:color var(--d-fast) var(--ease) }
.tvf-regel__toc a:hover{ color:var(--fg) }
.tvf-regel__toc a.is-aktiv{ color:var(--fg); font-weight:600 }
.tvf-regel__toc li.tvf-toc--tief a{ padding-left:var(--s4); font-size:13px }

.tvf-regel__text{ max-width:66ch }
.tvf-regel__download{ margin-top:var(--s8); padding-top:var(--s6); border-top:1px solid var(--border) }

/* Fließtext innerhalb von Regelwerken und Standardseiten */
.tvf-inhalt h2{ font:600 clamp(1.3rem,2.4vw,1.85rem)/1.2 var(--font);
  letter-spacing:-.02em; margin-top:var(--s8); scroll-margin-top:100px }
.tvf-inhalt h3{ font:600 1.2rem/1.3 var(--font); margin-top:var(--s6); scroll-margin-top:100px }
.tvf-inhalt p{ margin-top:var(--s4); color:var(--fg-muted) }
.tvf-inhalt ul,.tvf-inhalt ol{ margin-top:var(--s4); padding-left:var(--s5); color:var(--fg-muted) }
.tvf-inhalt li{ margin-bottom:var(--s2); list-style:disc }
.tvf-inhalt ol li{ list-style:decimal }
.tvf-inhalt a{ color:var(--accent); border-bottom:1px solid currentColor }
.tvf-inhalt strong{ color:var(--fg) }

a.tvf-card{ display:block; transition:border-color var(--d-fast) var(--ease) }
a.tvf-card:hover{ border-color:var(--fg) }

@media (max-width:900px){
  .tvf-regel{ grid-template-columns:1fr }
  .tvf-regel__toc{ position:static; border-left:0; border-bottom:1px solid var(--border);
    padding-left:0; padding-bottom:var(--s5) }
}

/* Hervorgehobene Karte auf Bereichsübersichten */
.tvf-card--hervor{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px);
  align-items:center; border-width:2px; border-color:var(--fg);
  padding:clamp(28px,4vw,48px); margin-top:var(--s6);
}
.tvf-card--hervor img{ border-radius:var(--r) }
@media (max-width:820px){ .tvf-card--hervor{ grid-template-columns:1fr } }

/* ============================================================
   Partner — Kapitel statt Kacheln
   ============================================================ */
.tvf-partner{ border-top:1px solid var(--border); padding-top:var(--s6); margin-top:var(--s7) }
.tvf-partner__meta{ display:flex; gap:var(--s3); flex-wrap:wrap; align-items:baseline }
.tvf-partner__bild img{ border-radius:var(--r-lg) }
.tvf-partner--leit{ display:block }
.tvf-partner--leit .tvf-partner__bild{ margin-bottom:var(--s6) }
.tvf-partner:not(.tvf-partner--leit){
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center;
}
.tvf-partner:not(.tvf-partner--leit) .tvf-partner__bild{ order:2 }
@media (max-width:820px){
  .tvf-partner:not(.tvf-partner--leit){ grid-template-columns:1fr }
  .tvf-partner:not(.tvf-partner--leit) .tvf-partner__bild{ order:0 }
}

/* ---- Presse -------------------------------------------- */
.tvf-presse__kontakt{ margin-top:var(--s7); border-width:2px; border-color:var(--fg);
  padding:clamp(28px,4vw,48px) }
.tvf-presse__person{ display:grid; grid-template-columns:180px 1fr; gap:var(--s6);
  align-items:center; margin-top:var(--s5) }
.tvf-presse__bild img{ border-radius:var(--r-lg) }
.tvf-presse__kontakt a{ border-bottom:1px solid currentColor }
.tvf-presse__meldung{ display:grid; grid-template-columns:150px 1fr; gap:var(--s5);
  align-items:baseline; padding:var(--s5) 0; border-bottom:1px solid var(--border);
  transition:opacity var(--d-fast) var(--ease) }
.tvf-presse__meldung:hover{ opacity:.7 }
@media (max-width:700px){
  .tvf-presse__person,.tvf-presse__meldung{ grid-template-columns:1fr; gap:var(--s3) }
  .tvf-presse__bild{ max-width:160px }
}

/* ---- Faksimile ----------------------------------------- */
.tvf-faksimile{ margin-block:var(--s6) }
.tvf-faksimile img{
  border-radius:var(--r-lg); border:1px solid var(--border);
  max-height:80vh; width:auto; margin-inline:auto;
}
:root[data-theme="dark"] .tvf-faksimile img{
  /* Dokumente bleiben hell — ein Faksimile wird nicht invertiert. */
  background:var(--tvf-surface); padding:var(--s3);
}
.tvf-faksimile figcaption{ margin-top:var(--s4); text-align:center }

/* Zitat im Fließtext — für Belegstellen aus Dokumenten */
.tvf-inhalt blockquote{
  margin:var(--s6) 0; padding:var(--s5) var(--s6);
  border-left:3px solid var(--accent); background:var(--bg-2);
  border-radius:0 var(--r) var(--r) 0;
}
.tvf-inhalt blockquote p{ margin-top:0; color:var(--fg); font-size:1.05rem; line-height:1.6 }
.tvf-inhalt blockquote p + p{ margin-top:var(--s3) }
.tvf-inhalt blockquote cite{
  display:block; margin-top:var(--s4); font:500 11px var(--mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--fg-muted); font-style:normal;
}
.tvf-inhalt table{ width:100%; border-collapse:collapse; margin-top:var(--s5); font-size:var(--t-small) }
.tvf-inhalt th{ text-align:left; font:500 11px var(--mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-muted); padding:var(--s2) var(--s3);
  border-bottom:1.5px solid var(--border-strong) }
.tvf-inhalt td{ padding:var(--s3); border-bottom:1px solid var(--border); color:var(--fg-muted) }
.tvf-inhalt td strong{ color:var(--fg) }
.tvf-faksimile a{ display:block; transition:opacity var(--d-fast) var(--ease) }
.tvf-faksimile a:hover{ opacity:.88 }
.tvf-faksimile__hinweis{ opacity:.75 }

/* Fundstelle unter einer Aussage — der sichtbare Beleg */
.tvf-beleg{
  margin-top:var(--s4); padding-top:var(--s3);
  border-top:1px solid var(--border);
  font:500 11px/1.5 var(--mono); letter-spacing:.08em;
  color:var(--accent);
}

/* Aufzählung mit Häkchen — für Angaben, die etwas ausschließen
   („was NICHT extra kostet"). Das Zeichen sitzt in der Marge, damit die
   Textkante bündig zur übrigen Spalte bleibt. */
.tvf-liste{ display:grid; gap:var(--s3) }
.tvf-liste li{
  position:relative; padding-left:var(--s6);
  font-size:var(--t-body); line-height:1.55; color:var(--fg);
}
.tvf-liste li::before{
  content:"✓"; position:absolute; left:0; top:0;
  font-weight:600; color:var(--accent);
}

/* Kleine Wertetabelle innerhalb einer Karte.
   Übernimmt die Typografie von .tvf-inhalt table, ohne dessen Abstände —
   in einer Karte ist der Platz knapper. */
.tvf-tab{ width:100%; border-collapse:collapse; font-size:var(--t-small) }
/* th ist im Browser standardmäßig zentriert und fett — beides muss hier
   zurückgesetzt werden, sonst rutschen die Zeilenbeschriftungen ein. */
.tvf-tab th,
.tvf-tab td{ padding:var(--s3) 0; border-bottom:1px solid var(--border);
  color:var(--fg-muted); text-align:left; vertical-align:baseline }
.tvf-tab tr:last-child th,
.tvf-tab tr:last-child td{ border-bottom:0 }
.tvf-tab td{ color:var(--fg); font-weight:600; width:60% }

/* ---- Personen ------------------------------------------ */
.tvf-personen{
  display:grid; gap:var(--s6);
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}
.tvf-person{ display:flex; flex-direction:column }
/* Porträt oder Initialen. Feste Proportion, damit die Reihe ruhig bleibt,
   auch wenn nur ein Teil der Bilder vorliegt. */
.tvf-person__bild{
  aspect-ratio:3/4; border-radius:var(--r-lg); overflow:hidden;
  background:var(--bg-2); border:1px solid var(--border);
  display:grid; place-items:center; margin-bottom:var(--s4);
}
.tvf-person__bild img{ width:100%; height:100%; object-fit:cover; display:block }
/* Ohne Porträt: kleines rundes Zeichen statt eines hohen leeren Rahmens.
   Sieben leere Hochformate nebeneinander lesen sich als Baustelle. */
.tvf-person__bild--leer{
  aspect-ratio:1; width:76px; border-radius:var(--r-full);
  border-style:solid; border-color:var(--border-strong);
}
.tvf-person__bild span{
  font:600 1.15rem/1 var(--font); letter-spacing:.06em; color:var(--fg-muted);
}
.tvf-person__name{ font:600 var(--t-body)/1.3 var(--font); color:var(--fg) }
.tvf-person__rolle{
  margin-top:var(--s2); font:500 11px/1.4 var(--mono);
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
}
.tvf-person__aufgaben{ margin-top:var(--s3); display:grid; gap:4px }
.tvf-person__aufgaben li{ font-size:14px; line-height:1.45; color:var(--fg-muted) }
.tvf-person__kontakt{
  margin-top:var(--s4); padding-top:var(--s3);
  border-top:1px solid var(--border); display:grid; gap:2px;
}
.tvf-person__kontakt a{
  font-size:14px; color:var(--fg-muted); overflow-wrap:anywhere;
  transition:color var(--d-fast) var(--ease);
}
.tvf-person__kontakt a:hover{ color:var(--fg) }

/* Sprechzeit in der Geschäftsstelle — der eigentliche Wert einer
   Partnerschaft. Im Bestand stand sie mitten im Fließtext. */
.tvf-sprechzeit{
  margin-top:var(--s4); padding:var(--s3) var(--s4);
  border-left:2px solid var(--accent); border-radius:0 var(--r) var(--r) 0;
  background:var(--bg-2);
  font-size:14px; line-height:1.5; color:var(--fg);
}

/* Zugang zum Mitgliederbereich — bewusst als Textverweis, nicht als Knopf.
   Zwei gleich starke Schaltflächen nebeneinander lassen den Blick pendeln;
   „Mitglied werden" soll der stärkere bleiben. */
.tvf-anmelden{
  flex:0 0 auto; white-space:nowrap;
  font:600 var(--t-small)/1 var(--font);
  color:var(--fg-muted);
  padding:14px 4px;
  transition:color var(--d-fast) var(--ease);
}
.tvf-anmelden:hover{ color:var(--fg) }

/* ---- Rechtstext: lange Gliederung ----------------------
   Eine Datenschutzerklärung wird nicht gelesen, sondern durchsucht.
   Deshalb klare Blöcke mit Trennlinie statt durchlaufendem Fließtext —
   und eine Lesebreite, die das Springen zwischen Abschnitten erlaubt. */
.tvf-ds{ max-width:74ch }
.tvf-ds__block + .tvf-ds__block{
  margin-top:var(--s7); padding-top:var(--s7);
  border-top:1px solid var(--border);
}
.tvf-ds__block .tvf-inhalt{ margin-top:var(--s4) }
.tvf-ds__block .tvf-inhalt p + p{ margin-top:var(--s4) }
.tvf-ds__block .tvf-inhalt ul{ margin-top:var(--s4); padding-left:var(--s5) }
.tvf-ds__block .tvf-inhalt li{ list-style:disc; margin-bottom:var(--s3) }

/* ---- Reifegrad im Innovationsbereich -------------------
   Vier Zustände, die sich unterscheiden müssen: im Einsatz, läuft aber
   noch nicht öffentlich, in Entwicklung, geplant.

   Farbe trägt die Unterscheidung NICHT allein — der Text steht daneben.
   Wer Rot und Grün nicht trennen kann, liest trotzdem, was gemeint ist. */
.tvf-stufe{
  display:inline-flex; align-items:center; gap:7px;
  font:600 10px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  padding:5px 10px 5px 8px; border-radius:var(--r-full);
  border:1px solid var(--border-strong); color:var(--fg-muted);
}
.tvf-stufe::before{
  content:""; width:7px; height:7px; border-radius:var(--r-full);
  background:currentColor; flex:0 0 auto;
}
/* Nur der laufende Betrieb bekommt Farbe. Alles andere bleibt zurückhaltend —
   sonst sieht Geplantes aus wie Erreichtes. */
.tvf-stufe--betrieb{ color:var(--tvf-ok); border-color:currentColor }
:root[data-theme="dark"] .tvf-stufe--betrieb{ color:#5FD39B }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tvf-stufe--betrieb{ color:#5FD39B }
}
/* Vier Zustände, vier unterscheidbare Formen — nicht nur vier Texte.
   „In Entwicklung" und „Geplant" sahen im ersten Entwurf gleich aus; wer
   die Karten überfliegt, hätte den Unterschied nicht gesehen. */
.tvf-stufe--intern::before{ background:transparent; box-shadow:inset 0 0 0 2px currentColor }
.tvf-stufe--entwicklung::before{ background:transparent; box-shadow:inset 0 0 0 1px currentColor }
.tvf-stufe--geplant{ border-style:dashed }
.tvf-stufe--geplant::before{ background:transparent; box-shadow:none; border:1px dashed currentColor }

/* Merksatz — ein Beispiel in der Stimme des Fahrgasts.
   Bewusst als Zitat gesetzt: Was in Anführungszeichen steht, liest sich
   als etwas, das jemand sagt, nicht als Funktionsbeschreibung. */
.tvf-merksatz{
  padding:var(--s3) var(--s4);
  border-left:2px solid var(--accent);
  font-size:var(--t-body); line-height:1.5;
  color:var(--fg);
}

/* ---- Gegenüberstellung ---------------------------------
   Zwei Sätze nebeneinander: der übliche und der, um den es geht.
   Die Trennung ist eine Linie, keine Karte — es sind nicht zwei
   Angebote zur Auswahl, sondern ein Vorher und ein Nachher.

   Der linke Satz steht gedämpft, der rechte in voller Farbe. Das ist
   die ganze Hierarchie; sie kommt ohne ein zweites Signal aus. */
.tvf-gegen{ display:grid; grid-template-columns:1fr 1fr }
.tvf-gegen__seite{ padding:var(--s6) clamp(20px,3vw,40px) }
.tvf-gegen__seite:first-child{ padding-left:0 }
.tvf-gegen__seite + .tvf-gegen__seite{
  border-left:1px solid var(--border); padding-right:0;
}
.tvf-gegen__satz{
  margin-top:var(--s4);
  font:600 var(--t-h2)/1.12 var(--font); letter-spacing:-.025em;
  color:var(--fg-muted);
}
.tvf-gegen__folge{ margin-top:var(--s5); font-size:var(--t-small); line-height:1.6; color:var(--fg-muted) }
/* Die zweite Seite ist die Antwort — deshalb voll ausgezeichnet. */
.tvf-gegen__seite:last-child .tvf-gegen__satz{ color:var(--fg) }

@media (max-width:820px){
  .tvf-gegen{ grid-template-columns:1fr }
  .tvf-gegen__seite{ padding-inline:0 }
  .tvf-gegen__seite + .tvf-gegen__seite{
    border-left:0; border-top:1px solid var(--border);
  }
}

/* Gleichrangige Gegenüberstellung.
   Der Regelfall stellt ein Vorher einem Nachher gegenüber und dämpft die
   linke Seite. Bei zwei gleichwertigen Hälften — Fahrgast und Fahrer —
   wäre das eine Aussage, die niemand treffen wollte. */
.tvf-gegen--gleich .tvf-gegen__satz{ color:var(--fg) }

/* ---- Tariftafel ---------------------------------------
   Ersetzt die abfotografierten Aushänge der Stadt auf /taxi/preise/.
   Bewusst schmal: Eine Tariftafel ist eine Preisangabe, kein Banner —
   über die halbe Spaltenbreite hinaus liest sie sich schlechter, weil
   das Auge zwischen Bezeichnung und Betrag zu weit springt. */
.tvf-tafel{
  margin:var(--s6) 0; max-width:38ch;
  padding:var(--s5) var(--s6);
  border:1px solid var(--border-strong); border-radius:var(--r-lg);
}
.tvf-tafel .tvf-tab td{ text-align:right; width:auto; white-space:nowrap; font-variant-numeric:tabular-nums }
.tvf-tafel .tvf-tab th{ font-weight:400 }
/* Die Fundstelle je Zeile — sie gehört zur Angabe, nicht in eine Fußnote,
   sonst muss der Leser suchen, welcher Paragraf zu welchem Betrag passt. */
.tvf-tafel__p{
  display:block; margin-top:2px;
  font:500 11px/1.4 var(--mono); letter-spacing:.06em; color:var(--accent);
}
@media (max-width:520px){ .tvf-tafel{ padding:var(--s5) var(--s5) } }

/* ---- Bildschirmfoto einer App --------------------------
   Hochformat 1206 × 2622 — ohne Deckelung würde eine Reihe davon die
   Seite sprengen. Die Breite regelt das Raster, die Höhe folgt.
   Kein Geräterahmen: Das Bild ist hier Beleg, nicht Produktfoto. */
.tvf-schirm{ margin:0 }
.tvf-schirm img{ box-shadow:0 1px 3px rgba(20,22,26,.10) }
:root[data-theme="dark"] .tvf-schirm img{ box-shadow:none }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tvf-schirm img{ box-shadow:none }
}
/* Auf schmalen Geräten zwei nebeneinander statt vier untereinander —
   vier volle Hochformate hintereinander wären eine Scrollstrecke. */
@media (max-width:820px){
  .tvf-g4:has(.tvf-schirm){ grid-template-columns:repeat(2,1fr) }
}