@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ---------------------------------------------------------------- Tokens */
/* Farbquelle ist seit September 2026 das selbst gedruckte Firmenschild in
   Matzendorf: Anthrazit, Neongrün, Signalorange. Navy, Blau und Rot des Logos
   bleiben definiert, gehören aber nur noch zum Adlerzeichen und zu Infomeldungen —
   nie auf Flächen oder Schaltflächen. Werte aus dem Design-System, tokens/. */
:root {
  /* Anthrazit — die Rasterplatte */
  --anthrazit-950:#111418; --anthrazit-900:#1A1F24; --anthrazit-800:#262C32;
  --anthrazit-700:#343B43; --anthrazit-600:#464E57; --anthrazit-500:#5C6570;
  /* Neongrün — Wortmarke und Telefonnummer */
  --neon-800:#2F5A0A; --neon-700:#3F7A0C; --neon-600:#5EAE17; --neon-500:#8CE33C;
  --neon-400:#A6F563; --neon-300:#C4FA96; --neon-200:#DDFCC4; --neon-100:#F0FEE6;
  /* Signalorange — „GmbH“ */
  --orange-800:#8A2A0E; --orange-700:#B83C16; --orange-600:#D9481A; --orange-500:#F46944;
  --orange-400:#FF8C6B; --orange-100:#FFECE5;

  --white:#FFFFFF;
  --grey-50:#F5F6F7; --grey-100:#ECEEF0; --grey-200:#DCE0E3; --grey-300:#C2C8CD; --grey-400:#99A1A8;
  --grey-500:#6E767E; --grey-600:#4F565D; --grey-700:#3A4046; --grey-800:#262C32; --grey-900:#171B1F;
  --amber-600:#A86200; --amber-100:#FFF3DC;

  /* Logofarben: Adlerzeichen und Infomeldungen */
  --navy-900:#101A33; --navy-700:#2A3A63;
  --blue-800:#12386B; --blue-600:#1F5AA0; --blue-500:#0070C0; --blue-100:#E4F2FB;
  --red-600:#B81018;

  /* Rückwärtskompatibel: Fundgrün ist jetzt Neongrün */
  --lime-700:var(--neon-700); --lime-500:var(--neon-500); --lime-100:var(--neon-100);

  --brand-primary:var(--anthrazit-800); --brand-accent:var(--neon-500); --brand-signal:var(--orange-600);

  --text-strong:var(--anthrazit-900); --text-body:var(--grey-700); --text-muted:var(--grey-500);
  --text-inverse:var(--white); --text-link:var(--neon-700); --text-link-hover:var(--anthrazit-800);
  --text-on-dark-accent:var(--neon-400); --text-on-dark-signal:var(--orange-500);

  --surface-page:var(--white); --surface-subtle:var(--grey-50); --surface-card:var(--white);
  --surface-sunken:var(--grey-100); --surface-inverse:var(--anthrazit-800);
  --surface-accent-soft:var(--neon-100); --surface-signal-soft:var(--orange-100);

  --border-subtle:var(--grey-200); --border-default:var(--grey-300);
  --border-strong:var(--anthrazit-800); --border-focus:var(--neon-600);

  --action-primary-bg:var(--anthrazit-800); --action-primary-bg-hover:var(--anthrazit-900);
  --action-accent-bg:var(--neon-500); --action-accent-bg-hover:var(--neon-600);
  --action-accent-fg:var(--anthrazit-900);
  --action-signal-bg:var(--orange-600); --action-signal-bg-hover:var(--orange-700);

  --status-success-fg:var(--neon-700); --status-success-bg:var(--neon-100);
  --status-warning-fg:var(--amber-600); --status-warning-bg:var(--amber-100);
  --status-danger-fg:var(--orange-700); --status-danger-bg:var(--orange-100);
  --status-info-fg:var(--blue-600);     --status-info-bg:var(--blue-100);

  --gradient-neon:linear-gradient(135deg,var(--neon-600) 0%,var(--neon-400) 100%);
  --gradient-rim:var(--gradient-neon);
  --gradient-deep:linear-gradient(180deg,var(--anthrazit-900) 0%,var(--anthrazit-800) 100%);
  /* Rasterplatte: das 14px-Gitter des Schilds, nur über Anthrazit */
  --pattern-raster:linear-gradient(rgba(255,255,255,.06) 2px,transparent 2px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 2px,transparent 2px);
  --pattern-raster-size:14px 14px;

  --shadow-hairline:0 0 0 1px var(--border-subtle);
  --shadow-1:0 1px 2px rgba(26,31,36,.06),0 0 0 1px rgba(26,31,36,.05);
  --shadow-2:0 2px 6px rgba(26,31,36,.08),0 0 0 1px rgba(26,31,36,.05);
  --shadow-3:0 10px 24px -8px rgba(26,31,36,.18),0 0 0 1px rgba(26,31,36,.05);
  --shadow-4:0 24px 56px -16px rgba(26,31,36,.28);
  --shadow-focus:0 0 0 3px rgba(140,227,60,.28);
  --shadow-sunken:inset 0 1px 2px rgba(26,31,36,.07);
  --overlay-scrim:rgba(17,20,24,.55);
  --blur-glass:saturate(140%) blur(14px);

  --ease-standard:cubic-bezier(.2,.6,.2,1); --ease:var(--ease-standard);
  --ease-out:cubic-bezier(0,.55,.25,1); --ease-in:cubic-bezier(.5,0,1,.5);
  --dur-instant:80ms; --dur-fast:140ms; --dur-base:200ms; --dur-slow:320ms; --dur-slower:520ms;
  --press-scale:0.985;

  --radius-none:0; --radius-xs:2px; --radius-sm:4px; --radius-md:6px; --radius-lg:10px;
  --radius-xl:16px; --radius-pill:999px;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px; --space-11:80px; --space-12:112px;
  --container-narrow:720px; --container-default:1100px; --container-wide:1320px;
  --control-h-sm:32px; --control-h-md:40px; --control-h-lg:48px;

  --font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;
  --fs-display-1:64px; --fs-display-2:48px; --fs-h1:36px; --fs-h2:28px; --fs-h3:22px; --fs-h4:18px;
  --fs-body-lg:17px; --fs-body:15px; --fs-body-sm:13px; --fs-caption:12px; --fs-micro:11px;
  --lh-tight:1.05; --lh-heading:1.18; --lh-snug:1.35; --lh-body:1.6; --lh-loose:1.75;
  --ls-display:-0.022em; --ls-heading:-0.012em; --ls-label:0.02em; --ls-eyebrow:0.14em;

  /* Portalmasse dieser App */
  --sidebar-w:232px; --header-h:68px;
}

/* ------------------------------------------------------------------ Basis */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--font-body); font-size:15px; line-height:1.6;
  color:var(--text-body); background:var(--surface-page); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5 { font-family:var(--font-display); color:var(--text-strong); letter-spacing:-0.012em; line-height:1.18; font-weight:700; margin:0; }
h1 { font-size:28px; } h2 { font-size:18px; } h3 { font-size:16px; }
p { margin:0; }
a { color:var(--text-link); text-decoration:none; border-bottom:1px solid rgba(63,122,12,.3); transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
a:hover { color:var(--text-link-hover); border-bottom-color:currentColor; }
a.plain, a.btn, a.nav-item, a.card-link, a.row { border-bottom:none; }
img { max-width:100%; display:block; }
::selection { background:var(--neon-200); color:var(--anthrazit-900); }
:focus-visible { outline:none; box-shadow:var(--shadow-focus); border-radius:var(--radius-sm); }

.mono { font-family:var(--font-mono); }
.eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--text-muted); }
.muted { color:var(--text-muted); }
.small { font-size:13px; }
.tiny { font-size:12px; }
.strong { color:var(--anthrazit-900); font-weight:600; }
.danger { color:var(--orange-600); }
.nowrap { white-space:nowrap; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stack { display:flex; flex-direction:column; gap:12px; }
.stack-lg { display:flex; flex-direction:column; gap:24px; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.prose { max-width:68ch; white-space:pre-wrap; }
.hidden { display:none !important; }
.nur-schmal { display:none; }

/* Das Attribut hidden ist nur eine Vorgabe mit schwacher Gewichtung. Sobald ein
   Element per Klasse display:flex bekommt, verliert es — deshalb hier ausdrücklich. */
[hidden] { display:none !important; }

/* ------------------------------------------------------------------ Portal */
.sidebar {
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); background:var(--gradient-deep);
  display:flex; flex-direction:column; z-index:20;
}
.sidebar::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--pattern-raster);
  background-size:var(--pattern-raster-size);
}
.sidebar > * { position:relative; }
.sidebar-brand { height:var(--header-h); display:flex; align-items:center; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.1); }
.sidebar-nav { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:4px; }
.sidebar-foot { padding:16px; border-top:1px solid rgba(255,255,255,.1); font-size:11px; color:var(--grey-400); line-height:1.6; }

.nav-group {
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.35); padding:14px 12px 4px; margin:0;
}
.nav-item {
  display:flex; align-items:center; gap:10px; height:38px; padding:0 12px; border-radius:var(--radius-md);
  font-size:14px; font-weight:500; color:var(--grey-300);
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav-item.active { background:var(--neon-500); color:var(--action-accent-fg); }
.nav-item svg { width:18px; height:18px; flex:none; }

.topbar {
  position:sticky; top:0; z-index:10; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 32px;
  border-bottom:1px solid var(--border-subtle);
  background:rgba(255,255,255,.88); backdrop-filter:var(--blur-glass);
}
.topbar-title { display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--anthrazit-900); }
.topbar-title svg { width:18px; height:18px; color:var(--neon-700); }

.shell { padding-left:var(--sidebar-w); min-height:100vh; background:var(--grey-50); }
.content { padding:32px; max-width:1320px; }

.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.page-head p.lead { color:var(--text-muted); font-size:14px; max-width:68ch; margin-top:4px; }
.page-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ------------------------------------------------------------------- Karten */
.card { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-1); }
.card-pad { padding:24px; }
.card-accent { border-top:3px solid var(--neon-500); }
.card-signal { border-top:3px solid var(--orange-600); }
.card-link { display:block; overflow:hidden; transition:box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.card-link:hover { box-shadow:var(--shadow-3); transform:translateY(-2px); }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px 24px; border-bottom:1px solid var(--border-subtle); }
.card-foot { padding:10px 16px; background:var(--grey-50); border-radius:0 0 var(--radius-lg) var(--radius-lg); font-size:12px; color:var(--text-muted); }

.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid-4 { grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); }
.grid-oben { align-items:start; }
.split { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }
@media (max-width:1100px) { .split { grid-template-columns:minmax(0,1fr); } .nur-schmal { display:block; } }

.stat { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-1); border-top:3px solid var(--anthrazit-800); padding:20px; }
a.stat { display:block; border-bottom:0; color:inherit; transition:box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
a.stat:hover { box-shadow:var(--shadow-3); transform:translateY(-2px); }
a.stat .hint { display:flex; align-items:flex-end; gap:6px; }
a.stat .hint svg { margin-left:auto; flex:none; margin-bottom:2px; }
a.stat:hover .hint { color:var(--text-link); }
.stat.accent { border-top-color:var(--neon-500); }
.stat.danger { border-top-color:var(--orange-600); }
.stat.warning { border-top-color:var(--amber-600); }
.stat .value { font-family:var(--font-mono); font-size:32px; font-weight:600; line-height:1; color:var(--anthrazit-900); margin-top:12px; }
.stat.danger .value { color:var(--orange-600); }
.stat.warning .value { color:var(--amber-600); }
.stat .hint { font-size:12px; color:var(--text-muted); margin-top:8px; }

/* ------------------------------------------------- Aufklappbare Karte */
/* Für die Seitenleiste: zugeklappt zeigt sie nur Titel und Anzahl, aufgeklappt
   den Inhalt samt Eingabe. Native details/summary, damit es ohne Skript geht. */
.klapp { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-1); overflow:hidden; }
.klapp > summary {
  display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; list-style:none;
  transition:background-color var(--dur-fast) var(--ease);
}
.klapp > summary::-webkit-details-marker { display:none; }
.klapp > summary:hover { background:var(--grey-50); }
.klapp > summary:focus-visible { outline:none; box-shadow:var(--shadow-focus); }
.klapp > summary .titel { flex:1; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text-strong); }
.klapp > summary .zahl {
  flex:none; min-width:22px; height:20px; padding:0 7px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--grey-100); color:var(--grey-600); font-family:var(--font-mono); font-size:11px; font-weight:600;
}
.klapp > summary .zahl.voll { background:var(--neon-100); color:var(--neon-700); }
.klapp > summary .pfeil { flex:none; color:var(--grey-400); transition:transform var(--dur-base) var(--ease); }
.klapp[open] > summary .pfeil { transform:rotate(90deg); }
.klapp[open] > summary { border-bottom:1px solid var(--border-subtle); }
.klapp-inhalt { padding:16px; display:flex; flex-direction:column; gap:12px; }
.klapp-inhalt .gallery { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; }
.klapp-inhalt .inline-form { flex-direction:column; align-items:stretch; }
.klapp-inhalt .inline-form .field,
.klapp-inhalt .inline-form .btn { width:100%; flex:none; min-width:0; }

/* Kompakte Zeile im aufgeklappten Feld */
.klapp-zeile { display:flex; align-items:flex-start; gap:8px; padding:8px 0; border-top:1px solid var(--border-subtle); }
.klapp-zeile:first-child { border-top:0; padding-top:0; }
.klapp-zeile .wert { flex:1; min-width:0; }
.klapp-zeile .anzahl { flex:none; font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--navy-900); }

/* ------------------------------------------------------------------ Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px;
  border:0; border-radius:var(--radius-md); font-family:var(--font-body); font-size:14px; font-weight:600;
  white-space:nowrap; cursor:pointer; text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn svg { width:16px; height:16px; flex:none; }
.btn:active:not(:disabled) { transform:scale(.985); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-sm { height:32px; padding:0 12px; font-size:13px; }
.btn-sm svg { width:15px; height:15px; }
.btn-lg { height:48px; padding:0 22px; font-size:15px; }
.btn-primary { background:var(--anthrazit-800); color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--anthrazit-900); color:#fff; }
.btn-accent { background:var(--action-accent-bg); color:var(--action-accent-fg); }
.btn-accent:hover:not(:disabled) { background:var(--action-accent-bg-hover); color:var(--action-accent-fg); }
.btn-signal { background:var(--orange-600); color:#fff; }
.btn-signal:hover:not(:disabled) { background:var(--orange-700); color:#fff; }
.btn-ghost { background:#fff; color:var(--anthrazit-900); box-shadow:inset 0 0 0 1px var(--border-default); }
.btn-ghost:hover:not(:disabled) { background:var(--grey-50); box-shadow:inset 0 0 0 1px var(--grey-400); color:var(--anthrazit-900); }
.btn-quiet { background:transparent; color:var(--grey-600); }
.btn-quiet:hover:not(:disabled) { background:var(--grey-100); color:var(--anthrazit-900); }
.btn-quiet.danger:hover:not(:disabled) { background:var(--orange-100); color:var(--orange-700); }
.btn-back { margin-left:-12px; margin-bottom:12px; }

/* ----------------------------------------------------------------- Formulare */
.form-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.field { display:block; }
.field > .label { display:block; font-size:12px; font-weight:600; color:var(--grey-600); margin-bottom:6px; }
.field .req { color:var(--orange-600); }
.field .hint { display:block; font-size:12px; color:var(--text-muted); margin-top:6px; }
.field .error { display:block; font-size:12px; color:var(--orange-600); margin-top:6px; }
.input, select.input, textarea.input {
  width:100%; height:40px; padding:0 12px; border-radius:var(--radius-md);
  border:1px solid var(--border-default); background:#fff;
  font-family:var(--font-body); font-size:14px; color:var(--anthrazit-900);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
textarea.input { height:auto; padding:10px 12px; line-height:1.6; resize:vertical; }
.input:focus { outline:none; border-color:var(--border-focus); box-shadow:var(--shadow-focus); }
.input.is-invalid { border-color:var(--orange-600); }
.input::placeholder { color:var(--grey-400); }
.input-mono { font-family:var(--font-mono); }
select.input { cursor:pointer; }
.form-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:24px; padding-top:20px; border-top:1px solid var(--border-subtle); }
.inline-form { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }

/* ------------------------------------------------------------------- Badges */
.badge { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:var(--radius-sm); font-size:12px; font-weight:600; white-space:nowrap; }
.badge-ueberfaellig { background:var(--orange-100); color:var(--orange-600); }
.badge-faellig { background:var(--amber-100); color:var(--amber-600); }
.badge-ok { background:var(--status-success-bg); color:var(--status-success-fg); }
.badge-unbekannt { background:var(--grey-100); color:var(--grey-600); }
.badge-ohne { background:var(--grey-100); color:var(--grey-500); }
.badge-wartung { background:var(--grey-100); color:var(--grey-700); }
.badge-ausfall { background:var(--orange-100); color:var(--orange-600); }
.badge-reparatur { background:var(--status-info-bg); color:var(--status-info-fg); }
.tag { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:500; background:var(--grey-100); color:var(--grey-700); }
.tag svg { width:13px; height:13px; }

/* ------------------------------------------------------------------ Tabellen */
.table-wrap { overflow-x:auto; }
.table { min-width:var(--table-min, 980px); }
.table-head, .table-row { display:grid; grid-template-columns:var(--cols); align-items:center; }
.table-head { background:var(--grey-50); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--text-muted); }
.table-head > * { padding:10px 16px; }
.table-head a { color:inherit; border:0; display:inline-flex; align-items:center; gap:4px; }
.table-head a:hover { color:var(--anthrazit-900); }
.table-row { border-top:1px solid var(--border-subtle); color:var(--text-body); font-size:14px; }
.table-row > * { padding:12px 16px; overflow:hidden; text-overflow:ellipsis; }
a.table-row { border-bottom:0; transition:background-color var(--dur-fast) var(--ease); }
a.table-row:hover { background:var(--neon-100); }
.num { text-align:right; font-family:var(--font-mono); font-size:13px; }

.list { display:flex; flex-direction:column; }
.list-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px; border-top:1px solid var(--border-subtle); }
.list-row:first-child { border-top:0; }
a.list-row { border-bottom:0; color:inherit; transition:background-color var(--dur-fast) var(--ease); }
a.list-row:hover { background:var(--neon-100); }

/* --------------------------------------------------------------- Definitionen */
.dl { display:flex; flex-direction:column; gap:8px; }
.dl-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:14px; }
.dl-row dt { font-size:12px; color:var(--text-muted); flex:none; }
.dl-row dd { margin:0; text-align:right; color:var(--anthrazit-900); }

/* ------------------------------------------------------------------ Vorfälle */
.incident { padding:20px; }
.incident + .incident { margin-top:16px; }
.incident-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.incident-mark { width:3px; height:18px; border-radius:var(--radius-xs); background:var(--anthrazit-800); margin-top:3px; flex:none; }
.incident-mark.ausfall { background:var(--orange-600); }
.incident-mark.reparatur { background:var(--status-info-fg); }
.incident-body { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:16px; }

/* ------------------------------------------------------------------- Galerie */
.gallery { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.gallery figure { position:relative; margin:0; border-radius:var(--radius-lg); overflow:hidden; background:var(--grey-100); box-shadow:0 0 0 1px rgba(26,31,36,.05); }
.gallery img { aspect-ratio:4/3; object-fit:cover; width:100%; }
.gallery a { border-bottom:0; display:block; }
.gallery .remove {
  position:absolute; top:8px; right:8px; display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:0; border-radius:var(--radius-md); background:#fff; color:var(--orange-600);
  cursor:pointer; box-shadow:0 2px 6px rgba(26,31,36,.18); opacity:0; transition:opacity var(--dur-fast) var(--ease);
}
.gallery figure:hover .remove, .gallery .remove:focus-visible { opacity:1; }
.gallery .remove svg { width:15px; height:15px; }

.dropzone {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center;
  padding:28px 24px; border:1px dashed var(--border-default); border-radius:var(--radius-lg);
  background:var(--grey-50); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.dropzone:hover { border-color:var(--grey-400); }
.dropzone.over { border-color:var(--border-focus); background:var(--neon-100); }
.dropzone strong { font-size:14px; color:var(--anthrazit-900); }
.dropzone span { font-size:12px; color:var(--text-muted); }
.dropzone svg { width:20px; height:20px; color:var(--grey-500); }
.dropzone input[type=file] { display:none; }

.doc-list { display:flex; flex-direction:column; gap:8px; }
.doc { display:flex; align-items:center; gap:12px; padding:8px 12px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); }
.doc svg.icon { width:18px; height:18px; color:var(--neon-700); flex:none; }
.doc .meta { flex:1; min-width:0; }
.doc .meta strong { display:block; font-size:14px; font-weight:500; color:var(--anthrazit-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ------------------------------------------------------------------- Balken */
.bar { position:relative; height:8px; border-radius:999px; background:var(--grey-100); overflow:hidden; box-shadow:var(--shadow-sunken); flex:1; min-width:80px; }
.bar .fill { position:absolute; inset:0 auto 0 0; border-radius:999px; background:var(--anthrazit-800); }
.bar .fill.above { background:var(--orange-600); }
.bar .avg { position:absolute; top:0; bottom:0; width:2px; background:var(--neon-600); }
.bar-row { display:flex; align-items:center; gap:8px; }

/* -------------------------------------------------------------- Meldungen */
.flashes { position:fixed; right:20px; bottom:20px; z-index:60; display:flex; flex-direction:column; gap:8px; width:360px; max-width:calc(100vw - 40px); }
.flash { display:flex; align-items:flex-start; gap:8px; padding:12px 16px; border-radius:var(--radius-lg); font-size:13px; box-shadow:var(--shadow-3); animation:enter-up var(--dur-base) var(--ease) both; }
.flash.success { background:var(--anthrazit-900); color:#fff; }
.flash.error { background:var(--orange-100); color:var(--orange-700); }
.flash svg { width:16px; height:16px; margin-top:2px; flex:none; }
.flash button { margin-left:auto; background:none; border:0; color:inherit; opacity:.7; cursor:pointer; padding:0; }
@keyframes enter-up { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.notice { display:flex; align-items:flex-start; gap:8px; padding:12px 16px; border-radius:var(--radius-lg); font-size:13px; max-width:68ch; }
.notice.info { background:var(--status-info-bg); color:var(--blue-800); }
.notice.error { background:var(--orange-100); color:var(--orange-700); }
.notice svg { width:16px; height:16px; margin-top:2px; flex:none; }

.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:56px 24px; }
.empty svg { width:32px; height:32px; color:var(--grey-400); margin-bottom:12px; }
.empty strong { font-family:var(--font-display); font-size:18px; color:var(--anthrazit-900); }
.empty p { color:var(--text-muted); font-size:14px; margin-top:8px; max-width:52ch; }

/* --------------------------------------------------------------- Lightbox */
.lightbox { position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--overlay-scrim); backdrop-filter:blur(2px); }
.lightbox img { max-height:82vh; max-width:92vw; border-radius:var(--radius-lg); background:#fff; object-fit:contain; }
.lightbox .close { position:absolute; top:20px; right:20px; background:none; border:0; color:#fff; cursor:pointer; }
.lightbox .close svg { width:22px; height:22px; }

/* -------------------------------------------------------- Öffentliche Seite */
.public-header { height:76px; display:flex; align-items:center; border-bottom:1px solid var(--border-subtle); }
.public-inner { width:100%; max-width:1100px; margin:0 auto; padding:0 24px; }
.public-hero { background:var(--gradient-deep); position:relative; }
.public-hero::before {
  content:""; position:absolute; inset:0;
  background-image:var(--pattern-raster);
  background-size:var(--pattern-raster-size);
}
.public-hero .public-inner { position:relative; padding-top:56px; padding-bottom:56px; }
.public-hero h1 { font-size:48px; color:#fff; letter-spacing:-.022em; line-height:1.05; }
.public-hero p { color:var(--grey-200); font-size:17px; margin-top:16px; max-width:68ch; white-space:pre-wrap; }
.public-section { padding:56px 0; }
.public-footer { border-top:1px solid var(--border-subtle); padding:32px 0; font-size:13px; color:var(--text-muted); }

/* -------------------------------------------------------------- Anmeldung */
.login { min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; background:var(--gradient-deep); padding:24px; }
.login .box { width:100%; max-width:380px; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-4); padding:28px; }

/* ------------------------------------------------------------------- Druck */
@media print {
  .sidebar, .topbar, .page-actions, .flashes, .dropzone, .btn { display:none !important; }
  .shell { padding-left:0; background:#fff; }
  .content { padding:0; }
  .card { box-shadow:none; border:1px solid var(--border-subtle); }
}


/* ------------------------------------------------------------------- Karte */
.karte-flaeche { height:clamp(460px, calc(100vh - 300px), 1000px); width:100%; }
.karte-huelle { position:relative; }

.karte-leiste { display:flex; gap:8px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border-subtle); }
.karte-suche { position:relative; flex:1; display:flex; align-items:center; }
.karte-suche svg { position:absolute; left:12px; color:var(--grey-400); pointer-events:none; }
.karte-suche input {
  width:100%; height:36px; padding:0 36px; border:1px solid var(--border-default); border-radius:var(--radius-md);
  background:#fff; font-family:var(--font-body); font-size:14px; color:var(--anthrazit-900);
}
.karte-suche input:focus { outline:none; border-color:var(--border-focus); box-shadow:var(--shadow-focus); }
.karte-suche button { position:absolute; right:2px; }

.karte-treffer {
  position:absolute; top:8px; left:16px; right:16px; z-index:5; max-width:520px;
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-3); overflow:hidden;
}
.karte-treffer button {
  display:block; width:100%; text-align:left; padding:10px 14px; border:0; background:none; cursor:pointer;
  font-family:var(--font-body); font-size:14px; color:var(--anthrazit-900); border-top:1px solid var(--border-subtle);
}
.karte-treffer button:first-child { border-top:0; }
.karte-treffer button:hover { background:var(--neon-100); }
.karte-treffer .leer { padding:10px 14px; font-size:13px; color:var(--text-muted); }

.karte-panel {
  position:absolute; top:0; right:0; bottom:0; width:340px; max-width:100%; z-index:6;
  background:#fff; box-shadow:-10px 0 24px -12px rgba(26,31,36,.28); display:flex; flex-direction:column;
}
.karte-panel-links { right:auto; left:0; box-shadow:10px 0 24px -12px rgba(26,31,36,.28); }
@media (max-width:700px) { .karte-panel { width:100%; } }
.karte-panel-kopf { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border-subtle); }
.karte-panel-kopf strong { font-family:var(--font-display); font-size:16px; color:var(--anthrazit-900); }
.karte-panel-inhalt { padding:16px; overflow-y:auto; }

.karte-wahl { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 16px; }
.karte-wahl-knopf {
  flex:1 1 0; min-width:0; height:34px; padding:0 8px; border-radius:var(--radius-md); cursor:pointer;
  border:1px solid var(--border-default); background:#fff; color:var(--anthrazit-900);
  font-family:var(--font-body); font-size:12.5px; font-weight:500; white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.karte-wahl-knopf:hover { background:var(--grey-50); }
.karte-wahl-knopf.aktiv { background:var(--neon-500); border-color:var(--neon-600); color:var(--action-accent-fg); }

.karte-schalter {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--border-subtle); cursor:pointer;
}
.karte-schalter strong { display:block; font-size:14px; font-weight:600; color:var(--anthrazit-900); }
.karte-schalter .tiny { display:block; }
.karte-schalter input[type=checkbox] { appearance:none; width:40px; height:22px; border-radius:999px; background:var(--grey-300); position:relative; cursor:pointer; flex:none; transition:background-color var(--dur-fast) var(--ease); }
.karte-schalter input[type=checkbox]::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(26,31,36,.2); transition:transform var(--dur-fast) var(--ease); }
.karte-schalter input[type=checkbox]:checked { background:var(--neon-600); }
.karte-schalter input[type=checkbox]:checked::after { transform:translateX(18px); }
.karte-schalter input[type=checkbox]:focus-visible { outline:none; box-shadow:var(--shadow-focus); }
.karte-legende { display:inline-flex; align-items:center; gap:5px; margin-left:12px; font-size:12px; color:var(--text-muted); }
.karte-legende i { width:10px; height:10px; border-radius:999px; box-shadow:0 0 0 1.5px #fff, 0 0 0 2.5px rgba(26,31,36,.12); }
.karte-koordinate { background:var(--grey-50); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:8px 12px; }
.maplibregl-popup-content { border-radius:var(--radius-lg); box-shadow:var(--shadow-3); padding:14px 16px; }

/* --------------------------------------------------------- Karte im Vollbild */
.vollbild-seite { background:var(--anthrazit-950); }
.vollbild { display:flex; flex-direction:column; height:100vh; height:100dvh; }
.vollbild-kopf { display:flex; align-items:center; gap:16px; padding:10px 16px; background:#fff; border-bottom:1px solid var(--border-subtle); }
.vollbild-hinweis { flex:1; }
@media (max-width:700px) { .vollbild-hinweis { display:none; } }
.vollbild .card { flex:1; display:flex; flex-direction:column; margin:0; border-radius:0; box-shadow:none; min-height:0; }
.vollbild .karte-huelle { flex:1; min-height:0; }
.vollbild .karte-flaeche { height:100%; }

/* Tafel über einem Punkt: Tage seit der Inbetriebnahme.
   Der Schatten liegt als drop-shadow auf dem ganzen Element, damit er der Spitze folgt. */
.karte-tafel {
  position:relative; display:flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 6px; border-radius:var(--radius-sm);
  background:#fff; color:var(--anthrazit-900);
  font-family:var(--font-mono); font-size:12px; font-weight:600; line-height:1;
  filter:drop-shadow(0 1px 1px rgba(26,31,36,.22)) drop-shadow(0 2px 4px rgba(26,31,36,.18));
  pointer-events:none; user-select:none; white-space:nowrap;
}
.karte-tafel::after {
  content:""; position:absolute; top:100%; left:50%; width:0; height:0; margin-left:-5px;
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #fff;
}

/* Präsentationsblatt: Karte einrichten */
/* Das Feld hat dasselbe Seitenverhältnis wie auf dem Blatt (74 zu 74 Millimeter),
   damit die Vorschau zeigt, was gedruckt wird. */
.blatt-karte { aspect-ratio:1 / 1; width:100%; max-height:min(620px, calc(100vh - 300px)); }

.blatt-auswahl { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.blatt-foto { position:relative; display:block; cursor:pointer; border-radius:var(--radius-sm); overflow:hidden; }
.blatt-foto img { aspect-ratio:1/1; object-fit:cover; width:100%; display:block; opacity:.45; transition:opacity var(--dur-fast) var(--ease); }
.blatt-foto.gewaehlt img { opacity:1; }
.blatt-foto.gewaehlt { box-shadow:0 0 0 2px var(--neon-500); }
.blatt-foto.gesperrt { cursor:not-allowed; }
.blatt-foto input { position:absolute; top:4px; left:4px; margin:0; accent-color:var(--neon-600); }
.blatt-tafel {
  position:relative; display:flex; flex-direction:column; gap:1px;
  padding:8px 10px; border-radius:var(--radius-md); background:#fff; color:var(--grey-700);
  font-family:var(--font-body); font-size:11.5px; line-height:1.3; white-space:nowrap;
  filter:drop-shadow(0 1px 1px rgba(26,31,36,.22)) drop-shadow(0 2px 5px rgba(26,31,36,.2));
  pointer-events:none; user-select:none;
}
.blatt-tafel .kopf { font-weight:700; font-size:12.5px; color:var(--anthrazit-900); }
.blatt-tafel::after {
  content:""; position:absolute; top:100%; left:50%; width:0; height:0; margin-left:-6px;
  border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid #fff;
}

/* Eigener Standort */
.karte-standortmarke {
  width:16px; height:16px; border-radius:999px; background:var(--anthrazit-800);
  box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(38,44,50,.35), 0 2px 6px rgba(26,31,36,.3);
}

/* ================================================================= Dashboard */
.hero {
  position:relative; overflow:hidden; border-radius:var(--radius-xl);
  background:var(--gradient-deep); color:var(--grey-200); padding:28px 32px; margin-bottom:24px;
}
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--pattern-raster);
  background-size:var(--pattern-raster-size);
}
.hero::after {
  content:""; position:absolute; top:-120px; right:-90px; width:320px; height:320px; border-radius:999px;
  background:radial-gradient(circle,rgba(140,227,60,.22) 0%,rgba(140,227,60,0) 68%); pointer-events:none;
}
.hero > * { position:relative; }
.hero .eyebrow { color:var(--text-on-dark-accent); }
.hero h1 { color:#fff; font-size:30px; margin-top:6px; }
.hero p.lead { color:var(--grey-300); font-size:14px; margin-top:8px; max-width:64ch; }
.hero-kopf { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.hero-zahl { text-align:right; flex:none; }
.hero-zahl .value { font-family:var(--font-mono); font-size:40px; font-weight:600; line-height:1; color:#fff; }
.hero-zahl .value.warn { color:var(--text-on-dark-accent); }
.hero-zahl .value.alarm { color:var(--text-on-dark-signal); }
.hero-zahl .eyebrow { display:block; margin-bottom:8px; }

.schnellwahl { display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.schnellwahl a {
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.1); color:#fff; border-bottom:0; font-size:14px; font-weight:600;
  transition:background-color var(--dur-fast) var(--ease);
}
.schnellwahl a:hover { background:rgba(255,255,255,.2); color:#fff; }
.schnellwahl a svg { width:16px; height:16px; flex:none; }
.schnellwahl a.hell { background:var(--neon-500); color:var(--action-accent-fg); }
.schnellwahl a.hell:hover { background:var(--neon-400); color:var(--action-accent-fg); }

/* Waagrechter Stapelbalken: Anteile mit absoluten Zahlen daneben */
.stapel { display:flex; height:14px; border-radius:999px; overflow:hidden; background:var(--grey-100); box-shadow:var(--shadow-sunken); }
.stapel span { display:block; height:100%; }
.stapel span + span { box-shadow:inset 1px 0 0 rgba(255,255,255,.7); }
.ton-ueberfaellig { background:var(--orange-600); }
.ton-faellig { background:var(--amber-600); }
.ton-ok { background:var(--neon-600); }
.ton-ohne { background:var(--grey-300); }
.ton-unbekannt { background:var(--grey-400); }

.legende { display:flex; flex-direction:column; gap:2px; margin-top:16px; }
.legende-zeile { display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--border-subtle); font-size:13px; }
.legende-zeile:first-child { border-top:0; }
.legende-zeile i { width:10px; height:10px; border-radius:3px; flex:none; }
.legende-zeile .name { flex:1; min-width:0; color:var(--text-body); }
.legende-zeile .zahl { font-family:var(--font-mono); font-weight:600; color:var(--anthrazit-900); }
.legende-zeile .anteil { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); width:44px; text-align:right; }

/* Säulen für die Fälligkeiten der nächsten Monate */
.saeulen { display:flex; align-items:flex-end; gap:8px; height:150px; padding-top:20px; }
.saeule { flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; height:100%; text-align:center; }
.saeule .balken {
  border-radius:var(--radius-sm) var(--radius-sm) 0 0; background:var(--anthrazit-800); min-height:3px;
  transition:background-color var(--dur-fast) var(--ease);
}
.saeule .balken.jetzt { background:var(--orange-600); }
.saeule .balken.leer { background:var(--grey-200); }
.saeule .zahl { font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--anthrazit-900); margin-bottom:6px; }
.saeule .monat { font-size:11px; color:var(--text-muted); margin-top:8px; white-space:nowrap; }

/* Kompakte Rangliste mit Balken im Hintergrund */
.rang { display:flex; flex-direction:column; }
.rang-zeile { position:relative; display:flex; align-items:center; gap:12px; padding:10px 16px; border-top:1px solid var(--border-subtle); font-size:14px; }
.rang-zeile:first-child { border-top:0; }
.rang-zeile::before { content:""; position:absolute; inset:0 auto 0 0; width:var(--anteil,0%); background:var(--neon-100); }
.rang-zeile > * { position:relative; }
.rang-zeile .name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rang-zeile .zahl { font-family:var(--font-mono); font-weight:600; color:var(--anthrazit-900); flex:none; }
a.rang-zeile { color:inherit; border-bottom:0; transition:background-color var(--dur-fast) var(--ease); }
a.rang-zeile:hover { background:var(--grey-50); }

/* Vorfallzeile im Dashboard */
.verlauf { display:flex; flex-direction:column; }
.verlauf-zeile { display:flex; gap:12px; padding:12px 16px; border-top:1px solid var(--border-subtle); }
.verlauf-zeile:first-child { border-top:0; }
a.verlauf-zeile { color:inherit; border-bottom:0; transition:background-color var(--dur-fast) var(--ease); }
a.verlauf-zeile:hover { background:var(--neon-100); }
.verlauf-zeile .marke { width:3px; border-radius:var(--radius-xs); background:var(--anthrazit-800); flex:none; }
.verlauf-zeile .marke.ausfall { background:var(--orange-600); }
.verlauf-zeile .marke.reparatur { background:var(--status-info-fg); }
.verlauf-zeile .inhalt { flex:1; min-width:0; }
.verlauf-zeile .inhalt .kopf { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }

/* ============================================================ Schmale Geräte */
.nav-schalter { display:none; }
.nav-hintergrund { display:none; }
.tabelle-sortierung { display:none; }
.filter-schalter { display:none; }

@media (max-width:1180px) {
  .content { padding:24px; }
}

/* --- Seitenleiste fährt von links ein --------------------------------- */
@media (max-width:900px) {
  .sidebar {
    width:min(286px,86vw); transform:translateX(-100%); box-shadow:none;
    transition:transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
  }
  body.nav-offen .sidebar { transform:none; box-shadow:var(--shadow-4); }
  .shell { padding-left:0; }

  .nav-hintergrund {
    display:block; position:fixed; inset:0; z-index:15; border:0; padding:0;
    background:var(--overlay-scrim); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease);
  }
  body.nav-offen .nav-hintergrund { opacity:1; pointer-events:auto; }
  body.nav-offen { overflow:hidden; }

  .nav-schalter {
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:40px; height:40px; margin-left:-8px; border:0; border-radius:var(--radius-md);
    background:transparent; color:var(--anthrazit-900); cursor:pointer;
    transition:background-color var(--dur-fast) var(--ease);
  }
  .nav-schalter:hover { background:var(--grey-100); }
  .nav-schalter svg { width:22px; height:22px; }

  /* Grössere Ziele für den Finger */
  .nav-item { height:44px; font-size:15px; }
  .nav-group { padding-top:18px; }

  .topbar { padding:0 16px; gap:10px; }
  .topbar-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .content { padding:20px 16px 40px; }
}

/* --- Tabellen werden zu Karten ---------------------------------------- */
@media (max-width:760px) {
  :root { --header-h:58px; }

  .table-wrap { overflow-x:visible; }
  .table { min-width:0 !important; }
  .table-head { display:none; }

  .table-row {
    display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
    padding:14px 16px; border-top:1px solid var(--border-subtle);
  }
  .table-row > * { padding:0; overflow:visible; text-overflow:clip; white-space:normal; min-width:0; max-width:100%; }
  .table-row > [style*="display:flex"] { flex-wrap:wrap; }
  .table-row > .truncate, .table-row .truncate { overflow:visible; text-overflow:clip; white-space:normal; }
  .table-row > *:first-child { flex:1 1 100%; font-size:15px; }
  .table-row > .num, .table-row > [style*="text-align:right"] { text-align:left !important; }
  .table-row > [style*="justify-content:flex-end"] { justify-content:flex-start !important; flex:1 1 100%; margin-top:4px; }
  /* Beschriftung aus der Kopfzeile, vom Skript gesetzt */
  .table-row > [data-spalte]:not(:first-child)::before {
    content:attr(data-spalte) " "; display:block;
    font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--grey-400);
    margin-bottom:1px;
  }
  .table-row > [data-spalte=""]::before { content:none; }

  /* Sortierung wandert in eine Chipleiste über der Liste */
  .tabelle-sortierung { display:flex; align-items:center; gap:6px; padding:10px 16px; border-bottom:1px solid var(--border-subtle); overflow-x:auto; }
  .tabelle-sortierung > span { font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--text-muted); flex:none; }
  .tabelle-sortierung a {
    display:inline-flex; align-items:center; gap:4px; flex:none; height:30px; padding:0 12px; border-radius:999px;
    border-bottom:0; background:var(--grey-100); color:var(--grey-700); font-size:13px; font-weight:500; white-space:nowrap;
  }
  .tabelle-sortierung a.aktiv { background:var(--anthrazit-800); color:#fff; }
  .tabelle-sortierung a svg { width:12px; height:12px; }

  .filter-kompakt .form-grid { gap:12px; }
  .filter-kompakt:not(.filter-offen) .feld-weiter { display:none; }
  .filter-schalter { display:flex; align-items:center; justify-content:space-between; width:100%; }
  .filter-schalter .zaehler { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--neon-500); color:var(--action-accent-fg); font-size:11px; font-weight:700; }

  .list-row { flex-wrap:wrap; padding:14px 16px; }
  .list-row > * { min-width:0; }
}

/* --- Schrift, Abstände, Bedienelemente -------------------------------- */
@media (max-width:640px) {
  h1 { font-size:23px; }
  .hero { padding:22px 20px; border-radius:var(--radius-lg); }
  .hero h1 { font-size:24px; }
  .hero-kopf { gap:14px; }
  .hero-zahl { text-align:left; }
  .hero-zahl .value { font-size:32px; }
  .schnellwahl { margin-top:18px; }
  .schnellwahl a { flex:1 1 132px; justify-content:center; }

  .card-pad { padding:18px 16px; }
  .card-head { padding:14px 16px; }
  .grid { gap:14px; }
  .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat { padding:14px 16px; }
  .stat .value { font-size:26px; margin-top:8px; }
  .stat .hint { margin-top:6px; }
  .split { gap:16px; }
  .stack-lg { gap:16px; }
  .page-head { margin-bottom:18px; }
  .page-actions { width:100%; }
  .page-actions > .btn { flex:1 1 auto; }

  /* 16px verhindert das Hineinzoomen von iOS beim Antippen eines Feldes */
  .input, select.input, textarea.input, .karte-suche input { font-size:16px; height:44px; }
  textarea.input { height:auto; }
  .btn { height:44px; }
  .btn-sm { height:36px; }
  .form-grid { grid-template-columns:minmax(0,1fr); }
  .form-actions > .btn, .form-actions > form > .btn { flex:1 1 auto; }
  .inline-form { flex-direction:column; align-items:stretch; }
  .inline-form > .btn { width:100%; }

  .public-hero h1 { font-size:32px; }
  .public-hero p { font-size:15px; margin-top:12px; }
  .public-hero .public-inner { padding-top:36px; padding-bottom:36px; }
  .public-section { padding:36px 0; }
  .public-inner { padding:0 16px; }
  .public-header { height:64px; }

  .saeulen { height:130px; gap:5px; }
  .saeule .monat { font-size:10px; }
  .gallery { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
  .gallery .remove { opacity:1; }
  .empty { padding:36px 20px; }
  .flashes { right:12px; left:12px; bottom:12px; width:auto; }
  .incident-body { gap:12px; }
}

/* --- Karte auf dem Telefon -------------------------------------------- */
@media (max-width:760px) {
  .karte-leiste { flex-wrap:wrap; gap:6px; padding:10px 12px; }
  .karte-leiste > form { flex:1 1 100%; }
  .karte-leiste > form select { flex:1; width:100% !important; }
  .karte-suche { flex:1 1 100%; order:-1; }
  .karte-flaeche { height:clamp(340px, calc(100vh - 320px), 720px); }
  .karte-treffer { left:12px; right:12px; }
}
@media (max-width:560px) {
  .karte-leiste .knopf-text { display:none; }
  .karte-leiste .btn-sm { padding:0 10px; }
  /* Auswahl und Knöpfe teilen sich eine Zeile, damit mehr Karte bleibt */
  .karte-leiste > form { flex:1 1 140px; }
  .karte-leiste > form select { min-width:0 !important; }
  .vollbild-kopf { padding:8px 12px; gap:10px; }
  .vollbild .karte-flaeche { height:100%; }
}

/* Rand für Geräte mit abgerundeter Anzeige */
@supports (padding:max(0px)) {
  @media (max-width:900px) {
    .content { padding-bottom:max(40px, env(safe-area-inset-bottom)); }
    .sidebar-foot { padding-bottom:max(16px, env(safe-area-inset-bottom)); }
    .flashes { bottom:max(12px, env(safe-area-inset-bottom)); }
  }
}