/* ============================================================
   TVF 1912 — Grundlagen
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:var(--t-body)/1.65 var(--font);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  transition:background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

h1,h2,h3,h4,p,figure,blockquote,ul,ol{ margin:0; padding:0 }
ul,ol{ list-style:none }
img,svg,video{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }

/* Fokus — überall gleich, 4.89:1 hell / 12.29:1 dunkel */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:var(--r);
}

/* Sprungmarke für Tastatur und Screenreader */
.tvf-skip{
  position:absolute; left:var(--s4); top:-100px; z-index:999;
  background:var(--action); color:var(--on-action);
  padding:14px 20px; border-radius:var(--r); font-weight:600;
  transition:top var(--d-fast) var(--ease);
}
.tvf-skip:focus{ top:var(--s4) }

.tvf-sr{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* WCAG 2.3.3 — Bewegung vollständig abschaltbar */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .tvf-rv{ opacity:1!important; transform:none!important }
}

/* ---- Layout ------------------------------------------- */
.tvf-wrap{ max-width:var(--breit); margin-inline:auto; padding-inline:var(--pad) }
.tvf-sec{ padding-block:var(--sec) }
.tvf-lese{ max-width:var(--lese) }

/* ---- Typografie --------------------------------------- */
.tvf-d1{ font:600 var(--t-d1)/.9 var(--font);   letter-spacing:-.045em }
.tvf-d2{ font:600 var(--t-d2)/1.02 var(--font); letter-spacing:-.035em }
.tvf-h1{ font:600 var(--t-h1)/1.1 var(--font);  letter-spacing:-.03em }
.tvf-h2{ font:600 var(--t-h2)/1.12 var(--font); letter-spacing:-.025em }
.tvf-h3{ font:600 var(--t-h3)/1.35 var(--font); letter-spacing:-.01em }
.tvf-lead{ font-size:var(--t-lead); line-height:1.55; color:var(--fg-muted); max-width:56ch }
.tvf-body{ color:var(--fg-muted); max-width:var(--lese) }

.tvf-eyebrow{
  font:500 11px/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase; color:var(--fg-muted);
}

/* Enthüllung beim Scrollen — Sicherheitsnetz in app.js */
.tvf-rv{
  opacity:0; transform:translateY(22px);
  transition:opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
}
.tvf-rv.is-in{ opacity:1; transform:none }