/* ════════════════════════════════════════════════════════════════════
   Tankpreise · Groundhub — „Kräftig & verspielt"
   Native-feeling PWA · Light + Dark · Iris-Akzent · große Preis-Typo
   Fraunces (Display) + Geist (UI). Signatur: amtliche Tankstellen-
   Preistypografie (große Zahl + hochgestellte Neuner-Stelle).
   ════════════════════════════════════════════════════════════════════ */

/* ── Tokens · Light (Default) ───────────────────────────────────────── */
:root{
  /* Flächen */
  --bg:        #EFEDFB;
  --bg-2:      #F7F6FF;
  --surface:   #FFFFFF;
  --surface-2: #FBFAFF;
  --glass:     rgba(255,255,255,.72);
  --glass-2:   rgba(255,255,255,.85);
  --glass-brd: rgba(20,16,40,.07);

  /* Tinte */
  --ink:   #16121F;
  --ink-2: #58536E;
  --ink-3: #8B85A1;
  --line:  #E7E3F5;
  --line-2:#D7D1ED;

  /* Akzent — Groundhub Iris */
  --brand:      #5B4BE6;
  --brand-2:    #7C6CFF;
  --brand-press:#4838D2;
  --brand-soft: #ECE9FF;
  --brand-ring: rgba(91,75,230,.30);
  --brand-glow: rgba(91,75,230,.40);
  --on-brand:   #FFFFFF;

  /* Preis-Semantik (kräftig) */
  --good:      #06A66B;
  --good-2:    #0AC07E;
  --good-soft: #D7F5E8;
  --on-good:   #FFFFFF;
  --warn:      #D98A0B;
  --warn-soft: #FCEFD2;
  --bad:       #E23D49;
  --bad-soft:  #FCE2E4;
  --gold:      #F2A412;

  /* Verlauf-Akzente (verspielt) */
  --pop-a: #5B4BE6;
  --pop-b: #9B6BFF;
  --pop-c: #FF6FB5;

  /* Radien */
  --r-sm:14px; --r-md:18px; --r-lg:24px; --r-xl:30px; --r-2xl:38px; --r-pill:999px;

  /* Tiefe */
  --sh-1: 0 1px 2px rgba(20,16,40,.06);
  --sh-2: 0 2px 8px -2px rgba(20,16,40,.10), 0 14px 34px -22px rgba(20,16,40,.30);
  --sh-3: 0 10px 30px -12px rgba(20,16,40,.26), 0 30px 70px -40px rgba(20,16,40,.40);
  --sh-pop: 0 16px 40px -16px rgba(20,16,40,.34), 0 40px 90px -50px rgba(20,16,40,.46);
  --sh-glow: 0 10px 34px -10px var(--brand-glow);

  /* Motion */
  --ease:    cubic-bezier(.32,.72,0,1);
  --spring:  cubic-bezier(.34,1.56,.64,1);
  --spring2: cubic-bezier(.22,1.4,.36,1);

  --maxw: 720px;
  --pad:  clamp(15px, 4.4vw, 22px);
  --tabbar-h: calc(62px + env(safe-area-inset-bottom));

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui:'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  color-scheme: light;
}

/* ── Tokens · Dark ──────────────────────────────────────────────────── */
:root[data-theme="dark"]{
  --bg:        #0B0A13;
  --bg-2:      #110F1C;
  --surface:   #19162688;   /* leicht durchscheinend für Glas-Optik */
  --surface-2: #211D33;
  --glass:     rgba(22,19,34,.62);
  --glass-2:   rgba(26,22,40,.78);
  --glass-brd: rgba(255,255,255,.08);

  --ink:   #F3F1FF;
  --ink-2: #B7B1D0;
  --ink-3: #837C9E;
  --line:  rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.15);

  --brand:      #8B7CFF;
  --brand-2:    #A99BFF;
  --brand-press:#7A6BF2;
  --brand-soft: rgba(139,124,255,.16);
  --brand-ring: rgba(139,124,255,.42);
  --brand-glow: rgba(139,124,255,.55);
  --on-brand:   #0B0A13;

  --good:      #2FE0A0;
  --good-2:    #34E5A4;
  --good-soft: rgba(47,224,160,.16);
  --on-good:   #042A1E;
  --warn:      #FFB020;
  --warn-soft: rgba(255,176,32,.16);
  --bad:       #FF6B72;
  --bad-soft:  rgba(255,107,114,.16);
  --gold:      #FFC24B;

  --pop-a:#8B7CFF; --pop-b:#B98BFF; --pop-c:#FF7DC0;

  --sh-1: 0 1px 2px rgba(0,0,0,.5);
  --sh-2: 0 2px 10px -2px rgba(0,0,0,.55), 0 16px 40px -24px rgba(0,0,0,.7);
  --sh-3: 0 12px 34px -14px rgba(0,0,0,.6), 0 40px 90px -48px rgba(0,0,0,.85);
  --sh-pop: 0 18px 46px -18px rgba(0,0,0,.7), 0 50px 110px -56px rgba(0,0,0,.9);
  --sh-glow: 0 10px 40px -8px var(--brand-glow);

  color-scheme: dark;
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; height:100%; }
body{
  margin:0; min-height:100dvh; overflow-x:hidden;
  font-family:var(--font-ui); color:var(--ink); background:var(--bg);
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:'ss01','cv01';
  transition:background .5s var(--ease), color .4s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; color:inherit; cursor:pointer; background:none; border:0; }
input,select,textarea{ font-family:inherit; }
a{ color:var(--brand); }
:focus-visible{ outline:2.5px solid var(--brand); outline-offset:2px; border-radius:8px; }
[hidden]{ display:none!important; }

/* Lebendiger Hintergrund-Mesh (verspielt, dezent animiert) */
.bg-orbs{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-orbs i{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.55;
  animation:orb 22s var(--ease) infinite alternate;
}
.bg-orbs i:nth-child(1){ width:54vw; height:54vw; left:-14vw; top:-12vh; background:radial-gradient(circle,var(--pop-a),transparent 68%); }
.bg-orbs i:nth-child(2){ width:48vw; height:48vw; right:-12vw; top:8vh; background:radial-gradient(circle,var(--pop-c),transparent 68%); opacity:.4; animation-delay:-7s; }
.bg-orbs i:nth-child(3){ width:60vw; height:60vw; left:6vw; bottom:-22vh; background:radial-gradient(circle,var(--pop-b),transparent 70%); opacity:.42; animation-delay:-13s; }
:root[data-theme="dark"] .bg-orbs i{ opacity:.30; }
:root[data-theme="dark"] .bg-orbs i:nth-child(2){ opacity:.22; }
:root[data-theme="dark"] .bg-orbs i:nth-child(3){ opacity:.24; }
@keyframes orb{ from{ transform:translate3d(0,0,0) scale(1) } to{ transform:translate3d(4vw,5vh,0) scale(1.18) } }

/* ── App-Shell ──────────────────────────────────────────────────────── */
.app{ position:relative; z-index:1; min-height:100dvh; display:flex; flex-direction:column; }

/* App-Bar (sticky, Glas) */
.appbar{
  position:sticky; top:0; z-index:30;
  padding:calc(env(safe-area-inset-top) + 9px) var(--pad) 9px;
  background:var(--glass); backdrop-filter:saturate(1.6) blur(16px); -webkit-backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s, padding .3s var(--ease);
}
.appbar.is-stuck{ border-bottom-color:var(--glass-brd); box-shadow:0 8px 24px -22px rgba(20,16,40,.5); }
.appbar-in{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:10px; }
.brand{ display:flex; align-items:center; gap:9px; margin-right:auto; flex:0 0 auto; }
.brand-mark{
  width:34px; height:34px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--pop-a),var(--pop-b)); color:#fff; box-shadow:var(--sh-glow);
}
.brand-mark svg{ width:20px; height:20px; }
.brand-name{ font-weight:750; font-size:17px; letter-spacing:-.02em; white-space:nowrap; }
.brand-name b{ color:var(--brand); font-weight:750; }

.icon-btn{
  width:42px; height:42px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2);
  transition:transform .14s var(--spring), background .2s, color .2s, border-color .2s;
}
.icon-btn:active{ transform:scale(.9); }
.icon-btn svg{ width:21px; height:21px; }
.icon-btn .sun,.icon-btn .moon{ transition:opacity .3s, transform .4s var(--spring); }
:root[data-theme="dark"] .icon-btn .sun{ opacity:0; transform:rotate(90deg) scale(.4); position:absolute; }
:root:not([data-theme="dark"]) .icon-btn .moon{ opacity:0; transform:rotate(-90deg) scale(.4); position:absolute; }

/* Standort-Pille */
.locpill{
  display:flex; align-items:center; gap:7px; min-width:0; max-width:50vw;
  padding:9px 13px; border-radius:var(--r-pill); background:var(--brand-soft); color:var(--brand);
  border:1px solid transparent; font-weight:650; font-size:13.5px;
  transition:transform .14s var(--spring), background .2s;
}
.locpill:active{ transform:scale(.95); }
.locpill svg{ width:16px; height:16px; flex:0 0 auto; }
.locpill-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.locpill .chev{ opacity:.6; }

/* Fuel-Segment (global, immer sichtbar) */
.fuelbar{ max-width:var(--maxw); margin:11px auto 0; }
.fuelseg{
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill);
  position:relative;
}
.fuelseg button{
  position:relative; z-index:1; padding:9px 8px; border-radius:var(--r-pill);
  font-weight:700; font-size:13.5px; color:var(--ink-2); letter-spacing:-.01em;
  transition:color .25s var(--ease), transform .12s var(--spring);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.fuelseg button:active{ transform:scale(.94); }
.fuelseg button.is-active{ color:var(--on-brand); }
.fuelseg .thumb{
  position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width:calc((100% - 8px)/3);
  border-radius:var(--r-pill); background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:var(--sh-glow); transition:transform .42s var(--spring2);
}

/* ── Viewport / Tab-Views ───────────────────────────────────────────── */
.viewport{
  flex:1; max-width:var(--maxw); width:100%; margin:0 auto; position:relative;
  padding:14px var(--pad) calc(var(--tabbar-h) + 22px);
}
.tabview{ animation:viewIn .42s var(--ease) both; }
.tabview[hidden]{ display:none!important; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(10px) scale(.992) } to{ opacity:1; transform:none } }

/* Pull-to-Refresh */
.ptr{
  position:absolute; top:-2px; left:0; right:0; display:grid; place-items:center;
  height:0; overflow:visible; pointer-events:none; z-index:5;
}
.ptr-spin{
  width:34px; height:34px; border-radius:50%; background:var(--surface); box-shadow:var(--sh-2);
  display:grid; place-items:center; color:var(--brand);
  transform:translateY(-40px) scale(.6); opacity:0; transition:none;
}
.ptr-spin svg{ width:19px; height:19px; }
.ptr.snap .ptr-spin{ transition:transform .3s var(--spring), opacity .3s; }
.ptr.spinning .ptr-spin svg{ animation:rot .7s linear infinite; }

/* ── Filterleiste (Liste) ───────────────────────────────────────────── */
.filters{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.seg{
  display:inline-flex; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:4px; gap:2px;
}
.seg button{
  padding:8px 14px; border-radius:var(--r-pill); color:var(--ink-2); font-weight:650; font-size:13.5px;
  transition:color .2s, background .25s var(--spring), transform .12s var(--spring);
}
.seg button:active{ transform:scale(.94); }
.seg button.is-active{ background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); }
:root[data-theme="dark"] .seg button.is-active{ background:var(--line-2); color:var(--ink); }

.switch{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:650; color:var(--ink-2); user-select:none; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch .track{ width:44px; height:26px; border-radius:99px; background:var(--line-2); position:relative; transition:background .3s; flex:0 0 auto; }
.switch .track::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--sh-1); transition:transform .34s var(--spring); }
.switch input:checked + .track{ background:var(--good); }
.switch input:checked + .track::after{ transform:translateX(18px); }

/* Radius-Slider */
.radius{ width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:13px 16px 8px; box-shadow:var(--sh-1); }
.radius-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.radius-top .lbl{ font-size:12.5px; font-weight:650; color:var(--ink-2); letter-spacing:.02em; text-transform:uppercase; }
.radius-top output{ font-family:var(--font-display); font-variation-settings:'opsz' 40; font-weight:600; font-size:20px; color:var(--brand); font-feature-settings:'tnum'; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:28px; background:transparent; margin:0; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track{
  height:8px; border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2)) no-repeat, var(--line);
  background-size:var(--rfill,40%) 100%;
}
input[type=range]::-moz-range-track{ height:8px; border-radius:99px; background:var(--line); }
input[type=range]::-moz-range-progress{ height:8px; border-radius:99px; background:var(--brand); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; margin-top:-9px; border-radius:50%;
  background:#fff; border:3px solid var(--brand); box-shadow:0 4px 12px -2px var(--brand-glow);
  transition:transform .14s var(--spring);
}
input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid var(--brand); box-shadow:0 4px 12px -2px var(--brand-glow); }
input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.18); }

/* ── Hero-Bestpreis-Karte ───────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden; border-radius:var(--r-2xl); padding:20px 20px 18px; margin-bottom:16px;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 55%,var(--pop-c) 130%);
  color:#fff; box-shadow:var(--sh-3), var(--sh-glow); cursor:pointer;
  animation:heroPop .6s var(--spring) both;
  -webkit-tap-highlight-color:transparent;
}
.hero:active{ transform:scale(.985); }
@keyframes heroPop{ 0%{ opacity:0; transform:translateY(14px) scale(.96) } 100%{ opacity:1; transform:none } }
.hero::after{ /* Glanz-Schimmer */
  content:''; position:absolute; top:0; bottom:0; width:55%; left:-70%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg); animation:shimmer 4.6s var(--ease) 1.1s infinite;
}
@keyframes shimmer{ 0%{ left:-70% } 36%,100%{ left:140% } }
.hero-top{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:12px; letter-spacing:.13em; text-transform:uppercase; opacity:.95; }
.hero-crown{ width:26px; height:26px; border-radius:9px; background:rgba(255,255,255,.22); display:grid; place-items:center; }
.hero-crown svg{ width:15px; height:15px; }
.hero-main{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:10px; }
.hero-price{ font-family:var(--font-display); font-variation-settings:'opsz' 144; font-weight:600; font-size:clamp(46px,15vw,68px); line-height:.86; letter-spacing:-.03em; font-feature-settings:'tnum'; }
.hero-price .sup{ font-size:.42em; vertical-align:.95em; margin-left:1px; }
.hero-price .cur{ font-size:.34em; vertical-align:.6em; opacity:.8; margin-left:4px; font-family:var(--font-ui); }
.hero-save{ flex:0 0 auto; text-align:right; }
.hero-save .save-amt{ display:inline-block; background:rgba(255,255,255,.22); border-radius:var(--r-pill); padding:5px 11px; font-weight:750; font-size:14px; backdrop-filter:blur(4px); }
.hero-save .save-cap{ display:block; font-size:11.5px; opacity:.85; margin-top:5px; }
.hero-foot{ display:flex; align-items:center; gap:9px; margin-top:14px; }
.hero-logo{ width:38px; height:38px; border-radius:11px; background:#fff; padding:3px; flex:0 0 auto; box-shadow:var(--sh-1); display:grid; place-items:center; overflow:hidden; }
.hero-logo img{ width:100%; height:100%; object-fit:contain; }
.hero-id{ min-width:0; flex:1; }
.hero-name{ display:block; font-weight:700; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero-meta{ display:block; font-size:12.5px; opacity:.9; margin-top:1px; }
.hero-go{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:#fff; color:var(--brand); display:grid; place-items:center; box-shadow:var(--sh-2); transition:transform .14s var(--spring); }
.hero-go:active{ transform:scale(.9); }

/* ── Insights / Statline ────────────────────────────────────────────── */
.statline{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; overflow:hidden;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg);
  margin-bottom:16px; box-shadow:var(--sh-1); animation:viewIn .5s var(--ease) both;
}
.stat{ background:var(--surface); padding:12px 12px 13px; text-align:center; }
.stat .k{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.stat .v{ font-family:var(--font-display); font-variation-settings:'opsz' 40; font-weight:600; font-size:19px; margin-top:3px; font-feature-settings:'tnum'; letter-spacing:-.01em; }
.stat .v .sup{ font-size:.6em; vertical-align:.5em; }
.stat--low .v{ color:var(--good); }
.stat--high .v{ color:var(--bad); }

/* Anzahl/Hinweis-Kopf */
.list-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; }
.list-head h2{ font-family:var(--font-display); font-variation-settings:'opsz' 80; font-weight:560; font-size:clamp(19px,5vw,23px); letter-spacing:-.02em; margin:0; }
.list-head .sub{ font-size:12.5px; color:var(--ink-3); font-weight:600; }

/* ── Stationskarten ─────────────────────────────────────────────────── */
.list{ display:flex; flex-direction:column; gap:12px; }
.card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-2); padding:15px 15px 13px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .16s var(--ease), box-shadow .25s, border-color .25s;
  animation:cardIn .5s var(--spring) both;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
@keyframes cardIn{ 0%{ opacity:0; transform:translateY(16px) scale(.97) } 100%{ opacity:1; transform:none } }
.card:hover{ transform:translateY(-3px); box-shadow:var(--sh-pop); }
.card:active{ transform:scale(.985); }
.card.is-closed{ opacity:.62; }
.card.is-fav{ border-color:var(--gold); }

.card-top{ display:flex; align-items:flex-start; gap:12px; }
.badge{
  width:48px; height:48px; flex:0 0 auto; border-radius:14px; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line-2);
  font-family:var(--font-display); font-variation-settings:'opsz' 40; font-weight:600; font-size:18px;
  color:var(--ink); letter-spacing:-.02em;
}
.badge--brand{ border:0; font-family:var(--font-ui); font-weight:800; font-size:15px; letter-spacing:-.01em; padding:0 4px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.badge--md{ font-size:13px; }
.badge--sm{ font-size:11px; }
.badge--logo{ background:#fff; border-color:var(--line); padding:5px; overflow:hidden; }
.badge--logo img{ width:100%; height:100%; object-fit:contain; }

.card-id{ min-width:0; flex:1; }
.card-name{ font-weight:700; font-size:15.5px; line-height:1.25; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-addr{ color:var(--ink-2); font-size:13px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-foot{ color:var(--ink-3); font-size:12.5px; margin-top:5px; display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.card-foot .dist{ color:var(--ink); font-weight:700; }
.dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-3); flex:0 0 auto; }

.card-flags{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:0 0 auto; }
.fav-btn{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:var(--ink-3);
  background:var(--surface-2); border:1px solid var(--line); transition:transform .16s var(--spring), color .2s, background .2s, border-color .2s;
}
.fav-btn svg{ width:20px; height:20px; transition:transform .2s var(--spring); }
.fav-btn:active{ transform:scale(.85); }
.fav-btn.is-on{ color:var(--gold); border-color:transparent; background:var(--warn-soft); }
.fav-btn.is-on svg{ fill:var(--gold); }
.fav-btn.pop svg{ animation:starPop .5s var(--spring); }
@keyframes starPop{ 0%{ transform:scale(1) } 35%{ transform:scale(1.45) rotate(14deg) } 100%{ transform:scale(1) } }

.tag{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:750; padding:5px 10px; border-radius:99px; flex:0 0 auto; letter-spacing:.01em; white-space:nowrap; }
.tag-open{ background:var(--good-soft); color:var(--good); }
.tag-closed{ background:var(--bad-soft); color:var(--bad); }
.tag .led{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.tag-open .led{ box-shadow:0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); animation:pulse 2.2s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* Spar-Badge */
.savetag{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:750; padding:4px 9px; border-radius:99px; }
.savetag--low{ background:var(--good-soft); color:var(--good); }
.savetag--mid{ background:var(--warn-soft); color:var(--warn); }
.savetag--high{ background:var(--bad-soft); color:var(--bad); }

/* Preis-Block */
.prices{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:13px; }
.price{
  min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-md);
  padding:9px 7px 8px; text-align:center; background:var(--surface-2);
  transition:background .2s, border-color .2s, transform .2s var(--spring);
}
.price.is-selected{ background:var(--brand-soft); border-color:transparent; box-shadow:inset 0 0 0 1.5px var(--brand-ring); }
.price-label{ font-size:10.5px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.price.is-selected .price-label{ color:var(--brand); }
.price-value{ font-family:var(--font-display); font-variation-settings:'opsz' 40; font-weight:600; font-size:clamp(20px,5.4vw,25px); line-height:1; margin-top:5px; color:var(--ink); font-feature-settings:'tnum'; letter-spacing:-.01em; white-space:nowrap; }
.price-value .sup{ font-size:.56em; vertical-align:.62em; margin-left:.5px; font-weight:600; }
.price.lvl-low .price-value{ color:var(--good); }
.price.lvl-high .price-value{ color:var(--bad); }
.price-na{ font-family:var(--font-ui); font-weight:600; font-size:17px; color:var(--ink-3); }

/* ── Zustände / Skeleton ────────────────────────────────────────────── */
.state{
  background:var(--surface); border:1.5px dashed var(--line-2); border-radius:var(--r-xl);
  padding:40px 24px; text-align:center; color:var(--ink-2); animation:viewIn .5s var(--ease) both;
}
.state .si{ width:56px; height:56px; margin:0 auto 14px; color:var(--brand); display:grid; place-items:center; border-radius:18px; background:var(--brand-soft); }
.state .si svg{ width:30px; height:30px; }
.state h3{ font-family:var(--font-display); font-variation-settings:'opsz' 72; font-weight:560; font-size:21px; color:var(--ink); margin:0 0 6px; letter-spacing:-.01em; }
.state p{ margin:0 auto; max-width:34ch; font-size:14px; }
.state .btn{ margin-top:18px; }
.state.is-error{ border-style:solid; border-color:var(--bad-soft); }
.state.is-error .si{ background:var(--bad-soft); color:var(--bad); }
.state.is-error h3{ color:var(--bad); }

.skeleton{ display:grid; gap:12px; }
.sk{ height:138px; border-radius:var(--r-xl); border:1px solid var(--line); background:linear-gradient(100deg, var(--surface) 30%, color-mix(in srgb,var(--surface) 60%, var(--brand-soft)) 50%, var(--surface) 70%); background-size:220% 100%; animation:sweep 1.25s linear infinite; }
@keyframes sweep{ from{ background-position:120% 0 } to{ background-position:-120% 0 } }

.spin{ width:18px; height:18px; border-radius:50%; border:2.5px solid currentColor; border-top-color:transparent; display:inline-block; animation:rot .7s linear infinite; vertical-align:-3px; }
@keyframes rot{ to{ transform:rotate(360deg) } }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn{
  border-radius:var(--r-md); font-weight:700; font-size:15px; padding:13px 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; line-height:1;
  transition:transform .12s var(--spring), background .2s, box-shadow .2s, color .2s, border-color .2s;
}
.btn:active{ transform:scale(.96); }
.btn[disabled]{ opacity:.55; pointer-events:none; }
.btn-accent{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:var(--on-brand); box-shadow:var(--sh-glow); }
.btn-accent:hover{ filter:brightness(1.05); }
.btn-ink{ background:var(--ink); color:var(--bg); }
.btn-soft{ background:var(--surface-2); color:var(--ink); border:1px solid var(--line-2); }
.btn-soft:hover{ background:var(--brand-soft); }
.btn-block{ width:100%; }
.btn .spin{ width:16px; height:16px; }

/* ── Karte ──────────────────────────────────────────────────────────── */
.mapview{ position:relative; }
.map-wrap{ border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2); }
#map{ height:calc(100dvh - var(--tabbar-h) - 220px); min-height:360px; width:100%; background:var(--bg-2); }
.leaflet-container{ font-family:var(--font-ui); background:var(--bg-2); }
.leaflet-control-attribution{ background:var(--glass-2)!important; font-size:10px!important; color:var(--ink-2)!important; backdrop-filter:blur(6px); }
.leaflet-control-attribution a{ color:var(--brand)!important; }
.leaflet-bar a{ color:var(--ink)!important; background:var(--surface)!important; border-bottom-color:var(--line)!important; }
.leaflet-popup-content-wrapper,.leaflet-popup-tip{ background:var(--surface); color:var(--ink); }
.leaflet-popup-content-wrapper{ border-radius:var(--r-md); box-shadow:var(--sh-pop); }
:root[data-theme="dark"] .leaflet-tile{ filter:invert(1) hue-rotate(180deg) brightness(.94) contrast(.9); }
:root[data-theme="dark"] .leaflet-container{ background:#0d0c16; }

.map-fab{
  position:absolute; right:14px; bottom:14px; z-index:500; width:50px; height:50px; border-radius:16px;
  background:var(--surface); color:var(--brand); box-shadow:var(--sh-pop); border:1px solid var(--line);
  display:grid; place-items:center; transition:transform .14s var(--spring);
}
.map-fab:active{ transform:scale(.9); }
.map-fab svg{ width:23px; height:23px; }
.map-hint{ text-align:center; color:var(--ink-3); font-size:12.5px; margin-top:12px; }

/* Preis-Pin */
.pin{ transform:translate(-50%,-100%); will-change:transform; }
.pin-drop{ animation:pinDrop .4s var(--spring) both; }
@keyframes pinDrop{ 0%{ transform:translate(-50%,-160%) scale(.6); opacity:0 } 100%{ transform:translate(-50%,-100%) scale(1); opacity:1 } }
.pin-body{
  background:var(--surface); border:1.5px solid var(--ink); color:var(--ink);
  border-radius:99px; padding:4px 9px; font-weight:800; font-size:12.5px;
  box-shadow:var(--sh-2); font-feature-settings:'tnum'; white-space:nowrap; position:relative; line-height:1.1;
}
.pin-body .s9{ font-size:.62em; vertical-align:.5em; }
.pin-body::after{ content:''; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--ink); }
.pin--best .pin-body{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); border-color:var(--brand); color:#fff; box-shadow:var(--sh-glow); }
.pin--best .pin-body::after{ border-top-color:var(--brand-2); }
.pin--low .pin-body{ border-color:var(--good); color:var(--good); }
.pin--low .pin-body::after{ border-top-color:var(--good); }
.pin--closed .pin-body{ opacity:.55; border-style:dashed; }
.pin--me{ width:18px; height:18px; transform:translate(-50%,-50%); }
.pin--me i{ display:block; width:16px; height:16px; border-radius:50%; background:var(--brand); border:3px solid var(--surface); box-shadow:0 0 0 3px var(--brand-ring),0 2px 6px rgba(0,0,0,.4); animation:meBeat 2.4s var(--ease) infinite; }
@keyframes meBeat{ 0%,100%{ box-shadow:0 0 0 3px var(--brand-ring),0 2px 6px rgba(0,0,0,.4) } 50%{ box-shadow:0 0 0 9px transparent,0 2px 6px rgba(0,0,0,.4) } }

/* ── Tankrechner ────────────────────────────────────────────────────── */
.calc-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-2); padding:18px; margin-bottom:16px; }
.calc-card h2{ font-family:var(--font-display); font-variation-settings:'opsz' 80; font-weight:560; font-size:22px; letter-spacing:-.02em; margin:0 0 3px; }
.calc-card .hint{ color:var(--ink-3); font-size:13px; margin:0 0 16px; }
.stepper{ display:flex; align-items:center; gap:12px; justify-content:center; margin:6px 0 14px; }
.stepper button{ width:52px; height:52px; border-radius:16px; background:var(--surface-2); border:1px solid var(--line-2); color:var(--brand); font-size:26px; display:grid; place-items:center; transition:transform .12s var(--spring), background .2s; }
.stepper button:active{ transform:scale(.9); background:var(--brand-soft); }
.stepper .val{ min-width:130px; text-align:center; }
.stepper .val input{ width:100%; border:0; background:transparent; text-align:center; font-family:var(--font-display); font-variation-settings:'opsz' 90; font-weight:600; font-size:46px; color:var(--ink); letter-spacing:-.02em; font-feature-settings:'tnum'; outline:none; -moz-appearance:textfield; }
.stepper .val input::-webkit-outer-spin-button,.stepper .val input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stepper .val .unit{ font-size:13px; color:var(--ink-3); font-weight:650; margin-top:-2px; }
.presets{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.preset{ padding:8px 14px; border-radius:99px; background:var(--surface-2); border:1px solid var(--line); font-weight:650; font-size:13px; color:var(--ink-2); transition:transform .12s var(--spring), background .2s, color .2s, border-color .2s; }
.preset:active{ transform:scale(.93); }
.preset.is-active{ background:var(--brand); color:var(--on-brand); border-color:transparent; }

.calc-row{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1); transition:transform .16s var(--ease), box-shadow .2s; animation:cardIn .45s var(--spring) both; }
.calc-row:active{ transform:scale(.99); }
.calc-row.is-best{ border-color:transparent; box-shadow:inset 0 0 0 1.5px var(--good), var(--sh-1); background:linear-gradient(var(--good-soft),var(--good-soft)) padding-box, var(--surface); }
.calc-row .rank{ width:30px; text-align:center; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink-3); flex:0 0 auto; }
.calc-row.is-best .rank{ color:var(--good); }
.calc-row .ci{ min-width:0; flex:1; }
.calc-row .cn{ font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calc-row .cm{ font-size:12px; color:var(--ink-3); margin-top:2px; }
.calc-row .ct{ text-align:right; flex:0 0 auto; }
.calc-row .ct .tot{ font-family:var(--font-display); font-variation-settings:'opsz' 50; font-weight:600; font-size:21px; font-feature-settings:'tnum'; letter-spacing:-.01em; }
.calc-row.is-best .ct .tot{ color:var(--good); }
.calc-row .ct .sv{ font-size:11.5px; color:var(--good); font-weight:700; margin-top:1px; }

/* ── Beste-Tankzeit-Tageskurve ──────────────────────────────────────── */
.daycurve{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-2); padding:18px; }
.daycurve h3{ font-size:12px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 4px; }
.daycurve .verdict{ font-family:var(--font-display); font-variation-settings:'opsz' 60; font-weight:560; font-size:18px; letter-spacing:-.01em; margin:0 0 14px; }
.daycurve .verdict b{ color:var(--good); font-weight:600; }
.daycurve svg{ width:100%; height:auto; display:block; overflow:visible; }
.daycurve .legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:11.5px; color:var(--ink-3); font-weight:600; }
.daycurve .legend i{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; vertical-align:-1px; }

/* ── Bottom-Sheet (generisch, ziehbar) ──────────────────────────────── */
.scrim{ position:fixed; inset:0; z-index:50; background:rgba(8,6,20,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; transition:opacity .3s; }
.scrim.show{ opacity:1; }
.sheet{
  position:fixed; left:50%; bottom:0; z-index:51; width:min(560px,100%);
  transform:translate(-50%,100%); background:var(--bg-2);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0; box-shadow:var(--sh-pop);
  border:1px solid var(--glass-brd); border-bottom:0;
  padding:8px var(--pad) calc(24px + env(safe-area-inset-bottom));
  max-height:92dvh; overflow:auto; overscroll-behavior:contain;
  transition:transform .42s var(--spring2); touch-action:pan-y;
}
.sheet.show{ transform:translate(-50%,0); }
.sheet.dragging{ transition:none; }
.sheet-grip{ width:42px; height:5px; border-radius:99px; background:var(--line-2); margin:4px auto 14px; display:block; }
.sheet-head{ display:flex; gap:12px; align-items:flex-start; }
.sheet h2{ font-family:var(--font-display); font-variation-settings:'opsz' 90; font-weight:560; font-size:23px; letter-spacing:-.02em; margin:0; line-height:1.1; }
.sheet-addr{ color:var(--ink-2); font-size:13.5px; margin-top:5px; }
.sheet-x{ width:36px; height:36px; border-radius:50%; background:var(--surface-2); color:var(--ink-2); font-size:18px; display:grid; place-items:center; flex:0 0 auto; border:1px solid var(--line); transition:transform .14s var(--spring); }
.sheet-x:active{ transform:scale(.9); }
.sheet-prices{ margin-top:16px; }
.sheet-sec{ margin-top:20px; }
.sheet-sec h4{ font-size:11.5px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; }

/* Sparkline 24h */
.spark{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:15px 16px; }
.spark-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; }
.spark-now{ font-family:var(--font-display); font-variation-settings:'opsz' 50; font-weight:600; font-size:22px; font-feature-settings:'tnum'; }
.spark-now .sup{ font-size:.56em; vertical-align:.6em; }
.spark-delta{ font-size:12.5px; font-weight:750; padding:3px 9px; border-radius:99px; }
.spark-delta.up{ background:var(--bad-soft); color:var(--bad); }
.spark-delta.down{ background:var(--good-soft); color:var(--good); }
.spark-delta.flat{ background:var(--surface-2); color:var(--ink-3); }
.spark svg{ width:100%; height:64px; display:block; overflow:visible; }
.spark-cap{ font-size:11.5px; color:var(--ink-3); margin-top:8px; }
.spark-empty{ display:flex; gap:11px; align-items:center; color:var(--ink-2); font-size:13.5px; background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--r-lg); padding:14px 16px; }
.spark-empty .si{ width:34px; height:34px; border-radius:11px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; flex:0 0 auto; }

.hours{ display:grid; gap:7px; }
.hours-row{ display:flex; justify-content:space-between; gap:14px; font-size:14px; padding:10px 13px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); }
.hours-row.is-now{ border-color:var(--good); background:var(--good-soft); }
.hours-row .d{ color:var(--ink-2); font-weight:650; }
.hours-row .t{ color:var(--ink); font-feature-settings:'tnum'; font-weight:650; }
.whole-day{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:650; color:var(--good); background:var(--good-soft); padding:12px 14px; border-radius:var(--r-md); }
.sheet-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.sheet-actions.three{ grid-template-columns:1fr 1fr 1fr; }
.sheet-actions .btn{ padding:14px 10px; font-size:14.5px; }
.sheet-note{ color:var(--ink-3); font-size:12px; margin-top:14px; text-align:center; }

/* Location-Sheet */
.locsheet-geo{ width:100%; padding:15px; margin-top:6px; }
.field{
  display:flex; align-items:center; gap:8px; margin-top:12px;
  background:var(--surface); border:1.5px solid var(--line-2); border-radius:var(--r-md); padding:5px 5px 5px 14px;
  transition:border-color .2s, box-shadow .2s;
}
.field:focus-within{ border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-ring); }
.field .ico{ color:var(--ink-3); flex:0 0 auto; display:grid; }
.field input{ border:0; outline:0; background:transparent; flex:1; min-width:0; font-size:16px; color:var(--ink); padding:11px 0; }
.field input::placeholder{ color:var(--ink-3); }
.recents{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.recent{ display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:99px; background:var(--surface-2); border:1px solid var(--line); font-weight:650; font-size:13px; color:var(--ink-2); transition:transform .12s var(--spring), background .2s; }
.recent:active{ transform:scale(.93); }
.recent svg{ width:14px; height:14px; opacity:.6; }
.locsheet-or{ display:flex; align-items:center; gap:12px; color:var(--ink-3); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin:16px 0 2px; }
.locsheet-or::before,.locsheet-or::after{ content:''; height:1px; flex:1; background:var(--line); }

/* ── Bottom-Tab-Bar ─────────────────────────────────────────────────── */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:8px max(var(--pad),10px) calc(8px + env(safe-area-inset-bottom));
  background:var(--glass); backdrop-filter:saturate(1.7) blur(20px); -webkit-backdrop-filter:saturate(1.7) blur(20px);
  border-top:1px solid var(--glass-brd);
}
.tabbar-in{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.tab{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 4px 5px; border-radius:14px; color:var(--ink-3); transition:color .25s; }
.tab .tab-ico{ width:26px; height:26px; display:grid; place-items:center; transition:transform .34s var(--spring); }
.tab .tab-ico svg{ width:24px; height:24px; }
.tab .tab-label{ font-size:10.5px; font-weight:700; letter-spacing:.01em; }
.tab .tab-badge{ position:absolute; top:3px; right:50%; transform:translateX(20px); min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:var(--gold); color:#1a1205; font-size:10px; font-weight:800; display:grid; place-items:center; }
.tab.is-active{ color:var(--brand); }
.tab.is-active .tab-ico{ transform:translateY(-2px) scale(1.08); }
.tab.is-active .tab-ico svg{ fill:var(--brand-soft); }
.tab:active .tab-ico{ transform:scale(.85); }

/* ── Toast ──────────────────────────────────────────────────────────── */
.toast-host{ position:fixed; left:0; right:0; bottom:calc(var(--tabbar-h) + 14px); z-index:60; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 16px; }
.toast{ background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:99px; font-size:13.5px; font-weight:650; box-shadow:var(--sh-pop); opacity:0; transform:translateY(14px) scale(.96); transition:opacity .3s, transform .35s var(--spring); max-width:92vw; display:flex; align-items:center; gap:9px; }
.toast.show{ opacity:1; transform:none; }
.toast svg{ width:18px; height:18px; flex:0 0 auto; }

/* ── Install-Hinweis ────────────────────────────────────────────────── */
.install{
  position:fixed; left:50%; bottom:calc(var(--tabbar-h) + 12px); transform:translateX(-50%) translateY(160%);
  z-index:45; width:min(520px,calc(100% - 24px)); display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border-radius:var(--r-xl); padding:13px 14px;
  box-shadow:var(--sh-pop),var(--sh-glow); transition:transform .5s var(--spring2);
}
.install.show{ transform:translateX(-50%) translateY(0); }
.install .ii{ width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.18); display:grid; place-items:center; flex:0 0 auto; }
.install .it{ flex:1; min-width:0; }
.install .it b{ font-size:14.5px; font-weight:750; }
.install .it span{ display:block; font-size:12.5px; color:rgba(255,255,255,.82); }
.install .ib{ background:#fff; color:var(--brand); border-radius:var(--r-sm); padding:10px 15px; font-weight:750; font-size:14px; flex:0 0 auto; }
.install .ix{ color:rgba(255,255,255,.7); font-size:22px; line-height:1; padding:4px 6px; flex:0 0 auto; }

/* ── Footer / Attribution (CC BY 4.0 – Pflicht) ─────────────────────── */
.attribution{ margin-top:30px; padding-top:20px; border-top:1px solid var(--line); color:var(--ink-2); font-size:12.5px; line-height:1.6; }
.attribution strong{ color:var(--ink); font-weight:650; }
.attribution a{ color:var(--brand); text-decoration:none; font-weight:600; }
.attribution a:hover{ text-decoration:underline; }
.attribution .lic{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:5px 11px; background:var(--surface-2); border:1px solid var(--line); border-radius:99px; font-weight:600; color:var(--ink-2); font-size:11.5px; }
.foot-meta{ margin-top:14px; color:var(--ink-3); font-size:11.5px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.foot-legal{ margin-top:9px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12px; }
.foot-legal a{ color:var(--ink-2); font-weight:600; text-decoration:none; }
.foot-legal a:hover{ color:var(--brand); text-decoration:underline; }

/* ── Reduced Motion / Responsive / Print ────────────────────────────── */
@media (min-width:560px){
  .sheet-actions .btn{ font-size:15px; }
}
@media (max-width:360px){
  .badge{ width:44px; height:44px; }
  .prices{ gap:6px; }
  .tab .tab-label{ font-size:10px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .bg-orbs{ display:none; }
}
@media print{
  .appbar,.tabbar,.filters,.install,.toast-host,.hero-go,.map-fab{ display:none!important; }
  body{ background:#fff; }
}