:root, :root[data-theme="dark"], :root[data-theme="light"]{
  color-scheme: light;
  --bg:#fbfbfa; --surface:#ffffff; --sec:#f5f5f2; --sec-hero:#f2f5fa;
  --border:#e7e6e2; --border-soft:#efeeea;
  --ink:#1f2733; --ink-2:#5a6472; --ink-3:#8a93a0;
  --seo:#3B6EDC; --geo:#C05617; --neutralbar:#c9cdd4;
  --up:#1a7f4e; --down:#c03535; --up-bg:rgba(26,127,78,.10); --down-bg:rgba(192,53,53,.10);
  --grid:#e9e7e2; --shadow:0 1px 2px rgba(31,39,51,.05), 0 3px 12px rgba(31,39,51,.04);
}
body{background:var(--bg); color:var(--ink);
  font:15px/1.55 "Avenir Next","Segoe UI",system-ui,sans-serif; margin:0;}
.wrap{max-width:1320px; margin:0 auto; padding:24px 18px 56px;}
header{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:6px 0 20px; flex-wrap:wrap;}
.logos{display:flex; align-items:center; gap:14px;}
.logo{display:flex; align-items:center; justify-content:center; height:40px; padding:0 16px; border:1px dashed var(--ink-3); border-radius:8px; color:var(--ink-2); font-weight:600; letter-spacing:.04em; font-size:13px;}
.logo.client{border-style:solid; border-color:var(--border); background:var(--surface); color:var(--ink); font-size:15px; letter-spacing:.02em;}
.logoimg{height:34px; width:auto; display:block;}
.x{color:var(--ink-3); font-size:17px;}
.weekbox{text-align:right;}
.weekbox .week{font-weight:700; font-size:21px; letter-spacing:-.01em;}
.weekbox .sub{font-size:12.5px; color:var(--ink-2);}
/* Filter bar */
.filterbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 0 4px; border-top:1px solid var(--border);}
.filterbar label{font-size:13px; color:var(--ink-2); font-weight:600; margin-right:8px;}
select{font:inherit; font-size:13.5px; font-weight:600; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:7px 10px; cursor:pointer;}
select:focus-visible{outline:2px solid var(--seo);}
.compnote{font-size:12.5px; color:var(--ink-3);}
/* Sections */
section{background:var(--sec); border-radius:16px; padding:20px 20px 22px; margin-top:20px;}
section.hero{background:var(--sec-hero);}
section > h2{font-size:17px; letter-spacing:-.01em; color:var(--ink); font-weight:700; margin:0 0 2px; display:flex; align-items:center; gap:9px;}
h2 .dot{width:9px; height:9px; border-radius:50%; flex:none;}
h2 .dot.seo{background:var(--seo);} h2 .dot.geo{background:var(--geo);}
.groupcap{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:700; margin:16px 2px 8px;}
/* Tiles */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
@media(max-width:860px){.tiles{grid-template-columns:repeat(2,1fr);}}
.tile{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px 12px; box-shadow:var(--shadow); position:relative;}
.tile.wide{grid-column:span 2;}
.tile .label{font-size:12.5px; color:var(--ink-2); font-weight:600;}
.tile .value{font-size:26px; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; margin:2px 0 4px;}
.tile.wide .value{font-size:31px;}
.tile .unit{font-size:15px; font-weight:600; color:var(--ink-2);}
/* Kalender-Zeitraumwahl */
.calwrap{position:relative;}
.calbtn{font:inherit; font-size:13.5px; font-weight:600; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:7px 12px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;}
.calbtn:focus-visible{outline:2px solid var(--seo);}
.calbtn .car{color:var(--ink-3); font-size:11px;}
.cal-pop{position:absolute; top:calc(100% + 6px); left:0; z-index:20; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 8px 30px rgba(31,39,51,.16); padding:16px; width:600px; max-width:calc(100vw - 40px); display:none;}
.cal-pop.open{display:block;}
.cal-inputs{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.cal-inputs .ci{flex:1; border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:13.5px; font-weight:600; color:var(--ink); background:var(--surface);}
.cal-inputs .arr{color:var(--ink-3);}
.cal-months{display:flex; gap:22px;}
.cal-m{flex:1;}
.cal-head{display:flex; align-items:center; justify-content:center; position:relative; font-weight:700; font-size:14px; margin-bottom:8px;}
.cal-nav{position:absolute; top:-2px; background:none; border:none; font-size:16px; color:var(--ink-2); cursor:pointer; padding:2px 8px; border-radius:6px;}
.cal-nav:hover{background:var(--border-soft);} .cal-nav:disabled{color:var(--border); cursor:default; background:none;}
.cal-nav.prev{left:0;} .cal-nav.next{right:0;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:13px; row-gap:2px;}
.cal-grid .dow{font-size:11px; font-weight:700; color:var(--ink-3); padding:4px 0;}
.cal-grid .d{padding:7px 0; cursor:pointer; position:relative; color:var(--ink); font-variant-numeric:tabular-nums;}
.cal-grid .d.off{color:var(--border); cursor:default;}
.cal-grid .d.inrange{background:rgba(59,110,220,.12);}
.cal-grid .d.rs{background:var(--seo); color:#fff; border-radius:99px 0 0 99px; font-weight:700;}
.cal-grid .d.re{background:var(--seo); color:#fff; border-radius:0 99px 99px 0; font-weight:700;}
.cal-grid .d.rs.re{border-radius:99px;}
.cal-grid .d.inrange:hover{background:rgba(59,110,220,.22);}
.cal-foot{display:flex; justify-content:flex-end; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border-soft);}
.cal-foot button{font:inherit; font-size:13.5px; font-weight:600; border-radius:8px; padding:8px 18px; cursor:pointer;}
.cal-cancel{background:var(--surface); border:1px solid var(--border); color:var(--ink);}
.cal-apply{background:var(--seo); border:1px solid var(--seo); color:#fff;}
.cal-hint{font-size:12px; color:var(--ink-3); margin-top:8px;}
.delta{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700; border-radius:99px; padding:2px 9px; font-variant-numeric:tabular-nums;}
.delta.up{color:var(--up); background:var(--up-bg);} .delta.down{color:var(--down); background:var(--down-bg);}
.delta.flat{color:var(--ink-3); background:var(--border-soft);}
.delta .vs{font-weight:500; color:var(--ink-3);}
.footnote{font-size:12px; color:var(--ink-3); margin:10px 2px 0;}
/* Cards & charts */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px;}
@media(max-width:760px){.grid2{grid-template-columns:1fr;}}
.card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px 10px; box-shadow:var(--shadow);}
.card.full{grid-column:1 / -1;}
.card h3{font-size:14.5px; margin:0 0 2px; font-weight:700;}
.card .hint{font-size:12.5px; color:var(--ink-2); margin:0 0 8px;}
.legend{display:flex; gap:14px; font-size:12px; color:var(--ink-2); margin:0 0 4px; flex-wrap:wrap;}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px;}
.legend i.dash{height:0; border-top:2.5px dashed var(--ink-2); border-radius:0; vertical-align:2px;}
svg{display:block; width:100%; height:auto;}
table{width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums;}
th{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); text-align:left; font-weight:700; padding:6px 8px; border-bottom:1px solid var(--border);}
td{padding:7px 8px; border-bottom:1px solid var(--border-soft);}
tr:last-child td{border-bottom:0;}
td.num,th.num{text-align:right;}
.chg{font-weight:700; font-size:12.5px;} .chg.up{color:var(--up);} .chg.down{color:var(--down);} .chg.flat{color:var(--ink-3);}
details{background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-top:12px; box-shadow:var(--shadow);}
details summary{cursor:pointer; padding:13px 18px; font-weight:600; font-size:14px; list-style:none; display:flex; align-items:center; gap:8px;}
details summary::-webkit-details-marker{display:none;}
details summary::before{content:"▸"; color:var(--ink-3); transition:transform .15s;}
details[open] summary::before{transform:rotate(90deg);}
details summary:focus-visible{outline:2px solid var(--seo); outline-offset:-2px; border-radius:12px;}
details .inner{padding:2px 18px 16px; border-top:1px solid var(--border-soft);}
details .inner p{color:var(--ink-2); font-size:13px; margin:10px 0 8px;}
footer{margin-top:32px; padding-top:18px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--ink-2); font-size:13px;}
footer a{color:var(--seo); text-decoration:none;} footer a:hover{text-decoration:underline;}

/* GSC-style tooltip */
#tip{position:fixed; pointer-events:none; background:var(--surface); color:var(--ink); border:1px solid var(--border);
  box-shadow:0 4px 18px rgba(31,39,51,.14); border-radius:10px; padding:10px 14px; opacity:0; transition:opacity .08s;
  z-index:9; font-size:13px; min-width:190px; font-variant-numeric:tabular-nums;}
#tip .tt-h{font-weight:700; font-size:13px; margin-bottom:7px;}
#tip .tt-r{display:flex; align-items:center; gap:8px; padding:2.5px 0;}
#tip .tt-r i{width:9px; height:9px; border-radius:50%; flex:none;}
#tip .tt-r span{color:var(--ink-2); margin-right:auto; padding-right:16px;}
#tip .tt-r b{font-weight:700;}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;} }

/* Login */
.login-page{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg);}
.login-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:36px 40px; width:380px; max-width:calc(100vw - 40px); text-align:center;}
.login-card .logos{justify-content:center; margin-bottom:20px;}
.login-card h1{font-size:18px; margin:0 0 4px;}
.login-card p{font-size:13.5px; color:var(--ink-2); margin:0 0 20px;}
.login-card input{width:100%; box-sizing:border-box; font:inherit; padding:10px 12px; border:1px solid var(--border); border-radius:8px; margin-bottom:12px;}
.login-card input:focus-visible{outline:2px solid var(--seo);}
.login-card button{width:100%; font:inherit; font-weight:600; background:var(--seo); color:#fff; border:none; border-radius:8px; padding:11px; cursor:pointer;}
.login-error{color:var(--down); font-size:13px; margin:0 0 12px;}
.logout{background:none; border:none; color:var(--ink-3); font:inherit; font-size:12.5px; cursor:pointer; padding:0; text-decoration:underline;}