:root {
    --sky-1: #F0F7FF;
    --sky-2: #DBEAFE;
    --sky-3: #93C5FD;
    --azure: #1E40AF;          /* Akzent dunkelblau */
    --azure-dark: #1E3A8A;     /* sehr dunkles Blau */
    --azure-mid: #2563EB;      /* mittleres Blau */
    --azure-light: #3B82F6;    /* helles Blau */
    --gold: #FBBF24;
    --ink: #0F172A;            /* slate-900, fast schwarz mit Blaustich */
    --paper: #F8FAFF;          /* sehr blass-blauer Hintergrund */
  }
  html, body { height: 100%; }
  body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--paper);
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
  }
  .display { font-family: 'Fraunces', Georgia, serif; font-weight: 900; letter-spacing: -0.02em; }
  .serif { font-family: 'Fraunces', Georgia, serif; }

  /* Karten-Container */
  #map { height: 100%; min-height: 420px; width: 100%; border-radius: 12px; z-index: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .leaflet-container { font-family: inherit; }

  /* Karten-Steuerelemente (Focus / Fullscreen) */
  .map-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 500;
    display: flex;
    gap: 6px;
  }
  .map-ctrl-btn {
    background: white;
    border: 1px solid #DBEAFE;
    color: var(--azure-dark);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
    cursor: pointer;
  }
  .map-ctrl-btn:hover { border-color: var(--azure); background: #EFF6FF; }
  .map-ctrl-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .map-ctrl-btn.is-active {
    background: var(--azure);
    color: white;
    border-color: var(--azure-dark);
  }
  .map-ctrl-btn.is-active:hover { background: var(--azure-dark); color: white; }

  /* Luftraum-Legende (eingeblendet, wenn Layer aktiv) */
  .airspace-legend {
    position: absolute;
    bottom: 24px;
    left: 12px;
    z-index: 500;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(4px);
    border: 1px solid #DBEAFE;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 11px;
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    max-width: 220px;
    line-height: 1.35;
  }
  .airspace-legend h4 {
    font-size: 11px;
    font-weight: 700;
    color: var(--azure-dark);
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .airspace-legend ul { list-style: none; padding: 0; margin: 0; }
  .airspace-legend li { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
  .airspace-legend .swatch {
    display: inline-block;
    width: 14px; height: 10px;
    border-radius: 2px;
    border: 1.5px solid;
  }
  .airspace-legend .note {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #E5E7EB;
    color: #6B7280;
    font-size: 10px;
  }
  .airspace-legend .airspace-status {
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    color: #991B1B;
    font-size: 10.5px;
    line-height: 1.35;
  }
  .airspace-legend .airspace-status code {
    background: rgba(0,0,0,0.06);
    padding: 0 3px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 10px;
  }
  .airspace-legend .airspace-status.hidden { display: none; }
  .airspace-legend .airspace-key {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #E5E7EB;
    font-size: 10.5px;
  }
  .airspace-legend .airspace-key.hidden { display: none; }
  .airspace-legend .airspace-key-toggle {
    background: none;
    border: none;
    padding: 0;
    color: var(--azure-dark);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
  }
  .airspace-legend .airspace-key-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
  }
  .airspace-legend .airspace-key-form input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #DBEAFE;
    border-radius: 6px;
    font: inherit;
    box-sizing: border-box;
  }
  .airspace-legend .airspace-key-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }
  .airspace-legend .airspace-key-row button {
    flex: 1 1 auto;
    padding: 3px 6px;
    border: 1px solid #DBEAFE;
    border-radius: 6px;
    background: white;
    color: var(--azure-dark);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
  }
  .airspace-legend .airspace-key-row button.primary {
    background: var(--azure);
    color: white;
    border-color: var(--azure-dark);
  }
  .airspace-legend .airspace-key-row button:hover { filter: brightness(0.95); }
  .airspace-legend .airspace-key-hint {
    color: #6B7280;
    font-size: 10px;
  }
  [data-theme="dark"] .airspace-legend {
    background: rgba(17,24,39,0.94);
    border-color: #374151;
    color: #E5E7EB;
  }
  [data-theme="dark"] .airspace-legend .note { color: #9CA3AF; border-top-color: #374151; }
  [data-theme="dark"] .airspace-legend .airspace-key { border-top-color: #374151; }
  [data-theme="dark"] .airspace-legend .airspace-key-hint { color: #9CA3AF; }
  [data-theme="dark"] .airspace-legend .airspace-key-form input {
    background: #111827;
    color: #E5E7EB;
    border-color: #374151;
  }
  [data-theme="dark"] .airspace-legend .airspace-key-row button {
    background: #1F2937;
    color: #DBEAFE;
    border-color: #374151;
  }
  [data-theme="dark"] .airspace-legend .airspace-key-row button.primary {
    background: var(--azure);
    color: white;
    border-color: var(--azure-dark);
  }
  [data-theme="dark"] .airspace-legend .airspace-status {
    background: #3F1D1D;
    border-color: #7F1D1D;
    color: #FECACA;
  }

  /* Statische Luftraum-Labels am Centroid jedes Polygons (DFS-Optik). */
  .airspace-label {
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #6a1b9a;
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.75);
    padding: 1px 3px;
    border-radius: 2px;
    pointer-events: none;
  }
  .airspace-label .class-letter {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  .airspace-label .divider {
    border-top: 1px solid currentColor;
    margin: 1px 0;
  }
  .airspace-label .freq {
    font-weight: 400;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
  .airspace-label .freq .freq-icon {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    opacity: 0.85;
  }
  .airspace-label.airspace-label--tmz { color: #1565c0; }
  .airspace-label.airspace-label--restricted { color: #c62828; }
  .airspace-label.airspace-label--has-freq {
    border: 1.5px solid #d500f9;
  }

  /* Long-Press Airspace Query Popup (VFR-NAV-Stil) */
  .airspace-query-popup {
    position: absolute;
    z-index: 800;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    border: 1px solid rgba(0,0,0,0.08);
    min-width: 56px;
    max-width: 200px;
    font-family: 'Arial', 'Helvetica Neue', sans-serif;
    transform: translate(-50%, -50%);
  }
  .airspace-query-popup .aq-item {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
  }
  .airspace-query-popup .aq-class {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 4px 6px;
    font-size: 15px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.02em;
  }
  .airspace-query-popup .aq-limits {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3px 8px;
    background: rgba(255,255,255,0.95);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    color: #1F2937;
    min-width: 52px;
  }
  .airspace-query-popup .aq-limits .aq-upper {
    border-bottom: 1px solid rgba(0,0,0,0.12);
    padding-bottom: 1px;
    margin-bottom: 1px;
  }
  .airspace-query-popup .aq-limits .aq-freq {
    font-size: 10px;
    font-weight: 400;
    color: #6B7280;
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .airspace-query-popup .aq-limits .aq-freq .freq-icon {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    opacity: 0.7;
  }
  .airspace-query-popup .aq-name {
    font-size: 9px;
    font-weight: 500;
    color: #6B7280;
    padding: 0 4px;
    text-align: center;
    line-height: 1.2;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .airspace-query-popup .aq-empty {
    font-size: 11px;
    color: #9CA3AF;
    padding: 4px 8px;
    text-align: center;
    white-space: nowrap;
  }
  .airspace-query-popup .aq-hint {
    font-size: 9px;
    color: #9CA3AF;
    text-align: center;
    margin-top: 2px;
  }
  .aq-class--ctr        { background: #DC2626; }
  .aq-class--tma        { background: #2563EB; }
  .aq-class--restricted  { background: #7C3AED; }
  .aq-class--rmz        { background: #D97706; }
  .aq-class--other      { background: #059669; }

  [data-theme="dark"] .airspace-query-popup {
    background: rgba(17,24,39,0.94);
    border-color: rgba(255,255,255,0.08);
  }
  [data-theme="dark"] .airspace-query-popup .aq-limits {
    background: rgba(31,41,55,0.95);
    color: #E5E7EB;
  }
  [data-theme="dark"] .airspace-query-popup .aq-limits .aq-freq { color: #9CA3AF; }
  [data-theme="dark"] .airspace-query-popup .aq-name { color: #9CA3AF; }
  [data-theme="dark"] .airspace-query-popup .aq-empty { color: #6B7280; }

  .map-context-menu {
    position: absolute;
    z-index: 810;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    border: 1px solid rgba(0,0,0,0.08);
    min-width: 180px;
    font-family: 'Inter', 'Arial', sans-serif;
    transform: translate(-50%, 8px);
  }
  .map-context-menu .ctx-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #1F2937;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s;
  }
  .map-context-menu .ctx-btn:hover {
    background: rgba(30,58,138,0.08);
  }
  .map-context-menu .ctx-btn:active {
    background: rgba(30,58,138,0.16);
  }
  .map-context-menu .ctx-btn .ctx-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .map-context-menu .ctx-sep {
    height: 1px;
    background: rgba(0,0,0,0.08);
    margin: 2px 4px;
  }
  [data-theme="dark"] .map-context-menu {
    background: rgba(17,24,39,0.96);
    border-color: rgba(255,255,255,0.1);
  }
  [data-theme="dark"] .map-context-menu .ctx-btn {
    color: #E5E7EB;
  }
  [data-theme="dark"] .map-context-menu .ctx-btn:hover {
    background: rgba(96,165,250,0.12);
  }
  [data-theme="dark"] .map-context-menu .ctx-btn:active {
    background: rgba(96,165,250,0.22);
  }
  [data-theme="dark"] .map-context-menu .ctx-sep {
    background: rgba(255,255,255,0.08);
  }

  /* Roter Luftraum-Warnungs-Popup für die Prediction (zeigt den ersten
     Punkt, an dem der geplante Flugweg in einen Luftraum eindringt). */
  .prediction-airspace-warn-pin {
    width: 32px; height: 32px;
    background: #DC2626;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    line-height: 1;
  }
  .leaflet-popup.prediction-airspace-warn-popup-wrap .leaflet-popup-content-wrapper {
    background: #DC2626;
    color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  }
  .leaflet-popup.prediction-airspace-warn-popup-wrap .leaflet-popup-tip {
    background: #DC2626;
  }
  .leaflet-popup.prediction-airspace-warn-popup-wrap .leaflet-popup-content {
    margin: 8px 12px;
    font: 600 12.5px/1.3 ui-sans-serif, system-ui, sans-serif;
  }
  .prediction-airspace-warn-popup .title {
    display: block;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  .prediction-airspace-warn-popup .name {
    display: block;
    font-weight: 600;
  }

  /* Luftraum-Popup (Klick-Lookup) */
  .airspace-popup-card {
    font: 600 13.5px/1.45 ui-sans-serif, system-ui, sans-serif;
    color: #0B1220;
    min-width: 220px;
  }
  .airspace-popup-card .airspace-popup-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin-bottom: 6px;
  }
  .airspace-popup-card .airspace-popup-head strong {
    font-size: 14px; font-weight: 800; color: #0B1220;
  }
  .airspace-popup-card .airspace-popup-class {
    font: 800 11px/1 ui-sans-serif, system-ui, sans-serif;
    background: #0B1220; color: #FFFFFF;
    padding: 3px 7px; border-radius: 999px;
    letter-spacing: 0.04em;
  }
  .airspace-popup-card .airspace-popup-class:empty { display: none; }
  .airspace-popup-limits {
    display: inline-block;
    text-align: center;
    border: 1.5px solid #0B1220;
    border-radius: 8px;
    padding: 5px 12px;
    background: #F8FAFF;
    font: 800 13.5px/1.15 ui-sans-serif, system-ui, sans-serif;
    color: #0B1220;
    margin: 2px 0 6px 0;
  }
  .airspace-popup-limits .upper,
  .airspace-popup-limits .lower { display: block; }
  .airspace-popup-limits .sep {
    display: block; height: 1.5px; margin: 3px 0;
    background: currentColor; opacity: 0.7;
  }
  [data-theme="dark"] .airspace-popup-card { color: #F3F4F6; }
  [data-theme="dark"] .airspace-popup-card .airspace-popup-head strong { color: #F9FAFB; }
  [data-theme="dark"] .airspace-popup-card .airspace-popup-class {
    background: #F9FAFB; color: #0B1220;
  }
  [data-theme="dark"] .airspace-popup-limits {
    background: #0B1220; border-color: #F9FAFB; color: #F9FAFB;
  }

  /* FIS-Frequenz-Banner im Airspace-Popup (prominent, oberhalb der Limits). */
  .airspace-popup-fis {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, #047857, #059669);
    color: #FFFFFF;
    padding: 8px 10px;
    border-radius: 8px;
    margin: 2px 0 8px 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 1px 2px rgba(0,0,0,0.18);
  }
  .airspace-popup-fis-icon {
    flex: 0 0 auto;
    font-size: 18px; line-height: 1;
  }
  .airspace-popup-fis-body {
    display: flex; flex-direction: column; line-height: 1.2; min-width: 0;
  }
  .airspace-popup-fis-label {
    font: 800 10px/1 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9;
  }
  .airspace-popup-fis-value {
    font: 900 15px/1.15 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    margin-top: 2px; letter-spacing: 0.01em;
  }
  .airspace-popup-fis-station {
    font-size: 12px; font-weight: 700; opacity: 0.95; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .airspace-popup-fis-source {
    font-size: 10px; font-weight: 600; opacity: 0.78; margin-top: 3px;
  }
  [data-theme="dark"] .airspace-popup-fis {
    background: linear-gradient(135deg, #059669, #10B981);
  }

  /* Airport-Marker (kleines Icon mit Tower/Info-Frequenz) */
  .airport-marker {
    background: #FFFFFF;
    border: 2px solid #1E3A8A;
    border-radius: 999px;
    padding: 2px 8px;
    font: 700 12px/1.1 ui-sans-serif, system-ui, sans-serif;
    color: #0B1220;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.02em;
  }
  .airport-marker.airport-marker--heli { border-color: #B91C1C; color: #7F1D1D; }
  .airport-marker.airport-marker--glider { border-color: #047857; color: #064E3B; }
  /* Flugplatzsymbol-Marker für Airports ohne ICAO/IATA-Eintrag:
     ein klar als Flugplatz lesbares Chart-Symbol, das beim Hover/Click
     deutlich macht, dass dahinter weitere Informationen abrufbar sind. */
  .airport-marker.airport-marker--symbol {
    width: 24px; height: 24px; padding: 0;
    border-width: 2.5px; border-radius: 999px;
    background: #FFFFFF;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.45);
    transition: transform 120ms ease, box-shadow 120ms ease;
  }
  .airport-marker.airport-marker--symbol:hover,
  .airport-marker.airport-marker--symbol:focus-visible {
    transform: scale(1.18);
    box-shadow: 0 0 0 3px rgba(30,58,138,0.30), 0 1px 4px rgba(0,0,0,0.5);
    outline: none;
  }
  .airport-marker.airport-marker--symbol svg { display: block; pointer-events: none; }
  .airport-marker.airport-marker--symbol .airport-symbol-fg { stroke: #1E3A8A; fill: #1E3A8A; }
  .airport-marker.airport-marker--heli.airport-marker--symbol:hover,
  .airport-marker.airport-marker--heli.airport-marker--symbol:focus-visible {
    box-shadow: 0 0 0 3px rgba(185,28,28,0.30), 0 1px 4px rgba(0,0,0,0.5);
  }
  .airport-marker.airport-marker--heli.airport-marker--symbol .airport-symbol-fg { stroke: #B91C1C; fill: #B91C1C; }
  .airport-marker.airport-marker--glider.airport-marker--symbol:hover,
  .airport-marker.airport-marker--glider.airport-marker--symbol:focus-visible {
    box-shadow: 0 0 0 3px rgba(4,120,87,0.30), 0 1px 4px rgba(0,0,0,0.5);
  }
  .airport-marker.airport-marker--glider.airport-marker--symbol .airport-symbol-fg { stroke: #047857; fill: #047857; }
  [data-theme="dark"] .airport-marker {
    background: #0B1220;
    border-color: #93C5FD;
    color: #F9FAFB;
  }
  [data-theme="dark"] .airport-marker.airport-marker--heli { border-color: #FCA5A5; color: #FECACA; }
  [data-theme="dark"] .airport-marker.airport-marker--glider { border-color: #6EE7B7; color: #A7F3D0; }
  [data-theme="dark"] .airport-marker.airport-marker--symbol { background: #0B1220; }
  [data-theme="dark"] .airport-marker.airport-marker--symbol .airport-symbol-fg { stroke: #93C5FD; fill: #93C5FD; }
  [data-theme="dark"] .airport-marker.airport-marker--heli.airport-marker--symbol .airport-symbol-fg { stroke: #FCA5A5; fill: #FCA5A5; }
  [data-theme="dark"] .airport-marker.airport-marker--glider.airport-marker--symbol .airport-symbol-fg { stroke: #6EE7B7; fill: #6EE7B7; }

  /* Airport-Popup mit Sketch */
  .leaflet-popup:has(.airport-popup) { cursor: pointer; }
  .airport-popup {
    font: 600 14px/1.5 ui-sans-serif, system-ui, sans-serif;
    color: #0B1220;
    min-width: 260px;
    background: #EEF2F7;
    border: 1.5px solid #0B1220;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
  }
  .airport-popup h5 { margin: 0 0 4px 0; font-size: 16px; font-weight: 900; color: #0B1220; letter-spacing: 0.01em; }
  .airport-popup .airport-popup-meta { color: #0B1220; font-size: 13px; margin-bottom: 10px; font-weight: 700; }
  .airport-popup .airport-popup-section { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(11,18,32,0.18); }
  .airport-popup .airport-popup-section-title {
    font-size: 11.5px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
    color: #0B1220; margin-bottom: 5px;
  }
  .airport-popup ul { list-style: none; padding: 0; margin: 0; }
  .airport-popup li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 3px 0; }
  .airport-popup li code {
    font: 800 13.5px/1.2 ui-monospace, SFMono-Regular, monospace;
    color: #0B1220;
    background: rgba(255,255,255,0.85);
    padding: 1px 6px;
    border-radius: 4px;
  }
  .airport-popup .airport-popup-freq-name { color: #0B1220; font-size: 13px; font-weight: 700; }
  .airport-popup .airport-popup-freq-pin {
    background: #0B1220; color: #FFFFFF; border-radius: 4px;
    padding: 1px 6px; font-size: 10px; font-weight: 800;
  }
  .airport-sketch {
    margin-top: 8px;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    padding: 8px;
  }
  .airport-sketch svg { display: block; width: 100%; height: auto; }
  .airport-sketch .runway {
    stroke: #111827;
    stroke-linecap: round;
  }
  .airport-sketch .runway-halo {
    stroke: #FFFFFF;
    stroke-linecap: round;
  }
  .airport-sketch .runway-label {
    font: 700 13px/1 ui-sans-serif, system-ui, sans-serif;
    fill: #111827;
    paint-order: stroke fill;
    stroke: #FFFFFF;
    stroke-width: 3px;
    stroke-linejoin: round;
  }
  .airport-sketch .compass-rose { stroke: #6B7280; fill: none; stroke-width: 1.2; }
  .airport-sketch .compass-label {
    font: 700 12px/1 ui-sans-serif, system-ui, sans-serif;
    fill: #374151;
  }
  [data-theme="dark"] .airport-popup {
    background: #11192B;
    border-color: #F9FAFB;
    color: #F3F4F6;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  }
  [data-theme="dark"] .airport-popup h5 { color: #F9FAFB; }
  [data-theme="dark"] .airport-popup .airport-popup-meta { color: #E5E7EB; }
  [data-theme="dark"] .airport-popup .airport-popup-section { border-top-color: rgba(249,250,251,0.18); }
  [data-theme="dark"] .airport-popup .airport-popup-section-title { color: #F9FAFB; }
  [data-theme="dark"] .airport-popup li code { color: #F9FAFB; background: rgba(255,255,255,0.08); }
  [data-theme="dark"] .airport-popup .airport-popup-freq-name { color: #E5E7EB; }
  [data-theme="dark"] .airport-popup .airport-popup-freq-pin { background: #F9FAFB; color: #0B1220; }
  [data-theme="dark"] .airport-sketch { background: #0B1220; border-color: #374151; }
  [data-theme="dark"] .airport-sketch .runway { stroke: #F9FAFB; }
  [data-theme="dark"] .airport-sketch .runway-halo { stroke: #0B1220; }
  [data-theme="dark"] .airport-sketch .runway-label {
    fill: #F9FAFB;
    stroke: #0B1220;
  }
  [data-theme="dark"] .airport-sketch .compass-rose { stroke: #6B7280; }
  [data-theme="dark"] .airport-sketch .compass-label { fill: #D1D5DB; }

  .map-fullscreen-active {
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
  }
  .map-fullscreen-active #map { border-radius: 0 !important; }
  /* CSS-Fallback, falls Fullscreen-API nicht verfügbar ist (z.B. iOS Safari, iframes ohne allowfullscreen) */
  .map-pseudo-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
  }
  .map-pseudo-fullscreen #map {
    border-radius: 0 !important;
    height: 100% !important;
  }
  body.map-fullscreen-lock { overflow: hidden; }

  /* Eigener Scrollbar */
  .scroll-thin::-webkit-scrollbar { width: 6px; }
  .scroll-thin::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

  /* Subtle paper texture - jetzt blau */
  .paper-bg {
    background-image:
      radial-gradient(at 90% 0%, rgba(147,197,253,0.25) 0%, transparent 40%),
      radial-gradient(at 0% 100%, rgba(30,64,175,0.08) 0%, transparent 50%),
      radial-gradient(at 50% 50%, rgba(219,234,254,0.4) 0%, transparent 70%);
  }

  /* Ballon-Marker Animation */
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }
  .balloon-icon { animation: float 3s ease-in-out infinite; }

  /* Loading Spinner */
  .spinner {
    border: 3px solid rgba(30,64,175,0.15);
    border-top-color: var(--azure);
    border-radius: 50%;
    width: 22px; height: 22px;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Custom range styling */
  input[type="datetime-local"], input[type="number"], input[type="text"] {
    transition: all 0.15s ease;
  }
  input:focus { outline: none; }

  /* Pill toggle */
  .toggle-track {
    background: #E5E7EB;
    border-radius: 999px;
    padding: 3px;
    display: inline-flex;
    position: relative;
  }
  .toggle-track button {
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    transition: all 0.2s;
    z-index: 1;
  }
  .toggle-track button.active {
    background: var(--ink);
    color: white;
  }

  /* Höhen-Karte */
  .alt-card {
    background: white;
    border: 1px solid #DBEAFE;
    border-radius: 10px;
    padding: 10px;
    transition: all 0.15s;
  }
  .alt-card:hover { border-color: var(--azure); box-shadow: 0 2px 8px rgba(30,64,175,0.08); }

  .anchor-badge {
    background: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
  }

  .alt-step-btn {
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    color: var(--azure-dark);
    border-radius: 8px;
    width: 40px;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: all 0.1s;
    display: flex; align-items: center; justify-content: center;
  }
  .alt-step-btn:hover { background: var(--azure); color: white; border-color: var(--azure); }
  .alt-step-btn:active { transform: scale(0.95); }

  /* Native number-spinner ausblenden, da wir eigene haben */
  .alt-input::-webkit-outer-spin-button,
  .alt-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  .alt-input {
    -moz-appearance: textfield;
  }

  /* Touch-freundlicher Stepper für Prediction-Flughöhe */
  .prediction-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    height: 44px;
  }
  .prediction-stepper-btn {
    width: 44px;
    min-width: 44px;
    background: #F3F4F6;
    color: #1F2937;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    border: 0;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.12s ease;
  }
  .prediction-stepper-btn:hover { background: #E5E7EB; }
  .prediction-stepper-btn:active { background: #D1D5DB; }
  .prediction-stepper-btn:focus-visible {
    outline: 2px solid #60A5FA;
    outline-offset: -2px;
  }
  .prediction-stepper-input {
    width: 84px;
    border: 0;
    border-left: 1px solid #E5E7EB;
    border-right: 1px solid #E5E7EB;
    text-align: center;
    font-size: 16px; /* prevents iOS zoom on focus */
    font-variant-numeric: tabular-nums;
    padding: 0 6px;
    background: white;
    color: #111827;
    -moz-appearance: textfield;
  }
  .prediction-stepper-input::-webkit-outer-spin-button,
  .prediction-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  .prediction-stepper-input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px #93C5FD;
  }
  [data-theme="dark"] .prediction-stepper {
    border-color: #374151;
    background: #111827;
  }
  [data-theme="dark"] .prediction-stepper-btn {
    background: #1F2937;
    color: #E5E7EB;
  }
  [data-theme="dark"] .prediction-stepper-btn:hover { background: #374151; }
  [data-theme="dark"] .prediction-stepper-input {
    background: #111827;
    color: #F3F4F6;
    border-left-color: #374151;
    border-right-color: #374151;
  }

  /* Prediction: Fahrthöhe + Fahrtdauer nebeneinander */
  .prediction-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 0;
    align-items: start;
    justify-content: start;
  }
  .prediction-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .prediction-col-label {
    font-size: 11px;
    color: #6B7280;
    white-space: nowrap;
  }
  .prediction-col-hint {
    font-size: 11px;
    color: #9CA3AF;
    white-space: nowrap;
  }

  /* Local unit toggle for prediction cruise altitude */
  .prediction-unit-row {
    display: flex;
    gap: 4px;
    margin-top: 4px;
  }
  .prediction-unit-toggle {
    display: inline-flex;
    border: 1px solid #DBEAFE;
    border-radius: 6px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 600;
  }
  .prediction-unit-toggle button {
    padding: 2px 7px;
    background: white;
    color: var(--azure-dark);
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    line-height: 1.3;
  }
  .prediction-unit-toggle button.active {
    background: var(--azure-dark);
    color: white;
  }
  [data-theme="dark"] .prediction-unit-toggle { border-color: #374151; }
  [data-theme="dark"] .prediction-unit-toggle button { background: #1F2937; color: #9CA3AF; }
  [data-theme="dark"] .prediction-unit-toggle button.active { background: var(--azure); color: #0B1220; }
  [data-theme="dark"] .prediction-col-label { color: #9CA3AF; }
  [data-theme="dark"] .prediction-col-hint { color: #6B7280; }

  /* MSL/AGL-Umschalter neben der Überschrift „Höhen" */
  .alt-ref-toggle {
    display: inline-flex;
    border: 1px solid #DBEAFE;
    border-radius: 8px;
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
  }
  .alt-ref-btn {
    padding: 3px 10px;
    background: white;
    color: var(--azure-dark);
    cursor: pointer;
    border: none;
    border-left: 1px solid #DBEAFE;
    line-height: 1.4;
    font-family: inherit;
    transition: background 0.1s, color 0.1s;
  }
  .alt-ref-btn:first-child { border-left: none; }
  .alt-ref-btn.is-active {
    background: var(--azure);
    color: white;
  }

  /* ===== Time-Stepper ===== */
  .time-stepper-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    background: white;
    border: 1px solid #DBEAFE;
    border-radius: 12px;
    padding: 4px;
    transition: all 0.15s;
  }
  .time-stepper-row:hover {
    border-color: var(--azure);
    box-shadow: 0 2px 8px rgba(30,64,175,0.1);
  }
  .time-stepper-row.scrolling {
    border-color: var(--azure);
    background: #EFF6FF;
  }
  .time-stepper-display {
    text-align: center;
    padding: 4px 8px;
    user-select: none;
    cursor: ns-resize;
    border-radius: 8px;
    transition: background 0.15s;
  }
  .time-stepper-display:hover { background: #F1F5F9; }
  .time-stepper-value {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--azure-dark);
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  .time-stepper-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94A3B8;
    margin-top: 2px;
    font-weight: 600;
  }
  .time-step-btn {
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    color: var(--azure-dark);
    border-radius: 8px;
    width: 36px;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: all 0.1s;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .time-step-btn:hover { background: var(--azure); color: white; border-color: var(--azure); }
  .time-step-btn:active { transform: scale(0.94); }

  /* Bei langem Datums-Stepper soll Datum-Wert kleiner werden */
  #dateStepper .time-stepper-value {
    font-size: 18px;
  }

  /* Sidebar auf Mobile als Drawer */
  @media (max-width: 1023px) {
    .sidebar-mobile {
      max-height: 50vh;
      overflow-y: auto;
    }
  }

  /* Result-Tabelle */
  .result-table th { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #6B7280; }
  .result-table td { padding: 10px 12px; border-bottom: 1px solid #F3F4F6; font-size: 14px; }

  /* Suggest-Liste */
  .suggest-list {
    position: absolute;
    z-index: 50;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin-top: 4px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .suggest-list button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    font-size: 13px;
    border-bottom: 1px solid #F3F4F6;
  }
  .suggest-list button:hover { background: #DBEAFE; }

  /* Kontextmenü für Suggest-Einträge */
  .suggest-ctx-menu {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 180px;
    padding: 4px 0;
  }
  .suggest-ctx-menu .suggest-ctx-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    font-size: 13px;
    color: #111827;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .suggest-ctx-menu .suggest-ctx-item:hover { background: #DBEAFE; }

  /* Warnungen */
  .warn-card {
    border-left: 3px solid #F59E0B;
    background: #FFFBEB;
    padding: 10px 12px;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
  }
  .warn-ok {
    border-left-color: #059669;
    background: #ECFDF5;
  }
  .warn-info {
    border-left-color: #2563EB;
    background: #EFF6FF;
  }
  .warn-alert {
    border-left-color: #DC2626;
    background: #FEF2F2;
  }

  /* Buttons */
  .btn-primary {
    background: linear-gradient(135deg, var(--azure-mid) 0%, var(--azure-dark) 100%);
    color: white;
    font-weight: 600;
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(30,64,175,0.3);
    transition: all 0.2s;
  }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(30,64,175,0.4); }
  .btn-primary:active { transform: translateY(0); }
  .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

  /* Yellow "needs recalculation" state for calc button */
  .btn-primary.needs-recalc {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 4px 14px rgba(217,119,6,0.35);
    animation: pulse-recalc 2s ease-in-out infinite;
  }
  .btn-primary.needs-recalc:hover {
    box-shadow: 0 6px 18px rgba(217,119,6,0.5);
  }
  @keyframes pulse-recalc {
    0%, 100% { box-shadow: 0 4px 14px rgba(217,119,6,0.35); }
    50% { box-shadow: 0 4px 20px rgba(217,119,6,0.55); }
  }
  .bmc-calc-btn.needs-recalc {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  }

  /* Waypoint Upload */
  .wp-marker {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }
  .wp-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E11D48;
    border: 2px solid #fff;
    box-shadow: 0 0 3px rgba(0,0,0,0.35);
    flex-shrink: 0;
  }
  .wp-label {
    font-size: 11px;
    font-weight: 600;
    color: #1E293B;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
    line-height: 1;
    pointer-events: none;
  }
  [data-theme="dark"] .wp-label { color: #F1F5F9; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000; }
  .waypoint-upload-section { margin-top: 10px; }
  .waypoint-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    padding: 0 4px;
  }
  .saved-wp-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--azure-dark);
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .saved-wp-link:hover {
    background: #DBEAFE;
    border-color: var(--azure);
  }
  .saved-wp-link-icon {
    font-size: 12px;
    line-height: 1;
  }
  .saved-wp-link-count {
    background: var(--azure);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }
  /* Dezenter ×-Button: kein dominanter "Entfernen"-Text mehr */
  .waypoint-clear-x {
    background: transparent !important;
    border: 1px solid #FCA5A5 !important;
    color: #DC2626 !important;
    font-size: 16px;
    line-height: 1;
    padding: 2px 8px !important;
    min-width: 24px;
    font-weight: 700;
  }
  .waypoint-clear-x:hover {
    background: #FEF2F2 !important;
    border-color: #DC2626 !important;
  }
  [data-theme="dark"] .waypoint-clear-x {
    border-color: #7F1D1D !important;
    color: #F87171 !important;
  }
  [data-theme="dark"] .waypoint-clear-x:hover {
    background: #450A0A !important;
    border-color: #DC2626 !important;
  }
  [data-theme="dark"] .saved-wp-link {
    background: #1E293B;
    border-color: #334155;
    color: #93C5FD;
  }
  [data-theme="dark"] .saved-wp-link:hover {
    background: #1E40AF;
    border-color: var(--azure);
  }
  .waypoint-drop-zone {
    border: 2px dashed #BFDBFE;
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
    color: var(--azure-dark);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: border-color 0.2s, background 0.2s;
  }
  .waypoint-drop-zone:hover, .waypoint-drop-zone.drag-over {
    border-color: var(--azure);
    background: #EFF6FF;
  }
  .waypoint-formats-hint { font-size: 11px; color: #94A3B8; }
  .waypoint-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--azure-dark);
    background: #EFF6FF;
    border-radius: 8px;
  }
  .waypoint-clear-btn {
    background: none;
    border: 1px solid #DBEAFE;
    color: #DC2626;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .waypoint-clear-btn:hover { background: #FEE2E2; border-color: #FECACA; }
  .waypoint-manual-section { margin-top: 8px; }
  .waypoint-manual-textarea {
    width: 100%;
    min-height: 54px;
    max-height: 140px;
    padding: 6px 8px;
    border: 1.5px solid #DBEAFE;
    border-radius: 8px;
    font-size: 11.5px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    color: var(--azure-dark);
    background: white;
    resize: vertical;
    line-height: 1.5;
    transition: border-color 0.2s;
    box-sizing: border-box;
  }
  .waypoint-manual-textarea:focus { border-color: var(--azure); outline: none; }
  .waypoint-manual-textarea::placeholder { color: #94A3B8; font-family: inherit; }
  .waypoint-manual-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
  }
  .waypoint-manual-parse-btn {
    background: var(--azure);
    color: white;
    border: none;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .waypoint-manual-parse-btn:hover { background: #2563EB; }
  .waypoint-manual-parse-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .waypoint-manual-hint {
    font-size: 10px;
    color: #94A3B8;
    flex: 1;
  }
  .waypoint-manual-error {
    font-size: 11px;
    color: #DC2626;
    margin-top: 3px;
  }

  .btn-secondary {
    background: white; border: 1px solid #DBEAFE;
    padding: 8px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 500;
    color: var(--azure-dark);
    transition: all 0.15s;
  }
  .btn-secondary:hover { border-color: var(--azure); background: #EFF6FF; }
  .btn-secondary.active-pill {
    background: var(--azure-dark);
    color: white;
    border-color: var(--azure-dark);
  }

  .btn-icon {
    background: white; border: 1px solid #DBEAFE;
    padding: 10px; border-radius: 8px;
    color: var(--azure-dark);
    transition: all 0.15s;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .btn-icon:hover { border-color: var(--azure); background: #EFF6FF; }
  .btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Pill-Toggle Buttons (Jetzt vs. dedizierte Zeit) */
  .mode-pills {
    display: inline-flex;
    background: #F1F5F9;
    border-radius: 10px;
    padding: 3px;
    width: 100%;
  }
  .mode-pills button {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
    transition: all 0.2s;
  }
  .mode-pills button.active {
    background: white;
    color: var(--azure-dark);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  /* Section labels */
  .label-cap { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6B7280; }

  /* Brand badge */
  .brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--azure-dark);
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 1px solid #BFDBFE;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
  }
  .brand-badge::before {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--azure-mid);
  }

  /* Feedback chip */
  .feedback-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--azure-dark);
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    padding: 2px 8px;
    border-radius: 999px;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: all 0.15s ease;
  }
  .feedback-chip:hover { color: #FFFFFF; border-color: var(--azure-dark); background: var(--azure-dark); text-decoration: none; }

  /* User-Guide Overlay (PDF-Viewer im Vollbild) */
  .user-guide-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(4px);
    z-index: 1100;
    display: flex; flex-direction: column;
    animation: fadeIn 0.15s ease-out;
  }
  .user-guide-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: var(--azure-dark, #1E40AF);
    color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  }
  .user-guide-bar .ug-title {
    font-weight: 600; font-size: 14px;
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .user-guide-bar a, .user-guide-bar button {
    appearance: none;
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.12);
    color: white;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .user-guide-bar button:hover, .user-guide-bar a:hover {
    background: rgba(255,255,255,0.22);
  }
  .user-guide-bar .ug-close {
    background: white; color: var(--azure-dark, #1E40AF);
    border-color: white; font-weight: 600;
  }
  .user-guide-bar .ug-close:hover { background: #F1F5F9; }
  .user-guide-frame-wrap {
    flex: 1;
    background: #1F2937;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  .user-guide-frame-wrap iframe {
    width: 100%; height: 100%;
    border: 0; display: block;
    background: #1F2937;
  }
  /* PDF.js-Renderer: gestapelte Seiten als Canvas. Wird auf allen Geräten
     verwendet, damit der Sprung zu einer bestimmten Seite (#page=N) auch
     auf mobilen Browsern zuverlässig funktioniert. */
  .user-guide-pages {
    display: flex; flex-direction: column; align-items: center;
    gap: 12px; padding: 12px;
    width: 100%;
  }
  .user-guide-pages .ug-page {
    background: #FFFFFF;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    max-width: 100%;
    height: auto;
    display: block;
  }
  .user-guide-status {
    color: #E5E7EB; font-size: 13px; padding: 16px; text-align: center;
  }
  [data-theme="dark"] .user-guide-bar { background: #0F172A; }

  /* Modal (Szenario-Auswahl) */
  .modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: fadeIn 0.15s ease-out;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .modal-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    width: 100%; max-width: 460px;
    max-height: 85vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: scaleIn 0.18s ease-out;
  }
  @keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .modal-header {
    padding: 18px 20px 12px;
    border-bottom: 1px solid #E5E7EB;
  }
  .modal-body {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1;
  }
  .modal-footer {
    padding: 12px 16px;
    border-top: 1px solid #E5E7EB;
    background: #F8FAFC;
  }
  .scenario-row {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    background: white;
    border: 1px solid #DBEAFE;
    border-radius: 12px;
    padding: 14px 14px;
    margin-bottom: 8px;
    text-align: left;
    transition: all 0.15s;
    min-height: 56px; /* touch target */
  }
  .scenario-row:hover, .scenario-row:focus-visible {
    border-color: var(--azure);
    background: #EFF6FF;
    outline: none;
  }
  .scenario-row:active { transform: scale(0.99); }
  .scenario-row .info { flex: 1; min-width: 0; }
  .scenario-row .name {
    font-weight: 600;
    color: var(--azure-dark);
    font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .scenario-row .meta {
    font-size: 12px;
    color: #6B7280;
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .scenario-delete {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 8px;
    border: 1px solid #FECACA;
    background: white;
    color: #DC2626;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .scenario-delete:hover { background: #FEF2F2; border-color: #DC2626; }
  .scenario-share {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 8px;
    border: 1px solid #BFDBFE;
    background: white;
    color: var(--azure-dark);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .scenario-share:hover { background: #EFF6FF; border-color: var(--azure); }
  .scenario-empty {
    text-align: center;
    padding: 28px 16px;
    color: #6B7280;
    font-size: 14px;
  }

  /* ===== Saved Waypoints Panel ===== */
  .saved-wp-row {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    background: white;
    border: 1px solid #DBEAFE;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    text-align: left;
    transition: all 0.15s;
    min-height: 52px;
    cursor: pointer;
    user-select: none;
  }
  .saved-wp-row:hover, .saved-wp-row:focus-visible {
    border-color: var(--azure);
    background: #EFF6FF;
    outline: none;
  }
  .saved-wp-row.is-active {
    background: #F0FDF4;
    border-color: #16A34A;
  }
  .saved-wp-row.is-active:hover {
    background: #DCFCE7;
    border-color: #15803D;
  }
  .saved-wp-row .check {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: transparent;
    transition: all 0.15s;
  }
  .saved-wp-row.is-active .check {
    background: #16A34A;
    border-color: #16A34A;
    color: white;
  }
  .saved-wp-row .check svg { pointer-events: none; }
  .saved-wp-row .info { flex: 1; min-width: 0; }
  .saved-wp-row .name {
    font-weight: 600;
    color: var(--azure-dark);
    font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .saved-wp-row .meta {
    font-size: 11px;
    color: #6B7280;
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .saved-wp-row .actions {
    display: flex; gap: 6px; flex-shrink: 0;
  }
  .saved-wp-delete {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid #FECACA;
    background: white;
    color: #DC2626;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s;
    cursor: pointer;
  }
  .saved-wp-delete:hover { background: #FEF2F2; border-color: #DC2626; }
  .saved-wp-delete svg { pointer-events: none; }
  .saved-wp-empty {
    text-align: center;
    padding: 28px 16px;
    color: #6B7280;
    font-size: 14px;
  }
  .saved-wp-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--azure);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    position: relative;
    top: -1px;
    margin-left: 4px;
  }

  /* ===== Theme-Toggle ===== */
  .theme-toggle {
    background: white;
    border: 1px solid #DBEAFE;
    color: var(--azure-dark);
    border-radius: 8px;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    cursor: pointer;
  }
  .theme-toggle:hover { border-color: var(--azure); background: #EFF6FF; }
  .theme-toggle .icon-sun { display: none; }
  .theme-toggle .icon-moon { display: inline; }
  [data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
  [data-theme="dark"] .theme-toggle .icon-moon { display: none; }

  /* ===== Sprach-Toggle ===== */
  .lang-toggle {
    background: white;
    border: 1px solid #DBEAFE;
    color: var(--azure-dark);
    border-radius: 8px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.15s;
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    line-height: 1;
    min-width: 56px;
  }
  .lang-toggle:hover { border-color: var(--azure); background: #EFF6FF; }
  .lang-toggle .lang-current { font-weight: 700; }
  .lang-toggle .lang-sep { color: #94A3B8; font-weight: 500; }
  .lang-toggle .lang-other { color: #94A3B8; font-weight: 500; }
  [data-theme="dark"] .lang-toggle { background: #1F2937; color: var(--azure-dark); border-color: #374151; }
  [data-theme="dark"] .lang-toggle:hover { background: #1E293B; border-color: var(--azure); }

  /* ===== Dark Mode ===== */
  [data-theme="dark"] {
    --sky-1: #0B1220;
    --sky-2: #111827;
    --sky-3: #1E293B;
    --azure: #60A5FA;
    --azure-dark: #93C5FD;
    --azure-mid: #3B82F6;
    --azure-light: #60A5FA;
    --ink: #E5E7EB;
    --paper: #0B1220;
  }
  [data-theme="dark"] body { background: var(--paper); color: var(--ink); }
  [data-theme="dark"] .paper-bg {
    background-image:
      radial-gradient(at 90% 0%, rgba(59,130,246,0.15) 0%, transparent 40%),
      radial-gradient(at 0% 100%, rgba(30,64,175,0.18) 0%, transparent 50%),
      radial-gradient(at 50% 50%, rgba(15,23,42,0.4) 0%, transparent 70%);
  }

  /* Header / Sektionen / Karten / Modale: dunkle Flächen */
  [data-theme="dark"] header.sticky { background: rgba(15,23,42,0.85) !important; border-color: #1F2937 !important; }
  [data-theme="dark"] .bg-white { background-color: #111827 !important; }
  [data-theme="dark"] .bg-white\/90 { background-color: rgba(17,24,39,0.9) !important; }
  [data-theme="dark"] .bg-white\/70 { background-color: rgba(17,24,39,0.7) !important; }
  [data-theme="dark"] .bg-gray-50 { background-color: #1F2937 !important; }
  [data-theme="dark"] .border-gray-200 { border-color: #1F2937 !important; }
  [data-theme="dark"] .border-gray-300 { border-color: #374151 !important; }

  /* Texte / Tailwind-Hilfsklassen */
  [data-theme="dark"] .text-gray-500,
  [data-theme="dark"] .text-gray-700 { color: #9CA3AF !important; }
  [data-theme="dark"] .text-gray-800,
  [data-theme="dark"] .text-gray-900 { color: var(--ink) !important; }
  [data-theme="dark"] .text-gray-400 { color: #94A3B8 !important; }
  [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
  [data-theme="dark"] label, [data-theme="dark"] p, [data-theme="dark"] span,
  [data-theme="dark"] th, [data-theme="dark"] td { color: var(--ink); }

  /* Inputs */
  [data-theme="dark"] input[type="text"],
  [data-theme="dark"] input[type="number"],
  [data-theme="dark"] input[type="time"],
  [data-theme="dark"] input[type="datetime-local"] {
    background-color: #1F2937;
    color: var(--ink);
    border-color: #374151;
  }
  [data-theme="dark"] input::placeholder { color: #6B7280; }

  /* Suggest-Liste */
  [data-theme="dark"] .suggest-list { background: #111827; border-color: #1F2937; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
  [data-theme="dark"] .suggest-list button { color: var(--ink); border-bottom-color: #1F2937; }
  [data-theme="dark"] .suggest-list button:hover { background: #1E3A8A; }

  [data-theme="dark"] .suggest-ctx-menu { background: #111827; border-color: #1F2937; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
  [data-theme="dark"] .suggest-ctx-menu .suggest-ctx-item { color: var(--ink); }
  [data-theme="dark"] .suggest-ctx-menu .suggest-ctx-item:hover { background: #1E3A8A; }

  /* Buttons */
  [data-theme="dark"] .btn-secondary { background: #1F2937; color: var(--azure-dark); border-color: #374151; }
  [data-theme="dark"] .btn-secondary:hover { background: #1E293B; border-color: var(--azure); }
  [data-theme="dark"] .btn-secondary.active-pill { background: var(--azure); color: #0B1220; border-color: var(--azure); }
  [data-theme="dark"] .btn-icon { background: #1F2937; color: var(--azure-dark); border-color: #374151; }
  [data-theme="dark"] .btn-icon:hover { background: #1E293B; border-color: var(--azure); }
  [data-theme="dark"] .map-ctrl-btn { background: #1F2937; color: var(--azure-dark); border-color: #374151; }
  [data-theme="dark"] .map-ctrl-btn:hover { background: #1E293B; border-color: var(--azure); }
  [data-theme="dark"] .map-ctrl-btn.is-active {
    background: var(--azure);
    color: white;
    border-color: #60A5FA;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.35);
  }
  [data-theme="dark"] .map-ctrl-btn.is-active:hover {
    background: var(--azure-dark);
    color: white;
  }
  [data-theme="dark"] .waypoint-drop-zone { border-color: #374151; color: #93C5FD; background: #1F2937; }
  [data-theme="dark"] .waypoint-drop-zone:hover, [data-theme="dark"] .waypoint-drop-zone.drag-over { border-color: var(--azure); background: #1E293B; }
  [data-theme="dark"] .waypoint-formats-hint { color: #64748B; }
  [data-theme="dark"] .waypoint-status { background: #1F2937; color: #93C5FD; }
  [data-theme="dark"] .waypoint-clear-btn { border-color: #374151; color: #F87171; }
  [data-theme="dark"] .waypoint-clear-btn:hover { background: #7F1D1D; border-color: #991B1B; }
  [data-theme="dark"] .waypoint-manual-textarea { background: #1F2937; color: #93C5FD; border-color: #374151; }
  [data-theme="dark"] .waypoint-manual-textarea:focus { border-color: var(--azure); }
  [data-theme="dark"] .waypoint-manual-textarea::placeholder { color: #64748B; }
  [data-theme="dark"] .waypoint-manual-hint { color: #64748B; }
  [data-theme="dark"] .waypoint-manual-error { color: #F87171; }
  [data-theme="dark"] .theme-toggle { background: #1F2937; color: var(--azure-dark); border-color: #374151; }
  [data-theme="dark"] .theme-toggle:hover { background: #1E293B; border-color: var(--azure); }

  /* Toggle-Track (Einheit, Mode-Pills) */
  [data-theme="dark"] .toggle-track { background: #1F2937; }
  [data-theme="dark"] .toggle-track button { color: #9CA3AF; }
  [data-theme="dark"] .toggle-track button.active { background: var(--azure); color: #0B1220; }
  [data-theme="dark"] .mode-pills { background: #1F2937; }
  [data-theme="dark"] .mode-pills button { color: #9CA3AF; }
  [data-theme="dark"] .mode-pills button.active { background: #111827; color: var(--azure-dark); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }

  /* Höhen / Stepper */
  [data-theme="dark"] .alt-card { background: #111827; border-color: #1F2937; }
  [data-theme="dark"] .alt-card:hover { border-color: var(--azure); box-shadow: 0 2px 8px rgba(59,130,246,0.18); }
  [data-theme="dark"] .anchor-badge { background: #1E3A8A; color: #DBEAFE; border-color: #2563EB; }
  [data-theme="dark"] .alt-step-btn,
  [data-theme="dark"] .time-step-btn { background: #1E293B; border-color: #374151; color: var(--azure-dark); }
  [data-theme="dark"] .alt-step-btn:hover,
  [data-theme="dark"] .time-step-btn:hover { background: var(--azure); color: #0B1220; border-color: var(--azure); }
  [data-theme="dark"] .alt-ref-toggle { border-color: #1F2937; }
  [data-theme="dark"] .alt-ref-btn { background: #111827; color: var(--azure-dark); border-left-color: #1F2937; }
  [data-theme="dark"] .alt-ref-btn.is-active { background: var(--azure); color: #0B1220; }
  [data-theme="dark"] .time-stepper-row { background: #111827; border-color: #1F2937; }
  [data-theme="dark"] .time-stepper-row.scrolling { background: #1E293B; border-color: var(--azure); }
  [data-theme="dark"] .time-stepper-display:hover { background: #1F2937; }
  [data-theme="dark"] .time-stepper-label { color: #94A3B8; }

  /* Brand-Badge / Feedback-Chip */
  [data-theme="dark"] .brand-badge { background: linear-gradient(135deg, #1E293B 0%, #1E3A8A 100%); border-color: #1E3A8A; color: var(--azure-dark); }
  [data-theme="dark"] .feedback-chip { background: #1E293B; border-color: #1E3A8A; color: var(--azure-dark); }
  [data-theme="dark"] .feedback-chip:hover { background: var(--azure); color: #0B1220; border-color: var(--azure); }

  /* Saved Waypoints (dark) */
  [data-theme="dark"] .saved-wp-row { background: #1F2937; border-color: #374151; }
  [data-theme="dark"] .saved-wp-row:hover { background: #1E293B; border-color: var(--azure); }
  [data-theme="dark"] .saved-wp-row.is-active { background: #14532D; border-color: #16A34A; }
  [data-theme="dark"] .saved-wp-row.is-active:hover { background: #166534; border-color: #15803D; }
  [data-theme="dark"] .saved-wp-row .check { border-color: #4B5563; }
  [data-theme="dark"] .saved-wp-row.is-active .check { background: #16A34A; border-color: #16A34A; }
  [data-theme="dark"] .saved-wp-row .meta { color: #9CA3AF; }
  [data-theme="dark"] .saved-wp-delete { background: #1F2937; border-color: #374151; }
  [data-theme="dark"] .saved-wp-delete:hover { background: #1E293B; border-color: #DC2626; }

  /* Warnungen */
  [data-theme="dark"] .warn-card { background: rgba(245,158,11,0.15); }
  [data-theme="dark"] .warn-ok { background: rgba(5,150,105,0.15); }
  [data-theme="dark"] .warn-info { background: rgba(37,99,235,0.15); }
  [data-theme="dark"] .warn-alert { background: rgba(220,38,38,0.18); }

  /* Scrollbar */
  [data-theme="dark"] .scroll-thin::-webkit-scrollbar-thumb { background: #374151; }

  /* Result-Tabelle */
  [data-theme="dark"] .result-table th { color: #94A3B8; }
  [data-theme="dark"] .result-table td { border-bottom-color: #1F2937; }
  [data-theme="dark"] thead.bg-gray-50 { background-color: #1F2937 !important; }

  /* Modal */
  [data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,0.7); }
  [data-theme="dark"] .modal-card { background: #111827; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
  [data-theme="dark"] .modal-header { border-bottom-color: #1F2937; }
  [data-theme="dark"] .modal-footer { background: #0F172A; border-top-color: #1F2937; }
  [data-theme="dark"] .scenario-row { background: #111827; border-color: #1F2937; }
  [data-theme="dark"] .scenario-row:hover, [data-theme="dark"] .scenario-row:focus-visible { background: #1E293B; border-color: var(--azure); }
  [data-theme="dark"] .scenario-row .name { color: var(--azure-dark); }
  [data-theme="dark"] .scenario-row .meta { color: #9CA3AF; }
  [data-theme="dark"] .scenario-share { background: #1F2937; border-color: #1E3A8A; color: var(--azure-dark); }
  [data-theme="dark"] .scenario-share:hover { background: #1E293B; border-color: var(--azure); }
  [data-theme="dark"] .scenario-delete { background: #1F2937; border-color: #7F1D1D; color: #FCA5A5; }
  [data-theme="dark"] .scenario-delete:hover { background: rgba(220,38,38,0.2); border-color: #DC2626; }

  /* Loading-Overlay */
  [data-theme="dark"] #loadingOverlay { background-color: rgba(11,18,32,0.7) !important; }

  /* Klickbarer Landeort: Navigation starten */
  .landing-nav-link {
    color: var(--azure);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
  }
  .landing-nav-link:hover, .landing-nav-link:focus-visible {
    color: var(--azure-dark);
    text-decoration-style: solid;
    outline: none;
  }
  .landing-nav-link::before {
    content: "🚗";
    font-size: 0.95em;
    text-decoration: none;
    display: inline-block;
  }
  [data-theme="dark"] .landing-nav-link { color: #93C5FD; }
  [data-theme="dark"] .landing-nav-link:hover, [data-theme="dark"] .landing-nav-link:focus-visible { color: #DBEAFE; }

  /* Karte (Leaflet) im Dark Mode leicht abdunkeln */
  [data-theme="dark"] .leaflet-tile { filter: brightness(0.78) saturate(0.85) hue-rotate(-8deg); }
  [data-theme="dark"] .leaflet-tile.leaflet-tile-satellite,
  [data-theme="dark"] .leaflet-tile-satellite .leaflet-tile { filter: none; }
  [data-theme="dark"] .leaflet-container { background: #0B1220; }

  /* Desktop-Layout (Standard) */
  .trajectory-controls {
    display: flex;
    flex-direction: row;
    gap: 20px;
  }

  /* Handy-Optimierung */
  @media (max-width: 768px) {
    .trajectory-controls {
      flex-direction: column;        /* alles untereinander */
      gap: 12px;
    }

    .map-container {
      height: 70vh;                  /* mehr Platz für die Karte */
    }

    button, input, select {
      font-size: 18px;               /* größere Touch-Ziele */
      padding: 14px 20px;
    }

    .update-modal { max-width: 92vw; }
  }

  /* =============================================================
     Update / Changelog Modal
     ============================================================= */
  .update-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
  }
  .update-modal-overlay[hidden] { display: none; }
  .update-modal {
    background: #fff; border-radius: 14px; max-width: 460px; width: 100%;
    box-shadow: 0 18px 50px rgba(15,23,42,0.35);
    border: 1px solid #e5e7eb;
    display: flex; flex-direction: column; max-height: 85vh;
  }
  .update-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid #e5e7eb;
  }
  .update-modal-head h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; }
  .update-modal-close {
    font-size: 22px; line-height: 1; background: transparent; border: 0; color: #6b7280;
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .update-modal-close:hover { background: #f3f4f6; color: var(--ink); }
  .update-modal-body {
    padding: 14px 16px; overflow-y: auto; font-size: 0.875rem; color: var(--ink);
  }
  .update-rev { margin-bottom: 14px; }
  .update-rev:last-child { margin-bottom: 0; }
  .update-rev-date {
    font-size: 0.72rem; font-weight: 700; color: var(--azure);
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;
  }
  .update-modal-body ul { list-style: disc; padding-left: 1.1rem; margin: 0; }
  .update-modal-body ul li { margin: 2px 0; }
  .update-empty { color: #6b7280; font-style: italic; }
  .update-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 16px; border-top: 1px solid #e5e7eb;
  }
  [data-theme="dark"] .update-modal { background: #111827; border-color: #1f2937; }
  [data-theme="dark"] .update-modal-head { border-color: #1f2937; }
  [data-theme="dark"] .update-modal-foot { border-color: #1f2937; }
  [data-theme="dark"] .update-modal-head h3 { color: #f3f4f6; }
  [data-theme="dark"] .update-modal-body { color: #e5e7eb; }
  [data-theme="dark"] .update-modal-close { color: #9ca3af; }
  [data-theme="dark"] .update-modal-close:hover { background: #1f2937; color: #f3f4f6; }
  [data-theme="dark"] .update-empty { color: #9ca3af; }

  /* Badge auf dem Update-Button, wenn neue Änderungen vorliegen */
  #update-btn { position: relative; }
  #update-btn.has-update::after {
    content: '';
    position: absolute;
    top: -2px; right: -2px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 2px #fff;
  }
  [data-theme="dark"] #update-btn.has-update::after { box-shadow: 0 0 0 2px #0b1220; }

  @media (max-width: 480px) {
    .prediction-panel {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 12px 12px 0 0;  /* schönes mobiles Design */
    }
  }

  /* NOTAM-Panel (per Klick auf den NOTAM-Button auf der Karte eingeblendet). */
  .notam-panel {
    position: absolute;
    top: 56px;
    right: 12px;
    z-index: 410;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    font-size: 13px;
    color: #1f2937;
  }
  .notam-panel.hidden { display: none; }
  .notam-panel h4 {
    font-weight: 700; font-size: 14px;
    margin: 0 0 4px;
    display: flex; align-items: center; gap: 6px;
  }
  .notam-panel .notam-sub {
    font-size: 12px; color: #6b7280; margin-bottom: 10px;
  }
  .notam-panel .notam-row {
    display: flex; gap: 6px; margin-top: 8px;
  }
  .notam-panel .notam-row input {
    flex: 1 1 auto;
    border: 1px solid #D1D5DB; border-radius: 6px;
    padding: 6px 8px; font-size: 13px; min-width: 0;
  }
  .notam-panel .notam-row input:focus {
    outline: 2px solid #1E3A8A; outline-offset: 1px;
  }
  .notam-panel .notam-actions {
    display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap;
  }
  .notam-panel button.notam-btn {
    border: 1px solid #D1D5DB; background: #F9FAFB; color: #1f2937;
    border-radius: 6px; padding: 6px 10px; font-size: 13px;
    cursor: pointer;
  }
  .notam-panel button.notam-btn.primary {
    border-color: #1E3A8A; background: #1E3A8A; color: white;
  }
  .notam-panel button.notam-btn.primary:disabled {
    opacity: 0.6; cursor: progress;
  }
  .notam-panel button.notam-btn:hover { filter: brightness(0.96); }
  .notam-panel .notam-status {
    font-size: 12px; margin-top: 8px;
    padding: 6px 8px; border-radius: 6px;
    background: #F3F4F6; color: #374151;
  }
  .notam-panel .notam-status.error { background: #FEE2E2; color: #991B1B; }
  .notam-panel .notam-status.ok    { background: #DCFCE7; color: #14532D; }

  /* Ergebnis der Best-Hour-Suche im Zeitfenster-Modus */
  #windowResult.ok    { background: #DCFCE7; color: #14532D; border: 1px solid #86EFAC; }
  #windowResult.warn  { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
  [data-theme="dark"] #windowResult.ok    { background: #14532D; color: #DCFCE7; border-color: #166534; }
  [data-theme="dark"] #windowResult.warn  { background: #78350F; color: #FEF3C7; border-color: #92400E; }

  /* Thermikfenster-Anzeige (informativ, nicht wertend) */
  #thermalWindowDisplay {
    background: #F0F9FF; color: #0C4A6E; border: 1px solid #BAE6FD;
    border-radius: 6px; padding: 6px 10px;
    display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  }
  #thermalWindowDisplay .label { font-weight: 600; }
  #thermalWindowDisplay .conflict {
    color: #991B1B; font-weight: 600;
    background: #FEE2E2; padding: 1px 6px; border-radius: 4px;
  }
  [data-theme="dark"] #thermalWindowDisplay {
    background: #0C2540; color: #BAE6FD; border-color: #075985;
  }
  [data-theme="dark"] #thermalWindowDisplay .conflict {
    background: #7F1D1D; color: #FEE2E2;
  }
  .notam-panel .notam-list {
    margin-top: 8px;
    display: flex; flex-direction: column; gap: 6px;
  }
  .notam-panel .notam-item {
    border: 1px solid #E5E7EB; border-radius: 6px;
    padding: 6px 8px; background: #FFFFFF;
  }
  .notam-panel .notam-item .head {
    font-weight: 600; font-size: 12.5px; margin-bottom: 2px;
    display: flex; gap: 6px; flex-wrap: wrap;
  }
  .notam-panel .notam-item .head .dist {
    margin-left: auto; color: #6b7280; font-weight: 500;
  }
  .notam-panel .notam-item .meta {
    font-size: 11.5px; color: #6b7280;
  }
  .notam-panel .notam-item .text {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 11.5px;
    white-space: pre-wrap; word-break: break-word;
    margin-top: 4px;
    color: #111827;
  }
  .notam-panel .notam-item .notam-title {
    font-weight: 600; font-size: 13px; color: #111827; margin-top: 2px;
  }
  .notam-panel .notam-item .notam-summary {
    font-size: 12.5px; color: #1F2937; margin-top: 2px; line-height: 1.4;
  }
  .notam-panel .notam-item details.notam-raw {
    margin-top: 6px; font-size: 11px;
  }
  .notam-panel .notam-item details.notam-raw summary {
    cursor: pointer; color: #6b7280; user-select: none;
  }
  .notam-panel .notam-item details.notam-raw[open] summary { color: #1E40AF; }
  .notam-panel .notam-item details.notam-raw pre {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    white-space: pre-wrap; word-break: break-word;
    margin: 4px 0 0; padding: 6px 8px;
    background: #F9FAFB; border-radius: 4px;
    color: #111827; font-size: 11px;
  }

  /* Severity-Buckets */
  .notam-panel .notam-section { margin-top: 10px; }
  .notam-panel .notam-section h4 {
    margin: 0 0 6px; font-size: 13px; font-weight: 700;
    display: flex; align-items: center; gap: 6px;
  }
  .notam-panel .notam-section.sev-red    h4 { color: #B91C1C; }
  .notam-panel .notam-section.sev-yellow h4 { color: #B45309; }
  .notam-panel .notam-section.sev-green  h4 { color: #166534; }
  .notam-panel .notam-section.sev-other  h4 { color: #6b7280; }
  .notam-panel .notam-section.sev-red    .notam-item { border-left: 3px solid #B91C1C; }
  .notam-panel .notam-section.sev-yellow .notam-item { border-left: 3px solid #D97706; }
  .notam-panel .notam-section.sev-green  .notam-item { border-left: 3px solid #16A34A; }
  .notam-panel .notam-section .notam-item + .notam-item { margin-top: 4px; }
  .notam-panel .notam-disclaimer {
    margin-top: 10px; padding-top: 8px;
    border-top: 1px dashed #E5E7EB;
    font-size: 11px; color: #6b7280;
  }
  .notam-panel a { color: #1E40AF; text-decoration: underline; }

  .notam-panel .notam-advanced { margin-top: 8px; }
  .notam-panel .notam-advanced-toggle {
    background: none; border: none; padding: 4px 0;
    color: #1E40AF; font-size: 11px; font-weight: 600;
    cursor: pointer; text-decoration: underline;
  }
  .notam-panel .notam-advanced-toggle:hover { color: #1E3A8A; }
  .notam-panel .notam-advanced-body.hidden { display: none; }
  .notam-panel .notam-advanced-body { margin-top: 6px; }
  [data-theme="dark"] .notam-panel .notam-advanced-toggle { color: #93C5FD; }
  [data-theme="dark"] .notam-panel .notam-advanced-toggle:hover { color: #BFDBFE; }

  .notam-marker {
    background: #B91C1C;
    color: #FFFFFF;
    border-radius: 50%;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    line-height: 1;
  }

  [data-theme="dark"] .notam-panel {
    background: #111827; border-color: #1f2937; color: #E5E7EB;
  }
  [data-theme="dark"] .notam-panel .notam-sub { color: #9CA3AF; }
  [data-theme="dark"] .notam-panel .notam-row input {
    background: #0b1220; border-color: #1f2937; color: #F9FAFB;
  }
  [data-theme="dark"] .notam-panel button.notam-btn {
    background: #1f2937; color: #F3F4F6; border-color: #374151;
  }
  [data-theme="dark"] .notam-panel button.notam-btn.primary {
    background: #2563eb; border-color: #2563eb;
  }
  [data-theme="dark"] .notam-panel .notam-status { background: #1f2937; color: #F3F4F6; }
  [data-theme="dark"] .notam-panel .notam-status.error { background: #7f1d1d; color: #FEE2E2; }
  [data-theme="dark"] .notam-panel .notam-status.ok { background: #14532d; color: #DCFCE7; }
  [data-theme="dark"] .notam-panel .notam-item { background: #0b1220; border-color: #1f2937; }
  [data-theme="dark"] .notam-panel .notam-item .text { color: #F3F4F6; }
  [data-theme="dark"] .notam-panel .notam-item .meta { color: #9CA3AF; }
  [data-theme="dark"] .notam-panel .notam-item .notam-title { color: #F3F4F6; }
  [data-theme="dark"] .notam-panel .notam-item .notam-summary { color: #E5E7EB; }
  [data-theme="dark"] .notam-panel .notam-item details.notam-raw pre {
    background: #111827; color: #F3F4F6;
  }
  [data-theme="dark"] .notam-panel .notam-section.sev-red    h4 { color: #FCA5A5; }
  [data-theme="dark"] .notam-panel .notam-section.sev-yellow h4 { color: #FCD34D; }
  [data-theme="dark"] .notam-panel .notam-section.sev-green  h4 { color: #86EFAC; }
  [data-theme="dark"] .notam-panel .notam-disclaimer { color: #9CA3AF; border-color: #1f2937; }

  @media (max-width: 480px) {
    .notam-panel {
      top: 12px; left: 12px; right: 12px; width: auto;
      max-height: calc(100vh - 24px);
    }
  }

  /* Flugvorbereitung – externe Deeplinks zu pc_met / DFS / Tragkraftplaner. */
  .flight-prep-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .flight-prep-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 10px 14px;
    background: white;
    border: 1px solid #DBEAFE;
    border-radius: 10px;
    color: var(--azure-dark);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .flight-prep-btn:focus-visible {
    outline: 2px solid var(--azure);
    outline-offset: 2px;
  }
  .flight-prep-btn .fp-emoji {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
  }
  .flight-prep-btn .fp-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }
  .flight-prep-btn .fp-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--azure-dark);
    line-height: 1.2;
  }
  .flight-prep-btn .fp-hint {
    font-size: 11px;
    color: #6B7280;
    margin-top: 2px;
    line-height: 1.3;
  }
  .flight-prep-btn .fp-ext {
    font-size: 14px;
    color: #9CA3AF;
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
  }
  @media (hover: hover) {
    .flight-prep-btn:hover {
      border-color: var(--azure);
      background: #EFF6FF;
    }
    .flight-prep-btn:hover .fp-ext {
      color: var(--azure);
      transform: translate(1px, -1px);
    }
  }
  .flight-prep-btn:active {
    transform: translateY(1px);
  }
  .flight-prep-disclaimer {
    margin-top: 10px;
    font-size: 11px;
    color: #6B7280;
    line-height: 1.4;
  }
  [data-theme="dark"] .flight-prep-btn {
    background: #111827;
    border-color: #1F2937;
    color: #DBEAFE;
  }
  [data-theme="dark"] .flight-prep-btn .fp-label { color: #DBEAFE; }
  [data-theme="dark"] .flight-prep-btn .fp-hint { color: #9CA3AF; }
  [data-theme="dark"] .flight-prep-btn .fp-ext { color: #6B7280; }
  @media (hover: hover) {
    [data-theme="dark"] .flight-prep-btn:hover {
      background: #1E293B;
      border-color: var(--azure);
    }
    [data-theme="dark"] .flight-prep-btn:hover .fp-ext { color: var(--azure-light); }
  }
  [data-theme="dark"] .flight-prep-disclaimer { color: #9CA3AF; }

  /* =============================================================
     Restore-Banner für letzte Session (Auto-Save)
     ============================================================= */
  .restore-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; margin: 0 0 12px 0;
    background: #EFF6FF; border: 1px solid #BFDBFE;
    border-radius: 12px; font-size: 13px; color: #1E3A8A;
    animation: restoreSlideIn 0.25s ease-out;
  }
  @keyframes restoreSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .restore-banner-icon { font-size: 20px; flex-shrink: 0; line-height: 1; }
  .restore-banner-text { flex: 1; min-width: 0; }
  .restore-banner-title { font-weight: 600; font-size: 13px; line-height: 1.3; }
  .restore-banner-meta {
    font-size: 12px; color: #3B82F6; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .restore-banner-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .restore-banner-btn {
    background: transparent; border: 1px solid #BFDBFE;
    border-radius: 6px; padding: 6px 10px;
    font-size: 12px; font-weight: 500; color: #1E40AF;
    cursor: pointer; font-family: inherit; transition: all 0.15s;
  }
  .restore-banner-btn:hover { background: #DBEAFE; }
  .restore-banner-btn-primary {
    background: #2563EB; color: #fff; border-color: #2563EB;
  }
  .restore-banner-btn-primary:hover { background: #1D4ED8; border-color: #1D4ED8; }
  [data-theme="dark"] .restore-banner {
    background: rgba(37,99,235,0.10); border-color: rgba(37,99,235,0.4); color: #93C5FD;
  }
  [data-theme="dark"] .restore-banner-meta { color: #60A5FA; }
  [data-theme="dark"] .restore-banner-btn {
    background: rgba(15,23,42,0.6); border-color: rgba(37,99,235,0.4); color: #93C5FD;
  }
  [data-theme="dark"] .restore-banner-btn:hover { background: rgba(37,99,235,0.2); }
  [data-theme="dark"] .restore-banner-btn-primary {
    background: #2563EB; color: #fff; border-color: #2563EB;
  }

  /* =============================================================
     Wetterbild-Sektion: Datenquellen-Hinweis
     ============================================================= */
  .source-note {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 10px; padding: 8px 10px;
    background: rgba(30, 64, 175, 0.05);
    border: 1px solid rgba(30, 64, 175, 0.15);
    border-radius: 8px;
    font-size: 11px; color: #475569; line-height: 1.5;
  }
  .source-note-icon {
    color: var(--azure); font-size: 13px; flex-shrink: 0; margin-top: 1px;
  }
  [data-theme="dark"] .source-note {
    background: rgba(96,165,250,0.07); border-color: rgba(96,165,250,0.2); color: #94A3B8;
  }

  /* Cruise-Höhe Sekundär-Info */
  .cruise-secondary-info {
    font-size: 10px; color: #6B7280; line-height: 1.4;
    margin-top: 2px; font-variant-numeric: tabular-nums;
  }
  [data-theme="dark"] .cruise-secondary-info { color: #9CA3AF; }
  .cruise-warn-low {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; color: #B45309; margin-top: 2px;
  }
  [data-theme="dark"] .cruise-warn-low { color: #FBBF24; }

  /* =============================================================
     Prediction/Target Mode-Buttons mit Active-State
     ============================================================= */
  .mode-btn {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    background: #fff;
    color: #374151;
    font-size: 13px; font-weight: 500;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: all 0.15s;
    -webkit-appearance: none;
  }
  .mode-btn:hover { background: #F9FAFB; border-color: #9CA3AF; }
  .mode-btn.active {
    background: #DBEAFE;
    color: #1E40AF;
    border-color: var(--azure);
  }
  [data-theme="dark"] .mode-btn {
    background: #111827; border-color: #1F2937; color: #D1D5DB;
  }
  [data-theme="dark"] .mode-btn:hover {
    background: #1F2937; border-color: #374151;
  }
  [data-theme="dark"] .mode-btn.active {
    background: rgba(37,99,235,0.20);
    color: var(--azure-light);
    border-color: var(--azure);
  }

  /* Target-Hinweis-Box */
  .target-hint {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: #F3F4F6;
    border: 1px dashed #9CA3AF;
    border-radius: 8px;
    font-size: 12px; color: #4B5563; line-height: 1.4;
  }
  [data-theme="dark"] .target-hint {
    background: #111827; border-color: #374151; color: #9CA3AF;
  }
  .target-hint-icon { font-size: 16px; flex-shrink: 0; }

  /* Output-Preview im Target-Modus */
  .output-preview {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 12px; color: #6B7280;
    margin-top: 6px;
  }
  .output-preview .out-key { color: #374151; font-weight: 500; }
  .output-preview .out-val { font-style: italic; }
  [data-theme="dark"] .output-preview {
    background: #111827; border-color: #1F2937; color: #9CA3AF;
  }
  [data-theme="dark"] .output-preview .out-key { color: #D1D5DB; }

  /* Quick-Time-Chips für die Startzeit */
  .quick-time-row {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
  }
  .quick-time-chip {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #D1D5DB;
    background: #fff;
    color: #4B5563;
    font-size: 11px; font-weight: 500;
    cursor: pointer; font-family: inherit;
    font-variant-numeric: tabular-nums;
    -webkit-appearance: none;
    transition: all 0.15s;
  }
  .quick-time-chip:hover { background: #F9FAFB; border-color: #9CA3AF; }
  .quick-time-chip.active {
    background: var(--azure);
    color: #fff;
    border-color: var(--azure);
  }
  [data-theme="dark"] .quick-time-chip {
    background: #111827; border-color: #1F2937; color: #D1D5DB;
  }
  [data-theme="dark"] .quick-time-chip:hover {
    background: #1F2937; border-color: #374151;
  }
  [data-theme="dark"] .quick-time-chip.active {
    background: var(--azure); color: #0B1220; border-color: var(--azure);
  }

  /* ── Below-Map Quick-Calc Boxes ── */
  .below-map-calc {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
  }
  .bmc-box {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  [data-theme="dark"] .bmc-box {
    background: #0B1220;
    border-color: #1F2937;
  }
  .bmc-box .bmc-title {
    font-size: 13px;
    font-weight: 600;
    color: #1E40AF;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  [data-theme="dark"] .bmc-box .bmc-title {
    color: var(--azure-light);
  }
  .bmc-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .bmc-row label {
    font-size: 11px;
    color: #6B7280;
    white-space: nowrap;
    min-width: 72px;
  }
  [data-theme="dark"] .bmc-row label {
    color: #9CA3AF;
  }
  .bmc-row .prediction-stepper {
    height: 36px;
    flex: 1;
    min-width: 0;
  }
  .bmc-row .prediction-stepper-btn {
    width: 36px;
    min-width: 36px;
    font-size: 18px;
  }
  .bmc-row .prediction-stepper-input {
    width: 60px;
    font-size: 14px;
  }
  .bmc-row .bmc-unit {
    font-size: 11px;
    color: #9CA3AF;
    white-space: nowrap;
  }
  .bmc-prediction-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
    align-items: start;
  }
  .bmc-prediction-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .bmc-prediction-col label {
    font-size: 11px;
    color: #6B7280;
    white-space: nowrap;
  }
  [data-theme="dark"] .bmc-prediction-col label {
    color: #9CA3AF;
  }
  .bmc-prediction-col .prediction-stepper {
    height: 36px;
  }
  .bmc-prediction-col .prediction-stepper-btn {
    width: 36px;
    min-width: 36px;
    font-size: 18px;
  }
  .bmc-prediction-col .prediction-stepper-input {
    width: 50px;
    font-size: 13px;
  }
  .bmc-prediction-col .bmc-unit {
    font-size: 10px;
    color: #9CA3AF;
    white-space: nowrap;
  }
  .bmc-unit-row {
    display: flex;
    gap: 4px;
  }
  .bmc-calc-btn {
    background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 0.12s, box-shadow 0.12s;
    width: 100%;
  }
  .bmc-calc-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(30,64,175,0.35); }
  .bmc-calc-btn:active { transform: translateY(0); }
  .bmc-calc-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
  .bmc-target-info {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #F3F4F6;
    border: 1px dashed #9CA3AF;
    border-radius: 8px;
  }
  [data-theme="dark"] .bmc-target-info {
    background: #111827;
    border-color: #374151;
    color: #9CA3AF;
  }
  .bmc-contextmenu-hint {
    font-size: 12px;
    color: #6B7280;
    text-align: center;
    padding: 8px 12px;
  }
  [data-theme="dark"] .bmc-contextmenu-hint {
    color: #9CA3AF;
  }
  .bmc-mode-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .bmc-mode-btns .mode-btn {
    padding: 7px 10px;
    font-size: 12px;
  }