/* ===========================================================================
   TAMG-Wedge – Oberfläche
   Ein Farb-, Abstands- und Typografiesystem für die ganze App.
   =========================================================================== */
:root {
  color-scheme: light;

  /* Flächen und Text */
  --bg: #f1f4f8;
  --card: #ffffff;
  --ink: #14212e;
  --ink-2: #3b4b5a;
  --muted: #6a7886;
  --line: #e1e7ee;
  --line-2: #eef2f6;

  /* Marke */
  --brand: #0d5c8a;
  --brand-dark: #0a4a70;
  /* Die Kopfleiste: dasselbe Blau wie die Knöpfe, eine Spur heller – damit sie als Glasscheibe
     darüber liegt und nicht als zweiter Knopf wirkt. */
  --kopf-glas: #1a6b9c;
  --brand-tint: #e9f2f8;
  --brand-ink: #ffffff;

  /* Ampel: Textfarben kontraststark, Flächen zart, Punkte gesättigt */
  --gruen: #15704a; --gruen-bg: #e6f4ec; --gruen-dot: #1f9d5b;
  --gelb:  #85590a; --gelb-bg:  #fdf2da; --gelb-dot:  #d99b00;
  --rot:   #ad2519; --rot-bg:   #fdebe9; --rot-dot:   #d1372a;
  /* Pferdestatus (03.10.2026): bewusst keine Ampelfarbe. Gelb hieß beim Schlachtpferd „Achtung“, grün beim
     Freizeitpferd „in Ordnung“ – dieselben Farben wie „Pflicht offen“ und „zulässig“ in der Prüfung. Das
     Schlachtpferd ist aber der rechtliche Regelfall, kein Warnzustand. */
  --schlacht: #1f4f8a; --schlacht-bg: #e9f0fa; --schlacht-rand: #cad9ee;
  --frei: #4b5868; --frei-bg: #eef1f5; --frei-rand: #d6dde5;

  /* Form */
  /* Rundungen (14.10.2026, Nutzer: „alles mit der gleichen Glättung wie die Seiten der schwebenden Leiste“): Was eine
     Zeile hoch ist – Knöpfe, Felder, Auswahllisten, Umschalter, Marken – hat runde Enden wie die Leiste (--r-knopf).
     Flächen über mehrere Zeilen (Karten, Hinweise, Textfelder, Listen) bekommen weiche, große Ecken. */
  --r-card: 20px; --r-ctl: 12px; --r-pill: 999px; --r-knopf: 999px;
  --sh-1: 0 1px 2px rgba(16, 32, 48, .05), 0 2px 10px rgba(16, 32, 48, .04);
  --sh-2: 0 6px 22px rgba(16, 32, 48, .12);
  --ring: 0 0 0 3px rgba(13, 92, 138, .22);
  /* Dieselbe Ringbreite in den Ampelfarben: Fokus, Fehlermarkierung und die kurze Hervorhebung
     nach einer Aenderung sind dasselbe Signal in verschiedenen Rollen. Vorher stand die
     3px-Regel funfmal einzeln da, jede mit eigener Deckkraft. */
  --ring-rot: 0 0 0 3px rgba(209, 55, 42, .18);
  --ring-gelb: 0 0 0 3px rgba(197, 138, 12, .38);
  --ring-gruen: 0 0 0 3px rgba(31, 157, 91, .35);
  --ring-aus: 0 0 0 3px rgba(0, 0, 0, 0);

  /* Abstände: sieben Stufen.
     Gezählt am 23.09.2026 standen daneben 31 einzeln hingeschriebene Werte in 109 Zeilen –
     zwischen 0,8 und 8 px allein neunzehn (.05, .1, .12, .15, .18, .2, .22, .24, .26, .3, .35,
     .38, .4, .42, .45, .46, .48 rem). Solche Unterschiede sieht niemand als Ordnung; sie machen
     nur, dass nichts zueinander passt. --s0 ist neu: die feine Stufe, die vorher fehlte und
     deshalb siebzehnmal von Hand erfunden wurde. */
  --s0: .125rem; --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem;
  --kopf-h: 60px;
  /* Die Kopfleiste schwebt (14.10.2026, Nutzer: „schwebt und rund an den Enden“): Abstand nach oben und zu den Seiten,
     so breit wie der Inhalt darunter (main: höchstens 1320 px, Rand --s4) – breiter war sie dem Nutzer „zu lang“. */
  --kopf-abstand: var(--s3);
  --kopf-seite: max(var(--s4), calc((100% - 1320px) / 2 + var(--s4)));
  --kopf-rund: 30px;

  /* Schriftgrößen: sechs Stufen.
     Gezählt am 23.09.2026 standen hier 26 verschiedene Werte, alle einzeln hingeschrieben –
     zwischen 12,0 und 13,5 px allein acht (.8, .82, .83, .84, .85, .86, .88, .89 rem).
     Unterschiede von einem halben Pixel liest niemand als Rangfolge; sie wirken nur unruhig.
     Wer eine neue Stufe braucht, nimmt die nächstliegende – oder ändert diese Liste. */
  --t-xl: 1.06rem;   /* Überschrift einer Karte */
  --t-l:  .95rem;    /* Zwischenüberschrift, Knopfbeschriftung */
  --t-m:  .88rem;    /* Erklärtext */
  --t-s:  .82rem;    /* Nebenangabe, Tabelleninhalt */
  --t-xs: .76rem;    /* Kleingedrucktes */
  --t-xxs: .68rem;   /* Versalien-Beschriftung */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;            /* keine waagerechte Seitenverschiebung */
}
h1, h2, h3 { line-height: 1.25; }
:where(a) { color: var(--brand); }
:where(button, input, select, textarea):focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ------------------------------------------------------------------ Kopf -- */
/* Eine Arbeitsleiste, keine Website-Kopfzeile: flache Fläche statt Verlauf, die Untertitelzeile
   ist weg (sie stand auf jedem Bildschirm und sagte nach dem ersten Mal nichts mehr), und die
   Reiter tragen nur noch der aktive sichtbares Gewicht. */
header.top {
  position: sticky; top: var(--kopf-abstand); z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s4); flex-wrap: wrap;
  padding: 0 var(--s4); min-height: var(--kopf-h);
  margin: var(--kopf-abstand) var(--kopf-seite) 0; border-radius: var(--kopf-rund);
  /* Glas: der Inhalt zieht deutlich sichtbar darunter hindurch. Die Deckung ist so weit
     heruntergenommen, wie es geht, ohne dass die weiße Schrift auf hellem Untergrund verliert;
     die starke Unschärfe und `saturate` halten sie lesbar, wo sonst Text gegen Text stünde.
     Der schmale Lichtsaum oben und die dunklere Kante unten geben der Scheibe Dicke. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--kopf-glas) 80%, transparent) 0%,
    color-mix(in srgb, var(--kopf-glas) 88%, transparent) 100%);
  -webkit-backdrop-filter: saturate(200%) blur(22px);
  backdrop-filter: saturate(200%) blur(22px);
  color: var(--brand-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(0, 0, 0, .16),
    0 2px 6px rgba(16, 32, 48, .14),
    0 14px 32px -12px rgba(16, 32, 48, .38);
}
/* Auf der Scheibe liegender Text braucht etwas Halt gegen den durchscheinenden Untergrund. */
header.top .brand strong, header.top #nav button { text-shadow: 0 1px 2px rgba(10, 28, 44, .35); }
header.top #nav button.active { text-shadow: none; }
/* Ohne Unschärfe (ältere Browser) bliebe durchscheinend nur unscharf lesbar – dort deckt sie. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.top { background: var(--kopf-glas); }
}
.brand { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.brand strong { font-size: var(--t-l); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; opacity: .92; }
/* Der Name der Praxis im Kopf: lange Namen enden mit … statt die Reiter in die nächste Zeile zu schieben. */
#kopf-praxis { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }
.logo {
  background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; font-size: var(--t-xs);
  padding: var(--s1) var(--s2); border-radius: var(--r-knopf); letter-spacing: .08em;
}
/* Die Reiter in drei Gruppen, nach Häufigkeit (so auch die Material-Richtlinien für Navigation:
   Häufiges zuerst, Verwandtes zusammen, Einstellungen ans Ende). Die tägliche Arbeit steht gleich
   neben dem Namen, wo der Blick anfängt; die Meldung ist durch eine Linie abgesetzt, damit man
   sie auf einen Blick findet, obwohl sie nur zweimal im Jahr dran ist; das Einrichten steht ganz
   rechts und leiser – man braucht es einmal und danach selten. */
#nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); min-width: 0; flex: 1 1 auto; }
.nav-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
/* Der Name ist kein Reiter und trennt sich deshalb anders ab als die Reitergruppen: nicht mit einer
   Linie, sondern mit einer eigenen, etwas dunkleren Glasfläche am linken Rand, die vor den Reitern
   weich ausläuft. Mit derselben Linie wie vor der Meldung sah er aus wie eine weitere Gruppe. */
.brand {
  align-self: stretch; margin-left: calc(-1 * var(--s4)); padding: 0 var(--s5) 0 var(--s4);
  background: linear-gradient(90deg, rgba(6, 22, 38, .40), rgba(6, 22, 38, .28) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  border-radius: var(--kopf-rund) 0 0 var(--kopf-rund);   /* folgt dem runden Ende der Leiste */
}
/* Stehen die Reiter in eigener Zeile darunter, trennt schon der Umbruch – dann ohne Fläche. */
header.top.umgebrochen .brand { background: none; padding-right: 0; }

/* Zwischen den Reitergruppen: eine feine Rille im Glas – dunkle Kante, daneben ein Lichtsaum, oben
   und unten weich auslaufend. So liegt auch die Kopfleiste selbst (heller Saum oben, dunkle Kante unten). */
.nav-pflicht::before {
  content: ""; flex: none; width: 2px; height: 28px;
  background: linear-gradient(90deg, rgba(6, 22, 38, .30) 0 1px, rgba(255, 255, 255, .42) 1px 2px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
}
.nav-pflicht { position: relative; padding-left: var(--s4); }
.nav-pflicht::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
/* Beginnt die Meldung eine neue Zeile (Telefon), stünde die Rille allein am Zeilenanfang. Nur die Linie
   verschwindet, der Abstand bleibt – sonst rückte die Gruppe zurück und bräche wieder um. */
header.top.pflicht-neue-zeile .nav-pflicht::before { display: none; }
.nav-einrichtung { margin-left: auto; }
#nav button {
  background: none; color: rgba(255, 255, 255, .82);
  border: 0; border-radius: var(--r-knopf);
  padding: var(--s2) var(--s3); margin: 0; font-size: var(--t-m); font-weight: 500;
  cursor: pointer; transition: background .12s, color .12s;
}
#nav button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
#nav button.active { background: #fff; color: var(--brand-dark); font-weight: 600; }
/* „Einrichtung“ (13.10.2026, Nutzer): zugeklappt ein Knopf, der den offenen Bereich nennt. Aufgeklappt stehen die Bereiche
   links neben dem Knopf in der Kopfleiste (14.10.2026, Nutzer: „nach links öffnen, in der oberen Leiste“ – vorher eine
   Spalte nach unten) und bleiben stehen, bis man wieder zuklappt. Der Knopf bleibt dabei, wo er war. */
.nav-einrichtung { flex-wrap: nowrap; justify-content: flex-end; }
/* Aufgeklappt zählt die Gruppe beim Umbrechen der Leiste nicht mit (width/min-width 0) und holt sich den Rest der Zeile mit
   flex-grow – sonst rutschten alle Reiter unter den Namen. Ob die Bereiche dort in eine Zeile passen, misst app.js
   (einrichtungLage); wenn nicht, stehen sie in einer eigenen Zeile der Leiste darunter, rechtsbündig unter dem Knopf. */
.nav-einrichtung.offen { flex: 1 1 0; width: 0; min-width: 0; }
/* Der Knopf bleibt beim Aufklappen rechts stehen, die Bereiche öffnen sich links daneben (15.10.2026, Nutzer: „nicht nach
   links springen, nur nach links öffnen“ – ein Versuch mit dem Knopf vor den Bereichen ist zurückgenommen). */
.nav-einrichtung-liste { display: flex; justify-content: flex-end; flex: 0 1 auto; min-width: 0; animation: einrichtung-auf .18s ease-out; }
.nav-einrichtung-liste[hidden] { display: none; }
.nav-einrichtung-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s0); min-width: 0;
  padding: var(--s0); border-radius: 18px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
/* In mehreren Zeilen braucht die Leiste oben und unten Luft; die Fläche hinter dem Namen reicht trotzdem bis an die Kanten. */
header.top.einrichtung-zeile, header.top.umgebrochen { padding-top: var(--s2); padding-bottom: var(--s2); }
header.top.einrichtung-zeile:not(.umgebrochen) .brand { margin-top: calc(-1 * var(--s2)); margin-bottom: calc(-1 * var(--s2)); }
header.top.einrichtung-zeile .nav-einrichtung { display: contents; }
header.top.einrichtung-zeile #nav .nav-klapper { margin-left: auto; }
header.top.einrichtung-zeile .nav-einrichtung-liste { order: 2; flex: 1 1 100%; contain: inline-size; }
@keyframes einrichtung-auf { from { opacity: 0; transform: translateX(14px); } }
@media (prefers-reduced-motion: reduce) { .nav-einrichtung-liste { animation: none; } }
/* Knapp gesetzt, damit die Bereiche auch in der Leiste in Inhaltsbreite (1440 px Fenster) neben dem Knopf Platz haben. */
#nav .nav-einrichtung-liste button { flex: none; white-space: nowrap; padding: var(--s1) .4rem; font-size: var(--t-s); color: rgba(255, 255, 255, .8); }
#nav .nav-einrichtung-liste button.active { color: var(--brand-dark); }
/* Der Knopf sieht in jedem Zustand wie ein Knopf aus (14.10.2026, Nutzer: zugeklappt „erkennt man nicht richtig, dass man es
   wieder aufklappen kann“ – da stand nur ein Wort mit einem dünnen Haken): eine helle Pille mit Rand und einem Pfeil. */
#nav .nav-klapper {
  flex: none; display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) 1em var(--s2) .8em; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); color: #fff; font-weight: 550;
}
#nav .nav-klapper:hover { background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
/* Der Pfeil steht auf der Seite, nach der aufgeklappt wird: zugeklappt zeigt er nach links, aufgeklappt nach rechts. */
#nav .nav-klapper-pfeil { flex: none; order: -1; transform: rotate(90deg); transition: transform .18s ease; }
#nav .nav-klapper[aria-expanded="true"] .nav-klapper-pfeil { transform: rotate(-90deg); }
#nav .nav-klapper[aria-expanded="true"] { background: rgba(255, 255, 255, .24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
/* Zugeklappt und in einem der Bereiche: Der Knopf ist der aktive Reiter und nennt ihn. Aufgeklappt zeigt es der Eintrag. */
#nav .nav-einrichtung.aktiv .nav-klapper[aria-expanded="false"] { background: #fff; box-shadow: none; color: var(--brand-dark); font-weight: 600; text-shadow: none; }
#nav .nav-menue-ort:empty, #nav .nav-klapper[aria-expanded="true"] .nav-menue-ort { display: none; }
#nav .nav-menue-ort::before { content: "·"; margin-right: .35em; opacity: .55; }

/* ------------------------------------------------------- Blende beim Laden -- */
/* Sieht aus wie die leere App – Kopfleiste oben, Fläche darunter – und blendet aus, sobald alles steht (app.js setzt
   `bereit`). Beim Praxiswechsel blendet sie vorher ein; so sieht man das Neuladen dazwischen nicht. */
.start-blende {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: var(--bg);
  transition: opacity .2s ease;
}
.start-blende::before {
  content: ""; position: absolute; inset: var(--kopf-abstand) var(--kopf-seite) auto; height: var(--kopf-h); border-radius: var(--kopf-rund);
  background: linear-gradient(180deg, color-mix(in srgb, var(--kopf-glas) 80%, var(--bg)) 0%, color-mix(in srgb, var(--kopf-glas) 88%, var(--bg)) 100%);
  box-shadow: 0 2px 6px rgba(16, 32, 48, .16);
}
.start-blende-text { margin: 0; padding: var(--s4) var(--s5); font-size: var(--t-xl); font-weight: 600; color: var(--ink-2); text-align: center; }
html.bereit .start-blende { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }

/* ----------------------------------------------------------------- Raster -- */
main { padding: var(--s4); max-width: 1320px; margin: 0 auto; }
.grid-2 {
  display: grid; gap: var(--s4);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
.grid-2 > * { min-width: 0; }
/* Der Pferdestamm steht nicht neben dem Formular, sondern darunter.
   Nebeneinander blieben der Tabelle 687 px; sie braucht 721 und scrollte waagerecht – wobei das
   Ende der Statusspalte unter der festgehaltenen Aktionsspalte verschwand („Schlachtpf…“). Beide
   Spalten zu quetschen half keinem von beiden: Das Formular ist kurz, die Tabelle ist der Inhalt. */
.grid-2.tabelle-unten { grid-template-columns: minmax(0, 1fr); }
.grid-2.tabelle-unten > form.card { max-width: 720px; }
@media (max-width: 980px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* Flach, mit Hairline statt Schatten: Ein Werkzeug soll nicht schweben. */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s5); min-width: 0;
}
.card + .card, .grid-2 + .card, .card + .grid-2 { margin-top: var(--s4); }
/* Nebeneinander, nicht untereinander: Im Raster ist die zweite Karte kein Nachfolger, sondern die
   Nachbarin. Die geerbten 16 px Abstand schoben die Prüfkarte gegenüber dem Formular nach unten –
   die beiden Überschriften standen nicht auf einer Höhe. */
.grid-2 > .card + .card { margin-top: 0; }
.card.narrow { max-width: 680px; }
h2 { margin: 0 0 var(--s3); font-size: var(--t-xl); font-weight: 650; letter-spacing: -.01em; }
h3 { margin: var(--s4) 0 var(--s2); font-size: var(--t-l); font-weight: 650; }

.head-row {
  display: flex; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); align-items: flex-start;
}
.head-row h2 { margin: 0; }
/* Angehefteter Kopf über langen Listen (Pferdestamm, Journal): Überschrift, Suche und Filter
   bleiben beim Scrollen oben stehen. Sonst verschwand die Suche aus dem Bild, sobald man in der
   Liste nach unten ging. Der Hintergrund reicht bis an den Kartenrand, damit die Zeilen darunter
   nicht durchscheinen. */
.haftkopf {
  position: sticky; top: var(--kopf-ist, var(--kopf-h)); z-index: 6;
  margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s3); padding: var(--s5) var(--s5) var(--s3);
  border-radius: var(--r-card) var(--r-card) 0 0;
  /* Glas wie die Kopfleiste: Die Liste zieht leicht sichtbar darunter durch. */
  background: color-mix(in srgb, var(--card) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  transition: border-radius .15s;
}
/* Haftet der Kopf oben an, bekommt er eine feine Kante nach unten. Liegt er noch in der Karte,
   gibt es nichts zu trennen. */
.haftkopf.angeheftet {
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 var(--line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .haftkopf { background: var(--card); }
}
/* Beim Filtern bleibt die Karte so hoch, dass die Tabelle genau unter dem angehefteten Kopf
   beginnen kann (siehe listeOhneSprung in app.js). --tabelle-ab ist der Abstand vom Kartenrand bis
   zur Tabelle – im Journal stehen davor noch Hinweise. */
.card.suche-aktiv { min-height: calc(100vh - var(--kopf-ist, var(--kopf-h)) - var(--haftkopf-h, 0px) + var(--tabelle-ab, 0px) + var(--s3)); }
@media (max-width: 640px) {
  .haftkopf { margin: calc(-1 * var(--s3)) calc(-1 * var(--s4)) var(--s3); padding: var(--s3) var(--s4); }
}
/* Pferdestamm: Suchfeld und Knopf auf einer Zeile. Das Feld nimmt den Platz, der Knopf behält
   seine Breite. min-width: 0, weil ein Eingabefeld von sich aus rund 20 Zeichen breit sein will –
   auf dem Telefon schob es sonst den Knopf aus der Karte. */
#pferdestamm-kopf { flex-wrap: nowrap; align-items: center; }
#pferdestamm-kopf .actions.inline { flex: 0 1 34rem; flex-wrap: nowrap; min-width: 0; }
#pferdestamm-kopf .actions.inline input { min-width: 0; flex: 1 1 auto; }
#pferdestamm-kopf .actions.inline button { flex: none; }
@media (max-width: 640px) {
  #pferdestamm-kopf { flex-wrap: wrap; }
  #pferdestamm-kopf .actions.inline { flex: 1 1 100%; }
}

/* Reiter mit Umschalter (Journal, Meldung): oben Überschrift, Umschalter, (?), Suche und die Aktion
   bzw. das Menü; darunter Filter und Optionen, rechtsbündig. */
.reiterkopf { display: block; }
.kopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.kopfzeile h2 { margin: 0 var(--s2) 0 0; }
/* Mit Kennung: .actions.inline setzt margin: 0 und schlug sonst das margin-left: auto aus. */
.reiterkopf .actions.kopf-suche { margin-left: auto; flex: 0 1 24rem; min-width: 12rem; flex-wrap: nowrap; }
.reiterkopf .actions.kopf-suche input { flex: 1 1 auto; min-width: 0; }
/* Reicht die Breite nicht für Umschalter, Suche und Menü in einer Zeile, bekommt die Suche eine
   eigene – sonst rutschte das Menü allein nach links in die nächste Zeile. */
@media (max-width: 1150px) {
  .reiterkopf .actions.kopf-suche { order: 6; flex: 1 1 100%; margin-left: 0; }
  .reiterkopf .kopfzeile > .menue { margin-left: auto; }
  .reiterkopf .actions.kopf-suche:not([hidden]) + .kopf-aktion { margin-left: auto; }
}
/* Mit Kennung: .actions.inline setzt margin: 0 und schlug den Abstand sonst aus – die Suche klebte
   direkt unter der Überschrift. */
.reiterkopf .actions.filterzeile { margin-top: var(--s3); flex-wrap: wrap; justify-content: flex-end; }
/* Im Archiv gibt es die Jahresauswahl erst, wenn Jahre da sind – bis dahin keine leere Zeile. */
.reiterkopf .actions.filterzeile:not(:has(> :not([hidden]))) { display: none; }
.filterzeile input { flex: 1 1 16rem; max-width: 26rem; }
/* Die Hauptaktion eines Reiters (Meldung: „Meldedatei erzeugen“) steht rechts in der Kopfzeile –
   neben der Suche, wenn es eine gibt. */
.reiterkopf .kopf-aktion { margin-left: auto; }
.reiterkopf .actions.kopf-suche:not([hidden]) + .kopf-aktion { margin-left: 0; }
/* Beschriftung und Auswahl in einer Zeile – „Datenjahr [2026 ▾]“ statt übereinander. */
label.feld-inline { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; font-size: var(--t-m); color: var(--ink-2); font-weight: 500; }
.reiter-teil > .status:empty { display: none; }

/* Umschalter: eine Liste zur Zeit. Die gewählte liegt hell auf der grauen Fläche. */
.umschalter { display: inline-flex; gap: 2px; padding: 3px; background: var(--line-2); border-radius: var(--r-knopf); }
.umschalter button {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 30px; padding: var(--s1) var(--s3);
  background: transparent; border-color: transparent; color: var(--ink-2); font-weight: 500;
}
.umschalter button:hover { background: rgba(255, 255, 255, .6); border-color: transparent; color: var(--ink); }
.umschalter button[aria-selected="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 32, 48, .14); }
.umschalter .zahl {
  min-width: 1.5em; padding: 0 var(--s1); border-radius: 999px;
  background: var(--line); color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; text-align: center;
  font-variant-numeric: tabular-nums;
}
.umschalter .zahl:empty { display: none; }
/* Laufende Wartezeiten sind ein Warnsignal: Diese Pferde dürfen nicht geschlachtet werden. */
.umschalter .zahl.achtung { background: var(--gelb-bg); color: var(--gelb); }
/* Telefon: Der Kopf bleibt beim Scrollen stehen und nimmt dort Platz weg – er muss knapp sein.
   Der Umschalter bekommt eine eigene Zeile, die drei Filter teilen sich eine. */
@media (max-width: 640px) {
  /* Das Fragezeichen des Reiters rückt hier neben den Titel und schiebt den Rest nach rechts (12.10.2026) – vorher füllte
     der Titel die Zeile, und das Fragezeichen stand 20 px vom Wort entfernt. */
  .kopfzeile h2 { flex: 0 1 auto; margin-right: 0; }
  .kopfzeile > .reiter-info { margin-right: auto; }
  .umschalter { order: 5; flex: 1 1 100%; min-width: 0; }
  .umschalter button { flex: 1 1 auto; min-width: 0; justify-content: center; padding: var(--s1) var(--s2); font-size: var(--t-s); }
  .reiterkopf .actions.kopf-suche { order: 6; flex: 1 1 100%; margin-left: 0; }
  #journal-kopf .actions.filterzeile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #journal-kopf .actions.filterzeile select { min-width: 0; padding-inline: var(--s2); font-size: var(--t-s); }
  .reiterkopf .actions.filterzeile { margin-top: var(--s2); justify-content: flex-start; }
}

/* Aufklappmenü für selten gebrauchte Knöpfe (Exporte, Sicherung, Testfälle). */
.menue { position: relative; }
.menue > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 34px;
  padding: var(--s2) var(--s4); border: 1px solid #c3d3de; border-radius: var(--r-knopf);
  background: #fff; color: var(--brand); font-weight: 550;
}
.menue > summary::-webkit-details-marker { display: none; }
/* In der Filterzeile eines Reiters so hoch wie die Auswahllisten daneben (12.10.2026, Nutzer: Meldekopf „sieht seltsam
   aus“ – „Weitere“ stand mit 41 px neben dem Datenjahr mit 37 px). */
.reiterkopf .filterzeile :is(select, .menue > summary) { box-sizing: border-box; height: 38px; min-height: 38px; margin-top: 0; }
.reiterkopf .filterzeile .menue > summary { padding-block: 0; }
.menue > summary::after { content: ""; width: .45em; height: .45em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.menue[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.menue > summary:hover, .menue[open] > summary { background: var(--brand-tint); border-color: var(--brand); }
.menue-liste {
  position: absolute; right: 0; top: calc(100% + var(--s1)); z-index: 30;
  display: grid; min-width: 17rem; padding: var(--s1);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-ctl);
  box-shadow: 0 10px 28px -6px rgba(16, 32, 48, .22);
}
.menue-liste button, .menue-liste .file-btn {
  justify-content: flex-start; text-align: left; width: 100%; min-height: 36px; margin: 0;
  padding: var(--s2) var(--s3); border: 0; border-radius: calc(var(--r-ctl) - 2px);
  background: transparent; color: var(--ink); font-size: var(--t-m); font-weight: 500;
}
.menue-liste button:hover, .menue-liste .file-btn:hover { background: var(--brand-tint); color: var(--ink); }
.menue-liste button.danger { color: var(--rot); }
.menue-liste button.danger:hover { background: var(--rot-bg); }
/* Testfälle sind zum Ausprobieren, nicht für den Praxisalltag – sie treten einen Schritt zurück. */
.menue-liste .leise { color: var(--muted); }
.menue-liste hr { border: 0; border-top: 1px solid var(--line-2); margin: var(--s1) var(--s2); }

/* --------------------------------------------------------------- Formular -- */
label { display: block; font-size: var(--t-s); font-weight: 500; color: var(--ink-2); margin: var(--s3) 0 0; }
/* Eigene display-Regeln schlagen die UA-Regel fuer [hidden]; sonst bleibt Verstecktes sichtbar. */
[hidden] { display: none !important; }
/* Auch die Felder der Tierärztinnen-Liste: Sie stehen in einer Tabelle ohne eigene Beschriftung (Prüfroboter, 04.10.2026). */
label input, label select, label textarea, .ta-reihe input, .ta-neu input {
  display: block; width: 100%; margin-top: var(--s1); padding: var(--s2) 1rem;
  /* Eine Höhe für alle: Text-, Zahl- und Datumsfelder und Auswahllisten standen sonst mit 36, 38
     und 40 Pixeln nebeneinander. */
  min-height: 40px; border: 1px solid var(--line); border-radius: var(--r-knopf);
  font: inherit; color: var(--ink); background: #fff; transition: border-color .12s, box-shadow .12s;
}
label input:hover, label select:hover, label textarea:hover, .ta-reihe input:hover, .ta-neu input:hover { border-color: #cbd5de; }
label input:focus, label select:focus, label textarea:focus, .ta-reihe input:focus, .ta-neu input:focus { border-color: var(--brand); box-shadow: var(--ring); outline: none; }
label input::placeholder, label textarea::placeholder, .ta-reihe input::placeholder, .ta-neu input::placeholder { color: #9aa7b4; }
/* Runde Auswahlknöpfe und Häkchen sind keine Textfelder. Die Regel oben gab ihnen trotzdem Rahmen,
   Innenabstand, weißen Grund und beim Anklicken den blauen Schein – um den runden Knopf stand dann
   ein blaues Viereck. Hier bleibt nur das Bedienelement des Browsers. Wer mit der Tastatur
   unterwegs ist, sieht weiter, wo er steht: einen Rahmen in der Form des Knopfs, nur dann. */
label input[type="radio"], label input[type="checkbox"] {
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transition: none;
}
label input[type="radio"] { border-radius: 50%; }
label input[type="radio"]:focus, label input[type="checkbox"]:focus { box-shadow: none; }
label input[type="radio"]:focus-visible, label input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
label textarea { resize: vertical; border-radius: var(--r-ctl); }
/* Kästchen absolut gesetzt statt als Flex-Element.
   Mit `display: flex` wurde jedes `<b>` im Beschriftungstext ein eigenes Flex-Element mit eigenem
   Abstand. Auf schmalen Geräten zerfiel der Satz dadurch in Bruchstücke: „Präparat ist für / Pferd
   und diese / Indikation zugelassen“ stand versetzt untereinander. So fließt der Text normal. */
label.check, label.radio {
  display: block; position: relative; padding-left: var(--s5);
  color: var(--ink); font-weight: 400; font-size: var(--t-m); margin: var(--s2) 0;
}
label.check input, label.radio input {
  position: absolute; left: 0; top: .2rem;
  width: auto; min-height: 0; margin: 0; accent-color: var(--brand);
}

.row { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
/* Ein festes Paar: zwei Felder, die zusammengehören, immer nebeneinander und gleich breit –
   auch wenn eines davon gerade verborgen ist, behält das andere seine halbe Breite, statt sich
   über die ganze Zeile zu ziehen. */
.row.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Abschnitte trennt Abstand, keine Linie. Vorher lag über jedem eine Trennlinie und darunter eine
   Überschrift in grauen Großbuchstaben – zwei Signale für dieselbe Aussage, und die Karte bekam
   damit so viele waagerechte Striche, dass keiner mehr etwas hieß. */
fieldset { min-width: 0; border: 0; margin: var(--s6) 0 0; padding: 0; }
legend, .abschnitt {
  padding: 0; font-size: var(--t-l); font-weight: 600; color: var(--ink); letter-spacing: -.01em;
}
.abschnitt { margin: var(--s6) 0 0; }
.card > .abschnitt:first-of-type { margin-top: var(--s5); }
/* Direkt unter der Überschrift steht ein Feld – dessen eigener Abstand kommt oben drauf. */
.abschnitt + .row, .abschnitt + label, legend + .row, legend + label { margin-top: var(--s1); }

/* --------------------------------------------------------------- Knöpfe --- */
button {
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
  border-radius: var(--r-knopf); padding: var(--s2) var(--s4); font: inherit; font-weight: 550;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
  white-space: nowrap;
}
button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
button.secondary { background: #fff; color: var(--brand); border-color: #c3d3de; }
button.secondary:hover { background: var(--brand-tint); border-color: var(--brand); }
button.tiny { padding: var(--s1) var(--s3); font-size: var(--t-xs); font-weight: 500; }
button.danger, button.secondary.danger, button.primary.danger { color: var(--rot); border-color: #e4bdb8; background: #fff; }
button.danger:hover, button.secondary.danger:hover, button.primary.danger:hover { background: var(--rot-bg); border-color: var(--rot); }
button.icon {
  background: none; border: 1px solid transparent; color: var(--muted);
  padding: var(--s0) var(--s2); font-size: var(--t-l); line-height: 1.1; border-radius: var(--r-knopf);
}
button.icon:hover { background: var(--line-2); color: var(--ink); border-color: var(--line); }
button.icon.del:hover { background: var(--rot-bg); color: var(--rot); border-color: #e4bdb8; }

.actions { display: flex; gap: var(--s2); justify-content: flex-end; margin-top: var(--s4); flex-wrap: wrap; align-items: center; }
.actions.inline { margin: 0; justify-content: flex-start; }
/* Nach dem Speichern: drei Knöpfe gleich breit in einer Reihe, der erste gefüllt. Beschriftungen
   dürfen umbrechen, statt die Reihe zu sprengen; auf dem Telefon stehen sie untereinander. */
.nach-speichern { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s2); }
.nach-speichern-hinweis { margin: var(--s4) 0 0; }
.nach-speichern button { white-space: normal; line-height: 1.25; min-height: 44px; text-align: center; }
@media (max-width: 640px) { .nach-speichern { grid-template-columns: minmax(0, 1fr); } }
.actions.inline input, .actions.inline select {
  min-height: 34px; padding: var(--s2) 1rem; border: 1px solid var(--line); border-radius: var(--r-knopf);
  font: inherit; background: #fff; color: var(--ink);
}
.actions.inline input { min-width: 11rem; flex: 1 1 16rem; }
.actions.inline select { min-width: 5.5rem; }
.actions.inline input:focus, .actions.inline select:focus { border-color: var(--brand); box-shadow: var(--ring); outline: none; }
/* In einer Knopfzeile steht das Kästchen wieder neben dem Text, ohne Einzug. */
.actions.inline label.check { display: inline-flex; align-items: center; margin: 0; gap: var(--s1); white-space: nowrap; padding-left: 0; }
.actions.inline label.check input[type="checkbox"] { position: static; width: 1rem; height: 1rem; min-width: 0; min-height: 0; flex: none; padding: 0; margin: 0; }

.file-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--brand); border: 1px solid #c3d3de; border-radius: var(--r-knopf);
  padding: var(--s2) var(--s4); margin: 0; font-size: var(--t-l); font-weight: 550; cursor: pointer; overflow: hidden;
}
.file-btn:hover { background: var(--brand-tint); border-color: var(--brand); }
.file-btn input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
/* Das unsichtbare Dateifeld genau so groß wie sein Knopf – in einer Knopfzeile bekam es sonst die Mindestbreite der
   Suchfelder und reichte unter den Knopf daneben (Prüfroboter, 12.10.2026). */
.file-btn input[type="file"] { min-width: 0; min-height: 0; padding: 0; flex: none; }

/* ------------------------------------------------------ Text und Hinweise -- */
.muted { color: var(--muted); font-size: var(--t-m); }
.warn { background: var(--gelb-bg); border-left: 3px solid var(--gelb-dot); padding: var(--s2) var(--s3); border-radius: var(--r-ctl); font-size: var(--t-m); }
.status {
  font-size: var(--t-m); line-height: 1.45; padding: var(--s2) var(--s3);
  border-radius: var(--r-ctl); background: var(--line-2); color: var(--ink-2);
  margin: var(--s3) 0; border: 1px solid transparent;
}
.status.lm { background: var(--gelb-bg); border-color: #f0e0bc; color: #4a3a12; }
.status.fehler { background: var(--rot-bg); border-color: #f0cdc8; color: #6e1a12; }
/* Tierärztinnen der Praxis: Name, Kammer-Nr., Archivieren in einer Zeile; schmal untereinander */
.ta-kopf, .ta-reihe, .ta-neu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 7.5rem; gap: var(--s2); align-items: center; }
.ta-kopf { font-size: var(--t-s); color: var(--muted); padding: 0 var(--s2) var(--s1); }
.ta-zeilen { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--s2); margin-bottom: var(--s2); }
.ta-reihe + .ta-reihe { margin-top: var(--s2); }
.ta-reihe > button { justify-self: start; }
.ta-reihe input, .ta-neu input { margin-top: 0; }
.ta-neu { margin-bottom: var(--s2); }
.ta-neu > button { justify-self: start; }
.ta-archiv { margin-top: var(--s2); font-size: var(--t-m); }
.ta-archiv summary { cursor: pointer; color: var(--muted); }
.ta-archiv-liste { list-style: none; margin: var(--s2) 0 0; padding: 0; max-height: 200px; overflow-y: auto; }
.ta-archiv-liste li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s1) 0; border-top: 1px solid var(--line-2); }
@media (max-width: 640px) {
  .ta-kopf { display: none; }
  .ta-reihe, .ta-neu { grid-template-columns: minmax(0, 1fr) auto; }
  .ta-reihe > input:first-child, .ta-neu > input:first-child { grid-column: 1 / -1; }
}
.status.pferd-lm { background: var(--schlacht-bg); border-color: var(--schlacht-rand); color: #1b3350; }
.status.pferd-nlm { background: var(--frei-bg); border-color: var(--frei-rand); color: var(--ink-2); }
.status.muted { color: var(--muted); }
.status b { color: inherit; }
.status .tag { vertical-align: baseline; }

/* Meldezeile § 61a */
.meldezeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.meldezeile .sep { color: var(--muted); }
.meldezeile details { margin-left: auto; font-size: var(--t-s); }
.meldezeile summary { cursor: pointer; color: var(--muted); }
.meldezeile details p { margin: var(--s1) 0 0; color: var(--muted); }

/* --------------------------------------------------------------- Etiketten -- */
.badge {
  display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap;
  font-weight: 650; font-size: var(--t-s); padding: var(--s1) var(--s3); border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.badge.gruen { color: var(--gruen); background: var(--gruen-bg); border-color: #cbe6d6; }
.badge.gelb { color: var(--gelb); background: var(--gelb-bg); border-color: #f0e0bc; }
.badge.rot { color: var(--rot); background: var(--rot-bg); border-color: #f0cdc8; }
.badge.schlacht { color: var(--schlacht); background: var(--schlacht-bg); border-color: var(--schlacht-rand); }
.badge.frei { color: var(--frei); background: var(--frei-bg); border-color: var(--frei-rand); }

/* großes Ampel-Etikett im Ergebnis */
.ampel {
  display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: var(--t-l);
  padding: var(--s2) var(--s4); border-radius: var(--r-pill); border: 1px solid transparent;
}
.ampel::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: currentColor; }
.ampel.gruen { color: var(--gruen); background: var(--gruen-bg); border-color: #cbe6d6; }
.ampel.gelb { color: var(--gelb); background: var(--gelb-bg); border-color: #f0e0bc; }
.ampel.rot { color: var(--rot); background: var(--rot-bg); border-color: #f0cdc8; }

.tag {
  display: inline-block; font-size: var(--t-xxs); font-weight: 550; padding: var(--s0) var(--s2);
  border-radius: var(--r-knopf); background: var(--line-2); color: var(--ink-2); white-space: nowrap;
}
.tag.umw { background: #eef0fb; color: #3c4694; }
.tag.ab { background: var(--gelb-bg); color: var(--gelb); }
.tag.unz { background: var(--rot-bg); color: var(--rot); }
.tag.ok { background: var(--gruen-bg); color: var(--gruen); }
.tag.schlacht { background: var(--schlacht-bg); color: var(--schlacht); }
.tag.frei { background: var(--frei-bg); color: var(--frei); }

/* --------------------------------------------------------------- Tabellen -- */
.table-wrap {
  overflow: auto; border: 1px solid var(--line); border-radius: var(--r-card);
  background: #fff; -webkit-overflow-scrolling: touch;
}
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-m); }
.table th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; padding: var(--s3) var(--s3); background: #f7f9fb; color: var(--muted);
  font-size: var(--t-xxs); font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; box-shadow: inset 0 -1px 0 var(--line);
}
.table td { padding: var(--s3) var(--s3); vertical-align: top; border-bottom: 1px solid var(--line-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:nth-child(even) td { background: #fafcfd; }
.table tbody tr:hover td { background: var(--brand-tint); }
.table.small { font-size: var(--t-s); }
.table.small td { padding: var(--s2) var(--s3); }
.table.small th { padding: var(--s2) var(--s3); }
.table td.leer, .table td[colspan] { color: var(--muted); }

/* Zellinhalte */
.table .nowrap, .table .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .haupt { font-weight: 600; display: block; }
.table .unter { display: block; color: var(--muted); font-size: var(--t-s); margin-top: var(--s0); }
.table .klemm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.table .aktion { text-align: right; white-space: nowrap; }
.table .aktion button { margin-left: var(--s0); }
.zelle-stapel { display: flex; flex-direction: column; gap: var(--s1); align-items: flex-start; }

/* Wirkstoffe: hohe Tabelle scrollt mit fixiertem Kopf */
#view-stammdaten .table-wrap { max-height: min(72vh, 760px); }
#tbl-journal td:nth-child(1), #tbl-journal td:nth-child(7) { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Feste Spaltenbreiten wie im Pferdestamm: Beim Filtern sprangen die Spalten sonst auf neue
   Breiten. Die schmalen Spalten bekommen, was ihr Inhalt braucht; Pferd, Präparat und Diagnose
   teilen sich den Rest. Die Spalte „Wartezeit bis“ muss dabei ganz ins Bild – ein halbes
   Jahresdatum („10.09.202“) ist hier keine Kleinigkeit: Daran hängt, ab wann das Pferd
   geschlachtet werden darf. */
#tbl-journal { table-layout: fixed; min-width: 1080px; }
#tbl-journal th { white-space: normal; }
#tbl-journal th:nth-child(1) { width: 6.5rem; }
#tbl-journal th:nth-child(4) { width: 8.5rem; }
#tbl-journal th:nth-child(6) { width: 9.5rem; }
#tbl-journal th:nth-child(7) { width: 7rem; }
#tbl-journal th:nth-child(8) { width: 6rem; }
#tbl-journal th:nth-child(9) { width: 9.5rem; }
#tbl-wartezeit { table-layout: fixed; min-width: 760px; }
#tbl-wartezeit th:nth-child(1) { width: 7rem; }
#tbl-wartezeit th:nth-child(2) { width: 7rem; }
#tbl-wartezeit th:nth-child(5) { width: 7.5rem; }
#tbl-archiv { table-layout: fixed; min-width: 960px; }
#tbl-archiv th { white-space: normal; }
#tbl-archiv th:nth-child(1) { width: 6.5rem; }
#tbl-archiv th:nth-child(4) { width: 7rem; }
#tbl-archiv th:nth-child(5) { width: 6.5rem; }
#tbl-archiv th:nth-child(7) { width: 6.5rem; }
#tbl-archiv th:nth-child(8) { width: 8rem; }
#tbl-archiv td { overflow-wrap: break-word; }
/* Eine Obergrenze allein schneidet lange Wörter ab („Marbofloxacin“ ragt über die Zelle hinaus).
   Umbrechen statt abschneiden – und zwar nur dort, wo es nötig ist. */
#tbl-journal td:nth-child(-n+5) { overflow-wrap: break-word; }
#tbl-journal td:nth-child(-n+5) .haupt, #tbl-journal td:nth-child(-n+5) .unter { overflow-wrap: break-word; }
/* Kürzel („nicht zur Schlachtung“) und Mengenzeile („180 Stk · 30 Tage“) stehen auf `nowrap` und
   ragten damit um wenige Pixel aus der begrenzten Zelle. In diesen Spalten dürfen sie umbrechen. */
#tbl-journal td:nth-child(-n+5) .tag, #tbl-journal td:nth-child(-n+5) .unter { white-space: normal; }
/* Die Aktionsspalte selbst braucht 198 px für drei nebeneinanderstehende Knöpfe. Untereinander
   kommt sie mit der Hälfte aus – und genau diese Hälfte fehlte der Tabelle. */
#tbl-journal td.aktion { white-space: nowrap; }
#tbl-journal td.aktion button { display: block; width: 100%; margin: 0 0 var(--s0); }
#tbl-journal td.aktion button:last-child { margin-bottom: 0; }
/* Aktionsspalte bleibt beim Querscrollen sichtbar */
#tbl-journal th:last-child, #tbl-journal td.aktion,
#tbl-pferde th:last-child, #tbl-pferde td.aktion {
  position: sticky; right: 0; background: #fff;
  box-shadow: -7px 0 9px -7px rgba(16, 32, 48, .16);
}
#tbl-journal th:last-child, #tbl-pferde th:last-child { background: #f7f9fb; z-index: 2; }
#tbl-journal tbody tr:nth-child(even) td.aktion,
#tbl-pferde tbody tr:nth-child(even) td.aktion { background: #fafcfd; }
#tbl-journal tbody tr:hover td.aktion,
#tbl-pferde tbody tr:hover td.aktion { background: var(--brand-tint); }
/* Feste Spaltenbreiten. Sonst verteilt der Browser die Breite nach dem Inhalt: Beim Suchen bleibt
   ein Pferd übrig, und alle Spalten springen auf neue Breiten. Die Mindestbreite ergibt sich aus
   den 15-stelligen Nummern unter Name und Halter, die nicht umbrechen können. */
#tbl-pferde { table-layout: fixed; min-width: 860px; }
#tbl-pferde th:nth-child(2) { width: 10rem; }
#tbl-pferde th:nth-child(3) { width: 20%; }
#tbl-pferde th:nth-child(4) { width: 14rem; }
#tbl-pferde th:nth-child(5) { width: 9.5rem; }
/* Die Spaltenköpfe laufen unter dem angehefteten Kopf mit. Dafür darf der Rahmen der Tabelle
   selbst nicht scrollen – sonst haften die Köpfe nur in ihm, und der rollt mit der Seite aus dem
   Bild. Das geht nur, wo die Tabelle ganz in die Karte passt; das misst app.js und setzt dann
   `seitenscroll`. Schmaler muss sie seitlich scrollen. Dort bekommt sie einen eigenen Rahmen, der
   genau in den Platz unter dem Kopf passt; die Spaltenköpfe haften dann oben in diesem Rahmen.
   Abgezogen wird, was unter dem Rahmen noch kommt (Innenabstand von Karte und Seite): Ganz nach
   unten gescrollt, beginnt der Rahmen dann genau unter dem Kopf und nicht halb hinter ihm. */
.haftkarte .table-wrap { max-height: calc(100dvh - var(--kopf-ist, var(--kopf-h)) - var(--haftkopf-h, 0px) - var(--s5) - var(--s4) - 4px); }
@media (max-width: 640px) {
  .haftkarte .table-wrap { max-height: calc(100dvh - var(--kopf-ist, var(--kopf-h)) - var(--haftkopf-h, 0px) - 2 * var(--s3) - 4px); }
}
.haftkarte .table-wrap.seitenscroll { overflow: visible; max-height: none; }
.haftkarte .seitenscroll > .table th { top: calc(var(--kopf-ist, var(--kopf-h)) + var(--haftkopf-h, 0px)); z-index: 5; }
.haftkarte .seitenscroll > .table thead th:first-child { border-top-left-radius: var(--r-card); }
.haftkarte .seitenscroll > .table thead th:last-child { border-top-right-radius: var(--r-card); z-index: 5; }
.haftkarte .seitenscroll > .table.angeheftet thead th { border-radius: 0; }
/* Ohne eigenen Rahmen schneidet nichts mehr die unteren Ecken ab: Die letzte Zeile rundet selbst. */
.haftkarte .seitenscroll > .table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-card); }
.haftkarte .seitenscroll > .table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-card); }
/* Auf schmalen Geräten darf das Statuskürzel umbrechen. „Schlachtpferd“ und „nicht zur
   Schlachtung“ bedeuten das Gegenteil voneinander – ein abgeschnittenes Wort ist hier kein
   Schönheitsfehler. (`max-width` muss mit: Ein inline-flex-Kästchen wächst sonst über seine
   Zelle hinaus und bricht nie um, egal was `white-space` sagt.) */
#tbl-pferde td:nth-child(4) .badge { white-space: normal; max-width: 100%; text-align: left; }
#tbl-pferde td:nth-child(4) .tag { white-space: normal; }
/* Die Lebensnummer ist 15-stellig und immer gleich lang – als Ziffernschrift steht sie ruhiger. */
#tbl-pferde td:nth-child(2) { font-variant-numeric: tabular-nums; }
#tbl-stoffe { min-width: 780px; }
#tbl-stoffe td:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) { text-align: center; }
#tbl-stoffe input[type="checkbox"] { accent-color: var(--brand); }

/* --------------------------------------------------------------- Ergebnis -- */
/* Die Prüfkarte läuft beim Scrollen mit und bleibt dabei vollständig im Bild.
   Ein langes Ergebnis – Colistin oral beim Schlachtpferd bringt es auf 1434 px – ist höher als
   das Fenster. Eine oben klebende Karte, die unten aus dem Bild ragt, lässt sich nicht zu Ende
   lesen: Das Fenster scrollt an ihr vorbei, sie bleibt stehen. Deshalb scrollt sie in sich
   selbst, sobald sie nicht mehr hineinpasst. */
/* Die Höhe setzt `ergebnisHoehe()` beim Scrollen, weil sie von der aktuellen Lage der Karte
   abhängt: Am Seitenanfang beginnt sie tiefer als später, wenn sie oben klebt. Mit einem festen
   Wert ragte sie am Anfang 82 px aus dem Fenster.
   Kein `overscroll-behavior: contain`: Das fing das Mausrad ab – wer im Karteninhalt oben ankam,
   bei dem scrollte die Seite nicht weiter, und man saß fest. */
.ergebnis {
  position: sticky; top: calc(var(--kopf-ist, var(--kopf-h)) + var(--s3)); align-self: start;
  overflow-y: auto;
}
/* Befunde in drei Abschnitten: was entgegensteht, was zu tun ist, was zu wissen ist.
   Die Farbe trägt die Überschrift und die schmale Kante – nicht mehr die ganze Fläche. Drei
   Flächenfarben nebeneinander waren der Grund, warum die Liste unruhig wirkte. */
.befund-gruppe { margin: var(--s5) 0 0; }
.befund-gruppe h3 {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0 0 var(--s2); font-size: var(--t-m); font-weight: 650;
}
.befund-gruppe h3 .punkt { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.befund-gruppe h3 .zahl {
  margin-left: auto; color: var(--muted); font-weight: 500; font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}
.befund-gruppe > .unter { margin: 0 0 var(--s2); color: var(--muted); font-size: var(--t-s); }
.befund-gruppe.block h3 { color: var(--rot); }
.befund-gruppe.pflicht h3 { color: var(--gelb); }
.befund-gruppe.hinweis h3 { color: var(--ink-2); }

.befund {
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  padding: var(--s2) var(--s3); margin: var(--s2) 0; border-radius: var(--r-ctl);
  background: var(--card); font-size: var(--t-m); line-height: 1.45;
}
.befund.block { border-left-color: var(--rot-dot); }
.befund.pflicht { border-left-color: var(--gelb-dot); }
.befund.hinweis { border-left-color: var(--line); }
.befund b { font-weight: 650; }
.befund-gruppe .ausweg {
  margin: var(--s2) 0 0; padding: var(--s2) var(--s3); border-radius: var(--r-ctl);
  background: var(--gelb-bg); color: var(--gelb); font-size: var(--t-s); line-height: 1.45;
}
.befund .fund { display: block; color: var(--muted); font-size: var(--t-xs); margin-top: var(--s0); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s1) var(--s4); font-size: var(--t-m); margin: var(--s3) 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.pass-vorschau { margin-top: var(--s2); }
.pass-vorschau > summary { cursor: pointer; font-size: var(--t-s); color: var(--muted); }
.pass-vorschau[open] > summary { margin-bottom: var(--s1); }
pre.pass { background: #f5f8fa; border: 1px solid var(--line); padding: var(--s3); border-radius: var(--r-ctl); font-size: var(--t-xs); line-height: 1.5; white-space: pre-wrap; overflow-x: auto; }
/* Checkliste: was noch fehlt, solange erfasst wird. Ersetzt nach „Prüfen“ die Rechtsbewertung. */
.check-kopf { margin: 0 0 var(--s3); font-weight: 600; font-size: var(--t-l); }
.check-kopf.offen { color: var(--gelb); }
.check-kopf.bereit { color: var(--gruen); }
.check-kopf.rot { color: var(--rot); }

ul.checkliste { list-style: none; margin: 0; padding: 0; }
ul.checkliste li {
  display: grid; grid-template-columns: 1.25rem 1fr; align-items: baseline;
  gap: var(--s1) var(--s2); padding: var(--s1) 0;
  border-bottom: 1px solid var(--line-2);
}
ul.checkliste li:last-child { border-bottom: 0; }
ul.checkliste .haken { font-size: var(--t-l); line-height: 1.4; text-align: center; }
ul.checkliste li.ok .haken { color: var(--gruen-dot); }
ul.checkliste li.offen .haken { color: var(--muted); }
/* Erledigt und offen gleich groß (14.10.2026, Nutzer): Titel immer gleich, darunter Hinweis oder Wert in einer Zeile –
   die Liste springt beim Abhaken nicht mehr. Erledigt erkennt man am grünen Haken und am Wert. */
ul.checkliste .was { color: var(--ink); font-weight: 600; }
/* Der Hinweis steht unter der Bezeichnung, nicht daneben – sonst bricht er auf schmalen Geräten um. */
ul.checkliste .hilfe, ul.checkliste .wert { grid-column: 2; font-size: var(--t-s); }
ul.checkliste .hilfe { color: var(--muted); }
ul.checkliste .wert { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.check-fuss { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--t-s); }

/* Offenes Feld beim Speichern: rot umrandet, damit man im Formular sieht, wo noch etwas fehlt –
   und nicht nur rechts in der Karte liest, dass etwas fehlt. */
label.fehlt { color: var(--rot); }
label.fehlt > input, label.fehlt > select, label.fehlt > textarea,
label.fehlt input:not([type="checkbox"]), label.fehlt select {
  border-color: var(--rot-dot); background: var(--rot-bg);
}
label.fehlt > input:focus, label.fehlt > select:focus { box-shadow: var(--ring-rot); }

/* ---------------------------------------------------------------- Toast --- */
.toast {
  position: fixed; bottom: var(--s5); left: 50%; transform: translateX(-50%);
  background: #1b2733; color: #fff; padding: var(--s3) var(--s4); border-radius: var(--r-card);
  font-size: var(--t-m); box-shadow: var(--sh-2); z-index: 120; max-width: min(90vw, 40rem);   /* auch über der Einführung */
}
/* Auf breitem Bildschirm unten links, unter dem Formular – dort, wo man gerade „Speichern“
   geklickt hat. Mittig lag die Meldung über den Knöpfen der Ergebniskarte rechts, genau über
   „Verschreibung drucken“, dem Knopf, den man als Nächstes braucht. */
@media (min-width: 981px) {
  .toast { left: var(--s5); transform: none; max-width: min(40vw, 34rem); }
}

/* --------------------------------------------------- Import / Drop-Zone --- */
#dropzone { border: 1px dashed #c4d2dd; background: linear-gradient(0deg, #fbfdfe, #fff); }
#dropzone.over { border-color: var(--brand); background: var(--brand-tint); box-shadow: var(--ring); }
#dropzone code { background: var(--line-2); padding: var(--s0) var(--s1); border-radius: 4px; font-size: .85em; }
.import-panel { margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s3); }
.import-panel .thumb { max-height: 220px; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.mapping { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: var(--s2) var(--s3); }
.import-panel textarea { width: 100%; min-height: 140px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.progress { font-size: var(--t-m); color: var(--brand); font-weight: 550; }
.treffer { display: inline-block; background: var(--gruen-bg); color: var(--gruen); padding: var(--s0) var(--s2); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 550; margin: var(--s0) var(--s0) 0 0; }

/* Abgleich / Recht (Migrationsansicht) */
.abgleich-tab td, .abgleich-tab th { padding: var(--s0) var(--s3); }
details.recht { margin: var(--s3) 0; font-size: var(--t-m); }
details.recht summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
details.recht ol { margin: var(--s1) 0 0 var(--s4); padding: 0; color: var(--ink-2); }
details.recht li { margin: var(--s0) 0; }

/* ----------------------------------------------------------------- Druck -- */
.print { background: #fff; color: #000; padding: 1.5cm; font: 12px/1.45 system-ui, sans-serif; }
.print h1 { font-size: var(--t-l); margin: 0 0 var(--s1); }
.print h2 { font-size: var(--t-s); margin: var(--s4) 0 var(--s1); border-bottom: 1px solid #000; }
.print table { width: 100%; border-collapse: collapse; }
.print td, .print th { border: 1px solid #999; padding: var(--s1) var(--s2); text-align: left; vertical-align: top; }
.print .sign { margin-top: var(--s6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
.print .sign div { border-top: 1px solid #000; padding-top: var(--s1); font-size: var(--t-xxs); }
.print .hinweis-apotheke { border: 2px solid #000; padding: var(--s1) var(--s3); font-weight: 700; display: inline-block; margin: var(--s1) 0; }
/* Verschreibung für die Apotheke: Gültigkeit; geänderter Beleg: was er ersetzt (10.10.2026) */
.print .gueltigkeit, .print .ersetzt { border: 1px solid #000; padding: var(--s1) var(--s3); display: inline-block; margin: var(--s1) 0; }
@media print {
  /* Ohne Seitenrand druckt der Browser keine Kopf- und Fußzeile (Titel, localhost-Adresse, Datum) – auf einer Verschreibung
     hat das nichts zu suchen (15.10.2026). Den Rand gibt der Beleg selbst, auf jeder Seite (box-decoration-break). */
  @page { margin: 0; }
  header.top, main, .toast { display: none !important; }
  .print { display: block !important; padding: 15mm 16mm; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  body { background: #fff; overflow: visible; }
}

/* ------------------------------------------------- Arzneimittelliste & Meldung -- */
.katalog-suche, .katalog-gewaehlt {
  border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--s2) var(--s3);
  margin: 0 0 var(--s3); background: var(--line-2);
}
.katalog-gewaehlt { background: var(--brand-tint); border-color: #cfe2ee; }
/* Ein Abstand, nicht zwei: Die Kacheln hatten gap UND margin-top und standen doppelt weit
   auseinander. Bei vier Vorschlägen waren das 239 der 586 px einer Karte. */
.treffer-liste {
  display: grid; gap: var(--s2);
  /* Nebeneinander, wo Platz ist: Vier Vorschläge untereinander waren 219 px – mehr als ein
     Drittel der Karte, für vier Zeilen Text. Auf schmalen Geräten bleibt es eine Spalte. */
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
}
.treffer-liste .treffer-btn { margin-top: 0; }
/* Ein Vorschlag ist ein Knopf, kein Infokasten. Weiß auf Weiß mit Hairline sah aus wie eine
   Auskunft, und ein Anwender fragte folgerichtig, wie man den Fall denn nun klärt. Deshalb:
   angedeutete Kante links, ein Pfeil rechts, spürbares Verhalten beim Überfahren. */
.treffer-btn {
  display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid #c3d3de; border-left: 3px solid var(--brand);
  border-radius: var(--r-ctl);
  padding: var(--s2) var(--s3); font: inherit; color: var(--ink); margin-top: var(--s2);
  max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  transition: background .12s, border-color .12s, transform .06s;
}
.treffer-btn > b, .treffer-btn > span:first-child { flex: 1 1 auto; min-width: 0; }
/* Kein Pfeil: „›“ las sich wie „klappt auf“, tatsächlich wird der Vorschlag übernommen und die
   Karte wechselt zur Packungsfrage. Jetzt steht dort, was passiert. */
.treffer-btn .treffer-text { flex: 1 1 auto; min-width: 0; }
.treffer-btn .nehmen {
  flex: none; color: var(--brand); font-weight: 600; font-size: var(--t-s);
  border: 1px solid #c3d3de; border-radius: var(--r-pill); padding: var(--s0) var(--s3); background: var(--card);
}
.treffer-btn:hover .nehmen { background: var(--brand); color: #fff; border-color: var(--brand); }
.treffer-btn:hover { border-color: var(--brand); background: var(--brand-tint); }
.treffer-btn:active { transform: translateY(1px); }
.treffer-btn .unter { display: block; color: var(--muted); font-size: var(--t-xs); line-height: 1.35; }
.klaerfall {
  border: 1px solid var(--line); border-left: 3px solid var(--gelb-dot); border-radius: var(--r-ctl);
  padding: var(--s3); margin: var(--s2) 0; background: var(--card);
}
/* Zugeklappt ist der Klärfall eine Zeile: was fehlt, steht rechts. */
details.klaerfall > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);
  cursor: pointer; list-style: none; margin: calc(var(--s3) * -1); padding: var(--s2) var(--s3);
}
details.klaerfall > summary::-webkit-details-marker { display: none; }
details.klaerfall > summary::after {
  content: "▸"; margin-left: auto; color: var(--muted); font-size: .9em; flex: 0 0 auto;
}
details.klaerfall[open] > summary::after { content: "▾"; }
details.klaerfall[open] > summary { margin-bottom: 0; border-bottom: 1px solid var(--line-2); }
details.klaerfall > summary:hover { background: var(--line-2); }
/* Zweizeilige Kopfzeile: oben was zu tun ist und woran, darunter welche Behandlungen betroffen
   sind. Vorher stand das Pferd als graue Nebenangabe neben dem Präparatnamen – wer wissen wollte,
   welche Behandlung gemeint ist, fand es dort nicht. */
details.klaerfall > summary { flex-wrap: wrap; }
/* Die Reihenfolge trägt das Paar aus Text und Fragezeichen (.tun-mit-info), nicht der Text darin – sonst rückte er
   in seinem Paar hinter das Fragezeichen. */
details.klaerfall > summary .tun {
  color: var(--gelb); font-weight: 650; font-size: var(--t-m);
}
/* Das Fragezeichen gehört zu „was zu tun ist“: gleiche Stelle in der Reihenfolge, als Paar mit dem Text (.mit-frage) –
   so steht es auch beim Umbruch auf dem Telefon nicht allein in der nächsten Zeile. */
details.klaerfall > summary > .tun-mit-info { order: 1; }
/* Der Präparatname nimmt den freien Platz – dann stehen Zähler und Pfeil rechts an der Kante.
   Vorher hatten `.zahl` und der Pfeil beide `margin-left: auto` und teilten sich den Rest: fünfzehn Zeilen, dreizehn verschiedene Kanten. */ details.klaerfall > summary .haupt {
  order: 2; font-weight: 600; min-width: 0; flex: 1 1 0; overflow-wrap: anywhere;
}
/* Auf dem Telefon bleibt für den Namen zu wenig übrig, wenn der Zähler seine Spalte behält –
   dort rückt der Zähler unter den Namen, statt ihn auf 66 px zu quetschen. */
@media (max-width: 640px) {
  details.klaerfall > summary .haupt { flex: 1 1 100%; }
  details.klaerfall > summary .zahl { min-width: 0; margin-left: auto; }
}
/* Der Zähler steht in einer Spalte, nicht dort, wo der Präparatname gerade endet. Gemessen
   hatten fünfzehn Zeilen dreizehn verschiedene Kanten – eine Liste, die man nicht überfliegen
   kann, weil das Auge jede Zahl neu suchen muss. */
details.klaerfall > summary .zahl {
  order: 3; color: var(--muted); font-size: var(--t-xs); white-space: nowrap;
  min-width: 7.5rem; text-align: right;
}
/* Der Pfeil gehört in die erste Zeile, nicht unter die Karte. Er stand hinter `.betrifft`, und
   das nimmt die volle Breite – also bekam er eine dritte Zeile für sich allein. Gemessen: 32 px
   leerer Raum in jeder zugeklappten Karte, bei fünfzehn Fällen fast fünfhundert. */
details.klaerfall > summary::after { order: 4; }
details.klaerfall > summary .betrifft {
  order: 5; flex: 1 0 100%; color: var(--ink-2); font-size: var(--t-s);
}
/* Ein Satz in der Sprache der Praxis, der Regeltext mit Paragraph gleich dahinter. Als zwei
   Absätze untereinander gelesen sagten sie dasselbe zweimal und machten jede Karte gleich hoch –
   bei fünfzehn Fällen stand derselbe Erklärungssatz fünfzehnmal als eigene Zeile da. */
.klaerfall .warum { margin: 0; font-size: var(--t-s); line-height: 1.45; }
.klaerfall .warum:empty { display: none; }
details.klaerfall > :not(summary) { margin-top: var(--s3); }
/* Im Klärfall ist `.row` kein Formularraster, sondern eine Werkzeugzeile: ein Eingabefeld und
   ein, zwei Knöpfe. Als gleichmäßiges Raster bekam jeder Knopf dieselbe Spalte wie das Suchfeld
   und wurde über ein Drittel der Karte breit – ein Knopf, der aussah wie ein Balken. Hier
   bekommt das Feld den Platz und der Knopf seine Textbreite. `.fix-reihe` hat ihr eigenes
   Raster und bleibt ausgenommen. */
.klaerfall .row:not(.fix-reihe) {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3);
}
.klaerfall .row:not(.fix-reihe) > label { flex: 1 1 20rem; min-width: 0; }
.klaerfall .row:not(.fix-reihe) > button { flex: 0 0 auto; }
/* Auch die Packungsliste muss nicht über die ganze Karte laufen. */
.klaerfall .zu-packung, .klaerfall label:has(.zu-packung) { max-width: 34rem; }
.klaerfall, .katalog-suche, .katalog-gewaehlt { min-width: 0; }
.klaerfall p { margin: var(--s1) 0; }
.status.gruen-rahmen { border-left: 3px solid var(--gruen-dot); background: var(--gruen-bg); color: var(--gruen); }
#melde-historie h3, #melde-klaerfaelle h3 { margin: var(--s4) 0 var(--s1); font-size: var(--t-l); }
#melde-historie code { font-size: var(--t-xs); }

tr.ersetzt td { opacity: .55; }
tr.ersetzt .haupt { text-decoration: line-through; }
#korrektur-hinweis { border-left: 3px solid var(--gelb-dot); background: var(--gelb-bg); color: var(--gelb); }
/* Nach dem Speichern grün statt gelb (15.10.2026, Nutzer): Gelb heißt in der App „hier ist etwas zu beachten“ –
   eine eben gespeicherte Behandlung ist das nicht. Gelb bleibt für Bearbeiten und Korrektur aus dem Journal. */
#korrektur-hinweis.gespeichert { border-left-color: var(--gruen-dot); background: var(--gruen-bg); color: var(--gruen); }
#pferd-suche { margin-bottom: var(--s0); }

/* Schnellwahl aus dem Lernspeicher. Die Überschrift steht darüber statt davor – sonst schiebt
   sie auf schmalen Geräten den ersten Knopf in die nächste Zeile und die Reihe bricht schief um. */

/* Name und Herkunft des gewählten Präparats stehen untereinander – nebeneinander klebten sie
   zusammen („Gentamicin 50aniMedica GmbH“), weil .unter nur in Tabellen ein Block war. */
#katalog-name .unter { display: block; margin-top: var(--s0); color: var(--ink-2); font-size: var(--t-s); font-weight: 400; }

/* Überschrift eines Auswahlfelds, das kein eigenes Label trägt (Packungswahl im Klärfall). */
.feld-titel { margin: var(--s3) 0 var(--s2); font-size: var(--t-s); font-weight: 500; color: var(--ink-2); }
.feld-titel .muted { font-weight: 400; }

/* Das Präparatfeld steht allein auf seiner Zeile.
   Neben dem Wirkstoff blieben ihm rund 360 px – die amtlichen Namen sind aber lang („Procapen
   Injektionssuspension 300 mg/ml für Rinder, Schweine und Pferde“, 71 Zeichen). Im Fenster stand
   „… für Rinder, S…“, während derselbe Name eine Zeile tiefer vollständig zu lesen war: einmal
   abgeschnitten, einmal ganz. Über die volle Breite passt er hinein. */
#inp-praeparat { font-size: var(--t-l); }
.dublette { border: 1px solid var(--line); border-left: 3px solid var(--gelb-dot); border-radius: var(--r-ctl);
  padding: var(--s3); margin: var(--s2) 0; background: var(--card); }
/* Suche und „Neues Pferd“ auf einer Linie, der Knopf so hoch wie das Feld */
.such-reihe { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2) var(--s3); }
.such-reihe > label { flex: 1 1 9rem; min-width: 0; }
.such-reihe > button { flex: 0 0 auto; min-height: 40px; }
/* Im Formular hat jeder Abschnitt denselben Abstand – auch der erste, vor dem ja Pferd und Datum stehen. */
#form-behandlung > .abschnitt:first-of-type { margin-top: var(--s6); }

.speicher-warnung {
  position: sticky; top: var(--kopf-ist, var(--kopf-h)); z-index: 30; margin: 0; padding: var(--s3) var(--s4);
  background: var(--rot-bg); color: var(--rot); border-bottom: 2px solid var(--rot-dot); font-size: var(--t-m);
}
.speicher-warnung.gelb { background: var(--gelb-bg); color: var(--gelb); border-color: var(--gelb-dot); }
.speicher-warnung button { margin-left: var(--s2); }

.datei-bericht { margin: var(--s2) 0; font-size: var(--t-s); }
.datei-bericht summary { cursor: pointer; color: var(--muted); }
.datei-bericht ul { margin: var(--s1) 0 0 var(--s4); padding: 0; }
.datei-bericht li { margin: var(--s0) 0; }

.import-protokoll { margin: var(--s2) 0 0; font-size: var(--t-s); }
.import-protokoll summary { cursor: pointer; color: var(--muted); }

/* Spickzettel über der Wirkstofftabelle: aufklappen, einmal lesen, verstanden */
details.spickzettel {
  margin: 0 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--card); overflow: hidden;
}
details.spickzettel > summary {
  cursor: pointer; padding: var(--s2) var(--s3); font-weight: 600; color: var(--ink-2);
  list-style: none; display: flex; align-items: center; gap: var(--s2);
}
details.spickzettel > summary::-webkit-details-marker { display: none; }
details.spickzettel > summary::before { content: "▸"; color: var(--muted); font-size: .9em; }
details.spickzettel[open] > summary { border-bottom: 1px solid var(--line); background: #f7fafc; }
details.spickzettel[open] > summary::before { content: "▾"; }
.spick { padding: var(--s3); font-size: var(--t-s); }
.spick > p { margin-top: 0; color: var(--ink-2); }
.spick table { margin: var(--s3) 0; }
.spick th, .spick td { vertical-align: top; }
.spick td:last-child, .spick th:last-child { white-space: nowrap; }
.spick h4 { margin: var(--s3) 0 var(--s1); font-size: var(--t-s); }
.spick ol, .spick ul { margin: 0 0 0 var(--s4); padding: 0; color: var(--ink-2); }
.spick li { margin: var(--s1) 0; }
.spick .badge { font-size: var(--t-xxs); padding: var(--s0) var(--s2); vertical-align: baseline; }
details.unterpunkt { margin-top: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s2); }
details.unterpunkt > summary {
  cursor: pointer; font-weight: 600; color: var(--ink-2); list-style: none;
  display: flex; align-items: center; gap: var(--s2);
}
details.unterpunkt > summary::-webkit-details-marker { display: none; }
details.unterpunkt > summary::before { content: "▸"; color: var(--muted); font-size: .9em; }
details.unterpunkt[open] > summary::before { content: "▾"; }
details.unterpunkt > :not(summary) { margin-top: var(--s2); }
.quelle { display: inline-block; font-size: var(--t-xxs); padding: var(--s0) var(--s2); border-radius: 999px; white-space: nowrap; }
.quelle.amtlich { background: var(--gruen-bg); color: var(--gruen); border: 1px solid #cbe6d6; }
.quelle.offen { background: var(--gelb-bg); color: var(--gelb); border: 1px solid #f0e0bc; }
.quelle.vorschlag { background: #f3ecfa; color: #6b4a96; border: 1px solid #d9c8ee; }
.badge.lila { color: #6b4a96; background: #f3ecfa; border-color: #d9c8ee; }
.vorschlag-kasten { background: #faf7fd; border-left: 3px solid #9b78c9; }
#tbl-stoffe.pruefung tbody tr td[data-zustand="vorschlag"],
#tbl-stoffe.pruefung tbody tr:nth-child(even) td[data-zustand="vorschlag"] {
  background: #faf7fd; box-shadow: inset 0 0 0 1px #d9c8ee;
}
.quellenliste table { margin: var(--s1) 0 var(--s2); }
.quellenliste code { font-size: var(--t-xxs); }
.quellenliste a { color: var(--brand); }
.quellenliste p { margin: var(--s2) 0 0; }
.farblegende { list-style: none; margin-left: 0; }
.farblegende li { padding-left: var(--s5); text-indent: -1.35rem; }
.probe { width: .9rem; height: .9rem; border-radius: 3px; border: 1px solid var(--line);
  display: inline-block; vertical-align: -.1rem; margin-right: var(--s2); text-indent: 0; }
.probe.gesetz { background: var(--gruen-bg); border-color: #cbe6d6; }
.probe.konflikt { background: var(--gelb-bg); border-color: var(--gelb-dot); }
.probe.abweichung { background: #f3ecfa; border-color: #9b78c9; }
.probe.leer { background: #fff; }
.probe.vorschlag { background: #faf7fd; border-color: #9b78c9; }

.erklaerung {
  position: relative; margin: 0 0 var(--s2); padding: var(--s3) var(--s6) var(--s3) var(--s3);
  border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r-card);
  background: var(--card); font-size: var(--t-s);
}
/* Die Erklärung trägt die Farbe des Feldes, über das sie spricht */
.erklaerung.gesetz { border-left-color: var(--gruen-dot); background: var(--gruen-bg); }
.erklaerung.gesetz .erklaer-kopf { color: var(--gruen); }
.erklaerung.konflikt { border-left-color: var(--gelb-dot); background: var(--gelb-bg); }
.erklaerung.konflikt .erklaer-kopf { color: var(--gelb); }
.erklaerung.abweichung, .erklaerung.vorschlag { border-left-color: #9b78c9; background: #faf7fd; }
.erklaerung.abweichung .erklaer-kopf, .erklaerung.vorschlag .erklaer-kopf { color: #6b4a96; }
.erklaerung .erklaer-kopf {
  font-size: var(--t-xxs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s0);
}
/* Der Hilfe-Knopf bleibt gedrückt, solange die Erläuterungen offen sind */
button.hilfe.aktiv {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.erklaerung .herkunft { margin: var(--s2) 0 0; }
.erklaerung .herkunft td, .erklaerung .herkunft th { padding: var(--s0) var(--s2); }
.erklaerung p { margin: var(--s2) 0 0; color: var(--ink-2); }
.erklaerung .schliessen { position: absolute; top: .4rem; right: .4rem; }

/* Wirkstofftabelle: feste Breiten, damit beim Klicken nichts springt */
#tbl-stoffe { table-layout: fixed; min-width: 1178px; }
#tbl-stoffe th:nth-child(1) { width: 13rem; } #tbl-stoffe th:nth-child(2) { width: 6.6rem; } #tbl-stoffe th:nth-child(3) { width: 8.6rem; }
#tbl-stoffe th:nth-child(n+4) { width: 7.1rem; }
#tbl-stoffe th:last-child { width: 2.8rem; }
#tbl-stoffe th { white-space: normal; }
#tbl-stoffe td:nth-child(-n+3) { overflow-wrap: anywhere; }
td.flag { white-space: nowrap; }
td.flag input { vertical-align: middle; }
/* Die Zellen tragen ihren Zustand immer; sichtbar wird er erst mit `.pruefung` an der Tabelle.
   Vorher wurden beim Umschalten 300 Zellen neu gebaut – hier ändert sich eine Klasse.
   Die Markierung muss den Zebrastreifen übertönen, sonst ist sie in jeder zweiten Zeile unsichtbar. */
#tbl-stoffe:not(.pruefung) td.flag button.info { display: none; }
#tbl-stoffe.pruefung tbody tr td[data-zustand="gesetz"],
#tbl-stoffe.pruefung tbody tr:nth-child(even) td[data-zustand="gesetz"] { background: var(--gruen-bg); }
#tbl-stoffe.pruefung tbody tr td[data-zustand="konflikt"],
#tbl-stoffe.pruefung tbody tr:nth-child(even) td[data-zustand="konflikt"] {
  background: var(--gelb-bg); box-shadow: inset 0 0 0 1px var(--gelb-dot);
}
#tbl-stoffe.pruefung tbody tr td[data-zustand="abweichung"],
#tbl-stoffe.pruefung tbody tr:nth-child(even) td[data-zustand="abweichung"] {
  background: #f3ecfa; box-shadow: inset 0 0 0 1px #9b78c9;
}
button.info {
  width: 1.05rem; height: 1.05rem; line-height: 1; margin-left: var(--s1); padding: 0; cursor: help;
  border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--muted);
  font-size: var(--t-xxs); font-weight: 700; vertical-align: middle;
}
button.info:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); }
.abweichungsliste { margin: var(--s2) 0 0 var(--s4); padding: 0; font-size: var(--t-m); }
.abweichungsliste li { margin: var(--s0) 0; }

/* ------------------------------------------------------------- Schmalbild -- */
@media (max-width: 640px) {
  :root { --kopf-h: 96px; --kopf-abstand: var(--s2); --kopf-seite: var(--s3); --kopf-rund: 22px; --r-card: 16px; }
  .nav-einrichtung { margin-left: auto; }
  main { padding: var(--s3); }
  .card { padding: var(--s3) var(--s4); }
  .brand small { display: none; }
  .actions { justify-content: stretch; }
  .actions button, .actions .file-btn { flex: 1 1 auto; }
  /* Lange Beschriftungen („Importieren: Pferde in den Stamm, 3 Behandlungen ins Archiv“) brechen
     um, statt aus dem Bildschirm zu ragen – gemessen ragte die Import-Vorschau 110 px über. */
  button, .file-btn { white-space: normal; }
  .actions.inline input { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Anlege-Fenster: alle Angaben auf einen Blick statt einer Reihe von Abfragen */
dialog.dlg {
  border: 1px solid var(--line); border-radius: var(--r-card); padding: 0;
  max-width: 34rem; width: calc(100vw - 2rem); box-shadow: 0 12px 40px rgba(16, 42, 67, .22);
}
dialog.dlg::backdrop { background: rgba(16, 42, 67, .35); }
dialog.dlg form { padding: var(--s4); max-height: 85vh; overflow-y: auto; }
dialog.dlg h3 { margin: 0 0 var(--s3); font-size: var(--t-l); }
.dlg-reihe { display: grid; gap: var(--s2); }
.dlg-reihe label { display: grid; gap: var(--s0); font-size: var(--t-s); color: var(--ink-2); }
.dlg-hinweis { margin: var(--s3) 0 var(--s2); font-size: var(--t-xs); color: var(--muted); }
/* Die Erklaerung im Rueckfrage-Dialog nennt teils Quelle und Folge in zwei Absaetzen. HTML
   faltet Zeilenumbrueche sonst zu einem Leerzeichen zusammen - dann stuende alles als Block. */
#frage-erklaerung { white-space: pre-line; margin-top: 0; }
#frage-felder { display: grid; gap: var(--s2); }
#frage-felder label { display: grid; gap: var(--s0); font-size: var(--t-s); color: var(--ink-2); }
#frage-felder .dlg-hinweis { margin: 0; }
/* Beschriftung links, Kaestchen rechts buendig - wie eine Einstellungsliste */
.dlg-haken { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.dlg-haken li + li { border-top: 1px solid var(--line); }
.dlg-haken label {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3); font-size: var(--t-s); cursor: pointer;
}
/* Der Text nimmt den freien Platz und darf umbrechen; „anywhere“ waere falsch – es setzt die
   Mindestbreite eines Flex-Elements auf null, und das Kaestchen rutscht an den Text heran. */
.dlg-haken label span { flex: 1; color: var(--ink-2); overflow-wrap: break-word; }
.dlg-haken label:hover { background: var(--brand-tint); }
.dlg-haken input { flex: none; width: auto; min-height: 0; margin: 0; accent-color: var(--brand); }
.dlg-fuss { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s4); }

/* Begruendete Ausnahmen: aufklappbar, in der Farbe der violetten Felder */
details.ausnahmen { background: #faf7fd; border-left: 3px solid #9b78c9; }
/* Alle Listen, die sich haeufen koennen: zugeklappt eine Zeile, auf Klick vollstaendig */
details.ausnahmen > summary, details.vorschlag-kasten > summary, details.status.lm > summary,
details.ausnahmen > summary::before, details.vorschlag-kasten > summary::before,
details.status.lm > summary::before, details.klaerkasten > summary::before {
  content: "▸"; color: var(--muted); font-size: .9em; flex: none;
}
details.ausnahmen[open] > summary::before, details.vorschlag-kasten[open] > summary::before,
details.status.lm[open] > summary::before, details.klaerkasten[open] > summary::before { content: "▾"; }
details.ausnahmen > summary::before { color: #6b4a96; }
.ausnahmen-liste { margin: var(--s2) 0 0; background: #fff; }
.ausnahmen-liste td, .ausnahmen-liste th { padding: var(--s1) var(--s2); vertical-align: top; }

/* Woher eine Vorbelegung stammt – schmal und zurückhaltend, direkt unter dem Feld.
   Sie verschwindet, sobald jemand das Feld anfasst: Dann ist es eine Entscheidung. */
.herkunft {
  margin: var(--s0) 0 0 var(--s5); padding-left: var(--s2);
  border-left: 2px solid var(--line); color: var(--muted); font-size: var(--t-xs); line-height: 1.4;
}

/* Ein ganzer Abschnitt zum Zuklappen: Klärfälle, Meldezeilen. Einzeln aufklappbar waren die
   Einträge schon; wer aber nur den Abschnitt darunter sehen will, scrollte an allen vorbei. */
details.abschnitt-block { margin: var(--s5) 0 0; }
details.abschnitt-block > summary {
  display: flex; align-items: baseline; gap: var(--s2);
  cursor: pointer; list-style: none; padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
}
details.abschnitt-block > summary::-webkit-details-marker { display: none; }
details.abschnitt-block > summary::before { content: "▸"; color: var(--muted); font-size: .9em; }
details.abschnitt-block[open] > summary::before { content: "▾"; }
details.abschnitt-block > summary .titel { font-size: var(--t-l); font-weight: 600; }
details.abschnitt-block > summary .zahl { margin-left: auto; color: var(--muted); font-size: var(--t-s); }
details.abschnitt-block > summary:hover .titel { color: var(--brand); }
details.abschnitt-block > :not(summary) { margin-top: var(--s3); }

/* Packungsliste im Klärfall – dieselbe Darstellung wie im Behandlungsformular. */
label.packung-liste { margin-top: var(--s1); max-width: 34rem; }

/* Hinweise zur Meldung: zusammengeklappt eine Zeile. Ein Vermerk, der ein halbes Jahr lang gilt,
   darf nicht dauerhaft den oberen Bildschirmrand belegen. */
details.melde-hinweise { margin-top: var(--s2); }
details.melde-hinweise > summary {
  display: inline-flex; align-items: center; gap: var(--s2);
  cursor: pointer; list-style: none; color: var(--gelb);
  font-size: var(--t-s); font-weight: 600;
  padding: var(--s0) var(--s3); border: 1px solid #f0e0bc; border-radius: var(--r-pill); background: var(--gelb-bg);
}
details.melde-hinweise > summary::-webkit-details-marker { display: none; }
details.melde-hinweise > summary .punkt { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
details.melde-hinweise > summary::after { content: "▸"; font-size: .9em; }
details.melde-hinweise[open] > summary::after { content: "▾"; }
details.melde-hinweise p {
  margin: var(--s2) 0 0; padding-left: var(--s3);
  border-left: 3px solid var(--gelb-dot); font-size: var(--t-s); line-height: 1.5;
}

/* Feld mit Vorlagen-Auswahl daneben; auf schmalen Schirmen rutscht die Auswahl darunter. */
label .mit-vorlage { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); align-items: flex-start; }
label .mit-vorlage > input, label .mit-vorlage > textarea { flex: 1 1 14rem; width: auto; margin-top: 0; min-width: 0; }
label .mit-vorlage > select { flex: 0 1 13rem; width: auto; margin-top: 0; min-width: 0; }
.vorlage-speichern { margin-top: var(--s1); }
/* Praxis-Nummer eines Präparats – wie auf einer Speisekarte */
.praep-nr { display: inline-block; min-width: 1.6rem; padding: 0 var(--s1); margin-right: var(--s1); border-radius: var(--r-knopf);
  background: var(--brand-tint); color: var(--brand-dark); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
#karte-nummern { margin-top: var(--s4); }
#tbl-nummern input { width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums; }
/* Kopf einer Karte mit Titel links und Knopf rechts – der Knopf klebte vorher auf der Tabelle. */
.karte-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.karte-kopfzeile h2 { margin: 0; }
/* Die Nummernliste scrollt in sich, der Tabellenkopf bleibt stehen. */
.nummern-liste { max-height: 24rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.nummern-liste #tbl-nummern thead th { position: sticky; top: 0; z-index: 1; background: var(--card); box-shadow: inset 0 -1px 0 var(--line); }
#tbl-nummern td { vertical-align: middle; }
/* Vorlagen im Reiter Praxis: Felder außerhalb eines <label>, deshalb mit eigener Gestaltung. */
#karte-vorlagen { margin-top: 0; }   /* erste Karte im Reiter „Vorlagen“ */
#karte-vorlagen h3 { margin: var(--s4) 0 var(--s2); font-size: var(--t-m); }
.vorlagen-liste { list-style: none; margin: 0; padding: 0; }
.vorlagen-liste li { display: flex; gap: var(--s2); align-items: flex-start; margin: 0 0 var(--s2); }
.vorlagen-liste li.leer { display: block; font-size: var(--t-s); }
.vorlagen-liste.archiviert li span { flex: 1; font-size: var(--t-s); color: var(--ink-2); padding-top: var(--s1); }
.vorlage-neu { display: flex; gap: var(--s2); align-items: flex-start; margin-bottom: var(--s2); }
/* Die Liste scrollt in sich; das Feld für eine neue Vorlage bleibt darüber stehen (04.10.2026). */
.vorlagen-liste.scrollend { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--s2); }
.vorlagen-liste.scrollend li:last-child { margin-bottom: 0; }
.vorlagen-liste li.neu input, .vorlagen-liste li.neu textarea { border-color: var(--brand); box-shadow: var(--ring); }
.vorlagen-zahl { margin: 0 0 var(--s1); font-size: var(--t-s); }

.vorlagen-verwaltung input, .vorlagen-verwaltung textarea {
  flex: 1 1 auto; min-width: 0; min-height: 40px; padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-knopf); font: inherit; color: var(--ink); background: #fff;
}
.vorlagen-verwaltung textarea { resize: vertical; border-radius: var(--r-ctl); }
.vorlagen-verwaltung input:focus, .vorlagen-verwaltung textarea:focus { border-color: var(--brand); box-shadow: var(--ring); outline: none; }

/* Zuletzt behandelte Pferde: Überschrift als fester Balken, darunter eine eigene scrollbare Liste. Vorher
   klebte die Überschrift in der scrollenden Liste, und die Einträge schienen beim Scrollen hindurch. */
#pferd-liste { padding-bottom: 0; overflow: hidden; }
#pferd-liste .zuletzt-kopf { margin: 0; padding: 0 0 var(--s2); border-bottom: 1px solid var(--line); }
#pferd-liste .kein-treffer { margin: 0; padding: 0 0 var(--s2); }
#pferd-liste .zuletzt-liste { max-height: 16rem; overflow-y: auto; overscroll-behavior: contain; padding: var(--s2) 0; }

/* Journal: Präparat in einer Zeile (voller Name beim Darüberfahren), ganze Zeile anklickbar */
/* Mit Kennung: #tbl-journal … .unter { white-space: normal } würde sonst gewinnen. */
#tbl-journal td .unter.einzeilig, .unter.einzeilig { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tbl-journal tr.anklickbar { cursor: pointer; }
#tbl-journal tr.anklickbar:hover td { background: var(--brand-tint); }
#tbl-journal tr.anklickbar:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
#tbl-journal td.aktion .tiny { display: block; width: 100%; margin: 0 0 var(--s1); }
#tbl-journal td.aktion .tiny:last-child { margin-bottom: 0; }
/* Restzeit unter „Bearbeiten“ – nur die verbleibende Zeit, klein und ruhig. */
#tbl-journal td.aktion .restzeit { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
/* Testfälle tragen hinter den Knöpfen ein ✕ zum Löschen; nur dann wird die Spalte etwas breiter –
   und die Tabelle um genau so viel, damit die übrigen Spalten ihre Breite behalten. */
#tbl-journal.mit-testfaellen { min-width: calc(1080px + 2rem); }
#tbl-journal.mit-testfaellen th:nth-child(9) { width: 11.5rem; }
#tbl-journal td.aktion .aktion-reihe { display: flex; align-items: center; gap: var(--s1); }
#tbl-journal td.aktion .aktion-stapel { flex: 1; min-width: 0; }
#tbl-journal td.aktion button.icon.del { display: inline-block; width: auto; flex: none; margin: 0; }
/* Behandlung ansehen */
dialog.dlg-breit { width: min(44rem, calc(100vw - 2 * var(--s4))); max-width: none; padding: 0; }
dialog.dlg-breit .dlg-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s4) 0; }
dialog.dlg-breit .dlg-kopf h3 { margin: 0; }
#behandlung-inhalt { padding: var(--s2) var(--s4) 0; max-height: 65vh; overflow-y: auto; }
/* Fuß in zwei Gruppen: links Beleg und E-Mail, rechts Folgebehandlung und Bearbeiten. Eine Linie
   trennt ihn vom Inhalt, der darüber scrollt. */
#dlg-behandlung .dlg-fuss { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between; align-items: center;
  margin: var(--s3) 0 0; padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--line); }
#dlg-behandlung .fuss-gruppe { display: flex; flex-wrap: wrap; gap: var(--s2); }
.behandlung-details th { width: 11rem; text-align: left; font-weight: 500; color: var(--ink-2); vertical-align: top; }
.behandlung-details td .unter { display: block; }
.behandlung-details td .pass-text { white-space: pre-line; }   /* der Text für den Pass, Zeile für Zeile */
.befund-kurz { display: block; margin-bottom: var(--s1); }
/* Grund der Ampel oben in „Behandlung ansehen“ (15.10.2026): rot oder gelb, je Befund eine Zeile mit Fundstelle darunter. */
.ampel-grund { margin: 0 0 var(--s3); }
.ampel-grund-liste { margin: var(--s1) 0 var(--s2); padding-left: 1.2em; }
.ampel-grund-liste:last-child { margin-bottom: 0; }
.ampel-grund-liste li { margin: var(--s1) 0; }
.ampel-grund-liste small { display: block; opacity: .75; font-size: var(--t-xs); }

/* Offener Hinweis im Formular (Wartezeit): gelb wie ein Hinweis, voll breit unter dem Feld. */
.hinweis-offen {
  margin: var(--s2) 0 0; padding: var(--s2) var(--s3);
  background: var(--gelb-bg); border-left: 3px solid var(--gelb-dot); border-radius: var(--r-ctl);
  color: var(--ink); font-size: var(--t-s); line-height: 1.5;
}

/* Hinweise in der Klärfall-Karte – alle gleich: gelb wie der offene Fall, vorn ein fettes Stichwort,
   immer gleich unter dem Kopf. Vorher standen grün, gelb und grau nebeneinander, in drei Schriftgrößen. */
.klaerfall .karten-hinweis {
  margin: var(--s2) 0; padding: var(--s2) var(--s3);
  background: var(--gelb-bg); border-left: 3px solid var(--gelb-dot); border-radius: var(--r-ctl);
  color: var(--ink); font-size: var(--t-s); line-height: 1.5;
}
.klaerfall .karten-hinweis > b:first-child { color: var(--gelb); }
.klaerfall .karten-hinweis .tiny { margin-left: var(--s2); vertical-align: baseline; }
/* Für andere Hinweiskästen, die gelb gemeint sind (Import-Vorschau) – die Klasse war nie definiert. */
.status.gelb-rahmen { border-left: 3px solid var(--gelb-dot); background: var(--gelb-bg); color: #4a3a12; }

/* Erledigte Klärfälle bleiben unten stehen, zugeklappt. Ein gelöster Fall verschwindet sonst aus
   der Liste – die Zeile ist ja meldebereit –, und man findet nicht wieder, was man getan hat. */
details.erledigt-block { margin-top: var(--s4); border-top: 1px solid var(--line); padding-top: var(--s2); }
details.erledigt-block > summary {
  display: inline-flex; align-items: center; gap: var(--s2);
  cursor: pointer; list-style: none; color: var(--gruen); font-size: var(--t-s); font-weight: 600;
}
details.erledigt-block > summary::-webkit-details-marker { display: none; }
details.erledigt-block > summary::after { content: "▸"; color: var(--muted); font-size: .9em; }
details.erledigt-block[open] > summary::after { content: "▾"; }
.erledigt-zeile {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3);
  padding: var(--s2) var(--s3); margin-top: var(--s2);
  border: 1px solid var(--line); border-left: 3px solid var(--gruen-dot); border-radius: var(--r-ctl);
  font-size: var(--t-m);
}
.erledigt-zeile .was { flex: 1 1 14rem; min-width: 0; }
.erledigt-zeile .unter { display: block; color: var(--muted); font-size: var(--t-s); margin-top: var(--s0); }

/* Gleiten statt springen: Jeder programmgesteuerte Sprung wird zur Bewegung, die man verfolgen
   kann. Wer Bewegung abgestellt hat, bekommt weiterhin den direkten Sprung. */
html { scroll-behavior: smooth; }

/* Klappt ein Kasten auf, schiebt er alles darunter weg. Bisher geschah das in einem Bild, sodass
   die Liste darunter zu springen schien. Mit interpolate-size wächst er stattdessen sichtbar auf
   seine Höhe. Browser ohne ::details-content klappen wie bisher sofort auf – nichts geht kaputt.

   `overflow: hidden`, nicht `clip`: Der erste Absatz im Kasten hat einen oberen Abstand, und der
   fiel mit dem Kasten zusammen (Margin-Kollaps), statt in ihm zu stecken. Die Bewegung lief dann
   sanft bis kurz vors Ziel und sprang die letzten 12 px – genau das, was als Ruckeln auffiel.
   `hidden` bildet einen eigenen Layout-Kontext, der Abstand gehört wieder zum Kasten.

   Die Deckkraft läuft mit, und beim Zuklappen schneller als die Höhe. Geklippt wird von unten,
   der Inhalt bleibt also oben verankert: Die erste Zeile stand bis zum letzten Bild in voller
   Stärke da und war dann plötzlich weg – der Kasten war zu, die Schrift hing noch. Jetzt ist sie
   verblasst, bevor der Kasten schließt. */
:root { interpolate-size: allow-keywords; }
details.spickzettel::details-content,
details.unterpunkt::details-content,
details.klaerfall::details-content,
details.recht::details-content {
  block-size: 0;
  opacity: 0;
  overflow: hidden;
  /* `ease-in-out`, nicht die schnelle Kurve von vorher: Die legte 72 % der Strecke in den ersten
     32 % der Zeit zurück. Bei einer Prüfzeile von 38 px fällt das nicht auf, beim Spickzettel mit
     584 px sprang die Kante 75 px je Bild – man sah keine Bewegung, sondern ein Aufschnappen.
     Gemessen: 75 px je Bild vorher, 37 px jetzt. */
  transition: block-size .38s ease-in-out, opacity .2s ease, content-visibility .38s;
  transition-behavior: allow-discrete;
}
/* Ein Klärfall ist kleiner als der Spickzettel und darf schneller sein. */
details.klaerfall::details-content { transition-duration: .28s, .16s, .28s; }
details.spickzettel[open]::details-content,
details.unterpunkt[open]::details-content,
details.klaerfall[open]::details-content,
details.recht[open]::details-content { block-size: auto; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Ein Präparat ohne Pferdezulassung ist wählbar – gemeldet wird, was angewendet wurde, auch
   umgewidmet (Art. 112 VO (EU) 2019/6). Es darf nur nicht so aussehen wie eine Pferdezulassung. */
.treffer-btn .umwidmung { color: var(--gelb); font-weight: 650; }

/* Das (i) neben einer Überschrift: holt den Erklärtext hervor, der sonst dauerhaft Platz
   nähme. Klein, rund, unaufdringlich – und gedrückt, solange der Text offen steht. */
.info-knopf {
  width: 1.15rem; height: 1.15rem; padding: 0; margin-left: var(--s1);
  border: 1px solid var(--line); border-radius: 50%; background: var(--card);
  color: var(--muted); font-size: var(--t-xxs); font-weight: 700; line-height: 1;
  cursor: help; vertical-align: middle; flex: none;
}
/* Farbe nur beim direkten Überfahren, und hell: Gefüllt in Dunkelblau war das Zeichen darin
   kaum zu sehen. Ob die Erklärung offen ist, zeigt der Text darunter – nicht der Knopf. */
.info-knopf:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); }
.info-knopf.aktiv { background: var(--card); border-color: var(--line); color: var(--muted); }
.info-knopf.aktiv:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); }
h2 .info-knopf { vertical-align: 12%; }
label > .info-knopf { vertical-align: 1px; }
/* Ein Maß für jedes Fragezeichen (12.10.2026, Nutzer: „klebt am Rand“, „einheitlich und sauber“): Es steht direkt hinter
   dem, was es erklärt, rund 8 px daneben – im Fließtext Leerzeichen und var(--s1), in einer Zeile mit Abstand (flex, gap)
   nur dieser Abstand. Vorher kamen dort beide zusammen, 16–20 px; in der Klärfall-Karte stand es rechts am Rand über dem
   gelben Kasten. `npm run ui` misst das in allen Reitern und Breiten. */
:where(.kopfzeile, .meldezeile, .melde-aktionen, .actions, #vorgaben-text, .check-fuss, details.klaerfall > summary, .inbox-zeile) > .info-knopf { margin-left: 0; }
/* Text und Fragezeichen bleiben beisammen, ohne Umbruch dazwischen. Bewusst kein inline-flex für alle: Neben einem sehr
   langen Pferdenamen (Grenzfall G15) brachte das die Seite zum Stehen – der Prüfroboter hing dort. */
.mit-info { white-space: nowrap; }
.mit-info > .info-knopf { margin-left: var(--s2); }
/* Für längeren Text: Er darf umbrechen, das Fragezeichen steht rechts daneben auf halber Höhe. */
.mit-frage { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.mit-frage > :first-child { min-width: 0; }
.mit-frage > .info-knopf { margin-left: 0; flex: none; }
:is(#melde-status .kennzahlen, .filterzeile) .mit-info { display: inline-flex; align-items: center; gap: var(--s2); }
:is(#melde-status .kennzahlen, .filterzeile) .mit-info > .info-knopf { margin-left: 0; }
.check-fuss { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.check-umfang { margin-top: var(--s2); }


/* Die Aktionsspalte trägt jetzt eine Überschrift wie jede andere – nur unauffällig, weil dort
   keine Angabe steht, sondern ein Knopf. */
.table th.aktion { text-align: right; color: var(--muted); font-weight: 500; }

/* Was für die Praxisdaten noch fehlt: eine Zeile je Angabe, mit einer Marke wofür. */
.fehlliste { margin: var(--s1) 0 0; padding-left: var(--s4); }
.fehlliste li { margin: var(--s1) 0; }
.fehlliste .tag { margin-left: var(--s2); font-size: var(--t-xxs); }
.fehlliste .unter { display: block; color: var(--ink-2); font-size: var(--t-s); }

/* Die Häkchenspalten der Wirkstofftabelle: Überschrift über das Kästchen, nicht daneben.
   Gemessen standen die Kästchen 52 px rechts von ihrer Überschrift – bei neun Spalten und
   fünfzig Zeilen setzt man dann leicht das Häkchen der Nachbarspalte. */
#tbl-stoffe th:nth-child(n+4):nth-child(-n+9) { text-align: center; }
#tbl-stoffe td.flag { text-align: center; }

/* Menge nachtragen. Eigenes Raster statt `.row`: Dort bekommt jede Spalte denselben Anteil, und
   der Übernehmen-Knopf wurde so breit wie das Mengenfeld – ein Knopf, der aussah wie ein Balken.
   Hier bekommt jedes Feld, was es braucht; der Rest bleibt leer. */
.fix-reihe {
  display: grid; gap: var(--s3); align-items: end; justify-content: start;
  grid-template-columns: minmax(6rem, 9rem) minmax(6rem, 9rem) auto;
}
.fix-reihe:has(.wer) { grid-template-columns: minmax(8rem, 14rem) minmax(6rem, 9rem) minmax(6rem, 9rem) auto; }
.fix-reihe.mit-art { grid-template-columns: minmax(10rem, 14rem) minmax(6rem, 9rem) minmax(6rem, 9rem) auto; }
.fix-reihe.mit-art:has(.wer) { grid-template-columns: minmax(8rem, 14rem) minmax(10rem, 14rem) minmax(6rem, 9rem) minmax(6rem, 9rem) auto; }
.fix-reihe .wer, .journal-reihe .wer { align-self: center; font-size: var(--t-s); color: var(--ink-2); font-weight: 600; }
/* Journal-Behandlung im Klärfall: nur der Weg ins Formular, mittig zur Pferdeangabe. */
.klaerfall .journal-reihe { align-items: center; }
.fix-reihe button { white-space: nowrap; }
@media (max-width: 720px) {
  .fix-reihe, .fix-reihe:has(.wer), .fix-reihe.mit-art, .fix-reihe.mit-art:has(.wer) { grid-template-columns: 1fr 1fr; }
  .fix-reihe .wer, .fix-reihe label:has(.fix-art) { grid-column: 1 / -1; }
}

/* Ein Fall, der nach der Eintragung noch nicht fertig ist, leuchtet kurz auf – sonst sieht man
   nicht, dass er noch aussteht, und sucht ihn an der alten Stelle. */
@keyframes klaerfall-weiter {
  0%   { box-shadow: var(--ring-gelb); }
  100% { box-shadow: var(--ring-aus); }
}
details.klaerfall.weiter { animation: klaerfall-weiter 2.2s ease-out; border-radius: var(--r-card); }

/* Der eben erledigte Fall hebt sich kurz hervor – sonst sieht man nicht, wohin er gewandert ist. */
@keyframes erledigt-angekommen {
  0%   { background: var(--gruen-bg); box-shadow: var(--ring-gruen); }
  100% { background: transparent; box-shadow: var(--ring-aus); }
}
.erledigt-zeile.neu { animation: erledigt-angekommen 2s ease-out; }

/* Klärfall: Präparat wählen – Suchfeld, darunter die Auswahlliste, darunter die zwei Auswege. */
.klaerfall label.praeparat-suche, .klaerfall label.praeparat-liste { max-width: 48rem; margin-top: var(--s2); }
.klaerfall .zu-knoepfe { margin-top: var(--s3); }

/* ---------------------------------------------------------- Meldung § 61a -- */
/* Die Zahlen des Datenjahres in einer Zeile, ohne Kasten. Offen darunter steht nur, was den Export
   aufhält; Hinweise, die man nur wissen muss, klappen zusammen. */
#melde-status { margin: 0 0 var(--s3); }
#melde-status .kennzahlen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0; color: var(--ink-2); }
#melde-status .kennzahlen .sep { color: var(--line); }
/* Das (?) gehört zu der Zahl davor – eng daneben, nicht mit dem Abstand zwischen den Kennzahlen */
#melde-status .warn { margin: var(--s3) 0 0; }
#melde-status details.melde-hinweise { margin-top: var(--s2); }
/* Abschnitte im Reiter „Klärfälle“: die Klärfälle selbst ohne eigene Überschrift – der Umschalter
   sagt schon, wo man ist –, „Bitte prüfen“ mit einer. */
.melde-block + .melde-block { margin-top: var(--s5); }
.block-titel { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); font-size: var(--t-l); }
.block-titel .zahl { font-size: var(--t-xs); font-weight: 600; color: var(--gelb); background: var(--gelb-bg); border-radius: 999px; padding: 0 var(--s2); }
/* Warum ein Fall offen ist, steht hinter dem (?) in der Karte. */
/* Das (?) steht rechts neben der ersten Frage der Karte, nicht in einer eigenen Zeile. */
.klaerfall p.warum { clear: both; }
.klaerfall p.warum { margin-top: var(--s1); }
/* Meldezeilen: feste Spaltenbreiten wie in Journal und Pferdestamm – beim Suchen springt nichts. */
#tbl-melde { table-layout: fixed; min-width: 900px; }
#tbl-melde th { white-space: normal; }
#tbl-melde th:nth-child(1) { width: 3.5rem; }
#tbl-melde th:nth-child(2) { width: 6.5rem; }
#tbl-melde th:nth-child(4) { width: 7rem; }
#tbl-melde th:nth-child(5) { width: 9.5rem; }
#tbl-melde th:nth-child(6) { width: 6rem; }
#tbl-melde th:nth-child(7) { width: 10rem; }
#tbl-melde th:nth-child(8) { width: 11rem; }
#tbl-melde td { overflow-wrap: break-word; }
/* Meldehistorie: Dateinamen sind lang und ohne Leerzeichen – sie brechen je Datei in eigener Zeile
   um, statt in die Statusspalte zu laufen. */
#tbl-historie { table-layout: fixed; min-width: 860px; }
#tbl-historie th:nth-child(1) { width: 9.5rem; }
#tbl-historie th:nth-child(2) { width: 9.5rem; }
#tbl-historie th:nth-child(3), #tbl-historie th:nth-child(4) { width: 5rem; }
#tbl-historie th:nth-child(6) { width: 12.5rem; }
#tbl-historie th:nth-child(7) { width: 9rem; }
#tbl-historie td.dateien .datei { display: block; overflow-wrap: anywhere; color: var(--muted); font-size: var(--t-xs); }
#tbl-historie td.dateien .datei + .datei { margin-top: var(--s1); }
/* Hinweise der Meldezeilen sind jetzt fachliche Sätze – sie dürfen umbrechen. */
#tbl-melde td .tag { white-space: normal; }
#melde-status .gruende { margin: var(--s1) 0 0; padding-left: var(--s4); }
#melde-status .gruende li { margin: var(--s1) 0; }
@media (max-width: 640px) { #melde-status .kennzahlen .sep { display: none; } }

/* ---------------------------------------------- Behandlungsformular, entschlackt (03.10.2026) -- */
/* Gewähltes Pferd als eine Zeile: Name, Halter, Status, (?) – die Knöpfe rechts, schmal darunter */
#pferd-status .meldezeile > b { font-size: 1rem; }
.pferd-aktionen { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
#pferd-status .herkunft { margin: var(--s2) 0 0; }
/* Behandelnd bei nur einer Tierärztin: ihr Name klein neben dem Datum, auf Höhe des Feldes */
.tierarzt-einzeln { align-self: end; padding-bottom: 10px; font-size: var(--t-m); color: var(--ink-2); }
.tierarzt-einzeln .herkunft { display: block; margin-top: var(--s1); }
/* Art · Weg · Zweck als eine Zeile */
.vorgaben-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin: var(--s2) 0 var(--s3); font-size: var(--t-m); }
.vorgaben-zeile #vorgaben-text { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.vorgaben-zeile .herkunft { flex-basis: 100%; margin: 0; }
/* Hinweisbalken über dem Formular: eine schmale Zeile, die Erklärung hinter dem (?) */
.status.schmal { padding: 6px var(--s3); margin: var(--s2) 0; }
.status.schmal .herkunft { margin: var(--s1) 0 0; }
.vorlaeufig { color: var(--gelb); }

/* ------------------------------------------------------------ Einführung (05.10.2026) -- */
/* „Einführung“: ein Kompass statt des Fragezeichens (Nutzer, 05.10.2026) – als leicht abgesetzte Pille, damit man sie findet. */
/* Seit dem 13.10.2026 der letzte Eintrag unter „Einrichtung“. */
#nav .nav-hilfe { display: inline-flex; align-items: center; gap: .4em; }
#nav .nav-hilfe svg { flex: none; transition: transform .35s ease; }
#nav .nav-hilfe:hover svg { transform: rotate(35deg); }
@media (prefers-reduced-motion: reduce) { #nav .nav-hilfe:hover svg { transform: none; } }
/* Geführte Tour: Die Fläche fängt alle Klicks ab; das „Licht“ ist ein Rahmen um den erklärten Bereich, dessen riesiger
   Schatten den Rest abdunkelt. Die Karte steht neben dem Bereich, wo Platz ist. */
/* Weicher Schein statt hartem weißem Rahmen, und nur leicht abgedunkelt – der Rest bleibt lesbar (Nutzer, 05.10.2026). */
.tour { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.tour-sperre { position: fixed; inset: 0; pointer-events: auto; background: rgba(10, 28, 44, .3); }
.tour-licht { position: fixed; top: 50%; left: 50%; width: 0; height: 0; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .45), 0 0 22px 6px rgba(255, 255, 255, .35);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
.tour-karte { pointer-events: auto; position: fixed; width: min(26rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto;
  background: var(--card); border-radius: var(--r-card); box-shadow: 0 16px 48px rgba(10, 28, 44, .35); padding: var(--s4); }
.tour-karte.rechts { right: 1rem; bottom: 1rem; }
.tour-karte.links { left: 1rem; bottom: 1rem; }
.tour-karte.rechts-oben { right: 1rem; }
.tour-karte.links-oben { left: 1rem; }
.tour-karte.unten { left: 50%; transform: translateX(-50%); bottom: 1rem; }
.tour-karte.oben { left: 50%; transform: translateX(-50%); }
.tour-karte.mitte { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tour-karte h3 { margin: 0 0 var(--s2); font-size: var(--t-l); }
.tour-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.tour-schritt { font-size: var(--t-s); color: var(--muted); }
.tour-punkte { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: var(--s2) 0 var(--s3); padding: 0; }
.tour-punkte button { width: 1.3rem; height: .4rem; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--line); cursor: pointer; }
.tour-punkte button.aktiv { background: var(--brand); }
.tour-punkte button.erledigt { background: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.tour-text { margin: 0 0 var(--s3); line-height: 1.5; }
.tour-stand { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-ctl); font-size: var(--t-m); background: var(--line-2); color: var(--ink-2); }
.tour-stand.ok { background: var(--brand-tint); color: var(--brand-dark); }
.tour-stand::before { content: "○ "; }
.tour-stand.ok::before { content: "✓ "; }
.tour-fuss { display: flex; justify-content: space-between; gap: var(--s2); }
/* Reiterwechsel in der Tour (Nutzer, 05.10.2026): Die Kopfzeile liegt dann über der Tour und ist eigens leicht abgedunkelt;
   der Reiter, in den die Tour gerade gewechselt ist, leuchtet darüber und pulsiert kurz, damit man den Wechsel bemerkt. */
header.top.tour-an { z-index: 101; }
header.top.tour-an::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(10, 28, 44, .3); pointer-events: none; z-index: 1; }
#nav button.tour-reiter { position: relative; z-index: 2; background: #fff; color: var(--brand-dark); text-shadow: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .45), 0 0 18px 6px rgba(255, 255, 255, .4); animation: tourReiter 1.1s ease-out 2; }
@keyframes tourReiter {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, .7), 0 0 0 0 rgba(255, 255, 255, 0); }
  40% { transform: scale(1.1); box-shadow: 0 0 0 7px rgba(255, 255, 255, .35), 0 0 24px 9px rgba(255, 255, 255, .5); }
  100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(255, 255, 255, .45), 0 0 18px 6px rgba(255, 255, 255, .4); }
}
@media (prefers-reduced-motion: reduce) { #nav button.tour-reiter { animation: none; } }

/* Wer meldet das Archiv? (05.10.2026) – eine Frage, kein Fehler: gelb wie ein offener Auftrag, oben im Meldereiter. */
.archiv-frage { border: 1px solid var(--line); border-left: 3px solid var(--gelb-dot); border-radius: var(--r-ctl);
  background: var(--gelb-bg); padding: var(--s2) var(--s3); margin-bottom: var(--s3); }
.archiv-frage p { margin: 0 0 var(--s2); }
.archiv-frage .actions { margin: 0; flex-wrap: wrap; }

/* Zurücksetzen-Symbol neben „Behandlung erfassen“ (05.10.2026): rund, ruhig; beim Überfahren dreht sich der Pfeil. */
.symbol-knopf { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--muted); box-shadow: none; cursor: pointer; }
.symbol-knopf:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-tint); }
.symbol-knopf:focus-visible { outline: none; box-shadow: var(--ring); }
.symbol-knopf svg { transition: transform .35s ease; }
.symbol-knopf:hover svg { transform: rotate(-70deg); }
@media (prefers-reduced-motion: reduce) { .symbol-knopf:hover svg { transform: none; } }

/* Nach dem Speichern (05.10.2026): der nächste Schritt umrandet oben im Ergebnis; beim Erscheinen pulsiert der Rand
   dreimal, damit er auffällt. */
.nach-speichern-box { border: 2px solid var(--brand); border-radius: var(--r-card); background: var(--brand-tint);
  padding: var(--s3); margin: var(--s2) 0 var(--s3); }
.nach-speichern-box .nach-speichern-hinweis { margin: 0 0 var(--s2); color: var(--ink); }
.nach-speichern-box .nach-speichern { margin: 0; }
.nach-speichern-box .nach-speichern button { min-height: 52px; font-size: var(--t-xl); font-weight: 650; }
.nach-speichern-weiter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s2); }
.nach-speichern-weiter button { white-space: normal; }
@media (max-width: 640px) { .nach-speichern-weiter { grid-template-columns: minmax(0, 1fr); } }
/* Nach dem Speichern: Das Formular tritt zurück, bis man es anfasst. */
#form-behandlung.ruhend { opacity: .5; filter: grayscale(.5); transition: opacity .25s ease, filter .25s ease; }
#form-behandlung.ruhend:hover { opacity: .7; }
/* Suche über der Tabelle der Meldezeilen (05.10.2026) */
.melde-aktionen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
/* Rechts an der Tabelle, über ihrer rechten Kante (05.10.2026, Nutzer) */
.actions.inline.melde-suche-zeile { margin: 0 0 var(--s3); justify-content: flex-end; }
/* So breit wie die Suche im Journal (24rem); mit .actions.inline, sonst wuchs das Feld über die ganze Breite. */
.actions.inline.melde-suche-zeile input { flex: 0 1 24rem; min-width: 12rem; }
.nach-speichern-box.hervor { animation: nachSpeichernPuls 1.1s ease-out 3; }
@keyframes nachSpeichernPuls { 0% { box-shadow: 0 0 0 0 rgba(13, 92, 138, .45); } 100% { box-shadow: 0 0 0 12px rgba(13, 92, 138, 0); } }
@media (prefers-reduced-motion: reduce) { .nach-speichern-box.hervor { animation: none; } }

/* Import (05.10.2026): eine sichtbare Ablagefläche statt eines blassen Kartenrands. Die Karte selbst nimmt Dateien
   weiter überall an; beim Darüberziehen leuchtet die Fläche. */
#dropzone { border: 1px solid var(--line); background: var(--card); }
#dropzone > h2 { margin-bottom: var(--s3); }
.ablage { display: grid; justify-items: center; gap: var(--s2); text-align: center; cursor: pointer;
  border: 2px dashed #b9cad8; border-radius: var(--r-card); background: #f8fbfd; padding: var(--s5, 1.75rem) var(--s4); margin: var(--s3) 0; }
.ablage:hover { border-color: var(--brand); background: var(--brand-tint); }
#dropzone.over .ablage { border-color: var(--brand); background: var(--brand-tint); box-shadow: var(--ring); }
.ablage-symbol { color: var(--brand); }
.ablage-titel { margin: 0; font-size: var(--t-xl); font-weight: 650; color: var(--ink); }
.ablage-text { margin: 0; font-size: var(--t-m); color: var(--muted); }
.ablage .ablage-knoepfe { justify-content: center; margin-top: var(--s2); }
/* Eingangsordner: Status und „Ordner öffnen“ in einer Zeile, das (?) als eigener Absatz darunter */
#inbox-status .inbox-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
#inbox-status #info-inbox { margin: var(--s2) 0 0; }
#inbox-status #inbox-pfad { display: block; margin-top: var(--s1); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-xs); word-break: break-all; }
#inbox-log:not(:empty) { margin-top: var(--s2); font-size: var(--t-s); }

/* „Hinzufügen“ so hoch wie das Feld daneben (05.10.2026) – vorher kleiner und oben angeklebt. */
.ta-neu > button, .vorlage-neu > button { align-self: stretch; min-width: 7.5rem; }

/* Zweites Fenster (06.10.2026): deckt die App ab, bis man hier übernimmt. */
#fenster-sperre { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: var(--s4);
  background: rgba(10, 28, 44, .55); }
.fenster-sperre-karte { max-width: 30rem; background: var(--card); border-radius: var(--r-card); padding: var(--s5); box-shadow: var(--sh-2); }
.fenster-sperre-karte h2 { margin: 0 0 var(--s2); }
.fenster-sperre-karte p { margin: 0 0 var(--s4); color: var(--ink-2); }

/* Einzelheiten unter dem Ergebnis (06.10.2026): Kennwerte und „Zur Kenntnis“ zugeklappt, wie „Rechtsgrundlage“. */
details.ergebnis-details { margin: var(--s3) 0 0; font-size: var(--t-m); }
details.ergebnis-details > summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
details.ergebnis-details[open] > summary { margin-bottom: var(--s2); }
/* Zeile, zu der „Zurück zum Journal“ führt (06.10.2026). */
#tbl-journal tr.aufleuchten > td { animation: aufleuchten 2.2s ease-out; }
@keyframes aufleuchten { 0%, 35% { background: var(--brand-tint); } 100% { background: transparent; } }
#tbl-historie tr.aufleuchten > td { animation: aufleuchten 2.2s ease-out; }
/* Knopf, der wie ein Verweis aussieht: „3 Behandlungen“ im Pferdestamm öffnet das Journal (06.10.2026). */
button.verweis { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
button.verweis:hover { color: var(--ink); }
/* Pferdeformular nach „Bearbeiten“ (06.10.2026): kurz hervorgehoben, wie der Kasten nach dem Speichern. */
.card.hervor { animation: nachSpeichernPuls 1.1s ease-out 2; }
@media (prefers-reduced-motion: reduce) { .card.hervor { animation: none; } #tbl-journal tr.aufleuchten > td, #tbl-historie tr.aufleuchten > td { animation: none; } }
/* Urteil über der Checkliste (06.10.2026, Punkt 9): live, seit es den Knopf „Prüfen“ nicht mehr gibt. */
.check-urteil { margin: 0 0 var(--s2); }

/* Mehrere Praxen (10.10.2026): Name der geöffneten Praxis im Kopf, ein Klick führt zu „Alle Praxen“. */
.praxis-aktiv { margin-left: var(--s3); padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.12); color: inherit; font: inherit; font-size: var(--t-s); cursor: pointer; max-width: 22ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.praxis-aktiv:hover { background: rgba(255,255,255,.22); }
#tbl-praxen tr.geoeffnet > td { background: var(--brand-tint); }
fieldset.dritter-bnr { margin-top: var(--s4); }
fieldset.dritter-bnr input { width: 18rem; }

/* Status am Behandlungstag weicht vom heutigen ab (vor dem Schlachtausschluss behandelt), 10.10.2026 */
.status-am-tag { margin: var(--s1) 0 0; }

/* Auswahllisten (14.10.2026, Nutzer: „die Pfeile zum Ausklappen in den Feldern sind zu weit rechts“): Den Pfeil zeichnete der
   Browser, und er saß in der runden Ecke des Felds. Jetzt ein eigener Pfeil – dieselbe Form wie am Knopf „Einrichtung“ –,
   so weit vom runden Ende entfernt wie der Text vom linken. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none; padding-right: 2.5rem;   /* Text links und Pfeil rechts je 1rem vom Rand */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.25 4.25 6 8l3.75-3.75' fill='none' stroke='%23526476' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 12px;
}
@media (max-width: 640px) {
  #journal-kopf .actions.filterzeile select { padding-right: 1.9rem; background-position: right .65rem center; }
}

/* Collector mit einem Knopf (14.10.2026): die Schritte als Liste mit Zeichen davor – wie die Prüfliste der Behandlung. */
#collector-karte { margin-top: var(--s4); }
.collector-schritte { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; gap: var(--s2); }
.collector-schritte li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0 var(--s2); align-items: baseline; }
.collector-schritte .zeichen { grid-row: span 2; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  font-size: var(--t-xs); font-weight: 700; background: var(--line-2); color: var(--muted); }
.collector-schritte li.ok .zeichen { background: var(--gruen-bg); color: var(--gruen); }
.collector-schritte li.warn .zeichen, .collector-schritte li.frage .zeichen { background: var(--gelb-bg); color: var(--gelb); }
.collector-schritte li.fehler .zeichen { background: var(--rot-bg); color: var(--rot); }
.collector-schritte li.laeuft .zeichen { background: var(--brand-tint); color: var(--brand-dark); }
.collector-schritte .titel { font-weight: 600; }
.collector-schritte .text { grid-column: 2; color: var(--ink-2); font-size: var(--t-m); overflow-wrap: anywhere; }
.collector-frage { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2) var(--s3); margin: var(--s3) 0; }
.collector-frage label { flex: 1 1 18rem; }

/* Kontakt des Halters im Pferdeformular (14.10.2026): PLZ schmal, Ort breit. */
fieldset.halter-kontakt { margin-top: var(--s4); display: grid; gap: var(--s3); }
fieldset.halter-kontakt legend { font-weight: 600; margin-bottom: var(--s2); }
fieldset.halter-kontakt > p { margin: 0; }
.row.halter-ort { grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); }

/* Wirkstofftabelle: Überschriften mit (?) dürfen zweizeilig werden (14.10.2026) – sonst lief die Tabelle seitlich über. */
#tbl-stoffe thead th { white-space: normal; vertical-align: bottom; }
/* Text und (?) als Paar mittig über der Spalte; der Text darf zweizeilig werden („Equiden-/liste“, „nur/Nicht-LM“), nie
   schmaler als sein längstes Wort – sonst lag das (?) darauf oder ragte in die Nachbarspalte (14.10.2026, Nutzer). */
#tbl-stoffe thead th .mit-frage { display: inline-flex; align-items: flex-end; gap: var(--s1); max-width: 100%; vertical-align: bottom; }
#tbl-stoffe thead th .mit-frage > span { min-width: min-content; text-align: center; hyphens: manual; }

/* Warnhinweise in den Vorlagen (15.10.2026): Löschen und „bei Antibiotika vorbelegt“ untereinander neben dem Text.
   Mehrzeilige Felder wachsen mit dem Text (Nutzer: „viel zu kleines Feld“); der Knopf daneben bleibt ein normaler Knopf. */
.vorlage-neu:has(textarea) > button { align-self: flex-start; min-height: 40px; }
.vorlagen-verwaltung textarea, textarea[name="warnhinweise"] { field-sizing: content; min-height: 5.5em; }
.vorlage-knoepfe { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); flex: none; }
.vorlage-ab { font-size: var(--t-s); white-space: nowrap; }

/* Archivzeile bearbeiten (15.10.2026): Löschen links, Abbrechen und Speichern rechts. */
.archiv-fuss { justify-content: flex-start; }
.archiv-fuss .abstand { flex: 1; }
#tbl-archiv td.aktion { white-space: nowrap; }
@media (min-width: 640px) { .dlg-reihe.zwei { grid-template-columns: 1fr 1fr; } #dlg-archiv { width: min(640px, calc(100vw - 32px)); } }
/* Automatisch zugeordnet – bitte prüfen (15.10.2026) */
.auto-block { margin-bottom: var(--s4); padding: var(--s3); border: 1px solid var(--line); border-left: 3px solid var(--gelb-dot); border-radius: var(--r-card); background: var(--gelb-bg); }
.auto-block .block-titel { margin-top: 0; }
.auto-zeile .knoepfe { display: flex; gap: var(--s1); flex-shrink: 0; }
.auto-zeile { border-left-color: var(--gelb-dot); background: var(--bg-card, #fff); }
/* Klärfall im Journal (15.10.2026): Der Hinweis bricht um, statt über die Spalte zu ragen; bei zwei Zeilen weniger rund. */
.zelle-stapel .meldung-offen { white-space: normal; max-width: 100%; border-radius: var(--r-ctl); line-height: 1.3; }