/* =============================================================
   Website-Verwaltung — Oberfläche

   Aufbau und Bauteile sind aus dem PersonalDeck übernommen: dieselbe
   Schublade links, dieselbe Kopfzeile, dieselben Karten, Kennzahlen,
   Tabellen und Statusfarben. Wer beide Systeme benutzt, soll keinen
   Bruch bemerken — nur andere Inhalte.

   Farben, Schriften, Rundungen und Abstände stehen in tokens.css.
   ============================================================= */

/* =============================================================
   PersonalDeck — Oberfläche nach der Designvorlage 08/2026
   Heller Seitengrund, eine große weiße Arbeitskarte, innere
   Karten mit feinen Linien und Radius 14, runde Status-Pills,
   helle Navigationsspalte mit Gruppen und weißem Aktiv-Chip.
   Barlow Semi Condensed für Headlines/Zahlen/Buttons,
   Barlow Condensed für Eyebrows, Lato für Text.
   ============================================================= */

/* Ampel-Aliase auf die Statusfarben der Vorlage */
:root {
  --amp-gruen: var(--st-gruen); --amp-gruen-bg: var(--st-gruen-bg);
  --amp-gelb:  var(--st-amber); --amp-gelb-bg:  var(--st-amber-bg);
  --amp-rot:   var(--st-rot);   --amp-rot-bg:   var(--st-rot-bg);
  --amp-neutral: var(--st-neutral); --amp-neutral-bg: var(--st-neutral-bg);
}

*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; height:100%; overflow-x:hidden; }
body {
  margin:0; height:100%; background:var(--pd-grund); color:var(--spn-tief);
  font-family:var(--spn-font-text); font-size:var(--spn-text); line-height:var(--spn-zeilenabstand);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:var(--spn-font-display); font-weight:700; line-height:1.2; margin:0; color:var(--spn-tief); }
a { color:var(--spn-blau); text-decoration:none; }
a:hover { color:var(--spn-marine); text-decoration:underline; text-underline-offset:2px; }
.icon { width:17px; height:17px; flex-shrink:0; }
:focus-visible { outline:2px solid var(--spn-blau); outline-offset:2px; }
/* Zehn Punkte breit und satt eingefaerbt stand der Balken als Streifen neben
   der Anwendung. Schlanker und ruhiger: Der Griff traegt seinen Abstand selbst,
   die Bahn bleibt durchsichtig. */
* { scrollbar-width:thin; scrollbar-color:var(--spn-blau-20) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
  background:var(--spn-blau-20); border-radius:999px;
  border:3px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover { background:var(--spn-blau-40); background-clip:content-box; }

/* Eyebrow / kleine Labels */
.mono-label {
  font-family:var(--spn-font-subline); font-weight:500; font-size:12.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--spn-meta); margin:0;
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  font-family:var(--spn-font-display); font-size:14px; font-weight:700;
  min-height:40px; padding:0 18px; border:1px solid var(--spn-blau-20);
  border-radius:var(--r-btn); background:var(--pd-karte); color:var(--spn-blau); cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.btn:hover { background:var(--spn-blau-10); }
/* Buttons mit Symbol: die Beschriftung steht exakt in der Button-Mitte,
   das Symbol daneben - sonst schiebt es den Text sichtbar nach rechts. */
.btn:has(> .icon:first-child) { position:relative; padding-left:40px; padding-right:40px; }
.btn:has(> .icon:first-child) > .icon:first-child {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
}
.panel__head .btn:has(> .icon:first-child) { padding-left:34px; padding-right:34px; }
.panel__head .btn:has(> .icon:first-child) > .icon:first-child { left:11px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.btn--primary { background:var(--flaeche-rot); color:var(--auf-marke); border-color:var(--flaeche-rot); }
.btn--primary:hover { background:var(--spn-rot-dkl); border-color:var(--spn-rot-dkl); }
/* Zustimmen ist grün, nicht rot - Rot ist im Haus die Farbe für Abbruch und Löschen */
.btn--gut { background:var(--st-gruen); color:var(--auf-status); border-color:var(--st-gruen); }
.btn--gut:hover { background:var(--spn-gruen); border-color:var(--spn-gruen); }
.btn--stop { background:transparent; color:var(--st-rot); border-color:var(--st-rot-bg); }
.btn--stop:hover { background:var(--st-rot-bg); border-color:var(--st-rot); }
.btn--ghost { background:transparent; border-color:transparent; }
.btn--ghost:hover { background:var(--pd-hover); }
.btn--block { width:100%; }
.btn--sm { min-height:32px; padding:0 13px; font-size:13px; border-radius:var(--r-md); }
.btn .icon { width:15px; height:15px; }

.iconbtn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:0; background:none; color:var(--spn-meta); cursor:pointer; border-radius:var(--r-md); }
.iconbtn:hover { color:var(--spn-blau); background:var(--pd-hover); }

/* ---- Formulare ---- */
.field { margin-bottom:15px; }
.field__label { display:block; font-size:var(--spn-label); font-weight:700; color:var(--spn-meta); margin-bottom:6px; }
.field__error { font-size:13px; color:var(--st-rot); margin:6px 0 0; padding:10px 12px; background:var(--st-rot-bg); border-radius:var(--r-md); }
.input, select.input {
  box-sizing:border-box;
  width:100%; min-height:42px; padding:8px 13px; font-family:var(--spn-font-text); font-size:15px;
  color:var(--spn-tief); background:var(--pd-karte); border:1px solid var(--pd-linie-2); border-radius:var(--r-md);
}
.input:focus { border-color:var(--spn-blau); outline-offset:1px; }
/* Rasterfelder schrumpfen von sich aus nie unter die Inhaltsbreite ihres
   Kindes. Ein Datumsfeld bringt in WebKit eine eigene Mindestbreite mit und
   sprengt damit die Spalte. */
.f-grid > .field, .f-grid > .check-row { min-width:0; }
.f-grid .input { max-width:100%; }
/* Datums- und Zeitfelder in Safari auf dem iPhone: Sie bringen die Breite ihres
   Systemwählers mit und behalten sie auch bei width:100%. Im Fenster liefen sie
   dadurch rechts über die Karte hinaus, während alle anderen Felder sauber
   endeten. Ohne Systemdarstellung richten sie sich nach dem Kasten; der Wähler
   selbst bleibt, er wird nur nicht mehr vom System vermessen. */
input[type="date"].input, input[type="time"].input,
input[type="datetime-local"].input, input[type="month"].input {
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; min-width:0; max-width:100%; text-align:left;
}
/* Auswahlfelder ohne Systemdarstellung, sonst weicht Safari bei Breite,
   Höhe und Innenabstand vom Eingabefeld ab. Pfeil daher selbst gezeichnet. */
select.input {
  cursor:pointer; appearance:none; -webkit-appearance:none;
  padding-right:36px;
  background-image:var(--pfeil-auswahl);
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px 8px;
  text-overflow:ellipsis;
}
select.input::-ms-expand { display:none; }
select.input:focus { border-color:var(--spn-blau); }
textarea.input { min-height:80px; resize:vertical; padding-top:10px; }
input[type="file"].input { padding:8px; font-size:13px; }
.check-row { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--spn-tief); margin:4px 0 14px; }
.check-row input { width:17px; height:17px; }

/* ---- Anmeldung ---- */
.login { min-height:100dvh; display:grid; place-items:center; padding:24px; background:var(--pd-grund); }
.login__box { width:100%; max-width:420px; background:var(--pd-karte); padding:38px 36px 32px; border-radius:var(--r-xl); box-shadow:var(--schatten-pop); }
/* Die Wortmarke der Anmeldung wird gesetzt, nicht als Bild geladen. Die
   Vorlage ist ein Druckerzeugnis: gegen Weiss gerechnet, mit weiss gefuellten
   Punzen in den Buchstaben und einem weissen Saum an jeder Kante. Auf Papier
   sieht man davon nichts, auf dunklem Grund alles. Als Text stimmt sie in
   beiden Modi von selbst und bleibt in jeder Groesse scharf. */
.login__marke { text-align:left; }
.login__title { font-size:21px; font-weight:700; text-align:center; margin:0 0 22px; }
.login__demo { margin-top:20px; padding-top:18px; border-top:1px solid var(--pd-linie); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.login__demo .mono-label { width:100%; margin-bottom:2px; }
.chipbtn {
  font-family:var(--spn-font-text); font-size:13px; font-weight:700; padding:8px 13px;
  border:1px solid var(--pd-linie-2); background:var(--pd-karte); color:var(--spn-blau); cursor:pointer; border-radius:var(--r-pill);
}
.chipbtn:hover { background:var(--spn-blau-10); border-color:var(--spn-blau-20); }
.login__karriere { display:block; text-align:center; margin-top:16px; font-size:13px; font-weight:700; color:var(--spn-blau); }
.login__brand { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:22px; }
.login__icon { width:54px; height:54px; object-fit:contain; }
.login__wordmark { font-size:30px; }
.login__brand .side__firm { font-size:13px; margin-top:3px; }

/* =============================== Grundgerüst */
/* Drei weisse Karten auf einem getoenten Grund - Schublade, Kopfzeile und
   Inhalt. Vorher war die Schublade durchsichtig und zeigte den Grund, waehrend
   rechts daneben zwei weisse Karten standen; die linke Spalte sah dadurch aus
   wie ein Rest, nicht wie ein Teil. Der Grund bleibt als gleichmaessige Fuge
   ringsum stehen. */
.app { display:flex; min-height:100dvh; gap:16px; padding:16px; }

/* ---- Navigationsspalte: hell, auf dem Seitengrund ---- */
.side {
  width:260px; flex:none; display:flex; flex-direction:column; gap:18px;
  padding:20px 14px 16px; position:sticky; top:16px; height:calc(100dvh - 32px);
  overflow-y:auto; background:var(--pd-karte); border-radius:var(--r-xl);
  box-shadow:var(--schatten-karte);
}
/* Die Zeilen duerfen beim Auf- und Zuklappen NICHT umbrechen. Sonst war der
   Markenblock waehrend der ganzen Bewegung 56,6 Punkte hoch (Firmenname ueber
   drei Zeilen) und schnappte erst bei 246 Punkten Spaltenbreite auf 38,8 -
   das ganze Menue darunter rutschte in einem Bild um 17,8 Punkte nach oben.
   Umbruch verboten, ueberstehender Text wird abgeschnitten: Dann ist die Hoehe
   von der ersten bis zur letzten Millisekunde dieselbe. */
.side__brand { display:flex; align-items:center; gap:10px; padding:0 4px;
  text-decoration:none; border-radius:var(--r-md); }
.side__brand:hover, .side__brand:focus { text-decoration:none; }
.side__brandtext { min-width:0; overflow:hidden; }
.side__wordmark, .side__firm { white-space:nowrap; }
/* Das Wappen steht frei - kein weißer Kasten hinter dem freigestellten Logo */
.side__icon { width:38px; height:38px; object-fit:contain; }
.side__wordmark { font-family:var(--spn-font-display); font-weight:800; font-size:19px; line-height:1; }
.side__wordmark span { color:var(--spn-marine); }
.side__wordmark b { color:var(--spn-rot); font-weight:800; }
.side__firm { font-family:var(--spn-font-subline); font-weight:400; font-size:11.5px; color:var(--spn-meta); letter-spacing:.04em; margin-top:2px; }
/* Dasselbe fuer die Menuebeschriftungen und Gruppentitel: Ein Umbruch bei
   halber Spaltenbreite verschoebe jeden Punkt darunter. */
.nav__item > span:not(.nav__badge), .nav__grptitel, .side__note { white-space:nowrap; }
.nav__item { overflow:hidden; }

/* Suchfeld in der Spalte */
.such { display:flex; flex:none; align-items:center; gap:8px; background:var(--pd-linie-2); border-radius:var(--r-md); padding:9px 12px; position:relative; border:1px solid transparent; }
.such:focus-within { background:var(--pd-karte); border-color:var(--spn-blau-20); }
.such__icon { width:14px; height:14px; color:var(--spn-meta); flex-shrink:0; }
.such__input { border:0; outline:0; font-family:var(--spn-font-text); font-size:13.5px; color:var(--spn-tief); width:100%; background:none; }
.such__input::placeholder { color:var(--spn-meta); }

.such-vorschau {
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--pd-karte); border:1px solid var(--pd-linie-2); border-radius:var(--r-lg); z-index:70;
  max-height:320px; overflow-y:auto; box-shadow:var(--schatten-pop);
}
.such-vorschau__item { display:flex; gap:9px; align-items:center; width:100%; text-align:left; padding:10px 12px; background:none; border:0; border-bottom:1px solid var(--pd-zeile); cursor:pointer; font-family:var(--spn-font-text); font-size:13px; color:var(--spn-tief); }
.such-vorschau__item:last-child { border-bottom:0; }
.such-vorschau__item:hover { background:var(--pd-hover); }
.such-vorschau__item .pill { flex-shrink:0; }
.such-vorschau__titel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.such-vorschau__leer { padding:12px; color:var(--spn-meta); font-size:13px; }
.such-vorschau__mehr { width:100%; padding:10px 12px; background:none; border:0; color:var(--spn-blau); font-weight:700; font-size:13px; cursor:pointer; font-family:var(--spn-font-text); text-align:center; }
.such-vorschau__mehr:hover { background:var(--pd-hover); }

/* Navigation in Gruppen */
.nav { display:flex; flex-direction:column; gap:18px; }
.nav__grp { display:flex; flex-direction:column; gap:2px; }
.nav__grptitel {
  font-family:var(--spn-font-subline); font-weight:500; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--spn-meta); padding:0 10px 7px;
}
.nav__item {
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-md);
  color:var(--pd-nav-text); font-size:13.5px;
}
.nav__item span { font-family:var(--spn-font-text); }
.nav__item .icon { width:17px; height:17px; opacity:.85; }
.nav__item:hover { background:var(--pd-linie-2); color:var(--spn-marine); text-decoration:none; }
.nav__item.active { background:var(--pd-karte); color:var(--spn-rot); font-weight:700; box-shadow:var(--schatten-aktiv); }
.nav__item.active .icon { opacity:1; }
.nav__badge {
  margin-left:auto; background:var(--flaeche-rot); color:var(--auf-marke); border-radius:var(--r-pill);
  min-width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; padding:0 5px;
}
.nav__badge--blau { background:var(--spn-blau-20); color:var(--spn-blau); }

/* Benutzerkarte */
.side__foot { margin-top:auto; display:flex; flex-direction:column; gap:10px; }
/* Seit „Mein Konto" dazugekommen ist, stehen zwei Verweise in der Karte.
   Nebeneinander drueckten sie den Namen weg - deshalb duerfen sie in eine
   zweite Zeile umbrechen. */
.side__note { font-size:11.5px; color:var(--spn-meta); margin:0; text-align:center; }

/* ---- Knopf zum Einklappen ----
   Er steht in der Kopfleiste, nicht in der Markenzeile. Dort nahm er der
   Firmenzeile so viel Breite weg, dass "Rettungsdienst Spree-Neisse GmbH"
   umbrach; ausserdem rollte er mit der Spalte weg, sobald das Menue lang war. */
.topbar__klapp { display:none; flex:none; }
@media (min-width:901px) { .topbar__klapp { display:inline-flex; } }

/* ---- Wechselschalter hell/dunkel ----
   Der Schalter zeigt den Zustand, der gerade gilt, auch wenn er vom
   Betriebssystem kommt und nicht gewaehlt wurde. aria-checked ist dabei
   die einzige Quelle: daran haengen Anzeige und Vorlesetext, damit beide
   nicht auseinanderlaufen koennen. */
@media (prefers-reduced-motion: reduce) {
  .side { transition:none; }
}
/* Beim Wechsel des Farbmodus aendert sich jede Flaeche gleichzeitig. Knoepfe
   und Karten haben eigene Ueberblendungen, die dann alle zusammen anlaufen -
   das flimmert. Fuer den einen Moment des Umschaltens werden sie deshalb
   stillgelegt; das Attribut setzt und entfernt die Anwendung selbst. */
:root[data-umschalten] *, :root[data-umschalten] *::before, :root[data-umschalten] *::after {
  transition:none !important;
}

/* ---- Eingeklappte Spalte ----
   Nur auf breiten Fenstern. Auf dem Telefon ist die Spalte eine Schublade,
   die ganz zur Seite faehrt - ein zweiter Klappzustand waere dort sinnlos
   und wuerde sich mit der Schublade beissen. */
@media (min-width:901px) {
  .side { transition:width var(--takt-lang) var(--kurve); }
  :root[data-menue="schmal"] .side { --rail:44px; width:68px; padding:22px 12px 18px; gap:14px; align-items:center; }
  :root[data-menue="schmal"] .side__brand { justify-content:center; padding:0; }
  :root[data-menue="schmal"] .side__brandtext,
  :root[data-menue="schmal"] .nav__grptitel,
  :root[data-menue="schmal"] .nav__item > span:not(.nav__badge),
  :root[data-menue="schmal"] .side__note { display:none; }
  /* Beim Ausklappen standen die Beschriftungen ab dem ersten Bild in voller
     Breite da, waehrend die Spalte noch 68 Punkte schmal war - sie ragten
     hinaus und die Spalte holte sie ein. Das las sich als Sprung.
     Jetzt blenden sie ein, waehrend die Spalte waechst: kurz verzoegert, damit
     zuerst Platz entsteht und dann die Schrift kommt. Beim Einklappen sind sie
     sofort weg (display:none) - das passt zur schrumpfenden Spalte.
     Eine Animation statt eines Uebergangs, weil `display` sich nicht
     ueberblenden laesst: Sobald das Element wieder angezeigt wird, laeuft sie. */
  .side__brandtext, .nav__grptitel,
  .nav__item > span:not(.nav__badge), .side__note {
    animation:beschriftung-ein var(--takt) var(--kurve-rein) 90ms both;
  }
  @keyframes beschriftung-ein {
    from { opacity:0; transform:translateX(-6px); }
    to   { opacity:1; transform:none; }
  }
  /* Die Gruppentitel tragen im breiten Menue die Gliederung. Faellt der Text
     weg, muss eine Linie sie uebernehmen, sonst laufen die Gruppen ineinander.
     Die Bedingung an den Vorgaenger verhindert einen Strich ueber der ersten
     sichtbaren Gruppe, wenn die davor ausgeblendet ist. */
  :root[data-menue="schmal"] .nav { width:100%; gap:12px; }
  :root[data-menue="schmal"] .nav__grp:not([hidden]) + .nav__grp { border-top:1px solid var(--pd-linie); padding-top:12px; }
  /* Quadratische Kacheln, keine hochkant stehenden Kapseln. Die Spalte richtet
     ihre Kinder mittig aus; ohne feste Groesse schrumpft ein Menuepunkt dabei
     auf die Breite seines Symbols (17 Punkte) und behaelt die Hoehe aus dem
     Innenabstand (35 Punkte) - der aktive Punkt stand dann als schmale,
     hochkante Kapsel um sein Symbol. Die Symbole selbst waren nie verzerrt,
     ihr Feld war es. */
  :root[data-menue="schmal"] .nav__item {
    width:var(--rail); height:var(--rail); padding:0; margin:0 auto;
    justify-content:center; position:relative;
  }
  /* Fuer die Ziffer ist kein Platz mehr. Der Zaehler wird zum Punkt, die Zahl
     steht dafuer im Kurzhinweis des Eintrags. */
  :root[data-menue="schmal"] .nav__badge {
    position:absolute; top:7px; right:7px; margin:0; min-width:0;
    width:8px; height:8px; padding:0; font-size:0; border-radius:50%;
  }
}
/* Das Symbol zeigt, was der Knopf tut: ein Fenster mit Menuespalte links und
   Inhalt rechts. Klappt das Menue ein, waechst die Inhaltsflaeche nach links
   und schiebt die Punkte an den Rand - dieselbe Bewegung wie draussen in der
   Anwendung. Gedreht wurde frueher der ganze Pfeil; das sagte nur "andersrum",
   nicht was passiert.

   Bewegt wird ueber transform, nicht ueber x/width: Geometrie als CSS-
   Eigenschaft kennen nicht alle Browser, transform kennt jeder. */
.klappicon { width:19px; height:19px; }
.klappicon__flaeche, .klappicon__punkte {
  transform-box:fill-box; transform-origin:right center;
  transition:transform var(--takt) var(--kurve);
}
.klappicon__punkte { transform-origin:center; }
/* Deutlich, nicht angedeutet: Die Inhaltsflaeche waechst um die halbe
   Menuespalte nach links, die Punkte ruecken an den Rand. Bei 22 Prozent sah
   man den Unterschied nur, wenn man ihn suchte. */
:root[data-menue="schmal"] .klappicon__flaeche { transform:scaleX(1.46); }
:root[data-menue="schmal"] .klappicon__punkte { transform:translateX(-1.5px); }
@media (prefers-reduced-motion:reduce) {
  .klappicon__flaeche, .klappicon__punkte { transition:none; }
}

/* ---- Hauptbereich ---- */
.main { flex:1; min-width:0; display:flex; flex-direction:column; gap:16px; padding:0; }
/* Die Kopfzeile: links die Suche, rechts Glocke, Modus und Profil.
   Der Seitentitel steht nicht mehr hier, sondern als Ueberschrift ueber dem
   Inhalt - dort hat er Platz und steht auch auf dem Telefon noch da, wo man
   ihn sucht. */
.topbar {
  display:flex; align-items:center; gap:10px; min-height:44px;
  background:var(--pd-karte); border-radius:var(--r-xl); padding:8px 10px;
  box-shadow:var(--schatten-flach);
}
.topbar__menu { display:none; }
/* Die Suche nimmt den freien Platz, hoert aber vor der halben Breite auf -
   ein Eingabefeld ueber einen ganzen Breitbildschirm liest sich nicht mehr
   als Feld, sondern als Balken. */
.topbar .such { flex:1 1 auto; max-width:520px; }
.such__zu { display:none; flex:none; border:0; background:none; padding:4px; cursor:pointer; color:var(--spn-meta); }
.such__zu .icon { width:16px; height:16px; }
.such__taste {
  flex:none; font-family:var(--spn-font-text); font-size:11px; font-weight:700;
  color:var(--spn-meta); background:var(--pd-zeile); border:1px solid var(--pd-linie);
  border-radius:var(--r-xs); padding:2px 6px; line-height:1.4; white-space:nowrap;
}
/* Ohne Suchfeld (Mitarbeiterkonten) rutschen die Bedienelemente trotzdem
   nach rechts statt in die Mitte. */
.kopfaktionen { display:flex; align-items:center; gap:8px; margin-left:auto; flex:none; }
.themebtn { background:none; border:0; color:var(--spn-meta); }
.themebtn:hover { color:var(--spn-blau); background:var(--pd-hover); }
.themebtn .icon { width:18px; height:18px; }
.themebtn__mond { display:none; }
.themebtn[aria-checked="true"] .themebtn__sonne { display:none; }
.themebtn[aria-checked="true"] .themebtn__mond { display:block; }

/* Profil: Bild, Name, Rolle, Pfeil - und darunter das Menue. */
.profil { position:relative; flex:none; }
.profil__knopf {
  display:flex; align-items:center; gap:10px; padding:4px 8px 4px 4px;
  background:none; border:0; border-radius:999px; cursor:pointer;
  font-family:var(--spn-font-text); color:var(--spn-tief); max-width:230px;
}
.profil__knopf:hover { background:var(--pd-hover); }
.profil__knopf:focus-visible { outline:2px solid var(--spn-blau); outline-offset:2px; }
.profil__avatar {
  width:34px; height:34px; flex:none; border-radius:50%;
  background:var(--flaeche-marine); color:var(--auf-marke);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--spn-font-display); font-weight:700; font-size:13px;
}
.profil__meta { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.profil__name { font-size:13px; font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.profil__rolle { font-size:11.5px; color:var(--spn-meta); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.profil__pfeil { width:14px; height:14px; flex:none; color:var(--spn-meta); transition:transform .15s ease; }
.profil__knopf[aria-expanded="true"] .profil__pfeil { transform:rotate(180deg); }
.profil__menue {
  position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:190px;
  background:var(--pd-karte); border:1px solid var(--pd-linie);
  border-radius:var(--r-md); box-shadow:var(--schatten-karte); padding:6px;
}
.profil__punkt {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:9px 10px; border:0; background:none; border-radius:var(--r-xs);
  font-family:var(--spn-font-text); font-size:13px; color:var(--spn-tief);
  cursor:pointer; text-decoration:none;
}
.profil__punkt:hover { background:var(--pd-hover); }
.profil__punkt .icon { width:16px; height:16px; color:var(--spn-meta); }
.profil__punkt--warn { color:var(--st-rot); }
.profil__punkt--warn .icon { color:var(--st-rot); }

/* Der Seitentitel, jetzt über dem Inhalt */
.seitenkopf { display:flex; align-items:baseline; gap:10px; padding:0 4px; }
.seitenkopf h1 {
  font-family:var(--spn-font-display); font-weight:700; font-size:22px;
  color:var(--spn-tief); margin:0; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bell { position:relative; background:var(--pd-karte); border:1px solid var(--pd-linie-2); border-radius:var(--r-md); width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--spn-tief); }
.bell:hover { background:var(--pd-hover); }
.bell .icon { width:16px; height:16px; }
/* Der Zaehler sass mit top:4 right:4 IM Knopf und deckte das Glockensymbol zur
   Haelfte zu - man sah die Zahl und musste raten, worauf sie sitzt. Er gehoert
   an die Ecke, halb daneben: Dann bleibt die Glocke eine Glocke.
   Der Ring in der Kartenfarbe trennt ihn sichtbar vom Knopf darunter. */
.bell__dot {
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:var(--flaeche-rot); border:2px solid var(--pd-karte);
  color:var(--auf-marke); font-size:10px; font-weight:700; line-height:14px; text-align:center;
  transform-origin:center;
  animation:zaehler-auf .42s cubic-bezier(.34, 1.36, .64, 1);
}
/* Auftauchen mit kurzem Nachfedern - die Zahl erscheint, waehrend man
   woanders hinsieht, und soll den Blick holen, ohne zu zappeln. */
@keyframes zaehler-auf {
  0%   { transform:scale(0) translate(-6px, 8px); opacity:0; filter:blur(2px); }
  55%  { opacity:1; filter:blur(0); }
  100% { transform:scale(1) translate(0, 0); opacity:1; filter:blur(0); }
}
@media (prefers-reduced-motion:reduce) { .bell__dot { animation:none; } }

/* ---- Bewegung in der Anwendung -------------------------------------------
   Sparsam und mit Grund. Was sich bewegt, soll zeigen, dass etwas Neues da ist -
   nicht schmuecken. Alles unter 250 ms, damit es beim zehnten Mal am Tag nicht
   als Warten auffaellt. Wer Bewegung abbestellt hat, bekommt keine (ganz unten). */

/* Ein Ansichtswechsel: der Inhalt kommt von unten herein statt hart zu stehen.
   Ohne Fuellmodus - danach traegt die Karte keine Transformation mehr, sonst
   waere sie Bezugsrahmen fuer alles, was fest positioniert ist. */
@keyframes ansicht-ein {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:none; }
}
.view > * { animation:ansicht-ein var(--takt) var(--kurve-rein); }

/* Ein Fenster oeffnet aus der Mitte heraus, statt zu erscheinen. */
@keyframes fenster-ein {
  from { opacity:0; transform:translateY(10px) scale(.985); }
  to   { opacity:1; transform:none; }
}
.modal[open] .modal__box { animation:fenster-ein var(--takt) var(--kurve-rein); }

/* Das Benachrichtigungsfenster und die Suchvorschau kommen von oben - sie
   haengen an ihrem Knopf und sollen von dort herunterklappen. */
@keyframes klappt-auf {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:none; }
}
.glocke-panel:not([hidden]), .such-vorschau:not([hidden]), .profil__menue:not([hidden]) {
  animation:klappt-auf var(--takt-kurz) var(--kurve-rein);
}

/* Die große weiße Arbeitskarte */
/* Die Fläche nimmt, was das Gerät hergibt: Auf dem großen Monitor ist mehr
   Platz für Raster und Tabellen, und den soll er auch nutzen. Die Lesebreite
   einzelner Absätze wird dort geregelt, wo Text steht — nicht durch eine
   Begrenzung der ganzen Seite. */
.view {
  background:var(--pd-karte); border-radius:var(--r-xl); box-shadow:var(--schatten-karte);
  padding:24px 26px 26px; width:100%; min-height:60vh;
}

/* ---- Hero-Kopf (Übersicht) ---- */
.hero { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.hero__text { flex:1; min-width:240px; }
.hero__eyebrow { font-family:var(--spn-font-subline); font-weight:500; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--spn-meta); }
.hero__titel { margin:4px 0 6px; font-family:var(--spn-font-display); font-weight:800; font-size:26px; color:var(--spn-tief); }
.hero__sub { margin:0; color:var(--spn-meta); font-size:13.5px; }
.hero__aktionen { display:flex; gap:10px; flex-wrap:wrap; }

/* ---- KPI-Karten (Übersicht: dunkle Innenkachel) ---- */
.kpix-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:16px; margin-bottom:22px; }
.kpix { border:1px solid var(--pd-linie); border-radius:var(--r-lg); padding:12px; display:flex; flex-direction:column; gap:10px; }
.kpix__kopf { display:flex; align-items:center; gap:8px; padding:2px 4px 0; }
.kpix__kopf .icon { width:15px; height:15px; color:var(--spn-blau); }
.kpix__label { font-weight:700; font-size:13px; color:var(--spn-tief); }
.kpix__kachel { background:var(--pd-kpi-verlauf); border-radius:var(--r-md); padding:16px 16px 14px; color:var(--auf-marke); }
.kpix__wert { font-family:var(--spn-font-display); font-weight:800; font-size:30px; line-height:1; font-variant-numeric:tabular-nums; }
.kpix__sub { font-size:12px; color:var(--auf-kachel); margin-top:8px; }
.kpix__kachel--warn { background:linear-gradient(135deg, #8F0C0C 0%, #BC1010 100%); }
.kpix__kachel--warn .kpix__sub { color:#F3C9C9; }

/* ---- Einfache Kennzahlen (Unterseiten) ---- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:14px; margin-bottom:20px; }
.kpi { background:var(--pd-karte); border:1px solid var(--pd-linie); border-radius:var(--r-lg); padding:14px 16px; }
.kpi__label { font-size:var(--spn-label); font-weight:700; color:var(--spn-meta); margin:0; }
.kpi__val { font-family:var(--spn-font-display); font-weight:800; font-size:28px; line-height:1.1; color:var(--spn-blau); margin:6px 0 0; font-variant-numeric:tabular-nums; }
.kpi__val.rot { color:var(--st-rot); }
.kpi__val.gelb { color:var(--st-amber); }
.kpi__sub { font-size:12px; color:var(--spn-meta); margin:4px 0 0; }
.kpi--accent { border-color:var(--pd-linie); }

/* ---- Panels: innere Karten ---- */
/* Der Innenabstand sitzt am Panel selbst, nicht an einem Innen-Element:
   So klebt kein Inhalt an der Kante, auch wenn er direkt im Panel steht.
   Tabellen holen sich die Breite mit negativen Rändern zurück — sie tragen
   ihren Abstand in den Zellen und sollen bis an den Rand laufen. */
.panel {
  background:var(--pd-karte); border:1px solid var(--pd-linie);
  border-radius:var(--r-lg); margin-bottom:16px; overflow:hidden;
  padding:0 18px 16px;
}
.panel__head { display:flex; align-items:center; justify-content:space-between; gap:12px 14px;
  padding:16px 0 12px; flex-wrap:wrap; }
/* Die Ueberschrift darf nicht mitten im Wort brechen, damit die Aktionen daneben ruhig stehen */
.panel__head > h2 { flex:1 1 auto; min-width:0; }
.panel__head .head-actions { flex:0 0 auto; margin-left:auto; }
.panel__head h2 { font-size:16px; font-weight:700; }
.panel__body { padding:0; }
.panel__body.flush { padding:0; margin:0 -18px; }

/* Tabellen und randlose Bänder laufen bis an die Panelkante */
.panel > table.data, .panel > .tablewrap, .panel > .balken {
  margin-left:-18px; margin-right:-18px; width:calc(100% + 36px);
}
.panel > table.data th:first-child, .panel > table.data td:first-child { padding-left:18px; }
.panel > table.data th:last-child, .panel > table.data td:last-child { padding-right:18px; }
.panel > .leer-hinweis { margin:0 -18px; }

/* Fließtext bleibt lesbar, auch wenn das Panel sehr breit wird:
   über 75 Zeichen je Zeile verliert das Auge die Zeilenanfänge. */
.panel > p, .panel > .karte-hinweis { max-width:78ch; }
/* min() statt einer festen Mindestbreite, sonst laufen die Karten auf sehr
   schmalen Schirmen über den Rand. */
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr)); gap:16px; }
.panel__head .btn { min-height:32px; padding:0 13px; font-size:13px; border-radius:var(--r-md); white-space:nowrap; }
.head-actions .btn, .filters .btn { white-space:nowrap; }
.head-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Überschrift über einer Gruppe von Karten (z. B. die zwei Arten von Prüfwegen) */
.abschnitt { font-size:15px; font-weight:700; color:var(--spn-marine); letter-spacing:.01em;
  margin:26px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--pd-linie); }
.abschnitt:first-child { margin-top:2px; }

/* ---- Status: runde Pills ---- */
.amp, .st {
  display:inline-flex; align-items:center; border-radius:var(--r-pill);
  padding:4px 10px; font-size:11.5px; font-weight:700; white-space:nowrap;
  font-family:var(--spn-font-text);
}
.amp.gruen { background:var(--st-gruen-bg); color:var(--st-gruen); }
.amp.gelb { background:var(--st-amber-bg); color:var(--st-amber); }
.amp.rot { background:var(--st-rot-bg); color:var(--st-rot); }
.amp.unbefristet { background:var(--st-neutral-bg); color:var(--st-neutral); }

.st.eingereicht, .st.offen, .st.in_pruefung, .st.pruefung { background:var(--st-amber-bg); color:var(--st-amber); }
.st.geprueft, .st.freigegeben, .st.interview { background:var(--st-blau-bg); color:var(--st-blau); }
.st.genehmigt, .st.bestaetigt, .st.gebucht, .st.zusage { background:var(--st-gruen-bg); color:var(--st-gruen); }
.st.abgelehnt, .st.absage { background:var(--st-rot-bg); color:var(--st-rot); }
.st.erfasst, .st.eingegangen { background:var(--st-neutral-bg); color:var(--st-neutral); }

.dot { width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dot.gruen { background:var(--st-gruen); } .dot.gelb { background:var(--st-amber); }
.dot.rot { background:var(--st-rot); } .dot.unbefristet { background:var(--spn-blau-20); }

.pill { display:inline-block; font-size:11.5px; font-weight:700; padding:3px 10px; background:var(--st-neutral-bg); color:var(--st-neutral); border-radius:var(--r-pill); }
.pill.pflicht { background:var(--st-rot-bg); color:var(--st-rot); }
.badge-faellig { display:inline-block; font-size:11px; font-weight:700; color:var(--st-rot); background:var(--st-rot-bg); border-radius:var(--r-pill); padding:2px 8px; margin-left:6px; }
.demo-hint { font-size:11.5px; font-weight:700; color:var(--st-amber); background:var(--st-amber-bg); border-radius:var(--r-pill); padding:2px 9px; }

/* ---- Tabellen ---- */
.tablewrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size:13px; }
table.data th {
  text-align:left; font-size:12px; font-weight:400; color:var(--spn-meta);
  padding:9px 12px; border-bottom:1px solid var(--pd-linie); white-space:nowrap;
}
table.data td { padding:11px 12px; border-bottom:1px solid var(--pd-zeile); vertical-align:middle; }
/* Die Kopfzeile muss derselben Kante folgen wie ihre Werte, sonst steht die
   Beschriftung auf breiten Schirmen weit neben der Spalte. */
table.data th.rechts, table.data td.rechts { text-align:right; margin-left:0; }
table.data tr:last-child td { border-bottom:0; }
table.data tbody tr.clickable { cursor:pointer; }
table.data tbody tr.clickable:hover { background:var(--pd-hover); }
.cell-name { font-weight:700; color:var(--spn-tief); font-size:13px; }
.cell-sub { font-size:11.5px; color:var(--spn-meta); }
.num { font-variant-numeric:tabular-nums; }
.geld { font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---- Filterleiste ---- */
.filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; align-items:center; }
/* Schiebt ein Element in einer Reihe nach rechts. Auf schmalen Schirmen wird
   daraus eine eigene Zeile, siehe Telefonteil am Dateiende. */
.rechts { margin-left:auto; }
/* Verweis im Fließtext, etwa unter einer Kachel */
.textlink { font-size:12.5px; font-weight:700; }
/* Eingabe- und Auswahlfelder einer Filterzeile sind exakt gleich groß */
.filters .input { min-height:38px; flex:0 0 220px; width:220px; max-width:220px; min-width:0; }
/* Ausnahme: das Suchfeld darf breiter werden, es trägt einen längeren Text */
.filters .input.search { flex:1 1 300px; width:auto; max-width:400px; }
/* Ein Zeitraum ist ein Wert, kein zweimal derselbe. Die beiden Felder stehen
   deshalb in einem eigenen Kasten und brechen nur gemeinsam um. Schmaler als
   ein gewoehnliches Filterfeld, damit die Leiste in einer Zeile bleibt. */
.filters__paar { display:grid; grid-template-columns:150px auto 150px; align-items:center;
  gap:7px; flex:0 0 auto; }
.filters .input--tag { width:100%; max-width:none; min-width:0; flex:none; }

/* Tabellenzellen, die nie umbrechen dürfen (Datum, Stundenzahl, Zeitraum) */
.nowrap { white-space:nowrap; }
/* Der Zeitraum einer mehrtägigen Veranstaltung: Datum, dahinter die Dauer */
.zeitraum__tage { margin-left:7px; font-size:11.5px; font-weight:700; color:var(--spn-meta);
  background:var(--pd-zeile); border-radius:var(--r-pill); padding:2px 7px; white-space:nowrap; }
/* Lange Pflichtbereiche bleiben einzeilig; der volle Name steht im Tooltip */
.spalte-bereich { max-width:180px; }
.pill--kurz { display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; vertical-align:middle; }
@media (max-width:640px) {
  /* Kurze Auswahlfelder zu zweit, lange über die volle Breite, das Suchfeld
     immer voll. Die genauen Größen stehen im Telefonblock am Dateiende. */
  .filters select.input { flex:1 1 auto; width:auto; max-width:100%; min-width:calc(50% - 5px); }
  .filters .search { flex:1 1 100%; width:100%; max-width:none; }
  .filters__aktionen { width:100%; margin-left:0; }
  .filters__aktionen .btn { flex:1; justify-content:center; }
}

/* ---- Personalakte ---- */
.backlink { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--spn-meta); margin-bottom:14px; cursor:pointer; background:none; border:0; padding:6px 10px 6px 6px; font-family:var(--spn-font-text); border-radius:var(--r-md); }
.backlink:hover { color:var(--spn-blau); background:var(--pd-hover); }
.person-head { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:20px; }
.avatar { width:52px; height:52px; border-radius:50%; background:var(--spn-blau-10); color:var(--spn-blau); display:grid; place-items:center; font-family:var(--spn-font-display); font-weight:700; font-size:17px; flex-shrink:0; }
.person-head__meta h2 { font-size:20px; font-weight:800; }
.person-head__meta p { margin:3px 0 0; color:var(--spn-meta); font-size:13px; }
.person-head__meta p span { color:var(--spn-tief); }

.dl { display:grid; grid-template-columns:auto 1fr; gap:9px 18px; margin:0; font-size:13.5px; }
.dl dt { font-size:var(--spn-label); font-weight:700; color:var(--spn-meta); align-self:center; }
.dl dd { margin:0; color:var(--spn-tief); }

/* sensibler Bereich (Art. 9) */
.sensibel { border-color:var(--pd-linie) !important; }
.sensibel-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--spn-meta); }
.sensibel-badge .icon { width:13px; height:13px; }
.gated { display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--st-neutral-bg); border-radius:var(--r-md); color:var(--spn-meta); font-size:13.5px; margin:0 18px 16px; }
.gated .icon { width:20px; height:20px; color:var(--spn-meta); }

/* ---- Fortschritt ---- */
.progress__row { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.progress__val { font-family:var(--spn-font-display); font-weight:800; font-size:22px; color:var(--spn-blau); font-variant-numeric:tabular-nums; }
.progress__val.ok { color:var(--st-gruen); }
.progress__soll { font-size:12.5px; color:var(--spn-meta); }
.progress__track { height:7px; background:var(--spn-blau-10); border-radius:var(--r-pill); overflow:hidden; }
.progress__bar { height:7px; background:var(--spn-blau); border-radius:var(--r-pill); transition:width .4s; }
.progress__bar.ok { background:var(--st-gruen); }

.empty { padding:38px 18px; text-align:center; color:var(--spn-meta); font-size:13.5px; }
.loading { padding:38px; text-align:center; color:var(--spn-meta); font-size:13px; }

/* ---- Toast ---- */
.toast {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--flaeche-marine); color:var(--auf-marke); padding:12px 20px; font-size:13.5px; z-index:90;
  max-width:calc(100% - 32px); border-radius:var(--r-md); box-shadow:var(--schatten-pop);
}

/* =============================== Mobil */
.scrim { position:fixed; inset:0; background:rgba(8,35,106,.45); z-index:40; }
@media (max-width:900px) {
  /* Auf dem Telefon faehrt die Spalte als Schublade von links herein - aber
     als dieselbe Karte wie am Rechner, mit Fuge und runden Ecken. Eckig und
     randlos sah sie aus wie ein fremdes Fenster ueber der Anwendung.
     Der Weg nach draussen ist die eigene Breite PLUS die Fuge links, sonst
     bliebe ein Streifen der Karte am Rand stehen. */
  .app { display:block; padding:0; gap:0; }
  .side {
    position:fixed; left:10px; top:10px; bottom:10px; right:auto;
    width:min(290px, calc(100% - 64px)); height:auto; z-index:50;
    background:var(--pd-karte); border-radius:var(--r-xl);
    transform:translateX(calc(-100% - 14px)); transition:transform .3s; visibility:hidden;
    box-shadow:var(--schatten-pop);
  }
  .side.is-open { transform:translateX(0); visibility:visible; }
  .main { padding:14px 14px 18px; }
  .topbar__menu { display:inline-flex; background:var(--pd-karte); border:1px solid var(--pd-linie-2); }
  /* Auf dem Telefon ist die Kopfzeile knapp. Die Suche faltet sich auf die
     Lupe zusammen; erst beim Antippen nimmt sie die ganze Zeile. Sonst stand
     sie mit der halben Breite da und drueckte alles andere an den Rand. */
  .topbar { gap:6px; padding:6px; }
  .such__input { font-size:16px; }   /* unter 16px zoomt iOS beim Antippen hinein */
  .such__taste { display:none; }     /* ohne Tastatur ist das Kürzel eine Anweisung ins Leere */
  .kopfaktionen { gap:2px; }
  .profil__meta, .profil__pfeil { display:none; }
  .profil__knopf { padding:2px; }
  .bell, .themebtn { width:34px; height:34px; }
  .seitenkopf h1 { font-size:19px; }

  /* Zusammengefaltet: nur die Lupe, quadratisch wie die übrigen Knöpfe, und
     rechts bei ihnen - links allein sähe sie aus wie ein vergessenes Feld. */
  .topbar[data-suche="zu"] .such {
    flex:none; order:2; margin-left:auto; width:34px; height:34px; max-width:none;
    padding:0; justify-content:center; cursor:pointer;
    background:var(--pd-karte); border:1px solid var(--pd-linie-2);
  }
  .topbar[data-suche="zu"] .such__input,
  .topbar[data-suche="zu"] .such__zu { display:none; }
  .topbar[data-suche="zu"] .kopfaktionen { order:3; margin-left:0; }
  .topbar[data-suche="zu"] .topbar__menu { order:1; }

  /* Aufgeklappt: die ganze Zeile, alles andere weicht. */
  .topbar[data-suche="offen"] .such { flex:1 1 auto; max-width:none; padding:7px 10px; }
  .topbar[data-suche="offen"] .such__zu { display:flex; }
  .topbar[data-suche="offen"] .kopfaktionen,
  .topbar[data-suche="offen"] .topbar__menu { display:none; }

  .view { padding:16px 14px 18px; border-radius:var(--r-lg); }
  .hero__titel { font-size:21px; }
  .hero__aktionen { width:100%; }
  .hero__aktionen .btn { flex:1; }
}
@media (min-width:901px) { .scrim { display:none; } }
/* Wer Bewegung abbestellt hat, bekommt keine - auch keine Animationen. Die
   Regel deckte bisher nur Uebergaenge; seit dem 14.09.2026 arbeitet die
   Anwendung auch mit Keyframes, und die liefen dann weiter. */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* =============================== Dialoge */
/* Der Dialog bleibt immer im Bild; gescrollt wird nur sein Inhalt, damit
   Kopfzeile und Aktionsknöpfe erreichbar bleiben.
   Wichtig: hier kein `display` setzen. Autorenregeln schlagen das
   Browser-Standardverhalten `dialog:not([open]) { display:none }`, der Dialog
   wäre dann dauerhaft im Layout und beim Öffnen nicht mehr mittig. Die
   Flex-Struktur liegt deshalb auf dem inneren Kasten. */
.modal { border:0; padding:0; max-width:560px; width:calc(100% - 32px);
  max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px);
  background:var(--pd-karte); color:var(--spn-tief);
  border-radius:var(--r-xl); box-shadow:var(--schatten-pop); overflow:hidden; }
.modal::backdrop { background:rgba(8,35,106,.5); }
/* Bei offenem Fenster steht der Hintergrund still, sonst verliert man beim
   Schließen die Stelle, an der man war. */
body.modal-offen { overflow:hidden; }
.modal__box { padding:0; display:flex; flex-direction:column; min-height:0;
  max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); }
.modal__head { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 22px 12px; flex:none; }
.modal__head h2 { font-size:17px; font-weight:700; }
/* Der Innenabstand steht als Wert bereit, weil der klebende Fuß langer Masken
   sich exakt danach richten muss - sonst bleibt ein Streifen frei, in dem der
   Inhalt sichtbar unter den Knöpfen weiterläuft. */
.modal__body { --modal-pad:22px;
  padding:6px var(--modal-pad) var(--modal-pad); overflow-y:auto; flex:1; min-height:0; }

/* =============================================================
   Bauteile der Website-Verwaltung

   Alles darüber stammt aus dem PersonalDeck. Was hier folgt, gibt es
   dort nicht: Besucherkurve, Medienraster, SEO-Ampel, Beitragspflege.
   Gebaut mit denselben Tokens, damit es sich nicht wie ein Fremdkörper
   anfühlt.
   ============================================================= */

/* ---- Besucherkurve ------------------------------------------------------
   Fläche plus Linie statt bloßer Balken: Die Kurve zeigt den Gang der
   Dinge, die Achse sagt, wann etwas los war. */
/* Das Feld gibt die Breite vor, die Zeichnung misst sie und legt ihre eigene
   Groesse in Bildpunkten fest — deshalb hier KEINE feste Hoehe und kein
   width:100% auf der Zeichnung selbst, das wuerde sie wieder verzerren. */
.diagramm-feld { width:100%; min-height:210px; }
.diagramm { display:block; max-width:100%; overflow:visible; }
.dg-hilfslinie { stroke:var(--pd-linie); stroke-width:1; shape-rendering:crispEdges; }
.dg-linie {
  fill:none; stroke:var(--spn-blau); stroke-width:2.4;
  stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke;
}
.dg-achse { font-family:var(--spn-font-subline); font-size:11.5px; fill:var(--spn-meta); }
.dg-mitte { text-anchor:middle; }
.dg-rechts { text-anchor:end; }
.dg-kugel { fill:var(--pd-karte); stroke:var(--spn-blau); stroke-width:2; }
/* Liegen die Werte dicht an dicht, wuerden die Punkte zu einer Perlenkette
   verschmelzen. Dann bleiben sie unsichtbar und kommen erst beim Zeigen. */
.dg-still { opacity:0; }
.dg-punkt:hover .dg-still { opacity:1; }
.dg-ziel { fill:transparent; }
.dg-punkt:hover .dg-kugel { fill:var(--st-rot); stroke:var(--st-rot); r:5; }

/* Live-Anzeige: die einzige Zahl, die sich beim Zusehen ändert */
.jetzt-marke {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 12px; border-radius:var(--r-pill);
  background:var(--st-gruen-bg); color:var(--st-gruen);
  font-size:12px; font-weight:700;
}
.jetzt-marke i { width:8px; height:8px; border-radius:50%; background:var(--st-gruen);
  animation:jetzt-puls 2s ease-out infinite; }
@keyframes jetzt-puls { 0%,100% { opacity:1; } 50% { opacity:.3; } }
@media (prefers-reduced-motion: reduce) { .jetzt-marke i { animation:none; } }

/* Veränderung mit Richtung: die Zahl allein sagt nicht, ob sie gut ist */
.kpi__delta { font-size:12px; margin:4px 0 0; color:var(--spn-meta); }
.kpi__delta.auf { color:var(--st-gruen); }
.kpi__delta.ab { color:var(--st-rot); }
.kpi__delta span { color:var(--spn-meta); }

/* ---- Balkenliste (meistbesuchte Seiten, Quellen, Geräte) ---- */
.balken { display:flex; flex-direction:column; }
.balken__zeile {
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px;
  align-items:center; padding:7px 0; font-size:13px;
}
.balken__name { position:relative; min-width:0; padding:5px 10px; border-radius:var(--r-xs); }
.balken__fond {
  position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-xs);
  background:var(--spn-blau-10);
}
.balken__text { position:relative; color:var(--spn-tief); overflow-wrap:anywhere; }
.balken__wert { font-variant-numeric:tabular-nums; font-weight:700; color:var(--spn-tief); }
.balken__anteil { font-variant-numeric:tabular-nums; color:var(--spn-meta); font-size:12px; min-width:44px; text-align:right; }

/* ---- Trichter: Weg zur Bewerbung ---- */
.trichter { display:grid; gap:16px; }
.tr-stufe { display:grid; gap:6px; }
.tr-kopf { display:flex; align-items:baseline; gap:10px; }
.tr-kopf b {
  font-family:var(--spn-font-display); font-weight:800; font-size:24px;
  line-height:1; color:var(--spn-tief); font-variant-numeric:tabular-nums;
}
.tr-kopf span { font-size:13.5px; color:var(--spn-tief); }
.tr-balken { height:9px; border-radius:var(--r-pill); background:var(--pd-zeile); overflow:hidden; }
.tr-balken i { display:block; height:100%; border-radius:var(--r-pill);
  background:linear-gradient(to right, var(--spn-blau), var(--flaeche-rot)); }
.tr-fuss { font-size:12px; color:var(--spn-meta); }

/* ---- Reiter-Chips (Zeitraum, Filter) ---- */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
  border:1px solid var(--pd-linie); background:var(--pd-karte); color:var(--spn-tief);
  border-radius:var(--r-pill); padding:7px 15px; font-family:var(--spn-font-text);
  font-size:13px; font-weight:700; cursor:pointer; transition:background var(--takt-kurz) var(--kurve);
}
.chip:hover { background:var(--pd-hover); }
.chip.aktiv { background:var(--flaeche-marine); color:var(--auf-marke); border-color:var(--flaeche-marine); }

/* ---- SEO ---- */
.ampel { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:10px; }
.ampel-gruen { background:var(--st-gruen); }
.ampel-gelb  { background:var(--st-amber); }
.ampel-rot   { background:var(--st-rot); }
.ampel-grau  { background:var(--st-neutral); }

/* Wie der Eintrag in einer Trefferliste aussähe */
.treffer { background:var(--pd-zeile); border-radius:var(--r-md); padding:14px 16px; max-width:620px; }
.treffer__adresse { font-size:12.5px; color:var(--spn-meta); }
.treffer__titel {
  margin-top:3px; font-size:17px; line-height:1.3; color:var(--spn-blau);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.treffer__text {
  margin-top:4px; font-size:13px; line-height:1.5; color:var(--spn-meta);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.seo-zeile { cursor:pointer; }
.seo-vorschau:not(.offen) { display:none; }
.seo-vorschau > td { padding:0 12px 16px !important; border-bottom:1px solid var(--pd-zeile) !important; }

.quelltext {
  background:var(--flaeche-marine); color:var(--auf-marke);
  border-radius:var(--r-md); padding:14px 16px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12.5px; line-height:1.6; overflow-x:auto; white-space:pre; margin:0;
}
.schalter-zeile { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }

/* ---- Medien ---- */
.med-gitter { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.med-kachel { border:1px solid var(--pd-linie); border-radius:var(--r-lg); overflow:hidden;
  background:var(--pd-karte); cursor:pointer; transition:border-color var(--takt-kurz) var(--kurve); }
.med-kachel:hover { border-color:var(--spn-blau-40); }
.med-bild { position:relative; aspect-ratio:4/3; background:var(--pd-zeile); }
.med-bild img { width:100%; height:100%; object-fit:cover; display:block; }
.med-video { display:grid; place-items:center; height:100%; color:var(--spn-meta);
  font-family:var(--spn-font-subline); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.med-warn { position:absolute; top:8px; right:8px; width:20px; height:20px; border-radius:50%;
  background:var(--flaeche-rot); color:var(--auf-marke); display:grid; place-items:center;
  font-size:12px; font-weight:700; }
.med-text { padding:10px 12px 12px; display:grid; gap:2px; }
.med-text b { font-size:12.5px; color:var(--spn-tief); overflow-wrap:anywhere; }
.med-text span { font-size:11.5px; color:var(--spn-meta); }
.med-leiste { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }

/* ---- Beiträge und Wachen ---- */
.form-gitter { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:14px; }
.bild-zeile {
  display:grid; grid-template-columns:88px minmax(0,1fr) auto; gap:14px;
  align-items:start; padding:12px 0; border-top:1px solid var(--pd-zeile);
}
.bild-zeile img { width:88px; height:66px; object-fit:cover; border-radius:var(--r-sm); background:var(--pd-zeile); }
.bild-zeile > div { display:grid; gap:8px; min-width:0; }
.wache-form {
  display:grid; grid-template-columns:128px minmax(0,1fr) auto; gap:18px;
  align-items:start; padding:18px 0; border-top:1px solid var(--pd-zeile);
}
.wache-form:first-of-type { border-top:0; }
.wache-form > img { width:128px; height:94px; object-fit:cover; border-radius:var(--r-sm); background:var(--pd-zeile); }
@media (max-width:760px) {
  .wache-form, .bild-zeile { grid-template-columns:1fr; }
  .wache-form > img, .bild-zeile img { width:100%; height:150px; }
}

/* ---- Seitenübersicht ---- */
.seiten-gitter { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.seiten-kachel {
  border:1px solid var(--pd-linie); border-radius:var(--r-lg); padding:16px 18px;
  display:flex; flex-direction:column; gap:6px; background:var(--pd-karte);
}
.seiten-kachel h3 { font-family:var(--spn-font-display); font-weight:700; font-size:15px; color:var(--spn-tief); margin:0; }
.seiten-kachel p { font-size:12.5px; color:var(--spn-meta); margin:0; }
.kachel-knoepfe { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:10px; }

/* ---- Kleinkram ---- */
.karte-hinweis { font-size:12.5px; color:var(--spn-meta); }
.leer-hinweis { padding:30px 16px; text-align:center; color:var(--spn-meta); font-size:13.5px; }
.knopfreihe { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.rechts { text-align:right; }
.weg-mobil { display:table-cell; }
@media (max-width:760px) { .weg-mobil { display:none; } }
.klein-select {
  padding:7px 12px; border:1px solid var(--pd-linie); border-radius:var(--r-md);
  background:var(--pd-karte); font-family:var(--spn-font-text); font-size:13px; color:var(--spn-tief);
}
.verblasst { opacity:.55; }

/* ---- Anmeldung ---------------------------------------------------------- */
.login__card {
  width:100%; max-width:400px; background:var(--pd-karte); border-radius:var(--r-xl);
  box-shadow:var(--schatten-pop); padding:30px 30px 26px;
}
.login__brand { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.login__title {
  font-family:var(--spn-font-display); font-weight:800; font-size:24px;
  color:var(--spn-tief); margin:0 0 18px;
}
.login__fuss { margin:18px 0 0; font-size:12px; color:var(--spn-meta); text-align:center; }

/* ---- Panel-Varianten ---- */
.panel--warn { border-color:var(--st-rot-bg); }
.panel--warn .panel__head h2 { color:var(--st-rot); }
.stapel { display:flex; flex-direction:column; }
.schalter-stand { font-family:var(--spn-font-display); font-weight:700; font-size:17px; color:var(--spn-tief); }
.kopf-rechts { display:flex; align-items:center; gap:12px; }
.zeit { color:var(--spn-meta); font-size:12.5px; white-space:nowrap; }
.marke { display:inline-block; font-size:11.5px; font-weight:700; padding:3px 10px;
  background:var(--st-neutral-bg); color:var(--st-neutral); border-radius:var(--r-pill); }

/* ---- Formularfelder ---- */
.feld { margin-bottom:14px; }
/* Alle Feldbeschriftungen sehen gleich aus — in der Vorlage ist das
   .field__label: klein, halbfett, ruhig. Kleinkapitälchen an der einen und
   Fließtext an der anderen Stelle lesen sich als zwei Systeme. */
.feld label, label.voll, .form-gitter > label, .wache-form label, .bild-zeile label {
  display:block; font-family:var(--spn-font-text); font-weight:700;
  font-size:var(--spn-label); letter-spacing:normal; text-transform:none;
  color:var(--spn-meta); margin-bottom:6px;
}
.feld input, .feld select, .feld textarea, .input, .feld-eingabe {
  width:100%; padding:9px 12px; border:1px solid var(--pd-linie-2); border-radius:var(--r-md);
  background:var(--pd-karte); font-family:var(--spn-font-text); font-size:14px; color:var(--spn-tief);
}
.feld input:focus, .feld select:focus, .feld textarea:focus, .input:focus, .feld-eingabe:focus {
  outline:none; border-color:var(--spn-blau); box-shadow:0 0 0 3px var(--spn-blau-10);
}
textarea.feld-eingabe, .feld textarea { line-height:1.6; resize:vertical; }
.hilfe { font-size:12px; color:var(--spn-meta); margin:6px 0 0; }
.fehler { color:var(--st-rot); font-size:13px; margin:0 0 12px; }
.feld-schalter { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--spn-tief); }
.feld-schalter input { width:auto; }
.gross { font-size:16px; }

/* ---- Dialog ---- */
.dialog-lage { position:fixed; inset:0; z-index:var(--z-overlay); display:grid; place-items:center; padding:20px; }
.dialog-hg { position:absolute; inset:0; background:rgba(8,35,106,.45); backdrop-filter:blur(2px); }
.dialog {
  position:relative; width:100%; max-width:540px; max-height:86vh; overflow:auto;
  background:var(--pd-karte); border-radius:var(--r-xl); box-shadow:var(--schatten-pop);
}
.dialog-kopf { display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 22px 12px; }
.dialog-kopf h3 { font-family:var(--spn-font-display); font-weight:700; font-size:18px;
  color:var(--spn-tief); margin:0; }
.dialog-x { border:0; background:none; cursor:pointer; color:var(--spn-meta); padding:4px;
  border-radius:var(--r-xs); }
.dialog-x:hover { background:var(--pd-hover); color:var(--spn-tief); }
.dialog-x svg { width:18px; height:18px; }
.dialog-koerper { padding:0 22px 8px; }
.dialog-fuss { display:flex; justify-content:flex-end; gap:10px; padding:14px 22px 20px; flex-wrap:wrap; }

/* ---- Kurzmeldungen ---- */
.toast-raum { position:fixed; right:18px; bottom:18px; z-index:120; display:flex;
  flex-direction:column; gap:10px; align-items:flex-end; }
.toast {
  background:var(--flaeche-marine); color:var(--auf-marke); padding:12px 18px;
  border-radius:var(--r-md); box-shadow:var(--schatten-pop); font-size:13.5px;
  max-width:340px; animation:toast-auf var(--takt) var(--kurve-rein);
}
.toast.fehler { background:var(--flaeche-rot); color:var(--auf-marke); }
@keyframes toast-auf { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation:none; } }

/* ---- Seiteneditor: Felder nach Abschnitten ---- */
.inh-gruppe { margin-bottom:12px; }
.inh-kopf {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:14px 18px; background:none; border:0; cursor:pointer;
  font-family:var(--spn-font-text); color:var(--spn-tief);
}
.inh-kopf:hover { background:var(--pd-hover); }
.inh-titel { font-weight:700; font-size:14.5px; flex:1; }
.inh-zahl { font-size:12px; color:var(--spn-meta); }
.inh-pfeil { width:16px; height:16px; color:var(--spn-meta); transition:transform var(--takt) var(--kurve); }
.inh-gruppe.auf .inh-pfeil { transform:rotate(180deg); }
.inh-koerper { padding:0 18px 16px; display:none; }
.inh-gruppe.auf .inh-koerper { display:block; }
.inh-feld { margin-bottom:16px; }
.inh-fuss { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }

/* ---- Feldverlauf ---- */
.verlauf-knopf { border:0; background:none; color:var(--spn-blau); font-size:12.5px;
  font-weight:700; cursor:pointer; padding:4px 0; font-family:var(--spn-font-text); }
.verlauf-eintrag { padding:10px 0; border-bottom:1px solid var(--pd-zeile); }
.verlauf-eintrag:last-child { border-bottom:0; }
.verlauf-kopf { display:flex; justify-content:space-between; gap:12px; font-size:12px;
  color:var(--spn-meta); margin-bottom:4px; }
.verlauf-eintrag p { margin:0; font-size:13px; color:var(--spn-tief); }

/* ---- Medien: Zusatzangaben ---- */
.med-filterleiste { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.med-filter {
  border:1px solid var(--pd-linie); background:var(--pd-karte); color:var(--spn-tief);
  border-radius:var(--r-pill); padding:6px 14px; font-family:var(--spn-font-text);
  font-size:12.5px; font-weight:700; cursor:pointer;
}
.med-filter:hover { background:var(--pd-hover); }
.med-filter.aktiv { background:var(--flaeche-marine); color:var(--auf-marke); border-color:var(--flaeche-marine); }
.med-filter b { margin-left:6px; opacity:.7; }
.med-nutzung { font-size:11.5px; color:var(--spn-meta); }
.med-detail { display:grid; gap:14px; }
.med-daten { font-size:13px; color:var(--spn-meta); }

/* ---- Bauprotokoll ---- */
.bau-log {
  background:var(--pd-zeile); border-radius:var(--r-md); padding:12px 14px; margin:0;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px;
  line-height:1.6; max-height:260px; overflow:auto; white-space:pre-wrap; color:var(--spn-tief);
}

/* ---- Beiträge ---- */
.beitrag-zeile { cursor:default; }
.beitrag-form { margin-bottom:16px; }

/* Fehlt eine Zahl, bleibt die Kachel hell — eine dunkle Fläche mit Strich
   sieht aus wie ein Fehler, nicht wie eine offene Messung. */
.kpix__kachel--leer { background:var(--pd-zeile); color:var(--spn-meta); }
.kpix__kachel--leer .kpix__wert { color:var(--spn-meta); }
.kpix__kachel--leer .kpix__sub { color:var(--spn-meta); }

/* Eine Statusangabe ist eine Pille, kein Balken: Sie darf nur so breit sein
   wie ihr Wort, sonst liest sie sich als Eingabefeld. */
.seiten-kachel .pill, .seiten-kachel .st { align-self:flex-start; }
.data .pill, .data .st { white-space:nowrap; }

/* Zahlenspalten brechen nicht um: „43 Z." über zwei Zeilen liest sich als
   Fehler, nicht als Wert. */
.seo-tabelle td, .seo-tabelle th { white-space:nowrap; }
.seo-tabelle td:first-child, .seo-tabelle td:last-child { white-space:normal; }

/* Ein Feld, das selbst die Klasse trägt (nicht in .feld steckt), muss eigene
   Zeile bekommen — sonst klebt die Beschriftung davor statt darüber. */
input.feld, select.feld, textarea.feld {
  display:block; width:100%; margin-top:6px;
  padding:9px 12px; border:1px solid var(--pd-linie-2); border-radius:var(--r-md);
  background:var(--pd-karte); font-family:var(--spn-font-text); font-size:14px; color:var(--spn-tief);
}
input.feld:focus, select.feld:focus, textarea.feld:focus {
  outline:none; border-color:var(--spn-blau); box-shadow:0 0 0 3px var(--spn-blau-10);
}
/* Die Beschriftung eines solchen Feldes ist das Label drumherum. */
.form-gitter > label, .wache-form label, .bild-zeile label { display:block; }