/* =====================================================================
   Meine Zeiten — der Stil der App (Bausteine 14d, 14d-2, 14d-3)
   =====================================================================
   **Kein Wert steht hier, der nicht aus `theme.css` kommt.** Keine
   Hex-Farbe, keine Schriftgroesse, kein Radius, keine Dauer — die
   Grundregel aus `gestaltung.md`: „Jede neue Ansicht bezieht Farben,
   Groessen, Radien und Zustaende ausschliesslich aus den Variablen der
   theme.css. Kein Wert wird im Ansichts-Code neu erfunden."

   Was hier steht, ist **Anordnung**: was neben was liegt, was wie breit
   ist, was scrollt, wie gross ein Knopf mindestens sein muss, damit ein
   Daumen ihn trifft. Dafuer gibt es in `theme.css` keine Variablen, und
   dafuer soll es auch keine geben.

   **Sechs Werte stehen hier trotzdem als Zahl, und zwar mit Grund** — fuer
   sie fuehrt `theme.css` keine Variable:
     · die *Sperrung* der Etiketten und Chips (.7px, .6px). Sie steht dort
       im Kommentar bei den Schriftgroessen, nur nicht als Wert.
     · die *Dauer des Pulses* (2.4s) an der laufenden Uhr. `theme.css`
       kennt drei Dauern fuer Hover, Einblenden und Blattwechsel; der
       „dezente Puls lebendiger Punkte" (Prinzip 8) ist keine davon.
     · die *Deckkraft* des Treppenmotivs (.07) — sie steht als Zahl in
       `gestaltung.md`, Prinzip 10 („sehr blass, etwa 7 %"), und die
       Deckkraft der Keyframes, die kein Zustand ist (fuer den gibt es
       `--zustand-deaktiviert`).
     · die *Zeilenhoehe 1* auf den grossen Werten: keine Zeilenhoehe im
       Sinne des Fliesstextes, sondern die Hoehe einer Ziffer.
     · die *Hoechstbreite der laufenden Uhr* (12vw, 7vw) — kein Schriftmass,
       sondern eine Grenze: Die Groesse aus `theme.css` bleibt die Obergrenze,
       und ein schmales Handy bekommt so viel davon, wie es tragen kann.
     · die *Namen der zwei eingebetteten Schriften* in ihrer eigenen
       Deklaration (`@font-face`). Woanders stehen sie nie.
   Alles Uebrige — jede Farbe, jede Schriftgroesse, jede Schriftart, jeder
   Radius, jeder Schatten, jede Zeilenhoehe des Fliesstextes — kommt aus
   einer Variablen, und ein Waechter in `tests/app.test.ts` misst das.

   ---------------------------------------------------------------------
   **Gabelung 4 (September 2026): Papier.** Die App ist hell.
   ---------------------------------------------------------------------
   `gestaltung.md`, Prinzip 1: „Drinnen dunkel, draussen hell." Die
   Bereichspalette steht in `theme.css`, Abschnitt 6b, als eigene
   `--papier-*`-Werte; sie gelten „nur unter `[data-bereich=
   'meine-zeiten']`". Genau das geschieht im Block gleich unten: Die
   Grundnamen, die diese ganze Datei benutzt, bekommen dort die
   Papier-Werte. Damit steht **kein zweiter Stil** fuer dieselben
   Bauteile daneben — dieselben Regeln, eine andere Palette.

   Die Farbregel (Prinzip 2) haelt dabei unveraendert:
     --akzent        Logoblau → interaktiv: Griffe, Auswahl, Fokus,
                                Auftragsnummern-Chip. Nie „laeuft
                                gerade", nie „bitte pruefen", nie
                                Dringlichkeit.
     --bestaetigung  Gruen    → NUR „geschehen/lebendig": laufende Uhr,
                                das Haekchen der gesendeten Handlung.
     --warnung       Bernstein → Pruef-Hinweise, Minus auf dem Flexkonto.
     Marine/Grau              → alles andere, in drei Textstufen.

   Weg sind mit Gabelung 4 das **Raster** auf dem Grund und die vier
   **Eckwinkel** — sie waren die dunkle Haptik. An ihre Stelle tritt das
   **Treppenmotiv des Logos**, sehr blass hinter dem Inhalt.
   ===================================================================== */

/* Die zwei Schriften, eingebettet — nie aus dem Netz geladen (Prinzip 3).
   Michroma und Exo 2, beide SIL Open Font License 1.1; Herkunft in
   SCHRIFT.md daneben. Exo 2 ist veraenderlich: eine Datei fuer jede
   Strichstaerke von 100 bis 900. */
@font-face {
  font-family: "Michroma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/app/michroma-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Exo 2";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/app/exo2-latin.woff2") format("woff2");
}

/* --- Die Bereichspalette: Papier (theme.css, Abschnitt 6b) ------------
   Hier wird nichts erfunden und nichts gemischt — jede Zeile legt einen
   Grundnamen auf den Papier-Wert, den `theme.css` dafuer fuehrt. */

[data-bereich="meine-zeiten"] {
  --grundflaeche: var(--papier-grundflaeche);
  --flaeche: var(--papier-flaeche);
  --zeile: var(--papier-zeile);
  --zeile-hell: var(--papier-zeile-hell);
  --linie: var(--papier-linie);
  --linie-fein: var(--papier-linie-fein);

  --text: var(--papier-text);
  --text-zweit: var(--papier-text-zweit);
  --text-gedaempft: var(--papier-text-gedaempft);

  --akzent: var(--papier-akzent);
  --bestaetigung: var(--papier-bestaetigung);
  --warnung: var(--papier-warnung);
  --akzent-flaeche: var(--papier-akzent-flaeche);
  --akzent-rahmen: var(--papier-akzent-rahmen);
  /* **Die Begleitflaechen von Bestaetigung und Warnung bleiben, wie sie
     sind** — sie sind durchsichtige Hauche derselben Bedeutungsfarbe und
     tun auf Papier, was sie auf dunklem Grund tun. Nur ihre **Rahmen**
     nehmen die Papier-Stufe der Farbe: Ein Viertel-durchsichtiger Rahmen,
     der auf Dunkel eine Kante ist, verschwindet auf Weiss — und ein
     Warnkasten ohne sichtbare Kante ist keiner (Prinzip 2). Die Farbe des
     Prototyps, der Bestaetigung und Warnung beide blau zeichnet, ist
     ausdruecklich **nicht** uebernommen: Das ist die Mehrfachbelegung,
     die Prinzip 2 verbietet. */
  --bestaetigung-rahmen: var(--papier-bestaetigung);
  --warnung-rahmen: var(--papier-warnung);

  /* Die zwei Stempelknoepfe: gefuellt statt Verlauf (6b). */
  --stempel-kommen: var(--papier-stempel-kommen);
  --stempel-feierabend: var(--papier-stempel-feierabend);

  /* Der Hauptknopf ist derselbe wie „Kommen" — „bestaetigende Handlungen
     gefuellt Logoblau wie Kommen, aber in Textgroesse" (6b). Und die Schrift
     darauf ist **weiss**, wie 6b es fuer die gefuellten Knoepfe sagt: das
     Weiss der Papier-Palette, nicht das blaeuliche Knopfweiss der dunklen. */
  --knopf-primaer: var(--papier-stempel-kommen);
  --knopf-primaer-rahmen: var(--papier-akzent);
  --knopf-primaer-text: var(--papier-flaeche);

  /* Die Sans dieses Bereichs ist Exo 2 (Gabelung 4). */
  --schrift-sans: var(--schrift-sans-mobil);

  /* Ein heller Grund braucht eine helle Haptik: Der Druck kommt aus den
     Papier-Werten, nicht aus den dunklen. Gefuellte Knoepfe behalten die
     dunkle Kante — auf Logoblau und Marine ist sie die richtige. */
  --druck-hell: var(--papier-druck);
  --gedrueckt-hell: var(--papier-gedrueckt);

  background: var(--grundflaeche);
  color: var(--text);
  font-family: var(--schrift-sans);
}

/* --- Der Rahmen: ein Blatt, Hochformat, Ein-Daumen-Bedienung ---------- */

.mz-geraet {
  position: relative;
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
}

/* Das Treppenmotiv des Logos, „sehr blass (etwa 7 %) unten rechts hinter
   dem Inhalt statt des feinen Rasters" (Prinzip 10). Es ist **derselbe
   Bilddatei-Ausschnitt** wie das Logo im Kopf — nur der linke Teil, ueber
   Groesse und Lage geholt; ein zugeschnittenes zweites Bild waere eine
   zweite Stelle, die dasselbe Logo zu kennen behauptet. Deko: Es faengt
   keinen Griff ab. */
.mz-treppe {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 240px;
  height: 240px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  background-image: url("/app/dietl-logo.png");
  background-repeat: no-repeat;
  /* Links ausgerichtet und so weit vergroessert, dass in das Fenster nur der
     **linke Viertel** des Logos faellt: die Treppe, ohne einen Zipfel der
     Wortmarke (Handprobe 14d-3 — bei 730 lugte das „D" herein). */
  background-size: 980px auto;
  background-position: left center;
}

.mz-blatt {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-4);
  padding: var(--abstand-6) var(--abstand-5) var(--abstand-6);
  min-height: 100dvh;
}
.mz-blatt--anmeldung {
  justify-content: center;
}

/* --- Schrift: Sans fuer Sprache, Mono fuer Werte (Prinzip 3) ----------
   Die Anzeigeschrift steht seit Gabelung 4 zusaetzlich auf dem Namen im
   Kopf, den Stempelknoepfen und den Bildschirmtiteln — „die Schrift der
   Wortmarke im Logo". Nie in Listen, Chips, Uhrzeiten in Zeilen oder
   Fliesstext: Sie ist nicht dicktengleich. */

.mz-titel {
  font-family: var(--schrift-anzeige);
  font-size: var(--gr-mobil-frage);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text);
}

.mz-marke,
.mz-etikett,
.mz-fest {
  font-family: var(--schrift-mono);
  font-size: var(--gr-etikett);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-gedaempft);
}
.mz-marke {
  color: var(--akzent);
}

.mz-datum,
.mz-zeit,
.mz-uhr-seit,
.mz-vorzeichen,
.mz-einheit,
.mz-kopfuhr {
  font-family: var(--schrift-mono);
  font-size: var(--gr-klein);
  color: var(--text-zweit);
}
.mz-kopfuhr {
  color: var(--text);
  white-space: nowrap;
}

.mz-wer {
  font-family: var(--schrift-anzeige);
  font-size: var(--gr-mobil-text);
  letter-spacing: 0.6px;
  color: var(--text);
}

.mz-uhr-zeit,
.mz-grosswert,
.mz-zeitwert {
  font-family: var(--schrift-anzeige);
  font-size: var(--gr-mobil-uhr);
  line-height: 1;
  color: var(--text);
}

/* **Die laufende Uhr darf nie breiter sein als das Handy.** Die Anzeigeschrift
   ist sehr breit; „10:17:05" in voller Groesse braucht mehr als ein Geraet mit
   390 Pixeln hergibt, und was ueber den Rand laeuft, ist weg (Handprobe
   14d-3). Die Groesse aus `theme.css` bleibt die **Obergrenze** — schmalere
   Geraete bekommen so viel davon, wie sie tragen. Die zwei Bruchteile der
   Fensterbreite sind Anordnung, wie die 44 Pixel eines Griffs: Sie sagen nicht,
   wie gross die Schrift ist, sondern wie breit sie hoechstens werden darf. */
.mz-uhr-zeit {
  font-size: min(var(--gr-mobil-uhr), 12vw);
  white-space: nowrap;
}
.mz-uhr-sekunden {
  font-size: min(var(--gr-mobil-uhr-klein), 7vw);
}
.mz-grosswert--klein {
  font-size: var(--gr-mobil-uhr-klein);
}
.mz-uhr-zeit {
  color: var(--bestaetigung);
  margin-top: var(--abstand-3);
}

.mz-fliesstext {
  font-size: var(--gr-mobil-text);
  color: var(--text-zweit);
}
.mz-fussnote,
.mz-arthinweis,
.mz-feldhinweis,
.mz-eintrag-neben,
.mz-auftrag-neben,
.mz-nachgeschickt {
  font-size: var(--gr-mobil-hinweis);
  color: var(--text-gedaempft);
}
.mz-gedaempft {
  opacity: var(--zustand-deaktiviert);
}

/* --- Kopf: Logo, Datum · Name, Uhrzeit, Menue ------------------------
   „Logo im Kopf oben links, darunter Datum und Name in einer Zeile"
   (Prinzip 10). Rechts die Uhrzeit und der Menueknopf; alles andere —
   Flexkonto, Verpflegung, Meine Woche, Passwort, Krankmeldung — liegt
   hinter dem Menue. */

.mz-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--abstand-3);
}
.mz-kopf-links {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  min-width: 0;
}
.mz-logo {
  display: block;
  width: 168px;
  height: auto;
}
.mz-kopfzeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  flex-wrap: wrap;
}
.mz-kopf-rechts {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  flex: none;
}

/* Der Menueknopf: drei Striche, 44 px im Quadrat — die Griffgroesse, die
   ein Daumen trifft. */
.mz-menueknopf {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  background: var(--zeile);
  border: 1px solid var(--linie);
  border-radius: var(--radius-chip);
  box-shadow: var(--druck-hell);
}
.mz-menueknopf:active {
  transform: translateY(2px);
  box-shadow: var(--gedrueckt-hell);
}
.mz-menuestrich {
  height: 2px;
  background: var(--text);
}

/* --- Tasten und Knoepfe (Prinzip 10, Muster aus theme.css 6b) ---------
   „Kein Knopf ohne Druckgefuehl, kein Knopf unter 44 px." */

button {
  font-family: var(--schrift-sans);
  cursor: pointer;
}
button:focus-visible,
input:focus-visible {
  outline: var(--zustand-fokus);
  outline-offset: 2px;
}

.mz-taste {
  flex: none;
  min-height: 44px;
  padding: var(--abstand-2) var(--abstand-3);
  background: var(--zeile);
  border: 1px solid var(--linie);
  border-radius: var(--radius-chip);
  color: var(--text);
  font-size: var(--gr-mobil-text);
  font-weight: 600;
  box-shadow: var(--druck-hell);
}
.mz-taste:active {
  transform: translateY(2px);
  box-shadow: var(--gedrueckt-hell);
}

.mz-zurueck {
  align-self: flex-start;
  padding: var(--abstand-2) 0;
  min-height: 44px;
  background: none;
  border: 0;
  color: var(--akzent);
  font-size: var(--gr-mobil-knopf);
  font-weight: 600;
}

/* Die zwei Stempelknoepfe: volle Breite, gefuellt — Kommen Logoblau,
   Feierabend Marine —, Anzeigeschrift versal, Kante unten, beim Druecken
   drei Pixel tiefer (theme.css 6b). Die dunkle Kante (`--taste-druck`)
   bleibt hier richtig: Sie sitzt auf einem gefuellten, dunklen Knopf. */
.mz-stempel {
  width: 100%;
  min-height: 96px;
  padding: var(--abstand-6) var(--abstand-5);
  border: 1px solid var(--knopf-primaer-rahmen);
  border-radius: var(--radius-knopf);
  background: var(--stempel-kommen);
  color: var(--knopf-primaer-text);
  font-family: var(--schrift-anzeige);
  font-size: var(--gr-mobil-gruss);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  box-shadow: var(--taste-druck);
}
.mz-stempel:active {
  transform: translateY(3px);
  box-shadow: var(--taste-gedrueckt);
}
.mz-stempel--kommen {
  background: var(--stempel-kommen);
}
.mz-stempel--feierabend {
  background: var(--stempel-feierabend);
  border-color: var(--text);
  min-height: 64px;
  padding: var(--abstand-4) var(--abstand-5);
  font-size: var(--gr-mobil-knopf);
}

.mz-balkensatz {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
}

/* Die drei Querbalken unter der Uhr (Prinzip 10): „drei gleich breite
   Querbalken — Auftrag auswaehlen · Pause · Feierabend". Nach dem Muster aus
   `theme.css` 6b: weiss mit feiner Linie, **Marine-Text in der Lese-Schrift,
   Gewicht 600**, Radius 4, beim Druecken zwei Pixel tiefer. Der Feierabend
   traegt als Stempelknopf seine eigene Farbe und seine eigene Schrift (oben). */
.mz-balken {
  width: 100%;
  min-height: 64px;
  padding: var(--abstand-4) var(--abstand-5);
  background: var(--zeile);
  border: 1px solid var(--linie);
  /* Radius 4 wie jeder Querbalken und Zweitknopf (`theme.css` 6b) — der
     groessere Radius gehoert den Stempelknoepfen. */
  border-radius: var(--radius-chip);
  color: var(--text);
  /* **Sans, nicht Anzeigeschrift.** `theme.css` 6b sagt zu den Querbalken
     „Text Marine 600" — die Anzeigeschrift steht laut `gestaltung.md`
     Prinzip 3 auf dem Namen im Kopf, den Stempelknoepfen und den
     Bildschirmtiteln, und sonst nirgends. Sie hier zu nehmen war nicht nur
     regelwidrig, sondern auch unpraktisch: „Auftrag auswaehlen" in Michroma
     versal ist breiter als ein Handy (Handprobe 14d-3). */
  font-size: var(--gr-mobil-knopf);
  font-weight: 600;
  box-shadow: var(--druck-hell);
}
.mz-balken:active {
  /* Zwei Pixel, nicht drei: Die drei gehoeren den Stempelknoepfen (6b). */
  transform: translateY(2px);
  box-shadow: var(--gedrueckt-hell);
}

/* Der kleine Verweis — seit Baustein 14d-5 nur noch „Berichtigen" unter der
   Liste des Tages; „Wo war ich" gibt es nicht mehr. */
.mz-verweis {
  align-self: flex-end;
  padding: var(--abstand-2) 0;
  min-height: 44px;
  background: none;
  border: 0;
  color: var(--akzent);
  font-size: var(--gr-mobil-text);
  font-weight: 600;
}

.mz-senden {
  width: 100%;
  min-height: 60px;
  padding: var(--abstand-4);
  background: var(--knopf-primaer);
  border: 1px solid var(--knopf-primaer-rahmen);
  border-radius: var(--radius-knopf);
  color: var(--knopf-primaer-text);
  font-size: var(--gr-mobil-knopf);
  font-weight: 700;
  box-shadow: var(--taste-druck);
}
.mz-senden:active {
  transform: translateY(3px);
  box-shadow: var(--taste-gedrueckt);
}
.mz-senden[disabled] {
  opacity: var(--zustand-deaktiviert);
  cursor: default;
}
.mz-senden--unten {
  margin-top: auto;
}

/* Ohne JavaScript laeuft weder das Stempeln noch der Offline-Puffer. Der
   Satz dazu steht in der Seite; hier bekommt er seinen Rand. */
.mz-ohne-skript {
  padding: var(--abstand-5);
  font-size: var(--gr-mobil-text);
  color: var(--text-zweit);
}

/* --- Anmeldung -------------------------------------------------------- */

.mz-formular {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-4);
}
.mz-feld {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-1);
}
.mz-eingabe,
.mz-suche {
  width: 100%;
  min-height: 52px;
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--zeile);
  border: 1px solid var(--linie);
  border-radius: var(--radius-chip);
  color: var(--text);
  /* 16px oder mehr: Darunter zoomen manche Browser beim Antippen hinein. */
  font-size: var(--gr-mobil-knopf);
  font-family: var(--schrift-sans);
}
.mz-eingabe:focus,
.mz-suche:focus {
  border-color: var(--zustand-auswahl-rahmen);
  outline: none;
}

/* Das Auge sitzt **im** Feld, nicht daneben: Es gehoert zum Passwort und darf
   die Zeile nicht schmaler machen. Der Innenrand rechts haelt die Punkte vom
   Knopf weg. Beides ist Anordnung — keine Farbe, kein Mass aus der theme.css. */
.mz-feldzeile {
  position: relative;
  display: flex;
}
.mz-feldzeile .mz-eingabe {
  padding-right: 56px;
}
.mz-auge {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-height: 52px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-zweit);
}
/* Sichtbares Passwort: Der Knopf ist kraeftiger, damit niemand vergisst, dass
   es offen dasteht. */
.mz-auge[aria-pressed="true"] {
  color: var(--text);
}
.mz-auge svg {
  display: block;
}

/* --- Laufende Uhr und Pausenuhr --------------------------------------- */

.mz-lauf {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
}
.mz-uhr,
.mz-karte,
.mz-kasten {
  padding: var(--abstand-4) var(--abstand-5);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-knopf);
}
.mz-kasten {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  font-size: var(--gr-mobil-text);
  color: var(--text-zweit);
}

/* Am oberen Rand der Uhr-Karte stand bis zum zweiten Probebetrieb ein
   **Segmentband**. Es ist weg — in jedem Zustand der Karte (`gestaltung.md`,
   Prinzip 10): „die Karte beginnt mit der Zustandszeile". */
.mz-uhr-etikett {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  font-family: var(--schrift-mono);
  font-size: var(--gr-etikett);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--bestaetigung);
}
.mz-punkt {
  width: 8px;
  height: 8px;
  background: var(--bestaetigung);
  animation: mz-puls 2.4s ease-in-out infinite;
}
.mz-uhr-seit {
  margin-top: var(--abstand-2);
}

/* **Die Pausenuhr** (Scheibenplan 14d-3, Punkt 3). Dieselbe Uhr, anderer
   Gegenstand: Sie zaehlt die laufende Pause. Sie traegt darum **nicht**
   das Bestaetigungs-Gruen der Arbeitsuhr — gruen heisst „geschehen und
   lebendig", und was hier laeuft, ist die Pause. Sie steht in den
   Textstufen, ruhig. */
.mz-uhr--pause .mz-uhr-etikett,
.mz-uhr--pause .mz-uhr-zeit {
  color: var(--text-zweit);
}
.mz-uhr--pause .mz-punkt {
  background: var(--text-gedaempft);
}

@keyframes mz-puls {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* --- Nach dem Feierabend: Arbeitszeit · Pausenzeit --------------------- */

/* Die Zusammenfassung nach dem Feierabend: Arbeitszeit · Pausenzeit ·
   Flexkonto heute (Prinzip 10, dritter Probebetrieb). Die dritte Angabe ist
   klein gesetzt und steht ohne eigenen Kasten daneben. */
.mz-zusammenfassung {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--abstand-4);
  margin-top: var(--abstand-3);
}
.mz-kleinwert {
  margin-top: var(--abstand-1);
  font-family: var(--schrift-mono);
  font-size: var(--gr-mobil-text);
  color: var(--text);
}
.mz-wertpaar {
  display: flex;
  align-items: baseline;
  gap: var(--abstand-1);
  color: var(--text);
}

/* Die Flexkonto-Zeile im Menue: **eine Anzeige, kein Weg** (`08` v0.23).
   Der eigene gestrichelte Kasten nach dem Feierabend ist seit dem dritten
   Probebetrieb weg; dort steht „Flexkonto heute" in der Zusammenfassung. */
.mz-anzeigezeile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* --- Liste des Tages -------------------------------------------------- */

.mz-tag {
  display: flex;
  flex-direction: column;
  gap: var(--zeilen-fuge);
}

.mz-eintrag,
.mz-pufferzeile,
.mz-abgewiesen {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-1);
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--zeile);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius-chip);
}
.mz-pufferzeile {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--abstand-3);
  font-size: var(--gr-mobil-text);
  color: var(--text-zweit);
}
.mz-abgewiesen {
  gap: var(--abstand-2);
}
.mz-eintrag-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
}
.mz-eintrag-name {
  font-size: var(--gr-mobil-text);
  font-weight: 600;
  color: var(--text);
}

/* Die Nebenzeilen der Liste des Tages: dieselbe Form, ein anderer Inhalt.
   Die Zeile „ohne Auftrag" traegt einen eigenen Namen — sie ist keine Pause,
   und wer den Code liest, soll sie nicht fuer eine halten (Prueferbefund zu
   14d-4). Ihr Text steht als **ein** Satz links, nicht an beiden Raendern:
   „1:20 ohne Auftrag" (`gestaltung.md`). */
.mz-pausezeile,
.mz-offenzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius-chip);
  font-size: var(--gr-mobil-text);
  color: var(--text-gedaempft);
}

.mz-offenzeile {
  justify-content: flex-start;
}

/* Die Auftragsnummer ist ein Griff-Zeichen und traegt darum die
   Akzentfarbe (Prinzip 2: „Projektnummern-Chip"). */
.mz-nummer {
  padding: 2px var(--abstand-2);
  background: var(--akzent-flaeche);
  border: 1px solid var(--akzent-rahmen);
  border-radius: var(--radius-chip);
  color: var(--akzent);
  font-family: var(--schrift-mono);
  font-size: var(--gr-chip);
  letter-spacing: 0.6px;
  white-space: nowrap;
}
.mz-marke {
  font-size: var(--gr-chip);
}

.mz-leerkasten {
  padding: var(--abstand-4);
  border: 1px dashed var(--linie);
  border-radius: var(--radius-chip);
  font-size: var(--gr-mobil-text);
  color: var(--text-gedaempft);
}

.mz-zeile-tat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  width: 100%;
  min-height: 52px;
  padding: var(--abstand-3) var(--abstand-4);
  background: none;
  border: 1px dashed var(--linie);
  border-radius: var(--radius-chip);
  text-align: left;
}
.mz-pfeil {
  font-size: var(--gr-mobil-text);
  font-weight: 600;
  color: var(--akzent);
}

/* --- Hinweise und Warnungen ------------------------------------------- */

.mz-warnkasten,
.mz-ohne-netz,
.mz-hinweisbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--warnung-flaeche);
  border: 1px solid var(--warnung-rahmen);
  border-radius: var(--radius-chip);
  font-size: var(--gr-mobil-text);
  color: var(--warnung);
}
.mz-warnkasten--liste {
  flex-direction: column;
  align-items: stretch;
  gap: var(--abstand-2);
}
.mz-warnliste {
  margin: var(--abstand-1) 0 0 var(--abstand-4);
  font-size: var(--gr-mobil-hinweis);
}
.mz-nachgeschickt {
  color: var(--warnung);
}
.mz-ohne-netz {
  background: var(--flaeche);
  border-color: var(--linie);
  color: var(--text-zweit);
}

.mz-hinweisbox {
  position: fixed;
  left: var(--abstand-5);
  right: var(--abstand-5);
  bottom: var(--abstand-5);
  z-index: 5;
  max-width: 520px;
  margin: 0 auto;
  background: var(--flaeche);
  box-shadow: var(--schatten-vorschlag);
  animation: mz-ein var(--dauer-mittel) ease-out;
}

/* --- Die Quittung: das einzige Haekchen der App (Prinzip 6) -----------
   Es quittiert eine soeben gesendete Handlung — ein Ereignis — und steht
   nie dauerhaft an etwas. */

.mz-quittung {
  position: fixed;
  left: var(--abstand-5);
  right: var(--abstand-5);
  top: var(--abstand-5);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  max-width: 520px;
  margin: 0 auto;
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--flaeche);
  border: 1px solid var(--bestaetigung-rahmen);
  border-radius: var(--radius-chip);
  box-shadow: var(--schatten-vorschlag);
  animation: mz-ein var(--dauer-mittel) ease-out;
}
.mz-haken {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-rund);
  background: var(--bestaetigung-flaeche);
  color: var(--bestaetigung);
  font-size: var(--gr-mobil-knopf);
  font-weight: 700;
}
.mz-quittung-text {
  font-size: var(--gr-mobil-text);
  color: var(--text);
}

@keyframes mz-ein {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Das Menue -------------------------------------------------------- */

.mz-menue {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
}
/* Was im Menue **steht**, ist eine Anzeige (Flexkonto, Verpflegung); was
   im Menue **fuehrt**, ist ein Knopf. Der Unterschied ist sichtbar: Die
   Anzeige hat kein Druckgefuehl und keinen Pfeil. */
.mz-menuezeile,
.mz-menuewahl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  width: 100%;
  min-height: 56px;
  padding: var(--abstand-4);
  border-radius: var(--radius-chip);
  text-align: left;
  font-size: var(--gr-mobil-text);
  font-weight: 600;
  color: var(--text);
}
.mz-menuezeile {
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
}
.mz-menuewahl {
  background: var(--zeile);
  border: 1px solid var(--linie);
  box-shadow: var(--druck-hell);
}
.mz-menuewahl:active {
  transform: translateY(2px);
  box-shadow: var(--gedrueckt-hell);
}
.mz-menuewert {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: var(--abstand-1);
}

/* --- Meine Woche ------------------------------------------------------ */

.mz-wochenwahl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
}
.mz-wochenspanne {
  font-family: var(--schrift-mono);
  font-size: var(--gr-klein);
  color: var(--text-zweit);
}
.mz-wochenschritt {
  min-width: 56px;
  min-height: 44px;
  background: var(--zeile);
  border: 1px solid var(--linie);
  border-radius: var(--radius-chip);
  color: var(--text);
  font-size: var(--gr-mobil-text);
  font-weight: 600;
  box-shadow: var(--druck-hell);
}
.mz-wochenschritt:active {
  transform: translateY(2px);
  box-shadow: var(--gedrueckt-hell);
}
.mz-wochenschritt[disabled] {
  opacity: var(--zustand-deaktiviert);
  cursor: default;
}

.mz-wochenliste {
  display: flex;
  flex-direction: column;
  gap: var(--zeilen-fuge);
}
.mz-wochentag {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius-chip);
}
.mz-wochentag-name {
  flex: none;
  width: 34px;
  font-family: var(--schrift-mono);
  font-size: var(--gr-klein);
  letter-spacing: 0.6px;
  color: var(--text-zweit);
}
.mz-wochentag-inhalt {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-1);
  min-width: 0;
}
.mz-wochentag-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-3);
}
.mz-wochentag-stunden {
  font-family: var(--schrift-mono);
  font-size: var(--gr-klein);
  color: var(--text);
}
.mz-wochensumme {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-3);
  padding-top: var(--abstand-4);
  border-top: 1px solid var(--linie-fein);
}
.mz-wochensumme-wort {
  font-size: var(--gr-mobil-text);
  font-weight: 700;
  color: var(--text);
}

/* --- Werte mit Vorzeichen: Flexkonto im Menü und der Tagesbeitrag ------ */

.mz-fusswert {
  display: flex;
  align-items: baseline;
  gap: var(--abstand-1);
  color: var(--text);
}
/* Ein Minus auf dem Flexkonto traegt den Warnton — die dokumentierte
   Ausnahme aus `gestaltung.md`. Ein Plus traegt keine Farbe. */
.mz-fusswert--minus,
.mz-fusswert--minus .mz-grosswert,
.mz-fusswert--minus .mz-vorzeichen {
  color: var(--warnung);
}

/* --- Worauf geht die Zeit --------------------------------------------- */

.mz-treffer {
  display: flex;
  flex-direction: column;
  gap: var(--zeilen-fuge);
  flex: 1;
  overflow-y: auto;
}
.mz-auftrag,
.mz-pausewahl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-1);
  flex: none;
  width: 100%;
  min-height: 64px;
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--zeile);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius-chip);
  text-align: left;
  color: var(--text);
}
.mz-auftrag:active {
  background: var(--zustand-auswahl-flaeche);
  border-color: var(--zustand-auswahl-rahmen);
}
.mz-auftrag-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  width: 100%;
}
.mz-auftrag-name {
  font-size: var(--gr-mobil-text);
  font-weight: 600;
}
.mz-pausewahl {
  min-height: 52px;
  background: var(--flaeche);
  color: var(--text-gedaempft);
  font-size: var(--gr-mobil-text);
  font-weight: 600;
}

/* --- Die Arbeitsart bei der Auftragswahl ----------------------------- */

/* Der gewaehlte Auftrag bleibt markiert, solange die Zeile darunter steht. */
.mz-auftrag--gewaehlt {
  background: var(--zustand-auswahl-flaeche);
  border-color: var(--zustand-auswahl-rahmen);
}

/* Werkstatt · Baustelle · Baustelle mit Uebernachtung — drei gleich breite
   Felder nach dem Muster 6b (weiss, feine Linie, Marine-Text, mindestens
   44 px). Das gedrueckte Feld traegt die Auswahlfarbe. */
.mz-artzeile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--abstand-2);
  flex: none;
}
.mz-artfeld {
  min-height: 52px;
  padding: var(--abstand-2);
  background: var(--zeile);
  border: 1px solid var(--linie);
  border-radius: var(--radius-chip);
  color: var(--text);
  font-size: var(--gr-mobil-text);
  font-weight: 600;
  text-align: center;
}
/* Nur das Feld, das man druecken kann, hat Druckgefuehl — das stumme ohne
   bestaetigten Tag ist ein `div` und bekommt keins. */
button.mz-artfeld {
  box-shadow: var(--druck-hell);
}
.mz-artfeld:active {
  transform: translateY(2px);
  box-shadow: var(--gedrueckt-hell);
}
.mz-artfeld--an {
  background: var(--zustand-auswahl-flaeche);
  border-color: var(--zustand-auswahl-rahmen);
  font-weight: 700;
}
.mz-artfeld--aus {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-gedaempft);
}

/* --- Tag aufteilen ---------------------------------------------------- */

.mz-stuecke {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-1);
  flex: 1;
  overflow-y: auto;
}
.mz-stueck {
  display: flex;
  flex-direction: column;
  flex: none;
}
.mz-stueckkarte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--zeile);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius-chip);
}
.mz-stueck-ab,
.mz-stueck-bis-wert {
  display: flex;
  align-items: baseline;
  gap: var(--abstand-2);
  font-family: var(--schrift-mono);
  font-size: var(--gr-klein);
  color: var(--text-gedaempft);
}
.mz-stueck-ziel {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  width: 100%;
  min-height: 48px;
  padding: var(--abstand-2) var(--abstand-3);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-chip);
  color: var(--text);
  text-align: left;
}
.mz-stueck-name {
  font-size: var(--gr-mobil-text);
  font-weight: 600;
}
.mz-stueck-bis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-2);
}
.mz-viertel {
  display: flex;
  gap: var(--abstand-2);
}
.mz-viertel button,
.mz-zeitknoepfe button {
  min-width: 56px;
  min-height: 44px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-chip);
  color: var(--text);
  font-family: var(--schrift-mono);
  font-size: var(--gr-zweittext);
  box-shadow: var(--druck-hell);
}
.mz-viertel button:active,
.mz-zeitknoepfe button:active {
  transform: translateY(2px);
  box-shadow: var(--gedrueckt-hell);
}
.mz-verbinder {
  width: 2px;
  height: var(--abstand-4);
  margin-left: var(--abstand-6);
  background: var(--linie);
}
.mz-hinzu,
.mz-vorschlag {
  flex: none;
  min-height: 52px;
  margin-top: var(--abstand-3);
  padding: var(--abstand-3);
  background: none;
  border: 1px dashed var(--linie);
  border-radius: var(--radius-chip);
  color: var(--text-zweit);
  font-size: var(--gr-mobil-text);
  font-weight: 600;
}
.mz-vorschlag {
  margin-top: 0;
  border-color: var(--akzent-rahmen);
  color: var(--akzent);
}
/* „Kein Knopf ohne Druckgefuehl" (Prinzip 10). Die gestrichelte Flaeche hatte
   keines — auf dem Bildschirm „Standardpausen" ist sie die Haupthandlung. */
.mz-hinzu:active,
.mz-vorschlag:active {
  transform: translateY(2px);
}

/* --- Standardpausen --------------------------------------------------- */

/* Eine Zeile je Fenster: von — bis — weg. Die beiden Felder teilen sich den
   Platz, der Knopf nimmt, was er braucht. Alles hier ist Anordnung. */
.mz-fensterliste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
}
.mz-fensterzeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
}
.mz-fensterzeit {
  flex: 1;
  min-width: 0;
}
.mz-bis {
  flex: none;
  font-size: var(--gr-mobil-text);
  color: var(--text-zweit);
}

/* --- Wartet auf Bestaetigung (Baustein 14f) ---------------------------
   Je Vorschlag eine Karte wie ein Tag in „Meine Woche": wer und welcher
   Tag oben, darunter Stempelart, Zeit und seit wann, ganz unten das
   Zeitfeld und der Knopf nebeneinander. Das Feld nimmt den Platz, der
   Knopf, was er braucht. Alles hier ist Anordnung. */
.mz-vorschlagsliste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
}
.mz-vorschlag {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-1);
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius-chip);
}
.mz-vorschlag-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-3);
}
.mz-vorschlag-wer {
  font-size: var(--gr-mobil-text);
  font-weight: 600;
  color: var(--text);
}
.mz-vorschlag-tag {
  font-family: var(--schrift-mono);
  font-size: var(--gr-klein);
  color: var(--text-zweit);
}
.mz-vorschlag-tat {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  margin-top: var(--abstand-2);
}
.mz-bestaetigungszeit {
  flex: 1;
  min-width: 0;
}
/* Der Knopf „Bestaetigen" ist die bestaetigende Handlung aus `theme.css`
   6b — gefuellt wie „Uebernehmen", nur neben dem Feld statt darunter. */
.mz-senden--zeile {
  flex: none;
  width: auto;
  min-height: 52px;
  padding: var(--abstand-3) var(--abstand-4);
  font-size: var(--gr-mobil-text);
}
/* Die Zahl der wartenden Vorschlaege im Menue: eine Zahl, darum Mono. */
.mz-menuezahl {
  font-family: var(--schrift-mono);
  font-size: var(--gr-mobil-text);
  color: var(--text);
}

/* --- Uhrzeit waehlen -------------------------------------------------- */

.mz-zeitwahl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-5);
  padding: var(--abstand-5) var(--abstand-4);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-knopf);
}
.mz-zeitknoepfe {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--abstand-2);
  width: 100%;
}

/* --- Der Streifen „TESTANLAGE" (Ausrollen, Stufe 1) -------------------
   Steht nur auf der Testanlage, im Kopf jeder Seite, und bleibt beim
   Scrollen oben: Wer erfundene Daten sieht, soll es nie vergessen. Im
   Betrieb setzt der Server ihn gar nicht erst ein (quelle/server/zustand.ts).
   Bernstein ist die Farbe der Pruef-Hinweise — ein Hinweis, kein Alarm —, im
   selben Muster wie die uebrigen: Hauch und Kante in Bernstein, die Schrift
   dunkel. Der Hauch liegt auf undurchsichtigem Papier, damit beim Scrollen
   nichts durchscheint. */

.anlage-teststreifen {
  position: sticky;
  top: 0;
  z-index: 6;
  padding: var(--abstand-1) var(--abstand-4);
  background: linear-gradient(var(--warnung-flaeche), var(--warnung-flaeche)), var(--flaeche);
  border-bottom: 2px solid var(--warnung);
  color: var(--text);
  font-family: var(--schrift-sans-mobil);
  font-size: var(--gr-klein);
  font-weight: 700;
  text-align: center;
}