/* ==========================================================================
   AHA-FASD.de — Stylesheet
   ==========================================================================
   Fuer's Anders Sein Duerfen.

   Diese Datei ist die alleinige visuelle Umsetzung des Design-Vertrags:
     _projekt/DESIGN-VERTRAG.md
   Dort stehen Farb-Tokens, Mass-Tokens und das vollstaendige Klassenverzeichnis.
   HTML-Seiten (inc/*.php) verwenden ausschliesslich die dort benannten
   Klassen; diese Datei gestaltet ausschliesslich diese Klassen.

   Farb-Tokens sind gegen WCAG 2.2 AAA geprueft mit:
     python _projekt/tools/kontrast.py
   Bei jeder Aenderung an Farbwerten muss dieses Skript erneut fehlerfrei
   durchlaufen.

   Zielgruppe: teils selbst neurodivergente Menschen. Reizreduktion hat
   Vorrang vor visueller Raffinesse — ruhig, klar, grosszuegig.
   Kein Dunkelmodus, keine Animation ueber 200ms, kein Parallax,
   keine externen Ressourcen (kein @import, keine Webfonts, kein CDN).
   ========================================================================== */


/* ==========================================================================
   1. Token-Block
   ========================================================================== */

:root {
  /* Flaechen */
  --bg:           #FAF8F3;  /* Seitenhintergrund, weiches Off-White */
  --bg-tief:      #F4F0E9;  /* abgesetzte Flaeche, Infokasten */
  --bg-karte:     #FFFDF9;  /* leicht angehobene Karte */
  --linie:        #DED7CA;  /* Trennlinien */

  /* Text */
  --text:         #1F293D;  /* Basistext          13.71:1 */
  --text-leise:   #475164;  /* Sekundaertext        7.17:1 */

  /* A – Aufklaeren (Tuerkis) */
  --a1-flaeche:   #309890;  /* nur Flaechen und Symbole, nie Text darauf */
  --a1-ink:       #1B564F;  /* Text, Links, Rahmen  7.94:1 */

  /* H – Hinschauen (Lila) */
  --h-flaeche:    #805890;
  --h-ink:        #63446F;  /*                      7.65:1 */

  /* A – Authentisch (Gelb-Orange) */
  --a2-flaeche:   #F0A820;
  --a2-ink:       #6B4907;  /*                      7.67:1 */

  /* Zustaende – bewusst gedaempft, kein Signalrot */
  --hinweis-ink:  #7C4326;
  --hinweis-bg:   #FBF1EA;
  --erfolg-ink:   #1F5D3C;
  --erfolg-bg:    #EDF5F0;

  /* Fokus */
  --fokus:        #1F293D;
  --fokus-halo:   #F0A820;

  /* Mass-Tokens */
  --schrift-basis: 1.125rem;   /* 18px Grundgroesse, bewusst gross */
  --zeile:         1.7;        /* Zeilenhoehe Fliesstext, AAA verlangt >= 1.5 */
  --zeile-eng:     1.3;        /* Ueberschriften */
  --mass:          34rem;      /* max. Textbreite ~ 70-75 Zeichen */
  --mass-breit:    68rem;      /* Seitencontainer */
  --radius:        0.5rem;

  /* Abstandsskala */
  --luft-1: 0.25rem;
  --luft-2: 0.5rem;
  --luft-3: 1rem;
  --luft-4: 1.75rem;
  --luft-5: 3rem;
  --luft-6: 5rem;

  /* Schriftfamilie: System-Stack, keine externe Schrift, kein CDN-Request */
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
}


/* ==========================================================================
   2. Sektions-Umschaltung
   ========================================================================== */

body {
  --sek-flaeche: var(--text);
  --sek-ink:     var(--text);
}
body.sek-a1 { --sek-flaeche: var(--a1-flaeche); --sek-ink: var(--a1-ink); }
body.sek-h  { --sek-flaeche: var(--h-flaeche);  --sek-ink: var(--h-ink); }
body.sek-a2 { --sek-flaeche: var(--a2-flaeche); --sek-ink: var(--a2-ink); }


/* ==========================================================================
   3. Sanfter Reset
   ========================================================================== */

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

img, picture, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Inline-Symbole aus inc/icons.php tragen nur ein viewBox und keine
   Massangabe. Ohne diese Regel wuerden sie auf die volle Breite ihres
   Containers wachsen. Sie erben stattdessen die Schriftgroesse und stehen
   damit immer im richtigen Verhaeltnis zum Text daneben. */
svg {
  width: 1.4em;
  height: 1.4em;
  flex: none;
}

/* Sprungziele duerfen nicht unter dem klebenden Kopf verschwinden.
   Der Abstand ist bewusst groesser als der Kopf hoch ist, damit die
   Zielueberschrift mit etwas Luft darueber steht - wer per Sprungmarke
   navigiert, soll sofort sehen, wo er gelandet ist. */
:target {
  scroll-margin-top: 7rem;
}


/* ==========================================================================
   4. Grundtypografie
   ========================================================================== */

body {
  font-family: var(--schrift);
  font-size: var(--schrift-basis);
  line-height: var(--zeile);
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--zeile-eng);
  color: var(--text);
  text-wrap: balance;
  /* reichlich Abstand darueber: die Zugehoerigkeit zum folgenden Block
     muss eindeutig groesser sein als der Abstand zum vorherigen */
  margin-top: var(--luft-5);
  margin-bottom: var(--luft-3);
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child {
  margin-top: 0;
}

h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem); }
h4 { font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem); }

p {
  max-width: var(--mass);
  margin-bottom: var(--luft-3);
  text-wrap: pretty;
}

ul, ol {
  max-width: var(--mass);
  padding-left: 1.25em;
  margin-bottom: var(--luft-3);
}
li {
  margin-bottom: var(--luft-1);
}

small { color: var(--text-leise); }

/* Fliesstextlinks ausserhalb eigener Komponentenklassen bleiben erkennbar */
p a, li a {
  color: var(--sek-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}


/* ==========================================================================
   5. Fokus-Sichtbarkeit — wichtigster Block
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--fokus-halo);
}

/* Browser ohne Unterstuetzung fuer :focus-visible bekommen den Ring bei
   jedem Fokus zu sehen (Tastatur wie Maus) statt gar keinen Ring. */
@supports not selector(:focus-visible) {
  :focus {
    outline: 3px solid var(--fokus);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--fokus-halo);
  }
}


/* ==========================================================================
   6. Sprungmarke und Hilfsklassen fuer Screenreader
   ========================================================================== */

.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;
}

.nur-screenreader--fokusbar:focus {
  position: static;
  width: auto;
  height: auto;
  padding: var(--luft-1) var(--luft-2);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.sprungmarke {
  position: absolute;
  top: var(--luft-2);
  left: var(--luft-2);
  z-index: 200;
  transform: translateY(-8rem);
  background: var(--bg-karte);
  color: var(--text);
  padding: var(--luft-2) var(--luft-3);
  border-radius: var(--radius);
  border: 2px solid var(--text);
  text-decoration: underline;
  font-weight: 700;
  transition: transform 150ms ease;
}
.sprungmarke:focus {
  transform: translateY(0);
}


/* ==========================================================================
   7. Layout
   ========================================================================== */

.bahn {
  width: 100%;
  max-width: var(--mass-breit);
  margin-inline: auto;
  padding-inline: var(--luft-3);
}

/* Der Modifier traegt die Bahn-Eigenschaften selbst, damit er auch dann
   zentriert, wenn die Basisklasse im Markup vergessen wurde. Ohne das
   stuende der Inhalt am linken Fensterrand statt in der Seitenmitte. */
.bahn--schmal {
  width: 100%;
  max-width: var(--mass);
  margin-inline: auto;
  padding-inline: var(--luft-3);
}

/* Dasselbe fuer den abgesetzten Abschnitt. */
.abschnitt--tief {
  padding-block: var(--luft-5);
  background: var(--bg-tief);
}

/* Sicherheitsnetz: Steht ein Element direkt in <main class="inhalt">, ohne
   eigene .bahn, wuerde es an den Fensterrand rutschen und die Ausrichtung
   der Seite brechen. Diese Regel gibt ihm dieselbe Bahn wie allen anderen
   Inhalten, damit die Seite optisch immer bündig bleibt. */
.inhalt > h1,
.inhalt > h2,
.inhalt > h3,
.inhalt > p,
.inhalt > ul,
.inhalt > ol,
.inhalt > figure,
.inhalt > blockquote {
  width: 100%;
  max-width: var(--mass-breit);
  margin-inline: auto;
  padding-inline: var(--luft-3);
}

.inhalt > h1 {
  margin-block: var(--luft-5) var(--luft-4);
}

.abschnitt {
  padding-block: var(--luft-5);
}

.abschnitt--tief {
  background: var(--bg-tief);
}


/* ==========================================================================
   8. Kopf und Navigation
   ========================================================================== */

/* Der Kopf bleibt beim Scrollen stehen. Die Vorgabe "persistente
   Navigation" aus CLAUDE.md wird damit woertlich erfuellt: Wer den
   Ueberblick verliert, findet den Weg zurueck ohne nach oben zu scrollen.
   Das ist etwas anderes als scrollgesteuerte Bewegung - der Kopf bewegt
   sich nicht, er bleibt einfach liegen. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-karte);
  border-bottom: 1px solid var(--linie);
  padding-block: var(--luft-2);
}

/* Bei wenig Bildschirmhoehe - etwa bei 400 % Zoom oder auf einem quer
   gehaltenen Telefon - frisst ein klebender Kopf zu viel vom Lesebereich.
   Dann scrollt er normal mit (WCAG 1.4.10). */
@media (max-height: 26em) {
  .kopf { position: static; }
}

.kopf .bahn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-2) var(--luft-4);
}

.kopf__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--luft-2);
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.25rem;
}
.kopf__logo img {
  max-height: 2.75rem;
  width: auto;
}

/* Hauptnavigation: ohne JS und ohne Zustandsattribut immer offen und
   bedienbar. Optionales JS darf auf .hauptnav das Attribut
   data-zustand="geschlossen" setzen, um die Liste im Schmalformat
   einzuklappen; erst dann greifen die Zuklapp-Regeln unten. */
.hauptnav {
  width: 100%;
}

/* max-width muss hier zurueckgesetzt werden: die Grundtypografie begrenzt
   alle Listen auf Lesebreite (34rem). Fuer eine Navigationsleiste ist das
   falsch - die Punkte brauchen mehr Platz und brechen sonst um, obwohl
   der Kopf breit genug waere. */
.hauptnav__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--luft-1) var(--luft-3);
  list-style: none;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Ab dieser Breite passen Logo, Slogan und alle Menuepunkte nebeneinander.
   Die Reihenfolge bleibt die des Markups, damit die Tastatur-Reihenfolge
   der sichtbaren entspricht (WCAG 2.4.3). */
@media (min-width: 64em) {
  .kopf .bahn {
    flex-wrap: nowrap;
  }
  .hauptnav {
    width: auto;
    margin-left: auto;
  }
  .hauptnav__liste {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

.hauptnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--luft-1);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 3px solid transparent;
}
.hauptnav__link:hover {
  color: var(--sek-ink);
  border-bottom-color: var(--linie);
}

/* Der aktive Punkt haengt nie allein an Farbe (WCAG 1.4.1): zusaetzliche
   Kante und Fettung markieren ihn nicht-farblich. */
.hauptnav__link--aktiv,
.hauptnav__link[aria-current="page"] {
  color: var(--sek-ink);
  font-weight: 700;
  border-bottom-color: var(--sek-ink);
}

.navschalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--luft-1);
  min-width: 44px;
  min-height: 44px;
  padding: var(--luft-1) var(--luft-3);
  background: var(--bg-karte);
  color: var(--text);
  border: 2px solid var(--linie);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.navschalter[hidden] {
  display: none;
}

.krumen {
  padding-block: var(--luft-2);
  font-size: 0.9375rem;
  color: var(--text-leise);
}
.krumen__liste {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.krumen__liste li {
  display: flex;
  align-items: center;
  margin: 0;
}
.krumen__liste li:not(:last-child)::after {
  content: "\203A"; /* › */
  margin-inline: var(--luft-2);
  color: var(--linie);
}
.krumen__liste a {
  color: var(--text-leise);
  text-decoration: underline;
}
.krumen__liste [aria-current="page"] {
  color: var(--text);
  font-weight: 700;
}

/* Vollformat: Umschalter wird nicht gebraucht, Navigation bleibt sichtbar */
@media (min-width: 52em) {
  .navschalter {
    display: none;
  }
  .hauptnav[data-zustand="geschlossen"] .hauptnav__liste {
    display: flex;
  }
}

/* Schmalformat: nur mit gesetztem Zustandsattribut eingeklappt */
.hauptnav[data-zustand="geschlossen"] .hauptnav__liste {
  display: none;
}


/* ==========================================================================
   9. Inhalt, Hero
   ========================================================================== */

.inhalt {
  display: block;
}

.hero {
  margin-bottom: var(--luft-5);
}
.hero__bild {
  width: 100%;
  height: clamp(10rem, 26vw, 18rem);
  object-fit: cover;
}

/* Der Hero-Text steht auf eigener Flaeche, NICHT ueber dem Bild:
   auf einem Aquarellbild waere kein Kontrastwert garantierbar. Der Kasten
   ueberlappt das Bild nur optisch - der Text sitzt auf ruhigem Untergrund
   mit geprueftem Kontrast.
   margin-inline: auto ist hier wesentlich, sonst klebt der Kasten am
   linken Fensterrand statt in der Seitenmitte zu stehen. */
.hero__text {
  position: relative;
  background: var(--bg-karte);
  border: 1px solid var(--linie);
  border-top: 4px solid var(--sek-flaeche);
  border-radius: var(--radius);
  padding: var(--luft-4);
  margin-top: -3rem;
  margin-inline: auto;
  width: calc(100% - 2 * var(--luft-3));
  max-width: var(--mass-breit);
  box-shadow: 0 4px 18px rgba(31, 41, 61, 0.10);
}
.hero__text h1 {
  margin-top: 0;
}
.hero__text > :last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   10. Inhaltskomponenten
   ========================================================================== */

.merksatz {
  border-left: 4px solid var(--sek-ink);
  padding: var(--luft-2) var(--luft-3);
  max-width: var(--mass);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: var(--zeile-eng);
}

.infokasten {
  background: var(--bg-tief);
  border-radius: var(--radius);
  padding: var(--luft-4);
}
.infokasten > :last-child {
  margin-bottom: 0;
}

.hinweiskasten {
  background: var(--hinweis-bg);
  color: var(--hinweis-ink);
  border-left: 4px solid var(--hinweis-ink);
  border-radius: var(--radius);
  padding: var(--luft-3) var(--luft-4);
}
.hinweiskasten > :last-child {
  margin-bottom: 0;
}
.hinweiskasten a {
  color: var(--hinweis-ink);
}

.liste-luftig {
  list-style: disc;
  padding-left: 1.5em;
  max-width: var(--mass);
}
.liste-luftig li {
  margin-bottom: var(--luft-3);
  line-height: var(--zeile);
}
.liste-luftig li:last-child {
  margin-bottom: 0;
}

.paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--luft-4);
}
.paar__karte {
  background: var(--bg-karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--luft-4);
  min-width: 0;
}
.paar__karte > :last-child {
  margin-bottom: 0;
}

.bildblock {
  margin-block: var(--luft-4);
}
.bildblock img {
  border-radius: var(--radius);
}
.bildblock__unterschrift {
  color: var(--text-leise);
  font-size: 0.9375rem;
  margin-top: var(--luft-2);
}

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--luft-3);
  padding: 0;
  list-style: none;
}
.galerie img {
  border-radius: var(--radius);
  width: 100%;
}

/* Platzhalter fuer noch unbefuellte Inhalte: deutlich sichtbar, aber ohne
   Text auf einer -flaeche-Farbe zu setzen. */
.offen {
  background: var(--hinweis-bg);
  color: var(--hinweis-ink);
  padding: 0.1em 0.5em;
  border: 1px dashed var(--hinweis-ink);
  border-radius: 0.3em;
  font-weight: 700;
}


/* ==========================================================================
   11. A-H-A-Kacheln (Startseite)
   ========================================================================== */

.kacheln {
  display: grid;
  /* auto-fit statt fester Spaltenzahl: bricht bei ca. < 52rem Breite
     von selbst auf eine Spalte um, auch bei 200%/400% Zoom */
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--luft-4);
}

/* Der farbige Kopfstreifen gibt jeder Kachel ihre Sektionsfarbe, ohne dass
   Text auf der Farbe steht - die kraeftigen Markenfarben erreichen als
   Textuntergrund kein AAA. So bleibt die Farbe trotzdem sichtbar. */
.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--luft-2);
  min-width: 0;
  background: var(--bg-karte);
  border: 1px solid var(--linie);
  border-top: 6px solid var(--sek-flaeche);
  border-radius: var(--radius);
  padding: var(--luft-4);
  box-shadow: 0 3px 14px rgba(31, 41, 61, 0.07);
}

.kachel--a1 { --sek-flaeche: var(--a1-flaeche); --sek-ink: var(--a1-ink); }
.kachel--h  { --sek-flaeche: var(--h-flaeche);  --sek-ink: var(--h-ink); }
.kachel--a2 { --sek-flaeche: var(--a2-flaeche); --sek-ink: var(--a2-ink); }

.kachel__symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--sek-flaeche);
  color: #FFFFFF;
}
.kachel__symbol svg {
  width: 1.75rem;
  height: 1.75rem;
}

.kachel__buchstabe {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--sek-ink);
}

.kachel__titel {
  margin: 0;
  font-size: 1.375rem;
  line-height: var(--zeile-eng);
  color: var(--text);
}

.kachel__text {
  color: var(--text-leise);
  margin: 0;
  flex-grow: 1;
}

.kachel__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  color: var(--sek-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
/* Die ganze Kachel ist klickbar: ::after deckt die gesamte Flaeche ab. */
.kachel__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Fokusring um die GANZE Kachel, nicht nur um den Textlink. Der eigene
   Fokusring des Links (aus Abschnitt 5) bleibt zusaetzlich sichtbar. */
.kachel:has(.kachel__link:focus-visible) {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--fokus-halo);
}

.kachel:hover {
  filter: brightness(0.99);
  box-shadow: 0 4px 14px rgba(31, 41, 61, 0.1);
}


/* ==========================================================================
   12. Schaltflaechen und Links
   ========================================================================== */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-width: 44px;
  min-height: 44px;
  padding: var(--luft-2) var(--luft-4);
  background: var(--sek-ink);
  color: #FFFFFF;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: filter 150ms ease;
}
.knopf:hover {
  filter: brightness(1.12);
}
.knopf:active {
  filter: brightness(0.94);
}

.knopf--leise {
  background: transparent;
  color: var(--sek-ink);
  border-color: var(--sek-ink);
}
.knopf--leise:hover {
  background: var(--bg-tief);
  filter: none;
}

.textlink {
  color: var(--sek-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-weight: 600;
}
.textlink:hover {
  color: var(--text);
}

/* Externer Link: sichtbares Symbol, Hinweistext fuer Screenreader steht
   als .nur-screenreader-Span im Markup. */
.auswaerts::after {
  content: "\2197"; /* ↗ */
  display: inline-block;
  margin-left: 0.3em;
  text-decoration: none;
}


/* ==========================================================================
   13. Formular
   ========================================================================== */

.formular {
  display: flex;
  flex-direction: column;
  gap: var(--luft-4);
  max-width: var(--mass);
}

.feld {
  display: flex;
  flex-direction: column;
  gap: var(--luft-1);
}

.feld__label {
  font-weight: 700;
  color: var(--text);
}

.feld__hilfe {
  color: var(--text-leise);
  font-size: 0.9375rem;
}

.feld__eingabe {
  min-height: 3rem;
  padding: var(--luft-2) var(--luft-3);
  background: var(--bg-karte);
  color: var(--text);
  border: 2px solid var(--linie);
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem;
  line-height: var(--zeile);
}
textarea.feld__eingabe {
  min-height: 8rem;
  resize: vertical;
}
.feld__eingabe:focus-visible {
  border-color: var(--fokus);
}

.feld__hinweis {
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  color: var(--hinweis-ink);
  font-size: 0.9375rem;
}
.feld__hinweis::before {
  content: "\2139"; /* ℹ als ruhiger Symbolplatz, kein Ausrufezeichen/Rot */
  flex: none;
}

/* Zustand: ruhige, gedaempfte Markierung mit Kante und Symbolplatz —
   kein kraeftiges Rot, kein Zittern, kein Aufblitzen. */
.feld--braucht-aufmerksamkeit .feld__eingabe {
  border-color: var(--hinweis-ink);
  background: var(--hinweis-bg);
}
.feld--braucht-aufmerksamkeit .feld__label {
  color: var(--hinweis-ink);
}

.meldung {
  padding: var(--luft-3) var(--luft-4);
  background: var(--hinweis-bg);
  color: var(--hinweis-ink);
  border-left: 4px solid var(--hinweis-ink);
  border-radius: var(--radius);
}
.meldung--erfolg {
  background: var(--erfolg-bg);
  color: var(--erfolg-ink);
  border-left-color: var(--erfolg-ink);
}

/* Spam-Schutz: aus dem sichtbaren Bereich verschoben statt display:none,
   damit Bots das Feld weiterhin ausfuellen. */
.honigtopf {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ==========================================================================
   14. Fuss
   ========================================================================== */

.fuss {
  background: var(--bg-tief);
  border-top: 1px solid var(--linie);
  padding-block: var(--luft-5);
  margin-top: var(--luft-6);
}
.fuss .bahn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--luft-4);
}
.fuss__block {
  display: flex;
  flex-direction: column;
  gap: var(--luft-2);
  min-width: 0;
}
/* Listen im Fussbereich sind Navigationslisten, keine Aufzaehlungen.
   Die Punkte davor waeren hier nur optisches Rauschen. */
.fuss__block ul,
.fuss__block ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--luft-2);
}

.fuss__block h2,
.fuss__block h3 {
  margin: 0;
  font-size: 1.0625rem;
  line-height: var(--zeile-eng);
}
.fuss__block a {
  color: var(--text);
  text-decoration: underline;
}

.nachoben {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  padding: var(--luft-1) var(--luft-2);
  color: var(--text);
  text-decoration: underline;
  font-weight: 600;
}


/* ==========================================================================
   15. Reduzierte Bewegung
   ========================================================================== */

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


/* ==========================================================================
   16. Erhoehter Kontrast
   ========================================================================== */

@media (prefers-contrast: more) {
  :root {
    --linie: var(--text);
  }
  .kachel,
  .paar__karte,
  .hero__text,
  .navschalter,
  .feld__eingabe {
    border-width: 2px;
  }
  .knopf,
  .knopf--leise {
    border-width: 3px;
  }
  :focus-visible {
    outline-width: 4px;
    box-shadow: 0 0 0 8px var(--fokus-halo);
  }
  @supports not selector(:focus-visible) {
    :focus {
      outline-width: 4px;
      box-shadow: 0 0 0 8px var(--fokus-halo);
    }
  }
}


/* ==========================================================================
   17. Druck
   ========================================================================== */

@media print {
  .kopf,
  .hauptnav,
  .navschalter,
  .krumen,
  .fuss,
  .nachoben,
  .sprungmarke,
  .hero__bild,
  .kachel__symbol {
    display: none !important;
  }
  body {
    background: #FFFFFF;
    color: #000000;
  }
  .hero__text,
  .infokasten,
  .hinweiskasten,
  .abschnitt--tief,
  .paar__karte,
  .kachel {
    background: #FFFFFF;
    border: 1px solid #000000;
    box-shadow: none;
  }
  a {
    color: #000000;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}


/* ==========================================================================
   18. Zoom- und Umbruch-Sicherheit (200% / 400%)
   ========================================================================== */

body {
  overflow-wrap: break-word;
}

/* Flex- und Grid-Kinder duerfen unter ihren Inhalt schrumpfen, statt die
   Bahn zu sprengen und horizontales Scrollen zu erzwingen. */
.kopf .bahn > *,
.hauptnav__liste > *,
.paar__karte,
.kachel,
.fuss__block {
  min-width: 0;
}

table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* ==========================================================================
   19. Startseite: kraeftigerer Auftakt
   ==========================================================================
   Die Startseite wirkte zu leer. Sie bekommt daher ein grosszuegiges
   Eingangsbild, einen hervorgehobenen Leitsatz und abwechselnd abgesetzte
   Abschnittsflaechen. Alles ohne Bewegung: kein Parallax, keine Animation -
   die Wirkung entsteht ueber Flaeche, Groesse und Ruhe.
   ========================================================================== */

.hero--start .hero__bild {
  height: clamp(14rem, 34vw, 26rem);
}

/* Der erste Satz traegt die Botschaft und darf groesser sein. Er bleibt
   dabei unter der Ueberschriftengroesse, damit die Rangfolge stimmt. */
.hero__leitsatz {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--text);
}

/* Abgesetzte Abschnitte bekommen eine feine Kante in der Sektionsfarbe,
   damit der Wechsel auch ohne Farbwahrnehmung erkennbar bleibt. */
.abschnitt--tief {
  border-block: 1px solid var(--linie);
}

/* Zwei abgesetzte Abschnitte direkt hintereinander wuerden zu einem Block
   verschmelzen - dazwischen bleibt die helle Flaeche stehen. */
.abschnitt--tief + .abschnitt--tief {
  border-top: none;
}

/* Der Merksatz ist die Schlusspointe der Startseite und darf Gewicht haben. */
.abschnitt:last-child .merksatz {
  font-size: 1.1875rem;
}