/* Startseite (front-page.php). Grundlage ist velodeals.css, hier nur, was die Tafel inline setzt oder WordPress anders ausgibt. */

/* Einstieg: Etikett in Lime, Erklärsatz hell (auf der Tafel inline) */
.hero-b .lab{color:var(--c-lime)}
.hero-b .lead{color:var(--c-paper)}

/* Partner-Logos im Einstieg (Tafel „Partner-Logos“, Variante C); Kacheln .lgt aus velodeals-2.css, kleiner. Handy: drei Logos. */
.hlogos{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:28px}
.hlogos .lab{margin:0 6px 0 0;color:var(--c-mute-on-ink)}
.hlogos .lgt{height:48px;width:96px;padding:8px 10px;border-radius:10px}
.hlogos .lgt img{max-height:30px;max-width:76px}
.hlogos a{font-weight:700;font-size:14px;border-bottom:2px solid var(--c-lime);white-space:nowrap}
@media (max-width:699px){.hlogos .lgt:nth-of-type(n+4){display:none}.hlogos .lab{flex-basis:100%;margin:0}}

/* Score-Band und Abschnittsköpfe (auf der Tafel inline) */
.band-text{color:var(--c-mute-on-ink);margin:14px 0 22px;max-width:48ch}
.cat-head{margin-bottom:20px}
.how-head{margin-bottom:24px}
section.pt0{padding-top:0}
.sechead-text{margin-top:10px}

/* WordPress gibt width/height an Bildern aus; die Höhe kommt hier aus dem Seitenverhältnis */
.example img,.rowi img,.catrow img{height:auto}
.example{color:inherit}
.example img{margin-bottom:10px}
.catrow img.produkt{background:var(--c-photo);object-fit:contain}
.rowi .leerbild{display:block;aspect-ratio:4/3;background:var(--c-photo);border-radius:8px}
.dealer{color:inherit}
a.dealer{transition:border-color .16s var(--ease-out)}
a.dealer:hover{border-color:var(--c-mute-on-ink)}

/* Was fährst du? Auf dem Handy passen Bild, Wort und Anzahl sonst nicht in eine Zeile */
@media (max-width:599px){
  .catrow .ci{gap:14px;min-width:0}
  .catrow img{width:96px}
  .catrow b{font-size:30px;white-space:nowrap}
}