/* =========================================================================
   Ideefix — Design-System (T-053, Bauauftrag 001 Abschnitt 10)

   Eine handgeschriebene Datei, kein CDN, keine nachgeladenen Schriften, kein
   JavaScript. Jede Farbe kommt über `var(--c-…)`; außerhalb von `:root`
   steht kein HEX-Wert.

   Herkunft der Werte:
   - Theme „MTL1" der Power App: Basisfarbe Orange #FF8B00, Schrift Segoe UI
     (Snapshot 25.10.2026, References/ModernThemes.json).
   - Logo (01_Kommunikation_Kunde/Branding/MTL-LOGO.jpg), gemessen:
     Orange #FF8B00, Grau #595051.
   - Kacheln wie ScreenHauptMenü: Orange gefüllt, Radius 10, halbfett,
     gesperrt #F4F4F4 mit Schrift #A6A6A6 (DisabledFill/DisabledColor).
   - Ein CI-Leitfaden fehlt (O6); Feinschliff, sobald Vincenzo einen liefert.

   Dokumentierte Kontraste (WCAG 2.1, relative Luminanz, gerundet):
     --c-tinte       (#1f1b1c) auf weiß                 ≈ 17,0 : 1  AAA
     --c-tinte-weich (#595051) auf weiß                 ≈  7,8 : 1  AAA
     --c-auf-orange  (#1f1b1c) auf --c-orange (#ff8b00) ≈  7,3 : 1  AAA
     --c-auf-orange  (#1f1b1c) auf --c-orange-hover     ≈  5,9 : 1  AA
     --c-link        (#995300) auf weiß                 ≈  5,9 : 1  AA
     weiß auf --c-orange (#ff8b00)                       ≈  2,4 : 1  — nicht
       genutzt: So sieht die App vermutlich aus (PrimaryForeground), es liegt
       aber unter AA. Darum dunkle Schrift auf Orange (Orchestrator-
       Entscheidung 27.10.2026, bis O6 entschieden ist): ein Token,
       --c-auf-orange, umstellbar.
     --c-gesperrt-text (#6e6765) auf --c-gesperrt (#f4f4f4) ≈ 5,0 : 1  AA
       (T-075 O6, Julius 02.11.: „gerne besser lesbare Kacheln"; vorher
       #a6a6a6 wie die App, 2,2 : 1). Gesperrt bleibt erkennbar an Fläche
       und Rahmen in --c-linie; die Kacheln stehen unter „Kommt später".
   Die AA-Schwelle für Fließtext ist 4,5 : 1. Vor jedem Palettenwechsel
   nachrechnen.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
  /* Marke */
  --c-orange: #ff8b00;          /* Theme MTL1, Logo                         */
  --c-orange-hover: #e67d00;    /* etwa „Darker10" der App                   */
  --c-orange-tief: #995300;     /* etwa „Darker40": Linien, Fokus, Gedrückt  */
  --c-orange-hell: #fff1e0;     /* Hinweisflächen                            */
  --c-auf-orange: #1f1b1c;      /* Schrift auf Orange (O6 offen)             */
  --c-logo-grau: #595051;       /* Logo-Grau                                 */

  /* Text und Flächen */
  --c-grund: #ffffff;           /* App: Screen Fill White                    */
  --c-flaeche: #f7f5f4;         /* abgesetzte Flächen                        */
  --c-tinte: #1f1b1c;           /* Haupttext                                 */
  --c-tinte-weich: #595051;     /* Sekundärtext = Logo-Grau                  */
  --c-link: #995300;            /* Links auf Weiß                            */
  --c-linie: #d9d3d1;           /* Rahmen und Trennlinien                    */
  --c-linie-kraeftig: #8f8586;  /* Eingabefelder                             */

  /* Zustände */
  --c-gesperrt: #f4f4f4;        /* App: DisabledFill                         */
  --c-gesperrt-text: #6e6765;   /* T-075 O6 (App: #a6a6a6, DisabledColor)    */
  --c-fehler: #a80000;          /* Dunkelrot (App: Pflichtsterne, Fehler)    */
  --c-fehler-grund: #fde8e8;
  --c-erfolg: #1e6b34;
  --c-erfolg-grund: #e7f4ea;

  /* Schrift: Segoe UI zuerst (Theme MTL1), nichts wird nachgeladen */
  --schrift: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --fs-titel: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-h2: 1.25rem;
  --fs-text: 1rem;
  --fs-klein: 0.875rem;
  --fs-kachel: 1.125rem;        /* App: 15 pt halbfett                       */

  /* Abstände */
  --ab-2xs: 0.25rem;
  --ab-xs: 0.5rem;
  --ab-s: 0.75rem;
  --ab-m: 1.25rem;
  --ab-l: 2rem;
  --ab-xl: 3rem;

  /* Formen */
  --radius: 10px;               /* App: RadiusTopLeft … = 10                 */
  --radius-klein: 4px;
  --schatten: 0 1px 2px rgba(31, 27, 28, 0.08), 0 2px 8px rgba(31, 27, 28, 0.06);

  /* Layout: Desktop ist die Hauptbreite (Büro), das Handy die zweite */
  --breite: 72rem;              /* Inhalt                                   */
  --breite-schmal: 30rem;       /* Anmeldung, Passwort, Bestätigung, Fehler */
  --breite-formular: 46rem;     /* jedes Formular (MO-11, wie Stammdaten)   */
  --rand: 1.5rem;
}

@media (max-width: 40rem) {
  :root {
    --rand: 1rem;
  }
}

/* -------------------------------------------------------------------------
   2. Grundlagen
   ------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--c-grund);
  color: var(--c-tinte);
  font-family: var(--schrift);
  font-size: var(--fs-text);
  line-height: 1.5;
  /* T-075 O1 (Julius 02.11.: „abgeschnitten ist generell nicht gut"): Ein
     Wort, das länger ist als seine Zeile (Anmelde-E-Mail, langer Name),
     bricht um, statt über den Rand zu laufen. */
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 var(--ab-s);
}

p {
  margin: 0 0 var(--ab-m);
}

a {
  color: var(--c-link);
  text-underline-offset: 2px;
}

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

/* T-097 G1 (Prüfwelle 09.11., WCAG 2.4.7 und 2.4.11): eine Stufe über der
   Kopfleiste (z-index 10), die später im DOM steht und den Link sonst
   vollständig verdeckte — der erste Tab-Halt jeder Seite war unsichtbar. */
.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 11;
  padding: var(--ab-xs) var(--ab-m);
  background: var(--c-grund);
  color: var(--c-tinte);
}

.sprunglink:focus {
  left: var(--ab-xs);
  top: var(--ab-xs);
}

.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   3. Kopfleiste (T-068): Startseite und Zurück links, Titel mittig,
      Profilknopf rechts
   ------------------------------------------------------------------------- */

/* T-068: eine flache Leiste in drei Zonen. Links und rechts gleich breit
   (flex 1 1 0), damit der Titel in der Mitte steht.
   T-074 A6-N1 (Julius 02.11.: „der Streifen oben ist mittlerweile zu
   schmal"; Optikbericht 2.3): 60 px am PC, 56 px am Handy, Linie 4 px wie
   vor T-068, alle Tippflächen 44 px (HA-6), Titel in h2-Größe.
   T-075 O1 (J1, „abgeschnitten ist generell nicht gut"): Der Titel bricht
   um, statt mit „…" zu enden; die Leiste wächst mit ihm (Mindesthöhe
   bleibt), oben und unten mit etwas Luft.
   T-075 O2 (J2 a): Logo und „Zurück" stehen über der linken, das Profil
   über der rechten Kante des Inhalts (.inhalt: --breite, mittig, --rand),
   nicht an den Fensterrändern; am Handy unverändert (unten). */
.kopfleiste {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--ab-s);
  min-height: 3.75rem;
  padding: var(--ab-2xs) max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
  border-bottom: 4px solid var(--c-orange);
  background: var(--c-grund);
}

.kopfleiste__links,
.kopfleiste__rechts {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: var(--ab-xs);
  min-width: max-content;
}

.kopfleiste__rechts {
  justify-content: flex-end;
}

.kopfleiste__mitte {
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
}

.kopfleiste .titel {
  margin: 0;
  font-size: var(--fs-h2);
  /* 1,2 statt 1,3: zwei Zeilen passen in die Mindesthöhe (PC 60, Handy 56). */
  line-height: 1.2;
  /* T-075 O1: ganz zeigen — Zeilen ausgeglichen, ein langes Wort mit
     Trennstrich nach den Silben (lang="de"; Nachzug), eine Zeichenkette
     ohne Trennstelle notfalls im Wort (overflow-wrap). */
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-wrap: balance;
}

/* T-075 Nachzug: Steht eine Anmelde-E-Mail im Titel („Zugang von ‹Adresse›"),
   kein Trennstrich — er sähe aus wie ein Teil der Adresse. */
.kopfleiste .titel--adresse {
  -webkit-hyphens: manual;
  hyphens: manual;
}

.kopfleiste__weg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 2.75rem;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--c-tinte);
  font-size: var(--fs-text);
  font-weight: 600;
  text-decoration: none;
}

.kopfleiste__weg:hover {
  background: var(--c-flaeche);
}

.kopfleiste__logo {
  display: block;
  width: auto;
  height: 36px;
}

/* Das „‹" sitzt bei line-height 1 sonst zu tief. */
.kopfleiste__pfeil {
  margin-top: -0.2em;
  font-size: 1.75rem;
  line-height: 1;
}

/* T-080: das Symbol des Links „Agenda" (eine Folie) zeigt sich nur am Handy;
   am PC steht dort leise das Wort, wie die Wege links. */
.kopfleiste__symbol {
  display: none;
}

/* Der Profilknopf: ein Kreis mit den Initialen, das Menü klappt ohne
   JavaScript auf (details/summary) und liegt rechtsbündig unter der Leiste. */
.profil {
  position: relative;
}

.profil__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  list-style: none;
}

.profil__knopf::-webkit-details-marker {
  display: none;
}

.profil__kreis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c-orange);
  color: var(--c-auf-orange);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.profil[open] .profil__kreis,
.profil__knopf:hover .profil__kreis {
  background: var(--c-orange-hover);
}

.profil__menue {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 15rem;
  max-width: calc(100vw - 2 * var(--rand));
  padding: var(--ab-xs) 0;
  border: 1px solid var(--c-linie);
  border-radius: 10px;
  background: var(--c-grund);
  box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
}

.profil__name {
  margin: 0;
  padding: var(--ab-s) var(--ab-m) 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.profil__rolle {
  margin: 0 0 var(--ab-xs);
  padding: 0 var(--ab-m) var(--ab-s);
  border-bottom: 1px solid var(--c-linie);
  color: var(--c-tinte-weich);
  font-size: var(--fs-klein);
}

.profil__eintrag {
  display: block;
  width: 100%;
  padding: 10px var(--ab-m);
  border: 0;
  background: none;
  color: var(--c-tinte);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.profil__eintrag:hover,
.profil__eintrag:focus-visible {
  background: var(--c-flaeche);
}

.profil__abmelden {
  margin: 0;
}

/* Am Handy: nur die Symbole links; 56 px hoch, „‹ Zurück" und
   „Startseite" je mindestens 44 × 44 px (T-074 A6-N1). Ein langer Titel
   bricht um, die Leiste wächst mit (T-075 O1). Rechts steht für Admins im
   Testbetrieb das Symbol der Agenda, ebenso 44 × 44 px (T-080).
   T-103 Z1 (gefunden von D in T-102; Orchestrator 09.11.2026: „Texte dürfen
   nie mitten im Wort brechen oder abgeschnitten werden“): Der Titel steht
   am Handy in einer eigenen Zeile unter den Symbolen, über die ganze
   Breite. Zwischen Logo und „‹“ links und Agenda und Profil rechts blieben
   ihm bei 320 px nur 88 px, bei 375 px 143 px — weniger als „Zeitbuchung“
   (107 px) oder „Änderungsprotokoll“ (171 px). Silbentrennung hilft nicht
   überall (Chrome unter Windows trennt Deutsch nicht, gemessen), also brach
   `overflow-wrap: anywhere` mitten im Wort („Zeitbuchu / ng“). In der
   eigenen Zeile hat der Titel bei 320 px 304 px; `anywhere` bleibt der
   Notbehelf für eine Zeichenkette, die länger ist als die ganze Zeile. */
@media (max-width: 40rem) {
  .kopfleiste {
    flex-wrap: wrap;
    gap: 0 var(--ab-2xs);
    min-height: 3.5rem;
    padding: var(--ab-2xs) var(--ab-xs);
  }

  .kopfleiste__mitte {
    order: 1;
    flex: 1 0 100%;
    padding-bottom: var(--ab-2xs);
  }

  .kopfleiste__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .kopfleiste__weg {
    justify-content: center;
    min-width: 2.75rem;
    padding: 0 var(--ab-2xs);
  }

  .kopfleiste__logo {
    height: 32px;
  }

  .kopfleiste__symbol {
    display: block;
  }

  .kopfleiste .titel {
    font-size: var(--fs-kachel);
  }
}

/* T-074 A1: Der Hinweis „heute noch nicht erfasst" ist ein Streifen unter
   der Kopfleiste, auf jeder Seite an derselben Stelle; die Schrift beginnt
   bündig mit dem Inhalt. */
.rahmenhinweis {
  border-bottom: 1px solid var(--c-linie);
  background: var(--c-orange-hell);
}

.rahmenhinweis__text {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--ab-xs) var(--rand);
}

/* -------------------------------------------------------------------------
   4. Inhalt, Karten, Überschriften
   ------------------------------------------------------------------------- */

.inhalt {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--ab-l) var(--rand) var(--ab-xl);
}

.inhalt:focus {
  outline: none;
}

.titel {
  font-size: var(--fs-titel);
}

.untertitel {
  font-size: var(--fs-h2);
  margin-top: var(--ab-l);
}

.karte {
  padding: var(--ab-l);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius);
  background: var(--c-grund);
  box-shadow: var(--schatten);
}

.karte--schmal {
  max-width: var(--breite-schmal);
  margin: 0 auto;
}

/* MO-11: eine Breite für alle Formulare (`--breite-formular`); die schmale
   Karte bleibt für Anmeldung, Passwort, Bestätigung und Fehler. */
.karte--formular {
  max-width: var(--breite-formular);
  margin: 0 auto;
}

.karte > :last-child {
  margin-bottom: 0;
}

/* T-075 O3 (J3 b): Logo 64 px hoch oben in der Anmeldekarte, mittig. */
.karte__logo {
  display: block;
  width: auto;
  height: 64px;
  margin: 0 auto var(--ab-m);
}

@media (max-width: 40rem) {
  .karte {
    padding: var(--ab-m);
  }
}

.leise {
  color: var(--c-tinte-weich);
  font-size: var(--fs-klein);
}

.zurueck {
  display: inline-block;
  margin-bottom: var(--ab-m);
}

/* -------------------------------------------------------------------------
   5. Knöpfe: Orange wie die Kacheln der App, Radius 10, halbfett.
      MO-2: Rot (`knopf--gefahr`) nur für Löschen, weil es nicht umkehrbar
      ist; Stornieren, Sperren und Zurücksetzen bleiben orange
      (`view::bestaetigung::Tat`). MN-10: am Handy füllen die Knöpfe einer
      Knopfreihe die Breite (unten).
   ------------------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;          /* Fingerbreite am Handy */
  padding: var(--ab-xs) var(--ab-m);
  text-align: center;           /* T-074 A6: auch eine umbrochene Beschriftung mittig */
  border: 2px solid var(--c-orange);
  border-radius: var(--radius);
  background: var(--c-orange);
  color: var(--c-auf-orange);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.knopf:hover {
  border-color: var(--c-orange-hover);
  background: var(--c-orange-hover);
  color: var(--c-auf-orange);
}

.knopf:active {
  border-color: var(--c-orange-tief);
  background: var(--c-orange-tief);
  color: var(--c-grund);
}

.knopf--leise {
  min-height: 2.25rem;
  padding: var(--ab-2xs) var(--ab-s);
  background: var(--c-grund);
  color: var(--c-tinte);
}

.knopf--leise:hover {
  background: var(--c-orange-hell);
  color: var(--c-tinte);
}

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-s);
  align-items: center;
}

.knopf--gefahr,
.knopf--gefahr:hover {
  border-color: var(--c-fehler);
  background: var(--c-fehler);
  color: var(--c-grund);
}

/* MN-10, Masken-Schema HA-5: Am Handy stehen die Knöpfe einer Knopfreihe
   untereinander und füllen die Breite (Speichern, Tat der Bestätigung,
   „+ Neu…" der Ich-Sichten, Stempel-Knöpfe); ein Link wie „Abbrechen"
   steht mittig darunter. Ausgenommen sind die Reihe im Seitenkopf der
   Listen („+", Umschalter) und Reihen in Tabellenzeilen. */
@media (max-width: 40rem) {
  .knopf-reihe:not(.seitenkopf .knopf-reihe):not(td .knopf-reihe) {
    flex-direction: column;
    align-items: stretch;
  }

  .knopf-reihe:not(.seitenkopf .knopf-reihe):not(td .knopf-reihe) > *,
  .knopf-reihe:not(.seitenkopf .knopf-reihe):not(td .knopf-reihe) > form > .knopf {
    width: 100%;
  }

  /* T-074 A6-N5 (Optikbericht B7): „Abbrechen" ist eine Tippfläche von
     44 px Höhe (HA-6), nicht nur die Textzeile. */
  .knopf-reihe:not(.seitenkopf .knopf-reihe):not(td .knopf-reihe) > a:not(.knopf) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0;
  }
}

/* -------------------------------------------------------------------------
   6. Kacheln: zwei Spalten, mittig (Grundform, etwa im HTML der Agenda);
      Startseite (T-075 O4) und Einstellungen (T-097 G6) stellen sie im
      Raster der Gruppen über die Inhaltsbreite (`kacheln--gruppe`, unten)
   ------------------------------------------------------------------------- */

.kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ab-s) var(--ab-m);
  max-width: 42rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.kachel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: var(--ab-xs) var(--ab-s);
  border: 2px solid var(--c-orange);
  border-radius: var(--radius);
  background: var(--c-orange);
  color: var(--c-auf-orange);
  font-size: var(--fs-kachel);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.kachel:hover {
  border-color: var(--c-orange-hover);
  background: var(--c-orange-hover);
  color: var(--c-auf-orange);
}

.kachel:active {
  border-color: var(--c-orange-tief);
  background: var(--c-orange-tief);
  color: var(--c-grund);
}

/* T-075 O6: Die Schrift ist dunkler (5,0 : 1); der Rahmen in --c-linie
   zeigt die Form der Kachel, die Fläche bleibt grau. */
.kachel--gesperrt,
.kachel--gesperrt:hover {
  border-color: var(--c-linie);
  background: var(--c-gesperrt);
  color: var(--c-gesperrt-text);
  cursor: default;
}

/* T-075 O4 (J4 b; Vincenzo G7 00:36:54: „dass es alles in der Mitte ist"):
   Die Startseite zeigt die Kacheln in Gruppen, linksbündig über die
   Inhaltsbreite — am PC so viele Spalten, wie 12 rem breite Kacheln
   passen, am Handy zwei je Gruppe. Die Überschrift einer Gruppe ist klein
   und grau, die Kacheln bleiben das Auffällige. */
.startgruppe + .startgruppe {
  margin-top: var(--ab-l);
}

.startgruppe__titel {
  margin: 0 0 var(--ab-s);
  color: var(--c-tinte-weich);
  font-size: var(--fs-text);
}

.kacheln--gruppe {
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  max-width: none;
  margin: 0;
}

@media (max-width: 40rem) {
  .kacheln--gruppe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 22.5rem) {
  .kacheln {
    gap: var(--ab-xs);
  }

  .kachel {
    font-size: var(--fs-text);
  }
}

/* -------------------------------------------------------------------------
   7. Hinweise und Meldungen
   ------------------------------------------------------------------------- */

/* T-074 A6-N2 (Optikbericht B4): Rückmeldung und Hinweis gehören zum Inhalt
   (RA-7) und stehen bündig mit ihm, nicht mittig neben Liste oder
   Formular. */
.hinweis,
.meldung {
  max-width: 42rem;
  margin: 0 0 var(--ab-l);
  padding: var(--ab-s) var(--ab-m);
  border-left: 4px solid var(--c-orange);
  border-radius: var(--radius-klein);
  background: var(--c-orange-hell);
}

/* In Bereichsspalten sorgt der Spaltenabstand für Luft. */
.bereich__spalte > :is(.hinweis, .meldung) {
  margin-bottom: 0;
}

.meldung--erfolg {
  border-left-color: var(--c-erfolg);
  background: var(--c-erfolg-grund);
}

.meldung--fehler {
  border-left-color: var(--c-fehler);
  background: var(--c-fehler-grund);
}

.karte .meldung,
.karte .hinweis {
  margin: 0 0 var(--ab-m);
}

/* Ein Hinweis mit Aufzählung (Nutzerverwaltung „Noch ohne Zugang",
   T-074 A4). */
.hinweis__satz {
  margin: 0;
}

.hinweis__liste {
  margin: var(--ab-2xs) 0 0;
  padding-left: var(--ab-m);
}

/* -------------------------------------------------------------------------
   8. Formulare: Beschriftung über dem Feld (wie die DataCards der App).
      MO-12: Ja/Nein ist überall ein Ankreuzfeld mit der Beschriftung
      rechts, Bauart `feld__ja` (Abschnitt 13). Pflichtfelder tragen
      `feld__pflicht`.
   ------------------------------------------------------------------------- */

.formular {
  display: grid;
  gap: var(--ab-m);
}

.feld {
  display: grid;
  gap: var(--ab-2xs);
}

.feld__label {
  font-weight: 600;
}

.feld__pflicht {
  color: var(--c-fehler);
}

.feld__eingabe {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--ab-xs) var(--ab-s);
  border: 1px solid var(--c-linie-kraeftig);
  border-radius: var(--radius-klein);
  background: var(--c-grund);
  color: var(--c-tinte);
  font: inherit;
}

.feld__eingabe:focus {
  border-color: var(--c-orange-tief);
}

/* T-091 (Julius 07.11.2026, J-36; Masken-Schema EL-4): Ein Klick irgendwo
   auf ein Datumsfeld öffnet den Kalender, ein Symbol ist nicht zu sehen —
   der Kalender-Indikator liegt unsichtbar über der ganzen Fläche. Chromium
   und Edge; Firefox und Safari kennen das Pseudo-Element nicht und behalten
   ihr gewohntes Verhalten. Die Tastatur tippt weiter wie bisher. */
input[type="date"] {
  position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

/* T-091 (J-36, EL-4): Eine Uhrzeit sind zwei Auswahlen — Stunde und Minute —
   mit festem Doppelpunkt, ohne Uhrsymbol (Makro `uhrzeit.html`). Jede
   Auswahl ist so breit wie „00“ und ihr Pfeil, der Doppelpunkt steht fest
   dazwischen; so passt die Uhrzeit des Endes am Handy (375 px) neben ihr
   Datum. */
.uhrzeit {
  display: flex;
  align-items: center;
  gap: var(--ab-2xs);
}

.uhrzeit__wahl {
  width: auto;
  min-width: 4rem;
  font-size: var(--fs-text);
}

.uhrzeit__doppelpunkt {
  color: var(--c-tinte);
  font-size: var(--fs-text);
  font-weight: 600;
}

.feld__hilfe {
  color: var(--c-tinte-weich);
  font-size: var(--fs-klein);
}

.feld__fehler {
  color: var(--c-fehler);
  font-size: var(--fs-klein);
  font-weight: 600;
}

/* Filterzeile (Änderungsprotokoll): Felder nebeneinander, am Handy
   untereinander; Hilfe und Knöpfe über die ganze Breite. */
.filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--ab-s) var(--ab-m);
  align-items: start;
  margin-bottom: var(--ab-l);
}

.filter > .feld__hilfe,
.filter > .knopf-reihe {
  grid-column: 1 / -1;
  margin: 0;
}

/* T-097 B10: Mit Skript und ohne gesetzten Filter ist die Knopfreihe leer —
   „Filtern“ steht nur in <noscript> (dessen Inhalt mit Skript kein Element
   ist), „Filter zurücksetzen“ nur bei Filter; dann nimmt sie keinen Platz. */
.filter > .knopf-reihe:not(:has(a, button)) {
  display: none;
}

/* -------------------------------------------------------------------------
   9. Tabellen (Nutzerverwaltung, Protokoll): am Handy je Zeile eine Karte
   ------------------------------------------------------------------------- */

.tabelle {
  width: 100%;
  border-collapse: collapse;
}

/* T-074 A6-B3 (Optikbericht B3): Eine breite Tabelle (Änderungsprotokoll,
   sechs Spalten) rollt in ihrem eigenen Rahmen, nie die ganze Seite; am
   Handy werden ihre Zeilen ohnehin Karten. */
.tabelle-rahmen {
  overflow-x: auto;
}

.tabelle th,
.tabelle td {
  padding: var(--ab-xs) var(--ab-s);
  border-bottom: 1px solid var(--c-linie);
  text-align: left;
  vertical-align: top;
}

.tabelle th {
  background: var(--c-flaeche);
  font-size: var(--fs-klein);
}

/* T-098b (E, 09.11.2026: /nutzer rollte bei 641 px um 42 px seitlich): Eine
   Anmelde-E-Mail hat keine Trennstelle, `overflow-wrap: break-word` (body)
   zählt bei der Mindestbreite einer Tabelle nicht mit. So bestimmte die
   längste Adresse die Breite ihrer Spalte, und knapp über der Kartenform
   (641 bis etwa 760 px) wurde die Tabelle breiter als die Seite. Die
   Adresse bricht in ihrer Zelle um (EL-18: Umbruch statt Kürzung), die
   übrigen Spalten behalten ihre Wörter. */
.tabelle__adresse {
  overflow-wrap: anywhere;
}

.marke {
  display: inline-block;
  padding: 0 var(--ab-xs);
  border-radius: var(--radius-klein);
  background: var(--c-flaeche);
  font-size: var(--fs-klein);
  white-space: nowrap;
}

.marke--gesperrt {
  background: var(--c-fehler-grund);
  color: var(--c-fehler);
}

.marke--offen {
  background: var(--c-orange-hell);
}

/* Hinweise unter einem Zellwert (Nutzerverwaltung) und die Feldänderungen
   einer Protokollzeile. */
.tabelle__hinweis {
  display: block;
  color: var(--c-tinte-weich);
  font-size: var(--fs-klein);
}

.tabelle__hinweis--warnung {
  color: var(--c-fehler);
  font-weight: 600;
}

/* T-097 G10 (HA-6, Prüfwelle 09.11.): Am Handy ist der Link der Spalte
   „Eintrag“ im Änderungsprotokoll (filtert auf den Eintrag; vorher 24 px
   hoch) eine 44 px hohe Tippfläche; der negative Rand hält die Karte gleich
   hoch. */
@media (max-width: 40rem) {
  #protokoll-liste td a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-block: -0.625rem;
  }
}

/* T-075 O1: Ein langer Wert in einer Änderung (Anmelde-E-Mail) bricht im
   Wort um, statt die Tabelle zu verbreitern. */
.aenderungen {
  overflow-wrap: anywhere;
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--fs-klein);
}

@media (max-width: 40rem) {
  /* T-075 O1: In der Handykarte bricht ein langer Wert (Anmelde-E-Mail in
     den Änderungen) um, statt die Seite seitlich rollen zu lassen. */
  .tabelle td {
    overflow-wrap: anywhere;
  }

  .tabelle thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .tabelle,
  .tabelle tbody,
  .tabelle tr,
  .tabelle td {
    display: block;
    width: 100%;
  }

  .tabelle tr {
    margin-bottom: var(--ab-s);
    border: 1px solid var(--c-linie);
    border-radius: var(--radius);
  }

  .tabelle td {
    display: flex;
    justify-content: space-between;
    gap: var(--ab-s);
  }

  .tabelle td:last-child {
    border-bottom: none;
  }

  /* T-084 D1 (Optik Auftrag B4, N3): Die Beschriftung bricht nie im Wort
     („Bezei/chnu/ng“); sie behält ihre Breite, der Wert daneben bricht um. */
  .tabelle td::before {
    content: attr(data-label);
    flex: none;
    color: var(--c-tinte-weich);
    font-size: var(--fs-klein);
  }
}

/* T-098 (B1; J-32, J-46, MS-2.11): Ganze Zeile und ganze Karte öffnen
   ihren Eintrag — der Vertrag der Liste der Aufträge (T-088 gestreckter
   Link, T-093 `data-ganz`), hier allgemein für jede Liste außer dem
   Protokoll: Stammdaten-Tabellen, Adress- und Kontaktkarten, Personal,
   Nutzerverwaltung. Das Element (Zeile, Karte) trägt `ganz` und
   `data-ganz`, sein einer Link `ganz__ziel` und `data-ganz-ziel`.

   Ohne Skript deckt der Link mit seinem ::after das ganze Element; ein
   anderes Bedienelement darin (Stift, E-Mail, Telefon) liegt darüber.
   Beim Überfahren hebt sich das Element hervor, der Fokus des Links steht
   als Rahmen um das Element. Mit Skript (static/js/hilfen.js) fängt der
   Link keine Mausereignisse mehr, sein Text lässt sich markieren, den
   Klick übernimmt das Skript (Strg- und Mittelklick: neuer Tab) — die
   Regel dafür gilt für jedes `data-ganz` (T-093 S2, T-094 M1, weiter
   unten). */
.ganz {
  position: relative;
}

.ganz__ziel::after {
  content: "";
  position: absolute;
  inset: 0;
}

li.ganz .ganz__ziel::after {
  border-radius: var(--radius);
}

.ganz a:not(.ganz__ziel),
.ganz button {
  position: relative;
  z-index: 1;
}

.ganz__ziel:focus-visible {
  outline: none;
}

.ganz__ziel:focus-visible::after {
  outline: 3px solid var(--c-orange-tief);
  outline-offset: -3px;
}

tr.ganz:has(.ganz__ziel:hover) > td {
  background: var(--c-orange-hell);
}

li.ganz:has(.ganz__ziel:hover) {
  border-color: var(--c-orange);
  background: var(--c-orange-hell);
}

/* Rückfall wie in der Liste der Aufträge: Ist eine Tabellenzeile trotz
   position: relative kein Bezugsrahmen (ältere Engines), begrenzt
   clip-path die Fläche jedes Links auf seine Zeile. Am Handy sind die
   Zeilen Karten (Blöcke), dort braucht es ihn nicht. */
@media (min-width: 40.0625rem) {
  tr.ganz {
    clip-path: inset(0);
  }
}

.mit-skript tr.ganz[data-ganz]:hover:not(:has(a:not([data-ganz-ziel]):hover, button:hover)) > td {
  background: var(--c-orange-hell);
}

.mit-skript li.ganz[data-ganz]:hover:not(:has(a:not([data-ganz-ziel]):hover, button:hover)) {
  border-color: var(--c-orange);
  background: var(--c-orange-hell);
}

/* Am Handy ist jede Tabellenzeile eine Karte: Ihr Rand hebt sich hervor,
   die Zellen bleiben durchsichtig (wie die Liste der Aufträge). */
@media (max-width: 40rem) {
  tr.ganz:has(.ganz__ziel:hover),
  .mit-skript tr.ganz[data-ganz]:hover:not(:has(a:not([data-ganz-ziel]):hover, button:hover)) {
    border-color: var(--c-orange);
    background: var(--c-orange-hell);
  }

  tr.ganz:has(.ganz__ziel:hover) > td,
  .mit-skript tr.ganz[data-ganz]:hover > td {
    background: none;
  }

  tr.ganz .ganz__ziel::after {
    border-radius: var(--radius);
  }

  .ganz__ziel:focus-visible::after {
    outline-offset: 0;
  }
}

/* -------------------------------------------------------------------------
   10. Angaben (Detailseiten): Bezeichnung über dem Wert
   ------------------------------------------------------------------------- */

/* T-074 A6-N3 (Optikbericht B5): auto-fill statt auto-fit — eine Gruppe mit
   wenigen Angaben (Bankdaten) streckt ihre Spalten nicht, alle Gruppen
   stehen im selben Raster. */
.angaben {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--ab-s) var(--ab-l);
  margin: 0 0 var(--ab-l);
}

.angaben dt {
  color: var(--c-tinte-weich);
  font-size: var(--fs-klein);
}

.angaben dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   10a. Personal und Zeit (T-055): Ich-Sicht Zeiterfassung, Gleitzeitkonto,
        Zeitbuchungs-Formular, Personal-Liste und Mitarbeiter-Formular.
        Am Handy stehen Konto und Stempel-Knöpfe oben (BA A5).
   ------------------------------------------------------------------------- */

.meldung--breit,
.hinweis--breit {
  max-width: none;
  margin: 0 0 var(--ab-m);
}

.zeit-hinweise {
  list-style: none;
}

.zeit-hinweise li + li {
  margin-top: var(--ab-2xs);
}

/* T-074 C2: „Du bist … krankgemeldet" mit der Tat „Ab heute wieder gesund"
   daneben, am Handy darunter. */
.zeit-krank {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ab-s) var(--ab-m);
}

.zeit-krank__text,
.zeit-krank__gesund {
  margin: 0;
}

.zeit-kopf {
  display: grid;
  grid-template-columns: minmax(14rem, 20rem) 1fr;
  gap: var(--ab-m);
  align-items: start;
  margin-bottom: var(--ab-l);
}

@media (max-width: 40rem) {
  .zeit-kopf {
    grid-template-columns: 1fr;
  }
}

.konto {
  padding: var(--ab-s) var(--ab-m);
  border: 1px solid var(--c-linie);
  border-left: 6px solid var(--c-tinte-weich);
  border-radius: var(--radius);
  background: var(--c-grund);
  box-shadow: var(--schatten);
}

.konto > * {
  margin: 0;
}

.konto__titel {
  font-size: var(--fs-klein);
  font-weight: 600;
  color: var(--c-tinte-weich);
}

.konto__zahl {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.konto__hinweis {
  font-size: var(--fs-klein);
}

.konto__warnung {
  margin-top: var(--ab-2xs);
  color: var(--c-fehler);
  font-size: var(--fs-klein);
  font-weight: 600;
}

.konto--grau .konto__zahl {
  color: var(--c-tinte-weich);
}

.konto--orange {
  border-left-color: var(--c-orange);
}

.konto--orange .konto__zahl {
  color: var(--c-orange-tief);
}

.konto--rot {
  border-left-color: var(--c-fehler);
}

.konto--rot .konto__zahl {
  color: var(--c-fehler);
}

.zeit-stempel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-s);
  align-items: flex-end;
}

.zeit-stempel__form {
  margin: 0;
}

/* T-074 A6-N9 (Funktionsprüfung, Beobachtung 7): die Haupttat zuerst.
   Seit T-102 M7 (Prüfer M 09.11.2026) steht die Reihenfolge im Template —
   Ausstempeln, Einstempeln, Dienstreise —, damit Tab- und Vorlesereihenfolge
   der sichtbaren folgen; hier wird nichts mehr umgestellt. */
.zeit-stempel__knopf {
  min-height: 3rem;
}

.zeit-ausstempeln {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-xs) var(--ab-s);
  align-items: flex-end;
}

.zeit-ausstempeln__pause .feld__eingabe {
  width: 6rem;
}

/* T-102 M1: der Satz, welche Buchung offen ist — Kopf des Blocks, vor Feld
   und Knopf, über die ganze Breite. */
.zeit-ausstempeln__offen {
  flex-basis: 100%;
  margin: 0;
  font-weight: 600;
}

.zeit-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-linie);
}

.zeit-zeile {
  padding: var(--ab-s) 0;
  border-bottom: 1px solid var(--c-linie);
}

.zeit-zeile > p {
  margin: var(--ab-2xs) 0 0;
}

.zeit-zeile__kopf {
  display: flex;
  justify-content: space-between;
  gap: var(--ab-s);
}

.zeit-zeile__werte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-2xs) var(--ab-m);
}

.zeit-zeile__auffaellig {
  color: var(--c-orange-tief);
  font-size: var(--fs-klein);
  font-weight: 600;
}

.zeit-zeile__nachtrag,
.zeit-zeile__abwesend {
  font-size: var(--fs-klein);
}

.nachtrag--grau {
  color: var(--c-tinte-weich);
}

.nachtrag--rot {
  color: var(--c-fehler);
  font-weight: 600;
}

.nachtrag--gruen {
  color: var(--c-erfolg);
  font-weight: 600;
}

.zeit-zeile__abwesend {
  color: var(--c-tinte-weich);
  font-style: italic;
}

/* T-102 M3 (R1.9): ein Soll-Tag ohne Buchung an seiner Stelle in der Liste
   — der Satz in der Farbe der Auffälligkeiten, der Weg „Nachtragen" wie
   „Bearbeiten". */
.zeit-zeile__luecke {
  color: var(--c-orange-tief);
  font-size: var(--fs-klein);
  font-weight: 600;
}

/* T-102 M11: eine eingereichte Buchung zum Ansehen — die Werte als Text,
   die Beschriftung leise darüber. */
.zeit-ansicht {
  display: grid;
  gap: var(--ab-s);
  margin: 0 0 var(--ab-m);
}

.zeit-ansicht__zeile {
  display: grid;
  gap: var(--ab-2xs);
}

.zeit-ansicht dt {
  color: var(--c-tinte-weich);
  font-size: var(--fs-klein);
}

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

/* T-102 M9 (Prüfer M 09.11.2026; HA-6), Z1 und T-102b: die Wege in den
   Hinweisen der Zeiterfassung und der Startseite und der Weg in einer
   Sperre der Zeitbuchung („Zur Buchung vom …“) sind am Handy 44 px hohe
   Tippflächen; der negative Rand hält den Hinweis gleich hoch. */
@media (max-width: 40rem) {
  #start-ende-fehlt-nachtragen,
  #zeit-sperre-weg,
  #zeit-vortag-offen-oeffnen,
  [id^="zeit-ende-fehlt-"][id$="-nachtragen"],
  #zeit-hinweise-oeffnen,
  #zeit-konto-luecke {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-block: -0.625rem;
  }
}

.karte--formular .hinweis,
.karte--formular .meldung,
.formularseite > .hinweis,
.formularseite > .meldung {
  max-width: none;
  margin: 0 0 var(--ab-m);
}

.zeit-formular__felder {
  display: grid;
  gap: var(--ab-m);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.zeit-formular__zeiten {
  display: grid;
  gap: var(--ab-m);
}

/* Bei Dienstreise entfallen Start, Ende und Pause (R5.2) — nur Anzeige, der
   Server ignoriert sie ohnehin. */
.zeit-formular:has(#zeit-dienstreise:checked) .zeit-formular__zeiten {
  display: none;
}

.zeit-formular__ende {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* T-102 M14 (Prüfer M 09.11.2026; HA-4): Datum und Uhrzeit des Endes
   nebeneinander, solange beide 9 rem bekommen — bei 320 px überlappten
   sie, darunter stehen sie untereinander. */
.zeit-formular__ende-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--ab-s);
}

.zeit-formular__teil {
  display: grid;
  gap: var(--ab-2xs);
  font-size: var(--fs-klein);
  color: var(--c-tinte-weich);
}

/* T-091 (J-36: „Dann sehe ich, was dasteht klar“): Datum und Uhrzeit des
   Endes stehen in derselben Schrift wie Start und Datum; nur die
   Beschriftung darüber bleibt klein. */
.zeit-formular__teil .feld__eingabe {
  font-size: var(--fs-text);
}

.zeit-formular__pause {
  max-width: 8rem;
}

.feld__hilfe--hinweis {
  padding: var(--ab-2xs) var(--ab-xs);
  border-left: 3px solid var(--c-orange);
  background: var(--c-orange-hell);
  color: var(--c-tinte);
}

/* Personal-Liste (ScreenPersonal): Suche (seit T-098 die Suchleiste der
   Listen mit „+“), je Mitarbeiter eine Zeile mit Foto bzw. Initialen, Name
   fett als Verweis (kein Stift, MO-4), Funktion und Abteilung; die ganze
   Zeile öffnet den Mitarbeiter (T-098 B1, `ganz`). */
.personal-liste {
  display: grid;
  gap: var(--ab-xs);
  padding: 0;
  list-style: none;
}

.personal-zeile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ab-s);
  align-items: center;
  padding: var(--ab-s);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius);
  background: var(--c-grund);
}

.personal-zeile p {
  margin: 0;
}

.personal-zeile__foto {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--c-orange-hell);
  color: var(--c-orange-tief);
  font-weight: 700;
}

.personal-zeile__name {
  font-weight: 700;
}

.personal-zeile__funktion {
  color: var(--c-tinte-weich);
}

/* Mitarbeiter-Formular (ScreenMitarbeiterBearbeiten): Name dauerhaft oben,
   die acht Abschnitte als Reiter (T-069, Abschnitt 15), Felder in Spalten. */
.personal-kopf {
  margin-bottom: var(--ab-m);
}

.personal-kopf .titel {
  margin-bottom: 0;
}

.personal-kopf__name {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
}

.personal-formular {
  display: grid;
  gap: var(--ab-m);
}

.personal-abschnitt {
  scroll-margin-top: var(--ab-m);
}

.personal-felder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--ab-m);
  align-items: start;
}

.personal-feld--breit {
  grid-column: 1 / -1;
}

.personal-anzeige span:not(.feld__label):not(.feld__hilfe) {
  min-height: 2.75rem;
  padding: var(--ab-xs) 0;
}

/* R12.8: Anzahl Inklusiv-Stunden und Geldwerte Vorteile (welche) nur bei
   Ja — nur Anzeige, der Server leert sie bei Nein ohnehin. */
.personal-formular:has(#personal-inklusiv-stunden:not(:checked)) .personal-feld--inklusiv,
.personal-formular:has(#personal-geldwerte-vorteile:not(:checked)) .personal-feld--vorteile {
  display: none;
}

.personal-aktionen {
  position: sticky;
  bottom: 0;
  padding: var(--ab-s) 0;
  background: var(--c-grund);
  border-top: 1px solid var(--c-linie);
}

/* -------------------------------------------------------------------------
   11. Kleinteile: Seitenkopf mit Knopf, Spalten, Abstände
   ------------------------------------------------------------------------- */

/* T-068: Der Titel steht in der Kopfleiste; die Knöpfe bleiben rechts. */
.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ab-s) var(--ab-m);
  margin-bottom: var(--ab-m);
}

/* T-074 A6-N6 (Optikbericht B6): Ein Seitenkopf, in dem nur eine leere
   Knopfreihe steht (Kunde- und Lieferant-Ansicht, Leistungen: kein „+",
   kein Umschalter), schiebt den Inhalt nicht nach unten. Ein Seitenkopf mit
   anderem Inhalt bleibt — auch der mit der Zustandsmarke eines Zugangs
   (`#nutzer-status`), die die erste Fassung mit ausgeblendet hatte. */
.seitenkopf:not(:has(:not(.knopf-reihe))) {
  display: none;
}

.seitenkopf .titel {
  margin: 0;
}

/* T-097 G2 (J-48, MS-3.5): der geteilte Kopf einer Tafel mit Angaben —
   links die erste Überschrift, rechts die Tat („Bearbeiten“) in derselben
   Zeile; ist es zu eng, rutscht die Tat rechtsbündig darunter. Ein
   gemeinsamer Baustein: die Angaben der Stammdaten-Ansichten (Makro
   `angaben`) und die Reiter der Akte (Makro `tafel_inhalt`, MS-13.11; dort
   seit T-092 K6 mit eigenen Regeln derselben Maße, seit T-097 hier). */
.tafelkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ab-xs) var(--ab-s);
  margin-bottom: var(--ab-xs);
}

.tafelkopf__titel {
  margin: 0;
  font-size: var(--fs-text);
  font-weight: 700;
}

.tafelkopf__aktion {
  margin-left: auto;
}

/* T-074 A6-N12 (Optikbericht B26): auto-fill statt auto-fit — eine einzelne
   Karte (Urlaubs-Kopfkasten ohne Folgejahr) zieht sich nicht über die ganze
   Breite; mit Folgejahr stehen zwei nebeneinander. */
.spalten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--ab-m);
  align-items: start;
}

.untertitel--karte {
  margin-top: 0;
}

.abstand-oben {
  margin-top: var(--ab-m);
}

/* T-074 A6-N14 (Optikbericht 10.2, B27): als erstes Element im Inhalt
   (Krankmeldung: „+ Neue Krankmeldung") kein Zusatzabstand oben — der
   Inhalt beginnt dort wie auf jeder anderen Seite. */
.inhalt > .abstand-oben:first-child {
  margin-top: 0;
}

/* Alle Kacheln einer Zeile gleich hoch wie in ScreenHauptMenü: Jede Zeile
   ist so hoch wie die höchste Kachel (eine umbrochene Beschriftung), und
   jede Kachel füllt ihre Zelle. */
.kacheln {
  grid-auto-rows: 1fr;
}

.kacheln > li {
  display: flex;
}

.kacheln > li > .kachel {
  flex: 1;
}

/* -------------------------------------------------------------------------
   12. Urlaub und Krankmeldung (T-056): Kopfzeile im B5-Schema der App,
       Statusmarke „Genehmigt" (grün wie die App), Ergebnisfeld im Antrag
   ------------------------------------------------------------------------- */

.kopfzeile {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-kachel);
  line-height: 1.6;
}

/* „24.12. + 31.12.", „Beantragt", „Genehmigt" stehen eingerückt unter
   „Verplant" (in der App drei Leerzeichen). */
.kopfzeile__teil {
  padding-left: 1.5em;
}

/* Kopf der ersten Jahreskarte: links das Jahr, rechts der Name des
   Mitarbeiters — der Seitentitel ist nur der Bereich (T-073, MO-1). Die
   Jahresüberschriften beider Karten bleiben auf einer Höhe. */
.kopfzeile__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 var(--ab-s);
}

.kopfzeile__name {
  margin: 0;
}

/* Taten unter dem Formular „Krankmeldung ändern" (T-073, MS-4.7): jede Tat
   in einer eigenen Reihe, damit die Hilfe bei ihrem Knopf steht. */
.taten--stapel {
  display: grid;
  gap: var(--ab-s);
}

.marke--genehmigt {
  background: var(--c-erfolg-grund);
  color: var(--c-erfolg);
}

.feld__wert {
  display: block;
  font-size: var(--fs-kachel);
  font-weight: 600;
}

/* Am Handy wird jede Zeile der Antragsliste eine Karte; ohne Stift (nur bei
   Beantragt, R10) bliebe sonst eine leere Zeile stehen. Der Zeitraum bleibt
   rechts in der Flucht, der Vermerk „Gleitzeittag" steht davor (Review R3, U8). */
@media (max-width: 40rem) {
  #urlaub-liste td:empty {
    display: none;
  }

  #urlaub-liste td > strong { order: 1; }
}

/* T-074 A6-N13 (Optikbericht 10.2, B25): Zeilen-Links der Ich-Sichten
   („Bearbeiten", „Ändern") und Ja/Nein-Haken sind am Handy 44 px hohe
   Tippflächen (HA-6, HA-9); der negative Rand hält die Zeile gleich hoch. */
@media (max-width: 40rem) {
  .zeit-zeile__bearbeiten,
  #urlaub-liste td a,
  #krank-liste td a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-block: -0.625rem;
  }

  .feld__ja {
    min-height: 2.75rem;
  }
}

/* -------------------------------------------------------------------------
   13. Stammdaten (T-054): Listen mit Suche, Karten, Formulare
   ------------------------------------------------------------------------- */

/* Bereiche: eine Spalte oder Master-Detail (zwei Spalten, am Handy
   untereinander, BA Abschnitt 10). */
.bereich {
  display: grid;
  gap: var(--ab-m);
  margin-bottom: var(--ab-l);
}

/* T-074 A6-N4 (Optikbericht B2): Master-Detail erst ab genug Breite
   zweispaltig (30 rem je Spalte, etwa ab 1030 px Fenster); darunter
   untereinander. min(100%, …) verhindert Überlauf auf schmalen Handys. */
.bereich--zweispaltig {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  align-items: start;
}

.bereich__spalte {
  display: grid;
  gap: var(--ab-m);
  min-width: 0;
}

/* Listen: Kopf mit Ueberschrift und Plus, Suchleiste, Auswahl. */
.liste__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ab-s);
  margin-bottom: var(--ab-s);
}

.untertitel--liste {
  margin: 0;
}

.suchleiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-xs);
  align-items: center;
  margin-bottom: var(--ab-s);
}

.suchleiste__feld {
  flex: 1 1 14rem;
  width: auto;
}

.suchleiste__filter {
  flex: 0 1 14rem;
  width: auto;
}

.suchleiste__haken {
  display: inline-flex;
  align-items: center;
  gap: var(--ab-2xs);
}

/* T-098 (G13, B4; J-48): Das „+“ einer Liste ist das letzte Element ihrer
   Suchleiste, rechts außen — vorher stand es allein in einer Zeile darüber
   (64 px). Masken-Schema MS-2.6. */
.suchleiste > .knopf--plus {
  margin-left: auto;
}

@media (max-width: 40rem) {
  /* Am Handy steht das „+“ neben dem Suchfeld, das wächst; Filter und
     Haken folgen darunter. Die Reihenfolge für Tastatur und Vorleser
     bleibt die der Seite (Suche, Filter, „+“). */
  .suchleiste > * {
    order: 2;
  }

  .suchleiste > .suchleiste__feld {
    order: 0;
    flex: 1 1 12rem;
    min-width: 0;
  }

  .suchleiste > .knopf--plus {
    order: 1;
    margin-left: 0;
  }

  /* T-098 (G8, HA-1): Die Filter sind so breit wie das Suchfeld, statt
     schmaler und ausgefranst darunter zu stehen. */
  .suchleiste__filter {
    flex: 1 1 100%;
  }

  /* T-098 (B16, G10; HA-6): Die Haken „Auch inaktive zeigen“ und „Nur
     Favoriten“ haben 44 px Tippfläche; die Beschriftung gehört dazu. */
  .suchleiste__haken {
    min-height: 2.75rem;
  }
}

/* T-090 (Julius 07.11.2026, J-33): Ein Filter ohne Wahl heißt „Alle …“ und
   steht leise wie eine Hilfe — er ist keine echte Auswahl; erst eine Wahl
   steht in voller Farbe. Gilt für jede Suchleiste (auch die der Aufträge)
   und den Filter des Änderungsprotokolls. In der offenen Liste stehen die
   Wahlen in Tinte, nur „Alle …“ bleibt leise. */
.suchleiste__filter:has(> option[value=""]:checked),
.filter select:has(> option[value=""]:checked) {
  color: var(--c-tinte-weich);
}

.suchleiste__filter option,
.suchleiste__filter optgroup,
.filter select option {
  color: var(--c-tinte);
}

.suchleiste__filter > option[value=""],
.filter select > option[value=""] {
  color: var(--c-tinte-weich);
}

/* T-090 (ADR 004): Ein Ergebnisbereich, den die Sofort-Suche austauscht
   (`data-sofort-ziel`), ist nur eine Klammer ohne eigene Box — Hinweis,
   Leer-Satz, Tabelle und Fehler am Feld stehen im Layout wie vorher. */
.sofort-ort {
  display: contents;
}

.knopf--plus {
  min-width: 2.75rem;
  font-size: 1.25rem;
  line-height: 1;
}

/* T-075 O6: gesperrt = graue Fläche mit Rahmen in --c-linie, ohne Orange;
   die dunklere Schrift bleibt lesbar. */
.knopf:disabled,
.knopf:disabled:hover {
  border-color: var(--c-linie);
  background: var(--c-gesperrt);
  color: var(--c-gesperrt-text);
  cursor: default;
}

.tabelle tr.gewaehlt > td {
  background: var(--c-orange-hell);
}

.tabelle tr.gewaehlt > td:first-child {
  box-shadow: inset 4px 0 0 var(--c-orange);
}

.tabelle tr.inaktiv > td {
  color: var(--c-tinte-weich);
}

.stift {
  display: inline-block;
  padding: 0 var(--ab-xs);
  font-size: 1.25rem;
  text-decoration: none;
}

/* T-097 G10 (HA-6, Prüfwelle 09.11.): Am Handy ist der Stift der
   Master-Listen (Kategorien, Projektserien; vorher 36 × 30 px) eine Tippfläche
   von 44 × 44 px; der negative Rand hält die Zeile gleich hoch (wie die
   Zeilen-Links der Ich-Sichten, A6-N13). */
@media (max-width: 40rem) {
  .stift {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin-block: -0.4375rem;
  }
}

/* Karten fuer Adressen und Kontakte: Anschrift wie auf einem Briefumschlag
   (R-ST-5), am Handy gut lesbar (H1). */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--ab-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.karte--knapp {
  display: grid;
  gap: var(--ab-xs);
  align-content: start;
  padding: var(--ab-m);
}

.karte__zeilen {
  display: grid;
  overflow-wrap: anywhere;
}

.karte__zeile--stark {
  font-weight: 600;
}

.karte__marken {
  margin: 0;
}

/* Angaben einer Ansicht, je Abschnitt der Maske; „Bearbeiten“ steht seit
   T-097 G2 im geteilten Kopf der ersten Gruppe (`.tafelkopf`, Abschnitt 11). */
.angabenkarte {
  display: grid;
  gap: var(--ab-m);
}

.angabengruppe__titel {
  margin: 0 0 var(--ab-xs);
  font-size: var(--fs-text);
}

.angabengruppe .angaben {
  margin: 0;
}

/* Formulare: mehrere Abschnitte sind Reiter (T-069, Abschnitt 15). */
.formularseite {
  max-width: var(--breite-formular);
  margin: 0 auto;
}

.formularabschnitt {
  display: grid;
  gap: var(--ab-m);
  scroll-margin-top: var(--ab-m);
}

.feld__zeile {
  display: flex;
  gap: var(--ab-xs);
  align-items: center;
}

/* Neben „Übernehmen“ darf die Auswahl schmaler werden als ihr längster
   Eintrag, sonst ragt sie aus der Karte. */
.feld__zeile > .feld__eingabe {
  flex: 1;
  min-width: 0;
}

/* T-098 (B3, J-34; ADR 005): Mit static/js/nachladen.js lädt eine
   abhängige Auswahl (Kategorie, Preismodell, Venue) sofort nach. Dann
   stehen „Übernehmen“, sein Satz und der Platzhalter ohne Preismodell nicht
   mehr da (`ohne-nachladen`); die Klasse `mit-nachladen` setzt dieses
   Skript selbst, damit ohne es der Knopf bleibt. */
.mit-nachladen .ohne-nachladen {
  display: none;
}

/* T-098 (B3, J-33): Der Kategorie-Vorfilter der Formulare ist ohne Wahl
   keine echte Auswahl — „Alle Kategorien“ steht leise wie ein Filter der
   Suchleiste, die Wahlen der offenen Liste in Tinte. */
.feld--filter .feld__eingabe:has(> option[value=""]:checked) {
  color: var(--c-tinte-weich);
}

.feld--filter .feld__eingabe option {
  color: var(--c-tinte);
}

.feld--filter .feld__eingabe > option[value=""] {
  color: var(--c-tinte-weich);
}

/* T-064 B7: Am Handy reicht die Zeile nicht für Auswahl und Knopf, die
   Auswahl war abgeschnitten (etwa „Stundenlohn mit Wochenend“). Dort nimmt
   sie die ganze Breite, „Übernehmen“ steht darunter. */
@media (max-width: 40rem) {
  .feld__zeile {
    flex-wrap: wrap;
  }

  .feld__zeile > .feld__eingabe {
    flex-basis: 100%;
  }
}

.feld__ja {
  display: inline-flex;
  align-items: center;
  gap: var(--ab-xs);
  font-weight: 600;
}

.feld__ja input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--c-orange-tief);
}

.feld__eingabe:disabled {
  background: var(--c-gesperrt);
  color: var(--c-tinte-weich);
}

textarea.feld__eingabe {
  min-height: 5rem;
  resize: vertical;
}

.aufklapp > summary {
  cursor: pointer;
  font-weight: 600;
}

.aufklapp[open] > summary {
  margin-bottom: var(--ab-s);
}

/* T-097 G10 (HA-6): Am Handy ist „Weitere Faktoren“ (vorher 24 px hoch) eine
   44 px hohe Tippfläche. Innenabstand statt `display: flex`, damit das
   Dreieck des Aufklappers bleibt; der negative Rand hält die Abstände. */
@media (max-width: 40rem) {
  .aufklapp > summary {
    margin-block: -0.625rem;
    padding-block: 0.625rem;
  }

  .aufklapp[open] > summary {
    margin-bottom: calc(var(--ab-s) - 0.625rem);
  }
}

.aufklapp > .feld + .feld {
  margin-top: var(--ab-m);
}

.taten {
  margin-top: var(--ab-l);
}

.tat {
  margin: 0;
}

.dubletten {
  margin: var(--ab-xs) 0 var(--ab-s);
}

/* Kontakt (R-ST-6): der Abschnitt Person nur beim Typ Person, das Feld
   Bezeichnung sonst. Ohne Skript ueber :has(); kennt der Browser :has()
   nicht, verwirft er die ganze Regel und zeigt alles - der Server leert
   beim Speichern, was nicht gilt. */
.formularseite:has(select[name="typ"] option[value="Person"]:checked) .nur-wenn-nicht-person,
.formularseite:not(:has(select[name="typ"] option[value="Person"]:checked)) .nur-wenn-person {
  display: none;
}

/* -------------------------------------------------------------------------
   14. Wahl mit Feldgruppen (T-070, Krankmeldung): oben die Wahl per Radio,
   darunter nur die Feldgruppe der gewählten Wahl — ohne Skript und ohne
   Neuladen über :has() und :checked, wie der Kontakt-Typ in Abschnitt 13.
   Kennt der Browser :has() nicht, verwirft er die Regel und zeigt beide
   Gruppen; der Server wertet ohnehin nur die gewählte aus. Beim Merge mit
   dem Reiter-Muster aus T-069 abstimmen.
   ------------------------------------------------------------------------- */
/* T-074 A6-N10 (Optikbericht B24): kein eigener Außenabstand — den Abstand
   zur Gruppe gibt schon das Formular (gap); vorher 40 statt 20 px. */
.wahl {
  margin: 0;
  padding: 0;
  border: 0;
}

.wahl__option {
  display: flex;
  align-items: center;
  gap: var(--ab-s);
  min-height: 2.75rem;          /* Fingerbreite am Handy */
  cursor: pointer;
}

.wahl__radio {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--c-orange);
}

/* T-074 A6-N11 (Optikbericht B24): Die Felder einer Wahl-Gruppe
   (Krankmeldung mit Attest: „Von", „Bis") stehen im selben Abstand wie im
   übrigen Formular; vorher stand „Bis" ohne Abstand unter „Von". Die nicht
   gewählte Gruppe bleibt verborgen — die :has()-Regel unten ist
   spezifischer. */
.wahl__gruppe {
  display: grid;
  gap: var(--ab-m);
}

.wahl__gruppe > :is(p, .meldung) {
  margin: 0;
}

.wahl-formular:has(input[name="weg"][value="einzeltag"]:checked) .nur-mit-attest,
.wahl-formular:has(input[name="weg"][value="attest"]:checked) .nur-ohne-attest {
  display: none;
}

/* -------------------------------------------------------------------------
   15. Reiter (T-069): echte Reiter ohne Skript und ohne Neuladen
   ------------------------------------------------------------------------- */

/* Julius, Sitzung 27.10.2026: „Die Tabs muessen wirklich Tabs sein, je nach
   ausgewaehltem Tab sind die anderen Felder unsichtbar und die Bildschirm-
   position soll nicht springen!" (loest O7 ab). Aufbau aus
   templates/reiter.html: In der Leiste steht je Reiter ein Radio-Umschalter
   (ohne Groesse, aber per Tastatur erreichbar; die Pfeiltasten schalten) vor
   seiner Beschriftung, danach folgen die Panels. Sichtbar ist nur das Panel
   an der Stelle des gewaehlten Umschalters; kein Anker, kein Neuladen, die
   Bildschirmposition bleibt. Kennt ein Browser :has() nicht, verwirft er die
   Regel und zeigt alle Panels untereinander. Regeln fuer bis zu zehn Reiter
   (Personal: acht). Am Handy scrollt die Leiste seitlich. */

/* Als Kind eines Grid-Formulars darf der Block schmaler werden als die
   Leiste lang ist; sonst wuerde die Seite am Handy breiter als der Schirm. */
.reiter {
  min-width: 0;
  max-width: 100%;
}

/* T-075 O1 („abgeschnitten ist generell nicht gut"): Passen die Reiter
   nicht in eine Zeile (am Handy: Kunde, Lieferant, Personal), brechen sie
   in eine zweite Zeile um, statt am rechten Rand abgeschnitten zu werden
   und seitlich zu rollen. Die Beschriftung eines Reiters bleibt einzeilig. */
.reiter__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  row-gap: var(--ab-2xs);
  margin: 0 0 var(--ab-m);
  border-bottom: 2px solid var(--c-orange);
}

.reiter__wahl {
  flex: 0 0 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  appearance: none;
}

.reiter__knopf {
  flex: 0 0 auto;
  margin-right: var(--ab-2xs);
  padding: var(--ab-xs) var(--ab-m);
  border: 1px solid var(--c-linie);
  border-bottom: none;
  border-radius: var(--radius-klein) var(--radius-klein) 0 0;
  background: var(--c-flaeche);
  color: var(--c-tinte);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.reiter__knopf:hover {
  background: var(--c-orange-hell);
}

.reiter__wahl:checked + .reiter__knopf {
  border-color: var(--c-orange);
  background: var(--c-orange);
  color: var(--c-auf-orange);
}

.reiter__wahl:focus-visible + .reiter__knopf {
  outline: 3px solid var(--c-orange-tief);
  outline-offset: -3px;
}

/* T-097 G3 (Prüfwelle 09.11., WCAG 1.4.11): Der Fokusring liegt innen auf
   dem Reiter. Auf dem gewählten (Orange) hatte das tiefe Orange nur
   2,5 : 1; in Tinte sind es 7,3 : 1. */
.reiter__wahl:checked:focus-visible + .reiter__knopf {
  outline-color: var(--c-tinte);
}

/* T-097 G3 (WCAG 1.4.1): Im Kontrastmodus von Windows (erzwungene Farben)
   setzt der Browser alle Reiter auf dieselbe Fläche — welcher gewählt ist,
   war nicht mehr zu sehen. Der gewählte trägt dann die Systemfarbe der
   Auswahl, sein Fokusring die Schrift darauf. Die Füllung bleibt das
   Zeichen (Orchestrator, T-097): kein zweites Merkmal ohne Farbe, die
   Leiste bleibt ruhig. */
@media (forced-colors: active) {
  .reiter__wahl:checked + .reiter__knopf {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }

  .reiter__wahl:checked:focus-visible + .reiter__knopf {
    outline-color: HighlightText;
  }
}

/* Ein Reiter mit Fehler: roter Strich oben, auch wenn er gewaehlt ist. */
.reiter__knopf--fehler {
  box-shadow: inset 0 3px 0 var(--c-fehler);
}

/* Review T-092, T2 (HA-6): Am Handy ist jeder Reiter eine 44 px hohe
   Tippfläche (vorher 41 px). Mit dem schmaleren Innenabstand passen drei
   Reiter wie „Kunde und Projekt“, „Messe“, „Sonstiges“ (Kopfdaten des
   Auftrags) bei 375 px in eine Zeile; mehr Reiter brechen weiter in eine
   zweite Zeile um (T-075 O1). */
@media (max-width: 40rem) {
  .reiter__knopf {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: var(--ab-xs);
  }
}

.reiter__titel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.reiter:has(> .reiter__leiste > .reiter__wahl:nth-of-type(1):not(:checked)) > .reiter__tafel:nth-of-type(1),
.reiter:has(> .reiter__leiste > .reiter__wahl:nth-of-type(2):not(:checked)) > .reiter__tafel:nth-of-type(2),
.reiter:has(> .reiter__leiste > .reiter__wahl:nth-of-type(3):not(:checked)) > .reiter__tafel:nth-of-type(3),
.reiter:has(> .reiter__leiste > .reiter__wahl:nth-of-type(4):not(:checked)) > .reiter__tafel:nth-of-type(4),
.reiter:has(> .reiter__leiste > .reiter__wahl:nth-of-type(5):not(:checked)) > .reiter__tafel:nth-of-type(5),
.reiter:has(> .reiter__leiste > .reiter__wahl:nth-of-type(6):not(:checked)) > .reiter__tafel:nth-of-type(6),
.reiter:has(> .reiter__leiste > .reiter__wahl:nth-of-type(7):not(:checked)) > .reiter__tafel:nth-of-type(7),
.reiter:has(> .reiter__leiste > .reiter__wahl:nth-of-type(8):not(:checked)) > .reiter__tafel:nth-of-type(8),
.reiter:has(> .reiter__leiste > .reiter__wahl:nth-of-type(9):not(:checked)) > .reiter__tafel:nth-of-type(9),
.reiter:has(> .reiter__leiste > .reiter__wahl:nth-of-type(10):not(:checked)) > .reiter__tafel:nth-of-type(10) {
  display: none;
}

/* -------------------------------------------------------------------------
   16. Agenda (T-076, nur im Testbetrieb): die Agenda in zwei Spalten, die
       Folie als schwarzer Rahmen wie eine Präsentationsfolie (am PC etwa
       16 : 9, größere Schrift für den geteilten Bildschirm), darunter die
       Rahmen der Beispiele mit ihrer Beschriftung
   ------------------------------------------------------------------------- */

/* Die Agenda: Titel und Datum, darunter links „Offen", rechts
   „Besprochen"; am Handy untereinander (unten). */
.agenda-kopf {
  margin-bottom: var(--ab-l);
}

.agenda-kopf__titel {
  margin: 0 0 var(--ab-2xs);
  font-size: var(--fs-titel);
  overflow-wrap: anywhere;
}

.agenda-kopf p {
  margin: 0;
}

.agenda {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ab-l);
  align-items: start;
}

.agenda__titel {
  margin: 0 0 var(--ab-s);
  font-size: var(--fs-h2);
}

.agenda__spalte > p {
  margin: 0;
}

.agenda__themen {
  display: grid;
  gap: var(--ab-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ein Thema: die Kennung als schwarzes Kästchen (wie der Rahmen der
   Folie), der Titel, darunter Dauer und Zahl der Folien. Die besprochenen
   Themen rechts stehen auf hellem Grund, mit Ergebnis und Gewähltem. */
.agenda-thema {
  border: 1px solid var(--c-linie);
  border-radius: var(--radius);
  background: var(--c-grund);
  box-shadow: var(--schatten);
}

.agenda__spalte--besprochen .agenda-thema {
  background: var(--c-flaeche);
  box-shadow: none;
}

/* T-106 (J-32, J-66): Die ganze Karte öffnet das Thema — ein besprochenes
   zum Ansehen. Vertrag `ganz`/`ganz__ziel` aus Abschnitt 9: Der Link
   deckt mit seinem ::after die Karte, „Wieder öffnen" liegt darüber; beim
   Überfahren hebt sich die ganze Karte hervor (dort, nicht mehr am Link). */
.agenda-thema__link {
  display: flex;
  align-items: flex-start;
  gap: var(--ab-s);
  padding: var(--ab-s) var(--ab-m);
  border-radius: var(--radius);
  color: var(--c-tinte);
  text-decoration: none;
}

.agenda-thema__kennung {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 var(--ab-2xs);
  border-radius: var(--radius-klein);
  background: var(--c-tinte);
  color: var(--c-grund);
  font-weight: 700;
}

.agenda-thema__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.agenda-thema__titel {
  font-size: var(--fs-kachel);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.agenda-thema__angaben {
  color: var(--c-tinte-weich);
  font-size: var(--fs-klein);
}

/* Ergebnis und Gewähltes stehen bündig unter dem Titel. */
.agenda-thema__ergebnis,
.agenda-thema__gewaehlt {
  margin: 0 var(--ab-m) var(--ab-s) calc(var(--ab-m) + 2.5rem + var(--ab-s));
  overflow-wrap: anywhere;
}

.agenda-thema__gewaehlt {
  padding-left: var(--ab-m);
  font-size: var(--fs-klein);
  list-style: disc;
}

.agenda-thema__tat {
  display: flex;
  justify-content: flex-end;
  margin: 0 var(--ab-m) var(--ab-s);
}

.agenda-fuss {
  margin: var(--ab-l) 0 0;
}

.agenda-weitere {
  margin-top: var(--ab-l);
}

.agenda-weitere ul {
  margin: 0;
  padding-left: var(--ab-m);
}

/* Die Fehler einer agenda.toml, je einer mit Zeile, Thema, Folie, Grund. */
.agenda-fehler {
  margin: 0 0 var(--ab-m);
  padding-left: var(--ab-m);
  overflow-wrap: anywhere;
}

.agenda-fehler li + li {
  margin-top: var(--ab-xs);
}

/* Die Folie: schwarzer Rahmen an der Inhaltsbreite, am PC mindestens etwa
   16 : 9 hoch, aber nie höher als das Fenster unter der Kopfleiste, mit
   größerer Schrift als die App. Oben Thema und Code, unten im Rahmen die
   Wege; der Inhalt dazwischen nimmt den Platz, ein langer Inhalt macht die
   Folie höher (nichts wird abgeschnitten). */
.folie {
  display: flex;
  flex-direction: column;
  gap: var(--ab-m);
  min-height: min(
    calc((min(100vw, var(--breite)) - 2 * var(--rand)) * 9 / 16),
    calc(100vh - 8rem)
  );
  padding: var(--ab-m) var(--ab-l);
  border: 6px solid var(--c-tinte);
  border-radius: var(--radius-klein);
  background: var(--c-grund);
  /* 20 px bei 1024, 22 px bei 1280, 26 px ab 1920: Im geteilten Bildschirm
     wird alles kleiner, die Folie bleibt lesbar. Alles in der Folie rechnet
     in em davon. */
  font-size: clamp(1.25rem, 0.75rem + 0.75vw, 1.625rem);
  line-height: 1.45;
}

.folie__kopf,
.folie__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ab-xs) var(--ab-m);
}

.folie__kopf {
  padding-bottom: var(--ab-xs);
  border-bottom: 1px solid var(--c-linie);
  color: var(--c-tinte-weich);
  font-size: 0.7em;
  font-weight: 600;
}

.folie__kopf p {
  margin: 0;
}

.folie__inhalt {
  flex: 1 1 auto;
}

.folie__titel {
  margin: 0 0 var(--ab-m);
  font-size: 1.75em;
  overflow-wrap: anywhere;
}

/* T-106 W1 (J-67): Warum die Folie fragt — direkt unter dem Titel, eine
   eigene Zeile, leise hervorgehoben wie ein Hinweis (Abschnitt 7: Strich in
   Orange, heller Grund), „Warum:" fett vorn. In em: Sie wächst mit der
   Schrift der Folie und bleibt etwas kleiner als ihr Text. */
.folie__titel:has(+ .folie__warum) {
  margin-bottom: var(--ab-xs);
}

.folie__warum {
  max-width: 60rem;
  margin: 0 0 var(--ab-m);
  padding: 0.35em 0.75em;
  border-left: 4px solid var(--c-orange);
  border-radius: var(--radius-klein);
  background: var(--c-orange-hell);
  font-size: 0.85em;
  overflow-wrap: anywhere;
}

.folie__warum-wort {
  font-weight: 700;
}

.folie__text p,
.folie__text ul {
  max-width: 60rem;
  margin: 0 0 var(--ab-s);
}

.folie__text ul,
.folie__fragen ul {
  padding-left: 1.4em;
}

.folie__text li + li,
.folie__fragen li + li {
  margin-top: var(--ab-2xs);
}

.folie__fragen {
  margin-top: var(--ab-m);
}

.folie__untertitel {
  margin: 0 0 var(--ab-xs);
  font-size: 1em;
}

.folie__fragen ul {
  margin: 0;
}

.folie__auswahl {
  margin-top: var(--ab-m);
}

.folie__optionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-s);
}

/* Jede Option hat ihr eigenes Formular (es schickt die Tat mit); es
   umschließt nur den Knopf und gibt ihm seine Größe weiter. */
.folie__option {
  display: flex;
  /* Ein Doppelklick markiert keinen Text, auch nicht in der Sperre unten,
     in der er das Formular statt des Knopfs trifft. */
  user-select: none;
}

/* Doppelklick (Review T-076, T2): Trifft der zweite Klick noch die alte
   Seite, schickt er dieselbe Tat, und der Server schreibt nichts. Trifft
   er schon die neue, will deren Knopf das Gegenteil — deshalb nehmen die
   Knöpfe in der ersten halben Sekunde nach dem Laden keinen Klick an.
   Ohne JavaScript: eine Animation, die nur pointer-events hält. */
.folie__option .option {
  animation: option-sperre 0.5s;
}

@keyframes option-sperre {
  from,
  to {
    pointer-events: none;
  }
}

/* Eine Option: ein leiser Knopf; gewählt orange gefüllt mit Häkchen. */
.option {
  display: inline-flex;
  align-items: center;
  gap: var(--ab-xs);
  min-height: 3rem;
  padding: var(--ab-xs) var(--ab-m);
  border: 2px solid var(--c-linie-kraeftig);
  border-radius: var(--radius);
  background: var(--c-grund);
  color: var(--c-tinte);
  font: inherit;
  font-size: 0.9em;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* Nur ein Knopf hebt sich hervor, nicht die Option zum Ansehen (unten);
   :where hält die Spezifität, damit „gewählt" beim Überfahren bleibt. */
.option:where(:not(.option--fest)):hover {
  border-color: var(--c-orange-tief);
  background: var(--c-orange-hell);
}

.option--gewaehlt,
.option--gewaehlt:hover {
  border-color: var(--c-orange-tief);
  background: var(--c-orange);
  color: var(--c-auf-orange);
}

.option__haken {
  font-weight: 700;
}

/* T-106 (J-66): Ein besprochenes Thema zeigt seine Optionen nur zum
   Ansehen — eine Liste statt Knöpfen: gewählt orange wie sonst, die übrigen
   leiser, ohne Zeiger und ohne Hervorhebung; ändern erst nach „Wieder
   öffnen". */
.folie__optionen--fest {
  margin: 0;
  padding: 0;
  list-style: none;
}

.option--fest {
  cursor: default;
}

.option--fest:not(.option--gewaehlt) {
  border-color: var(--c-linie);
  color: var(--c-tinte-weich);
}

.folie__hilfe {
  margin: var(--ab-xs) 0 0;
  color: var(--c-tinte-weich);
  font-size: 0.7em;
}

.folie__fuss {
  padding-top: var(--ab-s);
  border-top: 1px solid var(--c-linie);
}

.folie__taten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ab-s);
  margin-left: auto;
}

/* Alle Wege unten in der Folie gleich hoch, leise wie orange. */
.folie__weg {
  min-height: 2.75rem;
  font-size: 0.9em;
}

.folie__taten form {
  margin: 0;
}

/* Die Rahmen unter der Folie: oben die Beschriftung („A2 · Variante 1:
   …"), darunter der Rahmen mit Text, HTML, Bild und Link. HTML mit
   breiten Tabellen rollt im eigenen Rahmen. */
.beispiel {
  margin-top: var(--ab-l);
}

.beispiel__beschriftung {
  margin: 0 0 var(--ab-xs);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.beispiel__rahmen {
  display: grid;
  gap: var(--ab-m);
  padding: var(--ab-m);
  border: 2px solid var(--c-linie-kraeftig);
  border-radius: var(--radius);
  background: var(--c-grund);
}

.beispiel__text {
  font-size: 1.125rem;
}

.beispiel__text p,
.beispiel__text ul {
  margin: 0 0 var(--ab-xs);
}

.beispiel__text > :last-child,
.beispiel__html > :last-child {
  margin-bottom: 0;
}

.beispiel__html {
  min-width: 0;
  overflow-x: auto;
}

/* Was im HTML eines Rahmens aufeinander folgt (Tabelle, dann ein Satz),
   bekommt Luft dazwischen. */
.beispiel__html > * + * {
  margin-top: var(--ab-s);
}

.beispiel__bild {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--c-linie);
  border-radius: var(--radius-klein);
}

.beispiel__link {
  margin: 0;
}

/* Am Handy: kein Mindestmaß, Schrift näher an der App; die Spalten der
   Agenda, die Optionen und die Wege stehen untereinander. */
@media (max-width: 40rem) {
  .agenda {
    grid-template-columns: minmax(0, 1fr);
  }

  .folie {
    min-height: 0;
    padding: var(--ab-s) var(--ab-m);
    border-width: 4px;
    font-size: 1.0625rem;
  }

  .folie__titel {
    font-size: 1.5em;
  }

  .folie__optionen {
    flex-direction: column;
  }

  .option {
    width: 100%;
  }

  .folie__fuss,
  .folie__taten {
    flex-direction: column;
    align-items: stretch;
  }

  .folie__taten {
    margin-left: 0;
  }

  .folie__weg,
  .folie__taten form,
  .folie__taten .knopf {
    width: 100%;
  }

  /* Eine Tabelle im HTML eines Rahmens bleibt am Handy eine Tabelle und
     rollt in ihrem eigenen Rahmen: Als Handykarte (Abschnitt 9) bräuchte
     jede Zelle ihren Spaltennamen (data-label), den die Beispiele nicht
     tragen — die Werte stünden namenlos da. */
  .beispiel__html .tabelle {
    display: table;
    width: 100%;
    min-width: 48rem;
  }

  .beispiel__html .tabelle thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .beispiel__html .tabelle tbody {
    display: table-row-group;
    width: auto;
  }

  .beispiel__html .tabelle tr {
    display: table-row;
    width: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .beispiel__html .tabelle td,
  .beispiel__html .tabelle td:last-child {
    display: table-cell;
    width: auto;
    border-bottom: 1px solid var(--c-linie);
    overflow-wrap: normal;
  }

  .beispiel__html .tabelle td::before {
    content: none;
  }

  /* Im Verlauf hat nur eine Auswahl eine Option; die leere Zelle fällt in
     der Handykarte weg (wie in der Nutzerliste, T-074 A6-B13). */
  #verlauf-liste td:empty {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   17. Auftrag (T-081, nur im Testbetrieb): Weiche (MS-12), Aktendeckel-
       Leiste und Stand (MS-13.2, R21), das Netz der Jobs von oben nach
       unten (MS-13.5; Julius, 04.11.2026 — seit T-085 nur noch im
       Vorschlag der Planung, die Akte hat ihr Netz in Abschnitt 20),
       Formulare
   ------------------------------------------------------------------------- */

/* Die Weiche: drei große Karten nebeneinander, am Handy untereinander;
   das Kürzel groß, darunter Name und Satz (Bauauftrag 002 §8). */
.weiche__frage {
  margin: 0 0 var(--ab-m);
  font-size: var(--fs-h2);
}

.weiche__karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--ab-m);
  margin: 0 0 var(--ab-l);
  padding: 0;
  list-style: none;
}

.weiche__karten > li {
  display: flex;
}

.weichenkarte {
  display: grid;
  flex: 1;
  align-content: start;
  gap: var(--ab-xs);
  min-height: 2.75rem;
  padding: var(--ab-l) var(--ab-m);
  border: 2px solid var(--c-orange);
  border-radius: var(--radius);
  background: var(--c-grund);
  box-shadow: var(--schatten);
  color: var(--c-tinte);
  text-decoration: none;
}

.weichenkarte:hover {
  background: var(--c-orange-hell);
}

.weichenkarte__kuerzel {
  font-size: var(--fs-titel);
  font-weight: 700;
  line-height: 1.1;
}

.weichenkarte__name {
  font-size: var(--fs-kachel);
  font-weight: 600;
}

.weiche__abbrechen {
  margin: 0;
}

/* Der Auftragsbezug auf den übrigen Seiten des Auftrags (MS-13.2): seit
   T-092 K7 (J-53) eine schmale, leise Zeile statt des Kastens — Nummer als
   Link zurück, Kunde, Projekt, der Stand als kleine Marke. Bricht um,
   nichts wird gekürzt (EL-18). */
.auftragsleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ab-2xs) var(--ab-s);
  margin: 0 0 var(--ab-m);
  color: var(--c-tinte-weich);
  font-size: var(--fs-klein);
}

.auftragsleiste__nummer {
  color: var(--c-tinte-weich);
  white-space: nowrap;
}

a.auftragsleiste__nummer:hover {
  color: var(--c-link);
}

.auftragsleiste__teil::before {
  content: "·";
  margin-right: var(--ab-s);
}

.auftragsleiste .stand {
  align-self: center;
  padding: 0 var(--ab-xs);
  font-size: var(--fs-klein);
  font-weight: 400;
}

/* T-094 G5 (Prüfwelle 09.11.2026, Prüfer G; EL-13, MS-2.11): In der Liste
   der Aufträge ist der Stand dieselbe kleine Marke wie in der Akte, nicht
   so groß wie ein Knopf — in der Liste wird ausgewählt, nicht gearbeitet
   (J-35). Die Farben nach Bedeutung bleiben. */
.auftragsliste .stand {
  padding: 0 var(--ab-xs);
  font-size: var(--fs-klein);
  font-weight: 400;
}

/* T-101 Z1 (Orchestrator 09.11.2026): „In Durchführung" ist in der Liste
   hell wie in der schmalen Zeile der Akte — die volle Orangefläche bleibt
   den Taten. */
.auftragsliste .stand--in-durchfuehrung {
  background: var(--c-orange-hell);
  color: var(--c-tinte);
}

/* Auftrags- und Jobnummern brechen nie am Bindestrich um („J-" und
   „00001" in zwei Zeilen; Review T-081 T2): in Liste, Jobliste, Kopf und
   Netz. Sie sind kurz, eine Zeile hat immer Platz (EL-18). */
.nummer,
#auftrag-nummer dd {
  white-space: nowrap;
}

/* Der Stand als Marke (R21): Farbe nach Bedeutung (RA-10) — angelegt
   grau, geplant hell, in Durchführung orange, erledigt grün. */
.stand {
  display: inline-block;
  padding: var(--ab-2xs) var(--ab-s);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius-klein);
  background: var(--c-flaeche);
  font-weight: 600;
  white-space: nowrap;
}

.stand--geplant {
  border-color: var(--c-orange);
  background: var(--c-orange-hell);
}

.stand--in-durchfuehrung {
  border-color: var(--c-orange);
  background: var(--c-orange);
  color: var(--c-auf-orange);
}

.stand--erledigt {
  border-color: var(--c-erfolg);
  background: var(--c-erfolg-grund);
  color: var(--c-erfolg);
}

/* Der Aktendeckel: Abschnitte untereinander. (Den großen Stand im Kasten
   gibt es seit T-088 K3 nicht mehr: der Kopf ist eine schmale Zeile.) */
.aktendeckel {
  display: grid;
  gap: var(--ab-l);
}

.aktendeckel .untertitel {
  margin-top: 0;
}

.aktendeckel__kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ab-s);
  margin-bottom: var(--ab-m);
}

.aktendeckel__kopf .angaben {
  margin: 0;
}

/* Das Netz von oben nach unten: je Stufe eine Zeile, die Beschriftung
   links, die Karten nebeneinander; passen sie nicht, brechen sie in der
   Zeile um (MS-13.5). Zwischen den Zeilen zeigt ein schlichter Pfeil nach
   unten die Richtung — eine Linie zwischen einzelnen Karten ginge ohne
   Skript nicht sauber, jede Karte nennt dafür ihre Vorgänger. */
.netz {
  display: grid;
  gap: var(--ab-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.netz__stufe {
  position: relative;
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--ab-s) var(--ab-m);
  align-items: start;
}

.netz__stufe + .netz__stufe::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--ab-m));
  left: 2.75rem;
  width: 2px;
  height: var(--ab-m);
  background: var(--c-linie-kraeftig);
}

/* Die Spitze des Pfeils, mittig unter dem Strich. */
.netz__stufe + .netz__stufe::after {
  content: "";
  position: absolute;
  top: -0.375rem;
  left: calc(2.75rem - 0.25rem);
  border-top: 0.375rem solid var(--c-linie-kraeftig);
  border-right: 0.3125rem solid transparent;
  border-left: 0.3125rem solid transparent;
}

.netz__stufentitel {
  margin: 0;
  padding-top: var(--ab-xs);
  color: var(--c-tinte-weich);
  font-size: var(--fs-klein);
  font-weight: 600;
}

.netz__karten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.netzkarte {
  display: grid;
  flex: 0 1 17rem;
  align-content: start;
  gap: var(--ab-2xs);
  min-width: 0;
  padding: var(--ab-s) var(--ab-m);
  border: 1px solid var(--c-linie);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--c-grund);
  box-shadow: var(--schatten);
}

.netzkarte p {
  margin: 0;
}

.netzkarte__bezeichnung {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.netzkarte__zeile,
.netzkarte__wartet {
  color: var(--c-tinte-weich);
  font-size: var(--fs-klein);
  overflow-wrap: anywhere;
}

.netzkarte__zeile--fehlt {
  color: var(--c-orange-tief);
  font-weight: 600;
}

/* Die Marke eines Jobstatus. */
.jobstatus {
  display: inline-block;
  padding: 0 var(--ab-xs);
  border-radius: var(--radius-klein);
  background: var(--c-flaeche);
  font-size: var(--fs-klein);
  white-space: nowrap;
}

.jobstatus--beauftragt {
  background: var(--c-orange);
  color: var(--c-auf-orange);
}

.jobstatus--erledigt {
  background: var(--c-erfolg-grund);
  color: var(--c-erfolg);
}

.jobstatus--abgesagt {
  color: var(--c-tinte-weich);
}

.marke--bereit {
  border: 1px solid var(--c-orange);
  background: var(--c-grund);
}

/* Formulare: die Angebotsnummer nur bei „Ja" (EL-9; ohne :has() bleibt
   sie sichtbar, der Server leert sie bei „Nein"); zwei Datumsfelder
   nebeneinander, am Handy untereinander; die Vorgänger als Liste. */
.formular:has(input[name="angebot"][value="nein"]:checked) .nur-mit-angebot {
  display: none;
}

.angaben--fest {
  margin: 0;
}

.feldpaar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  /* T-084 (Orchestrator, Befund von Entwickler A bei 1280 px): Die Hilfe
     unter „Termin bis“ streckt die Zeile nicht mehr; „Termin“ bleibt so
     hoch wie sein Inhalt. */
  align-items: start;
  gap: var(--ab-m);
}

.vorgaenger {
  margin: 0;
  padding: 0;
  border: 0;
}

.vorgaenger__liste {
  display: grid;
  gap: var(--ab-2xs);
  margin: 0 0 var(--ab-2xs);
  padding: 0;
  list-style: none;
}

.vorgaenger__wahl {
  font-weight: 400;
}

/* Am Handy: die Beschriftung der Stufe über ihren Karten, jede Karte in
   voller Breite; der Strich zwischen den Stufen rückt nach links. */
@media (max-width: 40rem) {
  .netz__stufe {
    grid-template-columns: minmax(0, 1fr);
  }

  .netz__stufe + .netz__stufe::before {
    left: var(--ab-m);
  }

  .netz__stufe + .netz__stufe::after {
    left: calc(var(--ab-m) - 0.25rem);
  }

  .netzkarte {
    flex-basis: 100%;
  }

  #auftraege-tabelle td:empty {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   18. Planung (T-082, nur im Testbetrieb): die Planungsfolie (MS-14) im
       Rahmen der Agenda-Folie (Abschnitt 16, .folie); Antworten als große
       Knöpfe per :checked, Felder nur zu einer Antwort per :has(), das
       kleine Netz des Vorschlags von oben nach unten (Nachtrag 1)
   ------------------------------------------------------------------------- */

/* Die Klicksperre der Agenda (MS-11.5) auch auf den Wegen der Planung
   (Review T-082, U4): Ein Doppelklick auf „Weiter ›“ träfe sonst schon den
   Knopf der nächsten Folie und schickte deren Vorgaben ungesehen weiter;
   ein zweites „Planung übernehmen“ fängt zusätzlich der Server ab
   (Versionsmarke). In der ersten halben Sekunde nach dem Laden nehmen die
   Knöpfe keinen Klick an — nur CSS, ohne JavaScript (JS-1). */
.planung .folie__weg {
  animation: option-sperre 0.5s;
}

/* T-084 D1 (Optik Auftrag B9, N11; MS-14.8): Auf langen Folien (Vorschlag,
   Stand beim Roundtrip, Sendung) klebt der Fuß mit den Wegen am unteren
   Fensterrand — „Weiter ›“ und „Planung übernehmen“ bleiben im Bild. Er
   reicht bis an den Rahmen der Folie; kurze Folien sehen aus wie vorher. */
.planung .folie__fuss {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-inline: calc(-1 * var(--ab-l));
  padding: var(--ab-s) var(--ab-l);
  background: var(--c-grund);
  box-shadow: 0 -8px 12px -10px rgba(31, 27, 28, 0.35);
}

/* T-084 D1 (Optik Auftrag B16, N13): Die Hilfen unter den Antworten nie
   kleiner als die kleine Schrift der App (am Handy 14 statt 11,9 px); am PC
   bleibt es bei 0,7 em der Folie. */
.planung .folie__hilfe {
  font-size: max(0.7em, var(--fs-klein));
}

/* T-084 D3 (MS-14.6): die Auswahl „Dienstleister“ unten in der Karte des
   Vorschlags, über die Breite der Karte; der Name eines langen Lieferanten
   kürzt die Auswahl nicht, sie bricht nicht aus der Karte. */
.netzkarte__dienstleister {
  display: grid;
  gap: var(--ab-2xs);
  margin-top: var(--ab-xs);
  padding-top: var(--ab-xs);
  border-top: 1px solid var(--c-linie);
}

.netzkarte__dienstleister .feld__label {
  font-size: var(--fs-klein);
}

.netzkarte__dienstleister .feld__eingabe {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  font-size: var(--fs-klein);
}

/* Die Karten des Vorschlags sind breiter als die des Netzes in der Akte:
   Der Name eines Dienstleisters soll in die Auswahl passen — am Handy mit
   schmaleren Rändern in Karte und Auswahl. */
.planung .netzkarte--vorschlag {
  flex-basis: 20rem;
}

@media (max-width: 40rem) {
  .planung .netzkarte--vorschlag {
    padding-inline: var(--ab-s);
  }

  .netzkarte__dienstleister .feld__eingabe {
    padding-inline: var(--ab-xs);
  }
}

/* T-084 D4 (MS-14.9): klein die Regeln der Venue unter den Antworten von
   „Stand“ und „Services“ — Beschriftung über dem Text, nichts abgeschnitten. */
.planung__venue {
  padding: var(--ab-s) var(--ab-m);
  border-left: 4px solid var(--c-linie-kraeftig);
  border-radius: var(--radius-klein);
  background: var(--c-flaeche);
  font-size: max(0.7em, var(--fs-klein));
}

.planung__venue-titel {
  margin: 0 0 var(--ab-xs);
  font-size: 1em;
  font-weight: 700;
}

.planung__regeln {
  display: grid;
  gap: var(--ab-xs);
  margin: 0;
}

.planung__regel dt {
  color: var(--c-tinte-weich);
  font-weight: 600;
}

.planung__regel dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Das Formular füllt die Folie zwischen Kopf und Fuß. */
.planung__formular {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ab-m);
}

.planung__gruppe {
  min-width: 0;
  margin: 0 0 var(--ab-m);
  padding: 0;
  border: 0;
}

.planung__legende {
  margin: 0 0 var(--ab-xs);
  padding: 0;
  font-size: 1em;
  font-weight: 700;
}

.planung__antworten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-s);
}

.planung__antwort {
  position: relative;
  display: flex;
}

/* Der Radio- bzw. Ankreuzknopf selbst ist unsichtbar, aber mit der Tastatur
   erreichbar; der Knopf daneben zeigt die Wahl wie MS-11.4 (gewählt orange
   gefüllt mit Haken). */
.planung__wahl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.planung__wahl:not(:checked) + .option .option__haken {
  display: none;
}

.planung__wahl:checked + .option {
  border-color: var(--c-orange-tief);
  background: var(--c-orange);
  color: var(--c-auf-orange);
}

.planung__wahl:focus-visible + .option {
  outline: 3px solid var(--c-orange-tief);
  outline-offset: 2px;
}

.planung__feld {
  max-width: 36rem;
  margin-top: var(--ab-s);
}

/* Felder nur zu einer Antwort (MS-14.4, EL-9): ohne :has() bleiben sie
   sichtbar, und der Server verwirft sie, wenn die Antwort nicht gewählt
   ist. */
.planung__formular:not(:has(input[name="flughafen"][value="anderer"]:checked)) .nur-bei-anderem-flughafen,
.planung__formular:not(:has(input[name="hauptlauf"][value="wir"]:checked)) .nur-bei-hauptlauf-wir,
.planung__formular:not(:has(input[name="verkehrszweig_zurueck"][value="Luftfracht"]:checked, input[name="verkehrszweig_zurueck"][value="Seefracht"]:checked, input[name="verkehrszweig_zurueck"][value="Bahn"]:checked)) .nur-mit-umschlag {
  display: none;
}

/* Das kleine Netz des Vorschlags (MS-14.6): Stufen von oben nach unten wie
   die Übersicht (Abschnitt 17), in der Schrift der App statt der Folie. */
.netz--klein {
  margin-top: var(--ab-s);
  font-size: var(--fs-text);
}

/* T-088 K9 (J-22, MS-14.6): Die Karte ist selbst der Schalter. Das
   Ankreuzfeld steht vorn in der Karte; das Label ist ihr Kopf (Bezeichnung,
   Termin, „wartet auf", Marke), die Auswahl „Dienstleister" bleibt darunter
   eigenes Ziel. Angewählt: oranger Rand und „übernehmen ✓"; abgewählt:
   blass, gestrichelt, „nicht übernehmen" — nur CSS. Kennt ein Browser
   :has() nicht, bleibt der Haken sichtbar und die Marken fehlen (JS-5). */
.netzkarte--vorschlag {
  position: relative;
}

.netzkarte__haken {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 0 var(--ab-2xs);
}

.netzkarte__schalter {
  display: grid;
  gap: var(--ab-2xs);
  min-height: 2.75rem;
  cursor: pointer;
}

.netzkarte__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ab-2xs) var(--ab-s);
}

.netzkarte__marke {
  display: none;
  padding: 0 var(--ab-xs);
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  font-size: var(--fs-klein);
  font-weight: 600;
  white-space: nowrap;
}

@supports selector(:has(*)) {
  .netzkarte__haken {
    position: absolute;
    top: var(--ab-s);
    left: var(--ab-s);
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .netzkarte--vorschlag:has(> .netzkarte__haken:checked) {
    border-color: var(--c-orange);
    box-shadow: 0 0 0 1px var(--c-orange), var(--schatten);
  }

  .netzkarte--vorschlag:has(> .netzkarte__haken:checked) .netzkarte__marke--an {
    display: inline-block;
    border-color: var(--c-orange);
    background: var(--c-orange);
    color: var(--c-auf-orange);
  }

  .netzkarte--vorschlag:has(> .netzkarte__haken:not(:checked)) {
    border-style: dashed;
    border-color: var(--c-linie-kraeftig);
    background: var(--c-flaeche);
    box-shadow: none;
  }

  .netzkarte--vorschlag:has(> .netzkarte__haken:not(:checked)) .netzkarte__bezeichnung {
    color: var(--c-tinte-weich);
    font-weight: 400;
  }

  .netzkarte--vorschlag:has(> .netzkarte__haken:not(:checked)) .netzkarte__marke--aus {
    display: inline-block;
    border-style: dashed;
    border-color: var(--c-linie-kraeftig);
    background: var(--c-grund);
    color: var(--c-tinte-weich);
  }

  /* Beim Überfahren des Kopfs hebt sich die Karte hervor; der Fokus des
     versteckten Hakens steht als Rahmen um die Karte. */
  .netzkarte--vorschlag:has(> .netzkarte__schalter:hover) {
    background: var(--c-orange-hell);
  }

  .netzkarte--vorschlag:has(> .netzkarte__haken:focus-visible) {
    outline: 3px solid var(--c-orange-tief);
    outline-offset: 2px;
  }
}

/* T-088 K9 (J-23): „Lieferant ergänzen ›" hinter dem Satz ohne Anbieter;
   am Handy 44 px Tippfläche (HA-6). */
.netzkarte__ergaenzen {
  display: inline-block;
  font-weight: 600;
}

@media (max-width: 40rem) {
  .netzkarte__ergaenzen {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

.marke--rechnung {
  border: 1px dashed var(--c-linie-kraeftig);
  background: var(--c-grund);
}

.planung__abgewaehlt {
  margin-top: var(--ab-m);
}

.planung__abgewaehlt .netz__karten {
  margin-top: var(--ab-xs);
}

/* Am Handy eine Frage je Bildschirm: Antworten untereinander in voller
   Breite (MS-14.1). */
@media (max-width: 40rem) {
  .planung__antworten {
    flex-direction: column;
  }

  .planung__antwort,
  .planung__antwort .option {
    width: 100%;
  }
}

/* Nachzug zu T-082 (Orchestrator, 05.11.2026): Am Handy steht „Weiter ›“
   ohne Rollen im Bildschirm — ohne kleinere Schrift, ohne abgeschnittenen
   Text, Knöpfe mindestens 44 px hoch; am PC bleibt alles, wie es ist.
   (a) Kein Rahmenhinweis über der Planungsfolie, wie bei der Agenda
   (MS-10.11) — seit T-084 D2 auf allen Breiten, und der Server lässt ihn
   weg (`view::planung`), nicht das CSS. (b) „‹ Vorige Frage“ und „Weiter ›“
   in einer Zeile; auf dem Vorschlag (T-084 D1, Optik Auftrag N11)
   „‹ Vorige Frage“ und „Neu berechnen“ in einer Zeile, „Planung
   übernehmen“ darunter in voller Breite. (c) Kurze Antworten
   nebeneinander (`planung__antworten--kurz`); passen sie nicht in eine
   Zeile, bricht die Reihe um. Der Haken nimmt seinen Platz auch ungewählt
   ein, damit beim Wählen nichts umspringt. */
@media (max-width: 40rem) {
  .planung .folie__fuss {
    margin-inline: calc(-1 * var(--ab-m));
    padding-inline: var(--ab-m);
  }

  .planung .folie__fuss:has(#planung-uebernehmen) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .planung .folie__fuss:has(#planung-uebernehmen) > .folie__taten {
    display: contents;
  }

  .planung .folie__fuss:has(#planung-uebernehmen) .folie__weg {
    width: auto;
  }

  .planung #planung-uebernehmen {
    grid-column: 1 / -1;
  }

  .planung .folie__fuss:has(#planung-weiter) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .planung .folie__fuss:has(#planung-weiter) > .folie__weg {
    width: auto;
  }

  .planung__antworten--kurz {
    flex-direction: row;
  }

  /* Gleich breit, solange alle in eine Zeile passen; der Text bricht in
     sich nicht um, sonst die Reihe. */
  .planung__antworten--kurz .planung__antwort {
    flex: 1 1 0;
    width: auto;
  }

  .planung__antworten--kurz .option {
    white-space: nowrap;
  }

  .planung__antworten--kurz .planung__wahl:not(:checked) + .option .option__haken {
    display: inline;
    visibility: hidden;
  }
}

/* -------------------------------------------------------------------------
   19. Liste und Formulare der Aufträge (T-084, nur im Testbetrieb): die
       Liste (M-AU-1), Kopfdaten (M-AU-3), Job (M-AU-5) und Job löschen —
       alles außerhalb der Akte (die Akte und ihr Netz: T-085)
   ------------------------------------------------------------------------- */

/* D1 (Optik Auftrag B2, N2): Ein Wort, das länger ist als die Zeile, bricht
   in „Muss vorher erledigt sein“ um. Die Gruppe ist ein fieldset (Vorgabe
   min-width: min-content) und darf schmaler werden als ihr längstes Wort;
   sonst rollte das Job-Formular am Handy seitlich. */
.vorgaenger {
  min-width: 0;
}

.vorgaenger__wahl {
  overflow-wrap: anywhere;
}

/* D1 (Optik Auftrag B12, N5; HA-6): Am Handy sind die Nummer in der
   Leiste des Auftrags (seit dem Review von T-092 nur im Job-Detail ein
   Link), „ändern“ am Profit Center und „Abbrechen“ der Weiche (in der
   Abnahme 21 px) 44 px hohe Tippflächen. Die Nummer der Liste ist seit dem
   Review von T-093 Text; dort ist die ganze Karte die Tippfläche. */
@media (max-width: 40rem) {
  a.auftragsleiste__nummer,
  #auftrag-profit-center-aendern,
  #weiche-abbrechen {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* D5 (Masken-Schema Nr. 60): Stand als Marke, darunter leise der
   Sendungsstand; T-088 K2: dahinter die kleine Marke „heute dran“, wenn der
   Auftrag heute etwas braucht. In der Liste gibt es keine Taten mehr
   (J-35, MS-2.11). */
.auftragsliste__stand {
  min-width: 11rem;
}

.auftragsliste__sendung {
  display: block;
  margin-top: var(--ab-2xs);
  color: var(--c-tinte-weich);
  font-size: var(--fs-klein);
}

/* T-088 K2 (J-32, MS-2.11): Die ganze Zeile öffnet die Akte — ihr Link
   („Auftrag ‹Nummer› öffnen“, sichtbar nur für Vorleser; seit dem Review
   von T-093, T2, ist die Nummer daneben Text und lässt sich markieren, J-46)
   deckt die Zeile. Seit T-105 trägt das der allgemeine Vertrag der Listen
   (`ganz`, `ganz__ziel`, Abschnitt 9): gestreckter Link, Hervorhebung,
   Fokusrahmen, clip-path als Rückfall. Eigen bleibt nur, dass die Zeilen
   schon unter 64rem Karten sind (unten). */

/* T-092 K2 (J-47): Die Auftragsnummer bleibt die Kennung der Zeile, aber
   leise — erkannt wird ein Auftrag an Kunde und Projekt. */
.auftragsliste__nummer .nummer {
  color: var(--c-tinte-weich);
  font-weight: 400;
}

/* D5 (Masken-Schema Nr. 60): Unter 64rem wird jede Zeile eine kompakte
   Karte — mit sieben Spalten rollte die Tabelle sonst im Rahmen. Oben die
   Nummer, klein Profit Center und Auftragsart, darunter Kunde und leise
   das Projekt, der Stand mit dem Sendungsstand und der Owner mit seiner
   Beschriftung; eine leere Zelle (ohne Owner) fällt weg (EL-11). Die
   Karten stehen nebeneinander, soweit Platz ist; die ganze Karte öffnet die
   Akte (T-088 K2). */
@media (width < 64rem) {
  .auftragsliste thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .auftragsliste {
    display: block;
    width: 100%;
  }

  .auftragsliste tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: var(--ab-s);
    width: 100%;
  }

  .auftragsliste tr {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-content: start;
    align-items: center;
    gap: var(--ab-2xs) var(--ab-s);
    width: auto;
    margin: 0;
    padding: var(--ab-s) var(--ab-m);
    border: 1px solid var(--c-linie);
    border-radius: var(--radius);
  }

  .auftragsliste td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
  }

  .auftragsliste td::before {
    content: none;
  }

  .auftragsliste td:nth-child(2),
  .auftragsliste td:nth-child(3),
  .auftragsliste td:nth-child(5) {
    color: var(--c-tinte-weich);
    font-size: var(--fs-klein);
  }

  .auftragsliste td:nth-child(n + 4) {
    grid-column: 1 / -1;
  }

  .auftragsliste td:nth-child(7)::before {
    content: attr(data-label);
    display: block;
    color: var(--c-tinte-weich);
    font-size: var(--fs-klein);
  }

  .auftragsliste td:nth-child(7) {
    margin-top: var(--ab-xs);
  }

  .auftragsliste td:empty {
    display: none;
  }

  .auftragsliste__sendung {
    display: inline;
    margin: 0 0 0 var(--ab-s);
  }

  /* T-088 K2: Die Karte ist die Tippfläche; ihr Rand hebt sich hervor,
     die Fläche der Zellen bleibt durchsichtig. T-105: Der allgemeine
     Vertrag (Abschnitt 9) macht das für Tabellen erst unter 40rem, hier
     sind die Zeilen schon unter 64rem Karten — darum dieselben Regeln bis
     64rem, und kein clip-path (er schnitte den Fokusrahmen ab, der außen
     liegt). */
  .auftragsliste tr.ganz {
    clip-path: none;
  }

  .auftragsliste tr.ganz:has(.ganz__ziel:hover),
  .mit-skript .auftragsliste tr.ganz[data-ganz]:hover:not(:has(a:not([data-ganz-ziel]):hover, button:hover)) {
    border-color: var(--c-orange);
    background: var(--c-orange-hell);
  }

  .auftragsliste tr.ganz:has(.ganz__ziel:hover) > td,
  .mit-skript .auftragsliste tr.ganz[data-ganz]:hover:not(:has(a:not([data-ganz-ziel]):hover, button:hover)) > td {
    background: none;
  }

  .auftragsliste tr.ganz .ganz__ziel::after {
    border-radius: var(--radius);
  }

  .auftragsliste .ganz__ziel:focus-visible::after {
    outline-offset: 0;
  }
}

/* D5: Am Handy der Hinweis der Startseite (RA-12a), der als ganzer Satz
   der Link ist, und die Nummern der Aufträge auf der Projektseite (D8)
   44 px hoch (HA-6). */
@media (max-width: 40rem) {
  #start-hinweis-auftraege,
  #projekt-auftraege-tabelle a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* Orchestrator nach dem Bericht zu T-084 (Befund 6; HA-6): „Zur
     Zeiterfassung“ im Rahmenhinweis ist eine 44 px hohe Tippfläche; der
     negative Rand wie bei den Zeilen-Links (A6-N13) hält den Streifen
     gleich hoch. */
  #start-hinweis-zeiterfassung {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-block: -0.625rem;
  }
}

/* D8 (Masken-Schema 6.2 Nr. 35): Die Aufträge des Projekts setzen sich
   vom Formular und seinen Taten ab — nur lesend, außerhalb des Formulars. */
#projekt-auftraege {
  margin-top: var(--ab-xl);
}

/* D3: Die Sprungmarke „Lieferant wählen ›“ (#job-lieferant) lässt die
   Beschriftung des Felds über ihm im Bild. */
#job-lieferant {
  scroll-margin-top: var(--ab-xl);
}

/* -------------------------------------------------------------------------
   20. Akte und Netz (T-085, nur im Testbetrieb): die Akte (MS-13) mit dem
       Netz als Ebenen-DAG (MS-15) und den Aufgaben (MS-13.8), das
       Job-Detail (MS-16). Die Lage des Netzes rechnet der Server; hier
       wird sie nur gesetzt — über Klassen, nie über Inline-Styles (CSP
       style-src 'self'): nz-b‹n› gibt die Breite in Halbslots (das Raster
       jeder Ebene und jedes Streifens), nz-s‹n› die Spalte einer Karte
       (zwei Halbslots ab n). Ab 64rem das Raster, darunter eine Liste nach
       Schritten. Ohne JavaScript.
   ------------------------------------------------------------------------- */

:root {
  --nz-halbslot: 6.5rem;        /* eine Karte ist zwei Halbslots breit      */
  --nz-halbslot-hoechstens: 17rem; /* T-101 V13: eine Karte höchstens 34rem */
  --nz-streifen: 2.75rem;       /* Höhe des Streifens zwischen den Ebenen   */
}

.akte {
  display: grid;
  gap: var(--ab-l);
  min-width: 0;
}

.akte .untertitel {
  margin-top: 0;
}

/* T-088 K3 (J-24, MS-13.2): Der Kopf der Akte ist eine schmale Zeile —
   Art, Kunde, Projekt als Link, der Stand als kleine Marke, leise der
   Sendungsstand; ohne Kasten, ohne Nummer, ohne „Als Nächstes". Sie bricht
   um, nichts wird gekürzt (EL-18). */
.akte__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ab-2xs) var(--ab-m);
  padding-bottom: var(--ab-s);
  border-bottom: 1px solid var(--c-linie);
}

.akte__art,
.akte__sendung {
  color: var(--c-tinte-weich);
}

.akte__kunde {
  font-weight: 600;
}

.akte__sendung {
  font-size: var(--fs-klein);
}

.akte__kopf .stand {
  align-self: center;
  padding: 0 var(--ab-xs);
  font-size: var(--fs-klein);
}

/* Am Handy hat der Link zum Projekt 44 px Tippfläche (HA-6). */
@media (max-width: 40rem) {
  .akte__projekt {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

.job-detail__kennung {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ab-2xs) var(--ab-s);
  margin: 0;
  color: var(--c-tinte-weich);
}

.akte__nummer {
  color: var(--c-tinte);
  font-weight: 700;
}

.aufgabe__tat .tat {
  display: inline-block;
  margin: 0;
}

/* T-092 K9 (J-54): Die Akte von oben nach unten — Kopfzeile, Reiter, Jobs,
   Zeitplan; nie nebeneinander. Jobs und Zeitplan sind Blöcke mit einer
   Kopfzeile: ein echtes h2, bei „Jobs" gleich daneben das leise „+ Job"
   (J-52). Sie klappen ohne Skript ein (details, anfangs offen).
   T-094 M2 (J-61; Vorgabe des Orchestrators): Beide Köpfe folgen einem
   Muster und stehen auf dem Seitengrund — gleiche Überschrift, gleicher
   Abstand, der Zeiger direkt vor der Überschrift (zu nach rechts, offen
   nach unten). Das summary ist genau so breit wie Zeiger und Überschrift:
   Es trägt den Titel noch einmal als durchsichtigen Text (zugleich sein
   Name für Vorleser) und liegt unter der sichtbaren Überschrift, die keine
   Mausereignisse fängt. Ein Klick auf Zeiger oder Überschrift klappt;
   „+ Job" daneben klappt nicht; keine Fläche bis zum rechten Rand. */
.akte__block {
  --zeiger-platz: 1.75rem;
  position: relative;
  min-width: 0;
}

.akte__blockkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ab-2xs) var(--ab-s);
  min-height: 2.75rem;
  padding-left: var(--zeiger-platz);
}

.akte__blockkopf .untertitel {
  position: relative;
  z-index: 1;
  margin: 0;
  pointer-events: none;
}

.akte__plus {
  position: relative;
  z-index: 1;
}

.akte__schalter {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 2.75rem;
  padding: 0 var(--ab-xs) 0 var(--zeiger-platz);
  border-radius: var(--radius-klein);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.akte__schalter::-webkit-details-marker {
  display: none;
}

/* Derselbe Titel wie das h2, gleich gesetzt, aber durchsichtig: Er macht
   den Schalter genau so breit wie die Überschrift. */
.akte__schaltertext {
  color: transparent;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
}

/* Der Zeiger vor der Überschrift: offen nach unten, zu nach rechts. */
.akte__schalter::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.55rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--c-tinte-weich);
  border-bottom: 2px solid var(--c-tinte-weich);
  transform: translateY(-75%) rotate(45deg);
}

.akte__klappe:not([open]) > .akte__schalter::before {
  transform: translate(-25%, -50%) rotate(-45deg);
}

/* Überfahren: leicht hinterlegt hinter Zeiger und Überschrift. */
.akte__schalter:hover {
  background: var(--c-orange-hell);
}

.akte__schalter:hover::before {
  border-color: var(--c-tinte);
}

.akte__schalter:focus-visible {
  outline: 3px solid var(--c-orange-tief);
  outline-offset: 2px;
}

/* Der Inhalt unter dem Kopf; sein Abstand klappt mit ihm. Innenabstand,
   kein Außenabstand: Der würde über den Rand des Inhalts hinausfallen, und
   der Übergang (M3, `overflow-y: clip`) schnitte dann den Fokusrahmen der
   obersten Karte ab. */
.akte__inhalt {
  padding-top: var(--ab-s);
}

/* T-104 (RA-7): Springt die Rückkehr an den Zeitplan, steht die Meldung
   unter seinem Kopf, vor dem Klappinhalt; dessen Innenabstand trennt sie
   vom Kasten. */
.akte__meldung {
  margin: var(--ab-2xs) 0 0;
}

/* T-092 K4 (J-50): Der Zeitplan steht in einem sanft hinterlegten Kasten,
   so vom Netz getrennt — seine Einträge sind weiße Karten darauf. Der
   Kasten ist so breit wie die Jobs darüber (die Akte besteht aus gleich
   breiten Blöcken, Orchestrator 08.11.2026); seine Einträge behalten ihre
   Lesebreite (höchstens so breit wie ein Formular: Sie sind Sätze).
   T-094 M2: Der Kasten umfasst nur den Inhalt unter dem Kopf. */
.akte__kasten {
  padding: var(--ab-m);
  border-radius: var(--radius);
  background: var(--c-flaeche);
}

.akte__kasten > * {
  max-width: var(--breite-formular);
}

/* T-094 M3 (J-61): glatt — der Zeiger dreht sich kurz, der Inhalt öffnet
   und schließt mit sanftem Übergang, wo der Browser Höhen bis „auto“
   überblenden kann (`interpolate-size`, `::details-content`); sonst ohne.
   Wer weniger Bewegung eingestellt hat, bekommt beides nicht. Ein gemerkt
   eingeklappter Block ist schon vor dem ersten Bild zu (hilfen.js mit
   `blocking="render"`), darum spielt beim Laden kein Übergang. */
@media (prefers-reduced-motion: no-preference) {
  .akte__schalter::before {
    transition: transform 0.15s ease;
  }

  @supports (interpolate-size: allow-keywords) {
    .akte__klappe {
      interpolate-size: allow-keywords;
    }

    .akte__klappe::details-content {
      height: 0;
      overflow-y: clip;
      transition: height 0.2s ease, content-visibility 0.2s ease allow-discrete;
    }

    .akte__klappe[open]::details-content {
      height: auto;
    }
  }
}

/* Unter dem Zeitplan leise die Alternative (T-088 K4); am Handy 44 px
   Tippfläche (HA-6). */
.aufgaben__alternative {
  margin: var(--ab-s) 0 0;
}

.aufgaben__alternative a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--c-tinte-weich);
}

.aufgaben__alternative a:hover {
  color: var(--c-link);
}

/* T-089 F4 (J-28, MS-13.8): Eine eigene Aufgabe wird an ihrer Stelle
   eingefügt — ein leises „+" vor dem ersten Eintrag und in der Lücke nach
   jedem. Sichtbar ist ein kleiner Kreis; am PC deutlich beim Überfahren
   des Eintrags und bei Fokus. Der Link liegt über dem gestreckten Link des
   Eintrags (z-index). Am PC ist er 44 px breit und knapp so hoch wie der
   Raum zwischen Tat und nächstem Eintrag (Lücke und beide Innenabstände,
   2 px weniger), damit er weder Tat noch Text überdeckt (Review S, T1);
   am Handy 44 × 44 px (Tippfläche, HA-6, unten).
   T-094 G4 (Prüfwelle 09.11.2026, Prüfer G): leise durch das Grau der
   Hilfstexte, nicht durch Durchsicht — halb durchsichtig erreichte das
   „+" nur 2,1 : 1 Kontrast; beim Überfahren und mit Fokus orange. */
.aufgabe__einfuegen {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: calc(3 * var(--ab-s) - 2px);
  color: var(--c-tinte-weich);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.aufgabe__einfuegen::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--c-linie-kraeftig);
  border-radius: 50%;
  background: var(--c-grund);
}

.aufgabe > .aufgabe__einfuegen {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, calc(50% + var(--ab-s) / 2));
}

.aufgaben__anfang {
  display: grid;
  justify-items: center;
  margin: 0 0 calc(-1 * var(--ab-xs));
}

/* Das „+" nach dem letzten Eintrag ragt unter die Liste; was folgt (die
   Alternative, „Erledigte zeigen"), beginnt erst darunter. */
.aufgaben__anfang + .aufgabenliste {
  margin-bottom: 1.5rem;
}

.aufgabe:hover > .aufgabe__einfuegen,
.aufgabe__einfuegen:hover,
.aufgabe__einfuegen:focus-visible {
  color: var(--c-orange-tief);
}

.aufgabe__einfuegen:hover::before {
  border-color: var(--c-orange-tief);
  background: var(--c-orange-hell);
}

.aufgabe__einfuegen:focus-visible {
  outline: none;
}

.aufgabe__einfuegen:focus-visible::before {
  outline: 3px solid var(--c-orange-tief);
  outline-offset: 2px;
}

/* Am Handy steht das „+" klein, aber immer sichtbar, mit 44 × 44 px
   Tippfläche; die Lücke zwischen den Einträgen wächst, damit sie kaum in
   die Einträge ragt, und unter der Liste bleibt Platz für das letzte „+"
   (nur die offene Liste, sie folgt immer auf das „+" am Anfang; die
   Grundregel steht weiter unten, darum der genauere Selektor). */
@media (max-width: 40rem) {
  .aufgaben__anfang + .aufgabenliste {
    gap: 1.75rem;
    margin-bottom: 2.5rem;
  }

  .aufgabe > .aufgabe__einfuegen {
    transform: translate(-50%, calc(50% + 0.875rem));
  }

  .aufgabe__einfuegen {
    height: 2.75rem;
  }
}

/* T-088 K7 (MS-13.11): die Reiter der Angaben; ein Reiter allein ist eine
   Karte. Seit T-092 K6 (J-48) mit geteiltem Kopf: links die erste
   Überschrift (die der ersten Gruppe bzw. der Satz), rechts die Tat — keine
   eigene Zeile nur für den Knopf. Darunter die Gruppen der Angaben. Der
   Kopf ist seit T-097 G2 der gemeinsame Baustein `.tafelkopf` (Abschnitt
   11), derselbe wie in den Ansichten der Stammdaten; bis dahin trug die
   Akte eigene Regeln mit denselben Maßen. */
.akte__reiter .reiter__tafel {
  padding: var(--ab-m);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius);
  background: var(--c-grund);
}

.akte__gruppe + .akte__gruppe {
  margin-top: var(--ab-m);
}

/* Die Überschriften der weiteren Gruppen: gesetzt wie die im Kopf. */
.akte__gruppentitel {
  margin: 0 0 var(--ab-xs);
  font-size: var(--fs-text);
  font-weight: 700;
}

.akte__tafelsatz {
  margin: 0 0 var(--ab-s);
}

.akte__tafel .angaben {
  margin: 0;
}

/* Der Zeitplan (MS-13.8): je Eintrag Marke, Job, Satz und eine Tat. */
.aufgabenliste {
  display: grid;
  gap: var(--ab-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.aufgabe {
  display: grid;
  gap: var(--ab-xs);
  margin: 0;
  padding: var(--ab-s) var(--ab-m);
  border: 1px solid var(--c-linie);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--c-grund);
}

.aufgabe--warnung {
  border-left-color: var(--c-fehler);
}

.aufgabe__zeile {
  margin: 0;
  overflow-wrap: anywhere;
}

.aufgabe__marke {
  display: inline-block;
  padding: 0 var(--ab-xs);
  border-radius: var(--radius-klein);
  font-size: var(--fs-klein);
  font-weight: 600;
  white-space: nowrap;
}

.aufgabe__marke--ueberfaellig {
  background: var(--c-fehler-grund);
  color: var(--c-fehler);
}

.aufgabe__marke--heute {
  background: var(--c-orange);
  color: var(--c-auf-orange);
}

.aufgabe__marke--bald {
  background: var(--c-orange-hell);
  color: var(--c-orange-tief);
}

/* T-092 K2 (J-47): Der Job einer eigenen Aufgabe steht mit seinem Namen
   leise unter dem Satz — keine Nummer in der Akte. */
.aufgabe__job {
  margin: 0;
  font-size: var(--fs-klein);
}

.aufgabe__bezug {
  color: var(--c-tinte-weich);
}

.aufgabe__bezug:hover {
  color: var(--c-link);
}

/* T-088 K6 (J-32, MS-13.8): Der ganze Eintrag ist klickbar — sein Ziel
   (der Job einer abgeleiteten, der Satz einer eigenen Aufgabe) deckt ihn
   mit ::after; die Tat und ein zweiter Link liegen darüber. Beim
   Überfahren heben sich Rand und Fläche hervor, der Fokus steht als Rahmen
   um den Eintrag. */
.aufgabe {
  position: relative;
}

.aufgabe__ziel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.aufgabe__ziel:focus-visible {
  outline: none;
}

.aufgabe__ziel:focus-visible::after {
  outline: 3px solid var(--c-orange-tief);
  outline-offset: 2px;
}

.aufgabe__bezug:not(.aufgabe__ziel),
.aufgabe__tat {
  position: relative;
  z-index: 1;
}

/* Die Tat ist nur so breit wie ihr Knopf; die freie Fläche daneben gehört
   zum Ziel des ganzen Eintrags (J-32: „man klickt den kompletten
   Listeneintrag an"). */
.aufgabe__tat {
  justify-self: start;
}

.aufgabe:has(.aufgabe__ziel:hover) {
  border-color: var(--c-orange-tief);
  background: var(--c-orange-hell);
}

/* T-088 K4 (J-24): Die erste offene Aufgabe ist „Als Nächstes" — Rand und
   Fläche in der Akzentfarbe, vorn die kleine Marke. Sie ersetzt „Als
   Nächstes" im Kopf. */
.aufgabe--naechstes {
  border-color: var(--c-orange);
  border-left-width: 6px;
  background: var(--c-orange-hell);
  box-shadow: 0 0 0 1px var(--c-orange), var(--schatten);
}

.aufgabe--naechstes.aufgabe--warnung {
  border-left-color: var(--c-fehler);
}

.aufgabe__marke--naechstes {
  border: 1px solid var(--c-orange-tief);
  background: var(--c-grund);
  color: var(--c-orange-tief);
}

/* Der Satz zum Einfügen über dem Job-Formular (MS-15.4). */
.meldung--hinweis {
  border-left-color: var(--c-orange);
  background: var(--c-orange-hell);
}

/* Das Netz (MS-15): der Rahmen rollt, nie die Seite. */
.nz-rahmen {
  min-width: 0;
}

.nz-rahmen:focus-visible {
  outline: 3px solid var(--c-orange-tief);
  outline-offset: 2px;
}

.nz-ebene__schritt {
  margin: var(--ab-m) 0 var(--ab-xs);
  color: var(--c-tinte-weich);
  font-size: var(--fs-klein);
  font-weight: 600;
}

.nz-ebene:first-child .nz-ebene__schritt {
  margin-top: 0;
}

.nz-streifen,
.nz-platzhalter {
  display: none;
}

/* Die Karte: Die Bezeichnung ist der Link aufs Detail und deckt die ganze
   Karte (MS-15.2); seit T-088 K5 trägt sie keinen Knopf mehr, nur am Ende
   eines Strangs das „+" (MS-15.4). */
.nz-karte {
  position: relative;
  min-width: 0;
  margin: 0 0 var(--ab-s);
  padding: var(--ab-s) var(--ab-m);
  border: 1px solid var(--c-linie);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--c-grund);
  box-shadow: var(--schatten);
  scroll-margin: var(--ab-m);
}

/* U4 (Review T-085): Die Karte, an die eine Rückkehr springt — nach dem
   Einfügen die neue —, trägt einen Ring in der Farbe der Marke: die
   Rückmeldung, wo sie steht (nur CSS über :target). */
.nz-karte:target {
  box-shadow: 0 0 0 3px var(--c-orange), var(--schatten);
}

.nz-karte p {
  margin: 0;
}

/* T-104 (RA-7): Springt die Rückkehr an eine Karte, steht die Meldung oben
   in ihr — knapp, die Karte ist schmal. */
.nz-karte .nz-karte__meldung {
  margin: 0 0 var(--ab-xs);
  padding: var(--ab-2xs) var(--ab-s);
}

.nz-karte__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ab-2xs) var(--ab-xs);
}

.nz-karte__titel {
  margin: var(--ab-2xs) 0;
  font-size: var(--fs-text);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.nz-karte__link {
  color: inherit;
  text-decoration: none;
}

.nz-karte__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* T-088 K5 (J-32): Beim Überfahren hebt sich die ganze Karte hervor, Rand
   und Fläche — nicht nur die Bezeichnung. Über dem „+" nicht (eigenes Ziel). */
.nz-karte:has(.nz-karte__link:hover) {
  border-color: var(--c-orange-tief);
  background: var(--c-orange-hell);
  box-shadow: 0 0 0 1px var(--c-orange-tief), var(--schatten);
}

.nz-karte__link:focus-visible {
  outline: none;
}

.nz-karte__link:focus-visible::after {
  outline: 3px solid var(--c-orange-tief);
  outline-offset: 2px;
}

.nz-karte__zeile,
.nz-karte__wartet {
  color: var(--c-tinte-weich);
  font-size: var(--fs-klein);
  overflow-wrap: anywhere;
}

.nz-karte__zeile--fehlt {
  color: var(--c-orange-tief);
  font-weight: 600;
}

/* T-101 V1 (J-39): Der Termin ist erreicht — heute oder vorbei — und steht
   in der Hinweisfarbe, mit der Marke dahinter. */
.nz-karte__zeile--erreicht {
  color: var(--c-orange-tief);
  font-weight: 600;
}

/* T-088 K5 (MS-15.4): Das „+" am Ende eines Strangs. In der Liste nach
   Schritten (Handy, zu breites Netz) steht es unten rechts in der Karte;
   im Raster mittig unter der Karte, im Streifen darunter (Abschnitt unten,
   ab 64rem). */
.nz-plus.nz-plus--ende {
  display: grid;
  margin: var(--ab-xs) 0 0 auto;
}

.nz-karte--bereit {
  border-color: var(--c-orange);
  box-shadow: 0 0 0 1px var(--c-orange), var(--schatten);
}

.nz-karte--beauftragt {
  border-left-color: var(--c-orange);
  background: var(--c-orange-hell);
}

.nz-karte--erledigt {
  border-left-color: var(--c-erfolg);
  background: var(--c-flaeche);
  box-shadow: none;
}

.nz-karte--erledigt .nz-karte__titel,
.nz-karte--abgesagt .nz-karte__titel {
  color: var(--c-tinte-weich);
  font-weight: 400;
}

.nz-karte--abgesagt {
  border-style: dashed;
  background: var(--c-flaeche);
  box-shadow: none;
}

.nz-karte--abgesagt .nz-karte__titel {
  text-decoration: line-through;
}

/* „+": klein im Bild, 44 px zum Tippen (N5). */
.nz-plus {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--c-linie-kraeftig);
  border-radius: 50%;
  background: var(--c-grund);
  color: var(--c-link);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.nz-plus::after {
  content: "";
  position: absolute;
  inset: -0.5rem;
}

.nz-plus:hover {
  border-color: var(--c-orange-tief);
  background: var(--c-orange-hell);
}

/* Der Punkt „Rechnung" (R22). */
.nz-rechnung {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ab-2xs) var(--ab-xs);
  margin: var(--ab-s) 0 0;
  padding: var(--ab-xs) var(--ab-m);
  border: 2px dashed var(--c-linie-kraeftig);
  border-radius: 999px;
  background: var(--c-grund);
}

.nz-rechnung__titel {
  font-weight: 700;
}

.nz-rechnung--moeglich {
  border-style: solid;
  border-color: var(--c-erfolg);
  background: var(--c-erfolg-grund);
  color: var(--c-erfolg);
}

/* Am Handy die kompakte Liste (MS-15.5): Nummer und Bezeichnung in einer
   Zeile, Termin und Lieferant in einer, „wartet auf" mit Namen. */
@media (max-width: 63.99rem) {
  .nz-karte__kopf,
  .nz-karte__titel {
    display: inline;
  }

  .nz-karte__kopf::after {
    content: " ";
  }

  .nz-karte__zeile {
    display: inline;
  }

  .nz-karte__titel + .nz-karte__zeile::before {
    content: "\A";
    white-space: pre;
  }

  .nz-karte__zeile + .nz-karte__zeile::before {
    content: " · ";
  }

  .nz-karte__wartet {
    margin-top: var(--ab-2xs);
  }

  /* N5: Tippflächen am Handy mindestens 44 px — die Knöpfe der Akte und
     des Job-Details und der Job einer eigenen Aufgabe (ohne die Zeile zu
     strecken: der negative Rand hält den Zeilenabstand). */
  .akte .knopf--leise {
    min-height: 2.75rem;
  }

  .aufgabe__bezug,
  .akte #auftrag-leiste-nummer {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-block: -0.625rem;
  }
}

/* Ab 64rem das Netz als Raster (seit T-092 K9 in voller Breite, der
   Zeitplan darunter). */
@media (min-width: 64rem) {
  .nz-rahmen {
    overflow-x: auto;
    /* T-101 Z2 (Befund aus T-094): Der Rahmen rollt und schnitte sonst den
       Fokusrahmen der obersten Karte oben ab. */
    padding-top: var(--ab-xs);
    padding-bottom: var(--ab-xs);
  }

  .nz {
    display: grid;
    /* T-101 V13 (Prüfer V): Eine Karte ist höchstens 34rem breit (zwei
       Halbslots, `--nz-halbslot-hoechstens`), das Raster sitzt mittig — eine
       einzelne Kette läuft nicht mehr über die volle Breite. */
    margin-inline: auto;
  }

  .nz-ebene,
  .nz-streifen {
    display: grid;
    align-items: stretch;
  }

  /* T-094 G9 (Prüfwelle 09.11.2026, Prüfer G; WCAG 1.3.1): Am PC zeigen
     die Linien, wer auf wen wartet — „Schritt n" und „wartet auf …" stehen
     dann nur für Vorleser da (Muster `.nur-vorleser`), nicht ganz weg. */
  .nz-ebene__schritt,
  .nz-karte__wartet {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .nz-karte {
    display: grid;
    align-content: start;
    gap: var(--ab-2xs);
    margin: 0 var(--ab-xs);
    padding: var(--ab-s);
  }

  .nz-platzhalter {
    display: block;
    justify-self: center;
    width: 2px;
    min-height: 2rem;
    background: var(--c-linie-kraeftig);
  }

  .nz-platzhalter--erledigt {
    background: var(--c-erfolg);
  }

  .nz-platzhalter--rechnung {
    width: 0;
    border-left: 2px dashed var(--c-linie-kraeftig);
    background: none;
  }

  .nz-streifen {
    height: var(--nz-streifen);
  }

  .nz-streifen__kanten {
    grid-row: 1;
    grid-column: 1 / -1;
    width: 100%;
    height: var(--nz-streifen);
  }

  .nz-plus {
    grid-row: 1;
    align-self: center;
    justify-self: center;
  }

  /* T-088 K5 (MS-15.4): Das „+" am Strangende sitzt im Raster mittig unter
     der Karte, im Streifen darunter (den es dafür immer gibt); liegt dort
     schon das „+" einer Kante, unten mittig in der Karte. In der Liste nach
     Schritten bleibt es unten rechts. */
  .nz-plus.nz-plus--ende {
    grid-row: auto;
  }

  .nz-rahmen:not(.nz-rahmen--liste) .nz-plus.nz-plus--ende:not(.nz-plus--innen) {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: calc(50% - 0.875rem);
    margin: 0;
  }

  .nz-rahmen:not(.nz-rahmen--liste) .nz-plus.nz-plus--innen {
    justify-self: center;
    margin: var(--ab-2xs) 0 0;
  }

  .nz-rahmen--liste .nz-plus.nz-plus--ende {
    justify-self: end;
  }

  .nz-linie {
    fill: none;
    stroke: var(--c-linie-kraeftig);
    stroke-width: 2px;
  }

  .nz-linie--erledigt {
    stroke: var(--c-erfolg);
  }

  .nz-linie--rechnung {
    stroke-dasharray: 6 4;
  }

  .nz-rechnung {
    align-self: center;
    justify-self: center;
    margin: 0;
  }

  .nz-b2 { min-width: calc(2 * var(--nz-halbslot)); max-width: calc(2 * var(--nz-halbslot-hoechstens)); }
  .nz-b2 > .nz-ebene,
  .nz-b2 > .nz-streifen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nz-b3 { min-width: calc(3 * var(--nz-halbslot)); max-width: calc(3 * var(--nz-halbslot-hoechstens)); }
  .nz-b3 > .nz-ebene,
  .nz-b3 > .nz-streifen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nz-b4 { min-width: calc(4 * var(--nz-halbslot)); max-width: calc(4 * var(--nz-halbslot-hoechstens)); }
  .nz-b4 > .nz-ebene,
  .nz-b4 > .nz-streifen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nz-b5 { min-width: calc(5 * var(--nz-halbslot)); max-width: calc(5 * var(--nz-halbslot-hoechstens)); }
  .nz-b5 > .nz-ebene,
  .nz-b5 > .nz-streifen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .nz-b6 { min-width: calc(6 * var(--nz-halbslot)); max-width: calc(6 * var(--nz-halbslot-hoechstens)); }
  .nz-b6 > .nz-ebene,
  .nz-b6 > .nz-streifen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .nz-b7 { min-width: calc(7 * var(--nz-halbslot)); max-width: calc(7 * var(--nz-halbslot-hoechstens)); }
  .nz-b7 > .nz-ebene,
  .nz-b7 > .nz-streifen { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .nz-b8 { min-width: calc(8 * var(--nz-halbslot)); max-width: calc(8 * var(--nz-halbslot-hoechstens)); }
  .nz-b8 > .nz-ebene,
  .nz-b8 > .nz-streifen { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .nz-b9 { min-width: calc(9 * var(--nz-halbslot)); max-width: calc(9 * var(--nz-halbslot-hoechstens)); }
  .nz-b9 > .nz-ebene,
  .nz-b9 > .nz-streifen { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .nz-b10 { min-width: calc(10 * var(--nz-halbslot)); max-width: calc(10 * var(--nz-halbslot-hoechstens)); }
  .nz-b10 > .nz-ebene,
  .nz-b10 > .nz-streifen { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .nz-b11 { min-width: calc(11 * var(--nz-halbslot)); max-width: calc(11 * var(--nz-halbslot-hoechstens)); }
  .nz-b11 > .nz-ebene,
  .nz-b11 > .nz-streifen { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .nz-b12 { min-width: calc(12 * var(--nz-halbslot)); max-width: calc(12 * var(--nz-halbslot-hoechstens)); }
  .nz-b12 > .nz-ebene,
  .nz-b12 > .nz-streifen { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .nz-b13 { min-width: calc(13 * var(--nz-halbslot)); max-width: calc(13 * var(--nz-halbslot-hoechstens)); }
  .nz-b13 > .nz-ebene,
  .nz-b13 > .nz-streifen { grid-template-columns: repeat(13, minmax(0, 1fr)); }
  .nz-b14 { min-width: calc(14 * var(--nz-halbslot)); max-width: calc(14 * var(--nz-halbslot-hoechstens)); }
  .nz-b14 > .nz-ebene,
  .nz-b14 > .nz-streifen { grid-template-columns: repeat(14, minmax(0, 1fr)); }
  .nz-b15 { min-width: calc(15 * var(--nz-halbslot)); max-width: calc(15 * var(--nz-halbslot-hoechstens)); }
  .nz-b15 > .nz-ebene,
  .nz-b15 > .nz-streifen { grid-template-columns: repeat(15, minmax(0, 1fr)); }
  .nz-b16 { min-width: calc(16 * var(--nz-halbslot)); max-width: calc(16 * var(--nz-halbslot-hoechstens)); }
  .nz-b16 > .nz-ebene,
  .nz-b16 > .nz-streifen { grid-template-columns: repeat(16, minmax(0, 1fr)); }
  .nz-b17 { min-width: calc(17 * var(--nz-halbslot)); max-width: calc(17 * var(--nz-halbslot-hoechstens)); }
  .nz-b17 > .nz-ebene,
  .nz-b17 > .nz-streifen { grid-template-columns: repeat(17, minmax(0, 1fr)); }
  .nz-b18 { min-width: calc(18 * var(--nz-halbslot)); max-width: calc(18 * var(--nz-halbslot-hoechstens)); }
  .nz-b18 > .nz-ebene,
  .nz-b18 > .nz-streifen { grid-template-columns: repeat(18, minmax(0, 1fr)); }
  .nz-b19 { min-width: calc(19 * var(--nz-halbslot)); max-width: calc(19 * var(--nz-halbslot-hoechstens)); }
  .nz-b19 > .nz-ebene,
  .nz-b19 > .nz-streifen { grid-template-columns: repeat(19, minmax(0, 1fr)); }
  .nz-b20 { min-width: calc(20 * var(--nz-halbslot)); max-width: calc(20 * var(--nz-halbslot-hoechstens)); }
  .nz-b20 > .nz-ebene,
  .nz-b20 > .nz-streifen { grid-template-columns: repeat(20, minmax(0, 1fr)); }
  .nz-b21 { min-width: calc(21 * var(--nz-halbslot)); max-width: calc(21 * var(--nz-halbslot-hoechstens)); }
  .nz-b21 > .nz-ebene,
  .nz-b21 > .nz-streifen { grid-template-columns: repeat(21, minmax(0, 1fr)); }
  .nz-b22 { min-width: calc(22 * var(--nz-halbslot)); max-width: calc(22 * var(--nz-halbslot-hoechstens)); }
  .nz-b22 > .nz-ebene,
  .nz-b22 > .nz-streifen { grid-template-columns: repeat(22, minmax(0, 1fr)); }
  .nz-b23 { min-width: calc(23 * var(--nz-halbslot)); max-width: calc(23 * var(--nz-halbslot-hoechstens)); }
  .nz-b23 > .nz-ebene,
  .nz-b23 > .nz-streifen { grid-template-columns: repeat(23, minmax(0, 1fr)); }
  .nz-b24 { min-width: calc(24 * var(--nz-halbslot)); max-width: calc(24 * var(--nz-halbslot-hoechstens)); }
  .nz-b24 > .nz-ebene,
  .nz-b24 > .nz-streifen { grid-template-columns: repeat(24, minmax(0, 1fr)); }
  .nz-b25 { min-width: calc(25 * var(--nz-halbslot)); max-width: calc(25 * var(--nz-halbslot-hoechstens)); }
  .nz-b25 > .nz-ebene,
  .nz-b25 > .nz-streifen { grid-template-columns: repeat(25, minmax(0, 1fr)); }
  .nz-b26 { min-width: calc(26 * var(--nz-halbslot)); max-width: calc(26 * var(--nz-halbslot-hoechstens)); }
  .nz-b26 > .nz-ebene,
  .nz-b26 > .nz-streifen { grid-template-columns: repeat(26, minmax(0, 1fr)); }
  .nz-b27 { min-width: calc(27 * var(--nz-halbslot)); max-width: calc(27 * var(--nz-halbslot-hoechstens)); }
  .nz-b27 > .nz-ebene,
  .nz-b27 > .nz-streifen { grid-template-columns: repeat(27, minmax(0, 1fr)); }
  .nz-b28 { min-width: calc(28 * var(--nz-halbslot)); max-width: calc(28 * var(--nz-halbslot-hoechstens)); }
  .nz-b28 > .nz-ebene,
  .nz-b28 > .nz-streifen { grid-template-columns: repeat(28, minmax(0, 1fr)); }
  .nz-b29 { min-width: calc(29 * var(--nz-halbslot)); max-width: calc(29 * var(--nz-halbslot-hoechstens)); }
  .nz-b29 > .nz-ebene,
  .nz-b29 > .nz-streifen { grid-template-columns: repeat(29, minmax(0, 1fr)); }
  .nz-b30 { min-width: calc(30 * var(--nz-halbslot)); max-width: calc(30 * var(--nz-halbslot-hoechstens)); }
  .nz-b30 > .nz-ebene,
  .nz-b30 > .nz-streifen { grid-template-columns: repeat(30, minmax(0, 1fr)); }
  .nz-b31 { min-width: calc(31 * var(--nz-halbslot)); max-width: calc(31 * var(--nz-halbslot-hoechstens)); }
  .nz-b31 > .nz-ebene,
  .nz-b31 > .nz-streifen { grid-template-columns: repeat(31, minmax(0, 1fr)); }
  .nz-b32 { min-width: calc(32 * var(--nz-halbslot)); max-width: calc(32 * var(--nz-halbslot-hoechstens)); }
  .nz-b32 > .nz-ebene,
  .nz-b32 > .nz-streifen { grid-template-columns: repeat(32, minmax(0, 1fr)); }
  .nz-b33 { min-width: calc(33 * var(--nz-halbslot)); max-width: calc(33 * var(--nz-halbslot-hoechstens)); }
  .nz-b33 > .nz-ebene,
  .nz-b33 > .nz-streifen { grid-template-columns: repeat(33, minmax(0, 1fr)); }
  .nz-b34 { min-width: calc(34 * var(--nz-halbslot)); max-width: calc(34 * var(--nz-halbslot-hoechstens)); }
  .nz-b34 > .nz-ebene,
  .nz-b34 > .nz-streifen { grid-template-columns: repeat(34, minmax(0, 1fr)); }
  .nz-b35 { min-width: calc(35 * var(--nz-halbslot)); max-width: calc(35 * var(--nz-halbslot-hoechstens)); }
  .nz-b35 > .nz-ebene,
  .nz-b35 > .nz-streifen { grid-template-columns: repeat(35, minmax(0, 1fr)); }
  .nz-b36 { min-width: calc(36 * var(--nz-halbslot)); max-width: calc(36 * var(--nz-halbslot-hoechstens)); }
  .nz-b36 > .nz-ebene,
  .nz-b36 > .nz-streifen { grid-template-columns: repeat(36, minmax(0, 1fr)); }
  .nz-b37 { min-width: calc(37 * var(--nz-halbslot)); max-width: calc(37 * var(--nz-halbslot-hoechstens)); }
  .nz-b37 > .nz-ebene,
  .nz-b37 > .nz-streifen { grid-template-columns: repeat(37, minmax(0, 1fr)); }
  .nz-b38 { min-width: calc(38 * var(--nz-halbslot)); max-width: calc(38 * var(--nz-halbslot-hoechstens)); }
  .nz-b38 > .nz-ebene,
  .nz-b38 > .nz-streifen { grid-template-columns: repeat(38, minmax(0, 1fr)); }
  .nz-b39 { min-width: calc(39 * var(--nz-halbslot)); max-width: calc(39 * var(--nz-halbslot-hoechstens)); }
  .nz-b39 > .nz-ebene,
  .nz-b39 > .nz-streifen { grid-template-columns: repeat(39, minmax(0, 1fr)); }
  .nz-b40 { min-width: calc(40 * var(--nz-halbslot)); max-width: calc(40 * var(--nz-halbslot-hoechstens)); }
  .nz-b40 > .nz-ebene,
  .nz-b40 > .nz-streifen { grid-template-columns: repeat(40, minmax(0, 1fr)); }
  .nz-b41 { min-width: calc(41 * var(--nz-halbslot)); max-width: calc(41 * var(--nz-halbslot-hoechstens)); }
  .nz-b41 > .nz-ebene,
  .nz-b41 > .nz-streifen { grid-template-columns: repeat(41, minmax(0, 1fr)); }
  .nz-b42 { min-width: calc(42 * var(--nz-halbslot)); max-width: calc(42 * var(--nz-halbslot-hoechstens)); }
  .nz-b42 > .nz-ebene,
  .nz-b42 > .nz-streifen { grid-template-columns: repeat(42, minmax(0, 1fr)); }
  .nz-b43 { min-width: calc(43 * var(--nz-halbslot)); max-width: calc(43 * var(--nz-halbslot-hoechstens)); }
  .nz-b43 > .nz-ebene,
  .nz-b43 > .nz-streifen { grid-template-columns: repeat(43, minmax(0, 1fr)); }
  .nz-b44 { min-width: calc(44 * var(--nz-halbslot)); max-width: calc(44 * var(--nz-halbslot-hoechstens)); }
  .nz-b44 > .nz-ebene,
  .nz-b44 > .nz-streifen { grid-template-columns: repeat(44, minmax(0, 1fr)); }
  .nz-b45 { min-width: calc(45 * var(--nz-halbslot)); max-width: calc(45 * var(--nz-halbslot-hoechstens)); }
  .nz-b45 > .nz-ebene,
  .nz-b45 > .nz-streifen { grid-template-columns: repeat(45, minmax(0, 1fr)); }
  .nz-b46 { min-width: calc(46 * var(--nz-halbslot)); max-width: calc(46 * var(--nz-halbslot-hoechstens)); }
  .nz-b46 > .nz-ebene,
  .nz-b46 > .nz-streifen { grid-template-columns: repeat(46, minmax(0, 1fr)); }
  .nz-b47 { min-width: calc(47 * var(--nz-halbslot)); max-width: calc(47 * var(--nz-halbslot-hoechstens)); }
  .nz-b47 > .nz-ebene,
  .nz-b47 > .nz-streifen { grid-template-columns: repeat(47, minmax(0, 1fr)); }
  .nz-b48 { min-width: calc(48 * var(--nz-halbslot)); max-width: calc(48 * var(--nz-halbslot-hoechstens)); }
  .nz-b48 > .nz-ebene,
  .nz-b48 > .nz-streifen { grid-template-columns: repeat(48, minmax(0, 1fr)); }
  .nz-s1 { grid-column: 1 / span 2; }
  .nz-s2 { grid-column: 2 / span 2; }
  .nz-s3 { grid-column: 3 / span 2; }
  .nz-s4 { grid-column: 4 / span 2; }
  .nz-s5 { grid-column: 5 / span 2; }
  .nz-s6 { grid-column: 6 / span 2; }
  .nz-s7 { grid-column: 7 / span 2; }
  .nz-s8 { grid-column: 8 / span 2; }
  .nz-s9 { grid-column: 9 / span 2; }
  .nz-s10 { grid-column: 10 / span 2; }
  .nz-s11 { grid-column: 11 / span 2; }
  .nz-s12 { grid-column: 12 / span 2; }
  .nz-s13 { grid-column: 13 / span 2; }
  .nz-s14 { grid-column: 14 / span 2; }
  .nz-s15 { grid-column: 15 / span 2; }
  .nz-s16 { grid-column: 16 / span 2; }
  .nz-s17 { grid-column: 17 / span 2; }
  .nz-s18 { grid-column: 18 / span 2; }
  .nz-s19 { grid-column: 19 / span 2; }
  .nz-s20 { grid-column: 20 / span 2; }
  .nz-s21 { grid-column: 21 / span 2; }
  .nz-s22 { grid-column: 22 / span 2; }
  .nz-s23 { grid-column: 23 / span 2; }
  .nz-s24 { grid-column: 24 / span 2; }
  .nz-s25 { grid-column: 25 / span 2; }
  .nz-s26 { grid-column: 26 / span 2; }
  .nz-s27 { grid-column: 27 / span 2; }
  .nz-s28 { grid-column: 28 / span 2; }
  .nz-s29 { grid-column: 29 / span 2; }
  .nz-s30 { grid-column: 30 / span 2; }
  .nz-s31 { grid-column: 31 / span 2; }
  .nz-s32 { grid-column: 32 / span 2; }
  .nz-s33 { grid-column: 33 / span 2; }
  .nz-s34 { grid-column: 34 / span 2; }
  .nz-s35 { grid-column: 35 / span 2; }
  .nz-s36 { grid-column: 36 / span 2; }
  .nz-s37 { grid-column: 37 / span 2; }
  .nz-s38 { grid-column: 38 / span 2; }
  .nz-s39 { grid-column: 39 / span 2; }
  .nz-s40 { grid-column: 40 / span 2; }
  .nz-s41 { grid-column: 41 / span 2; }
  .nz-s42 { grid-column: 42 / span 2; }
  .nz-s43 { grid-column: 43 / span 2; }
  .nz-s44 { grid-column: 44 / span 2; }
  .nz-s45 { grid-column: 45 / span 2; }
  .nz-s46 { grid-column: 46 / span 2; }
  .nz-s47 { grid-column: 47 / span 2; }

  /* Die Mitte einer Kante zwischen zwei Halbslots: das „+" spannt drei. */
  .nz-plus--halb {
    grid-column-end: span 3;
  }
}

/* B2 (Review T-085, MS-15.3): Ist das Netz breiter als das Raster (48
   Halbslots), steht es auch am PC als Liste nach Schritten — die Karten
   eines Schritts nebeneinander, soweit Platz ist, „wartet auf" mit Namen,
   darüber der Satz, warum. Am Handy ist es ohnehin die Liste. */
.nz-zu-breit {
  margin: 0 0 var(--ab-s);
  color: var(--c-tinte-weich);
}

@media (max-width: 63.99rem) {
  .nz-zu-breit {
    display: none;
  }
}

@media (min-width: 64rem) {
  .nz-rahmen--liste .nz-ebene {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--ab-s);
  }

  .nz-rahmen--liste .nz-ebene + .nz-ebene {
    margin-top: var(--ab-m);
  }

  /* Sichtbar wie am Handy: hebt das Muster `.nur-vorleser` von oben auf
     (T-094 G9). */
  .nz-rahmen--liste .nz-ebene__schritt,
  .nz-rahmen--liste .nz-karte__wartet {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .nz-rahmen--liste .nz-ebene__schritt {
    display: block;
    grid-column: 1 / -1;
    margin: 0;
  }

  .nz-rahmen--liste .nz-karte {
    margin: 0;
  }

  .nz-rahmen--liste .nz-karte__wartet {
    display: block;
  }

  .nz-rahmen--liste .nz-rechnung {
    justify-self: start;
  }
}

/* Das Job-Detail (MS-16). */
.job-detail__kopf {
  display: grid;
  gap: var(--ab-s);
}

.job-detail__kopf .angaben {
  margin: 0;
}

.job-detail__nachbarn {
  display: grid;
  gap: var(--ab-l);
}

@media (min-width: 40.01rem) {
  .job-detail__nachbarn {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.nachbarliste {
  display: grid;
  gap: var(--ab-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nachbarliste a {
  display: inline-block;
  min-height: 2.75rem;
  padding: var(--ab-xs) 0;
  overflow-wrap: anywhere;
}

.job-detail__fuss {
  justify-content: space-between;
}

/* -------------------------------------------------------------------------
   21. Aufgaben (T-086; MS-13.8, MS-13.10): eigene Aufgaben in der
       Timeline, „Erledigte zeigen" ausgegraut und getrennt; dazu die
       breite Akte und das Netz als Fenster (Orchestrator Z1, Z2).
   ------------------------------------------------------------------------- */

:root {
  --breite-akte: 120rem;         /* Z1: die Akte nutzt die Fensterbreite       */
  --nz-schatten: rgb(31 27 28 / 0.18);
}

/* Eine eigene Aufgabe: links die Linie in Logo-Grau statt Orange. */
.aufgabe--eigen {
  border-left-color: var(--c-tinte-weich);
}

.aufgabe--eigen.aufgabe--warnung {
  border-left-color: var(--c-fehler);
}

.marke--eigene {
  background: var(--c-flaeche);
  color: var(--c-tinte-weich);
}

/* Der Satz ist der Link des Eintrags (das Job-Detail bzw. das Formular der
   eigenen Aufgabe) — als Link erkennbar, nicht laut. */
.aufgabe__satz {
  color: var(--c-tinte);
  text-decoration: underline;
  text-decoration-color: var(--c-linie-kraeftig);
  text-underline-offset: 0.15em;
}

.aufgabe__satz:hover {
  color: var(--c-link);
  text-decoration-color: currentcolor;
}

/* N5: am Handy 44 px Tippfläche, ohne den Zeilenabstand zu ändern (ein
   Innenrand am Inline-Element verschiebt keine Zeile). */
@media (max-width: 63.99rem) {
  .aufgabe__satz {
    padding-block: 0.75rem;
  }
}

/* „Erledigte zeigen": deutlich getrennt, ausgegraut (J-15). */
.aufgaben__erledigte {
  margin-top: var(--ab-l);
  padding-top: var(--ab-s);
  border-top: 1px solid var(--c-linie);
}

.aufgaben__erledigte > summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--c-link);
  cursor: pointer;
}

.aufgabenliste--erledigt {
  margin-top: var(--ab-s);
}

.aufgabe--erledigt {
  border-left-color: var(--c-linie);
  background: var(--c-gesperrt);
  color: var(--c-gesperrt-text);
}

.aufgabe--erledigt .aufgabe__text {
  text-decoration: line-through;
  text-decoration-color: var(--c-linie-kraeftig);
}

.aufgabe__wann {
  margin: 0;
  font-size: var(--fs-klein);
}

@media (min-width: 64rem) {
  /* Z1: Die Akte nutzt die Breite des Fensters (bis 120rem) — Kopfleiste,
     Hinweis und Inhalt rücken mit (alle hängen an --breite). Das
     Job-Detail bleibt schmal. */
  body:has(.inhalt > .akte:not(.job-detail):not(.akte--ohne-netz)) {
    --breite: var(--breite-akte);
  }

  /* Z2: Schatten am Rand, wo das Netz weitergeht (die Abdeckungen rollen
     mit, die Schatten bleiben am Rahmen). */
  .nz-rahmen {
    background:
      linear-gradient(to right, var(--c-grund) 30%, rgb(255 255 255 / 0)) left center / 2.5rem 100% no-repeat local,
      linear-gradient(to left, var(--c-grund) 30%, rgb(255 255 255 / 0)) right center / 2.5rem 100% no-repeat local,
      linear-gradient(to right, var(--nz-schatten), rgb(31 27 28 / 0)) left center / 1rem 100% no-repeat scroll,
      linear-gradient(to left, var(--nz-schatten), rgb(31 27 28 / 0)) right center / 1rem 100% no-repeat scroll;
    background-color: var(--c-grund);
  }

  /* Z2: Breiter als drei Karten — ein Fenster von höchstens Bildschirmhöhe,
     das in beide Richtungen rollt; so steht die Rollleiste im Bild. */
  .nz-rahmen--fenster {
    max-height: calc(100vh - 6rem);
    overflow: auto;
    border: 1px solid var(--c-linie);
    border-radius: var(--radius);
    background:
      linear-gradient(to right, var(--c-grund) 30%, rgb(255 255 255 / 0)) left center / 2.5rem 100% no-repeat local,
      linear-gradient(to left, var(--c-grund) 30%, rgb(255 255 255 / 0)) right center / 2.5rem 100% no-repeat local,
      linear-gradient(to bottom, var(--c-grund) 30%, rgb(255 255 255 / 0)) center top / 100% 2.5rem no-repeat local,
      linear-gradient(to top, var(--c-grund) 30%, rgb(255 255 255 / 0)) center bottom / 100% 2.5rem no-repeat local,
      linear-gradient(to right, var(--nz-schatten), rgb(31 27 28 / 0)) left center / 1rem 100% no-repeat scroll,
      linear-gradient(to left, var(--nz-schatten), rgb(31 27 28 / 0)) right center / 1rem 100% no-repeat scroll,
      linear-gradient(to bottom, var(--nz-schatten), rgb(31 27 28 / 0)) center top / 100% 1rem no-repeat scroll,
      linear-gradient(to top, var(--nz-schatten), rgb(31 27 28 / 0)) center bottom / 100% 1rem no-repeat scroll;
    background-color: var(--c-grund);
  }
}

/* T-092 K4: Am Handy rückt der Zeitplan-Kasten enger an seine Einträge. */
@media (max-width: 40rem) {
  .akte__kasten {
    padding: var(--ab-s);
  }
}

/* T-092 K7 (J-53): In der schmalen Zeile ist der Stand eine leise Marke —
   auch „In Durchführung" ohne volle Akzentfläche; direkt darunter beginnt
   der Inhalt. */
.auftragsleiste .stand--in-durchfuehrung {
  background: var(--c-orange-hell);
  color: var(--c-tinte);
}

.akte > .auftragsleiste {
  margin-bottom: 0;
}

/* T-092 K6: Am Handy stehen die Angaben eines Reiters der Akte zu zweit
   nebeneinander — der Reiter steht über Jobs und Zeitplan (J-54) und soll
   nicht die halbe Seite füllen. Lange Werte brechen um (EL-18). */
@media (max-width: 40rem) {
  .akte__tafel .angaben {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ab-s) var(--ab-m);
  }

  .akte__tafel .angaben dd {
    overflow-wrap: anywhere;
  }
}

/* T-093 S2 (ADR 005; J-46: Text markieren in ganz anklickbaren Karten).
   Mit Skript (`html.mit-skript`, static/js/hilfen.js) fängt die
   überdeckende Fläche des Links keine Klicks mehr ab: Der Text darunter
   lässt sich markieren, den Klick auf die Karte übernimmt das Skript
   (`data-ganz`, Ziel `data-ganz-ziel`). Der Fokusrahmen bleibt am Link.
   Beim Überfahren hebt sich die Karte hervor wie vorher — nicht über einem
   anderen Bedienelement in ihr (eigenes Ziel). Ohne Skript gilt die
   überdeckende Fläche (T-088 K2, K5, K6).
   T-094 M1 (J-60): Das gilt für den ganzen Link, nicht nur seine Fläche —
   auch über dem Titel der Karte und dem Satz des Eintrags markiert die
   Maus Text, statt den Link zu ziehen (Chrome und Edge beginnen auf einem
   Link keine Markierung, auch nicht mit draggable="false"). Tastatur,
   Fokus und Vorleser bleiben beim Link; ohne Skript ist der Titel der
   Link. */
.mit-skript [data-ganz] [data-ganz-ziel] {
  pointer-events: none;
}

.mit-skript [data-ganz] {
  cursor: pointer;
}

.mit-skript .nz-karte[data-ganz]:hover:not(:has(a:not([data-ganz-ziel]):hover, button:hover)) {
  border-color: var(--c-orange-tief);
  background: var(--c-orange-hell);
  box-shadow: 0 0 0 1px var(--c-orange-tief), var(--schatten);
}

.mit-skript .aufgabe[data-ganz]:hover:not(:has(a:not([data-ganz-ziel]):hover, button:hover)) {
  border-color: var(--c-orange-tief);
  background: var(--c-orange-hell);
}