/*
 * DAS STILBLATT DES KERNS.
 *
 * Gleich in jeder Anwendung. Was eine Anwendung anders aussehen lässt, steht
 * in modul/css/modul.css und überschreibt hier nur Variablen: meist die
 * Grundfarbe --primaer und die Farbe des Rückens --akzent.
 *
 * Die Idee in einem Satz: Ein Skelett hat einen Rücken. Der gelbe Balken
 * neben dem Namen und neben dem ersten Satz der Startseite ist das eine
 * Element, das auffällt; alles andere bleibt ruhig, sachlich und gut lesbar.
 *
 * Schrift: Atkinson Hyperlegible, entworfen für gute Lesbarkeit, auf dem
 * eigenen Server (keine Dienste Dritter). Schweizer Ton: linksbündig,
 * Linien statt Schatten, kleine Rundungen.
 *
 * Inhaltsrichtlinie: kein style-Attribut im Markup. Dynamische Werte setzt
 * ein Skript über el.style.setProperty.
 */

@font-face { font-family: "Atkinson"; src: url("../schrift/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("../schrift/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ------------------------------ Farben, hell ------------------------------ */

:root {
  --grund: #f3f6f5;
  --flaeche: #ffffff;
  --flaeche-2: #e8eeec;
  --schrift: #17232a;
  --leise: #4f6068;
  --linie: #cbd5d2;
  --primaer: #1d5c63;
  --primaer-tief: #143f44;
  --primaer-schrift: #ffffff;
  --primaer-hauch: #e3efef;
  --akzent: #f2c14e;
  --gut: #1c6b43;
  --gut-grund: #dcf1e3;
  --warnung: #7a4f00;
  --warnung-grund: #fcefcf;
  --fehler: #a3341f;
  --fehler-grund: #fbe4dd;
  --fehler-schrift: #ffffff;
  --fokus: #0b57d0;
  --rund: 6px;
  --breite: 72rem;
  --text-breite: 40rem;
  color-scheme: light dark;
}

/* ------------------------------ Farben, dunkel ------------------------------ */

@media (prefers-color-scheme: dark) {
  :root:not([data-farbe="hell"]) {
    --grund: #0f1618; --flaeche: #162125; --flaeche-2: #1e2c31; --schrift: #e3ebea; --leise: #a1b2b5;
    --linie: #2c3d43; --primaer: #6cc3c9; --primaer-tief: #9ad8dc; --primaer-schrift: #061a1c; --primaer-hauch: #17343a;
    --gut: #7ed6a5; --gut-grund: #143627; --warnung: #f4cf7a; --warnung-grund: #3a2e10; --fehler: #ff9d85;
    --fehler-grund: #3d1e17; --fehler-schrift: #1d0904; --fokus: #8ab4f8;
  }
}
:root[data-farbe="dunkel"] {
  --grund: #0f1618; --flaeche: #162125; --flaeche-2: #1e2c31; --schrift: #e3ebea; --leise: #a1b2b5;
  --linie: #2c3d43; --primaer: #6cc3c9; --primaer-tief: #9ad8dc; --primaer-schrift: #061a1c; --primaer-hauch: #17343a;
  --gut: #7ed6a5; --gut-grund: #143627; --warnung: #f4cf7a; --warnung-grund: #3a2e10; --fehler: #ff9d85;
  --fehler-grund: #3d1e17; --fehler-schrift: #1d0904; --fokus: #8ab4f8;
  color-scheme: dark;
}
:root[data-farbe="hell"] { color-scheme: light; }

/* ------------------------------ Grundlage ------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: "Atkinson", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.6em; font-weight: 700; }
h1 { font-size: 2rem; letter-spacing: -0.01em; }
h2 { font-size: 1.45rem; margin-top: 1.6em; }
h3 { font-size: 1.12rem; margin-top: 1.4em; }
p, ul, ol, dl { margin: 0 0 1em; }
a { color: var(--primaer); text-underline-offset: 0.18em; }
a:hover { color: var(--primaer-tief); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
[hidden] { display: none !important; }
.leise { color: var(--leise); }
.gross { font-size: 1.15rem; }
code, .code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.95em; }

.sprung { position: absolute; left: -999px; top: 0.5rem; background: var(--flaeche); padding: 0.5rem 1rem; z-index: 10; }
.sprung:focus { left: 0.5rem; }

/* ------------------------------ Kopf mit Rücken ------------------------------ */

.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf-innen {
  max-width: var(--breite); margin: 0 auto; padding: 0.7rem 1rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.marke { display: inline-flex; align-items: stretch; gap: 0.6rem; text-decoration: none; color: var(--schrift); }
.marke-ruecken { width: 6px; border-radius: 3px; background: var(--akzent); }
.marke-name { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; padding: 0.1rem 0; }
.marke-zusatz { align-self: center; color: var(--leise); font-size: 0.95rem; border-left: 1px solid var(--linie); padding-left: 0.6rem; }
.kopf-nav { margin-left: auto; display: flex; gap: 0.3rem 1rem; align-items: center; flex-wrap: wrap; }
.kopf-nav a { text-decoration: none; padding: 0.3rem 0.1rem; color: var(--schrift); }
.kopf-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--akzent); }
.kopf-nav .leise { font-size: 0.92rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-nav a, .kopf-nav button { min-height: 2.25rem; display: inline-flex; align-items: center; }

.band { background: var(--warnung-grund); color: var(--warnung); border-bottom: 1px solid var(--linie); padding: 0.55rem 1rem; text-align: center; font-weight: 700; }
.band.test { background: var(--primaer-hauch); color: var(--primaer-tief); }

/* ------------------------------ Inhalt und Fuss ------------------------------ */

.inhalt { flex: 1; width: 100%; max-width: var(--breite); margin: 0 auto; padding: 2rem 1rem 3rem; }
.inhalt:focus { outline: none; }
.schmal { max-width: 30rem; }
.text { max-width: var(--text-breite); }
.text h1 { margin-bottom: 0.3em; }

.fuss { border-top: 1px solid var(--linie); background: var(--flaeche); font-size: 0.92rem; color: var(--leise); }
.fuss-innen { max-width: var(--breite); margin: 0 auto; padding: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; }
.fuss nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.fuss a { color: var(--leise); }
.kontrollzeile { margin: 0; }
.kontrollzeile.warnung { color: var(--fehler); font-weight: 700; }
.farbwahl { margin-left: auto; display: inline-flex; border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; }
.farbwahl button { border: 0; background: transparent; color: var(--leise); padding: 0.25rem 0.6rem; font: inherit; font-size: 0.85rem; cursor: pointer; }
.farbwahl button[aria-pressed="true"] { background: var(--flaeche-2); color: var(--schrift); }

/* ------------------------------ Startseite ------------------------------ */

.auftakt { border-left: 8px solid var(--akzent); padding: 0.5rem 0 0.5rem 1.5rem; margin: 1.5rem 0 3rem; max-width: 50rem; }
.auftakt-name { font-weight: 700; color: var(--primaer); margin-bottom: 0.4rem; font-size: 1.1rem; }
.auftakt-satz { font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 0.6em; }
.auftakt-text { font-size: 1.15rem; color: var(--leise); max-width: 38rem; }
.code-eingang { max-width: 36rem; border-top: 1px solid var(--linie); padding-top: 1.5rem; }
.code-eingang h2 { margin-top: 0; }

/* ------------------------------ Knöpfe ------------------------------ */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.75rem; padding: 0.5rem 1.15rem; border-radius: var(--rund);
  border: 2px solid var(--primaer); background: var(--primaer); color: var(--primaer-schrift);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.knopf:hover { background: var(--primaer-tief); border-color: var(--primaer-tief); color: var(--primaer-schrift); }
.knopf.zweit { background: transparent; color: var(--primaer); }
.knopf.zweit:hover { background: var(--primaer-hauch); color: var(--primaer-tief); }
.knopf.gefahr { background: var(--fehler); border-color: var(--fehler); color: var(--fehler-schrift); }
.knopf.klein { min-height: 2.1rem; padding: 0.25rem 0.7rem; font-size: 0.92rem; }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.knopf[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.knopf-text { background: none; border: 0; padding: 0.25rem 0; min-height: 2.25rem; color: var(--primaer); font: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.knopf-text.gefahr { color: var(--fehler); }
.knopfzeile { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ------------------------------ Formulare ------------------------------ */

.formular { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.formular > .knopf, .formular > button, .formular > .knopfzeile { justify-self: start; }
.feld { display: grid; gap: 0.3rem; }
label, legend { font-weight: 700; }
fieldset { border: 1px solid var(--linie); border-radius: var(--rund); padding: 0.75rem 1rem 1rem; margin: 0; display: grid; gap: 0.75rem; }
input, select, textarea {
  font: inherit; color: var(--schrift); background: var(--flaeche);
  border: 1px solid var(--leise); border-radius: var(--rund); padding: 0.55rem 0.7rem; min-height: 2.75rem; width: 100%;
}
textarea { min-height: 6rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; min-height: 1.25rem; accent-color: var(--primaer); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--fehler); border-width: 2px; }
.feld-haken { grid-template-columns: auto 1fr; align-items: start; column-gap: 0.6rem; }
.feld-haken label { font-weight: 400; }
.feld-haken .feldfehler { grid-column: 1 / -1; }
/* Passwortfeld mit Knopf «Anzeigen» (kern.js, passwortAuge). */
.passwort-huelle { display: flex; align-items: stretch; }
.passwort-huelle input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.passwort-auge {
  flex: 0 0 auto; font: inherit; font-size: 0.92rem; font-weight: 700; color: var(--primaer); background: var(--flaeche-2);
  border: 1px solid var(--leise); border-left: 0; border-radius: 0 var(--rund) var(--rund) 0; padding: 0 0.8rem; min-width: 6.2rem; cursor: pointer;
}
.passwort-auge:hover { color: var(--primaer-tief); }
.passwort-huelle input[aria-invalid="true"] + .passwort-auge { border-color: var(--fehler); border-width: 2px 2px 2px 0; }
.feldhilfe { margin: 0; font-size: 0.92rem; color: var(--leise); }
.feldfehler { margin: 0; color: var(--fehler); font-weight: 700; font-size: 0.95rem; display: none; }
.feldfehler.sichtbar { display: block; }
.koeder { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zeile-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 1rem 0; }
.zeile-form label { flex-basis: 100%; }
.zeile-form input, .zeile-form select { flex: 1 1 14rem; width: auto; }
.trenner { border-top: 1px solid var(--linie); padding-top: 1rem; margin-top: 1.5rem; }

/* ------------------------------ Hinweise und Zustände ------------------------------ */

.hinweis { background: var(--primaer-hauch); border-left: 4px solid var(--primaer); padding: 0.75rem 1rem; border-radius: 0 var(--rund) var(--rund) 0; }
.hinweis.warnung { background: var(--warnung-grund); border-color: var(--warnung); color: var(--schrift); }
.hinweis.fehler { background: var(--fehler-grund); border-color: var(--fehler); }
.hinweis > :last-child { margin-bottom: 0; }
.zustand { padding: 2rem 0; color: var(--leise); }
.zustand[data-zustand="fehler"] { color: var(--fehler); }
.zustand[data-zustand="leer"] { border: 2px dashed var(--linie); border-radius: var(--rund); padding: 1.5rem; text-align: center; }

.meldungen { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: 0.5rem; z-index: 20; max-width: min(26rem, calc(100vw - 2rem)); }
.meldung { background: var(--schrift); color: var(--grund); padding: 0.75rem 1rem; border-radius: var(--rund); border-left: 6px solid var(--akzent); }
.meldung.fehler { border-left-color: var(--fehler); }
.meldung { display: flex; gap: 0.75rem; align-items: start; overflow-wrap: anywhere; }
.meldung > span { flex: 1; }
.meldung-zu { background: none; border: 0; color: inherit; font: inherit; font-size: 1.3rem; line-height: 1; padding: 0 0.2rem; min-width: 2rem; min-height: 2rem; cursor: pointer; }

/* Rückfrage vor Folgenreichem (App.bestaetigen). */
.dialog { border: 1px solid var(--linie); border-radius: var(--rund); background: var(--flaeche); color: var(--schrift); padding: 1.25rem 1.5rem; max-width: min(32rem, calc(100vw - 2rem)); }
.dialog::backdrop { background: rgba(10, 20, 24, 0.55); }
.dialog h2 { margin-top: 0; font-size: 1.3rem; }
.dialog-form { display: grid; gap: 0.75rem; }
.dialog .knopfzeile { margin: 0.5rem 0 0; }

/* Lange Adressen und Links brechen um, statt die Seite zu verbreitern
   (eine Mailadresse mit 60 Zeichen auf dem Handy, Prüfung vom 14.10.2026). */
.umbruch, .angaben dd, .liste > li > span, td { overflow-wrap: anywhere; }
.einladung-ergebnis code { word-break: break-all; }

/* ------------------------------ Listen, Tabellen, Angaben ------------------------------ */

.liste { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--linie); }
.liste > li { border-bottom: 1px solid var(--linie); padding: 0.7rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; }
.liste .rechts { margin-left: auto; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.marker { display: inline-block; font-size: 0.82rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--flaeche-2); color: var(--leise); }
.marker.gut { background: var(--gut-grund); color: var(--gut); }
.marker.warnung { background: var(--warnung-grund); color: var(--warnung); }
.marker.fehler { background: var(--fehler-grund); color: var(--fehler); }
.angaben { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.3rem 1.5rem; }
.angaben dt { color: var(--leise); }
.angaben dd { margin: 0; }
.tabelle-huelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--rund); margin-bottom: 1.5rem; background: var(--flaeche); }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { background: var(--flaeche-2); font-weight: 700; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------ Konto ------------------------------ */

.konto-raster { display: grid; grid-template-columns: 13rem 1fr; gap: 2.5rem; align-items: start; }
.seitenleiste { position: sticky; top: 1rem; display: grid; gap: 0.15rem; border-left: 3px solid var(--linie); }
.seitenleiste a { padding: 0.35rem 0.9rem; text-decoration: none; color: var(--schrift); margin-left: -3px; border-left: 3px solid transparent; }
.seitenleiste a:hover, .seitenleiste a.aktiv { border-left-color: var(--akzent); }
.konto-inhalt { max-width: 46rem; }
.abschnitt { padding-bottom: 1.5rem; border-bottom: 1px solid var(--linie); margin-bottom: 2rem; scroll-margin-top: 1rem; }
.abschnitt:last-child { border-bottom: 0; }
.abschnitt > h1, .abschnitt > h2 { margin-top: 0; }
.konto-titel { margin-top: 0; }
.passwort-laenge:empty { display: none; }
.passwort-laenge.gut { color: var(--gut); }
.raum-detail { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1rem 1.25rem; margin-top: 1rem; }
.raum-detail h3 { margin-top: 0; }
.qr-feld { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.qr-feld svg { background: #fff; padding: 8px; border-radius: var(--rund); width: 180px; height: 180px; }
.codes { columns: 2; font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; padding-left: 1.2rem; }
.plaene { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.plan { border: 1px solid var(--linie); border-radius: var(--rund); padding: 1rem; background: var(--flaeche); display: grid; gap: 0.5rem; align-content: start; }
.plan.aktuell { border: 2px solid var(--primaer); }
.plan h3 { margin: 0; }
.plan .marker, .plan .knopf { justify-self: start; }
.plan .preis { font-weight: 700; font-size: 1.1rem; }

/* ------------------------------ Konsole ------------------------------ */

.reiter { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 2px solid var(--linie); margin-bottom: 1.5rem; }
.reiter button { font: inherit; background: none; border: 0; padding: 0.6rem 0.9rem; color: var(--leise); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.reiter button[aria-selected="true"] { color: var(--schrift); font-weight: 700; border-bottom-color: var(--akzent); }
.reiter button { min-height: 2.75rem; }
.adresse-knopf { text-align: left; }
.ampeln { display: grid; gap: 0; border-top: 1px solid var(--linie); margin-bottom: 2rem; }
.ampel { display: grid; grid-template-columns: 1rem 10rem 1fr; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--linie); align-items: baseline; }
.ampel-punkt { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--gut); align-self: center; }
.ampel.schlecht .ampel-punkt { background: var(--fehler); }
.ampel strong { font-weight: 700; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0; border: 1px solid var(--linie); border-radius: var(--rund); background: var(--flaeche); margin-bottom: 2rem; }
.kennzahl { padding: 0.9rem 1rem; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.kennzahl b { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.kennzahl span { color: var(--leise); font-size: 0.92rem; }
.balken { display: flex; align-items: end; gap: 4px; height: 4rem; margin: 0.5rem 0 2rem; }
.balken span { flex: 1; background: var(--primaer); border-radius: 2px 2px 0 0; min-height: 2px; }

/* ------------------------------ Arbeit ------------------------------ */

.raumwahl { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1.5rem; }
.raumwahl select { width: auto; min-width: 14rem; }
.arbeit-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.tn-leiste { display: flex; justify-content: space-between; align-items: center; color: var(--leise); }

/* ------------------------------ Schmale Bildschirme ------------------------------ */

@media (max-width: 760px) {
  .konto-raster { grid-template-columns: 1fr; gap: 1rem; }
  .seitenleiste { position: static; display: flex; flex-wrap: wrap; border-left: 0; border-bottom: 1px solid var(--linie); padding-bottom: 0.5rem; }
  .seitenleiste a { margin-left: 0; border-left: 0; padding: 0.3rem 0.6rem 0.3rem 0; }
  .ampel { grid-template-columns: 1rem 1fr; }
  .ampel span:last-child { grid-column: 2; }
  .farbwahl { margin-left: 0; }
  h1 { font-size: 1.7rem; }
  /* Die Adresse im Kopf hat auf dem Handy keinen Platz; sie steht auf der Kontoseite. */
  .kopf-nav .leise { display: none; }
  .angaben { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .angaben dd { margin-bottom: 0.6rem; }
  /* Tabellen der Konsole werden zu Karten: jede Zeile ein Block, jede Zelle
     mit ihrer Spaltenüberschrift davor (data-label aus konsole.js). */
  .karten-schmal { border: 0; background: none; overflow: visible; }
  .karten-schmal thead { position: absolute; left: -9999px; }
  .karten-schmal table, .karten-schmal tbody, .karten-schmal tr, .karten-schmal td { display: block; width: 100%; }
  .karten-schmal tr { border: 1px solid var(--linie); border-radius: var(--rund); background: var(--flaeche); margin-bottom: 0.75rem; padding: 0.4rem 0; }
  .karten-schmal td { border: 0; padding: 0.3rem 0.9rem; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; }
  .karten-schmal td[data-label]::before { content: attr(data-label); color: var(--leise); font-size: 0.88rem; }
  .karten-schmal td:not([data-label]), .karten-schmal td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  .karten-schmal td.zahl { text-align: left; }
}

/* ------------------------------ Klassenzugang (Kern 1.4.0) ------------------------------ */

/* Anmeldung mit Karte: grosse Ziele für Kinderfinger, mindestens 3rem. */
.ue-anmeldung { max-width: 36rem; margin: 0 auto; }
/* Die Überschrift bekommt den Fokus nur, damit ein Screenreader den neuen Schritt vorliest; ein Rahmen darum sähe wie ein Fehler aus. */
.ue-anmeldung h1:focus, .klassen h1:focus { outline: none; }
.ue-schritt.ue-breit { max-width: 36rem; }
.ue-schritt h1 { margin-top: 0.5rem; }
#ue-code { font-size: 1.5rem; letter-spacing: 0.2em; text-transform: uppercase; max-width: 12rem; }
.ue-meldung { margin: 0.75rem 0; color: var(--fehler); font-weight: 700; display: none; }
.ue-meldung.sichtbar { display: block; }
.ue-namen { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.6rem; margin: 1rem 0; }
.ue-namen .knopf { width: 100%; min-height: 3.5rem; font-size: 1.1rem; }
.ue-plaetze { display: flex; justify-content: center; gap: 0.75rem; margin: 1rem 0; }
.ue-platz { width: 4.5rem; height: 4.5rem; border-radius: 1rem; border: 2px dashed var(--linie); background: var(--flaeche-2);
  display: flex; align-items: center; justify-content: center; }
.ue-platz svg { width: 3.25rem; height: 3.25rem; }
.ue-symbole { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin: 0.5rem 0 1rem; }
.ue-symbol { appearance: none; border: 1px solid var(--linie); background: #fff; border-radius: 1rem; padding: 0.6rem; min-height: 4.25rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ue-symbol svg { width: 3rem; height: 3rem; }
.ue-symbol:active { transform: scale(0.96); }
.ue-symbol:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.ue-symbol:disabled { opacity: 0.5; cursor: default; }
.ue-leiste { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; color: var(--leise); }

/* Klassen der Lehrperson. */
.kl-kacheln { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
.kl-kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 0.9rem 1rem; }
.kl-kachel.archiviert { opacity: 0.75; }
.kl-kachel h2 { margin: 0 0 0.3rem; font-size: 1.15rem; }
.kl-kachel p { margin: 0.2rem 0; }
.kl-code, .kk-code { letter-spacing: 0.15em; font-variant-numeric: tabular-nums; }
.kl-warnung { background: var(--warnung-grund); color: var(--warnung); border-radius: var(--rund); padding: 0.6rem 0.8rem; }
.kl-tabelle tr.gesperrt th, .kl-tabelle tr.gesperrt td { color: var(--leise); }
.kl-tun { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.kl-person-knoepfe { display: grid; gap: 0.5rem; }
.kl-person-fuss { justify-content: space-between; margin-top: 1.25rem; }
.kl-name b { font-weight: 700; }
.kl-hinzu, .kl-einstellungen, .kl-verwalten { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linie); max-width: 40rem; }
.kl-einstellungen fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.kl-einstellungen .wahl { margin: 0.3rem 0; }

/* Zugangskarten: auf Papier in Schwarz auf Weiss, zwei Spalten. */
.kk-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0.9rem; margin-top: 1rem; }
.kk-karte { border: 2px solid #111; border-radius: 0.9rem; padding: 0.75rem 0.9rem; background: #fff; color: #111; break-inside: avoid; }
.kk-kopf { display: flex; gap: 0.5rem; font-size: 0.95rem; }
.kk-kopf span { margin-left: auto; color: #444; }
.kk-mitte { display: flex; gap: 0.75rem; align-items: center; margin: 0.5rem 0; }
.kk-qr { width: 96px; height: 96px; flex: none; }
.kk-adresse { font-size: 0.8rem; color: #444; word-break: break-all; }
.kk-feld small { display: block; font-size: 0.75rem; color: #555; }
.kk-feld b { font-size: 1.25rem; }
.kk-bilder { display: flex; justify-content: center; gap: 0.9rem; }
.kk-bilder svg { width: 3.4rem; height: 3.4rem; }
.kk-hinweis { text-align: center; font-size: 0.8rem; color: #444; margin-top: 0.25rem; }
.kk-echt { margin: 0.15rem 0 0.2rem; }
.kk-linie { display: block; min-width: 9rem; height: 1.3rem; border-bottom: 1px solid #555; }

@media print {
  .kk-steuerung, .raumwahl { display: none !important; }
  .kk-karten { grid-template-columns: repeat(2, 1fr); gap: 8mm; }
  .kk-karte { border-color: #000; }
}

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

@media print {
  .kopf, .fuss, .meldungen, .band, .seitenleiste, .knopf, .knopf-text { display: none !important; }
  body { background: #fff; color: #000; }
}