/* Nur das, was ueber marken.css hinausgeht.
   Leitgedanke: eine Handlung je Bildschirm, grosse Flaechen, wenig Text.
   Jede Flaeche zum Antippen ist mindestens 48 Pixel hoch. Das ist keine
   Geschmacksfrage: ein grosser Teil der Belegschaft bedient die Ansicht mit
   Handschuhen, im Halbdunkel und ohne Einweisung. */

.huelle {
  min-height: 100dvh;
  background: var(--grund);
}

.buehne {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--r4) var(--r4) calc(96px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: var(--r4);
  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)); }

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

.leiste-unten {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--glas-flaeche);
  backdrop-filter: var(--glas-filter);
  -webkit-backdrop-filter: var(--glas-filter);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@supports not (backdrop-filter: blur(1px)) {
  .leiste-unten { background: var(--flaeche); }
}

.leiste-ziel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 60px;
  padding: var(--r2) var(--r1);
  color: var(--text-leise);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.leiste-ziel:hover { text-decoration: none; }
.leiste-ziel svg {
  width: 26px; height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.leiste-ziel[aria-current="page"] { color: var(--blau); }

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

.uebertragung {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: var(--r2) var(--r4);
  padding-top: calc(var(--r2) + env(safe-area-inset-top, 0px));
  background: var(--info-bg);
  color: var(--info-text);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

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

.kopf {
  display: grid;
  gap: var(--r1);
  padding-top: env(safe-area-inset-top, 0px);
}
.kopf h1 { font-size: 26px; }

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--r2);
  min-height: 48px;
  padding: 0 var(--r3) 0 var(--r2);
  margin-left: calc(var(--r2) * -1);
  border: 0;
  background: transparent;
  color: var(--text-weich);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--rad-s);
}
.zurueck:hover { background: var(--flaeche-hover); }
.zurueck::before { content: ""; width: 10px; height: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }

/* ------------------------------------------------------------- Grosse Kachel */

.kachel {
  display: grid;
  gap: var(--r4);
  padding: var(--r5);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rad-l);
  box-shadow: var(--schatten-karte);
}
.kachel-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--r4);
  align-items: center;
}
.kachel h2 { font-size: 21px; }
.kachel .anschrift { color: var(--text-weich); font-size: 15px; }
.kachel .uhrzeit { color: var(--text-leise); font-size: 14px; font-variant-numeric: tabular-nums; }

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

/* Fortschrittsring. Der Text steht daneben, nicht im Ring, sonst wird er
   auf kleinen Geraeten unleserlich. */
.ring { width: 64px; height: 64px; display: block; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.ring .bahn { stroke: var(--flaeche-versenkt); }
.ring .fuellung { stroke: var(--blau); transition: stroke-dashoffset .3s; }
.ring-gruppe { display: grid; justify-items: center; gap: 2px; }
.ring-text { font-size: 12.5px; font-weight: 650; color: var(--text-weich); white-space: nowrap; }

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

.knopf-voll { width: 100%; }
.knopf-riesig { min-height: 60px; font-size: 18px; border-radius: var(--rad); }
.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". */
.fussknopf {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  padding: var(--r3) var(--r4);
  background: var(--glas-flaeche);
  backdrop-filter: var(--glas-filter);
  -webkit-backdrop-filter: var(--glas-filter);
  border-top: 1px solid var(--linie);
}
@supports not (backdrop-filter: blur(1px)) {
  .fussknopf { background: var(--flaeche); }
}
.mit-fussknopf { padding-bottom: calc(176px + env(safe-area-inset-bottom, 0px)); }

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

.bereich-kopf {
  padding: var(--r4) var(--r2) var(--r2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.liste {
  display: grid;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rad);
  overflow: hidden;
}

.pruefzeile {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--r3);
  width: 100%;
  min-height: 64px;
  padding: var(--r3) var(--r4);
  border: 0;
  border-bottom: 1px solid var(--linie-zart);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pruefzeile:last-child { border-bottom: 0; }
.pruefzeile:hover { background: var(--flaeche-hover); }
.pruefzeile-text { font-size: 16px; line-height: 1.35; }
.pruefzeile[data-stand="erledigt"] .pruefzeile-text { color: var(--text-leise); text-decoration: line-through; }
.pruefzeile[data-stand="geht-nicht"] .pruefzeile-text { color: var(--text-leise); }

.haken {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 2px solid var(--linie-stark);
  border-radius: 10px;
  background: var(--flaeche);
}
.haken svg { width: 20px; height: 20px; fill: none; stroke: transparent; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pruefzeile[data-stand="erledigt"] .haken { background: var(--blau); border-color: var(--blau); }
.pruefzeile[data-stand="erledigt"] .haken svg { stroke: #fff; }
.pruefzeile[data-stand="geht-nicht"] .haken { background: var(--warnung-bg); border-color: var(--warnung); }
.pruefzeile[data-stand="geht-nicht"] .haken svg { stroke: var(--warnung-text); }

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

.zeilen-hinweis {
  padding: 0 var(--r4) var(--r4) calc(var(--r4) + 34px + var(--r3));
  margin-top: calc(var(--r3) * -1);
  border-bottom: 1px solid var(--linie-zart);
  color: var(--text-weich);
  font-size: 15px;
}

.grund-block {
  display: grid;
  gap: var(--r2);
  padding: var(--r4);
  background: var(--warnung-bg);
  border-bottom: 1px solid var(--linie-zart);
}
.grund-block label { color: var(--warnung-text); }

.zeilen-grund {
  padding: 0 var(--r4) var(--r3) calc(var(--r4) + 34px + var(--r3));
  margin-top: calc(var(--r3) * -1);
  border-bottom: 1px solid var(--linie-zart);
  color: var(--warnung-text);
  font-size: 14px;
}

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

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

.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);
  border-radius: var(--rad);
  background: var(--info-bg);
  color: var(--info-text);
  font-size: 15px;
}
.hinweis-warnung { background: var(--warnung-bg); color: var(--warnung-text); }
.hinweis-fehler  { background: var(--fehler-bg);  color: var(--fehler-text); }
.hinweis h2 { font-size: 16px; color: inherit; }
.hinweis ol, .hinweis ul { margin: 0; padding-left: var(--r5); display: grid; gap: var(--r1); }

.daten-zeile {
  display: grid;
  gap: 2px;
  padding: var(--r3) 0;
  border-bottom: 1px solid var(--linie-zart);
}
.daten-zeile:last-child { border-bottom: 0; }
.daten-zeile dt { font-size: 13px; font-weight: 600; color: var(--text-leise); }
.daten-zeile dd { margin: 0; font-size: 16px; }

/* ---------------------------------------------------------------- Zugang */

.ueberlage {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--r5);
  padding: var(--r5);
  padding-top: calc(var(--r5) + env(safe-area-inset-top, 0px));
  background: var(--grund);
  text-align: center;
}
/* Der Code fuellt den Bildschirm allein. Anschrift und Schluesselangaben sind
   dabei nicht sichtbar, aus einem verlorenen Handy soll kein Einbruchswerkzeug
   werden. */
.code-gross {
  font-family: var(--schrift-zahl);
  font-size: clamp(40px, 15vw, 64px);
  font-weight: 700;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.countdown { font-size: 16px; font-weight: 600; color: var(--text-leise); 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);
}
.foto-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-weg {
  position: absolute; top: 4px; right: 4px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(15, 28, 46, .62);
  color: #fff; font: inherit; font-size: 17px; font-weight: 700;
  cursor: pointer;
}

/* 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);
  touch-action: none;
  cursor: crosshair;
}
.unterschrift-linie {
  display: flex;
  align-items: center;
  gap: var(--r2);
  color: var(--text-leise);
  font-size: 13px;
}
.unterschrift-linie::before { content: ""; flex: 1; height: 1px; background: var(--linie-stark); }
.unterschrift-linie::after  { content: ""; flex: 1; height: 1px; background: var(--linie-stark); }

.dokument {
  display: grid;
  gap: var(--r2);
  padding: var(--r4);
  background: var(--flaeche-sanft);
  border: 1px solid var(--linie);
  border-radius: var(--rad);
  font-size: 15px;
}
.dokument-zeile { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--r2); }
.dokument-zeile span:first-child { color: var(--erfolg); font-weight: 700; }

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

.schritte {
  display: grid;
  grid-auto-flow: column;
  gap: var(--r2);
}
.schritte div {
  height: 5px;
  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); }

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

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

.wahlzeile {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: var(--r3);
  width: 100%;
  min-height: 60px;
  padding: var(--r3) var(--r4);
  border: 0;
  border-bottom: 1px solid var(--linie-zart);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.wahlzeile:last-child { border-bottom: 0; }

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