/* ==========================================================================
   Faxseite – gemeinsames Stilblatt (verbindliches Gestaltungsmuster)
   Leitidee: "Schlitz und Blatt". Alles, was ein Fax ist, liegt auf einem Blatt
   mit scharfen Ecken; alles, was man bedient, ist weich gerundet und ruhig.
   Keine fremden Quellen: Schrift, Symbole und Farben kommen von der Seite selbst.
   Aufbau: 1 Schrift · 2 Marken (Tokens) · 3 Grund · 4 Kopf · 5 Bedienteile
           6 Schlitz und Blatt · 7 Listen · 8 Seiten · 9 Druck · 10 Bewegung
   ========================================================================== */

/* 1 Schrift --------------------------------------------------------------- */
/* Abschaltbare Schicht: Block und Datei weglassen, dann greift der Systemstapel. */
@font-face {
  font-family: "Manrope";
  src: url("schrift/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* 2 Marken (Tokens) ------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Farben hell */
  --tisch: #eceef3;          /* Seitengrund: der Schreibtisch */
  --mulde: #dfe3ec;          /* vertiefte Flächen: Reiterleiste */
  --blatt: #ffffff;          /* Papier und Tafeln */
  --blatt-zart: #f4f5f9;     /* Zwischenzeilen, Felder im Blatt */
  --tinte: #131a2b;          /* Text */
  --tinte-leise: #4f586e;    /* Nebentext */
  --linie: #d5d9e4;          /* Haarlinien */
  --linie-stark: #7f889e;    /* Feldränder (mind. 3:1) */
  --akzent: #2a3cc7;         /* Durchschlagblau */
  --akzent-kraeftig: #1f2fa6;
  --akzent-auf: #ffffff;
  --akzent-zart: #e6e9fb;
  --gut: #0a6a42;
  --gut-zart: #ddf3e8;
  --schlecht: #b4231b;
  --schlecht-zart: #fce8e6;
  --laeuft: #7f4700;
  --laeuft-zart: #ffefd1;
  --schlitz: #131a2b;
  --schlitz-spalt: #000000;
  --schlitz-rand: #131a2b;
  --fokus: #2a3cc7;
  --schatten: 19 26 43;
  --microsoft-grund: #2f2f2f;
  --microsoft-text: #ffffff;

  /* Abstände (4er-Raster) */
  --a1: 4px;  --a2: 8px;  --a3: 12px; --a4: 16px;
  --a5: 24px; --a6: 32px; --a7: 48px; --a8: 64px;

  /* Rundungen: Papier scharf, Bedienung weich */
  --rund-blatt: 3px;
  --rund: 10px;
  --rund-tafel: 14px;

  /* Schrift */
  --schrift: "Manrope", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Roboto Mono", "Noto Sans Mono", "DejaVu Sans Mono", monospace;
  --gr-klein: 13px;
  --gr-text: 16px;
  --gr-titel: 28px;

  /* Maße */
  --breite: 1120px;
  --feldhoehe: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tisch: #0c0f17;
    --mulde: #151926;
    --blatt: #181c29;
    --blatt-zart: #1f2433;
    --tinte: #e9ecf5;
    --tinte-leise: #a3acc2;
    --linie: #2a3144;
    --linie-stark: #6b7590;
    --akzent: #93a0ff;
    --akzent-kraeftig: #aeb8ff;
    --akzent-auf: #0c0f17;
    --akzent-zart: #222a52;
    --gut: #62d49c;
    --gut-zart: #11301f;
    --schlecht: #ff8f86;
    --schlecht-zart: #3b1715;
    --laeuft: #f3bc62;
    --laeuft-zart: #35280e;
    --schlitz: #353d56;       /* im Dunkeln heller als der Tisch, sonst verschwindet er */
    --schlitz-spalt: #000000;
    --schlitz-rand: #4d5674;
    --fokus: #93a0ff;
    --schatten: 0 0 0;
    --microsoft-grund: #ffffff;
    --microsoft-text: #2f2f2f;
  }
}

/* 3 Grund ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--tisch);
  color: var(--tinte);
  font: 400 var(--gr-text)/1.5 var(--schrift);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

h1 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h2 { font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }

a { color: var(--akzent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--akzent-kraeftig); }

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 4px;
}

.nur-vorleser {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sprung {
  position: absolute; left: var(--a4); top: -100px; z-index: 20;
  padding: var(--a2) var(--a4);
  background: var(--tinte); color: var(--blatt);
  border-radius: var(--rund); font-weight: 600; text-decoration: none;
}
.sprung:focus { top: var(--a2); color: var(--blatt); }

.zahl { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.leise { color: var(--tinte-leise); }
.klein { font-size: var(--gr-klein); }

.symbol { width: 20px; height: 20px; flex: none; }

[hidden] { display: none !important; }

/* Nur mit Skript sichtbar (z. B. Drucken-Knopf) */
html:not(.js) .js-nur { display: none; }

/* 4 Kopf ------------------------------------------------------------------ */
.kopf { border-bottom: 1px solid var(--linie); }

.kopf__innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--a3) var(--a4) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--a3) var(--a5);
}

/* Marke: Zeichen + "Fax · Kunde" + dezenter Betreuerhinweis */
.marke { display: flex; align-items: center; gap: var(--a3); color: var(--tinte); text-decoration: none; min-width: 0; max-width: 100%; }
.marke:hover { color: var(--tinte); }
.marke__zeichen { width: 30px; height: 30px; flex: none; }
.marke__zeichen .z-schlitz { fill: var(--schlitz); stroke: var(--schlitz-rand); stroke-width: 1; }
.marke__zeichen .z-blatt { fill: var(--blatt); stroke: var(--linie-stark); stroke-width: 1.5; }
.marke__zeichen .z-zeile { stroke: var(--akzent); stroke-width: 1.75; stroke-linecap: round; }
.marke__text { display: grid; line-height: 1.2; min-width: 0; }
.marke__name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marke__name b { font-weight: 800; }
.marke__punkt { color: var(--tinte-leise); font-weight: 400; margin: 0 2px; }
.marke__betreut { font-size: 12px; color: var(--tinte-leise); }

/* Angemeldeter Mitarbeiter */
.wer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a3);
  width: calc(100% + 2 * var(--a4));
  margin: 0 calc(-1 * var(--a4));
  padding: var(--a2) var(--a4);
  border-top: 1px solid var(--linie);
}
.wer__person { display: flex; align-items: center; gap: var(--a2); min-width: 0; }
.wer__bild {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--akzent-zart); color: var(--akzent);
  font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
}
.wer__text { display: grid; line-height: 1.25; min-width: 0; }
.wer__name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wer__stelle { font-size: 12px; color: var(--tinte-leise); white-space: nowrap; }
.wer form { margin: 0; flex: none; }

/* Reiter: am Handy feste Leiste unten, am Schreibtisch Mulde im Kopf */
.reiter {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 0 var(--a2) env(safe-area-inset-bottom, 0);
  background: var(--blatt);
  border-top: 1px solid var(--linie);
}
.reiter__ziel {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 60px;
  color: var(--tinte-leise); text-decoration: none;
  font-size: 12px; font-weight: 600;
}
.reiter__ziel:hover { color: var(--tinte); }
.reiter__ziel .symbol { width: 22px; height: 22px; }
.reiter__ziel[aria-current="page"] { color: var(--tinte); font-weight: 800; }
/* Der aktive Reiter trägt einen kleinen Schlitz. */
.reiter__ziel[aria-current="page"]::before {
  content: ""; position: absolute; top: -3px; left: 50%;
  width: 36px; height: 6px; margin-left: -18px;
  border-radius: 3px; background: var(--schlitz);
  box-shadow: 0 0 0 1px var(--schlitz-rand);
}

/* Inhalt */
.inhalt {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--a5) var(--a4) var(--a6);
}
/* Seiten mit Reiterleiste lassen am Handy unten Platz, damit die Leiste nichts verdeckt. */
.mit-leiste { padding-bottom: calc(61px + env(safe-area-inset-bottom, 0px)); }
.inhalt--schmal { max-width: 760px; }

.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--a3) var(--a5); margin-bottom: var(--a5); }
.seitenkopf__text { display: grid; gap: var(--a1); min-width: 0; }
.seitenkopf__neben { color: var(--tinte-leise); font-size: 15px; }
.seitenkopf__taten { display: flex; flex-wrap: wrap; gap: var(--a2); }

.zurueck { display: inline-flex; align-items: center; gap: var(--a1); margin-bottom: var(--a3); font-size: 14px; font-weight: 600; text-decoration: none; min-height: 32px; }
.zurueck:hover { text-decoration: underline; }

.fuss {
  max-width: var(--breite); width: 100%; margin: 0 auto;
  padding: 0 var(--a4) var(--a5);
  font-size: 12px; color: var(--tinte-leise);
}
.fuss a { color: inherit; }

/* 5 Bedienteile ----------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a2);
  min-height: var(--feldhoehe);
  padding: 0 20px;
  border: 1.5px solid transparent; border-radius: var(--rund);
  background: transparent; color: var(--tinte);
  font: 700 16px/1.2 var(--schrift);
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .08s;
}
.knopf:active { transform: translateY(1px); }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .6; cursor: progress; }

.knopf--haupt { background: var(--akzent); color: var(--akzent-auf); }
.knopf--haupt:hover { background: var(--akzent-kraeftig); color: var(--akzent-auf); }
.knopf--zart { background: var(--akzent-zart); color: var(--akzent); }
.knopf--zart:hover { border-color: var(--akzent); color: var(--akzent); }
.knopf--leise { border-color: var(--linie-stark); background: var(--blatt); color: var(--tinte); }
.knopf--leise:hover { border-color: var(--tinte); color: var(--tinte); }
.knopf--klein { min-height: 36px; padding: 0 var(--a3); font-size: 14px; white-space: nowrap; }
.knopf--klein .symbol { width: 18px; height: 18px; }
.knopf--gross { min-height: 56px; font-size: 17px; }
.knopf--breit { width: 100%; }

/* Microsoft-Anmeldung: Zeichen unverändert, Knopf dunkel (hell) bzw. weiß (dunkel) */
.knopf--microsoft { background: var(--microsoft-grund); color: var(--microsoft-text); border-color: var(--microsoft-grund); gap: var(--a3); }
.knopf--microsoft:hover { color: var(--microsoft-text); box-shadow: 0 6px 18px -8px rgb(var(--schatten) / .55); }
.knopf--microsoft .microsoft-zeichen { width: 21px; height: 21px; flex: none; }

/* Felder */
.feld { display: grid; gap: 6px; }
.feld + .feld { margin-top: var(--a5); }
.feld__name { font-size: 14px; font-weight: 700; }
.feld__eingabe {
  width: 100%; min-height: var(--feldhoehe);
  padding: 0 14px;
  border: 1.5px solid var(--linie-stark); border-radius: var(--rund);
  background: var(--blatt); color: var(--tinte);
  font: 500 16px/1.2 var(--schrift);
}
.feld__eingabe::placeholder { color: var(--tinte-leise); opacity: 1; }
.feld__eingabe:hover { border-color: var(--tinte); }
.feld__eingabe:focus-visible { outline-offset: 1px; border-color: var(--fokus); border-radius: var(--rund); }
.feld__eingabe--nummer { font: 600 19px/1.2 var(--mono); letter-spacing: 0.04em; min-height: 56px; }
.feld__eingabe--nummer::placeholder { font-weight: 400; }
.feld__hinweis { font-size: var(--gr-klein); color: var(--tinte-leise); }
.feld__fehler { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; font-weight: 600; color: var(--schlecht); overflow-wrap: anywhere; }
.feld__fehler .symbol { width: 18px; height: 18px; margin-top: 1px; }
.feld--fehler .feld__eingabe { border-color: var(--schlecht); border-width: 2px; }

/* Auswahlfeld mit eigenem Pfeil */
.feld__wahl { position: relative; }
.feld__wahl select { appearance: none; -webkit-appearance: none; padding-right: 44px; text-overflow: ellipsis; cursor: pointer; }
.feld__wahl .symbol { position: absolute; right: 14px; top: 50%; margin-top: -10px; pointer-events: none; color: var(--tinte-leise); }

/* Aufklapper (Rückfallweg, gesperrte Bereiche) */
.klappe > summary {
  display: flex; align-items: center; gap: var(--a2);
  min-height: 44px;
  font-size: 14px; font-weight: 600; color: var(--tinte-leise);
  cursor: pointer; list-style: none; border-radius: var(--rund);
}
.klappe > summary::-webkit-details-marker { display: none; }
.klappe > summary:hover { color: var(--tinte); }
.klappe > summary .symbol { width: 18px; height: 18px; transition: transform .15s; }
.klappe[open] > summary .symbol { transform: rotate(90deg); }
.klappe__inhalt { padding: var(--a2) 0 var(--a2); font-size: 14px; color: var(--tinte-leise); }

/* Meldungen */
.meldung {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--a3);
  padding: var(--a3) var(--a4);
  border: 1.5px solid var(--linie-stark); border-radius: var(--rund);
  background: var(--blatt-zart); color: var(--tinte);
  font-size: 15px; overflow-wrap: anywhere;
}
.meldung .symbol { margin-top: 1px; }
.meldung__titel { font-weight: 700; }
.meldung--fehler { border-color: var(--schlecht); background: var(--schlecht-zart); }
.meldung--fehler .symbol, .meldung--fehler .meldung__titel { color: var(--schlecht); }
.meldung--gut { border-color: var(--gut); background: var(--gut-zart); }
.meldung--gut .symbol, .meldung--gut .meldung__titel { color: var(--gut); }
.meldung + * { margin-top: var(--a5); }

/* Stempel: kleine Statusmarke; groß und schräg nur auf dem Sendebericht */
.stempel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px 1px;
  border: 1.5px solid currentColor; border-radius: 4px;
  font: 700 12px/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.stempel--gut { color: var(--gut); background: var(--gut-zart); }
.stempel--schlecht { color: var(--schlecht); background: var(--schlecht-zart); }
.stempel--laeuft { color: var(--laeuft); background: var(--laeuft-zart); }
.stempel--laeuft::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: puls 1.2s ease-in-out infinite;
}
.stempel--gross {
  padding: 9px 18px 7px;
  border-width: 3px; border-radius: 7px;
  font-size: 21px; letter-spacing: 0.14em;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--blatt), inset 0 0 0 3.5px currentColor;
  transform: rotate(-5deg);
  /* Zwei Wörter stehen untereinander ("NICHT / GESENDET") – so bleibt der Stempel schmal. */
  display: inline-block; width: min-content; white-space: normal; text-align: center; line-height: 1.25;
}

/* Fortschritt eines laufenden Faxes: vorbereiten · wählen · senden */
.schritte { display: inline-flex; gap: 3px; vertical-align: middle; }
.schritte__teil { width: 16px; height: 4px; border-radius: 2px; background: var(--linie); }
.schritte__teil--fertig { background: var(--laeuft); }
.schritte__teil--jetzt { background: var(--laeuft); animation: puls 1.2s ease-in-out infinite; }

/* Filter (mehrere Faxnummern) */
.filter { display: flex; flex-wrap: wrap; gap: var(--a2); margin-bottom: var(--a4); }
.filter__ziel {
  display: inline-flex; flex-wrap: wrap; align-items: center; min-height: 36px; max-width: 100%; padding: 5px 14px;
  border: 1.5px solid var(--linie-stark); border-radius: 18px; overflow-wrap: anywhere;
  color: var(--tinte); font-size: 14px; font-weight: 600; text-decoration: none;
}
.filter__nummer { margin-left: var(--a2); font-weight: 500; white-space: nowrap; }
.filter__ziel:hover { border-color: var(--tinte); color: var(--tinte); }
.filter__ziel[aria-current="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--tisch); }

/* 6 Schlitz und Blatt ----------------------------------------------------- */
.schacht { position: relative; padding: 9px var(--a4) 0; }
.schlitz {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  height: 18px; border-radius: 9px;
  background: var(--schlitz);
  box-shadow: 0 0 0 1px var(--schlitz-rand), 0 6px 14px -6px rgb(var(--schatten) / .45);
}
.schlitz::after {
  content: ""; position: absolute; left: 12px; right: 12px; top: 7px; height: 4px;
  border-radius: 2px; background: var(--schlitz-spalt);
}
/* Die Bahn schneidet oben am Schlitz ab, lässt unten Platz für den Schatten. */
.schacht__bahn { overflow: hidden; margin: 0 -24px -48px; padding: 0 24px 48px; }

.blatt {
  position: relative;
  background: var(--blatt);
  border-radius: 0 0 var(--rund-blatt) var(--rund-blatt);
  box-shadow: 0 0 0 1px var(--linie), 0 22px 44px -22px rgb(var(--schatten) / .38);
}
/* Schatten des Schlitzes auf dem Papier */
.schacht .blatt::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; z-index: 1;
  background: linear-gradient(rgb(var(--schatten) / .16), transparent);
  pointer-events: none;
}
.blatt--frei { border-radius: var(--rund-blatt); }

/* Kennzeile: die Kopfzeile, die jedes Fax oben trägt */
.kennzeile {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--a4);
  padding: 26px 20px 10px;
  border-bottom: 1px dashed var(--linie-stark);
  font: 500 12px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tinte-leise); overflow-wrap: anywhere;
}
.kennzeile b { font-weight: 700; color: var(--tinte); overflow-wrap: anywhere; }
.blatt--frei .kennzeile { padding-top: 16px; }

.blatt__inhalt { padding: var(--a5) 20px var(--a5); }

/* Ablage: das Blatt ist die Fläche fürs PDF */
.blatt--ablage:focus-within { outline: 3px solid var(--fokus); outline-offset: 3px; }
.blatt__feld {
  position: relative;
  display: grid; place-items: center; align-content: center; gap: var(--a2);
  min-height: 190px;
  margin: var(--a4);
  padding: var(--a5) var(--a4);
  border: 1.5px dashed var(--linie-stark); border-radius: var(--rund);
  text-align: center;
  transition: background-color .15s, border-color .15s;
}
.blatt__feld > .symbol { width: 36px; height: 36px; color: var(--akzent); }
.blatt__titel { font-size: 17px; font-weight: 700; }
.blatt__neben { font-size: 14px; color: var(--tinte-leise); }
.blatt__wahl { margin-top: var(--a2); pointer-events: none; }
.blatt__datei {
  display: block; width: 100%; max-width: 320px; margin-top: var(--a2);
  font: 500 14px/1.3 var(--schrift); color: var(--tinte);
}
.blatt__datei::file-selector-button {
  min-height: 40px; margin-right: var(--a3); padding: 0 14px;
  border: 1.5px solid var(--linie-stark); border-radius: var(--rund);
  background: var(--blatt); color: var(--tinte);
  font: 700 14px/1.2 var(--schrift); cursor: pointer;
}
/* Ohne Skript bleibt das echte Dateifeld sichtbar; mit Skript liegt es unsichtbar über der ganzen Fläche. */
.blatt__wahl { display: none; }
.js .blatt__wahl { display: inline-flex; }
.js .blatt__datei {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; max-width: none; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.blatt__feld:hover { border-color: var(--akzent); }
.blatt--ziel .blatt__feld { border-color: var(--akzent); border-style: solid; background: var(--akzent-zart); }

.blatt__gewaehlt { display: none; }
.blatt--belegt .blatt__leer { display: none; }
.blatt--belegt .blatt__gewaehlt { display: grid; justify-items: center; gap: var(--a1); max-width: 100%; }
.blatt--belegt .blatt__feld { border-style: solid; border-color: var(--akzent); background: var(--akzent-zart); }
.blatt__leer { display: grid; justify-items: center; gap: var(--a1); max-width: 100%; }
.blatt__dateiname { max-width: 100%; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.blatt__wechsel { margin-top: var(--a2); font-size: 14px; font-weight: 600; color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; }

.blatt--fehler .blatt__feld { border-color: var(--schlecht); border-style: solid; border-width: 2px; }
.blatt__fehler { margin: calc(-1 * var(--a1)) var(--a4) 0; padding-bottom: var(--a4); }

.nur-schreibtisch { display: none; }

/* Beim Absenden zieht der Schlitz das Blatt ein (Skript setzt die Klasse). */
.blatt--zieht-ein { animation: blatt-rein .7s cubic-bezier(.5, 0, .7, .4) forwards; }
/* Auf der Anmeldeseite kommt das Blatt aus dem Schlitz. */
.blatt--kommt { animation: blatt-raus .6s cubic-bezier(.2, .7, .2, 1) both; }

/* Leerzustand: leerer Schlitz mit gestricheltem Blattumriss */
.leer { display: grid; justify-items: center; gap: var(--a3); padding: var(--a7) var(--a4); text-align: center; }
.leer__bild { position: relative; width: 150px; padding-top: 7px; margin-bottom: var(--a3); }
.leer__bild .schlitz { height: 14px; border-radius: 7px; }
.leer__bild .schlitz::after { top: 5px; left: 9px; right: 9px; }
.leer__umriss { height: 96px; margin: 0 14px; border: 1.5px dashed var(--linie-stark); border-top: 0; border-radius: 0 0 var(--rund-blatt) var(--rund-blatt); }
.leer__titel { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.leer__text { max-width: 44ch; color: var(--tinte-leise); }
.leer .knopf { margin-top: var(--a2); }

/* 7 Listen ---------------------------------------------------------------- */
.tafel {
  background: var(--blatt);
  border: 1px solid var(--linie); border-radius: var(--rund-tafel);
  overflow: hidden;
}
.tafel__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--a1) var(--a4); padding: var(--a4) var(--a4) var(--a3); }
.tafel__neben { font-size: var(--gr-klein); color: var(--tinte-leise); }
.tafel__fuss { padding: var(--a3) var(--a4); border-top: 1px solid var(--linie); font-size: 14px; font-weight: 600; }

.tag {
  padding: var(--a2) var(--a4);
  border-top: 1px solid var(--linie);
  background: var(--blatt-zart);
  font: 700 12px/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tinte-leise);
}
.tafel > .tag:first-child { border-top: 0; }

.zeile {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas:
    "seiten wer   zeit"
    "seiten neben neben"
    "seiten stand stand"
    "seiten tat   tat";
  gap: 2px var(--a3);
  align-items: center;
  padding: var(--a3) var(--a4);
  border-top: 1px solid var(--linie);
}
.zeile__seiten { grid-area: seiten; align-self: start; padding-top: 2px; }
.zeile__zeit { grid-area: zeit; justify-self: end; font: 500 14px/1.4 var(--mono); color: var(--tinte-leise); white-space: nowrap; }
.zeile__datum { font-size: 12px; }
.zeile__wer { grid-area: wer; font: 600 16px/1.4 var(--mono); letter-spacing: 0.02em; overflow-wrap: anywhere; }
.zeile__ohne { font: 600 15px/1.4 var(--schrift); letter-spacing: 0; color: var(--tinte-leise); }
.zeile__neben { grid-area: neben; font-size: 14px; color: var(--tinte-leise); overflow-wrap: anywhere; }
.zeile__stand { grid-area: stand; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--a2); font-size: var(--gr-klein); color: var(--tinte-leise); }
.zeile__stand:empty, .zeile__tat:empty { display: none; }
.zeile__stand { margin-top: 6px; }
.zeile__grund { flex-basis: 100%; overflow-wrap: anywhere; }
.zeile__tat { grid-area: tat; margin-top: var(--a2); }
.zeile--schlecht .zeile__wer { color: var(--tinte); }

/* Seiten-Zeichen: kleines Blatt mit der Seitenzahl */
.seiten {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 30px; height: 38px;
  border: 1.5px solid var(--linie-stark); border-radius: 2px 9px 2px 2px;
  background: var(--blatt);
  font: 700 13px/1 var(--mono); color: var(--tinte);
}
.seiten--mehr { box-shadow: 3px 3px 0 -0.5px var(--blatt), 3px 3px 0 1px var(--linie-stark); }
.seiten--leer { border-style: dashed; color: var(--tinte-leise); }
.seiten--schlecht { border-color: var(--schlecht); color: var(--schlecht); }
.seiten--zieht::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--akzent);
  animation: abtasten 1.6s linear infinite;
}

/* 8 Seiten ---------------------------------------------------------------- */
/* Anmeldung */
.anmeldung { flex: 1 0 auto; display: grid; place-items: center; padding: var(--a6) var(--a4) var(--a7); }
.anmeldung__spalte { width: 100%; max-width: 472px; display: grid; gap: var(--a5); }
.anmeldung .marke { justify-self: center; }
.anmeldung .marke__name { font-size: 21px; }
.anmeldung .marke__zeichen { width: 38px; height: 38px; }
.anmeldung .blatt__inhalt { padding: var(--a5) 20px var(--a4); }
.anmeldung h1 { margin-bottom: var(--a1); }
.anmeldung__text { color: var(--tinte-leise); margin-bottom: var(--a5); }
.anmeldung .meldung { margin-bottom: var(--a5); }
.anmeldung .klappe { margin-top: var(--a3); border-top: 1px solid var(--linie); padding-top: var(--a1); }
.anmeldung .klappe__inhalt { padding-top: var(--a1); }
.anmeldung .klappe__inhalt .knopf { margin-top: var(--a5); }
.anmeldung__fuss { text-align: center; font-size: 12px; color: var(--tinte-leise); }
.anmeldung__duo { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--a3); }
.anmeldung__duo .feld + .feld { margin-top: 0; }
.anmeldung__direkt .knopf { margin-top: var(--a5); }
.anmeldung form > .feld__hinweis { margin-top: var(--a3); text-align: center; }

/* Senden */
.senden { display: grid; gap: var(--a5); }
.senden__felder { display: grid; align-content: start; }
.senden__los { margin-top: var(--a5); display: grid; gap: var(--a2); }
.senden + .tafel, .senden + .leer { margin-top: var(--a6); }

/* Sendebericht */
.bericht { display: grid; gap: var(--a5); }
.bericht .blatt__inhalt { padding: var(--a5) 20px var(--a6); }
.bericht__kopf { display: grid; gap: var(--a3); justify-items: start; margin-bottom: var(--a5); }
.bericht__kopf .stempel--gross { margin: var(--a2) 0 var(--a1) 2px; transform-origin: left center; }
.bericht__satz { color: var(--tinte-leise); max-width: 46ch; }
.angaben { display: grid; gap: var(--a3); }
.angaben__paar { display: grid; gap: 2px; padding-top: var(--a3); border-top: 1px solid var(--linie); }
.angaben dt { font-size: var(--gr-klein); color: var(--tinte-leise); }
.angaben dd { font-weight: 600; overflow-wrap: anywhere; }
.bericht__fuss { margin-top: var(--a5); padding-top: var(--a3); border-top: 1px dashed var(--linie-stark); font: 500 12px/1.5 var(--mono); letter-spacing: 0.04em; color: var(--tinte-leise); overflow-wrap: anywhere; }
.bericht__taten { display: grid; gap: var(--a2); }

/* Ab Schreibtischbreite ---------------------------------------------------- */
@media (min-width: 760px) {
  h1 { font-size: var(--gr-titel); }

  .kopf__innen { flex-wrap: nowrap; padding: var(--a3) var(--a5); min-height: 68px; }
  .wer { width: auto; margin: 0; padding: 0; border-top: 0; justify-content: flex-end; flex: 0 1 auto; gap: var(--a4); }
  .wer__name { max-width: 200px; }

  .reiter {
    position: static; display: inline-flex; gap: 2px;
    padding: 4px; border: 0; border-radius: 999px;
    background: var(--mulde);
  }
  .reiter__ziel { flex-direction: row; gap: var(--a2); min-height: 40px; padding: 0 18px; border-radius: 999px; font-size: 15px; }
  .reiter__ziel .symbol { width: 18px; height: 18px; }
  .reiter__ziel[aria-current="page"] { background: var(--blatt); font-weight: 700; box-shadow: 0 1px 2px rgb(var(--schatten) / .16); }
  .reiter__ziel[aria-current="page"]::before { top: auto; bottom: -9px; width: 28px; height: 5px; margin-left: -14px; }

  .inhalt { padding: var(--a6) var(--a5) var(--a7); }
  .fuss { padding: 0 var(--a5) var(--a5); }
  .mit-leiste { padding-bottom: 0; }

  .nur-schreibtisch { display: inline; }
  .nur-handy { display: none; }

  .anmeldung { padding-top: var(--a7); }
  .anmeldung .blatt__inhalt { padding: var(--a6) var(--a6) var(--a5); }
  .anmeldung .kennzeile { padding-left: var(--a6); padding-right: var(--a6); }
  .anmeldung h1 { font-size: 30px; }

  .senden { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--a7); align-items: start; }
  .senden__felder { max-width: 520px; padding-top: 9px; }
  .senden__los { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--a4); }
  .blatt__feld { min-height: 260px; }
  .senden + .tafel, .senden + .leer { margin-top: var(--a7); }

  .tafel__kopf { padding: 20px var(--a5) var(--a3); }
  .tafel__fuss, .tag { padding-left: var(--a5); padding-right: var(--a5); }
  .zeile {
    grid-template-columns: 40px 64px minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.7fr) 148px;
    grid-template-areas: "seiten zeit wer neben stand tat";
    gap: var(--a4);
    padding: 14px var(--a5);
  }
  .zeile__seiten { align-self: center; padding-top: 0; }
  .zeile__zeit { justify-self: start; font-size: 15px; }
  .zeile__datum { display: block; }
  .zeile__stand, .zeile__tat { margin-top: 0; }
  .zeile__stand:empty, .zeile__tat:empty { display: flex; }
  .zeile__tat { justify-self: end; }

  .bericht { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: var(--a6); align-items: start; }
  .bericht .blatt__inhalt { padding: var(--a6) var(--a7) var(--a7); }
  .bericht .kennzeile { padding-left: var(--a7); padding-right: var(--a7); }
  .bericht__kopf { position: relative; padding-right: 220px; min-height: 76px; }
  .bericht__kopf .stempel--gross { position: absolute; right: 0; top: 6px; margin: 0; transform-origin: center; }
  .angaben__paar { grid-template-columns: 160px minmax(0, 1fr); gap: var(--a4); align-items: baseline; }
  .bericht__taten { max-width: 280px; }
}

/* 9 Druck ----------------------------------------------------------------- */
@media print {
  :root {
    color-scheme: light;
    --tisch: #ffffff; --blatt: #ffffff; --blatt-zart: #ffffff; --tinte: #000000; --tinte-leise: #333333;
    --linie: #999999; --linie-stark: #555555; --gut: #0a6a42; --schlecht: #b4231b; --laeuft: #7f4700;
    --gut-zart: #ffffff; --schlecht-zart: #ffffff; --laeuft-zart: #ffffff;
  }
  body { display: block; background: #ffffff; }
  .kopf, .reiter, .fuss, .sprung, .zurueck, .seitenkopf, .bericht__taten, .musterband { display: none !important; }
  .inhalt { max-width: none; padding: 0; }
  .bericht { display: block; }
  .blatt { box-shadow: none; }
  a { color: inherit; text-decoration: none; }
  /* Ein A4-Blatt ist schmaler als der Umbruch bei 760 px: die Schreibtisch-Anordnung des Berichts gilt auch im Druck. */
  .bericht .blatt__inhalt { padding: var(--a5) 0 0; }
  .bericht .kennzeile { padding-left: 0; padding-right: 0; }
  .bericht__kopf { position: relative; padding-right: 220px; min-height: 76px; }
  .bericht__kopf .stempel--gross { position: absolute; right: 0; top: 6px; margin: 0; transform-origin: center; }
  .angaben__paar { grid-template-columns: 160px minmax(0, 1fr); gap: var(--a4); align-items: baseline; }
}

/* 10 Bewegung ------------------------------------------------------------- */
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes abtasten { from { transform: translateY(0); } to { transform: translateY(38px); } }
@keyframes blatt-raus { from { transform: translateY(-36px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes blatt-rein { to { transform: translateY(-105%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}