:root{--bg:#07111f;--panel:#101d30;--panel2:#14243a;--text:#eaf2ff;--muted:#9fb0c7;--accent:#2d9cff;--orange:#ff9f1c;--green:#2ec27e;--blue:#3da5ff;--red:#ff4d4d}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#06101d,#0b1626);color:var(--text)}
header{padding:22px;background:#09182b;border-bottom:1px solid rgba(255,255,255,.08)}.header-row{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
h1{margin:0;font-size:28px}.subtitle{color:var(--muted);margin-top:6px}
nav{display:flex;gap:10px;flex-wrap:wrap;padding:14px 20px;background:#0c1b2f;position:sticky;top:0;z-index:5}
nav button,.btn{background:#152a46;color:var(--text);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 14px;cursor:pointer}
nav button.active,.btn.primary{background:var(--accent);color:white}
main{padding:20px;max-width:1500px;margin:auto}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-6{grid-column:span 6}.span-12{grid-column:span 12}
.value{font-size:34px;font-weight:bold;margin:8px 0}.unit{font-size:18px;color:var(--muted)}.small{color:var(--muted);font-size:14px}
canvas{width:100%!important;max-height:360px}.kpi-orange{border-left:5px solid var(--orange)}.kpi-blue{border-left:5px solid var(--blue)}.kpi-green{border-left:5px solid var(--green)}.kpi-red{border-left:5px solid var(--red)}
.hidden{display:none}input,select{background:#09182b;color:var(--text);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:10px;margin:4px}
table{width:100%;border-collapse:collapse}td,th{padding:10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.mapbox{position:relative;min-height:420px;background:#0a1627;border-radius:14px;overflow:hidden}.mapbox a{display:block}.mapbox img{width:100%;height:420px;object-fit:cover;opacity:.95;cursor:zoom-in}.map-error{padding:20px;color:white}
.location-dot{position:absolute;width:14px;height:14px;background:#ff3030;border:3px solid white;border-radius:50%;box-shadow:0 0 14px #ff3030;z-index:3;pointer-events:none}
.dot-pressure{left:50%;top:57%}.dot-500{left:49%;top:60%}
.wind-canvas{height:360px!important;max-height:360px}.station-pill{display:inline-block;padding:6px 10px;border-radius:999px;margin:4px;background:#203653}
.sunmoon-head{display:flex;gap:18px;align-items:center}.sun-icon{font-size:62px;line-height:1}.big-time{font-size:48px;font-weight:800}.moon-img{width:92px!important;height:92px!important;border-radius:50%;box-shadow:0 0 20px rgba(255,255,255,.18)}
.top-note{color:#d8e7ff;text-align:right}.moon-card-text{font-size:22px;font-weight:700}.moon-sub{color:#cbd7e8;margin-top:6px;font-size:16px}
.sky-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.sky-canvas{height:680px!important;max-height:680px;background:radial-gradient(circle at 50% 50%,#10294a 0%,#06101d 70%,#02060b 100%);border-radius:14px;border:1px solid rgba(255,255,255,.08)}
.horizon-canvas{height:320px!important;max-height:320px;background:linear-gradient(180deg,#0c1b33,#05080d);border-radius:14px;border:1px solid rgba(255,255,255,.08)}
.badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#203653;margin:3px;color:#dfefff}.badge.good{background:#14532d}.badge.mid{background:#854d0e}.badge.bad{background:#7f1d1d}
.obj-star{color:#fff7c2}.obj-planet{color:#ffd27a}.obj-moon{color:#dbeafe}
@media(max-width:900px){.span-3,.span-4,.span-6{grid-column:span 12}h1{font-size:22px}.big-time{font-size:36px}.sky-canvas{height:460px!important}}

/* V1.5: Wetterkarten ohne Ortspunkte */
.location-dot,
.location-label {
  display: none !important;
}

/* Tagesfarben für Diagramm-Legende */
.day-legend {
  margin-top: 8px;
}
.day-chip {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  margin-right: 6px;
  font-size: 13px;
}
.day-today { background: #14532d; color: #dcfce7; }
.day-yesterday { background: #1e3a8a; color: #dbeafe; }
.day-older { background: #525252; color: #f5f5f5; }


/* V1.7 Sonne & Mond Design */
.sunmoon-card {
  position: relative;
  overflow: hidden;
  min-height: 156px;
}

.sunmoon-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 50%, rgba(255,159,28,.16), transparent 32%),
              radial-gradient(circle at 80% 20%, rgba(45,156,255,.10), transparent 35%);
  pointer-events: none;
}

.sunmoon-head {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 24px;
  align-items: center;
}

.sun-graphic,
.sunset-graphic {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
}

.big-time.sun-time {
  color: #ff9f1c;
  font-size: 54px;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 0 0 24px rgba(255,159,28,.22);
}

.moon-img {
  width: 104px !important;
  height: 104px !important;
  flex: 0 0 104px;
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(255,255,255,.18);
}

.moon-card-text {
  font-size: 28px;
  line-height: 1.15;
}

.moon-sub {
  font-size: 18px;
}

.phase-band {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 30px;
  margin-top: 12px;
  border-radius: 8px;
  overflow: hidden;
  background: #0c2a49;
}

.phase-band div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.phase-past { background: rgba(45,156,255,.28); color: #93c5fd; }
.phase-today { background: rgba(34,197,94,.45); color: #bbf7d0; border-left: 1px dashed rgba(255,255,255,.6); border-right: 1px dashed rgba(255,255,255,.6); }
.phase-future { background: rgba(45,156,255,.28); color: #93c5fd; }

.sunpath-canvas,
.moonpath-canvas {
  height: 330px !important;
  max-height: 330px !important;
  background: linear-gradient(180deg, rgba(9,24,43,.8), rgba(4,12,22,.92));
  border-radius: 14px;
}

.path-info {
  font-size: 17px;
  line-height: 1.6;
  color: #eaf2ff;
}

.path-info strong {
  color: #fff;
}

@media(max-width:900px){
  .big-time.sun-time{font-size:40px}
  .sun-graphic,.sunset-graphic{width:72px;height:72px;flex-basis:72px}
  .moon-img{width:82px!important;height:82px!important;flex-basis:82px}
}

/* V1.8 Intervall-Dashboard */
.interval-bar{background:linear-gradient(180deg,#101d30,#14243a);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 18px;margin:0 0 16px 0;display:flex;gap:18px;align-items:center;flex-wrap:wrap;box-shadow:0 10px 24px rgba(0,0,0,.24)}
.interval-title{font-weight:800;font-size:18px;color:#eaf2ff;margin-right:10px}
.interval-buttons{display:flex;gap:10px;flex-wrap:wrap}
.interval-btn{background:#152a46;color:#d8e7ff;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:12px 18px;font-weight:700;font-size:15px;cursor:pointer;min-width:112px}
.interval-btn:hover{background:#1e3a5f}
.interval-btn.active{background:linear-gradient(180deg,#2d9cff,#0876df);color:white;box-shadow:0 0 18px rgba(45,156,255,.28)}
.dashboard-footer{display:flex;gap:28px;flex-wrap:wrap;color:#d8e7ff;align-items:center;margin-top:16px}
.status-pill{background:rgba(34,197,94,.22);color:#86efac;padding:4px 10px;border-radius:999px;font-weight:700}
.day-legend{margin:8px 0 12px 0}
.day-chip{display:inline-block;padding:4px 9px;border-radius:999px;margin-right:6px;font-size:13px}
.day-today{background:#14532d;color:#dcfce7}.day-yesterday{background:#1e3a8a;color:#dbeafe}.day-older{background:#525252;color:#f5f5f5}