/* Mitarbeiteransicht. Nur das, was ueber marken.css hinausgeht.
 *
 * Uebertragen aus dem Entwurf "Glas und Licht", gewaehlt am 22.09.2026.
 * Die drei Regeln des Entwurfs gelten hier woertlich:
 *
 * 1. Glas nur fuer schwebende Ebenen. In dieser Ansicht sind das genau vier:
 *    der Uebertragungsbalken oben, der feste Hauptknopf, die untere Leiste und
 *    der Dialog. Unter einer Flaeche mit Daten steht nie Glas.
 * 2. Jede Glasflaeche traegt die Lichtkante aus --glas-kante. Ohne sie ist es
 *    Milchglas, nicht Glas.
 * 3. Daten liegen auf EINER Flaeche und werden durch Haarlinien getrennt.
 *    Keine Reihe gleichfoermiger Kaertchen mehr.
 *
 * Wer das bedient, bestimmt die Masse: eine Reinigungskraft, abends im Objekt,
 * oft mit Handschuhen, haeufig ohne gutes Deutsch, in der ersten Woche ohne
 * Einweisung. Jede Antippflaeche ist mindestens 56 Pixel hoch, die Ziffern der
 * Anmeldung deutlich mehr. Das ist keine Geschmacksfrage.
 */

.huelle {
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

/* Der Grund kommt aus marken.css und traegt den Verlauf. Er wird hier bewusst
   nicht ueberschrieben: ohne farbige Tiefe hat das Glas nichts zu brechen. */

.buehne {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--r4);
  padding-top: calc(var(--r4) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: var(--r5);
  align-content: start;
}
.buehne:focus { outline: none; }

/* Auf dem Anmeldebildschirm gibt es die untere Leiste noch nicht. */
.buehne.ohne-leiste { padding-bottom: calc(var(--r6) + env(safe-area-inset-bottom, 0px)); }

/* Ohne Leiste steht nur ein kurzes Formular auf der Seite. Oben angeklebt
   wirkt es auf grossen Bildschirmen verloren, deshalb die optische Mitte:
   etwas ueber der geometrischen, weil das Auge dort die Mitte sieht. */
.buehne.ohne-leiste {
  max-width: 480px;
  min-height: 100dvh;
  align-content: center;
  padding-bottom: calc(var(--r6) + 6vh + env(safe-area-inset-bottom, 0px));
}

/* Steht der Uebertragungsbalken, bringt er die sichere Flaeche schon mit. */
/* Wartendes ist Alltag, Gescheitertes braucht einen Menschen. Deshalb wechselt
   der Balken in diesem Fall die Farbe, statt dieselbe ruhige Zeile zu zeigen. */
.uebertragung-fehler {
  background: var(--fehler-bg) !important;
  color: var(--fehler-text) !important;
  font-weight: 650;
}

.uebertragung:not([hidden]) + .buehne { padding-top: var(--r4); }

/* ------------------------------------------------------------- Die Glasteile

   Vier Stellen, sonst nirgends. Fuellung, Unschaerfe und Lichtkante stehen in
   marken.css, damit Verwaltung und Mitarbeiteransicht dasselbe Glas haben. */

.uebertragung,
.fussknopf,
.leiste-unten {
  background: var(--glas-fuellung);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  box-shadow: var(--glas-kante), var(--glas-wurf);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .uebertragung,
  .fussknopf,
  .leiste-unten,
  .ueberlage > .block { background: var(--glas-deckend); }
}

/* -------------------------------------------------------- Balken ganz oben

   Er klebt, also ist er Glas. Er erscheint nur, wenn wirklich etwas wartet,
   deshalb darf er ruhig sein: ein Punkt, ein Satz, keine Farbe ueber alles. */

.uebertragung {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--r2);
  min-height: 44px;
  padding: var(--r2) var(--r4);
  padding-top: calc(var(--r2) + env(safe-area-inset-top, 0px));
  color: var(--text-weich);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.uebertragung::before {
  content: "";
  width: 9px; height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--info);
}

/* ------------------------------------------------------------ Untere Leiste

   Sie klebt am unteren Rand, also ist sie Glas mit heller Oberkante. Die
   sichere Flaeche des iPhones kommt auf den eigenen Innenabstand oben drauf,
   sonst liegt die Leiste unter dem Balken. */

.leiste-unten {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--r1);
  padding: 6px 8px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}

.leiste-ziel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: var(--r2) var(--r1);
  border-radius: 18px;
  color: var(--text-leise);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
}
.leiste-ziel:hover { text-decoration: none; background: var(--flaeche-hover); }
.leiste-ziel svg {
  width: 25px; height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Der aktive Punkt bekommt eine eigene kleine Flaeche, kein blosses Einfaerben.
   Im Halbdunkel ist Farbe allein zu wenig. */
.leiste-ziel[aria-current="page"] {
  color: var(--blau);
  background: var(--blau-hell);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* ------------------------------------------------------------- Kopfzeilen

   Die Kopfzeile klebt hier nicht, sie laeuft mit. Deshalb ist sie kein Glas,
   sondern steht wie im Entwurf frei auf dem Grund: Name gross in der Serife,
   die Nebenzeile ruhig darunter. */

.kopf {
  display: grid;
  gap: var(--r2);
  margin-bottom: calc(var(--r2) * -1);
}
.kopf h1 {
  font-weight: 800;
  letter-spacing: -.034em;
  font-size: clamp(27px, 7.5vw, 33px);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.kopf > p { font-size: 15px; font-weight: 600; }

.zurueck {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--r2);
  min-height: 44px;
  padding: 0 var(--r4) 0 var(--r3);
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--text-weich);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--schatten-karte);
}
.zurueck:hover { background: var(--flaeche-hover); text-decoration: none; }
.zurueck:active { transform: translateY(1px); }
.zurueck::before {
  content: "";
  width: 9px; height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
}

/* ----------------------------------------------------------------- Flaechen

   Eine Flaeche traegt Daten. Sie liegt flach auf dem Grund, mit Haarlinie und
   kaum Schatten. Geschwebt wird nur oben und unten, und zwar in Glas. */

.kachel,
.liste,
.dokument {
  background: var(--flaeche);
  border: 1px solid var(--linie-zart);
  border-radius: var(--rad);
  box-shadow: var(--schatten-karte);
}

.kachel {
  display: grid;
  gap: var(--r4);
  padding: var(--r5);
}
/* Eine Kachel, die irgendwohin fuehrt, ist ein Knopf. Sie muss sich anfassen
   lassen wie einer: volle Breite, linksbuendiger Text, sichtbare Reaktion. */
.kachel-knopf {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease;
}
.kachel-knopf:active { transform: scale(.985); }
.kachel-knopf:focus-visible { outline: 2px solid var(--fokus-kante); outline-offset: 2px; }

.kachel-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--r4);
  align-items: center;
}
/* Die Haarlinie zwischen Angaben und Handlung laeuft durch die ganze Flaeche,
   nicht nur durch den Text. Das ist der Unterschied zwischen einer Trennlinie
   und einem Strich. */
.kachel > .kachel-kopf:not(:last-child) {
  margin: 0 calc(var(--r5) * -1);
  padding: 0 var(--r5) var(--r4);
  border-bottom: 1px solid var(--linie-zart);
}
.kachel h2 {
  font-size: 24px;
  line-height: 1.14;
  letter-spacing: -.015em;
}
.kachel .anschrift { margin-top: 6px; color: var(--text-weich); font-size: 15.5px; }
.kachel .uhrzeit { margin-top: 3px; color: var(--text-leise); font-size: 14px; font-variant-numeric: tabular-nums; }

.kachel-liste { display: grid; gap: var(--r5); }

/* Der Satz, den der Kunde selbst geschrieben hat, steht nicht in einer
   gewoehnlichen Flaeche. Er bekommt den Azurschleier und eine Lichtkante
   links. Getroffen wird die Flaeche, die nur diesen einen Absatz enthaelt.
   Ohne :has bleibt es eine gewoehnliche Flaeche, es geht also nichts kaputt. */
.kachel:has(> .text-gross:only-child) {
  background: var(--blau-hell);
  border-color: transparent;
  border-left: 3px solid var(--blau);
  border-radius: var(--rad-s) var(--rad) var(--rad) var(--rad-s);
  box-shadow: none;
  padding: var(--r4) var(--r5);
}

/* Ein Verweis im Fliesstext ist zu klein zum Treffen. */
.text-knopf {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

/* Fortschritt. Ruhig, in Minze, mit der Zahl darunter in der Serife. Die Zahl
   steht neben dem Ring und nicht darin, sonst ist sie auf kleinen Geraeten
   nicht mehr zu lesen. */
.ring { width: 58px; height: 58px; display: block; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.ring .bahn { stroke: var(--flaeche-versenkt); }
.ring .fuellung { stroke: var(--erfolg); transition: stroke-dashoffset .35s ease; }
.ring-gruppe { display: grid; justify-items: center; gap: 5px; }
.ring-text {
  font-weight: 750;
  font-size: 14px;
  letter-spacing: -.018em;
  color: var(--text-weich);
  white-space: nowrap;
}

/* -------------------------------------------------------------- Knoepfe

   Der Hauptknopf traegt den Verlauf und faengt Licht an der Oberkante. Er ist
   das Einzige auf dem Bildschirm, das so aussieht. */

.knopf { text-decoration: none; }
.knopf:hover { text-decoration: none; }
.knopf-voll { width: 100%; }
.knopf-riesig {
  min-height: 62px;
  padding: 0 var(--r5);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.005em;
  border-radius: var(--rad);
}
.knopf-haupt {
  background: var(--blau-knopf);
  border-color: transparent;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 1px 2px rgba(12, 27, 42, .18),
    0 12px 26px -14px rgba(12, 27, 42, .62);
}
@supports (color: color-mix(in srgb, #000, #fff)) {
  .knopf-haupt {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .34),
      0 1px 2px rgba(12, 27, 42, .18),
      0 12px 26px -12px color-mix(in srgb, var(--blau) 62%, transparent);
  }
}
.knopf-haupt[disabled] { background: var(--flaeche-versenkt); color: var(--text-leise); box-shadow: none; }
.knopf-reihe { display: grid; gap: var(--r2); }
.knopf-reihe-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r2); }

/* Fest unten stehender Hauptknopf, zum Beispiel "Fertig und Stunden abgeben".
   Er schwebt ueber der Liste, also ist er Glas. Er sitzt genau auf der unteren
   Leiste auf, deren Hoehe hier nachgerechnet ist: 56 Pixel Ziel plus 12 Pixel
   Innenabstand. */
.fussknopf {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  padding: var(--r3) var(--r4);
}
.fussknopf > * { max-width: 640px; margin: 0 auto; }
.mit-fussknopf { padding-bottom: 96px; }

/* ------------------------------------------------------------- Checkliste

   Etagen sind ruhige Zwischenueberschriften in Versalien auf dem Grund, die
   Zeilen darunter liegen auf EINER Flaeche und sind durch Haarlinien getrennt. */

.bereich-kopf {
  display: flex;
  align-items: center;
  gap: var(--r3);
  margin-bottom: calc(var(--r4) * -1);
  padding: 0 var(--r1);
  font-family: var(--schrift);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.bereich-kopf::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie);
}

.liste {
  display: grid;
  overflow: hidden;
}
/* Die Haarlinie trennt Zeile von Zeile. Hinweis und Begruendung gehoeren zu
   ihrer Zeile und werden deshalb nicht abgetrennt. */
.liste > * + * { border-top: 1px solid var(--linie-zart); }

.pruefzeile {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--r3);
  width: 100%;
  min-height: 68px;
  padding: var(--r3) var(--r4);
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
  /* Langes Druecken oeffnet das Grundfeld. Ohne das hier zeigt iOS dabei die
     Textauswahl und die Lupe. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.pruefzeile:hover { background: var(--flaeche-hover); }
.pruefzeile:active { background: var(--flaeche-aktiv); }
.pruefzeile-text { font-size: 16.5px; font-weight: 650; line-height: 1.32; }
.pruefzeile[data-stand="erledigt"] { background: var(--erfolg-bg); }
.pruefzeile[data-stand="erledigt"] .pruefzeile-text { color: var(--text-leise); font-weight: 600; }
.pruefzeile[data-stand="geht-nicht"] { background: var(--warnung-bg); }
.pruefzeile[data-stand="geht-nicht"] .pruefzeile-text { color: var(--text-leise); }

/* Der Haken sitzt links und ist rund. Er wird mit dem Daumen im Handschuh
   getroffen, nicht mit der Fingerspitze. */
.haken {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 2px solid var(--linie-stark);
  border-radius: 50%;
  background: var(--flaeche);
  transition: background .18s, border-color .18s;
}
/* Der Haken wird auch am Pfad selbst abgeschaltet: heute.js setzt dort
   stroke="currentColor" als Attribut, und ein Attribut am Pfad schlaegt die
   Vererbung vom svg. Ohne die zweite Angabe steht in jeder offenen Zeile ein
   blasser Haken, und die Zeile sieht halb erledigt aus. */
.haken svg, .haken svg path { width: 19px; height: 19px; fill: none; stroke: transparent; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pruefzeile[data-stand="erledigt"] .haken { background: var(--erfolg); border-color: var(--erfolg); }
.pruefzeile[data-stand="erledigt"] .haken svg,
.pruefzeile[data-stand="erledigt"] .haken svg path { stroke: #fff; }

/* Gemeldet, aber nicht gemacht: ein Strich, kein Haken. Ein Haken in Bernstein
   sieht aus wie erledigt, und genau das ist die Zeile nicht. */
.pruefzeile[data-stand="geht-nicht"] .haken { position: relative; background: var(--flaeche); border-color: var(--warnung); }
.pruefzeile[data-stand="geht-nicht"] .haken::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 3px;
  margin: -1.5px 0 0 -7px;
  border-radius: 2px;
  background: var(--warnung-text);
}

/* 44 Pixel, nicht kleiner. Diese Zeichen werden mit Handschuhen getippt. */
.zeilen-symbol {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--flaeche-versenkt);
  color: var(--text-weich);
  font: inherit; font-weight: 700; font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
}
.zeilen-symbol:active { background: var(--flaeche-aktiv); }
.zeilen-symbol svg { width: 21px; height: 21px; }

.zeilen-hinweis {
  padding: 0 var(--r4) var(--r4) calc(var(--r4) + 34px + var(--r3));
  color: var(--text-weich);
  font-size: 15px;
  line-height: 1.5;
}
/* Die Begruendung traegt denselben Grundton wie ihre Zeile. Sonst zerfaellt
   der Eintrag optisch in zwei Teile, obwohl er einer ist. */
.zeilen-grund {
  padding: 0 var(--r4) var(--r4) calc(var(--r4) + 34px + var(--r3));
  background: var(--warnung-bg);
  color: var(--warnung-text);
  font-size: 14.5px;
  font-weight: 600;
}

.grund-block {
  display: grid;
  gap: var(--r3);
  padding: var(--r4);
  background: var(--warnung-bg);
}
.grund-block label { color: var(--warnung-text); }

/* ------------------------------------------------------------- Abschnitte */

.block { display: grid; gap: var(--r4); }
.block h2 { font-size: 19px; }

.text-gross {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
}

.hinweis {
  display: grid;
  gap: var(--r2);
  padding: var(--r4) var(--r4) var(--r4) var(--r5);
  border-radius: var(--rad-s) var(--rad) var(--rad) var(--rad-s);
  border-left: 3px solid var(--info);
  background: var(--info-bg);
  color: var(--info-text);
  font-size: 15px;
  line-height: 1.5;
}
.hinweis-warnung { background: var(--warnung-bg); color: var(--warnung-text); border-left-color: var(--warnung); }
.hinweis-fehler  { background: var(--fehler-bg);  color: var(--fehler-text);  border-left-color: var(--fehler); }
.hinweis h2 { font-size: 17px; color: inherit; }
.hinweis ol, .hinweis ul { margin: 0; padding-left: var(--r5); display: grid; gap: var(--r2); }

.daten-zeile {
  display: grid;
  gap: 2px;
  padding: var(--r3) 0;
  border-bottom: 1px solid var(--linie-zart);
}
.daten-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.daten-zeile:first-child { padding-top: 0; }
.daten-zeile dt { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise); }
.daten-zeile dd { margin: 0; font-size: 16.5px; font-weight: 600; }

/* Abzeichen fuer einen Zugang, der nur heute gilt. Bernstein, weil es eine
   Frist ist und keine Warnung. */
.nur-heute,
.abzeichen-bernstein {
  display: inline-flex;
  align-items: center;
  align-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--warnung-bg);
  color: var(--warnung-text);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------- Dialog

   Der Dialog schwebt, also ist er Glas. Der Grund dahinter ist deckend, und
   das aus einem harten Grund: solange der Code zu sehen ist, darf die
   Anschrift nicht daneben stehen. Aus einem liegengebliebenen Handy soll kein
   Einbruchswerkzeug werden. */

.ueberlage {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  justify-items: center;
  align-content: center;
  align-content: safe center;
  overflow-y: auto;
  padding: var(--r5);
  padding-top: calc(var(--r5) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--r5) + env(safe-area-inset-bottom, 0px));
  background: var(--grund);
  background-image: var(--grund-verlauf);
  text-align: center;
}
.ueberlage > .block {
  width: 100%;
  padding: var(--r5);
  border-radius: var(--rad-xl);
  background: var(--glas-fuellung);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  box-shadow: var(--glas-kante), var(--glas-wurf);
}
.ueberlage h1 { font-size: 26px; letter-spacing: -.015em; }
.ueberlage label,
.ueberlage .liste,
.ueberlage .daten-zeile,
.ueberlage .hinweis { text-align: left; }

/* Der Code fuellt den Bildschirm allein und verschwindet nach 60 Sekunden. */
.code-gross {
  font-size: clamp(46px, 17vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .12em;
  /* Der Zwischenraum haengt auch hinter der letzten Ziffer. Ohne den Ausgleich
     steht der Code sichtbar links von der Mitte. */
  padding-left: .12em;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.countdown {
  justify-self: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--warnung-bg);
  color: var(--warnung-text);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Fotos */

.foto-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--r2);
}
.foto-kachel {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--rad-s);
  overflow: hidden;
  background: var(--flaeche-versenkt);
  box-shadow: var(--schatten-karte);
}
.foto-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-weg {
  position: absolute; top: 5px; right: 5px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(12, 27, 42, .66);
  color: #fff; font: inherit; font-size: 17px; font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* Die Kamera wird ueber ein Dateifeld geoeffnet, nicht ueber einen eigenen
   Kamerastrom. Sonst fragt iOS bei jedem Start erneut nach der Erlaubnis. */
.kamera-knopf { position: relative; overflow: hidden; }
.kamera-knopf input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0;
  font-size: 200px;
  cursor: pointer;
}

/* ------------------------------------------------------------ Unterschrift */

.unterschrift-flaeche {
  display: block;
  width: 100%;
  height: 240px;
  border: 2px dashed var(--linie-stark);
  border-radius: var(--rad);
  background: var(--flaeche);
  box-shadow: var(--schatten-karte);
  touch-action: none;
  cursor: crosshair;
}
.unterschrift-linie {
  display: flex;
  align-items: center;
  gap: var(--r3);
  color: var(--text-leise);
  font-size: 13px;
  font-weight: 600;
}
.unterschrift-linie::before,
.unterschrift-linie::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

.dokument {
  display: grid;
  gap: var(--r2);
  padding: var(--r5);
  background: var(--flaeche-sanft);
  font-size: 15px;
}
.dokument-zeile { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--r2); align-items: baseline; }
.dokument-zeile span:first-child { color: var(--erfolg); font-weight: 800; }

/* ---------------------------------------------------------------- Schritte */

.schritte {
  display: grid;
  grid-auto-flow: column;
  gap: var(--r2);
  margin-bottom: calc(var(--r2) * -1);
}
.schritte div {
  height: 4px;
  border-radius: 999px;
  background: var(--flaeche-versenkt);
}
.schritte div[data-an="ja"] { background: var(--blau); }

/* ---------------------------------------------------------------- Sonstiges */

.gross-leer {
  display: grid;
  justify-items: center;
  gap: var(--r4);
  padding: var(--r8) var(--r4);
  text-align: center;
  color: var(--text-leise);
}
.gross-leer svg { width: 72px; height: 72px; fill: none; stroke: var(--linie-stark); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gross-leer h2 { color: var(--text); font-size: 24px; letter-spacing: -.015em; }

.laedt {
  display: grid;
  place-items: center;
  min-height: 200px;
  color: var(--text-leise);
  font-weight: 600;
}

.wahlzeile {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: var(--r3);
  width: 100%;
  min-height: 64px;
  padding: var(--r3) var(--r4);
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16.5px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.wahlzeile:hover { background: var(--flaeche-hover); }
.wahlzeile:active { background: var(--flaeche-aktiv); }
.wahlzeile .haken { font-size: 13px; font-weight: 800; color: var(--text-leise); }

video {
  width: 100%;
  border-radius: var(--rad);
  background: #000;
}

/* ------------------------------------------- Anmelden mit Kennung und PIN

   Zwei Wege, umschaltbar. Der Umschalter ist ein ruhiges Segment, keine zwei
   Knoepfe, die miteinander streiten: eine Mulde, darin eine helle Flaeche fuer
   den gewaehlten Weg.

   Die Ziffernflaechen sind 78 Pixel hoch, deutlich mehr als die sonst
   geforderten 56. Sie werden im Halbdunkel und mit Handschuhen getroffen, und
   ein Fehlgriff kostet hier einen von fuenf Versuchen. */

.umschalter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  border-radius: 999px;
  background: var(--flaeche-versenkt);
  border: 1px solid var(--linie-zart);
}
.umschalter .knopf {
  min-height: 48px;
  padding: 0 var(--r3);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-leise);
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
}
.umschalter .knopf:hover { background: transparent; color: var(--text-weich); }
.umschalter .umschalter-aktiv {
  background: var(--flaeche);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--schatten-karte);
}

.kennung-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r3);
  min-height: 56px;
  padding: 0 var(--r4);
  border-radius: var(--rad);
  background: var(--flaeche);
  border: 1px solid var(--linie-zart);
}
.kennung-wert {
  font-size: 20px;
  font-weight: 750;
  letter-spacing: .02em;
  word-break: break-all;
}
.kennung-zeile .knopf-still { min-height: 44px; padding: 0 var(--r3); }

.pin-frage {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  margin-top: var(--r2);
}

.pin-punkte {
  display: flex;
  justify-content: center;
  gap: var(--r3);
  padding: var(--r2) 0 var(--r3);
}
.pin-punkt {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 2px solid var(--linie-stark);
  background: transparent;
  transition: background .12s, border-color .12s, transform .12s;
}
.pin-punkt[data-voll] {
  background: var(--blau);
  border-color: var(--blau);
  transform: scale(1.08);
}

.ziffernfeld {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--r3);
}
.ziffernfeld:focus { outline: none; }
.ziffernfeld[aria-busy="true"] { opacity: .5; pointer-events: none; }

.ziffer {
  min-height: 78px;
  padding: 0;
  background: var(--flaeche);
  border: 1px solid var(--linie-zart);
  border-radius: var(--rad-l);
  color: var(--text);
  font: inherit;
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: var(--schatten-karte);
  transition: background .1s, transform .06s;
  touch-action: manipulation;
}
.ziffer:active {
  background: var(--flaeche-aktiv);
  transform: translateY(1px);
}
.ziffer-still {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-weich);
  font-size: 15px;
  font-weight: 700;
}
.ziffer-leer { display: block; }