/*
 * 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; }
/* Der zweite, leise Weg: er soll da sein, aber den Blick nicht von der
   Hauptaktion wegziehen — kleiner, grauer, ohne Füllung. */
.knopf--still {
  min-height: var(--tippflaeche);
  font-size: 19px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border-color: var(--linie);
}
.knopf--still svg { width: 22px; height: 22px; }
.knopf--still:active { background: var(--surface-2); }
.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); }
/* Schnellwahl im Blatt «Krank melden»: gleich grosse Knöpfe nebeneinander, die
   Wahl trägt zusätzlich einen Haken — nie nur Farbe. */
.knopf--wahl { min-width: 220px; font-weight: 600; }
.knopf--wahl svg { width: 22px; height: 22px; }
.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;
}
/* Eine laufende Krankmeldung steht als Wort da («krank gemeldet seit 31.07.»);
   die Warnfarbe kommt nur dazu, sie trägt die Aussage nicht allein. */
.ferienzeile__lage--krank { color: #f0a281; font-weight: 600; }
.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); }
/* Krankmeldungen tragen dieselbe Warnfarbe wie die Marke daneben — das Wort
   «krank» steht immer dabei, die Farbe kommt nur dazu. */
.antrag--krank { border-left-color: var(--orange); }
.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); }

/* Kilometerstand prüfen: eingetippt und zuletzt erfasst untereinander, damit
   der Zahlendreher ins Auge springt. Beide Zahlen einstellig ausgerichtet. */
.kmpruefung { display: flex; flex-direction: column; gap: 10px; }
.kmpruefung__zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--linie);
  border-radius: 12px;
  font-size: 21px;
}

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

/* Dringlichkeit: die einzige Marke, die die Farbe **voll** ausfüllt. Die
   Auftragswahl hängt an der Wand einer Werkstatt und wird im Vorbeigehen
   gelesen — eine durchscheinende Marke unter fünf anderen sah man dort nicht.
   Gross und gepolstert wie die Knöpfe, damit sie zum Massstab der Seite passt.

   Die Schriftfarbe ist je Farbe die besser lesbare, nicht überall dieselbe:
   auf Rot trägt Weiss (4,8:1), auf Orange und Grün die dunkle Tinte (4,9:1
   bzw. 5,6:1). Weiss auf Grün käme auf 3,4:1 und wäre auf drei Meter Abstand
   ein grauer Fleck. Das Wort steht ohnehin dabei — Dringlichkeit nie nur in
   der Farbe. */
.prio-marke {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
}
.prio-marke--1 { background: var(--kritisch); color: #ffffff; }
.prio-marke--2 { background: var(--orange); color: #111111; }
.prio-marke--3 { background: var(--gruen); color: #111111; }

/* ------------------------------------------------------------ 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); }
/* Dringlichkeit als farbiger Rahmen: 1 dringend rot, 2 normal orange, 3 bei
   Gelegenheit grün — quer durch die Werkstatt zu sehen, ohne die Karte zu lesen.
   Vorher trug nur die linke Kante die Farbe, und zwar halbdurchsichtig; auf dem
   iPad an der Wand war das aus drei Metern nicht mehr zu unterscheiden. Jetzt
   liegt die volle Farbe rundum, die linke Kante bleibt die dickste und gibt der
   Reihe ihren Takt.
   Das linke Polster gibt die 7 px zurück, die die dicke Kante frisst, sonst
   stünde der Text jeder Karte ein Stück weiter innen als beim Nachbarn. */
.auftrag--prio1, .auftrag--prio2, .auftrag--prio3 { padding-left: 17px; }
.auftrag--prio1 { border: 2px solid var(--kritisch); border-left-width: 8px; }
.auftrag--prio2 { border: 2px solid var(--orange); border-left-width: 8px; }
.auftrag--prio3 { border: 2px solid var(--gruen); border-left-width: 8px; }
.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); }
/* Einzeiliges Feld — gleiche Machart, nur flach: der Name des Kunden. */
.textfeld--zeile { min-height: var(--tippflaeche); padding: 12px 16px; flex: 1; min-width: 0; }

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

/* Der letzte Schritt der Aufnahme: der Kunde bestätigt mit dem Finger, was
   aufgenommen wurde. Die Fläche ist der grösste Block der Seite — sie ist das,
   worum es hier geht. */
.unterschrift { display: flex; flex-direction: column; gap: 14px; }
.unterschrift__satz {
  display: flex; align-items: center; gap: 12px;
  font-size: 20px;
}
.unterschrift__satz svg { color: var(--blau); flex: none; }

/* Volle Breite, mindestens 260 px hoch, heller Rahmen. `touch-action: none`
   ist Pflicht: sonst blättert die Seite, statt dass ein Strich entsteht. */
.unterschrift__feld {
  display: block;
  width: 100%;
  height: clamp(260px, 30dvh, 300px);
  min-height: 260px;
  background: var(--surface-2);
  border: 2px solid var(--linie-stark);
  border-radius: 16px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: crosshair;
}
/* Steht das iPad hoch, ist die Höhe da — und mit dem Finger unterschreibt es
   sich auf einer grossen Fläche leichter. */
@media (min-height: 900px) {
  .unterschrift__feld { height: 520px; }
}

/* Quer (1180 × 820) bestimmt die Höhe, und sie war mit 260 px auf den Pixel
   ausgereizt. Seit die AGB-Zeile darübersteht, fehlen 78 px — die kommen aus
   der Fläche: 180 px sind auf dem iPad immer noch gut 3 cm Schreibhöhe, und
   dafür bleiben «Nochmals», der Name und die Hauptaktion im Bild. Die Zahl ist
   aus dem Budget gerechnet, nicht gewählt; wächst der Schritt weiter, ist sie
   die Stelle, die nachgibt. */
@media (max-height: 899px) {
  .unterschrift__feld { height: 180px; min-height: 180px; }
}

/* «Nochmals» und der Name in EINER Zeile — quer ist die Höhe knapp, und die
   Hauptaktion darf nicht aus dem Bild rutschen. */
.unterschrift__reihe { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.unterschrift__name {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 320px;
  font-size: 17px;
}

/* Das gespeicherte Protokoll: weisse Linie auf dunklem Grund, damit sie auch
   auf dem iPad im Werkstattlicht zu sehen ist. */
.unterschrift__blatt {
  height: 240px;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--linie-stark);
  border-radius: 16px;
}
.unterschrift__blatt--gross { height: min(46dvh, 340px); }
.unterschrift__blatt img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.unterschrift__blatt .platzhalter { border-style: dashed; }
.unterschrift__wer { font-size: 20px; font-weight: 600; text-align: center; }

/* --------------------------------------------------------------------- AGB */

/* Die Pflichtzeile über der Unterschriftenfläche. Als eigener Kasten
   abgesetzt, damit sie nicht als Fussnote gelesen wird — hier wird etwas
   angenommen, nicht bloss etwas mitgeteilt. Angenommen sieht sie aus wie eine
   erledigte Position: grüner Rand, grünes Kästchen, Haken. */
.agb {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 18px;              /* oben und unten kein Polster: die Höhe ist quer knapp */
  background: var(--surface);
  border: 1px solid var(--linie);
  border-radius: 16px;
}
.agb--an { background: rgba(25, 158, 112, 0.08); border-color: rgba(25, 158, 112, 0.45); }

/* Machart wie `posten__haken`, nur schmaler: 72 px wie in der Arbeitsansicht
   schöben die Zeile quer (1180 × 820) die Hauptaktion aus dem Bild. 64 × 64 px
   bleiben deutlich über den geforderten 44 px. */
.agb__haken {
  flex: none;
  width: var(--tippflaeche); min-height: var(--tippflaeche);
  display: grid; place-items: center;
  background: none;
  border: none;
  padding: 0;
}
.agb__haken:active .agb__kasten { background: var(--surface-3); transform: scale(0.94); }
.agb__kasten {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 2px solid var(--linie-stark);
  border-radius: 12px;
}
.agb--an .agb__kasten { background: var(--gruen); border-color: var(--gruen); }
.agb__kasten svg { width: 28px; height: 28px; stroke-width: 2.6; }

.agb__satz { font-size: 19px; }

/* «AGB» ist ein eigener Knopf mitten im Satz — verschachtelte Knöpfe gibt es
   nicht. `display: inline` lässt ihn im Textfluss stehen, das Polster bringt
   die Tippfläche trotzdem über 44 px, und der negative Aussenabstand hält die
   Zeilenhöhe. Unterstrichen, damit er nicht nur über die Farbe erkennbar ist. */
.agb__link {
  display: inline;
  padding: 10px 6px;
  margin: -10px 0;
  background: none;
  border: none;
  color: var(--blau);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.agb__link:active { color: var(--text); }

.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); flex: none; }
.hinweisband--gut { background: rgba(25, 158, 112, 0.12); border-color: rgba(25, 158, 112, 0.45); }
.hinweisband--gut svg { color: var(--gruen); }

/* Der automatische Stopp: eine Mitteilung, keine Aufgabe. Ruhiges Grau statt
   Warngelb — der Mitarbeiter kann daran nichts richten, das macht der Chef.
   Der einzige Knopf ist das Wegtippen, und der ist 64 px gross wie alle. */
.hinweisband--auto {
  background: var(--surface-2);
  border-color: var(--linie-stark);
  padding: 12px 12px 12px 18px;
  font-size: 17px;
}
.hinweisband--auto svg { color: var(--text-2); }

.hinweisband__zu {
  width: var(--tippflaeche); height: var(--tippflaeche);
  flex: none;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 14px;
}
.hinweisband__zu:active { background: var(--surface-3); }

/* 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; }
/* Fehlt die Unterschrift, ist die Zeile ein Hinweis: das Wort «fehlt noch»
   steht als Marke drin, der orange Streifen links kommt nur dazu. */
.nachtrag--offen { border-left: 5px solid var(--orange); }
.nachtrag--offen .nachtrag__ikon { color: var(--orange); }

/* ------------------------------------------------------ Allgemeine Tätigkeiten */

/* Aufräumen, Fahrzeug abholen/bringen, auswärts arbeiten — je ein grosser
   Knopf, der die Buchung sofort startet. «Pause» steht nicht hier: sie ist das
   Häufigste und liegt direkt auf der Tagesansicht. */
.taetigkeiten { display: flex; flex-direction: column; gap: 14px; }
.taetigkeit {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 88px;                 /* über den geforderten 76 px */
  padding: 14px 22px;
  background: var(--surface-2);
  border: 1px solid var(--linie-stark);
  border-radius: 16px;
  text-align: left;
}
.taetigkeit:active { background: var(--surface-3); transform: translateY(1px); }
.taetigkeit__ikon { display: flex; flex: none; color: var(--blau); }
.taetigkeit__ikon svg { width: 32px; height: 32px; }
.taetigkeit__name { flex: 1; min-width: 0; font-size: 24px; font-weight: 600; }
.taetigkeit__tun { display: flex; align-items: center; gap: 6px; flex: none; font-size: 17px; }
.taetigkeit__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; }

/* Der volle Wortlaut der AGB. Elf Abschnitte passen auf keinen Bildschirm —
   der Inhalt scrollt (`blatt__inhalt`), Kopf und Fuss bleiben stehen. Etwas
   kleiner und luftiger gesetzt als der Rest: das hier wird gelesen, nicht
   angetippt. `overscroll-behavior` hält das Blättern im Blatt, sonst wandert
   es am Ende der Liste auf die Seite dahinter. */
.agb-text {
  max-height: 100%;
  gap: 22px;
  padding-right: 6px;
  font-size: 18px;
  line-height: 1.55;
  overscroll-behavior: contain;
}
.agb-text__teil { display: flex; flex-direction: column; gap: 6px; }
.agb-text__teil h3 { font-size: 19px; }
.agb-text__teil p { color: var(--text-2); }

/* ------------------------------------------------------------------ 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; }
  /* Schmal bricht der Name unter «Nochmals» um, statt zu quetschen. */
  .unterschrift__name { min-width: 200px; }
  .kopfzeile { grid-template-columns: auto minmax(0, 1fr) auto; }
  .kopfzeile__mitte h1 { font-size: 23px; }
  .blatt__fuss .knopf--haupt { min-width: 0; flex: 1; }
}

/* ------------------------------------------------------ Enger (Telefon) */

/*
 * Das Terminal ist für das iPad gebaut — quer wie hoch. Am Telefon soll es
 * trotzdem nichts seitlich aus dem Bild schieben: dort ist die Zeilenbreite so
 * knapp, dass die drei Nebeneinander von oben nicht mehr aufgehen (gemessen bei
 * 390 px: 429 px breite Seite). Die Höhe ist da — also brechen die betroffenen
 * Zeilen um, statt zu quetschen. Ab 480 px greift wieder die iPad-Anordnung.
 */
@media (max-width: 480px) {
  /* «Ferien und Abwesenheit» braucht allein schon 284 px; mit Lage und «öffnen»
     daneben wären es 392 px auf 316 px Platz — der Pfeil stand 59 px ausserhalb
     der Zeile. Der Name bekommt darum die erste Zeile für sich, Lage und Weg
     weiter rücken darunter. Angetippt wird weiterhin die ganze Fläche. */
  .ferienzeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 12px; row-gap: 2px;
    align-items: center;
  }
  .ferienzeile__name { grid-area: 1 / 1 / 2 / 3; }
  .ferienzeile__lage { grid-area: 2 / 1; }
  .ferienzeile__tun { grid-area: 2 / 2; }

  /* Zahlen und Wort teilen sich sonst eine Zeile: 345 px Bedarf auf 308 px
     Platz — «3,0 h Überzeit» ragte aus der Karte hinaus. Das Wort bekommt eine
     eigene Zeile über dem Balken und bleibt rechtsbündig bei den Zahlen. */
  .stunde__name { grid-area: 1 / 1 / 2 / 4; }
  .stunde__wort { grid-area: 3 / 1 / 4 / 4; }
  .stunde__balken { grid-area: 4 / 1 / 5 / 4; }

  /* Der Hauptknopf im Blattfuss wurde neben dem zweiten Knopf auf 164 px
     gequetscht, seine Beschriftung («Ferien beantragen», 184 px) stand über den
     Rand hinaus. Volle Breite in eigener Zeile — abschneiden darf sie nie. Die
     etwas kleinere Schrift hält die längste Beschriftung dabei auf einer Zeile. */
  .blatt__fuss .knopf--haupt { flex: 1 0 100%; font-size: 24px; }
}