/*
 * Werkstatt-Terminal — iPad in der Werkstatt.
 *
 * Farbwelt und Marken sind die des Backoffice (schwarzer Grund, weisse
 * Schrift, farbige Icons in Grün / Orange / Hellblau). Der Massstab ist ein
 * anderer: Grundschrift 20 px, Hauptknöpfe mindestens 96 px hoch, keine
 * Tippfläche unter 64 px — bedient wird mit Arbeitshandschuhen im Stehen.
 *
 * Kein Hover: am iPad gibt es keinen Mauszeiger. Rückmeldung kommt über
 * :active. Status steht nie nur in der Farbe, immer auch als Wort.
 */

:root {
  color-scheme: dark;

  --plane: #0b0c0e;
  --surface: #16181c;
  --surface-2: #1e2126;
  --surface-3: #262a31;
  --linie: rgba(255, 255, 255, 0.10);
  --linie-stark: rgba(255, 255, 255, 0.18);

  --text: #ffffff;
  --text-2: #a8adb8;
  --text-3: #7c828e;

  --blau: #3987e5;
  --orange: #d95926;
  --gruen: #199e70;

  --gut: #0ca30c;
  --warnung: #fab219;
  --kritisch: #d03b3b;

  --radius: 10px;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* iPad-Massstab */
  --knopf-haupt: 96px;
  --tippflaeche: 64px;
  --luft: 20px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--text);
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }
p { margin: 0; }

.mono { font-variant-numeric: tabular-nums; font-family: var(--mono); }
.leise { color: var(--text-2); }
.mitte { text-align: center; }

.visuell-versteckt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

svg[aria-hidden] { width: 26px; height: 26px; flex: none; }

/* Alle Tippflächen: kein Doppeltipp-Zoom, keine Textmarkierung, klarer
   Fokusring für Tastatur- und Schalterbedienung. */
button, label.knopf {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }

.terminal {
  min-height: 100dvh;
  padding:
    max(env(safe-area-inset-top), 16px)
    max(env(safe-area-inset-right), 20px)
    max(env(safe-area-inset-bottom), 20px)
    max(env(safe-area-inset-left), 20px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--tippflaeche);
  padding: 14px 22px;
  background: var(--surface-2);
  border: 1px solid var(--linie-stark);
  border-radius: 14px;
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
.knopf:active { background: var(--surface-3); transform: translateY(1px); }

.knopf--haupt {
  width: 100%;
  min-height: var(--knopf-haupt);
  font-size: 28px;
  background: var(--blau);
  border-color: transparent;
  border-radius: 18px;
}
.knopf--haupt svg[aria-hidden] { width: 32px; height: 32px; }
.knopf--haupt:active { background: #2f74c9; }

.knopf--gruen { background: var(--gruen); border-color: transparent; }
.knopf--gruen:active { background: #14805b; }
.knopf--rot { background: var(--kritisch); border-color: transparent; }
.knopf--rot:active { background: #b53232; }

/* Gedämpft heisst «hier fehlt noch etwas» — der Knopf bleibt bedienbar und
   sagt beim Antippen, was fehlt. Tote Knöpfe gibt es nicht. */
.knopf--gedaempft { background: var(--surface-3); color: var(--text-2); }

.knopf--zweit {
  width: 100%;
  min-height: 72px;
  font-size: 22px;
  background: var(--surface-2);
  border: 1px solid var(--linie-stark);
}
.knopf--klein { min-height: var(--tippflaeche); font-size: 19px; flex: 1; }
.knopf--schmal { width: auto; min-width: 260px; }
.knopf--kopf {
  min-height: var(--tippflaeche);
  padding: 10px 18px;
  font-size: 19px;
  background: var(--surface-2);
}
.knopf--an { border-color: var(--gruen); color: var(--gruen); }
.knopf--foto { width: 100%; }
.knopf--kamera {
  min-height: var(--knopf-haupt);
  border: 2px solid var(--blau);
  border-radius: 18px;
  font-size: 25px;
}
.knopf--kamera svg { width: 34px; height: 34px; color: var(--blau); }

.knopfreihe { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Kopfzeile */

/* Die Seitenspalten teilen sich den Rest zu gleichen Teilen, damit der Titel
   in der Mitte steht — aber nie unter ihren Inhalt: seit Mikrofon *und*
   «Fertig» rechts stehen, würde die Spalte sonst über den Titel laufen. */
.kopfzeile {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) minmax(0, auto) minmax(min-content, 1fr);
  align-items: center;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linie);
}
/* Der Zurück-Knopf soll links stehen und nur so breit sein wie sein Text —
   sonst wird er breiter als die Hauptaktion und zieht den Blick auf sich. */
.kopfzeile > .knopf--kopf { justify-self: start; }
.kopfzeile__mitte { text-align: center; min-width: 0; }
.kopfzeile__mitte h1 { overflow-wrap: anywhere; }
.kopfzeile__mitte p { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Rechts stehen Mikrofon und — wo vorhanden — «Fertig»; das Mikrofon links davon. */
.kopfzeile__rechts { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.kopfzeile__dauer { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.kopfzeile__platz { display: block; }

/* -------------------------------------------------------------------- Seite */

.seite { display: flex; flex-direction: column; gap: var(--luft); flex: 1; }
/* Die Tagesansicht trägt fünf Blöcke: Statuskarte, «Meine Stunden», die
   Ferienzeile, die Hauptaktion und die kleinen Knöpfe. Deutlich enger als
   sonst, damit quer (1180 × 820) alles ohne Blättern ins Bild passt — in der
   Lage «es läuft etwas» kommt unten noch «Auftrag ansehen» dazu. */
.seite--mitte {
  justify-content: center;
  gap: 12px;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}
/* Die Statuskarte ist der grösste Block und gibt darum als Erste Höhe ab.
   «Meine Stunden» ist mit eigenem Polster ausgenommen. */
.seite--mitte > .karte:first-child { padding: 18px 24px; gap: 8px; }
.seite__titel { font-size: 22px; color: var(--text-2); margin-top: 6px; }
/* Die Hauptaktion klebt unten und bleibt beim Blättern sichtbar — bei einer
   langen Schadensliste scrollt man sonst am «Weiter» vorbei. */
.seite__fuss {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  position: sticky;
  bottom: 0;
  background: var(--plane);
  box-shadow: 0 -16px 22px 6px var(--plane);
  z-index: 5;
}
.seite__aktion { margin-top: 6px; }

/* ------------------------------------------------------------ Namensliste */

.start { display: flex; flex-direction: column; gap: 24px; flex: 1; }
.start__kopf {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.start__logo { width: 150px; height: auto; }
.start__ort { flex: 1; min-width: 200px; }
.start__datum { font-size: 22px; font-weight: 600; }
.start__uhr { font-size: 56px; font-weight: 600; letter-spacing: -0.02em; }
.start__frage { color: var(--text-2); font-size: 22px; }

/* Eine Person pro Zeile, volle Breite, untereinander — kein Raster: der Blick
   läuft eine Spalte hinunter, jede Zeile ist gleich aufgebaut. */
.personen { display: flex; flex-direction: column; gap: 14px; }
.person {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 112px;                /* geforderte Zeilenhöhe: mindestens 96 px */
  padding: 16px 22px;
  background: var(--surface);
  border: 1px solid var(--linie);
  border-left: 6px solid var(--linie-stark);
  border-radius: 18px;
  text-align: left;
}
.person:active { background: var(--surface-2); }
.person--laeuft { border-left-color: var(--gruen); }
.person--da { border-left-color: var(--blau); }
.person__kurz {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  flex: none;
  background: var(--surface-3);
  border-radius: 50%;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.person--laeuft .person__kurz { background: rgba(25, 158, 112, 0.22); color: #6fd7b3; }
.person__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.person__name { font-size: 26px; font-weight: 600; }
.person__status {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 17px; color: var(--text-2);
}

/* ------------------------------------------------------------------ Karten */

.karte {
  background: var(--surface);
  border: 1px solid var(--linie);
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.karte--laeuft { border-color: rgba(25, 158, 112, 0.45); }
.karte__marke { display: flex; gap: 10px; }
.karte__gross { font-size: 30px; }
.karte__unter { color: var(--text-2); font-size: 19px; }
/* Dauer und Startzeit in einer Zeile — spart der Tagesansicht eine ganze
   Zeile Höhe, seit «Meine Stunden» darunter steht. */
.karte__lauf { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }

.dauer { font-size: 26px; font-weight: 600; }
.dauer--gross { font-size: 42px; letter-spacing: -0.02em; }

/* ---------------------------------------------------------- Meine Stunden */

/* Reine Anzeige: nichts darin ist anzutippen — die Wochenstunden legt der Chef
   im Backoffice fest. Bewusst flacher und leiser gehalten als die Statuskarte
   darüber und deutlich kleiner als die Hauptaktion darunter; sie beantwortet
   eine Frage im Vorbeigehen, sie fordert nichts. */
.stunden { padding: 12px 20px; gap: 6px; }
.stunden__kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.stunden__titel { font-size: 19px; color: var(--text-2); }
.stunden__mit { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.stunden__mit svg { width: 20px; height: 20px; }
.stunden__uhr { font-size: 17px; font-weight: 600; }

/* Quer eine Zeile je Zahl: Bezeichnung, Zahl, Balken, Wort — alles nebeneinander.
   Die zwei Zeilen teilen sich EIN Raster (die Zeile selbst ist `display: contents`),
   damit Zahlen und Wörter untereinander bündig stehen. Flach gehalten: die Karte
   darf der Hauptaktion unten keine Höhe wegnehmen. */
.stunden__zeilen {
  display: grid;
  grid-template-columns: max-content max-content max-content minmax(70px, 1fr) max-content;
  align-items: center;
  column-gap: 14px;
  row-gap: 8px;
}
.stunde { display: contents; }
.stunde__name { font-size: 18px; color: var(--text-2); }
.stunde__zahl {
  font-size: 25px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; justify-self: end;
}
.stunde__soll { font-size: 25px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
/* Das Wort sagt, was die Zahlen bedeuten — bei Überzeit steht dort «Überzeit»,
   die Farbe kommt nur dazu. */
.stunde__wort { font-size: 18px; text-align: right; white-space: nowrap; }
.stunde__wort--ueber { color: var(--warnung); font-weight: 600; }

/* Der Balken ist Dekoration (aria-hidden) — die Zahlen stehen daneben im Text. */
.stunde__balken {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.stunde__fuellung { display: block; height: 100%; border-radius: 999px; background: var(--blau); }
.stunde--ueber .stunde__fuellung { background: var(--warnung); }

.stunden__fuss { color: var(--text-3); font-size: 15px; }

/* ------------------------------------------------------------------ Ferien */

/* Bewusst **eine Zeile**, kein zweiter Kasten: die Tagesansicht trägt schon
   Statuskarte, «Meine Stunden» und die Hauptaktion — ein weiterer Kasten würde
   den grossen Knopf quer aus dem Bild schieben. Volle Breite, 64 px hoch:
   links «Ferien», in der Mitte die Lage, rechts der Weg weiter. */
.ferienzeile {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: var(--tippflaeche);
  padding: 10px 20px;
  background: var(--surface);
  border: 1px solid var(--linie);
  border-radius: 16px;
  text-align: left;
}
.ferienzeile:active { background: var(--surface-2); }
.ferienzeile__name {
  display: flex; align-items: center; gap: 12px; flex: none;
  font-size: 21px; font-weight: 600;
}
.ferienzeile__name svg { color: var(--blau); width: 24px; height: 24px; }
.ferienzeile__lage {
  flex: 1; min-width: 0; font-size: 18px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ferienzeile__tun { display: flex; align-items: center; gap: 6px; flex: none; font-size: 18px; }
.ferienzeile__tun svg { width: 22px; height: 22px; }

/* Die Regel im Klartext — ruhig wie die Aufbewahrungsfrist, kein Warnhinweis. */
.ferienregel {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-2); font-size: 17px;
}
.ferienregel svg { width: 20px; height: 20px; flex: none; }

/* Ein Antrag je Zeile: Zeitraum und Marke oben, darunter Arbeitstage und was
   mit ihm passiert ist — der Status steht immer auch als Wort da. */
.antraege { display: flex; flex-direction: column; gap: 12px; }
.antrag {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  padding: 14px 18px;
  background: var(--surface-2);
  border: 1px solid var(--linie);
  border-left: 5px solid var(--linie-stark);
  border-radius: 14px;
}
.antrag--beantragt { border-left-color: var(--warnung); }
.antrag--genehmigt { border-left-color: var(--gruen); }
.antrag--abgelehnt { border-left-color: var(--kritisch); }
.antrag__kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; width: 100%;
}
.antrag__zeitraum { font-size: 21px; font-weight: 600; }
.antrag__unter { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 17px; }
.antrag__tage { font-weight: 600; color: var(--text); }

/* Monatskalender: eigenes Raster statt <input type="date"> — dessen Format und
   Bedienung folgen der Browsersprache und sind am iPad nicht in unserer Hand. */
.kalender__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.kalender__monat { font-size: 23px; font-weight: 600; }
.knopf--rund {
  width: var(--tippflaeche); height: var(--tippflaeche);
  flex: none; padding: 0; border-radius: 50%;
}

.kalender { display: flex; flex-direction: column; gap: 4px; }
.kalender__wochentage, .kalender__raster {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.kalender__wt { text-align: center; font-size: 16px; line-height: 1.3; color: var(--text-3); font-weight: 600; }

/* Tippflächen von mindestens 64 × 64 px — mit Handschuhen zu treffen. */
.tag {
  min-height: var(--tippflaeche);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  background: var(--surface-2);
  border: 2px solid transparent;
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
}
.tag:active { background: var(--surface-3); }
.tag__zahl { font-size: 22px; font-weight: 600; line-height: 1.1; }
.tag__zeichen { font-size: 13px; font-weight: 600; line-height: 1; min-height: 13px; }
.kalender__leer { min-height: var(--tippflaeche); }

.tag--wochenende .tag__zahl { color: var(--text-2); }
/* Gesperrt heisst «zu kurzfristig» — sichtbar gedämpft, aber nicht tot: das
   Antippen sagt, ab wann es geht. */
.tag--gesperrt { background: transparent; color: var(--text-3); }
.tag--gesperrt .tag__zahl { color: var(--text-3); text-decoration: line-through; }

/* Der gewählte Bereich ist durchgehend markiert — über Farbe UND über Rand
   bzw. das Zeichen unter der Zahl, nie nur über Farbe. */
.tag--drin {
  background: rgba(57, 135, 229, 0.20);
  border-color: rgba(57, 135, 229, 0.45);
}
.tag--drin .tag__zeichen { color: #8fbdf3; }
.tag--rand {
  background: var(--blau);
  border-color: #ffffff;
  color: var(--text);
}
.tag--rand .tag__zahl, .tag--rand .tag__zeichen { color: var(--text); }

/* Fuss der Zeitraumwahl: Zurück, der gewählte Zeitraum im Klartext, Beantragen.
   Der Rest der Kalenderabmessungen steht weiter unten bei den Blättern — dort
   werden die Vorgaben von `.blatt` überschrieben. */
.ferienwahl__text {
  flex: 1; min-width: 200px;
  font-size: 19px; font-weight: 600;
}

/* ------------------------------------------------------------------ Marken */

.marke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.marke--gruen  { background: rgba(25, 158, 112, 0.18); color: #6fd7b3; border-color: rgba(25, 158, 112, 0.5); }
.marke--gelb   { background: rgba(250, 178, 25, 0.16); color: #f3c869; border-color: rgba(250, 178, 25, 0.5); }
.marke--rot    { background: rgba(208, 59, 59, 0.18); color: #f09a9a; border-color: rgba(208, 59, 59, 0.55); }
.marke--blau   { background: rgba(57, 135, 229, 0.18); color: #8fbdf3; border-color: rgba(57, 135, 229, 0.5); }
.marke--orange { background: rgba(217, 89, 38, 0.20); color: #f0a281; border-color: rgba(217, 89, 38, 0.55); }
.marke--grau   { background: var(--surface-3); color: var(--text-2); border-color: var(--linie-stark); }
.marke--leicht { background: var(--surface-3); color: var(--text-2); border-color: var(--linie-stark); }
.marke--mittel { background: rgba(250, 178, 25, 0.16); color: #f3c869; border-color: rgba(250, 178, 25, 0.5); }
.marke--schwer { background: rgba(208, 59, 59, 0.18); color: #f09a9a; border-color: rgba(208, 59, 59, 0.55); }

/* ------------------------------------------------------------ Auftragswahl */

.auftraege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 18px;
}
.auftrag {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--linie);
  border-radius: 18px;
  text-align: left;
  min-height: 260px;
}
.auftrag:active { background: var(--surface-2); }
.auftrag__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.auftrag__fahrzeug { font-size: 27px; font-weight: 600; }
.auftrag__nr { font-size: 17px; color: var(--text-2); }
.auftrag__zeile {
  display: flex; align-items: center; gap: 12px;
  font-size: 19px; color: var(--text-2);
}
.auftrag__zeile svg { color: var(--blau); }
.auftrag__fuss {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linie);
}

/* --------------------------------------------------------------- Aufnahme */

.fortschritt { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fortschritt__text { font-size: 19px; color: var(--text-2); font-weight: 600; }
.fortschritt__punkte { display: flex; gap: 10px; }
.punkt { width: 34px; height: 8px; border-radius: 999px; background: var(--surface-3); }
.punkt--fertig { background: var(--gruen); }
.punkt--aktiv { background: var(--blau); }

.schritt { display: flex; flex-direction: column; gap: 18px; }

/* Kilometerstand: eigenes Ziffernfeld statt Bildschirmtastatur — grosse
   Tasten, keine Buchstaben, nichts zum Falschtippen. */
.km { text-align: center; padding: 2px 0; }
.km__anzeige { font-size: 54px; font-weight: 600; letter-spacing: 0.01em; }
.km__einheit { font-size: 28px; color: var(--text-2); }
.km__leer { color: var(--text-3); }
.km__hinweis { color: var(--text-2); font-size: 18px; margin-top: 6px; }

.tasten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
.taste {
  min-height: 80px;
  background: var(--surface-2);
  border: 1px solid var(--linie-stark);
  border-radius: 14px;
  font-size: 34px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
}
.taste:active { background: var(--surface-3); }
.taste--breit { grid-column: span 2; }
.taste--still { color: var(--text-2); }
.taste--still svg { width: 32px; height: 32px; }

/* Fotos: Bild plus kurzer Kommentar — das ist zugleich der Schaden. Keine
   Bereiche, keine Schadensarten: der Mitarbeiter fotografiert und schreibt in
   einem Satz dazu, was es ist. */
.gruppe__titel { color: var(--text-2); font-size: 19px; margin-top: 4px; }

.fotos { display: flex; flex-direction: column; gap: 12px; }
.foto {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--linie);
  border-radius: 16px;
}
.foto__oeffnen {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
  min-height: var(--tippflaeche);
  padding: 0;
  background: none;
  border: none;
  text-align: left;
}
.foto__oeffnen:active { opacity: 0.7; }
.foto__bild { flex: none; width: 104px; height: 78px; }
.foto__kommentar { font-size: 20px; min-width: 0; }
.foto__weg {
  flex: none;
  width: var(--tippflaeche); height: var(--tippflaeche);
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--linie-stark);
  border-radius: 14px;
  color: var(--text-2);
}
.foto__weg:active { background: var(--kritisch); color: var(--text); }
.foto__gross { height: min(46dvh, 340px); }

/* Ohne echtes Foto (Beispieldaten) eine ruhige Fläche — bewusst kein Bild,
   das wie eine echte Aufnahme aussieht. */
.foto__bild img, .foto__gross img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--linie);
  display: block;
}
.platzhalter {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px dashed var(--linie-stark);
  border-radius: 12px;
  color: var(--text-3);
  font-size: 15px;
}
.platzhalter svg { width: 28px; height: 28px; }
.foto__gross .platzhalter { font-size: 19px; gap: 10px; }
.foto__gross .platzhalter svg { width: 48px; height: 48px; }

/* Grosses Textfeld: der Kommentar wird mit dem Finger auf der iPad-Tastatur
   getippt, darum mindestens 20 px Schrift. */
.textfeld {
  width: 100%;
  min-height: 120px;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--linie-stark);
  border-radius: 14px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 21px;
  line-height: 1.4;
  resize: none;
}
.textfeld::placeholder { color: var(--text-3); }

.hinweisband {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(250, 178, 25, 0.10);
  border: 1px solid rgba(250, 178, 25, 0.4);
  border-radius: 14px;
  font-size: 18px;
}
.hinweisband svg { color: var(--warnung); }
.hinweisband--gut { background: rgba(25, 158, 112, 0.12); border-color: rgba(25, 158, 112, 0.45); }
.hinweisband--gut svg { color: var(--gruen); }

/* Aufbewahrungsfrist: eine ruhige Fussnote, kein Warnhinweis — sie steht da,
   wo aufgenommen wird, und soll den Blick nicht vom Weiter-Knopf wegziehen. */
.aufbewahrung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 17px;
  text-align: left;
}
.aufbewahrung svg { width: 20px; height: 20px; flex: none; }

/* Sprachnotiz: runder Knopf in der Kopfzeile, nur in der Fahrzeug-Aufnahme.
   Bewusst nicht schwebend unten — dort liegt die Hauptaktion, die er
   verdecken würde. */
.mikroknopf {
  width: 72px; height: 72px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--linie-stark);
}
.mikroknopf svg { width: 30px; height: 30px; color: var(--blau); }
.mikroknopf:active { background: var(--surface-3); transform: scale(0.94); }
/* Läuft die Aufnahme, sagt es der Knopf über Farbe UND die tickende Zahl. */
.mikroknopf--aktiv {
  background: var(--kritisch);
  border-color: #f09a9a;
  animation: pulsieren 1.6s ease-in-out infinite;
}
.mikroknopf--aktiv svg { width: 22px; height: 22px; color: var(--text); }
.mikroknopf--aktiv:active { background: #b53232; }
.mikroknopf__zeit { font-size: 15px; font-weight: 700; line-height: 1; }
@keyframes pulsieren { 50% { border-color: rgba(255, 255, 255, 0.85); } }
@media (prefers-reduced-motion: reduce) { .mikroknopf--aktiv { animation: none; } }

.notizen { display: flex; flex-direction: column; gap: 14px; }
.notiz {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--linie);
  border-radius: 14px;
}
.notiz__kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.notiz__zeit { font-size: 19px; font-weight: 600; }
.notiz__spieler { width: 100%; height: 52px; }
.knopf--eng { flex: none; padding: 10px 18px; font-size: 18px; }

/* ---------------------------------------------------------- Arbeitsansicht */

/* Jede Position hat ZWEI getrennte Tippflächen: links das Kästchen (hakt ab),
   rechts der Rest der Zeile (startet die Uhr für diese Arbeit). Darum ist die
   Zeile ein Behälter mit zwei Knöpfen nebeneinander — nicht ein Knopf. */
.seite__unter { font-size: 17px; margin-top: -12px; }

.posten-liste { display: flex; flex-direction: column; gap: 12px; }
.posten {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-height: 96px;                 /* deutlich über den geforderten 72 px */
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--linie);
  border-radius: 16px;
  width: 100%;
}
.posten--fertig { border-color: rgba(25, 158, 112, 0.45); background: rgba(25, 158, 112, 0.08); }
/* Die laufende Position sagt es über den Rand UND die Marke «läuft». Der
   dicke Balken links ist ein innerer Schatten, kein breiterer Rand — sonst
   rutscht der Inhalt der Zeile beim Starten um ein paar Pixel. */
.posten--laeuft {
  border-color: var(--gruen);
  box-shadow: inset 5px 0 0 var(--gruen);
}

.posten__haken {
  flex: none;
  width: 72px; min-height: 72px;    /* geforderte 72 × 72 px */
  display: grid; place-items: center;
  background: none;
  border: none;
  padding: 0;
}
.posten__haken:active .posten__kasten { background: var(--surface-3); transform: scale(0.94); }
.posten__kasten {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 2px solid var(--linie-stark);
  border-radius: 12px;
}
.posten--fertig .posten__kasten { background: var(--gruen); border-color: var(--gruen); }
.posten__kasten svg { width: 32px; height: 32px; stroke-width: 2.6; }

.posten__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 1;
  min-width: 0;
  padding: 8px 6px 8px 12px;
  background: none;
  border: none;
  border-radius: 12px;
  text-align: left;
}
.posten__zeile:active { background: var(--surface-2); }
.posten__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.posten__name { font-size: 23px; font-weight: 600; }
.posten--fertig .posten__name { color: var(--text-2); }
.posten__unter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 16px; color: var(--text-2);
}
.posten__erfasst { font-variant-numeric: tabular-nums; }
.posten__erfasst::before { content: "·"; margin-right: 10px; color: var(--text-3); }
.posten__rechts { display: flex; align-items: center; gap: 10px; flex: none; }
.posten__rechts .dauer { font-size: 22px; }
.posten__start { display: flex; align-items: center; gap: 6px; font-size: 17px; }
.posten__start svg { width: 22px; height: 22px; }

/* Die Aufnahme steht als Liste, gleiche Machart wie die Namensliste: eine
   Zeile je Eintrag über die volle Breite, links das Icon, rechts der Hinweis,
   dass es weitergeht. */
.nachtraege { display: flex; flex-direction: column; gap: 12px; }
.nachtrag {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 84px;                 /* über den geforderten 72 px */
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--linie);
  border-radius: 16px;
  text-align: left;
}
.nachtrag:active { background: var(--surface-2); }
.nachtrag__ikon { color: var(--blau); display: flex; flex: none; }
.nachtrag__text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.nachtrag__name { font-size: 21px; font-weight: 600; }
.nachtrag__wert { font-size: 17px; }
.nachtrag__tun { display: flex; align-items: center; gap: 6px; flex: none; font-size: 17px; }
.nachtrag__tun svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ Blätter */

.schleier {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
  padding: max(env(safe-area-inset-top), 12px) 0 0;
}
.blatt {
  width: min(920px, 100%);
  max-height: 94dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--linie-stark);
  border-radius: 22px 22px 0 0;
  padding: 24px 24px max(env(safe-area-inset-bottom), 24px);
  gap: 18px;
}
.blatt--schmal { width: min(640px, 100%); }
.blatt__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.blatt__kopf p { font-size: 17px; }
.blatt__zu {
  width: var(--tippflaeche); height: var(--tippflaeche);
  flex: none;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--linie-stark);
  border-radius: 14px;
}
.blatt__zu:active { background: var(--surface-3); }
.blatt__inhalt { overflow-y: auto; display: flex; flex-direction: column; gap: 14px; -webkit-overflow-scrolling: touch; }
.blatt__fuss {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid var(--linie);
}
.blatt__fuss .knopf--haupt { margin-left: auto; min-height: 80px; }

/* Sechs Wochenzeilen à 64 px lassen sich nicht kleiner machen, ohne die
   geforderte Tippfläche zu unterschreiten — also gibt das Blatt drumherum
   Höhe ab: schmaleres Polster, engere Abstände, ein flacherer Fuss. Quer
   (1180 × 820) steht der ganze Monat damit ohne Blättern im Bild. */
.blatt--kalender {
  max-height: 100%;
  padding: 18px 20px max(env(safe-area-inset-bottom), 18px);
  gap: 12px;
}
.blatt--kalender .hinweisband { font-size: 17px; padding: 12px 16px; }
.blatt__fuss--ferien { gap: 16px; padding-top: 12px; }
.blatt__fuss--ferien .knopf--haupt { min-height: 72px; }

/* ------------------------------------------------------------------ Meldung */

/* Kurzmeldungen erscheinen oben: unten liegt immer die Hauptaktion, die sie
   sonst genau im Moment der Bestätigung verdecken würden. Sie beginnen aber
   erst unterhalb der Kopfzeile — sonst steht der Seitentitel halb hinter der
   Meldung hervor, und beides ist zusammen schlechter lesbar als einzeln. */
.meldung {
  position: fixed;
  left: 50%;
  top: calc(max(env(safe-area-inset-top), 16px) + 90px);
  transform: translate(-50%, -24px);
  max-width: min(760px, calc(100% - 40px));
  padding: 20px 28px;
  background: var(--surface-3);
  border: 1px solid var(--linie-stark);
  border-radius: 16px;
  font-size: 20px;
  font-weight: 600;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 60;
  text-align: center;
}
.meldung--an { opacity: 1; transform: translate(-50%, 0); }

/* Ausnahme Namensliste: dort steht oben Datum und Uhr und unten nichts —
   also nach unten ausweichen, statt die Kopfzeile zu verdecken. */
body[data-ansicht="namen"] .meldung {
  top: auto;
  bottom: max(env(safe-area-inset-bottom), 24px);
  transform: translate(-50%, 24px);
}
body[data-ansicht="namen"] .meldung--an { transform: translate(-50%, 0); }

/* ----------------------------------------------------- Enger (iPad hoch) */

@media (max-width: 780px) {
  body { font-size: 19px; }
  .start__uhr { font-size: 44px; }
  .karte__gross { font-size: 28px; }
  .dauer--gross { font-size: 42px; }
  /* Hoch ist die Breite knapp, dafür die Höhe da: die Zeile bricht um —
     Bezeichnung und Wort oben, darunter die Zahl, darunter der Balken. */
  .stunden__zeilen {
    display: flex; flex-direction: column; align-items: stretch; gap: 16px;
  }
  .stunde {
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 6px;
  }
  .stunde__name { grid-area: 1 / 1 / 2 / 3; }
  .stunde__wort { grid-area: 1 / 3; justify-self: end; }
  .stunde__zahl { grid-area: 2 / 1; justify-self: start; font-size: 24px; }
  .stunde__soll { grid-area: 2 / 2; font-size: 24px; }
  .stunde__balken { grid-area: 3 / 1 / 4 / 4; }
  .km__anzeige { font-size: 48px; }
  /* Schmal wird der Kalender enger, bleibt aber über 64 px je Tippfläche. */
  .kalender__wochentage, .kalender__raster { gap: 4px; }
  .tag { padding: 2px; }
  .tag__zahl { font-size: 20px; }
  .ferienzeile { gap: 12px; padding: 10px 16px; }
  .ferienzeile__lage { font-size: 17px; }
  .auftraege { grid-template-columns: 1fr; }
  .kopfzeile { grid-template-columns: auto minmax(0, 1fr) auto; }
  .kopfzeile__mitte h1 { font-size: 23px; }
  .blatt__fuss .knopf--haupt { min-width: 0; flex: 1; }
}