/* Gegenanflug – Lagebild (app-komponenten.md Abschnitt 7): Kartengrund wie VFRplan (Leaflet, lagekarte-grund.js), Punkte nach Buchstatus mit Farbe UND
   Form, kein Rot, kein Radar-Look, veraltet → ganze Karte grau. */
/* isolation: Leaflet-Ebenen (z-index 400–1100) bleiben in der Karte – sonst lagen sie über dem Ich-Menü */
.lage { position: relative; isolation: isolate; display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.lage-banner { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; font-size: var(--fs-klein); line-height: 1.35;
  background: var(--surface); color: var(--text); border-bottom: 1px solid var(--rule); margin: 0; }
.lage-banner b { color: var(--ink); }
.lage__flaeche { position: relative; margin: 0 8px; background: var(--lage-karte); border-radius: 8px; overflow: hidden; }
.lage__karte { display: block; width: 100%; aspect-ratio: 1; }
.lage__karte.leaflet-container { background: var(--lage-karte); font: var(--fs-klein)/1.3 var(--f-body); }
/* Eigene Zeichnung über dem Kartengrund (Leaflet-SVG, Farben nur per Klasse – CSP ohne Inline-Stile) */
.lage-ring { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.2; stroke-dasharray: 5 5; }
.lage-ringtext { width: auto !important; height: auto !important; margin: 2px 0 0 -34px; white-space: nowrap; color: var(--ink);
  font: 600 var(--fs-klein)/1 var(--f-display); text-shadow: 0 0 2px var(--surface), 0 0 3px var(--surface); pointer-events: none; }
.lage-piste { stroke: var(--ink); stroke-opacity: .85; }
.lage-piste--gras { stroke: var(--muted); stroke-dasharray: 6 3; }
.lage-platzrunde { fill: none; stroke: var(--ink); stroke-opacity: .6; stroke-width: 2; stroke-dasharray: 8 6; }
.lage-arp { fill: var(--ink); fill-opacity: 1; stroke: var(--surface); stroke-width: 1; }
.lage-ziel-icon { background: none; border: 0; }
.lage-ziel { position: relative; display: block; width: 30px; height: 30px; cursor: pointer; outline: none; }
/* Piktogramm (lage-symbole.js) in der Farbe des Buchstatus; kleine Marke unten rechts = Form des Buchstatus */
.lage-marke { position: absolute; right: -4px; bottom: -4px; width: 10px; height: 10px; }
.lage-marke--imbuch, .lage-marke--verein, .lage-marke--unbekannt { stroke: var(--surface); stroke-width: 2; }
.lage-marke--imbuch { fill: var(--lage-imbuch); } .lage-marke--verein { fill: var(--lage-verein); } .lage-marke--unbekannt { fill: var(--lage-unbekannt); }
.lage-marke--durchflug { fill: var(--surface); stroke: var(--lage-durchflug); stroke-width: 2.5; }
.lage-ziel--gewaehlt::before { content: ""; position: absolute; inset: -5px; border: 2.5px solid var(--focus, var(--brand)); border-radius: 50%; }
.lage-legende-fern { fill: #2f9e55; stroke: var(--surface); stroke-width: 1.5; }
.lage-legende__knopf { padding: 2px 10px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: 600 var(--fs-klein)/1.3 var(--f-body); cursor: pointer; }
.lage__hoehen { margin: 0 12px; }
.lage-hoehen text { fill: var(--text); }
.lage-symbol { display: block; overflow: visible; }
.lage-punkt { fill: var(--p); stroke: var(--ink); stroke-opacity: .55; stroke-width: 1; }
/* Halo unter dem Piktogramm: hebt es auf hellem wie dunklem Kartengrund ab */
.lage-halo { fill: none; stroke: var(--surface); stroke-width: 4.5; stroke-linejoin: round; opacity: .9; }
.lage-punkt--imbuch { --p: var(--lage-imbuch); }
.lage-punkt--verein { --p: var(--lage-verein); }
.lage-punkt--unbekannt { --p: var(--lage-unbekannt); }
.lage-punkt--durchflug { fill: none; stroke: var(--lage-durchflug); stroke-opacity: 1; stroke-width: 2.5; }
.lage-legende-pikto { fill: var(--lage-imbuch); stroke: var(--ink); stroke-opacity: .55; stroke-width: 1; }
.lage-label { position: absolute; left: 33px; top: 6px; white-space: nowrap; color: var(--ink); font: 600 var(--fs-klein)/1.15 var(--f-display);
  text-shadow: 0 0 2px var(--surface), 0 0 2px var(--surface), 0 0 4px var(--surface); pointer-events: none; }
.lage-ziel:focus-visible .lage-punkt { stroke: var(--focus); stroke-width: 3; }
.lage-schalter { display: grid; justify-items: end; gap: 4px; }
.lage-schalter__knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 2rem; padding: 4px 10px; border: 1px solid var(--rule-strong);
  border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 var(--fs-klein)/1 var(--f-body); cursor: pointer; }
.lage-schalter__knopf input { width: 16px; height: 16px; margin: 0; }
.lage .leaflet-control-attribution { max-width: 75%; font-size: var(--fs-klein); line-height: 1.35; white-space: normal; text-align: right;
  background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); }
.lage .leaflet-control-attribution a { color: var(--brand-fg, var(--ink)); }
.lage .leaflet-bar a { background: var(--surface); color: var(--ink); border-color: var(--rule); }
.lage--veraltet .lage__karte { filter: grayscale(1) opacity(.35); }
.lage__veraltet { position: absolute; inset: 0; z-index: 1100; display: none; place-items: center; background: color-mix(in srgb, var(--lage-veraltet-bg) 70%, transparent);
  color: var(--lage-veraltet-fg); font: 700 1.5rem/1.1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.lage__veraltet small { display: block; font: 500 var(--fs-klein)/1.4 var(--f-body); letter-spacing: 0; text-transform: none; margin-top: 6px; }
.lage--veraltet .lage__veraltet { display: grid; }
.lage__tooltip { margin: 0 12px; min-height: 20px; font-size: var(--fs-klein); color: var(--ink); font-variant-numeric: tabular-nums; }
.lage__legende { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 0 12px; padding: 0; font-size: var(--fs-klein); color: var(--text); }
.lage__legende li { display: inline-flex; align-items: center; gap: 6px; }
.lage__legende svg { width: 14px; height: 14px; }
.lage__hinweis { margin: 0 12px; font-size: var(--fs-klein); color: var(--text); }
.lage__status { margin: 0 12px; font-size: var(--fs-klein); color: var(--muted); font-variant-numeric: tabular-nums; }
.lage__quellen { margin: 0 12px 10px; font-size: var(--fs-klein); color: var(--muted); }
/* Übriger Verkehr im Ausschnitt: Canvas-Ebene (lagekarte-fern.js), Klicks gehen an die Karte */
.lage-fern { position: absolute; left: 0; top: 0; pointer-events: none; }
/* Kompakt (Bildschirm am Empfänger): ohne Banner (Startbildschirm), Namensnennung einzeilig und antippbar */
.lage-lizenz { margin: 0 !important; padding: 1px 6px; border: 0; border-radius: 5px 0 0 0; background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--text); font: 500 var(--fs-klein)/1.3 var(--f-body); white-space: nowrap; cursor: pointer; opacity: .85; }
.lage--klein .lage-banner { font-size: var(--fs-klein); padding: 6px 10px; }
.lage--klein .lage-schalter__knopf { min-height: 1.75rem; padding: 3px 8px; font-size: var(--fs-klein); }
.lage--klein .leaflet-control-attribution { max-width: 100%; font-size: var(--fs-klein); }

/* Große Ansicht lage.html */
.lage-seite { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; padding: 16px; max-width: 1400px; margin: 0 auto; }
.lage-seite .lage__karte { aspect-ratio: auto; height: max(420px, calc(100dvh - 300px)); }
.lage-vorschlaege { display: grid; gap: 10px; align-content: start; }
@media (max-width: 800px) { .lage-seite { grid-template-columns: 1fr; } }

/* Lagebild vergrößert (lage-gross.js): fast Vollbild über der Seite, die Seite bleibt darunter (abgedunkelt) erhalten;
   am Handy ganzseitig. Die Karte wird umgehängt, nicht neu erzeugt. */
.lage-gross { position: fixed; inset: 16px; z-index: 1500; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--ink) 45%, transparent); }
.lage-gross[hidden] { display: none; }
.lage-gross:fullscreen { inset: 0; border: 0; border-radius: 0; }
.lage-gross__kopf { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--rule); flex: none; }
.lage-gross__kopf h2 { margin: 0 auto 0 0; font: 700 1.125rem/1.2 var(--f-display); color: var(--ink); }
.lage-gross__inhalt { flex: 1 1 auto; min-height: 0; display: flex; }
.lage-gross__inhalt > .lage { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; border: 0; border-radius: 0; }
.lage-gross .lage__flaeche { flex: 1 1 auto; min-height: 200px; margin-top: 2px; }
.lage-gross .lage__karte { aspect-ratio: auto; height: 100%; }
.lage-gross .lage__legende, .lage-gross .lage__status, .lage-gross .lage__quellen, .lage-gross .lage__tooltip { flex: none; }
.lage-gross__sym { width: 1.1em; height: 1.1em; flex: none; }
.lage-gross-knopf { margin-left: auto; gap: 6px; }
@media (max-width: 760px) {
  .lage-gross { inset: 0; border: 0; border-radius: 0; box-shadow: none; }
  body.lage-gross-offen { overflow: hidden; }
  .lage-gross .lage-banner { padding: 4px 10px; }
  /* Handy ganzseitig: Karte behält 60 % der Höhe, Legende und Seitenliste darunter scrollen */
  .lage-gross__inhalt { overflow-y: auto; }
  .lage-gross .lage__flaeche { flex: none; height: 60dvh; }
}

/* Seitenliste am PC (lagekarte-liste.js): unter der Karte, breit (≥ 900 px) rechts daneben; Zeile antippen = folgen */
.lage-liste { margin: 0 12px 10px; font-size: var(--fs-klein); color: var(--text); }
.lage-liste > summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 4px 0; }
.lage-liste__werkzeuge { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 4px 0 6px; }
.lage-liste__werkzeuge input[type=search] { flex: 1 1 160px; min-width: 0; padding: 4px 8px; border: 1px solid var(--rule-strong); border-radius: 6px;
  background: var(--surface); color: var(--ink); font: inherit; }
.lage-liste__werkzeuge select { font: inherit; }
.lage-liste__spalten > summary { cursor: pointer; }
.lage-liste__spalten label { display: inline-flex; gap: 4px; margin-right: 8px; }
.lage-liste__rollen { max-height: 320px; overflow: auto; border: 1px solid var(--rule); border-radius: 8px; }
.lage-liste table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lage-liste th { position: sticky; top: 0; background: var(--surface); text-align: left; border-bottom: 1px solid var(--rule); padding: 0; }
.lage-liste th button { width: 100%; padding: 4px 6px; border: 0; background: none; color: var(--ink); font: 600 var(--fs-klein)/1.2 var(--f-body); text-align: left; cursor: pointer; }
.lage-liste td { padding: 3px 6px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.lage-liste tr[data-id] { cursor: pointer; }
.lage-liste tr[data-id]:hover, .lage-liste tr[data-id]:focus-visible { background: color-mix(in srgb, var(--brand, #27479f) 8%, transparent); outline: none; }
.lage-liste__nah td:first-child { font-weight: 700; color: var(--ink); }
.lage-liste__fern { color: var(--muted); }
.lage-liste__gewaehlt { background: color-mix(in srgb, var(--brand, #27479f) 16%, transparent); }
.lage-liste__code { font-weight: 700; color: var(--ink); }
.lage-liste table[data-ohne~="typ"] [data-spalte="typ"], .lage-liste table[data-ohne~="squawk"] [data-spalte="squawk"],
.lage-liste table[data-ohne~="hoehe"] [data-spalte="hoehe"], .lage-liste table[data-ohne~="speed"] [data-spalte="speed"],
.lage-liste table[data-ohne~="dist"] [data-spalte="dist"] { display: none; }
.lage--breit { grid-template-columns: minmax(0, 1fr) 360px; }
.lage--breit > * { grid-column: 1; }
.lage--breit > .lage-banner { grid-column: 1 / -1; }
.lage--breit > .lage-liste { grid-column: 2; grid-row: 2 / span 8; height: 0; min-height: 100%; margin: 0 8px 8px 0; display: flex; flex-direction: column; }
.lage--breit > .lage-liste[open] { display: flex; }
.lage--breit .lage-liste__rollen { max-height: none; flex: 1; min-height: 0; }
.lage-gross__inhalt > .lage.lage--breit { display: grid; grid-template-rows: auto minmax(200px, 1fr); grid-auto-rows: auto; }
.lage-gross .lage--breit > .lage-liste { grid-row: 2 / span 7; }