/* =========================================================================
   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;
}

.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  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). */
@media (max-width: 40rem) {
  .kopfleiste {
    gap: var(--ab-2xs);
    min-height: 3.5rem;
    padding: var(--ab-2xs) var(--ab-xs);
  }

  .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 (Einstellungen); die Startseite stellt
      sie seit T-075 O4 in Gruppen über die Inhaltsbreite (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);
}

.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;
}

/* -------------------------------------------------------------------------
   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);
}

.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);
}

/* T-074 A6-B13 (EL-13): Ein aktiver Zugang trägt keine Marke; seine leere
   Zelle „Zustand" fällt in der Handykarte weg, statt als Bezeichnung ohne
   Wert stehen zu bleiben. */
@media (max-width: 40rem) {
  #nutzer-liste td:empty {
    display: none;
  }
}

/* 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-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);
  }
}

/* -------------------------------------------------------------------------
   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; Optikbericht B22): die
   Haupttat zuerst — „Jetzt einstempeln" bzw. „Jetzt ausstempeln" vor dem
   leisen „Dienstreise heute"; ein Fehlgriff legte sonst ohne Rückfrage eine
   Dienstreise an. Nur die Reihenfolge der Anzeige, das Template bleibt. */
.zeit-stempel > .zeit-stempel__form:has(.knopf--leise) {
  order: 1;
}

.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;
}

.zeit-ausstempeln__vortag {
  flex-basis: 100%;
  margin: 0;
}

.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;
}

.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;
}

.zeit-formular__ende-felder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ab-s);
}

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

.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, je Mitarbeiter eine Zeile mit
   Foto bzw. Initialen, Name fett als Verweis (kein Stift, MO-4), Funktion
   und Abteilung. */
.personal-suche {
  display: flex;
  gap: var(--ab-xs);
  max-width: 32rem;
  margin-bottom: var(--ab-m);
}

.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-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-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;
}

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

.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;
}

/* 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. */
.angabenkarte {
  display: grid;
  gap: var(--ab-m);
}

.angabenkarte__kopf {
  display: flex;
  justify-content: flex-end;
}

.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-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);
}

.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;
}

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

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

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

.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;
}

.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__link:hover {
  background: var(--c-orange-hell);
}

.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;
}

.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;
}

.option: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;
}

.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;
}

/* Die Aktendeckel-Leiste: Nummer, Art, Kunde, Stand — auf jeder Seite des
   Auftrags oben (MS-13.2). Bricht um, nichts wird gekürzt (EL-18). */
.auftragsleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ab-xs) var(--ab-m);
  margin: 0 0 var(--ab-m);
  padding: var(--ab-s) var(--ab-m);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius);
  background: var(--c-flaeche);
}

.auftragsleiste__nummer {
  font-weight: 700;
  white-space: nowrap;
}

/* 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;
}

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

/* 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);
}

.stand--gross {
  padding: var(--ab-xs) var(--ab-m);
  font-size: var(--fs-h2);
}

/* Der Aktendeckel: Abschnitte untereinander. */
.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;
}

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

.standblock__stand {
  margin: 0;
}

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

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

.standblock__zeilen dd {
  margin: 0 0 var(--ab-xs);
  font-size: var(--fs-kachel);
  overflow-wrap: anywhere;
}

/* 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);
}

.netzkarte__wahl {
  display: flex;
  align-items: center;
  gap: var(--ab-xs);
  min-height: 2.75rem;
  font-size: var(--fs-klein);
  font-weight: 600;
  cursor: pointer;
}

.netzkarte__wahl input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

.netzkarte--abgewaehlt {
  border-style: dashed;
  background: var(--c-flaeche);
  box-shadow: none;
}

.netzkarte--abgewaehlt .netzkarte__bezeichnung {
  color: var(--c-tinte-weich);
  font-weight: 400;
}

.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 der Liste
   (der Link zum Öffnen), die Nummer in der Leiste des Auftrags, „ändern“
   am Profit Center und „Abbrechen“ der Weiche (in der Abnahme 21 px) 44 px
   hohe Tippflächen. */
@media (max-width: 40rem) {
  #auftraege-tabelle .nummer,
  .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; „Als Nächstes“ mit dem Satz und darunter der Tat — ein
   Link oder ein Knopf mit eigenem Formular (MS-2.11); eine Warnung in der
   Farbe der Hinweise. */
.auftragsliste__stand,
.auftragsliste__naechstes {
  min-width: 11rem;
}

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

.auftragsliste__satz {
  display: block;
  overflow-wrap: anywhere;
}

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

.auftragsliste__formular {
  margin: 0;
}

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

/* D5 (Masken-Schema Nr. 60): Unter 64rem wird jede Zeile eine kompakte
   Karte — mit acht Spalten rollte die Tabelle sonst im Rahmen, und „Als
   Nächstes“ stünde außer Sicht. Oben die Nummer, klein Profit Center und
   Auftragsart, darunter Kunde und leise das Projekt, der Stand mit dem
   Sendungsstand, „Als Nächstes“ mit der Tat und der Owner, beide mit ihrer
   Beschriftung; eine leere Zelle (ohne Owner) fällt weg (EL-11). Die Karten
   stehen nebeneinander, soweit Platz ist. */
@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,
  .auftragsliste td:nth-child(8)::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);
  }

  .auftragsliste__tat {
    white-space: nowrap;
  }
}

/* D5: Am Handy die Tippfläche der Tat 44 px hoch (HA-6), ebenso der
   Hinweis der Startseite (RA-12a), der als ganzer Satz der Link ist, und
   die Nummern der Aufträge auf der Projektseite (D8). */
@media (max-width: 40rem) {
  .auftragsliste__tat {
    min-height: 2.75rem;
  }

  #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-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;
}

.akte__kopf {
  display: grid;
  gap: var(--ab-s);
}

.akte__kennung,
.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;
}

.akte__naechstes-tat {
  display: inline-block;
  margin: var(--ab-xs) 0 0 var(--ab-s);
  vertical-align: middle;
}

.akte__naechstes-tat .tat,
.aufgabe__tat .tat,
.nz-karte__taten .tat {
  display: inline-block;
  margin: 0;
}

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

.akte__netz,
.akte__aufgaben {
  min-width: 0;
}

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

.akte__planung {
  margin: 0 0 var(--ab-m);
  color: var(--c-tinte-weich);
}

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

.akte__aeltere > summary {
  min-height: 2.75rem;
  padding: var(--ab-xs) 0;
  color: var(--c-link);
  cursor: pointer;
}

/* Die Aufgaben (MS-13.8): je Zeile 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);
}

.aufgabe__bezug {
  font-weight: 700;
  white-space: nowrap;
}

/* 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; Knopf und Links liegen darüber (MS-15.2). */
.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;
}

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

.nz-karte__nummer {
  font-weight: 700;
  white-space: nowrap;
}

.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;
}

.nz-karte__link:hover {
  text-decoration: underline;
}

.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;
}

.nz-karte__lieferant,
.nz-karte__taten {
  position: relative;
  z-index: 1;
}

.nz-karte__lieferant {
  display: inline-block;
  min-height: 2.75rem;
  padding: var(--ab-xs) 0;
  font-weight: 600;
}

.nz-karte__taten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ab-xs);
  margin-top: var(--ab-xs);
}

/* Das „+" steht immer rechts — neben dem Knopf oder, ist die Karte zu
   schmal, in eigener Zeile darunter (lieber das als ein Knopf in drei
   Zeilen). */
.nz-karte__taten > .nz-plus {
  flex: none;
  margin-left: 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 die Nummer einer 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: Netz und Aufgaben nebeneinander, das Netz als Raster. */
@media (min-width: 64rem) {
  .akte__spalten {
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    align-items: start;
  }

  .akte__netz {
    grid-column: 1;
    grid-row: 1;
  }

  .akte__aufgaben {
    grid-column: 2;
    grid-row: 1;
  }

  .nz-rahmen {
    overflow-x: auto;
    padding-bottom: var(--ab-xs);
  }

  .nz {
    display: grid;
  }

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

  .nz-ebene__schritt {
    display: none;
  }

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

  /* Im Raster sind die Karten schmal: der Knopf mit weniger Rand. */
  .nz-karte .knopf--leise {
    padding-inline: var(--ab-xs);
  }

  .nz-karte__wartet {
    display: none;
  }

  .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;
  }

  .nz-plus--karte {
    grid-row: auto;
  }

  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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)); }
  .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);
  }

  .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);
}

/* Ihr Satz öffnet das Formular — als Link erkennbar, nicht laut. */
.aufgabe__aendern {
  color: var(--c-tinte);
  text-decoration: underline;
  text-decoration-color: var(--c-linie-kraeftig);
  text-underline-offset: 0.15em;
}

.aufgabe__aendern: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__aendern {
    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)) {
    --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);
  }
}