@import 'tailwindcss';
@import './fonts.css';

/* ---------------------------------------------------------------------------
   Design-Tokens. Fachliche Grundlage: docs/10-design-system.md.
   Bezugspunkt ist eine Registratur im Nachtdienst: lackierter Stahl,
   Aktenpapier, Stempelfarbe. Die einzige Farbe kommt von der Klassifizierung.
   --------------------------------------------------------------------------- */

@theme {
  /* Grundpalette, dunkel ist der Auslieferungszustand */
  --color-ink-900: #15181a; /* Grundflaeche, kuehles Anthrazit, leicht gruenstichig */
  --color-ink-800: #1d2124; /* Panel */
  --color-ink-700: #262b2f; /* erhoehte Flaeche, Eingabefelder */
  --color-ink-500: #3a4147; /* Linien und Rahmen */
  --color-paper: #e4e7e4; /* Primaertext, papierfarbenes Off-White */
  --color-paper-dim: #939c99; /* Sekundaertext */
  --color-steel: #7a97a6; /* interaktiv: Links, Fokus, aktive Zustaende */

  /* Klassifizierungsfarben. Das einzige Buntsystem, nirgends sonst benutzt. */
  --color-stamp-0: #8a918d; /* Offen, Grau */
  --color-stamp-1: #6d8a9c; /* Intern, Stahlblau */
  --color-stamp-2: #4e8f72; /* Vertraulich, Gruenspan */
  --color-stamp-3: #b08637; /* Geheim, Messing */
  --color-stamp-4: #b4543c; /* Streng geheim, Oxidrot */
  --color-stamp-5: #7e5e96; /* Leitungssache, Tiefviolett */

  /* Semantische Ebene. Das helle Thema tauscht nur diese Werte. */
  --color-surface: var(--color-ink-900);
  --color-panel: var(--color-ink-800);
  --color-raised: var(--color-ink-700);
  --color-line: var(--color-ink-500);
  --color-text: var(--color-paper);
  --color-text-dim: var(--color-paper-dim);
  --color-accent: var(--color-steel);

  /* Schrift. IBM Plex, selbst gehostet, drei Rollen aus einer Familie. */
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-condensed: 'IBM Plex Sans Condensed', 'IBM Plex Sans', ui-sans-serif, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Skala 12 / 13 / 15 / 18 / 24 px */
  --text-2xs: 0.75rem; /* 12 */
  --text-xs: 0.8125rem; /* 13 */
  --text-sm: 0.9375rem; /* 15 */
  --text-base: 0.9375rem; /* 15, Fliesstext */
  --text-lg: 1.125rem; /* 18 */
  --text-xl: 1.5rem; /* 24 */

  --text-2xs--line-height: 1.4;
  --text-xs--line-height: 1.45;
  --text-sm--line-height: 1.6;
  --text-base--line-height: 1.6;
  --text-lg--line-height: 1.45;
  --text-xl--line-height: 1.3;

  /* Struktur: Flaechen bleiben eckig, Bedienelemente sind rund.
     Eine Akte ist ein Blatt und hat scharfe Kanten. Was man druecken oder
     ausfuellen kann, ist rund — daran erkennt man es, bevor man es beruehrt. */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-DEFAULT: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;
  /* Eingabefelder: weich gerundet. Ein mehrzeiliges Feld kann keine Pille sein. */
  --radius-field: 10px;
  /* Knoepfe, Suchbalken, Marken, Profilbild: voll gerundet. */
  --radius-control: 999px;

  /* Keine Schatten ausser dem Fokusring. */
  --shadow-sm: none;
  --shadow-DEFAULT: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* Zeilenlaenge hoechstens 72 Zeichen */
  --container-measure: 72ch;

  /* Die 3 px breite Klassifizierungskante links am Objekt */
  --spacing-edge: 3px;
}

/* Helles Thema.
 *
 * Es tauscht **nur die semantische Ebene**, nie die Grundpalette und nie die
 * Klassifizierungsfarben: eine Stufe muss in beiden Themen dieselbe Farbe
 * haben, sonst lernt man sie zweimal. Siehe docs/10-design-system.md.
 *
 * Kein warmes Cremeweiss, sondern ein leicht kühles Papierweiss — dieselbe
 * Anmutung wie das dunkle Thema, nur andersherum. Die Kontraste sind auf
 * mindestens 4,5:1 für Fliesstext ausgelegt. */
[data-theme='light'] {
  --color-surface: #eceeea;
  --color-panel: #e2e5e1;
  --color-raised: #f7f8f5;
  --color-line: #b0b6ae;
  --color-text: #1b1f21;
  --color-text-dim: #4d5551;
  --color-accent: #35586a;
}

/* Die Klassifizierungsfarben sind für hellen Grund eine Spur dunkler, damit
   Stempel und Kante lesbar bleiben. Der Farbton bleibt derselbe. */
[data-theme='light'] {
  --color-stamp-0: #6b716d;
  --color-stamp-1: #4a6577;
  --color-stamp-2: #34694f;
  --color-stamp-3: #856024;
  --color-stamp-4: #8d3c28;
  --color-stamp-5: #5c4270;
}

/* Ohne ausdrückliche Wahl folgt die Anwendung dem System. Der Auslieferungs-
   zustand bleibt dunkel: `prefers-color-scheme: light` muss gesetzt sein. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --color-surface: #eceeea;
    --color-panel: #e2e5e1;
    --color-raised: #f7f8f5;
    --color-line: #b0b6ae;
    --color-text: #1b1f21;
    --color-text-dim: #4d5551;
    --color-accent: #35586a;
    --color-stamp-0: #6b716d;
    --color-stamp-1: #4a6577;
    --color-stamp-2: #34694f;
    --color-stamp-3: #856024;
    --color-stamp-4: #8d3c28;
    --color-stamp-5: #5c4270;
  }
}

@layer base {
  *,
  *::before,
  *::after {
    border-color: var(--color-line);
  }

  html {
    color-scheme: dark;
    background-color: var(--color-surface);
  }

  [data-theme='light'] {
    color-scheme: light;
  }

  body {
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  /* Spaltenkoepfe, Stempel und Reiter tragen den schmalen Schnitt.
     Kein Versalsatz: der Stempelcharakter kommt aus Schnitt, Rahmen und Farbe. */
  th,
  legend {
    font-family: var(--font-condensed);
    font-weight: 500;
    text-transform: none;
  }

  /* Aktenzeichen, Zeitstempel, Hashes und Dienstnummern in Mono. */
  code,
  kbd,
  samp,
  time {
    font-family: var(--font-mono);
  }

  h1,
  h2,
  h3 {
    font-weight: 500;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-xl);
  }
  h2 {
    font-size: var(--text-lg);
  }
  h3 {
    font-size: var(--text-base);
  }

  a {
    color: var(--color-accent);
    text-underline-offset: 2px;
  }

  /* Auch Kaestchen und Schalter gehoeren zur interaktiven Ebene. */
  input[type='checkbox'],
  input[type='radio'] {
    accent-color: var(--color-accent);
  }

  /* Sichtbarer Fokusring in --steel, der einzige Schatten im System. */
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
  }

  ::selection {
    background-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
}

@layer components {
  /* ---------------------------------------------------------------------
     Bedienelemente.

     Zwei Regeln, beide aus dem Betrieb heraus:

     **Ein Knopf muss vor der Beruehrung als Knopf erkennbar sein.** Deshalb
     traegt jeder einen Rahmen und eine eigene Grundflaeche, auch der
     unscheinbarste. Ein Text, der sich erst beim Ueberfahren als Knopf
     entpuppt, wird nicht gefunden.

     **Und er muss beim Druecken zurueckmelden, dass er getroffen wurde.**
     Beim Druecken zieht sich der Knopf leicht zusammen und bekommt einen
     inneren Ring — er wirkt kurz dicker, ohne dass sich die Rahmenbreite
     wirklich aendert, sonst wuerde das Umfeld springen. Die Rueckmeldung
     setzt ohne Verzoegerung ein und klingt langsam ab: ein kurzer Klick
     bliebe sonst unsichtbar. Siehe docs/10-design-system.md.
     --------------------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
    background-color: var(--color-raised);
    color: var(--color-text);
    padding: 0.35rem 0.95rem;
    font-family: var(--font-condensed);
    font-size: var(--text-xs);
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    /* Abklingen langsam, damit der Druck sichtbar bleibt. */
    transition:
      background-color 240ms ease-out,
      border-color 240ms ease-out,
      color 240ms ease-out,
      transform 240ms ease-out,
      box-shadow 240ms ease-out;
  }

  .btn:hover:not(:disabled):not([aria-disabled='true']) {
    background-color: var(--color-panel);
    border-color: var(--color-accent);
    color: var(--color-accent);
    transition-duration: 90ms;
  }

  .btn:active:not(:disabled):not([aria-disabled='true']) {
    transform: scale(0.96);
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 1.5px var(--color-accent);
    /* Sofort einsetzen, damit auch ein schneller Klick sichtbar wird. */
    transition-duration: 0ms;
  }

  .btn:disabled,
  .btn[aria-disabled='true'] {
    color: var(--color-text-dim);
    border-style: dashed;
    cursor: not-allowed;
  }

  /* Der Knopf, der die Sache erledigt. Einer je Formular, nie zwei. */
  .btn-primary {
    color: var(--color-accent);
    border-color: var(--color-accent);
  }

  .btn-primary:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--color-accent) 14%, var(--color-raised));
  }

  /* Fuer dichte Zeilen: Etikettenleisten, Werkzeuge an einem Eintrag. */
  .btn-sm {
    padding: 0.22rem 0.75rem;
    font-size: var(--text-2xs);
  }

  /* Ein Knopf, dessen Zustand er selbst ist: Etikett an oder aus,
     Reaktion gesetzt oder nicht, Reiter offen oder nicht. */
  .btn[aria-current='page'],
  .btn[aria-pressed='true'] {
    /* Der gefuellte Zustand traegt hellen Text, nicht die Akzentfarbe: auf der
       getoenten Flaeche waere Akzent auf Akzent, und der Kontrast faellt unter
       die Untergrenze aus docs/10-design-system.md. */
    background-color: color-mix(in srgb, var(--color-accent) 26%, var(--color-raised));
    border-color: var(--color-accent);
    color: var(--color-text);
  }

  .btn[aria-current='page']:hover,
  .btn[aria-pressed='true']:hover {
    color: var(--color-text);
    background-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-raised));
  }

  /* ---------------------------------------------------------------------
     Die Zeile einer Liste.

     Jede Liste in dieser Anwendung zeigt dasselbe Gebilde: eine Kennung, ein
     Titel, etwas Beiwerk, eine Stempelmarke. Bisher bestimmte **jede Zeile
     ihre Spaltenbreiten selbst** — die Kennung war so breit wie ihr Text, und
     damit fing der Titel in jeder Zeile woanders an. Bei „ETHIK" und „WS"
     untereinander sieht man das sofort.

     Die Breiten stehen deshalb hier und nicht an den Aufrufstellen. Sie sind
     Variablen: eine Liste von Abteilungskuerzeln braucht keine vierzehn
     Zeichen, eine Liste von Aktenzeichen schon. Was gleich bleibt, ist dass
     **innerhalb einer Liste** alles buendig steht.
     --------------------------------------------------------------------- */
  .record-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 1rem;
    row-gap: 0.25rem;
  }

  /* Die Kennung: Aktenzeichen, Dokumentnummer, Abteilungskuerzel. Mono mit
     Tabellenziffern, damit auch die Ziffern untereinander stehen. */
  .record-key {
    flex: none;
    width: var(--record-key, 14ch);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-dim);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Wie die Kennung, aber fuer eine Bezeichnung aus einer festen Liste:
     die Rolle eines Beteiligten, die Art eines Auftrags. Kein Mono — es ist
     Sprache, keine Nummer. */
  .record-label {
    flex: none;
    width: var(--record-label, 11rem);
    overflow: hidden;
    font-family: var(--font-condensed);
    font-size: var(--text-2xs);
    color: var(--color-text-dim);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Der Titel nimmt den Rest. `min-width: 0` ist noetig, damit ein langer
     Titel die Zeile nicht aufblaeht, statt zu kuerzen. */
  .record-title {
    flex: 1 1 10rem;
    min-width: 0;
  }

  /* Beiwerk am rechten Rand: Status, Datum, Anzahl. Rechtsbuendig, damit die
     Spalte eine Kante hat. */
  .record-meta {
    flex: none;
    width: var(--record-meta, 7rem);
    font-family: var(--font-condensed);
    font-size: var(--text-2xs);
    color: var(--color-text-dim);
    text-align: right;
  }

  /* Auf schmalen Schirmen gibt es keine Spalten, nur noch Zeilen. Feste
     Breiten wuerden dort ueberlaufen. */
  @media (max-width: 40rem) {
    .record-key,
    .record-label,
    .record-meta {
      width: auto;
      text-align: left;
    }
  }

  /* Die Stempelmarke: ueberall gleich breit, siehe components/StampMark.tsx. */
  .stamp-mark {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.375rem;
    width: var(--stamp-width, 11.5rem);
    max-width: 100%;
    border: 1px solid;
    border-radius: var(--radius-control);
    padding: 0.1rem 0.6rem;
    font-family: var(--font-condensed);
    font-size: var(--text-2xs);
    line-height: 1.5;
  }

  .stamp-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Der Ladepunkt in einem Link, solange der Wechsel laeuft. Kein Kreisel:
     eine ruhig pulsierende Scheibe in der Groesse eines Satzzeichens, die
     nichts verdeckt und nichts aufhaelt. */
  .pending-dot {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    flex: none;
    border-radius: var(--radius-control);
    background-color: currentColor;
    animation: pending-pulse 900ms ease-in-out infinite;
  }

  @keyframes pending-pulse {
    0%,
    100% {
      opacity: 0.25;
      transform: scale(0.75);
    }
    50% {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Die Zahl in einem Knopf: eine Angabe, kein Teil der Beschriftung. Sie
     sitzt deshalb ruhiger und in Mono. */
  .btn-count {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--color-text-dim);
  }

  .btn[aria-current='page'] .btn-count {
    color: var(--color-text);
  }

  /* Waehrend eine Aktion laeuft. Kein Spinner, nur ein ruhiger Zustand:
     der Knopf bleibt stehen, wo er ist, und nimmt keine zweite Eingabe an. */
  .btn[aria-busy='true'] {
    color: var(--color-text-dim);
    border-style: dashed;
    cursor: progress;
  }

  /* Eingabefelder. Weich gerundet statt voll: ein mehrzeiliges Feld als
     Pille waere unlesbar. */
  .field {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
    background-color: var(--color-raised);
    color: var(--color-text);
    padding: 0.4rem 0.7rem;
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: 1.5;
    transition:
      border-color 120ms ease-out,
      background-color 120ms ease-out;
  }

  .field:hover:not(:disabled) {
    border-color: var(--color-accent);
  }

  .field:disabled {
    color: var(--color-text-dim);
    cursor: not-allowed;
  }

  /* -------------------------------------------------------------------
     Beschriftung und Bedienelement.

     Der Abstand dazwischen war kleiner als die Polsterung **innerhalb** des
     Feldes, und genau daran erkennt das Auge einen zu engen Satz: das Wort
     steht naeher am Rahmen als der Inhalt des Rahmens an demselben Rahmen,
     also wirkt es angeklebt. Die Regel daraus: **der Abstand nach aussen ist
     groesser als die Polsterung nach innen.**

     Deshalb stehen beide Werte hier und nicht an den Aufrufstellen. Sie waren
     dort ein Dutzend Mal von Hand gesetzt, mit drei verschiedenen Werten, und
     keiner davon reichte. Siehe docs/10-design-system.md.
     ------------------------------------------------------------------- */
  .field-label {
    display: block;
    /* Mehr als die 0.4rem Polsterung des Feldes nach oben und unten. */
    margin-block-end: 0.5rem;
    font-family: var(--font-condensed);
    font-size: var(--text-2xs);
    line-height: 1.4;
    color: var(--color-text-dim);
  }

  /* Beschriftung daneben statt darueber. Waagerecht braucht es mehr Luft als
     senkrecht: das Feld polstert innen 0.7rem, aussen sind es 0.85rem. */
  .field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--font-condensed);
    font-size: var(--text-2xs);
    color: var(--color-text-dim);
  }

  /* Der Hinweis unter einem Feld gehoert naeher an das Feld als an das
     naechste. */
  .field-hint {
    display: block;
    margin-block-start: 0.4rem;
    font-size: var(--text-2xs);
    line-height: 1.45;
    color: var(--color-text-dim);
  }

  /* Einzeilige Felder, die wie ein Knopf aussehen duerfen: Suchbalken,
     Schnellfilter. */
  .field-pill {
    border-radius: var(--radius-control);
    padding-inline: 0.9rem;
  }

  select.field {
    padding-block: 0.35rem;
  }

  /* Steckt das Bild in einem Knopf, traegt der Knopf den Rahmen. Zwei
     ineinander waeren ein Doppelring. */
  .btn > .avatar {
    border: 0;
  }

  /* Das Profilbild oben rechts und ueberall sonst, wo eine Person auftaucht. */
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
    background-color: var(--color-raised);
    color: var(--color-text-dim);
    font-family: var(--font-condensed);
    overflow: hidden;
    object-fit: cover;
  }

  /* Der eine mutige Moment: die Schwaerzung. Ein massiver Balken mit feiner
     Rahmenlinie, der beim ersten Erscheinen einmal von links nach rechts
     durchwischt. Sonst bewegt sich in der Oberflaeche nichts von selbst. */
  .redaction {
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: baseline;
    background-color: var(--color-ink-900);
    border: 1px solid var(--color-line);
    border-radius: 2px;
    color: transparent;
    user-select: none;
  }

  .redaction::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-ink-700);
    transform-origin: left center;
    animation: redaction-wipe 150ms ease-out 1 both;
  }

  @keyframes redaction-wipe {
    from {
      transform: scaleX(1);
    }
    to {
      transform: scaleX(0);
    }
  }

  /* Zeitachse des Verlaufs: durchgehende senkrechte Linie. Der Chat hat keine.
     Der Unterschied muss ohne Beschriftung erkennbar sein. */
  .timeline {
    position: relative;
    padding-left: 1.5rem;
  }

  .timeline::before {
    content: '';
    position: absolute;
    left: 0.4375rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--color-line);
  }

  /* ---------------------------------------------------------------------
     Das Aktenblatt.

     Bewusst **ausserhalb** des Design-Systems der Oberflaeche: schwarz auf
     weiss, harte Rahmen, Massangaben in Millimetern. Es ist kein Bildschirm-
     element, sondern ein Formular, das gedruckt und weitergereicht wird und
     auf Papier genauso aussehen muss wie hier. Deshalb steht hier kein
     einziger Farb-Token der Anwendung.

     Nachgebaut nach dem Formular, das die Personalabteilung bislang von Hand
     ausgefuellt hat. Siehe docs/13-entscheidungen.md.
     --------------------------------------------------------------------- */
  .sheet {
    width: 210mm;
    min-height: 297mm;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 10mm;
    background: #ffffff;
    color: #000000;
    font-family: var(--font-sans, sans-serif);
  }

  .sheet-frame {
    border: 4px solid #000;
    min-height: calc(297mm - 20mm);
    display: flex;
    flex-direction: column;
  }

  .sheet-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 15px;
    border-bottom: 4px solid #000;
  }

  .sheet-head h1 {
    margin: 0 0 5px;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1.1;
    text-transform: uppercase;
    color: #000;
  }

  .sheet-head h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #000;
  }

  .sheet-mark {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

  /* Rein dekorativ, deshalb aria-hidden im Markup. */
  .sheet-barcode {
    width: 140px;
    height: 25px;
    background: repeating-linear-gradient(
      90deg,
      #000,
      #000 2px,
      #fff 2px,
      #fff 5px,
      #000 5px,
      #000 8px,
      #fff 8px,
      #fff 10px
    );
  }

  .sheet-classbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 10px 15px;
    border-bottom: 4px solid #000;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .sheet-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .sheet-grid td {
    border: 2px solid #000;
    padding: 10px;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  .sheet-label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: #000;
  }

  .sheet-value {
    font-size: 14px;
    font-weight: 700;
    min-height: 20px;
    color: #000;
  }

  .sheet-value-emphasis {
    color: #7f1d1d;
  }

  .sheet-photo {
    width: 120px;
    height: 160px;
    margin: 0 auto;
    border: 2px solid #000;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #555;
    position: relative;
    overflow: hidden;
  }

  .sheet-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sheet-signature {
    border-bottom: 2px solid #000;
    min-height: 30px;
    display: flex;
    align-items: flex-end;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: 18px;
    color: #000;
  }

  .sheet-foot {
    margin-top: auto;
    border-top: 4px solid #000;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
  }

  /* Schmale Fenster: das Blatt behaelt seine Proportionen und wird als Ganzes
     verkleinert, statt umzubrechen. Ein umgebrochenes Formular waere ein
     anderes Formular. */
  @media (max-width: 230mm) {
    .sheet-scroll {
      overflow-x: auto;
    }
  }

  /* ---------------------------------------------------------------------
     Die Druckansicht einer Akte.

     Schwarz auf weiss wie das Aktenblatt, aber im Aufbau eines Berichts:
     Deckblatt, Kopfdaten, Abschnitte, Verlauf, Anhangsverzeichnis. Das
     Wasserzeichen setzt der PDF-Dienst in Kopf- und Fusszeile jeder Seite.

     Ein Export darf nie sauberer aussehen als die Akte ist: geänderte
     Einträge sind gekennzeichnet, zurückgezogene stehen als Grabstein, und
     gesperrte Felder erscheinen als Balken mit Vermerk statt zu fehlen.
     Siehe docs/08-suche-und-export.md.
     --------------------------------------------------------------------- */
  .print-sheet {
    max-width: 180mm;
    margin: 0 auto;
    padding: 12mm 0;
    background: #fff;
    color: #000;
    font-size: 10pt;
    line-height: 1.45;
    /* Am Bildschirm auf schmalen Geraeten: die Tabellen darin scrollen in
       sich, statt die Seite breiter zu machen. Auf Papier greift das nicht. */
    overflow-x: auto;
  }

  .print-meta {
    min-width: 0;
  }

  .print-sheet h1 {
    font-size: 18pt;
    font-weight: 900;
    margin: 0 0 2mm;
    color: #000;
  }

  .print-sheet h2 {
    font-size: 12pt;
    font-weight: 900;
    margin: 8mm 0 2mm;
    padding-bottom: 1mm;
    border-bottom: 1.5pt solid #000;
    color: #000;
    break-after: avoid;
  }

  .print-sheet h3 {
    font-size: 10pt;
    font-weight: 900;
    margin: 4mm 0 1mm;
    color: #000;
    break-after: avoid;
  }

  .print-cover {
    border: 3pt solid #000;
    padding: 8mm;
    margin-bottom: 8mm;
  }

  .print-stamp {
    display: inline-block;
    border: 2pt solid #000;
    padding: 1mm 3mm;
    font-weight: 900;
    letter-spacing: 1pt;
    text-transform: uppercase;
  }

  .print-meta {
    width: 100%;
    border-collapse: collapse;
    margin-top: 3mm;
  }

  .print-meta th,
  .print-meta td {
    border: 0.75pt solid #000;
    padding: 1.5mm 2mm;
    text-align: left;
    vertical-align: top;
    font-size: 9pt;
  }

  .print-meta th {
    width: 38mm;
    font-weight: 900;
  }

  /* Ein Eintrag soll nicht über den Seitenrand zerrissen werden. */
  .print-entry {
    break-inside: avoid;
    padding: 2mm 0;
    border-bottom: 0.5pt dotted #666;
  }

  .print-label {
    font-size: 8pt;
    font-weight: 900;
    text-transform: uppercase;
    color: #000;
  }

  .print-note {
    font-size: 8pt;
    color: #444;
  }

  /* Die Schwärzung im Druck: ein voller Balken, kein Weglassen. */
  .print-redacted {
    display: inline-block;
    min-width: 30mm;
    background: #000;
    color: #000;
    user-select: none;
  }
}

/* Drucken: nur das Blatt, ohne Rahmenwerk der Anwendung. Kopf- und Fusszeile
   mit dem Wasserzeichen setzt der PDF-Dienst, siehe docs/08. */
@media print {
  .no-print {
    display: none !important;
  }

  body {
    background: #fff !important;
  }

  .sheet {
    margin: 0;
    padding: 0;
    width: auto;
  }

  .sheet-frame {
    min-height: auto;
  }

  .sheet-classbar,
  .print-redacted,
  .print-stamp {
    /* Sonst drucken die Flächen weiss auf weiss. */
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .print-sheet {
    max-width: none;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .redaction::after {
    animation: none;
    transform: scaleX(0);
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}