/* ---------------------------------------------------------------------------
 * Schriften liegen lokal (HANDOFF §6 Punkt 11). Vorher kamen sie von
 * fonts.googleapis.com und fonts.gstatic.com - dabei ging bei jedem Aufruf
 * die IP-Adresse des Besuchers an Google, ungefragt und auf allen 28 Seiten.
 *
 * Es sind variable Schriften: eine Datei je Familie und Subset deckt den
 * ganzen Bereich 400-700 ab, deshalb "font-weight: 400 700" statt vier
 * getrennter Schnitte. Newsreader bringt zusaetzlich die opsz-Achse mit; die
 * bedient der Browser von selbst ueber font-optical-sizing (Standard: auto),
 * genau wie zuvor bei Google.
 *
 * Kursiv wird bewusst NICHT mitgeliefert. Die Google-Einbindung hatte es auch
 * nicht - der Browser neigt die Buchstaben selbst. Echte Kursivschnitte wuerden
 * das Schriftbild veraendern, und die Schriften sind laut §7 entschieden.
 *
 * Das latin-ext-Subset kostet nichts, solange kein Zeichen daraus vorkommt:
 * ueber unicode-range laedt der Browser die Datei nur bei Bedarf.
 * Aktualisieren: Datei-URLs stammen aus der Google-CSS, siehe HANDOFF §6/11.
 * --------------------------------------------------------------------------- */
@font-face{
  font-family:'Karla'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonts/karla-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Karla'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonts/newsreader-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{ color-scheme: light; }
body{ font-family:'Karla',system-ui,sans-serif; background:#FBF9F4; color:#16211E; }
.font-display{ font-family:'Newsreader',Georgia,serif; }
::selection{ background:#D3B269; color:#fff; }
header.scrolled{ background:rgba(251,249,244,.92); backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(0,42,70,.08); }
header.scrolled .nav-link{ color:#16211E; }
header.scrolled #burger{ color:#16211E; }
#mobileMenu{ background:#002A46; }
header.scrolled .brand-invert{ display:none; }
header.scrolled .brand-normal{ display:block; }
.brand-normal{ display:none; }
.nav-link.active{ color:#D3B269; }
.hero-grain:after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px); background-size:4px 4px; mix-blend-mode:overlay;
}
.link-underline{ background-image:linear-gradient(currentColor,currentColor); background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .3s; }
.link-underline:hover{ background-size:100% 1px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* ---------------------------------------------------------------------------
 * Teilnehmerstimmen: Karte zeigt den Anriss, der Volltext steht im Dialog.
 *
 * Warum ein Dialog und kein Aufklappen an Ort und Stelle: im Raster wuerde
 * eine wachsende Karte alle folgenden verschieben - der Leser verliert die
 * Stelle, und der Sprung geht als Layout-Shift in die Core Web Vitals. Das
 * native <dialog> bringt Fokusfalle, Escape und Hintergrund selbst mit, ohne
 * eine Zeile Fremdcode (§6 Punkt 11).
 * --------------------------------------------------------------------------- */
.erf-chip{
  border:1px solid rgba(0,81,136,.15); border-radius:9999px;
  padding:.45rem 1rem; font-size:.8125rem; font-weight:600;
  color:#5C6B65; background:#fff;
  transition:background-color .2s, color .2s, border-color .2s;
}
.erf-chip:hover{ border-color:#D3B269; color:#16211E; }
.erf-chip[aria-pressed="true"]{ background:#005188; border-color:#005188; color:#fff; }

/* Eigene Klasse statt des hidden-Attributs: die Karten tragen "flex", und
 * .flex wuerde das display:none aus Tailwinds Preflight ueberschreiben. */
.erf-aus{ display:none !important; }

.erf-dialog{ border:0; box-shadow:0 24px 60px -24px rgba(0,42,70,.45); }
.erf-dialog::backdrop{ background:rgba(0,42,70,.72); }
.erf-dialog[open]{ animation:erf-auf .22s ease-out; }
@keyframes erf-auf{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .erf-dialog[open]{ animation:none; } }
body.erf-offen{ overflow:hidden; }