/* Bikepark Navigator – Startseiten-Hero (22.10.-Redesign).
 * Komplett fest aus Plugin-CSS + i18n-Woerterbuch (siehe templates/page-karte.php
 * und bpn_t('hero.*')) - kein Block-Editor-Inhalt, nichts, was Marc auf der
 * Live-Seite einfuegen oder pflegen muss.
 */

/* .bpn-hero ist volle Breite, unabhängig von der sonst auf 1080px begrenzten
   .bpn-wrap. Negative Margin oben hebt das Hero direkt an die Kopfzeile heran
   (gleiche Zahl wie .bpn-wrap padding-top). Hintergrund: dasselbe dunkle
   Scrim wie zuvor im Cover-Block, jetzt über einem Foto aus einem kleinen Pool
   (25.10., Marc-Wunsch "nicht immer dasselbe Bild") - PHP waehlt pro
   Seitenaufruf zufaellig eins (siehe templates/page-karte.php) und setzt es
   als --bpn-hero-bg; url("hero-default.jpg") bleibt als Fallback, falls die
   Variable mal fehlt. Alle Fotos: Pexels-/Unsplash-Lizenz, siehe
   assets/CREDITS.md. overflow:hidden hier (nicht auf einem Eltern-Element!)
   schneidet nur das Kompass-Wasserzeichen sauber ab, ohne den
   Full-Bleed-Trick selbst zu beschneiden - der haengt an margin/width von
   .bpn-hero, nicht an einem Vorfahren. */
.bpn-hero {
  position: relative;
  overflow: hidden;
  margin-top: -40px;
  margin-bottom: 0 !important;
  min-height: 640px;
  padding: 90px 0 70px;
  display: flex;
  align-items: center;
  background-image: linear-gradient(180deg, rgba(20,19,12,0.3) 0%, rgba(20,19,12,0.55) 45%, rgba(20,19,12,0.97) 100%), var(--bpn-hero-bg, url("hero-default.jpg"));
  background-size: cover;
  background-position: center;
}
@media (max-width: 620px) {
  .bpn-hero { min-height: 520px; padding: 70px 0 50px; margin-top: -24px; }
}

/* Kompass-Wasserzeichen: zeitloses Markenmotiv statt einer Parkzahl, die
 * ohnehin veraltet. Reagiert leicht auf das Scrollen (Parallax), siehe
 * bpn-home.js - die Geschwindigkeit kommt als CSS-Variable von dort. */
.bpn-hero::before {
  content: "";
  position: absolute;
  left: -70px;
  top: 50%;
  width: clamp(260px, 36vw, 620px);
  height: clamp(260px, 36vw, 620px);
  background: url("compass-watermark.svg") center / contain no-repeat;
  opacity: 0.07;
  transform: translateY(-52%) translateY(calc(var(--bpn-parallax, 0px) * 0.4)) rotate(-8deg);
  z-index: 0;
  pointer-events: none;
}

/* Cursor-Glow: folgt der Maus (siehe bpn-home.js), rein dekorativ und ohne
 * Klickflaeche (pointer-events:none), liegt zwischen Wasserzeichen (::before)
 * und Inhalt. Auf Touch-Geraeten bleibt er einfach an der Startposition.
 * ".bpn-glow-target" (23.10.) macht denselben Effekt auf jedem Element
 * wiederverwendbar, der Hero war nur der erste Ort dafuer. */
.bpn-glow-target::after {
  content: "";
  position: absolute;
  left: var(--bpn-glow-x, 50%);
  top: var(--bpn-glow-y, 28%);
  width: 640px;
  height: 640px;
  margin-left: -320px;
  margin-top: -320px;
  background: radial-gradient(circle, rgba(233, 104, 58, 0.16) 0%, rgba(233, 104, 58, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.bpn-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.bpn-hero__inner > * {
  max-width: 100%;
  overflow-wrap: break-word;
}
@media (max-width: 620px) {
  .bpn-hero__inner { padding-inline: 20px; }
}

.bpn-hero__eyebrow {
  font-family: var(--bpn-font-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 13px;
  color: var(--bpn-accent-deep);
  margin: 0 !important;
}
.bpn-hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  background: var(--bpn-accent);
  margin-right: 10px;
  vertical-align: middle;
}

.bpn-hero__title {
  font-family: var(--bpn-font-head);
  font-weight: 800;
  font-size: clamp(42px, 7vw, 108px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--bpn-ink);
  max-width: 900px;
  margin: 0 !important;
}

.bpn-hero__lede {
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--bpn-ink);
  opacity: 0.92;
  max-width: 600px;
  line-height: 1.55;
  margin: 0 !important;
}

.bpn-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}
.bpn-hero .bpn-btn { font-size: 15px; padding: 13px 24px; }

/* "Fuer dich heute" im Hero (25.10., Marc-Wunsch): ersetzt einen fest
 * eingebauten Beispiel-Park (fuer Besucher ausserhalb Deutschlands witzlos)
 * durch einen echten, auf Wunsch per Klick personalisierten Datenpunkt -
 * siehe Kommentar in templates/page-karte.php. Eigener, gedaempfter Look
 * (dunkler statt accent-orange wie der Trigger im Kartenbereich), damit er
 * nicht mit den beiden Haupt-Buttons konkurriert - gleiches Prinzip wie
 * .bpn-hero__missing. */
.bpn-hero__near {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  max-width: 600px;
  margin-top: 2px;
}
.bpn-hero__near .bpn-todaypicks__trigger {
  background: var(--bpn-sheet);
  border-color: var(--bpn-hair-strong);
  color: var(--bpn-ink);
  font-size: 13px;
  padding: 7px 14px;
}
.bpn-hero__near .bpn-todaypicks__trigger:hover:not(:disabled) {
  background: var(--bpn-sheet);
  border-color: var(--bpn-accent);
}
.bpn-hero__near .bpn-todaypicks__status { color: var(--bpn-ink); opacity: 0.75; }

/* Dezenter CTA unter den Haupt-Buttons (23.10., Marc-Wunsch) - bewusst klein
   gehalten, damit er nicht mit "Karte oeffnen"/"App oeffnen" konkurriert. */
.bpn-hero__missing {
  font-size: 13.5px;
  color: var(--bpn-ink);
  opacity: 0.75;
  margin: 0 !important;
}
.bpn-hero__missing a {
  color: var(--bpn-accent);
  font-weight: 600;
  text-decoration: underline;
}
.bpn-hero__missing a:hover { color: var(--bpn-accent-deep); }

.bpn-marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--bpn-hair);
  border-bottom: 1px solid var(--bpn-hair);
  padding: 16px 0;
  background: var(--bpn-sheet);
  margin: 0 0 28px;
}
.bpn-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  animation: bpn-marquee 26s linear infinite;
  will-change: transform;
}
.bpn-marquee__item {
  font-family: var(--bpn-font-head);
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bpn-muted);
}
.bpn-marquee__dot { color: var(--bpn-accent); font-size: 13px; }
@keyframes bpn-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Parktypen-Sektion (naechste Etappe des Redesigns, 22.10.): 4 Foto-Karten,
 * verlinken auf die bestehenden Kategorie-Archivseiten (/bikeparks/kategorie/<slug>/),
 * die dort schon eine vorgefilterte Karte zeigen - keine neue Filterlogik
 * noetig. Komplett fest wie der Hero, siehe templates/page-karte.php.
 * position:relative (25.10.) macht die Sektion zum zweiten ".bpn-glow-target"
 * auf der Startseite - Kopf und Kartenraster brauchen deshalb z-index:1, um
 * ueber dem Glow (::after, z-index:0) zu bleiben.
 * 25.10., Marc-Wunsch "gleiche Breite wie Hero und Karte": der horizontale
 * Abstand sitzt jetzt nur noch am Kopf (Ueberschrift), nicht mehr auf der
 * ganzen Sektion - das Kartenraster geht dadurch randlos bis zum selben
 * Rahmen wie die Karte weiter unten (.bpn-archive, ebenfalls ohne
 * Innenabstand) statt sichtbar schmaler zu wirken. */
.bpn-types {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 0;
}
@media (max-width: 620px) {
  .bpn-types { padding: 40px 0; }
}
.bpn-types__head {
  position: relative;
  z-index: 1;
  margin: 0 0 28px;
  max-width: 640px;
  padding-inline: 40px;
}
@media (max-width: 620px) {
  .bpn-types__head { padding-inline: 20px; }
}
.bpn-types__head h2 {
  font-family: var(--bpn-font-head);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--bpn-ink);
  margin: 0 0 8px;
}
.bpn-types__head p {
  color: var(--bpn-muted);
  font-size: 16px;
  margin: 0;
}
/* Asymmetrisches Bento-Raster: Bikepark gross/hochkant links (mit Abstand
 * die meisten Parks), die anderen drei Typen rechts gestapelt, nach
 * Parkzahl absteigend. Dirt- & Pumptrack (23.10., Marc-Wunsch) wieder
 * dabei - fasst jetzt auch den verwaisten Supabase-Typ 'trailpark' mit
 * (siehe type.trailpark in class-bpn-i18n.php), macht als Sammelkategorie
 * mehr Sinn als 2 Mini-Gruppen einzeln. */
.bpn-types__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: repeat( 3, 142px );
  gap: 16px;
}
.bpn-types__grid .bpn-type-card--bikepark { grid-column: 1; grid-row: 1 / 4; }
.bpn-types__grid .bpn-type-card--trailcenter { grid-column: 2; grid-row: 1; }
.bpn-types__grid .bpn-type-card--flowtrail { grid-column: 2; grid-row: 2; }
.bpn-types__grid .bpn-type-card--dirtpark { grid-column: 2; grid-row: 3; }
@media (max-width: 760px) {
  .bpn-types__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .bpn-types__grid .bpn-type-card,
  .bpn-types__grid .bpn-type-card--bikepark,
  .bpn-types__grid .bpn-type-card--flowtrail,
  .bpn-types__grid .bpn-type-card--trailcenter,
  .bpn-types__grid .bpn-type-card--dirtpark {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}
/* CI-Farbakzente statt einheitlich Orange (Marc-Wunsch 22.10.) - gleiches
   Prinzip wie die Laenderlisten-Kacheln (--card-accent). */
.bpn-type-card--trailcenter { --card-accent: #9ede3f; }
.bpn-type-card--flowtrail { --card-accent: var(--bpn-accent-deep); }
.bpn-type-card--dirtpark { --card-accent: var(--bpn-accent); }
.bpn-type-card {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(.16,.84,.44,1), box-shadow 0.4s ease;
}
.bpn-type-card:hover,
.bpn-type-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.45);
}
.bpn-type-card__scrim {
  position: absolute;
  inset: 0;
  /* Nur unten dunkel, oben bleibt das Foto klar sichtbar (vorher komplett
     abgedunkelt - wirkte flach statt wie ein echtes Foto). */
  background: linear-gradient(180deg, rgba(20,19,12,0) 35%, rgba(20,19,12,0.92) 100%);
}
.bpn-type-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  max-width: 280px;
}
.bpn-type-card__count {
  font-family: var(--bpn-font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--card-accent, var(--bpn-accent-deep));
}
.bpn-type-card__body h3 {
  font-family: var(--bpn-font-head);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--bpn-ink);
  margin: 0;
}
.bpn-types__grid .bpn-type-card--bikepark h3 { font-size: 28px; }
.bpn-type-card__body p {
  color: var(--bpn-muted);
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}
.bpn-type-card__cta {
  color: var(--bpn-ink);
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.bpn-type-card:hover .bpn-type-card__cta,
.bpn-type-card:focus-visible .bpn-type-card__cta {
  opacity: 1;
  transform: translateX(0);
}
@media (hover: none) {
  .bpn-type-card__cta { opacity: 1; transform: none; }
}

/* Ueberschrift vor der Karte (22.10.) - fehlte komplett, dadurch wirkte
   die Karte wie unvermittelt reingeplumpst nach den Parktypen-Karten. */
.bpn-maphead { margin: 8px 0 24px; }

/* Features-Band (22.10., 3. Anlauf): Marc fand Liste+Vorschau-Karte
 * "immer noch zu langweilig, viel Platz, wenig Inhalt" - jetzt 4
 * Teaser-Kacheln mit echten App-Screenshots (Mobilansicht, in einem
 * Handy-Rahmen) statt Icon+Text, dunkler CI-Hintergrund mit
 * Isobarenlinien (gleiches Motiv wie die Visitenkarten) statt schlichter
 * Flaeche. Urspruenglich helles Kontrastband als Rahmen (Hell/Dunkel-
 * Rhythmus). 25.10., Marc-Wunsch: das helle Band "sprengt das Design" bei
 * 8 dunklen Kacheln drauf - jetzt durchgaengig dunkel wie der Rest der
 * Seite (var(--bpn-ground), gleicher Ton wie body), Kacheln dafuer einen
 * Schritt heller (var(--bpn-surface-2)) fuer Abgrenzung auf dunklem Grund.
 * Komplett fest, siehe templates/page-karte.php. */
.bpn-features-band {
  position: relative;
  background: var(--bpn-ground);
  border-top: 1px solid var(--bpn-hair);
  border-bottom: 1px solid var(--bpn-hair);
  padding: 48px 0;
  /* Unten kein Abstand mehr (vorher 56px, 25.10. auf 0): der Abschluss-Block
     folgt jetzt direkt, dessen eigener Rand (padding) reicht als Luft - sonst
     zwei Trennlinien mit Luecke dazwischen statt einer, Marc-Feedback 25.10. */
  margin: 16px 0 0;
}
.bpn-features-band__in {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 620px) {
  .bpn-features-band { padding: 36px 0; }
}
/* 25.10., Marc-Wunsch "gleiche Breite wie Hero und Karte": der horizontale
 * Abstand sitzt jetzt nur noch am Kopf, nicht mehr auf der ganzen Sektion -
 * das Kachel-Raster (.bpn-features-band__grid) geht dadurch randlos bis zum
 * selben Rahmen wie die Karte (.bpn-archive, ebenfalls ohne Innenabstand). */
.bpn-features-band__head {
  max-width: 640px;
  margin: 0 0 24px;
  padding-inline: 40px;
}
@media (max-width: 620px) {
  .bpn-features-band__head { padding-inline: 20px; }
}
.bpn-features-band__head h2 {
  font-family: var(--bpn-font-head);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 40px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--bpn-ink);
  margin: 0 0 6px;
}
.bpn-features-band__head p {
  color: var(--bpn-muted);
  font-size: 16px;
  margin: 0;
}
/* 4x2-Raster (23.10., Marc-Wunsch "4 in eine Reihe") statt der bisherigen
   2-Spalten-Flaeche - bei 4 schmalen Spalten passt die bisherige horizontale
   Kachel (Handy links, Text rechts) nicht mehr (die Hook-Saetze haetten
   kaum noch Platz zum Umbrechen) - Kachel deshalb gestapelt (Handy oben,
   Text darunter, zentriert), klassisches Feature-Grid-Muster. */
.bpn-features-band__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 980px) {
  .bpn-features-band__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .bpn-features-band__grid { grid-template-columns: 1fr; }
}
.bpn-feature-tile {
  position: relative;
  overflow: hidden;
  background: var(--bpn-surface-2);
  border: 1px solid var(--bpn-hair-strong);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(.16,.84,.44,1), box-shadow 0.35s ease;
}
.bpn-feature-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.4);
}
/* background-image kommt seit 25.10. per Inline-Style aus page-karte.php
   (eigenes Muster je Kachel, isobar-<feature>.svg) - hier nur noch Position/
   Groesse/Wiederholung, die fuer alle 8 Varianten gleich bleiben. */
.bpn-feature-tile__isobars {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.55;
  pointer-events: none;
}
.bpn-feature-tile__phone {
  appearance: none;
  font: inherit;
  position: relative;
  z-index: 1;
  flex: none;
  width: 130px;
  aspect-ratio: 9 / 19.5;
  border-radius: 18px;
  border: 5px solid var(--bpn-hair-strong);
  background: var(--bpn-sheet);
  overflow: hidden;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
  padding: 0;
  cursor: zoom-in;
  transition: transform 0.25s ease;
}
.bpn-feature-tile__phone:hover,
.bpn-feature-tile__phone:focus-visible {
  transform: scale(1.04);
}
.bpn-feature-tile__phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  pointer-events: none;
}
.bpn-feature-tile__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
/* Ueberschrift ist seit 23.10. ein ganzer Satz (Hook-Frage statt Feature-
   Name, Marc-Wunsch) - kein text-transform:uppercase mehr, das waere bei
   einem vollen Satz zu laut; fett (Zeile 1) + normaler Fliesstext (Zeile 2,
   .bpn-feature-tile p) bleibt die gewuenschte Unterscheidung. */
.bpn-feature-tile h3 {
  font-family: var(--bpn-font-head);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.3;
  color: var(--bpn-ink);
  margin: 0;
}
.bpn-feature-tile p {
  color: var(--bpn-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* Abschluss-Block (25.10., Marc-Wunsch): vorher leere Flaeche zwischen den
 * Funktions-Kacheln und dem Footer, kein letzter Call-to-Action. Dritter
 * ".bpn-glow-target" auf der Startseite (siehe templates/page-karte.php),
 * deshalb position:relative + der Inhalt (__in) mit z-index:1 ueber dem
 * Glow (::after, z-index:0) - gleiches Prinzip wie .bpn-types und
 * .bpn-features-band. Durchgaengig dunkel statt Kontrastband, gleiche
 * Lehre wie beim Features-Band (23./25.10.: ein helles Band "sprengt das
 * Design"). Kein eigener border-top mehr (2. Anlauf, 25.10.) - die
 * Trennung zum Features-Band kommt allein von dessen border-bottom, sonst
 * zwei Linien mit Luecke dazwischen. */
.bpn-closing {
  position: relative;
  background: var(--bpn-ground);
  padding: 64px 0;
}
.bpn-closing__in {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
@media (max-width: 620px) {
  .bpn-closing { padding: 48px 0; }
  .bpn-closing__in { padding-inline: 20px; }
}
.bpn-closing__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 440px;
}
.bpn-closing__title {
  font-family: var(--bpn-font-head);
  font-weight: 800;
  font-size: clamp(28px, 3.8vw, 44px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--bpn-ink);
  margin: 0;
}
.bpn-closing__lede {
  color: var(--bpn-muted);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}
.bpn-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}
.bpn-closing__actions .bpn-btn { font-size: 15px; padding: 13px 24px; }

/* Senkrechte Trennlinie zum QR-Code, gleiche Farbe wie die Trennlinien der
   anderen Sections (var(--bpn-hair)) statt einer eigenen Nuance. */
.bpn-closing__divider {
  align-self: stretch;
  width: 1px;
  background: var(--bpn-hair);
  flex: none;
}
.bpn-closing__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: none;
}
.bpn-closing__qr img {
  width: 120px;
  height: 120px;
  padding: 12px;
  background: var(--bpn-surface-2);
  border: 1px solid var(--bpn-hair-strong);
  border-radius: 12px;
}
.bpn-closing__qr span {
  font-family: var(--bpn-font-label);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bpn-muted);
  text-align: center;
}
@media (max-width: 760px) {
  .bpn-closing__in { flex-direction: column; gap: 28px; }
  .bpn-closing__text { align-items: center; text-align: center; max-width: 440px; }
  .bpn-closing__actions { justify-content: center; }
  .bpn-closing__divider { width: 100%; height: 1px; }
}

/* Lightbox: Klick auf einen Handy-Screenshot zeigt ihn gross (Marc-Wunsch
   22.10.), schliessbar per X, Klick auf den Hintergrund oder Esc (siehe
   bpn-home.js). */
.bpn-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 9, 6, 0.92);
  padding: 50px 20px;
}
.bpn-lightbox.is-open { display: flex; }
.bpn-lightbox__img {
  max-width: min(420px, 85vw);
  max-height: 85vh;
  border-radius: 22px;
  border: 6px solid var(--bpn-surface-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  display: block;
}
.bpn-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bpn-surface-2);
  border: 1px solid var(--bpn-hair-strong);
  color: var(--bpn-ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bpn-lightbox__close:hover { background: var(--bpn-surface); }

/* Sanftes Einblenden beim Scrollen - generisch per Klasse, nicht an feste
 * Inhalte gebunden, damit es erhalten bleibt, egal was Marc einfügt. */
.bpn-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(.16,.84,.44,1), transform 0.7s cubic-bezier(.16,.84,.44,1);
}
.bpn-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .bpn-marquee__track { animation: none; }
  .bpn-reveal { opacity: 1; transform: none; transition: none; }
  .bpn-hero::before { transform: translateY(-52%) rotate(-8deg) !important; }
}