/* ==========================================================================
   Tax Law Clinic Hannover -- Gestaltung
   Farben aus dem Vereinslogo: Navy #00354D, Limette #A2B21C.
   Aufbau: 1 Tokens, 2 Grundlagen, 3 Bausteine, 4 Seitenbereiche, 5 Formulare,
   6 Hilfsklassen, 7 Druck.
   ========================================================================== */

/* -- 1 Tokens ------------------------------------------------------------ */

:root {
  --navy: #00354d;
  --navy-hell: #0d4a66;
  --navy-dunkel: #002536;
  --limette: #a2b21c;
  --limette-dunkel: #7f8c16;
  --limette-hell: #eef2d4;

  --grund: #ffffff;
  --flaeche: #f4f6f3;
  --flaeche-rand: #e3e8e0;
  --text: #1b2b33;
  --grau: #6b7a82;
  --grau-hell: #9aa5ab;

  --warnung: #b3261e;
  --erfolg: #2e7d32;

  --breite: 1140px;
  --breite-schmal: 760px;

  --abstand-1: 0.5rem;
  --abstand-2: 1rem;
  --abstand-3: 1.5rem;
  --abstand-4: 2.5rem;
  --abstand-5: 4rem;
  --abstand-6: 6rem;

  --radius: 4px;
  --radius-gross: 8px;

  --schatten: 0 1px 3px rgba(0, 53, 77, 0.08);
  --schatten-hoch: 0 4px 16px rgba(0, 53, 77, 0.12);

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

html {
  scroll-behavior: smooth;
  /* Sprungmarken sollen nicht unter der Kopfzeile verschwinden */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 var(--abstand-2);
  font-weight: 600;
}

h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -0.015em;
}
h2 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
}
h3 {
  font-size: 1.3125rem;
}
h4 {
  font-size: 1.0625rem;
}

p {
  margin: 0 0 var(--abstand-2);
}

a {
  color: var(--navy);
  text-decoration-color: var(--limette);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
  color: var(--limette-dunkel);
}

/* Sichtbarer Fokus für Tastaturbedienung -- nie entfernen */
:focus-visible {
  outline: 3px solid var(--limette);
  outline-offset: 2px;
  border-radius: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

hr {
  border: none;
  border-top: 1px solid var(--flaeche-rand);
  margin: var(--abstand-4) 0;
}

/* -- 3 Bausteine --------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--abstand-3);
}

.container--schmal {
  max-width: var(--breite-schmal);
}

.abschnitt {
  padding: var(--abstand-5) 0;
}

.abschnitt--flaeche {
  background: var(--flaeche);
}

.abschnitt--navy {
  background: var(--navy);
  color: #fff;
}

.abschnitt--navy h2,
.abschnitt--navy h3 {
  color: #fff;
}

.abschnitt--eng {
  padding: var(--abstand-4) 0;
}

/* Ueberschrift mit Hakenstrich darunter -- greift das Logo auf */
.ueberschrift-marke::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  background: var(--limette);
  margin-top: var(--abstand-2);
  border-radius: 2px;
}

.vorspann {
  font-size: 1.1875rem;
  color: var(--grau);
  max-width: 62ch;
}

/* Schaltflaechen */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.knopf--primaer {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.knopf--primaer:hover,
.knopf--primaer:focus-visible {
  background: var(--navy-hell);
  border-color: var(--navy-hell);
  color: #fff;
}

/* Limette traegt auf Weiss zu wenig Kontrast für Text; deshalb dunkler Text */
.knopf--akzent {
  background: var(--limette);
  border-color: var(--limette);
  color: var(--navy-dunkel);
}

.knopf--akzent:hover,
.knopf--akzent:focus-visible {
  background: var(--limette-dunkel);
  border-color: var(--limette-dunkel);
  color: #fff;
}

.knopf--rahmen {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}

.knopf--rahmen:hover,
.knopf--rahmen:focus-visible {
  background: var(--navy);
  color: #fff;
}

/* Auf dunklem Grund muss der Rahmenknopf hell sein -- sonst steht Navy auf
   Navy und der Knopf ist unsichtbar. Gilt fuer beide dunklen Baender. */
.abschnitt--navy .knopf--rahmen,
.aufruf .knopf--rahmen,
.fuss .knopf--rahmen {
  border-color: #fff;
  color: #fff;
}

.abschnitt--navy .knopf--rahmen:hover,
.abschnitt--navy .knopf--rahmen:focus-visible,
.aufruf .knopf--rahmen:hover,
.aufruf .knopf--rahmen:focus-visible,
.fuss .knopf--rahmen:hover,
.fuss .knopf--rahmen:focus-visible {
  background: #fff;
  color: var(--navy);
}

/* Raster */
.raster {
  display: grid;
  gap: var(--abstand-3);
}

.raster--2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.raster--3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.raster--4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Karte */
.karte {
  background: var(--grund);
  border: 1px solid var(--flaeche-rand);
  border-radius: var(--radius-gross);
  padding: var(--abstand-3);
  display: flex;
  flex-direction: column;
}

.karte--verlinkt {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.karte--verlinkt:hover {
  box-shadow: var(--schatten-hoch);
  transform: translateY(-2px);
}

.karte__titel {
  margin-bottom: var(--abstand-1);
}

.karte__meta {
  font-size: 0.875rem;
  color: var(--grau);
  margin-bottom: var(--abstand-1);
}

.karte__text {
  color: var(--text);
  flex: 1;
}

.karte__fuss {
  margin-top: var(--abstand-2);
  padding-top: var(--abstand-2);
  border-top: 1px solid var(--flaeche-rand);
}

/* Hakenliste -- Motiv aus dem Logo */
.hakenliste {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--abstand-2);
}

.hakenliste li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--abstand-1);
}

.hakenliste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 1rem;
  height: 0.55rem;
  border-left: 3px solid var(--limette);
  border-bottom: 3px solid var(--limette);
  transform: rotate(-45deg);
}

/* Nummerierte Ablaufschritte */
.schritte {
  list-style: none;
  counter-reset: schritt;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--abstand-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.schritte li {
  counter-increment: schritt;
  position: relative;
  padding-top: var(--abstand-4);
}

.schritte li::before {
  content: counter(schritt);
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  background: var(--limette);
  color: var(--navy-dunkel);
  /* Serifenlose Ziffern: die Ausweichschrift Georgia setzt Mediävalziffern,
     bei denen 3 und 4 unter die Grundlinie reichen und im Kreis absacken. */
  font-family: var(--sans);
  font-variant-numeric: lining-nums;
  line-height: 1;
  font-weight: 700;
  border-radius: 50%;
}

/* Zeitstrahl fuer die Vereinsgeschichte */
.zeitstrahl {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--flaeche-rand);
}

.zeitstrahl li {
  /* Djangos Admin-CSS setzt list-style auf dem li -- hier zur Sicherheit auch */
  list-style: none;
  position: relative;
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 0 var(--abstand-2);
  padding: 0 0 var(--abstand-3) var(--abstand-3);
}

.zeitstrahl li:last-child {
  padding-bottom: 0;
}

/* Punkt sitzt mittig auf der Linie -- Limette nur als Flaeche, nie als Text */
.zeitstrahl li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0.35rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--limette);
}

.zeitstrahl__jahr {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--navy);
}

.zeitstrahl__text {
  margin: 0;
}

/* Hinweiskasten */
.hinweis {
  border-left: 4px solid var(--limette);
  background: var(--flaeche);
  padding: var(--abstand-2) var(--abstand-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 var(--abstand-3);
}

.hinweis--warnung {
  border-left-color: var(--warnung);
  background: #fdf2f1;
}

.hinweis p:last-child {
  margin-bottom: 0;
}

.hinweis__titel {
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--abstand-1);
}

/* Meldungen */
.meldung {
  padding: var(--abstand-2) var(--abstand-3);
  border-radius: var(--radius);
  margin-bottom: var(--abstand-3);
  border-left: 4px solid;
}

.meldung--error {
  background: #fdf2f1;
  border-left-color: var(--warnung);
  color: #7a1a15;
}

.meldung--success {
  background: #f1f8f1;
  border-left-color: var(--erfolg);
  color: #1b5e20;
}

.meldung--info,
.meldung--warning {
  background: var(--flaeche);
  border-left-color: var(--navy);
}

/* -- 4 Seitenbereiche ---------------------------------------------------- */

/* Sprunglink für Tastatur- und Screenreader-Nutzung */
.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: var(--abstand-2) var(--abstand-3);
  z-index: 200;
}

.sprunglink:focus {
  left: 0;
  color: #fff;
}

.hinweisband {
  background: var(--limette-hell);
  color: var(--navy-dunkel);
  padding: 0.625rem 0;
  font-size: 0.9375rem;
  text-align: center;
}

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--flaeche-rand);
}

.kopf__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  padding: var(--abstand-2) 0;
}

.kopf__logo img {
  height: 46px;
  width: auto;
  display: block;
}

.kopf__logo {
  text-decoration: none;
  flex-shrink: 0;
}

.navigation {
  display: flex;
  align-items: center;
  gap: var(--abstand-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation__punkt {
  position: relative;
}

.navigation__link {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-radius: var(--radius);
  border-bottom: 3px solid transparent;
}

.navigation__link:hover,
.navigation__punkt:focus-within .navigation__link {
  background: var(--flaeche);
  color: var(--navy);
}

.navigation__link[aria-current="page"],
.navigation__punkt--aktiv > .navigation__link {
  border-bottom-color: var(--limette);
}

.untermenue {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--flaeche-rand);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hoch);
  padding: var(--abstand-1);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}

.navigation__punkt:hover .untermenue,
.navigation__punkt:focus-within .untermenue {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.untermenue a {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius);
}

.untermenue a:hover,
.untermenue a:focus-visible {
  background: var(--flaeche);
  color: var(--navy);
}

/* Menueschalter für schmale Bildschirme */
.menue-schalter {
  display: none;
  background: none;
  border: 2px solid var(--flaeche-rand);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 1rem;
  color: var(--navy);
  font-family: var(--sans);
  font-weight: 600;
}

/* Hero */
.hero {
  padding: var(--abstand-6) 0 var(--abstand-5);
  background: linear-gradient(180deg, var(--flaeche) 0%, var(--grund) 100%);
}

.hero__inhalt {
  max-width: 52rem;
}

.hero__ueberschrift {
  margin-bottom: var(--abstand-1);
}

.hero__unterzeile {
  font-family: var(--sans);
  font-size: 1.125rem;
  color: var(--grau);
  margin-bottom: var(--abstand-3);
}

.hero__text {
  font-size: 1.25rem;
  color: var(--grau);
  margin-bottom: var(--abstand-4);
  /* schmaler als das Hero-Band: hält die Zeilenlänge im Fließtext lesbar */
  max-width: 44rem;
}

.hero__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
}

/* Zahlenband */
.kennzahlen {
  display: grid;
  gap: var(--abstand-4);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  text-align: center;
}

.kennzahl__wert {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  display: block;
}

.kennzahl__bezeichnung {
  display: block;
  margin-top: var(--abstand-1);
  font-weight: 600;
}

.kennzahl__zusatz {
  display: block;
  font-size: 0.875rem;
  color: var(--grau);
}

/* Zitat */
.zitat {
  border: none;
  margin: 0;
  padding: 0;
}

.zitat__text {
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--navy);
  margin-bottom: var(--abstand-2);
}

.zitat__text::before {
  content: "\201E";
}

.zitat__text::after {
  content: "\201C";
}

.zitat__urheber {
  font-weight: 700;
  font-style: normal;
}

.zitat__funktion {
  color: var(--grau);
  font-size: 0.9375rem;
}

/* Partnerlogos */
.partnerband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-4);
}

.partnerband img {
  max-height: 56px;
  width: auto;
  /* Einheitlicher Auftritt trotz unterschiedlicher Logofarben */
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.partnerband a:hover img,
.partnerband a:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
}

/* Personen */
.person {
  text-align: center;
}

.person__foto,
.person__platzhalter {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--abstand-2);
  display: block;
  background: var(--flaeche);
}

.person__platzhalter {
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--grau-hell);
  border: 2px solid var(--flaeche-rand);
}

.person__name {
  margin-bottom: 0.25rem;
}

.person__funktion {
  color: var(--grau);
  font-size: 0.9375rem;
  margin-bottom: var(--abstand-1);
}

/* Aufklappbare Frage */
.frage {
  border-bottom: 1px solid var(--flaeche-rand);
}

.frage summary {
  cursor: pointer;
  padding: var(--abstand-2) 0;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-2);
}

.frage summary::-webkit-details-marker {
  display: none;
}

.frage summary::after {
  content: "+";
  color: var(--limette-dunkel);
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.frage[open] summary::after {
  content: "\2212";
}

.frage__antwort {
  padding: 0 0 var(--abstand-2);
  color: var(--text);
}

/* Fussbereich */
.fuss {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  padding: var(--abstand-5) 0 var(--abstand-3);
  margin-top: var(--abstand-6);
}

/* Folgt der Fussbereich direkt auf das dunkle Spendenband, wuerde der
   Aussenabstand als weisser Streifen zwischen zwei dunklen Flaechen stehen.
   Stattdessen gehen beide ineinander ueber, getrennt durch eine feine Linie. */
.aufruf + .fuss {
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.fuss a {
  color: #fff;
  text-decoration-color: var(--limette);
}

.fuss a:hover {
  color: var(--limette);
}

.fuss__raster {
  display: grid;
  gap: var(--abstand-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: var(--abstand-4);
}

.fuss__titel {
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--abstand-2);
}

.fuss__liste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fuss__liste li {
  margin-bottom: 0.5rem;
}

.fuss__unten {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--abstand-3);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--abstand-2);
  font-size: 0.875rem;
}

/* Aufruf zum Spenden */
.aufruf {
  background: var(--navy);
  color: #fff;
  padding: var(--abstand-5) 0;
  text-align: center;
}

.aufruf h2 {
  color: #fff;
}

.aufruf p {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.85);
}

/* Baustellenseite vor der Veroeffentlichung.
   Eigenstaendige Seite ohne Kopf und Fuss -- deshalb hier die wenigen
   eigenen Regeln statt der ueblichen Bausteine. */
.baustelle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--abstand-3);
  background: var(--navy);
}

.baustelle__karte {
  max-width: 32rem;
  text-align: center;
}

.baustelle__logo {
  width: 180px;
  max-width: 60%;
  height: auto;
  margin-bottom: var(--abstand-4);
}

.baustelle__titel {
  color: var(--grund);
  margin-bottom: var(--abstand-2);
}

.baustelle__text {
  color: var(--grund);
  opacity: 0.85;
  font-size: 1.125rem;
  margin: 0;
}

/* Rechtslinks auf Navy: hell, sonst stehen sie Navy auf Navy */
.baustelle__rechtliches {
  display: flex;
  justify-content: center;
  gap: var(--abstand-3);
  margin: var(--abstand-4) 0 0;
  font-size: 0.9375rem;
}

.baustelle__rechtliches a {
  color: var(--grund);
  opacity: 0.85;
}

.baustelle__rechtliches a:hover,
.baustelle__rechtliches a:focus-visible {
  opacity: 1;
}


/* -- 5 Formulare --------------------------------------------------------- */

.formularkarte {
  background: var(--grund);
  border: 1px solid var(--flaeche-rand);
  border-radius: var(--radius-gross);
  padding: var(--abstand-4);
  box-shadow: var(--schatten);
}

.fld-reihe {
  margin-bottom: var(--abstand-3);
}

.fld-raster {
  display: grid;
  gap: var(--abstand-2);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.fld-raster--plz {
  grid-template-columns: 8rem 1fr;
}

.fld-label {
  display: block;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.375rem;
  font-size: 0.9375rem;
}

.fld-pflicht {
  color: var(--warnung);
  margin-left: 0.125rem;
}

.fld-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 2px solid var(--flaeche-rand);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fld-input:hover {
  border-color: var(--grau-hell);
}

.fld-input:focus {
  outline: none;
  border-color: var(--limette);
  box-shadow: 0 0 0 3px var(--limette-hell);
}

.fld-textarea {
  resize: vertical;
  min-height: 7rem;
}

.fld-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300354d' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.25rem;
}

/* Ankreuzfeld mit Beschriftung daneben */
.fld-reihe--check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.fld-check {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2rem 0 0;
  flex-shrink: 0;
  accent-color: var(--limette-dunkel);
}

.fld-reihe--check .fld-label {
  margin-bottom: 0;
  font-weight: 400;
  color: var(--text);
}

.fld-hilfe {
  display: block;
  font-size: 0.875rem;
  color: var(--grau);
  margin-top: 0.375rem;
}

.fld-fehler {
  display: block;
  font-size: 0.875rem;
  color: var(--warnung);
  margin-top: 0.375rem;
  font-weight: 600;
}

.fld-reihe--fehlerhaft .fld-input {
  border-color: var(--warnung);
}

.fld-gruppe {
  border: none;
  padding: 0;
  margin: 0 0 var(--abstand-4);
}

.fld-gruppe__titel {
  font-family: var(--serif);
  font-size: 1.1875rem;
  color: var(--navy);
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--abstand-2);
  border-bottom: 2px solid var(--limette);
  padding-bottom: 0.375rem;
  width: 100%;
}

/* Köderfeld gegen automatisierte Einsendungen. Nicht display:none --
   manche Bots ueberspringen ausgeblendete Felder gezielt. */
.koeder {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

.formular__fuss {
  border-top: 1px solid var(--flaeche-rand);
  padding-top: var(--abstand-3);
  margin-top: var(--abstand-3);
}

.botschutz-hinweis {
  font-size: 0.8125rem;
  color: var(--grau);
  margin-top: var(--abstand-2);
}

/* Turnstile meldet sich nur, wenn Cloudflare eine Rueckfrage stellt
   (appearance: interaction-only). Der Platz bleibt bis dahin leer. */
.turnstile:not(:empty) {
  margin-bottom: var(--abstand-2);
}

/* -- 6 Hilfsklassen ------------------------------------------------------ */

.nur-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-mitte {
  text-align: center;
}
.abstand-oben {
  margin-top: var(--abstand-4);
}
.abstand-unten {
  margin-bottom: var(--abstand-4);
}
.ohne-abstand {
  margin: 0;
}
.klein {
  font-size: 0.875rem;
}
.grau {
  color: var(--grau);
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  align-items: center;
}

.marke {
  display: inline-block;
  padding: 0.2rem 0.625rem;
  border-radius: 999px;
  background: var(--limette-hell);
  color: var(--navy-dunkel);
  font-size: 0.8125rem;
  font-weight: 600;
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--abstand-3);
}

.tabelle th,
.tabelle td {
  text-align: left;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--flaeche-rand);
}

.tabelle th {
  color: var(--navy);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Breite Inhalte scrollen in sich, nie die Seite */
.scrollbar {
  overflow-x: auto;
}

/* -- Schmale Bildschirme ------------------------------------------------- */

@media (max-width: 900px) {
  .menue-schalter {
    display: block;
  }

  .kopf__navigation {
    display: none;
    width: 100%;
  }

  .kopf__navigation[data-offen="ja"] {
    display: block;
  }

  .kopf__leiste {
    flex-wrap: wrap;
  }

  .navigation {
    flex-direction: column;
    align-items: stretch;
    padding: var(--abstand-2) 0;
    gap: 0;
  }

  .navigation__link {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--flaeche-rand);
    border-radius: 0;
  }

  /* Aufgeklappte Untermenues statt Schwebemenue */
  .untermenue {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 3px solid var(--limette-hell);
    border-radius: 0;
    margin: 0 0 var(--abstand-2) var(--abstand-2);
    padding: 0 0 0 var(--abstand-2);
    min-width: 0;
  }

  .zeitstrahl li {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero {
    padding: var(--abstand-4) 0;
  }

  .abschnitt {
    padding: var(--abstand-4) 0;
  }

  .formularkarte {
    padding: var(--abstand-3);
  }

  .fld-raster--plz {
    grid-template-columns: 1fr;
  }
}

/* Bewegung reduzieren, wenn das System es verlangt */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

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

@media print {
  .kopf,
  .fuss,
  .aufruf,
  .sprunglink,
  .hinweisband,
  form {
    display: none !important;
  }

  body {
    font-size: 11pt;
    color: #000;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}