:root {
    --bg: #050a0f;
    --panel: rgba(7, 17, 25, .82);
    --line: rgba(119, 255, 196, .22);
    --green: #79ffc5;
    --green2: #39d993;
    --text: #e7fff4;
    --muted: #8aa89c;
    --danger: #ff5c6c;
    --warn: #ffd166;
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--bg); color:var(--text); font-family:Inter,Segoe UI,Roboto,Arial,sans-serif; }
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
body { user-select:none; }
#app { height:100dvh; display:grid; grid-template-rows:calc(64px + var(--safe-top)) 1fr; padding-bottom:var(--safe-bottom); }
.topbar { position:relative; z-index:1200; display:flex; align-items:flex-end; justify-content:space-between; padding:var(--safe-top) 18px 0 0; min-height:calc(64px + var(--safe-top)); border-bottom:1px solid var(--line); background:rgba(3,8,12,.96); box-shadow:0 6px 24px rgba(0,0,0,.25); overflow:hidden; }
.brand-wrap { min-width:0; display:flex; align-items:flex-end; height:64px; flex:1; }
.brand { min-width:0; height:64px; display:flex; flex-direction:column; justify-content:space-between; padding:12px 0 12px 12px; }
.brand-mainline { display:flex; align-items:center; gap:10px; min-height:0; min-width:0; line-height:1; margin:0; }
.brand-logo { width:64px; height:64px; display:block; flex:0 0 64px; object-fit:cover; object-position:center; align-self:flex-end; border-radius:0; }
.brand-title { font-weight:800; letter-spacing:.18em; font-size:15px; white-space:nowrap; line-height:1; }
.brand-sub { margin:0; color:var(--muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; line-height:1; }
.top-status { display:flex; align-items:center; gap:12px; height:64px; padding-bottom:0; flex-shrink:0; }
.software-version { color:var(--green); font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; text-shadow:0 0 9px rgba(121,255,197,.24); white-space:nowrap; line-height:1; }
.live-pill { display:flex; align-items:center; gap:7px; border:1px solid rgba(121,255,197,.26); padding:6px 9px; border-radius:999px; color:var(--green); font-size:10px; font-weight:800; letter-spacing:.12em; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--green2); box-shadow:0 0 10px var(--green2); animation:pulse 1.5s infinite; }
.live-pill.offline { color:var(--danger); border-color:rgba(255,92,108,.35); }
.live-pill.offline .live-dot { background:var(--danger); box-shadow:0 0 10px var(--danger); }
.clock { font-variant-numeric:tabular-nums; letter-spacing:.1em; font-weight:700; font-size:16px; }
.radar-shell { position:relative; min-height:0; overflow:hidden; }
#map { position:absolute; inset:0; background:#e6eaed; }
.leaflet-tile-pane { filter:none; }
.leaflet-control-attribution { background:rgba(255,255,255,.78) !important; color:#52665e !important; font-size:9px !important; }
.leaflet-control-attribution a { color:#315e50 !important; }
.glass { background:var(--panel); border:1px solid var(--line); box-shadow:0 12px 35px rgba(0,0,0,.28), inset 0 0 24px rgba(86,255,182,.02); backdrop-filter: blur(12px); }
.control-panel { position:absolute; z-index:800; left:14px; top:14px; min-width:360px; padding:10px 12px; border-radius:10px; }
.leaflet-top.leaflet-left { top:108px; }
.control-row { display:flex; align-items:center; gap:10px; }
.control-row + .control-row { margin-top:9px; padding-top:9px; border-top:1px solid rgba(121,255,197,.11); }
.control-row.compact { justify-content:flex-start; }
.label { font-size:10px; letter-spacing:.14em; color:var(--muted); font-weight:800; }
.label.normal { letter-spacing:.05em; text-transform:none; }
.unit { color:var(--muted); font-size:10px; font-weight:700; }
.segmented { display:flex; gap:4px; flex:1; }
.segmented button, .ghost-btn { appearance:none; border:1px solid rgba(121,255,197,.18); background:rgba(121,255,197,.04); color:#bdebd7; border-radius:6px; padding:7px 9px; font-weight:800; font-size:10px; cursor:pointer; }
.segmented button.active { color:#06120d; background:var(--green); border-color:var(--green); }
.ghost-btn { margin-left:auto; padding:6px 9px; }
.toggle { position:relative; width:34px; height:18px; display:inline-block; }
.toggle input { display:none; }
.toggle span { position:absolute; inset:0; border-radius:999px; background:#1d2c34; border:1px solid rgba(121,255,197,.18); }
.toggle span:after { content:""; position:absolute; width:12px; height:12px; left:2px; top:2px; border-radius:50%; background:#8aa89c; transition:.15s; }
.toggle input:checked + span { background:rgba(121,255,197,.2); }
.toggle input:checked + span:after { transform:translateX(16px); background:var(--green); }
.stats { position:absolute; z-index:800; left:14px; bottom:calc(14px + var(--safe-bottom)); display:grid; grid-template-columns:repeat(4,minmax(90px,1fr)); border-radius:10px; overflow:hidden; }
.stats > div { padding:10px 14px; min-width:105px; border-right:1px solid rgba(121,255,197,.12); }
.stats > div:last-child { border-right:0; }
.stats strong { display:block; font-size:14px; line-height:1.2; font-variant-numeric:tabular-nums; color:var(--green); }
.stats span { display:block; margin-top:3px; font-size:8px; letter-spacing:.14em; color:var(--muted); }
.details { position:absolute; z-index:900; right:14px; top:14px; width:360px; border-radius:12px; padding:15px; transition:opacity .15s, transform .15s; }
.details.hidden { opacity:0; pointer-events:none; transform:translateX(18px); }
.close-btn { position:absolute; right:10px; top:10px; width:30px; height:30px; border:1px solid rgba(121,255,197,.14); border-radius:999px; background:rgba(3,8,12,.92); color:var(--muted); font-size:22px; line-height:1; display:grid; place-items:center; cursor:pointer; z-index:5; }
.detail-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-right:44px; }
.callsign { font-size:25px; font-weight:900; letter-spacing:.08em; color:var(--green); }
.subline { color:var(--muted); font-size:11px; margin-top:4px; }
.dotsep { padding:0 4px; opacity:.5; }
.mini-plane { width:32px; height:32px; color:var(--green); transform-origin:center; transition:transform .25s; }
.mini-plane svg { display:block; width:32px; height:32px; fill:currentColor; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:14px; background:rgba(121,255,197,.1); }
.detail-grid > div { background:rgba(7,17,25,.98); padding:10px; }
.detail-grid span { display:block; color:var(--muted); font-size:8px; letter-spacing:.12em; }
.detail-grid strong { display:block; margin-top:4px; font-size:13px; font-variant-numeric:tabular-nums; }
.detail-foot { display:flex; justify-content:space-between; margin-top:10px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.error-banner { position:absolute; z-index:1000; top:15px; left:50%; transform:translateX(-50%); background:rgba(72,9,18,.94); border:1px solid rgba(255,92,108,.35); color:#ffdce0; padding:9px 14px; border-radius:8px; font-size:11px; }
.hidden { display:none; }
.range-rings { pointer-events:none; position:absolute; z-index:500; left:50%; top:50%; width:min(66vw,66vh); aspect-ratio:1; transform:translate(-50%,-50%); opacity:.25; }
.crosshair { position:absolute; background:var(--green); opacity:.6; }
.crosshair.h { height:1px; left:0; right:0; top:50%; }.crosshair.v { width:1px; top:0; bottom:0; left:50%; }
.aircraft-marker { background:transparent; border:0; }
.plane-wrap { position:relative; width:72px; height:40px; transform:translate(-28px,-20px); }
.plane-icon { position:absolute; left:19px; top:8px; width:22px; height:22px; display:grid; place-items:center; color:#0d5f48; transform-origin:center; transition:transform .9s linear; filter:drop-shadow(0 1px 1px rgba(255,255,255,.95)) drop-shadow(0 0 4px rgba(0,0,0,.28)); }
.plane-icon svg { display:block; width:22px; height:22px; fill:currentColor; }
.plane-label { position:absolute; left:40px; top:3px; white-space:nowrap; color:#17392f; font-size:9px; line-height:1.15; text-shadow:0 1px 1px rgba(255,255,255,.98),0 0 3px rgba(255,255,255,.92); }
.plane-label b { display:block; font-size:9px; letter-spacing:.04em; color:#102d25; }
.plane-label span { color:#28644f; font-variant-numeric:tabular-nums; }
.plane-wrap.emergency .plane-icon, .plane-wrap.emergency .plane-label b { color:var(--danger); text-shadow:0 0 10px rgba(255,92,108,.75); }
.plane-wrap.ground .plane-icon { color:#7f9d90; opacity:.75; }

.ring-label-icon { background:transparent !important; border:0 !important; }
.ring-label-icon span { display:block; width:max-content; margin:auto; padding:2px 5px; border-radius:4px; background:rgba(255,255,255,.82); border:1px solid rgba(13,95,72,.18); color:#155f4b; font-size:8px; font-weight:800; letter-spacing:.08em; white-space:nowrap; }
.photo-card { margin-top:12px; overflow:hidden; border:1px solid rgba(121,255,197,.14); border-radius:9px; background:rgba(2,8,12,.72); }
.photo-card > a { display:block; position:relative; height:150px; background:linear-gradient(135deg,rgba(121,255,197,.04),rgba(141,200,255,.05)); }
.photo-card img { display:block; width:100%; height:100%; object-fit:cover; }
.photo-credit { padding:6px 8px; color:#78968a; font-size:8px; letter-spacing:.02em; line-height:1.35; }
.photo-credit a { color:#a9e6ca; text-decoration:none; }
.photo-loading { margin-top:12px; padding:10px; border:1px dashed rgba(121,255,197,.14); border-radius:8px; color:#78968a; font-size:8px; letter-spacing:.1em; text-align:center; }
.route-card { margin-top:10px; padding:10px; border:1px solid rgba(141,200,255,.18); border-radius:9px; background:rgba(8,20,31,.78); }
.route-airline { color:#9db9c9; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.route-line { display:grid; grid-template-columns:1fr 30px 1fr; gap:7px; align-items:center; margin-top:7px; }
.route-line strong { display:block; color:#dff6ff; font-size:18px; letter-spacing:.08em; }
.route-line span { display:block; margin-top:2px; color:#8299a5; font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.route-arrow { text-align:center; color:#8dc8ff; font-size:18px; }
.route-destination { text-align:right; }
.airport-marker-icon { background:transparent !important; border:0 !important; }
.airport-marker { position:relative; display:grid; grid-template-columns:14px auto; grid-template-rows:17px 13px; min-width:115px; align-items:center; color:#dff6ff; text-shadow:0 1px 3px #000,0 0 4px #000; }
.airport-marker .airport-dot { grid-row:1 / span 2; width:9px; height:9px; border:2px solid #8dc8ff; border-radius:50%; box-shadow:0 0 10px rgba(141,200,255,.55); }
.airport-marker b { font-size:10px; letter-spacing:.08em; }
.airport-marker small { color:#9ab0bb; font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px; }
.airport-marker.destination .airport-dot { border-color:#79ffc5; box-shadow:0 0 10px rgba(121,255,197,.55); }
.airport-marker.midpoint .airport-dot { border-color:#ffd166; box-shadow:0 0 10px rgba(255,209,102,.45); }

.home-marker { width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid #062015;box-shadow:0 0 0 5px rgba(121,255,197,.13),0 0 14px rgba(121,255,197,.6); }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.35} }
@media (max-width:720px) {
    .leaflet-top.leaflet-left { top:108px; }
    #app { grid-template-rows:calc(54px + var(--safe-top)) 1fr; }
    .topbar { padding:var(--safe-top) 10px 0 0; min-height:calc(54px + var(--safe-top)); }
    .brand-wrap { min-width:0; height:54px; }
    .brand { height:54px; padding:8px 0 8px 10px; }
    .brand-logo { width:54px; height:54px; flex-basis:54px; border-radius:0; }
    .top-status { height:54px; }
    .brand-title { font-size:12px; letter-spacing:.12em; }
    .brand-sub { font-size:8px; }
    .clock { font-size:13px; }
    .software-version { font-size:8px; }
    .brand-mainline { gap:7px; }
    .live-pill { padding:5px 7px; font-size:8px; }
    .control-panel { left:8px; top:8px; right:8px; min-width:0; }
    .stats { left:8px; right:8px; bottom:calc(8px + var(--safe-bottom)); grid-template-columns:repeat(4,1fr); }
    .stats > div { min-width:0; padding:8px 6px; }
    .stats strong { font-size:11px; }
    .stats span { font-size:7px; }
    .details { left:8px; right:8px; top:auto; bottom:calc(72px + var(--safe-bottom)); width:auto; max-height:72vh; overflow:auto; padding-top:16px; }
    .detail-head { align-items:flex-start; padding-right:52px; }
    .mini-plane { width:28px; height:28px; margin-top:2px; }
    .mini-plane svg { width:28px; height:28px; }
    .close-btn { right:8px; top:8px; width:28px; height:28px; font-size:20px; }
    .photo-card > a { height:125px; }
    .range-rings { width:74vw; }
}

/* v1.1.3 – Kartenlesbarkeit / Radar / Zoom */
.leaflet-top.leaflet-left { top: 0; }
.range-rings { opacity: .62; }
.crosshair { background: #087c69; opacity: .7; }
.ring-label-icon span { background: rgba(255,255,255,.96); border: 1px solid rgba(8,124,105,.42); color: #075b4d; font-size: 9px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.plane-icon { color: #ffd400; width: 26px; height: 26px; left: 17px; top: 7px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.plane-icon svg { width: 26px; height: 26px; }
.plane-icon svg path { stroke: #5a4600; stroke-width: .8; paint-order: stroke fill; vector-effect: non-scaling-stroke; }
.plane-wrap.ground .plane-icon { color: #ffd400; opacity: .82; }
.plane-wrap.emergency .plane-icon { color: var(--danger); }
.plane-label { left: 44px; top: -1px; min-width: 72px; padding: 3px 5px 4px; border-radius: 5px; background: rgba(255,255,255,.92); border: 1px solid rgba(20,48,40,.18); box-shadow: 0 1px 4px rgba(0,0,0,.16); text-shadow: none; line-height: 1.08; }
.plane-label b { font-size: 10px; color: #102d25; letter-spacing: .035em; }
.plane-label span { display: block; color: #183d32; font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; }
.plane-label .alt-m { color: #436b5e; font-size: 8px; margin-top: 1px; }
.mini-plane { color: #ffd400; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.mini-plane svg path { stroke: #5a4600; stroke-width: .7; paint-order: stroke fill; }
@media (max-width:720px) {
    .leaflet-top.leaflet-left { top: 0; }
}

/* v1.1.4 – Callsign-Suche + wechselbarer Radar-Standort */
.center-name-btn {
    appearance:none; border:0; padding:0; margin:0; background:transparent; color:var(--muted);
    font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; border-bottom:1px dashed rgba(121,255,197,.42);
}
.center-name-btn:hover, .center-name-btn:focus-visible { color:var(--green); outline:none; border-bottom-color:var(--green); }
.callsign-search { display:flex; align-items:center; gap:7px; margin-top:9px; padding-top:9px; border-top:1px solid rgba(121,255,197,.11); }
.callsign-search input, .location-form input {
    min-width:0; flex:1; height:32px; border:1px solid rgba(121,255,197,.22); border-radius:6px;
    background:rgba(3,11,16,.86); color:#effff8; padding:0 10px; font-size:11px; font-weight:700; letter-spacing:.04em;
    outline:none; user-select:text;
}
.callsign-search input:focus, .location-form input:focus { border-color:rgba(121,255,197,.65); box-shadow:0 0 0 2px rgba(121,255,197,.08); }
.callsign-search input::placeholder, .location-form input::placeholder { color:#6f8c81; font-weight:500; }
.callsign-search button, .location-form button {
    height:32px; border:1px solid rgba(121,255,197,.24); border-radius:6px; background:rgba(121,255,197,.1);
    color:var(--green); padding:0 11px; font-size:9px; font-weight:900; letter-spacing:.08em; cursor:pointer;
}
.search-status { margin-top:6px; padding:5px 7px; border-radius:5px; font-size:9px; font-weight:700; letter-spacing:.03em; }
.search-status.ok { color:#baffdf; background:rgba(57,217,147,.1); }
.search-status.error { color:#ffd6db; background:rgba(255,92,108,.12); }
.plane-wrap.searched .plane-label { border-color:rgba(255,212,0,.8); box-shadow:0 0 0 2px rgba(255,212,0,.14),0 1px 4px rgba(0,0,0,.2); }
.plane-wrap.searched .plane-icon { filter:drop-shadow(0 0 5px rgba(255,212,0,.9)) drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.modal-backdrop { position:absolute; inset:0; z-index:1600; display:grid; place-items:start center; padding-top:90px; background:rgba(0,0,0,.44); backdrop-filter:blur(2px); }
.modal-backdrop.hidden { display:none; }
.location-dialog { position:relative; width:min(520px,calc(100vw - 24px)); padding:18px; border-radius:12px; }
.modal-close { position:absolute; right:10px; top:6px; border:0; background:transparent; color:var(--muted); font-size:25px; cursor:pointer; }
.location-title { color:var(--green); font-size:17px; font-weight:900; letter-spacing:.06em; }
.location-sub { margin-top:3px; color:var(--muted); font-size:10px; }
.location-form { display:flex; gap:8px; margin-top:14px; }
.location-results { display:grid; gap:6px; margin-top:10px; max-height:310px; overflow:auto; }
.location-result { width:100%; border:1px solid rgba(121,255,197,.12); border-radius:7px; background:rgba(3,11,16,.7); color:var(--text); padding:9px 10px; text-align:left; cursor:pointer; }
.location-result:hover { border-color:rgba(121,255,197,.4); background:rgba(121,255,197,.06); }
.location-result strong { display:block; color:#eafff6; font-size:11px; }
.location-result span { display:block; margin-top:3px; color:#819d92; font-size:9px; line-height:1.3; }
.location-empty { padding:12px 8px; color:#8ca59b; font-size:10px; text-align:center; }
.location-empty.error { color:#ffd0d6; }
.location-actions { display:flex; justify-content:flex-end; margin-top:10px; }
.location-credit { margin-top:10px; color:#667f75; font-size:8px; text-align:right; }

@media (max-width:720px) {
    .callsign-search input { font-size:10px; }
    .modal-backdrop { padding-top:64px; }
    .location-dialog { max-height:calc(100vh - 76px); overflow:auto; }
}

/* v1.1.6 – Funk-Kurzsuche über die letzten drei oder vier Callsign-Zeichen */
.callsign-results {
    display:grid; gap:5px; margin-top:6px; max-height:190px; overflow:auto;
    padding-right:2px;
}
.callsign-results.hidden { display:none; }
.callsign-result {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
    border:1px solid rgba(255,212,0,.28); border-radius:6px; background:rgba(3,11,16,.88);
    color:var(--text); padding:7px 8px; text-align:left; cursor:pointer;
}
.callsign-result:hover, .callsign-result:focus-visible {
    border-color:rgba(255,212,0,.75); background:rgba(255,212,0,.08); outline:none;
}
.callsign-result .cs-main, .callsign-result .cs-meta { display:flex; flex-direction:column; min-width:0; }
.callsign-result .cs-main strong { color:#ffe56a; font-size:11px; letter-spacing:.05em; white-space:nowrap; }
.callsign-result .cs-main small { margin-top:2px; color:#9ab0a8; font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.callsign-result .cs-meta { align-items:flex-end; flex-shrink:0; }
.callsign-result .cs-meta b { color:#eafff6; font-size:9px; }
.callsign-result .cs-meta small { margin-top:2px; color:#9ab0a8; font-size:8px; }


/* v1.1.7 – ausgewähltes Flugzeug + Distanzanzeige */
.plane-wrap.selected .plane-label {
    background: #fff3a6;
    border-color: #d7b83b;
    box-shadow: 0 0 0 2px rgba(255,212,0,.20), 0 2px 6px rgba(0,0,0,.20);
}
.plane-wrap.selected .plane-label b { color: #3b3100; }
.plane-wrap.selected .plane-label span { color: #51430a; }
.plane-wrap.selected .plane-icon {
    filter: drop-shadow(0 0 6px rgba(255,212,0,.95)) drop-shadow(0 1px 3px rgba(0,0,0,.55));
}

/* v1.1.9 – Helikopter-Erkennung / neue Silhouette */
.plane-wrap.helicopter .plane-icon {
    left: 14px;
    top: 4px;
    width: 32px;
    height: 32px;
}
.plane-wrap.helicopter .plane-icon svg {
    width: 32px;
    height: 32px;
}
.plane-wrap.helicopter .plane-label b::after {
    content: " HELI";
    color: #7a6500;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .05em;
}
.mini-plane.helicopter svg {
    transform: scale(1.06);
}

/* v1.2.2 – Header-Logo + mobiles Close-X */
.brand-mainline .software-version { margin-left:2px; }
.close-btn:hover, .close-btn:focus-visible { color:var(--green); border-color:rgba(121,255,197,.4); outline:none; }
@media (max-width:520px) {
    .brand-mainline { gap:5px; }
    .brand-title { font-size:11px; letter-spacing:.11em; }
    .software-version { font-size:7px; }
    .brand-wrap { min-width:0; }
    .brand { padding:8px 0 8px 8px; }
    .brand-sub { max-width:170px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* v1.2.4 – iPhone PWA safe areas */
@media (display-mode: standalone), (display-mode: fullscreen) {
    .leaflet-control-attribution { margin-bottom: calc(2px + var(--safe-bottom)) !important; }
}
@supports (padding: max(0px)) {
    .control-panel { max-width: calc(100vw - 16px); }
}

/* v1.2.5 – Header-Zeilenabstand angleichen */
.brand-mainline .software-version { align-self:center; }
.center-name-btn { line-height:1; }

/* v1.2.6 – Header-Abstände deterministisch */
.brand {
    box-sizing:border-box;
    height:64px;
    justify-content:space-between;
    padding-top:12px;
    padding-bottom:12px;
}
.brand-mainline, .brand-sub { margin-block:0; }
.brand-mainline { line-height:1; }
.brand-sub, .center-name-btn { line-height:1; }
@media (max-width:720px) {
    .brand {
        height:54px;
        padding-top:8px;
        padding-bottom:8px;
    }
}