/*
 * Zeichenkomponente <x-dachflaechen> (NS-A4-2).
 *
 * Hell/dunkel über CSS-Variablen: Die Komponente übernimmt die Variablen der
 * Seite (Shop: --bg-2, --fg, --line, --accent …) und fällt sonst auf helle
 * Werte zurück; eine dunkle Seite (interner Editor) setzt --vs-dach-*.
 *
 * Touch (E-5423): Knöpfe und Anfasser mindestens 44 × 44 px, nichts nur über
 * Hover; Browser-Gesten nur auf den Anfassern abgeschaltet, damit die Karte
 * selbst mit einem Finger verschiebbar und mit zweien zoombar bleibt.
 */
.vs-dach {
    --vs-dach-hintergrund: var(--bg-2, #ffffff);
    --vs-dach-text: var(--fg, #0f172a);
    --vs-dach-leise: var(--muted, #64748b);
    --vs-dach-rand: var(--line, #e2e8f0);
    --vs-dach-akzent: var(--accent, #f5a623);
    --vs-dach-akzent-text: var(--navy-dark, #0b2038);
    --vs-dach-knopf: var(--bg, #f8fafc);
    --vs-dach-gefahr: #b42318;
    color: var(--vs-dach-text);
    font-size: .92rem;
}
.vs-dach-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.vs-dach-satz { margin: .2rem 0 .6rem; line-height: 1.5; }

.vs-dach-rahmen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: .9rem; align-items: start; }
.vs-dach--ansicht .vs-dach-rahmen { grid-template-columns: minmax(0, 1fr); }
.vs-dach-kartenspalte { min-width: 0; }
.vs-dach-karte { width: 100%; min-height: 280px; border-radius: 12px; border: 1px solid var(--vs-dach-rand); overflow: hidden; background: #1e293b; }
.vs-dach--zeichnet .vs-dach-karte { cursor: crosshair; }

/* Leiste: Seitenleiste, auf dem Telefon darunter mit klebender Hauptzeile */
.vs-dach-leiste { display: flex; flex-direction: column; gap: .7rem; background: var(--vs-dach-hintergrund); border: 1px solid var(--vs-dach-rand); border-radius: 12px; padding: .8rem; }
.vs-dach-knoepfe { display: flex; flex-wrap: wrap; gap: .45rem; }
.vs-dach-haupt { position: sticky; top: 0; z-index: 2; background: var(--vs-dach-hintergrund); padding: .1rem 0 .3rem; }
.vs-dach-knopf {
    min-height: 44px; min-width: 44px; padding: .55rem .9rem; border-radius: 10px;
    border: 1px solid var(--vs-dach-rand); background: var(--vs-dach-knopf); color: var(--vs-dach-text);
    font: inherit; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.vs-dach-knopf:disabled { opacity: .45; cursor: default; }
.vs-dach-knopf--haupt { background: var(--vs-dach-akzent); border-color: var(--vs-dach-akzent); color: var(--vs-dach-akzent-text); }
.vs-dach-knopf--gefahr { color: var(--vs-dach-gefahr); }
.vs-dach-knopf[aria-pressed="true"] { background: var(--vs-dach-akzent); border-color: var(--vs-dach-akzent); color: var(--vs-dach-akzent-text); }
.vs-dach-knopf:focus-visible, .vs-dach-eingabe:focus-visible { outline: 3px solid var(--vs-dach-akzent); outline-offset: 2px; }
.vs-dach-vorauswahl { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0; }
.vs-dach-knopf--wahl { padding: .45rem .7rem; font-weight: 500; }

.vs-dach-gruppe { border: 1px solid var(--vs-dach-rand); border-radius: 10px; padding: .6rem .7rem; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.vs-dach-gruppe[hidden], .vs-dach [hidden] { display: none !important; }
.vs-dach-gruppe legend, .vs-dach-titel { font-weight: 700; margin: 0; font-size: .95rem; }
.vs-dach-feld { display: flex; flex-direction: column; gap: .3rem; }
.vs-dach-label { font-weight: 600; }
.vs-dach-zeile { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }
.vs-dach-eingabe { min-height: 44px; padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--vs-dach-rand); background: var(--vs-dach-knopf); color: var(--vs-dach-text); font: inherit; }
.vs-dach-hilfe, .vs-dach-leer { color: var(--vs-dach-leise); font-size: .82rem; margin: 0; line-height: 1.45; }
.vs-dach-vorbehalt { color: #8a5a00; font-size: .82rem; margin: 0; }
.vs-dach-hinweis { margin: 0; min-height: 1.2em; font-size: .85rem; font-weight: 600; }
.vs-dach-hinweis:empty { display: none; }
.vs-dach-ohne-polygon { margin: 0 0 .5rem; padding: .5rem .7rem; border-radius: 8px; background: #fff7e6; color: #8a5a00; font-size: .85rem; font-weight: 600; }
.vs-dach-warnungen { margin: 0; padding: .5rem .7rem .5rem 1.4rem; border-radius: 8px; background: #fff7e6; color: #8a5a00; font-size: .85rem; }
.vs-dach-warnungen li.vs-dach-sperrt { color: var(--vs-dach-gefahr); font-weight: 600; }

/* Liste (vereinfacht) und Tabelle (voll) je Teilfläche */
.vs-dach-flaechen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.vs-dach-zeilenknopf { width: 100%; min-height: 44px; text-align: left; display: flex; align-items: center; gap: .5rem; border: 1px solid var(--vs-dach-rand); border-radius: 8px; background: var(--vs-dach-knopf); color: var(--vs-dach-text); font: inherit; padding: .4rem .6rem; cursor: pointer; }
.vs-dach-zeilenknopf.vs-dach-gewaehlt, .vs-dach-tabelle tr.vs-dach-gewaehlt { outline: 2px solid var(--vs-dach-akzent); }
.vs-dach-flaechen i, .vs-dach-tabelle i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: .35rem; flex: none; }
.vs-dach-tabelle-rahmen { overflow-x: auto; }
.vs-dach-tabelle { width: 100%; border-collapse: collapse; font-size: .8rem; }
.vs-dach-tabelle th, .vs-dach-tabelle td { padding: .35rem .4rem; border-bottom: 1px solid var(--vs-dach-rand); text-align: left; white-space: nowrap; }
.vs-dach-tabelle .zahl { text-align: right; }
.vs-dach-tabelle tbody tr { cursor: pointer; }

/* Anfasser: Trefferfläche 44 × 44 px, sichtbarer Punkt 16 px */
.leaflet-marker-icon.vs-dach-anfasser {
    min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; touch-action: none;
}
.vs-dach-punkt { width: 16px; height: 16px; border-radius: 50%; background: #ffffff; border: 3px solid var(--vs-dach-akzent, #f5a623); box-shadow: 0 0 0 1px rgba(0,0,0,.45); box-sizing: border-box; }
.vs-dach-gewaehlt .vs-dach-punkt { background: var(--vs-dach-akzent, #f5a623); border-color: #ffffff; width: 20px; height: 20px; }
.vs-dach-erster .vs-dach-punkt { width: 22px; height: 22px; border-width: 4px; }
.vs-dach-plus { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.55); border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.vs-dach-kreuz { width: 28px; height: 28px; position: relative; }
.vs-dach-kreuz::before, .vs-dach-kreuz::after { content: ""; position: absolute; background: #ffffff; box-shadow: 0 0 0 1px rgba(0,0,0,.5); border-radius: 2px; }
.vs-dach-kreuz::before { left: 12px; top: 0; width: 4px; height: 28px; }
.vs-dach-kreuz::after { top: 12px; left: 0; height: 4px; width: 28px; }

/* Abzugsflächen schraffiert (Muster #vs-dach-schraffur in der Komponente) */
.leaflet-interactive.vs-dach-abzug, path.vs-dach-abzug { fill: url(#vs-dach-schraffur); fill-opacity: 1; }

/* Beschriftung je Teilfläche: Pfeil in Gefällerichtung + „T1 · 57,7 m² · Süd (180°) · 30°“ */
.vs-dach-beschriftung { background: transparent; border: 0; pointer-events: none; }
.vs-dach-beschriftung-innen {
    position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .3rem;
    white-space: nowrap; background: rgba(15,23,42,.78); color: #ffffff; border-radius: 999px;
    padding: .15rem .55rem .15rem .3rem; font: 600 .75rem/1.3 system-ui, sans-serif;
}
.vs-dach-pfeil { width: 18px; height: 18px; color: #fbbf24; flex: none; }

/*
 * Namensnennung des Luftbilds: immer vollständig sichtbar (Review 1). Früher
 * einzeilig mit Auslassungspunkten – auf dem Telefon fiel dabei genau die
 * Nennung der Bayerischen Vermessungsverwaltung weg, die CC BY 4.0 verlangt.
 * Jetzt darf sie umbrechen; zusätzlich steht sie als Zeile unter der Karte
 * (.vs-dach-quelle), die keine Kartenbreite begrenzt.
 */
.vs-dach .leaflet-control-attribution { white-space: normal; overflow: visible; max-width: 100%; font-size: 10px; line-height: 1.35; box-sizing: border-box; }
.vs-dach-quelle { margin: .3rem 0 0; color: var(--vs-dach-leise); font-size: .72rem; line-height: 1.4; }

@media (max-width: 860px) {
    .vs-dach-rahmen { grid-template-columns: minmax(0, 1fr); }
    .vs-dach-karte { height: min(65vh, 520px) !important; }
    .vs-dach-haupt { position: sticky; bottom: 0; top: auto; border-top: 1px solid var(--vs-dach-rand); }
}

@media print {
    .vs-dach-leiste { display: none; }
}