/* 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;
}

/* ------------------------------------------------------------- Unterlagen

   Was das Buero im Reiter Dateien ablegt. Grundrisse und Bilder als Vorschau im
   Raster, zwei nebeneinander auch bei 360 Pixeln. Das Bild wird eingepasst,
   nicht beschnitten: ein angeschnittener Grundriss zeigt die halbe Etage. Der
   Rahmen bleibt auch im dunklen Modus weiss, Grundrisse sind es auch. */

.unterlagen-gruppe { display: grid; gap: var(--r3); }
/* Die Ueberschrift des Bereichs zieht den Abstand nach unten ein. Ohne den
   Ausgleich klebt die erste Gruppenzeile direkt darunter. */
.bereich-kopf + .unterlagen-gruppe { margin-top: var(--r3); }
.unterlagen-kopf {
  margin: 0;
  padding: 0 var(--r1);
  font-size: 15px;
  font-weight: 750;
  color: var(--text-weich);
}

.unterlagen-gitter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--r3);
}
@media (min-width: 560px) {
  .unterlagen-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.unterlagen-bild {
  display: grid;
  align-content: start;
  gap: var(--r2);
  width: 100%;
  min-width: 0;
  padding: var(--r2) var(--r2) var(--r3);
  border: 1px solid var(--linie-zart);
  border-radius: var(--rad);
  background: var(--flaeche);
  box-shadow: var(--schatten-karte);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.unterlagen-bild:active { background: var(--flaeche-aktiv); }
.unterlagen-bild .unterlagen-titel { padding: 0 var(--r1); }
.unterlagen-rahmen {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(12, 27, 42, .08);
  border-radius: var(--rad-s);
  background: #FFFFFF;
}
.unterlagen-rahmen img { display: block; width: 100%; height: 100%; object-fit: contain; }
.unterlagen-leer {
  padding: var(--r2);
  color: #52657C;
  font-size: 12.5px;
  font-weight: 650;
  text-align: center;
}
.unterlagen-titel {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.3;
}

/* PDF-Dokumente: die ganze Zeile ist die Tippflaeche, nicht nur das Wort
   rechts. Mindestens 72 Pixel hoch, weil sie mit Handschuhen getroffen wird. */
.unterlagen-zeile {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--r3);
  width: 100%;
  min-height: 72px;
  padding: var(--r3) var(--r4);
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.unterlagen-zeile:hover { background: var(--flaeche-hover); }
.unterlagen-zeile:active { background: var(--flaeche-aktiv); }
/* Die Liste schneidet alles ab, was ueber ihren Rand ragt. Der Fokusrahmen
   liegt deshalb innen, sonst bleibt von ihm nur eine Linie wie ein Trenner. */
.unterlagen-zeile:focus-visible { outline-offset: -3px; }
.unterlagen-zeile[disabled] { cursor: progress; }
.unterlagen-zeile .unterlagen-titel { -webkit-line-clamp: 3; }
.unterlagen-symbol {
  display: grid;
  place-items: center;
  width: 40px;
  height: 48px;
  border-radius: 8px;
  background: var(--blau-hell);
  color: var(--blau);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}
.unterlagen-name { display: grid; gap: 2px; min-width: 0; }
.unterlagen-oeffnen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 82px;
  padding: 0 var(--r4);
  border-radius: 999px;
  background: var(--blau-knopf);
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* ------------------------------------------------------------ Betrachter

   Grundriss, Bild oder PDF fuellen den Bildschirm. Dunkler Grund in beiden
   Modi, wie in der Fotoansicht des Handys. Oben der Titel und ein grosser
   Knopf zum Schliessen, der beim Vergroessern an seinem Platz bleibt: gezoomt
   wird nur das Bild, nie die Seite. */

.betrachter {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  /* minmax(0, 1fr), nicht auto: sonst waechst die Spalte mit einem langen
     Titel ueber den Bildschirm hinaus, und der Knopf zum Schliessen liegt
     halb ausserhalb. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #07111C;
  color: #fff;
  overscroll-behavior: contain;
}
.betrachter-kopf {
  display: flex;
  align-items: center;
  gap: var(--r3);
  padding: var(--r3) calc(var(--r4) + env(safe-area-inset-right, 0px)) var(--r3) calc(var(--r4) + env(safe-area-inset-left, 0px));
  padding-top: calc(var(--r3) + env(safe-area-inset-top, 0px));
  background: rgba(255, 255, 255, .05);
  touch-action: none;
}
.betrachter-titel {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
/* Der Fokusrahmen in Markenblau verschwindet auf dem dunklen Grund. */
.betrachter :focus-visible { outline-color: #A8CBFF; }
.betrachter-zu {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 var(--r5);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 750;
  cursor: pointer;
  touch-action: manipulation;
}
.betrachter-zu:active { background: rgba(255, 255, 255, .26); }
.betrachter-flaeche {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
/* Breite und Hoehe setzt objekt.js auf die eingepasste Groesse, damit der
   weisse Grund nur hinter dem Bild liegt und nicht als Rand um es herum. */
.betrachter-bild {
  display: block;
  background: #FFFFFF;
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.betrachter-flaeche-pdf { place-items: stretch; background: #FFFFFF; touch-action: auto; cursor: auto; }
.betrachter-pdf { display: block; width: 100%; height: 100%; border: 0; background: #FFFFFF; }
.betrachter-flaeche-text { padding: var(--r5); cursor: auto; }
.betrachter-ersatz {
  display: grid;
  gap: var(--r4);
  width: 100%;
  max-width: 420px;
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
}
.betrachter-ersatz p { margin: 0; }
.betrachter-klein { color: rgba(255, 255, 255, .72); font-size: 14px; }
.betrachter-fuss {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: var(--r3);
  padding: var(--r3) var(--r4);
  padding-bottom: calc(var(--r3) + env(safe-area-inset-bottom, 0px));
  touch-action: none;
}
.betrachter-fuss-mitte { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.betrachter-hilfe {
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
.betrachter-rund {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: inherit;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.betrachter-rund:active { background: rgba(255, 255, 255, .24); }
.betrachter-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--r4);
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------ 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; }

/* ------------------------------------------------------ Leistungsnachweis

   Was laut Checkliste nicht ging, steht im Dokument mit Ausrufezeichen und
   gedaempft, damit es nicht wie eine erbrachte Leistung aussieht. */
.dokument-zeile.nicht-moeglich span:first-child { color: var(--warnung-text); }
.dokument-zeile.nicht-moeglich span:last-child { color: var(--text-weich); }
/* Ueberschrift innerhalb des Dokuments: Erledigtes und Nicht-moegliches
   stehen getrennt, damit der Satz darunter sich eindeutig auf das Erledigte
   bezieht. */
.dokument-abschnitt {
  margin-top: var(--r2);
  color: var(--text-weich);
  font-size: 13px;
  font-weight: 700;
}

/* Der Satz, den die Kraft bestaetigt. Er steht abgesetzt, weil er das ist,
   was sie mit dem Knopf darunter erklaert. */
.bestaetigung-satz {
  display: grid;
  gap: var(--r2);
  padding: var(--r4) var(--r5);
  border-left: 4px solid var(--blau);
  border-radius: var(--rad-s);
  background: var(--blau-hell);
  color: var(--text);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.5;
}

.ueberlage .frage-gross { font-size: 21px; margin-top: var(--r3); }

/* Bei 360 Pixeln brechen die Knoepfe der Frage um. Dann mit Luft zwischen den
   Zeilen und etwas schmalerem Rand, sonst klebt die zweite Zeile am Rahmen. */
.ueberlage > .block.nachweis-frage { padding: var(--r5) var(--r4); }
.nachweis-frage .knopf { padding: 10px var(--r3); line-height: 1.25; text-align: center; }

/* Ohne Empfang: der Stand aus dem Speicher des Geraets. Erster Block auf der
   Buehne, damit er beim Oeffnen jedes Bildschirms oben steht. Der Satz traegt
   die Uhrzeit, deshalb kraeftig, der Zusatz beruhigt nur. */
.ohne-empfang { gap: var(--r1); }
.ohne-empfang p { margin: 0; }
.ohne-empfang-satz { font-size: 16.5px; font-weight: 700; }
.ohne-empfang .knopf { margin-top: var(--r2); }