/* Fahrzeugmarken-Verzeichnis (verzeichnis.php) — baut auf chrome.css auf:
   Abschnitte, Karten und Pillen sind die der Startseite. Hier nur, was es
   dort nicht gibt: Brotkrumen, Markennavigation, Markenkacheln, Ratgebertext. */

.ff-verz-krumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  font-size: 13px;
  color: var(--ff-gray);
}
.ff-verz-krumen a {
  color: var(--ff-gray);
  text-decoration: none;
}
.ff-verz-krumen a:hover,
.ff-verz-krumen a:focus-visible { color: var(--ff-ink); text-decoration: underline; }
.ff-verz-krumen [aria-current] { color: var(--ff-ink); font-weight: 600; }

/* Markennavigation: je Zeile Felgen / Sommerräder / Winterräder mit Zoll-Pillen */
.ff-verz-nav {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--ff-card);
  border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius);
}
.ff-verz-nav__zeile {
  display: grid;
  grid-template-columns: 9rem 1fr;
  align-items: center;
  gap: 0.75rem;
}
.ff-verz-nav__titel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ff-ink);
}
.ff-verz-nav .ff-brand-tabs,
.ff-verz-blaettern { margin: 0; }
.ff-verz-nav .ff-brand-tabs__btn,
.ff-verz-blaettern .ff-brand-tabs__btn { text-decoration: none; }
.ff-verz-blaettern {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

/* Markenkacheln auf den Einstiegsseiten */
.ff-verz-marken {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
}
.ff-verz-marke {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.35rem 1.25rem;
  background: var(--ff-card);
  border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius);
  color: var(--ff-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ff-verz-marke:hover,
.ff-verz-marke:focus-visible { border-color: var(--ff-ink); transform: translateY(-2px); }
.ff-verz-marke__name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.ff-verz-marke__info { font-size: 12px; color: var(--ff-gray); font-variant-numeric: tabular-nums; }

.ff-verz-hinweis {
  margin: 1.25rem 0 0;
  max-width: 70ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ff-gray);
}

/* Ratgebertext der alten Kategorie */
.ff-verz-text {
  max-width: 72ch;
  color: var(--ff-ink);
  font-size: 15px;
  line-height: 1.7;
}
.ff-verz-text h2,
.ff-verz-text h3 {
  margin: 1.75em 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}
.ff-verz-text h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.ff-verz-text h3 { font-size: 1.15rem; }
.ff-verz-text > :first-child { margin-top: 0; }
.ff-verz-text p,
.ff-verz-text ul,
.ff-verz-text ol { margin: 0 0 1em; }
.ff-verz-text a { color: inherit; text-underline-offset: 3px; }

@media (max-width: 820px) {
  .ff-verz-nav { padding: 1rem; }
  .ff-verz-nav__zeile { grid-template-columns: 1fr; gap: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ff-verz-marke { transition: none; }
  .ff-verz-marke:hover { transform: none; }
}

/* ── Angebote (page-angebote.php): Fahrzeughinweis, Filterleiste, Leerzustand ── */
.ff-angebote__fahrzeug {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius);
  background: var(--ff-card);
  font-size: 14px;
  color: var(--ff-ink);
}
.ff-angebote__fahrzeug a { color: var(--ff-ink); font-weight: 600; text-underline-offset: 3px; }
.ff-angebote__filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius);
  background: var(--ff-card);
}
.ff-angebote__filter label { display: grid; gap: 0.35rem; min-width: 0; }
.ff-angebote__filter label span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ff-gray);
}
.ff-angebote__filter select {
  width: 100%;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1px solid var(--ff-line);
  border-radius: 12px;
  background: var(--ff-bg);
  color: var(--ff-ink);
  font-size: 14px;
}
.ff-angebote__filter .ff-btn { min-height: 44px; }
.ff-angebote__leer {
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--ff-line);
  border-radius: var(--ff-radius);
  text-align: center;
  color: var(--ff-gray);
}
.ff-angebote__leer p:last-child { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1rem; }
.ff-verz-blaettern span[aria-hidden] { align-self: center; color: var(--ff-gray); }
@media (max-width: 900px) {
  .ff-angebote__filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ff-angebote__filter .ff-btn { grid-column: 1 / -1; }
}

/* Angebote: Fahrzeugwahl (Leiste aus ff-fitment-banner) + aufklappbare Filter wie /felgen */
.ff-angebote__fahrzeugwahl { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
.ff-angebote__fahrzeugwahl .ff-angebote__fahrzeug { margin: 0; }
.ff-angebote__mehr { margin-bottom: 2rem; }
.ff-angebote__mehr > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--ff-line);
  border-radius: 999px;
  background: var(--ff-card);
  color: var(--ff-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.ff-angebote__mehr > summary::-webkit-details-marker { display: none; }
.ff-angebote__mehr[open] > summary { background: var(--ff-btn); color: var(--ff-btn-ink); border-color: var(--ff-btn); }
.ff-angebote__mehr-zahl {
  min-width: 1.3em;
  padding: 0 0.35em;
  border-radius: 999px;
  background: var(--ff-accent);
  color: #fff;
  font-size: 11px;
  text-align: center;
}
.ff-angebote__mehr .ff-angebote__filter { margin: 0.75rem 0 0; }

/* ═══ /angebote — Aufbau wie /felgen ═══════════════════════════════
   Kopfkarte, Filterzeile und Produktkarte kommen aus den /felgen-Regeln
   (konfigurator.css, shop.css, shop-scope.css, seite-felgen.css; Seite traegt
   body.ff-shopbereich). Hier nur, was es auf /felgen nicht gibt. */

/* Sortierung rechts, wo /felgen die Ansicht umschaltet — Feld wie die Filter */
.ff-shop-head-row select.ff-angebote-sort {
  flex: 0 0 auto; width: auto; min-width: 150px; margin-left: auto;
  padding: 8px 28px 8px 12px; border-radius: 10px;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text);
  background-color: var(--bg); border: 1px solid var(--border);
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2386868B' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.ff-shop-head-row select.ff-angebote-sort:focus { outline: none; border-color: var(--accent); }
.ff-shop-head-row select.ff-angebote-sort:focus-visible { outline: 2px solid #8A6508; outline-offset: 2px; }
.ff-seite-angebote .ff-shop-filters a.ff-filter-reset { text-decoration: none; }
.ff-seite-angebote #ffb-wrap { margin-bottom: 16px; }
@media (max-width: 768px) {
  .ff-shop-head-row select.ff-angebote-sort { min-width: 0; font-size: 16px; min-height: 40px; }
  .ff-seite-angebote .ff-filter-fitstock { grid-column: 1 / -1; }
}

/* Inserate haben echte Fotos (oft dunkel) statt weisser Freisteller wie auf
   /felgen — deshalb heller Grund unter derselben gruenen Schrift. */
.ff-angebote-grid .ff-fit-badge.is-frei { background: rgba(255, 255, 255, .92); color: #1b8a3a; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }

/* Karten wie /felgen — Pflichtangabe einmal unter dem Raster, nicht je Karte */
.ff-angebote-grid .ff-pcard__tax { display: none; }
.ff-seite-angebote .ff-grid-preishinweis { margin: 1.25rem 0 0; font-size: 12px; color: var(--text3, #6b7280); }
.ff-seite-angebote .ff-grid-preishinweis a { color: inherit; }

/* Inserat-Karten im /felgen-Format (template-parts/ff-inserat-karte.php):
   echte Fotos fuellen die Bildflaeche, Streichpreis klein darunter. */
.ff-inserat-karte .kfg__pcard-img img { object-fit: cover; width: 100%; height: 100%; }
.ff-inserat-karte .ff-pcard__title .kfg__pcard-swatch-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-inserat-karte .ff-inserat-karte__alt { font-size: 11px; color: var(--text3); }

/* Inserat-Karte: Produkttitel 2 Zeilen, gleiche Hoehe in jeder Karte */
.ff-inserat-karte .ff-inserat-karte__titel {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; white-space: normal; min-height: 2.9em; line-height: 1.45;
}