/*
Theme Name: Stromspur
Theme URI: https://stromspur.de
Description: Astra-Child-Theme für stromspur.de. Design „ruhig-warm“ (Claude Design, Übergabe 21.10.2026): Nachtblau, Bernstein, sandige Fläche; Bricolage Grotesque / Figtree / DM Mono, lokal eingebunden. Komponenten 1:1 aus style.components.css der Übergabe (Wurzelklasse .ss am body), darunter die Theme-Schicht für WordPress/Astra. Projektwerte in theme-config.php.
Author: Andreas Rothermund
Template: astra
Version: 2.0.2
Text Domain: infoportal
*/

/* ==========================================================================
   stromspur.de – Design-Tokens + Komponenten (Stand 21.10.2026)
   Gewählte Fassung: ruhig-warm, Überschriften in Bricolage Grotesque
   Tokens 1:1 wie theme-config.php: primary, primary-d, primary-50 ...
   ========================================================================== */

/* ---------- Tokens (Defaults; theme-config.php setzt dieselben Werte zusätzlich inline) ---------- */
:root {
  --primary: #1F3A5F;
  --primary-d: #152A47;
  --primary-50: #EEF2F7;
  --primary-100: #DCE4EF;
  --accent: #E8A13A;
  --accent-400: #F2BC62;
  --accent-600: #C27F17;
  --accent-700: #8A560B;
  --coal-900: #1E1A16;
  --coal-800: #2B2520;
  --ink: #1E1A16;
  --text: #3B342D;
  --muted: #6B6156;
  --line: #E7DECF;
  --line-2: #D6C8B2;
  --bg-soft: #F5EDE1;
  --bg: #FBF7F1;
  --success: #2D7449;

  --klasse-scooter: #0B6E78;
  --klasse-roller: #B0365F;
  --klasse-motorrad: #6A4CAE;
  --klasse-leicht: #5A6E1E;
  --klasse-auto: #2C5FA6;

  --surface: #FFFFFF;
  --on-primary: #FFFFFF;

  --font-serif: "Bricolage Grotesque", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --head-weight: 700;
  --head-track: -0.02em;

  --r-s: 10px;
  --r: 16px;
  --r-l: 24px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(30, 26, 22, .05), 0 6px 20px rgba(30, 26, 22, .06);

  /* Logo + Silhouetten */
  --lm-bg: var(--primary);
  --lm-fg: var(--bg);
  --lm-dot: var(--accent);
  --k: var(--muted);
  --sf: var(--line);
  --sl: var(--muted);
  --sw: var(--coal-800);
  --sh: var(--bg);
  --sg: #FFFFFF;
  --sa: var(--accent);
}

/* ---------- Klassen-Zuordnung ---------- */
.k-scooter  { --k: var(--klasse-scooter); }
.k-roller   { --k: var(--klasse-roller); }
.k-motorrad { --k: var(--klasse-motorrad); }
.k-leicht   { --k: var(--klasse-leicht); }
.k-auto     { --k: var(--klasse-auto); }
.k-pedelec  { --k: var(--muted); }
.k-scooter, .k-roller, .k-motorrad, .k-leicht, .k-auto, .k-pedelec {
  --k-tint: color-mix(in srgb, var(--k) 10%, #FFFFFF);
  --k-soft: color-mix(in srgb, var(--k) 24%, #FFFFFF);
  --sf: var(--k-soft);
  --sl: var(--k);
}
.k-pedelec { --sf: transparent; }

/* ---------- Basis ---------- */
.ss {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ss *, .ss *::before, .ss *::after { box-sizing: border-box; }
.ss h1, .ss h2, .ss h3, .ss h4 {
  font-family: var(--font-serif);
  font-weight: var(--head-weight);
  letter-spacing: var(--head-track);
  color: var(--ink);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
.ss h1 { font-size: clamp(36px, 5.2vw, 64px); font-weight: 800; letter-spacing: -0.025em; }
.ss h2 { font-size: clamp(27px, 3.2vw, 38px); font-weight: 800; letter-spacing: -0.025em; }
.ss h3 { font-size: 21px; line-height: 1.25; }
.ss h4 { font-size: 18px; line-height: 1.3; }
.ss h1 em, .ss h2 em { font-style: normal; color: var(--primary); }
.ss p { margin: 0; text-wrap: pretty; }
.ss a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ss a:hover { color: var(--primary-d); text-decoration-thickness: 2px; }
.ss :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.ss button { font: inherit; }
.ss img { max-width: 100%; }

.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.narrow { max-width: 760px; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: 19px; line-height: 1.6; color: var(--text); }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; }
.muted { color: var(--muted); }
.ink { color: var(--ink); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; flex-wrap: wrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Icons: <svg class="ic"><use href="#i-akku"/></svg> */
.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ic-s { width: 18px; height: 18px; }
.ic-l { width: 32px; height: 32px; stroke-width: 1.6; }
.sil { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.ss a.logo, .ss a.logo:hover { color: var(--ink); text-decoration: none; }
.logo-mark { width: 38px; height: 38px; flex: none; }
.logo-word { font-family: var(--font-serif); font-weight: 800; font-size: 25px; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.logo-word b { font-weight: 800; color: var(--primary); }
.logo.on-dark { --lm-bg: var(--bg); --lm-fg: var(--coal-900); --lm-dot: var(--coal-900); }
.logo.on-dark .logo-word, .logo.on-dark .logo-word b { color: var(--bg); }
.ss a.logo.on-dark { color: var(--bg); }

/* ---------- Kopf ---------- */
.topline { background: var(--bg-soft); color: var(--muted); font-size: 13px; }
.topline .wrap { display: flex; justify-content: space-between; align-items: center; gap: 8px 20px; min-height: 36px; flex-wrap: wrap; }
.topline .row { gap: 6px 18px; }
.topline a { color: var(--muted); text-decoration: none; }
.topline a:hover { color: var(--ink); text-decoration: underline; }
.topline .claim { display: inline-flex; align-items: center; gap: 6px; }
.hdr { background: var(--bg); border-bottom: 1px solid var(--line); }
.hdr .wrap { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.ss .nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15.5px; padding: 10px 13px; border-radius: var(--r-pill); }
.ss .nav a:hover { background: var(--primary-50); color: var(--primary-d); }
.ss .nav a.on { background: var(--primary-50); color: var(--primary-d); }
.hdr-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.only-mob { display: none !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: var(--r-pill);
  font: 700 16px/1 var(--font-sans); letter-spacing: .005em;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
}
.btn .ic { width: 20px; height: 20px; stroke-width: 2; }
.ss a.btn { text-decoration: none; }
.btn-primary, .ss a.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-primary:hover, .ss a.btn-primary:hover, .btn-primary.is-hover { background: var(--primary-d); border-color: var(--primary-d); color: var(--on-primary); }
.btn-ghost, .ss a.btn-ghost { background: transparent; color: var(--primary-d); border-color: var(--primary-d); }
.btn-ghost:hover, .ss a.btn-ghost:hover, .btn-ghost.is-hover { background: var(--primary-50); color: var(--primary-d); }
.btn-accent, .ss a.btn-accent { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn-accent:hover, .ss a.btn-accent:hover, .btn-accent.is-hover { background: var(--accent-400); border-color: var(--accent-400); color: var(--ink); }
.btn-text, .ss a.btn-text { background: none; border: 0; padding: 0 2px; min-height: 44px; color: var(--primary-d); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.btn-text:hover, .btn-text.is-hover { text-decoration-thickness: 3px; }
.btn.is-focus { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn:disabled, .btn.is-disabled { background: var(--bg-soft); color: var(--muted); border-color: var(--line-2); cursor: not-allowed; }
.btn-sm { min-height: 38px; padding: 0 15px; font-size: 14.5px; }
.btn-icon { width: 46px; padding: 0; }
.btn-onprimary, .ss a.btn-onprimary { background: var(--bg); color: var(--primary-d); border-color: var(--bg); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px 0 10px;
  border-radius: var(--r-pill); font-size: 14px; font-weight: 700; line-height: 1;
  background: var(--bg-soft); color: var(--text); border: 1px solid var(--line); white-space: nowrap;
}
.chip .ic { width: 18px; height: 18px; stroke-width: 1.9; }
.chip-k { background: var(--k-tint); color: var(--k); border-color: var(--k-soft); }
.chip-k.solid { background: var(--k); color: #FFFFFF; border-color: var(--k); }
.chip-lg { min-height: 36px; font-size: 15px; padding: 0 14px 0 11px; }
.chip-cat { background: var(--primary-50); color: var(--primary-d); border-color: var(--primary-100); }

/* Filter-Chips (Toggle) */
.fchip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: var(--surface);
  font: 600 15px/1 var(--font-sans); color: var(--ink); cursor: pointer; white-space: nowrap;
}
.fchip .ic { width: 18px; height: 18px; stroke-width: 2; }
.fchip:hover, .fchip.is-hover { border-color: var(--primary); }
.fchip[aria-pressed="true"], .fchip.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.fchip:disabled, .fchip.is-disabled { background: var(--bg-soft); color: var(--muted); border-style: dashed; cursor: not-allowed; }
.fchip .cnt { font: 500 13px/1 var(--font-mono); opacity: .85; }

/* Segment-Wahl (Schnellfinder, Rechner) */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }

/* Ansicht-Umschalter */
.vt { display: inline-flex; padding: 3px; gap: 2px; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); }
.vt button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text); font: 600 14.5px/1 var(--font-sans); cursor: pointer; }
.vt button .ic { width: 18px; height: 18px; }
.vt button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }

/* Schalter */
.sw { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: 600 15px/1.2 var(--font-sans); cursor: pointer; }
.sw-track { position: relative; width: 46px; height: 28px; border-radius: 14px; background: var(--line-2); flex: none; }
.sw-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.sw[aria-checked="true"] .sw-track { background: var(--primary); }
.sw[aria-checked="true"] .sw-track::after { left: 21px; }

/* ---------- Abschnitte ---------- */
.sec { padding: 72px 0; }
.sec-tight { padding: 48px 0; }
.sec-soft { background: var(--bg-soft); }
.sec-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 28px; flex-wrap: wrap; }
.sec-h .stack { gap: 8px; max-width: 680px; }
.g2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 24px; }
.g3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.g4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.card-pad { padding: 22px 24px; }
.link-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text); }
.ss a.link-card { color: var(--text); text-decoration: none; }
.ss a.link-card:hover { border-color: var(--primary); box-shadow: var(--shadow); color: var(--text); }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--primary-d); }
.more .ic { width: 18px; height: 18px; stroke-width: 2; }

/* ---------- Hero ---------- */
.hero { padding: 64px 0 0; background: var(--bg); overflow: hidden; }
.hero-in { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.hero .claim { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.hero .lead { max-width: 600px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.family { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 56px; padding-bottom: 28px; }
.family-road { position: absolute; left: -40px; right: -40px; bottom: 0; height: 120px; pointer-events: none; }
.fam { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; }
.ss a.fam { text-decoration: none; }
.fam-img { width: 100%; max-width: 190px; }
.fam-l { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--k); background: var(--bg); padding: 4px 10px 4px 8px; border-radius: var(--r-pill); }
.fam-l .ic { width: 18px; height: 18px; stroke-width: 2; }

/* ---------- Klassen-Kacheln ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.ss a.tile { color: var(--text); text-decoration: none; }
.ss a.tile:hover { border-color: var(--k); box-shadow: var(--shadow); color: var(--text); }
.tile-img { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: calc(var(--r) - 6px); background: var(--k-tint); padding: 8px 12% 4px; }
.tile-b { display: flex; flex-direction: column; gap: 6px; padding: 0 6px; }
.tile-n { display: flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-weight: var(--head-weight); letter-spacing: var(--head-track); font-size: 21px; color: var(--ink); line-height: 1.2; }
.tile-n .ic { color: var(--k); width: 26px; height: 26px; }
.tile-r { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); }
.tile-r .ic { width: 18px; height: 18px; color: var(--k); }
.tile-f { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.tile-f .more { font-size: 14.5px; }

/* ---------- Schnellfinder ---------- */
.finder { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.finder-q { display: flex; flex-direction: column; gap: 26px; padding: 30px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.q { display: flex; flex-direction: column; gap: 12px; border: 0; padding: 0; margin: 0; min-width: 0; }
.q legend { padding: 0; margin-bottom: 12px; font-weight: 700; color: var(--ink); font-size: 17px; display: flex; gap: 10px; align-items: center; }
.q legend .qn { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-50); color: var(--primary-d); font: 600 14px/1 var(--font-mono); }
.finder-r { display: flex; flex-direction: column; gap: 10px; }
.res { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: var(--r); background: var(--surface); border: 1.5px solid var(--line); }
.res-img { border-radius: var(--r-s); background: var(--k-tint); padding: 6px; }
.res-t { font-weight: 700; color: var(--ink); line-height: 1.3; }
.res-w { font-size: 14px; color: var(--muted); line-height: 1.4; }
.res-s { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.res.ok { border-color: var(--k); }
.res.ok .res-s { color: var(--success); }
.res.no { background: transparent; border-style: dashed; border-color: var(--line-2); }
.res.no .res-img { filter: grayscale(1); opacity: .55; }
.res.no .res-t { color: var(--muted); }
.res.no .res-s { color: var(--muted); }

/* ---------- Vergleichs-Teaser ---------- */
.vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.vs-side { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.vs-img { width: 100%; border-radius: var(--r-s); background: var(--k-tint); padding: 8px 10px 4px; }
.vs-x { font: 600 13px/1 var(--font-mono); color: var(--muted); background: var(--bg-soft); border-radius: var(--r-pill); padding: 7px 9px; }
.vs-n { font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.3; }

/* ---------- Fahrzeugkarte ---------- */
.vcard { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.vcard-img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--k-tint); padding: 10% 14% 6%; }
.vcard-tag { position: absolute; left: 10px; top: 10px; font: 500 11.5px/1 var(--font-mono); color: var(--muted); background: var(--surface); border-radius: var(--r-pill); padding: 5px 8px; }
.vcard-pick { position: absolute; right: 10px; top: 10px; }
.vcard-b { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; flex: 1; }
.vcard-n { font-family: var(--font-serif); font-weight: var(--head-weight); letter-spacing: var(--head-track); font-size: 21px; color: var(--ink); line-height: 1.2; }
.vcard-n a { color: var(--ink); text-decoration: none; }
.vcard-n a:hover { text-decoration: underline; }
.vkv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vkv div { display: flex; flex-direction: column; gap: 2px; }
.vkv dt, .vkv .l { font-size: 12.5px; color: var(--muted); }
.vkv dd, .vkv .v { margin: 0; font: 500 16px/1.25 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.vcard-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.price { font: 500 19px/1 var(--font-mono); color: var(--ink); }
.price small { font: 500 12px/1 var(--font-sans); color: var(--muted); }
.addcmp { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); font: 600 14px/1 var(--font-sans); cursor: pointer; }
.addcmp .ic { width: 18px; height: 18px; stroke-width: 2; }
.addcmp[aria-pressed="true"] { background: var(--primary-50); border-color: var(--primary); color: var(--primary-d); }

/* „Unsere Auswahl für …“ */
.pick { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: var(--r-pill); background: var(--accent-400); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.1; }
.pick .ic { width: 16px; height: 16px; stroke-width: 2.2; }
.pick-crit { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--r-s); background: color-mix(in srgb, var(--accent) 14%, #FFFFFF); font-size: 14px; color: var(--text); }
.pick-crit ul { margin: 0; padding-left: 18px; }

/* ---------- Regel-Faktenleiste ---------- */
.facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.fact { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--surface); }
.fact .ic { width: 26px; height: 26px; color: var(--k, var(--primary)); margin-top: 2px; }
.fact-l { font-size: 13px; color: var(--muted); line-height: 1.3; }
.fact-v { font-weight: 700; color: var(--ink); font-size: 16px; line-height: 1.3; }
.facts-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Stand / Quelle / Norm ---------- */
.stand { display: inline-flex; align-items: center; gap: 6px; font: 400 12.5px/1.35 var(--font-mono); color: var(--muted); }
.stand .ic { width: 15px; height: 15px; stroke-width: 1.8; }
.stand a { color: var(--muted); }
.norm { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .02em; white-space: nowrap; }
.norm .ic { width: 13px; height: 13px; stroke-width: 2.2; }
.norm-wltp { color: var(--primary-d); background: var(--primary-50); border-color: var(--primary-100); }
.norm-typ { color: var(--success); background: color-mix(in srgb, var(--success) 9%, #FFFFFF); border-color: color-mix(in srgb, var(--success) 28%, #FFFFFF); }
.norm-herst { color: var(--accent-700); background: color-mix(in srgb, var(--accent) 16%, #FFFFFF); border-color: color-mix(in srgb, var(--accent) 45%, #FFFFFF); }

/* ---------- Datenblatt ---------- */
.ds { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ds-h { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--bg-soft); font-weight: 700; color: var(--ink); font-size: 16px; }
.ds-h .ic { color: var(--primary); }
.ds-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 4px 16px; align-items: baseline; padding: 12px 20px; border-top: 1px solid var(--line); }
.ds-l { color: var(--text); font-size: 15.5px; }
.ds-v { font: 500 16px/1.35 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.ds-m { display: flex; gap: 6px 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Kernwerte ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); }
.kpi-l { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.kpi-l .ic { width: 17px; height: 17px; color: var(--k, var(--primary)); stroke-width: 2; }
.kpi-v { font: 500 26px/1.15 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi-v small { font: 500 15px/1 var(--font-sans); color: var(--muted); letter-spacing: 0; }

/* ---------- „Darf ich das fahren?“ ---------- */
.darf { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: var(--r); background: var(--k-tint); border: 1px solid var(--k-soft); }
.darf h3 { display: flex; align-items: center; gap: 10px; }
.darf h3 .ic { color: var(--k); }
.darf ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.darf li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 15.5px; }
.darf li .ic { color: var(--k); width: 22px; height: 22px; margin-top: 1px; }

/* ---------- Hinweisboxen ---------- */
.note { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 14px; padding: 18px 22px 18px 18px; border-radius: var(--r); background: var(--primary-50); }
.note > .ic { grid-row: span 2; width: 26px; height: 26px; color: var(--primary); stroke-width: 1.9; }
.note-t { font-weight: 700; color: var(--ink); }
.note-b { font-size: 16px; }
.note.warn { background: color-mix(in srgb, var(--accent) 18%, #FFFFFF); }
.note.warn > .ic { color: var(--accent-700); }
.note.tip { background: color-mix(in srgb, var(--success) 10%, #FFFFFF); }
.note.tip > .ic { color: var(--success); }

/* ---------- Anzeige / Partner / Werbung ---------- */
.anz { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.anz-tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; background: var(--ink); color: var(--bg); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pbox { background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.pbox-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px; background: var(--bg-soft); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pbox-b { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; }
.pbox-offer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pbox-p { font: 500 24px/1.1 var(--font-mono); color: var(--ink); }
.pbox-p small { font: 500 13px/1 var(--font-sans); color: var(--muted); }
.adslot { display: grid; place-items: center; gap: 4px; border: 1.5px dashed var(--line-2); border-radius: var(--r-s); background: repeating-linear-gradient(135deg, var(--bg-soft) 0 12px, var(--bg) 12px 24px); color: var(--muted); font: 500 13px/1.4 var(--font-mono); text-align: center; padding: 12px; }
.adslot-300 { width: 300px; max-width: 100%; height: 250px; margin: 0 auto; }
.adslot-wide { width: 100%; height: 120px; }
.adslot-side { width: 300px; max-width: 100%; height: 600px; }

/* Pflichtangaben (Pkw-EnVKV) */
.pflicht { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: var(--r-s); background: var(--bg-soft); border: 1px solid var(--line); }
.pflicht-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.pflicht-h .row { gap: 6px; }
.pflicht-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 12px; }
.pflicht-l { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.pflicht-v { font: 500 15px/1.3 var(--font-mono); color: var(--ink); }
.co2 { display: flex; gap: 3px; }
.co2 span { display: grid; place-items: center; width: 24px; height: 26px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line-2); color: var(--muted); font: 500 12.5px/1 var(--font-mono); }
.co2 span.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ---------- Vergleich / Tabellen ---------- */
.tbox { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.tbl th, .tbl td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-soft); font-size: 13px; font-weight: 700; color: var(--muted); }
.tbl tbody th { font-weight: 600; color: var(--ink); }
.tbl .fix { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.tbl thead .fix { z-index: 3; background: var(--bg-soft); }
.tbl td.n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.tbl tr.grp th { background: var(--bg); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.best { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 5px; margin: -2px 0 -2px -6px; border-radius: 6px; background: color-mix(in srgb, var(--success) 11%, #FFFFFF); color: var(--success); font-weight: 600; }
.best .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.cmp-head { display: flex; flex-direction: column; gap: 8px; min-width: 150px; }
.cmp-head .sil-box { border-radius: var(--r-s); background: var(--k-tint); padding: 8px 10px 4px; }
.cmp-head .n { font-family: var(--font-serif); font-weight: var(--head-weight); letter-spacing: var(--head-track); font-size: 17px; color: var(--ink); line-height: 1.2; }
.cmp-x { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); cursor: pointer; }
.cmp-x .ic { width: 16px; height: 16px; stroke-width: 2.2; }

.tbl-cmp { min-width: 860px; }
.tbl-cmp .fix { min-width: 190px; }
.tbl-cmp thead th { vertical-align: top; padding-top: 16px; padding-bottom: 16px; background: var(--surface); color: var(--ink); }
.tbl-cmp thead .fix { background: var(--surface); color: var(--muted); }

/* Merkliste / Vergleichsleiste */
.cmpbar { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 12px 14px 12px 20px; border-radius: var(--r); background: var(--coal-900); color: var(--line-2); box-shadow: 0 10px 30px rgba(30,26,22,.22); }
.cmpbar-t { font-weight: 700; color: var(--bg); font-size: 15px; }
.cmpbar-slots { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.slot { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px 0 12px; border-radius: var(--r-pill); background: var(--coal-800); color: var(--bg); font-size: 14px; font-weight: 600; }
.slot .ic { width: 16px; height: 16px; }
.slot.empty { background: transparent; border: 1.5px dashed #6B6156; color: var(--line-2); font-weight: 500; padding: 0 14px; }
.slot-x { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--line-2); cursor: pointer; }
.cmpbar .btn-accent { color: var(--ink); }

/* ---------- Filterleiste ---------- */
.fbar { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.fbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fbar-l { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-right: 4px; }
.fbar-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
.sel { position: relative; display: inline-flex; }
.sel select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 42px 0 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); font: 600 15px/1 var(--font-sans); cursor: pointer; }
.sel .ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; color: var(--muted); stroke-width: 2; }
.sortinfo { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; border-radius: var(--r-s); background: var(--primary-50); font-size: 14.5px; }

/* ---------- Leerer Zustand ---------- */
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 48px 24px; border-radius: var(--r); border: 1.5px dashed var(--line-2); background: var(--bg); }
.empty .ic { width: 40px; height: 40px; color: var(--muted); stroke-width: 1.4; }
.empty h3 { font-size: 22px; }
.empty p { max-width: 440px; color: var(--text); }

/* ---------- Formulare ---------- */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label, .field .lbl { font-weight: 700; color: var(--ink); font-size: 15.5px; }
.field .hint { font-size: 14px; color: var(--muted); line-height: 1.45; }
.inp { width: 100%; min-height: 50px; padding: 0 14px; border: 1.5px solid var(--muted); border-radius: var(--r-s); background: var(--surface); color: var(--ink); font: 400 17px/1.2 var(--font-sans); }
.inp.num { font-family: var(--font-mono); }
.inp:focus, .inp.is-focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--primary); }
.inp.is-error { border-color: var(--accent-700); border-width: 2px; }
.inp-wrap { position: relative; display: flex; align-items: center; }
.inp-wrap .unit { position: absolute; right: 14px; font: 500 15px/1 var(--font-mono); color: var(--muted); }
.err { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--accent-700); }
.err .ic { width: 18px; height: 18px; }
.radio-card { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: var(--r-s); border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 600; cursor: pointer; }
.radio-card input { width: 20px; height: 20px; accent-color: var(--primary); margin: 0; }
.radio-card.on { border-color: var(--primary); background: var(--primary-50); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--primary); margin: 2px 0 0; flex: none; }

/* ---------- Ergebnis Rechner ---------- */
.result { display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: var(--r-l); background: var(--surface); border: 2px solid var(--primary); }
.result-v { font: 500 52px/1 var(--font-mono); color: var(--ink); letter-spacing: -.03em; }
.result-v small { font: 600 18px/1 var(--font-sans); color: var(--muted); letter-spacing: 0; }
.result ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.result li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; }
.result li .ic { width: 20px; height: 20px; color: var(--success); stroke-width: 2.2; margin-top: 2px; }

/* ---------- Rechner-Teaser ---------- */
.calc-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 22%, #FFFFFF); color: var(--accent-700); }
.calc-ic .ic { width: 28px; height: 28px; }

/* ---------- News ---------- */
.news { display: flex; flex-direction: column; }
.news-i { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.news-i:last-child { border-bottom: 1px solid var(--line); }
.news-d { font: 500 14px/1.6 var(--font-mono); color: var(--muted); }
.news-b { display: flex; flex-direction: column; gap: 8px; }
.news-b h3 { font-size: 20px; }
.news-b h3 a { color: var(--ink); text-decoration: none; }
.news-b h3 a:hover { text-decoration: underline; }
.news-b .row { gap: 8px; }

/* ---------- Artikel ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; color: var(--muted); margin: 0; padding: 0; list-style: none; }
.crumbs a { color: var(--muted); }
.crumbs .ic { width: 14px; height: 14px; stroke-width: 2; }
.art { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.art-main { flex: 999 1 560px; min-width: 0; max-width: 740px; }
.art-side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.prose { font-size: 18px; line-height: 1.7; }
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: 48px; font-size: 30px; }
.prose h3 { margin-top: 32px; }
.prose ul, .prose ol { padding-left: 22px; margin-bottom: 0; }
.prose li + li { margin-top: 6px; }
.toc { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border-radius: var(--r); background: var(--bg-soft); }
.toc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.author { display: flex; align-items: center; gap: 12px; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primary-100); color: var(--primary-d); font-weight: 700; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 14px 0; font-weight: 700; color: var(--ink); font-size: 17px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--primary); transition: none; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq .a { padding: 0 0 20px; max-width: 68ch; }

/* Quellen */
.src { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.src ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.src li span { color: var(--muted); font-family: var(--font-mono); font-size: 12.5px; }

/* Seitenzahlen */
.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.pager a, .pager span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none; font: 500 15px/1 var(--font-mono); }
.ss .pager a { color: var(--ink); text-decoration: none; }
.ss .pager a:hover { border-color: var(--primary); }
.pager [aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pager .gap { border: 0; background: none; min-width: 20px; padding: 0; }

/* ---------- Fuß ---------- */
.ftr { background: var(--coal-900); color: var(--line-2); padding: 64px 0 28px; font-size: 15px; }
.ftr-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.ftr-about { display: flex; flex-direction: column; gap: 16px; max-width: 340px; }
.ftr h4 { font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-400); margin-bottom: 14px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ss .ftr a { color: var(--bg); text-decoration: none; }
.ss .ftr a:hover { text-decoration: underline; color: var(--bg); }
.ftr-bottom { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--coal-800); font-size: 13.5px; }

/* ==========================================================================
   Handy (≤ 760 px)
   ========================================================================== */
@media (max-width: 760px) {
  .ss { font-size: 16.5px; }
  .wrap { padding: 0 16px; }
  .only-desk { display: none !important; }
  .only-mob { display: inline-flex !important; }
  .topline .wrap { justify-content: center; min-height: 32px; }
  .topline .links { display: none; }
  .hdr .wrap { gap: 10px; min-height: 64px; }
  .nav { display: none; }
  .logo-mark { width: 32px; height: 32px; }
  .logo-word { font-size: 22px; }
  .btn { min-height: 46px; padding: 0 18px; }
  .sec { padding: 44px 0; }
  .sec-tight { padding: 32px 0; }
  .sec-h { margin-bottom: 20px; }
  .hero { padding-top: 36px; }
  .hero .lead { font-size: 17.5px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .family { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; margin-top: 36px; }
  .family-road { display: none; }
  .fam-l { font-size: 13px; padding: 3px 8px 3px 6px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tile { padding: 10px 10px 14px; gap: 10px; }
  .tile-n { font-size: 17px; gap: 6px; }
  .tile-n .ic { width: 20px; height: 20px; }
  .tile-r { font-size: 13.5px; align-items: flex-start; }
  .tile-b { padding: 0 2px; }
  .tile-f { display: none; }
  .finder { grid-template-columns: minmax(0, 1fr); }
  .finder-q { padding: 20px 16px; }
  .res { grid-template-columns: 60px minmax(0, 1fr); }
  .res-s { grid-column: 2; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts .fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fact { padding: 14px; gap: 10px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi-v { font-size: 23px; }
  /* 2.6.4: Die Wertspalte war `auto` — ein langer Wert oder ein Hinweis darunter machte sie zeilenbreit, die Beschriftung schrumpfte
     auf 0 und lag unter dem Wert („Blinker“/„ja“, „Bremsen“, Andreas 24.10.). Jetzt höchstens halbe Breite für die Beschriftung,
     der Wert bricht rechtsbündig um. */
  .ds-row { grid-template-columns: fit-content(50%) minmax(0, 1fr); padding: 12px 16px; }
  .ds-v { text-align: right; }
  .ds-m { grid-column: 1 / -1; justify-content: flex-start; }
  .ds-h { padding: 12px 16px; }
  .art { gap: 36px; }
  .prose { font-size: 17px; }
  .prose h2 { font-size: 25px; margin-top: 40px; }
  .news-i { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ftr { padding: 44px 0 24px; }
  .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .ftr-about { grid-column: 1 / -1; }
  .result-v { font-size: 42px; }
  .result { padding: 20px; }
  .cmpbar { padding: 12px; gap: 10px; }
  .cmpbar-slots { flex-basis: 100%; }
  .cmpbar .btn-accent { flex: 1; }
  .card-pad { padding: 18px; }
  .cmp-box { max-height: 640px; }
  .tbl-cmp { min-width: 0; font-size: 14px; }
  .tbl-cmp th, .tbl-cmp td { padding: 10px 10px; }
  .tbl-cmp .fix { min-width: 104px; max-width: 104px; font-size: 13.5px; }
  .tbl-cmp .cmp-head { min-width: 132px; }
  .tbl-cmp .cmp-head .chip { font-size: 12.5px; padding: 0 8px 0 6px; }
}

/* ==========================================================================
   THEME-SCHICHT stromspur 2.0.0 — WordPress/Astra (nicht Teil der Übergabe)
   ========================================================================== */

/* Astra-Reste ausblenden (eigener Kopf- und Fußbereich, Skill wordpress › Astra 2/2 h) */
.site-primary-header-wrap, .ast-above-header-wrap, .ast-below-header-wrap, .ast-mobile-header-wrap { display: none !important; }
.site-footer .ast-footer-copyright, .site-footer .ast-builder-grid-row-container, .site-footer .ast-builder-grid-row-footer-wrap { display: none !important; }
.ast-header-without-markup { display: none !important; }
.home.page .entry-header { display: none; }
/* Astra: .ast-container ist flex column-reverse und hebelt margin:auto aus (Skill wordpress, Astra 2/2 f) */
.ast-container:has(.ss-home) { display: block; max-width: none; padding: 0; }
.home .site-content > .ast-container { max-width: none; padding-left: 0; padding-right: 0; }
/* Fläche und Grundschrift auch dort, wo Astra eigene Flächen setzt */
body.ss { margin: 0; }
body.ss, .ss .site, .ss .site-content, .ss .ast-plain-container,
.ss.ast-separate-container, .ss.ast-separate-container .ast-article-single, .ss.ast-separate-container .ast-article-post { background: var(--bg); }
.ss.ast-separate-container .ast-article-single:not(.ast-related-post), .ss.ast-separate-container .ast-article-post { padding: 0; }
.ss, .ss button, .ss input, .ss select, .ss textarea { font-family: var(--font-sans); }
[hidden] { display: none !important; }

/* Kopf: WordPress-Menü als flache Navigation, Suchfeld, Handy-Schublade */
.hdr .logo { flex: none; }
.nav ul { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.ss .nav .current-menu-item > a, .ss .nav .current-menu-ancestor > a { background: var(--primary-50); color: var(--primary-d); }
.ss-suche { border-top: 1px solid var(--line); background: var(--bg); padding: 14px 0; }
/* Die Suchleiste sitzt im <header class="hdr">, dessen .wrap flex ist — das Formular schrumpfte auf 314 px und schnitt den
   Platzhalter ab (Sichtprüfung live 21.10.) */
.ss-suche .wrap { display: block; min-height: 0; }
.ss-suche .ss-suchform { max-width: 640px; }
.ss-suchform { display: flex; gap: 10px; align-items: center; margin: 0; }
.ss-suchform .inp { flex: 1; min-width: 0; }
.ss-schublade { position: fixed; inset: 0; z-index: 99999; background: rgba(30, 26, 22, .45); }
.ss-schublade-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); display: flex; flex-direction: column; gap: 18px; padding: 14px 20px 28px; overflow-y: auto; background: var(--bg); }
.ss-schublade-zu { align-self: flex-end; }
.ss-schublade-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ss .ss-schublade-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 4px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 17px; text-decoration: none; }
.ss-schublade .ss-suchform { flex-direction: column; align-items: stretch; }
.ss-schublade-service { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.ss .ss-schublade-service a { color: var(--muted); }

/* Astra färbt jeden <button> bei :focus/:hover blau (button:focus, button:hover → --ast-global-color-1, Spezifität 0,1,1) und
   schlug damit die Varianten (.btn-ghost 0,1,0) — live 21.10. an Such-Knopf, Schublade-zu (bekommt beim Öffnen den Fokus),
   Absenden und Filter-Chips gemessen. Den Fokus zeigt der Akzent-Rahmen (.ss :focus-visible), die Fläche bleibt wie in Ruhe. */
.ss .btn-primary:focus:not(:hover) { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ss .btn-ghost:focus:not(:hover) { background: transparent; border-color: var(--primary-d); color: var(--primary-d); }
.ss .btn-ghost:hover { border-color: var(--primary-d); }
.ss .btn-accent:focus:not(:hover) { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.ss .fchip:is(:focus, :hover):not([aria-pressed="true"]):not(:disabled) { background: var(--surface); color: var(--ink); }
.ss .fchip:focus:not(:hover):not([aria-pressed="true"]):not(:disabled) { border-color: var(--line-2); }

/* Fuß: Spaltenköpfe als h2 (Gliederung), Aussehen wie .ftr h4 der Übergabe */
.ftr .ftr-h { font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; color: var(--accent-400); margin: 0 0 14px; }
.ftr-about p { margin: 0; }

/* Startseite: Klassen ohne veröffentlichte Seite (nicht verlinkt) */
.tile.is-soon .soon { font: 500 12.5px/1.35 var(--font-mono); color: var(--muted); }
span.fam { cursor: default; }
.tiles .tile-n { margin: 0; }
/* Handy: „Leichtfahrzeug“ ragte bei 17 px über die halbe Kachelbreite (Sichtprüfung 21.10.) → deutsch trennen */
.tile-n, .res-t { min-width: 0; overflow-wrap: break-word; hyphens: auto; }

/* Schnellfinder */
.finder-sum { margin: 0 0 4px; font-weight: 700; }
.finder-liste { display: flex; flex-direction: column; gap: 10px; }
.res.eher .res-s { color: var(--accent-700); }

/* Seiten (Pflichtseiten, später Ratgeber): Textspalte 760 px, Prosa wie .prose der Übergabe */
.ss.page:not(.home) .site-content > .ast-container, .ss.single .site-content > .ast-container { max-width: 1200px; padding: 0 32px; }
.ss.page:not(.home) .entry-header, .ss.single .entry-header { max-width: 760px; margin: 56px auto 28px; padding: 0; }
/* Astra setzt header.entry-header .entry-title auf 32 px (0,2,1) — hier (0,3,1) */
.ss.page header.entry-header .entry-title, .ss.single header.entry-header .entry-title { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.1; font-weight: 800; letter-spacing: -.025em; color: var(--ink); }
.ss .entry-content { font-size: 18px; line-height: 1.7; color: var(--text); }
.ss.page:not(.home) .entry-content > *, .ss.single .entry-content > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.ss .entry-content > * + * { margin-top: 18px; }
.ss .entry-content > :last-child { margin-bottom: 72px; }
.ss .entry-content h2 { margin-top: 48px; font-size: 30px; }
.ss .entry-content h3 { margin-top: 32px; }
.ss .entry-content ul, .ss .entry-content ol { padding-left: 22px; margin-bottom: 0; }
.ss .entry-content li + li { margin-top: 6px; }
.ss .entry-content a:not(.btn) { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ss .entry-content a:not(.btn):hover { color: var(--primary-d); text-decoration-thickness: 2px; }
.ss .entry-content table { width: 100%; border-collapse: collapse; font-size: 15.5px; border: 0; }
.ss .entry-content th, .ss .entry-content td { padding: 12px 16px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--line); }
.ss .entry-content thead th { background: var(--bg-soft); font-size: 13px; color: var(--muted); }

/* Suche und Archive (Astra-Vorlage „blog-layout-4“): ohne weiße Kästen, Titel links wie Seitentitel, Treffer als Liste in der
   760er-Spalte. Astra: .search .ast-container section.ast-archive-description (0,3,1) — hier (0,4,1). */
.ss.search .site-content > .ast-container, .ss.archive .site-content > .ast-container { display: block; max-width: 1200px; padding: 0 32px; }
/* Abstand Kopf → Titel wie auf Seiten (gemessen 21.10.: 116 px Desktop, 36 px Handy). Astra gibt #primary hier 68 px Rand
   (fiel mit dem Titelrand zusammen → 68) bzw. auf dem Handy 66 px Innenabstand (→ 102). Innenabstand fällt nicht zusammen. */
.ss.search #primary, .ss.archive #primary { margin-top: 0; padding-top: 60px; }
.ss.ast-separate-container .ast-container section.ast-archive-description { max-width: 760px; margin: 56px auto 28px; padding: 0; background: transparent; text-align: left; }
.ss .ast-archive-description .page-title { margin: 0; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.ss .ast-archive-description .ast-breadcrumbs-wrapper { margin-top: 10px; font-size: 14.5px; color: var(--muted); }
.ss.search .site-main, .ss.archive .site-main { max-width: 760px; margin: 0 auto 72px; }
.ss.search .site-main > .ast-row { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.ss.search .ast-row > article.ast-article-post { width: 100%; max-width: 100%; flex: none; margin: 0; padding: 0; }
.ss.search .ast-row .ast-article-inner { padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: none; }
.ss.search .ast-row .entry-title { margin: 0 0 6px; font-size: 22px; line-height: 1.25; }
.ss.search .ast-row .entry-title a { color: var(--ink); text-decoration: none; }
.ss.search .ast-row .entry-title a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.ss.search .ast-excerpt-container p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); }
.ss.search .ast-blog-featured-section:empty, .ss.search .type-page .ast-blog-meta-container { display: none; }
/* Beitrags-Meta gedämpft statt Astra-Blau; WordPress gibt dem Autor die hCard-Klasse .vcard — im Entwurf die Fahrzeugkarte */
.ss .entry-meta, .ss .entry-meta * { color: var(--muted); font-size: 14px; }
.ss .entry-meta .vcard { display: inline; overflow: visible; background: none; border: 0; border-radius: 0; }
.ss.ast-separate-container .no-results { padding: 0; background: transparent; text-align: left; }
.ss .no-results .page-content > * + * { margin-top: 18px; }

/* Modellseite des Plugins stromspur-fahrzeuge 0.1.x (Klassen ss-*) im Stil von .darf/.tbox/.norm,
   bis das Plugin die Komponenten der Übergabe selbst ausgibt */
.ss .ss-regeln { padding: 22px 24px; border-radius: var(--r); background: var(--primary-50); border: 1px solid var(--primary-100); }
.ss .ss-regeln h2, .ss .ss-datenblatt h2 { margin: 0 0 12px; font-size: 24px; }
.ss .ss-regeln ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.ss .ss-datenblatt { margin-top: 40px; }
.ss .ss-tabelle { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.ss .ss-tabelle table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; margin: 0; }
.ss .ss-tabelle th, .ss .ss-tabelle td { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ss .ss-tabelle tbody th { font-weight: 600; color: var(--ink); }
.ss .ss-tabelle td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.ss .ss-norm { display: inline-flex; padding: 2px 7px; border-radius: var(--r-pill); border: 1px solid var(--primary-100); background: var(--primary-50); color: var(--primary-d); font: 500 11.5px/1.3 var(--font-mono); }
.ss .ss-quelle { font: 500 11px var(--font-mono); color: var(--muted); }
.ss .ss-quellen { margin-top: 14px; font-size: 14.5px; }
/* Bilder der Modellseite (Plugin 0.2): Herstellerfotos sind auf Weiß freigestellt → weiße Bildfläche statt Klassen-Tönung;
   der Bildnachweis steht an jedem Bild (Bedingung der Freigaben) UNTER dem Foto — als Overlay verdeckte er auf den kleinen
   Bildern Räder und Trittbrett (Sichtprüfung 22.10.); Bilder nur verkleinert (object-fit: contain, kein Beschnitt) */
.ss .ss-bilder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 36px; align-items: start; }
.ss .ss-bild { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
.ss .ss-bild-haupt { grid-column: 1 / -1; border-radius: var(--r-l); }
.ss .ss-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.ss .ss-bild-haupt img { aspect-ratio: 16 / 10; }
.ss .ss-bildnachweis { padding: 6px 10px 8px; color: var(--muted); font: 500 11px/1.4 var(--font-mono); overflow-wrap: anywhere; }
.ss .ss-bild-haupt .ss-bildnachweis { padding: 8px 16px 12px; font-size: 12px; }
/* Beschreibung der Modellseite (Plugin 0.2.1): ohne eigene Ränder liefen die Absätze zu einem Block zusammen (Sichtprüfung 22.10.) */
.ss .ss-beschreibung { margin: 0 0 36px; }
.ss .ss-beschreibung p { margin: 0 0 1em; }
.ss .ss-beschreibung p:last-child { margin-bottom: 0; }

/* Fahrzeug-Vorlagen (2.1.0): Modellseite nach Entwurf „Modell“, Klassenseite nach Entwurf „Klasse“.
   [hidden] muss gewinnen — die Komponenten setzen display:grid/flex und würden ausgeblendete Karten/Zeilen sonst zeigen. */
.ss .ss-klasse [hidden], .ss .ss-modell [hidden] { display: none !important; }
.ss .ss-modell-kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 32px; align-items: start; }
.ss .ss-modell-bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.ss .ss-modell-bilder .ss-bild-haupt { grid-column: 1 / -1; }
.ss .ss-modell-sil { position: relative; grid-column: 1 / -1; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-l); background: var(--k-tint); padding: 10%; }
.ss .ss-modell-info { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ss .ds-hinweis { display: block; margin-top: 3px; font: 400 13px/1.4 var(--font-sans); color: var(--muted); }
/* Quellenzeile unter den Klassenfakten bricht um (2.2.1): als inline-flex stand jede Quelle als eigenes Element in einer
   Reihe — bei den 7 Quellen der E-Roller wurde die Seite auf dem Handy 1.144 px breit */
.ss .facts-foot .stand { display: block; min-width: 0; }
.ss .facts-foot .stand .ic { vertical-align: -3px; margin-right: 6px; }
/* Fehlender Wert „k. A.“ / „keine Herstellerangabe“ (2.1.3) */
.ss .ss-ka { color: var(--muted); font-family: var(--font-sans); font-weight: 400; }
.ss abbr.ss-ka { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.ss .ss-quellen-box h2 { margin: 8px 0 0; font-size: 22px; }
.ss .ss-klasse-inhalt { max-width: 760px; }
.ss .ss-klasse-inhalt > :first-child { margin-top: 0; }
/* „Versicherungsplakette“/„Höchstgeschwindigkeit“ wurden abgeschnitten (2.1.1); die automatische Trennung machte daraus
   „Versiche-rungsplaket-te“ → seit 2.3.1 nur noch an weichen Trennstellen der Wortfugen (ss_trennstellen() in functions.php) */
.ss .ss-klasse .fact-l, .ss .ss-klasse .fact-v { hyphens: manual; overflow-wrap: anywhere; min-width: 0; }
/* Am Handy steht das Symbol über dem Text (2.3.1): neben dem Symbol passte schon „Versicherungs-“ nicht in die halbe Spalte,
   der Browser brach dann mitten im Wort („Versicherun|gsplakette“) */
@media (max-width: 600px) { .ss .ss-klasse .fact { flex-direction: column; gap: 6px; } }
/* Tabellenboxen als Bezugsrahmen (2.4.0): absolut positionierte Screenreader-Texte (.sr, z. B. „(bester Wert)“) lagen sonst relativ zur
   Seite statt zur scrollbaren Box und verbreiterten die Vergleichsseite am Handy auf 850 px */
.ss .tbox { position: relative; }
/* Vergleich: Knöpfe je Ausführung auf der Modellseite, Leiste unten */
.ss .ss-vergleich-knoepfe { flex-wrap: wrap; }
.ss .ss-cmpbar-huelle { pointer-events: none; }
.ss .ss-cmpbar-huelle .cmpbar { pointer-events: auto; }
.ss .ss-klasse .fact > div { min-width: 0; }
.ss .ss-modell .kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }   /* 4 oder 5 Kennzahlen ohne Lücke */
.ss .ss-mehr { align-self: center; }

/* Formularfelder außerhalb der Komponenten (WordPress-Suche, später Gravity Forms) — Rahmen muted (≥ 3 : 1) */
.ss input[type="text"], .ss input[type="email"], .ss input[type="search"], .ss input[type="tel"], .ss input[type="url"], .ss input[type="number"], .ss select, .ss textarea {
  min-height: 50px; box-sizing: border-box; padding: 0 14px; border: 1.5px solid var(--muted); border-radius: var(--r-s); background: var(--surface); color: var(--ink); font: 400 17px/1.2 var(--font-sans);
}
.ss textarea { padding: 12px 14px; min-height: 140px; }
.ss input:focus, .ss select:focus, .ss textarea:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--primary); }
.ss input[type="checkbox"], .ss input[type="radio"] { accent-color: var(--primary); width: 20px; height: 20px; }

@media (max-width: 760px) {
  .ss.page:not(.home) .site-content > .ast-container, .ss.single .site-content > .ast-container { padding: 0 16px; }
  .ss.page:not(.home) .entry-header, .ss.single .entry-header { margin-top: 36px; margin-bottom: 20px; }
  .ss.search .site-content > .ast-container, .ss.archive .site-content > .ast-container { padding: 0 16px; }
  .ss.search #primary, .ss.archive #primary { padding-top: 0; }
  .ss.ast-separate-container .ast-container section.ast-archive-description { margin-top: 36px; margin-bottom: 20px; }
  .ss.search .ast-row .ast-article-inner { padding: 18px; }
  .ss .entry-content { font-size: 17px; }
  .ss .entry-content h2 { font-size: 25px; margin-top: 40px; }
  .ss .entry-content > :last-child { margin-bottom: 44px; }
  .ss-suchform { flex-wrap: wrap; }
  .ss .ss-bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Tabellen im Beitragstext scrollen waagrecht statt die Seite zu verbreitern (2.2.3; Ratgeber S-Pedelec: 4 Spalten → 607 px) */
  .ss .entry-content table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Pkw-EnVKV-Pflichtangaben (2.6.0, E-Autos E4): gut lesbar, Schrift wie der Fließtext — nicht kleiner als die Leistungsangaben im
   Datenblatt; kein Tooltip, kein Akkordeon (research_notes/e-autos-2026-10-23/B-recht.md › 10). */
.ss .ss-envkv { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--surface); font-size: 16px; line-height: 1.45; color: var(--ink); }
.ss .ss-envkv strong { font-size: 16px; }
.ss .ss-envkv-fuss { font-size: 14px; color: var(--muted); }
.ss .ss-envkv-zeile { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); }

/* Herstellerfoto in der Übersicht (2.6.5, Andreas 24.10.2026): auf der Karte statt der Silhouette, nur wo die Fahrzeugdatei das
   Hauptbild dafür freigibt. Freisteller stehen auf Weiß, ohne Beschnitt; der Bildnachweis sitzt im freien Rand unter dem Foto. */
.ss .vcard-foto { display: block; margin: 0; padding: 0; background: #fff; }
.ss .vcard-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6% 8% 11%; box-sizing: border-box; }
.ss .vcard-foto figcaption { position: absolute; right: 10px; bottom: 7px; left: 10px; text-align: right; font: 400 11px/1.3 var(--font-sans); color: var(--muted); }
/* Vorschaubild in der Tabellenansicht, Sammelnachweis unter der Tabelle */
.ss .tbl .tbl-foto { display: block; width: 64px; height: 40px; margin-bottom: 6px; background: #fff; border-radius: 6px; }
.ss .tbl .tbl-foto img { width: 100%; height: 100%; object-fit: contain; }
.ss .tbl-fotos { margin: 0; padding: 10px 16px; font-size: 12px; color: var(--muted); }
/* Bild der Karte als Link zur Modellseite (2.6.6) — sieht aus wie vorher, nur klickbar */
.ss .vcard-bildlink { display: block; color: inherit; text-decoration: none; }
.ss .vcard-bildlink:hover .vcard-img { filter: brightness(.97); }
/* Szenenfotos füllen den Rahmen (2.6.7, Bildfeld `szene`; Andreas 24.10.2026 „16:10 sehen glaube ich besser aus wenn sie das Feld besser
   füllen“): mittig zugeschnitten statt mit weißem Rand — Hauptbild 16:10, Kacheln 4:3, Karte 16:10, Tabelle. Freisteller auf Weiß
   (ohne `szene`, z. B. Egret) bleiben ganz sichtbar. */
.ss .ss-bild-szene img, .ss .tbl .tbl-foto-szene img { object-fit: cover; }
.ss .vcard-szene img { padding: 0; object-fit: cover; }
.ss .vcard-szene figcaption { left: auto; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .88); }

/* Ratgeber-Karten (2.7.0): Übersicht /ratgeber/ und Block auf der Startseite */
.ss .ss-rcard h3 { margin: 0; font-size: 19px; line-height: 1.3; color: var(--ink); }
.ss .ss-rcard p { margin: 0; }
.ss .ss-rcard .more { margin-top: auto; }
.ss .ss-ratgeber-gruppe + .ss-ratgeber-gruppe { padding-top: 0; }

/* Brotkrumen über dem Titel der Ratgeber (2.8.0, sichtbar wie das BreadcrumbList im JSON-LD) */
.ss .ss-crumbs-artikel { margin: 0 0 16px; }

/* Einordnung in die Klasse (2.9.0): je Kennzahl Wert, Balken (Anteil der Modelle, die schlechter abschneiden) und Satz */
.ss .ss-einordnung { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.ss .ss-rang-liste { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.ss .ss-rang { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 2fr); gap: 6px 16px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.ss .ss-rang:first-child { border-top: 0; }
.ss .ss-rang-l { font-weight: 600; color: var(--ink); }
.ss .ss-rang-v { font: 500 15px/1.4 var(--font-mono); color: var(--ink); }
.ss .ss-rang-bar { display: block; height: 8px; border-radius: 4px; background: var(--bg-soft); overflow: hidden; }
.ss .ss-rang-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--k, var(--primary)); }
.ss .ss-rang-t { font-size: 14.5px; color: var(--text); }
@media (max-width: 760px) {
  .ss .ss-rang { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
  .ss .ss-rang-bar, .ss .ss-rang-t { grid-column: 1 / -1; }
}
/* Alternativen (2.9.0): Unterschied als Satz über der Karte */
.ss .ss-alt { display: flex; flex-direction: column; gap: 8px; }
.ss .ss-alt-t { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.ss .ss-alt .vcard { flex: 1; }

/* Die Klasse in Zahlen (2.10.0): Streudiagramm. Eine Reihe in der Klassenfarbe, Punkte mit 2-px-Ring in der Fläche, Haarlinien,
   Text in Text-Tönen (nie in der Datenfarbe); breite Fassung ab 701 px, schmale darunter */
.ss .ss-diagramm { position: relative; margin: 0; padding: 16px 12px 8px; background: var(--surface); }
.ss .ss-dia { display: block; width: 100%; height: auto; overflow: visible; }
.ss .ss-dia-schmal { display: none; }
@media (max-width: 700px) { .ss .ss-dia-breit { display: none; } .ss .ss-dia-schmal { display: block; } }
.ss .ss-dia-grid { stroke: var(--line); stroke-width: 1; }
.ss .ss-dia-tick { fill: var(--muted); font-family: var(--font-mono); }
.ss .ss-dia-achse { fill: var(--text); font-family: var(--font-sans); font-weight: 600; }
.ss .ss-dia-label { fill: var(--ink); font-family: var(--font-sans); font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.ss .ss-pt-hit { fill: transparent; }
.ss .ss-pt-dot { fill: var(--k, var(--primary)); stroke: var(--surface); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform .12s; }
.ss .ss-pt:hover .ss-pt-dot, .ss .ss-pt:focus .ss-pt-dot, .ss .ss-pt.is-aktiv .ss-pt-dot { transform: scale(1.5); }
.ss .ss-pt:focus { outline: none; }
.ss .ss-pt:focus-visible .ss-pt-hit { stroke: var(--ink); stroke-width: 1.5; }
.ss .ss-tip { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; max-width: 260px; padding: 8px 10px; border-radius: 8px;
  background: var(--coal-900); color: #fff; font-size: 13.5px; line-height: 1.35; pointer-events: none; box-shadow: var(--shadow); }
.ss .ss-tip[hidden] { display: none; }
.ss .ss-tip strong { font-weight: 700; }
.ss .ss-tip span { color: rgba(255, 255, 255, .82); }

/* Ladekosten-Rechner (2.11.0) und Kasten „Was kosten 100 km?“ auf Modellseiten */
.ss .ss-rechner-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .ss .ss-rechner-raster { grid-template-columns: minmax(0, 1fr); } }
.ss .ss-rechner-form { display: flex; flex-direction: column; gap: 16px; }
.ss .ss-rechner-form select.inp { width: 100%; }
.ss .ss-rechner-vergleich summary { cursor: pointer; font-weight: 600; color: var(--primary-d); margin-bottom: 10px; }
.ss .ss-rechner-vergleich .field + .field { margin-top: 12px; }
.ss .ss-rechner-ergebnis { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.ss .ss-rechner-werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.ss .ss-rechner-werte[hidden] { display: none; }
.ss .ss-rechner-werte div { padding: 12px 14px; border-radius: var(--r); background: var(--bg-soft); }
.ss .ss-rechner-werte dt { font-size: 13.5px; color: var(--muted); }
.ss .ss-rechner-werte dd { margin: 2px 0 0; font-size: 24px; font-weight: 700; color: var(--ink); }
.ss .ss-rechner-weg { margin: 0; color: var(--text); font-family: var(--font-mono); font-size: 13.5px; }
.ss .ss-ladekosten-kasten { margin-top: 20px; }

/* Schnellfinder (2.12.0): Modellzahl, Reichweite und Link je passender Klasse */
.ss .res-z { margin-top: 6px; font-size: 14px; color: var(--text); }
.ss .res-link { font-weight: 700; color: var(--primary-d); white-space: nowrap; }

/* Beitragsbild der Ratgeber unter der Überschrift (2.13.0) */
.ss .ss-beitragsbild { margin: 8px 0 24px; }
.ss .ss-beitragsbild img { display: block; width: 100%; height: auto; border-radius: var(--r); }
/* Ratgeber-Karten mit Bild (2.13.0): Bild randlos oben in der Karte, 3:2 wie die Illustrationen */
.ss .ss-rcard-mit-bild { padding-top: 0; overflow: hidden; }
.ss .ss-rcard-bild { display: block; margin: 0 -24px 4px; aspect-ratio: 3 / 2; background: var(--bg-soft); }
.ss .ss-rcard-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Neuigkeiten (2.14.0): Übersicht /neuigkeiten/ als Liste, Meldungen der Portal-Redaktion mit Einstieg und Quellenzeile */
.ss .ss-meldungen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.ss .ss-mcard h3 { margin: 0; font-size: 19px; line-height: 1.3; color: var(--ink); }
.ss .ss-mcard p { margin: 0; }
.ss .ss-seitenzahlen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ss .ss-seitenzahlen .page-numbers { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  color: var(--primary-d); text-decoration: none; font-weight: 600; }
.ss .ss-seitenzahlen .page-numbers.current { background: var(--primary); border-color: var(--primary); color: #fff; }
.ss .entry-content .ss-lead { font-size: 1.12em; line-height: 1.55; color: var(--ink); }
.ss .entry-content .ss-nachweis { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }

/* ---------- 2.15.0 (Andreas 26.10.2026 „alles go“ zum UX-Befund emobilitaet-portal/BEFUND-2026-10-26-ux-check.md) ---------- */
/* Ratgeber-Bausteine (2.16.1: auch im Begleittext der Klassen- und Listenseiten, .ss-klasse-inhalt): Kurz gesagt, Praxisbeispiel, Rechenbeispiel, Achtung. Markup ohne Leerzeilen im aside (wpautop):
   <aside class="ss-kasten ss-beispiel"><p class="ss-kasten-t">Aus der Praxis</p><p>…</p></aside> */
.ss :is(.entry-content, .ss-klasse-inhalt) .ss-kasten { padding: 18px 22px; border-radius: var(--r); background: var(--primary-50); border-left: 4px solid var(--primary); }
.ss :is(.entry-content, .ss-klasse-inhalt) .ss-kasten > * + * { margin-top: 10px; }
.ss :is(.entry-content, .ss-klasse-inhalt) .ss-kasten > :first-child { margin-top: 0; }
.ss :is(.entry-content, .ss-klasse-inhalt) .ss-kasten > :last-child { margin-bottom: 0; }
.ss :is(.entry-content, .ss-klasse-inhalt) .ss-kasten-t { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.ss :is(.entry-content, .ss-klasse-inhalt) .ss-kurz h2 { margin: 0; font-size: 20px; }
.ss :is(.entry-content, .ss-klasse-inhalt) .ss-beispiel { background: color-mix(in srgb, var(--success) 9%, #FFFFFF); border-left-color: var(--success); }
.ss :is(.entry-content, .ss-klasse-inhalt) .ss-rechnung { background: var(--bg-soft); border-left-color: var(--ink); font-variant-numeric: tabular-nums; }
.ss :is(.entry-content, .ss-klasse-inhalt) .ss-achtung { background: color-mix(in srgb, var(--accent) 16%, #FFFFFF); border-left-color: var(--accent-700); }
.ss :is(.entry-content, .ss-klasse-inhalt) .ss-kasten table { font-size: 15px; }
.ss :is(.entry-content, .ss-klasse-inhalt) .ss-kasten th, .ss :is(.entry-content, .ss-klasse-inhalt) .ss-kasten td { padding: 8px 10px; }
@media (max-width: 760px) { .ss :is(.entry-content, .ss-klasse-inhalt) .ss-kasten { padding: 16px; } }

/* Modellseite: Überblick mit Zwischenüberschriften; beim E-Auto Gurt/Mitnahme aufklappbar */
.ss .ss-beschreibung h2 { margin: 0 0 14px; }
.ss .ss-beschreibung h3 { margin: 24px 0 10px; }
.ss .darf-mehr summary { cursor: pointer; font-size: 15px; color: var(--primary-d); text-decoration: underline; text-underline-offset: 3px; }
.ss .darf-mehr[open] summary { margin-bottom: 10px; }
.ss .darf-mehr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ss .darf ul:empty { display: none; }

/* Klassenseite: Quellen der Klassenregeln aufklappbar */
.ss .facts-quellen summary { cursor: pointer; display: inline; }
.ss .facts-quellen[open] { display: block; }