/*
 * Basis — Reset, @font-face, Typografie-Grundlagen.
 * Schriften lokal (DSGVO, Performance), kein Google-Fonts-CDN.
 */

/* Titillium Web — Hausschrift, wie auf Plakaten und Beachflags. Trägt seit
   2026-08-09 Fließtext, UI, Überschriften, Störer und große Zahlen allein;
   Source Sans 3 ist an diesem Tag komplett entfallen.
   Quelle: offizielles Google-Fonts-Paket, Version 1.002 — NICHT das
   SIL-Original „Titillium" (anderes Schriftprojekt, abweichende Metriken).
   Geladen sind 200/300/400/600/700 plus Regular-Kursiv.
   700 ist das Maximum: Einen 800er Schnitt gibt es nicht, und der vorhandene
   Black (900) wurde am 2026-08-09 geprüft und verworfen — sein
   Strichstärkenkontrast fällt so weit aus der Familie, dass er wie eine fremde
   Schrift wirkt. Es gibt damit keine Stufe über --weight-bold; der frühere
   Token --weight-black ist entfallen. Siehe guidelines/type-weights.card.html
   im Design-System. */
@font-face {
  font-family: 'Titillium';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../fonts/titillium-web-v19-latin-200.woff2') format('woff2');
}

/* Regular 400 trägt den Fließtext. Ohne diesen Schnitt würde der Browser ihn
   aus 300 oder 600 hochrechnen — die Datei lag da, war aber nie deklariert. */
@font-face {
  font-family: 'Titillium';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/titillium-web-400.woff2') format('woff2');
}

/* Regular-Kursiv trägt die Blockquotes in .entry-content. Zuvor kam sie von
   Source Sans 3; ohne eigenen Schnitt würde der Browser Titillium nur künstlich
   schrägstellen. Seit v2.27.0 als WOFF2 (65 KB TTF -> 23 KB); die TTF bleibt
   als Rückfall für Browser ohne WOFF2-Unterstützung stehen. */
@font-face {
  font-family: 'Titillium';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/titillium-web-italic.woff2') format('woff2'),
       url('../fonts/titillium-web-italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Titillium';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/titillium-web-v19-latin-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Titillium';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/titillium-web-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Titillium';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/titillium-web-v19-latin-700.woff2') format('woff2');
}

/* Edo SZ — Pinselschrift der Plakate: Slogans, Sektionstitel, Themen-Titel.
   30–64px, nie unter 24px, nie für Fließtext, nie Versalien erzwingen. */
@font-face {
  font-family: 'Edo SZ';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* WOFF2 seit v2.27.0: 49 KB TTF -> 17 KB, verlustfrei (gleiche Konturen,
     Metriken und cmap — nachgerechnet, 0 von 245 Glyphen weichen ab). Der
     Server liefert TTF unkomprimiert aus, deshalb schlug die Datei voll durch:
     Edo SZ steckt in jedem Sektionstitel und lud auf jeder Seite. TTF bleibt
     als Rückfall stehen. */
  src: url('../fonts/edosz.woff2') format('woff2'),
       url('../fonts/edosz.ttf') format('truetype');
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Das `hidden`-Attribut muss immer gewinnen.
   Browser setzen dafür nur `display: none` im UA-Stylesheet — jede eigene
   Regel mit `display: flex`/`grid` schlägt das und das Element bleibt trotz
   `hidden` sichtbar. Genau daran ist der Galerie-Filter gescheitert
   (`.plakat-karte { display: flex }`) und die Einwilligung im Melde-Dialog
   (`.einwilligung { display: flex }`) — beide ohne Fehlermeldung, weil das
   Attribut ja korrekt gesetzt war. `!important` ist hier die richtige
   Ausnahme: `hidden` ist eine Aussage über Relevanz, nicht über Layout. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  /* Die Kopfzeile klebt oben (siehe components.css) und würde Anker-Ziele
     (#kandidaten, #Mitglied, #Spenden, #Unterstuetzen) sonst verdecken.
     Wert = fluide Logo-Höhe + Innenabstand der Kopfzeile (2×18px) + Luft. */
  scroll-padding-top: calc(clamp(36px, min(19px + 4.4vw, 9vh), var(--logo-hoehe-max, 77px)) + 44px);
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body-color);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

/* Spezifitäts-Härtung gegen das Elementor-Kit (analog zur Linkfarben-Härtung
   in components.css): `.elementor-kit-<ID>` steht als Klasse am <body> und
   setzt dort font-family "Titillium Web", font-weight 600 und eine eigene
   Textfarbe. Als Klassen-Selektor (0-1-0) schlägt das `body` (0-0-1), womit
   der komplette Fließtext samt Navigation in der falschen Schrift landet.
   `body[class]` (0-1-1) gewinnt, ohne die wechselnde Kit-ID zu kennen, und
   bleibt korrekt, falls Elementor später deaktiviert wird. */
body[class] {
  font-family: var(--font-ui);
  font-weight: var(--weight-regular);
  color: var(--text-body-color);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--link-default);
  text-decoration: none;
  transition: color var(--transition-schnell);
}

a:hover {
  color: var(--link-hover);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-headline);
  color: var(--text-headline);
}

h4 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-title);
  letter-spacing: normal;
}

/* Edo SZ ist der Auszeichnungsfont — für Hero-Slogans, Sektionstitel und
   Themen-Titel. Immer Gewicht 400, nie Uppercase, nie unter 24px. */
.headline-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: var(--leading-display);
}

.wrap {
  max-width: var(--seite-max);
  margin: 0 auto;
  padding: 0 var(--gutter-seite);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--abae-blau);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 782px) {
  .wrap {
    padding: 0 var(--gutter-seite-mobil);
  }
}