/* Klarseite – Stylesheet
 *
 * Ausgerichtet auf Menschen mit Sehbehinderung: hohe Kontraste, große Schrift,
 * flächige Bedienzustände statt feiner Linien.
 *
 * Drei Grundsätze, die beim Ändern erhalten bleiben müssen:
 *
 * 1. Maus und Tastatur sind gleichwertig. Jede :hover-Regel gilt zusammen mit
 *    :focus-visible. Wer mit der Tastatur navigiert, sieht dieselbe
 *    Hervorhebung. Der Fokus bekommt zusätzlich einen gepunkteten Ring, weil
 *    er ohne Zeigegerät auffindbar sein muss.
 * 2. Zustände wirken flächig. Beim Überfahren kippt ein Element in einen
 *    dunklen Block mit weißer Schrift – eine ganze Fläche ändert sich, nicht
 *    nur eine Farbe oder eine dünne Linie.
 * 3. Farbe trägt nie allein Information. Die Bereichsfarben helfen bei der
 *    Orientierung, jeder Bereich ist aber immer auch beschriftet.
 *
 * Alle Farbwerte sind auf Kontrast geprüft; die Nachweise stehen in
 * entwicklung/BARRIEREFREIHEIT.md.
 */

:root {
  /* Grundfarben */
  --text: #141414;
  --hell: #f7f8fa;
  --weiss: #ffffff;
  --rand: #6a7383;          /* 4.78:1 auf Weiß – Formularfelder müssen auffindbar sein */
  --hinweis: #4a4a4a;       /* 8.86:1 auf Weiß */

  /* Bereichsfarbe: wird pro Seite überschrieben und färbt Kopf, Hervorhebung
     und Überschriften. Voreinstellung ist der allgemeine Ton. */
  --bereich: #14294b;
  --bereich-allgemein: #14294b;
  --bereich-aktuelles: #1a4f9c;
  --bereich-termine:   #0f5f52;
  --bereich-seiten:    #5b2a86;
  --bereich-medien:    #8f2063;
  --bereich-benutzer:  #8a4b00;

  /* Bedienzustände */
  --flaeche-aktiv: var(--bereich);
  --schrift-aktiv: #ffffff;
  --fokus: #141414;
  --fokus-hell: #ffffff;
  --fokus-breite: 3px;

  /* Meldungen */
  --gruen-hintergrund: #e7f6e7;
  --gruen-text: #0f4a14;
  --rot-hintergrund: #fdecec;
  --rot-text: #7c1212;

  --rahmen-breite: 2px;
  --radius: 8px;
}

/* Kontrastverstärkte Ansicht: alles auf die stärksten Werte, Bereichsfarben
   bleiben erhalten, damit die Orientierung nicht verlorengeht. */
:root[data-ansicht="kontrast"] {
  --text: #000000;
  --hell: #ffffff;
  --rand: #000000;
  --hinweis: #000000;
  --bereich: #000000;
  --bereich-allgemein: #000000;
  --bereich-aktuelles: #0d3470;
  --bereich-termine:   #0a4038;
  --bereich-seiten:    #3f1d5e;
  --bereich-medien:    #66163f;
  --bereich-benutzer:  #5c3200;
  --gruen-hintergrund: #ffffff;
  --gruen-text: #0a3d0e;
  --rot-hintergrund: #ffffff;
  --rot-text: #8f0000;
  --fokus-breite: 4px;
  --rahmen-breite: 3px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--hell);
}

/* ---------- Bedienzustände ----------
   Hover und Fokus erzeugen dieselbe Fläche. Der Fokus bekommt zusätzlich
   den gepunkteten Ring. */

a {
  color: var(--bereich);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
a:hover,
a:focus-visible,
a:active {
  background-color: var(--flaeche-aktiv);
  color: var(--schrift-aktiv);
  text-decoration: none;
  /* Der Block reicht etwas über den Text hinaus, damit er als Fläche wirkt –
     aber nur so weit, dass er im Fließtext nicht ins Nachbarwort läuft. */
  box-shadow: 0 0 0 2px var(--flaeche-aktiv);
  border-radius: 2px;
}
:focus-visible {
  outline: var(--fokus-breite) dotted var(--fokus);
  outline-offset: 2px;
}
/* Flächige Elemente vertragen mehr Abstand als Links im Fließtext. */
.knopf:focus-visible, button:focus-visible, .kachel:focus-visible,
summary:focus-visible, .hauptnav a:focus-visible, .adminnav a:focus-visible {
  outline-offset: 4px;
}
/* Auf dunklem Grund muss der Ring hell sein. */
.kopfbereich :focus-visible,
.fussbereich :focus-visible,
.kachel:focus-visible,
.datentabelle th :focus-visible {
  outline-color: var(--fokus-hell);
}

.sprunglink {
  position: absolute;
  left: -9999px;
  background: var(--bereich);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: bold;
  z-index: 100;
  text-decoration: none;
}
.sprunglink:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Kopf und Navigation ---------- */
.kopfbereich {
  background: var(--bereich);
  color: #fff;
  padding: 1rem 1.5rem;
}
.kopfbereich .logo { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: bold; }
.kopfbereich .logo a { color: #fff; text-decoration: none; }
.kopfbereich .logo a:hover,
.kopfbereich .logo a:focus-visible {
  background: #fff;
  color: var(--bereich);
  box-shadow: 0 0 0 3px #fff;
}

.hauptnav, .adminnav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.hauptnav a, .adminnav a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  border: 2px solid transparent;
}
/* Umkehrung wie bei den Links: die Fläche kippt. */
.hauptnav a:hover, .hauptnav a:focus-visible,
.adminnav a:hover, .adminnav a:focus-visible {
  background: #fff;
  color: var(--bereich);
  box-shadow: none;
}
.hauptnav a[aria-current="page"], .adminnav a[aria-current="page"] {
  background: #fff;
  color: var(--bereich);
  border-color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hauptbereich { max-width: 62rem; margin: 0 auto; padding: 1.5rem; }

h1 { color: var(--bereich); font-size: 2.2rem; margin-top: 0.5rem; line-height: 1.25; }
h2 { color: var(--bereich); margin-top: 2rem; line-height: 1.3; }
h3 { line-height: 1.3; }

.fussbereich {
  background: var(--bereich-allgemein);
  color: #fff;
  padding: 1.5rem;
  margin-top: 3rem;
  text-align: center;
}
.fussbereich a { color: #fff; }
.fussbereich a:hover, .fussbereich a:focus-visible {
  background: #fff;
  color: var(--bereich-allgemein);
  box-shadow: 0 0 0 3px #fff;
}

/* ---------- Ansicht umschalten ---------- */
.ansichtsform { margin: 0.75rem 0 0; }
.ansichtsknopf {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
}
.ansichtsknopf:hover, .ansichtsknopf:focus-visible {
  background: #fff;
  color: var(--bereich);
}

/* ---------- Kacheln auf der Startseite ---------- */
.kachelgitter {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}
.kachel {
  display: block;
  background: var(--kachelfarbe, var(--bereich-allgemein));
  color: #fff;
  text-decoration: none;
  padding: 1.5rem;
  border-radius: var(--radius);
  border: var(--rahmen-breite) solid transparent;
  min-height: 8rem;
  height: 100%;
}
.kachel .kacheltitel { display: block; font-size: 1.5rem; font-weight: bold; line-height: 1.25; }
.kachel .kacheltext { display: block; margin-top: 0.5rem; font-size: 1rem; }
/* Beim Überfahren kippt die Kachel in die Umkehrung – die Fläche bleibt
   gleich groß, nur Vorder- und Hintergrund tauschen. */
.kachel:hover, .kachel:focus-visible {
  background: #fff;
  color: var(--kachelfarbe, var(--bereich-allgemein));
  border-color: var(--kachelfarbe, var(--bereich-allgemein));
  box-shadow: none;
}
.kachel:focus-visible { outline-color: var(--fokus); }

/* ---------- Inhalte ---------- */
.zweispaltig {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.kartenliste { list-style: none; margin: 0; padding: 0; }
.karte {
  background: var(--weiss);
  border: var(--rahmen-breite) solid var(--rand);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.karte h2, .karte h3 { margin-top: 0; }
.datumzeile { font-weight: 600; color: var(--hinweis); }

.statusbereich { min-height: 0; }
.meldung {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 600;
  border: var(--rahmen-breite) solid;
}
.meldung-erfolg { background: var(--gruen-hintergrund); color: var(--gruen-text); border-color: var(--gruen-text); }
.meldung-fehler { background: var(--rot-hintergrund); color: var(--rot-text); border-color: var(--rot-text); }

/* Fehlerübersicht am Formularanfang. Wird beim Laden fokussiert, damit
   Screenreader sie vorlesen – der Fokusring muss deshalb sichtbar sein. */
.fehleruebersicht {
  background: var(--rot-hintergrund);
  color: var(--rot-text);
  border: 3px solid var(--rot-text);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.fehleruebersicht-titel { margin: 0 0 0.5rem; font-size: 1.3rem; color: var(--rot-text); }
.fehleruebersicht ul { margin: 0; padding-left: 1.5rem; }
.fehleruebersicht li { margin-bottom: 0.4rem; font-weight: 600; }
.fehleruebersicht a { color: var(--rot-text); }
.fehleruebersicht a:hover, .fehleruebersicht a:focus-visible {
  background: var(--rot-text);
  color: #fff;
  box-shadow: 0 0 0 3px var(--rot-text);
}

/* ---------- Formulare ---------- */
form.formular { max-width: 44rem; }
.feld { margin-bottom: 1.5rem; }
.feld label { display: block; font-weight: bold; margin-bottom: 0.3rem; }
.feld .hinweis { display: block; color: var(--hinweis); font-size: 1rem; margin-bottom: 0.3rem; }
.feld input[type="text"], .feld input[type="email"], .feld input[type="password"],
.feld input[type="number"], .feld input[type="datetime-local"], .feld input[type="file"],
.feld textarea, .feld select {
  width: 100%;
  font-size: 1.125rem;
  font-family: inherit;
  padding: 0.6rem;
  border: var(--rahmen-breite) solid var(--rand);
  border-radius: 6px;
  background: var(--weiss);
  color: var(--text);
}
.feld input:hover, .feld textarea:hover,
.feld input:focus, .feld textarea:focus { border-color: var(--bereich); }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: var(--rot-text); }
.feld .fehlertext { color: var(--rot-text); font-weight: bold; display: block; }
.feld input[type="checkbox"], .feld input[type="radio"] { width: 1.25rem; height: 1.25rem; }

/* ---------- Schaltflächen ---------- */
.knopf, button {
  font-size: 1.125rem;
  font-family: inherit;
  font-weight: bold;
  padding: 0.7rem 1.5rem;
  border-radius: 6px;
  border: var(--rahmen-breite) solid var(--bereich);
  background: var(--bereich);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.knopf:hover, .knopf:focus-visible,
button:hover, button:focus-visible {
  background: var(--weiss);
  color: var(--bereich);
  border-color: var(--bereich);
  box-shadow: none;
}
.knopf-sekundaer { background: var(--weiss); color: var(--bereich); }
.knopf-sekundaer:hover, .knopf-sekundaer:focus-visible {
  background: var(--bereich);
  color: #fff;
}
.knopf-gefahr { background: #8c1616; border-color: #8c1616; color: #fff; }
.knopf-gefahr:hover, .knopf-gefahr:focus-visible {
  background: var(--weiss);
  color: #8c1616;
  border-color: #8c1616;
}
.knopf-klein { font-size: 1rem; padding: 0.4rem 0.9rem; }

/* ---------- Tabellen ---------- */
table.datentabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--weiss);
  margin-top: 1rem;
}
.datentabelle caption { text-align: left; font-weight: bold; padding: 0.5rem 0; font-size: 1.2rem; }
.datentabelle th, .datentabelle td {
  border: var(--rahmen-breite) solid var(--rand);
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
}
.datentabelle thead th { background: var(--bereich); color: #fff; }
.datentabelle tbody th { background: var(--weiss); color: var(--text); }
.datentabelle tbody tr:hover td, .datentabelle tbody tr:hover th { background: var(--hell); }
.aktionszelle form { display: inline; }
.aktionszelle .knopf, .aktionszelle button { margin: 0.15rem 0.25rem 0.15rem 0; }

.statistikreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
  list-style: none;
  padding: 0;
}
.statistik {
  background: var(--weiss);
  border: var(--rahmen-breite) solid var(--rand);
  border-left: 8px solid var(--kachelfarbe, var(--bereich));
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
  margin: 0;
}
.statistik .zahl { font-size: 2.5rem; font-weight: bold; color: var(--kachelfarbe, var(--bereich)); display: block; }

/* ---------- Mediathek ---------- */
.bild { margin: 1.5rem 0; }
.bild img { max-width: 100%; height: auto; border-radius: var(--radius); }
.bild figcaption { margin-top: 0.5rem; }
.bild figcaption summary { cursor: pointer; font-weight: 600; padding: 0.3rem 0; }
.dateilink a { font-weight: 600; }
.bildvorschau { margin: 0 0 1.5rem; }
.bildvorschau img {
  max-width: 20rem;
  height: auto;
  border: var(--rahmen-breite) solid var(--rand);
  border-radius: var(--radius);
  background: var(--weiss);
}
.bildvorschau figcaption { color: var(--hinweis); font-size: 1rem; margin-top: 0.3rem; }
.vorschauzelle { width: 8rem; }
.vorschaubild {
  width: 7rem;
  height: auto;
  border: var(--rahmen-breite) solid var(--rand);
  border-radius: 6px;
  background: var(--weiss);
  display: block;
}
.dateiart {
  display: inline-block;
  background: var(--bereich);
  color: #fff;
  font-weight: bold;
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
}
.dateiangaben { display: block; font-weight: normal; font-size: 1rem; color: var(--hinweis); }
.kuerzel {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 1rem;
  background: var(--weiss);
  border: var(--rahmen-breite) solid var(--rand);
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  white-space: nowrap;
}
.kuerzelzelle { white-space: nowrap; }
.kuerzelzelle .knopf-klein { margin-left: 0.5rem; }
.beispielcode {
  background: var(--weiss);
  border: var(--rahmen-breite) solid var(--rand);
  border-radius: var(--radius);
  padding: 1rem;
  overflow-x: auto;
  font-size: 1rem;
}
.einfuege-meldung:not(:empty) {
  background: var(--gruen-hintergrund);
  color: var(--gruen-text);
  border: var(--rahmen-breite) solid var(--gruen-text);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  font-weight: 600;
}

/* ---------- Aufklappbare Hilfen ---------- */
.hilfe {
  background: var(--weiss);
  border: var(--rahmen-breite) solid var(--rand);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.hilfe > summary { cursor: pointer; font-weight: bold; color: var(--bereich); padding: 0.3rem 0; }
.hilfe > summary:hover, .hilfe > summary:focus-visible { background: var(--bereich); color: #fff; }
.hilfe[open] > summary { margin-bottom: 0.5rem; }
.medienauswahl { margin-top: 0.75rem; }
.medienauswahl .datentabelle { font-size: 1rem; }

/* Wer Bewegung reduziert haben möchte, bekommt keine Übergänge. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Bereichszuordnung ----------
   Die Klasse steht am body und setzt die Bereichsfarbe für die ganze Seite. */
.bereich-allgemein { --bereich: var(--bereich-allgemein); }
.bereich-aktuelles { --bereich: var(--bereich-aktuelles); }
.bereich-termine   { --bereich: var(--bereich-termine); }
.bereich-seiten    { --bereich: var(--bereich-seiten); }
.bereich-medien    { --bereich: var(--bereich-medien); }
.bereich-benutzer  { --bereich: var(--bereich-benutzer); }

/* Kachelfarben als Klassen – die Inhaltsrichtlinie (CSP) verbietet
   style-Attribute im HTML, deshalb keine Farben inline. */
.kachel-aktuelles { --kachelfarbe: var(--bereich-aktuelles); }
.kachel-termine   { --kachelfarbe: var(--bereich-termine); }
.kachel-seiten    { --kachelfarbe: var(--bereich-seiten); }
.kachel-medien    { --kachelfarbe: var(--bereich-medien); }
.kachel-benutzer  { --kachelfarbe: var(--bereich-benutzer); }
.kachel-allgemein { --kachelfarbe: var(--bereich-allgemein); }