/* Starkregen-Monitor: nur auf /starkregen-monitor* geladen (Extra.monitor).
   Nutzt die Tokens aus style.css; eigene Klassen mit Praefix monitor-/mf-. */

.monitor-main { max-width: var(--container-max); }
.monitor-hero .lede { max-width: 52rem; }

/* --- Filter --------------------------------------------------------------
   Drei semantische Zeilen (Wo / Wann / Wie stark). Bereichsfelder (von-bis)
   sind ein zusammenhaengendes Bedienelement, der Bezug (Maximum/Mittel) ein
   Umschalter. Alle Grid-Kinder tragen min-width:0, damit Datums-/Zahlen-
   felder nie ueber ihre Zelle hinauslaufen. */
.monitor-filter { margin-top: 2rem; padding: 1.25rem; }
@media (min-width: 768px) { .monitor-filter { padding: 1.5rem 1.75rem; } }
.mf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; margin-bottom: .5rem; }
.mf-head > .eyebrow { display: block; }
.mf-head-note { font-size: .8rem; color: var(--color-neutral-500); }
.mf-row { display: block; margin: 0; padding: 0 0 1.1rem; border: 0; min-width: 0; }
.mf-legend { display: block; margin: 0 0 .7rem; padding: .9rem 0 0; border-top: 1px solid rgba(0,0,0,.07); font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-neutral-500); }
.mf-grid { display: grid; gap: 1rem 1.25rem; grid-template-columns: 1fr; min-width: 0; }
.mf-grid > * { min-width: 0; }
@media (min-width: 640px) {
  .mf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf-row-where .mf-place { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .mf-row-where .mf-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .mf-row-where .mf-place { grid-column: auto; }
  .mf-row-when .mf-grid, .mf-row-strength .mf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mf-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.mf-field label, .mf-field .mf-label { display: block; font-size: .8125rem; font-weight: 600; color: var(--color-neutral-700); line-height: 1.15rem; }
.mf-field input:not([type=checkbox]):not([type=radio]), .mf-field select {
  width: 100%; min-width: 0; min-height: 44px; border-radius: var(--radius); border: 1px solid rgba(0,0,0,.14); background: #fff;
  padding: 0 .75rem; font: inherit; font-size: .9rem; color: var(--color-neutral-900); -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.mf-field select { padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23525252' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; }
.mf-field input[type=date] { font-variant-numeric: tabular-nums; }
.mf-field input[type=date]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
.mf-field input:focus-visible, .mf-field select:focus-visible, .monitor-filter button:focus-visible, .monitor-filter a:focus-visible { outline: 3px solid rgba(239,68,68,.55); outline-offset: 2px; }
.mf-field select:disabled { color: var(--color-neutral-400); background-color: var(--color-neutral-50); }
.mf-hint { font-size: .75rem; line-height: 1.1rem; color: var(--color-neutral-500); }
/* Bereichsfeld: [von] bis [bis] als ein Element */
.mf-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; border: 1px solid rgba(0,0,0,.14); border-radius: var(--radius); background: #fff; min-width: 0; }
.mf-range:focus-within { border-color: rgba(239,68,68,.6); box-shadow: 0 0 0 4px rgba(239,68,68,.1); }
.mf-range > input, .mf-range > select { border: 0 !important; border-radius: 0 !important; background-color: transparent !important; min-height: 44px !important; }
.mf-range > input:focus-visible, .mf-range > select:focus-visible { outline-offset: -3px; }
.mf-range > input:first-child, .mf-range > select:first-child { border-radius: var(--radius) 0 0 var(--radius) !important; }
.mf-range > input:last-child, .mf-range > select:last-child { border-radius: 0 var(--radius) var(--radius) 0 !important; }
.mf-range-sep { padding: 0 .45rem; font-size: .75rem; letter-spacing: .04em; color: var(--color-neutral-500); border-left: 1px solid rgba(0,0,0,.08); border-right: 1px solid rgba(0,0,0,.08); align-self: stretch; display: flex; align-items: center; }
/* Datumsbereich: unter 480 px untereinander, damit der Datumspicker nie abschneidet */
@media (max-width: 479.98px) {
  .mf-range-date { grid-template-columns: minmax(0, 1fr); }
  .mf-range-date .mf-range-sep { border: 0; border-top: 1px solid rgba(0,0,0,.08); border-bottom: 1px solid rgba(0,0,0,.08); justify-content: center; padding: .15rem; }
  .mf-range-date > input:first-child { border-radius: var(--radius) var(--radius) 0 0 !important; }
  .mf-range-date > input:last-child { border-radius: 0 0 var(--radius) var(--radius) !important; }
}
/* Umschalter Maximum / Mittel */
.mf-seg { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(0,0,0,.14); border-radius: var(--radius); overflow: hidden; background: #fff; }
.mf-seg label { position: relative; min-width: 0; }
.mf-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mf-seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 .75rem; font-size: .8125rem; font-weight: 600; color: var(--color-neutral-600); transition: background .15s, color .15s; }
.mf-seg label + label span { border-left: 1px solid rgba(0,0,0,.1); }
.mf-seg input:checked + span { background: var(--color-neutral-900); color: #fff; }
.mf-seg input:focus-visible + span { outline: 3px solid rgba(239,68,68,.55); outline-offset: -3px; }
.mf-field .mf-check-label { display: flex; align-items: flex-start; gap: .6rem; min-height: 44px; padding: .5rem .75rem; border: 1px solid rgba(0,0,0,.14); border-radius: var(--radius); background: #fff; font-weight: 500 !important; color: var(--color-neutral-800, #262626) !important; line-height: 1.25rem !important; cursor: pointer; }
.mf-field .mf-check-label span { flex: 1 1 auto; min-width: 0; }
.mf-check-label input { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: .05rem; accent-color: var(--color-red-600); }
.mf-check-label:focus-within { border-color: rgba(239,68,68,.6); box-shadow: 0 0 0 4px rgba(239,68,68,.1); }
.mf-suggest-wrap { position: relative; }
.mf-suggest { position: absolute; z-index: 30; left: 0; right: 0; margin: .35rem 0 0; padding: .3rem; list-style: none; background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: var(--radius); box-shadow: 0 16px 40px -16px rgba(0,0,0,.35); max-height: 18rem; overflow: auto; }
.mf-suggest li { padding: .55rem .7rem; border-radius: var(--radius-sm); cursor: pointer; font-size: .9rem; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
.mf-suggest li .sub { font-size: .75rem; color: var(--color-neutral-500); }
.mf-suggest li[aria-selected=true], .mf-suggest li:hover { background: rgba(239,68,68,.08); }
.mf-actions { display: flex; flex-wrap: wrap; gap: .6rem; padding-top: 1.1rem; border-top: 1px solid rgba(0,0,0,.07); align-items: center; }
.mf-actions .btn { min-height: 44px; }
.mf-actions .mf-export { margin-left: auto; }
@media (max-width: 479.98px) { .mf-actions .btn { flex: 1 1 100%; justify-content: center; } .mf-actions .mf-export { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .mf-seg span, .mf-field input, .mf-field select { transition: none; } }

.monitor-problems { margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--radius-lg); background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4); font-size: .9rem; }
.monitor-problems ul { margin: 0; padding-left: 1.1rem; }
.monitor-disambig .chip-row { margin-top: .75rem; }
.chip-inline .chip-sub { font-weight: 400; color: var(--color-neutral-500); font-size: .8rem; }

/* --- Status / Chips ----------------------------------------------------- */
.monitor-status { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.monitor-count { font-size: .95rem; color: var(--color-neutral-600); }
.monitor-count strong { color: var(--color-neutral-900); }
.monitor-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.chip-remove { min-height: 44px; }
.chip-remove span { color: var(--color-red-600); }

/* --- Tabs (mobil) --------------------------------------------------------- */
.monitor-tabs { display: flex; gap: .4rem; margin-top: 1.25rem; border-bottom: 1px solid var(--color-neutral-200); }
.monitor-tab { min-height: 44px; padding: .6rem 1.1rem; background: none; border: 0; border-bottom: 3px solid transparent; font: inherit; font-weight: 600; color: var(--color-neutral-600); cursor: pointer; }
.monitor-tab[aria-selected=true] { color: var(--color-red-600); border-bottom-color: var(--color-red-600); }
.monitor-tab:focus-visible { outline: 3px solid rgba(239,68,68,.55); outline-offset: -3px; }
.monitor-tabs[hidden] { display: none; }

/* --- Split-Layout ---------------------------------------------------------- */
.monitor-stack { display: flex; flex-direction: column; gap: 2rem; margin-top: 1.25rem; }
.monitor-panel-h { display: block; margin-bottom: .6rem; }
/* Skip-Links zwischen Liste und Karte: unsichtbar bis zum Tastaturfokus
   (das globale .skip-link versteckt nur ueber den Seitenrand, was innerhalb
   positionierter Panels sichtbar bliebe). */
.monitor-skip { position: absolute; top: .5rem; left: .5rem; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.monitor-skip:focus { width: auto; height: auto; clip: auto; overflow: visible; z-index: 500; }
.monitor-list, .monitor-map-panel { position: relative; }


/* --- Tabelle ---------------------------------------------------------------- */
.monitor-table-wrap[hidden], .monitor-empty[hidden] { display: none; }
.monitor-table-wrap { overflow-x: auto; border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius-lg); background: rgba(255,255,255,.6); }
.monitor-table { width: 100%; border-collapse: collapse; font-size: .875rem; table-layout: fixed; }
.monitor-table col.c-date { width: 17%; } .monitor-table col.c-place { width: 31%; } .monitor-table col.c-dur { width: 9%; }
.monitor-table col.c-rr { width: 19%; } .monitor-table col.c-sri { width: 11%; } .monitor-table col.c-area { width: 13%; }
.monitor-table th { position: sticky; top: 0; background: var(--color-neutral-50); padding: .7rem .75rem; text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-500); border-bottom: 1px solid rgba(0,0,0,.1); z-index: 1; line-height: 1rem; }
.monitor-table th .sort-link { color: inherit; text-decoration: none; display: inline-flex; gap: .3rem; align-items: center; min-height: 28px; }
.monitor-table th[aria-sort] .sort-link { color: var(--color-red-600); }
.monitor-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--color-neutral-200); vertical-align: top; }
.monitor-table th { padding-inline: .5rem; }
.monitor-table td { overflow-wrap: anywhere; }
.monitor-table .col-link-mobile { display: none; }
.monitor-table .col-place .sub { line-height: 1.1rem; }
.monitor-table tbody tr { transition: background .12s; }
.monitor-table tbody tr:hover, .monitor-table tbody tr:focus-within, .monitor-table tbody tr.is-active { background: rgba(239,68,68,.07); outline: none; }
.monitor-table tbody tr.is-active td:first-child { box-shadow: inset 3px 0 0 var(--color-red-600); }
.monitor-table tbody tr:focus-visible { outline: 3px solid rgba(239,68,68,.55); outline-offset: -3px; }
.monitor-table .sub { display: block; font-size: .75rem; color: var(--color-neutral-500); }
.monitor-table .place { font-weight: 600; color: var(--color-neutral-900); }
.monitor-table .row-link { font-weight: 600; color: var(--color-neutral-900); text-decoration: none; font-variant-numeric: tabular-nums; }
.monitor-table .row-link:hover { text-decoration: underline; }
.monitor-table .col-rr .main { font-weight: 600; font-variant-numeric: tabular-nums; }
.monitor-table .col-dur, .monitor-table .col-area { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 639.98px) {
  .monitor-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .monitor-table { table-layout: auto; }
  .monitor-table colgroup { display: none; }
  .monitor-table, .monitor-table tbody, .monitor-table tr, .monitor-table td { display: block; }
  .monitor-table tr { padding: .75rem .9rem; border-bottom: 1px solid var(--color-neutral-200); display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; }
  .monitor-table td { padding: 0; border: 0; }
  .monitor-table .col-date { grid-column: 1; }
  .monitor-table .col-sri { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
  .monitor-table .col-place { grid-column: 1; }
  .monitor-table .col-dur::before { content: "Dauer "; color: var(--color-neutral-500); }
  .monitor-table .col-area::before { content: "Fläche "; color: var(--color-neutral-500); }
  .monitor-table .col-dur, .monitor-table .col-rr, .monitor-table .col-area { grid-column: 1 / -1; font-size: .8125rem; }
  .monitor-table .col-rr .sub { display: inline; margin-left: .4rem; }
  .monitor-table .col-link-mobile { display: inline-block; margin-left: .75rem; color: var(--color-red-600); font-weight: 600; text-decoration: none; }
}

/* SRI-Badge: Farbe + Zahl + Text (nie Farbe allein) */
.sri-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 1.6rem; padding: 0 .5rem; border-radius: 999px; font-family: var(--font-mono); font-weight: 700; font-size: .8rem; color: var(--color-neutral-900); background: var(--color-neutral-200); border: 1px solid transparent; }
.sri-badge.sri-starkregen, .sri-badge.sri-unter { background: #e5e5e5; color: #262626; }
.sri-badge.sri-intensiv { background: #fecaca; color: #7f1d1d; }
.sri-badge.sri-aussergewoehnlich { background: #b91c1c; color: #fff; }
.sri-badge.sri-extrem { background: #7f1d1d; color: #fff; }
.lg-dot { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); vertical-align: -2px; margin-right: .25rem; }
.lg-dot.sri-c1 { background: #a3a3a3; }
.lg-dot.sri-c2 { background: #fca5a5; }
.lg-dot.sri-c3 { background: #ef4444; }
.lg-dot.sri-c4 { background: #991b1b; }

.monitor-pagination { margin-top: 1rem; }
.monitor-pagination ul { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.monitor-pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .6rem; border-radius: var(--radius); border: 1px solid rgba(0,0,0,.1); text-decoration: none; color: var(--color-neutral-700); font-weight: 600; }
.monitor-pagination a.current { background: var(--color-red-600); color: #fff; border-color: var(--color-red-600); }
.monitor-pagination .gap { display: inline-flex; align-items: center; padding: 0 .3rem; color: var(--color-neutral-400); }

.monitor-empty { padding: 1.5rem; margin-top: .5rem; }
.monitor-empty p + p { margin-top: .5rem; color: var(--color-neutral-600); font-size: .9rem; }

/* --- Karte --------------------------------------------------------------- */
.monitor-map { position: relative; height: 70vh; min-height: 420px; max-height: 820px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(0,0,0,.08); background: #f3f4f6; isolation: isolate; }
.monitor-map-detail { height: 52vh; min-height: 320px; margin-top: 1rem; }
@media (max-width: 639.98px) { .monitor-map { height: 60vh; min-height: 360px; } }
.monitor-map:focus-visible { outline: 3px solid rgba(239,68,68,.55); outline-offset: 2px; }
.monitor-map-loading, .monitor-map-noscript { position: absolute; inset: auto 1rem 1rem; margin: 0; padding: .5rem .75rem; background: rgba(255,255,255,.9); border-radius: var(--radius); font-size: .8rem; color: var(--color-neutral-600); z-index: 2; }
.monitor-map.is-ready .monitor-map-loading { display: none; }
.monitor-map .leaflet-container { font: inherit; }
.monitor-map .leaflet-control-attribution { font-size: 10px; }
.monitor-map .leaflet-popup-content { font-size: .85rem; line-height: 1.4; margin: .75rem .9rem; }
.monitor-map .leaflet-popup-content h3 { font-size: .95rem; margin: 0 0 .25rem; }
.monitor-map .leaflet-popup-content a.btn { margin-top: .5rem; color: #fff; }
.monitor-map .leaflet-popup-content a.btn:hover { color: #fff; }
.monitor-map .ev-marker { transition: transform .15s; }
.monitor-legend { margin-top: .75rem; font-size: .8rem; color: var(--color-neutral-600); }
.monitor-legend-title { font-weight: 600; color: var(--color-neutral-700); }
.monitor-legend-list { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; margin: .35rem 0 0; padding: 0; }
.monitor-legend-note { margin-top: .4rem; font-size: .75rem; line-height: 1.2rem; color: var(--color-neutral-500); }
.monitor-map-status { position: absolute; z-index: 400; right: .75rem; top: .75rem; max-width: 60%; padding: .35rem .6rem; background: rgba(255,255,255,.92); border-radius: var(--radius); font-size: .75rem; color: var(--color-neutral-700); box-shadow: 0 4px 12px -6px rgba(0,0,0,.3); }
.monitor-map .cluster-icon { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(220,38,38,.85); color: #fff; font-weight: 700; font-size: .8rem; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); }

/* --- Statistik ---------------------------------------------------------------- */
.monitor-stats-grid { display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .monitor-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.monitor-chart { margin: 0; padding: 1.1rem 1.25rem; }
.monitor-chart figcaption { font-weight: 600; font-size: .9rem; color: var(--color-neutral-900); margin-bottom: .6rem; }
.monitor-bars { width: 100%; border-collapse: collapse; font-size: .8rem; }
.monitor-bars th { text-align: left; font-weight: 500; color: var(--color-neutral-600); padding: .2rem .6rem .2rem 0; width: 42%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.monitor-bars td { padding: .2rem 0; }
.monitor-bars .bar { display: inline-block; height: .8rem; width: var(--w, 0%); min-width: 2px; background: var(--color-red-500); border-radius: 2px; vertical-align: middle; }
.monitor-bars tr.sev-unter .bar, .monitor-bars tr.sev-starkregen .bar { background: #a3a3a3; }
.monitor-bars tr.sev-intensiv .bar { background: #fca5a5; }
.monitor-bars tr.sev-aussergewoehnlich .bar { background: #ef4444; }
.monitor-bars tr.sev-extrem .bar { background: #991b1b; }
.monitor-bars .num { margin-left: .45rem; font-variant-numeric: tabular-nums; color: var(--color-neutral-900); }
.monitor-bars-compact th { width: 22%; }

/* --- Detailseite --------------------------------------------------------------- */
.stat-tiles.cols-5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 768px) { .stat-tiles.cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.monitor-tiles { margin-top: 1.5rem; }
.stat-tile.sev-extrem .value { color: #991b1b; }
.monitor-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.monitor-actions .btn { min-height: 44px; }
.monitor-version-note { margin-top: 1.25rem; padding: .85rem 1rem; border-radius: var(--radius-lg); background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.3); font-size: .9rem; }
.monitor-caveats { margin-top: 1rem; padding: 1rem 1.25rem; font-size: .875rem; color: var(--color-neutral-700); }
.monitor-caveats ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.monitor-dl { display: grid; gap: 0; margin-top: 1rem; border-top: 1px solid var(--color-neutral-200); }
.monitor-dl-row { display: grid; grid-template-columns: 1fr; gap: .15rem .75rem; padding: .6rem 0; border-bottom: 1px solid var(--color-neutral-200); }
@media (min-width: 640px) { .monitor-dl-row { grid-template-columns: minmax(0, 18rem) 1fr; } }
.monitor-dl dt { font-size: .85rem; color: var(--color-neutral-600); display: flex; align-items: center; gap: .4rem; }
.monitor-dl dd { margin: 0; font-weight: 600; color: var(--color-neutral-900); font-size: .95rem; }
.monitor-dl-compact dd { font-weight: 400; font-size: .85rem; color: var(--color-neutral-700); }
.monitor-dl-compact dt code { font-size: .75rem; color: var(--color-neutral-500); }
.monitor-dl-compact .unit { font-size: .75rem; color: var(--color-neutral-500); }
.tip-btn { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); background: #fff; font: inherit; font-size: .7rem; font-weight: 700; color: var(--color-neutral-600); cursor: pointer; flex-shrink: 0; }
.tip-btn[aria-expanded=true] { background: var(--color-red-600); color: #fff; border-color: var(--color-red-600); }
.tip-btn:focus-visible { outline: 3px solid rgba(239,68,68,.55); outline-offset: 2px; }
.tip-body { display: block; margin-top: .35rem; font-weight: 400; font-size: .8rem; line-height: 1.25rem; color: var(--color-neutral-600); }
.tip-body em { display: block; font-style: normal; font-size: .72rem; color: var(--color-neutral-500); }
.monitor-h3 { margin-top: 1.25rem; font-size: 1rem; font-weight: 700; color: var(--color-neutral-900); }
.monitor-related .ev-sri { align-items: flex-end; }
.monitor-cta { margin-top: 2.5rem; }
.monitor-sources { font-size: .875rem; }
.monitor-attribution { margin-top: .75rem; font-weight: 600; color: var(--color-neutral-800, #262626); }
.monitor-source-list { margin: .75rem 0 0; padding-left: 1.1rem; color: var(--color-neutral-600); display: grid; gap: .3rem; font-size: .8125rem; line-height: 1.3rem; }
.monitor-explainer .content-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.method-details .count { color: var(--color-neutral-500); font-weight: 400; }

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .monitor-table tbody tr, .mf-field input, .mf-field select, .monitor-map .ev-marker { transition: none; }
  .leaflet-zoom-anim .leaflet-zoom-animated { transition: none !important; }
}

/* --- Druckansicht ----------------------------------------------------------- */
.monitor-print { font-family: 'Poppins', system-ui, sans-serif; color: #171717; background: #fff; margin: 0; }
.print-main { max-width: 52rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.print-brand { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #dc2626; font-weight: 700; margin: 0 0 .5rem; }
.print-head h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .3rem; }
.print-sub { color: #525252; margin: 0 0 .75rem; font-size: .9rem; }
.print-summary { font-size: .95rem; line-height: 1.55; margin: 0 0 .75rem; }
.print-actions { font-size: .85rem; }
.print-actions button { font: inherit; padding: .4rem .9rem; border-radius: 8px; border: 1px solid #ccc; background: #fff; cursor: pointer; margin-right: .5rem; }
.print-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin: 1rem 0; }
.print-tiles div { border: 1px solid #e5e5e5; border-radius: 8px; padding: .6rem .5rem; text-align: center; }
.print-tiles b { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: #dc2626; font-size: 1rem; }
.print-tiles span { font-size: .7rem; color: #525252; }
.print-note { font-size: .8rem; color: #525252; line-height: 1.4; }
.print-group { margin-top: 1.25rem; break-inside: avoid; }
.print-group h2 { font-size: 1rem; margin: 0 0 .35rem; padding-bottom: .25rem; border-bottom: 1px solid #e5e5e5; }
.print-group table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.print-group th { text-align: left; font-weight: 500; color: #525252; padding: .25rem .6rem .25rem 0; width: 42%; vertical-align: top; }
.print-group td { padding: .25rem 0; font-weight: 600; }
.print-foot { margin-top: 1.5rem; font-size: .72rem; color: #525252; line-height: 1.4; border-top: 1px solid #e5e5e5; padding-top: .75rem; }
.print-foot ul { padding-left: 1rem; margin: .4rem 0; }
@media print {
  .print-actions { display: none; }
  .print-main { padding: 0; max-width: none; }
  @page { margin: 14mm; }
}

/* --- FAQ auf dem Hub ---------------------------------------------------- */
.monitor-faq .faq-list { margin-top: 1rem; }

/* --- Datenzeile auf der Detailseite (leise statt Buttonreihe) ------------ */
.monitor-data-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: 1rem; font-size: .875rem; color: var(--color-neutral-600); }
.monitor-data-label { font-weight: 600; color: var(--color-neutral-700); }
.monitor-data-line a.link-underline { min-height: 44px; display: inline-flex; align-items: center; color: var(--color-neutral-900); }
.monitor-data-note { font-size: .75rem; color: var(--color-neutral-500); flex-basis: 100%; }
.monitor-data-cta { margin-left: auto; }
@media (max-width: 639.98px) { .monitor-data-cta { margin-left: 0; } }
@media print {
  .site-header, .site-footer, .monitor-data-line, .monitor-cta, .tip-btn, .monitor-map, .monitor-legend-note, .breadcrumb { display: none !important; }
  .monitor-main { max-width: none; }
  .tip-body[hidden] { display: none; }
  .stat-tiles.cols-5 { grid-template-columns: repeat(5, 1fr); }
  body { background: #fff; }
}