:root{
  --grund:#f4f6f8; --karte:#fff; --rand:#dde3ea; --rand-stark:#c3ccd7;
  --text:#16202b; --text-leise:#5b6b7c; --text-sehr-leise:#8493a3;
  --akzent:#1f6feb; --akzent-text:#fff; --akzent-weich:#e8f0fe;
  --gut:#127a45; --gut-weich:#e2f4ea;
  --warn:#9a5b00; --warn-weich:#fdf1dd;
  --schlecht:#b3261e; --schlecht-weich:#fbe9e7;
  --schatten:0 1px 2px rgba(16,32,48,.06), 0 4px 12px rgba(16,32,48,.05);
  --radius:14px; --radius-klein:10px;
  --sicher-unten:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{
    --grund:#11161c; --karte:#1a2129; --rand:#2b3540; --rand-stark:#3d4a58;
    --text:#e7edf4; --text-leise:#9fb0c2; --text-sehr-leise:#74879b;
    --akzent:#5a9bff; --akzent-text:#0b1219; --akzent-weich:#1b2c45;
    --gut:#5bd394; --gut-weich:#14301f; --warn:#f0b354; --warn-weich:#33270f;
    --schlecht:#ff8a80; --schlecht-weich:#3a1c19;
    --schatten:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.3);
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--grund);color:var(--text);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  padding-bottom:calc(70px + var(--sicher-unten));
  overflow-x:hidden;
}
a{color:var(--akzent);text-decoration:none}
h1{font-size:1.35rem;margin:0 0 2px;letter-spacing:-.01em}
h2{font-size:1.05rem;margin:22px 0 10px;letter-spacing:-.01em}
h3{font-size:.9rem;margin:0 0 8px;color:var(--text-leise);font-weight:600;
   text-transform:uppercase;letter-spacing:.05em}
small{font-size:.8rem}
.ic{width:22px;height:22px;flex:none}

/* --------------------------------------------------------------- Kopf/Nav */
.kopf{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 16px;background:var(--karte);border-bottom:1px solid var(--rand);
}
.marke img{display:block;max-width:150px;height:auto}
/* Dunkelmodus: das Logo NICHT umfaerben. Die frühere Farbumkehr (invert +
   hue-rotate) passte nur zu einfarbig dunklen Logos und verfaelschte jedes
   farbige - hartwaretotal wurde z. B. braun-schwarz. Stattdessen steht das
   Logo in Originalfarben auf einem hellen Schild. */
@media (prefers-color-scheme:dark){.marke img{background:#fff;padding:3px 6px;border-radius:6px}}
.kopf-rechts{display:flex;align-items:center;gap:12px;min-width:0}
.wer{display:flex;flex-direction:column;line-height:1.15;text-align:right;min-width:0}
.wer small{color:var(--text-sehr-leise)}
.abmelden{font-size:.85rem;color:var(--text-leise);white-space:nowrap}

.tableiste{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  background:var(--karte);border-top:1px solid var(--rand);
  padding-bottom:var(--sicher-unten);
}
.tableiste a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 4px 8px;color:var(--text-sehr-leise);font-size:.72rem;font-weight:500;
}
.tableiste a.an{color:var(--akzent)}
.tableiste a.an .ic{stroke-width:2.2}

.inhalt{max-width:820px;margin:0 auto;padding:16px 16px 24px}

/* Verborgen heisst verborgen (23.10.2026): .knopf u. a. setzen display selbst
   und schlugen damit das hidden-Attribut. So stand „Änderungen speichern“ der
   Personalakte auch im Reiter „Zugang“ – ganz oben, weil die Stammdaten dort
   verborgen sind. Gleiches galt fuer die Teilen-Knoepfe ohne navigator.share. */
[hidden]{display:none!important}

/* ------------------------------------------------------------------ Karten */
.karte{
  background:var(--karte);border:1px solid var(--rand);border-radius:var(--radius);
  padding:16px;margin-bottom:14px;box-shadow:var(--schatten);
}
.karte.schmal{padding:12px 14px}
.karte-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.karte-kopf h2,.karte-kopf h1{margin:0}

/* ------------------------------------------------------------- Stempeluhr */
.stempel{text-align:center;padding:24px 16px}
.stempel .laufzeit{
  font-size:3.2rem;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  line-height:1.05;margin:6px 0 2px;
}
.stempel .seit{color:var(--text-leise);font-size:.9rem}
.stempel .wo{margin-top:10px;color:var(--text-leise);font-size:.95rem}
.knopf-gross{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;max-width:340px;margin-top:18px;padding:18px 24px;
  font-size:1.15rem;font-weight:600;border:0;border-radius:var(--radius);
  background:var(--akzent);color:var(--akzent-text);cursor:pointer;
  box-shadow:0 4px 14px rgba(31,111,235,.25);
}
.knopf-gross.stop{background:var(--schlecht);box-shadow:0 4px 14px rgba(179,38,30,.25)}
.knopf-gross:active{transform:translateY(1px)}
.knopf-gross:disabled{opacity:.6}

/* ------------------------------------------------------------------ Knöpfe */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 16px;border-radius:var(--radius-klein);border:1px solid var(--rand-stark);
  background:var(--karte);color:var(--text);font-size:.95rem;font-weight:550;
  cursor:pointer;line-height:1.2;
}
.knopf:active{transform:translateY(1px)}
.knopf.haupt{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-text)}
.knopf.gefahr{color:var(--schlecht);border-color:var(--schlecht)}
.knopf.klein{padding:7px 11px;font-size:.85rem}
.knopf.voll{width:100%}
.knopf-reihe{display:flex;gap:8px;flex-wrap:wrap}
.knopf-reihe.rechts{justify-content:flex-end}

/* ---------------------------------------------------------------- Formular */
.feld{margin-bottom:14px}
.feld label{display:block;font-size:.85rem;font-weight:600;color:var(--text-leise);margin-bottom:5px}
.feld .hilfe{font-size:.8rem;color:var(--text-sehr-leise);margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],
input[type=number],input[type=tel],input[type=datetime-local],select,textarea{
  width:100%;padding:12px 13px;font-size:16px;font-family:inherit;color:var(--text);
  background:var(--grund);border:1px solid var(--rand-stark);border-radius:var(--radius-klein);
}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--akzent);outline-offset:-1px;border-color:var(--akzent);
}
.reihe{display:flex;gap:10px}
.reihe>*{flex:1;min-width:0}
.schalter{display:flex;align-items:center;gap:10px;padding:11px 0;cursor:pointer}
.schalter input{width:20px;height:20px;flex:none;accent-color:var(--akzent)}
.schalter span{font-size:.95rem}
/* min-width:0 - sonst ist ein fieldset mindestens so breit wie sein Inhalt, und die
   Reiterleiste der Tagesansicht (nowrap) schoebe die Seite am Telefon zur Seite. */
fieldset{border:0;padding:0;margin:0 0 6px;min-width:0}
.zahl-eingabe{font-variant-numeric:tabular-nums;text-align:right}

/* ------------------------------------------------------------------- Liste */
.liste{list-style:none;margin:0;padding:0}
.liste li{
  display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--rand);
}
.liste li:last-child{border-bottom:0}
.liste a.zeile{display:flex;align-items:center;gap:12px;flex:1;color:inherit;min-width:0}
.zeile-haupt{flex:1;min-width:0}
.zeile-titel{font-weight:550;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zeile-unter{font-size:.85rem;color:var(--text-leise);display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zeile-wert{font-variant-numeric:tabular-nums;font-weight:600;text-align:right;white-space:nowrap}

/* ---------------------------------------------------------------- Monatstag */
.tagzeile{display:flex;align-items:stretch;gap:0;border-bottom:1px solid var(--rand);color:inherit}
.tagzeile:last-child{border-bottom:0}
.tagzeile .datum{
  flex:none;width:52px;padding:11px 0;text-align:center;line-height:1.2;
}
.tagzeile .datum b{display:block;font-size:1.05rem;font-variant-numeric:tabular-nums}
.tagzeile .datum span{font-size:.72rem;color:var(--text-sehr-leise);text-transform:uppercase}
.tagzeile .mitte{flex:1;min-width:0;padding:11px 8px;display:flex;flex-direction:column;justify-content:center}
.tagzeile .mitte b{font-weight:550;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tagzeile .mitte span{font-size:.82rem;color:var(--text-leise);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tagzeile .rechts{flex:none;padding:11px 0;text-align:right;font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;justify-content:center;gap:2px}
.tagzeile .rechts b{font-size:1rem}
.tagzeile .rechts span{font-size:.75rem;color:var(--text-sehr-leise)}
.tagzeile.wochenende{background:color-mix(in srgb,var(--grund) 55%,transparent)}
.tagzeile.feiertag .datum b{color:var(--schlecht)}
.tagzeile.heute{background:var(--akzent-weich)}
.tagzeile.heute .datum b{color:var(--akzent)}
.tagzeile.leer .mitte span{color:var(--text-sehr-leise)}
.marker{display:inline-flex;gap:4px;margin-left:6px;vertical-align:-2px}
.marker .ic{width:14px;height:14px;color:var(--text-sehr-leise)}

/* ----------------------------------------------------------------- Statuen */
.badge{
  display:inline-block;padding:3px 9px;border-radius:999px;font-size:.75rem;font-weight:600;
  background:var(--akzent-weich);color:var(--akzent);white-space:nowrap;
}
.badge.gut{background:var(--gut-weich);color:var(--gut)}
.badge.warten{background:var(--warn-weich);color:var(--warn)}
.badge.schlecht{background:var(--schlecht-weich);color:var(--schlecht)}
.badge.neutral{background:var(--grund);color:var(--text-leise)}

.hinweis{
  padding:12px 14px;border-radius:var(--radius-klein);margin-bottom:14px;font-size:.92rem;
  background:var(--akzent-weich);color:var(--text);border:1px solid transparent;
}
.hinweis.erfolg{background:var(--gut-weich);color:var(--gut)}
.hinweis.fehler{background:var(--schlecht-weich);color:var(--schlecht)}
.hinweis.warnung{background:var(--warn-weich);color:var(--warn)}
.hinweis a{color:inherit;text-decoration:underline}

/* --------------------------------------------------------------- Kennzahlen */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.kachel{background:var(--karte);border:1px solid var(--rand);border-radius:var(--radius-klein);padding:13px 14px}
.kachel .wert{font-size:1.5rem;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kachel .beschriftung{font-size:.8rem;color:var(--text-leise);margin-top:1px}
.kachel.gut .wert{color:var(--gut)}
.kachel.warn .wert{color:var(--warn)}
/* Anklickbare Kennzahl: fuehrt dorthin, wo die Zahl herkommt. Ohne das war
   die Kachel eine Sackgasse - man las "3 Antraege offen" und musste sie
   anschliessend im Menue suchen. */
a.kachel{display:block;color:inherit;text-decoration:none;transition:border-color .12s}
a.kachel:hover,a.kachel:focus-visible{border-color:var(--rand-stark);background:var(--karte)}
a.kachel .beschriftung::after{content:" ›";color:var(--text-sehr-leise);font-weight:600}

/* --------------------------------------------------------------- Reiter
   Unterstrichene Reiter statt gefuellter Pillen: Die Seite hat schon
   Kennzahlkacheln und Listenkarten: ein dritter farbiger Block daneben war zu
   laut. Die Linie fuehrt das Auge, ohne selbst aufzufallen. Am Telefon laesst
   sich die Leiste seitlich schieben, statt umzubrechen. */
.reiter{
  display:flex;gap:20px;overflow-x:auto;margin:18px 0 16px;
  border-bottom:1px solid var(--rand);
  scrollbar-width:none;-ms-overflow-style:none;
}
.reiter::-webkit-scrollbar{display:none}
/* Zentriert (24.09.2026). Ueber die aeusseren Rand-Automatik statt
   justify-content:center: passt die Leiste nicht in die Breite, fallen die
   Raender auf 0 und sie laesst sich wie bisher vom ersten Reiter an schieben -
   bei center waere der Anfang links abgeschnitten und unerreichbar. */
.reiter a:first-child{margin-left:auto}
.reiter a:last-child{margin-right:auto}
.reiter a{
  display:flex;align-items:center;gap:7px;white-space:nowrap;flex:0 0 auto;
  padding:9px 1px 10px;margin-bottom:-1px;
  border-bottom:2px solid transparent;
  color:var(--text-leise);font-size:.94rem;font-weight:600;letter-spacing:-.01em;
}
.reiter a:hover{color:var(--text)}
.reiter a.an{color:var(--text);border-bottom-color:var(--akzent)}
.reiter a .zahl{
  min-width:20px;padding:1px 6px;border-radius:999px;
  background:var(--warn-weich);color:var(--warn);
  font-size:.75rem;font-weight:700;line-height:1.45;text-align:center;
  font-variant-numeric:tabular-nums;
}
/* --------------------------------------------- Verwaltungsleiste (1.3.4)
   Auf jeder Seite der Verwaltung ganz oben, als eigene Karte wie der Rest der
   Seite: oben die Gruppen (unterstrichen), darunter auf abgesetztem Grund die
   Seiten der aktuellen Gruppe als kleine Knoepfe. So wechselt man mit einem
   Klick, statt ueber die Startseite zu gehen. Ersetzt die frueheren
   Zurueck-Verweise "Verwaltung" ueber den Ueberschriften. */
.admin-menue{
  background:var(--karte);border:1px solid var(--rand);border-radius:var(--radius);
  box-shadow:var(--schatten);margin:0 0 20px;overflow:hidden;
}
/* Umbrechen statt seitlich schieben (23.10.2026): am Telefon stehen Gruppen
   und Seiten in mehreren Zeilen, keine verschwindet rechts aus dem Bild. */
.admin-menue .reiter{margin:0;padding:0 16px;flex-wrap:wrap;justify-content:center;column-gap:18px;
  -webkit-mask-image:none;mask-image:none}
.admin-menue .reiter a:first-child,.admin-menue .reiter a:last-child{margin-left:0;margin-right:0}
.admin-menue .reiter:last-child{border-bottom:0}
.reiter-unter{
  display:flex;gap:6px;overflow-x:auto;padding:10px 16px;background:var(--grund);
  scrollbar-width:none;-ms-overflow-style:none;
}
.reiter-unter::-webkit-scrollbar{display:none}
.reiter-unter{flex-wrap:wrap;justify-content:center}
.reiter-unter a{
  flex:0 0 auto;white-space:nowrap;padding:5px 12px;border-radius:999px;
  border:1px solid var(--rand);background:var(--karte);
  color:var(--text-leise);font-size:.84rem;font-weight:600;text-decoration:none;
}
.reiter-unter a:hover{color:var(--text)}
.reiter-unter a.an{background:var(--akzent-weich);border-color:transparent;color:var(--akzent)}

/* ------------------------------------------------------ Reiter auf Seiten
   Seit 1.3.4 (23.10.2026): Die Kaesten einer Seite liegen wie Browser-Reiter
   uebereinander (zuerst die Personalakte, dann alle Verwaltungsseiten mit
   mehreren Kaesten). Der aktive Reiter geht nahtlos in den ersten Kasten
   darunter ueber: Die Grundlinie zeichnet die Leiste selbst (Verlauf als
   Hintergrund), der aktive Reiter deckt sie mit Kartenfarbe ab. Ein negativer
   Rand ginge nicht, weil die Leiste am Telefon seitlich scrollt und dabei
   unten abschneidet. Welcher Kasten anschliesst, markiert app.js. */
.tafel-reiter{
  display:flex;gap:3px;overflow-x:auto;margin:16px 0 0;padding:0 2px;
  background:linear-gradient(to top,var(--rand) 1px,transparent 1px);
  scrollbar-width:none;-ms-overflow-style:none;
}
.tafel-reiter[hidden]{display:none}
.tafel-reiter::-webkit-scrollbar{display:none}
/* Die Reiter teilen sich die Breite, ohne zu kuerzen. Passen sie nicht
   hinein, schaltet app.js auf .gitter um (siehe unten) - frueher schob sich
   die Leiste am Telefon seitlich, und Reiter rechts davon fielen nicht auf. */
.tafel-reiter a{
  flex:1 0 auto;white-space:nowrap;
  padding:8px 10px 9px;text-align:center;
  border:1px solid var(--rand);border-bottom:0;border-radius:9px 9px 0 0;
  background:color-mix(in srgb,var(--rand) 40%,var(--grund));
  color:var(--text-leise);font-size:.84rem;font-weight:600;text-decoration:none;
}
.tafel-reiter a:hover{color:var(--text);background:color-mix(in srgb,var(--rand) 15%,var(--karte))}
.tafel-reiter a.an{
  background:var(--karte);color:var(--text);
  box-shadow:inset 0 3px 0 var(--akzent);
}
.tafel-reiter a .zahl{
  display:inline-block;min-width:18px;margin-left:5px;padding:0 5px;border-radius:999px;
  background:var(--warn-weich);color:var(--warn);
  font-size:.72rem;font-weight:700;line-height:1.5;text-align:center;
}
/* Gitter (23.10.2026): Passt die Leiste nicht in die Breite - am Telefon oder
   in einem schmalen Fenster -, stehen die Reiter als Kacheln in mehreren
   Zeilen. So bleibt jeder Reiter sichtbar, nichts verschwindet seitlich.
   Der Kasten darunter bekommt dann wieder seinen vollen Rahmen. */
.tafel-reiter.gitter{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;
  margin:14px 0 12px;padding:0;background:none;overflow:visible;
}
.tafel-reiter.gitter a{
  display:flex;align-items:center;justify-content:center;gap:4px;
  white-space:normal;line-height:1.25;padding:9px 8px;
  border:1px solid var(--rand);border-radius:var(--radius-klein);background:var(--karte);
}
.tafel-reiter.gitter a.an{
  background:var(--akzent-weich);border-color:var(--akzent);color:var(--akzent);box-shadow:none;
}
.reiterseite--an.reiterseite--gitter .tafel-anschluss{
  border-top:1px solid var(--rand);
  border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);
}
.reiterseite--an.reiterseite--gitter .tafel-frei{padding-top:0}
.reiterseite--an .tafel-titel{display:none}
.reiterseite--an .tafel[hidden]{display:none}
/* !important nur fuer margin-top: manche Kaesten tragen einen Abstand inline */
.reiterseite--an .tafel-anschluss{
  border-top:0;border-top-left-radius:0;border-top-right-radius:0;margin-top:0!important;
}
.reiterseite--an .tafel-frei{padding-top:14px}

/* Am Telefon andeuten, dass es seitlich weitergeht */
@media (max-width:560px){
  .reiter{gap:16px;padding-right:6px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
}

/* ------------------------------------------------------------------ Tabelle */
.tabelle-huelle{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px}
table.daten{width:100%;border-collapse:collapse;font-size:.9rem}
table.daten th,table.daten td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--rand);white-space:nowrap}
table.daten th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-leise);font-weight:600}
table.daten td.zahl,table.daten th.zahl{text-align:right;font-variant-numeric:tabular-nums}
table.daten tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------------ Summen */
.summen{list-style:none;margin:0;padding:0}
.summen li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--rand)}
.summen li:last-child{border-bottom:0}
.summen li.gesamt{font-weight:650;font-size:1.05rem;border-top:2px solid var(--rand-stark);margin-top:4px;padding-top:12px}
.summen .wert{font-variant-numeric:tabular-nums;white-space:nowrap}
.summen .leise{color:var(--text-leise);font-weight:400;font-size:.85rem}

/* -------------------------------------------------------------------- Login */
.login-seite{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:20px}
.login-karte{width:100%;max-width:380px;background:var(--karte);border:1px solid var(--rand);
  border-radius:var(--radius);padding:26px 24px;box-shadow:var(--schatten)}
.login-karte .logo{display:block;max-width:210px;margin:0 auto 20px}
@media (prefers-color-scheme:dark){.login-karte .logo{background:#fff;padding:8px 12px;border-radius:8px}}
.ms-knopf{
  display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  padding:12px 16px;border:1px solid var(--rand-stark);border-radius:var(--radius-klein);
  background:var(--karte);color:var(--text);font-size:.95rem;font-weight:550;cursor:pointer;
}
.trenner{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--text-sehr-leise);font-size:.82rem}
.trenner::before,.trenner::after{content:"";flex:1;height:1px;background:var(--rand)}

/* -------------------------------------------------------------------- Sonst */
.leer-hinweis{text-align:center;padding:32px 16px;color:var(--text-leise)}
.leer-hinweis p{margin:0 0 14px}
.zurueck{display:inline-flex;align-items:center;gap:4px;color:var(--text-leise);
  font-size:.9rem;margin-bottom:10px}
.zurueck .ic{width:18px;height:18px}
.monatswahl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.monatswahl .titel{font-weight:650;font-size:1.1rem}
.monatswahl a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--rand-stark);border-radius:var(--radius-klein);background:var(--karte);color:var(--text)}
.monatswahl a.aus{opacity:.35;pointer-events:none}
.fusszeile{text-align:center;color:var(--text-sehr-leise);font-size:.78rem;padding:18px 0 4px}
.pflicht{color:var(--schlecht)}
.gepruefte-warnung{border-left:3px solid var(--warn);padding-left:12px}

@media (min-width:700px){
  .inhalt{padding:24px 20px 32px}
  h1{font-size:1.6rem}
}

/* ------------------------------------------------- Kopierbare Adressen */
.linkkarte{
  border:1px solid var(--rand);border-radius:var(--radius-klein);
  padding:12px 13px;margin-bottom:10px;background:var(--grund);
}
.linkkarte .kopf{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.linkkarte .name{font-weight:650;font-size:1.02rem}
.linkkarte .projekt{font-size:.83rem;color:var(--text-leise)}
.linkkarte .adresse{
  display:block;width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.76rem;line-height:1.45;color:var(--text-leise);
  background:var(--karte);border:1px solid var(--rand);border-radius:8px;
  padding:9px 10px;margin-bottom:10px;
  word-break:break-all;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;
}
.linkkarte .knopf-reihe{gap:8px}
.linkkarte .knopf{flex:1 1 auto;min-width:0;justify-content:center}
.linkkarte .leer{color:var(--text-sehr-leise);font-size:.88rem;padding:4px 0 10px}
.kopiert{background:var(--gut)!important;border-color:var(--gut)!important;color:#fff!important}

/* -------------------------- Breite Tabellen am Handy gestapelt anzeigen */
@media (max-width:640px){
  table.daten.stapeln thead{position:absolute;left:-9999px}
  table.daten.stapeln,table.daten.stapeln tbody,
  table.daten.stapeln tr,table.daten.stapeln td{display:block;width:100%}
  table.daten.stapeln tr{
    border:1px solid var(--rand);border-radius:var(--radius-klein);
    padding:10px 12px;margin-bottom:10px;
  }
  table.daten.stapeln td{
    border:0;padding:3px 0;white-space:normal;
    display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  }
  table.daten.stapeln td::before{
    content:attr(data-spalte);font-size:.72rem;text-transform:uppercase;
    letter-spacing:.04em;color:var(--text-sehr-leise);font-weight:600;flex:none;
  }
  table.daten.stapeln td:empty{display:none}
  table.daten.stapeln td.zahl{text-align:right}
  .tabelle-huelle:has(table.stapeln){overflow-x:visible;margin:0;padding:0}
}

/* PIN-Eingabe: gross, mittig, gut sichtbare Ziffern */
.pin-feld{
  text-align:center;font-size:1.9rem;letter-spacing:.55em;text-indent:.55em;
  font-variant-numeric:tabular-nums;padding:14px 12px;
}

/* ------------------------------------------------------------- Handbuch */
.handbuch{line-height:1.6}
.handbuch p{margin:0 0 12px;font-size:.95rem}
.handbuch .hb-h1{
  font-size:1.15rem;margin:26px 0 4px;padding-bottom:6px;
  border-bottom:2px solid var(--rand-stark);letter-spacing:-.01em;
}
.handbuch .hb-h1:first-child{margin-top:0}
.handbuch .hb-h2{
  font-size:.98rem;margin:18px 0 6px;color:var(--text);
  text-transform:none;letter-spacing:0;font-weight:650;
}
.handbuch .hb-klein{font-size:.82rem;color:var(--text-leise);margin-top:18px}
.handbuch .hb-hinweis{
  border-left:3px solid var(--warn);background:var(--warn-weich);
  padding:10px 14px;border-radius:0 8px 8px 0;margin:0 0 14px;font-size:.92rem;
}
.handbuch .hb-liste{margin:0 0 14px;padding-left:20px}
.handbuch .hb-liste li{margin-bottom:6px;font-size:.95rem}
.handbuch .tabelle-huelle{margin:0 0 16px}
.handbuch table.daten td{vertical-align:top}

/* ------------------------------------------------------------------ Pause */
.pausekasten{
  background:var(--warn-weich);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);
  border-radius:var(--radius);padding:14px;margin:6px 0 4px;
}
.pausetitel{font-size:.82rem;font-weight:650;color:var(--warn);
  text-transform:uppercase;letter-spacing:.05em}
.pausezeit{font-size:2.4rem;font-weight:650;color:var(--warn);
  font-variant-numeric:tabular-nums;line-height:1.1;margin:2px 0}
.pauseseit{font-size:.85rem;color:var(--warn)}

.schnellpause{margin-top:14px;padding-top:12px;border-top:1px solid var(--rand)}
.schnellpause-titel{
  display:block;font-size:.75rem;font-weight:600;color:var(--text-sehr-leise);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;
}
.schnellpause-knoepfe{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.schnellpause-knoepfe form{flex:1 1 auto;min-width:64px}
.schnellpause-knoepfe .knopf{width:100%;justify-content:center;padding:11px 6px}

/* ------------------------------------------------------ Erfassungsstelle
   Ganzer Bildschirm, grosse Ziele, nichts zum Verklicken. Gelesen wird aus
   zwei Metern Entfernung und bedient mit Arbeitshandschuhen. */
body.terminal-seite{padding-bottom:0;overflow:hidden}
body.terminal-seite .inhalt{max-width:none;padding:0;height:100vh;height:100dvh}
.term{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:18px 20px 12px}
.term-kopf{display:flex;justify-content:space-between;align-items:baseline;
  color:var(--text-leise);flex:none}
.term-uhr{font-size:2.6rem;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.term-datum{font-size:1rem}
.term-mitte{flex:1;display:flex;flex-direction:column;justify-content:center;
  align-items:center;min-height:0}
.term-frage{margin:0 0 6px;font-size:1.1rem;color:var(--text-leise)}
.term-anzeige{
  font-size:2.6rem;font-weight:700;letter-spacing:.14em;line-height:1.2;
  font-variant-numeric:tabular-nums;min-height:1.2em;
  border-bottom:3px solid var(--rand-stark);padding:0 24px 6px;margin-bottom:8px;
}
.term-hilfe{margin:0 0 18px;color:var(--text-sehr-leise);font-size:.95rem}
.term-tasten{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  width:min(420px,86vw)}
.term-tasten button{
  font:600 1.9rem/1 inherit;padding:18px 0;border-radius:var(--radius);
  border:1px solid var(--rand);background:var(--karte);color:var(--text);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.term-tasten button:active{background:var(--akzent-weich);border-color:var(--akzent)}
.term-tasten button.haupt{background:var(--akzent);border-color:var(--akzent);
  color:var(--akzent-text)}
.term-tasten button.neben{color:var(--text-leise)}
.term-symbol{font-size:5rem;line-height:1;margin-bottom:6px}
.term-name{font-size:2rem;font-weight:700;text-align:center;letter-spacing:-.01em}
.term-text{font-size:1.25rem;color:var(--text-leise);text-align:center;margin-top:4px}
#term-antwort.gut .term-symbol{color:var(--gut)}
#term-antwort.warn .term-symbol{color:var(--warn)}
#term-antwort.schlecht .term-symbol{color:var(--schlecht)}
.term-fuss{flex:none;margin:0;text-align:center;font-size:.85rem;color:var(--text-sehr-leise)}
@media (max-height:520px){
  .term-uhr{font-size:1.8rem}
  .term-anzeige{font-size:1.9rem}
  .term-tasten button{padding:11px 0;font-size:1.4rem}
  .term-symbol{font-size:3.2rem}
}