/*
  Wochenplaner MFA/Azubi (Schritt 6c) nach dem Entwurf v2 (Konzept/design/Entwurf_v2_Planer/css/planer.css).
  Nur var(--rd-…) aus tokens.css – hier steht kein Farbwert. Das Pool-Symbol kommt aus dem Token --rd-pool-symbol (E16).
  Dialoge nutzen die gemeinsamen Klassen ap-dialog-huelle/ap-dialog aus arztplan.css.
*/

/* ---------- Kopf: Unterreiter, Standort-Reiter, Segment-Umschalter ---------- */
.pl-unterreiter { display: flex; gap: var(--rd-abstand-1); border-bottom: 1px solid var(--rd-rahmen); flex-wrap: wrap; margin-bottom: var(--rd-abstand-3); }
.pl-unterreiter a { padding: var(--rd-abstand-2) var(--rd-abstand-3-5); text-decoration: none; color: var(--rd-text-gedaempft); font-weight: var(--rd-gewicht-mittel); border-bottom: 3px solid transparent; margin-bottom: calc(-1 * var(--rd-abstand-px)); }
.pl-unterreiter a:hover { color: var(--rd-text); }
.pl-unterreiter a.pl-aktiv { color: var(--rd-gruen-text); border-bottom-color: var(--rd-gruen-ui); font-weight: var(--rd-gewicht-halbfett); }

.pl-segment { display: inline-flex; border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung-klein); overflow: hidden; background: var(--rd-flaeche); flex-wrap: wrap; }
.pl-segment button { border: 0; background: transparent; padding: var(--rd-abstand-1-25) var(--rd-abstand-2-5); cursor: pointer; font: inherit; font-size: var(--rd-schrift-tabelle); color: var(--rd-text-gedaempft); font-weight: var(--rd-gewicht-mittel); }
.pl-segment button + button { border-left: 1px solid var(--rd-rahmen); }
.pl-segment button[aria-pressed="true"] { background: var(--rd-gruen-hell); color: var(--rd-gruen-text); font-weight: var(--rd-gewicht-halbfett); }
.pl-segment button:focus-visible { box-shadow: var(--rd-fokus); }

.pl-reiter { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-1); margin-bottom: var(--rd-abstand-3); }
.pl-reiter button {
  border: 1px solid var(--rd-rahmen); background: var(--rd-flaeche); color: var(--rd-text); padding: var(--rd-abstand-1-5) var(--rd-abstand-3); border-radius: var(--rd-rundung-voll);
  cursor: pointer; font: inherit; font-weight: var(--rd-gewicht-mittel); display: inline-flex; align-items: center; gap: var(--rd-abstand-1-5);
}
.pl-reiter button:hover { background: var(--rd-flaeche-hover); }
.pl-reiter button[aria-selected="true"] { background: var(--rd-gruen-ui); color: var(--rd-text-hell); border-color: var(--rd-gruen-ui); font-weight: var(--rd-gewicht-halbfett); }
.pl-reiter .pl-zahl { font-size: var(--rd-schrift-winzig); font-weight: var(--rd-gewicht-fett); padding: 0 var(--rd-abstand-1-5); border-radius: var(--rd-rundung-voll); background: var(--rd-ampel-rot-hell); color: var(--rd-ampel-rot-text); line-height: 18px; }
.pl-reiter .pl-trenner { width: 1px; background: var(--rd-rahmen); margin: var(--rd-abstand-1); }

/* ---------- Planperiode: KW-Wechsler, Stepper, Veröffentlichen ---------- */
.pl-periode { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rd-abstand-4); padding: var(--rd-abstand-3) var(--rd-abstand-4); margin-bottom: var(--rd-abstand-3); }
.pl-kw { display: inline-flex; align-items: center; gap: var(--rd-abstand-1); }
.pl-kw strong { font-size: var(--rd-schrift-gross); min-width: 64px; text-align: center; }
.pl-zeitraum { color: var(--rd-text-gedaempft); font-size: var(--rd-schrift-tabelle); margin-left: var(--rd-abstand-1-5); }
.pl-rund {
  width: 32px; height: 32px; border-radius: var(--rd-rundung-voll); border: 1px solid var(--rd-rahmen); background: var(--rd-flaeche);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--rd-text); font-size: var(--rd-schrift-ueberschrift); line-height: 1;
}
.pl-rund:hover { background: var(--rd-flaeche-hell); }
.pl-stepper { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; row-gap: var(--rd-abstand-1-5); }
.pl-stepper li { display: flex; align-items: center; gap: var(--rd-abstand-1-5); font-size: var(--rd-schrift-tabelle); color: var(--rd-text-gedaempft); }
.pl-stepper li + li::before { content: ""; width: 24px; height: 2px; background: var(--rd-rahmen); margin: 0 var(--rd-abstand-2); }
.pl-pkt {
  width: 22px; height: 22px; border-radius: var(--rd-rundung-voll); display: inline-flex; align-items: center; justify-content: center; flex: none;
  font-size: var(--rd-schrift-klein); font-weight: var(--rd-gewicht-fett); border: 2px solid var(--rd-rahmen); background: var(--rd-flaeche); color: var(--rd-text-gedaempft);
}
.pl-stepper .pl-erledigt { color: var(--rd-text); }
.pl-stepper .pl-erledigt .pl-pkt { background: var(--rd-text); border-color: var(--rd-text); color: var(--rd-text-hell); }
.pl-stepper .pl-aktuell { color: var(--rd-gruen-text); font-weight: var(--rd-gewicht-halbfett); }
.pl-stepper .pl-aktuell .pl-pkt { border-color: var(--rd-gruen-ui); color: var(--rd-gruen-text); background: var(--rd-gruen-hell); }
.pl-wann { display: block; font-size: var(--rd-schrift-winzig); color: var(--rd-text-gedaempft); font-weight: var(--rd-gewicht-normal); }
.pl-abstand { flex: 1 1 auto; }
.pl-veroeffentlichen { display: flex; flex-direction: column; align-items: flex-end; gap: var(--rd-abstand-0-5); }
.pl-zeile { display: flex; align-items: center; gap: var(--rd-abstand-2); flex-wrap: wrap; justify-content: flex-end; }
.pl-version { font-size: var(--rd-schrift-klein); color: var(--rd-text-gedaempft); }
.pl-sperrgrund { font-size: var(--rd-schrift-klein); color: var(--rd-ampel-rot-text); font-weight: var(--rd-gewicht-halbfett); }

.pl-meldungen { padding: var(--rd-abstand-2) var(--rd-abstand-4); display: flex; flex-direction: column; gap: var(--rd-abstand-0-5); font-size: var(--rd-schrift-tabelle); margin-bottom: var(--rd-abstand-3); }
.pl-warnung { color: var(--rd-amber-text); font-weight: var(--rd-gewicht-halbfett); }

.pl-werkzeuge { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-2); align-items: center; margin-bottom: var(--rd-abstand-3); }
.pl-gruppe { display: inline-flex; align-items: center; gap: var(--rd-abstand-1-5); font-size: var(--rd-schrift-klein); color: var(--rd-text-gedaempft); }

/* ---------- Layout Raster + Seitenpanel ---------- */
.pl-layout { display: flex; gap: var(--rd-abstand-4); align-items: flex-start; }
.pl-rasterbereich { flex: 1 1 auto; min-width: 0; }
.pl-panel { flex: 0 0 280px; width: 280px; position: sticky; top: var(--rd-abstand-3); max-height: calc(100vh - 2 * var(--rd-abstand-3)); display: flex; flex-direction: column; overflow: hidden; }
.pl-panelreiter { display: flex; border-bottom: 1px solid var(--rd-rahmen); }
.pl-panelreiter button {
  flex: 1 1 0; border: 0; background: transparent; padding: var(--rd-abstand-2-5) var(--rd-abstand-2); cursor: pointer; font: inherit; font-weight: var(--rd-gewicht-mittel);
  color: var(--rd-text-gedaempft); border-bottom: 3px solid transparent; display: inline-flex; gap: var(--rd-abstand-1-5); align-items: center; justify-content: center;
}
.pl-panelreiter button[aria-selected="true"] { color: var(--rd-gruen-text); border-bottom-color: var(--rd-gruen-ui); font-weight: var(--rd-gewicht-halbfett); }
.pl-panelinhalt { overflow: auto; flex: 1 1 auto; padding: var(--rd-abstand-3); display: flex; flex-direction: column; gap: var(--rd-abstand-3); }

.pl-auswahlleiste {
  display: flex; align-items: center; gap: var(--rd-abstand-2); padding: var(--rd-abstand-2) var(--rd-abstand-3); margin-bottom: var(--rd-abstand-2);
  background: var(--rd-gruen-hell); color: var(--rd-gruen-text); border-radius: var(--rd-rundung); font-size: var(--rd-schrift-tabelle); font-weight: var(--rd-gewicht-mittel);
}
.pl-tastenhilfe { font-size: var(--rd-schrift-klein); color: var(--rd-text-gedaempft); margin-top: var(--rd-abstand-2); }
.pl-tastenhilfe kbd, .ap-dialog kbd { font-family: var(--rd-schrift); font-size: var(--rd-schrift-winzig); border: 1px solid var(--rd-rahmen); border-bottom-width: 2px; border-radius: var(--rd-rundung-mini); padding: 0 var(--rd-abstand-1); background: var(--rd-flaeche); color: var(--rd-text); }

.pl-legende { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-3); font-size: var(--rd-schrift-klein); color: var(--rd-text-gedaempft); margin-bottom: var(--rd-abstand-2); align-items: center; }
.pl-legende > span { display: inline-flex; align-items: center; gap: var(--rd-abstand-1); }
.pl-rasterhinweis { color: var(--rd-text); font-weight: var(--rd-gewicht-mittel); }

/* ---------- Raster ---------- */
.pl-raster-huelle { overflow-x: auto; position: relative; border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung-gross); background: var(--rd-flaeche); box-shadow: var(--rd-schatten-1); }
table.pl-raster { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 680px; }
table.pl-raster.pl-tagzoom { min-width: 0; }
.pl-raster col.pl-c-zeile { width: 140px; }
.pl-raster thead th {
  position: sticky; top: 0; z-index: 2; background: var(--rd-flaeche-hell); font-size: var(--rd-schrift-klein); text-align: left; padding: var(--rd-abstand-2);
  border-bottom: 1px solid var(--rd-rahmen); font-weight: var(--rd-gewicht-halbfett); color: var(--rd-text);
}
.pl-dat { color: var(--rd-text-gedaempft); font-weight: var(--rd-gewicht-normal); margin-left: var(--rd-abstand-1); }
.pl-raster th.pl-zl {
  text-align: left; font-size: var(--rd-schrift-klein); font-weight: var(--rd-gewicht-mittel); color: var(--rd-text); padding: var(--rd-abstand-1-5) var(--rd-abstand-2); vertical-align: top; background: var(--rd-flaeche);
  border-bottom: 1px solid var(--rd-rahmen-leicht); border-right: 1px solid var(--rd-rahmen-leicht); overflow-wrap: anywhere;
}
.pl-raster th.pl-zl small { display: block; color: var(--rd-text-gedaempft); font-weight: var(--rd-gewicht-normal); font-size: var(--rd-schrift-winzig); }
.pl-raster td { border-bottom: 1px solid var(--rd-rahmen-leicht); border-right: 1px solid var(--rd-rahmen-leicht); vertical-align: top; padding: var(--rd-abstand-1); height: 32px; }
.pl-raster td:last-child { border-right: 0; }
.pl-raster tr.pl-blockkopf th { background: var(--rd-gruen-hell); color: var(--rd-gruen-text); text-align: left; padding: var(--rd-abstand-1-5) var(--rd-abstand-2-5); font-size: var(--rd-schrift-tabelle); border-bottom: 1px solid var(--rd-rahmen); border-top: 2px solid var(--rd-gruen-ui); }
.pl-neben { font-weight: var(--rd-gewicht-normal); color: var(--rd-text-gedaempft); margin-left: var(--rd-abstand-2); font-size: var(--rd-schrift-klein); }
.pl-raster tr.pl-nurlesen td, .pl-raster tr.pl-nurlesen th.pl-zl { background: var(--rd-flaeche-hell); }
.pl-raster tr.pl-soll td, .pl-raster tr.pl-soll th.pl-zl { border-bottom: 1px solid var(--rd-rahmen); }
.pl-raster tr.pl-poolzeile td.pl-zelle { outline: 1px dashed var(--rd-rahmen-eingabe); outline-offset: -3px; }
.pl-raster tr.pl-inaktiv th.pl-zl { color: var(--rd-text-gedaempft); font-style: italic; }
.pl-raster tr.pl-abwzeile td, .pl-raster tr.pl-abwzeile th.pl-zl { background: var(--rd-flaeche-hell); }
.pl-raster tr.pl-trenner th { height: 6px; padding: 0; background: var(--rd-flaeche-hell); border-bottom: 1px solid var(--rd-rahmen); }

.pl-inhalt { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-0-75); align-items: flex-start; min-height: 22px; }
td.pl-zelle { cursor: pointer; }
td.pl-zelle:hover { background: var(--rd-flaeche-hover); }
td.pl-zelle:focus-visible { box-shadow: inset 0 0 0 3px var(--rd-gruen-ui); outline: none; }
td.pl-zelle.pl-ziel { background: var(--rd-gruen-hell); box-shadow: inset 0 0 0 2px var(--rd-gruen-ui); }
td.pl-unterdeckung { background: var(--rd-ampel-rot-hell); }
.pl-fehlt { font-size: var(--rd-schrift-winzig); color: var(--rd-ampel-rot-text); font-weight: var(--rd-gewicht-halbfett); }
td.pl-zu { background: repeating-linear-gradient(135deg, var(--rd-schraffur-1) 0 6px, var(--rd-schraffur-2) 6px 12px); color: var(--rd-text-gedaempft); font-size: var(--rd-schrift-winzig); cursor: default; }
td.pl-markiert { box-shadow: inset 0 0 0 3px var(--rd-ampel-rot); }

.pl-soll-text { display: flex; flex-direction: column; gap: var(--rd-abstand-0-5); align-items: flex-start; }
.pl-fenster, .pl-beh { font-size: var(--rd-schrift-winzig); color: var(--rd-text-gedaempft); }
.pl-bilanz.pl-ueber { color: var(--rd-ampel-rot-text); font-weight: var(--rd-gewicht-halbfett); }
.pl-chip-rot { background: var(--rd-ampel-rot-hell); color: var(--rd-ampel-rot-text); border-color: var(--rd-ampel-rot); }

/* Eigenschaften der Bereiche: zählt fürs Soll (S), belegt ein Zimmer (Z) */
.pl-eig {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--rd-rundung-mini); font-size: var(--rd-schrift-winzig); font-weight: var(--rd-gewicht-fett);
  border: 1px solid var(--rd-rahmen-eingabe); color: var(--rd-text); background: var(--rd-flaeche); vertical-align: -4px; margin-left: var(--rd-abstand-0-75); flex: none;
}
.pl-eig-soll { border-color: var(--rd-gruen-ui); color: var(--rd-gruen-text); background: var(--rd-gruen-hell); }
.pl-eig-zimmer { border-color: var(--rd-text-gedaempft); }

/* Pool/Bereitschaft: eigenes Symbol aus dem Token (E16) */
.pl-pool { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; border-radius: var(--rd-rundung-mini); background: var(--rd-pool); color: var(--rd-pool-text); font-size: var(--rd-schrift-winzig); font-weight: var(--rd-gewicht-fett); flex: none; }
.pl-pool::before { content: var(--rd-pool-symbol); }

/* ---------- Chips ---------- */
.pl-chip {
  display: inline-flex; align-items: center; gap: var(--rd-abstand-1); max-width: 100%; padding: var(--rd-abstand-0-5) var(--rd-abstand-1-5) var(--rd-abstand-0-5) var(--rd-abstand-0-75); border-radius: var(--rd-rundung-klein);
  border: 1px solid transparent; font-size: var(--rd-schrift-klein); line-height: 1.3; white-space: nowrap; position: relative; box-sizing: border-box;
}
.pl-chip .pl-gm { font-size: var(--rd-schrift-mini); font-weight: var(--rd-gewicht-fett); letter-spacing: .02em; padding: 0 var(--rd-abstand-1); border-radius: var(--rd-rundung-mini); border: 1px solid currentColor; line-height: 14px; flex: none; }
.pl-chip .pl-kz { font-weight: var(--rd-gewicht-fett); }
.pl-chip .pl-nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pl-chip.pl-arzt { background: var(--rd-gruppe-arzt); color: var(--rd-gruppe-arzt-text); }
.pl-chip.pl-pa { background: var(--rd-gruppe-pa); color: var(--rd-gruppe-pa-text); border-color: var(--rd-gruppe-pa-text); }
.pl-chip.pl-mfa { background: var(--rd-gruppe-mfa); color: var(--rd-gruppe-mfa-text); border-color: var(--rd-gruppe-mfa); }
.pl-chip.pl-azubi { background: var(--rd-gruppe-azubi); color: var(--rd-gruppe-azubi-text); border: 1px dashed var(--rd-gruppe-azubi-text); }
.pl-chip.pl-verwaltung { background: var(--rd-gruppe-verwaltung); color: var(--rd-gruppe-verwaltung-text); }
.pl-chip.pl-abwesend { background: repeating-linear-gradient(135deg, var(--rd-schraffur-1) 0 6px, var(--rd-schraffur-2) 6px 12px); color: var(--rd-text); border: 1px solid var(--rd-schraffur-rand); }
.pl-chip.pl-offen { background: var(--rd-flaeche); color: var(--rd-text-gedaempft); border: 1px dashed var(--rd-rahmen-eingabe); font-style: italic; }
.pl-chip.pl-ein .pl-kz, .pl-chip.pl-ein .pl-nm { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.pl-chip.pl-problem { outline: 2px solid var(--rd-ampel-rot); outline-offset: 1px; }
.pl-chip.pl-entfaellt { background: var(--rd-flaeche-hell); color: var(--rd-text-gedaempft); border: 1px dashed var(--rd-rahmen-eingabe); }
.pl-chip.pl-entfaellt .pl-kz, .pl-chip.pl-entfaellt .pl-nm { text-decoration: line-through; }
.pl-chip.pl-gewaehlt { outline: 2px solid var(--rd-gruen-ui); outline-offset: 1px; }
.pl-chip[draggable="true"] { cursor: grab; }
.pl-chip[draggable="true"]:active { cursor: grabbing; }
.pl-chip .pl-zeit { font-size: var(--rd-schrift-winzig); font-weight: var(--rd-gewicht-mittel); }
.pl-chip .pl-zi { font-size: var(--rd-schrift-mini); font-weight: var(--rd-gewicht-fett); padding: 0 var(--rd-abstand-1); border-radius: var(--rd-rundung-mini); background: var(--rd-flaeche); color: var(--rd-gruen-text); }
.pl-chip .pl-fkt { font-size: var(--rd-schrift-mini); font-weight: var(--rd-gewicht-halbfett); padding: 0 var(--rd-abstand-1); border-radius: var(--rd-rundung-mini); background: var(--rd-flaeche); color: var(--rd-text); border: 1px dashed var(--rd-rahmen-eingabe); }
.pl-platz {
  font-size: var(--rd-schrift-mini); font-weight: var(--rd-gewicht-fett); color: var(--rd-text); background: var(--rd-flaeche); border: 1px solid var(--rd-rahmen-eingabe);
  border-radius: var(--rd-rundung-voll); min-width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.pl-platz.pl-ueberplatz { border-color: var(--rd-ampel-rot); color: var(--rd-ampel-rot-text); background: var(--rd-ampel-rot-hell); }
.pl-fremd { width: 9px; height: 9px; border-radius: var(--rd-rundung-voll); background: var(--rd-amber); border: 1px solid var(--rd-amber-text); flex: none; display: inline-block; }
.pl-weg { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 var(--rd-abstand-0-75); font-size: var(--rd-schrift-groesse); line-height: 1; border-radius: var(--rd-rundung-mini); }
.pl-weg:hover { background: var(--rd-flaeche); color: var(--rd-ampel-rot-text); }

/* Zuweisungs-Chips untereinander, damit der Name lesbar bleibt */
.pl-raster:not(.pl-personen) .pl-inhalt > .pl-chip[data-zuweisung] { flex: 1 1 100%; }
.pl-raster:not(.pl-personen) .pl-inhalt > .pl-chip[data-zuweisung] .pl-nm { flex: 1 1 auto; }

/* Dichte */
.pl-dicht-kompakt .pl-chip .pl-vn { display: none; }
.pl-dicht-kompakt .pl-chip[data-zuweisung] .pl-weg { display: none; }
.pl-dicht-kompakt .pl-chip[data-zuweisung]:hover .pl-weg, .pl-dicht-kompakt .pl-chip[data-zuweisung]:focus-within .pl-weg { display: inline; }
.pl-dicht-komfortabel .pl-raster td { padding: var(--rd-abstand-1-5); height: 44px; }
.pl-dicht-komfortabel .pl-inhalt { gap: var(--rd-abstand-1-25); }
.pl-dicht-komfortabel .pl-chip { padding: var(--rd-abstand-1) var(--rd-abstand-1-5) var(--rd-abstand-1) var(--rd-abstand-1); font-size: var(--rd-schrift-tabelle); }
table.pl-raster.pl-tagzoom td { height: 40px; }

/* ---------- Personenansicht ---------- */
table.pl-raster.pl-personen { min-width: 760px; }
.pl-raster.pl-personen col.pl-c-person { width: 160px; }
.pl-raster.pl-personen col.pl-c-woche { width: 110px; }
.pl-raster.pl-personen thead tr.pl-unterkopf th { top: 33px; font-size: var(--rd-schrift-winzig); font-weight: var(--rd-gewicht-mittel); color: var(--rd-text-gedaempft); padding: var(--rd-abstand-0-75) var(--rd-abstand-1-5); }
.pl-raster.pl-personen thead th.pl-tagkopf { border-left: 1px solid var(--rd-rahmen); text-align: center; }
.pl-raster.pl-personen td.pl-vm { border-left: 1px solid var(--rd-rahmen); }
.pl-raster.pl-personen td { padding: var(--rd-abstand-0-75); }
.pl-raster.pl-personen th.pl-zl .pl-chip { margin-right: var(--rd-abstand-1); }
.pl-raster.pl-personen tr.pl-gruppenkopf th { background: var(--rd-flaeche-hell); font-size: var(--rd-schrift-klein); text-transform: uppercase; letter-spacing: .05em; color: var(--rd-text-gedaempft); padding: var(--rd-abstand-1-25) var(--rd-abstand-2); border-bottom: 1px solid var(--rd-rahmen); text-align: left; }
.pl-raster.pl-personen td.pl-woche { font-size: var(--rd-schrift-winzig); color: var(--rd-text-gedaempft); }
.pl-raster.pl-personen .pl-chip.pl-bchip { padding: var(--rd-abstand-px) var(--rd-abstand-0-75); font-size: var(--rd-schrift-winzig); white-space: normal; line-height: 1.2; }
.pl-raster.pl-personen .pl-chip.pl-bchip .pl-nm { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.pl-raster.pl-personen .pl-chip.pl-abwesend { padding: var(--rd-abstand-px) var(--rd-abstand-1); font-size: var(--rd-schrift-winzig); }
.pl-abw { color: var(--rd-amber-text); }

/* Stunden und Saldo */
.pl-balken { flex: 1 1 auto; display: block; height: 6px; border-radius: var(--rd-rundung-voll); background: var(--rd-rahmen-leicht); overflow: hidden; position: relative; margin: var(--rd-abstand-0-75) 0; min-width: 40px; }
.pl-balken > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--rd-gruen-ui); border-radius: var(--rd-rundung-voll); }
.pl-balken.pl-ueber > i { background: var(--rd-amber); }
.pl-balken.pl-unter > i { background: var(--rd-rahmen-eingabe); }
.pl-ampel { display: inline-flex; align-items: center; gap: var(--rd-abstand-1); font-size: var(--rd-schrift-winzig); font-weight: var(--rd-gewicht-halbfett); }
.pl-ampel::before { content: ""; width: 8px; height: 8px; border-radius: var(--rd-rundung-voll); background: currentColor; flex: none; }
.pl-ampel.pl-gruen { color: var(--rd-ampel-gruen-text); }
.pl-ampel.pl-rot { color: var(--rd-ampel-rot-text); }
.pl-ampel.pl-grau { color: var(--rd-text-gedaempft); }

/* ---------- Seitenpanel: Verfügbar, Palette ---------- */
.pl-filter { display: flex; flex-direction: column; gap: var(--rd-abstand-2); }
.pl-filter input[type="search"] { width: 100%; box-sizing: border-box; border: 1px solid var(--rd-rahmen-eingabe); border-radius: var(--rd-rundung-klein); padding: var(--rd-abstand-1-5) var(--rd-abstand-2-25); background: var(--rd-flaeche); color: var(--rd-text); font: inherit; }
.pl-check { font-size: var(--rd-schrift-klein); display: flex; gap: var(--rd-abstand-1-5); align-items: center; color: var(--rd-text); }
.pl-listenkopf { font-size: var(--rd-schrift-winzig); text-transform: uppercase; letter-spacing: .05em; color: var(--rd-text-gedaempft); font-weight: var(--rd-gewicht-halbfett); margin: var(--rd-abstand-0-5) 0 calc(-1 * var(--rd-abstand-1)); }
.pl-personenliste, .pl-palette { display: flex; flex-direction: column; gap: var(--rd-abstand-1-5); }
.pl-person {
  border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung); padding: var(--rd-abstand-1-75) var(--rd-abstand-2-25); background: var(--rd-flaeche); color: var(--rd-text);
  display: flex; flex-direction: column; gap: var(--rd-abstand-1); cursor: grab; text-align: left; font: inherit;
}
.pl-person:hover { border-color: var(--rd-rahmen-eingabe); background: var(--rd-flaeche-hover); }
.pl-person[aria-pressed="true"] { border-color: var(--rd-gruen-ui); background: var(--rd-flaeche-auswahl); box-shadow: var(--rd-fokus); }
.pl-person .pl-kopf { display: flex; align-items: center; gap: var(--rd-abstand-1-5); }
.pl-person .pl-n { font-weight: var(--rd-gewicht-halbfett); font-size: var(--rd-schrift-tabelle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.pl-info { font-size: var(--rd-schrift-winzig); color: var(--rd-text-gedaempft); }
.pl-stundenzeile { display: flex; align-items: center; gap: var(--rd-abstand-1-5); font-size: var(--rd-schrift-winzig); color: var(--rd-text-gedaempft); }
.pl-abwchips { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-0-75); }
.pl-abwchips .pl-chip { font-size: var(--rd-schrift-winzig); padding: 0 var(--rd-abstand-1-25); }
.pl-paletteneintrag {
  display: flex; align-items: center; gap: var(--rd-abstand-1-5); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung); padding: var(--rd-abstand-1-75) var(--rd-abstand-2-25);
  background: var(--rd-flaeche); color: var(--rd-text); cursor: grab; font: inherit; font-size: var(--rd-schrift-tabelle); font-weight: var(--rd-gewicht-mittel); text-align: left;
}
.pl-paletteneintrag:hover { background: var(--rd-flaeche-hover); border-color: var(--rd-rahmen-eingabe); }
.pl-paletteneintrag[aria-pressed="true"] { border-color: var(--rd-gruen-ui); background: var(--rd-flaeche-auswahl); box-shadow: var(--rd-fokus); }
.pl-paletteneintrag:disabled { cursor: not-allowed; color: var(--rd-text-gedaempft); }
.pl-paletteneintrag.pl-pooleintrag { border-style: dashed; }
.pl-paletteneintrag.pl-sperreintrag { background: repeating-linear-gradient(135deg, var(--rd-schraffur-1) 0 6px, var(--rd-schraffur-2) 6px 12px); }
.pl-rechts { margin-left: auto; display: inline-flex; gap: var(--rd-abstand-0-5); }

/* ---------- Seitenpanel: Prüfungen ---------- */
.pl-pruefkopf { display: flex; gap: var(--rd-abstand-1-5); flex-wrap: wrap; }
.pl-pruefgruppe h3 { margin: 0 0 var(--rd-abstand-1-5); font-size: var(--rd-schrift-klein); text-transform: uppercase; letter-spacing: .05em; color: var(--rd-text-gedaempft); }
.pl-pruefliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rd-abstand-1-5); }
.pl-pruef { border: 1px solid var(--rd-rahmen); border-left-width: 4px; border-radius: var(--rd-rundung-klein); padding: var(--rd-abstand-1-75) var(--rd-abstand-2-25); font-size: var(--rd-schrift-klein); background: var(--rd-flaeche); color: var(--rd-text); display: flex; flex-direction: column; gap: var(--rd-abstand-1); align-items: flex-start; }
.pl-pruef.pl-hart { border-left-color: var(--rd-ampel-rot); background: var(--rd-ampel-rot-hell); color: var(--rd-ampel-rot-text); }
.pl-pruef.pl-weich { border-left-color: var(--rd-amber); }
.pl-pruef.pl-hinweis { border-left-color: var(--rd-rahmen-eingabe); }
.pl-pruef.pl-uebersteuert { border-left-color: var(--rd-text-gedaempft); color: var(--rd-text-gedaempft); }
.pl-ziel { background: transparent; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; font-weight: var(--rd-gewicht-halbfett); text-decoration: underline; text-underline-offset: 2px; }
.pl-regel { font-size: var(--rd-schrift-mini); font-weight: var(--rd-gewicht-fett); letter-spacing: .03em; }

/* ---------- Alle Standorte (R26) ---------- */
.pl-alle { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 640px; }
.pl-alle th, .pl-alle td { border-bottom: 1px solid var(--rd-rahmen-leicht); padding: var(--rd-abstand-2); vertical-align: top; text-align: left; font-size: var(--rd-schrift-tabelle); }
.pl-alle thead th { background: var(--rd-flaeche-hell); font-size: var(--rd-schrift-klein); border-bottom: 1px solid var(--rd-rahmen); }
.pl-alle tbody th button { all: unset; cursor: pointer; color: var(--rd-blau); text-decoration: underline; font-weight: var(--rd-gewicht-halbfett); }
.pl-alle tbody th button:focus-visible { box-shadow: var(--rd-fokus); }
.pl-alle td.pl-luecke { background: var(--rd-ampel-rot-hell); color: var(--rd-ampel-rot-text); }
.pl-alle tr.pl-zentral th, .pl-alle tr.pl-zentral td { background: var(--rd-flaeche-hell); }

/* ---------- Dialoge (ergänzend zu ap-dialog) ---------- */
.ap-dialog.pl-breit { width: min(720px, 96vw); }
.pl-popsuche, .pl-text, .pl-auswahl { width: 100%; box-sizing: border-box; border: 1px solid var(--rd-rahmen-eingabe); border-radius: var(--rd-rundung-klein); padding: var(--rd-abstand-1-5) var(--rd-abstand-2-25); font: inherit; background: var(--rd-flaeche); color: var(--rd-text); }
.pl-vorschlaege { list-style: none; margin: 0; padding: var(--rd-abstand-0-5); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung-klein); max-height: 300px; overflow-y: auto; }
.pl-vorschlaege li { display: flex; gap: var(--rd-abstand-1-5); align-items: center; padding: var(--rd-abstand-1) var(--rd-abstand-1-5); border-radius: var(--rd-rundung-mini); font-size: var(--rd-schrift-tabelle); cursor: pointer; }
.pl-vorschlaege li[aria-selected="true"] { background: var(--rd-flaeche-auswahl); }
.pl-vorschlaege li.pl-gesperrt { cursor: not-allowed; color: var(--rd-text-gedaempft); }
.pl-grund { margin-left: auto; font-size: var(--rd-schrift-winzig); }
.pl-grund-hart { color: var(--rd-ampel-rot-text); }
.pl-grund-weich { color: var(--rd-amber-text); }
.pl-merkmale { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-3); font-size: var(--rd-schrift-tabelle); }
.pl-zusammenfassung { margin: 0; padding-left: var(--rd-abstand-4-5); font-size: var(--rd-schrift-tabelle); }
.pl-warnliste { margin: var(--rd-abstand-1) 0 0; padding-left: var(--rd-abstand-4-5); font-size: var(--rd-schrift-klein); max-height: 180px; overflow-y: auto; }
.pl-mail { border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung); padding: var(--rd-abstand-3) var(--rd-abstand-3-5); background: var(--rd-flaeche); font-size: var(--rd-schrift-tabelle); }
.pl-mail .pl-betreff { font-weight: var(--rd-gewicht-fett); margin-bottom: var(--rd-abstand-2); }
.pl-mail pre { white-space: pre-wrap; font-family: var(--rd-schrift); margin: 0; }

/* ---------- Schmale Bildschirme: Seitenpanel unter das Raster ---------- */
@media (max-width: 1100px) {
  /* stretch: das Raster ist so breit wie die Seite und scrollt in seiner Hülle (F-AD-3); flex-start ließe es auf Inhaltsbreite wachsen. */
  .pl-layout { flex-direction: column; align-items: stretch; }
  .pl-panel { position: static; width: 100%; flex: 1 1 auto; max-height: none; }
}
.pl-rastermeldung { margin-bottom: var(--rd-abstand-2); }