/* =====================================================================
   SSD-Portal – Oberfläche im Sanitäts-Look
   ===================================================================== */

:root{
  --bg:#f2f5f8;
  --bg-2:#f8fafc;
  --surface:#ffffff;
  --surface-soft:#f7f9fb;
  --text:#1a2430;
  --text-strong:#0f1720;
  --muted:#64748b;
  --line:#e0e7ee;
  --line-soft:#eef2f6;

  --brand:#AF3F4E;
  --brand-2:#C75A68;
  --brand-dark:#7C2430;
  --brand-soft:#F7E7EA;
  --brand-ink:#8F2636;

  --ok:#137a4d;   --ok-soft:#e9f7f0;   --ok-line:#bde3d0;
  --bad:#c0122a;  --bad-soft:#fdeced;  --bad-line:#f5c5ca;
  --warn:#9a5a00; --warn-soft:#fff4e3; --warn-line:#f2d3a6;
  --info:#1d5f8a; --info-soft:#e8f2f9; --info-line:#bcd9ea;

  --input-bg:#ffffff;
  --chip-bg:#eef2f6;
  --chip-ink:#475569;

  --shadow:0 8px 24px rgba(24,40,60,.07);
  --shadow-lg:0 16px 40px rgba(24,40,60,.13);
  --radius:16px;
}

html[data-theme="dark"]{
  --bg:#101822;
  --bg-2:#0c131b;
  --surface:#17212c;
  --surface-soft:#1c2733;
  --text:#e4ebf2;
  --text-strong:#f4f8fb;
  --muted:#93a3b4;
  --line:#2a3745;
  --line-soft:#232f3c;

  --brand:#D46574;
  --brand-2:#E58491;
  --brand-dark:#8A2B38;
  --brand-soft:#32181D;
  --brand-ink:#F0A5AE;

  --ok:#3fbb85;   --ok-soft:#12301f;   --ok-line:#1e4d36;
  --bad:#f4796b;  --bad-soft:#3a1614;  --bad-line:#5e2620;
  --warn:#e5a44f; --warn-soft:#372513; --warn-line:#5a3d1a;
  --info:#69b4e0; --info-soft:#12293a; --info-line:#1f4256;

  --input-bg:#111a24;
  --chip-bg:#212e3b;
  --chip-ink:#adbccb;

  --shadow:0 8px 24px rgba(0,0,0,.38);
  --shadow-lg:0 16px 40px rgba(0,0,0,.52);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background:linear-gradient(180deg,var(--bg-2),var(--bg));
  background-attachment:fixed;
  color:var(--text);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1{ font-size:25px; margin:0; letter-spacing:-.02em; color:var(--text-strong); }
h2{ font-size:17px; margin:0; color:var(--text-strong); }
h3{ font-size:14.5px; margin:0 0 8px; color:var(--text-strong); }
h4{ font-size:13px; margin:0 0 6px; color:var(--text-strong); }

a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; background:var(--chip-bg); padding:1px 5px; border-radius:5px; }

.muted{ color:var(--muted); }
.small{ font-size:12px; }
.right{ text-align:right; }
.nowrap{ white-space:nowrap; }
.hidden{ display:none !important; }
.hidden-form{ display:none; }
.print-only{ display:none; }
.opt{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); font-size:11px; }

/* --------------------------------------------------------- Kopfleiste */

.topbar{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand));
  color:#fff;
  box-shadow:0 3px 16px rgba(124,36,48,.24);
  position:sticky; top:0; z-index:100;
}

.topbar-inner{
  max-width:1500px; margin:0 auto;
  padding:10px 20px;
  display:flex; align-items:center; gap:18px;
}

.brand{ display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none; }
.brand:hover{ text-decoration:none; }

.brand-cross{
  width:36px; height:36px; flex:0 0 auto;
  background:transparent url('johanniter-logo.png') center/contain no-repeat;
  border-radius:0;
  position:relative;
}
.brand-cross::before,
.brand-cross::after{
  content:none !important;
  display:none !important;
}
.brand-cross.big{
  width:58px; height:58px;
  background:transparent url('johanniter-logo.png') center/contain no-repeat;
  border-radius:0;
}

.brand-logo{
  width:72px;
  height:72px;
  max-width:72px;
  max-height:72px;
  object-fit:contain;
  flex:0 0 72px;
  display:block;
}

.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-text strong{ font-size:15px; }
.brand-text small{ font-size:10.5px; opacity:.8; }

.mainnav{ display:flex; gap:2px; flex:1; flex-wrap:wrap; }

.mainnav a{
  color:rgba(255,255,255,.84);
  padding:7px 12px; border-radius:9px;
  font-weight:700; font-size:13px; text-decoration:none;
  white-space:nowrap;
}
.mainnav a:hover{ background:rgba(255,255,255,.13); color:#fff; text-decoration:none; }
.mainnav a.active{ background:rgba(255,255,255,.22); color:#fff; }
.mainnav .nav-admin{ border:1px solid rgba(255,255,255,.32); margin-left:6px; }

.navdot{
  display:inline-block; margin-left:5px;
  background:#fff; color:var(--brand);
  border-radius:99px; padding:0 6px;
  font-size:10.5px; font-weight:900;
}

.topbar-right{ display:flex; align-items:center; gap:9px; }

.icon-btn{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24);
  color:#fff; border-radius:50%; width:32px; height:32px; padding:0;
  cursor:pointer; font-size:14px; line-height:1;
}
.icon-btn:hover{ background:rgba(255,255,255,.28); }

.userchip{ display:flex; align-items:center; gap:8px; color:#fff; text-decoration:none; }
.userchip:hover{ text-decoration:none; opacity:.9; }
.userchip-text{ display:flex; flex-direction:column; line-height:1.2; }
.userchip-name{ font-weight:800; font-size:13px; }
.userchip-role{ font-size:10px; opacity:.78; text-transform:uppercase; letter-spacing:.05em; }

.burger{ display:none; background:rgba(255,255,255,.16); border:0; color:#fff; border-radius:8px; padding:6px 10px; font-size:16px; cursor:pointer; }

/* ----------------------------------------------------------- Avatare */

.avatar{
  width:32px; height:32px; flex:0 0 auto;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:900; letter-spacing:.02em;
  background:hsl(var(--h) 45% 88%);
  color:hsl(var(--h) 55% 28%);
  border:1px solid hsl(var(--h) 40% 80%);
}
html[data-theme="dark"] .avatar{
  background:hsl(var(--h) 32% 24%);
  color:hsl(var(--h) 60% 78%);
  border-color:hsl(var(--h) 30% 34%);
}
.avatar-lg{ width:44px; height:44px; font-size:14px; }
.avatar-xl{ width:64px; height:64px; font-size:20px; }

/* ---------------------------------------------------------- Raster */

.page{ max-width:1500px; margin:0 auto; padding:22px 20px 40px; }
.page-bare{ max-width:none; padding:0; }
.narrow{ max-width:820px; }

.pagehead{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:16px; flex-wrap:wrap; margin-bottom:18px;
}
.pagehead-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.crumb{ font-size:12px; color:var(--muted); margin-bottom:3px; }
.submeta{ font-size:12.5px; color:var(--muted); margin-top:5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

.sectiontitle{ font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:22px 0 12px; }

.split{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; align-items:start; }
.side{ display:flex; flex-direction:column; gap:15px; position:sticky; top:74px; }

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  margin-bottom:15px; overflow:hidden;
}
.card.pad{ padding:18px; }

.card-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 16px; border-bottom:1px solid var(--line);
  background:var(--surface-soft);
}
.card-head h2{ margin-right:auto; }
.card-head.standalone{ border:1px solid var(--line); border-radius:var(--radius); margin-bottom:15px; background:var(--surface); }

.alert-critical{ border-left:4px solid var(--bad); }
.alert-warn{ border-left:4px solid var(--warn); }

.denybox{ max-width:520px; margin:60px auto; text-align:center; }

/* -------------------------------------------------------------- Hero */

.hero{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand) 65%,var(--brand-2));
  color:#fff; border-radius:20px; padding:22px 26px;
  margin-bottom:18px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-lg);
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.hero::after{
  content:""; position:absolute; right:-70px; top:-90px;
  width:240px; height:240px; border-radius:50%;
  background:rgba(255,255,255,.09); pointer-events:none;
}
.hero-text{ position:relative; z-index:1; }
.hero h1{ color:#fff; font-size:26px; }
.hero p{ margin:5px 0 0; opacity:.85; font-size:13px; }

.hero-stats{ display:flex; gap:9px; flex-wrap:wrap; position:relative; z-index:1; }
.hstat{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
  border-radius:12px; padding:8px 14px; min-width:92px;
  color:#fff; text-decoration:none; text-align:center;
}
.hstat:hover{ background:rgba(255,255,255,.24); text-decoration:none; }
.hstat b{ display:block; font-size:21px; font-weight:900; line-height:1.1; }
.hstat span{ font-size:10.5px; opacity:.85; }
.hstat.alarm{ background:rgba(0,0,0,.22); border-color:rgba(255,255,255,.3); }

.adminstrip{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--warn-soft); border:1px solid var(--warn-line);
  border-radius:13px; padding:11px 16px; margin-bottom:18px;
}
.adminstrip-label{ font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; color:var(--warn); }
.adminstrip-item{ color:var(--warn); font-weight:700; font-size:13px; }
.adminstrip-item b{ font-size:15px; }

/* ------------------------------------------------------------ Kacheln */

.tiles{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
  gap:14px; margin-bottom:24px;
}

.tile{
  display:flex; align-items:flex-start; gap:13px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px;
  box-shadow:var(--shadow); text-decoration:none; color:var(--text);
  transition:transform .16s, box-shadow .16s, border-color .16s;
  position:relative;
}
.tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--brand); text-decoration:none; }

.tile-icon{
  font-size:21px; width:42px; height:42px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-soft); border:1px solid var(--line); border-radius:11px;
}
.tile-body{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.tile-title{ font-weight:800; font-size:14.5px; color:var(--text-strong); }
.tile-text{ font-size:12.5px; color:var(--muted); line-height:1.45; }
.tile-meta{ display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.tile-arrow{ color:var(--muted); font-size:15px; align-self:center; }

.tile.tone-alarm{ border-color:var(--bad-line); background:linear-gradient(180deg,var(--bad-soft),var(--surface) 55%); }
.tile.tone-alarm .tile-icon{ border-color:var(--bad-line); background:var(--bad-soft); }
.tile.tone-admin{ border-color:var(--info-line); background:linear-gradient(180deg,var(--info-soft),var(--surface) 55%); }
.tile.tone-admin .tile-icon{ border-color:var(--info-line); background:var(--info-soft); }

/* -------------------------------------------------------- Kennzahlen */

.kpi-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }

.kpi{
  background:var(--surface); border:1px solid var(--line);
  border-radius:13px; padding:11px 16px; min-width:126px;
  box-shadow:var(--shadow); text-decoration:none; color:var(--text);
  display:block;
}
a.kpi:hover{ border-color:var(--brand); text-decoration:none; }

.kpi-label{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:800; }
.kpi-value{ display:block; font-size:22px; font-weight:900; color:var(--text-strong); margin-top:2px; }

.kpi.tone-bad,.kpi.tone-alarm{ border-color:var(--bad-line); background:var(--bad-soft); }
.kpi.tone-bad .kpi-value,.kpi.tone-alarm .kpi-value{ color:var(--bad); }
.kpi.tone-warn{ border-color:var(--warn-line); background:var(--warn-soft); }
.kpi.tone-warn .kpi-value{ color:var(--warn); }
.kpi.tone-ok .kpi-value{ color:var(--ok); }

/* --------------------------------------------------------- Formulare */

label{ display:block; font-size:11px; font-weight:800; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }

input[type=text],input[type=date],input[type=time],input[type=datetime-local],
input[type=number],input[type=search],input[type=password],input[type=email],
input[type=tel],input[type=file],select,textarea{
  width:100%; border:1px solid var(--line); border-radius:10px;
  padding:9px 11px; font-size:13.5px; font-family:inherit;
  background:var(--input-bg); color:var(--text); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(175,63,78,.13); }
input:disabled,textarea:disabled,select:disabled{ opacity:.6; cursor:not-allowed; }
textarea{ resize:vertical; min-height:64px; line-height:1.55; }
html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=time],
html[data-theme="dark"] input[type=datetime-local]{ color-scheme:dark; }

.field .hint{ display:block; font-size:11.5px; color:var(--muted); margin-top:4px; text-transform:none; letter-spacing:0; font-weight:400; }
.field-actions{ display:flex; align-items:flex-end; gap:8px; }

.row2{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.row3{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.row4{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.grid-3{ display:grid; grid-template-columns:1.4fr .7fr auto; gap:13px; align-items:end; }
.grid-3 .span2{ grid-column:span 2; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr) auto; gap:13px; align-items:end; }

.stack{ display:flex; flex-direction:column; gap:14px; }
.stack-sm{ display:flex; flex-direction:column; gap:9px; }
.formrow{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.inline{ display:inline; }
.hint{ font-size:12.5px; color:var(--muted); line-height:1.55; }
.inline-label{ display:inline-block; margin-bottom:0; margin-right:6px; }

.checkline{
  display:flex; align-items:center; gap:9px; margin:0;
  text-transform:none; letter-spacing:0; font-size:13.5px;
  color:var(--text); font-weight:500; cursor:pointer;
}
.checkline input{ width:16px; height:16px; accent-color:var(--brand); }

/* Auswahl zwischen Beitragstypen */
.typeswitch{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.typeswitch.three{ grid-template-columns:repeat(3,1fr); }

.typeopt{
  margin:0; text-transform:none; letter-spacing:0; cursor:pointer;
  border:1px solid var(--line); border-radius:12px; padding:11px 13px;
  display:flex; align-items:flex-start; gap:9px; background:var(--surface);
  transition:border-color .15s, background-color .15s;
}
.typeopt input{ margin-top:2px; accent-color:var(--brand); }
.typeopt span{ display:flex; flex-direction:column; }
.typeopt strong{ font-size:13.5px; color:var(--text-strong); }
.typeopt small{ font-size:11.5px; color:var(--muted); }
.typeopt:has(input:checked){ border-color:var(--brand); background:var(--brand-soft); }

.qualgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; }
.qualopt{
  margin:0; text-transform:none; letter-spacing:0; font-weight:500; font-size:13px;
  display:flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--line); border-radius:9px; padding:7px 11px; background:var(--surface);
}
.qualopt input{ accent-color:var(--brand); }
.qualopt:has(input:checked){ border-color:var(--brand); background:var(--brand-soft); }

/* ------------------------------------------------------------ Knöpfe */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid transparent; border-radius:10px; padding:9px 15px;
  font-weight:800; font-size:13px; font-family:inherit;
  cursor:pointer; text-decoration:none;
  transition:transform .13s, background-color .13s, border-color .13s;
}
.btn:hover{ transform:translateY(-1px); text-decoration:none; }
.btn:focus-visible{ outline:3px solid rgba(175,63,78,.4); outline-offset:2px; }
.btn-small{ padding:5px 10px; font-size:12px; border-radius:8px; }
.btn.full{ width:100%; }

.btn-primary{ background:linear-gradient(135deg,var(--brand-dark),var(--brand)); color:#fff; box-shadow:0 5px 14px rgba(175,63,78,.24); }
.btn-primary:hover{ color:#fff; }
.btn-secondary{ background:var(--chip-bg); color:var(--chip-ink); }
.btn-secondary:hover{ border-color:var(--line); }
.btn-ghost{ background:transparent; color:var(--chip-ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--chip-bg); }
.btn-danger{ background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line); }

.linkbtn{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--muted); font-size:12px; font-weight:700; font-family:inherit;
  text-decoration:underline;
}
.linkbtn:hover{ color:var(--text); }
.linkbtn.danger{ color:var(--bad); }

.sticky-save{
  position:sticky; bottom:14px; z-index:40;
  display:flex; gap:10px; justify-content:flex-end;
  padding:11px 14px; margin-top:6px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:13px; box-shadow:var(--shadow-lg);
}

/* ---------------------------------------------------------- Tabellen */

.tablewrap{ overflow:auto; max-height:72vh; }
table{ width:100%; border-collapse:collapse; }
th,td{ padding:9px 11px; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:middle; font-size:13.5px; }
thead th{
  position:sticky; top:0; z-index:5; background:var(--surface-soft); color:var(--muted);
  font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--line);
}
.checklist{ min-width:1250px; }
.datatable{ min-width:720px; }
.datatable.compact td{ padding:5px 8px; }
.datatable.compact input{ padding:6px 8px; font-size:13px; }
tbody tr:hover{ background:var(--surface-soft); }
tr.status-ok{ background:linear-gradient(90deg,var(--ok-soft),transparent 26%); }
tr.status-bad{ background:linear-gradient(90deg,var(--bad-soft),transparent 28%); }
tr.exp-expired td:first-child{ box-shadow:inset 3px 0 0 var(--bad); }
tr.exp-soon td:first-child{ box-shadow:inset 3px 0 0 var(--warn); }

.section-row td{
  background:linear-gradient(90deg,var(--brand-soft),var(--surface-soft));
  color:var(--brand-ink); font-weight:900; font-size:12px;
  letter-spacing:.03em; text-transform:uppercase;
  border-top:1px solid var(--line); padding:8px 11px;
}
.section-title-input{ width:auto; min-width:230px; flex:1; font-weight:900; font-size:13px; border:1px dashed transparent; background:transparent; color:var(--text-strong); }
.section-title-input:hover{ border-color:var(--line); }

.qty{ width:80px; font-weight:800; white-space:nowrap; }
.name{ min-width:380px; font-weight:600; }
.expcell{ width:190px; }
.expcell input{ width:145px; }
.batchcell{ width:130px; }
.notecell input{ min-width:170px; }
.statuscell{ width:310px; }
.rowtools{ display:flex; gap:5px; }
.bar{ height:7px; background:var(--line-soft); border-radius:99px; overflow:hidden; width:120px; }
.bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--brand-dark),var(--brand)); }

.emptybox{ padding:30px 22px; text-align:center; color:var(--muted); }
.emptybox p{ margin:0 0 5px; font-size:14px; }
.emptybox .hint{ font-size:12.5px; }

.minitable{ font-size:12.5px; }
.minitable th{ position:static; text-transform:none; letter-spacing:0; font-size:12px; color:var(--text); width:110px; padding:4px 6px 4px 0; background:none; border:0; }
.minitable td{ padding:4px 0; border:0; color:var(--muted); }

/* --------------------------------------------------- Status-Schalter */

.seg{
  position:relative; display:inline-grid; grid-template-columns:repeat(3,1fr);
  background:var(--chip-bg); border-radius:10px; padding:3px; min-width:296px; overflow:hidden;
}
.seg-slider{
  position:absolute; top:3px; bottom:3px; left:3px;
  width:calc((100% - 6px) / 3); border-radius:8px; background:var(--surface);
  box-shadow:0 2px 7px rgba(0,0,0,.1);
  transform:translateX(0%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), background-color .22s; z-index:0;
}
.seg[data-status="ok"]  .seg-slider{ transform:translateX(100%); background:var(--ok); }
.seg[data-status="bad"] .seg-slider{ transform:translateX(200%); background:var(--bad); }

.seg-btn{
  position:relative; z-index:1; border:0; background:transparent; color:var(--muted);
  padding:6px 4px; border-radius:8px; cursor:pointer;
  font-weight:800; font-size:11.5px; font-family:inherit; white-space:nowrap; transition:color .2s;
}
.seg[data-status="pending"] .seg-btn.pending{ color:var(--text-strong); }
.seg[data-status="ok"]  .seg-btn.ok,
.seg[data-status="bad"] .seg-btn.bad{ color:#fff; }
html[data-theme="dark"] .seg[data-status="ok"] .seg-btn.ok,
html[data-theme="dark"] .seg[data-status="bad"] .seg-btn.bad{ color:#0b1219; }
.seg-btn:disabled{ cursor:not-allowed; }

/* ------------------------------------------------------------ Marken */

.badge{
  display:inline-block; font-size:10.5px; font-weight:900;
  padding:2px 8px; border-radius:99px;
  background:var(--chip-bg); color:var(--chip-ink);
  border:1px solid transparent; white-space:nowrap;
}
.badge.st-ok,.badge.exp-valid{ background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line); }
.badge.st-bad,.badge.exp-expired{ background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line); }
.badge.st-pending,.badge.exp-soon{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.badge.exp-none{ opacity:.7; }
.badges{ display:flex; gap:5px; flex-wrap:wrap; }

.rolebadge{
  display:inline-block; font-size:10.5px; font-weight:900;
  padding:2px 9px; border-radius:99px; white-space:nowrap;
  border:1px solid; letter-spacing:.01em;
}
.rolebadge.big{ font-size:13px; padding:5px 14px; }
.c-rot{    background:var(--bad-soft);  color:var(--bad);  border-color:var(--bad-line); }
.c-orange{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.c-gelb{   background:#fff8db; color:#7a5d00; border-color:#e8d68f; }
.c-gruen{  background:var(--ok-soft);   color:var(--ok);   border-color:var(--ok-line); }
.c-blau{   background:var(--info-soft); color:var(--info); border-color:var(--info-line); }
.c-lila{   background:#f3ebfb; color:#6b30a8; border-color:#dcc7f0; }
.c-grau{   background:var(--chip-bg); color:var(--chip-ink); border-color:var(--line); }
html[data-theme="dark"] .c-gelb{ background:#312a10; color:#ddc25a; border-color:#4d431c; }
html[data-theme="dark"] .c-lila{ background:#251b33; color:#c49bec; border-color:#3d2c52; }

.qualbadge{
  display:inline-block; font-size:10.5px; font-weight:700;
  padding:2px 8px; border-radius:6px;
  background:var(--surface-soft); color:var(--muted); border:1px solid var(--line);
}

/* ------------------------------------------------------ Filter/Suche */

.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  padding:6px 12px; border-radius:99px;
  background:var(--chip-bg); color:var(--chip-ink); border:1px solid transparent;
  font-size:12px; font-weight:800; font-family:inherit; cursor:pointer;
  display:inline-flex; gap:6px; align-items:center; text-decoration:none;
}
.chip:hover{ text-decoration:none; border-color:var(--line); }
.chip.active{ background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand); }
.chip-num{ background:rgba(0,0,0,.08); border-radius:99px; padding:0 6px; font-size:10.5px; }
html[data-theme="dark"] .chip-num{ background:rgba(255,255,255,.12); }

.searchwrap{ flex:1 1 200px; max-width:300px; margin-left:auto; }
.searchwrap input{ border-radius:99px; padding:7px 14px; font-size:13px; }

/* ------------------------------------------------------------- Feed */

.feed{ display:flex; flex-direction:column; }

.postcard{ padding:16px 18px; }
.postcard.pinned{ border-color:var(--warn-line); background:linear-gradient(180deg,var(--warn-soft),var(--surface) 30%); }
.postcard-head{ display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap; margin-bottom:9px; }
.postcard-tools{ display:flex; align-items:center; gap:9px; }
.postcard-title{ font-size:17px; margin:0 0 7px; }
.postcard-title a{ color:var(--text-strong); }
.postcard-body{ font-size:13.5px; line-height:1.6; color:var(--text); }
.postcard-foot{ margin-top:11px; padding-top:10px; border-top:1px solid var(--line-soft); font-size:12.5px; }
.postcard-foot a{ color:var(--muted); font-weight:700; }
.pin{ font-size:12px; }

.postdetail-body{ font-size:14.5px; line-height:1.7; margin-top:12px; }

.author{ display:flex; align-items:center; gap:8px; }
.author-text{ display:flex; flex-direction:column; line-height:1.25; }
.author-name{ font-size:13px; font-weight:800; color:var(--text-strong); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.author-when{ font-size:11px; color:var(--muted); }

.postlist{ list-style:none; margin:0; padding:0; }
.postlist li{ border-bottom:1px solid var(--line-soft); }
.postlist li:last-child{ border-bottom:0; }
.postlist a{ display:flex; gap:11px; align-items:center; padding:11px 16px; color:var(--text); text-decoration:none; }
.postlist a:hover{ background:var(--surface-soft); text-decoration:none; }
.pl-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pl-title{ font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pl-meta{ font-size:11.5px; color:var(--muted); }

/* ---------------------------------------------------------- Umfragen */

.pollbox{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.pollbox-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.pollform{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }

.polloption{
  margin:0; text-transform:none; letter-spacing:0; font-weight:500; font-size:13.5px;
  display:flex; align-items:center; gap:10px; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; padding:10px 13px; background:var(--surface);
  transition:border-color .14s, background-color .14s;
}
.polloption input{ accent-color:var(--brand); width:17px; height:17px; }
.polloption:hover{ border-color:var(--brand); }
.polloption:has(input:checked){ border-color:var(--brand); background:var(--brand-soft); }

.pollresult-title{ margin-top:14px; }
.pollresult{ display:flex; flex-direction:column; gap:9px; margin-top:10px; }
.pollrow-head{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; margin-bottom:3px; }
.pollrow-label{ font-weight:700; }
.pollrow-num{ color:var(--muted); font-weight:800; white-space:nowrap; }
.pollrow.mine .pollrow-label{ color:var(--brand); }
.tick{ font-weight:900; }
.pollbar{ height:9px; background:var(--line-soft); border-radius:99px; overflow:hidden; }
.pollbar span{ display:block; height:100%; background:linear-gradient(90deg,var(--brand-dark),var(--brand-2)); transition:width .4s ease; }

/* -------------------------------------------------------- Kommentare */

.commentlist{ list-style:none; margin:0; padding:0; }
.commentlist li{ padding:13px 18px; border-bottom:1px solid var(--line-soft); }
.commentlist li:last-child{ border-bottom:0; }
.comment-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.comment-body{ font-size:13.5px; line-height:1.6; padding-left:40px; }

.commentform{ display:flex; gap:9px; align-items:flex-start; padding:14px 18px; border-top:1px solid var(--line); background:var(--surface-soft); }
.commentform textarea{ flex:1; min-height:44px; }

/* ------------------------------------------------------------ Termine */

.monthdivider{ font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:20px 0 10px; }
.daydivider{ font-size:13.5px; color:var(--text-strong); margin:20px 0 10px; display:flex; align-items:center; gap:8px; }
.daydivider.today{ color:var(--brand); }

.datechip{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:46px; height:46px; flex:0 0 auto; border-radius:11px;
  background:var(--brand-soft); border:1px solid var(--brand-line,var(--bad-line)); color:var(--brand-ink);
}
.datechip b{ font-size:16px; font-weight:900; line-height:1; }
.datechip small{ font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; }
.datechip.big{ width:58px; height:62px; }
.datechip.big b{ font-size:20px; }
.datechip.big i{ font-size:9.5px; font-style:normal; opacity:.75; }

.eventcard{ padding:15px 18px; }
.eventcard.past{ opacity:.62; }
.eventcard-main{ display:flex; gap:14px; }
.eventcard-body{ flex:1; min-width:0; }
.eventcard-top{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-bottom:5px; }
.eventcard-title{ font-size:16px; margin:0 0 4px; color:var(--text-strong); }
.eventcard-meta{ font-size:12.5px; color:var(--muted); }
.eventcard-desc{ font-size:13.5px; margin-top:9px; line-height:1.6; }
.eventcard-actions{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:13px; padding-top:11px; border-top:1px solid var(--line-soft); }

.eventkind{ font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:6px; }
.k-dienst{ background:var(--bad-soft); color:var(--bad); }
.k-fortbildung{ background:var(--info-soft); color:var(--info); }
.k-treffen{ background:var(--ok-soft); color:var(--ok); }
.k-sonstiges{ background:var(--chip-bg); color:var(--chip-ink); }

.respondform{ display:flex; gap:6px; }
.rbtn{
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:9px; padding:7px 13px; font-size:12.5px; font-weight:800;
  font-family:inherit; cursor:pointer; transition:.14s;
}
.rbtn:hover{ border-color:var(--muted); }
.rbtn.ok.active{ background:var(--ok); border-color:var(--ok); color:#fff; }
.rbtn.warn.active{ background:var(--warn); border-color:var(--warn); color:#fff; }
.rbtn.bad.active{ background:var(--bad); border-color:var(--bad); color:#fff; }

.respondlist{ display:flex; flex-direction:column; gap:6px; margin-top:11px; }
.rl-group{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:12px; }
.rl-label{ font-weight:900; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; }
.rl-label.ok{ color:var(--ok); } .rl-label.warn{ color:var(--warn); } .rl-label.bad{ color:var(--bad); }
.rl-name{ background:var(--chip-bg); border-radius:99px; padding:1px 9px; color:var(--chip-ink); }

.eventmini{ list-style:none; margin:0; padding:0; }
.eventmini li{ border-bottom:1px solid var(--line-soft); }
.eventmini li:last-child{ border-bottom:0; }
.eventmini a{ display:flex; gap:10px; align-items:center; padding:9px 0; color:var(--text); text-decoration:none; }
.eventmini a:hover{ text-decoration:none; opacity:.8; }
.em-body{ display:flex; flex-direction:column; min-width:0; flex:1; }
.em-title{ font-weight:700; font-size:13px; }
.em-meta{ font-size:11.5px; color:var(--muted); }

/* --------------------------------------------------------- Dienstplan */

.dutycard{ display:flex; gap:14px; padding:14px 18px; align-items:flex-start; }
.dutycard.full{ border-color:var(--ok-line); }
.dutycard.mine{ border-left:4px solid var(--brand); }
.dutycard-time{ display:flex; flex-direction:column; align-items:center; width:56px; flex:0 0 auto; }
.dutycard-time b{ font-size:15px; font-weight:900; }
.dutycard-time span{ font-size:11.5px; color:var(--muted); }
.dutycard-body{ flex:1; min-width:0; }
.dutycard-top{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.dutycard-note{ font-size:12.5px; color:var(--muted); margin-bottom:7px; }
.dutycard-actions{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }

.dutypeople{ display:flex; gap:7px; flex-wrap:wrap; }
.person{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-soft); border:1px solid var(--line);
  border-radius:99px; padding:3px 11px 3px 4px; font-size:12px;
}
.person.me{ border-color:var(--brand); background:var(--brand-soft); }
.person.empty{ padding:5px 14px; color:var(--muted); border-style:dashed; font-style:italic; }
.personx{ background:none; border:0; color:var(--muted); cursor:pointer; font-size:14px; padding:0 2px; line-height:1; }
.personx:hover{ color:var(--bad); }

.dutymini{ list-style:none; margin:0; padding:0; }
.dutymini li{ display:flex; gap:8px; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--line-soft); font-size:12.5px; }
.dutymini li:last-child{ border-bottom:0; }
.dm-date{ font-weight:800; }
.dm-time{ color:var(--muted); }
.dm-label{ color:var(--muted); font-size:11.5px; }

/* -------------------------------------------------------- Mitglieder */

.memberlist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.membercard{ display:flex; gap:12px; padding:14px; align-items:center; margin-bottom:0; position:relative; }
.membercard-body{ min-width:0; flex:1; }
.membercard-name{ font-weight:800; font-size:14px; color:var(--text-strong); display:flex; align-items:center; gap:6px; }
.membercard-meta{ font-size:12px; color:var(--muted); margin-bottom:5px; }
.membercard-tags{ display:flex; gap:4px; flex-wrap:wrap; }
.membercard-edit{ position:absolute; top:10px; right:12px; color:var(--muted); font-size:13px; }

/* -------------------------------------------------- Rollen/Verwaltung */

.rolelayout{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:18px; align-items:start; }
.rolelist{ display:flex; flex-direction:column; gap:7px; }

.roleitem{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:11px 13px; text-decoration:none; color:var(--text);
  display:flex; flex-direction:column; gap:5px;
}
.roleitem:hover{ border-color:var(--brand); text-decoration:none; }
.roleitem.active{ border-color:var(--brand); background:var(--brand-soft); }
.roleitem-top{ display:flex; align-items:center; gap:8px; font-size:13.5px; }
.roleitem-meta{ font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.newrole summary{ list-style:none; cursor:pointer; }
.newrole summary::-webkit-details-marker{ display:none; }

.roledetail-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

.permeditor{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:0; }
.permblock{ padding:14px 16px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.permblock h3{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--brand); margin-bottom:9px; }

.permopt{
  margin:0 0 7px; text-transform:none; letter-spacing:0; font-weight:400;
  display:flex; gap:9px; align-items:flex-start; cursor:pointer;
  padding:7px 9px; border-radius:9px; border:1px solid transparent;
}
.permopt:hover{ background:var(--surface-soft); }
.permopt input{ margin-top:2px; accent-color:var(--brand); width:16px; height:16px; }
.permopt:has(input:checked){ background:var(--brand-soft); border-color:var(--brand-line,var(--bad-line)); }
.permopt.locked{ opacity:.75; cursor:not-allowed; }
.permopt-text{ display:flex; flex-direction:column; }
.permopt-text strong{ font-size:12.5px; color:var(--text-strong); }
.permopt-text small{ font-size:11px; color:var(--muted); line-height:1.4; }

.permlist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.permgroup h4{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--brand); }
.permrow{ display:flex; gap:7px; font-size:12.5px; padding:2px 0; }
.permrow.no{ color:var(--muted); opacity:.55; }
.permmark{ font-weight:900; width:14px; }
.permrow.yes .permmark{ color:var(--ok); }

.userhead{ display:flex; gap:16px; align-items:center; }

/* -------------------------------------------------------- Anmeldungen */

.regcard{ padding:16px 18px; }
.regcard.status-wartet{ border-left:4px solid var(--warn); }
.regcard.status-genehmigt{ border-left:4px solid var(--ok); }
.regcard.status-abgelehnt{ border-left:4px solid var(--line); opacity:.75; }
.regcard-head{ display:flex; gap:13px; align-items:flex-start; }
.regcard-info{ flex:1; min-width:0; }
.regcard-name{ font-weight:800; font-size:15px; color:var(--text-strong); }
.regcard-meta{ font-size:12.5px; color:var(--muted); }
.regcard-message{
  margin-top:11px; padding:10px 13px; border-radius:10px;
  background:var(--surface-soft); border:1px solid var(--line);
  font-size:13px; font-style:italic;
}
.regcard-actions{ margin-top:13px; padding-top:12px; border-top:1px solid var(--line-soft); display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start; }
.regcard-decided{ font-size:12.5px; color:var(--muted); }
.regform{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.regform select{ max-width:230px; }
.rejectbox summary{ list-style:none; cursor:pointer; }
.rejectbox summary::-webkit-details-marker{ display:none; }

.pwbox{
  display:flex; flex-direction:column; gap:3px;
  background:var(--warn-soft); border:1px solid var(--warn-line);
  border-radius:10px; padding:9px 13px; margin:8px 0;
}
.pwbox-label{ font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; color:var(--warn); }
.pwbox-code{ font-size:16px; font-weight:800; letter-spacing:.06em; background:none; padding:0; color:var(--text-strong); }

/* ----------------------------------------------------------- Feedback */

.fbcard{ padding:15px 18px; }
.fbcard.kind-problem{ border-left:4px solid var(--bad); }
.fbcard.kind-wunsch{ border-left:4px solid var(--info); }
.fbcard.kind-feedback{ border-left:4px solid var(--ok); }
.fbcard.status-erledigt{ opacity:.68; }
.fbcard-head{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:9px; }
.fbkind{ font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; padding:2px 9px; border-radius:6px; }
.fb-feedback{ background:var(--ok-soft); color:var(--ok); }
.fb-wunsch{ background:var(--info-soft); color:var(--info); }
.fb-problem{ background:var(--bad-soft); color:var(--bad); }
.fbsubject{ font-weight:800; font-size:14px; color:var(--text-strong); }
.fbdate{ font-size:11.5px; color:var(--muted); }
.fbstatus{ margin-left:auto; }
.fbcard-body{ font-size:14px; line-height:1.65; white-space:pre-line; }
.fbnote{ margin-top:11px; padding:9px 13px; border-radius:9px; background:var(--info-soft); border:1px solid var(--info-line); font-size:12.5px; }
.fbcard-actions{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:13px; padding-top:11px; border-top:1px solid var(--line-soft); }

.anonbox{ text-align:center; }
.anonicon{ font-size:30px; margin-bottom:6px; }
.anonbox h3{ margin-bottom:8px; }
.anonbox p,.anonbox ul{ text-align:left; }
.checklist-ok,.checklist-no{ list-style:none; margin:8px 0 0; padding:0; font-size:12.5px; }
.checklist-ok li,.checklist-no li{ padding:2px 0 2px 20px; position:relative; color:var(--muted); }
.checklist-ok li::before{ content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:900; }
.checklist-no li::before{ content:"✕"; position:absolute; left:0; color:var(--bad); font-weight:900; }

.successbox{ text-align:center; padding:34px 22px; }
.successicon{
  width:54px; height:54px; margin:0 auto 12px;
  border-radius:50%; background:var(--ok-soft); color:var(--ok);
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:900;
}

/* -------------------------------------------------------- Moderation */

.modlist{ display:flex; flex-direction:column; }
.moditem{ display:flex; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line-soft); align-items:flex-start; }
.moditem:last-child{ border-bottom:0; }
.moditem-body{ flex:1; min-width:0; }
.moditem-title{ font-weight:800; font-size:13.5px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.moditem-text{ font-size:12.5px; color:var(--muted); margin:4px 0; }
.moditem-meta{ font-size:11.5px; color:var(--muted); }
.moditem-actions{ display:flex; gap:6px; flex-wrap:wrap; }

.loglist{ list-style:none; margin:0; padding:0; }
.loglist li{ display:flex; flex-direction:column; gap:1px; padding:7px 0; border-bottom:1px solid var(--line-soft); }
.loglist li:last-child{ border-bottom:0; }
.log-action{ font-size:12.5px; font-weight:700; }
.log-who{ font-size:11.5px; color:var(--muted); }
.log-when{ font-size:10.5px; color:var(--muted); }

.quallist{ display:flex; flex-direction:column; gap:6px; }
.qualrow{ display:flex; align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid var(--line-soft); }
.qualrow:last-child{ border-bottom:0; }
.qualrow .linkbtn{ margin-left:auto; }

.metric{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:13px; }
.metric:last-child{ border-bottom:0; }
.metric span{ color:var(--muted); font-weight:700; }
.metric b{ font-size:16px; font-weight:900; }
.c-ok{ color:var(--ok); } .c-bad{ color:var(--bad); } .c-warn{ color:var(--warn); }

.donutwrap{ position:relative; display:flex; justify-content:center; margin:4px 0 14px; }
.donut{ width:136px; height:136px; transform:rotate(-90deg); }
.donut circle{ transition:stroke-dasharray .4s ease; }
.donut-center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; line-height:1.15; }
.donut-center span{ display:block; font-size:23px; font-weight:900; color:var(--text-strong); }
.donut-center small{ font-size:10px; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.05em; }

.alertlist{ list-style:none; margin:0; padding:0; max-height:270px; overflow:auto; }
.alertlist li{ display:flex; justify-content:space-between; gap:8px; font-size:12.5px; padding:6px 0; border-bottom:1px dashed var(--line-soft); }
.alertlist li:last-child{ border-bottom:0; }
.al-days{ font-weight:900; white-space:nowrap; }
.al-days.expired{ color:var(--bad); }
.al-days.soon{ color:var(--warn); }
.misslist{ margin:6px 0 0 18px; padding:0; font-size:13.5px; line-height:1.6; }

.colmap{ display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.colchip{ display:inline-flex; flex-direction:column; padding:5px 11px; border-radius:9px; font-size:11.5px; font-weight:800; border:1px solid var(--line); background:var(--surface-soft); }
.colchip em{ font-style:normal; font-weight:600; font-size:10.5px; opacity:.8; }
.colchip.found{ border-color:var(--ok-line); background:var(--ok-soft); color:var(--ok); }
.colchip.missing{ border-color:var(--line); color:var(--muted); }

/* ---------------------------------------------------------- Anmeldung */

.authpage{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:26px 18px; background:linear-gradient(140deg,#7C2430,var(--brand) 48%,#651E29); }
.authcard{ width:100%; max-width:410px; background:var(--surface); border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.28); padding:28px; }
.authcard.wide{ max-width:560px; }
.authhead{ display:flex; gap:14px; align-items:center; margin-bottom:18px; }
.authhead h1{ font-size:20px; }
.authhead p{ margin:2px 0 0; font-size:12.5px; }
.authfoot{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--muted); text-align:center; }

.steps{ display:flex; flex-direction:column; gap:2px; margin:18px 0; }
.step{ display:flex; gap:12px; align-items:center; padding:9px 0; opacity:.5; }
.step.done,.step.active{ opacity:1; }
.step span{
  width:26px; height:26px; flex:0 0 auto; border-radius:50%;
  background:var(--chip-bg); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900;
}
.step.done span{ background:var(--ok); color:#fff; }
.step.active span{ background:var(--brand); color:#fff; }
.step div{ display:flex; flex-direction:column; }
.step strong{ font-size:13px; }
.step small{ font-size:11.5px; color:var(--muted); }

.profilecard{ text-align:center; }
.profilecard h3{ margin:10px 0 6px; }

/* --------------------------------------------------------- Meldungen */

.flash{ padding:11px 15px; border-radius:11px; margin-bottom:14px; font-size:13.5px; font-weight:600; border:1px solid transparent; }
.flash-ok{ background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line); }
.flash-bad{ background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line); }
.flash-warn{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.flash-info{ background:var(--info-soft); color:var(--info); border-color:var(--info-line); }
.flash-warn-card{ border-left:4px solid var(--warn); }

.toast{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  min-width:250px; max-width:400px; background:#1a2430; color:#fff;
  border-radius:13px; padding:12px 16px; box-shadow:0 16px 38px rgba(0,0,0,.32);
  opacity:0; transform:translateY(14px); pointer-events:none; transition:.22s ease;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast strong{ display:block; font-size:13.5px; }
.toast span{ font-size:12px; opacity:.85; }
.toast.err{ background:#7a1d15; }

.dd{ display:inline-block; position:relative; }
.dd summary{ list-style:none; cursor:pointer; }
.dd summary::-webkit-details-marker{ display:none; }
.dd-body{
  position:absolute; right:0; top:100%; z-index:60;
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  padding:11px; margin-top:5px; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; gap:7px; width:270px;
}
.dd-body.wide{ width:330px; }

.footer{ max-width:1500px; margin:0 auto; padding:20px; display:flex; gap:8px; color:var(--muted); font-size:12px; flex-wrap:wrap; }
.footer-sep{ opacity:.5; }

/* --------------------------------------------------------- Responsiv */

@media(max-width:1200px){
  .split{ grid-template-columns:1fr; }
  .side{ position:static; display:grid; grid-template-columns:1fr 1fr; }
  .rolelayout{ grid-template-columns:1fr; }
  .rolelist{ flex-direction:row; overflow-x:auto; padding-bottom:6px; }
  .roleitem{ min-width:190px; }
}

@media(max-width:860px){
  .row3,.row4,.grid-3,.grid-4{ grid-template-columns:1fr 1fr; }
  .typeswitch.three{ grid-template-columns:1fr; }
}

@media(max-width:760px){
  .page{ padding:14px 13px 30px; }
  .topbar-inner{ padding:9px 13px; flex-wrap:wrap; }
  .mainnav{ order:3; width:100%; display:none; }
  .mainnav.open{ display:flex; }
  .burger{ display:block; order:2; margin-left:auto; }
  .topbar-right{ order:2; }
  .userchip-text{ display:none; }
  .row2,.row3,.row4,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .side{ grid-template-columns:1fr; }
  .tiles{ grid-template-columns:1fr; }
  .memberlist{ grid-template-columns:1fr; }
  .permeditor{ grid-template-columns:1fr; }
  .hero{ padding:18px; }
  .hero h1{ font-size:21px; }
  h1{ font-size:20px; }
  .toast{ right:12px; left:12px; }
  .eventcard-main{ flex-direction:column; }
  .dutycard{ flex-wrap:wrap; }
  .dutycard-actions{ align-items:flex-start; flex-direction:row; }
}

/* ------------------------------------------------------------- Druck */

@media print{
  .topbar,.footer,.noprint,.pagehead-actions,.card-head .chips,
  .searchwrap,.sticky-save,.toast,.side,.hero-stats,.tiles,.adminstrip{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11px; }
  .page{ padding:0; max-width:none; }
  .split{ display:block; }
  .card{ box-shadow:none; border-color:#bbb; margin-bottom:8px; }
  .tablewrap{ max-height:none; overflow:visible; }
  table{ min-width:0 !important; }
  thead th{ position:static; background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  tr{ page-break-inside:avoid; }
  .kpi{ box-shadow:none; padding:5px 10px; min-width:88px; }
  .kpi-value{ font-size:15px; }
  .badge{ border:1px solid #999; }
  .print-only{ display:block; }
  .hero{ background:#c0122a !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; border-radius:0; }
  .signature{ display:flex; gap:40px; margin-top:36px; page-break-inside:avoid; }
  .sig-line{ flex:1; border-top:1px solid #333; padding-top:5px; font-size:10px; color:#333; }
}

.signature{ display:none; }

.hr{ border:0; border-top:1px solid var(--line-soft); margin:4px 0; }