/* =====================================================================
   KochBühne – Design-System (Frontend)
   Aufbau: 1 Tokens · 2 Basis · 3 Rahmen · 4 Komponenten · 5 Altklassen · 6 Druck
   Keine externen Ressourcen, kein Build. Entscheidungen: docs/LAYOUT_LOG.md (L1–L19)
   ===================================================================== */

/* ---------- 1 Tokens ---------- */
:root {
  color-scheme: light;

  /* Marke */
  --kb-rot: #920f17;
  --kb-rot-hover: #6e0b11;
  --kb-rot-dunkel: #5a090e;
  --kb-auf-rot: #ffffff;

  /* Flächen und Text */
  --kb-bg: #f4f1ee;
  --kb-flaeche: #ffffff;
  --kb-flaeche-2: #ece7e3;
  --kb-rand: #8c817c;
  --kb-rand-leise: #d9d1cc;
  --kb-text: #1f1a18;
  --kb-text-leise: #5a514d;
  --kb-link: #920f17;
  --kb-link-hover: #5a090e;
  --kb-fokus: #1f1a18;
  --kb-fuss-bg: #241d1b;
  --kb-fuss-text: #f4f1ee;

  /* Signalfarben (Text / Hintergrund) */
  --kb-erfolg: #1d6b32;
  --kb-erfolg-bg: #e3f2e6;
  --kb-fehler: #b3261e;
  --kb-fehler-bg: #fbe7e5;
  --kb-warnung: #7a5200;
  --kb-warnung-bg: #fdf1d6;
  --kb-info-bg: #e1ecf8;          /* Admin: ausgebucht (vorher #99ccff) */

  /* Typografie */
  --kb-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kb-fs-klein: 0.875rem;
  --kb-fs-basis: 1rem;
  --kb-fs-gross: 1.125rem;
  --kb-fs-h3: 1.25rem;
  --kb-fs-h2: 1.5rem;
  --kb-fs-h1: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --kb-zeilenhoehe: 1.55;

  /* Abstände, Formen */
  --kb-a1: 0.25rem;
  --kb-a2: 0.5rem;
  --kb-a3: 0.75rem;
  --kb-a4: 1rem;
  --kb-a5: 1.5rem;
  --kb-a6: 2rem;
  --kb-a7: 3rem;
  --kb-radius: 0.5rem;
  --kb-schatten: 0 1px 2px rgb(0 0 0 / 0.08), 0 2px 8px rgb(0 0 0 / 0.06);
  --kb-ziel: 44px;               /* Mindest-Klickfläche */
  --kb-max: 76rem;               /* Inhaltsbreite */
  --kb-seitenleiste: 13.5rem;
}

/* Dunkles Farbschema: per Umschalter (data-theme) oder ohne JS nach Systemeinstellung */
:root[data-theme="dark"] {
  color-scheme: dark;
  --kb-bg: #141110;
  --kb-flaeche: #1f1a19;
  --kb-flaeche-2: #2b2422;
  --kb-rand: #8a7d78;
  --kb-rand-leise: #3f3633;
  --kb-text: #f1ebe7;
  --kb-text-leise: #bdb2ad;
  --kb-link: #ff9ea3;
  --kb-link-hover: #ffc8cb;
  --kb-fokus: #ffffff;
  --kb-fuss-bg: #0c0a09;
  --kb-fuss-text: #f1ebe7;
  --kb-erfolg: #86d89a;
  --kb-erfolg-bg: #13301b;
  --kb-fehler: #ff978f;
  --kb-fehler-bg: #3b1412;
  --kb-warnung: #f2c662;
  --kb-warnung-bg: #3a2c0b;
  --kb-info-bg: #12263a;
  --kb-schatten: 0 1px 2px rgb(0 0 0 / 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --kb-bg: #141110;
    --kb-flaeche: #1f1a19;
    --kb-flaeche-2: #2b2422;
    --kb-rand: #8a7d78;
    --kb-rand-leise: #3f3633;
    --kb-text: #f1ebe7;
    --kb-text-leise: #bdb2ad;
    --kb-link: #ff9ea3;
    --kb-link-hover: #ffc8cb;
    --kb-fokus: #ffffff;
    --kb-fuss-bg: #0c0a09;
    --kb-fuss-text: #f1ebe7;
    --kb-erfolg: #86d89a;
    --kb-erfolg-bg: #13301b;
    --kb-fehler: #ff978f;
    --kb-fehler-bg: #3b1412;
    --kb-warnung: #f2c662;
    --kb-warnung-bg: #3a2c0b;
    --kb-info-bg: #12263a;
    --kb-schatten: 0 1px 2px rgb(0 0 0 / 0.5);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--kb-bg);
  color: var(--kb-text);
  font-family: var(--kb-font);
  font-size: var(--kb-fs-basis);
  line-height: var(--kb-zeilenhoehe);
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--kb-a3); }
h1 { font-size: var(--kb-fs-h1); font-weight: 600; }
h2 { font-size: var(--kb-fs-h2); font-weight: 600; }
h3 { font-size: var(--kb-fs-h3); font-weight: 600; }
p { margin: 0 0 var(--kb-a4); }
b, strong { font-weight: 700; }

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

a:link, a:visited {
  color: var(--kb-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--kb-link-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--kb-fokus);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.nur-vorleser {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.nur-druck { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    /* 0s statt 0.01ms: eine dauer > 0 wuerde mit transition-property:all erst uebergaenge erzeugen */
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 3 Rahmen (mobile first) ---------- */

/* Skip-Link */
.skiplink {
  position: absolute;
  left: var(--kb-a4);
  top: -10rem;
  z-index: 100;
  padding: var(--kb-a3) var(--kb-a4);
  background: var(--kb-flaeche);
  color: var(--kb-text);
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-schatten);
}
.skiplink:focus { top: var(--kb-a4); }

/* Kopf mit Foto (L14) */
.kopf {
  background-color: var(--kb-rot-dunkel);
  background-image: linear-gradient(rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.45)), url(../images/kochback.jpg);
  background-size: cover;
  background-position: center 35%;
}
.kopf__innen {
  max-width: var(--kb-max);
  margin: 0 auto;
  padding: var(--kb-a5) var(--kb-a4);
}
.kopf__logo { display: inline-block; border-radius: var(--kb-radius); }
.kopf__logo:focus-visible { outline-color: #ffffff; }
.kopf__logo img { display: block; width: 17rem; max-width: 100%; height: auto; }

/* Hauptnavigation (L5): sticky, mobil zum Aufklappen */
.hauptnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--kb-rot);
  color: var(--kb-auf-rot);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.25);
}
.hauptnav__innen {
  max-width: var(--kb-max);
  margin: 0 auto;
  padding: 0 var(--kb-a4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--kb-a2);
}
.hauptnav__liste {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--kb-a2);
  flex-basis: 100%;
  order: 3;
  display: flex;
  flex-direction: column;
}
.js .hauptnav__liste { display: none; }
.js .hauptnav.ist-offen .hauptnav__liste { display: flex; }

.hauptnav a:link, .hauptnav a:visited {
  display: flex;
  align-items: center;
  min-height: var(--kb-ziel);
  padding: var(--kb-a2) var(--kb-a3);
  color: var(--kb-auf-rot);
  text-decoration: none;
  border-radius: var(--kb-radius);
  font-size: var(--kb-fs-gross);
}
.hauptnav a:hover { background: var(--kb-rot-hover); color: var(--kb-auf-rot); }
.hauptnav a[aria-current="page"], .hauptnav a.ist-aktiv {
  background: var(--kb-rot-dunkel);
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--kb-auf-rot);
}
.hauptnav :focus-visible { outline-color: var(--kb-auf-rot); outline-offset: -3px; }

.knopf-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kb-a2);
  min-width: var(--kb-ziel);
  min-height: var(--kb-ziel);
  padding: var(--kb-a2) var(--kb-a3);
  border: 2px solid transparent;
  border-radius: var(--kb-radius);
  background: transparent;
  color: var(--kb-auf-rot);
  font: inherit;
  font-size: var(--kb-fs-gross);
  cursor: pointer;
}
.knopf-nav:hover { background: var(--kb-rot-hover); }
.knopf-nav svg { width: 1.5rem; height: 1.5rem; flex: none; }
.hauptnav__schalter { order: 1; margin-right: auto; }
.thema-schalter { order: 2; }

/* Symbole im Menüknopf und Themaschalter */
.hauptnav__schalter .sym-zu { display: none; }
.hauptnav__schalter[aria-expanded="true"] .sym-auf { display: none; }
.hauptnav__schalter[aria-expanded="true"] .sym-zu { display: inline; }
.thema-schalter .sym-sonne { display: none; }
.thema-schalter[aria-pressed="true"] .sym-mond { display: none; }
.thema-schalter[aria-pressed="true"] .sym-sonne { display: inline; }

/* Seite: Inhalt + Seitenleiste (L2, L15) */
.seite {
  max-width: var(--kb-max);
  margin: 0 auto;
  padding: var(--kb-a4);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kb-a5);
}
.inhalt { min-width: 0; }
.inhalt:focus { outline: none; }

/* Inhalts-Karten */
.karte, .artikel, .modul {
  background: var(--kb-flaeche);
  color: var(--kb-text);
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-schatten);
  padding: var(--kb-a4);
  margin-bottom: var(--kb-a4);
}
.artikel::after { content: ""; display: block; clear: both; }
.modul { overflow-x: auto; }   /* Übergang bis die Module umgebaut sind (Phasen 3–6) */
.modul--frei { background: none; box-shadow: none; padding: 0 !important; overflow: visible; }

/* Seitenleiste: mobil Kartenreihe vor dem Fuß */
.seitenleiste {
  background: var(--kb-rot);
  border-radius: var(--kb-radius);
  padding: var(--kb-a4);
}
.seitenleiste__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--kb-a4);
  align-items: center;
  justify-items: center;
}
.seitenleiste img { display: block; width: 100%; max-width: 12.5rem; height: auto; }
.seitenleiste a { display: block; border-radius: var(--kb-radius); }
.seitenleiste a:focus-visible { outline-color: var(--kb-auf-rot); }
.seitenleiste a[aria-current="page"] { box-shadow: 0 0 0 3px var(--kb-auf-rot); }
.seitenleiste__miele img { border-radius: 4px; }

/* Fuß */
.fuss {
  background: var(--kb-fuss-bg);
  color: var(--kb-fuss-text);
}
.fuss__innen {
  max-width: var(--kb-max);
  margin: 0 auto;
  padding: var(--kb-a4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kb-a2) var(--kb-a5);
}
.fuss p { margin: 0; }
.fuss__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--kb-a2); }
.fuss a:link, .fuss a:visited {
  display: inline-flex;
  align-items: center;
  min-height: var(--kb-ziel);
  padding: 0 var(--kb-a2);
  color: var(--kb-fuss-text);
}
.fuss a:focus-visible { outline-color: var(--kb-fuss-text); }

/* Tablet */
@media (min-width: 40em) {
  .kopf__innen { padding: var(--kb-a6) var(--kb-a5); }
  .kopf__logo img { width: 23.5625rem; }   /* 377 px Originalbreite */
  .hauptnav__innen, .seite, .fuss__innen { padding-left: var(--kb-a5); padding-right: var(--kb-a5); }
  .karte, .artikel, .modul { padding: var(--kb-a5); }
}

/* Desktop: Menü als Leiste, Seitenleiste rechts */
@media (min-width: 64em) {
  .hauptnav__schalter { display: none; }
  .hauptnav__liste,
  .js .hauptnav__liste {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: auto;
    order: 1;
    margin-right: auto;
    padding: 0;
  }
  .hauptnav a:link, .hauptnav a:visited { border-radius: 0; padding: var(--kb-a2) var(--kb-a3); }
  .hauptnav a[aria-current="page"], .hauptnav a.ist-aktiv { box-shadow: inset 0 -4px 0 var(--kb-auf-rot); }
  .seite { grid-template-columns: minmax(0, 1fr) var(--kb-seitenleiste); padding-top: var(--kb-a5); }
  .seitenleiste { align-self: start; }
  .seitenleiste__liste { grid-template-columns: 1fr; }
}
@media (min-width: 64em) and (min-height: 40em) {
  .seitenleiste { position: sticky; top: 4.5rem; }
}

/* ---------- 4 Komponenten ---------- */

/* Knopf (Grundform, Zustände) */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kb-a2);
  min-height: var(--kb-ziel);
  padding: var(--kb-a2) var(--kb-a5);
  border: 2px solid var(--kb-rot);
  border-radius: var(--kb-radius);
  background: var(--kb-rot);
  color: var(--kb-auf-rot);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
/* als Link: gegen a:link/a:visited (Spezifität 0,1,1) absichern */
a.knopf:link, a.knopf:visited, a.knopf:hover { color: var(--kb-auf-rot); text-decoration: none; }
.knopf:hover { background: var(--kb-rot-hover); border-color: var(--kb-rot-hover); }
.knopf:active { background: var(--kb-rot-dunkel); border-color: var(--kb-rot-dunkel); }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.knopf--zweit {
  background: var(--kb-flaeche);
  color: var(--kb-text);
  border-color: var(--kb-rand);
}
.knopf--zweit:hover { background: var(--kb-flaeche-2); border-color: var(--kb-text); }
a.knopf--zweit:link, a.knopf--zweit:visited, a.knopf--zweit:hover { color: var(--kb-text); }

/* Hinweis / Banner */
.hinweis {
  padding: var(--kb-a3) var(--kb-a4);
  border-left: 4px solid currentColor;
  border-radius: var(--kb-radius);
  margin-bottom: var(--kb-a4);
}
.hinweis--erfolg { color: var(--kb-erfolg); background: var(--kb-erfolg-bg); }
.hinweis--fehler { color: var(--kb-fehler); background: var(--kb-fehler-bg); }
.hinweis--warnung { color: var(--kb-warnung); background: var(--kb-warnung-bg); }

/* Artikel: Überschrift, Text, Bilder aus [pic] (L10) */
.artikel_text { overflow-wrap: anywhere; }
.artikelbild {
  margin: 0 0 var(--kb-a4);
  padding: var(--kb-a1);
  background: var(--kb-flaeche);
  border: 1px solid var(--kb-rand-leise);
  border-radius: var(--kb-radius);
  width: fit-content;
  max-width: 100%;
}
.artikelbild img { display: block; max-width: 100%; height: auto; border-radius: calc(var(--kb-radius) - 2px); }
.artikelbild figcaption { padding: var(--kb-a1) var(--kb-a1) 0; font-size: var(--kb-fs-klein); color: var(--kb-text-leise); }
@media (min-width: 40em) {
  .artikelbild { max-width: 55%; }
  .artikelbild--links { float: left; margin-right: var(--kb-a5); }
  .artikelbild--rechts { float: right; margin-left: var(--kb-a5); }
}

/* Kurskarte (Kurs zum Artikel; Grundlage für die Kursliste in Phase 3) */
.kurskarte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kb-a1) var(--kb-a4);
  border-left: 4px solid var(--kb-rot);
}
.kurskarte p { margin: 0; }
.kurskarte__termin { color: var(--kb-text-leise); }
.kurskarte__datum { font-weight: 600; color: var(--kb-text); }
.kurskarte__name { font-size: var(--kb-fs-gross); font-weight: 600; }
.kurskarte__preis { font-weight: 600; }
.kurskarte__preis--aus { color: var(--kb-fehler); }
.kurskarte__zusatz { display: block; font-weight: 400; font-size: var(--kb-fs-klein); color: var(--kb-text-leise); }
.kurskarte__aktion { margin-top: var(--kb-a2) !important; }
@media (min-width: 40em) {
  .kurskarte { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .kurskarte__preis, .kurskarte__aktion { grid-column: 2; text-align: right; }
  .kurskarte__preis { grid-row: 1 / span 2; }
  .kurskarte__aktion { grid-row: 3; }
}

/* Kursliste (kurse.php): Monat als Abschnitt, ganze Karte anklickbar */
.kursmonat { margin-bottom: var(--kb-a6); }
.kursmonat__titel { font-size: var(--kb-fs-h3); padding-bottom: var(--kb-a2); border-bottom: 2px solid var(--kb-rot); }
.kursliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--kb-a4);
}
.kurskarte--liste {
  position: relative;
  height: 100%;
  margin: 0;
  padding: var(--kb-a4);
  background: var(--kb-flaeche);
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-schatten);
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start;
}
.kurskarte--liste .kurskarte__preis, .kurskarte--liste .kurskarte__aktion { grid-column: auto; grid-row: auto; text-align: left; }
.kurskarte--liste .kurskarte__name { margin: 0; font-size: var(--kb-fs-gross); }
.kurskarte__link:link, .kurskarte__link:visited { color: var(--kb-text); text-decoration: none; }
.kurskarte__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--kb-radius); }
.kurskarte--liste:hover { box-shadow: 0 0 0 2px var(--kb-rot), var(--kb-schatten); }
.kurskarte--liste:hover .kurskarte__link { text-decoration: underline; }
.kurskarte__link:focus-visible { outline: none; }
.kurskarte__link:focus-visible::after { outline: 3px solid var(--kb-fokus); outline-offset: 2px; }

/* Brotkrümelnavigation */
.brotkrumen ol { list-style: none; margin: 0 0 var(--kb-a3); padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.brotkrumen li { display: flex; align-items: center; }
.brotkrumen li + li::before { content: "›"; margin: 0 var(--kb-a2); color: var(--kb-text-leise); }
.brotkrumen a { display: inline-flex; align-items: center; min-height: var(--kb-ziel); }
.brotkrumen [aria-current] { color: var(--kb-text-leise); }

/* Kurskopf (kursanzeige.php) */
.kurskopf h1 { margin-bottom: var(--kb-a4); }
.kursdaten, .zusammenfassung { margin: 0; display: grid; gap: var(--kb-a2); }
.kursdaten > div, .zusammenfassung > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--kb-a4); }
.kursdaten dt, .zusammenfassung dt { font-weight: 600; color: var(--kb-text-leise); }
.kursdaten dd, .zusammenfassung dd { margin: 0; overflow-wrap: anywhere; }
.kursdaten__aus { color: var(--kb-fehler); font-weight: 700; }
.kursdaten__zusatz { display: block; font-size: var(--kb-fs-klein); color: var(--kb-text-leise); }
@media (min-width: 40em) {
  .kursdaten > div, .zusammenfassung > div { grid-template-columns: 9rem minmax(0, 1fr); }
}
.zusammenfassung { margin-bottom: var(--kb-a4); }
.zusammenfassung__titel { margin-top: var(--kb-a4); font-weight: 600; }

/* Buchung: Formular, Felder, Zustände */
.buchung h2 { margin-bottom: var(--kb-a4); }
.formular__pflicht { font-size: var(--kb-fs-klein); color: var(--kb-text-leise); }
.pflicht { color: var(--kb-fehler); font-weight: 700; }
.feld { display: flex; flex-direction: column; gap: var(--kb-a1); margin-bottom: var(--kb-a4); min-width: 0; }
.feld label { font-weight: 600; }
.feld--schmal { max-width: 10rem; }
.feldreihe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--kb-a4); }
@media (min-width: 40em) {
  .feldreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feldreihe--strasse { grid-template-columns: minmax(0, 1fr) 7rem; }
  .feldreihe--plz { grid-template-columns: 8rem minmax(0, 1fr); }
}
@media (max-width: 39.99em) {
  .feldreihe--strasse { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  .feldreihe--plz { grid-template-columns: 6rem minmax(0, 1fr); }
}
.formular input:not([type=checkbox]):not([type=hidden]):not(.zaehler), .formular select, .formular textarea {
  width: 100%;
  min-height: var(--kb-ziel);
  padding: var(--kb-a2) var(--kb-a3);
  font: inherit;
  color: var(--kb-text);
  background: var(--kb-flaeche);
  border: 2px solid var(--kb-rand);
  border-radius: var(--kb-radius);
}
.formular textarea { resize: vertical; }
.formular input:hover:not(:disabled), .formular select:hover, .formular textarea:hover { border-color: var(--kb-text); }
.formular input:focus-visible, .formular select:focus-visible, .formular textarea:focus-visible { outline: 3px solid var(--kb-fokus); outline-offset: 1px; border-color: var(--kb-text); }
.formular [aria-invalid="true"] { border-color: var(--kb-fehler) !important; }
.formular input:disabled { background: var(--kb-flaeche-2); color: var(--kb-text-leise); border-style: dashed; cursor: not-allowed; }
.gruppe__inhalt.ist-gesperrt { color: var(--kb-text-leise); }
.feld__fehler {
  margin: 0;
  color: var(--kb-fehler);
  font-weight: 600;
  font-size: var(--kb-fs-klein);
}
.feld__fehler::before { content: "⚠ "; }
.feld__hilfe { margin: 0; font-size: var(--kb-fs-klein); color: var(--kb-text-leise); }
.zaehler { width: 4.5ch; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-align: right; }
.gruppe {
  margin: 0 0 var(--kb-a4);
  padding: var(--kb-a4);
  border: 1px solid var(--kb-rand-leise);
  border-radius: var(--kb-radius);
}
.gruppe legend { padding: 0 var(--kb-a2); font-weight: 700; }
.auswahl { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--kb-a2); margin-bottom: var(--kb-a3); }
.auswahl input[type=checkbox] { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.6rem 0 0; accent-color: var(--kb-rot); }
.auswahl label { flex: 1 1 0; min-width: 0; padding: var(--kb-a2) 0; min-height: var(--kb-ziel); cursor: pointer; }
.auswahl .feld__fehler { flex-basis: 100%; }
.auswahl--agb { margin-top: var(--kb-a4); }
.aktionen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--kb-a3); margin-top: var(--kb-a4); }

/* Ladezustand beim Absenden (vorher pw.gif) */
.knopf.ist-am-senden { cursor: progress; opacity: 1; }
.knopf.ist-am-senden::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: kb-dreh 0.8s linear infinite;
}
@keyframes kb-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .knopf.ist-am-senden::before { animation: none; border-right-color: currentColor; border-style: dotted; }
}

/* Galerie: Kategorien als Auswahl, Vorschaubilder als Raster */
.galerie-kategorien ul { list-style: none; margin: 0 0 var(--kb-a5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--kb-a2); }
.galerie-kategorien a:link, .galerie-kategorien a:visited {
  display: inline-flex;
  align-items: center;
  min-height: var(--kb-ziel);
  padding: var(--kb-a1) var(--kb-a3);
  border: 2px solid var(--kb-rand);
  border-radius: 999px;
  background: var(--kb-flaeche);
  color: var(--kb-text);
  text-decoration: none;
}
.galerie-kategorien a:hover { border-color: var(--kb-rot); }
.galerie-kategorien a[aria-current] { background: var(--kb-rot); border-color: var(--kb-rot); color: var(--kb-auf-rot); font-weight: 600; }
.galerie-raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--kb-a3);
}
.galerie-raster__link { display: block; border-radius: var(--kb-radius); overflow: hidden; background: var(--kb-flaeche-2); }
.galerie-raster__link img { display: block; width: 100%; height: auto; aspect-ratio: 150 / 113; object-fit: cover; }
.galerie-raster__link:hover img { opacity: 0.85; }
.galerie-raster__text { display: block; margin-top: var(--kb-a1); font-size: var(--kb-fs-klein); color: var(--kb-text-leise); overflow-wrap: anywhere; }

/* Großansicht (galerie.php als Dialog, picform.php als eigenes Fenster), L39 */
.grossbild {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: min(100% - 2rem, 70rem);
  max-height: calc(100% - 2rem);
  margin: auto;
  padding: var(--kb-a4);
  overflow: auto;
  border: 0;
  border-radius: var(--kb-radius);
  background: var(--kb-flaeche);
  color: var(--kb-text);
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.5);
}
.grossbild::backdrop { background: rgb(0 0 0 / 0.75); }
.grossbild[open], .grossbild[open]::backdrop { animation: kb-einblenden 0.2s ease-out; }
.grossbild.ist-schliessend, .grossbild.ist-schliessend::backdrop { animation: kb-ausblenden 0.2s ease-in forwards; }
@keyframes kb-einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes kb-ausblenden { from { opacity: 1; } to { opacity: 0; } }
.grossbild__titel { margin: 0 0 var(--kb-a2); font-weight: 600; }
.grossbild__bild { margin: 0; text-align: center; }
.grossbild__bild img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 13rem);
  margin: 0 auto;
  object-fit: contain;
  border-radius: calc(var(--kb-radius) - 2px);
}
.grossbild__bild figcaption { margin-top: var(--kb-a2); color: var(--kb-text-leise); }
.grossbild__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--kb-a2); margin-top: var(--kb-a3); }
@media (max-width: 39.99em) {
  .grossbild__nav .knopf { flex: 1 1 100%; }
  .grossbild__nav [data-schliessen], .grossbild__nav button { order: -1; }
}
.bildfenster { padding: var(--kb-a3); background: var(--kb-flaeche); }
.bildfenster .grossbild__bild img { max-height: calc(100vh - 8rem); }

/* Rechtstexte und Kontakt (Impressum, Datenschutz, AGB): gut lesbare Zeilenlänge, lange URLs umbrechen */
.rechtstext { overflow-wrap: anywhere; }
.rechtstext > * { max-width: 75ch; }
.rechtstext h1 { margin-bottom: var(--kb-a4); }
.rechtstext h2 { font-size: var(--kb-fs-h3); margin-top: var(--kb-a6); }
.rechtstext h3 { font-size: var(--kb-fs-gross); margin-top: var(--kb-a5); }
.rechtstext ul { padding-left: var(--kb-a5); }
.rechtstext__untertitel { font-size: var(--kb-fs-gross); font-weight: 600; }
.rechtstext__spalten, .kontakt__spalten { display: grid; gap: 0 var(--kb-a6); font-style: normal; }
@media (min-width: 40em) {
  .rechtstext__spalten, .kontakt__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 75ch; }
}
.kontakt__spalten a:link, .kontakt__spalten a:visited { display: inline-flex; align-items: center; min-height: var(--kb-ziel); }

/* Preisliste (Speisekarte) */
table.preisliste { width: 100%; max-width: 40rem; border-collapse: collapse; margin-top: var(--kb-a4); }
.preisliste th, .preisliste td { padding: var(--kb-a2) var(--kb-a3); border-bottom: 1px solid var(--kb-rand-leise); text-align: left; }
.preisliste th:last-child, .preisliste td:last-child { text-align: right; white-space: nowrap; }
.preisliste thead th { border-bottom: 2px solid var(--kb-rot); }

/* Admin-Rahmen (Phase 7, L51; seit 8f ohne kochbuehne.css, L79);
   Rahmenregeln daher mit höherer Spezifität als deren body / a:link. */
body.admin { background: var(--kb-bg); color: var(--kb-text); font-family: var(--kb-font); }
a.skiplink:link, a.skiplink:visited { color: var(--kb-text); font-size: var(--kb-fs-basis); }
.adminkopf { background: var(--kb-fuss-bg); color: var(--kb-fuss-text); }
.adminkopf__innen {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--kb-a2) var(--kb-a4);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--kb-a4);
}
.adminkopf p { margin: 0; }
.adminkopf__titel { font-weight: 700; }
.adminkopf__nutzer span { white-space: nowrap; }
.adminnav .hauptnav__innen { max-width: 90rem; }
.adminnav a:link, .adminnav a:visited { font-size: var(--kb-fs-basis); }
.admininhalt { max-width: 90rem; margin: 0 auto; padding: var(--kb-a4); }
.admininhalt:focus { outline: none; }
.adminmodul {
  background: var(--kb-flaeche);
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-schatten);
  padding: var(--kb-a3);
  overflow-x: auto;   /* breite Modultabellen scrollen hier, nicht die Seite (L9) */
}
.adminlogin { max-width: 24rem; margin: var(--kb-a6) auto; }
.adminlogin .knopf { width: 100%; }
.adminstart { text-align: center; padding: var(--kb-a6) 0; }
.adminstart img { display: inline-block; }
@media (min-width: 40em) {
  .adminkopf__innen, .admininhalt { padding-left: var(--kb-a5); padding-right: var(--kb-a5); }
}

/* Admin-Module (Phase 8, L56): gemeinsame Bausteine, nur Tokens (Dark Mode ab 8f) */
.adminmodul h1 { margin: 0 0 var(--kb-a4); font-size: 1.5rem; }
.adminmodul h2 { margin: var(--kb-a5) 0 var(--kb-a3); font-size: 1.25rem; }
.adminformular > .feldraster, .adminformular > .feld, .adminformular > .aktionen { max-width: 48rem; }   /* nur eingaben begrenzen; listen im formular (8b) nutzen die volle breite */
.adminformular--bearbeiten input[type=text]:not(.zaehler), .adminformular--bearbeiten select,
.adminformular--bearbeiten textarea { background: var(--kb-warnung-bg); }   /* vorher gelbe Felder im Bearbeiten-Modus */
.feldraster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--kb-a4); }
@media (min-width: 40em) { .feldraster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feld__mit-knopf { display: flex; gap: var(--kb-a2); align-items: stretch; }
.feld__mit-knopf input { flex: 1 1 auto; min-width: 0; }
.knopf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: var(--kb-ziel);
  min-height: var(--kb-ziel);
  padding: var(--kb-a1);
  font: inherit;
  color: var(--kb-text);
  background: var(--kb-flaeche);
  border: 1px solid var(--kb-rand);
  border-radius: var(--kb-radius);
  cursor: pointer;
}
a.knopf-icon:link, a.knopf-icon:visited { color: var(--kb-text); font-size: var(--kb-fs-basis); text-decoration: none; }
.knopf-icon:hover, a.knopf-icon:hover { background: var(--kb-flaeche-2); border-color: var(--kb-text); }
.knopf-icon:focus-visible { outline: 3px solid var(--kb-fokus); outline-offset: 2px; }
.knopf-icon img { display: block; }
.zeitwahl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kb-a2); }
.zeitwahl legend { float: left; width: 100%; padding: 0; margin-bottom: var(--kb-a2); }
.formular .zeitwahl select { width: auto; min-width: 5rem; }
.textwerkzeuge { display: flex; gap: var(--kb-a2); }
.formular .knopf-format {
  min-width: var(--kb-ziel);
  min-height: var(--kb-ziel);
  font: inherit;
  color: var(--kb-text);
  background: var(--kb-flaeche-2);
  border: 1px solid var(--kb-rand);
  border-radius: var(--kb-radius);
  cursor: pointer;
}
.knopf-format:hover { border-color: var(--kb-text); }
.knopf-format:focus-visible { outline: 3px solid var(--kb-fokus); outline-offset: 2px; }
.formular .textwerkzeuge input.knopf-format.knopf-format { width: auto; padding: 0 var(--kb-a3); }   /* schlaegt .formular input:not(...) (0,4,1) */
.knopf-format--fett { font-weight: 700; }
.knopf-format--kursiv { font-style: italic; }
/* fett/kursiv waren wirkungslos: .formular input:not(…)(0,4,1) und .formular .knopf-format setzen font: inherit (LB60) – daher 0,4,1 an spaeterer stelle */
.formular .textwerkzeuge input.knopf-format--fett.knopf-format--fett { font-weight: 700; }
.formular .textwerkzeuge input.knopf-format--kursiv.knopf-format--kursiv { font-style: italic; }
.knopf-format--unterstrichen { text-decoration: underline; }
.aktionen--start { justify-content: flex-start; }
/* Datentabellen der Admin-Module (8b, L59): scrollt im eigenen Bereich, Zeilenstatus mit Text + Farbe */
.admintabelle-rahmen { position: relative; overflow-x: auto; margin: 0 0 var(--kb-a4); border: 1px solid var(--kb-rand-leise); border-radius: var(--kb-radius); }
.admintabelle-rahmen:focus-visible { outline: 3px solid var(--kb-fokus); outline-offset: 2px; }
.admintabelle { width: 100%; border-collapse: collapse; font-size: var(--kb-fs-basis); }
.admintabelle th, .admintabelle td { padding: var(--kb-a2) var(--kb-a3); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--kb-rand-leise); }
.admintabelle thead th { background: var(--kb-flaeche-2); font-weight: 700; white-space: nowrap; }
.admintabelle tbody tr:last-child td { border-bottom: 0; }
.admintabelle tr.ist-aktuell td { background: var(--kb-warnung-bg); }      /* vorher tdlistcellcolor2 #ffffcc */
.admintabelle tr.ist-gesperrt td { background: var(--kb-fehler-bg); }     /* vorher tdlistcellcolorgesperrt #ffacac */
.admintabelle tr.ist-gesperrt.ist-aktuell td { box-shadow: inset 0 0 0 2px var(--kb-warnung); }
.admintabelle__aktionen { white-space: nowrap; }
.admintabelle__aktionen > * { vertical-align: middle; }
.admintabelle__aktionen > * + * { margin-left: var(--kb-a1); }
.knopf-klein {
  display: inline-flex;
  align-items: center;
  min-height: var(--kb-ziel);
  min-width: var(--kb-ziel);
  justify-content: center;
  padding: 0 var(--kb-a3);
  font: inherit;
  color: var(--kb-text);
  background: var(--kb-flaeche);
  border: 1px solid var(--kb-rand);
  border-radius: var(--kb-radius);
  cursor: pointer;
}
a.knopf-klein:link, a.knopf-klein:visited { color: var(--kb-text); font-size: var(--kb-fs-basis); text-decoration: none; }
.knopf-klein:hover, a.knopf-klein:hover { background: var(--kb-flaeche-2); border-color: var(--kb-text); }
.knopf-klein:focus-visible { outline: 3px solid var(--kb-fokus); outline-offset: 2px; }
.feld__mit-knopf--schmal { max-width: 14rem; }
.textwerkzeuge { flex-wrap: wrap; }
/* Artikel-Admin (8c, L61): Vorschau wie im Frontend (ArtikelBild, .artikel), abgesetzt vom Formular */
.artikelvorschau { margin-top: var(--kb-a6); padding-top: var(--kb-a4); border-top: 2px solid var(--kb-rand-leise); }
/* Popups des Admins (8c, L62) */
.popup__inhalt { padding: var(--kb-a4); }
.popup__inhalt h1 { margin: 0 0 var(--kb-a4); font-size: 1.25rem; }
.popup .aktionen { justify-content: flex-start; }
.bildwahl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--kb-a3); }
.bildwahl__bild { display: flex; flex-direction: column; gap: var(--kb-a2); padding: var(--kb-a2); background: var(--kb-flaeche); border: 1px solid var(--kb-rand-leise); border-radius: var(--kb-radius); }
.bildwahl__bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--kb-flaeche-2); }
.bildwahl__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kb-a1); }
.formular .feld__mit-knopf input.knopf-format.knopf-format { width: auto; padding: 0 var(--kb-a3); }
/* Kurse und Buchungen (8d, L67/L68) */
.feld__mit-einheit { display: flex; align-items: center; gap: var(--kb-a2); }
.feld__mit-einheit input { flex: 1 1 auto; min-width: 0; }
.feld__einheit { flex: none; }
.auswahl--feld { align-self: end; }
.knopf-icon:disabled { opacity: 0.55; cursor: not-allowed; }   /* wie .knopf:disabled; L64 kurs mit buchungen */
.knopf-icon:disabled:hover { background: var(--kb-flaeche); border-color: var(--kb-rand); }
.admintabelle__zahl { white-space: nowrap; font-variant-numeric: tabular-nums; }
.admintabelle tr.ist-ausgebucht td { background: var(--kb-info-bg); }   /* vorher tdlistcellcolor_ausgebucht #99ccff */
.admintabelle tr.ist-offen td, .admintabelle tr.ist-offen th { background: var(--kb-warnung-bg); }   /* vorher tdlistalternatecolor #ffffdd */
.admintabelle tr.ist-bezahlt td, .admintabelle tr.ist-bezahlt th { background: var(--kb-erfolg-bg); }   /* vorher tdlistcellcolorbezahlt #bcffac */
.admintabelle tr.ist-aktuell th { background: var(--kb-warnung-bg); }
.admintabelle tr.ist-gesperrt th { background: var(--kb-fehler-bg); }
.admintabelle tr.ist-gesperrt.ist-aktuell th { box-shadow: inset 0 0 0 2px var(--kb-warnung); }
/* monatstabellen: gleiche spalten in jedem monat; mobil scrollt die tabelle im eigenen bereich statt den kursnamen zu stauchen */
.kurstabelle, .buchungstabelle { table-layout: fixed; }
.kurstabelle { min-width: 61rem; }      /* feste spalten 46,5rem + kursname mind. 14,5rem */
.buchungstabelle { min-width: 60rem; }  /* feste spalten 45rem + kursname/kunde mind. 15rem */
.kurstabelle th:nth-child(1), .buchungstabelle th:nth-child(1) { width: 9.5rem; }
.kurstabelle th:nth-child(2), .kurstabelle th:nth-child(3), .buchungstabelle th:nth-child(2), .buchungstabelle th:nth-child(3) { width: 4.5rem; }
.kurstabelle th:nth-child(5), .buchungstabelle th:nth-child(5), .buchungstabelle th:nth-child(6) { width: 4.5rem; }
.kurstabelle th:nth-child(6), .buchungstabelle th:nth-child(7) { width: 7rem; }
.kurstabelle th:nth-child(7) { width: 16.5rem; }   /* 5 knoepfe a 44 px */
.buchungstabelle th:nth-child(8) { width: 10.5rem; }   /* 3 knoepfe a 44 px */
.kurstabelle td, .buchungstabelle td, .buchungstabelle th { overflow-wrap: anywhere; }
.buchungstabelle .admintabelle__aktionen, .kurstabelle .admintabelle__aktionen { overflow-wrap: normal; }
.gutscheintabelle { min-width: 32rem; }
.kursliste-admin__artikel { display: block; font-size: var(--kb-fs-klein); color: var(--kb-text-leise); }
.kurszeile th { font-weight: 700; }
.kursgruppe + .kursgruppe .kurszeile > * { border-top: 2px solid var(--kb-rand-leise); }
.buchungszeile__symbole { white-space: nowrap; text-align: right; }
.buchungszeile__symbole img { display: inline-block; vertical-align: middle; }
.buchungsdetails { margin-top: var(--kb-a2); font-size: var(--kb-fs-klein); }
.buchungsdetails p { margin: 0; }
.buchungsdetails p.buchungsdetails__titel, .buchungsdetails p.buchungsdetails__abstand { margin-top: var(--kb-a2); }
.minikalender__hinweis { margin: 0 0 var(--kb-a2); font-size: var(--kb-fs-klein); }
.kopiestatus:empty { display: none; }
.kopiestatus { margin: var(--kb-a2) 0 0; }
.minikalender .aktionen { margin-top: var(--kb-a2); justify-content: flex-start; }
/* Upload, Galerie, Statistik, Ticker (8e, L73–L76) */
.admintabelle caption { caption-side: top; text-align: left; font-weight: 700; padding: var(--kb-a2) var(--kb-a3); }
.uploadinfo { margin-top: var(--kb-a5); padding: var(--kb-a4); border: 1px solid var(--kb-rand-leise); border-radius: var(--kb-radius); background: var(--kb-erfolg-bg); }
.uploadinfo h2 { margin-top: 0; }
.uploadinfo__inhalt { display: flex; flex-wrap: wrap; gap: var(--kb-a4); align-items: flex-start; }
.uploadinfo__inhalt img { flex: none; }
.uploadinfo__inhalt dl { flex: 1 1 16rem; }
.uploadfehler { margin-top: var(--kb-a5); }
.uploadfehler p { margin: 0; }
.uploadfehler p + p { margin-top: var(--kb-a1); }
.uploadfehler__titel { font-weight: 700; }
.uploadfehler__titel img { display: inline; vertical-align: middle; }
.galerie-alles { display: flex; gap: var(--kb-a2); margin: 0 0 var(--kb-a3); justify-content: flex-end; }
.galerie-auswahl { max-width: 32rem; }
.galerieliste { list-style: none; margin: 0 0 var(--kb-a4); padding: 0; display: grid; gap: var(--kb-a3); }
.galeriebild {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kb-a3);
  padding: var(--kb-a3);
  background: var(--kb-flaeche);
  border: 1px solid var(--kb-rand-leise);
  border-radius: var(--kb-radius);
  scroll-margin-top: 4rem;   /* sprungziel location.hash unter der fixierten menueleiste */
}
.galeriebild.ist-gesperrt { background: var(--kb-fehler-bg); }
.galeriebild__vorschau { justify-self: start; padding: 0; border: 1px solid var(--kb-rand); border-radius: var(--kb-radius); background: var(--kb-flaeche-2); cursor: pointer; line-height: 0; }
.galeriebild__vorschau:hover { border-color: var(--kb-text); }
.galeriebild__vorschau:focus-visible { outline: 3px solid var(--kb-fokus); outline-offset: 2px; }
.galeriebild__vorschau img { display: block; max-width: 100%; height: auto; border-radius: var(--kb-radius); }
.galeriebild__textkopf { display: flex; align-items: center; justify-content: space-between; gap: var(--kb-a2); }
.galeriebild__label { font-weight: 600; }
.galeriebild__bildtext { margin: var(--kb-a1) 0 0; overflow-wrap: anywhere; }
.galeriebild__text .feld { margin-bottom: var(--kb-a2); }
.galeriebild__daten .feld { margin-bottom: var(--kb-a2); }
.galeriebild__info > div { grid-template-columns: 7rem minmax(0, 1fr); }
.galeriebild__status { font-weight: 700; }
.galeriebild__status--frei { color: var(--kb-erfolg); }      /* vorher admintxt2 #6DF176 = 1,45:1 (LB7) */
.galeriebild__status--gesperrt { color: var(--kb-fehler); }  /* vorher admintxt3 #F16D6D = 2,94:1 (LB7) */
.formular .galeriebild input[type=button].knopf-icon.knopf-icon { width: auto; flex: none; padding: 0 var(--kb-a3); }   /* schlaegt .formular input:not(...) (0,4,1), sonst volle breite (LB59) */
.galeriebild__aktionen { display: flex; gap: var(--kb-a2); align-items: flex-start; }
.galerie-summe { margin: 0; padding-top: var(--kb-a2); border-top: 2px solid var(--kb-rand-leise); text-align: right; font-variant-numeric: tabular-nums; }
.galerie-summe span { display: block; }
@media (min-width: 64em) {
  .galeriebild { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: start; }
}
.statistik-legende { list-style: none; margin: 0 0 var(--kb-a4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--kb-a2) var(--kb-a5); }
.statistik-legende li { display: flex; align-items: center; gap: var(--kb-a2); }
.statistik-legende__farbe { display: inline-block; width: 1.5rem; height: 1.5rem; border: 1px solid var(--kb-rand); border-radius: 0.25rem; }
.statistik-monat { margin: 0 0 var(--kb-a5); }
.statistik-monat__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--kb-a4); border-bottom: 2px solid var(--kb-rand-leise); margin-bottom: var(--kb-a2); }
.statistik-monat__kopf h3 { margin: 0; font-size: 1.125rem; }
.statistik-monat__summe { margin: 0; font-weight: 700; }
.statistik-tage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); gap: var(--kb-a1); }
.statistik-tag { display: flex; flex-direction: column; align-items: center; padding: var(--kb-a1); border: 1px solid var(--kb-rand-leise); border-radius: 0.25rem; background: var(--kb-flaeche); }
.statistik-tag__datum { font-size: var(--kb-fs-klein); color: var(--kb-text-leise); white-space: nowrap; }
.statistik-tag__wert { font-weight: 700; font-variant-numeric: tabular-nums; }
.statistik-tag--heute { background: var(--kb-erfolg-bg); }   /* vorher #BDEBC1 */
.statistik-tag--max { background: var(--kb-fehler-bg); }      /* vorher #F09191 */
.statistik-legende__farbe.statistik-tag--heute, .statistik-legende__farbe.statistik-tag--max { padding: 0; }
/* Status nicht nur per Farbe (Phase 9, L82, WCAG 1.4.1): sichtbarer Text bzw. Form */
.statusmarke { font-size: var(--kb-fs-klein); font-weight: 700; white-space: nowrap; }
.admintabelle tr.ist-aktuell > :first-child { box-shadow: inset 4px 0 0 var(--kb-warnung); }   /* bearbeitete zeile: balken wie "heute" in termine */
.statistik-tag--heute { border: 2px solid var(--kb-erfolg); }
.statistik-tag--max { border: 2px dashed var(--kb-fehler); }
.statistik-tag--heute.statistik-tag--max { border-style: double; border-width: 4px; }
.monatsnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--kb-a2); margin: var(--kb-a5) 0 var(--kb-a3); }
.monatsnav h1, .monatsnav h2 { margin: 0 var(--kb-a3); min-width: 9em; text-align: center; font-size: 1.25rem; }
@media (max-width: 39.99em) { .monatsnav h2 { order: -1; flex-basis: 100%; margin: 0; } }
.tagesliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kb-rand-leise); }
.tag { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 var(--kb-a3); padding: var(--kb-a2) var(--kb-a2); border-bottom: 1px solid var(--kb-rand-leise); }
.tag--sa { background: var(--kb-erfolg-bg); }   /* vorher #c0feb1 */
.tag--so { background: var(--kb-fehler-bg); }   /* vorher #feb1b1 */
.tag--heute { box-shadow: inset 4px 0 0 var(--kb-rot); }
.tag--heute .tag__kopf { font-weight: 700; }
.tag__kopf { margin: 0; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 var(--kb-a3); }
.tag__nr { font-variant-numeric: tabular-nums; font-weight: 600; }
.tag__feiertag { color: var(--kb-text-leise); }
.eintraege { list-style: none; margin: var(--kb-a2) 0 0; padding: 0; grid-column: 1 / -1; display: grid; gap: var(--kb-a2); }
.eintrag { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kb-a1) var(--kb-a3); padding: var(--kb-a2) var(--kb-a3); background: var(--kb-flaeche); border: 1px solid var(--kb-rand-leise); border-radius: var(--kb-radius); }
.eintrag--kurs { font-style: italic; border-style: dashed; }   /* vorher termin_kurs_txt kursiv */
.eintrag__zeit { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.eintrag__inhalt { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.eintrag__fuer { color: var(--kb-text-leise); }
.eintrag__aktionen { display: flex; gap: var(--kb-a2); }
@media (min-width: 40em) {
  .eintrag { grid-template-columns: 8rem minmax(0, 1fr) auto; align-items: start; }
}

/* Kalender-Popup (admin/kalender.php) */
body.popup { margin: 0; background: var(--kb-bg); color: var(--kb-text); font-family: var(--kb-font); }
.minikalender { padding: var(--kb-a1); }
.minikalender .monatsnav { margin: 0 0 var(--kb-a2); gap: var(--kb-a1); }
.minikalender .monatsnav h1 { font-size: 1rem; min-width: 0; flex: 1 1 100%; order: -1; margin: 0 0 var(--kb-a1); }
.minikalender__monat { width: 100%; border-collapse: collapse; table-layout: fixed; }
.minikalender__monat th, .minikalender__monat td { padding: 0; text-align: center; }
.minikalender__monat th { font-weight: 700; font-size: var(--kb-fs-klein); }
.minikalender__monat abbr { text-decoration: none; }
.minikalender__monat .sa { background: var(--kb-erfolg-bg); }
.minikalender__monat .so { background: var(--kb-fehler-bg); }
.kaltag {
  width: 100%;
  min-height: var(--kb-ziel);
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--kb-text);
  background: transparent;
  border: 1px solid var(--kb-rand-leise);
  border-radius: var(--kb-radius);
  cursor: pointer;
}
.kaltag:hover { background: var(--kb-warnung-bg); border-color: var(--kb-text); }
.kaltag:focus-visible { outline: 3px solid var(--kb-fokus); outline-offset: 1px; }
.kaltag[aria-current="date"] { font-weight: 700; border: 2px solid var(--kb-rot); }

/* YouTube erst nach Klick (DSGVO, YoutubeZweiKlick): Platzhalter und Video im 16:9-Format */
.yt-zweiklick, .yt-video {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: var(--kb-a4) 0;
  border: 0;
  border-radius: var(--kb-radius);
}
.yt-zweiklick {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kb-a4);
  background: #000000;
  color: #ffffff;
  text-align: center;
  font-size: var(--kb-fs-klein);
  line-height: 1.5;
}
.yt-zweiklick a:link, .yt-zweiklick a:visited { color: #ffffff; }
.yt-zweiklick :focus-visible { outline-color: #ffffff; }
@media (max-width: 24em) { .yt-zweiklick { aspect-ratio: auto; } }   /* Text braucht auf 320 px mehr Höhe */

/* ---------- 5 Altklassen der Module ----------
   Phase 9 (L81): nur noch die belegt genutzten Altklassen – artikel_text/artikel_toptextbig (Artikel in
   Frontend und Admin-Vorschau), artikel_back (Abbruchmeldung von tuersteher() in Gutschein und Kursanzeige).
   Die uebrigen 30 Klassen kamen in keiner Ausgabe, keinem DB-Inhalt und keinem aktiven Quelltext mehr vor. */
.artikel_back, .artikel_text {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.artikel_toptextbig {
  font-family: inherit;
  font-size: var(--kb-fs-h2);
  font-weight: 600;
  line-height: 1.25;
  color: inherit;
}
.artikel_back { background-color: var(--kb-flaeche); padding: var(--kb-a3); }
.modul table { max-width: 100%; }

/* ---------- 6 Druck (Grundlage; Feinschliff Phase 6) ---------- */
@media print {
  :root, :root[data-theme="dark"] {
    --kb-bg: #ffffff; --kb-flaeche: #ffffff; --kb-flaeche-2: #eeeeee;
    --kb-text: #000000; --kb-text-leise: #333333; --kb-link: #000000;
  }
  @page { margin: 15mm 15mm 18mm; }
  body { background: #ffffff; color: #000000; font-size: 11pt; line-height: 1.45; }
  /* bedienelemente ohne wert auf papier */
  .skiplink, .hauptnav, .seitenleiste, .fuss__links, .knopf-nav,
  .brotkrumen, .buchung__start, .aktionen, .grossbild__nav, .galerie-kategorien,
  .yt-zweiklick, .feld__hilfe, noscript, .hinweis--warnung { display: none !important; }
  .kopf { background: none; }
  .kopf__innen { padding: 0 0 6mm; }
  .kopf__logo img { display: none; }
  .nur-druck { display: block; }
  .kopf__name { margin: 0; font-size: 16pt; font-weight: 700; color: #000000; }
  .seite { display: block; max-width: none; padding: 0; }
  .karte, .artikel, .modul, .kurskarte { box-shadow: none; border-radius: 0; padding: 0; margin-bottom: 6mm; overflow: visible; background: none; }
  .kurskarte, .kurskarte--liste { border-left: 0; }
  .fuss { background: none; color: #000000; border-top: 1px solid #000000; }
  .fuss__innen { padding: 3mm 0 0; }
  a:link, a:visited { color: #000000; }
  /* seitenumbrueche */
  h1, h2, h3 { break-after: avoid; }
  /* nur kleine einheiten zusammenhalten; ganze karten duerfen umbrechen (sonst leere seiten) */
  .kurskopf, figure, .feld, .feldreihe, .zusammenfassung > div, .auswahl, .hinweis, .preisliste tr, .kurskarte { break-inside: avoid; }
  /* formulare: felder als rahmen sichtbar */
  .formular input:not([type=checkbox]):not([type=hidden]):not(.zaehler), .formular select, .formular textarea {
    border: 1px solid #000000 !important; background: none !important; color: #000000; min-height: 0;
  }
  .formular input:disabled { border-style: dashed !important; }
  .hinweis { border: 1px solid #000000; border-left-width: 4px; background: none; color: #000000; }
  .artikelbild { border: 0; padding: 0; }
  .artikelbild img { width: auto; max-height: 70mm; }
  .grossbild { position: static; width: auto; max-height: none; box-shadow: none; padding: 0; }
  .grossbild__bild img { max-height: 180mm; }
}