/* ═══════════════════════════════════════════════
   FF WHEELS — SINGLE PRODUCT PAGE
   Apple Card-Based Design System
   Uses design tokens from homepage.css
   ═══════════════════════════════════════════════ */

body.single-product { background-color: var(--bg, #F5F5F7) !important; }

/* ── Product Hero Section ── */
.dm-product-hero {
  background: var(--bg) !important;
  padding: 48px 0 56px;
}
.dm-product-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* ── Gallery (Card) ── */
.dm-product-hero__gallery {
  position: sticky;
  top: 100px;
}
.dm-product-hero__main-img {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  position: relative;
  aspect-ratio: 1/1;
  box-shadow: var(--shadow);
}
.dm-product-hero__main-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .3s ease, transform-origin .1s ease;
}
.dm-product-hero__main-img:not(.is-zoomed):hover img {
  transform: scale(1.03);
}
.dm-product-hero__main-img.is-zoomed { cursor: crosshair; overflow: hidden; }
.dm-product-hero__main-img.is-zoomed img { transform: scale(2.5); }

/* Image toolbar */
.dm-product-img-toolbar {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  gap: 6px;
}
.dm-product-img-tool {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  color: var(--text);
}
.dm-product-img-tool:hover {
  background: var(--text);
  color: #fff;
}
.dm-product-img-tool .material-symbols-rounded { font-size: 20px; }

/* Thumbs */
.dm-product-hero__thumbs {
  display: flex;
  gap: 8px;
}
.dm-product-thumb {
  width: 68px; height: 68px;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  background: var(--card);
  padding: 6px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: var(--shadow);
}
.dm-product-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.dm-product-thumb.is-active,
.dm-product-thumb:hover {
  border-color: var(--accent);
}
.dm-product-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.dm-product-thumb--placeholder .material-symbols-rounded {
  font-size: 22px;
  color: var(--border);
}
.dm-product-thumb--placeholder:hover { border-color: transparent; }

/* ── Info Side (Card) ── */
.dm-product-hero__info {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow);
}
.dm-product-hero__title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.dm-product-hero__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.5px;
}
.dm-product-hero__color-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dm-product-hero__color-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dm-color-dot--lg {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.dm-product-hero__excerpt {
  font-size: 15px;
  color: var(--text2);
  line-height: 1.7;
  margin: 0 0 24px;
}

/* Spec tags */
.dm-product-hero__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.dm-product-spec-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 980px;
}
.dm-product-spec-tag .material-symbols-rounded {
  font-size: 16px;
  color: var(--accent);
}
.dm-product-spec-tag__name {
  font-weight: 500;
  color: var(--text3);
}
.dm-product-spec-tag__value {
  font-weight: 700;
  color: var(--text);
}

/* Price + Stock */
.dm-product-hero__price-block {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.dm-product-hero__price-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
}
.dm-product-hero__price {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
}
.dm-product-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--stock-color, #22c55e);
}
.dm-stock-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--stock-color, #22c55e);
}
.dm-product-hero__tax-note {
  font-size: 12px;
  color: var(--text3);
}

/* Quantity + ATC */
.dm-product-hero__actions { margin-bottom: 28px; }
.dm-product-atc-form {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.dm-qty-control {
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.dm-qty-btn {
  width: 40px; height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font);
  transition: background .15s;
  padding: 0;
  user-select: none;
}
.dm-qty-btn:hover { background: var(--card); }
.dm-qty-btn .material-symbols-rounded { font-size: 18px; }
.dm-qty-input {
  width: 40px;
  text-align: center;
  border: none;
  border-left: 1.5px solid var(--border);
  border-right: 1.5px solid var(--border);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  outline: none;
  font-family: var(--font);
  -moz-appearance: textfield;
  appearance: textfield;
}
.dm-qty-input::-webkit-inner-spin-button,
.dm-qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dm-btn-add-to-cart {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  background: var(--text);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .15s;
  font-family: var(--font);
  letter-spacing: .02em;
}
.dm-btn-add-to-cart:hover {
  background: var(--accent);
  transform: translateY(-1px);
}
.dm-btn-add-to-cart .material-symbols-rounded { font-size: 20px; }

.dm-product-out-of-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: var(--card);
  border-radius: var(--r-sm);
  color: var(--text2);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow);
}

/* Express Checkout */
.dm-express-checkout { margin-bottom: 24px; }
.dm-express-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.dm-express-divider::before,
.dm-express-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.dm-express-divider span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.dm-express-buttons {
  display: flex;
  gap: 8px;
}
.dm-express-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.dm-express-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.dm-express-btn svg { display: block; }
.dm-express-btn--klarna { background: #FFB3C7; border-color: #FFB3C7; }

/* Info Bar (Card) */
.dm-product-info-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px 20px;
  background: var(--bg);
  border: none;
  border-radius: var(--r-sm);
}
.dm-info-bar__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.dm-info-bar__item:first-child { padding-left: 0; }
.dm-info-bar__item:last-child { padding-right: 0; }
.dm-info-bar__item .material-symbols-rounded {
  font-size: 18px;
  color: var(--accent);
  flex-shrink: 0;
}
.dm-info-bar__item strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.dm-info-bar__item span {
  font-size: 10px;
  color: var(--text3);
  line-height: 1.3;
}
.dm-info-bar__item span a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dm-info-bar__divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Product Details / Tabs (Card) ── */
.dm-product-details {
  background: var(--bg);
  padding: 0 0 80px;
}
.dm-product-details .dm-container {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 0 32px 32px;
  box-shadow: var(--shadow);
}
.dm-product-tabs__nav {
  display: flex;
  gap: 4px;
  margin-bottom: 32px;
  padding-top: 28px;
  border-bottom: 1.5px solid var(--border);
}
.dm-product-tabs__btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text3);
  cursor: pointer;
  transition: all .2s;
  margin-bottom: -1.5px;
  font-family: var(--font);
}
.dm-product-tabs__btn.is-active {
  color: var(--text);
  font-weight: 700;
  border-bottom-color: var(--accent);
}
.dm-product-tabs__btn:hover:not(.is-active) { color: var(--text2); }
.dm-product-tab-panel { display: none; }
.dm-product-tab-panel.is-active { display: block; }
.dm-product-tab-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text2);
  max-width: 720px;
}

/* Specs grid */
.dm-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
}
.dm-specs-table { width: 100%; border-collapse: collapse; }
.dm-specs-table tr { border-bottom: 1px solid var(--border); }
.dm-specs-table tr:last-child { border-bottom: none; }
.dm-specs-table td { padding: 14px 0; font-size: 14px; }
.dm-specs-table td:first-child {
  font-weight: 600;
  color: var(--text3);
  width: 180px;
}
.dm-specs-table td:last-child {
  font-weight: 600;
  color: var(--text);
}

/* Gutachten download items (Card) */
.dm-gutachten-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dm-gutachten-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg);
  border: none;
  border-radius: var(--r-sm);
  transition: box-shadow .2s;
}
.dm-gutachten-item:hover { box-shadow: var(--shadow); }
.dm-gutachten-item__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(178,152,118,.1);
  border-radius: 12px;
}
.dm-gutachten-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dm-gutachten-item__name { font-size: 14px; font-weight: 700; color: var(--text); }
.dm-gutachten-item__meta { font-size: 12px; color: var(--text3); }
.dm-gutachten-item__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: none;
  border-radius: 980px;
  background: var(--text);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .02em;
  transition: all .2s;
  flex-shrink: 0;
  cursor: pointer;
  font-family: var(--font);
}
.dm-gutachten-item__btn:hover {
  background: var(--accent);
}
.dm-gutachten-item__btn .material-symbols-rounded { font-size: 16px; }

/* ── Alternative Felgen (Card section) ── */
.dm-product-alternatives {
  background: var(--bg);
  padding: 0 0 80px;
}
.dm-product-alternatives .dm-section-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.5px;
}
.dm-alt-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dm-alt-product-card {
  background: var(--card);
  border: none;
  border-radius: var(--r);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: box-shadow .3s, transform .3s;
  position: relative;
}
.dm-alt-product-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}
.dm-alt-product-card__img {
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.dm-alt-product-card__img img {
  width: 90%; height: 90%;
  object-fit: contain;
}
.dm-alt-product-card__body { text-align: center; }
.dm-alt-product-card__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.dm-alt-product-card__variants {
  font-size: 12px;
  color: var(--text3);
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}
.dm-alt-product-card__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.dm-alt-product-card__price .woocommerce-Price-amount {
  font-weight: inherit;
  color: inherit;
}
.dm-alt-product-card__arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 18px;
  color: var(--border);
  transition: color .2s;
}
.dm-alt-product-card:hover .dm-alt-product-card__arrow {
  color: var(--accent);
}

/* ═══════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .dm-product-hero { padding: 24px 0 32px; }
  .dm-product-hero__inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .dm-product-hero__gallery { position: static; }
  .dm-product-hero__info { padding: 24px; }
  .dm-product-hero__title { font-size: 22px; }
  .dm-product-hero__price { font-size: 24px; }
  .dm-product-hero__specs { gap: 6px; }
  .dm-product-spec-tag { font-size: 12px; padding: 6px 10px; }
  .dm-product-hero__thumbs { gap: 6px; }
  .dm-product-thumb { width: 52px; height: 52px; }

  .dm-product-info-bar {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  .dm-info-bar__divider { width: 100%; height: 1px; }
  .dm-info-bar__item { padding: 0; }

  .dm-specs-grid { grid-template-columns: 1fr; gap: 0; }
  .dm-product-details .dm-container { padding: 0 20px 24px; border-radius: var(--r); }

  .dm-product-tabs__nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    gap: 0;
  }
  .dm-product-tabs__nav::-webkit-scrollbar { display: none; }
  .dm-product-tabs__btn { white-space: nowrap; padding: 12px 16px; font-size: 13px; }

  .dm-express-buttons { flex-wrap: wrap; }
  .dm-express-btn { flex: 1 1 45%; }

  .dm-alt-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .dm-product-alternatives { padding: 0 0 48px; }

  .dm-product-atc-form { flex-direction: column; gap: 10px; }
  .dm-qty-control { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------
   Germanized Pflichtangaben (PAngV) auf der Produkt-Einzelseite.
   Das Plugin gibt <p class="wc-gzd-additional-info"> ohne eigene
   Größe aus und erbt damit die normale Fließtextgröße. Wir bringen
   es auf dieselbe Optik wie den Fallback ohne Germanized: 12px,
   gedämpfte Farbe, eng am Preis.
   --------------------------------------------------------------- */
.ff-page p.wc-gzd-additional-info,
.ff-page span.wc-gzd-additional-info {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text3);
}
.ff-page p.wc-gzd-additional-info {
  display: block;
  margin: 4px 0 0;
  padding: 0;
  text-align: left;
}
.ff-page p.wc-gzd-additional-info span.wc-gzd-additional-info {
  display: inline;
}
.ff-page .wc-gzd-additional-info a {
  color: inherit;
  text-decoration: underline;
}

/* ── Stripe/Klarna Ratenzahlungs-Hinweis unter der Steuerangabe ──
   Stripe rendert einen iframe. Solange nichts geladen ist, bleibt der
   Container ohne Hoehe, damit die Seite nicht springt. */
.ff-bnpl {
  margin: 8px 0 0;
  min-width: 0;
  max-width: 100%;
  font-size: 13px;
  line-height: 1.4;
}
.ff-bnpl:empty { display: none; }
.ff-bnpl iframe { max-width: 100% !important; }

/* ── Zoll-Schalter mit Freigabe-Hinweis (Produktseite) ─────────────────
   Zahl und Klartext nebeneinander, beides senkrecht mittig. Das Symbol
   allein war ohne Tooltip nicht zu deuten.
   Die Zoll-Gruppe bekommt eine eigene Zeile (per JS: .ff-var-zeile) — sonst
   draengt sie sich mit ET und Lochkreis in EINE Reihe und die Schalter
   werden doppelt so hoch wie ihre Nachbarn. */
#ff-variants > div.ff-var-zeile {
  flex: 0 0 100%;
  margin-bottom: 8px;
}
/* Der Trennstrich hinter der Zoll-Gruppe ergibt ohne Nachbarn keinen Sinn. */
#ff-variants > div.ff-var-zeile + span { display: none; }

/* '!important' ist hier keine Nachlaessigkeit, sondern noetig: die
   Basisklasse .ff-swatch steht inline in single-product.php und setzt mit
   'all: unset !important' JEDE Eigenschaft so — darunter
   'display: inline-block' und 'line-height: 1.3'. Ohne Gegengewicht bleibt
   der Schalter inline-block, 'align-items' greift nicht, und das Symbol
   sitzt auf der Schriftlinie statt mittig. Genau das war zu sehen. */
.ff-attr-swatch.has-fit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 6px 11px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
.ff-attr-swatch .ff-swatch-zoll {
  font-size: 13px; font-weight: 600; line-height: 1; flex-shrink: 0;
}
.ff-attr-swatch .ff-swatch-fit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px; font-weight: 600; line-height: 1;
  white-space: nowrap;
}
/* Eigener Kasten mit line-height:1 — sonst bringt das Material-Symbol
   seine eigene Zeilenhoehe mit und sitzt hochgestellt. */
.ff-attr-swatch .ff-swatch-fit .material-symbols-rounded {
  font-size: 14px; line-height: 1; display: block; flex-shrink: 0;
}
.ff-attr-swatch .ff-swatch-fit-text { line-height: 1; display: block; }
/* Die Kurzfassung liegt daneben im Markup und ist am Schreibtisch aus. */
.ff-attr-swatch .ff-swatch-fit-mini { line-height: 1; display: none; }

/* Nicht passende Groesse: ausgegraut wie eine nicht lieferbare, nicht rot. */
.ff-attr-swatch.is-unfit {
  opacity: .35 !important;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Am Telefon nur "ABE" beziehungsweise "Gutachten": drei Zoll-Schalter mit
   dem vollen Text passen dort nicht in eine Zeile, und gefragt ist die Art
   der Freigabe, nicht ihr vollstaendiger Name. */
@media (max-width: 768px) {
  .ff-attr-swatch .ff-swatch-fit-text { display: none; }
  .ff-attr-swatch .ff-swatch-fit-mini { display: block; }
}

@media (max-width: 520px) {
  .ff-attr-swatch.has-fit { gap: 5px !important; padding: 6px 9px !important; }
  .ff-attr-swatch .ff-swatch-fit { font-size: 9.5px; }
  .ff-attr-swatch .ff-swatch-fit .material-symbols-rounded { font-size: 13px; }
}

/* ── Alternativen unter der Beschreibung ──────────────────────────────
   Kartenoptik kommt aus .kfg__pcard (Felgenuebersicht/Konfigurator) — hier
   nur das Raster, die Ueberschrift und das Passform-Schild. */
.ff-alt__kopf { margin-bottom: 22px; }
.ff-alt__titel {
  margin: 0 0 4px; font-size: 20px; font-weight: 700;
  color: var(--text); letter-spacing: -.01em;
}
.ff-alt__sub { margin: 0; font-size: 13.5px; color: var(--text3); }

.ff-alt__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px;
}
/* Die Karten tragen '.kfg__pcard--single', und konfigurator.css blendet die
   Klasse grundsaetzlich aus — sichtbar wird sie dort erst im Raster mit
   '.is-flat'. Dieses Raster hier heisst anders, also blieb der Abschnitt
   leer: Ueberschrift und Unterzeile standen da, darunter nichts. */
.ff-alt__grid .kfg__pcard--single { display: block; }
.ff-alt__karte[hidden] { display: none !important; }
.ff-alt__meta {
  margin-top: 6px; font-size: 11.5px; color: var(--text3);
  font-variant-numeric: tabular-nums;
}

/* Passform-Schild auf dem Bild — dieselbe Pille mit Punkt wie auf der
   Felgenuebersicht und den Startseitenkarten. */
.ff-alt__fit {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 7px; border-radius: 980px; border: 0;
  font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .03em;
  white-space: nowrap;
}
.ff-alt__fit::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: currentColor;
}
.ff-alt__fit .material-symbols-rounded { display: none; }
.ff-alt__fit.is-frei { background: rgba(27,138,58,.13); color: #1b8a3a; }
.ff-alt__fit.is-warn { background: rgba(245,158,11,.13); color: #9a6700; }
.ff-alt__fit[hidden] { display: none !important; }

@media (max-width: 1100px) { .ff-alt__grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 820px)  { .ff-alt__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 520px)  { .ff-alt__grid { grid-template-columns: 1fr !important; } }

/* ═══════════════════════════════════════════════════════════════════════
   FAHRZEUGFOTOS — dieselbe Felge am eigenen Auto
   Vier Ansichten nebeneinander, jede zum Vergroessern. Der Abschnitt wird
   erst im Browser gefuellt (das Fahrzeug steht im localStorage) und bleibt
   ohne Fahrzeug oder ohne Bilder ganz verborgen.
   ═══════════════════════════════════════════════════════════════════════ */
/* Oben 24 px wie jede andere Karte der Seite, unten nichts — den Abstand
   setzt der folgende Abschnitt. So sind alle Kartenabstaende gleich. */
.ff-fzg { padding: 24px 0 0; }
.ff-fzg[hidden] { display: none !important; }

.ff-fzg__kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.ff-fzg__titel {
  margin: 0 0 4px; font-size: 20px; font-weight: 700;
  color: var(--text); letter-spacing: -.01em;
}
.ff-fzg__sub { margin: 0; font-size: 13.5px; color: var(--text3); }
.ff-fzg__hinweis {
  font-size: 12px; font-weight: 600; color: var(--text3);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 980px;
  border: 1px solid var(--border); background: var(--bg);
  white-space: nowrap;
}

/* Vier Spalten: alle Ansichten auf einen Blick, ohne dass der Abschnitt die
   halbe Seite einnimmt. Die Kacheln sind damit Vorschaubilder — gross
   angesehen wird in der Lupe. Darunter zwei Spalten, am Telefon eine. */
.ff-fzg__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
/* 16:9, weil die Renderings so kommen (nachgemessen: 1400x780). Hier stand
   4:3 — ein Viertel des Bildes wurde damit links und rechts weggeschnitten,
   und bei der Dreiviertelansicht traf das genau die Front.
   Dazu 'contain' statt 'cover': liefert die Schnittstelle irgendwann ein
   anderes Format, entstehen schmale Raender statt eines Beschnitts. Die
   Kachel behaelt ihr Verhaeltnis auch vor dem Laden — kein Springen. */
.ff-fzg__kachel {
  position: relative; display: block; padding: 0; border: none;
  border-radius: var(--r, 14px); overflow: hidden; cursor: zoom-in;
  /* Hintergrund in der Farbe des Studios, in dem die Renderings entstehen
     (nachgemessen an den Ecken: #DEE1E0 bis #E3E5E6). Hier stand #0A0A0A —
     und weil 'contain' an den Raendern einen haarfeinen Streifen frei
     laesst, zeichnete sich das als dunkle Linie an den runden Ecken ab.
     Genau der schwarze Rand aus dem Screenshot. */
  background: #e1e3e3; aspect-ratio: 16 / 9;
}
/* Kein Anheben beim Ueberfahren. Die Kacheln stehen zu zweit und gross im
   Bild; eine wandernde Karte wirkt dort unruhig statt lebendig. Dass man
   klicken kann, sagt schon der Zeiger (cursor: zoom-in). */
/* Ein Hauch heranzoomen. Manche Renderings bringen einen schmalen leeren
   Rand mit; der faellt in der Kachel als heller Streifen auf. Bewusst
   ungleich: oben und unten ist mehr Luft im Bild als links und rechts.
   Bei einer rund 620 x 350 px grossen Kachel sind das etwa 5 px oben und
   unten und 3 px an den Seiten. Der Unterschied zwischen beiden Achsen
   liegt bei zwei Prozent — an einem Fahrzeug nicht zu sehen, und weniger
   stoerend als der Rand.
   Nur in der Kachel, nicht in der Lupe: dort will man das ganze Bild. */
.ff-fzg__kachel img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transform: scale(1.016, 1.042); transform-origin: center;
}
/* Die Beschriftung liegt IM Bild, nicht darunter — so bleiben die vier
   Kacheln gleich hoch, egal wie lang der Name ist. */
/* ── Lackfarben ── */
.ff-fzg__lacke {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0 0 14px;
}
.ff-fzg__lacke[hidden] { display: none !important; }
.ff-fzg__lack {
  width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.14); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  transition: transform .15s ease, border-color .15s ease;
}
.ff-fzg__lack:hover { transform: scale(1.08); }
.ff-fzg__lack.is-aktiv {
  border-color: var(--accent, #B8860B); border-width: 2px;
  box-shadow: 0 0 0 2px rgba(184,134,11,.18), inset 0 0 0 1px rgba(255,255,255,.35);
}

/* Waehrend die neue Farbe geholt wird, bleibt das alte Bild stehen und wird
   blass — ein Sprung auf leere Kacheln waere unruhiger als ein kurzer
   Schleier. */
.ff-fzg__grid.is-laedt { opacity: .55; transition: opacity .15s ease; }
.ff-fzg__grid.is-laedt .ff-fzg__kachel { cursor: progress; }

/* Bei vier Kacheln nebeneinander ist die Karte rund 300 px breit — die
   Beschriftung wird entsprechend kleiner, sonst nimmt sie das halbe Bild. */
.ff-fzg__label {
  position: absolute; left: 6px; bottom: 6px;
  padding: 2px 7px; border-radius: 980px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: .01em;
}
@media (max-width: 768px) {
  .ff-fzg__label { left: 8px; bottom: 8px; padding: 3px 8px; font-size: 11px; }
}

/* ── Lupe ── */
.ff-fzg__lupe {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 24px; background: rgba(0,0,0,.88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ff-fzg__lupe[hidden] { display: none !important; }
.ff-fzg__buehne { margin: 0; max-width: min(1200px, 100%); max-height: 100%; }
.ff-fzg__buehne img {
  display: block; max-width: 100%; max-height: calc(100vh - 120px);
  object-fit: contain; border-radius: 12px;
}
.ff-fzg__buehne figcaption {
  margin-top: 10px; text-align: center;
  color: rgba(255,255,255,.75); font-size: 13px; font-weight: 600;
}
.ff-fzg__zu, .ff-fzg__pfeil {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
  transition: background .15s ease;
}
.ff-fzg__zu:hover, .ff-fzg__pfeil:hover { background: rgba(255,255,255,.2); }
.ff-fzg__zu { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; }
.ff-fzg__pfeil { width: 44px; height: 44px; flex-shrink: 0; }
.ff-fzg__zu .material-symbols-rounded { font-size: 22px; }
.ff-fzg__pfeil .material-symbols-rounded { font-size: 26px; }

@media (max-width: 1100px) { .ff-fzg__grid { grid-template-columns: repeat(2, 1fr); } }
/* Am Telefon eine Spalte: zwei 16:9-Kacheln nebeneinander waeren 170 px
   breit und 95 px hoch — davon hat niemand etwas. */
@media (max-width: 768px) { .ff-fzg__grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .ff-fzg__grid { gap: 8px; }
  .ff-fzg__hinweis { display: none; }   /* am Telefon tippt man ohnehin */
  .ff-fzg__lupe { padding: 12px; gap: 4px; }
  .ff-fzg__pfeil { width: 36px; height: 36px; }
  .ff-fzg__buehne img { max-height: calc(100vh - 140px); }
}

/* Die rechte Seite der Kopfzeile: Lupenhinweis und Herkunftszeichen in einer
   Zeile, damit das Zeichen keine eigene Reihe aufmacht. */
.ff-fzg__kopfrechts { display: inline-flex; align-items: center; gap: 8px; }

/* ═══ Schnellzugang zur Kasse (Zahlart-Logos) ═══
   Keine echten Express-Knoepfe — siehe ff_express_links() in functions.php.
   Eine Reihe gleich breiter Felder; im Mini-Warenkorb etwas flacher. */
.ff-express { display: flex; gap: 8px; }
.ff-express__btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 10px 12px; border-radius: var(--r-sm, 10px);
  border: 1.5px solid var(--border); background: var(--card);
  text-decoration: none; transition: border-color .2s ease, background .2s ease;
}
.ff-express__btn:hover { border-color: var(--text3); background: var(--bg); }
/* Hoehe ausdruecklich hier — die SVGs haben nur eine viewBox, ohne Angabe
   bestimmt die Breite die Hoehe.
   Der Selektor ist bewusst zweistufig: WooCommerce bringt in
   woocommerce-layout.css '.woocommerce img, .woocommerce-page img
   { height: auto }' mit. Das ist Klasse PLUS Element und schlaegt damit eine
   einzelne Klasse — die Logos zogen sich auf die volle Feldbreite auf, und
   zwar unterschiedlich hoch je nach Seitenverhaeltnis. Zwei Klassen liegen
   darueber; '!important' braucht es dafuer nicht.
   Die frueheren Inline-Hoehen waren gegen diese Regel immun — deshalb fiel
   sie erst beim Umbau auf die Formatvorlage auf. */
.ff-express .ff-express__logo { display: block; width: auto; height: 22px; max-width: 100%; }
.ff-express .ff-express__logo--paypal { height: 18px; }   /* das Wortlogo traegt hoeher auf */

.ff-express--mini { margin-top: 10px; gap: 6px; }
.ff-express--mini .ff-express__btn { padding: 7px 8px; }
.ff-express--mini .ff-express__logo { height: 16px; }
.ff-express--mini .ff-express__logo--paypal { height: 13px; }

/* Der Ratenzahlungs-Hinweis im Mini-Warenkorb braucht Luft nach oben und
   unten — dort stehen Summe und Schalter dicht beieinander. */
.dm-mini-cart .ff-bnpl { margin: 10px 0 12px; }

/* ═══ Produktseite: Preisblock (B2B und B2C gemeinsam) ═══ */
.ff-preisblock {
  padding-bottom: 24px; margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.ff-preisblock__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-bottom: 6px; font-size: 13px; color: var(--text3);
}
.ff-preisblock__aufschlag { font-weight: 600; }
.ff-preisblock__zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.ff-preisblock__preis { font-size: 28px; font-weight: 700; color: var(--text); }
.ff-preisblock__preis--b2c { color: var(--accent); }
.ff-preisblock__einheit { font-size: 15px; font-weight: 500; color: var(--text3); }
.ff-preisblock__lager {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ff-lager, #22c55e);
}
.ff-preisblock__punkt { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ff-preisblock__hinweis { margin: 6px 0 0; }

/* WooCommerce-Hinweise (hinzugefuegt / Fehler) ueber dem Kaufbereich */
.ff-produkt-hinweise:empty { display: none; }
.ff-produkt-hinweise .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 16px; }

/* ═══ Kaufbereich: Menge · Satz in den Warenkorb · Mit Reifen konfigurieren ═══ */
.ff-action-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.ff-action-row.is-ausverkauft { opacity: .4; pointer-events: none; }
.ff-qty {
  display: inline-flex; align-items: center; flex-shrink: 0; overflow: hidden;
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r-sm);
}
.ff-qty-btn {
  width: 44px; height: 48px; padding: 0; border: 0; background: none;
  font: 500 18px/1 var(--font); color: var(--text); cursor: pointer;
}
.ff-qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.ff-qty__wert {
  min-width: 28px; text-align: center; user-select: none;
  font: 700 14px var(--font); color: var(--text);
}
.ff-btn-atc {
  flex: 1 1 200px; justify-content: center; height: 48px; padding: 0 16px;
  font-size: 14px; font-weight: 600; border: 0; border-radius: var(--r-sm);
  white-space: nowrap; cursor: pointer; font-family: var(--font);
}
.ff-btn-atc:disabled { cursor: not-allowed; }
.ff-btn-atc .material-symbols-rounded,
.ff-btn-config .material-symbols-rounded { font-size: 18px; }
.ff-btn-config {
  flex: 1 1 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 16px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border); background: var(--card); color: var(--text);
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: border-color .2s ease, background .2s ease;
}
.ff-btn-config:hover { border-color: var(--text3); background: var(--bg); color: var(--text); }

/* Express-Logos: dezent unter den Hauptknoepfen */
.ff-express-block { margin: 16px 0 24px; }
.ff-express-block__titel {
  margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text3);
}
.ff-express--produkt { gap: 6px; }
.ff-express--produkt .ff-express__btn { min-height: 44px; padding: 8px 10px; border-width: 1px; opacity: .85; }
.ff-express--produkt .ff-express__btn:hover { opacity: 1; }
.ff-express.ff-express--produkt .ff-express__logo { height: 18px; }
.ff-express.ff-express--produkt .ff-express__logo--paypal { height: 15px; }

/* Kaufknopf: "Satz jetzt kaufen", am Telefon "Satz kaufen" — so bleiben
   Mengentasten und Knopf in einer Zeile (Produktkarte + Komplettrad). */
.ff-kauf-kurz { display: none; }

@media (max-width: 768px) {
  .ff-preisblock__preis { font-size: 22px; }
  .ff-preisblock__meta { font-size: 12px; }
  .ff-action-row { gap: 8px; }
  .ff-btn-atc { min-width: 0; }
}
@media (max-width: 640px) {
  .ff-kauf-lang { display: none; }
  .ff-kauf-kurz { display: inline; }
  .ff-action-row .ff-btn-atc { flex: 1 1 0; padding: 0 12px; }
  .ff-qty-btn { width: 40px; }
}

/* ══ Als Komplettrad bestellen (template-parts/komplettrad-upgrade.php) ═════
   Bausteine kommen aus konfigurator.css (Saison-Pillen, .kfg__tire-row,
   .cfg-modal-rdks-line, .cfg-modal-gesamt) und aus der Nachbarsektion
   (.ff-fzg__kopf/-titel/-sub). Hier nur das Raster der Sektion und die
   wenigen Teile, die es im Konfigurator so nicht gibt. */
.ff-kr__karte { padding: 32px; }
.ff-kr__inhalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 28px; align-items: start; }
.ff-kr__inhalt[hidden], .ff-kr__ausweich[hidden] { display: none !important; }
.ff-kr__links > .kfg__substep:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.ff-kr__reifen { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ff-kr__reifen .kfg__tire-row { margin: 0; }
.ff-kr__leer {
  padding: 18px; border-radius: 12px; background: var(--bg);
  text-align: center; font-size: 13px; color: var(--text3);
}
.ff-kr__nochmal { margin-left: 6px; border: 0; background: none; font: inherit; color: var(--text); text-decoration: underline; cursor: pointer; }
.ff-kr__alle { display: inline-flex; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--text); }
/* Saison + Budget in einer Zeile (bricht um, wenn der Platz fehlt) */
.ff-kr__filter { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.ff-kr__filter > .kfg__substep { flex: 0 1 auto; margin: 0; padding: 0; border: 0; }
.ff-kr .ff-kr__filter .kfg__wheel-chip { flex: 0 0 auto; padding: 8px 14px; }
.ff-kr .kfg__wheel-chips { max-width: none; }

/* Bereifungsart / RDKS kompakt: Icon | Name + Kurztext | Preis-Schild */
.ff-kr__optionen > .kfg__substep:first-of-type { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.ff-kr__optionen .kfg__substep-label { margin-bottom: 6px; }
.ff-kr .kfg__rdks-grund { margin: 0 0 8px; }
.ff-kr .kfg__tiremode-grid { gap: 8px; }
.ff-kr .kfg__tiremode-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  column-gap: 10px; row-gap: 1px; padding: 10px 34px 10px 12px; border-radius: 11px;
}
.ff-kr .kfg__tiremode-icon { grid-row: 1 / 3; margin: 0; font-size: 20px; }
.ff-kr .kfg__tiremode-name { grid-column: 2; font-size: 13px; }
.ff-kr .kfg__tiremode-desc { grid-column: 2; font-size: 11px; }
.ff-kr .kfg__tiremode-badge { grid-column: 3; grid-row: 1 / 3; margin: 0; text-align: right; white-space: nowrap; }
.ff-kr .kfg__tiremode-check { top: 50%; right: 10px; transform: translateY(-50%); }

/* Rechte Spalte: Zusammenstellung wie "Deine Konfiguration" im Konfigurator */
.ff-kr__rechts { position: sticky; top: calc(var(--header-h, 64px) + 16px); padding: 18px; border-radius: 16px; background: var(--bg); }
.ff-kr__rechts > .kfg__substep-label { margin-bottom: 10px; }
.ff-kr__zeile { width: 100%; margin-bottom: 8px; text-align: left; font-family: var(--font); }
button.ff-kr__zeile { cursor: pointer; }
.ff-kr__zeile .cfg-modal-rdks-text small { font-size: 11px; line-height: 1.4; }

.ff-kr__posten { margin: 4px 0 12px; }
.ff-kr__posten > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 2px; font-size: 12.5px; color: var(--text3); }
.ff-kr__posten > div span:last-child { color: var(--text); font-weight: 600; }
.ff-kr__gesamt { padding: 12px 2px 4px; border-top: 1px solid var(--border); }

/* Kaufzeile: Menge | Vorschau (4 x Felge + Reifen), darunter der Knopf */
.ff-kr__kauf { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ff-kr__kauf .ff-qty { flex: 0 0 auto; }
.ff-kr__vorschau { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; }
/* Felge im weissen Kreis — vier Stueck ueberlappend, dann Reifen, ggf. mit
   RDKS. Die Felgenforum-Bilder (ai__…-Front) sind eng freigestellt; anders
   als bei FF (Produktfotos mit viel Rand) wird hier nicht vergroessert,
   sonst schneidet der Kreis das Felgenhorn ab. */
.ff-kr__v-felge, .ff-kr__v-reifen {
  position: relative; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px var(--bg), 0 1px 4px rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center;
}
.ff-kr__v-felge { overflow: hidden; }
.ff-kr__v-felge img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.ff-kr__v-felge + .ff-kr__v-felge { margin-left: -15px; }
.ff-kr__v-reifen img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ff-kr__v-plus { margin: 0 5px; font-size: 14px; font-weight: 700; color: var(--text3); }
.ff-kr__v-rdks {
  position: absolute; right: -5px; top: -5px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent, #b8963e); color: #fff; box-shadow: 0 0 0 2px var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.ff-kr__v-rdks[hidden] { display: none; }
.ff-kr__v-rdks .material-symbols-rounded { font-size: 13px; line-height: 1; }
.ff-kr__knopf { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 10px; height: 50px; gap: 8px; font-size: 14.5px; white-space: nowrap; }
.ff-kr__hinweis { margin: 10px 0 0; text-align: center; }

.ff-kr__ausweich { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ff-kr__ausweich p { margin: 0; font-size: 14px; color: var(--text3); max-width: 560px; }

@media (max-width: 980px) {
  .ff-kr__inhalt { grid-template-columns: 1fr; }
  .ff-kr__rechts { position: static; }
}
@media (max-width: 640px) {
  .ff-kr__karte { padding: 20px 16px; }
  .ff-kr__rechts { padding: 14px; margin: 0 -4px; }
  .ff-kr__filter { gap: 14px; }
  .ff-kr__filter > .kfg__substep { flex: 1 1 100%; }
  .ff-kr .ff-kr__filter .kfg__wheel-chip { flex: 1 1 auto; padding: 8px 8px; }
  .ff-kr .kfg__tiremode-grid { grid-template-columns: 1fr; }
}