/* =========================================================================
   Schulungsverwaltung – Gestaltungssystem
   Markenfarbe #ee0000. Hell/Dunkel über prefers-color-scheme.
   Namenskonvention: BEM-artig, deutsch (block__element--modifikator).
   ========================================================================= */

/* ---------- Design-Tokens ---------------------------------------------- */
:root {
  color-scheme: light;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;

  --marke: #ee0000;
  --marke-dunkel: #c40000;
  --marke-text: #c00000;
  --marke-hell: #fdecec;
  --marke-rand: #f5b5b5;
  --marke-kontrast: #ffffff;

  --grund: #f6f6f7;
  --flaeche: #ffffff;
  --flaeche-2: #f3f3f4;
  --flaeche-3: #e9e9ec;
  --text: #18181b;
  --text-2: #4b4b55;
  --text-3: #71717a;
  --linie: #e4e4e7;
  --linie-stark: #d4d4d8;

  --erfolg: #1a7f37; --erfolg-hell: #e6f4ea; --erfolg-rand: #a6d9b3;
  --warnung: #9a5b00; --warnung-hell: #fdf3e1; --warnung-rand: #f3d8a3;
  --fehler: #b3261e; --fehler-hell: #fbeceb; --fehler-rand: #f1b8b4;
  --info: #1d4ed8; --info-hell: #e8effd; --info-rand: #b9cdf7;

  --radius: 12px;
  --radius-s: 8px;
  --radius-xs: 6px;
  --schatten-1: 0 1px 2px rgba(24, 24, 27, .06), 0 1px 3px rgba(24, 24, 27, .08);
  --schatten-2: 0 6px 18px rgba(24, 24, 27, .08), 0 1px 3px rgba(24, 24, 27, .06);
  --fokus: 0 0 0 3px rgba(238, 0, 0, .28);
  --breite: 1160px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --marke-text: #ff6b6b;
    --marke-hell: #3a1212;
    --marke-rand: #6b1f1f;
    --grund: #111113;
    --flaeche: #1b1b1f;
    --flaeche-2: #232328;
    --flaeche-3: #2c2c33;
    --text: #f4f4f5;
    --text-2: #c9c9d1;
    --text-3: #9a9aa5;
    --linie: #2e2e35;
    --linie-stark: #3d3d46;
    --erfolg: #4ade80; --erfolg-hell: #12301c; --erfolg-rand: #1f5a33;
    --warnung: #fbbf24; --warnung-hell: #33270a; --warnung-rand: #5c4612;
    --fehler: #f87171; --fehler-hell: #3a1515; --fehler-rand: #6b2323;
    --info: #7aa2f7; --info-hell: #14213d; --info-rand: #24406e;
    --schatten-1: 0 1px 2px rgba(0, 0, 0, .5);
    --schatten-2: 0 6px 18px rgba(0, 0, 0, .5);
    --fokus: 0 0 0 3px rgba(255, 107, 107, .4);
  }
}

/* ---------- Grundlagen -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.01em; }
h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 700; }
h2 { font-size: 1.375rem; font-weight: 650; }
h3, .h3 { font-size: 1.0625rem; font-weight: 650; margin-bottom: .5rem; }
p { margin: 0 0 1rem; }
a { color: var(--marke-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--marke-dunkel); }
code { font-family: var(--mono); font-size: .92em; background: var(--flaeche-2); padding: .1em .35em; border-radius: 4px; }
pre.code { background: var(--flaeche-2); padding: 14px 16px; border-radius: var(--radius-s); overflow-x: auto; }
pre.code code { background: none; padding: 0; }
abbr.pflicht { text-decoration: none; color: var(--marke-text); font-weight: 700; }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: var(--radius-xs); }
.ikon { width: 1.1em; height: 1.1em; vertical-align: -.2em; flex: none; }
.ikon--klein { width: .85em; height: .85em; vertical-align: -.05em; }
.ikonen-sprite { display: none; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.rechts { text-align: right; }
.tabellarisch { font-variant-numeric: tabular-nums; }
.gedaempft { color: var(--text-3); }
.kleintext { font-size: .875rem; color: var(--text-2); }
.ueberzeile { margin: 0 0 .35rem; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--marke-text); }
.einleitung { font-size: 1.0625rem; color: var(--text-2); max-width: 62ch; }
.anzahl-zeile { color: var(--text-3); font-size: .9rem; margin: 0 0 12px; }

.sprunglink {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--flaeche); color: var(--text); padding: 8px 12px; border-radius: var(--radius-xs); box-shadow: var(--schatten-2);
}
.sprunglink:focus { top: 12px; }

.systembanner {
  background: repeating-linear-gradient(135deg, #fde68a 0 12px, #fcd34d 12px 24px);
  color: #422006; font-size: .8125rem; font-weight: 600; text-align: center; padding: 4px 12px;
}

/* ---------- Kopf & Navigation ------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--flaeche) 92%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  max-width: var(--breite); margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: none; }
.marke__logo { height: 40px; width: auto; max-width: 160px; object-fit: contain; }
.marke__text { display: flex; flex-direction: column; line-height: 1.15; }
.marke__name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.marke__org { font-size: .78rem; color: var(--text-3); }

/* Links folgen der Marke; der Konto-Bereich (Name + Abmelden bzw. Anmelden) sitzt
   über margin-left:auto immer am rechten Rand - auch wenn die Zeile umbricht. */
.nav { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; }
.nav__links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav__konto { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.nav__link {
  padding: 8px 12px; border-radius: var(--radius-s); color: var(--text-2); text-decoration: none; font-weight: 500; font-size: .95rem;
  position: relative;
}
.nav__link:hover { color: var(--text); background: var(--flaeche-2); }
.nav__link--aktiv { color: var(--text); font-weight: 650; }
.nav__link--aktiv::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--marke);
}
.nav__trenner { width: 1px; height: 22px; background: var(--linie-stark); margin: 0 6px; }
.nav__benutzer { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.nav__form { display: inline; }
.nav-umschalter { display: none; }

@media (max-width: 860px) {
  /* Mobil: kein klebender Kopf, kein Logo - Titel und Menüknopf in einer Zeile */
  .kopf { position: static; backdrop-filter: none; background: var(--flaeche); }
  .kopf__innen { gap: 12px; padding: 10px 16px; }
  .marke__logo { display: none; }
  .marke__name { font-size: 1rem; }
  .marke__org { font-size: .72rem; }
  .nav-umschalter {
    display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--linie-stark); color: var(--text);
    border-radius: var(--radius-s); padding: 8px 12px; font: inherit; cursor: pointer; margin-left: auto;
  }
  .nav-umschalter__balken { width: 18px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
  .nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 4px; border-top: 1px solid var(--linie); }
  .nav.nav--offen { display: flex; }
  .nav__links { flex-direction: column; align-items: stretch; }
  .nav__konto { margin-left: 0; justify-content: space-between; padding: 10px 12px 6px; border-top: 1px solid var(--linie); margin-top: 6px; }
  .nav__link--aktiv::after { display: none; }
  .nav__link--aktiv { background: var(--marke-hell); color: var(--marke-text); }
  .nav__trenner { display: none; }
}

/* ---------- Layout ------------------------------------------------------- */
.inhalt { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 32px 24px 56px; flex: 1 0 auto; }
.schmal { max-width: 640px; margin: 0 auto; }
.schmal--enger { max-width: 460px; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 32px; align-items: start; }
@media (max-width: 900px) { .zweispaltig { grid-template-columns: 1fr; } }
.abschnitt { margin-top: 36px; }
.abschnitt__titel { display: flex; align-items: center; gap: 10px; }

.seitenkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.seitenkopf h1 { margin-bottom: .25rem; }
.seitenkopf__text { color: var(--text-2); margin: 0; }
.seitenkopf__etiketten { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.brotkrumen { display: flex; gap: 8px; align-items: center; font-size: .875rem; color: var(--text-3); margin-bottom: 18px; flex-wrap: wrap; }
.brotkrumen a { color: var(--text-2); text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; }
.brotkrumen [aria-current] { color: var(--text); font-weight: 500; }

/* ---------- Meldungen ---------------------------------------------------- */
.meldungen { display: grid; gap: 10px; margin-bottom: 20px; }
.meldung {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-s);
  border: 1px solid var(--linie); background: var(--flaeche);
}
.meldung__ikon { margin-top: 3px; }
.meldung__text { margin: 0; flex: 1; }
.meldung__schliessen { background: none; border: 0; font-size: 1.25rem; line-height: 1; color: inherit; cursor: pointer; padding: 0 2px; opacity: .7; }
.meldung__schliessen:hover { opacity: 1; }
.meldung--erfolg { background: var(--erfolg-hell); border-color: var(--erfolg-rand); color: var(--erfolg); }
.meldung--fehler { background: var(--fehler-hell); border-color: var(--fehler-rand); color: var(--fehler); }
.meldung--warnung { background: var(--warnung-hell); border-color: var(--warnung-rand); color: var(--warnung); }
.meldung--hinweis { background: var(--info-hell); border-color: var(--info-rand); color: var(--info); }
.meldung--erfolg .meldung__text, .meldung--fehler .meldung__text, .meldung--warnung .meldung__text, .meldung--hinweis .meldung__text { color: var(--text); }
.meldung--abstand { margin-bottom: 24px; } /* einzelne Meldung vor Formular/Inhalt (außerhalb von .meldungen) */

/* ---------- Knöpfe -------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-s); border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: .95rem; line-height: 1.2; cursor: pointer; text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s, transform .05s;
  white-space: nowrap;
}
.knopf:active { transform: translateY(1px); }
.knopf--primaer { background: var(--marke); color: var(--marke-kontrast); }
.knopf--primaer:hover { background: var(--marke-dunkel); color: var(--marke-kontrast); }
.knopf--geist { background: var(--flaeche); color: var(--text); border-color: var(--linie-stark); }
.knopf--geist:hover { background: var(--flaeche-2); color: var(--text); }
.knopf--gefahr-geist { background: transparent; color: var(--fehler); border-color: transparent; }
.knopf--gefahr-geist:hover { background: var(--fehler-hell); border-color: var(--fehler-rand); color: var(--fehler); }
.knopf--gefahr { background: var(--fehler); color: #fff; }
.knopf--gefahr:hover { background: color-mix(in srgb, var(--fehler) 85%, #000); color: #fff; }
.knopf:disabled { opacity: .6; cursor: progress; }
.knopf--klein { padding: 6px 10px; font-size: .85rem; border-radius: var(--radius-xs); }
.knopf--gross { padding: 13px 22px; font-size: 1rem; }
.knopf--voll { width: 100%; }
.knopfleiste { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.knopfleiste--mittig { justify-content: center; }
.inline-form { display: inline; }
.aktionen { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }

/* ---------- Etiketten & Zähler ------------------------------------------- */
.etikett {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; background: var(--flaeche-2); color: var(--text-2); border: 1px solid var(--linie); white-space: nowrap;
}
.etikett--klein { font-size: .72rem; padding: 2px 7px; }
.etikett--preis { background: var(--marke-hell); color: var(--marke-text); border-color: var(--marke-rand); }
.etikett--kostenfrei { background: var(--erfolg-hell); color: var(--erfolg); border-color: var(--erfolg-rand); }
.etikett--aktiv { background: var(--erfolg-hell); color: var(--erfolg); border-color: var(--erfolg-rand); }
.etikett--warnung { background: var(--warnung-hell); color: var(--warnung); border-color: var(--warnung-rand); }
.etikett--neutral { background: var(--flaeche-3); color: var(--text-2); }
.zaehler {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px;
  background: var(--flaeche-3); color: var(--text-2); font-size: .8rem; font-weight: 650; font-variant-numeric: tabular-nums; text-decoration: none;
}
.zaehler--gross { font-size: .95rem; height: 28px; min-width: 28px; }
a.zaehler:hover { background: var(--marke-hell); color: var(--marke-text); }

/* ---------- Held (Startseite) -------------------------------------------- */
.held { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 28px; align-items: end; margin-bottom: 28px; }
@media (max-width: 800px) { .held { grid-template-columns: 1fr; } }
.held__titel { margin-bottom: .6rem; }
.held__untertitel { color: var(--text-2); font-size: 1.0625rem; max-width: 60ch; margin: 0; }
.held__hinweis {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius);
  background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten-1); font-size: .9rem; color: var(--text-2);
}
.held__hinweis .ikon { color: var(--marke); margin-top: 3px; width: 1.3em; height: 1.3em; }
.held__hinweis p { margin: 0; }

/* ---------- Karten -------------------------------------------------------- */
.kartenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten-1);
}
.karte--schulung { transition: transform .15s, box-shadow .15s, border-color .15s; }
.karte--schulung:hover { transform: translateY(-1px); box-shadow: var(--schatten-2); border-color: var(--linie-stark); }
.karte__link { display: flex; gap: 20px; padding: 18px 20px; color: inherit; text-decoration: none; }
.karte--anmeldung { display: flex; gap: 20px; padding: 18px 20px; }
.karte__inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.karte__kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.karte__datum { font-size: .875rem; color: var(--text-3); font-weight: 500; }
.karte__titel { font-size: 1.2rem; margin: 0; }
.karte__auszug { color: var(--text-2); margin: 4px 0 0; font-size: .95rem; }
.karte__aktion { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 600; color: var(--marke-text); font-size: .95rem; }
.karte--schulung:hover .karte__aktion .ikon { transform: translateX(3px); }
.karte__aktion .ikon { transition: transform .15s; }
.karte__aktionen { margin-top: 8px; }
.karte__hinweis {
  display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0; padding: 8px 12px; border-radius: var(--radius-xs);
  background: var(--info-hell); color: var(--text-2); font-size: .85rem; line-height: 1.45;
}
.karte__hinweis .ikon { color: var(--info); margin-top: 2px; }
.karte--formular { padding: 24px; }

/* Hinweisbox in Formularen (z. B. Zugangslink per E-Mail) */
.hinweisbox {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-s);
  background: var(--info-hell); border: 1px solid var(--info-rand); font-size: .9rem; color: var(--text-2);
}
.hinweisbox .ikon { color: var(--info); margin-top: 3px; width: 1.25em; height: 1.25em; }
.hinweisbox p { margin: 0; }
.hinweisbox strong { color: var(--text); }
@media (max-width: 560px) {
  /* Kompakte Schulungsliste: kleine Datumskachel links, nur Titel + Kernangaben */
  .inhalt { padding: 16px 14px 40px; }
  .held { gap: 10px; margin-bottom: 14px; }
  .held__untertitel { font-size: .95rem; }
  .held__hinweis { padding: 10px 12px; font-size: .85rem; }
  .anzahl-zeile { margin-bottom: 8px; }
  .kartenliste { gap: 8px; }
  .karte--schulung .karte__link { padding: 10px 12px; gap: 12px; align-items: flex-start; }
  .karte--schulung .datumskachel { width: 50px; padding: 5px 4px; }
  .karte--schulung .datumskachel__tag { font-size: 1.35rem; }
  .karte--schulung .datumskachel__wochentag, .karte--schulung .datumskachel__monat { font-size: .68rem; }
  .karte--schulung .karte__inhalt { gap: 3px; }
  .karte--schulung .karte__kopfzeile { justify-content: flex-start; gap: 8px; }
  .karte--schulung .karte__datum { display: none; }
  .karte--schulung .karte__titel { font-size: 1rem; }
  .karte--schulung .meta { font-size: .8rem; gap: 2px 12px; }
  .karte--schulung .karte__auszug, .karte--schulung .karte__aktion { display: none; }
  .karte--schulung .karte__hinweis { font-size: .76rem; padding: 5px 8px; margin-top: 4px; }
  .etikett { font-size: .74rem; padding: 2px 8px; }
  /* Meine Anmeldungen: Kachel als Zeile über dem Inhalt */
  .karte--anmeldung { flex-direction: column; gap: 12px; padding: 14px; }
  .karte--anmeldung .datumskachel { flex-direction: row; gap: 8px; width: auto; padding: 6px 12px; }
}

.datumskachel {
  flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 6px; border-radius: var(--radius-s); background: var(--marke-hell); color: var(--marke-text); line-height: 1.05;
  border: 1px solid var(--marke-rand);
}
.datumskachel__wochentag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.datumskachel__tag { font-size: 1.85rem; font-weight: 750; letter-spacing: -.02em; }
.datumskachel__monat { font-size: .78rem; font-weight: 600; }

.meta { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px 18px; flex-wrap: wrap; color: var(--text-2); font-size: .9rem; }
.meta__eintrag { display: inline-flex; align-items: center; gap: 6px; }
.meta__eintrag .ikon { color: var(--text-3); }

/* ---------- Leere Zustände ------------------------------------------------ */
.leer { text-align: center; padding: 56px 24px; border: 1px dashed var(--linie-stark); border-radius: var(--radius); background: var(--flaeche); }
.leer__ikon { width: 56px; height: 56px; color: var(--text-3); margin-bottom: 8px; }
.leer__titel { font-size: 1.15rem; }
.leer__text { color: var(--text-2); max-width: 46ch; margin: 0 auto 16px; }
.leer--klein { padding: 20px; font-size: .95rem; color: var(--text-2); margin: 0; }

/* ---------- Detailseite --------------------------------------------------- */
.detail__titel { margin-bottom: .75rem; }
.detail__etiketten { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 28px; }
.fakten__eintrag { padding: 12px 14px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-s); }
.fakten__eintrag dt { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 4px; }
.fakten__eintrag dt .ikon { color: var(--marke); }
.fakten__eintrag dd { margin: 0; font-weight: 500; }
.detail__beschreibung { margin-bottom: 28px; max-width: 70ch; }
.detail__beschreibung p { color: var(--text-2); }
.hinweiskasten { padding: 18px 20px; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); }
.hakenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--text-2); font-size: .95rem; }
.hakenliste li { position: relative; padding-left: 26px; }
.hakenliste li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--erfolg-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231a7f37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}
.seitenkarte {
  position: sticky; top: 84px; padding: 24px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten-2); border-top: 4px solid var(--marke);
}
@media (max-width: 900px) { .seitenkarte { position: static; } }
.seitenkarte__titel { font-size: 1.25rem; margin-bottom: .25rem; }
.seitenkarte__text { font-size: .875rem; color: var(--text-3); margin-bottom: 16px; }
.datenschutzhinweis { font-size: .8rem; color: var(--text-3); margin: 14px 0 0; line-height: 1.5; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Hinweistext unmittelbar vor dem Anmeldeknopf */
.anmeldehinweis { font-size: .82rem; color: var(--text-2); margin: 0; line-height: 1.5; }

/* Ausklappbare Rechtstexte (Vertragsbedingungen, Datenschutz) */
.rechtsinfo { border-top: 1px solid var(--linie); padding-top: 10px; font-size: .82rem; color: var(--text-2); }
.rechtsinfo + .rechtsinfo { padding-top: 8px; }
.rechtsinfo__titel { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: center; gap: 6px; }
.rechtsinfo__titel::-webkit-details-marker { display: none; }
.rechtsinfo__titel::before { content: "+"; width: 1em; font-weight: 700; color: var(--marke-text); }
.rechtsinfo[open] .rechtsinfo__titel::before { content: "\2212"; }  /* Minuszeichen U+2212 */
.rechtsinfo__titel:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: var(--radius-xs); }
.rechtsinfo__liste { margin: 10px 0 4px; display: grid; gap: 10px; line-height: 1.55; }
.rechtsinfo__liste > div { display: grid; gap: 2px; }
.rechtsinfo__liste dt { font-weight: 600; color: var(--text); }
.rechtsinfo__liste dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Formulare ----------------------------------------------------- */
.formular { display: grid; gap: 16px; }
.formular--breit { gap: 24px; }
/* align-content: start - sonst zieht der Grid-Standard (stretch) die Zeilen eines
   Feldes auseinander, wenn das Nachbarfeld in derselben Reihe höher ist (Hilfetext):
   Beschriftung und Eingabe rutschten nach unten und die Eingabe wurde höher. */
.feld { display: grid; gap: 6px; min-width: 0; align-content: start; }
.feld--halb { max-width: 320px; }
.feld__label { font-weight: 600; font-size: .92rem; }
.eingabe {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linie-stark); border-radius: var(--radius-s);
  background: var(--flaeche); color: var(--text); font: inherit; line-height: 1.4; transition: border-color .15s, box-shadow .15s;
}
.eingabe:hover { border-color: var(--text-3); }
.eingabe:focus { outline: none; border-color: var(--marke); box-shadow: var(--fokus); }
.eingabe::placeholder { color: var(--text-3); opacity: .8; }
textarea.eingabe { resize: vertical; min-height: 120px; }
.auswahl { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: .92rem; cursor: pointer; }
.auswahl__kasten { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--marke); cursor: pointer; }
.auswahl__kasten:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: 3px; }
select.eingabe { appearance: auto; }
.feld--fehler .eingabe { border-color: var(--fehler); }
.feld__hilfe { margin: 0; font-size: .82rem; color: var(--text-3); }
.feld__fehler { margin: 0; font-size: .85rem; color: var(--fehler); font-weight: 500; display: flex; gap: 6px; align-items: flex-start; }
.feld__fehler .ikon { margin-top: 2px; }
.feld--id .eingabe { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.feldreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Mehrere Felder/Reihen als Block innerhalb einer Feldgruppe (z. B. die Felder je Format):
   ohne eigenes Grid würden die Kinder ohne Abstand aneinanderkleben. */
.feldstapel { display: grid; gap: 16px; min-width: 0; }
.feldreihe--drei { grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 560px) { .feldreihe, .feldreihe--drei { grid-template-columns: 1fr; } }
/* Nebeneinanderliegende Felder teilen sich die drei Zeilen (Beschriftung / Eingabe /
   Hilfe). Damit liegen die Eingaben auf gleicher Höhe, auch wenn eine Beschriftung
   umbricht oder ein Hilfetext länger ist. Nur ab zwei Spalten - untereinander gilt
   wieder der normale Feldabstand. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 561px) {
    .feldreihe { grid-template-rows: auto auto auto; row-gap: 6px; }
    .feldreihe > .feld { grid-row: span 3; grid-template-rows: subgrid; }
  }
}
.feldgruppe { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; }
.feldgruppe__titel { font-weight: 700; font-size: 1rem; padding: 0; margin-bottom: 2px; color: var(--text); }
.feldgruppe + .feldgruppe { padding-top: 20px; border-top: 1px solid var(--linie); }

/* ---------- Login ------------------------------------------------------- */
.login { text-align: center; }
.login__ikon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: var(--marke-hell); color: var(--marke-text); margin-bottom: 10px; }
.login__ikon .ikon { width: 22px; height: 22px; }
.login__titel { font-size: 1.4rem; }
.login__text { color: var(--text-2); font-size: .92rem; margin-bottom: 22px; }
.login .formular { text-align: left; }

/* ---------- Bestätigung --------------------------------------------------- */
.bestaetigung { max-width: 720px; margin: 0 auto; display: grid; gap: 22px; }
.bestaetigung__kopf { text-align: center; }
.erfolgskreis {
  display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--erfolg-hell); color: var(--erfolg); margin-bottom: 12px; animation: einblenden .5s ease-out;
}
.erfolgskreis .ikon { width: 32px; height: 32px; }
@keyframes einblenden { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bestaetigung__text { color: var(--text-2); font-size: 1.05rem; max-width: 58ch; margin: 0 auto; }
.id-kasten { padding: 22px 24px; border-radius: var(--radius); background: var(--flaeche); border: 2px solid var(--marke); text-align: center; }
.id-kasten__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 600; margin: 0 0 8px; }
.id-kasten__zeile { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.id-kasten__id { font-size: clamp(1.5rem, 1rem + 2vw, 2.2rem); font-weight: 700; letter-spacing: .08em; background: none; padding: 0; }
.id-kasten__hinweis { margin: 12px 0 0; font-size: .9rem; color: var(--text-2); }
.zusammenfassung, .naechste-schritte { padding: 20px 24px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.datenliste { margin: 0; display: grid; gap: 8px; }
.datenliste > div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; }
.datenliste dt { color: var(--text-3); font-size: .9rem; }
.datenliste dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.datenliste--klein { margin-top: 6px; font-size: .9rem; }
.datenliste--klein > div { grid-template-columns: 120px 1fr; gap: 8px; }
@media (max-width: 480px) { .datenliste > div, .datenliste--klein > div { grid-template-columns: 1fr; gap: 0; } }
.schrittliste { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 8px; color: var(--text-2); }

/* ---------- Reiter & Werkzeugleiste -------------------------------------- */
.reiter { display: inline-flex; gap: 4px; padding: 4px; background: var(--flaeche-2); border-radius: var(--radius-s); margin-bottom: 18px; }
.reiter__link {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-xs); text-decoration: none;
  color: var(--text-2); font-weight: 600; font-size: .92rem;
}
.reiter__link:hover { color: var(--text); }
.reiter__link--aktiv { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-1); }
.reiter__link--aktiv .zaehler { background: var(--marke-hell); color: var(--marke-text); }
.reiter--klein { margin-bottom: 0; }
.reiter--klein .reiter__link { padding: 6px 12px; font-size: .875rem; }
.werkzeugleiste { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 18px; }
.werkzeugleiste .kleintext { margin: 0; }

/* ---------- Tabellen ------------------------------------------------------ */
.tabellenhuelle { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabelle th, .tabelle td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.tabelle thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 650; background: var(--flaeche-2); white-space: nowrap; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle--zeilen tbody tr:hover { background: var(--flaeche-2); }
.tabelle--klickbar tbody tr[data-href] { cursor: pointer; }
.tabelle--klickbar tbody tr[data-href]:hover .tabelle__haupt { color: var(--marke-text); text-decoration: underline; }
.tabelle--kompakt th, .tabelle--kompakt td { padding: 8px 12px; }
.tabelle--mittig td { vertical-align: middle; } /* einzeilige Zellen neben Knöpfen/Zählern mittig ausrichten */
.tabelle__haupt { font-weight: 600; color: var(--text); text-decoration: none; }
a.tabelle__haupt:hover { color: var(--marke-text); }
.tabelle__neben { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: .8rem; }
.tabelle__nebenlink { color: var(--text-3); }

/* Breite Tabellen (Teilnehmende) klappen stufenweise zusammen statt auf einmal: .falte-aus-N blendet eine
   Spalte ab Stufe N aus, .falte-ein-N zeigt den Ersatz (Zeile unter dem Namen bzw. unter der E-Mail) ab
   Stufe N. Stufe 1 bis 1200px (unter der vollen Inhaltsbreite), Stufe 2 bis 1080px, Stufe 3 bis 800px.
   Die Werte stehen mehrfach im Markup, sichtbar ist immer nur eine Fassung. */
.tabelle__details { display: none; gap: 2px; margin-top: 4px; font-size: .82rem; color: var(--text-2); overflow-wrap: anywhere; }
.tabelle__details code { font-size: .8rem; }
.tabelle__unterzeile { margin-top: 3px; font-size: .82rem; color: var(--text-2); overflow-wrap: anywhere; }
.falte-ein-1, .falte-ein-2, .falte-ein-3 { display: none; }
@media (max-width: 1200px) {
  .falte-aus-1 { display: none; }
  .falte-ein-1 { display: revert; }
  .tabelle__details { display: grid; }
}
@media (max-width: 1080px) {
  .falte-aus-2 { display: none; }
  .falte-ein-2 { display: revert; }
}
@media (max-width: 800px) {
  .falte-aus-3 { display: none; }
  .falte-ein-3 { display: revert; }
}

/* Schulungsliste der Verwaltung (admin/uebersicht.html): Termin zweizeilig (Datum + Uhrzeit),
   damit die Tabelle ohne Querscrollen auskommt; ab mittlerer Breite Aktionsknöpfe nur als Ikon
   (Text bleibt für Vorleseprogramme), bis 900px jede Zeile als gestapelte Karte. */
.tabelle__zeit { display: block; font-size: .8rem; font-weight: 400; color: var(--text-3); margin-top: 2px; }
.tabelle--schulungen .aktionen { flex-wrap: nowrap; } /* beide Knöpfe nebeneinander, das Thema bricht stattdessen um */
.tabelle--schulungen .tabelle__anzahl { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1080px) {
  .tabelle--schulungen .aktionen .knopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabelle--schulungen .aktionen .knopf--klein { padding: 6px 8px; }
  .tabelle--schulungen th, .tabelle--schulungen td { padding-left: 10px; padding-right: 10px; }
  .tabelle--schulungen .aktionen .ikon { width: 1.25em; height: 1.25em; }
}
@media (max-width: 900px) {
  .tabelle--schulungen, .tabelle--schulungen tbody { display: block; }
  .tabelle--schulungen thead { display: none; }
  .tabelle--schulungen tbody tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: start;
    grid-template-areas: "thema thema anzahl" "termin termin anzahl" "format kosten kosten" "aktionen aktionen aktionen";
    padding: 12px 14px; border-bottom: 1px solid var(--linie);
  }
  .tabelle--schulungen tbody tr:last-child { border-bottom: 0; }
  .tabelle--schulungen td { display: block; padding: 0; border: 0; }
  .tabelle--schulungen .tabelle__thema { grid-area: thema; font-size: 1rem; }
  .tabelle--schulungen .tabelle__termin { grid-area: termin; white-space: normal; font-size: .85rem; color: var(--text-2); }
  .tabelle--schulungen .tabelle__zeit { display: inline; font-size: inherit; color: inherit; margin: 0; }
  .tabelle--schulungen .tabelle__zeit::before { content: " · "; }
  .tabelle--schulungen .tabelle__format { grid-area: format; }
  .tabelle--schulungen .tabelle__kosten { grid-area: kosten; }
  .tabelle--schulungen .tabelle__anzahl { grid-area: anzahl; text-align: right; }
  .tabelle--schulungen .tabelle__anzahl .kleintext { display: block; font-size: .75rem; margin-top: 2px; }
  .tabelle--schulungen .tabelle__aktionen { grid-area: aktionen; margin-top: 4px; }
  .tabelle--schulungen .aktionen { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; }
}
.zeile--dublette { background: var(--warnung-hell); }
.zeile--dublette:hover { background: var(--warnung-hell) !important; }
.zeile--gedaempft { color: var(--text-3); }

/* ---------- Kennzahlen ---------------------------------------------------- */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 24px; }
.kennzahl { padding: 16px 18px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); display: grid; gap: 2px; }
.kennzahl__wert { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.kennzahl__wert--text { font-size: 1.4rem; }
.kennzahl__label { font-size: .85rem; font-weight: 600; color: var(--text-2); }
.kennzahl__neben { font-size: .8rem; color: var(--text-3); }
.kennzahlen--klein .kennzahl { padding: 12px 16px; }
.kennzahlen--klein .kennzahl__wert { font-size: 1.5rem; }

/* ---------- Gruppen (Teilnehmende) --------------------------------------- */
.gruppe { margin-bottom: 22px; }
.gruppe__kopf { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.gruppe__titel { font-size: 1.1rem; margin: 0; display: flex; align-items: center; gap: 10px; }
.gruppe__merkmale { margin: 2px 0 0; font-size: .82rem; color: var(--text-3); }
.gruppenmarke {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px;
  background: var(--marke-hell); color: var(--marke-text); font-weight: 700; font-size: .85rem; border: 1px solid var(--marke-rand);
}
.gruppenmarke--gross { width: 36px; height: 36px; font-size: 1rem; border-radius: 10px; }
.ausklapp { margin-top: 24px; }
.ausklapp__titel { cursor: pointer; font-weight: 600; padding: 10px 0; display: flex; align-items: center; gap: 10px; }
.ausklapp[open] .ausklapp__titel { margin-bottom: 10px; }

/* ---------- Diagramme (Berichte) ------------------------------------------ */
.diagrammraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .diagrammraster { grid-template-columns: 1fr; } }
.diagrammkarte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 20px 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.diagrammkarte__kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.diagrammkarte__titel { font-size: 1.05rem; margin: 0; }
/* min-width: 0 ist Pflicht: als Grid-Element wuerde .diagramm sonst nie schmaler als die vom Chart gesetzte
   Canvas-Pixelbreite, die Karte bliebe beim Verkleinern des Fensters auf der alten Breite haengen und ragt
   ueber die Nachbarkarte (Chart.js misst den Elternknoten, nicht die Grid-Spur). */
.diagramm { position: relative; height: 280px; min-width: 0; }
.diagramm canvas { max-width: 100%; }
.diagrammkarte__hinweis { margin: 0; font-size: .8rem; color: var(--text-3); }
.diagrammkarte__tabelle { max-height: 280px; overflow: auto; }

/* ---------- Fehlerseite -------------------------------------------------- */
.fehlerseite { text-align: center; padding: 48px 0; }
.fehlerseite__code { font-size: 5rem; font-weight: 800; letter-spacing: -.04em; color: var(--marke-hell); margin: 0; line-height: 1; -webkit-text-stroke: 2px var(--marke-rand); }
.fehlerseite__titel { margin-top: 8px; }
.fehlerseite__text { color: var(--text-2); max-width: 50ch; margin: 0 auto; }

/* ---------- Fuß: kurze Seiten -> am Ende des Viewports, lange Seiten -> unter dem Inhalt */
.fuss { margin-top: auto; border-top: 1px solid var(--linie); background: var(--flaeche); }
.fuss__innen { max-width: var(--breite); margin: 0 auto; padding: 20px 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: var(--text-3); }
.fuss__text { margin: 0; }
.fuss__links { display: flex; gap: 18px; }
.fuss__links a { color: var(--text-2); text-decoration: none; }
.fuss__links a:hover { text-decoration: underline; }

/* ---------- Bestätigungsdialog ------------------------------------------- */
.dialog {
  border: 0; padding: 0; margin: auto;
  width: min(460px, calc(100% - 32px));
  border-radius: var(--radius); background: var(--flaeche); color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.dialog::backdrop { background: rgba(17, 17, 19, .55); backdrop-filter: blur(2px); }
.dialog[open] { animation: dialog-auf .18s ease-out; }
@keyframes dialog-auf { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.dialog__innen { padding: 24px 24px 20px; display: grid; gap: 10px; }
.dialog__ikon {
  display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--warnung-hell); color: var(--warnung); margin-bottom: 4px;
}
.dialog--gefahr .dialog__ikon { background: var(--fehler-hell); color: var(--fehler); }
.dialog__ikon .ikon { width: 22px; height: 22px; }
.dialog__titel { font-size: 1.2rem; margin: 0; }
.dialog__text { margin: 0; color: var(--text-2); line-height: 1.5; }
.dialog__knoepfe { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 480px) { .dialog__knoepfe .knopf { flex: 1; } }

/* ---------- Druck -------------------------------------------------------- */
@media print {
  .kopf, .fuss, .systembanner, .knopf, .aktionen, .werkzeugleiste, .meldungen, .brotkrumen, .sprunglink, .dialog { display: none !important; }
  body { display: block; min-height: 0; }
  body { background: #fff; color: #000; }
  .inhalt { padding: 0; max-width: none; }
  .tabellenhuelle, .karte, .kennzahl, .gruppe { border-color: #999; box-shadow: none; break-inside: avoid; }
  .zeile--dublette { background: #f3f3f3 !important; }
  a { color: inherit; text-decoration: none; }
}

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