/* Maschinen-App — Gestaltung
 *
 * Vorgabe: Josefs Mockup vom 11.09.2026 (T-J11). Mobile first,
 * Bedienung am Handy mit dem Daumen, notfalls mit Arbeitshandschuh.
 * Kein Framework, kein Build-Schritt: eine Datei, die zwei Entwickler
 * lesen koennen.
 *
 * Aufbau der Datei:
 *   1. Kennwerte        6. Karten und Kacheln
 *   2. Grundgeruest     7. Formulare und Knoepfe
 *   3. Kopfzeile        8. Listen und Daten
 *   4. Tab-Leiste       9. Kalender, Tabellen, Fotos
 *   5. Inhalt          10. Rechtstexte und Fuss
 *
 * Bedienelemente bekommen mindestens 48 Pixel Hoehe (`--ziel`).
 * Eine dunkle Darstellung gibt es nicht — Entscheidung Josef,
 * 11.09.2026: die App ist immer hell.
 */

/* 1. Kennwerte ------------------------------------------------------ */

:root {
  --akzent: #0e3283;          /* Vorgabe Josef, 11.09.2026 */
  --akzent-hell: #dbe6fa;     /* Grund der Sekundaerkarte */
  --grund: #e8eef9;           /* sehr helles Blau, Seitenhintergrund */
  --flaeche: #ffffff;         /* Karten */
  --flaeche-leise: #f2f5fb;   /* Kacheln, gedrueckter Zustand */
  --linie: #d0d9ea;           /* trennt Flaechen — schmueckend */
  --linie-feld: #7d869c;      /* Rand von Eingabefeldern, 3:1 auf Weiss */
  --text: #1d2433;
  --gedaempft: #55607a;
  --warnung: #9a3412;
  --warnung-gelb: #8a5a00;    /* Vorwarnung im Wartungsplan (SPEC 3.13) */
  --warnung-gelb-grund: #fdf4e0;   /* Grund der Zeile "offener Einsatz" */
  --erfolg: #166534;

  --abstand: 1rem;
  --kartenluft: 8px;          /* Abstand zwischen Karten (T-J17) */
  --abschnittsluft: 16px;     /* Abstand vor einer Abschnittsueberschrift */
  --radius: 12px;
  --radius-klein: 8px;
  --ziel: 48px;               /* Mindesthoehe jedes Bedienelements */
  --leiste: 60px;             /* Hoehe der unteren Tab-Leiste */
}

* { box-sizing: border-box; }

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

/* 2. Grundgeruest --------------------------------------------------- */

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--grund);
  color: var(--text);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Platz fuer die feste Tab-Leiste, damit sie nichts verdeckt.
   `safe-area-inset-bottom` faengt den Hausbalken neuerer iPhones ab. */
body.mit-tableiste {
  padding-bottom: calc(var(--leiste) + env(safe-area-inset-bottom, 0px));
}

/* Scrollt der Browser etwas von selbst heran — beim Sprung mit der
   Tabulatortaste, bei einem Anker, bei `scrollIntoView` —, dann setzt
   er es knapp an die Unterkante. Genau dort liegt die Tab-Leiste, und
   das Element waere zwar erreichbar, aber verdeckt. `scroll-margin`
   haelt den Abstand frei. Gefunden mit `werkzeuge/klickpfade.py`. */
body.mit-tableiste :is(a, button, summary, input, select, textarea) {
  scroll-margin-bottom: calc(var(--leiste) + 0.75rem);
}

/* Der Symbolvorrat steht in jeder Seite, zeigt aber nichts an. Das
   Verstecken muss hier stehen und nicht als `style`-Attribut in der
   SVG-Datei: ein Inline-Stil verstoesst gegen `style-src 'self'` und
   wird abgewiesen — dann stuende der Vorrat sichtbar auf der Seite. */
.symbolvorrat { display: none; }

/* Das Symbol nimmt die Schriftfarbe seiner Umgebung an. Deshalb
   braucht kein Knopf und kein Tab eine eigene Symbolfarbe. */
.sym {
  width: 1.5em;
  height: 1.5em;
  flex: none;
  fill: currentColor;
}

/* 3. Kopfzeile ------------------------------------------------------ */

.kopf {
  background: var(--akzent);
  color: #fff;
  padding: 0 var(--abstand);
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kopfmarke {
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 0.6rem 0;
}

/* Kontomenue -------------------------------------------------------
   Ein <details> statt eines Skripts: aufklappen kann der Browser
   selbst, die Bedienung ueber Tastatur kommt gratis, und die
   Content-Security-Policy bleibt unberuehrt. */

.kontomenue {
  margin-left: auto;
  position: relative;
}

.kontomenue > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--ziel);
  padding: 0 0.2rem;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  list-style: none;           /* Standard-Dreieck weg */
}

.kontomenue > summary::-webkit-details-marker { display: none; }

.kontomenue > summary .sym:first-child { width: 1.9em; height: 1.9em; }
.kontomenue > summary .sym:last-child  { width: 1.1em; height: 1.1em; }

.kontomenue[open] > summary .sym:last-child { transform: rotate(180deg); }

.kontomenue nav {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  min-width: 14rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  box-shadow: 0 8px 24px rgb(29 36 51 / 18%);
  padding: 0.25rem;
}

.kontomenue nav a,
.kontomenue nav button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--ziel);
  padding: 0 0.75rem;
  margin: 0;
  border: none;
  border-radius: var(--radius-klein);
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.kontomenue nav a:hover,
.kontomenue nav button:hover { background: var(--flaeche-leise); }

.kontomenue nav form { margin: 0; }

/* 4. Tab-Leiste ----------------------------------------------------- */

.tableiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tableiste > div {
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
}

.tab {
  flex: 1;
  min-height: var(--leiste);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.3rem 0.2rem;
  color: var(--gedaempft);
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
}

.tab .sym { width: 1.55em; height: 1.55em; }

.tab-aktiv {
  color: var(--akzent);
  font-weight: 700;
}

/* Der Strich unter dem aktiven Tab wie im Mockup. */
.tab-aktiv .tabtext {
  border-bottom: 2px solid var(--akzent);
  padding-bottom: 1px;
}

/* 5. Inhalt --------------------------------------------------------- */

.inhalt {
  flex: 1;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--abstand);
}

h1 {
  font-size: 1.45rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 var(--abstand);
}

h2 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; }
h3 { font-size: 1.02rem; margin: 1.5rem 0 0.4rem; }

p { margin: 0 0 0.9rem; }

a { color: var(--akzent); }

.hinweis { color: var(--gedaempft); }

/* Abschnittsueberschrift: Kapitaelchen, dahinter eine Linie bis zum
   Rand — wie im Mockup ueber "WEITERE FUNKTIONEN". */
.abschnitt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: var(--abschnittsluft) 0 var(--kartenluft);
  color: var(--gedaempft);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.abschnitt::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie);
}

/* Hinweise (Flash-Meldungen) ---------------------------------------- */

.hinweise {
  list-style: none;
  margin: 0 0 var(--abstand);
  padding: 0;
}

.hinweise li {
  border: 1px solid var(--linie);
  border-left-width: 4px;
  border-radius: var(--radius-klein);
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
  background: var(--flaeche);
}

.hinweis-fehler  { border-left-color: var(--warnung); }
.hinweis-erfolg  { border-left-color: var(--erfolg); }
.hinweis-info    { border-left-color: var(--gedaempft); }

/* 6. Karten und Kacheln --------------------------------------------- */

/* Maschinenkarte: Foto links, rechts Name und Standort. Die ganze
   Karte ist der Verweis auf die Standort-Seite (T-J11). */

.maschinenkarte {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: var(--kartenluft);
  color: inherit;
  text-decoration: none;
}

.maschinenkarte:hover,
.maschinenkarte:focus-visible { border-color: var(--akzent); }

.maschinenbild {
  flex: none;
  width: 37%;
  max-width: 160px;
  /* `height: auto` ist Pflicht: das `height`-Attribut am <img> traegt
     die Pixelhoehe des Originals und wuerde sonst die `aspect-ratio`
     schlagen — die Karte waere so hoch wie das Foto breit ist. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-klein);
  background: var(--flaeche-leise);
}

.maschinenbild-leer {
  border: 1px dashed var(--linie);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--linie);
}

.maschinenbild-leer .sym { width: 2.5em; height: 2.5em; }

.maschinentext { min-width: 0; align-self: center; }

.maschinenname {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* T-J17: die Beschreibung steht in der Karte, klein und grau, und
   nimmt hoechstens zwei Zeilen. Vorher war sie ein eigener Absatz
   darunter und kostete rund 44 px. */
.maschinenbeschreibung {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--gedaempft);
  margin: 2px 0 4px;
}

.standortzeile {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
}

.standortzeile .sym { color: var(--akzent); margin-top: 0.1rem; }

.standortwert { display: block; font-weight: 700; }

/* Kleiner als sonst: bei 390 px bleibt "Seit 11.09.2026, 20:59 Uhr"
   damit in einer Zeile, neben dem Foto. Es ist die dritte Zeile der
   Karte — sie darf leiser sein als Name und Standort. */
.maschinenkarte .nebensache { font-size: 0.8rem; }

/* Karte: vollbreite Schaltflaeche mit Symbol, Titel, Untertitel und
   Pfeil. Drei Auspraegungen — weiss, hellblau, dunkelblau gefuellt. */

/* T-J17, Befund Josef 13.09.2026: Die Startseite soll bei 390x844 so
   dicht sein wie das Mockup. Karte 64 px hoch, 12 px Innenabstand,
   8 px Luft dazwischen — der Untertitel bleibt einzeilig. 64 px liegt
   ueber dem Mindestziel von 48 px. */
.karte {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 64px;
  padding: 12px var(--abstand);
  margin-bottom: var(--kartenluft);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}

.karte:hover,
.karte:focus-visible { border-color: var(--akzent); }

.karte:active { background: var(--flaeche-leise); }

.karte > .sym:first-child { width: 1.75em; height: 1.75em; color: var(--akzent); }

.kartentext { flex: 1; min-width: 0; }

.kartentitel {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--akzent);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Einzeilig, koste es was es wolle: ein umbrechender Untertitel macht
   aus 64 px wieder 88 und schiebt die Administration unter die Falz. */
.kartenunter {
  display: block;
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--gedaempft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kartenpfeil { flex: none; color: var(--akzent); }

/* T-J13: der offene Einsatz als eigene Zeile unter der Maschinenkarte,
   gelb hinterlegt wie eine Vorwarnung. Ein Tipp fuehrt zum Eintrag,
   wo der Endstand fehlt. Einzeilig gedacht, darf aber umbrechen —
   ein langer Name ist wichtiger als eine gerade Kante. */
.karte-offen {
  min-height: 48px;
  background: var(--warnung-gelb-grund);
  border-color: var(--warnung-gelb);
  color: var(--warnung-gelb);
}

.karte-offen > .sym:first-child,
.karte-offen .kartenpfeil { color: var(--warnung-gelb); }

.kartenzeile {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Sekundaer: hellblauer Grund, kein Rahmen. */
.karte-zweit {
  background: var(--akzent-hell);
  border-color: var(--akzent-hell);
}

.karte-zweit:active { background: #cddcf7; }

/* Primaer: dunkelblau gefuellt, weisse Schrift. Die Hauptaktion. */
.karte-primaer {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}

.karte-primaer > .sym:first-child,
.karte-primaer .kartentitel,
.karte-primaer .kartenpfeil { color: #fff; }

.karte-primaer .kartenunter { color: #dbe6fa; }

.karte-primaer:active { background: #0a2461; }

/* Kacheln der Administration: zwei Reihen a zwei. Eine scrollbare
   Reihe waere die Alternative — dann saehe bei 390 px niemand die
   vierte Kachel, der nicht ahnt, dass dort gewischt werden kann. */

.kacheln {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kartenluft);
  margin-bottom: var(--abstand);
}

.kachel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.5rem 0.7rem;
  background: var(--flaeche-leise);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  color: var(--text);
  font-size: 0.96rem;
  font-weight: 600;
  text-decoration: none;
}

.kachel .sym { width: 1.4em; height: 1.4em; color: var(--akzent); }

.kachel:hover,
.kachel:focus-visible { border-color: var(--akzent); }

.kachel:active { background: var(--linie); }

/* 7. Formulare und Knoepfe ------------------------------------------ */

.formular {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--abstand);
  margin-bottom: var(--abstand);
}

.formular label,
.formular legend {
  display: block;
  font-weight: 600;
  margin: 0.9rem 0 0.3rem;
}

.formular label:first-child { margin-top: 0; }

/* Der Rand der Eingabefelder ist kraeftiger als der einer Karte:
   ein leeres Feld muss auffindbar sein, sonst tippt niemand hinein
   (WCAG 1.4.11, mindestens 3:1). Ein Kartenrand schmueckt nur —
   dort traegt die Flaeche selbst die Unterscheidung. */
.formular input[type="text"],
.formular input[type="email"],
.formular input[type="password"],
.formular input[type="number"],
.formular input[type="date"],
.formular input[type="file"],
.formular textarea,
.formular select,
select {
  width: 100%;
  min-height: var(--ziel);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--linie-feld);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
}

.formular textarea { min-height: 5rem; resize: vertical; }

.formular input:focus,
.formular textarea:focus,
.formular select:focus,
a:focus-visible,
summary:focus-visible,
button:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

.formular fieldset {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  margin: 1rem 0 0;
  padding: 0.4rem 0.8rem 0.8rem;
}

.wahl {
  font-weight: 400 !important;
  display: flex !important;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: var(--ziel);
  padding: 0.35rem 0;
}

.wahl input { margin-top: 0.35rem; flex: none; }

.feldhinweis {
  color: var(--gedaempft);
  font-size: 0.9rem;
  margin: 0.3rem 0 0;
}

button,
.knopf {
  display: inline-block;
  min-height: var(--ziel);
  margin-top: var(--abstand);
  padding: 0.75rem 1.2rem;
  border: 1px solid var(--akzent);
  border-radius: var(--radius-klein);
  background: var(--akzent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.knopf-leise,
button.knopf-leise {
  background: var(--flaeche);
  color: var(--akzent);
  border-color: var(--linie-feld);
}

button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Ein Knopf, der wie ein Verweis aussieht — fuer Aktionen, die per
   POST laufen muessen, aber im Text stehen. */
button.verweis {
  background: none;
  border: none;
  color: var(--akzent);
  font-weight: 400;
  text-decoration: underline;
  padding: 0.5rem 0.2rem;
  margin: 0;
  min-height: var(--ziel);
}

/* Vollbreite Hauptaktion auf Formularseiten (T-J03, T-J04). */
.knopf-voll {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--ziel);
  margin: 0 0 0.6rem;
  padding: 0.85rem 1.1rem;
  text-align: center;
}

/* Unterfeld einer Auswahl (T-J01) ------------------------------------
   Die Einheit gehoert unter "Menge" und nur dorthin. Reines CSS ueber
   den Geschwister-Selektor — kein Inline-Script, die
   Content-Security-Policy bleibt unveraendert. Der Preis: das Feld ist
   versteckt, nicht abgeschaltet. Das ist unkritisch, weil der Server
   die Einheit bei `Zaehlerstand` ohnehin selbst setzt und ein
   mitgesendeter Wert dort verworfen wird. */

.erfassungsart {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 0.6rem;
}

.erfassungsart > legend,
.erfassungsart > .feldhinweis,
.erfassungsart > .unterfeld { grid-column: 1 / -1; }

.erfassungsart > input[type="radio"] {
  margin: 1rem 0 0;
  justify-self: center;
}

.erfassungsart > label.wahl {
  display: block !important;
  min-height: 0;
  padding: 0.7rem 0;
}

.unterfeld {
  display: none;
  margin: 0.2rem 0 0.4rem 0.6rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--linie);
}

#art-quantity:checked ~ .unterfeld { display: block; }

/* Gilt, wenn die Erfassungsart gesperrt ist: dann gibt es keine
   Auswahlknoepfe, an denen der Selektor greifen koennte. */
.unterfeld-fest { display: block; }

.unterfeld label { display: block; font-weight: 600; margin: 0 0 0.25rem; }

/* T-J16: Pfeil — Monat — Pfeil in einer Zeile. Die Pfeile sind
   vollwertige Tap-Flaechen (48 px), der Monat steht mittig. */
.monatswahl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.monatswahl strong {
  flex: 1;
  text-align: center;
  font-size: 1.05rem;
}

.monatspfeil {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--linie-feld);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  color: var(--akzent);
  font-size: 1.6rem;
  line-height: 1;
  text-decoration: none;
}

.buchbar-bis { font-size: 0.85rem; margin-bottom: var(--kartenluft); }

.formular-schmal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: end;
  margin: 0.4rem 0;
}

.formular-schmal label { font-size: 0.85rem; color: var(--gedaempft); }
.formular-schmal input[type="date"] { width: auto; }

/* 8. Listen und Daten ----------------------------------------------- */

.liste { list-style: none; padding: 0; margin: 0 0 var(--abstand); }

.liste li {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.8rem var(--abstand);
  margin-bottom: 0.5rem;
  min-height: var(--ziel);
}

.liste li.hervor { border-left: 4px solid var(--akzent); }

.liste a { font-weight: 600; font-size: 1.05rem; }

.nebensache {
  display: block;
  color: var(--gedaempft);
  font-size: 0.9rem;
  margin-top: 0.15rem;
}

/* Eine Tabellenbeschriftung traegt oft `class="nebensache"`, und deren
   `display: block` nimmt dem <caption> seine Rolle in der Tabelle: es
   schrumpft auf die Breite der ersten Spalte und bricht nach jedem Wort
   um. Die Rolle muss deshalb zurueckgesetzt werden — an einer Stelle,
   nicht je Tabelle. Gefunden im Kalender und in der Auswertung. */
caption.nebensache { display: table-caption; }

/* Kleines Merkzeichen in Listen ("offener Einsatz", "Luecke"). */
.marke {
  font-size: 0.85rem;
  color: var(--warnung);
  white-space: nowrap;
}

.reihe { margin: 0.35rem 0 0; }

.daten {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--abstand);
  margin: 0 0 var(--abstand);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
}

.daten dt { font-weight: 600; }
.daten dd { margin: 0; }

/* Antippbare Listeneintraege (T-J09) ---------------------------------
   In einer Liste ist der **ganze Kasten** die Tap-Flaeche, nicht nur
   das Wort darin. Umgesetzt mit einem gestreckten Verweis: der Kasten
   bekommt `position: relative`, und der Hauptverweis legt ueber ein
   Pseudo-Element die ganze Flaeche. Das bleibt gueltiges HTML —
   anders als ein <a>, das Formulare und Knoepfe umschliesst.

   Was im Kasten sonst noch anklickbar ist, wird mit `z-index`
   darueber gehoben und bleibt erreichbar. */

.liste li.antippbar { position: relative; }

.liste li.antippbar a.haupt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.liste li.antippbar:hover,
.liste li.antippbar:focus-within { border-color: var(--akzent); }

.liste li.antippbar:active { background: var(--flaeche-leise); }

.liste li.antippbar :is(form, button, a:not(.haupt)) {
  position: relative;
  z-index: 1;
}

/* Kleines Foto in der Maschinenliste (T-J06). */
.liste li.mit-foto {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.listenfoto {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-klein);
  border: 1px solid var(--linie);
}

.listenfoto-leer {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-klein);
  border: 1px dashed var(--linie);
}

.liste li.mit-foto .spalte { min-width: 0; }

/* Kaesten fuer Status und Hinweise ---------------------------------- */

.kasten {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left-width: 4px;
  border-left-color: var(--linie);
  border-radius: var(--radius);
  padding: 0.8rem var(--abstand);
  margin: 0 0 var(--abstand);
}

.kasten-gross { font-size: 1.12rem; }
.kasten-warnung { border-left-color: var(--warnung); }

.kasten .reihe { margin-top: 0.6rem; }
.kasten label { display: block; font-weight: 600; margin: 0.5rem 0 0.25rem; }

.kasten input[type="text"] {
  width: 100%;
  min-height: var(--ziel);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--linie-feld);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
}

/* Wartungsplan (SPEC 3.13) ------------------------------------------
   Drei Stufen, drei Farben — aber nie **nur** die Farbe: in jeder
   Zeile steht auch der Satz („fällig in 3,5 Std", „überfällig seit
   12 Std"). Wer Rot und Gelb nicht unterscheiden kann, liest ihn. */

/* `.liste li` setzt `border` als Kurzform und haette hier gewonnen —
   deshalb die Listenzeile mit im Selektor. Der Balken ist der
   eigentliche Unterschied zwischen den Stufen: Die beiden Textfarben
   muessen beide 4,5:1 auf Weiss erreichen und liegen dadurch zwangs-
   laeufig nahe beieinander. */
.liste li.wartung-vorwarnung   { border-left: 5px solid var(--warnung-gelb); }
.liste li.wartung-faellig,
.liste li.wartung-ueberfaellig { border-left: 5px solid var(--warnung); }
.wartung-aus                   { opacity: 0.65; }

.wartungstext {
  display: block;
  font-weight: 600;
  margin-top: 0.15rem;
}

/* Gleichartige Aktionen nebeneinander, damit sie auch gleich aussehen.
   Sie umbrechen, wenn die Breite nicht reicht. */
.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.aktionen form { margin: 0; }
.aktionen :is(.knopf, button) { margin-top: 0; }

.wartung-vorwarnung  > .wartungstext { color: var(--warnung-gelb); }
.wartung-faellig     > .wartungstext,
.wartung-ueberfaellig > .wartungstext { color: var(--warnung); }

/* Der Kasten auf der Maschinen-Startseite: eine Karte, in der jede
   Aufgabe ihre eigene Farbe traegt. */
.karte-wartung { align-items: flex-start; }
.karte-wartung > .sym:first-child { margin-top: 0.15rem; }

.wartungszeile {
  display: block;
  font-size: 0.94rem;
  margin-top: 0.2rem;
  padding-left: 0.5rem;
  border-left: 3px solid transparent;
}

.wartungszeile.wartung-vorwarnung {
  border-left-color: var(--warnung-gelb);
  color: var(--warnung-gelb);
}

.wartungszeile.wartung-faellig,
.wartungszeile.wartung-ueberfaellig {
  border-left-color: var(--warnung);
  color: var(--warnung);
}

/* Aenderungen eines Eintrags (SPEC 3.7) ------------------------------
   Steht auf der Detailseite eines Nutzungs- oder Service-Eintrags und
   zeigt dem Verursacher, was an seinem Eintrag geaendert wurde. */

.aenderungen { list-style: none; padding: 0; margin: 0 0 var(--abstand); }

.aenderungen li {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.4rem;
  font-size: 0.94rem;
}

/* 9. Kalender, Tabellen, Fotos -------------------------------------- */

.kalender {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--abstand);
  table-layout: fixed;
  background: var(--flaeche);
}

.kalender caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 0.4rem;
  color: var(--gedaempft);
  font-size: 0.9rem;
}

.kalender th {
  padding: 0.4rem 0.2rem;
  font-size: 0.78rem;
  text-align: left;
  color: var(--gedaempft);
  border-bottom: 1px solid var(--linie);
}

/* Jede Zelle mindestens so hoch wie ein Fingerziel — der Kalender
   wird auf dem Telefon gelesen, nicht am Schreibtisch. Seit T-J14 ist
   die ganze Zelle antippbar: der Verweis fuellt sie aus, damit nicht
   nur die Ziffer trifft. */
.tag {
  vertical-align: top;
  height: 44px;
  padding: 0;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  font-size: 0.75rem;
  line-height: 1.2;
}

.tag > a {
  display: block;
  height: 100%;
  min-height: 44px;
  padding: 3px 4px;
  color: inherit;
  text-decoration: none;
}

.tag > a:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }

.tag-leer { background: transparent; border-color: transparent; }

.tagnummer { display: block; font-weight: 600; font-size: 0.9rem; }

/* T-J15: In der Zelle steht der Vorname. Er darf nicht umbrechen und
   nicht ueber die Zelle laufen — vorher wurde aus „gebucht" ein
   zweizeiliges „gebuch/t". Gekuerzt wird schon serverseitig auf sechs
   Zeichen; das hier faengt den Rest ab. */
.tagtext {
  display: block;
  color: var(--gedaempft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag-eigen .tagtext { color: var(--akzent); font-weight: 600; }

/* Nicht allein die Farbe traegt die Aussage: in jeder Zelle steht
   auch das Wort, und der vollstaendige Text haengt im title. */
.tag-gebucht  { background: var(--akzent-hell); }
.tag-gesperrt { background: #f7e7e1; }
.tag-gesperrt .tagtext { color: var(--warnung); }
.tag-eigen    { border-left: 4px solid var(--akzent); }
.tag-leer > a { display: none; }
.tag-heute    { outline: 2px solid var(--akzent); outline-offset: -2px; }

/* Der Rahmen scrollt, nicht die Seite: eine Protokolltabelle mit sechs
   Spalten passt auf kein Telefon. */
.tabellenrahmen {
  overflow-x: auto;
  margin-bottom: var(--abstand);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

/* Die Beschriftung unter die Tabelle und am linken Rand festgehalten:
   Eine breite Tabelle scrollt waagrecht, und ohne `sticky` wandert der
   Text mit hinaus. So bleibt er lesbar, egal wie weit gescrollt ist. */
.tabelle caption {
  caption-side: bottom;
  position: sticky;
  left: 0;
  width: min-content;
  min-width: 100%;
  padding-top: 0.5rem;
  text-align: left;
  color: var(--gedaempft);
  font-size: 0.85rem;
}

.tabelle th,
.tabelle td {
  padding: 0.5rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}

.tabelle th {
  position: sticky;
  top: 0;
  background: var(--flaeche);
  color: var(--gedaempft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tabelle tbody tr:last-child td { border-bottom: none; }
.tabelle td.zahl,
.tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

.maschinenfoto {
  display: block;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius);
  margin-bottom: var(--abstand);
}

.bilder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: var(--abstand);
}

.bilder figure { margin: 0; max-width: 15rem; }

.bilder img {
  display: block;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius-klein);
}

.bilder figcaption { margin-top: 0.3rem; }

/* 10. Rechtstexte und Fuss ------------------------------------------ */

.rechtstext {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--abstand);
}

.rechtstext ul { padding-left: 1.25rem; }
.rechtstext li { margin-bottom: 0.4rem; }

/* Breite Tabellen duerfen scrollen, die Seite nicht. */
.rechtstext table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.rechtstext th,
.rechtstext td {
  border: 1px solid var(--linie);
  padding: 0.4rem 0.55rem;
  text-align: left;
  vertical-align: top;
}

.rechtstext th { background: var(--flaeche-leise); }

.rechtstext code {
  background: var(--flaeche-leise);
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  font-size: 0.9em;
}

.fuss {
  border-top: 1px solid var(--linie);
  padding: var(--abstand);
  text-align: center;
  font-size: 0.92rem;
  color: var(--gedaempft);
}

.fuss a {
  color: var(--gedaempft);
  display: inline-block;
  padding: 0.5rem 0.35rem;      /* grosszuegige Trefferflaeche */
  min-height: var(--ziel);
  line-height: calc(var(--ziel) - 1rem);
}