/* QTH-Locator: Eingabe, Ergebnis, Entfernung und Karte */
.loc { --loc-land: #5d6b80; --loc-schrift: #8a97ab; --loc-weg: #ffffff; margin: 1.4em 0; }
.loc-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.loc-punkt { background: var(--panel); border: 1px solid var(--rule); padding: 16px 18px 18px; min-width: 0; }
.kb .loc h3 { margin: 0 0 10px; font: 500 .74rem/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.loc-punkt[data-punkt="a"] h3 b { color: var(--volt); font-weight: 500; }
.loc-punkt[data-punkt="b"] h3 b { color: var(--hot); font-weight: 500; }
.loc-eingabe { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.loc-eingabe label { flex: 1 1 100%; font-size: .82rem; color: var(--soft); }
.loc-such { position: relative; flex: 1 1 14em; min-width: 0; }
.loc-such input { width: 100%; box-sizing: border-box; padding: 9px 10px; background: #070a12; border: 1px solid var(--rule); color: #fff; font: 400 .95rem/1.2 inherit; outline: 0; }
.loc-such input:focus { border-color: var(--volt); }
.loc button { padding: 8px 12px; background: none; border: 1px solid var(--rule); color: var(--soft); font: 500 .76rem/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.loc button:hover, .loc button:focus-visible { border-color: var(--volt); color: #fff; outline: 0; }
.loc button[hidden] { display: none; }
.loc button[aria-pressed="true"] { border-color: var(--volt); color: #fff; background: rgba(159, 212, 255, .12); }
.kb .loc-treffer { position: absolute; z-index: 5; left: 0; top: calc(100% + 2px); min-width: 100%; width: max-content; max-width: min(30em, 86vw); max-height: 22em; overflow-y: auto; margin: 0; padding: 0; list-style: none; background: #0d1322; border: 1px solid var(--volt); box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.kb .loc-treffer[hidden] { display: none; }
.kb .loc-treffer li { margin: 0; }
.loc .loc-treffer button { display: flex; justify-content: space-between; gap: 18px; width: 100%; padding: 8px 12px; border: 0; background: none; color: var(--text); font: 400 .9rem/1.3 inherit; letter-spacing: 0; text-transform: none; text-align: left; }
.loc .loc-treffer button b { color: #fff; font: 500 .9rem/1.3 var(--display); letter-spacing: .04em; }
.loc .loc-treffer button:hover, .loc .loc-treffer button:focus-visible { background: rgba(159, 212, 255, .14); color: #fff; }
.loc-nichts { padding: 9px 12px; color: var(--soft); font-size: .86rem; line-height: 1.45; }
.loc-erg { margin-top: 14px; }
.kb .loc-leer { margin: 0; color: var(--soft); font-size: .88rem; }
.loc-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.loc-gross { font: 600 2.1rem/1 var(--display); letter-spacing: .05em; color: #fff; }
.loc-punkt[data-punkt="a"] .loc-gross { color: var(--volt); }
.loc-punkt[data-punkt="b"] .loc-gross { color: var(--hot); }
.kb .loc-werte { margin: 0; display: grid; gap: 4px; font-size: .88rem; }
.loc-werte div { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; }
.loc-werte dt { color: var(--soft); }
.loc-werte dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kb .loc-warn { margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid var(--hot); background: rgba(255, 194, 74, .08); color: var(--text); font-size: .86rem; line-height: 1.5; }
.loc-weg { margin-top: 18px; background: var(--panel); border: 1px solid var(--rule); padding: 16px 18px; }
.loc-weg[hidden] { display: none; }
.loc-wegwerte div { grid-template-columns: 14em 1fr; }
.loc-wegwerte dd { color: #fff; font: 400 1.05rem/1.3 var(--display); }
.kb .loc-klein { margin: 10px 0 0; color: var(--soft); font-size: .82rem; line-height: 1.5; }
.loc-kartenkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 22px 0 8px; }
.loc-kartenkopf span { font-size: .82rem; color: var(--soft); }
.loc-gruppe { display: inline-flex; gap: 4px; }
.loc-kartenkopf .loc-zoom { margin-left: auto; }
#loc-karte { display: block; width: 100%; background: var(--panel); border: 1px solid var(--rule); touch-action: none; cursor: crosshair; }
/* Vollbild: die Karte füllt den Bildschirm, die Seite dahinter blättert nicht */
.loc-kartenbox.voll { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; padding: 10px 12px 12px; background: var(--bg); }
.loc-kartenbox.voll .loc-kartenkopf { margin: 0 0 8px; }
html.loc-voll, html.loc-voll body { overflow: hidden; }
.kb .loc-quelle { margin-top: 10px; color: var(--soft); font-size: .82rem; line-height: 1.5; }
@media (max-width: 720px) {
  .loc-paar { grid-template-columns: 1fr; }
  .loc-wegwerte div { grid-template-columns: 1fr; gap: 0; }
  .loc-kartenkopf .loc-zoom { margin-left: 0; }
}