/* Lehrerbereich – ergänzt css/app.css (gleiche Farben und Schriften) */
body.admin { display: block; overflow: auto; height: auto; min-height: 100%; }
body.admin .kopf { position: sticky; top: 0; z-index: 10; }
.kopf-nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.kopf-nav a { text-decoration: none; }
.kopf-nav a[aria-current="page"] { background: var(--akzent-weich); border-color: var(--akzent); }

.admin-haupt { max-width: 1400px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-left, 0px)) 48px; }
.admin-haupt h1 { margin: 0 0 4px; font-family: var(--schrift-anzeige); font-size: 1.6rem; letter-spacing: -.015em; }
.admin-haupt h2 { margin: 0 0 10px; font-family: var(--schrift-anzeige); font-size: 1.1rem; }
.kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.kopfzeile .knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.brotkrumen { margin: 0 0 6px; font-size: .86rem; }
.brotkrumen a { color: var(--leise); }

.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 16px; box-shadow: var(--schatten); }
.karte + .karte, .abschnitt + .abschnitt { margin-top: 18px; }
.raster-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }

/* Anmeldung */
.anmelde-karte { max-width: 400px; margin: 8vh auto 0; }
.anmelde-karte h1 { margin-bottom: 12px; }
.feld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.feld label { font-size: .88rem; font-weight: 700; }
.feld input, .feld select, .feld textarea, .eingabe {
  font: inherit; color: inherit; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 7px; padding: 7px 10px; width: 100%;
}
.feld textarea { font-family: var(--schrift-code); font-size: .88rem; min-height: 140px; resize: vertical; }
.feld small { color: var(--leise); }
.fehler-text { color: var(--schlecht); margin: 0 0 10px; }
.zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zeile .eingabe { width: auto; flex: 1; min-width: 160px; }

/* Tabellen */
.tabelle-huelle { overflow-x: auto; }
table.liste { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.liste th, table.liste td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
table.liste th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); white-space: nowrap; }
table.liste th button { all: unset; cursor: pointer; }
table.liste th button:focus-visible { outline: 2px solid var(--akzent); }
table.liste th[aria-sort="ascending"] button::after { content: " ▲"; }
table.liste th[aria-sort="descending"] button::after { content: " ▼"; }
table.liste tbody tr:hover { background: var(--flaeche-2); }
table.liste td.zahl, table.liste th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
table.liste a { color: var(--akzent); font-weight: 700; text-decoration: none; }
table.liste a:hover { text-decoration: underline; }

.schalter { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .9rem; }
.schalter input { width: 34px; height: 20px; appearance: none; border-radius: 10px; background: var(--linie); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.schalter input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--flaeche); transition: transform .15s; }
.schalter input:checked { background: var(--gut); }
.schalter input:checked::after { transform: translateX(14px); }

.schild { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .78rem; background: var(--flaeche-2); border: 1px solid var(--linie); white-space: nowrap; }
.schild.erledigt { background: var(--gut-weich); color: var(--gut); border-color: transparent; }
.schild.begonnen { background: var(--warn-weich); color: var(--warn); border-color: transparent; }

/* Fortschrittsraster */
.raster-huelle { overflow: auto; max-height: 75vh; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); }
table.raster { border-collapse: separate; border-spacing: 0; font-size: .8rem; }
table.raster th, table.raster td { padding: 0; }
table.raster thead th { position: sticky; top: 0; z-index: 2; background: var(--flaeche-2); border-bottom: 1px solid var(--linie); font-weight: 700; padding: 4px 2px; }
table.raster thead tr:nth-child(2) th { top: 27px; font-weight: 400; color: var(--leise); font-size: .7rem; }
table.raster th.ab { border-left: 2px solid var(--linie); font-family: var(--schrift-code); color: var(--akzent); }
table.raster .name { position: sticky; left: 0; z-index: 1; background: var(--flaeche); text-align: left; padding: 3px 10px; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--linie); }
table.raster thead .name { z-index: 3; background: var(--flaeche-2); }
table.raster .name a { color: inherit; text-decoration: none; }
table.raster .name a:hover { text-decoration: underline; }
table.raster td.zelle { padding: 2px; }
table.raster td.neues-ab { border-left: 2px solid var(--linie); padding-left: 3px; }
.kaestchen { display: block; width: 14px; height: 14px; border-radius: 3px; background: var(--linie); }
.kaestchen.erledigt { background: var(--gut); }
.kaestchen.begonnen { background: var(--warn); }
.legende { display: flex; gap: 14px; align-items: center; font-size: .85rem; color: var(--leise); margin: 8px 0; flex-wrap: wrap; }
.legende span { display: inline-flex; gap: 6px; align-items: center; }

/* Startpasswörter */
.passwort-liste { border: 2px solid var(--warn); background: var(--warn-weich); }
.passwort-liste .hinweis { font-weight: 700; color: var(--warn); margin: 0 0 10px; }
.passwort-liste table td.pw { font-family: var(--schrift-code); font-size: 1rem; letter-spacing: .02em; }

/* Schülerdetail */
.kennzahlen { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.kennzahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 14px; min-width: 130px; }
.kennzahl b { display: block; font-family: var(--schrift-anzeige); font-size: 1.4rem; }
.kennzahl span { color: var(--leise); font-size: .82rem; }
details.code { margin-top: 4px; }
details.code summary { cursor: pointer; color: var(--akzent); font-size: .86rem; }
details.code pre { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 7px; padding: 10px; overflow: auto; max-height: 420px; white-space: pre; font-size: .82rem; margin: 6px 0; }
details.code .datei-name { font-family: var(--schrift-code); font-size: .78rem; color: var(--leise); margin-top: 6px; }

/* Dialog und Meldung */
.admin-dialog { border: 1px solid var(--linie); border-radius: 12px; padding: 20px; background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten); width: min(460px, calc(100vw - 32px)); }
.admin-dialog::backdrop { background: rgba(10, 16, 22, .45); }
.admin-dialog h2 { margin: 0 0 10px; font-family: var(--schrift-anzeige); font-size: 1.15rem; }
.dialog-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.dialog-fehler { color: var(--schlecht); margin: 8px 0 0; }
.knopf-gefahr-voll { background: var(--schlecht); border-color: var(--schlecht); color: var(--flaeche); font-weight: 700; }
.meldung { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 50; background: var(--tinte); color: var(--grund); padding: 10px 16px; border-radius: 8px; box-shadow: var(--schatten); max-width: calc(100vw - 32px); }
.meldung.fehler { background: var(--schlecht); color: #fff; }
a.knopf { text-decoration: none; color: inherit; }

@media (max-width: 800px) {
  .raster-2 { grid-template-columns: minmax(0, 1fr); }
  .marke-text small { display: none; }
}

/* Drucken: nur die Liste der Startpasswörter */
@media print {
  body.admin.druck-pw > *:not(main) { display: none !important; }
  body.admin.druck-pw main > *:not(.passwort-liste) { display: none !important; }
  body.admin.druck-pw .passwort-liste { border: 0; background: none; box-shadow: none; padding: 0; color: #000; }
  body.admin.druck-pw .passwort-liste .knoepfe { display: none; }
  body.admin.druck-pw .passwort-liste .hinweis { color: #000; }
  body.admin { background: #fff; color: #000; }
  .kopf, .kopf-nav { display: none !important; }
}
.kopf-nav a.kopf-knopf { color: inherit; }