/* ==========================================================================
   print.css — A4-Druckvorlagen ("Vorlagen zum Ausdrucken")
   --------------------------------------------------------------------------
   Bewusst self-contained: kein @import, keine Webfonts, keine Netzabhängigkeit.
   Die Vorlagen-HTMLs sind die Single Source of Truth; aus ihnen rendert
   tools/generate-templates.mjs per Headless Chrome die PDFs in /downloads.
   Netzfreies CSS => byte-identisch reproduzierbares PDF.

   Der Font-Stack lässt Inter absichtlich weg. Die CSP der Live-Site erlaubt
   kein fonts.googleapis.com, dort rendert also ebenfalls der System-Stack —
   das Blatt sieht damit aus wie die Website.
   ========================================================================== */

:root {
  --sheet-primary:      #119589;
  --sheet-primary-dark: #0E7E74;
  --sheet-ink:          #1A1A1A;
  --sheet-ink-soft:     #3C3C3C;
  --sheet-ink-muted:    #6E7682;
  --sheet-rule:         #C8CCD2;
  --sheet-rule-soft:    #E1E2E3;
  --sheet-tint:         #E8F5F3;

  --sheet-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
}

/* --- Akzent pro Vorlage --------------------------------------------------- */
/* Die Farbe benennt den Bereich der App. Für die vier Listentypen kommt sie
   direkt aus der App:
   lib/presentation/design_system/tokens/ui_list_colors.dart
     shopping #119589 · task #1565C0 · packing Colors.orange · general #7C3AED

   Eine Abweichung, bewusst: packing ist in der App Colors.orange (#FF9800).
   Weiße Schrift darauf hat nur ~2:1 Kontrast und ist gedruckt nicht lesbar.
   Wir behalten den Hue und nehmen die abgedunkelte Variante (~4,6:1).

   Kein Listentyp, deshalb frei gewählt: Termine teal (Markenfarbe),
   Rezepte grün, Kontakte beere. Violett wäre naheliegend, ist aber für
   general-Listen belegt.

   Rot ist bewusst NUR für das Notfallblatt reserviert. Es ist die einzige
   Vorlage, bei der die Farbe eine Warnung ist und nicht eine Zuordnung —
   sie darf sich nicht mit dem Geburtstagskalender teilen, der ebenfalls zum
   Kontakte-Bereich gehört. */

.sheet--shopping { --sheet-primary: #119589; --sheet-primary-dark: #0E7E74; --sheet-tint: #E8F5F3; }
.sheet--task     { --sheet-primary: #1565C0; --sheet-primary-dark: #10529C; --sheet-tint: #E9F0FA; }
.sheet--packing  { --sheet-primary: #CA6702; --sheet-primary-dark: #A85502; --sheet-tint: #FBF1E7; }
.sheet--general  { --sheet-primary: #7C3AED; --sheet-primary-dark: #6528D4; --sheet-tint: #F2EDFE; }
.sheet--rezepte  { --sheet-primary: #4F7F5C; --sheet-primary-dark: #3E6849; --sheet-tint: #EDF3EE; }
.sheet--kontakte { --sheet-primary: #A6316B; --sheet-primary-dark: #8A2859; --sheet-tint: #FBECF3; }
.sheet--notfall  { --sheet-primary: #9B2226; --sheet-primary-dark: #7F1B1F; --sheet-tint: #FBECEC; }

/* --- Seitensetup ---------------------------------------------------------- */

@page {
  size: A4 portrait;
  margin: 0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sheet-font);
  color: var(--sheet-ink-soft);
  background: #E4E4E0;
  -webkit-font-smoothing: antialiased;
}

/* Das Blatt selbst: exakt A4. Padding = Druckrand. */
.sheet {
  position: relative;
  width: 210mm;
  height: 297mm;
  padding: 14mm 13mm 11mm;
  margin: 0 auto;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Hintergrundflächen und Rahmen müssen im Druck erhalten bleiben. */
.sheet,
.sheet * {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* --- Kopf ---------------------------------------------------------------- */

.sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8mm;
  padding-bottom: 4mm;
  border-bottom: 0.9mm solid var(--sheet-primary);
}

.sheet__title {
  margin: 0;
  font-size: 25pt;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--sheet-ink);
}

.sheet__sub {
  margin: 2mm 0 0;
  max-width: 118mm;
  font-size: 9.5pt;
  line-height: 1.4;
  color: var(--sheet-ink-muted);
}

.sheet__brand {
  flex: 0 0 auto;
  padding-top: 1mm;
}

.sheet__logo {
  display: block;
  height: 11mm;
  width: auto;
}

/* --- Meta-Zeile (Woche vom … bis …) -------------------------------------- */

.sheet__meta {
  display: flex;
  gap: 10mm;
  align-items: baseline;
  padding: 3.5mm 0 3mm;
  font-size: 9pt;
  font-weight: 600;
  color: var(--sheet-ink);
}

.sheet__field {
  display: flex;
  align-items: baseline;
  gap: 2mm;
  flex: 1 1 auto;
}

.sheet__field-line {
  flex: 1 1 auto;
  border-bottom: 0.25mm solid var(--sheet-rule);
  height: 4.5mm;
}

/* --- Wochen-Tabelle ------------------------------------------------------ */

.week {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border: 0.3mm solid var(--sheet-rule);
  border-radius: 1.6mm;
  overflow: hidden;
}

.week__head {
  display: flex;
  background: var(--sheet-primary);
  color: #FFFFFF;
}

.week__head > div {
  padding: 2.2mm 3mm;
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Spaltenbreiten: Tag | Was steht an | Wer macht's */
.col-day  { flex: 0 0 20mm; }
.col-what { flex: 1 1 auto; }
.col-who  { flex: 0 0 42mm; border-left: 0.3mm solid rgba(255, 255, 255, 0.35); }

.week__day {
  display: flex;
  flex: 1 1 0;
  border-top: 0.3mm solid var(--sheet-rule-soft);
  min-height: 0;
}

.week__day:first-of-type { border-top: 0; }

/* Wochenende dezent abgesetzt */
.week__day--weekend { background: #F7FAFA; }

.week__day .col-day {
  padding: 2.2mm 3mm;
  border-right: 0.3mm solid var(--sheet-rule-soft);
  display: flex;
  flex-direction: column;
  gap: 1mm;
}

.day__name {
  font-size: 10.5pt;
  font-weight: 800;
  color: var(--sheet-primary-dark);
  letter-spacing: -0.01em;
  line-height: 1;
}

.day__date {
  border-bottom: 0.25mm solid var(--sheet-rule);
  height: 4mm;
}

/* Zeilen für Einträge */
.week__day .col-what,
.week__day .col-who {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 1.6mm 3mm;
  gap: 0.8mm;
}

.week__day .col-who {
  border-left: 0.3mm solid var(--sheet-rule-soft);
}

/* align-items: flex-end -> Kästchen und Schreiblinie sitzen auf einer
   gemeinsamen Grundlinie. Handschrift läuft sonst über dem Kästchen. */
.entry {
  display: flex;
  align-items: flex-end;
  gap: 2mm;
  flex: 1 1 0;
  min-height: 0;
}

.entry__box {
  flex: 0 0 auto;
  width: 3.4mm;
  height: 3.4mm;
  margin-bottom: 0.7mm;
  border: 0.3mm solid var(--sheet-rule);
  border-radius: 0.7mm;
}

.entry__line {
  flex: 1 1 auto;
  border-bottom: 0.25mm solid var(--sheet-rule-soft);
  height: 100%;
}

/* Band unter den sieben Tagen: was diese Woche ansteht, aber an keinem festen
   Tag hängt. Ohne das muss jeder Eintrag einem Tag zugeordnet werden, auch wenn
   das gar nicht stimmt — und dann landet er nirgends. Flacher als ein Tag und
   getönt, damit es als Anhang lesbar bleibt und nicht als achter Wochentag. */
.week__day--open {
  flex: 0.78 1 0;
  background: var(--sheet-tint);
  border-top: 0.5mm solid var(--sheet-primary);
}

.day__open {
  font-size: 7pt;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sheet-primary-dark);
}

/* ==========================================================================
   Zusätzliche Layouts für die weiteren Vorlagen
   ========================================================================== */

/* Legende unter der Meta-Zeile, wenn eine Zeile mehrere Felder hat.
   Spart die Wiederholung von Spaltenlabels in jedem Block. */
.sheet__legend {
  margin: 0 0 3mm;
  font-size: 7.5pt;
  color: var(--sheet-ink-muted);
}

.sheet__legend b { color: var(--sheet-ink); font-weight: 600; }

/* --- A. Kategorieblöcke (Einkaufsliste) ---------------------------------- */
/* Jeder Block ist einer Person zuteilbar — so lässt sich ein großer Einkauf
   im Laden auf zwei Leute aufteilen. */

.blocks {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Drei gleich hohe Kategoriezeilen, darunter ein flacherer Streifen für
     „Sonstiges" — der braucht weniger Platz als eine volle Kategorie. */
  grid-template-rows: repeat(3, 1fr) 0.5fr;
  gap: 4mm 6mm;
  min-height: 0;
}

/* Allgemeine Liste: vier gleich hohe Blöcke, kein Sonstiges-Streifen — hier ist
   ohnehin jede Überschrift frei. */
.blocks--free { grid-template-rows: repeat(2, 1fr); }

/* Läuft über beide Spalten: alles, was in keine Kategorie passt.
   Ohne diesen Block fühlt sich das Blatt vorgeschrieben an. */
.block--wide { grid-column: 1 / -1; }

.block--wide .block__rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 6mm;
  align-content: space-evenly;
}

.block {
  display: flex;
  flex-direction: column;
  border: 0.3mm solid var(--sheet-rule);
  border-radius: 1.6mm;
  overflow: hidden;
  min-height: 0;
}

.block__head {
  display: flex;
  align-items: baseline;
  gap: 2mm;
  padding: 1.9mm 3mm;
  background: var(--sheet-primary);
  color: #fff;
}

.block__t {
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.block__who {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 1.5mm;
  font-size: 6.5pt;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.block__who-line {
  width: 19mm;
  height: 3mm;
  border-bottom: 0.25mm solid rgba(255, 255, 255, 0.65);
}

.block__rows {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0.6mm 3mm 1.4mm;
  min-height: 0;
}

/* Spaltenhinweis einmal pro Block, direkt unter dem Kopf — sonst ist die
   kurze Linie rechts nicht als Mengenfeld erkennbar. */
.block__labels {
  display: flex;
  gap: 2mm;
  padding: 1.1mm 3mm 0;
  font-size: 6pt;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sheet-ink-muted);
}

.block__labels span:first-child { flex: 1 1 auto; padding-left: 5.4mm; }
.block__labels span:last-child { flex: 0 0 13mm; }

.brow {
  display: flex;
  align-items: flex-end;
  gap: 2mm;
  flex: 1 1 0;
  min-height: 0;
}

.brow__what {
  flex: 1 1 auto;
  border-bottom: 0.25mm solid var(--sheet-rule-soft);
  height: 100%;
}

.brow__amt {
  flex: 0 0 13mm;
  border-bottom: 0.25mm solid var(--sheet-rule-soft);
  height: 100%;
}

/* --- B. Personenspalten (Packliste) ------------------------------------- */
/* Zeilen sind Gegenstände, Spalten sind Personen. Abhaken statt nachfragen. */

.plist {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border: 0.3mm solid var(--sheet-rule);
  border-radius: 1.6mm;
  overflow: hidden;
  min-height: 0;
}

.plist__head { display: flex; background: var(--sheet-primary); color: #fff; }

.plist__head .c-item {
  flex: 1 1 auto;
  padding: 2mm 3mm;
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.c-p {
  flex: 0 0 21mm;
  border-left: 0.3mm solid rgba(255, 255, 255, 0.32);
}

.plist__head .c-p {
  padding: 1.6mm 2.5mm;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.8mm;
}

.plist__head .c-p span {
  font-size: 6pt;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.plist__head .c-p i {
  display: block;
  height: 3.4mm;
  border-bottom: 0.25mm solid rgba(255, 255, 255, 0.65);
}

.pgroup {
  display: flex;
  align-items: center;
  padding: 1.5mm 3mm;
  background: var(--sheet-tint);
  border-top: 0.3mm solid var(--sheet-rule-soft);
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sheet-primary-dark);
}

.prow {
  display: flex;
  flex: 1 1 0;
  border-top: 0.3mm solid var(--sheet-rule-soft);
  min-height: 0;
}

.prow .c-item {
  flex: 1 1 auto;
  padding: 1mm 3mm;
  display: flex;
  align-items: center;
  font-size: 8.5pt;
  color: var(--sheet-ink-soft);
}

.prow .c-p {
  border-left: 0.3mm solid var(--sheet-rule-soft);
  display: grid;
  place-items: center;
}

.prow--blank .c-item { border-bottom: 0; }

.prow--blank .c-item { gap: 2mm; }

.prow--blank .c-item::after {
  content: "";
  flex: 1 1 auto;
  border-bottom: 0.25mm solid var(--sheet-rule-soft);
  margin-bottom: 1mm;
}

/* --- B2. Aufgabenliste: Aufgabe | Wer | Bis ------------------------------ */
/* Gleiche Tabellenmechanik wie die Packliste, aber statt Personenspalten zwei
   feste Felder pro Zeile. Die Gruppen sind Zeitfenster, keine Themen — eine
   Aufgabe ohne Zeithorizont wird nie erledigt. */

.plist__head .c-w, .prow .c-w { flex: 0 0 32mm; }
.plist__head .c-d, .prow .c-d { flex: 0 0 24mm; }

.plist__head .c-w, .plist__head .c-d {
  border-left: 0.3mm solid rgba(255, 255, 255, 0.32);
  padding: 2mm 3mm;
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.prow .c-w, .prow .c-d {
  border-left: 0.3mm solid var(--sheet-rule-soft);
  display: flex;
  align-items: flex-end;
  padding: 1mm 3mm 1.6mm;
}

.prow .c-w::after, .prow .c-d::after {
  content: "";
  flex: 1 1 auto;
  border-bottom: 0.25mm solid var(--sheet-rule-soft);
}

/* --- A2. Blöcke mit selbst gewählter Überschrift ------------------------- */
/* Für die allgemeine Liste: die Kategorien sind nicht vorgegeben, man schreibt
   sie in die Kopfzeile. Maximale Freiheit bei erhaltener Struktur. */

.block__title-line {
  flex: 1 1 auto;
  height: 4mm;
  border-bottom: 0.25mm solid rgba(255, 255, 255, 0.7);
}

.brow__who {
  flex: 0 0 22mm;
  border-bottom: 0.25mm solid var(--sheet-rule-soft);
  height: 100%;
}

/* --- C. Plan + abgeleitete Liste (Essensplan) ---------------------------- */

.mealgrid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 52mm;
  gap: 6mm;
  min-height: 0;
}

/* Im Essensplan ist die Wochentabelle schmaler als auf dem Wochenplan, weil
   rechts die Einkaufsliste steht. Die Zuständigkeitsspalte darf deshalb
   weniger Platz nehmen — der Gerichtsname braucht ihn mehr. */
.week--meal .col-who { flex: 0 0 28mm; }

/* Ein einzelnes Feld pro Tag: die Linie muss vertikal mittig sitzen. Würde die
   Zeile die ganze Zellhöhe füllen, läge ihr border-bottom exakt auf der
   Zeilentrennlinie und wäre unsichtbar. */
.week--meal .col-who { justify-content: center; }
.week--meal .col-who .entry { flex: 0 0 auto; height: 7mm; }

.sidelist {
  display: flex;
  flex-direction: column;
  border: 0.3mm solid var(--sheet-rule);
  border-radius: 1.6mm;
  overflow: hidden;
  min-height: 0;
}

.sidelist__head {
  padding: 2.2mm 3mm;
  background: var(--sheet-primary);
  color: #fff;
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sidelist__note {
  padding: 1.8mm 3mm;
  background: var(--sheet-tint);
  font-size: 7pt;
  line-height: 1.35;
  color: var(--sheet-primary-dark);
  border-bottom: 0.3mm solid var(--sheet-rule-soft);
}

.sidelist__rows {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 1.5mm 3mm;
  min-height: 0;
}

/* --- D. Monatsraster (Geburtstagskalender) ------------------------------- */

.months {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5mm 6mm;
  min-height: 0;
}

.month {
  display: flex;
  flex-direction: column;
  border: 0.3mm solid var(--sheet-rule);
  border-radius: 1.6mm;
  overflow: hidden;
  min-height: 0;
}

.month__head {
  padding: 1.6mm 3mm;
  background: var(--sheet-primary);
  color: #fff;
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.month__rows {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 1.3mm 3mm;
  min-height: 0;
}

.mrow {
  display: flex;
  align-items: flex-end;
  gap: 2mm;
  flex: 1 1 0;
  min-height: 0;
}

.mrow__day {
  flex: 0 0 7mm;
  border-bottom: 0.25mm solid var(--sheet-rule);
  height: 100%;
}

.mrow__name {
  flex: 1 1 auto;
  border-bottom: 0.25mm solid var(--sheet-rule-soft);
  height: 100%;
}

.mrow__idea {
  flex: 0 0 28mm;
  border-bottom: 0.25mm solid var(--sheet-rule-soft);
  height: 100%;
}

/* --- E. Notruf-Kacheln + Kontaktzeilen (Notfallnummern) ------------------- */
/* Dieses Blatt ist das einzige, das im Ernstfall gelesen wird — von jemandem,
   der aufgeregt ist, und womöglich von einem Kind. Deshalb sind 112 und 110
   nicht Zeilen wie alle anderen, sondern zwei Kacheln, die man aus zwei Metern
   Entfernung erkennt.

   Gedruckt stehen nur diese zwei Nummern. Alles andere ist eine Linie zum
   Ausfüllen: der Giftnotruf ist in Deutschland regional (sieben Zentralen),
   Kinderarzt und Schule sind ohnehin individuell. Eine Vorlage, die hier
   irgendeine Nummer vordruckt, wäre für die meisten Familien falsch. */

.sos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5mm;
  margin: 1mm 0 5mm;
}

.sos__tile {
  display: flex;
  align-items: center;
  gap: 4mm;
  padding: 4mm 5mm;
  border: 0.5mm solid var(--sheet-primary);
  border-radius: 2mm;
  background: var(--sheet-tint);
}

.sos__num {
  font-size: 34pt;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--sheet-primary-dark);
}

.sos__what {
  font-size: 9pt;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sheet-ink);
}

.sos__what span {
  display: block;
  font-weight: 500;
  color: var(--sheet-ink-muted);
}

/* Kontaktblöcke: zwei Spalten, darunter ein breiter Streifen für die Angaben,
   nach denen die Leitstelle zuerst fragt. */

.contacts {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 0.62fr;
  gap: 4mm 6mm;
  min-height: 0;
}

/* Eine Kontaktzeile: Bezeichnung links, Nummer rechts. Die Bezeichnung ist
   entweder vorgedruckt (.crow__lbl) oder selbst eine Linie (.crow__free) —
   bei Nachbarn und Handynummern kennt die Vorlage die Namen nicht. */

.crow {
  display: flex;
  align-items: flex-end;
  gap: 2.5mm;
  flex: 1 1 0;
  min-height: 0;
}

.crow__lbl {
  flex: 0 0 32mm;
  padding-bottom: 0.6mm;
  font-size: 8pt;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sheet-ink);
  border-bottom: 0.25mm solid transparent;
}

.crow__free {
  flex: 0 0 32mm;
  border-bottom: 0.25mm solid var(--sheet-rule-soft);
  height: 100%;
}

.crow__num {
  flex: 1 1 auto;
  border-bottom: 0.25mm solid var(--sheet-rule-soft);
  height: 100%;
}

/* Vorgedruckte Nummer statt Linie — bislang nur 116 117, der ärztliche
   Bereitschaftsdienst, weil bundesweit einheitlich. */
.crow__num--set {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.6mm;
  font-size: 9.5pt;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sheet-primary-dark);
  border-bottom-color: transparent;
}

.contacts .block--wide .block__rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 6mm;
  align-content: space-evenly;
}

/* --- F. Aufgabe × Wochentag (Putzplan) ----------------------------------- */
/* Zeilen sind Aufgaben, Spalten sind Wochentage. Die Wer-Spalte steht direkt
   hinter der Aufgabe und nicht am Ende: wer den Plan liest, sucht zuerst den
   eigenen Namen, nicht das Kästchen. */

.chores {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border: 0.3mm solid var(--sheet-rule);
  border-radius: 1.6mm;
  overflow: hidden;
  min-height: 0;
}

.chores__head,
.chore {
  display: flex;
  align-items: stretch;
}

.chores__head {
  background: var(--sheet-primary);
  color: #fff;
  font-size: 6.8pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chores__head > * {
  padding: 1.9mm 2mm;
  display: flex;
  align-items: center;
}

.c-task { flex: 1 1 auto; padding-left: 3mm !important; }
.c-who  { flex: 0 0 26mm; }
.c-day  { flex: 0 0 10.4mm; justify-content: center; }

.cgroup {
  padding: 1.4mm 3mm;
  background: var(--sheet-tint);
  border-top: 0.25mm solid var(--sheet-rule-soft);
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sheet-primary-dark);
}

.chore {
  flex: 1 1 0;
  min-height: 0;
  border-top: 0.25mm solid var(--sheet-rule-soft);
}

.chore > * {
  display: flex;
  align-items: flex-end;
  padding: 0 2mm 0.9mm;
}

.chore .c-task,
.chore .c-who {
  border-right: 0.25mm solid var(--sheet-rule-soft);
}

.chore .c-day {
  border-right: 0.25mm solid var(--sheet-rule-soft);
  justify-content: center;
  align-items: center;
  padding-bottom: 0;
}

.chore .c-day:last-child { border-right: 0; }

/* Kästchen mittig in der Tagesspalte. Kleiner als .entry__box, weil sieben
   davon in eine Zeile müssen — aber gross genug für einen Haken mit Kuli. */
.chore__box {
  width: 3.6mm;
  height: 3.6mm;
  border: 0.28mm solid var(--sheet-rule);
  border-radius: 0.5mm;
}

/* --- G. Stundenraster (Stundenplan) -------------------------------------- */

.timetable {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border: 0.3mm solid var(--sheet-rule);
  border-radius: 1.6mm;
  overflow: hidden;
  min-height: 0;
}

.tt__head,
.tt__row {
  display: flex;
  align-items: stretch;
}

.tt__head {
  background: var(--sheet-primary);
  color: #fff;
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tt__head > * {
  padding: 2.2mm 2mm;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt-hour { flex: 0 0 20mm; }
.tt-day  { flex: 1 1 0; border-left: 0.25mm solid rgba(255, 255, 255, 0.3); }

.tt__row {
  flex: 1 1 0;
  min-height: 0;
  border-top: 0.25mm solid var(--sheet-rule-soft);
}

.tt__row > * {
  border-left: 0.25mm solid var(--sheet-rule-soft);
}

.tt__row > *:first-child { border-left: 0; }

/* Die Stundenspalte trägt Nummer und darunter eine Linie für die Uhrzeit —
   Schulen fangen unterschiedlich an, eine vorgedruckte Zeit wäre geraten. */
.tt__hour {
  flex: 0 0 20mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.8mm;
  padding: 1mm;
  background: var(--sheet-tint);
}

.tt__no {
  font-size: 9.5pt;
  font-weight: 700;
  color: var(--sheet-primary-dark);
  line-height: 1;
}

.tt__time {
  width: 15mm;
  height: 3mm;
  border-bottom: 0.25mm solid var(--sheet-rule);
}

.tt__cell { flex: 1 1 0; }

/* Keine vorgedruckten Pausenstreifen. Sie lagen zuerst fest nach der 2., 4.
   und 6. Stunde — das ist genauso geraten wie eine vorgedruckte Uhrzeit, denn
   an einer Schule liegt die grosse Pause nach der zweiten Stunde, an der
   nächsten nach der dritten, und Doppelstunden haben gar keine dazwischen.
   Wer eine Pause braucht, nimmt eine der zehn Zeilen dafür. */

/* --- H. Wochenzeilen (Ferienbetreuung) ----------------------------------- */
/* Eine Zeile pro Ferienwoche. Die Frage ist nie „was machen wir", sondern
   „wer hat frei" — deshalb steht die Person vor dem Programm. */

.weeks {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border: 0.3mm solid var(--sheet-rule);
  border-radius: 1.6mm;
  overflow: hidden;
  min-height: 0;
}

.weeks__head,
.wrow {
  display: flex;
  align-items: stretch;
}

.weeks__head {
  background: var(--sheet-primary);
  color: #fff;
  font-size: 6.8pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.weeks__head > * {
  padding: 1.9mm 2.5mm;
  display: flex;
  align-items: center;
}

.w-kw   { flex: 0 0 14mm; justify-content: center; }
.w-date { flex: 0 0 26mm; }
.w-who  { flex: 0 0 34mm; }
.w-what { flex: 1 1 auto; }
.w-ok   { flex: 0 0 16mm; justify-content: center; }

.wrow {
  flex: 1 1 0;
  min-height: 0;
  border-top: 0.25mm solid var(--sheet-rule-soft);
}

.wrow > * {
  display: flex;
  align-items: flex-end;
  padding: 0 2.5mm 1mm;
  border-right: 0.25mm solid var(--sheet-rule-soft);
}

.wrow > *:last-child { border-right: 0; }

.wrow .w-kw {
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
  background: var(--sheet-tint);
  font-size: 8pt;
  font-weight: 700;
  color: var(--sheet-primary-dark);
}

.wrow .w-ok {
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
}

/* --- I. Zwei Spalten für Ja/Nein (Babysitter) ---------------------------- */

/* Kein align-content hier: die eine Grid-Row muss auf die volle Blockhöhe
   gestreckt werden. Mit space-evenly behält die Row ihre Inhaltshöhe, die
   Zeilen darin kollabieren auf null und die Überschriften rutschen nach
   unten — genau so ist der Block beim ersten Rendern gebrochen. */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 6mm;
  flex: 1 1 auto;
  padding: 0.6mm 3mm 1.4mm;
  min-height: 0;
}

.duo__col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.duo__t {
  font-size: 6.5pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sheet-ink-muted);
  padding-bottom: 0.6mm;
}

/* --- Fuß: App-Bridge + QR ------------------------------------------------ */

.sheet__foot {
  display: flex;
  align-items: center;
  gap: 7mm;
  margin-top: 4mm;
  padding-top: 3.5mm;
  border-top: 0.3mm solid var(--sheet-rule-soft);
}

.bridge {
  flex: 1 1 auto;
}

.bridge__lead {
  margin: 0;
  font-size: 9pt;
  line-height: 1.45;
  color: var(--sheet-ink-soft);
}

.bridge__lead strong { color: var(--sheet-ink); }

.bridge__url {
  display: block;
  margin-top: 1.5mm;
  font-size: 9pt;
  font-weight: 700;
  color: var(--sheet-primary-dark);
  text-decoration: none;
}

.qr {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3mm;
}

.qr__img {
  display: block;
  width: 19mm;
  height: 19mm;
}

.qr__cap {
  font-size: 7.5pt;
  line-height: 1.35;
  font-weight: 700;
  color: var(--sheet-ink);
  max-width: 26mm;
}

.qr__cap span {
  display: block;
  font-weight: 600;
  color: var(--sheet-primary-dark);
}

/* --- Bildschirmvorschau -------------------------------------------------- */
/* Nur am Bildschirm: Blatt als schwebende Seite mit Druck-Button.
   Im Druck/PDF komplett unsichtbar. */

@media screen {
  body {
    padding: 24px 16px 64px;
  }

  .sheet {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    border-radius: 2px;
  }

  .previewbar {
    max-width: 210mm;
    margin: 0 auto 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .previewbar__note {
    font-family: var(--sheet-font);
    font-size: 13px;
    color: #4A5158;
  }

  .previewbar__note a { color: var(--sheet-primary-dark); }

  .previewbar__btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    font-family: var(--sheet-font);
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--sheet-primary);
    padding: 11px 20px;
    border-radius: 54px;
    box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.12);
  }

  .previewbar__btn:hover { background: var(--sheet-primary-dark); }

  .previewbar__btn:hover { background: var(--sheet-primary-dark); }
}

/* --- Mobile-Skalierung der Bildschirmvorschau ----------------------------
   .sheet ist fest in mm (A4) — das muss so bleiben, sonst weicht das PDF ab.
   Auf dem Bildschirm ragt das Blatt damit auf Telefonbreiten weit über den
   Viewport hinaus (210mm ≈ 794px). `zoom` skaliert Layout und Inhalt
   gemeinsam (anders als `transform`, das nur optisch verkleinert und darunter
   Leerraum in Originalgröße stehen lässt). Nur @media screen — @media print
   und damit das per Headless-Chrome erzeugte PDF bleiben unberührt.
   Bänder statt einer stetigen Funktion, weil `calc()` mit Längen-durch-Länge
   (für ein dimensionsloses vw-Verhältnis) nicht auf jedem Gerät zuverlässig
   ist. Jede Stufe ist für ihre schmalste Breite gerechnet (Rand 2 × 16px),
   nicht für die Medienquery-Grenze selbst — sonst reicht der Zoom am unteren
   Ende der Stufe nicht. ------------------------------------------------- */
@media screen and (max-width: 859px) and (min-width: 600px) { .sheet { zoom: 0.7; } }
@media screen and (max-width: 599px) and (min-width: 480px) { .sheet { zoom: 0.55; } }
@media screen and (max-width: 479px) and (min-width: 420px) { .sheet { zoom: 0.48; } }
@media screen and (max-width: 419px) and (min-width: 380px) { .sheet { zoom: 0.43; } }
@media screen and (max-width: 379px) and (min-width: 340px) { .sheet { zoom: 0.38; } }
@media screen and (max-width: 339px) { .sheet { zoom: 0.32; } }

@media print {
  body { background: #FFFFFF; padding: 0; }
  .previewbar { display: none !important; }
  .sheet { box-shadow: none; border-radius: 0; }
}