/* Kassenkopf (Warenkorb/Kasse/Danke) — aus Felgenforum chrome.css herausgeloest (23.10.26).
   Farben ueber --ff-* (Skin/Child). */
/* Beat theme h1/ink on dark viz hero */
.rw-theme .kfg__viz .kfg__viz-placeholder-titel,
.rw-theme #kfg-viz-placeholder h1,
.rw-theme .kfg__viz .kfg__viz-vehicle-name,
.rw-theme #ff-hero-card .kfg__viz-vehicle-name {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.ff-kontakt-hero .kfg__viz-overlay { z-index: 1; }

/* ═══════════════════════════════════════════════
   Kopfkarte (template-parts/kasse-kopf.php, produkt-kopf.php)
   Warenkorb, Kasse, Danke und Produktseiten.
   Wie FF-Wheels: kompakte dunkle Karte im Inhaltsraster, Bild statt Video.
   In beiden Farbmodi dunkel — Schrift deshalb fest weiß.
   ═══════════════════════════════════════════════ */
.ff-kasse-kopf-sec { padding-top: .85rem; }

@media (min-width: 768px) {
  .ff-kasse-kopf-sec { padding-top: 1.15rem; }
}

.ff-kasse-kopf {
  position: relative;
  min-height: 168px;
  overflow: hidden;
  background: #0a0a0a;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  font-family: var(--wlf-font-body);
}

u. ae.) — sonst ragt das Bild ueber die Karte und zeigt
   nur die Wand oben. Ausschnitt: Auto vertikal mittig. */
.rw-theme .ff-kasse-kopf img.ff-kasse-kopf__bild {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  object-fit: cover; object-position: center 58%;
}

.ff-kasse-kopf .kfg__viz-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 100%);
}

.ff-kasse-kopf .kfg__viz-steps {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
}

.ff-kasse-kopf .kfg__viz-back {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.15); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; transition: background .2s;
}

.ff-kasse-kopf .kfg__viz-back:hover { background: rgba(255,255,255,.28); color: #fff; }

.ff-kasse-kopf .kfg__viz-back .material-symbols-rounded { font-size: 16px; }

.ff-kasse-kopf .kfg__viz-step-label {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85);
  letter-spacing: .02em; text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

.ff-kasse-kopf .kfg__viz-count {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 5px 12px; list-style: none;
  background: rgba(255,255,255,.12); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2); border-radius: 10px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9);
}

.ff-kasse-kopf .ff-vstep { display: flex; align-items: center; gap: 5px; margin: 0; opacity: .4; }

.ff-kasse-kopf .ff-vstep.is-aktiv,
.ff-kasse-kopf .ff-vstep.is-fertig { opacity: 1; }

.ff-kasse-kopf .ff-vstep__nr {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.15); color: #fff;
  font-size: 11px; font-weight: 700;
}

.ff-kasse-kopf .ff-vstep.is-fertig .ff-vstep__nr { background: rgba(255,255,255,.5); }

.ff-kasse-kopf .ff-vstep.is-aktiv .ff-vstep__nr { background: #fff; color: #000; }

.ff-kasse-kopf .ff-vstep__pfeil { opacity: .3; font-size: 10px; margin: 0; }

.ff-kasse-kopf .kfg__viz-vehicle {
  position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 3;
  display: flex; flex-direction: column; gap: 4px;
}

/* h1 mindestens so spezifisch wie die allgemeine Überschriftenfarbe
   ([data-theme] .rw-theme h1) — sonst Tinte auf Schwarz. */
.rw-theme .ff-kasse-kopf h1.kfg__viz-vehicle-name,
[data-theme] .rw-theme .ff-kasse-kopf h1.kfg__viz-vehicle-name {
  margin: 0;
  font-size: clamp(22px, 3vw, 32px); font-weight: 700; line-height: 1.2;
  color: #fff; -webkit-text-fill-color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

.ff-kasse-kopf .kfg__viz-vehicle-sub {
  font-size: 12px; color: rgba(255,255,255,.75);
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

@media (max-width: 767px) {
  .ff-kasse-kopf .kfg__viz-steps { top: 12px; left: 12px; }
  .ff-kasse-kopf .kfg__viz-count { top: 12px; right: 12px; }
  .ff-kasse-kopf .kfg__viz-vehicle { bottom: 12px; left: 14px; right: 14px; gap: 1px; }
  .ff-kasse-kopf .kfg__viz-vehicle-sub { font-size: 11px; }
}

@media (max-width: 420px) {
  .ff-kasse-kopf .kfg__viz-step-label { display: none; }
}

/* Produktseiten: statt Schritte oben rechts die Google-Wertung, unten
   dezente Vertrauens-Tags (kein Titel — der steht direkt darunter) */
.ff-kasse-kopf--produkt { margin-bottom: 16px; }
/* Ohne Serienbild: flache Leiste in der Panel-Farbe des Shops statt leerer Bildflaeche */
.ff-kasse-kopf--ohne-bild { min-height: 112px; background: var(--ff-panel, #111); }
.ff-kasse-kopf--ohne-bild .kfg__viz-overlay { display: none; }

.ff-kasse-kopf .ff-kopf-tags {
  position: absolute; bottom: 18px; left: 20px; right: 20px; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;
}

.ff-kasse-kopf .ff-kopf-tags li {
  display: inline-flex; align-items: center; gap: 5px; margin: 0;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.12); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.92);
}

.ff-kasse-kopf .ff-kopf-tags .material-symbols-rounded { font-size: 15px; }

.ff-kasse-kopf .ff-kopf-wertung { gap: 6px; }

.ff-kasse-kopf .ff-kopf-wertung b { color: #f5c518; letter-spacing: 1px; font-weight: 700; }

@media (max-width: 767px) {
  .ff-kasse-kopf { min-height: 150px; }
  .ff-kasse-kopf .ff-kopf-tags { bottom: 12px; left: 12px; right: 12px; gap: 5px; }
  .ff-kasse-kopf .ff-kopf-tags li { padding: 4px 9px; font-size: 11px; }
  .ff-kasse-kopf .ff-kopf-tags li:nth-child(n+3) { display: none; }
}