/* Abitur-Training – Gestaltung der App-Seiten (Farben wie auf den Aufgabenblättern) */
:root{
  --bg:#f6f7f9; --karte:#ffffff; --text:#1d232b; --leise:#5b6573; --linie:#d9dee5;
  --akzent:#1f6f8b; --akzent-hell:#e3f1f6; --gut:#1e7b46; --gut-hell:#e3f4ea;
  --fast:#a86400; --fast-hell:#fdf1dc; --schlecht:#b3261e; --schlecht-hell:#fbe7e5;
  --hilfe:#6b4fa0; --hilfe-hell:#f0ebf8; --code-bg:#f3f5f8;
  --radius:10px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#15191e; --karte:#1e242b; --text:#e6e9ed; --leise:#a2abb6; --linie:#36404b;
    --akzent:#5fb3d0; --akzent-hell:#1d3540; --gut:#5ccf8d; --gut-hell:#183527;
    --fast:#f0b45a; --fast-hell:#3a2e17; --schlecht:#f2857c; --schlecht-hell:#3d1f1d;
    --hilfe:#b9a3e6; --hilfe-hell:#2b2440; --code-bg:#161b21;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text);
  font:16px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif}
main{max-width:1080px; margin:0 auto; padding:8px 16px 56px}
main.eingang{max-width:520px; padding-top:32px}
h1{font-size:1.6rem; margin:18px 0 12px; line-height:1.25}
h2{font-size:1.2rem; margin:0 0 10px; line-height:1.3}
h3{font-size:1.05rem; margin:14px 0 8px}
a{color:var(--akzent)}
code,pre{font-family:Consolas, "Cascadia Mono", "Fira Code", Menlo, monospace; font-size:.92em}
:not(pre)>code{background:var(--code-bg); padding:.05em .35em; border-radius:4px; overflow-wrap:anywhere}
[hidden]{display:none !important}
.leise{color:var(--leise)}
.klein{font-size:.86rem}

/* Kopfzeile */
.kopf{background:var(--karte); border-bottom:1px solid var(--linie)}
.kopf-innen{max-width:1080px; margin:0 auto; padding:10px 16px; display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center}
.marke{font-weight:700; font-size:1.1rem; text-decoration:none; color:var(--text)}
.hauptnav{display:flex; flex-wrap:wrap; gap:4px; flex:1}
.hauptnav a{text-decoration:none; color:var(--text); padding:5px 11px; border-radius:999px; font-size:.95rem}
.hauptnav a:hover{background:var(--akzent-hell)}
.hauptnav a[aria-current="page"]{background:var(--akzent); color:var(--akzent-text, #fff)}
.konto-menue{display:flex; gap:10px; align-items:center; font-size:.95rem}
.konto-menue form{margin:0}

/* Meldungen */
.meldungen{margin:14px 0}
.meldung{border-radius:8px; padding:9px 13px; margin:6px 0; border-left:4px solid var(--akzent); background:var(--akzent-hell)}
.meldung.fehler{border-color:var(--schlecht); background:var(--schlecht-hell)}
.meldung.erfolg{border-color:var(--gut); background:var(--gut-hell)}
.meldung.geheim{border-color:var(--fast); background:var(--fast-hell); font-weight:600}

/* Karten */
.karte{background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); padding:16px 18px; margin:16px 0}
.karte.schmal{max-width:520px; margin-left:auto; margin-right:auto}
.karte-kopf{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; justify-content:space-between; margin-bottom:6px}
.karte-kopf h2{margin:0}
.unterzeile{margin:12px 0 0; font-size:.93rem}
.brotkrumen{margin:16px 0 -8px; font-size:.9rem}

/* Knöpfe */
.knopf{display:inline-block; font:inherit; font-size:.93rem; line-height:1.3; border:1px solid var(--linie); background:var(--karte); color:var(--text);
  padding:6px 13px; border-radius:8px; cursor:pointer; text-decoration:none}
.knopf:hover{border-color:var(--akzent)}
.knopf:disabled{opacity:.4; cursor:default}
.knopf.primaer{background:var(--akzent); border-color:var(--akzent); color:var(--akzent-text, #fff)}
.knopf.primaer:hover{filter:brightness(1.08)}
.knopf.leise{background:transparent}
.knopf.gefaehrlich{border-color:var(--schlecht); color:var(--schlecht)}
.knopf.gefaehrlich:hover{background:var(--schlecht-hell)}
.knopfreihe{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.knopfreihe form{margin:0}
.knopfreihe.eng{gap:2px}

/* Formulare */
.formular{display:flex; flex-direction:column; gap:12px; margin:8px 0}
.formular.reihe{flex-direction:row; flex-wrap:wrap; align-items:flex-end}
.formular.eng{gap:4px; margin:0; align-items:center}
.formular label{display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:.93rem}
.formular input:not([type=checkbox]):not([type=radio]), .formular select, .formular textarea, .blattwahl select{
  font:inherit; font-weight:400; padding:7px 10px; border:1.5px solid var(--linie); border-radius:7px; background:var(--bg); color:var(--text); min-width:0; max-width:100%}
.formular input:focus, .formular select:focus{outline:2px solid var(--akzent); outline-offset:1px; border-color:var(--akzent)}
.formular .hinweis{font-weight:400; font-size:.82rem; color:var(--leise)}
label.haken{flex-direction:row; align-items:flex-start; gap:8px; font-weight:400}
label.haken input{margin-top:.3em}
fieldset{border:1px solid var(--linie); border-radius:8px; padding:8px 12px 12px; margin:0}
legend{font-weight:600; font-size:.93rem; padding:0 4px}
label.wahl{flex-direction:row; align-items:flex-start; gap:10px; font-weight:400; padding:8px; border-radius:7px; cursor:pointer}
label.wahl:hover{background:var(--bg)}
label.wahl input{margin-top:.35em}
.formular button{align-self:flex-start}
.formular.reihe button{align-self:flex-end}

/* Startseite */
.blatt-liste{display:grid; gap:4px}
.blatt-karte h2{margin:0}
.blatt-karte h2 a{text-decoration:none; color:var(--text)}
.blatt-karte h2 a:hover{color:var(--akzent)}
.blatt-karte-kopf{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.blatt-karte p{margin:6px 0}
.fortschritt-zeile{font-size:.93rem; color:var(--leise)}
.fortschritt-zeile b{color:var(--text)}
.bereich-chips{display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 10px}
.aktionen{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center}

progress{appearance:none; -webkit-appearance:none; width:100%; height:10px; border:1px solid var(--linie); border-radius:999px; background:var(--bg); overflow:hidden; vertical-align:middle}
progress::-webkit-progress-bar{background:var(--bg); border-radius:999px}
progress::-webkit-progress-value{background:var(--gut); border-radius:999px}
progress::-moz-progress-bar{background:var(--gut); border-radius:999px}
.mit-balken{white-space:nowrap}
.mit-balken progress{width:70px; height:8px; margin-right:6px}

.chip{display:inline-block; min-width:26px; text-align:center; padding:1px 7px; border-radius:999px; font-size:.8rem; border:1px solid var(--linie); color:var(--leise); white-space:nowrap}
.chip.fertig,.chip.richtig{background:var(--gut-hell); color:var(--gut); border-color:var(--gut)}
.chip.begonnen,.chip.fast{background:var(--fast-hell); color:var(--fast); border-color:var(--fast)}
.chip.falsch{background:var(--schlecht-hell); color:var(--schlecht); border-color:var(--schlecht)}
.etikett{display:inline-block; font-size:.78rem; padding:1px 8px; border-radius:6px; background:var(--code-bg); color:var(--leise); border:1px solid var(--linie)}
.etikett.warnung{background:var(--schlecht-hell); color:var(--schlecht); border-color:var(--schlecht)}
.etikett.gut{background:var(--gut-hell); color:var(--gut); border-color:var(--gut)}

/* Tabellen */
.tabelle-scroll{overflow-x:auto; margin:8px 0}
.tabelle{border-collapse:collapse; width:100%; font-size:.93rem; background:var(--karte)}
.tabelle th,.tabelle td{border-bottom:1px solid var(--linie); padding:7px 8px; text-align:left; vertical-align:top}
.tabelle th{color:var(--leise); font-size:.82rem; font-weight:600; white-space:nowrap}
.tabelle .zahl{text-align:center}
.tabelle.kompakt td,.tabelle.kompakt th{padding:4px 8px}
.tabelle tr.schwer td{background:var(--schlecht-hell)}
.tabelle form{margin:0}
.schlicht{list-style:none; padding:0; margin:0 0 10px}
.schlicht li{padding:3px 0}

/* Kurs */
.kurs-zugang{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between}
.kurscode{font-weight:700; letter-spacing:.06em}
.kurscode.gross{display:inline-block; font-size:1.6rem; margin:2px 0}
.blattwahl{display:flex; gap:8px; align-items:flex-end; margin:16px 0}
.blattwahl label{display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:.93rem}
.js .ohne-js{display:none}
details.analyse{border-top:1px solid var(--linie); padding:6px 0}
details.analyse summary{cursor:pointer; font-weight:600}
details.gefahr{margin-top:14px}
details.gefahr summary{cursor:pointer; color:var(--schlecht); font-size:.93rem}
details.gefahr.klein summary{font-size:.82rem}
.eckdaten{display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; margin:0 0 12px}
.eckdaten dt{color:var(--leise)}
.eckdaten dd{margin:0}

/* Antworten eines Schülers */
.filter-zeile{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center}
.aufgabe-detail{border-top:1px solid var(--linie); padding-top:4px}
.aufgabe-detail h3 .klein{font-weight:400}
.teil-detail{border-left:3px solid var(--linie); padding:4px 0 8px 12px; margin:8px 0}
.teil-detail.status-richtig{border-left-color:var(--gut)}
.teil-detail.status-begonnen{border-left-color:var(--fast)}
.teil-detail-kopf{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center}
.teil-detail-kopf .bst{font-weight:700; min-width:1.4em}
details.aufgabentext summary{cursor:pointer; font-size:.85rem; color:var(--leise)}
details.aufgabentext p{margin:4px 0; font-size:.92rem; color:var(--leise)}
.feld-detail{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; margin:4px 0}
.feld-label{font-weight:600; font-size:.92rem}
.antwort{background:var(--code-bg); padding:1px 8px; border-radius:5px; font-family:Consolas, Menlo, monospace; font-size:.92rem; overflow-wrap:anywhere}
.antwort-liste{margin:0; padding-left:22px; font-size:.92rem}
pre.code{flex-basis:100%; background:var(--code-bg); border:1px solid var(--linie); border-radius:8px; padding:8px 10px; overflow-x:auto; margin:4px 0; max-height:420px}
.freitext-antwort{margin:6px 0; padding:8px 12px; background:var(--hilfe-hell); border-left:4px solid var(--hilfe); border-radius:6px; white-space:pre-wrap; overflow-wrap:anywhere}

@media (max-width:640px){
  h1{font-size:1.35rem}
  .konto-menue{width:100%; justify-content:space-between}
  .kurscode.gross{font-size:1.3rem}
}
.hinweis-karte{border-left:4px solid var(--akzent); background:var(--akzent-hell)}
.hinweis-karte h2{margin-top:0}

/* Glocke mit rotem Zähler */
:root{--signal:#d61f1f; --signal-text:#fff}
@media (prefers-color-scheme: dark){ :root{--signal:#ff4d4d; --signal-text:#1a0000} }
.glocke{position:relative; display:inline-flex; align-items:center; color:var(--text); text-decoration:none; padding:4px; border-radius:999px}
.glocke:hover{background:var(--akzent-hell)}
.glocke-zahl{position:absolute; top:-3px; right:-6px; min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background:var(--signal); color:var(--signal-text, #fff); font-size:.72rem; font-weight:700; line-height:19px; text-align:center;
  box-shadow:0 0 0 2px var(--karte)}
.glocke-zahl.neu{animation:glocke-puls 1.2s ease-out 2}
@keyframes glocke-puls{0%{transform:scale(1)}30%{transform:scale(1.35)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.glocke-zahl.neu{animation:none}}

/* Benachrichtigungen */
.mitteilungen{list-style:none; padding:0; margin:0}
.mitteilungen li{border-bottom:1px solid var(--linie)}
.mitteilungen a{display:block; padding:10px 6px; text-decoration:none; color:var(--text)}
.mitteilungen a:hover{background:var(--bg)}
.mitteilungen .ungelesen{border-left:4px solid var(--signal); background:var(--akzent-hell)}
.mitteilungen .titel{font-weight:600}
.mitteilungen .ungelesen .titel::before{content:"● "; color:var(--signal)}
.mitteilungen .text{color:var(--leise); font-size:.92rem; overflow-wrap:anywhere}

/* Fragen */
.faden{display:flex; flex-direction:column; gap:8px; margin:8px 0}
.beitrag{padding:8px 12px; border-radius:10px; background:var(--bg); border:1px solid var(--linie); max-width:46rem; white-space:pre-wrap; overflow-wrap:anywhere}
.beitrag.lehrkraft{background:var(--hilfe-hell); border-color:var(--hilfe); align-self:flex-end}
.beitrag .kopfzeile{font-size:.8rem; color:var(--leise); white-space:normal; margin-bottom:2px}
.etikett.offen{background:var(--signal); color:var(--signal-text, #fff); border-color:var(--signal)}
.loesung-box{background:var(--gut-hell); border-left:4px solid var(--gut); border-radius:6px; padding:8px 12px; overflow-x:auto}
.loesung-box img{max-width:100%; height:auto}
.empfaenger-liste{columns:2 220px; margin:6px 0; padding-left:18px}
.kapitel-tabelle form.formular{flex-direction:row; flex-wrap:wrap; align-items:center}
.kapitel-tabelle input{width:11rem; max-width:100%}
.formular textarea{font:inherit; resize:vertical; width:100%}

/* Fußzeile und Cookie-Hinweis */
.fuss{max-width:1080px; margin:0 auto; padding:0 16px 28px; font-size:.85rem; color:var(--leise)}
.fuss a{color:var(--leise)}
.cookie-hinweis{position:fixed; left:16px; right:16px; bottom:16px; z-index:50; max-width:640px; margin:0 auto;
  background:var(--karte); color:var(--text); border:1px solid var(--linie); border-left:4px solid var(--akzent);
  border-radius:10px; padding:12px 16px; box-shadow:0 8px 28px rgba(0,0,0,.18)}
.cookie-hinweis p{margin:0 0 10px; font-size:.93rem}
.datenschutz table{font-size:.9rem}

/* Design-Verwaltung */
.farbstreifen{vertical-align:middle; margin-top:4px}
.farbraster{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px 16px}
label.farbe{flex-direction:row; align-items:center; gap:10px; font-weight:400}
label.farbe input[type=color]{width:42px; height:30px; padding:0; border:1px solid var(--linie); border-radius:6px; background:none}

/* Zwei-Faktor */
.qr-feld{display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; margin:12px 0}
.qr{background:#fff; padding:10px; border-radius:10px; border:1px solid var(--linie); line-height:0}
.qr svg{width:200px; height:200px}
.geheimnis{font-size:1.05rem; letter-spacing:.05em; word-spacing:.15em}

/* Passkeys */
.trenner{display:flex; align-items:center; gap:10px; margin:14px 0 10px; font-size:.9rem}
.trenner::before, .trenner::after{content:""; flex:1; border-top:1px solid var(--linie)}
.knopf.breit{display:block; width:100%; text-align:center}
.passkey-meldung{flex-basis:100%; margin:6px 0 0; font-size:.93rem}
.passkey-meldung:empty{display:none}
.passkey-meldung.fehler{color:var(--schlecht)}
.passkey-liste{list-style:none; padding:0; margin:10px 0 14px; display:flex; flex-direction:column; gap:8px}
.passkey-liste > li{border:1px solid var(--linie); border-radius:10px; padding:10px 12px; display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:space-between; align-items:flex-start}
.passkey-liste details{flex:1 1 260px; max-width:100%}
.passkey-liste details > summary{cursor:pointer; text-align:right; color:var(--akzent)}