/* ===========================================================================
   REDESIGN — gemeinsame Ebene fuer alle Unterseiten

   Wird als LETZTES Stylesheet geladen. Damit gewinnt sie bei gleicher
   Spezifitaet ueber die Quellreihenfolge und muss die Selektoren nicht
   kuenstlich aufblaehen.

   Leitgedanke wie auf der Startseite und auf /service: kein Glas, keine
   Kaesten. Abschnitte tragen sich ueber Weissraum und Groesse,
   Aufzaehlungen werden zu Zeilen mit Haarlinien, Auftakt und Abschluss
   laufen als Baender ueber die volle Fensterbreite.

   /service hat seine eigene, bereits abgenommene Ebene am Ende von
   service.css. Deren Selektoren beginnen alle mit .service-* — hier
   kommt nichts davon vor, ausser bei den generischen Regeln, die
   .service-page deshalb ausnehmen.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1 — Gemeinsame Bausteine aus content-pages.css
   Betrifft: Bikes, Probefahrt, Finanzierung, Marken-Detail, AGB,
   Impressum, Datenschutz, Ueber uns
   --------------------------------------------------------------------------- */

body.content-page .page-main section,
body.content-page .legal-main section{
  margin-top:0;
}

body.content-page .page-section,
body.content-page .page-highlight,
body.content-page .legal-content{
  max-width:1280px;
  margin-inline:auto;
  padding:var(--space-page) var(--space-gutter);
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* --- Auftakt als Band ueber die volle Fensterbreite ---
   main setzt oben calc(48px + nav-h + inset), die Leiste belegt davon
   nav-h + inset. Die restlichen 48px holt das Band wieder herein,
   sonst steht ein weisser Streifen zwischen Leiste und Band. */
body.content-page .page-main > section.page-hero,
body.content-page .legal-main > section.page-hero{
  width:100vw;
  margin-inline:calc(50% - 50vw);
  margin-top:-48px;
  max-width:100vw;
  overflow-x:clip;
  padding:var(--space-page) var(--space-gutter);
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#0d0f13;
  color:#fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.content-page .page-hero > *{
  max-width:1280px;
  margin-inline:auto;
}
body.content-page .page-hero h1{
  color:#fff;
  font-family:var(--font-display);
  font-size:var(--step-6);
  font-weight:690;
  line-height:0.96;
  letter-spacing:-0.035em;
  max-width:16ch;
  text-wrap:balance;
}
body.content-page .page-hero p{
  color:rgba(255,255,255,0.72);
  font-size:var(--step-1);
  max-width:52ch;
}
body.content-page .page-hero .page-eyebrow{
  color:rgba(255,255,255,0.55);
}
body.content-page .page-hero .cta-primary{
  background:#fff;
  color:#0d0f13;
  border-color:#fff;
}
body.content-page .page-hero .cta-secondary{
  color:#fff;
  border-color:rgba(255,255,255,0.35);
}

/* --- Ueberschriften auf den Massstab der Startseite --- */
body.content-page .page-section__head h1,
body.content-page .page-section__head h2,
body.content-page .page-highlight h2{
  font-family:var(--font-display);
  font-size:var(--step-5);
  font-weight:690;
  line-height:1.05;
  letter-spacing:-0.032em;
  max-width:20ch;
  text-wrap:balance;
}
body.content-page .page-section__head{
  margin-bottom:var(--space-6);
}
body.content-page .page-section__head p,
body.content-page .page-highlight p{
  margin-top:var(--space-2);
  font-size:var(--step-1);
  line-height:1.5;
  color:var(--muted);
  max-width:54ch;
}

/* --- Kaesten werden Zeilen --- */
body.content-page .page-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-top:0;
  border-top:1px solid var(--line);
}
body.content-page .page-card{
  padding:var(--space-3) 0;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.content-page .page-card h2,
body.content-page .page-card h3{
  font-family:var(--font-display);
  font-size:var(--step-2);
  font-weight:650;
  letter-spacing:-0.028em;
  line-height:1.15;
  margin:0 0 4px;
}
body.content-page .page-card p,
body.content-page .page-card li{
  color:var(--muted);
  font-size:var(--step-0);
}

@media (min-width:900px){
  body.content-page .page-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:var(--space-6);
  }
  body.content-page .page-grid > *:nth-child(odd){
    padding-right:var(--space-6);
  }
  body.content-page .page-grid > *:nth-child(even){
    padding-left:var(--space-6);
    border-left:1px solid var(--line);
    margin-left:calc(var(--space-6) * -1);
  }
}

/* --- Schrittliste ---
   Drei Kinder (Ziffer, h3, p) und zwei Spalten heisst ohne benannte
   Bereiche: Text faellt in die zweite Zeile unter die Ziffer. */
body.content-page .page-steps{
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
body.content-page .page-steps li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"nr titel" "nr text";
  column-gap:var(--space-3);
  row-gap:4px;
  align-items:start;
  padding:var(--space-3) 0;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:none;
}
body.content-page .page-steps li > .page-step-num{
  grid-area:nr;
  width:auto;
  height:auto;
  border-radius:0;
  background:none;
  color:var(--muted);
  font-family:var(--font-display);
  font-size:var(--step-3);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  margin:0;
}
body.content-page .page-steps li > h3{
  grid-area:titel;
  margin:0;
  font-family:var(--font-display);
  font-size:var(--step-2);
  font-weight:650;
  letter-spacing:-0.028em;
  line-height:1.15;
}
body.content-page .page-steps li > p{
  grid-area:text;
  margin:0;
  color:var(--muted);
  font-size:var(--step-0);
  max-width:56ch;
}

/* --- Kennzahlen: gross, ohne Kasten --- */
body.content-page .page-kpi{
  gap:0;
  border-top:1px solid var(--line);
}
body.content-page .page-kpi-item{
  padding:var(--space-3) 0;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:none;
}
body.content-page .page-kpi-value{
  font-family:var(--font-display);
  font-size:var(--step-4);
  font-weight:690;
  letter-spacing:-0.03em;
  color:var(--fg);
}
body.content-page .page-kpi-label{
  font-size:var(--step--1);
  color:var(--muted);
}

/* --- Pillen und Marken: Textmarken statt Kapseln --- */
body.content-page .page-pill-list li,
body.content-page .page-tag{
  border:0;
  border-radius:0;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:0;
  font-family:var(--font-ui);
  font-size:var(--step--2);
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}
body.content-page .page-pill-list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  padding:0;
  margin:var(--space-3) 0 0;
  list-style:none;
}

/* --- Bilder bekommen eine Kante --- */
body.content-page .about-media-card,
body.content-page .about-media-card img,
body.content-page .about-founder__media,
body.content-page .about-founder__media img,
body.content-page .about-location__visual img,
body.content-page .cms-page-media img{
  border-radius:0;
  border:0;
  box-shadow:none;
}
body.content-page .about-media-card figcaption{
  left:0; right:0; bottom:0;
  padding:var(--space-2);
  border:0;
  border-radius:0;
  color:#fff;
  background:linear-gradient(to top, rgba(10,11,14,0.78), rgba(10,11,14,0));
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* --- Rechtstexte: Lesbarkeit vor Wirkung --- */
body.content-page .legal-block h2{
  font-family:var(--font-display);
  font-size:var(--step-3);
  font-weight:650;
  letter-spacing:-0.028em;
  line-height:1.15;
}
body.content-page .legal-block p,
body.content-page .legal-block li{
  max-width:72ch;
  color:var(--muted);
}


/* ---------------------------------------------------------------------------
   2 — Bikes
   Auftakt wie bei /service: dunkles Band, Werkstattfotos mit Kante.
   --------------------------------------------------------------------------- */

body.bikes-page .bikes-main > section.bikes-hero{
  width:100vw;
  margin-inline:calc(50% - 50vw);
  margin-top:-48px;
  max-width:100vw;
  overflow-x:clip;
  padding:var(--space-page) var(--space-gutter);
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#0d0f13;
  color:#fff;
  align-items:center;
}
body.bikes-page .bikes-hero::before{ content:none; }
body.bikes-page .bikes-hero__copy{
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  max-width:1280px;
  margin-inline:auto;
  width:100%;
}
body.bikes-page .bikes-hero__visual{
  max-width:1280px;
  margin-inline:auto;
  width:100%;
}
body.bikes-page .bikes-hero h1{
  color:#fff;
  font-family:var(--font-display);
  font-size:var(--step-6);
  font-weight:690;
  line-height:0.96;
  letter-spacing:-0.035em;
  max-width:16ch;
  text-wrap:balance;
}
body.bikes-page .bikes-hero__copy p{
  color:rgba(255,255,255,0.72);
  font-size:var(--step-1);
  max-width:52ch;
}
body.bikes-page .bikes-shot,
body.bikes-page .bikes-shot img{
  border:0;
  border-radius:0;
  box-shadow:none;
}
body.bikes-page .bikes-shot{ background:rgba(255,255,255,0.06); }
@media (min-width:900px){
  body.bikes-page .bikes-hero{ grid-template-columns:1fr 1fr; gap:var(--space-8); }
}

/* Markenabschnitte: Name gross, Modelle als Zeilen statt Karten. */
body.bikes-page .bike-brand-section__identity h2{
  font-family:var(--font-display);
  font-size:var(--step-5);
  font-weight:690;
  line-height:1.05;
  letter-spacing:-0.032em;
}
body.bikes-page .bike-model-grid{
  gap:0;
  border-top:1px solid var(--line);
}
body.bikes-page .bike-model-card{
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:none;
  box-shadow:none;
  padding:var(--space-3) 0;
}
body.bikes-page .bike-model-card__media,
body.bikes-page .bike-model-card__media img{
  border-radius:0;
  border:0;
}
body.bikes-page .bike-model-card h3{
  font-family:var(--font-display);
  font-size:var(--step-2);
  font-weight:650;
  letter-spacing:-0.028em;
}
body.bikes-page .bikes-brand-jump__item{
  border-radius:0;
  border:0;
  background:none;
}


/* ---------------------------------------------------------------------------
   3 — Probefahrt
   Der Auftakt ist ein Karussell mit Raedern: bleibt, wird aber dunkel
   gerahmt, damit die Raeder freigestellt wirken.
   --------------------------------------------------------------------------- */

body.probefahrt-page .probefahrt-main > section.probefahrt-hero{
  width:100vw;
  margin-inline:calc(50% - 50vw);
  margin-top:-48px;
  max-width:100vw;
  overflow-x:clip;
  padding:var(--space-page) 0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#0d0f13;
  color:#fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.probefahrt-page .probefahrt-hero h1{
  color:#fff;
  font-family:var(--font-display);
  font-size:var(--step-6);
  font-weight:690;
  line-height:0.96;
  letter-spacing:-0.035em;
  text-wrap:balance;
}
body.probefahrt-page .probefahrt-hero > p,
body.probefahrt-page .probefahrt-hero .page-eyebrow{
  color:rgba(255,255,255,0.7);
}
body.probefahrt-page .probefahrt-bike{
  border-radius:0;
  border:0;
  background:rgba(255,255,255,0.05);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.probefahrt-page .probefahrt-form{
  padding:0;
  border:0;
  border-radius:0;
  background:none;
}


/* ---------------------------------------------------------------------------
   4 — Marken
   Hat bereits einen Video-Auftakt ueber die volle Breite. Hier geht es
   nur um die Glasreste in den Markenabschnitten und den Massstab.
   --------------------------------------------------------------------------- */

body.marken-page .brand-story__inner,
body.marken-page .brand-story__price-card{
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.marken-page .brand-story__price-card{
  /* --line ist rgba(17,19,24,0.10) und damit auf der dunklen
     Markenseite unsichtbar. */
  border-top:1px solid rgba(255,255,255,0.14);
  padding-top:var(--space-3);
}
body.marken-page .brand-story__copy h2,
body.marken-page .brand-story__title-brand{
  font-family:var(--font-display);
  font-size:var(--step-6);
  font-weight:690;
  line-height:0.96;
  letter-spacing:-0.035em;
}
body.marken-page .brand-story__title-model{
  font-family:var(--font-ui);
  font-size:var(--step--2);
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  /* body traegt hier rgb(10,10,11). --muted ist dunkelgrau und waere
     Dunkel auf Dunkel — gemessener Kontrast 1,0 bei allen acht Marken. */
  color:rgba(255,255,255,0.6);
}
body.marken-page .brand-chip{
  border-radius:0;
  border:0;
  background:none;
}
body.marken-page .marken-hero__content h1{
  font-family:var(--font-display);
  font-size:var(--step-7);
  font-weight:690;
  line-height:0.92;
  letter-spacing:-0.04em;
}


/* ---------------------------------------------------------------------------
   5 — Marken-Detail
   Video-Auftakt bleibt. Glas in der mitlaufenden Leiste und den
   Kapiteln raus.
   --------------------------------------------------------------------------- */

body.brand-detail-page .brand-hero__content h1,
body.brand-detail-page .brand-hero__title-text{
  font-family:var(--font-display);
  font-size:var(--step-7);
  font-weight:690;
  line-height:0.92;
  letter-spacing:-0.04em;
}
body.brand-detail-page .bd-sticky-cta__inner{
  border-radius:0;
  border:0;
  border-top:1px solid rgba(255,255,255,0.14);
  background:#0d0f13;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.brand-detail-page .brand-cap-gallery__slide,
body.brand-detail-page .brand-cap-gallery__media,
body.brand-detail-page .brand-cap-gallery__media img,
body.brand-detail-page .brand-overview__spotlight img{
  border-radius:0;
  border:0;
  box-shadow:none;
}
body.brand-detail-page .brand-cap-gallery__copy h3{
  font-family:var(--font-display);
  font-size:var(--step-2);
  font-weight:650;
  letter-spacing:-0.028em;
}

/* Die Modellkarte hatte 18px Innenabstand, den ihr Bild mit
   margin:-18px -18px wieder bis an die Kartenkante zurueckgeholt hat.
   "Kaesten werden Zeilen" (Abschnitt 1) nimmt der Karte diesen
   Innenabstand weg — seitdem ziehen dieselben negativen Raender das Bild
   AUS der Karte heraus, 18px je Seite, bis in die Nachbarspalte hinein.
   Ohne Kasten gibt es nichts mehr auszubrechen: das Bild fuellt die
   Spalte und hoert an ihrer Kante auf. Hintergrund, Radius und die
   Trennlinie darunter waren ebenfalls Teil des Kastens. */
body.brand-detail-page .brand-model-card__media{
  margin:0 0 var(--space-2);
  border-radius:0;
  border-bottom:0;
  background:none;
}


/* ---------------------------------------------------------------------------
   6 — Leasing
   --------------------------------------------------------------------------- */

body.leasing-page main > section.leasing-hero{
  width:100vw;
  margin-inline:calc(50% - 50vw);
  margin-top:-48px;
  max-width:100vw;
  overflow-x:clip;
  padding:var(--space-page) var(--space-gutter);
  border:0;
  border-radius:0;
  background:#0d0f13;
  color:#fff;
}
/* Nicht auf alle Kinder: das Hintergrundvideo ist ebenfalls ein direktes
   Kind. Mit max-width:1280px lief es auf breiten Schirmen nicht mehr
   ueber die volle Breite, und links und rechts blieben 160px vom
   dunklen Band stehen — gemessen bei 1600px Fensterbreite. */
body.leasing-page .leasing-hero > *:not(video):not(img):not(picture):not(canvas){
  max-width:1280px;
  margin-inline:auto;
}
body.leasing-page .leasing-hero > video,
body.leasing-page .leasing-hero > img,
body.leasing-page .leasing-hero > picture{
  max-width:none;
  width:100%;
  inset:0;
}
body.leasing-page .leasing-hero h1{
  color:#fff;
  font-family:var(--font-display);
  font-size:var(--step-6);
  font-weight:690;
  line-height:0.96;
  letter-spacing:-0.035em;
  max-width:16ch;
  text-wrap:balance;
}
body.leasing-page .leasing-hero p{ color:rgba(255,255,255,0.72); }
body.leasing-page .leasing-hero__eyebrow{ color:rgba(255,255,255,0.55); }

body.leasing-page .leasing-section{
  max-width:1280px;
  margin-inline:auto;
  padding:var(--space-page) var(--space-gutter);
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.leasing-page .leasing-section::before{ content:none; }
body.leasing-page .leasing-section__head h2{
  font-family:var(--font-display);
  font-size:var(--step-5);
  font-weight:690;
  line-height:1.05;
  letter-spacing:-0.032em;
  max-width:20ch;
  text-wrap:balance;
}
body.leasing-page .leasing-section__head p{
  margin-top:var(--space-2);
  font-size:var(--step-1);
  color:var(--muted);
  max-width:54ch;
}
body.leasing-page .leasing-card,
body.leasing-page .leasing-calc-shell,
body.leasing-page .leasing-benefits__grid{
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.leasing-page .leasing-card{
  border-bottom:1px solid var(--line);
  padding:var(--space-3) 0;
}
/* Die Partnerlogos bleiben Kapseln: ohne Flaeche verschwinden helle
   Logos auf Weiss. Nur Glas und Schatten raus. */
body.leasing-page .leasing-logo-chip{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  background:#f4f5f7;
  border:1px solid var(--line);
}


/* ---------------------------------------------------------------------------
   7 — Blog
   Kein Glas, aber Karten: eine Beitragsuebersicht lebt von Bildern.
   Die Karten verlieren Rahmen und Schatten, das Bild traegt.
   --------------------------------------------------------------------------- */

body.blog-page .blog-hero h1{
  font-family:var(--font-display);
  font-size:var(--step-6);
  font-weight:690;
  line-height:0.96;
  letter-spacing:-0.035em;
  max-width:18ch;
  text-wrap:balance;
}
body.blog-page .blog-card{
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
body.blog-page .blog-card__media,
body.blog-page .blog-card__media img,
body.blog-page .blog-related__card img{
  border-radius:0;
}
body.blog-page .blog-card h3,
body.blog-page .blog-card h2{
  font-family:var(--font-display);
  font-size:var(--step-2);
  font-weight:650;
  letter-spacing:-0.028em;
  line-height:1.15;
}
body.blog-page .blog-btn-link{
  border-radius:999px;
}


/* ---------------------------------------------------------------------------
   8 — Kundenportal
   Bleibt ein Arbeitsbereich: Karten grenzen hier Daten voneinander ab
   und haben eine Aufgabe. Nur Glas, Schatten und Radien raus, plus
   dieselbe Schrift wie ueberall.
   --------------------------------------------------------------------------- */

body.customer-portal-page .customer-portal-hero h1{
  font-family:var(--font-display);
  font-size:var(--step-5);
  font-weight:690;
  line-height:1.02;
  letter-spacing:-0.032em;
}
body.customer-portal-page .customer-card{
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.customer-portal-page .customer-card h3{
  font-family:var(--font-display);
  font-size:var(--step-2);
  font-weight:650;
  letter-spacing:-0.028em;
}


/* ---------------------------------------------------------------------------
   9 — Nachtrag: gedaempfte Farben im dunklen Band
   var(--muted) ist dunkelgrau. In den Baendern stand das auf Schwarz —
   Kontrast 1,03. Alles, was dort gedaempft erscheinen soll, muss von
   Weiss aus gedaempft werden, nicht von Schwarz.
   --------------------------------------------------------------------------- */

body.content-page .page-hero .page-pill-list li,
body.content-page .page-hero .page-tag,
body.content-page .page-hero .page-note,
body.content-page .page-hero li,
body.content-page .page-hero small,
body.bikes-page .bikes-hero .page-pill-list li,
body.bikes-page .bikes-hero li,
body.probefahrt-page .probefahrt-hero .page-pill-list li,
body.probefahrt-page .probefahrt-hero li,
body.leasing-page .leasing-hero li,
body.leasing-page .leasing-hero .page-tag{
  color:rgba(255,255,255,0.6);
}
body.content-page .page-hero a:not(.cta-primary):not(.cta-secondary),
body.leasing-page .leasing-hero a:not(.cta-primary):not(.cta-secondary),
body.probefahrt-page .probefahrt-hero a:not(.cta-primary):not(.cta-secondary){
  color:rgba(255,255,255,0.85);
}
body.content-page .page-hero hr,
body.content-page .page-hero .page-pill-list li::before{
  border-color:rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.4);
}


/* ---------------------------------------------------------------------------
   10 — Letzte Glasreste, die ueber eigene Selektoren liefen
   --------------------------------------------------------------------------- */

body.marken-page .brand-chip{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
body.brand-detail-page .brand-hero__content,
body.brand-detail-page .cta-secondary{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.brand-detail-page .brand-hero__content{
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* .pf-cheer stand auf rgb(139,144,160) — ein Grau ausserhalb der Palette,
   Kontrast 2,99 auf Weiss. --muted ist dunkler und ueberall sonst im
   Einsatz. */
body.probefahrt-page .pf-cheer{
  color:var(--muted);
}


/* ---------------------------------------------------------------------------
   11 — Buttons in dunklen Baendern
   .cta-primary ist seit dem Umbau deckend dunkel, .cta-secondary traegt
   eine dunkle Haarlinie mit dunkler Schrift. In einem dunklen Band heisst
   das: der primaere Knopf verschwindet fast im Grund (#111318 auf
   #0d0f13), der sekundaere ist unsichtbar — gemessener Kontrast 1,03.
   Im Band dreht sich das Verhaeltnis um.

   Betrifft jedes dunkle Band der Seite, nicht nur den Auftakt: die
   Abschlussbaender hatten denselben Fehler.
   --------------------------------------------------------------------------- */

.service-hero .cta-primary,
.service-final-cta .cta-primary,
.page-hero .cta-primary,
.bikes-hero .cta-primary,
.probefahrt-hero .cta-primary,
.leasing-hero .cta-primary{
  background:#ffffff;
  color:#0d0f13;
  border-color:#ffffff;
}
.service-hero .cta-primary:hover,
.service-final-cta .cta-primary:hover,
.page-hero .cta-primary:hover,
.bikes-hero .cta-primary:hover,
.probefahrt-hero .cta-primary:hover,
.leasing-hero .cta-primary:hover{
  background:rgba(255,255,255,0.88);
  border-color:rgba(255,255,255,0.88);
}

.service-hero .cta-secondary,
.service-final-cta .cta-secondary,
.page-hero .cta-secondary,
.bikes-hero .cta-secondary,
.probefahrt-hero .cta-secondary,
.leasing-hero .cta-secondary{
  background:transparent;
  color:#ffffff;
  border-color:rgba(255,255,255,0.35);
}
.service-hero .cta-secondary:hover,
.service-final-cta .cta-secondary:hover,
.page-hero .cta-secondary:hover,
.bikes-hero .cta-secondary:hover,
.probefahrt-hero .cta-secondary:hover,
.leasing-hero .cta-secondary:hover{
  border-color:rgba(255,255,255,0.7);
}

/* Die Wischanimation der Knoepfe faerbt ueber ::before/::after in --fg.
   Im Band muss sie von Weiss aus kommen. */
.service-hero .cta-primary::before,
.service-final-cta .cta-primary::before,
.page-hero .cta-primary::before,
.service-hero .cta-secondary::before,
.service-final-cta .cta-secondary::before,
.page-hero .cta-secondary::before{
  background:rgba(255,255,255,0.14);
}

/* Text im Abschlussband */
.service-final-cta p,
.service-final-cta li{
  color:rgba(255,255,255,0.72);
}


/* ---------------------------------------------------------------------------
   12 — Marken-Detail: neutraler Akzent

   Bewusst OHNE .brand-detail--v2 im Selektor. Diese Klasse haengt an
   $brandPageKey, und der wird ueber $_SERVER['SCRIPT_NAME'] aufgeloest.
   Faellt das durch, greift ein Rueckfall ueber den Markennamen — und
   "Nordic Copenhagen" normalisiert zu nordic-copenhagen, der Katalog
   kennt aber nordic. Nordic stand deshalb ohne v2 da und sah anders aus
   als die sieben anderen Marken. Ohne die Klasse im Selektor gelten die
   Regeln unabhaengig davon.
   --bd-accent ist jetzt die Tinte (#111318) statt acht Bonbonfarben.
   An drei Stellen lag der Akzent auf dunklem Grund — dort muss er von
   Weiss aus kommen, sonst steht Dunkel auf Dunkel.
   --------------------------------------------------------------------------- */

/* Hauptknopf im Auftakt: liegt ueber dem Markenbild. */
body.brand-detail-page .brand-hero .cta-primary,
body.brand-detail-page .bd-sticky-cta__btn{
  background:#ffffff;
  color:#0d0f13;
  border-color:#ffffff;
  box-shadow:none;
}
body.brand-detail-page .brand-hero .cta-primary:hover,
body.brand-detail-page .bd-sticky-cta__btn:hover{
  background:rgba(255,255,255,0.88);
  filter:none;
}
body.brand-detail-page .brand-hero .cta-secondary{
  background:transparent;
  color:#ffffff;
  border-color:rgba(255,255,255,0.35);
}

/* Haekchen im Auftakt: weisser Kreis, die dunkle Haken-Grafik bleibt. */
body.brand-detail-page .brand-hero__trust-strip li::before,
body.brand-detail-page .brand-hero__trust li::before{
  background-color:#ffffff;
}

/* Linie unter den Ueberschriften, Marken-Tags und Haekchen im Inhalt. */
body.brand-detail-page .page-section__head h2::after,
body.brand-detail-page .brand-overview h2::after{
  background:var(--line);
  height:1px;
  border-radius:0;
  width:100%;
  max-width:none;
}
body.brand-detail-page .page-checklist li::before{
  color:var(--fg);
}
body.brand-detail-page .page-card:hover{
  box-shadow:none;
  transform:none;
}

/* .brand-detail--v2 .cta-primary setzt color:#0a0d18 — das war fuer die
   helle Akzentflaeche gedacht. Der Knopf ist jetzt deckend dunkel, also
   stand Dunkel auf Dunkel: gemessener Kontrast 1,04 auf jeder
   Marken-Detailseite, zweimal pro Seite. Im Inhalt weisse Schrift,
   nur in den dunklen Baendern bleibt es umgekehrt. */
body.brand-detail-page .cta-primary{
  color:#ffffff;
}
body.brand-detail-page .brand-hero .cta-primary,
body.brand-detail-page .bd-sticky-cta__btn{
  color:#0d0f13;
}


/* ---------------------------------------------------------------------------
   13 — Marken-Logos im Auftakt immer weiss
   .brand-hero__logo (das grosse Intro-Logo) war schon weiss. Das Logo im
   Textblock daneben, .brand-hero__content-logo, lief in den
   Originalfarben der Marke — auf dem Markenbild je nach Motiv kaum zu
   sehen. Der Schatten gibt ihm auf hellen Bildstellen eine Kante, wie
   beim Logo in der Leiste.
   --------------------------------------------------------------------------- */

body.brand-detail-page .brand-hero__content-logo{
  filter:brightness(0) invert(1)
         drop-shadow(0 1px 2px rgba(0,0,0,0.55))
         drop-shadow(0 2px 12px rgba(0,0,0,0.38));
}


/* ---------------------------------------------------------------------------
   14 — Auftakt der Marken-Detailseiten: Schrift hell
   Der Textblock liegt ueber Video oder Markenbild, die Schrift kam aber
   aus den Standardtokens: h1 in --fg, Absaetze in --muted. Beides dunkel.

   Bei Marken mit Logo faellt es kaum auf, weil die H1 dort nur fuer
   Screenreader existiert und das Logo den Titel traegt. Nordic
   Copenhagen hat kein Logo — dort stand die Ueberschrift schwarz im
   Bild. Der Intro-Absatz war auf jeder Marke dunkel.
   --------------------------------------------------------------------------- */

body.brand-detail-page .brand-hero__content h1,
body.brand-detail-page .brand-hero__content h1 span{
  color:#ffffff;
  text-shadow:0 1px 3px rgba(0,0,0,0.45);
}
body.brand-detail-page .brand-hero__content p,
body.brand-detail-page .brand-hero__intro{
  color:rgba(255,255,255,0.78);
  text-shadow:0 1px 3px rgba(0,0,0,0.4);
}
body.brand-detail-page .brand-hero__eyebrow{
  color:rgba(255,255,255,0.6);
}
body.brand-detail-page .brand-hero__title-local{
  color:rgba(255,255,255,0.65);
}
body.brand-detail-page .brand-hero__trust-strip li,
body.brand-detail-page .brand-hero__trust li{
  color:rgba(255,255,255,0.85);
}


/* ---------------------------------------------------------------------------
   15 — Werkstatt-Strecke auf /service
   Die uebernommenen Abschnitte nutzen .page-section aus content-pages.css,
   der Body dort heisst aber service-page werkstatt-page und nicht
   content-page. Ohne diesen Nachtrag behalten genau diese zwei Abschnitte
   das alte Glas mit blur(14px) — mitten in einer Seite, die sonst keines
   mehr hat.
   --------------------------------------------------------------------------- */

body.werkstatt-page .page-section{
  max-width:1280px;
  margin-inline:auto;
  padding:var(--space-page) var(--space-gutter);
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.werkstatt-page .page-section__head{
  margin-bottom:var(--space-6);
}
body.werkstatt-page .page-section__head h2{
  font-family:var(--font-display);
  font-size:var(--step-5);
  font-weight:690;
  line-height:1.05;
  letter-spacing:-0.032em;
  max-width:20ch;
  text-wrap:balance;
}
body.werkstatt-page .page-section__head p{
  margin-top:var(--space-2);
  font-size:var(--step-1);
  line-height:1.5;
  color:var(--muted);
  max-width:54ch;
}