/* ============================================================
   alexandertuerpe.de — Design-CI 2026 (FDP-Miniguide Mai 2026)
   Quelle Farben/Typografie: ../../../2026_miniguide_fdp.pdf,
   CLAUDE.md Abschnitt "Design-Stand 2026 nachziehen"
   ============================================================ */

@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/PublicSans-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/PublicSans-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Verbindliche CI-Farben 2026 — kein Magenta/Violett */
  --blau:   #032D67;
  --gelb:   #FFE000;
  --cyan:   #00A7E7;
  --schwarz: #000000;
  --weiss:  #FFFFFF;

  /* Abgeleitete Töne für Textkontrast (WCAG AA) */
  --blau-dunkel: #021d43;
  --cyan-text:   #00789e; /* dunkler für Fließtext/Links auf Weiß, ~4.6:1 */
  --text:        var(--schwarz);
  --text-soft:   #4a4f57;
  --bg:          var(--weiss);
  --bg-alt:      #f4f5f7;
  --border:      #e2e4e8;

  --font: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Balken — jetzt Sekundärelement (Entscheidung 18.08.2026: Picker führt).
     Lebt als Unterstreichung unter "Leipzig kann." weiter. */
  --balken-dick: 0.32em;

  /* Soft-Card-System — Formsprache aus dem Picker abgeleitet
     (Plakat_Mockup_LeipzigKann.svg: helles Grau, großzügige Radien),
     durchgängig für Karten/Buttons statt der alten Balken-Ära-Optik
     (harte Kanten, farbiger linker Rand). */
  --surface-soft: #f5f5f7;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --focus-ring: 0 0 0 3px rgba(0, 167, 231, 0.45), 0 0 0 1.5px var(--cyan);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* Sprungziele der In-Page-Navigation dürfen nicht unter der Sticky-Nav
   verschwinden. */
section[id] { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  line-height: 1.25; /* 110–130 % laut Miniguide, Basis 1.25 */
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Einheitlicher, markenfarbener Fokus-Ring statt Browser-Default —
   nur bei Tastaturfokus, nicht bei Maus-Klick. */
a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-weight: 800; /* Black/ExtraBold für Headlines */
  letter-spacing: -0.03em; /* Laufweite −30 */
  line-height: 0.95; /* Zeilenabstand 80–100 % */
  text-wrap: balance;
}

a, button {
  touch-action: manipulation; /* kein 300ms-Doppeltipp-Delay */
  -webkit-tap-highlight-color: transparent; /* eigenes Fokus-/Hover-Feedback statt Grau-Flash */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--blau);
  color: var(--weiss);
  padding: 10px 18px;
  font-weight: 700;
  text-decoration: none;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus-visible { top: 0; }

/* ============================================================
   Balken-Komponente
   ============================================================ */

.balken {
  display: block;
  height: var(--balken-dick);
  background: var(--gelb);
  border-radius: 1px;
}
.balken--cyan { background: var(--cyan); }
.balken--blau { background: var(--blau); }

/* Als Unterstreichung: 1/4 Balkenhöhe nach oben in den Text geschoben */
.balken-underline {
  display: inline;
  background-image: linear-gradient(var(--gelb), var(--gelb));
  background-repeat: no-repeat;
  background-size: 100% var(--balken-dick);
  background-position: 0 100%;
  padding-bottom: 0.05em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ============================================================
   Navigation
   ============================================================ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.site-logo {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-bar { width: 5px; height: 22px; background: var(--gelb); border-radius: 1px; flex-shrink: 0; }

.nav-links { display: flex; gap: 32px; list-style: none; }

.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--cyan-text); }

.nav-right { display: flex; align-items: center; gap: 18px; }

.lang-switch { display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; }
.lang-link {
  text-decoration: none;
  color: var(--text-soft);
  padding: 4px 7px;
  border-radius: 4px;
}
.lang-link.is-active { color: var(--blau); background: var(--surface-soft); }
.lang-link:hover { color: var(--blau); }

.nav-cta {
  background: var(--blau);
  color: var(--weiss);
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--blau-dunkel); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px; /* Mindest-Touch-Ziel */
  background: none; border: none; cursor: pointer; padding: 4px;
  border-radius: var(--radius-sm);
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   Wiederverwendbare Sektions-Elemente
   ============================================================ */

.section-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-soft);
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::before { content: ""; width: 24px; height: 3px; background: var(--cyan); flex-shrink: 0; }

.section-title {
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 24px;
  color: var(--text);
}

.btn-primary {
  display: inline-block;
  background: var(--blau);
  color: var(--weiss);
  padding: 16px 32px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--blau-dunkel); }
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--blau);
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  border: 2px solid var(--blau);
  transition: background 0.2s, color 0.2s;
}
.btn-secondary:hover { background: var(--blau); color: var(--weiss); }

/* ============================================================
   Hero mit Picker
   Vorbild: Programm_und_Strategie/Plakat_Mockup_LeipzigKann.svg
   (konkrete Werte für Radius/Grautöne/Blur-Stufen aus dem Mockup
   übernommen — CLAUDE.md, offener Punkt 5 "Picker-Spezifikation")
   ============================================================ */

.section-hero { padding: 90px 0 100px; overflow: hidden; }

.hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 60px; align-items: center; }

.hero-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 18px;
}

/* --- Auswahlrad im iOS-Wecker-Stil -------------------------------------
   Der statische Claim und das Rad stehen in einer Zeile; auf schmalen
   Schirmen darf umbrochen werden, das Rad bleibt dabei als Block zusammen.
   Die Perspektive sitzt auf .picker, die Begriffe werden per rotateX auf
   einem gedachten Zylinder platziert (Radius rechnet das JS aus). */

.hero-claim {
  /* So bemessen, dass "Leipzig kann" plus das breiteste Wort ("WIRTSCHAFT")
     über den gesamten Zweispalten-Bereich (900–1200px und darüber) in eine
     Zeile passen, mit etwas Reserve für abweichende Schriftmetriken.
     Unterhalb von 900px steht die Textspalte allein, dort ist reichlich Platz. */
  /* So bemessen, dass "Leipzig kann" plus die Rad-Spalte über den gesamten
     Zweispalten-Bereich in eine Zeile passen. Die Spalte ist rund 18 % breiter
     als das längste Wort, weil die Perspektive den scharfen Begriff vergrößert
     (siehe hero-picker.js) — das ist in diesen Werten bereits eingerechnet.
     Wer sie erhöht, holt sich den Umbruch zurück. */
  font-size: clamp(22px, 3.3vw, 41px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.28em;
}

.claim-statisch { white-space: nowrap; }

.picker {
  position: relative;
  display: inline-block;
  height: 2.2em;
  padding: 0 0.42em;
  border-radius: 0.26em;
  background: var(--surface-soft);
  overflow: hidden;
  perspective: 700px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  /* Feste Breite, vom JS einmal auf den längsten Begriff gesetzt — bewusst
     ohne Übergang. Eine mitwachsende Breite schnitt sowohl das abgehende Wort
     während der Drehung als auch längere Nachbarn seitlich ab. */
  /* Ränder weich auslaufen lassen, damit die angeschnittenen Nachbarn
     nicht hart abgeschnitten wirken. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
}

/* Auswahlband hinter dem scharfen Begriff, wie die helle Zeile im Wecker. */
.picker::before {
  content: "";
  position: absolute;
  left: 0.16em;
  right: 0.16em;
  top: 50%;
  transform: translateY(-50%);
  height: 1.2em;
  background: var(--weiss);
  border-radius: 0.2em;
  z-index: 0;
}

.picker-wheel {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.picker-item {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.05em;
  margin-top: -0.525em;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
  color: #6e6e73;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.52s cubic-bezier(0.32, 0.72, 0.28, 1),
              opacity 0.52s ease,
              color 0.52s ease;
}

.picker-item.is-aktiv { color: var(--blau); }

.picker:not(.is-enhanced) { min-width: 4.5em; }
.picker:not(.is-enhanced) .picker-item { opacity: 0; }
.picker:not(.is-enhanced) .picker-item:first-child { opacity: 1; color: var(--blau); }

@media (max-width: 900px) {
  .picker { height: 2.1em; }
}

.hero-sub {
  font-size: 21px;
  color: var(--text-soft);
  margin: 20px 0 12px;
  font-weight: 400;
}

.hero-signature {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  margin-bottom: 32px;
}

.hero-cta-row { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-image-wrap {
  aspect-ratio: 4 / 5;
  background: var(--surface-soft);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.hero-image-wrap picture { display: block; width: 100%; height: 100%; }
.hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; }

.hero-image-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #d7dbe2 0%, #aeb6c4 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-soft); font-size: 14px; opacity: 0.8; text-align: center; padding: 24px;
}

.hero-image-tag {
  position: absolute; bottom: 20px; left: 20px;
  background: var(--gelb); color: var(--schwarz);
  padding: 8px 14px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 800; letter-spacing: 0.05em;
}

@media (max-width: 900px) {
  .container { padding: 0 20px; }
  .nav-inner { padding: 14px 20px; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--border);
    flex-direction: column; gap: 0; padding: 8px 0;
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { border-bottom: 1px solid var(--border); }
  .nav-links a { display: block; padding: 14px 20px; }
  .nav-cta { display: none; }
  .nav-right { gap: 10px; }

  .section-hero { padding: 48px 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-sub { font-size: 18px; }
  /* Auch auf schmalen Schirmen im Hochformat bleiben. Der frühere
     3:2-Querformat-Rahmen zeigte von einem Hochformat-Porträt nur knapp die
     Hälfte der Bildhöhe und schnitt dabei den Kopf oben ab. */
  .hero-image-wrap { aspect-ratio: 4 / 5; }
}

/* ============================================================
   Über mich
   ============================================================ */

.section-portrait {
  background: var(--bg-alt);
  padding: 96px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.portrait-text { max-width: 760px; }
.portrait-text p { margin-bottom: 18px; color: var(--text-soft); font-size: 17px; line-height: 1.65; }

/* ============================================================
   Vision
   ============================================================ */

.section-vision { padding: 96px 0; }

.vision-intro {
  max-width: 760px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 48px;
}

.vision-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 40px;
  max-width: 980px;
}

.vision-point h3 {
  font-size: 19px;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  color: var(--blau);
}
.vision-point p { color: var(--text-soft); font-size: 15px; line-height: 1.65; }

.lang-hint { font-size: 12px; color: var(--text-soft); font-weight: 400; }

@media (max-width: 900px) {
  .section-vision { padding: 56px 0; }
  .vision-points { grid-template-columns: 1fr; }
}

/* ============================================================
   Themen
   ============================================================ */

.section-themen { padding: 96px 0; }

.themen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}

@media (max-width: 1100px) {
  .themen-grid { grid-template-columns: repeat(2, 1fr); }
}

.thema-card {
  background: var(--surface-soft);
  padding: 36px 30px;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.thema-card:hover { transform: translateY(-3px); }

.thema-number {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--cyan-text);
  margin-bottom: 14px;
}

.thema-card h3 { font-size: 21px; margin-bottom: 12px; letter-spacing: -0.02em; }

.thema-quote {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--blau);
  margin-bottom: 14px;
  padding-left: 14px;
  border-left: 3px solid var(--gelb);
}

.thema-card p:not(.thema-quote) { color: var(--text-soft); font-size: 15px; line-height: 1.6; }

/* ============================================================
   Fotos
   ============================================================ */

.section-fotos { padding: 80px 0; background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.foto-item {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-soft);
}
.foto-item picture { display: block; width: 100%; height: 100%; }
.foto-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.foto-item:hover img { transform: scale(1.04); }

.social-follow { margin-top: 32px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.social-follow-label { font-size: 15px; font-weight: 700; color: var(--text); }

.social-links { display: flex; gap: 12px; }

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--weiss);
  border: 1px solid var(--border);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.2s, color 0.2s;
}
.social-link:hover { border-color: var(--blau); color: var(--blau); }

.social-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
   Mitmachen
   ============================================================ */

.section-mitmachen { background: var(--blau); color: var(--weiss); padding: 96px 0; }
.section-mitmachen .section-label { color: rgba(255, 255, 255, 0.75); }
.section-mitmachen .section-label::before { background: var(--gelb); }
.section-mitmachen .section-title { color: var(--weiss); }

.mitmachen-lead { font-size: 18px; color: rgba(255, 255, 255, 0.8); max-width: 680px; margin-bottom: 40px; }

.mitmachen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 780px; }

.mitmachen-card { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); padding: 28px; border-radius: var(--radius-lg); }
.mitmachen-card h3 { font-size: 20px; margin-bottom: 10px; color: var(--weiss); }
.mitmachen-card p { color: rgba(255, 255, 255, 0.75); font-size: 14px; margin-bottom: 18px; line-height: 1.6; }

.btn-card {
  display: inline-block;
  background: var(--gelb);
  color: var(--schwarz);
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}
.btn-card:hover { background: #e6cb00; }

/* ============================================================
   Wahl-Countdown — schmales Band ganz oben, über dem Hero
   ============================================================ */

.countdown-band {
  background: var(--blau);
  color: var(--weiss);
  padding: 13px 0;
}

.countdown-band-inner {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 24px;
  text-align: center;
}

.countdown-band-titel {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.72);
}

.countdown-werte {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 18px;
}

/* [hidden] setzt nur display:none, solange nichts anderes gilt — die
   display:flex-Regel darüber würde es sonst aushebeln und die leeren Zahlen
   wären schon vor dem ersten Rechenlauf sichtbar. */
.countdown-werte[hidden],
.countdown-band[hidden] { display: none; }

.countdown-paar {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.countdown-zahl {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--gelb);
  /* Gleich breite Ziffern: sonst zuckt das Band bei jedem Stundenwechsel. */
  font-variant-numeric: tabular-nums;
}

.countdown-einheit {
  font-size: 14px;
  font-weight: 700;
  color: var(--weiss);
}

@media (max-width: 700px) {
  .countdown-band { padding: 11px 0; }
  .countdown-band-inner { gap: 4px 16px; }
  .countdown-band-titel { font-size: 11px; letter-spacing: 0.1em; }
  .countdown-zahl { font-size: 21px; }
  .countdown-werte { gap: 3px 13px; }
}

@media (max-width: 900px) {
  .section-portrait, .section-themen, .section-fotos, .section-mitmachen { padding: 56px 0; }
  .themen-grid { grid-template-columns: 1fr; }
  .mitmachen-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--blau);
  color: rgba(255, 255, 255, 0.75);
  padding: 56px 0 28px;
}

.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }

.site-footer .footer-brand h3 { font-size: 19px; margin-bottom: 12px; text-transform: none; letter-spacing: normal; }
.footer-brand p { font-size: 14px; line-height: 1.6; }

.footer-socials { display: flex; gap: 10px; margin-top: 18px; }
.footer-socials a {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: var(--weiss);
  transition: background 0.2s;
}
.footer-socials a:hover { background: var(--cyan); }
.footer-socials svg { width: 18px; height: 18px; }

.site-footer h3 {
  color: var(--weiss); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 16px; font-weight: 700;
}
.site-footer ul { list-style: none; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer ul a { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 14px; }
.site-footer ul a:hover { color: var(--gelb); }
.site-footer .lang-hint { color: rgba(255, 255, 255, 0.5); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; flex-wrap: wrap; gap: 16px;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   Themen-Karten (Startseite + Übersicht)
   ============================================================ */

.themen-intro {
  max-width: 760px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-soft);
  margin-bottom: 8px;
}

.thema-card { display: flex; flex-direction: column; }

.thema-card-icon {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 16px;
}

.thema-card h2, .thema-card h3 {
  font-size: 21px;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

/* Die ganze Karte klickbar machen, ohne verschachtelte Links: der
   Pseudo-Element-Überzug des Titel-Links deckt die Karte ab. Der
   Fokus-Ring bleibt am Text, wo er hingehört. */
.thema-card-link {
  text-decoration: none;
  color: var(--text);
  transition: color 0.2s;
}
.thema-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.thema-card:hover .thema-card-link { color: var(--blau); }

.thema-auszug {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.thema-mehr {
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--cyan-text);
}
.thema-mehr span {
  display: inline-block;
  transition: transform 0.2s ease;
}
.thema-card:hover .thema-mehr span { transform: translateX(4px); }

.section-themen-uebersicht { padding: 72px 0 96px; }

/* ============================================================
   Foto-Karussell
   ============================================================ */

.karussell {
  position: relative;
  margin-top: 8px;
}

.karussell-track {
  display: flex;
  gap: 16px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Randabstand über Padding statt über den Container, damit die Bilder
     beim Scrollen bis an den Bildschirmrand laufen können. */
  padding: 4px max(20px, calc((100vw - 1200px) / 2 + 32px));
  scrollbar-width: none; /* eigene Bedienung per Pfeil/Punkt */
}
.karussell-track::-webkit-scrollbar { display: none; }

.karussell-item {
  flex: 0 0 auto;
  width: 340px;
  scroll-snap-align: center;
}

@media (max-width: 900px) {
  .karussell-item { width: 78vw; }
}

.karussell .foto-item { aspect-ratio: 4 / 5; }

.karussell-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--blau);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.karussell-arrow:hover { background: var(--weiss); border-color: var(--blau); }
.karussell-arrow svg { width: 22px; height: 22px; }
.karussell-arrow--prev { left: max(12px, calc((100vw - 1200px) / 2)); }
.karussell-arrow--next { right: max(12px, calc((100vw - 1200px) / 2)); }

/* Auf schmalen Schirmen führt Wischen — die Pfeile würden nur die Bilder
   verdecken. Die Punkte bleiben als Orientierung sichtbar. */
@media (max-width: 700px) {
  .karussell-arrow { display: none; }
}

.karussell-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.karussell-dot {
  /* Sichtbarer Punkt 9px, Trefferfläche 24px — genug zum Antippen,
     ohne dass die Punktreihe optisch auseinanderfällt. */
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.karussell-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c7c7cc;
  transition: background 0.2s, transform 0.2s;
}
.karussell-dot:hover::before { background: var(--text-soft); }
.karussell-dot.is-active::before { background: var(--blau); transform: scale(1.25); }

/* ============================================================
   Themen-Detailseite
   ============================================================ */

.thema-header {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding: 48px 0 56px;
}

.thema-zurueck {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-soft);
  text-decoration: none;
  margin-bottom: 28px;
}
.thema-zurueck:hover { color: var(--blau); }

.thema-icon { font-size: 34px; line-height: 1; margin-bottom: 18px; }

.thema-titel {
  font-size: clamp(32px, 5vw, 52px);
  color: var(--text);
  margin-bottom: 20px;
}

.thema-leitsatz {
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--blau);
  max-width: 760px;
  padding-left: 18px;
  border-left: 4px solid var(--gelb);
}

.thema-body {
  max-width: 760px;
  padding: 56px 0 24px;
}
.thema-body p {
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 22px;
}
.thema-body strong { color: var(--text); font-weight: 700; }

/* Zugespitzte Sätze aus Themen_Webseite.md stehen dort als Zitatblöcke. */
.thema-body blockquote {
  margin: 34px 0;
  padding: 22px 26px;
  background: var(--surface-soft);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--gelb);
}
.thema-body blockquote p {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--blau);
}

.thema-weiter {
  border-top: 1px solid var(--border);
  padding: 40px 0 88px;
}
.thema-weiter h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-soft);
  margin-bottom: 20px;
}
.thema-weiter ul { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
.thema-weiter a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-soft);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  transition: background 0.2s, color 0.2s;
}
.thema-weiter a:hover { background: var(--blau); color: var(--weiss); }

/* ============================================================
   Rechtstexte (Impressum, Datenschutz)
   ============================================================ */

.container--schmal { max-width: 780px; }

.rechtstext { padding: 56px 0 88px; }

.rechtstext-titel {
  font-size: clamp(30px, 4.5vw, 44px);
  margin-bottom: 32px;
}

.rechtstext-body h2 {
  font-size: 20px;
  margin: 40px 0 14px;
  letter-spacing: -0.02em;
  color: var(--blau);
}
.rechtstext-body p,
.rechtstext-body li {
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.7;
}
.rechtstext-body p { margin-bottom: 16px; }
.rechtstext-body ul { margin: 0 0 16px 22px; }
.rechtstext-body li { margin-bottom: 8px; }
.rechtstext-body a { color: var(--cyan-text); }
.rechtstext-body strong { color: var(--text); }

/* Entwurfs-Sperre: markiert unausgefüllte Felder unübersehbar, damit die
   Seite nicht versehentlich mit Lücken live geht. Entfällt zusammen mit
   `entwurf: true` im Frontmatter. */
.entwurf-hinweis {
  background: #fff8d6;
  border: 2px solid var(--gelb);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 36px;
}
.entwurf-hinweis p { font-size: 15px; line-height: 1.6; color: var(--text); }

.platzhalter {
  background: var(--gelb);
  color: var(--schwarz);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}

/* ============================================================
   Presse
   ============================================================ */

.section-presse { padding: 72px 0 96px; }

.meldung-liste { list-style: none; margin-top: 40px; }

.meldung-eintrag {
  padding: 28px 0;
  border-top: 1px solid var(--border);
}
.meldung-eintrag:last-child { border-bottom: 1px solid var(--border); }

.meldung-datum {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 10px;
}

.meldung-eintrag h2 { font-size: 23px; letter-spacing: -0.02em; margin-bottom: 10px; }

.meldung-link {
  text-decoration: none;
  color: var(--text);
  transition: color 0.2s;
}
.meldung-link:hover { color: var(--blau); }

.meldung-auszug {
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.6;
}

.meldung-header {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding: 48px 0 52px;
}

.meldung-titel {
  font-size: clamp(30px, 4.5vw, 46px);
  color: var(--text);
  margin-bottom: 18px;
}

.meldung-header .meldung-auszug { font-size: 19px; line-height: 1.55; }

.meldung-body { padding: 48px 0 88px; }
.meldung-body p {
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 22px;
}
.meldung-body strong { color: var(--text); font-weight: 700; }

.meldung-body blockquote {
  margin: 32px 0;
  padding: 20px 26px;
  background: var(--surface-soft);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--gelb);
}
.meldung-body blockquote p {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--blau);
}