[hidden] { display:none !important; }
:root {
  --bg: #07141b;
  --surface: rgba(10,24,32,.88);
  --surface-2: rgba(15,34,45,.94);
  --text: #f5fbfd;
  --muted: #9fb4bd;
  --muted-2: #c8d9df;
  --border: rgba(255,255,255,.09);
  --green: #2fd16f;
  --green-2: #16b95e;
  --green-soft: rgba(47,209,111,.14);
  --amber: #ffc464;
  --amber-soft: rgba(255,196,100,.14);
  --red: #ff5a4e;
  --red-soft: rgba(255,90,78,.14);
  --blue: #7cc4ff;
  --blue-soft: rgba(124,196,255,.12);
  --shadow: 0 18px 52px rgba(0,0,0,.34);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.18);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #07141b; }
body {
  margin: 0;
  color: var(--text);
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, rgba(47,209,111,.12), transparent 24rem),
    radial-gradient(circle at 100% 14%, rgba(124,196,255,.10), transparent 22rem),
    linear-gradient(180deg, #07141b 0%, #09161d 100%);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid rgba(124,196,255,.45); outline-offset: 2px; }
img { max-width: 100%; display: block; }
.app-shell { width: min(100%, 800px); margin: 0 auto; padding: 0 18px 116px; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 0 14px;
  background: linear-gradient(to bottom, rgba(7,20,27,.97) 72%, rgba(7,20,27,0));
  backdrop-filter: blur(20px);
}
.brand-row { display: flex; align-items: center; gap: 13px; }
.brand-copy { display:flex; flex-direction:column; justify-content:center; min-height:58px; }
.brand-logo { width: 58px; height: 58px; border-radius: 18px; box-shadow: 0 10px 28px rgba(47,209,111,.18); }
.brand { font-size: 2.12rem; line-height:.92; font-weight: 950; letter-spacing: -.045em; }
.tagline { color: var(--muted); font-size: .78rem; line-height:1.2; margin-top:6px; max-width:390px; font-weight:760; }
.icon-btn { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.05); color: var(--text); }
.promise-strip { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 12px; }
.promise-strip span { padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); color: #d8e6eb; font-size: .73rem; font-weight: 800; }
.hero-card { position: relative; overflow: hidden; padding: 24px; border-radius: 30px; background: linear-gradient(150deg, rgba(14,33,43,.98), rgba(8,20,26,.98)); border: 1px solid var(--border); box-shadow: var(--shadow); }
.hero-card::before { content:""; position:absolute; width:19rem; height:19rem; border-radius:50%; top:-10rem; right:-7rem; background: radial-gradient(circle, rgba(47,209,111,.18), transparent 70%); pointer-events:none; }
.hero-topline { position: relative; z-index: 1; display:flex; justify-content:space-between; gap:10px; align-items:center; }
.decision-badge, .fuel-label { display:inline-flex; align-items:center; min-height:32px; padding:0 11px; border-radius:999px; font-size:.72rem; font-weight:900; letter-spacing:.055em; }
.decision-badge { background: var(--green-soft); color:#9bf2bf; border:1px solid rgba(47,209,111,.16); }
.decision-badge.wait { background: var(--amber-soft); color:#ffd797; border-color:rgba(255,196,100,.18); }
.decision-badge.neutral { background: var(--blue-soft); color:#b9ddfb; border-color:rgba(124,196,255,.15); }
.fuel-label { color:var(--muted-2); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.05); }
/* Auffällige Ein-Klick-Erfassung direkt nach dem Tanken. */
.tank-stop-quick-card { position:relative; z-index:3; margin-top:12px; }
.tank-stop-quick-btn {
  width:100%; min-height:84px; height:84px; border:0; border-radius:21px; padding:12px 14px;
  display:flex; align-items:center; gap:11px; text-align:left;
  background:linear-gradient(135deg,#ffd45f 0%,#ffb72d 58%,#ff9f1c 100%); color:#2a1800;
  box-shadow:0 14px 32px rgba(255,174,37,.30), inset 0 0 0 2px rgba(255,255,255,.42);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.tank-stop-quick-btn:hover { transform:translateY(-1px); box-shadow:0 17px 36px rgba(255,174,37,.36), inset 0 0 0 2px rgba(255,255,255,.50); }
.tank-stop-quick-btn:active { transform:translateY(1px) scale(.995); }
.tank-stop-quick-btn:disabled { opacity:.52; filter:saturate(.55); cursor:not-allowed; box-shadow:none; }
.tank-stop-quick-icon { width:50px; height:50px; flex:0 0 50px; border-radius:15px; display:grid; place-items:center; background:rgba(42,24,0,.12); font-size:1.72rem; }
.tank-stop-quick-copy { min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:3px; }
.tank-stop-quick-copy strong { display:block; line-height:1.05; font-weight:950; }
.tank-stop-quick-title { display:block; font-size:.72rem; letter-spacing:.10em; }
.tank-stop-quick-action { display:block; margin-top:3px; font-size:1.08rem; letter-spacing:.01em; white-space:normal; }
.tank-stop-quick-copy small { font-size:.76rem; line-height:1.25; font-weight:780; color:#5b3500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tank-stop-quick-arrow { width:30px; flex:0 0 30px; font-size:2rem; font-weight:900; line-height:1; text-align:center; }
.tank-stop-dialog-context { margin:2px 0 14px; padding:12px 13px; border-radius:15px; background:var(--green-soft); border:1px solid rgba(47,209,111,.18); }
.tank-stop-dialog-context strong { display:block; font-size:.96rem; }
.tank-stop-dialog-context span { display:block; margin-top:3px; color:var(--muted); font-size:.78rem; line-height:1.35; }
.tank-liter-input-wrap { position:relative; }
.tank-liter-input { padding-right:54px !important; font-size:1.25rem !important; font-weight:900; }
.tank-liter-unit { position:absolute; right:16px; top:50%; transform:translateY(-50%); font-weight:900; color:var(--muted); pointer-events:none; }
.tank-saving-preview { font-size:1.02rem; font-weight:850; line-height:1.35; }
.tank-saving-preview strong { font-size:1.35rem; }
.tank-save-btn { min-height:58px; }
.hero-intro { position: relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-top:14px; }
.hero-kicker { color:#8fe5b0; font-size:.82rem; font-weight:850; letter-spacing:.03em; margin-bottom:4px; }
h1 { margin:0 0 8px; font-size:clamp(2.1rem,7vw,3.5rem); line-height:.94; letter-spacing:-.055em; }
.hero-copy, .section-copy { color:var(--muted); line-height:1.5; }
.hero-copy { margin:0; max-width:38rem; }
.hero-logo { width:118px; min-width:118px; border-radius:24px; background:#fff; padding:4px; box-shadow:0 10px 30px rgba(0,0,0,.18); }
.station-price-row { position:relative; z-index:1; display:flex; justify-content:space-between; gap:14px; align-items:flex-end; padding:19px 0 17px; margin-top:18px; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.station-name { font-size:1.12rem; font-weight:900; }
.station-meta { margin-top:5px; color:var(--muted); font-size:.83rem; line-height:1.4; }
.big-price { font-size:clamp(2.15rem,9vw,3.5rem); font-weight:950; letter-spacing:-.06em; white-space:nowrap; }
.big-price::after { content:" €/l"; font-size:.78rem; color:var(--muted); letter-spacing:0; font-weight:700; }
.big-price.big-price-pending { font-size:clamp(1.35rem,5.5vw,2rem); letter-spacing:-.025em; white-space:normal; line-height:1.05; max-width:11ch; text-align:right; }
.big-price.big-price-pending::after { content:""; }
.trust-line { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:12px; color:var(--muted); font-size:.76rem; line-height:1.35; }
.trust-line strong { color:#dce9ed; }
.trust-dot { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(47,209,111,.10); }
.trust-line.warn .trust-dot { background:var(--amber); box-shadow:0 0 0 4px rgba(255,196,100,.10); }
.trust-line.bad .trust-dot { background:var(--red); box-shadow:0 0 0 4px rgba(255,90,78,.10); }
.metric-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:17px; }
.metric-card { min-height:116px; padding:15px; border-radius:20px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); }
.metric-card.accent { background:linear-gradient(180deg, rgba(47,209,111,.18), rgba(47,209,111,.09)); border-color:rgba(47,209,111,.20); }
.metric-card span, .metric-card small { display:block; color:var(--muted); font-size:.77rem; }
.metric-card strong { display:block; font-size:1.48rem; margin:8px 0 5px; letter-spacing:-.03em; }
.hero-actions { position:relative; z-index:1; display:grid; grid-template-columns:1.2fr 1fr; gap:10px; margin-top:17px; }
.hero-actions .hero-action-wide { grid-column:1 / -1; }
.primary-btn, .secondary-btn, .text-btn, .report-btn, .choice-btn, .map-ctrl { border:0; font-weight:850; }
.primary-btn, .secondary-btn { min-height:50px; border-radius:16px; }
.primary-btn { background:linear-gradient(180deg,#43ea89,#2fd16f); color:#05110b; box-shadow:0 10px 24px rgba(47,209,111,.23); }
.secondary-btn { background:rgba(255,255,255,.065); color:var(--text); border:1px solid rgba(255,255,255,.08); }
.text-btn { background:transparent; color:#8ee8b2; padding:8px 0; min-height:auto; }
.text-btn.left { text-align:left; display:block; margin-top:8px; }
.full { width:100%; margin-top:12px; }
.why-card { position:relative; z-index:1; margin-top:15px; border:1px solid rgba(255,255,255,.07); border-radius:18px; background:rgba(255,255,255,.035); overflow:hidden; }
.why-card summary { padding:13px 15px; cursor:pointer; font-weight:850; color:#dfeaed; }
.why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:0 15px 15px; }
.why-item { padding:11px 12px; border-radius:14px; background:rgba(255,255,255,.045); }
.why-item span { display:block; color:var(--muted); font-size:.7rem; }
.why-item strong { display:block; margin-top:4px; font-size:.86rem; }
.section { margin-top:30px; }
.section-heading { display:flex; justify-content:space-between; gap:12px; align-items:end; margin-bottom:12px; }
.section-heading h2, .dialog h2 { margin:3px 0 0; font-size:1.38rem; letter-spacing:-.025em; }
.eyebrow { color:#8fe5b0; text-transform:uppercase; letter-spacing:.11em; font-weight:900; font-size:.66rem; }
.trend-card, .station-card, .promise-card, .savings-total>div { background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-soft); backdrop-filter:blur(18px); }
.trend-card { border-radius:22px; padding:16px; }
.trend-row { display:flex; justify-content:space-between; gap:15px; align-items:center; }
.trend-row strong { font-size:1.04rem; }
.trend-row p { margin:5px 0 0; color:var(--muted); font-size:.83rem; line-height:1.45; }
.trend-icon { min-width:52px; height:52px; border-radius:17px; display:grid; place-items:center; font-size:1.45rem; background:rgba(255,255,255,.06); }
.map-controls { display:flex; gap:7px; }
.map-ctrl { width:38px; height:38px; border-radius:12px; color:var(--text); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); font-size:1.2rem; }
.demo-map-wrap { position:relative; margin-top:12px; }
.demo-map-label { margin-bottom:7px; color:var(--muted); font-size:.7rem; }
.demo-map { position:relative; height:330px; overflow:hidden; border-radius:24px; border:1px solid rgba(255,255,255,.08); background:
  linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 44px 44px,
  linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 44px 44px,
  radial-gradient(circle at 35% 35%, rgba(47,209,111,.08), transparent 40%),
  linear-gradient(160deg,#10232d,#0a1921);
  box-shadow:var(--shadow-soft);
}
.demo-map::before, .demo-map::after { content:""; position:absolute; border-radius:999px; background:rgba(124,196,255,.10); transform:rotate(-18deg); }
.demo-map::before { width:120%; height:26px; left:-12%; top:46%; }
.demo-map::after { width:75%; height:14px; left:20%; top:22%; transform:rotate(34deg); }
.map-pin { position:absolute; transform:translate(-50%,-50%); z-index:3; border:0; }
.map-pin.dot { width:18px; height:18px; border-radius:50%; background:var(--green); box-shadow:0 0 0 6px rgba(47,209,111,.13), 0 6px 18px rgba(0,0,0,.26); }
.map-pin.dot.mid { background:var(--amber); box-shadow:0 0 0 6px rgba(255,196,100,.12),0 6px 18px rgba(0,0,0,.26); }
.map-pin.dot.high { background:var(--red); box-shadow:0 0 0 6px rgba(255,90,78,.12),0 6px 18px rgba(0,0,0,.26); }
.map-pin.price, .map-pin.detail { border-radius:999px; padding:8px 10px; background:#f8fcfd; color:#07141b; box-shadow:0 8px 24px rgba(0,0,0,.28); white-space:nowrap; font-size:.76rem; font-weight:900; }
.map-pin.detail { border-radius:14px; padding:9px 11px; text-align:left; }
.map-pin.detail small { display:block; margin-top:2px; color:#52646c; font-size:.63rem; font-weight:700; }
.station-list { display:grid; gap:12px; }
.station-card { border-radius:22px; padding:15px; }
.station-card.best { border-color:rgba(47,209,111,.34); box-shadow:inset 0 0 0 1px rgba(47,209,111,.08), var(--shadow-soft); }
.station-card.flash { animation:flashCard 1.2s ease; }
.station-card-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.station-card h3 { margin:0 0 3px; font-size:1.03rem; }
.station-card .sub { color:var(--muted); font-size:.79rem; line-height:1.4; }
.station-card-price { font-size:1.48rem; font-weight:950; letter-spacing:-.04em; white-space:nowrap; }
.station-card-price small { font-size:.69rem; color:var(--muted); }
.station-info { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:13px; }
.info-pill { padding:10px; border-radius:14px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.05); }
.info-pill span { display:block; color:var(--muted); font-size:.67rem; }
.info-pill strong { display:block; margin-top:4px; font-size:.83rem; }
.station-data-line { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:11px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); color:var(--muted); font-size:.72rem; }
.reliability-pill { padding:5px 8px; border-radius:999px; background:var(--green-soft); color:#9af0bd; font-weight:850; }
.reliability-pill.warn { background:var(--amber-soft); color:#ffd89b; }
.reliability-pill.bad { background:var(--red-soft); color:#ffb1ab; }
.station-live { margin-top:10px; color:var(--muted); font-size:.77rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
.live-positive { color:#8fe8b5; }
.live-warning { color:#ffd98b; }
.live-bad { color:#ffb0aa; }
.input { width:100%; min-height:50px; border-radius:15px; border:1px solid rgba(255,255,255,.08); background:var(--surface-2); color:var(--text); padding:0 13px; outline:none; }
.input:focus { border-color:rgba(47,209,111,.4); box-shadow:0 0 0 4px rgba(47,209,111,.10); }
.field-label { display:block; margin:14px 0 7px; color:#dce7eb; font-weight:800; font-size:.81rem; }
.quick-report-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }
.report-btn { min-height:50px; border-radius:15px; padding:10px; background:rgba(255,255,255,.06); color:var(--text); border:1px solid rgba(255,255,255,.08); }
.report-btn.warning { border-color:rgba(255,196,100,.20); background:rgba(255,196,100,.07); }
.report-btn.danger { border-color:rgba(255,90,78,.20); background:rgba(255,90,78,.07); }
.report-feedback { min-height:22px; margin-top:10px; color:#96eeb8; font-size:.81rem; }
.savings-total { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.savings-total>div { border-radius:20px; padding:16px; }
.savings-total span { display:block; color:var(--muted); font-size:.75rem; }
.savings-total strong { display:block; margin-top:6px; font-size:1.56rem; }
.savings-history { margin-top:10px; display:grid; gap:8px; }
.saving-row { display:flex; justify-content:space-between; gap:12px; padding:12px 13px; border-radius:15px; background:rgba(255,255,255,.038); border:1px solid rgba(255,255,255,.05); font-size:.82rem; }
.saving-row span { color:var(--muted); }
.saving-row strong { color:#93ecb7; }
.promise-card { border-radius:24px; padding:20px; }
.promise-card h2 { margin:5px 0 8px; }
.promise-card p { margin:0; color:var(--muted); line-height:1.5; }
.bottom-nav { position:fixed; z-index:40; left:50%; transform:translateX(-50%); bottom:max(12px, env(safe-area-inset-bottom)); width:min(calc(100% - 24px),760px); display:grid; grid-template-columns:repeat(4,1fr); padding:8px; border-radius:22px; border:1px solid rgba(255,255,255,.08); background:rgba(8,20,27,.88); backdrop-filter:blur(22px); box-shadow:var(--shadow); }
.nav-item { border:0; background:transparent; color:var(--muted); padding:12px 5px; border-radius:15px; font-size:.77rem; font-weight:850; }
.nav-item.active { background:rgba(47,209,111,.13); color:#9ef2c1; }
.dialog { width:min(calc(100% - 24px),620px); max-height:90vh; overflow:auto; border-radius:26px; border:1px solid rgba(255,255,255,.08); padding:20px; background:rgba(10,22,29,.98); color:var(--text); box-shadow:var(--shadow); }
.dialog::backdrop { background:rgba(0,0,0,.70); backdrop-filter:blur(5px); }
.dialog-header, .onboarding-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.onboarding-head { justify-content:flex-start; align-items:center; }
.onboarding-logo { width:64px; height:64px; border-radius:18px; }
.onboarding-step { display:none; margin-top:20px; }
.onboarding-step.active { display:block; }
.step-label { color:#8fe5b0; font-size:.73rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.onboarding-step h3 { margin:6px 0 12px; font-size:1.45rem; }
.choice-grid { display:grid; gap:10px; }
.fuel-choice { grid-template-columns:repeat(3,1fr); }
.tank-choice { grid-template-columns:repeat(2,1fr); }
.choice-btn { min-height:58px; border-radius:16px; background:rgba(255,255,255,.055); color:var(--text); border:1px solid rgba(255,255,255,.08); }
.choice-btn.selected { background:var(--green-soft); color:#9bf1bd; border-color:rgba(47,209,111,.26); box-shadow:inset 0 0 0 1px rgba(47,209,111,.08); }
.onboarding-actions { display:grid; grid-template-columns:1fr 1.3fr; gap:10px; margin-top:20px; }
.privacy-note, .settings-promise { margin-top:14px; padding:12px 13px; border-radius:15px; background:rgba(255,255,255,.045); color:var(--muted); font-size:.79rem; line-height:1.45; }
.settings-promise strong, .settings-promise span { display:block; }
.settings-promise strong { color:#dfeaed; margin-bottom:3px; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.range-row { display:flex; align-items:center; gap:14px; }
.range-row input { flex:1; accent-color:var(--green); }
.checkbox-row { display:flex; gap:10px; align-items:flex-start; margin-top:17px; color:var(--muted); font-size:.82rem; line-height:1.45; }
.saving-preview { margin-top:14px; padding:14px; border-radius:16px; background:var(--green-soft); color:#a8f4c8; }
.empty { color:var(--muted); font-size:.82rem; padding:10px 0; }
@keyframes flashCard { 0%{box-shadow:0 0 0 0 rgba(47,209,111,.7)} 100%{box-shadow:0 0 0 18px rgba(47,209,111,0)} }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }
@media (max-width:620px) {
  .hero-intro { flex-direction:column; }
  .hero-logo { width:92px; min-width:92px; }
  .why-grid { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .app-shell { padding-left:13px; padding-right:13px; }
  .hero-card { padding:18px; border-radius:24px; }
  .station-price-row { flex-direction:column; align-items:flex-start; }
  .metric-grid, .hero-actions, .two-col, .savings-total { grid-template-columns:1fr; }
  .station-info { grid-template-columns:repeat(3,1fr); }
  .fuel-choice { grid-template-columns:1fr; }
  .tagline { max-width:235px; }
}
.map-pin.selected { outline: 3px solid rgba(124,196,255,.7); outline-offset: 4px; }

/* TankLina 0.4 – vereinfachte, stärker handlungsorientierte Oberfläche */
.saving-spotlight {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(47,209,111,.20), rgba(47,209,111,.075));
  border: 1px solid rgba(47,209,111,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.saving-spotlight span,
.saving-spotlight small { display:block; color:#b8d3c2; }
.saving-spotlight span { font-size:.82rem; font-weight:800; }
.saving-spotlight strong {
  display:block;
  margin:4px 0 1px;
  font-size:clamp(2.45rem,10vw,4rem);
  line-height:1;
  letter-spacing:-.055em;
  color:#9bf2bd;
}
.saving-spotlight small { font-size:.74rem; }
.hero-card.decision-tank .saving-spotlight { box-shadow:0 0 0 1px rgba(47,209,111,.05), 0 12px 34px rgba(47,209,111,.08); }
.metric-grid.single { grid-template-columns:1fr; }
.metric-grid.single .metric-card { min-height:auto; }
.visually-secondary { width:100%; opacity:.7; font-size:.68rem; }

.station-simple-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:13px;
}
.station-saving,
.station-facts {
  min-height:68px;
  padding:11px 12px;
  border-radius:15px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.05);
}
.station-saving { background:linear-gradient(180deg, rgba(47,209,111,.13), rgba(47,209,111,.06)); }
.station-saving span,
.station-facts span { display:block; color:var(--muted); font-size:.69rem; }
.station-saving strong,
.station-facts strong { display:block; margin-top:4px; font-size:1rem; }
.station-saving strong { color:#99efba; font-size:1.18rem; }
.station-facts span { margin-top:4px; }
.reliability-pill { font-size:.7rem; }

.report-btn.wait-none { border-color:rgba(47,209,111,.22); background:rgba(47,209,111,.075); }
.report-btn.wait-short { border-color:rgba(180,215,112,.22); background:rgba(180,215,112,.055); }
.report-btn.wait-mid { border-color:rgba(255,196,100,.24); background:rgba(255,196,100,.065); }
.report-btn.wait-long { border-color:rgba(255,124,87,.24); background:rgba(255,124,87,.07); }
.report-btn.price-ok { border-color:rgba(47,209,111,.22); }
.report-btn.price-wrong { border-color:rgba(124,196,255,.20); }

.reported-price-context {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-top:14px;
  padding:12px 13px;
  border-radius:15px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.06);
}
.reported-price-context span { color:var(--muted); font-size:.78rem; }
.reported-price-context strong { font-size:1.05rem; }
.price-input-row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.price-input-row > span { color:var(--muted-2); font-weight:800; }
.field-help { margin:7px 0 0; color:var(--muted); font-size:.75rem; line-height:1.4; }

@media (max-width:520px) {
  .station-simple-row { grid-template-columns:1fr; }
  .quick-report-grid { grid-template-columns:1fr; }
}

/* TankLina 0.5 – Community-Preismeldung mit Kraftstoffauswahl */
.price-fuel-choice {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:8px;
}
.price-fuel-btn {
  min-height:46px;
  padding:0 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.055);
  color:var(--text);
  font-weight:850;
}
.price-fuel-btn.selected {
  background:var(--green-soft);
  border-color:rgba(47,209,111,.32);
  color:#9cf2be;
  box-shadow:inset 0 0 0 1px rgba(47,209,111,.08);
}
.selected-fuel-note {
  margin-top:9px;
  color:#a9eec2;
  font-size:.76rem;
  font-weight:800;
}
.aux-community-price {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-top:11px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(124,196,255,.055);
  border:1px solid rgba(124,196,255,.12);
}
.aux-community-price strong {
  color:#d8edf8;
  font-size:.76rem;
}
.aux-community-price span {
  color:var(--muted);
  font-size:.74rem;
  text-align:right;
}
@media (max-width:620px) {
  .price-fuel-choice { grid-template-columns:1fr 1fr; }
  .aux-community-price { align-items:flex-start; flex-direction:column; }
  .aux-community-price span { text-align:left; }
}

/* TankLina 0.6 – klare Themenkapitel statt optischem Einheitsblock */
.quick-jump {
  margin-top: 18px;
  padding: 15px;
  border-radius: 22px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.065);
  box-shadow: var(--shadow-soft);
}
.quick-jump-title {
  margin: 0 0 10px 2px;
  color: var(--muted-2);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.quick-jump-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}
.quick-jump-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 64px;
  padding: 10px 11px;
  text-align: left;
  border-radius: 17px;
  color: var(--text);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
}
.quick-jump-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.quick-jump-btn strong, .quick-jump-btn small { display: block; }
.quick-jump-btn strong { font-size: .85rem; }
.quick-jump-btn small { margin-top: 2px; color: var(--muted); font-size: .66rem; line-height: 1.25; }
.quick-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-weight: 950;
  background: rgba(255,255,255,.06);
}
.quick-jump-btn.map .quick-icon { color:#a8d9ff; background:rgba(124,196,255,.12); }
.quick-jump-btn.stations .quick-icon { color:#9cebc0; background:rgba(47,209,111,.11); }
.quick-jump-btn.live { border-color:rgba(255,196,100,.16); }
.quick-jump-btn.live .quick-icon { color:#ffd28a; background:rgba(255,196,100,.11); }
.quick-jump-btn.savings .quick-icon { color:#a8f1c5; background:rgba(47,209,111,.12); }

.section-chapter {
  position: relative;
  scroll-margin-top: 96px;
  margin-top: 38px;
  padding: 20px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.075);
  box-shadow: var(--shadow-soft);
}
.section-chapter::before {
  content:"";
  position:absolute;
  left:0;
  top:22px;
  bottom:22px;
  width:3px;
  border-radius:999px;
  opacity:.9;
}
.section-trend { background:linear-gradient(145deg, rgba(25,51,48,.34), rgba(11,24,31,.66)); }
.section-trend::before { background:#72dca0; }
.section-map { background:linear-gradient(145deg, rgba(30,52,70,.38), rgba(11,24,31,.68)); }
.section-map::before { background:#7cc4ff; }
.section-stations { background:linear-gradient(145deg, rgba(19,48,47,.34), rgba(11,24,31,.66)); }
.section-stations::before { background:#47d2ad; }
.section-live { background:linear-gradient(145deg, rgba(58,46,29,.30), rgba(11,24,31,.70)); border-color:rgba(255,196,100,.13); }
.section-live::before { background:#ffc464; }
.section-savings { background:linear-gradient(145deg, rgba(22,52,38,.38), rgba(11,24,31,.68)); }
.section-savings::before { background:#43df83; }
.chapter-heading { margin-bottom: 16px; }
.chapter-title-row { display:flex; gap:12px; align-items:center; }
.chapter-icon {
  width: 46px;
  height: 46px;
  min-width:46px;
  display:grid;
  place-items:center;
  border-radius:15px;
  font-size:1.2rem;
  font-weight:950;
  border:1px solid rgba(255,255,255,.06);
}
.chapter-icon.trend { background:rgba(114,220,160,.10); color:#9aebbb; }
.chapter-icon.map { background:rgba(124,196,255,.11); color:#aad9ff; }
.chapter-icon.stations { background:rgba(71,210,173,.10); color:#9ce8d1; }
.chapter-icon.live { background:rgba(255,196,100,.11); color:#ffd18a; }
.chapter-icon.savings { background:rgba(67,223,131,.11); color:#a5f1c3; }
.chapter-heading h2 { font-size: clamp(1.45rem, 4vw, 1.78rem); margin-top:2px; }
.chapter-heading .eyebrow { opacity:.95; }
.section-chapter .section-copy { margin: 0 0 14px 58px; }

.bottom-nav .nav-item { display:flex; flex-direction:column; align-items:center; gap:3px; }
.bottom-nav .nav-item > span { display:block; font-size:1rem; line-height:1; }
.bottom-nav .nav-live { color:#e7c588; }
.bottom-nav .nav-live.active { background:rgba(255,196,100,.12); color:#ffd18a; }

.dialog-close-btn {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
}
.dialog-action-stack { margin-top: 10px; }
.text-cancel-btn {
  display:block;
  width:100%;
  margin-top:8px;
  padding:10px 8px;
  border:0;
  background:transparent;
  color:var(--muted-2);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}
.text-cancel-btn:hover { color:var(--text); }

@media (max-width: 700px) {
  .quick-jump-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 520px) {
  .section-chapter { padding:16px; border-radius:22px; }
  .chapter-icon { width:42px; height:42px; min-width:42px; }
  .section-chapter .section-copy { margin-left:0; }
  .quick-jump { padding:12px; }
  .quick-jump-btn { min-height:58px; }
}

/* TankLina 0.7 – Symbol zuerst, leichte Sprache, weniger Text */
.compact-help { margin:8px 0 0; font-size:.8rem; }
.icon-action { display:flex; align-items:center; justify-content:center; gap:9px; }
.icon-action > span:first-child { font-size:1.1rem; line-height:1; }
.metric-symbol { display:inline-grid !important; place-items:center; width:28px; height:28px; border-radius:10px; margin-bottom:4px; background:rgba(124,196,255,.10); color:#b9defa !important; font-size:1rem !important; }
.visually-secondary { display:none !important; }

.quick-jump { padding:10px; }
.quick-jump-grid { gap:8px; }
.quick-jump-btn {
  min-height:86px;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  gap:7px;
  padding:10px 6px;
}
.quick-jump-btn strong { font-size:.8rem; }
.quick-icon {
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:14px;
  font-size:1.35rem;
}

.section-chapter { padding-top:18px; }
.chapter-title-row { gap:14px; }
.chapter-icon {
  width:56px;
  height:56px;
  min-width:56px;
  border-radius:18px;
  font-size:1.55rem;
}
.chapter-heading h2 { font-size:clamp(1.7rem,5vw,2.05rem); letter-spacing:-.035em; }
.chapter-heading .eyebrow { font-size:.62rem; letter-spacing:.15em; }
.chapter-action-btn {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.055);
  color:#a8efc2;
  font-size:1.25rem;
  font-weight:900;
}

.trend-row { min-height:74px; }
.trend-copy strong { font-size:1.12rem; }
.trend-copy p { font-size:.82rem; margin-top:4px; }
.trend-icon { width:58px; min-width:58px; height:58px; font-size:1.75rem; }

.hero-copy { font-size:.92rem; }
.saving-spotlight span { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.saving-spotlight small { margin-top:5px; font-size:.72rem; }
.trust-line { gap:6px; }
.trust-line strong { font-size:.78rem; }
.metric-card > span:not(.metric-symbol) { font-size:.7rem; }
.why-card summary { font-size:.82rem; }

/* Community: Zahlen und Symbole sind die primäre Sprache */
.quick-report-grid { gap:10px; }
.report-btn {
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
}
.report-time { flex-direction:column; gap:1px; }
.report-time strong { font-size:1.6rem; line-height:1; letter-spacing:-.04em; }
.report-time span { color:var(--muted-2); font-size:.72rem; font-weight:800; }
.report-icon strong {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:rgba(255,255,255,.07);
  font-size:1.45rem;
  line-height:1;
}
.report-icon span { font-size:.8rem; font-weight:850; }
.report-feedback { font-size:.8rem; font-weight:800; }

.station-card h3 { font-size:1.04rem; }
.station-card .sub { font-size:.73rem; }
.station-saving span { font-size:1rem; font-weight:900; color:#91edb6; }
.station-saving strong { font-size:1.28rem; }
.station-facts strong { font-size:.95rem; }
.station-facts span { font-size:.72rem; }
.station-data-line { align-items:center; }
.reliability-pill { font-size:.68rem; }
.station-live { font-size:.75rem; }

/* Dialoge: kurze Fragen, klare Auswahl */
.dialog-header h2 { font-size:1.55rem; }
.price-fuel-choice { gap:7px; }
.price-fuel-btn { min-height:52px; font-size:.82rem; }
.selected-fuel-note { margin-top:7px; }
.reported-price-context { margin-top:10px; }
.field-help { font-size:.7rem; }
.text-cancel-btn { text-decoration:none; font-size:.82rem; }

.tank-level-choice { flex-direction:column; gap:2px; }
.tank-level-choice strong { display:block; font-size:1.5rem; line-height:1; }
.tank-level-choice span { display:block; color:var(--muted-2); font-size:.72rem; }

.bottom-nav .nav-item { min-height:58px; justify-content:center; gap:5px; }
.bottom-nav .nav-item > span { font-size:1.25rem; }
.bottom-nav .nav-item > small { display:block; font-size:.64rem; font-weight:850; }

@media (max-width:700px) {
  .quick-jump-grid { grid-template-columns:repeat(4,1fr); }
  .quick-jump-btn { min-height:78px; }
  .quick-jump-btn strong { font-size:.68rem; }
  .quick-icon { width:38px; height:38px; min-width:38px; }
}
@media (max-width:520px) {
  .chapter-icon { width:50px; height:50px; min-width:50px; }
  .quick-report-grid { grid-template-columns:1fr 1fr; }
  .report-btn { min-height:72px; }
  .report-icon { flex-direction:column; gap:4px; }
  .report-icon strong { width:30px; height:30px; font-size:1.25rem; }
  .report-icon span { font-size:.7rem; }
  .price-fuel-choice { grid-template-columns:1fr 1fr; }
}
.tank-level-choice { display:flex; align-items:center; justify-content:center; }

/* =========================================================
   TankLina 0.8 – Cinematic Clean + Soft Gaming Utility
   Heller Standard, klare Kapitel, mehr Tiefe und Mikro-Motion
   ========================================================= */
:root {
  --tl-paper:#f4f8f5;
  --tl-paper-2:#eef5f1;
  --tl-ink:#0b1e22;
  --tl-muted:#5f7479;
  --tl-card:#ffffff;
  --tl-line:rgba(9,41,45,.10);
  --tl-green:#159957;
  --tl-green-bright:#32d478;
  --tl-green-soft:#e8f8ef;
  --tl-blue:#3e8ec9;
  --tl-blue-soft:#e8f3fb;
  --tl-teal:#0e9e86;
  --tl-teal-soft:#e6f7f3;
  --tl-gold:#c88920;
  --tl-gold-soft:#fff5dc;
  --tl-red:#c95149;
  --tl-red-soft:#fff0ee;
  --tl-shadow:0 24px 70px rgba(24,57,57,.13);
  --tl-shadow-soft:0 12px 34px rgba(24,57,57,.09);
}
html { background:var(--tl-paper); }
body.theme-light {
  color-scheme:light;
  --text:var(--tl-ink);
  --muted:var(--tl-muted);
  --muted-2:#3f5b60;
  --surface:rgba(255,255,255,.88);
  --surface-2:#fff;
  --surface-3:#f3f7f5;
  --border:var(--tl-line);
  --green:var(--tl-green-bright);
  --green-2:var(--tl-green);
  --green-soft:rgba(21,153,87,.10);
  --amber:#e0a33a;
  --amber-soft:rgba(224,163,58,.12);
  --red:#d55d54;
  --red-soft:rgba(213,93,84,.11);
  --blue:#4a9bd3;
  --blue-soft:rgba(74,155,211,.10);
  --shadow:var(--tl-shadow);
  --shadow-soft:var(--tl-shadow-soft);
  background:
    radial-gradient(circle at 12% 0%, rgba(50,212,120,.16), transparent 25rem),
    radial-gradient(circle at 94% 14%, rgba(74,155,211,.15), transparent 24rem),
    radial-gradient(circle at 36% 82%, rgba(14,158,134,.10), transparent 26rem),
    linear-gradient(180deg,#f8fbf9 0%,#f2f7f4 48%,#edf5f1 100%);
}
.cinematic-backdrop { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.cinematic-backdrop i { position:absolute; border-radius:999px; filter:blur(18px); opacity:.5; animation:auroraDrift 18s ease-in-out infinite alternate; }
.cinematic-backdrop i:nth-child(1){ width:32rem;height:12rem;left:-9rem;top:9rem;background:linear-gradient(90deg,rgba(47,209,111,.12),rgba(124,196,255,.04));transform:rotate(-18deg); }
.cinematic-backdrop i:nth-child(2){ width:27rem;height:10rem;right:-8rem;top:33rem;background:linear-gradient(90deg,rgba(124,196,255,.10),rgba(47,209,111,.04));transform:rotate(22deg);animation-delay:-6s; }
.cinematic-backdrop i:nth-child(3){ width:22rem;height:9rem;left:28%;bottom:5rem;background:rgba(255,196,100,.08);animation-delay:-11s; }
.scroll-progress { position:fixed; top:0; left:0; z-index:100; height:3px; width:0; background:linear-gradient(90deg,#18a760,#47d989,#5ca9e8); box-shadow:0 0 18px rgba(24,167,96,.35); transition:width .08s linear; }
.fx-layer { position:fixed; inset:0; z-index:120; pointer-events:none; overflow:hidden; }
.app-toast { position:fixed; z-index:130; left:50%; bottom:92px; transform:translate(-50%,18px); padding:11px 16px; border-radius:999px; background:#0d2528; color:#fff; font-size:.8rem; font-weight:850; box-shadow:0 14px 34px rgba(0,0,0,.22); opacity:0; visibility:hidden; transition:.24s ease; }
.app-toast.show { opacity:1; visibility:visible; transform:translate(-50%,0); }
.app-shell { width:min(100%,920px); padding-left:20px; padding-right:20px; }
.topbar { background:linear-gradient(to bottom,rgba(248,251,249,.96) 72%,rgba(248,251,249,0)); color:var(--tl-ink); }
.brand-logo { box-shadow:0 12px 28px rgba(21,153,87,.16); }
.eyebrow,.hero-kicker { color:var(--tl-green); }
.brand { color:var(--tl-ink); }
.tagline { color:var(--tl-muted); }
.icon-btn { color:var(--tl-ink); background:rgba(255,255,255,.8); border-color:var(--tl-line); box-shadow:var(--tl-shadow-soft); }

/* Hero bleibt cineastisch dunkel und wird dadurch zur klaren Bühne */
.hero-card { color:#f7fffa; padding:28px; border:none; background:
  radial-gradient(circle at 88% 18%,rgba(59,226,135,.25),transparent 19rem),
  radial-gradient(circle at 10% 110%,rgba(74,155,211,.16),transparent 22rem),
  linear-gradient(145deg,#123138 0%,#0b2027 47%,#08171d 100%); box-shadow:0 32px 82px rgba(13,44,47,.24); }
.hero-card::before { width:28rem;height:28rem;right:-14rem;top:-14rem;background:radial-gradient(circle,rgba(64,234,142,.26),transparent 66%); animation:heroGlow 8s ease-in-out infinite alternate; }
.hero-card::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.14; background:repeating-linear-gradient(118deg,transparent 0 34px,rgba(255,255,255,.07) 35px,transparent 36px 68px); mask-image:linear-gradient(to bottom,black,transparent 75%); }
.hero-atmosphere { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.hero-atmosphere .beam { position:absolute; height:2px; width:55%; border-radius:99px; background:linear-gradient(90deg,transparent,rgba(82,238,152,.38),transparent); transform:rotate(-24deg); animation:beamSweep 7s ease-in-out infinite; }
.hero-atmosphere .beam-a { top:24%; right:-12%; }
.hero-atmosphere .beam-b { top:65%; left:-18%; animation-delay:-3.5s; transform:rotate(17deg); }
.hero-atmosphere .pulse-ring { position:absolute; width:12rem;height:12rem;border:1px solid rgba(83,231,151,.16);border-radius:50%;right:3rem;top:8rem;animation:ringPulse 4.8s ease-out infinite; }
.hero-atmosphere .ring-b { animation-delay:-2.4s; }
.hero-card h1,.hero-card .station-name,.hero-card .big-price,.hero-card .metric-card strong,.hero-card .why-card summary { color:#fff; }
.hero-copy,.station-meta,.hero-card .trust-line,.hero-card .metric-card span,.hero-card .metric-card small { color:#b8d0d4; }
.hero-card .fuel-label { color:#ddf4e8; background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.09); }
.hero-card .decision-badge { color:#b9ffd4;background:rgba(54,211,122,.14);border-color:rgba(54,211,122,.24); }
.hero-card .trust-line strong { color:#fff; }
.hero-logo { transform:rotate(1.5deg); box-shadow:0 18px 45px rgba(0,0,0,.28); animation:logoFloat 6s ease-in-out infinite; }
.saving-spotlight { display:flex; align-items:center; justify-content:space-between; gap:18px; background:linear-gradient(135deg,rgba(49,214,119,.23),rgba(39,136,93,.10)); border-color:rgba(72,231,143,.30); box-shadow:0 18px 40px rgba(36,183,103,.12), inset 0 1px rgba(255,255,255,.08); }
.saving-copy { position:relative; z-index:2; }
.saving-spotlight strong { color:#a7f5c3; text-shadow:0 0 25px rgba(57,219,130,.17); }
.saving-signal { min-width:120px; height:56px; display:flex; align-items:flex-end; justify-content:flex-end; gap:5px; opacity:.75; }
.saving-signal i { width:7px; border-radius:999px; background:linear-gradient(#a7f5c3,#2bd074); animation:signalBars 1.8s ease-in-out infinite alternate; transform-origin:bottom; }
.saving-signal i:nth-child(1){height:22%;}.saving-signal i:nth-child(2){height:48%;animation-delay:-.3s}.saving-signal i:nth-child(3){height:34%;animation-delay:-.6s}.saving-signal i:nth-child(4){height:72%;animation-delay:-.9s}.saving-signal i:nth-child(5){height:58%;animation-delay:-1.2s}.saving-signal i:nth-child(6){height:92%;animation-delay:-1.5s}
.hero-card .metric-card,.hero-card .why-card { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.10); }
.hero-card .why-item { background:rgba(255,255,255,.065); }
.hero-card .primary-btn { position:relative; overflow:hidden; }
.hero-card .primary-btn::after { content:""; position:absolute; top:-40%; left:-35%; width:28%; height:180%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:rotate(20deg); animation:buttonGleam 4.4s ease-in-out infinite; }
.hero-card .secondary-btn { color:#fff; background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.10); }

/* Navigations-Dock: klare Modi */
.quick-jump { margin-top:18px; background:rgba(255,255,255,.82); border:1px solid var(--tl-line); box-shadow:var(--tl-shadow-soft); backdrop-filter:blur(22px); }
.quick-jump-btn { color:var(--tl-ink); background:linear-gradient(180deg,#fff,#f8fbf9); border:1px solid rgba(9,41,45,.08); box-shadow:0 7px 20px rgba(25,60,60,.06); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.quick-jump-btn:hover { transform:translateY(-4px); box-shadow:0 15px 30px rgba(25,60,60,.11); }
.quick-jump-btn.map{border-bottom:3px solid #67ace0}.quick-jump-btn.stations{border-bottom:3px solid #42c8ae}.quick-jump-btn.live{border-bottom:3px solid #e3b24a}.quick-jump-btn.savings{border-bottom:3px solid #4bcb7f}
.quick-icon { background:#f3f7f5; box-shadow:inset 0 0 0 1px rgba(9,41,45,.06); }
.quick-jump-btn.map .quick-icon{color:#317db6;background:#eaf5fc}.quick-jump-btn.stations .quick-icon{color:#087d6b;background:#e9f8f4}.quick-jump-btn.live .quick-icon{color:#986713;background:#fff5df}.quick-jump-btn.savings .quick-icon{color:#157d4b;background:#eaf8f0}
.ui-glyph { font-family:ui-sans-serif,system-ui,sans-serif; font-weight:900; }
.live-glyph { letter-spacing:-.18em; }

/* Kapitel wirken wie eigene Szenen statt Einheitskarten */
.section-chapter { position:relative; overflow:hidden; padding:24px; border-radius:30px; border:1px solid var(--tl-line); box-shadow:var(--tl-shadow-soft); color:var(--tl-ink); background:#fff; }
.section-chapter::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.72; }
.section-chapter::after { content:attr(data-scene); position:absolute; top:10px; right:20px; font-size:5.8rem; line-height:1; font-weight:950; letter-spacing:-.08em; opacity:.045; pointer-events:none; }
.section-trend { background:linear-gradient(145deg,#fbfffc,#edf9f2); border-color:rgba(21,153,87,.16); }
.section-trend::before { background:radial-gradient(circle at 10% 0%,rgba(50,212,120,.13),transparent 18rem); }
.section-map { background:linear-gradient(145deg,#fbfdff,#eef6fc); border-color:rgba(62,142,201,.17); }
.section-map::before { background:radial-gradient(circle at 90% 0%,rgba(74,155,211,.13),transparent 18rem); }
.section-stations { background:linear-gradient(145deg,#fbfffe,#ecf8f5); border-color:rgba(14,158,134,.17); }
.section-stations::before { background:radial-gradient(circle at 0% 20%,rgba(14,158,134,.10),transparent 19rem); }
.section-live { background:linear-gradient(145deg,#fffefa,#fff5df); border-color:rgba(200,137,32,.18); }
.section-live::before { background:radial-gradient(circle at 92% 4%,rgba(255,196,100,.20),transparent 18rem); }
.section-savings { background:linear-gradient(145deg,#fbfffc,#eaf8f0); border-color:rgba(21,153,87,.16); }
.section-savings::before { background:radial-gradient(circle at 90% 8%,rgba(47,209,111,.15),transparent 17rem); }
.chapter-heading,.trend-card,.demo-map-wrap,.station-list,.quick-report-grid,.savings-total,.savings-moment,.field-label,.section-chapter>.input,.section-chapter>.secondary-btn,.report-feedback { position:relative; z-index:2; }
.chapter-heading h2 { color:var(--tl-ink); font-size:clamp(2rem,5vw,2.55rem); }
.chapter-icon { box-shadow:0 10px 24px rgba(31,66,67,.09); border:1px solid rgba(9,41,45,.06); }
.chapter-icon.trend{background:#e9f8ef;color:#137b48}.chapter-icon.map{background:#e8f3fb;color:#2f7fb8}.chapter-icon.stations{background:#e6f7f3;color:#087d6b}.chapter-icon.live{background:#fff2d5;color:#a16d18}.chapter-icon.savings{background:#e8f8ef;color:#157d4b}
.chapter-action-btn,.map-ctrl { color:var(--tl-ink); background:#fff; border-color:var(--tl-line); box-shadow:0 7px 18px rgba(25,60,60,.07); }
.trend-card,.station-card,.savings-total>div { background:rgba(255,255,255,.86); border-color:rgba(9,41,45,.09); box-shadow:0 10px 28px rgba(28,62,63,.07); color:var(--tl-ink); }
.trend-copy p,.station-card .sub,.station-data-line,.station-live,.savings-total span,.empty,.saving-row span { color:var(--tl-muted); }
.trend-icon { background:#fff; box-shadow:0 8px 20px rgba(25,60,60,.08); }
.station-card { transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.station-card:hover { transform:translateY(-2px); box-shadow:0 16px 36px rgba(28,62,63,.10); }
.station-card.best { border-color:rgba(21,153,87,.28); box-shadow:0 18px 38px rgba(21,153,87,.10); }
.station-card h3,.station-card-price,.station-facts strong { color:var(--tl-ink); }
.station-saving,.station-facts { background:#f6faf8; border-color:rgba(9,41,45,.07); }
.station-saving { background:linear-gradient(145deg,#effaf3,#e5f7ec); }
.station-saving strong,.station-saving span { color:#157d4b; }
.station-facts span { color:var(--tl-muted); }
.station-data-line { border-color:rgba(9,41,45,.08); }
.reliability-pill { background:#e8f8ef;color:#157d4b; }
.reliability-pill.warn { background:#fff4d9;color:#7d5817; }.reliability-pill.bad { background:#ffedeb;color:#97433d; }
.live-positive{color:#157d4b}.live-warning{color:#8f681d}.live-bad{color:#a84a43}
.aux-community-price { background:#f4f8f6 !important; border-color:rgba(9,41,45,.07) !important; color:var(--tl-ink); }

/* Karte bekommt Radar-/Navigationstiefe */
.demo-map-label { display:flex; align-items:center; justify-content:space-between; color:var(--tl-muted); }
.map-key { display:flex; align-items:center; gap:6px; }
.map-key i { width:9px;height:9px;border-radius:50%;background:#2f8fcc;box-shadow:0 0 0 5px rgba(47,143,204,.12); }
.demo-map { border-color:rgba(62,142,201,.15); background:
  linear-gradient(90deg,rgba(39,93,112,.07) 1px,transparent 1px) 0 0/46px 46px,
  linear-gradient(rgba(39,93,112,.07) 1px,transparent 1px) 0 0/46px 46px,
  radial-gradient(circle at 35% 35%,rgba(43,190,121,.12),transparent 38%),
  linear-gradient(155deg,#f7fbfb,#e8f1f4); box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 16px 36px rgba(31,78,92,.09); }
.demo-map::before,.demo-map::after { background:rgba(64,122,149,.13); }
.map-pin.price,.map-pin.detail { background:#fff; color:#0b2429; box-shadow:0 9px 24px rgba(30,72,80,.18); border:1px solid rgba(9,41,45,.08); }
.map-pin.dot { animation:pinPulse 2.5s ease-in-out infinite; }
.map-user { position:absolute; left:50%; top:50%; width:18px;height:18px;border-radius:50%;background:#398fc8;transform:translate(-50%,-50%);z-index:2;box-shadow:0 0 0 6px rgba(57,143,200,.12); }
.map-user::before,.map-user::after { content:"";position:absolute;inset:-10px;border:1px solid rgba(57,143,200,.28);border-radius:50%;animation:ringPulse 3s ease-out infinite; }
.map-user::after{animation-delay:-1.5s}.map-pin.selected{outline-color:rgba(47,143,204,.55)}

/* Community: große Action-Flächen, heller und direkter */
.input { color:var(--tl-ink); background:#fff; border-color:rgba(9,41,45,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
.field-label { color:#263f43; }
.report-btn { color:var(--tl-ink); background:rgba(255,255,255,.78); border-color:rgba(9,41,45,.09); box-shadow:0 8px 20px rgba(74,58,25,.05); transition:transform .17s ease,box-shadow .17s ease; }
.report-btn:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(74,58,25,.08); }
.report-btn.wait-none,.report-btn.price-ok{background:#eef9f2;border-color:rgba(21,153,87,.18)}
.report-btn.wait-short{background:#f6f9ec;border-color:rgba(156,173,66,.18)}
.report-btn.wait-mid,.report-btn.warning{background:#fff7e7;border-color:rgba(200,137,32,.20)}
.report-btn.wait-long,.report-btn.danger{background:#fff0ee;border-color:rgba(201,81,73,.18)}
.report-icon strong { background:rgba(9,41,45,.055); color:#203b3f; }
.report-time span,.report-icon span { color:#405a5f; }
.report-feedback { color:#157d4b; }
.section-live .secondary-btn { color:#223b3f; background:#fff; border-color:rgba(9,41,45,.09); }

/* Gespart: belohnend, ohne verspielt zu werden */
.savings-moment { display:flex; align-items:center; gap:12px; margin-bottom:12px; padding:13px 14px; border-radius:18px; background:linear-gradient(120deg,#effaf3,#f8fcf9); border:1px solid rgba(21,153,87,.12); }
.savings-moment-icon { width:42px;height:42px;min-width:42px;display:grid;place-items:center;border-radius:14px;background:#dff5e7;color:#159957;font-size:1.35rem;animation:softSpin 8s linear infinite; }
.savings-moment strong,.savings-moment small{display:block}.savings-moment strong{color:#123f2c}.savings-moment small{color:var(--tl-muted);margin-top:2px}
.savings-total>div { background:rgba(255,255,255,.9); }
.savings-total strong { color:#145c38; font-size:1.8rem; }
.saving-row { background:rgba(255,255,255,.72); border-color:rgba(9,41,45,.07); }
.saving-row strong { color:#157d4b; }

/* Bottom-Navigation als helles Glass-Dock */
.bottom-nav { background:rgba(255,255,255,.88); border-color:rgba(9,41,45,.10); box-shadow:0 18px 46px rgba(21,54,54,.16); }
.nav-item { color:#657a7e; }
.nav-item.active { background:#e8f8ef; color:#157d4b; box-shadow:inset 0 0 0 1px rgba(21,153,87,.08); }
.bottom-nav .nav-live { color:#8d6a28; }.bottom-nav .nav-live.active{background:#fff3d9;color:#8d6118}

/* Dialoge und Onboarding hell, klar, futuristisch */
.dialog { color:var(--tl-ink); background:rgba(251,253,252,.98); border-color:rgba(9,41,45,.10); box-shadow:0 30px 90px rgba(0,28,30,.28); }
.dialog::backdrop { background:rgba(3,21,24,.48); backdrop-filter:blur(10px) saturate(.9); }
.dialog h2,.onboarding-step h3 { color:var(--tl-ink); }
.choice-btn,.price-fuel-btn { color:var(--tl-ink) !important; background:#fff !important; border-color:rgba(9,41,45,.10) !important; }
.choice-btn.selected,.price-fuel-btn.selected { color:#0f6f43 !important; background:#e8f8ef !important; border-color:rgba(21,153,87,.25) !important; box-shadow:0 8px 20px rgba(21,153,87,.08); }
.privacy-note,.settings-promise,.reported-price-context,.selected-fuel-note { color:var(--tl-muted); background:#f3f7f5; border-color:rgba(9,41,45,.07); }
.settings-promise strong { color:var(--tl-ink); }
.checkbox-row { color:var(--tl-muted); }
.dialog .secondary-btn { color:var(--tl-ink); background:#f3f7f5; border-color:rgba(9,41,45,.08); }
.dialog .text-cancel-btn { color:#5b6f73; }
.saving-preview { background:#e8f8ef;color:#176a43; }
.theme-choice { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.theme-btn { min-height:64px; border:1px solid rgba(9,41,45,.09); border-radius:16px; background:#fff; color:var(--tl-ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-weight:850; }
.theme-btn strong{font-size:1.25rem}.theme-btn span{font-size:.7rem}.theme-btn.selected{background:#e8f8ef;border-color:rgba(21,153,87,.25);color:#0f6f43;box-shadow:0 8px 20px rgba(21,153,87,.08)}

/* Reveal / Soft Gaming Feedback */
.reveal { opacity:0; transform:translateY(22px) scale(.985); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view { opacity:1; transform:none; }
.fx-spark { position:absolute; width:8px;height:8px;border-radius:50%;background:#51dc8d;box-shadow:0 0 14px rgba(81,220,141,.45);animation:sparkFly .85s ease-out forwards; }

/* Optionaler Nachtmodus bleibt verfügbar */
body.theme-dark { color-scheme:dark; }
body.theme-dark .cinematic-backdrop { opacity:.45; }
body.theme-dark .topbar { background:linear-gradient(to bottom,rgba(7,20,27,.96) 72%,rgba(7,20,27,0)); }
body.theme-dark .brand,body.theme-dark .chapter-heading h2,body.theme-dark .station-card h3,body.theme-dark .station-card-price,body.theme-dark .station-facts strong,body.theme-dark .dialog h2,body.theme-dark .onboarding-step h3 { color:#f5fbfd; }
body.theme-dark .tagline,body.theme-dark .trend-copy p,body.theme-dark .station-card .sub,body.theme-dark .station-data-line,body.theme-dark .station-live,body.theme-dark .savings-total span,body.theme-dark .empty { color:#9fb4bd; }
body.theme-dark .section-chapter { background:linear-gradient(145deg,rgba(13,31,39,.98),rgba(8,22,29,.98));border-color:rgba(255,255,255,.08);color:#f5fbfd; }
body.theme-dark .section-chapter::before { opacity:.25; }
body.theme-dark .trend-card,body.theme-dark .station-card,body.theme-dark .savings-total>div { background:rgba(14,31,39,.9);border-color:rgba(255,255,255,.08);color:#f5fbfd; }
body.theme-dark .input,body.theme-dark .report-btn,body.theme-dark .quick-jump-btn,body.theme-dark .chapter-action-btn,body.theme-dark .map-ctrl,body.theme-dark .dialog,body.theme-dark .choice-btn,body.theme-dark .price-fuel-btn,body.theme-dark .theme-btn { background:#10232d !important;color:#f5fbfd !important;border-color:rgba(255,255,255,.09) !important; }
body.theme-dark .field-label { color:#dce7eb; }
body.theme-dark .quick-jump { background:rgba(10,24,32,.86);border-color:rgba(255,255,255,.08); }
body.theme-dark .quick-jump-btn { color:#f5fbfd; }
body.theme-dark .bottom-nav { background:rgba(8,20,27,.9);border-color:rgba(255,255,255,.08); }
body.theme-dark .nav-item { color:#9fb4bd; }
body.theme-dark .dialog { color:#f5fbfd; }
body.theme-dark .privacy-note,body.theme-dark .settings-promise,body.theme-dark .reported-price-context,body.theme-dark .selected-fuel-note { background:rgba(255,255,255,.05);color:#9fb4bd; }
body.theme-dark .demo-map { background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/46px 46px,linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/46px 46px,radial-gradient(circle at 35% 35%,rgba(47,209,111,.08),transparent 40%),linear-gradient(160deg,#10232d,#0a1921); }
body.theme-dark .savings-moment { background:rgba(47,209,111,.08);border-color:rgba(47,209,111,.12); }
body.theme-dark .savings-moment strong{color:#a5efc0}body.theme-dark .savings-moment small{color:#9fb4bd}

@keyframes auroraDrift { from{transform:translate3d(-2%,0,0) rotate(-18deg)} to{transform:translate3d(8%,4%,0) rotate(-12deg)} }
@keyframes heroGlow { from{transform:scale(.92);opacity:.7} to{transform:scale(1.08);opacity:1} }
@keyframes beamSweep { 0%,100%{opacity:.1;transform:translateX(-8%) rotate(-24deg)} 50%{opacity:.8;transform:translateX(18%) rotate(-24deg)} }
@keyframes ringPulse { 0%{transform:scale(.55);opacity:.65} 100%{transform:scale(1.45);opacity:0} }
@keyframes logoFloat { 0%,100%{transform:translateY(0) rotate(1.5deg)} 50%{transform:translateY(-7px) rotate(-.5deg)} }
@keyframes signalBars { from{transform:scaleY(.72);opacity:.55} to{transform:scaleY(1.06);opacity:1} }
@keyframes buttonGleam { 0%,55%{left:-38%;opacity:0} 70%{opacity:.9} 90%,100%{left:118%;opacity:0} }
@keyframes pinPulse { 0%,100%{box-shadow:0 0 0 6px rgba(47,209,111,.10),0 6px 18px rgba(0,0,0,.12)} 50%{box-shadow:0 0 0 10px rgba(47,209,111,.03),0 9px 22px rgba(0,0,0,.16)} }
@keyframes softSpin { 0%,85%{transform:rotate(0)} 92%{transform:rotate(12deg)} 100%{transform:rotate(0)} }
@keyframes sparkFly { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.25)} }

@media (max-width:700px){
  .app-shell{padding-left:14px;padding-right:14px}.hero-card{padding:22px}.section-chapter{padding:20px}.section-chapter::after{font-size:4.5rem}.saving-signal{min-width:92px}.chapter-heading h2{font-size:1.9rem}
}
@media (max-width:520px){
  .topbar{padding-top:12px}.brand-logo{width:52px;height:52px}.brand-copy{min-height:52px}.brand{font-size:1.9rem}.tagline{font-size:.72rem}.hero-card{padding:18px;border-radius:25px}.hero-logo{display:none}.saving-spotlight{padding:14px}.saving-copy strong{font-size:clamp(2rem,11vw,3rem)}.saving-signal{min-width:64px;height:42px}.saving-signal i{width:5px}.hero-actions{margin-top:13px}.metric-grid{margin-top:10px}.quick-jump-btn{min-height:74px}.section-chapter{padding:17px;border-radius:24px}.section-chapter::after{font-size:3.7rem;right:14px}.chapter-icon{width:48px;height:48px;min-width:48px}.chapter-heading h2{font-size:1.72rem}.demo-map{height:285px}.theme-choice{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){.cinematic-backdrop i,.hero-card::before,.hero-atmosphere .beam,.hero-atmosphere .pulse-ring,.hero-logo,.saving-signal i,.hero-card .primary-btn::after,.map-pin.dot,.map-user::before,.map-user::after,.savings-moment-icon{animation:none!important}.reveal{opacity:1;transform:none}.app-toast{transition:none}}
body.theme-dark .icon-btn { color:#f5fbfd; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.09); box-shadow:none; }
body.theme-dark 

/* TankLina 0.9 – echte Karte, Live-Datenstatus und eindeutigere Wartezeit-Meldungen */
.wait-report-heading,
.live-report-heading {
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0 10px;
}
.wait-report-heading > div { min-width:0; }
.wait-report-heading strong,
.live-report-heading strong { display:block; font-size:1rem; }
.wait-report-heading small { display:block; margin-top:2px; color:var(--muted); font-size:.75rem; }
.wait-report-icon {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(255,196,100,.14);
  font-size:1.15rem;
}
.live-report-heading > span {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:999px;
  color:#d6a33c;
  background:rgba(255,196,100,.12);
}
.wait-grid .report-time {
  min-height:92px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.wait-grid .report-time strong { font-size:1.45rem; line-height:1; }
.wait-grid .report-time span { font-size:.78rem; color:var(--muted); }
.status-grid { margin-top:0; }

.map-live-actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:2px 0 10px;
}
.map-live-btn {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-weight:850;
}
.map-live-btn.primary-map {
  background:linear-gradient(135deg, rgba(75,148,255,.16), rgba(47,209,111,.11));
  border-color:rgba(75,148,255,.25);
}
.map-live-btn:disabled { opacity:.55; cursor:wait; }
.map-status-line {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  margin-bottom:9px;
  color:var(--muted);
  font-size:.78rem;
}
.map-status-line strong { color:var(--text); font-weight:800; }
.map-status-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:#aab8bf;
  box-shadow:0 0 0 5px rgba(170,184,191,.10);
}
.map-status-dot.live { background:#2fd16f; box-shadow:0 0 0 5px rgba(47,209,111,.12); }
.map-status-dot.warn { background:#ffc464; box-shadow:0 0 0 5px rgba(255,196,100,.12); }
.map-status-dot.bad { background:#ff6258; box-shadow:0 0 0 5px rgba(255,98,88,.12); }
.real-map-wrap {
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--border);
  background:#dbe8e2;
  min-height:420px;
}
.real-map {
  width:100%;
  min-height:420px;
  background:#dbe8e2;
}
.map-empty-state {
  position:absolute;
  inset:0;
  z-index:450;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(244,248,245,.76), rgba(244,248,245,.58));
  color:#15252a;
  text-align:center;
  backdrop-filter:blur(2px);
}
.map-empty-state > span { font-size:2rem; color:#2e725e; }
.map-empty-state strong { font-size:1.05rem; }
.map-empty-state small { max-width:240px; color:#506267; font-size:.77rem; line-height:1.35; }
.map-empty-state.hidden { display:none; }
.map-source-line {
  margin-top:7px;
  color:var(--muted);
  font-size:.69rem;
}
.map-source-line a { color:inherit; }

.tl-price-marker {
  background:transparent !important;
  border:0 !important;
}
.tl-price-bubble {
  min-width:58px;
  min-height:36px;
  padding:7px 10px;
  border-radius:18px 18px 18px 5px;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  color:#102229;
  background:#fff;
  border:2px solid rgba(16,34,41,.08);
  box-shadow:0 8px 22px rgba(22,52,61,.22);
  font-weight:950;
  font-size:.82rem;
  transform:translateY(-8px);
}
.tl-price-bubble.low { background:#dff8e8; border-color:#77d89c; }
.tl-price-bubble.mid { background:#fff; }
.tl-price-bubble.high { background:#fff0df; border-color:#efc078; }
.tl-price-bubble.closed { opacity:.62; filter:grayscale(.35); }
.tl-user-marker {
  width:18px;
  height:18px;
  border-radius:50%;
  background:#2a81ff;
  border:4px solid #fff;
  box-shadow:0 0 0 7px rgba(42,129,255,.18), 0 3px 12px rgba(0,0,0,.26);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background:rgba(255,255,255,.98);
  color:#15252a;
}
.leaflet-popup-content { margin:13px 15px; min-width:190px; }
.tl-map-popup strong { display:block; font-size:.96rem; }
.tl-map-popup .price { margin:7px 0 4px; font-size:1.28rem; font-weight:950; color:#17603e; }
.tl-map-popup small { display:block; color:#617278; line-height:1.35; }

body.theme-dark .real-map-wrap,
body.theme-dark .real-map { background:#12232b; }
body.theme-dark .map-empty-state {
  color:#edf7f3;
  background:linear-gradient(180deg, rgba(8,21,27,.76), rgba(8,21,27,.58));
}
body.theme-dark .map-empty-state small { color:#a9bbc1; }

@media (max-width:520px) {
  .real-map-wrap, .real-map { min-height:340px; }
  .map-live-actions { display:grid; grid-template-columns:1fr 1fr; }
  .wait-grid { grid-template-columns:1fr 1fr; }
  .status-grid { grid-template-columns:1fr 1fr; }
}

/* TankLina 0.10 – echte Standortdaten ohne Preisfeed */
.station-card.location-only {
  border-color:rgba(55,132,175,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,251,252,.94));
}
body.theme-dark .station-card.location-only {
  background:linear-gradient(180deg, rgba(18,37,46,.96), rgba(12,29,37,.96));
  border-color:rgba(124,196,255,.16);
}
.price-pending {
  flex:0 0 auto;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(75,148,255,.09);
  border:1px solid rgba(75,148,255,.16);
  color:#315d78;
  font-size:.74rem;
  font-weight:850;
  white-space:nowrap;
}
body.theme-dark .price-pending { color:#b6dcf3; background:rgba(124,196,255,.09); }
.station-location-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:13px;
  padding-top:12px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:.78rem;
}
.mini-route-btn {
  min-height:38px;
  padding:0 13px;
  border-radius:12px;
  border:1px solid rgba(75,148,255,.18);
  background:rgba(75,148,255,.08);
  color:var(--text);
  font-weight:850;
}
.tl-location-marker { background:transparent !important; border:0 !important; }
.tl-location-pin {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:14px 14px 14px 5px;
  background:#fff;
  border:2px solid rgba(44,123,165,.26);
  box-shadow:0 8px 22px rgba(22,52,61,.20);
  font-size:1.05rem;
}
body.theme-dark .tl-location-pin { background:#17313d; border-color:rgba(124,196,255,.30); }
.tl-map-popup .price.pending { color:#55717e; font-size:.85rem; }

/* TankLina 0.10.10 – Öffnung, Tankkarten, Service und sichere Navigation */
.station-service-summary {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin-top:12px;
}
.opening-chip,
.fuel-card-chip,
.service-mini-chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:30px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.68);
  color:var(--text);
  font-size:.72rem;
  font-weight:800;
  line-height:1.1;
}
.opening-chip.open { background:rgba(72,196,117,.12); border-color:rgba(49,157,91,.19); color:#236b43; }
.opening-chip.soon { background:rgba(255,181,64,.14); border-color:rgba(190,124,27,.22); color:#805316; }
.opening-chip.closed { background:rgba(234,86,75,.10); border-color:rgba(201,70,58,.18); color:#914136; }
.opening-chip.unknown { background:rgba(102,126,136,.08); color:var(--muted); }
.fuel-card-chip { background:rgba(72,142,255,.08); border-color:rgba(72,142,255,.16); color:#315b7e; }
.service-mini-chip span { display:inline; }
body.theme-dark .opening-chip,
body.theme-dark .fuel-card-chip,
body.theme-dark .service-mini-chip { background:rgba(255,255,255,.055); }
body.theme-dark .opening-chip.open { color:#a8efc0; }
body.theme-dark .opening-chip.soon { color:#ffd38a; }
body.theme-dark .opening-chip.closed { color:#ffb0a8; }
body.theme-dark .fuel-card-chip { color:#b9d9ff; }

.station-service-details {
  margin-top:10px;
  border-top:1px solid var(--border);
}
.station-service-details > summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:42px;
  padding:10px 2px 2px;
  cursor:pointer;
  color:var(--muted);
  font-size:.76rem;
  font-weight:850;
}
.station-service-details > summary::-webkit-details-marker { display:none; }
.station-service-panel {
  margin-top:8px;
  padding:12px;
  border-radius:16px;
  background:rgba(246,250,248,.86);
  border:1px solid var(--border);
}
body.theme-dark .station-service-panel { background:rgba(255,255,255,.035); }
.service-info-row {
  display:grid;
  grid-template-columns:minmax(100px, .8fr) minmax(0, 1.7fr);
  gap:12px;
  align-items:start;
  padding:7px 0;
  border-bottom:1px solid rgba(112,135,142,.12);
  font-size:.76rem;
  line-height:1.4;
}
.service-info-row:last-of-type { border-bottom:0; }
.service-info-row strong { color:var(--text); }
.service-info-row > span { color:var(--muted); min-width:0; overflow-wrap:anywhere; }
.inline-badge {
  display:inline-flex;
  margin:1px 4px 3px 0;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(72,142,255,.10);
  border:1px solid rgba(72,142,255,.14);
  color:var(--text);
  font-size:.69rem;
}
.inline-badge.subtle { background:rgba(91,133,115,.08); border-color:rgba(91,133,115,.13); }
.service-detail-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 10px;
  padding:9px 0;
}
.service-detail-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:6px 7px;
  border-radius:10px;
  background:rgba(255,255,255,.56);
  font-size:.7rem;
}
body.theme-dark .service-detail-item { background:rgba(255,255,255,.035); }
.service-yes { color:#2d8653; font-weight:800; }
.service-no { color:#a3534a; font-weight:800; }
.service-unknown { color:var(--muted); }
.service-source-note {
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:.64rem;
  line-height:1.4;
}
.tl-map-popup .map-opening { font-weight:750; color:#3f6d54; margin:3px 0; }
body.theme-dark .tl-map-popup .map-opening { color:#a9dbbc; }

.mini-route-btn:focus-visible,
.station-service-details > summary:focus-visible {
  outline:3px solid rgba(72,142,255,.25);
  outline-offset:2px;
}

@media (max-width:620px) {
  .service-detail-grid { grid-template-columns:1fr; }
  .service-info-row { grid-template-columns:1fr; gap:3px; }
  .service-mini-chip span { display:none; }
  .station-service-summary { gap:5px; }
}


/* TankLina 0.10.10 – freie Ortssuche */
.map-live-actions-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
.place-search-mode{margin-top:12px}
.place-search-box{padding:14px;border:1px solid rgba(36,92,70,.14);border-radius:18px;background:rgba(255,255,255,.78);box-shadow:0 12px 34px rgba(20,45,36,.06)}
.place-search-box label{display:block;font-weight:800;margin-bottom:8px;color:var(--ink)}
.place-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.place-search-row .input{margin:0;min-width:0}
.place-search-feedback{min-height:20px;margin-top:8px;color:var(--muted);font-weight:700;font-size:.9rem}
.tl-search-marker{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;background:#fff;color:#215b90;border:3px solid #7fb7f0;box-shadow:0 5px 18px rgba(30,79,121,.28);font-weight:900}
@media (max-width:720px){.map-live-actions-three{grid-template-columns:1fr 1fr}.map-live-actions-three #livePriceRefreshBtn{grid-column:1/-1}.place-search-row{grid-template-columns:1fr auto}.place-search-row #placeSearchCancel{grid-row:1;grid-column:2}.place-search-row #placeSearchSubmit{grid-column:1/-1}}

/* 0.10.10 Produktionssicherheit */
.empty-list-state{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;min-height:130px;padding:28px;border:1px dashed rgba(34,86,68,.22);border-radius:24px;background:rgba(255,255,255,.55);color:var(--muted)}
.empty-list-state strong{font-size:1.08rem;color:var(--text)}
button:disabled{opacity:.55;cursor:not-allowed;filter:saturate(.7)}

.price-source-disclosure{margin:-.15rem 0 1rem;padding:.55rem .75rem;border-radius:14px;background:rgba(255,255,255,.62);border:1px solid rgba(28,72,56,.08);font-size:.82rem;color:#60716b}.theme-dark .price-source-disclosure{background:rgba(255,255,255,.035);color:#aebdb8;border-color:rgba(255,255,255,.08)}

/* TankLina 0.10.12 – externe MTS-K-Marktstatistik nur als Hinweis */
.market-stat-row{display:flex;gap:12px;align-items:center;margin-top:13px;padding-top:13px;border-top:1px solid rgba(9,41,45,.08)}
.market-stat-row>div:last-child{min-width:0;flex:1}
.market-stat-row strong{display:block;font-size:.9rem;color:var(--tl-ink)}
.market-stat-row p{margin:3px 0 0;color:var(--tl-muted);font-size:.78rem;line-height:1.4}
.market-stat-row small{display:block;margin-top:4px;color:var(--tl-muted);font-size:.66rem}
.market-stat-icon{width:38px;height:38px;min-width:38px;border-radius:12px;display:grid;place-items:center;background:#eef8f2;color:#157d4b;font-weight:950}
.market-stat-row.muted{opacity:.82}
body.theme-dark .market-stat-row{border-color:rgba(255,255,255,.08)}
body.theme-dark .market-stat-row strong{color:#f5fbfd}
body.theme-dark .market-stat-row p,body.theme-dark .market-stat-row small{color:#9fb4bd}
body.theme-dark .market-stat-icon{background:rgba(47,209,111,.10);color:#a5efc0}

/* TankLina 0.10.13 · klarere Preis- und Historienanzeige */
.fuel-price{display:inline-flex;align-items:baseline;white-space:nowrap;font-variant-numeric:tabular-nums}
.fuel-price-main{display:inline-block}
.fuel-price-tenth{font-size:.56em;line-height:0;vertical-align:super;margin-left:.025em;font-weight:950;letter-spacing:0}
.fuel-price-unit{font-size:.47em!important;color:var(--muted);font-weight:800;letter-spacing:0;margin-left:.22em}
.big-price .fuel-price-tenth{font-size:.48em}
.station-card-price .fuel-price-tenth{font-size:.56em}
.station-card-price .fuel-price-unit{font-size:.46em!important}

.station-saving,.station-facts{display:flex;flex-direction:column;justify-content:center;min-height:82px}
.station-box-label{font-size:.73rem!important;font-weight:850!important;letter-spacing:.01em;color:var(--muted)!important}
.station-saving small,.station-facts small{display:block;margin-top:3px;color:var(--muted);font-size:.63rem;line-height:1.25}
.station-saving strong{margin-top:5px}
.station-facts strong{margin-top:5px;font-size:1.07rem}

.price-change-row{display:flex;align-items:center;gap:9px;margin-top:10px;padding:9px 11px;border-radius:13px;background:rgba(15,75,61,.045);border:1px solid rgba(9,41,45,.065)}
.price-change-icon{width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:#eef5f1;color:#59746a;font-size:.82rem;font-weight:950;flex:0 0 auto}
.price-change-row>div{min-width:0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price-change-row strong{font-size:.75rem;color:var(--tl-ink)}
.price-change-row span:not(.price-change-icon){font-size:.68rem;color:var(--tl-muted)}
.price-change-row.down .price-change-icon{background:#e6f7ec;color:#157d4b}
.price-change-row.down strong{color:#157d4b}
.price-change-row.up .price-change-icon{background:#fff0ec;color:#a83b2c}
.price-change-row.up strong{color:#a83b2c}

.station-history-panel{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:12px;align-items:center;margin-top:9px;padding:11px 12px;border-radius:15px;background:#f7faf8;border:1px solid rgba(9,41,45,.065)}
.history-copy{min-width:0}
.history-kicker{display:block;color:var(--tl-muted);font-size:.66rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}
.history-copy strong{display:block;margin-top:3px;color:var(--tl-ink);font-size:.82rem}
.history-copy small{display:block;margin-top:3px;color:var(--tl-muted);font-size:.67rem;line-height:1.3}
.history-copy small .fuel-price-unit{display:none}
.history-chart{height:34px;color:#157d4b}
.price-sparkline{display:block;width:100%;height:34px;overflow:visible}
.history-placeholder{height:34px;display:grid;place-items:center;color:#9bacb0;font-size:1.3rem;letter-spacing:.18em}
.station-history-panel.building{background:#fafcfb}

body.theme-dark .price-change-row{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.07)}
body.theme-dark .price-change-icon{background:rgba(255,255,255,.06);color:#aebdb8}
body.theme-dark .price-change-row strong,body.theme-dark .history-copy strong{color:#f5fbfd}
body.theme-dark .price-change-row span:not(.price-change-icon),body.theme-dark .history-kicker,body.theme-dark .history-copy small{color:#9fb4bd}
body.theme-dark .station-history-panel{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.07)}
body.theme-dark .station-history-panel.building{background:rgba(255,255,255,.02)}

@media (max-width:520px){
  .station-history-panel{grid-template-columns:minmax(0,1fr) 82px;gap:8px}
  .station-saving small,.station-facts small{font-size:.59rem}
  .price-change-row>div{display:block}
  .price-change-row>div span{display:block;margin-top:2px}
}
.history-range{white-space:nowrap}

/* TankLina 0.10.14 · klare Stationsidentität + Markenlogo */
.station-identity{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.station-title-copy{min-width:0;flex:1}
.station-title-copy h3{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;max-width:none}
.station-brand-logo{width:38px;height:38px;flex:0 0 38px;border-radius:10px;border:1px solid rgba(31,96,68,.14);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 2px 8px rgba(13,54,37,.06)}
.station-brand-logo img{display:block;width:31px;height:31px;object-fit:contain}
.station-brand-logo.generic{background:#f2faf5}
.station-brand-logo.generic img{width:34px;height:34px}
.station-price-wrap{display:flex;align-items:flex-end;justify-content:flex-end;gap:7px;flex-wrap:wrap;text-align:right}
.station-fuel-chip{display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;border-radius:999px;border:1px solid rgba(39,93,72,.14);background:#f2f7f4;color:#52665d;font-size:.66rem;font-weight:850;letter-spacing:.02em;white-space:nowrap;margin-bottom:3px}
@media (max-width:520px){
  .station-brand-logo{width:34px;height:34px;flex-basis:34px;border-radius:9px}
  .station-brand-logo img{width:28px;height:28px}
  .station-card-top{align-items:flex-start}
  .station-price-wrap{max-width:42%;gap:5px}
  .station-fuel-chip{font-size:.6rem;padding:2px 6px}
}

/* TankLina 0.10.16 · Fahrzeugprofil + kompakter Kraftstoffwechsel */
.fuel-switch-row{display:flex;justify-content:flex-end;margin:2px 0 10px}
.fuel-switch-btn,.profile-fuel-btn{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(39,93,72,.13);background:#f3f8f5;color:var(--tl-ink,#10252a);border-radius:16px;padding:9px 12px;min-height:46px;cursor:pointer;box-shadow:0 7px 18px rgba(31,76,63,.05)}
.fuel-switch-btn:hover,.profile-fuel-btn:hover{border-color:rgba(31,135,82,.28);background:#eef7f1}
.fuel-switch-icon{font-size:1.08rem}.fuel-switch-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.08}.fuel-switch-copy small{font-size:.64rem;color:var(--tl-muted,#6c7c80);font-weight:750}.fuel-switch-copy strong{font-size:.9rem}.fuel-switch-chevron{font-size:.9rem;color:var(--tl-muted,#6c7c80);margin-left:4px}
.profile-fuel-btn{width:100%;justify-content:flex-start;margin:0 0 12px}.profile-fuel-btn strong{flex:1;text-align:left}
.vehicle-profile-choice,.vehicle-choice{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.vehicle-profile-btn,.vehicle-choice-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px;border-radius:15px;border:1px solid rgba(39,93,72,.12);background:#f4f8f6;color:var(--tl-ink,#10252a);font:inherit;cursor:pointer}
.vehicle-profile-btn.selected,.vehicle-choice-btn.selected{background:#e6f5ea;border-color:rgba(24,144,78,.33);box-shadow:inset 0 0 0 1px rgba(24,144,78,.06)}
.vehicle-profile-btn span,.vehicle-choice-btn strong{font-size:1.14rem}
.fuel-picker-dialog{width:min(calc(100% - 20px),560px)}
.fuel-picker-groups{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.fuel-picker-group{padding:12px;border:1px solid rgba(39,93,72,.10);border-radius:18px;background:#f7faf8}
.fuel-picker-group h3{display:flex;align-items:center;gap:7px;margin:0 0 9px;font-size:.92rem}
.fuel-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.fuel-option-btn{min-height:42px;border:1px solid rgba(39,93,72,.11);border-radius:13px;background:#fff;color:var(--tl-ink,#10252a);font:inherit;font-size:.82rem;font-weight:800;cursor:pointer;padding:8px 10px;text-align:center}
.fuel-option-btn.selected{background:#daf1e2;border-color:rgba(24,144,78,.38);color:#17663d}
.fuel-picker-footnote{margin:12px 2px 0;color:var(--tl-muted,#6c7c80);font-size:.72rem;line-height:1.45}
.fuel-choice-dynamic{grid-template-columns:repeat(2,1fr)!important}
.input-with-unit{position:relative}.input-with-unit .input{padding-right:78px}.input-with-unit>span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.72rem;font-weight:800;color:var(--tl-muted,#6c7c80);pointer-events:none;white-space:nowrap}
body.theme-dark .fuel-switch-btn,body.theme-dark .profile-fuel-btn,body.theme-dark .vehicle-profile-btn,body.theme-dark .vehicle-choice-btn,body.theme-dark .fuel-picker-group,body.theme-dark .fuel-option-btn{background:#10232d;color:#f5fbfd;border-color:rgba(255,255,255,.09)}
body.theme-dark .fuel-option-btn.selected,body.theme-dark .vehicle-profile-btn.selected,body.theme-dark .vehicle-choice-btn.selected{background:#173a2d;border-color:rgba(76,205,128,.35);color:#dff8e8}
@media(max-width:620px){
  .fuel-switch-row{justify-content:stretch}.fuel-switch-btn{width:100%;justify-content:flex-start}.fuel-switch-chevron{margin-left:auto}
  .fuel-option-grid{grid-template-columns:1fr 1fr}.vehicle-profile-choice,.vehicle-choice{grid-template-columns:1fr 1fr}
}
@media(max-width:390px){.fuel-option-grid{grid-template-columns:1fr}}

/* TankLina 0.10.17 · Kraftstoffwechsel, Pendelkorridor, Fahrmodus */
.map-live-actions-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.commute-active-bar{margin-top:10px;padding:10px 12px;border:1px solid rgba(57,117,84,.16);border-radius:16px;background:rgba(240,249,244,.9);display:flex;align-items:center;justify-content:space-between;gap:12px}
.commute-active-copy{display:flex;align-items:center;gap:9px;min-width:0}.commute-active-copy small{display:block;color:var(--muted);font-size:.72rem}.commute-active-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.commute-direction-actions{display:flex;gap:6px;align-items:center}.commute-direction-btn,.commute-stop-btn{border:1px solid rgba(27,54,43,.12);background:#fff;border-radius:12px;padding:8px 10px;font-weight:800;color:var(--ink);cursor:pointer}.commute-direction-btn.selected{background:#e7f5eb;border-color:#aad4b5;color:#2f7145}.commute-stop-btn{font-size:1.2rem;line-height:1;padding:7px 10px}
.fill-plan-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:9px}.fill-plan-btn{border:1px solid rgba(27,54,43,.12);background:#fff;border-radius:16px;padding:12px;text-align:left;cursor:pointer;color:var(--ink)}.fill-plan-btn strong,.fill-plan-btn span{display:block}.fill-plan-btn span{font-size:.76rem;color:var(--muted);margin-top:2px}.fill-plan-btn.selected{background:#eaf7ee;border-color:#a9d5b5;box-shadow:inset 0 0 0 1px rgba(58,126,77,.06)}
.planned-fill-wrap{margin-bottom:6px}.field-help{font-size:.78rem;color:var(--muted);margin:5px 0 12px}.commute-status{min-height:20px;margin:8px 0 12px;color:var(--muted);font-size:.84rem}.commute-status.ok{color:#2f7145}.commute-status.bad{color:#a24335}
.hero-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
.drive-mode-dialog{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:0;background:#071016;color:#fff}.drive-mode-dialog::backdrop{background:#071016}.drive-mode-shell{min-height:100dvh;padding:max(22px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:22px}.drive-mode-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.drive-mode-top .eyebrow{color:#8ad59d}.drive-mode-top strong{display:block;font-size:1.1rem}.drive-close-btn{background:#17242c;border:1px solid #2c3c46;color:#fff;border-radius:18px;padding:14px 18px;font-size:1rem;font-weight:900}.drive-mode-empty{margin:auto;text-align:center;font-size:1.7rem;font-weight:900;color:#c8d5db}.drive-mode-content{display:flex;flex:1;flex-direction:column;justify-content:center;gap:24px;max-width:920px;width:100%;margin:0 auto}.drive-station-line{display:flex;align-items:center;gap:18px}.drive-station-line strong{font-size:clamp(2rem,7vw,4.4rem);line-height:1.05}.drive-station-logo{width:82px;height:82px;display:grid;place-items:center;background:#fff;border-radius:22px;overflow:hidden;flex:none}.drive-station-logo img{max-width:88%;max-height:88%;object-fit:contain}.drive-price{font-size:clamp(4rem,15vw,9rem);font-weight:950;line-height:.9;letter-spacing:-.05em}.drive-price .fuel-price-unit{font-size:.18em;letter-spacing:0}.drive-price .fuel-price-tenth{font-size:.44em;top:-.8em}.drive-metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px}.drive-metrics>div{background:#101d24;border:1px solid #22343d;border-radius:24px;padding:20px}.drive-metrics small{display:block;color:#a9bcc5;font-size:1rem}.drive-metrics strong{display:block;font-size:clamp(2rem,7vw,4rem);margin-top:4px}.drive-advice{font-size:clamp(1.15rem,4vw,2rem);font-weight:850;background:#10261a;border:1px solid #275238;border-radius:22px;padding:18px 20px}.drive-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}.drive-action-btn{min-height:82px;border:1px solid #344852;background:#17252d;color:#fff;border-radius:24px;font-size:1.25rem;font-weight:900;display:flex;align-items:center;justify-content:center;gap:12px}.drive-action-btn.primary{background:#dcefe1;color:#102419;border-color:#9ed2aa}.drive-safety-note{text-align:center;color:#90a4ad;font-size:.9rem}
.offline-price-note{display:inline-flex;align-items:center;gap:5px;color:#8b641b;background:#fff7df;border:1px solid #efdca1;border-radius:999px;padding:4px 9px;font-size:.72rem;font-weight:800}
.fuel-loading-state{padding:28px;border:1px dashed rgba(64,101,82,.22);border-radius:22px;text-align:center;color:var(--muted)}.fuel-loading-state strong{display:block;color:var(--ink);margin-bottom:4px}.fuel-loading-state .spinner{display:inline-block;width:22px;height:22px;border:3px solid rgba(57,117,84,.18);border-top-color:#4a8f61;border-radius:50%;animation:tlspin .8s linear infinite;margin-bottom:8px}@keyframes tlspin{to{transform:rotate(360deg)}}

@media(max-width:760px){.map-live-actions-four{grid-template-columns:1fr 1fr}.hero-actions{grid-template-columns:1fr 1fr}.hero-actions #tankNowBtn{grid-column:1/-1}.commute-active-bar{align-items:flex-start;flex-direction:column}.commute-direction-actions{width:100%}.commute-direction-btn{flex:1}.commute-active-copy strong{max-width:70vw}.drive-metrics{grid-template-columns:1fr 1fr}.drive-station-logo{width:64px;height:64px;border-radius:18px}.drive-actions{grid-template-columns:1fr}.drive-action-btn{min-height:72px}}
@media(max-width:430px){.fill-plan-choice{grid-template-columns:1fr}.map-live-btn{font-size:.86rem}.drive-metrics{grid-template-columns:1fr}.commute-direction-actions{flex-wrap:wrap}.commute-stop-btn{margin-left:auto}}


/* TankLina 0.10.25 · Mehr Wege, Monatsverlauf, Quellenanzeige entfernt */
.map-source-line,.price-source-disclosure,#heroSource{display:none !important}
.savings-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}
.savings-since{color:var(--tl-muted,#6c7c80);font-size:.82rem}
.savings-month-groups{display:grid;gap:10px;margin-top:12px}
.savings-month-card{padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.72);border:1px solid rgba(9,41,45,.07)}
.savings-month-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.savings-month-top strong{font-size:1rem}.savings-month-top span{display:block;color:var(--tl-muted,#6c7c80);font-size:.78rem}
.savings-month-sum{color:#157d4b;font-weight:900;white-space:nowrap}
.savings-month-sub{margin-top:6px;color:var(--tl-muted,#6c7c80);font-size:.8rem}
.savings-month-empty{margin-top:6px;color:var(--tl-muted,#6c7c80);font-size:.8rem}
.commute-route-switch{display:flex;gap:6px;flex-wrap:wrap}
.commute-route-pill,.commute-slot-btn,.commute-icon-btn{border:1px solid rgba(27,54,43,.12);background:#fff;border-radius:12px;padding:8px 10px;font-weight:800;color:var(--ink);cursor:pointer}
.commute-route-pill.selected,.commute-slot-btn.selected,.commute-icon-btn.selected{background:#e7f5eb;border-color:#aad4b5;color:#2f7145}
.commute-route-pill.empty,.commute-slot-btn.empty{opacity:.65}
.commute-slot-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 14px}
.commute-slot-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;text-align:center}
.commute-slot-btn small{display:block;font-size:.72rem;color:var(--muted);font-weight:700}
.commute-slot-btn strong{display:block;font-size:.94rem}
.commute-icon-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:10px}
.commute-icon-btn{font-size:1.1rem;min-height:46px}
.commute-other-icon-wrap{margin-top:6px}
@media(max-width:760px){.commute-route-switch{width:100%}.commute-route-pill{flex:1}.commute-slot-selector{grid-template-columns:1fr}.savings-toolbar{align-items:flex-start;flex-direction:column}.commute-icon-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}



/* TankLina 0.10.25 · Markenlogos klar und unverfälscht */
.station-brand-logo{width:52px;height:52px;min-width:52px;padding:5px;border-radius:14px;background:#fff;border:1px solid rgba(20,45,55,.14);box-shadow:0 2px 8px rgba(20,45,55,.07);display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.station-brand-logo img{display:block;width:100%;height:100%;max-width:42px;max-height:42px;object-fit:contain;object-position:center}
.station-brand-logo.generic img{max-width:36px;max-height:36px;opacity:.78}

/* TankLina 0.10.25 · Wege direkt unter der Karte + robuste Statusdarstellung */
.route-add-main{font-weight:900}
.route-add-main span:first-child{font-size:1.18em;line-height:1}
.route-stack-panel.commute-active-bar{
  margin-top:10px;
  padding:12px;
  display:block;
  background:rgba(244,251,247,.96);
  border:1px solid rgba(57,117,84,.16);
  border-radius:18px;
}
.route-stack-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.route-stack-head-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.route-stack-add-btn{min-height:40px;border:1px solid #a8d4b4;background:#e9f6ed;color:#2f7145;border-radius:11px;padding:7px 11px;font-weight:900;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.route-stack-add-btn span:first-child{font-size:1.08rem;line-height:1}.route-stack-add-btn:disabled{opacity:.45;cursor:default}
.route-stack-title{display:flex;align-items:center;gap:10px;min-width:0}
.route-stack-title>span{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#e8f5ec;color:#357b4c;font-weight:900}
.route-stack-title strong{display:block;font-size:.92rem;color:var(--ink)}
.route-stack-title small{display:block;margin-top:1px;color:var(--muted);font-size:.72rem}
.saved-route-list{display:grid;gap:8px}
.saved-route-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px;border:1px solid rgba(27,54,43,.10);border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(20,60,42,.035)}
.saved-route-row.active{border-color:#a8d4b4;background:#f2faf4;box-shadow:0 0 0 2px rgba(117,184,135,.10)}
.saved-route-main{min-width:0;border:0;background:transparent;display:flex;align-items:center;gap:10px;text-align:left;padding:4px;cursor:pointer;color:var(--ink)}
.saved-route-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:#eef7f1;display:grid;place-items:center;font-size:1.08rem}
.saved-route-copy{min-width:0;display:block}
.saved-route-copy strong{display:block;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saved-route-copy small{display:block;color:var(--muted);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.saved-route-state{margin-left:auto;color:#4f9b65;font-size:.8rem;font-weight:900}
.saved-route-actions{display:flex;align-items:center;gap:5px}
.saved-route-direction,.saved-route-edit{min-height:40px;border:1px solid rgba(27,54,43,.12);background:#fff;border-radius:11px;padding:8px 10px;font-weight:850;color:var(--ink);cursor:pointer;white-space:nowrap}
.saved-route-direction.selected{background:#e2f3e7;border-color:#9bcaaa;color:#2d7043}
.saved-route-edit{width:42px;padding:8px 0;font-size:1rem}
.route-stack-panel .commute-stop-btn{min-width:40px;min-height:40px;background:#fff}
.commute-dialog .commute-other-icon-wrap{margin-top:4px}
.commute-dialog .commute-icon-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.commute-dialog .commute-icon-btn{min-height:46px;font-size:1.15rem}
.map-status-line{min-height:34px}
.map-status-line .map-status-dot.bad{background:#e66b62}

@media(max-width:760px){
  .route-stack-panel.commute-active-bar{padding:10px}
  .saved-route-row{grid-template-columns:1fr;gap:7px}
  .saved-route-actions{width:100%;display:grid;grid-template-columns:1fr 1fr 44px}
  .saved-route-direction{width:100%;min-height:44px}
  .saved-route-edit{width:44px;height:44px}
  .saved-route-main{min-height:48px}
  .saved-route-copy small{white-space:normal;line-height:1.25}
}
@media(max-width:430px){
  .route-stack-head{align-items:flex-start}
  .route-stack-head-actions{flex-direction:column-reverse;align-items:stretch}
  .route-stack-add-btn{min-height:38px;padding:6px 9px}
  .saved-route-actions{grid-template-columns:1fr 1fr 42px}
  .saved-route-direction{font-size:.82rem;padding:8px 6px}
}

/* TankLina 0.10.26 · Fahrerfeedback-Runde 2
   Fokus: Entscheidung in Sekunden, sofortige Tankstellenwahl, klare Aktualität/Wartezeit/Öffnung. */
.big-price::after{content:" " attr(data-unit);}
.big-price.big-price-pending::after{content:""}

.decision-intro{margin-top:12px;align-items:center}
.decision-intro h1{max-width:12ch}
.decision-target-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:stretch;
  margin-top:18px;padding:16px;border-radius:22px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
}
.decision-station-block{min-width:0;display:flex;flex-direction:column;justify-content:center}
.decision-block-label,.decision-benefit-strip span{display:block;color:#a9c3c9;font-size:.7rem;font-weight:900;letter-spacing:.045em;text-transform:uppercase}
.decision-station-block .station-name{margin-top:5px;font-size:clamp(1.16rem,4.5vw,1.55rem);line-height:1.12}
.decision-station-block .station-meta{margin-top:5px;max-width:45ch}
.decision-price-block{min-width:132px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;justify-content:center}
.decision-price-block .big-price{margin-top:2px;color:#fff;line-height:.95}
.decision-price-block>small{display:block;margin-top:5px;color:#a9c3c9;font-size:.7rem;font-weight:800}

.decision-benefit-strip{
  position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px
}
.decision-benefit-strip>div{min-width:0;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}
.decision-benefit-strip .benefit-saving{background:linear-gradient(135deg,rgba(47,209,111,.18),rgba(47,209,111,.07));border-color:rgba(47,209,111,.20)}
.decision-benefit-strip strong{display:block;margin-top:3px;color:#fff;font-size:1.18rem;line-height:1.1}
.decision-benefit-strip .benefit-saving strong{color:#9ff0bd;font-size:1.45rem}
.decision-benefit-strip small{display:block;margin-top:4px;color:#a9c3c9;font-size:.69rem;line-height:1.25}

.hero-now-grid{
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:11px
}
.hero-now-fact{display:flex;gap:8px;align-items:flex-start;min-width:0;padding:10px 11px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.075)}
.hero-now-fact>span{font-size:1rem;line-height:1.1;flex:none}
.hero-now-fact div{min-width:0}
.hero-now-fact small{display:block;color:#9fb9bf;font-size:.64rem;font-weight:800}
.hero-now-fact strong{display:block;margin-top:2px;color:#fff;font-size:.78rem;line-height:1.25;overflow-wrap:anywhere}
.hero-card .trust-line{margin-top:10px}
.hero-card .hero-actions{margin-top:12px;grid-template-columns:1fr 1fr}
.hero-card .hero-actions .hero-action-wide{grid-column:1/-1;min-height:58px;font-size:1.02rem}
.hero-card .decision-details{margin-top:10px}
.hero-card .decision-details summary{font-size:.76rem}

/* Die Tankstellen sind direkt nach der Entscheidung der zweite Arbeitsbereich. */
.section-stations{margin-top:22px}
.section-stations .chapter-heading{margin-bottom:8px}
.section-stations .fuel-switch-row{margin-top:-4px}
.station-list{gap:14px}
.station-card.decision-card{padding:17px;border-radius:22px;overflow:hidden}
.station-card.decision-card.best{border-width:2px}
.station-card-headline{min-height:26px;margin:-3px 0 7px;display:flex;justify-content:flex-start}
.station-decision-tag{display:inline-flex;align-items:center;min-height:26px;padding:0 9px;border-radius:999px;font-size:.68rem;font-weight:950;letter-spacing:.035em;text-transform:uppercase;background:#eef4f1;color:#526a60;border:1px solid rgba(30,65,53,.10)}
.station-decision-tag.best{background:#e7f7ec;color:#157847;border-color:#a9d7b7}
.station-decision-tag.warn,.station-decision-tag.wait{background:#fff5df;color:#8f6519;border-color:#ead8a6}
.station-decision-tag.bad{background:#fff0ee;color:#a44f49;border-color:#ecc3bf}
.station-card.decision-card .station-card-top{align-items:center}
.station-card.decision-card .station-price-wrap{flex:0 0 auto;max-width:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.station-card.decision-card .station-card-price{font-size:1.72rem;line-height:1;color:var(--tl-ink,var(--text))}
.station-card.decision-card .station-fuel-chip{margin:0}
.station-key-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:13px}
.station-key-grid>div{min-width:0;padding:10px 11px;border-radius:14px;background:#f5f9f7;border:1px solid rgba(9,41,45,.07)}
.station-key-grid>div.saving{background:#eaf8ef;border-color:rgba(21,153,87,.13)}
.station-key-grid span{display:block;color:#6c7d78;font-size:.65rem;font-weight:800;line-height:1.2}
.station-key-grid strong{display:block;margin-top:4px;color:#11272b;font-size:.98rem;line-height:1.15}
.station-key-grid .saving strong{color:#157847}
.station-now-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:9px}
.station-now-chip{display:flex;align-items:flex-start;gap:5px;min-width:0;padding:8px 9px;border-radius:12px;font-size:.68rem;font-weight:820;line-height:1.25;background:#f3f6f5;color:#5f716b;border:1px solid rgba(9,41,45,.07);overflow-wrap:anywhere}
.station-now-chip b{font-weight:400;flex:none}
.station-now-chip.good{background:#ebf8ef;color:#267248;border-color:#c8e5d1}
.station-now-chip.warn{background:#fff6e2;color:#8c661e;border-color:#ead9ad}
.station-now-chip.bad{background:#fff0ee;color:#a54e47;border-color:#edc6c2}
.station-now-chip.muted{background:#f4f6f5;color:#6d7b77}
.station-card.decision-card .station-service-summary{margin-top:8px;gap:5px}
.station-card.decision-card .station-service-summary:empty{display:none}
.station-card.decision-card .fuel-card-chip,.station-card.decision-card .service-mini-chip{font-size:.65rem;padding:5px 7px}
.station-route-main{
  width:100%;min-height:54px;margin-top:11px;padding:8px 13px;border:0;border-radius:15px;
  display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:center;text-align:left;
  background:linear-gradient(180deg,#39d97d,#23bb64);color:#06130b;box-shadow:0 9px 20px rgba(34,167,91,.17);cursor:pointer
}
.station-route-main>span{font-size:1.18rem;font-weight:950}
.station-route-main strong{font-size:.9rem;white-space:nowrap}
.station-route-main small{justify-self:end;font-size:.65rem;font-weight:750;opacity:.72;text-align:right}
.station-route-main.secondary-route{background:#edf7f0;color:#1d623c;border:1px solid #c4dfcc;box-shadow:none}
.station-price-details,.station-service-details{margin-top:7px;border-top:1px solid rgba(9,41,45,.07)}
.station-price-details>summary,.station-service-details>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:38px;padding:7px 2px 0;color:#63736f;font-size:.72rem;font-weight:850;cursor:pointer}
.station-price-details>summary::-webkit-details-marker,.station-service-details>summary::-webkit-details-marker{display:none}
.station-price-details-body{padding-top:2px}
.station-price-details .station-data-line{margin-top:0;padding-top:5px}

/* Dunkles App-Thema: die neuen Entscheidungskarten bleiben gut lesbar. */
body.theme-dark .station-key-grid>div{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.07)}
body.theme-dark .station-key-grid>div.saving{background:rgba(47,209,111,.10);border-color:rgba(47,209,111,.15)}
body.theme-dark .station-key-grid span{color:#9fb4bd}
body.theme-dark .station-key-grid strong{color:#f5fbfd}
body.theme-dark .station-key-grid .saving strong{color:#95ebb7}
body.theme-dark .station-now-chip{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.07);color:#b5c6cc}
body.theme-dark .station-now-chip.good{background:rgba(47,209,111,.09);color:#96e8b6;border-color:rgba(47,209,111,.14)}
body.theme-dark .station-now-chip.warn{background:rgba(255,196,100,.09);color:#f1cc86;border-color:rgba(255,196,100,.14)}
body.theme-dark .station-now-chip.bad{background:rgba(255,90,78,.09);color:#efaaa4;border-color:rgba(255,90,78,.14)}
body.theme-dark .station-price-details,body.theme-dark .station-service-details{border-color:rgba(255,255,255,.07)}
body.theme-dark .station-price-details>summary,body.theme-dark .station-service-details>summary{color:#a9bcc3}
body.theme-dark .station-route-main.secondary-route{background:rgba(47,209,111,.09);color:#a0edbd;border-color:rgba(47,209,111,.17)}
body.theme-dark .station-card.decision-card .station-card-price{color:#f5fbfd}
body.theme-dark .station-decision-tag{background:rgba(255,255,255,.06);color:#c4d3d8;border-color:rgba(255,255,255,.08)}
body.theme-dark .station-decision-tag.best{background:rgba(47,209,111,.12);color:#a1efbd;border-color:rgba(47,209,111,.18)}
body.theme-dark .station-decision-tag.warn,body.theme-dark .station-decision-tag.wait{background:rgba(255,196,100,.10);color:#f5cf8b;border-color:rgba(255,196,100,.15)}
body.theme-dark .station-decision-tag.bad{background:rgba(255,90,78,.10);color:#efaaa4;border-color:rgba(255,90,78,.15)}

/* Weniger visuelle Konkurrenz unterhalb der Entscheidung. */
.section-trend{margin-top:26px}
.section-map,.section-live,.section-savings{margin-top:30px}
.bottom-nav{grid-template-columns:repeat(4,1fr)}

@media(max-width:620px){
  .topbar{padding-bottom:8px}
  .hero-card{padding:17px}
  .decision-intro{margin-top:9px}
  .decision-intro .hero-copy{font-size:.88rem;line-height:1.35}
  .decision-target-grid{margin-top:13px;padding:12px;gap:9px;border-radius:18px}
  .decision-price-block{min-width:104px}
  .decision-price-block .big-price{font-size:clamp(1.9rem,9vw,2.55rem)}
  .decision-station-block .station-name{font-size:1.05rem}
  .decision-station-block .station-meta{font-size:.72rem;line-height:1.25}
  .decision-benefit-strip{gap:7px;margin-top:7px}
  .decision-benefit-strip>div{padding:9px 10px;border-radius:14px}
  .decision-benefit-strip strong{font-size:.93rem}
  .decision-benefit-strip .benefit-saving strong{font-size:1.16rem}
  .decision-benefit-strip small{font-size:.59rem}
  .decision-block-label,.decision-benefit-strip span{font-size:.59rem}
  .hero-card .trust-line{font-size:.66rem;margin-top:8px}
  .hero-now-grid{gap:5px;margin-top:7px}
  .hero-now-fact{padding:7px 7px;border-radius:12px;gap:5px}
  .hero-now-fact>span{font-size:.82rem}
  .hero-now-fact small{font-size:.55rem}
  .hero-now-fact strong{font-size:.64rem}
  .hero-card .hero-actions{margin-top:8px;gap:7px}
  .hero-card .hero-actions .hero-action-wide{min-height:54px}
  .hero-card .hero-actions #tankNowBtn{grid-column:auto}
  .hero-card .decision-details{margin-top:7px}
  .section-stations{margin-top:17px;padding:15px;border-radius:22px}
  .section-stations .chapter-icon{width:42px;height:42px;min-width:42px}
  .section-stations .chapter-heading h2{font-size:1.55rem}
  .fuel-switch-row{margin-bottom:8px}
  .station-card.decision-card{padding:13px}
  .station-card.decision-card .station-card-top{gap:8px}
  .station-card.decision-card .station-brand-logo{width:40px;height:40px;min-width:40px;border-radius:11px}
  .station-card.decision-card .station-brand-logo img{max-width:32px;max-height:32px}
  .station-card.decision-card .station-title-copy h3{font-size:.93rem;line-height:1.15}
  .station-card.decision-card .station-title-copy .sub{font-size:.67rem;line-height:1.25;margin-top:2px}
  .station-card.decision-card .station-price-wrap{max-width:40%!important}
  .station-card.decision-card .station-card-price{font-size:1.38rem}
  .station-card.decision-card .station-fuel-chip{font-size:.55rem}
  .station-key-grid{gap:5px;margin-top:9px}
  .station-key-grid>div{padding:8px 7px;border-radius:11px}
  .station-key-grid span{font-size:.55rem}
  .station-key-grid strong{font-size:.82rem}
  .station-now-row{gap:4px;margin-top:6px}
  .station-now-chip{padding:6px 6px;border-radius:10px;font-size:.57rem;gap:3px}
  .station-card.decision-card .station-service-summary{margin-top:6px}
  .station-route-main{margin-top:8px;min-height:50px;padding:7px 10px}
  .station-route-main strong{font-size:.84rem}
  .station-route-main small{font-size:.57rem}
  .station-price-details>summary,.station-service-details>summary{font-size:.66rem;min-height:35px}
  .section-trend,.section-map,.section-live,.section-savings{margin-top:22px}
}

@media(max-width:400px){
  .decision-price-block{min-width:92px}
  .decision-price-block .big-price{font-size:1.92rem}
  .decision-benefit-strip{grid-template-columns:1fr 1fr}
  .hero-now-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-now-fact{display:block}
  .hero-now-fact>span{display:block;margin-bottom:3px}
  .station-route-main{grid-template-columns:auto auto;}
  .station-route-main small{display:none}
  .station-key-grid>div{padding:7px 5px}
}

/* TankLina 0.10.26 · Kartenposition + eindeutige Straßenroute */
.saved-routes-host{margin-top:30px}
.saved-routes-host .commute-active-bar{margin-top:0}
.station-route-preview{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:0 0 12px;padding:12px 13px;border-radius:17px;
  border:1px solid rgba(32,145,85,.22);background:rgba(235,249,240,.96);
  box-shadow:0 8px 20px rgba(28,111,66,.07)
}
.station-route-preview-copy{display:flex;flex-direction:column;min-width:0;gap:2px}
.station-route-preview-kicker{font-size:.62rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#2f7f4d}
.station-route-preview-copy strong{font-size:.92rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.station-route-preview-copy small{font-size:.72rem;font-weight:750;color:var(--muted)}
.station-route-preview-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.station-route-external-btn{min-height:42px;padding:8px 12px;border:0;border-radius:12px;background:#173f2b;color:#fff;font-size:.76rem;font-weight:900;cursor:pointer}
.station-route-close-btn{width:42px;height:42px;border:1px solid rgba(23,63,43,.13);border-radius:12px;background:#fff;color:#244137;font-size:1.15rem;font-weight:900;cursor:pointer}
body.theme-dark .station-route-preview{background:rgba(47,209,111,.09);border-color:rgba(47,209,111,.17)}
body.theme-dark .station-route-preview-kicker{color:#97e9b5}
body.theme-dark .station-route-external-btn{background:#dff5e6;color:#10271a}
body.theme-dark .station-route-close-btn{background:#10232d;color:#eaf5f0;border-color:rgba(255,255,255,.09)}

/* Die Karte gehört direkt an die Entscheidung und vor die Tankstellenliste. */
.hero-card + .section-map{margin-top:22px}
.section-map + .section-stations{margin-top:22px}

@media(max-width:620px){
  .saved-routes-host{margin-top:22px}
  .station-route-preview{align-items:stretch;flex-direction:column;gap:9px;padding:11px}
  .station-route-preview-actions{display:grid;grid-template-columns:1fr 44px;width:100%}
  .station-route-external-btn{width:100%;min-height:44px}
  .station-route-close-btn{width:44px;height:44px}
  .hero-card + .section-map{margin-top:17px}
  .section-map + .section-stations{margin-top:17px}
}
.station-route-preview[hidden],.saved-routes-host[hidden]{display:none!important}


/* Feedback-Runde: klare Testkennzeichnung und eindeutige Sekundäraktionen */
.topbar-actions{display:flex;align-items:center;gap:8px}
.test-mode-badge{display:inline-flex;align-items:center;min-height:27px;padding:0 9px;border-radius:999px;background:#fff3cd;border:1px solid rgba(142,96,0,.18);color:#765400;font-size:.66rem;font-weight:950;letter-spacing:.07em}
.public-promise-strip{display:flex;flex-wrap:wrap;gap:6px;margin:-3px 0 10px;padding:0 2px}
.public-promise-strip span{display:inline-flex;align-items:center;min-height:28px;padding:0 9px;border-radius:999px;background:#edf8f1;border:1px solid rgba(21,153,87,.10);color:#315c49;font-size:.72rem;font-weight:850}
.test-data-notice{display:flex;align-items:center;gap:7px;margin:0 0 10px;padding:8px 10px;border-radius:12px;background:#fff8df;border:1px solid rgba(173,124,0,.16);color:#6c570d;font-size:.75rem;line-height:1.25}
.test-data-notice strong{font-weight:950;white-space:nowrap}
.dialog-close-btn{pointer-events:auto;touch-action:manipulation}
.hero-card #driveModeBtn,.hero-card #tankNowBtn{min-width:0}
@media(max-width:560px){
  .test-mode-badge{font-size:.59rem;padding:0 7px;min-height:24px}
  .public-promise-strip{gap:5px;margin-top:-5px}
  .public-promise-strip span{font-size:.65rem;min-height:25px;padding:0 7px}
  .test-data-notice{font-size:.68rem;padding:7px 8px;align-items:flex-start}
  .hero-card #driveModeBtn span:last-child,.hero-card #tankNowBtn span:last-child{font-size:.88rem}
}

.hero-card .hero-promise-strip{position:relative;z-index:1;margin:10px 0 0;padding:0}
.hero-card .hero-promise-strip span{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.10);color:#eaf8f0}
.hero-card .hero-test-data-notice{position:relative;z-index:1;margin:8px 0 0;background:rgba(255,204,73,.12);border-color:rgba(255,204,73,.20);color:#ffe6a2}
@media(max-width:560px){.hero-card .hero-promise-strip{margin-top:8px}.hero-card .hero-test-data-notice{margin-top:6px}}

@media(max-width:520px){
  .tank-stop-quick-btn{min-height:80px;height:80px;padding:10px 12px;border-radius:19px}
  .tank-stop-quick-icon{width:46px;height:46px;flex-basis:46px;border-radius:14px;font-size:1.55rem}
  .tank-stop-quick-title{font-size:.64rem}
  .tank-stop-quick-action{font-size:.98rem}
  .tank-stop-quick-copy small{font-size:.71rem}
}
@media(prefers-reduced-motion:reduce){.tank-stop-quick-btn{transition:none}}
/* Alte Hero-Button-Regeln dürfen den neuen Tankstopp-CTA nicht verkleinern. */
.hero-card #tankNowBtn .tank-stop-quick-arrow{font-size:2rem}


/* 0.10.26 securetest3: Tankstopp ist eine dauerhaft sichtbare Primäraktion. */
.tank-stop-quick-card-always { margin-top:14px; margin-bottom:4px; }
.tank-stop-quick-card-always .tank-stop-quick-btn {
  min-height:92px; height:auto;
  box-shadow:0 18px 42px rgba(255,174,37,.38), inset 0 0 0 2px rgba(255,255,255,.50);
}
.tank-stop-quick-card-always .tank-stop-quick-action { font-size:1.16rem; }
@media (max-width: 520px) {
  .tank-stop-quick-card-always { margin-top:10px; }
  .tank-stop-quick-card-always .tank-stop-quick-btn { min-height:82px; padding:11px 12px; border-radius:18px; }
  .tank-stop-quick-card-always .tank-stop-quick-action { font-size:1.03rem; }
}

/* 0.10.26 stablefix1: eindeutiger Tankstopp – niemals still eine Tankstelle annehmen */
.tank-stop-station-select-wrap { margin:0 0 14px; }
.tank-stop-station-select-wrap .field-label { display:block; margin-bottom:6px; }
.tank-stop-station-select { width:100%; min-height:48px; font-weight:800; }
.tank-stop-station-select-wrap small { display:block; margin-top:6px; color:var(--muted); font-size:.75rem; line-height:1.35; }