/* SpritSparWERK24 V80 – Oberfläche nach dem Vorlagebild (Dashboard „Hallo Max,“ mit Karte, Sparassistent, Diagrammen).
   Wird nach app.css geladen und legt das Aussehen fest. Nur Systemschriften, keine externen Ressourcen. */
:root{
  --g:#0e7a34; --g-d:#0c6b2d; --g-l:#22c55e; --g-soft:#e8f7ee;
  --side:#10191c; --side-2:#1a282b; --side-ink:#aebcb8;
  --bg:#f3f5f4; --card:#fff; --line:#e6ebe8; --ink:#16211d; --muted:#556169;
  --r:12px; --sh:0 1px 2px rgba(16,32,25,.04),0 6px 18px rgba(16,32,25,.05);
  --v-bg:var(--bg); --v-line:var(--line); --v-green:var(--g); --v-green-soft:var(--g-soft); --v-muted:var(--muted); --v-ink:var(--ink); --v-radius:var(--r); --v-shadow:var(--sh); --v-side:var(--side)
}
html,body{background:var(--bg)!important;color:var(--ink)}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}

/* ---------- Seitenleiste (volle Höhe, Logo oben) ---------- */
.sidebar{position:fixed!important;top:0!important;left:0;bottom:0;height:100vh!important;width:230px!important;background:var(--side)!important;padding:18px 12px!important;border:0!important;overflow-y:auto;z-index:50;box-shadow:none}
.sidebar .brand{display:flex!important;align-items:center;gap:10px;margin:2px 8px 22px!important;text-decoration:none;color:#fff!important}
.sidebar .brand img,.sidebar .brand .sp-mark{width:32px;height:32px;border-radius:9px;display:block}
.sidebar .brand-name{font-size:17px!important;font-weight:800;color:#fff;white-space:nowrap}
.sidebar .brand-name b{color:var(--g-l)}
.sidebar .brand .brand-mark,.side-title{display:none!important}
.sidebar .nav{display:flex;align-items:center;gap:12px;color:var(--side-ink)!important;font-size:13.5px!important;font-weight:600;padding:10px 12px!important;border-radius:9px!important;margin:1px 0!important;background:none;box-shadow:none!important}
.sidebar .nav .ic{width:19px;height:19px}
.sidebar .nav:hover{background:var(--side-2)!important;color:#fff!important}
.sidebar .nav.active{background:rgba(22,163,74,.16)!important;color:var(--g-l)!important;box-shadow:inset 3px 0 0 var(--g-l)!important}
.sidebar .nav-sep{height:1px;background:var(--side-2);margin:8px 6px}
.sidebar .api-status{color:#6f807b!important;border-top:1px solid var(--side-2);margin-top:14px;padding-top:12px}
.sidebar .api-status a{display:none}

/* ---------- Inhalt und Kopfzeile ---------- */
.main{margin-left:230px!important;padding:0 28px 36px!important;max-width:none!important}
.topbar{position:sticky!important;top:0;left:auto;right:auto;z-index:40;height:64px!important;margin:0 -28px 0!important;padding:0 28px!important;background:#fff!important;border-bottom:1px solid var(--line)!important;display:flex;align-items:center;gap:14px;backdrop-filter:none}
.tb-brand,.tb-menu{display:none}
.tb-search{flex:1;max-width:520px;display:flex!important;align-items:center;gap:8px;background:#f1f4f2!important;border:1px solid transparent!important;border-radius:999px!important;height:40px!important;padding:0 14px;color:var(--muted)}
.tb-search input{border:0;background:transparent!important;outline:none;flex:1;font:inherit;font-size:16px}
.tb-search:focus-within{border-color:var(--g)!important;background:#fff!important}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.tb-icon{width:38px;height:38px;border:0!important;background:transparent!important;border-radius:10px;display:grid;place-items:center;color:#3c4a45;cursor:pointer}
.tb-icon:hover{background:#f1f4f2!important}
.tb-icon .ic{width:20px;height:20px}
.tb-refresh{font-size:1.05rem}
.tb-user{display:flex;align-items:center;gap:10px;margin-left:8px;text-decoration:none;color:var(--ink);padding:4px 6px;border-radius:12px}
.tb-user:hover{background:#f1f4f2}
.tb-avatar{width:38px;height:38px;border-radius:50%;background:#1e3a8a!important;color:#fff!important;display:grid;place-items:center;font-weight:800;font-size:13px}
.tb-user-txt{display:grid!important;line-height:1.15;text-align:left}
.tb-user-txt strong{font-size:13px}.tb-user-txt small{font-size:11.5px;color:var(--g)!important;font-weight:700}
.tb-user .ic{width:16px;height:16px;color:var(--muted)}
.page-heading{padding:22px 0 14px;margin:0;display:flex;justify-content:space-between}
.page-heading[hidden]{display:none}
.page-heading h1{font-size:24px;margin:0}.page-heading p{margin:4px 0 0;color:var(--muted);font-size:13.5px}

/* ---------- Dashboard ---------- */
#dashboard{padding-top:22px}
.greet-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.greet-row h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.01em}
.greet-row p{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.weather{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;box-shadow:var(--sh);cursor:pointer;font:inherit;color:var(--ink);text-align:left;min-width:190px}
.w-txt{display:grid;line-height:1.25}.w-txt b{font-size:12.5px}.w-txt span{font-size:15px;font-weight:700}.w-txt small{font-size:11.5px;color:var(--muted)}
.w-ico{font-size:30px;margin-left:auto}
.kpis{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important}
.kpi{background:#fff!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:var(--sh)!important;padding:14px 16px!important}
.kpi span{display:block;font-size:12px!important;color:var(--muted)!important}
.kpi strong{display:block;font-size:22px!important;font-weight:800;margin:6px 0 4px!important;letter-spacing:-.01em;color:var(--ink)}
.kpi strong small{font-size:12px;color:var(--muted);font-weight:600}
.kpi-trend{display:block;font-style:normal;font-size:12px!important;font-weight:700;color:var(--g)!important}
.kpi-trend.up{color:var(--g)!important}.kpi-trend.down{color:var(--g)!important}
#kCostTrend.up{color:#dc2626!important}
.kpi-trend.muted{color:var(--muted)!important;font-weight:600}
.kpi-trend .tr-l{font-weight:600;color:var(--muted)}
.kpi small{font-size:11.5px;color:var(--muted)}
.dash-grid{display:grid!important;grid-template-columns:1.15fr 1fr 1fr!important;grid-template-areas:none!important;gap:14px!important;margin-top:14px!important;align-items:stretch}
.dash-bottom{display:grid!important;grid-template-columns:1.45fr 1fr!important;gap:14px!important;margin-top:14px!important}
.card{background:#fff!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:var(--sh)!important}
.dcard{padding:16px!important;display:flex;flex-direction:column;overflow:hidden}
.dcard>*{margin-left:0!important;margin-right:0!important}
.dcard .dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:0 0 12px!important;border:0!important;margin:0!important}
.dcard .dhead h3{font-size:15px!important;margin:0;font-weight:800}
.dcard .dhead p{margin:3px 0 0}
.dcard .dhead select{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 8px;font:inherit;font-size:16px;color:var(--ink)}
.dcard .primary{width:100%;margin:12px 0 0!important;background:var(--g)!important;border:0!important;border-radius:9px!important;color:#fff!important;padding:11px 14px;font-weight:700;font-size:13.5px}
.dcard .primary:hover{background:var(--g-d)!important}
.linkbtn{color:var(--g)!important;font-weight:700;font-size:12.5px}
.muted.small,.small{font-size:12px}
/* Tankstellen-Karte */
.dmap{height:200px;border-radius:10px;overflow:hidden;background:#e7efe9;border:1px solid var(--line);position:relative;z-index:0}
.dmap-foot{display:flex;justify-content:space-between;gap:8px;margin-top:8px!important;flex-wrap:wrap}
.price-pin{background:none!important;border:0!important}
.price-pin span{position:absolute;transform:translate(-50%,-100%);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;background:#fff;border-radius:7px;padding:3px 7px 3px 4px;font-size:11.5px;font-weight:800;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.price-pin span::before{content:"⛽";display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--g);color:#fff;font-size:10px}
.price-pin.dear span::before{background:#dc2626}.price-pin.mid span::before{background:#f59e0b}
.price-pin span::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-top-color:#fff;border-bottom:0}
/* Sparassistent */
.ifield{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:0 10px;margin-top:8px!important;background:#fff;color:var(--muted)}
.ifield .ic{width:17px;height:17px;flex:none}
.ifield input{border:0!important;outline:none;flex:1;min-width:0;padding:10px 0;font:inherit;font-size:16px;background:transparent;box-shadow:none!important}
.ifield:focus-within{border-color:var(--g)}
.toggle{display:flex;align-items:center;gap:10px;margin-top:12px!important;font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.toggle .tg{width:36px;height:20px;border-radius:999px;background:#d4dcd8;position:relative;transition:background .15s;flex:none}
.toggle .tg::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .15s}
.toggle input:checked+.tg{background:var(--g)}.toggle input:checked+.tg::after{transform:translateX(16px)}
.toggle input:focus-visible+.tg{outline:3px solid #ffc53d;outline-offset:2px}
.d-assist .primary{margin-top:auto!important}
.d-assist .dhead{padding-bottom:4px!important}
/* Letzte Fahrten */
#dRecent .trip-row{padding:10px 0;border-bottom:1px solid var(--line)}
#dRecent .trip-row:last-child{border-bottom:0}
#dRecent .trip-row b{font-size:13.5px}
#dRecent .trip-row b::before{display:none}
#dRecent .trip-row small{font-size:11.5px}
#dRecent .trip-row strong{font-size:13.5px}
/* Diagramme */
.line-chart{width:100%;height:auto;display:block}
.line-chart .gl{stroke:#eef2f0;stroke-width:1}
.line-chart text{font-size:11px;fill:var(--muted)}
.line-chart .area{fill:url(#none);fill:rgba(22,163,74,.12)}
.line-chart .ln{fill:none;stroke:var(--g);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.line-chart .pt{fill:#fff;stroke:var(--g);stroke-width:2.5}
.pie-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pie.donut{width:150px;height:150px;border-radius:50%;flex:none;position:relative;-webkit-mask:radial-gradient(circle,transparent 46%,#000 47%);mask:radial-gradient(circle,transparent 46%,#000 47%)}
.pie-legend{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:2.1;flex:1;min-width:150px}
.pie-legend li{display:flex;align-items:center;gap:8px}
.pie-legend span{width:10px;height:10px;border-radius:3px;flex:none}
.pie-legend b{margin-left:auto;font-weight:600;color:var(--muted)}
.pie-legend small{display:none}
.m-hero,.m-cta{display:none!important}
/* alte Dashboard-Bausteine aus früheren Versionen ausblenden */
.promo-grid,.shortcuts,.app-footer,.d-route,.d-tips,.savings-box{display:none!important}
/* Unterseiten im gleichen Stil */
.subtabs button{border-radius:999px}
.subtabs button[aria-selected="true"]{background:var(--g)!important;border-color:var(--g)!important}
.primary{background:var(--g);border-color:var(--g)}

/* ---------- Tablet ---------- */
@media(max-width:1200px){
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .dash-grid{grid-template-columns:1fr 1fr!important}.d-trips{grid-column:span 2}
}
/* ---------- Handy und kleines Tablet: Menü über Knopf, untere Leiste ---------- */
@media(max-width:950px){
  .sidebar{display:block!important;transform:translateX(-105%);transition:transform .22s ease;width:260px!important;box-shadow:12px 0 30px rgba(0,0,0,.25)}
  body.nav-open .sidebar{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(10,20,16,.45);z-index:45}
  .scrim[hidden]{display:none}
  .main{margin-left:0!important;padding:0 14px calc(84px + env(safe-area-inset-bottom))!important}
  .topbar{margin:0 -14px!important;padding:0 14px!important;height:60px!important}
  .tb-brand{display:flex!important;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:800;font-size:15px}
  .tb-brand b{color:var(--g)}
  .tb-menu{display:grid!important;order:5;width:40px;height:40px;border:0;background:transparent;place-items:center;color:var(--ink);cursor:pointer;margin-left:2px}
  .tb-menu .ic{width:24px;height:24px}
  .tb-search,.tb-user-txt,.tb-user .ic,.tb-refresh,.tb-right .tb-icon:first-child{display:none!important}
  .tb-user{margin-left:0;padding:0}.tb-avatar{width:34px;height:34px}
  #dashboard.active{display:flex;flex-direction:column;padding-top:16px}
  .greet-row{order:1;flex-direction:column;gap:10px}.greet-row h2{font-size:21px}
  .weather{order:2;width:100%}
  .m-hero{display:block!important;order:2;margin:0 0 12px;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
  .m-hero img{display:block;width:100%;height:120px;object-fit:cover;object-position:left center}
  .kpis{order:3;grid-template-columns:1fr 1fr!important;gap:10px!important}
  .kpis .kpi:nth-child(2){display:none}
  .kpis .kpi:last-child{grid-column:auto}
  .kpi strong{font-size:19px!important}
  .m-cta{display:flex!important;order:4;justify-content:center;margin:12px 0 4px;background:var(--g)!important;color:#fff!important;border:0;border-radius:10px;padding:13px;font-weight:800}
  .dash-grid{order:5;grid-template-columns:1fr!important}.d-trips{grid-column:auto}
  .dash-bottom{order:6;grid-template-columns:1fr!important}
  .mobile-nav{display:grid!important;grid-template-columns:repeat(4,1fr)!important;background:#fff!important;border-top:1px solid var(--line)!important;border-radius:0!important;box-shadow:0 -4px 16px rgba(0,0,0,.05)!important}
  .mobile-nav button.active{color:var(--g)!important}
  .page-heading h1{font-size:21px}
}
.sidebar .brand-name{font-size:15.5px!important}
body:has(#dashboard.active) .page-heading,body[data-page="dashboard"] .page-heading{display:none!important}