/* ==========================================================
   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);
  --accent: #ff6418;
  --accent-dark: #d94700;
  --forest: #23272a;
  --sale: #f04438;
  --shadow: 0 26px 70px rgba(10, 12, 13, .16);
  --radius: 24px;
  --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: 999px;
  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;
}
.eyebrow,
    .slider-overline,
    .hero-service-label {
  position: relative;
  z-index: 1;
  color: #ff963a;
  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(255,100,24,.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: 999px;
  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(255,100,24,.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(255,100,24,.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: 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(255,100,24,.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(255,100,24,.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(255,100,24,.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(255,100,24,.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(255,100,24,.08));
  transition: opacity .3s ease;
}
.product-card:hover {
  transform: translateY(-9px);
  border-color: rgba(255,100,24,.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(255,100,24,.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(255,100,24,.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(255,100,24,.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: 999px;
    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: 999px;
  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: 999px;
  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);
}
.dealer-story-copy .dealer-kicker {
  margin: 0 0 9px;
  color: #e95b16;
  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;
}
.dealer-story-points span::before {
  content: "•";
  display: inline-block;
  margin-right: 8px;
  color: #e95b16;
  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;
  }
}
.dealer-story-grid {
  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 {
    width: min(calc(100% - 120px), var(--max)) !important;
  }
}
@media (max-width: 900px) {
  .dealer-story-grid,
      .brand-hero-inner {
    width: min(calc(100% - 40px), var(--max)) !important;
  }
}
@media (max-width: 680px) {
  .dealer-story-grid,
      .brand-hero-inner {
    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: 999px ;
    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: #ef6a24 ;
}
.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: #df5b19 !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(255,100,24,.14) !important;
}
.search button {
  background: #ef6a24 ;
}
.action-btn {
  background: #171a1c ;
}
.badge {
  background: #ef6a24 ;
}
.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: #ef6a24 !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: #ef6a24 ;
  box-shadow: none ;
}

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

.slider-arrow:hover {
  background: #ef6a24 !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: 999px ;
    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(239, 106, 36, .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: #ef6a24;
}
.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;
}
.seo-toggle-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 720;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease;
}
.seo-toggle-summary:hover .seo-toggle-cta,
.seo-toggle-summary:focus-visible .seo-toggle-cta {
  border-color: var(--accent);
  color: var(--accent-dark);
}
.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(255, 100, 24, .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(255, 100, 24, .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);
}

/* ==========================================================
   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(255, 100, 24, .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: "Produkt ansehen" (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: 999px;
  background: var(--ink);
  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 {
  background: var(--accent-dark);
}
.product-cta:hover .icon {
  transform: translateX(3px);
}

/* --- Hover-Reveal nur auf echten Hover-Geräten: CTA-Zeile startet
   unsichtbar (Platz bleibt reserviert), zweites Galeriebild blendet
   sanft ein. Auf Touch bleibt die CTA-Zeile immer sichtbar, da diese
   Media Query dort gar nicht greift. --- */
@media (hover: hover) and (pointer: fine) {
  .product-cta-row {
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
  }
  .product-card:hover .product-cta-row,
  .product-card:focus-within .product-cta-row {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  /* 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: 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 "Produkt ansehen" 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;
  }
}

/* ==========================================================
   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.
   ========================================================== */
.advice-box {
  background: linear-gradient(145deg, #f1f7f1 0%, #e5f1e7 100%);
}
.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(239,106,36,.5);
}
.leasing-partner-tile:hover {
  background: rgba(255,255,255,.85);
}
.leasing-partner-tile span {
  color: rgba(17,19,21,.82);
}