/* PM PDF Split · Design-System
 *
 * Die Werte stammen aus der Entwicklungsspezifikation, Kapitel
 * „Design-System — Werte". Sie stehen hier einmal als Marken und sonst
 * nirgends. Wer eine Farbe hart in eine Regel schreibt, hat sie verdoppelt.
 *
 * VERBINDLICH
 *  · Bernstein ist #8A5C00 auf #FDF1D8 und wird NICHT durch ein gewoehnliches
 *    Gelb ersetzt — das erfuellt den Kontrast nicht.
 *  · Farbe ist NIE der einzige Traeger einer Information. Jede farbige
 *    Markierung traegt zusaetzlich ein Kuerzel oder einen Text.
 *  · Trefferflaeche mindestens 24 x 24, auf dem Tablet 44 x 44.
 *  · Keine Webfonts. System-Font-Stack, wie im Hausstandard.
 *
 * Dunkelmodus ist kein Ziel der Fassung 1; die Werte liegen als Marken vor.
 */

:root {
  /* -- Marke */
  --navy:        #102450;
  --navy-dunkel: #0B1B3D;
  --orange:      #F0A72A;
  --orange-ab:   #DB9520;
  --auf-orange:  #1A1A1A;

  /* -- Flaechen */
  --grund:       #F4F6FA;
  --karte:       #FFFFFF;
  --rahmen:      #E1E6F0;
  --flaeche:     #5B6B85;   /* Arbeitsflaeche der Seitenvorschau */
  --blatt:       #FFFFFF;

  /* -- Zustandsfarben. Je Paar: Schrift auf Flaeche. */
  --erfolg:        #1F7A45;
  --erfolg-grund:  #E8F5EE;
  --bernstein:     #8A5C00;
  --bernstein-grund: #FDF1D8;
  --fehler:        #A3202A;
  --fehler-grund:  #FBE9EA;
  --hinweis:       #2F6FDB;
  --hinweis-grund: #E7EEFB;
  --grau:          #5B6B85;
  --grau-grund:    #EEF1F6;

  /* -- Die acht Bereichsfarben. Gelten AUCH fuer die Herkunftskennzeichen
   *    Q1…Q8 beim Zusammenfuehren. Weder Orange noch eine der vier
   *    Statusfarben kommt darin vor, damit „rot = Fehler" seine Bedeutung
   *    behaelt. */
  --b1: #1C6E8C;
  --b2: #8E4A9E;
  --b3: #0F7B6C;
  --b4: #B4531B;
  --b5: #3A57B0;
  --b6: #7A6A1F;
  --b7: #A32E6E;
  --b8: #4A5A2B;

  /* -- Radien */
  --r-karte:  10px;
  --r-feld:    7px;
  --r-taste:   9px;
  --r-fenster: 11px;

  /* -- Abstaende */
  --a1:  4px;
  --a2:  8px;
  --a3: 12px;
  --a4: 16px;
  --a5: 24px;
  --a6: 32px;

  /* -- Trefferflaeche */
  --treffer:        24px;
  --treffer-tablet: 44px;

  --schrift: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* `hidden` GILT. Jede Klasse mit eigenem `display` (etwa `.pm-menue` mit
 * `display: flex`) hebt das Attribut sonst auf — das Benutzermenue stand
 * dadurch bei jedem Seitenaufruf offen ueber dem Inhalt. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--grund);
  color: var(--navy);
  font-family: var(--schrift);
  font-size: 14px;
  line-height: 1.5;
}

/* Der Fokus ist IMMER sichtbar. Ein `outline: none` ohne Ersatz macht die
 * Oberflaeche fuer Tastaturbedienung unbrauchbar — das ist kein
 * Gestaltungsdetail, sondern ein Ausschlusskriterium. */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Sprungmarke: der erste fokussierbare Punkt jeder Seite. Ohne sie beginnt
 * jeder Tastaturdurchlauf mit der Kopfzeile, auf jedem Bildschirm neu. */
.pm-sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: var(--a2) var(--a4);
  z-index: 100;
}
.pm-sprung:focus {
  left: var(--a3);
  top: var(--a3);
}

/* Nur fuer Bildschirmleser. */
.pm-nur-leser {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ====================================================================
 *  Kopfzeile — auf allen Bildschirmen ausser S0 und T1 dieselbe
 * ==================================================================== */

.pm-kopf {
  background: var(--navy);
  display: flex;
  align-items: center;
  gap: var(--a3);
  padding: 11px var(--a4);
}

.pm-logo {
  width: 28px; height: 28px;
  border-radius: var(--r-feld);
  background: var(--orange);
  color: var(--auf-orange);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  flex: none;
}

.pm-marke { font-size: 15px; font-weight: 800; color: #fff; }

.pm-nav { display: flex; gap: var(--a1); margin-left: var(--a4); }

.pm-nav a {
  color: #C3CFE6;
  font-size: 12.5px;
  padding: 6px 11px;
  border-radius: var(--r-feld);
  font-weight: 600;
  text-decoration: none;
  min-height: var(--treffer);
  display: inline-flex;
  align-items: center;
}
.pm-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.pm-nav a[aria-current="page"] { background: rgba(255,255,255,.12); color: #fff; }

.pm-dehnen { flex: 1; }

/* Der Verarbeitungsort. FESTE STELLE, NICHT ABSCHALTBAR.
 *
 * In Fassung 1 steht hier „auf dem Server verarbeitet" — der Kern laeuft auf
 * dem Server. Eine Anzeige, die „lokal" sagt, waehrend die Datei zum Server
 * geht, waere die schlimmste Einzelentscheidung dieses Projekts.
 * Siehe docs/ENTSCHEIDUNG-01-TECHNOLOGIE.md, Abschnitt V1. */
.pm-ort {
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  padding: 4px 10px;
  white-space: nowrap;
  min-height: var(--treffer);
  display: inline-flex;
  align-items: center;
}
.pm-ort[data-ort="lokal"]  { color: #BFE3CD; }
.pm-ort[data-ort="dienst"] { color: #C7D9F7; }

.pm-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--auf-orange);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px;
  border: 0; cursor: pointer;
}

/* ====================================================================
 *  Flaechen
 * ==================================================================== */

.pm-haupt {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--a5) var(--a4);
}

.pm-karte {
  background: var(--karte);
  border: 1px solid var(--rahmen);
  border-radius: var(--r-karte);
  padding: var(--a4);
}

.pm-karte + .pm-karte { margin-top: var(--a4); }

.pm-ueberschrift {
  font-size: 10px;
  letter-spacing: .5px;
  color: var(--grau);
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 11px;
}

/* ====================================================================
 *  Schaltflaechen
 *
 *  Zustaende sind Pflicht: Ruhe, Ueberfahren, Fokus, Gedrueckt, Laeuft,
 *  Gesperrt, Fehlgeschlagen. Ein gesperrtes Element ohne genannten Grund
 *  gilt als Fehler — deshalb traegt jede gesperrte Schaltflaeche einen
 *  Titel, und die Oberflaeche schreibt den Grund daneben.
 * ==================================================================== */

.pm-taste {
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  border-radius: var(--r-taste);
  border: 1px solid var(--rahmen);
  background: var(--karte);
  color: var(--navy);
  padding: 8px 14px;
  min-height: var(--treffer);
  min-width: var(--treffer);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a2);
}
.pm-taste:hover:not([disabled]) { background: var(--grund); }
.pm-taste:active:not([disabled]) { transform: translateY(1px); }

.pm-taste--primaer {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--auf-orange);
}
.pm-taste--primaer:hover:not([disabled]) { background: var(--orange-ab); border-color: var(--orange-ab); }

.pm-taste[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.pm-taste[data-laeuft="ja"] { cursor: progress; }
.pm-taste[data-laeuft="ja"]::before {
  content: "";
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pm-dreht .8s linear infinite;
}
@keyframes pm-dreht { to { transform: rotate(360deg); } }

/* Wer Bewegung reduziert haben will, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  .pm-taste[data-laeuft="ja"]::before { animation: none; }
  * { transition: none !important; }
}

/* ====================================================================
 *  Felder
 * ==================================================================== */

.pm-feld {
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--rahmen);
  border-radius: var(--r-feld);
  padding: 8px 10px;
  min-height: var(--treffer);
  background: var(--karte);
  color: var(--navy);
  width: 100%;
}
.pm-feld[aria-invalid="true"] { border-color: var(--fehler); }

.pm-feld-gruppe { display: flex; flex-direction: column; gap: var(--a1); }
.pm-feld-gruppe > label { font-size: 12px; font-weight: 600; }

/* Fehler stehen im KLARTEXT an der Stelle, an der sie entstehen —
 * nicht als Farbrand. Ein roter Rahmen sagt nicht, was falsch ist. */
.pm-feldfehler {
  color: var(--fehler);
  font-size: 12px;
  margin-top: var(--a1);
}

/* ====================================================================
 *  Zustandsmarken
 *
 *  Jede traegt Text. Farbe ist nie der einzige Traeger.
 * ==================================================================== */

.pm-marke-zustand {
  display: inline-flex;
  align-items: center;
  gap: var(--a1);
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.pm-marke-zustand[data-stufe="gruen"]     { color: var(--erfolg);     background: var(--erfolg-grund); }
.pm-marke-zustand[data-stufe="bernstein"] { color: var(--bernstein);  background: var(--bernstein-grund); }
.pm-marke-zustand[data-stufe="rot"]       { color: var(--fehler);     background: var(--fehler-grund); }
.pm-marke-zustand[data-stufe="hinweis"]   { color: var(--hinweis);    background: var(--hinweis-grund); }
.pm-marke-zustand[data-stufe="grau"]      { color: var(--grau);       background: var(--grau-grund); }

/* Was die Ampel einer Ausgabe rot oder gelb macht — unter der Marke. */
.pm-ampelgrund {
  display: block;
  font-size: 12px;
  color: var(--grau);
  margin-top: 4px;
  white-space: normal;
}
.pm-ampelgrund span[title] { text-decoration: underline dotted; cursor: help; }

/* ---------------------------------------------------------------- Wahlschaltfläche

   Schaltfläche mit aufklappbarer Werteliste. Für S2-BTN-ZOOM, S5-BTN-EBENE
   und S11-BTN-FILTER — die die Vorlage als Schaltfläche führt, nicht als
   Auswahlliste, weil sie die Ansicht sofort ändern und nichts abschicken.

   Die Liste liegt ÜBER dem Inhalt, nicht daneben: Auf schmalen Fenstern
   bliebe daneben kein Platz, und ein Aufklappen, das den Inhalt verschiebt,
   verliert die Stelle, auf die man gerade gezeigt hat. */
.pm-wahl {
  position: relative;
  display: inline-block;
}

.pm-wahl-taste {
  gap: var(--a2);
}

.pm-wahl-pfeil {
  font-size: 10px;
  line-height: 1;
  opacity: .7;
}

.pm-wahl-taste[aria-expanded="true"] .pm-wahl-pfeil {
  transform: rotate(180deg);
}

.pm-wahl-liste {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--karte);
  border: 1px solid var(--rahmen);
  border-radius: var(--r-karte);
  box-shadow: 0 8px 24px rgba(16,36,80,.16);
  max-height: 260px;
  overflow-y: auto;
}

.pm-wahl-liste [role="option"] {
  padding: 8px 12px;
  min-height: var(--treffer);
  display: flex;
  align-items: center;
  border-radius: var(--r-taste);
  cursor: pointer;
  white-space: nowrap;
}

.pm-wahl-liste [role="option"]:hover { background: var(--grund); }

/* Der gewählte Eintrag ist nicht NUR farbig markiert — das Häkchen trägt
   die Aussage auch ohne Farbwahrnehmung. */
.pm-wahl-liste [role="option"][aria-selected="true"] {
  font-weight: 700;
  background: var(--grund);
}
.pm-wahl-liste [role="option"][aria-selected="true"]::after {
  content: "\2713";
  margin-left: auto;
  padding-left: var(--a3);
}

/* Der Fokusrahmen liegt hier NACH INNEN — nach aussen schnitte ihn die
   scrollende Liste ab, und ein abgeschnittener Fokus ist keiner. */
.pm-wahl-liste [role="option"]:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}

/* ====================================================================
 *  Meldungen
 * ==================================================================== */

.pm-meldung {
  border-radius: var(--r-feld);
  padding: var(--a3) var(--a4);
  font-size: 13px;
  border-left: 4px solid currentColor;
}
.pm-meldung[data-stufe="gruen"]     { color: var(--erfolg);    background: var(--erfolg-grund); }
.pm-meldung[data-stufe="bernstein"] { color: var(--bernstein); background: var(--bernstein-grund); }
.pm-meldung[data-stufe="rot"]       { color: var(--fehler);    background: var(--fehler-grund); }
.pm-meldung[data-stufe="hinweis"]   { color: var(--hinweis);   background: var(--hinweis-grund); }
.pm-meldung + .pm-meldung { margin-top: var(--a2); }

.pm-meldung h3 { margin: 0 0 var(--a1); font-size: 13px; }
.pm-meldung p  { margin: 0; color: var(--navy); }
.pm-meldung code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11.5px;
  background: rgba(255,255,255,.6);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ====================================================================
 *  Tabellen
 *
 *  Das Ergebnis ist eine TABELLE, keine Kachelwand — sortierbar und vom
 *  Bildschirmleser vorlesbar.
 * ==================================================================== */

.pm-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pm-tabelle th, .pm-tabelle td {
  text-align: left;
  padding: var(--a2) var(--a3);
  border-bottom: 1px solid var(--rahmen);
  vertical-align: middle;
}
.pm-tabelle th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--grau);
  font-weight: 700;
}
/* Zahlen als Zahlen ausrichten. */
.pm-tabelle .pm-zahl { text-align: right; font-variant-numeric: tabular-nums; }

.pm-tabelle-huelle { overflow-x: auto; }

/* ====================================================================
 *  Seitenvorschau
 * ==================================================================== */

.pm-flaeche {
  background: var(--flaeche);
  border-radius: var(--r-karte);
  padding: var(--a5) var(--a4);
}

.pm-blaetter {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: flex-start;
}

.pm-blatt {
  width: 82px;
  position: relative;
  margin-bottom: var(--a2);
}
.pm-blatt .pm-papier {
  height: 104px;
  background: var(--blatt);
  border-radius: 3px;
  box-shadow: 0 3px 9px rgba(0,0,0,.22);
  padding: 9px 8px;
  position: relative;
}
.pm-blatt .pm-nr {
  text-align: center;
  color: #E4E9F2;
  font-size: 10px;
  margin-top: var(--a1);
  font-weight: 600;
}
/* Herkunfts- und Bereichskuerzel. IMMER da, wo eine Farbe steht. */
.pm-blatt .pm-kuerzel {
  position: absolute;
  top: 4px; right: 4px;
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  color: #fff;
}
.pm-blatt .pm-balken {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  border-radius: 0 0 3px 3px;
}

.pm-bereich-1 { background: var(--b1); }
.pm-bereich-2 { background: var(--b2); }
.pm-bereich-3 { background: var(--b3); }
.pm-bereich-4 { background: var(--b4); }
.pm-bereich-5 { background: var(--b5); }
.pm-bereich-6 { background: var(--b6); }
.pm-bereich-7 { background: var(--b7); }
.pm-bereich-8 { background: var(--b8); }

/* Ueberlappende Seiten: gestrichelter Rahmen PLUS Angabe „2x". */
.pm-blatt[data-ueberlappt] .pm-papier { outline: 2px dashed #fff; outline-offset: 2px; }

/* Zoom (S2-BTN-ZOOM) und Auswahl. Gewaehlt heisst: Rahmen UND Haken — nie
   die Farbe allein. */
.pm-flaeche .pm-blatt { width: calc(82px * var(--zoom, 1)); cursor: pointer; }
.pm-flaeche .pm-blatt .pm-papier { height: calc(104px * var(--zoom, 1)); }
.pm-blatt[aria-selected="true"] .pm-papier { outline: 3px solid var(--orange); outline-offset: 2px; }
.pm-blatt[aria-selected="true"] .pm-nr::before { content: "\2713\00a0"; }
.pm-blatt:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }

/* Sortierbare Spaltenkoepfe (S1-LST-ZULETZT). */
.pm-sortieren { border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; padding: 0; }
th[aria-sort="ascending"] .pm-sortieren::after { content: " \25B2"; }
th[aria-sort="descending"] .pm-sortieren::after { content: " \25BC"; }

.pm-kollisionen { margin: 0 0 var(--a2); padding-left: 1.2em; }

/* ====================================================================
 *  Trennstelle
 *
 *  Ein Bedienelement JE SEITENPAAR, fokussierbar, mit der Leertaste
 *  schaltbar, beschriftet „Trennstelle zwischen Seite 3 und 4".
 * ==================================================================== */

.pm-trennstelle {
  width: 26px;
  align-self: stretch;
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  min-height: var(--treffer);
}
.pm-trennstelle .pm-strich {
  position: absolute;
  top: 8px; bottom: 26px;
  left: 50%;
  width: 0;
  border-left: 2px dashed #B9C4DA;
}
.pm-trennstelle[aria-pressed="true"] .pm-strich { border-color: var(--orange); }
.pm-trennstelle .pm-schere {
  position: absolute;
  top: 36px; left: 1px;
  width: var(--treffer); height: var(--treffer);
  border-radius: 50%;
  background: #fff;
  border: 1px solid #CDD5E6;
  color: var(--grau);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.pm-trennstelle[aria-pressed="true"] .pm-schere {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--auf-orange);
  box-shadow: 0 2px 6px rgba(240,167,42,.5);
}

/* ====================================================================
 *  Kacheln der Startseite
 * ==================================================================== */

.pm-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--a3);
}

.pm-kachel {
  background: var(--karte);
  border: 1px solid var(--rahmen);
  border-radius: var(--r-karte);
  padding: var(--a4);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--navy);
  min-height: 88px;
}
.pm-kachel:hover { border-color: var(--orange); }
.pm-kachel b { display: block; font-size: 14px; margin-bottom: var(--a1); }
.pm-kachel span { font-size: 12px; color: var(--grau); }

/* ====================================================================
 *  Umbruchpunkte
 *
 *  < 700 px Tablet-Anordnung · < 1100 px einspaltig
 * ==================================================================== */

@media (max-width: 1100px) {
  .pm-zweispaltig { grid-template-columns: 1fr !important; }
  /* Die Navigation BRICHT UM, statt zu verschwinden (24.09.2026). Vorher
   * war sie unter 1100 px weg — auf einem kleinen Laptop kam man von
   * Aufteilen nicht mehr zu Zusammenfuehren. */
  .pm-kopf { flex-wrap: wrap; }
  .pm-nav { order: 10; flex-basis: 100%; margin-left: 0; overflow-x: auto; }
}

@media (max-width: 700px) {
  :root { --treffer: var(--treffer-tablet); }
  .pm-blatt { width: 96px; }
  .pm-haupt { padding: var(--a4) var(--a3); }
}

/* Zoom bis 400 % ohne Funktionsverlust: nichts wird auf feste Pixelbreiten
 * festgenagelt, alles Breite ist relativ oder scrollt in seiner eigenen
 * Huelle. */
@media (max-width: 400px) {
  .pm-kopf { flex-wrap: wrap; }
}

/* ====================================================================
 *  Benutzermenue
 *
 *  Steht statisch im HTML und wird nur ein- und ausgeblendet. Gesperrte
 *  Eintraege bleiben darin und nennen ihren Grund — wer nicht sieht, dass
 *  es etwas gibt, haelt das Werkzeug fuer kaputt.
 * ==================================================================== */

.pm-menue {
  position: absolute;
  right: var(--a4);
  top: 52px;
  background: var(--karte);
  border: 1px solid var(--rahmen);
  border-radius: var(--r-karte);
  box-shadow: 0 8px 24px rgba(16,36,80,.16);
  padding: var(--a2);
  min-width: 260px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pm-menue [role="menuitem"] {
  display: block;
  padding: var(--a2) var(--a3);
  border-radius: var(--r-feld);
  color: var(--navy);
  text-decoration: none;
  font-size: 13px;
  min-height: var(--treffer);
}
.pm-menue a[role="menuitem"]:hover { background: var(--grund); }

/* „Abmelden" ist ein Formularknopf, kein Verweis — es muss ohne Skript
 * gehen. Er sieht aus wie jeder andere Eintrag. */
.pm-menue form { margin: 0; }
.pm-menue-knopf {
  width: 100%;
  min-height: var(--treffer);
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.pm-menue-knopf:hover { background: var(--grund); }

/* Die Anmeldeseite: eine Karte, mittig, nicht breiter als ein Formular. */
.pm-anmeldung .pm-karte {
  max-width: 440px;
  margin: var(--a6) auto;
}
.pm-anmeldung .pm-meldung { margin: var(--a3) 0 var(--a4); }

.pm-menue [aria-disabled="true"] { color: var(--grau); cursor: not-allowed; }
.pm-menue [aria-disabled="true"] small {
  display: block;
  font-size: 11px;
  color: var(--bernstein);
  margin-top: 2px;
}

/* ====================================================================
 *  Schrittanzeige (S0)
 *
 *  Der erledigte Schritt gruen, der laufende bernstein, kommende grau.
 *  Die Nummer steht IMMER daneben — Farbe ist nie der einzige Traeger.
 * ==================================================================== */

.pm-schritte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2);
  list-style: none;
  margin: 0 0 var(--a5);
  padding: 0;
  counter-reset: pm-schritt;
}

.pm-schritte li {
  counter-increment: pm-schritt;
  display: flex;
  align-items: center;
  gap: var(--a2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--grau);
  background: var(--grau-grund);
  border-radius: 20px;
  padding: 5px 14px 5px 6px;
  min-height: var(--treffer);
}
.pm-schritte li::before {
  content: counter(pm-schritt);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--karte);
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex: none;
}
.pm-schritte li[aria-current="step"] { color: var(--bernstein); background: var(--bernstein-grund); }
.pm-schritte li[data-erledigt]       { color: var(--erfolg);    background: var(--erfolg-grund); }

/* ====================================================================
 *  Wahl des Verarbeitungsorts (S0)
 * ==================================================================== */

.pm-ortwahl {
  border: 1px solid var(--rahmen);
  border-radius: var(--r-karte);
  padding: var(--a3);
  margin: 0 0 var(--a5);
  display: flex;
  flex-direction: column;
  gap: var(--a3);
}

.pm-ortwahl label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--a1) var(--a2);
  align-items: start;
  font-size: 13px;
  min-height: var(--treffer);
}
.pm-ortwahl input {
  width: 18px; height: 18px;
  margin: 2px 0 0;
  grid-row: 1;
}
/* Der Grund steht unter der Beschriftung, nicht dahinter — sonst zerreisst
 * er die Zeile und wird zum Fliesstext, den niemand liest. */
.pm-ortwahl small {
  grid-column: 2;
  font-size: 12px;
  color: var(--bernstein);
  line-height: 1.45;
}
.pm-ortwahl input:disabled + * { color: var(--grau); }

/* ====================================================================
 *  Zeilen und Tastenreihen
 * ==================================================================== */

.pm-zeile {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 2fr);
  gap: var(--a3);
  margin-bottom: var(--a4);
}

.pm-tastenzeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2);
  margin-top: var(--a5);
}

@media (max-width: 700px) {
  .pm-zeile { grid-template-columns: 1fr; }
  .pm-menue { right: var(--a2); left: var(--a2); min-width: 0; }
}

/* ====================================================================
 *  Reiter, Fenster, Meldungsflaeche (24.09.2026)
 *
 *  Diese Klassen standen im Markup und im Skript, aber nicht hier — die
 *  Reiter der Einstellungen liefen als blaue, unterstrichene Verweise
 *  ineinander, und die Auswahlfenster hatten keine Form.
 * ==================================================================== */

.pm-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a1);
  margin-bottom: var(--a4);
}
.pm-reiter a,
.pm-reiter span {
  display: inline-flex;
  align-items: center;
  min-height: var(--treffer);
  padding: 6px 12px;
  border-radius: var(--r-feld);
  border: 1px solid var(--rahmen);
  background: var(--karte);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.pm-reiter a:hover { background: var(--grund); }
.pm-reiter a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.pm-reiter span[aria-disabled="true"] { color: var(--grau); }

.pm-fenster {
  border: 1px solid var(--rahmen);
  border-radius: var(--r-fenster);
  padding: var(--a5);
  min-width: min(420px, 90vw);
  max-width: 90vw;
  color: var(--navy);
}
.pm-fenster::backdrop { background: rgba(16, 36, 80, .35); }
.pm-fenster h2 { font-size: 16px; margin: 0 0 var(--a3); }
.pm-fenster > .pm-taste,
.pm-fenster > .pm-tastenzeile { margin-top: var(--a4); }

.pm-wahlliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); }
.pm-wahlliste .pm-taste { width: 100%; justify-content: flex-start; }

.pm-feldgruppe {
  display: flex;
  flex-direction: column;
  gap: var(--a1);
  margin-top: var(--a3);
  font-size: 12px;
  font-weight: 600;
}

.pm-hinweistext { font-size: 12.5px; color: var(--grau); }

.pm-meldungsplatz:empty { display: none; }
.pm-meldungsplatz { display: grid; gap: var(--a2); margin-bottom: var(--a4); }

details > summary { cursor: pointer; font-weight: 600; min-height: var(--treffer); display: flex; align-items: center; }