:root {
  --bg: #0b0f14;
  --bg-elev: #121822;
  --bg-elev2: #1a2432;
  --line: #26313f;
  --line-soft: #1c2530;
  --txt: #eaf0f7;
  --txt-dim: #93a2b5;
  --txt-faint: #5f6f82;
  --accent: #e23636;      /* Feuerwehr-Rot */
  --accent-ink: #fff;
  --blue: #3b82f6;
  --amber: #f59e0b;
  --green: #22c55e;
  --red: #ef4444;
  --gray: #64748b;
  --radius: 14px;
  --tap: 48px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  font-size: 16px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}
#app { display: flex; flex-direction: column; min-height: 100%; }

/* ---------- generic ---------- */
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select {
  font: inherit; color: var(--txt); background: var(--bg-elev2);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; width: 100%;
  min-height: var(--tap); outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--blue); }
label { display: block; font-size: .82rem; color: var(--txt-dim); margin: 14px 0 6px; font-weight: 600; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 18px; border-radius: 12px; font-weight: 700;
  background: var(--bg-elev2); color: var(--txt); border: 1px solid var(--line);
  transition: transform .05s ease, filter .1s ease;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.block { display: flex; width: 100%; }
.btn.big { min-height: 56px; font-size: 1.05rem; }
.btn.ghost { background: transparent; }
.muted { color: var(--txt-dim); }
.faint { color: var(--txt-faint); }
.center { text-align: center; }
.row { display: flex; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.pill { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:.02em; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  padding: calc(var(--safe-t) + 10px) 14px 10px;
  background: rgba(11,15,20,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 12px;
}
.topbar .back { width: 40px; height: 40px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-left:-8px; }
.topbar h1 { font-size: 1.02rem; margin: 0; line-height: 1.15; }
.topbar .sub { font-size: .74rem; color: var(--txt-dim); }
.brand { display:flex; align-items:center; gap:10px; }
.brand .logo { width:34px; height:34px; border-radius:9px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; box-shadow:0 0 0 3px rgba(226,54,54,.18); }

.content { flex: 1; padding: 14px; padding-bottom: calc(96px + var(--safe-b)); max-width: 760px; width:100%; margin:0 auto; }

/* connection dot */
.conn { width:9px; height:9px; border-radius:50%; background:var(--gray); flex:0 0 auto; }
.conn.on { background: var(--green); box-shadow:0 0 8px var(--green); }
.conn.off { background: var(--amber); }

/* ---------- cards ---------- */
.card { background: var(--bg-elev); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.einsatz-card { display:block; text-align:left; width:100%; }
.einsatz-card h3 { margin:0 0 4px; font-size:1.05rem; }
.einsatz-card .meta { font-size:.8rem; color:var(--txt-dim); display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- onboarding / hero ---------- */
.hero { text-align:center; padding: 8vh 0 4vh; }
.hero .logo-xl { width:76px; height:76px; border-radius:20px; background:var(--accent); margin:0 auto 18px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:2rem; color:#fff; box-shadow:0 12px 40px rgba(226,54,54,.35); }
.hero h1 { font-size:1.7rem; margin:0 0 6px; letter-spacing:-.01em; }
.hero p { color:var(--txt-dim); margin:0 auto; max-width:32ch; }

/* ---------- tabs ---------- */
.tabbar {
  position: fixed; left:0; right:0; bottom:0; z-index: 30;
  display:flex; background: rgba(14,19,26,.96); backdrop-filter: blur(10px);
  border-top:1px solid var(--line); padding-bottom: var(--safe-b);
}
.tabbar button { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 0 8px; color:var(--txt-faint); font-size:.68rem; font-weight:700; }
.tabbar button .ic { font-size:1.35rem; line-height:1; }
.tabbar button.active { color:var(--txt); }
.tabbar button.active .ic { filter: drop-shadow(0 0 6px rgba(226,54,54,.5)); }
.tabbar .badge { position:absolute; transform:translate(14px,-4px); background:var(--accent); color:#fff; font-size:.6rem; min-width:16px; height:16px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; }

/* ---------- board (Lage) ---------- */
.kindbar { display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; -webkit-overflow-scrolling:touch; }
.kindbar button { flex:0 0 auto; padding:8px 14px; border-radius:999px; background:var(--bg-elev2); border:1px solid var(--line); font-size:.82rem; font-weight:700; color:var(--txt-dim); }
.kindbar button.active { color:#fff; }
.kindbar button[data-k="gefahr"].active { background:var(--red); border-color:transparent; }
.kindbar button[data-k="anforderung"].active { background:var(--amber); border-color:transparent; color:#1a1200; }
.kindbar button[data-k="lage"].active { background:var(--blue); border-color:transparent; }
.kindbar button[data-k="erledigt"].active { background:var(--green); border-color:transparent; color:#04210f; }
.kindbar button[data-k="all"].active, .kindbar button[data-k="info"].active { background:var(--gray); border-color:transparent; }

.entry { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.entry .stripe { flex:0 0 4px; border-radius:4px; background:var(--gray); }
.entry.k-gefahr .stripe { background:var(--red); }
.entry.k-anforderung .stripe { background:var(--amber); }
.entry.k-lage .stripe { background:var(--blue); }
.entry.k-erledigt .stripe { background:var(--green); }
.entry.k-info .stripe { background:var(--gray); }
.entry .body { flex:1; min-width:0; }
.entry .head { display:flex; align-items:center; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.entry .who { font-weight:700; font-size:.86rem; }
.entry .time { font-size:.72rem; color:var(--txt-faint); margin-left:auto; }
.entry .text { font-size:.98rem; line-height:1.4; white-space:pre-wrap; word-break:break-word; }
.entry.prio .text { font-weight:600; }
.tag { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:6px; }
.tag.gefahr { background:rgba(239,68,68,.18); color:#ff9a9a; }
.tag.anforderung { background:rgba(245,158,11,.18); color:#ffcf7a; }
.tag.lage { background:rgba(59,130,246,.18); color:#a9c8ff; }
.tag.erledigt { background:rgba(34,197,94,.18); color:#93efb8; }
.tag.info { background:rgba(100,116,139,.2); color:#c3cede; }
.prio-flag { color:var(--red); font-weight:900; }

/* ---------- chat ---------- */
.chanbar { display:flex; gap:8px; overflow-x:auto; padding-bottom:12px; }
.chanbar button { flex:0 0 auto; padding:8px 14px; border-radius:10px; background:var(--bg-elev2); border:1px solid var(--line); font-size:.85rem; font-weight:700; color:var(--txt-dim); }
.chanbar button.active { background:var(--accent); border-color:transparent; color:#fff; }
.chanbar button.add { color:var(--txt-faint); }
.bubble { max-width:82%; margin:8px 0; padding:9px 12px; border-radius:14px; background:var(--bg-elev); border:1px solid var(--line-soft); }
.bubble .who { font-size:.72rem; color:var(--blue); font-weight:800; margin-bottom:2px; }
.bubble .text { font-size:.96rem; line-height:1.35; white-space:pre-wrap; word-break:break-word; }
.bubble .time { font-size:.66rem; color:var(--txt-faint); text-align:right; margin-top:2px; }
.bubble.me { margin-left:auto; background:#173a2a; border-color:#1f5138; }
.bubble.me .who { color:#8ff0bd; }
.bubble.pending { opacity:.55; }

/* ---------- Kräfte ---------- */
.member { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.avatar { width:40px; height:40px; border-radius:50%; background:var(--bg-elev2); display:flex; align-items:center; justify-content:center; font-weight:800; flex:0 0 auto; }
.member .st { margin-left:auto; }
.st-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.st-einsatzbereit { background:var(--green); }
.st-am-einsatz { background:var(--amber); }
.st-nicht-bereit { background:var(--red); }
.st-pause { background:var(--gray); }

/* ---------- composer ---------- */
.composer {
  position: fixed; left:0; right:0; bottom:0; z-index:40;
  padding: 10px 12px calc(10px + var(--safe-b));
  background: rgba(12,17,23,.97); backdrop-filter: blur(10px); border-top:1px solid var(--line);
}
.composer .inrow { display:flex; gap:8px; align-items:flex-end; max-width:760px; margin:0 auto; }
.composer textarea { resize:none; max-height:120px; min-height:var(--tap); padding-top:13px; }
.composer .send { width:var(--tap); height:var(--tap); flex:0 0 auto; border-radius:12px; background:var(--accent); color:#fff; font-size:1.3rem; display:flex; align-items:center; justify-content:center; }
.composer .kinds { display:flex; gap:6px; overflow-x:auto; margin-bottom:8px; max-width:760px; margin-left:auto; margin-right:auto; }
.composer .kinds button { flex:0 0 auto; font-size:.75rem; font-weight:800; padding:6px 11px; border-radius:8px; background:var(--bg-elev2); border:1px solid var(--line); color:var(--txt-dim); }
.composer .kinds button.on { color:#fff; }
.composer .kinds button[data-k="gefahr"].on{background:var(--red);border-color:transparent}
.composer .kinds button[data-k="anforderung"].on{background:var(--amber);border-color:transparent;color:#1a1200}
.composer .kinds button[data-k="lage"].on{background:var(--blue);border-color:transparent}
.composer .kinds button[data-k="erledigt"].on{background:var(--green);border-color:transparent;color:#04210f}
.composer .kinds button[data-k="info"].on{background:var(--gray);border-color:transparent}

/* ---------- modal / sheet ---------- */
.sheet-bg { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:50; display:flex; align-items:flex-end; }
.sheet { background:var(--bg-elev); width:100%; max-width:760px; margin:0 auto; border-radius:20px 20px 0 0; padding:20px 18px calc(24px + var(--safe-b)); border:1px solid var(--line); border-bottom:none; }
.sheet h2 { margin:0 0 4px; font-size:1.25rem; }
.sheet .grab { width:40px; height:4px; border-radius:3px; background:var(--line); margin:0 auto 14px; }

/* ---------- misc ---------- */
.empty { text-align:center; color:var(--txt-faint); padding:48px 20px; }
.empty .big { font-size:2.4rem; margin-bottom:10px; }
.codebox { font-size:1.6rem; font-weight:900; letter-spacing:.28em; text-align:center; background:var(--bg-elev2); border:1px dashed var(--line); border-radius:12px; padding:14px; margin:6px 0; }
.toast { position:fixed; left:50%; bottom:calc(90px + var(--safe-b)); transform:translateX(-50%) translateY(20px); background:#000d; color:#fff; padding:11px 18px; border-radius:12px; font-size:.9rem; font-weight:600; opacity:0; pointer-events:none; transition:.25s; z-index:100; border:1px solid var(--line); max-width:90vw; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.divider { text-align:center; color:var(--txt-faint); font-size:.8rem; margin:18px 0; position:relative; }
.spinner { width:22px; height:22px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin:40px auto; }
@keyframes spin { to { transform:rotate(360deg); } }
.offline-banner { background:var(--amber); color:#1a1200; text-align:center; font-size:.8rem; font-weight:700; padding:6px; }