/* ==========================================================
   Fahrradshop24 – Frontend-Design
   Quelle: Frontpage Weidemann.html (Michael Reiner), unverändert
   übernommen. Enthält alle Style-Blöcke aus der Design-Vorlage
   (Basis-Layout, Dark-Theme-Overrides, Flat-Design-Overrides,
   Mobile-Feinschliff) in ihrer ursprünglichen Reihenfolge, damit
   die Kaskade exakt wie im Entwurf greift.
   ========================================================== */

/* ==========================================================
   basis-layout
   ========================================================== */
:root {
  --ink: #111315;
  --muted: #656b70;
  --soft: #eceeef;
  --soft-2: #dfe2e4;
  --line: rgba(17, 19, 21, .12);
  /* Orange Markenwelt (2026-09-02). Abgeleitet vom dunkleren Orange
     des Fahrradshop24-Logos; ersetzt das vorherige, deutlich hellere
     #ff6418 / #d94700. Diese beiden Zeilen sind die EINZIGEN Stellen
     im Theme, an denen der Ton als Zahl steht – alles andere holt ihn
     über var(--accent) / var(--accent-dark) oder führt ihn nur als
     Rückfallwert mit. Ein späterer Wechsel ist damit eine Änderung an
     zwei Zeilen.

     --accent      Grundton für Flächen, Symbole und Akzente
     --accent-dark Hover-Zustand orangefarbener Schaltflächen

     NICHT hierher gehört das Sale-Rot (--sale) – das ist eine eigene
     Bedeutungsfarbe und bleibt unverändert. */
  --accent: #d24614;
  --accent-dark: #b93800;

  /* Hero-Akzent (2026-09-02). Das Symbol rechts im dunklen Hero-Banner
     der Shopbereiche ist bewusst NICHT orange: Auf der dunklen Fläche
     verschwindet der Markenton, und er würde dieselbe Bedeutung tragen
     wie die orangefarbenen Kategorie-Icons darunter. Das Gelb trennt
     beide Ebenen sichtbar voneinander.

     #ffe94a ist hsl(52 100% 65%) – ein warmes, sehr helles Gelb.
     Bewusst nicht reines #ffff00 (hsl 60): das kippt auf dunklem Grund
     ins Grünliche. Bewusst hoch gesättigt und hell, damit es leuchtet.

     Diese Zeile ist die EINZIGE Stelle, an der der Ton als Zahl steht;
     die Regeln in shop.css holen ihn über
     var(--fs24-hero-icon, #ffe94a). Der Rückfallwert steht dort nur für
     den Fall, dass frontend.css einmal ohne diesen :root-Block
     ausgeliefert wird (sie wird inline optimiert zusammengefasst).

     AUSDRÜCKLICH NICHT betroffen: die Kategorie- und
     Unterkategorie-Icons der Karten – sie bleiben orange. */
  --fs24-hero-icon: #ffe94a;
  --forest: #23272a;
  --sale: #f04438;
  --shadow: 0 26px 70px rgba(10, 12, 13, .16);
  --radius: 24px;

  /* Einheitliche Eckenrundung ALLER klickbaren Hauptbuttons (Auftrag
     2026-09-02 "globaler Button-Stil"). Vorher standen die Buttons in
     Vollrund-/Pillenform (border-radius:999px), Formularknöpfe dagegen
     bei 10px und der Warenkorb-Knopf bei 12px - drei Formen nebeneinander.

     10px ist bewusst kein neuer Wert, sondern der bereits im Shop
     verwendete: Newsletter-Absenden und der Suchknopf im Blocksy-Header
     standen schon vorher auf 10px. Damit bleibt der Rahmen rechteckig
     mit ruhig gerundeten Ecken, ohne hart eckig zu wirken.

     Diese Zeile ist die EINZIGE Stelle, an der der Wert als Zahl steht;
     alle Buttonregeln (auch in product.css, leasing.css,
     service-pages.css und versand-info.css) holen ihn über
     var(--fs24-btn-radius, 10px). Der Rueckfallwert steht dort nur fuer
     den Fall, dass eine Datei einmal ohne diesen :root-Block ausgeliefert
     wird (frontend.css wird inline optimiert zusammengefasst).

     AUSDRUECKLICH NICHT betroffen: Badges, Kicker, Rabattmarken, Tags,
     Zaehlerkreise und Filter-Chips - runde Marker sind dort eine eigene
     Bedeutung und keine Schaltflaeche. */
  --fs24-btn-radius: 10px;
  --max: 1540px;
  --paper: #f4f5f5;
  --metal-0: #f7f7f6;
  --metal-1: #f1f2f2;
  --metal-2: #e6e8e8;
  --metal-3: #73797d;
  --graphite-0: #24282b;
  --graphite-1: #15181a;
  --graphite-2: #090b0c;
  --shadow-soft: 0 14px 40px rgba(10, 12, 13, .10);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg {
  display: block;
  max-width: 100%;
}
button, input {
  font: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
.container {
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-primary {
  background: var(--accent);
}
.btn-primary:hover {
  background: #e5ff18;
}
.btn-dark {
  background: var(--ink);
}

.icon {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar {
  background: var(--ink);
  color: #fff;
  font-size: .83rem;
}
.topbar-inner {
  min-height: 37px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.topbar-items {
  display: flex;
  gap: 26px;
  align-items: center;
}
.topbar span {
  opacity: .86;
}
.topbar strong {
  color: var(--accent);
}
.site-header {
  position: sticky;
  z-index: 60;
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid rgba(223,228,221,.9);
  backdrop-filter: blur(14px);
}
.header-main {
  min-height: 86px;
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) auto;
  align-items: center;
  gap: 34px;
}




.search {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search:focus-within {
  border-color: #aeb7b0;
  box-shadow: 0 0 0 4px rgba(217,242,15,.22);
}
.search svg {
  margin-left: 18px;
  color: #6a736d;
  flex: 0 0 auto;
}
.search input {
  width: 100%;
  min-height: 48px;
  border: 0;
  outline: 0;
  padding: 0 14px;
  background: transparent;
}
.search button {
  margin-right: 4px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--fs24-btn-radius, 10px);
  background: var(--ink);
  font-weight: 800;
  cursor: pointer;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.action-btn {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.badge {
  position: absolute;
  top: -4px;
  right: -2px;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 99px;
  color: #111;
  font-size: .65rem;
  font-weight: 900;
}
.menu-toggle {
  display: none;
}
.main-nav {
  border-top: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  min-height: 53px;
  gap: 32px;
}
.nav-item {
  position: relative;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 53px;
  font-size: .91rem;
  font-weight: 830;
}
.nav-link:hover {
  color: var(--forest);
}
.nav-link.sale {
  color: var(--sale);
}
.mega-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 1px);
  width: min(900px, 80vw);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 0 0 18px 18px;
  background: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: .2s ease;
}
.nav-item:hover .mega-menu,
    .nav-item:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-menu h4 {
  margin: 0 0 12px;
  font-size: .9rem;
}
.mega-menu a {
  display: block;
  padding: 5px 0;
  color: var(--muted);
  font-size: .88rem;
}
.mega-menu a:hover {
  color: var(--ink);
}
.mega-menu .mega-feature {
  position: relative;
  min-height: 248px;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  color: #fff;
  background: #17392f;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mega-feature-image {
  width: 100%;
  height: 112px;
  padding: 9px 8px 5px;
  object-fit: contain;
  object-position: center;
  background: #f4f5f2;
  transition: transform .35s ease;
}
.mega-feature:hover .mega-feature-image {
  transform: scale(1.025);
}
.mega-feature-content {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  padding: 13px 16px 15px;
  background: linear-gradient(145deg, #17392f 0%, #214f40 100%);
}
.mega-menu .mega-feature:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(18, 54, 43, .24);
}
.mega-feature-label {
  color: #ff7a1a;
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.mega-feature-discount {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 11px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 999px;
  color: #fff;
  background: #e95420;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  font-size: 1.15rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.035em;
}
.mega-feature-title {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: .96rem;
  font-weight: 850;
  line-height: 1.16;
}
.mega-feature-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}
.mega-feature-price del {
  color: rgba(255,255,255,.58);
  font-size: .72rem;
}
.mega-feature-price strong {
  color: #fff;
  font-size: 1.16rem;
  line-height: 1;
}
.mega-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 11px;
  color: #ffb174;
  font-size: .75rem;
  font-weight: 900;
}
.hero {
  padding: 26px 0 0;
}


.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.9);
  font-size: .68rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .035em;
  text-shadow: 0 10px 24px rgba(0,0,0,.24);
}
.hero-kicker::before {
  display: none;
}
.hero h1 {
  max-width: 640px;
  margin: 18px 0 18px;
  font-size: clamp(2.45rem, 4.3vw, 4.6rem);
  line-height: .96;
  letter-spacing: -.045em;
  font-weight: 820;
}

.hero p {
  max-width: 610px;
  margin: 0;
  color: #5b645e;
  font-size: clamp(1.03rem, 1.4vw, 1.22rem);
}




.hero-visual::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
}



.categories {
  padding: 84px 0 32px;
}
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 30px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 850;
  white-space: nowrap;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.category-card {
  position: relative;
  min-height: 420px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--soft);
  transition: transform .25s ease, box-shadow .25s ease;
}
.category-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
.category-card:nth-child(2) {
  background: #e9efe8;
}
.category-card:nth-child(3) {
  background: #f1eee7;
}
.category-card:nth-child(4) {
  background: #e6ecee;
}
.category-card h3 {
  margin: 0;
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  letter-spacing: -.018em;
  font-weight: 740;
}
.category-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.36;
}
.category-card .round-arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
}

.usp-wrap {
  padding: 20px 0 30px;
}
.usp-wrap .usp-bar {
  width: min(calc(100% - 160px), calc(var(--max) - 160px));
  margin: 0 auto;
}
.usp-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.usp-item {
  min-height: 110px;
  padding: 22px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: center;
  border-right: 1px solid var(--line);
}
.usp-item:last-child {
  border-right: 0;
}
.usp-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--soft);
  color: var(--forest);
}
.usp-item strong {
  display: block;
  font-size: .95rem;
}
.usp-item small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

/* ==========================================================
   H1 der Startseite (Auftrag "USP-Leiste um echte H1 ergänzen") –
   erstes Kind von ".usp-bar" (siehe front-page.php), "grid-column:
   1/-1" gibt ihr eine eigene volle Zeile oberhalb der vier USP-Punkte,
   unabhängig von der jeweils aktiven Spaltenanzahl (4 Spalten Desktop,
   2 Spalten ≤1120px, 1 Spalte ≤680px – ".usp-bar"s
   "grid-template-columns" bleibt dabei komplett unangetastet).
   Farbe/Gewicht bewusst nah an ".usp-item strong" (Zeile ~511) statt
   einer eigenen neuen Hero-Typografie – "nur etwas größer als die
   USP-Titel", keine 40-50px-Hero-H1. "padding-left/-right" gleicht
   das fehlende Innenpolster von ".usp-bar" selbst (die Spur/Border-
   Fläche hat kein eigenes Padding, nur die einzelnen ".usp-item"
   tragen ihr eigenes) an das erste Item an, damit H1-Text und
   Icon/Text der ersten Kachel links sauber fluchten. */
.usp-heading {
  grid-column: 1 / -1;
  margin: 0 0 8px;
  padding: 16px 18px 0;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 780;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

@media (max-width: 1120px) {
  .usp-heading {
    padding: 14px 16px 0;
  }
}

@media (max-width: 680px) {
  .usp-heading {
    padding: 12px 14px 0;
    margin-bottom: 6px;
    font-size: 1.2rem;
    line-height: 1.2;
  }
}

.products {
  padding: 82px 0;
  background: var(--soft);
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: transform .22s ease, box-shadow .22s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.product-media {
  position: relative;
  aspect-ratio: 1.12;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 14px;
  background: #f4f6f2;
  overflow: hidden;
}
.product-media svg {
  width: 112%;
}
.discount {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 3;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--sale);
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
}
.heart {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.product-info {
  padding: 18px 6px 7px;
}
.stock {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #247247;
  font-size: .82rem;
  font-weight: 750;
}
.stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fac68;
  box-shadow: 0 0 0 4px rgba(47,172,104,.12);
}
.price-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.price del {
  color: #929994;
  font-size: .8rem;
}
.mini-cart {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}
.size-row {
  display: flex;
  gap: 5px;
  margin-top: 13px;
}
.size-row span {
  min-width: 28px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
  color: #59615c;
  font-size: .72rem;
}
.service {
  padding: 96px 0;
}
.service-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 24px;
}
.service-visual {
  position: relative;
  min-height: 570px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(180deg, rgba(13,31,25,.05), rgba(13,31,25,.85)),
        linear-gradient(135deg, #31564b, #102921);
}
.service-visual::before,
    .service-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
}
.service-visual::before {
  width: 540px;
  height: 540px;
  right: -170px;
  top: -120px;
}
.service-visual::after {
  width: 320px;
  height: 320px;
  left: -100px;
  bottom: -120px;
}

.service-visual h3 {
  position: relative;
  z-index: 2;
  max-width: 510px;
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.05em;
}
.service-visual p {
  position: relative;
  z-index: 2;
  max-width: 530px;
  margin: 16px 0 0;
  color: rgba(255,255,255,.76);
}
.service-content {
  padding: clamp(32px, 5vw, 72px);
  border-radius: 24px;
  background: #f4f5f1;
}
.service-list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.service-point {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
}
.service-point .num {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent);
  font-weight: 900;
  font-size: .88rem;
}
.service-point h4 {
  margin: 0 0 4px;
  font-size: .92rem;
  line-height: 1.25;
}
.service-point p {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.4;
}



.brand-logo:hover {
  background: var(--soft);
  filter: none;
}
.advice {
  padding: 0 0 96px;
}
.advice-box {
  position: relative;
  min-height: 420px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  overflow: hidden;
  border-radius: 24px;
  background: var(--accent);
}
.advice-copy {
  padding: clamp(40px, 6vw, 82px);
}
.advice-copy p {
  max-width: 620px;
  margin: 19px 0 28px;
  font-size: 1.08rem;
}
.advice-art {
  position: relative;
  background: #162f27;
  overflow: hidden;
}
.advice-art::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  right: -130px;
  top: -100px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
}

.newsletter {
  padding: 52px 0;
  border-top: 1px solid var(--line);
  background: #f6f7f4;
}
.newsletter-inner {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 560px);
  gap: 38px;
  align-items: center;
}
.newsletter p {
  margin: 7px 0 0;
  color: var(--muted);
}
.newsletter-form {
  display: flex;
  gap: 10px;
}
.newsletter-form input {
  min-height: 52px;
  width: 100%;
  padding: 0 18px;
  border: 1px solid #cbd2cc;
  border-radius: 999px;
  outline: 0;
  background: #fff;
}
.site-footer {
  padding: 68px 0 30px;
  color: rgba(255,255,255,.78);
  background: #111713;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 42px;
}

.footer-brand p {
  max-width: 370px;
  margin: 20px 0;
}
.footer-contact {
  display: grid;
  gap: 7px;
  font-size: .92rem;
}
.footer-col h4 {
  margin: 0 0 16px;
  font-size: .92rem;
}
.footer-col a {
  display: block;
  padding: 5px 0;
  font-size: .87rem;
}
.footer-col a:hover {
  color: var(--accent);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8rem;
}
.payment-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.payment-row span {
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 5px;
  color: rgba(255,255,255,.8);
}
@media (max-width: 1120px) {
  .header-main {
    grid-template-columns: auto 1fr auto;
    gap: 18px;
  }
  .search button {
    display: none;
  }
  .category-grid, .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .usp-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .usp-item:nth-child(2) {
    border-right: 0;
  }
  .usp-item:nth-child(-n/**/+2) {
    border-bottom: 1px solid var(--line);
  }

  .footer-grid {
    grid-template-columns: 1.4fr repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  .topbar-items span:nth-child(n/**/+3) {
    display: none;
  }
  .header-main {
    min-height: 72px;
  }
  .menu-toggle {
    display: grid;
  }
  .header-actions .account, .header-actions .heart-action {
    display: none;
  }
  .main-nav {
    display: none;
  }
  .main-nav.open {
    display: block;
  }
  .nav-inner {
    min-height: 0;
    display: block;
  }
  .nav-link {
    width: 100%;
    min-height: 44px;
    justify-content: space-between;
  }
  .mega-menu {
    display: none;
  }
  .hero-shell, .service-grid, .advice-box {
    grid-template-columns: 1fr;
  }



  .service-visual {
    min-height: 500px;
  }
  .advice-art {
    min-height: 330px;
  }
  .newsletter-inner {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .container {
    width: min(calc(100% - 24px), var(--max));
  }
  .topbar-inner {
    justify-content: center;
  }
  .topbar-items {
    gap: 0;
  }
  .topbar-items span:not(:first-child), .topbar .top-help {
    display: none;
  }
  .header-main {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }



  .search {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-bottom: 12px;
  }
  .header-main {
    padding-top: 11px;
  }
  .action-btn {
    width: 40px;
    height: 40px;
  }
  .hero {
    padding-top: 12px;
  }



  .hero h1 {
    max-width: 640px;
    margin: 18px 0 18px;
    font-size: clamp(2.45rem, 4.3vw, 4.6rem);
    line-height: .96;
    letter-spacing: -.045em;
    font-weight: 820;
  }

  .section-head {
    flex-direction: column;
  }
  .categories {
    padding-top: 62px;
  }
  .category-grid, .product-grid, .usp-bar, .brand-strip {
    grid-template-columns: 1fr;
  }
  .category-card {
    min-height: 360px;
  }
  .usp-item {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .usp-item:last-child {
    border-bottom: 0;
  }
  .product-card {
    max-width: 470px;
    width: 100%;
    margin-inline: auto;
  }
  .service, .products {
    padding: 68px 0;
  }
  .service-content {
    padding: 28px 20px;
  }
  .service-visual {
    min-height: 430px;
    padding: 24px;
  }
  .service-point {
    grid-template-columns: 42px 1fr;
  }
  .service-point .num {
    width: 42px;
    height: 42px;
  }
  .newsletter-form {
    flex-direction: column;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-bottom {
    flex-direction: column;
  }
}

.btn-primary {
  background: linear-gradient(135deg, #ff9c35 0%, #f35f16 100%);
  color: #111;
  box-shadow: 0 10px 24px rgba(243, 95, 22, .22);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #ffad52 0%, #ff6b1b 100%);
}
.badge {
  background: var(--accent);
}
.search:focus-within {
  box-shadow: 0 0 0 4px rgba(255,122,26,.18);
}
.hero {
  padding: 28px 0 0;
}

.hero-service-card::after {
  content: "24";
  position: absolute;
  right: 18px;
  top: 8px;
  color: rgba(255,255,255,.055);
  font-size: 8rem;
  font-weight: 950;
  line-height: 1;
}

.brand-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.brand-slider-footer > div:first-child {
  display: grid;
  gap: 4px;
}

.slider-arrow:hover {
  background: rgba(255,122,26,.86);
  border-color: transparent;
}

.slider-dot.is-active {
  width: 27px;
  background: #ff7a1a;
}
.category-card:hover .round-arrow,
    .text-link:hover span {
  background: #ffeadb;
}
.service-point .num {
  background: linear-gradient(135deg, #ff9c35, #f35f16);
}
.advice-box {
  background: linear-gradient(135deg, #ff9c35 0%, #f35f16 100%);
}

@media (max-width: 680px) {
  .brand-slider-footer > div:first-child {
    max-width: 58%;
  }
}

body {
  background: #fff;
}
.topbar {
  background: #080a09;
}
.topbar strong {
  color: #ff7b22;
}
.site-header {
  background: rgba(11, 13, 12, .97);
  border-bottom-color: rgba(255,255,255,.11);
}
.header-main {
  min-height: 74px;
}


.search {
  border-color: rgba(255,255,255,.18);
  background: #1a1d1b;
}
.search svg {
  color: rgba(255,255,255,.66);
}
.search input::placeholder {
  color: rgba(255,255,255,.62);
}
.search button {
  background: #050606;
}
.action-btn {
  color: #fff;
  border-color: rgba(255,255,255,.2);
  background: #151817;
}
.badge {
  border-color: #0b0d0c;
}
.main-nav {
  border-top-color: rgba(255,255,255,.11);
}
.nav-link {
  color: rgba(255,255,255,.91);
}
.nav-link:hover {
  color: #ff8a3d;
}
.nav-link.sale {
  color: #ff6a14;
}
.hero {
  padding: 14px 0 0;
}
.hero-feature,
    .hero-service-card {
  min-height: 520px;
  border-radius: 24px;
}
.hero-feature > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.hero-feature .hero-kicker::before {
  display: none;
}

.categories {
  padding: 18px 0 38px;
}

.action-category-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.action-category-card {
  min-height: 255px;
  padding: 22px;
  justify-content: flex-end;
  color: #fff;
  background: #1a1c1b;
}
.action-category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.04) 28%, rgba(0,0,0,.78) 100%);
}
.action-category-card > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.action-category-card .category-copy {
  position: relative;
  z-index: 2;
  padding-right: 34px;
}
.action-category-card .round-arrow {
  position: absolute;
  right: 17px;
  bottom: 17px;
  z-index: 2;
  width: 38px;
  height: 38px;
  color: #111;
}
.products {
  padding: 76px 0;
}
.product-media {
  padding: 0;
  aspect-ratio: 1.48;
  background: #e9ebe7;
}
.product-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  background: #fff;
  transition: transform .45s ease;
}
.mini-cart:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.product-card:hover .product-photo {
  transform: scale(1.035);
}
.service-visual {
  padding: 0;
  isolation: isolate;
  background: #17211d;
}
.service-visual::before {
  inset: 0;
  width: auto;
  height: auto;
  right: 0;
  top: 0;
  border: 0;
  border-radius: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(4,7,6,.86));
}
.service-visual::after {
  display: none;
}
.service-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-visual-copy {
  position: relative;
  z-index: 2;
  padding: 36px;
  margin-top: auto;
}
.advice-art {
  min-height: 430px;
}
.advice-art::before {
  z-index: 1;
}
.advice-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.eyebrow {
  margin: 0 0 8px;
  color: var(--forest);
  font-size: .68rem;
  font-weight: 720;
  letter-spacing: .04em;
  text-transform: none;
}
.text-link:hover {
  color: #e8530d;
}
.newsletter {
  background: #f4f4f1;
}
@media (max-width: 1180px) {
  .action-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .action-category-card:nth-child(n/**/+4) {
    min-height: 225px;
  }
}
@media (max-width: 900px) {
  .hero-feature, .hero-service-card {
    min-height: 470px;
  }

  .action-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  .hero-feature {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    border-radius: 32px;
    isolation: isolate;
    background: #e7e4dc;
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
  }
  .action-category-card {
    min-height: 260px;
  }
  .products {
    padding: 62px 0;
  }
}

.action-category-grid {
  grid-template-columns: repeat(3, 1fr);
}
.action-category-card {
  min-height: 310px;
}

@media (max-width: 1180px) {
  .action-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  .action-category-grid {
    grid-template-columns: 1fr;
  }
  .action-category-card {
    min-height: 270px;
  }
}
.brand-logo-panel, .footer-logo-panel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2b2e2d;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
}
.brand-logo-panel {
  width: 300px;
}
.footer-logo-panel {
  width: min(100%, 380px);
  min-height: 92px;
  padding: 8px 10px;
}
.brand-logo-panel img, .footer-logo-panel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 680px) {
  .brand-logo-panel {
    width: 195px;
    height: 52px;
    padding: 4px 6px;
  }
}

html {
  background: #090b0c;
}
body {
  color: var(--ink);
  background: radial-gradient(circle at 15% 7%, rgba(255,255,255,.85), transparent 28%),
        linear-gradient(180deg, #f7f8f8 0%, #eceeef 35%, #f7f8f8 100%);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.006em;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .18;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0, rgba(255,255,255,.6) 1px, transparent 1px, transparent 5px),
        linear-gradient(115deg, transparent 0 45%, rgba(255,255,255,.42) 50%, transparent 55% 100%);
  background-size: 8px 100%, 180% 180%;
}
::selection {
  color: #fff;
  background: var(--accent);
}
a, button {
  -webkit-tap-highlight-color: transparent;
}
.container {
  width: min(calc(100% - 52px), var(--max));
}
.section-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.15vw, 2.45rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  font-weight: 760;
}
.section-copy {
  margin: 12px 0 0;
  max-width: 620px;
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.45;
}
/* Sektions-Eyebrow ("Ausgewählte Produkte"). Kleine orange SCHRIFT auf
   hellem Grund, deshalb --accent-dark – dieselbe Regel wie beim
   ".dealer-kicker" weiter unten (Entscheidung Friedemann, 2026-09-02):

     #ff963a (ursprünglich)  2,00:1
     --accent                4,19:1  – knapp unter AA
     --accent-dark           5,35:1  – über AA, auf beiden Breiten

   Der Grundton --accent bleibt den orangen FLÄCHEN und Primary-Buttons
   vorbehalten, auf denen weiße Schrift steht.

   Die beiden mitaufgeführten Klassen ".slider-overline" und
   ".hero-service-label" stammen aus der alten Designvorlage und
   kommen im Markup nicht mehr vor – sie ändern sich mit, ohne dass
   irgendwo etwas sichtbar anders wird. Nicht entfernt: unbenutzt
   heißt hier nicht nachweislich überflüssig.

   NICHT hierher gehören die hellen Orangetöne auf dunklem Grund
   (Topbar, USP-Band, Flow-Kicker) – die bleiben hell, weil die
   dunklen Töne dort den Kontrast verschlechtern würden. */
.eyebrow,
    .slider-overline,
    .hero-service-label {
  position: relative;
  z-index: 1;
  color: var(--accent-dark);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .04em;
  text-transform: none;
}
.section-head {
  align-items: end;
  margin-bottom: 38px;
}
.text-link {
  min-height: 46px;
  gap: 11px;
  padding-left: 18px;
  border: 1px solid rgba(17,19,21,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.text-link:hover {
  color: var(--ink);
  border-color: rgba(210, 70, 20,.35);
  background: #fff;
  transform: translateY(-2px);
}
.text-link:hover span {
  background: linear-gradient(145deg, #ff8a47, #ef4f00);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--fs24-btn-radius, 10px);
  font-weight: 720;
  font-size: .96rem;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 17px 36px rgba(10,12,13,.2);
}
.btn-primary {
  color: #fff;
  background: linear-gradient(110deg, rgba(255,255,255,.2), transparent 28% 70%, rgba(255,255,255,.12)),
        linear-gradient(145deg, #ff8a3d 0%, #f35308 48%, #cb3800 100%);
  border-color: rgba(255,255,255,.12);
}
.btn-primary:hover {
  filter: brightness(1.07);
}
.btn-dark {
  color: #fff;
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(120deg, rgba(255,255,255,.14), transparent 30% 75%, rgba(255,255,255,.06)),
        linear-gradient(145deg, #34393d, #0e1012 70%);
}
.btn-light {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.92);
  color: #111;
}
.topbar {
  position: relative;
  color: rgba(255,255,255,.77);
  background: linear-gradient(90deg, rgba(255,255,255,.07), transparent 20% 80%, rgba(255,255,255,.05)),
        #080a0b;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .76rem;
  letter-spacing: .015em;
}
.topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210, 70, 20,.9), transparent);
}
.topbar-inner {
  min-height: 34px;
}
.topbar strong {
  color: #ff7b38;
}
.site-header {
  top: 0;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: rgba(12, 14, 15, .92);
  box-shadow: 0 14px 42px rgba(0,0,0,.16);
  backdrop-filter: blur(24px) saturate(130%);
}
.header-main {
  min-height: 82px;
  grid-template-columns: auto minmax(280px, 1fr) auto;
  gap: 32px;
}
.brand-logo-panel {
  position: relative;
  width: 246px;
  height: 58px;
  padding: 5px 8px;
  border: 1px solid rgba(17,19,21,.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}
.brand-logo-panel::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
  pointer-events: none;
}
.search {
  max-width: 780px;
  justify-self: center;
  width: 100%;
  min-height: 50px;
  border-color: rgba(255,255,255,.13);
  border-radius: 14px;
  background: linear-gradient(105deg, rgba(255,255,255,.08), transparent 25% 80%, rgba(255,255,255,.04)),
        #1a1d1f;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.06), inset 0 -1px 1px rgba(0,0,0,.35);
}
.search:focus-within {
  border-color: rgba(255,122,56,.7);
  box-shadow: 0 0 0 4px rgba(210, 70, 20,.13), inset 0 1px 1px rgba(255,255,255,.08);
}
.search svg {
  color: rgba(255,255,255,.55);
}
.search input {
  color: #fff;
}
.search input::placeholder {
  color: rgba(255,255,255,.48);
}
.search button {
  min-height: 42px;
  border-radius: var(--fs24-btn-radius, 10px);
  color: #fff;
  background: linear-gradient(145deg, #ff7f36, #d83d00);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.header-actions {
  gap: 9px;
}
.action-btn {
  width: 45px;
  height: 45px;
  color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.13);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.01)),
        #171a1c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.action-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(210, 70, 20,.5);
  background: #222629;
}
.badge {
  top: -6px;
  right: -5px;
  color: #fff;
  border-color: #101214;
  background: linear-gradient(145deg, #ff8a45, #dd4300);
  box-shadow: 0 5px 12px rgba(0,0,0,.25);
}
.main-nav {
  border-top: 1px solid rgba(255,255,255,.075);
  background: rgba(4,5,6,.44);
}
.nav-inner {
  min-height: 48px;
  gap: clamp(17px, 2vw, 34px);
}
.nav-link {
  min-height: 48px;
  color: rgba(255,255,255,.84);
  font-size: .82rem;
  letter-spacing: .005em;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transition: right .25s ease;
}
.nav-link:hover {
  color: #fff;
}
.nav-link:hover::after {
  right: 0;
}
.nav-link.sale {
  color: #ff7840;
}
.mega-menu {
  top: 100%;
  width: min(980px, 88vw);
  padding: 32px;
  color: var(--ink);
  border: 1px solid rgba(17,19,21,.12);
  border-radius: 0 0 24px 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(226,229,231,.98));
  box-shadow: 0 35px 80px rgba(0,0,0,.25);
  backdrop-filter: blur(20px);
}
.mega-menu h4 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.mega-menu a:not(.mega-feature):hover {
  color: var(--accent-dark);
}
.mega-feature {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: #15181a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.mega-feature-content {
  background: linear-gradient(125deg, rgba(255,255,255,.08), transparent 35%),
        linear-gradient(145deg, #31363a, #111315);
}
.mega-feature-label,
    .mega-feature-cta {
  color: #ff8b49;
}
.hero {
  position: relative;
  padding: 22px 0 0;
  background: #0b0d0e;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 420px;
  opacity: .85;
  background: radial-gradient(circle at 17% 20%, rgba(210, 70, 20,.14), transparent 28%),
        linear-gradient(180deg, #0b0d0e, #111416);
  pointer-events: none;
}
.hero .container {
  position: relative;
  z-index: 1;
}
.hero-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}
.hero-feature,
    .hero-service-card {
  min-height: 650px;
  border-radius: 30px;
}
.hero-feature {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-radius: 32px;
  isolation: isolate;
  background: #e7e4dc;
}
.hero-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .45;
  background: linear-gradient(120deg, rgba(255,255,255,.13), transparent 20% 82%, rgba(255,255,255,.04)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px);
  pointer-events: none;
}
.hero-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,14,16,.18) 0%, rgba(10,14,16,.08) 28%, rgba(10,14,16,.14) 58%, rgba(10,14,16,.48) 100%),
        linear-gradient(90deg, rgba(10,14,16,.42) 0%, rgba(10,14,16,.16) 26%, rgba(10,14,16,0) 50%);
}
.hero-feature > img {
  filter: saturate(.9) contrast(1.04);
  transform: scale(1.01);
}
.hero-feature-copy {
  position: relative;
  z-index: 2;
  width: min(42%, 430px);
  min-height: 620px;
  padding: clamp(28px, 3.4vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
}
.hero-feature .hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.9);
  font-size: .68rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .035em;
  text-shadow: 0 10px 24px rgba(0,0,0,.24);
}
.hero-feature h1 {
  margin: 10px 0 12px;
  color: #f7f8f6;
  font-size: clamp(1.9rem, 3.1vw, 3.25rem);
  font-weight: 700;
  text-shadow: 0 16px 34px rgba(0,0,0,.34);
}
.hero-feature p {
  max-width: 420px;
  margin: 0;
  color: rgba(248,249,247,.84);
  font-size: clamp(.9rem, .98vw, .98rem);
  line-height: 1.45;
  text-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
}

/* ==========================================================
   Aktionsbanner (template-parts/home-campaign-banner.php) – Buttons
   (0-6, vom Plugin "Fahrradshop24 Aktionsbanner" geliefert) als
   eigenständiges Overlay darüber statt im Bild selbst. Eigene,
   bewusst MINIMALE Klasse für das Bild statt Wiederverwendung von
   ".hero-feature" oben: dort feste "min-height:620px" + Crop-/
   Verdunklungs-Overlays (".hero-feature::before/::after") für die
   frühere Text-über-Bild-Variante – würde das Bannerbild zusätzlich
   abdunkeln. ".hero-feature"/".hero-feature-copy" bleiben oben
   unverändert bestehen (aktuell an keiner Stelle mehr referenziert,
   aber nicht gelöscht – für eine mögliche künftige andere Text-über-
   Bild-Variante weiterhin nutzbar).

   Basis-Regel (mobil, ≤768px – derselbe Breakpoint wie das
   <picture>/<source media="max-width:768px">-Umschalten im Theme-
   Template): weiterhin natürliche Bildhöhe, kein Crop – vom Auftrag
   "Banner-Format begrenzen" ausdrücklich unangetastet gelassen
   ("Mobile … nicht unnötig neu bauen"). */
.hero-banner-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
}

/* KORREKTUR (Auftrag "Aktionsbanner-Format begrenzen"): auf Desktop
   erschien das Banner in voller, natürlicher Bildhöhe deutlich zu
   hoch, sobald ein Kampagnenbild ein anderes Seitenverhältnis als
   das ursprüngliche Flickenteppich-Banner (2172×724px, exakt 3:1)
   hatte. Ab 769px (Desktop/Tablet, derselbe Breakpoint wie oben)
   daher fest auf ca. 3:1 begrenzt – "aspect-ratio:3/1" bestimmt die
   Bannerfläche, "object-fit:cover" füllt sie ohne Verzerrung (das
   Bild wird bei abweichendem Format sauber beschnitten statt
   gestaucht/gestreckt), "object-position:center center" behält dabei
   möglichst den mittleren, meist wichtigsten Bildbereich (gleiche
   Grundtechnik wie bereits bei ".gravel-accessory-banner img"
   weiter unten in dieser Datei verwendet). Der button-tragende
   Wrapper ".fs24-campaign-banner" hat kein eigenes festes Maß –
   seine Höhe folgt automatisch der jetzt begrenzten Bildhöhe, das
   Button-Overlay (unten) bleibt dadurch unverändert richtig
   positioniert. */
@media (min-width: 769px) {
  .hero-banner-image {
    aspect-ratio: 3 / 1;
    object-fit: cover;
    object-position: center center;
  }
}

/* Button-Overlay (Desktop, ≥769px – unverändert seit Auftrag §7,
   bewusst einfach und robust gehalten, noch kein visueller Button-
   Editor): ein einziger, unten links verankerter Flex-Container mit
   beidseitigem Innenabstand zur Bildkante ("right" zusätzlich zu
   "left" gesetzt, nicht nur eine errechnete "max-width") und
   "flex-wrap:wrap", damit bis zu 6 Buttons bei jeder Breite
   automatisch umbrechen, statt abgeschnitten zu werden oder
   horizontal zu überlaufen. ".btn"/".btn-primary" (siehe oben, Zeile
   ~1467/1485) sind dieselben, bereits am Rest der Seite verwendeten
   Button-Klassen wie zuvor bei den alten Bannerbuttons – bewusst
   wiederverwendet statt neu erfunden. */
.fs24-campaign-banner {
  position: relative;
}

.fs24-campaign-banner-buttons {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* KORREKTUR (Auftrag "Aktionsbanner mobil anpassen"): Buttons lagen
   mobil als Overlay direkt auf dem Bildmotiv und verdeckten es
   teilweise. Ab ≤768px (derselbe Breakpoint wie das <picture>/
   <source media>-Umschalten und die Desktop-3:1-Begrenzung oben,
   siehe ".hero-banner-image") daher komplett aus dem Overlay gelöst:
   "position:static" nimmt den Button-Block wieder in den normalen
   Dokumentfluss zurück (er landet dadurch automatisch DIREKT nach
   dem "<picture>"-Bild, weil das Template-Markup bereits in dieser
   Reihenfolge steht – keine neue Rendering-Logik nötig, nur diese
   CSS-Umschaltung). "display:grid" mit zwei gleich breiten Spalten
   statt des Desktop-Flex-Wraps ergibt bei bis zu 6 Buttons maximal
   3 Zeilen wie im Auftrag skizziert; alle Buttons einer Zeile werden
   von Grid automatisch gleich hoch (Standard-"align-items:stretch"),
   "width:100%" auf ".btn" sorgt für gleiche Breite je Spalte.

   FEINJUSTIERUNG (Folgeauftrag "mobile Feinjustierung"): Grid-
   Grundlösung (2 Spalten, statischer Fluss direkt unter dem Bild)
   bewusst unverändert, nur Maße kompakter: "gap" auf 7px reduziert
   (ein einzelner Wert gilt für Zeilen- UND Spaltenabstand gleicher-
   maßen, bleibt dadurch automatisch "sauber und gleichmäßig"),
   "margin-top" (Bild→Buttons) von 14px auf 10px, plus neues
   "margin-bottom" von 22px – vorher hing der Abstand zum
   nachfolgenden "Unsere Biobikes"-Bereich rein zufällig von der
   fehlenden Bottom-Padding von ".hero" ab (~8px gemessen), jetzt
   bewusst über die Buttons-Gruppe selbst gesteuert. ".btn" niedriger
   ("min-height" 40px→34px) und leichter (Padding vertikal 8px→6px,
   horizontal bewusst nur minimal von 12px auf 10px verkleinert,
   damit längere Texte weiterhin sauber Platz haben; "min-height"
   bleibt eine reine Untergrenze – lange, umgebrochene Texte wie "Dein
   neues Cube jetzt vorbestellen" wachsen die Zeile bei Bedarf weiter
   nach unten, werden nicht gestaucht/abgeschnitten), Schrift minimal
   kleiner (0.85rem→0.8rem). */
@media (max-width: 768px) {
  .fs24-campaign-banner-buttons {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 10px 0 22px;
  }
  .fs24-campaign-banner-buttons .btn {
    width: 100%;
    min-height: 34px;
    padding: 6px 10px;
    text-align: center;
    white-space: normal;
    font-size: 0.8rem;
  }
}

.hero-service-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13%;
  width: 3px;
  height: 22%;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 22px rgba(210, 70, 20,.6);
}
.hero-service-card::after {
  right: 22px;
  top: 20px;
  color: rgba(255,255,255,.035);
  font-size: 10rem;
}

.categories {
  position: relative;
  padding: 104px 0 90px;
  background: radial-gradient(circle at 90% 8%, rgba(255,255,255,.95), transparent 22%),
        linear-gradient(145deg, #f9fafa, #e4e7e9 52%, #f6f7f7);
  overflow: hidden;
}
.categories::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .23;
  background: repeating-linear-gradient(90deg, rgba(78,86,92,.1) 0 1px, transparent 1px 8px);
  pointer-events: none;
}
.categories .container {
  position: relative;
}

.action-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.action-category-card {
  min-height: 365px;
  padding: 26px;
  border: 1px solid rgba(17,19,21,.12);
  border-radius: 26px;
  box-shadow: 0 16px 45px rgba(10,12,13,.13), inset 0 1px 0 rgba(255,255,255,.12);
  isolation: isolate;
}
.action-category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(125deg, rgba(210, 70, 20,.26), transparent 40%);
  transition: opacity .35s ease;
}
.action-category-card::after {
  background: linear-gradient(180deg, rgba(4,5,5,.02) 16%, rgba(5,6,7,.13) 47%, rgba(5,6,7,.94) 100%),
        linear-gradient(120deg, rgba(255,255,255,.09), transparent 25%);
}
.action-category-card > img {
  filter: saturate(.92) contrast(1.04);
  transition: transform .65s cubic-bezier(.2,.75,.2,1), filter .4s ease;
}
.action-category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 64px rgba(10,12,13,.24), inset 0 1px 0 rgba(255,255,255,.16);
}
.action-category-card:hover::before {
  opacity: 1;
}
.action-category-card:hover > img {
  transform: scale(1.065);
  filter: saturate(1.04) contrast(1.04);
}
.action-category-card .category-copy {
  padding-right: 52px;
}
.action-category-card h3 {
  font-size: clamp(1rem, 1.18vw, 1.18rem);
  line-height: 1.12;
  letter-spacing: -.012em;
  font-weight: 740;
}
.action-category-card p {
  color: rgba(255,255,255,.8);
  font-size: .82rem;
  line-height: 1.32;
}
.action-category-card .round-arrow {
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  transition: background .25s ease, transform .25s ease;
}
.action-category-card:hover .round-arrow {
  color: #fff;
  background: linear-gradient(145deg, #ff8540, #d83d00);
  transform: rotate(-14deg);
}
.usp-wrap {
  padding: 0 0 96px;
  background: linear-gradient(180deg, #f6f7f7, #eef0f1);
}
.usp-bar {
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(110deg, rgba(255,255,255,.12), transparent 25% 80%, rgba(255,255,255,.04)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 6px),
        linear-gradient(145deg, #303539, #111315 62%, #090b0c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 24px 65px rgba(10,12,13,.2);
}
.usp-item {
  min-height: 132px;
  padding: 26px;
  border-right-color: rgba(255,255,255,.09);
}
.usp-icon {
  width: 48px;
  height: 48px;
  color: #ff8a49;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.usp-item strong {
  color: #fff;
}
.usp-item small {
  color: rgba(255,255,255,.58);
  line-height: 1.45;
}
.products {
  position: relative;
  padding: 108px 0 59px;
  background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.9), transparent 24%),
        linear-gradient(135deg, #e2e5e7 0%, #f7f8f8 45%, #d9dde0 100%);
  overflow: hidden;
}
.products::before,
    .products::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.products::before {
  display: none;
}
.products::after {
  width: 560px;
  height: 560px;
  right: -220px;
  top: -210px;
  border: 1px solid rgba(17,19,21,.08);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(255,255,255,.08), 0 0 0 180px rgba(255,255,255,.05);
}
.products .container {
  position: relative;
  z-index: 1;
}
.product-grid {
  gap: 18px;
}
.product-card {
  padding: 0;
  border: 1px solid rgba(17,19,21,.12);
  border-radius: 24px;
  background: rgba(250,251,251,.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 14px 40px rgba(10,12,13,.09);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(125deg, rgba(255,255,255,.52), transparent 22% 78%, rgba(210, 70, 20,.08));
  transition: opacity .3s ease;
}
.product-card:hover {
  transform: translateY(-9px);
  border-color: rgba(210, 70, 20,.32);
  box-shadow: 0 30px 70px rgba(10,12,13,.18);
}
.product-card:hover::after {
  opacity: 1;
}
.product-media {
  aspect-ratio: 1.2;
  border-radius: 0;
  background: radial-gradient(circle at 50% 45%, #fff 0 18%, transparent 56%),
        linear-gradient(145deg, #f8f9f9, #dfe3e5);
  border-bottom: 1px solid rgba(17,19,21,.08);
}
.product-media::before {
  display: none;
}
.product-photo {
  position: relative;
  z-index: 1;
  padding: 18px;
  background: transparent;
  mix-blend-mode: multiply;
  transition: transform .5s cubic-bezier(.2,.75,.2,1);
}
.product-card:hover .product-photo {
  transform: scale(1.055) translateY(-2px);
}
.discount {
  left: 16px;
  top: 16px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 9px;
  background: linear-gradient(145deg, #ff7840, #ce3100);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 20px rgba(139,42,0,.25);
}
.heart {
  right: 14px;
  top: 14px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(17,19,21,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(10,12,13,.08);
  backdrop-filter: blur(10px);
}
.product-info {
  position: relative;
  z-index: 2;
  padding: 24px 22px 22px;
}
.brand {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.product-info h3 {
  min-height: 48px;
  margin: 6px 0 8px;
  font-size: .98rem;
  line-height: 1.24;
  letter-spacing: -.012em;
  font-weight: 700;
}
.stock {
  color: #26714e;
}
.size-row {
  gap: 7px;
  margin-top: 16px;
}
.size-row span {
  min-width: 32px;
  padding: 6px 8px;
  border-color: rgba(17,19,21,.12);
  border-radius: 8px;
  background: linear-gradient(145deg, #fff, #e8ebed);
  box-shadow: inset 0 1px 0 #fff;
}
.price-row {
  margin-top: 20px;
}
.price strong {
  display: block;
  font-size: 1.26rem;
  letter-spacing: -.025em;
}
.mini-cart {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
  background: linear-gradient(125deg, rgba(255,255,255,.13), transparent 42%),
        linear-gradient(145deg, #34393d, #101214);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 22px rgba(10,12,13,.18);
}
.mini-cart:hover:not(:disabled) {
  background: linear-gradient(145deg, #ff8040, #d83e00);
}
.service {
  padding: 118px 0;
  color: #fff;
  background: radial-gradient(circle at 82% 25%, rgba(210, 70, 20,.11), transparent 26%),
        linear-gradient(145deg, #15191b, #07090a 72%);
}
.service-grid {
  gap: 22px;
}
.service-visual,
    .service-content {
  min-height: 650px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.26);
  overflow: hidden;
}
.service-visual::before {
  background: linear-gradient(180deg, rgba(0,0,0,.03) 30%, rgba(4,6,7,.9)),
        linear-gradient(115deg, rgba(210, 70, 20,.12), transparent 35%);
}
.service-photo {
  filter: saturate(.9) contrast(1.05);
  transition: transform .7s ease;
}
.service-visual:hover .service-photo {
  transform: scale(1.035);
}
.service-visual-copy {
  padding: 44px;
}
.service-visual-copy h3 {
  position: static;
  margin: 6px 0 9px;
  font-size: clamp(1.25rem, 1.8vw, 1.58rem);
  letter-spacing: -.018em;
  font-weight: 740;
}
.service-visual-copy p {
  position: static;
  max-width: 36ch;
  font-size: .94rem;
  line-height: 1.42;
}
.service-content {
  padding: clamp(38px, 5vw, 74px);
  background: linear-gradient(115deg, rgba(255,255,255,.12), transparent 27% 78%, rgba(255,255,255,.04)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 6px),
        linear-gradient(145deg, #303539, #15181a 58%, #0d0f10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.24);
}
.service-content .section-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.15vw, 2.45rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  font-weight: 760;
}
.service-content .section-copy {
  margin: 12px 0 0;
  max-width: 620px;
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.45;
}
.service-list {
  gap: 11px;
  margin-top: 34px;
}
.service-point {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.service-point:hover {
  transform: translateX(5px);
  border-color: rgba(210, 70, 20,.28);
  background: rgba(255,255,255,.06);
}
.service-point .num {
  color: #fff;
  border-radius: 13px;
  background: linear-gradient(125deg, rgba(255,255,255,.18), transparent 45%),
        linear-gradient(145deg, #ff8040, #d83e00);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 22px rgba(168,50,0,.24);
}
.service-point h4 {
  color: #fff;
}
.service-point p {
  color: rgba(255,255,255,.57);
}

.slider-arrow:hover {
  background: linear-gradient(145deg, #ff8040, #d83e00);
}
.advice {
  padding: 0 0 118px;
  background: linear-gradient(145deg, #f4f5f5, #dfe2e4);
}
.advice-box {
  min-height: 510px;
  grid-template-columns: 1.05fr .95fr;
  border: 1px solid rgba(17,19,21,.16);
  border-radius: 30px;
  background: linear-gradient(115deg, rgba(255,255,255,.18), transparent 26% 75%, rgba(255,255,255,.06)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px),
        linear-gradient(145deg, #353a3e, #141719 70%, #090b0c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 34px 85px rgba(10,12,13,.22);
}
.advice-copy {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: clamp(48px, 6vw, 88px);
}
.advice-copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  width: 4px;
  height: 26%;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
}
.advice-copy h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(1.85rem, 2.7vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 760;
}
.advice-copy p:not(.eyebrow) {
  color: rgba(255,255,255,.64);
  line-height: 1.65;
}
.advice-art {
  min-height: 510px;
  border-left: 1px solid rgba(255,255,255,.1);
}
.advice-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(9,11,12,.45), transparent 40%),
        linear-gradient(180deg, transparent 60%, rgba(9,11,12,.28));
}
.advice-photo {
  filter: saturate(.88) contrast(1.05);
  transition: transform .7s ease;
}
.advice-box:hover .advice-photo {
  transform: scale(1.035);
}
.newsletter {
  padding: 62px 0;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(112deg, rgba(255,255,255,.1), transparent 24% 82%, rgba(255,255,255,.04)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 7px),
        linear-gradient(145deg, #303539, #141719 68%, #090b0c);
}
.newsletter h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.25rem, 1.95vw, 1.52rem);
  letter-spacing: -.018em;
  font-weight: 740;
}
.newsletter p {
  color: rgba(255,255,255,.84);
}
.newsletter-form input {
  min-height: 56px;
  color: #fff;
  border-color: rgba(255,255,255,.13);
  border-radius: 13px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.04);
}
.newsletter-form input::placeholder {
  color: rgba(255,255,255,.42);
}
.newsletter-form-wrap input::placeholder {
  color: rgba(255,255,255,.55) !important;
}
.site-footer {
  padding: 78px 0 34px;
  color: rgba(255,255,255,.6);
  background: #080a0b;
  border-top: 1px solid rgba(255,255,255,.07);
}
.footer-grid {
  gap: 48px;
}
.footer-logo-panel {
  width: min(100%, 350px);
  min-height: 70px;
  padding: 5px 8px;
  border-color: rgba(17,19,21,.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}
.footer-col h4 {
  color: #fff;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.footer-col a {
  color: rgba(255,255,255,.58);
  transition: color .2s ease, transform .2s ease;
}
.footer-col a:hover {
  color: #ff8143;
  transform: translateX(3px);
}
.footer-bottom {
  border-top-color: rgba(255,255,255,.09);
}
.payment-row span {
  border-color: rgba(255,255,255,.11);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-feature,
      .hero-service-card,
      .action-category-card,
      .product-card,
      .service-visual,
      .service-content,
      .brand-slider,
      .advice-box {
    animation: fs24-rise .7s both;
  }

  .action-category-card:nth-child(2), .product-card:nth-child(2) {
    animation-delay: .06s;
  }
  .action-category-card:nth-child(3), .product-card:nth-child(3) {
    animation-delay: .12s;
  }
  .action-category-card:nth-child(4), .product-card:nth-child(4) {
    animation-delay: .18s;
  }
  .action-category-card:nth-child(5) {
    animation-delay: .24s;
  }
  .action-category-card:nth-child(6) {
    animation-delay: .3s;
  }
  @keyframes fs24-rise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
@media (max-width: 1220px) {
  .container {
    width: min(calc(100% - 36px), var(--max));
  }
  .header-main {
    gap: 18px;
  }
  .brand-logo-panel {
    width: 192px;
  }
  .hero-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: stretch;
  }
  .hero-feature-copy {
    position: relative;
    z-index: 2;
    width: min(42%, 430px);
    min-height: 620px;
    padding: clamp(28px, 3.4vw, 46px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
  }
  .action-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-media {
    aspect-ratio: 1.55;
  }
}
@media (max-width: 900px) {
  .site-header {
    position: sticky;
  }
  .header-main {
    min-height: 74px;
  }
  .main-nav.open {
    border-top-color: rgba(255,255,255,.1);
    background: #101315;
  }
  .nav-inner {
    padding: 14px 0 20px;
  }
  .nav-link {
    min-height: 46px;
  }
  .hero-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: stretch;
  }
  .hero-feature,
      .hero-service-card {
    min-height: 560px;
  }
  .hero-feature-copy {
    position: relative;
    z-index: 2;
    width: min(42%, 430px);
    min-height: 620px;
    padding: clamp(28px, 3.4vw, 46px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
  }

  .service-grid,
      .advice-box {
    grid-template-columns: 1fr;
  }
  .service-visual,
      .service-content {
    min-height: 560px;
  }
  .advice-art {
    min-height: 390px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.1);
  }
}
@media (max-width: 680px) {
  .container {
    width: min(calc(100% - 22px), var(--max));
  }
  .topbar-inner {
    min-height: 32px;
  }
  .site-header {
    position: relative;
  }
  .header-main {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .brand-logo-panel {
    width: 162px;
    height: 45px;
    padding: 6px 8px;
  }
  .search {
    margin-bottom: 3px;
    border-radius: 12px;
  }
  .action-btn {
    width: 42px;
    height: 42px;
  }
  .hero {
    padding-top: 10px;
  }
  .hero-feature,
      .hero-service-card {
    min-height: 590px;
    border-radius: 22px;
  }
  .hero-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(10,14,16,.18) 0%, rgba(10,14,16,.08) 28%, rgba(10,14,16,.14) 58%, rgba(10,14,16,.48) 100%),
        linear-gradient(90deg, rgba(10,14,16,.42) 0%, rgba(10,14,16,.16) 26%, rgba(10,14,16,0) 50%);
  }
  .hero-feature-copy {
    position: relative;
    z-index: 2;
    width: min(42%, 430px);
    min-height: 620px;
    padding: clamp(28px, 3.4vw, 46px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
  }
  .hero-feature h1 {
    margin: 10px 0 12px;
    color: #f7f8f6;
    font-size: clamp(1.9rem, 3.1vw, 3.25rem);
    line-height: 1.02;
    letter-spacing: -.03em;
    font-weight: 700;
    text-shadow: 0 16px 34px rgba(0,0,0,.34);
  }
  .hero-feature p {
    max-width: 420px;
    margin: 0;
    color: rgba(248,249,247,.84);
    font-size: clamp(.9rem, .98vw, .98rem);
    line-height: 1.45;
    text-shadow: 0 10px 24px rgba(0,0,0,.28);
  }
  .hero-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--fs24-btn-radius, 10px);
    font-weight: 720;
    font-size: .96rem;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
  }
  .categories,
      .products,
      .service,
      .brand-showcase {
    padding-top: 76px;
    padding-bottom: 78px;
  }
  .section-head {
    align-items: start;
    margin-bottom: 28px;
  }
  .section-title {
    margin: 0;
    font-size: clamp(1.55rem, 2.15vw, 2.45rem);
    line-height: 1.1;
    letter-spacing: -.028em;
    font-weight: 760;
  }
  .text-link {
    min-height: 44px;
  }
  .action-category-grid,
      .product-grid {
    grid-template-columns: 1fr;
  }
  .action-category-card {
    min-height: 310px;
    border-radius: 21px;
  }
  .usp-wrap {
    padding-bottom: 72px;
  }
  .usp-bar {
    border-radius: 20px;
  }
  .usp-item {
    min-height: 108px;
  }
  .product-card {
    max-width: none;
    border-radius: 21px;
  }
  .product-media {
    aspect-ratio: 1.35;
  }
  .service-visual,
      .service-content {
    min-height: auto;
    border-radius: 22px;
  }
  .service-visual {
    min-height: 470px;
  }
  .service-visual-copy {
    padding: 26px;
  }
  .service-visual-copy h3 {
    position: static;
    margin: 6px 0 9px;
    font-size: clamp(1.25rem, 1.8vw, 1.58rem);
    line-height: 1.1;
    letter-spacing: -.018em;
    font-weight: 740;
  }
  .service-content {
    padding: 31px 21px;
  }
  .service-point {
    grid-template-columns: 44px 1fr;
    padding: 15px;
  }
  .service-point .num {
    width: 44px;
    height: 44px;
  }
  .brand-slider-footer > div:first-child {
    max-width: 62%;
  }
  .advice {
    padding-bottom: 78px;
  }
  .advice-box {
    border-radius: 22px;
  }
  .advice-copy {
    padding: 38px 24px 42px;
  }
  .advice-copy h2 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(1.85rem, 2.7vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    font-weight: 760;
  }
  .advice-art {
    min-height: 320px;
  }
  .newsletter {
    padding: 50px 0;
  }
  .site-footer {
    padding-top: 62px;
  }
}
.categories.categories-top {
  padding: 22px 0 46px;
}

.categories-top .action-category-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 185px;
  margin-bottom: 30px;
}
.categories-top .action-category-card {
  border-radius: 24px;
}
.categories-top .action-category-card:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}
.categories-top .action-category-card:nth-child(2) {
  grid-column: span 2;
}
.categories-top .action-category-card:nth-child(5),
    .categories-top .action-category-card:nth-child(6) {
  grid-column: span 2;
}
.categories-top .action-category-card:nth-child(1) .category-copy {
  max-width: 340px;
}
.categories-top .action-category-card:nth-child(1) h3 {
  font-size: clamp(1.8rem, 2.4vw, 2.55rem);
}

@media (max-width: 1180px) {
  .categories-top .action-category-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 175px;
  }
  .categories-top .action-category-card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .categories-top .action-category-card:nth-child(2),
      .categories-top .action-category-card:nth-child(5),
      .categories-top .action-category-card:nth-child(6) {
    grid-column: span 1;
  }
  .categories-top .action-category-card:nth-child(6) {
    grid-column: span 2;
  }
}
@media (max-width: 900px) {
  .categories-top .action-category-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 185px;
  }
  .categories-top .action-category-card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .categories-top .action-category-card:nth-child(2),
      .categories-top .action-category-card:nth-child(5),
      .categories-top .action-category-card:nth-child(6) {
    grid-column: span 1;
  }
}
@media (max-width: 680px) {
  .categories.categories-top {
    padding-top: 14px;
    padding-bottom: 30px;
  }
  .categories-top .action-category-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 232px;
    margin-bottom: 22px;
  }
  .categories-top .action-category-card:nth-child(1),
      .categories-top .action-category-card:nth-child(2),
      .categories-top .action-category-card:nth-child(5),
      .categories-top .action-category-card:nth-child(6) {
    grid-column: span 1;
    grid-row: span 1;
  }
}
.categories.categories-top {
  position: relative;
  padding: 20px 0 34px;
  background: #0d0f10;
  overflow: hidden;
}
.categories.categories-top::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.035), transparent 24%),
        radial-gradient(circle at 82% 8%, rgba(255,106,20,.10), transparent 26%);
}
.categories-top .container {
  position: relative;
  z-index: 1;
}
.categories-top .action-category-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, 214px);
  gap: 14px;
  margin: 0;
}
.categories-top .action-category-card {
  position: relative;
  min-height: 0;
  height: 100%;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 20px;
  background: #17191a;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  overflow: hidden;
  isolation: isolate;
  transform: none;
}
.categories-top .action-category-card:nth-child(1) {
  grid-column: 1 / span 6;
  grid-row: 1 / span 2;
}
.categories-top .action-category-card:nth-child(2) {
  grid-column: 7 / span 3;
  grid-row: 1;
}
.categories-top .action-category-card:nth-child(3) {
  grid-column: 10 / span 3;
  grid-row: 1;
}
.categories-top .action-category-card:nth-child(4) {
  grid-column: 7 / span 3;
  grid-row: 2;
}
.categories-top .action-category-card:nth-child(5) {
  grid-column: 10 / span 3;
  grid-row: 2;
}
.categories-top .action-category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 34%, rgba(5,7,7,.18) 54%, rgba(5,7,7,.88) 100%);
}
.categories-top .action-category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(125deg, rgba(255,255,255,.08), transparent 24%);
  opacity: .45;
  transition: opacity .35s ease;
}
.categories-top .action-category-card > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: center;
  filter: saturate(.9) contrast(1.04);
  transition: transform .55s cubic-bezier(.2,.65,.25,1), filter .35s ease;
}
.categories-top .action-category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 54px rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.20);
}
.categories-top .action-category-card:hover > img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.05);
}
.categories-top .action-category-card:hover::after {
  opacity: .7;
}
.categories-top .category-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 42px 0 0;
}
.categories-top .action-category-card h3 {
  font-size: clamp(1rem, 1.18vw, 1.18rem);
  line-height: 1.12;
  letter-spacing: -.012em;
  font-weight: 740;
}
.categories-top .action-category-card p {
  color: rgba(255,255,255,.8);
  font-size: .82rem;
  line-height: 1.32;
}
.categories-top .action-category-card:nth-child(1) {
  padding: 32px;
}
.categories-top .action-category-card:nth-child(1) .category-copy {
  max-width: 420px;
  padding-right: 52px;
}
.categories-top .action-category-card:nth-child(1) h3 {
  font-size: clamp(2rem, 2.8vw, 3.15rem);
}
.categories-top .action-category-card:nth-child(1) p {
  max-width: 36ch;
  font-size: .94rem;
}
.categories-top .action-category-card:nth-child(n/**/+4) {
  padding: 18px;
}
.categories-top .action-category-card:nth-child(n/**/+4) .category-copy {
  padding-right: 32px;
}
.categories-top .action-category-card:nth-child(n/**/+4) h3 {
  font-size: 1rem;
}
.categories-top .action-category-card:nth-child(n/**/+4) p {
  display: none;
}
.categories-top .round-arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 50%;
  color: #fff;
  background: rgba(10,12,12,.48);
  backdrop-filter: blur(10px);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.categories-top .action-category-card:hover .round-arrow {
  color: #111;
  background: #ff7a22;
  border-color: transparent;
  transform: translateX(2px);
}

.categories-top .category-intro-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #ff9a4f, #e8530d);
}

@media (max-width: 1180px) {
  .categories-top .action-category-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 250px 190px 190px;
  }
  .categories-top .action-category-card:nth-child(1) {
    grid-column: 1 / span 4;
    grid-row: 1 / span 2;
  }
  .categories-top .action-category-card:nth-child(2) {
    grid-column: 5 / span 2;
    grid-row: 1;
  }
  .categories-top .action-category-card:nth-child(3) {
    grid-column: 5 / span 2;
    grid-row: 2;
  }
  .categories-top .action-category-card:nth-child(4) {
    grid-column: 1 / span 3;
    grid-row: 3;
  }
  .categories-top .action-category-card:nth-child(5) {
    grid-column: 4 / span 3;
    grid-row: 3;
  }
}
@media (max-width: 820px) {
  .categories-top .action-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 320px repeat(2, 210px);
  }
  .categories-top .action-category-card:nth-child(1) {
    grid-column: 1 / span 2;
    grid-row: 1;
  }
  .categories-top .action-category-card:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .categories-top .action-category-card:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  .categories-top .action-category-card:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
  }
  .categories-top .action-category-card:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
  }
}
@media (max-width: 560px) {
  .categories.categories-top {
    padding: 12px 0 24px;
  }
  .categories-top .action-category-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 290px repeat(4, 205px);
  }
  .categories-top .action-category-card:nth-child(n) {
    grid-column: 1;
    grid-row: auto;
    padding: 20px;
    border-radius: 17px;
  }
  .categories-top .action-category-card:nth-child(n) h3 {
    font-size: 1.28rem;
  }
  .categories-top .action-category-card:nth-child(n) p {
    display: block;
    font-size: .79rem;
  }
  .categories-top .action-category-card:nth-child(1) h3 {
    font-size: 2rem;
  }
}
@media (max-width: 560px) {
  .categories-top .action-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 270px 168px 168px 190px;
    gap: 10px;
  }
  .categories-top .action-category-card:nth-child(1) {
    grid-column: 1 / span 2;
    grid-row: 1;
  }
  .categories-top .action-category-card:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .categories-top .action-category-card:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  .categories-top .action-category-card:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
  }
  .categories-top .action-category-card:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
  }
  .categories-top .action-category-card:nth-child(6) {
    grid-column: 1 / span 2;
    grid-row: 4;
  }
  .categories-top .action-category-card:nth-child(n) {
    padding: 15px;
  }
  .categories-top .action-category-card:nth-child(1),
      .categories-top .action-category-card:nth-child(6) {
    padding: 20px;
  }
  .categories-top .action-category-card:nth-child(n) .category-copy {
    padding-right: 29px;
  }
  .categories-top .action-category-card:nth-child(n) h3 {
    font-size: .98rem;
    line-height: 1.05;
  }
  .categories-top .action-category-card:nth-child(1) h3 {
    font-size: 1.95rem;
  }
  .categories-top .action-category-card:nth-child(6) h3 {
    font-size: 1.25rem;
  }
  .categories-top .action-category-card:nth-child(n/**/+2):nth-child(-n/**/+5) p {
    display: none;
  }
  .categories-top .action-category-card:nth-child(1) p,
      .categories-top .action-category-card:nth-child(6) p {
    display: block;
    font-size: .76rem;
  }
  .categories-top .round-arrow {
    right: 13px;
    bottom: 13px;
    width: 32px;
    height: 32px;
  }
}
.bio-bike-section {
  padding: 24px 0 42px;
  margin-top: 0;
}
.bio-bike-section .section-head {
  margin-bottom: 26px;
}
.bio-bike-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.bio-bike-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  padding: 14px;
  border: 1px solid rgba(17,19,21,.1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(14,21,28,.07);
  transition: transform .22s ease, box-shadow .22s ease;
}
.bio-bike-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.bio-bike-media {
  position: relative;
  aspect-ratio: 1.48;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 16px;
  background: #e9ebe7;
  overflow: hidden;
}
.bio-bike-media img {
  width: 100%;
  height: 100%;
  padding: 14px;
  object-fit: contain;
  object-position: center center;
  background: #fff;
  transition: transform .45s ease;
}
.bio-bike-card:hover .bio-bike-media img {
  transform: scale(1.035);
}
.bio-bike-tag {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 3;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--sale);
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: none;
}
.bio-bike-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
  padding: 18px 6px 7px;
}
.bio-bike-copy .brand {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.bio-bike-copy h3 {
  min-height: 48px;
  margin: 6px 0 8px;
  font-size: .98rem;
  line-height: 1.24;
  letter-spacing: -.012em;
  font-weight: 700;
}
.bio-bike-meta {
  margin: 0;
  min-height: 58px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.42;
}
.bio-bike-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.bio-bike-link {
  display: inline-flex;
  align-items: center;
  color: #111313;
  font-size: .86rem;
  font-weight: 760;
}
.bio-bike-link span {
  color: var(--muted);
}
.bio-bike-card .heart {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
}
@media (max-width: 1120px) {
  .bio-bike-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .usp-wrap .usp-bar {
    width: calc(100% - 32px);
  }
  .bio-bike-section {
    padding: 22px 0 34px;
  }
  .bio-bike-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .bio-bike-card {
    max-width: 470px;
    width: 100%;
    margin-inline: auto;
  }
  .bio-bike-copy h3,
  .bio-bike-meta {
    min-height: auto;
  }
}
/* KORREKTUR (Auftrag "USP-Leiste um echte H1 ergänzen"): Reduziert,
   weil ".usp-heading" jetzt selbst ein eigenes "padding-top" für
   Abstand zum oberen Rand der schwarzen Fläche mitbringt (siehe
   oben) – die Leiste soll durch die neue H1 "möglichst wenig höher"
   werden, nicht die H1-Höhe zusätzlich zur alten Außen-Polsterung
   addieren. Betrifft ausschließlich den oberen Rand; "usp-bar"s
   eigene Breitenformel direkt darunter unverändert. */
.usp-wrap {
  padding-top: 30px;
}
.usp-wrap .usp-bar {
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
}
.hero-actions {
  display: grid;
  width: max-content;
  max-width: 100%;
  gap: 12px;
  margin-top: 20px;
  align-items: flex-start;
}
.hero-actions .btn {
  width: 100%;
  min-height: 48px;
  padding: 0 22px;
  justify-content: flex-start;
  text-align: left;
  font-weight: 720;
  white-space: nowrap;
}
.hero-actions .btn-primary {
  background: linear-gradient(135deg, #f7903d 0%, #ea6722 100%);
  color: #fff;
  border-color: transparent;
}
.hero-actions .btn-primary:hover {
  background: linear-gradient(135deg, #fb9b4e 0%, #ef712c 100%);
}
.hero-actions .btn-light,
    .hero-actions .hero-leasing-btn {
  background: rgba(255,255,255,.92);
  color: #111;
  border-color: rgba(255,255,255,.18);
}
@media (max-width: 640px) {
  .hero-actions .btn {
    width: 228px;
  }
}
.gravel-accessory-banner {
  padding: 14px 0 20px;
}
.gravel-accessory-banner .container {
  width: min(calc(100% - 40px), var(--max));
}
.gravel-accessory-banner figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(17,23,27,.08);
  background: #fff;
  box-shadow: 0 20px 44px rgba(14, 21, 28, .08);
}
.gravel-accessory-banner .banner-button {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--fs24-btn-radius, 10px);
  background: rgba(255,255,255,.94);
  color: #111;
  font-size: .92rem;
  font-weight: 720;
  box-shadow: 0 12px 24px rgba(0,0,0,.14);
}
.gravel-accessory-banner img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 640px) {
  .gravel-accessory-banner {
    padding: 10px 0 16px;
  }
}
.accessory-duo-banner {
  padding: 0 0 20px;
}
.accessory-duo-banner .container {
  width: min(calc(100% - 40px), var(--max));
}
.accessory-duo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.accessory-duo-banner figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(17,23,27,.08);
  background: #fff;
  box-shadow: 0 20px 44px rgba(14, 21, 28, .08);
  aspect-ratio: 16 / 7;
}
.accessory-duo-banner .banner-button {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--fs24-btn-radius, 10px);
  background: rgba(255,255,255,.94);
  color: #111;
  font-size: .92rem;
  font-weight: 720;
  box-shadow: 0 12px 24px rgba(0,0,0,.14);
}
.accessory-duo-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 760px) {
  .accessory-duo-banner {
    padding: 0 0 16px;
  }
  .accessory-duo-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .accessory-duo-banner figure {
    aspect-ratio: 16 / 8;
  }
}
@media (max-width: 760px) {
  .gravel-accessory-banner .banner-button,
      .accessory-duo-banner .banner-button {
    left: auto;
    right: 14px;
    bottom: 14px;
    min-height: 32px;
    padding: 0 12px;
    font-size: .76rem;
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
  }
}
@media (max-width: 760px) {
  .gravel-accessory-banner .banner-button,
      .accessory-duo-banner .banner-button {
    top: auto;
    right: auto;
    left: 10px;
    bottom: 10px;
    min-height: 28px;
    padding: 0 10px;
    font-size: .70rem;
    font-weight: 680;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(0,0,0,.12);
  }
  .hero-feature > img {
    object-fit: cover;
    object-position: 60% center;
    transform: none;
  }
  .action-category-card > img {
    object-fit: cover;
    object-position: center center;
    transform: none;
  }
  .product-photo {
    object-fit: contain;
    object-position: center;
    padding: 10px;
    transform: none;
  }
  .service-photo {
    object-fit: cover;
    object-position: 44% 25%;
    transform: none;
  }
  .advice-photo {
    object-fit: cover;
    object-position: center center;
    transform: none;
  }
  .gravel-accessory-banner img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
  }
  .accessory-duo-banner img {
    object-fit: cover;
    object-position: center center;
  }
}

/* ==========================================================
   Teile / Zubehör / Bekleidung – 3-Kachel-Layout (groß links,
   2 gestapelt rechts), ersetzt ".gravel-accessory-banner" +
   ".accessory-duo-banner" (deren Regeln oben bleiben unangetastet
   stehen, werden aber durch dieses neue Markup nicht mehr
   referenziert). Eigene Klassennamen, keine Überschneidung mit
   den alten Selektoren.
   ========================================================== */
.accessory-trio-banner {
  padding: 14px 0 20px;
}
.accessory-trio-banner .container {
  width: min(calc(100% - 40px), var(--max));
}
.accessory-trio-grid {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: 18px;
}
.accessory-trio-stack {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 18px;
}
.accessory-trio-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(17,23,27,.08);
  box-shadow: 0 20px 44px rgba(14,21,28,.08);
  color: #fff;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease;
}
.accessory-trio-stack .accessory-trio-tile {
  aspect-ratio: 16 / 5.6;
}
.accessory-trio-tile > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .65s cubic-bezier(.2,.75,.2,1);
}
.accessory-trio-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5,7,8,0) 28%, rgba(5,7,8,.52) 60%, rgba(5,7,8,.92) 100%);
}
.accessory-trio-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(10,12,13,.20);
}
.accessory-trio-tile:hover > img {
  transform: scale(1.05);
}
.accessory-trio-copy {
  position: relative;
  z-index: 2;
  padding: 20px 22px 18px;
}
.accessory-trio-title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.14;
  letter-spacing: -.014em;
  font-weight: 780;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.accessory-trio-tile--large .accessory-trio-title {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
}
.accessory-trio-subtitle {
  margin: 4px 0 0;
  color: rgba(255,255,255,.9);
  font-size: .9rem;
  line-height: 1.34;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.accessory-trio-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: #fff;
  font-size: .86rem;
  font-weight: 760;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.accessory-trio-cta span[aria-hidden] {
  display: inline-block;
  transition: transform .25s ease;
}
.accessory-trio-tile:hover .accessory-trio-cta span[aria-hidden] {
  transform: translateX(4px);
}
@media (max-width: 760px) {
  .accessory-trio-banner {
    padding: 10px 0 16px;
  }
  .accessory-trio-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .accessory-trio-stack {
    grid-template-rows: none;
    gap: 14px;
  }
  .accessory-trio-tile--large,
  .accessory-trio-stack .accessory-trio-tile {
    aspect-ratio: 16 / 8.6;
  }
  .accessory-trio-copy {
    padding: 13px 14px 11px;
  }
  .accessory-trio-title,
  .accessory-trio-tile--large .accessory-trio-title {
    font-size: .72rem;
    line-height: 1.14;
    font-weight: 720;
  }
  .accessory-trio-subtitle {
    margin-top: 2px;
    font-size: .58rem;
    line-height: 1.24;
  }
  .accessory-trio-cta {
    margin-top: 5px;
    font-size: .58rem;
  }
}

.hero {
  padding-top: 14px;
}
.hero-feature {
  min-height: 520px;
}
.hero-feature-copy {
  min-height: 520px;
  width: min(40%, 410px);
  padding: clamp(22px, 2.6vw, 36px);
}
.hero-feature h1 {
  margin: 8px 0 10px;
}
.hero-actions {
  margin-top: 16px;
  gap: 10px;
}
@media (max-width: 980px) {
  .hero-feature {
    min-height: 500px;
  }
  .hero-feature-copy {
    min-height: 500px;
  }
}
@media (max-width: 760px) {
  .hero {
    padding-top: 12px;
  }
  .hero-feature {
    min-height: 470px;
  }
  .hero-feature-copy {
    min-height: 470px;
    width: min(58%, 360px);
    padding: 22px;
  }
}
@media (max-width: 560px) {
  .hero-feature {
    min-height: 430px;
  }
  .hero-feature-copy {
    min-height: 430px;
    padding: 20px 18px;
  }
}
.service-order-flow {
  margin: 0 0 22px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 38%),
        linear-gradient(145deg, #25292b, #141617);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.service-order-flow .flow-kicker {
  display: block;
  margin-bottom: 5px;
  color: #ff8440;
  font-size: .72rem;
  font-weight: 760;
}
.service-order-flow strong {
  display: block;
  margin-bottom: 7px;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 760;
}
.service-order-flow p {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: .84rem;
  line-height: 1.42;
}
.service-order-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 13px;
  color: rgba(255,255,255,.86);
  font-size: .75rem;
  font-weight: 700;
}
.service-order-steps span {
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 9px;
  background: rgba(255,255,255,.055);
}
.service-order-steps b {
  color: #ff7834;
  font-size: .9rem;
  font-weight: 700;
}
@media (max-width: 680px) {
  .service-order-flow {
    padding: 16px;
  }
  .service-order-steps {
    gap: 6px;
  }
  .service-order-steps span {
    padding: 5px 7px;
  }
}
.service-order-flow-wrap {
  padding: 0 0 18px;
  background: linear-gradient(90deg, rgba(22,28,30,.98), rgba(7,9,10,1) 55%, rgba(28,12,7,.98));
}
.service-order-flow-container {
  width: min(calc(100% - 180px), calc(var(--max) - 180px));
  margin-inline: auto;
}
.service {
  padding: 54px 0 82px;
}
.service-grid {
  width: min(calc(100% - 180px), calc(var(--max) - 180px));
  gap: 20px;
  grid-template-columns: .92fr 1.08fr;
}
.service-visual {
  min-height: 470px;
  border-radius: 22px;
}
.service-visual-copy {
  padding: 28px;
}
.service-visual-copy h3 {
  font-size: clamp(1.05rem, 1.45vw, 1.34rem);
  line-height: 1.1;
}
.service-visual-copy p {
  font-size: .86rem;
  line-height: 1.38;
}
.service-content {
  padding: clamp(24px, 3vw, 42px);
  border-radius: 22px;
}
.service-content .section-title {
  font-size: clamp(1.35rem, 1.95vw, 2rem);
  line-height: 1.08;
}
.service-content .section-copy {
  font-size: .9rem;
  line-height: 1.4;
}
.service-list {
  margin-top: 18px;
  gap: 8px;
}
.service-point {
  padding: 10px 12px;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  border-radius: 10px;
}
.service-point .num {
  width: 38px;
  height: 38px;
  font-size: .8rem;
  border-radius: 9px;
}
.service-point h4 {
  font-size: .86rem;
  line-height: 1.22;
}
.service-point p {
  font-size: .78rem;
  line-height: 1.36;
}
@media (max-width: 980px) {
  .service-order-flow-container,
      .service-grid {
    width: min(calc(100% - 40px), var(--max));
  }
}
@media (max-width: 900px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
  .service-visual {
    min-height: 410px;
  }
}
@media (max-width: 680px) {
  .service-order-flow-wrap {
    padding-bottom: 14px;
  }
  .service {
    padding: 42px 0 62px;
  }
  .service-visual {
    min-height: 360px;
  }
  .service-visual-copy {
    padding: 22px;
  }
  .service-content {
    padding: 22px 18px;
  }
  .service-content .section-title {
    font-size: clamp(1.25rem, 7vw, 1.7rem);
  }
  .service-content .section-copy {
    font-size: .86rem;
  }
  .service-point h4 {
    font-size: .82rem;
  }
  .service-point p {
    font-size: .75rem;
  }
}
.hero {
  padding-top: 12px;
  padding-bottom: 12px;
}
.hero-feature {
  min-height: 440px;
}
.hero-feature-copy {
  min-height: 440px;
  width: min(37%, 365px);
  padding: clamp(18px, 2.1vw, 28px);
}

.hero-feature h1 {
  margin: 6px 0 10px;
  font-size: clamp(1.55rem, 3.3vw, 2.45rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.hero-feature p {
  max-width: 320px;
  font-size: .88rem;
  line-height: 1.38;
}
.hero-actions {
  margin-top: 14px;
  gap: 9px;
}
.hero-actions .btn {
  min-height: 42px;
  padding: 0 18px;
  font-size: .9rem;
}
@media (max-width: 980px) {
  .hero-feature {
    min-height: 430px;
  }
  .hero-feature-copy {
    min-height: 430px;
    width: min(43%, 350px);
  }
  .hero-feature h1 {
    font-size: clamp(1.5rem, 4.1vw, 2.2rem);
  }
}
@media (max-width: 760px) {
  .hero {
    padding-top: 10px;
  }
  .hero-feature {
    min-height: 400px;
  }
  .hero-feature-copy {
    min-height: 400px;
    width: min(56%, 320px);
    padding: 18px;
  }
  .hero-feature h1 {
    font-size: clamp(1.4rem, 6vw, 1.95rem);
  }
  .hero-feature p {
    font-size: .84rem;
  }
  .hero-actions .btn {
    min-height: 39px;
    font-size: .84rem;
  }
}
@media (max-width: 560px) {
  .hero-feature {
    min-height: 370px;
  }
  .hero-feature-copy {
    min-height: 370px;
    width: 100%;
    padding: 16px;
  }
  .hero-feature h1 {
    font-size: clamp(1.32rem, 8vw, 1.72rem);
  }
  .hero-feature p {
    max-width: 290px;
    font-size: .8rem;
  }
  .hero-actions {
    margin-top: 12px;
    gap: 8px;
  }
  .hero-actions .btn {
    min-height: 36px;
    padding: 0 14px;
    font-size: .8rem;
  }
}
.service-order-flow-container,
    .service-grid {
  width: min(calc(100% - 40px), var(--max));
}
@media (max-width: 680px) {
  .service-order-flow-container,
      .service-grid {
    width: min(calc(100% - 24px), var(--max));
  }
}
.service-grid {
  width: min(calc(100% - 220px), calc(var(--max) - 220px));
  margin-inline: auto;
}
@media (max-width: 1200px) {
  .service-grid {
    width: min(calc(100% - 120px), var(--max));
  }
}
@media (max-width: 900px) {
  .service-grid {
    width: min(calc(100% - 40px), var(--max));
  }
}
@media (max-width: 680px) {
  .service-grid {
    width: min(calc(100% - 24px), var(--max));
  }
}
.service-grid {
  width: min(calc(100% - 320px), 1260px) ;
  margin-inline: auto ;
}
@media (max-width: 1400px) {
  .service-grid {
    width: min(calc(100% - 220px), 1120px) ;
  }
}
@media (max-width: 1100px) {
  .service-grid {
    width: min(calc(100% - 120px), 980px) !important;
  }
}
@media (max-width: 900px) {
  .service-grid {
    width: min(calc(100% - 40px), var(--max)) !important;
  }
}
@media (max-width: 680px) {
  .service-grid {
    width: min(calc(100% - 24px), var(--max)) !important;
  }
}
.service-order-flow-wrap {
  padding-top: 26px ;
  padding-bottom: 24px ;
}
.service-order-flow-container {
  margin-top: 10px ;
}
@media (max-width: 680px) {
  .service-order-flow-wrap {
    padding-top: 18px ;
    padding-bottom: 18px ;
  }
  .service-order-flow-container {
    margin-top: 6px ;
  }
}
.dealer-story {
  padding: 8px 0 82px;
  background: #fff;
}
.dealer-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.dealer-story-copy,
    .dealer-story-image {
  min-height: 390px;
  border-radius: 24px;
  overflow: hidden;
}
.dealer-story-copy {
  padding: clamp(34px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(17,23,27,.08);
  background: radial-gradient(circle at 100% 0%, rgba(255,105,25,.10), transparent 32%),
        linear-gradient(145deg, #f5f5f2 0%, #ffffff 70%);
  box-shadow: 0 20px 46px rgba(14,21,28,.07);
}
/* Eyebrow der Händler-Story. Als KLEINE SCHRIFT (.7rem) und nicht als
   Fläche bewusst der dunklere Markenton --accent-dark statt --accent:

     #e95b16 (vorher)  3,28:1
     --accent           4,42:1 Desktop, aber nur 4,23:1 bei 500px
     --accent-dark      5,40:1 auf beiden Breiten  → über AA

   Der Grundton --accent bleibt den orangen FLÄCHEN und Primary-Buttons
   vorbehalten, wo Weiß darauf steht. Bei orangefarbener Schrift auf
   hellem Grund ist --accent-dark die richtige Hälfte des Paares.
   Entscheidung Friedemann, 2026-09-02. */
.dealer-story-copy .dealer-kicker {
  margin: 0 0 9px;
  color: var(--accent-dark);
  font-size: .7rem;
  font-weight: 760;
  letter-spacing: .035em;
}
.dealer-story-copy h2 {
  max-width: 620px;
  margin: 0;
  color: #0b0c0c;
  font-size: clamp(1.55rem, 2.25vw, 2.45rem);
  line-height: 1.08;
  letter-spacing: -.028em;
  font-weight: 760;
}
.dealer-story-copy p {
  max-width: 650px;
  margin: 15px 0 0;
  color: #5e6561;
  font-size: .94rem;
  line-height: 1.52;
}
.dealer-story-link {
  width: max-content;
  max-width: 100%;
  margin-top: 20px;
}
.dealer-story-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.dealer-story-points span {
  padding: 8px 11px;
  border: 1px solid #dde0dc;
  border-radius: 999px;
  color: #282c2a;
  background: rgba(255,255,255,.78);
  font-size: .77rem;
  font-weight: 700;
}
.dealer-story-image {
  position: relative;
  border: 1px solid rgba(17,23,27,.08);
  background: #17191a;
  box-shadow: 0 20px 46px rgba(14,21,28,.08);
}
.dealer-story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 900px) {
  .dealer-story-grid {
    grid-template-columns: 1fr;
  }
  .dealer-story-copy,
      .dealer-story-image {
    min-height: 340px;
  }
}
@media (max-width: 680px) {
  .dealer-story {
    padding: 4px 0 58px;
  }
  .dealer-story-grid {
    gap: 14px;
  }
  .dealer-story-copy,
      .dealer-story-image {
    min-height: 300px;
    border-radius: 20px;
  }
  .dealer-story-copy {
    padding: 26px 22px;
  }
  .dealer-story-copy h2 {
    font-size: clamp(1.4rem, 7vw, 1.9rem);
  }
  .dealer-story-copy p {
    font-size: .88rem;
  }
}
.dealer-story-points {
  gap: 10px 12px;
  margin-top: 24px;
}
.dealer-story-points span {
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid #d8dcd7;
  border-radius: 0;
  color: #5b615d;
  background: transparent;
  font-size: .8rem;
  font-weight: 650;
  line-height: 1.25;
  box-shadow: none;
  white-space: nowrap;
  position: relative;
}
.dealer-story-points span a {
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.dealer-story-points span a:hover,
.dealer-story-points span a:focus-visible {
  text-decoration: underline;
}
/* Orange Aufzählungspunkte der Händler-Story. Kleines Schriftzeichen
   ("•"), keine Fläche – deshalb --accent-dark wie beim ".dealer-kicker"
   darüber: --accent maß hier 4,23:1, --accent-dark 5,40:1. */
.dealer-story-points span::before {
  content: "•";
  display: inline-block;
  margin-right: 8px;
  color: var(--accent-dark);
  font-weight: 800;
}
@media (max-width: 680px) {
  .dealer-story-points {
    gap: 8px 10px;
    margin-top: 18px;
  }
  .dealer-story-points span {
    padding: 4px 0;
    font-size: .76rem;
    white-space: normal;
  }
  .dealer-story-points span::before {
    margin-right: 6px;
  }
}
.service {
  padding-top: 42px;
  padding-bottom: 62px;
}
.service-visual {
  min-height: 385px ;
}
.service-visual-copy {
  padding-top: 20px;
  padding-bottom: 20px;
}
.service-content {
  padding-top: 24px ;
  padding-bottom: 24px ;
}
.service-content .section-copy {
  margin-top: 8px;
}
.service-list {
  margin-top: 14px;
  gap: 6px;
}
.service-point {
  padding-top: 8px;
  padding-bottom: 8px;
}
@media (max-width: 900px) {
  .service-visual {
    min-height: 340px ;
  }
}
@media (max-width: 680px) {
  .service {
    padding-top: 34px;
    padding-bottom: 50px;
  }
  .service-visual {
    min-height: 310px ;
  }
  .service-content {
    padding-top: 18px ;
    padding-bottom: 18px ;
  }
  .service-list {
    margin-top: 12px;
    gap: 6px;
  }
  .service-point {
    padding-top: 7px;
    padding-bottom: 7px;
  }
}
.advice {
  margin-top: 26px ;
  padding-top: 20px ;
}
@media (max-width: 680px) {
  .advice {
    margin-top: 18px !important;
    padding-top: 14px !important;
  }
}
.service {
  padding-top: 30px ;
  padding-bottom: 44px ;
}
.service-grid {
  align-items: stretch;
}
.service-visual {
  min-height: 300px ;
}
.service-visual-copy h3 {
  margin-bottom: 6px;
  font-size: clamp(.96rem, 1.2vw, 1.15rem) ;
}
.service-content {
  padding: 18px 18px 16px ;
}
.service-content .section-title {
  font-size: clamp(1.18rem, 1.55vw, 1.55rem) ;
  line-height: 1.06 ;
}
.service-content .section-copy {
  font-size: .82rem ;
  line-height: 1.34 ;
}
.service-list {
  gap: 5px ;
}
.service-point {
  grid-template-columns: 34px 1fr ;
}
.service-point .num {
  width: 34px ;
  height: 34px ;
  font-size: .74rem ;
}
.service-point h4 {
  font-size: .78rem ;
  line-height: 1.18 ;
}
.service-point p {
  font-size: .72rem ;
  line-height: 1.28 ;
}
@media (max-width: 900px) {
  .service-visual {
    min-height: 280px ;
  }
}
@media (max-width: 680px) {
  .service {
    padding-top: 24px ;
    padding-bottom: 34px ;
  }
  .service-visual {
    min-height: 250px ;
  }
  .service-content {
    padding: 16px 14px 14px ;
  }
  .service-content .section-title {
    font-size: clamp(1.08rem, 6vw, 1.38rem) ;
  }
  .service-content .section-copy {
    font-size: .78rem ;
  }
  .service-point {
    padding: 6px 7px ;
    grid-template-columns: 32px 1fr ;
  }
  .service-point .num {
    width: 32px ;
    height: 32px ;
  }
  .service-point h4 {
    font-size: .75rem ;
  }
  .service-point p {
    font-size: .69rem ;
  }
}
.service-order-flow-wrap {
  padding-top: 10px ;
  padding-bottom: 10px ;
}
.service-order-flow-container {
  margin-top: 0 !important;
}
.service-order-flow {
  margin: 0 0 10px ;
  padding: 10px 14px ;
  border-radius: 12px ;
}
.service-order-flow .flow-kicker {
  margin-bottom: 3px ;
  font-size: .62rem ;
}
.service-order-flow strong {
  margin-bottom: 4px ;
  font-size: .85rem ;
  line-height: 1.16 ;
}
.service-order-flow p {
  font-size: .72rem ;
  line-height: 1.28 ;
}
.service-order-steps {
  margin-top: 8px ;
  gap: 5px ;
  font-size: .66rem ;
}
.service-order-steps span {
  padding: 4px 7px ;
  border-radius: 7px ;
}
.service-order-steps b {
  font-size: .72rem ;
}
.service {
  padding-top: 12px ;
  padding-bottom: 20px ;
}
.service-grid {
  gap: 10px ;
}
.service-visual {
  min-height: 235px ;
}
.service-visual-copy {
  padding: 12px 14px ;
}
.service-visual-copy h3 {
  margin-bottom: 4px ;
  font-size: .9rem ;
  line-height: 1.06 ;
}
.service-visual-copy p {
  font-size: .72rem ;
  line-height: 1.22 ;
}
.service-content {
  padding: 12px 14px 12px ;
}
.service-content .section-title {
  font-size: clamp(1rem, 1.28vw, 1.28rem) ;
  line-height: 1.03 ;
}
.service-content .section-copy {
  margin-top: 4px ;
  font-size: .74rem ;
  line-height: 1.24 ;
}
.service-list {
  margin-top: 8px ;
  gap: 4px ;
}
.service-point {
  padding: 5px 7px ;
  grid-template-columns: 28px 1fr ;
  gap: 6px ;
}
.service-point .num {
  width: 28px ;
  height: 28px ;
  font-size: .66rem ;
}
.service-point h4 {
  margin: 0 0 1px ;
  font-size: .7rem ;
  line-height: 1.12 ;
}
.service-point p {
  font-size: .64rem ;
  line-height: 1.18 ;
}
@media (max-width: 900px) {
  .service-visual {
    min-height: 220px ;
  }
}
@media (max-width: 680px) {
  .service-order-flow-wrap {
    padding-top: 8px ;
    padding-bottom: 8px ;
  }
  .service-order-flow {
    margin: 0 0 8px ;
    padding: 9px 10px ;
  }
  .service-order-flow strong {
    font-size: .78rem ;
  }
  .service-order-flow p {
    font-size: .68rem ;
  }
  .service-order-steps {
    margin-top: 6px ;
    gap: 4px ;
  }
  .service {
    padding-top: 10px ;
    padding-bottom: 16px ;
  }
  .service-visual {
    min-height: 205px ;
  }
  .service-visual-copy {
    padding: 10px 12px ;
  }
  .service-content {
    padding: 10px 12px ;
  }
  .service-content .section-title {
    font-size: 1rem ;
  }
  .service-content .section-copy {
    font-size: .7rem ;
  }
  .service-point {
    padding: 4px 6px ;
    grid-template-columns: 26px 1fr ;
  }
  .service-point .num {
    width: 26px ;
    height: 26px ;
    font-size: .62rem ;
  }
  .service-point h4 {
    font-size: .67rem ;
  }
  .service-point p {
    font-size: .61rem ;
  }
}
.service-order-flow-wrap {
  padding-bottom: 4px ;
}
.service-order-flow {
  margin-bottom: 4px ;
}
.service {
  padding-top: 6px ;
  padding-bottom: 10px ;
}
.service-visual {
  align-self: stretch ;
}
.service-content {
  align-self: start ;
  min-height: 0 ;
}
.service-grid {
  grid-auto-rows: max-content ;
}
.service-visual {
  height: 100% ;
}
@media (max-width: 900px) {
  .service-visual {
    min-height: 210px ;
    height: auto ;
  }
}
@media (max-width: 680px) {
  .service-order-flow-wrap {
    padding-bottom: 3px ;
  }
  .service-order-flow {
    margin-bottom: 3px ;
  }
  .service {
    padding-top: 5px ;
    padding-bottom: 8px ;
  }
  .service-visual {
    min-height: 190px ;
  }
}
.brand-hero {
  padding: 26px 0 68px;
  background: #fff;
}
.brand-hero-inner {
  border-radius: 26px;
  border: 1px solid rgba(18, 24, 28, .08);
  background: linear-gradient(180deg, rgba(247,247,245,1) 0%, rgba(255,255,255,1) 100%);
  box-shadow: 0 18px 40px rgba(16, 24, 28, .06);
  overflow: hidden;
}
.brand-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}
.brand-logo-item {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 18px;
  border-right: 1px solid rgba(20, 26, 30, .08);
  position: relative;
  overflow: hidden;
  background: transparent;
  transition: background .2s ease;
}
.brand-logo-item:hover {
  background: rgba(20, 26, 30, .025);
}
.brand-logo-item:last-child {
  border-right: 0;
}
@media (min-width: 681px) {
  .brand-logo-item:nth-child(3n) {
    border-right: 0;
  }
}
.brand-logo-item::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  background: rgba(20, 26, 30, .11);
}
.brand-logo-item span {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-2px);
}
.brand-logo-caption {
  display: block;
  max-width: 100%;
  color: #656b70;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}
.logo-cube span {
  color: #0b0b0b;
  font-size: clamp(2.2rem, 2vw, 2.9rem);
  font-weight: 900;
  letter-spacing: .04em;
  font-style: italic;
}
.logo-ktm span {
  color: #f47620;
  font-size: clamp(2.25rem, 2vw, 2.95rem);
  font-weight: 900;
  letter-spacing: .03em;
  font-style: italic;
}
.logo-giant span {
  color: #2c17b6;
  font-size: clamp(2rem, 1.95vw, 2.8rem);
  font-weight: 900;
  letter-spacing: .03em;
  font-style: italic;
}
.logo-mondraker span {
  color: #171717;
  font-size: clamp(1.35rem, 1.45vw, 1.85rem);
  font-weight: 800;
  letter-spacing: .05em;
}
.logo-ghost span {
  color: #cd1e1e;
  font-size: clamp(2rem, 1.9vw, 2.7rem);
  font-weight: 900;
  letter-spacing: .03em;
  font-style: italic;
}
.logo-winora span {
  color: #0d0d0d;
  font-size: clamp(1.9rem, 1.75vw, 2.5rem);
  font-weight: 900;
  letter-spacing: .03em;
  font-style: italic;
}
@media (max-width: 1200px) {
  .brand-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .brand-logo-item:nth-child(3n) {
    border-right: 0;
  }
}
@media (max-width: 680px) {
  .brand-hero {
    padding: 18px 0 52px;
  }
  .brand-hero-inner {
    border-radius: 20px;
  }
  .brand-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .brand-logo-item {
    min-height: 120px;
    padding: 18px 12px;
  }
  .brand-logo-item:nth-child(2n) {
    border-right: 0;
  }
  .brand-logo-item::after {
    left: 12px;
    right: 12px;
  }
  .logo-cube span,
      .logo-ktm span,
      .logo-giant span,
      .logo-ghost span,
      .logo-winora span {
    font-size: clamp(1.35rem, 7vw, 2rem);
  }
  .logo-mondraker span {
    font-size: clamp(1rem, 4.8vw, 1.35rem);
  }
  .brand-logo-item {
    gap: 6px;
  }
  .brand-logo-caption {
    font-size: .64rem;
  }
}
.brand-hero {
  padding: 18px 0 58px;
}
.brand-logo-item {
  min-height: 145px ;
  padding: 18px 14px ;
}
@media (max-width: 680px) {
  .brand-hero {
    padding: 14px 0 44px;
  }
  .brand-logo-item {
    min-height: 102px !important;
    padding: 14px 10px !important;
  }
}
/* ".seo-content .container" ist hier bewusst mit aufgeführt: Der
   aufklappbare "Gut zu wissen"-Block soll auf derselben Flucht stehen
   wie der Kasten unmittelbar darüber (".dealer-story-grid"). Ohne diese
   Zeilen greift für ihn nur die allgemeine ".container"-Breite
   (100% - 52px), er lief dadurch links und rechts weiter nach außen als
   der Bereich darüber. Weiter unten gab es dafür schon einen Anlauf
   ("homepage-section-width-match"); der zielt aber auf eine andere
   Breite (100% - 272px) und kommt in der ausgelieferten, vom
   Optimierer zusammengefassten CSS gar nicht an - deshalb hier, an den
   Regeln, die für den Referenzbereich nachweislich wirken. Es werden
   nur Breite und Außenränder angeglichen, nichts am Inhalt. */
.dealer-story-grid,
.seo-content .container {
  width: min(calc(100% - 220px), calc(var(--max) - 220px)) ;
  margin-inline: auto ;
}
.brand-hero-inner {
  width: min(calc(100% - 220px), calc(var(--max) - 220px)) ;
  margin-inline: auto ;
}
@media (max-width: 1200px) {
  .dealer-story-grid,
      .brand-hero-inner,
      .seo-content .container {
    width: min(calc(100% - 120px), var(--max)) !important;
  }
}
@media (max-width: 900px) {
  .dealer-story-grid,
      .brand-hero-inner,
      .seo-content .container {
    width: min(calc(100% - 40px), var(--max)) !important;
  }
}
@media (max-width: 680px) {
  .dealer-story-grid,
      .brand-hero-inner,
      .seo-content .container {
    width: min(calc(100% - 24px), var(--max)) !important;
  }
}
.advice-copy h2 {
  font-size: clamp(1.32rem, 1.85vw, 1.85rem) ;
  line-height: 1.08 ;
  letter-spacing: -.022em ;
  max-width: 620px ;
}
.advice-copy p:not(.eyebrow) {
  font-size: .92rem ;
  line-height: 1.5 ;
  max-width: 620px ;
}
.advice-copy .btn {
  font-size: .86rem ;
  padding: 12px 18px ;
}
.dealer-story-copy .dealer-kicker {
  font-size: .68rem !important;
  letter-spacing: .03em ;
}
.dealer-story-copy h2 {
  font-size: clamp(1.34rem, 1.8vw, 1.88rem) ;
  line-height: 1.1 ;
  letter-spacing: -.022em ;
  max-width: 690px ;
}
.dealer-story-copy p {
  font-size: .9rem ;
  line-height: 1.52 ;
  max-width: 690px ;
}
.dealer-story-points span {
  font-size: .74rem ;
  padding: 8px 12px ;
}
@media (max-width: 680px) {
  .advice-copy h2 {
    font-size: clamp(1.14rem, 6vw, 1.48rem) !important;
  }
  .advice-copy p:not(.eyebrow) {
    font-size: .84rem !important;
  }
  .advice-copy .btn {
    font-size: .82rem !important;
    padding: 11px 16px !important;
  }
  .dealer-story-copy h2 {
    font-size: clamp(1.16rem, 5.8vw, 1.48rem) !important;
  }
  .dealer-story-copy p {
    font-size: .84rem !important;
  }
  .dealer-story-points span {
    font-size: .7rem !important;
    padding: 7px 10px !important;
  }
}
.usp-wrap {
  padding-bottom: 42px ;
}
.usp-item {
  min-height: 92px ;
  padding: 14px 18px ;
}
@media (max-width: 1120px) {
  .usp-item {
    min-height: 86px !important;
    padding: 13px 16px !important;
  }
}
@media (max-width: 640px) {
  .usp-wrap {
    padding-bottom: 30px ;
  }
  .usp-item {
    min-height: 78px !important;
    padding: 12px 14px !important;
  }
}
.service-content .section-title {
  font-size: clamp(1.2rem, 1.65vw, 1.65rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.022em ;
  font-weight: 760 ;
  max-width: 640px ;
  color: #ffffff ;
}
.service-content .section-copy {
  margin-top: 10px !important;
  font-size: .92rem !important;
  line-height: 1.5 !important;
  max-width: 640px ;
  color: rgba(255,255,255,.84) ;
}
.service-list {
  margin-top: 14px !important;
  gap: 8px !important;
}
.service-point {
  background: rgba(255,255,255,.06) ;
  border: 1px solid rgba(255,255,255,.12) ;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) ;
}
.service-point h4 {
  font-size: .82rem !important;
  line-height: 1.22 !important;
  color: #ffffff ;
}
.service-point p {
  font-size: .76rem !important;
  line-height: 1.36 !important;
  color: rgba(255,255,255,.82) ;
}
.service-point .num {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.18) ;
}
@media (max-width: 680px) {
  .service-content .section-title {
    font-size: clamp(1.03rem, 5.4vw, 1.33rem) !important;
  }
  .service-content .section-copy {
    font-size: .84rem !important;
  }
  .service-point h4 {
    font-size: .76rem !important;
  }
  .service-point p {
    font-size: .7rem !important;
  }
}

/* Mobile-Feinschliff: kompaktere Abstände, Biobikes tiefer, Banner voll klickbar */
.banner-card-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
}
.gravel-accessory-banner .banner-button,
.accessory-duo-banner .banner-button {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.46);
  background: rgba(8,10,10,.20);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  font-size: .72rem;
  font-weight: 650;
  pointer-events: none;
}

@media (max-width: 680px) {
  .categories.categories-top {
    padding-top: 8px ;
    padding-bottom: 18px ;
  }
  .usp-wrap {
    /* von 24px reduziert (Auftrag "USP-Leiste um echte H1 ergänzen")
       - ".usp-heading" hat ab dieser Breite bereits ein eigenes
       12px-"padding-top" (siehe oben), "padding-bottom" unverändert. */
    padding-top: 16px ;
    padding-bottom: 24px !important;
  }
  .products {
    padding: 44px 0 24px ;
  }
  .products .section-head {
    gap: 14px ;
    margin-bottom: 22px ;
  }
  .product-grid {
    gap: 14px ;
  }
  .product-card {
    border-radius: 19px ;
  }
  .product-info {
    padding: 18px 16px 17px ;
  }
  .hero {
    padding-top: 8px ;
    padding-bottom: 8px ;
  }
  .hero-actions {
    gap: 6px ;
    margin-top: 10px ;
  }
  .hero-actions .btn {
    min-height: 34px ;
    padding: 0 12px ;
    font-size: .76rem ;
  }
  .bio-bike-section {
    padding: 56px 0 34px ;
    background: #f4f5f6 ;
  }
  .bio-bike-section .section-head {
    gap: 18px ;
    margin-bottom: 26px ;
  }
  .bio-bike-grid {
    grid-template-columns: 1fr ;
    gap: 16px ;
  }
  .bio-bike-card {
    border-radius: 28px ;
  }
  .bio-bike-media {
    min-height: 220px ;
    padding: 22px ;
  }
  .bio-bike-media img {
    height: 180px ;
    transform: none ;
  }
  .bio-bike-copy {
    gap: 10px ;
    padding: 18px 18px 20px ;
  }
  .bio-bike-copy h3,
  .bio-bike-meta {
    min-height: auto ;
  }
  .gravel-accessory-banner {
    padding: 6px 0 10px ;
  }
  .accessory-duo-banner {
    padding: 0 0 10px ;
  }
  .accessory-duo-grid {
    gap: 10px ;
  }
  .gravel-accessory-banner figure,
  .accessory-duo-banner figure {
    border-radius: 18px ;
  }
  .accessory-duo-banner figure {
    aspect-ratio: 16 / 8 ;
  }
  .gravel-accessory-banner .banner-button,
  .accessory-duo-banner .banner-button {
    position: absolute ;
    top: auto ;
    right: auto ;
    left: 10px ;
    bottom: 10px ;
    z-index: 2 ;
    min-height: 23px ;
    padding: 0 8px ;
    border: 1px solid rgba(255,255,255,.48) ;
    border-radius: var(--fs24-btn-radius, 10px);
    background: rgba(8,10,10,.20) ;
    color: #fff ;
    box-shadow: none ;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    font-size: .61rem ;
    font-weight: 650 ;
    line-height: 1 ;
    pointer-events: none;
  }
  .service-order-flow-wrap {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }
  .service {
    padding-top: 8px !important;
    padding-bottom: 16px !important;
  }
  .dealer-story {
    padding-top: 2px ;
    padding-bottom: 42px ;
  }
  .brand-hero {
    padding-top: 10px ;
    padding-bottom: 38px ;
  }
}

@media (max-width: 560px) {
  .categories-top .action-category-grid {
    grid-template-rows: 270px 168px 168px ;
  }
  .categories.categories-top {
    padding-bottom: 16px !important;
  }
  .usp-wrap {
    /* von 18px reduziert, gleicher Grund wie bei der 680px-Regel
       oben (Auftrag "USP-Leiste um echte H1 ergänzen"). */
    padding-top: 12px !important;
  }
}

/* FLAT DESIGN – sämtliche Metallic-, Streifen-, Glanz- und Glas-Effekte entfernt */

body {
  background: #f5f6f6 ;
}
body::before {
  display: none !important;
  content: none !important;
}

.btn,
.btn:hover,
.text-link,
.text-link span,
.action-btn,
.badge,
.search,
.search button,
.slider-arrow,
.mini-cart,
.discount,
.service-point .num,
.hero-service-points b,
.categories-top .round-arrow,
.action-category-card .round-arrow {
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.btn-primary,
.hero-actions .btn-primary,
.search button,
.badge,
.discount,
.service-point .num {
  background: var(--accent) ;
}
.btn-primary:hover,
.hero-actions .btn-primary:hover,
.search button:hover,
.slider-arrow:hover,
.mini-cart:hover:not(:disabled),
.action-category-card:hover .round-arrow {
  background: var(--accent-dark) !important;
  filter: none !important;
}
.btn-dark,
.text-link span,
.mini-cart {
  background: #171a1c ;
}

.topbar {
  background: #080a0b ;
}
.topbar::after {
  display: none !important;
}
.site-header {
  background: #0c0e0f ;
  backdrop-filter: none ;
  -webkit-backdrop-filter: none !important;
}
.brand-logo-panel,
.footer-logo-panel {
  background: #fff;
  box-shadow: none;
}
.brand-logo-panel::after {
  display: none !important;
}
.search {
  background: #1a1d1f ;
}
.search:focus-within {
  box-shadow: 0 0 0 3px rgba(210, 70, 20,.14) !important;
}
.search button {
  background: var(--accent) ;
}
.action-btn {
  background: #171a1c ;
}
.badge {
  background: var(--accent) ;
}
.main-nav {
  background: #090b0c !important;
}
.mega-menu {
  background: #ffffff !important;
  backdrop-filter: none ;
  -webkit-backdrop-filter: none !important;
}
.mega-feature,
.mega-feature-content {
  background: #171a1c !important;
  box-shadow: none ;
}

.hero::before {
  background: #0b0d0e !important;
}
.hero-feature::before {
  display: none !important;
  content: none !important;
}

.hero-service-card::before {
  background: var(--accent) !important;
  box-shadow: none !important;
}

.categories:not(.categories-top) {
  background: #f5f6f6 !important;
}
.categories:not(.categories-top)::before {
  display: none !important;
  content: none !important;
}
.action-category-card {
  box-shadow: 0 14px 34px rgba(10,12,13,.10) ;
}
.action-category-card::before {
  display: none !important;
  content: none !important;
}
.action-category-card::after {
  background: linear-gradient(180deg, rgba(4,5,5,.02) 18%, rgba(5,6,7,.16) 52%, rgba(5,6,7,.88) 100%) !important;
}
.action-category-card .round-arrow {
  background: rgba(10,12,12,.54) ;
}
.categories.categories-top {
  background: #24272a ;
}
.categories.categories-top::before {
  display: none !important;
  content: none !important;
}
.categories-top .action-category-card {
  background: #17191a ;
  box-shadow: 0 14px 34px rgba(0,0,0,.18) ;
}
.categories-top .action-category-card::after {
  display: none !important;
  content: none !important;
}
.categories-top .action-category-card::before {
  display: none !important;
  content: none !important;
}
.categories-top .round-arrow {
  background: rgba(10,12,12,.58) ;
}
.categories-top .action-category-card h3 {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
  font-size: 1rem !important;
  font-weight: 740 !important;
  line-height: 1.12 !important;
}
.categories-top .action-category-card p {
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.categories-top .category-copy {
  width: fit-content;
  max-width: 260px;
  background: rgba(5,7,7,.64);
  border-radius: 14px;
  padding: 10px 16px;
  margin-bottom: -8px;
}
.categories-top .action-category-card:nth-child(1) .category-copy {
  padding-right: 16px;
}
.categories-top .action-category-card:nth-child(n/**/+4) .category-copy {
  padding-right: 16px;
}

.categories-top .category-intro-panel::before {
  background: var(--accent) !important;
}

.usp-wrap {
  background: #f5f6f6 ;
}
.usp-bar {
  background: #24272a ;
  box-shadow: 0 16px 42px rgba(10,12,13,.14) ;
}
.usp-icon {
  background: #24282b ;
  box-shadow: none ;
}

.products {
  background: #f5f6f6 ;
}
.products::before,
.products::after {
  display: none !important;
  content: none !important;
}
.product-card {
  background: #ffffff ;
  box-shadow: 0 14px 34px rgba(10,12,13,.08) ;
  backdrop-filter: none ;
  -webkit-backdrop-filter: none !important;
}
.product-card::after {
  display: none !important;
  content: none !important;
}
.product-media {
  background: #ffffff ;
}
.product-media::before {
  display: none !important;
  content: none !important;
}
.product-photo {
  background: transparent ;
  mix-blend-mode: normal ;
}
.heart {
  background: #ffffff ;
  box-shadow: none ;
  backdrop-filter: none ;
  -webkit-backdrop-filter: none !important;
}
.size-row span {
  background: #ffffff ;
  box-shadow: none ;
}

/* Bestseller-Fallback – rein optischer Layout-Platzhalter,
   solange keine 4 echten WooCommerce-Bestseller vorhanden sind. */
.product-card--placeholder {
  border: 1px dashed rgba(17,19,21,.18);
  background: #fbfbfb ;
  box-shadow: none ;
}
.product-card--placeholder:hover {
  transform: none;
  border-color: rgba(17,19,21,.18);
  box-shadow: none ;
}
.placeholder-media {
  background: #eef0f1 ;
  display: grid;
  place-items: center;
}
.placeholder-icon {
  width: 56px;
  height: 56px;
  color: rgba(17,19,21,.22);
}
.placeholder-title {
  min-height: 48px;
  margin: 6px 0 8px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 650;
}
.placeholder-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.placeholder-price-note {
  color: var(--muted);
  font-size: .82rem;
}
.mini-cart.is-placeholder {
  background: #e4e6e7 ;
  color: rgba(17,19,21,.32);
  cursor: default;
  box-shadow: none ;
}

.bio-bike-section {
  background: #f5f6f6 ;
}
.bio-bike-card {
  background: #ffffff ;
  box-shadow: 0 14px 34px rgba(14,21,28,.07) ;
}
.bio-bike-media {
  background: #ffffff ;
}

.service-order-flow-wrap,
.service {
  background: #24272a ;
}
.service-order-flow {
  background: #24272a ;
  box-shadow: none ;
}
.service-content {
  background: #24272a ;
  box-shadow: 0 18px 48px rgba(0,0,0,.18) ;
}
.service-point {
  background: rgba(255,255,255,.06) ;
  box-shadow: none !important;
}
.service-point .num {
  background: var(--accent) ;
  box-shadow: none ;
}

.brand-showcase,
.advice {
  background: #f5f6f6 ;
}
.brand-slider::after {
  display: none !important;
  content: none !important;
}

.slider-arrow:hover {
  background: var(--accent) !important;
}
.advice-box {
  background: #24272a ;
  box-shadow: 0 20px 52px rgba(10,12,13,.16) ;
}
.advice-copy::before {
  background: var(--accent) !important;
}
.newsletter {
  background: #171a1c ;
}
.newsletter-form input {
  box-shadow: none ;
}

.brand-hero-inner {
  background: #ffffff ;
}
.dealer-story-copy {
  background: #f7f7f5 ;
}

.gravel-accessory-banner .banner-button,
.accessory-duo-banner .banner-button {
  backdrop-filter: none ;
  -webkit-backdrop-filter: none !important;
  box-shadow: none ;
}

@media (max-width: 680px) {
  body,
  .products,
  .bio-bike-section,
  .usp-wrap,
  .brand-showcase,
  .advice {
    background: #f5f6f6 ;
  }
  .site-header,
  .service-order-flow-wrap,
  .service {
    backdrop-filter: none ;
    -webkit-backdrop-filter: none !important;
  }
  .gravel-accessory-banner .banner-button,
  .accessory-duo-banner .banner-button {
    backdrop-filter: none ;
    -webkit-backdrop-filter: none !important;
  }
}

/* Mobile: Suchfeld als Lupen-Button direkt neben dem Warenkorb */
.mobile-search-toggle {
  display: none;
}
@media (max-width: 680px) {
  .header-main > .search {
    display: none ;
  }
  .header-main > .search.mobile-open {
    display: flex !important;
    grid-column: 1 / -1;
    grid-row: 2;
    width: min(68%, 280px);
    justify-self: start;
    margin: 2px 0 3px;
  }
  .mobile-search-toggle {
    display: grid;
  }
}

/* V9 – nur Smartphone: Zubehör / Teile / Outfit exakt gleich groß */
@media (max-width: 680px) {
  .gravel-accessory-banner .container,
  .accessory-duo-banner .container {
    width: min(calc(100% - 24px), var(--max)) ;
  }
  .gravel-accessory-banner figure,
  .accessory-duo-banner figure {
    width: 100% ;
    height: auto ;
    aspect-ratio: 16 / 8 ;
    border-radius: 18px ;
    overflow: hidden ;
  }
  .gravel-accessory-banner .banner-card-link,
  .accessory-duo-banner .banner-card-link {
    width: 100% ;
    height: 100% ;
  }
  .gravel-accessory-banner img,
  .accessory-duo-banner img {
    width: 100% ;
    height: 100% ;
    object-fit: cover ;
    object-position: center center ;
  }
  .gravel-accessory-banner .banner-button,
  .accessory-duo-banner .banner-button {
    left: 8px !important;
    bottom: 8px !important;
    min-height: 20px !important;
    padding: 0 7px !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    border-radius: var(--fs24-btn-radius, 10px);
    background: transparent !important;
    color: #fff ;
    box-shadow: none ;
    backdrop-filter: none ;
    -webkit-backdrop-filter: none !important;
    font-size: .56rem !important;
    font-weight: 650 ;
    line-height: 1 ;
    text-shadow: 0 1px 3px rgba(0,0,0,.55) ;
  }
}

/* V11 – nur Smartphone: Produktkarten kompakter und zweispaltig */
@media (max-width: 680px) {
  .product-grid,
  .bio-bike-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch ;
  }
  .product-card,
  .bio-bike-card {
    width: 100% ;
    max-width: none ;
    min-width: 0 ;
    margin: 0 ;
    padding: 8px ;
    border-radius: 15px !important;
  }
  .product-media,
  .bio-bike-media {
    width: 100% ;
    min-height: 0 !important;
    aspect-ratio: 1.18 / 1 ;
    padding: 0 !important;
    border-radius: 11px ;
    display: grid ;
    place-items: center ;
    overflow: hidden ;
    background: #fff ;
  }
  .product-photo,
  .bio-bike-media img {
    width: 100% ;
    height: 100% !important;
    padding: 8px ;
    object-fit: contain ;
    object-position: center center ;
    transform: none ;
  }
  .product-card:hover .product-photo,
  .bio-bike-card:hover .bio-bike-media img {
    transform: none !important;
  }
  .product-info,
  .bio-bike-copy {
    padding: 11px 5px 6px !important;
  }
  .product-info .brand,
  .bio-bike-copy .brand {
    font-size: .61rem ;
    letter-spacing: .045em ;
  }
  .product-info h3,
  .bio-bike-copy h3 {
    min-height: 0 !important;
    margin: 4px 0 7px ;
    font-size: .78rem ;
    line-height: 1.23 ;
  }
  .stock {
    gap: 5px ;
    font-size: .64rem ;
    line-height: 1.25 ;
  }
  .stock::before {
    width: 6px !important;
    height: 6px !important;
    box-shadow: 0 0 0 3px rgba(47,172,104,.10) !important;
  }
  .size-row {
    gap: 4px ;
    margin-top: 9px ;
    flex-wrap: wrap ;
  }
  .size-row span {
    min-width: 24px ;
    padding: 3px 5px ;
    border-radius: 6px ;
    font-size: .61rem ;
  }
  .price-row {
    gap: 6px ;
    margin-top: 11px ;
  }
  .price del {
    font-size: .61rem ;
  }
  .price strong {
    font-size: .92rem ;
    line-height: 1.05 ;
  }
  .mini-cart {
    flex: 0 0 auto ;
    width: 34px ;
    height: 34px ;
    border-radius: 10px ;
  }
  .mini-cart .icon {
    width: 17px ;
    height: 17px ;
  }
  .heart {
    width: 31px ;
    height: 31px ;
    right: 7px !important;
    top: 7px !important;
  }
  .heart .icon {
    width: 16px ;
    height: 16px ;
  }
  .discount,
  .bio-bike-tag {
    left: 7px ;
    top: 7px ;
    padding: 5px 7px ;
    font-size: .58rem ;
  }
  .bio-bike-meta {
    min-height: 0 !important;
    font-size: .67rem ;
    line-height: 1.34 ;
  }
  .bio-bike-footer {
    gap: 6px ;
    margin-top: 10px ;
  }
  .bio-bike-link {
    min-width: 0 ;
    font-size: .66rem ;
    line-height: 1.2 ;
  }
  .products .section-head,
  .bio-bike-section .section-head {
    margin-bottom: 18px !important;
  }
}

/* ==========================================================
   mobile-hero-button-width-fix
   ========================================================== */
@media (max-width: 680px) {
  .hero-actions {
    display: inline-grid ;
    grid-template-columns: max-content ;
    width: max-content ;
    max-width: 100% ;
    align-items: start ;
  }
  .hero-actions .btn {
    width: 100% ;
    max-width: none ;
  }
}

/* ==========================================================
   category-mega-menu-styles
   ========================================================== */
.nav-inner {
  position: relative;
}
.nav-item {
  position: static;
}
.submenu-toggle {
  display: none;
}
.mega-menu {
  left: 0;
  top: 100%;
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  padding: 28px 30px 30px;
  z-index: 100;
}
.mega-menu .mega-column {
  min-width: 0;
}
.mega-menu .mega-column h4 {
  margin: 0 0 10px;
  color: #1b1e1c;
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .015em;
}
.mega-menu .mega-subheading {
  margin-top: 18px !important;
}
.mega-menu .mega-column a {
  padding: 5px 0;
  line-height: 1.28;
}
.mega-menu .mega-all {
  margin-top: 8px;
  color: #e85a13;
  font-weight: 820;
}
.mega-menu .mega-all:hover {
  color: #ff6a14;
}
.mega-menu-categories {
  min-height: 228px;
}
.mega-menu-dense {
  align-items: start;
  max-height: min(690px, calc(100vh - 145px));
  overflow-y: auto;
}
.mega-menu-dense .mega-column {
  display: grid;
  align-content: start;
  gap: 22px;
}
.mega-menu-dense .mega-group {
  min-width: 0;
}
.mega-menu-dense .mega-group h4 {
  margin: 0 0 7px;
  color: #151817;
  font-size: .82rem;
  font-weight: 880;
}
.mega-menu-dense .mega-group a {
  display: block;
  padding: 3px 0;
  color: #666d69;
  font-size: .82rem;
  line-height: 1.28;
}
.mega-menu-dense .mega-group a:hover {
  color: #111313;
}
.mega-menu-dense .mega-group .mega-all {
  margin-top: 4px;
  color: #e85a13;
  font-weight: 800;
}

@media (max-width: 900px) {
  .main-nav {
    background: #0b0d0c;
    border-top-color: rgba(255,255,255,.11);
  }
  .nav-inner {
    width: min(calc(100% - 24px), var(--max));
    padding: 6px 0 14px;
  }
  .nav-item {
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  .nav-item:last-child {
    border-bottom: 0;
  }
  .nav-item.has-mega > .nav-link {
    padding-right: 48px;
  }
  .submenu-toggle {
    position: absolute;
    right: 0;
    top: 3px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.82);
    cursor: pointer;
  }
  .submenu-toggle span {
    display: block;
    transition: transform .2s ease;
  }
  .nav-item.submenu-open > .submenu-toggle span {
    transform: rotate(180deg);
  }
  .mega-menu {
    position: static;
    width: 100%;
    display: none;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 2px 0 14px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-item.submenu-open > .mega-menu {
    display: grid;
  }
  .mega-menu .mega-column {
    padding: 8px 0;
  }
  .mega-menu .mega-column h4 {
    margin-bottom: 4px;
    color: rgba(255,255,255,.95);
    font-size: .76rem;
  }
  .mega-menu .mega-column a {
    padding: 5px 0;
    color: rgba(255,255,255,.66);
    font-size: .85rem;
  }
  .mega-menu .mega-all {
    color: #ff8a3d !important;
  }
  .mega-menu .mega-subheading {
    margin-top: 12px !important;
  }
  .mega-menu-dense {
    max-height: none;
    overflow: visible;
  }
  .mega-menu-dense .mega-column {
    gap: 12px;
  }
  .mega-menu-dense .mega-group {
    padding: 3px 0 7px;
  }
  .mega-menu-dense .mega-group h4 {
    color: rgba(255,255,255,.95);
    font-size: .76rem;
  }
  .mega-menu-dense .mega-group a {
    color: rgba(255,255,255,.66);
    font-size: .84rem;
  }
  .mega-feature {
    display: none !important;
  }
}

/* ==========================================================
   mobile-category-accordion-fix
   ========================================================== */
.mobile-group-toggle { display: none; }

@media (max-width: 900px) {
  .main-nav .nav-inner {
    padding-top: 5px ;
    padding-bottom: 12px ;
  }
  .main-nav .nav-item {
    border-bottom: 1px solid rgba(255,255,255,.10) ;
  }
  .main-nav .nav-link {
    min-height: 50px ;
    padding: 0 48px 0 2px ;
    color: rgba(255,255,255,.94) ;
    font-size: .94rem ;
    font-weight: 760 ;
  }
  .main-nav .nav-item.has-mega > .nav-link > span[aria-hidden="true"] {
    display: none ;
  }
  .main-nav .submenu-toggle {
    top: 5px ;
    width: 40px ;
    height: 40px ;
    border: 1px solid rgba(255,255,255,.10) ;
    background: rgba(255,255,255,.035) ;
  }
  .main-nav .nav-item.submenu-open > .nav-link {
    color: #ff8a3d !important;
  }
  .main-nav .nav-item.submenu-open > .mega-menu {
    margin: 0 0 8px !important;
    padding: 4px 0 8px !important;
    gap: 5px !important;
  }
  .mega-menu .mobile-group-collapsible,
  .mega-menu-dense .mobile-group-collapsible {
    width: 100% ;
    padding: 0 ;
    margin: 0 ;
    border: 1px solid rgba(255,255,255,.09) ;
    border-radius: 9px ;
    background: rgba(255,255,255,.035) ;
    overflow: hidden ;
  }
  .mobile-group-toggle {
    width: 100%;
    min-height: 43px;
    display: flex ;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px 9px 13px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.94);
    font: inherit;
    font-size: .82rem;
    font-weight: 790;
    text-align: left;
    cursor: pointer;
  }
  .mobile-group-toggle .mobile-group-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    color: #ff8a3d;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
  }
  .mobile-group-collapsible.mobile-group-open > .mobile-group-toggle .mobile-group-icon {
    transform: rotate(45deg);
  }
  .mobile-group-collapsible:not(.mobile-group-open) > :not(.mobile-group-toggle) {
    display: none ;
  }
  .mobile-group-collapsible > h4:first-of-type {
    display: none ;
  }
  .mobile-group-collapsible.mobile-group-open {
    padding-bottom: 7px !important;
    background: rgba(255,255,255,.055) !important;
  }
  .mobile-group-collapsible.mobile-group-open > a {
    display: block !important;
    padding: 6px 13px 6px 16px !important;
    color: rgba(255,255,255,.72) !important;
    font-size: .82rem !important;
    line-height: 1.3 !important;
  }
  .mobile-group-collapsible.mobile-group-open > a.mega-all {
    color: #ff9a56 !important;
    font-weight: 780 !important;
  }
  .mobile-group-collapsible.mobile-group-open > h4:not(:first-of-type) {
    display: block !important;
    margin: 9px 13px 3px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.92) !important;
    font-size: .72rem !important;
  }
  .mega-menu-dense .mega-group:not(.mobile-group-collapsible) {
    padding: 2px 0 ;
  }
  .mega-menu-dense .mega-group:not(.mobile-group-collapsible) > a {
    padding: 7px 12px ;
  }
}

@media (max-width: 680px) {
  .main-nav .nav-inner {
    width: calc(100% - 20px) ;
  }
  .main-nav .nav-link {
    font-size: .91rem !important;
  }
}

/* ==========================================================
   mobile-category-visibility-fix
   ========================================================== */
@media (max-width: 900px) {
  .main-nav .nav-item.submenu-open > .mega-menu,
  .main-nav .nav-item.submenu-open > .mega-menu.mega-menu-categories,
  .main-nav .nav-item.submenu-open > .mega-menu.mega-menu-dense {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 7px 0 8px !important;
    gap: 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #0b0d0c !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    color: #fff !important;
  }
  .main-nav .mega-menu .mega-column,
  .main-nav .mega-menu-dense .mega-column {
    width: 100% ;
    padding: 0 ;
    margin: 0 ;
    background: transparent ;
  }
  .main-nav .mega-menu .mobile-group-collapsible,
  .main-nav .mega-menu-dense .mobile-group-collapsible {
    width: 100% ;
    margin: 0 ;
    padding: 0 ;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 10px !important;
    background: #151817 !important;
    box-shadow: none ;
    overflow: hidden ;
  }
  .main-nav .mobile-group-toggle {
    width: 100% ;
    min-height: 46px ;
    display: flex ;
    align-items: center ;
    justify-content: space-between ;
    gap: 12px ;
    padding: 10px 12px 10px 14px ;
    border: 0 ;
    border-radius: 0 ;
    background: #151817 ;
    color: #f5f5f3 ;
    font-size: .86rem ;
    font-weight: 780 ;
    line-height: 1.2 ;
    text-align: left ;
  }
  .main-nav .mobile-group-toggle > span:first-child {
    display: block ;
    color: #f5f5f3 ;
    opacity: 1 ;
  }
  .main-nav .mobile-group-toggle .mobile-group-icon {
    flex: 0 0 26px ;
    width: 26px ;
    height: 26px ;
    display: grid ;
    place-items: center ;
    border-radius: 50% ;
    background: rgba(255,106,20,.12) ;
    color: #ff7b2b ;
    font-size: 1.06rem ;
    font-weight: 700 ;
    line-height: 1 ;
  }
  .main-nav .mobile-group-collapsible.mobile-group-open {
    padding-bottom: 7px !important;
    background: #111413 !important;
    border-color: rgba(255,122,43,.32) !important;
  }
  .main-nav .mobile-group-collapsible.mobile-group-open > .mobile-group-toggle {
    background: #181b1a !important;
    color: #ff8a3d !important;
  }
  .main-nav .mobile-group-collapsible.mobile-group-open > a,
  .main-nav .mega-menu-dense .mobile-group-collapsible.mobile-group-open > a {
    display: block !important;
    margin: 0 !important;
    padding: 8px 14px 8px 17px !important;
    border-top: 1px solid rgba(255,255,255,.055) !important;
    background: #111413 !important;
    color: rgba(255,255,255,.78) !important;
    font-size: .82rem !important;
    font-weight: 520 !important;
    line-height: 1.28 !important;
  }
  .main-nav .mobile-group-collapsible.mobile-group-open > a:hover,
  .main-nav .mobile-group-collapsible.mobile-group-open > a:focus {
    color: #fff !important;
    background: #191c1b !important;
  }
  .main-nav .mobile-group-collapsible.mobile-group-open > a.mega-all {
    color: #ff9a56 !important;
    font-weight: 760 !important;
  }
  .main-nav .mobile-group-collapsible.mobile-group-open > h4:not(:first-of-type) {
    display: block !important;
    margin: 8px 14px 2px !important;
    padding: 9px 0 2px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    color: #f4f4f2 !important;
    background: transparent !important;
    font-size: .73rem !important;
    font-weight: 760 !important;
  }
  .main-nav .mega-menu-dense .mega-group:not(.mobile-group-collapsible) {
    margin: 0 ;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.10) ;
    border-radius: 10px ;
    background: #151817 ;
    overflow: hidden ;
  }
  .main-nav .mega-menu-dense .mega-group:not(.mobile-group-collapsible) > a {
    display: block ;
    padding: 11px 14px !important;
    color: #ff9a56 !important;
    background: #151817 ;
    font-size: .82rem ;
    font-weight: 760 ;
  }
}

/* ==========================================================
   header-logo-size-only
   ========================================================== */
.site-header .brand-logo-panel {
  width: auto;
  height: 44px;
  padding: 4px 10px;
}
.site-header .brand-logo-panel img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 1220px) {
  .site-header .brand-logo-panel {
    height: 41px;
    padding: 4px 9px;
  }
}
@media (max-width: 680px) {
  .site-header .brand-logo-panel {
    height: 36px;
    padding: 3px 8px;
  }
}

/* ==========================================================
   desktop-products-spacing-match-biobikes
   ========================================================== */
@media (min-width: 901px) {
  .products {
    padding-top: 24px;
  }
}

/* ==========================================================
   mobile-header-logo-actions-fix
   ========================================================== */
@media (max-width: 680px) {
  .site-header .header-main {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .site-header .brand-logo-panel {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: auto;
    max-width: 155px;
    height: 40px;
    padding: 3px 8px;
  }
  .site-header .brand-logo-panel img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .site-header .header-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .site-header .header-actions .action-btn {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }
  .site-header .header-main > .search,
  .site-header .header-main > .search.mobile-open {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* ==========================================================
   gravel-banner-height-match-hero – sichtbare Höhe des großen
   Zubehör-Banners an die wirksame Höhe des Aktions-/Hero-Banners
   (.hero-feature) angleichen. Breite/Layout unverändert.
   ========================================================== */
.gravel-accessory-banner figure {
  height: 440px;
}
.gravel-accessory-banner img {
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
@media (max-width: 980px) {
  .gravel-accessory-banner figure {
    height: 430px;
  }
}
@media (max-width: 760px) {
  .gravel-accessory-banner figure {
    height: 400px;
  }
}
@media (max-width: 560px) {
  /* KORREKTUR (Auftrag "Giant-Kachel mobil zu hoch"): Die feste Höhe
     blieb ab hier für jede schmalere Breite bei 370px stehen, während
     die Spaltenbreite weiter sank (536px bei 560px -> 366px bei 390px)
     - Bild (1629x543, nativ 3:1) wurde dadurch zunehmend quadratisch
     zugeschnitten statt wie ".accessory-duo-banner figure" (aspect-ratio
     16/8, ebenfalls einspaltig ab 760px) proportional zur Breite zu
     skalieren. "aspect-ratio" statt fixer "height" lässt die Kachel mit
     der Breite mitschrumpfen und an allen Mobilbreiten exakt auf Höhe
     der beiden folgenden Kacheln bleiben. Bei 16/8 zeigt object-fit:cover
     weiterhin die volle Bildhöhe (kein vertikaler Crop) und beschneidet
     nur die Ränder links/rechts - Rad und Packtaschen liegen mit
     deutlichem Rand innerhalb des sichtbaren Mittelbereichs. */
  .gravel-accessory-banner figure {
    height: auto;
    aspect-ratio: 16 / 8;
  }
}

/* ==========================================================
   leasing-section-two-col – Leasing-Box wie im Index-Mockup
   wieder zweispaltig (Text + Bild) aufbauen. Breite exakt wie
   .service-grid, Bildspalte folgt der Höhe der Textspalte
   (gleiche Technik wie im Service-Bereich darüber).
   ========================================================== */
.advice-box {
  width: min(calc(100% - 320px), 1260px);
  margin-inline: auto;
  min-height: 0;
  grid-auto-rows: max-content;
}
@media (max-width: 1400px) {
  .advice-box {
    width: min(calc(100% - 220px), 1120px);
  }
}
@media (max-width: 1100px) {
  .advice-box {
    width: min(calc(100% - 120px), 980px) !important;
  }
}
@media (max-width: 900px) {
  .advice-box {
    width: min(calc(100% - 40px), var(--max)) !important;
  }
}
@media (max-width: 680px) {
  .advice-box {
    width: min(calc(100% - 24px), var(--max)) !important;
  }
}
.advice-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: start;
  min-height: 0;
  gap: 12px;
  padding: 12px 14px 12px;
}
.advice-copy h2 {
  margin: 0;
  color: #ffffff;
}
.advice-copy p:not(.eyebrow) {
  margin: 0;
}
.advice-copy .btn {
  align-self: flex-start;
}
@media (max-width: 680px) {
  .advice-copy {
    padding: 10px 12px;
  }
}
.advice-art {
  align-self: stretch;
  min-height: 0;
  height: 100%;
}
@media (max-width: 900px) {
  .advice-art {
    min-height: 280px;
    height: auto;
  }
}
@media (max-width: 680px) {
  .advice-art {
    min-height: 220px;
  }
}

.leasing-partners {
  margin-top: 4px;
}
.leasing-partners-label {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, .5);
  font-size: .72rem;
  font-weight: 640;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.leasing-partner-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.leasing-partner-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-top: 2px solid rgba(210, 70, 20, .5);
  border-radius: 10px;
  background: rgba(0, 0, 0, .26);
  text-align: center;
  transition: background .2s ease, border-color .2s ease;
}
.leasing-partner-tile:hover {
  background: rgba(0, 0, 0, .34);
  border-top-color: var(--accent);
}
.leasing-partner-tile img {
  max-width: 100%;
  max-height: 26px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.leasing-partner-tile span {
  color: rgba(255, 255, 255, .88);
  font-size: .74rem;
  font-weight: 680;
  line-height: 1.15;
  letter-spacing: -.005em;
}
@media (max-width: 680px) {
  .leasing-partners {
    margin-top: 2px;
  }
  .leasing-partners-label {
    margin-bottom: 8px;
    font-size: .66rem;
  }
  .leasing-partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .leasing-partner-tile {
    min-height: 40px;
    padding: 7px 8px;
  }
  .leasing-partner-tile span {
    font-size: .64rem;
  }
}

/* ==========================================================
   leasing-brand-gap-fix – Leerraum zwischen Leasing- und
   Marken-Bereich auf das Maß des Service→Leasing-Abstands
   reduzieren. Betrifft nur den unteren Innenabstand der
   Leasing-Sektion (Weißraum nach dem Inhalt), Leasing-Inhalt
   (advice-box/-copy/-art) bleibt unverändert. Ein Wert für
   Desktop/Notebook/Mobile, da beide Zielabstände auf denselben
   Wert konvergieren.
   ========================================================== */
.advice {
  padding-bottom: 38px;
}

/* ==========================================================
   leasing-service-typography-match – Typografie der Leasing-Box
   (.advice-copy) an die Service-Textbox (.service-content)
   angleichen. Referenzwerte 1:1 aus den tatsächlich wirksamen
   .service-content-Regeln übernommen:
   - .section-title: font-size clamp(1.2rem,1.65vw,1.65rem),
     line-height 1.1 (Rest – letter-spacing/Gewicht/Farbe – war
     bereits identisch)
   - .section-copy: color rgba(255,255,255,.84) (Größe/Zeilenhöhe
     waren bereits identisch)
   - .service-point h4: font-size .82rem / mobil .76rem,
     font-weight 700, Farbe #fff – als Referenz für das kleine
     Leasing-Partner-Label und den Button-Text
   Nur Typografie/Farbe, kein Layout/Umbruch/Inhalt.
   ========================================================== */
.advice-copy h2 {
  font-size: clamp(1.2rem, 1.65vw, 1.65rem) !important;
  line-height: 1.1 !important;
}
.advice-copy p:not(.eyebrow) {
  color: rgba(255,255,255,.84) !important;
}
.advice-copy .btn {
  font-size: .82rem !important;
  font-weight: 700 !important;
}
.advice-copy p.leasing-partners-label {
  font-size: .78rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}
.leasing-partner-tile span {
  font-weight: 700;
}
@media (max-width: 680px) {
  .advice-copy h2 {
    font-size: clamp(1.03rem, 5.4vw, 1.33rem) !important;
  }
  .advice-copy .btn {
    font-size: .76rem !important;
  }
  .advice-copy p.leasing-partners-label {
    font-size: .7rem !important;
  }
}

/* ==========================================================
   dealer-story-compact-height – Fachhandelsbereich (Text- und
   Bildbox) auf die vom Leasing-Bereich vorgegebene kompakte Höhe
   bringen (Referenz: .advice-box, effektive Höhe live gemessen
   ca. 345-365px bei Desktop-/Notebook-Breiten). Entfernt die
   feste min-height-Untergrenze und strafft die internen Abstände
   analog zum Leasing-Bereich; beide Spalten bleiben durch das
   bestehende Grid (align-items: stretch) weiterhin exakt gleich
   hoch. Mobil erhält die Bildspalte – wie beim Leasing-Bereich –
   eine eigene kompakte Mindesthöhe statt der Desktop-Angleichung.
   ========================================================== */
.dealer-story-copy,
.dealer-story-image {
  min-height: 0;
}
.dealer-story-copy {
  padding: clamp(18px, 2vw, 26px);
}
.dealer-story-copy .dealer-kicker {
  margin-bottom: 6px;
}
.dealer-story-copy p {
  margin-top: 10px;
}
.dealer-story-link {
  margin-top: 14px;
}
.dealer-story-points {
  margin-top: 14px;
}
@media (max-width: 900px) {
  .dealer-story-image {
    min-height: 280px;
  }
}
@media (max-width: 680px) {
  .dealer-story-copy {
    padding: 20px 18px;
  }
  .dealer-story-image {
    min-height: 220px;
  }
}

/* ==========================================================
   seo-content – aufklappbarer SEO-Textbereich vor dem Footer.
   Design-Tokens der Homepage (--ink/--muted/--soft/--accent/
   --radius) wiederverwendet, Orange nur als Akzent. Natives
   <details>/<summary>, keine JS-Abhängigkeit.
   ========================================================== */
.seo-content {
  padding: 8px 0 56px;
  background: #fff;
}
.seo-toggle {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--soft);
  overflow: hidden;
}
.seo-toggle-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
}
.seo-toggle-summary::-webkit-details-marker {
  display: none;
}
.seo-toggle-summary::marker {
  content: "";
}
.seo-toggle-head {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.seo-toggle-kicker {
  color: var(--accent-dark);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.seo-toggle-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.05rem, 1.6vw, 1.32rem);
  line-height: 1.32;
  letter-spacing: -.012em;
  font-weight: 740;
}
/* "Mehr erfahren" – seit 2026-09-04 ein Primärbutton statt einer
   weißen Umrandungsschaltfläche. Der Knopf ist ein <span> im
   <summary>, kann die Klasse ".btn btn-primary" also nicht einfach
   übernehmen; übernommen sind stattdessen deren Maße und Typografie
   (min-height 46px, padding 0 18px, font-size .96rem, font-weight
   720) und die zentralen Farbtoken --accent/--accent-dark. Der
   Radius kommt wie überall aus --fs24-btn-radius. */
.seo-toggle-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--fs24-btn-radius, 10px);
  background: var(--accent);
  color: #fff;
  font-size: .96rem;
  font-weight: 720;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.seo-toggle-summary:hover .seo-toggle-cta,
.seo-toggle-summary:focus-visible .seo-toggle-cta {
  background: var(--accent-dark);
  color: #fff;
}
.seo-toggle-cta-label-open {
  display: none;
}
.seo-toggle[open] .seo-toggle-cta-label-closed {
  display: none;
}
.seo-toggle[open] .seo-toggle-cta-label-open {
  display: inline;
}
.seo-toggle-chevron {
  width: 16px;
  height: 16px;
  stroke-width: 2.3;
  transition: transform .25s ease;
}
.seo-toggle[open] .seo-toggle-chevron {
  transform: rotate(180deg);
}
.seo-toggle-body {
  padding: 6px 26px 34px;
  border-top: 1px solid var(--line);
}

.seo-intro {
  position: relative;
  max-width: 760px;
  margin: 26px 0 0;
  padding-left: 18px;
}
.seo-accent-line {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), transparent);
}
.seo-kicker {
  margin: 0 0 8px;
  color: var(--accent-dark);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.seo-intro-lead {
  margin: 0;
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1.6;
}

.seo-section {
  margin-top: 44px;
}
.seo-section h3 {
  max-width: 720px;
  margin: 0 0 18px;
  color: var(--ink);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.24;
  letter-spacing: -.015em;
  font-weight: 740;
}

.seo-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.seo-benefit-card {
  display: block;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
}
.seo-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(210, 70, 20, .1);
  color: var(--accent-dark);
}
.seo-benefit-icon .icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
}
.seo-benefit-card h4 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: .96rem;
  line-height: 1.28;
  font-weight: 740;
}
.seo-benefit-card p {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.5;
}

.seo-text-block {
  max-width: 760px;
}
.seo-text-block p {
  margin: 0;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.65;
}
.seo-text-block p + p {
  margin-top: 14px;
}
.seo-text-block-icon {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.seo-text-block-icon-el {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--soft);
  color: var(--accent-dark);
}
.seo-text-block-icon-el .icon {
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}

.seo-check-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.seo-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}
.seo-check-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}
.seo-check-icon .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
}
.seo-check-text {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}
.seo-check-text strong {
  color: var(--ink);
  font-weight: 740;
}

.seo-brand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.seo-brand-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: 14px;
  background: #fff;
}
.seo-brand-card-wide {
  grid-column: 1 / -1;
}
.seo-brand-card h4 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 780;
  letter-spacing: -.01em;
}
.seo-brand-tagline {
  margin: 0 0 14px;
  color: var(--accent-dark);
  font-size: .78rem;
  font-weight: 640;
}
.seo-brand-models {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.seo-brand-models li {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.seo-brand-models li:first-child {
  padding-top: 0;
  border-top: 0;
}
.seo-brand-models li span {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-weight: 700;
}

.seo-shipping-block {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 44px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(210, 70, 20, .06), transparent 60%), var(--soft);
}
.seo-shipping-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--accent);
  color: #fff;
}
.seo-shipping-icon .icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}
.seo-shipping-block h3 {
  margin: 0 0 10px;
}
.seo-shipping-block p {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}
.seo-shipping-block p + p {
  margin-top: 10px;
}

.seo-cta-block {
  margin-top: 44px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--ink);
}
.seo-cta-block h3 {
  margin: 0 0 10px;
  color: #fff;
}
.seo-cta-block p {
  max-width: 640px;
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: .92rem;
  line-height: 1.55;
}
.seo-cta-final {
  margin-top: 14px !important;
  color: #fff !important;
  font-size: 1.05rem !important;
  font-weight: 760;
  letter-spacing: -.01em;
}

@media (max-width: 900px) {
  .seo-benefits-grid,
  .seo-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .seo-content {
    padding: 4px 0 40px;
  }
  .seo-toggle {
    border-radius: 16px;
  }
  .seo-toggle-summary {
    flex-wrap: wrap;
    padding: 18px 18px;
  }
  .seo-toggle-cta {
    padding: 10px 14px;
    font-size: .8rem;
  }
  .seo-toggle-body {
    padding: 4px 18px 26px;
  }
  .seo-intro {
    padding-left: 14px;
  }
  .seo-section {
    margin-top: 34px;
  }
  .seo-benefits-grid,
  .seo-brand-grid {
    grid-template-columns: 1fr;
  }
  .seo-shipping-block {
    flex-direction: column;
    margin-top: 34px;
    padding: 20px;
  }
  .seo-cta-block {
    margin-top: 34px;
    padding: 22px;
  }
}

/* ==========================================================
   homepage-section-width-match – äußere Breite (linke/rechte
   Außenkante) der großen Sektionen ab "Dein Bike kommt fahrbereit
   bei dir an." an die Marken-Sektion (.brand-hero-inner) angleichen.
   Referenz: .brand-hero-inner sitzt verschachtelt in einem
   .container (width: min(calc(100% - 52px), var(--max))) und legt
   selbst nochmal width: min(calc(100% - 220px), calc(var(--max) - 220px))
   drauf – wirksam relativ zum Viewport bei Breiten > 1220px also
   width: min(calc(100% - 272px), 1320px). Zwischen 1201–1220px
   greift beim äußeren .container noch dessen eigener 1220px-
   Breakpoint (36px statt 52px Rand), wirksam ergibt das dort
   width: min(calc(100% - 256px), 1320px) – beide Stufen werden
   hier repliziert, damit die Angleichung im gesamten Desktop-
   Bereich exakt ist, nicht nur näherungsweise. Die hier
   aufgeführten Elemente hängen NICHT in einem zusätzlichen
   .container, daher wird dieselbe wirksame Zielbreite direkt
   (einstufig) gesetzt. Nur Breite/Außenkante, keine Höhen-,
   Abstands- oder Spaltenänderung. Ausschließlich ab 1201px aktiv,
   damit die bestehende Tablet-/Mobile-Breitenlogik jedes Bereichs
   unverändert bleibt und keine feste Desktopbreite auf kleinere
   Screens durchschlägt. Alles oberhalb von .service-order-flow-wrap
   bleibt unangetastet. .brand-hero-inner selbst wird nicht verändert.
   ========================================================== */
@media (min-width: 1201px) and (max-width: 1220px) {
  .service-order-flow-container,
  .service-grid,
  .advice-box,
  .dealer-story-grid,
  .seo-content .container,
  .newsletter-inner {
    width: min(calc(100% - 256px), 1320px) !important;
    margin-inline: auto !important;
  }
}
@media (min-width: 1221px) {
  .service-order-flow-container,
  .service-grid,
  .advice-box,
  .dealer-story-grid,
  .seo-content .container,
  .newsletter-inner {
    width: min(calc(100% - 272px), 1320px) !important;
    margin-inline: auto !important;
  }
}

/* Button-Hover/Focus vereinheitlichen (Auftrag "Hover-Reaktion aller
   Frontpage-Buttons konsistent machen"): die vorherige Sonderregel
   ".bestseller-cta:hover{color:#fff}" (siehe alte Fassung dieses
   Kommentars) hatte den Bestseller-Button bewusst vom Hover-Verhalten
   der übrigen ".btn"-Buttons (Leasing anfragen, Weidemann-Fahrrad-
   Story, Aktionsbanner) abgekoppelt. Die übrigen Buttons färben ihre
   weiße Schrift beim Hover über Blocksys globales
   "a:hover{color:var(--theme-link-hover-color)}" (main.min.css) bereits
   automatisch in Blockys Akzentfarbe (--theme-link-hover-color, aktuell
   #1559ed) ein - das ist das für alle Buttons gewünschte Referenz-
   verhalten. Statt dies weiterhin dem Zufall der Blocksy-Spezifität zu
   überlassen, macht diese Regel es für alle ".btn" explizit (gleiche
   Variable, gleicher Effekt) und ergänzt "focus-visible" analog zu
   "hover", da Blockys eigene Fokus-Regel nur einen Outline setzt, aber
   keine Textfarbe ändert. Nur "color" betroffen - Form, Hintergrund,
   Rahmen und Layout der Buttons bleiben unverändert (siehe ".btn"/
   ".btn-primary"/".btn-dark" weiter oben); der weiche Übergang kommt aus
   der ergänzten "color"-Transition in der ".btn"-Basisregel weiter
   oben. */
.btn:hover,
.btn:focus-visible {
  color: var(--theme-link-hover-color);
}

/* AUSNAHME für die orange hinterlegten Buttons (Auftrag 2026-09-02,
   "Primary-Button-Hover final vereinheitlichen").

   Die Regel direkt darüber färbt die Schrift ALLER ".btn" im Hover in
   Blockys Akzentfarbe. Auf den dunklen und hellen Varianten ist das
   unauffällig, auf dem orangen Knopf ergab es Blau auf Orange – im
   Browser gemessen 1,53:1 Kontrast, also praktisch unlesbar. Orange
   hinterlegte Buttons behalten deshalb in jedem Zustand ihre weiße
   Schrift; nur der Hintergrund wird beim Hover dunkler.

   AUSDRÜCKLICH NICHT betroffen: normale Text- und Pfeillinks sowie
   ".btn-dark"/".btn-light" – deren dunkelblauer Hover bleibt, wie er
   ist. Die Regel darüber wurde dafür nicht angefasst.

   Gleiche Spezifität (0,2,0) wie ".btn:hover" – gewinnt über die
   Position. Sie darf deshalb nicht vor jenen Block wandern. */
.btn-primary:hover,
.btn-primary:focus-visible,
.hero-actions .btn-primary:hover,
.hero-actions .btn-primary:focus-visible {
  color: #fff;
}

/* ==========================================================
   FS24 Global Product Card – 2026
   Auftrag: hochwertige, globale Produktkarte (Startseite + später
   Kategorie/Archiv/Suche). Ergänzt gezielt neue, eigenständig benannte
   Klassen statt die vorhandenen ".product-card"-Kaskaden weiter
   aufzuschichten. Die bestehende Mobile-2-Spalten-Logik (Block
   "V11 – nur Smartphone" oben) bleibt unangetastet; alles hier ist
   entweder neu (keine Kollision) oder ausdrücklich auf ">680px"
   begrenzt.
   ========================================================== */

/* --- Bild-Stack braucht "display:block" statt des ursprünglichen
   "display:grid;place-items:center" an alle Breiten (sonst kollabiert
   die absolut positionierte Bildfläche auf Mobile auf Inhaltsgröße,
   siehe ".product-photo-stack" unten). Aspect-Ratio/Hintergrund bleiben
   dagegen Desktop/Tablet-Feinschliff – Mobile behält das bestehende
   V11-System. --- */
.product-media {
  display: block;
}
@media (min-width: 681px) {
  .product-media {
    aspect-ratio: 1.08;
    background: #f8f6f2;
  }
}

/* --- Bild-Stack: trägt Haupt- und optionales Hover-Zweitbild
   deckungsgleich übereinander. Reines Progressive Enhancement – ohne
   zweites Galeriebild existiert einfach nur das erste <img>. --- */
.product-media-link {
  display: block;
  width: 100%;
  height: 100%;
}
.product-photo-stack {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.product-photo-stack .product-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity .45s ease, transform .5s cubic-bezier(.2, .75, .2, 1);
}
.product-photo-stack .product-photo--alt {
  opacity: 0;
}

/* --- Lagerstatus: Farbe richtet sich nach dem echten WooCommerce-Status
   statt immer grün zu sein (Fix: "Aktuell nicht verfügbar" erschien
   bisher fälschlich in der "verfügbar"-Farbe). --- */
.stock--in,
.stock--low {
  color: #247247;
}
.stock--in::before,
.stock--low::before {
  background: #2fac68;
  box-shadow: 0 0 0 4px rgba(47, 172, 104, .12);
}
.stock--low {
  color: var(--accent-dark);
}
.stock--low::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(210, 70, 20, .14);
}
.stock--backorder {
  color: var(--muted);
}
.stock--backorder::before {
  background: #9aa0a4;
  box-shadow: 0 0 0 4px rgba(101, 107, 112, .12);
}
.stock--out {
  color: var(--muted);
}
.stock--out::before {
  background: #b7bcbf;
  box-shadow: none;
}

/* --- Produkttitel: stabile Titelzone statt Ellipsis-Abschneiden --- */
.product-card .product-title {
  min-height: 2.6em;
  margin: 6px 0 8px;
  line-height: 1.3;
}

/* --- Preisbereich: rasterstabil, unabhängig davon ob Sale-/UVP-Preis
   vorhanden ist oder die sekundäre Warenkorb-Aktion angezeigt wird. --- */
.price-row {
  min-height: 48px;
}
.price {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}
.price del {
  display: block;
}
.price ins {
  display: block;
  text-decoration: none;
}
.price--empty {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 500;
}

/* --- CTA-Zeile: "Zum Produkt" (primär bei nicht direkt kaufbaren /
   variablen Produkten). Raum wird im Grundlayout reserviert, damit der
   Desktop-Hover keinen Layout-Sprung verursacht (siehe Hover-Regeln
   weiter unten). Auf Touch/Tastatur ist der Zugang zur PDP dadurch
   unabhängig vom Hover gesichert. --- */
.product-cta-row {
  margin-top: 14px;
}
.product-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  border-radius: var(--fs24-btn-radius, 10px);
  background: var(--accent);
  color: #fff;
  font-weight: 720;
  font-size: .88rem;
  letter-spacing: -.01em;
  transition: background .2s ease;
}
.product-cta .icon {
  width: 16px;
  height: 16px;
  transition: transform .2s ease;
}
.product-cta:hover,
.product-cta:focus-visible {
  background: var(--accent-dark);
}
.product-cta:hover .icon,
.product-cta:focus-visible .icon {
  transform: translateX(3px);
}
/* Schriftfarbe in ALLEN Zustaenden weiss. Blocksys globales
   "a:hover { color: var(--theme-link-hover-color) }" (Spezifitaet 0,1,1)
   schlaegt ".product-cta" (0,1,0) - die Beschriftung wurde im Hover
   dadurch blau (#1559ed auf Orange, unlesbar). Gegenmittel wie bei den
   uebrigen Primary-Buttons: Elementauswahl "a.product-cta" statt
   "!important", damit die Regel ohne Nebenwirkungen gewinnt. Die
   Pfeil-SVG erbt ueber "stroke: currentColor" automatisch mit. */
a.product-cta,
a.product-cta:link,
a.product-cta:visited,
a.product-cta:hover,
a.product-cta:focus,
a.product-cta:focus-visible,
a.product-cta:active {
  color: #fff;
}
/* Sichtbarer Tastaturfokus - der Button liegt auf Orange, deshalb ein
   dunkler Ring mit Abstand statt des hellen Browser-Defaults. */
.product-cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* --- Hover-Reveal nur auf echten Hover-Geräten: nur noch das zweite
   Galeriebild blendet sanft ein.

   Die CTA-Zeile war hier bis 2026-09-03 zusaetzlich per "opacity: 0 /
   pointer-events: none" versteckt und erschien erst beim Ueberfahren
   der Karte. Das ist entfallen (Auftrag "Zum Produkt dauerhaft
   sichtbar"): Der Button ist jetzt auf allen Geraeten und in jedem
   Zustand sichtbar und bedienbar - auf dem Desktop genauso wie auf
   Touch und bei reiner Tastaturbedienung. Der Platz war ohnehin schon
   im Grundlayout reserviert, es gibt dadurch keinen Layout-Sprung.
   Die uebrigen Hover-Effekte der Karte (Bildwechsel, Zoom, Schatten)
   bleiben unveraendert. --- */
@media (hover: hover) and (pointer: fine) {
  /* Nur das Alt-Bild einblenden – es liegt im DOM nach dem Hauptbild und
     deckt es dadurch beim Einblenden automatisch ab. Das Hauptbild selbst
     bleibt unangetastet, damit Karten ohne zweites Galeriebild beim Hover
     nicht kurz "leer" werden. */
  .product-card:hover .product-photo-stack .product-photo--alt,
  .product-card:focus-within .product-photo-stack .product-photo--alt {
    opacity: 1;
  }
}

/* --- Mobile/Touch-Feinschliff für die neuen Elemente (bestehendes
   V11-2-Spalten-System bleibt unverändert) --- */
@media (max-width: 680px) {
  .product-title {
    min-height: 0;
  }
  .price-row {
    min-height: 34px;
  }
  .product-cta-row {
    margin-top: 9px;
  }
  .product-cta {
    min-height: 34px;
    padding: 0 8px;
    border-radius: var(--fs24-btn-radius, 10px);
    font-size: .66rem;
    gap: 4px;
    white-space: nowrap;
  }
  .product-cta .icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }
}

/* ==========================================================
   FS24 Produktkarte – Design & Informationsdichte (Auftrag
   "Produktkarten-Design/Informationsdarstellung", Staging-Test
   /staging-produktkarten-test/). Ergänzt gezielt den Block
   "FS24 Global Product Card – 2026" oben, statt dessen Regeln zu
   verändern. Gilt global für die eine gemeinsame Karte (Startseite,
   später Kategorie/Suche) – keine Sonderlogik für die Testseite.
   ========================================================== */

/* --- Aufgabe 1: Produktbild kleiner/zentrierter innerhalb der
   gleich hoch bleibenden Bildfläche. Prozentuales statt festes
   Padding, damit Fahrräder/Helme nicht an allen vier Seiten
   anstoßen, unabhängig vom Kartenformat. Nur Desktop/Tablet – das
   bestehende Mobile-V11-System (padding:8px !important) bleibt
   unangetastet. --- */
@media (min-width: 681px) {
  .product-photo-stack .product-photo {
    padding: 9%;
    object-fit: contain;
  }
}

/* --- Aufgabe 2: WooCommerce liefert bei fehlender Bilddatei über
   get_image()/wc_placeholder_img() im Regelfall automatisch einen
   sauberen Placeholder statt eines kaputten Bildsymbols (siehe
   content-product.php). Auf diesem Staging fehlt zusätzlich sogar die
   Bilddatei des WooCommerce-Placeholders selbst (separates, nicht zu
   dieser Aufgabe gehörendes Datenproblem) – ".product-photo--
   placeholder" wird deshalb bewusst unsichtbar geschaltet statt nur
   abgedunkelt, damit in jedem Fall (fehlendes Produktbild UND
   fehlender WC-Placeholder) nur die neutrale Bildflächen-Farbe zu
   sehen ist – kein kaputtes Symbol, kein Alt-Text. */
.product-photo--placeholder {
  visibility: hidden;
}

/* --- Aufgabe 3/4: Normalpreis klar lesbar, Sale-Preis mit
   durchgestrichenem UVP und "Du sparst"-Zeile. Farbgebung greift auf
   die bestehenden Marken-Tokens zurück (Orange als Akzent), keine
   zusätzliche grelle Farbe, kein SALE-Sticker. --- */
.price .woocommerce-Price-amount {
  font-size: 1.05rem;
  font-weight: 780;
  letter-spacing: -.01em;
  color: var(--ink);
}
.price--sale del {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
  text-decoration: line-through;
}
.price--sale del .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.price--sale ins {
  font-size: 1.05rem;
  font-weight: 780;
  letter-spacing: -.01em;
  color: var(--ink);
}
.price--sale .savings {
  font-size: .74rem;
  font-weight: 650;
  color: var(--accent-dark);
}

/* --- Aufgabe 7/8: Größen-Chips, auf Basis der bereits bestehenden
   Mockup-Klassen ".size-row"/".size-row span" (siehe weiter oben),
   damit kein zweites Chip-Design entsteht. Zusatzzustände: nicht
   verfügbare Größe zurückhaltend gedimmt, Sammel-Chip für
   überzählige Größen. --- */
.size-row {
  flex-wrap: wrap;
}
.size-row span.is-unavailable {
  color: var(--muted);
  border-color: var(--line);
  background: transparent;
  text-decoration: line-through;
  opacity: .55;
}
.size-row span.size-more {
  border-style: dashed;
  color: var(--muted);
  background: transparent;
}

/* --- Aufgabe 10: YITH-Wunschzettel-Button kompakter/ruhiger, damit
   das Produktbild im Mittelpunkt steht. Reine CSS-Überlagerung der
   Plugin-eigenen Klassen (kein Plugin-Code verändert) – Layout wird
   an die bestehende ".heart"-Kreisknopf-Optik der Nicht-YITH-
   Variante angeglichen. Bewusst auf ".product-media" begrenzt, damit
   nur die Produktkarte betroffen ist, nicht z. B. die Einzelseite. --- */
.product-media .yith-add-to-wishlist-button-block {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
  width: auto;
  margin: 0;
}
.product-media .yith-wcwl-add-to-wishlist-button {
  width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(10, 12, 13, .14);
}
.product-media .yith-wcwl-add-to-wishlist-button svg,
.product-media .yith-wcwl-add-to-wishlist-button img {
  width: 18px;
  height: 18px;
}
.product-media .yith-wcwl-add-to-wishlist-button__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================
   FS24 Produktkarte – durchgängig weiße Karte (Folgeauftrag
   "Produktkarten-Darstellung weiter optimieren"). Ab 681px hatte
   ".product-media" weiterhin einen eigenen beigen Hintergrund
   (#f8f6f2, siehe Block "FS24 Global Product Card – 2026" weiter
   oben) – dadurch wirkte die Bildfläche wie ein zweites, farblich
   abgesetztes Rechteck innerhalb der Karte, und transparente
   Produktfotos (z. B. der Flaschenhalter mit echtem PNG-Alphakanal)
   zeigten diesen Farbton statt eines neutralen Weiß. Per Live-
   Messung bereits bestätigt: die Bildfläche nutzt schon die volle
   Kartenbreite (309 von 311px Kartenbreite, Rest ist Rahmen-
   Rundung) – die "Box-im-Box"-Wirkung kam ausschließlich vom
   Farbkontrast, nicht von echtem Innenabstand. Zusätzlich entfernt
   eine sehr dezente, kaum sichtbare "border-bottom" (rgba(...,.08),
   ebenfalls aus dem alten Block) die letzte optische Trennlinie –
   diese Linie war unabhängig vom Breakpoint gesetzt, daher hier ohne
   Media Query. Ausschließlich Hintergrundfarbe/Trennlinie
   vereinheitlicht – Bild-Seitenverhältnis, Kartenhöhe und das
   9%-Padding von Aufgabe 1 (Produktgröße) bleiben unverändert, damit
   an der bereits korrekten Skalierung nichts verschlechtert wird. --- */
.product-media {
  border-bottom: none;
}
@media (min-width: 681px) {
  .product-media {
    background: #fff;
  }
}

/* ==========================================================
   FS24 Produktkarte – vertikale Raumnutzung (Folgeauftrag
   "Produktkarten vertikal optimieren"). Zwei Probleme:
   1) Die Bildfläche war mit aspect-ratio 1.08 (fast quadratisch)
      deutlich höher, als das breiteste reale Motiv (komplette
      Fahrräder, Quelldateien im Verhältnis ~1,5) überhaupt braucht
      - bei Seitenverhältnis 1,5 füllt ein Fahrrad die Breite bereits
      vollständig aus, der zusätzliche Höhenspielraum blieb also
      ungenutzter Leerraum unter/über dem Bild.
   2) ".product-info" hatte oben 24px Innenabstand (siehe Block
      weiter oben), was zusammen mit (1) die Marke unnötig weit vom
      Bild wegschob.
   aspect-ratio 1.35 liegt bewusst noch UNTER dem realen Fahrrad-
   Seitenverhältnis (~1,5): Fahrräder bleiben dadurch weiterhin
   breiten-limitiert (object-fit: contain skaliert sie also exakt
   gleich groß wie vorher, keine Vergrößerung, keine Beschneidung -
   nur weniger toter Raum darüber/darunter). Die 9%-Bildinnenabstand
   aus Aufgabe 1 bleibt unangetastet. Kein Produkt wird dadurch
   kleiner als vorher, nur die Box selbst niedriger. */
@media (min-width: 681px) {
  .product-media {
    aspect-ratio: 1.35;
  }
}
.product-info {
  padding-top: 10px;
}

/* ==========================================================
   FS24 Produktkarte – vergleichbare optische Produktgröße. Jedes
   Foto bekommt in content-product.php einen individuell berechneten
   "--photo-scale"-Wert (Inhalts-Bounding-Box vs. Bildfläche, siehe
   fs24_pc_get_photo_scale() dort) als Inline-Style mit. Schmal
   freigestellte Produkte (z. B. ein Flaschenhalter) werden dadurch
   zusätzlich zu object-fit:contain leicht gezoomt, randfüllende
   Motive (z. B. komplette Fahrräder) bleiben bei Faktor 1 = unverändert.
   ".product-media" hat bereits "overflow:hidden" (Basis-Regel), das
   zoomt daher nur Leerraum weg, nie echten Bildinhalt.
   Default 1 greift, falls kein Wert gesetzt ist (z. B. Placeholder-Bild). */
.product-photo-stack .product-photo {
  transform: scale(var(--photo-scale, 1));
  transform-origin: center center;
}

/* Bestehender Hover-Zoom (siehe ".product-card:hover .product-photo"
   weiter oben, ungefähr Zeile 2174) setzte bislang direkt
   "scale(1.055) translateY(-2px)" und hätte den individuellen
   Skalierungsfaktor beim Hover kurzzeitig überschrieben/zurückgesetzt.
   Hier stattdessen mit dem Faktor kombiniert, damit der Hover-Effekt
   erhalten bleibt, ohne die Zoomstufe zu verlieren. */
.product-card:hover .product-photo {
  transform: scale(calc(var(--photo-scale, 1) * 1.02)) translateY(-2px);
}
@media (max-width: 680px) {
  /* Die bestehende Mobile-V11-Regel setzt bei :hover bewusst
     "transform: none !important" (verhindert hängengebliebenen
     Touch-Hover-Zoom) - das würde ohne diese Ergänzung auch den
     Basis-Zoomfaktor mit ausblenden und die Produktgröße beim
     Antippen kurz "springen" lassen. */
  .product-card:hover .product-photo {
    transform: scale(var(--photo-scale, 1)) !important;
  }
}

/* ==========================================================
   FS24 Produktkarte – CTA "Zum Produkt" immer bündig unten
   (Folgeauftrag "CTA-Ausrichtung korrigieren"). ".product-card" ist
   bereits "display:flex; flex-direction:column" (Basis-Regel, siehe
   weiter oben), ".product-info" war darin aber ein normaler Block
   ohne eigenes Flex-Wachstum - der ungenutzte Rest der (durch das
   CSS-Grid auf Zeilenhöhe gestreckten) Karte blieb dadurch als toter
   Freiraum NACH ".product-cta-row" stehen, statt gleichmäßig vor dem
   Button zu landen. Buttons standen dadurch je nach Titel-/Größen-/
   Preisumfang auf unterschiedlicher Höhe.
   Fix: ".product-info" selbst wird zur Flex-Spalte und wächst
   ("flex:1") auf die volle verbleibende Kartenhöhe, ".product-cta-row"
   bekommt "margin-top:auto" statt eines festen Abstands - der
   automatische Leerraum sammelt sich dadurch IMMER direkt vor dem
   Button, unabhängig von Titellänge, Größenanzahl, Lagerstatus-Text
   oder Preisdarstellung. Keine festen Höhen, keine produktindividuellen
   Abstände. Gilt unverändert für Desktop, Tablet und die mobile
   V11-2-Spalten-Ansicht (kein eigenes @media nötig, da weder
   ".product-card" noch ".product-info" ihr display/flex-Verhalten in
   den bestehenden Mobile-Overrides ändern). Button-Design selbst
   (".product-cta") bleibt unangetastet. --- */
.product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-cta-row {
  margin-top: auto;
}

/* ==========================================================
   USP-/Service-Block – filigranere mobile Darstellung (Auftrag
   "USP-Block mobil verschlanken", 2. Feinschliff-Runde "USP-Block
   mobil deutlich filigraner"). Betrifft ausschließlich ≤680px,
   Desktop/Tablet bleiben über die bestehenden Regeln weiter oben
   unverändert.

   Diese Datei enthält für ".usp-wrap"/".usp-item" mehrere ältere,
   auf frühere Aufträge zurückgehende Layer (Basis-, Dark-Theme-,
   Flat-Design- und diverse Mobile-Feinschliff-Blöcke, teils mit
   "!important" auf ".usp-wrap" padding und ".usp-item"
   min-height/padding, siehe weiter oben). Anstatt diese verteilt
   über die Datei zu editieren (hohes Risiko, an einer Stelle
   Nachbarregeln zu treffen, siehe frühere Sessions), steht dieser
   Block bewusst ganz am Dateiende und gewinnt dadurch bei
   gleicher Spezifität die Kaskade; "!important" nur dort gesetzt,
   wo eine bestehende Regel selbst "!important" verwendet.

   Breite: ".usp-bar" trägt im Markup (front-page.php) zusätzlich
   die Klasse ".container" – die Zeile darunter setzt die Breite
   daher bewusst auf denselben Inset wie ".container" bei ≤680px
   (Zeile ~972: "calc(100% - 24px)", also 12px je Seite), statt
   eines eigenen, breiteren Randes. Dadurch fluchtet der Block mit
   allen übrigen Sektionen der Seite. */
@media (max-width: 680px) {
  .usp-wrap {
    padding: 6px 0 12px !important;
  }
  .usp-wrap .usp-bar {
    width: min(calc(100% - 24px), var(--max));
  }
  .usp-bar {
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(10,12,13,.07);
  }
  .usp-heading {
    padding: 8px 10px 0;
    margin-bottom: 3px;
    font-size: .94rem;
    line-height: 1.12;
  }
  .usp-item {
    min-height: 0 !important;
    padding: 8px 10px !important;
    grid-template-columns: 26px 1fr;
    gap: 8px;
  }
  .usp-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border-color: rgba(255,255,255,.06);
  }
  .usp-icon .icon {
    width: 13px;
    height: 13px;
  }
  .usp-item strong {
    font-size: .76rem;
    line-height: 1.18;
  }
  .usp-item small {
    margin-top: 2px;
    font-size: .68rem;
    line-height: 1.25;
  }
}

/* ==========================================================
   Kategorie-Kacheln (Startseite, "categories-top") – runde
   Pfeil-Buttons dezenter/filigraner auf Mobile (Auftrag
   "Pfeil-Buttons mobil eleganter"). Betrifft ausschließlich
   ≤560px; Desktop/Tablet bleiben über die bestehenden Regeln
   weiter oben (u. a. Zeilen 3023, 3193, 5227) unverändert.
   Steht bewusst am Dateiende, um bei gleicher Spezifität die
   Kaskade zu gewinnen; "!important" nur dort gesetzt, wo eine
   bestehende Regel selbst "!important" verwendet (Zeile 5098
   box-shadow/backdrop-filter, Zeile 5117 Hover-Hintergrund).
   ========================================================== */
@media (max-width: 560px) {
  .categories-top .round-arrow {
    width: 26px;
    height: 26px;
    right: 12px;
    bottom: 12px;
    border: 1px solid rgba(255,255,255,.4);
    background: rgba(255,255,255,.14) !important;
    color: #fff;
    font-size: .68rem;
  }
  .categories-top .action-category-card:hover .round-arrow,
  .categories-top .action-category-card:active .round-arrow {
    background: rgba(255,255,255,.24) !important;
    color: #fff;
    border-color: rgba(255,255,255,.55);
    transform: none;
  }
}

/* ==========================================================
   Kategorie-Kacheln (Startseite, "categories-top") – Beschriftung
   filigraner/dezenter auf Mobile (Auftrag "Hero-Kacheln mobil
   verfeinern"). Betrifft ausschließlich ≤560px; Desktop/Tablet
   bleiben über die bestehende Regel bei Zeile ~5230 unverändert.
   Position/Layout der Kacheln (Grid, Höhen, Bilder) bleiben
   unangetastet, nur Schriftgröße/-gewicht/-höhe und das Pill-
   Padding der ".category-copy" werden reduziert.
   "!important" nur dort gesetzt, wo die bestehende Regel bei
   Zeile ~5233 (font-size/font-weight/line-height) selbst
   "!important" verwendet und sonst gewinnen würde.
   ========================================================== */
@media (max-width: 560px) {
  .categories-top .category-copy {
    padding: 7px 12px;
    border-radius: 11px;
    background: rgba(5,7,7,.54);
  }
  .categories-top .action-category-card h3 {
    font-size: .84rem !important;
    font-weight: 600 !important;
    line-height: 1.08 !important;
  }
}

/* ==========================================================
   Leasing-Block (".advice-box", Startseite) – Korrektur: der
   vorherige Auftrag "Leasing-Hintergrund grün einfärben" hatte
   fälschlich nur die äußere Sektionsfläche (".advice") eingefärbt;
   diese Regel ist daher wieder vollständig entfernt (kein Rest
   stehen gelassen), der äußere Bereich nutzt wieder unverändert
   die bisherige #f5f6f6-Kaskade weiter oben.

   Gemeint war der eigentliche dunkle Graphitblock selbst
   (".advice-box" mit Bild, Copy, Button, Leasing-Partnern). Dessen
   bisherige dunkle Verlaufsfläche (Zeile ~2360, "#353a3e -> #141719
   -> #090b0c") wird hier durch ein zartes, helles Salbeigrün
   ersetzt. ".advice-art" (Bildspalte, eigener dunkler Hintergrund
   "#162f27" als Bildplatzhalter) bleibt bewusst unangetastet, ebenso
   Bild/Buttons/Layout/Abstände.

   Da die Box zuvor auf Dunkelmodus ausgelegt war (weiße Schrift,
   dunkle Partner-Kacheln), sind zusätzlich die Textfarben von
   ".advice-copy"/".leasing-partners-label"/".leasing-partner-tile"
   auf dunkle Farbtöne (--ink/--muted-Familie) umgestellt, um
   Kontrast und Lesbarkeit auf dem neuen hellen Untergrund zu
   erhalten - reine Farbanpassung, keine gestalterische Neurunde.
   Zwei bestehende "!important"-Regeln weiter oben (Zeile ~6415/6424)
   zwangen die Schrift zusätzlich auf Weiß fest; hier mit derselben
   Spezifität + "!important" gekontert. Der Button selbst
   (".btn-dark") bleibt unverändert - er ist bereits ein
   eigenständiges dunkles Element und bleibt dadurch weiterhin gut
   lesbar auf dem neuen hellen Untergrund.
   ========================================================== */
/* Leasing-Kasten: neutral statt grün.
   Derselbe flache Hellgrauton wie ".dealer-story-copy" weiter oben
   (#f7f7f5) - der Kasten darunter gibt damit den Ton vor, und die
   Startseite kommt insgesamt mit weniger Farbe aus. Nur die
   Hintergrundfarbe; Rahmen, Radius, Maße, Bild und Typografie bleiben
   wie gehabt. */
.advice-box {
  background: #f7f7f5;
}
.advice-copy {
  color: var(--ink);
}
.advice-copy h2 {
  color: var(--ink);
}
.advice-copy p:not(.eyebrow) {
  color: rgba(17,19,21,.7) !important;
}
.advice-copy p.leasing-partners-label {
  color: rgba(17,19,21,.55) !important;
}
.leasing-partners-label {
  color: rgba(17,19,21,.55);
}
.leasing-partner-tile {
  background: rgba(255,255,255,.55);
  border-color: rgba(17,19,21,.12);
  border-top-color: rgba(210, 70, 20,.5);
}
.leasing-partner-tile:hover {
  background: rgba(255,255,255,.85);
}
.leasing-partner-tile span {
  color: rgba(17,19,21,.82);
}

/* ==========================================================
   Werkstatt-/Service-Bild (".service-visual-copy h3", Startseite) –
   Bildbeschriftung war ungewollt dunkel: die h3 erbte keine
   explizite Farbe, sodass Blocksys globale (dunkle) Heading-Farbe
   griff statt des auf ".service-visual"/".service" gesetzten
   "color:#fff". Korrektur: h3 bekommt jetzt selbst ein weißes
   "color" plus einen dezenten Text-Shadow (Vorbild: ".accessory-
   trio-title", die auf denselben dunklen Fotos bereits gut lesbar
   ist). Betrifft nur Textfarbe – Bild, Container, Overlay-Kreise
   und Position bleiben unangetastet.

   Mobile (≤680px, Auftrag "Werkstatt-Bildbeschriftung mobil
   filigraner"): Schriftgröße/-gewicht/-zeilenhöhe an die bereits
   abgestimmten mobilen Kachel-Beschriftungen (".accessory-trio-
   title" – "Teile & Komponenten"/"Zubehör"/"Helme & Bekleidung")
   angeglichen, damit die Werkstatt-Kachel dieselbe visuelle
   Gewichtung hat. Steht bewusst am Dateiende, um bei gleicher
   Spezifität die bestehende Regel bei Zeile ~4436 (font-size
   .9rem) zu gewinnen.
   ========================================================== */
.service-visual-copy h3 {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
@media (max-width: 680px) {
  .service-visual-copy h3 {
    font-size: .72rem;
    line-height: 1.14;
    font-weight: 720;
  }
}

/* ==========================================================
   Werkstatt-/Service-Bild (".service-visual::before", Startseite) –
   Auftrag "Werkstattbild wieder heller darstellen". Ursache der
   Abdunklung: ".service-visual::before" ist ein Pseudo-Element,
   das (per Zeile ~1282) über dem gesamten ".service-photo" liegt
   (position:absolute, inset:0, z-index:1) und bislang einen
   180°-Verlauf von rgba(0,0,0,.03) bei 30% bis rgba(4,6,7,.9) trug
   – ab knapp einem Drittel der Bildhöhe war das Foto also fast
   vollständig schwarz überdeckt. Dieser Verlauf wird hier durch
   einen deutlich helleren, rein lokalen Verlauf ersetzt, der erst
   in den unteren ~38% (dort wo ".service-visual-copy h3" sitzt)
   sanft auf max. 50% Schwarz ansteigt – nötig, damit die weiße
   Beschriftung lesbar bleibt, ohne wie zuvor das ganze Bild
   abzudunkeln. Der bisherige orangefarbene Farbstich (zweiter
   Gradient-Layer) entfällt ebenfalls, da er die Originalfarbigkeit
   verfälscht hat. Bildausschnitt, Container und alles andere
   bleiben unangetastet.
   ========================================================== */
.service-visual::before {
  background: linear-gradient(180deg, transparent 62%, rgba(4,6,7,.5) 100%);
}

/* ==========================================================
   GEMEINSAME AUSSENBREITE DER GROSSEN STARTSEITEN-BEREICHE
   ----------------------------------------------------------
   Alle großen Module der Startseite teilen sich ab hier eine
   einzige Breitenlogik, damit sie von oben nach unten dieselbe
   linke und rechte Flucht bilden. Vorher pflegte fast jeder
   Bereich seine eigene Breite: Montagehinweis 100% - 40px,
   Werkstatt und Leasing 100% - 320px (max. 1260px),
   Markenbereich verschachtelt und dadurch effektiv 100% - 272px,
   Händlerbereich und "Gut zu wissen" 100% - 220px, der
   Newsletter-Streifen 100% - 52px. Bei 1440px lagen die linken
   Kanten dadurch zwischen 20px und 160px auseinander.

   Maßgeblich ist die Breite des Händlerbereichs
   (".dealer-story-grid"), also 100% - 220px, gedeckelt auf
   var(--max) - 220px. Die Stufen bei 1200/900/680px entsprechen
   den Stufen, die dieser Bereich schon vorher hatte.

   Warum am Dateiende und mit "!important": Die Startseite lädt
   diese Datei nicht als Datei, ein Optimierer liefert sie inline
   aus - der frühere Anlauf "homepage-section-width-match" (weiter
   oben) kommt dort nachweislich nicht an. Außerdem setzen mehrere
   der bisherigen Einzelregeln selbst "!important". Diese Regel
   steht deshalb zuletzt und gewinnt dadurch verlässlich.

   Es werden ausschließlich Breite und horizontale Außenränder
   gesetzt. Innere Aufteilung, Höhen, Abstände, Typografie,
   Hintergründe und Bilder der Module bleiben unberührt. Die
   Newsletter-Fläche behält ihren durchgehend dunklen Streifen;
   angeglichen wird nur ihr Inhaltscontainer.
   ========================================================== */
.service-order-flow-container,
.service-grid,
.advice-box,
.brand-hero > .container,
.dealer-story-grid,
.seo-content .container,
.fs24-newsletter-container {
  width: min(calc(100% - 220px), calc(var(--max) - 220px)) !important;
  /* Der Newsletter-Streifen brachte noch ein eigenes max-width
     (100% - 36px) mit, das die Breite unabhängig von "width"
     gedeckelt hat. Damit die Breite oben allein maßgeblich ist -
     und es nicht wieder zwei Systeme nebeneinander gibt - wird sie
     hier für alle Bereiche der Gruppe aufgehoben. Die Obergrenze
     steckt bereits in der Breite selbst (var(--max) - 220px). */
  max-width: none !important;
  margin-inline: auto !important;
}

/* Der Markenbereich ist der einzige, der nicht selbst der
   Container ist, sondern in einem steckt. Er füllt ihn deshalb
   ganz aus, statt noch einmal eigene Ränder abzuziehen - sonst
   würde er doppelt eingerückt. */
.brand-hero-inner {
  width: 100% !important;
}

@media (max-width: 1200px) {
  .service-order-flow-container,
  .service-grid,
  .advice-box,
  .brand-hero > .container,
  .dealer-story-grid,
  .seo-content .container,
  .fs24-newsletter-container {
    width: min(calc(100% - 120px), var(--max)) !important;
  }
}

@media (max-width: 900px) {
  .service-order-flow-container,
  .service-grid,
  .advice-box,
  .brand-hero > .container,
  .dealer-story-grid,
  .seo-content .container,
  .fs24-newsletter-container {
    width: min(calc(100% - 40px), var(--max)) !important;
  }
}

@media (max-width: 680px) {
  .service-order-flow-container,
  .service-grid,
  .advice-box,
  .brand-hero > .container,
  .dealer-story-grid,
  .seo-content .container,
  .fs24-newsletter-container {
    width: min(calc(100% - 24px), var(--max)) !important;
  }
}

/* ==========================================================
   WooCommerce-/Blocksy-Buttons auf dieselbe Eckenrundung
   (Auftrag 2026-09-02 "globaler Button-Stil")

   Die eigenen Fahrradshop24-Buttons holen ihren Radius aus
   "--fs24-btn-radius" (siehe :root am Dateianfang). Die von Blocksy und
   WooCommerce ausgegebenen Knöpfe - Warenkorb ("Zurück zum Shop"),
   Login/Registrierung unter "Mein Konto", Kasse, Bestellübersicht,
   Block-Buttons - kommen dort nicht vorbei und standen deshalb auf
   Blocksys Standard von 3px, also fast eckig direkt neben unseren
   Buttons.

   Blocksy setzt seine Buttonform ausschließlich über die Variable
   "--theme-button-border-radius" (main.min.css: "border-radius:
   var(--theme-button-border-radius, 3px)"). Deshalb wird hier genau
   diese Variable umgehängt statt border-radius per Selektorliste und
   !important zu überschreiben: keine Vendor-Datei angefasst, kein
   Spezifitätskampf, updatesicher.

   Bewusst auf ":root" und nicht auf einzelne Buttons: Blocksy setzt die
   Variable an mehreren Stellen selbst neu (Suchmodal, ".ct-search-form"
   - dort abgeleitet aus dem Formularfeld-Radius). Diese lokalen Werte
   sind spezifischer und behalten damit Vorrang - der Suchknopf bleibt
   also zum Suchfeld passend, statt ihm zu widersprechen.

   Nicht betroffen: Formularfelder (--theme-form-field-border-radius)
   und Blocksys Kartenradien - hier geht es nur um Schaltflächen. */
:root {
  --theme-button-border-radius: var(--fs24-btn-radius, 10px);
}

/* ==========================================================
   LOGOS STATT WORTMARKEN – Markenband und Leasingreihe
   (Startseite, 2026-09-04)
   ----------------------------------------------------------
   Beide Reihen zeigen jetzt echte Bilder statt gestylter Textkacheln
   (front-page.php, template-parts/home-logo-functions.php). Die
   bestehenden ".logo-*"-Regeln weiter oben bleiben unverändert
   stehen: Sie greifen weiterhin, sobald eine Kachel mangels Bild auf
   die Wortmarke zurückfällt. Sie zielen ausschließlich auf "span",
   kollidieren also nicht mit den Bildern.

   WARUM JE MARKE EINE EIGENE HÖHE
   Die sechs Wortmarken haben stark verschiedene Seitenverhältnisse –
   von KTM (130:60, zweizeilige Sperrmarke) bis GHOST (800:92). Eine
   gemeinsame Höhe würde GHOST und Mondraker zu breiten Balken machen
   und KTM winzig. Gesetzt wird deshalb je Marke eine Höhe, die die
   Versalhöhe der Wortmarken angleicht; die Breite folgt dem
   Seitenverhältnis und wird nur als Sicherheitsnetz gedeckelt. Damit
   ist auch keine Verzerrung möglich: es wird immer nur eine der
   beiden Achsen vorgegeben.
   ========================================================== */
.brand-logo-item .brand-logo-img {
  display: block;
  width: auto;
  height: var(--fs24-brand-logo-h, 28px);
  max-width: min(170px, 100%);
  object-fit: contain;
}
.logo-cube {
  --fs24-brand-logo-h: 32px;
}
.logo-ktm {
  --fs24-brand-logo-h: 48px;
}
.logo-giant {
  --fs24-brand-logo-h: 28px;
}
.logo-mondraker {
  --fs24-brand-logo-h: 24px;
}
.logo-ghost {
  --fs24-brand-logo-h: 21px;
}
.logo-winora {
  --fs24-brand-logo-h: 28px;
}
@media (max-width: 680px) {
  .brand-logo-item .brand-logo-img {
    height: calc(var(--fs24-brand-logo-h, 28px) * .82);
  }
}

/* Leasingreihe: dieselben acht Logos, die der Shop seit 2023 in der
   Mediathek führt. Sie reichen von 6,6:1 (Bikeleasing) bis 1,2:1
   (Eleasa), stehen aber alle in derselben 48px hohen Kachel.
   Gedeckelt wird deshalb beides: die Höhe für die hochformatigen, die
   Breite für die breiten. Das Bild behält sein Seitenverhältnis, weil
   beide Werte Maxima sind und keine Vorgabe.

   KACHEL AUF REINWEISS
   Die acht Dateien sind JPGs und damit ohne Transparenz – ihr Grund
   ist #fff. Die Kachel stand auf rgba(255,255,255,.55) über dem
   #f7f7f5 der Leasingbox, gemessen #fbfbfb. Vier Werte Unterschied
   reichen: Um jedes Logo lag ein sichtbar hellerer Kasten. Statt das
   per mix-blend-mode zu kaschieren – was hier wirkungslos blieb,
   weil der Blend-Backdrop die halbtransparente Kachel selbst ist –
   bekommt die Kachel schlicht denselben Weißwert wie die Bilder.
   Damit verschwindet die Kante, ohne dass an den Logos etwas
   verändert wird. Rahmen, Radius und der orangefarbene Oberstrich
   bleiben unangetastet. */
.leasing-partner-tile {
  background: #fff;
}
.leasing-partner-tile:hover {
  background: #fff;
  border-color: rgba(17, 19, 21, .2);
}
.leasing-partner-tile img {
  max-height: 30px;
  max-width: 88%;
}

/* ==========================================================
   Leasingbereich: orange Akzentlinie entfernt (2026-09-04)
   ----------------------------------------------------------
   Links an der Textbox stand ein 4px breiter, senkrechter
   Orangeverlauf. Er stammt aus der dunklen Urfassung der Box, in der
   er als einziger Farbakzent diente; seit die Box hell ist und der
   CTA daneben selbst orange ist, macht er den Bereich nur unruhig.

   Erzeugt wird er von ".advice-copy::before" (Geometrie ~Z. 2446,
   Farbe mit !important ~Z. 5509). Beide Regeln bleiben stehen und
   werden hier nur stillgelegt – so ist an einer Stelle nachlesbar,
   was verschwunden ist, und ein Zurücknehmen ist eine Zeile.

   Kein Abstand verschiebt sich dadurch: Das Pseudo-Element war
   absolut positioniert und stand nie im Fluss. Ueberschrift, Text,
   Button, Partnerlogos, Bild, Container bleiben unberuehrt.
   ========================================================== */
.advice-copy::before {
  display: none;
}

/* ==========================================================
   MERKZETTEL-HERZ: aktiver Zustand sichtbar (2026-09-04)
   ----------------------------------------------------------
   Am gerenderten DOM geprüft, nicht geraten: YITH 4.5 liefert per
   Shortcode nur einen leeren Platzhalter
   (div.yith-add-to-wishlist-button-block) und baut das Herz danach
   im Browser. Gemessen über das DevTools-Protokoll ergibt sich

     nicht gemerkt : a.yith-wcwl-add-to-wishlist-button
     gemerkt       : dieselbe <a> zusätzlich mit
                     .yith-wcwl-add-to-wishlist-button--added

   Die Klasse wird beim Klick sofort getauscht (unter 800 ms
   gemessen, ohne Neuladen), das SVG bleibt dasselbe. Gemessen war
   der Zustandsunterschied bisher aber rein strukturell: In BEIDEN
   Zuständen rechnete der Browser fill:none und stroke:rgb(0,0,0) –
   optisch passierte nichts.

   Gestylt wird deshalb genau diese Zustandsklasse des Plugins. Kein
   eigenes JavaScript, keine eigene Merklogik, kein Eingriff ins
   Plugin: Sobald das Plugin die Klasse setzt oder entfernt, greift
   oder fällt diese Regel – auch beim Entfernen zurück in den
   neutralen Zustand.

   Das SVG trägt fill="none" und stroke="currentColor" als Attribute.
   CSS schlägt Präsentationsattribute, deshalb genügen fill und color;
   stroke wird zusätzlich gesetzt, falls eine Plugin-Regel den
   currentColor-Weg einmal überschreibt.
   ========================================================== */
.yith-wcwl-add-to-wishlist-button--added .yith-wcwl-add-to-wishlist-button-icon,
.yith-wcwl-add-to-wishlist-button--added .yith-wcwl-icon {
  color: var(--accent, #d24614);
  fill: var(--accent, #d24614);
  stroke: var(--accent, #d24614);
}

.yith-wcwl-add-to-wishlist-button--added:hover .yith-wcwl-add-to-wishlist-button-icon,
.yith-wcwl-add-to-wishlist-button--added:hover .yith-wcwl-icon,
.yith-wcwl-add-to-wishlist-button--added:focus-visible .yith-wcwl-add-to-wishlist-button-icon,
.yith-wcwl-add-to-wishlist-button--added:focus-visible .yith-wcwl-icon {
  color: var(--accent-dark, #b93800);
  fill: var(--accent-dark, #b93800);
  stroke: var(--accent-dark, #b93800);
}

/* Nicht gemerkt: das Herz bleibt die neutrale Kontur. Im Hover
   deutet es den Orangeton nur an – ungefüllt, damit "orange gefüllt"
   eindeutig "liegt auf dem Wunschzettel" heißt und nicht mit einem
   Mauszeiger-Zustand verwechselt werden kann. */
.yith-wcwl-add-to-wishlist-button:not(.yith-wcwl-add-to-wishlist-button--added):hover .yith-wcwl-add-to-wishlist-button-icon,
.yith-wcwl-add-to-wishlist-button:not(.yith-wcwl-add-to-wishlist-button--added):hover .yith-wcwl-icon {
  color: var(--accent, #d24614);
  stroke: var(--accent, #d24614);
}

/* Der Farbwechsel darf nicht springen. Die Produktkarte animiert
   ohnehin schon Schatten und Bild. */
.yith-wcwl-add-to-wishlist-button .yith-wcwl-add-to-wishlist-button-icon,
.yith-wcwl-add-to-wishlist-button .yith-wcwl-icon {
  transition: color .18s ease, fill .18s ease, stroke .18s ease;
}

/* Sichtbarer Tastaturfokus – der Knopf ist auf der Karte ein
   randloser Kreis und hatte bisher keinen eigenen Fokusring. */
.product-media .yith-wcwl-add-to-wishlist-button:focus-visible {
  outline: 2px solid var(--accent, #d24614);
  outline-offset: 2px;
}

/* ==========================================================
   Abstandskorrektur nach dem Versetzen des Markenbands (2026-09-04)
   ----------------------------------------------------------
   Das Markenband stand bisher zwischen Leasing- und Fachhandels-
   Abschnitt und liegt jetzt zwischen Fachhandel und "Gut zu wissen".
   Die Sektionen stossen ohne Aussenabstand aneinander; die sichtbare
   Luft ist die Summe der angrenzenden Innenabstaende. Am gerenderten
   DOM gemessen ergab die neue Reihenfolge

     Leasing   -> Fachhandel : 38 + 8  =  46px
     Fachhandel -> Marken    : 82 + 18 = 100px
     Marken    -> Gut zu wissen: 58 + 8 =  66px

   Die 82px unten an ".dealer-story" waren auf den frueheren Nachbarn
   abgestimmt und sind an dieser Stelle der groesste Abstand der
   Seite - das Markenband wirkte dadurch abgehaengt statt zugehoerig.

   Korrigiert wird ausschliesslich der Innenabstand der einen
   Sektion, die zwei neue Nachbarn bekommen hat. Damit stehen alle
   drei Uebergaenge bei 66px. An den Sektionen selbst, an ihren
   Inhalten und an den mobilen Werten (<=680px und <=900px, wo die
   Abstaende ohnehin enger gestaffelt sind) aendert sich nichts.

   Die Regel steht bewusst in einer min-width-Abfrage. Media Queries
   erhoehen die Spezifitaet nicht - eine nackte ".dealer-story"-Regel
   am Dateiende wuerde die beiden bestehenden 680px-Bloecke
   (~Z. 4260 und ~Z. 5155) schlagen und deren engere Mobilwerte
   ueberschreiben. Ab 681px greift sie, darunter bleibt alles wie
   bisher.
   ========================================================== */
@media (min-width: 681px) {
  .dealer-story {
    padding-top: 28px;
    padding-bottom: 48px;
  }
}

/* ==========================================================
   FS24 Produktkarte – Kaufbereich, Merkmalszeile und Titel
   (Auftrag "Produktkarten überarbeiten und 'Auf einen Blick'
   sinnvoll erweitern", 2026-09-06).

   Neue Reihenfolge im Markup (woocommerce/content-product.php):
   Bild → Marke → Titel → EINE Merkmalszeile → Kaufbereich
   (".product-buy": Bestand links + Preis rechts, darunter die
   Größen, darunter "Zum Produkt").

   Steht bewusst am Dateiende und gewinnt dadurch bei gleicher
   Spezifität die Kaskade gegen die älteren Kartenblöcke weiter
   oben (u. a. "FS24 Global Product Card – 2026" ab Zeile ~7112
   und "CTA immer bündig unten" ab Zeile ~7562). "!important"
   wird nur dort gesetzt, wo eine bestehende Regel es selbst
   verwendet. Farben, Rundungen und der orange Button bleiben
   unverändert – hier ändert sich ausschließlich die Anordnung.
   ========================================================== */

/* --- Der Kaufbereich als ein Block, der bei jeder Karte bündig
   unten sitzt. Bisher trug ".product-cta-row" das
   "margin-top:auto"; Preis und Größen standen darüber frei im
   Textfluss und wanderten mit Titellänge und Merkmalsanzahl.
   Jetzt sammelt sich der automatische Leerraum vor dem GESAMTEN
   Kaufbereich – Bestand, Preis, Größen und Button behalten
   dadurch bei allen Karten einer Reihe denselben Abstand
   zueinander. --- */
.product-buy {
  margin-top: auto;
}
/* Innerhalb von ".product-buy" gibt es keinen Freiraum mehr zu
   verteilen; das geerbte "margin-top:auto" von oben würde dort zu
   0 zusammenfallen und den Button an den Größen kleben lassen. */
.product-buy .product-cta-row {
  margin-top: 12px;
}

/* --- Bestand links, Preis rechts, eine Zeile. ".price-row" ist
   bereits "display:flex; justify-content:space-between"
   (Basis-Regel ~Zeile 698); der Lagerstatus ist nur neu darin. --- */
.product-buy .price-row {
  align-items: flex-end;
  margin-top: 14px;
  /* Sicherheitsnetz: Passen Bestandstext und Preis auf einer sehr
     schmalen Karte doch nicht nebeneinander, rutscht der Preis in eine
     zweite Zeile (weiterhin rechtsbündig), statt sich mit dem Bestand
     zu überlagern. Bei allen realen Kombinationen bleibt es einzeilig. */
  flex-wrap: wrap;
  row-gap: 2px;
}
.product-buy .stock {
  flex: 0 1 auto;
  min-width: 0;
  padding-bottom: 2px;
  line-height: 1.2;
  white-space: nowrap;
}
.product-buy .price {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}
/* "Auf Anfrage" ist kein Preis und soll auch nicht wie einer wirken.
   Die ältere Regel ".price--empty" (0,1,0) wurde von einer
   Preisfarbe höherer Spezifität überschrieben und erschien dunkelblau
   wie ein echter Preis. */
.product-buy .price--empty {
  color: var(--muted);
  font-weight: 500;
}
/* Ersparnis in einer eigenen, rechtsbündigen Zeile unter der
   Preiszeile. Nebeneinander mit Lagerstatus UND Preis passte sie auf
   einer ~236 px breiten Karte nicht, der Lagerstatus brach dann
   zweizeilig um und der Preis rutschte nach oben. */
.price-savings {
  margin-top: 2px;
  text-align: right;
  color: var(--accent-dark);
  font-size: .74rem;
  font-weight: 650;
  line-height: 1.2;
}
.price-savings .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* --- Größen unmittelbar über dem Button. Sie dürfen umbrechen
   (bis zu 13 Werte kommen im Katalog vor); der Button bleibt
   trotzdem am unteren Kartenrand, weil der gesamte Kaufbereich
   dort verankert ist.

   Kompakte Chips (Auftrag-Nachtrag "Zentimetergrößen kompakter"):
   Die Einheit steht einmal in der Zeilenbeschriftung, die Chips
   tragen nur noch den Wert. Rechnung für die schmalste reale
   Desktopkarte (4-Spalten-Raster bei 1440 px): 262 px Karte minus
   2 × 22 px Innenabstand = 218 px nutzbare Breite; ein
   zweistelliger Chip misst 26 px, sieben davon plus sechs Lücken
   à 4 px ergeben 206 px - sieben Rahmengrößen passen damit in eine
   Zeile. Auf der Startseite (334 px Karte) ist noch mehr Platz.
   Klickfläche bleibt bei 26 px Breite und ~24 px Höhe erhalten. --- */
.product-buy .size-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}
/* Beschriftung nimmt die ganze erste Zeile ein, die Chips beginnen
   darunter - so kostet sie keine Chip-Breite. */
.product-buy .size-row__label {
  flex: 0 0 100%;
  min-width: 0;
  margin-bottom: 3px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.1;
  text-align: left;
  text-transform: uppercase;
}
.product-buy .size-row span:not(.size-row__label) {
  min-width: 26px;
  padding: 4px 5px;
  font-size: .69rem;
  line-height: 1.25;
  white-space: nowrap;
}
/* Reine Zahlen brauchen weniger Seitenluft als "XXL". */
.product-buy .size-row--cm span:not(.size-row__label) {
  padding: 4px 4px;
}

/* --- CTA-Zeile: Hauptbutton in voller Breite, die kleine
   Warenkorb-Aktion (nur bei direkt kaufbaren Produkten) daneben. --- */
.product-cta-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.product-cta-row .product-cta {
  flex: 1 1 auto;
}
.product-cta-row .mini-cart {
  flex: 0 0 auto;
  align-self: stretch;
  height: auto;
  min-height: 46px;
  border-radius: var(--fs24-btn-radius, 10px);
}

/* --- Merkmalszeile: eine Zeile, höchstens zwei Angaben, mit
   Mittelpunkt getrennt. Die Regeln standen bisher nur in
   shop.css unter ".fs24-shop" – die Karte zeigt die Zeile jetzt
   überall (Startseite, Kategorie, Suche, Marke, Ähnliche Bikes),
   deshalb hier global und ohne Bereichsbindung. --- */
.product-specs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin: 0 0 2px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.35;
}
.product-specs__item {
  display: inline;
  margin: 0;
  padding: 0;
}
/* Trennzeichen hängt am ENDE des vorherigen Merkmals, nicht am
   Anfang des nächsten: Passen beide Angaben nicht in eine Zeile,
   beginnt die zweite Zeile mit dem Merkmal und nicht mit einem
   verwaisten Mittelpunkt. */
.product-specs__item:not(:last-child)::after {
  content: " ·";
  color: var(--line);
}

/* --- Titel: höchstens zwei Zeilen, gleichbleibende Titelzone.
   ".product-title" hat bereits "min-height:2.6em" (Zeile ~7200);
   ergänzt wird nur die Begrenzung nach oben, damit ein sehr
   langer Modellname die Karte nicht auseinanderzieht. Der
   Kurztitel selbst entsteht datenbasiert in
   fs24_sp_display_title() – hier wird nichts abgeschnitten, was
   nicht ohnehin schon zweizeilig überläuft. --- */
.product-card .product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Titelfarbe überall gleich. Blocksy färbt Überschriften-Links sonst
   im globalen Linkblau ein - auf Kategorieseiten war das schon über
   ".fs24-shop .product-title a" in shop.css unterbunden, auf der
   Startseite, in der Suche und unter "Ähnliche Bikes" aber nicht. Die
   Regel steht deshalb jetzt hier, ohne Bereichsbindung. Elementauswahl
   ("a.product-title-link" gibt es nicht, daher ".product-card
   .product-title a", Spezifität 0,2,1) schlägt Blocksys
   "a:hover" (0,1,1) auch im Hover-Zustand - deshalb ohne
   "!important". */
.product-card .product-title a,
.product-card .product-title a:link,
.product-card .product-title a:visited {
  color: var(--ink);
}
.product-card .product-title a:hover,
.product-card .product-title a:focus-visible {
  color: var(--accent-dark);
}

/* --- Mobile (2-Spalten-Raster): dieselbe Anordnung, nur enger.
   Die bestehende V11-Mobile-Logik bleibt unangetastet. --- */
@media (max-width: 680px) {
  .product-specs {
    font-size: .68rem;
    line-height: 1.3;
  }
  .product-buy .price-row {
    margin-top: 10px;
  }
  /* Größenzeile mobil: EINE Reihe, Chips nach Inhalt.

     Kein Raster mit gleich breiten Spalten, kein flex-grow, keine
     Prozentbreite - eine einzelne Größe ("46", "L") bleibt dadurch ein
     kleines Feld und wird nicht über die Karte gezogen. Statt die
     Chips zu strecken oder umbrechen zu lassen, wird ab fünf Größen
     die Typografie kontrolliert enger gesetzt (das Attribut
     "data-sizes" trägt die Anzahl, siehe content-product.php - es
     beschreibt die Menge, nicht das Produkt).

     Platzrechnung an der engsten realen Karte: Bei 360 px
     Gerätebreite stehen zwei Karten nebeneinander, die Textspalte ist
     152 px breit (gemessen). Sieben Zentimeterchips à 19 px plus
     sechs Lücken à 2 px ergeben 145 px - die Reihe bleibt einzeilig.
     Unter 360 px schaltet das Raster ohnehin auf eine Karte je Reihe
     (shop.css), dort stehen 286 px zur Verfügung. */
  .product-buy .size-row {
    display: flex;
    /* WICHTIG: "wrap", nicht "nowrap". Die Beschriftung belegt mit
       "flex-basis: 100%" die erste Zeile - bei "nowrap" bliebe sie in
       derselben Zeile stehen und schöbe sämtliche Chips aus der Karte
       hinaus, wo ".product-card { overflow: hidden }" sie unsichtbar
       macht. Mit "wrap" rutschen die Chips unter die Beschriftung und
       stehen dort, weil sie durch die Typografie unten hineinpassen,
       trotzdem alle in EINER Zeile (gemessen bei 320/360/375/390 px). */
    flex-wrap: wrap;
    margin-top: 8px;
    gap: 4px;
  }
  .product-buy .size-row__label {
    flex: 0 0 100%;
    margin-bottom: 2px;
    font-size: .58rem;
  }
  .product-buy .size-row span:not(.size-row__label) {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 3px 5px;
    font-size: .66rem;
  }

  /* Ab fünf Größen enger - Reihenfolge der Regeln aufsteigend, damit
     die jeweils engste gewinnt. */
  .product-buy .size-row[data-sizes="5"] {
    gap: 3px;
  }
  .product-buy .size-row[data-sizes="5"] span:not(.size-row__label) {
    min-width: 18px;
    padding: 3px 4px;
    font-size: .62rem;
  }
  .product-buy .size-row[data-sizes="6"],
  .product-buy .size-row[data-sizes="7"] {
    gap: 2px;
  }
  .product-buy .size-row[data-sizes="6"] span:not(.size-row__label),
  .product-buy .size-row[data-sizes="7"] span:not(.size-row__label) {
    min-width: 0;
    padding: 2px 3px;
    font-size: .57rem;
    letter-spacing: -.01em;
  }

  /* Mehr als sieben Größen (im Katalog nur zwei Handschuhmodelle mit
     13 Werten) passen auch bei kleinster Schrift nicht in eine Reihe.
     Dort wird umgebrochen statt abgeschnitten. */
  .product-buy .size-row[data-sizes="8"],
  .product-buy .size-row[data-sizes="9"],
  .product-buy .size-row[data-sizes="10"],
  .product-buy .size-row[data-sizes="11"],
  .product-buy .size-row[data-sizes="12"],
  .product-buy .size-row[data-sizes="13"] {
    flex-wrap: wrap;
    gap: 2px;
  }
  .product-buy .size-row[data-sizes="8"] span:not(.size-row__label),
  .product-buy .size-row[data-sizes="9"] span:not(.size-row__label),
  .product-buy .size-row[data-sizes="10"] span:not(.size-row__label),
  .product-buy .size-row[data-sizes="11"] span:not(.size-row__label),
  .product-buy .size-row[data-sizes="12"] span:not(.size-row__label),
  .product-buy .size-row[data-sizes="13"] span:not(.size-row__label) {
    min-width: 0;
    padding: 2px 3px;
    font-size: .57rem;
  }
  .product-buy .product-cta-row {
    margin-top: 9px;
  }
  .product-cta-row {
    gap: 6px;
  }
  .product-cta-row .mini-cart {
    width: 34px;
    min-height: 34px;
  }
  .product-cta-row .mini-cart .icon {
    width: 14px;
    height: 14px;
  }
  /* Bei zwei Karten nebeneinander ist für Bestandstext UND Preis
     nebeneinander zu wenig Platz – dort untereinander, Preis
     weiterhin rechtsbündig unter dem Bestand. */
  .product-buy .price-row {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-height: 0;
  }
  .product-buy .stock {
    padding-bottom: 0;
    font-size: .68rem;
  }
  .product-buy .price {
    align-items: flex-end;
  }
}