/* Placement-Modus (Sidebar "Element hinzufuegen" aktiv): jeder Hover ueber
   Layer soll den Crosshair zeigen, NICHT die Leaflet-Standard-pointer-Hand.
   Leaflet markiert klickbare Layer mit .leaflet-interactive und setzt dort
   intern cursor:pointer — wir ueberschreiben mit !important + Spezifitaet. */
body.placement-mode .leaflet-container,
body.placement-mode .leaflet-container .leaflet-interactive,
body.placement-mode .leaflet-marker-icon,
body.placement-mode .leaflet-clickable {
    cursor: crosshair !important;
}

/* Pulsing highlight for selected elements — opacity only, no transform (avoids drift) */
@keyframes pulse-opacity {
    0%   { opacity: 0.9; }
    50%  { opacity: 0.25; }
    100% { opacity: 0.9; }
}
.pulse-marker {
    animation: pulse-opacity 1s ease-in-out infinite;
}
.highlight-pulse {
    animation: pulse-opacity 0.8s ease-in-out infinite;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f4f6f9;
}

.app-container {
    height: 100vh;
    width: 100vw;
    /* Spaltenfluss, damit Banner ueber dem Dashboard PLATZ WEGNEHMEN statt
       es nach unten zu schieben (Stefan 2026-08-18: Koordinatenzeile und
       OSM-Hinweis am unteren Kartenrand waren abgeschnitten).
       Ursache: .dashboard-layout ist height:100% — zusammen mit der
       Instanz-Kennzeichnung (seit 2026-08-16) oder dem
       Standardpasswort-Hinweis ergab das mehr als eine Bildschirmhoehe.
       Ohne Banner aendert sich nichts, die Zeile war deshalb nur auf
       gekennzeichneten Instanzen zu sehen. */
    display: flex;
    flex-direction: column;
}

/* Das Dashboard nimmt den Rest — min-height:0 ist noetig, damit ein
   Flex-Kind unter seine Inhaltshoehe schrumpfen darf und die Karte nicht
   doch wieder ueberlaeuft. */
.app-container > .dashboard-layout {
    flex: 1 1 auto;
    min-height: 0;
    /* height:100% der Grundregel wuerde als Flex-Basis wieder eine volle
       Bildschirmhoehe verlangen — hier ausdruecklich dem Flexfluss ueberlassen. */
    height: auto;
}

/* Banner behalten ihre eigene Hoehe und schrumpfen nicht mit. */
.app-container > div:not(.dashboard-layout),
.app-container > script {
    flex: 0 0 auto;
}

/* Logo */

.app-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.app-logo-mark {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.app-logo--large .app-logo-mark {
    width: 64px;
    height: 64px;
}

.app-logo-text {
    display: flex;
    flex-direction: column;
}

.app-logo-title {
    font-weight: 700;
    font-size: 1.2rem;
    color: #0f172a;
}

/* Produktname: acon-Logo, daneben "OS" — genau so hoch wie das Logo
   (Stefan 2026-08-16, loest "Unicorn by acon" ab).

   Die Schriftgroesse ist an die Logohoehe gerechnet, nicht geschaetzt:
   Grossbuchstaben sind in dieser Schrift 0.76 der Schriftgroesse hoch
   (gemessen ueber die Glyphen-Metrik). font-size = Logohoehe / 0.76
   ergibt also Buchstaben in exakt Logohoehe. Aendert jemand die
   Logohoehe, zieht "OS" ueber --logo-h automatisch mit. */
.app-logo {
    --logo-h: 36px;
}

.app-logo-os {
    font-weight: 700;
    font-size: calc(var(--logo-h) / 0.76);
    line-height: 1;
    letter-spacing: 0.02em;
    color: #0f172a;
    /* Die em-Box wird mittig zur Bildmarke gesetzt, die Glyphen sitzen
       darin aber nicht mittig: der Font haelt oben Reserve fuer Akzente
       (fontAscent 0.93 gegen Glyphenoberkante 0.75), unten fast keine.
       Ohne Ausgleich saesse "OS" um 0.07 der Logohoehe zu tief — bei
       64 px sichtbare 5 px.

       Verschoben wird ueber position/top, nicht ueber margin: ein
       negativer Rand geht in die Flex-Zentrierung ein und wirkt dadurch
       nur zur Haelfte. Faktor gemessen, nicht geschaetzt. */
    position: relative;
    top: calc(var(--logo-h) * -0.07);
}

.app-logo--sidebar .app-logo-os {
    color: #e0e6f0;
}

.app-logo--large {
    --logo-h: 64px;
}

.app-logo-subtitle {
    font-size: 0.8rem;
    color: #64748b;
}

.app-logo--sidebar .app-logo-title,
.app-logo--sidebar .app-logo-subtitle {
    color: #e0e6f0;
}

/* Login */

.login-page {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: #ffffff;
    padding: 2.5rem 3rem;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    max-width: 420px;
    width: 100%;
}

.login-card h1 {
    margin: 0 0 0.5rem 0;
    font-size: 1.6rem;
}

.login-subtitle {
    margin: 0 0 1.5rem 0;
    color: #555;
    font-size: 0.95rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.login-form label {
    font-size: 0.9rem;
    font-weight: 500;
}

.login-form input {
    padding: 0.5rem 0.75rem;
    border-radius: 5px;
    border: 1px solid #ccd3dd;
    font-size: 0.95rem;
}

.login-form button {
    margin-top: 1rem;
    padding: 0.6rem 0.75rem;
    border: none;
    border-radius: 5px;
    background: #0066cc;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.login-form button:hover {
    background: #0053a3;
}

.login-hint {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #777;
}

.error-box {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 5px;
    background: #ffe0e0;
    color: #a00;
    font-size: 0.9rem;
}

/* Dashboard-Layout */

.dashboard-layout {
    display: grid;
    grid-template-columns: 260px 1fr 260px;
    height: 100%;
}

/* Links */

.sidebar-left {
    background: #0d1b2a;
    color: #e0e6f0;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.sidebar-header {
    margin-bottom: 1rem;
}

.main-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-btn {
    width: 100%;
    text-align: left;
    margin-bottom: 0.4rem;
    padding: 0.5rem 0.7rem;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: #e0e6f0;
    cursor: pointer;
    font-size: 0.95rem;
}

.menu-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.menu-danger {
    color: #fecaca;
}

.menu-danger:hover {
    background: rgba(248, 113, 113, 0.2);
}

/* Untermenue im Hauptmenue (z.B. Bibliothek -> Kabel/Trafos/Sicherungen) */
.menu-sublist {
    list-style: none;
    padding: 0;
    margin: -0.2rem 0 0.3rem 0.6rem;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}
.menu-btn.menu-sub {
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    margin-bottom: 0.2rem;
    color: #c5cde0;
}

.sidebar-footer {
    margin-top: auto;
    font-size: 0.85rem;
}

.logout-link {
    color: #ffcc66;
    font-size: 0.9rem;
    text-decoration: none;
}

/* Sidebar-Footer: Profil + Abmelden untereinander (nicht nebeneinander) */
.sidebar-footer .logout-link {
    display: block;
    width: 100%;
}

.sidebar-footer .logout-link + .logout-link {
    margin-top: 0.35rem;
}

.logout-link:hover {
    text-decoration: underline;
}

.user-info {
    margin-top: 0.6rem;
    color: #aeb9cc;
}

/* Karte */

.main-map {
    position: relative;
}

.map-container {
    height: 100%;
    width: 100%;
    position: relative;
}

/* Hintergrund-Schweiz: Strassen-Beschriftung */
.street-label-icon-wrapper {
    pointer-events: none; /* nicht klickbar, nicht auswählbar */
}

.street-label-outer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.street-label-inner {
    font-size: 11px;
    font-weight: 500;
    color: #444;
    white-space: nowrap;
    padding: 1px 4px;
    /* leichte „Leuchtkante“ gegen den weissen Strassenpuffer */
    text-shadow:
        0 0 2px #ffffff,
        0 0 4px #ffffff;

    transform-origin: 50% 50%; /* Drehung um die Mitte */
}

/* Map Search */

.map-search-box {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 500;
    background: rgba(15, 23, 42, 0.8);
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.35);
}

.map-search-box input {
    border: none;
    outline: none;
    padding: 0.3rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    min-width: 220px;
}

/* Map Tools */

.map-tools {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.map-tool-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.map-tool-btn:hover {
    background: #e9f1ff;
    color: #0f172a;
}

.map-tool-btn.active {
    background: #0066cc;
    color: #ffffff;
    border-color: #0066cc;
}

/* Inline-SVG-Icons: einheitliche Groesse, currentColor erbt vom Button.
   Damit funktioniert auch der weisse Active-State automatisch. */
.map-tool-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    pointer-events: none;
}

/* Map Status unten links */

.map-status {
    position: absolute;
    bottom: 4px;
    left: 8px;
    z-index: 500;
    padding: 0.2rem 0.5rem;
    background: rgba(15, 23, 42, 0.8);
    color: #e5e7eb;
    border-radius: 4px;
    font-size: 0.75rem;
    display: flex;
    gap: 0.75rem;
}

/* Label für Längenmessung in der Karte */
.measure-label-box {
    background: #ffffff;
    border-radius: 4px;
    padding: 2px 6px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    font-size: 0.8rem;
    color: #0f172a;
    white-space: nowrap;
}

/* Leaflet-Controls anpassen, damit nichts überlappt */

.leaflet-control-scale {
    margin-left: 8px !important;
    margin-bottom: 28px !important; /* über der map-status-Box */
}

/* Rechts */

.sidebar-right {
    background: #f8fafc;
    border-left: 1px solid #dde3ee;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidebar-right h3 {
    margin-top: 0;
}

.tool-group h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    color: #333;
}

.tool-btn {
    width: 100%;
    text-align: left;
    margin-bottom: 0.3rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
    border-radius: 5px;
    border: 1px solid #ccd3dd;
    background: #ffffff;
    cursor: pointer;
}

.tool-btn:hover {
    background: #e9f1ff;
}
/* Kleine Variante fuer Knopfleisten (Stefan 26.09.2026: „der button zum
   oeffnen der Anschlussgesucheliste ist nicht gut gelungen, und der zaehler
   links daneben ist zweizeilig wegen diesen zu grossen button").
   Ursache ist `width: 100%` oben: in einer Flex-Zeile beansprucht der Knopf
   die volle Breite und drueckt alles andere um. Inline liess sich das zwar
   ueberschreiben, aber an jeder Stelle neu — deshalb hier einmal benannt. */
.tool-btn.klein {
    width: auto;
    flex: 0 0 auto;
    margin-bottom: 0;
    padding: 3px 8px;
    text-align: center;
}

.tool-primary {
    background: #0066cc;
    color: #fff;
    border-color: #0066cc;
}

.tool-primary:hover {
    background: #0053a3;
}

/* RECHEN-KNÖPFE (EnBAG K1, Stefan 14.10.2026): blau = rechnet (nicht nochmal klickbar),
   grün = fertig, rot = fehlgeschlagen — grün und rot rechnen beim nächsten Klick neu.
   Gesetzt von window._calcFaerben (app.js). */
.tool-btn.calc-laeuft { background: #2563eb; color: #fff; border-color: #1d4ed8; font-weight: 600; cursor: progress; }
.tool-btn.calc-laeuft:hover { background: #2563eb; }
.tool-btn.calc-fertig { background: #15803d; color: #fff; border-color: #166534; font-weight: 600; }
.tool-btn.calc-fertig:hover { background: #166534; }
.tool-btn.calc-fehler { background: #b91c1c; color: #fff; border-color: #991b1b; font-weight: 600; }
.tool-btn.calc-fehler:hover { background: #991b1b; }

/* (bis 14.10.2026) Aktiver Layer/Modus: der zuletzt gerechnete bzw. angezeigte Layer wird
   markiert, damit man sieht WELCHER Layer aktiv ist. */
.tool-btn.calc-active {
    background: #2563eb;
    color: #fff;
    border-color: #1d4ed8;
    font-weight: 600;
    box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.6);
}
.tool-btn.calc-active:hover { background: #1d4ed8; }
/* Prozess-anstossende Buttons (Klick auf HAK rechnet live): aktiv = gruen,
   signalisiert dass die Karte jetzt auf Klicks reagiert. */
.tool-btn.calc-active.calc-proc { background: #15803d; border-color: #166534; }
.tool-btn.calc-active.calc-proc:hover { background: #166534; }

/* Rechenstatus zieht in die Karte (Banner unten links) um -> die Sidebar-
   Statuszeile unter den Berechnungen wird ausgeblendet (User-Vorgabe). */
#calcResult { display: none !important; }

.tool-secondary {
    background: #ffffff;
    color: #0066cc;
    border-color: #0066cc;
}

.tool-secondary:hover {
    background: #e9f1ff;
}

.btn-danger {
    background: #b91c1c;
    border-color: #b91c1c;
}

.btn-danger:hover {
    background: #991b1b;
}

/* Modal */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal {
    background: #ffffff;
    border-radius: 10px;
    width: 800px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.35);
}

/* Stammdaten-Modal darf mehr Breite nutzen (für Gemeinden-Picker) */
#masterdata-modal .modal {
    width: 980px;
    max-width: 95vw;
}

/* --- Layer-Ansichten breiter: stabiler Layout bei BGDATA-Spinner --- */
#layerviews-modal .modal {
  width: 860px;
  max-width: calc(100vw - 80px);
}

.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
}

.modal-close {
    border: none;
    background: transparent;
    font-size: 1.6rem;
    cursor: pointer;
    color: #64748b;
}

.modal-close:hover {
    color: #0f172a;
}

.modal-popout {
    border: none;
    background: transparent;
    font-size: 1.05rem;
    cursor: pointer;
    color: #64748b;
    padding: 4px 6px;
    border-radius: 4px;
}
.modal-popout:hover { color: #0f172a; background: #f1f5f9; }

/* Popout-Modus: in einem separaten Browserfenster, gerendert ueber
   /dashboard?popout=...  → Sidebars + Karte + Bot-Widget komplett raus,
   Modal vollflaechig.

   WICHTIG: .dashboard-layout muss display:none, sonst belegt sie 100vh
   und das Modal landet darunter (ausserhalb des Viewports). */
body.popout-mode .dashboard-layout,
body.popout-mode .bot-panel,
body.popout-mode .bot-fab,
body.popout-mode #botFab,
body.popout-mode #botPanel,
body.popout-mode #cwm-fab {
    display: none !important;
}
body.popout-mode .app-container {
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Popout-Bootphase: kompletten Seiteninhalt verbergen, bis das Ziel-Modal
   offen ist. Verhindert den sichtbaren "Einstiegsansicht"-Flash + das
   sichtbare Menue-Klicken beim Oeffnen eines Popout-Fensters. Waehrend der
   Bootphase zeigt ::after einen dezenten Spinner. */
body.popout-mode.popout-booting > * {
    visibility: hidden !important;
}
body.popout-mode.popout-booting {
    background: #fff;
}
body.popout-mode.popout-booting::after {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid #dbe3ec;
    border-top-color: #0066cc;
    border-radius: 50%;
    animation: popout-spin 0.7s linear infinite;
}
@keyframes popout-spin {
    to { transform: rotate(360deg); }
}

body.popout-mode .modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: #fff !important;
    z-index: 1 !important;
}
/* Im Popout ist das Modal-X redundant — das Browserfenster hat ein
   eigenes Schliessen-X (closeModal macht im Popout ohnehin window.close). */
body.popout-mode .modal-close {
    display: none !important;
}
body.popout-mode .modal-overlay .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    /* Hoehe natuerlich nach Inhalt, aber maximal Fensterhoehe — kleine
       Modals (z.B. Layer-Ansichten) bekommen kein 100%-Stretching, grosse
       Modals (z.B. Bibliothek-Kabel) scrollen intern. */
    height: auto !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.popout-mode .modal-overlay .modal-body {
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
}
/* Bibliothek-Layout (Tree + Tabelle) braucht eine sinnvolle Mindesthoehe,
   damit man genug Zeilen sieht. Bei kleinen Bildschirmen bremst max-height. */
body.popout-mode .lib-modal-layout {
    height: auto !important;
    min-height: min(60vh, 500px) !important;
    max-height: calc(100vh - 110px) !important;
    flex: 1 1 auto !important;
}
body.popout-mode .lib-content .elem-modal-table-wrap {
    max-height: none !important;
    flex: 1 1 auto !important;
}

.modal-tabs {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 1.5rem;
    gap: 0.5rem;
}

.tab-btn {
    padding: 0.5rem 0.9rem;
    border-radius: 6px 6px 0 0;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    color: #64748b;
}

.tab-btn.active {
    background: #ffffff;
    border-bottom-color: #0066cc;
    color: #0f172a;
    font-weight: 600;
}

.modal-body {
    padding: 1rem 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.form-row {
    margin-bottom: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.form-row label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #111827;
}

.form-row input,
.form-row select,
.form-row textarea {
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    font-size: 0.9rem;
    font-family: inherit;
}

.modal-footer {
    padding: 0.8rem 1.5rem 1.1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

.layer-tab-footnote{
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.35;
}

.btn-primary,
.btn-secondary {
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: #0066cc;
    color: #ffffff;
}

.btn-primary:hover {
    background: #0053a3;
}

.btn-secondary {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-secondary:hover {
    background: #cbd5e1;
}

/* -------------------------------------------------------------
   Stammdaten – Gemeinden-Picker (Option 1: Chips + Suche + Liste)
   ------------------------------------------------------------- */

.masterdata-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 900px) {
    .masterdata-grid {
        grid-template-columns: 1fr;
    }
}

.muni-picker-top {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.muni-picker-searchrow {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

#md-municipalities-chips {
    flex: 1 1 420px;
}

#md-municipalities-search {
    flex: 1 1 280px;
}

/* Chips */
#md-municipalities-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.82rem;
    border: 1px solid #cbd5f5;
    background: #e5edff;
    color: #0f172a;
}

.chip-remove {
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0;
}

.chip-remove:hover {
    color: #0f172a;
}

/* Liste */
#md-municipalities-list {
    max-height: 260px;
    overflow: auto;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.45rem;
    background: #ffffff;
}

.muni-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.35rem;
    border-radius: 5px;
    cursor: pointer;
}

.muni-row:hover {
    background: #f1f5f9;
}

.muni-cb {
    width: 16px;
    height: 16px;
}

.muni-label {
    font-size: 0.9rem;
    color: #0f172a;
}

/* Zähler */
#md-municipalities-count {
    font-size: 0.85rem;
    color: #64748b;
    white-space: nowrap;
}

/* -------------------------------------------------------------
   Stammdaten – Gemeinden-Picker (Split-Layout: Liste links, Chips rechts)
   ------------------------------------------------------------- */

.muni-picker-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 0.9rem;
    align-items: start;
}

@media (max-width: 900px) {
    .muni-picker-split {
        grid-template-columns: 1fr;
    }
}

.muni-picker-left {
    min-width: 0;
}

.muni-picker-right {
    min-width: 0;
}

.muni-picker-right-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
}

/* Chips rechts wie ein eigenes Panel */
.muni-picker-right #md-municipalities-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.55rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    max-height: 260px;
    overflow: auto;
}

/* Im Split-Layout sollen die alten Flex-Breiten nicht greifen */
.muni-picker-split #md-municipalities-chips {
    flex: initial;
}

/* Responsiv — Tablet */

/* nicht bei niedriger Höhe: Handy quer bekommt die Handy-Anordnung (window.ACON_HANDY_MQ in app.js) */
@media (max-width: 1100px) and (min-width: 769px) and (min-height: 501px) {
    .dashboard-layout {
        grid-template-columns: 220px 1fr;
        grid-template-rows: auto auto;
    }

    /* Die Karte ist hier kürzer als der Bildschirm (Werkzeug-Seitenleiste darunter) — einspaltig lag der unterste
       Kartenknopf (Hintergrundkarte) unter der Seitenleiste (1024 × 768, Formatprüfung 14.10.2026). Zweispaltig wie am Handy. */
    .map-tools {
        display: grid;
        grid-template-columns: repeat(2, 32px);
        gap: 4px;
        justify-items: center;
    }

    .sidebar-right {
        grid-column: 1 / span 2;
        border-left: none;
        border-top: 1px solid #dde3ee;
    }
}

/* -----------------------------------------------------------------
   Responsiv — Mobile (≤768px)
   Karte: Vollbild. Sidebars: Burger-Overlays (slide-in).
   ----------------------------------------------------------------- */

.mobile-burger {
    display: none;
}

/* MUSS hier stehen, nicht nur in der Mobil-Media-Query: der Backdrop ist
   ein direktes Kind von .dashboard-layout und belegte ohne diese Regel am
   Rechner die erste Rasterspalte. Alles rutschte eine Zelle weiter — die
   Navigation wurde 880px breit, die Karte schrumpfte auf 260px. */
.mobile-backdrop {
    display: none;
}

.sidebar-close-btn {
    display: none;
}

/* Klappmenue der Bibliothek: am Rechner steht der Kategorienbaum
   dauerhaft daneben, dort braucht es den Kopf nicht. */
.lib-tree-kopf {
    display: none;
}

/* Klappmenue der Reiterleisten: am Rechner ist die Leiste sichtbar,
   dort braucht es den Knopf nicht. app.js fuegt ihn in jede
   Fenster-Kopfzeile ein, die eine .modal-tabs hat. */
.modal-tabs-knopf {
    display: none;
}

@media (max-width: 768px), (max-width: 1100px) and (max-height: 500px) {   /* = window.ACON_HANDY_MQ */
    /* Der Container haelt Instanz-Banner + Passwort-Warnung + Karte
       untereinander. Ohne flex ragt die 100dvh hohe Karte um genau die
       Banner-Hoehe unter die Browser-Leiste. */
    .app-container {
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .dashboard-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        position: relative;   /* Bezug fuer die absoluten Burger-Buttons */
    }

    .main-map {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
    }

    /* Beide Sidebars: fixed Overlay.
       box-sizing ist Pflicht — sonst addiert sich das 1rem-Padding auf
       Breite UND Hoehe (280->312px, 100dvh->100dvh+32px). */
    .sidebar-left,
    .sidebar-right {
        box-sizing: border-box;
        position: fixed;
        top: 0;
        height: 100vh;
        height: 100dvh;
        width: 280px;
        max-width: 80vw;    /* Rest bleibt als antippbarer Backdrop frei */
        z-index: 1100;
        transition: transform 0.25s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar-left {
        left: 0;
        transform: translateX(-100%);
    }
    .sidebar-left.mobile-open {
        transform: translateX(0);
    }

    .sidebar-right {
        right: 0;
        transform: translateX(100%);
        border-left: 1px solid #dde3ee;
    }
    .sidebar-right.mobile-open {
        transform: translateX(0);
    }

    /* Overlay-Backdrop wenn Sidebar offen */
    .mobile-backdrop {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.45);
        z-index: 1099;
    }
    .mobile-backdrop.active {
        display: block;
    }

    /* Burger-Buttons auf der Karte. absolute (nicht fixed): sie sitzen im
       .dashboard-layout und beginnen damit UNTER dem Instanz-Banner. */
    .mobile-burger {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 8px;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        border: none;
        background: rgba(255,255,255,0.95);
        box-shadow: 0 2px 8px rgba(0,0,0,0.18);
        /* Ueber der Karte (500), aber UNTER Fenstern (1000) und dem
           KI-Knopf (899). Mit den vorherigen 1050 lagen die beiden
           Knoepfe ueber jedem geoeffneten Fenster und verdeckten dort
           die Kopfzeile — im Einstellungsfenster genau den Knopf, der
           den Bereichsbaum hervorholt (Stefan 2026-08-16). */
        z-index: 600;
        cursor: pointer;
        font-size: 19px;
        color: #0f172a;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-burger:active {
        background: #e2e8f0;
    }

    /* Ist ein Fenster offen, gehoeren die Kartenknoepfe ganz weg — sonst
       schimmern sie unter der Abdunklung durch und laden zum Danebentippen
       ein. Der z-index oben bleibt die Absicherung, falls :has() fehlt. */
    body:has(.modal-overlay:not(.hidden)) .mobile-burger {
        display: none;
    }
    .mobile-burger-left {
        left: 10px;
    }
    .mobile-burger-right {
        right: 10px;
    }

    /* Schliessen-Button in den Sidebars. sticky statt absolute: bleibt beim
       Scrollen langer Menues oben sichtbar. */
    .sidebar-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 22px;
        line-height: 1;
        position: sticky;
        top: 0;
        align-self: flex-end;
        z-index: 3;
        -webkit-tap-highlight-color: transparent;
    }
    .sidebar-left .sidebar-close-btn {
        color: #e0e6f0;
        background: #0d1b2a;
    }
    .sidebar-left .sidebar-close-btn:active {
        background: #1c3049;
    }
    .sidebar-right .sidebar-close-btn {
        color: #334155;
        background: #f8fafc;
    }
    .sidebar-right .sidebar-close-btn:active {
        background: #e2e8f0;
    }

    /* Eine gemeinsame Kopfzeile: [Burger] [Suche] [Zahnrad]. Spart
       gegenueber der gestapelten Variante 46px Kartenhoehe. */
    .map-search-box {
        top: 8px !important;
        left: 54px !important;
        right: 54px !important;
        width: auto !important;
        height: 38px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 0 0.4rem;
    }
    .map-search-box input {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Werkzeugleiste zweispaltig statt einer 300px hohen Saeule — sonst
       belegen die neun Knoepfe die halbe Kartenhoehe. */
    .map-tools {
        top: 54px !important;
        right: 8px !important;
        display: grid !important;
        grid-template-columns: repeat(2, 32px);
        gap: 4px;
        justify-items: center;
    }
    .map-tool-btn {
        width: 32px;
        height: 32px;
    }
    .map-tool-btn svg {
        width: 16px;
        height: 16px;
    }

    /* Leaflet Zoom-Buttons unter die Kopfzeile */
    .leaflet-top.leaflet-left {
        top: 54px !important;
    }

    /* Unterste Zeile teilen sich Koordinaten (links) und OSM-Hinweis
       (rechts) — beide auf gleicher Hoehe und gleicher Schriftgroesse.
       Zusammen ~293px, passt damit auch auf 320px-Geraete. Moeglich wird
       das, weil app.js auf Mobile das Leaflet-Eigenwerbe-Praefix abschaltet;
       der lizenzpflichtige OSM-Hinweis bleibt stehen. */
    .leaflet-control-attribution {
        font-size: 9px !important;
        line-height: 14px !important;
        padding: 0 4px !important;
        background: rgba(255, 255, 255, 0.85) !important;
    }
    .leaflet-bottom.leaflet-right {
        bottom: 0 !important;
    }

    /* Kein right: sonst streckt sich die Box ueber die volle Breite und
       laeuft in den Bot-Knopf. */
    .map-status {
        bottom: 0;
        left: 0;
        font-size: 9px;
        line-height: 14px;
        gap: 0.5rem;
        padding: 0 4px;
        border-radius: 0 4px 0 0;
    }

    .leaflet-control-scale {
        margin-left: 0 !important;
        margin-bottom: 18px !important;
    }

    /* Ausschnitt-Hinweis (JS setzt top:8px/left:50% inline) nach unten —
       oben liegen Kopfzeile und Werkzeuge. Rechts am Bot-Knopf vorbei. */
    #map-ausschnitt-hinweis {
        top: auto !important;
        bottom: 42px !important;
        left: 8px !important;
        right: 72px !important;
        transform: none !important;
        max-width: none !important;
        line-height: 1.3;
    }

    /* Selektions-Panel: volle Breite, ueber der Statusleiste, und links
       vom Bot-Knopf vorbei */
    .selection-info-panel {
        left: 8px;
        right: 8px;
        bottom: 72px;
        max-width: none;
        max-height: 30dvh;
    }

    /* KI-Bot-Knopf: ueber die Safari-Leiste heben */
    .bot-fab {
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        right: 16px !important;
        width: 48px !important;
        height: 48px !important;
    }
    .bot-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 75dvh !important;
        border-radius: 12px 12px 0 0 !important;
    }

    /* Modals: volle Breite auf Mobile */
    .modal {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }
    #masterdata-modal .modal,
    #layerviews-modal .modal,
    #settings-modal .modal {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Reiterleisten (Layer-Ansichten, Import, Profil) werden zum
       Klappmenue. Als wischbare Zeile sah man nicht, was noch kommt —
       "Berechnung-Maps" war halb abgeschnitten, "Zielnetz" und
       "acon-Analysen" gar nicht (Stefan 2026-08-16). Bedienung wie der
       Bereichsbaum im Einstellungsfenster. */
    .modal-tabs-knopf {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin-right: 10px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        background: #fff;
        font-size: 17px;
        line-height: 1;
        color: #334155;
        cursor: pointer;
        flex: 0 0 auto;
        -webkit-tap-highlight-color: transparent;
    }
    .modal-tabs-knopf.tabs-knopf-offen {
        background: #e0ecff;
        border-color: #93c5fd;
        color: #1d4ed8;
    }

    /* Eingeklappt weg, ausgeklappt als Liste direkt unter der Kopfzeile.
       Bewusst im normalen Fluss und nicht schwebend: die Leiste steht im
       Dokument ohnehin hinter der Kopfzeile, ein schwebendes Menue
       braeuchte deren Hoehe als feste Zahl — und die stimmt spaetestens
       dann nicht mehr, wenn der Titel zweizeilig wird. */
    .modal-tabs {
        display: none;
    }
    .modal-tabs.tabs-offen {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        max-height: 60dvh;
        overflow-y: auto;
        padding: 4px 0;
        gap: 0;
        background: #fff;
        border-bottom: 1px solid #e2e8f0;
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.10);
    }
    .modal-tabs.tabs-offen .tab-btn {
        width: 100%;
        text-align: left;
        border-radius: 0;
        border-bottom: none;
        padding: 11px 16px;
        font-size: 0.95rem;
        white-space: normal;
    }
    .modal-tabs.tabs-offen .tab-btn.active {
        background: #e0ecff;
        color: #1d4ed8;
        font-weight: 700;
    }

    /* Bibliothek: die Kategorien werden zum Klappmenue. Als dauerhafte
       Liste frassen Nieder-/Mittel-/Hochspannung mit je Al/Cu die halbe
       Bildhoehe, bevor die erste Tabellenzeile kam (Stefan 2026-08-16). */
    .lib-modal-layout {
        flex-direction: column;
        height: auto;
        min-height: 0;
        position: relative;
    }
    .lib-tree-kopf {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        padding: 9px 12px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        background: #fff;
        font-size: 13px;
        font-weight: 600;
        color: #1a2332;
        cursor: pointer;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
    }
    .lib-tree-kopf-pfeil {
        transition: transform 0.18s;
        color: #64748b;
        flex: 0 0 auto;
    }
    .lib-tree-kopf-offen .lib-tree-kopf-pfeil {
        transform: rotate(180deg);
    }
    .lib-tree {
        display: none;
        flex: 0 0 auto;
        max-height: 45dvh;
        margin-top: 4px;
    }
    .lib-tree.lib-tree-offen {
        display: block;
    }
    .lib-tree-node {
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .elem-modal-table-wrap {
        max-height: 55dvh;
    }
    .elem-modal-toolbar {
        flex-wrap: wrap;
    }

    /* Schwebende Fenster (Datenanreicherung, Ergebnisse, Gesuch-Formular,
       Tageskurve, Betriebsmittel-Listen …). Sie tragen ihre Masse inline,
       zum Teil left:280px bei 560px Breite — auf 390px ragte die Haelfte
       aus dem Bild. Die Klasse setzt _makePanelDraggable fuer alle. */
    .float-panel {
        left: 8px !important;
        right: 8px !important;
        top: 56px !important;
        width: auto !important;
        max-width: none !important;
        max-height: 74dvh !important;
        transform: none !important;
    }
    /* Ziehen ergibt auf dem Touchscreen ohnehin nichts — den Griff nicht
       als verschiebbar ausgeben. */
    .float-panel > :first-child {
        cursor: default !important;
        /* Kopfzeile bricht um, statt das ✕ aus dem Bild zu schieben
           (Rundgang 04.10.: Gesuche, Anschlusserhöhungen, Ohne
           Hausanschluss — ✕ bei x = 384 … 438 auf 390 px) */
        flex-wrap: wrap;
    }
    .float-panel > :first-child input {
        min-width: 0;
    }

    /* Fingergerechte Schaltflaechen */
    .layer-row input[type=checkbox],
    .layer-row-bg input[type=checkbox],
    .layer-row-net input[type=checkbox] {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
    }

    /* Burger verstecken wenn Sidebar offen (gesteuert per body-class) */
    body.sidebar-open .mobile-burger {
        display: none;
    }
}

/* -------------------------------------------------------------
   ZOOMSTUFEN (Einstellungen > Projekt)
   Label | Auswahl, mit Gruppenueberschriften ueber die volle Breite.
-------------------------------------------------------------- */
.zoom-grid {
    display: grid;
    grid-template-columns: 1fr 190px;
    align-items: center;
    gap: 6px 14px;
}

.zoom-grid > .zoom-gruppe {
    grid-column: 1 / -1;
    margin: 10px 0 2px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.zoom-grid > .zoom-gruppe:first-child {
    margin-top: 0;
}

.zoom-grid > label {
    font-size: 13px;
    color: #334155;
    min-width: 0;
}

.zoom-hint {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 400;
}

.zoom-select {
    width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
}

/* Vom Standard abweichend: sichtbar markieren, damit man die eigenen
   Eingriffe wiederfindet. */
.zoom-select.zoom-geaendert {
    border-color: #2563eb;
    background: #eff6ff;
    font-weight: 600;
}

@media (max-width: 700px) {
    .zoom-grid { grid-template-columns: 1fr; gap: 2px 0; }
    .zoom-grid > label { margin-top: 8px; }
}

/* -------------------------------------------------------------
   LADEANZEIGE DER KARTE (Stefan 2026-08-16)
   Solange Netzdaten unterwegs sind, sitzt sie unten mittig ueber der
   Karte — nicht oben, dort liegen schon Suche und Werkzeuge, und nicht
   als Vollbild-Schleier: die bereits geladenen Ebenen sollen sichtbar
   und bedienbar bleiben.
-------------------------------------------------------------- */
#map-lade-anzeige {
    position: absolute;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 620;
    display: none;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 24px);
    box-sizing: border-box;
    padding: 6px 12px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.86);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.3);
    pointer-events: none;   /* nie ein Klickhindernis auf der Karte */
}

.map-lade-kreis {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: map-lade-dreh 0.7s linear infinite;
}

@keyframes map-lade-dreh {
    to { transform: rotate(360deg); }
}

/* Auf dem Handy sitzt unten die Massstabs-/Koordinatenzeile — etwas
   hoeher, damit sich beides nicht ueberlagert. */
@media (max-width: 768px), (max-width: 1100px) and (max-height: 500px) {   /* = window.ACON_HANDY_MQ */
    #map-lade-anzeige {
        bottom: 64px;
        font-size: 11px;
    }
}

/* WICHTIG: hidden MUSS am Ende stehen und alles überstimmen */
.hidden {
    display: none !important;
}

/* Verschiebt die Leaflet Zoom-Buttons etwas weiter nach unten,
   damit die Suchleiste oben links nicht überdeckt wird */
.leaflet-top.leaflet-left {
    top: 55px !important;
}

/* -------------------------------------------------------------
   LAYER-ANSICHTEN: Einheitliches Layout der Layer-Zeilen
   -------------------------------------------------------------
   Jede Zeile besteht aus:
   1) einer Checkbox (sichtbar / unsichtbar)
   2) einem Layernamen (Label)
   3) einem Transparenz-Slider (0–100 %)
   
   Die Grid-Struktur sorgt für:
   - saubere, gleiche Ausrichtung aller Elemente
   - ausreichend Platz für lange Layer-Namen
   - ein einheitliches Look & Feel über alle Layer-Gruppen hinweg

   Hinweis:
   Dieses Layout wird NUR für die Layer-Reiter verwendet,
   nicht für Stammdaten oder Tools. Änderungen hier wirken
   direkt auf alle Layer des "Hintergrund / Schweiz"-Tabs
   sowie später auf Stammdaten- und Berechnungslayer.
-------------------------------------------------------------- */
.layer-row {
    display: grid;
    min-width: 0;
    grid-template-columns: 22px 1fr 120px; /* Checkbox | Label | Slider */
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0;
    font-size: 0.85rem; /* etwas kleiner, damit lange Layernamen nicht gequetscht sind */
}
/* Spezielles Layout für Hintergrund-Schweiz-Layer:
   Checkbox | Label | Spinner | Datum | Update | Slider
   (Spinner-Spalte fix, damit beim Ein-/Ausblenden nichts „umbricht“)
*/
.layer-row-bg {
    grid-template-columns: 22px minmax(0, 1fr) 20px auto auto 120px;
}

/* Explizite Spaltenzuordnung – robust, auch wenn der Spinner als eigenes Element
   in die Zeile eingefügt wird (keine zweite Zeile / kein Layout-Hüpfen) */
.layer-row-bg label,
.layer-row-bg .layer-label {
    grid-column: 2;
}

.layer-row-bg .bgdata-spinner {
    grid-column: 3;
    justify-self: start;
}

.layer-row-bg .layer-meta-date {
    grid-column: 4;
}

.layer-row-bg .layer-update-btn {
    grid-column: 5;
}

.layer-row-bg .layer-opacity-slider {
    grid-column: 6;
}

/* Label in Layer-Zeilen: immer einzeilig, kein "Layout-Hüpfen" */
.layer-row label,
.layer-row-bg label,
.layer-row .layer-label,
.layer-row-bg .layer-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* wichtig für Grid: erlaubt Ellipsis statt Umbruch */
}

/* Datum-Label (kompakt) */
.layer-meta-date {
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
}

/* Update-Button schlank halten */
.layer-update-btn {
    font-size: 0.78rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #cbd5f5;
    background-color: #e5edff;
    cursor: pointer;
}

.layer-update-btn:hover {
    background-color: #d4e4ff;
}

/* BGDATA: Spinner nie im Update-Button rendern (Spinner gehört in die eigene Grid-Spalte) */
.layer-update-btn .bgdata-spinner {
    display: none !important;
    visibility: hidden !important;
}

/* -------------------------------------------------------------
   Transparenz-Slider für Layer
   -------------------------------------------------------------
   - Einheitliche Breite
   - Wird rechtsbündig in der layer-row dargestellt
-------------------------------------------------------------- */
.layer-opacity-slider {
    width: 110px;
}

/* Import-Netz Tab: Checkbox | ▶ | Icon | Label | Slider — wie Geo-CH-
   Zeile, aber mit Subclass-Aufklapp-Pfeil und Icon-Spalte. */
.layer-row-net {
    grid-template-columns: 22px 18px 18px minmax(0, 1fr) 120px;
}
.layer-row-net > svg { grid-column: 3; }
.layer-row-net > label { grid-column: 4; }
.layer-row-net > .layer-opacity-slider { grid-column: 5; }

.net-sub-toggle {
    grid-column: 2;
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    font-size: 0.75rem;
    padding: 0;
    width: 18px;
    transition: transform 0.15s;
}
.net-sub-toggle.open { transform: rotate(90deg); }
.net-sub-toggle:hover { color: #0f172a; }

.net-sub-list {
    margin: 0 0 4px 28px;
    padding-left: 8px;
    border-left: 2px solid #e5e7eb;
    display: none;
    font-size: 0.8rem;
}
.net-sub-list.open { display: block; }
.net-sub-list .net-sub-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}
.net-sub-list .net-sub-item input[type=checkbox] { margin: 0; }
.net-sub-list .net-sub-item .net-sub-count {
    color: #94a3b8;
    font-size: 0.72rem;
    margin-left: auto;
}
/* Info-Box für Perimeter im Layer-Ansichten-Modal */
.perimeter-info {
    margin-bottom: 0.8rem;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    background-color: #eff6ff;  /* leichtes Blau */
    border: 1px solid #bfdbfe;  /* Blauton Rahmen */
    font-size: 0.8rem;
    color: #1e3a8a;            /* dunkleres Blau */
}
.layer-perimeter-info {
    font-size: 0.85rem;
    color: #555;
    margin: 0 0 0.5rem 0;
}

.street-label {
    font-size: 10px;
    font-family: system-ui, sans-serif;
    color: #444;
    text-shadow: 0 0 3px rgba(255,255,255,0.9);
    white-space: nowrap;
}

.street-label-outer,
.street-label-inner,
.street-label-icon-wrapper {
    display: none;
}

/* Zielnetz-Elemente rechts unten in der Karte (EnBAG 06.10.2026) — unterstes
   Feld des Stapels rechts unten; Auswahl-Info und Ergebnisuebersicht ruecken
   darueber (_positionResultSummaryPanel). */
.zn-werkzeug-karte {
    position: absolute;
    bottom: 24px;
    right: 10px;
    z-index: 605;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
    padding: 5px 7px 6px;
    max-width: 330px;
}
.zn-werkzeug-titel {
    font-size: 9.5px;
    color: #0d9488;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.zn-werkzeug-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.zn-werkzeug-knoepfe .tool-btn {
    font-size: 11px;
    padding: 4px 8px;
    width: auto;
}
.selection-info-panel {
    position: absolute;
    /* Panel schwebt innerhalb der Karte; bottom 24px laesst die Leaflet-
       Attribution (unten rechts) frei. */
    bottom: 24px;
    right: 10px;
    z-index: 600;

    background: rgba(255, 255, 255, 0.96);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);

    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;

    max-width: 360px;
    max-height: 35vh;              /* statt fixe 180px → ca. ein Drittel des Screens */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* flüssiges Scrollen auf macOS/iOS */
}

/* Rest bleibt wie von dir schon definiert */
.selection-info-panel table.selection-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.selection-info-panel table.selection-table th,
.selection-info-panel table.selection-table td {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid #e2e8f0;
}
.selection-info-panel tr.selection-more-row td {
    font-style: italic;
    color: #64748b;
}
.selection-info-panel tr[data-type][data-index] {
    cursor: pointer;
}
.selection-info-panel tr[data-type][data-index]:hover {
    background-color: #f1f5f9;
}

.heating-hexagon-wrapper {
    /* keine speziellen Styles notwendig, dient als Container */
}

.heating-hexagon {
    width: 8px;
    height: 8px;
    /* echtes Sechseck: */
    clip-path: polygon(
        25% 0%,
        75% 0%,
        100% 50%,
        75% 100%,
        25% 100%,
        0% 50%
    );
    border: 0.5px solid #111827;
    box-sizing: border-box;
}
/* --- BGDATA: Loading-State + Toast (minimal-invasiv) --- */
.bgdata-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  visibility: hidden;          /* Platz reservieren, aber unsichtbar */
  animation: bgdata-spin 0.8s linear infinite;
  margin: 0;
  vertical-align: middle;
  opacity: 0.8;
}

.bgdata-loading .bgdata-spinner { visibility: visible; }

@keyframes bgdata-spin { to { transform: rotate(360deg); } }

/* Kreisel fuer laufende Vorgaenge im Statustext (Import, Delta-Vorschau,
   Aktualisierung). Die Klasse wurde im JS seit jeher verwendet, war aber nie
   definiert — der Import zeigte damit gar keinen Kreisel (Stefan 2026-08-17). */
.spinner {
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  vertical-align: -1px;
  margin-right: 4px;
  opacity: 0.75;
  animation: bgdata-spin 0.7s linear infinite;
}

#bgdata-toast-container{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
}

.bgdata-toast{
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  font-size: 13px;
  line-height: 1.25;
  background: rgba(20,20,20,0.92);
  color: #fff;
}

.bgdata-toast.info  { background: rgba(20,120,80,0.92); }
.bgdata-toast.warn  { background: rgba(180,120,20,0.92); }
.bgdata-toast.error { background: rgba(160,40,40,0.92); }

/* ====================================================
   Element-Modal (Item 5/6): Tabellen + Detail-Formulare
   ==================================================== */
.elem-modal-toolbar {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 8px; padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

/* Library-Modal: zweispaltiges Layout (Baum links, Tabelle rechts) */
.lib-modal-layout {
    display: flex; gap: 12px; min-height: 400px; height: calc(90vh - 140px);
}
.lib-tree {
    flex: 0 0 220px; overflow: auto;
    border: 1px solid #e5e7eb; border-radius: 4px;
    background: #fafbfc; padding: 6px 4px;
    font-size: 12px;
}
.lib-tree-group {
    margin-bottom: 4px;
}
.lib-tree-node {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 8px; cursor: pointer; border-radius: 3px;
    user-select: none; gap: 6px;
}
.lib-tree-node:hover { background: #e5edf7; }
.lib-tree-node.active { background: #3b82f6; color: #fff; font-weight: 600; }
.lib-tree-node.active .lib-tree-count { background: rgba(255,255,255,0.25); color: #fff; }
.lib-tree-node.level-0 { font-weight: 600; }
.lib-tree-node.level-1 { padding-left: 22px; font-size: 11px; color: #475569; }
.lib-tree-node.level-2 { padding-left: 38px; font-size: 11px; color: #637282; }
.lib-tree-count {
    background: #e5e7eb; color: #475569; font-size: 10px;
    padding: 1px 6px; border-radius: 10px; min-width: 22px; text-align: center;
}
.lib-content {
    flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column;
}
.elem-modal-filter {
    flex: 1 1 auto; padding: 5px 10px; font-size: 13px;
    border: 1px solid #d1d5db; border-radius: 4px;
    min-width: 200px;
}
.elem-modal-toolbar .elem-modal-btn {
    flex: 0 0 auto;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    width: auto;
    min-width: 0;
    height: auto;
}
.elem-modal-toolbar .elem-modal-btn:hover { background: #e5e7eb; }

/* Stations-/VK-Label im Pane "pane-station-labels":
   Bei kleiner Schriftgrösse (Maßstab > 50m, z < 18) auch Padding/Border
   reduzieren, damit die Boxen schmaler werden und weniger Karte überdecken. */
.leaflet-pane.leaflet-pane-station-labels span {
    line-height: 1.1;
}
.leaflet-pane.leaflet-pane-station-labels span[style*="font-size:inherit"] {
    transition: font-size 0.15s linear;
}
.elem-modal-counter {
    font-size: 11px; color: #637282; white-space: nowrap;
    flex: 0 0 auto;
}
.elem-modal-table-wrap {
    overflow: auto; max-height: calc(90vh - 200px);
    border: 1px solid #e5e7eb; border-radius: 4px;
}
/* Wenn die Tabelle Teil eines Library-Layouts ist, soll sie den Restraum füllen */
.lib-content .elem-modal-table-wrap {
    max-height: none; flex: 1 1 auto;
}
.elem-modal-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
}
.elem-modal-table th {
    padding: 6px 8px; text-align: left; background: #f3f4f6;
    border-bottom: 2px solid #d1d5db; cursor: pointer; user-select: none;
    white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
.elem-modal-table th:hover { background: #e0e7ef; }
.elem-modal-table th .sort-ind { color: #4a9eff; font-size: 10px; margin-left: 4px; }
.elem-modal-table td {
    padding: 4px 8px; border-bottom: 1px solid #f0f0f0;
    white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.elem-modal-table tr { cursor: pointer; }
.elem-modal-table tr:hover { background: #f0f7ff; }
.elem-modal-table tr.selected { background: #dbeafe; }
.elem-form-row {
    display: flex; gap: 10px; margin-bottom: 6px; align-items: center;
}
.elem-form-row label {
    width: 180px; font-size: 12px; color: #475569; font-weight: 600;
    flex-shrink: 0;
}
.elem-form-row input, .elem-form-row select, .elem-form-row textarea {
    flex: 1; padding: 5px 8px; border: 1px solid #d1d5db;
    border-radius: 3px; font-size: 12px; background: #fff;
}
.elem-form-row input[readonly] { background: #f9fafb; color: #6b7280; }

/* Strukturierte Detail-Form (Element/Bibliotheks-Edit): Felder in
   thematische Gruppen + 2-Spalten-Grid pro Gruppe — spart vertikalen
   Raum und macht die Form auf einen Blick erfassbar. */
.elem-form-section { margin-bottom: 14px; }
.elem-form-section h3 {
    font-size: 11px;
    color: #475569;
    margin: 0 0 8px;
    padding-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    border-bottom: 1px solid #e5e7eb;
}
.elem-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 18px;
}
.elem-form-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0; /* erlaubt Schrumpfen in Grid-Spalten */
}
.elem-form-field label {
    width: 90px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.elem-form-field input,
.elem-form-field select,
.elem-form-field textarea {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    font-size: 12px;
    background: #fff;
}
.elem-form-field input[readonly],
.elem-form-field select[disabled] {
    background: #f9fafb;
    color: #6b7280;
}
/* Bei sehr schmalen Fenstern auf 1 Spalte zurueckschalten */
@media (max-width: 700px) {
    .elem-form-grid { grid-template-columns: 1fr; }
}
.elem-form-footer {
    margin-top: 14px; padding-top: 10px; border-top: 1px solid #e5e7eb;
    display: flex; gap: 8px; justify-content: flex-end;
}
/* Einstellungen breiter (Stefan 2026-07-06: Zielnetzplanung-Untermenues
   Grundsaetze/Varianten/Einfluesse wirkten gequetscht) */
#settings-modal .modal {
    width: 1100px;
    max-width: 96vw;
}
#tab-targetgrid textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
}
#tab-targetgrid #gs-liste, #tab-targetgrid #einfl-liste {
    max-height: 60vh;
}
#tab-targetgrid #vz-tabelle input[type="number"] {
    width: 110px;
    text-align: right;
}
#tab-targetgrid #vz-tabelle td, #tab-targetgrid #vz-tabelle th {
    padding: 6px 8px;
}

/* -------------------------------------------------------------------
   LAYER-ZEILEN AUF DEM HANDY (<=768px)

   Steht bewusst am DATEIENDE: die Grundregeln fuer .layer-row/-bg/-net
   kommen weiter oben nach der grossen Mobil-Media-Query, und bei
   gleicher Spezifitaet gewinnt die spaetere Regel. Von dort aus greifen
   diese Regeln ohne !important.
   ------------------------------------------------------------------- */
@media (max-width: 768px), (max-width: 1100px) and (max-height: 500px) {   /* = window.ACON_HANDY_MQ */
/* Layer-Zeilen dreizeilig statt einzeilig. Das Raster
   (22px | Label | Spinner | Datum | Update | 120px Slider) liess vom
   Namen nur "A…" uebrig (Stefan 2026-08-16).

   Feste Bereiche statt Umbruch nach Platz: sonst haengt es an der
   Textlaenge, ob "Stand: –" noch neben den Namen rutscht und der
   Update-Knopf allein in der naechsten Zeile steht. */
/* display ausdruecklich: die Geo-CH-Zeilen tragen BEIDE Klassen
   (class="layer-row layer-row-bg"), und die Flex-Regel weiter unten
   wuerde das Raster sonst aushebeln. */
.layer-row-bg {
    display: grid !important;
    grid-template-columns: 20px 1fr auto;
    grid-template-areas:
        "kasten name   name"
        ".      datum  knopf"
        ".      regler regler";
    gap: 4px 8px;
    align-items: center;
}
.layer-row-bg > input[type=checkbox] { grid-area: kasten; }
.layer-row-bg > label,
.layer-row-bg > .layer-label      { grid-area: name; }
.layer-row-bg > .layer-meta-date  { grid-area: datum; justify-self: start; }
.layer-row-bg > .layer-update-btn { grid-area: knopf; justify-self: start; }
.layer-row-bg > .layer-opacity-slider { grid-area: regler; width: auto; }
/* Die Ladeanzeige braucht mobil keine eigene Spalte — sie sass nur
   dort, damit die Zeile beim Ein-/Ausblenden nicht springt. */
.layer-row-bg > .bgdata-spinner {
    grid-area: datum;
    justify-self: end;
}

/* Uebrige Layer-Zeilen (Import-Netz, Stammdaten): Kaestchen und Name
   oben, Regler darunter. Die Geo-CH-Zeilen ausnehmen — sie tragen
   .layer-row mit und behalten ihr Raster von oben. */
.layer-row:not(.layer-row-bg),
.layer-row-net {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}
.layer-row > label,
.layer-row > .layer-label,
.layer-row-net > label {
    flex: 1 1 auto;
    min-width: 0;
}
.layer-row > .layer-opacity-slider,
.layer-row-net > .layer-opacity-slider {
    flex: 1 1 100%;
    width: auto;
    margin-left: 28px;
}

/* Namen duerfen umbrechen statt abgeschnitten zu werden. */
.layer-row label,
.layer-row-bg label,
.layer-row-net label,
.layer-row .layer-label,
.layer-row-bg .layer-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Etwas Luft, sonst verschwimmen die mehrzeiligen Bloecke ineinander. */
.layer-row,
.layer-row-bg,
.layer-row-net {
    padding: 7px 0;
    border-bottom: 1px solid #f1f5f9;
}
}

/* ── ZIEHEN MARKIERT KEINEN TEXT (Stefan 2026-09-08) ──────────────────────
   "wenn ich eine Stationsbeschriftung verschieben möchte, wird zum einen das
   ganze Bild im Browser mit markiert bei drag and drop".

   Die Beschriftung ist echter Text in einem divIcon. Zieht man daran, hält
   der Browser das für eine Textauswahl und markiert quer über die Seite
   weiter. Leaflet unterdrückt das nur für den Karten-Hintergrund, nicht für
   den Inhalt der Symbole. Die Sperre gehört deshalb auf JEDES Kartensymbol
   und nicht an die eine Stelle, an der es gerade auffiel. */
.leaflet-marker-icon,
.leaflet-marker-icon *,
.leaflet-tooltip,
.leaflet-div-icon {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Name eines Planungsbereichs auf der Karte (Stefan 2026-09-15: mehrere
   Bereiche). Ohne Beschriftung ist bei mehreren Gebieten nicht zu sehen,
   welches man gerade ein- oder ausschaltet. Bewusst zurueckhaltend — der
   Bereich ist Rahmen, nicht Inhalt. */
/* Stefan 2026-09-26: „der Name des Planungsbereichs sollte auf gleicher
   Zoom-Stufe ersichtbar werden wie der Name von Stationen. Weil jetzt ist er
   global ueberall sichtbar … und dann sieht es sehr, sehr gross aus gegenueber
   den ganz kleinen Netzen im Hintergrund."
   Groesse und Sichtbarkeit setzt updateLabelVisibility() in app.js — dieselbe
   Funktion, die die Stationsnamen schaltet, damit beide nie auseinanderlaufen. */
.peri-labels-aus .leaflet-tooltip.peri-label { display: none; }
.leaflet-tooltip.peri-label {
    background: rgba(255, 255, 255, 0.78);
    border: none;
    box-shadow: none;
    color: #0d9488;
    font-size: var(--peri-label-size, 11px);
    font-weight: 600;
    padding: 1px 5px;
    white-space: nowrap;
    pointer-events: none;
}
.leaflet-tooltip.peri-label::before { display: none; }

/* ── ANALYSEKREISE UEBER DEM HAUSANSCHLUSS (Stefan 2026-09-28) ─────────────
   „wenn ich die Nullungsbedingungen rechnen lasse und die Visualisierung
   davon in der Karte habe, ist dieser Kreis bei den Hausanschlüssen nur am
   Rand anwählbar und nicht mittig."
   GEMESSEN (Browser, Test): in der Kreismitte liegt das HAK-Symbol — ein
   DOM-Marker (.hak-marker-icon) in pane-import-icons (z 715) —, der Kreis
   selbst liegt auf dem gemeinsamen Canvas darunter (z 710). Mitte: kein
   Nullungs-Tooltip; 9 px daneben: da. Solange eine Analyseebene mit
   anklickbaren Kreisen liegt (Nullung, Selektivitaet), laesst das Symbol die
   Maus deshalb durch; der Kreis waehlt beim Klick denselben Hausanschluss. */
.analysekreise-an .hak-marker-icon,
.analysekreise-an .hak-marker-icon * {
    pointer-events: none !important;
}

/* ── TRANSPARENZ JE ANSICHT (Stefan 2026-09-28) ───────────────────────────
   Die Zeilen der Gruppen Stammdaten bis acon-Analysen stehen als .form-row
   (Spalte). Mit Regler: Beschriftung links, Regler rechts — wie bei Geo-CH
   und Import-Netz (120 px). */
.form-row.mit-regler {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.form-row.mit-regler > label {
    flex: 1 1 auto;
    min-width: 0;
}
.form-row.mit-regler > .layer-opacity-slider {
    flex: 0 0 120px;
    width: 120px;
}
.form-row.mit-regler > .layer-opacity-slider:disabled {
    opacity: 0.4;
}

/* Leiste „ungespeicherte Änderungen“ (unten rechts, fest): die Seitenleisten
   bekommen darunter Platz, damit der letzte Knopf erreichbar bleibt
   (Rundgang 04.10.2026, Handy: „📋 Anschlusskabel zu schwach“ verdeckt) */
body.arbeitsstand-offen .sidebar-right,
body.arbeitsstand-offen .sidebar-left {
    padding-bottom: 84px;
}

/* FENSTER AUF DEM HANDY (Stefan 14.10.2026: „Das X zum Schließen sehe ich gar nicht … ganz rechts oben im Bild“):
   die Kopfzeile darf umbrechen, das ✕ bleibt fest oben rechts im Fenster — auch wenn Titel und Knöpfe breiter sind. */
@media (max-width: 760px) {
    .fenster-kopf { flex-wrap: wrap; position: relative; padding-right: 64px !important; row-gap: 6px; }
    .fenster-kopf > span[style*="flex:1"] { display: none; }
    .fenster-kopf .fenster-zu { position: absolute; top: 8px; right: 8px; }
    .fenster-kopf .tool-btn { width: auto; }
}

/* LANGER TITEL SCHIEBT DAS ✕ NICHT HINAUS (Stefan 14.10.2026, Detailformular Hausanschluss auf dem Handy:
   „Details: EL_V_DSP_SERV_POINT_6984169“ ist EIN Wort ohne Umbruchstelle und war breiter als der Bildschirm) —
   der Titel bricht um, das ✕ behält seine Breite, zu breite Inhalte scrollen im Fenster statt es zu verbreitern. */
.modal-header { min-width: 0; }
.modal-header h2 { min-width: 0; overflow-wrap: anywhere; }
.modal-close { flex: 0 0 auto; }
.modal { min-width: 0; }
.modal-body { min-width: 0; overflow-x: auto; }

/* HANDY QUER (≤ 500 px hoch): Werkzeugleiste dreispaltig — zweispaltig reichte sie bis 362 px hinunter und der
   Niki-Knopf unten rechts verdeckte die letzte Reihe (Neu laden, Hintergrundkarte; Formatprüfung 14.10.2026) */
@media (max-width: 1100px) and (max-height: 500px) {
    .map-tools {
        grid-template-columns: repeat(3, 32px) !important;
    }
}