/* ===========================================================================
   Übersicht: was offen ist, wer dran ist — und das Blatt zum Ausdrucken.
   =========================================================================== */

/* ---------------------------------------------------- Startseite eines Hauses
   Zwei Wege, zwei große Flächen. Keine Kachelwand, keine Symbole zum Deuten:
   wer hierher kommt, will entweder erfassen oder abarbeiten. */
.haus-start { display: grid; gap: var(--s3); }

.grossweg {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  min-height: 84px;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.grossweg:active { background: var(--surface-2); }
.grossweg-i {
  flex: none;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--brand-weich);
  color: var(--brand-tief);
}
.grossweg-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.grossweg-t b { font-size: 1.08rem; font-weight: 750; letter-spacing: -.015em; }
.grossweg-t span { font-size: .88rem; color: var(--ink-2); }
.grossweg-n {
  flex: none;
  min-width: 34px; padding: 4px 10px;
  border-radius: 999px;
  background: var(--warn); color: #201803;
  font-size: .9rem; font-weight: 800;
  text-align: center;
  /* Der Druck zählt für den ganzen Knopf: Verschwindet die Zahl beim Nachziehen
     unter dem Zeiger, ginge der Mausklick sonst verloren. */
  pointer-events: none;
}
.grossweg > svg:last-child { flex: none; opacity: .4; }

/* „Alle Abteilungen drucken" in der Maßnahmen-Liste: derselbe große Knopf
   wie auf der Startseite eines Hauses, damit er als Weg erkennbar ist. */
.druck-alle { margin-bottom: var(--s4); }

/* Zähler an der Hotelzeile im Dashboard. */
.pill-offen { background: var(--warn); color: #201803; font-weight: 700; pointer-events: none; }

/* ------------------------------------------------------------------- Filter
   Drei große Knöpfe statt einer Auswahlliste: Man sieht alle Möglichkeiten
   auf einmal und trifft sie mit dem Daumen. */
.filter {
  display: flex; gap: 6px;
  margin-bottom: var(--s4);
}
.fil {
  flex: 1 1 0;
  min-height: 46px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit; font-size: .9rem; font-weight: 650;
  cursor: pointer;
}
.fil.an { border-color: var(--brand); background: var(--brand-weich); color: var(--brand-tief); }

/* ------------------------------------------------------------- Abteilungskopf */
.grp-abt {
  display: flex; align-items: center; gap: var(--s2);
  margin: var(--s5) 0 var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}
.grp-abt .grp-t {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2);
}
.grp-abt .grp-n {
  padding: 1px 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2);
  font-size: .78rem; font-weight: 700;
}
/* Sofort steht oben und sieht auch so aus. Wer scrollen muss, um eine
   Gefahr zu finden, findet sie im Zweifel gar nicht. */
.grp-sofort { border-bottom-color: var(--bad); }
.grp-sofort .grp-t { color: var(--bad); }
.grp-sofort .grp-n { background: var(--bad); color: #fff; }
.grp-ohne .grp-t { color: var(--warn); }

.grp-druck {
  margin-left: auto;
  display: flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: none; color: var(--ink-2);
  font: inherit; font-size: .78rem; font-weight: 650;
  cursor: pointer;
}
.grp-druck:active { background: var(--surface-2); }

/* ------------------------------------------------------------------ Eine Zeile */
.mrow {
  margin-bottom: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.mrow.sofort { border-left: 4px solid var(--bad); }
/* Abgenommen: Text gedämpft, Knöpfe nicht — sonst sahen „Abnahme
   zurücknehmen" und „Foto vom Ergebnis" aus wie ausgegraut, obwohl sie gehen. */
.mrow.fertig > .mrow-kopf, .mrow.fertig > .mrow-meta { opacity: .62; }

.mrow-kopf { display: flex; align-items: flex-start; gap: var(--s3); }
.mrow-nr {
  flex: none;
  font-size: .78rem; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.mrow-t {
  flex: 1; min-width: 0;
  font-size: .98rem; font-weight: 650; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.mrow-foto {
  flex: none;
  width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--photo-bg);
  cursor: pointer;
}
.mrow-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mrow-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  margin-top: var(--s2);
  font-size: .84rem; color: var(--ink-2);
}
.mrow-meta svg { opacity: .6; }
.mrow-meta .blass { color: var(--ink-3); font-style: italic; }
.mrow-auch { color: var(--ink-3-schrift, var(--ink-3)); }

/* ---------------------------------------------------------------- Die Stufen
   Ganze Wörter, große Flächen, ein Tipp. Kein Wischen und kein Langdrücken:
   Was man nur findet, wenn man es kennt, findet im Haus niemand. */
.stufen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.stufe {
  flex: 1 1 0;
  min-width: 92px; min-height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit; font-size: .88rem; font-weight: 650;
  cursor: pointer;
}
.stufe.an { border-color: var(--brand); background: var(--brand-weich); color: var(--brand-tief); }
.stufe:not(.an):active { background: var(--surface-3); }
/* Abnehmen ist der Schritt der Direktion — er sieht anders aus als die
   drei Stufen davor, weil er etwas anderes bedeutet. */
.stufe-nimm { flex: 1 1 100%; border-color: var(--ok); color: var(--ok); }
.stufe-ab {
  flex: 1 1 100%;
  border-color: transparent; background: none;
  color: var(--ok); font-weight: 700;
  cursor: default;
}

/* =========================================================== Der Ausdruck
   Das Blatt ist ein Dokument, kein Bildschirm. Hier gelten fünf Regeln, die
   im Rest der App nicht gelten:

   1. FARBIG, ABER FÜR SCHWARZWEISS GEBAUT. Gedruckt wird oft schwarzweiß.
      Jede Farbe ist deshalb so dunkel gewählt, dass sie dort ein kräftiges
      Grau ergibt und kein blasses (Helligkeit unter 100 von 255), und keine
      Information hängt an der Farbe allein: „Sofort" ist rot UND ein Wort im
      Rahmen UND ein Balken. Farbflächen gibt es keine — Browser drucken
      Hintergründe von sich aus nicht mit („Hintergrundgrafiken" ist im
      Druckdialog standardmäßig aus). Farbe kommt nur über Schrift, Linien
      und das Logo aufs Papier.
   2. Schrift in pt, Abstände und Linien in mm. Papier hat feste Maße. Linien
      unter 0,15 mm sind schmaler als eine Rasterzelle und kommen als blasse
      Punktkette heraus statt als Linie — also Breite statt Helligkeit.
   3. Was Kennzeichen ist — die Ticketnummer — steht in Vollton.
   4. Die Vorschau IST das Blatt: weißes Papier in beiden Themen, echte
      A4-Breite, dieselben Spalten wie im Druck. Wer vorher sieht, was
      herauskommt, druckt nicht zweimal. Passt das Blatt nicht in den Schirm
      — auf dem Telefon nie —, wird es als Ganzes verkleinert wie in jeder
      Druckvorschau (--blatt-zoom, gesetzt in uebersicht.js). Die Tabelle
      dafür umbrechen zu lassen hieße, etwas anderes zu zeigen als das, was
      aus dem Drucker kommt: am Telefon brach „Wo" Buchstabe für Buchstabe um.
   5. Eigene Klassennamen (.druckblatt, .db-, .dz-, .dk-, .df-, .karte, .k-).
      „.blatt" ist in erfassung.css das fixierte Vollbild-Panel — wer die
      Klasse hier wiederverwendet, schiebt sich das Blatt aus dem Bild.

   Aus dem Fehlerprotokoll: „PDF: neue Seite fehlt." Deshalb beginnt jede
   Abteilung auf einer neuen Seite, und keine Maßnahme wird über den
   Seitenumbruch zerrissen. */

.druckleiste {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  padding: var(--s4);
  border-bottom: 1px solid var(--line);
}
/* Konzept 11 verlangt 56 px. Der Token --tap steht projektweit auf 44 —
   hier wird der Sollwert gesetzt, statt ihn zu erben. */
.druckleiste .btn { flex: 1 1 150px; min-height: 56px; }

/* Fotos sind der größte Posten auf dem Papier. Die Wahl steht deshalb neben
   dem Druckknopf und nicht in einer Einstellung, die niemand findet. */
.druckwahl {
  flex: 1 1 100%;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3);
}
.dw-t { font-size: .9rem; color: var(--ink-2); }
.dw-k { display: flex; gap: 6px; margin-left: auto; }
.dwahl {
  min-height: 56px; padding: 0 var(--s4);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit; font-size: .9rem; font-weight: 650;
}
.dwahl.an { border-color: var(--brand); background: var(--brand-weich); color: var(--brand-tief); }
.dwahl:not(.an):active { background: var(--surface-3); }

/* Wie groß die Fotos aufs Papier kommen. Ein Regler, weil man beim Ziehen im
   Blatt darunter sofort sieht, was herauskommt. Für Finger gebaut: Der Knopf
   ist 32 px groß, der Regler rastet in fünf Stufen ein, und die Stufen stehen
   darunter angeschrieben. Wer sich verstellt hat, kommt mit EINEM Knopf zur
   Standardgröße zurück — ausgegraut, solange es nichts zurückzustellen gibt. */
.fotogroesse {
  flex: 1 1 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
}
.fg-wert { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fg-standard { margin-left: auto; }
.fg-standard:disabled { opacity: .45; cursor: default; }

.fg-regler {
  flex: 1 1 100%;
  height: 44px; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: none; cursor: pointer;
}
.fg-regler::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--line-2); }
.fg-regler::-moz-range-track { height: 8px; border-radius: 4px; background: var(--line-2); }
.fg-regler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 32px; margin-top: -12px;
  border: 3px solid var(--surface); border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.fg-regler::-moz-range-thumb {
  box-sizing: border-box;
  width: 32px; height: 32px;
  border: 3px solid var(--surface); border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

/* Die Stufen, jede unter ihrer Raststelle: Die Mitte des Knopfs läuft von
   16 px bis Breite − 16 px, genau so weit rückt die Skala ein. */
.fg-skala {
  position: relative; flex: 1 1 100%;
  height: 1.3em; margin: -6px 16px 0;
  font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.fg-skala span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.fg-skala span:nth-child(1) { left: 0; }
.fg-skala span:nth-child(2) { left: 25%; }
.fg-skala span:nth-child(3) { left: 50%; }
.fg-skala span:nth-child(4) { left: 75%; }
.fg-skala span:nth-child(5) { left: 100%; }

.druckhinweis {
  flex: 1 1 100%; margin: 0;
  font-size: .86rem; line-height: 1.45; color: var(--ink-3);
}
.druckhinweis b { color: var(--ink-2); font-weight: 650; }

.blaetter { padding: var(--s4); display: grid; gap: var(--s6); justify-items: center; }

/* ------------------------------------------------------------- Das Blatt
   Weißes Papier, in beiden Themen. Die Farben stehen hier als eigene Marken
   und nicht als App-Token: Papier ist nicht dunkel umschaltbar, und die
   App-Farben sind für den Schirm gemacht — das App-Blau #1ea7e0 käme
   schwarzweiß als helles Grau (Helligkeit 133) heraus, das Blatt-Blau als
   kräftiges (80). In Klammern jeweils die Helligkeit im Schwarzweißdruck.

   Die Rangfolge muss auch ohne Farbe stimmen: Sofort ist das Dunkelste auf
   dem Blatt nach dem Schwarz, Mittel das Hellste. Im ersten Entwurf war es
   umgekehrt — das Rot (79) kam schwarzweiß HELLER heraus als das Grau von
   Mittel (68), der dringendste Punkt also am schwächsten. */
.druckblatt {
  --p-ink: #111;          /* Haupttext und alles Tragende            (17) */
  --p-ink-2: #444;        /* Nebentext, noch volldeckend              (68) */
  --p-linie: #111;
  --p-hair: #555;         /* dünnste Linie, die ein Laser durchzieht  (85) */
  --p-akzent: #0e6492;    /* travdo-Blau, für Papier abgedunkelt      (80) */
  --p-dringend: #a1170f;  /* Sofort — dunkler als alles außer Schwarz (63) */
  --p-mittel: #5f6b7a;    /* Mittel — bewusst das Leiseste           (105) */
  --p-rahmen: #3e5c6b;    /* Kartenrand, Blaugrau                     (85) */

  /* A4-Breite, Innenabstand = Seitenrand: innen bleiben 186 mm wie auf Papier. */
  width: 210mm;
  padding: 12mm;
  zoom: var(--blatt-zoom, 1);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--p-ink);
  box-shadow: var(--sh-2);
  font-size: 9.5pt; line-height: 1.4;
}

/* --------------------------------------------------------------- Der Kopf
   Liegt im <thead> — das ist das Einzige, was ein Browser von sich aus auf
   jeder Folgeseite wiederholt. Deshalb schmal gehalten: Er kostet seinen
   Platz auf jedem Blatt der Abteilung, nicht nur auf dem ersten.

   Das <th> bleibt ausdrücklich eine Tabellenzelle. Bekäme es selbst
   display:flex, wäre es laut Tabellen-Reparatur der CSS-Spezifikation keine
   Zelle mehr, der Browser legte eine anonyme Zelle darum — und colspan hat
   an einem Nicht-Zellen-Element keine Wirkung. Geflext wird daher eine
   Ebene nach innen. */
.db-kopf {
  /* Rechts ein Hauch Luft: Was bündig am Satzspiegel endet, verliert beim
     Runden auf Druckpixel sonst seine letzte Spalte (siehe .db-karten). */
  padding: 0 .5mm 2.5mm 0;
  border-bottom: .5mm solid var(--p-akzent);
  text-align: left; font-weight: 400;
}
.dk-oben, .dk-unten {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 2mm 4mm;
}
.dk-oben { align-items: center; margin-bottom: 1.2mm; }
.dk-logo { flex: none; width: 30mm; height: auto; }
.dk-art {
  flex: 1;
  font-size: 7.5pt; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--p-akzent);
}
.dk-n {
  flex: none;
  padding: .2mm 2.2mm;
  border: .25mm solid var(--p-akzent);
  border-radius: 99mm;
  font-size: 8.5pt; font-weight: 700; white-space: nowrap; color: var(--p-akzent);
  font-variant-numeric: tabular-nums;
}
/* Der Titel bleibt einzeilig: Reicht der Platz nicht, rutschen Haus und Datum
   darunter. Sonst stand „Hausmeister ·" über „Sofort", und das auf jeder Seite. */
.dk-unten b {
  flex: 1 1 auto;
  font-size: 13pt; font-weight: 700; letter-spacing: -.01em; line-height: 1.15;
  overflow-wrap: anywhere;
}
.dk-wo { flex: none; font-size: 8.5pt; color: var(--p-ink-2); }

/* Ein Ausdruck ist für Leute gedacht, die die App nicht benutzen — er muss
   allein stehen (Konzept 8). Deshalb ein Satz, der den Auftrag benennt, groß
   und dunkel genug für den Keller; die Verben fett, damit man ihn auch
   überfliegend versteht. Bewusst im <tbody>: im <thead> stünde er auf jeder
   Seite und kostete Papier. */
.db-anleitung td {
  padding: 1.5mm 0 2mm;
  border-bottom: .2mm solid var(--p-hair);
  font-size: 8.5pt; line-height: 1.35; color: #222;
}
.db-anleitung b { font-weight: 700; color: var(--p-ink); }

/* Das Kästchen zum Abhaken mit dem Stift. Nicht jede Abteilung benutzt die
   App — manche bekommen nur das Blatt. Rahmen statt Fläche, damit es auch
   dann steht, wenn der Drucker keine Hintergründe mitnimmt. */
.haken {
  display: block;
  width: 5mm; height: 5mm;
  border: .3mm solid var(--p-linie);
  border-radius: .7mm;
}

/* Was vom Regelfall abweicht: ein Wort im Rahmen. Die drei Marken
   unterscheiden sich ohne Farbe an der Linie — Sofort dick, In Arbeit
   gestrichelt, Mittel dünn und hell —, damit der Schwarzweißdruck dieselbe
   Rangfolge zeigt wie der farbige. */
.marke {
  display: inline-block;
  margin-right: 1.2mm; padding: 0 1.2mm;
  border-radius: .6mm;
  font-size: 7pt; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
  vertical-align: .4mm;
}
.marke-sofort { border: .45mm solid var(--p-dringend); color: var(--p-dringend); font-weight: 800; }
.marke-in-arbeit { border: .25mm dashed var(--p-akzent); color: var(--p-akzent); font-weight: 700; }
.marke-mittel { border: .2mm solid var(--p-mittel); color: var(--p-mittel); font-weight: 700; }

/* ============================================= Ohne Fotos: die dichte Liste
   Festes Raster auf Schirm UND Papier — sonst springen die Spalten zwischen
   den Blättern, je nachdem, wie lang die Texte gerade sind. 186 mm innen,
   davon fest 18 + 28 + 34 = 80 mm; dem Text bleiben 106 mm. Spalte 3 hat
   keine Breite und nimmt den Rest. Spalte 1 ist so breit wie das
   ausgeschriebene „Erledigt" über dem eingerückten Kästchen. */
.db-tab { width: 100%; border-collapse: collapse; table-layout: fixed; }
.db-tab col:nth-child(1) { width: 18mm; }
.db-tab col:nth-child(2) { width: 28mm; }
.db-tab col:nth-child(4) { width: 34mm; }

/* Die Spaltenüberschriften. Auch sie wiederholen sich — darum winzig, aber
   vorhanden und ausgeschrieben: Auf Blatt drei soll niemand raten, was in
   Spalte zwei steht, und „Erl." wäre eine Abkürzung (Konzept 11). */
.db-spalten th {
  padding: 1.6mm 2.5mm 1.2mm 0;
  border-bottom: .2mm solid var(--p-linie);
  font-size: 7.5pt; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--p-akzent);
  text-align: left; white-space: nowrap;
}
.db-spalten th:last-child { padding-right: 0; }
/* Steht über den Kästchen, also mit deren Einzug (siehe .dz > td:first-child). */
.db-spalten th:first-child { padding-left: 2mm; }

.dz > td {
  padding: 1.5mm 2.5mm 1.5mm 0;
  border-bottom: .2mm solid var(--p-hair);
  vertical-align: top;
}
.dz > td:last-child { padding-right: 0; }
/* Jede Zeile trägt den Sofort-Balken — unsichtbar, solange sie nicht dringend
   ist. Ohne das stünde das Kästchen auf Sofort-Zeilen 2 mm weiter rechts als
   auf allen anderen, und die Spalte zum Abhaken wäre genau bei den wichtigsten
   Punkten nicht mehr gerade. Ein durchsichtiger Rahmen kostet keine Tinte. */
.dz > td:first-child { border-left: 1.5mm solid transparent; padding-left: 1mm; }
.dz-dringend > td:first-child { border-left-color: var(--p-dringend); }

/* Die Ticketnummer ist das Einzige auf dem Blatt, was jemand am Telefon
   zurückliest — und sie darf umbrechen: zwei Zeilen Nummer sind harmloser
   als eine Nummer über dem Text. */
.dz-nr {
  font-size: 8pt; font-weight: 600; color: var(--p-ink);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.dz-was { font-size: 9.5pt; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.dz-wo { font-size: 8.5pt; color: var(--p-ink-2); overflow-wrap: anywhere; }

/* ============================================== Mit Fotos: Karten, zu zweit
   Das Foto bestimmt die Höhe. In einer Liste stünde neben jedem Foto eine
   Textzeile vor leerem Weiß; in der Karte steht der Text NEBEN dem Foto und
   nutzt dessen Höhe. Zwei Karten je Reihe: 12 Punkte je Blatt mit Fotos von
   24 × 32 mm — in einer Liste wären es mit gleich großen Fotos 6.

   Gerahmt wird die Zelle selbst (border-collapse: separate), nicht ein Kasten
   darin: Zellen einer Reihe sind von sich aus gleich hoch, ein Kasten mit
   height:100% in einer Tabellenzelle ist es in keinem Browser verlässlich. */
.db-karten {
  /* border-spacing setzt den Abstand auch außen an, Kopf und Karten rücken
     also 2 mm ein. Die Tabelle dafür über den Satzspiegel zu verbreitern geht
     NICHT: Der Browser rundet die 2 mm auf ganze Pixel ab, die Zellen ragten
     dann 0,2 mm über den Seitenrand — und dort schneidet der Druck hart ab.
     Im Probedruck fehlten so die rechten Kartenkanten. Stattdessen rückt der
     Fuß um denselben Abstand ein. */
  width: 100%;
  border-collapse: separate; border-spacing: 2mm;
  table-layout: fixed;
}
.db-karten .db-anleitung td { border-bottom: 0; padding-bottom: 0; }
.db-karten + .db-fuss { padding: 0 2mm; }

.karte {
  padding: 1.5mm;
  border: .2mm solid var(--p-rahmen);
  border-radius: 1.5mm;
  vertical-align: top;
}
/* Sofort: dicker roter Balken links. Der Innenabstand wird um genau die
   Mehrbreite kleiner, damit Kästchen und Foto nicht verrutschen. */
.karte-dringend { border-left: 1.6mm solid var(--p-dringend); padding-left: .1mm; }
.karte-leer { border: 0; }

/* --foto ist der Faktor vom Regler „Größe der Fotos" in der Druckleiste
   (1 = Standardgröße), gesetzt am Behälter .blaetter — er gilt für die
   Vorschau und fürs Papier. */
.k-in {
  display: grid;
  grid-template-columns: 4.6mm calc(24mm * var(--foto, 1)) minmax(0, 1fr);
  column-gap: 2.5mm;
  align-items: start;
}
.k-in.k-ohne-foto { grid-template-columns: 4.6mm minmax(0, 1fr); }

/* Fotos kommen vom Telefon, also meist hochkant. Der Rahmen ist in
   Standardgröße 24 × 32 mm, mit dem Regler 18 × 24 bis 42 × 56 mm. Das Foto
   passt sich ein und behält sein Format — hochkant füllt es den Rahmen, quer
   wird es so breit wie der Rahmen und drei Viertel so hoch. Beschnitten wird
   nichts: Am Rand eines Fotos steht oft genau das, was man zum Finden braucht.

   Die Kante ist kein Schmuck: Ein dunkles Kellerfoto wird schwarzweiß zum
   Fleck, und ohne Kante sieht man nicht mehr, dass dort ein Bild ist. */
.k-foto img {
  width: auto; height: auto;
  max-width: calc(24mm * var(--foto, 1)); max-height: calc(32mm * var(--foto, 1));
  border: .2mm solid var(--p-ink);
  border-radius: .8mm;
}
/* Ohne das bliebe unter dem Foto die Unterlänge einer Textzeile stehen: jede
   Reihe 1 mm höher, und bei vielen Punkten ein Blatt mehr. */
.k-foto .mk { vertical-align: top; }
/* Markierungen auf dem Blatt: Die Striche sind Anteile der Bildhöhe statt fester
   Punkte. So wachsen sie mit dem Regler, und Vorschau und Papier sehen gleich
   aus, egal wie ein Browser beim Drucken Punkte umrechnet. Das Rot ist das
   Sofort-Rot: Schwarzweiß bleibt es dunkel, der weiße Rand hebt es vom Foto ab. */
.k-foto .mk-ebene * { vector-effect: none; }
.k-foto .mk-rand { stroke-width: .05; }
.k-foto .mk-strich { stroke: var(--p-dringend); stroke-width: .022; }

/* Etwas größere Schrift als in der Liste: Platz ist neben dem Foto genug,
   und gelesen wird im Keller, nicht am Schreibtisch. */
.k-text { display: grid; gap: .9mm; min-width: 0; }
.k-nr {
  font-size: 8.5pt; font-weight: 700; color: var(--p-ink);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.k-was { font-size: 10.5pt; font-weight: 600; line-height: 1.28; overflow-wrap: anywhere; }
.k-wo { font-size: 9pt; color: var(--p-ink-2); overflow-wrap: anywhere; }
.k-mehr { font-size: 8pt; color: var(--p-ink-2); }

/* --------------------------------------------------------------- Der Fuß
   Felder zum Ausfüllen: echte Linien statt aneinandergereihter Unterstriche.
   Die brachen je nach Breite mitten im Wort um und sahen aus wie ein
   Tippfehler — auf einem Blatt, das jemand unterschreiben soll.

   Flach gehalten (rund 16 mm statt 28), weil er außerhalb der Tabelle steht
   und damit keinen wiederholten Kopf bekommt: Je höher er ist, desto
   wahrscheinlicher landet er allein auf einer letzten Seite.

   Keine eigene Trennlinie: Die letzte Zeile schließt die Liste schon ab. Eine
   zweite Linie 4 mm darunter sah im Probedruck aus wie eine leere Zeile. */
.db-fuss {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 3mm 5mm;
  margin-top: 6mm;
  font-size: 8pt; color: #333;
}
/* Der Titel sagt, dass die Felder zum ganzen Blatt gehören. Ohne ihn sah der
   Fuß im Probedruck aus wie ein Feld der letzten Karte. In derselben Zeile
   wie die Felder, damit er keine Höhe kostet. */
.df-titel { flex: none; align-self: center; font-size: 9pt; font-weight: 700; color: var(--p-ink); }
.df-f { flex: 1 1 30mm; display: grid; }
.df-f i { display: block; height: 6mm; border-bottom: .25mm solid var(--p-linie); }
.df-breit { flex: 1 1 46mm; }

@media print {
  /* Papier ist weiß. Ohne das druckt der Browser bei dunklem Thema entweder
     eine schwarze Fläche oder weißen Text auf Weiß — beides unbrauchbar. */
  html, body { background: #fff !important; color: #000 !important; }
  #buehne, .dash { background: #fff !important; }

  /* Alles außer den Blättern verschwindet — Leisten, Knöpfe, Bänder. */
  .appbar, .netzband, .druckleiste, .toast { display: none !important; }

  .blaetter { display: block; padding: 0; }

  .druckblatt {
    /* Den Rand macht jetzt @page; die Verkleinerung der Vorschau gilt nicht
       fürs Papier — sonst druckte ein Telefon das Blatt auf halber Größe. */
    width: auto;
    margin: 0; padding: 0;
    zoom: 1;
    border-radius: 0;
    box-shadow: none;
    page: abteilung;
    /* Jede Abteilung auf ein eigenes Blatt. */
    break-before: page;
    page-break-before: always;
  }
  .druckblatt:first-child { break-before: auto; page-break-before: avoid; }

  /* Keine Maßnahme über den Seitenumbruch zerreißen — sonst steht die
     Hälfte eines Auftrags auf Blatt zwei und niemand liest sie. Bei den
     Karten ist die ganze Reihe die Einheit: zwei Karten, gleich hoch. */
  .dz, .kz, .db-anleitung, .df-f {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Der Kopf gehört nie allein auf das Ende einer Seite, und der Fuß soll
     nicht als Erstes auf einer neuen stehen. */
  .db-tab thead, .db-karten thead { break-after: avoid; page-break-after: avoid; }
  .db-fuss { break-before: avoid; page-break-before: avoid; }

  @page {
    size: A4; margin: 12mm;
    /* Schrift der Seitenzahl — gilt für jede Druckseite; die benannten
       Seiten unten setzen nur noch den Text. */
    @bottom-right {
      font: 600 8.5pt system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #333;
    }
  }

  /* Seitenzahl im unteren Rand. Konzept 8 verlangt sie; fällt ein Blatt aus
     dem Stapel, merkt man es so. Chrome und Edge drucken Randfelder seit
     Version 131 — im Probedruck mit Edge 156 geprüft.

     Eine Abteilung: „Seite 2 von 3" über den eingebauten Seitenzähler.

     Alle Abteilungen in einem PDF: Der eingebaute Zähler läuft über das ganze
     Dokument — der Hausmeister bekäme „Seite 4 von 9". Zurücksetzen lässt er
     sich im Browser nicht: counter-reset wirkt weder am Element noch in @page
     (beides im Probedruck geprüft). Was wirkt, ist ein eigener Zähler je
     benannter Seite. Jedes Blatt im Stapel bekommt deshalb seinen Platz
     (abt1, abt2 …), und jede Abteilung zählt ab 1. Eine Gesamtzahl je
     Abteilung gibt es so nicht; das Ende zeigt der Fuß „Rückgabe an die
     Direktion" auf der letzten Seite.
     20 Plätze reichen für 15 Abteilungen plus „noch keiner zugeordnet"; ab dem
     21. Blatt zählt der Rand wieder den ganzen Stapel. */
  @page abteilung { @bottom-right { content: "Seite " counter(page) " von " counter(pages); } }
  @page stapel { @bottom-right { content: "Seite " counter(page) " von " counter(pages) " · alle Abteilungen"; } }
  .im-stapel .druckblatt { page: stapel; }
  .im-stapel .druckblatt:nth-child(1) { page: abt1; }
  .im-stapel .druckblatt:nth-child(2) { page: abt2; }
  .im-stapel .druckblatt:nth-child(3) { page: abt3; }
  .im-stapel .druckblatt:nth-child(4) { page: abt4; }
  .im-stapel .druckblatt:nth-child(5) { page: abt5; }
  .im-stapel .druckblatt:nth-child(6) { page: abt6; }
  .im-stapel .druckblatt:nth-child(7) { page: abt7; }
  .im-stapel .druckblatt:nth-child(8) { page: abt8; }
  .im-stapel .druckblatt:nth-child(9) { page: abt9; }
  .im-stapel .druckblatt:nth-child(10) { page: abt10; }
  .im-stapel .druckblatt:nth-child(11) { page: abt11; }
  .im-stapel .druckblatt:nth-child(12) { page: abt12; }
  .im-stapel .druckblatt:nth-child(13) { page: abt13; }
  .im-stapel .druckblatt:nth-child(14) { page: abt14; }
  .im-stapel .druckblatt:nth-child(15) { page: abt15; }
  .im-stapel .druckblatt:nth-child(16) { page: abt16; }
  .im-stapel .druckblatt:nth-child(17) { page: abt17; }
  .im-stapel .druckblatt:nth-child(18) { page: abt18; }
  .im-stapel .druckblatt:nth-child(19) { page: abt19; }
  .im-stapel .druckblatt:nth-child(20) { page: abt20; }
  @page abt1 { counter-increment: abt1; @bottom-right { content: "Seite " counter(abt1); } }
  @page abt2 { counter-increment: abt2; @bottom-right { content: "Seite " counter(abt2); } }
  @page abt3 { counter-increment: abt3; @bottom-right { content: "Seite " counter(abt3); } }
  @page abt4 { counter-increment: abt4; @bottom-right { content: "Seite " counter(abt4); } }
  @page abt5 { counter-increment: abt5; @bottom-right { content: "Seite " counter(abt5); } }
  @page abt6 { counter-increment: abt6; @bottom-right { content: "Seite " counter(abt6); } }
  @page abt7 { counter-increment: abt7; @bottom-right { content: "Seite " counter(abt7); } }
  @page abt8 { counter-increment: abt8; @bottom-right { content: "Seite " counter(abt8); } }
  @page abt9 { counter-increment: abt9; @bottom-right { content: "Seite " counter(abt9); } }
  @page abt10 { counter-increment: abt10; @bottom-right { content: "Seite " counter(abt10); } }
  @page abt11 { counter-increment: abt11; @bottom-right { content: "Seite " counter(abt11); } }
  @page abt12 { counter-increment: abt12; @bottom-right { content: "Seite " counter(abt12); } }
  @page abt13 { counter-increment: abt13; @bottom-right { content: "Seite " counter(abt13); } }
  @page abt14 { counter-increment: abt14; @bottom-right { content: "Seite " counter(abt14); } }
  @page abt15 { counter-increment: abt15; @bottom-right { content: "Seite " counter(abt15); } }
  @page abt16 { counter-increment: abt16; @bottom-right { content: "Seite " counter(abt16); } }
  @page abt17 { counter-increment: abt17; @bottom-right { content: "Seite " counter(abt17); } }
  @page abt18 { counter-increment: abt18; @bottom-right { content: "Seite " counter(abt18); } }
  @page abt19 { counter-increment: abt19; @bottom-right { content: "Seite " counter(abt19); } }
  @page abt20 { counter-increment: abt20; @bottom-right { content: "Seite " counter(abt20); } }

  /* Leere Seite vor dem Blatt: Mit benannten Seiten legen Edge und Chrome im
     echten Druckdialog manchmal eine leere Seite VOR das erste Blatt — bei
     125 % Anzeigeskalierung etwa jeden vierten Druck, ohne dass sich am
     Dokument etwas ändert (im Testdruck über page.pdf() nie). Die erste
     Seite bekommt dann den Namen der Wurzel, „auto", statt den des Blatts,
     und der Namenswechsel erzwingt einen Umbruch. Tragen Wurzel und Hülle
     denselben Namen wie das erste Blatt, gibt es keinen Wechsel mehr. */
  html:has(.druckblatt), html:has(.druckblatt) body,
  html:has(.druckblatt) #buehne, .blaetter { page: abteilung; }
  html:has(.im-stapel), html:has(.im-stapel) body,
  html:has(.im-stapel) #buehne, .blaetter.im-stapel { page: abt1; }
}

/* ------------------------------------------------- Beleg zur Erledigung
   „Erledigt gemeldet" und „erledigt" sind zweierlei. Wer abnimmt, sitzt
   meist nicht im selben Stockwerk — ein Bild vom Ergebnis erspart ihm den
   Weg und macht die Abnahme erst zu einer Prüfung. */
.beleg {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px dashed var(--line);
}
.beleg-marke {
  display: flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 700; color: var(--ok);
}
.beleg-bilder { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.beleg-bild {
  width: 52px; height: 52px; padding: 0;
  border: 2px solid var(--ok); border-radius: var(--r-xs);
  overflow: hidden; background: var(--photo-bg); cursor: pointer;
}
.beleg-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beleg-plus {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1.5px dashed var(--line-2); border-radius: var(--r-xs);
  background: none; color: var(--ink-3); cursor: pointer;
}
/* Erst nach dem Melden sichtbar — wer zwanzig Punkte abhakt, soll nicht
   zwanzigmal gefragt werden. */
.beleg-neu {
  display: flex; align-items: center; gap: 7px;
  width: 100%; min-height: 44px;
  padding: 0 var(--s3);
  border: 1.5px dashed var(--line-2); border-radius: var(--r-sm);
  background: none; color: var(--ink-2);
  font: inherit; font-size: .86rem; font-weight: 600;
  cursor: pointer;
}
.beleg-neu:active { background: var(--surface-2); }

@media print {
  /* Der Beleg gehört auf den Schirm, nicht auf das Blatt zum Abarbeiten. */
  .beleg { display: none !important; }
}