/* kit-pages.css — Ergänzungsschicht der Kit-v2.2-Seiten (Design Kit „BikePass × App Land").
   Lädt als LETZTE Stufe der Kit-Kette: plugin.css → kit.css → kit-pages.css.
   Gilt für die Slugs e-bike-diebstahlschutz · diebstahlsicherung-fahrrad ·
   fahrradcodierung · fahrradpass-app (siehe class-assets.php, KIT_SLUGS).

   Zwei Aufgaben:
   1. Chrome-Restauration — Header, Mobile-Menü und Footer der Site bleiben
      auf Site-Typo (Inter/Bebas): kit.css gewinnt sonst die :root-Font-Vars
      (--font-sans → Raveo) und bringt eine eigene .bp-nav-link-Definition mit.
      Die Restaurationswerte sind 1:1 aus plugin.css übernommen und die einzigen
      erlaubten Wert-Literale dieser Datei.
   2. Kleine geteilte Seiten-Ergänzungen auf Kit-Token-Basis. */

/* --- 1 · Chrome-Inseln: Site-Typo restaurieren ---------------------------- */
#site-header,
#mobile-menu,
.footer-wrap {
  /* v2.62.0: Inter-Restauration aufgelöst (Chris 31.08.) — das Chrome erbt
     Raveo aus dem Kanon; Bebas-Display + neutrale Features bleiben. */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-features: normal;
}

/* .bp-nav-link: der Live-Header und das Kit teilen den Klassennamen — die
   Kit-Pill-Definition würde die Header-Links umstylen. Original-Regel aus
   plugin.css:569 wiederhergestellt (ID-Scope gewinnt gegen jede Kit-Regel). */
#site-header .bp-nav-link {
  color: #334155;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 150ms ease-out, background-color 150ms ease-out;
  padding: 0.5rem 0.85rem;
  border-radius: 9999px;
  font-family: var(--font-sans);
  text-decoration: none;
  min-height: 0;
  line-height: 1.5;
}
#site-header .bp-nav-link:hover {
  color: var(--brand-teal-deep);
  background: var(--brand-teal-light);
}

/* --- 1a2 · Header-/Menü-CTAs: v2.54.1 nach plugin.css umgezogen ----------- */
/* Die Kit-Optik der Chrome-Buttons (Mint/Ink, Kit-Radius) gilt SITEWIDE —
   der Block lebt jetzt mit Token-Fallbacks in plugin.css (lädt auf jeder
   Plugin-Seite, auch ohne kit.css). Chris, 31.08.: „der header muss
   natürlich dann auf jeder seite die neuen buttons haben." */

/* Hero-CTAs: seit v2.58.0 tragen die Startseiten-Hero-Buttons das kanonische
   bp-btn-Markup (E18, <i>-Pfeil) — die frühere btn-on-image-Optik-Angleichung
   (Chris R4/v2.54) ist damit obsolet und entfernt. */

/* --- 1b · Elementor-Kit-Härtung der Kit-Typografie ------------------------ */
/* Elementors post-7.css setzt `.elementor-kit-7 h1/h2/h3 { font-family:
   "Bebas Neue"; font-weight: 500 }` (Spezifität 0,1,1) und schlägt damit die
   Kit-Typoklassen (0,1,0): live kippten ALLE Content-Headings auf Bebas —
   in den Previews ohne Elementor-CSS unsichtbar (Lesson „lokal grün ≠ live
   grün", 29.08.). Der body-Wrapper hebt die Kit-Typo darüber; die Gewichte
   liefern weiterhin die font-variation-settings der Klassen (Raveo ist
   variabel). Hero-Titel und Showcase-Finale sind bewusst NICHT dabei —
   deren Bebas ist Kanon (E13/E23). */
body[class*="elementor-kit-"] :is(.bp-t-h1, .bp-t-h2, .bp-t-h2-sm, .bp-t-h3, .bp-t-h3-sm, .bp-t-h4, .bp-t-h4-sm, .bp-t-h5, .bp-t-h6) {
  font-family: var(--font-display);
}

/* Elementors custom-frontend.min.css setzt `.elementor img { height: auto }`
   (0,1,1) und schlägt alle Kit-Cover-Regeln auf (0,1,1)-Niveau (frühere
   Kaskade): das Foto-CTA-Bild endete mobil auf halber Kartenhöhe, die
   Showcase-Kacheln liefen intrinsisch hoch und überlappten einander. */
body[class*="elementor-kit-"] .bp-cta-photo > img,
body[class*="elementor-kit-"] .bp-showcase__tile img { height: 100%; }
/* v2.61.0: dieselbe Falle traf die Funktionen-Bento (Chris-Meldung 31.08.:
   Bild endete auf 186 statt 250 px Kastenhöhe, Rest = Verlauf) — Härtung für
   die übrigen Kit-Bildregeln mit height:100% (bp-card__media, bp-media-frame,
   bp-feature-tile__visual). Die bpk-media-card füllt über Flex, nicht über
   height — sie bleibt bewusst außen vor. */
body[class*="elementor-kit-"] .bp-card__media > img,
body[class*="elementor-kit-"] .bp-media-frame > img,
body[class*="elementor-kit-"] .bp-feature-tile__visual img { height: 100%; }

/* Welle 1: bp-prose-Headings sitzen auf h2/h3/h4 (0,1,1) — ohne Härtung
   zwingt `.elementor-kit-N h1-h3` sie live auf Bebas (dieselbe Fallen-
   Klasse wie oben, s. MIGRATION.md § 6). */
body[class*="elementor-kit-"] .bp-prose h2,
body[class*="elementor-kit-"] .bp-prose h3,
body[class*="elementor-kit-"] .bp-prose h4,
body[class*="elementor-kit-"] .bp-toc p { font-family: var(--font-display); }

/* --- 1c · Startseite (v2.54.0): Bestands-Inseln ---------------------------- */
/* Die Startseite lädt die Kit-Kette ZUSÄTZLICH zu home.css/journey.css
   (Sonderkette in class-assets.php — home steht bewusst NICHT in KIT_SLUGS,
   die Weiche würde home.css/home.js ersetzen und Hero-Parallax, Counter,
   Reviews, Buybox killen). kit.css stellt :root auf Raveo und body auf
   font-weight 500/Kit-Ink um; die BLEIBT-Sections behalten hier ihre
   Live-Identität. Die UMGEBAUTEN Kit-Sections (Stats, Foto-/Video-CTA,
   Bento, Ratgeber) stehen bewusst NICHT in dieser Liste und laufen voll
   auf Kit-Typo. Journey: Scope ist .bp-jr-grid, damit der neue
   bp-section__head davor die Kit-Typo bekommt, die Bühnen aber nicht.
   Werte identisch mit § 1 (plugin.css/tokens.css-Kanon).
   Mini-Buybox und Social-Toast stehen bewusst NICHT in der Liste: live
   erben sie die Elementor-Body-Typo (Raveo) — mit Inter-Insel brach
   „inkl. MwSt." in der Buybox um (R2, Chris 31.08.). */
.hero-wrap,
.counter-wrap,
.bp-jr-grid,
.usp-cinema,
.reviews-rows {
  /* v2.62.0: Inter-Insel aufgelöst (Chris 31.08.) — die Bestands-Sections
     laufen jetzt im Raveo-Fließtext-Kanon; Bebas-Display, neutrale Features,
     Live-Grundgewicht 400 und Live-Ink bleiben restauriert. */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-features: normal;
  font-weight: 400;        /* kit.css body: 500 — Live-Grundgewicht zurück */
  color: var(--brand-ink); /* kit.css body: Kit-Ink — Live-Textfarbe zurück */
}

/* Bebas ist nicht variabel: Raveo-Achsen/-Features aus der kit.css-h1-h6-
   Regel neutralisieren, damit Hero-Titel & Co. pixelgleich bleiben. */
.hero-wrap :is(h1, h2, h3, h4, h5, h6),
.counter-wrap :is(h1, h2, h3),
.bp-jr-grid :is(h3),
.usp-cinema :is(h2) {
  font-feature-settings: normal;
  font-variation-settings: normal;
}

/* --- 2 · Geteilte Seiten-Ergänzungen (nur Kit-Tokens) --------------------- */

/* Startseite: der Ratgeber-Teaser verlinkt ganze Kit-Karten — Link-Chrome
   neutralisieren, der Pfeil-CTA in der Karte übernimmt die Affordanz. */
a.bp-card { text-decoration: none; color: inherit; }

/* Startseite: Freier-BikePass-CTA — reine Kit-Typo-Section (R3: Raveo statt
   Bebas, Kit-Standard-Button; die Section steht bewusst NICHT in der
   § 1c-Bestands-Insel). */
.home-free-cta { text-align: center; }
.home-free-cta .bp-t-h2 { max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.home-free-cta .accent { color: var(--color-text-accent); }
.home-free-cta .bp-t-lead { margin-top: var(--head-sub-gap); margin-inline: auto; max-width: var(--measure); color: var(--color-text-muted); }
.home-free-cta-action { margin-top: var(--space-12); display: flex; justify-content: center; }

/* Startseite: Ratgeber-Artikel-Karten — das Markup liefert der Live-Renderer
   (the_content-Snippet, inline bp-cards-css lädt NACH dieser Datei): die
   ID-Anker ziehen Typo und Flächen auf Kit-Kanon (R3, Chris). Kopf-Gap:
   kit.css koppelt --head-body-gap an `.bp-section__head + *` — beim Renderer
   ist das adjacent Sibling aber dessen <style>-Tag, der Abstand verpuffte. */
#ratgeber-artikel .rg-related { margin-top: var(--head-body-gap); }
#ratgeber-artikel .rg-card { border-radius: var(--radius-card); }
#ratgeber-artikel .rg-card__title {
  font-family: var(--font-display);
  font-feature-settings: var(--font-features);
  font-variation-settings: "opsz" 16, "wght" var(--text-h4-sm-wght);
  font-size: var(--text-h4-sm);
  font-weight: var(--text-h4-sm-wght);
  letter-spacing: var(--display-ls);
  line-height: 1.2; /* v2.58.0 (Chris): Ratgeber-Karten-Titel 1.1 → 1.2 — bewusst NICHT --display-lh (global) */
  text-transform: none;
}
#ratgeber-artikel .rg-card__excerpt { font-size: var(--text-base); line-height: 1.55; color: var(--color-text-muted); }
#ratgeber-artikel .rg-card__tag { color: var(--color-text-accent); }
#ratgeber-artikel .rg-card__meta { color: var(--color-text-muted); }
#ratgeber-artikel .bpk-cta-row { margin-top: var(--space-12); display: flex; justify-content: center; }

/* Anker-Sprünge landen unter dem Sticky-Header (72 px, Critical-CSS). */
main [id] { scroll-margin-top: calc(var(--header-h, 72px) + var(--space-6)); }

/* Split-Intro: Kopf links, Bild rechts — mittig ausgerichtet. */
.bpk-split { align-items: center; }
.bpk-split + .bp-grid { margin-top: var(--head-body-gap); }
.bpk-ratio43 img { aspect-ratio: var(--ratio-media); width: 100%; object-fit: cover; }

/* Karten-Binnenabstände kommen seit Kit-E10 aus dem 20er-Gap der Karte selbst
   (bp-card--measure/--sunken) — keine Margin-Ketten mehr. */
.bpk-mx-auto  { margin-inline: auto; max-width: 820px; }
.bpk-tip      { max-width: 820px; margin-inline: auto; margin-top: var(--space-12); text-align: center; }
.bpk-card-wide { grid-column: 1 / -1; }

/* Tabellen laufen seit Kit-E17 auf bp-table (Zeilen-Karten, Teal-Highlight) —
   hier nur die zentrierten Wertzellen (Häkchen, Striche). */
.bp-table .bpk-center-cell { text-align: center; }

/* Bild-Kachel im Karten-Raster (füllt eine Grid-Zelle mit einem Motiv). */
.bpk-media-card { min-height: 260px; }
.bpk-media-card img { flex: 1 1 auto; width: 100%; min-height: 0; object-fit: cover; }

/* Stimmen-Karten: seit Kit-E20 die Live-Kanon-Komponente bp-review-card
   (Markup kommt aus kit-pages.js; Avatar-Farben sind Datensatz-Werte). */

/* Marquee-Reihen: zwei Reihen untereinander im Kit-Rhythmus. overflow:hidden
   auf dem Wrapper (v2.61.0): Marquee-Container clippen IMMER auch am Track-
   Wrapper, nicht nur über die mask der Einzelreihen (lessons.md — scrollWidth-
   Aufbläh-Defekt; Home-Pendant .reviews-rows hält es genauso). */
.bp-kitrev-rows { display: flex; flex-direction: column; gap: var(--grid-gap); margin-top: var(--head-body-gap); overflow: hidden; }