/* FF Tamsweg – Interner Bereich. CI: Rot #D74438, Anthrazit #1D1D1B, Gold #C19642, Oswald + Open Sans */
@font-face { font-family: 'Oswald'; font-weight: 500; font-display: swap; src: url(../fonts/oswald-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Oswald'; font-weight: 700; font-display: swap; src: url(../fonts/oswald-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-display: swap; src: url(../fonts/open-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-display: swap; src: url(../fonts/open-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-display: swap; src: url(../fonts/open-sans-latin-700-normal.woff2) format('woff2'); }

:root {
  --red: #d74438; --red-dark: #b8352a; --red-soft: #fbeceb;
  --dark: #1d1d1b; --dark-2: #2b2b28; --gray: #444; --muted: #868686; --line: #e4e4e2; --bg: #f2f2ef; --white: #fff;
  --gold: #c19642; --gold-soft: #f7f0e1;
  --ok: #2e8b57; --ok-soft: #e6f4ec; --warn: #d99100; --warn-soft: #fdf3dd; --bad: #d74438; --bad-soft: #fbeceb; --info: #2f6fb0; --info-soft: #e7f0fa;
  --radius: 4px; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --head: 'Oswald', 'Arial Narrow', sans-serif; --text: 'Open Sans', Arial, sans-serif;
  --top: 62px; --side: 250px; --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.55 var(--text); color: var(--dark); background: var(--bg); }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; margin: 0 0 .6em; overflow-wrap: anywhere; hyphens: auto; }
html, body { overflow-x: clip; }
h1 { font-size: 30px; } h2 { font-size: 20px; } h3 { font-size: 17px; } h4 { font-size: 14px; color: var(--gray); }
code { background: #eee; padding: 1px 5px; border-radius: 3px; font-size: .9em; word-break: break-all; }
[hidden] { display: none !important; }
.ic { width: 20px; height: 20px; flex: none; vertical-align: -4px; }
.ic.xl { width: 56px; height: 56px; color: var(--muted); margin: 10px auto; display: block; }
.ic.gold { color: var(--gold); }
.muted { color: var(--muted); } .small { font-size: 13px; } .nowrap { white-space: nowrap; } .center { text-align: center; } .grow { flex: 1; min-width: 0; }
.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); }
.accent { color: var(--red); }

/* ---------- Kopfzeile & Hauptmenü (oben) ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; height: var(--top); background: var(--dark); color: #fff; display: flex; align-items: center; gap: 18px; padding: 0 20px; z-index: 50; border-bottom: 3px solid var(--red); }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; flex: none; }
.brand:hover { text-decoration: none; }
.brand img.brand-logo { height: 14px; width: auto; display: block; }
.brand .brand-mini { display: none; }
.brand-tag { font: 700 12px var(--head); text-transform: uppercase; background: var(--red); padding: 2px 8px; letter-spacing: .08em; border-radius: 3px; }
.topnav { display: flex; align-items: stretch; height: 100%; gap: 2px; margin-left: 8px; }
.tn-item { position: relative; display: flex; align-items: center; }
.topnav > .tn-item { height: 100%; }
.tn-link { display: flex; align-items: center; gap: 4px; color: #d8d8d4; font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 6px; white-space: nowrap; }
.tn-link:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.07); }
.topnav > .tn-item.active > .tn-link { color: #fff; }
.topnav > .tn-item.active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -3px; height: 3px; background: #fff; }
.tn-chev { width: 14px; height: 14px; transform: rotate(90deg); opacity: .7; }
.tn-drop { position: absolute; top: calc(100% - 4px); left: 0; min-width: 250px; background: #fff; color: var(--dark); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s; z-index: 60; }
.topnav .tn-drop { top: calc(100% - 2px); }
.tn-item.right .tn-drop { left: auto; right: 0; top: calc(100% + 8px); }
.tn-item.has-sub:hover > .tn-drop, .tn-item.has-sub:focus-within > .tn-drop, .tn-item.open > .tn-drop { opacity: 1; visibility: visible; transform: none; }
.tn-drop a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--dark); }
.tn-drop a:hover { background: var(--bg); text-decoration: none; }
.tn-drop a strong { display: block; font-size: 14px; font-weight: 600; }
.tn-drop a small { display: block; font-size: 12px; color: var(--muted); }
.tn-drop a:hover strong { color: var(--red); }
.tn-head { padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font: 700 12px var(--head); text-transform: uppercase; color: var(--muted); letter-spacing: .06em; }
.tn-head strong { display: block; font: 700 15px var(--text); text-transform: none; color: var(--dark); letter-spacing: 0; }
.tn-head small { display: block; font: 400 12px var(--text); text-transform: none; letter-spacing: 0; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn { background: none; border: 0; color: inherit; padding: 8px; border-radius: 6px; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: rgba(127,127,127,.15); text-decoration: none; }
.topbar .icon-btn { color: #d8d8d4; }
.topbar .icon-btn:hover { color: #fff; }
.topbar-actions .tn-item.active > .icon-btn { color: #fff; background: rgba(255,255,255,.1); }
.bell .badge { position: absolute; top: 2px; right: 0; }
.badge { background: var(--red); color: #fff; font: 700 11px var(--text); border-radius: 10px; padding: 1px 6px; min-width: 18px; text-align: center; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 14px var(--head); flex: none; padding: 0; }
.avatar:hover { text-decoration: none; }
.avatar.lg { width: 44px; height: 44px; font-size: 16px; } .avatar.xl { width: 72px; height: 72px; font-size: 26px; }
.main { padding: calc(var(--top) + 28px) 28px 48px; max-width: 1280px; margin: 0 auto; }
.mobilenav, .nav-backdrop, .tabbar { display: none; }

@media (max-width: 1080px) {
  .topnav { display: none; }
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar-actions > .tn-item.right:not(:last-child) { display: none; }
  .main { padding: calc(var(--top) + 18px) 16px calc(86px + var(--safe-b)); }
  .tabbar { display: flex; position: fixed; inset: auto 0 0 0; background: #fff; border-top: 1px solid var(--line); z-index: 45; padding-bottom: var(--safe-b); box-shadow: 0 -4px 20px rgba(0,0,0,.05); }
  .tabbar a, .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 0 7px; color: var(--muted); font: 600 11px var(--text); background: none; border: 0; cursor: pointer; position: relative; }
  .tabbar a.active, .tabbar button.active { color: var(--red); }
  .tabbar a.active::before, .tabbar button.active::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; background: var(--red); border-radius: 0 0 3px 3px; }
  .tabbar a:hover { text-decoration: none; }
  .mobilenav { display: block; position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); background: #fff; z-index: 70; overflow-y: auto; transform: translateX(100%); transition: transform .22s; padding: 0 0 calc(30px + var(--safe-b)); box-shadow: -8px 0 30px rgba(0,0,0,.2); }
  .nav-open .mobilenav { transform: none; }
  .nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 65; }
  .mn-user { display: flex; gap: 12px; align-items: center; padding: 18px 16px; background: var(--dark); color: #fff; border-bottom: 3px solid var(--red); }
  .mn-user small { display: block; color: #bbb; font-size: 12px; }
  .mn-user > div:nth-child(2) { flex: 1; }
  .mn-user .icon-btn { color: #fff; }
  .mn-group { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .mn-main { display: flex; align-items: center; gap: 12px; padding: 10px 18px; font: 700 15px var(--head); text-transform: uppercase; letter-spacing: .04em; color: var(--dark); }
  .mn-main .ic { color: var(--red); }
  .mn-group.active .mn-main { color: var(--red); }
  .mn-sub { display: block; padding: 8px 18px 8px 50px; color: var(--gray); font-size: 14px; }
  .mn-main:hover, .mn-sub:hover { background: var(--bg); text-decoration: none; }
  h1 { font-size: 24px; }
}
@media (max-width: 420px) { .brand img.brand-logo { display: none; } .brand .brand-mini { display: block; height: 36px; width: 36px; } }
@media (max-width: 560px) {
  .push-hint, .install-hint { flex-wrap: wrap; }
  .push-hint .btn, .install-hint .btn { width: 100%; justify-content: center; }
}

.offline-bar { position: fixed; top: var(--top); left: 0; right: 0; z-index: 60; background: var(--warn); color: #fff; text-align: center; font-weight: 600; font-size: 13px; padding: 4px 10px; }
body.bare .offline-bar { top: 0; }

/* ---------- Seitenkopf ---------- */
.page-head { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { margin: 0; position: relative; padding-bottom: 10px; }
.page-head h1::after, .hello h1::after { content: ''; position: absolute; left: 0; bottom: 0; width: 60px; height: 4px; background: var(--red); }
.page-head .sub, .hello .sub { margin: 8px 0 0; color: var(--gray); }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hello { margin-bottom: 18px; } .hello h1 { position: relative; padding-bottom: 10px; margin: 0; }
h2.section { font-size: 18px; margin: 28px 0 12px; display: flex; align-items: center; gap: 10px; }
h2.section::before { content: ''; width: 4px; height: 18px; background: var(--red); }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--gray); margin-bottom: 10px; font-weight: 600; font-size: 14px; }

/* ---------- Karten & Raster ---------- */
.card { background: var(--white); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.04); padding: 20px; margin-bottom: 16px; border: 1px solid #ebebe8; }
.card h2 { display: flex; align-items: center; gap: 8px; font: 700 16px var(--text); text-transform: none; letter-spacing: 0; }
.card h2 .ic { color: var(--red); }
.card.narrow, .narrow { max-width: 760px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card-head .more { font-size: 13px; font-weight: 600; white-space: nowrap; }
.card-alert { box-shadow: inset 0 3px 0 var(--red), 0 1px 3px rgba(0,0,0,.05); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.dash-grid > .card { margin: 0; }
.span2 { grid-column: span 2; }
@media (max-width: 720px) { .span2 { grid-column: auto; } .dash-grid { grid-template-columns: 1fr; } }
.veh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.veh-grid > .card { margin: 0; }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.kb-grid > .card { margin: 0; }

/* ---------- Buttons & Formulare ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; border: 2px solid var(--red); padding: 9px 18px; font: 700 14px var(--head); text-transform: uppercase; letter-spacing: .05em; border-radius: var(--radius); cursor: pointer; text-decoration: none; line-height: 1.2; }
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); text-decoration: none; color: #fff; }
.btn-ghost { background: transparent; color: var(--dark); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg); color: var(--dark); border-color: #ccc; }
.btn-dark { background: var(--dark); border-color: var(--dark); }
.btn-dark:hover { background: #000; border-color: #000; }
.btn-danger-ghost { background: transparent; color: var(--red); border-color: transparent; }
.btn-danger-ghost:hover { background: var(--red-soft); color: var(--red); border-color: var(--red-soft); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; padding: 12px; font-size: 16px; }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }
.btn .ic { width: 17px; height: 17px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.actions form { margin: 0; }
form.inline { display: inline; }
.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-form input, .inline-form select { width: auto; }
.inline-form.wide input[name=name] { flex: 1; min-width: 180px; }
.inline-form .num { width: 80px; }
.danger-zone { margin: 10px 0 30px; }

.form label { display: block; font-weight: 600; font-size: 13px; color: var(--gray); margin-bottom: 14px; }
.form label > input, .form label > select, .form label > textarea, .form > input, .form > select, .compact input, .compact select { margin-top: 5px; }
input, select, textarea { width: 100%; font: 15px var(--text); padding: 10px 12px; border: 1px solid #cfcfcc; border-radius: var(--radius); background: #fff; color: var(--dark); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--red); outline-offset: -1px; border-color: var(--red); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--red); margin: 0; vertical-align: -3px; }
input[type=file] { padding: 8px; background: var(--bg); }
textarea { resize: vertical; }
textarea.mono { font: 12px monospace; }
.form label.check { display: flex; gap: 10px; align-items: center; font-weight: 400; font-size: 15px; color: var(--dark); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 14px; }
legend { font: 700 13px var(--head); text-transform: uppercase; color: var(--gray); padding: 0 6px; letter-spacing: .04em; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 14px; }
@media (max-width: 720px) { .grid2, .grid4 { grid-template-columns: 1fr; } }
@media (min-width: 721px) and (max-width: 1100px) { .grid4 { grid-template-columns: 1fr 1fr; } }
.hint { color: var(--muted); font-size: 13px; margin: 6px 0 12px; display: block; }
.compact label { margin-bottom: 8px; }
.compact > input, .compact > select { margin-bottom: 8px; }
.filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding: 14px 16px; }
.filters label { margin: 0; flex: 1; min-width: 180px; font-weight: 600; font-size: 13px; color: var(--gray); }
.filter-input { margin-bottom: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips.scroll { max-height: 260px; overflow-y: auto; padding: 4px 0; }
.chip { margin: 0 !important; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 6px 12px; border: 1px solid #cfcfcc; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--gray); background: #fff; user-select: none; }
.chip.unit span { border-style: dashed; }
.chip input:checked + span { background: var(--dark); border-color: var(--dark); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--red); }
.group-picker .hint { margin-bottom: 0; }

.seg { display: flex; flex-wrap: wrap; border: 1px solid #cfcfcc; border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; width: fit-content; max-width: 100%; }
.seg label { margin: 0 !important; flex: 1 1 auto; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: 9px 16px; font: 600 13px var(--text); color: var(--gray); cursor: pointer; text-align: center; border-right: 1px solid #e0e0de; background: #fff; }
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--dark); color: #fff; }
.seg-status .seg-ok input:checked + span { background: var(--ok); }
.seg-status .seg-warn input:checked + span { background: var(--warn); }
.seg-status .seg-bad input:checked + span { background: var(--bad); }

/* ---------- Hinweise ---------- */
.flash { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 14px; border-left: 4px solid; background: #fff; }
.flash-ok { border-color: var(--ok); background: var(--ok-soft); }
.flash-err { border-color: var(--bad); background: var(--bad-soft); }
.flash-warn { border-color: var(--warn); background: var(--warn-soft); }
.flash-info { border-color: var(--info); background: var(--info-soft); }
.flash.big { font-size: 16px; }
code.pw { font-size: 20px; padding: 4px 10px; background: #fff; letter-spacing: .05em; }
.toast { position: fixed; left: 50%; bottom: calc(90px + var(--safe-b)); transform: translate(-50%, 20px); background: var(--dark); color: #fff; padding: 10px 18px; border-radius: var(--radius); opacity: 0; transition: .3s; z-index: 100; max-width: 90vw; font-weight: 600; font-size: 14px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-err { background: var(--red); }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 12px; font-size: 12px; font-weight: 700; background: #ecece9; color: var(--gray); white-space: nowrap; vertical-align: middle; }
.pill .ic { width: 14px; height: 14px; }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-warn { background: var(--warn-soft); color: #a46d00; }
.pill-bad { background: var(--bad-soft); color: var(--bad); }
.pill-info { background: var(--info-soft); color: var(--info); }
.pill-gold { background: var(--gold-soft); color: #8d6a24; }
.pill-none { background: #ecece9; }
.empty-state { text-align: center; color: var(--muted); padding: 12px 0; }
.empty-state .ic { width: 28px; height: 28px; color: #c8c8c4; }
.empty-state p { margin: 6px 0 0; }
.task { display: flex; align-items: center; gap: 12px; background: var(--gold-soft); border: 1px solid #ead9b3; border-left: 4px solid var(--gold); color: var(--dark); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 10px; font-weight: 600; }
.task:hover { text-decoration: none; background: #f2e7cf; }
.task span { flex: 1; }
.task .ic:first-child { color: var(--gold); }
.push-hint, .install-hint { display: flex; align-items: center; gap: 14px; border-left: 4px solid var(--red); }
.push-hint > .ic, .install-hint > .ic { width: 28px; height: 28px; color: var(--red); }
.push-hint p, .install-hint p { margin: 2px 0 0; font-size: 13px; color: var(--gray); }
.push-hint div, .install-hint div { flex: 1; }

/* ---------- Dashboard-Bausteine ---------- */
.msg { display: block; color: var(--dark); padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: 8px; border-left: 4px solid var(--warn); }
.msg:hover { text-decoration: none; background: var(--bg); }
.msg-important { border-left-color: var(--red); background: var(--red-soft); }
.msg-title { font-weight: 700; }
.msg-meta { font-size: 13px; color: var(--gray); display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.msg-meta .ic { width: 15px; height: 15px; }
.all-ok, .status-big { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius); background: var(--ok-soft); color: var(--ok); margin-bottom: 12px; }
.all-ok .ic, .status-big .ic { width: 34px; height: 34px; }
.all-ok small, .status-big small { display: block; color: var(--gray); }
.status-warn { background: var(--warn-soft); color: #a46d00; } .status-bad { background: var(--bad-soft); color: var(--bad); }
.veh-sum { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.veh-row { display: flex; align-items: center; gap: 10px; color: var(--dark); padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.veh-row:hover { text-decoration: none; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.dot-ok { background: var(--ok); } .dot-warn { background: var(--warn); } .dot-bad { background: var(--bad); }
.veh-dots { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.vchip { font: 700 12px var(--head); padding: 3px 8px; border-radius: 3px; color: #fff; background: var(--ok); letter-spacing: .04em; }
.vchip-warn { background: var(--warn); } .vchip-bad { background: var(--bad); }
.event-row, .doc-row, .list-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--dark); }
.event-row:last-child, .doc-row:last-child, .list-row:last-child { border-bottom: 0; }
.event-row:hover, .doc-row:hover { text-decoration: none; background: var(--bg); }
.event-row small, .doc-row small { display: block; color: var(--muted); font-size: 13px; }
.event-row.past { opacity: .55; }
.doc-row > .ic { color: var(--red); }
.date-box { width: 48px; flex: none; text-align: center; border-top: 4px solid var(--c, var(--red)); background: var(--bg); padding: 4px 0; line-height: 1.1; }
.date-box b { display: block; font: 700 20px var(--head); }
.date-box small { font: 500 11px var(--head); text-transform: uppercase; color: var(--gray) !important; }
.progress-row { display: block; color: var(--dark); margin-bottom: 12px; }
.progress-row:hover { text-decoration: none; }
.pr-label { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.bar { height: 8px; background: #ecece9; border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), #e7695f); border-radius: 4px; transition: width .4s; }
.bar.small { display: inline-block; width: 80px; height: 6px; vertical-align: middle; }
.ach-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ---------- Meldungen ---------- */
.msg-card { border-left: 5px solid var(--warn); }
.msg-card.type-sperre { border-left-color: var(--red); }
.msg-card.type-info { border-left-color: var(--info); }
.msg-card.msg-important { background: #fff; box-shadow: 0 0 0 2px var(--red-soft), var(--shadow); }
.msg-card h3 { font-size: 20px; margin: 8px 0; }
.msg-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.meta { display: flex; gap: 8px; align-items: center; margin: 4px 0; color: var(--gray); }
.meta .ic { color: var(--red); width: 17px; height: 17px; }
.msg-body { margin: 12px 0; padding: 12px; background: var(--bg); border-radius: var(--radius); }
details.past summary { cursor: pointer; font: 700 15px var(--head); text-transform: uppercase; padding: 12px 0; color: var(--gray); }
details.past .card { opacity: .7; }

/* ---------- Fahrzeuge ---------- */
.veh-card { border-top: 5px solid var(--ok); }
.veh-card.veh-warn { border-top-color: var(--warn); } .veh-card.veh-bad { border-top-color: var(--bad); }
.veh-head { display: flex; gap: 12px; align-items: flex-start; }
.veh-head h3 { font-size: 24px; margin: 0; }
.veh-head p { margin: 0; }
.veh-img { width: 80px; height: 56px; object-fit: cover; border-radius: 3px; }
.veh-note { background: var(--warn-soft); padding: 10px 12px; border-radius: var(--radius); margin: 12px 0; }
.veh-bad .veh-note { background: var(--bad-soft); }
.veh-note p { margin: 4px 0 0; }
.veh-edit { margin: 10px 0; }
.veh-edit summary { list-style: none; }
.veh-edit summary::-webkit-details-marker { display: none; }
.veh-edit[open] summary { margin-bottom: 12px; }
.sub-details summary { cursor: pointer; font-size: 13px; color: var(--gray); margin-bottom: 8px; }
.veh-links { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; font-size: 13px; }
.veh-links summary { cursor: pointer; color: var(--gray); }
.log { list-style: none; padding: 0; margin: 8px 0; font-size: 13px; }
.log li { padding: 5px 0; border-bottom: 1px solid var(--line); }

/* ---------- Kalender ---------- */
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cal-head h2 { margin: 0; min-width: 180px; text-align: center; font-size: 20px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cal-wd { font: 700 12px var(--head); text-transform: uppercase; text-align: center; padding: 6px 0; background: var(--dark); color: #fff; border-right: 1px solid #333; }
.cal-day { min-height: 96px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px; overflow: hidden; }
.cal-day.other { background: #fafaf8; }
.cal-day.other .cal-num { color: #bbb; }
.cal-num { font: 600 13px var(--text); display: inline-block; min-width: 22px; height: 22px; text-align: center; line-height: 22px; border-radius: 50%; }
.cal-day.today .cal-num { background: var(--red); color: #fff; }
.cal-ev { display: block; font-size: 12px; line-height: 1.3; color: #fff; background: var(--c); padding: 2px 5px; border-radius: 3px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev:hover { text-decoration: none; filter: brightness(1.1); }
.cal-more { font-size: 11px; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--gray); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
@media (max-width: 720px) {
  .cal-day { min-height: 46px; padding: 2px; text-align: center; }
  .cal-ev { height: 6px; padding: 0; margin: 2px auto 0; width: 80%; }
  .cal-ev span { display: none; }
  .cal-more { display: none; }
  .cal-head h2 { min-width: 0; flex: 1; font-size: 17px; }
}
.event-detail { border-top: 5px solid var(--c); }
.event-detail h1 { margin: 10px 0; }
.rsvp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rsvp-cols h3 { font-size: 15px; }
.rsvp-cols p { font-size: 13px; margin: 0; }
@media (max-width: 720px) { .rsvp-cols { grid-template-columns: 1fr; } }
.ics-box summary { cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.copy-row { display: flex; gap: 8px; }

/* ---------- Tabellen ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font: 700 12px var(--head); text-transform: uppercase; color: var(--gray); padding: 8px; border-bottom: 2px solid var(--dark); letter-spacing: .04em; }
.table td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr.inactive td { opacity: .45; }
.table-scroll { overflow-x: auto; }
.card > .table { margin: -6px 0; }
@media (max-width: 720px) {
  .card:has(> .table) { overflow-x: auto; }
  .table { font-size: 13px; }
}
.perm-matrix th.rot { height: 150px; vertical-align: bottom; padding: 4px; }
.perm-matrix th.rot span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.perm-matrix td.c { text-align: center; }
.perm-matrix tr.sec td { background: var(--bg); font: 700 13px var(--head); text-transform: uppercase; color: var(--red); }
.perm-matrix td:first-child { min-width: 240px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; border-bottom: 2px solid var(--line); }
.tabs a { padding: 8px 14px; color: var(--gray); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; display: flex; gap: 6px; align-items: center; }
.tabs a.active { color: var(--red); border-bottom-color: var(--red); }
.tabs a:hover { text-decoration: none; }

/* ---------- Dokumente ---------- */
.doc-list { padding: 6px 16px; }
.doc-item { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); }
.doc-item:last-child { border-bottom: 0; }
.doc-main { display: flex; align-items: center; gap: 14px; flex: 1; padding: 12px 0; color: var(--dark); min-width: 0; }
.doc-main:hover { text-decoration: none; }
.doc-main:hover strong { color: var(--red); }
.doc-main small { display: block; font-size: 12px; }
.doc-main .desc { color: var(--gray); font-size: 13px; }
.doc-main > .ic { color: var(--red); }
.file-ext { width: 44px; height: 52px; flex: none; background: var(--dark); color: #fff; font: 700 11px var(--head); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; border-radius: 3px; clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%); }
.offline-btn { color: var(--muted); }
.offline-btn.saved { color: var(--ok); }

/* ---------- Wissensdatenbank ---------- */
.kb-card { display: flex; align-items: center; gap: 16px; color: var(--dark); transition: transform .15s; }
.kb-card:hover { text-decoration: none; transform: translateY(-2px); }
.kb-card h3 { font-size: 16px; margin: 0 0 4px; }
.kb-card p { margin: 0; }
.kb-card > .ic { color: var(--muted); }
.ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; flex: none; background: conic-gradient(var(--red) calc(var(--p) * 1%), #ecece9 0); display: grid; place-items: center; }
.ring span { width: 50px; height: 50px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 700 15px var(--head); }
.ring.lg { width: 120px; height: 120px; margin: 0 auto 10px; }
.ring.lg span { width: 96px; height: 96px; font-size: 28px; }
.kb-progress { display: flex; gap: 20px; align-items: center; }
.kb-progress .ring.lg { margin: 0; }
.kb-progress p { margin: 4px 0; }

.quiz { max-width: 800px; }
.quiz-loading { padding: 40px; text-align: center; color: var(--muted); }
.quiz-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font: 700 14px var(--head); }
.quiz-progress .bar { flex: 1; }
.q-text { font-family: var(--text); text-transform: none; font-size: 20px; font-weight: 700; letter-spacing: 0; margin: 12px 0; line-height: 1.4; }
.q-img { max-height: 320px; border-radius: var(--radius); margin: 8px 0 14px; display: block; }
.q-img.small { max-height: 140px; }
.answers { display: grid; gap: 10px; margin: 16px 0; }
.answer { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; padding: 14px 16px; background: #fff; border: 2px solid var(--line); border-radius: var(--radius); font: 15px var(--text); color: var(--dark); cursor: pointer; transition: border-color .15s, background .15s; }
.answer:hover:not(:disabled) { border-color: var(--dark); }
.answer .mark { width: 22px; height: 22px; border: 2px solid #bbb; border-radius: 50%; flex: none; display: grid; place-items: center; }
.answer.sel { border-color: var(--dark); background: #f6f6f4; }
.answer.sel .mark { border-color: var(--dark); background: var(--dark); box-shadow: inset 0 0 0 4px #fff; }
.answer.right { border-color: var(--ok); background: var(--ok-soft); }
.answer.right .mark { border-color: var(--ok); background: var(--ok); }
.answer.right .mark::after { content: '✓'; color: #fff; font-size: 13px; font-weight: 700; }
.answer.wrong { border-color: var(--bad); background: var(--bad-soft); }
.answer.wrong .mark { border-color: var(--bad); background: var(--bad); }
.answer.wrong .mark::after { content: '✗'; color: #fff; font-size: 13px; font-weight: 700; }
.answer:disabled { cursor: default; }
.feedback { padding: 14px 16px; border-radius: var(--radius); margin-top: 12px; }
.feedback.ok { background: var(--ok-soft); color: var(--ok); }
.feedback.bad { background: var(--bad-soft); color: var(--bad); }
.feedback p { color: var(--dark); margin: 6px 0 12px; }
.feedback .btn { margin-top: 8px; }
.result { text-align: center; padding: 20px 0; }
.result h2 { font-size: 26px; justify-content: center; }
.result.ok h2 { color: var(--ok); }
.result.bad h2 { color: var(--red); }
.result.ok .ring { background: conic-gradient(var(--ok) calc(var(--p) * 1%), #ecece9 0); }
.wrong-list { margin-top: 16px; }
.wl-item { border-left: 3px solid var(--red); padding: 4px 12px; margin-bottom: 10px; }
.wl-item p { margin: 4px 0; }
.exam-bar { display: flex; justify-content: space-between; align-items: center; background: var(--dark); color: #fff; margin: -20px -20px 16px; padding: 12px 20px; border-radius: var(--radius) var(--radius) 0 0; font-family: var(--head); text-transform: uppercase; }
.exam-timer { font: 700 20px var(--head); background: rgba(255,255,255,.1); padding: 2px 10px; border-radius: 3px; }
.exam-timer.low { background: var(--red); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .6; } }
.exam-nav { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.nav-q { width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; border-radius: 3px; font: 600 13px var(--text); cursor: pointer; }
.nav-q.done { background: var(--dark); color: #fff; border-color: var(--dark); }
.nav-q.cur { outline: 2px solid var(--red); outline-offset: 1px; }
.exam-actions { justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; }
.review .rv { border-left: 4px solid var(--ok); padding: 6px 14px; margin-bottom: 14px; background: #fafaf8; }
.review .rv.bad { border-left-color: var(--bad); }
.review ul { margin: 4px 0; padding-left: 20px; font-size: 14px; }
.review li.right { color: var(--ok); font-weight: 700; }
.review li.mine:not(.right) { color: var(--bad); text-decoration: line-through; }
.review li.mine::after { content: ' ← deine Antwort'; font-size: 12px; font-weight: 400; color: var(--muted); text-decoration: none; display: inline-block; }
.exam-intro { text-align: center; padding: 30px 10px; }

/* Gerätekunde */
.equip-menu { margin-bottom: 18px; }
.equip-q h2 { font-family: var(--text); text-transform: none; font-size: 20px; letter-spacing: 0; }
.truck { display: grid; gap: 14px; margin: 10px 0 18px; }
.truck-side { background: linear-gradient(180deg, #e9473b, #c63a2f); border-radius: 6px; padding: 10px 12px 14px; box-shadow: inset 0 -6px 0 rgba(0,0,0,.15); }
.truck-side h4 { color: #fff; margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; }
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.door { position: relative; min-height: 110px; border: 0; border-radius: 3px; cursor: pointer; background: repeating-linear-gradient(180deg, #d9d9d6 0 9px, #bdbdb9 9px 11px); color: var(--dark); display: flex; align-items: flex-end; justify-content: center; padding: 8px; transition: transform .15s, box-shadow .15s; box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); }
.door:disabled { cursor: default; }
.door:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--dark), 0 4px 10px rgba(0,0,0,.25); }
.door-code { font: 700 20px var(--head); background: #fff; padding: 2px 10px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.door.open { background: #3a3a36; }
.door.open .door-code { background: var(--gold); color: #fff; }
.door.right { box-shadow: 0 0 0 4px var(--ok); }
.door.wrong { box-shadow: 0 0 0 4px #000; background: repeating-linear-gradient(45deg, #777 0 8px, #555 8px 16px); }
.room { background: var(--dark); color: #fff; border-radius: 6px; padding: 14px; margin-bottom: 14px; }
.room h3 { color: #fff; }
.room-img { max-height: 240px; display: block; margin: 0 auto 10px; border-radius: 3px; }
.shelves { display: grid; gap: 6px; }
.shelf { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: #44443f; border: 0; border-bottom: 5px solid #6a6a64; color: #fff; padding: 16px 14px; min-height: 58px; border-radius: 2px; font: 15px var(--text); text-align: left; cursor: pointer; width: 100%; }
.shelf:disabled { cursor: default; }
.shelf:hover:not(:disabled) { background: #55554f; }
.shelf-name { font: 700 16px var(--head); text-transform: uppercase; letter-spacing: .05em; }
.shelf-items { font-size: 13px; color: #ddd; text-align: right; }
.shelf.right { background: var(--ok); border-bottom-color: #1e6b40; }
.shelf.wrong { background: var(--red); border-bottom-color: var(--red-dark); }

/* ---------- Einsatz ---------- */
.quick-call { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
.call { background: var(--dark); color: #fff; text-align: center; padding: 12px 6px; border-radius: var(--radius); border-bottom: 4px solid var(--red); }
.call:hover { text-decoration: none; background: #000; }
.call b { display: block; font: 700 26px var(--head); }
.call small { font-size: 12px; color: #ccc; }
@media (max-width: 520px) { .quick-call { grid-template-columns: repeat(3, 1fr); } }
.link-edit { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px; display: grid; gap: 6px; }

/* ---------- Atemschutz / Profil / Benachrichtigungen ---------- */
.proof { max-height: 220px; display: block; margin: 8px 0; border-radius: 3px; border: 1px solid var(--line); }
.profile-head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.profile-head h2 { margin: 0; }
.profile-head p { margin: 2px 0 6px; }
.notif-list { padding: 4px 0; }
.notif { display: flex; gap: 14px; align-items: flex-start; padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--dark); }
.notif:hover { text-decoration: none; background: var(--bg); }
.notif small { display: block; color: var(--gray); font-size: 13px; white-space: pre-line; }
.notif .dot { margin-top: 7px; background: transparent; }
.notif.unread { background: #fffaf9; }
.notif.unread .dot { background: var(--red); }
.notif.important strong { color: var(--red); }
.answer-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.checklist { list-style: none; padding: 0; }
.checklist li { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.checklist li.ok .ic { color: var(--ok); } .checklist li.bad .ic { color: var(--bad); }

/* ---------- Anmeldung ---------- */
body.bare { background: var(--dark); min-height: 100vh; }
.bare-main { min-height: 100vh; }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 60px; padding: 30px 16px; background: radial-gradient(circle at 20% 20%, #34342f 0, var(--dark) 60%); }
.auth-wrap.wide .auth-card { max-width: 680px; }
.auth-hero img { width: 200px; filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.auth-hero img { filter: brightness(1) drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.auth-card { background: #fff; width: 100%; max-width: 420px; padding: 32px 28px; border-radius: var(--radius); border-top: 6px solid var(--red); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.auth-card.center { text-align: center; }
.auth-logo { width: 100%; max-width: 300px; display: block; margin: 0 0 22px; }
.auth-card.center .auth-logo { margin: 0 auto 22px; }
.auth-card h1 { font-size: 26px; position: relative; padding-bottom: 10px; }
.auth-card h1::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 4px; background: var(--red); }
.auth-card.center h1::after { left: calc(50% - 25px); }
.auth-card h2 { font-size: 16px; margin-top: 20px; }
.auth-links { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; font-size: 14px; flex-wrap: wrap; }
@media (max-width: 800px) { .auth-hero { display: none; } }

@media print {
  .topbar, .sidenav, .tabbar, .actions, .btn { display: none !important; }
  .main { margin: 0; padding: 0; }
  .card { box-shadow: none; }
}

/* ---------- Dashboard (neu) ---------- */
.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; background: var(--dark); color: #fff; border-radius: 14px; padding: 26px 28px; margin-bottom: 18px; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 36px solid rgba(215,68,56,.16); pointer-events: none; }
.hero h1 { color: #fff; margin: 0 0 8px; font-size: 32px; }
.hero-date { margin: 0 0 4px; color: #b9b9b4; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.hero-lage { margin: 0; display: flex; align-items: center; gap: 8px; color: #e4e4e0; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); color: #fff; padding: 9px 14px; border-radius: 8px; font-weight: 600; font-size: 13px; border: 1px solid rgba(255,255,255,.12); }
.hero-btn:hover { background: var(--red); border-color: var(--red); text-decoration: none; }
.hero-btn .ic { width: 16px; height: 16px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: #fff; border: 1px solid #ebebe8; border-radius: 12px; padding: 16px 18px; color: var(--dark); display: flex; flex-direction: column; gap: 2px; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: transform .15s, box-shadow .15s; min-width: 0; }
.kpi:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.kpi::before { content: ''; position: absolute; left: 18px; top: 0; width: 34px; height: 3px; border-radius: 0 0 3px 3px; background: var(--muted); }
.kpi-ok::before { background: var(--ok); } .kpi-warn::before { background: var(--warn); } .kpi-bad::before { background: var(--red); }
.kpi-label { font-size: 13px; color: var(--gray); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kpi-label .ic { width: 16px; height: 16px; color: var(--muted); }
.kpi-value { font: 700 32px/1.15 var(--head); margin-top: 4px; }
.kpi-value small { font-size: 16px; color: var(--muted); font-weight: 500; }
.kpi-value.kpi-text { font-size: 24px; padding: 4px 0; }
.kpi-bad .kpi-value { color: var(--red); } .kpi-warn .kpi-value { color: #b07800; } .kpi-ok .kpi-value { color: var(--ok); }
.kpi-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hero { padding: 20px; } .hero h1 { font-size: 26px; } .kpi-value { font-size: 26px; } }
.dash-cols { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dash-cols .card { margin-bottom: 18px; }
@media (max-width: 900px) { .dash-cols { grid-template-columns: 1fr; } }
.feed-item { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--dark); }
.feed-item:last-child { border-bottom: 0; }
.feed-item:hover { text-decoration: none; } .feed-item:hover strong { color: var(--red); }
.feed-item small { display: block; color: var(--muted); font-size: 13px; }
.feed-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--info-soft); color: var(--info); }
.feed-ic.type-sperre { background: var(--red-soft); color: var(--red); } .feed-ic.type-warnung { background: var(--warn-soft); color: #a46d00; }
.feed-item.important strong { color: var(--red); }
.veh-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.veh-tile { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: var(--bg); color: var(--dark); border: 2px solid transparent; transition: transform .15s; }
.veh-tile:hover { text-decoration: none; transform: translateY(-2px); }
.vt-img { height: 72px; display: grid; place-items: center; background: #e6e6e2; color: #a9a9a4; }
.vt-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-img .ic { width: 34px; height: 34px; }
.vt-name { font: 700 16px var(--head); padding: 6px 10px 0; letter-spacing: .03em; }
.vt-status { font-size: 12px; font-weight: 600; padding: 0 10px 8px; color: var(--ok); }
.veh-tile.st-warn { border-color: var(--warn); } .veh-tile.st-warn .vt-status { color: #a46d00; }
.veh-tile.st-bad { border-color: var(--red); } .veh-tile.st-bad .vt-status { color: var(--red); }
.veh-tile.st-bad .vt-img img { filter: grayscale(.7); }
.prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.prog-item { display: flex; align-items: center; gap: 12px; color: var(--dark); padding: 6px; border-radius: 10px; }
.prog-item:hover { background: var(--bg); text-decoration: none; }
.prog-item strong { display: block; font-size: 14px; line-height: 1.3; }
.prog-item small { color: var(--muted); font-size: 12px; }
.prog-item .ring { width: 54px; height: 54px; } .prog-item .ring span { width: 42px; height: 42px; font-size: 13px; }
.file-ext.sm { width: 34px; height: 40px; font-size: 10px; padding-bottom: 4px; }
.card-dark { background: var(--dark); border-color: var(--dark); color: #fff; }
.card-dark h2, .card-dark .doc-row, .card-dark strong { color: #fff; }
.card-dark .doc-row { border-color: rgba(255,255,255,.1); }
.card-dark .doc-row:hover { background: rgba(255,255,255,.06); }
.card-dark .more { color: #ff8a80; }

/* ---------- Gerätekunde: Foto-Raster ---------- */
.side-stage, .room-stage { position: relative; }
.side-grid { display: grid; gap: 8px; }
.side-photo, .room-photo { display: block; width: 100%; height: auto; border-radius: 6px; user-select: none; -webkit-user-drag: none; }
.truck-side.has-photo { background: var(--dark); box-shadow: none; }
.truck-side.has-photo .side-grid { position: absolute; inset: 0; gap: 0; }
.truck-side.has-photo .door { min-height: 0; background: transparent; box-shadow: none; border-right: 2px dashed rgba(255,255,255,.55); border-radius: 0; align-items: flex-start; }
.truck-side.has-photo .door:last-child { border-right: 0; }
.truck-side.has-photo .door:hover:not(:disabled) { background: rgba(215,68,56,.28); transform: none; box-shadow: inset 0 0 0 3px #fff; }
.truck-side.has-photo .door.right { background: rgba(46,139,87,.45); box-shadow: inset 0 0 0 4px var(--ok); }
.truck-side.has-photo .door.wrong { background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 4px #000; }
.truck-side.has-photo .door.open { background: rgba(193,150,66,.35); }
.truck-side.has-photo .door-code { margin-top: 8px; }
.room-grid { display: grid; gap: 6px; }
.room.has-photo .room-grid { position: absolute; inset: 0; gap: 0; }
.cell { position: relative; background: #44443f; border: 0; border-bottom: 5px solid #6a6a64; color: #fff; padding: 10px; border-radius: 3px; cursor: pointer; font: 14px var(--text); text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 64px; }
.cell:disabled { cursor: default; }
.cell:hover:not(:disabled) { background: #55554f; }
.cell-label { font: 700 14px var(--head); text-transform: uppercase; letter-spacing: .05em; }
.cell-items { font-size: 12px; color: #e6e6e2; }
.room.has-photo .cell { background: transparent; border: 1px dashed rgba(255,255,255,.6); border-radius: 0; min-height: 0; }
.room.has-photo .cell-label { background: rgba(0,0,0,.55); padding: 2px 6px; border-radius: 3px; align-self: flex-start; font-size: 12px; }
.room.has-photo .cell-items { background: rgba(0,0,0,.6); padding: 3px 6px; border-radius: 3px; }
.room.has-photo .cell:hover:not(:disabled) { background: rgba(215,68,56,.28); box-shadow: inset 0 0 0 3px #fff; }
.cell.right { background: var(--ok) !important; border-bottom-color: #1e6b40; }
.room.has-photo .cell.right { background: rgba(46,139,87,.5) !important; box-shadow: inset 0 0 0 4px var(--ok); }
.cell.wrong { background: var(--red) !important; border-bottom-color: var(--red-dark); }
.room.has-photo .cell.wrong { background: rgba(215,68,56,.5) !important; box-shadow: inset 0 0 0 4px var(--red); }
/* Editor-Vorschau */
.grid-preview { margin-top: 10px; }
.grid-preview .room { margin: 0; padding: 10px; }
.grid-preview .cell { min-height: 46px; cursor: default; }
.side-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.side-photos .thumb { width: 100%; max-height: 140px; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 8px; background: var(--bg); }
.truck-side.has-photo .side-stage { max-width: 960px; margin: 0 auto; }
.room.has-photo .room-stage { max-width: 520px; margin: 0 auto; }
.room.has-photo .cell { justify-content: flex-start; }
.grid-preview .room.has-photo .room-stage { max-width: 100%; }

/* ---------- Dashboard: wichtige Informationen ---------- */
.alerts { display: grid; gap: 12px; margin-bottom: 18px; }
.alert-box { display: flex; gap: 16px; background: #fff; border: 1px solid #ebebe8; border-left: 6px solid var(--info); border-radius: 0; padding: 16px 20px; color: var(--dark); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.alert-box:hover { text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.alert-box.type-sperre { border-left-color: var(--red); background: #fff8f7; }
.alert-box.type-warnung { border-left-color: var(--warn); background: #fffbf1; }
.alert-box.important { border-left-width: 8px; }
.alert-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--info-soft); color: var(--info); }
.type-sperre .alert-ic { background: var(--red); color: #fff; }
.type-warnung .alert-ic { background: var(--warn); color: #fff; }
.alert-ic .ic { width: 24px; height: 24px; }
.alert-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.alert-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.alert-type { font: 700 12px var(--head); text-transform: uppercase; letter-spacing: .08em; color: var(--red); }
.type-info .alert-type { color: var(--info); } .type-warnung .alert-type { color: #a46d00; }
.alert-until { margin-left: auto; color: var(--gray); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.alert-until .ic { width: 14px; height: 14px; }
.alert-title { font: 700 20px/1.3 var(--text); }
.alert-loc { display: inline-flex; align-items: center; gap: 6px; color: var(--gray); font-weight: 600; font-size: 14px; }
.alert-loc .ic { width: 16px; height: 16px; color: var(--red); }
.alert-text { font-size: 15px; line-height: 1.55; color: #333; }
@media (max-width: 560px) { .alert-box { padding: 14px; gap: 12px; } .alert-ic { width: 38px; height: 38px; } .alert-title { font-size: 17px; } .alert-until { margin-left: 0; } }

/* ---------- Dashboard: Fahrzeuge mit Grund ---------- */
.veh-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--gray); margin: -4px 0 12px; }
.veh-legend span { display: inline-flex; align-items: center; gap: 6px; }
.veh-issue { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 10px; margin-bottom: 10px; color: var(--dark); background: var(--warn-soft); border: 1px solid #f1dcaa; }
.veh-issue.st-bad { background: var(--bad-soft); border-color: #f3c6c1; }
.veh-issue:hover { text-decoration: none; filter: brightness(.98); }
.vi-img { width: 86px; height: 64px; border-radius: 8px; overflow: hidden; flex: none; background: #e6e6e2; display: grid; place-items: center; color: #aaa; }
.vi-img img { width: 100%; height: 100%; object-fit: cover; }
.vi-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
.vi-head strong { font: 700 17px var(--head); }
.vi-reason { display: block; font-weight: 600; margin-top: 2px; }
.veh-issue small { color: var(--gray); font-size: 12px; }
.veh-issue + .veh-tiles, .veh-legend + .veh-tiles { margin-top: 6px; }
.guideline { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #ebebe8; border-left: 5px solid var(--red); padding: 14px 18px; margin-bottom: 18px; color: var(--dark); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.guideline:hover { text-decoration: none; } .guideline:hover strong { color: var(--red); }
.guideline strong { display: block; font-size: 16px; } .guideline small { color: var(--muted); }

/* ---------- Fahrzeug- & Gerätekunde ---------- */
.veh-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.veh-card2 { background: #fff; border: 1px solid #ebebe8; border-radius: 12px; overflow: hidden; color: var(--dark); display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: transform .15s, box-shadow .15s; }
.veh-card2:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.1); }
.vc-img { position: relative; aspect-ratio: 4 / 3; background: #e6e6e2; display: grid; place-items: center; color: #aaa; }
.vc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-img .ic { width: 40px; height: 40px; }
.vc-badge { position: absolute; top: 10px; right: 10px; background: var(--dark); color: #fff; font: 700 13px var(--head); padding: 3px 9px; border-radius: 12px; }
.vc-body { padding: 12px 14px 14px; display: flex; flex-direction: column; }
.vc-body strong { font: 700 20px var(--head); letter-spacing: .03em; }
.vc-body span { font-size: 14px; }
.vc-body small { color: var(--muted); margin-top: 4px; }
.veh-info { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; margin-bottom: 10px; align-items: start; }
@media (max-width: 900px) { .veh-info { grid-template-columns: 1fr; } }
.vinfo-main { width: 100%; border-radius: 12px; display: block; aspect-ratio: 1; object-fit: cover; }
.vinfo-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; margin-top: 8px; }
.vinfo-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
.vinfo-thumbs a:hover img { outline: 3px solid var(--red); }
.specs { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; font-size: 14px; }
.specs dt { color: var(--muted); font-weight: 600; }
.specs dd { margin: 0; font-weight: 600; }
.spec-h { font-size: 13px; color: var(--red); margin: 14px 0 4px; }
.vinfo-data p { margin: 0 0 6px; font-size: 14px; }
.status-line { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--line); }
/* geschlossener Rollladen (Ausschnitt aus Seitenfoto) */
.crop { width: 100%; background-repeat: no-repeat; border-radius: 4px; }
.room.closed { background: #2c2c29; }
.room.closed .room-stage { max-width: 420px; margin: 0 auto; }
.room.closed.schematic .room-grid { background: repeating-linear-gradient(180deg, #d9d9d6 0 9px, #bdbdb9 9px 11px); padding: 0; gap: 0; border-radius: 4px; }
.room.closed.schematic .cell { background: transparent; border: 0; border-bottom: 2px dashed rgba(0,0,0,.35); color: var(--dark); border-radius: 0; min-height: 70px; }
.room.closed.schematic .cell:hover:not(:disabled) { background: rgba(215,68,56,.2); }
.room.closed.schematic .cell-label { color: var(--dark); }
.room.closed.has-photo .room-grid { position: absolute; inset: 0; gap: 0; }
.room.closed.has-photo .cell { background: transparent; border: 1px dashed rgba(255,255,255,.75); border-radius: 0; min-height: 0; }
.room.closed.has-photo .cell:hover:not(:disabled) { background: rgba(215,68,56,.28); box-shadow: inset 0 0 0 3px #fff; }
.solution { margin-top: 12px; }
.solution h4 { color: var(--gray); }
.vt-img { height: 92px; overflow: hidden; display: block; position: relative; }
.vt-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-img .ic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* ---------- Atemschutz unter dem Namen ---------- */
.hero-breath { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 12px; border-radius: 20px; background: rgba(46,139,87,.2); color: #b9f0cf; font-size: 14px; }
.hero-breath:hover { text-decoration: none; filter: brightness(1.15); }
.hero-breath .ic { width: 18px; height: 18px; }
.hero-breath strong { color: #fff; }
.hero-breath small { color: #c8c8c4; }
.hero-breath.st-warn { background: rgba(217,145,0,.25); color: #ffd98a; }
.hero-breath.st-bad, .hero-breath.st-none { background: rgba(215,68,56,.35); color: #ffc2bc; }

/* ---------- Dashboard: Fahrzeuge (Problemfahrzeuge zuerst, mit Grund) ---------- */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; grid-auto-flow: dense; }
.vcard { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: var(--bg); color: var(--dark); border: 2px solid transparent; transition: transform .15s; min-width: 0; }
.vcard:hover { text-decoration: none; transform: translateY(-2px); }
.vcard.issue { grid-column: span 2; flex-direction: row; }
.vcard-img { position: relative; height: 88px; background: #e6e6e2; display: block; overflow: hidden; flex: none; }
.vcard.issue .vcard-img { width: 44%; height: auto; min-height: 104px; }
.vcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard-img .ic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; color: #aaa; }
.vcard-status { position: absolute; left: 0; right: 0; bottom: 0; font: 700 11px var(--head); text-transform: uppercase; letter-spacing: .04em; color: #fff; padding: 3px 8px; background: rgba(46,139,87,.92); }
.st-warn .vcard-status { background: rgba(217,145,0,.95); } .st-bad .vcard-status { background: rgba(215,68,56,.95); }
.vcard.st-warn { border-color: var(--warn); background: var(--warn-soft); } .vcard.st-bad { border-color: var(--red); background: var(--bad-soft); }
.vcard.st-bad .vcard-img img { filter: grayscale(.6); }
.vcard-body { padding: 7px 10px 9px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vcard-body strong { font: 700 16px var(--head); letter-spacing: .03em; }
.vcard-body small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcard-reason { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 520px) { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vcard.issue { grid-column: span 2; } }
.wx-mini-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.wx-mini-row b { display: block; } .wx-mini-row small { color: #bbb; }
.wx-mini .wx-arrow { width: 34px; height: 34px; color: #ff8a80; flex: none; }
.wx-nowarn { color: #9fd9b5; }

/* ---------- Wissensdatenbank: Akkordeon, Stufen, Medien ---------- */
.sub-section { font-size: 14px; color: var(--gray); margin: 16px 0 8px; }
.accordion { display: grid; gap: 8px; margin-bottom: 10px; }
.acc { background: #fff; border: 1px solid #ebebe8; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.acc > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover strong { color: var(--red); }
.acc-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.acc-title strong { font-size: 15px; }
.acc-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.acc-chev { color: var(--muted); transition: transform .2s; }
.acc[open] .acc-chev { transform: rotate(90deg); }
.acc[open] > summary { border-bottom: 1px solid var(--line); }
.acc-body { padding: 14px 16px 16px; }
.acc-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 720px) { .acc-cols { grid-template-columns: 1fr; } }
.acc-body h4 { margin-bottom: 6px; }
.acc-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--red-soft); color: var(--red); display: grid; place-items: center; flex: none; }
.ring.sm { width: 42px; height: 42px; } .ring.sm span { width: 32px; height: 32px; font-size: 11px; }
.lvl { font: 700 11px var(--head); text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 10px; color: #fff; background: #888; }
.lvl-bronze { background: #a0672f; } .lvl-silber { background: #8d949b; } .lvl-gold { background: var(--gold); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.media-item { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--dark); }
.media-item:hover { text-decoration: none; background: var(--bg); } .media-item:hover strong { color: var(--red); }
.mi-icon { width: 52px; height: 52px; border-radius: 8px; background: var(--dark); color: #fff; display: grid; place-items: center; flex: none; position: relative; }
.mi-icon.video { background: var(--red); }
.mi-icon .ic { width: 24px; height: 24px; }
.mi-icon small { position: absolute; bottom: 3px; font: 700 9px var(--head); }
.mi-body strong { display: block; font-size: 14px; line-height: 1.3; } .mi-body small { color: var(--muted); font-size: 12px; }
.kb-bottom { margin-top: 18px; }
.viewer .video-wrap { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.viewer .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.viewer .video { width: 100%; max-height: 75vh; background: #000; border-radius: 8px; display: block; }
.viewer .pdf-frame { width: 100%; height: 78vh; border: 1px solid var(--line); border-radius: 8px; }
.breathing-box .calc { display: flex; flex-direction: column; justify-content: center; padding: 6px 0; }
.breathing-box .calc small { color: var(--muted); font-weight: 600; }

/* ---------- Einsatzleitung ---------- */
.el-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 8px; }
.el-grid > .card { margin: 0; }
.wx-main { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 6px 0 14px; }
.wx-wind { display: flex; align-items: center; gap: 14px; }
.wx-arrow { width: 64px; height: 64px; color: var(--red); transition: transform .4s; }
.wx-wind b { display: block; font: 700 30px var(--head); } .wx-wind span { display: block; font-weight: 700; font-size: 18px; } .wx-wind small { color: var(--muted); }
.wx-temp b { font: 700 40px var(--head); }
.wx-list { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: 14px; }
.wx-list dt { color: var(--muted); font-weight: 600; } .wx-list dd { margin: 0; font-weight: 600; }
.wx-warn { border-left: 5px solid #e8c400; background: #fffbe0; padding: 10px 12px; margin-bottom: 8px; }
.wx-warn strong { display: block; } .wx-warn small { color: var(--gray); } .wx-warn p { margin: 6px 0 0; font-size: 14px; }
.wx-warn-orange { border-color: #f08c00; background: #fff1e0; } .wx-warn-rot { border-color: var(--red); background: var(--bad-soft); }
.card-dark .wx-warn { color: var(--dark); margin: 0; }
.tool .btn { margin-bottom: 10px; }
.geo-big { font: 700 26px var(--head); letter-spacing: .02em; }
.geo-small { font-size: 15px; font-weight: 600; margin: 2px 0; }
.adr-plate { display: inline-grid; grid-template-rows: 1fr 1fr; background: #f08c00; border: 4px solid #1d1d1b; border-radius: 4px; padding: 4px; gap: 4px; width: 180px; margin-bottom: 10px; }
.adr-plate input { font: 700 26px var(--head); text-align: center; border: 2px solid #1d1d1b; background: #f7a531; color: #1d1d1b; padding: 4px; }
.adr-plate input::placeholder { color: rgba(29,29,27,.35); }
.adr-line { margin: 4px 0; padding: 6px 10px; border-radius: 6px; background: var(--bg); font-weight: 600; font-size: 14px; }
.adr-line.info { background: var(--info-soft); color: var(--info); } .adr-line.bad { background: var(--bad-soft); color: var(--red); }
.link-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.link-tile { background: #fff; border: 1px solid #ebebe8; border-top: 3px solid var(--red); border-radius: 0 0 10px 10px; padding: 12px 14px; color: var(--dark); display: flex; flex-direction: column; gap: 2px; }
.link-tile:hover { text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.08); } .link-tile:hover strong { color: var(--red); }
.lt-cat { font: 700 11px var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.link-tile small { color: var(--gray); font-size: 13px; }

/* =========================================================
   Startseite v3 – Handy zuerst, CI der Homepage
   ========================================================= */
.dhero { position: relative; margin: 0 0 14px; border-radius: 14px; overflow: hidden; min-height: 190px; display: flex; align-items: flex-end;
  background: linear-gradient(90deg, rgba(20,20,19,.92) 0%, rgba(20,20,19,.6) 45%, rgba(20,20,19,.1) 100%), var(--hero) center 30% / cover no-repeat, var(--dark);
  border-bottom: 4px solid var(--red); }
.dhero-inner { padding: 22px 24px; color: #fff; }
.dhero-date { margin: 0 0 6px; font: 600 12px var(--text); letter-spacing: .1em; text-transform: uppercase; color: #e2e2de; }
.dhero h1 { margin: 0 0 12px; font-size: 30px; line-height: 1.15; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.dhero-greet { color: #fff; }
.dhero-name { background: var(--red); color: #fff; padding: 0 10px; }
.dhero-breath { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 22px; background: rgba(46,139,87,.92); color: #fff; font-size: 14px; }
.dhero-breath:hover { text-decoration: none; filter: brightness(1.08); }
.dhero-breath .ic { width: 18px; height: 18px; }
.dhero-breath.st-warn { background: rgba(217,145,0,.95); }
.dhero-breath.st-bad, .dhero-breath.st-none { background: var(--red); }

/* Lage auf einen Blick */
.lage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.lk { position: relative; background: #fff; border: 1px solid #e9e9e6; border-radius: 12px; padding: 10px 12px 11px; color: var(--dark); display: flex; flex-direction: column; min-width: 0; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.lk:hover { text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.lk::before { content: ''; position: absolute; left: 12px; top: 0; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--ok); }
.lk-warn::before { background: var(--warn); } .lk-bad::before { background: var(--red); }
.lk small { font-size: 12px; font-weight: 600; color: var(--gray); }
.lk b { font: 700 28px/1.1 var(--head); margin: 2px 0 1px; }
.lk b i { font-style: normal; font-size: 15px; color: var(--muted); }
.lk-bad b { color: var(--red); } .lk-warn b { color: #b07800; } .lk-ok b { color: var(--ok); }
.lk span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Zwei Spalten am PC, eine am Handy */
.dgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 900px) { .dgrid { grid-template-columns: 1fr; gap: 14px; } }

/* Meldungen */
.dmsg { background: #fff; border: 1px solid #ecebe8; border-left: 5px solid var(--info); border-radius: 0 12px 12px 0; padding: 12px 14px; }
.dmsg.type-sperre { border-left-color: var(--red); background: #fff8f7; border-color: #f3dcd9; border-left-color: var(--red); }
.dmsg.type-warnung { border-left-color: var(--warn); background: #fffbf1; }
.dmsg-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--gray); }
.dmsg-type { font: 700 12px var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--info); }
.type-sperre .dmsg-type { color: var(--red); } .type-warnung .dmsg-type { color: #a46d00; }
.dmsg h3 { font: 700 17px/1.3 var(--text); text-transform: none; letter-spacing: 0; margin: 4px 0; }
.dmsg-loc { display: flex; gap: 6px; align-items: center; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--gray); }
.dmsg-loc .ic { width: 15px; height: 15px; color: var(--red); }
.dmsg-text { margin: 0; font-size: 14px; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dmsg-text.open { display: block; -webkit-line-clamp: unset; }
.dmsg-more { background: none; border: 0; padding: 4px 0 0; color: var(--red); font: 600 13px var(--text); cursor: pointer; }

/* Abschnitte */
.dsec { min-width: 0; }
.dlbl { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; }
.dlbl::before { content: ''; width: 4px; height: 15px; background: var(--red); }
.dlbl a { margin-left: auto; font: 600 13px var(--text); text-transform: none; letter-spacing: 0; }
.dlist { padding: 0; overflow: hidden; margin: 0; }
.dlist > * { border-bottom: 1px solid #efefec; }
.dlist > *:last-child { border-bottom: 0; }
.dlist .empty-state { padding: 18px; }

/* Fahrzeuge kompakt */
.vrow { display: flex; align-items: center; gap: 12px; padding: 11px 14px; color: var(--dark); }
.vrow:hover { text-decoration: none; background: var(--bg); }
.vrow .dot { width: 11px; height: 11px; }
.vrow strong { font: 700 15px var(--head); letter-spacing: .03em; }
.vrow small { display: block; color: var(--gray); font-size: 13px; margin-top: 1px; }
.vrow > .ic { color: #bbb; width: 16px; height: 16px; }
.vrow.ok strong { font: 600 14px var(--text); color: var(--ok); letter-spacing: 0; }
.st-bad-t { color: var(--red); font-weight: 600; font-size: 14px; } .st-warn-t { color: #a46d00; font-weight: 600; font-size: 14px; }

/* Termine mit Zu-/Absage */
.erow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.erow .date-box { color: var(--dark); }
.erow .date-box:hover { text-decoration: none; }
.erow-txt { color: var(--dark); min-width: 0; }
.erow-txt:hover { text-decoration: none; } .erow-txt:hover strong { color: var(--red); }
.erow-txt strong { display: block; font-size: 15px; line-height: 1.3; }
.erow-txt small { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsvp { display: flex; gap: 6px; flex: none; }
.rsvp button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #dcdcd8; background: #fff; color: #9a9a96; display: grid; place-items: center; cursor: pointer; padding: 0; }
.rsvp button .ic { width: 18px; height: 18px; }
.rsvp .rs-yes:hover, .rsvp .rs-yes.on { border-color: var(--ok); background: var(--ok); color: #fff; }
.rsvp .rs-no:hover, .rsvp .rs-no.on { border-color: var(--red); background: var(--red); color: #fff; }

/* Lernfortschritt */
.prow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--dark); }
.prow:hover { text-decoration: none; background: var(--bg); }
.prow strong { display: block; font-size: 14px; line-height: 1.3; }
.prow small { color: var(--muted); font-size: 12px; }
.prow-go { color: var(--red); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; white-space: nowrap; }
.prow-go .ic { width: 15px; height: 15px; }

/* Einsatzleitung – Schnellzugriff */
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.qtile { background: #fff; border: 1px solid #e9e9e6; border-radius: 12px; padding: 12px 6px 10px; text-align: center; color: var(--dark); display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.qtile:hover { text-decoration: none; border-color: var(--red); }
.qtile .ic { width: 24px; height: 24px; color: var(--red); margin-bottom: 2px; }
.qtile span { font: 700 13px var(--head); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.qtile small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Handy: Kopf randlos wie eine App */
@media (max-width: 1080px) {
  .dhero { margin: -18px -16px 14px; border-radius: 0; min-height: 200px; }
  .dhero-inner { padding: 18px 16px 18px; }
  .dhero h1 { font-size: 26px; }
}
@media (max-width: 420px) {
  .lage { gap: 8px; } .lk { padding: 9px 10px 10px; } .lk b { font-size: 24px; }
  .quick { gap: 6px; } .qtile small { display: none; }
}

/* Atemschutz im Kopf: dezenter Glas-Balken, Status als farbiges Symbol */
.dhero-breath { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 30px; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dhero-breath:hover { text-decoration: none; background: rgba(255,255,255,.2); filter: none; }
.dhero-breath .db-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); flex: none; }
.dhero-breath .db-ic .ic { width: 17px; height: 17px; }
.dhero-breath.st-warn .db-ic { background: var(--warn); }
.dhero-breath.st-bad .db-ic, .dhero-breath.st-none .db-ic { background: var(--red); }
.dhero-breath .db-txt { display: flex; flex-direction: column; line-height: 1.2; }
.dhero-breath .db-txt small { font: 600 10px var(--text); text-transform: uppercase; letter-spacing: .1em; color: #d6d6d2; }
.dhero-breath .db-txt strong { font-size: 14px; font-weight: 700; }
.dhero-breath.st-ok, .dhero-breath.st-warn, .dhero-breath.st-bad, .dhero-breath.st-none { background-color: rgba(255,255,255,.12); }

/* =========================================================
   Seitenkopf, Filter-Leiste, Meldungskarten (v3)
   ========================================================= */
.phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.phead h1 { margin: 0; font-size: 26px; position: relative; padding-bottom: 8px; }
.phead h1::after { content: ''; position: absolute; left: 0; bottom: 0; width: 44px; height: 4px; background: var(--red); }
.phead .sub { margin: 6px 0 0; color: var(--gray); font-size: 14px; }
.phead-add .ic { width: 18px; height: 18px; }
@media (max-width: 600px) {
  .phead .sub { display: none; }
  .phead-add { width: 46px; height: 46px; padding: 0; border-radius: 50%; justify-content: center; box-shadow: 0 4px 14px rgba(215,68,56,.35); }
  .phead-add span { display: none; }
  .phead-add .ic { width: 22px; height: 22px; }
}
.pills { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 4px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pills a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; background: #fff; border: 1px solid #e2e2de; color: var(--gray); font-weight: 600; font-size: 14px; }
.pills a:hover { text-decoration: none; border-color: #c9c9c5; }
.pills a.on { background: var(--dark); border-color: var(--dark); color: #fff; }
.pill-n { background: var(--red); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; padding: 0 6px; min-width: 18px; text-align: center; line-height: 18px; }
.pill-n.warn { background: var(--warn); }
.pills a.on .pill-n { background: #fff; color: var(--dark); }

.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 900px) { .mgrid { grid-template-columns: 1fr; gap: 12px; } }
.mcard { background: #fff; border: 1px solid #ecebe8; border-left: 5px solid var(--info); border-radius: 0 12px 12px 0; padding: 12px 14px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.mcard.type-sperre { border-left-color: var(--red); }
.mcard.type-warnung { border-left-color: var(--warn); }
.mcard.important { background: #fff8f7; border-color: #f3dcd9; border-left-color: var(--red); }
.mcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mcard-type { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--info); }
.mcard-type .ic { width: 15px; height: 15px; }
.type-sperre .mcard-type { color: var(--red); } .type-warnung .mcard-type { color: #a46d00; }
.mcard h3 { font: 700 17px/1.3 var(--text); text-transform: none; letter-spacing: 0; margin: 4px 0 6px; }
.mcard-when, .mcard-loc { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; font-size: 13px; font-weight: 600; color: var(--gray); }
.mcard-when .ic, .mcard-loc .ic { width: 15px; height: 15px; color: var(--muted); flex: none; }
.mcard-loc .ic { color: var(--red); }
.mcard-text { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #333; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mcard-text.open { display: block; -webkit-line-clamp: unset; }
.mcard-foot { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid #f0efec; font-size: 12px; color: var(--muted); }
.mcard-decide { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mcard-decide form { margin: 0; }

/* "⋯"-Menü */
.kebab { position: relative; }
.kebab > summary { list-style: none; width: 34px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; font-size: 20px; line-height: 1; color: var(--gray); user-select: none; }
.kebab > summary::-webkit-details-marker { display: none; }
.kebab > summary:hover, .kebab[open] > summary { background: var(--bg); }
.kebab-menu { position: absolute; right: 0; top: 34px; z-index: 20; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.05); padding: 6px; min-width: 200px; }
.kebab-menu form { margin: 0; }
.kebab-menu a, .kebab-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 6px; font: 600 14px var(--text); color: var(--dark); cursor: pointer; text-align: left; }
.kebab-menu a:hover, .kebab-menu button:hover { background: var(--bg); text-decoration: none; }
.kebab-menu .ic { width: 16px; height: 16px; color: var(--muted); }
.kebab-menu .danger { color: var(--red); } .kebab-menu .danger .ic { color: var(--red); }

/* =========================================================
   Formular "Neue Meldung" + Informationen (News)
   ========================================================= */
.mform { max-width: 760px; }
.kind { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.kind-opt input { position: absolute; opacity: 0; pointer-events: none; }
.kind-box { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px; border-radius: 12px; background: #fff; border: 2px solid #e4e4e0; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.kind-box strong { font: 700 16px var(--head); text-transform: uppercase; letter-spacing: .03em; }
.kind-box small { color: var(--gray); font-size: 13px; line-height: 1.4; }
.kind-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--muted); margin-bottom: 4px; }
.kind-ic .ic { width: 20px; height: 20px; }
.k-wichtig input:checked + .kind-box { border-color: var(--red); background: #fff8f7; box-shadow: 0 4px 16px rgba(215,68,56,.15); }
.k-wichtig input:checked + .kind-box .kind-ic { background: var(--red); color: #fff; }
.k-wichtig input:checked + .kind-box strong { color: var(--red); }
.k-info input:checked + .kind-box { border-color: var(--info); background: #f5f9fd; box-shadow: 0 4px 16px rgba(47,111,176,.15); }
.k-info input:checked + .kind-box .kind-ic { background: var(--info); color: #fff; }
.k-info input:checked + .kind-box strong { color: var(--info); }
.kind-opt input:focus-visible + .kind-box { outline: 2px solid var(--dark); outline-offset: 2px; }
.mform-card { border-top: 4px solid var(--red); }
.mform.is-info .mform-card { border-top-color: var(--info); }
.flabel { display: block; font-weight: 600; font-size: 13px; color: var(--gray); margin-bottom: 6px; }
.seg-wide { width: 100%; display: flex; }
.seg-wide label { flex: 1; }
.push-box { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: #fff8f7; border: 1px solid #f3dcd9; margin: 4px 0 6px; }
.push-box > .ic { width: 22px; height: 22px; color: var(--red); flex: none; margin-top: 2px; }
.push-box strong { display: block; font-size: 14px; }
.push-box small { display: block; color: var(--gray); font-size: 12px; margin-top: 2px; }
.push-box .check { margin: 4px 0 0 !important; font-size: 14px !important; }
.push-box.opt { background: #f5f9fd; border-color: #d8e6f4; }
.push-box.opt > .ic { color: var(--info); }
.push-box.opt .check { margin: 0 !important; font-weight: 600 !important; }
@media (max-width: 520px) { .kind { gap: 8px; } .kind-box { padding: 12px; } .kind-box small { font-size: 12px; } }

/* Informationen (News) – ruhiger als wichtige Meldungen */
.news { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; color: var(--dark); }
.news:hover { text-decoration: none; background: var(--bg); }
.news-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--info-soft); color: var(--info); display: grid; place-items: center; flex: none; }
.news-ic .ic { width: 17px; height: 17px; }
.news strong { display: block; font-size: 14px; line-height: 1.35; }
.news small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.news p { margin: 3px 0 0; font-size: 13px; color: var(--gray); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcard.type-info { border-left-color: var(--info); background: #fff; }
.msec-title { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 15px; }
.msec-title::before { content: ''; width: 4px; height: 15px; background: var(--red); }
.msec-title.info::before { background: var(--info); }
.dlbl-info::before { background: var(--info); }
.mcard.important.type-warnung { border-left-color: var(--warn); }
.dmsg.type-sonstiges { border-left-color: var(--red); }
.dmsg.type-wichtig { border-left-color: var(--red); background: #fff8f7; border-color: #f3dcd9; border-left-color: var(--red); }
.type-wichtig .dmsg-type, .type-wichtig .mcard-type { color: var(--red); }
.mcard.type-wichtig { border-left-color: var(--red); }
.mcard.important.type-wichtig { border-left-color: var(--red); }

/* ---------- Benachrichtigungen: Wischen / Löschen ---------- */
.notif-swipe { position: relative; overflow: hidden; background: var(--red); transition: height .25s ease, opacity .25s; }
.notif-swipe.gone { opacity: 0; }
.notif-swipe .notif { position: relative; background: #fff; transition: transform .2s ease; touch-action: pan-y; align-items: center; }
.notif-swipe .notif.unread { background: #fffaf9; }
.notif-del-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 20px; color: #fff; font: 700 13px var(--head); text-transform: uppercase; letter-spacing: .05em; }
.notif-del-bg .ic { width: 18px; height: 18px; }
.notif-swipe.arm .notif-del-bg { background: var(--red-dark); }
.notif-x { width: 30px; height: 30px; color: var(--muted); flex: none; }
.notif-x:hover { color: var(--red); background: var(--red-soft); }
.notif-x .ic { width: 16px; height: 16px; }
@media (hover: none) { .notif-x { display: none; } }

/* ---------- Wissen: 3 Bereiche ---------- */
.area-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 18px; }
.area-tabs a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--dark); font: 700 14px var(--head); text-transform: uppercase; letter-spacing: .03em; }
.area-tabs a .ic { color: var(--red); flex: none; }
.area-tabs a:hover { text-decoration: none; border-color: #ccc; }
.area-tabs a.on { background: var(--dark); border-color: var(--dark); color: #fff; box-shadow: inset 0 -3px 0 var(--red); }
.area-tabs a.on .ic { color: #fff; }
@media (max-width: 640px) {
  .area-tabs { gap: 6px; }
  .area-tabs a { flex-direction: column; gap: 4px; padding: 10px 6px; font-size: 11.5px; text-align: center; line-height: 1.2; }
}
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin-bottom: 18px; }
.comp { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; color: var(--dark); }
.comp:hover { text-decoration: none; border-color: #ccc; box-shadow: var(--shadow); }
.comp strong { display: block; font: 700 16px var(--head); }
.comp small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.comp .acc-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.comp > .ic:last-child { color: var(--muted); flex: none; }
@media (max-width: 640px) { .comp-grid { grid-template-columns: 1fr; } }

/* ---------- Bewerb: Stufen, Fortschritt, Stationen ---------- */
.lvl-tabs { display: flex; gap: 8px; margin: 2px 0 16px; }
.lt { flex: 1; max-width: 160px; text-align: center; padding: 10px 8px; border-radius: 10px; border: 2px solid var(--line); background: #fff; color: var(--dark); font: 700 15px var(--head); text-transform: uppercase; letter-spacing: .05em; }
.lt:hover { text-decoration: none; }
.lt-bronze { --lc: #a0672f; } .lt-silber { --lc: #8d949b; } .lt-gold { --lc: var(--gold); }
.lt { border-color: color-mix(in srgb, var(--lc, #888) 40%, #fff); color: var(--lc, var(--dark)); }
.lt.on { background: var(--lc, var(--dark)); border-color: var(--lc, var(--dark)); color: #fff; }
@media (max-width: 640px) { .lt { max-width: none; } }
.bw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 6px; }
.bw-grid > .card { margin: 0; }
.bw-progress { display: flex; gap: 18px; align-items: center; }
.bw-progress .ring.lg { margin: 0; width: 96px; height: 96px; }
.bw-progress .ring.lg span { width: 76px; height: 76px; font-size: 22px; }
.bw-progress h2 { margin: 0 0 4px; font-size: 16px; }
.bw-progress p { margin: 2px 0; }
.bw-progress .ok { color: #2e7d32; } .bw-progress .bad { color: var(--red); }
.private { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-top: 6px !important; }
.private .ic { width: 13px; height: 13px; }
@media (max-width: 760px) { .bw-grid { grid-template-columns: 1fr; } }
.stations { display: grid; gap: 8px; margin-bottom: 18px; }
.station { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; color: var(--dark); }
.station:hover { text-decoration: none; border-color: #ccc; box-shadow: var(--shadow); }
.station strong { display: block; font-size: 15px; }
.station small { display: block; color: var(--muted); font-size: 12.5px; }
.station > .ic:last-child { color: var(--muted); flex: none; }
.st-num { width: 24px; height: 24px; border-radius: 50%; background: var(--bg); color: var(--gray); font: 700 12px var(--head); display: grid; place-items: center; flex: none; }
.st-ic { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--dark); color: #fff; }
.st-ic .ic { width: 20px; height: 20px; }
.st-quiz .st-ic { background: var(--red); }
.st-geraete .st-ic { background: var(--gold); }
.exam-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-left: 4px solid var(--dark); }
.exam-card h2 { margin: 0 0 4px; }
.exam-card p { margin: 0; }
.btn.disabled { opacity: .45; pointer-events: none; }
@media (max-width: 640px) { .exam-card { flex-direction: column; align-items: stretch; } }
.msg-body-lg { font-size: 15.5px; line-height: 1.65; white-space: normal; }
.mi-icon.sm { width: 38px; height: 38px; border-radius: 7px; }
.mi-icon.sm .ic { width: 18px; height: 18px; }

/* ---------- Lernkarten ---------- */
.flashcard { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 30px 22px 24px; margin: 8px 0 14px; box-shadow: var(--shadow); border-top: 4px solid var(--red); }
.flashcard .q-text { margin: 0; font: 600 19px/1.45 var(--text); text-transform: none; letter-spacing: 0; }
.fc-label { position: absolute; top: 9px; left: 22px; font: 700 11px var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.card-answer { background: var(--gold-soft); border-left: 4px solid var(--gold); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; }
.card-answer small { font: 700 11px var(--head); text-transform: uppercase; letter-spacing: .06em; color: #8a6a2c; }
.card-answer p { margin: 4px 0 0; white-space: pre-line; font-size: 15.5px; }
.card-rate { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card-rate .btn { justify-content: center; padding: 12px; }
.rate-yes { background: #2e7d32; border-color: #2e7d32; }
.rate-yes:hover { background: #256628; border-color: #256628; }
.rate-no.on { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.rate-yes.on { box-shadow: 0 0 0 3px rgba(46,125,50,.25); }

/* Lange Wörter (z. B. Funkleistungsabzeichen) am Handy sauber trennen */
h1, .phead h1 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 640px) { .phead h1 { font-size: 26px; } }
@media (max-width: 640px) { .phead { flex-wrap: wrap; } .phead > div { min-width: 0; flex: 1 1 100%; } .phead h1 { font-size: 24px; } }

/* ---------- Einsatzleitung ---------- */
.el-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--dark); border-radius: 12px; padding: 0 14px; margin: 2px 0 14px; position: sticky; top: calc(var(--top) + 8px); z-index: 20; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.el-search .ic { color: var(--red); flex: none; }
.el-search input { flex: 1; border: 0; outline: 0; padding: 13px 0; font: 500 16px var(--text); background: transparent; min-width: 0; }
.el-pills button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; background: #fff; border: 1px solid #e2e2de; color: var(--gray); font: 600 14px var(--text); cursor: pointer; }
.el-pills button .ic { width: 15px; height: 15px; }
.el-pills button.on { background: var(--dark); border-color: var(--dark); color: #fff; }
.aao-list, .plan-list { display: grid; gap: 8px; margin-bottom: 18px; }
.aao, .plan { background: #fff; border: 1px solid #e9e9e6; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow: hidden; }
.aao[hidden], .plan[hidden] { display: none; }
.aao > summary, .plan > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; }
.aao > summary::-webkit-details-marker, .plan > summary::-webkit-details-marker { display: none; }
.aao[open] .acc-chev, .plan[open] .acc-chev { transform: rotate(90deg); }
.aao[open] > summary, .plan[open] > summary { border-bottom: 1px solid var(--line); background: #fafaf8; }
.aao summary strong, .plan summary strong { display: block; font-size: 15px; line-height: 1.3; }
.plan summary small { display: block; color: var(--muted); font-size: 12.5px; }
.aao-code { width: 42px; height: 42px; border-radius: 9px; display: grid; place-items: center; flex: none; font: 700 15px var(--head); color: #fff; background: var(--red); }
.aao-technik .aao-code { background: #2f5d8a; }
.aao-schadstoff .aao-code { background: #c47a00; }
.aao-sonstige .aao-code { background: var(--gray); }
.aao-veh { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.aao-veh .vchip { font-size: 11px; padding: 2px 6px; }
.aao-veh .vchip-ok { background: var(--dark); }
.aao-warn { color: var(--red); flex: none; }
.aao-body, .plan-body { padding: 12px 14px 14px; }
.aao-body h3 { font: 700 12px var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 6px 0 6px; }
.aao-units { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.aao-units li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--bg); }
.aao-units li b { min-width: 44px; font: 700 15px var(--head); }
.aao-units li span { flex: 1; font-size: 13.5px; color: var(--gray); }
.aao-units li.st-bad { background: var(--red-soft); } .aao-units li.st-bad b { color: var(--red); text-decoration: line-through; }
.aao-units li.st-warn { background: #fff6e0; }
.aao-units li.extra { background: #fff; border: 1px dashed #d6d6d2; }
.aao-units li.extra b { min-width: 0; color: var(--red); }
.aao-follow { margin: 0 0 8px; padding-left: 20px; font-size: 14px; }
.aao-note { display: flex; gap: 8px; margin: 8px 0 0; padding: 9px 12px; background: var(--gold-soft); border-radius: 8px; font-size: 13.5px; }
.aao-note .ic { color: #8a6a2c; flex: none; width: 18px; height: 18px; margin-top: 1px; }
.aao-miss { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 8px; margin-bottom: 8px; font-size: 13.5px; background: var(--red-soft); color: var(--red-dark); }
.aao-miss.st-warn { background: #fff6e0; color: #8a5a00; }
.aao-miss .ic { flex: none; width: 18px; height: 18px; }
.plan-ic { width: 38px; height: 38px; border-radius: 9px; background: var(--red-soft); color: var(--red); display: grid; place-items: center; flex: none; }
.plan-body .actions { margin-top: 10px; }
@media (max-width: 640px) { .quick-call { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Aktueller Alarm (blaulichtSMS) ---------- */
.alarm-box { display: grid; gap: 10px; margin: 0 0 14px; }
.alarm-box[hidden] { display: none; }
.alarm { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2px var(--red), 0 8px 24px rgba(215,68,56,.18); }
.alarm-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--red); color: #fff; padding: 8px 14px; font-size: 13.5px; }
.alarm-top b { font-weight: 700; }
.alarm-badge { font: 700 13px var(--head); text-transform: uppercase; letter-spacing: .1em; background: #fff; color: var(--red); padding: 2px 8px; border-radius: 4px; animation: alarm-pulse 1.6s ease-in-out infinite; }
@keyframes alarm-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .alarm-badge { animation: none; } }
.alarm-groups { margin-left: auto; font-size: 12.5px; opacity: .9; }
.alarm-text { margin: 0; padding: 12px 14px 4px; font: 700 20px/1.3 var(--head); text-transform: none; letter-spacing: .01em; }
.alarm-loc { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 6px 14px 10px; font-size: 14.5px; color: var(--gray); }
.alarm-loc .btn { flex: none; }
.alarm-rsvp { padding: 10px 14px 4px; border-top: 1px solid var(--line); }
.alarm-bar { display: flex; height: 8px; border-radius: 4px; background: #ecece9; overflow: hidden; }
.alarm-bar i { display: block; height: 100%; } .alarm-bar .y { background: var(--ok); } .alarm-bar .n { background: var(--red); }
.alarm-counts { display: flex; gap: 16px; margin-top: 7px; font-size: 13.5px; color: var(--gray); }
.alarm-counts b { font: 700 20px var(--head); margin-right: 3px; }
.c-yes b { color: var(--ok); } .c-no b { color: var(--red); } .c-open b { color: var(--muted); }
.alarm-fn { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px 10px; }
.afn-sum { display: inline-flex; align-items: center; gap: 5px; background: var(--bg); border-radius: 6px; padding: 3px 8px 3px 3px; }
.afn-sum b { font: 700 16px var(--head); }
.afn { display: inline-block; font: 700 11px var(--head); letter-spacing: .04em; padding: 2px 6px; border-radius: 4px; background: var(--dark); color: #fff; }
.alarm-who { border-top: 1px solid var(--line); }
.alarm-who summary { padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--red); list-style: none; }
.alarm-who summary::-webkit-details-marker { display: none; }
.alarm-who summary::after { content: ' ▸'; } .alarm-who[open] summary::after { content: ' ▾'; }
.alarm-who ul { list-style: none; margin: 0; padding: 0 14px 10px; }
.alarm-who li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #f0f0ee; font-size: 14px; }
.alarm-who li small { display: block; color: var(--muted); font-size: 12px; }
.afns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.alarm-none { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.alarm-none strong { display: block; font-size: 14px; }
.alarm-none small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alarm-none > span:last-child { min-width: 0; }
.alarm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: none; }

/* ---------- Einsatzleitung: Aufbau ---------- */
.lk-sm { font-size: 20px !important; white-space: nowrap; }
.el-sticky { position: sticky; top: var(--top); z-index: 20; background: var(--bg); margin: 0 -4px 6px; padding: 8px 4px 2px; }
.el-sticky .el-search { position: static; margin: 0 0 8px; box-shadow: none; }
.el-clear { border: 0; background: var(--bg); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--gray); flex: none; }
.el-clear .ic { width: 15px; height: 15px; }
.el-jump { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
.el-jump::-webkit-scrollbar { display: none; }
.el-jump a { flex: none; padding: 6px 12px; border-radius: 16px; background: #fff; border: 1px solid #e2e2de; color: var(--dark); font: 600 13px var(--text); }
.el-jump a:hover { text-decoration: none; border-color: var(--red); color: var(--red); }
.el-searching .el-jump { display: none; }
.el-searching #werkzeuge, .el-searching #wetter, .el-searching #dokumente, .el-searching #links { display: none; }
.el-sec { scroll-margin-top: calc(var(--top) + 110px); }
.el-sec > h2.section { margin-top: 18px; }
.aao-group { margin-bottom: 12px; }
.aao-group[hidden] { display: none; }
.aao-gh { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; font: 700 12px var(--head); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.aao-gh::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--muted); }
.aao-gh-brand::before { background: var(--red); } .aao-gh-technik::before { background: #2f5d8a; } .aao-gh-schadstoff::before { background: #c47a00; }
.aao-list { gap: 6px; margin-bottom: 0; }
.aao > summary { padding: 9px 12px; gap: 10px; }
.aao-code { width: 38px; height: 38px; font-size: 14px; }
.aao summary strong { font-size: 14.5px; }
.aao-h { font: 700 12px var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 8px 0 4px; }
.el-none { background: #fff; border: 1px dashed #d6d6d2; border-radius: 12px; padding: 14px; text-align: center; color: var(--muted); }
.el-docs { padding: 4px 16px 10px; }
.el-docgroup + .el-docgroup { border-top: 1px solid var(--line); }
.el-docgroup h3 { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 4px; font: 700 13px var(--head); text-transform: uppercase; letter-spacing: .05em; color: var(--gray); }
.el-docgroup h3 .icon-btn { width: 30px; height: 30px; }
@media (max-width: 640px) {
  .alarm-text { font-size: 18px; }
  .alarm-groups { margin-left: 0; flex-basis: 100%; }
  .lage .lk b { font-size: 24px; }
  .el-grid { grid-template-columns: 1fr; gap: 10px; }
}
.el-sec[hidden] { display: none; }
@media (min-width: 900px) { .aao-list { grid-template-columns: 1fr 1fr; align-items: start; } }

/* AAO-Vorschlag in der Alarm-Karte */
.alarm-aao { margin: 0 14px 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border-left: 4px solid var(--dark); }
.aa-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.aa-head span { font: 700 12px var(--head); text-transform: uppercase; letter-spacing: .08em; color: var(--gray); }
.aa-head small { font-size: 12px; color: var(--muted); }
.aa-title { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; color: var(--dark); }
.aa-title:hover { text-decoration: none; } .aa-title:hover strong { color: var(--red); }
.aa-title strong { flex: 1; font-size: 16px; line-height: 1.25; }
.aa-code { width: 34px; height: 34px; border-radius: 8px; background: var(--red); color: #fff; display: grid; place-items: center; font: 700 14px var(--head); flex: none; }
.aa-go { font-size: 13px; font-weight: 600; color: var(--red); flex: none; }
.aa-veh { display: flex; flex-wrap: wrap; gap: 5px; }
.aa-veh .vchip-ok { background: var(--dark); }
.aa-extra { font: 700 12px var(--head); padding: 3px 8px; border-radius: 3px; border: 1px dashed var(--red); color: var(--red); background: #fff; letter-spacing: .03em; }
.aa-miss { margin: 8px 0 0; font-size: 13px; color: #8a5a00; } .aa-miss.st-bad { color: var(--red); }
.aa-follow, .aa-alts { margin: 7px 0 0; font-size: 13px; color: var(--gray); }
.aa-alts a { font-weight: 600; }
.aao-area { display: inline-block; font-size: 11.5px; color: var(--muted); margin-left: 4px; }
.aao-flash { box-shadow: 0 0 0 3px var(--red); transition: box-shadow .3s; }

/* ---------- Einsatzleitung: Klappbereiche ---------- */
.el-fold { background: #fff; border: 1px solid #e9e9e6; border-radius: 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.el-fold > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.el-fold > summary::-webkit-details-marker { display: none; }
.el-fold > summary strong { display: block; font: 700 16px var(--head); text-transform: uppercase; letter-spacing: .03em; }
.el-fold > summary small { display: block; font-size: 12.5px; color: var(--muted); }
.el-fold[open] > summary { border-bottom: 1px solid var(--line); }
.el-fold[open] > summary .acc-chev { transform: rotate(90deg); }
.ef-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--red-soft); color: var(--red); display: grid; place-items: center; flex: none; }
#werkzeuge .ef-ic { background: #fff1d6; color: #b06a00; }
.ef-body { padding: 12px; background: #fafaf8; border-radius: 0 0 12px 12px; }
.ef-body .card { margin-bottom: 0; }
.el-sticky { margin-bottom: 8px; }
.el-searching .el-fold:not(#aao):not(#plaene) { display: none; }
.el-fold[hidden] { display: none; }

/* ---------- Startseite: Leiste „Derzeit im Einsatz“ ---------- */
.ea-banners { display: grid; gap: 8px; margin: 0 0 14px; }
.ea-banners[hidden] { display: none; }
.ea-banner { display: flex; align-items: center; gap: 12px; background: var(--red); color: #fff; border-radius: 12px; padding: 11px 14px; box-shadow: 0 6px 18px rgba(215,68,56,.28); }
.ea-banner:hover { text-decoration: none; color: #fff; background: var(--red-dark); }
.ea-banner small { display: block; font-size: 12px; opacity: .92; }
.ea-banner strong { display: block; font: 700 16px/1.25 var(--head); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ea-pulse { width: 12px; height: 12px; border-radius: 50%; background: #fff; flex: none; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: ea-pulse 1.6s infinite; }
@keyframes ea-pulse { 70% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .ea-pulse { animation: none; } }
.ea-count { display: flex; flex-direction: column; align-items: center; font-size: 11px; line-height: 1.1; background: rgba(255,255,255,.18); border-radius: 8px; padding: 4px 8px; flex: none; }
.ea-count b { font: 700 18px var(--head); }
.ea-chev { font-size: 26px; line-height: 1; opacity: .8; flex: none; }

/* ---------- Seite „Laufender Einsatz“ ---------- */
.ea-page { display: grid; gap: 12px; }
.ea-page .alarm { margin: 0; }
.ea-author { margin: 0; padding: 0 14px 12px; font-size: 12.5px; color: var(--muted); }
.ea-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ea-grid .card { margin: 0; }
@media (max-width: 860px) { .ea-grid { grid-template-columns: 1fr; } }
.ea-aao .aa-title { margin: 2px 0 2px; }
.ea-aao .aa-title strong { font-size: 18px; }
.aa-why { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.ea-aao .aao-units { grid-template-columns: 1fr; }
.ea-aao .aao-units li span small { display: block; font-size: 12px; color: #8a5a00; }
.ea-aao .aao-units li.st-bad span small { color: var(--red); }
.ea-rsvp h2 { margin-top: 0; }
.ea-rsvp .alarm-fn { padding: 10px 0 4px; }
.ea-who { list-style: none; margin: 6px 0 0; padding: 0; }
.ea-who li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f0f0ee; font-size: 14px; }
.ea-who li small { display: block; color: var(--muted); font-size: 12px; }
.ea-none { display: flex; align-items: center; gap: 12px; }
.ea-none strong { display: block; }
.ea-none small { display: block; color: var(--muted); font-size: 12.5px; }
.ea-banner > .grow { min-width: 0; }
.ea-banner strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Mein Profil ---------- */
.phero { min-height: 150px; }
.phero-row { display: flex; align-items: center; gap: 14px; }
.phero .avatar.xl { width: 64px; height: 64px; font-size: 24px; border: 3px solid rgba(255,255,255,.85); }
.phero h1 { margin: 0; font-size: 26px; display: block; }
.phero-txt p { margin: 2px 0 0; color: #ddd; font-size: 13.5px; }
.phero-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.phero-groups span { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); }
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pcol { display: grid; gap: 14px; }
.pcol > .card { margin: 0; }
@media (max-width: 860px) { .pgrid { grid-template-columns: 1fr; } .pcol { gap: 10px; } .pgrid { gap: 10px; } }
.pc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pc-head h2 { margin: 0; flex: 1; font-size: 17px; }
.pc-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--red-soft); color: var(--red); display: grid; place-items: center; flex: none; }
.pc-ic .ic { width: 18px; height: 18px; }
.pfold { border-top: 1px solid var(--line); margin-top: 12px; }
.pfold > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 11px 0 3px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--red); }
.pfold > summary::-webkit-details-marker { display: none; }
.pfold > summary .ic { width: 16px; height: 16px; }
.pfold > summary::after { content: '▸'; margin-left: auto; color: var(--muted); }
.pfold[open] > summary::after { content: '▾'; }
.pfold > .form, .pfold > .dlist { margin-top: 10px; }
.pactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Atemschutz-Karte */
.breath-card { border-top: 4px solid var(--ok); }
.breath-card.st-warn { border-top-color: var(--warn); } .breath-card.st-bad, .breath-card.st-none { border-top-color: var(--red); }
.breath-card .pc-ic { background: #e5f3ea; color: var(--ok); }
.breath-card.st-warn .pc-ic { background: #fff1d6; color: #b06a00; } .breath-card.st-bad .pc-ic, .breath-card.st-none .pc-ic { background: var(--red-soft); color: var(--red); }
.breath-pill { font: 700 12px var(--head); text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 12px; background: var(--ok); color: #fff; }
.st-warn .breath-pill { background: var(--warn); } .st-bad .breath-pill, .st-none .breath-pill { background: var(--red); }
.breath-big { margin: 0 0 10px; font: 700 24px/1.2 var(--head); }
.breath-bar { height: 8px; border-radius: 4px; background: #ecece9; overflow: hidden; }
.breath-bar i { display: block; height: 100%; background: var(--ok); border-radius: 4px; }
.st-warn .breath-bar i { background: var(--warn); } .st-bad .breath-bar i { background: var(--red); }
.breath-dates { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); }
.breath-dates span:last-child { text-align: right; }
.breath-dates b { display: block; font-size: 14px; color: var(--dark); }
.upload-box { display: flex !important; align-items: center; gap: 12px; padding: 14px; border: 2px dashed #d6d6d2; border-radius: 10px; cursor: pointer; position: relative; background: #fafaf8; }
.upload-box:hover { border-color: var(--red); }
.upload-box > .ic { color: var(--red); width: 26px; height: 26px; flex: none; }
.upload-box strong { display: block; font-size: 14px; }
.upload-box small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.upload-box input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-box.has-file { border-style: solid; border-color: var(--ok); background: #f1f8f3; }

/* Benachrichtigungen mit Schaltern */
.push-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg); border-radius: 10px; }
.push-row strong { display: block; font-size: 14px; }
.push-row small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.push-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.push-tools:not(:has(button:not([hidden]))) { display: none; }
.switch-list { display: grid; margin: 8px 0 12px; }
.switch-row { display: flex !important; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0ee; margin: 0 !important; cursor: pointer; font-weight: 400 !important; }
.switch-row:last-child { border-bottom: 0; }
.switch-row strong { display: block; font-size: 14.5px; font-weight: 600; }
.switch-row small { display: block; font-size: 12px; color: var(--muted); }
.switch-row.fixed { cursor: default; }
.switch { appearance: none; -webkit-appearance: none; width: 46px !important; height: 28px; border-radius: 14px; background: #d8d8d4; position: relative; flex: none; cursor: pointer; transition: background .2s; margin: 0; padding: 0; border: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch:checked { background: var(--ok); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { opacity: .6; cursor: default; }
.switch:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Kalender-Abo */
.ics-buttons { display: grid; gap: 8px; }
.ics-btn { display: block; padding: 11px 14px; border-radius: 10px; border: 1px solid #e2e2de; background: #fff; color: var(--dark); position: relative; padding-right: 36px; }
.ics-btn::after { content: '+'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 700 22px var(--head); color: var(--red); }
.ics-btn:hover { text-decoration: none; border-color: var(--red); }
.ics-btn:first-child { border-color: var(--red); background: var(--red-soft); }
.ics-btn strong { display: block; font-size: 14.5px; }
.ics-btn small { display: block; font-size: 12px; color: var(--gray); }
.pfold .copy-row { margin-bottom: 8px; }
.pfold .copy-row input { min-width: 0; font-size: 12px; }

/* Leistungsabzeichen + Daten */
.ach-list { display: grid; gap: 6px; }
.ach { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg); border-radius: 8px; }
.ach strong { display: block; font-size: 14px; } .ach small { color: var(--muted); font-size: 12px; }
.pdata { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.pdata dt { color: var(--muted); } .pdata dd { margin: 0; word-break: break-all; }
.form .switch, .switch { width: 46px !important; min-width: 46px; max-width: 46px; height: 28px !important; min-height: 0; padding: 0 !important; border: 0 !important; border-radius: 14px !important; box-sizing: border-box; box-shadow: none; }

/* Profil: Meine Termine */
.pc-head .more { font-size: 13px; font-weight: 600; }
.my-open { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin-bottom: 10px; border-radius: 10px; background: #fff6e0; color: #8a5a00; font-size: 13.5px; }
.my-open:hover { text-decoration: none; filter: brightness(.98); }
.my-open b { font: 700 18px var(--head); }
.my-open .ic { margin-left: auto; width: 16px; height: 16px; }
.my-events { display: grid; gap: 6px; }
.my-ev { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 6px; border-radius: 10px; color: var(--dark); background: var(--bg); }
.my-ev:hover { text-decoration: none; } .my-ev:hover strong { color: var(--red); }
.my-yes { width: 26px; height: 26px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; flex: none; }
.my-yes .ic { width: 15px; height: 15px; }
.ics-sub { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ics-sub .hint { margin: 8px 0 0; }
.pcol { min-width: 0; }
@media (max-width: 860px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }
.pcol { grid-template-columns: minmax(0, 1fr); }
.my-events { grid-template-columns: minmax(0, 1fr); } .my-ev { min-width: 0; }

/* Atemschutz: Nachweise prüfen */
.review-list { display: grid; gap: 12px; margin-bottom: 18px; }
.review { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; margin: 0; border-left: 4px solid var(--warn); }
.review-img { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--bg); border-radius: 10px; overflow: hidden; min-height: 150px; color: var(--gray); }
.review-img img { width: 100%; height: 160px; object-fit: cover; display: block; }
.review-img small { font-size: 12px; font-weight: 600; color: var(--red); padding-bottom: 6px; }
.review-img:hover { text-decoration: none; }
.review-body h3 { margin: 0 0 8px; font-size: 17px; }
.review-body .pdata { margin-bottom: 12px; }
.review-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.review-no > summary { list-style: none; cursor: pointer; }
.review-no > summary::-webkit-details-marker { display: none; }
.review-no[open] { flex-basis: 100%; }
.review-no-box { display: grid; gap: 8px; margin-top: 8px; padding: 10px; background: var(--red-soft); border-radius: 10px; }
@media (max-width: 640px) { .review { grid-template-columns: 1fr; } .review-img img { height: 200px; } }
.breath-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; }
.breath-note .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.breath-note.pending { background: #fff6e0; color: #8a5a00; }
.breath-note.rejected { background: var(--red-soft); color: var(--red-dark); }

/* Benutzer bearbeiten: Grundgruppe */
.basis-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.basis-opt { display: flex !important; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 2px solid #e2e2de; border-radius: 10px; cursor: pointer; margin: 0 !important; font-weight: 400 !important; background: #fff; }
.basis-opt input { margin-top: 3px; accent-color: var(--red); width: auto !important; }
.basis-opt strong { display: block; font-size: 14px; }
.basis-opt small { display: block; font-size: 12px; color: var(--muted); }
.basis-opt:has(input:checked) { border-color: var(--red); background: var(--red-soft); }
.chip.sys span { border-style: dashed; }
.lage { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.zug-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }

/* ---------- Dienstplan Sirenenprobe ---------- */
.bz-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .bz-grid { grid-template-columns: minmax(0, 1fr); } }
.g1 { --gc: var(--red); } .g2 { --gc: var(--gold); } .g3 { --gc: #2f5d8a; } .g4 { --gc: #2e7d32; }
.bz-next { display: flex; gap: 16px; align-items: flex-start; border-top: 4px solid var(--red); }
.bz-next-date { width: 74px; flex: none; text-align: center; background: var(--dark); color: #fff; border-radius: 12px; padding: 8px 0 10px; }
.bz-next-date b { display: block; font: 700 34px/1 var(--head); margin: 2px 0; }
.bz-next-date small { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: #ccc; }
.bz-next-lbl { margin: 0; font: 700 12px var(--head); text-transform: uppercase; letter-spacing: .07em; color: var(--red); }
.bz-next h2 { margin: 2px 0 2px; font: 700 21px/1.2 var(--head); text-transform: none; }
.bz-next .actions { margin-top: 8px; }
.bz-sub { color: #8a5a00; font-weight: 600; } .bz-sub.ok { color: var(--ok); }
p.bz-sub { margin: 6px 0 0; font-size: 13.5px; }
.bz-open { border-left: 4px solid var(--warn); }
.bz-open h2 { margin-top: 0; }
.bz-open-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.bz-open-row strong { display: block; font-size: 14.5px; } .bz-open-row small { color: var(--muted); font-size: 12.5px; }
.bz-month { font: 700 12px var(--head); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 0 6px; }
.bz-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #ebebe8; border-left: 4px solid var(--gc, #ccc); border-radius: 10px; padding: 7px 12px 7px 8px; margin-bottom: 5px; scroll-margin-top: calc(var(--top) + 20px); }
.bz-row.mine { background: #fffaf9; box-shadow: inset 0 0 0 1px rgba(215,68,56,.25); }
.bz-row.hol { border-left-color: #ccc; background: #f7f7f5; color: var(--muted); }
.bz-row.past { opacity: .6; }
.bz-date { width: 40px; text-align: center; flex: none; line-height: 1.05; }
.bz-date b { display: block; font: 700 19px var(--head); }
.bz-date small { font: 600 10.5px var(--head); text-transform: uppercase; color: var(--muted); }
.bz-main strong { display: block; font-size: 14.5px; }
.bz-main small { display: block; font-size: 12.5px; color: var(--muted); }
.bz-g { display: inline-block; font: 700 11.5px var(--head); letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--gc, var(--gray)); padding: 2px 7px; border-radius: 4px; margin-right: 4px; vertical-align: 1px; }
.bz-ns { font-size: 12px; font-weight: 700; color: var(--red); }
.bz-me { font: 700 11px var(--head); text-transform: uppercase; letter-spacing: .05em; color: var(--red); background: var(--red-soft); padding: 2px 7px; border-radius: 10px; flex: none; }
.bz-past summary { cursor: pointer; font-weight: 600; color: var(--red); padding: 10px 0; }
.bz-group { margin: 0 0 10px; border-top: 4px solid var(--gc); padding-bottom: 10px; }
.bz-group.mine { box-shadow: 0 0 0 2px var(--red); }
.bz-group h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.bz-group ul { list-style: none; margin: 0; padding: 0; }
.bz-group li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #f0f0ee; font-size: 14px; flex-wrap: wrap; }
.bz-d { width: 20px; height: 20px; border-radius: 5px; background: var(--dark); color: #fff; font: 700 11px var(--head); display: grid; place-items: center; flex: none; }
.bz-medit > summary { list-style: none; cursor: pointer; color: var(--muted); }
.bz-medit > summary::-webkit-details-marker { display: none; }
.bz-medit[open] { flex-basis: 100%; }
.bz-add { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; }
.bz-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1; }
.bz-edit select, .bz-edit input[name=note] { width: auto !important; padding: 5px 8px !important; font-size: 13px; }
.bz-edit input[name=note] { flex: 1; min-width: 120px; }
.bz-edit .check { margin: 0 !important; font-size: 13px; }
.bz-year { margin-top: 14px; }
.my-yes.bz { background: var(--dark); }

/* ---------- Sirenenprobe: Besetzung pro Person, Startseite ---------- */
.bz-roster { list-style: none; margin: 10px 0 0; padding: 0; }
.bz-roster li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid #f0f0ee; font-size: 14px; }
.bz-roster li small { color: var(--muted); font-size: 12px; }
.bz-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.bz-roster li.away .bz-dot { background: var(--red); } .bz-roster li.away small { color: var(--red); font-weight: 600; }
.bz-roster li.sub .bz-dot { background: var(--gold); } .bz-roster li.sub small { color: #8a6a2c; }
.bz-roster li.away .grow, .bz-roster li.sub .grow { text-decoration: line-through; color: var(--muted); }
.bz-away { padding: 10px 14px; } .bz-away p { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bz-tile { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e9e9e6; border-left: 4px solid var(--dark); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; color: var(--dark); }
.bz-tile.mine { border-left-color: var(--red); background: #fffaf9; }
.bz-tile:hover { text-decoration: none; box-shadow: var(--shadow); }
.bz-tile-date { width: 48px; text-align: center; flex: none; background: var(--dark); color: #fff; border-radius: 9px; padding: 4px 0 6px; line-height: 1.05; }
.bz-tile-date b { display: block; font: 700 20px var(--head); }
.bz-tile-date small { font-size: 10px; text-transform: uppercase; color: #ccc; }
.bz-tile small { display: block; font-size: 12px; color: var(--muted); }
.bz-tile strong { display: block; font-size: 14.5px; }
.bz-tile span > span { display: block; font-size: 12.5px; color: var(--gray); }
.bz-tile .bz-tile-warn { color: #8a5a00; font-weight: 600; }
.bz-tile > .ic:last-child { color: var(--muted); flex: none; }

/* ---------- Schnellaktionen Startseite ---------- */
.dq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.dq-btn { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--dark); color: #fff; border-radius: 12px; }
.dq-btn:hover { text-decoration: none; color: #fff; background: #000; }
.dq-btn > .ic { width: 22px; height: 22px; color: var(--red); flex: none; }
.dq-btn strong { display: block; font: 700 14px var(--head); text-transform: uppercase; letter-spacing: .04em; }
.dq-btn small { display: block; font-size: 11.5px; color: #bbb; line-height: 1.3; }

/* ---------- Mangel melden ---------- */
.df-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.df-cat { margin: 0 !important; cursor: pointer; position: relative; }
.df-cat input { position: absolute; opacity: 0; pointer-events: none; }
.df-cat > span { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px 8px; background: #fff; border: 2px solid #e2e2de; border-radius: 12px; font-size: 13.5px; }
.df-cat > span .ic { width: 26px; height: 26px; color: var(--gray); }
.df-cat input:checked + span { border-color: var(--red); background: var(--red-soft); }
.df-cat input:checked + span .ic { color: var(--red); }
.df-cat input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 640px) { .df-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .df-cat > span { font-size: 12px; padding: 10px 4px; } }
.df-list { display: grid; gap: 10px; }
.df-item { display: flex; gap: 14px; margin: 0; border-left: 4px solid var(--warn); }
.df-item.done { border-left-color: var(--ok); opacity: .85; }
.df-photo { width: 120px; flex: none; }
.df-photo img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; display: block; }
.df-item h3 { margin: 4px 0 4px; font-size: 16px; }
.df-meta { margin: 0; display: flex; gap: 6px; align-items: center; }
.df-badge { display: inline-flex; align-items: center; gap: 5px; font: 700 11.5px var(--head); text-transform: uppercase; letter-spacing: .05em; color: var(--gray); }
.df-badge .ic { width: 14px; height: 14px; }
.df-done { color: var(--ok); display: flex; gap: 6px; align-items: center; } .df-done .ic { width: 15px; height: 15px; }
.df-done-form { display: flex; gap: 8px; margin-top: 8px; }
.df-done-form input { flex: 1; min-width: 0; }
@media (max-width: 640px) { .df-item { flex-direction: column; } .df-photo, .df-photo img { width: 100%; height: 180px; } .df-done-form { flex-direction: column; } }

/* ---------- Fotos ---------- */
.ph-upload h2 { margin-top: 0; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ph { margin: 0; background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid #ebebe8; }
.ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ph figcaption { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px 6px; font-size: 11.5px; color: var(--gray); }
.ph figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph figcaption form { display: flex; gap: 2px; flex: none; }
.ph figcaption .icon-btn { width: 28px; height: 28px; }
.ph.used { opacity: .55; } .ph .icon-btn.on { color: var(--ok); }
.ph-album h3 { margin: 16px 0 8px; font-size: 16px; }
.ph-album h3 small { font-weight: 400; font-size: 12.5px; }
@media (max-width: 640px) { .ph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Unsere Feuerwehr ---------- */
.ff-house { padding: 0; overflow: hidden; }
.ff-photos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; }
.ff-photos figure { margin: 0; position: relative; scroll-snap-align: start; }
.ff-photos img { width: 100%; height: 220px; object-fit: cover; display: block; }
.ff-photos figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; color: #fff; font-size: 12.5px; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.ff-hero { height: 180px; background: linear-gradient(90deg, rgba(20,20,19,.4), rgba(20,20,19,.1)), var(--hero) center 35% / cover no-repeat; }
.ff-house-body { padding: 14px 18px 16px; }
.ff-house-body h2 { margin-top: 0; }
.ff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ff-grid > .card { margin: 0; }
@media (max-width: 640px) { .ff-grid { grid-template-columns: minmax(0, 1fr); } }
.ff-sec h3 { margin: 0 0 6px; font: 700 13px var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ff-person { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f0f0ee; }
.ff-av { width: 36px; height: 36px; border-radius: 50%; background: var(--red-soft); color: var(--red); display: grid; place-items: center; font: 700 13px var(--head); flex: none; }
.ff-person small { display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ff-person strong { display: block; font-size: 14.5px; }
.ff-call { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 18px; background: var(--ok); color: #fff; font-size: 13px; font-weight: 600; flex: none; }
.ff-call:hover { text-decoration: none; color: #fff; filter: brightness(1.05); }
.ff-call .ic { width: 15px; height: 15px; }
@media (max-width: 640px) { .ff-call span { display: none; } .ff-call { padding: 8px; } }
.ff-edit { display: grid; gap: 6px; }
.ff-row { display: grid; grid-template-columns: 1.1fr 1.3fr 1.2fr 1fr 1.2fr 60px auto auto; gap: 6px; align-items: center; }
.ff-row input { min-width: 0; padding: 6px 8px !important; font-size: 13px; }
@media (max-width: 900px) { .ff-row { grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); padding-bottom: 8px; } }

/* ---------- Daten einspielen ---------- */
.imp-steps ol { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; }
.imp-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.imp-table tr.bad td { background: #fff6e0; color: #8a5a00; }
.kb-new { border-left: 4px solid var(--gold); }
.kb-new h3 { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.kb-new ol { margin: 0; padding-left: 20px; display: grid; gap: 5px; font-size: 14px; }

/* Wissen: 4 Bereiche */
.area-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .area-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Tabellen am Handy als Karten ---------- */
@media (max-width: 700px) {
  .table.rt thead { display: none; }
  .table.rt, .table.rt tbody, .table.rt tr, .table.rt td { display: block; width: 100%; }
  .table.rt tr { background: #fff; border: 1px solid #ebebe8; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
  .table.rt td { border: 0; padding: 3px 0; display: flex; gap: 12px; justify-content: space-between; align-items: center; text-align: right; min-height: 0; }
  .table.rt td::before { content: attr(data-label); color: var(--muted); font: 600 11.5px var(--text); text-transform: uppercase; letter-spacing: .04em; text-align: left; flex: none; }
  .table.rt td[data-label=""]::before { display: none; }
  .table.rt td:first-child { font-size: 16px; text-align: left; justify-content: flex-start; padding-bottom: 6px; border-bottom: 1px solid #f0f0ee; margin-bottom: 4px; }
  .table.rt td:first-child::before { display: none; }
  .table.rt td:last-child[data-label=""] { justify-content: flex-end; padding-top: 6px; }
  .table.rt td[colspan] { display: block; text-align: center; }
  .card:has(> .table.rt), .card:has(> .table-scroll > .table.rt) { background: none; border: 0; box-shadow: none; padding: 0; }
  .table-scroll:has(> .table.rt) { overflow: visible; }
}

/* Unsere Feuerwehr: Fotos, Dienstgrad, Einsatzgebiet */
.ff-av.ff-img { width: 44px; height: 55px; border-radius: 8px; object-fit: cover; background: var(--bg); }
.ff-rank { font: 700 11px var(--head); background: var(--dark); color: #fff; padding: 1px 5px; border-radius: 3px; vertical-align: 2px; letter-spacing: .04em; }
.ff-area { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 12px; }
.ff-area-map img { width: 100%; height: auto; display: block; }
.ff-area-body h2 { margin-top: 0; }
.ff-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.ff-facts div { background: var(--bg); border-radius: 8px; padding: 7px 10px; }
.ff-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ff-facts dd { margin: 0; font: 700 15px var(--head); }
@media (max-width: 760px) { .ff-area { grid-template-columns: minmax(0, 1fr); } .ff-area-map { max-width: 280px; margin: 0 auto; } .ff-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ff-row { grid-template-columns: 1fr 1.3fr 70px 1.2fr 1fr 1.1fr 56px 34px auto auto; }
.ff-photo-up { position: relative; width: 34px; height: 34px; display: grid !important; place-items: center; border: 1px dashed #ccc; border-radius: 8px; margin: 0 !important; cursor: pointer; }
.ff-photo-up input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---------- Bewerbsanmeldung ---------- */
.su-tile { display: flex; align-items: center; gap: 12px; background: var(--gold-soft); border: 1px solid #ead9b3; border-left: 4px solid var(--gold); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; color: var(--dark); }
.su-tile:hover { text-decoration: none; box-shadow: var(--shadow); }
.su-tile.done { background: #fff; border-color: #e9e9e6; border-left-color: var(--ok); }
.su-tile-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--gold); color: #fff; }
.su-tile.done .su-tile-ic { background: var(--ok); }
.su-tile-ic svg { width: 22px; height: 22px; }
.su-tile .grow { min-width: 0; display: flex; flex-direction: column; }
.su-tile small { color: #8a6a24; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 11px; }
.su-tile.done small { color: var(--ok); }
.su-tile strong { font: 600 17px/1.25 var(--head); }
.su-tile .grow > span { font-size: 13px; color: var(--gray); overflow: hidden; text-overflow: ellipsis; }
.su-info { display: flex; gap: 10px; align-items: flex-start; background: var(--info-soft); border-color: #cfe0f2; }
.su-info p { margin: 0; }
.su-list { display: grid; gap: 10px; margin-bottom: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .su-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.su-comp { background: #fff; border: 1px solid #e9e9e6; border-left: 4px solid #d6d6d2; border-radius: 12px; padding: 10px 14px 12px; margin: 0; min-width: 0; }
.su-comp:has(input[value=""]:not(:checked)), .su-comp.on { border-left-color: var(--gold); }
.su-comp:has(input[value=""]:checked) { border-left-color: #d6d6d2; }
.su-comp legend { font: 600 16px var(--head); padding: 0; float: left; width: 100%; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.su-comp legend svg { width: 18px; height: 18px; color: var(--gold); }
.su-lv { clear: both; }
.su-lv .lv-bronze input:checked + span { background: #a8673a; border-color: #a8673a; }
.su-lv .lv-silber input:checked + span { background: #7d848b; border-color: #7d848b; }
.su-lv .lv-gold input:checked + span { background: var(--gold); border-color: var(--gold); }
.su-admin { display: grid; gap: 12px; }
.su-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.su-stats > div { flex: 1 1 110px; background: var(--bg); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.su-stats b { display: block; font: 700 22px var(--head); }
.su-stats small { color: var(--muted); font-size: 12px; line-height: 1.2; display: block; overflow-wrap: anywhere; hyphens: auto; }
.su-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.su-group h3 { margin: 0 0 6px; font: 600 17px var(--head); }
.su-group h3 small { color: var(--muted); font: 600 13px var(--text); margin-left: 4px; }
.su-badge { flex: none; min-width: 58px; text-align: center; font: 700 12px var(--text); color: #fff; background: var(--dark); border-radius: 20px; padding: 3px 8px; }
.su-badge.lv-bronze { background: #a8673a; } .su-badge.lv-silber { background: #7d848b; } .su-badge.lv-gold { background: var(--gold); }

/* =========================================================
   UI-Feinschliff Beta (v1.19): Kontrast, Fokus, Touch-Ziele,
   Formularfehler, Anmeldung, einheitliche Bausteine
   ========================================================= */
:root { --muted: #6b6b6b; }

/* ---------- Tastatur-Fokus sichtbar (nur bei Tastatur, nicht bei Touch/Maus) ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible, .icon-btn:focus-visible,
.card:focus-visible, .lk:focus-visible, .comp:focus-visible, .dq-btn:focus-visible, .tabbar a:focus-visible, .tabbar button:focus-visible,
.tn-link:focus-visible, .mn-main:focus-visible, .mn-sub:focus-visible, .pills a:focus-visible, .tabs a:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px; border-radius: 6px;
}
.chip input:focus-visible + span, .seg input:focus-visible + span, .kind-opt input:focus-visible + .kind-box, .df-cat input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.topbar a:focus-visible, .topbar button:focus-visible, .ea-banner:focus-visible { outline-color: #fff; }

/* Hover-Effekte nur auf Geräten mit Maus (bleiben am Handy sonst „hängen“) */
@media (hover: none) {
  .rsvp .rs-yes:hover:not(.on), .rsvp .rs-no:hover:not(.on) { border-color: #dcdcd8; background: #fff; color: #9a9a96; }
  .lk:hover, .comp:hover { box-shadow: none; }
  .icon-btn:hover { background: none; }
  .btn-ghost:hover { background: transparent; border-color: var(--line); }
  a:hover { text-decoration: none; }
}

/* ---------- Kontrast: Gold auf Beige ---------- */
.su-tile small { color: #6e5216; font-size: 12px; }
.bz-roster li.sub small { color: #6e5216; }
.lk-warn b { color: #8a5f00; }
.task .ic:first-child { color: #8a6a24; }

/* ---------- Dateiauswahl einheitlich ---------- */
input[type=file] { padding: 6px; background: #fff; border: 1px dashed #c4c4c0; font-size: 14px; color: var(--gray); cursor: pointer; }
input[type=file]::file-selector-button { font: 700 13px var(--head); text-transform: uppercase; letter-spacing: .03em; padding: 7px 14px; margin-right: 10px;
  border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--dark); cursor: pointer; }
input[type=file]:hover::file-selector-button { background: var(--bg); border-color: #ccc; }
.upload-box small.has-file { color: var(--ok); font-weight: 700; }

/* ---------- Handy-Menü: kein Schatten-Streifen, wenn geschlossen ---------- */
@media (max-width: 1080px) {
  .mobilenav { box-shadow: none; visibility: hidden; transition: transform .22s, visibility 0s linear .22s; }
  .nav-open .mobilenav { visibility: visible; box-shadow: -8px 0 30px rgba(0,0,0,.2); transition: transform .22s; }
  .tabbar a, .tabbar button { font-size: 12px; min-height: 52px; }
  a.mn-main { color: inherit; }
}

/* ---------- Touch-Ziele ≥ 44 px ---------- */
.topbar .icon-btn, .topbar .avatar.tn-link { min-width: 44px; min-height: 44px; }
.bell .badge { top: 4px; right: 2px; }
.rsvp { gap: 8px; }
.rsvp button { width: 44px; height: 44px; }
.icon-btn { min-width: 40px; min-height: 40px; }
@media (pointer: coarse) { .icon-btn { min-width: 44px; min-height: 44px; } }
.back { min-height: 44px; margin-bottom: 4px; }
.back:hover { color: var(--red); }

/* ---------- Anmeldung / Registrierung ---------- */
.auth-crest { display: none; }
@media (max-width: 800px) {
  .auth-wrap { align-items: flex-start; padding-top: 24px; }
  .auth-crest { display: block; width: 84px; height: 84px; margin: -6px auto 10px; }
  .auth-card .auth-logo { margin: 0 auto 18px; }
  .auth-card h1 { text-align: left; }
}
.auth-card.auth-wide { max-width: 720px; }
.auth-links-big { flex-direction: column; gap: 6px; margin-top: 14px; }
.auth-links-big a { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; justify-content: center; }
.auth-links-big a:hover { background: var(--red-soft); text-decoration: none; }
.auth-foot { margin: 16px 0 0; text-align: center; font-size: 13px; }
.auth-foot a { color: var(--gray); text-decoration: underline; display: inline-block; padding: 10px; }
.form label.check > span { line-height: 1.35; }
.form label.check.consent { align-items: flex-start; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fafaf8; }
.form label.check.consent input { margin-top: 2px; flex: none; }
.form label.check.consent.is-invalid { border-color: var(--red); background: var(--red-soft); }
.info-box, .done-box { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; margin: 0 0 16px; font-size: 14px; line-height: 1.45; }
.info-box { background: var(--info-soft); color: #1f4b78; border: 1px solid #cfe0f2; }
.info-box > .ic, .done-box > .ic { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.info-box p, .done-box p { margin: 0; }
.info-box ul { margin: 0; padding-left: 18px; }
.done-box { background: var(--ok-soft); color: #1d5e3a; border: 1px solid #bfe2cd; }
.done-box strong { display: block; font: 700 16px var(--head); text-transform: uppercase; margin-bottom: 2px; }

/* Passwort anzeigen */
.pw-wrap { position: relative; display: block; margin-top: 5px; }
.form label > .pw-wrap > input { margin-top: 0; padding-right: 50px; }
.pw-eye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; color: var(--gray); cursor: pointer; display: grid; place-items: center; border-radius: 6px; }
.pw-eye:hover { color: var(--red); }
.pw-eye[aria-pressed="true"] { color: var(--red); }

/* Feld-Hinweise und Fehler */
.field-hint { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.field-error { display: block; font-weight: 600; font-size: 13px; color: var(--red); margin-top: 5px; }
.field-error::before { content: '! '; }
input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--red); background: #fffafa; box-shadow: 0 0 0 1px var(--red); }
.df-cats.is-invalid { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 10px; }

/* ---------- Buttons ---------- */
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--gray); }
.btn-quiet:hover { color: var(--red); background: var(--bg); }
.danger-card { border-color: #f0c9c4; background: #fffafa; }
.danger-card h2 .ic { color: var(--red); }
.plogout { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); text-align: right; }

/* ---------- Segment-/Reiter-Leisten einheitlich (wie Filter-Pills) ---------- */
.tabs { border-bottom: 0; gap: 8px; overflow-x: auto; flex-wrap: nowrap; padding: 2px 0 10px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; border: 1px solid #e2e2de; border-radius: 20px; background: #fff; margin: 0; padding: 7px 14px; font-size: 14px; }
.tabs a.active { background: var(--dark); border-color: var(--dark); color: #fff; }
.tabs a.active .badge { background: #fff; color: var(--dark); }
.badge.muted-badge { background: #9a9a96; }
.pills a .ic { width: 16px; height: 16px; }
/* Filter-Leiste am Handy: Verlauf rechts zeigt, dass man wischen kann */
@media (max-width: 720px) {
  .pills, .tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; }
}

/* ---------- Dashboard ---------- */
.lage { align-items: stretch; }
.lk { overflow: hidden; padding-top: 13px; justify-content: flex-start; }
.lk::before { left: 0; right: 0; top: 0; width: auto; height: 4px; border-radius: 0; }
.lk small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.dq > .dq-btn:only-child { grid-column: 1 / -1; }
.dsec-full { margin-top: 18px; }
.dsec-full .quick { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ea-banner small b.nowrap, .ea-banner small b { white-space: nowrap; }
.ea-banner strong.clamp2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ea-pulse { width: 10px; height: 10px; background: #fff; }
.ea-count { background: rgba(0,0,0,.22); color: #fff; font-weight: 600; }
.ea-chev { font-size: 22px; line-height: 1; }

/* ---------- Seitenkopf / Zurück ---------- */
.empty-line { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; margin: 0 0 14px; padding: 10px 14px; background: #fff; border: 1px dashed #dcdcd8; border-radius: 10px; }
.empty-line .ic { width: 18px; height: 18px; color: #b5b5b0; }

/* ---------- Kalender ---------- */
.cal-today.is-current { opacity: .55; }
.legend { gap: 6px 12px; margin-top: 10px; font-size: 11.5px; }
@media (max-width: 600px) { .legend { gap: 4px 10px; } .legend span { white-space: nowrap; } }
.cal-head { flex-wrap: wrap; }

/* ---------- Termin ---------- */
.ev-cards { align-items: stretch; }
.ev-cards > .card { display: flex; flex-direction: column; }
.ev-cards > .card > .btn { align-self: flex-start; margin-top: auto; }
.ev-cards .seg-status { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.ev-cards .seg-status span { padding: 12px 6px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.ev-actions { gap: 8px; }
.ev-actions .ev-del { margin-left: auto; }
@media (max-width: 600px) { .ev-actions .ev-del { margin-left: 0; width: 100%; padding-top: 8px; border-top: 1px solid var(--line); } }

/* Gruppen-Auswahl: Legende */
.gp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.gp-legend .chip span { padding: 1px 8px; font-size: 11px; cursor: default; }
.vis-fold { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px; }
.vis-fold summary { cursor: pointer; font-weight: 600; font-size: 14px; min-height: 28px; }
.vis-fold[open] summary { margin-bottom: 10px; }

/* ---------- Fahrzeuge ---------- */
.veh-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; align-items: flex-start; }
.veh-actions .veh-edit { margin: 0; }
.veh-actions .veh-edit[open] { flex-basis: 100%; order: 9; }
.veh-actions .btn { min-height: 40px; }
.veh-since { margin: 6px 0 0; }
@media (max-width: 600px) {
  .veh-card { padding: 14px; }
  .veh-head { gap: 10px; align-items: center; }
  .veh-head h3 { font-size: 20px; }
  .veh-img { width: 64px; height: 44px; }
  .veh-head .pill { font-size: 11px; }
  .veh-links { font-size: 12.5px; }
}

/* ---------- Fotos (Presse) ---------- */
.ph { position: relative; }
.ph-used { position: absolute; top: 6px; left: 6px; background: var(--ok); color: #fff; font: 700 11px var(--text); text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 10px; }
.ph figcaption { flex-wrap: wrap; }
.ph figcaption .ph-actions { gap: 6px; }
.ph figcaption .icon-btn { width: 40px; height: 40px; border: 1px solid var(--line); background: #fff; }
.ph figcaption .icon-btn.on { background: var(--ok); color: #fff; border-color: var(--ok); }
.ph figcaption .ph-del { color: var(--red); margin-left: 6px; }

/* ---------- Wissen ---------- */
.comp-grid { align-items: stretch; }
.comp { align-items: flex-start; height: 100%; }
.comp > .ic:last-child { align-self: center; }
.comp-empty { opacity: .72; background: #fafaf8; }
.ring-empty { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #ecece9; color: #a5a5a0; }
.ring-empty .ic { width: 20px; height: 20px; }
abbr.ff-rank { text-decoration: none; border-bottom: 1px dotted currentColor; cursor: help; }
.ff-legend { font-size: 12px; line-height: 1.6; margin-top: 4px; }

/* ---------- Mitglieder / Benutzer-Listen ---------- */
.mem-list, .usr-list { padding: 4px 0; }
.mem-row, .usr-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #f0efec; color: var(--dark); }
.mem-row:last-child, .usr-row:last-child { border-bottom: 0; }
.mem-row .avatar, .usr-row .avatar { width: 38px; height: 38px; font-size: 13px; flex: none; }
.mem-txt strong, .usr-row strong { display: block; font-size: 15px; }
.mem-txt small, .usr-row small { display: block; font-size: 12.5px; color: var(--gray); overflow: hidden; text-overflow: ellipsis; }
.mem-txt small.muted, .usr-row small.muted { color: var(--muted); }
.mem-txt .pill { font-size: 11px; padding: 1px 7px; }
.mem-act { display: flex; gap: 4px; flex: none; }
.mem-act .icon-btn { color: var(--red); border: 1px solid var(--line); border-radius: 50%; width: 44px; height: 44px; }
.mem-count { margin: -6px 0 8px; }
.usr-row:hover { background: #fafaf8; text-decoration: none; }
.usr-row.is-new { background: #fffbf2; }
.usr-row > .ic:last-child { color: var(--muted); flex: none; }
.usr-st { flex: none; }
@media (max-width: 600px) { .usr-st .pill { font-size: 11px; } .usr-row, .mem-row { padding: 10px 12px; gap: 10px; } }

/* ---------- Verwaltung ---------- */
.admin-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.admin-tile { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--dark); min-height: 72px; }
.admin-tile:hover { text-decoration: none; border-color: #ccc; }
.admin-tile strong { display: block; font: 700 17px var(--head); text-transform: uppercase; letter-spacing: .02em; }
.admin-tile small { display: block; color: var(--muted); font-size: 13px; }
.admin-tile > .ic { color: var(--muted); }

/* Rechte-Matrix: PC mit festem Kopf + Zeilen-Hervorhebung, Handy als Liste einer Gruppe */
.pm-pick { display: none; }
.pm-scroll { max-height: 72vh; overflow: auto; }
.perm-matrix thead th { position: sticky; top: 0; background: #fff; z-index: 2; box-shadow: 0 1px 0 var(--line); }
.perm-matrix tbody td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
.perm-matrix thead th:first-child { left: 0; z-index: 3; }
.perm-matrix tbody tr:not(.sec):hover td { background: #fbf3f2; }
.perm-matrix tr.sec td { position: static; }
.mcol-off { display: none !important; }
@media (max-width: 720px) {
  .pm-pick { display: block; font-weight: 600; font-size: 13px; color: var(--gray); margin-bottom: 12px; }
  .pm-pick select { margin-top: 5px; font-size: 16px; }
  .pm-scroll { max-height: none; overflow: visible; }
  .perm-matrix.one-col { width: 100%; }
  .perm-matrix.one-col thead { display: none; }
  .perm-matrix.one-col td:first-child { min-width: 0; width: auto; position: static; }
  .perm-matrix.one-col td.c { width: 56px; }
  .perm-matrix.one-col td.c input { width: 24px; height: 24px; }
  .perm-matrix.one-col tbody tr:not(.sec) td { padding: 10px 8px; }
}

/* Dokument-Kategorien */
.cat-edit { display: grid; gap: 10px; }
.cat-row { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr 90px 110px auto; gap: 10px; align-items: end; margin: 0; padding: 12px 14px; }
.cat-row label { margin: 0; font-weight: 600; font-size: 12px; color: var(--gray); }
.cat-row input, .cat-row select { margin-top: 4px; }
.cat-headrow { background: none; border: 0; box-shadow: none; padding: 0 14px; font: 700 12px var(--text); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cat-row .cat-l { display: none; }
.cat-n { align-self: center; }
.cat-btns { display: flex; gap: 6px; align-items: center; }
.cat-newlbl { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.cat-new { border-style: dashed; }
@media (max-width: 900px) {
  .cat-headrow { display: none; }
  .cat-row { grid-template-columns: 1fr 1fr; }
  .cat-row .cat-l { display: block; }
  .cat-row label:first-of-type, .cat-row label:nth-of-type(3) { grid-column: 1 / -1; }
  .cat-btns { justify-content: flex-end; }
}

/* Feuerwehr bearbeiten: Kontakte */
.ff-edit { gap: 0; padding: 8px 14px; }
.ff-edit .ff-row { grid-template-columns: 1fr 1.3fr 76px 1.2fr 1fr 1.2fr 70px 40px auto; gap: 6px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0efec; }
.ff-edit .ff-row:last-child { border-bottom: 0; }
.ff-edit .ff-f { margin: 0; }
.ff-edit .ff-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ff-headrow { font: 700 11.5px var(--text); text-transform: uppercase; color: var(--muted); letter-spacing: .03em; padding-bottom: 4px !important; }
.ff-edit .ff-photo-up { width: 40px; height: 40px; }
.ff-btns { display: flex; gap: 4px; align-items: center; }
.ff-newlbl { display: none; }
@media (max-width: 900px) {
  .ff-edit { background: none; border: 0; box-shadow: none; padding: 0; display: grid; gap: 12px; }
  .ff-headrow { display: none !important; }
  .ff-edit .ff-row { grid-template-columns: 1fr 1fr; gap: 10px; background: #fff; border: 1px solid #ebebe8; border-radius: 12px; padding: 14px; }
  .ff-edit .ff-row.ff-new { border-style: dashed; }
  .ff-edit .ff-row input { padding: 10px 12px !important; font-size: 15px; }
  .ff-edit .ff-f { display: block; font-weight: 600; font-size: 12px; color: var(--gray); }
  .ff-edit .ff-l { position: static; width: auto; height: auto; clip: auto; display: block; margin-bottom: 4px; }
  .ff-edit .ff-f:not(.ff-s) { grid-column: 1 / -1; }
  .ff-edit .ff-photo-up { width: auto; height: 44px; grid-column: 1 / -1; display: flex !important; gap: 8px; justify-content: center; }
  .ff-edit .ff-photo-up .ff-l { display: inline; margin: 0; }
  .ff-btns { grid-column: 1 / -1; justify-content: space-between; }
  .ff-newlbl { display: flex; align-items: center; gap: 6px; grid-column: 1 / -1; }
}

/* Protokoll */
.log-list { padding: 4px 0; }
.log-row { display: flex; gap: 14px; padding: 10px 16px; border-bottom: 1px solid #f0efec; font-size: 14px; align-items: baseline; }
.log-row:last-child { border-bottom: 0; }
.log-when { flex: none; width: 128px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.log-row strong { font-weight: 700; }
.log-det { color: var(--gray); overflow-wrap: anywhere; }
.log-row small { display: block; font-size: 12px; margin-top: 2px; }
.log-ip { font-size: 11px; opacity: .8; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0; }
@media (max-width: 600px) { .log-row { flex-direction: column; gap: 2px; padding: 10px 12px; } .log-when { width: auto; } }

/* Einstellungen */
.set-nav { margin-bottom: 4px; }
.set-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.set-stat { margin: 0; padding: 12px 14px; }
.set-stat b { display: block; font: 700 26px var(--head); }
.set-stat small { color: var(--muted); font-size: 12.5px; }
.set-tech summary, .help-fold summary, .new-fold summary, .bz-manage summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.set-tech[open] summary { margin-bottom: 12px; }
.set-tech .pdata { margin-bottom: 12px; }
.pdata { align-items: baseline; }
.pdata dt { font-size: 13px; }

/* Ausklappbare Hilfe & „Neu“-Formulare */
.help-fold { background: var(--info-soft); border: 1px solid #cfe0f2; border-radius: 10px; padding: 8px 14px; margin: 0 0 14px; font-size: 14px; color: #1f4b78; }
.help-fold summary .ic { width: 18px; height: 18px; }
.help-fold[open] summary { margin-bottom: 6px; }
.help-fold p, .help-fold ol { margin: 0 0 6px; }
.help-fold ol { padding-left: 20px; }
.new-fold { border-style: dashed; }
.new-fold summary { color: var(--red); }
.new-fold[open] summary { margin-bottom: 12px; }
.acc.acc-new > summary strong { color: var(--red); }
.bz-manage { margin-top: 14px; }
.bz-manage[open] summary { margin-bottom: 10px; }
.bz-manage .bz-year { margin: 0; }
.bz-nolink { color: var(--muted); font-size: 13px; cursor: help; }

/* Atemschutz: Intervall-Tabelle */
.rule-table { width: 100%; max-width: 360px; margin-bottom: 8px; }
.rule-table td { padding: 4px 6px 4px 0; }
.rule-table input { padding: 8px 10px; }
.rule-older { display: block; padding: 8px 10px; color: var(--gray); font-weight: 600; }
.rule-new input { border-style: dashed; }

/* Import */
.steps { padding-left: 22px; margin: 0 0 14px; }
.steps li { margin-bottom: 10px; line-height: 1.5; }
.imp-dl { margin-top: 6px; }

/* Leistung: Alle / Keine */
.check-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.check-tools b { font-size: 13px; margin-right: auto; }

/* Einsatz: Suchfeld wie andere Felder, Rückmeldungen mit Symbolen */
.el-search { border: 1px solid #cfcfcc; border-radius: var(--radius); }
.el-search:focus-within { border-color: var(--red); outline: 2px solid var(--red); outline-offset: -1px; }
.alarm-counts span { display: inline-flex; align-items: center; gap: 4px; }
.alarm-counts .ic { width: 16px; height: 16px; }
.afn-legend { font-size: 12px; color: var(--muted); margin: 8px 0 0; line-height: 1.6; }
.afn-legend b { color: var(--dark); }

/* Datenschutz-Text */
.prose h2 { font: 700 17px var(--head); text-transform: uppercase; margin: 20px 0 6px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin: 0 0 10px; line-height: 1.6; }
.prose ul { padding-left: 20px; }
.dmsgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; margin-bottom: 18px; align-items: start; }
.dmsgs > .dmsg { margin: 0; }
.veh-head > .pill { flex: none; position: relative; z-index: 1; }
.veh-head .grow { min-width: 0; }
.veh-head .grow p { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 600px) {
  .veh-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
  .veh-actions .btn, .veh-actions .veh-edit > summary { width: 100%; justify-content: center; padding: 8px 4px; font-size: 12px; gap: 4px; }
  .veh-actions .btn .ic { width: 15px; height: 15px; }
  .veh-actions .veh-edit[open] { grid-column: 1 / -1; order: 9; }
}