/* ==========================================================================
   KENBES.de — Aufwertung der praktisch-Startseite
   --------------------------------------------------------------------------
   Additiv. Nur auf der Startseite eingebunden (nach start-praktisch.css),
   nie auf den Fahrzeugseiten. Eigene aw-*-Klassen, damit nichts mit dem
   Bestand kollidiert. Nutzt die praktisch-Tokens (Graphit, Gold, 4px).
   Respektiert die Lean-Entscheidung vom 26.09.: keine Hover-Transforms,
   scharfe Ecken, kompakt. Keine Fremdressourcen, CSP-konform (kein
   Inline-Style — alles hier).
   ========================================================================== */

/* --- Zahlenband (Beweis in Zahlen) --------------------------------------- */
.praktisch .aw-statband{padding:0}   /* praktisch gibt jedem section 44px — hier nicht */
.aw-statband{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--bg-2)}
.aw-statband__in{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:22px 0}
.aw-statband__i{text-align:center;min-width:0}
.aw-statband__n{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.aw-statband__l{margin-top:6px;font-size:.8rem;color:var(--fg-2);letter-spacing:.02em}

/* --- Prüfstand / Dyno-Kurve (löst "mit Diagramm" ein) -------------------- */
.aw-pruefstand .aw-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,48px);align-items:center}
.aw-pruefstand h2{margin:0}
.aw-pruefstand .aw-lead{color:var(--fg-2);margin:14px 0 0;max-width:46ch}
.aw-checks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:11px}
.aw-checks li{display:flex;gap:11px;align-items:flex-start;color:var(--fg-2);font-size:.95rem}
.aw-checks li svg{flex:0 0 19px;width:19px;height:19px;stroke:var(--ok);fill:none;stroke-width:2;margin-top:2px}
.aw-checks b{color:var(--fg)}
.aw-dyno{position:relative;background:var(--bg-2);border:1px solid var(--line);border-top:3px solid var(--accent);padding:20px}
.aw-dyno__code{position:absolute;top:12px;right:16px;font-family:var(--mono);font-size:12px;color:var(--accent);opacity:.5}
.aw-dyno__cap{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:8px}
.aw-dyno svg{display:block;width:100%;height:auto}
.aw-c-vor{stroke:#5a616d;stroke-width:2.4;fill:none}
.aw-c-nach{stroke:var(--accent);stroke-width:3;fill:none}
.aw-fill{fill:url(#awGold);opacity:.14}
.aw-axgrid{stroke:var(--line);stroke-width:1}
.aw-axtxt{fill:var(--fg-3);font-family:var(--mono);font-size:10px}
.aw-peak{fill:var(--accent);font-family:var(--display);font-weight:700;font-size:15px}
.aw-dyno__legend{display:flex;gap:18px;margin-top:10px;font-size:.78rem;color:var(--fg-2)}
.aw-dyno__legend i{display:inline-block;width:20px;height:3px;border-radius:2px;vertical-align:middle;margin-right:7px}
.aw-key-vor{background:#5a616d}
.aw-key-nach{background:var(--accent)}

/* --- Markenwand (zeigt die Breite: 132 Hersteller) ---------------------- */
.aw-marken__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:22px}
.aw-marken__grid a{display:grid;place-items:center;height:64px;border:1px solid var(--line);background:var(--bg-2);font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.02em;color:var(--fg-3);transition:color .18s ease,border-color .18s ease}
.aw-marken__grid a:hover{color:var(--accent);border-color:var(--line-stark)}
.aw-marken__note{margin-top:16px;color:var(--fg-3);font-size:.9rem}
.aw-marken__note a{color:var(--accent)}

/* --- Leistungskarten: dezente Tiefe, ohne Transform (praktisch-treu) ----- */
.leistung{transition:border-color .18s ease,background .18s ease}
.leistung:hover{border-color:var(--line-stark);background:var(--bg-3)}
.leistung:hover a{color:var(--accent)}

/* --- Reveal: ruht IMMER sichtbar; .in spielt nur die Einblend-Animation.
       Kommt .in nie (kein JS, eingefrorene Darstellung, langsamer Browser),
       bleibt alles sichtbar — Inhalt haengt nie an einem Effekt. ---------- */
@media (prefers-reduced-motion:no-preference){
  .js-fx .aw-rev.in{animation:awIn .55s ease both}
}
@keyframes awIn{from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none}}

/* --- Dyno-Kurven: Standard = volle Kurve sichtbar; .in zeichnet sie.
   Feste dasharray (>= Pfadlaenge ~520) statt JS-Laenge — die CSP blockt
   JS-gesetzten Inline-Stil, also kommt die Laenge aus dem CSS. ---------- */
@media (prefers-reduced-motion:no-preference){
  .js-fx .aw-draw.in{stroke-dasharray:760;animation:awDraw 1.4s ease .2s both}
}
@keyframes awDraw{from{stroke-dashoffset:760} to{stroke-dashoffset:0}}

@media(max-width:1100px){.aw-marken__grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:800px){
  .aw-pruefstand .aw-grid2{grid-template-columns:1fr}
  .aw-statband__in{grid-template-columns:repeat(3,1fr);gap:22px 12px}
  .aw-marken__grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:540px){
  .aw-statband__in{grid-template-columns:repeat(2,1fr)}
  .aw-marken__grid{grid-template-columns:repeat(3,1fr)}
}