/* Druck-Stylesheet des Logbuchs. Masse in mm/pt; die Seitengrösse setzt render.js in #page-size. */

@font-face { font-family: 'Source Sans 3'; font-weight: 300; font-style: normal; font-display: block; src: url(fonts/SourceSans3-Light.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-style: normal; font-display: block; src: url(fonts/SourceSans3-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 600; font-style: normal; font-display: block; src: url(fonts/SourceSans3-Semibold.woff2) format('woff2'); }

html, body { margin: 0; padding: 0; background: #fff; }
/* Im Browser (Vorschau, «Blick ins Buch», die Ansicht eines Logbuchs) nimmt das den Doppeltipp-Zoom: Man blättert mit
   dem Finger und zoomte dabei versehentlich die Seite. Kneifen und Scrollen bleiben. Fürs Drucken bedeutungslos –
   touch-action zeichnet nichts. Dieselbe Regel steht in konfigurator.css, für die Seite um das iframe herum. */
html { touch-action: manipulation; }
body {
  font-family: 'Source Sans 3', sans-serif;
  font-variant-numeric: tabular-nums;
  color: #000;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Eine Seite = Endformat + Beschnitt, Inhalt in .sheet mit gespiegelten Rändern */
section.page { box-sizing: border-box; overflow: hidden; position: relative; background: #fff; break-after: page; page-break-after: always; }
section.page:last-child { break-after: auto; page-break-after: auto; }
.sheet { width: 100%; height: 100%; box-sizing: border-box; position: relative; }

/* Kolumnentitel: Name des Pferds im oberen Rand (render.js runningHead) */
.running { position: absolute; line-height: 1; font-weight: 600; letter-spacing: 0.04em; color: #404040; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Heft: ein Blatt mit zwei Seiten, zum Falz in der Mitte hin ausgerichtet */
section.page.imposed { display: flex; }
.half { height: 100%; display: flex; overflow: hidden; }
.half-left { justify-content: flex-end; }
.half-right { justify-content: flex-start; }
.leaf { box-sizing: border-box; overflow: hidden; position: relative; background: #fff; flex: none; }
.sheet-mark { position: absolute; font-size: 5pt; letter-spacing: 0.05em; color: #8a8a8a; white-space: nowrap; }

.cropmarks { position: absolute; inset: 0; pointer-events: none; z-index: 2; }  /* über einem randlosen Umschlagfoto */
.mark { position: absolute; }
.mark-h { border-top: 0.25pt solid #000; }
.mark-v { border-left: 0.25pt solid #000; }

.col { height: 100%; display: flex; flex-direction: column; }
.lbl { font-size: 7pt; letter-spacing: 0.1em; text-transform: uppercase; }
.line { box-sizing: border-box; }
.line-top { border-top: 0.3pt solid #c4c4c4; }
.line-bottom { border-bottom: 0.3pt solid #c4c4c4; }
.rule { border-top: 0.7pt solid #000; }

/* Wochenkopf (linke Seite) */
.weekhead { box-sizing: border-box; display: flex; flex-direction: column; }
.weekhead-row { box-sizing: border-box; display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 1.6mm; }
.kw { font-size: 24pt; font-weight: 300; line-height: 1; margin-top: -0.10em; }
.month { text-align: right; line-height: 1.3; }
.month-title { font-size: 14pt; line-height: 1; margin-top: -0.27mm; }
.span { font-size: 9pt; }
.notes { flex: 1; position: relative; }
.notes-lbl { position: absolute; top: 1mm; left: 0; }

/* Tagesblock */
.day { box-sizing: border-box; border-top: 0.7pt solid #000; display: flex; flex-direction: column; }
.dayhead { box-sizing: border-box; display: flex; align-items: center; gap: var(--dayhead-gap, 3mm); line-height: 1; font-size: 9pt; white-space: nowrap; }
.date { display: flex; align-items: baseline; gap: 1.8mm; flex: none; }
.wd { font-weight: 600; }
.fields { display: flex; align-items: center; gap: var(--dayhead-gap, 3mm); }
/* Kürzel als Unterschriftsfeld: volle Höhe der Kopfzeile, Linie links und rechts (oben und unten schliessen die
   Tageslinie und die Medikamentenzeile), das Wort hellgrau zum Überschreiben */
.sign { align-self: stretch; flex: none; margin-left: auto; width: var(--sign-w, 11mm); box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  border-left: 0.4pt solid #000; border-right: 0.4pt solid #000; color: #c4c4c4; }
.husten { display: flex; align-items: center; gap: 0.8mm; }
/* frei wählbare Texte der Tageszeile: render.js (fitDayHeader) verkleinert sie, bis die Zeile passt */
.tracker-name, .ctx-day .chk { font-size: var(--free-text-size, inherit); }
.husten .h { display: inline-block; width: var(--scale-cell, 4.6mm); text-align: center; font-size: 10pt; }
.ctx { display: flex; align-items: center; gap: 2.2mm; }
.ctx-day { gap: var(--ctx-gap, 2.2mm); }
.chk { display: flex; align-items: center; gap: 0.9mm; }
.box { display: inline-block; width: 3.5mm; height: 3.5mm; box-sizing: border-box; border: 0.45pt solid #000; }
.medrow { box-sizing: border-box; border-top: 0.4pt solid #000; border-bottom: 0.4pt solid #000; display: flex; align-items: center; gap: 3mm; font-size: 9pt; line-height: 1; white-space: nowrap; }
/* keine Medikamenten-/Temperaturzeile: nur der Strich unter dem Tageskopf */
.medrow-off { border-top: 0.4pt solid #000; }
/* Futterzeile: wie die Medikamentenzeile eine Schreiblinie hoch; render.js (fitDayHeader) passt lange Namen ein */
.feedrow { box-sizing: border-box; border-bottom: 0.4pt solid #000; display: flex; align-items: center; gap: var(--feed-gap, 3mm); font-size: 9pt; line-height: 1; white-space: nowrap; }
.feed-title { flex: none; width: 14mm; }
.ctx-feed { gap: var(--feed-gap, 3mm); }
.ctx-feed .chk { font-size: var(--feed-size, inherit); }
.med { display: flex; align-items: center; flex: none; }
.dosis { display: flex; align-items: center; flex: 1; }
.temp { display: flex; align-items: center; gap: 0.9mm; width: 18mm; }
.temp .fill { flex: 1; }

/* Umschlag */
.cover { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5mm; }
.cover-name { font-size: 30pt; font-weight: 300; line-height: 1; max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.cover-rule { width: 24mm; border-top: 0.45pt solid #7a7a7a; }
.cover-label { font-size: 10pt; letter-spacing: 0.3em; text-transform: uppercase; }
.cover-year { font-size: 51pt; font-weight: 300; line-height: 1; letter-spacing: 0.03em; }   /* 68 pt bis 21.09.2026 */
.cover-period { font-size: 12pt; letter-spacing: 0.08em; }                                   /* 10 pt bis 21.09.2026 */
.cover-heft { font-size: 10pt; letter-spacing: 0.08em; padding-top: 4mm; }
/* Umschlag mit Foto (docs/product/umschlagbild-plan.md): das Foto liegt hinter allem, die Schrift auf einer weissen Fläche
   in der Mitte. Lage und Grösse des Fotos kommen aus dem Layout und stehen inline (coverBild in render.js). */
.cover.mit-bild { position: relative; }
/* Lage des Titels, vom Kunden gewählt (titelPosition); ohne Klasse in der Mitte */
.cover.titel-oben { justify-content: flex-start; }
.cover.titel-unten { justify-content: flex-end; }
.cover-bild { position: absolute; display: block; max-width: none; object-fit: cover; object-position: center; }
.cover-flaeche { position: relative; z-index: 1; box-sizing: border-box; width: 78%; max-width: 100%; padding: 9mm 7mm;
  background: #fff; display: flex; flex-direction: column; align-items: center; gap: 5mm; }
.cover-back { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 6mm; }
.cover-back-lbl { padding-bottom: 1mm; }
/* Marke unten auf der Rückseite (render.js, marke): Logo und Datum links, der QR-Code rechts, unten bündig.
   Grau und klein – ein Absender, keine Werbung. Der QR-Code bleibt schwarz: Grau scannt schlechter. */
.marke { display: flex; align-items: flex-end; justify-content: space-between; gap: 6mm; margin-top: 16mm; }
.marke-logo { display: flex; align-items: center; gap: 1.8mm; font-size: 12pt; line-height: 1; letter-spacing: 0.01em; color: #404040; }
.marke-logo img { display: block; width: 7.5mm; height: 7.5mm; }
.marke-fett { font-weight: 600; }
.marke-zeile { padding: 2.2mm 0 0 9.3mm; font-size: 7.5pt; line-height: 1.35; color: #6a6a6a; }
/* 22 mm samt dem weissen Rand in der Datei: Der Code hat 45 × 45 Module (die Adresse mit utm-Parametern), jedes
   rund 0,4 mm – feiner wird es auf einem Tintenstrahler und im Stallstaub unsicher. Der Rand (4 von 53 Modulen je
   Seite) ragt rechts und unten in den Seitenrand, damit der schwarze Code mit den Linien darüber abschliesst. */
.marke-qr { --qr: 22mm; display: block; flex: none; width: var(--qr); height: var(--qr);
  margin: 0 calc(var(--qr) * -4 / 53) calc(var(--qr) * -4 / 53) 0; }

/* Titelzeile der Formularseiten */
.title { box-sizing: border-box; display: flex; align-items: flex-end; padding-bottom: 2mm; font-size: 24pt; font-weight: 300; line-height: 1; }
.subtitle { font-size: 11.5pt; padding-bottom: 1mm; border-bottom: 0.45pt solid #7a7a7a; }

/* Steckbrief */
.fields-col { display: flex; flex-direction: column; gap: 4mm; padding-top: 3mm; }
.field-row { display: flex; gap: 8mm; }
.field { display: flex; flex-direction: column; gap: 1mm; }
.field-line { height: 9mm; box-sizing: border-box; border-bottom: 0.3pt solid #9a9a9a; }
.field-name { display: flex; align-items: flex-end; padding-bottom: 1.5mm; font-size: 13pt; white-space: nowrap; overflow: hidden; }
.field-unit { display: flex; align-items: flex-end; justify-content: flex-end; padding-bottom: 1.5mm; font-size: 8pt; }
.normalwerte { margin-top: 12mm; }
.normalwerte-row { padding-top: 4mm; }

/* Tabellen */
.scale { display: flex; flex-direction: column; padding: 2mm 0 6mm; }
.scale-row { height: 6.5mm; box-sizing: border-box; display: flex; align-items: center; gap: 3mm; border-bottom: 0.3pt solid #c4c4c4; font-size: 9.5pt; }
.scale-n { width: 6mm; text-align: center; font-weight: 600; }
.thead { box-sizing: border-box; display: flex; align-items: flex-end; border-bottom: 0.45pt solid #7a7a7a; padding-bottom: 1.2mm; }
.th { padding-left: 1.5mm; }
.trow { box-sizing: border-box; display: flex; border-bottom: 0.3pt solid #c4c4c4; }
.td { padding: 0 1.5mm; display: flex; align-items: center; font-size: 9.5pt; }

/* Futterplan */
.plan-valid { height: 9mm; box-sizing: border-box; display: flex; align-items: flex-end; gap: 3mm; padding-bottom: 1.5mm; }
.plan-valid-line { height: 6mm; width: 40mm; }
.plan-gap { height: 6mm; }

/* Jahresübersicht */
.jahr-title { justify-content: space-between; }
.jahr-h { font-size: 24pt; font-weight: 300; }
.jahr-sub { text-align: right; font-size: 9pt; font-weight: 400; line-height: 1.3; }
.jahr-months { height: 6mm; box-sizing: border-box; display: flex; align-items: flex-end; padding-bottom: 1mm; }
.jahr-month { flex: 1; text-align: center; }
.jahr-row { box-sizing: border-box; display: flex; }
.jahr-day { width: 8mm; display: flex; align-items: center; font-size: 7.5pt; }
.jahr-cell { flex: 1; box-sizing: border-box; border-right: 0.3pt solid #b0b0b0; border-bottom: 0.3pt solid #b0b0b0; }
/* Der Plan «Wer kommt wann» (render.js, planPage): je Monat ein Block aus Wochentag und drei Feldern; zwei Blöcke je
   Zeile mit einer Lücke dazwischen. Sa/So hell grau, Tage, die es nicht gibt, dunkler wie in der Jahresübersicht. */
.plan-row, .plan-teile { box-sizing: border-box; display: flex; }
.plan-monat { flex: 1; display: flex; min-width: 0; border-left: 0.3pt solid #b0b0b0; }
.plan-monat + .plan-monat { margin-left: 2mm; }
.plan-wd { width: 6mm; flex: none; box-sizing: border-box; display: flex; align-items: center; padding-left: 0.7mm; font-size: 6.5pt; border-right: 0.3pt solid #b0b0b0; border-bottom: 0.3pt solid #b0b0b0; }
.plan-cell { flex: 1; min-width: 0; box-sizing: border-box; border-right: 0.3pt solid #b0b0b0; border-bottom: 0.3pt solid #b0b0b0; }
.plan-kopf { border-left: none; }
.plan-kopf .plan-wd { border: none; }
.plan-kopf .plan-cell { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.6mm; font-size: 6pt; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; border-right: none; border-bottom: 0.3pt solid #b0b0b0; }
.plan-name { flex: 1; text-align: center; }
.plan-we .plan-wd { background: #e6e6e6; font-weight: 600; }
.plan-we .plan-cell { background: #f2f2f2; }
.plan-leer .plan-wd, .plan-leer .plan-cell { background: #d4d4d4; }

/* Notizseiten */
.notes-head { box-sizing: border-box; display: flex; align-items: flex-end; padding-bottom: 1.2mm; }

/* Noch nicht portierte Seitentypen */
.placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2mm; font-size: 9pt; text-align: center; }

/* Nur Bildschirm: Seiten als Blätter auf grauem Grund */
@media screen {
  body { background: #8a8a8a; padding: 10mm 0; }
  section.page { margin: 0 auto 10mm; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); }

  /* Vorschau im Konfigurator (?spread): Doppelseiten nebeneinander, Bund in der Mitte, transparenter Grund */
  html:has(body.spread) { background: transparent; }
  body.spread { background: transparent; padding: 6px 0 12px; }
  body.spread #pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 0; }
  /* Blättern: bis das Buch eingepasst und geprüft ist, unsichtbar (aber messbar); dann je eine Doppelseite */
  /* Seiten dürfen NICHT schrumpfen: eingepasst und geprüft wird an allen Seiten, in ihrer echten Breite */
  body.book #pages { visibility: hidden; }
  body.book section.page { flex: none; }
  body.book.book-ready #pages { visibility: visible; }
  body.book section.page[hidden], body.book .book-spacer[hidden] { display: none; }
  body.book .book-spacer { flex: none; }
  body.spread section.page { margin: 0; box-shadow: 0 1px 3px rgba(43, 36, 32, 0.25), 0 8px 24px rgba(43, 36, 32, 0.18); }
  body.spread section.page[data-side="verso"] { box-shadow: 0 1px 3px rgba(43, 36, 32, 0.25), 0 8px 24px rgba(43, 36, 32, 0.18), inset -6mm 0 8mm -8mm rgba(43, 36, 32, 0.35); }
  body.spread section.page[data-side="recto"] { box-shadow: 0 1px 3px rgba(43, 36, 32, 0.25), 0 8px 24px rgba(43, 36, 32, 0.18), inset 6mm 0 8mm -8mm rgba(43, 36, 32, 0.35); }
}