/* SignalCare Dashboard – aus dashboard.html ausgelagert (2026-10-04), Inhalt unverändert. */
@font-face{font-family:'Hind';src:local('Hind Regular'),url('/fonts/hind-400.woff2')format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hind';src:local('Hind Medium'),url('/fonts/hind-500.woff2')format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Hind';src:local('Hind SemiBold'),url('/fonts/hind-600.woff2')format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Hind';src:local('Hind Bold'),url('/fonts/hind-700.woff2')format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root {
  --sc-primary:     #0A4A73;
  --sc-primary-d:   #083A5A;
  --sc-primary-l:   #F0F4F7;
  --sc-ok:          #10B981;
  --sc-ok-d:        rgba(16,185,129,.1);
  --sc-mangel:      #F59E0B;
  --sc-mangel-d:    rgba(245,158,11,.1);
  --sc-kritisch:    #EF4444;
  --sc-kritisch-d:  rgba(239,68,68,.1);
  --sc-ersetzen:    #9333EA;
  --sc-ersetzen-d:  rgba(147,51,234,.1);
  --bg:             #F8FAFC;
  --card:           #FFFFFF;
  --bdr:            #E2E8F0;
  --t1:             #0F172A;
  --t2:             #475569;
  --t3:             #94A3B8;
  --r-md:           10px;
  --r-lg:           14px;
  --r-xl:           18px;
  --fd: 'Hind', sans-serif;
  --f-display: 'Hind', sans-serif;
  --fm: 'SF Mono', Menlo, Consolas, monospace;
  /* Signalplaner-Symbole: Form UND Farbe tragen die Bedeutung (siehe spBadgeSvg).
     temporär = gelbes Quadrat, Bestand-Status als Badge (Dreieck/Quadrat/Kreis). */
  --sp-temp:          #EAB308;
  --sp-kontur:        #1F2937;
  --sp-badge-pruefen: #F97316;
  --sp-badge-gedeckt: #64748B;
  --sp-badge-entfernt: var(--sc-kritisch);
  --sp-badge-bleibt:  var(--sc-ok);
  /* Statusbalken über der Karte: Text ≥ 7:1 auf dem jeweiligen Hintergrund */
  --sp-status-entwurf-bg:    #E6EEF4;
  --sp-status-entwurf-text:  var(--sc-primary-d);
  --sp-status-final-bg:      #E7F7F0;
  --sp-status-final-text:    #065F46;
  --sp-status-abgelaufen-bg: #FFF1E6;
  --sp-status-abgelaufen-text: #9A3412;
  --sp-status-abgelaufen:    #EA580C;
  --sp-warnung-text:         #92400E;
  --sp-warnung-bg:           #FFFBEB;
  /* Gefahr-Aktionen (Plan löschen) und Fehlertexte: dunkleres Rot als --sc-kritisch für ≥ 4.5:1 auf Weiss */
  --sp-gefahr-text:          #B91C1C;
  --sp-gefahr-text-d:        #991B1B;
  --sp-fokusring:            rgba(10,74,115,.15);
  /* Tabs der Seitenleiste (Segment-Stil, bewusst anders als Aktionsknöpfe) */
  --sp-seg-bg:               #E9EEF3;
  /* Schrittleiste: erledigter Schritt (weisser Haken, Kontrast ≥ 4.5:1) */
  --sp-schritt-ok:           #047857;
  /* Kurz-Tour: Abdunkelung ausserhalb des hervorgehobenen Elements */
  --sp-tour-dunkel:          rgba(15,23,42,.55);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--fd); background: var(--bg); color: var(--t1); -webkit-font-smoothing: antialiased; min-height: 100vh; }

/* HEADER */
.hdr {
  background: var(--card); border-bottom: 1px solid var(--bdr);
  padding: 0 32px; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 200;
}
.hdr-left { display: flex; align-items: center; gap: 12px; }
.hdr-logo {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.hdr-logo-mark {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--sc-primary);
  display: flex; align-items: center; justify-content: center;
}
.hdr-logo-mark svg { width: 17px; height: 17px; }
.hdr-brand { font-family: var(--f-display); font-weight: 800; font-size: 16px; color: var(--t1); }
.hdr-sep { width: 1px; height: 20px; background: var(--bdr); }
.hdr-gemeinde { font-size: 13px; font-weight: 600; color: var(--t2); }
.gemeinde-switcher {
  font-size: 13px; font-weight: 600; color: var(--t2);
  border: 1px solid var(--bdr); border-radius: 6px; padding: 4px 8px;
  background: var(--bg); cursor: pointer;
}
.hdr-right { display: flex; align-items: center; gap: 10px; }
.hdr-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sc-primary), var(--sc-primary-d));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.hdr-username { font-size: 13px; font-weight: 600; color: var(--t2); }
.btn-report {
  background: var(--sc-primary); color: #fff; border: none;
  padding: 8px 16px; border-radius: var(--r-md);
  font-family: var(--fd); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background .15s;
  display: flex; align-items: center; gap: 6px;
}
.btn-report:hover { background: var(--sc-primary-d); }
.btn-logout {
  background: none; border: 1px solid var(--bdr); color: var(--t2);
  padding: 7px 14px; border-radius: var(--r-md);
  font-family: var(--fd); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; gap: 6px;
}
.btn-logout:hover { border-color: var(--sc-kritisch); color: var(--sc-kritisch); }

/* TABS */
.tabs {
  background: var(--card); border-bottom: 1px solid var(--bdr);
  padding: 0 32px; display: flex; gap: 4px;
}
.tab {
  padding: 14px 18px; border: none; background: none;
  font-family: var(--fd); font-size: 14px; font-weight: 600;
  color: var(--t3); cursor: pointer; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  display: flex; align-items: center; gap: 6px;
}
.tab:hover { color: var(--t2); }
.tab.active { color: var(--sc-primary); border-bottom-color: var(--sc-primary); }
.tab svg { width: 15px; height: 15px; }

/* MAIN CONTENT */
.main { padding: 24px 32px; max-width: 1400px; margin: 0 auto; }

/* TAB PANELS */
.panel { display: none; }
.panel.active { display: block; }

/* RECHTSGRUNDLAGEN */
.legal-intro { padding: 20px; background: var(--sc-primary-l); border-radius: 12px; margin-bottom: 20px; border-left: 4px solid var(--sc-primary); }
.legal-intro h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.legal-intro p { font-size: 14px; color: var(--t2); line-height: 1.6; }
.legal-item { padding: 12px 14px; background: var(--card); border-left: 3px solid var(--sc-primary); border-radius: 8px; margin-bottom: 10px; display: grid; grid-template-columns: 140px 1fr; gap: 14px; border: 1px solid var(--bdr); }
.legal-ref { font-family: var(--fm); font-weight: 600; font-size: 13px; }
.legal-ref a { color: var(--sc-primary); text-decoration: none; }
.legal-ref a:hover { text-decoration: underline; }
.legal-desc { font-size: 13px; color: var(--t2); line-height: 1.5; }
.norm-row { display:flex; align-items:flex-start; gap:10px; padding:11px 0; border-bottom:1px solid var(--bdr); }
.norm-row:last-child { border-bottom:none; }
.norm-art  { font-family:var(--fm); font-size:11px; font-weight:700; color:var(--sc-primary); min-width:64px; padding-top:2px; }
.norm-txt  { font-size:13px; color:var(--t1); line-height:1.5; flex:1; }
.norm-sub  { font-size:11px; color:var(--t3); margin-top:3px; font-family:var(--fm); }
.norm-card { background:var(--card); border:1px solid var(--bdr); border-radius:12px; padding:14px 16px; margin-bottom:14px; }

/* KPI CARDS */
.kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 24px; }
.kpi {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-xl); padding: 20px 22px;
}
.kpi-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t3); margin-bottom: 8px; }
.kpi-val { font-family: var(--f-display); font-weight: 800; font-size: 36px; line-height: 1; }
.kpi-val.ok { color: var(--sc-ok); }
.kpi-val.mangel { color: var(--sc-mangel); }
.kpi-val.kritisch { color: var(--sc-kritisch); }
.kpi-val.ersetzen { color: var(--sc-ersetzen); }
.kpi-val.total { color: var(--t1); }
.kpi-val.offen { color: var(--t2); }
.kpi[hidden], .legend-item[hidden] { display: none; }
.kpi-val.kosten { color: var(--sc-primary); font-size: 28px; }
.kpi-sub { font-size: 11px; color: var(--t3); margin-top: 4px; }
.kpi-click { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.kpi-click:hover { border-color: var(--sc-primary); box-shadow: 0 4px 14px rgba(10,74,115,.12); }

/* TOOLBAR */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.search-wrap { position: relative; flex: 1; max-width: 320px; }
.search-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--t3); pointer-events: none; }
.search-inp {
  width: 100%; border: 1.5px solid var(--bdr); border-radius: var(--r-md);
  padding: 9px 13px 9px 34px; font-family: var(--fd); font-size: 14px;
  background: var(--card); color: var(--t1); outline: none;
  transition: border-color .2s;
}
.search-inp:focus { border-color: var(--sc-primary); }
.typ-select {
  border: 1.5px solid var(--bdr); border-radius: var(--r-md);
  padding: 8px 12px; font-family: var(--fd); font-size: 13px;
  background: var(--card); color: var(--t1); outline: none; cursor: pointer;
}
.sort-info { font-size: 12px; color: var(--t3); margin-left: auto; font-family: var(--fm); }

/* TABLE */
.table-wrap {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-xl); overflow: hidden;
}
table { width: 100%; border-collapse: collapse; }
thead tr { background: var(--bg); border-bottom: 1px solid var(--bdr); }
th {
  padding: 11px 16px; text-align: left;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--t3); font-family: var(--fm);
  cursor: pointer; user-select: none; white-space: nowrap;
}
th:hover { color: var(--t2); }
th.sorted { color: var(--sc-primary); }
tbody tr { border-bottom: 1px solid var(--bdr); transition: background .1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg); }
td { padding: 12px 16px; font-size: 13px; vertical-align: middle; }
.nr-cell { font-family: var(--fm); font-size: 12px; color: var(--t3); }
.typ-cell { font-weight: 600; }
.loc-cell { color: var(--t2); font-size: 12px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-cell { font-family: var(--fm); font-size: 11px; color: var(--t3); white-space: nowrap; }

/* BADGES */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.badge-ok { background: var(--sc-ok-d); color: var(--sc-ok); }
.badge-ok::before { background: var(--sc-ok); }
.badge-mangel { background: var(--sc-mangel-d); color: #B45309; }
.badge-mangel::before { background: var(--sc-mangel); }
.badge-kritisch { background: var(--sc-kritisch-d); color: var(--sc-kritisch); }
.badge-kritisch::before { background: var(--sc-kritisch); }
.badge-ersetzen { background: var(--sc-ersetzen-d); color: var(--sc-ersetzen); }
.badge-ersetzen::before { background: var(--sc-ersetzen); }
.badge-offen { background: var(--bg); color: var(--t2); }
.badge-offen::before { background: var(--t3); }
.badge-entwurf { background: var(--bg); color: var(--t2); }
.badge-entwurf::before { background: var(--t3); }
.badge-final { background: var(--sc-ok-d); color: var(--sc-ok); }
.badge-final::before { background: var(--sc-ok); }
.badge-abgelaufen { background: var(--sc-mangel-d); color: var(--sc-mangel); }
.badge-abgelaufen::before { background: var(--sc-mangel); }

/* INLINE SELECT */
.ws-select {
  border: 1.5px solid var(--bdr); border-radius: 8px;
  padding: 5px 28px 5px 10px; font-family: var(--fd); font-size: 12px;
  font-weight: 600; background: var(--bg); color: var(--t1);
  cursor: pointer; outline: none; transition: border-color .2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  min-width: 130px;
}
.ws-select:focus { border-color: var(--sc-primary); }
.ws-select.saving { opacity: .6; pointer-events: none; }

/* MAP */
#map { height: 520px; border-radius: var(--r-xl); border: 1px solid var(--bdr); overflow: hidden; }
/* Reiter «Bestand»: Kennzahlen kompakt in einer Zeile, damit die Karte oben sichtbar bleibt;
   Liste direkt unter der Karte */
#panel-karte .kpi-row { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-bottom: 14px; }
#panel-karte .kpi { padding: 10px 14px; border-radius: var(--r-lg); }
#panel-karte .kpi-label { font-size: 10px; letter-spacing: 1px; margin-bottom: 4px; }
#panel-karte .kpi-val { font-size: 24px; }
#panel-karte .kpi-val.kosten { font-size: 19px; }
#panel-karte .kpi-sub { margin-top: 2px; }
#panel-karte .map-legend { margin-bottom: 10px; }
.bestand-liste { margin-top: 24px; scroll-margin-top: 16px; }
.map-legend {
  display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; max-width: 100%;
  margin-bottom: 12px; padding: 10px 16px;
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-md); width: fit-content; font-size: 12px; font-weight: 600;
}
.legend-item { display: flex; align-items: center; gap: 6px; color: var(--t2); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }

/* HISTORY TABLE */
.hist-table-wrap {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-xl); overflow: hidden;
}
.hist-empty {
  padding: 48px; text-align: center;
  color: var(--t3); font-size: 14px;
}

/* GIS-ZUGANG */
.gis-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r-xl); padding: 20px 22px; margin-bottom: 16px; }
.gis-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bdr); flex-wrap: wrap; }
.gis-row:last-child { border-bottom: none; }
.gis-mono { font-family: var(--fm); font-size: 13px; background: var(--bg); border: 1px solid var(--bdr); border-radius: 8px; padding: 8px 12px; word-break: break-all; }
.gis-explain { padding: 20px; background: var(--sc-primary-l); border-radius: 12px; border-left: 4px solid var(--sc-primary); font-size: 13px; color: var(--t2); line-height: 1.6; }

/* SIGNALPLANUNG */
.sp-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.sp-btn { border: 1.5px solid var(--bdr); border-radius: var(--r-md); padding: 8px 14px; font-family: var(--fd); font-size: 13px; font-weight: 600; background: var(--card); color: var(--t1); cursor: pointer; transition: border-color .15s; }
.sp-btn:hover { border-color: var(--sc-primary); }
.sp-btn:disabled { opacity: .5; cursor: not-allowed; }
.sp-btn.active { background: var(--sc-primary); border-color: var(--sc-primary); color: #fff; }
/* Arbeitsbereich als Flex-Spalte: Toolbar und Baustellen-Angaben nehmen ihre Höhe, die
   Seitenleiste/Karte den Rest bis zum Fensterrand. --sp-tool-abzug = Oberkante des Panels
   + Rand unten, gemessen in spLayoutHoeheAnpassen (signalplan-bedienung.js). */
#signalplanungTool { display: flex; flex-direction: column; min-height: calc(100vh - var(--sp-tool-abzug, 157px)); min-height: calc(100dvh - var(--sp-tool-abzug, 157px)); }
#signalplanungTool > * { flex-shrink: 0; }
/* Die Zeile Seitenleiste/Karte füllt den Rest; ihre Mindesthöhe ergibt sich aus der Karten-
   spalte (Statusbalken + Karte ≥ 440 px). Auf niedrigen Bildschirmen (Tablet quer) scrollt
   lieber die Seite ein Stück, als dass die Karte schrumpft. Die Seitenleiste zählt für die
   Höhe nicht mit (contain: size) – sonst wüchse die Zeile auf die ganze Bibliothek; sie
   füllt die Zeile und scrollt intern. */
#signalplanungTool > .sp-layout { flex: 1 0 auto; }
#signalplanungTool .sp-sidebar { contain: size; }
.sp-layout { display: grid; grid-template-columns: 320px 1fr; gap: 20px; }

/* Toolbar: [Plan] [eine Primäraktion] [⋯ Weitere] · Gültigkeit · Baustellen-Angaben.
   Die Ebenen-Schalter sind seit Phase C Häkchen im Ebenen-Menü der Karte. */
.sp-toolbar [hidden], .sp-menu[hidden], #signalplanungTool [hidden] { display: none !important; }
#signalplanungTool .sp-toolbar { gap: 8px; }
#signalplanungTool .sp-toolbar .sp-btn, #signalplanungTool .sp-toolbar .typ-select { min-height: 40px; }
.sp-plan-select { min-width: 180px; max-width: 270px; text-overflow: ellipsis; }
.sp-primaer { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sp-btn-primaer { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--sc-primary); border-color: var(--sc-primary); color: #fff; }
.sp-btn-primaer:hover:not(:disabled) { background: var(--sc-primary-d); border-color: var(--sc-primary-d); }
.sp-primaer-hinweis { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1.5px dashed var(--bdr); border-radius: var(--r-md); font-size: 13px; font-weight: 600; color: var(--t2); line-height: 1.3; }
.sp-primaer-hinweis.is-sperre { border-color: var(--sc-mangel); color: var(--sp-warnung-text); background: var(--sc-mangel-d); }
/* Sperrgrund neben «Plan freigeben»: antippbar, öffnet den Tab «Bestand prüfen» */
.sp-sperrgrund { gap: 6px; font-family: var(--fd); text-align: left; cursor: pointer; }
.sp-sperrgrund svg { flex-shrink: 0; }
.sp-sperrgrund span { text-decoration: underline; text-underline-offset: 2px; }
.sp-sperrgrund:hover { border-style: solid; }
.sp-sperrgrund:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 2px; }
.sp-menu { position: relative; }
.sp-menu-btn { display: inline-flex; align-items: center; gap: 6px; }
.sp-menu-btn[aria-expanded="true"] { border-color: var(--sc-primary); }
.sp-menu-liste { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1100; display: flex; flex-direction: column; min-width: 270px; max-width: calc(100vw - 24px); padding: 6px; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(15,23,42,.18); }
.sp-menu-liste.is-rechts { left: auto; right: 0; }
.sp-menu-eintrag { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: none; border-radius: 8px; background: none; font: 600 14px/1.25 var(--fd); color: var(--t1); text-align: left; cursor: pointer; }
.sp-menu-eintrag svg { flex-shrink: 0; color: var(--t2); }
.sp-menu-eintrag:hover, .sp-menu-eintrag:focus-visible { background: var(--sc-primary-l); color: var(--sc-primary-d); outline: none; }
.sp-menu-eintrag:focus-visible { box-shadow: inset 0 0 0 2px var(--sc-primary); }
.sp-menu-haken { visibility: hidden; }
.sp-menu-eintrag[aria-checked="true"] .sp-menu-haken { visibility: visible; color: var(--sc-primary); }
.sp-menu-gefahr, .sp-menu-gefahr svg { color: var(--sp-gefahr-text); }
.sp-menu-gefahr:hover, .sp-menu-gefahr:focus-visible { background: var(--sc-kritisch-d); color: var(--sp-gefahr-text-d); }
.sp-menu-trenner { height: 1px; margin: 6px 4px; background: var(--bdr); }
.sp-gueltigkeit { align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--t2); }
.sp-gueltigkeit input { min-height: 40px; padding: 6px 8px; border: 1.5px solid var(--bdr); border-radius: 8px; font: 13px var(--fd); background: var(--card); color: var(--t1); min-width: 0; }
.sp-gueltigkeit input:disabled { background: var(--bg); color: var(--t2); cursor: not-allowed; }
.sp-gueltigkeit.is-warnung input:not(:disabled) { border-color: var(--sc-mangel); background: var(--sp-warnung-bg); }
.sp-meta-btn { display: inline-flex; align-items: center; gap: 6px; }
.sp-meta-btn[aria-expanded="true"] { border-color: var(--sc-primary); color: var(--sc-primary-d); }
.sp-meta-btn-info { display: inline-flex; color: var(--sp-status-final-text); }
.sp-meta-btn-info:empty { display: none; }
.sp-meta-pfeil { flex-shrink: 0; transition: transform .15s; }
.sp-meta-btn[aria-expanded="true"] .sp-meta-pfeil { transform: rotate(180deg); }

/* Statusbalken über der Karte (updateSpToolbarHint) */
.sp-statusbalken { display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px; border: 1px solid var(--bdr); border-left-width: 4px; border-radius: var(--r-md); background: var(--bg); color: var(--t1); font-size: 14px; line-height: 1.4; }
.sp-status-icon { display: flex; flex-shrink: 0; padding-top: 1px; color: var(--t2); }
.sp-status-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.sp-status-zeile b { font-weight: 700; }
.sp-status-schritt { color: var(--t2); }
.sp-status-warnung { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0; padding: 3px 8px; border-radius: 6px; background: var(--sc-mangel-d); color: var(--sp-warnung-text); font-weight: 600; width: fit-content; max-width: 100%; }
.sp-status-warnung svg { flex-shrink: 0; margin-top: 2px; }
.sp-statusbalken.is-entwurf { background: var(--sp-status-entwurf-bg); border-color: var(--sc-primary); color: var(--sp-status-entwurf-text); }
.sp-statusbalken.is-final { background: var(--sp-status-final-bg); border-color: var(--sc-ok); color: var(--sp-status-final-text); }
.sp-statusbalken.is-abgelaufen { background: var(--sp-status-abgelaufen-bg); border-color: var(--sp-status-abgelaufen); color: var(--sp-status-abgelaufen-text); }
.sp-statusbalken:not(.is-leer) .sp-status-icon, .sp-statusbalken:not(.is-leer) .sp-status-schritt { color: inherit; }
.sp-status-text { flex: 1 1 auto; }
/* Knopf «Details» und kurzes Warnsymbol nur auf dem Handy (einzeiliger Balken, siehe unten) */
.sp-status-mehr, .sp-status-warn-kurz { display: none; }

/* Schrittleiste (renderSpSchritte, signalplan-schritte.js): vier antippbare Schritte.
   Erledigt = grüner Kreis mit Haken, aktuell = blau hinterlegt (aria-current=step). */
.sp-schritte { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sp-schritte-liste { list-style: none; display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; }
.sp-schritt { display: flex; flex: 1 1 0; min-width: 0; }
.sp-schritt-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 40px; padding: 4px 12px 4px 5px; border: 1px solid var(--bdr); border-radius: 99px; background: var(--card); font: 600 13px/1.2 var(--fd); color: var(--t2); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.sp-schritt-btn:hover { border-color: var(--sc-primary); color: var(--t1); }
.sp-schritt-btn:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 2px; }
.sp-schritt-nr { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border: 1.5px solid var(--t3); border-radius: 50%; background: var(--card); font: 700 13px/1 var(--fd); color: var(--t2); }
.sp-schritt-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-schritt-von, .sp-schritt-kurz, .sp-schritte-fertig { display: none; }
.sp-schritt.is-erledigt .sp-schritt-btn { color: var(--t1); }
.sp-schritt.is-erledigt .sp-schritt-nr { background: var(--sp-schritt-ok); border-color: var(--sp-schritt-ok); color: #fff; }
.sp-schritt.is-aktuell .sp-schritt-btn { border-color: var(--sc-primary); background: var(--sc-primary-l); color: var(--sc-primary-d); box-shadow: inset 0 0 0 1px var(--sc-primary); }
.sp-schritt.is-aktuell .sp-schritt-nr { background: var(--sc-primary); border-color: var(--sc-primary); color: #fff; }
@media (max-width: 1100px) {
  /* Nur der aktuelle Schritt mit vollem Namen, die anderen mit Kurznamen */
  .sp-schritt.is-aktuell { flex: 2 1 0; }
  .sp-schritt:not(.is-aktuell) .sp-schritt-lang { display: none; }
  .sp-schritt:not(.is-aktuell) .sp-schritt-kurz { display: inline; }
}

/* Leerzustand als Hinweis-Kärtchen mitten auf der Karte (renderSpLeerKarte). Nur das
   Kärtchen fängt Klicks ab; z-index über den Kartenebenen (Leaflet-Panes 400), unter
   Legende (740), Hinweisleiste (750) und Leaflet-Bedienelementen (800/1000). Rand oben für
   die Strassensuche, seitlich für Zoom/Zeichenwerkzeuge und das Ebenen-Menü. */
.sp-leer-karte { position: absolute; inset: 0; z-index: 700; display: flex; align-items: center; justify-content: center; padding: 64px 56px max(40px, var(--sp-legende-platz, 0px)); pointer-events: none; }
.sp-leer-inhalt { width: 100%; max-width: 340px; max-height: 100%; overflow-y: auto; padding: 16px 18px; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r-lg); box-shadow: 0 8px 28px rgba(15,23,42,.22); text-align: center; pointer-events: auto; }
.sp-leer-inhalt h3 { margin-bottom: 6px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--t1); }
.sp-leer-inhalt p { font-size: 14px; line-height: 1.45; color: var(--t2); }
.sp-leer-inhalt .sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 12px; }

/* Kurz-Tour (signalplan-hilfe.js): Sperre über der Seite, Ring um das Ziel (dunkelt den Rest
   über einen breiten Schatten ab), Sprechblase daneben. Über Dialogen und Toasts. */
.sp-tour-sperre { position: fixed; inset: 0; z-index: 10010; }
.sp-tour.ohne-ziel .sp-tour-sperre { background: var(--sp-tour-dunkel); }
.sp-tour-ring { position: fixed; z-index: 10011; border-radius: 12px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--sc-primary), 0 0 0 200vmax var(--sp-tour-dunkel); pointer-events: none; transition: left .2s, top .2s, width .2s, height .2s; }
.sp-tour.ohne-ziel .sp-tour-ring { display: none; }
.sp-tour-blase { position: fixed; z-index: 10012; width: min(340px, calc(100vw - 24px)); padding: 16px 18px; background: var(--card); border-radius: var(--r-lg); box-shadow: 0 16px 40px rgba(15,23,42,.35); }
.sp-tour-zahl { margin-bottom: 4px; font: 700 12px/1.2 var(--fd); color: var(--t2); }
.sp-tour-blase h2 { margin-bottom: 6px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--t1); }
.sp-tour-blase p { font-size: 14px; line-height: 1.5; color: var(--t2); }
.sp-tour-fuss { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.sp-tour-fuss .sp-btn { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.sp-tour-ende { min-height: 44px; margin-right: auto; padding: 6px 2px; border: none; background: none; font: 600 13px var(--fd); color: var(--t2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sp-tour-weiter { background: var(--sc-primary); border-color: var(--sc-primary); color: #fff; }
.sp-tour-weiter:hover { background: var(--sc-primary-d); border-color: var(--sc-primary-d); }
.sp-tour-fuss button:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sp-tour-ring { transition: none; } }

/* Hilfe-Seitenpanel (signalplan-hilfe.js): rechts unter der Kopfzeile, Handy Vollbild.
   Nicht modal – die Karte daneben bleibt bedienbar. --sp-hilfe-oben = Höhe der Kopfzeile. */
.sp-hilfe { position: fixed; top: var(--sp-hilfe-oben, 0px); right: 0; bottom: 0; z-index: 9000; display: flex; flex-direction: column; width: 360px; max-width: 100vw; background: var(--card); border-left: 1px solid var(--bdr); box-shadow: -12px 0 32px rgba(15,23,42,.18); }
.sp-hilfe-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--bdr); }
.sp-hilfe-kopf h2 { font-size: 17px; font-weight: 700; color: var(--t1); outline: none; }
.sp-hilfe-kopf h2:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.sp-hilfe-x { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: none; border-radius: 8px; background: none; color: var(--t2); cursor: pointer; }
.sp-hilfe-x:hover { background: var(--bg); color: var(--t1); }
.sp-hilfe-x:focus-visible, .sp-hilfe-tour:focus-visible, .sp-hilfe-allgemein:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 2px; }
.sp-hilfe-inhalt { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); }
.sp-hilfe-intro { font-size: 14px; line-height: 1.5; color: var(--t2); }
.sp-hilfe-tour { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 14px; font-size: 14px; }
.sp-hilfe-inhalt h3 { margin: 22px 0 10px; font-size: 14px; font-weight: 700; color: var(--sc-primary-d); }
.sp-hilfe-schritte { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.sp-hilfe-schritte li { display: flex; align-items: flex-start; gap: 10px; }
.sp-hilfe-nr { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sc-primary); font: 700 13px/1 var(--fd); color: #fff; }
.sp-hilfe-schritte h4 { margin: 3px 0 2px; font-size: 14px; font-weight: 700; color: var(--t1); }
.sp-hilfe-schritte p, .sp-hilfe-glossar dd { font-size: 13px; line-height: 1.5; color: var(--t2); }
.sp-hilfe-glossar dt { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--t1); }
.sp-hilfe-glossar dt:first-child { margin-top: 0; }
.sp-hilfe-allgemein { margin-top: 22px; text-align: left; }

/* Formular-Dialog (zeigeSpDialog) */
.sp-dialog-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15,23,42,.45); }
.sp-dialog { width: 100%; max-width: 460px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px 22px 22px; background: var(--card); border-radius: var(--r-lg); box-shadow: 0 20px 50px rgba(15,23,42,.3); }
.sp-dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.sp-dialog-kopf h2 { font-size: 17px; font-weight: 700; color: var(--t1); }
.sp-dialog-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; border: none; border-radius: 8px; background: none; color: var(--t2); cursor: pointer; flex-shrink: 0; }
.sp-dialog-x:hover { background: var(--bg); color: var(--t1); }
.sp-dialog-text { margin-bottom: 14px; font-size: 13px; line-height: 1.5; color: var(--t2); }
.sp-dialog-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.sp-dialog-feld { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sp-dialog-feld.is-halb { grid-column: auto; }
.sp-dialog-feld label { font-size: 13px; font-weight: 600; color: var(--t1); }
.sp-dialog-optional { font-weight: 400; color: var(--t2); }
.sp-dialog-feld input, .sp-dialog-feld textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--bdr); border-radius: 8px; font: 16px/1.3 var(--fd); background: var(--card); color: var(--t1); outline: none; }
.sp-dialog-feld textarea { min-height: 84px; resize: vertical; }
.sp-dialog-feld input:focus, .sp-dialog-feld textarea:focus { border-color: var(--sc-primary); box-shadow: 0 0 0 3px var(--sp-fokusring); }
.sp-dialog-feld [aria-invalid="true"] { border-color: var(--sc-kritisch); }
.sp-dialog-hinweis { font-size: 12px; line-height: 1.4; color: var(--t2); }
.sp-dialog-fehler { font-size: 13px; font-weight: 600; color: var(--sp-gefahr-text); }
.sp-dialog-fehler-allg { margin-top: 14px; }
.sp-dialog-fuss { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.sp-dialog-fuss .sp-btn { min-height: 44px; padding: 8px 18px; font-size: 14px; }
.sp-sidebar { display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
/* Suchfeld nicht in die Höhe ziehen, wenn die Bibliothek leer ist (Symbol sass sonst mittig im Leerraum) */
.sp-sidebar .search-wrap { flex: none; max-width: none; }
/* Tabs «Bestand prüfen | Temporäre Signale»: Segment-Stil (eine Fläche, gewählter Teil
   weiss hinterlegt) – klar anders als die umrandeten Aktionsknöpfe */
.sp-seiten-kopf { display: flex; align-items: center; gap: 6px; flex: none; }
.sp-seiten-kopf .sp-seg { flex: 1 1 auto; min-width: 0; }
.sp-sheet-btn { display: none; }
.sp-seg { display: flex; flex: none; gap: 2px; padding: 3px; background: var(--sp-seg-bg); border-radius: var(--r-md); }
.sp-seg-tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; padding: 6px 8px; border: none; border-radius: 8px; background: transparent; font: 600 13px/1.2 var(--fd); color: var(--t2); text-align: center; cursor: pointer; transition: background .15s, color .15s; }
.sp-seg-tab:hover { color: var(--t1); }
.sp-seg-tab[aria-selected="true"] { background: var(--card); color: var(--sc-primary-d); box-shadow: 0 1px 3px rgba(15,23,42,.18); }
.sp-seg-tab:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 1px; }
.sp-seg-zahl { flex-shrink: 0; min-width: 22px; padding: 2px 6px; border: 1px solid var(--sp-badge-pruefen); border-radius: 99px; background: var(--sp-status-abgelaufen-bg); color: var(--sp-status-abgelaufen-text); font: 700 12px/1.1 var(--fd); }
.sp-tabpanel, .sp-palette { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.sp-palette-hinweis { display: flex; align-items: flex-start; gap: 10px; flex: none; padding: 12px 14px; border: 1px solid var(--sc-ok); border-radius: var(--r-md); background: var(--sp-status-final-bg); color: var(--sp-status-final-text); font-size: 14px; font-weight: 600; line-height: 1.4; }
.sp-palette-hinweis svg { flex-shrink: 0; margin-top: 1px; }
/* Bestand-Checkliste (renderSpBestandCheckliste): Kopf mit Zähler, Liste scrollt */
.sp-check { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; }
.sp-check-laden { padding: 24px 8px; color: var(--t2); font-size: 13px; }
.sp-check-leer { flex: none; padding: 14px; border: 1.5px dashed var(--bdr); border-radius: var(--r-md); background: var(--card); }
.sp-check-leer h3 { margin-bottom: 4px; font-size: 15px; font-weight: 700; color: var(--t1); }
.sp-check-leer p { font-size: 13px; line-height: 1.45; color: var(--t2); }
.sp-check-leer .sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 12px; }
.sp-btn-sekundaer { border-color: var(--sc-primary); color: var(--sc-primary-d); }
.sp-btn-sekundaer:hover { background: var(--sc-primary-l); }
.sp-check-link { display: block; width: 100%; min-height: 40px; margin-top: 4px; padding: 6px; border: none; background: none; font: 600 13px var(--fd); color: var(--sc-primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sp-check-kopf { flex: none; padding: 10px 12px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--card); }
.sp-check-titel { font-size: 15px; font-weight: 700; color: var(--t1); }
.sp-check-kopf.is-offen .sp-check-titel { color: var(--sp-status-abgelaufen-text); }
.sp-check-kopf.is-fertig .sp-check-titel { color: var(--sp-status-final-text); }
.sp-check-balken { height: 6px; margin: 8px 0 6px; border-radius: 99px; background: var(--bdr); overflow: hidden; }
.sp-check-balken > span { display: block; height: 100%; border-radius: inherit; background: var(--sc-ok); transition: width .2s; }
.sp-check-unter { font-size: 12px; line-height: 1.4; color: var(--t2); }
.sp-check-liste { list-style: none; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
.sp-check-zeile { flex: none; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.sp-check-zeile.is-offen { border-left: 4px solid var(--sp-badge-pruefen); }
.sp-check-mast { display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 44px; padding: 8px 10px; border: none; background: none; font: inherit; color: var(--t1); text-align: left; cursor: pointer; }
.sp-check-mast:hover:not(:disabled) { background: var(--sc-primary-l); }
.sp-check-mast:disabled { cursor: default; }
.sp-check-mast:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: -2px; }
.sp-check-mast-kopf { display: flex; align-items: center; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; font-size: 13px; }
.sp-check-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--t2); }
.sp-check-ort { font-size: 12px; line-height: 1.35; color: var(--t2); overflow-wrap: anywhere; }
.sp-check-signale { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sp-check-signale img { width: 24px; height: 24px; object-fit: contain; }
.sp-check-sig-ersatz { padding: 4px; border: 1px dashed var(--t3); border-radius: 4px; font: 700 10px/1 var(--fm); color: var(--t2); }
.sp-check-sig-mehr { font: 700 11px/1 var(--fm); color: var(--t2); }
.sp-check-aktionen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 10px 10px; }
.sp-check-aktion { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 44px; padding: 5px 4px; border: 1.5px solid var(--bdr); border-radius: 8px; background: var(--bg); font: 600 12px/1.15 var(--fd); color: var(--t1); overflow-wrap: anywhere; cursor: pointer; transition: border-color .15s, color .15s; }
.sp-check-aktion:hover { border-color: var(--sc-primary); color: var(--sc-primary); }
.sp-check-aktion.is-aktiv { border-color: var(--sc-primary); background: var(--sc-primary-l); color: var(--sc-primary-d); }
.sp-check-aktion:focus-visible, .sp-check-zurueck:focus-visible, .sp-check-link:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 1px; }
.sp-check-zurueck { display: block; min-height: 36px; margin: -4px 10px 6px auto; padding: 4px 6px; border: none; background: none; font: 600 12px var(--fd); color: var(--t2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sp-check-gps { display: flex; align-items: flex-start; gap: 6px; flex: none; font-size: 12px; line-height: 1.4; color: var(--t2); }
.sp-check-gps svg { flex-shrink: 0; margin-top: 1px; }
.sig-bib-grid { overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-right: 4px; align-content: start; }
.sig-bib-empty { grid-column: 1 / -1; padding: 32px; text-align: center; color: var(--t3); font-size: 13px; }

/* Signalpalette (Phase D, signalplan-palette.js): Suche + Ansicht, Kategorie-Chips,
   «Zuletzt verwendet» als eigene Zeile, darunter Kacheln (3–4 pro Reihe) oder Liste.
   Jede Kachel ist ein Knopf mit ≥ 44 px Trefferfläche; die gewählte trägt Rahmen,
   Hintergrund und Haken. */
.sp-palette-suche { display: flex; align-items: center; gap: 6px; flex: none; }
.sp-palette-suche .search-wrap { flex: 1 1 auto; min-width: 0; }
.sp-ansicht { display: flex; flex: none; gap: 2px; padding: 2px; background: var(--sp-seg-bg); border-radius: var(--r-md); }
.sp-ansicht-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 8px; background: transparent; color: var(--t2); cursor: pointer; }
.sp-ansicht-btn:hover { color: var(--t1); }
.sp-ansicht-btn[aria-pressed="true"] { background: var(--card); color: var(--sc-primary-d); box-shadow: 0 1px 3px rgba(15,23,42,.18); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.sp-chip { min-height: 32px; padding: 4px 11px; border: 1.5px solid var(--bdr); border-radius: 99px; background: var(--card); font: 600 12px/1.2 var(--fd); color: var(--t1); cursor: pointer; transition: border-color .15s, background .15s; }
.sp-chip:hover { border-color: var(--sc-primary); }
.sp-chip.is-aktiv { background: var(--sc-primary); border-color: var(--sc-primary); color: #fff; }
.sp-ansicht-btn:focus-visible, .sp-chip:focus-visible, .sig-bib-item:focus-visible, .sp-sheet-btn:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 1px; }
.sp-bib { display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 4px 2px; }
.sp-bib-abschnitt { display: flex; flex-direction: column; gap: 6px; flex: none; }
.sp-bib-titel { font: 700 12px/1.3 var(--fd); color: var(--t2); }
.sp-bib-zahl { font-weight: 400; }
.sp-bib-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.sp-bib.is-liste .sp-bib-liste { grid-template-columns: 1fr; gap: 4px; }
.sp-bib-leiste { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: 4px; }
.sp-bib-anderswo { display: inline-flex; margin-top: 12px; min-height: 40px; }
.sig-bib-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; min-height: 44px; padding: 6px 4px; border: 1.5px solid var(--bdr); border-radius: var(--r-md); background: var(--card); font: inherit; color: var(--t1); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.sig-bib-item:hover { border-color: var(--sc-primary); }
.sig-bib-item.selected { border-color: var(--sc-primary); background: var(--sc-primary-l); box-shadow: inset 0 0 0 1.5px var(--sc-primary); }
.sig-bib-item img, .sig-bib-bild-leer { display: block; width: 100%; height: 40px; object-fit: contain; flex: none; pointer-events: none; }
.sig-bib-bild-leer { width: 40px; border: 1.5px dashed var(--bdr); border-radius: 4px; }
.sig-bib-text { display: flex; flex-direction: column; gap: 1px; width: 100%; min-width: 0; }
.sig-bib-item .sig-bib-label { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; line-height: 1.25; color: var(--t1); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.sig-bib-item .sig-bib-nr { font: 10px/1.2 var(--fm); color: var(--t2); }
.sig-bib-haken { position: absolute; top: 3px; right: 3px; display: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--sc-primary); color: #fff; }
.sig-bib-item.selected .sig-bib-haken { display: flex; }
.sig-bib-item.is-kompakt { flex: 0 0 58px; padding: 5px 2px; scroll-snap-align: start; }
.sig-bib-item.is-kompakt img { height: 32px; }
.sig-bib-item.is-liste { flex-direction: row; gap: 10px; padding: 5px 34px 5px 8px; text-align: left; }
.sig-bib-item.is-liste img, .sig-bib-item.is-liste .sig-bib-bild-leer { width: 32px; height: 32px; }
.sig-bib-item.is-liste .sig-bib-text { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; }
.sig-bib-item.is-liste .sig-bib-label { font-size: 13px; line-height: 1.3; }
.sig-bib-item.is-liste .sig-bib-nr { flex: none; font-size: 11px; }
.sig-bib-item.is-liste .sig-bib-haken { top: 50%; right: 8px; margin-top: -9px; }

/* Verwaltung (Admin): Add-on, Ablaufdatum, Benutzer & Freigaberecht – einklappbar, standardmässig zu */
.sp-admin { margin-bottom: 14px; border: 1px solid var(--bdr); border-radius: var(--r-lg); background: var(--card); }
.sp-admin-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 44px; padding: 8px 14px; list-style: none; font: 700 14px/1.3 var(--fd); color: var(--t1); cursor: pointer; }
.sp-admin-kopf::-webkit-details-marker { display: none; }
.sp-admin-kopf:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: -2px; border-radius: var(--r-lg); }
.sp-admin-icon { flex: none; color: var(--t2); }
.sp-admin-status { font-size: 12px; font-weight: 600; color: var(--t2); }
.sp-admin-pfeil { flex: none; margin-left: auto; color: var(--t2); transition: transform .15s; }
.sp-admin[open] .sp-admin-pfeil { transform: rotate(180deg); }
.sp-admin > .gis-card { margin: 0; border: none; border-top: 1px solid var(--bdr); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.sk-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); max-height: none; }
.sk-item { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r-md); padding: 10px; text-align: center; min-width: 0; overflow-wrap: anywhere; }
.sk-item img { width: 100%; height: 60px; object-fit: contain; }
.sp-mapcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.sp-kartenrahmen { position: relative; display: flex; flex: 1 1 auto; min-height: 440px; }
/* Strassensuche oben Mitte: links liegen Zoom und Zeichenwerkzeuge, rechts das Ebenen-Menü
   (je rund 44 px plus Rand) – die Breite lässt beiden Seiten Platz. ≤ 900 px über der Karte. */
.sp-map-search { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 136px); z-index: 500; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r-md); padding: 8px 10px; box-shadow: 0 4px 16px rgba(0,0,0,.15); width: 300px; }
.sp-map-search svg { width: 16px; height: 16px; color: var(--t3); flex-shrink: 0; }
.sp-map-search input { flex: 1; border: none; outline: none; font-family: var(--fd); font-size: 13px; background: transparent; color: var(--t1); min-width: 0; }
.sp-map-search .sp-btn { padding: 6px 10px; font-size: 12px; flex-shrink: 0; }
.sp-map-search .sp-such-btn svg { display: none; color: currentColor; }
.sp-search-marker { display: flex; align-items: center; justify-content: center; }
.sp-search-marker svg { width: 34px; height: 34px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
#signalplanungMap { flex: 1; min-width: 0; border-radius: var(--r-xl); border: 1px solid var(--bdr); overflow: hidden; background: var(--bg); }
.sp-map-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--t3); font-size: 13px; text-align: center; padding: 24px; }
/* Temporäre Signale als Signalträger (Darstellung aus spTraegerIconHtml in
   js/signalplan-report.js, Masse inline – gleich im PDF). Die Klickfläche ist der
   ganze (unsichtbare) Container, mindestens 44 px. */
.sp-traeger-marker, .sp-bestand-marker { background: none; border: none; }
.sp-traeger-marker { cursor: pointer; }
.sp-traeger-marker.leaflet-marker-draggable { cursor: move; }
.sp-traeger-icon { pointer-events: none; }
/* Unter Zoom 16: gelbes Quadrat mit dunkler Kontur (eckig = temporär) */
.sp-punkt-wrap { position: relative; }
.sp-punkt { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--sp-temp); border: 1.5px solid var(--sp-kontur); border-radius: 2px; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(15,23,42,.4); }
.sp-punkt-hinten { transform: translate(3px, -3px); }
/* Status-Badges (Form + Farbe) */
.sp-badge { display: block; overflow: visible; }
.sp-badge .f { stroke: var(--sp-kontur); stroke-width: 1.3; stroke-linejoin: round; }
.sp-badge .z { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-badge-temp .f { fill: var(--sp-temp); }
.sp-badge-pruefen .f { fill: var(--sp-badge-pruefen); }
.sp-badge-pruefen .z { stroke: var(--sp-kontur); }
.sp-badge-gedeckt .f { fill: var(--sp-badge-gedeckt); }
.sp-badge-entfernt .f { fill: var(--sp-badge-entfernt); }
.sp-badge-bleibt .f { fill: var(--sp-badge-bleibt); }
/* Bestand: Mast = gestapelte Signalbilder über rundem Fusspunkt (rund = Bestand) */
.sp-bestand-icon { object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1px rgba(15,23,42,.35)); }
.sp-bestand-mast { width: 2px; background: #475569; opacity: .7; }
.sp-bestand-mehr { text-align: center; font: 700 10px/1 var(--fm); color: var(--sp-kontur); text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.sp-bestand.is-gedimmt .sp-bestand-icon { opacity: .45; }
.sp-bestand.is-aufgehoben .sp-bestand-icon { filter: grayscale(1); opacity: .6; }
.sp-bestand-punkt { display: block; filter: drop-shadow(0 1px 1px rgba(15,23,42,.35)); }
/* Legende als einklappbares Overlay unten links in der Karte (renderSpLegende). z-index
   zwischen Kartenebenen (≤ 700) und Leaflet-Controls (800/1000), unter der Hinweisleiste
   (750). Links neben der Spalte mit Zoom und Zeichenwerkzeugen (Leaflet: 10 px Rand +
   34 px Knopf), damit die untersten Werkzeuge frei bleiben. Liegt über den Popups wie die
   Leaflet-Controls – während eines Popups nur der Kopf (setSpLegendeBeiPopup). */
/* --sp-leiste-platz: Höhe der sichtbaren Hinweisleiste samt Abstand (spLegendeUeberLeiste), sonst 0 */
.sp-legende { position: absolute; left: 52px; bottom: max(12px, var(--sp-leiste-platz, 0px)); z-index: 740; display: flex; flex-direction: column; max-width: min(270px, calc(100% - 64px)); max-height: calc(100% - 84px - max(12px, var(--sp-leiste-platz, 0px))); background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r-md); box-shadow: 0 4px 16px rgba(15,23,42,.15); overflow: hidden; }
.sp-legende-kopf { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 12px; border: none; background: none; font: 700 13px/1.2 var(--fd); color: var(--t1); text-align: left; cursor: pointer; flex: none; }
.sp-legende-kopf:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: -2px; }
.sp-legende-pfeil { margin-left: auto; transition: transform .15s; }
.sp-legende.is-zu .sp-legende-pfeil { transform: rotate(180deg); }
.sp-legende-liste { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 0 12px 10px; overflow-y: auto; font-size: 13px; color: var(--t1); }
.sp-legende-liste li { display: flex; align-items: center; gap: 8px; line-height: 1.3; }
.sp-legende-liste svg { flex-shrink: 0; }
/* Baustellen-Angaben: im Entwurf aufklappbare Fläche unter der Toolbar, bei Final Lesetext */
.sp-meta-row { display: flex; align-items: flex-end; gap: 10px 14px; flex-wrap: wrap; margin: -4px 0 12px; padding: 12px 14px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--card); font-size: 13px; color: var(--t2); }
.sp-meta-row.is-final { align-items: center; padding: 8px 14px; background: var(--bg); }
.sp-meta-row label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.sp-meta-row input { min-height: 40px; padding: 6px 10px; border: 1.5px solid var(--bdr); border-radius: 8px; font-size: 14px; font-family: var(--fd); min-width: 240px; background: var(--card); color: var(--t1); }
.sp-meta-row input:focus { border-color: var(--sc-primary); outline: none; box-shadow: 0 0 0 3px var(--sp-fokusring); }
.sp-meta-row input:disabled { background: var(--bg); color: var(--t2); cursor: not-allowed; }
.sp-meta-row .sp-doc-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 40px; }
.sp-meta-row .sp-doc-wrap .sp-btn { min-height: 40px; padding: 6px 12px; font-size: 13px; }
.sp-meta-lesetext { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; line-height: 1.4; color: var(--t1); overflow-wrap: anywhere; }
.sp-meta-lesetext b { font-weight: 600; color: var(--t2); }
.sp-doc-link { background: none; border: none; padding: 0; color: var(--sc-primary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.sp-doc-link:disabled { opacity: .5; cursor: wait; }
.sp-popup .pop-actions { grid-template-columns: 1fr 1fr; }
/* Popups Signalplaner: Name, SSV-Nr., Status, Aktionen; Trefferflächen ≥40 px (Touch: 44 px) */
.sp-popup .pop-loc { margin-bottom: 8px; }
/* Höchsthöhe setzt spPopupVorbereiten() aus der Kartenhöhe; darüber scrollt der Inhalt */
.sp-popup { max-height: var(--sp-popup-max-h, none); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.sp-pop-status { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--t1); }
.sp-pop-hinweis { color: var(--t2); background: var(--bg); border-radius: 7px; padding: 8px 10px; }
.sp-pop-dreh-label { font-size: 11px; font-weight: 700; color: var(--t2); margin: 8px 0 4px; }
.sp-pop-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
.sp-pop-reihe-4 { grid-template-columns: repeat(4, 1fr); }
.sp-pop-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; border: 1.5px solid var(--bdr); border-radius: 7px; padding: 6px; font: 600 12px/1.2 var(--fd); color: var(--t1); cursor: pointer; background: var(--bg); transition: border-color .15s, color .15s; }
.sp-pop-btn svg { flex-shrink: 0; }
.sp-pop-btn:hover:not(:disabled) { border-color: var(--sc-primary); color: var(--sc-primary); }
.sp-pop-btn:disabled { opacity: .5; cursor: not-allowed; }
.sp-pop-btn-del:hover:not(:disabled) { border-color: var(--sc-kritisch); color: var(--sc-kritisch); }
.sp-pop-btn-breit { width: 100%; margin-top: 8px; }
.sp-pop-mehr { margin-top: 6px; border-top: 1px solid var(--bdr); padding-top: 4px; }
.sp-pop-mehr > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--t2); padding: 8px 0; min-height: 32px; }
.sp-pop-signale { list-style: none; margin: 6px 0 4px; max-height: 280px; overflow-y: auto; }
.sp-pop-signale > li { border-bottom: 1px solid var(--bdr); }
.sp-pop-signale > li:last-child { border-bottom: none; }
.sp-pop-eintrag { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; font-size: 12px; }
.sp-pop-eintrag img, .sp-pop-sig-leer { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.sp-pop-sig-leer { border: 1.5px dashed var(--bdr); border-radius: 4px; }
.sp-pop-sig-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.sp-pop-nr { font-family: var(--fm); font-size: 11px; color: var(--t2); }
summary.sp-pop-eintrag { cursor: pointer; list-style: none; }
summary.sp-pop-eintrag::-webkit-details-marker { display: none; }
summary.sp-pop-eintrag::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--t3); border-bottom: 2px solid var(--t3); transform: rotate(45deg); flex-shrink: 0; margin-right: 4px; }
.sp-pop-eintrag-details[open] > summary.sp-pop-eintrag::after { transform: rotate(-135deg); }
.sp-pop-eintrag-details[open] { padding-bottom: 8px; }
.sp-bestand-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
.sp-bestand-aktion.is-aktiv { border-color: var(--sc-primary); background: var(--sc-primary-l); color: var(--sc-primary); }
/* Hinweisleiste über der Karte (z.B. «Signal ziehen · Abbrechen»), zwischen
   Kartenebenen (≤700) und Leaflet-Controls (800/1000) */
.sp-hinweisleiste { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 750; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 24px); padding: 8px 8px 8px 16px; background: var(--sp-kontur); color: #fff; border-radius: var(--r-md); box-shadow: 0 4px 16px rgba(0,0,0,.25); font-size: 14px; font-weight: 600; line-height: 1.3; }
.sp-hinweisleiste[hidden], .sp-hinweisleiste .sp-btn[hidden] { display: none; }
.sp-hinweisleiste .sp-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; flex-shrink: 0; }
.sp-hinweisleiste .sp-btn.is-x { justify-content: center; width: 44px; min-height: 44px; padding: 0; }
.sp-hinweis-icon { flex: none; width: 30px; height: 30px; padding: 2px; object-fit: contain; background: #fff; border-radius: 6px; }
@media (pointer: coarse) {
  .sp-pop-btn, .sp-hinweisleiste .sp-btn { min-height: 44px; }
  #signalplanungTool .sp-toolbar .sp-btn, #signalplanungTool .sp-toolbar .typ-select, .sp-gueltigkeit input, .sp-primaer-hinweis { min-height: 44px; }
  .sp-meta-row input, .sp-meta-row .sp-doc-wrap .sp-btn, .sp-legende-kopf, .sp-check-zurueck, .sp-check-link { min-height: 44px; }
  .sp-chip, .sp-bib-anderswo { min-height: 44px; }
  .sp-ansicht-btn { width: 44px; height: 44px; }
  .sp-schritt-btn { min-height: 44px; }
}

/* POPUP STYLES */
.lf-popup-inner { min-width: 220px; }
.lf-popup-inner h4 { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.lf-popup-inner .pop-loc { font-size: 12px; color: var(--t2); margin-bottom: 10px; }
.lf-popup-inner .pop-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 12px; }
.lf-popup-inner .pop-label { color: var(--t3); font-weight: 600; }
.pop-ws-wrap { margin-top: 8px; }
.pop-ws-wrap label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--t3); margin-bottom: 5px; }
.pop-ws-select {
  width: 100%; border: 1.5px solid var(--bdr); border-radius: 7px;
  padding: 7px 10px; font-size: 13px; font-weight: 600;
  background: var(--bg); outline: none; appearance: none; cursor: pointer;
}
.pop-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 10px 0; }
.pop-actions button { border: 1.5px solid var(--bdr); border-radius: 7px; padding: 7px 4px; font-size: 11px; font-weight: 600; cursor: pointer; background: var(--bg); font-family: inherit; transition: all .15s; }
.pop-actions button:hover { border-color: var(--sc-primary); color: var(--sc-primary); }
.pop-actions .pop-act-del:hover { border-color: #EF4444; color: #EF4444; }
.pop-save-btn {
  margin-top: 8px; width: 100%; background: var(--sc-primary); color: #fff;
  border: none; padding: 8px; border-radius: 7px;
  font-family: var(--fd); font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.pop-save-btn:hover { background: var(--sc-primary-d); }

/* TOAST */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--t1); color: #fff; padding: 12px 18px;
  border-radius: var(--r-md); font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  animation: slideIn .2s ease; max-width: 320px;
}
.toast.ok { background: var(--sc-ok); }
.toast.err { background: var(--sc-kritisch); }
.toast.warn { background: var(--sc-mangel); }
@keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* LOADING */
.loading { padding: 48px; text-align: center; color: var(--t3); font-size: 14px; }
.spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--bdr); border-top-color: var(--sc-primary); border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Kleine Bildschirme (Tablet hoch, Handy quer/hoch) ─────────────────────────
   Kein seitliches Scrollen: Kopfzeile bricht um, Knöpfe nur mit Symbol, Reiter in Zeilen
   statt in einer überlangen Leiste (geprüft 320–1920 px, 2026-10-04). */
@media (max-width: 1100px) {
  .hdr { padding: 0 16px; }
  .tabs { padding: 0 16px; flex-wrap: wrap; }
  .tab { padding: 12px 12px; }
  .main { padding: 20px 16px; }
}
@media (max-width: 900px) {
  .hdr { height: auto; min-height: 56px; padding: 8px 12px; flex-wrap: wrap; gap: 8px; }
  .hdr-left { min-width: 0; flex: 1 1 auto; }
  .hdr-right { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .hdr-username { display: none; }
  .gemeinde-switcher { max-width: 42vw; text-overflow: ellipsis; }
  .hdr-gemeinde { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42vw; }
  .btn-report, .btn-logout { padding: 8px 10px; }
  .btn-report .btn-txt, .btn-logout .btn-txt { display: none; }
  .tabs { padding: 0 8px; gap: 0; }
  .tab { padding: 10px 10px; font-size: 13px; }
  .main { padding: 16px 12px; }
}
@media (max-width: 560px) {
  .hdr-brand, .hdr-sep { display: none; }
  .hdr-avatar { display: none; }
  .tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); padding: 4px 6px; }
  .tab { flex-direction: column; gap: 3px; padding: 8px 4px; font-size: 11px; text-align: center; border-bottom-width: 2px; line-height: 1.2; }
  .tab svg { width: 16px; height: 16px; }
  .main { padding: 12px 10px; }
}

/* Inhalte der Reiter auf kleinen Bildschirmen */
@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .sp-layout { grid-template-columns: 260px 1fr; }
}
@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
  .kpi { padding: 14px; }
  .kpi-val { font-size: 28px; }
  .kpi-val.kosten { font-size: 22px; }
  .search-wrap { flex: 1 1 100%; max-width: none; }
  .typ-select { flex: 1 1 140px; min-width: 0; }
  .sort-info { margin-left: 0; flex-basis: 100%; }
  #map { height: min(520px, 65vh); }
  /* Signalplanung (Phase D): Karte füllt den Bildschirm, Statusbalken direkt unter der
     Toolbar. Die Seitenleiste ist ein einklappbares Blatt: eingeklappt nur die Tab-Zeile
     unter der Karte, aufgeklappt liegt der Inhalt über dem unteren Teil der Karte (die
     Karte behält ihre Grösse, nichts springt). setzeSpSheet in signalplan-palette.js. */
  #signalplanungTool .sp-sidebar { contain: none; }
  .sp-layout { display: flex; flex-direction: column; gap: 8px; }
  .sp-mapcol { order: 1; flex: 1 1 auto; }
  .sp-sidebar { order: 2; position: relative; flex: none; gap: 0; overflow: visible; }
  .sp-sheet-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border: 1.5px solid var(--bdr); border-radius: var(--r-md); background: var(--card); color: var(--t1); cursor: pointer; }
  .sp-sheet-btn svg { transition: transform .15s; }
  .sp-sheet-btn[aria-expanded="true"] { border-color: var(--sc-primary); color: var(--sc-primary-d); }
  .sp-sheet-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  .sp-sidebar > .sp-tabpanel { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 1001; height: 46vh; height: min(46dvh, 520px); padding: 12px; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r-lg); box-shadow: 0 -8px 30px rgba(15,23,42,.22); }
  .sp-sidebar.is-zu > .sp-tabpanel { display: none !important; }
  .sp-kartenrahmen { flex-direction: column; gap: 8px; min-height: 0; }
  /* Strassensuche bleibt bis 561 px als Overlay oben in der Karte (spart eine Zeile Höhe) */
  /* Schmale Karte: Legende reicht bis unter die Quellenangabe unten rechts – darüber legen */
  .sp-legende { bottom: max(26px, var(--sp-leiste-platz, 0px)); max-height: calc(100% - 70px - max(26px, var(--sp-leiste-platz, 0px))); }
  #signalplanungMap { flex: 1 1 auto; min-height: 320px; min-height: max(320px, 45vh); min-height: max(320px, 45dvh); }
  .sp-plan-select { flex: 1 1 100%; max-width: none; }
  .sp-primaer { flex: 1 1 auto; }
  .sp-primaer .sp-btn-primaer, .sp-primaer-hinweis { flex: 1 1 auto; }
  .sp-gueltigkeit { flex: 1 1 100%; }
  .sp-gueltigkeit input { flex: 1 1 0; }
  .sp-meta-btn { flex: 1 1 auto; justify-content: center; }
  .sp-meta-row input { min-width: 0; width: 100%; }
  .sp-meta-row label { flex: 1 1 100%; }
  .legal-item { grid-template-columns: 1fr; gap: 4px; }
}
/* Tabellen Liste/Verlauf als Karten (bis 900 px; darüber passt die Tabelle) */
@media (max-width: 900px) {
  .table-wrap table, .hist-table-wrap table, .table-wrap tbody, .hist-table-wrap tbody,
  .table-wrap tr, .hist-table-wrap tr, .table-wrap td, .hist-table-wrap td { display: block; width: 100%; }
  .hist-table-wrap thead { display: none; }
  /* Sortierung bleibt bedienbar: sortierbare Spaltenköpfe als Knöpfe */
  .table-wrap thead { display: block; }
  .table-wrap thead tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
  .table-wrap th { padding: 5px 10px; border: 1px solid var(--bdr); border-radius: 99px; background: var(--card); letter-spacing: .5px; }
  .table-wrap th:not([onclick]) { display: none; }
  #tableBody tr, #histBody tr { padding: 10px 14px; }
  #tableBody td, #histBody td { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; max-width: none; white-space: normal; overflow: visible; }
  #tableBody td::before, #histBody td::before { flex: 0 0 96px; font: 700 10px/1.8 var(--fm); letter-spacing: .8px; text-transform: uppercase; color: var(--t3); }
  #tableBody td:nth-child(1)::before { content: 'Nr'; }
  #tableBody td:nth-child(2)::before { content: 'Typ'; }
  #tableBody td:nth-child(3)::before { content: 'Standort'; }
  #tableBody td:nth-child(4)::before { content: 'Zustand'; }
  #tableBody td:nth-child(5)::before { content: 'Wartung'; }
  #tableBody td:nth-child(6)::before { content: 'Inventar'; }
  #tableBody td:nth-child(7)::before { content: 'Erfasst'; }
  #histBody td:nth-child(1)::before { content: 'Mast'; }
  #histBody td:nth-child(2)::before { content: 'Änderung'; }
  #histBody td:nth-child(3)::before { content: 'Von'; }
  #histBody td:nth-child(4)::before { content: 'Datum'; }
  #tableBody td[colspan]::before, #histBody td[colspan]::before { content: none; }
  #tableBody td > *, #histBody td > * { min-width: 0; }
  #histBody td { overflow-wrap: anywhere; }
}
@media (max-width: 560px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi { padding: 12px; }
  .kpi-val { font-size: 24px; }
  .kpi-val.kosten { font-size: 19px; }
  .kpi-label { letter-spacing: .5px; margin-bottom: 6px; }
  .gis-card { padding: 14px; }
  /* Kopfzeile einzeilig: Gemeindewähler nimmt den Restplatz, Knöpfe nur Symbol */
  .hdr { flex-wrap: nowrap; }
  .hdr-left { flex: 1 1 0; }
  .hdr-right { flex-wrap: nowrap; flex-shrink: 0; }
  .gemeinde-switcher { width: 100%; max-width: none; min-width: 0; }
  .hdr-gemeinde { max-width: none; }
  .btn-report, .btn-logout { padding: 8px 9px; }
}

/* Mast-Detail und Bericht-Vorschau auf dem Handy */
@media (max-width: 560px) {
  /* Dialog als vollbreites Blatt am unteren Rand */
  .sp-dialog-overlay { align-items: flex-end; padding: 0; }
  .sp-dialog { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); }
  .sp-dialog-feld.is-halb { grid-column: 1 / -1; }
  .sp-dialog-fuss .sp-btn { flex: 1 1 0; }
}
@media (max-width: 400px) {
  .sp-menu-btn-txt { display: none; }
}
@media (max-width: 560px) {
  .sp-seg-lang { display: none; }
  /* Handy (Phase E): Strassensuche in der Karte zwischen Zoom (links) und Ebenen-Menü
     (rechts), Suchknopf nur als Pfeil – spart eine Zeile über der Karte */
  .sp-map-search { top: 10px; left: 54px; right: 62px; width: auto; max-width: none; transform: none; gap: 6px; padding: 3px 3px 3px 10px; }
  .sp-map-search .sp-such-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; }
  .sp-map-search .sp-such-btn svg { display: block; }
  .sp-such-txt { display: none; }
  /* Hinweisleiste rechts neben der Werkzeugleiste (links), sonst verdeckt diese das Signal-Icon */
  .sp-hinweisleiste { left: 58px; right: 8px; width: auto; max-width: none; transform: none; gap: 8px; padding-left: 10px; }
}
@media (max-width: 400px) {
  /* Zwei Datumsfelder + «Gültig» passen bei 320 px nur ohne Mindestbreite */
  .sp-gueltigkeit input { width: 0; padding: 6px 4px; }
}
@media (max-width: 560px) {
  #mastDetailBody { overflow-wrap: anywhere; }
  #mastDetailBody [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  #pdfOverlay > div:first-child { padding: 8px 10px !important; gap: 8px !important; }
  #pdfOverlay > div:first-child > div { display: none; }
  #pdfClose, #pdfDownload { padding: 9px 12px !important; font-size: 13px !important; }
  #pdfDownload { margin-left: auto; }
}

/* ── Signalplaner auf dem Handy hochkant (Phase E, Ziel 390×844: Karte ≥ 45 % sichtbar) ──
   Schrittleiste als «Schritt 2 von 4: …» mit Kreisen als Mini-Fortschritt; Toolbar in drei
   Zeilen [Plan ⋯] [Primäraktion + Sperrgrund] [Gültig von–bis + Baustellen-Angaben];
   Statusbalken einzeilig mit «Details». */
@media (max-width: 560px) {
  .sp-schritte { gap: 6px; margin-bottom: 8px; }
  .sp-schritte-liste { gap: 2px; }
  .sp-schritt { flex: none; }
  .sp-schritt:not(.is-aktuell) .sp-schritt-btn { justify-content: center; width: 36px; padding: 0; border-color: transparent; background: none; }
  .sp-schritt:not(.is-aktuell) .sp-schritt-text { display: none; }
  .sp-schritt.is-aktuell { flex: 1 1 auto; }
  .sp-schritt.is-aktuell .sp-schritt-btn { padding-right: 10px; }
  .sp-schritt.is-aktuell .sp-schritt-von { display: inline; }
  .sp-schritt.is-aktuell .sp-schritt-text { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
  .sp-schritte.is-fertig .sp-schritte-liste { flex: none; }
  .sp-schritte-fertig { display: block; font: 600 13px/1.2 var(--fd); color: var(--sp-status-final-text); }

  #signalplanungTool .sp-toolbar { margin-bottom: 8px; }
  .sp-plan-select { order: 1; flex: 1 1 0; min-width: 0; }
  .sp-menu { order: 2; }
  .sp-menu-btn-txt { display: none; }
  .sp-primaer { order: 3; flex: 1 1 100%; }
  .sp-primaer .sp-btn-primaer { white-space: nowrap; }
  .sp-primaer:has(.sp-primaer-hinweis:not([hidden])) .sp-btn-primaer { flex: 0 0 auto; }
  .sp-primaer .sp-primaer-hinweis { flex: 1 1 0; min-width: 0; padding: 3px 10px; font-size: 12px; }
  .sp-gueltigkeit { order: 4; flex: 1 1 0; min-width: 0; }
  .sp-meta-btn { order: 5; flex: none; }
  .sp-meta-btn-txt { display: none; }

  .sp-statusbalken { align-items: center; gap: 8px; padding: 2px 2px 2px 10px; font-size: 13px; }
  .sp-status-icon { padding-top: 0; }
  .sp-status-mehr { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border: none; border-radius: 8px; background: none; color: inherit; cursor: pointer; }
  .sp-status-mehr:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: -2px; }
  .sp-status-mehr svg { transition: transform .15s; }
  .sp-status-mehr[aria-expanded="true"] svg { transform: rotate(180deg); }
  .sp-statusbalken.is-detail-offen { align-items: flex-start; padding-top: 6px; padding-bottom: 6px; }
  .sp-statusbalken.is-detail-offen .sp-status-icon { padding-top: 2px; }
  .sp-statusbalken.is-detail-offen .sp-status-mehr { margin-top: -4px; }
  .sp-statusbalken:not(.is-detail-offen) .sp-status-zeile { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sp-statusbalken:not(.is-detail-offen) .sp-status-warnung,
  .sp-statusbalken:not(.is-detail-offen) .sp-status-schritt { display: none; }
  .sp-statusbalken:not(.is-detail-offen) .sp-status-warn-kurz { display: inline-flex; margin-right: 4px; vertical-align: -3px; color: var(--sp-warnung-text); }

  .sp-leer-karte { padding: 56px 12px max(36px, var(--sp-legende-platz, 0px)) 52px; }
  .sp-leer-inhalt { padding: 14px; }
  .sp-leer-inhalt h3 { font-size: 15px; }
  .sp-leer-inhalt p { font-size: 13px; }

  .sp-hilfe { top: 0; width: 100%; border-left: none; }
}
@media (max-width: 560px) and (pointer: coarse) {
  .sp-schritt:not(.is-aktuell) .sp-schritt-btn { width: 44px; }
  .sp-status-mehr { width: 44px; height: 44px; }
}

/* Reiter «Signalpläne» (signalplan-uebersicht.js): je Baustelle eine Karte, Versionen gestapelt */
.spu-kopfzeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.spu-suche { flex: 1 1 280px; max-width: 520px; }
.spu-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.spu-filter .sp-chip { min-height: 36px; }
.spu-zahl { font-family: var(--fm); font-size: 11px; opacity: .75; margin-left: 2px; }
.spu-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.spu-karte { background: var(--card); border: 1px solid var(--bdr); border-left: 4px solid var(--bdr); border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.spu-karte.is-laeuft { border-left-color: var(--sc-ok); }
.spu-karte.is-kommend { border-left-color: var(--sc-primary); }
.spu-karte.is-beendet { border-left-color: var(--t3); opacity: .85; }
.spu-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.spu-name { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--t1); overflow-wrap: anywhere; }
.spu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.spu-chip, .spu-zeit { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.spu-chip.is-final { background: var(--sc-ok-d); color: var(--sc-ok); }
.spu-chip.is-entwurf { background: var(--sc-primary-l); color: var(--sc-primary); }
.spu-zeit { background: var(--bg); color: var(--t2); }
.spu-zeit.is-laeuft { background: var(--sc-ok-d); color: var(--sc-ok); }
.spu-zeit.is-kommend { background: var(--sc-primary-l); color: var(--sc-primary); }
.spu-zeit.is-ohne { background: var(--sc-mangel-d); color: var(--sc-mangel); }
.spu-meta { font-size: 12.5px; color: var(--t2); line-height: 1.5; }
.spu-aktionen { display: flex; flex-wrap: wrap; gap: 6px; }
.spu-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; font-size: 12.5px; min-height: 36px; }
.spu-versionen-btn { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; background: none; border: none; padding: 6px 0; font: 600 12.5px/1.2 var(--fd); color: var(--sc-primary); cursor: pointer; min-height: 36px; }
.spu-versionen-btn .spu-pfeil { transition: transform .15s; }
.spu-versionen-btn[aria-expanded="true"] .spu-pfeil { transform: rotate(180deg); }
.spu-versionen { list-style: none; border-left: 2px solid var(--bdr); margin-left: 6px; padding-left: 12px; display: flex; flex-direction: column; gap: 10px; }
.spu-version { display: flex; flex-direction: column; gap: 6px; }
.spu-version-kopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 560px) {
  .spu-liste { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
  .spu-btn, .spu-versionen-btn, .spu-filter .sp-chip { min-height: 44px; }
}

/* ── Verfügungen an Signalen (verfuegungen.js, Migration 033) ──
   Block unter jedem Signal im Mast-Detail: verknüpfte Verfügungen, Ablagezone (Drag & Drop
   oder Dateiwahl), «Bestehende Verfügung verknüpfen». «Zuordnung prüfen» am Ende der Karte. */
.vf-block { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--bdr); }
.vf-kopf { color: var(--t3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.vf-liste { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.vf-eintrag { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--bdr); border-radius: var(--r-md); }
.vf-eintrag-info { flex: 1 1 220px; min-width: 0; }
.vf-eintrag-titel { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--t1); overflow-wrap: anywhere; }
.vf-eintrag-titel svg { flex-shrink: 0; color: var(--sc-primary); }
.vf-eintrag-meta { font-size: 12px; color: var(--t2); margin-top: 3px; overflow-wrap: anywhere; }
.vf-aktionen { display: flex; flex-wrap: wrap; gap: 6px; }
.vf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 32px; padding: 5px 10px; border: 1px solid var(--bdr); border-radius: 6px; background: var(--card); font: 600 12px/1.2 var(--fd); color: var(--t1); cursor: pointer; transition: border-color .15s; }
.vf-btn:hover:not(:disabled) { border-color: var(--sc-primary); }
.vf-btn:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 1px; }
.vf-btn:disabled { opacity: .5; cursor: not-allowed; }
.vf-btn-primaer { background: var(--sc-primary); border-color: var(--sc-primary); color: #fff; }
.vf-btn-primaer:hover:not(:disabled) { background: var(--sc-primary-d); border-color: var(--sc-primary-d); }
.vf-btn-gefahr { color: var(--sp-gefahr-text); }
.vf-btn-gefahr:hover:not(:disabled) { border-color: var(--sp-gefahr-text); }
.vf-bearbeiten, .vf-neu-zuordnen { flex: 1 1 100%; }
.vf-neu-zuordnen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vf-neu-zuordnen select, .vf-verknuepfen select { min-width: 0; max-width: 100%; padding: 6px 8px; border: 1px solid var(--bdr); border-radius: 6px; background: var(--card); font: 13px var(--fd); color: var(--t1); }
.vf-verknuepfen { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vf-verknuepfen select { flex: 1 1 220px; }
.vf-verknuepfen .vf-btn { flex: 0 0 auto; }
/* Ablagezone: gestrichelt, beim Ziehen einer Datei darüber blau hinterlegt */
.vf-zone { position: relative; border: 1.5px dashed var(--bdr); border-radius: var(--r-md); background: var(--card); transition: border-color .15s, background .15s; }
.vf-zone:focus-within { border-color: var(--sc-primary); box-shadow: 0 0 0 3px var(--sp-fokusring); }
.vf-zone.vf-drop-aktiv { border-style: solid; border-color: var(--sc-primary); background: var(--sc-primary-l); }
.vf-zone-ziel { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; cursor: pointer; color: var(--t2); }
.vf-zone-ziel:hover { color: var(--sc-primary); }
.vf-zone-icon { display: inline-flex; flex-shrink: 0; color: var(--sc-primary); }
.vf-zone-text { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; min-width: 0; }
.vf-zone-text strong { font-weight: 600; color: var(--t1); }
.vf-zone-text span { font-size: 11px; color: var(--t3); }
.vf-drop-aktiv .vf-zone-ziel, .vf-drop-aktiv .vf-zone-text strong { color: var(--sc-primary); }
/* Dateifeld visuell versteckt, aber per Tab erreichbar (Leertaste/Enter öffnet die Dateiwahl) */
.vf-datei { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }
.vf-zone [hidden], .vf-eintrag [hidden] { display: none !important; }
.vf-formular { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 12px; }
.vf-bearbeiten .vf-formular { padding: 10px 0 2px; }
.vf-datei-info { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--t2); overflow-wrap: anywhere; }
.vf-gilt-fuer { color: var(--sp-warnung-text); }
.vf-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 11px; font-weight: 600; color: var(--t3); }
.vf-feld.is-breit { grid-column: 1 / -1; }
.vf-feld input, .vf-feld textarea { width: 100%; padding: 7px 9px; border: 1px solid var(--bdr); border-radius: 6px; background: var(--card); font: 13px var(--fd); color: var(--t1); resize: vertical; }
.vf-feld input:focus, .vf-feld textarea:focus { outline: none; border-color: var(--sc-primary); box-shadow: 0 0 0 3px var(--sp-fokusring); }
.vf-fuss { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vf-status { font-size: 12px; color: var(--t2); }
.vf-pruefen { margin-top: 14px; padding: 12px; background: var(--sp-warnung-bg); border: 1px solid var(--sc-mangel); border-radius: var(--r-md); }
.vf-pruefen-hinweis { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--sp-warnung-text); margin-bottom: 10px; }
.vf-pruefen-hinweis svg { flex-shrink: 0; margin-top: 2px; }
.vf-pruefen .vf-eintrag { background: var(--card); }
.vf-listen-icon { display: inline-flex; vertical-align: -2px; margin-left: 5px; color: var(--sc-primary); }
.pop-vf-text { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--sc-primary); }
.pop-vf-btn { margin-top: 6px; width: 100%; padding: 7px; border: 1.5px solid var(--sc-primary); border-radius: 7px; background: var(--card); color: var(--sc-primary); font-family: var(--fd); font-size: 13px; font-weight: 700; cursor: pointer; }
.pop-vf-btn:hover { background: var(--sc-primary-l); }
/* Sprung aus der Liste: angeklicktes Signal kurz hervorheben */
.mast-signal { scroll-margin-top: 12px; }
.mast-signal-hervorgehoben { animation: mastSignalHervorheben 2.4s ease-out; border-radius: var(--r-md); }
@keyframes mastSignalHervorheben {
  0%, 40% { background: var(--sc-primary-l); box-shadow: 0 0 0 6px var(--sc-primary-l); }
  100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .mast-signal-hervorgehoben { animation: none; background: var(--sc-primary-l); box-shadow: 0 0 0 6px var(--sc-primary-l); }
}
@media (max-width: 560px) {
  .vf-formular { grid-template-columns: 1fr; padding: 10px; }
  .vf-fuss .vf-btn { flex: 1 1 0; }
  .vf-aktionen { width: 100%; }
}
@media (pointer: coarse) {
  .vf-btn, .vf-neu-zuordnen select, .vf-verknuepfen select { min-height: 44px; }
}

/* ── Bestand übernehmen (js/dashboard/import.js, Migration 034) ── */
.tag-uebernommen { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 99px; border: 1px dashed var(--t3);
  font-family: var(--fd); font-size: 10px; font-weight: 600; color: var(--t2); vertical-align: 1px; }
.imp-overlay { position: fixed; inset: 0; z-index: 9998; background: var(--bg); display: flex; flex-direction: column; }
.imp-kopf { background: var(--card); border-bottom: 1px solid var(--bdr); padding: 14px 22px; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.imp-zurueck { background: var(--bg); border: 1px solid var(--bdr); color: var(--t1); padding: 9px 16px; border-radius: var(--r-md); font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.imp-schritte { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--t3); }
.imp-schritte .aktiv { color: var(--sc-primary); font-weight: 700; }
.imp-schritte .fertig { color: var(--t2); }
.imp-inhalt { flex: 1; overflow-y: auto; padding: 22px; max-width: 980px; margin: 0 auto; width: 100%; }
.imp-titel { font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.imp-hilfe { display: block; font-size: 11px; color: var(--t3); font-weight: 400; margin-top: 3px; line-height: 1.4; }
.imp-dropzone { display: block; border: 2px dashed var(--bdr); border-radius: var(--r-lg); padding: 28px 16px; text-align: center; cursor: pointer; background: var(--bg); }
.imp-dropzone:hover, .imp-dropzone.ueber { border-color: var(--sc-primary); background: var(--sc-primary-l); }
.imp-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 22px; }
.imp-raster label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--t2); }
.imp-inhalt input[type=text], .imp-inhalt input[type=date], .imp-inhalt input[type=number], .imp-inhalt select {
  padding: 8px 10px; border: 1px solid var(--bdr); border-radius: 8px; font-size: 13px; font-family: inherit; background: var(--card); color: var(--t1); max-width: 100%; }
.imp-tabelle { width: 100%; border-collapse: collapse; font-size: 12px; }
.imp-tabelle th { text-align: left; font-size: 11px; color: var(--t3); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--bdr); }
.imp-tabelle td { padding: 8px; border-bottom: 1px solid var(--bdr); vertical-align: top; }
.imp-zuordnung td:first-child { width: 38%; }
.imp-zuordnung select { width: 100%; }
.imp-bsp { font-family: var(--fm); font-size: 11px; color: var(--t2); word-break: break-word; }
.imp-aktionen { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: 4px 0 30px; }
.imp-btn, .imp-btn-primaer { padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.imp-btn { background: var(--card); border: 1px solid var(--bdr); color: var(--t1); }
.imp-btn-primaer { background: var(--sc-primary); border: 1px solid var(--sc-primary); color: #fff; }
.imp-btn-primaer:disabled { opacity: .45; cursor: not-allowed; }
.imp-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.imp-kennzahlen div { background: var(--bg); border-radius: var(--r-md); padding: 10px 12px; }
.imp-kennzahlen b { display: block; font-size: 22px; font-family: var(--f-display); }
.imp-kennzahlen span { font-size: 11px; color: var(--t2); }
.imp-karte { height: 380px; border-radius: var(--r-md); border: 1px solid var(--bdr); }
.imp-legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--t2); margin-bottom: 8px; }
.imp-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.imp-problem { border: 1px solid var(--bdr); border-left-width: 4px; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; font-size: 13px; }
.imp-problem summary { cursor: pointer; }
.imp-problem-liste { margin-top: 8px; font-size: 12px; color: var(--t2); max-height: 220px; overflow-y: auto; line-height: 1.6; }
.imp-fehler { border-left-color: var(--sc-kritisch); }
.imp-warn { border-left-color: var(--sc-mangel); }
.imp-info { border-left-color: var(--t3); }
.imp-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin-bottom: 10px; }
.imp-check input { margin-top: 3px; }
.imp-balken { height: 10px; background: var(--bg); border: 1px solid var(--bdr); border-radius: 99px; overflow: hidden; }
.imp-balken div { height: 100%; background: var(--sc-primary); transition: width .2s; }
@media (max-width: 560px) {
  .imp-kopf { padding: 12px 16px; }
  .imp-inhalt { padding: 16px; }
  /* Zuordnung untereinander statt dreispaltig */
  .imp-zuordnung thead { display: none; }
  .imp-zuordnung tr, .imp-zuordnung td { display: block; width: auto !important; }
  .imp-zuordnung td { border-bottom: none; padding: 4px 0; }
  .imp-zuordnung tr { border-bottom: 1px solid var(--bdr); padding: 8px 0; }
  .imp-karte { height: 300px; }
}
@media (pointer: coarse) {
  .imp-btn, .imp-btn-primaer, .imp-inhalt select, .imp-zurueck { min-height: 44px; }
}