/* 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-ghost{font:inherit;cursor:pointer;background:transparent}

/* Startseiten-Kacheln (8.6) */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem;margin-top:1.4rem}
.tile{display:block;color:inherit;text-decoration:none;padding:1.35rem}
.tile h2{margin-top:0;font-size:1.05rem;color:var(--blue-d)}
.tile-disabled{opacity:.75}
.tile-disabled:hover{transform:none;box-shadow:var(--shadow)}

/* 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}
.apptop-right{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
.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)}
.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}
.content.wide{max-width:1440px}
.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}
  .apptop-right{flex-wrap:wrap;gap:.2rem}
  .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). */
html,body{max-width:100%;overflow-x:hidden}
.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;
}

/* 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}

.btn-mini{font-size:.72rem;padding:.15rem .45rem;margin-top:.25rem}

/* 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}