/* =========================================================
   liste.css: Vorfall-Liste: Vorlage am Bildschirm und auf Papier
   ========================================================= */

.liste__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-top: 1.75rem;
}
/* Der Knopf braucht JavaScript. Ohne bleibt der Hinweis auf den Druckdialog. */
.liste__print { display: none; }
.js .liste__print { display: inline-flex; }

/* --- Eingabe am Bildschirm ---
   Ohne JavaScript bleibt nur die leere Vorlage zum Ausdrucken. Die Felder
   steigen nicht unter 1rem, sonst zoomt Safari auf dem iPhone beim Tippen. */
.eintrag { display: none; }
.js .eintrag {
  display: grid;
  gap: 1rem 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
@media (min-width: 40rem) { .js .eintrag { grid-template-columns: 1fr 1fr; } }
.eintrag__title,
.eintrag__note,
.eintrag__field--wide,
.eintrag__actions,
.eintrag__status { grid-column: 1 / -1; }
.eintrag__title { font-size: clamp(1.25rem, 1.8vw, 1.55rem); }
.eintrag__note { max-width: var(--measure); color: var(--ink-2); }
.eintrag__field { display: grid; gap: .35rem; font-size: .9rem; color: var(--ink-2); }
.eintrag__field input,
.eintrag__field textarea {
  width: 100%;
  padding: .55rem .65rem;
  border: 1px solid var(--rule-mid);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.eintrag__field input:focus-visible,
.eintrag__field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.eintrag__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.eintrag__status { min-height: 1.5em; font-size: .9rem; color: var(--ink-2); }

/* --- Das Blatt --- */
.protokoll {
  margin-block: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--rule-mid);
  background: var(--paper);
}
.protokoll__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem 2rem;
  margin-bottom: 1rem;
}
.protokoll__title { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.protokoll__field { font-size: .8rem; color: var(--ink-2); }
.protokoll__blank {
  display: inline-block;
  width: 2.5rem;
  border-bottom: 1px solid var(--ink-3);
}

/* Sieben Spalten passen auf kein Telefon. Gescrollt wird nur das Blatt. */
.protokoll__scroll { overflow-x: auto; }
.protokoll__table {
  width: 100%;
  min-width: 48rem;
  border-collapse: collapse;
  table-layout: fixed;
}
.protokoll__table th,
.protokoll__table td {
  border: 1px solid var(--rule-mid);
  padding: .45rem .55rem;
  text-align: left;
  vertical-align: top;
  font-size: .9rem;
  line-height: 1.4;
}
.protokoll__table th {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-2);
}
.protokoll__table td { height: 4.25rem; color: var(--ink); }
.protokoll__example td { color: var(--ink-3); font-style: italic; }

.protokoll__col--nr       { width: 4%; }
.protokoll__col--datum    { width: 10%; }
.protokoll__col--ort      { width: 9%; }
.protokoll__col--wortlaut { width: 32%; }
.protokoll__col--dabei    { width: 13%; }
.protokoll__col--danach   { width: 18%; }
.protokoll__col--belege   { width: 14%; }

/* Wochennotiz: die beiden freien Spalten am Ende brauchen den meisten Platz. */
.protokoll__col--tag      { width: 6%; }
.protokoll__col--schlaf   { width: 13%; }
.protokoll__col--kraft    { width: 9%; }
.protokoll__col--essen    { width: 14%; }
.protokoll__col--kontakt  { width: 16%; }
.protokoll__col--last     { width: 21%; }
.protokoll__col--gut      { width: 21%; }
.protokoll__blank--date { width: 8rem; }

/* --- Druck ---
   Auf Papier steht nur das Blatt: kein Seitenname, kein Thema, kein Menü.
   Wer die Liste findet, sieht eine Tabelle, keine Website über Narzissmus. */
@page {
  size: A4 landscape;
  margin: 12mm;
}

@media print {
  /* Auch im Dunkelmodus schwarz auf weiß, sonst druckt der Browser
     helle Linien auf weißes Papier. */
  :root {
    --paper: #fff;
    --ink: #000;
    --ink-2: #222;
    --ink-3: #555;
    --rule-mid: #000;
  }

  .site-head,
  .site-foot,
  .skip-link,
  .liste__text,
  .protokoll__example { display: none; }

  body { background: #fff; font-size: 10pt; }
  .legal { padding: 0; }
  .sheet { max-width: none; padding-inline: 0; }

  .protokoll { margin: 0; padding: 0; border: 0; }
  .protokoll__title { font-size: 14pt; }
  .protokoll__scroll { overflow: visible; }
  .protokoll__table { min-width: 0; }
  .protokoll__table th { font-size: 7pt; }
  .protokoll__table td { height: 16mm; font-size: 9pt; }
  .protokoll__table tr { break-inside: avoid; }
}