/* Portal-spezifische Komponenten auf btv-ui-Token-Basis (13.1).
   Regel: keine Inline-Styles im Markup — alles hier. */

/* Topbar: Abmelden-Button als Formular (Logout nur per POST) */
.inline-form{display:inline-flex;margin:0}
.inline-form .btn-primary,.inline-form .btn-secondary,
.inline-form .btn-ghost,.inline-form .btn-danger{font:inherit;cursor:pointer}
.inline-form .btn-ghost{background:transparent}

/* Startseiten-Kacheln (8.6). Jede Kachel hat einen Bildkopf: entweder das
   Modulbild (Konvention public/assets/module/<modul>.*), ein Icon oder — wenn
   ein Modul nichts mitbringt — ein Emblem aus den Initialen. Nie eine leere
   Flaeche: eine Kachel ohne Bild sieht aus wie ein Ladefehler. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem;margin-top:1.4rem}
.tile{display:flex;flex-direction:column;color:inherit;text-decoration:none;padding:0;overflow:hidden}
.tile-figur{position:relative;display:flex;align-items:center;justify-content:center;
  height:132px;background:linear-gradient(120deg,var(--blue),var(--blue-l));overflow:hidden}
.tile-figur img{width:100%;height:100%;object-fit:cover;display:block}
.tile-figur .ico{width:40px;height:40px;color:#fff;stroke-width:1.6}
.tile-emblem{font-family:var(--font-head);font-size:2.1rem;font-weight:800;color:#fff;letter-spacing:.04em}
/* Kennzeichnung (Anzahl offener Vorgaenge, Preview) sitzt auf dem Bild — dort
   faellt sie auf, ohne die Ueberschrift zu zerreissen. */
.tile-flag{position:absolute;top:.6rem;right:.6rem;background:#fff;color:var(--blue-d);
  box-shadow:0 4px 10px -4px rgba(0,0,0,.35)}
.tile-flag.red{background:var(--accent);color:#fff}
.tile-text{display:block;padding:1.05rem 1.25rem 1.3rem}
.tile h2{margin:0 0 .3rem;font-size:1.06rem;color:var(--blue-d)}
.tile p{margin:0;color:var(--ink-soft);font-size:.93rem;line-height:1.45}
.tile:hover .tile-figur img{transform:scale(1.03)}
.tile-figur img{transition:transform .25s var(--ease)}
.tile-disabled{opacity:.75}
.tile-disabled:hover{transform:none;box-shadow:var(--shadow)}
/* Feste Emblem-Palette: die Farbe kommt aus dem Modulschluessel (Klassenname),
   nicht aus einem Inline-Style — den verbietet die CSP (12.2). */
.emblem-1{background:linear-gradient(120deg,#1770B8,#3f9ad8)}
.emblem-2{background:linear-gradient(120deg,#0f5d8f,#2f86c4)}
.emblem-3{background:linear-gradient(120deg,#2a7f62,#48a882)}
.emblem-4{background:linear-gradient(120deg,#7a4bb5,#9d76d0)}
.emblem-5{background:linear-gradient(120deg,#b5563f,#d3805f)}
.emblem-6{background:linear-gradient(120deg,#3f4a63,#63708f)}

/* Dev-Login */
.radio-row{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;font-weight:600;color:var(--ink-soft)}

/* Selfcheck-Tabelle */
.check-table{width:100%;min-width:100%;border-collapse:collapse;font-size:.92rem}
/* Der Scroll-Container liegt UM die Tabelle, nicht auf ihr. Vorher war die
   Tabelle selbst `display:block; overflow-x:auto` — dadurch wurde die innere
   Tabellenbox `shrink-to-fit` und blieb schmaler als der Platz, statt die
   Breite zu fuellen. */
/* min-width:0 gehoert an den CONTAINER: Als Flex-/Grid-Kind weigert er sich
   sonst zu schrumpfen und schiebt die Seite auf. Die Tabelle darin behaelt
   dagegen min-width:100%, damit sie die Breite immer ausfuellt. */
.tabelle-scroll{width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.check-table th{text-align:left;color:var(--muted);font-size:.8rem;text-transform:uppercase;
  letter-spacing:.04em;padding:.5rem .65rem;border-bottom:2px solid var(--line)}
.check-table td{padding:.55rem .65rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
/* Zellinhalte brechen um — aber `break-word`, NICHT `anywhere`. `anywhere`
   senkt die min-content-Breite auf ein einzelnes Zeichen; im automatischen
   Tabellenlayout darf eine Spalte dann auf Buchstabenbreite kollabieren, und
   ein Wort steht senkrecht untereinander. `break-word` trennt lange Woerter
   erst, wenn sie sonst ueberlaufen wuerden — und fuellt die Zeile dabei.
   Die min-width haelt Spalten zusaetzlich auf einer lesbaren Mindestbreite;
   weil sie sich ueber alle Spalten summiert, waechst der Platzbedarf
   automatisch mit der Spaltenzahl — schmale Tabellen passen weiter, breite
   loesen den Scroll des Containers aus. */
.check-table td,.check-table th{overflow-wrap:break-word;min-width:5rem}
/* Gegenstueck fuer Zellen, in denen ein Umbruch die Lesbarkeit zerstoert
   (Datum/Uhrzeit, Zahlen, Status-Badges): in der View mit class="nowrap". */
.check-table .nowrap{white-space:nowrap}
/* Nur fuer Screenreader: sichtbar entfernt, aber vorgelesen. Wird u. a. fuer
   den Hinweis „oeffnet in neuem Tab" gebraucht — ein Link, der unangekuendigt
   ein Fenster aufreisst, ist fuer Screenreader-Nutzung eine Sackgasse.
   Bewusst NICHT display:none — das wuerde ihn auch der Vorlesefunktion nehmen. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.check-status{display:inline-block;padding:.14rem .6rem;border-radius:999px;font-size:.75rem;font-weight:800}
.check-ok{background:var(--ok-bg);color:var(--ok)}
.check-info{background:#eaf1fb;color:var(--blue-d)}
.check-warnung{background:#fdf3dd;color:var(--warn)}
.check-alarm{background:var(--bad-bg);color:var(--bad)}

/* Fehlerseiten */
.error-page h1{color:var(--blue-d)}
.dev-detail{margin-top:1.2rem;padding:1rem;background:#fff6f5;border:1px solid #f1c8c2;
  border-radius:var(--radius-xs);overflow-x:auto;font-size:.8rem;color:var(--bad)}

/* Footer-Version */
.foot-ver{color:var(--muted);font-size:.78rem}

/* 2FA-Onboarding (7.2) */
/* 7.6: Zwei gleichwertige Wege nebeneinander (2FA jetzt oder spaeter).
   Bewusst identisch gerahmt und gleich breit — sobald eine Option optisch
   zurueckfaellt, liest sie sich als Notausgang statt als echte Wahl. */
.wahl-zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:1.25rem 0}
.wahl-option{border:1px solid var(--line);border-radius:var(--radius-s);padding:1rem;display:flex;flex-direction:column}
.wahl-option h2{margin-top:0;font-size:1rem}
.wahl-option p{margin:.4rem 0}
.wahl-option form{margin-top:auto}
.wahl-option .btn-primary,.wahl-option .btn-secondary{display:inline-block}
.setup-wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1rem 0}
.setup-weg{border:1px solid var(--line);border-radius:var(--radius-s);padding:1rem}
.setup-weg h3{margin-top:0;font-size:.95rem;color:var(--blue-d)}
.setup-weg .qr{border:1px solid var(--line);border-radius:var(--radius-xs);max-width:100%}
.secret-code{display:block;padding:.6rem;background:var(--bg-2);border:1px dashed var(--line);
  border-radius:var(--radius-xs);font-size:.95rem;word-break:break-all;user-select:all}
.recovery-codes{columns:2;list-style:none;padding:0;margin:1rem 0}
.recovery-codes li{padding:.3rem 0}
.recovery-codes code{font-size:1.05rem;font-weight:700;letter-spacing:.06em}

/* Registrierungs-Wizard (6.3) */
.etappen{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.etappen-text{font-weight:700;color:var(--blue-d);font-size:.9rem}
.etappen-punkte{display:flex;gap:.35rem}
.etappen .punkt{width:10px;height:10px;border-radius:50%;background:var(--line)}
.etappen .punkt.done{background:var(--blue-l)}
.etappen .punkt.cur{background:var(--blue);box-shadow:var(--ring)}
.wizard-email{font-size:1.25rem;font-weight:800;color:var(--blue-d);
  padding:.6rem 1rem;background:var(--bg-2);border-radius:var(--radius-xs);
  word-break:break-all}

/* Verwaltung / Startseite (Block 10) */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.1rem}
.form-inline{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.form-inline input[type=search]{min-width:240px}
.aufgaben{list-style:none;padding:0;margin:0}
.aufgabe{border-left:3px solid var(--blue);padding:.4rem 0 .4rem 1rem;margin:1rem 0}
.aufgabe h3{margin:0 0 .3rem;font-size:1rem;color:var(--blue-d)}

/* Inhaltsseiten (Block 11) */
.inhalt .lead-text{font-size:1.08rem;color:var(--ink-soft)}
.inhalt .fliesstext{line-height:1.6}
.faq dt{font-weight:700;color:var(--blue-d);margin-top:1rem}
.faq dd{margin:.3rem 0 0;padding-left:0}
.form textarea{width:100%;font:inherit;padding:.6rem;border:1.5px solid var(--line);border-radius:var(--radius-xs);resize:vertical}

/* Barrierefreiheit (13.6) */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;
  padding:.6rem 1rem;border-radius:0 0 var(--radius-xs) 0;z-index:100}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ===== Portal-Shell (4.7): Kopfzeile + Modul-Sidebar ===== */
body.has-shell{background:var(--bg)}
.apptop{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;
  padding:.55rem 1.4rem;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.apptop .brand{gap:.6rem;flex:0 0 auto}
.apptop .brand-logo{height:34px}
.apptop .brand-title{font-family:var(--font-head);font-weight:700;color:var(--blue-d);font-size:1.02rem}
/* `flex:0 0 auto` hiess: niemals schrumpfen. Die Gruppe nahm damit immer ihre
   volle Inhaltsbreite (gemessen 582 px) — auf einem 390-px-Display lief das
   Portal auf JEDER angemeldeten Seite um ~500 px waagrecht ueber. Das
   `flex-wrap` in der Mobil-Regel lief dabei ins Leere: Umbrechen kann nur, was
   vorher schmaler werden darf. Jetzt schrumpfbar (`1 1 auto` + `min-width:0`)
   und umbruchfaehig — die Kopfzeile waechst lieber in die Hoehe als aus dem
   Bildschirm heraus. */
.apptop-right{display:flex;align-items:center;justify-content:flex-end;gap:.7rem;
  flex:1 1 auto;min-width:0;flex-wrap:wrap}
.icon-btn{display:inline-flex;color:var(--muted);padding:.3rem;border-radius:var(--radius-xs)}
.icon-btn:hover{color:var(--blue);background:var(--blue-20)}
.icon-btn .ico{width:22px;height:22px}
.navbadge{background:var(--accent);color:#fff;font-size:.68rem;font-weight:800;border-radius:999px;
  padding:.02rem .42rem;margin-left:.1rem}

/* Ansicht-als-Umschalter */
.viewas{display:inline-flex;align-items:center;gap:.4rem}
.viewas-label{display:inline-flex;align-items:center;gap:.35rem;color:var(--muted)}
/* P07-5: Der Wechsel braucht einen echten Absende-Button (kein Auto-Submit) —
   dezent, aber vorhanden, und ohne JavaScript benutzbar. */
.viewas-go{font-size:.8rem;padding:.28rem .6rem}
.viewas-label .ico{width:18px;height:18px}
.viewas select{font:inherit;font-size:.85rem;padding:.32rem .5rem;border:1.5px solid var(--line);
  border-radius:var(--radius-xs);background:#fff;color:var(--ink-soft)}
.viewas-banner{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;background:var(--accent-20);
  color:var(--accent);padding:.5rem 1.4rem;font-weight:600;font-size:.9rem}
.viewas-banner .btn-ghost{border-color:var(--accent);color:var(--accent);padding:.25rem .7rem}

/* Nutzermenü (Dropdown per <details>, ohne JS) */
.usermenu{position:relative}
.usermenu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.55rem;
  padding:.25rem .4rem;border-radius:999px}
.usermenu>summary::-webkit-details-marker{display:none}
.usermenu>summary:hover{background:var(--bg)}
.usermenu>summary .ico{width:16px;height:16px;color:var(--muted)}
.usermenu .user-meta{display:flex;flex-direction:column;line-height:1.15}
.usermenu .user-meta strong{color:var(--ink);font-size:.88rem}
.usermenu .user-meta small{color:var(--muted);font-size:.74rem}
.usermenu-pop{position:absolute;right:0;top:calc(100% + .4rem);background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-s);box-shadow:var(--shadow-md);min-width:230px;padding:.4rem;z-index:40}
.usermenu-pop a,.usermenu-pop button{display:flex;align-items:center;gap:.55rem;width:100%;padding:.55rem .6rem;
  border-radius:var(--radius-xs);color:var(--ink-soft);text-decoration:none;font:inherit;font-weight:600;
  font-size:.9rem;background:none;border:0;cursor:pointer;text-align:left}
.usermenu-pop a:hover,.usermenu-pop button:hover{background:var(--blue-20);color:var(--blue-d)}
.usermenu-pop .ico{width:18px;height:18px}
.usermenu-pop form{margin:0;border-top:1px solid var(--line-soft);margin-top:.3rem;padding-top:.3rem}

/* Body: optionale Modul-Sidebar + Inhalt */
.shell-body{display:block}
.shell-body.with-sidebar{display:grid;grid-template-columns:250px 1fr}
.sidebar{position:sticky;top:57px;align-self:start;height:calc(100vh - 57px);overflow-y:auto;
  background:#fff;border-right:1px solid var(--line);padding:1rem .7rem}
.sidenav{display:flex;flex-direction:column;gap:.12rem}
.navlink{display:flex;align-items:center;gap:.6rem;padding:.55rem .65rem;border-radius:var(--radius-xs);
  color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:.92rem;background:none;border:0;
  width:100%;cursor:pointer;font-family:inherit;text-align:left}
.navlink:hover{background:var(--blue-20);color:var(--blue-d)}
.navlink.aktiv{background:linear-gradient(120deg,var(--blue),var(--blue-l));color:#fff}
.navlink .ico{width:19px;height:19px;flex:0 0 19px}
.navgroup>summary{list-style:none}.navgroup>summary::-webkit-details-marker{display:none}
.navgroup>summary .ico:last-child{margin-left:auto;transition:transform .2s var(--ease)}
.navgroup[open]>summary .ico:last-child{transform:rotate(180deg)}
/* Der Modulname in der Gruppe ist ein Link (oeffnet die erste Modulseite),
   sieht aber aus wie der uebrige Navigationstext. */
.navgroup-link{color:inherit;text-decoration:none;font:inherit;flex:1 1 auto}
.navgroup-link:hover{text-decoration:underline}
.navsub{padding:.1rem 0 .2rem .9rem;display:flex;flex-direction:column;gap:.1rem}
.navlink-sub{font-weight:500;font-size:.88rem;padding:.4rem .6rem}

.content{max-width:1120px;width:100%;margin:0 auto;padding:1.8rem 1.6rem 1rem}
.with-sidebar .content{margin:0}
/* `wide` sind die Listen-/Tabellenseiten. Dort ist eine feste Obergrenze
   schaedlich: Die Seite steht linksbuendig in der Shell, der Deckel liess auf
   breiten Schirmen einen leeren Streifen rechts stehen, waehrend die Tabelle
   daneben ihre Spalten zusammendrueckte. Lesbarkeit begrenzt weiterhin die
   normalen Textseiten (.content, 1120px) — Tabellen duerfen den Platz nutzen. */
.content.wide{max-width:none}
.shell-foot{margin:1rem auto 1.4rem;max-width:1120px;border-top:1px solid var(--line-soft);padding-top:1rem;
  color:var(--muted);font-size:.85rem}

/* Begrüßung */
.begruessung{margin-bottom:1.3rem}
.begruessung h1{margin-bottom:.2rem}
.begruessung .lead-text{color:var(--ink-soft);font-size:1.06rem;margin:0}

/* Avatar */
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;
  flex:0 0 auto;background:var(--blue-20);color:var(--blue-d);font-weight:800;font-family:var(--font-head)}
.avatar-sm{width:36px;height:36px;font-size:.85rem}
.avatar-img{object-fit:cover}

/* Semantische Status-Badges (Modul-Vorgangslisten, 4.7) */
.badge.st-eingereicht{background:#eaf1fb;color:var(--blue-d);border-color:#d4e0f2}
.badge.st-pruefung{background:#fdf3dd;color:var(--warn);border-color:#f0dda8}
.badge.st-abgelehnt{background:var(--accent-20);color:var(--accent);border-color:#f3c3bd}

@media (max-width:900px){
  .apptop{flex-wrap:wrap;padding:.5rem .9rem;gap:.4rem}
  .apptop .brand{margin-right:auto}
  /* Nicht klebend auf schmalen Geraeten: Umgebrochen ist die Kopfzeile rund
     140 px hoch — als Dauergast waere das ein Sechstel des Bildschirms, auf
     jeder Seite, fuer immer. Oben steht sie vollstaendig da, beim Lesen macht
     sie Platz. Die Symbole bleiben auf JEDER Seite erreichbar (nur eben nach
     oben gewischt) — die Zusage von 2026-07-29 gilt weiter. */
  .apptop{position:static}
  .apptop-right{flex-wrap:wrap;gap:.2rem;justify-content:flex-start}
  /* Der Rollen-Umschalter ist mit Abstand der breiteste Teil der Kopfzeile
     (gemessen 283 px) und betrifft nur Admins. Auf schmalen Geraeten bekommt
     er eine eigene Zeile — und zwar die LETZTE (`order`), sonst zerreisst er
     die Symbolgruppe und die Kopfzeile braucht eine Zeile mehr. */
  .viewas{flex:1 1 100%;margin-top:.15rem;order:2}
  .viewas .viewas-label{flex:1 1 auto;max-width:none}
  .viewas select{flex:1 1 auto;max-width:none;min-width:0}
  .usermenu .user-meta{display:none}
  .shell-body.with-sidebar{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .content{padding:1.2rem 1rem}
}
@media (max-width:640px){
  .brand-title{font-size:.95rem}
  .viewas .viewas-label{max-width:40vw}
  .viewas select{max-width:38vw}
  /* Breite Tabellen: der Rahmen darf scrollen — der INHALT bricht um.
     Vorher stand hier zusaetzlich `white-space:nowrap`. Das zwang jede Zelle
     auf eine einzige Zeile: Der Rahmen war responsiv, der Inhalt nicht, und
     aus einer harmlosen Tabelle wurde ein endloser Horizontal-Scroll. Das
     Scrollen bleibt als Sicherheitsnetz fuer wirklich breite Tabellen —
     dank umbrechender Zellen (s. .check-table td/th) braucht es das aber
     nur noch selten. `.grid` stand hier ebenfalls: Die Klasse existiert gar
     nicht (nur `.grid-2`) und wurde von keiner View benutzt. */
  /* Kein display:block mehr auf der Tabelle — das Scrollen uebernimmt
     .tabelle-scroll, und die Tabelle fuellt wieder die volle Breite. */
  .check-table{font-size:.86rem}
  .check-table td,.check-table th{padding:.45rem .4rem}
  .daten-grid,.daten-grid-2,.daten-block-split{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .auth-card{padding:1.2rem 1.1rem}
  h1{font-size:1.5rem}
}

/* ===== Anmelde-/Registrierungsseite (Bild-5) ===== */
.authmain{width:100%;max-width:1500px;margin:0 auto;padding:1.5rem}
.auth-split{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center;min-height:78vh}
.auth-welcome{padding:1rem 1.5rem}
.auth-welcome h1{font-size:2.4rem;color:var(--blue-d);margin:0 0 .8rem}
.auth-lead{font-size:1.15rem;color:var(--ink-soft);max-width:34ch;margin:0 0 1.8rem}
.auth-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.9rem}
.auth-features li{display:flex;gap:1rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:1rem 1.1rem;box-shadow:var(--shadow);transition:box-shadow .2s var(--ease)}
.auth-features li:hover{box-shadow:var(--shadow-md)}
.feat-ico{flex:0 0 44px;height:44px;border-radius:12px;background:var(--blue-20);color:var(--blue);
  display:inline-flex;align-items:center;justify-content:center}
.feat-ico .ico{width:22px;height:22px}
.auth-features strong{color:var(--blue-d);display:block;margin-bottom:.15rem}
.auth-features p{margin:0;color:var(--muted);font-size:.9rem}

.auth-panel{display:flex;flex-direction:column;gap:1rem}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:1.6rem 1.7rem}
.auth-tabs{display:flex;gap:.4rem;border-bottom:2px solid var(--line);margin:-.4rem 0 1.3rem}
.auth-tab{flex:1;text-align:center;padding:.7rem;font-weight:700;color:var(--muted);text-decoration:none;
  border-bottom:3px solid transparent;margin-bottom:-2px}
.auth-tab.aktiv{color:var(--blue-d);border-bottom-color:var(--blue)}
.auth-tab:not(.aktiv):hover{color:var(--blue-d)}
.auth-kicker{font-weight:700;color:var(--ink-soft);margin:.2rem 0 .6rem}
.sso-btn{display:flex;align-items:center;gap:.8rem;width:100%;padding:.9rem 1rem;border:1.5px solid var(--blue);
  border-radius:var(--radius-s);background:var(--blue-20);color:var(--blue-d);text-decoration:none}
.sso-btn:hover{background:var(--blue);color:#fff}
.sso-btn>.ico:first-child{width:26px;height:26px;flex:0 0 26px}
.sso-btn>.ico:last-child{margin-left:auto;width:20px;height:20px;transform:rotate(-90deg)}
.sso-btn span{display:flex;flex-direction:column;line-height:1.2}
.sso-btn small{font-weight:500;opacity:.85;font-size:.82rem}
.auth-or{display:flex;align-items:center;gap:.8rem;color:var(--muted);font-size:.85rem;margin:1.1rem 0}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-forgot{text-align:right;margin:.1rem 0 .6rem}
.auth-2fa{margin:.4rem 0 1rem}
.auth-2fa strong{display:flex;align-items:center;gap:.4rem;color:var(--blue-d)}
.auth-2fa .ico{width:18px;height:18px}
.auth-2fa p{margin:.35rem 0 0;font-size:.86rem;color:var(--ink-soft)}
.btn-block{width:100%;justify-content:center}
.auth-legal{font-size:.82rem;color:var(--muted);margin:1rem 0 0;text-align:center}
.auth-help{display:flex;align-items:center;gap:.6rem;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:.8rem 1rem;color:var(--ink-soft);font-size:.88rem}
.auth-help .ico{width:22px;height:22px;color:var(--blue);flex:0 0 22px}
@media (max-width:900px){
  .auth-split{grid-template-columns:1fr;gap:1.4rem;min-height:0}
  .auth-welcome{order:2;padding:0}
  .auth-welcome h1{font-size:1.8rem}
}

/* Header-Icons (rechts, nur Icons) */
.apptop .brand{margin-right:auto}
.headericons{display:flex;align-items:center;gap:.15rem}
.icon-btn{position:relative;display:inline-flex;color:var(--muted);padding:.42rem;border-radius:var(--radius-xs)}
.icon-btn:hover{color:var(--blue);background:var(--blue-20)}
.icon-btn.aktiv{color:#fff;background:var(--blue)}
.icon-btn .ico{width:21px;height:21px}
.navbadge-dot{position:absolute;top:.05rem;right:.05rem;margin:0;font-size:.6rem;line-height:1;
  padding:.08rem .28rem;background:var(--accent);color:#fff;border-radius:999px}

/* Auth: Deko-Grafik (Platzhalter für finales Illustrations-Asset) */
.auth-welcome{display:flex;flex-direction:column;position:relative;overflow:hidden}
.auth-welcome-inner{flex:1 0 auto}
.auth-hint{color:var(--muted);font-size:.92rem;margin:.2rem 0 1rem}

/* Profil: Stammdaten (alle Felder, auch leere) */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.daten-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.25rem 2rem;margin-top:1rem}
.daten-grid h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 .5rem;font-weight:700}
.daten-grid dl{margin:0}
.datenzeile{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--line)}
.datenzeile dt{color:var(--muted);font-size:.9rem}
.datenzeile dd{margin:0;text-align:right;font-weight:600}
/* 13.5: Herkunftshinweis — dezent, aber lesbar. Bewusst KEIN Grau unter dem
   Kontrastminimum: „dezent" heisst zurueckhaltend, nicht unlesbar (WCAG AA). */
.herkunft{display:block;font-weight:400;font-size:.78rem;color:var(--muted);margin-top:.1rem}
.datenzeile dd.leer{font-weight:400}
.platzhalter{color:var(--muted);font-style:italic;font-weight:400;font-size:.88rem}

/* Badge-Varianten für Stammdaten-Status */
.badge-ok{background:var(--ok-bg);color:var(--ok);border-color:#bfe6cd}
.badge-warn{background:#fdf3dd;color:var(--warn);border-color:#f0dda8}

/* Checkbox/Radio in Zeilen-Labels: Label MUSS flex sein (schlägt .form label{display:block}),
   Checkbox natürliche Breite + inline (nicht block/100%). */
.form label.radio-row,.reqform label.radio-row,label.radio-row{display:flex;align-items:flex-start;gap:.6rem}
.form .radio-row input[type=checkbox],.form .radio-row input[type=radio],
.radio-row input[type=checkbox],.radio-row input[type=radio]{
  width:auto;flex:0 0 auto;margin:.15rem 0 0;display:inline-block}
.radio-row span{flex:1 1 auto}

/* Alert-Variante „warn" (z. B. Entwurf-Hinweis auf Rechtstexten) */
.alert.warn{background:#fdf3dd;color:#7a5b00;border:1px solid #f0dda8}
.inhalt h2{color:var(--blue-d);margin-top:1.4rem}
.inhalt h3{color:var(--blue-d);margin-top:1.3rem;font-size:1.02rem}
.inhalt ul{margin:.5rem 0 .5rem 1.2rem}
.inhalt li{margin:.25rem 0}

/* Breadcrumb (4.7, auch für Module) */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:0 0 1.1rem;
  font-size:.86rem;color:var(--muted)}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--blue);text-decoration:underline}
.breadcrumb [aria-current=page]{color:var(--ink);font-weight:600}
.bc-sep{color:var(--muted);opacity:.6}

/* Gefahrenzone: Konto löschen */
.danger-zone{border:1.5px solid #f3c3bd;background:#fdf5f4}
.danger-zone h2{color:var(--accent)}
.btn-danger{display:inline-flex;align-items:center;gap:.4rem;background:var(--accent);color:#fff;
  border:0;padding:.62rem 1.15rem;border-radius:12px;font-weight:700;cursor:pointer}
.btn-danger:hover{background:#c40009}

/* Mobile-Überlauf verhindern: Grid-/Flex-Kinder dürfen unter Inhaltsbreite
   schrumpfen (min-width:auto ist Default und sprengt sonst den Viewport).
   ACHTUNG bei `overflow-x:hidden`: Das ist ein Sicherheitsnetz, keine Lösung —
   es verhindert den Überlauf nicht, es SCHNEIDET ihn ab. Zu breiter Inhalt
   verschwindet also lautlos nach rechts, statt zu scrollen. Wer hier prüft,
   darf sich deshalb nicht auf „das Dokument scrollt nicht" verlassen (das kann
   es gar nicht), sondern muss die Elemente selbst messen. */
html,body{max-width:100%;overflow-x:hidden}

/* Lange Bezeichner in `code` (Funktionsnamen, Feldnamen, Adressen) brechen von
   sich aus nirgends um — im Changelog wurden sie dadurch am rechten Rand
   abgeschnitten und waren schlicht nicht lesbar. `anywhere` erlaubt den Umbruch
   auch mitten im Wort; bei einem Bezeichner ist das besser als ihn zu verlieren. */
code,kbd,samp{overflow-wrap:anywhere}
pre{overflow-x:auto;max-width:100%}

/* Und dasselbe für den Fließtext, aber schonender: `break-word` bricht ein Wort
   NUR, wenn es sonst nicht passt — normale Sprache bleibt unangetastet. Nötig
   wegen technischer Ketten wie „Auth/2FA/Krypto/Tokens/OIDC/Web/DSGVO", die
   Browser nirgends umbrechen: Im Changelog ragten sie 200 px über den Rand und
   wurden dort abgeschnitten (s. `overflow-x:hidden` oben). Portalweit gesetzt,
   damit es auch in jedem künftigen Modul gilt. */
.content,.card,.wrap,.auth-card{overflow-wrap:break-word}
.auth-split>*{min-width:0}
.shell-body>*,.content{min-width:0}
.content{max-width:100%}
.auth-card,.card{max-width:100%}
.auth-features li{min-width:0}
.auth-features strong,.auth-features p,.sso-btn span,.sso-btn small{min-width:0;overflow-wrap:anywhere}

/* Basis-Größe für Inline-Icons (verhindert riesige SVGs in Buttons o.ä.) */
.ico{width:1.1em;height:1.1em;flex:0 0 auto}
.btn-primary .ico,.btn-secondary .ico,.btn-ghost .ico,.btn-danger .ico{width:1.05em;height:1.05em}

/* „geplant"-Tag + Schnittstellen-Hinweis auf der Auth-Seite */
.tag-geplant{display:inline-block;font-size:.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;background:var(--bg-2,#eef2f7);color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:.05rem .5rem;margin-left:.4rem;vertical-align:middle}
.auth-sync{display:flex;gap:.6rem;align-items:flex-start;margin:1.3rem 0 0;font-size:.84rem;
  color:var(--muted);line-height:1.45}
.auth-sync .ico{width:18px;height:18px;color:var(--blue);flex:0 0 18px;margin-top:.1rem}
/* UXC-03: Betreiber-Klarheit direkt unter der Überschrift (wer betreibt das?)
   und Datenschutz in Alltagssprache neben dem Schnittstellen-Hinweis. Gleiche
   Mechanik wie .auth-sync, damit die Zeilen als ein Block gelesen werden. */
/* UXC-03: Nutzen-Moment vor der Registrierung — sichtbar, aber kein Reklame-Banner. */
.nutzen{background:var(--blue-050,#eef5fb);border-left:3px solid var(--blue);
  padding:.7rem .9rem;border-radius:0 6px 6px 0;margin:0 0 1.2rem;font-size:.92rem}
.auth-betreiber{display:flex;gap:.5rem;align-items:center;margin:.3rem 0 .9rem;
  font-size:.86rem;font-weight:600;color:var(--blue)}
.auth-betreiber .ico{width:17px;height:17px;flex:0 0 17px}
.auth-datenschutz{display:flex;gap:.6rem;align-items:flex-start;margin:1.1rem 0 0;
  font-size:.84rem;color:var(--muted);line-height:1.45}
.auth-datenschutz .ico{width:18px;height:18px;color:var(--blue);flex:0 0 18px;margin-top:.1rem}

/* Nachrichten-Thread (Sprechblasen) */
.msg-thread{display:flex;flex-direction:column;gap:.8rem}
.msg{max-width:80%;padding:.7rem .9rem;border-radius:var(--radius-s);border:1px solid var(--line)}
.msg-mir{align-self:flex-end;background:var(--blue-20);border-color:#cfe0f2}
.msg-andere{align-self:flex-start;background:var(--bg-2,#f6f8fb)}
.msg-meta{font-size:.76rem;color:var(--muted);margin-bottom:.3rem}
.msg-body{line-height:1.5;white-space:normal;overflow-wrap:anywhere}

/* Einstellungs-/Modul-Reiter */
.tabs{display:flex;gap:.3rem;flex-wrap:wrap;border-bottom:2px solid var(--line);margin:.4rem 0 1.4rem}
.tabs .tab{padding:.6rem 1rem;font-weight:700;color:var(--muted);text-decoration:none;
  border-bottom:3px solid transparent;margin-bottom:-2px}
.tabs .tab.aktiv{color:var(--blue-d);border-bottom-color:var(--blue)}
.tabs .tab:not(.aktiv):hover{color:var(--blue-d)}
/* Rechte-Zeile mit Klarname + Beschreibung */
.radio-row.recht{align-items:flex-start}
.recht-text{display:block}
.recht-text code{font-size:.78rem;color:var(--muted)}

/* Globales Turnverband-Hintergrundbild (linksbündig, 50% aufgehellt, fixiert) */
body, body.has-shell{
  background-color:#eef2fa;
  background-image:
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)),
    url(/assets/bg-turnverband.webp);
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:cover;
  background-attachment:fixed;
}
/* Mit eingeblendeter Seitenleiste verdeckte die 250px breite Leiste den linken
   Teil des Bildes. Dann faengt es rechts daneben an und wird in voller Breite
   gezeigt. `:has()` beschreibt genau den Fall „Shell MIT Leiste"; Browser ohne
   Unterstuetzung behalten schlicht die bisherige Darstellung. */
@media (min-width:900px){
  body.has-shell:has(.shell-body.with-sidebar){
    background-position:250px bottom;
    background-size:calc(100% - 250px) auto;
  }
}

/* UXC-02: Bebilderte Anleitung. Die Bilder sind Zulieferung — bis sie da sind,
   markiert der Platzhalter sichtbar die Lücke, statt ein kaputtes Bild zu zeigen. */
.anleitung{padding-left:1.3rem}
.anleitung li{margin-bottom:1.4rem}
.anleitung-bild{max-width:min(100%,420px);border:1px solid var(--line);border-radius:8px;display:block}
.bild-platzhalter{border:1px dashed var(--line);border-radius:8px;padding:.7rem .9rem;
  color:var(--muted);font-size:.85rem;background:var(--bg-soft,#f7f8fa)}

/* UXC-03: „Das brauchst Du" im Registrieren-Tab — aufklappbar, damit es den
   Einstieg nicht zutextet, aber vor der ersten Eingabe verfügbar ist. */
.brauchst-du{margin:.2rem 0 1rem;font-size:.88rem}
.brauchst-du summary{cursor:pointer;font-weight:600;color:var(--blue)}
.brauchst-du ul{margin:.6rem 0 .4rem;padding-left:1.2rem}
.brauchst-du li{margin-bottom:.35rem}

/* 7.6/8.6: „Konto absichern" auf der vollen Startseite — Empfehlung, kein Alarm. */
.absichern{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.absichern p{margin:.25rem 0 0;font-size:.88rem}
.absichern .btn-primary{flex:0 0 auto}

/* Mail-Log: der echte Fehlertext von Microsoft plus seine Bedeutung. Technisch
   und Klartext getrennt — wer die Kennung kennt, liest sie; wer nicht, liest
   was zu tun ist. */
.mail-fehler{margin-top:.4rem;padding:.5rem .6rem;border-left:3px solid var(--accent);
  background:var(--bg-2,#f7f8fa);border-radius:0 4px 4px 0}
.mail-fehler code{font-size:.78rem;color:var(--ink-soft);word-break:break-word}
.mail-fehler p{margin:.35rem 0 0;font-size:.84rem}

/* ===== Schaltflächen-Sprache (13.1) — verbindlich für Core UND Fachmodule =====

   Vor dem Klick muss erkennbar sein, WAS passiert. Deshalb zwei Merkmale, die
   nie vermischt werden:

     GEFÜLLT  = es wird etwas ausgeführt (POST): Lauf starten, speichern,
                aktivieren.  →  .btn-primary (blau), .btn-danger (rot,
                unwiderruflich/löschend)
     UMRANDET = es öffnet sich eine Seite (GET/Navigation): Übersicht, Detail,
                Formular.      →  .btn-secondary (groß), .btn-ghost (klein)

   `btn-mini` ändert AUSSCHLIESSLICH den Maßstab — nie Radius, Rahmen oder
   Füllung. Größenunterschiede sind erlaubt, Formunterschiede nicht: sonst
   wirken zwei Knöpfe mit derselben Bedeutung wie zwei verschiedene Dinge.
   (Zuvor erbte btn-mini die Grundhöhe der Basisklasse — btn-ghost 2.2rem,
   btn-danger 2.75rem — und stand in derselben Zeile unterschiedlich hoch.) */
.btn-mini{font-size:.72rem;padding:.2rem .6rem;margin-top:.25rem}
.btn-primary.btn-mini,.btn-secondary.btn-mini,.btn-ghost.btn-mini,.btn-danger.btn-mini{
  min-height:1.95rem;border-radius:10px;box-shadow:none}

/* Kennzeichnung am Navigationseintrag (z. B. „Preview"): klein, neben dem
   Namen, nie im Namen selbst — sonst stuende sie auch im Breadcrumb. */
.nav-badge{margin-left:auto;font-size:.62rem;padding:.05rem .4rem}
.navlink .nav-badge{flex:0 0 auto}

/* Aktionsreihe in einer Tabellenzelle: gleicher Abstand, sauberer Umbruch.
   Ersetzt das frühere Nebeneinander aus nackten Links und Schaltflächen. */
/* Die Aktionen einer Zeile stehen NEBENEINANDER, nicht untereinander: eine
   Spalte, in der Schaltflaechen stapeln, zieht die Zeilenhoehe auf und laesst
   die Tabelle zerfallen. Deshalb kein Umbruch — und die Spalte nimmt genau die
   Breite, die sie braucht (width:1px + min-content), damit der restliche Platz
   an die Datenspalten geht. Wird es zu eng, scrollt `.tabelle-scroll`.
   Faustregel fuer alle Module: hoechstens drei Aktionen in der Zeile, alles
   Weitere gehoert auf die Detail-/Bearbeiten-Seite. */
.zeilen-aktionen{display:flex;flex-wrap:nowrap;gap:.35rem;align-items:center;justify-content:flex-end}
.zeilen-aktionen .inline-form{margin:0}
.check-table td.spalte-aktionen,.check-table th.spalte-aktionen{
  width:1px;white-space:nowrap;text-align:right;vertical-align:middle}

/* Rollen-Spalte der Benutzerliste: kompakt, umbrechend, nicht dominant. */
.rollen-zelle{max-width:16rem}
.rollen-zelle .badge{margin:0 .2rem .2rem 0;font-size:.72rem}

/* Spam-Schutz: Honeypot. Bewusst NICHT display:none — manche Bots ignorieren
   das gezielt. Aus dem Sichtfeld schieben wirkt zuverlaessiger; aria-hidden und
   tabindex=-1 halten Screenreader und Tastatur davon fern. */
.hp-feld{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ===== Schaltflächen und Auswahlfelder vereinheitlichen =====================
   Zwei Ursachen für das uneinheitliche Bild:

   1. Die btn-Klassen setzten KEIN font-family. Ein <button class="btn-secondary">
      erbt die Schrift nicht — Browser geben Schaltflächen die System-Schrift —,
      ein <a class="btn-secondary"> dagegen schon. Nebeneinander wirkten sie wie
      zwei verschiedene Komponenten, obwohl im Code dieselbe Klasse steht.
   2. Unterschiedliche Innenabstände ergaben in einer Reihe unterschiedliche
      Höhen. Die Größen bleiben gestuft (primär > sekundär > ghost) — aber sie
      stehen jetzt auf einer gemeinsamen Grundlinie. */
.btn-primary,.btn-secondary,.btn-ghost,.btn-danger{
  font-family:inherit;line-height:1.25;text-decoration:none;
  vertical-align:middle;justify-content:center;white-space:nowrap}
.btn-primary,.btn-secondary,.btn-danger{min-height:2.75rem}
.btn-ghost{min-height:2.2rem}
/* Reihen aus Schaltflächen: gleicher Abstand, saubere Umbrüche auf schmalen
   Schirmen statt gequetschter Nebeneinanderstellung. */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.card-head h2{margin:0}
.inline-form{align-items:center}
.btn-mini{min-height:0;line-height:1.2}

/* Auswahlfelder: waren nur innerhalb von .form gestylt. In .form-inline
   (Mail-Log-Filter, Benutzersuche) blieben sie im Browser-Standard und sahen
   neben den gestylten Feldern wie ein Fremdkörper aus.
   Der Pfeil ist ein eingebettetes SVG — kein externer Abruf (CSP) und kein JS. */
select{font-family:inherit}
.form-inline select,.form-inline input,.form-inline button{vertical-align:middle}
.form-inline select,.form-inline input[type=search],.form-inline input[type=text]{
  padding:.6rem .8rem;border:1.5px solid #d6dfeb;border-radius:11px;font:inherit;
  color:var(--ink);background:#fff;min-height:2.75rem;
  transition:border-color .16s,box-shadow .16s}
.form-inline select:focus,.form-inline input:focus{
  outline:none;border-color:var(--blue);box-shadow:var(--ring)}
.form select,.form-inline select,.reqform select,.steerform select{
  -webkit-appearance:none;appearance:none;padding-right:2.2rem;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231770B8' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem}

/* Kurskategorien: In den echten Daten hat eine Person bis zu 13 davon — als
   Aufzaehlung lesbar, als Fliesstext nicht. */
.kategorien{list-style:none;padding:0;margin:.4rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem}
.kategorien li{background:var(--bg-2,#f7f8fa);border:1px solid var(--line);
  border-radius:999px;padding:.2rem .7rem;font-size:.82rem}

/* Stammdaten in Bloecke statt vier gleich breiter Spalten (Befund 20.07.2026):
   Person und Adresse sind kurze Wertepaare, „Beim BTV" enthaelt Listen. In
   einer gemeinsamen Spaltenreihe quoll der BTV-Bereich ueber, waehrend die
   meist leere Bankverbindung genauso viel Platz bekam. */
.daten-grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.daten-block{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.daten-block>h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin:0 0 .75rem;font-weight:700}
.daten-block-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1rem 2rem;align-items:start}
.daten-block dl{margin:0}
/* Die Bankverbindung steht allein im Block — ohne Begrenzung liefen Label und
   Wert ueber die volle Seitenbreite auseinander. */
.daten-schmal{max-width:34rem}
.btv-listen h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin:0 0 .4rem;font-weight:700}
.btv-listen h4+ul{margin-bottom:1rem}
/* Herkunft einmal pro Gruppe statt an jedem Feld — als Satz wiederholte sie
   sich sechsmal und war praesenter als die Werte, die sie erklaert. */
.gruppe-quelle{font-size:.8rem;color:var(--muted);margin:.1rem 0 .6rem;line-height:1.4}
.daten-block .gruppe-quelle{margin-top:.6rem}
/* Lizenzen als Liste, nicht als Chips: Die Bezeichnungen sind lang („UEL B
   Breitensport Sport i.d. Praevention …") und sprengen jede Pille. */
.liste-lizenzen{list-style:none;padding:0;margin:0}
.liste-lizenzen li{padding:.45rem 0;border-bottom:1px solid var(--line)}
.liste-lizenzen li:last-child{border-bottom:none}
.lizenz-art{display:block;font-weight:600;font-size:.92rem;overflow-wrap:anywhere}
.lizenz-meta{display:block;font-size:.82rem;color:var(--muted);margin-top:.1rem}

/* ================================================================
   Profil & Kontoseite: Kopfbereich + anordenbare Bloecke
   ================================================================ */

/* Kopfbereich. Traegt die Frage „wer bin ich hier und ist etwas offen?" —
   deshalb Identitaet links, Zustand rechts, und sonst nichts. */
.profilkopf{display:grid;grid-template-columns:1fr auto;gap:1.5rem 2rem;align-items:center;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-d) 100%);
  color:#fff;border-radius:var(--radius);padding:1.6rem 1.8rem;
  box-shadow:var(--shadow-blue);margin-bottom:1.25rem;position:relative;overflow:hidden}
/* Ruhiger Lichtschein statt Deko-Grafik: gibt Tiefe, lenkt nicht ab. */
.profilkopf::after{content:"";position:absolute;inset:auto -60px -120px auto;
  width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.pk-links{display:flex;align-items:center;gap:1.25rem;min-width:0}
.pk-text{min-width:0}
.profilkopf h1{color:#fff;font-size:1.05rem;font-weight:600;letter-spacing:.02em;
  opacity:.85;margin:0 0 .1rem}
.pk-name{font-family:var(--font-head);font-size:1.75rem;line-height:1.15;margin:0 0 .35rem;
  overflow-wrap:anywhere}
.pk-meta{margin:0;font-size:.9rem;opacity:.88;overflow-wrap:anywhere}
.pk-meta strong{font-weight:600}
.pk-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.chip{display:inline-block;padding:.22rem .7rem;border-radius:999px;font-size:.78rem;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28)}
.chip-ok{background:rgba(255,255,255,.92);color:var(--ok);border-color:transparent;font-weight:600}
.chip-warn{background:#fff3d6;color:#8a5d00;border-color:transparent;font-weight:600}
.avatar-xl{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:3px solid rgba(255,255,255,.75);box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.pk-rechts{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center}
.pk-fortschritt-text{margin:0;font-size:.78rem;opacity:.85}
.pk-bild{display:flex;flex-direction:column;gap:.4rem;align-items:stretch;margin-top:.6rem;width:100%;max-width:190px}
.pk-rechts .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.pk-rechts .btn-ghost:hover{background:rgba(255,255,255,.14)}

/* Fortschrittsring: eine Zahl, die etwas aussagt — keine Dekoration. */
.fortschritt{position:relative;width:76px;height:76px;display:grid;place-items:center}
.fortschritt svg{position:absolute;inset:0}
.fs-bahn{stroke:rgba(255,255,255,.25)}
.fs-wert{stroke:#fff;transition:stroke-dasharray .6s var(--ease)}
.fs-zahl{font-family:var(--font-head);font-size:1.25rem;line-height:1}
.fs-zahl small{font-size:.62rem;opacity:.8;margin-left:1px}

.pk-aufgaben{align-items:flex-start;text-align:left;background:rgba(255,255,255,.12);
  border-radius:var(--radius-s);padding:.8rem 1rem;max-width:22rem}
.pk-aufgaben h2{color:#fff;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;
  margin:0 0 .35rem;opacity:.85}
.pk-aufgaben ul{margin:0;padding-left:1.1rem;font-size:.88rem}

.block-hinweis{margin:0 0 1rem;font-size:.85rem}
.zurueck-link{margin:0 0 .75rem}

/* Blockraster. Bewusst auto-fit statt fester Spalten: Ein Modul, das spaeter
   Bloecke beisteuert, soll sich einfuegen, ohne dass hier jemand nachzaehlt. */
.block-raster{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem;align-items:start}
.block{grid-column:span 12;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.block--breit{grid-column:span 7}
.block--schmal{grid-column:span 5}
.block--voll{grid-column:span 12}
@media (max-width:1100px){
  .block--breit,.block--schmal{grid-column:span 12}
}
.block:hover{box-shadow:var(--shadow-md)}
.block-kopf{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;
  border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,#fff,var(--bg-2))}
.block-titel{margin:0;font-size:1.02rem;font-family:var(--font-head);flex:1 1 auto;min-width:0;
  overflow-wrap:anywhere}
.block-inhalt{padding:1.1rem}
.block-fuss{margin:.9rem 0 0;font-size:.85rem}

/* Der Griff ist nur sinnvoll, wenn das Skript laeuft — ohne JS waere er ein
   Bedienelement, das nichts tut. Deshalb blendet ihn erst `hat-js` ein. */
.block-griff{display:none;color:var(--muted);cursor:grab;padding:.2rem;border-radius:var(--radius-xs);
  touch-action:none;flex:0 0 auto}
body.hat-js .block-griff{display:inline-flex}
.block-griff:hover{color:var(--blue);background:var(--blue-20)}
.raster-zieht .block-griff{cursor:grabbing}
.block-werkzeuge{display:flex;align-items:center;gap:.2rem;flex:0 0 auto}
.block-mini{display:flex;gap:.15rem;margin:0}
.block-knopf{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;
  border:1px solid transparent;border-radius:var(--radius-xs);background:transparent;
  color:var(--muted);cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
.block-knopf:hover:not(:disabled){background:var(--blue-20);color:var(--blue-d)}
.block-knopf:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--blue)}
.block-knopf:disabled{opacity:.3;cursor:default}
.block-klapp svg{transition:transform .25s var(--ease)}
.block.ist-zu .block-klapp svg{transform:rotate(-90deg)}
.block.ist-zu{background:var(--bg-2)}
.block.ist-zu .block-kopf{border-bottom-color:transparent}

/* Beim Ziehen: das Original bleibt sichtbar an seiner neuen Stelle, damit man
   das Ergebnis SIEHT, statt einer Attrappe zu folgen. */
.block.wird-gezogen{box-shadow:var(--shadow-lg);transform:scale(1.015);
  border-color:var(--blue-l);position:relative;z-index:5}
.raster-zieht .block:not(.wird-gezogen){opacity:.7}

.block-reset{margin:1.1rem 0 0;text-align:right}

/* Inhalte in Bloecken */
.aktionsliste{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.aktionsliste a{display:block;padding:.7rem .9rem;border:1px solid var(--line);
  border-radius:var(--radius-s);text-decoration:none;color:inherit;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.aktionsliste a:hover{border-color:var(--blue-l);background:var(--bg-2)}
.al-titel{display:block;font-weight:600}
.al-text{display:block;font-size:.84rem;color:var(--muted);margin-top:.1rem}
.statusliste{margin:0}
.konto-identitaet{margin:0 0 .8rem}
.rollenliste{list-style:none;padding:0;margin:0 0 .9rem;display:grid;gap:.45rem}
.rollenliste li{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.5rem .7rem;border:1px solid var(--line);border-radius:var(--radius-s)}
.rolle-name{font-weight:600}
.rolle-quelle{font-size:.8rem}
.rolle-neu{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

@media (max-width:720px){
  .profilkopf{grid-template-columns:1fr;padding:1.2rem}
  .pk-links{flex-direction:column;align-items:flex-start;text-align:left}
  .pk-rechts{align-items:flex-start;text-align:left}
  .pk-aufgaben{max-width:none}
  .block-raster{gap:.9rem}
}

/* „Weniger Bewegung" respektieren — die Uebergaenge sind Beiwerk. */
@media (prefers-reduced-motion:reduce){
  .block,.block-knopf,.block-klapp svg,.fs-wert,.aktionsliste a{transition:none}
  .block.wird-gezogen{transform:none}
}

/* Rollen-Vorschlag: als Angebot erkennbar, nicht als bereits vergebene Rolle. */
.rolle-vorschlag{margin:0 0 .9rem;padding:.7rem .9rem;border:1px dashed var(--blue-l);
  border-radius:var(--radius-s);background:var(--bg-2);display:flex;flex-wrap:wrap;
  gap:.5rem;align-items:center}
.rolle-vorschlag p{margin:0;flex:1 1 100%;font-size:.85rem}

/* T6: Der Korrektur-Weg ist zweitrangig und klebte im Test direkt an den
   „Erneut senden"-Buttons. Abstand + feine Linie setzen ihn ab. */
.warten-korrektur{margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--line)}

/* Bild-Aktionen: eine einheitliche Knopf-Gruppe (27.07.). Das native
   <input type=file> ist versteckt; Label und die beiden Buttons sind gleich
   breit und gleich gestylt, statt drei verschieden große Elemente wie zuvor. */
.pk-bild-form{width:100%;margin:0}
.pk-btn{display:flex;width:100%;justify-content:center;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#fff;border-color:rgba(255,255,255,.5);font-size:.85rem}
.pk-btn:hover{background:rgba(255,255,255,.16)}
.pk-btn.pk-hat-datei{border-color:#fff;background:rgba(255,255,255,.14)}

/* I1: Rollen-Gruppen-Überschriften im Block */
.rollen-gruppe{font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);margin:.9rem 0 .3rem;display:flex;align-items:center;gap:.5rem}
.rollen-gruppe:first-child{margin-top:0}
.rollen-gruppe-hint{margin:0 0 .5rem;font-size:.82rem}

/* T7 (Abnahme): .alert war display:flex — dadurch wurde JEDES Inline-Element im
   Text zu einem eigenen Flex-Item. Eine lange E-Mail in <strong> landete so in
   einer schmalen Spalte, und der Satz zerriss in Kolumnen (Passwort-vergessen-
   Bestätigung). Icon als Inline-Prefix, Text fließt wieder normal. Gilt für alle
   Alerts — dieselbe Falle lauerte überall, wo ein <strong>/<a> im Alert steht. */
.alert{display:block}
.alert::before{display:inline-block;margin-right:.5rem;vertical-align:baseline}

/* F4 (Abnahme): Der lange Text „In Authenticator-App öffnen" sprengte die
   schmale Setup-Spalte, weil .btn-primary inline-flex ohne Umbruch ist. In den
   Setup-Wegen den Button vollbreit und umbruchfähig machen — er bleibt in der
   Spalte statt herauszuragen. */
.setup-weg .btn-primary,.setup-weg .btn-secondary{
  display:flex;width:100%;justify-content:center;text-align:center;white-space:normal}

/* T8 (Abnahme): Das Sammelpostfach-Panel (info@) war „unübersichtlich" — .alert
   setzt global font-weight:600, also stand der ganze Drei-Absatz-Text fett.
   Absätze auf Normalgewicht; <strong> bleibt zur Betonung. Gilt für alle
   mehrteiligen Alerts und macht sie lesbar. */
.alert p{font-weight:400;margin:.45rem 0 0;line-height:1.45}
.alert p:first-of-type{margin-top:.3rem}

/* Profil-Aufräumen (27.07.): Wird ein Stammdaten-Abschnitt als eigener Block mit
   eigenem Kopf gerendert, sind die interne Überschrift und die Trenner-Linie
   überflüssig — der Inhalt steht dann direkt unter dem Block-Kopf, ohne Leerraum. */
.daten-block-kompakt{margin:0;padding:0;border:0}
.daten-block-kompakt .daten-block-split{margin-top:0}

/* ---- Inline-Hilfe (13.x) ------------------------------------------------------
   Erklaerungen, die man abschalten kann. Ruhig gehalten: Sie sollen erklaeren,
   nicht warnen — deshalb kein Alarmton, sondern eine zurueckhaltende Flaeche
   mit Fragezeichen-Marke. */
.inline-hilfe{display:flex;gap:.65rem;align-items:flex-start;margin:.6rem 0 1rem;
  padding:.75rem .9rem;background:#f2f7fd;border:1px solid #d7e6f6;
  border-radius:var(--radius-xs);color:var(--ink-soft);font-size:.92rem;line-height:1.5}
.inline-hilfe strong{color:var(--blue-d)}
.inline-hilfe code{background:#e3edf9;padding:.05rem .3rem;border-radius:4px;font-size:.85em}
.inline-hilfe-marke{flex:0 0 1.35rem;height:1.35rem;border-radius:50%;
  background:var(--blue);color:#fff;font-weight:800;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;margin-top:.05rem}
.inline-hilfe ul{margin:.4rem 0 0;padding-left:1.1rem}
.inline-hilfe li{margin:.2rem 0}
/* Der Schalter in der Kopfzeile ist BESCHRIFTET — als reines Symbol zwischen
   sechs anderen Symbolen war er nicht auffindbar. Sein Zustand steht als Wort
   daneben, nicht nur in der Farbe (und zusaetzlich in aria-pressed). */
.hilfe-schalter{display:inline-flex;align-items:center;gap:.4rem;font:inherit;
  font-size:.82rem;font-weight:700;cursor:pointer;padding:.3rem .6rem;
  border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--muted)}
.hilfe-schalter:hover{border-color:var(--blue);color:var(--blue)}
.hilfe-schalter .ico{width:17px;height:17px}
.hilfe-schalter-zustand{font-size:.72rem;padding:.05rem .4rem;border-radius:999px;
  background:var(--line-soft);color:var(--muted)}
.hilfe-schalter.aktiv{border-color:var(--blue);color:var(--blue-d);background:var(--blue-20)}
.hilfe-schalter.aktiv .hilfe-schalter-zustand{background:var(--blue);color:#fff}
/* Auf schmalen Schirmen bleibt das Symbol, der Text weicht. */
@media (max-width:1100px){ .hilfe-schalter-text{display:none} }

/* ---- Oeffentliche Anmeldeformulare (Newsletter, v2) ---------------------------
   Werden auch eingebettet ausgeliefert (?embed=1) — dann ohne Portal-Rahmen.
   Deshalb bringt der Block seine eigene Grundflaeche mit und bleibt schmal
   genug, um in einer fremden Spalte zu funktionieren. */
.nl-embed{max-width:44rem;margin:0 auto;padding:1.2rem}
.nl-opt{padding:.7rem 0;border-bottom:1px solid var(--line-soft)}
.nl-opt:last-of-type{border-bottom:0}
.nl-opt strong{color:var(--blue-d)}
.nl-opt .feld-hilfe{margin:.15rem 0 .35rem}

/* Sortierbare Tabellenkoepfe: Der Zustand steht in aria-sort (auch fuer die
   Vorlesefunktion), das Dreieck ist nur die sichtbare Entsprechung. */
.check-table th.sortierbar{cursor:pointer;user-select:none}
.check-table th.sortierbar:hover{color:var(--blue)}
.check-table th.sortierbar::after{content:"\2195";margin-left:.35rem;opacity:.35;font-weight:400}
.check-table th[aria-sort=ascending]::after{content:"\2191";opacity:1}
.check-table th[aria-sort=descending]::after{content:"\2193";opacity:1}

/* Aufklappbare Liste im Katalog: Die Ueberschrift ist der Schalter. */
.katalog-liste>summary{cursor:pointer;list-style:none}
.katalog-liste>summary::-webkit-details-marker{display:none}
.katalog-liste>summary h2{display:inline-flex;align-items:center;gap:.5rem;margin:0}
.katalog-liste>summary::before{content:"\25B8";display:inline-block;margin-right:.5rem;
  color:var(--muted);transition:transform .15s var(--ease)}
.katalog-liste[open]>summary::before{transform:rotate(90deg)}
.katalog-mitlauf{margin-top:.8rem;border-top:1px solid var(--line-soft);padding-top:.6rem}
.katalog-mitlauf>summary{cursor:pointer}

/* Segment-Auswahl im Verbindungs-Formular: ein Block je Empfaengerliste.
   app.js blendet ueber [hidden] auf die gewaehlte Liste ein — ohne JavaScript
   stehen alle Bloecke da, jeder unter dem Namen seiner Liste. */
.segment-wahl{margin:.4rem 0 .9rem}
.segment-gruppe{border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:.5rem .9rem .7rem;margin:0 0 .6rem}
.segment-gruppe>legend{font-weight:700;color:var(--ink-soft);padding:0 .35rem}
.segment-gruppe .radio-row span{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.segment-gruppe .radio-row .muted{font-weight:400;font-size:.92em}
.segment-wahl [hidden]{display:none}

/* ---------------------------------------------------------------------------
   Mobil: Seitenleiste einklappbar
   Auf schmalen Geraeten schob die Leiste den Inhalt weit nach unten (gemessen:
   erste Ueberschrift erst bei y=555 von 900 sichtbaren Pixeln — zwei Drittel
   des ersten Bildschirms waren Navigation). Als natives <details> laesst sie
   sich zuklappen; die Zusammenfassung ist am Desktop unsichtbar, dort bleibt
   alles wie bisher.
   --------------------------------------------------------------------------- */
.navklapp>summary{list-style:none;display:none}
.navklapp>summary::-webkit-details-marker{display:none}
.navklapp-knopf{align-items:center;gap:.55rem;cursor:pointer;
  padding:.7rem .8rem;margin:0;border-radius:var(--radius-xs);
  font-family:var(--font-head);font-weight:700;color:var(--blue-d);background:var(--bg-2)}
.navklapp-knopf:hover{background:var(--blue-20)}
.navklapp-knopf:focus-visible{outline:none;box-shadow:var(--ring)}
.navklapp-knopf .ico{width:20px;height:20px;flex:0 0 20px}

@media (max-width:900px){
  .navklapp>summary{display:flex}
  /* Zugeklappt darf die Leiste keinen Rand mehr aufspannen — sonst bleibt ein
     leerer Streifen stehen, der aussieht wie ein Darstellungsfehler. */
  .sidebar:has(.navklapp:not([open])){border-bottom:0;padding-bottom:0}
}

/* Tippziele: mindestens 44x44 CSS-Pixel, wo mit dem Finger bedient wird
   (WCAG 2.5.8 „Target Size", Apple HIG). Gemessen waren auf der Startseite 18,
   in einem geoeffneten Modul 30 Ziele darunter — vor allem die Kopfzeilen-
   Symbole und die Untermenue-Eintraege. Gilt fuer Fingerbedienung UND schmale
   Fenster: `pointer:coarse` allein waere richtig gedacht, laesst sich aber
   nicht nachmessen (Pruefwerkzeuge melden durchweg eine Maus) — und eine
   Regel, deren Wirkung niemand nachweisen kann, ist keine.
   Fliesstext-Links bleiben aussen vor: Die nimmt WCAG 2.5.8 ausdruecklich aus,
   und 44 px hohe Zeilen mitten im Satz wuerden den Text zerreissen. */
@media (max-width:900px), (pointer:coarse){
  .icon-btn{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .navlink,.navlink-sub{min-height:44px}
  .navlink-sub{padding-top:.6rem;padding-bottom:.6rem}
  .usermenu>summary{min-height:44px}
  .hilfe-schalter{min-height:44px}
  .viewas select,.viewas-go{min-height:44px}
  .btn-mini{min-height:40px}
  .zeilen-aktionen{gap:.4rem}
}

/* ---------------------------------------------------------------------------
   Funktionsmenue in der Kopfzeile
   Am Desktop unveraendert: Zusammenfassung unsichtbar, Inhalt steht als Reihe
   nebeneinander. Auf dem Handy passte das nicht — die Kopfzeile brach in drei
   Zeilen um, und das Benutzermenue klappte aus dem Bildschirm heraus, weil sein
   Anker weit links stand. Dort wird daraus ein Klappmenue; oben bleiben Logo,
   dieses Menue und das Profilbild.
   --------------------------------------------------------------------------- */
.funktionen{position:relative}
.funktionen>summary{list-style:none;display:none;position:relative}
.funktionen>summary::-webkit-details-marker{display:none}
.funktionen-inhalt{display:flex;align-items:center;gap:.7rem}
.funktionen-knopf{align-items:center;justify-content:center;cursor:pointer;
  width:44px;height:44px;border-radius:var(--radius-xs);color:var(--muted)}
.funktionen-knopf:hover{color:var(--blue);background:var(--blue-20)}
.funktionen-knopf:focus-visible{outline:none;box-shadow:var(--ring)}
.funktionen[open]>.funktionen-knopf{color:var(--blue);background:var(--blue-20)}
.funktionen-knopf .ico{width:24px;height:24px}

@media (max-width:900px){
  .funktionen>summary{display:inline-flex}
  /* Das Klappfenster haengt am RECHTEN RAND DER KOPFZEILE, nicht am Burger:
     Der steht links vom Profilbild, sein rechter Rand liegt also mitten auf dem
     Bildschirm — gemessen ragte das Fenster damit 16 px links heraus. Anker ist
     deshalb `.apptop-right`; `.funktionen` gibt seine eigene Verankerung ab. */
  .apptop-right{position:relative}
  .funktionen{position:static}
  .funktionen-inhalt{position:absolute;top:calc(100% + .45rem);right:0;z-index:40;
    flex-direction:column;align-items:stretch;gap:.5rem;
    width:max-content;min-width:min(260px,calc(100vw - 1.8rem));max-width:calc(100vw - 1.8rem);
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);
    box-shadow:var(--shadow-md);padding:.6rem}
  .funktionen-inhalt .headericons{flex-wrap:wrap;gap:.25rem}
  .funktionen-inhalt .viewas{width:100%;flex-wrap:wrap;margin:0}
  .funktionen-inhalt .viewas-label{flex:1 1 auto;min-width:0;max-width:none}
  .funktionen-inhalt .viewas select{flex:1 1 auto;min-width:0;max-width:none}
  .funktionen-inhalt .hilfe-schalter{width:100%;justify-content:flex-start}
  .funktionen-inhalt .hilfe-schalter-text{display:inline}

  /* Auch das Benutzermenue bekommt die Bildschirmgrenze als Hoechstbreite —
     genau das fehlte: Es stand links und ging nach links aus dem Bild. */
  .usermenu-pop{max-width:calc(100vw - 1.8rem);min-width:min(230px,calc(100vw - 1.8rem))}

  /* Mit allem im Klappmenue passt die Kopfzeile wieder in EINE Zeile — der
     Rollen-Umschalter braucht dort also keine eigene Zeile mehr. */
  .apptop-right{flex-wrap:nowrap;justify-content:flex-end;gap:.15rem}
  .viewas{flex:0 0 auto;margin-top:0}
  .apptop .brand{margin-right:auto;min-width:0}
  .brand-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---------------------------------------------------------------------------
   Tabellen auf schmalen Geraeten: stapeln statt schieben
   Waagrechtes Scrollen in einer Tabelle ist auf dem Handy die schlechteste
   Loesung — man sieht nie Zeile und Spaltenkopf gleichzeitig und verliert beim
   Wischen die Zuordnung. Deshalb wird jede Zeile zu einer kleinen Karte, in der
   VOR jedem Wert sein Spaltenname steht.
   Der Spaltenname kommt aus `data-spalte` an der Zelle; CSS kann den
   Tabellenkopf nicht auslesen. Ohne `data-spalte` bleibt die Zelle lesbar, nur
   eben ohne Beschriftung — kein Grund fuer eine kaputte Anzeige.
   Anwenden mit `data-stapeln` an der Tabelle. Gilt fuer Kern UND Module.
   --------------------------------------------------------------------------- */
@media (max-width:760px){
  /* Kein Scroll-Rahmen mehr noetig — die Karten passen von selbst. */
  .tabelle-scroll:has(table[data-stapeln]){overflow-x:visible}
  table[data-stapeln],
  table[data-stapeln] tbody,
  table[data-stapeln] tr,
  table[data-stapeln] td{display:block;width:auto}
  /* Der Kopf wird ganz ausgeblendet. Erst versucht mit der „unsichtbar, aber
     vorlesbar"-Technik — die Kopfzellen behielten darin aber ihre Tabellen-
     Breite und ragten gemessen 492 px nach rechts hinaus. Und der Nutzen waere
     gering: Sobald Tabelle, Zeile und Zelle auf `block` stehen, ist die
     Tabellensemantik ohnehin dahin; die Spaltennamen stehen stattdessen als
     Text vor jedem Wert. */
  table[data-stapeln] thead{display:none}
  table[data-stapeln] tr{border:1px solid var(--line);border-radius:var(--radius-s);
    padding:.55rem .75rem;margin:0 0 .6rem;background:#fff}
  table[data-stapeln] tr:last-child{margin-bottom:0}
  table[data-stapeln] td{border:0;padding:.3rem 0;display:flex;gap:.8rem;
    align-items:flex-start;justify-content:space-between;text-align:right;
    /* Lange Schluessel wie `aufbewahrung.konto_pseudonymisiert` passen sonst
       nicht in die Karte und werden am Rand abgeschnitten. */
    overflow-wrap:anywhere;min-width:0}
  table[data-stapeln] td+td{border-top:1px dashed var(--line-soft)}
  table[data-stapeln] td::before{content:attr(data-spalte);flex:0 0 40%;
    text-align:left;font-weight:600;color:var(--muted);font-size:.85rem}
  table[data-stapeln] td[data-spalte=""]::before,
  table[data-stapeln] td:not([data-spalte])::before{content:none}
  /* Zellen, in denen nur Aktionen stehen, brauchen die volle Breite. Wichtig:
     `width:1px` + `white-space:nowrap` zuruecknehmen — das haelt die
     Aktionsspalte in der NORMALEN Tabelle schmal, machte hier aber die ganze
     Karte 80 px breit und quetschte Auswahl- und Notizfeld darin zusammen. */
  table[data-stapeln] td.spalte-aktionen{justify-content:flex-start;text-align:left;
    flex-direction:column;align-items:stretch;gap:.35rem;
    width:auto;white-space:normal}
  table[data-stapeln] td.spalte-aktionen::before{flex:0 0 auto;text-align:left}
  table[data-stapeln] .zeilen-aktionen{flex-wrap:wrap}
  /* Eingabereihen in einer Zelle (z. B. „Herkunft eintragen") stehen sonst
     starr nebeneinander — gemessen ragte allein das Auswahlfeld 10 px heraus.
     Gestapelt bekommt jedes Feld eine eigene Zeile. */
  table[data-stapeln] .form-inline{display:flex;flex-wrap:wrap;gap:.35rem;width:100%}
  table[data-stapeln] .form-inline select,
  table[data-stapeln] .form-inline input[type=text]{flex:1 1 100%;min-width:0;max-width:100%}
  table[data-stapeln] .form-inline button{flex:0 0 auto}
  /* Leere Zellen wuerden nur eine Beschriftung ohne Wert zeigen. */
  table[data-stapeln] td:empty{display:none}
}

/* ---- Modul „digi": Formular- und Vorgangsdetails ------------------------------
   Nur das, was die vorhandenen Bausteine (.card, .checks, .note, .badge) nicht
   schon abdecken: Pflichtkennzeichen, Feldfehler und die Zeitleiste im Vorgang. */
.pflicht{color:var(--red,#b3261e);font-weight:600}
.feld-fehler{display:block;margin:-.4rem 0 .7rem;color:var(--red,#b3261e);font-size:.86rem}
.note-fehler{border-left-color:var(--red,#b3261e);
  background:linear-gradient(180deg,#fdf2f1,#fff8f7);border-color:#f3d5d2}
/* Zwei zusammengehoerige Felder (Linktitel + Adresse) nebeneinander. */
.feld-paar{display:flex;gap:.6rem;flex-wrap:wrap}
.feld-paar label{flex:1 1 14rem;min-width:0}
.liste-schlicht{margin:.2rem 0 .8rem;padding-left:1.1rem}
.liste-schlicht li{margin:.15rem 0}
/* Verlauf/Nachrichten als Zeitleiste. */
.zeitleiste{list-style:none;margin:0;padding:0;border-left:2px solid var(--line,#e2e8f0)}
.zeitleiste li{position:relative;padding:.15rem 0 .9rem 1rem}
.zeitleiste li::before{content:"";position:absolute;left:-5px;top:.55rem;width:8px;height:8px;
  border-radius:50%;background:var(--blue,#1f6feb)}
.zeitleiste .zeit{display:block;font-size:.82rem;color:var(--muted,#64748b)}
.zeitleiste .text{white-space:pre-wrap}
/* Kennwerte eines Vorgangs (Feld/Wert-Paare). */
.kennwerte{display:grid;grid-template-columns:minmax(9rem,auto) 1fr;gap:.35rem .9rem;margin:0}
.kennwerte dt{color:var(--muted,#64748b)}
.kennwerte dd{margin:0;white-space:pre-wrap}
@media (max-width:640px){.kennwerte{grid-template-columns:1fr}
  .kennwerte dd{margin:0 0 .5rem}}
/* Board-Filter und Kennzahlenzeile des Moduls „digi". */
.filter-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.9rem}
.filter-feld label{display:block}
.filter-feld select[multiple]{width:100%}
.zaehlung{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;list-style:none;margin:0;padding:0}
.zaehlung li{display:flex;align-items:baseline;gap:.35rem}
.zaehlung-wert{font-size:1.35rem;font-weight:700;color:var(--blue-d,#1b4fa8)}
.text-block{white-space:pre-wrap}

/* ---- Modul Medienakkreditierung ------------------------------------------ */
.verborgen { display: none !important; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pflicht { color: var(--bad, #c00); }
.feld-fehler { color: var(--bad, #c00); font-size: .875rem; margin: .25rem 0 0; }
.feld-paar { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
/* Durchsuchbare Veranstaltungsauswahl */
.ver-suche { position: relative; }
.ver-treffer { list-style: none; margin: .2rem 0 0; padding: .25rem; position: absolute; z-index: 30;
  left: 0; right: 0; background: #fff; border: 1px solid var(--line, #ddd); border-radius: 4px;
  max-height: 16rem; overflow-y: auto; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.ver-treffer li { padding: .5rem .6rem; border-radius: 4px; cursor: pointer; }
.ver-treffer li small { display: block; color: var(--muted, #666); font-size: .8rem; }
.ver-treffer li.aktiv, .ver-treffer li:hover { background: var(--blue-20, #e7f1fa); }
.ver-treffer li.leer { color: var(--muted, #666); cursor: default; }
.ver-info { background: var(--blue-20, #e7f1fa); padding: .5rem .7rem; border-radius: 4px; font-size: .9rem; }
/* SAFE-SPORT-Block */
.safesport { background: var(--line-soft, #f4f4f6); border-radius: 4px; padding: .8rem 1rem; margin-bottom: 1rem; }
.safesport-doc { margin: 0 0 .6rem; font-weight: 600; }
.safesport-status { margin-left: .5rem; font-weight: 400; font-size: .85rem; color: var(--muted, #666); }
.safesport[data-gesehen="1"] .safesport-status { color: var(--ok, #1a7f37); font-weight: 600; }
.safesport input[type=checkbox]:disabled + span { color: var(--muted, #666); }
/* Datenschutzhinweis vor dem Absenden — bewusst nicht kleingedruckt */
.datenschutz-hinweis { background: var(--blue-20, #e7f1fa); border-left: 4px solid var(--blue, #1770B8);
  border-radius: 4px; padding: .8rem 1rem; margin: 0 0 1.5rem; }
/* Board: Zähler + Sammelaktionen */
.zaehler { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0; }
.zaehler-kachel { display: flex; flex-direction: column; align-items: center; min-width: 6.5rem;
  padding: .6rem .8rem; border: 1px solid var(--line, #ddd); border-radius: 6px; text-decoration: none; }
.zaehler-kachel strong { font-size: 1.4rem; }
.zaehler-kachel span { font-size: .75rem; color: var(--muted, #666); text-align: center; }
.zaehler-kachel.aktiv { border-color: var(--blue, #1770B8); }
.zaehler-kachel.leer { opacity: .55; }
.sammel-leiste { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center;
  flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; padding: .7rem .9rem;
  background: #fff; border: 1px solid var(--blue, #1770B8); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.filterzeile { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.pille { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .8rem;
  font-weight: 600; background: var(--line-soft, #f4f4f6); white-space: nowrap; }
.fehlt { color: var(--bad, #c00); font-weight: 600; }
tr.widerrufen, tr.inaktiv { opacity: .6; }
/* Verify-Seite */
.verify { padding: 1.5rem; border-radius: 8px; }
.verify.gueltig { background: #e8f6ec; border: 2px solid #1a7f37; }
.verify.ungueltig { background: #fdeaea; border: 2px solid #c00; }
.verify-daten dt { font-weight: 600; margin-top: .5rem; }
.mailtext { white-space: pre-wrap; word-break: break-word; background: var(--line-soft, #f4f4f6);
  padding: .8rem; border-radius: 4px; font-size: .85rem; }

/* ---------------------------------------------------------------------------
   Anliegen-Board (Modul digi)
   Uebernimmt die Bedienlogik der Vorgaengeranwendung: Umschalter aktiv/Archiv,
   Statusleiste mit Zahlen, Klappfilter mit Ankreuzkaestchen, Prozessschritt.
   Alles ohne Inline-Styles (CSP) und mit den Tokens des Portals.
   --------------------------------------------------------------------------- */
.board-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .7rem}

/* Aktiv/Archiv als zusammenhaengender Umschalter — zwei Links, kein Formular,
   damit kein Bedienelement beim Aendern die Seite wechselt (WCAG 3.2.2). */
.ansicht-schalter{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-s);
  overflow:hidden}
.ansicht-schalter a{padding:.35rem .75rem;text-decoration:none;font-weight:700;font-size:.85rem;
  color:var(--muted);background:#fff;display:inline-flex;align-items:center;gap:.35rem;
  min-height:34px}
.ansicht-schalter a+a{border-left:1px solid var(--line)}
.ansicht-schalter a.aktiv{background:var(--blue);color:#fff}
.ansicht-schalter a:not(.aktiv):hover{color:var(--blue-d);background:var(--bg-2)}

/* `.cnt` bewusst nur unter .ansicht-schalter: Eine allgemein benannte Klasse
   hier zu definieren, hat schon einmal danebengegriffen — `.chip` gibt es im
   Portal bereits fuer Statusangaben in Profil und Benutzerverwaltung. */
.ansicht-schalter .cnt{background:var(--bg-2);color:var(--muted);border-radius:999px;
  padding:.05rem .45rem;font-size:.78rem;font-weight:700;min-width:1.6em;text-align:center}
.ansicht-schalter a.aktiv .cnt{background:rgba(255,255,255,.25);color:#fff}

/* Kopfzeile: Boardauswahl links, der Klapp-Schalter rechts auf gleicher Hoehe.
   Der Schalter liegt absolut in der Reiterzeile, damit er beim Auf- und
   Zuklappen nicht die Zeile wechselt; das Panel faellt darunter ueber die volle
   Breite auf. Die Reiter halten rechts Platz frei, damit nichts ueberlappt.

   Der z-index muss sein: `.card:hover` setzt ein `transform`, und das erzeugt
   einen Stapelkontext — ohne eigenen z-index waere jedes aufgeklappte Feld
   INNERHALB seiner Karte gefangen und die spaetere Tabellenkarte zeichnete
   darueber. Genau so sah der Fehler aus. */
.board-kopf{position:relative;z-index:40;min-height:2.9rem;margin:.4rem 0 1.3rem}
.board-kopf .tabs{margin:0;padding-right:13rem}
.board-tabelle-karte{z-index:1}
.filter-panel{margin-top:.9rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:.85rem 1rem;box-shadow:var(--shadow)}
/* Der Klapp-Schalter. Standard ist zugeklappt — das Board soll mit der Liste
   beginnen, nicht mit Bedienelementen. */
.filter-klapp>summary{position:absolute;right:0;top:0;list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .8rem;
  border:1px solid var(--line);border-radius:var(--radius-s);background:#fff;
  font-weight:700;font-size:.88rem;color:var(--ink-soft);min-height:38px}
.filter-klapp>summary::-webkit-details-marker{display:none}
.filter-klapp>summary:hover{border-color:var(--blue-l);color:var(--blue-d)}
.filter-klapp>summary::after{content:"▾";color:var(--muted);font-size:.8rem;
  transition:transform .18s var(--ease)}
.filter-klapp[open]>summary{border-color:var(--blue);color:var(--blue-d)}
.filter-klapp[open]>summary::after{transform:rotate(180deg)}
.filter-klapp-titel{flex:0 0 auto}

.board-filter .filterreihe{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
/* Das Suchfeld sitzt in derselben Zeile wie die Filterknoepfe. Deshalb darf es
   schrumpfen (kein fester Grundwert) und traegt weder Beschriftung noch Hinweis
   ueber sich — beides braeuchte eine eigene Zeile und wuerde das Feld hoeher
   machen als die Knoepfe daneben. Die Beschriftung steht vorlesbar im <label>,
   die Erklaerung im abschaltbaren Hilfeblock. */
.board-suche{flex:1 1 11rem;min-width:8rem}
/* Das Formular traegt bewusst nicht die Klasse `.form`: deren Blocklayout
   (Label ueber Feld, volle Breite) braeche die einzeilige Filterreihe auf.
   Deshalb hier dieselbe Optik eigens fuer die Felder des Filters. */
.board-filter input[type=search],.board-filter select,.mehrfach-feld select{
  font:inherit;font-size:.88rem;font-weight:500;color:var(--ink);
  padding:.4rem .65rem;border:1px solid var(--line);border-radius:var(--radius-xs);
  background:#fff;min-height:36px;max-width:100%}
.board-filter input[type=search]:focus,.board-filter select:focus,.mehrfach-feld select:focus{
  outline:2px solid var(--blue-l);outline-offset:1px;border-color:var(--blue-l)}
.board-filter input[type=search]::placeholder{color:var(--muted);opacity:.85}
.opt-zahl{flex:0 0 auto;color:var(--muted);font-size:.78rem;font-weight:700;padding-left:.6rem;
  font-variant-numeric:tabular-nums}

/* Klappfilter: der Inhalt schwebt ueber der Seite, damit die Filterreihe beim
   Aufklappen nicht auseinanderspringt. Auf schmalen Geraeten steht er im Fluss —
   ein schwebendes Feld waere dort schnell breiter als der Bildschirm. */
.mehrfach{position:relative;flex:0 0 auto}
.mehrfach>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  padding:.38rem .75rem;border:1px solid var(--line);border-radius:var(--radius-s);background:#fff;
  font-weight:600;font-size:.86rem;color:var(--ink-soft);min-height:36px}
.mehrfach>summary::-webkit-details-marker{display:none}
.mehrfach>summary::after{content:"▾";color:var(--muted);font-size:.8rem}
.mehrfach[open]>summary{border-color:var(--blue-l);color:var(--blue-d)}
.mehrfach-zahl{background:var(--blue);color:#fff;border-radius:999px;padding:.05rem .45rem;
  font-size:.75rem}
.mehrfach-zahl.ohne{background:var(--accent)}
.mehrfach-feld{position:absolute;z-index:20;top:calc(100% + .3rem);left:0;min-width:15rem;
  max-width:min(22rem,90vw);background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-s);box-shadow:0 8px 24px rgba(16,32,56,.13);padding:.7rem}
/* Am rechten Bildschirmrand muss das Feld nach links aufgehen, sonst ragt es
   hinaus. Die Spaltenauswahl steht immer rechts — die bekommt es fest; bei den
   uebrigen Klappfeldern entscheidet app.js beim Oeffnen, weil deren Position
   von der Fensterbreite und vom Umbruch der Filterreihe abhaengt. */
.spaltenwahl .mehrfach-feld,
.mehrfach-feld.nach-links{left:auto;right:0}
.mehrfach-liste{max-height:15rem;overflow-y:auto;display:flex;flex-direction:column;gap:.15rem;
  margin:0 0 .6rem}
/* flex:0 0 auto ist hier kein Beiwerk: In einer Flex-Spalte mit `max-height`
   schrumpfen die Kinder unter ihre Inhaltshoehe, sobald die Liste laenger ist
   als der Platz. Zweizeilige Eintraege liefen dann aus ihrer Box und
   ueberlagerten den naechsten Eintrag. */
.mehrfach-liste .check{display:flex;align-items:flex-start;gap:.5rem;font-weight:500;
  font-size:.9rem;padding:.25rem 0;min-height:32px;flex:0 0 auto;line-height:1.35}
.mehrfach-liste .check input{margin-top:.15rem;flex:0 0 auto}
.opt-text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.mehrfach-modus{display:block;font-size:.8rem;color:var(--muted);margin:0 0 .5rem}

.tabellen-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.6rem;margin:0 0 .6rem}
.tabellen-kopf h2{margin:0}
.tabellen-werkzeuge{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem}

/* Prozessschritt: Punktkette plus Klartext. Die Punkte sind Dekoration
   (aria-hidden) — die Aussage steht im Text daneben, damit sie auch vorgelesen
   und bei abgeschalteten Farben verstanden wird. */
.stufen{display:flex;flex-direction:column;gap:.25rem;min-width:9rem}
.punkte{display:flex;gap:3px;align-items:center}
.punkt{width:8px;height:8px;border-radius:50%;background:var(--line);flex:0 0 auto}
.punkt.erledigt{background:var(--blue-l)}
.punkt.jetzt{background:var(--blue);box-shadow:0 0 0 3px var(--blue-20,rgba(23,112,184,.18))}
.stufen.fertig .punkt{background:var(--ok,#2e7d4f)}
.stufen-text{font-size:.8rem;color:var(--muted);line-height:1.3}
.badge-neben{background:var(--bg-2);color:var(--muted);border-color:var(--line)}

/* Ausgeblendete Spalten und von der Sofortsuche verworfene Zeilen. Noetig, weil
   die Stapel-Ansicht Zellen und Zeilen auf `display:block` setzt und damit das
   Standardverhalten von [hidden] ueberschreibt. */
.board-tabelle td[hidden],.board-tabelle th[hidden],.board-tabelle tr[hidden]{display:none}
@media (max-width:760px){
  /* Auf schmalen Geraeten brechen die Reiter um — ein absolut gesetzter Schalter
     laege dann ueber ihnen. Hier steht er wieder im Fluss, unter der Auswahl. */
  .board-kopf{min-height:0}
  .board-kopf .tabs{padding-right:0;margin-bottom:.6rem}
  .filter-klapp>summary{position:static;width:100%;justify-content:space-between}
  table[data-stapeln] td[hidden],table[data-stapeln] tr[hidden]{display:none}
  /* Im Fluss statt schwebend: sonst ragt das Klappfeld ueber den Bildschirmrand. */
  .mehrfach{position:static;flex:1 1 100%}
  .mehrfach-feld{position:static;max-width:100%;box-shadow:none;margin-top:.4rem}
  .mehrfach>summary,.board-suche{width:100%}
  .board-filter .filterreihe{flex-direction:column;align-items:stretch}
  .stufen{min-width:0}
}

/* Kompakt ist fuer Maus und Trackpad gedacht. Wo mit dem Finger getippt wird,
   zaehlt Treffsicherheit mehr als Platz — dort wachsen die Ziele wieder. */
@media (pointer:coarse){
  .ansicht-schalter a{min-height:42px;padding:.5rem .85rem}
  .mehrfach>summary,.filter-klapp>summary{min-height:44px}
  .mehrfach-liste .check{min-height:40px}
  .board-filter input[type=search]{min-height:44px}
}

/* Vorschau-Kennzeichnung: freischwebend, damit sie keinen Platz vom Inhalt
   nimmt. Vorher stand hier ein Hinweisblock ueber die volle Breite — auf JEDER
   Seite des Moduls, was den eigentlichen Inhalt jedes Mal nach unten schob.
   Sitzt knapp unter der Kopfzeile (die ist sticky, 57 px hoch) und bleibt beim
   Scrollen stehen: Der Hinweis gilt fuer die ganze Seite, nicht nur fuer ihren
   Anfang. Die Erklaerung steckt im title und im vorlesbaren Text. */
.preview-marke{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:60;
  margin:0;padding:.18rem .7rem;border-radius:999px;
  background:#fdf3dd;color:var(--warn);border:1px solid #f0dda8;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 2px 8px rgba(16,32,56,.14);white-space:nowrap}
@media (max-width:900px){
  /* Auf schmalen Geraeten links neben die Mitte, damit es nicht ueber dem
     Seitentitel klebt. */
  .preview-marke{top:60px;left:auto;right:.7rem;transform:none}
}
@media print{ .preview-marke{position:static;transform:none;display:inline-block} }

/* Suchfeld mit Vorschlaegen. Die Liste schwebt ueber dem Panel — die
   Filterkarte hat dafuer bereits einen eigenen z-index (siehe .board-kopf). */
.board-suche{position:relative}
.board-suche input[type=search]{width:100%}
.vorschlagsliste{position:absolute;z-index:30;top:100%;left:0;right:0;margin:.25rem 0 0;padding:.25rem;
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);
  box-shadow:0 10px 26px rgba(16,32,56,.16);max-height:19rem;overflow-y:auto}
.vorschlagsliste li{display:grid;grid-template-columns:auto 1fr;gap:.1rem .6rem;
  padding:.4rem .55rem;border-radius:var(--radius-xs);cursor:pointer}
.vorschlagsliste li.aktiv,.vorschlagsliste li:hover{background:#eaf1fb}
.vorschlag-nr{grid-row:1 / span 2;align-self:center;font-weight:800;font-size:.78rem;
  color:var(--muted);background:var(--bg-2);border-radius:999px;padding:.1rem .5rem;
  font-variant-numeric:tabular-nums}
.vorschlag-titel{font-weight:600;font-size:.9rem;color:var(--ink);overflow-wrap:anywhere}
.vorschlag-meta{font-size:.76rem;color:var(--muted)}

/* Suchfeld innerhalb eines Klappfilters (lange Optionslisten). */
.mehrfach-suche{display:block;margin:0 0 .5rem}
.mehrfach-suche input[type=search]{width:100%;font:inherit;font-size:.86rem;
  padding:.35rem .6rem;border:1px solid var(--line);border-radius:var(--radius-xs);background:#fff}
.mehrfach-leer{margin:.2rem 0 .6rem;font-size:.85rem}

/* Spaltenbreiten des Anliegen-Boards.
   Ohne diese Angaben verteilt der Browser den Platz nach Inhalt — und die
   allgemeine Regel `.check-table td,th{min-width:5rem}` gibt selbst der
   Nummernspalte 5 rem, obwohl dort eine drei- bis vierstellige Zahl steht.
   Der Titel, die einzige Spalte, die wirklich Platz braucht, bekam den Rest.
   Deshalb hier feste Anhaltswerte fuer die schmalen Spalten; der Titel nimmt,
   was uebrig bleibt. Gilt nur in der Tabellenansicht — sobald gestapelt wird,
   sind Breiten ohnehin gegenstandslos. */
@media (min-width:761px){
  .board-tabelle{table-layout:auto}
  .board-tabelle td[data-spalte-schluessel="nr"],
  .board-tabelle th[data-spalte-schluessel="nr"]{width:3.2rem;min-width:0;
    white-space:nowrap;font-variant-numeric:tabular-nums}
  /* Der Titel traegt die Aussage der Zeile — er bekommt den groessten Anteil
     und faellt nie unter eine lesbare Breite. */
  .board-tabelle td[data-spalte-schluessel="titel"],
  .board-tabelle th[data-spalte-schluessel="titel"]{width:30%;min-width:13rem}
  .board-tabelle td[data-spalte-schluessel="schritt"],
  .board-tabelle th[data-spalte-schluessel="schritt"]{width:10.5rem;min-width:9rem}
  .board-tabelle td[data-spalte-schluessel="dring"],
  .board-tabelle th[data-spalte-schluessel="dring"]{width:5.5rem;min-width:0}
  .board-tabelle td[data-spalte-schluessel="board"],
  .board-tabelle th[data-spalte-schluessel="board"]{width:4.2rem;min-width:0}
  .board-tabelle td[data-spalte-schluessel="akt"],
  .board-tabelle th[data-spalte-schluessel="akt"]{width:8.5rem;min-width:0}
  /* Die uebrigen Textspalten bekommen bewusst KEINE Breite, nur eine Untergrenze.
     Feste rem-Werte und Prozente zusammen ueberbestimmen die Tabelle; der
     Browser loest das dann mit Seitwaerts-Scroll auf, statt sinnvoll zu
     verteilen. So teilen sie sich mit dem Titel, was uebrig bleibt. */
  .board-tabelle td[data-spalte-schluessel="bereich"],
  .board-tabelle th[data-spalte-schluessel="bereich"],
  .board-tabelle td[data-spalte-schluessel="kat"],
  .board-tabelle th[data-spalte-schluessel="kat"],
  .board-tabelle td[data-spalte-schluessel="einr"],
  .board-tabelle th[data-spalte-schluessel="einr"],
  .board-tabelle td[data-spalte-schluessel="verant"],
  .board-tabelle th[data-spalte-schluessel="verant"]{min-width:5.5rem}
  /* Lange Adressen im Feld „Einreichende" duerfen die Spalte nicht aufblaehen. */
  .board-tabelle td[data-spalte-schluessel="einr"]{overflow-wrap:anywhere}
}

/* Spaltenmenue: Sichtbarkeit und Reihenfolge in einer Liste.
   Oben = links in der Tabelle. Verschoben wird mit Knoepfen, nicht per Ziehen —
   das ist mit der Tastatur bedienbar und kollidiert auf Touchgeraeten nicht mit
   dem Scrollen der Seite. */
.spaltenliste{list-style:none;margin:0 0 .5rem;padding:0;max-height:17rem;overflow-y:auto}
.spaltenliste li{display:flex;align-items:center;gap:.5rem;padding:.2rem 0;flex:0 0 auto}
.spaltenliste li+li{border-top:1px solid var(--line-soft)}
.spaltenliste label{flex:1 1 auto;min-width:0;font-size:.88rem;font-weight:500;
  overflow-wrap:anywhere;cursor:pointer}
.spalte-fest{color:var(--muted);width:1rem;text-align:center;flex:0 0 auto}
.spalte-pfeile{display:flex;gap:.15rem;flex:0 0 auto}
.spalte-pfeile button{border:1px solid var(--line);background:#fff;border-radius:var(--radius-xs);
  width:30px;height:30px;line-height:1;color:var(--ink-soft);cursor:pointer;font-size:.85rem}
.spalte-pfeile button:hover:not(:disabled){border-color:var(--blue-l);color:var(--blue-d)}
.spalte-pfeile button:disabled{opacity:.35;cursor:default}
.spalten-fuss{margin:0}
@media (pointer:coarse){ .spalte-pfeile button{width:40px;height:40px} }

/* ---------------------------------------------------------------------------
   Sprintboard und Sprintplanung (Modul digi)
   Spalten nebeneinander, waagerecht scrollend. Verschoben wird ueber Knoepfe
   und Auswahlfelder statt per Ziehen — mit der Tastatur bedienbar und auf
   Touchgeraeten benutzbar, wo Ziehen mit dem Scrollen kollidiert.
   --------------------------------------------------------------------------- */
.sprintboard{display:flex;gap:.8rem;align-items:flex-start;overflow-x:auto;padding-bottom:.6rem}
.sprint-spalte{flex:0 0 17rem;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:.7rem}
.sprint-spalte h3{margin:0 0 .5rem;font-size:.92rem;color:var(--blue-d);
  display:flex;align-items:center;gap:.4rem}
.sprint-spalte h3 .cnt{background:#fff;color:var(--muted);border-radius:999px;
  padding:.05rem .45rem;font-size:.75rem;font-weight:700}
.sprint-meta{font-size:.75rem;margin:0 0 .5rem;line-height:1.5}
.sprint-leer{text-align:center;margin:.6rem 0}

.sprint-karte{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xs);
  padding:.55rem .6rem;margin:0 0 .5rem}
.sprint-karte.blockiert{border-color:var(--accent);background:#fff8f7}
.karte-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:0 0 .3rem}
.karte-board{background:var(--blue);color:#fff;border-radius:999px;padding:.05rem .45rem;
  font-size:.68rem;font-weight:800;letter-spacing:.03em}
.karte-nr{color:var(--muted);font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums}
.karte-aufwand{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-xs);
  padding:.02rem .35rem;font-size:.7rem;font-weight:800;color:var(--ink-soft)}
.karte-prio{border-radius:999px;padding:.04rem .45rem;font-size:.68rem;font-weight:800;color:#fff}
.prio-1{background:#b3261e}.prio-2{background:#c5860a}.prio-3{background:#1770B8}
.prio-4{background:#5989C7}.prio-5{background:#6b7785}
.karte-titel{margin:0 0 .25rem;font-size:.88rem;line-height:1.35;overflow-wrap:anywhere}
.karte-fuss{margin:0;font-size:.74rem;display:flex;flex-wrap:wrap;gap:.4rem}
.karte-blockiert{margin:.3rem 0 0;font-size:.74rem;font-weight:700;color:var(--accent);
  overflow-wrap:anywhere}
.karte-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;margin-top:.45rem}
.karte-aktionen form{display:flex;gap:.25rem;align-items:center;margin:0}
.karte-block-form input[type=text]{font:inherit;font-size:.74rem;padding:.2rem .35rem;
  border:1px solid var(--line);border-radius:var(--radius-xs);width:6.5rem}
.karte-zuordnen{display:flex;gap:.25rem;align-items:center;margin:.45rem 0 0}
.karte-zuordnen select{font:inherit;font-size:.75rem;padding:.15rem .3rem;
  border:1px solid var(--line);border-radius:var(--radius-xs);max-width:8.5rem}

.sprint-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between}
.sprint-kopf h2{margin:0}
.sprint-zahlen{display:flex;flex-direction:column;font-size:.85rem}
.sprint-balken{flex:1 1 100%;width:100%;height:.6rem;appearance:none;border:0}
.sprint-balken::-webkit-progress-bar{background:var(--line);border-radius:999px}
.sprint-balken::-webkit-progress-value{background:var(--ok);border-radius:999px}
.sprint-balken::-moz-progress-bar{background:var(--ok);border-radius:999px}
.sprint-status{border-radius:999px;padding:.03rem .4rem;font-size:.68rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em}
.state-geplant{background:var(--bg-2);color:var(--muted);border:1px solid var(--line)}
.state-aktiv{background:var(--ok-bg);color:var(--ok)}
.state-abgeschlossen{background:#eaf1fb;color:var(--blue-d)}

.planungs-form{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin:0}
.planungs-form select,.planungs-form input[type=date]{font:inherit;font-size:.8rem;
  padding:.25rem .4rem;border:1px solid var(--line);border-radius:var(--radius-xs);background:#fff}
.planungs-status{display:block;font-size:.74rem}
.rang-zahl{font-weight:800;font-variant-numeric:tabular-nums;margin-right:.3rem}
.rang-pfeile{display:inline-flex;gap:.15rem}
.rang-pfeile form{display:inline;margin:0}

@media (max-width:760px){
  .sprintboard{display:block;overflow-x:visible}
  .sprint-spalte{flex:none;width:auto;margin:0 0 .8rem}
}