/* Radar: die Karte füllt den Bildschirm, zwei grosse Buttons unten (Hochformat) bzw. rechts (Querformat, Tablet;
   Brief §10). Farben aus dem Mockup (Gefahr #E8470F, Tier #1E5AA8, Text #15201B, Fläche #F3F6F4), hell und dunkel
   über Variablen (D17): automatisch nach Gerät, oder <html data-thema="hell|dunkel"> aus den Einstellungen. */
:root {
  color-scheme: light;
  --tb-gefahr: #E8470F;
  --tb-tier: #1E5AA8;
  --tb-gruen: #2F6B3A;
  --tb-kopf: #15201B;
  --tb-text: #15201B;
  --tb-text-leise: #3D4A43;
  --tb-flaeche: #F3F6F4;
  --tb-kasten: #FFFFFF;
  --tb-linie: #C9D4CE;
  --tb-meldung: #15201B;
  --tb-ueberlagerung: rgba(243, 246, 244, 0.97);
  --tb-knopf: #15201B;
  --tb-knopf-text: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    color-scheme: dark;
    --tb-text: #E8EEEA;
    --tb-text-leise: #A9B6AE;
    --tb-flaeche: #101612;
    --tb-kasten: #1C2520;
    --tb-linie: #2E3A33;
    --tb-meldung: #2A3530;
    --tb-ueberlagerung: rgba(16, 22, 18, 0.97);
    --tb-knopf: #E8EEEA;
    --tb-knopf-text: #15201B;
  }
}
:root[data-thema="dunkel"] {
  color-scheme: dark;
  --tb-text: #E8EEEA;
  --tb-text-leise: #A9B6AE;
  --tb-flaeche: #101612;
  --tb-kasten: #1C2520;
  --tb-linie: #2E3A33;
  --tb-meldung: #2A3530;
  --tb-ueberlagerung: rgba(16, 22, 18, 0.97);
  --tb-knopf: #E8EEEA;
  --tb-knopf-text: #15201B;
}

/* hidden gewinnt immer: sonst übersteuert display:grid das Attribut und Überlagerungen bleiben stehen. */
[hidden] { display: none !important; }
html, body.radar-seite { height: 100%; }
body.radar-seite { margin: 0; background: var(--tb-flaeche); color: var(--tb-text); overflow: hidden; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.4; }

.radar {
  position: fixed; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "kopf" "karte" "hinweis" "aktionen";
}

/* Kopf: Marke, GPS (gibt Platz ab), Schnellschalter Ton, Einstellungen (M40). */
.radar-kopf {
  grid-area: kopf;
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: max(0.5rem, env(safe-area-inset-top)) 1rem 0.5rem;
  background: var(--tb-kopf); color: #fff;
}
.radar-marke { flex: 0 0 auto; font-weight: 800; letter-spacing: 0.02em; text-decoration: none; color: #fff; }
.radar-gps { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.radar-gps[data-stufe="gut"]::before { content: "● "; color: #6fd17f; }
.radar-gps[data-stufe="schwach"]::before { content: "● "; color: #ffd23f; }
.radar-gps[data-stufe="warten"]::before { content: "○ "; }
.radar-schalter { display: flex; gap: 0.25rem; flex: 0 0 auto; }
.radar-schalter-knopf { min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.radar-schalter-knopf[aria-pressed="false"] { opacity: 0.55; }
.radar-schalter-knopf:focus-visible { outline: 3px solid var(--tb-gefahr); outline-offset: 1px; }

.radar-ansicht { grid-area: karte; position: relative; min-height: 0; }
.radar-karte { position: absolute; inset: 0; }
.radar-liste { position: absolute; inset: 0; overflow-y: auto; margin: 0; padding: 0.75rem 1rem; list-style: none; }
.radar-liste .signal { padding: 0.9rem 1rem; margin-bottom: 0.5rem; border-radius: 0.75rem; background: var(--tb-kasten); border-left: 0.5rem solid var(--tb-linie); font-size: 1.05rem; }
.radar-liste .signal--gefahr { border-left-color: var(--tb-gefahr); }
.radar-liste .signal--tier { border-left-color: var(--tb-tier); }
.radar-liste .signal--echo { color: var(--tb-text-leise); background: transparent; border: 1px dashed var(--tb-linie); border-left-width: 0.5rem; }
.radar-liste .signal--echo.signal--gefahr { border-left-color: var(--tb-gefahr); }
.radar-liste .signal--echo.signal--tier { border-left-color: var(--tb-tier); }
.radar-leer { padding: 1rem; color: var(--tb-text-leise); }
.radar-karte-fehlt { position: absolute; left: 1rem; right: 1rem; bottom: 0.5rem; margin: 0; font-size: 0.85rem; color: var(--tb-text-leise); }

/* Marker auf der Karte; Echos zeichnet MapLibre als Ebene (M16). */
.ich { width: 18px; height: 18px; border-radius: 50%; background: var(--tb-gruen); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--tb-gruen); }
.radar-karte .signal { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; color: #fff; font-weight: 800; font-size: 0.9rem; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.radar-karte .signal--gefahr { background: var(--tb-gefahr); border-radius: 6px; }
.radar-karte .signal--tier { background: var(--tb-tier); }

.radar-hinweis { grid-area: hinweis; margin: 0; padding: 0.35rem 1rem; font-size: 0.8rem; background: var(--tb-kasten); border-top: 1px solid var(--tb-linie); }
/* Der Fuss ist ein Landmark (axe «region»), aber kein eigener Kasten: Hinweis und Buttons bleiben Rasterzellen. */
.radar-fuss { display: contents; }

.radar-aktionen {
  grid-area: aktionen; position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
  padding: 0.6rem 0.6rem max(0.6rem, env(safe-area-inset-bottom));
  background: var(--tb-kasten);
}
.radar-melden {
  min-height: 88px; border: 0; border-radius: 1rem;
  font: 800 1.9rem/1 "Lilita One", "Arial Black", system-ui, sans-serif; letter-spacing: 0.03em;
  color: #fff; cursor: pointer; touch-action: manipulation;
}
.radar-melden--gefahr { background: var(--tb-gefahr); }
.radar-melden--tier { background: var(--tb-tier); }
.radar-melden:disabled { opacity: 0.4; cursor: not-allowed; }
.radar-melden[aria-busy="true"] { filter: brightness(0.85); }
.radar-melden:focus-visible { outline: 4px solid var(--tb-text); outline-offset: 2px; }

.radar-rueckmeldung {
  position: absolute; left: 0.75rem; right: 0.75rem; bottom: calc(100% + 0.5rem); margin: 0;
  padding: 0.8rem 1rem; border-radius: 0.75rem; background: var(--tb-meldung); color: #fff;
  font-size: 1.1rem; font-weight: 700; text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.radar-rueckmeldung[data-art="fehler"] { background: #9b2c12; }
.radar-rueckmeldung[data-art="warten"] { background: #3D4A43; }
/* Ping (D3: Richtung und Distanz gratis): dieselbe Zeile, mit Akzent, kein Popup. */
.radar-rueckmeldung[data-art="ping"] { box-shadow: inset 0.5rem 0 0 var(--tb-gefahr), 0 2px 10px rgba(0, 0, 0, 0.3); }

.radar-ueberlagerung {
  position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; gap: 1rem;
  padding: 1.5rem; background: var(--tb-ueberlagerung); text-align: center;
}
.radar-ueberlagerung h1 { margin: 0; font-size: 1.6rem; }
.radar-ueberlagerung p { margin: 0; max-width: 28rem; }
.radar-knopf { justify-self: center; min-height: 56px; padding: 0 1.75rem; border: 0; border-radius: 0.9rem; background: var(--tb-knopf); color: var(--tb-knopf-text); font-size: 1.15rem; font-weight: 700; cursor: pointer; }
.radar-erster-hinweis { position: absolute; top: 0.75rem; left: 0.75rem; right: 0.75rem; z-index: 4; margin: 0; padding: 0.6rem 0.9rem; border-radius: 0.75rem; background: var(--tb-kasten); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); font-size: 0.95rem; }

/* Einstellungen (M40): Blatt über der Karte, grosse Ziele für Handschuhe. */
.radar-einstellungen {
  position: absolute; inset: 0; z-index: 6; overflow-y: auto;
  padding: 1rem; background: var(--tb-ueberlagerung);
}
.radar-einstellungen h2 { margin: 0 0 0.75rem; font-size: 1.3rem; }
.einstellung { margin: 0 0 1rem; padding: 0; border: 0; }
.einstellung legend { margin-bottom: 0.4rem; font-weight: 700; }
.einstellung-wahl { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.einstellung-wahl button {
  min-width: 64px; min-height: 48px; padding: 0 0.9rem; border: 2px solid var(--tb-linie); border-radius: 0.6rem;
  background: var(--tb-kasten); color: var(--tb-text); font: inherit; font-weight: 600; cursor: pointer;
}
.einstellung-wahl button[aria-pressed="true"] { border-color: var(--tb-gefahr); box-shadow: inset 0 0 0 2px var(--tb-gefahr); }
.einstellung-wahl button:focus-visible { outline: 3px solid var(--tb-gefahr); outline-offset: 2px; }
.radar-einstellungen .radar-knopf { display: block; width: 100%; margin-top: 0.5rem; }

/* Blitz beim Ping (D18): ein einziges kurzes Aufleuchten (unter drei je Sekunde, WCAG 2.3.1), abschaltbar. */
.radar-blitz { position: fixed; inset: 0; z-index: 20; pointer-events: none; background: var(--tb-gefahr); opacity: 0; }
.radar-blitz.blitzt { animation: tb-blitz 700ms ease-out 1; }
@keyframes tb-blitz { 0% { opacity: 0; } 15% { opacity: 0.75; } 100% { opacity: 0; } }

/* Querformat (Lenkerhalterung) und Tablet quer: Buttons am rechten Rand (Brief §10.2, §10.3). */
@media (orientation: landscape) and (min-width: 560px) {
  .radar {
    grid-template-columns: 1fr minmax(150px, 22vw);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "kopf kopf" "karte aktionen" "hinweis aktionen";
  }
  .radar-aktionen { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; padding: 0.6rem max(0.6rem, env(safe-area-inset-right)) 0.6rem 0.6rem; }
  .radar-melden { min-height: 88px; min-width: 88px; font-size: clamp(1.3rem, 3vw, 1.9rem); }
  .radar-rueckmeldung { left: auto; right: calc(100% + 0.5rem); bottom: 0.75rem; width: min(22rem, 60vw); }
}
@media (orientation: landscape) and (min-width: 1000px) {
  .radar { grid-template-columns: 1fr 200px; }
}