/*
 * Schimana Mitarbeiter-Portal — Gestaltung nach UI-Standard.
 *
 * Natives CSS mit Ebenen, Tokens und BEM. Mobil zuerst; groessere Bildschirme
 * erweitern das Layout. Zielgruppe sind wenig technikaffine Nutzer: ruhige
 * Flaechen, klare Hierarchie, grosse Trefferflaechen, kein Zierrat.
 *
 * Barrierefreiheit: Kontrast durchgehend ueber 4,5:1, sichtbarer Fokus,
 * Bedeutung nie allein ueber Farbe, Bewegung nur auf Wunsch.
 *
 * Bewusst **ohne** Dunkelmodus: Das Erscheinungsbild von
 * betreuungsdienst-schimana.de ist hell und warm. Ein dunkler Modus liesse das
 * Portal wie ein fremdes Werkzeug wirken und war zudem schwer lesbar. Sollte er
 * spaeter gewuenscht sein, genuegt ein zweiter Satz Tokens an dieser Stelle.
 */

@layer reset, tokens, basis, layout, komponenten, hilfen;

/* -------------------------------------------------------------------- */
@layer reset {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  /* Platz fuer die Bildlaufleiste bleibt immer reserviert. Ohne das springt
     die ganze Seite seitlich, sobald ein Akkordeon im „Stand" aufgeht und der
     Inhalt laenger wird als das Fenster. */
  html { scrollbar-gutter: stable; }

  body, h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  fieldset { border: 0; padding: 0; }
  img, svg, video { max-width: 100%; height: auto; display: block; }
  button, input, select, textarea { font: inherit; color: inherit; }
}

/* -------------------------------------------------------------------- */
@layer tokens {
  /*
   * Farben aus dem Erscheinungsbild von betreuungsdienst-schimana.de
   * (Gold #dbc269, Creme #fffadc, Off-White #fbfbf5, Text #282828).
   *
   * Eine Abweichung ist noetig: Das Gold hat auf hellem Grund nur 1,8:1
   * Kontrast. Fuer grosse Ueberschriften auf einer Werbeseite genuegt das,
   * fuer Bedienelemente in einem Nachweissystem nicht (WCAG 2.2 AA verlangt
   * 4,5:1). Das Gold bleibt deshalb **Flaechenfarbe** — Knoepfe, Markenzeichen,
   * Kopfzeile — mit dunkler Beschriftung, genau wie auf der Website. Fuer
   * Verweise und Beschriftungen dient ein abgedunkeltes Gold.
   *
   * Alle Kombinationen sind nachgerechnet; die Werte stehen als Kommentar.
   */
  :root {
    /* Flaechen und Text */
    --farbe-seite: #fbfbf5;
    --farbe-flaeche: #ffffff;
    --farbe-flaeche-still: #fffadc;
    --farbe-text: #282828;          /* 14,7:1 auf Karte */
    --farbe-text-leise: #5f5b4e;    /*  6,8:1 auf Karte */
    --farbe-rand: #e8e3d2;
    --farbe-rand-kraeftig: #ded8c4;

    /* Marke */
    --farbe-akzent: #7d6a20;        /* Verweise und Beschriftungen, 5,3:1 */
    --farbe-akzent-dunkel: #665618; /* 7,2:1 */
    --farbe-akzent-flaeche: #dbc269;/* das Gold der Website */
    --farbe-akzent-text: #282828;   /* auf Gold: 8,4:1 */
    --farbe-akzent-sanft: #fffadc;

    /* Statusfarben */
    --farbe-erledigt: #1a6b43;
    --farbe-erledigt-sanft: #e4f3ea;
    --farbe-offen: #8a5000;
    --farbe-offen-sanft: #fbeedd;
    --farbe-fehler: #9d1f26;
    --farbe-fehler-sanft: #fbe8e9;

    /* Schrift — die Website nutzt Roboto. Bewusst NICHT von Google geladen:
       Das uebertruege bei jedem Aufruf die IP der Mitarbeiter an Google und
       waere in einem Portal mit Nachweisdaten datenschutzrechtlich heikel.
       Wenn Roboto gewuenscht ist, gehoert die Schrift selbst gehostet. */
    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --text-mini: 0.75rem;
    --text-klein: 0.875rem;
    --text-basis: 1rem;
    --text-gross: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
    --text-titel: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);

    /* Abstaende */
    --raum-1: 0.25rem;
    --raum-2: 0.5rem;
    --raum-3: 0.75rem;
    --raum-4: 1rem;
    --raum-5: 1.5rem;
    --raum-6: 2rem;
    --raum-abschnitt: clamp(2rem, 1.5rem + 2vw, 3rem);

    /* Formen */
    --radius: 0.75rem;
    --radius-klein: 0.5rem;
    --schatten: 0 1px 2px rgb(40 40 40 / 5%), 0 4px 12px -6px rgb(40 40 40 / 12%);
    --breite-inhalt: 64rem;
    --breite-schmal: 34rem;
  }

}

/* -------------------------------------------------------------------- */
@layer basis {
  /* Anmutung wie eine App statt wie eine Webseite:
     - kein graues Aufblitzen beim Antippen (wir zeigen eigene Zustaende),
     - kein Ueberdehnen der ganzen Seite beim Wischen ueber das Ende hinaus. */
  html {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
  }

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

  body {
    font-family: var(--schrift);
    font-size: var(--text-basis);
    line-height: 1.6;
    color: var(--farbe-text);
    background: var(--farbe-seite);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
  }

  h1 { font-size: var(--text-titel); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
  h2 { font-size: var(--text-gross); line-height: 1.3; letter-spacing: -0.01em; font-weight: 650; }
  h3 { font-size: var(--text-basis); line-height: 1.4; font-weight: 650; }

  a { color: var(--farbe-akzent); text-underline-offset: 0.18em; }
  a:hover { color: var(--farbe-akzent-dunkel); }

  :focus-visible {
    outline: 3px solid var(--farbe-akzent);
    outline-offset: 2px;
    border-radius: var(--radius-klein);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* -------------------------------------------------------------------- */
@layer layout {
  .inhalt {
    width: 100%;
    max-width: var(--breite-inhalt);
    margin-inline: auto;
    padding-inline: var(--raum-4);
  }

  /* 25rem war zu eng: „Bitte pruefen Sie Ihr Postfach" brach mitten im Satz,
     und die Karte wirkte wie ein Dialogfeld statt wie eine Seite. */
  .inhalt--schmal { max-width: var(--breite-schmal); }

  .haupt { flex: 1; padding-block: var(--raum-6) var(--raum-abschnitt); }

  /* Seiten, die aus einer einzigen Karte bestehen — anmelden, bestaetigen,
     Link gesendet. Sie hingen bisher oben am Rand, darunter eine
     bildschirmhohe Leere. Das sieht aus, als fehle etwas. */
  .haupt--mittig {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-block-size: min(70vh, 40rem);
  }

  /* Unter der festen Tableiste darf kein Inhalt verschwinden. */
  @media (max-width: 47.99rem) {
    body { padding-block-end: calc(4rem + env(safe-area-inset-bottom)); }
  }

  /* Seitliche Aussparungen (Querformat, gebogene Raender). */
  .inhalt {
    padding-inline: max(var(--raum-4), env(safe-area-inset-left), env(safe-area-inset-right));
  }

  .stapel > * + * { margin-block-start: var(--raum-4); }
  .stapel--weit > * + * { margin-block-start: var(--raum-abschnitt); }
  .stapel--eng > * + * { margin-block-start: var(--raum-2); }

  .raster {
    display: grid;
    gap: var(--raum-4);
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  }
}

/* -------------------------------------------------------------------- */
@layer komponenten {

  .sprunglink {
    position: absolute;
    inset-inline-start: -100vw;
    top: 0;
    z-index: 20;
    padding: var(--raum-2) var(--raum-4);
    background: var(--farbe-akzent-flaeche);
    color: var(--farbe-akzent-text);
    text-decoration: none;
  }
  .sprunglink:focus {
    inset-inline-start: 0;
    color: var(--farbe-akzent-text);
  }

  /* ---- Kopfzeile ---------------------------------------------------- */
  /* Klebend erst ab Tablet-Breite: Auf dem Telefon bricht die Navigation in
     zwei Zeilen um, und die Kopfzeile verdeckte dann ein Sechstel des
     Bildschirms samt der Ueberschrift, zu der man gerade gescrollt hat. */
  .kopf {
    background: var(--farbe-flaeche);
    border-block-end: 1px solid var(--farbe-rand);
  }
  @media (min-width: 48rem) {
    .kopf {
      position: sticky;
      top: 0;
      z-index: 10;
    }
  }

  .kopf__reihe {
    display: flex;
    align-items: center;
    gap: var(--raum-3);
    min-height: 3.5rem;
  }

  .marke {
    display: inline-flex;
    align-items: center;
    gap: var(--raum-2);
    text-decoration: none;
    color: var(--farbe-text);
    margin-inline-end: auto;
  }
  .marke__zeichen {
    inline-size: auto;
    block-size: 2.25rem;
    flex: none;
  }
  .marke__name { font-weight: 700; line-height: 1.15; }
  .marke__zusatz {
    display: block;
    font-size: var(--text-mini);
    font-weight: 500;
    color: var(--farbe-text-leise);
  }

  .kopf__person {
    display: none;
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
    white-space: nowrap;
  }
  @media (min-width: 40rem) {
    .kopf__person { display: inline; }
  }

  /* Navigation: auf dem Telefon eine Tableiste am unteren Rand, auf dem
     Bildschirm eine Reihe unter der Marke.

     Unten, weil dort der Daumen hinreicht — und weil die Leiste damit an
     derselben Stelle sitzt wie in einer App. Zuvor stand sie oben und brach
     in zwei Zeilen um; das kostete ein Sechstel der Hoehe und sah nach
     Webseite aus. Dieselbe Auszeichnung dient beiden Formen: Zwei
     Navigationen nebeneinander waeren fuer Vorleseprogramme eine Zumutung. */
  .navi {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 20;
    display: flex;
    justify-content: space-around;
    gap: var(--raum-1);
    background: var(--farbe-flaeche);
    border-block-start: 1px solid var(--farbe-rand);
    /* Platz fuer die Gestenleiste des Geraets. */
    padding: var(--raum-1) var(--raum-2) calc(var(--raum-1) + env(safe-area-inset-bottom));
  }

  .navi__punkt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    flex: 1 1 0;
    min-block-size: 3rem;
    padding: 0.25rem;
    border-radius: var(--radius-klein);
    text-decoration: none;
    color: var(--farbe-text-leise);
    font-size: var(--text-mini);
    font-weight: 600;
    white-space: nowrap;
  }

  .navi__symbol {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }

  /* Die Beschriftung unter dem Symbol. Auf dem Telefon klein, damit fuenf
     Punkte nebeneinander passen; am Bildschirm uebernimmt sie die
     Schriftgroesse des Punktes (siehe unten). */
  .navi__text { font-size: var(--text-mini); line-height: 1.1; }

  .navi__punkt[aria-current="page"] {
    background: var(--farbe-akzent-sanft);
    color: var(--farbe-akzent);
  }

  @media (min-width: 48rem) {
    /* Auf dem Bildschirm zurueck an den Kopf, ohne Symbole. */
    .navi {
      position: static;
      justify-content: flex-start;
      border-block-start: 0;
      padding: 0;
      background: none;
    }
    .navi__symbol { display: none; }
    .navi__text { font-size: inherit; }
    .navi__punkt {
      flex: none;
      flex-direction: row;
      min-block-size: 2.75rem;
      padding: 0.4rem 0.75rem;
      font-size: var(--text-basis);
      font-weight: 550;
    }
    .navi__punkt:hover { background: var(--farbe-flaeche-still); color: var(--farbe-text); }
  }

  /* ---- Seitenkopf --------------------------------------------------- */
  .seitenkopf__titel { margin-block-end: var(--raum-1); }
  .seitenkopf__text { color: var(--farbe-text-leise); }

  /* ---- Abschnitt ---------------------------------------------------- */
  .abschnitt__kopf {
    display: flex;
    align-items: center;
    gap: var(--raum-3);
    margin-block-end: var(--raum-4);
  }
  .abschnitt__kopf::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background: var(--farbe-rand);
  }
  /* Der Zaehler gehoert an die Ueberschrift, nicht ans andere Ende der Linie —
     dort stand er wie eine verirrte Zahl im Nichts. */
  .zaehler {
    flex: none;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--farbe-flaeche-still);
    color: var(--farbe-text-leise);
    font-size: var(--text-mini);
    font-weight: 650;
  }

  /* ---- Karte -------------------------------------------------------- */
  .karte {
    display: flex;
    flex-direction: column;
    gap: var(--raum-2);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    padding: var(--raum-4);
    box-shadow: var(--schatten);
  }
  .karte__titel { margin: 0; }

  /*
   * Die Karte der Einstiegsseiten — anmelden, Link gesendet, Link ungueltig,
   * Anmeldung bestaetigen.
   *
   * Es ist die erste Seite, die jemand von diesem Portal sieht, und oft die
   * einzige auf dem Bildschirm. Mit dem Innenabstand einer Listenkarte wirkte
   * sie darin verloren: ein kleines Kaestchen in viel Leere. Die Karte selbst
   * waechst nur um 2rem — breiter liesse sich der Text nicht mehr bequem in
   * einer Zeile lesen —, bekommt dafuer aber Luft: knapp die doppelte
   * Polsterung und mehr Abstand zwischen ihren Teilen.
   */
  .karte--einstieg {
    gap: var(--raum-3);
    padding: clamp(var(--raum-5), 4vw, var(--raum-6));
  }
  .karte__meta {
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
  }
  .karte__text { font-size: var(--text-klein); }

  /* Aktionen in gleich breiten Spalten — sonst wirken unterschiedlich
     lange Beschriftungen unruhig. */
  /* Knoepfe so breit wie ihre Beschriftung, mindestens fingerbreit. Vorher
     teilten sie sich die volle Breite der Karte — auf einem grossen Bildschirm
     wurde „Speichern" dadurch handtellergross und sah aus wie ein Versehen. */
  .karte__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-2);
    margin-block-start: auto;
    padding-block-start: var(--raum-2);
  }
  .karte__aktionen > *,
  .karte__aktionen form > * { flex: 0 1 auto; min-inline-size: 8.5rem; }

  /* Ein Formular soll die Reihe nicht unterbrechen: Sein Knopf wird selbst
     zum Reihenelement und steht damit neben den Nachbarn. */
  .karte__aktionen form { display: contents; }

  /* Auf dem Telefon ueber die ganze Breite — dort trifft man ungenauer. */
  @media (max-width: 30rem) {
    .karte__aktionen > *,
    .karte__aktionen form > * { flex: 1 1 100%; }
  }

  /*
   * Dieselbe Reihe, aber als eigener Abschnitt einer Seite.
   *
   * Vorher trug auch sie ``karte__aktionen`` — auf zwoelf Seiten, und keine
   * davon hatte eine Karte darum. Der Name war also schon falsch, und er
   * kostete auch etwas: ``margin-block-start: auto`` ist eine Anweisung an
   * den Flex-Behaelter der Karte („schieb mich nach unten"). Ohne Behaelter
   * wird daraus eine Null, und die Null gewinnt gegen den Abstand des
   * Stapels. „Neuer Zugang" klebte deshalb am Seitenkopf, und auf jeder
   * Fehlerseite klebte „Zur Uebersicht" am Text.
   */
  .seitenaktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-2);
  }
  .seitenaktionen > .knopf,
  .seitenaktionen form > .knopf { flex: 0 1 auto; min-inline-size: 8.5rem; }
  .seitenaktionen form { display: contents; }

  @media (max-width: 30rem) {
    .seitenaktionen > .knopf,
    .seitenaktionen form > .knopf { flex: 1 1 100%; }
  }

  .karte--offen { border-inline-start: 4px solid var(--farbe-offen); }

  /* ---- Schaltflaechen ----------------------------------------------- */
  .knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    /* Grosszuegige Trefferflaeche (WCAG 2.2 Zielgroesse). */
    min-block-size: 2.75rem;
    padding-inline: 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-klein);
    background: var(--farbe-akzent-flaeche);
    color: var(--farbe-akzent-text);
    font-size: var(--text-klein);
    font-weight: 650;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
  }
    /* Beim Ueberfahren nur leicht abdunkeln — die Beschriftung bleibt dunkel,
     damit der Kontrast von 8,4:1 erhalten bleibt. */
  .knopf:hover { background: #cbb055; color: var(--farbe-akzent-text); }

  .knopf--zweitrangig {
    background: var(--farbe-flaeche);
    color: var(--farbe-akzent);
    border-color: var(--farbe-rand-kraeftig);
  }
  .knopf--zweitrangig:hover {
    background: var(--farbe-flaeche-still);
    color: var(--farbe-akzent);
    border-color: var(--farbe-akzent);
  }

  .knopf--schlicht {
    background: none;
    color: var(--farbe-akzent);
    padding-inline: 0.5rem;
    /* Auch die schlichte Fassung fingerbreit: „Abmelden" sitzt oben rechts,
       wo man auf dem Telefon ohnehin ungenau trifft. */
    min-block-size: 2.75rem;
  }
  .knopf--schlicht:hover { background: var(--farbe-flaeche-still); color: var(--farbe-akzent); }

  /* Der Zaehler waehrend der Wartezeit — im Knopf, nicht daneben. Wer auf
     eine gesperrte Schaltflaeche sieht, sucht den Grund dort und nirgends
     sonst. Der Balken laeuft von links durch; die Zahl steht daneben. */
  /* Ueber die volle Breite. Die Klasse stand seit jeher in vier Vorlagen —
     eine Regel dazu gab es nie, und der Knopf sass deshalb schmal in einer
     schmalen Karte. Auf den Anmeldeseiten ist er die einzige Handlung; dort
     darf er die Breite nehmen. */
  .knopf--breit { inline-size: 100%; }

  .knopf__zaehler { font-variant-numeric: tabular-nums; }
  .knopf__zaehler:empty { display: none; }

  .knopf--wartet {
    background-image: linear-gradient(
      to right,
      var(--farbe-akzent-sanft) var(--wartefortschritt, 0%),
      transparent var(--wartefortschritt, 0%)
    );
  }
  @media (prefers-reduced-motion: no-preference) {
    .knopf--wartet { transition: background-image 0.3s linear; }
  }

  .knopf[disabled], .knopf[aria-disabled="true"] {
    background: var(--farbe-flaeche-still);
    color: var(--farbe-text-leise);
    border-color: var(--farbe-rand);
    cursor: not-allowed;
  }

  /* ---- Statusanzeige ------------------------------------------------ */
  .abzeichen {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1px solid currentcolor;
    font-size: var(--text-mini);
    font-weight: 650;
    line-height: 1.5;
  }
  .abzeichen::before {
    content: "";
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-radius: 50%;
    background: currentcolor;
  }
  .abzeichen--erledigt { background: var(--farbe-erledigt-sanft); color: var(--farbe-erledigt); }
  .abzeichen--offen { background: var(--farbe-offen-sanft); color: var(--farbe-offen); }
  .abzeichen--fehler { background: var(--farbe-fehler-sanft); color: var(--farbe-fehler); }
  .abzeichen--neutral {
    background: var(--farbe-flaeche-still);
    color: var(--farbe-text-leise);
    border-color: var(--farbe-rand-kraeftig);
  }

  /* ---- Formular ----------------------------------------------------- */
  .feld { display: flex; flex-direction: column; gap: var(--raum-1); }
  /* Die Klasse setzt display:flex und gewinnt damit gegen die Vorgabe des
     Browsers fuer [hidden]. Ohne diese Zeile bliebe ein ausgeblendetes
     Feld sichtbar. */
  .feld[hidden] { display: none; }
  .feld__marke { font-weight: 650; font-size: var(--text-klein); }
  .feld__eingabe {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand-kraeftig);
    border-radius: var(--radius-klein);
  }
  .feld__eingabe::placeholder { color: var(--farbe-text-leise); }
  .feld__eingabe[aria-invalid="true"] { border-color: var(--farbe-fehler); border-width: 2px; }
  .feld__hinweis { font-size: var(--text-klein); color: var(--farbe-text-leise); }

  /* Der Fehler steht unter dem Feld, in Worten. Die rote Umrandung allein
     traegt die Bedeutung nicht (WCAG 1.4.1). */
  .feld__fehler {
    font-size: var(--text-klein);
    font-weight: 600;
    color: var(--farbe-fehler);
  }

  /* Kaestchen und Beschriftung in einer Zeile, mit fingerbreiter Flaeche. */
  .wahl {
    display: flex;
    align-items: center;
    gap: var(--raum-2);
    min-block-size: 2.75rem;
    cursor: pointer;
  }
  .wahl__kaestchen { inline-size: 1.15rem; block-size: 1.15rem; flex: none; }

  /* Mehrfachauswahl: bei vielen Mitarbeitern scrollt der Kasten, statt die
     Seite ins Endlose zu ziehen. */
  /* „div." ist hier nicht Zierde. Django setzt ``attrs["class"]`` einer
     CheckboxSelectMultiple **sowohl** auf den umgebenden Kasten als auch auf
     jedes einzelne Kaestchen. Ohne die Einschraenkung bekaeme jedes Kaestchen
     Rahmen, Polsterung und eigenes Scrollen — sichtbar als merkwuerdig grosse,
     verschobene Haken. */
  div.wahlliste {
    display: flex;
    flex-direction: column;
    gap: var(--raum-1);
    max-block-size: 16rem;
    overflow-y: auto;
    padding: var(--raum-2);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-klein);
    list-style: none;
    margin: 0;
  }
  /* Genau wie ein einzelnes Kaestchen: gleiche Groesse, gleicher Abstand,
     gleiche Trefferflaeche. Vorher war die Liste sichtbar enger und die
     Kaestchen kleiner — zwei Bauarten fuer dieselbe Frage. */
  div.wahlliste label {
    display: flex;
    align-items: center;
    gap: var(--raum-2);
    min-block-size: 2.75rem;
    cursor: pointer;
  }
  div.wahlliste input[type="checkbox"] {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    flex: none;
  }

  /* „Gilt fuer alle" schliesst die Einzelauswahl ein — dann ist sie
     gegenstandslos und wird abgeblendet. Das Skript setzt die Marke; ohne
     Javascript bleibt alles bedienbar, und der Server entscheidet ohnehin. */
  div.wahlliste--gegenstandslos {
    opacity: 0.55;
    background: var(--farbe-flaeche-still);
  }

  /* Ein Formular ist keine Karte mit Aktionen am Boden — die Felder brauchen
     Abstand voneinander, nicht der Rahmen. */
  .formular { gap: var(--raum-4); }
  .formular .feld + .feld { margin-block-start: var(--raum-3); }

  /* ---- Abschnitte im Formular ---------------------------------------
   * Ein langes Formular ohne Zwischenueberschriften ist eine Wand aus
   * Feldern. „fieldset" und „legend" statt div/h2, damit ein Vorleseprogramm
   * die Zugehoerigkeit ansagt — sonst hoert man nur „Gilt fuer alle" ohne
   * die Frage, auf die das die Antwort ist.
   * ------------------------------------------------------------------- */
  .feldgruppe {
    margin: 0;
    /* Ein fieldset schrumpft von sich aus nicht unter seinen Inhalt — eine
       lange Auswahlliste darin schoebe die ganze Seite auf dem Telefon nach
       rechts. Der Seitenkoerper darf niemals waagerecht scrollen. */
    min-inline-size: 0;
    padding: var(--raum-4);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-klein);
    background: var(--farbe-seite);
  }

  .feldgruppe__titel {
    padding-inline: var(--raum-2);
    font-weight: 650;
    font-size: var(--text-klein);
  }

  .feldgruppe__hinweis {
    margin: 0 0 var(--raum-3);
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
  }

  .feldgruppe .feld + .feld { margin-block-start: var(--raum-3); }

  /* ---- Meldungen ---------------------------------------------------- */
  .meldung {
    padding: var(--raum-3) var(--raum-4);
    border-radius: var(--radius-klein);
    border: 1px solid var(--farbe-rand);
    background: var(--farbe-flaeche);
    font-size: var(--text-klein);
  }
  .meldung--erfolg {
    background: var(--farbe-erledigt-sanft);
    border-color: var(--farbe-erledigt);
    color: var(--farbe-erledigt);
  }
  .meldung--fehler {
    background: var(--farbe-fehler-sanft);
    border-color: var(--farbe-fehler);
    color: var(--farbe-fehler);
  }
  /* „Bitte zuerst oeffnen" sah bisher aus wie „gespeichert" — dieselbe
     Umrandung, dieselbe Farbe. Eine Warnung muss sich davon abheben. */
  .meldung--warnung {
    background: var(--farbe-offen-sanft);
    border-color: var(--farbe-offen);
    color: var(--farbe-offen);
  }

  /* ---- Aufklappbare Sicht je Mitarbeiter ------------------------------
   * Browsereigenes „details" statt Skript: Das Portal bleibt ohne
   * JavaScript vollstaendig bedienbar.
   * ------------------------------------------------------------------- */
  .aufklapp { inline-size: 100%; }

  .aufklapp__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-2) var(--raum-3);
    /* Fingerbreite Trefferflaeche — die ganze Zeile klappt auf. */
    min-block-size: 2.75rem;
    cursor: pointer;
    /* Djangos Listenpunkte und der eigene Zeiger vertragen sich nicht; wir
       setzen ihn selbst, sonst sieht man einer zugeklappten Zeile gar nicht
       an, dass sie sich oeffnen laesst. */
    list-style: none;
  }
  .aufklapp__kopf::-webkit-details-marker { display: none; }

  /* Der Zeiger steht **vorn**: Rechts wuerde er bei schmalen Geraeten in die
     naechste Zeile rutschen und dort allein stehen. */
  .aufklapp__kopf::before {
    content: "";
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-inline-end: 2px solid var(--farbe-text-leise);
    border-block-end: 2px solid var(--farbe-text-leise);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
  }
  .aufklapp[open] > .aufklapp__kopf::before { transform: rotate(45deg); }

  @media (prefers-reduced-motion: reduce) {
    .aufklapp__kopf::before { transition: none; }
  }

  .aufklapp__name { font-weight: 650; }
  .aufklapp__stand { font-size: var(--text-klein); color: var(--farbe-text-leise); }

  .punkte {
    margin: var(--raum-3) 0 var(--raum-1);
    padding: 0 0 0 var(--raum-4);
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--raum-2);
  }

  .punkt {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: 0 var(--raum-2);
    font-size: var(--text-klein);
  }

  /* Der Haken traegt keine Bedeutung allein — daneben steht immer der Text. */
  .punkt__zeichen { color: var(--farbe-erledigt); }
  .punkt__titel { font-weight: 600; }
  .punkt__stand { grid-column: 2; color: var(--farbe-text-leise); }
  .punkt__stand--ueberfaellig { color: var(--farbe-fehler); font-weight: 600; }

  /* ---- Leerer Zustand ----------------------------------------------- */
  .leer {
    text-align: center;
    padding: var(--raum-6) var(--raum-4);
    border: 1px dashed var(--farbe-rand-kraeftig);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
    color: var(--farbe-text-leise);
    font-size: var(--text-klein);
  }

  /* ---- Fusszeile ---------------------------------------------------- */
  .fuss {
    border-block-start: 1px solid var(--farbe-rand);
    background: var(--farbe-flaeche);
    padding-block: var(--raum-4);
    font-size: var(--text-mini);
    color: var(--farbe-text-leise);
  }
  /* Umbruch statt Abschneiden: Auf dem Telefon stehen die Verweise
     untereinander, und der Punkt dazwischen wandert mit. */
  .fuss__verweise {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-block-start: var(--raum-1);
  }

  /* ---- Filterleiste -------------------------------------------------- */
  .filter {
    display: grid;
    gap: var(--raum-3);
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  }
  .filter__arten {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-3);
    margin-block-start: var(--raum-3);
  }
  /* Kompakt — aber nur hier. Ohne die Eingrenzung ueberschrieb diese Regel
     die Formularfassung weiter oben (gleiche Ebene, spaetere Zeile): Dann
     verlor jedes Kaestchen im Formular seine fingerbreite Trefferflaeche und
     bekam die kleinere Schrift der Filterleiste. */
  .filter__arten .wahl {
    display: inline-flex;
    min-block-size: 0;
    gap: 0.4rem;
    font-size: var(--text-klein);
  }

  /* ---- Tabelle ------------------------------------------------------- */
  /* Breite Tabellen scrollen in ihrem eigenen Rahmen — die Seite selbst
     darf nie waagerecht scrollen. */
  .tabellenrahmen {
    overflow-x: auto;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
  }
  .tabelle {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-klein);
  }
  .tabelle th,
  .tabelle td {
    text-align: start;
    padding: var(--raum-2) var(--raum-3);
    border-block-end: 1px solid var(--farbe-rand);
    vertical-align: top;
  }
  .tabelle th {
    background: var(--farbe-flaeche-still);
    font-weight: 650;
    white-space: nowrap;
  }
  .tabelle tbody tr:last-child td { border-block-end: 0; }
  .tabelle code { font-size: var(--text-mini); }

  /* Auf dem Handy wird aus jeder Zeile ein kleiner Block: fuenf Spalten
     nebeneinander sind dort nicht lesbar, und seitwaerts zu scrollen findet
     niemand von allein. Die Spaltenueberschrift steht dann vor dem Wert —
     sie kommt aus data-titel, damit sie nur an einer Stelle gepflegt wird. */
  @media (max-width: 47.99rem) {
    .tabelle thead {
      position: absolute;
      inline-size: 1px; block-size: 1px;
      overflow: hidden; clip-path: inset(50%);
    }
    .tabelle,
    .tabelle tbody,
    .tabelle tr,
    .tabelle td { display: block; inline-size: auto; }

    .tabelle tr {
      padding: var(--raum-3) 0;
      border-block-end: 1px solid var(--farbe-rand);
    }
    .tabelle tr:last-child { border-block-end: 0; }

    .tabelle td {
      padding: var(--raum-1) 0;
      border: 0;
    }

    .tabelle td[data-titel]::before {
      content: attr(data-titel);
      display: block;
      font-size: var(--text-mini);
      font-weight: 650;
      color: var(--farbe-text-leise);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
  }

  /* ---- Entwicklungsbereich ------------------------------------------ */
  .entwicklung {
    border: 2px dashed var(--farbe-offen);
    background: var(--farbe-offen-sanft);
    border-radius: var(--radius);
    padding: var(--raum-4);
  }
  .entwicklung__titel {
    color: var(--farbe-offen);
    font-weight: 700;
    font-size: var(--text-mini);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-block-end: var(--raum-2);
  }

  /* ---- Liste ---------------------------------------------------------
   *
   * Karten sind fuer Aufgaben gedacht, nicht fuer Bestaende. Bei vier
   * Dokumenten in vier Kategorien ergab jede Karte eine eigene Zeile mit
   * Rahmen, Schatten und Abstand — die Seite wurde lang, ohne mehr zu sagen.
   * Eine Zeile je Eintrag zeigt dasselbe auf einem Viertel der Hoehe und
   * laesst sich mit einem Blick ueberfliegen.
   */
  /* Kein ``margin: 0; padding: 0; list-style: none`` mehr: Das steht schon
     im Reset. Hier wiederholt, stand es in der Ebene ``komponenten`` — und
     die gewinnt gegen ``layout``, wo der Stapel liegt. Eine Liste als
     eigener Abschnitt bekam dadurch 0 statt 44 px Abstand nach oben. Das ist
     dieselbe Falle wie schon einmal bei ``.gruppe``: Eine Null ist keine
     Ruecknahme, sondern eine Ansage. */
  .liste {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .eintrag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-3) var(--raum-4);
    padding: var(--raum-4);
    border-block-end: 1px solid var(--farbe-rand);
  }
  .eintrag:last-child { border-block-end: 0; }

  /* Offene Punkte bekommen dieselbe Markierung wie offene Karten. */
  .eintrag--offen {
    border-inline-start: 4px solid var(--farbe-offen);
    padding-inline-start: calc(var(--raum-4) - 4px);
  }

  /* Waechst und schrumpft; die Aktionen behalten ihre Breite. */
  .eintrag__haupt { flex: 1 1 18rem; min-inline-size: 0; }

  /* Steht das Abzeichen allein ueber der Ueberschrift, ist es dort kein
     Wort im Satz, sondern eine Zeile fuer sich. Als ``inline-flex`` blieb es
     trotzdem in einer Textzeile haengen: Die Grundlinie schob es um 2,5 px
     nach unten, und unten schloss es buendig mit der Zeile ab — 2,5 px Luft
     oben, 0 px unten, und die Ueberschrift klebte daran. Alles andere im
     Eintrag steht 4 px auseinander.

     ``flex`` macht daraus einen eigenen Block ohne Textzeile, ``fit-content``
     laesst ihn trotzdem nur so breit werden wie sein Inhalt. Der Abstand
     nach unten ist bewusst groesser als die 4 px darunter: Das Abzeichen
     beschriftet den ganzen Eintrag, es ist nicht die erste seiner Zeilen. */
  .eintrag__haupt > .abzeichen {
    display: flex;
    inline-size: fit-content;
    margin-block-end: var(--raum-2);
  }

  .eintrag__titel {
    margin: 0;
    font-size: var(--text-basis);
    font-weight: 650;
    line-height: 1.35;
  }

  /* Ein Titel, der zugleich Verweis ist, behaelt die Farbe des Textes. Gold
     ist im Portal die Farbe des Handelns — ein durchgehend goldener Titel
     liesse eine Liste wie eine Reihe von Aufforderungen aussehen. Die
     Unterstreichung ist blass und wird beim Ueberfahren deutlich. */
  .eintrag__titel a,
  a.punkt__titel {
    color: inherit;
    text-decoration-color: var(--farbe-rand-kraeftig);
  }
  .eintrag__titel a:hover,
  .eintrag__titel a:focus-visible,
  a.punkt__titel:hover,
  a.punkt__titel:focus-visible {
    color: var(--farbe-akzent-dunkel);
    text-decoration-color: currentColor;
  }

  .eintrag__meta {
    margin-block-start: var(--raum-1);
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
  }

  /* Frist. Die Bedeutung steht immer im Text („noch 3 Tage", „überfällig
     seit …") — die Farbe ist Zugabe, nicht Traeger (WCAG 1.4.1). */
  .frist {
    margin-block-start: var(--raum-1);
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
  }
  .frist--dringend { color: var(--farbe-offen); font-weight: 600; }
  .frist--ueberfaellig { color: var(--farbe-fehler); font-weight: 650; }

  .frist--gross {
    font-size: var(--text-basis);
    margin-block-end: var(--raum-4);
  }

  .eintrag__hinweis {
    margin-block-start: var(--raum-1);
    font-size: var(--text-klein);
  }

  .eintrag__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-2);
    flex: 0 0 auto;
  }
  .eintrag__aktionen form { display: contents; }

  /* Gleiche Mindestbreite, damit die Schaltflaechen ueber die Zeilen hinweg
     fluchten. Ohne sie richtet sich jede Zeile fuer sich am rechten Rand aus,
     und weil „Neues Dokument“, „Neue Schulung“ und „Neuer Zugang“ verschieden
     lang sind, stehen die linken Kanten um ein paar Pixel versetzt. Das sieht
     nicht nach Absicht aus, sondern nach Versehen — und genau so liest es
     sich auch.

     Nur ``.knopf``: In derselben Spalte steht mancherorts ein Abzeichen
     („4 offen“ unter „Stand“). Ohne die Einschraenkung wuchs auch das auf
     152 px — dieselbe Plakette, die zwei Abschnitte tiefer 76 px breit ist. */
  .eintrag__aktionen > .knopf,
  .eintrag__aktionen form > .knopf { min-inline-size: 9.5rem; }

  /* Auf dem Telefon unter den Text, ueber die volle Breite — nebeneinander
     waeren die Schaltflaechen dort zu schmal zum Treffen. */
  @media (max-width: 30rem) {
    .eintrag__aktionen { inline-size: 100%; }
    /* Auch „form > .knopf“: Ein Knopf in einem Formular ist zwar durch
       ``display: contents`` ein Reihenelement, im Baum bleibt er aber Kind
       des Formulars. Ohne die zweite Zeile wuchsen nur die uebrigen, und
       „Gelesen“ blieb daneben halb so breit stehen. */
    .eintrag__aktionen > .knopf,
    .eintrag__aktionen form > .knopf { flex: 1 1 8rem; }
  }

  /* Kleine Ueberschrift innerhalb einer Seite, ohne das Gewicht eines
     eigenen Abschnitts — etwa je Dokumentenkategorie. */
  /* Auch die erste Gruppe braucht Luft nach oben: Ohne diesen Abstand klebte
     die Kategoriezeile am Einleitungstext der Seite. */
  /* ``.gruppe`` setzt bewusst **gar keinen** Abstand — auch keine Null.
     Den Abstand bestimmt der Behaelter: ``.stapel--weit`` auf den Seiten,
     die Luecke von ``.formular`` in den Karten.

     Beide Fassungen davor waren falsch, und die zweite schlimmer als die
     erste: 1,5rem ueberschrieben die 2–3rem des Stapels (verschieden weite
     Abstaende, je nachdem ob ein Abschnitt die Klasse trug), und „0" schob
     die Abschnitte vollstaendig aneinander. Eine Null ist keine Ruecknahme,
     sondern eine Ansage — sie gewinnt gegen den Stapel genauso. */

  .gruppe__titel {
    margin: 0 0 var(--raum-2);
    font-size: var(--text-mini);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--farbe-text-leise);
  }

  /* Der Satz unter der Ueberschrift: Was dieser Abschnitt bedeutet. Er stand
     schon in drei Vorlagen, ohne dass es eine Regel dazu gab — er sah aus wie
     gewoehnlicher Fliesstext und ordnete sich dem Titel nicht unter. */
  .gruppe__hinweis {
    margin: 0 0 var(--raum-3);
    max-inline-size: 60ch;
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
  }

  /* ---- Zwei-Faktor-Anmeldung (QMP-017) --------------------------------
   *
   * Schluessel und Codes werden abgetippt oder abgeschrieben. Feste
   * Zeichenbreite und grosse Schrift, damit 0 und O, 1 und l unterscheidbar
   * bleiben — ein Tippfehler hier kostet einen zweiten Anlauf.
   */
  .geheimnis {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--text-gross);
    letter-spacing: 0.08em;
    padding: var(--raum-3);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-klein);
    background: var(--farbe-flaeche-still);
    overflow-wrap: anywhere;
  }

  .codeliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--raum-2);
    margin: 0;
    padding: var(--raum-3);
    list-style: none;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-klein);
    background: var(--farbe-flaeche);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--text-basis);
  }

  /* ---- Kurze Einfuehrung (QMP-015) -----------------------------------
   *
   * Grosse Flaechen, wenig auf dem Bildschirm, ein deutlicher naechster
   * Schritt. „Ueberspringen" steht bewusst kleiner darunter und nicht
   * daneben: Es soll erreichbar sein, aber nicht gleichwertig aussehen.
   */
  /* Die Einfuehrung stand schmal, aber ohne Rahmen frei auf dem Seitengrund
     und wirkte dadurch wie ein abgebrochener Entwurf. Sie bekommt dieselbe
     Karte wie jede andere Seite des Portals, nur grosszuegiger gepolstert:
     Hier steht ein Satz je Bildschirm, kein Formular. */
  .einfuehrung {
    display: flex;
    flex-direction: column;
    gap: var(--raum-4);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: var(--raum-5) var(--raum-4);
    margin-block: var(--raum-4);
  }

  @media (min-width: 40rem) {
    .einfuehrung { padding: var(--raum-6) var(--raum-5); }
  }

  .einfuehrung__zaehler {
    font-size: var(--text-mini);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--farbe-text-leise);
  }

  .einfuehrung__titel { margin: 0; }

  .einfuehrung__text {
    font-size: var(--text-gross);
    line-height: 1.5;
  }

  .einfuehrung__punkte {
    display: flex;
    flex-direction: column;
    gap: var(--raum-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Ein Punkt je Zeile mit ruhigem Haken davor — Aufzaehlungspunkte wirken
     wie eine Liste zum Abarbeiten, das ist hier nicht gemeint. */
  .einfuehrung__punkte li {
    position: relative;
    padding-inline-start: 1.75rem;
    line-height: 1.5;
  }
  .einfuehrung__punkte li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.45em;
    inline-size: 0.75rem;
    block-size: 0.4rem;
    border-inline-start: 2px solid var(--farbe-akzent);
    border-block-end: 2px solid var(--farbe-akzent);
    transform: rotate(-45deg);
  }

  .einfuehrung__zwischentitel {
    margin-block-start: var(--raum-2);
    font-weight: 650;
  }

  /* Ein Strich statt eines Hakens: Vor einer Verneinung waere der Haken
     irrefuehrend — er liest sich auf einen Blick wie eine Zusage. */
  .einfuehrung__punkte--nicht li::before {
    inline-size: 0.8rem;
    block-size: 0;
    border-inline-start: 0;
    border-block-end: 2px solid var(--farbe-text-leise);
    transform: none;
    inset-block-start: 0.7em;
  }

  .einfuehrung__hinweis {
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
  }

  .einfuehrung__aktionen { margin-block-start: var(--raum-2); }

  .knopf--gross {
    inline-size: 100%;
    min-block-size: 3.25rem;
    font-size: var(--text-basis);
  }

  .einfuehrung__nebenwege {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--raum-3);
    font-size: var(--text-klein);
  }

  /* ---- Wiedergabe (QMP-010) ------------------------------------------ */

  .seitenkopf__weg {
    font-size: var(--text-klein);
    margin-block-end: var(--raum-2);
  }

  .hinweis {
    padding: var(--raum-3) var(--raum-4);
    border-radius: var(--radius-klein);
    border-inline-start: 4px solid var(--farbe-rand-kraeftig);
    background: var(--farbe-flaeche);
    margin-block-end: var(--raum-4);
    line-height: 1.5;
  }

  /* Die Bedeutung steht immer auch im Text — Farbe allein traegt sie nicht. */
  .hinweis--erledigt {
    border-inline-start-color: var(--farbe-erledigt);
    background: var(--farbe-erledigt-sanft);
  }

  .hinweis--achtung {
    border-inline-start-color: var(--farbe-offen);
    background: var(--farbe-offen-sanft);
  }

  /* Seitenverhaeltnis fuer die YouTube-Einbettung. */
  .video-rahmen {
    aspect-ratio: 16 / 9;
    inline-size: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
  }

  .video-rahmen iframe {
    inline-size: 100%;
    block-size: 100%;
    border: 0;
  }

  .wiedergabe {
    display: flex;
    flex-direction: column;
    gap: var(--raum-4);
  }

  .wiedergabe__video {
    inline-size: 100%;
    max-block-size: 70vh;
    border-radius: var(--radius);
    background: #000;
  }

  .wiedergabe__stand {
    display: flex;
    flex-direction: column;
    gap: var(--raum-2);
  }

  .balken {
    block-size: 0.5rem;
    inline-size: 100%;
    border-radius: 999px;
    background: var(--farbe-rand);
    overflow: hidden;
  }

  /* Die Breite setzt das Skript ueber --anteil; ohne JavaScript bleibt der
     Balken leer, der Text daneben stimmt trotzdem. */
  .balken__fuellung {
    inline-size: var(--anteil, 0%);
    block-size: 100%;
    background: var(--farbe-akzent-flaeche);
    transition: inline-size 0.3s ease;
  }

  .wiedergabe__text { font-weight: 600; }

  /* Der Abschluss steht bewusst unter der Erklaerung, nicht daneben: Erst
     lesen, was gezaehlt wird, dann bestaetigen. */
  .wiedergabe__abschluss { margin-block-start: var(--raum-2); }

  .wiedergabe__erklaerung {
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
    max-inline-size: 55ch;
  }

  .kenndaten {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-5);
    margin-block-start: var(--raum-5);
    padding-block-start: var(--raum-4);
    border-block-start: 1px solid var(--farbe-rand);
  }

  .kenndaten__paar dt {
    font-size: var(--text-mini);
    color: var(--farbe-text-leise);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .kenndaten__paar dd {
    margin: 0;
    font-weight: 600;
  }
}

/* -------------------------------------------------------------------- */
@layer hilfen {
  .leise { color: var(--farbe-text-leise); }
  .klein { font-size: var(--text-klein); }
  .gross { font-size: var(--text-gross); }
  .mini { font-size: var(--text-mini); }
  .nur-fuer-screenreader {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}