/* ==========================================================================
   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: Schrift, Logo und Band liefert
   `proxy` unter /static/vorlage/ aus profiles/pdf_assets/ aus.

   Die Grundkomponenten — Knopf, Eingabefeld, Tabelle, Hinweisleiste,
   Zustandsabzeichen — 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: Carlito, unverändert ausgeliefert (SIL OFL 1.1, Lizenztext: ../vorlage/OFL.txt) --- */

@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, band.png, logo.png) */
  --farbe-akzent: #0092c9;          /* Band und Überschriften der Vorlage — 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-linie-akzent: #4f81bd;    /* Linie unter den Überschriften der Vorlage */

  /* Grauwerte */
  --farbe-text: #1c1c1c;
  --farbe-text-leise: #5b6670;
  --farbe-grund: #f4f6f8;           /* Seite */
  --farbe-flaeche: #ffffff;         /* Karten, Tabellen, Felder */
  --farbe-flaeche-leise: #f8fafb;   /* Tabellenkopf */
  --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 */
  --farbe-gut: #1f6b3a;             /* Punkt am Status „Fertig“ (Kontrast 6,52 auf Weiß) */
  --farbe-neutral: #7b8794;         /* Ring am Status „Offen“ (Kontrast 3,66 auf Weiß) */

  /* Schrift */
  --schrift: "Carlito", "Calibri", "Segoe UI", system-ui, sans-serif;
  --schrift-fest: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  --schrift-kennung: 0.8125rem;     /* Ordner-Kennung in der Arbeitsliste */
  --schrift-klein: 0.875rem;
  --schrift-grund: 1.0625rem;       /* Carlito läuft klein; 17px liest sich wie 16px einer Systemschrift */
  --schrift-h3: 1.0625rem;
  --schrift-h2: 1.25rem;            /* nicht unter 1.17rem: darunter verlangt das Akzentblau mehr Kontrast */
  --schrift-h1: 1.875rem;
  --zeile: 1.5;
  --zeile-ueberschrift: 1.2;
  --zeile-knopf: 1.25;
  --sperrung-tabellenkopf: 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.5rem 1rem;
  --innen-knopf-leise: 0.3125rem 0.75rem;
  --innen-feld: 0.5rem 0.75rem;
  --innen-zelle-hoch: 0.625rem;
  --innen-marke: 0 0.5rem;
  --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-rund: 999px;
  --schatten: 0 1px 2px var(--farbe-schatten);
  --fokus: 0 0 0 3px var(--farbe-flaeche), 0 0 0 6px var(--farbe-akzent-dunkel);
  --fokus-umriss: 2px;              /* durchsichtig; bei erzwungenen Farben ist er der sichtbare Ring */
  --punkt: 0.625rem;                /* der Punkt vor dem Wort des Status */
  --strich-aktuell: 3px;            /* 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-daneben: 28rem;           /* Platz, den die Suche der Statusauswahl lässt */
  --suche-mindest: 12rem;
  --qr-breite: 15rem;               /* der QR-Code der Einrichtung, samt Ruhezone */

  /* Kopf der Seite: Band und Logo der Vorlage */
  --kopf-hoehe: 4.75rem;
  --logo-hoehe: 4.5rem;             /* das Logo trägt oben und unten eigenen Weißraum */
  --logo-breite: 7.53rem;           /* Seitenverhältnis des Logos: 823 zu 492 */
  --logo-einzug: 0.375rem;          /* um so viel ragt das Logo oben und unten aus seiner Zeile */
  --band-hoehe: 0.875rem;
  --band-ueberstand: 1rem;          /* das Band läuft links und rechts über den Rand hinaus */
  --bild-logo: url("../vorlage/logo.png");
  --bild-band: url("../vorlage/band.png");
}

@media (max-width: 40rem) {
  :root {
    --rand: 1rem;
    --schrift-h1: 1.5rem;
    --kopf-hoehe: 4rem;
    --logo-hoehe: 3.75rem;
    --logo-breite: 6.27rem;
  }
}

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

/* 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 aus Schatten; der durchsichtige Umriss bleibt sichtbar, wo das
   System Farben erzwingt und Schatten weglässt. */
:focus-visible {
  outline: var(--fokus-umriss) solid transparent;
  box-shadow: var(--fokus);
  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: das Band der Vorlage, darunter Logo, Bereiche und Konto — in der Folge der Vorlage. */
body > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2) var(--abstand-6);
  min-height: calc(var(--kopf-hoehe) + var(--band-hoehe));
  padding: calc(var(--band-hoehe) + var(--abstand-2)) max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))) var(--abstand-2);
  background: var(--bild-band) top center / calc(100% + var(--band-ueberstand)) var(--band-hoehe) no-repeat, var(--farbe-flaeche);
  border-bottom: var(--linie) solid var(--farbe-linie);
}
/* Das Logo: Die Vorlage trägt den Namen als Text, das Bild kommt von hier. Der Text läuft
   aus dem Bild und bleibt der zugängliche Name des Verweises. */
body > header > a:first-child {
  flex: 0 0 auto;
  display: block;
  width: var(--logo-breite);
  height: var(--logo-hoehe);
  margin-block: calc(var(--logo-einzug) * -1);
  border-radius: var(--radius-klein);
  background: var(--bild-logo) left center / contain no-repeat;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
body > header ul { display: flex; flex-wrap: wrap; gap: var(--abstand-1); list-style: none; margin: 0; padding: 0; }
body > header nav a {
  display: block;
  padding: var(--abstand-2) var(--abstand-3);
  border-radius: var(--radius-klein);
  color: var(--farbe-text);
  font-weight: 700;
  text-decoration: none;
}
body > header nav a:hover { background: var(--farbe-akzent-hell); }
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); border-radius: 0; }
body > header nav a[aria-current="page"]:focus-visible { box-shadow: var(--fokus); border-radius: var(--radius-klein); }
/* Das Konto: rechts im Kopf. */
body > header > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2) var(--abstand-4);
  margin-left: auto;
  font-size: var(--schrift-klein);
}
body > header > div p { margin: 0; color: var(--farbe-text-leise); }

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

button,
a[href$="/benutzer/neu"],
a[rel="prev"],
a[rel="next"] {
  display: inline-block;
  padding: var(--innen-knopf);
  border: var(--linie) solid var(--farbe-akzent-dunkel);
  border-radius: var(--radius-klein);
  background: var(--farbe-akzent-dunkel);
  color: var(--farbe-flaeche);
  font: inherit;
  font-weight: 700;
  line-height: var(--zeile-knopf);
  text-decoration: none;
  cursor: pointer;
}
button:hover,
a[href$="/benutzer/neu"]:hover { background: var(--farbe-text); border-color: var(--farbe-text); color: var(--farbe-flaeche); }

/* Der leise Knopf: in Tabellenzeilen, zum Blättern, zum Abmelden, zum Übernehmen und Leeren,
   zum Aufheben einer Blockierung. */
td button,
a[rel="prev"],
a[rel="next"],
form[action="/abmelden"] button,
form[action$="/einleitungstext"]:not(:has(textarea)) button,
form[action$="/wunsch"]:not(:has(textarea)) button,
form[action$="/blockierung-aufheben"] button {
  padding: var(--innen-knopf-leise);
  background: var(--farbe-flaeche);
  color: var(--farbe-akzent-dunkel);
  font-size: var(--schrift-klein);
}
td button:hover,
a[rel="prev"]:hover,
a[rel="next"]:hover,
form[action="/abmelden"] button:hover,
form[action$="/einleitungstext"]:not(:has(textarea)) button:hover,
form[action$="/wunsch"]:not(:has(textarea)) button: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); }
a[href$="/loeschen"] { color: var(--farbe-fehler); }

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

/* 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 Markierung „AlpJobs“ an einem Profil. */
[data-marke] {
  display: inline-block;
  padding: var(--innen-marke);
  border: var(--linie) solid var(--farbe-akzent-dunkel);
  border-radius: var(--radius-rund);
  background: var(--farbe-akzent-hell);
  color: var(--farbe-akzent-dunkel);
  font-size: var(--schrift-klein);
  font-weight: 700;
}

/* Der Status eines Profils: ein Punkt vor dem Wort — je Wort eine Regel, zwei auch in der
   Form verschieden. Das Wort bleibt, die Farbe steht nie allein. */
[data-status]::before {
  content: "";
  display: inline-block;
  width: var(--punkt);
  height: var(--punkt);
  margin-right: var(--abstand-2);
  border-radius: 50%;
  background: var(--farbe-neutral);
}
[data-status="Offen"]::before { background: var(--farbe-flaeche); box-shadow: inset 0 0 0 var(--linie-betont) var(--farbe-neutral); }
[data-status="In Bearbeitung"]::before { background: var(--farbe-akzent); }
[data-status="Blockiert"]::before { background: var(--farbe-fehler); border-radius: var(--linie-betont); }
[data-status="Fertig"]::before { background: var(--farbe-gut); }
td[data-status] { white-space: nowrap; }

/* 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-klein);
  font-weight: 700;
  letter-spacing: var(--sperrung-tabellenkopf);
  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) ------------------------------ */

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

/* Suche links, die Auswahl daneben. */
main > form:has(> input[type="search"]) {
  flex: 1 1 calc(100% - var(--suche-daneben));
  min-width: calc(100% - var(--suche-daneben));   /* beginnt immer eine eigene Zeile */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-1) var(--abstand-2);
}
main > form:has(> input[type="search"]) label { flex: 0 0 100%; margin: 0; font-size: var(--schrift-klein); color: var(--farbe-text-leise); }
main > form:has(> input[type="search"]) input { flex: 1 1 var(--suche-mindest); width: auto; max-width: none; }

@media (max-width: 62rem) {
  main > form:has(> input[type="search"]) { min-width: 100%; }
}

/* Die Gruppen der Auswahl — „Status“ und „Markierung“ —, je mit ihrem Wort davor. */
main:has(> nav[aria-label="Status"]) > nav[aria-label] {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-1) var(--abstand-2);
}
main > nav[aria-label="Status"]::before,
main > nav[aria-label="Status"] + nav[aria-label]::before {
  content: attr(aria-label);
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
  font-weight: 700;
}
main > nav[aria-label="Status"] ul,
main > nav[aria-label="Status"] + nav[aria-label] ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1);
  list-style: none;
  margin: 0;
  padding: var(--abstand-1);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}
main > nav[aria-label="Status"] a,
main > nav[aria-label="Status"] + nav[aria-label] a {
  display: block;
  padding: var(--innen-knopf-leise);
  border-radius: var(--radius-klein);
  color: var(--farbe-text);
  text-decoration: none;
  white-space: nowrap;
}
main > nav[aria-label="Status"] a:hover,
main > nav[aria-label="Status"] + nav[aria-label] a:hover { background: var(--farbe-akzent-hell); }
main > nav[aria-label="Status"] a[aria-current="page"],
main > nav[aria-label="Status"] + nav[aria-label] a[aria-current="page"] { background: var(--farbe-akzent-dunkel); color: var(--farbe-flaeche); font-weight: 700; }

/* Der Kostenhinweis steht unmittelbar vor der Tabelle. */
main:has(> nav[aria-label="Status"]) > p:has(+ table) {
  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);
}
/* Zahl der Profile und Treffer. */
main:has(> nav[aria-label="Status"]) > nav ~ p:not(:has(+ table)):not([role]) { color: var(--farbe-text-leise); }

main:has(> nav[aria-label="Status"]) td:first-child { white-space: nowrap; }
main:has(> nav[aria-label="Status"]) td:first-child a { font-weight: 700; }
main:has(> nav[aria-label="Status"]) td:nth-child(2) { font-family: var(--schrift-fest); font-size: var(--schrift-kennung); color: var(--farbe-text-leise); white-space: nowrap; }
main:has(> nav[aria-label="Status"]) td { vertical-align: middle; }
main:has(> nav[aria-label="Status"]) td:has(> form) { white-space: nowrap; }
main:has(> nav[aria-label="Status"]) td > form { float: right; margin-left: var(--abstand-4); }

/* Blättern: „Seite x von y“ links, Zurück und Weiter rechts. */
main:has(> nav[aria-label="Status"]) > table ~ p { flex: 0 0 auto; align-self: center; }
main:has(> nav[aria-label="Status"]) > table + p { flex: 1 1 auto; color: var(--farbe-text-leise); }
a[rel="prev"]::before { content: "‹ "; }
a[rel="next"]::after { content: " ›"; }

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

main:has(> section) > p:first-child a::before { content: "‹ "; }
main:has(> section) > p:first-child a { font-weight: 700; text-decoration: none; }

/* Der Block der Verarbeitung: alles zwischen dem Verweis zur Liste und dem Profil — eine Karte. */
main:has(> section) > p:first-child ~ :not(section) {
  max-width: none;
  margin: 0;
  padding: var(--abstand-1) var(--abstand-5) var(--abstand-2);
  border: solid var(--farbe-linie);
  border-width: 0 var(--linie) 0 0;
  border-left: var(--balken) solid var(--farbe-akzent);
  background: var(--farbe-flaeche);
}
main:has(> section) > p:first-child + p { padding-top: var(--abstand-4); border-top-width: var(--linie); border-radius: var(--radius) var(--radius) 0 0; font-weight: 700; }
main:has(> section) > p:first-child ~ p:not(:first-child + p) { color: var(--farbe-text-leise); font-size: var(--schrift-klein); }
main:has(> section) > p:first-child ~ :not(section):has(+ section) { margin-bottom: var(--abstand-5); padding-bottom: var(--abstand-4); border-bottom-width: var(--linie); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--schatten); }
main:has(> section) > p:first-child + p:has(+ section) { border-radius: var(--radius); }

/* Der Kopf des Profils: Name, darunter Status, Ordner-Kennung und Markierung in einer Zeile. */
#zielprofil > h1 { margin-bottom: var(--abstand-2); }
#zielprofil > h1 + p,
#zielprofil > h1 + p + p,
#zielprofil > p:has(> [data-marke]) { display: inline-block; margin: 0 var(--abstand-5) var(--abstand-2) 0; color: var(--farbe-text-leise); }
#zielprofil > h1 + p { color: var(--farbe-text); font-weight: 700; }
/* Blockierungsgrund und Fehlergrund: was vor der ersten Zwischenüberschrift noch steht. */
#zielprofil > h1 + p + p ~ p:not(h2 ~ p):not(:has(> [data-marke])),
#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(h1 + p + p, p:has(> [data-marke])) + p:not(h2 ~ p):not(:has(> [data-marke])) { 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 h3 { color: var(--farbe-text-leise); font-size: var(--schrift-klein); letter-spacing: var(--sperrung-h3); text-transform: uppercase; }
/* Der Vorschlag der KI: die letzte Spalte von „Zur Person“. */
#zielprofil table:has(tbody th) td:last-child { color: var(--farbe-akzent-dunkel); }
/* Der Zeitraum einer Station bricht nicht um. */
#zielprofil table:has(th:nth-child(8)) td:nth-child(2) { white-space: nowrap; }

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

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

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