/* Kollektion – nx-Stil für die Seiten-Chrome (Hero, Filter, Kollektionen,
   Bikefinder, Beratung, Formular). Lädt NACH css/kollektion.css und
   überschreibt bewusst nur die "Chrome"-Selektoren - die Produktkarten
   selbst (.grid, .card.product, .p-*, .badge, .stock*, .actions, .specs,
   .financing, .store-info) bleiben unverändert in css/kollektion.css,
   weil dieselben Selektoren auch von den 5 Filialseiten
   (ochtrup/duelmen/nettetal/lohne/meppen) über bike-cards.js genutzt
   werden - ein Redesign hier hätte sie live mit verändert. .btn/.btn-
   primary/.btn-ghost werden bewusst mit-restyled (auch die Produktkarten
   nutzen sie für "Anfragen"/"Details"), das bleibt aber rein optisch und
   ändert nichts an Struktur oder Funktion. Klassennamen/IDs unverändert
   gelassen, nur damit das bestehende Inline-Script weiter funktioniert. */

body{background:var(--bg);color:var(--ink)}

/* HERO */
.k-hero{background:radial-gradient(120% 100% at 15% 0%,#1c2557 0%,var(--bg) 55%),var(--bg);padding:clamp(140px,16vw,180px) 0 56px}
.k-hero-text .eyebrow{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.k-hero-text h1{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.4vw,52px);letter-spacing:-.03em;color:var(--ink);margin-bottom:14px}
.k-hero-text .sub{color:var(--muted);font-size:16px;max-width:560px}

.k-hero-tools{background:var(--graphite);color:var(--ink);border-radius:16px;padding:24px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.search label,.filter label{color:var(--muted);font-weight:600}
.search input{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);border-radius:999px}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(216,58,57,.18)}
.filter select{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);border-radius:999px}
.filter select:focus{outline:none;border-color:var(--accent)}
.filter select option{color:#0f172a}

.hero-cta{background:rgba(255,255,255,.06);color:var(--ink);border:1px solid rgba(255,255,255,.22)}
.hero-cta:hover{border-color:#fff}
.hero-cta.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.hero-cta.primary:hover{background:var(--accent-soft);transform:translateY(-2px);box-shadow:none}

.filters-toggle{color:var(--muted)}
.filters-toggle:hover{color:var(--ink)}
.filters-extra{border-top:1px solid var(--line)}
.filters-extra[hidden]{display:none}
.filter-chip{background:var(--accent);color:#fff}
.filter-chip:hover{background:var(--accent-soft);opacity:1}
.active-filter-chips[hidden]{display:none}

/* BUTTONS (global – wirkt auch in Produktkarten, Bikefinder, Beratung, Formular) */
.btn{font-weight:600;transition:background .2s,transform .2s,box-shadow .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-soft);transform:translateY(-2px);box-shadow:none}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.3)}
.btn-ghost:hover{border-color:#fff}
.nx-light .btn-ghost{color:var(--off-ink);border-color:rgba(20,20,20,.18)}
.nx-light .btn-ghost:hover{border-color:var(--off-ink)}

/* KOLLEKTIONEN */
.collections{padding:clamp(56px,7vw,88px) 0 8px}
.collection-card{background:var(--off);border-radius:14px}
.collection-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cc-title{color:var(--off-ink)}
.cc-sub{color:var(--off-muted)}

/* PRODUKTE (nur Kopfzeile/Leerzustand – Grid/Karten unverändert) */
.products{background:var(--off);color:var(--off-ink);padding:clamp(56px,7vw,88px) 0}
.section-head h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;color:var(--off-ink)}
.section-head .muted{color:var(--off-muted)}
.empty{color:var(--off-muted)}

/* BIKEFINDER / BERATUNG */
.bikefinder,.beratung{background:#fff;border-radius:16px;box-shadow:0 0 0 1px rgba(20,20,20,.06);margin-top:56px}
.bikefinder-head h2,.berater-head h2{font-family:var(--display);font-weight:700;font-size:22px;color:var(--off-ink)}
.bikefinder-head .muted,.berater-head .muted{color:var(--off-muted)}
.bfQ label{color:var(--off-muted)}
.bfQ select{background:var(--off);border:1px solid rgba(20,20,20,.12);color:var(--off-ink)}
.bfMiniCard{background:#fff;border-color:rgba(20,20,20,.08)}
.bfMiniMedia{background:var(--off)}
.bfMiniMeta{color:var(--off-muted)}
.bfMiniSpecs{color:var(--off-muted)}

.berater-filiale-select{background:var(--off);border:1px solid rgba(20,20,20,.12);color:var(--off-ink)}
.berater-filiale-tag{background:var(--off);color:var(--off-ink) !important}
.berater-card{border-color:rgba(20,20,20,.08)}
.berater-body span{color:var(--off-muted)}
.berater-cta{color:var(--accent) !important}
.berater-note{color:var(--off-muted)}

/* ANFRAGE-FORMULAR */
.formCard{background:#fff;border-radius:16px;box-shadow:0 0 0 1px rgba(20,20,20,.06)}
.formCard h2{font-family:var(--display);font-weight:700;color:var(--off-ink)}
.formCard .muted{color:var(--off-muted)}
.notice.success{background:rgba(30,158,86,.1);color:#177a42}
.notice.error{background:rgba(216,58,57,.1);color:#b23231}
.form__row label{color:var(--off-muted)}
.form__row input,.form__row select,.form__row textarea{background:var(--off);border:1px solid rgba(20,20,20,.12);color:var(--off-ink)}
.form__row input:focus,.form__row select:focus,.form__row textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(216,58,57,.14)}
.hint{color:var(--off-muted)}
.check{color:var(--off-muted)}
.check a{color:var(--blue)}