:root{
  --bg:#0d1b2a; --bg2:#10263d; --card:#13283f; --card2:#173050;
  --ink:#eaf2fb; --muted:#9bb3cc; --line:#264a6b;
  --accent:#3fb6f0; --warm:#e8512e; --cold:#2d7dd2; --snow:#7fd1ff;
  --good:#34c759; --warn:#ffb000;
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(170deg,#0b1622,#0d1b2a 40%,#0a1320);
  color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}

/* Header */
header.site{
  position:sticky;top:0;z-index:1000;
  background:rgba(10,20,32,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.18rem;letter-spacing:.2px}
.brand .logo{font-size:1.5rem}
header.site nav{margin-left:auto;display:flex;gap:18px;font-weight:600;font-size:.95rem}
header.site nav a{color:var(--muted)}
header.site nav a.active,header.site nav a:hover{color:var(--ink)}

/* Hero */
.hero{padding:42px 0 18px}
.hero h1{font-size:2.1rem;line-height:1.15;margin:0 0 10px;font-weight:850}
.hero p.lead{font-size:1.08rem;color:var(--muted);max-width:760px;margin:0}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.badge{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:.85rem;color:var(--muted)}
.badge b{color:var(--ink)}

/* Controls */
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:22px 0 12px}
.controls label{font-size:.85rem;color:var(--muted);margin-right:4px}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{background:none;border:0;color:var(--muted);padding:8px 14px;font:inherit;font-size:.9rem;cursor:pointer}
.seg button.active{background:var(--accent);color:#04121d;font-weight:700}
.flt{background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:9px 12px;font:inherit}
.flt:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(63,182,240,.18)}
input.flt::placeholder{color:#6f88a3}
input[type=search].flt::-webkit-search-cancel-button{filter:invert(.6)}

/* Controls v2 */
.controls .ctl{display:flex;flex-direction:column;gap:5px}
.maphint{color:var(--muted);font-size:.85rem;margin:8px 2px 0}
.wx-heat{position:absolute;top:0;left:0;pointer-events:none}
.ctl-search{flex:1;min-width:240px;position:relative}
.ctl-search input{width:100%;padding-left:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239bb3cc' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:11px 50%}
.search-results{position:absolute;top:100%;left:0;right:0;z-index:1200;margin-top:4px;
  background:var(--card2);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:var(--shadow);max-height:320px;overflow-y:auto}
.search-results .sr{padding:9px 13px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(255,255,255,.04)}
.search-results .sr:hover,.search-results .sr.act{background:var(--accent);color:#04121d}
.search-results .sr .meta{color:var(--muted);font-size:.82rem;white-space:nowrap}
.search-results .sr:hover .meta,.search-results .sr.act .meta{color:#04121d}
.search-results .none{padding:11px 13px;color:var(--muted)}

/* SEO-Detailseiten */
.crumbs{color:var(--muted);font-size:.85rem;margin:18px 0 -10px}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--ink)}
.muted2{color:var(--muted);font-weight:400}
#statTable th.num,#statTable td.num{text-align:right}
.sib{display:flex;flex-wrap:wrap;gap:10px}
.sib a{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 13px;font-size:.9rem}
.sib a:hover{border-color:var(--accent);text-decoration:none}
.orte-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.orte-link{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 12px;display:flex;align-items:center;gap:7px}
.orte-link:hover{border-color:var(--accent);text-decoration:none}
.orte-link .muted2{margin-left:auto;font-size:.82rem}
.snowtag{color:var(--snow);margin-left:4px}

/* Tabelle */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
#statTable{width:100%;border-collapse:collapse;font-size:.9rem;min-width:760px}
#statTable th{position:sticky;top:0;background:var(--card2);color:var(--ink);text-align:right;
  padding:11px 12px;cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--line);user-select:none}
#statTable th:first-child,#statTable td:first-child{text-align:left;position:sticky;left:0;background:var(--card)}
#statTable th:nth-child(2),#statTable td:nth-child(2){text-align:left}
#statTable th:hover{color:var(--accent)}
#statTable th .ar{opacity:.5;font-size:.8em}
#statTable td{padding:9px 12px;text-align:right;border-bottom:1px solid rgba(255,255,255,.04);white-space:nowrap}
#statTable tbody tr{cursor:pointer}
#statTable tbody tr:hover td{background:var(--card2)}
#statTable tbody tr:hover td:first-child{background:var(--card2)}
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
.pager .pg{background:var(--card2);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:8px 16px;font:inherit;font-weight:600;cursor:pointer}
.pager .pg:hover:not(:disabled){border-color:var(--accent)}
.pager .pg:disabled{opacity:.4;cursor:default}
.pager .pginfo{color:var(--muted);font-size:.88rem}

/* Map */
#map{height:560px;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);background:#0a1320}
.grouphd{font-size:1.15rem;margin:26px 0 2px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.leaflet-popup-content-wrapper{background:var(--card2);color:var(--ink);border-radius:12px}
.leaflet-popup-tip{background:var(--card2)}
.leaflet-popup-content{margin:12px 14px}
.legend{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.8rem;color:var(--muted);line-height:1.8}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:7px;vertical-align:-2px}

/* Sections / cards */
section{margin:34px 0}
section h2{font-size:1.5rem;margin:0 0 6px}
.sub{color:var(--muted);margin:0 0 18px}
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 4px;font-size:1.05rem}
.kpi{font-size:1.9rem;font-weight:800;letter-spacing:-.5px}
.kpi.warm{color:var(--warm)} .kpi.cold{color:var(--cold)}
.card .meta{color:var(--muted);font-size:.85rem}

/* Detail panel */
#detail{display:none}
#detail.open{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
.detail-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.detail-head h2{margin:0}
.detail-head .tag{background:var(--card2);border:1px solid var(--line);padding:3px 10px;border-radius:999px;font-size:.8rem;color:var(--muted)}
.chartbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px 8px;box-shadow:var(--shadow)}
.chartbox h3{margin:0 0 2px;font-size:1.05rem}
.chartbox .note{color:var(--muted);font-size:.82rem;margin:0 0 10px}
/* feste Höhe verhindert Chart.js-Resize-Loop (CPU!) */
.chart-h{position:relative;width:100%;height:300px}
.chart-h-lg{height:360px}
.chart-h canvas{position:absolute;inset:0}
@media(max-width:820px){.chart-h{height:260px}.chart-h-lg{height:300px}}
.two{grid-template-columns:1fr 1fr}
@media(max-width:820px){.two{grid-template-columns:1fr}}
canvas.stripes{width:100%;height:90px;border-radius:8px;display:block;image-rendering:pixelated}
.records{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:6px}
.rec{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px}
.rec .lbl{color:var(--muted);font-size:.78rem}
.rec .val{font-size:1.3rem;font-weight:800}
.rec .when{color:var(--muted);font-size:.8rem}

/* Ads */
.adslot{margin:26px 0;min-height:90px;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#0e2236,#0e2236 12px,#102942 12px,#102942 24px);
  border:1px dashed var(--line);border-radius:12px;color:#5d7a99;font-size:.8rem}

/* CTA box */
.cta{background:linear-gradient(120deg,#11324f,#0e2740);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;box-shadow:var(--shadow)}
.cta .ico{font-size:2.6rem}
.cta h3{margin:0 0 4px;font-size:1.3rem}
.cta p{margin:0;color:var(--muted)}
.btn{display:inline-block;background:var(--accent);color:#04121d;font-weight:800;padding:11px 20px;border-radius:11px;margin-left:auto}
.btn:hover{text-decoration:none;filter:brightness(1.07)}
@media(max-width:680px){.cta .btn{margin-left:0}}

footer.site{border-top:1px solid var(--line);margin-top:50px;padding:26px 0;color:var(--muted);font-size:.86rem}
footer.site a{color:var(--muted)}
.spinner{display:inline-block;width:18px;height:18px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{color:var(--muted);padding:30px;text-align:center}

/* Bundesland-Submenü */
.subnav{background:var(--bg2);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:8px 18px}
.subnav .sublabel{color:var(--muted);font-size:.82rem;font-weight:600;margin-right:4px}
.subnav a{color:var(--muted);font-size:.88rem}
.subnav a:hover{color:var(--accent);text-decoration:none}

/* Vergleich */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cmp-col{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-align:center}
.cmp-col h2{margin:0;font-size:1.2rem}
#statTable td.win{color:var(--good);font-weight:800}

/* Menü-Umbruch auf kleinen Schirmen */
@media(max-width:780px){
  header.site .wrap{height:auto;flex-wrap:wrap;padding-top:8px;padding-bottom:8px;gap:6px 12px}
  header.site nav{margin-left:0;width:100%;flex-wrap:wrap;gap:8px 14px;font-size:.9rem}
}

/* Ranking-Balken */
.rank{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:.9rem}
.rank .rl{width:40%;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .rbar{flex:1;height:10px;background:var(--card2);border-radius:6px;overflow:hidden}
.rank .rbar i{display:block;height:100%;background:linear-gradient(90deg,#3fb6f0,#7fd1ff)}
.rank .rv{width:96px;text-align:right;color:var(--muted);white-space:nowrap}

/* Werbe-Platzhalter vorerst ausgeblendet (bis Traffic da ist) */
.adslot{display:none!important}