@font-face{font-family:"Barlow Condensed";font-weight:800;font-style:normal;font-display:swap;src:url("fonts/barlow-condensed-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/barlow-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/barlow-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/barlow-latin-700-normal.woff2") format("woff2")}
/* Streumelder: „Warn-App“
   Sachlich wie eine Wetterwarnung: Lagebalken oben, Warnstreifen, kondensierte Schrift,
   Marker als rautenförmige Warnschilder, Karte links und Meldungen rechts.
   Schriften: Barlow Condensed (Beschilderung) und Barlow (Text). */
:root {
  --f-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --r-s: 3px; --r-m: 4px; --r-l: 6px;
  --navy: #0b1d26; --warn: #e8590c; --ok: #2f9e44;
  --lage-h: 42px;
}
body { background: var(--bg); }
.site-streu { font-size: 15.5px; }

/* Kopfzeile mit Warnstreifen */
.site-streu .topbar { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
.site-streu .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: repeating-linear-gradient(-45deg, var(--warn) 0 12px, #fff 12px 24px); }
.site-streu .brand-mark { background: var(--navy); color: #fff; border-radius: 3px; }
.site-streu .brand-name { font: 800 24px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.site-streu .brand-sub { font-weight: 600; color: var(--muted); }
.site-streu .search input { border-radius: 3px; background: var(--surface-2); border-color: transparent; }
.site-streu .search-results { border-radius: 4px; }

/* Lagebalken */
.lage {
  position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); z-index: 990; margin-top: 6px;
  display: flex; align-items: center; gap: 12px; min-height: var(--lage-h); padding: 6px 16px;
  background: var(--navy); color: #fff; font: 600 16px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .04em;
}
.lage-text b { color: #fff; font-weight: 800; }
.lage-text .sep { opacity: .45; margin: 0 6px; }
.lage-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--ok); box-shadow: 0 0 0 4px rgb(47 158 68 / .25); }
.lage[data-level="1"] .lage-dot { background: #f59f00; box-shadow: 0 0 0 4px rgb(245 159 0 / .3); }
.lage[data-level="2"] .lage-dot { background: #fa5252; box-shadow: 0 0 0 4px rgb(250 82 82 / .35); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgb(250 82 82 / 0); } }

.site-streu .eyebrow { color: var(--warn); font: 800 15px/1 var(--f-display); letter-spacing: .12em; }
.site-streu .hero h1 { font: 800 clamp(40px, 3.8vw, 54px)/.92 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; color: var(--navy); }
.site-streu .hero p { color: var(--muted); }

/* Aufbau: Karte über den ganzen Bildschirm, Meldungen in einer Leiste, runder Melde-Knopf */
.site-streu .navi { position: relative; height: calc(100svh - var(--topbar-h) - var(--lage-h) - 6px); min-height: 520px; }
.site-streu .navi .mapwrap { position: absolute; inset: 0; height: auto; min-height: 0; }
.site-streu .map-tools .map-add { display: none !important; }
.fab {
  position: absolute; z-index: 700; right: 18px; bottom: 96px; display: inline-flex; align-items: center; gap: 10px;
  height: 64px; padding: 0 26px 0 20px; border: 0; border-radius: 999px; background: var(--warn); color: #fff; cursor: pointer;
  font: 800 19px/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 12px 26px -8px rgb(232 89 12 / .7), 0 0 0 4px #fff;
}
.fab svg { width: 26px; height: 26px; stroke-width: 2.6; }
.fab:active { transform: scale(.97); }
.drawer {
  position: absolute; z-index: 650; left: 16px; top: 16px; bottom: 16px; width: 410px; display: flex; flex-direction: column;
  background: var(--bg); border-radius: 6px; box-shadow: 0 18px 40px -16px rgb(11 29 38 / .45); overflow: hidden;
}
.drawer-handle { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; padding: 14px 18px; border: 0; background: var(--navy); color: #fff; cursor: pointer; text-align: left; }
.drawer-handle .grip { display: none; }
.drawer-title { font: 800 18px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.drawer-handle small { color: #b9c8d1; font-size: 13px; margin-left: auto; }
.drawer-handle::after { content: "–"; font: 800 22px/1 var(--f-display); margin-left: 8px; }
.drawer[data-open="false"] .drawer-handle::after { content: "+"; }
.drawer-body { flex: 1; overflow-y: auto; display: grid; gap: 18px; align-content: start; padding: 20px 18px 26px; }
.drawer[data-open="false"] { bottom: auto; }
.drawer[data-open="false"] .drawer-body { display: none; }
@media (max-width: 860px) {
  .site-streu .navi { height: calc(100svh - var(--topbar-h) - var(--lage-h) - 6px); min-height: 480px; }
  .drawer { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 76%; border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px -10px rgb(11 29 38 / .4); }
  .drawer[data-open="false"] { bottom: 0; }
  .drawer-handle { flex-wrap: wrap; justify-content: center; text-align: center; padding: 10px 16px 14px; background: #fff; color: var(--navy); }
  .drawer-handle .grip { display: block; width: 44px; height: 5px; border-radius: 3px; background: #c3d0d8; flex-basis: 100%; max-width: 44px; margin: 0 auto 8px; }
  .drawer-handle small { margin-left: 0; color: var(--muted); }
  .drawer-handle::after { display: none; }
  .fab { right: 14px; bottom: 92px; height: 58px; font-size: 17px; }
  .drawer[data-open="true"] ~ .fab, .navi:has(.drawer[data-open="true"]) .fab { display: none; }
}

/* Messwerte */
.site-streu .stats { gap: 0; border: 2px solid var(--navy); border-radius: 4px; background: #fff; }
.site-streu .stat { border: 0; border-radius: 0; background: transparent; padding: 10px 12px; }
.site-streu .stat + .stat { border-left: 1px solid var(--line); }
.site-streu .stat b { font: 800 36px/1 var(--f-display); color: var(--navy); }
.site-streu .stat:nth-child(2) b { color: #c92a2a; }
.site-streu .stat span { font: 600 13px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* Knöpfe, Filter, Liste */
.site-streu .btn { border-radius: 4px; font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 16px; }
.site-streu .btn-primary { background: var(--warn); color: #fff; }
.site-streu .btn-primary:hover { background: #d9480f; }
.site-streu .chip { border-radius: 3px; font-family: var(--f-display); text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }
.site-streu .chip[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.site-streu .filter-label { font-family: var(--f-display); letter-spacing: .1em; }
.site-streu .list-head h2 { font: 800 22px/1 var(--f-display); text-transform: uppercase; }
.site-streu .entries { gap: 0; border-top: 1px solid var(--line); }
.site-streu .entry { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 12px 4px; }
.site-streu .entry:hover { background: #fff; }
.site-streu .entry-ico { border-radius: 4px; background: var(--c); color: #fff; transform: rotate(45deg) scale(.82); }
.site-streu .entry-ico svg { transform: rotate(-45deg); }
.site-streu .entry-title { font: 700 18px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.site-streu .tag { border-radius: 3px; font-family: var(--f-display); text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; }
.site-streu .tag-sev[data-sev="2"] { background: #fff4e6; color: #d9480f; }
.site-streu .tag-sev[data-sev="3"] { background: #c92a2a; color: #fff; }

/* Warnschild-Marker */
.site-streu .mk { border-radius: 4px; transform: rotate(45deg); width: 30px; height: 30px; border-width: 2.5px; }
.site-streu .mk svg { transform: rotate(-45deg); width: 17px; height: 17px; }
.site-streu .mk-alert { box-shadow: 0 0 0 4px #fff, 0 0 0 7px #c92a2a, 0 6px 14px -4px rgb(0 0 0 / .5); }
.site-streu .cluster { border-radius: 6px; background: rgb(11 29 38 / .18); }
.site-streu .cluster b { border-radius: 4px; background: var(--navy); color: #fff; font: 800 15px var(--f-display); }
.site-streu .pop h3 { font: 800 22px/1.05 var(--f-display); text-transform: uppercase; }

/* Inhalt unter der Karte */
.site-streu .content { background: #fff; }
.site-streu .content h2 { font: 800 clamp(30px, 3vw, 40px)/1 var(--f-display); text-transform: uppercase; color: var(--navy); }
.site-streu .how { border-radius: 4px; border: 2px solid var(--navy); background: #fff; }
.site-streu .how .step { color: var(--warn); font: 800 15px var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.site-streu .how h3 { font: 800 20px/1.1 var(--f-display); text-transform: uppercase; }
.site-streu .city-grid a { border-radius: 3px; }
.site-streu .foot { background: var(--navy); color: #b9c8d1; border-top: 0; }
.site-streu .foot a { color: #b9c8d1; }
.site-streu .legal h1, .site-streu .legal h2 { font-family: var(--f-display); text-transform: uppercase; }

/* Formular */
.site-streu .sheet { border-radius: 6px 6px 0 0; border-top: 6px solid var(--warn); }
@media (min-width: 720px) { .site-streu .sheet { border-radius: 6px; } }
.site-streu .sheet-head h2 { font: 800 30px/1 var(--f-display); text-transform: uppercase; }
.site-streu .mini { border-radius: 4px; }
.site-streu .radio span { border-radius: 4px; font-family: var(--f-display); text-transform: uppercase; letter-spacing: .04em; font-size: 15px; }
.site-streu .radio input:checked + span { background: var(--navy); color: #fff; }
.site-streu .radios-big .radio span { min-height: 96px; border: 2px solid var(--line); font-size: 17px; font-weight: 600; background: #fff; }
.site-streu .radios-big .tile-ico { width: 40px; height: 40px; border-radius: 4px; background: currentColor; transform: rotate(45deg) scale(.85); }
.site-streu .radios-big .tile-ico svg { color: #fff; transform: rotate(-45deg); width: 24px; height: 24px; }
.site-streu .radios-big .radio input:checked + span { background: var(--warn); border-color: var(--warn); }
.site-streu .snack { border-radius: 6px; background: var(--navy); color: #fff; }
.site-streu .snack-ico { background: var(--ok); color: #fff; }
.site-streu .snack-actions .btn { color: #fff; }
.site-streu .snack-x { color: #fff; }

@media (max-width: 860px) {
  .lage { font-size: 14px; }
  .site-streu .brand-name { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .lage-dot { animation: none !important; } }

@media (max-width: 860px) {
  .drawer-handle { display: grid; justify-items: center; gap: 2px; }
  .drawer-handle .grip { margin-bottom: 6px; }
  .site-streu .leaflet-control-zoom { display: none; }
  .site-streu .leaflet-bottom { bottom: 74px; }
}

.site-streu .leaflet-container a.btn.btn-primary { color: #fff; }

/* Lagebalken am Handy in einer Zeile */
@media (max-width: 480px) {
  .lage { gap: 10px; padding: 6px 14px; font-size: 13px; letter-spacing: .015em; }
  .lage-pre { display: none; }
  .lage-text .sep { margin: 0 4px; }
}

/* Leiste und Melde-Knopf liegen über den Kartensteuerungen (Zoom, Quellenangabe) */
.drawer { z-index: 1100; }
.fab { z-index: 1110; }