/* ═══════════════════════════════════════════════════════════════════
   ARTFORM — Design
   ═══════════════════════════════════════════════════════════════════
   Nach artform-wheels.de: dunkler Metallgrund, Bronze/Gold-Akzent
   (#bfa774), Oswald für Display, Arial für Fließtext. Automotive /
   Fashion-Statement, keine helle Basisshop-Bühne.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Schrift: Oswald lokal, Körper Arial ─────────────────────────── */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/oswald/oswald-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/oswald/oswald-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/oswald/oswald-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/oswald/oswald-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/oswald/oswald-latin-700-normal.woff2') format('woff2'); }

/* ── Token-Feinschliff für diesen Shop ──────────────────────────── */
:root {
  /* Grund und Karte sind zwei verschiedene Dinge — siehe A4CS_Tokens.
     Die Seite liegt auf dem Grund, alles Greifbare als hellere Karte
     darauf. Ohne diese Trennung schwimmen Karten farblos in der Fläche. */
  --wlf-color-ground:       #1a1a1a;
  --wlf-color-bg:           #222222;
  --wlf-color-surface:      #2a2a2a;
  --wlf-color-surface-alt:  #333333;
  --wlf-color-ink:          #f2f2f2;
  --wlf-color-ink-muted:    #a0a0a0;
  --wlf-color-line:         #3a3a3a;
  --wlf-color-line-soft:    #2f2f2f;
  --wlf-color-accent:       #bfa774;
  --wlf-color-accent-hover: #d4c08e;
  --wlf-color-accent-ink:   #1a1a1a;

  --wlf-font-body:    Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --wlf-font-display: 'Oswald', 'Arial Narrow', Arial, sans-serif;

  --wlf-container: 1180px;
  --wlf-radius-sm: 4px;
  --wlf-radius-md: 8px;
  --wlf-radius-lg: 14px;

  /* ── Eigene Ergänzungen dieses Shops ───────────────────────────
     Die dunkle Bühne (Aufmacher, Abschluss, Fußzeile) ist bewusst KEINE
     eigene Farbe, sondern die Umkehrung der Seite: Grund wird Text, Text
     wird Grund. Nur so folgt sie jeder Vorlage — mit einer festen dunklen
     Farbe verschwindet die Bühne, sobald jemand ein dunkles Schema wählt,
     weil sie dann fast so aussieht wie die Seite darum herum.

     Alles Weiße und alles Schwarze in dieser Datei muss aus diesen Tokens
     kommen. Ein fest eingetragenes #fff ist genau die Stelle, an der eine
     Vorlage später nicht durchgreift. */
  --af-dark:         #141414;
  --af-dark-soft:    color-mix(in srgb, var(--wlf-color-ink) 90%, var(--wlf-color-bg));
  --af-on-dark:      #f5f5f5;
  --af-on-dark-dim:  color-mix(in srgb, var(--wlf-color-bg) 62%, transparent);
  --af-on-dark-mute: color-mix(in srgb, var(--wlf-color-bg) 50%, transparent);
  --af-on-dark-line: color-mix(in srgb, var(--wlf-color-bg) 18%, transparent);
  --af-on-dark-fill: color-mix(in srgb, var(--wlf-color-bg) 8%, transparent);

  /* Kopfzeile und klebrige Leisten liegen über Inhalt und sind durchscheinend. */
  --af-veil:   color-mix(in srgb, var(--wlf-color-bg) 88%, transparent);
  --af-scrim:  color-mix(in srgb, var(--wlf-color-ink) 45%, transparent);

  --af-section:      clamp(3.5rem, 7vw, 6rem);
}

/* ── Grundlagen ─────────────────────────────────────────────────── */
body.wlf-site {
  font-family: var(--wlf-font-body);
  background: var(--wlf-color-ground, var(--wlf-color-bg));
  color: var(--wlf-color-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wlf-container { max-width: var(--wlf-container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

h1, h2, h3, h4 { font-family: var(--wlf-font-display); letter-spacing: -0.032em; text-wrap: balance; }
h1 { font-weight: 900; }
h2, h3 { font-weight: 800; }

/* Die Sperrung ist der Kern des Automotive-Tons: 10-11 px, fett, versal,
   und deutlich weiter gesperrt als üblich. Beide Vorbildshops benutzen
   dieselbe Regel für jede Kleinüberschrift. */
.af-eyebrow {
  display: inline-block; font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--wlf-color-ink-muted); margin-bottom: .9rem;
}

/* Gegenstück dazu: Große Schrift und Zahlen laufen enger. Die Spannung
   zwischen weit gesperrter Kleinschrift und eng gesetzten Zahlen ist der
   ganze Trick. */
.af-trust__item b,
.af-size b { letter-spacing: -.03em; }
.af-lead { font-size: 1.1rem; line-height: 1.62; color: var(--wlf-color-ink-muted); max-width: 58ch; }

.af-section { padding-block: var(--af-section); }
/* Kein eigener Ton mehr für abgesetzte Bänder: Auf einem grauen Grund
   setzen sich weiße Karten von selbst ab. Ein zweiter Flächenton daneben
   ergibt Streifen statt Ruhe. Geblieben ist eine Haarlinie als Zäsur. */
.af-section--surface { border-block: 1px solid var(--wlf-color-line-soft); }
.af-section__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.af-section__head h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin: 0 0 .7rem; line-height: 1.08; }

/* ── Schaltflächen ──────────────────────────────────────────────── */
.af-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem; border-radius: var(--wlf-radius-pill, 999px);
  font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer;
  background: var(--wlf-color-ink); color: var(--af-on-dark); border: 1px solid var(--wlf-color-ink);
  transition: background var(--wlf-transition), border-color var(--wlf-transition), color var(--wlf-transition);
}
.af-btn:hover {
  /* Kein #000: In einem dunklen Schema ist die Grundfarbe hell, und
     „dunkler machen" wäre dort das Gegenteil von Hervorheben. Der Zeiger
     zieht die Fläche stattdessen zum Akzent. */
  background: color-mix(in srgb, var(--wlf-color-ink) 82%, var(--wlf-color-accent));
  border-color: color-mix(in srgb, var(--wlf-color-ink) 82%, var(--wlf-color-accent));
  color: var(--af-on-dark);
}
.af-btn--accent { background: var(--wlf-color-accent); border-color: var(--wlf-color-accent); color: var(--wlf-color-accent-ink); }
.af-btn--accent:hover { background: var(--wlf-color-accent-hover); border-color: var(--wlf-color-accent-hover); }
.af-btn--ghost { background: transparent; color: var(--wlf-color-ink); border-color: var(--wlf-color-line); }
.af-btn--ghost:hover { background: var(--wlf-color-bg); border-color: var(--wlf-color-ink); color: var(--wlf-color-ink); }
.af-btn--on-dark { background: var(--af-on-dark); color: var(--af-dark); border-color: var(--af-on-dark); }
.af-btn--on-dark:hover {
  background: color-mix(in srgb, var(--af-on-dark) 90%, var(--af-dark));
  border-color: color-mix(in srgb, var(--af-on-dark) 90%, var(--af-dark));
  color: var(--af-dark);
}
.af-btn--on-dark-ghost { background: transparent; color: var(--af-on-dark); border-color: color-mix(in srgb, var(--af-on-dark) 28%, transparent); }
.af-btn--on-dark-ghost:hover { background: var(--af-on-dark-fill); border-color: var(--af-on-dark); color: var(--af-on-dark); }

/* ── Kopfbereich ────────────────────────────────────────────────── */
.wlf-site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--af-veil);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--wlf-color-line);
}
.wlf-site-header__inner { display: flex; align-items: center; gap: 2rem; min-height: 70px; }
.wlf-site-header__brand a,
.wlf-site-header__brand .wlf-logo-text {
  font-weight: 900; font-size: 1.15rem; letter-spacing: -.03em;
  text-decoration: none; color: var(--wlf-color-ink);
}
.wlf-nav { margin-left: auto; }
.wlf-nav ul { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.wlf-nav a {
  display: block; padding: .5rem .85rem; border-radius: var(--wlf-radius-sm);
  font-size: .93rem; font-weight: 500; text-decoration: none;
  color: var(--wlf-color-ink-muted); transition: color var(--wlf-transition), background var(--wlf-transition);
}
.wlf-nav a:hover { color: var(--wlf-color-ink); background: var(--wlf-color-surface); }
.wlf-nav .current-menu-item > a { color: var(--wlf-color-ink); font-weight: 600; }

/* Die frühere `.af-stage` samt `.af-searchcard` ist ersatzlos entfallen:
   Der Aufmacher läuft jetzt über das Chrome-Gerüst (`.af-hero`) und die
   Fahrzeugsuche über das Band darunter (`.af-fitband`). Beide Skins stehen
   am Ende dieser Datei. Was hier stand, hätte niemand mehr gefunden. */

/* ── Vertrauensleiste ───────────────────────────────────────────── */
.af-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--wlf-color-line); border: 1px solid var(--wlf-color-line); border-radius: var(--wlf-radius-lg); overflow: hidden; }
.af-trust__item { background: var(--wlf-color-bg); padding: 1.4rem 1.5rem; }
.af-trust__item b { display: block; font-size: 1.6rem; font-weight: 900; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.af-trust__item span { display: block; margin-top: .3rem; font-size: .85rem; color: var(--wlf-color-ink-muted); line-height: 1.45; }

/* ── Drei Schritte ──────────────────────────────────────────────── */
.af-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); counter-reset: af-step; }
.af-step { counter-increment: af-step; }
.af-step::before {
  content: counter(af-step, decimal-leading-zero);
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  color: var(--wlf-color-accent); margin-bottom: .9rem;
}
.af-step h3 { font-size: 1.15rem; margin: 0 0 .45rem; }
.af-step p { margin: 0; color: var(--wlf-color-ink-muted); font-size: .96rem; line-height: 1.6; }

/* ── Markenband ─────────────────────────────────────────────────── */
.af-brands { display: flex; flex-wrap: wrap; gap: .6rem; }
.af-brands a, .af-brands span {
  display: inline-block; padding: .6rem 1.15rem;
  border: 1px solid var(--wlf-color-line); border-radius: 999px;
  background: var(--wlf-color-bg); color: var(--wlf-color-ink);
  font-size: .92rem; font-weight: 600; text-decoration: none;
  transition: border-color var(--wlf-transition), background var(--wlf-transition);
}
.af-brands a:hover { border-color: var(--wlf-color-ink); background: var(--wlf-color-bg); }

/* ── Text-Bild-Block ────────────────────────────────────────────── */
.af-split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 860px) { .af-split { grid-template-columns: 1fr 1fr; } }
.af-split__media { background: var(--wlf-color-surface-alt); border-radius: var(--wlf-radius-lg); aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.af-split__media img { width: 100%; height: 100%; object-fit: cover; }
.af-checklist { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.af-checklist li { display: flex; gap: .65rem; font-size: .98rem; line-height: 1.55; }
.af-checklist li::before {
  content: ''; flex: 0 0 auto; width: 18px; height: 18px; margin-top: .18em; border-radius: 50%;
  background: var(--wlf-color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center/14px no-repeat, linear-gradient(#000,#000);
  -webkit-mask-composite: source-in; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ── Abschluss ──────────────────────────────────────────────────── */
.af-cta { background: var(--af-dark); color: var(--af-on-dark); border-radius: var(--wlf-radius-lg); padding: clamp(2.5rem, 6vw, 4rem); text-align: center; }
.af-cta h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 0 auto .8rem; max-width: 18ch; color: var(--af-on-dark); }
.af-cta p { color: var(--af-on-dark-dim); max-width: 48ch; margin: 0 auto 2rem; font-size: 1.05rem; line-height: 1.6; }
.af-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ── Modellraster (Bausteine des Basis-Themes) ──────────────────── */
.wlf-model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.wlf-model-card {
  background: var(--wlf-color-bg); border: 1px solid var(--wlf-color-line);
  border-radius: var(--wlf-radius-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: border-color var(--wlf-transition), box-shadow var(--wlf-transition), transform var(--wlf-transition);
}
.wlf-model-card:hover { border-color: var(--wlf-color-ink); box-shadow: var(--wlf-shadow-md); transform: translateY(-2px); }
.wlf-model-card__media { background: var(--wlf-color-surface); aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 1rem; }
.wlf-model-card__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.wlf-model-card__body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .3rem; flex: 1 1 auto; }
.wlf-model-card__brand { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wlf-color-ink-muted); }
.wlf-model-card__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.wlf-model-card__price { margin-top: auto; padding-top: .7rem; font-size: .95rem; font-weight: 700; }
.wlf-model-card__meta { font-size: .82rem; color: var(--wlf-color-ink-muted); }

/* Passt-Kennzeichnung */
.wlf-fitment-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; }
.wlf-fitment-badge--match {
  background: color-mix(in srgb, var(--wlf-color-success) 14%, var(--wlf-color-bg));
  color: var(--wlf-color-success);
}
.wlf-fitment-badge--fail {
  background: color-mix(in srgb, var(--wlf-color-danger) 12%, var(--wlf-color-bg));
  color: var(--wlf-color-danger);
}
.wlf-fitment-badge--unknown { background: var(--wlf-color-surface); color: var(--wlf-color-ink-muted); }

/* ── Fußbereich ─────────────────────────────────────────────────── */
.wlf-site-footer { background: var(--af-dark); color: var(--af-on-dark-dim); padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; margin-top: var(--af-section); }
.wlf-site-footer a { color: var(--af-on-dark); text-decoration: none; }
.wlf-site-footer a:hover { text-decoration: underline; }
.af-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; }
.af-footer__brand { font-weight: 900; font-size: 1.15rem; color: var(--af-on-dark); letter-spacing: -.03em; }
.af-footer__grid h3 { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--af-on-dark-mute); margin: 0 0 .8rem; }
.af-footer__grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .92rem; }
.af-footer__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--af-on-dark-line); font-size: .82rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }

/* ── Hinweis, dass dies ein Vorführshop ist ─────────────────────── */
.af-demobanner { background: var(--wlf-color-warning); color: var(--wlf-color-bg); font-size: .82rem; font-weight: 600; text-align: center; padding: .5rem 1rem; }
.af-demobanner a { color: var(--wlf-color-bg); text-decoration: underline; }

/* ── Barrierefreiheit ───────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wlf-color-accent); outline-offset: 2px; border-radius: var(--wlf-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  .wlf-model-card:hover { transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Kein Leerraum zwischen Kopfbereich und Aufmacher: der Hauptbereich bringt
   im Basis-Theme einen Innenabstand mit, den der Hero nicht braucht. */
.home .wlf-site-main { padding-top: 0; }
.home .wlf-site-main > .wlf-hero:first-child { margin-top: 0; }

/* ── Modellkarte: ganze Karte klickbar ──────────────────────────── */
.wlf-model-card { list-style: none; }
.wlf-model-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.wlf-model-card__media { position: relative; display: block; }
.wlf-model-card__media .wlf-fitment-badge { position: absolute; top: .7rem; left: .7rem; }
.wlf-model-card__body { padding: 1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .28rem; flex: 1 1 auto; }
.wlf-model-card__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; color: var(--wlf-color-ink); }
.wlf-model-card__colors { font-size: .82rem; color: var(--wlf-color-ink-muted); }
.wlf-model-card__price { margin-top: auto; padding-top: .7rem; font-size: .98rem; font-weight: 700; color: var(--wlf-color-ink); }
.wlf-model-grid__rest { margin-top: 1.25rem; font-size: .9rem; color: var(--wlf-color-ink-muted); }

/* ── Gutachten-Übersicht ────────────────────────────────────────── */
.af-gutachten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin: 2rem 0; }
.af-gutachten__model { background: var(--wlf-color-bg); border: 1px solid var(--wlf-color-line); border-radius: var(--wlf-radius-lg); padding: 1.15rem 1.25rem; }
.af-gutachten__kopf { display: flex; gap: 1rem; align-items: center; }
.af-gutachten__media { flex: 0 0 auto; width: 68px; height: 68px; background: var(--wlf-color-surface); border-radius: var(--wlf-radius-md); display: grid; place-items: center; overflow: hidden; }
.af-gutachten__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.af-gutachten__text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.af-gutachten__title { font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; }
.af-gutachten__meta { font-size: .84rem; color: var(--wlf-color-ink-muted); }
.af-gutachten__auf { margin-top: .9rem; border-top: 1px solid var(--wlf-color-line-soft); padding-top: .75rem; }
.af-gutachten__auf summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--wlf-color-accent); list-style: none; }
.af-gutachten__auf summary::-webkit-details-marker { display: none; }
.af-gutachten__auf summary::after { content: ' ↓'; }
.af-gutachten__auf[open] summary::after { content: ' ↑'; }
.af-gutachten__list { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; max-height: 260px; overflow-y: auto; }
.af-gutachten__list a { font-size: .86rem; color: var(--wlf-color-ink); text-decoration: none; border-bottom: 1px solid var(--wlf-color-line-soft); display: block; padding: .3rem 0; }
.af-gutachten__list a:hover { color: var(--wlf-color-accent); }
.af-gutachten__rest { margin: .7rem 0 0; font-size: .8rem; color: var(--wlf-color-ink-muted); }

/* ── Filterleiste über der Felgenübersicht ──────────────────────── */
.af-filter {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  padding: 1.15rem 1.35rem; margin-bottom: 1.75rem;
  background: var(--wlf-color-surface); border: 1px solid var(--wlf-color-line);
  border-radius: var(--wlf-radius-lg);
}
.af-filter__gruppe { display: flex; flex-direction: column; gap: .55rem; }
.af-filter__titel {
  font-size: .7rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--wlf-color-ink-muted);
}
.af-filter__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.af-chip {
  display: inline-block; padding: .42rem .9rem;
  border: 1px solid var(--wlf-color-line); border-radius: var(--wlf-radius-pill, 999px);
  background: var(--wlf-color-bg); color: var(--wlf-color-ink);
  font-size: .86rem; font-weight: 500; text-decoration: none;
  transition: border-color var(--wlf-transition), background var(--wlf-transition), color var(--wlf-transition);
}
.af-chip:hover { border-color: var(--wlf-color-ink); }
.af-chip.is-aktiv {
  background: var(--wlf-color-ink); border-color: var(--wlf-color-ink); color: var(--af-on-dark); font-weight: 600;
}
@media (max-width: 600px) { .af-filter { gap: 1rem; } }

/* Fahrzeugsuche auf der Felgenübersicht — heller Grund, nicht die dunkle Bühne */
.af-felgen-suche {
  background: var(--wlf-color-surface); border: 1px solid var(--wlf-color-line);
  border-radius: var(--wlf-radius-lg); padding: 1.35rem 1.5rem; margin-bottom: 1.75rem; max-width: 640px;
}
.af-felgen-suche .wlf-fitment-search { background: none; border: 0; padding: 0; }
.af-felgen-suche .wlf-fitment-search__fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: .7rem; align-items: end; }
.af-felgen-suche .wlf-field { display: flex; flex-direction: column; gap: .3rem; }
.af-felgen-suche .wlf-field__label { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--wlf-color-ink-muted); }
.af-felgen-suche .wlf-field__input {
  width: 100%; box-sizing: border-box; padding: .65rem .8rem; font-family: inherit;
  font-size: 1rem; font-weight: 600; background: var(--wlf-color-bg);
  border: 1px solid var(--wlf-color-line); border-radius: var(--wlf-radius-md);
}
.af-felgen-suche .wlf-btn, .af-felgen-suche button[type="submit"] {
  padding: .7rem 1.4rem; border: 0; border-radius: var(--wlf-radius-pill, 999px);
  background: var(--wlf-color-ink); color: var(--af-on-dark); font-family: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
@media (max-width: 560px) { .af-felgen-suche .wlf-fitment-search__fields { grid-template-columns: 1fr; } }
.af-filter__gruppe--hinweis { flex: 1 1 20rem; }
.af-filter__hinweis { margin: 0; font-size: .88rem; color: var(--wlf-color-ink-muted); line-height: 1.5; }
.af-filter__hinweis a { color: var(--wlf-color-ink); text-underline-offset: 3px; }

/* ── Fahrzeugbalken ─────────────────────────────────────────────── */
.wlf-vehicle-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
  justify-content: space-between; margin: 0 0 1.25rem;
  padding: .9rem 1.25rem; background: var(--wlf-color-surface);
  border: 1px solid var(--wlf-color-line); border-left: 3px solid var(--wlf-color-accent);
  border-radius: var(--wlf-radius-lg);
}
.wlf-vehicle-banner p { margin: 0; }
.wlf-vehicle-banner__label {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--wlf-color-ink-muted); margin-bottom: .1rem;
}
.wlf-vehicle-banner__name { font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }
.wlf-vehicle-banner__actions { display: flex; align-items: center; gap: 1rem; font-size: .88rem; }
.wlf-vehicle-banner__reset { color: var(--wlf-color-ink-muted); text-underline-offset: 3px; }
.wlf-vehicle-banner__reset:hover { color: var(--wlf-color-ink); }

/* ═══════════════════════════════════════════════════════════════════
   KOPFBEREICH MIT WARENKORB
   ═══════════════════════════════════════════════════════════════════ */

.af-ikon { width: 1.25em; height: 1.25em; flex: none; display: block; }

/* ── Zusageleiste über dem Kopf ─────────────────────────────────── */
.af-usp-bar { background: var(--af-dark); color: var(--af-on-dark); font-size: .8rem; line-height: 1; }
.af-usp-bar__inner {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 4vw, 2.75rem); min-height: 38px;
  /* Auf schmalen Geräten wandern die Zusagen seitwärts statt umzubrechen —
     eine dreizeilige Leiste über dem Logo drängt den Shop aus dem Bild. */
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.af-usp-bar__inner::-webkit-scrollbar { display: none; }
.af-usp-bar__item { display: inline-flex; align-items: center; gap: .45rem; }
.af-usp-bar__item .af-ikon { opacity: .72; width: 1.05em; height: 1.05em; }

/* ── Kopfzeile ──────────────────────────────────────────────────── */
.af-header__inner { display: flex; align-items: center; gap: clamp(.5rem, 2vw, 2rem); min-height: 72px; }
.af-header__brand { margin-right: auto; }
.af-header__nav { margin-right: auto; }
.af-header__tools { display: flex; align-items: center; gap: .2rem; margin-left: auto; }

.af-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; position: relative;
  background: none; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--wlf-color-ink); text-decoration: none;
  transition: background .18s ease;
}
.af-iconbtn:hover, .af-iconbtn:focus-visible { background: var(--wlf-color-surface); color: var(--wlf-color-ink); }
.af-iconbtn .af-ikon { width: 22px; height: 22px; }

@media (min-width: 900px) { .af-header__burger { display: none; } }
@media (max-width: 899px) { .af-header__nav { display: none; } }
.af-iconbtn--desktop { display: none; }
@media (min-width: 600px) { .af-iconbtn--desktop { display: inline-flex; } }

/* Der Zähler ist die einzige Rückmeldung, dass „In den Warenkorb“ gewirkt hat. */
.af-cartbtn__count {
  position: absolute; top: 3px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wlf-color-accent); color: var(--wlf-color-accent-ink);
  border-radius: 999px; font-size: .68rem; font-weight: 700; line-height: 1;
}
.af-cartbtn__count[hidden] { display: none; }

/* ── Fahrzeug-Chip ──────────────────────────────────────────────── */
.af-vehicle-chip {
  display: none; align-items: center; gap: .45rem;
  max-width: 260px; padding: .42rem .85rem;
  background: var(--wlf-color-surface); border: 1px solid var(--wlf-color-line);
  border-radius: 999px; font-size: .82rem; font-weight: 600;
  color: var(--wlf-color-ink); text-decoration: none;
}
.af-vehicle-chip:hover { border-color: var(--wlf-color-accent); color: var(--wlf-color-accent); }
.af-vehicle-chip .af-ikon { width: 17px; height: 17px; }
.af-vehicle-chip__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 760px) { .af-vehicle-chip { display: inline-flex; } }

/* ── Suchband ───────────────────────────────────────────────────── */
.af-searchbar {
  border-top: 1px solid var(--wlf-color-line); background: var(--wlf-color-bg);
  /* Von Höhe 0 aufziehen statt einblenden: Der Inhalt rutscht mit, statt
     überdeckt zu werden. */
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease;
}
.af-searchbar.is-open { grid-template-rows: 1fr; }
.af-searchbar > * { overflow: hidden; }
.af-searchbar__form { display: flex; align-items: center; gap: .6rem; padding-block: .9rem; }
.af-searchbar__form .af-ikon { width: 20px; height: 20px; color: var(--wlf-color-ink-muted); }
.af-searchbar__form input[type="search"] {
  flex: 1 1 auto; min-width: 0; padding: .7rem .2rem;
  border: 0; background: none; font: inherit; font-size: 1rem; color: var(--wlf-color-ink);
}
.af-searchbar__form input[type="search"]:focus { outline: none; }

/* ── Schubladen ─────────────────────────────────────────────────── */
.af-drawer { position: fixed; inset: 0; z-index: 200; background: transparent; transition: background .24s ease; }
.af-drawer.is-open { background: var(--af-scrim); }
.af-drawer__panel {
  position: absolute; inset-block: 0; right: 0; width: min(400px, 92vw);
  display: flex; flex-direction: column; background: var(--wlf-color-bg);
  box-shadow: -18px 0 48px -24px color-mix(in srgb, var(--wlf-color-ink) 45%, transparent);
  transform: translateX(100%); transition: transform .24s ease;
}
.af-drawer__panel--left { right: auto; left: 0; transform: translateX(-100%); box-shadow: 18px 0 48px -24px color-mix(in srgb, var(--wlf-color-ink) 45%, transparent); }
.af-drawer.is-open .af-drawer__panel { transform: translateX(0); }

.af-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--wlf-color-line);
}
.af-drawer__head strong { font-size: 1.02rem; font-weight: 700; }
.af-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 1.25rem; }
.af-drawer__link {
  display: flex; align-items: center; gap: .6rem; padding: .8rem 0;
  border-top: 1px solid var(--wlf-color-line-soft);
  color: var(--wlf-color-ink); text-decoration: none; font-weight: 600;
}
body.af-no-scroll { overflow: hidden; }

.af-mobilnav ul { list-style: none; margin: 0; padding: 0; }
.af-mobilnav li { border-bottom: 1px solid var(--wlf-color-line-soft); }
.af-mobilnav a { display: block; padding: .85rem 0; color: var(--wlf-color-ink); text-decoration: none; font-weight: 600; font-size: 1.02rem; }
.af-mobilnav .sub-menu { padding-left: 1rem; }
.af-mobilnav .sub-menu a { font-weight: 500; font-size: .95rem; color: var(--wlf-color-ink-muted); }

/* Der Mini-Warenkorb von WooCommerce, an dieses Design angeglichen. */
.af-drawer .widget_shopping_cart_content ul.cart_list { list-style: none; margin: 0; padding: 0; }
.af-drawer .widget_shopping_cart_content li {
  display: grid; grid-template-columns: 56px 1fr; gap: .8rem; position: relative;
  align-items: start; padding: .9rem 1.6rem .9rem 0; border-bottom: 1px solid var(--wlf-color-line-soft);
}
.af-drawer .widget_shopping_cart_content li img { grid-row: span 2; width: 56px; height: auto; border-radius: var(--wlf-radius-sm); }
.af-drawer .widget_shopping_cart_content a:not(.remove) { color: var(--wlf-color-ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
.af-drawer .widget_shopping_cart_content .quantity { grid-column: 2; font-size: .85rem; color: var(--wlf-color-ink-muted); }
.af-drawer .widget_shopping_cart_content .remove {
  position: absolute; top: .85rem; right: 0; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--wlf-color-ink-muted); text-decoration: none; font-size: 1.15rem; line-height: 1;
}
.af-drawer .widget_shopping_cart_content .total { padding: 1rem 0; font-size: 1rem; border-bottom: 1px solid var(--wlf-color-line); }
.af-drawer .widget_shopping_cart_content .buttons { display: grid; gap: .55rem; padding-top: 1rem; }
.af-drawer .widget_shopping_cart_content .buttons a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
  text-decoration: none; background: transparent; color: var(--wlf-color-ink); border: 1px solid var(--wlf-color-line);
}
.af-drawer .widget_shopping_cart_content .buttons .checkout {
  background: var(--wlf-color-accent); border-color: var(--wlf-color-accent); color: var(--wlf-color-accent-ink);
}
.af-drawer .widget_shopping_cart_content .empty { color: var(--wlf-color-ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .af-drawer, .af-drawer__panel, .af-searchbar { transition: none; }
}

/* ── Zahlarten in der Fußzeile ──────────────────────────────────── */
.af-payments {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem;
  padding: 1.2rem 0; margin-top: 1rem;
  border-top: 1px solid var(--af-on-dark-line);
  font-size: .82rem; color: var(--af-on-dark-dim);
}
.af-payments .af-ikon { width: 16px; height: 16px; }
.af-payments__label { font-weight: 600; }
.af-payments__item {
  padding: .3rem .7rem; border: 1px solid var(--af-on-dark-line);
  border-radius: 999px; color: var(--af-on-dark); font-size: .78rem; font-weight: 600;
}

/* ── Häufige Fragen ─────────────────────────────────────────────── */
.af-faq { max-width: 72ch; }
.af-faq__item { border-top: 1px solid var(--wlf-color-line); }
.af-faq__item:last-child { border-bottom: 1px solid var(--wlf-color-line); }
.af-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer;
  font-size: 1.02rem; font-weight: 600; list-style: none;
}
.af-faq__item summary::-webkit-details-marker { display: none; }
.af-faq__item summary:hover { color: var(--wlf-color-accent); }
.af-faq__pfeil {
  flex: none; width: 18px; height: 18px; color: var(--wlf-color-ink-muted);
  transform: rotate(90deg); transition: transform .18s ease;
}
.af-faq__item[open] .af-faq__pfeil { transform: rotate(-90deg); }
.af-faq__item p {
  margin: 0; padding: 0 0 1.3rem;
  color: var(--wlf-color-ink-muted); line-height: 1.65; max-width: 64ch;
}
@media (prefers-reduced-motion: reduce) { .af-faq__pfeil { transition: none; } }

/* ── Bild im Gutachten-Block ────────────────────────────────────── */
.af-split__media {
  position: relative; overflow: hidden;
  background: var(--wlf-color-surface);
  border: 1px solid var(--wlf-color-line);
  border-radius: var(--wlf-radius-lg);
  display: grid; place-items: center;
  min-height: 22rem;
}
.af-split__media img {
  width: 78%; height: auto; max-height: 78%; object-fit: contain;
  /* Kein mix-blend-mode: multiply. Es sieht auf weißem Grund gut aus und
     löscht das Motiv auf jedem dunklen Schema fast vollständig aus. */
  filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--wlf-color-ink) 28%, transparent));
}
.af-split__media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 50% 45%,
    color-mix(in srgb, var(--wlf-color-accent) 12%, transparent), transparent 70%);
  pointer-events: none;
}

/* Echte Zahlungszeichen statt Text: Ein Kunde erkennt sie im Vorbeisehen,
   ein Wort muss er lesen. Weißer Grund, weil die Marken darauf gezeichnet
   sind — auf der dunklen Fußzeile wären sie sonst unleserlich. */
.af-payments__mark {
  height: 30px; width: auto; flex: none;
  padding: .28rem .45rem; border-radius: var(--wlf-radius-sm);
  background: #fff;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--wlf-color-ink) 18%, transparent);
}

/* ── Einstieg nach Zollgröße ────────────────────────────────────── */
.af-sizes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}
.af-size {
  display: flex; flex-direction: column; gap: .15rem;
  padding: 1.1rem 1.2rem;
  background: var(--wlf-color-bg);
  border: 1px solid var(--wlf-color-line);
  border-radius: var(--wlf-radius-lg);
  text-decoration: none; color: var(--wlf-color-ink);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.af-size:hover {
  border-color: var(--wlf-color-accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--wlf-color-ink) 45%, transparent);
}
.af-size b { font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
/* Das Zollzeichen ist kleiner und gedämpft — es ist eine Einheit, keine Zahl. */
.af-size b i { font-style: normal; font-size: .62em; color: var(--wlf-color-ink-muted); margin-left: .06em; }
.af-size span { font-size: .8rem; color: var(--wlf-color-ink-muted); }
@media (prefers-reduced-motion: reduce) { .af-size { transition: none; } .af-size:hover { transform: none; } }

/* ═══════════════════════════════════════════════════════════════════
   KARTEN AUF GRUND — nach dem Vorbild von ff-wheels
   ═══════════════════════════════════════════════════════════════════
   Eine Regel trägt den ganzen Shop: Die Seite ist eine ruhige Grundfläche,
   alles Greifbare liegt als hellere Karte darauf. Keine randlosen Bänder,
   keine Rahmenfarbwechsel — Tiefe kommt aus zwei Schattenstufen, und der
   Zeiger hebt die Karte an, statt ihren Rahmen umzufärben.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Zweistufig: eine sehr feine Kante direkt unter der Karte, dazu ein
     weicher, weit gestreuter Schein. Eine einzelne Stufe wirkt entweder
     hart aufgeklebt oder gar nicht. */
  --af-schatten:       0 1px 2px color-mix(in srgb, var(--wlf-color-ink) 5%, transparent),
                       0 4px 16px color-mix(in srgb, var(--wlf-color-ink) 7%, transparent);
  --af-schatten-hover: 0 4px 24px color-mix(in srgb, var(--wlf-color-ink) 12%, transparent);
  /* Haarlinie statt Farbwechsel — der einzige Trenner im ganzen Shop. */
  --af-haarlinie: 1px solid color-mix(in srgb, var(--wlf-color-ink) 7%, transparent);
}

/* Ein einziges Muster für jedes anfassbare Element. */
.af-karte,
.af-size,
.af-trust__item,
.af-gutachten__model,
.woocommerce ul.products li.product,
.wlf-model-card {
  background: var(--wlf-color-bg);
  border: var(--af-haarlinie);
  border-radius: var(--wlf-radius-lg);
  box-shadow: var(--af-schatten);
  transition: box-shadow .3s ease, transform .3s ease;
}
.af-size:hover,
.af-gutachten__model:hover,
.woocommerce ul.products li.product:hover,
.wlf-model-card:hover {
  box-shadow: var(--af-schatten-hover);
  transform: translateY(-4px);
  /* Bewusst KEIN Rahmenwechsel: Wenn sich beim Überfahren Rahmen, Schatten
     und Position zugleich ändern, wirkt die Karte nervös. */
  border-color: color-mix(in srgb, var(--wlf-color-ink) 7%, transparent);
}

/* Die Kennzahlenleiste ist eine Reihe von Karten, kein Kasten mit Gittern. */
.af-trust {
  border: 0; background: none; gap: .75rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.af-trust__item { border-radius: var(--wlf-radius-lg); }

/* Alles, was Text trägt, ist eine Pille; alles, was ein Feld ist, eine
   Kachel. Diese Trennung durchzuhalten ist der halbe Wiedererkennungswert. */
.af-specs li { border-radius: 980px; padding: .22rem .62rem; }

@media (prefers-reduced-motion: reduce) {
  .af-size, .af-gutachten__model, .woocommerce ul.products li.product, .wlf-model-card { transition: none; }
  .af-size:hover, .af-gutachten__model:hover,
  .woocommerce ul.products li.product:hover, .wlf-model-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   NACHBESSERUNG NACH SICHTPRÜFUNG
   ═══════════════════════════════════════════════════════════════════ */

/* FEHLER: Die Passform-Marke heißt im Markup `wlf-fit-badge`, nicht
   `wlf-fitment-badge`. Meine Regel griff also nie, die Marke fiel in den
   normalen Fluss ans untere Bildende und wurde vom overflow:hidden des
   Bildkastens abgeschnitten — ein grauer Stummel unter jeder Felge. */
.wlf-model-card__media .wlf-fit-badge {
  position: absolute; left: .6rem; bottom: .6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .6rem; border-radius: 980px;
  border: 1px solid; font-size: .72rem; font-weight: 700; line-height: 1.35;
  backdrop-filter: blur(8px);
}
.wlf-model-card__media .wlf-fit-badge--yes {
  background: color-mix(in srgb, var(--wlf-color-success) 12%, var(--wlf-color-bg));
  border-color: color-mix(in srgb, var(--wlf-color-success) 30%, transparent);
  color: var(--wlf-color-success);
}
.wlf-model-card__media .wlf-fit-badge--no {
  background: color-mix(in srgb, var(--wlf-color-warning) 12%, var(--wlf-color-bg));
  border-color: color-mix(in srgb, var(--wlf-color-warning) 30%, transparent);
  color: var(--wlf-color-warning);
}

/* Das Modellbild wurde per mix-blend-mode multipliziert — auf weißen
   Karten unauffällig, auf jedem dunklen Schema löscht es das Motiv. */
.wlf-model-card__media img { mix-blend-mode: normal; }

/* ── Der Rhythmus war fast doppelt so weit wie bei den Vorbildern ──
   Gemessen: zwischen den Abschnitten standen bis zu 250 px Leere, die
   Seite bestand zur Hälfte aus nichts. ff-wheels arbeitet mit 64 px,
   felgenforum mit 96 px bei deutlich mehr Inhalt pro Abschnitt. */
:root { --af-section: clamp(2.75rem, 4.5vw, 4.25rem); }
.af-section__head { margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }
.af-section__head h2 { font-size: clamp(1.55rem, 2.8vw, 2.15rem); }
.af-section__head .af-lead { font-size: 1.02rem; }

/* ── Die Akzentfarbe kam auf der ganzen Seite genau einmal vor ──────
   Ein Shop ohne Farbe wirkt unfertig. Der Akzent gehört dorthin, wo
   gehandelt wird: auf den Hauptknopf und auf den Preis. */
.af-btn:not(.af-btn--ghost):not(.af-btn--on-dark):not(.af-btn--on-dark-ghost) {
  background: var(--wlf-color-accent);
  border-color: var(--wlf-color-accent);
  color: var(--wlf-color-accent-ink);
}
.af-btn:not(.af-btn--ghost):not(.af-btn--on-dark):not(.af-btn--on-dark-ghost):hover {
  background: var(--wlf-color-accent-hover);
  border-color: var(--wlf-color-accent-hover);
  color: var(--wlf-color-accent-ink);
}
.wlf-model-card__price { color: var(--wlf-color-accent); font-weight: 800; }

/* Die Kennzahlen waren vier leere weiße Kästen. Eine Akzentkante gibt
   ihnen eine Richtung, ohne sie laut zu machen. */
.af-trust__item { border-top: 3px solid var(--wlf-color-accent); padding-top: 1.2rem; }
.af-trust__item b { font-size: 1.85rem; }

/* ── Acht Zollgrößen, acht Spalten ─────────────────────────────────
   Mit auto-fill blieb die 23" allein in einer zweiten Reihe stehen —
   das sieht nach Versehen aus, nicht nach Gestaltung. */
@media (min-width: 1000px) { .af-sizes { grid-template-columns: repeat(8, 1fr); } }
@media (min-width: 640px) and (max-width: 999px) { .af-sizes { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 639px) { .af-sizes { grid-template-columns: repeat(3, 1fr); } }
.af-size { padding: .9rem 1rem; }
.af-size b { font-size: 1.4rem; }

/* ── Markenband: fünf Pillen in einer riesigen Leere ───────────────── */
.af-brands { gap: .5rem; }
.af-brands a { padding: .55rem 1.1rem; font-size: .92rem; }

/* ── Abschluss-Aufruf war ein dunkler Kasten mit viel Nichts ───────── */
.af-cta { padding: clamp(2.25rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3rem); }
.af-cta h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); margin-bottom: .6rem; }

/* FEHLER MEINERSEITS: Ich habe mix-blend-mode entfernt, weil es auf dunklen
   Schemata das Motiv auslöscht — dabei kaschierte es, dass die Katalogbilder
   einen weißen Hintergrund haben. Ohne das Multiplizieren stand plötzlich ein
   weißer Kasten im grauen Bildfeld.

   Richtige Lösung ist nicht der Filter, sondern das Bildfeld: Es bekommt
   dieselbe Farbe wie die Karte. Dann verschwindet der weiße Rand der Bilder,
   ohne dass eine Mischregel etwas verrechnen muss — und auf einem dunklen
   Schema sitzt die Felge auf einer hellen Kachel statt zu verschwinden. */
.wlf-model-card__media,
.woocommerce ul.products li.product .af-card-media {
  background: #fff;
}

/* Damit das weiße Feld auf weißer Karte nicht verschwimmt, trennt eine
   Haarlinie — dieselbe wie überall sonst. */
.wlf-model-card__media { border-bottom: var(--af-haarlinie); }

/* Der Abstand zwischen Abschnittskopf und Inhalt war noch zu weit, und
   zwischen den Abschnitten stand weiter Luft ohne Aufgabe. */
.af-section { padding-block: clamp(2.25rem, 3.5vw, 3.5rem); }
.af-section__head { margin-bottom: clamp(1.25rem, 2vw, 1.6rem); }

/* ═══════════════════════════════════════════════════════════════════
   INHALTSSEITEN
   ═══════════════════════════════════════════════════════════════════ */

/* FEHLER: `.wlf-container` und `.wlf-container--narrow` haben dieselbe
   Spezifität. Meine Regel für den normalen Container steht später in der
   Kaskade und hat den schmalen deshalb überschrieben — Lesetexte liefen
   über die volle Breite von 1180 px statt über 720. */
.wlf-container.wlf-container--narrow { max-width: var(--wlf-container-narrow, 720px); }

.af-page__kopf {
  padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2rem);
  border-bottom: var(--af-haarlinie);
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.af-page__kopf h1 {
  font-size: clamp(1.85rem, 4vw, 3rem);
  line-height: 1.06; margin: 0;
}
.af-page__kopf .af-lead { margin-top: .8rem; }

/* Der Lesebereich. Zeilen über etwa 70 Zeichen liest niemand gern, und
   auf einer 1180 px breiten Seite werden sie ohne Begrenzung doppelt so
   lang. */
.af-prose {
  max-width: 68ch;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  font-size: 1.02rem; line-height: 1.7;
  color: var(--wlf-color-ink);
}
.af-prose > :first-child { margin-top: 0; }
.af-prose h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin: 2.25rem 0 .7rem; line-height: 1.2; }
.af-prose h3 { font-size: 1.12rem; margin: 1.75rem 0 .5rem; }
.af-prose p { margin: 0 0 1.05rem; }
.af-prose a { color: var(--wlf-color-accent); text-underline-offset: .2em; }
.af-prose ul, .af-prose ol { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.af-prose li { margin-bottom: .45rem; }
.af-prose strong { font-weight: 700; }
/* Shortcodes auf Inhaltsseiten (Fahrzeugsuche, Gutachtenliste) sind keine
   Lesetexte und dürfen die Breite verlassen. */
.af-prose .wlf-fitment-search,
.af-prose .af-gutachten,
.af-prose .wlf-model-grid { max-width: none; }

/* Die Fragen auf der eigenen Seite laufen breiter als im Startseiten-Band. */
.af-faq--seite { max-width: 52rem; }
.af-faq__rest {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.af-faq__rest p { margin: 0; color: var(--wlf-color-ink-muted); }

/* ── Die drei Schritte waren nackte Textspalten ───────────────────
   Auf einer Seite, die sonst aus Karten besteht, fällt ein loser
   Textblock als Loch auf. Sie bekommen denselben Körper wie alles
   andere — und die Ziffer wird zum Anker statt zur Fußnote. */
.af-step {
  background: var(--wlf-color-bg);
  border: var(--af-haarlinie);
  border-radius: var(--wlf-radius-lg);
  box-shadow: var(--af-schatten);
  padding: 1.5rem 1.5rem 1.6rem;
}
.af-steps { gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.af-step::before {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; margin-bottom: .9rem;
  border-radius: 980px;
  background: color-mix(in srgb, var(--wlf-color-accent) 12%, var(--wlf-color-bg));
  color: var(--wlf-color-accent);
  font-size: .82rem; font-weight: 800; letter-spacing: 0;
}

/* ── Das Markenband: fünf Pillen in einer halbleeren Fläche ────────
   Jetzt füllen die Marken die Zeile als gleich große Kacheln. Bei
   fünf Marken sind das fünf Spalten, bei zwölf drei Reihen — in
   beiden Fällen ein gefüllter Block statt einer angefangenen Zeile. */
.af-brands {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.af-brands a, .af-brands span {
  display: flex; align-items: center; justify-content: center;
  min-height: 4.25rem; padding: .9rem 1rem;
  background: var(--wlf-color-bg);
  border: var(--af-haarlinie);
  border-radius: var(--wlf-radius-lg);
  box-shadow: var(--af-schatten);
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  text-align: center; text-decoration: none; color: var(--wlf-color-ink);
  transition: box-shadow .3s ease, transform .3s ease;
}
.af-brands a:hover {
  box-shadow: var(--af-schatten-hover); transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--wlf-color-ink) 7%, transparent);
  background: var(--wlf-color-bg); color: var(--wlf-color-accent);
}

/* ── Die Passform-Marke saß auf der Kante des Bildfelds ────────────
   Unten links lag sie genau auf der Trennlinie zum Kartenkörper und
   sah aus wie verrutscht. Oben links steht sie frei — und dort sucht
   das Auge zuerst. */
.wlf-model-card__media .wlf-fit-badge { top: .6rem; bottom: auto; }

@media (prefers-reduced-motion: reduce) {
  .af-brands a { transition: none; }
  .af-brands a:hover { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   HERO / KOPF / FUSS — RUHIGE FLÄCHE STATT FOTOGRUND
   ═══════════════════════════════════════════════════════════════════
   Vorher lag ein Werkstattfoto unter dem Hero und eine Metalltextur
   unter Seite und Fußzeile. Beides kostete mehr, als es brachte: Das
   Foto hat die Überschrift verschluckt und brauchte einen Schleier, der
   die Fläche grau-matschig machte; die Textur hat jede Karte und jeden
   Text mit Rauschen unterlegt. Weg damit.

   Stattdessen: ein nahezu schwarzer Grund mit einem einzigen weichen
   Lichtverlauf, und als einziges Bild ein freigestellter Felgen-
   Freisteller. Das Produkt ist das Motiv — nicht die Kulisse.

   Gold (#bfa774) ist Akzent, nicht Fläche: Haarlinien, Vorzeile,
   Hauptknopf, Fußzeilenköpfe. Sobald es Flächen füllt, wirkt es billig.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Zwei Schwarztöne genügen für die ganze dunkle Hülle: einer für den
     Grund, einer für alles, was sich davon abheben soll. */
  --af-nacht:     #0c0c0c;
  --af-nacht-2:   #121212;
  --af-linie:     rgba(255, 255, 255, .08);
  --af-linie-gold: color-mix(in srgb, var(--wlf-color-accent) 24%, transparent);
  --af-ton-1:     rgba(255, 255, 255, .92);
  --af-ton-2:     rgba(255, 255, 255, .58);
  --af-ton-3:     rgba(255, 255, 255, .40);

  /* FEHLER weiter oben in dieser Datei: Die `--af-on-dark-*`-Töne sind als
     Mischung aus `--wlf-color-bg` gerechnet. Das stimmt für einen hellen
     Shop — dort ist der Grund weiß und die Mischung ergibt hellen Text auf
     dunkler Fläche. Hier ist `--wlf-color-bg` aber #222, und dieselbe
     Rechnung ergibt dunkelgrauen Text auf dunkelgrauem Grund: Der Absatz im
     Abschluss-Aufruf war praktisch unsichtbar. Deshalb feste Weißstufen. */
  --af-on-dark-dim:  rgba(255, 255, 255, .62);
  --af-on-dark-mute: rgba(255, 255, 255, .50);
  --af-on-dark-line: rgba(255, 255, 255, .14);
  --af-on-dark-fill: rgba(255, 255, 255, .06);
}

/* Der Grund ist wieder eine Farbe. Kein Bild, kein background-attachment
   fixed — das war auf dem Handy auch noch teuer. */
body.wlf-site {
  background-color: var(--wlf-color-ground);
  background-image: none;
}

.home .wlf-site-main { padding-block: 0; }

/* ═══ Staging-Hinweis ═════════════════════════════════════════════ */
/* Er war ein grellgelbes Warnband über einem dunklen Shop — das Erste,
   was man sah, und es sah nach Baustelle aus. Als Zeile in Akzentfarbe
   auf dem Grund ist er genauso unmissverständlich und gehört zum Bild. */
.af-demobanner {
  background: #000;
  border-bottom: 1px solid var(--af-linie-gold);
  color: color-mix(in srgb, var(--wlf-color-accent) 85%, #fff);
  padding: .55rem 1rem;
  font-family: var(--wlf-font-display);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.af-demobanner a { color: inherit; }

/* ═══ Zusageleiste ════════════════════════════════════════════════ */
/* Sie ist eine Fußnote über dem Kopf, keine zweite Navigation:
   klein, versal, gedämpft, und nur die Zeichen tragen Gold. */
.af-usp-bar {
  background: var(--af-nacht);
  border-bottom: 1px solid var(--af-linie);
  color: var(--af-ton-3);
  font-family: var(--wlf-font-display);
  font-size: .69rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.af-usp-bar__inner { min-height: 34px; gap: clamp(1.25rem, 4vw, 3rem); }
/* Mittig zentriert plus overflow-x hieß auf dem Handy: die Leiste ist an
   BEIDEN Enden angeschnitten, die erste Zusage fängt mitten im Wort an.
   Sobald gescrollt werden muss, beginnt sie deshalb links. */
@media (max-width: 899px) {
  .af-usp-bar__inner { justify-content: flex-start; }
}
.af-usp-bar__item .af-ikon {
  color: var(--wlf-color-accent);
  opacity: .8;
  width: 1em;
  height: 1em;
}

/* ═══ Kopfzeile ═══════════════════════════════════════════════════ */
.af-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--af-nacht) 86%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  /* Eine Haarlinie, nicht die goldene Bordüre von vorher: Ein 1 px
     kräftiges Gold über die ganze Breite liest sich als Trennstrich
     eines Formulars, nicht als Akzent. */
  border-bottom: 1px solid var(--af-linie);
}
.af-header__inner { min-height: 68px; }

.af-header .wlf-logo-text,
.af-header .wlf-site-header__brand a {
  font-family: var(--wlf-font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--af-ton-1);
  transition: color .2s ease;
}
.af-header .wlf-logo-text:hover { color: var(--wlf-color-accent); }
.af-header .custom-logo { height: 30px; width: auto; display: block; }

.af-header__nav ul { gap: clamp(.25rem, 1.5vw, 1rem); }
.af-header__nav a {
  position: relative;
  padding: .5rem .25rem;
  background: none;
  font-family: var(--wlf-font-display);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--af-ton-2);
  transition: color .2s ease;
}
/* BEWEGUNG 3 von 3 — die einzige, die auf eine Handlung antwortet:
   eine goldene Haarlinie wächst aus der Mitte. */
.af-header__nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: .15rem;
  height: 1px;
  background: var(--wlf-color-accent);
  transition: left .28s ease, right .28s ease;
}
.af-header__nav a:hover,
.af-header__nav .current-menu-item > a { color: var(--af-ton-1); background: none; }
.af-header__nav a:hover::after,
.af-header__nav .current-menu-item > a::after { left: 0; right: 0; }

.af-header .af-iconbtn { color: var(--af-ton-2); }
.af-header .af-iconbtn:hover,
.af-header .af-iconbtn:focus-visible {
  background: rgba(255, 255, 255, .06);
  color: var(--af-ton-1);
}
.af-header .af-vehicle-chip {
  background: rgba(255, 255, 255, .05);
  border-color: var(--af-linie);
  border-radius: 0;
  font-family: var(--wlf-font-display);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--af-ton-2);
}
.af-header .af-vehicle-chip:hover { border-color: var(--af-linie-gold); color: var(--wlf-color-accent); }

.af-searchbar { background: var(--af-nacht-2); border-top-color: var(--af-linie); }
.af-searchbar__form input[type="search"] { color: var(--af-ton-1); }
.af-searchbar__form input[type="search"]::placeholder { color: var(--af-ton-3); }

/* ═══ Hero ════════════════════════════════════════════════════════ */
/* EINE Komposition: Marke links, ein Produkt rechts. Der Grund ist ein
   einziger Verlauf, dessen helle Stelle hinter der Felge sitzt — damit
   führt die Fläche zum Bild, statt mit ihm zu konkurrieren. */
.af-hero {
  --wlf-hero-pad: clamp(3.75rem, 7vw, 6.5rem);
  background:
    radial-gradient(90% 75% at 74% 34%, #1c1c1c 0%, #141414 46%, var(--af-nacht) 100%);
  color: var(--af-ton-1);
  overflow: hidden;
  border-bottom: 1px solid var(--af-linie);
}
/* Goldene Haarlinie oben — der einzige Rahmen, den der Hero braucht. */
.af-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--af-linie-gold) 22%, var(--af-linie-gold) 78%, transparent);
  z-index: 3;
}

@media (min-width: 900px) {
  .af-hero .wlf-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

.af-hero .wlf-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.4rem;
  font-family: var(--wlf-font-display);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--wlf-color-accent);
}
.af-hero .wlf-hero__eyebrow::before {
  content: "";
  width: clamp(1.5rem, 4vw, 2.75rem);
  height: 1px;
  background: currentColor;
  flex: none;
}

/* Oswald 300 im Großen: Eine schmale, leichte Schrift wirkt bei 5 rem
   teuer, dieselbe Schrift in 900 wirkt wie eine Werkstattpreisliste.
   Deshalb hier bewusst leicht — und Gemischtschreibung statt Versal,
   weil „a Fashion Statement" ein Satz ist und keine Beschilderung. */
.af-hero .wlf-hero__title {
  margin: 0 0 1.35rem;
  font-family: var(--wlf-font-display);
  font-weight: 300;
  font-size: clamp(2.9rem, 6.6vw, 5.1rem);
  line-height: .96;
  letter-spacing: -.005em;
  text-transform: none;
  color: #fff;
}
.af-hero .wlf-hero__title em {
  display: block;
  font-style: normal;
  font-weight: 500;
  color: var(--wlf-color-accent);
}

.af-hero .wlf-hero__text {
  margin: 0 0 2.25rem;
  max-width: 38ch;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--af-ton-2);
}

.af-hero .wlf-hero__actions { gap: .75rem; }
.af-hero .wlf-button {
  display: inline-flex;
  align-items: center;
  border-radius: 0;
  padding: 1rem 2rem;
  font-family: var(--wlf-font-display);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.af-hero .af-btn-primary {
  background: var(--wlf-color-accent);
  border-color: var(--wlf-color-accent);
  color: #131313;
}
.af-hero .af-btn-primary:hover {
  background: var(--wlf-color-accent-hover);
  border-color: var(--wlf-color-accent-hover);
  box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--wlf-color-accent) 70%, transparent);
}
.af-hero .af-btn-ghost {
  background: none;
  border-color: rgba(255, 255, 255, .22);
  color: var(--af-ton-1);
}
.af-hero .af-btn-ghost:hover {
  border-color: var(--wlf-color-accent);
  color: var(--wlf-color-accent);
}

/* ── Der Freisteller ───────────────────────────────────────────────
   Keine Karte, kein Rahmen, kein Schatten-Rechteck: Die Felge steht
   frei im Verlauf. Der Schein dahinter ist das, was sie an die Fläche
   bindet — ohne ihn klebt ein Bild in der Ecke. */
.af-hero__product {
  margin: 0;
  display: grid;
  justify-items: center;
}
/* Das Bildfeld ist quadratisch wie die Aufnahme. Nur so sind Schein und
   Ring wirklich kreisrund — an der Figure hängt auch die Bildunterschrift,
   ein Ring auf deren Höhe wäre eine Ellipse. */
.af-hero__frame {
  position: relative;
  display: block;
  isolation: isolate;
  width: 100%;
  /* Nicht die volle Spaltenbreite: Ohne Luft neben dem Bild wird aus dem
     Freisteller wieder eine Kachel, und der Ring stößt an den Rand. */
  max-width: min(26rem, 74vw);
  aspect-ratio: 1;
}
.af-hero__halo {
  position: absolute;
  z-index: -1;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--wlf-color-accent) 44%, transparent) 0%,
    color-mix(in srgb, var(--wlf-color-accent) 14%, transparent) 52%,
    transparent 76%);
  filter: blur(34px);
}
/* Ein einziger 1-px-Ring als Bezugsform. Er macht aus Felge und Fläche
   eine Komposition, ohne ein Kasten zu sein. */
.af-hero__frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--wlf-color-accent) 26%, transparent);
}
.af-hero__wheel {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  /* Ein weicher, tiefer Schatten setzt die Felge auf die Fläche. Nicht
     dunkler: Ein kräftigerer Schatten verschluckt den goldenen Schein
     dahinter und legt einen schwarzen Reifen um die Felge. */
  filter:
    drop-shadow(0 22px 30px rgba(0, 0, 0, .42))
    drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
.af-hero__caption {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  margin-top: 1.25rem;
  font-family: var(--wlf-font-display);
  text-transform: uppercase;
}
.af-hero__caption-code {
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--af-ton-1);
}
.af-hero__caption-note {
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--af-ton-3);
}

/* Auf dem Handy bleibt die Reihenfolge Marke → Produkt: Die Überschrift ist
   die Ansage, das Bild die Bestätigung. Ein `order` auf dem Freisteller hätte
   ohnehin nichts bewirkt — Rasterelement ist der Behälter des Gerüsts. */
@media (max-width: 899px) {
  .af-hero .wlf-hero__inner { gap: 2.5rem; }
  .af-hero__frame { max-width: min(21rem, 64vw); }
  .af-hero__caption { justify-content: center; margin-top: .9rem; }
}

/* ── Bewegung: zwei Einblendungen, ein Atem ───────────────────────
   Mehr braucht diese Seite nicht. Alles läuft einmal beim Laden ab,
   nur der Schein hinter der Felge bleibt in Bewegung — so langsam,
   dass man ihn spürt und nicht sieht. */
@keyframes af-auf {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes af-produkt-auf {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes af-atem {
  from { opacity: .62; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.06); }
}

/* BEWEGUNG 1 von 3 — die Textspalte kommt gestaffelt herein. */
.af-hero .wlf-hero__eyebrow,
.af-hero .wlf-hero__title,
.af-hero .wlf-hero__text,
.af-hero .wlf-hero__actions {
  animation: af-auf .75s cubic-bezier(.22, .61, .36, 1) both;
}
.af-hero .wlf-hero__title   { animation-delay: .08s; }
.af-hero .wlf-hero__text    { animation-delay: .16s; }
.af-hero .wlf-hero__actions { animation-delay: .24s; }

/* BEWEGUNG 2 von 3 — das Produkt wächst leicht ins Bild, der Schein atmet. */
.af-hero__product { animation: af-produkt-auf 1.1s cubic-bezier(.22, .61, .36, 1) both; }
.af-hero__halo    { animation: af-atem 11s ease-in-out 1.1s infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .af-hero .wlf-hero__eyebrow,
  .af-hero .wlf-hero__title,
  .af-hero .wlf-hero__text,
  .af-hero .wlf-hero__actions,
  .af-hero__product,
  .af-hero__halo { animation: none; opacity: 1; transform: none; }
  .af-header__nav a::after { transition: none; }
}

/* ═══ Fahrzeugsuche als Band unter dem Hero ═══════════════════════ */
/* Sie war eine Karte im Hero und hat die Komposition geteilt. Als Band
   ist sie das Erste unter der Marke — genauso auffindbar, aber sie
   nimmt dem Bild nichts weg. */
.af-fitband {
  background: var(--af-nacht-2);
  border-bottom: 1px solid var(--af-linie);
  color: var(--af-ton-1);
}
.af-fitband__inner {
  display: grid;
  gap: 1.1rem 3rem;
  align-items: center;
  padding-block: clamp(1.4rem, 3vw, 2rem);
}
@media (min-width: 960px) {
  .af-fitband__inner { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
}
.af-fitband__intro p { margin: 0; }
.af-fitband__title {
  font-family: var(--wlf-font-display);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--af-ton-1);
}
.af-fitband__hint {
  margin-top: .3rem !important;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--af-ton-3);
}

.af-fitband .wlf-fitment-search { margin: 0; background: none; border: 0; padding: 0; box-shadow: none; }
/* Der Baustein bringt seine eigene Überschrift mit — im Band wäre sie
   die dritte Ansage derselben Sache. */
.af-fitband .wlf-fitment-search__intro { display: none; }
.af-fitband .wlf-fitment-search__fields {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr 1fr;
  align-items: end;
}
@media (min-width: 620px) {
  .af-fitband .wlf-fitment-search__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
}
.af-fitband .wlf-field { display: flex; flex-direction: column; gap: .35rem; }
.af-fitband .wlf-field__label {
  font-family: var(--wlf-font-display);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--af-ton-3);
}
.af-fitband .wlf-field__input {
  width: 100%;
  box-sizing: border-box;
  padding: .8rem .9rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--af-linie);
  border-radius: 0;
  font-family: var(--wlf-font-display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--af-ton-1);
  transition: border-color .2s ease, background .2s ease;
}
.af-fitband .wlf-field__input::placeholder { color: rgba(255, 255, 255, .26); letter-spacing: .14em; }
.af-fitband .wlf-field__input:focus {
  outline: none;
  background: rgba(255, 255, 255, .07);
  border-color: var(--wlf-color-accent);
}
.af-fitband .wlf-fitment-search__submit {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 1.85rem;
  background: var(--wlf-color-accent);
  border: 1px solid var(--wlf-color-accent);
  border-radius: 0;
  font-family: var(--wlf-font-display);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #131313;
  cursor: pointer;
  white-space: nowrap;
  transition: background .22s ease;
}
@media (min-width: 620px) {
  .af-fitband .wlf-fitment-search__submit { grid-column: auto; }
}
.af-fitband .wlf-fitment-search__submit:hover { background: var(--wlf-color-accent-hover); }

/* ═══ Fußzeile ════════════════════════════════════════════════════ */
/* Ohne Metalltextur, mit Luft. Gold trägt nur die Spaltenköpfe und die
   Linie darüber; die Verweise bleiben ruhig und werden erst beim
   Überfahren golden. */
.af-footer {
  margin-top: 0;
  background: var(--af-nacht);
  border-top: 1px solid var(--af-linie);
  color: var(--af-ton-2);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
  position: relative;
}
.af-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--af-linie-gold) 22%, var(--af-linie-gold) 78%, transparent);
}

.af-footer .wlf-footer-grid {
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.af-footer .wlf-footer__brand-title {
  font-family: var(--wlf-font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--af-ton-1);
}
.af-footer .wlf-footer__brand-text {
  margin: .9rem 0 0;
  max-width: 26ch;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--af-ton-3);
}
.af-footer .wlf-footer-grid h3 {
  margin: 0 0 1.1rem;
  font-family: var(--wlf-font-display);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--wlf-color-accent);
}
.af-footer .wlf-footer-grid ul { display: flex; flex-direction: column; gap: .7rem; }
.af-footer .wlf-footer-grid a {
  font-size: .9rem;
  line-height: 1.4;
  color: var(--af-ton-2);
  text-decoration: none;
  transition: color .2s ease;
}
.af-footer .wlf-footer-grid a:hover { color: var(--wlf-color-accent); text-decoration: none; }

.af-footer-extra {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--af-linie);
  display: grid;
  gap: 1.75rem;
  align-items: center;
}
@media (min-width: 860px) {
  .af-footer-extra { grid-template-columns: minmax(0, 1fr) auto; }
}
.af-footer-logo { height: 46px; width: auto; opacity: .85; margin: 0 0 .9rem; }
.af-footer-brandblock p { margin: .3rem 0; font-size: .84rem; line-height: 1.6; color: var(--af-ton-3); }
/* Mit `.af-footer` davor, sonst gewinnt die allgemeinere `.wlf-site-footer a`
   weiter oben in dieser Datei — sie ist um eine Stufe spezifischer. */
.af-footer .af-footer-brandblock a { color: var(--af-ton-2); text-decoration: none; }
.af-footer .af-footer-brandblock a:hover { color: var(--wlf-color-accent); }

/* Die Zahlungszeichen brauchen im Band keinen zweiten Trennstrich und
   keinen weißen Kasten pro Marke — eine gemeinsame ruhige Reihe. */
.af-footer .af-payments {
  margin: 0;
  padding: 0;
  border: 0;
  justify-content: flex-start;
  gap: .5rem;
  color: var(--af-ton-3);
}
@media (min-width: 860px) { .af-footer .af-payments { justify-content: flex-end; } }
.af-footer .af-payments__label {
  font-family: var(--wlf-font-display);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-right: .35rem;
}
.af-footer .af-payments__mark {
  height: 26px;
  padding: .3rem .45rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, .92);
  box-shadow: none;
}

.af-footer .wlf-footer__bottom {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--af-linie);
  font-size: .76rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .32);
}