/* Pipeline — Neuentwurf 15.10.2026 („richtig richtig modern, animationstechnisch").
   Farben NUR aus den Tokens (styles.css), hell und dunkel ueber body.dark; Schrift in Farbe nur ueber --*-text.
   Phasenfarben (--pl-farbe, gesetzt von pipeline.js) tragen nur Flaechen, Linien und Punkte — nie Schrift.
   1rem = 12px, deshalb px. Schrift nirgends unter 12 px; am Handy Tippziele 44 px und Felder 16 px.
   Bewegung: nur transform und opacity. Federn spielt pipeline.js ueber die Web Animations API ab; hier stehen nur
   Uebergaenge fuer Zustaende (Hover, Schalter, Ziel). „Bewegung reduzieren" kuerzt jede Animation (styles.css).
   Drei Designs: die Seite traegt pl-design-glass | pl-design-modern | pl-design-klassik (dialerSkinOf). */

.main > #page-pipeline { max-width: 1680px; }
.pl-seite { position: relative; isolation: isolate; padding: 0 2px 28px; --pl-r: 14px; --pl-r-karte: 12px; --pl-kurve: cubic-bezier(.16, .84, .24, 1); --pl-feder: cubic-bezier(.34, 1.4, .64, 1); }
.pl-seite [hidden], .pl-ablage[hidden], .pl-meldung[hidden] { display: none !important; }
.pl-nur-vorleser { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pl-zeichen { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Kopf: Titel, Kennzahlen, Werkzeuge ───────────────────────────────────────────────────────────────────── */
.pl-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; margin: 0 0 16px; }
.pl-kopf-titel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 28px; min-width: 0; }
.pl-kopf h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1.1; }
.pl-kennzahlen { display: flex; gap: 22px; }
.pl-kennzahl { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pl-kennzahl-wort { font-size: 12px; font-weight: 600; color: var(--text2); white-space: nowrap; }
.pl-kennzahl-zahl { font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.pl-suche-feld { position: relative; display: inline-flex; align-items: center; }
.pl-suche-feld .pl-suche-zeichen { position: absolute; z-index: 1; left: 11px; display: flex; color: var(--text2); pointer-events: none; }
.pl-suche-feld input { width: 220px; min-height: 36px; padding: 7px 12px 7px 34px; border: 1px solid var(--border2); border-radius: 999px; background: var(--bg2);
  color: var(--text); font-family: inherit; font-size: 13px; transition: border-color var(--dur-fast), box-shadow var(--dur), width var(--dur-slow) var(--pl-kurve); }
.pl-suche-feld input::placeholder { color: var(--platzhalter); }
.pl-suche-feld input:focus { outline: none; border-color: var(--accent2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 22%, transparent); width: 260px; }
.pl-suche-breit { display: flex; margin: 4px 0 10px; }
.pl-suche-breit input { width: 100%; }
.pl-suche-breit input:focus { width: 100%; }

/* Der Schalter: zwei gleich breite Knoepfe, darunter gleitet das Licht mit Feder zur Wahl (data-wahl). */
.pl-schalter { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: var(--bg3); border: 1px solid var(--border); }
.pl-schalter-licht { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .42s var(--pl-feder); }
.pl-schalter[data-wahl="2"] .pl-schalter-licht { transform: translateX(100%); }
.pl-schalter-knopf { position: relative; z-index: 1; min-height: 30px; padding: 5px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text2);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: color var(--dur) var(--pl-kurve); }
.pl-schalter-knopf[aria-pressed="true"] { color: var(--accent-ink); }
.pl-schalter-knopf:active { transform: scale(.96); }

.pl-knopf-leise, .pl-knopf-voll { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 14px; border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-fast) var(--pl-kurve), background-color var(--dur-fast), box-shadow var(--dur), border-color var(--dur-fast); }
.pl-knopf-leise { border: 1px solid var(--border2); background: var(--bg2); color: var(--text); }
.pl-knopf-leise:hover { border-color: color-mix(in srgb, var(--accent2) 45%, var(--border2)); box-shadow: var(--shadow); }
/* „Phasen bearbeiten" (Betreiber 17.10.2026: man soll erkennen, dass sich die Phasen anpassen lassen) — DEZENT: ein
   Stift davor, ein Hauch Markenfarbe im Grund und am Rand; die Schrift bleibt --text (Kontrast wie jeder leise Knopf),
   kein zweiter Hauptknopf. */
#pl-phasen-knopf { background: color-mix(in srgb, var(--purple) 10%, var(--bg2)); border-color: color-mix(in srgb, var(--purple) 55%, var(--border2)); }
#pl-phasen-knopf:hover { background: color-mix(in srgb, var(--purple) 17%, var(--bg2)); border-color: color-mix(in srgb, var(--purple) 75%, var(--border2)); }
#pl-phasen-knopf .pl-zeichen { width: 15px; height: 15px; flex: 0 0 auto; color: var(--purple-text, var(--text)); }
.pl-knopf-voll { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 28%, transparent); }
.pl-knopf-voll:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 34%, transparent); transform: translateY(-1px); }
.pl-knopf-leise:active, .pl-knopf-voll:active { transform: scale(.97); }
.pl-knopf-voll:disabled, .pl-knopf-leise:disabled { cursor: progress; opacity: .6; transform: none; box-shadow: none; }
.pl-knopf-rot { background: var(--red-text); border-color: var(--red-text); color: #fff; box-shadow: 0 2px 10px color-mix(in srgb, var(--red) 25%, transparent); }
body.dark .pl-knopf-rot { background: var(--red-bg); color: var(--red-text); border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.pl-knopf-rot:disabled { cursor: not-allowed; }

.pl-seite button:focus-visible, .pl-menue button:focus-visible, .pl-meldung button:focus-visible, #pl-blatt button:focus-visible,
.pl-seite input:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

/* ── „Termine ohne Karte": ein freundlicher Hinweis, kein Kasten ──────────────────────────────────────────── */
.pl-hinweis-termine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; padding: 9px 10px 9px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--purple) 9%, var(--bg2)); border: 1px solid color-mix(in srgb, var(--purple) 30%, transparent); animation: plAuf .5s var(--pl-kurve) backwards; }
.pl-hinweis-licht { width: 9px; height: 9px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px color-mix(in srgb, var(--purple) 22%, transparent); animation: plAtmen 2.4s ease-in-out infinite; }
.pl-hinweis-satz { flex: 1 1 260px; font-size: 13px; font-weight: 600; color: var(--text); }
.pl-hinweis-knoepfe { display: flex; gap: 6px; }
.pl-hinweis-knoepfe .pl-knopf-leise, .pl-hinweis-knoepfe .pl-knopf-voll { min-height: 32px; border-radius: 999px; padding: 5px 14px; }
.pl-fehler-text { color: var(--red-text) !important; }

/* ── Leerer Zustand: kleine bewegte Zeichnung ──────────────────────────────────────────────────────────────── */
.pl-leer { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 18px 18px; margin-bottom: 14px; text-align: center; }
.pl-leer-satz { margin: 0; font-size: 14px; color: var(--text2); }
.pl-leer-bild { width: 200px; height: auto; overflow: visible; }
.pl-lb-spalte { fill: var(--bg3); stroke: var(--border2); stroke-width: 1; }
.pl-lb-karte { fill: var(--bg2); stroke: color-mix(in srgb, var(--accent2) 45%, var(--border2)); stroke-width: 1.2; }
.pl-lb-zeile { fill: color-mix(in srgb, var(--text) 18%, transparent); stroke: none; }
.pl-lb-k1, .pl-lb-k2, .pl-lb-k3 { transform-box: fill-box; animation: plSchweben 3.2s ease-in-out infinite; }
.pl-lb-k2 { animation-delay: -1.1s; } .pl-lb-k3 { animation-delay: -2.2s; }
.pl-lb-k3 { stroke: color-mix(in srgb, var(--green) 60%, var(--border2)); }

/* ── Das Brett ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* align-items: flex-start statt stretch (Gegenpruefung M4): waechst beim Ziehen eine Spalte um die Luecke, mussten
   sonst ALLE Spalten mitwachsen und mit allen Karten neu gelegt werden (bis 75 ms je Zielwechsel bei 205 Karten).
   Gleich hoch wirken sie weiter ueber die Mindesthoehe. contain: jede Spalte legt sich fuer sich. */
.pl-brett { position: relative; display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding: 4px 4px 14px; margin: 0 -4px; scroll-padding: 0 4px;
  scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
.pl-laedt { display: contents; }
.pl-spalte { position: relative; contain: layout style; display: flex; flex-direction: column; flex: 1 0 196px; max-width: 360px; min-height: calc(100vh - 250px); padding: 0 8px 10px;
  border-radius: var(--pl-r); background: var(--bg3); border: 1px solid var(--border); }
.pl-spalte::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--pl-farbe, var(--border2)); opacity: .9; }
.pl-erscheint { animation: plSpalteAuf .7s var(--pl-kurve) backwards; animation-delay: calc(var(--pl-i, 0) * 70ms); }
/* Die Staffel der Karten traegt --pl-j (0–3, gesetzt von plSpalteEl) statt :nth-child — eine Regel mit :nth-child an
   .pl-karte liess Chromium bei JEDER Einfuegung in eine Spalte alle folgenden Karten neu berechnen (Luecke beim
   Ziehen, Ablegen: 90 ms Stil je Zielwechsel bei 205 Karten und 4-facher Drossel, gemessen 16.10.2026). */
.pl-erscheint .pl-karte { animation: plAuf .55s var(--pl-kurve) backwards; animation-delay: calc(var(--pl-i, 0) * 70ms + 140ms + var(--pl-j, 3) * 47ms); }

/* Kopf in zwei Zeilen: Punkt · Name · Zahl, darunter Summe · „+" bzw. Einklappen, darunter der Balken — der Name hat so die
   ganze Breite (bei 196 px brach „Verhandlung" sonst mitten im Wort). */
.pl-spalte-kopf { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 14px 6px 10px; margin: 0 -2px; }
.pl-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--pl-farbe, var(--border2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pl-farbe, var(--border2)) 20%, transparent); flex: 0 0 auto; }
.pl-spalte-name { margin: 0; font-size: 14px; font-weight: 800; color: var(--text); overflow-wrap: break-word; letter-spacing: -.005em; line-height: 1.25; }
.pl-anzahl { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--border); font-size: 12px; font-weight: 800; line-height: 18px;
  color: var(--text2); text-align: center; font-variant-numeric: tabular-nums; }
.pl-plus, .pl-zuklappen { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent;
  color: var(--text2); cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur) var(--pl-feder); }
.pl-plus:hover, .pl-zuklappen:hover { background: var(--bg2); color: var(--text); }
.pl-plus:hover { transform: rotate(90deg); }
.pl-zuklappen .pl-zeichen { transform: rotate(180deg); transition: transform var(--dur-slow) var(--pl-feder); }
.pl-summe { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-height: 28px; align-content: center; }
.pl-spalte-kopf > .pl-plus, .pl-spalte-kopf > .pl-zuklappen { grid-column: 3; grid-row: 2; justify-self: end; }
.pl-summe-zahl { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.pl-summe-wort { font-size: 12px; color: var(--text2); }
.pl-balken { grid-column: 2 / -1; height: 3px; margin: 4px 0 0; border-radius: 3px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.pl-balken-fuellung { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--pl-farbe) 70%, transparent), var(--pl-farbe));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--pl-kurve) .15s; }

.pl-karten { list-style: none; margin: 0; padding: 2px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 80px; }
.pl-spalte-leer { display: flex; align-items: center; justify-content: center; min-height: 76px; padding: 12px; border-radius: var(--pl-r-karte);
  border: 1.5px dashed var(--border2); font-size: 12px; color: var(--text2); text-align: center; }

/* Eingeklappt (Gewonnen/Verloren am PC): eine schmale Leiste mit Name, Zahl und Pfeil — bleibt ein Ablageziel. */
.pl-spalte.pl-zu { flex: 0 0 58px; max-width: 58px; padding: 0 6px 10px; cursor: default; }
.pl-spalte.pl-zu .pl-spalte-kopf { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding-top: 14px; }
.pl-spalte.pl-zu .pl-spalte-kopf > * { grid-column: 1; grid-row: auto; justify-self: center; }
.pl-spalte.pl-zu .pl-spalte-name { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; order: 4; }
.pl-spalte.pl-zu .pl-punkt { order: 1; } .pl-spalte.pl-zu .pl-zuklappen { order: 2; } .pl-spalte.pl-zu .pl-anzahl { order: 3; }
.pl-spalte.pl-zu .pl-zuklappen .pl-zeichen { transform: none; }
.pl-spalte.pl-zu .pl-summe, .pl-spalte.pl-zu .pl-balken, .pl-spalte.pl-zu .pl-karten { display: none; }

/* ── Die Karte ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* content-visibility: Karten ausserhalb des Bildes werden nicht gelegt und nicht gemalt (205 Karten, Gegenpruefung M4);
   die Hoehe haelt contain-intrinsic-size (auto merkt sich die zuletzt gemessene). */
.pl-karten > .pl-karte:not(.pl-platz) { content-visibility: auto; contain-intrinsic-size: auto 104px; }
.pl-karte { position: relative; list-style: none; border-radius: var(--pl-r-karte); background: var(--bg2); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(5, 28, 44, .05), 0 2px 8px rgba(5, 28, 44, .05), inset 0 1px 0 rgba(255, 255, 255, .7);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  transition: transform var(--dur) var(--pl-kurve), box-shadow var(--dur) var(--pl-kurve), border-color var(--dur-fast); }
body.dark .pl-karte { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .05); }
/* Feine Lichtkante in der Farbe der Phase links — die Karte gehoert sichtbar zu ihrer Spalte. */
.pl-karte::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pl-farbe, transparent); opacity: 0;
  transition: opacity var(--dur); }
@media (hover: hover) {
  .pl-karte:not(.pl-platz):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent2) 28%, var(--border2));
    box-shadow: 0 10px 28px rgba(5, 28, 44, .11), 0 2px 6px rgba(5, 28, 44, .06), inset 0 1px 0 rgba(255, 255, 255, .8); }
  body.dark .pl-karte:not(.pl-platz):hover { box-shadow: 0 12px 30px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08); }
  .pl-karte:hover::before { opacity: 1; }
}
.pl-k-haupt { display: flex; flex-direction: column; align-items: stretch; gap: 5px; width: 100%; min-height: 64px; padding: 11px 12px 10px 20px;   /* links Platz fuer den Griff */ border: 0; border-radius: var(--pl-r-karte);
  background: none; color: var(--text); font-family: inherit; text-align: left; cursor: pointer; }
.pl-k-kopf { display: flex; align-items: baseline; gap: 10px; }
.pl-k-titel { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; letter-spacing: -.005em; }
.pl-k-betrag { flex: 0 0 auto; font-size: 13.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pl-k-name, .pl-k-grund { font-size: 12.5px; line-height: 1.35; color: var(--text2); overflow-wrap: anywhere; }
.pl-k-grund { font-style: italic; }
.pl-k-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.pl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 18px;
  background: var(--bg3); color: var(--text2); }
.pl-chip .pl-zeichen { width: 13px; height: 13px; }
.pl-chip-heute { background: var(--green-bg); color: var(--green-text); }
.pl-chip-ueberfaellig { background: var(--red-bg); color: var(--red-text); }
.pl-chip-ruht { background: var(--amber-bg); color: var(--amber-text); }
.pl-k-fuss { display: flex; align-items: center; gap: 7px; margin-top: 3px; min-height: 26px; }
.pl-k-wer { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-k-alter { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-karte.pl-ruht { border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); }

.pl-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  font-size: 12px; font-weight: 800; letter-spacing: -.02em; line-height: 1; box-shadow: 0 0 0 2px var(--bg2); }
.pl-avatar-gross { width: 44px; height: 44px; font-size: 15px; }
.pl-av-blau { background: var(--accent-light); color: var(--accent2); }
.pl-av-gold { background: var(--purple-bg); color: var(--purple-text); }
.pl-av-gruen { background: var(--green-bg); color: var(--green-text); }
.pl-av-bernstein { background: var(--amber-bg); color: var(--amber-text); }
.pl-av-rot { background: var(--red-bg); color: var(--red-text); }

/* Schnell-Aktionen: am PC beim Zeigen (oder mit dem Fokus in der Karte) unten rechts; „⋯" immer leise sichtbar. */
.pl-k-aktionen { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--bg2); }
.pl-k-schnell { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent;
  color: var(--text2); cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--pl-kurve), opacity var(--dur) var(--pl-kurve); }
.pl-k-schnell:hover { background: var(--bg3); color: var(--text); }
.pl-k-schnell:active { transform: scale(.9); }
.pl-k-anruf:hover { color: var(--green-text); background: var(--green-bg); }
/* Nur am PC (Zeiger UND Breite): am schmalen Fenster steht „⋯" immer da und ist obenauf (Probe S4). */
@media (hover: hover) and (min-width: 769px) {
  /* Unsichtbar faengt die Leiste keinen Klick ab (der Klick auf das Alter oeffnet die Karte, nicht das Menue). */
  .pl-k-aktionen { opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity var(--dur) var(--pl-kurve), transform var(--dur) var(--pl-kurve); }
  .pl-karte:hover .pl-k-aktionen, .pl-karte:focus-within .pl-k-aktionen { opacity: 1; transform: none; pointer-events: auto; }
}
@media (hover: none), (max-width: 768px) { .pl-k-anruf, .pl-k-kal { display: none; } .pl-k-aktionen { background: transparent; } }

.pl-karte.pl-wartet { opacity: .7; }
.pl-karte.pl-wartet .pl-k-haupt { cursor: progress; }
/* Abschluss-Spalten: dieselbe Karte, ruhiger (keine Schatten-Tiefe; Schrift bleibt voll lesbar). */
.pl-spalte.pl-art-verloren .pl-karte, .pl-spalte.pl-art-gewonnen .pl-karte { box-shadow: none; background: color-mix(in srgb, var(--bg2) 82%, var(--bg3)); }

/* Glanz nach „Gewonnen": eine Lichtbahn ueber die Karte und ein gruener Ring, unter einer Sekunde. */
.pl-karte.pl-glanz { overflow: hidden; border-color: color-mix(in srgb, var(--green) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent), 0 8px 24px color-mix(in srgb, var(--green) 20%, transparent); }
.pl-karte.pl-glanz::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--green) 26%, transparent) 45%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  animation: plGlanzBahn .9s var(--pl-kurve) forwards; }
.pl-funken { position: fixed; inset: 0; z-index: 9600; pointer-events: none; overflow: hidden; }
.pl-funke { position: absolute; width: 9px; height: 5px; border-radius: 2px; }
.pl-funke-rund { width: 7px; height: 7px; border-radius: 50%; }

/* ── Ziehen ───────────────────────────────────────────────────────────────────────────────────────────────── */
/* Langes Druecken (Handy): die Karte hebt sich in den 250 ms bis zum Greifen sichtbar an (vorher wurde sie kleiner) —
   wer drueckt, sieht sofort, dass etwas geschieht; beim Greifen setzt das Abbild genau diese Groesse fort. */
.pl-karte.pl-drueckt { transform: translateY(-2px) scale(1.025); box-shadow: 0 14px 34px rgba(5, 28, 44, .18), 0 0 0 2px color-mix(in srgb, var(--pl-farbe, var(--accent2)) 45%, transparent);
  transition: transform .25s var(--pl-kurve), box-shadow .25s var(--pl-kurve); }
.pl-karte.pl-vorgefuehrt { visibility: hidden; }
/* Einrasten nach dem Ablegen: der Rand leuchtet einmal in der Farbe der Phase (Deckkraft eines Rings, keine Schatten-Bewegung). */
/* (innen gemalt: content-visibility schneidet alles ausserhalb der Karte ab) */
.pl-karte.pl-eingerastet:not(.pl-glanz)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pl-farbe, var(--accent2)) 80%, transparent), inset 0 0 18px color-mix(in srgb, var(--pl-farbe, var(--accent2)) 22%, transparent);
  animation: plRing .7s var(--pl-kurve) forwards; }
@keyframes plRing { from { opacity: 1; } 60% { opacity: .9; } to { opacity: 0; } }
.pl-karte.pl-zieht { display: none; }
.pl-geist { position: fixed; left: 0; top: 0; z-index: 9000; margin: 0; pointer-events: none; will-change: transform;
  /* In der Hand: dieselbe Karte, dieselben Rundungen — nur ein feiner Ring in der Farbe der Phase (1 px, kein dicker
     Rahmen) und ein weicher, mehrstufiger Schatten, der sie sichtbar UEBER das Brett hebt (Koordination 16.10.2026).
     Kein Uebergang auf transform: jede Lage setzt pipeline.js je Bild, ein Uebergang waere ein Gummiband. */
  border-color: color-mix(in srgb, var(--pl-farbe, var(--accent2)) 55%, var(--border));
  box-shadow: 0 1px 2px rgba(5, 28, 44, .06), 0 4px 10px rgba(5, 28, 44, .07), 0 14px 28px rgba(5, 28, 44, .10), 0 30px 60px rgba(5, 28, 44, .14) !important;
  transition: opacity .12s linear !important; }
body.dark .pl-geist { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 10px rgba(0, 0, 0, .28), 0 14px 30px rgba(0, 0, 0, .34), 0 32px 64px rgba(0, 0, 0, .42) !important; }
.pl-geist::before { opacity: .85; }
.pl-geist .pl-k-aktionen { display: none; }
/* Ueber der Ablage-Leiste klein und durchscheinend, so dass „Gewonnen" usw. lesbar bleibt; reicht die Karte nur hinein,
   wird sie halb durchsichtig. */
.pl-geist.pl-ueber-ablage { opacity: .55; }
.pl-geist.pl-nahe-ablage { opacity: .6; }
/* Der Griff (sechs Punkte) am linken Rand: die Karte laesst sich anfassen. Immer leise sichtbar (auch am Handy), beim
   Zeigen deutlich, am Abbild kraeftig (Betreiber 16.10.2026: „ich wüsste nicht als Benutzer, dass ich das ziehen kann"). */
/* Groesser seit der Durchsicht (16.10.2026): Punkte von 4 px in zwei Reihen, 10 × 16 px Flaeche, in Ruhe >= 3:1 gegen
   die Karte (gemalt gemessen, Probe B13). Das Zeichen ist 24 × 24 gross, die Punkte liegen in seiner Mitte. */
.pl-k-griff { position: absolute; left: -3px; top: 50%; display: flex; width: 24px; height: 24px; margin-top: -12px; color: var(--text2); opacity: .85; pointer-events: none; transition: opacity var(--dur) var(--pl-kurve); }
.pl-k-griff .pl-zeichen { width: 24px; height: 24px; stroke-width: 4; }
@media (hover: hover) and (min-width: 769px) { .pl-karte:not(.pl-platz):hover .pl-k-griff { opacity: 1; color: var(--text); } }
.pl-geist .pl-k-griff { opacity: 1; color: var(--text); }
.pl-spalte.pl-art-gewonnen .pl-k-griff, .pl-spalte.pl-art-verloren .pl-k-griff { opacity: .6; }
/* Zeiger wie an jedem anderen Klickbaren der App — keine Greif-Hand (Betreiber 17.10.2026: die weisse Hand sieht man
   nicht, „alles einheitlich"); dass man ziehen kann, zeigt der Griff. */
.pl-karte:not(.pl-platz) { cursor: pointer; }

/* Der Tipp beim ersten Besuch (pipeline.js plTippZeigen): ein Streifen im Fluss ueber dem Brett — verdeckt nichts. */
.pl-tipp { display: flex; align-items: center; gap: 10px 12px; margin: 0 0 12px; padding: 8px 8px 8px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent2) 7%, var(--bg2)); border: 1px solid color-mix(in srgb, var(--accent2) 30%, var(--border)); transition: opacity var(--dur) var(--pl-kurve); }
.pl-tipp.pl-tipp-geht { opacity: 0; pointer-events: none; }
.pl-tipp-zeichen { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; background: var(--accent-light); color: var(--accent2); }
.pl-tipp-satz { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--text); }
.pl-tipp-satz strong { font-weight: 700; }
.pl-tipp-zu { flex: 0 0 auto; min-height: 32px; padding: 5px 12px; }
/* Die Luecke oeffnet sich weich: bei jedem Einsetzen (sie wandert von Spalte zu Spalte) blendet sie aus der Mitte auf. */
.pl-luecke { list-style: none; border-radius: var(--pl-r-karte); border: 2px dashed color-mix(in srgb, var(--pl-farbe, var(--accent2)) 65%, transparent);
  background: color-mix(in srgb, var(--pl-farbe, var(--accent2)) 11%, transparent); box-shadow: inset 0 0 22px color-mix(in srgb, var(--pl-farbe, var(--accent2)) 14%, transparent);
  animation: plLuecke .26s var(--pl-kurve) both; }
@keyframes plLuecke { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
/* Waehrend des Ziehens liegt eine unsichtbare Decke ueber der Seite (unter Abbild und Ablage-Leiste): sie traegt den
   Zeiger „gepackt" und nimmt den Karten darunter das Hover (kein Flackern unter dem Abbild). Vorher taten das
   `body.pl-zug-an *` und `.pl-brett-zug .pl-karte { pointer-events: none }` — eine geerbte Eigenschaft an body bzw. an
   205 Karten liess beim Heben UND beim Loslassen den Stil jedes Elements neu berechnen (je 140–300 ms bei 4-facher
   Drossel, gemessen 16.10.2026). Die Decke kostet 2 ms. Das Ziel findet pipeline.js aus den Rechtecken der Ziele (plTreffer). */
.pl-zug-decke { position: fixed; inset: 0; z-index: 8980; cursor: default; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.pl-brett-zug .pl-spalte { border-style: dashed; border-color: var(--border2); }
/* Die Zielspalte leuchtet ueber eine eigene Flaeche (::after) unter den Karten, die nur ihre Deckkraft aendert — das
   laeuft im Compositor. Vorher gingen Schatten, Rand und Grund der Spalte selbst ueber: die ganze Spalte samt ihren
   Karten wurde in jedem Bild des Uebergangs neu gemalt, je Zielwechsel und fuer zwei Spalten (16.10.2026). Die Spalte
   ist durch `contain: layout` ein eigener Stapel — z-index -1 liegt ueber ihrem Grund und unter den Karten. */
.pl-spalte::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  border: 2px solid color-mix(in srgb, var(--pl-farbe) 80%, transparent); background: color-mix(in srgb, var(--pl-farbe) 13%, transparent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--pl-farbe) 20%, transparent), 0 16px 44px color-mix(in srgb, var(--pl-farbe) 24%, transparent);
  transition: opacity var(--dur) var(--pl-kurve); }
.pl-spalte.pl-ziel::after { opacity: 1; }
.pl-karte.pl-gehoben { transform: translateY(-4px) scale(1.02); border-color: var(--accent2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 28%, transparent), 0 18px 40px rgba(5, 28, 44, .18); z-index: 3; }

/* Ablage-Leiste: unten in der Mitte, waehrend des Ziehens. Ziele wachsen, wenn die Karte darueber schwebt. */
/* Ohne backdrop-filter (16.10.2026): unter der Leiste zieht das Abbild durch und ruecken Karten — die Unschaerfe musste
   in jedem Bild neu entstehen (am Handy 4-fach gedrosselt: Rand-Rollen 450–730 ms mit, 210–450 ms ohne). Fast deckend.
   Die eigene Ebene (will-change) braucht sie trotzdem: ohne sie malte das Rollen der Seite unter ihr am PC jedes Bild neu. */
.pl-ablage { position: fixed; left: 50%; bottom: 22px; z-index: 8990; display: flex; gap: 10px; padding: 10px; border-radius: 22px; transform: translate(-50%, 0);
  background: color-mix(in srgb, var(--bg2) 95%, transparent); border: 1px solid var(--border2); box-shadow: 0 20px 50px rgba(5, 28, 44, .22);
  will-change: transform; }   /* eigene Ebene: rollt die Seite darunter (Rand-Rollen), wird die Leiste nicht in jedem Bild neu gemalt */
body.dark .pl-ablage { box-shadow: 0 20px 50px rgba(0, 0, 0, .55); }
.pl-ablage-ziel { display: flex; align-items: center; gap: 10px; min-width: 156px; min-height: 58px; padding: 8px 18px 8px 10px; border-radius: 15px;
  border: 1.5px dashed var(--border2); color: var(--text); font-size: 14px; font-weight: 800;
  transition: transform .35s var(--pl-feder), background-color var(--dur), border-color var(--dur), box-shadow var(--dur); }
.pl-ablage-rund { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; }
.pl-ablage-rund .pl-zeichen { width: 19px; height: 19px; }
.pl-ablage-gewonnen .pl-ablage-rund { background: var(--green-bg); color: var(--green-text); }
.pl-ablage-verloren .pl-ablage-rund { background: var(--red-bg); color: var(--red-text); }
.pl-ablage-entfernen .pl-ablage-rund { background: var(--bg3); color: var(--text2); }
.pl-ablage-ziel.pl-ziel { transform: scale(1.07) translateY(-3px); border-style: solid; }
.pl-ablage-gewonnen.pl-ziel { border-color: var(--green); background: var(--green-bg); box-shadow: 0 10px 28px color-mix(in srgb, var(--green) 28%, transparent); }
.pl-ablage-verloren.pl-ziel { border-color: var(--red); background: var(--red-bg); box-shadow: 0 10px 28px color-mix(in srgb, var(--red) 24%, transparent); }
.pl-ablage-entfernen.pl-ziel { border-color: var(--text2); background: var(--bg3); }

/* ── Meldung mit „Rückgängig" ─────────────────────────────────────────────────────────────────────────────── */
.pl-meldung { position: fixed; left: 50%; bottom: 24px; z-index: 9500; display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 24px));
  padding: 8px 8px 8px 12px; border-radius: 16px; transform: translate(-50%, 0);
  background: color-mix(in srgb, var(--bg2) 92%, transparent); border: 1px solid var(--border2); color: var(--text);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 18px 44px rgba(5, 28, 44, .2), 0 2px 6px rgba(5, 28, 44, .08); }
body.dark .pl-meldung { box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
.pl-meldung-zeichen { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: var(--accent-light); color: var(--accent2); flex: 0 0 auto; }
.pl-meldung-gewonnen .pl-meldung-zeichen { background: var(--green-bg); color: var(--green-text); }
.pl-meldung-err .pl-meldung-zeichen { background: var(--red-bg); color: var(--red-text); }
.pl-meldung-text { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.pl-rueckgaengig { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border: 0; border-radius: 10px; background: var(--accent-light);
  color: var(--accent2); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: transform var(--dur-fast) var(--pl-kurve), filter var(--dur-fast); }
.pl-rueckgaengig:hover { filter: brightness(.96); }
/* Das Tastenkuerzel steht im Knopf (am PC), Vorleser hoeren es ueber aria-keyshortcuts und die Ansage. */
.pl-taste { margin-left: 2px; padding: 1px 5px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--accent2) 35%, transparent); font-family: inherit; font-size: 12px; font-weight: 700; line-height: 16px; color: var(--accent2); }
.pl-rueckgaengig:active { transform: scale(.95); }
.pl-meldung-zu { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text2); cursor: pointer; }
.pl-meldung-zu:hover { background: var(--bg3); color: var(--text); }

/* ── Menue „⋯" (PC) ───────────────────────────────────────────────────────────────────────────────────────── */
.pl-menue { position: fixed; z-index: 9200; min-width: 230px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 6px; border-radius: 14px; background: var(--bg2);
  border: 1px solid var(--border2); box-shadow: 0 18px 50px rgba(5, 28, 44, .2), 0 2px 8px rgba(5, 28, 44, .08); }
body.dark .pl-menue { box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.pl-menue-kopf { padding: 8px 10px 4px; font-size: 12px; font-weight: 700; color: var(--text2); }
.pl-menue-trenner { height: 1px; margin: 5px 6px; background: var(--border); }
.pl-menue-punkt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent;
  color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background-color var(--dur-fast); }
.pl-menue-punkt .pl-zeichen { color: var(--text2); }
.pl-menue-punkt:hover, .pl-menue-punkt:focus-visible { background: var(--bg3); outline: none; }
.pl-menue-punkt:focus-visible { box-shadow: inset 0 0 0 2px var(--accent2); }
.pl-menue-punkt .pl-punkt { margin: 0 4px 0 3px; }
.pl-mp-gruen .pl-zeichen { color: var(--green-text); }
.pl-mp-rot { color: var(--red-text); }
.pl-mp-rot .pl-zeichen { color: var(--red-text); }

/* ── Liste (Ansicht „Liste") ──────────────────────────────────────────────────────────────────────────────── */
.pl-liste { border-radius: var(--pl-r); background: var(--bg2); border: 1px solid var(--border); overflow: hidden; animation: plAuf .5s var(--pl-kurve) backwards; }
.pl-liste-kopf, .pl-zeile-haupt { display: grid; grid-template-columns: minmax(180px, 2.2fr) minmax(120px, 1.2fr) 110px minmax(120px, 1.2fr) minmax(140px, 1.3fr) 120px; gap: 12px; align-items: center; }
.pl-liste-kopf { padding: 10px 52px 10px 16px; font-size: 12px; font-weight: 700; color: var(--text2); background: var(--bg3); border-bottom: 1px solid var(--border); }
.pl-zeilen { list-style: none; margin: 0; padding: 0; }
.pl-zeile { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--border); transition: background-color var(--dur-fast); }
.pl-zeile:last-child { border-bottom: 0; }
.pl-zeile:hover { background: color-mix(in srgb, var(--accent2) 4%, var(--bg2)); }
.pl-zeile-haupt { flex: 1 1 auto; min-width: 0; padding: 10px 6px 10px 16px; min-height: 52px; border: 0; background: none; font-family: inherit; text-align: left; color: var(--text); cursor: pointer; }
.pl-z-kunde { display: flex; flex-direction: column; min-width: 0; }
.pl-z-betrag { font-size: 13.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.pl-z-termin, .pl-z-seit { font-size: 12.5px; color: var(--text2); }
.pl-z-termin.pl-chip-heute { color: var(--green-text); font-weight: 700; background: none; }
.pl-z-termin.pl-chip-ueberfaellig { color: var(--red-text); font-weight: 700; background: none; }
.pl-z-wer { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); min-width: 0; }
.pl-z-wer > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-pille { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--bg3); font-size: 12px; font-weight: 700; color: var(--text); }
.pl-zeile .pl-k-mehr { margin-right: 10px; }
.pl-liste-leer { margin: 0; padding: 26px; text-align: center; font-size: 13px; color: var(--text2); }

/* ── Platzhalter, solange es noch keinen Stand gibt ────────────────────────────────────────────────────────────
   In der Form des Kommenden; dazu ein Schimmer (transform). Puls und Flaeche wie im Paket „laden" — ladePuls und
   (fuer den Stand vor dem Zusammenfuehren) kalPuls; ein Name ohne @keyframes bleibt wirkungslos (Probe E6). */
.pl-karte.pl-platz { min-height: 92px; padding: 14px; display: flex; flex-direction: column; gap: 9px; box-shadow: none; overflow: hidden; }
.pl-karte.pl-platz span, .pl-platz-kopf { display: block; height: 12px; border-radius: 6px; background: var(--lade-flaeche, var(--bg4));
  animation: ladePuls 1.2s ease-in-out infinite, kalPuls 1.2s ease-in-out infinite; }
@supports (color: color-mix(in srgb, red 50%, blue)) { .pl-karte.pl-platz span, .pl-platz-kopf { --lade-flaeche: color-mix(in srgb, var(--text) 10%, transparent); } }
.pl-karte.pl-platz span:first-child { width: 72%; height: 13px; }
.pl-karte.pl-platz span:nth-child(2) { width: 50%; }
.pl-karte.pl-platz span:last-child { width: 30%; height: 20px; border-radius: 10px; }
.pl-karte.pl-platz::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--bg2) 70%, transparent) 50%, transparent 80%); animation: plSchimmer 1.6s ease-in-out infinite; }
.pl-platz-kopf { width: 55%; height: 14px; margin: 4px 0 6px; }
.pl-platz-spalte .pl-spalte-kopf { display: block; }
.pl-platz-spalte::before { display: none; }

/* ── Fenster, Paneel, Blaetter (iqModal) ──────────────────────────────────────────────────────────────────── */
.modal-overlay.pl-ov > .modal.pl-fenster, .modal-overlay.pl-ov > .modal.pl-paneel { animation: none; }
.modal-overlay.pl-ov > .modal.pl-fenster { border-radius: 22px; padding: 22px 22px 18px; }
.pl-griff { display: none; }
#pl-blatt .pl-titel { margin: 0 0 3px; font-size: 18px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; letter-spacing: -.01em; }
#pl-blatt .pl-satz { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--text2); overflow-wrap: anywhere; }
#pl-blatt .pl-label { display: block; margin: 0 0 7px; font-size: 12px; font-weight: 700; color: var(--text2); }
#pl-blatt input[type="text"], #pl-blatt input[type="search"], #pl-blatt textarea, #pl-blatt select { width: 100%; padding: 9px 12px; border: 1px solid var(--border2); border-radius: 10px;
  background: var(--bg); color: var(--text); font-family: inherit; font-size: 14px; transition: border-color var(--dur-fast), box-shadow var(--dur); }
#pl-blatt input::placeholder, #pl-blatt textarea::placeholder { color: var(--platzhalter); }
#pl-blatt input:focus, #pl-blatt textarea:focus, #pl-blatt select:focus { outline: none; border-color: var(--accent2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 20%, transparent); }
#pl-blatt textarea { resize: vertical; min-height: 78px; line-height: 1.45; }
#pl-blatt .pl-hinweis { margin-top: 10px; font-size: 13px; color: var(--red-text); }
#pl-blatt .pl-hinweis:empty { display: none; }
#pl-blatt .pl-fuss { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 18px; }
#pl-blatt .pl-fuss-links { display: flex; flex-wrap: wrap; gap: 8px; margin-right: auto; }
#pl-blatt .pl-fuss-links:empty { display: none; }
#pl-blatt .pl-entfernen { color: var(--red-text); }
#pl-blatt .pl-link { display: inline-flex; align-items: center; margin-left: 8px; padding: 0; border: 0; background: none; color: var(--accent2); font-family: inherit; font-size: 13px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Grund fuer „Verloren" */
.pl-grund-kopf { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.pl-grund-zeichen { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--red-bg); color: var(--red-text); flex: 0 0 auto; }
.pl-chip-reihe { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 16px; }
.pl-chip-wahl { min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border2); background: var(--bg2); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.pl-chip-wahl:hover { border-color: color-mix(in srgb, var(--accent2) 45%, var(--border2)); }
.pl-chip-wahl.an { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Seitenpaneel (PC): rechts, volle Hoehe mit Rand; das Blatt am Handy siehe unten. */
@media (min-width: 769px) {
  .modal-overlay.pl-paneel-ov { justify-content: flex-end; align-items: stretch; padding: 12px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
  .modal-overlay.pl-paneel-ov > .modal.pl-paneel { max-width: 480px !important; max-height: none; height: 100%; padding: 0; border-radius: 22px; overflow-y: auto;
    box-shadow: -20px 0 60px rgba(5, 28, 44, .22); border: 1px solid var(--border2); }
}
.pl-paneel-inhalt { display: flex; flex-direction: column; min-height: 100%; }
.pl-paneel-kopf { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 18px 16px 14px 20px;
  background: color-mix(in srgb, var(--bg2) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.pl-paneel-namen { flex: 1 1 auto; min-width: 0; }
#pl-blatt .pl-paneel-namen .pl-satz { margin: 0; }
.pl-paneel-zu { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: var(--bg3); color: var(--text2); cursor: pointer;
  transition: background-color var(--dur-fast), transform var(--dur) var(--pl-feder); }
.pl-paneel-zu:hover { color: var(--text); transform: rotate(90deg); }
.pl-paneel .pl-abschnitt { padding: 16px 20px 0; }
.pl-paneel .pl-hinweis, .pl-paneel .pl-fuss { margin-left: 20px; margin-right: 20px; }
#pl-blatt.pl-paneel-inhalt > .pl-fuss { position: sticky; bottom: 0; margin: auto 0 0; padding: 14px 20px 18px; background: var(--bg2); border-top: 1px solid var(--border); }
.pl-wahl-reihe { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-wahl { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 12px 5px 10px; border-radius: 999px; border: 1px solid var(--border2); background: var(--bg2);
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--pl-kurve); }
.pl-wahl:hover { border-color: color-mix(in srgb, var(--pl-farbe) 60%, var(--border2)); }
.pl-wahl:active { transform: scale(.96); }
.pl-wahl.an { background: color-mix(in srgb, var(--pl-farbe) 14%, var(--bg2)); border-color: var(--pl-farbe); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pl-farbe) 16%, transparent); }
.pl-wahl:disabled { cursor: progress; }
.pl-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pl-betrag-feld { position: relative; }
.pl-betrag-feld input { padding-right: 30px !important; font-weight: 800; font-variant-numeric: tabular-nums; }
.pl-euro { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 700; color: var(--text2); pointer-events: none; }
.pl-status-zeile { min-height: 20px; margin-top: 6px; }
.pl-speichert { font-size: 12px; font-weight: 700; color: var(--green-text); }
.pl-wer-wert { display: flex; align-items: center; gap: 9px; min-height: 40px; font-size: 14px; font-weight: 600; color: var(--text); }
#pl-blatt .pl-b-zeile { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px; margin-top: 10px; font-size: 13px; }
#pl-blatt .pl-b-wort { font-size: 12px; font-weight: 700; color: var(--text2); padding-top: 1px; }
#pl-blatt .pl-b-wert { color: var(--text); overflow-wrap: anywhere; white-space: pre-line; }
.pl-angaben:empty { display: none; }
.pl-zeitleiste { list-style: none; margin: 2px 0 6px; padding: 0 0 0 4px; position: relative; }
.pl-zeitleiste::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--border2); }
.pl-zl-punkt { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 4px 0 8px 24px; font-size: 13px; animation: plAuf .45s var(--pl-kurve) backwards; }
.pl-zl-punkt:nth-child(2) { animation-delay: 50ms; } .pl-zl-punkt:nth-child(3) { animation-delay: 100ms; } .pl-zl-punkt:nth-child(n+4) { animation-delay: 140ms; }
.pl-zl-punkt::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg2); border: 2px solid var(--border2); }
.pl-zl-jetzt::before { border-color: var(--accent2); background: var(--accent2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent2) 20%, transparent); }
.pl-zl-punkt.pl-art-gewonnen::before { border-color: var(--green); background: var(--green); }
.pl-zl-punkt.pl-art-verloren::before { border-color: var(--red); }
.pl-zl-wort { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.pl-zl-zeit { color: var(--text2); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Aufnehmen („+" und Termine ohne Karte) */
.pl-aufnehmen-liste { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; }
.pl-aufnehmen-kopf { padding: 12px 2px 6px; font-size: 12px; font-weight: 700; color: var(--text2); }
.pl-aufnehmen-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--border); }
.pl-a-wer { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.pl-aufnehmen-knopf { min-height: 32px; padding: 5px 12px; }
.pl-aufnehmen-leer { padding: 16px 2px; font-size: 13px; color: var(--text2); }

/* Phasen bearbeiten */
#pl-blatt .pl-ph-liste { list-style: none; margin: 4px 0 0; padding: 0; }
#pl-blatt .pl-ph-zeile { margin-top: 12px; }
#pl-blatt .pl-ph-reihe { display: flex; gap: 6px; align-items: center; }
#pl-blatt .pl-ph-reihe input { flex: 1 1 auto; min-width: 0; }
#pl-blatt .pl-ph-knopf { flex: 0 0 auto; min-width: 38px; min-height: 38px; border-radius: 10px; border: 1px solid var(--border2); background: var(--bg2); color: var(--text);
  font-family: inherit; font-size: 15px; cursor: pointer; }
/* Gesperrt (erste Zeile ↑, letzte ↓, Phase mit Karten ✕): die ganze Flaeche zuruecknehmen (Bild vom 15.10.2026). */
#pl-blatt .pl-ph-knopf:disabled { color: var(--text3); cursor: not-allowed; background: var(--bg3); opacity: .45; }
#pl-blatt .pl-ph-voll { margin-top: 4px; font-size: 12px; color: var(--text2); }
#pl-blatt .pl-ph-plus { margin-top: 12px; }

/* ── Handy-Blatt-Menue ─────────────────────────────────────────────────────────────────────────────────────── */
.pl-menue-liste { display: flex; flex-direction: column; margin-top: 6px; }
.pl-menue-blatt .pl-menue-punkt { min-height: 48px; font-size: 15px; }
.pl-menue-blatt .pl-abbrechen { display: flex; width: 100%; min-height: 48px; margin-top: 10px; }

/* ── Reiter am Handy ──────────────────────────────────────────────────────────────────────────────────────── */
.pl-reiter { display: none; }

/* ── Design „Liquid Glass": Tiefe, Licht, Glas ─────────────────────────────────────────────────────────────── */
.pl-design-glass .pl-seite::before { content: ""; position: absolute; inset: -40px 0 auto;   /* seitlich nicht ueber den Rand: am Handy rollte die Seite sonst 8 px quer (Probe S3) */
  height: 420px; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 60% at 15% 20%, color-mix(in srgb, var(--accent2) 7%, transparent), transparent 70%),
    radial-gradient(35% 55% at 85% 10%, color-mix(in srgb, var(--purple) 11%, transparent), transparent 70%); filter: blur(10px); }
/* Glas OHNE backdrop-filter an den Spalten: die Unschaerfe ueber grosse Flaechen kostete beim Ziehen jedes zweite Bild
   (gemessen 15.10.2026, Chromium: 144 von 338 Bildabstaenden ueber 20 ms mit, 0 von 454 ohne). Das Glas entsteht aus
   durchscheinender Flaeche, Lichtkante und Verlauf; geblurrt werden nur die kleinen schwebenden Teile. */
.pl-design-glass .pl-spalte { background: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 78%, transparent), color-mix(in srgb, var(--bg2) 52%, transparent));
  border-color: color-mix(in srgb, var(--bg2) 70%, var(--border2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 30px rgba(5, 28, 44, .06); }
body.dark .pl-design-glass .pl-spalte { background: color-mix(in srgb, var(--bg2) 62%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .25); }
.pl-design-glass .pl-spalte::before { left: 0; right: 0; top: 0; height: 90px; border-radius: var(--pl-r) var(--pl-r) 0 0; opacity: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pl-farbe, transparent) 14%, transparent), transparent); }
.pl-design-glass .pl-karte { background: color-mix(in srgb, var(--bg2) 90%, transparent); border-color: color-mix(in srgb, var(--bg2) 50%, var(--border2)); }
.pl-design-glass .pl-anzahl { background: color-mix(in srgb, var(--bg2) 80%, transparent); }
.pl-design-glass .pl-suche-feld input, .pl-design-glass .pl-schalter { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pl-design-glass .pl-schalter { background: color-mix(in srgb, var(--bg2) 60%, transparent); }

/* ── Design „Modern": klar, flach, feine Linien ─────────────────────────────────────────────────────────────── */
.pl-design-modern .pl-spalte { background: transparent; border-color: transparent; }
.pl-design-modern .pl-spalte::before { left: 6px; right: auto; width: 26px; height: 3px; top: 6px; border-radius: 3px; }
.pl-design-modern .pl-karte { box-shadow: 0 1px 2px rgba(5, 28, 44, .06); border-color: var(--border2); }
.pl-design-modern .pl-brett-zug .pl-spalte { border-color: var(--border2); }
.pl-design-modern .pl-spalte::after { background: color-mix(in srgb, var(--pl-farbe) 6%, transparent); }

/* ── Design „Klassik": Kaesten mit Rahmen, weniger Rundung, Farbe als Streifen ──────────────────────────────── */
.pl-design-klassik .pl-seite { --pl-r: 8px; --pl-r-karte: 6px; }
.pl-design-klassik .pl-spalte { background: var(--bg2); border: 1px solid var(--border2); }
.pl-design-klassik .pl-spalte::before { left: 0; right: 0; height: 4px; border-radius: var(--pl-r) var(--pl-r) 0 0; }
.pl-design-klassik .pl-karte { background: var(--bg); box-shadow: none; border-color: var(--border2); }
.pl-design-klassik .pl-karte::before { opacity: 1; top: 0; bottom: 0; left: 0; width: 3px; border-radius: var(--pl-r-karte) 0 0 var(--pl-r-karte); }
.pl-design-klassik .pl-kopf h2 { font-weight: 700; letter-spacing: 0; }

/* ── Handy ────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pl-kopf { gap: 10px; margin-bottom: 12px; }
  .pl-kopf-titel { width: 100%; gap: 6px 18px; }
  .pl-kopf h2 { font-size: 22px; width: 100%; }
  .pl-kennzahlen { gap: 16px; width: 100%; }
  .pl-kennzahl-zahl { font-size: 17px; }
  .pl-werkzeuge { width: 100%; }
  .pl-suche-feld { flex: 1 1 150px; }
  .pl-suche-feld input, .pl-suche-feld input:focus { width: 100%; min-height: 44px; font-size: 16px; }
  .pl-schalter-knopf { min-height: 40px; padding: 6px 16px; }
  .pl-schalter { padding: 2px; }
  .pl-schalter-licht { top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); }
  .pl-schalter-knopf { min-height: 44px; }
  .pl-knopf-leise, .pl-knopf-voll { min-height: 44px; }
  #pl-phasen-knopf { min-height: 44px; }
  .pl-hinweis-termine { border-radius: 18px; padding: 10px 12px; }
  .pl-hinweis-knoepfe { width: 100%; }
  .pl-tipp { padding: 6px 6px 6px 10px; gap: 10px; }
  .pl-tipp-zu { min-height: 44px; min-width: 52px; }
  .pl-hinweis-knoepfe .pl-knopf-leise, .pl-hinweis-knoepfe .pl-knopf-voll { min-height: 44px; flex: 1 1 auto; }

  .pl-reiter:not([hidden]) { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .pl-reiter::-webkit-scrollbar { display: none; }
  .pl-reiter-knopf { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 14px 6px 12px; border-radius: 22px; border: 1px solid var(--border2);
    background: var(--bg2); color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; scroll-snap-align: center;
    transition: background-color var(--dur) var(--pl-kurve), border-color var(--dur), transform var(--dur-fast) var(--pl-kurve), box-shadow var(--dur); }
  .pl-reiter-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--pl-farbe); }
  .pl-reiter-zahl { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--bg3); font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; }
  .pl-reiter-knopf.an { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); }
  .pl-reiter-knopf.an .pl-reiter-zahl { background: color-mix(in srgb, var(--accent-ink) 20%, transparent); }
  .pl-reiter-knopf.pl-ziel { transform: scale(1.08); border-color: var(--pl-farbe); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pl-farbe) 30%, transparent); }
  .pl-reiter-knopf:active { transform: scale(.95); }

  /* Die Spalten liegen nebeneinander und rasten beim Wischen ein (mit Schwung). */
  /* Seitenabstand = Ueberstand: jede Spalte (auch die erste und die letzte) rastet MITTIG ein, links und rechts
     schauen die Nachbarn 14 px herein. */
  .pl-brett { gap: 10px; padding: 2px 24px 14px; margin: 0; scroll-snap-type: x mandatory; scroll-padding: 0 24px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .pl-brett::-webkit-scrollbar { display: none; }
  .pl-spalte { flex: 0 0 100%; max-width: none; min-height: calc(100vh - 330px); scroll-snap-align: center; scroll-snap-stop: always; }
  .pl-spalte-kopf { position: static; }
  .pl-plus { width: 44px; height: 44px; }
  .pl-k-haupt { min-height: 72px; padding-right: 50px; }
  .pl-k-aktionen { top: 4px; right: 4px; bottom: auto; padding: 0; }
  .pl-k-schnell { width: 44px; height: 44px; }
  .pl-k-titel { font-size: 15px; }
  .pl-k-betrag { font-size: 14px; }

  .pl-liste-kopf { display: none; }
  .pl-zeile-haupt { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; min-height: 64px; }
  .pl-zeile-haupt .pl-pille { grid-column: 1; }
  .pl-zeile-haupt .pl-z-betrag { grid-column: 2; grid-row: 1; justify-self: end; }
  .pl-zeile-haupt .pl-z-termin { grid-column: 2; grid-row: 2; justify-self: end; }
  .pl-zeile-haupt .pl-z-wer, .pl-zeile-haupt .pl-z-seit { display: none; }
  .pl-zeile .pl-k-mehr { width: 44px; height: 44px; margin-right: 4px; }

  .pl-ablage { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); transform: none; gap: 8px; padding: 8px; border-radius: 20px; }
  .pl-ablage-ziel { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 4px; padding: 8px 4px; min-height: 76px; font-size: 13px; justify-content: center; }
  .pl-meldung { bottom: calc(71px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
  .pl-rueckgaengig, .pl-meldung-zu { min-height: 44px; min-width: 44px; justify-content: center; }
  .pl-taste { display: none; }

  /* Blaetter von unten: der Griff ist der von styles.css (::before), Wischen nach unten schliesst. */
  .modal-overlay.pl-ov > .modal.pl-fenster, .modal-overlay.pl-ov > .modal.pl-paneel { border-radius: 24px 24px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); touch-action: pan-y; }
  .pl-paneel-kopf { padding: 6px 0 12px; margin: 0; background: var(--bg2); touch-action: none; }   /* am Kopf greift der Finger das Blatt (plWischZu) */
  .pl-menue-blatt > .pl-titel { touch-action: none; }
  .pl-paneel .pl-abschnitt { padding: 14px 0 0; }
  .pl-paneel .pl-hinweis { margin-left: 0; margin-right: 0; }
  .pl-paneel .pl-fuss { padding: 12px 0 calc(4px + env(safe-area-inset-bottom)); margin-top: 16px; }
  .pl-felder { grid-template-columns: 1fr; }
  #pl-blatt input[type="text"], #pl-blatt input[type="search"], #pl-blatt textarea, #pl-blatt select { font-size: 16px; }   /* sonst zoomt das iPhone */
  #pl-blatt .pl-wahl, #pl-blatt .pl-ph-knopf, #pl-blatt .pl-chip-wahl { min-height: 44px; min-width: 44px; }
  #pl-blatt .pl-b-zeile { grid-template-columns: 1fr; gap: 2px; }
  #pl-blatt .pl-link { min-height: 44px; margin-left: 0; display: flex; }
  #pl-blatt .pl-aufnehmen-knopf, .pl-paneel-zu { min-height: 44px; min-width: 44px; }
  .modal-overlay > .modal #pl-blatt > .pl-fuss { position: sticky; bottom: 0; z-index: 2; background: var(--bg2); padding-top: 12px; margin-top: 12px;
    box-shadow: 0 calc(17px + env(safe-area-inset-bottom)) 0 var(--bg2); }
  .modal-overlay > .modal #pl-blatt > .pl-fuss .pl-knopf-leise, .modal-overlay > .modal #pl-blatt > .pl-fuss .pl-knopf-voll { min-height: 44px; }
  .pl-design-glass .pl-seite::before { height: 300px; }
}

/* ── Bewegungen ───────────────────────────────────────────────────────────────────────────────────────────── */
@keyframes plAuf { from { opacity: .35; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes plSpalteAuf { from { opacity: .35; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes plSchimmer { to { transform: translateX(100%); } }
@keyframes plSchweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes plAtmen { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.82); opacity: .75; } }
@keyframes plGlanzBahn { from { transform: translateX(-120%) skewX(-12deg); } to { transform: translateX(260%) skewX(-12deg); } }
/* Karte -> Paneel: kurz (waehrend des Uebergangs nimmt die Seite keine Klicks an — 0,8 s waren zu lang, Probe E5). */
::view-transition-group(pl-detail) { animation-duration: .36s; animation-timing-function: cubic-bezier(.2, .9, .25, 1.04); }
::view-transition-old(pl-detail), ::view-transition-new(pl-detail) { animation-duration: .26s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@media (prefers-reduced-motion: reduce) {
  .pl-karte, .pl-karte:hover, .pl-karte.pl-drueckt, .pl-karte.pl-gehoben { transform: none !important; }
  .pl-lb-k1, .pl-lb-k2, .pl-lb-k3, .pl-hinweis-licht, .pl-karte.pl-platz::after { animation: none; }
  .pl-karte.pl-platz span, .pl-platz-kopf { animation: none; }
  .pl-schalter-licht, .pl-balken-fuellung { transition: none; }
}

/* ── Ohne Zustimmung (16.10.2026): nur der Satz, sonst nichts von der Pipeline ── */
.pl-ohne-zustimmung .pl-werkzeuge, .pl-ohne-zustimmung .pl-kennzahlen, .pl-ohne-zustimmung .pl-brett, .pl-ohne-zustimmung .pl-liste,
.pl-ohne-zustimmung .pl-reiter, .pl-ohne-zustimmung .pl-hinweis-termine, .pl-ohne-zustimmung .pl-leer { display: none !important; }
.pl-zustimmung { max-width: 34em; margin: 20px 0; font-size: 14px; line-height: 1.6; color: var(--text2); }
/* Die Karte fuer den Admin (17.10.2026): ruhig, eine Flaeche, der Knopf ist der eine Weg. Farbe als Schrift nur ueber
   --red-text (pruef-farben-app.js). */
.pl-zustimmung[data-form="karte"] { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; color: var(--text); }
.pl-zust-titel { margin: 0 0 8px; font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--text); }
.pl-zust-text { margin: 0 0 6px; }
.pl-zust-texte { margin: 0 0 12px; padding: 0; list-style: none; }
.pl-zust-texte li { border-bottom: 1px solid var(--border); }
.pl-zust-texte li:last-child { border-bottom: 0; }
/* Schrift in --text mit Unterstrich: die Akzentfarbe ist je Design Gold — auf hellem Grund unter 3:1. 44 px Zeile (Finger). */
.pl-zust-texte a { display: flex; align-items: center; min-height: 44px; color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pl-zust-klein { margin: 0 0 14px; font-size: 13px; color: var(--text2); }
.pl-zust-fehler { margin: 0 0 12px; font-size: 13px; color: var(--red-text); }
.pl-zust-knopf { min-height: 44px; }
@media (max-width: 768px) { .pl-zustimmung[data-form="karte"] { padding: 16px; } .pl-zust-knopf { width: 100%; justify-content: center; } }

/* ── Je Mitarbeiter (16.10.2026): eine schlichte Tabelle im Fenster; am schmalen Handy rollt sie in sich, nicht die Seite ── */
.pl-aw-rahmen { overflow-x: auto; margin: 4px 0 12px; }
.pl-aw { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.pl-aw th, .pl-aw td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.pl-aw thead th { font-size: 12px; font-weight: 600; color: var(--text2); }
.pl-aw tbody th { font-weight: 600; white-space: normal; min-width: 8em; }
.pl-aw .pl-aw-zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Protokoll des Schalters „Auswertung je Mitarbeiter" auf Mein Konto (16.10.2026) ── */
.pl-prot { margin: 8px 0 0 28px; max-width: 532px; font-size: 12px; line-height: 1.5; color: var(--text2); }
.pl-prot-satz { margin: 0; }
.pl-prot-alle summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--text); font-weight: 600; }
.pl-prot-alle ul { margin: 0; padding-left: 18px; }