/* ==========================================================================
   Jaegerportal JagdGenuss -- Oberflaeche
   ==========================================================================

   DIE FARBEN UND GRADE SIND NICHT ERFUNDEN.
   Sie stammen aus dem Design-System der Marke
   (50_Marken\JagdGenuss\02_Design-System\jagdgenuss-tokens.css, Ausgabe 1.0).
   Hier stehen sie noch einmal, statt von dort geladen zu werden: Das
   Portal liegt auf einem fremden Server und muss ohne diesen Ordner
   auskommen. Wer die Marke aendert, aendert beides -- deshalb steht die
   Herkunft in jeder Zeile mit dran.

   DIE SCHRIFT KOMMT VOM EIGENEN SERVER ODER GAR NICHT.
   Lato von Google zu laden hiesse, jeden Jaeger bei jedem Aufruf
   dorthin zu melden -- mit IP und Uhrzeit, in einem Bereich, in dem
   steht, wer wann welches Stueck erlegt hat. Seit v15.4 liefert das
   Portal die Schrift selbst aus; fehlt sie, nimmt es die
   Systemschrift. Siehe @font-face weiter unten.

   MOBIL ZUERST. Der Jaeger steht am Wildkoerper, nicht am Schreibtisch.
   ========================================================================== */

/* --- Die Hausschrift ---------------------------------------------------
   ZUERST `local()`. Wer Lato auf dem Rechner hat, laedt gar nichts --
   das ist der schnellste Weg und der sparsamste.

   Dann die eigenen Dateien, woff2 vor ttf: woff2 ist rund ein Fuenftel
   so gross. Welches Format wirklich im Paket liegt, entscheidet sich
   beim Bauen; der Browser nimmt das erste, das er bekommt, und
   ueberspringt was fehlt.

   `font-display: swap` -- der Text steht sofort da, in der
   Systemschrift, und wird ersetzt, sobald die Schrift geladen ist. Die
   Alternative waere ein leeres Formular fuer eine halbe Sekunde. Am
   Wildkoerper im Regen ist das die falsche halbe Sekunde.

   FEHLEN DIE DATEIEN, ist das kein Fehler: Der Browser holt sich eine
   404 und nimmt die Systemschrift. Damit es niemandem entgeht, sagt
   `lage.php` es ausdruecklich. */

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Lato Regular"), local("Lato"),
       url("../schrift/lato-regular.woff2") format("woff2"),
       url("../schrift/lato-regular.ttf") format("truetype");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Lato Bold"),
       url("../schrift/lato-bold.woff2") format("woff2"),
       url("../schrift/lato-bold.ttf") format("truetype");
}

:root {
  --jg-green:  #1F6B3B;
  --jg-deep:   #14472A;
  --jg-brass:  #C8A44D;
  --jg-cream:  #F7F5EF;
  --jg-sand:   #E7DFC9;
  --jg-moss:   #4E7A57;
  --jg-ink:    #2B2B28;
  --jg-grey:   #8A9184;
  --jg-white:  #FFFFFF;
  /* v19.1 (03.09.2026): Der Betriebsinhaber ist rot-gruen-blind, und
     Jaeger sind es zu acht Prozent auch. Fehler/Abgewiesen/Beanstandet
     deshalb DUNKELBLAU statt Rot -- Blau gegen Gruen sieht jeder. Dazu
     tragen die Staende ein Zeichen (✓ ! ✕), nie Farbe allein. */
  --jg-success:#2E7D4F;
  --jg-warning:#A8761C;
  --jg-error:  #1F4E8C;
  --jg-error-soft: #E1EAF6;
  --jg-green-hover: #1A5A32;

  --jg-font: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  --jg-radius: 4px;
  --jg-radius-lg: 8px;
  --jg-s1: 8px;  --jg-s2: 16px;  --jg-s3: 24px;  --jg-s4: 40px;
  --jg-border: 1px solid var(--jg-sand);
  --jg-shadow-sm: 0 1px 2px rgba(43,43,40,.06);
  --jg-shadow-md: 0 2px 8px rgba(43,43,40,.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--jg-font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--jg-ink);
  background: var(--jg-cream);
}

/* --- Kopf ------------------------------------------------------------- */

header {
  background: var(--jg-deep);
  color: var(--jg-white);
  padding: var(--jg-s2) var(--jg-s3);
  display: flex;
  align-items: center;
  gap: var(--jg-s2);
  flex-wrap: wrap;
  /* Die Messinglinie ist das Erkennungszeichen der Marke. Sie traegt
     keine Aussage, deshalb steht sie nie allein -- hier begleitet sie
     den Namenszug. */
  border-bottom: 3px solid var(--jg-brass);
}

header .marke {
  display: flex;
  align-items: center;
  gap: var(--jg-s2);
  font-weight: 700;
  letter-spacing: .02em;
}

header .marke img { height: 40px; width: auto; display: block; }

header nav { margin-left: auto; display: flex; gap: var(--jg-s2); }
header nav a { color: var(--jg-sand); text-decoration: none; font-size: 15px; }
header nav a:hover { color: var(--jg-white); text-decoration: underline; }

main {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--jg-s3) var(--jg-s3) var(--jg-s4);
}

footer {
  border-top: var(--jg-border);
  margin-top: var(--jg-s4);
  padding: var(--jg-s3);
  text-align: center;
  color: var(--jg-grey);
  font-size: 13px;
}

footer p { margin: 0; }

/* Der Vermerk auf Eichner Systems (Thomas, 02.09.2026).
   Eine Zeile unter der Marke, deutlich kleiner als sie -- das Portal
   gehoert JagdGenuss. Grau, bis jemand darauf zeigt: Wer den Schein
   sucht, soll nicht hier hin gucken; wer hier hin guckt, soll etwas
   finden. */
.fuss-marke { font-weight: 700; color: var(--jg-ink); }
/* Die Fassung (v22.2): leise neben der Marke -- sie ist eine Auskunft
   fuer den Anruf, kein Aushang. Eigene Zeile am Handy. */
.fuss-fassung { font-weight: 400; color: var(--jg-grey); font-size: 13px;
                margin-left: var(--jg-s1); white-space: nowrap; }

.fuss-es { margin-top: 6px; }
.fuss-es a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--jg-grey);
  text-decoration: none;
  font-size: 12.5px;
}
.fuss-es a:hover { color: var(--jg-ink); text-decoration: underline; }
.fuss-es a:focus-visible { outline: 2px solid var(--jg-brass);
                           outline-offset: 3px; }
.fuss-es img { display: block; }

/* Die Anschrift auf „Über dieses Portal": Zeichen links, Text rechts.
   Am Handy untereinander, siehe unten. */
.visitenkarte {
  display: flex;
  gap: var(--jg-s2);
  align-items: flex-start;
  background: var(--jg-white);
  border: var(--jg-border);
  border-radius: var(--jg-radius);
  padding: var(--jg-s2);
  margin: var(--jg-s2) 0;
}
.visitenkarte img { flex: 0 0 auto; }
.visitenkarte p { margin: 0 0 var(--jg-s1); }

/* --- Schrift ---------------------------------------------------------- */

h1 { font-size: 1.85rem; line-height: 1.18; color: var(--jg-deep);
     font-weight: 700; margin: 0 0 var(--jg-s2); }
h2 { font-size: 1.3rem; line-height: 1.27; color: var(--jg-green);
     font-weight: 700; margin: var(--jg-s4) 0 var(--jg-s2); }
a  { color: var(--jg-green); }

.hinweis { color: var(--jg-grey); font-size: 15px; }

/* Der gesetzliche Kopf. Klein, aber nicht versteckt: Er sagt, WAS
   dieses Blatt ist -- ohne ihn ist es kein Wildbegleitschein. */
.rechtsgrundlage {
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--jg-brass);
  font-weight: 700;
  margin-bottom: var(--jg-s1);
}

/* --- Meldungen -------------------------------------------------------- */

.meldung {
  padding: var(--jg-s2);
  border-radius: var(--jg-radius);
  border-left: 4px solid;
  margin: var(--jg-s2) 0;
  background: var(--jg-white);
}
.meldung.fehler  { border-color: var(--jg-error);   color: var(--jg-error); background: var(--jg-error-soft); }
.meldung.gut     { border-color: var(--jg-success); color: var(--jg-success); }
.meldung.hinweis { border-color: var(--jg-brass);   color: var(--jg-ink); }
/* Zeichen vor jeder Meldung -- der Zustand haengt nicht an der Farbe. */
.meldung.fehler::before  { content: "✕  "; font-weight: 700; }
.meldung.gut::before     { content: "✓  "; font-weight: 700; }
.meldung.hinweis::before { content: "!  ";  font-weight: 700; }

/* --- Formular --------------------------------------------------------- */

form { margin-top: var(--jg-s2); }

/* Zwischen zwei Feldern ein voller Schritt, zwischen Beschriftung und
   Feld ein halber. Bis v14.1 war beides gleich weit -- die Beschriftung
   klebte am Rahmen und liess sich nicht mehr dem Feld darunter
   zuordnen, sondern sah aus wie die Fussnote des Feldes darueber
   (Thomas, 02.09.2026). */
label { display: block; margin: var(--jg-s3) 0 0; font-size: 15px;
        color: var(--jg-ink); font-weight: 600; }

/* WARUM HIER KEINE LISTE VON `type`-WERTEN MEHR STEHT
   Bis v14.1 stand hier `input[type=text], input[type=password], ...`.
   Die drei Felder Erlegungsort, Gewicht und Wildmarke sind im Formular
   aber schlicht `<input name="...">` -- ohne type-Attribut. Das ist
   gueltiges HTML und ergibt ein Textfeld; der Selektor greift trotzdem
   nicht, denn er fragt nach dem ATTRIBUT, nicht nach dem Verhalten.
   Ergebnis: drei Felder ohne Breite und ohne Abstand, mitten zwischen
   lauter breiten (Thomas, 02.09.2026: „die drei Edits sind kleiner als
   alle anderen").

   Ein Fehler, zwei Symptome -- und beide waren am Bildschirm zu sehen,
   nicht im Code zu ahnen.

   Jetzt andersherum: ALLE Eingabefelder, ausser den vier Arten, die
   ausdruecklich anders aussehen sollen. Ein neues Feld ist damit von
   sich aus richtig -- auch das mit type="email" oder "tel", das es hier
   morgen gibt. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
select, textarea {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 11px 12px;
  font: inherit;
  font-weight: 400;
  color: var(--jg-ink);
  background: var(--jg-white);
  border: 1px solid var(--jg-sand);
  border-radius: var(--jg-radius);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--jg-brass);
  outline-offset: 1px;
  border-color: var(--jg-brass);
}

textarea { min-height: 80px; resize: vertical; }

/* --- Auswahl als Knoepfe ---------------------------------------------
   Statt eines Aufklappmenues: alles auf einen Blick, ein Griff statt
   zwei (Thomas, 01.09.2026). Der Jaeger steht dabei womoeglich im
   Regen -- deshalb sind die Flaechen gross genug fuer einen Daumen
   (mindestens 44 px hoch, die uebliche Untergrenze).

   Gebaut aus echten Radiofeldern. Ein Knopf, der nur aussieht wie eine
   Auswahl, ist fuer Tastatur und Vorlesehilfe keiner. */

.wahl { display: flex; flex-wrap: wrap; gap: var(--jg-s1);
        margin-top: var(--jg-s1); }

.wahl input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;   /* nicht display:none -- sonst kein Fokus */
}

.wahl label {
  margin: 0;
  padding: 11px 16px;
  min-height: 44px;
  display: flex;
  align-items: center;
  background: var(--jg-white);
  border: 1px solid var(--jg-sand);
  border-radius: var(--jg-radius);
  cursor: pointer;
  font-weight: 400;
  user-select: none;
}

.wahl label:hover { border-color: var(--jg-moss); }

/* Der gewaehlte Knopf traegt Farbe UND Gewicht UND einen Rahmen.
   Farbe steht nie allein -- wer sie nicht unterscheiden kann, sieht
   trotzdem, was gewaehlt ist. */
.wahl input[type=radio]:checked + label {
  background: var(--jg-green);
  border-color: var(--jg-deep);
  color: var(--jg-white);
  font-weight: 700;
}

.wahl input[type=radio]:focus-visible + label {
  outline: 2px solid var(--jg-brass);
  outline-offset: 2px;
}

.wahl.schmal label { min-width: 56px; justify-content: center; }

/* --- Erklaerungen ------------------------------------------------------ */

.erklaerungen {
  background: var(--jg-white);
  border: var(--jg-border);
  border-left: 4px solid var(--jg-green);
  border-radius: var(--jg-radius);
  padding: var(--jg-s2);
  margin-top: var(--jg-s3);
}

.erklaerungen label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 400;
  margin: var(--jg-s2) 0 0;
  cursor: pointer;
}

.erklaerungen input[type=checkbox] {
  width: 22px; height: 22px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--jg-green);
}

/* Die Annahmebedingung von JagdGenuss -- keine gesetzliche Erklaerung.
   Der Unterschied ist sichtbar (Messing statt Gruen), damit niemand
   das eine fuer das andere haelt. */
.erklaerungen.annahme { border-left-color: var(--jg-brass); }

/* --- Amtliche Untersuchungen -------------------------------------------
   Trichinen und ASP (Thomas, 02.09.2026). Zwei gleich gebaute Bloecke,
   damit man den zweiten nicht neu lesen muss, wenn man den ersten
   verstanden hat. Grau abgesetzt, weil hier nichts Pflicht ist -- die
   gruenen und messingfarbenen Kaesten darueber sind es. */

.untersuchung fieldset {
  border: var(--jg-border);
  border-radius: var(--jg-radius);
  background: var(--jg-white);
  padding: 0 var(--jg-s2) var(--jg-s2);
  margin: var(--jg-s2) 0 0;
}

.untersuchung legend {
  padding: 0 var(--jg-s1);
  font-size: 15px;
  font-weight: 700;
  color: var(--jg-deep);
}

/* Ein Haken ist keine Beschriftung ueber einem Feld, sondern ein Feld
   mit einem Text daneben. Deshalb liegt er quer, nicht untereinander. */
.untersuchung label.haken {
  display: flex;
  gap: 12px;
  align-items: center;
  font-weight: 400;
  margin-top: var(--jg-s2);
  cursor: pointer;
}
.untersuchung label.haken input[type=checkbox] {
  width: 22px; height: 22px; margin: 0; flex: 0 0 auto;
  accent-color: var(--jg-green);
}

/* Datum und Uhrzeit gehoeren zusammen und stehen nebeneinander --
   getrennt untereinander lesen sie sich wie zwei Angaben. Am Handy
   fallen sie untereinander, siehe unten. */
.untersuchung .paar { display: flex; gap: var(--jg-s2); }
.untersuchung .paar label { flex: 1 1 0; }
.untersuchung .paar label:last-child { flex: 0 0 8.5rem; }

/* --- Anmeldung eines neuen Reviers --------------------------------------
   Sechs feste Jaegerzeilen (Thomas, 02.09.2026). Jede ein eigener
   Kasten mit Nummer: Wer sechs gleich aussehende Zeilenpaare
   untereinander sieht, verliert die Zuordnung, welcher Vorname zu
   welchem Nachnamen gehoert. */

.jaegerzeile {
  border: var(--jg-border);
  border-radius: var(--jg-radius);
  background: var(--jg-white);
  padding: 0 var(--jg-s2) var(--jg-s2);
  margin: var(--jg-s1) 0 0;
}
.jaegerzeile legend { padding: 0 var(--jg-s1); font-size: 14px;
                      font-weight: 700; color: var(--jg-grey); }

/* Zwei Felder nebeneinander -- gleich breit, anders als beim Datum-Paar
   der Untersuchung. */
.jaegerzeile .paar { display: flex; gap: var(--jg-s2); }
.jaegerzeile .paar label { flex: 1 1 0; }

/* --- Voraussichtliche Strecke (v22.0) ---------------------------------
   Je Wildart eine Zeile: Name links, schmales Zahlenfeld mit Einheit
   rechts. Zwei Spalten auf dem Bildschirm, eine auf dem Telefon --
   sechs Wildarten sollen nicht sechs Bildschirmhoehen brauchen. */
.strecke {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--jg-s3);
}
.strecke label { margin-top: var(--jg-s2); }
.strecke .mit-einheit { display: flex; align-items: center; gap: var(--jg-s1); }
/* DERSELBE SELEKTOR WIE DIE ALLGEMEINE FELDREGEL OBEN, plus .strecke.
   Ein kuerzerer (`.strecke input`) verliert gegen die vier :not() der
   allgemeinen Regel und das Feld bleibt 100 % breit -- am 04.09.2026
   im Bildschirmfoto gesehen: Feld ueber die ganze Spalte, „Stück /
   Jagdjahr" in den Rand gequetscht. Gemessen, nicht vermutet. */
.strecke .mit-einheit
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]) {
  width: 7rem; flex: 0 0 auto;
}
.strecke .einheit { font-weight: 400; color: var(--jg-grey); font-size: 14px;
                    margin-top: 10px; white-space: nowrap; }

/* Die vier Annahmebedingungen als Liste im messingfarbenen Kasten --
   derselbe Kasten wie am Schein (.erklaerungen.annahme), damit der
   Paechter ihn beim ersten Schein wiedererkennt. */
.bedingungen { margin: var(--jg-s2) 0 0 1.2rem; padding: 0; }
.bedingungen li { margin: 6px 0; }

/* --- Knoepfe ---------------------------------------------------------- */

button, .knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jg-s1);
  margin-top: var(--jg-s3);
  padding: 13px 24px;
  min-height: 46px;
  font: inherit;
  font-weight: 700;
  color: var(--jg-white);
  background: var(--jg-green);
  border: 1px solid var(--jg-deep);
  border-radius: var(--jg-radius);
  cursor: pointer;
  text-decoration: none;
}

button:hover, .knopf:hover { background: var(--jg-green-hover); }
button:focus-visible, .knopf:focus-visible {
  outline: 2px solid var(--jg-brass); outline-offset: 2px; }

.knopf.zweit {
  background: var(--jg-white);
  color: var(--jg-green);
  border-color: var(--jg-sand);
}
.knopf.zweit:hover { background: var(--jg-sand); }

/* Loeschen ist kein Alltagsknopf. Er sieht auch nicht so aus. */
.knopf.gefahr, button.gefahr {
  background: var(--jg-white);
  color: var(--jg-error);
  border-color: var(--jg-error);
}
.knopf.gefahr:hover, button.gefahr:hover {
  background: var(--jg-error); color: var(--jg-white); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--jg-s2);
              align-items: center; }

/* Ein Knopf, der IN einer Tabellenzeile steht, darf die Zeile nicht
   auseinandertreiben: kein Aussenabstand nach oben, kleinere Flaeche.
   44 px bleiben er trotzdem hoch -- auch in einer Tabelle wird mit dem
   Daumen getippt (Ausdruck-Spalte, Thomas 02.09.2026). */
.knopf.klein {
  margin-top: 0;
  padding: 8px 16px;
  min-height: 40px;
  font-size: 14px;
}
td.tun { white-space: nowrap; }

/* --- Tabellen und Listen ---------------------------------------------- */

table { width: 100%; border-collapse: collapse; margin-top: var(--jg-s2);
        background: var(--jg-white); }
th, td { text-align: left; padding: 10px 12px; border-bottom: var(--jg-border);
         font-size: 15px; }
th { background: var(--jg-sand); color: var(--jg-deep); font-weight: 700; }
tr:hover td { background: #FBFAF6; }

dl.schein { background: var(--jg-white); border: var(--jg-border);
            border-radius: var(--jg-radius); padding: var(--jg-s2);
            display: grid; grid-template-columns: 11rem 1fr; gap: 6px 16px;
            margin: var(--jg-s2) 0; }
dl.schein dt { color: var(--jg-grey); font-size: 14px; }
dl.schein dd { margin: 0; }

/* --- Bilder ------------------------------------------------------------
   VORSCHAU STATT VOLLBILD (Thomas, 01.09.2026). Ein Beschaubild ist
   1600 Bildpunkte breit; drei davon untereinander sind eine Tapete, und
   am Handy laedt man sie ueber Mobilfunk. Klein zeigen, gross oeffnen.

   Die Grossansicht laeuft ohne JavaScript: ein Anker auf einen
   :target-Kasten. Was ohne Skript geht, geht auch dann, wenn eines
   fehlschlaegt. */

.bilder { display: flex; flex-wrap: wrap; gap: var(--jg-s2);
          margin-top: var(--jg-s2); }

.bilder a.vorschau {
  display: block;
  width: 150px;
  border: 1px solid var(--jg-sand);
  border-radius: var(--jg-radius);
  overflow: hidden;
  background: var(--jg-white);
  box-shadow: var(--jg-shadow-sm);
}
.bilder a.vorschau img { display: block; width: 100%; height: 110px;
                         object-fit: cover; }
.bilder a.vorschau span { display: block; padding: 6px 8px; font-size: 12.5px;
                          color: var(--jg-grey);
                          overflow: hidden; text-overflow: ellipsis;
                          white-space: nowrap; }

.gross {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20, 71, 42, .92);
  z-index: 50;
  padding: var(--jg-s3);
  text-align: center;
}
.gross:target { display: flex; flex-direction: column; align-items: center;
                justify-content: center; gap: var(--jg-s2); }
.gross img { max-width: 100%; max-height: 80vh; border-radius: var(--jg-radius); }
.gross .zu { color: var(--jg-white); text-decoration: none; font-weight: 700;
             border: 1px solid var(--jg-sand); border-radius: var(--jg-radius);
             padding: 10px 20px; }

/* --- Zustaende eines Scheins ------------------------------------------ */

.stand { display: inline-block; padding: 3px 10px; border-radius: 999px;
         font-size: 13px; font-weight: 700; border: 1px solid; }

/* Ein Befund, der ein Link ist, muss auch wie einer wirken -- sonst
   probiert es niemand (Thomas, 02.09.2026: „Man kann auf ‚beanstandet'
   nicht klicken"). Unterstrichen wird er erst beim Darüberfahren; das
   Kennzeichen soll ein Kennzeichen bleiben. */
a.stand { text-decoration: none; cursor: pointer; }
a.stand:hover { text-decoration: underline; filter: brightness(.92); }
a.stand:focus-visible { outline: 2px solid var(--jg-brass);
                        outline-offset: 2px; }
.stand.offen      { color: var(--jg-warning); border-color: var(--jg-warning);
                    background: #FDF7EA; }
.stand.geholt     { color: var(--jg-success); border-color: var(--jg-success);
                    background: #EDF6F0; }
.stand.abgewiesen { color: var(--jg-error);   border-color: var(--jg-error);
                    background: var(--jg-error-soft); }
/* Zeichen im Kennzeichen (v19.1): Rot-Gruen-Blinde sehen die Farbe nicht,
   das Zeichen schon. Ein Kennzeichen, das selbst ein Zeichen traegt, bekommt keins. */
.stand.offen::before      { content: "! "; }
.stand.geholt::before     { content: "✓ "; }
.stand.abgewiesen::before { content: "✕ "; }
.stand.beanstandet::before { content: "✕ "; }

/* --- Handy ------------------------------------------------------------- */

@media (max-width: 640px) {
  main { padding: var(--jg-s2); }
  h1 { font-size: 1.5rem; }
  dl.schein { grid-template-columns: 1fr; gap: 2px; }
  dl.schein dt { margin-top: var(--jg-s1); }
  .knopfreihe { flex-direction: column; align-items: stretch; }
  .knopfreihe button, .knopfreihe .knopf { width: 100%; }
  /* Datum und Uhrzeit nebeneinander waeren am Handy zwei Streifen von
     je vier Zentimetern -- untereinander sind es zwei Felder. */
  .untersuchung .paar { flex-direction: column; gap: 0; }
  .untersuchung .paar label:last-child { flex: 1 1 auto; }
  .jaegerzeile .paar { flex-direction: column; gap: 0; }
  .strecke { grid-template-columns: 1fr; }
  .visitenkarte { flex-direction: column; }
  /* Der Druckknopf in der Zeile: In einer Tabelle, die am Handy ohnehin
     eng ist, bleibt er trotzdem daumengross. */
  .knopf.klein { width: auto; }
}