/* vetAkte – 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 VetAkte: 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; }
/* Wechsel zwischen den Modulen, die für den Benutzer freigeschaltet sind */
.kopf nav.module { margin-left: 6px; }
.kopf nav.module + nav { margin-left: auto; }
.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 wie in der App: Anfang in Tanne, „Akte" in Bernstein */
.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 */
.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; }
.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; }
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); }
.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; }
.absender-probe { border: 1px solid var(--linie); border-radius: var(--rund-klein); padding: 12px 14px; }
.absender-probe p { margin: 0; }

/* Praxis-Übersicht: Werkzeugzeile (Suche, Filter) über der Tabelle, Spalten per Klick sortierbar (oberflaeche.js) */
.werkzeugzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-bottom: 1px solid var(--linie); }
.werkzeugzeile .suche { flex: 0 1 300px; min-width: 0; }
.werkzeugzeile .suche input { width: 100%; }
.werkzeugzeile kbd { font: inherit; font-size: .8rem; padding: 0 6px; border: 1px solid var(--linie-stark); border-radius: 5px; color: var(--text-zweit); }
.wahlmarke { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; 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 input { margin: 0; }
.werkzeugzeile .treffer { margin-left: auto; color: var(--text-zweit); font-size: .9rem; }
.uebersicht { font-size: .92rem; }
.uebersicht th, .uebersicht td { padding: 9px 6px; }
.uebersicht thead th { white-space: normal; line-height: 1.15; background: var(--flaeche-2); padding-top: 10px; padding-bottom: 8px; }
.uebersicht tbody tr { transition: background .12s; }
.uebersicht tbody tr:hover, .uebersicht tbody tr:hover th { background: var(--flaeche-2); }
.uebersicht th:first-child { position: sticky; left: 0; background: var(--flaeche); z-index: 1; padding-left: 18px; }
.uebersicht thead th:first-child { background: var(--flaeche-2); }
.uebersicht tbody th a { font-weight: 600; text-decoration: none; }
.uebersicht tbody th a:hover { text-decoration: underline; }
/* Notiz einzeilig mit Auslassung: so sind alle Zeilen gleich hoch, egal wie die Betriebe gerade sortiert sind; der ganze Text steht im Hinweis */
.uebersicht td.notiz { min-width: 130px; max-width: 230px; overflow: hidden; text-overflow: ellipsis; color: var(--text-zweit); font-size: .85rem; text-align: left; padding-right: 18px; }
.uebersicht tr[hidden] { display: none; }
.sortierknopf { all: unset; cursor: pointer; display: inline-block; border-radius: 4px; }
.sortierknopf:hover { color: var(--text); }
.sortierknopf:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
th[aria-sort="ascending"] .sortierknopf::after { content: " ↑"; color: var(--marke); }
th[aria-sort="descending"] .sortierknopf::after { content: " ↓"; color: var(--marke); }
th[aria-sort] { color: var(--text); }

/* Ampel: Fläche + Symbol + Text (title) – nie Farbe allein. In der Übersicht trägt die Wertmarke die Fläche. */
.ampel .symbol { margin-right: 4px; font-size: .8em; }
.wertmarke { display: inline-block; padding: 2px 9px; margin: -2px -9px; border-radius: 999px; }
td.ampel.rot .wertmarke { background: var(--kritisch-flaeche); font-weight: 600; }
td.ampel.gelb .wertmarke { background: var(--warnung-flaeche); }
td.ampel.leer { color: var(--text-zweit); }
.rot .symbol { color: var(--kritisch); }
.gelb .symbol { color: var(--warnung); }
.legende { font-size: .875rem; color: var(--text-zweit); margin-top: 14px; max-width: 110ch; }

/* ------------------------------------------------------------------ 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 .vorher { text-align: left; color: var(--text-zweit); font-size: .9rem; }
.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; }

/* ------------------------------------------------------------------ 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; }
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); }
/* 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; }
  .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; }
  .reiter { top: 8px; }
  .abschnitt { scroll-margin-top: 64px; }
  .werkzeugzeile .treffer { margin-left: 0; }
  .abschnitt { padding: 16px 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); }
  .werkzeugzeile kbd { display: none; }
  .lage dd { font-size: 1.7rem; }
  .blatt { padding: 8mm; }
  .angaben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ Druck: nur das Blatt */
@page { size: A4; margin: 14mm 15mm 15mm; }
/* 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 { 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; }
}