/* ============================================================
   energieabc.de - Tanken: Rechner-Übersicht
   /tanken/rechner
   Nur auf dieser Unterseite laden (nach tanken-global.css).
   Schriften kommen aus der Global-CSS (/fonts/), hier werden
   nur die Namen verwendet. Variablen mit --rh- Präfix, gültig
   nur innerhalb von .rh-page.
   ============================================================ */
.rh-page{
  --rh-navy:#002254;
  --rh-navy-2:#0b3270;
  --rh-navy-soft:#e8edf5;
  --rh-green:#8AB529;
  --rh-green-dark:#6f9420;
  --rh-green-soft:#f1f7e3;
  --rh-red:#d9433b;
  --rh-amber:#e8a317;
  --rh-ink:#1a2233;
  --rh-muted:#5f6b7f;
  --rh-line:#dde3ec;
  --rh-bg:#f5f7fb;
  --rh-card:#ffffff;
  --rh-radius:18px;
  --rh-shadow:0 6px 24px rgba(0,34,84,.08);
  --rh-serif:'DM Serif Display',Georgia,serif;
  --rh-sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --rh-mono:'JetBrains Mono',ui-monospace,monospace;
  font-family:var(--rh-sans);color:var(--rh-ink);line-height:1.55;
  max-width:1120px;margin:0 auto;padding:0 16px 10px;
}
.rh-page *,.rh-page *::before,.rh-page *::after{box-sizing:border-box}
.rh-page h1,.rh-page h2,.rh-page p{margin:0;padding:0}
/* ---------- Hero ---------- */
.rh-hero{padding:26px 0 10px}
.rh-kicker{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--rh-green-dark);background:var(--rh-green-soft);padding:6px 12px;border-radius:999px}
.rh-hero h1{font-family:var(--rh-serif);font-weight:400;color:var(--rh-navy);font-size:clamp(2rem,5vw,3.2rem);line-height:1.1;margin:14px 0 12px}
.rh-hero h1 em{color:var(--rh-green);font-style:italic}
.rh-hero p{max-width:720px;color:var(--rh-muted);font-size:1.05rem}

/* ---------- Live-Preise ---------- */
.rh-live{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;background:var(--rh-navy);color:#fff;border-radius:14px;padding:14px 18px;margin:24px 0 8px;font-size:.88rem}
.rh-live-dot{width:10px;height:10px;border-radius:50%;background:var(--rh-green);box-shadow:0 0 0 0 rgba(138,181,41,.7);animation:rh-puls 2s infinite}
@keyframes rh-puls{70%{box-shadow:0 0 0 10px rgba(138,181,41,0)}100%{box-shadow:0 0 0 0 rgba(138,181,41,0)}}
.rh-live-title{font-weight:800}
.rh-live-item{display:flex;gap:6px;align-items:baseline}
.rh-live-item b{font-family:var(--rh-mono);color:var(--rh-green);font-size:1.05rem}
.rh-live-item b sup{font-size:.65rem}
.rh-live-src{margin-left:auto;font-size:.74rem;opacity:.7}
@media (max-width:700px){.rh-live-src{margin-left:0;width:100%}}

/* ---------- Sections ---------- */
.rh-section{margin:34px 0}
.rh-h2{font-family:var(--rh-serif);font-weight:400;color:var(--rh-navy);font-size:1.6rem;margin-bottom:16px}
.rh-h2 span{color:var(--rh-green)}

/* ---------- Rechner-Karten ---------- */
.rh-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px){.rh-grid{grid-template-columns:1fr}}
.rh-card{display:flex;flex-direction:column;background:var(--rh-card);border-radius:var(--rh-radius);box-shadow:var(--rh-shadow);overflow:hidden;text-decoration:none;color:inherit;border:2px solid transparent;transition:transform .2s,border-color .2s,box-shadow .2s}
.rh-card:hover{transform:translateY(-4px);border-color:var(--rh-green);box-shadow:0 12px 32px rgba(0,34,84,.14)}
.rh-preview{background:var(--rh-navy);height:170px;display:flex;align-items:center;justify-content:center;position:relative}
.rh-preview{overflow:hidden}
.rh-preview svg{width:100%;height:100%;display:block;overflow:visible}
.rh-tag{position:absolute;top:12px;left:12px;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--rh-green);color:var(--rh-navy);padding:4px 10px;border-radius:999px}
.rh-tag-neu{background:var(--rh-amber)}
.rh-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.rh-q{font-family:var(--rh-serif);font-weight:400;color:var(--rh-navy);font-size:1.45rem;line-height:1.2}
.rh-name{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--rh-green-dark);margin:6px 0 10px}
.rh-text{color:var(--rh-muted);font-size:.92rem}
.rh-chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 18px}
.rh-chip{font-size:.74rem;font-weight:600;background:var(--rh-navy-soft);color:var(--rh-navy);padding:4px 10px;border-radius:999px}
.rh-cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--rh-navy)}
.rh-cta i{font-style:normal;display:inline-block;transition:transform .2s;color:var(--rh-green)}
.rh-card:hover .rh-cta i{transform:translateX(5px)}

/* ---------- SVG-Vorschauen ---------- */
.rh-defs{position:absolute;width:0;height:0;overflow:hidden}
.rh-preview{background:linear-gradient(180deg,#002254 0%,#0b3270 100%)}
/* Farben */
.rh-s-white{fill:#fff}
.rh-s-green{fill:var(--rh-green)}
.rh-s-green-d{fill:var(--rh-green-dark)}
.rh-s-amber{fill:var(--rh-amber)}
.rh-s-red{fill:var(--rh-red)}
.rh-s-glass{fill:#7fa3d6}
.rh-s-glass-lit{fill:#ffd166}
.rh-s-wall{fill:#e9eef6}
.rh-s-wall-2{fill:#c9d4e5}
.rh-s-dark{fill:#011638}
.rh-s-star{fill:#fff;opacity:.5}
.rh-s-ground{fill:#011a42}
.rh-s-road-f{fill:#14305e}
.rh-s-road{stroke:#14305e;stroke-width:24;fill:none;stroke-linecap:round}
.rh-s-mid{stroke:rgba(255,255,255,.55);stroke-width:2;fill:none;stroke-dasharray:10 10}
.rh-s-lane{stroke:rgba(255,255,255,.22);stroke-width:2;stroke-dasharray:12 10}
.rh-s-smoke{fill:rgba(255,255,255,.35)}
/* Auto-Symbol */
.rh-col-white{color:#fff}
.rh-col-green{color:var(--rh-green)}
.rh-col-amber{color:var(--rh-amber)}
.rh-col-red{color:var(--rh-red)}
.rh-c-win{fill:#0b3270}
.rh-c-tire{fill:#0a1530}
.rh-c-rim{fill:#cfd6e2}
.rh-c-light{fill:#ffd166}
/* Tankstellen-Symbol */
.rh-t-roof{fill:#fff}
.rh-t-pillar{fill:rgba(255,255,255,.75)}
.rh-t-pump{fill:#e9eef6}
.rh-t-screen{fill:#0b3270}
.rh-t-pylon{fill:#011638;stroke:rgba(255,255,255,.6);stroke-width:1}
/* Texte */
.rh-s-txt{fill:#fff;font-family:var(--rh-mono);font-size:12px;font-weight:700}
.rh-s-txt-g{fill:var(--rh-green);font-family:var(--rh-mono);font-size:12px;font-weight:700}
.rh-s-txt-r{fill:#ff8a80;font-family:var(--rh-mono);font-size:12px;font-weight:700}
.rh-s-txt-n{fill:var(--rh-navy);font-family:var(--rh-mono);font-size:12px;font-weight:700}
.rh-s-lbl{fill:rgba(255,255,255,.7);font-family:var(--rh-sans);font-size:10px;font-weight:700}
.rh-s-pill-g{fill:var(--rh-green)}
.rh-s-pill-r{fill:var(--rh-red)}
.rh-s-pill-d{fill:rgba(1,22,56,.85);stroke:rgba(255,255,255,.25);stroke-width:1}
/* Tacho */
.rh-s-band{fill:none;stroke-width:8}
.rh-s-band-g{stroke:var(--rh-green)}
.rh-s-band-a{stroke:var(--rh-amber)}
.rh-s-band-r{stroke:var(--rh-red)}
.rh-s-dial{fill:#011638;stroke:rgba(255,255,255,.12);stroke-width:2}
.rh-s-tick{stroke:rgba(255,255,255,.75);stroke-width:2;stroke-linecap:round}
.rh-s-tick-wltp{stroke:#fff;stroke-width:4;stroke-linecap:round}
.rh-s-needle{stroke:#ff8a80;stroke-width:4;stroke-linecap:round;transform-origin:200px 125px;animation:rh-nadel 3s ease-in-out infinite alternate}
@keyframes rh-nadel{from{transform:rotate(-30deg)}to{transform:rotate(22deg)}}
.rh-s-hub{fill:#fff}
.rh-s-hub-in{fill:#ff8a80}
/* Animationen */
.rh-s-detour{stroke:var(--rh-green);stroke-width:3;fill:none;stroke-dasharray:6 7;stroke-linecap:round;animation:rh-dash 1.2s linear infinite}
@keyframes rh-dash{to{stroke-dashoffset:-26}}
.rh-s-move{animation:rh-pendel 4s ease-in-out infinite alternate}
@keyframes rh-pendel{from{transform:translateX(0)}to{transform:translateX(190px)}}
.rh-s-race1{animation:rh-race 3.2s ease-in-out infinite}
.rh-s-race2{animation:rh-race 3.8s ease-in-out infinite}
.rh-s-race3{animation:rh-race 2.8s ease-in-out infinite}
@keyframes rh-race{0%{transform:translateX(0)}70%,100%{transform:translateX(200px)}}
.rh-card .rh-s-move,.rh-card [class*="rh-s-race"]{animation-play-state:paused}
.rh-card:hover .rh-s-move,.rh-card:hover [class*="rh-s-race"]{animation-play-state:running}

/* ---------- Bald ---------- */
.rh-soon{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.rh-soon{grid-template-columns:1fr}}
.rh-soon-item{background:#fff;border:2px dashed var(--rh-line);border-radius:14px;padding:18px;color:var(--rh-muted)}
.rh-soon-item b{display:block;color:var(--rh-navy);font-size:.98rem;margin:4px 0 2px}
.rh-soon-ico{font-size:1.5rem}
.rh-soon-item small{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--rh-amber)}

/* ---------- Wegweiser / FAQ ---------- */
.rh-faq{background:#fff;border-radius:var(--rh-radius);box-shadow:var(--rh-shadow);padding:6px 22px}
.rh-faq details{border-bottom:1px dashed var(--rh-line);padding:14px 0}
.rh-faq details:last-child{border-bottom:none}
.rh-faq summary{cursor:pointer;font-weight:700;color:var(--rh-navy);list-style:none;display:flex;justify-content:space-between;gap:12px}
.rh-faq summary::-webkit-details-marker{display:none}
.rh-faq summary::after{content:'+';color:var(--rh-green);font-size:1.3rem;line-height:1}
.rh-faq details[open] summary::after{content:'−'}
.rh-faq p{color:var(--rh-muted);font-size:.92rem;margin-top:8px}
.rh-faq a{color:var(--rh-navy);font-weight:700}

/* SVG-Füllungen als Klassen (keine Präsentations-Attribute) */
.rh-cur{fill:currentColor}
.rh-s-check{fill:url(#rhCheck)}

/* Rechtlicher Hinweis */
.rh-legal{background:#fff;border-radius:14px;padding:18px;font-size:.78rem;color:var(--rh-muted);margin:16px 0 30px}
.rh-legal h5{color:var(--rh-navy);font-size:.88rem;margin:0 0 4px}

/* Touch-Geräte: Animation nur, solange die Karte sichtbar ist (setzt das JS) */
@media (hover:none){
  .rh-card .rh-s-move,.rh-card [class*="rh-s-race"]{animation-play-state:paused}
  .rh-card.is-sichtbar .rh-s-move,.rh-card.is-sichtbar [class*="rh-s-race"]{animation-play-state:running}
}
/* Weniger Bewegung gewünscht: alles still */
@media (prefers-reduced-motion:reduce){
  .rh-page *{animation:none!important;transition:none!important}
}