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

/* Source Sans 3 — trägt alles Gelesene und die gesamte UI */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-3-v19-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-3-v19-latin-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-sans-3-v19-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-v19-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/source-sans-3-v19-latin-800.woff2') format('woff2');
}

/* Titillium — Hausschrift (vom Kunden geliefert, wie auf Plakaten und
   Beachflags). Trägt seit 2026-08-08 Fließtext und UI, dazu weiterhin
   Störer und große Zahlen. Vom Kunden gibt es Schnitte bis Bold (700),
   kein 800/900 — siehe --weight-black in tokens.css. */
@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');
}

@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;
  src: 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-black);
  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);
  }
}