/* ATLAS – Gestaltung wie FEVAD: rote Kopfzeile mit Hauptmenü, Inhalt mittig auf hellgrauem Grund,
   weiße Karten, rote Hauptknöpfe. Farben als Variablen, Dunkelmodus nach Gerät oder Auswahl im Fuß. */
:root {
    --feuer-50: #fef2f2; --feuer-100: #fee2e2; --feuer-600: #c8102e; --feuer-700: #a50d26; --feuer-800: #7f0a1d;
    --grund: #f9fafb; --flaeche: #ffffff; --flaeche-2: #f9fafb; --flaeche-hover: #f3f4f6;
    --text: #111827; --text-2: #374151; --leise: #4b5563;
    --linie: #e5e7eb; --linie-2: #d1d5db; --linie-zart: #f3f4f6;
    --gruen-grund: #dcfce7; --gruen-text: #166534; --gruen-linie: #bbf7d0; --gruen: #16a34a;
    --gelb-grund: #fef9c3; --gelb-text: #854d0e; --gelb-linie: #fde68a; --gelb: #ca8a04;
    --rot-grund: #fee2e2; --rot-text: #991b1b; --rot-linie: #fecaca; --rot: #dc2626;
    --blau-grund: #eff6ff; --blau-text: #1e40af; --blau-linie: #bfdbfe;
    --fokus: #1e40af; --link: #a50d26;
    --schatten: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --schatten-gross: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    color-scheme: light;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px; line-height: 1.5; color: var(--text); background: var(--grund);
}

/* Dunkelmodus: Flächen und Schrift gespiegelt, Rot der Kopfzeile und der Knöpfe bleibt. */
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-farbschema="hell"]) {
        color-scheme: dark;
        --grund: #030712; --flaeche: #111827; --flaeche-2: #0b1220; --flaeche-hover: #1f2937;
        --text: #f3f4f6; --text-2: #e5e7eb; --leise: #9ca3af;
        --linie: #1f2937; --linie-2: #374151; --linie-zart: #1f2937;
        --feuer-50: #3b0a10; --feuer-100: #5c0f19;
        --gruen-grund: #052e16; --gruen-text: #86efac; --gruen-linie: #14532d; --gruen: #22c55e;
        --gelb-grund: #422006; --gelb-text: #fde68a; --gelb-linie: #713f12; --gelb: #eab308;
        --rot-grund: #450a0a; --rot-text: #fecaca; --rot-linie: #7f1d1d; --rot: #f87171;
        --blau-grund: #172554; --blau-text: #bfdbfe; --blau-linie: #1e3a8a;
        --fokus: #93c5fd; --link: #fca5a5;
    }
}
:root[data-farbschema="dunkel"] {
    color-scheme: dark;
    --grund: #030712; --flaeche: #111827; --flaeche-2: #0b1220; --flaeche-hover: #1f2937;
    --text: #f3f4f6; --text-2: #e5e7eb; --leise: #9ca3af;
    --linie: #1f2937; --linie-2: #374151; --linie-zart: #1f2937;
    --feuer-50: #3b0a10; --feuer-100: #5c0f19;
    --gruen-grund: #052e16; --gruen-text: #86efac; --gruen-linie: #14532d; --gruen: #22c55e;
    --gelb-grund: #422006; --gelb-text: #fde68a; --gelb-linie: #713f12; --gelb: #eab308;
    --rot-grund: #450a0a; --rot-text: #fecaca; --rot-linie: #7f1d1d; --rot: #f87171;
    --blau-grund: #172554; --blau-text: #bfdbfe; --blau-linie: #1e3a8a;
    --fokus: #93c5fd; --link: #fca5a5;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--grund); color: var(--text); }
a { color: var(--link); }
main :where(p, li, td, label, span) > a:not(.knopf) { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.kopf :focus-visible { outline-color: #fff; }

/* Sprunglink für Tastatur und Bildschirmleser */
.sprunglink { position: absolute; left: -9999px; }
.sprunglink:focus { left: 8px; top: 8px; z-index: 50; background: #fff; color: var(--feuer-700); padding: 8px 12px; border-radius: 4px; font-weight: 600; font-size: 14px; box-shadow: var(--schatten-gross); }

/* Kopfzeile */
.atlas { min-height: 100vh; display: flex; flex-direction: column; }
.alpha { background: #fde047; color: #713f12; text-align: center; font-size: 14px; font-weight: 600; padding: 8px 16px; }
.alpha { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; }
.alpha-knopf { background: #713f12; color: #fff; border: 0; border-radius: 4px; padding: 3px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.alpha-knopf:hover { background: #854d0e; }
.alpha-knopf:focus-visible, .alpha-link:focus-visible { outline: 2px solid #713f12; outline-offset: 2px; }
.alpha-link { color: #713f12; font-size: 13px; }
.feedback-feld { background: #fef9c3; border-bottom: 2px solid #fde047; color: #422006; }
.feedback-innen { max-width: 72rem; margin: 0 auto; padding: 12px 16px; display: grid; gap: 8px; }
.feedback-innen textarea { width: 100%; font: inherit; padding: 8px; border: 1px solid #a16207; border-radius: 4px; background: #fff; color: #1c1917; }
.feedback-innen select { font: inherit; padding: 4px 6px; }
.feedback-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.feedback-innen .leise { color: #713f12; }
.feedback-bestaetigung { background: #dcfce7; color: #14532d; text-align: center; font-size: 14px; padding: 6px 16px; }
.feedback-abbild { width: 100%; height: 32rem; border: 1px solid var(--linie-2); border-radius: 6px; background: #fff; }
tr.gewaehlt td { background: var(--flaeche-hover); }
.feedback-zitat { margin: 8px 0; padding: 8px 12px; border-left: 4px solid #eab308; background: var(--flaeche-hover); white-space: pre-wrap; }
.feedback-text { white-space: pre-wrap; max-height: 24rem; overflow: auto; font-size: 13px; }
kbd { border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; font-size: 12px; }
.kopf { background: var(--feuer-700); color: #fff; }
.kopf nav { max-width: 72rem; margin: 0 auto; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.kopf .marke { color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; letter-spacing: .02em; }
.kopf .marke small { font-weight: 400; opacity: .85; font-size: 13px; margin-left: 8px; }
.kopf .fw-wahl select { background: var(--feuer-800); color: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 4px; padding: 4px 8px; font: inherit; max-width: 16rem; }
.kopf .fw-wahl select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kopf ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kopf ul a { display: block; color: #fff; text-decoration: none; padding: 4px 8px; border-radius: 4px; }
.kopf ul a:hover { background: var(--feuer-800); }
.kopf ul a.active { background: var(--feuer-800); font-weight: 600; }
/* Menü mit Untermenüs (Alpha-Rückmeldung 3 vom 02.11.2026) */
.menue-gruppe { position: relative; }
.menue-knopf { display: block; color: #fff; background: none; border: 0; font: inherit; padding: 4px 8px; border-radius: 4px; cursor: pointer; }
.menue-knopf:hover, .menue-knopf[aria-expanded="true"] { background: var(--feuer-800); }
.menue-knopf.active { background: var(--feuer-800); font-weight: 600; }
.kopf ul.untermenue { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 12rem; display: flex; flex-direction: column; align-items: stretch;
    gap: 2px; padding: 6px; background: var(--feuer-800); border-radius: 6px; box-shadow: var(--schatten-gross); }
.kopf ul.untermenue a { white-space: nowrap; }
.kopf ul.untermenue a:hover, .kopf ul.untermenue a.active { background: var(--feuer-700); }
.menue-hintergrund { position: fixed; inset: 0; z-index: 30; }
.kopf { position: relative; z-index: 35; }
/* Werte aus Einstellungen: unterstrichener Link für alle, die ändern dürfen (Alpha-Rückmeldung 6 vom 02.11.2026) */
a.einstellungslink { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a.einstellungslink:hover { color: var(--link); text-decoration-thickness: 2px; }
.einstellung-ziel { outline: 3px solid var(--fokus); outline-offset: 4px; border-radius: 4px; }

/* Inhalt und Fuß */
.inhalt { flex: 1; width: 100%; max-width: 72rem; margin: 0 auto; padding: 24px 16px; }
.inhalt:focus { outline: none; }
.fusszeile { width: 100%; max-width: 72rem; margin: 0 auto; padding: 24px 16px; font-size: 12px; color: var(--leise); }
.fusszeile select { font-size: 12px; padding: 2px 4px; min-height: 0; border-radius: 4px; }
.fusszeile label { display: inline; font-size: 12px; margin: 0; }

h1 { font-size: 24px; line-height: 1.25; font-weight: 700; margin: 0 0 16px; }
h2 { font-size: 18px; line-height: 1.4; font-weight: 600; margin: 0 0 12px; }
h3 { font-size: 16px; font-weight: 600; margin: 16px 0 8px; }
.karte > h2:first-child, .karte > form > h2:first-child { margin-top: 0; }

.leiste { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.leiste .rechts { margin-left: auto; }
.leiste label { margin: 0; }
td .leiste { margin: 0; gap: 6px; }
h1:focus { outline: none; }

/* Karten */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 16px; margin-bottom: 16px; box-shadow: var(--schatten); }
.karte .karte { background: var(--flaeche-2); box-shadow: none; }

/* Tabellen */
table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--flaeche); }
th { background: var(--flaeche-2); padding: 8px 12px; text-align: left; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--linie); }
td { padding: 8px 12px; color: var(--text); border-top: 1px solid var(--linie-zart); vertical-align: top; }
tbody tr:hover td { background: var(--flaeche-hover); }
tr.klickbar { cursor: pointer; }

/* Formulare */
label { display: block; font-size: 14px; font-weight: 500; color: var(--text-2); margin-bottom: 4px; }
input, select, textarea {
    font: inherit; font-size: 14px; color: var(--text); padding: 8px 12px; border: 1px solid var(--linie-2); border-radius: 6px;
    background: var(--flaeche); box-shadow: var(--schatten); min-height: 38px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--feuer-600); box-shadow: 0 0 0 1px var(--feuer-600); }
input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
input[type=checkbox] { min-height: auto; width: 18px; height: 18px; accent-color: var(--feuer-600); box-shadow: none; padding: 0; }
textarea { width: 100%; }
.feld { margin-bottom: 12px; min-width: 0; }
.feld input:not([type=checkbox]), .feld select, .feld textarea { display: block; width: 100%; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.haken { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 14px; font-weight: 400; margin: 0; }
.validation-message { color: var(--rot-text); font-size: 14px; margin-top: 4px; }

/* Knöpfe: .knopf = Zweitknopf (weiß), .knopf.haupt = Hauptknopf (rot) */
.knopf {
    display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 600;
    padding: 8px 16px; min-height: 38px; border-radius: 6px; cursor: pointer; text-decoration: none;
    border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--text-2);
}
.knopf:hover { background: var(--flaeche-hover); }
.knopf.haupt { background: var(--feuer-600); border-color: var(--feuer-600); color: #fff; }
.knopf.haupt:hover { background: var(--feuer-700); border-color: var(--feuer-700); }
.knopf.klein { padding: 4px 10px; min-height: 30px; font-size: 13px; }
/* Vorschlagsknopf (z. B. Prüfungsteil, der heute nicht ansteht): klar als Knopf erkennbar, aber schwächer als der Hauptknopf */
.knopf.vorschlag { background: var(--feuer-50); border-color: var(--feuer-600); color: var(--feuer-700); }
.knopf.vorschlag:hover { background: var(--feuer-100); }
.knopf.gefahr { background: var(--rot-grund); border-color: var(--rot-linie); color: var(--rot-text); }
.knopf.gefahr:hover { filter: brightness(.97); }
.knopf:disabled { opacity: .55; cursor: not-allowed; }
a.knopf { color: var(--text-2); }
a.knopf.haupt { color: #fff; }

/* Meldungen */
.meldung { padding: 12px; border-radius: 6px; margin-bottom: 16px; border: 1px solid; font-size: 14px; }
.meldung.ok { background: var(--gruen-grund); border-color: var(--gruen-linie); color: var(--gruen-text); }
.meldung.fehler { background: var(--rot-grund); border-color: var(--rot-linie); color: var(--rot-text); }
.meldung.hinweis { background: var(--gelb-grund); border-color: var(--gelb-linie); color: var(--gelb-text); }
.meldung a { color: inherit; font-weight: 600; }

.leise { color: var(--leise); font-size: 14px; }

/* Ampel als Plakette mit Punkt und Text (Farbe nie allein) */
.ampel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; padding: 2px 8px; border-radius: 4px; }
.ampel .punkt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ampel-gruen { background: var(--gruen-grund); color: var(--gruen-text); }
.ampel-gruen .punkt { background: var(--gruen); }
.ampel-gelb { background: var(--gelb-grund); color: var(--gelb-text); }
.ampel-gelb .punkt { background: var(--gelb); }
.ampel-rot { background: var(--rot-grund); color: var(--rot-text); }
.ampel-rot .punkt { background: var(--rot); }

.chip { display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--flaeche-hover); color: var(--text-2); font-size: 12px; font-weight: 600; margin: 0 4px 4px 0; border: 1px solid var(--linie); }
.chip.ok { background: var(--gruen-grund); color: var(--gruen-text); border-color: var(--gruen-linie); }
.chip.hinweis { background: var(--gelb-grund); color: var(--gelb-text); border-color: var(--gelb-linie); }
.chip.haupt { background: var(--feuer-700); color: #fff; border-color: var(--feuer-700); font-size: 13px; }
.vorschau { width: 100%; height: 70vh; border: 1px solid var(--linie); border-radius: 6px; background: #fff; }

/* Schmale Fenster (Tablet hochkant, Handy) */
@media (max-width: 640px) {
    .kopf nav { flex-direction: column; align-items: flex-start; }
    .kopf ul.untermenue { position: static; box-shadow: none; }
    .inhalt { padding: 16px 12px; }
    table { display: block; overflow-x: auto; }
}

@media print {
    .kopf, .fusszeile, .alpha, .nicht-drucken { display: none !important; }
    body { background: #fff; }
    .karte { box-shadow: none; }
}

/* Gruppen: Trainingsgemeinschaft und LAZ-Gruppe optisch trennen (Alpha-Rückmeldung Nr. 4) */
.lg-karte { background: var(--flaeche-2); border-style: dashed; }
.abschluss { border-color: var(--rot-linie); background: var(--rot-grund); color: var(--rot-text); }
.abschluss ul { margin: 0 0 12px 18px; padding: 0; }
.farbfeld { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--linie-2); cursor: pointer; padding: 0; }
.farbfeld:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.farbpunkt { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 4px; border: 1px solid rgb(0 0 0 / 0.2); }

/* Terminkalender (Alpha-Rückmeldung Nr. 5) */
.kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kalender .kopf { font-weight: 600; text-align: center; color: var(--leise); font-size: 0.85rem; padding: 4px 0; }
.kalender .tag { min-height: 96px; border: 1px solid var(--linie); border-radius: 6px; padding: 4px; background: var(--flaeche); display: flex; flex-direction: column; gap: 3px; }
.kalender .tag.fremd { background: var(--flaeche-2); color: var(--leise); }
.kalender .tag.heute { border-color: var(--feuer-600); box-shadow: inset 0 0 0 1px var(--feuer-600); }
.kalender .tag .nr { font-size: 0.8rem; font-weight: 600; }
.kalender.woche .tag { min-height: 220px; }
.ktermin { display: block; border-radius: 4px; padding: 2px 5px; font-size: 0.8rem; line-height: 1.25; text-decoration: none; overflow: hidden; }
.ktermin:hover, .ktermin:focus-visible { filter: brightness(0.92); text-decoration: underline; }
.ktermin.abgesagt { text-decoration: line-through; opacity: 0.6; }
.ktermin .klein { display: block; font-size: 0.72rem; opacity: 0.9; }
.legende { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.85rem; }
@media (max-width: 700px) {
    .kalender { grid-template-columns: 1fr; }
    .kalender .kopf, .kalender .tag.fremd:not(:has(.ktermin)) { display: none; }
    .kalender .tag { min-height: 0; }
}

/* Sortierbare Spaltenköpfe (Alpha-Rückmeldung 02.11.2026) */
.sortkopf { background: none; border: 0; padding: 0; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; text-align: left; }
.sortkopf:hover { text-decoration: underline; }
.sortkopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* Alpha-Rückmeldungen 02.11.2026 (Mittag): Rechte, Rollenmodus, Ergänzungen, Absage-Dialog */
.kopf ul.untermenue li.unterpunkt a { padding-left: 1.6rem; }
fieldset.nur-lesen { border: 0; padding: 0; margin: 0; min-width: 0; }
.rollenmodus { margin: 0 0 12px; font-size: .95rem; }
.rollenmodus summary { cursor: pointer; color: var(--leise); }
.rollenmodus .leiste { margin-top: 8px; }
.rollenmodus.aktiv { background: var(--blau-grund); color: var(--blau-text); border: 1px solid var(--blau-linie); border-radius: 6px; padding: 8px 12px;
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ergaenzungen { list-style: none; padding-left: 0; margin: 8px 0; }
.ergaenzungen .ergaenzungen { padding-left: 1.5rem; border-left: 2px solid var(--linie-2); }
.ergaenzung { margin: 8px 0; }
.ergaenzung .kopfzeile { font-size: .9rem; color: var(--leise); }
.dialog-hintergrund { position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 90; }
.dialog { position: fixed; z-index: 91; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 32px));
    background: var(--flaeche); color: var(--text); border-radius: 8px; padding: 20px; box-shadow: var(--schatten-gross); }
.rollenmodus-band { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.rollenmodus-band select { font: inherit; font-size: 13px; padding: 2px 4px; border: 1px solid #713f12; border-radius: 4px; background: #fffbea; color: #713f12; max-width: 22rem; }

/* Anmeldemaske (final, 03.11.2026) */
.karte.anmeldung { max-width: 520px; }
.karte.anmeldung form .feld { margin-bottom: 10px; }
.karte.anmeldung form input, .karte.anmeldung form select { width: 100%; }
.karte.anmeldung details.projekt { margin-top: 12px; border-top: 1px solid var(--linie); padding-top: 8px; }
.karte.anmeldung details.projekt summary { cursor: pointer; color: var(--text-2); }

/* Einstellungen gegliedert wie das Menü (Alpha-Rückmeldung vom 03.11.2026, 07:57 Uhr) */
.einst-navi { position: sticky; top: 0; z-index: 4; }
.einst-merkmal { font-size: 12.5px; }
.einst-verweise { margin: 12px 0 0; padding-left: 20px; }
.einst-verweise li { margin: 4px 0; }
.einst-unter { margin: 18px 0 6px; font-size: 1rem; border-bottom: 1px solid var(--rand, #d1d5db); padding-bottom: 2px; }
.einst-unter:first-of-type { margin-top: 4px; }
.einst-teil { margin: 24px 0 8px; font-size: 18px; }

/* Kontomenü (Anmeldung beim Programmstart, 03.11.2026) */
.kopf ul.untermenue.rechts { left: auto; right: 0; }
.kopf ul.untermenue .konto-zeile { padding: 4px 8px; font-size: 13px; opacity: .85; white-space: normal; max-width: 18rem; }
.kopf ul.untermenue .link-knopf { color: #fff; padding: 4px 8px; text-align: left; width: 100%; }
.abgleich-laeuft { position: sticky; top: 0; z-index: 30; }
.haken input { width: auto; flex: 0 0 auto; margin: 0; }

/* Rechte je Rolle (Andi, 03.11.2026) */
.rechte-tabelle td, .rechte-tabelle th { text-align: center; }
.rechte-tabelle td:first-child, .rechte-tabelle th:first-child { text-align: left; }
.rechte-tabelle td.abweichung { background: var(--gelb-grund, #fef3c7); }
/* Mehrere Personen als Tabelle (Alpha-Rückmeldung vom 03.11.2026, 10:18 Uhr) */
.eingabetabelle td { padding: 4px 6px; vertical-align: top; }
.eingabetabelle input, .eingabetabelle select { width: 100%; min-width: 7em; min-height: 32px; }
/* Zurück-Knopf auf jeder Seite (Alpha-Rückmeldung vom 03.11.2026, 10:20 Uhr) */
.zurueck-knopf { margin: 0 0 8px; }