:root{
  --aw-bg:#0b1020;
  --aw-bg-top:#08101e;
  --aw-panel:#131a2b;
  --aw-panel-2:#182238;
  --aw-panel-3:#101727;
  --aw-panel-hover:#172139;

  --aw-text:#eef3fb;
  --aw-muted:#aab6ca;
  --aw-line:#28364f;
  --aw-line-strong:#36577f;

  --aw-accent:#77b7ff;
  --aw-accent-2:#9d87ff;

  --aw-good:#2fc47b;
  --aw-good-text:#5cdaa0;
  --aw-warn:#f0b84b;
  --aw-warn-text:#f3c76d;
  --aw-bad:#ed6673;
  --aw-bad-text:#f17e89;

  --aw-radius-sm:10px;
  --aw-radius-md:14px;
  --aw-radius-lg:17px;

  --aw-shadow-sm:0 5px 18px rgba(0,0,0,.13);
  --aw-shadow-md:0 10px 28px rgba(0,0,0,.16);
  --aw-shadow-nav:0 8px 30px rgba(0,0,0,.20);
}

/* ---------- globale Basis ---------- */

html{
  color-scheme:dark;
  scroll-behavior:smooth;
}

body{
  background:
    radial-gradient(circle at 15% -10%, rgba(67,113,175,.12), transparent 30%),
    linear-gradient(180deg,var(--aw-bg-top),var(--aw-bg) 360px) !important;
  color:var(--aw-text) !important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  line-height:1.45;
}

body,
button,
select,
input{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{
  width:min(96vw,1500px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

h1{
  letter-spacing:-.8px;
  line-height:1.05;
}

h2{
  letter-spacing:-.25px;
  color:var(--aw-text);
}

.muted,
.sub,
.updated,
.hint,
.note,
.source,
.coverage{
  color:var(--aw-muted) !important;
}

/* ---------- gemeinsame Navigation ---------- */

.aw-nav{
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  background:rgba(8,14,28,.94);
  border-bottom:1px solid rgba(40,54,79,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--aw-shadow-nav);
}

.aw-nav-inner{
  width:min(96vw,1500px);
  min-height:66px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:8px 10px;
}

.aw-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--aw-text);
  text-decoration:none;
  flex:0 0 auto;
}

.aw-brand-mark{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:13px;
  font-size:22px;
  background:linear-gradient(135deg,#19345b,#3c5f96);
  border:1px solid rgba(119,183,255,.26);
  box-shadow:0 5px 18px rgba(40,99,164,.22);
}

.aw-brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.aw-brand-text strong{
  font-size:15px;
  letter-spacing:.1px;
}

.aw-brand-text small{
  color:var(--aw-muted);
  font-size:10px;
  margin-top:4px;
}

.aw-nav-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
}

.aw-nav-link{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--aw-muted);
  text-decoration:none;
  padding:9px 11px;
  border-radius:var(--aw-radius-sm);
  border:1px solid transparent;
  font-size:13px;
  font-weight:650;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}

.aw-nav-link:hover{
  color:var(--aw-text);
  background:rgba(24,34,56,.82);
  border-color:var(--aw-line);
  transform:translateY(-1px);
}

.aw-nav-link.active{
  color:#fff;
  background:linear-gradient(180deg,#1d2c48,#17243b);
  border-color:var(--aw-line-strong);
  box-shadow:
    inset 0 -2px 0 var(--aw-accent),
    0 4px 14px rgba(0,0,0,.15);
}

.aw-nav-icon{
  font-size:15px;
  line-height:1;
}

.aw-nav-toggle{
  display:none;
  width:40px;
  height:40px;
  border-radius:var(--aw-radius-sm);
  border:1px solid var(--aw-line);
  background:var(--aw-panel);
  cursor:pointer;
  padding:9px;
}

.aw-nav-toggle span{
  display:block;
  height:2px;
  background:var(--aw-text);
  border-radius:2px;
  margin:4px 0;
}

/* ---------- Header / Metadaten ---------- */

.title,
.titleline{
  gap:14px !important;
}

.logo{
  border:1px solid rgba(119,183,255,.20);
  box-shadow:0 8px 30px rgba(42,100,170,.20) !important;
}

.meta{
  gap:8px !important;
}

.meta span{
  background:rgba(19,26,43,.88) !important;
  border:1px solid var(--aw-line) !important;
  color:var(--aw-muted) !important;
  border-radius:var(--aw-radius-sm) !important;
  box-shadow:0 3px 10px rgba(0,0,0,.07);
}

/* ---------- Karten / Panels ---------- */

.card,
.hero,
.night-card,
.panel,
.window-card,
.season,
.stat,
.legendbox{
  border-color:var(--aw-line) !important;
  box-shadow:var(--aw-shadow-sm);
}

.card{
  background:
    linear-gradient(180deg,rgba(24,34,56,.96),rgba(19,26,43,.96)) !important;
  border-radius:var(--aw-radius-lg) !important;
}

.card:hover{
  border-color:#344866 !important;
}

.hero{
  background:
    linear-gradient(135deg,rgba(24,34,56,.98),rgba(19,26,43,.98)) !important;
  border-radius:18px !important;
}

.panel,
.night-card,
.window-card{
  background:rgba(19,26,43,.95) !important;
  border-radius:var(--aw-radius-lg) !important;
}

.stat,
.season,
.legendbox{
  background:var(--aw-panel-3) !important;
  border-radius:var(--aw-radius-md) !important;
}

.value{
  letter-spacing:-.45px;
}

/* ---------- Toolbar / Auswahlfelder ---------- */

.toolbar,
.tabs{
  background:rgba(16,23,39,.96) !important;
  border:1px solid var(--aw-line) !important;
  border-radius:var(--aw-radius-md) !important;
  box-shadow:var(--aw-shadow-sm);
}

select{
  background:var(--aw-panel-2) !important;
  color:var(--aw-text) !important;
  border:1px solid var(--aw-line) !important;
  border-radius:9px !important;
  outline:none;
}

select:focus{
  border-color:var(--aw-accent) !important;
  box-shadow:0 0 0 3px rgba(119,183,255,.12);
}

.tab-button{
  transition:background .15s ease,color .15s ease,transform .15s ease;
}

.tab-button:hover{
  color:var(--aw-text) !important;
}

.tab-button.active{
  background:linear-gradient(180deg,#1d2c48,#17243b) !important;
  border:1px solid #36577f;
}

/* ---------- Tabellen ---------- */

.table-wrap{
  background:rgba(19,26,43,.97) !important;
  border:1px solid var(--aw-line) !important;
  border-radius:var(--aw-radius-lg) !important;
  box-shadow:var(--aw-shadow-md);
}

table{
  border-collapse:separate !important;
  border-spacing:0 !important;
}

th{
  background:#182238 !important;
  color:#dce6f5 !important;
  font-weight:720;
  letter-spacing:.12px;
}

td,
th{
  border-bottom-color:var(--aw-line) !important;
}

tbody tr{
  transition:background .10s ease;
}

tbody tr:hover td{
  background:var(--aw-panel-hover) !important;
}

tbody tr:last-child td{
  border-bottom:0 !important;
}

/* ---------- Status-Badges ---------- */

.badge{
  border:1px solid transparent;
}

.good{
  background:rgba(47,196,123,.15) !important;
  color:var(--aw-good-text) !important;
  border-color:rgba(47,196,123,.09);
}

.good2{
  background:rgba(108,214,164,.12) !important;
  color:#78dcb3 !important;
  border-color:rgba(108,214,164,.08);
}

.warn{
  background:rgba(240,184,75,.15) !important;
  color:var(--aw-warn-text) !important;
  border-color:rgba(240,184,75,.08);
}

.bad{
  background:rgba(237,102,115,.15) !important;
  color:var(--aw-bad-text) !important;
  border-color:rgba(237,102,115,.08);
}

.neutral{
  background:rgba(255,255,255,.065) !important;
  color:var(--aw-muted) !important;
  border-color:rgba(255,255,255,.035);
}

/* ---------- Ranking / Fortschritt ---------- */

.rank{
  background:linear-gradient(180deg,#20304e,#17243a) !important;
  border:1px solid #314865;
}

.bar{
  background:#090f1a !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}

.bar > span{
  background:linear-gradient(90deg,#315d91,#70b5ff) !important;
}

/* ---------- Prognoseverlaufs-Chart ---------- */

.chart{
  background:
    linear-gradient(180deg,rgba(24,34,56,.22),rgba(19,26,43,.05));
}

.line{
  stroke:var(--aw-accent) !important;
}

.dot{
  fill:#e7f3ff !important;
  stroke:var(--aw-accent) !important;
}

.axis{
  stroke:#526079 !important;
}

.grid{
  stroke:#26334a !important;
}

.svgtext{
  fill:#9eabc0 !important;
}

/* ---------- Links / Fokus ---------- */

a{
  text-underline-offset:2px;
}

a:focus-visible,
button:focus-visible,
select:focus-visible{
  outline:2px solid var(--aw-accent);
  outline-offset:2px;
}

/* ---------- Scrollbars ---------- */

.table-wrap{
  scrollbar-width:thin;
  scrollbar-color:#3b526f #111827;
}

.table-wrap::-webkit-scrollbar{
  height:9px;
  width:9px;
}

.table-wrap::-webkit-scrollbar-track{
  background:#111827;
}

.table-wrap::-webkit-scrollbar-thumb{
  background:#3b526f;
  border-radius:999px;
}

/* ---------- Responsive ---------- */

@media(max-width:1000px){
  .wrap{
    width:min(98vw,1500px) !important;
  }
}

@media(max-width:850px){
  .aw-nav-inner{
    min-height:60px;
    position:relative;
  }

  .aw-brand-text small{
    display:none;
  }

  .aw-nav-toggle{
    display:block;
  }

  .aw-nav-links{
    display:none;
    position:absolute;
    top:58px;
    left:10px;
    right:10px;
    flex-direction:column;
    align-items:stretch;
    background:rgba(13,20,36,.985);
    border:1px solid var(--aw-line);
    border-radius:13px;
    padding:8px;
    box-shadow:0 16px 35px rgba(0,0,0,.35);
  }

  .aw-nav-links.open{
    display:flex;
  }

  .aw-nav-link{
    justify-content:flex-start;
    padding:11px 12px;
  }

  .table-wrap{
    box-shadow:none;
  }
}

@media(max-width:560px){
  h1{
    font-size:30px !important;
  }

  .wrap{
    width:100% !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .aw-brand-mark{
    width:36px;
    height:36px;
    border-radius:11px;
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    transition:none !important;
    animation:none !important;
  }
}