/* Flugzeuge Radar – Stylesheet Kompatibel bis iOS 10.3 (iPad 4): keine Flex-"gap", kein "inset", kein min()/clamp()/aspect-ratio, env() nur per @supports, feste Werte vor modernen Funktionen, Abstände über margin. Schriften: ausschließlich Systemschriften, keine externen Fonts. */ :root { --bg: #0b0e12; --panel: rgba(16, 20, 26, 0.94); --panel-solid: #11151b; --line: rgba(255, 255, 255, 0.09); --text: #e8edf3; --muted: #8b95a3; --civil: #f5b727; --mil: #ff3b4f; --rescue: #ff8a1f; --police: #4f8cff; --interest: #e879f9; --cyan: #22d3ee; --green: #22c55e; --amber: #f59e0b; --pattern: #60a5fa; --mil-bg: #d61f33; --danger: #ff1f3d; --radius: 12px; --shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --ui: 1200; --sat: 0px; --sab: 0px; } @supports (top: env(safe-area-inset-top)) { :root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); } } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.4; overflow: hidden; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } input[type=search] { border-radius: 999px; } a { color: var(--cyan); text-decoration: none; } a:hover { text-decoration: underline; } [hidden] { display: none !important; } small, .muted { color: var(--muted); } h4 { margin: 12px 0 6px 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); } /* ---------- Karte / Lite-Radar ---------- */ #map, #lite { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--bg); } #lite { width: 100%; height: 100%; touch-action: none; } body[data-map=light] #map, body[data-map=light] #lite { background: #dfe9cf; } body[data-map=light] .nomap { color: #374151; } .nomap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; padding: 40px; text-align: center; color: var(--muted); font-size: 14px; } .maplibregl-ctrl-attrib { background: rgba(11, 14, 18, 0.75) !important; color: var(--muted) !important; font-size: 10px; } .maplibregl-ctrl-attrib a { color: var(--muted) !important; } body[data-map=light] .maplibregl-ctrl-attrib { background: rgba(255, 255, 255, 0.82) !important; color: #374151 !important; } body[data-map=light] .maplibregl-ctrl-attrib a { color: #374151 !important; } .maplibregl-ctrl-group { background: var(--panel-solid) !important; border: 1px solid var(--line); box-shadow: var(--shadow) !important; } .maplibregl-ctrl-group button { -webkit-filter: invert(1) hue-rotate(180deg); filter: invert(1) hue-rotate(180deg); } .maplibregl-ctrl-bottom-right { margin-bottom: 4px; } .map-hover .maplibregl-canvas, .map-hover #lite { cursor: pointer; } .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; -webkit-flex: none; flex: none; vertical-align: -3px; } .icon-btn .ico, .btn .ico, .chip .ico { width: 16px; height: 16px; } .pill .ico, .status .ico, .links .ico { width: 12px; height: 12px; stroke-width: 2.4; } .links .ico { vertical-align: -2px; } .btn .ico { margin-right: 6px; } /* ---------- Rechts-Links unten links ---------- */ .legal-bar { position: fixed; z-index: var(--ui); left: 12px; bottom: 12px; bottom: calc(12px + var(--sab)); max-width: 270px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--muted); } .legal-bar a { color: var(--muted); margin-right: 8px; } .legal-bar #legal-src:not(:empty) { margin-right: 8px; } .maplibregl-ctrl-bottom-left { left: 300px; } .legal-bar a:last-child { margin-right: 0; } /* 01.10.2026: Impressum, Datenschutz, Hilfe bleiben beim Überfahren und Anklicken in ihrer Ruhefarbe, ohne Unterstrich (vorher wurde der Text hell und blieb es nach dem Klick, bis das Fenster zu war – wirkte unstet). Der Tastatur-Rahmen (:focus-visible) bleibt. */ .legal-bar a:hover, .legal-bar a:focus, .legal-bar a:active { color: var(--muted); text-decoration: none; } /* ---------- Kopfzeile ---------- */ .topbar { position: fixed; top: 10px; top: calc(10px + var(--sat)); left: 12px; right: 12px; z-index: var(--ui); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; pointer-events: none; } .topbar > * { pointer-events: auto; margin-right: 10px; } .topbar > *:last-child { margin-right: 0; } .brand { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px 7px 10px; font-weight: 700; box-shadow: var(--shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap; } .brand svg { width: 18px; height: 18px; fill: var(--civil); margin-right: 8px; } button.brand { font: inherit; color: inherit; cursor: pointer; } button.brand:hover { border-color: var(--accent); } button.brand:active { -webkit-transform: scale(0.97); transform: scale(0.97); } .chips { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 28px 4px 4px; -webkit-mask-image: -webkit-linear-gradient(left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .chips::-webkit-scrollbar { display: none; } .chip { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; margin-right: 6px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-transition: border-color 0.15s, color 0.15s; transition: border-color 0.15s, color 0.15s; } .chip:last-child { margin-right: 0; } .chip:hover { color: var(--text); } .chip.active { color: var(--text); border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.3) inset; } .chip .cnt { background: rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 0 7px; margin-left: 6px; font-variant-numeric: tabular-nums; font-size: 11px; } .chip .dot { margin-right: 6px; } .chip .ico { margin-right: 4px; } .chip.chip-emerg { border-color: var(--danger); color: #fff; background: rgba(214, 31, 51, 0.55); -webkit-animation: blink 1s ease-in-out infinite alternate; animation: blink 1s ease-in-out infinite alternate; } @-webkit-keyframes blink { from { opacity: 0.65; } to { opacity: 1; } } @keyframes blink { from { opacity: 0.65; } to { opacity: 1; } } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; -webkit-flex: none; flex: none; } .c-civil { background: var(--civil); } .c-mil { background: var(--mil); } .c-rescue { background: var(--rescue); } .c-police { background: var(--police); } .c-interest { background: var(--interest); } .search { margin-left: auto; } .search input { width: 200px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; outline: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-transition: width 0.2s, border-color 0.15s; transition: width 0.2s, border-color 0.15s; } .search input:focus { border-color: var(--cyan); width: 260px; } .search input::placeholder { color: var(--muted); } .tools { display: -webkit-flex; display: flex; } .tools .tool { margin-right: 6px; } .tools .tool:last-child { margin-right: 0; } .tool { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 16px; color: var(--text); padding: 0; } .tool.active { border-color: var(--cyan); color: var(--cyan); } .tool:hover { border-color: rgba(255, 255, 255, 0.25); } .tool:active, .chip:active, .row:active, .icon-btn:active { -webkit-transform: scale(0.96); transform: scale(0.96); } .tool:disabled { opacity: 0.35; cursor: default; } .tool:disabled:active { -webkit-transform: none; transform: none; } .tool:disabled:hover { border-color: var(--line); } /* ---------- Status ---------- */ .status-stack { position: fixed; top: 58px; top: calc(58px + var(--sat)); right: 12px; z-index: var(--ui); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; max-width: 60vw; } .status-stack > * { margin-top: 6px; } .status-stack > *:first-child { margin-top: 0; } .status { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 4px; font-size: 11px; color: var(--muted); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap; overflow: hidden; max-width: 100%; } .status > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .status .pill { margin-right: 8px; } .status.wx { padding: 4px 12px; } .status.wx b { color: var(--text); font-weight: 600; } .pill { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; border: none; color: #04110a; background: var(--green); } .pill .ico { margin-right: 4px; } .pill.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #04110a; margin-right: 5px; -webkit-animation: blink 1s ease-in-out infinite alternate; animation: blink 1s ease-in-out infinite alternate; } .pill.dvr { background: var(--amber); } .pill.offline { background: var(--mil-bg); color: #fff; } .status.warn { border-color: rgba(255, 59, 79, 0.5); color: #ffb3bb; } .overlay3d { position: fixed; z-index: 1202; bottom: 150px; bottom: calc(150px + var(--sab)); right: 12px; display: -webkit-flex; display: flex; } .overlay3d .tool { margin-left: 6px; } /* Himmelsblick: Knöpfe auf dem Boden über der Zeitleiste statt auf der Horizontlinie (Querformat, Rechner) */ @media (min-width: 901px) { #overlay-sky { bottom: 116px; bottom: calc(116px + var(--sab)); } } /* 3D: Hinweis bei fehlendem Signal (sonst sieht ein stehendes Bild wie ein Absturz der App aus) */ .sig3d { position: fixed; z-index: 1202; top: 118px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 10px; background: rgba(11, 14, 18, 0.88); border: 1px solid #f5b727; color: #f5d27a; font: 600 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; text-align: center; } /* Die 3D-Leiste auf der Karte bleibt am Desktop auch bei offenem Panel sichtbar; nur auf kleinen Bildschirmen (Panel deckt die Karte) wird sie ausgeblendet */ /* ---------- Panel ---------- */ .panel { position: fixed; z-index: 1201; top: 58px; top: calc(58px + var(--sat)); left: 12px; bottom: 128px; width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; overflow: hidden; -webkit-transform: translateX(-115%); transform: translateX(-115%); -webkit-transition: -webkit-transform 0.25s ease; transition: transform 0.25s ease; } .panel:not(.open) { visibility: hidden; -webkit-transition: -webkit-transform 0.25s ease, visibility 0s linear 0.25s; transition: transform 0.25s ease, visibility 0s linear 0.25s; } .panel.open { -webkit-transform: none; transform: none; } .view { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; min-height: 0; -webkit-flex: 1 1 auto; flex: 1 1 auto; } .view-head { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); -webkit-flex: none; flex: none; } .view-head > * { margin-left: 8px; } .view-head > *:first-child { margin-left: 0; } .view-head b { font-size: 17px; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .view-head b small { font-weight: 600; margin-left: 8px; } .view-head .count { color: var(--muted); font-size: 12px; } .icon-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--text); display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 16px; line-height: 1; -webkit-flex: none; flex: none; text-decoration: none; padding: 0; } .icon-btn:hover { background: rgba(255, 255, 255, 0.1); text-decoration: none; } .list-tools { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); -webkit-flex: none; flex: none; } .list-tools > * { margin-left: 8px; } .list-tools > *:first-child { margin-left: 0; } select, .mini { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; color: var(--text); font-size: 12px; outline: none; } select option { background: #1a2029; } .mini { width: 120px; margin-left: auto; } .mini.num { width: 60px; margin: 0 4px; } /* Scrollbereiche: Momentum-Scrolling auf altem iOS, Mindesthöhe gegen Kollaps, stabile Scrollbar ohne Springen */ .list, .scroll, .detail { overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-height: 80px; overscroll-behavior: contain; } .list { overflow-y: scroll; scrollbar-gutter: stable; } .list::-webkit-scrollbar, .scroll::-webkit-scrollbar, .detail::-webkit-scrollbar { width: 8px; } .list::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb, .detail::-webkit-scrollbar-thumb { background: rgba(229, 233, 246, 0.25); border-radius: 4px; } .list, .scroll, .detail { scrollbar-width: thin; scrollbar-color: rgba(229, 233, 246, 0.25) transparent; } .scroll { padding: 10px 14px; } /* Listenzeilen: feste Spalten (Icon | Text | Zahlen), feste Höhe, damit nichts verrutscht */ .row { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 52px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; } .row:hover { background: rgba(255, 255, 255, 0.04); } .row:focus-visible { background: rgba(255, 255, 255, 0.04); outline-offset: -2px; } .row.sel { background: rgba(34, 211, 238, 0.12); box-shadow: inset 3px 0 0 var(--cyan); } .row svg { width: 22px; height: 22px; -webkit-flex: none; flex: none; margin-right: 8px; } .row > div { min-width: 0; } .row .m { -webkit-flex: 1 1 auto; flex: 1 1 auto; } .row .r { -webkit-flex: none; flex: none; width: 128px; text-align: right; font-variant-numeric: tabular-nums; } .row b { font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row small { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row .tag, .apcard .tag { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--interest); color: #000; margin-left: 4px; vertical-align: middle; } .row .tag.first { background: var(--green); color: #05200f; } .row .tag.pattern { background: var(--pattern); color: #061426; } .row .tag.mil, .apcard .tag.mil { background: var(--mil-bg); color: #fff; } .empty { padding: 30px 14px; text-align: center; color: var(--muted); } /* ---------- Detail ---------- */ .photo-wrap { position: relative; background: #000; } .photo-wrap img { width: 100%; max-height: 230px; object-fit: cover; display: block; } .photo-wrap.loading::before { content: ''; display: block; padding-top: 56.25%; background: #12161c; background: -webkit-linear-gradient(left, #12161c 25%, #1b2029 50%, #12161c 75%); background: linear-gradient(90deg, #12161c 25%, #1b2029 50%, #12161c 75%); background-size: 200% 100%; -webkit-animation: shimmer 1.2s linear infinite; animation: shimmer 1.2s linear infinite; } @-webkit-keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .photo-wrap.nophoto::after { content: 'Kein Foto verfügbar'; display: block; padding: 10px 14px; font-size: 11px; color: var(--muted); } .photo-wrap .credit { position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: #ddd; background: rgba(0, 0, 0, 0.55); padding: 2px 7px; border-radius: 999px; } .photo-wrap .credit a { color: #fff; } .badges { position: absolute; left: 10px; top: 10px; } .badges:empty { display: none; } .photo-wrap.nophoto .badges, .photo-wrap.loading .badges, .photo-wrap.static .badges { position: static; padding: 10px 14px 0 14px; } .badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; padding: 3px 8px; margin: 0 6px 6px 0; border-radius: 999px; background: rgba(8, 10, 14, 0.72); border: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .badge.mil { background: var(--mil-bg); color: #fff; } .badge.rescue { background: var(--rescue); color: #000; } .badge.interest { background: var(--interest); color: #000; } .badge.first { background: var(--green); color: #05200f; } .badge.emerg { background: var(--mil-bg); color: #fff; -webkit-animation: blink 0.6s ease-in-out infinite alternate; animation: blink 0.6s ease-in-out infinite alternate; } .badge.pattern { background: var(--pattern); color: #061426; } .detail-body { padding: 14px; } .detail-body > * { margin-bottom: 12px; } .detail-body > *:last-child { margin-bottom: 0; } .ident { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .ident .txt { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; } .ident .type { font-weight: 700; font-size: 15px; } .ident .op { font-size: 12px; color: var(--muted); } /* Airline-Name als Text-Logo: an feste Breite angepasst, kein Bild, keine Fremdanfrage */ .airline-mark { -webkit-flex: none; flex: none; width: 118px; height: 26px; margin-left: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; } .airline-mark text { fill: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; } .route { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .route .ap { -webkit-flex: 1 1 0; flex: 1 1 0; text-align: center; min-width: 0; } .route .ap b { display: block; font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: 0.5px; } .route .ap small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .route .arrow { width: 44px; -webkit-flex: none; flex: none; text-align: center; color: var(--muted); line-height: 1; } .route .arrow .ico { width: 20px; height: 20px; } .route-eta { display: block; text-align: center; font-size: 11px; margin: -6px 0 0 0; } .route-eta:empty { display: none; } /* Telemetrie: zwei feste Spalten */ .tele { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -4px; } .card { width: 50%; padding: 0 4px 8px 4px; } .card.wide { width: 100%; } .card > .in { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 62px; } .card .lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); } .card b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; margin-top: 2px; } .card small { display: block; font-size: 11px; } .card.alert b { color: var(--mil); } .card.good b { color: var(--green); } .card.warn b { color: var(--amber); } .chart { display: block; width: 100%; height: 70px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 8px; } /* Farbleiste zur Höhenfärbung (wie Flightradar24): Verlauf setzt app.js einmal je Kartenstil aus altColor */ .altkey { position: relative; height: 22px; margin: 4px 2px 0 2px; font-size: 10px; color: var(--muted); } .altkey i { display: block; height: 5px; border-radius: 3px; } .altkey span { position: absolute; top: 8px; white-space: nowrap; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .altkey .k0 { left: 0; -webkit-transform: none; transform: none; } .altkey .k1 { left: 28.6%; } .altkey .k2 { left: 54%; } .altkey .k3 { left: 73%; } .altkey .k4 { left: auto; right: 0; -webkit-transform: none; transform: none; } /* Sonnenwarnung im Himmelsblick, letzte Stufe: liegt über allen Leisten, wenn im Bild kein freier Platz ist (app.js skySunWarnDom) */ .sky-sunwarn { position: fixed; z-index: 1210; pointer-events: none; -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; color: #fff; background: rgba(153, 27, 27, 0.92); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 6px; padding: 3px 8px; } .mapkey { position: fixed; z-index: var(--ui); width: 280px; height: 36px; box-sizing: border-box; margin: 0; padding: 6px 10px 0 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; pointer-events: none; } .mapkey span { top: 15px; } .mapkey .k0 { left: 10px; } .mapkey .k4 { right: 10px; } .mapkey .k1 { left: 83px; } .mapkey .k2 { left: 150px; } .mapkey .k3 { left: 200px; } .toast.field { text-align: left; border-left-color: #0f766e; max-width: 360px; } .toast.field b, .toast.field small { display: block; } .toast.field small { color: var(--muted); margin-top: 2px; line-height: 1.35; } .actions { display: -webkit-flex; display: flex; } .actions .btn { -webkit-flex: 1 1 0; flex: 1 1 0; margin-right: 8px; } .actions .btn:last-child { margin-right: 0; } .btn { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 10px; font-weight: 700; color: var(--text); display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .btn:hover { background: rgba(255, 255, 255, 0.1); } .btn.primary { background: var(--cyan); color: #04202a; border-color: transparent; } .btn.active { background: rgba(34, 211, 238, 0.15); color: var(--cyan); border-color: var(--cyan); } .btn.on { border-color: var(--cyan); color: var(--cyan); } .links { font-size: 12px; } .links a { margin-right: 12px; } .meta-line { font-size: 11px; color: var(--muted); } .legal-links { font-size: 12px; margin: 0 0 8px 0; } /* ---------- Flughäfen & Logbuch ---------- */ .apcard { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: rgba(255, 255, 255, 0.03); } .apcard h3 { margin: 0; font-size: 15px; } .apcard h3 small { font-weight: 400; margin-left: 8px; } .apcard .wx { font-size: 12px; margin: 6px 0; line-height: 1.5; } .apcard .wx .ico { width: 14px; height: 14px; } .apcard .rwy { font-size: 12px; margin: 4px 0 8px 0; } .apcard .rwy > * { margin-right: 10px; } .apcard .rwy b { background: rgba(255, 255, 255, 0.08); padding: 1px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; } .apcard .rwy b.obs { background: rgba(34, 211, 238, 0.2); color: var(--cyan); } .apcard table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; } .apcard th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); font-weight: 600; padding: 4px 0; } .apcard td { height: 30px; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .apcard col.c1 { width: 34%; } .apcard col.c2 { width: 18%; } .apcard col.c3 { width: 22%; } .apcard col.c4 { width: 26%; } .apcard td.r, .apcard th.r { text-align: right; font-variant-numeric: tabular-nums; } .apcard .none { font-size: 12px; color: var(--muted); padding: 4px 0; } .apcard details { font-size: 11px; color: var(--muted); margin: 2px 0 6px 0; } .apcard summary { cursor: pointer; } .apcard .legend { font-size: 11px; color: var(--muted); } .fc-VFR { color: var(--green); } .fc-MVFR { color: #60a5fa; } .fc-IFR { color: var(--mil); } .fc-LIFR { color: var(--interest); } .lb-stats { display: -webkit-flex; display: flex; margin: 0 -4px 10px -4px; } .lb-stats .card { width: 33.333%; padding: 0 4px; } .bars { margin: 6px 0 12px 0; } .bar { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 11px; margin: 3px 0; } .bar span:first-child { width: 110px; -webkit-flex: none; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 8px; } .bar i { display: block; height: 8px; background: var(--civil); border-radius: 4px; } .bar .track { -webkit-flex: 1 1 auto; flex: 1 1 auto; } .bar.t i { background: var(--cyan); } .bar .r { width: 30px; -webkit-flex: none; flex: none; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 8px; } .spark { display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; height: 36px; margin: 4px 0 10px 0; } .spark i { -webkit-flex: 1 1 0; flex: 1 1 0; margin-right: 2px; background: var(--civil); border-radius: 2px 2px 0 0; min-height: 1px; opacity: 0.8; } .sources ul { padding-left: 18px; margin: 4px 0 10px 0; font-size: 12px; line-height: 1.6; } .sources p { font-size: 12px; line-height: 1.6; margin: 6px 0; } /* ---------- Wiedergabe ---------- */ .playback { position: fixed; z-index: var(--ui); bottom: 12px; bottom: calc(12px + var(--sab)); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 680px; max-width: calc(100% - 24px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 10px 14px 8px 14px; } .pb-row { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .pb-row > * { margin-right: 10px; } .pb-row > *:last-child { margin-right: 0; } .pb-ctrls { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .pb-ctrls > * { margin-right: 4px; } .pb-ctrls .icon-btn { width: 32px; height: 32px; font-size: 14px; } .pb-time { margin-left: auto; text-align: right; line-height: 1.1; } .pb-time b { font-size: 16px; font-variant-numeric: tabular-nums; display: block; } .pb-time small { font-size: 11px; } #pb-live { padding: 7px 14px; min-height: 32px; } #pb-live.live::before { display: none; } #pb-slider { width: 100%; margin: 6px 0 0 0; cursor: pointer; accent-color: var(--civil); } .playback.is-playback #pb-slider { accent-color: var(--amber); } .pb-scale { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; font-size: 11px; color: var(--muted); } /* ---------- Popover / Toasts / Tooltip ---------- */ .popover { position: fixed; z-index: 1203; top: 58px; top: calc(58px + var(--sat)); right: 12px; width: 300px; max-height: 70%; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 6px 14px 12px 14px; } .popover label { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; font-size: 13px; } .popover label input[type=checkbox] { margin: 0 10px 0 0; } .popover label.col { -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: stretch; align-items: stretch; font-size: 12px; color: var(--muted); } .popover label.col textarea { margin-top: 6px; } .popover label.inline { font-size: 12px; color: var(--muted); -webkit-flex-wrap: wrap; flex-wrap: wrap; } .popover label.inline select { margin-left: 6px; } .popover textarea { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; color: var(--text); font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace; font-size: 12px; line-height: 1.4; resize: vertical; outline: none; } .popover input[type=checkbox] { accent-color: var(--cyan); width: 16px; height: 16px; } .popover .stats { font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 8px; } .toasts { position: fixed; z-index: 1204; bottom: 136px; bottom: calc(136px + var(--sab)); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-flex; display: flex; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; pointer-events: none; } .toast { pointer-events: auto; background: var(--panel-solid); border: 1px solid var(--line); border-left: 4px solid var(--cyan); border-radius: 8px; padding: 8px 14px; margin-top: 6px; font-size: 12px; box-shadow: var(--shadow); cursor: pointer; -webkit-animation: rise 0.25s ease; animation: rise 0.25s ease; max-width: 560px; text-align: left; color: var(--text); } .toast.mil { border-left-color: var(--mil); } .toast.emerg { border-left-color: var(--danger); background: #3a1017; } .toast.rescue { border-left-color: var(--rescue); } .toast.interest, .toast.watch { border-left-color: var(--interest); } .toast.near { border-left-color: var(--green); } .toast.pattern { border-left-color: var(--pattern); } @-webkit-keyframes rise { from { -webkit-transform: translateY(8px); opacity: 0; } to { -webkit-transform: none; opacity: 1; } } @keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } .tooltip { position: fixed; z-index: 1205; pointer-events: none; background: rgba(8, 10, 14, 0.92); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; font-size: 12px; white-space: nowrap; -webkit-transform: translate(12px, 12px); transform: translate(12px, 12px); } .tooltip b { display: block; } .tooltip small { display: block; font-size: 11px; } /* ---------- Umbruch der Kopfzeile ---------- */ @media (max-width: 1599px) { .topbar { -webkit-flex-wrap: wrap; flex-wrap: wrap; } .chips { -webkit-order: 9; order: 9; -webkit-flex-basis: 100%; flex-basis: 100%; margin-top: 8px; margin-right: 0; } .search { margin-left: auto; } .status-stack, .panel, .popover { top: 102px; top: calc(102px + var(--sat)); } } /* ---------- Mobil / iPad hochkant ---------- */ @media (max-width: 900px) { .brand, .chip, .tool, .status, .panel, .playback, .popover, .legal-bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: #12161c; } input, select, textarea, .mini { font-size: 16px; } .tool { width: 40px; height: 40px; } .icon-btn { width: 40px; height: 40px; } .pb-ctrls .icon-btn, #pb-live { width: 40px; height: 40px; min-height: 40px; } #pb-live { width: auto; } .tools { margin-left: auto; } .tools .tool { margin-right: 4px; } .topbar > * { margin-right: 6px; } .topbar { left: 8px; right: 8px; } .brand span { display: none; } .brand { padding: 8px; } .brand svg { margin-right: 0; } .search { display: none; } .status-stack { top: auto; bottom: 140px; bottom: calc(140px + var(--sab)); left: 8px; right: auto; -webkit-align-items: flex-start; align-items: flex-start; max-width: calc(100% - 16px); } .panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 68%; border-radius: 16px 16px 0 0; -webkit-transform: translateY(110%); transform: translateY(110%); border-bottom: none; padding-bottom: var(--sab); } .panel::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); margin: 8px auto 0 auto; -webkit-flex: none; flex: none; } .panel.open { -webkit-transform: none; transform: none; } body.panel-open .playback { display: none; } body.panel-open .overlay3d { display: none; } .playback { width: auto; max-width: none; left: 8px; right: 8px; -webkit-transform: none; transform: none; bottom: 8px; bottom: calc(8px + var(--sab)); padding: 8px 12px 6px 12px; } .pb-scale { display: none; } .maplibregl-ctrl-bottom-right { display: none; } .popover { left: 8px; right: 8px; width: auto; } .overlay3d { bottom: 92px; bottom: calc(92px + var(--sab)); right: 8px; } .toasts { bottom: auto; top: 102px; top: calc(102px + var(--sat)); -webkit-flex-direction: column; flex-direction: column; max-width: 80%; } .toast { max-width: none; } .legal-bar { max-width: none; font-size: 10px; padding: 2px 8px; left: 8px; bottom: 8px; bottom: calc(8px + var(--sab)); } .legal-bar #legal-src { display: none; } } @media (prefers-reduced-motion: reduce) { .panel, .panel:not(.open), .chip, .search input { -webkit-transition: none; transition: none; } .pill.live::before, .chip.chip-emerg, .badge.emerg, .toast, .photo-wrap.loading::before { -webkit-animation: none; animation: none; } } /* --- Ergänzungen: Polizei, 3D-Ausstieg, Rechts-/Hilfe-Einblendung, Standort-Einstellung (alle Regeln iOS-10-tauglich) --- */ .row .tag.police { background: var(--police); color: #fff; } .badge.police { background: var(--police); color: #fff; } .tool.wide { width: auto; border-radius: 999px; padding: 0 14px 0 10px; font-size: 13px; font-weight: 600; } .tool.wide .ico { margin-right: 6px; } .popover .home-row { margin: 4px 0; font-size: 13px; } .popover .home-row .btn { margin-right: 6px; } .popover code { font-family: Menlo, Consolas, monospace; font-size: 12px; } .legal-overlay { position: fixed; z-index: 1220; top: 0; left: 0; right: 0; bottom: 0; background: rgba(4, 6, 10, 0.72); } .legal-overlay[hidden] { display: none; } .legal-panel { position: absolute; top: 24px; top: calc(24px + var(--sat)); bottom: 24px; bottom: calc(24px + var(--sab)); left: 0; right: 0; margin: 0 auto; width: 92%; max-width: 780px; background: var(--panel-solid, #10141b); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); overflow: hidden; } .legal-head { height: 46px; padding: 0 8px 0 12px; border-bottom: 1px solid var(--line); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .legal-head .tab { background: none; border: 0; color: var(--muted); font: inherit; font-weight: 700; font-size: 13px; padding: 12px 10px; margin-right: 4px; border-bottom: 2px solid transparent; } .legal-head .tab.active { color: var(--text); border-bottom-color: var(--cyan); } .legal-head .icon-btn { margin-left: auto; } .legal-body { position: absolute; top: 46px; left: 0; right: 0; bottom: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; padding: 8px 20px 30px 20px; font-size: 15px; line-height: 1.55; } .legal-body h1 { font-size: 22px; margin: 10px 0 4px 0; } .legal-body h2 { font-size: 16px; margin: 22px 0 6px 0; padding-bottom: 4px; border-bottom: 1px solid var(--line); } .legal-body h3 { font-size: 15px; margin: 16px 0 4px 0; } .legal-body p, .legal-body ul { margin: 6px 0 10px 0; } .legal-body ul { padding-left: 20px; } .legal-body li { margin: 3px 0; } .legal-body a { color: var(--cyan); } .legal-body table { width: 100%; border-collapse: collapse; margin: 8px 0 12px 0; font-size: 14px; table-layout: fixed; } .legal-body th, .legal-body td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line); word-wrap: break-word; } .legal-body th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; } .legal-body dl { margin: 6px 0 10px 0; } .legal-body dt { font-weight: 700; margin-top: 10px; } .legal-body dd { margin: 2px 0 0 0; color: var(--text); } .legal-body kbd { font-family: Menlo, Consolas, monospace; font-size: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; } .legal-body .muted { color: var(--muted); } .legal-body .small { font-size: 13px; } body.legal-open .legal-bar, body.legal-open .toasts { display: none; } @media (max-width: 900px) { .legal-panel { top: 8px; top: calc(8px + var(--sat)); bottom: 8px; bottom: calc(8px + var(--sab)); border-radius: 12px; } .legal-body { padding: 6px 14px 30px 14px; font-size: 14px; } } /* --- Kompakte Detailansicht: Foto groß, Angaben klein, Aktionsknöpfe bleiben unten sichtbar --- */ .photo-wrap img { max-height: 260px; } .detail-body { padding: 10px 12px 12px 12px; } .detail-body > * { margin-bottom: 8px; } .ident .type { font-size: 13px; } .ident .op { font-size: 11px; } .airline-mark { width: 100px; height: 22px; padding: 2px 5px; } .airline-mark text { font-size: 12px; } .route { padding: 6px 10px; border-radius: 8px; } .route .ap b { font-size: 16px; } .route .ap small { font-size: 10px; } .route .arrow { width: 36px; } .route .arrow .ico { width: 16px; height: 16px; } .route-eta { font-size: 10px; margin-top: -4px; } .tele { margin: 0 -3px; } .card { padding: 0 3px 6px 3px; } .card > .in { padding: 5px 8px; min-height: 50px; border-radius: 7px; } .card .lbl { font-size: 9.5px; letter-spacing: 0.4px; } .card b { font-size: 13px; margin-top: 1px; } .card small { font-size: 10px; line-height: 1.3; } .chart { height: 56px; } .actions { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 1; padding: 6px 0 4px 0; margin: 0 0 4px 0; background: var(--panel-solid, #11151b); } .actions .btn { padding: 8px; font-size: 13px; } .links { font-size: 11px; } .meta-line { font-size: 10px; } .badge { font-size: 10px; padding: 2px 7px; margin: 0 5px 5px 0; } .photo-wrap a { display: block; } /* ============================================================================ Haltung: ein Instrument für Spotter, kein generisches Dark-Dashboard. - Eine Akzentfarbe mit Bedeutung: das Bernstein der zivilen Flugzeuge (Markenfarbe) markiert Auswahl und Aktion. Cyan bleibt allein dem eigenen Standort vorbehalten ("du bist hier"). - Flugstreifen-Geometrie: kleine, konsistente Radien (4/6/8/12) statt Pillen überall. - Zahlen in Monospace mit Tabellenziffern: Höhe, Tempo, Entfernung, Uhrzeit stehen wie auf einem Instrument in Spalten. - Angaben als Hairline-Tabelle statt Kästchen-in-Kästchen; die Spotter-Frage zuerst: Wie weit, wann am nächsten, wie ist das Licht? - Beschriftungen in Normalschrift ohne Sperrung; Hierarchie über Größe und Farbe, nicht über Versalien. Alle Regeln iOS-10-tauglich (keine gap/inset/clamp). ============================================================================ */ :root { --accent: #f5b727; --accent-ink: #1a1200; --accent-soft: rgba(245, 183, 39, 0.16); --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --r-ctl: 6px; --r-panel: 12px; } .brand, .chip, .search input, .status, .legal-bar { border-radius: var(--r-ctl); } .tool { border-radius: 8px; } .icon-btn { border-radius: var(--r-ctl); } .pill { border-radius: 4px; letter-spacing: 0.3px; padding: 2px 8px; } .panel, .popover, .playback { border-radius: var(--r-panel); } .toast { border-radius: var(--r-ctl); border-left-color: var(--accent); } .chip.active { color: var(--accent); border-color: var(--accent); box-shadow: none; background: #2a2412; } .chip.active .cnt { background: rgba(245, 183, 39, 0.25); color: var(--text); } .chip .cnt { font-family: var(--mono); font-size: 11px; padding: 0 5px; } .tool.active { border-color: var(--accent); color: var(--accent); } .search input:focus { border-color: var(--accent); } .row.sel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } .row .r b, .row .r small { font-family: var(--mono); } .row .r b { font-size: 13px; } .row .r small { font-size: 10.5px; } .row .tag, .apcard .tag { border-radius: 3px; font-weight: 700; letter-spacing: 0.2px; padding: 0 5px; } .row .tag.first { background: transparent; color: var(--green); border: 1px solid rgba(34, 197, 94, 0.55); } .badge { border-radius: 3px; -webkit-backdrop-filter: none; backdrop-filter: none; letter-spacing: 0.3px; font-weight: 700; } .btn { border-radius: var(--r-ctl); } .btn.primary { background: var(--accent); color: var(--accent-ink); } .btn.active, .btn.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .legal-head .tab.active { border-bottom-color: var(--accent); } .legal-body a, .links a { color: var(--accent); } .apcard { border-radius: 8px; } .apcard .rwy b.obs { background: var(--accent-soft); color: var(--accent); } .apcard td.r, .apcard .rwy b { font-family: var(--mono); font-size: 11.5px; } .lb-stats .card b { font-family: var(--mono); } .view-head .count { font-family: var(--mono); } #pb-clock, .pb-ticks, .pb-time small { font-family: var(--mono); } #pb-clock { letter-spacing: 0; } .status .pill.live { background: var(--green); } .status.wx b { font-family: var(--mono); font-weight: 600; } /* Detailansicht: Hairline-Tabelle, drei Spotter-Werte zuerst */ .route { background: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 0; } .route .ap b { font-family: var(--mono); font-size: 17px; letter-spacing: 0; } .route .ap small { text-transform: none; letter-spacing: 0; font-size: 10.5px; color: var(--muted); } .route-eta { font-family: var(--mono); color: var(--muted); } .tele { margin: 0; border-bottom: 1px solid var(--line); } .card { padding: 0; border-top: 1px solid var(--line); } .card > .in { background: none; border: 0; border-radius: 0; padding: 7px 10px 7px 0; min-height: 0; } #c-cpa > .in, .tele > .card:nth-child(even):not(.wide) > .in { padding-left: 10px; } /* rechte Spalte */ .card .lbl { text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--muted); } .card b { font-family: var(--mono); font-size: 14px; font-weight: 600; margin-top: 1px; } .card small { color: var(--muted); font-size: 10.5px; } .tele .card:first-child, #c-cpa { border-top: 0; } .tele .card:first-child b, #c-cpa b { font-size: 19px; font-weight: 700; } .card.good b { color: var(--green); } .card.alert b { color: var(--mil); } .chart { border-radius: var(--r-ctl); background: none; } .ident .type { font-size: 14px; } .airline-mark { border-radius: 4px; } .actions .btn { border-radius: var(--r-ctl); } .legal-bar { font-size: 11px; } /* --- Hilfe-Seite: echte Symbole, Schilder und Farben des Radars (gleiche Werte wie in style.css) --- */ .legal-body .faq-legend { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 6px -6px 10px -6px; } .legal-body .faq-legend > div { width: 33.333%; padding: 6px; font-size: 13px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-width: 0; } .legal-body .faq-legend > div > span:last-child { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .legal-body .faq-legend.faq-tags > div { width: 50%; } .legal-body .faq-ac { -webkit-flex: none; flex: none; vertical-align: middle; } .legal-body .faq-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: #e879f9; color: #000; letter-spacing: 0.2px; vertical-align: middle; white-space: nowrap; } .legal-body .faq-tag.first { background: transparent; color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.55); } .legal-body .faq-tag.pattern { background: #60a5fa; color: #061426; } .legal-body .faq-tag.mil { background: #d61f33; color: #fff; } .legal-body .faq-tag.police { background: #4f8cff; color: #fff; } .legal-body .faq-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; padding: 2px 8px; border-radius: 3px; background: rgba(8, 10, 14, 0.72); border: 1px solid rgba(255, 255, 255, 0.12); color: #e8edf3; vertical-align: middle; white-space: nowrap; } .legal-body .faq-badge.mil { background: #d61f33; color: #fff; } .legal-body .faq-badge.rescue { background: #ff8a1f; color: #000; } .legal-body .faq-badge.emerg { background: #d61f33; color: #fff; } .legal-body .faq-pill { display: inline-block; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.3px; vertical-align: middle; } .legal-body .faq-pill.live { background: #22c55e; color: #04110a; } .legal-body .faq-pill.dvr { background: #f59e0b; color: #1a1200; } .legal-body .faq-pill.offline { background: #d61f33; color: #fff; } .legal-body .faq-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 2px; vertical-align: middle; } .legal-body .faq-dot.civil { background: #f5b727; } .legal-body .faq-dot.mil { background: #ff3b4f; } .legal-body .faq-dot.rescue { background: #ff8a1f; } .legal-body .faq-dot.police { background: #4f8cff; } .legal-body .faq-dot.interest { background: #e879f9; } .legal-body .faq-chip { display: inline-block; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; padding: 2px 10px; font-size: 12px; font-weight: 600; vertical-align: middle; } .legal-body .faq-chip.emerg { border-color: #ff1f3d; background: rgba(214, 31, 51, 0.55); color: #fff; } .legal-body .faq-btn { display: inline-block; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; padding: 3px 10px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.06); vertical-align: middle; } .legal-body .faq-btn.primary { background: #f5b727; color: #1a1200; border-color: transparent; } .legal-body .faq-rwy { display: inline-block; background: rgba(255, 255, 255, 0.08); padding: 1px 8px; border-radius: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; vertical-align: middle; } .legal-body .faq-rwy.obs { background: rgba(245, 183, 39, 0.16); color: #f5b727; } .legal-body .faq-toast { display: inline-block; border: 1px solid rgba(255, 255, 255, 0.12); border-left: 4px solid #f5b727; border-radius: 6px; padding: 4px 10px; font-size: 12px; background: #11151b; vertical-align: middle; } .legal-body .faq-good { color: #22c55e; font-weight: 700; } .legal-body .faq-warn { color: #f59e0b; font-weight: 700; } .legal-body .faq-bad { color: #ff3b4f; font-weight: 700; } .legal-body .faq-trail { display: inline-block; width: 120px; height: 4px; border-radius: 2px; vertical-align: middle; background: #ebd913; background: -webkit-linear-gradient(left, #ebd913, #13eb13, #13ebc7, #3884ee, #835ef1, #d95ef1); background: linear-gradient(90deg, #ebd913, #13eb13, #13ebc7, #3884ee, #835ef1, #d95ef1); } .legal-body .faq-home { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #22d3ee; background: rgba(34, 211, 238, 0.14); position: relative; vertical-align: middle; margin-right: 4px; } .legal-body .faq-home::after { content: ''; position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; border: 2px solid #0b0e12; } .legal-body .faq-nav { font-size: 13px; line-height: 2; } .legal-body .faq-nav a { display: inline-block; min-width: 22px; text-align: center; margin-right: 2px; } .legal-body .faq-letter { font-size: 13px; color: #8b95a3; margin: 18px 0 2px 0; padding-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .legal-body dl.faq dt { font-weight: 700; margin-top: 10px; } .legal-body dl.faq dd { margin: 2px 0 0 0; } .legal-body .faq-sample { font-weight: 400; margin-left: 8px; font-size: 13px; } .legal-body .faq-sample b { font-weight: 700; } .legal-body kbd { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; padding: 0 5px; } @media (max-width: 600px) { .legal-body .faq-legend > div, .legal-body .faq-legend.faq-tags > div { width: 50%; } } .toast.first { border-left-color: var(--green); } .actions .btn { white-space: nowrap; padding: 8px 4px; font-size: 12px; min-width: 0; } .actions .btn .ico { margin-right: 4px; -webkit-flex: none; flex: none; } /* --- Cockpit-HUD (nur Cockpit-Ansicht): Instrument-Symbolik in blassem Grün, greift keine Eingaben ab --- */ .hud { position: fixed; z-index: var(--ui); top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; color: #a8f0b0; font-family: var(--mono); text-shadow: 0 0 6px rgba(20, 60, 30, 0.9); } .hud[hidden] { display: none; } .hud-tape { position: absolute; top: 100px; top: calc(100px + var(--sat)); left: 50%; width: 420px; margin-left: -210px; height: 44px; } .hud-tape text { fill: #a8f0b0; font-family: var(--mono); font-size: 12px; text-anchor: middle; } .hud-tape line { stroke: #a8f0b0; stroke-width: 1.5; } .hud-tape .cur { fill: #0b0e12; } .hud-tape .curbox { fill: #a8f0b0; } .hud-box { position: absolute; top: 50%; margin-top: -30px; border: 1px solid rgba(168, 240, 176, 0.55); border-radius: 4px; padding: 6px 10px; background: rgba(5, 10, 8, 0.45); min-width: 96px; } .hud-box .lbl { display: block; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.8; } .hud-box b { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; } .hud-box small { display: block; font-size: 11px; opacity: 0.85; } .hud-left { left: 50%; margin-left: -330px; } .hud-right { left: 50%; margin-left: 234px; text-align: right; } .hud-vs { left: 50%; margin-left: 234px; margin-top: 50px; min-width: 96px; text-align: right; } .hud-fpm { position: absolute; top: 50%; left: 50%; width: 80px; height: 40px; margin: -20px 0 0 -40px; fill: none; stroke: #a8f0b0; stroke-width: 2.2; } .hud-name { position: absolute; left: 50%; bottom: 122px; bottom: calc(122px + var(--sab)); width: 360px; margin-left: -180px; text-align: center; font-size: 13px; letter-spacing: 0.4px; } .hud-nose { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 22vh; min-height: 120px; max-height: 240px; } @media (max-width: 900px) { .hud-tape { width: 300px; margin-left: -150px; top: 96px; top: calc(96px + var(--sat)); } .hud-left { left: 12px; margin-left: 0; } .hud-right, .hud-vs { left: auto; right: 12px; margin-left: 0; } .hud-box { min-width: 80px; padding: 4px 8px; } .hud-box b { font-size: 18px; } .hud-name { width: 260px; margin-left: -130px; font-size: 12px; } } .legal-body .faq-apt { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: #2b6cb0; border: 2px solid #0b0e12; vertical-align: middle; } .legal-body .faq-ring { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 2px dashed #22d3ee; vertical-align: middle; } .legal-body .faq-border { display: inline-block; width: 40px; height: 0; border-top: 2px solid #fbcfe8; box-shadow: 0 0 0 4px #8f2a4a; vertical-align: middle; } .legal-body .faq-border.state { border-top: 2px dashed #9ca3af; box-shadow: none; } .apcard.focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } /* ============ Korrekturen aus der 10-fachen Prüfung (Layout, iOS 10, Überlagerungen) ============ */ .chip.chip-emerg { -webkit-order: -1; order: -1; } input[type=search] { -webkit-appearance: none; } input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } .tool .ico, .icon-btn .ico { vertical-align: middle; } .legal-body .faq-legend > div > span:last-child { white-space: normal; overflow: visible; } .legal-body .faq-legend > div { -webkit-flex-wrap: wrap; flex-wrap: wrap; } .legal-body .faq-pill + .faq-pill { margin-left: 4px; } .legal-body .faq-home, .legal-body .faq-apt, .legal-body .faq-ring { box-sizing: content-box; } body.lite .legal-bar { max-width: 420px; } /* Desktop 901–1260 px: Wiedergabe-Leiste rückt rechts neben die Rechts-Leiste, damit Impressum/Datenschutz sichtbar bleiben */ @media (min-width: 901px) and (max-width: 1260px) { .playback { left: 294px; right: 12px; width: auto; max-width: 680px; -webkit-transform: none; transform: none; } } @media (min-width: 901px) { .panel { bottom: auto; height: calc(50% - 93px); min-height: 250px; } /* 28.09.2026: Seitenfenster halb so hoch (verdeckte zu viel Karte); Inhalt scrollt */ .panel .photo-wrap img { height: 150px; max-height: 150px; object-fit: contain; } .panel .photo-wrap.loading::before { padding-top: 39.5%; } /* im halb so hohen Fenster: ganzes Foto (nicht beschnitten, Flugzeug bleibt erkennbar), 150px hoch; Antippen vergrößert */ .maplibregl-ctrl-bottom-right { bottom: 110px; } .maplibregl-ctrl-attrib { max-width: calc(100vw - 420px); } .overlay3d { bottom: 262px; } body.panel-open .toasts { left: 404px; right: 12px; -webkit-transform: none; transform: none; -webkit-align-items: center; align-items: center; } body.panel-open .hud-left { left: 404px; margin-left: 0; } } @media (min-width: 901px) and (max-width: 1200px) { .hud-tape { top: 172px; top: calc(172px + var(--sat)); } } @media (min-width: 1201px) { .hud-tape { top: 128px; top: calc(128px + var(--sat)); } } @media (max-width: 900px) { /* unten ein 24-px-Streifen für Impressum/Datenschutz/Hilfe und Kartenquellen, darüber die Wiedergabe-Leiste */ .playback { bottom: 32px; bottom: calc(32px + var(--sab)); } .overlay3d { bottom: 132px; bottom: calc(132px + var(--sab)); } .status-stack { bottom: 176px; bottom: calc(176px + var(--sab)); } .maplibregl-ctrl-bottom-right { display: block; bottom: 2px; } .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { display: none; } .hud-name { bottom: 132px; bottom: calc(132px + var(--sab)); } .panel { border-radius: 16px 16px 0 0; } .legal-bar { font-size: 10px; } .photo-wrap img { max-height: 180px; } .legal-body table, .legal-body tbody, .legal-body tr, .legal-body td { display: block; } .legal-body thead, .legal-body th { display: none; } .legal-body td { padding: 3px 0; border: none; } .legal-body tr { padding: 8px 0; border-bottom: 1px solid var(--line); } } @media (max-width: 430px) { .tool { width: 38px; height: 38px; } .tools .tool { margin-right: 2px; } .topbar > * { margin-right: 4px; } } @media (max-width: 359px) { .toasts, .popover { top: 140px; top: calc(140px + var(--sat)); } } .legal-head .legal-tabs { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } @media (min-width: 901px) and (max-width: 1260px) { .legal-bar #legal-src { display: none; } body.lite .legal-bar { max-width: 270px; } } /* Quelle steht in der Statuszeile; Impressum/Datenschutz/Hilfe bleiben lesbar */ @media (max-width: 430px) { .pb-time small { display: none; } .pb-time b { font-size: 15px; } #pb-speed { width: 52px; padding-left: 2px; padding-right: 0; } .pb-row > * { margin-right: 6px; } .pb-ctrls > * { margin-right: 3px; } #pb-live .ico { display: none; } } /* Handy: Uhr passt in die Zeitleiste */ @media (max-width: 359px) { .pb-ctrls .icon-btn { width: 32px; } .pb-time b { font-size: 13px; } } @media (min-width: 901px) and (max-width: 1599px) { .panel { height: calc(50% - 115px); } } /* oben 102px statt 58px: (Höhe − 102 − 128) / 2 */ /* 01.10.2026: Niedrige Bildschirme (iPad quer, 768 px hoch): das halbierte Fenster war dort nur 269 px hoch – Kopf 44 und Foto 150 füllten es, die festgepinnten Knöpfe („Am Himmel zeigen“, „Folgen“) lagen über der Routenzeile, und Start und Ziel des Flugzeugs waren nicht zu sehen. Hier bleibt es nicht bei der Hälfte: Höhe − 330 px ergibt bei 768 px ein 438 px hohes Fenster (102 bis 540), Routenzeile und erste Werte sichtbar, unten bleiben 228 px Karte und die Wiedergabe. */ @media (min-width: 901px) and (max-height: 820px) { .panel { height: calc(100% - 330px); min-height: 400px; } } /* 01.10.2026: Im Canvas-Radar (iPad 4) kein Weichzeichner hinter Kopfzeile, Knöpfen und Fenstern – wie schon unter 900 px. Der Weichzeichner kostet auf dem alten Gerät bei jeder Bewegung Rechenzeit, und altes WebKit zeichnet solche Flächen mitunter versetzt. Deckender Grund statt halbdurchsichtig, sonst unverändert. */ body.lite .brand, body.lite .chip, body.lite .tool, body.lite .status, body.lite .panel, body.lite .playback, body.lite .popover, body.lite .legal-bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: #12161c; } /* 28.09.2026: Zoomknöpfe (+, −, Ansicht zurücksetzen) am rechten Rand, nur im Canvas-Radar. Neues Element – an allem Bestehenden verschiebt sich nichts. iPad quer: über der Wiedergabe-Leiste; Handy/iPad hochkant: über den Himmelsblick-Knöpfen. */ .zoomctl { position: fixed; z-index: var(--ui); right: 12px; bottom: 136px; bottom: calc(136px + var(--sab)); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } .zoomctl .tool { margin-bottom: 6px; touch-action: manipulation; } .zoomctl .tool:last-child { margin-bottom: 0; } @media (min-width: 901px) { body.sky-on .zoomctl { bottom: 164px; bottom: calc(164px + var(--sab)); } } /* Himmelsblick: über „Nach oben schauen / Zurück zum Radar“ */ @media (max-width: 900px) { .zoomctl { right: 8px; bottom: 184px; bottom: calc(184px + var(--sab)); } body.panel-open .zoomctl { display: none; } } @media (max-height: 520px) { .zoomctl { display: none; } } /* wenig Hoehe (Handy quer, auch breite Handys ueber 900 px): kein Platz, dort zoomen zwei Finger (30.09.2026) */ /* 29.09.2026 – NAS-Karte: Zielknopf zwischen + und − der MapLibre-Leiste (app.js #btn-locate-map). Nur angehängt; ab 901 px (dort gibt es die Leiste unten rechts) oben in der Werkzeugleiste ausgeblendet, darunter bleibt er oben. Farben vor dem invert-Filter der Leiste gewählt (dunkel -> hell, dunkles Türkis -> helles Türkis). */ .maplibregl-ctrl-group button.maplibregl-ctrl-locate { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; color: #333; } .maplibregl-ctrl-group button.maplibregl-ctrl-locate .ico { width: 17px; height: 17px; } .maplibregl-ctrl-group button.maplibregl-ctrl-locate.active { color: #0e7490; } @media (min-width: 901px) and (min-height: 521px) { body.map-locate:not(.lite) #btn-locate { display: none; } } /* 30.09.2026 – NAS-Karte bei wenig Höhe (breite Handys quer, niedrige Fenster): Knopfleiste unten rechts lag über der Zeitleiste; ausblenden wie #zoomctl im Canvas-Radar, der Zielknopf steht dann wieder oben (Regel darüber), zoomen mit zwei Fingern bzw. Mausrad. */ @media (max-height: 520px) { .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { display: none; } } /* nur die Knöpfe; der Kartennachweis bleibt */ /* Mittelpunkt per Ort oder Koordinaten (Einstellungen, nur NAS) */ .popover .home-find { display: flex; gap: 6px; } .popover .home-find input { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 5px 10px; outline: none; } .popover .home-find input:focus { border-color: var(--accent); } .popover .home-find input::placeholder { color: var(--muted); } .popover .home-find .btn { margin-right: 0; } /* Stil-Auswahl: lange Option nicht breiter als das Einstellungsfenster (sonst waagerechter Rollbalken) */ .popover label.inline select { max-width: calc(100% - 6px); min-width: 0; } /* 06.10.2026 – Wiedergabe-Leiste am NAS kompakter (Wunsch: „deutlich kleiner, damit weniger verdeckt wird“): eine Zeile mit Knöpfen, Zeitleiste und Uhrzeit nebeneinander, die Skala klein darunter. Nur ab 901 px; schmale Bildschirme behalten ihre Fingergrößen. */ @media (min-width: 901px) { .playback { display: grid; grid-template-columns: auto auto minmax(160px, 1fr) auto; grid-template-rows: auto auto; -webkit-align-items: center; align-items: center; padding: 4px 10px 3px 10px; } .pb-row { display: contents; } .pb-row > * { margin-right: 0; } #pb-live { grid-column: 1; grid-row: 1 / span 2; margin-right: 8px; min-height: 28px; padding: 3px 10px; font-size: 10.5px; } .pb-ctrls { grid-column: 2; grid-row: 1 / span 2; margin-right: 10px; } #pb-slider { grid-column: 3; grid-row: 1; margin: 2px 0 0 0; } .pb-scale { grid-column: 3; grid-row: 2; font-size: 9.5px; line-height: 1.1; } .pb-time { grid-column: 4; grid-row: 1 / span 2; margin-left: 10px; white-space: nowrap; } .pb-time b { display: inline; font-size: 13px; } .pb-time small { font-size: 10px; margin-left: 6px; } .pb-ctrls .icon-btn { width: 30px; height: 30px; } .pb-ctrls .icon-btn .ico { width: 15px; height: 15px; } #pb-speed { height: 28px; font-size: 12px; padding-top: 0; padding-bottom: 0; } } @media (min-width: 1261px) { .playback { width: 760px; } } /* zwischen 901 und 1260 px steht die Leiste zwischen Fußzeile und rechtem Rand (Regel weiter oben) */ /* 08.10.2026 – Filterzeile bündig unter dem Flugzeug-Knopf: Sobald sie in eine eigene Zeile rutscht (unter 1600 px), stand „Alle“ wegen des Innenabstands (4 px, Platz für den Rahmen des gewählten Filters) 4 px weiter rechts als der Knopf darüber. */ @media (max-width: 1599px) { .chips { margin-left: -4px; } } /* Notfall weiß mit rotem Rand statt Militärrot (19.10.2026, Bene: Vorschlag 2 „weiß mit rotem Ring“); Blinken bleibt, Maße unverändert */ .badge.emerg { background: #fff; color: #d61f33; box-shadow: inset 0 0 0 1.5px #d61f33; } .legal-body .faq-badge.emerg { background: #fff; color: #d61f33; box-shadow: inset 0 0 0 1.5px #d61f33; } /* Grenzen violett wie in topografischen Karten (20.10.2026, Bene: Vorschlag 1) – Muster in der Hilfe; Maße unverändert */ .legal-body .faq-border { border-top-color: #e2c6ee; border-top-style: dashed; box-shadow: 0 0 0 4px #453855; } .legal-body .faq-border.state { border-top-color: #b98cc9; border-top-style: dashed; box-shadow: none; } /* Ort wählen (22.10.2026, Bene: Tippfläche wie beim Navi), Tafel über den Nadel-Knopf in der Werkzeugleiste; Bestehendes unverändert. iOS 10: kein flex-gap, kein inset, kein min()/clamp() */ .ort-wahl { position: fixed; z-index: 1300; left: 0; right: 0; top: 50%; margin: 0 auto; width: 580px; max-width: calc(100% - 24px); max-height: calc(100% - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: var(--panel-solid); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px 16px 16px; } .ort-wahl h3 { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0 0 10px 0; font-size: 16px; } .ort-wahl h3 span { -webkit-flex: 1; flex: 1; } .ort-wahl h3 .btn { padding: 6px 10px; } .ort-eingabe { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 46px; padding: 0 6px 0 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.04); font-size: 22px; font-weight: 700; letter-spacing: 0.06em; } .ort-eingabe span { -webkit-flex: 1; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; } .ort-eingabe i { display: inline-block; width: 2px; height: 24px; margin-left: 2px; background: var(--cyan); vertical-align: middle; } .ort-eingabe em { color: var(--muted); font-weight: 400; letter-spacing: 0; font-size: 16px; } .ort-eingabe .btn { width: 54px; height: 36px; padding: 0; font-size: 18px; } .ort-eingabe .btn[disabled], .ort-tasten .btn[disabled] { opacity: 0.22; cursor: default; } .ort-titel { margin: 12px 0 6px 0; font-size: 12px; color: var(--muted); } .ort-treffer { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: -2px; } .ort-treffer .btn { margin: 2px; padding: 4px 7px; font-size: 12px; font-weight: 600; } /* kleine Ortsknöpfe (Bene, 22.10.2026) */ .ort-treffer .btn small { margin-left: 4px; color: var(--muted); font-weight: 400; font-size: 10px; } .ort-tasten { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 10px -3px 0 -3px; } .ort-tasten .btn { height: 46px; margin: 3px; padding: 0; font-size: 18px; } .ort-tasten .btn.breit { font-size: 14px; } .ort-fuss { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-top: 12px; font-size: 12px; color: var(--muted); } .ort-fuss span { -webkit-flex: 1; flex: 1; margin-right: 10px; } .ort-fuss .btn { padding: 8px 12px; } /* Nadel „Mein Standort“ in der Ortswahl (22.10.2026, Bene): eigenes Symbol, türkis abgesetzt; nur angehängt */ .ort-treffer .btn.ort-nadel { color: var(--cyan); border-color: rgba(34, 211, 238, 0.45); } .ort-treffer .btn.ort-nadel .ico { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; } .ort-treffer .btn.ort-nadel[disabled] { opacity: 0.6; cursor: default; } /* QWERTZ-Reihen in der Ortswahl (22.10.2026, Bene) und kein Doppeltipp-Zoom auf den Tasten (Prüfer B5); nur angehängt */ .ort-tasten { display: block; margin: 10px 0 0 0; } .ort-reihe { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; margin: 0 -3px; } .ort-reihe .btn { width: 9.4%; width: calc(100% / 10 - 6px); } .ort-reihe .btn.breit { width: 19.4%; width: calc(200% / 10 - 6px); } .ort-wahl .btn { touch-action: manipulation; } /* Ortswahl am Handy (Prüfer C1/C7/C14, 22.10.2026): breitere Tasten, X mittig, Werkzeugleiste mit Nadel-Knopf in einer Zeile; Toasts über der Tafel (C6) */ .ort-wahl h3 .btn .ico { margin-right: 0; } body.ort-offen .toasts { z-index: 1301; } @media (max-width: 480px) { .ort-wahl { max-width: calc(100% - 8px); padding: 10px 8px 12px 8px; } .ort-reihe { margin: 0 -2px; } .ort-reihe .btn { margin: 2px; width: 9.5%; width: calc(100% / 10 - 4px); height: 42px; } .ort-reihe .btn.breit { width: 19.5%; width: calc(200% / 10 - 4px); } .tool { width: 36px; height: 36px; } .tools .tool { margin-right: 1px; } } /* --------------------------------------------------------------------- KIOSK-ANPASSUNG (Dashboard laxgr.de) Das Dashboard blendet dieses Radar in einem Rahmen ein und legt oben rechts einen grossen Schliessen-Knopf darueber. Ohne diese Zeile laege er genau auf dem Hilfe- und dem Quellen-Knopf der Werkzeugleiste. Die Leiste ist rechtsbuendig an ".topbar { right }" ausgerichtet - ein groesserer rechter Abstand schiebt also genau die rechte Gruppe (Suche und Werkzeuge) nach links, ohne am Aufbau etwas zu aendern. 80px = 56px Knopf + 12px Abstand zum Rand + 12px Luft zur Leiste. Gilt bewusst fuer alle Bildschirmbreiten: Der Schliessen-Knopf sitzt immer oben rechts, also muss dort auch immer Platz sein. --------------------------------------------------------------------- */ .topbar { right: 80px; } /* Ab 1600 px Breite stehen Statuszeile (Quelle, Anzahl, Wetter) und die aufklappenden Fenster direkt unter der Werkzeugleiste am rechten Rand - also unter dem Schliessen-Knopf des Dashboards. Sie ruecken deshalb ebenfalls auf 80px und schliessen buendig mit der Werkzeugleiste ab. Schmaler als 1600 px liegen sie tiefer (102px bzw. unten links) und werden nicht beruehrt - an den Wand-iPads (1024 px) aendert sich nichts. */ @media (min-width: 1600px) { .status-stack, .popover { right: 80px; } } /* HANDY (28.09.2026): Das Dashboard zeigt das X bis 600 px Breite nur halb so gross (28px, 8px vom Rand). Rechts reichen dann 44px Platz. Die Werkzeug- knoepfe werden bis 480 px so schmal wie sonst erst unter 430 px, damit sie auf grossen Handys neben dem Flugzeug-Knopf Platz haben. Reicht die Breite trotzdem nicht, beginnt die zweite Zeile buendig unter dem Flugzeug-Knopf (nicht 4px versetzt) und mit Abstand; Hinweise und Fenster ruecken darunter. Ab 601 px (iPads) gilt alles wie bisher. */ @media (max-width: 600px) { .topbar { right: 44px; -webkit-align-content: flex-start; align-content: flex-start; row-gap: 6px; } .tools { margin-left: 0; } .toasts, .popover { top: 150px; top: calc(150px + var(--sat)); } } @media (max-width: 480px) { .tool { width: 38px; height: 38px; } .tools .tool { margin-right: 2px; } .topbar > * { margin-right: 4px; } } @media (max-width: 359px) { .tool { width: 32px; height: 32px; } .tools .tool { margin-right: 1px; } } /* ganz kleine Handys: Werkzeugreihe passt vor das X */ /* 01.10.2026: Altes WebKit (iOS 10, iPad 4) macht aus einem