:root{
  color-scheme:dark;
  --bg:#07111d;
  --bg2:#0b1726;
  --card:rgba(22,34,51,.88);
  --card2:rgba(17,28,43,.94);
  --border:rgba(159,191,232,.15);
  --text:#f4f7fb;
  --muted:#9eacc0;
  --accent:#7db9ff;
  --good:#96e6aa;
  --warn:#f4cf78;
  --bad:#ff9c9c;
  --shadow:0 12px 32px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{background:var(--bg);min-height:100%}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 5%, rgba(70,115,175,.18), transparent 25rem),
    radial-gradient(circle at 88% 18%, rgba(75,64,155,.15), transparent 28rem),
    linear-gradient(180deg,var(--bg),#050b13 100%);
}
.stars{
  pointer-events:none;
  position:fixed;inset:0;z-index:-1;opacity:.5;
  background-image:
    radial-gradient(circle at 8% 12%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 20% 25%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 37% 9%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 60% 18%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 82% 8%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 93% 34%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 14% 70%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 48% 62%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 76% 72%,#fff 0 1px,transparent 1.5px);
}
.site-header,main,.tabs,footer{width:min(1200px,calc(100% - 24px));margin-inline:auto}
.site-header{
  display:flex;justify-content:space-between;gap:20px;align-items:flex-end;
  padding:28px 4px 15px
}
h1{font-size:28px;margin:0 0 4px}
h2{font-size:18px;margin:26px 2px 12px}
.site-header p,.updated,.muted,.map-card p,footer{color:var(--muted)}
.site-header p{margin:0;font-size:13px}
.updated{text-align:right;font-size:12px}
.tabs{
  position:sticky;top:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;
  padding:8px;background:rgba(6,14,24,.86);backdrop-filter:blur(18px);
  border:1px solid var(--border);border-radius:17px;box-shadow:var(--shadow)
}
.tab{
  border:0;border-radius:12px;padding:11px 8px;background:transparent;color:var(--muted);
  font-weight:700;cursor:pointer
}
.tab.active{background:rgba(125,185,255,.14);color:var(--text)}
main{padding:4px 0 40px}
.page{display:none}.page.active{display:block}
.cards{display:grid;gap:10px}
.cards.six{grid-template-columns:repeat(6,1fr)}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.targets{grid-template-columns:repeat(3,1fr)}
.card,.panel,.map-card{
  border:1px solid var(--border);
  background:linear-gradient(145deg,var(--card),var(--card2));
  border-radius:17px;box-shadow:var(--shadow)
}
.card{min-height:96px;padding:13px;display:grid;grid-template-columns:42px 1fr;gap:8px;align-items:center}
.card .icon{font-size:28px;text-align:center}
.card .name{font-size:12px;font-weight:700;color:#dce6f3}
.card .value{font-size:19px;font-weight:800;margin-top:2px}
.card .label{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.35}
.panel{padding:16px;line-height:1.55}
.panel strong{color:#fff}
.panel p{margin:6px 0}
.map-card{padding:10px;text-align:center;overflow:hidden}
.map-card img{display:block;width:100%;max-height:720px;object-fit:contain;border-radius:11px;background:#0b0b0b}
.map-card p{font-size:11px;margin:8px 0 1px}
.target{min-height:116px}
.target .value{font-size:14px}
.target .label{font-size:11px}
.quality-good{color:var(--good)}
.quality-warn{color:var(--warn)}
.quality-bad{color:var(--bad)}
.weather-hero{display:flex;justify-content:space-between;gap:18px;align-items:center}
.weather-big{font-size:34px;font-weight:800}
.weather-side{text-align:right}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--border)}
th{color:#dce6f3}
footer{
  display:flex;justify-content:space-between;gap:15px;
  padding:18px 4px 30px;font-size:11px
}
.error{
  margin-top:20px;padding:15px;border:1px solid rgba(255,120,120,.3);
  border-radius:14px;background:rgba(120,20,20,.15)
}
@media(max-width:1000px){
  .cards.six{grid-template-columns:repeat(3,1fr)}
  .cards.targets{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:699px){
  .site-header{align-items:flex-start;flex-direction:column;padding-top:18px}
  .updated{text-align:left}
  .tabs{grid-template-columns:repeat(2,1fr);position:relative}
  .cards.six,.cards.three,.cards.two,.cards.targets{grid-template-columns:repeat(2,1fr)}
  .target{grid-column:span 2}
  .weather-hero{align-items:flex-start;flex-direction:column}
  .weather-side{text-align:left}
  .table-wrap{overflow-x:auto}
}
@media(max-width:430px){
  .cards.three{grid-template-columns:repeat(2,1fr)}
  .card{padding:11px;grid-template-columns:36px 1fr}
  .card .icon{font-size:24px}
  .card .value{font-size:17px}
  h1{font-size:24px}
}

/* ======================================================================
   HEMEL - SKYFIELD / SKY TONIGHT WEBVERSIE
   ====================================================================== */
.sky-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  align-items:start;
  margin-top:18px;
}
.astro-panel{
  border:1px solid var(--border);
  background:linear-gradient(145deg,var(--card),var(--card2));
  border-radius:17px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.astro-panel-title{
  padding:16px 16px 8px;
  font-size:18px;
  font-weight:800;
}
.sky-canvas-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:420px;
  padding:0 8px 8px;
  background:radial-gradient(circle at 50% 45%,rgba(124,139,175,.32),rgba(59,68,91,.55) 55%,rgba(31,40,57,.72));
}
#skyfield-canvas{
  display:block;
  max-width:100%;
  height:auto;
}
.sky-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  padding:10px 14px 5px;
  font-size:11px;
  color:var(--muted);
}
.sky-legend span{display:inline-flex;align-items:center;gap:6px}
.sky-legend i{
  width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--c,#fff);
  box-shadow:0 0 0 1px rgba(255,255,255,.25);
}
.sky-note{
  color:var(--muted);
  font-size:10px;
  padding:4px 14px 14px;
}
.sky-tabs{
  display:flex;
  gap:2px;
  overflow-x:auto;
  margin:0 14px;
  padding:2px 0 8px;
  border-bottom:1px solid var(--border);
  scrollbar-width:thin;
}
.sky-tab{
  white-space:nowrap;
  flex:0 0 auto;
  padding:9px 10px;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.sky-tab.active{
  color:var(--text);
  border-bottom-color:#fff;
}
.sky-tonight-content{
  padding:12px 14px 14px;
  display:grid;
  gap:9px;
  max-height:700px;
  overflow-y:auto;
}
.sky-object-row{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 22px;
  gap:10px;
  align-items:center;
  padding:12px 10px;
  border-radius:12px;
  background:rgba(45,64,90,.62);
  border:1px solid rgba(255,255,255,.04);
}
.sky-object-type{font-size:9px;color:#aebbd0;margin-bottom:2px}
.sky-object-name{font-size:15px;font-weight:800;margin-bottom:4px}
.sky-object-data,.sky-object-extra{font-size:10px;line-height:1.45;color:#eef3fb}
.sky-object-extra{color:#b9c9dd;margin-top:2px}
.sky-object-actions{font-size:16px;line-height:2.15;text-align:center;color:#fff;opacity:.95}
.planet-icon{
  width:48px;height:48px;border-radius:50%;position:relative;overflow:visible;
  box-shadow:inset -10px -7px 14px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.28);
}
.planet-icon span{display:block;width:100%;height:100%;border-radius:inherit}
.planet-icon.sun span{background:radial-gradient(circle at 35% 30%,#fff0a8 0 6%,#ffd54a 25%,#ff9800 64%,#d35400 100%)}
.planet-icon.moon span{background:radial-gradient(circle at 34% 30%,#eee 0 18%,#cfd2d4 45%,#888 100%)}
.planet-icon.mercury span{background:radial-gradient(circle at 32% 30%,#baa795,#8e7362 70%,#5e493e)}
.planet-icon.venus span{background:radial-gradient(circle at 30% 28%,#fff1bf,#d8c89d 66%,#9a8c6e)}
.planet-icon.mars span{background:radial-gradient(circle at 30% 25%,#e97a4a,#a73d22 65%,#5c1e14)}
.planet-icon.jupiter span{background:repeating-linear-gradient(0deg,#d8b18b 0 7px,#b67e5f 7px 11px,#ead0af 11px 17px)}
.planet-icon.saturn span{background:radial-gradient(circle at 30% 28%,#f1d596,#b5965c 72%,#725d3d)}
.planet-icon.saturn:after{content:"";position:absolute;left:-8px;right:-8px;top:19px;height:9px;border:3px solid #ccb98a;border-radius:50%;transform:rotate(-14deg);opacity:.9}
.planet-icon.uranus span{background:radial-gradient(circle at 30% 25%,#d5ffff,#71d5df 70%,#3b8995)}
.planet-icon.neptune span{background:radial-gradient(circle at 30% 25%,#87a7ff,#3e61bf 70%,#25336d)}
.event-row{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px;
  align-items:center;
  padding:12px;
  border-radius:12px;
  background:rgba(45,64,90,.62);
  font-size:11px;
  line-height:1.5;
}
.event-row strong{display:block;font-size:13px;margin-bottom:2px}
.event-icon{font-size:27px;text-align:center}
.sky-widget-error,.sky-empty{padding:14px;color:var(--muted);font-size:12px}

@media(max-width:950px){
  .sky-grid{grid-template-columns:1fr}
  .sky-canvas-wrap{min-height:360px}
  .sky-tonight-content{max-height:none}
}
@media(max-width:520px){
  .astro-panel-title{font-size:16px}
  .sky-canvas-wrap{min-height:300px;padding:0}
  .sky-object-row{grid-template-columns:44px minmax(0,1fr) 18px;padding:10px 8px}
  .planet-icon{width:40px;height:40px}
  .planet-icon.saturn:after{top:15px}
  .sky-tabs{margin-inline:10px}
  .sky-tonight-content{padding:10px}
}