/* ===========================================================================
   Handzeichen - Gestaltung

   Leitbild: Der Bildschirm ist ein Vordruck, keine App-Oberflaeche. Praxen und
   Kanzleien arbeiten seit Jahrzehnten mit Boegen, Randspalten und Handzeichen.
   Die Anwendung uebernimmt diese Ordnung, statt sie durch eine Kachelwand zu
   ersetzen, die in jeder Branche gleich aussaehe.

   Bewusst nur ein helles Erscheinungsbild: Das hier ist ein Dokument, das
   ausgedruckt und bei einer Begehung vorgelegt wird. Ein dunkler Modus waere
   ein Bruch mit dieser Rolle.
   =========================================================================== */

/* --- Schriften. Liegen im Projekt, nicht bei Google. Damit verlaesst beim
       Seitenaufruf keine IP-Adresse eines Praxisrechners das Haus. --------- */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('schriften/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('schriften/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('schriften/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('schriften/ibm-plex-serif-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('schriften/ibm-plex-serif-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --- Feste Werte ------------------------------------------------------- */

:root {
  --papier:        #f0f2ee;   /* Karteikartenpapier, kuehl statt cremig */
  --bogen:         #fbfcfa;   /* der Bogen selbst, eine Spur heller */
  --linie:         #d2d7ce;   /* Vordrucklinien */
  --linie-zart:    #e4e8e1;
  --tinte:         #16262b;   /* Dokumententinte, kein Ersatzschwarz */
  --tinte-blass:   #5b6d70;
  --formularblau:  #2b5d7d;   /* Register, Struktur, Verweise */
  --formularblau-hell: #eaf0f4;
  --handzeichen:   #7a3b5e;   /* Stempelfarbe. Nur fuer Abzeichnungen. */
  --handzeichen-hell: #f4ecf0;
  --frist:         #a93226;   /* ueberfaellig, Wert ausserhalb des Sollbereichs */
  --frist-hell:    #f9ecea;
  --bedenken:      #8a6420;   /* geht, ist aber nicht empfehlenswert */
  --bedenken-hell: #f7f1e3;
  --rand:          #cdb4b4;   /* die rote Randlinie im Vordruck */

  --schrift-arbeit: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-bogen:  'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  /* Typografische Leiter, Verhaeltnis 1,25 */
  --grad-xs:   0.8rem;
  --grad-s:    0.9rem;
  --grad-b:    1rem;
  --grad-m:    1.25rem;
  --grad-l:    1.5625rem;
  --grad-xl:   1.953rem;

  --masz:      1.5rem;        /* Grundabstand */
  --randbreite: 4.5rem;       /* Breite der Randspalte im Bogen */
}

/* --- Grundlagen -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-arbeit);
  font-size: var(--grad-b);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { font-family: var(--schrift-bogen); font-weight: 600; line-height: 1.2; margin: 0; }
h1 { font-size: var(--grad-xl); letter-spacing: -0.01em; }
h2 { font-size: var(--grad-l); }
h3 { font-size: var(--grad-m); }

p { margin: 0 0 0.75em; max-width: 68ch; }

a { color: var(--formularblau); text-underline-offset: 0.2em; }
a:hover { color: var(--tinte); }

:focus-visible {
  outline: 3px solid var(--formularblau);
  outline-offset: 2px;
}

/* ===========================================================================
   Kopf und Register
   =========================================================================== */

.kopf {
  background: var(--bogen);
  border-bottom: 1px solid var(--linie);
}

.kopf__innen {
  max-width: 74rem;
  margin: 0 auto;
  padding: 0.9rem var(--masz);
  display: flex;
  align-items: baseline;
  gap: var(--masz);
  flex-wrap: wrap;
}

.kopf__marke {
  font-family: var(--schrift-bogen);
  font-size: var(--grad-m);
  font-weight: 600;
  color: var(--tinte);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.kopf__haus {
  color: var(--tinte-blass);
  font-size: var(--grad-s);
}

.kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: 1rem; }

.kopf__person {
  font-size: var(--grad-s);
  color: var(--tinte-blass);
}

/* Das Register: Aktenreiter, nicht Navigationsleiste. Der aktive Reiter
   steht mit dem Bogen darunter in Verbindung, deshalb keine untere Kante. */

.register {
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 var(--masz);
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.register__reiter {
  display: block;
  padding: 0.6rem 1.1rem;
  font-size: var(--grad-s);
  font-weight: 500;
  color: var(--tinte-blass);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  white-space: nowrap;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

.register__reiter:hover { color: var(--tinte); background: var(--bogen); }

.register__reiter[aria-current='page'] {
  background: var(--bogen);
  border-color: var(--linie);
  color: var(--tinte);
  position: relative;
  top: 1px;
}

.register__zahl {
  margin-left: 0.5rem;
  font-size: var(--grad-xs);
  color: var(--frist);
  font-weight: 600;
}

/* ===========================================================================
   Bogen: der Vordruck
   =========================================================================== */

.hauptteil {
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 var(--masz) 4rem;
}

.blatt {
  background: var(--bogen);
  border: 1px solid var(--linie);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  margin-bottom: var(--masz);
}

.blatt--erste { border-top: none; }

.blatt__kopf {
  border-bottom: 2px solid var(--tinte);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}

.blatt__zweck {
  color: var(--tinte-blass);
  font-size: var(--grad-s);
  margin: 0.4rem 0 0;
}

/* Angaben im Bogenkopf: Rhythmus, Faelligkeit, Rechtsgrundlage.
   Als Beschriftungsliste, wie im Briefkopf eines Formulars. */

.angaben {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 1.25rem;
  margin: 0 0 1.5rem;
  font-size: var(--grad-s);
}

.angaben dt { color: var(--tinte-blass); }
.angaben dd { margin: 0; }

/* --- Die Punkte des Bogens -------------------------------------------- */

.punkte { list-style: none; margin: 0; padding: 0; }

.punkt {
  display: grid;
  grid-template-columns: var(--randbreite) 1fr;
  border-bottom: 1px solid var(--linie-zart);
  scroll-margin-top: 6rem;
}

.punkt:first-child { border-top: 1px solid var(--linie-zart); }

/* Die Randspalte trägt Nummer und Handzeichen. Die senkrechte Linie ist der
   Rand des Vordrucks -- dieselbe Stelle, an der auf Papier abgezeichnet wird. */

.punkt__rand {
  border-right: 1px solid var(--rand);
  padding: 1rem 0.75rem 1rem 0;
  text-align: right;
}

.punkt__nummer {
  font-family: var(--schrift-bogen);
  font-size: var(--grad-s);
  color: var(--tinte-blass);
  display: block;
}

.punkt__inhalt { padding: 1rem 0 1.15rem 1.25rem; }

.punkt__text { margin: 0; font-weight: 500; max-width: 62ch; }

.punkt__hinweis {
  margin: 0.35rem 0 0;
  font-size: var(--grad-s);
  color: var(--tinte-blass);
  max-width: 62ch;
}

.punkt--erledigt .punkt__text { font-weight: 400; }
.punkt--abweichung { background: var(--frist-hell); }
.punkt--abweichung .punkt__rand { border-right-color: var(--frist); }

/* --- Das Handzeichen: der eine auffällige Moment ----------------------- */

.handzeichen {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.2rem 0.45rem;
  border: 2px solid var(--handzeichen);
  color: var(--handzeichen);
  font-weight: 600;
  font-size: var(--grad-s);
  letter-spacing: 0.04em;
  transform: rotate(-2.5deg);
  background: var(--bogen);
}

.punkt--abweichung .handzeichen { border-color: var(--frist); color: var(--frist); }

.handzeichen__zeit {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--grad-xs);
  color: var(--tinte-blass);
  line-height: 1.3;
}

/* --- Messwert und Eingaben im Punkt ------------------------------------ */

.eingabe { margin-top: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }

.feld { display: flex; flex-direction: column; gap: 0.25rem; }

.feld__marke { font-size: var(--grad-s); color: var(--tinte-blass); }

.feld__soll { font-size: var(--grad-xs); color: var(--tinte-blass); }

input[type='text'],
input[type='email'],
input[type='password'],
input[type='date'],
input[type='number'],
select,
textarea {
  font: inherit;
  color: var(--tinte);
  background: var(--bogen);
  border: 1px solid var(--linie);
  border-bottom: 2px solid var(--tinte-blass);
  border-radius: 0;
  padding: 0.55rem 0.65rem;
  min-height: 2.75rem;
  max-width: 100%;
}

input:focus, select:focus, textarea:focus { border-bottom-color: var(--formularblau); }

textarea { min-height: 4.5rem; resize: vertical; width: min(46rem, 100%); }

.feld--schmal input { width: 7rem; }

.wert {
  font-weight: 600;
  font-size: var(--grad-m);
}

.wert--abweichung { color: var(--frist); }

/* Eine Bemerkung ist zunaechst nur eine Notiz. Die Signalfarbe bekommt sie
   ausschliesslich dort, wo tatsaechlich eine Abweichung vorliegt -- sonst
   nutzt sich das Warnzeichen ab und wird uebersehen, wenn es zaehlt. */
.bemerkung {
  margin: 0.6rem 0 0;
  padding-left: 0.85rem;
  border-left: 3px solid var(--linie);
  font-size: var(--grad-s);
  max-width: 62ch;
}

.punkt--abweichung .bemerkung { border-left-color: var(--frist); }

/* ===========================================================================
   Schaltflächen
   =========================================================================== */

.knopf {
  font: inherit;
  font-weight: 500;
  min-height: 2.75rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--tinte);
  border-radius: 2px;
  background: var(--tinte);
  color: var(--bogen);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.knopf:hover { background: #0d1a1e; color: var(--bogen); }

.knopf--zweit {
  background: transparent;
  color: var(--tinte);
  border-color: var(--linie);
}
.knopf--zweit:hover { background: var(--papier); color: var(--tinte); border-color: var(--tinte-blass); }

.knopf--abzeichnen {
  background: var(--handzeichen);
  border-color: var(--handzeichen);
  color: #fff;
}
.knopf--abzeichnen:hover { background: #62304c; color: #fff; }

.knopf--still {
  background: none;
  border: none;
  color: var(--tinte-blass);
  text-decoration: underline;
  padding: 0.5rem 0;
  min-height: 2.5rem;
  font-size: var(--grad-s);
}
.knopf--still:hover { color: var(--frist); }

/* ===========================================================================
   Schaufenster

   Ein Band ueber der ganzen Seite, auch vor der Anmeldung. Es soll auffallen
   und nicht wegzuklicken sein -- wer hier echte Patientennamen eintraegt, tut
   das sonst im guten Glauben.
   =========================================================================== */

.schaufenster {
  background: var(--bedenken);
  color: #fff;
  padding: 0.6rem 1.25rem;
  font-size: var(--grad-s);
  line-height: 1.45;
  text-align: center;
}

.schaufenster strong { color: #fff; }

@media print {
  /* Auf dem Ausdruck stoert das Band nur -- der Bogen soll aussehen wie das,
     was die Praxis spaeter wirklich in die Hand bekommt. */
  .schaufenster { display: none; }
}

/* ===========================================================================
   Meldungen
   =========================================================================== */

.meldung {
  padding: 0.85rem 1.1rem;
  margin-bottom: var(--masz);
  border-left: 4px solid var(--formularblau);
  background: var(--formularblau-hell);
  max-width: 68ch;
}

.meldung--fehler { border-left-color: var(--frist); background: var(--frist-hell); }
.meldung--erfolg { border-left-color: var(--handzeichen); background: var(--handzeichen-hell); }

/* Kein Fehler, aber auch keine gute Idee -- eigene Farbe, damit der Unterschied
   sichtbar bleibt. Wer Warnungen wie Fehler faerbt, bekommt Leser, die beide
   uebergehen. */
.meldung--warnung { border-left-color: var(--bedenken); background: var(--bedenken-hell); }

.meldung p + p { margin-top: 0.6rem; }

/* ===========================================================================
   Listen von Bögen
   =========================================================================== */

.stapel { list-style: none; margin: 0; padding: 0; }

.stapel__eintrag {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linie-zart);
}

.stapel__eintrag:first-child { border-top: 1px solid var(--linie-zart); }

.stapel__titel {
  font-weight: 500;
  font-size: var(--grad-m);
  font-family: var(--schrift-bogen);
  text-decoration: none;
  color: var(--tinte);
}
.stapel__titel:hover { color: var(--formularblau); text-decoration: underline; }

.stapel__frist { font-size: var(--grad-s); color: var(--tinte-blass); }
.stapel__frist--ueberfaellig { color: var(--frist); font-weight: 600; }

.stapel__fortschritt {
  margin-left: auto;
  font-size: var(--grad-s);
  color: var(--tinte-blass);
  white-space: nowrap;
}

.hinweis-leer {
  color: var(--tinte-blass);
  padding: 1.25rem 0;
  max-width: 62ch;
}

/* ===========================================================================
   Tabellen (Protokoll, Team)
   =========================================================================== */

.tabelle-huelle { overflow-x: auto; }

table.liste {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--grad-s);
}

table.liste th {
  text-align: left;
  font-weight: 600;
  color: var(--tinte-blass);
  border-bottom: 2px solid var(--tinte);
  padding: 0.5rem 0.75rem 0.5rem 0;
  white-space: nowrap;
}

table.liste td {
  padding: 0.55rem 0.75rem 0.55rem 0;
  border-bottom: 1px solid var(--linie-zart);
  vertical-align: top;
}

.kuerzel {
  color: var(--handzeichen);
  font-weight: 600;
}

/* ===========================================================================
   Anmeldung und Einrichtung
   =========================================================================== */

.tor { padding: 2.5rem 0 4rem; }

.tor__blatt {
  background: var(--bogen);
  border: 1px solid var(--linie);
  padding: clamp(1.5rem, 5vw, 3rem);
  width: min(30rem, 100%);
  margin: 0 auto;
}

.tor__blatt--breit { width: min(42rem, 100%); }

.tor .feld { margin-bottom: 1.1rem; }
.tor input:not([type='checkbox']):not([type='radio']) { width: 100%; }

/* Kurze Eingaben wie das Handzeichen sollen kurz aussehen -- die Feldbreite
   sagt der Nutzerin, was erwartet wird. */
.feld--kurz input,
.tor .feld--kurz input { width: 8rem; }

.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* ===========================================================================
   Schmale Bildschirme
   =========================================================================== */

@media (max-width: 40rem) {
  :root { --randbreite: 3.25rem; --masz: 1rem; }

  .punkt__inhalt { padding-left: 0.85rem; }
  .feld-paar { grid-template-columns: 1fr; }
  .stapel__fortschritt { margin-left: 0; width: 100%; }
  h1 { font-size: var(--grad-l); }
}

/* ===========================================================================
   Druck: das eigentliche Ziel. Was hier herauskommt, wird bei einer Begehung
   auf den Tisch gelegt.
   =========================================================================== */

@media print {
  :root { --bogen: #fff; --papier: #fff; }

  body { font-size: 10.5pt; background: #fff; }

  .kopf, .register, .eingabe, .knopf, .meldung, .nicht-drucken { display: none !important; }

  .blatt { border: none; padding: 0; }

  .punkt { break-inside: avoid; }

  .handzeichen { transform: none; }

  .druckfuss {
    margin-top: 2rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--linie);
    font-size: 9pt;
    color: #444;
  }

  a[href]::after { content: ''; }
}

/* --- Kleine Abstandshelfer --------------------------------------------- */

.abstand-oben { margin-top: 2rem; }
.abstand-schmal { margin-top: 0.6rem; }
.abstand-unten { margin-bottom: 2rem; }

/* ===========================================================================
   Vorlagen bearbeiten
   =========================================================================== */

.stapel__haupt { flex: 1 1 20rem; }

/* Stillgelegte Vorlagen bleiben lesbar, treten aber zurueck. Ausgrauen allein
   waere zu wenig Kontrast; die gestrichelte Kante sagt "ausser Betrieb". */
.stapel__eintrag--still {
  border-left: 3px dashed var(--linie);
  padding-left: 0.85rem;
  color: var(--tinte-blass);
}

.stapel__eintrag--still .stapel__titel { color: var(--tinte-blass); }

/* Die Pfeiltasten zum Umsortieren, in der Randspalte unter der Nummer. */
.ruecken {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.knopf--winzig {
  min-height: 2rem;
  min-width: 2rem;
  padding: 0.1rem 0.4rem;
  font-size: var(--grad-s);
  line-height: 1;
  background: transparent;
  color: var(--formularblau);
  border-color: var(--linie);
}

.knopf--winzig:hover { background: var(--formularblau-hell); color: var(--formularblau); }

.knopf--winzig:disabled {
  color: var(--linie);
  border-color: var(--linie-zart);
  cursor: default;
  background: transparent;
}

/* Kontrollkaestchen mit Beschriftung. Die ganze Zeile ist anklickbar --
   das Kaestchen allein ist auf einem Tresenrechner ein zu kleines Ziel. */
.wahl {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--grad-s);
  line-height: 1.4;
  min-height: 2.75rem;
  cursor: pointer;
}

.wahl input { margin-top: 0.15rem; width: 1.1rem; height: 1.1rem; flex: none; }

/* Die Sollwertfelder gehoeren zusammen und gelten nur fuer eine der drei
   Eingabearten. Der Rahmen sagt das, ohne dass JavaScript etwas ein- und
   ausblenden muesste. */
.messfelder {
  border: 1px solid var(--linie);
  border-radius: 0;
  padding: 0.75rem 1rem 1rem;
  margin: 1rem 0 0;
}

.messfelder legend {
  padding: 0 0.4rem;
  color: var(--tinte-blass);
  font-size: var(--grad-s);
}

.messfelder__reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

/* Im Bearbeiten-Bogen steht unter jedem Punkt ein eigenes Formular. Etwas mehr
   Luft, damit die Punkte nicht ineinanderlaufen. */
.punkt .feld { margin-bottom: 0.85rem; }
.punkt .feld-paar { margin-bottom: 0.85rem; }

/* Alle Eingabefelder in Formularen enden an derselben Kante. Ohne die
   gemeinsame Grenze wirkt ein Formular unruhig, weil Textfelder und
   mehrzeilige Felder unterschiedlich weit laufen. 46rem hält die Zeile
   zugleich unter der Länge, ab der Lesen anstrengend wird. */
.feld > input[type='text'],
.feld > input[type='email'],
.feld > input[type='password'],
.feld > input[type='number'],
.feld > input[type='date'],
.feld > textarea,
.feld > select { max-width: 46rem; width: 100%; }

.feld--kurz > input,
.feld--schmal > input { width: 8rem; }

/* ===========================================================================
   Zusammenklappbare Blöcke
   Für die Aktionen je Teammitglied. <details> kann das ohne JavaScript --
   und funktioniert auch dann, wenn Skripte abgeschaltet sind.
   =========================================================================== */

.klappe { margin-left: auto; }

/* An <summary> wird bewusst kein display gesetzt. Firefox reagiert darauf
   empfindlich -- in mehreren Versionen liess sich ein <details> nicht mehr
   aufklappen, sobald summary auf flex stand. Der Klickbereich wird stattdessen
   ueber Innenabstand gross genug. */
.klappe__griff {
  cursor: pointer;
  font-size: var(--grad-s);
  color: var(--formularblau);
  padding: 0.7rem 0.25rem;
  list-style: none;
}

/* Das voreingestellte Dreieck auf allen Wegen entfernen: ::marker fuer
   Firefox und aktuelle Browser, die WebKit-Variante fuer aeltere Safari. */
.klappe__griff::marker { content: ''; }
.klappe__griff::-webkit-details-marker { display: none; }

/* Eigenes Zeichen statt des Browser-Dreiecks: es soll aussehen wie der Rest
   der Anwendung, nicht wie ein Systemelement. */
.klappe__griff::before {
  content: '+';
  display: inline-block;
  width: 1.1rem;
  font-weight: 600;
}

.klappe[open] > .klappe__griff::before { content: '\2212'; }

.klappe__griff:hover { color: var(--tinte); text-decoration: underline; }

.klappe__inhalt {
  border-top: 1px solid var(--linie-zart);
  margin-top: 0.5rem;
  padding-top: 1rem;
  width: min(34rem, 100%);
}

.klappe__inhalt > form { margin-bottom: 1.25rem; }
.klappe__inhalt > form:last-child { margin-bottom: 0; }

/* Der Name im Kopf führt zum eigenen Konto. */
a.kopf__person { text-decoration: none; }
a.kopf__person:hover { color: var(--tinte); text-decoration: underline; }

/* ===========================================================================
   Blättern und Filter
   =========================================================================== */

.blaettern {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie-zart);
}

.blaettern__stand {
  font-size: var(--grad-s);
  color: var(--tinte-blass);
}

.blaettern--aus {
  color: var(--linie);
  border-color: var(--linie-zart);
  cursor: default;
}

/* Die Filterreihe sitzt als Registerleiste über der Tabelle -- dieselbe
   Geste wie die Aktenreiter oben, eine Ebene tiefer. */
.filterreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--linie-zart);
}

.filterreihe__wahl {
  font-size: var(--grad-s);
  color: var(--formularblau);
  text-decoration: none;
  padding: 0.4rem 0;
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}

.filterreihe__wahl:hover { color: var(--tinte); }

.filterreihe__wahl--aktiv {
  color: var(--tinte);
  font-weight: 600;
  border-bottom-color: var(--tinte);
}

/* Hinweis unter dem Anmeldeformular. Zurückhaltend, aber vorhanden -- wer sein
   Passwort vergessen hat, soll nicht ratlos vor der Seite stehen. */
.tor__hilfe {
  margin: 1.75rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--linie-zart);
  font-size: var(--grad-s);
  color: var(--tinte-blass);
  line-height: 1.5;
}

.tor__hilfe strong { color: var(--tinte); }

/* Zweiter Hinweisabsatz unter dem Anmeldeformular: gleicher Rang, ohne die
   Trennlinie noch einmal zu ziehen. */
.tor__hilfe--weiter { border-top: none; padding-top: 0; margin-top: 0.9rem; }