/* Lehrplanung — Gestaltung nach dem Corporate Design der Goethe-Universität (2014):
   Goethe-Blau als Leitfarbe, warme Grautöne für Flächen, Sekundärfarben nur für Zustände.
   Alle Farben stehen als Variablen hier oben, hell und dunkel; tests/test_barrierefreiheit.py
   prüft ihre Kontraste (WCAG 1.4.3, 1.4.11). Schrift: Univers bzw. Meridien, ersatzweise
   Helvetica/Arial und Georgia. */

:root {
  color-scheme: light dark;
  --seite: #f8f6f5;          /* CI Hellgrau */
  --flaeche: #ffffff;
  --linie: #e4e3dd;          /* CI Sandgrau */
  --text: #1f1e1c;
  --text-leise: #5a5852;     /* aus CI Dunkelgrau abgeleitet */
  --rand: #7a776f;           /* Felder und Bedienelemente, 3:1 */
  --akzent: #00618f;         /* CI Goethe-Blau */
  --akzent-dunkel: #004b6e;
  --akzent-flaeche: #e2eef4;
  --auf-akzent: #ffffff;
  --fehler: #b3062c;         /* CI Emo-Rot */
  --fehler-flaeche: #f9e3e7;
  --erfolg: #4a5129;         /* aus CI Grün abgeleitet */
  --erfolg-flaeche: #e8ebd6;
  --warnung: #86400e;        /* aus CI Orange abgeleitet */
  --warnung-flaeche: #f8e3d1;
  --radius: .25rem;
  --schrift: "Univers", "Univers Next Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --schrift-titel: "Meridien", "Linotype Meridien", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --seite: #1b1a18;
    --flaeche: #262522;
    --linie: #3a3935;
    --text: #f1efeb;
    --text-leise: #bdbab2;
    --rand: #8f8c84;
    --akzent: #48a9da;         /* CI Lichtblau */
    --akzent-dunkel: #6cbde6;
    --akzent-flaeche: #173a4c;
    --auf-akzent: #0b1d27;
    --fehler: #ff8fa0;
    --fehler-flaeche: #4b1b24;
    --erfolg: #cdd79a;
    --erfolg-flaeche: #343a1f;
    --warnung: #f5b57f;
    --warnung-flaeche: #4c3018;
  }
}

* { box-sizing: border-box; }
body { margin: 0; font: 1.0625rem/1.55 var(--schrift); color: var(--text); background: var(--seite); overflow-wrap: break-word; }
a { color: var(--akzent); }
a:hover { color: var(--akzent-dunkel); }
header, main { max-width: 36rem; margin: 0 auto; padding: 1rem; }
footer { max-width: 36rem; margin: 2rem auto 0; padding: 1rem; border-top: 1px solid var(--linie); color: var(--text-leise); }

/* Kopfzeile als weiße Leiste über die ganze Breite */
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--flaeche); box-shadow: 0 0 0 100vmax var(--flaeche); clip-path: inset(0 -100vmax); border-bottom: 1px solid var(--linie); }
.marke { font-weight: 700; color: var(--akzent); text-decoration: underline; letter-spacing: .01em; }
.hauptnavigation, .konto .person { display: none; }
.hauptnavigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.hauptnavigation a { color: var(--text); text-underline-offset: .3em; }
.hauptnavigation a[aria-current] { font-weight: 700; color: var(--akzent); text-decoration-thickness: 2px; }
.konto { display: flex; align-items: center; gap: .75rem; }

h1 { font: 400 1.75rem/1.25 var(--schrift-titel); margin: 1rem 0; color: var(--text); }
h2 { font-size: 1.25rem; margin-top: 2rem; }
h3 { font-size: 1.0625rem; margin: 1.5rem 0 0; }
.hinweis { color: var(--text-leise); }
.fehler { color: var(--fehler); margin: .25rem 0 0; }

/* Formulare */
label { display: block; font-weight: 600; margin-bottom: .25rem; }
input, select, textarea { width: 100%; font: inherit; color: var(--text); background: var(--flaeche); padding: .75rem; border: 1px solid var(--rand); border-radius: var(--radius); }
input[inputmode="numeric"] { letter-spacing: .3em; font-size: 1.5rem; }
input[type="radio"], input[type="checkbox"] { width: auto; margin-right: .5rem; accent-color: var(--akzent); }
.feld { margin: 1rem 0; }
.feld .hinweis { font-size: .9375rem; margin: .25rem 0 0; }
/* Fehlerhafte Felder: kräftiger Rand in der Fehlerfarbe, der Text steht darunter */
[aria-invalid="true"] { border: 2px solid var(--fehler); }
input:hover, select:hover, textarea:hover { border-color: var(--text-leise); }
.feld label:has(input[type="radio"]), .feld label:has(input[type="checkbox"]) { font-weight: normal; }
.feld ul { list-style: none; padding: 0; margin: 0; }
fieldset { border: 1px solid var(--linie); border-radius: var(--radius); margin: 1rem 0; background: var(--flaeche); }
/* Formulare mit Feldern als Karte; Formulare mit nur einem Knopf bleiben schlicht */
form.formular { background: var(--flaeche); border: 1px solid var(--linie); border-radius: .5rem; padding: .25rem 1.25rem 1.25rem; }
form.formular fieldset { background: var(--seite); }
/* In Karten und Seitenleisten ohne eigene Karte */
.kachel form.formular, .terminseite form.formular, .liste form.formular { background: none; border: 0; padding: 0; }
.terminseite form.formular fieldset { background: var(--flaeche); }
legend { font-weight: 600; padding: 0 .25rem; }
/* Filter der Terminliste: Kästchen als Schalter; der Knopf „Anzeige aktualisieren“ bleibt,
   automatisches Absenden wäre ein Kontextwechsel beim Anklicken (WCAG 3.2.2) */
.filter label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; margin: .35rem 0; border: 1px solid var(--rand); border-radius: 1.25rem; font-weight: normal; cursor: pointer; }
.filter label:has(input[type="checkbox"]:checked) { background: var(--akzent-flaeche); border-color: var(--akzent); }

/* Knöpfe: gefüllt für die Hauptaktion, .zweit als Umriss, .leise wie ein Link */
button { font: inherit; font-weight: 600; min-height: 2.75rem; padding: .6rem 1.25rem; border: 1px solid var(--akzent); border-radius: var(--radius); background: var(--akzent); color: var(--auf-akzent); cursor: pointer; }
button:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
button.zweit { background: var(--flaeche); color: var(--akzent); }
button.zweit:hover { background: var(--akzent-flaeche); }
button.leise { min-height: 0; background: none; border: 0; color: var(--akzent); font-weight: normal; padding: .25rem; text-decoration: underline; }
button.leise:hover { color: var(--akzent-dunkel); background: none; }
/* Links, die wie Knöpfe aussehen, etwa „Übernahme anfragen“ */
a.knopf { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .6rem 1.25rem; border: 1px solid var(--akzent); border-radius: var(--radius); font-weight: 600; text-decoration: none; background: var(--akzent); color: var(--auf-akzent); }
a.knopf.zweit { background: var(--flaeche); color: var(--akzent); }
a.knopf.zweit:hover { background: var(--akzent-flaeche); }

/* Fokus: 3:1 gegen Seite und Flächen (WCAG 1.4.11, 2.4.7); der Abstand trennt vom Knopf */
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.sprungmarke { position: absolute; left: -999rem; }
.sprungmarke:focus { left: 1rem; top: 1rem; z-index: 1; padding: .5rem 1rem; background: var(--flaeche); }
/* Nur für Bildschirmleser, etwa die Beschriftung einer Tabelle unter einer Überschrift */
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Meldungen */
/* Hinweisbalken; nach einer Aktion mit Symbol (Gestaltung, Schritt 4) */
.meldung { padding: .75rem 1rem; border-left: 4px solid var(--akzent); background: var(--akzent-flaeche); border-radius: 0 var(--radius) var(--radius) 0; }
.meldung.error { border-color: var(--fehler); background: var(--fehler-flaeche); }
.meldung.mit-symbol { display: flex; align-items: flex-start; gap: .6rem; }
.meldung > .symbol { flex: none; color: var(--akzent); margin-top: .1rem; }
.meldung.error > .symbol { color: var(--fehler); }

/* Kennzeichen für Zustände: Text plus Farbe, nie Farbe allein */
.kennzeichen { display: inline-block; padding: .05rem .5rem; border-radius: var(--radius); font-size: .8125rem; font-weight: 600; line-height: 1.5; background: var(--linie); color: var(--text); white-space: nowrap; }
.kennzeichen.frei { background: var(--erfolg-flaeche); color: var(--erfolg); }
.kennzeichen.voll { background: var(--fehler-flaeche); color: var(--fehler); }
.kennzeichen.uebernahme { background: var(--warnung-flaeche); color: var(--warnung); }
.kennzeichen.info { background: var(--akzent-flaeche); color: var(--akzent); }
/* Demonstrationssystem (LEHRPLANUNG_DEMO): ganz oben; als Kind von body über die volle Breite */
.demo-hinweis { margin: 0; padding: .5rem 1rem; text-align: center; background: var(--warnung-flaeche); color: var(--warnung); }

/* Listen, Karten, Tabellen */
.liste { list-style: none; padding: 0; }
.liste li { padding: .75rem 0; border-bottom: 1px solid var(--linie); }
.liste form { margin-top: .5rem; }
/* Listen der Seiten (Stammliste, Rollen, Domains, Freischaltung) als Karte */
main > .liste, .haupt > .liste { background: var(--flaeche); border: 1px solid var(--linie); border-radius: .5rem; padding: 0 1rem; }
main > .liste > li:last-child, .haupt > .liste > li:last-child { border-bottom: 0; }
.karte { padding: .75rem 1rem; margin-bottom: .5rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: .5rem; }
.karte .kennzeichen, .verlauf .kennzeichen { margin: 0 .15rem; }
.verlauf { margin: .5rem 0 0; padding-left: 1.25rem; }
.tabelle-rahmen { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: .5rem; padding: 0 .75rem; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { padding: .5rem .25rem; border-bottom: 1px solid var(--linie); text-align: right; font-variant-numeric: tabular-nums; }
.tabelle th:first-child { text-align: left; }

/* Reiter einer Lehrveranstaltung: am Smartphone kompakt als Kacheln, am Desktop als Karteireiter */
.reiter ul { list-style: none; margin: .5rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.reiter a { display: block; padding: .3rem .55rem; font-size: .9375rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--seite); color: var(--text); }
.reiter a[aria-current] { font-weight: 600; background: var(--flaeche); border-color: var(--rand); border-bottom: 3px solid var(--akzent); }

/* Kalender der Terminliste: Farbe plus Kurztext („3 frei“, „Ü 2“, „voll“), nie Farbe allein */
.kalender { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 .5rem; }
.kalender-monat { border-collapse: separate; border-spacing: 2px; font-size: .875rem; background: var(--flaeche); font-variant-numeric: tabular-nums; border: 1px solid var(--linie); border-radius: .5rem; padding: .25rem; }
.kalender-monat caption { font-weight: 600; text-align: left; padding-bottom: .25rem; }
.kalender-monat th, .kalender-monat td { width: 2.45rem; height: 2.75rem; padding: 0; text-align: center; border-radius: var(--radius); }
.kalender-monat th { height: 1.75rem; font-weight: 600; color: var(--text-leise); }
.kalender-monat td.heute { outline: 2px solid var(--text); outline-offset: -2px; }
.kalender-monat abbr { text-decoration: none; }
.kalender-monat a, .kalender-monat .leer { display: block; padding: .2rem 0; color: var(--text); }
.kalender-monat .leer { color: var(--text-leise); }
.kalender-monat .kurz { display: block; font-size: .6875rem; line-height: 1.2; }
.tag-frei { background: var(--erfolg-flaeche); }
.tag-uebernahme { background: var(--warnung-flaeche); }
.tag-voll { background: var(--fehler-flaeche); }
.kalender-blaettern { display: flex; align-items: center; justify-content: space-between; width: 18.2rem; font-weight: 600; }
.kalender-blaettern button { font-size: 1.25rem; text-decoration: none; min-width: 2.75rem; }
.kalender-blaettern button[aria-disabled="true"] { color: var(--rand); cursor: default; }
.kalender-monat[hidden] { display: none; }
/* Beim Blättern nennt die Leiste den Monat; die Beschriftung bleibt für Bildschirmleser */
.kalender.blaettern caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Terminzeile: am Smartphone Zeit und Titel nebeneinander, der Rest darunter */
.termin { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .5rem; row-gap: .25rem; font-variant-numeric: tabular-nums; }
.liste.termine li.termin { background: var(--flaeche); border: 1px solid var(--linie); border-radius: .5rem; padding: .75rem 1rem; margin-bottom: .5rem; }
.termin .t-belegung .kennzeichen { margin-right: .35rem; }
.termin .t-aktion { margin-top: .25rem; }
.terminliste h3 { font-size: 1rem; color: var(--text-leise); text-transform: uppercase; letter-spacing: .04em; }
.termin > .t-zustaendig, .termin > .t-belegung, .termin > .t-aktion { grid-column: 1 / -1; }

/* Startseite: Kacheln */
.kachel h2 { margin-top: 1.5rem; }
/* Ausblendbare Kategorie (Wartelisten auf der Startseite, 19.10.2026) */
.kachel summary { cursor: pointer; margin-bottom: .5rem; }

/* Startseite: Kennzahlen (Gestaltung, Schritt 3) */
.kennzahlen { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; }
.kennzahlen a { display: block; height: 100%; padding: .75rem 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: .5rem; color: var(--text); text-decoration: none; }
.kennzahlen a:hover { border-color: var(--akzent); }
.kennzahlen .zahl { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--akzent); font-variant-numeric: tabular-nums; }
.kennzahlen .bezeichnung { color: var(--text-leise); font-size: .9375rem; }

/* Navigation unten am Smartphone: bleibt beim Scrollen am unteren Rand; am Desktop oben */
.untennavigation { position: sticky; bottom: 0; z-index: 5; background: var(--flaeche); border-top: 1px solid var(--linie); padding-bottom: env(safe-area-inset-bottom); }
.untennavigation ul { list-style: none; margin: 0 auto; padding: 0; display: flex; max-width: 36rem; }
.untennavigation li { flex: 1; min-width: 0; }
.untennavigation a { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-height: 3.25rem; padding: .4rem .1rem; font-size: .8125rem; color: var(--text-leise); text-decoration: none; }
.untennavigation a[aria-current] { color: var(--akzent); font-weight: 700; }
.symbol { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Desktop: breitere Seite, Terminliste zweispaltig, Kacheln nebeneinander */
@media (min-width: 64rem) {
  header, main, footer { max-width: 75rem; }
  main > p, main > form, main > .liste, main > .feld { max-width: 45rem; }
  .hauptnavigation { display: block; flex: 1; }
  .untennavigation { display: none; }
  .konto .person { display: inline; color: var(--text-leise); }
  .kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1.5rem; align-items: start; }
  .kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: .5rem; padding: 0 1.25rem .5rem; }
  .kachel h2 { margin-top: 1rem; }
  .kachel.wichtig { border-left: 4px solid var(--akzent); }
  .reiter ul { border-bottom: 1px solid var(--rand); }
  .reiter a { padding: .5rem .75rem; font-size: inherit; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
  .reiter a[aria-current] { border-bottom: 3px solid var(--akzent); }
  .zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) 26rem; gap: 2.5rem; align-items: start; }
  .zweispaltig > .neben > h2:first-child, .zweispaltig > .neben > * > h2:first-child { margin-top: 0; }
  .terminbereich { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 2rem; align-items: start; }
  .terminseite { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
  .terminseite .kalender { margin-top: 0; }
  .terminliste h3:first-child { margin-top: 0; }
  .termin { grid-template-columns: 9.5rem minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr); column-gap: 1rem; }
  .liste.termine { background: var(--flaeche); border: 1px solid var(--linie); border-radius: .5rem; padding: 0 1rem; }
  .liste.termine li.termin { border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; margin: 0; padding: .6rem 0; }
  .liste.termine li.termin:last-child { border-bottom: 0; }
  .termin .t-aktion { margin-top: 0; }
  .termin > .t-zustaendig, .termin > .t-belegung, .termin > .t-aktion { grid-column: auto; }
  .termin .t-aktion form { margin-top: 0; }
  .termin .t-aktion button:not(.leise) { min-height: 2.25rem; padding: .35rem .9rem; }
}

/* Bewegung nur, wo gewünscht */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}