/* ==========================================================================
   AlpJobs Bewerbertool — die eine Stildatei.

   Eine Änderung der Optik kommt in Abschnitt 1 an: Dort stehen alle Farben,
   Maße, Schriftgrößen und Bilder als benannte Werte. Die Abschnitte darunter
   verwenden nur diese Namen — kein Farbwert, keine Länge, kein Bild steht
   weiter unten.

   Gestaltet wird über Elemente, Attribute und Kennungen (IDs) — die Vorlagen
   tragen keine Klassen. Die eine Ausnahme ist `.qr-code`, die Klasse des
   erzeugten SVG aus accounts/services/qr_code.py
   (documents/adr/0122-wiederherstellungscodes-und-qr-code.md). Wo eine Regel eine Seite erkennt, tut sie das an einem
   Element, das nur dort steht (`:has()`), z. B. die Arbeitsliste an
   `nav[aria-label="Status"]`.

   Der Kopf jeder Seite ist das `<header>` aus `templates/base.html`; das Logo legt
   diese Datei über seinen ersten Verweis.

   Kein JavaScript, nichts von fremden Servern: Plus Jakarta Sans und IBM Plex Mono
   liefert `proxy` unter /static/schrift/ aus static/schrift/ aus, Carlito und das Logo
   unter /static/vorlage/ aus profiles/pdf_assets/. Was aufklappt, ist ein
   `<details>` (documents/adr/0155-gestaltung-zentrale.md).

   Die Grundkomponenten — Knopf, Eingabefeld, Tabelle, Hinweisleiste,
   Zustandsabzeichen, Karte — und die Selektoren, an denen diese Datei sie erkennt,
   stehen im Verzeichnis documents/komponenten.md (Abschnitt „Oberfläche“);
   documents/komponenten-beispiel.html zeigt jede ihrer Formen mit dieser Datei.
   ========================================================================== */

/* --- 0 · Schrift: unverändert ausgeliefert, je unter der SIL OFL 1.1 -------------
   Plus Jakarta Sans (Oberfläche) und IBM Plex Mono (Daten), Lizenztext je im selben
   Verzeichnis (../schrift/plus-jakarta-sans/OFL.txt, ../schrift/ibm-plex-mono/OFL.txt);
   Carlito bleibt als Rückfall eingebunden (../vorlage/OFL.txt). */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../schrift/plus-jakarta-sans/PlusJakartaSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../schrift/plus-jakarta-sans/PlusJakartaSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../schrift/plus-jakarta-sans/PlusJakartaSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../schrift/plus-jakarta-sans/PlusJakartaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../schrift/ibm-plex-mono/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../schrift/ibm-plex-mono/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Carlito";
  src: url("../vorlage/Carlito-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Carlito";
  src: url("../vorlage/Carlito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Carlito";
  src: url("../vorlage/Carlito-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --- 1 · Gestaltungsmarken: die eine Stelle für eine Änderung ------------------- */

:root {
  /* Farben der Zielprofil-Vorlage (profiles/services/pdf_layout.py, logo.png) */
  --farbe-akzent: #0092c9;          /* Überschriften der Vorlage, Strich des Kopfs, Fokus — nur große fette Schrift, Flächen, Linien */
  --farbe-akzent-dunkel: #006a94;   /* dasselbe Blau, abgedunkelt: Text, Verweise, Knöpfe (Kontrast 6,02 auf Weiß) */
  --farbe-akzent-hell: #e6f4fa;     /* dasselbe Blau, aufgehellt: Flächen */
  --farbe-akzent-tief: #005a7e;     /* Hauptknopf unter dem Zeiger */
  --farbe-gesperrt: #9db8c6;        /* Hauptknopf, der nicht geht */
  --farbe-linie-akzent: #4f81bd;    /* Linie unter den Überschriften der Vorlage */

  /* Grauwerte */
  --farbe-text: #1c1c1c;
  --farbe-text-leise: #5b6670;
  --farbe-text-mittel: #4a5560;     /* Text zweiter Stufe: Bereiche, leiser Knopf */
  --farbe-text-blass: #6b7681;      /* Text dritter Stufe: Kleingedrucktes im Menü (4,63 auf Weiß) */
  --farbe-grund: #f4f6f8;           /* Seite */
  --farbe-flaeche: #ffffff;         /* Karten, Tabellen, Felder */
  --farbe-flaeche-leise: #f8fafb;   /* Tabellenkopf */
  --farbe-flaeche-zart: #f2f7fa;    /* unter dem Zeiger: Knopf, Menüknopf, Eintrag des Menüs */
  --farbe-linie: #d9dee3;
  --farbe-linie-stark: #7b8794;     /* Rahmen von Eingabefeldern (Kontrast 3,66 auf Weiß) */
  --farbe-schatten: rgba(16, 24, 40, 0.06);

  /* Bedeutungen — immer zusammen mit einem Wort, nie allein */
  --farbe-fehler: #c00000;          /* Vermerk „ENTWURF“ der Vorlage */
  --farbe-fehler-hell: #fdecec;
  --farbe-warnung: #6b4a00;
  --farbe-warnung-hell: #fff1cc;
  --farbe-warnung-linie: #e3b341;
  --farbe-warnung-zeile: #fffaf0;   /* Zeile, die eine Marke trägt */

  /* Die Pille des Status: Fläche, Schrift, Rand — je Wort */
  --farbe-offen-flaeche: #e4e8ec;
  --farbe-offen-schrift: #3d4750;
  --farbe-offen-rand: #c9d0d7;
  --farbe-arbeit-flaeche: #d4ecf8;
  --farbe-arbeit-schrift: #00557a;
  --farbe-arbeit-rand: #9fd0ea;
  --farbe-blockiert-flaeche: #ffe6a8;
  --farbe-blockiert-schrift: #5a3e00;
  --farbe-blockiert-rand: #f0c75e;
  --farbe-fertig-flaeche: #d2ecdb;
  --farbe-fertig-schrift: #155a2f;
  --farbe-fertig-rand: #9fd2b0;
  --farbe-fehler-flaeche: #fad6d6;
  --farbe-fehler-schrift: #a30000;
  --farbe-fehler-rand: #f0a8a8;
  --farbe-trenner: #d9dee3;

  /* Schrift */
  --schrift: "Plus Jakarta Sans", "Carlito", "Segoe UI", system-ui, sans-serif;
  --schrift-fest: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --schrift-zelle: 0.8125rem;       /* Arbeitsliste: Reiter, Auswahl, Verarbeitung */
  --schrift-fuss: 0.78125rem;       /* Arbeitsliste: Fuß der Karte */
  --schrift-zahl: 0.9375rem;        /* Arbeitsliste: die Zahl hinter der Überschrift */
  --schrift-h1-liste: 1.625rem;     /* Arbeitsliste: die Überschrift */
  --schrift-marke: 0.6875rem;       /* Marken „AlpJobs“ und „Neu“ */
  --schrift-fein: 0.75rem;          /* Rolle, Initialen, Kleinzeile und letzte Anmeldung im Menü */
  --schrift-zaehler: 0.75rem;       /* Zeichenzähler unter einem Feld (12px des Entwurfs) */
  --schrift-pille: 0.78125rem;      /* Pille des Status, kleiner Knopf */
  --schrift-konto: 0.8125rem;       /* der Name im Menüknopf */
  --schrift-knopf: 0.84375rem;      /* Knopf und Eintrag des Menüs */
  --schrift-klein: 0.875rem;
  --schrift-grund: 0.90625rem;      /* 14.5px des Entwurfs */
  --schrift-h3: 1.0625rem;
  --schrift-h2: 1.25rem;            /* nicht unter 1.17rem: darunter verlangt das Akzentblau mehr Kontrast */
  --schrift-h2-karte: 0.96875rem;   /* 15.5px: die Überschrift einer Karte, in Textfarbe */
  --schrift-h1: 1.625rem;           /* 26px des Entwurfs */
  --zeile: 1.5;
  --zeile-ueberschrift: 1.2;
  --zeile-knopf: 1.25;
  --sperrung-tabellenkopf: 0.04em;  /* Kopf einer Tabelle, in Versalien */
  --sperrung-h1: -0.01em;
  --sperrung-marke: 0.03em;
  --sperrung-h2: 0.04em;
  --sperrung-h3: 0.06em;
  --sperrung-streifen: 0.14em;      /* das Wort „Testinstanz“ */
  --unterstrich-abstand: 0.15em;

  /* Abstände */
  --abstand-1: 0.25rem;
  --abstand-2: 0.5rem;
  --abstand-3: 0.75rem;
  --abstand-4: 1rem;
  --abstand-5: 1.5rem;
  --abstand-6: 2rem;
  --abstand-7: 3rem;
  --innen-knopf: 0 0.875rem;
  --innen-knopf-klein: 0 0.625rem;
  --innen-knopf-leise: 0.3125rem 0.75rem;
  --innen-feld: 0.5rem 0.75rem;
  --innen-zelle-hoch: 0.625rem;
  --innen-marke: 0 0.5rem;
  --innen-marke-alpjobs: 0 0.4375rem;
  --innen-marke-neu: 0.0625rem 0.5rem;
  --innen-pille: 0.1875rem 0.6875rem;
  --innen-bereich: 0 0.75rem;       /* Verweis eines Bereichs im Kopf */
  --innen-konto: 0.25rem 0.5rem 0.25rem 0.75rem;   /* der Menüknopf */
  --innen-menue: 0.375rem;          /* die aufgeklappte Fläche des Menüs */
  --innen-eintrag: 0.5rem 0.625rem; /* Kopfzeile, Eintrag und Abmelden im Menü */
  --innen-reiter: 0.375rem 0.75rem; /* ein Reiter des Status */
  --reiter-darueber: brightness(0.97); /* ein Reiter eines Zustands unter dem Zeiger: eine Spur dunkler */
  --rand-trenner: 0.25rem 0.375rem;  /* der Trenner zwischen Zuständen und „Fehlgeschlagen“ */
  --innen-suche: 0 0.75rem 0 2.375rem;   /* das Suchfeld, links Platz für die Lupe */
  --innen-auswahl: 0 0.625rem 0 0.75rem; /* Beschriftung und Auswahl „AlpJobs-Profil“ */
  --innen-kopf-liste: 0.75rem 1rem; /* Kopf der Tabelle der Arbeitsliste */
  --innen-zelle-liste: 0.875rem 1rem;    /* Zelle der Arbeitsliste, im schmalen Fenster die Karte einer Zeile */
  --luecke-werkzeug: 0.625rem;      /* zwischen Suche und Auswahl */
  --luecke-lage: 0.375rem;          /* zwischen den Zeilen der Zelle „Verarbeitung“ */
  --luecke-punkte: 0.1875rem;
  --einzug-liste: 1.25rem;
  --einzug-liste-zelle: 1.1rem;
  --einzug-fehlerliste: 2.5rem;

  /* Linien und Form */
  --linie: 1px;
  --linie-betont: 2px;
  --balken: 0.375rem;               /* linker Rand von Meldungen und vom Block der Verarbeitung */
  --balken-schmal: 0.25rem;         /* linker Rand des Kostenhinweises */
  --radius: 0.5rem;
  --radius-klein: 0.3125rem;
  --radius-karte: 0.625rem;         /* Karte und aufgeklappte Fläche des Menüs */
  --radius-knopf: 0.4375rem;        /* Knopf und Eintrag des Menüs */
  --radius-rund: 999px;
  --schatten: 0 1px 2px var(--farbe-schatten);
  --schatten-karte: 0 1px 2px rgba(0, 74, 104, 0.06), 0 4px 16px rgba(0, 74, 104, 0.05);
  --schatten-menue: 0 12px 32px rgba(0, 74, 104, 0.14);
  --fokus-umriss: 2px;              /* der Fokusring, in --farbe-akzent */
  --fokus-abstand: 2px;
  --punkt-warten: 0.3125rem;        /* die drei Punkte bei „eingereiht“ */
  --deckung-punkte: 0.35;
  --deckung-ruhig: 0.5;             /* der Balken, wenn Bewegung aus ist */
  --deckung-zahl: 0.75;             /* die Zahl an einem Reiter */
  --deckung-zahl-gewaehlt: 0.85;    /* die Zahl an „Alle“, gewählt: weiß, Kontrast 4,83 (0,8 gäbe 4,45) */
  --balken-breite: 7.5rem;          /* der Balken bei „läuft“ */
  --balken-hoehe: 0.25rem;
  --radius-balken: 0.25rem;
  --laeufer: 40%;                   /* der Läufer im Balken */
  --dauer-lauf: 1.4s;
  --dauer-punkte: 1.2s;
  --verzug-zweiter: 0.2s;
  --verzug-dritter: 0.4s;
  --rahmen-breite: 2.25rem;         /* der Rahmen des Lichtbilds vor dem Namen */
  --rahmen-hoehe: 2.75rem;
  --radius-rahmen: 0.375rem;
  --lupe: 1rem;
  --lage-lupe: 0.75rem center;
  --strich-aktuell: 2px;            /* Strich unter dem geltenden Bereich im Kopf */

  /* Breiten */
  --breite: 78rem;                  /* größte Breite des Inhalts */
  --breite-text: 46rem;             /* Absätze und das Feld des Wunschs */
  --breite-feld: 26rem;             /* Eingabefelder und die Karte der Anmeldung */
  --rand: 1.5rem;                   /* Abstand des Inhalts zum Fensterrand */
  --spalte-mindest: 8rem;           /* schmales Fenster: jede Spalte */
  --spalte-breit: 15rem;            /* schmales Fenster: Spalten mit Liste oder Marke */
  --spalte-name: 12rem;             /* schmales Fenster: Name der Unterlage */
  --spalte-beschriftung: 13rem;     /* „Zur Person“: die Spalte „Feld“ */
  --suche-breit: 17.5rem;           /* die Suche neben der Auswahl */
  --liste-mindest: 47.5rem;         /* darunter rollt die Tabelle der Arbeitsliste in ihrer Karte */
  --spalten-karte: 1fr auto;         /* schmal: die Zeile der Arbeitsliste als Karte */
  --spalte-lage: 9.375rem;          /* die Spalte „Verarbeitung“ */
  /* Die Pille „Dropbox abgeglichen“ neben der Überschrift der Arbeitsliste (#596) */
  --farbe-abgleich-gut: #1f6b3a;    /* der Punkt, wenn der letzte Lauf nicht fehlgeschlagen ist */
  --farbe-abgleich-ring: #e4f2e8;   /* sein Ring */
  --abgleich-punkt: 0.5rem;         /* 8px des Entwurfs */
  --abgleich-ring: 0.1875rem;       /* 3px: der Ring um den Punkt */
  --abgleich-innen: 0.375rem 0.875rem 0.375rem 0.625rem;
  --abgleich-luecke: 0.625rem;      /* zwischen Punkt, Text und Trenner */
  --breite-grund: 32ch;             /* Grund und Satz der Ausgabe unter der Verarbeitung */
  --qr-breite: 15rem;               /* der QR-Code der Einrichtung, samt Ruhezone */

  /* Kopf der Seite: Logo, Bereiche, Menü */
  --kopf-hoehe: 4rem;
  --kopf-strich: 3px;               /* der eingesetzte Strich am unteren Rand des Kopfs */
  --kopf-abstand: 1.75rem;          /* zwischen Logo, Bereichen und Menü */
  --logo-hoehe: 2.5rem;
  --logo-breite: 4.18rem;           /* Seitenverhältnis des Logos: 823 zu 492 */
  --kreis: 2rem;                    /* der Kreis mit den Initialen */
  --kreis-klein: 1.5rem;            /* der Kreis in der Spalte „Zuletzt bearbeitet“ */
  --schrift-kreis-klein: 0.625rem;  /* seine Initialen */
  --zeile-bearbeitet: 1.3;          /* Name und Zeit in der Spalte „Zuletzt bearbeitet“ */
  --luecke-konto: 0.625rem;         /* zwischen Name, Kreis und Winkel im Menü */
  --menue-breite: 17.5rem;
  --menue-hoechstens: calc(100vw - 2rem);   /* das Menü ragt nie aus dem Fenster */
  --knopf-hoehe: 2.25rem;
  --knopf-hoehe-klein: 1.875rem;
  --feld-hoehe: 2.5rem;             /* Suche und Auswahl der Arbeitsliste */
  --unsichtbar: 1px;                /* Text, der nur vorgelesen wird: Name und Rolle im schmalen Menüknopf, die Beschriftung der Suche */
  /* Verwaltung: Gerüst, Seitenmenü, Kachel, Schalter */
  --farbe-fehler-zart: #fff6f6;     /* Fläche der Kachel „fehlgeschlagen“ */
  --farbe-fehler-darueber: #ffeeee; /* dieselbe Fläche unter dem Zeiger */
  --farbe-schalter-aus: #b7c2cc;    /* der ausgeschaltete Schalter */
  --spalten-verwaltung: 12.5rem minmax(0, 1fr);   /* Seitenmenü 200px und Inhalt; schmal eine Spalte */
  --verwaltung-oben: 5.25rem;       /* so weit unter dem oberen Rand klebt das Seitenmenü */
  --luecke-menue: 0.125rem;         /* zwischen den Einträgen des Seitenmenüs */
  --innen-verwaltung-eintrag: 0.5625rem 0.75rem;   /* ein Eintrag des Seitenmenüs */
  --innen-zahl-menue: 0 0.4375rem;  /* die Zahl hinter „Aufträge“ im Seitenmenü */
  --spalten-kacheln: repeat(auto-fit, minmax(11.875rem, 1fr));   /* je Kachel wenigstens 190px */
  --luecke-kachel: 0.625rem;        /* zwischen den Kacheln, zwischen Punkt und Text */
  --innen-kachel: 0.75rem 0.875rem;
  --abstand-kacheln: 1.25rem;       /* unter der Zeile der Kacheln */
  --punkt-kachel: 0.5625rem;        /* der Punkt der Kachel */
  --ring-kachel: 3px;               /* der Ring um den Punkt */
  --versatz-punkt-kachel: 0.3125rem;
  --schrift-satz-verwaltung: 0.84375rem;   /* Kachel und Erklärsatz einer Einstellung: 13.5px */
  --schrift-h2-verwaltung: 1.1875rem;      /* der Kopf einer Seite der Verwaltung: 19px, in Textfarbe */
  --schrift-unterzeile: 0.8125rem;  /* die Zeile unter diesem Kopf */
  --abstand-kopf-verwaltung: 0.875rem;
  --innen-einstellung: 1.125rem;    /* die Karte einer Einstellung */
  --abstand-satz: 0.375rem;         /* über einem Satz der Einstellung */
  --breite-einstellung: 70ch;
  --schalter-breite: 2.875rem;
  --schalter-hoehe: 1.625rem;
  --schalter-knopf: 1.25rem;
  --schalter-rand: 0.1875rem;       /* zwischen Rand und Knopf des Schalters */
  --schatten-schalter: 0 1px 3px rgba(0, 0, 0, 0.2);
  --bild-logo: url("../vorlage/logo.png");

  /* Zwei Bilder als Daten in der Adresse, nichts von außen: die Lupe der Suche und der
     Platzhalter im Rahmen des Lichtbilds (Silhouette, gestrichelt). Die Adresse des
     SVG-Namensraums steht prozentkodiert da. */
  --bild-lupe: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='5' stroke='%236b7681' stroke-width='1.6'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%236b7681' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --bild-rahmen: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 36 44'%3E%3Crect width='36' height='44' fill='%23eef1f4'/%3E%3Ccircle cx='18' cy='17' r='7.5' fill='none' stroke='%23b3bdc7' stroke-width='1.4' stroke-dasharray='2.5 2'/%3E%3Cpath d='M4 44c1.5-9 7-13.5 14-13.5S30.5 35 32 44' fill='none' stroke='%23b3bdc7' stroke-width='1.4' stroke-dasharray='2.5 2'/%3E%3C/svg%3E");

  /* Kein Lichtbild (#595): derselbe Platzhalter, von unten links nach oben rechts rot
     durchgestrichen — in Liste, Kopfkarte und jeder Größe dasselbe Bild. */
  --bild-rahmen-ohne: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 36 44'%3E%3Crect width='36' height='44' fill='%23eef1f4'/%3E%3Ccircle cx='18' cy='17' r='7.5' fill='none' stroke='%23b3bdc7' stroke-width='1.4' stroke-dasharray='2.5 2'/%3E%3Cpath d='M4 44c1.5-9 7-13.5 14-13.5S30.5 35 32 44' fill='none' stroke='%23b3bdc7' stroke-width='1.4' stroke-dasharray='2.5 2'/%3E%3Cpath d='M5 39L31 5' stroke='%23c0392b' stroke-width='1.8' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E");

  /* Kopfkarte der Prüfansicht (#583) */
  --kopf-karte-abstand: 1.125rem;       /* Raster der Kopfkarte */
  --kopf-karte-innen: 1.25rem;          /* Innenabstand der Kopfkarte */
  --kopf-rahmen-breite: 4.5rem;         /* Lichtbild-Rahmen der Kopfkarte: Breite */
  --kopf-rahmen-hoehe: 5.5rem;          /* Lichtbild-Rahmen der Kopfkarte: Höhe */
  --kopf-rahmen-radius: 0.5rem;         /* Lichtbild-Rahmen der Kopfkarte: Radius */
  --kopf-h1: 1.5rem;                    /* Name in der Kopfkarte */
  --kopf-h1-abstand: 0.5rem 0.625rem;   /* Umbruch unter dem Namen */
  --kopf-metazeile: 0.8125rem;          /* Metazeile: Schriftgröße */
  --kopf-metazeile-abstand: 0.375rem 1.125rem; /* Metazeile: Abstand */
  --kopf-aktionen-abstand: 0.5rem;      /* Abstand der Aktionen */
  --kopf-verweis: 0.84375rem;           /* Verweis zurück: Schriftgröße */
  --kopf-verweis-abstand: 0.875rem;     /* Verweis zurück: Abstand unten */
  --hinweis-radius: 0.4375rem;          /* Hinweis gleichzeitiges Öffnen: Radius */
  --hinweis-innen: 0.625rem 0.875rem;   /* Hinweis gleichzeitiges Öffnen: Innenabstand */
  --hinweis-schrift: 0.84375rem;        /* Hinweis gleichzeitiges Öffnen: Schriftgröße */
  --hinweis-abstand: 1rem;              /* Hinweis gleichzeitiges Öffnen: Abstand unten */
  --freigabe-hinweis: 0.78125rem;       /* Hinweis „vor der Freigabe“: Schriftgröße */
  --farbe-freigabe: #9a4300;            /* Hinweis „vor der Freigabe“: Schrift */
  --block-details-abstand: 0.875rem;    /* Blockieren aufgeklappt: Abstand */
  --block-textarea-hoehe: 4rem;         /* Blockieren: Mindesthöhe des Textfelds */
  --kopf-raster: auto 1fr auto;         /* Raster der Kopfkarte: drei Spalten */
  --kopf-raster-schmal: auto 1fr;       /* Raster der Kopfkarte schmal: zwei Spalten */

  /* Verarbeitungskarte der Prüfansicht (#584) */
  --lage-abstand: 0.875rem;             /* über der Karte; über dem Startfeld; zwischen den Feldern */
  --lage-innen: 0.875rem 1.125rem;      /* Innenabstand der Karte */
  --lage-luecke: 0.625rem 1.125rem;     /* Abstand der Teile der Karte */
  --lage-satz-breite: 16.25rem;         /* Mindestbreite des Satzes */
  --lage-balken: 10rem;                 /* Breite der Lauf-Anzeige bei „läuft“ */
  --lage-satz: 0.8125rem;               /* Satz: Schriftgröße */
  --lage-grund: 0.84375rem;             /* Grund: Schriftgröße */
  --lage-grenze: 0.71875rem;            /* „höchstens … Zeichen“: Schriftgröße */
  --lage-feld-hoehe: 6rem;              /* Mindesthöhe der zwei Felder */
  --lage-raster: 1fr 1fr;               /* die zwei Felder nebeneinander */
  --lage-raster-schmal: 1fr;            /* die zwei Felder untereinander */
  --farbe-lage-arbeit: #f3fafd;         /* Fläche: eingereiht, läuft */
  --farbe-lage-fehler: #fff6f6;         /* Fläche: fehlgeschlagen, blockiert */
  --farbe-lage-fehler-rand: #f0a8a8;    /* Rand: fehlgeschlagen, blockiert */
  --farbe-lage-gut: #1f6b3a;            /* Titel: abgeschlossen */

  /* Detailseite zweispaltig und Kurzleiste der Prüfansicht (#585) */
  --spalten-detail: 5fr 7fr;            /* links die Unterlagen, rechts das Zielprofil */
  --spalten-detail-schmal: 1fr;         /* schmal: eine Spalte, die Unterlagen oben */
  --luecke-detail: 1.25rem;             /* zwischen den zwei Spalten */
  --original-oben: 7.5rem;              /* die linke Spalte klebt so weit unter dem oberen Rand */
  --luecke-unterlage: 0.375rem;         /* zwischen den Reitern der Unterlagen */
  --innen-reiterzeile: 0.75rem 0.75rem 0; /* die Zeile der Reiter */
  --innen-reiter-unterlage: 0.3125rem 0.6875rem; /* ein Reiter einer Unterlage */
  --schrift-unterlage: 0.78125rem;      /* 12.5px: Reiter und Zeile „Erkannt als“ */
  --innen-zeile-unterlage: 0.625rem 0.75rem; /* die Zeile „Erkannt als … Öffnen“ */
  --innen-vorschau: 1rem;               /* die Fläche der Vorschau */
  --farbe-vorschau: #e9edf1;            /* die Fläche der Vorschau */
  --betrachter-hoehe: 70vh;             /* der Rahmen des Betrachters in der linken Spalte */
  --kurz-abstand: 1rem;                 /* über der Kurzleiste */
  --innen-kurzleiste: 0.5rem 0;         /* der Streifen der Kurzleiste */
  --luecke-kurzleiste: 0.75rem;         /* zwischen Mini-Kopf, Abschnitten und Aktionen */
  --schrift-kurzleiste: 0.8125rem;      /* 13px: ein Verweis der Kurzleiste */
  --zahl-kreis: 1.125rem;               /* 18px: der Kreis der Zahl offener Posten */
  --innen-zahl: 0 0.3125rem;            /* der Kreis der Zahl, bei zwei Ziffern */
  --zahl-abstand: 0.125rem;             /* vor dem Kreis der Zahl */
  --schrift-zahl-offen: 0.6875rem;      /* 11px: die Zahl im Kreis */
  --farbe-zahl-offen: #e8730c;          /* die Fläche des Kreises der Zahl */
  --abstand-anker: 8.125rem;            /* 130px: ein Abschnitt endet beim Sprung unter der Kurzleiste */
  --mini-rahmen-breite: 1.5rem;         /* Mini-Kopf: Rahmen 24 × 30 */
  --mini-rahmen-hoehe: 1.875rem;
  --radius-mini-rahmen: 0.25rem;
  --schrift-mini-name: 0.875rem;        /* Mini-Kopf: der Name */
  --schrift-mini-pille: 0.71875rem;     /* Mini-Kopf: die Pille */
  --innen-mini-pille: 0.0625rem 0.5rem;
  --mini-rechts: 0.625rem;              /* Mini-Kopf: Abstand zur Linie rechts */
  --schatten-angeheftet: 0 0.375rem 0.875rem rgba(0, 74, 104, 0.06); /* die angeheftete Kurzleiste */
  --anheften-oben: 7.5rem;              /* der Kopf gilt als weggescrollt, wenn er über dieser Linie liegt */
  --anheften-bereich: exit 99% exit 100%; /* der letzte Hundertstel des Weggehens des Kopfs */

  /* Detailseite: „zu bestätigen“ orange, Vorschläge markiert — Zur Person, Einleitung (#586).
     Orange sind `--farbe-zahl-offen` (Balken, Marke) und `--farbe-freigabe` (Satz); Blau sind
     `--farbe-akzent-hell` und `--farbe-arbeit-schrift` (Marke, Hinweis) und `--farbe-akzent`
     (Balken des Vorschlags). */
  --farbe-bestaetigen-flaeche: #fff1e6; /* die drei Zellen eines Felds, das zu bestätigen ist */
  --innen-karte-kopf: 0.875rem 1.125rem; /* 14px 18px: der Kopf einer Karte des Zielprofils */
  --innen-karte-rumpf: 0.375rem 1.125rem 0.875rem; /* 6px 18px 14px: ihr Rumpf */
  --luecke-karte-kopf: 0.625rem;        /* 10px: zwischen Überschrift, Marke und Kleinzeile */
  --spalten-felder: minmax(8.125rem, 34%) minmax(0, 1fr) fit-content(var(--breite-aktionen)); /* Beschriftung | Wert | Aktionen */
  --breite-aktionen: 11rem;             /* 176px: höchstens so breit die Aktionen, die Knöpfe brechen um */
  --spalten-felder-schmal: minmax(0, 1fr); /* 30rem: Beschriftung, Wert und Aktionen je eine Zeile */
  --innen-feldzeile: 0.625rem;          /* 10px: oben und unten an jeder Zelle */
  --einzug-feld: 0.75rem;               /* 12px: rechts der Beschriftung */
  --einzug-aktionen: 0.625rem;          /* 10px: links der Aktionen; links der Beschriftung, orange */
  --luecke-aktionen: 0.375rem;          /* 6px: zwischen den Knöpfen einer Zeile */
  --luecke-wert: 0.1875rem;             /* 3px: zwischen Wert und Hinweisen */
  --balken-fein: 0.1875rem;             /* 3px: der linke Balken, orange an der Beschriftung, blau am Vorschlag */
  --schrift-beschriftung: 0.8125rem;    /* 13px: Beschriftung; „Präferenz:“ */
  --schrift-hinweis: 0.75rem;           /* 12px: Hinweise im Wert, „Bitte bestätigen“, Zeichen der Einleitung */
  --schrift-marke-karte: 0.71875rem;    /* 11.5px: die Marke im Kopf einer Karte */
  --innen-marke-karte: 0.0625rem 0.5rem; /* 1px 8px */
  --feld-hoehe-klein: 2.125rem;         /* 34px: das Feld in „Ändern“ */
  --schrift-einleitung: 0.90625rem;     /* 14.5px: der Einleitungstext */
  --zeile-einleitung: 1.65;
  --breite-einleitung: 68ch;
  --schrift-satz-karte: 0.78125rem;     /* 12.5px: der Satz unter dem Einleitungstext */
  --innen-praeferenz: 0.875rem;         /* 14px: über der Präferenz, unter der Linie */

  /* Detailseite: die vier Listen kompakt, Vermerke als Info-Marke (#587). Orange bleiben die
     Namen aus #586; die Info-Marke ist graublau und nennt keinen davon. */
  --innen-listenzelle: 0.625rem 0.5rem; /* 10px 8px: jede Zelle der vier Listen */
  --schrift-listenzelle: 0.84375rem;    /* 13.5px */
  --schrift-listenkopf: 0.71875rem;     /* 11.5px: die Kopfzellen */
  --spalte-zeitraum: 1%;                /* die erste Spalte so schmal wie ihr Inhalt */
  --abstand-grund: 0.25rem;             /* 4px: über „Bitte bestätigen“ */
  --farbe-vermerk-flaeche: #eaf0f5;     /* die Info-Marke „Vermerk“ */
  --farbe-vermerk-schrift: #3d5466;
  --farbe-vermerk-kreis: #c9d6e1;       /* der Kreis mit dem „i“ */
  --radius-vermerk: 0.375rem;           /* 6px */
  --innen-vermerk: 0.1875rem 0.5rem;    /* 3px 8px */
  --luecke-vermerk: 0.375rem;           /* 6px: zwischen Kreis und Satz; über der Marke */
  --vermerk-kreis: 1rem;                /* 16px */
  --schrift-vermerk-kreis: 0.6875rem;   /* 11px: das „i“ */

  /* Historie als Seitenleiste der Prüfansicht (#588) */
  --breite-seitenleiste: min(27.5rem, 100%); /* 440px, schmal die volle Breite */
  --schatten-seitenleiste: -0.75rem 0 2rem rgba(0, 74, 104, 0.16);
  --farbe-schleier: rgba(20, 34, 51, 0.28); /* vor der Seite, hinter der Leiste */
  --innen-seitenleiste-kopf: 1rem 1.125rem; /* Kopf: „Historie“, Name, ✕ */
  --luecke-seitenleiste-kopf: 0.625rem;
  --schrift-seitenleiste-titel: 1rem;   /* 16px: „Historie“ */
  --innen-seitenleiste-reiter: 0.75rem 1.125rem 0; /* die Zeile der drei Filter */
  --innen-zeitleiste: 0.5rem 1.125rem 1rem;
  --zeitleiste-spalten: 6.875rem 0.875rem minmax(0, 1fr); /* Zeit 110px | Punkt | Satz */
  --zeitleiste-spalten-schmal: 4.875rem 0.875rem minmax(0, 1fr); /* unter 30rem: Zeit 78px */
  --luecke-zeitleiste: 0.625rem;
  --innen-zeitzeile: 0.4375rem 0;       /* 7px über und unter einer Zeile */
  --schrift-zeitleiste: 0.8125rem;      /* 13px */
  --punkt-zeitleiste: 0.5625rem;        /* 9px */
  --punkt-oben: 0.3125rem;              /* der Punkt auf der Höhe der ersten Zeile */
  --punkt-ring: 0 0 0 0.1875rem var(--farbe-flaeche); /* 3px weiß um den Punkt */

  /* Benutzerliste mit Stift und Seitenleiste „Benutzer bearbeiten“ (#590) */
  --spalten-kopf-benutzer: minmax(0, 1fr) auto; /* Kopf und Unterzeile | „+ Benutzer anlegen“ */
  --verwaltung-mindest: 42.5rem;        /* 680px: darunter rollt eine Tabelle der Verwaltung in ihrer Karte */
  --luecke-kleinzeile: 0.125rem;        /* 2px: über der Kleinzeile einer Zelle */
  --stift: 2.125rem;                    /* 34px: die Fläche des Stifts */
  --stift-zeichen: 1.0625rem;           /* 17px: das Zeichen darin */
  --bild-stift: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 16 16' fill='none' stroke='%234a5560' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 2.5l2.5 2.5L6 12.5H3.5V10z'/%3E%3Cpath d='M9.5 4l2.5 2.5'/%3E%3C/svg%3E");
  --innen-seitenleiste-abschnitt: 1rem 1.125rem; /* 16px 18px: ein Abschnitt der Leiste */
  --luecke-seitenleiste-abschnitt: 0.375rem;     /* 6px: zwischen den Teilen eines Abschnitts */
  --sperrung-abschnitt: 0.05em;         /* die Überschrift eines Abschnitts, in Versalien */
  --feld-hoehe-leiste: 2.375rem;        /* 38px: Benutzername und Rolle */
  --innen-feld-leiste: 0 0.625rem;      /* 0 10px */
  --breite-rueckfrage: 17.5rem;         /* 280px: so breit wenigstens der Satz einer Rückfrage */
  --farbe-gefahrenbereich: #fffafa;     /* die Fläche von „Benutzer löschen“ */

  /* Profilbild eines Kontos (#594) */
  --kreis-profilbild: 4rem;             /* 64px: der Kreis in „Benutzer bearbeiten“ */
  --luecke-profilbild: 0.875rem;        /* 14px: zwischen dem Kreis und der Wahl der Datei */

  /* Aufträge und Protokoll der Verwaltung (#592) */
  --farbe-zeile-hervorgehoben: #fffafa; /* eine fehlgeschlagene Zeile: Auftrag, Anmeldeversuch */
  --schrift-satz-fein: 0.78125rem;      /* 12.5px: der Satz des Zeitplans, der letzte Fehler einer Zeile */
  --innen-zeitplan: 0.75rem 1rem;       /* 12px 16px: die Karte „Zeitplan“ */
  --abstand-block-verwaltung: 0.875rem; /* 14px: unter Zeitplan, Reitern und Werkzeugleiste */
  --luecke-grund: 0.375rem;             /* 6px: über dem letzten Fehler in der Zelle „Auftrag“ */
}

@media (max-width: 40rem) {
  :root {
    --rand: 1rem;
    --schrift-h1: 1.5rem;
    --kopf-abstand: 0.875rem;
    --innen-bereich: 0 0.5rem;
    --spalten-verwaltung: minmax(0, 1fr);
  }
}

/* --- 2 · Grund ------------------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift);
  font-size: var(--schrift-grund);
  line-height: var(--zeile);
}

h1, h2, h3 { line-height: var(--zeile-ueberschrift); margin: 0; }
h1 { font-size: var(--schrift-h1); font-weight: 700; letter-spacing: var(--sperrung-h1); }

/* Die Abschnittsüberschrift der Vorlage: Blau, Versalien, feine Linie darunter. */
h2 {
  font-size: var(--schrift-h2);
  font-weight: 700;
  color: var(--farbe-akzent);
  text-transform: uppercase;
  letter-spacing: var(--sperrung-h2);
  margin-top: var(--abstand-6);
  margin-bottom: var(--abstand-4);
  padding-bottom: var(--abstand-2);
  border-bottom: var(--linie) solid var(--farbe-linie-akzent);
}
h3 {
  font-size: var(--schrift-h3);
  font-weight: 700;
  margin-top: var(--abstand-5);
  margin-bottom: var(--abstand-2);
}

p, ul { margin: 0 0 var(--abstand-3); }
p { max-width: var(--breite-text); }
ul { padding-left: var(--einzug-liste); }

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

/* Der Fokus: ein Ring im Akzentblau, mit Abstand zum Element — ein Umriss, kein Schatten,
   damit er auch dort steht, wo das System Farben erzwingt. */
:focus-visible {
  outline: var(--fokus-umriss) solid var(--farbe-akzent);
  outline-offset: var(--fokus-abstand);
  border-radius: var(--radius-klein);
}

/* --- 3 · Rahmen der Seite: Testinstanz, Kopf, Inhalt ----------------------------- */

/* Das Wort „Testinstanz“ — ein Streifen über allem, der beim Blättern stehen bleibt. */
body > p:first-child {
  position: sticky;
  top: 0;
  z-index: 2;
  max-width: none;
  margin: 0;
  padding: var(--abstand-1) var(--rand);
  background: var(--farbe-warnung-hell);
  border-bottom: var(--linie-betont) solid var(--farbe-warnung-linie);
  color: var(--farbe-warnung);
  font-size: var(--schrift-klein);
  font-weight: 700;
  letter-spacing: var(--sperrung-streifen);
  text-transform: uppercase;
  text-align: center;
}

/* Der Kopf: weiß, klebt oben — unter dem Wort „Testinstanz“, wo es steht —, unten eine Linie
   und darüber der eingesetzte Strich im Akzentblau. Logo, Bereiche, Menü. */
body > header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--kopf-abstand);
  min-height: var(--kopf-hoehe);
  padding: 0 max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
  background: var(--farbe-flaeche);
  border-bottom: var(--linie) solid var(--farbe-linie);
  box-shadow: inset 0 calc(var(--kopf-strich) * -1) 0 var(--farbe-akzent);
}
body > p:first-child + header { top: calc(var(--abstand-1) * 2 + var(--schrift-klein) * var(--zeile) + var(--linie-betont)); }
/* Das Logo: Der Verweis zeigt nur das Logo, der Name steht in `aria-label`. Die Trefferfläche
   ist mindestens so groß wie das Logo. */
body > header > a:first-child {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: var(--logo-breite);
  min-height: var(--logo-hoehe);
  color: var(--farbe-text-mittel);
  text-decoration: none;
}
body > header > a:first-child::before {
  content: "";
  width: var(--logo-breite);
  height: var(--logo-hoehe);
  background: var(--bild-logo) left center / contain no-repeat;
}
/* Die Bereiche: volle Höhe des Kopfs, der geltende mit Strich unten. */
body > header nav { align-self: stretch; display: flex; }
body > header nav ul { display: flex; gap: var(--abstand-1); list-style: none; margin: 0; padding: 0; }
body > header nav li { display: flex; }
body > header nav a {
  display: flex;
  align-items: center;
  padding: var(--innen-bereich);
  color: var(--farbe-text-mittel);
  font-size: var(--schrift-klein);
  font-weight: 600;
  text-decoration: none;
}
body > header nav a:hover { color: var(--farbe-text); }
body > header nav a[aria-current="page"] { color: var(--farbe-akzent-dunkel); box-shadow: inset 0 calc(var(--strich-aktuell) * -1) 0 var(--farbe-akzent); }
/* Das Menü: ein `<details>` rechts im Kopf — Name und Rolle, der Kreis mit den Initialen und
   ein Winkel; aufgeklappt eine Fläche rechts bündig darunter. Ohne Skript: Escape und ein
   Klick daneben schließen es nicht. */
body > header > details { position: relative; margin-left: auto; }
body > header summary {
  display: flex;
  align-items: center;
  gap: var(--luecke-konto);
  padding: var(--innen-konto);
  border: var(--linie) solid transparent;
  border-radius: var(--radius-rund);
  list-style: none;
  text-align: right;
  cursor: pointer;
}
body > header summary::-webkit-details-marker,
[role="switch"]::-webkit-details-marker { display: none; }
body > header summary::after { content: "▾"; color: var(--farbe-text-blass); }
body > header summary:hover,
body > header details[open] > summary { background: var(--farbe-flaeche-zart); border-color: var(--farbe-linie); }
body > header summary > span:first-child { font-size: var(--schrift-konto); line-height: var(--zeile-ueberschrift); }
body > header details small { display: block; color: var(--farbe-text-blass); font-size: var(--schrift-fein); }
/* Das Profilbild an der Stelle der Initialen: derselbe Kreis, das Bild füllt ihn. */
body > header summary > img,
#benutzer td:first-child > div > img {
  flex: none;
  width: var(--kreis);
  height: var(--kreis);
  border-radius: 50%;
  object-fit: cover;
}
body > header summary > span[aria-hidden],
body > header details p > span[aria-hidden] {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--kreis);
  height: var(--kreis);
  border-radius: 50%;
  background: var(--farbe-akzent-hell);
  color: var(--farbe-akzent-dunkel);
  font-size: var(--schrift-fein);
  font-weight: 700;
}
body > header details > div {
  position: absolute;
  top: calc(100% + var(--abstand-2));
  right: 0;
  z-index: 1;
  width: var(--menue-breite);
  max-width: var(--menue-hoechstens);
  padding: var(--innen-menue);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-menue);
}
/* Die Kopfzeile: Kreis, Name fett, darunter Benutzername und Rolle. */
body > header details p:first-child {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  column-gap: var(--luecke-konto);
  margin: 0;
  padding: var(--innen-eintrag);
}
body > header details p:first-child > span { grid-row: span 2; }
body > header details b { font-size: var(--schrift-klein); }
/* Abschnitte, je mit einer Linie oben: die Einträge, dann letzte Anmeldung und Abmelden. */
body > header details ul,
body > header details ul + p { border-top: var(--linie) solid var(--farbe-linie); }
body > header details ul { list-style: none; margin: 0; padding: var(--innen-menue) 0; }
body > header details li a,
body > header details form button {
  display: flex;
  width: 100%;
  height: auto;
  padding: var(--innen-eintrag);
  border-radius: var(--radius-knopf);
  font-size: var(--schrift-knopf);
  font-weight: 500;
  text-align: left;
  justify-content: flex-start;
}
body > header details li a { color: var(--farbe-text); text-decoration: none; }
body > header details li a:hover { background: var(--farbe-flaeche-zart); }
/* Der Wert rechts im Eintrag: Stand des zweiten Faktors, Zahl der Codes — null übrig in Rot. */
body > header details li a > span { margin-left: auto; padding-left: var(--abstand-3); color: var(--farbe-text-blass); font-size: var(--schrift-fein); }
body > header details li a > span[data-leer] { color: var(--farbe-fehler); }
body > header details ul + p { max-width: none; margin: 0; padding: var(--innen-eintrag); color: var(--farbe-text-blass); font-size: var(--schrift-fein); }
body > header details form { margin: 0; }

/* Schmal: der Text im Menüknopf entfällt; Kreis und Winkel bleiben. */
@media (max-width: 40rem) {
  /* Name und Rolle: nur vorgelesen — der Menüknopf behält seinen Namen (Komponente „Nur vorgelesen“). */
  body > header summary > span:first-child {
    position: absolute;
    width: var(--unsichtbar);
    height: var(--unsichtbar);
    margin: calc(var(--unsichtbar) * -1);
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

main {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--abstand-6) var(--rand) var(--abstand-7);
}
main > h1 { margin-bottom: var(--abstand-4); }

/* --- 4 · Knöpfe, Felder, Meldungen ---------------------------------------------- */

/* Der Knopf: weiß mit grauem Rand; die Wörter in `data-knopf` geben ihm seine Form —
   `haupt`, `leise`, `gefahr`, `klein`, auch mehrere zugleich. */
button,
a[data-knopf],
summary:where([data-knopf]),
a[href$="/benutzer/neu"],
a[rel="prev"],
a[rel="next"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--knopf-hoehe);
  padding: var(--innen-knopf);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-knopf);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font: inherit;
  font-size: var(--schrift-knopf);
  font-weight: 600;
  line-height: var(--zeile-knopf);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
button:hover,
a[data-knopf]:hover,
summary:where([data-knopf]):hover,
a[href$="/benutzer/neu"]:hover { background: var(--farbe-flaeche-zart); }
[data-knopf~="haupt"] { background: var(--farbe-akzent-dunkel); border-color: var(--farbe-akzent-dunkel); color: var(--farbe-flaeche); }
[data-knopf~="haupt"]:hover { background: var(--farbe-akzent-tief); border-color: var(--farbe-akzent-tief); color: var(--farbe-flaeche); }
[data-knopf~="haupt"]:disabled { background: var(--farbe-gesperrt); border-color: var(--farbe-gesperrt); cursor: not-allowed; }
[data-knopf~="leise"] { border-color: transparent; color: var(--farbe-text-mittel); }
[data-knopf~="gefahr"],
[data-knopf~="gefahr"]:hover { color: var(--farbe-fehler); }
[data-knopf~="klein"] { height: var(--knopf-hoehe-klein); padding: var(--innen-knopf-klein); font-size: var(--schrift-pille); }
/* `haupt` und `gefahr` zugleich: gefüllt rot — die eine Handlung, die sich nicht zurücknehmen lässt. */
[data-knopf~="haupt"][data-knopf~="gefahr"],
[data-knopf~="haupt"][data-knopf~="gefahr"]:hover { background: var(--farbe-fehler); border-color: var(--farbe-fehler); color: var(--farbe-flaeche); }

/* Der leise Knopf der Vorlagen, die noch kein `data-knopf` tragen: in Tabellenzeilen, zum
   Blättern, zum Leeren des Einleitungstexts, zum Aufheben einer Blockierung. */
td button,
a[rel="prev"],
a[rel="next"],
form[action$="/einleitungstext"]:not(:has(textarea)) button:not([data-knopf]),
form[action$="/blockierung-aufheben"] button {
  height: auto;
  padding: var(--innen-knopf-leise);
  color: var(--farbe-akzent-dunkel);
  font-size: var(--schrift-klein);
}
td button:hover,
a[rel="prev"]:hover,
a[rel="next"]:hover,
form[action$="/einleitungstext"]:not(:has(textarea)) button:not([data-knopf]):hover,
form[action$="/blockierung-aufheben"] button:hover { background: var(--farbe-akzent-hell); border-color: var(--farbe-akzent-dunkel); color: var(--farbe-akzent-dunkel); }

/* Was sich nicht zurücknehmen lässt. */
form[action$="/loeschen"] button { background: var(--farbe-fehler); border-color: var(--farbe-fehler); color: var(--farbe-flaeche); }
a[href$="/loeschen"] { color: var(--farbe-fehler); }

/* Die Karte: weiße Fläche mit Rand, runden Ecken und dem leisen Schatten. */
[data-karte] {
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-karte);
}
/* Die Überschrift einer Karte: Textfarbe statt Akzentblau, ohne Versalien und ohne Linie —
   unter 1.17rem trüge das Blau den Kontrast nicht. */
[data-karte] h2 {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--farbe-text);
  font-size: var(--schrift-h2-karte);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

label { display: block; margin-bottom: var(--abstand-1); font-weight: 700; }
input:not([type="hidden"]),
select,
textarea {
  display: block;
  width: 100%;
  max-width: var(--breite-feld);
  padding: var(--innen-feld);
  border: var(--linie) solid var(--farbe-linie-stark);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font: inherit;
}
textarea { max-width: var(--breite-text); font-family: var(--schrift); resize: vertical; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible { border-color: var(--farbe-akzent-dunkel); }
/* Der Zähler hinter einem Feld mit Höchstlänge — ihn setzt allein das Skript der Oberfläche. */
[data-zaehler] { display: block; margin-top: var(--abstand-1); color: var(--farbe-text-blass); font-size: var(--schrift-zaehler); }
form > div { margin-bottom: var(--abstand-4); }
form { margin: 0 0 var(--abstand-4); }

p[role="alert"],
p[role="status"] {
  padding: var(--abstand-3) var(--abstand-4);
  border: var(--linie) solid var(--farbe-fehler);
  border-left-width: var(--balken);
  border-radius: var(--radius-klein);
  background: var(--farbe-fehler-hell);
  color: var(--farbe-text);
}
p[role="status"] { border-color: var(--farbe-akzent-dunkel); background: var(--farbe-akzent-hell); }
/* Der Hinweis „Der Stand hat sich geändert. Neu laden“: die Hinweisleiste, die das Skript der
   Oberfläche hinter das erste Element von `main` setzt (documents/adr/0185-auffrischen-der-seiten.md). */
p[data-hinweis="stand"] { margin: 0 0 var(--abstand-4); }
p[data-hinweis="stand"] a { font-weight: 600; }

/* Die Marke an einer Zelle: „⚠ Unsicher“, „Kein Wert“, „⚠ Nicht belegt“ … */
mark {
  display: inline-block;
  padding: var(--innen-marke);
  border: var(--linie) solid var(--farbe-warnung-linie);
  border-radius: var(--radius-rund);
  background: var(--farbe-warnung-hell);
  color: var(--farbe-warnung);
  font-size: var(--schrift-klein);
  font-weight: 700;
  white-space: nowrap;
}

/* Die Marken an einem Namen: „AlpJobs“ mit Rand, „Neu“ auf heller Fläche. */
[data-marke] {
  display: inline-block;
  margin-left: var(--abstand-2);
  border-radius: var(--radius-rund);
  color: var(--farbe-akzent-dunkel);
  font-size: var(--schrift-marke);
  font-weight: 700;
}
[data-marke="alpjobs"] { padding: var(--innen-marke-alpjobs); border: var(--linie) solid var(--farbe-akzent-dunkel); }
[data-marke="neu"] { padding: var(--innen-marke-neu); background: var(--farbe-akzent-hell); letter-spacing: var(--sperrung-marke); }

/* Der Status eines Profils als Pille: das Wort auf der Fläche seiner Farbe, mit Rand. */
span[data-status] {
  display: inline-flex;
  align-items: center;
  padding: var(--innen-pille);
  border-radius: var(--radius-rund);
  font-size: var(--schrift-pille);
  font-weight: 700;
  white-space: nowrap;
}
span[data-status="Offen"] { background: var(--farbe-offen-flaeche); color: var(--farbe-offen-schrift); border: var(--linie) solid var(--farbe-offen-rand); }
span[data-status="In Bearbeitung"] { background: var(--farbe-arbeit-flaeche); color: var(--farbe-arbeit-schrift); border: var(--linie) solid var(--farbe-arbeit-rand); }
span[data-status="Blockiert"] { background: var(--farbe-blockiert-flaeche); color: var(--farbe-blockiert-schrift); border: var(--linie) solid var(--farbe-blockiert-rand); }
span[data-status="Fertig"] { background: var(--farbe-fertig-flaeche); color: var(--farbe-fertig-schrift); border: var(--linie) solid var(--farbe-fertig-rand); }

/* Der QR-Code der Einrichtung des zweiten Faktors (accounts/services/qr_code.py): dunkle
   Module auf heller Fläche, die Ruhezone gehört zum Bild. Die Klasse trägt das erzeugte SVG
   selbst — keine Vorlage; das SVG hat weder Farbe noch Stil. */
.qr-code {
  display: block;
  width: var(--qr-breite);
  max-width: 100%;
  height: auto;
  margin: 0 0 var(--abstand-4);
  background: var(--farbe-flaeche);
  fill: var(--farbe-text);
  shape-rendering: crispEdges;
}

/* Die zehn Wiederherstellungscodes, genau einmal gezeigt: in fester Schrift, gut abzuschreiben. */
ol[aria-label="Wiederherstellungscodes"] {
  margin: 0 0 var(--abstand-4);
  padding-left: var(--einzug-fehlerliste);
  font-family: var(--schrift-fest);
  line-height: var(--zeile);
}

/* --- 5 · Tabellen ---------------------------------------------------------------- */

table {
  width: 100%;
  margin: 0 0 var(--abstand-4);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius);
  border-spacing: 0;
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten);
}
th, td {
  padding: var(--innen-zelle-hoch) var(--abstand-4);
  border-bottom: var(--linie) solid var(--farbe-linie);
  text-align: left;
  vertical-align: top;
}
tbody tr:last-child > * { border-bottom: 0; }
thead th {
  background: var(--farbe-flaeche-leise);
  color: var(--farbe-text-leise);
  font-size: var(--schrift-fein);
  font-weight: 600;
  letter-spacing: var(--sperrung-tabellenkopf);
  text-transform: uppercase;
  white-space: nowrap;
}
thead th:first-child { border-top-left-radius: var(--radius); }
thead th:last-child { border-top-right-radius: var(--radius); }
tbody th { width: var(--spalte-beschriftung); color: var(--farbe-text-leise); font-weight: 700; }
tbody tr:hover > * { background: var(--farbe-flaeche-leise); }
/* Eine Zeile mit Marke hebt sich ab — die Marke selbst trägt das Wort. */
tbody tr:has(mark) > * { background: var(--farbe-warnung-zeile); }
td ul { margin: 0; padding-left: var(--einzug-liste-zelle); }
td form { display: inline-block; margin: 0; }
td form + a { margin-left: var(--abstand-3); }

/* Schmales Fenster: Die Tabelle rollt in ihrem eigenen Bereich, die Seite nie quer. */
@media (max-width: 62rem) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { min-width: var(--spalte-mindest); }
  tbody th { width: auto; }
  td:has(> ul), td:has(> mark) { min-width: var(--spalte-breit); }
  table:has(th:nth-child(8)) :is(th, td):first-child { min-width: 0; }
  #unterlagen td:first-child { min-width: var(--spalte-name); }
}

/* --- 6 · Anmeldung: eine schmale Karte ------------------------------------------- */

main:has(> form[action="/anmelden"]) {
  max-width: var(--breite-feld);
  margin-top: var(--abstand-7);
  padding: var(--abstand-6);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten);
}
main:has(> form[action="/anmelden"]) form { margin: 0; }
main:has(> form[action="/anmelden"]) button { width: 100%; margin-top: var(--abstand-2); }
@media (max-width: 30rem) {
  main:has(> form[action="/anmelden"]) { width: auto; max-width: none; margin: var(--abstand-5) var(--rand) 0; padding: var(--abstand-5); }
}

/* --- 7 · Arbeitsliste (erkannt an der Statusauswahl, die Tabelle an `#liste`) ------- */

main:has(> nav[aria-label="Status"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-4) var(--luecke-werkzeug);
}
main:has(> nav[aria-label="Status"]) > * { flex: 0 0 100%; min-width: 0; max-width: none; margin: 0; }

/* Der Kopf: die Überschrift, dahinter die Zahl der Profile oder Treffer. */
main:has(> nav[aria-label="Status"]) > h1 { font-size: var(--schrift-h1-liste); }
/* Rechts neben der Überschrift die Pille des Abgleichs mit Dropbox; reicht der Platz nicht,
   bricht sie unter die Überschrift um. Der Punkt ist grün, nach einem fehlgeschlagenen
   letzten Lauf rot (mit dem Wort im `aria-label`), vor dem ersten Lauf grau. */
main:has(> nav[aria-label="Status"]) > h1:has(+ p[data-abgleich]) { flex: 1 1 auto; }
main:has(> nav[aria-label="Status"]) > p[data-abgleich] {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abgleich-luecke);
  padding: var(--abgleich-innen);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-rund);
  background: var(--farbe-flaeche);
  color: var(--farbe-text-mittel);
  font-size: var(--schrift-zelle);
}
p[data-abgleich] > span:first-child {
  flex: none;
  width: var(--abgleich-punkt);
  height: var(--abgleich-punkt);
  border-radius: 50%;
  background: var(--farbe-abgleich-gut);
  box-shadow: 0 0 0 var(--abgleich-ring) var(--farbe-abgleich-ring);
}
p[data-abgleich="fehlgeschlagen"] > span:first-child {
  background: var(--farbe-fehler);
  box-shadow: 0 0 0 var(--abgleich-ring) var(--farbe-fehler-hell);
}
p[data-abgleich="offen"] > span:first-child {
  background: var(--farbe-text-blass);
  box-shadow: 0 0 0 var(--abgleich-ring) var(--farbe-offen-flaeche);
}
p[data-abgleich] b { color: var(--farbe-text); font-weight: 600; }
p[data-abgleich] > span:nth-child(3) { color: var(--farbe-linie); }
main:has(> nav[aria-label="Status"]) > h1 > small {
  margin-left: var(--abstand-2);
  color: var(--farbe-text-blass);
  font-size: var(--schrift-zahl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Die Werkzeugleiste: die Suche, daneben die Auswahlen „AlpJobs-Profil“ und „Bearbeitet von“
   mit „Anwenden“. */
main:has(> nav[aria-label="Status"]) > form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
}
main:has(> nav[aria-label="Status"]) > form:has(> #suche) { flex: 1 1 var(--suche-breit); }
main:has(> nav[aria-label="Status"]) > form:has(> #marke) { flex: 0 1 auto; gap: 0; }
/* Die Beschriftung der Suche: nur vorgelesen — das Feld trägt den Platzhalter (Komponente
   „Nur vorgelesen“, dieselben Deklarationen wie im Menüknopf). */
label[for="suche"] {
  position: absolute;
  width: var(--unsichtbar);
  height: var(--unsichtbar);
  margin: calc(var(--unsichtbar) * -1);
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#suche {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  height: var(--feld-hoehe);
  padding: var(--innen-suche);
  border-color: var(--farbe-linie);
  border-radius: var(--radius-knopf);
  background: var(--farbe-flaeche) var(--bild-lupe) var(--lage-lupe) / var(--lupe) no-repeat;
}
#suche::placeholder { color: var(--farbe-text-blass); }
/* Die Auswahl: Beschriftung und Feld in einem Rahmen, die Beschriftung leise, der Wert fett. */
label[for="marke"],
#marke,
label[for="bearbeiter"],
#bearbeiter {
  display: flex;
  align-items: center;
  width: auto;
  height: var(--feld-hoehe);
  margin: 0;
  border: var(--linie) solid var(--farbe-linie);
  background: var(--farbe-flaeche);
}
label[for="marke"],
label[for="bearbeiter"] {
  padding: var(--innen-auswahl);
  border-right: 0;
  border-radius: var(--radius-knopf) 0 0 var(--radius-knopf);
  color: var(--farbe-text-blass);
  font-size: var(--schrift-zelle);
  font-weight: 400;
}
#marke,
#bearbeiter {
  padding: var(--innen-auswahl);
  border-left: 0;
  border-radius: 0 var(--radius-knopf) var(--radius-knopf) 0;
  font-size: var(--schrift-zelle);
  font-weight: 600;
  cursor: pointer;
}
#marke + button,
#bearbeiter + button,
#marke + label[for="bearbeiter"] { margin-left: var(--abstand-2); }

/* Die Reiter des Status: rund; „Alle“ ohne Fläche, die vier Zustände in den Farben ihrer
   Pille. Gewählt ist „Alle“ dunkelblau, ein Zustand voll in der Schriftfarbe seiner Pille.
   Erkannt wird der Zustand an seiner Adresse. */
main > nav[aria-label="Status"] ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
main > nav[aria-label="Status"] a,
#historie nav a {
  display: block;
  padding: var(--innen-reiter);
  border: var(--linie) solid transparent;
  border-radius: var(--radius-rund);
  color: var(--farbe-text-mittel);
  font-size: var(--schrift-zelle);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
main > nav[aria-label="Status"] a:hover,
#historie nav a:hover { background: var(--farbe-flaeche-zart); color: var(--farbe-text); }
main > nav[aria-label="Status"] a[aria-current="page"],
#historie nav a[aria-current="page"] { background: var(--farbe-akzent-dunkel); border-color: var(--farbe-akzent-dunkel); color: var(--farbe-flaeche); }
main > nav[aria-label="Status"] a[href*="status=offen"] { background: var(--farbe-offen-flaeche); color: var(--farbe-offen-schrift); border-color: var(--farbe-offen-rand); }
main > nav[aria-label="Status"] a[href*="status=in_bearbeitung"] { background: var(--farbe-arbeit-flaeche); color: var(--farbe-arbeit-schrift); border-color: var(--farbe-arbeit-rand); }
main > nav[aria-label="Status"] a[href*="status=blockiert"] { background: var(--farbe-blockiert-flaeche); color: var(--farbe-blockiert-schrift); border-color: var(--farbe-blockiert-rand); }
main > nav[aria-label="Status"] a[href*="status=fertig"] { background: var(--farbe-fertig-flaeche); color: var(--farbe-fertig-schrift); border-color: var(--farbe-fertig-rand); }
main > nav[aria-label="Status"] a[href*="status=offen"][aria-current="page"] { background: var(--farbe-offen-schrift); border-color: var(--farbe-offen-schrift); color: var(--farbe-flaeche); }
main > nav[aria-label="Status"] a[href*="status=in_bearbeitung"][aria-current="page"] { background: var(--farbe-arbeit-schrift); border-color: var(--farbe-arbeit-schrift); color: var(--farbe-flaeche); }
main > nav[aria-label="Status"] a[href*="status=blockiert"][aria-current="page"] { background: var(--farbe-blockiert-schrift); border-color: var(--farbe-blockiert-schrift); color: var(--farbe-flaeche); }
main > nav[aria-label="Status"] a[href*="status=fertig"][aria-current="page"] { background: var(--farbe-fertig-schrift); border-color: var(--farbe-fertig-schrift); color: var(--farbe-flaeche); }
/* Unter dem Zeiger behält ein Reiter eines Zustands seine Farben und wird nur eine Spur dunkler. */
main > nav[aria-label="Status"] a[href*="status="]:hover { filter: var(--reiter-darueber); }
/* Der Reiter „Fehlgeschlagen" in seinen Farben; erkannt an seiner Adresse. */
main > nav[aria-label="Status"] a[href*="verarbeitung=fehlgeschlagen"] { background: var(--farbe-fehler-flaeche); color: var(--farbe-fehler-schrift); border-color: var(--farbe-fehler-rand); }
main > nav[aria-label="Status"] a[href*="verarbeitung=fehlgeschlagen"]:hover { filter: var(--reiter-darueber); }
main > nav[aria-label="Status"] a[href*="verarbeitung=fehlgeschlagen"][aria-current="page"] { background: var(--farbe-fehler-schrift); border-color: var(--farbe-fehler-schrift); color: var(--farbe-flaeche); }
/* Der Trenner zwischen den vier Zuständen und „Fehlgeschlagen". */
main > nav[aria-label="Status"] li[data-trenner] { width: var(--linie); align-self: stretch; margin: var(--rand-trenner); background: var(--farbe-trenner); }
/* Die Zahl an einem Reiter: tabellarische Ziffern, eine Spur leiser. */
main > nav[aria-label="Status"] span[data-reiter-zahl] { font-variant-numeric: tabular-nums; font-weight: 500; opacity: var(--deckung-zahl); margin-left: var(--abstand-2); }
main > nav[aria-label="Status"] li:first-child span[data-reiter-zahl] { opacity: 1; color: var(--farbe-text-blass); }
/* Ist „Alle" gewählt, steht seine Zahl weiß auf dem dunklen Blau, eine Spur leiser. */
main > nav[aria-label="Status"] li:first-child a[aria-current="page"] span[data-reiter-zahl] { color: var(--farbe-flaeche); opacity: var(--deckung-zahl-gewaehlt); }

/* Der Kostenhinweis steht unmittelbar vor der Karte der Liste. */
main:has(> nav[aria-label="Status"]) > p:has(+ #liste) {
  padding: var(--abstand-2) var(--abstand-4);
  border-left: var(--balken-schmal) solid var(--farbe-akzent);
  border-radius: var(--radius-klein);
  background: var(--farbe-akzent-hell);
  font-size: var(--schrift-klein);
}
/* „Angezeigt sind die jüngsten …“ in der Trefferansicht. */
main:has(> nav[aria-label="Status"]) > nav + p:not(:has(+ #liste)) { color: var(--farbe-text-leise); }

/* Die Tabelle in ihrer Karte: Sie rollt quer in der Karte, die Seite nie. */
#liste { overflow-x: auto; }
#liste table {
  min-width: var(--liste-mindest);
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#liste thead th {
  padding: var(--innen-kopf-liste);
  background: var(--farbe-flaeche);
  color: var(--farbe-text-blass);
}
#liste td { padding: var(--innen-zelle-liste); vertical-align: middle; }
#liste tbody tr { position: relative; }
#liste tbody tr:hover > * { background: var(--farbe-flaeche-zart); }
/* Ohne Zeile: ein Satz über alle Spalten. */
#liste td[colspan] { padding: var(--abstand-7) var(--abstand-4); color: var(--farbe-text-blass); text-align: center; }
#liste tbody tr:has(> td[colspan]):hover > * { background: var(--farbe-flaeche); }

/* Der Name: davor der Rahmen des Lichtbilds — mit dem Bild oder, ohne Lichtbild, dem
   durchgestrichenen Platzhalter; der Verweis spannt sich über die ganze Zeile, ohne Skript.
   Knopf, Grund und der Rahmen (sein Titel) liegen darüber. */
#liste td:first-child a {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  color: var(--farbe-text);
  font-weight: 600;
  text-decoration: none;
}
#liste td:first-child > [data-rahmen] {
  position: relative;
  z-index: 1;
  display: inline-block;
  flex: none;
  vertical-align: middle;
  width: var(--rahmen-breite);
  height: var(--rahmen-hoehe);
  min-height: var(--rahmen-hoehe);
  margin-right: var(--abstand-3);
  overflow: hidden;
  border-radius: var(--radius-rahmen);
  background: var(--bild-rahmen) center / cover no-repeat;
}
#liste td:first-child > [data-rahmen="ohne"] { background-image: var(--bild-rahmen-ohne); }
/* Das Bild füllt den Rahmen, beschnitten, nie verzerrt; bis es da ist, steht der Platzhalter
   des Rahmens dahinter. Kommt es nicht (`404`), deckt sein `::after` das Symbol des Browsers
   für ein fehlendes Bild mit demselben Platzhalter zu — ein geladenes Bild zeichnet kein
   `::after`. */
#liste td:first-child > [data-rahmen] > img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#liste td:first-child > [data-rahmen] > img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bild-rahmen) center / cover no-repeat;
}
#liste td:first-child a::after { content: ""; position: absolute; inset: 0; }
#liste td:first-child a:hover { color: var(--farbe-akzent-dunkel); }
#liste td form,
#liste td small { position: relative; z-index: 1; }
#liste td [data-marke] { margin-left: 0; }
/* Die Marke „Neu“ steht hinter dem Namen auf seiner Zeile, nicht darunter. */
#liste td:first-child > [data-marke="neu"] { margin-left: var(--abstand-2); vertical-align: middle; }

/* Die Verarbeitung: das Wort der Lage, darunter Balken, Knopf, Grund und Satz der Ausgabe. */
#liste td > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--luecke-lage);
  min-width: var(--spalte-lage);
  color: var(--farbe-text-mittel);
  font-size: var(--schrift-zelle);
}
#liste td > div > form { margin: 0; }
#liste td > div > small { max-width: var(--breite-grund); color: var(--farbe-text-blass); font-size: var(--schrift-fein); }
span[data-lage="fehlgeschlagen"] { color: var(--farbe-fehler); font-weight: 600; }
/* Die Kurzform „Ablage gescheitert“ in der Spalte `Verarbeitung` (#677). */
#liste td > div > small[data-ausgabe="fehlgeschlagen"] { color: var(--farbe-fehler); font-weight: 600; }

/* Zuletzt bearbeitet: der kleine Kreis mit den Initialen, daneben der Name, darunter die Zeit;
   ohne Wechsel „noch nicht“. Nichts bricht um. */
#liste span[data-bearbeitet] {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  color: var(--farbe-text-mittel);
  font-size: var(--schrift-zelle);
  white-space: nowrap;
}
#liste span[data-bearbeitet] > span[aria-hidden] {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--kreis-klein);
  height: var(--kreis-klein);
  border-radius: 50%;
  background: var(--farbe-akzent-hell);
  color: var(--farbe-akzent-dunkel);
  font-size: var(--schrift-kreis-klein);
  font-weight: 700;
}
#liste span[data-bearbeitet] > span:last-child { line-height: var(--zeile-bearbeitet); }
#liste span[data-bearbeitet] small {
  display: block;
  position: static;
  color: var(--farbe-text-blass);
  font-size: var(--schrift-fein);
}
#liste span[data-bearbeitet="leer"] { color: var(--farbe-text-blass); }

/* Eingang: der Kalendertag, die fünfte Spalte — leise, Ziffern gleich breit, ohne Umbruch. */
#liste td:nth-child(5) {
  color: var(--farbe-text-mittel);
  font-size: var(--schrift-zelle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Die Lauf-Anzeige: bei „läuft“ ein Balken mit Läufer, bei „eingereiht“ drei Punkte. */
span[data-lauf="balken"] {
  display: block;
  position: relative;
  overflow: hidden;
  width: var(--balken-breite);
  height: var(--balken-hoehe);
  border-radius: var(--radius-balken);
  background: var(--farbe-flaeche-zart);
}
span[data-lauf="balken"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--laeufer);
  border-radius: var(--radius-balken);
  background: var(--farbe-akzent);
  animation: lauf var(--dauer-lauf) ease-in-out infinite;
}
span[data-lauf="punkte"] { display: inline-flex; gap: var(--luecke-punkte); margin-left: var(--abstand-2); }
span[data-lauf="punkte"] > span {
  width: var(--punkt-warten);
  height: var(--punkt-warten);
  border-radius: 50%;
  background: var(--farbe-text-blass);
  opacity: var(--deckung-punkte);
  animation: punkte var(--dauer-punkte) infinite;
}
span[data-lauf="punkte"] > span:nth-child(2) { animation-delay: var(--verzug-zweiter); }
span[data-lauf="punkte"] > span:nth-child(3) { animation-delay: var(--verzug-dritter); }
@keyframes lauf {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@keyframes punkte {
  50% { opacity: 1; }
}
/* Bewegung aus: nichts läuft; der Balken steht halb deckend in voller Breite. */
@media (prefers-reduced-motion: reduce) {
  span[data-lauf="balken"]::after,
  span[data-lauf="punkte"] > span { animation: none; }
  span[data-lauf="balken"]::after { width: 100%; opacity: var(--deckung-ruhig); }
}

/* Der Fuß der Karte: links die Zahl der gezeigten, rechts Seite, Zurück und Weiter. */
#liste > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
  padding: var(--innen-kopf-liste);
  border-top: var(--linie) solid var(--farbe-linie);
  color: var(--farbe-text-blass);
  font-size: var(--schrift-fuss);
}
#liste > div > p { margin: 0; }
#liste > div > p:first-child { flex: 1 1 auto; }
a[rel="prev"]::before { content: "‹ "; }
a[rel="next"]::after { content: " ›"; }

/* Schmal: kein Tabellenkopf, jede Zeile eine Karte — der Name, die Verarbeitung und, unter
   dem Status, „Zuletzt bearbeitet“ über die volle Breite, dazwischen die Marke und der Status.
   Der Eingang entfällt. */
@media (max-width: 40rem) {
  #liste table { min-width: 0; }
  #liste thead { display: none; }
  #liste tbody { display: block; }
  #liste tbody tr {
    display: grid;
    grid-template-columns: var(--spalten-karte);
    align-items: center;
    gap: var(--abstand-2) var(--abstand-3);
    padding: var(--innen-zelle-liste);
    border-bottom: var(--linie) solid var(--farbe-linie);
  }
  #liste tbody tr:last-child { border-bottom: 0; }
  #liste td { min-width: 0; padding: 0; border: 0; }
  #liste td:first-child,
  #liste td:last-child { grid-column: 1 / -1; }
  #liste td:has(> div) { grid-column: 1 / -1; }
  #liste td:nth-child(5) { display: none; }
}

/* --- 8 · Prüfansicht (erkannt an ihren Abschnitten) -------------------------------- */

section {
  margin: 0 0 var(--abstand-5);
  padding: var(--abstand-5) var(--abstand-5) var(--abstand-4);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten);
}
section > h2:first-child { margin-top: 0; }
section table { box-shadow: none; }
section > :last-child { margin-bottom: 0; }

/* Fehlergrund: was im Profil vor der ersten Zwischenüberschrift steht. */
#zielprofil > p:not(h2 ~ p, [data-ohne-ergebnis]),
#zielprofil > ul:not(h2 ~ ul) {
  max-width: none;
  margin: 0;
  padding: var(--abstand-3) var(--abstand-4);
  border-left: var(--balken) solid var(--farbe-fehler);
  background: var(--farbe-fehler-hell);
}
#zielprofil > :is(p, form):not(h2 ~ *) + p:not(h2 ~ p, [data-ohne-ergebnis]) { margin-top: var(--abstand-2); border-radius: var(--radius-klein) var(--radius-klein) 0 0; }
#zielprofil > ul:not(h2 ~ ul) { padding-left: var(--einzug-fehlerliste); padding-top: 0; }
#zielprofil > :is(p, ul):not(h2 ~ *):has(+ :is(h2, [data-karte])) { margin-bottom: var(--abstand-5); }

#zielprofil h3 { color: var(--farbe-text-leise); font-size: var(--schrift-klein); letter-spacing: var(--sperrung-h3); text-transform: uppercase; }

form[action$="/wunsch"] textarea,
form[action$="/einleitungstext"] textarea,
form[action$="/interview"] textarea,
form[action$="/wuensche"] textarea,
form[action$="/blockieren"] textarea { margin-bottom: var(--abstand-3); }
form[action$="/wunsch"] + p,
form[action$="/einleitungstext"] + p,
form[action$="/interview"] + p,
form[action$="/wuensche"] + p { color: var(--farbe-text-leise); font-size: var(--schrift-klein); }
/* Übernehmen und Leeren: die zwei Formulare ohne Feld stehen nebeneinander. */
form[action$="/einleitungstext"]:not(:has(textarea)) { display: inline-block; margin-right: var(--abstand-2); }

#unterlagen td:first-child { font-weight: 700; overflow-wrap: anywhere; }

/* Verweis zurück: „Arbeitsliste“ mit Winkel, über dem Block der Verarbeitung. */
main:has(> section) > p:first-child { margin-bottom: var(--kopf-verweis-abstand); }
main:has(> section) > p:first-child a { font-size: var(--kopf-verweis); font-weight: 600; color: var(--farbe-akzent-dunkel); text-decoration: none; }
main:has(> section) > p:first-child a::before { content: "‹ "; }

/* Hinweis gleichzeitigen Öffnens: Fläche mit Rand, zwischen dem Verweis und dem Block der
   Verarbeitung. */
main:has(> section) > p:first-child + p[role="status"] {
  max-width: none;
  margin: 0 0 var(--hinweis-abstand);
  padding: var(--hinweis-innen);
  border: var(--linie) solid var(--farbe-arbeit-rand);
  border-radius: var(--hinweis-radius);
  background: var(--farbe-akzent-hell);
  color: var(--farbe-arbeit-schrift);
  font-size: var(--hinweis-schrift);
}

/* Die Kopfkarte (`#kopf`, eine Karte aus Abschnitt 4): Rahmen | Name und Metazeile |
   Aktionen; darunter über die volle Breite der Satz vor der Freigabe. */
#kopf {
  display: grid;
  grid-template-columns: var(--kopf-raster);
  gap: var(--kopf-karte-abstand);
  align-items: start;
  margin-bottom: var(--abstand-5);
  padding: var(--kopf-karte-innen);
}
#kopf > [data-rahmen] {
  width: var(--kopf-rahmen-breite);
  height: var(--kopf-rahmen-hoehe);
  overflow: hidden;
  border-radius: var(--kopf-rahmen-radius);
  background: var(--bild-rahmen) center / cover no-repeat;
}
#kopf > [data-rahmen="ohne"] { background-image: var(--bild-rahmen-ohne); }
/* Wie in der Liste: das Bild beschnitten; kommt es nicht, deckt sein `::after` das Symbol des
   Browsers mit dem Platzhalter zu. */
#kopf > [data-rahmen] > img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
#kopf > [data-rahmen] > img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bild-rahmen) center / cover no-repeat;
}
#kopf h1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kopf-h1-abstand); margin: 0; font-size: var(--kopf-h1); }
#kopf h1 > [data-marke] { margin-left: 0; }
#kopf h1 + p {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kopf-metazeile-abstand);
  max-width: none;
  margin: var(--abstand-2) 0 0;
  color: var(--farbe-text-mittel);
  font-size: var(--kopf-metazeile);
}
#kopf h1 + p b { font-weight: 600; color: var(--farbe-text); }
#kopf h1 + p code { font-family: var(--schrift-fest); }
/* Der Stand der Ausgabe unter der Metazeile: die Hinweisleiste, rot oder blau (#677). */
#kopf h1 + p + p[data-ausgabe] { margin: var(--abstand-2) 0 0; }
#kopf > div:nth-child(3) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--kopf-aktionen-abstand);
}
#kopf > div:nth-child(3) form { margin: 0; }
/* Entwurf-Paar: zwei Knöpfe, zusammengesetzt — innen keine Rundung, der rechte ohne linken Rand. */
#kopf > div:nth-child(3) > span { display: inline-flex; }
#kopf > div:nth-child(3) > span > a:first-child { border-radius: var(--radius-knopf) 0 0 var(--radius-knopf); }
#kopf > div:nth-child(3) > span > a:last-child { border-left-width: 0; border-radius: 0 var(--radius-knopf) var(--radius-knopf) 0; }
/* Blockieren: aufgeklappt stehen die Aktionen in eigener Zeile über die volle Breite der Karte,
   das Formular unter einer Linie; der Zähler hat wie Beschriftung und Textfeld eine eigene Zeile
   (`flex-basis: 100%`) — `display: block` bricht in einem Flex-Container keine Zeile um. */
#kopf:has(details[open]) > div:nth-child(3) { grid-column: 1 / -1; }
#kopf details[open] { flex-basis: 100%; }
#kopf details > form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--kopf-aktionen-abstand);
  margin-top: var(--kopf-aktionen-abstand);
  padding-top: var(--block-details-abstand);
  border-top: var(--linie) solid var(--farbe-linie);
}
#kopf details label { flex-basis: 100%; margin: 0; }
#kopf details textarea { flex: 1 1 100%; max-width: none; min-height: var(--block-textarea-hoehe); margin: 0; }
#kopf details [data-zaehler] { flex-basis: 100%; margin: 0; }
/* Der Satz vor der Freigabe: rechts über die volle Breite, in der Farbe der Freigabe. */
#kopf > p {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
  color: var(--farbe-freigabe);
  font-size: var(--freigabe-hinweis);
  text-align: right;
}
#kopf > p a { color: var(--farbe-freigabe); font-weight: 700; }
/* Schmal: zwei Spalten, die Aktionen in eigener Zeile links. */
@media (max-width: 62rem) {
  #kopf { grid-template-columns: var(--kopf-raster-schmal); }
  #kopf > div:nth-child(3) { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Die Verarbeitungskarte (`#verarbeitung`, eine Karte aus Abschnitt 4) unter der Kopfkarte:
   Titel | Satz | Knopf in einer umbrechenden Zeile, die Fläche je Lage (`data-lage`).
   Aufgeklappt nimmt das Startfeld die volle Breite. */
#verarbeitung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lage-luecke);
  margin-top: var(--lage-abstand);
  padding: var(--lage-innen);
}
#verarbeitung > span[data-lauf="balken"] { width: var(--lage-balken); }
#verarbeitung > div { flex: 1 1 var(--lage-satz-breite); min-width: 0; }
#verarbeitung > div > p { margin: 0; color: var(--farbe-text-mittel); font-size: var(--lage-satz); }
#verarbeitung > div > p[data-grund] { color: var(--farbe-text); font-size: var(--lage-grund); }
#verarbeitung details[open] { flex-basis: 100%; }
#verarbeitung details > summary { width: fit-content; margin-left: auto; }
#verarbeitung details > form {
  display: grid;
  gap: var(--abstand-3);
  margin-top: var(--lage-abstand);
  padding-top: var(--lage-abstand);
  border-top: var(--linie) solid var(--farbe-linie);
}
#verarbeitung details > form > * { margin: 0; }
#verarbeitung details > form > p { color: var(--farbe-text-mittel); font-size: var(--lage-satz); }
#verarbeitung [data-feldraster] { display: grid; grid-template-columns: var(--lage-raster); gap: var(--lage-abstand); }
#verarbeitung [data-feldraster] textarea { width: 100%; max-width: none; min-height: var(--lage-feld-hoehe); }
#verarbeitung [data-feldraster] p { margin: 0; color: var(--farbe-text-blass); font-size: var(--lage-grenze); text-align: right; }
#verarbeitung details > form > p:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--abstand-2); }
#verarbeitung:where([data-lage="eingereiht"], [data-lage="laeuft"]) {
  border-color: var(--farbe-arbeit-rand);
  background: var(--farbe-lage-arbeit);
}
#verarbeitung:where([data-lage="fehlgeschlagen"], [data-lage="blockiert"]) {
  border-color: var(--farbe-lage-fehler-rand);
  background: var(--farbe-lage-fehler);
}
#verarbeitung:where([data-lage="fehlgeschlagen"], [data-lage="blockiert"]) > h2 { color: var(--farbe-fehler); }
#verarbeitung[data-lage="abgeschlossen"] > h2 { color: var(--farbe-lage-gut); }
@media (max-width: 30rem) {
  #verarbeitung [data-feldraster] { grid-template-columns: var(--lage-raster-schmal); }
}

/* Die Kurzleiste (`#kurzleiste`, #585) unter der Verarbeitungskarte: ein Streifen, der unter
   dem Kopf der Seite klebt — Mini-Kopf | Abschnitte mit der Zahl offener Posten | Historie und
   Freigeben. Mini-Kopf und Freigeben stehen nur im angehefteten Zustand da (unten, „Anheften“). */
#kurzleiste {
  position: sticky;
  top: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  gap: var(--luecke-kurzleiste);
  margin-top: var(--kurz-abstand);
  padding: var(--innen-kurzleiste);
  border-bottom: var(--linie) solid transparent;
  background: var(--farbe-grund);
}
body > p:first-child ~ main #kurzleiste { top: calc(var(--kopf-hoehe) + var(--abstand-1) * 2 + var(--schrift-klein) * var(--zeile) + var(--linie-betont)); }
#kurzleiste > div:first-child {
  position: absolute;
  visibility: hidden;
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--abstand-2);
  padding-right: var(--mini-rechts);
  border-right: var(--linie) solid var(--farbe-linie);
}
#kurzleiste [data-rahmen] {
  width: var(--mini-rahmen-breite);
  height: var(--mini-rahmen-hoehe);
  border-radius: var(--radius-mini-rahmen);
  background: var(--bild-rahmen) center / cover no-repeat;
}
#kurzleiste b { font-size: var(--schrift-mini-name); white-space: nowrap; }
#kurzleiste span[data-status] { padding: var(--innen-mini-pille); font-size: var(--schrift-mini-pille); }
#kurzleiste > nav { display: flex; flex: 1 1 auto; gap: var(--abstand-1); min-width: 0; overflow-x: auto; }
#kurzleiste > nav a {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: var(--innen-reiter);
  border-radius: var(--radius-rund);
  color: var(--farbe-text-mittel);
  font-size: var(--schrift-kurzleiste);
  font-weight: 600;
  text-decoration: none;
}
#kurzleiste > nav a:hover { background: var(--farbe-flaeche-zart); color: var(--farbe-text); }
#kurzleiste > nav a > span {
  display: inline-grid;
  place-items: center;
  min-width: var(--zahl-kreis);
  height: var(--zahl-kreis);
  margin-left: var(--zahl-abstand);
  padding: var(--innen-zahl);
  border-radius: var(--radius-rund);
  background: var(--farbe-zahl-offen);
  color: var(--farbe-flaeche);
  font-size: var(--schrift-zahl-offen);
}
#kurzleiste > div:last-child { display: flex; flex: none; align-items: center; gap: var(--luecke-unterlage); margin-left: auto; }
#kurzleiste > div:last-child form { position: absolute; visibility: hidden; margin: 0; }
/* Der Sprung auf einen Abschnitt, ein Feld, eine Listenzeile, die Präferenz oder eine Karte
   des Kopfs endet unter der Kurzleiste. */
#zielprofil h2[id],
#zielprofil [id^="zeile-"],
#zielprofil [id^="eintrag-"],
#praeferenz,
#kopf,
#verarbeitung,
#verarbeitungen { scroll-margin-top: var(--abstand-anker); }
/* Unter dem Wort „Testinstanz“ rücken die linke Spalte und das Ende eines Sprungs um dieselbe
   Höhe tiefer wie die Kurzleiste. */
body > p:first-child ~ main #original { top: calc(var(--original-oben) + var(--abstand-1) * 2 + var(--schrift-klein) * var(--zeile) + var(--linie-betont)); }
body > p:first-child ~ main #zielprofil h2[id],
body > p:first-child ~ main #zielprofil [id^="zeile-"],
body > p:first-child ~ main #zielprofil [id^="eintrag-"],
body > p:first-child ~ main #praeferenz,
body > p:first-child ~ main #kopf,
body > p:first-child ~ main #verarbeitung,
body > p:first-child ~ main #verarbeitungen { scroll-margin-top: calc(var(--abstand-anker) + var(--abstand-1) * 2 + var(--schrift-klein) * var(--zeile) + var(--linie-betont)); }

/* Anheften ohne Skript: Der Kopf (`#kopf`) gibt eine Zeitleiste seines Sichtbarseins; ist er
   über `--anheften-oben` weggescrollt, wird der Streifen weiß mit Linie und Schatten, und Mini-Kopf
   und Freigeben erscheinen. Verborgen sind sie über `visibility` — so fehlen sie in der Tab-Folge
   und im Vorlesebaum — und außerhalb des Flusses (`position: absolute`), so bleibt kein Platz frei.
   `display: none` taugt dafür nicht: ein Element ohne Kasten bekommt keine Animation. Ohne
   Unterstützung bleiben sie verborgen, die Abschnitte stehen. */
@keyframes angeheftet {
  from { border-bottom-color: transparent; background: var(--farbe-grund); box-shadow: none; }
  to { border-bottom-color: var(--farbe-linie); background: var(--farbe-flaeche); box-shadow: var(--schatten-angeheftet); }
}
@keyframes anheften {
  from { position: absolute; visibility: hidden; }
  to { position: static; visibility: visible; }
}
@supports (animation-timeline: view()) {
  main { timeline-scope: --kopf-sicht; }
  #kopf { view-timeline-name: --kopf-sicht; view-timeline-inset: var(--anheften-oben) 0; }
  #kurzleiste {
    animation: angeheftet linear both;
    animation-timeline: --kopf-sicht;
    animation-range: var(--anheften-bereich);
  }
  #kurzleiste > div:first-child,
  #kurzleiste > div:last-child form {
    animation: anheften linear both;
    animation-timeline: --kopf-sicht;
    animation-range: var(--anheften-bereich);
  }
}

/* Zwei Spalten (`#zweispaltig`, #585): links die Unterlagen (`#original`), rechts das Zielprofil,
   oben bündig; schmal eine Spalte, die Unterlagen oben. */
#zweispaltig {
  display: grid;
  grid-template-columns: var(--spalten-detail);
  gap: var(--luecke-detail);
  align-items: start;
  margin: var(--abstand-2) 0 var(--abstand-5);
}
#zweispaltig > section { min-width: 0; margin: 0; }
#zielprofil { overflow-x: auto; }
#zielprofil > p[data-ohne-ergebnis] { max-width: none; margin: 0; color: var(--farbe-text-mittel); }
#original { position: sticky; top: var(--original-oben); padding: 0; overflow: hidden; }
#original > nav { display: flex; flex-wrap: wrap; gap: var(--luecke-unterlage); padding: var(--innen-reiterzeile); }
#original > nav a {
  padding: var(--innen-reiter-unterlage);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-rund);
  background: var(--farbe-flaeche);
  color: var(--farbe-text-mittel);
  font-size: var(--schrift-unterlage);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
#original > nav a[aria-current="true"] { border-color: var(--farbe-text); background: var(--farbe-text); color: var(--farbe-flaeche); }
#original > nav + p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
  max-width: none;
  margin: 0;
  padding: var(--innen-zeile-unterlage);
  border-bottom: var(--linie) solid var(--farbe-linie);
  color: var(--farbe-text-blass);
  font-size: var(--schrift-unterlage);
}
#original > nav + p > a { margin-left: auto; }
#original > iframe { display: block; width: 100%; height: var(--betrachter-hoehe); border: 0; }
#original > p:last-child { max-width: none; margin: 0; padding: var(--innen-vorschau); background: var(--farbe-vorschau); color: var(--farbe-text-mittel); }
@media (max-width: 62rem) {
  #zweispaltig { grid-template-columns: var(--spalten-detail-schmal); }
  #original { position: static; }
}
@media (max-width: 40rem) {
  #kurzleiste b { display: none; }  /* schmal zeigt der Mini-Kopf Rahmen und Status, ohne Namen */
}

/* Die Karten „Zur Person“ und „Einleitung“ im Zielprofil (#586): Kopf mit Überschrift und Marke,
   darunter die Kleinzeile (`small`), rechts die Zahl der Zeichen (`span`); „Zur Person“ ein
   Raster aus drei Spalten — Beschriftung, Wert mit Hinweisen, Aktionen —, Zeilen mit Linie.
   Orange (`data-bestaetigen`, `data-marke="offen"`) ist allein, was vor der Freigabe zu
   bestätigen ist; blau (`data-vorschlag`, `data-marke="vorschlag"`) ist ein Vorschlag. Keine
   Regel trägt Werte beider Familien. */
#zielprofil > [data-karte] { margin: 0 0 var(--abstand-4); }
#zielprofil > [data-karte] > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--luecke-karte-kopf);
  padding: var(--innen-karte-kopf);
  border-bottom: var(--linie) solid var(--farbe-linie);
}
#zielprofil > [data-karte] > header > [data-marke] { margin-left: 0; padding: var(--innen-marke-karte); font-size: var(--schrift-marke-karte); font-weight: 600; }
#zielprofil > [data-karte] > header > :is([data-marke="offen"], [data-marke="bestaetigt"]) { margin-left: auto; }
#zielprofil > [data-karte] > header > small { flex-basis: 100%; color: var(--farbe-text-blass); font-size: var(--schrift-hinweis); }
#zielprofil > [data-karte] > header > span:not([data-marke]) { margin-left: auto; color: var(--farbe-text-blass); font-size: var(--schrift-hinweis); }
[data-marke="offen"] { background: var(--farbe-zahl-offen); color: var(--farbe-flaeche); }
[data-marke="bestaetigt"] { background: var(--farbe-flaeche-zart); color: var(--farbe-text-mittel); }
[data-marke="vorschlag"] { background: var(--farbe-akzent-hell); color: var(--farbe-arbeit-schrift); }
[data-marke="gespeichert"] { background: var(--farbe-offen-flaeche); color: var(--farbe-offen-schrift); }
#zielprofil > [data-karte] > :not(header) { margin: 0; padding: var(--innen-karte-rumpf); }

[data-felder] { display: grid; grid-template-columns: var(--spalten-felder); }
[data-felder] > div {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: var(--innen-feldzeile) 0;
  border-bottom: var(--linie) solid var(--farbe-linie);
}
[data-felder] > div:nth-last-child(-n+3) { border-bottom: 0; }
[data-felder] > div:nth-child(3n+1) { padding-right: var(--einzug-feld); color: var(--farbe-text-mittel); font-size: var(--schrift-beschriftung); }
[data-felder] > div:nth-child(3n+2) { flex-direction: column; align-items: flex-start; gap: var(--luecke-wert); }
[data-felder] > div:nth-child(3n+2) > span { font-weight: 500; overflow-wrap: anywhere; }
[data-felder] :is(small, em) { color: var(--farbe-text-blass); font-size: var(--schrift-hinweis); }
[data-felder] small[data-vorschlag] { color: var(--farbe-arbeit-schrift); }
[data-felder] > div:nth-child(3n) { flex-wrap: wrap; justify-content: flex-end; gap: var(--luecke-aktionen); padding-left: var(--einzug-aktionen); }
[data-felder] > div:nth-child(3n) form { margin: 0; }
/* „Ändern“ aufgeklappt: die Aktionen nehmen eine eigene Zeile über die drei Spalten. */
[data-felder] > div:nth-child(3n):has(details[open]) { grid-column: 1 / -1; justify-content: flex-start; }
[data-felder] details[open] { flex-basis: 100%; }
[data-felder] details > form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--luecke-aktionen); margin-top: var(--luecke-aktionen); }
[data-felder] details label { flex-basis: 100%; margin: 0; font-size: var(--schrift-beschriftung); }
[data-felder] details input:not([type="hidden"]) { flex: 1 1 auto; height: var(--feld-hoehe-klein); }
[data-felder] details [data-zaehler] { flex-basis: 100%; margin: 0; }
/* Zu bestätigen: alle drei Zellen auf der orangen Fläche, die Beschriftung mit dem Balken; die
   Hinweise eine Stufe dunkler, damit sie auf der Fläche 4,5 halten. */
[data-felder] > [data-bestaetigen] { background: var(--farbe-bestaetigen-flaeche); }
[data-felder] > [data-bestaetigen]:nth-child(3n+1) { padding-left: var(--einzug-aktionen); box-shadow: inset var(--balken-fein) 0 0 var(--farbe-zahl-offen); }
[data-felder] > [data-bestaetigen] > strong { color: var(--farbe-freigabe); font-size: var(--schrift-hinweis); font-weight: 600; }
[data-felder] > [data-bestaetigen] > :is(small, em):not([data-vorschlag]) { color: var(--farbe-text-leise); }

/* Einleitung: der Text höchstens 68 Zeichen breit, als Vorschlag mit dem blauen Balken;
   Kleinzeilen (`p > small`) leise; die Präferenz unter einer Linie, „Präferenz:“ fett. */
#zielprofil > [data-karte] > div:not([data-felder], [data-liste]) > p:not(:has(small)) { max-width: var(--breite-einleitung); font-size: var(--schrift-einleitung); line-height: var(--zeile-einleitung); }
p[data-vorschlag] { padding-left: var(--abstand-3); border-left: var(--balken-fein) solid var(--farbe-akzent); }
#zielprofil > [data-karte] p > small { color: var(--farbe-text-blass); font-size: var(--schrift-satz-karte); }
#zielprofil > [data-karte] > div:not([data-felder], [data-liste]) div:has(> details) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
  margin: 0 0 var(--abstand-3);
}
#zielprofil > [data-karte] > div:not([data-felder], [data-liste]) div:has(> details) form { margin: 0; }
#zielprofil > [data-karte] > div:not([data-felder], [data-liste]) details[open] { flex-basis: 100%; }
#zielprofil > [data-karte] > div:not([data-felder], [data-liste]) details > form { margin-top: var(--abstand-2); }
[aria-label="Präferenz"] { margin-top: var(--abstand-4); padding-top: var(--innen-praeferenz); border-top: var(--linie) solid var(--farbe-linie); }
[aria-label="Präferenz"] > p > b { font-size: var(--schrift-beschriftung); }
[aria-label="Präferenz"] > p > [data-marke] { padding: var(--innen-marke-karte); font-size: var(--schrift-marke-karte); font-weight: 600; }
@media (max-width: 30rem) {
  [data-felder] { grid-template-columns: var(--spalten-felder-schmal); }
  [data-felder] > div:is(:nth-child(3n+1), :nth-child(3n+2)) { grid-column: 1 / -1; padding-bottom: 0; border-bottom: 0; }
  [data-felder] > div:nth-child(3n) { grid-column: 1 / -1; justify-content: flex-start; padding-top: var(--luecke-aktionen); padding-left: 0; }
}

/* Die vier Listen im Zielprofil (#587): je eine Karte wie „Zur Person“, darin `data-liste` —
   Kleinzeilen, die Tabelle ohne Rahmen und ohne Mindestbreite (auch unter 62rem), darunter
   „+ … hinzufügen“. Zellen oben bündig; die erste ohne Umbruch mit gleich breiten Ziffern. */
[data-liste] > p { max-width: none; margin: 0 0 var(--abstand-2); }
[data-liste] > ul { margin: 0 0 var(--abstand-2); }
[data-liste] small { display: block; color: var(--farbe-text-blass); font-size: var(--schrift-hinweis); }
[data-liste] table { display: table; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
[data-liste] :is(th, td) { min-width: 0; padding: var(--innen-listenzelle); font-size: var(--schrift-listenzelle); vertical-align: top; }
[data-liste] tbody td { background: var(--farbe-flaeche); }
[data-liste] thead :is(th, td) { background: var(--farbe-flaeche); color: var(--farbe-text-blass); font-size: var(--schrift-listenkopf); white-space: normal; }
[data-liste] td:first-child:not(:has(> b)) { width: var(--spalte-zeitraum); color: var(--farbe-text-mittel); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-liste] td:nth-child(2) { overflow-wrap: anywhere; }
[data-liste] td:last-child { text-align: right; }
[data-liste] td:last-child > details { display: inline-block; text-align: left; }
/* „Ändern“ aufgeklappt: die Tabelle mit der offenen Zeile wird ein Block, Kopf und Körper auch,
   jede Zeile eine Flex-Zeile über die volle Breite — Zeitraum und Inhalt nebeneinander, die
   Aktionen rechts; in der offenen Zeile die Aktionen mit dem Formular darunter über die volle
   Breite. Eine Flex-Zeile in einer Tabelle fiele in eine anonyme Zelle der ersten Spalte. */
[data-liste] table:has(details[open]) { display: block; }
[data-liste] table:has(details[open]) > :is(thead, tbody) { display: block; }
[data-liste] table:has(details[open]) tr { display: flex; flex-wrap: wrap; }
[data-liste] table:has(details[open]) :is(th, td):first-child { flex: none; width: auto; }
[data-liste] table:has(details[open]) :is(th, td):nth-child(2) { flex: 1 1 0; }
[data-liste] table:has(details[open]) :is(th, td):last-child { margin-left: auto; }
[data-liste] tr:has(> td > details[open]) > td:last-child { flex-basis: 100%; text-align: left; }
[data-liste] td:last-child > details[open] { display: block; }
[data-liste] details > form { display: grid; gap: var(--luecke-aktionen); margin: var(--luecke-aktionen) 0 0; }
[data-liste] details > form > h3 { margin: 0; }
[data-liste] details label { margin: 0; font-size: var(--schrift-beschriftung); }
[data-liste] > details { margin-top: var(--abstand-2); }
/* Zu bestätigen: alle Zellen der Zeile auf der orangen Fläche, die erste mit dem Balken, darunter
   „Bitte bestätigen: …“ — die Werte aus „Zur Person“ (#586). */
[data-liste] tr[data-bestaetigen] > td { background: var(--farbe-bestaetigen-flaeche); }
[data-liste] tr[data-bestaetigen] > td:first-child { box-shadow: inset var(--balken-fein) 0 0 var(--farbe-zahl-offen); }
[data-liste] tr[data-bestaetigen] small:not([data-vermerk]) { color: var(--farbe-text-leise); }
[data-liste] tr[data-bestaetigen] strong { display: block; margin-top: var(--abstand-grund); color: var(--farbe-freigabe); font-size: var(--schrift-hinweis); font-weight: 600; }
/* Der Vermerk: die graublaue Info-Marke unter dem Inhalt, davor der Kreis mit dem kursiven „i“. */
[data-liste] small[data-vermerk] {
  display: flex;
  align-items: flex-start;
  gap: var(--luecke-vermerk);
  width: fit-content;
  margin-top: var(--luecke-vermerk);
  padding: var(--innen-vermerk);
  border-radius: var(--radius-vermerk);
  background: var(--farbe-vermerk-flaeche);
  color: var(--farbe-vermerk-schrift);
  font-size: var(--schrift-hinweis);
}
[data-liste] small[data-vermerk]::before {
  content: "i";
  flex: none;
  width: var(--vermerk-kreis);
  height: var(--vermerk-kreis);
  border-radius: var(--radius-rund);
  background: var(--farbe-vermerk-kreis);
  color: var(--farbe-vermerk-schrift);
  font-size: var(--schrift-vermerk-kreis);
  font-style: italic;
  font-weight: 700;
  line-height: var(--vermerk-kreis);
  text-align: center;
}

/* Die Historie als Seitenleiste (`#historie`, #588): offen, wenn der Server sie mit der Angabe
   `historie` rendert. Rechts fest, davor der Schleier — ein Verweis auf die Seite ohne Leiste,
   der die ganze Seite deckt: Ein Klick daneben trifft ihn und nie ein Feld oder einen Verweis
   der Seite. Die Reiter des Filters teilen die drei Regeln der Reiter des Status (Abschnitt 7:
   Form, unter dem Zeiger, gewählt) — hier steht nur ihre Zeile. */
#historie { position: fixed; inset: 0; z-index: 3; }
#historie > a { position: absolute; inset: 0; background: var(--farbe-schleier); color: transparent; }
#historie > aside {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: var(--breite-seitenleiste);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-seitenleiste);
  overflow-y: auto;
}
#historie > aside > div {
  display: flex;
  align-items: center;
  gap: var(--luecke-seitenleiste-kopf);
  padding: var(--innen-seitenleiste-kopf);
  border-bottom: var(--linie) solid var(--farbe-linie);
}
#historie h2 {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--farbe-text);
  font-size: var(--schrift-seitenleiste-titel);
  letter-spacing: normal;
  text-transform: none;
}
#historie > aside > div > span { color: var(--farbe-text-blass); font-size: var(--schrift-unterlage); overflow-wrap: anywhere; }
#historie > aside > div > a { margin-left: auto; }
#historie nav { display: flex; flex-wrap: wrap; gap: var(--abstand-1); padding: var(--innen-seitenleiste-reiter); }
#historie ol { list-style: none; margin: 0; padding: var(--innen-zeitleiste); }
#historie li {
  display: grid;
  grid-template-columns: var(--zeitleiste-spalten);
  gap: var(--luecke-zeitleiste);
  padding: var(--innen-zeitzeile);
  font-size: var(--schrift-zeitleiste);
}
#historie time { color: var(--farbe-text-blass); font-variant-numeric: tabular-nums; text-align: right; }
#historie li > span {
  width: var(--punkt-zeitleiste);
  height: var(--punkt-zeitleiste);
  margin-top: var(--punkt-oben);
  border-radius: 50%;
  background: var(--farbe-linie);
  box-shadow: var(--punkt-ring);
}
#historie li[data-ereignis="verarbeitung"] > span { background: var(--farbe-akzent); }
#historie li[data-ereignis="freigabe"] > span { background: var(--farbe-lage-gut); }
#historie li[data-ereignis="blockieren"] > span { background: var(--farbe-fehler); }
#historie li > p { max-width: none; margin: 0; }
#historie li > p > span { color: var(--farbe-text-mittel); }
#historie > aside > p { max-width: none; margin: 0; padding: var(--innen-zeitleiste); color: var(--farbe-text-mittel); }
@media (max-width: 30rem) {
  #historie li { grid-template-columns: var(--zeitleiste-spalten-schmal); }
}

/* --- 8a · Verwaltung: Gerüst, Seitenmenü, Kachel, Schalter --------------------------
   Erkannt am Seitenmenü `nav[aria-label="Verwaltung"]` aus templates/core/_admin_frame.html
   (documents/adr/0172-verwaltung-geruest.md). */

main:has(> nav[aria-label="Verwaltung"]) {
  display: grid;
  grid-template-columns: var(--spalten-verwaltung);
  gap: 0 var(--abstand-5);
  align-items: start;
}
main:has(> nav[aria-label="Verwaltung"]) > h1,
main:has(> nav[aria-label="Verwaltung"]) > [data-kacheln] { grid-column: 1 / -1; }

/* Die Zeile der Kacheln: je Zustand ein Verweis mit Punkt, Wort und Kleinzeile. */
[data-kacheln] {
  display: grid;
  grid-template-columns: var(--spalten-kacheln);
  gap: var(--luecke-kachel);
  margin-bottom: var(--abstand-kacheln);
}
[data-kachel] {
  display: flex;
  gap: var(--luecke-kachel);
  align-items: flex-start;
  padding: var(--innen-kachel);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  text-decoration: none;
}
[data-kachel]::before {
  content: "";
  flex: none;
  width: var(--punkt-kachel);
  height: var(--punkt-kachel);
  margin-top: var(--versatz-punkt-kachel);
  border-radius: var(--radius-rund);
}
[data-kachel] b { display: block; font-size: var(--schrift-satz-verwaltung); font-weight: 700; }
[data-kachel] small { display: block; color: var(--farbe-text-blass); font-size: var(--schrift-fein); }
[data-kachel="fehler"] { border-color: var(--farbe-fehler-rand); background: var(--farbe-fehler-zart); }
[data-kachel="fehler"]:hover { background: var(--farbe-fehler-darueber); color: var(--farbe-text); }
/* Die Kleinzeile auf der roten Fläche in der mittleren Stufe: `--farbe-text-blass` hielte dort
   4,36 statt 4,5. */
[data-kachel="fehler"] small { color: var(--farbe-text-mittel); }
[data-kachel="fehler"]::before { background: var(--farbe-fehler); box-shadow: 0 0 0 var(--ring-kachel) var(--farbe-fehler-hell); }

/* Das Seitenmenü: klebt unter dem Kopf; der geltende Eintrag hellblau hinterlegt. */
main > nav[aria-label="Verwaltung"] { position: sticky; top: var(--verwaltung-oben); }
main > nav[aria-label="Verwaltung"] ul {
  display: flex;
  flex-direction: column;
  gap: var(--luecke-menue);
  margin: 0;
  padding: 0;
  list-style: none;
}
main > nav[aria-label="Verwaltung"] a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--innen-verwaltung-eintrag);
  border-radius: var(--radius-knopf);
  color: var(--farbe-text-mittel);
  font-size: var(--schrift-klein);
  font-weight: 600;
  text-decoration: none;
}
main > nav[aria-label="Verwaltung"] a:hover { background: var(--farbe-flaeche-zart); color: var(--farbe-text); }
main > nav[aria-label="Verwaltung"] a[aria-current="page"] { background: var(--farbe-akzent-hell); color: var(--farbe-akzent-dunkel); }
/* Die Zahl fehlgeschlagener Aufträge hinter „Aufträge“. */
main > nav[aria-label="Verwaltung"] a > span {
  padding: var(--innen-zahl-menue);
  border-radius: var(--radius-rund);
  background: var(--farbe-fehler);
  color: var(--farbe-flaeche);
  font-size: var(--schrift-marke);
}

/* Der Inhalt rechts, mit seinem Kopf: Überschrift in Textfarbe und eine leise Zeile darunter. */
main > nav[aria-label="Verwaltung"] + div { min-width: 0; }
main > nav[aria-label="Verwaltung"] + div > h2:first-child {
  margin: 0 0 var(--abstand-kopf-verwaltung);
  padding: 0;
  border: 0;
  color: var(--farbe-text);
  font-size: var(--schrift-h2-verwaltung);
  letter-spacing: normal;
  text-transform: none;
}
main > nav[aria-label="Verwaltung"] + div > h2:first-child:has(+ p) { margin-bottom: 0; }
main > nav[aria-label="Verwaltung"] + div > h2:first-child + p {
  margin: var(--abstand-1) 0 var(--abstand-kopf-verwaltung);
  color: var(--farbe-text-blass);
  font-size: var(--schrift-unterzeile);
}

/* Die Einstellung: Karte mit Text links und dem Schalter rechts oben. */
#selbstpruefung {
  position: relative;
  padding: var(--innen-einstellung);
  padding-right: calc(var(--innen-einstellung) * 2 + var(--schalter-breite));
}
#selbstpruefung h3 { margin: 0; font-size: var(--schrift-grund); }
#selbstpruefung p {
  max-width: var(--breite-einstellung);
  margin: var(--abstand-satz) 0 0;
  color: var(--farbe-text-mittel);
  font-size: var(--schrift-satz-verwaltung);
}
#selbstpruefung form { margin: 0; }
#selbstpruefung [role="switch"] { position: absolute; top: var(--innen-einstellung); right: var(--innen-einstellung); }

/* Der Schalter: rund, aus grau, an im dunklen Blau; der weiße Knopf rückt nach rechts. */
[role="switch"] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--schalter-breite);
  height: var(--schalter-hoehe);
  padding: var(--schalter-rand);
  border: 0;
  border-radius: var(--radius-rund);
  background: var(--farbe-schalter-aus);
  list-style: none;
  cursor: pointer;
}
[role="switch"]:hover { background: var(--farbe-schalter-aus); }
[role="switch"][aria-checked="true"],
[role="switch"][aria-checked="true"]:hover { justify-content: flex-end; background: var(--farbe-akzent-dunkel); }
[role="switch"] > span {
  width: var(--schalter-knopf);
  height: var(--schalter-knopf);
  border-radius: var(--radius-rund);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-schalter);
}

/* Die Rückfrage vor dem Ausschalten: aufgeklappt in der Karte, ein Satz und zwei Knöpfe. */
#selbstpruefung details > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  align-items: center;
  margin-top: var(--abstand-3);
}
#selbstpruefung details > div > p { flex: 1 1 auto; margin: 0; color: var(--farbe-text); }

/* Die Benutzerliste (#590): rechts neben Kopf und Unterzeile „+ Benutzer anlegen“, darunter
   die Tabelle in ihrer Karte `#benutzer` — sie rollt quer in der Karte, die Seite nie. Dieselbe
   Tabelle tragen die Aufträge (`#auftraege`) und das Protokoll (`#protokoll`, #592). */
main > nav[aria-label="Verwaltung"] + div:has(> #benutzer) {
  display: grid;
  grid-template-columns: var(--spalten-kopf-benutzer);
  column-gap: var(--abstand-5);
}
main > nav[aria-label="Verwaltung"] + div:has(> #benutzer) > a[href$="/benutzer/neu"] { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
main > nav[aria-label="Verwaltung"] + div:has(> #benutzer) > #benutzer { grid-column: 1 / -1; }
:is(#benutzer, #auftraege, #protokoll) { overflow-x: auto; }
:is(#benutzer, #auftraege, #protokoll) table {
  min-width: var(--verwaltung-mindest);
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
:is(#benutzer, #auftraege, #protokoll) thead th {
  padding: var(--innen-kopf-liste);
  background: var(--farbe-flaeche);
  color: var(--farbe-text-blass);
}
:is(#benutzer, #auftraege, #protokoll) td { padding: var(--innen-zelle-liste); font-size: var(--schrift-satz-verwaltung); vertical-align: middle; }
:is(#benutzer, #auftraege, #protokoll) tbody tr:hover > * { background: var(--farbe-flaeche); }
:is(#benutzer, #auftraege, #protokoll) td small { display: block; margin-top: var(--luecke-kleinzeile); color: var(--farbe-text-blass); font-size: var(--schrift-fein); }
/* Name: der Kreis mit den Initialen, daneben der Benutzername fett, am eigenen Konto „du“. */
#benutzer td:first-child > div { display: flex; align-items: center; gap: var(--luecke-konto); white-space: nowrap; }
#benutzer td:first-child > div > span[aria-hidden] {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--kreis);
  height: var(--kreis);
  border-radius: 50%;
  background: var(--farbe-akzent-hell);
  color: var(--farbe-akzent-dunkel);
  font-size: var(--schrift-fein);
  font-weight: 700;
}
#benutzer [data-marke="du"] { margin-left: 0; padding: var(--innen-marke-neu); background: var(--farbe-flaeche-zart); color: var(--farbe-text-mittel); }
/* Zweiter Faktor und Einladung als Pille — die Form der Pille des Status, in ihren Farben. */
#benutzer span:is([data-faktor], [data-einladung]),
#auftraege span[data-zustand] {
  display: inline-flex;
  align-items: center;
  padding: var(--innen-pille);
  border: var(--linie) solid;
  border-radius: var(--radius-rund);
  font-size: var(--schrift-pille);
  font-weight: 700;
  white-space: nowrap;
}
#benutzer span[data-faktor="aktiv"],
#auftraege span[data-zustand="abgeschlossen"] { background: var(--farbe-fertig-flaeche); color: var(--farbe-fertig-schrift); border-color: var(--farbe-fertig-rand); }
#benutzer span[data-faktor="fehlt"],
#auftraege span[data-zustand="eingereiht"] { background: var(--farbe-offen-flaeche); color: var(--farbe-offen-schrift); border-color: var(--farbe-offen-rand); }
#benutzer span[data-faktor="pflicht"],
#auftraege span[data-zustand="fehlgeschlagen"] { background: var(--farbe-fehler-flaeche); color: var(--farbe-fehler-schrift); border-color: var(--farbe-fehler-rand); }
#benutzer span[data-einladung],
#auftraege span[data-zustand="abgebrochen"] { background: var(--farbe-blockiert-flaeche); color: var(--farbe-blockiert-schrift); border-color: var(--farbe-blockiert-rand); }
#auftraege span[data-zustand="laeuft"] { background: var(--farbe-arbeit-flaeche); color: var(--farbe-arbeit-schrift); border-color: var(--farbe-arbeit-rand); }
#auftraege span[data-zustand="verworfen"] { background: var(--farbe-flaeche-zart); color: var(--farbe-text-mittel); border-color: var(--farbe-linie); }
/* Der Stift: ein Verweis ohne Text, das Zeichen als Bild aus Abschnitt 1; der Name steht in
   `aria-label`. */
#benutzer td:last-child { text-align: right; }
#benutzer td:last-child > a {
  display: inline-block;
  width: var(--stift);
  height: var(--stift);
  border: var(--linie) solid transparent;
  border-radius: var(--radius);
  background-image: var(--bild-stift);
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--stift-zeichen);
  vertical-align: middle;
}
#benutzer td:last-child > a:hover { border-color: var(--farbe-linie); background-color: var(--farbe-flaeche-zart); }

/* Die Aufträge (#592): die Karte „Zeitplan“ mit den Sätzen des Zeitplans, darunter die Reiter
   der Lage in `nav[aria-label="Zustand"]` — die Form der Reiter der Arbeitsliste, mit ihren
   Werten, erkannt an der Angabe `zustand` der Adresse —, der Kostenhinweis und die Tabelle in
   ihrer Karte `#auftraege`. */
#zeitplan { margin-bottom: var(--abstand-block-verwaltung); padding: var(--innen-zeitplan); }
#zeitplan h3 { margin: 0; font-size: var(--schrift-satz-verwaltung); font-weight: 700; }
#zeitplan p { margin: 0; color: var(--farbe-text-blass); font-size: var(--schrift-satz-fein); }
main nav[aria-label="Zustand"] { margin-bottom: var(--abstand-block-verwaltung); }
main nav[aria-label="Zustand"] ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
main nav[aria-label="Zustand"] a {
  display: block;
  padding: var(--innen-reiter);
  border: var(--linie) solid transparent;
  border-radius: var(--radius-rund);
  color: var(--farbe-text-mittel);
  font-size: var(--schrift-zelle);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
main nav[aria-label="Zustand"] a:hover { background: var(--farbe-flaeche-zart); color: var(--farbe-text); }
main nav[aria-label="Zustand"] a[aria-current="page"] { background: var(--farbe-akzent-dunkel); border-color: var(--farbe-akzent-dunkel); color: var(--farbe-flaeche); }
main nav[aria-label="Zustand"] a[href$="zustand=laeuft"] { background: var(--farbe-arbeit-flaeche); color: var(--farbe-arbeit-schrift); border-color: var(--farbe-arbeit-rand); }
main nav[aria-label="Zustand"] a[href$="zustand=eingereiht"] { background: var(--farbe-offen-flaeche); color: var(--farbe-offen-schrift); border-color: var(--farbe-offen-rand); }
main nav[aria-label="Zustand"] a[href$="zustand=fehlgeschlagen"] { background: var(--farbe-fehler-flaeche); color: var(--farbe-fehler-schrift); border-color: var(--farbe-fehler-rand); }
main nav[aria-label="Zustand"] a[href$="zustand=abgeschlossen"] { background: var(--farbe-fertig-flaeche); color: var(--farbe-fertig-schrift); border-color: var(--farbe-fertig-rand); }
main nav[aria-label="Zustand"] a[href$="zustand=abgebrochen"] { background: var(--farbe-blockiert-flaeche); color: var(--farbe-blockiert-schrift); border-color: var(--farbe-blockiert-rand); }
main nav[aria-label="Zustand"] a[href$="zustand=laeuft"][aria-current="page"] { background: var(--farbe-arbeit-schrift); border-color: var(--farbe-arbeit-schrift); color: var(--farbe-flaeche); }
main nav[aria-label="Zustand"] a[href$="zustand=eingereiht"][aria-current="page"] { background: var(--farbe-offen-schrift); border-color: var(--farbe-offen-schrift); color: var(--farbe-flaeche); }
main nav[aria-label="Zustand"] a[href$="zustand=fehlgeschlagen"][aria-current="page"] { background: var(--farbe-fehler-schrift); border-color: var(--farbe-fehler-schrift); color: var(--farbe-flaeche); }
main nav[aria-label="Zustand"] a[href$="zustand=abgeschlossen"][aria-current="page"] { background: var(--farbe-fertig-schrift); border-color: var(--farbe-fertig-schrift); color: var(--farbe-flaeche); }
main nav[aria-label="Zustand"] a[href$="zustand=abgebrochen"][aria-current="page"] { background: var(--farbe-blockiert-schrift); border-color: var(--farbe-blockiert-schrift); color: var(--farbe-flaeche); }
main nav[aria-label="Zustand"] a[href*="zustand="]:hover { filter: var(--reiter-darueber); }
main nav[aria-label="Zustand"] span[data-reiter-zahl] { font-variant-numeric: tabular-nums; font-weight: 500; opacity: var(--deckung-zahl); margin-left: var(--abstand-2); }
main nav[aria-label="Zustand"] li:first-child span[data-reiter-zahl] { opacity: 1; color: var(--farbe-text-blass); }
main nav[aria-label="Zustand"] li:first-child a[aria-current="page"] span[data-reiter-zahl] { color: var(--farbe-flaeche); opacity: var(--deckung-zahl-gewaehlt); }
main nav[aria-label="Zustand"] + p { margin: 0 0 var(--abstand-block-verwaltung); color: var(--farbe-text-blass); font-size: var(--schrift-unterzeile); }
/* Die Zeile eines Auftrags: die Nummer leise in tabellarischen Ziffern; in „Auftrag“ die Art
   fett, die Kleinzeile mit dem Profil und darunter der letzte Fehler in Fehlerrot; die Zahl der
   Versuche tabellarisch; die Zeit leise; „Erneut versuchen“ rechts. */
#auftraege tbody th {
  width: auto;
  padding: var(--innen-zelle-liste);
  color: var(--farbe-text-blass);
  font-size: var(--schrift-satz-verwaltung);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
#auftraege td span[data-grund] { display: block; margin-top: var(--luecke-grund); color: var(--farbe-fehler); font-size: var(--schrift-satz-fein); }
#auftraege td:nth-child(4) { font-variant-numeric: tabular-nums; }
#auftraege td:nth-child(5),
#protokoll td:first-child { color: var(--farbe-text-blass); white-space: nowrap; }
#auftraege td:last-child { text-align: right; white-space: nowrap; }
/* „Verwerfen“ (#678): die Rückfrage aufgeklappt unter dem Knopf — der Satz leise, daneben der
   Knopf, der verwirft. */
#auftraege td:last-child details { margin-top: var(--luecke-aktionen); }
#auftraege td:last-child details > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--luecke-aktionen);
  margin-top: var(--luecke-aktionen);
  white-space: normal;
}
#auftraege td:last-child details p { margin: 0; color: var(--farbe-text-mittel); font-size: var(--schrift-satz-fein); }
#auftraege td:last-child details form { margin: 0; }
/* Die IP-Adresse des Protokolls in fester Schrift. */
#protokoll td:last-child { color: var(--farbe-text-mittel); font-family: var(--schrift-fest); font-size: var(--schrift-fein); }
/* Eine fehlgeschlagene Zeile — ein Auftrag `fehlgeschlagen`, ein fehlgeschlagener
   Anmeldeversuch — steht auf der zart roten Fläche, auch unter dem Zeiger; was sonst leise
   steht, steht dort in der mittleren Stufe: `--farbe-text-blass` hielte auf `#fffafa` nur 4,48. */
:is(#auftraege, #protokoll) tbody tr[data-hervorgehoben] > * { background: var(--farbe-zeile-hervorgehoben); }
#auftraege tr[data-hervorgehoben] > :is(th, td:nth-child(5)),
#protokoll tr[data-hervorgehoben] > td:first-child,
:is(#auftraege, #protokoll) tr[data-hervorgehoben] td small { color: var(--farbe-text-mittel); }

/* Die Werkzeugleiste des Protokolls (#592): die vier Filter in einer Zeile, je Beschriftung und
   Feld in einem Rahmen — die Beschriftung leise, der Wert fett —, dahinter „Anwenden“; die Form
   der Auswahlen der Arbeitsliste, mit ihren Werten. */
form[action="/verwaltung/protokoll"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--luecke-werkzeug);
  margin: 0 0 var(--abstand-block-verwaltung);
}
form[action="/verwaltung/protokoll"] > div {
  display: flex;
  align-items: center;
  height: var(--feld-hoehe);
  margin: 0;
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-knopf);
  background: var(--farbe-flaeche);
}
form[action="/verwaltung/protokoll"] label {
  margin: 0;
  padding: var(--innen-auswahl);
  color: var(--farbe-text-blass);
  font-size: var(--schrift-zelle);
  font-weight: 400;
}
form[action="/verwaltung/protokoll"] :is(select, input) {
  width: auto;
  max-width: none;
  height: 100%;
  padding: var(--innen-auswahl);
  border: 0;
  border-radius: 0 var(--radius-knopf) var(--radius-knopf) 0;
  background: transparent;
  font-size: var(--schrift-zelle);
  font-weight: 600;
}

/* Die Seitenleiste „Benutzer bearbeiten“ (`#bearbeiten`): dieselbe Form wie die Historie der
   Prüfansicht (Abschnitt 8, #588) — rechts fest, davor der Schleier als Verweis auf die Liste —
   und dieselben Werte. Darin drei Abschnitte: `#angaben` (das Formular der Rolle), `#anmeldung`
   und, nur an einem fremden Konto, `#gefahrenbereich`. */
#bearbeiten { position: fixed; inset: 0; z-index: 3; }
#bearbeiten > a { position: absolute; inset: 0; background: var(--farbe-schleier); color: transparent; }
#bearbeiten > aside {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: var(--breite-seitenleiste);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-seitenleiste);
  overflow-y: auto;
}
#bearbeiten > aside > div:first-child {
  display: flex;
  align-items: center;
  gap: var(--luecke-seitenleiste-kopf);
  padding: var(--innen-seitenleiste-kopf);
  border-bottom: var(--linie) solid var(--farbe-linie);
}
#bearbeiten h2 {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--farbe-text);
  font-size: var(--schrift-seitenleiste-titel);
  letter-spacing: normal;
  text-transform: none;
}
#bearbeiten > aside > div:first-child > span { color: var(--farbe-text-blass); font-size: var(--schrift-unterlage); overflow-wrap: anywhere; }
#bearbeiten > aside > div:first-child > a { margin-left: auto; }
#angaben,
#anmeldung,
#gefahrenbereich {
  display: grid;
  gap: var(--luecke-seitenleiste-abschnitt);
  margin: 0;
  padding: var(--innen-seitenleiste-abschnitt);
  border-bottom: var(--linie) solid var(--farbe-linie);
}
#bearbeiten h3 {
  margin: 0 0 var(--abstand-1);
  color: var(--farbe-text-blass);
  font-size: var(--schrift-unterzeile);
  letter-spacing: var(--sperrung-abschnitt);
  text-transform: uppercase;
}
/* Die Hilfen unter einem Feld, unter einem Knopf und im Gefahrenbereich: klein und leise. */
#bearbeiten aside p { max-width: none; margin: 0; color: var(--farbe-text-blass); font-size: var(--schrift-fein); }
#angaben label { margin: var(--luecke-seitenleiste-abschnitt) 0 0; color: var(--farbe-text-mittel); font-size: var(--schrift-unterlage); font-weight: 600; }
#angaben :is(input, select) { max-width: none; height: var(--feld-hoehe-leiste); padding: var(--innen-feld-leiste); }
#angaben :is(input, select):disabled { border-color: var(--farbe-linie); background: var(--farbe-flaeche-zart); color: var(--farbe-text-blass); }
#angaben > div { display: flex; justify-content: flex-end; gap: var(--abstand-2); margin: var(--luecke-seitenleiste-kopf) 0 0; }
/* Das Profilbild: links der Kreis von 64px mit Bild oder Initialen, rechts die Wahl der Datei
   und, mit Bild, „Entfernen“. */
#angaben > #profilbild { justify-content: flex-start; align-items: center; gap: var(--luecke-profilbild); margin: 0; }
#profilbild > :is(img, span[aria-hidden]) {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--kreis-profilbild);
  height: var(--kreis-profilbild);
  border-radius: 50%;
  background: var(--farbe-akzent-hell);
  color: var(--farbe-akzent-dunkel);
  font-size: var(--schrift-unterlage);
  font-weight: 700;
  object-fit: cover;
}
#profilbild > div { display: grid; gap: var(--luecke-seitenleiste-abschnitt); }
#profilbild label { margin: 0; }
#angaben #profilbild input[type="file"] { height: auto; padding: 0; border: 0; }
#angaben #profilbild input[type="checkbox"] { height: auto; margin: 0 var(--abstand-1) 0 0; }
/* „Zuletzt angemeldet“ und „Zweiter Faktor“: links das Wort leise, rechts der Wert fett. */
#anmeldung > p:has(> b) {
  display: flex;
  justify-content: space-between;
  gap: var(--luecke-seitenleiste-kopf);
  padding: var(--abstand-1) 0;
  color: var(--farbe-text);
  font-size: var(--schrift-unterzeile);
}
#anmeldung > p > span { color: var(--farbe-text-blass); }
/* Die Rückfrage, aufgeklappt: der Satz, „Abbrechen“ und der Knopf, der handelt. */
#bearbeiten details > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  align-items: center;
  padding: var(--abstand-1) 0;
}
#bearbeiten details > div > p { flex: 1 1 var(--breite-rueckfrage); color: var(--farbe-text); font-size: var(--schrift-satz-verwaltung); }
#bearbeiten details form { margin: 0; }
#gefahrenbereich { background: var(--farbe-gefahrenbereich); }
#gefahrenbereich h3 { color: var(--farbe-fehler); }
/* Die Hilfe auf der roten Fläche in der mittleren Stufe: `--farbe-text-blass` hielte dort 4,48. */
#bearbeiten #gefahrenbereich > p { color: var(--farbe-text-mittel); }

@media (max-width: 40rem) {
  main > nav[aria-label="Verwaltung"] { position: static; margin-bottom: var(--abstand-4); overflow-x: auto; }
  main > nav[aria-label="Verwaltung"] ul { flex-direction: row; }
  main > nav[aria-label="Verwaltung"] a { flex: none; }
}

/* --- 9 · Druck -------------------------------------------------------------------- */

@media print {
  body { background: none; }
  form, main > nav, body > header nav, body > header > details { display: none; }
  section, table { box-shadow: none; }
}