/* ==========================================================================
   Bausteine der öffentlichen Seite, übernommen aus Karls Mockup 2.0 (nur, was Kopf, Navigation,
   Fußzeile, Startseiten-Hero und die "kommt bald"-Seiten brauchen).

   - Eigenes CSS ohne UI-Bibliothek (Entscheidung E013).
   - Keine externen Schriften, Skripte oder Bilder: alles kommt vom eigenen Server.
   - Farben und Maße kommen ausschließlich aus tokens.css (Variablen), nie als fester Wert.
   - Klassennamen sind englisch (Projektregel); Karls deutsche Namen stehen als Hinweis daneben.
   ========================================================================== */

/* ---------- Grundlagen ---------- */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  /* Die Fußzeile klebt auch bei kurzen Seiten ("kommt bald") am unteren Fensterrand statt mitten im Bild zu hängen. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

img {
  max-width: 100%;
}

a {
  color: var(--color-orange-text);
}

/* Fokus-Rahmen: Wer mit der Tastatur bedient, sieht immer, wo er ist.
   Bewusst das dunklere Orange statt Karls hellem: Das helle erreicht auf Sand und im
   Hero-Verlauf keine 3 : 1, das dunkle überall mindestens 4,1 : 1 (Frank, E030 A17). */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-orange-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

h1 {
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--color-ink);
}

/* Der Kopf der Seite bekommt den Fokus, wenn man per Sprunglink zum Inhalt springt; ein Rahmen wäre dort Lärm. */
h1:focus {
  outline: none;
}

/* "Zum Inhalt springen": unsichtbar, bis man mit Tab hierher kommt (Karl: .skip) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 18px;
  background: var(--color-white);
  border: 2px solid var(--color-orange);
}

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

/* Gemeinsame Breite (Karl: .bahn) */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Kopfzeile (Karl: .kopf) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--color-header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-neutral-2);
}

.site-header__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Logo und Wortmarke (Karl: .marke) */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand__mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  /* Logo: bleibt in beiden Farbmodi gleich (orange Kreis, weiße Schrift) - Ausnahme von der Kontrastregel, E037 */
  background: var(--color-logo);
  color: var(--color-pure-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.02em;
}

.brand__word {
  font-weight: 800;
  font-size: 21px;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}

.brand__tagline {
  font-size: 11px;
  color: var(--color-neutral-6);
  line-height: 1.25;
  border-left: 1px solid var(--color-neutral-2);
  padding-left: 11px;
}

/* Hauptmenü (Karl: .hauptnav) */
.main-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  flex-wrap: wrap;
}

.main-nav a {
  padding: 8px 12px;
  border-radius: var(--radius-s);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-neutral-7);
  text-decoration: none;
}

.main-nav a:hover {
  background: var(--color-sand);
  color: var(--color-ink);
}

.main-nav a[aria-current="page"] {
  background: var(--color-orange-light);
  color: var(--color-orange-deep);
}

/* "Mitmachen" ist der orangefarbene Knopf am Ende des Menüs */
.main-nav a.main-nav__cta {
  background: var(--color-orange-dark);
  color: var(--color-on-accent);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  margin-left: 8px;
}

.main-nav a.main-nav__cta:hover,
.main-nav a.main-nav__cta[aria-current="page"] {
  background: var(--color-orange-deep);
  color: var(--color-on-accent);
}

/* Menü-Knopf für Telefone (Karl: .navknopf); am Computer unsichtbar */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-neutral-3);
  border-radius: var(--radius-s);
  padding: 9px 12px;
  font: inherit;
  color: var(--color-ink);
  cursor: pointer;
  margin-left: auto;
}

/* Sprachwahl DE/EN (Karl: .sprachwahl) */
.lang-switch {
  display: flex;
  gap: 2px;
  border: 1px solid var(--color-neutral-3);
  border-radius: var(--radius-pill);
  padding: 2px;
  margin-left: 8px;
  flex-shrink: 0;
  background: var(--color-white);
}

.lang-switch a,
.lang-switch span {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-neutral-6);
  line-height: 1.2;
}

.lang-switch span[aria-current] {
  background: var(--color-ink);
  color: var(--color-on-accent);
}

.lang-switch a:hover {
  background: var(--color-neutral-1);
  color: var(--color-ink);
}

/* Umschalter hell/dunkel (E037): runder Knopf neben der Sprachwahl, mindestens 44 px. Die beiden Symbole (Mond, Sonne) liegen
   im HTML; welches zu sehen ist, entscheidet allein das Stylesheet nach dem wirksamen Farbmodus - so stimmt das Symbol
   schon beim ersten Zeichnen und braucht kein Skript. js/theme.js setzt nur das Attribut an <html> und die Beschriftung. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--color-neutral-3);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--color-neutral-1);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle__sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__sun {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__moon {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle__sun {
    display: block;
  }
}

/* "Anmelden" in der Kopfzeile (E043): schlichter Knopf mit Umriss, so hoch wie der Umschalter hell/dunkel (44 px).
   Farben nur über Token, hell und dunkel:
   - Schrift --color-ink auf --color-paper: hell 13,5 : 1, dunkel 14,6 : 1 (Mindestens 4,5 : 1).
   - Umriss --color-neutral-5 auf --color-paper: hell 5,1 : 1, dunkel 9,0 : 1 (mindestens 3 : 1). Der blasse Umriss des
     Umschalters (--color-neutral-3, nur ~1,3 : 1) reicht hier bewusst nicht: Die Vorgabe für Bedienelemente ist 3 : 1.
   - Schwebe-Fläche --color-neutral-1: Schrift darauf hell 12,8 : 1, dunkel 11,6 : 1.
   Die Kopfzeile ist für alle gleich (kein Anmeldestand, kein Cookie); der Knopf ist nur ein Verweis. */
.login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  margin-left: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  border: 1.5px solid var(--color-neutral-5);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.login-link:hover {
  background: var(--color-neutral-1);
}

.login-link[aria-current="page"] {
  background: var(--color-orange-light);
  color: var(--color-orange-deep);
}

/* "Abmelden" (Frank, 27.10.2026): nur für Angemeldete, runder Symbol-Knopf (44 px) neben "Verwaltung". Gleiche Farben wie
   "Anmelden" (Umriss --color-neutral-5: hell 5,1 : 1, dunkel 9,0 : 1; Symbol --color-ink: hell 13,5 : 1, dunkel 14,6 : 1). */
.logout-form {
  margin: 0 0 0 8px;
  flex-shrink: 0;
}

.logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--color-neutral-5);
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}

.logout-button:hover {
  background: var(--color-neutral-1);
}

/* Auf Telefonen und schmalen Fenstern klappt das Menü unter die Kopfzeile.
   Karl nimmt dafür 1000 px. Bei 1024 px passen Logo, sechs Menüpunkte und Sprachwahl aber nicht mehr in eine Zeile
   (der Knopf "Mitmachen" rutschte in eine zweite Zeile), deshalb schon ab 1100 px (Abweichung, E030).
   Mit dem Knopf "Anmelden" in der Kopfzeile (E043) braucht die Kopfzeile etwa 120 px mehr; gemessen (Windows, Segoe UI, deutsche
   Menüpunkte): Logo ohne Spruch + Menü + Sprachwahl + Anmelden + Umschalter brauchen rund 1065 px Inhaltsbreite. Darum:
   - das Menü klappt jetzt schon ab 1180 px zusammen (statt 1100 px), damit auch knapp darüber nichts umbricht;
   - zwischen 1181 und 1399 px entfällt der kleine Spruch neben dem Logo ("Politische Willensbildung ..."), wie schon auf
     Telefonen unter 440 px;
   - ab 1400 px darf die Kopfzeile 140 px breiter sein als der Seiteninhalt, dann passt auch der Spruch wieder hinein.
   Abweichung vom Mockup 2.0, von der KI gewählt, in E043 zur Bestätigung durch Frank vermerkt. */
@media (min-width: 1181px) and (max-width: 1399px) {
  .brand__tagline {
    display: none;
  }
}

@media (min-width: 1400px) {
  .site-header__inner {
    max-width: calc(var(--container-width) + 140px);
  }
}

@media (max-width: 1180px) {
  .site-header__inner {
    padding-top: 12px;
    padding-bottom: 12px;
    flex-wrap: wrap;
  }

  .main-nav {
    display: none;
    width: 100%;
    order: 3;
    padding: 0 0 14px;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav a.main-nav__cta {
    margin: 6px 0 0;
    text-align: center;
  }

  /* "Anmelden": in der Kopfzeile ist hier kein Platz (bei 375 px füllen Logo, Sprachwahl, Umschalter und Menü-Knopf die Zeile).
     Darum bleibt der Verweis zunächst unsichtbar und erscheint als letzte Zeile (volle Breite, "order: 4" hinter dem Menü
     mit "order: 3"), sobald js/menu.js das Menü aufgeklappt hat (Klasse "is-open"). Ohne Skript zeigt no-script.css ihn immer. */
  .login-link {
    display: none;
    order: 4;
    width: 100%;
    margin: 0 0 14px;
  }

  .main-nav.is-open ~ .login-link {
    display: inline-flex;
  }

  /* "Abmelden" wandert mit "Verwaltung" ins aufgeklappte Menü (letzte Zeile, volle Breite). */
  .logout-form {
    display: none;
    order: 5;
    width: 100%;
    margin: 0 0 14px;
  }

  .main-nav.is-open ~ .logout-form {
    display: block;
  }

  .logout-form .logout-button {
    width: 100%;
    border-radius: var(--radius-pill);
  }

  .nav-toggle {
    display: block;
    order: 2;
    margin-left: 8px;
  }

  .lang-switch {
    order: 1;
    margin-left: auto;
  }

  .theme-toggle {
    order: 1;
  }
}

@media (max-width: 440px) {
  .brand__tagline {
    display: none;
  }

  /* Mit dem Umschalter hell/dunkel (E037) wäre die Kopfzeile bei 375 px zu breit und "Menü" rutschte in eine zweite Zeile:
     Abstände enger, damit Logo, Sprachwahl, Umschalter und Menü-Knopf in einer Zeile bleiben. */
  .site-header__inner {
    gap: 8px;
  }

  .theme-toggle,
  .nav-toggle {
    margin-left: 0;
  }
}

/* ---------- Knöpfe (Karl: .knopf) ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  background: var(--color-orange-dark);
  color: var(--color-on-accent);
}

.button:hover {
  background: var(--color-orange-deep);
}

.button--secondary {
  background: var(--color-white);
  color: var(--color-ink);
  border-color: var(--color-neutral-3);
}

.button--secondary:hover {
  background: var(--color-white);
  border-color: var(--color-orange);
  color: var(--color-orange-text);
}

/* Große Knöpfe im Hero (Karl: .lp-knoepfe .knopf) */
.button--large {
  padding: 15px 26px;
  font-size: 17px;
}

.button-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- Bildnachweis (Karl: .lp-credit) ----------
   Der Hero der Startseite und alle übrigen Bausteine kommen jetzt aus blocks.css (Projekt Verein.Blocks). */

.photo-credit {
  font-size: 11.5px;
  color: var(--color-neutral-5);
  margin-top: 8px;
}

.photo-credit a {
  color: var(--color-neutral-5);
}

/* ---------- "Kommt bald"-Seiten (Karl: .seiten-hero, .karte) ---------- */

.page-hero {
  padding: clamp(24px, 4vw, 48px) 0 clamp(48px, 7vw, 88px);
  background: radial-gradient(900px 520px at 85% 0%, var(--color-hero-glow-1) 0%, transparent 70%), var(--color-paper);
}

.page-hero h1 {
  font-size: clamp(32px, 4.6vw, 54px);
}

.card {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-2);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 560px;
}

.card--accent {
  border-left: 3px solid var(--color-orange);
}

.card p {
  color: var(--color-neutral-7);
  font-size: 17px;
  margin-bottom: 18px;
}

/* ---------- Fußzeile (Karl: .fuss) ---------- */

.site-footer {
  background: var(--color-sand);
  color: var(--color-neutral-6);
  padding: 44px 0 30px;
  font-size: 14px;
  border-top: 4px solid var(--color-orange);
}

.site-footer__columns {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
}

.site-footer h2 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 9px;
}

.site-footer ul {
  list-style: none;
  display: grid;
  gap: 6px;
}

.site-footer a {
  color: var(--color-neutral-8);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-orange-text);
  text-decoration: underline;
}

.site-footer__note {
  margin-top: 30px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-neutral-5);
}

/* "Cookie-Einstellungen": sieht aus wie die Verweise der Fußzeile, ist aber ein Knopf (öffnet den Banner, navigiert nirgends hin). */
.site-footer__consent {
  margin-top: 6px;
}

.site-footer__link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-neutral-8);
  text-decoration: underline;
  cursor: pointer;
}

.site-footer__link-button:hover {
  color: var(--color-orange-text);
}

/* ---------- Cookie-Banner der Besucherstatistik (E046) ----------
   Liegt unten am Bildschirm über dem Inhalt. Beide Knöpfe sind gleich groß und gleich gestaltet (Ablehnen so leicht wie Akzeptieren).
   Farben nur über Token. Kontraste (aus den echten Werten in tokens.css gerechnet):
   hell:   Text --color-ink #1d2b33 auf --color-white #ffffff 14,53 : 1; Knopfschrift --color-on-accent #ffffff auf --color-orange-dark #b84e09 5,08 : 1;
           Knopf gegen den Banner-Grund 5,08 : 1; Verweis --color-orange-text #b34b09 auf #ffffff 5,35 : 1; Rand --color-control-border #848f97 auf #ffffff 3,30 : 1.
   dunkel: Text --color-ink #f3ede3 auf --color-white #1f2a31 12,58 : 1; Knopfschrift --color-on-accent #161d22 auf --color-orange-dark #f08a3c 6,82 : 1;
           Knopf gegen den Banner-Grund 5,86 : 1; Verweis --color-orange-text #f4a066 auf #1f2a31 7,02 : 1; Rand #7f909b auf #1f2a31 4,44 : 1. */
.consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 20px;
  background: var(--color-white);
  color: var(--color-ink);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-banner);
}

/* "hidden" muss gewinnen, auch wenn oben ein anderes display gesetzt würde. */
.consent-banner[hidden] {
  display: none;
}

.consent-banner:focus-visible {
  outline: 3px solid var(--color-orange-dark);
  outline-offset: 2px;
}

.consent-banner__title {
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--color-ink);
}

.consent-banner__text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
}

.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Gleiche Größe für beide: je die halbe Breite, mindestens eine gut treffbare Fläche. */
.consent-banner__button {
  flex: 1 1 160px;
  min-height: 44px;
}

/* Versionsnummer: bewusst klein und leise, nur für den, der nachsieht (Frank, 27.10.2026).
   Kontrast neutral-5 auf sand: hell 4,69 : 1, dunkel 9,55 : 1 (WCAG AA). */
.site-footer__version {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-neutral-5);
}

/* ---------- Hinweis "Übersetzung ungeprüft" und Knopf "Bearbeiten" (Inhaltsseiten) ---------- */

/* Kontrast: Tinte auf Orange-hell ist deutlich über 4,5 : 1 (Tinte #1d2b33 auf #fdebdd). */
.translation-notice {
  background: var(--color-orange-light);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-orange-mid);
  padding: 10px 20px;
  text-align: center;
  font-size: 14px;
}

/* Schwebender Knopf unten rechts, nur für Angemeldete mit Recht (kein Skript). Weißer Text auf Orange-dunkel: 5,08 : 1. */
.edit-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-orange-dark);
  color: var(--color-on-accent);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: var(--shadow-badge);
}

.edit-button:hover {
  background: var(--color-orange-deep);
}

/* ---------- Bewegung zurücknehmen, wenn das Gerät es wünscht ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Druck ---------- */

@media print {
  .site-header,
  .nav-toggle,
  .button {
    display: none !important;
  }
}