* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Bodenwind-Pfeile ───────────────────────────────── */
.xc-wind-icon { background: none !important; border: none !important; text-align: center; line-height: 1; }
.xc-wind-arrow { font-size: 14px; line-height: 1; text-shadow: 0 0 3px #000, 0 0 3px #000; display: block; }
.xc-wind-label { font-size: 9px; font-weight: bold; text-shadow: 0 0 2px #000, 0 0 2px #000; display: block; text-align: center; margin-top: 1px; }

/* ── Login ───────────────────────────────────────────── */
#login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
#login-overlay.hidden { display: none; }

#login-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2.5rem 2rem;
  width: 320px;
  text-align: center;
}

#login-logo { font-size: 1.6rem; font-weight: 700; margin-bottom: 1.75rem; }
#login-form { display: flex; flex-direction: column; gap: 0.75rem; }

#login-form input {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.6rem 0.9rem;
  color: var(--text); font-size: 0.9rem; outline: none;
}
#login-form input:focus { border-color: var(--accent); }

#login-form button {
  background: var(--accent); color: #fff; border: none;
  border-radius: 8px; padding: 0.65rem; font-size: 0.95rem;
  cursor: pointer; font-weight: 600; margin-top: 0.25rem;
  transition: background 0.15s;
}
#login-form button:hover { background: #50b5f0; }
#login-error { font-size: 0.8rem; color: #dc2626; min-height: 1.1rem; }

#login-remember-label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--text-dim); cursor: pointer;
  user-select: none;
}
#login-remember-label input[type="checkbox"] {
  width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent);
}

/* ── Einstellungen Modal ─────────────────────────────── */
#settings-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}
#settings-overlay.hidden { display: none; }

#settings-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; width: 360px; max-width: 95vw;
  max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
}
#settings-body {
  overflow-y: auto; flex: 1;
}
#settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 0.95rem;
}
#settings-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 1rem; cursor: pointer; line-height: 1;
}
#settings-close:hover { color: var(--text); }

.settings-section { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; border-bottom: 1px solid var(--border); }
.settings-section:last-of-type { border-bottom: none; }
.settings-section-title { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
#homespot-current { font-size: 0.8rem; color: var(--text-dim); }
.settings-toggle { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.88rem; }
.settings-toggle input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--accent); cursor: pointer; }
.scoring-row { display: flex; flex-direction: column; gap: 0.3rem; }
.sc-label-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8rem; color: var(--text-dim); }
.sc-vals { display: flex; align-items: baseline; gap: 0.3rem; font-size: 0.78rem; }
.sc-vals span { color: var(--accent); font-weight: 600; }
.sc-pts-label { color: var(--text-dim) !important; font-weight: 400 !important; font-size: 0.72rem !important; }
.sc-sep { color: var(--text-dim) !important; font-weight: 400 !important; }
.scoring-slider-wrap { display: flex; align-items: center; gap: 0.6rem; }
.sc-reset-btn { margin-top: 0.5rem; padding: 0.3rem 0.8rem; font-size: 0.78rem; background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim); cursor: pointer; }
.sc-reset-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Dual-Range Slider (Windgramm-Zeit) ──────────────── */
.dual-range-wrap {
  position: relative;
  height: 24px;
  margin: 0.5rem 0 0.1rem;
}
.dual-range-track {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  pointer-events: none;
}
.dual-range-fill {
  position: absolute;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.dual-range-thumb {
  position: absolute;
  width: 100%;
  top: 0; left: 0;
  margin: 0; padding: 0;
  height: 24px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
}
.dual-range-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0 0 1px var(--accent);
}
.dual-range-thumb::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  cursor: pointer;
  pointer-events: auto;
}
.dual-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text);
  font-weight: 500;
}

#homespot-search-wrap { position: relative; }
#homespot-input {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.55rem 0.9rem;
  color: var(--text); font-size: 0.88rem; outline: none;
}
#homespot-input:focus { border-color: var(--accent); }
#homespot-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; margin-top: 3px; list-style: none;
  max-height: 180px; overflow-y: auto;
}
#homespot-results li {
  padding: 0.5rem 0.9rem; font-size: 0.82rem; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
#homespot-results li:last-child { border-bottom: none; }
#homespot-results li:hover { background: var(--bg); }

.konto-subsection { display: flex; flex-direction: column; gap: 0.45rem; }
.konto-subsection + .konto-subsection { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--border); }
.konto-label { font-size: 0.78rem; color: var(--text-dim); }
.konto-input {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.5rem 0.85rem;
  color: var(--text); font-size: 0.86rem; outline: none; box-sizing: border-box;
}
.konto-input:focus { border-color: var(--accent); }
.konto-btn {
  align-self: flex-start; padding: 0.35rem 0.85rem; font-size: 0.8rem;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-dim); cursor: pointer;
}
.konto-btn:hover { border-color: var(--accent); color: var(--accent); }
.konto-msg { font-size: 0.78rem; min-height: 1em; margin: 0; }

#settings-footer {
  padding: 1rem 1.25rem; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 0.75rem;
}
#settings-save {
  background: var(--accent); color: #fff; border: none;
  border-radius: 8px; padding: 0.5rem 1.2rem; font-size: 0.88rem;
  cursor: pointer; font-weight: 600; transition: background 0.15s;
}
#settings-save:hover { background: #2563eb; }
#settings-msg { font-size: 0.8rem; }

/* ── Logout ───────────────────────────────────────────── */
#logout-btn {
  background: transparent; border: 1px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.7); border-radius: 6px;
  padding: 0.25rem 0.6rem; font-size: 0.78rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
#logout-btn:hover { border-color: rgba(255,255,255,0.7); color: #fff; }
.logout-icon { flex-shrink: 0; }

/* ── Theme-Variablen ─────────────────────────────────── */
:root {
  --bg:       #e6eef8;
  --surface:  #ffffff;
  --border:   #c2d0e4;
  --text:     #1a2840;
  --text-dim: #5a7090;
  --accent:   #3b82f6;
  --score-great: hsl(200, 75%, 40%);
  --score-good:  hsl(120, 60%, 34%);
  --score-ok:    hsl(45,  80%, 40%);
  --score-bad:   hsl(15,  75%, 46%);
  --score-none:  #64748b;
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ──────────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1.25rem;
  background: #1d3a6e;
  border-bottom: none;
  flex-shrink: 0;
  color: #fff;
}
.logo { font-size: 1.1rem; font-weight: 700; cursor: pointer; user-select: none; color: #fff; }
.logo:hover { opacity: 0.8; }
#spot-name { font-size: 0.85rem; color: rgba(255,255,255,0.65); cursor: pointer; }
#spot-name:hover { color: #fff; }

/* ── Spot-Suche ──────────────────────────────────────── */
#search-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: rgba(255,255,255,0.65); padding: 0 0.4rem;
  line-height: 1;
}
#search-btn:hover { color: #fff; }
#locate-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; color: rgba(255,255,255,0.65); padding: 0 0.4rem;
  line-height: 1;
}
#locate-btn:hover { color: #fff; }
#locate-btn.locating { color: #93c5fd; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
#search-box {
  position: relative;
}
#search-input {
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
  color: #fff; border-radius: 6px;
  padding: 0.25rem 0.6rem; font-size: 0.85rem;
  width: 180px; outline: none;
}
#search-input::placeholder { color: rgba(255,255,255,0.5); }
#search-input:focus { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.2); }
#search-results {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; list-style: none; margin: 0; padding: 0;
  width: 260px; z-index: 9999; max-height: 220px; overflow-y: auto;
}
#search-results li {
  padding: 0.45rem 0.75rem; cursor: pointer; font-size: 0.82rem;
  color: var(--text-dim); border-bottom: 1px solid var(--border);
}
#search-results li:last-child { border-bottom: none; }
#search-results li:hover { background: var(--bg); color: var(--text); }

/* ── Tagesleiste ─────────────────────────────────────── */
#day-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#day-cards-bar {
  display: flex;
  flex: 1;
  gap: 0.5rem;
}

#grid-status {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-style: italic;
  white-space: nowrap;
}

.bar-card {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.bar-card:hover  { border-color: #93afd0; background: #d8e5f5; }
.bar-card.active { border-color: var(--accent); background: #dbeafe; }

.bar-card-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.bar-card-info { flex: 1; min-width: 0; }
.bar-date    { font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.bar-summary { font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; }

.bar-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.1rem 0;
  font-size: 0.62rem;
  color: var(--text-dim);
  margin-top: 0.12rem;
  line-height: 1.2;
}
.bar-card-meta span { display: flex; align-items: center; gap: 0.1rem; white-space: nowrap; }

/* ── Score-Badges ────────────────────────────────────── */
.score-badge {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; font-weight: 700;
  flex-shrink: 0;
}
.score-great { background: var(--score-great); color: #fff; }
.score-good  { background: var(--score-good);  color: #fff; }
.score-ok    { background: var(--score-ok);    color: #fff; }
.score-bad   { background: var(--score-bad);   color: #fff; }
.score-none  { background: var(--score-none);  color: #fff; }

/* ── Gewitter-Badges ─────────────────────────────────── */
.risk-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
  align-self: flex-start;
}
.risk-low    { background: #dcfce7; color: #15803d; }
.risk-medium { background: #fef3c7; color: #92400e; }
.risk-high   { background: #fee2e2; color: #b91c1c; }

/* ── Stündliches Hover-Popup ─────────────────────────── */
#hourly-popup {
  position: fixed;
  z-index: 2000;
  background: rgba(255,255,255,0.97);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  min-width: 300px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  pointer-events: none;
}
#hourly-popup-title {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  color: var(--text);
}

/* ── Stündliche Zeilen ───────────────────────────────── */
.hour-row {
  display: grid;
  grid-template-columns: 48px 1fr 52px 58px;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
}
.hour-time  { color: var(--text-dim); }
.hour-wind  { color: var(--text-dim); text-align: right; }
.hour-cloud { color: var(--text-dim); text-align: right; }

.score-bar-wrap {
  background: #c2d0e4;
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
}
.score-bar { height: 100%; border-radius: 4px; }

/* ── Windgramm-Panel (rechts neben der Karte) ────────── */
#windgram-panel {
  flex: none;
  width: max-content;
  min-width: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#windgram-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
  flex-shrink: 0;
}
.wg-tabs { display: flex; gap: 0; overflow-x: auto; flex-shrink: 1; }
.wg-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); cursor: pointer;
  font-size: 0.72rem; font-weight: 600;
  padding: 0.15rem 0.45rem; white-space: nowrap; flex-shrink: 0;
}
.wg-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.wg-tab:hover:not(.active) { color: var(--text); }

#windgram-close {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 0.8rem; padding: 0 0.2rem;
}
#windgram-close:hover { color: var(--text); }
.wg-temp-val { font-size: 0.68rem; font-weight: 500; color: var(--text); }

/* ── Wolkengramm ─────────────────────────────────────── */
.wg-cloud-label { flex-direction: column; align-items: flex-end; gap: 0; height: 30px; }
.wg-cloud-name  { font-size: 0.65rem; font-weight: 600; color: var(--text); }
.wg-cloud-sub   { font-size: 0.58rem; color: var(--text-dim); }
.wg-cloud-sep   { border-bottom: 1px solid rgba(100,116,139,0.35); }
.wg-cloud-cell  { flex-direction: column; gap: 0; justify-content: center; height: 30px; }
.wg-okta        { font-size: 0.65rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.wg-cloud-pct   { font-size: 0.58rem; color: var(--text-dim); line-height: 1.1; }
#windgram-container { overflow: visible; flex: 1; display: flex; align-items: stretch; }

/* ── Desktop: alle 3 Diagramme gestapelt ────────────── */
@media (min-width: 769px) {
  #wg-resize-handle { display: none; }
  .wg-tabs { display: none; }
  #windgram-container {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: visible;
    align-items: stretch;
  }
  .wg-section { flex-shrink: 0; display: flex; flex-direction: column; }
  .wg-section-title {
    font-size: 0.68rem; font-weight: 700; color: var(--text-dim);
    padding: 0.2rem 0.5rem;
    background: rgba(0,0,0,0.05);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .wg-section-body { display: flex; align-items: stretch; overflow: hidden; }
  .wg-section-sep  { height: 0; }
}

.wg-labels-col {
  flex-shrink: 0; width: 44px;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--surface);
  z-index: 2;
}

.wg-scroll-area { flex: none; overflow-x: visible; overflow-y: hidden; }
@media (max-width: 768px) {
  .wg-scroll-area { flex: 1; overflow-x: auto; }
}

.wg-table { display: inline-flex; flex-direction: column; min-width: 100%; }
.wg-row   { display: flex; }

.wg-label-cell {
  width: 44px; min-width: 44px; height: 28px;
  font-size: 0.58rem; color: var(--text-dim);
  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;
  padding-bottom: 2px;
  padding-right: 0.3rem; text-align: right;
}
.wg-label-header { height: 18px; }
.wg-label-thermal { height: 22px; }
.wg-header-cell {
  width: 48px; min-width: 48px; height: 18px;
  font-size: 0.58rem; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid rgba(0,0,0,0.07);
}
.wg-cell {
  width: 48px; min-width: 48px; height: 28px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  border-right: 1px solid rgba(0,0,0,0.07);
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.wg-arrow { font-size: 0.82rem; display: inline-block; line-height: 1; }
.wg-speed { font-size: 0.58rem; color: var(--text); line-height: 1; }

.wg-thermal-row .wg-cell { height: 22px; }
.wg-cb { font-size: 0.6rem; color: #000; }

/* ── Stunden-Score-Heatmap ───────────────────────────── */
.wg-sc-score-row .wg-cell,
.wg-sc-score-cell { height: 36px; }

.wg-sc-score-val {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  line-height: 1;
}

.wg-sc-label-score {
  height: 36px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-dim);
}

.wg-sc-param { height: 28px; }

.wg-sc-val {
  font-size: 0.67rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}

.wg-sc-bold { font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }

.wg-sc-danger .wg-sc-val { color: #fff; }

.wg-sc-sep {
  height: 3px;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Karte ───────────────────────────────────────────── */
main { display: flex; flex: 1; overflow: hidden; }

#map-container { flex: 1; min-width: 0; position: relative; }
#map { width: 100%; height: 100%; }

#layer-time-slider {
  position: absolute;
  bottom: 3.2rem; left: 50%;
  transform: translateX(-50%);
  background: rgba(29,58,110,0.88);
  border-radius: 20px;
  padding: 0.35rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  z-index: 1000;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
#layer-time-label {
  color: #fff;
  font-size: 0.85rem;
  font-weight: bold;
  min-width: 3rem;
  text-align: center;
}
#layer-time-prev, #layer-time-next {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
#layer-time-prev:hover, #layer-time-next:hover {
  background: rgba(255,255,255,0.28);
}
#layer-time-prev:disabled, #layer-time-next:disabled {
  opacity: 0.3;
  cursor: default;
}

#map-hint {
  position: absolute;
  bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  background: rgba(29,58,110,0.82);
  color: #fff;
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 1000;
}

/* ── Diverses ────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Leaflet Overrides ───────────────────────────────── */
.leaflet-popup-content-wrapper {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.leaflet-popup-tip { background: var(--surface); }

.nuts-tooltip {
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.nuts-tooltip strong { display: block; margin-bottom: 0.1rem; }
.dhv-tooltip {
  background: rgba(255,255,255,0.97);
  border: 1px solid #f97316;
  color: var(--text);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.55rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  white-space: nowrap;
}
.tooltip-table { border-collapse: collapse; margin: 0.3rem 0; font-size: 0.75rem; }
.tooltip-table td { padding: 0.1rem 0.4rem 0.1rem 0; white-space: nowrap; }
.tooltip-table td:first-child { color: var(--text-dim); }
.tooltip-table td:last-child  { text-align: right; }

@media (max-width: 768px) {
  .nuts-tooltip { display: none !important; }


  /* Header kompakt — alles in einer Zeile */
  header { padding: 0.4rem 0.75rem; gap: 0.4rem; flex-wrap: nowrap; }

  /* Logo: kompakt, "Neidis " ausblenden */
  .logo { font-size: 0.8rem; flex-shrink: 0; }
  .logo-neidis { display: none; }

  /* Spot-Name füllt den Mittelbereich */
  #spot-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Such-Eingabe schmaler */
  #search-input { width: 120px; }

  /* Benutzername: nur Zahnrad-Symbol */
  #header-user { font-size: 0 !important; }
  #header-user::after { content: '⚙'; font-size: 0.95rem; color: #8890a4; }

  /* Logout: nur Icon, kein Text */
  .logout-text { display: none; }
  #logout-btn { padding: 0.3rem 0.45rem; }

  /* Tag-Leiste: horizontales Snap-Scroll, eine Karte auf einmal */
  #day-bar { padding: 0 0; gap: 0; }
  #day-cards-bar {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0.3rem 0.6rem;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }
  #day-cards-bar::-webkit-scrollbar { display: none; }

  /* Karte: kompaktes 2-Zeilen-Layout, Breite nur so groß wie nötig */
  .bar-card {
    width: auto;
    min-width: 0;
    max-width: none;
    scroll-snap-align: start;
    flex-shrink: 0;
    flex: none;
    flex-direction: column;
    padding: 0.3rem 0.65rem 0.3rem 0.5rem;
    gap: 0.18rem;
  }
  /* Zeile 1: Badge + Datum (mit Icon) + Summary */
  .bar-card-top { gap: 0.4rem; align-items: center; }
  .score-badge { width: 32px; height: 32px; font-size: 0.8rem; flex-shrink: 0; }
  .bar-date { font-size: 0.8rem; white-space: nowrap; }
  .bar-weather-icon { font-size: 1rem; vertical-align: middle; margin-left: 0.2rem; }
  .bar-summary { font-size: 0.67rem; white-space: nowrap; }
  .bar-card-meta {
    gap: 0.05rem 0.45rem;
    font-size: 0.6rem;
    margin-top: 0.08rem;
  }
  .risk-badge { display: none; } /* Gewitter: als Icon im Datum */

  /* Main: vertikales Layout, kein Scroll — flex teilt den Platz auf */
  main { flex-direction: column; overflow: hidden; }

  /* Kein Panel offen → Karte füllt den gesamten Platz */
  #map-container { flex: 1; min-height: 0; }

  /* Panel offen → Karte feste Höhe, Panel füllt den Rest */
  main.has-panel #map-container { height: 42vh; flex: none; }

  /* Windgramm-Panel */
  #windgram-panel {
    flex: none;
    width: 100%;
    border-left: none;
    border-top: none;
    overflow-y: auto;
  }
  main.has-panel #windgram-panel { flex: 1; min-height: 160px; }

  /* Zeitsteuerung in Titelzeile integriert (kein floating card) */
  #layer-time-slider {
    position: static;
    transform: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    border-radius: 0;
    padding: 0 0.3rem;
    gap: 0.3rem;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
  #layer-time-label { font-size: 0.72rem; min-width: 2.5rem; color: var(--text); }
  #layer-time-prev, #layer-time-next { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.8rem; padding: 0 0.1rem; }

  /* Drag-Handle (nur mobile sichtbar) */
  #wg-resize-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    cursor: ns-resize;
    touch-action: none;
    flex-shrink: 0;
  }
  #wg-resize-bar {
    width: 36px; height: 4px;
    border-radius: 2px;
    background: rgba(0,0,0,0.2);
  }
}

/* ── Stüve-Diagramm ──────────────────────────────────── */
.stuve-canvas { display: block; width: 100%; }

.settings-legal-link {
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
}
.settings-legal-link:hover { text-decoration: underline; }

/* ── Gruppen-Panel ────────────────────────────────────── */
#groups-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-end; justify-content: center;
}
#groups-overlay.hidden { display: none; }
#groups-panel {
  width: 100%; max-width: 520px; height: 88vh;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.18);
}
#grp-v-list, #grp-v-chat, #grp-v-create, #grp-v-members {
  display: flex; flex-direction: column; flex: 1; overflow: hidden;
}
#grp-v-list.hidden, #grp-v-chat.hidden, #grp-v-create.hidden, #grp-v-members.hidden { display: none; }
.grp-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
.grp-bar-title { font-weight: 700; font-size: 1rem; color: var(--text); }
.grp-bar-btn {
  background: none; border: none; color: var(--text-dim);
  font-size: 1.2rem; cursor: pointer; padding: 4px 8px;
  border-radius: 8px; transition: background 0.15s, color 0.15s; min-width: 36px;
}
.grp-bar-btn:hover { background: var(--bg); color: var(--text); }
#grp-list-body { flex: 1; overflow-y: auto; }
.grp-list-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1rem; cursor: pointer;
  border-bottom: 1px solid var(--border); transition: background 0.1s;
}
.grp-list-item:hover { background: var(--bg); }
.grp-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700; flex-shrink: 0;
}
.grp-list-info { flex: 1; min-width: 0; }
.grp-list-name { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.grp-list-preview { font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.grp-unread-dot { width: 10px; height: 10px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }
.grp-empty { padding: 3rem 1.5rem; text-align: center; color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; }
#grp-messages-box {
  flex: 1; overflow-y: auto; padding: 0.75rem 1rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.grp-msg-row { display: flex; flex-direction: column; max-width: 78%; }
.grp-msg-row.own  { align-self: flex-end; align-items: flex-end; }
.grp-msg-row.other { align-self: flex-start; }
.grp-msg-sender { font-size: 0.7rem; color: var(--text-dim); margin-bottom: 2px; padding: 0 4px; }
.grp-msg-bubble { padding: 0.55rem 0.85rem; border-radius: 14px; font-size: 0.88rem; line-height: 1.45; word-break: break-word; }
.grp-msg-row.own   .grp-msg-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.grp-msg-row.other .grp-msg-bubble { background: var(--bg); color: var(--text); border-bottom-left-radius: 4px; }
.grp-msg-time { font-size: 0.68rem; color: var(--text-dim); margin-top: 2px; padding: 0 4px; }
#grp-input-bar {
  display: flex; gap: 0.5rem; padding: 0.75rem 1rem;
  border-top: 1px solid var(--border); flex-shrink: 0; background: var(--surface);
}
#grp-msg-input {
  flex: 1; background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px; padding: 0.55rem 1rem;
  color: var(--text); font-size: 0.9rem; outline: none;
}
#grp-msg-input:focus { border-color: var(--accent); }
#grp-msg-send {
  background: var(--accent); color: #fff; border: none;
  border-radius: 50%; width: 38px; height: 38px; flex-shrink: 0;
  cursor: pointer; font-size: 1.05rem; display: flex;
  align-items: center; justify-content: center; transition: background 0.15s;
}
#grp-msg-send:hover { background: #2563eb; }
.grp-form-body { padding: 1rem 1rem; overflow-y: auto; flex: 1; }
.grp-field-label { font-size: 0.72rem; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 0.4rem; }
.grp-input {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.55rem 0.85rem;
  color: var(--text); font-size: 0.9rem; outline: none; width: 100%;
}
.grp-input:focus { border-color: var(--accent); }
.grp-btn-primary {
  background: var(--accent); color: #fff; border: none;
  border-radius: 8px; padding: 0.6rem 1.25rem;
  font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.15s;
}
.grp-btn-primary:hover { background: #2563eb; }
.grp-btn-secondary {
  background: var(--bg); color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.55rem 0.85rem; font-size: 0.9rem; cursor: pointer;
  transition: border-color 0.15s; white-space: nowrap;
}
.grp-btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.grp-invite-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 10px; font-size: 0.8rem;
}
.grp-invite-chip button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.85rem; line-height: 1; }
#grp-members-body { flex: 1; overflow-y: auto; }
.grp-member-row { display: flex; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); gap: 0.5rem; }
.grp-member-name { flex: 1; font-size: 0.9rem; color: var(--text); }
.grp-member-badge { font-size: 0.7rem; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; }
.grp-member-remove { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; padding: 4px 6px; border-radius: 6px; transition: color 0.15s; }
.grp-member-remove:hover { color: #dc2626; }
#groups-btn {
  position: relative; background: none; border: none;
  color: var(--text-dim); font-size: 1.3rem; cursor: pointer;
  padding: 4px 8px; border-radius: 8px; margin-right: 0.4rem;
  transition: color 0.15s, background 0.15s;
}
#groups-btn:hover { color: var(--text); background: rgba(0,0,0,0.06); }
#groups-badge {
  position: absolute; top: 0px; right: 0px;
  background: #ef4444; color: #fff; border-radius: 50%;
  font-size: 0.58rem; font-weight: 700; width: 15px; height: 15px;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
}

/* ── Desktop: zentriertes Modal statt Bottom-Sheet ── */
@media (min-width: 640px) {
  #groups-overlay {
    align-items: center;
    justify-content: center;
  }
  #groups-panel {
    width: 480px;
    max-width: 480px;
    height: min(720px, 88vh);
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.22);
  }
}

/* ── Flugplanung ──────────────────────────────────────── */
#plan-panel {
  position: fixed; top: 56px; left: 50%; transform: translateX(-50%);
  z-index: 3000; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.28);
  padding: 0.9rem 1.1rem; min-width: 270px; max-width: 340px; display: none;
}
#plan-panel.visible { display: block; }
#plan-panel-title {
  font-size: 0.88rem; font-weight: 600; color: var(--text);
  margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.5rem;
  cursor: grab; user-select: none;
}
#plan-panel-title:active { cursor: grabbing; }
#plan-panel-site { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#plan-close {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 1rem; line-height: 1;
  padding: 2px 5px; border-radius: 5px; flex-shrink: 0;
}
#plan-close:hover { background: rgba(0,0,0,0.08); color: var(--text); }
#plan-back {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 1rem; line-height: 1;
  padding: 2px 5px; border-radius: 5px; flex-shrink: 0;
}
#plan-back:hover { background: rgba(0,0,0,0.08); color: var(--text); }
.plan-type-btns { display: flex; flex-direction: column; gap: 0.4rem; }
.plan-type-btn {
  display: flex; align-items: flex-start; gap: 0.65rem;
  padding: 0.5rem 0.85rem; border: 1px solid var(--border);
  border-radius: 9px; background: var(--bg); color: var(--text);
  font-size: 0.82rem; cursor: pointer; text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.plan-type-btn:hover { background: rgba(99,102,241,0.1); border-color: #6366f1; }
.plan-type-icon { font-size: 1.05rem; margin-top: 1px; }
.plan-type-name { font-weight: 600; font-size: 0.83rem; }
.plan-type-desc { font-size: 0.73rem; color: var(--text-dim); margin-top: 1px; }
#plan-fai-row { display: none; flex-direction: column; gap: 0.55rem; }
#plan-fai-row.visible { display: flex; }
#plan-fai-row label { font-size: 0.78rem; color: var(--text-dim); }
#plan-fai-input-row { display: flex; gap: 0.4rem; align-items: center; }
#plan-fai-km {
  flex: 1; background: var(--bg); border: 1px solid var(--border);
  border-radius: 7px; padding: 0.4rem 0.65rem; color: var(--text); font-size: 0.88rem;
}
#plan-fai-gen {
  padding: 0.4rem 0.8rem; border-radius: 7px;
  background: #6366f1; color: #fff; border: none;
  font-size: 0.82rem; cursor: pointer; white-space: nowrap;
}
#plan-fai-gen:hover { background: #4f46e5; }
#plan-click-hint { display: none; font-size: 0.8rem; color: var(--text-dim); margin-top: 0.45rem; text-align: center; }
#plan-click-hint.visible { display: block; }
#plan-controls { display: none; align-items: center; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
#plan-controls.visible { display: flex; }
.plan-ctrl-btn {
  padding: 0.32rem 0.65rem; border-radius: 7px;
  border: 1px solid #6366f1; color: #6366f1;
  background: none; font-size: 0.82rem; font-weight: 700; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.plan-ctrl-btn:hover { background: #6366f1; color: #fff; }
.plan-ctrl-btn:disabled { opacity: 0.35; cursor: default; }
.plan-save-btn { border-color: #16a34a; color: #16a34a; }
.plan-save-btn:hover { background: #16a34a; color: #fff; }
.plan-speed-wrap { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--text-dim); margin-left: auto; }
#plan-speed {
  width: 50px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.28rem 0.45rem; color: var(--text); font-size: 0.82rem; text-align: center;
}
#plan-info {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 2900;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 0.5rem 1rem; display: none; align-items: center;
  gap: 0.75rem; font-size: 0.82rem; flex-wrap: wrap;
}
#plan-info.visible { display: flex; }
.plan-info-type { font-weight: 600; }
.plan-info-stat { color: var(--text-dim); }
.plan-info-stat b { color: var(--text); }
.plan-info-badge { padding: 2px 8px; border-radius: 20px; font-size: 0.73rem; font-weight: 700; }
.plan-info-badge.ok   { background: #16a34a22; color: #16a34a; }
.plan-info-badge.fail { background: #dc262622; color: #dc2626; }
.plan-wp-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.67rem; font-weight: 700;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 1px 5px rgba(0,0,0,0.45);
  cursor: grab; color: #fff;
}
.plan-wp-icon.start { background: #16a34a; cursor: default; }
.plan-wp-icon.tp    { background: #6366f1; }
.plan-site-popup { min-width: 150px; }
.plan-site-name  { font-weight: 600; font-size: 0.87rem; margin-bottom: 0.55rem; }
.plan-site-btns  { display: flex; flex-direction: column; gap: 0.35rem; }
.plan-popup-btn {
  width: 100%; padding: 0.38rem 0.65rem; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: 0.8rem; cursor: pointer; text-align: left; transition: background 0.12s;
}
.plan-popup-btn:hover { background: rgba(99,102,241,0.1); border-color: #6366f1; }
.plan-popup-btn-plan { border-color: #6366f1; color: #6366f1; }
.plan-popup-btn-plan:hover { background: #6366f1; color: #fff; }

/* ── Flugarchiv-Overlay ─────────────────────────────────────────────────────── */
#archive-overlay {
  position: fixed; inset: 0; z-index: 4500;
  background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center;
}
#archive-overlay.hidden { display: none; }
#archive-panel {
  background: var(--surface); border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  width: min(420px, 94vw); max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
}
#archive-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1rem 0.7rem; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 0.95rem;
}
#archive-close {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
#archive-close:hover { background: rgba(0,0,0,0.08); color: var(--text); }
#archive-list { overflow-y: auto; flex: 1; padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
#archive-empty { text-align: center; color: var(--text-dim); font-size: 0.85rem; padding: 1.5rem; }
.archive-item {
  border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.75rem;
  display: flex; align-items: center; gap: 0.5rem; background: var(--bg);
}
.archive-item-info { flex: 1; min-width: 0; }
.archive-item-name {
  font-size: 0.85rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.archive-item-name:hover { color: #6366f1; }
.archive-item-meta { font-size: 0.75rem; color: var(--text-dim); margin-top: 2px; }
.archive-item-btns { display: flex; gap: 0.3rem; flex-shrink: 0; }
.archive-btn {
  background: none; border: 1px solid var(--border); border-radius: 7px;
  color: var(--text-dim); cursor: pointer; font-size: 0.78rem; padding: 3px 8px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.archive-btn:hover { background: rgba(99,102,241,0.1); border-color: #6366f1; color: #6366f1; }
.archive-btn-del:hover { background: rgba(220,38,38,0.1); border-color: #dc2626; color: #dc2626; }
.archive-item-edit { display: none; width: 100%; margin-top: 0.35rem; }
.archive-item-edit input {
  width: 100%; background: var(--bg); border: 1px solid #6366f1;
  border-radius: 6px; padding: 0.28rem 0.45rem; color: var(--text); font-size: 0.82rem;
}
.plan-popup-btn-archive { border-color: #16a34a; color: #16a34a; }
.plan-popup-btn-archive:hover { background: #16a34a; color: #fff; }
.archive-item-share { margin-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.archive-share-hint { font-size: 0.75rem; color: var(--text-dim); width: 100%; }
.archive-share-grp-btn {
  background: none; border: 1px solid var(--border); border-radius: 20px;
  color: var(--text); cursor: pointer; font-size: 0.75rem; padding: 3px 10px;
  transition: background 0.12s, border-color 0.12s;
}
.archive-share-grp-btn:hover { background: rgba(99,102,241,0.1); border-color: #6366f1; color: #6366f1; }
.archive-share-grp-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Flug-Karte im Gruppen-Chat ─────────────────────────────────────────────── */
.grp-flight-card {
  margin-top: 0.5rem; padding: 0.55rem 0.7rem;
  background: rgba(0,0,0,0.12); border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
}
.grp-msg-row.other .grp-flight-card {
  background: var(--surface); border-color: var(--border);
}
.grp-flight-title { font-weight: 700; font-size: 0.82rem; }
.grp-flight-meta  { font-size: 0.75rem; opacity: 0.85; margin-top: 2px; }
.grp-flight-btns  { display: flex; gap: 0.35rem; margin-top: 0.5rem; }
.grp-flight-btn {
  padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;
  cursor: pointer; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.15);
  color: inherit; transition: background 0.12s;
}
.grp-flight-btn:hover { background: rgba(255,255,255,0.28); }
.grp-flight-btn:disabled { opacity: 0.5; cursor: default; }
.grp-msg-row.other .grp-flight-btn {
  border-color: #6366f1; color: #6366f1; background: none;
}
.grp-msg-row.other .grp-flight-btn:hover { background: rgba(99,102,241,0.1); }