:root { --bg:#f4f6f8; --card:#ffffff; --card-2:#f8f9fa; --text:#212529; --muted:#6c757d; --primary:#004b87; --accent:#ff9800; --activity:#2e7d32; --border:#dee2e6; --shadow:0 10px 25px rgba(0,0,0,.08); }
body.dark { --bg:#121212; --card:#1e1e1e; --card-2:#2d2d2d; --text:#e9ecef; --muted:#adb5bd; --primary:#7cc2ff; --accent:#ffb74d; --activity:#81c784; --border:#343a40; --shadow:0 10px 25px rgba(0,0,0,.3); }
body.dark .leaflet-layer { filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%); }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system, sans-serif; background:var(--bg); color:var(--text); transition:.25s ease; padding-bottom: 95px; }

header { background:linear-gradient(135deg, var(--primary), #182f5f); color:#fff; padding:15px 15px 20px; text-align:center; box-shadow:var(--shadow); position:relative; }
.header-top { display:flex; justify-content:space-between; margin-bottom:10px; align-items:center; }
header h1 { margin:5px 0 2px; font-size:1.4rem; line-height:1.2; }
.header-btn { border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.14); color:#fff; padding:6px 12px; border-radius:10px; cursor:pointer; font-weight:600; font-size:0.8rem; }
.header-meta { font-size: 0.65rem; color: rgba(255,255,255,0.7); }
.header-clocks { display: flex; justify-content: center; gap: 10px; margin: 10px 0; }
.clock-box { background: rgba(0,0,0,0.25); padding: 5px 10px; border-radius: 8px; font-size: 0.85rem; font-family: monospace; border: 1px solid rgba(255,255,255,0.1); }
.countdown-box { background:rgba(255,255,255,0.2); display:inline-block; padding:6px 14px; border-radius:20px; font-size:0.95rem; border:1px solid rgba(255,255,255,0.4); font-variant-numeric: tabular-nums;}
.polarsteps-btn { display:inline-block; background:rgba(255,255,255,0.15); color:#fff; border:1px solid rgba(255,255,255,0.4); padding:8px 16px; border-radius:999px; font-weight:700; text-decoration:none; font-size:0.85rem; }

.container { max-width:980px; margin:20px auto; padding:0 16px 20px; }
.section-card { background:var(--card); border-left:5px solid var(--primary); border-radius:16px; margin-bottom:18px; box-shadow:var(--shadow); overflow:hidden; }
.section-toggle { width:100%; border:none; background:transparent; color:var(--text); padding:16px 22px; text-align:left; display:flex; justify-content:space-between; font-size:1.05rem; font-weight:700; cursor:pointer; align-items:center; }
.section-toggle .chev { transition:transform .2s ease; color:var(--primary); }
.section-card.collapsed .chev { transform:rotate(-90deg); }
.section-body { padding:0 22px 22px; }
.section-card.collapsed .section-body { display:none; }

.order-controls { display: flex; gap: 4px; margin-right: 15px; }
.order-controls button { background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; color: var(--muted); font-size: 1.1rem; cursor: pointer; transition: 0.2s; }
.order-controls button:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.flex-center { display: flex; align-items: center; }
.timeline { position:relative; padding-left:24px; }
.timeline:before { content:''; position:absolute; left:6px; top:0; bottom:0; width:2px; background:var(--primary); }
.timeline-item { position:relative; margin-bottom:25px; transition: opacity 0.3s; }
.timeline-item::before { content:''; position:absolute; left:-24px; top:7px; width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid var(--card); }
.timeline-date { font-weight:700; color:var(--primary); font-size:1.05rem; margin-bottom:6px; padding-right:30px;}
.timeline-content { background:var(--card-2); border:1px solid var(--border); padding:16px; border-radius:12px; line-height: 1.5; }

.hide-btn { position:absolute; right:0; top:-5px; background:transparent; border:none; font-size:1.4rem; color:var(--muted); cursor:pointer; padding:5px; }
.links { margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.map-link, .action-btn, .btn-live { cursor:pointer; border:1px solid var(--primary); color:var(--primary); font-weight:600; text-decoration:none; background:transparent; padding:6px 12px; border-radius:8px; display:inline-block; font-size:0.85rem; }
.action-btn.secondary { border-color:var(--border); color:var(--text); margin-bottom:6px; }
.muted { color:var(--muted); margin-top:6px; font-size:0.9rem; }
.hl-box { display:block; margin: 8px 0; padding:8px 12px; background:rgba(0, 75, 135, 0.05); border-left:3px solid var(--primary); font-size:0.85rem; border-radius:0 6px 6px 0; }
body.dark .hl-box { background:rgba(0, 75, 135, 0.15); color:#e6edf3; }

.note-wrapper { margin-top:14px; }
.note-actions { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.note-box { width:100%; min-height:50px; padding:10px; border-radius:8px; border:1px dashed var(--border); background:var(--card); color:var(--text); font-size:0.9rem; resize:vertical; font-family:inherit; transition:0.2s; }
.note-box:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,75,135,.1); }
.sync-indicator { font-size: 0.7rem; color: var(--activity); font-weight: bold; opacity: 0; transition: opacity 0.3s; }
.sync-indicator.show { opacity: 1; }

/* FLUG KARTEN */
.flight-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 20px; box-shadow: var(--shadow); position: relative; }
.flight-header { background: var(--card-2); padding: 12px 16px; border-bottom: 1px dashed var(--border); display: flex; justify-content: space-between; align-items: center; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.flight-logo-wrap { width: 40px; height: 40px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); margin-right: 12px; flex-shrink: 0; }
.flight-logo { width: 26px; height: 26px; object-fit: contain; }
.flight-airline-name { font-weight: 800; color: var(--primary); font-size: 1.05rem; display:block; line-height: 1.2; }
.flight-aircraft { font-size: 0.75rem; background: rgba(0,0,0,0.05); padding: 4px 8px; border-radius: 6px; font-weight: bold; text-decoration: none; color: var(--text); }
body.dark .flight-aircraft { background: rgba(255,255,255,0.1); color: #fff;}
.flight-body { padding: 16px; }
.flight-route { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.flight-station-code { font-size: 1.4rem; font-weight: 900; }
.flight-station-time { font-size: 1rem; color: var(--primary); font-weight: bold; margin-top: 4px; }
.flight-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 10px; background: var(--bg); padding: 12px; border-radius: 8px; margin-bottom: 12px; }
.fi-item { text-align: center; display: flex; flex-direction: column;}
.fi-label { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; display: block; font-weight: bold; margin-bottom: 2px;}
.fi-value { font-size: 0.9rem; font-weight: bold; }
.connection-block { text-align: center; padding: 8px; margin: -10px auto 15px; width: 80%; border: 1px dashed var(--primary); border-radius: 12px; background: rgba(0,75,135,0.05); color: var(--primary); font-weight: bold; font-size: 0.85rem; }

/* WETTER & WÄHRUNG */
.weather-card { background:var(--card-2); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:18px; }
.weather-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; border-bottom:1px solid var(--border); padding-bottom:8px; }
.w-section-title { font-size:0.8rem; font-weight:bold; color:var(--muted); text-transform:uppercase; margin-bottom:8px; }
.w-detailed-day { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:10px; margin-bottom:10px; }
.d-date-title { font-weight:bold; color:var(--primary); margin-bottom:8px; font-size:0.9rem; border-bottom:1px dashed var(--border); padding-bottom:4px;}
.w-hourly-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.w-hourly-item { display:flex; flex-direction:column; align-items:center; font-size:0.75rem; text-align:center; background:var(--bg); padding:6px; border-radius:6px; }
.w-daily-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.w-daily-item { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:6px; text-align:center; font-size:0.75rem; }
.metric-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.compare-box { margin-top: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.compare-line { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.input-group { display: flex; flex-direction: column; gap: 6px; min-width: 140px; flex: 1; }
.fx-input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 0.98rem; }

/* SCROLL TO TOP */
#scrollTopBtn {
  display: none; position: fixed; bottom: 80px; right: 20px; z-index: 999;
  background: var(--primary); color: white; border: none; padding: 12px 16px;
  border-radius: 50%; cursor: pointer; box-shadow: var(--shadow); transition: 0.3s;
  font-size: 1.2rem;
}
#scrollTopBtn:hover { background: #182f5f; }

/* TAB BAR */
.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 980px; background: var(--card); box-shadow: 0 -4px 15px rgba(0,0,0,0.1); display: flex; justify-content: space-around; padding: 10px 5px calc(10px + env(safe-area-inset-bottom)); z-index: 1000; border-top: 1px solid var(--border); border-top-left-radius: 16px; border-top-right-radius: 16px; }
@media (max-width: 650px) { .bottom-nav { justify-content: flex-start; overflow-x: auto; border-radius: 0; left: 0; transform: none; max-width: 100%; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } .bottom-nav::-webkit-scrollbar { display: none; } }
.nav-item { display: flex; flex-direction: column; align-items: center; color: var(--muted); text-decoration: none; font-size: 0.7rem; font-weight: 600; background: none; border: none; flex: 0 0 70px; cursor:pointer;}
.nav-item.active { color: var(--primary); transform: translateY(-2px);}
.nav-icon { font-size: 1.3rem; margin-bottom: 3px; }

/* MAP FILTER */
.map-filter-btn { cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: 0.2s; border: 1px solid transparent; user-select: none;}
.map-filter-btn.active { border-color: var(--primary); background: rgba(0,75,135,0.05); font-weight: bold; }
body.dark .map-filter-btn.active { background: rgba(255,255,255,0.1); }

.alert-box { background: #ffebee; border-left: 4px solid #f44336; padding: 12px; border-radius: 4px; font-size: 0.9rem; color: #b71c1c; margin-bottom: 20px; display: none; }
.loader { display: inline-block; border: 2px solid var(--border); border-top: 2px solid var(--primary); border-radius: 50%; width: 14px; height: 14px; animation: spin 1s linear infinite; margin-right: 8px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }