/* Arnsdal Vet – Gestaltung (Regeln: docs/06_Name_und_Gestaltung.md)

   Leitbild: die Akte. Weißes Blatt mit weichen Ecken auf warmweißem Aktendeckel, Reiter als Gliederung. Farben und Bildmarke
   wie die iOS-App: Tanne (--marke) als Markenfarbe, Bernstein (--akzent) nur für Wortmarke und Export. Ampelfarben sind für Bewertungen reserviert und stehen nie allein (Symbol + Text).
   Farben nur über die Variablen unten; `.blatt` (Bericht) bleibt auch im Dunkelmodus Papier. */

@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("vendor/fonts/barlow-latin-400-normal.81419bf5abb5.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("vendor/fonts/barlow-latin-500-normal.8e986e86d57e.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("vendor/fonts/barlow-latin-600-normal.a1e2a2d7d4c0.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("vendor/fonts/barlow-semi-condensed-latin-500-normal.69988ca9d262.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("vendor/fonts/barlow-semi-condensed-latin-600-normal.64a19a7cafc2.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("vendor/fonts/barlow-semi-condensed-latin-700-normal.d829c77621b7.woff2") format("woff2"); }

:root, .blatt {
  color-scheme: light;
  --schrift: "Barlow", "Segoe UI", system-ui, sans-serif;
  --schrift-eng: "Barlow Semi Condensed", "Barlow", "Arial Narrow", system-ui, sans-serif;
  --grund: #f7f5f0;          /* Aktendeckel, warmweiß */
  --flaeche: #ffffff;        /* Blatt */
  --flaeche-2: #f4f2ec;
  --text: #1a1917;
  --text-zweit: #6b675f;
  --linie: #e3dfd6;
  --linie-stark: #b5afa3;
  --marke: #1f4a3a;          /* Tanne – wie die App (VAPrimary) */
  --marke-text: #ffffff;
  --marke-flaeche: #e4efe8;
  --marke-tief: #143327;
  --akzent: #c2611a;         /* Bernstein – nur Wortmarke und Export/Teilen */
  --akzent-text: #ffffff;
  --akzent-flaeche: #fbefe3;
  --spur: #e9e5dc;
  --spur-wert: #857f74;
  --balken: #c4bfb4;
  --gut: #0ca30c;
  --warnung: #fab219;
  --kritisch: #d03b3b;
  --warnung-flaeche: #fdf1d3;
  --kritisch-flaeche: #f9dfdf;
  --reihe-1: #2a78d6; --reihe-2: #eb6834; --reihe-3: #1baf7a; --reihe-4: #eda100;
  --reihe-5: #e87ba4; --reihe-6: #008300; --reihe-7: #4a3aa7; --reihe-8: #e34948;
  /* Form: weiche Ecken und ein leiser Schatten heben das Blatt vom Aktendeckel ab */
  --rund: 20px;
  --rund-klein: 12px;
  --schatten: 0 1px 2px rgba(26, 25, 23, .05), 0 12px 32px -16px rgba(26, 25, 23, .2);
  --schatten-klein: 0 1px 2px rgba(26, 25, 23, .08);
  --kopf-hoehe: 56px;
}
/* Dunkel: nach Vorgabe des Geräts, oder fest gewählt über den Knopf in der Kopfzeile (data-thema am <html>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    color-scheme: dark;
    --grund: #121614;
    --flaeche: #1b221e;
    --flaeche-2: #232b26;
    --text: #ece9e2;
    --text-zweit: #a8a399;
    --linie: #2a322d;
    --linie-stark: #55605a;
    --marke: #7bc59a;
    --marke-text: #10231a;
    --marke-flaeche: #1e3329;
  --marke-tief: #a9d6bc;
  --akzent: #e8a35c;
  --akzent-text: #2a1a08;
  --akzent-flaeche: #3a2a1b;
    --spur: #2a322d;
    --spur-wert: #8b9791;
    --balken: #5a645f;
    --warnung-flaeche: #43340c;
    --kritisch-flaeche: #4a1c1c;
    --reihe-1: #3987e5; --reihe-2: #d95926; --reihe-3: #199e70; --reihe-4: #c98500;
    --reihe-5: #d55181; --reihe-6: #008300; --reihe-7: #9085e9; --reihe-8: #e66767;
    --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -16px rgba(0, 0, 0, .7);
    --schatten-klein: 0 1px 2px rgba(0, 0, 0, .5);
  }
}
:root[data-thema="dunkel"] {
  color-scheme: dark;
  --grund: #121614;
  --flaeche: #1b221e;
  --flaeche-2: #232b26;
  --text: #ece9e2;
  --text-zweit: #a8a399;
  --linie: #2a322d;
  --linie-stark: #55605a;
  --marke: #7bc59a;
  --marke-text: #10231a;
  --marke-flaeche: #1e3329;
  --marke-tief: #a9d6bc;
  --akzent: #e8a35c;
  --akzent-text: #2a1a08;
  --akzent-flaeche: #3a2a1b;
  --spur: #2a322d;
  --spur-wert: #8b9791;
  --balken: #5a645f;
  --warnung-flaeche: #43340c;
  --kritisch-flaeche: #4a1c1c;
  --reihe-1: #3987e5; --reihe-2: #d95926; --reihe-3: #199e70; --reihe-4: #c98500;
  --reihe-5: #d55181; --reihe-6: #008300; --reihe-7: #9085e9; --reihe-8: #e66767;
  --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -16px rgba(0, 0, 0, .7);
  --schatten-klein: 0 1px 2px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------------------ Grundlagen */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; font-family: var(--schrift); font-size: 16px; line-height: 1.45; color: var(--text); background: var(--grund); -webkit-font-smoothing: antialiased; }
a { color: var(--marke); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--schrift-eng); font-weight: 600; line-height: 1.15; margin: 0; }
h1 { font-size: 2.1rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.3rem; margin-bottom: .6rem; }
h3 { font-size: 1.05rem; margin: 1.3rem 0 .4rem; }
p { margin: 0 0 .6rem; }
code { background: var(--flaeche-2); padding: .1em .4em; border-radius: 5px; font-size: .9em; }
main { max-width: 1480px; margin: 0 auto; padding: 28px 28px 72px; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.zweit, .leer { color: var(--text-zweit); }
.klein { font-size: .875rem; }

/* ------------------------------------------------------------------ Kopfzeile und Wortmarke */
.kopf { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; min-height: var(--kopf-hoehe); padding: 0 28px; background: color-mix(in srgb, var(--flaeche) 84%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid var(--linie); }
.kopf nav { margin-left: auto; display: flex; align-items: center; gap: 2px; font-size: .95rem; }
.kopf form { margin: 0; }
.kopf nav a, .kopf nav .textknopf { display: inline-block; padding: 6px 11px; border-radius: var(--rund-klein); color: var(--text-zweit); text-decoration: none; font-weight: 500; transition: background .15s, color .15s; }
.kopf nav a:hover, .kopf nav .textknopf:hover { background: var(--flaeche-2); color: var(--text); }
.kopf .praxisname { color: var(--text-zweit); padding-left: 14px; border-left: 1px solid var(--linie); }
.marke { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.marke-wort { font-family: var(--schrift-eng); font-weight: 700; font-size: 1.4rem; line-height: 1; letter-spacing: -.01em; color: var(--marke); }
/* Wortmarke „Arnsdal Vet“: „Arnsdal“ in Tanne, „Vet“ in Bernstein – der eine Akzent der Wortmarke (docs/06 §1) */
.marke-wort b { font-weight: inherit; color: var(--akzent); }
/* Bildmarke „V aus Modulen": fünf Kacheln, die zur Bernstein-Spitze zusammenlaufen (Geometrie aus der App) */
.marke-bild { width: 30px; height: 30px; flex: none; }
.marke-bild .oben { fill: var(--marke); }
.marke-bild .mitte { fill: var(--marke); opacity: .55; }
.marke-bild .spitze { fill: var(--akzent); }
/* Der Modulname steht als helle Marke neben dem Wort */
/* Herstellerzusatz „by Arnsdal“ klein hinter dem Produktnamen (docs/06) – leiser als der Name, nie in Bernstein */
.marke-by { font-family: var(--schrift); font-size: .68rem; font-weight: 400; letter-spacing: .01em; opacity: .75; white-space: nowrap; }
.marke-reiter { font-family: var(--schrift-eng); font-weight: 600; font-size: .9rem; line-height: 1; background: var(--marke-flaeche); color: var(--marke-tief); padding: 5px 10px; border-radius: 999px; }
/* Modulwechsel: die Modulmarke ist zugleich der Knopf, der die Liste aller Module aufklappt (docs/09 §1, docs/15 §2.3).
   Ein <details>: ohne Skript bedienbar; nutzbare Module als Verweis, nicht nutzbare dezent mit kurzem Grund, ohne Verweis. */
.modulwahl { position: relative; margin-left: -6px; }
.modulwahl-knopf { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none; user-select: none; border: 1px solid transparent; transition: border-color .15s, background .15s; }
.modulwahl-knopf::-webkit-details-marker { display: none; }
.modulwahl-knopf::marker { content: ""; }
.modulwahl-knopf:hover, .modulwahl[open] > .modulwahl-knopf { border-color: var(--marke); }
.modulwahl-knopf:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; border-radius: 999px; }
.modulwahl-pfeil { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.modulwahl[open] .modulwahl-pfeil { transform: rotate(180deg); }
.modulwahl-menue { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: max-content; min-width: 240px; max-width: min(340px, calc(100vw - 24px)); padding: 6px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund-klein); box-shadow: var(--schatten); }
.modulwahl-titel { margin: 4px 10px 6px; font-family: var(--schrift-eng); font-weight: 600; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-zweit); }
.modulwahl-menue ul { list-style: none; margin: 0; padding: 0; }
.modulwahl-eintrag { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
a.modulwahl-eintrag:hover, a.modulwahl-eintrag:focus-visible { background: var(--flaeche-2); }
a.modulwahl-eintrag.aktuell { background: var(--marke-flaeche); color: var(--marke-tief); }
.modulwahl-name { font-weight: 600; }
.modulwahl-erklaerung { font-weight: 400; color: var(--text-zweit); }
.modulwahl-hinweis { grid-column: 1; font-size: .82rem; color: var(--text-zweit); }
.modulwahl-haken { grid-column: 2; grid-row: 1 / span 2; width: 14px; height: 14px; fill: none; stroke: var(--marke); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.modulwahl-eintrag.gesperrt { color: var(--text-zweit); cursor: default; }
.modulwahl-eintrag.gesperrt .modulwahl-name { font-weight: 500; }
/* Modul ohne Lizenz: eine Zeile, was es kann, und ein dezenter Verweis (entschieden 10.10.2026) */
.modulwahl-info { grid-column: 1; margin-top: 2px; font-size: .82rem; line-height: 1.35; color: var(--text-zweit); }
.modulwahl-mehr { display: inline-block; margin: -4px 10px 6px; padding: 2px 0; font-size: .82rem; color: var(--marke); }
.modulwahl-mehr:hover, .modulwahl-mehr:focus-visible { color: var(--marke-tief); }
.modulwahl-fuss { margin: 6px 10px 4px; padding-top: 8px; border-top: 1px solid var(--linie); font-size: .82rem; color: var(--text-zweit); }
.textknopf { background: none; border: 0; padding: 0; color: var(--marke); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.thema-knopf { font-size: 1.1rem; line-height: 1.2; }

/* ------------------------------------------------------------------ Bedienelemente */
.knopf { display: inline-block; padding: 8px 16px; border-radius: var(--rund-klein); border: 1px solid var(--marke); background: var(--marke); color: var(--marke-text); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; transition: filter .15s, background .15s, border-color .15s; }
.knopf:hover { filter: brightness(1.12); }
.knopf.zweitrangig { background: var(--flaeche); color: var(--text); border-color: var(--linie-stark); }
.knopf.zweitrangig:hover { filter: none; background: var(--flaeche-2); border-color: var(--marke); }
.knopf.akzent { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.knopf.klein { padding: 4px 11px; font-size: .875rem; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
select, input, textarea { font: inherit; padding: 7px 10px; border: 1px solid var(--linie-stark); border-radius: var(--rund-klein); background: var(--flaeche); color: var(--text); max-width: 100%; transition: border-color .15s, box-shadow .15s; }
select:focus, input:focus, textarea:focus { outline: 0; border-color: var(--marke); box-shadow: 0 0 0 3px var(--marke-flaeche); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--marke); box-shadow: none; }
textarea { width: 100%; resize: vertical; }
label { font-size: .875rem; color: var(--text-zweit); }
.umschalter { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--linie); border-radius: 15px; background: var(--flaeche); }
.umschalter a { padding: 5px 13px; border-radius: var(--rund-klein); text-decoration: none; color: var(--text-zweit); font-weight: 500; transition: background .15s, color .15s; }
.umschalter a:hover { background: var(--flaeche-2); color: var(--text); }
.umschalter a.aktiv { background: var(--marke); color: var(--marke-text); }
.formular { display: flex; flex-direction: column; gap: 6px; }
.formular p { margin: 0 0 6px; display: flex; flex-direction: column; gap: 3px; }
.formular.reihe { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.formular.reihe p { margin: 0; }
.formular .helptext { font-size: .8rem; color: var(--text-zweit); }
/* Formulare der Verwaltung: Felder als Raster, Beschriftung über dem Feld */
.formular > div { display: flex; flex-direction: column; gap: 3px; }
.formular > div:has(> button) { display: block; }
/* Reihenfolge im Feld: Beschriftung, Eingabe, Fehler, Hinweis – so stehen die Eingaben einer Zeile auf gleicher Höhe */
.formular > div > input, .formular > div > select, .formular > div > textarea { order: 1; }
.formular > div > .errorlist { order: 2; }
.formular > div > .helptext { order: 3; }
.formular > div:has(> input[type="checkbox"]) { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; }
.formular > div:has(> input[type="checkbox"]) > label { order: 2; font-size: 1rem; color: var(--text); }
.formular > div:has(> input[type="checkbox"]) > input { order: 1; width: auto; margin: 0; }
.formular > div:has(> input[type="checkbox"]) > .helptext, .formular > div:has(> input[type="checkbox"]) > .errorlist { order: 3; grid-column: 1 / -1; }
.formular.raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: 12px; max-width: 760px; }
.formular.raster input:not([type="checkbox"]), .formular.raster select { width: 100%; }
.formular.raster > .breit, .formular.raster > div:has(textarea), .formular.raster > div:has(> input[type="checkbox"]) { grid-column: 1 / -1; }
.formular ul { margin: 0; padding-left: 18px; }
.formular .helptext ul { font-size: .8rem; }
.errorlist { list-style: none; margin: 0; padding: 0 !important; color: var(--kritisch); font-size: .875rem; }
.fehler { color: var(--kritisch); }
.meldungen { list-style: none; padding: 0; margin: 0 0 16px; }
.meldungen li { padding: 10px 14px; border: 1px solid var(--linie); border-left: 4px solid var(--marke); border-radius: var(--rund-klein); background: var(--flaeche); box-shadow: var(--schatten-klein); margin-bottom: 6px; }
.meldungen li.error { border-left-color: var(--kritisch); }
.hinweis { background: var(--warnung-flaeche); border-left: 4px solid var(--warnung); border-radius: var(--rund-klein); padding: 9px 14px; }

/* ------------------------------------------------------------------ Seitenkopf */
.leiste { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.inline { display: flex; align-items: center; gap: 6px; margin: 0; }
.pfad { margin: 0 0 10px; font-size: .95rem; }
.pfad a { text-decoration: none; }
.pfad a:hover { text-decoration: underline; }
.stammzeile { margin: 6px 0 0; color: var(--text-zweit); }
.stammzeile span + span::before { content: ""; display: inline-block; width: 1px; height: .85em; background: var(--linie-stark); margin: 0 10px; vertical-align: -1px; }

/* Lage der Praxis: ein Streifen mit Zahlen, durch Linien getrennt – keine Kacheln */
.lage { display: flex; flex-wrap: wrap; gap: 12px 0; margin: 0 0 16px; padding: 16px 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten); }
.lage div { display: flex; flex-direction: column-reverse; flex: 1 1 150px; padding: 0 24px; border-left: 1px solid var(--linie); }
.lage div:first-child { border-left: 0; }
.lage dt { font-size: .875rem; color: var(--text-zweit); }
.lage dd { margin: 0; font-family: var(--schrift-eng); font-weight: 600; font-size: 2.1rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.lage .symbol { font-size: .45em; vertical-align: .55em; margin-right: 5px; color: var(--kritisch); }

/* ------------------------------------------------------------------ Blatt und Abschnitte */
.blattflaeche { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten); overflow: clip; }
/* Sprungziele rutschen nicht unter die stehende Kopfzeile und die Reiter */
.abschnitt { padding: 22px 24px 24px; border-top: 1px solid var(--linie); min-width: 0; scroll-margin-top: 124px; }
.abschnitt:first-child { border-top: 0; }
.abschnitt .unterzeile { color: var(--text-zweit); font-size: .9rem; margin: -2px 0 10px; }
.spalten { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); border-top: 1px solid var(--linie); }
.spalten:first-child { border-top: 0; }
.spalten > .abschnitt { border-top: 0; }
.spalten > .abschnitt + .abschnitt { border-left: 1px solid var(--linie); }
.spalten.gleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.schmal { max-width: 430px; margin: 64px auto; }
.mittel { max-width: 920px; }
.abschnittskopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 20px; }
.lesbreite { max-width: 78ch; }

/* Reiter: Sprungmarken zu den Abschnitten der Akte bzw. Bereiche der Verwaltung. Die Leiste bleibt beim Rollen
   stehen; in der Akte markiert sie den Abschnitt, der gerade zu sehen ist (oberflaeche.js). */
.reiter { position: sticky; top: calc(var(--kopf-hoehe) + 8px); z-index: 10; display: flex; gap: 2px; width: fit-content; max-width: 100%; overflow-x: auto; margin: 18px 0 12px; padding: 4px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; box-shadow: var(--schatten); scrollbar-width: none; }
.reiter a { font-weight: 500; font-size: .95rem; white-space: nowrap; text-decoration: none; color: var(--text-zweit); border-radius: var(--rund-klein); padding: 6px 14px; transition: background .15s, color .15s; }
.reiter a:hover, .reiter a:focus-visible { color: var(--text); background: var(--flaeche-2); }
.reiter a.aktiv { color: var(--marke-text); background: var(--marke); }
.reiter .zahl-marke { margin-left: 6px; }
.zahl-marke { display: inline-block; min-width: 1.5em; padding: 0 6px; border-radius: 999px; background: var(--kritisch); color: #fff; font-family: var(--schrift); font-weight: 600; font-size: .78rem; line-height: 1.5; text-align: center; vertical-align: 1px; }
.marke-hinweis { display: inline-block; padding: 0 7px; margin-left: 6px; border-radius: 999px; border: 1px solid var(--linie-stark); color: var(--text-zweit); font-size: .75rem; font-weight: 400; }

/* ------------------------------------------------------------------ Tabellen */
/* position: relative, damit die nur vorgelesenen Texte der Ampelzellen mit der Tabelle rollen – sonst machen sie die Seite auf dem Telefon breiter */
.tabellenrahmen { overflow-x: auto; position: relative; }
/* Tabelle, die bei vielen Zeilen in ihrem Rahmen rollt (Speck, Fleisch und Magerfleisch im Verlauf); Kopf bleibt stehen */
.tabellenrahmen.rollt-hoch { max-height: 34rem; overflow-y: auto; overscroll-behavior: contain; }
.rollt-hoch thead th { position: sticky; top: 0; z-index: 1; background: var(--flaeche); }
.rollt-hoch tfoot { position: sticky; bottom: 0; z-index: 1; }   /* Zeitraum-Mittel und Ziel bleiben unten stehen */
.rollt-hoch tfoot th, .rollt-hoch tfoot td { background: var(--flaeche); }
.sfm-verlauf tr.unter-ziel > * { background: var(--warnung-flaeche); }
.sfm-verlauf .symbol { font-size: .75em; color: var(--warnung); }
.sfm-verlauf td.mfa { font-weight: 600; }
.sfm-verlauf tbody th .hof { display: block; font-weight: 400; font-size: .78rem; color: var(--text-zweit); white-space: normal; }
.sfm-verlauf tfoot th, .sfm-verlauf tfoot td { border-bottom: 0; }
.sfm-verlauf tfoot .summe th, .sfm-verlauf tfoot .summe td { border-top: 1px solid var(--linie-stark); font-weight: 600; }
.sfm-verlauf tfoot .ziel th, .sfm-verlauf tfoot .ziel td { color: var(--text-zweit); font-weight: 400; }
/* Schlachthöfe im Vergleich (docs/18 §5a): deutliche Abweichung vom Praxismittel dezent in Tanne und fett – keine Ampelfarbe,
   denn eine Abweichung ist keine Bewertung (mehr Magerfleisch ist nicht schlecht); Bernstein bleibt Wortmarke und Export (Regel 8) */
.abweichung { color: var(--marke); font-weight: 600; }
.hofvergleich small.abweichung { display: block; font-size: .78rem; }
.hofvergleich thead th, .hofvergleich tbody th { white-space: normal; min-width: 5.5em; }   /* Kopf und Name brechen um: schmaler */
.hofvergleich tbody th { min-width: 9em; }
.liste.paarvergleich { width: auto; min-width: min(100%, 560px); }
.liste tr.zu-wenig th, .liste tr.zu-wenig td { color: var(--text-zweit); }
.hofvergleich tfoot th, .hofvergleich tfoot td { border-top: 1px solid var(--linie-stark); border-bottom: 0; font-weight: 600; }
.vergleichssaetze { margin: 12px 0 8px; padding-left: 1.2em; }
.vergleichssaetze li { margin-bottom: 4px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--linie); white-space: nowrap; text-align: right; }
thead th { font-family: var(--schrift-eng); font-weight: 600; font-size: .9rem; color: var(--text-zweit); vertical-align: bottom; border-bottom-color: var(--linie-stark); }
thead th small { display: block; font-family: var(--schrift); font-weight: 400; font-size: .78rem; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 500; }
.links { text-align: left; }
.umbruch { white-space: normal; }

/* Listen der Verwaltung: Text linksbündig, Zahlen rechts */
.liste th, .liste td { text-align: left; padding: 10px 14px 10px 0; }
.liste .zahl { text-align: right; }
.liste .zahl + th, .liste .zahl + td { padding-left: 14px; }
.liste th:last-child, .liste td:last-child { padding-right: 0; }
.liste tr.inaktiv th, .liste tr.inaktiv td, .liste tr.inaktiv a { color: var(--text-zweit); }
.liste.plaetze { width: auto; min-width: min(100%, 560px); }
.liste.plaetze td:first-child { width: 3.5em; }
.liste.plaetze label { font-size: 1rem; color: var(--text); font-weight: 500; }
.liste.schwellen { width: auto; min-width: min(100%, 520px); }
/* Übersicht der Schlachtauswertung: Betriebe mit letzter Schlachtung (14.10.2026) – schmal, damit Name und Datum zusammen lesbar bleiben */
.liste.betriebsliste { width: auto; min-width: min(100%, 620px); }
.liste.betriebsliste tbody th, .liste.betriebsliste thead th { white-space: normal; }   /* schmal: Name und Kopf brechen um, das Datum nicht */
.liste.schwellen input { width: 7em; text-align: right; }
.liste.schwellen label { font-size: 1rem; color: var(--text); }
.liste.schwellen tbody th { white-space: normal; }
.vermerk { display: inline-block; padding: 0 8px; border-radius: 999px; border: 1px solid var(--linie-stark); color: var(--text-zweit); font-size: .8rem; font-weight: 400; }
.merkmale { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 18px; margin: 0; }
.merkmale dt { color: var(--text-zweit); }
.merkmale dd { margin: 0; }
.merkmale.klein { gap: 3px 14px; }
.aktionen { margin-top: 14px; border-top: 1px solid var(--linie); }
.aktionen .eintrag:first-of-type { padding-top: 10px; }
.aktionen form { margin: 0 0 4px; }
.zugangslink { border: 1px solid var(--marke); border-radius: var(--rund-klein); background: var(--marke-flaeche); padding: 14px 16px; margin: 0 0 16px; }
.zugangslink label { color: var(--text); font-weight: 600; font-size: 1rem; }
.zugangslink .zeile { display: flex; gap: 8px; margin: 6px 0; }
.zugangslink input { flex: 1; min-width: 0; }
.zugangslink p { margin: 0; }
/* QR-Code immer dunkel auf hell, auch im Dunkelmodus – sonst liest ihn die Kamera nicht */
.qr { width: 200px; max-width: 100%; background: #fff; padding: 6px; border: 1px solid var(--linie-stark); border-radius: var(--rund-klein); margin: 6px 0 12px; }
.qr svg { display: block; width: 100%; height: auto; }
.geheimnis { font-family: var(--schrift-eng); font-weight: 600; font-size: 1.1rem; letter-spacing: .04em; overflow-wrap: anywhere; }
/* Ersatzcodes des zweiten Faktors: einmal angezeigt, zum Abschreiben oder Ausdrucken */
.ersatzcodes { list-style: none; padding: 0; margin: 10px 0 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 6px 18px; }
.ersatzcodes li { font-family: var(--schrift-eng); font-weight: 600; font-size: 1.05rem; letter-spacing: .04em; }
.bedingungen { max-height: 50vh; overflow-y: auto; border: 1px solid var(--linie-stark); border-radius: var(--rund-klein); padding: 4px 16px 12px; margin: 10px 0 16px; }
/* Ganzer Text einer Fassung bzw. der Datenschutzhinweise – ohne eigene Bildlaufleiste, damit auch der Druck alles zeigt */
.volltext h2 { font-size: 1.1rem; margin-top: 18px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; }
/* Fußzeile jeder Seite: Impressum und Datenschutz (Rechtsprüfung 10.10.2026, B-3) – dezent, nicht im Druck */
.fusszeile { max-width: 1480px; margin: 0 auto; padding: 14px 28px 22px; border-top: 1px solid var(--linie);
  font-size: .82rem; color: var(--text-zweit); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.fusszeile a { color: var(--text-zweit); }
.fusszeile a:hover { color: var(--marke); }
.absender-probe { border: 1px solid var(--linie); border-radius: var(--rund-klein); padding: 12px 14px; }
.absender-probe p { margin: 0; }
.logo-vorschau { display: block; max-width: 240px; max-height: 80px; border: 1px solid var(--linie); border-radius: var(--rund-klein); padding: 6px; background: #fff; }
.pdf-wahl select { max-width: 15rem; }

/* ------------------------------------------------------------------ Praxis-Übersicht (cockpit/uebersicht.html, oberflaeche.js)
   Ein ruhiges Raster, in dem die Ampeln auffallen: oben die Spaltengruppen (Betrieb | Gesamt | Befundgruppen | Betreuung), darunter
   je Spalte Titel und Zusatz (Einheit bzw. Schwelle) auf zwei festen Zeilen – so stehen alle Titel auf einer Linie. Zahlen rechtsbündig in
   tabellarischen Ziffern, Gruppen durch feine senkrechte Linien getrennt. oberflaeche.js setzt am Rahmen data-passt (Tabelle passt: der Kopf
   bleibt unter der Kopfzeile der Seite stehen) oder data-rollt (zu breit: der Rahmen rollt selbst, Kopf und erste Spalte bleiben stehen) und
   data-gerollt (waagerecht gerollt: Schatten an der ersten Spalte). Ohne Skript rollt der Rahmen nur waagerecht wie jede Tabelle. */
.werkzeugzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 16px; border-bottom: 1px solid var(--linie); }
.werkzeugzeile[hidden] { display: none; }   /* sonst hebt display: flex das hidden auf – ohne Skript oder ohne Zeilen bleibt sie weg */
/* Betrieb suchen (Baustein, docs/06, 14.10.2026): oben auf beiden Übersichten, GET-Formular – mit Skript filtert das Feld die
   Praxis-Übersicht schon beim Tippen (oberflaeche.js) */
.betriebssuche { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; }
.betriebssuche .suche { position: relative; flex: 0 1 460px; min-width: 0; }
.betriebssuche-ergebnis { margin: -4px 0 14px; color: var(--text-zweit); }
.betriebssuche-ergebnis strong { color: var(--text); }
.betriebssuche-ergebnis.leer { color: var(--text); padding: 9px 14px; border: 1px solid var(--linie-stark); border-radius: var(--rund-klein); background: var(--flaeche); }
/* Lupe als Maske aus einer data:-Grafik (CSP: img-src 'self' data:), Farbe folgt dem Erscheinungsbild */
.betriebssuche .suche::before { content: ""; position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--text-zweit); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.6 15.6 20.5 20.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.6 15.6 20.5 20.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.betriebssuche .suche input { width: 100%; padding-left: 38px; padding-right: 38px; border-radius: 999px; }
.betriebssuche .suche input::-webkit-search-cancel-button { margin-right: 18px; }
.betriebssuche kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: inherit; font-size: .75rem; line-height: 1.5; padding: 0 6px; border: 1px solid var(--linie-stark); border-bottom-width: 2px; border-radius: 5px; color: var(--text-zweit); pointer-events: none; }
.betriebssuche .suche:focus-within kbd { display: none; }
.wahlmarke { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid var(--linie-stark); border-radius: 999px; font-size: .95rem; color: var(--text); cursor: pointer; user-select: none; transition: background .15s, border-color .15s; }
.wahlmarke:hover { background: var(--flaeche-2); }
.wahlmarke:has(input:checked) { background: var(--marke-flaeche); border-color: var(--marke); }
.wahlmarke:has(input:focus-visible) { outline: 2px solid var(--marke); outline-offset: 2px; }
.wahlmarke input { margin: 0; }
.werkzeugzeile .treffer { margin-left: auto; color: var(--text-zweit); font-size: .9rem; font-variant-numeric: tabular-nums; }

.uebersicht-rahmen { --ue-oben: var(--kopf-hoehe); --ue-kopf: var(--flaeche-2); --ue-hover: color-mix(in srgb, var(--marke) 6%, var(--flaeche)); }
.uebersicht-rahmen[data-passt] { overflow: visible; }
.uebersicht-rahmen[data-rollt] { max-height: calc(100vh - var(--kopf-hoehe) - 24px); max-height: calc(100dvh - var(--kopf-hoehe) - 24px); overflow: auto; overscroll-behavior-x: contain; }
.uebersicht-rahmen[data-passt] .uebersicht thead { position: sticky; top: var(--ue-oben); z-index: 3; }
.uebersicht-rahmen[data-rollt] .uebersicht thead { position: sticky; top: 0; z-index: 3; }
/* separate statt collapse: Bei zusammenfallenden Rändern rollen die Linien stehender Zellen mit weg */
.uebersicht { font-size: .92rem; border-collapse: separate; border-spacing: 0; }
.uebersicht th, .uebersicht td { padding: 10px 7px; }
.uebersicht tr > :first-child { padding-left: 18px; }
.uebersicht tr > :last-child { padding-right: 18px; }
.uebersicht .gruppenanfang { border-left: 1px solid var(--linie); padding-left: 10px; }

/* Kopf: Gruppenzeile klein und gesperrt, darunter Titel (Tinte) und Zusatz (Bleistift) */
.uebersicht thead th { background: var(--ue-kopf); white-space: nowrap; vertical-align: bottom; }
.uebersicht tr.kopf-gruppen th { position: relative; height: 34px; padding-top: 12px; padding-bottom: 7px; border-bottom: 0; font-size: .7rem; font-weight: 600; line-height: 1.2; letter-spacing: .09em; text-transform: uppercase; color: var(--text-zweit); }
.uebersicht tr.kopf-gruppen th::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 2px; background: var(--linie-stark); }
.uebersicht tr.kopf-gruppen th:first-child::after { left: 18px; }
.uebersicht tr.kopf-gruppen th:last-child::after { right: 18px; }
.uebersicht tr.kopf-gruppen th.gruppenanfang { border-left: 0; }
.uebersicht tr.kopf-gruppen .befundgruppen::after { background: var(--marke); opacity: .55; }
/* Beim waagerechten Rollen bleiben die Namen der Gruppen rechts neben der stehenden ersten Spalte sichtbar, solange ihre Gruppe zu sehen ist
   (--ue-erste = Breite der ersten Spalte, setzt oberflaeche.js). Über der ersten Spalte deckt ein Band die vorbeirollende Gruppenzeile ab. */
.uebersicht-rahmen[data-rollt] tr.kopf-gruppen th:not(:first-child) .gruppen-titel { position: sticky; left: calc(var(--ue-erste, 0px) + 10px); }
.uebersicht-rahmen[data-rollt][data-gerollt] tr.kopf-spalten > :first-child::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 34px; background: var(--ue-kopf); }
.uebersicht .gruppen-zusatz { margin-left: 8px; font-family: var(--schrift); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: .75rem; }
.uebersicht tr.kopf-spalten th { padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--linie-stark); }
.uebersicht .kopf-titel { position: relative; display: inline-block; font-size: .88rem; font-weight: 600; line-height: 1.25rem; color: var(--text); }
.uebersicht .kopf-zusatz { display: block; font-family: var(--schrift); font-size: .72rem; font-weight: 400; line-height: 1.25rem; color: var(--text-zweit); }
.uebersicht .schwelle, .uebersicht-legende .muster.schwelle { display: inline-block; padding: 0 6px; line-height: calc(1.25rem - 4px); border: 1px solid var(--linie-stark); border-radius: 999px; font-family: var(--schrift); font-size: .72rem; color: var(--text-zweit); font-variant-numeric: tabular-nums; }
/* Sortieren (oberflaeche.js legt den Inhalt jeder Kopfzelle in einen Knopf). Der Pfeil steht neben dem Titel, ohne Platz zu nehmen. */
.uebersicht .sortierknopf { all: unset; display: block; cursor: pointer; border-radius: 6px; }
.uebersicht .sortierknopf:focus-visible { outline: 2px solid var(--marke); outline-offset: 4px; }
.uebersicht .sortierknopf:hover .kopf-titel, .uebersicht th[aria-sort] .kopf-titel { color: var(--marke); }
.uebersicht .sortierknopf .kopf-titel::after { position: absolute; right: 100%; margin-right: 3px; font-weight: 600; color: var(--marke); }
.uebersicht th.links .sortierknopf .kopf-titel::after { right: auto; left: 100%; margin: 0 0 0 3px; }
.uebersicht .sortierknopf:hover .kopf-titel::after { content: "↕"; opacity: .5; }
.uebersicht th[aria-sort="ascending"] .kopf-titel::after { content: "↑"; opacity: 1; }
.uebersicht th[aria-sort="descending"] .kopf-titel::after { content: "↓"; opacity: 1; }

/* Zeilen: feine Linien, Tanne-Hauch beim Überfahren und bei Fokus in der Zeile */
.uebersicht tbody tr > * { background: var(--flaeche); transition: background-color .12s; }
.uebersicht tbody tr:hover > *, .uebersicht tbody tr:focus-within > * { background: var(--ue-hover); }
.uebersicht tr[hidden] { display: none; }
/* Erste Spalte bleibt beim waagerechten Rollen stehen; der Schatten zeigt, dass Spalten darunter liegen */
.uebersicht tr.kopf-spalten > :first-child, .uebersicht tbody tr > :first-child { position: sticky; left: 0; z-index: 1; }
.uebersicht tr.kopf-spalten > :first-child { z-index: 2; }
.uebersicht-rahmen[data-gerollt] .uebersicht tr.kopf-spalten > :first-child,
.uebersicht-rahmen[data-gerollt] .uebersicht tbody tr > :first-child { box-shadow: inset -1px 0 0 var(--linie), 12px 0 14px -12px rgba(0, 0, 0, .28); }
.uebersicht-rahmen[data-gerollt-unten] .uebersicht tr.kopf-spalten th { box-shadow: 0 10px 12px -12px rgba(0, 0, 0, .3); }
.uebersicht-rahmen[data-gerollt-unten][data-gerollt] .uebersicht tr.kopf-spalten > :first-child { box-shadow: inset -1px 0 0 var(--linie), 12px 0 14px -12px rgba(0, 0, 0, .28), 0 10px 12px -12px rgba(0, 0, 0, .3); }

/* Betrieb: Name (bei Platzmangel gekürzt, ganz im Hinweis), offene Signale, Vermerke */
.uebersicht .betrieb-zelle { display: flex; align-items: center; gap: 6px; }
.uebersicht .betrieb-zelle a { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; text-decoration: none; }
.uebersicht .betrieb-zelle a:hover { text-decoration: underline; }
.uebersicht .zahl-marke { flex: none; min-width: 1.6em; padding: 0 5px; background: var(--kritisch-flaeche); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kritisch) 45%, transparent); font-size: .72rem; line-height: 1.6; vertical-align: 0; }
.uebersicht .marke-hinweis { flex: none; margin: 0; padding: 0 6px; font-size: .7rem; line-height: 1.5; }
.uebersicht td.kuerzel { color: var(--text-zweit); font-size: .82rem; letter-spacing: .04em; }
.uebersicht .ohne { color: var(--text-zweit); }

/* Ampel: Fläche + Symbol + Text (title) – nie Farbe allein. Die Wertmarke hat eine feste Mindestbreite, damit die Marken einer Spalte gleich
   breit sind; der negative Rand hält die Ziffern auf derselben Kante wie die Werte ohne Marke. */
.ampel .symbol { margin-right: 4px; font-size: .8em; }
.uebersicht .wertmarke { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 3.9em; padding: 3px 6px; margin: -3px -6px; border-radius: 999px; }
.uebersicht .wertmarke .symbol { margin: 0 auto 0 0; font-size: .66em; }
.uebersicht .wertmarke .symbol:empty { display: none; }
.uebersicht td.ampel.rot .wertmarke { background: var(--kritisch-flaeche); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kritisch) 35%, transparent); font-weight: 600; }
.uebersicht td.ampel.gelb .wertmarke { background: var(--warnung-flaeche); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warnung) 55%, transparent); }
.rot .symbol { color: var(--kritisch); }
.gelb .symbol { color: var(--warnung); }

/* Notiz einzeilig mit Auslassung: so sind alle Zeilen gleich hoch, egal wie die Betriebe gerade sortiert sind; der ganze Text steht im Hinweis.
   width 100 % mit max-width 0: Die Notiz nimmt den Platz, der übrig bleibt (mindestens 120 px) – so passt die Tabelle öfter ohne Rollen. */
.uebersicht td.notiz { width: 100%; min-width: 120px; max-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-zweit); font-size: .85rem; }

.legende { font-size: .875rem; color: var(--text-zweit); margin-top: 14px; max-width: 110ch; }
.uebersicht-legende { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin: 16px 0 0; padding: 0 4px; max-width: none; }
.uebersicht-legende li { margin: 0; }
.uebersicht-legende .muster { display: inline-block; margin-right: 6px; padding: 1px 9px; border-radius: 999px; color: var(--text); font-size: .8rem; }
.uebersicht-legende .muster .symbol { margin-right: 5px; font-size: .75em; }
.uebersicht-legende .muster.rot { background: var(--kritisch-flaeche); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kritisch) 35%, transparent); font-weight: 600; }
.uebersicht-legende .muster.gelb { background: var(--warnung-flaeche); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warnung) 55%, transparent); }
.uebersicht-legende .muster.schwelle { margin-right: 6px; line-height: 1.3; }

@media (max-width: 700px) {
  .uebersicht-rahmen { --ue-oben: 0px; }
  .uebersicht-rahmen[data-rollt] { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .werkzeugzeile { padding: 12px; }
  .betriebssuche .suche { flex: 1 1 100%; }
  .uebersicht { font-size: .88rem; }
  .uebersicht th, .uebersicht td { padding: 9px 7px; }
  .uebersicht tr > :first-child { padding-left: 12px; }
  .uebersicht tr.kopf-gruppen th:first-child::after { left: 12px; }
  .uebersicht .betrieb-zelle { max-width: 44vw; }
}
@media print {
  .uebersicht-rahmen { overflow: visible !important; max-height: none !important; }
  .tabellenrahmen.rollt-hoch { overflow: visible; max-height: none; }
  .rollt-hoch thead th, .rollt-hoch tfoot { position: static; }
  .uebersicht thead, .uebersicht tr > :first-child { position: static !important; box-shadow: none !important; }
}

/* ------------------------------------------------------------------ Befundbogen */
.befundbogen th, .befundbogen td { padding: 8px 8px; }
.befundbogen tbody th { font-weight: 500; }
.befundbogen .wert { font-family: var(--schrift-eng); font-weight: 600; font-size: 1.1rem; }
.befundbogen td.spur { width: 28%; min-width: 110px; }
.spur-bahn { position: relative; height: 8px; background: var(--spur); border-radius: 999px; }
/* Der Wert als SVG-Rechteck: Seine Breite ist ein Attribut, kein style= – das verbietet die Content-Security-Policy */
.spur-wert { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: var(--spur-wert); }
.rot .spur-wert { fill: var(--kritisch); }
.gelb .spur-wert { fill: var(--warnung); }
/* Die Schwelle liegt immer in der Mitte der Spur */
.spur-schwelle { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--text); }
.befundbogen .bewertung { text-align: left; white-space: nowrap; }
.befundbogen .bewertung .symbol { margin-right: 5px; font-size: .8em; }
.befundbogen .rot .bewertung { font-weight: 600; }
.befundbogen .bewertung .zusatz { display: block; font-size: .78rem; font-weight: 400; color: var(--text-zweit); white-space: normal; }
/* Grade: schmaler und dezenter als die Gruppe, gleiche Skala (Schwelle der Gruppe in der Mitte) */
.grade-tabelle td.spur { min-width: 110px; }
.grade-tabelle .spur-bahn { height: 5px; }
.grade-tabelle .spur-schwelle { top: -3px; bottom: -3px; }
.befundbogen .vorher { text-align: left; color: var(--text-zweit); font-size: .9rem; }
/* Lunge und Brustfell nach Grad (16.10.2026, kern.auswertung.grade): <details> unter der Gruppenzeile, ohne Skript, zugeklappt.
   Die Unterzeilen sind eingerückt und kleiner – bewertet wird nur die Gruppenzeile darüber. */
.befundbogen tr.grade-zeile > td { padding: 0 8px 8px 22px; text-align: left; white-space: normal; }
.befundbogen tr:has(+ tr.grade-zeile) > * { border-bottom: 0; }
details.grade > summary { cursor: pointer; color: var(--marke); font-size: .88rem; font-weight: 500; width: fit-content; border-radius: var(--rund-klein); }
details.grade > summary:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--marke-flaeche); }
details.grade[open] > summary { margin-bottom: 4px; }
/* Auf dem Telefon rollt der Befundbogen in seinem Rahmen; die Aufteilung bleibt links stehen und so breit wie der sichtbare Teil */
details.grade { position: sticky; left: 0; max-width: calc(100vw - 80px); overflow-x: auto; }
.grade-tabelle { width: auto; font-size: .9rem; }
.grade-tabelle th, .grade-tabelle td { padding: 4px 10px; }
.grade-tabelle thead th, .grade-tabelle tbody th { white-space: normal; }
.grade-tabelle .am-stueck { white-space: nowrap; }
.grade-tabelle tbody th { font-weight: 400; }
.grade-hinweis { margin: 6px 0 0; font-size: .82rem; color: var(--text-zweit); max-width: 60ch; }
.befundbogen-legende { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .85rem; color: var(--text-zweit); margin: 10px 0 0; }
.befundbogen-legende .strich { display: inline-block; width: 2px; height: 12px; background: var(--text); vertical-align: -2px; margin-right: 6px; }

/* Was die Befunde kosten (kern/befundkosten.py): Info unter dem Befundbogen, ruhig – keine Ampelfarben, es ist keine Bewertung */
.befundkosten tbody th { font-weight: 500; white-space: normal; min-width: 150px; }
.kosten-saetze-titel { font-size: .95rem; margin: 14px 0 4px; }
.kosten-saetze { margin: 0; padding-left: 18px; font-size: .9rem; }
.kosten-saetze li { margin-bottom: 4px; }
.befundkosten .wert { font-family: var(--schrift-eng); font-weight: 600; }
.befundkosten .satz { display: block; font-weight: 400; font-size: .85rem; color: var(--text-zweit); margin-top: 2px; max-width: 46ch; }
.befundkosten tfoot th, .befundkosten tfoot td { border-bottom: 0; }
.befundkosten tfoot .summe th, .befundkosten tfoot .summe td { border-top: 1px solid var(--linie-stark); font-weight: 600; }

/* ------------------------------------------------------------------ Einträge (Signale, Maßnahmen, Notizen, Berichte) */
.eintrag { border-top: 1px solid var(--linie); padding: 12px 0; }
.eintrag:first-of-type { border-top: 0; padding-top: 2px; }
.eintrag p { margin: 2px 0; }
.eintrag .kopfzeile { font-weight: 600; }
.eintrag .kopfzeile a { text-decoration: none; }
.eintrag .kopfzeile a:hover { text-decoration: underline; }
.eintrag .meta { color: var(--text-zweit); font-size: .875rem; }
.aufzaehlung { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 4px 0 0; }
.schlicht { margin: 0; padding-left: 1.1em; }
.schlicht li { margin: 3px 0; }
/* Datei einlesen: Dateifeld und Haken ohne das Raster der großen Formulare */
.datei-einlesen p { margin: 8px 0; }
.datei-einlesen input[type="file"] { max-width: 100%; font: inherit; }
.haken { display: inline-flex; align-items: center; gap: 8px; }
.haken input { width: auto; margin: 0; }
/* Vorschau des Datei-Imports: je Betrieb ohne Zuordnung oder Freigabe ein Block mit Anlegen und Freigabe (docs/10 §10) */
.freigabe-zeilen { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.freigabe-zeile { border: 1px solid var(--linie); border-radius: var(--rund-klein); padding: 8px 14px 12px; margin: 0; min-width: 0; }
.freigabe-zeile.mit-fehler { border-color: var(--kritisch); }
.freigabe-zeile legend { font-weight: 600; padding: 0 6px; }
.freigabe-zeile legend .zweit { font-weight: 400; }
.freigabe-zeile > p { margin: 0 0 6px; }
.freigabe-zeile .vermerk { margin-right: 4px; }
.freigabe-zeile .formular.raster { margin-top: 6px; gap: 8px 18px; }
.freigabe-zeile .formular.raster > div:has(> input[type="checkbox"]) { grid-column: 1 / -1; }
.liste.zeitraeume .luecke { color: var(--kritisch); font-weight: 500; }
/* Massenimport (docs/10 §11): Feld zum Wählen oder Hineinziehen mehrerer Dateien; Summen als eine Zeile, keine Kacheln */
.ablage { border: 1px dashed var(--linie-stark); border-radius: var(--rund-klein); padding: 4px 14px; max-width: 100%; }
.ablage.ziehen { border-color: var(--marke); background: var(--marke-flaeche); }
.ablage [data-auswahl] { overflow-wrap: anywhere; }
.datei-einlesen [hidden] { display: none !important; }
.masse-summen { margin: 10px 0 12px; color: var(--text-zweit); }
.masse-summen strong { color: var(--text); font-family: var(--schrift-eng); font-size: 1.1rem; }
@media (max-width: 700px) {
  .freigabe-zeile .formular.raster { grid-template-columns: minmax(0, 1fr); }
}
details.erfassen { margin-top: 12px; border-top: 1px solid var(--linie); padding-top: 12px; }
details.erfassen summary { cursor: pointer; color: var(--marke); font-weight: 500; }
details.erfassen .formular { margin-top: 10px; }

/* ------------------------------------------------------------------ Diagramm */
.diagramm { width: 100%; height: 420px; }
.diagramm.leer { height: auto; padding: 18px 0; color: var(--text-zweit); }
.diagramm.niedrig { height: 300px; }   /* Verteilungen der Schlachtauswertung */
.diagramm.hoch { height: 480px; }      /* Speck, Fleisch und Magerfleisch: drei Flächen untereinander */
.maskenwahl { display: inline-flex; align-items: center; gap: 6px; }   /* Maskensatz der Schlachtauswertung */
/* Partien der Schlachtauswertung (docs/18 §4a): Ampel je Partie – Fläche, Symbol und Text, nie Farbe allein (Regel 8) */
.ampelmarke { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; font-size: .8rem; white-space: nowrap; color: var(--text); }
.ampelmarke .symbol { font-size: .8em; }
.ampelmarke.gut { background: var(--marke-flaeche); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gut) 40%, transparent); }
.ampelmarke.gut .symbol { color: var(--gut); }
.ampelmarke.auffaellig { background: var(--warnung-flaeche); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warnung) 55%, transparent); }
.ampelmarke.auffaellig .symbol { color: var(--warnung); }
.ampelmarke.schlecht { background: var(--kritisch-flaeche); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kritisch) 35%, transparent); font-weight: 600; }
.ampelmarke.schlecht .symbol { color: var(--kritisch); }
.ampelmarke.offen { box-shadow: inset 0 0 0 1px var(--linie-stark); color: var(--text-zweit); }
.ampel-gross .ampelmarke { font-size: 1rem; padding: 4px 14px; }
/* Ampel-Zählung (docs/06, 15.10.2026): vier feste Plätze je Zeile (schlecht, auffällig, in Ordnung, nicht bewertet), jede Pille gleich
   breit, Symbol links, Zahl rechts in Tabellenziffern – so stehen die Pillen spaltengenau übereinander. Die Spalte ist linksbündig,
   der Kopf „Ampel“ auch (.links). max-content nur als Notbremse für eine vierstellige Zahl. */
.ampelzaehlung { white-space: nowrap; text-align: left; }
.ampelraster { display: inline-grid; grid-template-columns: repeat(4, minmax(3.9em, max-content)); gap: 4px; vertical-align: middle; font-size: .8rem; }
.ampelraster .ampelmarke { justify-content: space-between; padding: 0 7px; font-size: inherit; font-variant-numeric: tabular-nums; }
.ampelraster .anzahl { text-align: right; }
.ampelplatz { display: block; }
@media (max-width: 700px) {
  .ampelraster { grid-template-columns: repeat(4, minmax(3.5em, max-content)); gap: 3px; }
  .ampelraster .ampelmarke { padding: 0 5px; }
}
/* Übersicht der Schlachtauswertung: Hinweise für die Beratung (15.10.2026, docs/18 §5) – Liste je Betrieb, Warnungen mit ▲ wie auf der Betriebsseite;
   in der Liste „Betriebe“ die Zahl als zurückhaltende Marke wie in der Praxis-Übersicht der Schlachtbefunde */
.betriebsliste .zahl-marke { min-width: 1.6em; padding: 0 5px; background: var(--kritisch-flaeche); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kritisch) 45%, transparent); font-size: .78rem; text-decoration: none; }
.beratungsliste { list-style: none; margin: 0; padding: 0; }
.beratungsliste > li { padding: 10px 0; border-top: 1px solid var(--linie); }
.beratungsliste > li:first-child { border-top: 0; padding-top: 2px; }
.beratungsliste .betriebskopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0; }
.beratungsliste .betriebskopf a { font-weight: 600; overflow-wrap: anywhere; }
.beratungsliste .betriebskopf .zweit { font-size: .85rem; }
.beratungsliste ul { list-style: none; margin: 4px 0 0; padding: 0; }
.beratungsliste ul li { position: relative; padding-left: 1.4em; max-width: 78ch; margin-top: 2px; }
.beratungsliste ul .symbol { position: absolute; left: 0; top: .3em; font-size: .75em; color: var(--warnung); }
.partien td.hk { color: var(--text-zweit); font-size: .85rem; white-space: nowrap; }
.partien td.notiz { min-width: 220px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-zweit); font-size: .85rem; }
.liste tr.gruppenzeile th { padding-top: 18px; font-family: var(--schrift-eng); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; color: var(--text-zweit); }
.maskenwahl { flex-wrap: wrap; max-width: 100%; }   /* Schlachthof-Auswahl: lange Namen dürfen auf dem Telefon nicht überstehen */
.maskenwahl select { min-width: 0; max-width: 100%; flex: 1 1 10rem; }
.zwischentitel { margin: 34px 0 2px; font-size: 1.25rem; }
/* Zwischentitel stehen außerhalb der Karten – gleicher Einzug wie der Inhalt der Abschnitte (.abschnitt: 24px, schmal 14px) */
.zwischentitel, .zwischentitel + .unterzeile { padding-inline: 24px; }
.zwischentitel + .unterzeile { color: var(--text-zweit); font-size: .9rem; margin: 0 0 12px; }
.zahl-marke.zahl-marke-neutral { background: var(--flaeche-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--linie-stark); }
/* Farbpunkt im Tooltip (cockpit.js) – Farbe je Befundgruppe wie die Linie */
.tooltip-marke { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 10px; }
.tooltip-marke.reihe-1 { background: var(--reihe-1); } .tooltip-marke.reihe-2 { background: var(--reihe-2); }
.tooltip-marke.reihe-3 { background: var(--reihe-3); } .tooltip-marke.reihe-4 { background: var(--reihe-4); }
.tooltip-marke.reihe-5 { background: var(--reihe-5); } .tooltip-marke.reihe-6 { background: var(--reihe-6); }
.tooltip-marke.reihe-7 { background: var(--reihe-7); } .tooltip-marke.reihe-8 { background: var(--reihe-8); }
.tabellenansicht { margin-top: 8px; }
.tabellenansicht summary { cursor: pointer; color: var(--marke); }
.tabellenansicht table { font-size: .9rem; margin-top: 8px; }

/* ------------------------------------------------------------------ Bericht (A4-Blatt) */
.berichtseite { display: grid; grid-template-columns: minmax(0, auto) minmax(260px, 340px); gap: 24px; align-items: start; justify-content: center; }
.werkzeug { position: sticky; top: calc(var(--kopf-hoehe) + 16px); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten); padding: 16px 18px 18px; }
.werkzeug h2 { font-size: 1.15rem; }
.werkzeug form { margin: 0; }
.werkzeug .gruppe { border-top: 1px solid var(--linie); margin-top: 14px; padding-top: 12px; }

.blatt { width: 210mm; max-width: 100%; min-height: 297mm; background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); box-shadow: var(--schatten); padding: 15mm 15mm 16mm; font-size: 10.5pt; line-height: 1.4; }
.blatt h1 { font-size: 23pt; }
.blatt h2 { font-size: 13pt; margin: 0 0 6pt; padding-top: 9pt; border-top: 1.5pt solid var(--text); }
.blatt section { margin-top: 14pt; break-inside: avoid; }
.blatt section.umbruch-erlaubt { break-inside: auto; }
.blatt table { font-size: 9.5pt; }
.blatt th, .blatt td { padding: 3.5pt 5pt; }
.blatt .befundbogen .wert { font-size: 11pt; }
.blatt-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16pt; }
.blatt-kopf .marke-wort { font-size: 13pt; }
.blatt-kopf .marke-bild { width: 20pt; height: 20pt; }
.blatt-kopf .marke-reiter { font-size: 9pt; padding: 3pt 7pt; border-radius: 3pt; }
.blatt-praxis { font-size: 9.5pt; color: var(--text-zweit); margin: 3pt 0 0; }
.blatt-titel { margin: 16pt 0 0; }
.blatt-titel .betrieb { font-family: var(--schrift-eng); font-weight: 500; font-size: 15pt; margin: 2pt 0 0; }
.angaben { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 12pt 0 0; border-top: 1pt solid var(--linie-stark); border-bottom: 1pt solid var(--linie-stark); }
.angaben div { padding: 6pt 8pt 6pt 0; }
.angaben dt { font-size: 8.5pt; color: var(--text-zweit); }
.angaben dd { margin: 0; font-weight: 500; }
.blatt .diagramm { height: 330px; }
.blatt .freitext { white-space: pre-line; max-width: 78ch; }
.blatt .blick p { margin: 0 0 2pt; max-width: 86ch; }
.blatt .anhang table { font-size: 9pt; }
.blatt-fuss { margin-top: 18pt; padding-top: 7pt; border-top: 1pt solid var(--linie-stark); font-size: 8pt; color: var(--text-zweit); }

/* Der Stempel ist das Zeichen der tierärztlichen Freigabe */
.stempel { flex: none; font-family: var(--schrift-eng); font-weight: 600; font-size: 10pt; line-height: 1.25; text-align: center; color: var(--marke); border: 2pt solid var(--marke); outline: .75pt solid var(--marke); outline-offset: -4.5pt; padding: 8pt 14pt; transform: rotate(-3deg); margin: 2pt 4pt 0 0; }
.stempel strong { display: block; font-size: 13pt; font-weight: 700; }
.stempel.entwurf { transform: none; color: var(--text-zweit); border: 1pt dashed var(--linie-stark); outline: 0; font-weight: 500; }

@media (max-width: 1180px) {
  .berichtseite { grid-template-columns: minmax(0, 1fr); }
  .werkzeug { position: static; order: -1; }
}
@media (max-width: 900px) {
  .spalten, .spalten.gleich { grid-template-columns: minmax(0, 1fr); }
  .formular.raster { grid-template-columns: minmax(0, 1fr); }
  .spalten > .abschnitt + .abschnitt { border-left: 0; border-top: 1px solid var(--linie); }
}
@media (max-width: 700px) {
  main { padding: 16px 12px 40px; }
  .fusszeile { padding: 12px 12px 20px; }
  .kopf { position: static; padding: 8px 12px 0; flex-wrap: wrap; }
  .kopf nav { margin-left: -8px; padding: 4px 0 6px; width: 100%; }
  .kopf .praxisname { border-left: 0; padding-left: 0; }
  .kopf { position: relative; }
  /* schmal: das Menü nimmt die ganze Breite unter der ersten Zeile ein, statt rechts aus dem Bild zu laufen */
  .modulwahl { position: static; }
  .modulwahl-menue { left: 12px; right: 12px; top: 52px; width: auto; min-width: 0; max-width: none; }
  .modulwahl-knopf { padding: 8px 12px; }   /* größeres Ziel für den Finger */
  .modulwahl-eintrag { padding: 11px 10px; }
  .reiter { top: 8px; }
  .abschnitt { scroll-margin-top: 64px; }
  .werkzeugzeile .treffer { margin-left: 0; }
  .abschnitt { padding: 16px 14px; }
  .zwischentitel, .zwischentitel + .unterzeile { padding-inline: 14px; }
  h1 { font-size: 1.6rem; }
  .lage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .lage div { padding: 0 16px; border-left: 0; }
  .lage div:nth-child(even) { border-left: 1px solid var(--linie); }
  .betriebssuche kbd { display: none; }
  .lage dd { font-size: 1.7rem; }
  .blatt { padding: 8mm; }
  .angaben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ Zeitraum und Seite je Lieferung (Erprobung, Punkt 4, 13.10.2026)
   Zeitraumwahl: Vorgaben als Umschalter, daneben „von–bis“ als aufklappbares Feld (<details>, ohne Skript). Gilt für Befund und
   Schlachtauswertung (cockpit/_zeitraum.html). */
.zeitraumwahl { display: inline-flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; position: relative; max-width: 100%; }
.zeitraum-frei > summary { list-style: none; cursor: pointer; padding: 8px 13px; border: 1px solid var(--linie); border-radius: 15px; background: var(--flaeche); color: var(--text-zweit); font-weight: 500; white-space: nowrap; }
.zeitraum-frei > summary::-webkit-details-marker { display: none; }
/* Pfeil als Rahmen-Dreieck: Barlow hat kein ▾ */
.zeitraum-frei > summary::after { content: ""; display: inline-block; margin-left: 7px; vertical-align: 2px; border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0; }
.zeitraum-frei[open] > summary::after { border-top-width: 0; border-bottom: 4px solid currentColor; }
.zeitraum-frei > summary:hover { background: var(--flaeche-2); color: var(--text); }
.zeitraum-frei > summary.aktiv { background: var(--marke); border-color: var(--marke); color: var(--marke-text); }
.zeitraum-frei > summary:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--marke-flaeche); }
.zeitraum-form { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: min(25rem, calc(100vw - 24px)); padding: 12px 14px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund-klein); box-shadow: var(--schatten); margin: 0; }
.zeitraum-felder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.zeitraum-felder label { display: flex; flex-direction: column; gap: 3px; flex: 1 1 8.5rem; }
.zeitraum-felder input { width: 100%; }
.zeitraum-hilfe { margin: 8px 0 0; font-size: .8rem; color: var(--text-zweit); }
.zeitraum-fehler { margin: 6px 0 0; }
.uebersicht .gruppen-titel .gruppen-zusatz { text-transform: none; letter-spacing: 0; }
/* Lieferungsliste der Betriebsakte und Tierliste der Lieferung */
.lieferungen th small, .lieferungen td small { display: block; font-size: .72rem; color: var(--text-zweit); font-weight: 400; }
.tierliste td:last-child { min-width: 260px; }
.tierliste tr.ohne-befund td { color: var(--text-zweit); }
.tierbefund { display: block; padding: 1px 0; }
.tierbefund .roh { font-family: var(--schrift-eng); color: var(--text-zweit); }
.tierbefund .offen-zuordnung { margin-left: 0; border-style: dashed; }
@media (max-width: 700px) {
  .zeitraumwahl { width: 100%; }
  .zeitraumwahl .umschalter { flex-wrap: wrap; }
}
@media print {
  .zeitraumwahl { display: none; }
}

/* ------------------------------------------------------------------ Druck: nur das Blatt */
@page { size: A4; margin: 14mm 15mm 15mm; }
/* Aufträge (docs/20, docs/06 „Bausteine“): Posteingang „Meine Aufgaben“ mit überfälligen Zeilen in Warnfarbe (immer mit Symbol
   und Text) */
/* Auftrag zu diesem Betrieb (16.10.2026, docs/20 §2): ein Knopf je Betrieb im Kopf der Seite (zweitrangig, neben PDF), in den Listen
   der Übersichten nur ein Pfeil in Tanne mit `title` und Vorlesetext – kein Knopf mehr an einzelnen Bewertungen */
.auftrag-symbol { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 6px;
  vertical-align: -5px; border-radius: var(--rund-klein); color: var(--marke); }
.auftrag-symbol svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.auftrag-symbol:hover { background: var(--marke-flaeche); }
.auftrag-symbol:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--marke-flaeche); }
/* Formular „Auftrag zu diesem Betrieb“: Punkte des Bestands mit Häkchen */
.bestand-punkte { border: 0; padding: 0; margin: 0; min-width: 0; }
.bestand-punkte legend { font-weight: 500; margin-bottom: 4px; padding: 0; }
.bestand-punkte .punkte-kopf { margin: 10px 0 4px; font-size: .88rem; color: var(--text-zweit); }
.bestand-punkte .punkte { list-style: none; margin: 0; padding: 0; }
.bestand-punkte .punkte li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.bestand-punkte .punkte input { margin-top: 4px; flex: none; width: auto; }
.bestand-punkte .punkte label { font-weight: 400; margin: 0; }
.liste.auftraege td.datum { white-space: nowrap; }
.liste.auftraege th[scope="row"] { font-weight: 500; white-space: normal; min-width: 12em; max-width: 42ch; overflow-wrap: anywhere; }
.liste.auftraege td { white-space: nowrap; }
.liste.auftraege tr.ueberfaellig > * { background: var(--warnung-flaeche); }
.liste.auftraege .symbol, .ueberfaellig-text .symbol, .eintrag.ueberfaellig .symbol { color: var(--warnung); font-size: .8em; margin-right: 4px; }
.ueberfaellig-text { margin: 0; }
/* Telefon: jede Zeile als kleiner Block – Titel zuerst, darunter Fällig, Betrieb, Herkunft, von/an mit grauer Beschriftung */
@media (max-width: 600px) {
  .liste.auftraege thead { display: none; }
  .liste.auftraege, .liste.auftraege tbody { display: block; }
  .liste.auftraege tr { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-bottom: 1px solid var(--linie); }
  .liste.auftraege th, .liste.auftraege td { display: block; padding: 0; border: 0; white-space: normal; max-width: none; min-width: 0; }
  .liste.auftraege th[scope="row"] { order: -1; margin-bottom: 2px; }
  .liste.auftraege tr.ueberfaellig { background: var(--warnung-flaeche); border-radius: var(--rund-klein); }
  .liste.auftraege td[data-titel]::before { content: attr(data-titel) " "; color: var(--text-zweit); font-size: .85rem; }
}
.kopf nav a.aufgaben .zahl-marke { margin-left: 5px; }

/* Einzelne Abstände und Breiten, die früher als style="…" in den Vorlagen standen. Die Content-Security-Policy
   (style-src 'self') lässt keine style-Attribute zu (docs/13 §4). !important ersetzt den Vorrang, den das
   style-Attribut vor jeder Regel hatte – so bleibt das Aussehen unverändert. Neue Abstände lieber ins Bauteil. */
.oben-0 { margin-top: 0 !important; }
.oben-6 { margin-top: 6px !important; }
.oben-6pt { margin-top: 6pt !important; }
.oben-8 { margin-top: 8px !important; }
.oben-10 { margin-top: 10px !important; }
.oben-12 { margin-top: 12px !important; }
.oben-14 { margin-top: 14px !important; }
.oben-16 { margin-top: 16px !important; }
.unten-2 { margin-bottom: 2px !important; }
.unten-6 { margin-bottom: 6px !important; }
.unten-12 { margin-bottom: 12px !important; }
.unten-14 { margin-bottom: 14px !important; }
.ohne-rand { margin: 0 !important; }
.breite-320 { max-width: 320px !important; }
.breite-360 { max-width: 360px !important; }
.zeilen { white-space: pre-line !important; }

@media print {
  body { background: #fff; }
  .kopf, .werkzeug, .meldungen, .pfad, .reiter, .kein-druck, .fusszeile { display: none !important; }
  main { max-width: none; padding: 0; }
  .berichtseite { display: block; }
  .blatt { width: auto; min-height: 0; border: 0; box-shadow: none; padding: 0; }
  .blatt, .blatt * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; text-decoration: none; }
}