/* ==========================================================================
   Belfrit — brand token overrides
   Loaded after main.css / responsive.css, only when brand = belfrit.
   Fonts: New Spirit (titles, load via Adobe Fonts kit in header.php),
          Inter Tight (body, Google Fonts).
   Colours: #FADC02 yellow / #CA0A17 red / #111111 dark background.
   ========================================================================== */

:root {
  /* Fonts — New Spirit requires an Adobe Fonts kit URL added to header.php */
  --font-heading: 'New Spirit', Georgia, serif;
  --font-body: 'Inter Tight', system-ui, sans-serif;

  /* Body text size: 16.5px across all non-heading elements */
  --text-body-sm: 1.03125rem;

  /* Core color tokens */
  --color-yellow: #FADC02;
  /* headings, nav links, accents */
  --color-red: #CA0A17;
  /* primary buttons */
  --color-dark: #111111;
  /* page + header background */
  --color-text: #EDEDED;
  /* body text (light on dark) */
  --color-text-muted: #999999;

  /* Semantic aliases */
  --color-black: #EDEDED;
  /* overrides base "black" token for dark theme */
  --color-bg-page: #111111;
  --color-bg-hero: #111111;
  --color-bg-card: #1E1E1E;
  --color-bg-cta: #1E1E1E;
  --color-green-dark: #EDEDED;
  /* re-uses mojito heading token — point at light text */

  /* Brand primary = red */
  --color-primary: #CA0A17;

  /* Colour of the checked data-protection consent checkbox */
  --consent-check-color: var(--color-primary);

  /* Header always dark */
  --color-header-bg: #111111;
  --color-header-sticky-bg: #111111;
}

/* -------------------------------------------------------------------------
   Base: dark page background and light body text
   ------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  background-color: var(--color-bg-page);
  color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-heading);
  color: var(--color-yellow);
}

/* New Spirit for interactive + label elements */
a,
.btn,
button,
.bf-overline,
.bf-num-circle,
.cp-usecase-card__number,
.cp-event-card__badge-day,
.cp-event-card__badge-month,
.cp-badge {
  font-family: var(--font-heading);
}

/* Inter Tight + muted colour for all body copy.
   Grouped to win over main.css compound selectors (.cp-feature-card p etc. — all 0-1-1).
   This file is brand-scoped (belfrit only) so the rule never bleeds into other brands. */
p,
.hero-content p,
.cp-feature-card p,
.cp-quote-card p,
.cp-benefit-item__content p,
.cp-usecase-card__body p {
  font-family: var(--font-body);
  color: #afafaf;
}

/* CTA banner description uses --text-body (18px) in main.css; align to brand body size */
.cp-cta-banner__desc {
  font-size: var(--text-body-sm);
}

/* Links: white by default */
a {
  color: #fff;
}


/* -------------------------------------------------------------------------
   Buttons: primary = red
   ------------------------------------------------------------------------- */
.cp-btn--primary {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
}

.cp-btn--primary:hover,
.cp-btn--primary:focus-visible {
  background-color: #a60814;
  border-color: #a60814;
  color: #fff;
}

/* -------------------------------------------------------------------------
   Logo
   ------------------------------------------------------------------------- */
.logo img {
  height: 4.5rem;
}

/* Header: full-width bar, inset matches hero text padding */
.site-header .header-inner {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: clamp(1.25rem, 8vw, 6rem);
}

/* Fallback text logo when no image is uploaded yet */
.logo__text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-yellow);
  text-decoration: none;
}

/* Tabler globe icon: white on dark header */
.icon-globe.ti {
  font-size: 1.125rem;
  line-height: 1;
  color: #fff;
}

/* -------------------------------------------------------------------------
   Header: always dark background, no transparency
   ------------------------------------------------------------------------- */
.site-header {
  background-color: var(--color-header-bg);
  background-image: none;
  padding-bottom: 1.875rem;
  --site-header-shadow: none;
}

.site-header--fixed-immediate,
.site-header--sticky-after-hero:not(.site-header--is-pinned) {
  background-color: var(--color-header-bg);
  background-image: none;
}

/* Transparent header when a video hero is active, before the header pins.
   Excluded: is-pinned (frosted glass kicks in) and fixed-immediate (mobile). */
body:has(#hero.has-bg-video) .site-header:not(.site-header--is-pinned):not(.site-header--fixed-immediate) {
  background-color: transparent;
  background-image: none;
}

/* Nav shadow over video hero (same shadow as hero text) */
body:has(#hero.has-bg-video) .site-header:not(.site-header--is-pinned):not(.site-header--fixed-immediate) nav a {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 1);
}

/* Frosted-glass effect when header is pinned (scrolled past hero) */
.site-header--sticky-after-hero.site-header--is-pinned {
  background-color: rgba(17, 17, 17, 0.70);
  background-image: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Feature cards (#angebot) + Einsatzbereiche (#einsatzbereiche) behave identically.
   Each section sits in its own `.container`, so `:has(#…)` targets just that block. */

/* 1025–1439px: match the Events block exactly — same gutter (the events
   full-bleed padding) and the same 72rem centred content cap. The container
   supplies the gutter; the section caps + centres like `.bf-events__card`. */
@media (min-width: 1025px) and (max-width: 1439px) {
  .container:has(#angebot),
  .container:has(#einsatzbereiche) {
    padding-inline: clamp(1.25rem, 5vw, 4rem);
  }

  #angebot,
  #einsatzbereiche {
    max-width: 72rem;
    margin-inline: auto;
  }

  /* Drop the shared 2.5rem button-lane padding (responsive.css) so the slide
     track fills the slider edge-to-edge and the cards reach the full 72rem —
     same width as the Events block. The arrows are hover-only here (see the
     reveal rules below), so they overlap the outer cards instead of needing a
     reserved lane. Mirrors the mini-donuts treatment. */
  .cp-angebot-slider,
  .cp-einsatz-slider {
    padding-inline: 0;
  }
}

/* ≤1024px (tablet + phone): the feature-card and einsatzbereiche arrows are
   hidden here (see the reveal rules below), so their sliders need no arrow lane.
   Drop the shared 2.5rem lane (responsive.css) so the slide tracks reach the
   standard `.container` gutter — the same inset the Qualität (image + bulletpoints)
   block and the Events cards use. The container keeps its default gutter, which
   already matches Qualität, so no gutter override is needed here. */
@media (max-width: 1024px) {
  .cp-angebot-slider,
  .cp-einsatz-slider {
    padding-inline: 0;
  }
}

/* ≥1440px: align the cards to the header page-edge inset so they line up with the
   logo (left) and the header CTA button (right). */
@media (min-width: 1440px) {
  .container:has(#angebot),
  .container:has(#einsatzbereiche) {
    padding-inline: clamp(1.25rem, 8vw, 6rem);
  }
}

/* -------------------------------------------------------------------------
   Desktop nav links: yellow
   ------------------------------------------------------------------------- */
.site-header nav a {
  color: var(--color-yellow);
}

.site-header nav a:hover {
  color: #afafaf;
  opacity: 1;
}

/* Separator dots between nav items: red */
.site-header nav li:not(:last-child)::after {
  background-color: var(--color-red);
}

/* Language switcher: white toggle, dark dropdown */
.language-switcher__toggle {
  color: #fff;
}

.language-switcher__toggle:hover,
.language-switcher__toggle:focus,
.language-switcher__toggle:active,
.language-switcher__toggle:focus-visible,
.language-switcher__toggle.show {
  background: transparent;
  color: #afafaf;
  box-shadow: none;
  outline: none;
  opacity: 1;
}

.language-switcher__menu {
  /* Override Bootstrap 5.3 light-mode dropdown variables */
  --bs-dropdown-bg: #1e1e1e;
  --bs-dropdown-color: #fff;
  --bs-dropdown-link-color: #fff;
  --bs-dropdown-link-hover-color: #afafaf;
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-dropdown-link-active-color: rgba(255, 255, 255, 0.45);
  --bs-dropdown-link-active-bg: transparent;
  --bs-dropdown-border-color: rgba(255, 255, 255, 0.12);

  background-color: var(--bs-dropdown-bg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Nested selectors (.language-switcher > .option) beat Bootstrap's .dropdown-item.active (0-2-0) */
.language-switcher .language-switcher__option {
  color: #fff;
  background-color: transparent;
}

.language-switcher .language-switcher__option:hover,
.language-switcher .language-switcher__option:focus {
  background-color: rgba(255, 255, 255, 0.06);
  color: #afafaf;
}

.language-switcher .language-switcher__option.active,
.language-switcher .language-switcher__option:active {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

/* Hamburger lines: white on dark header */
.nav-toggle__line {
  background-color: #fff;
}

/* -------------------------------------------------------------------------
   Carousel buttons: yellow + black arrow (all Belfrit sliders)
   ------------------------------------------------------------------------- */
.cp-carousel__btn {
  background-color: var(--color-yellow);
}

.cp-carousel__btn:hover {
  background-color: #e0c600;
}

.cp-carousel__btn-icon {
  filter: brightness(0);
}

/* -------------------------------------------------------------------------
   Slider nav arrows — visibility (mirrors the Mojito rules; overrides the
   shared main-subpages.css / responsive.css defaults, which show the arrows
   across all touch + desktop widths). Belfrit-scoped via this stylesheet.

   • Feature-cards (#angebot) + Einsatzbereiche (#einsatzbereiche):
       – Phones & tablets (≤1024px): no arrows — swipe / drag only.
       – PC (1025–1439px, where the slider is mounted): arrows fade in only
         while the slider is hovered or keyboard-focused. At ≥1440px the slider
         becomes a static grid, so the base `display: none` keeps them hidden.
   • Events (#bf-events): no arrows at any width — swipe / drag only.
   ------------------------------------------------------------------------- */

/* Feature-cards + Einsatzbereiche: hide arrows on phones & tablets */
@media (max-width: 1024px) {
  .cp-angebot-slider .cp-carousel__btn,
  .cp-einsatz-slider .cp-carousel__btn {
    display: none;
  }
}

/* Feature-cards + Einsatzbereiche: reveal on hover / focus (PC, slider range) */
@media (min-width: 1025px) and (max-width: 1439px) {
  .cp-angebot-slider .cp-carousel__btn,
  .cp-einsatz-slider .cp-carousel__btn {
    display: flex;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .cp-angebot-slider:hover .cp-carousel__btn,
  .cp-angebot-slider:focus-within .cp-carousel__btn,
  .cp-einsatz-slider:hover .cp-carousel__btn,
  .cp-einsatz-slider:focus-within .cp-carousel__btn {
    opacity: 1;
  }
}

/* Events: remove the nav arrows entirely, every viewport (ID beats the shared
   [data-events-splide]…is-overflow rule regardless of source order). */
#bf-events .cp-carousel__btn {
  display: none;
}

/* -------------------------------------------------------------------------
   Tablet/mobile (≤1439px): dark nav dropdown panel
   ------------------------------------------------------------------------- */
@media (max-width: 1439px) {

  /* Mobile/tablet sticky header: match desktop frosted-glass pinned state.
     JS always applies site-header--fixed-immediate on this breakpoint, so
     we style that class with the same backdrop-blur used on desktop. */
  .site-header--fixed-immediate {
    background-color: rgba(17, 17, 17, 0.70);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  /* Mobile nav dropdown panel: dark background */
  .site-header nav[aria-label="Hauptnavigation"] {
    background-color: #1A1A1A;
    background-image: none;
    border-top: none;
  }

  /* Show border only when nav is open */
  .site-header:has(.nav-toggle[aria-expanded="true"]) nav[aria-label="Hauptnavigation"] {
    border-top: 1px solid rgba(250, 220, 2, 0.15);
  }

  /* Mobile nav links: yellow, yellow dividers */
  .site-header nav a {
    color: var(--color-yellow);
    border-bottom-color: rgba(250, 220, 2, 0.12);
  }

  .site-header nav li:last-child a {
    border-bottom: none;
  }
}

/* -------------------------------------------------------------------------
   Desktop (≥1025px): restore desktop nav layout suppressed by responsive.css.
   responsive.css hides the CTA button and shows the hamburger at ≤1439px
   (Mojito-Lemon breakpoint). Belfrit uses the hamburger on mobile + tablet.
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1439px) {

  /* Show CTA button */
  .header-actions>.cp-btn {
    display: inline-flex;
  }

  /* Hide hamburger */
  .nav-toggle {
    display: none;
  }

  /* Restore nav in grid flow — grid 1fr auto 1fr centres it without absolute positioning */
  .site-header nav[aria-label="Hauptnavigation"] {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    max-height: none;
    overflow: visible;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    border-top: none;
    transition: none;
  }

  /* Restore horizontal nav list */
  .site-header nav ul {
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 0;
  }

  .site-header nav li {
    display: flex;
    align-items: center;
  }

  .site-header nav li:not(:last-child)::after {
    display: block;
  }

  .site-header nav a {
    display: inline;
    padding: 0;
    font-size: inherit;
    border-bottom: none;
  }

  .site-header nav li:last-child a {
    border-bottom: none;
  }
}

/* Language switcher: visible on all screen sizes for Belfrit */
@media (max-width: 767px) {
  .language-switcher {
    display: flex;
  }
}


/* =========================================================================
   HERO — full-bleed background image, content overlaid
   ========================================================================= */

/* main.css sets background-image and min-height on #hero — reset both for Belfrit.
   background-image: none is the default; inline style overrides it when image is set. */
#hero.bf-hero,
.bf-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--color-bg-page);
  background-image: none;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  overflow: hidden;
  /* Push below the fixed header (JS writes --site-header-height at runtime) */
  margin-top: calc(-1 * var(--site-header-height, 4.5rem));
}

/* Dark gradient overlay — left side darker for text readability */
#hero.bf-hero::before,
.bf-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.55) 45%,
      rgba(0, 0, 0, 0.15) 100%);
  z-index: 1;
  pointer-events: none;
}

/* No gradient overlay when a background video is active */
#hero.bf-hero.has-bg-video::before,
.bf-hero.has-bg-video::before {
  display: none;
}

/* Background video must fill the full viewport. The hero is pulled up under the
   absolute header via `margin-top: -site-header-height`, so its box ends one
   header-height short of the viewport bottom — leaving a strip of the next
   section visible below the video. Add the header height back to the min-height
   so the video reaches the bottom edge. */
#hero.bf-hero.has-bg-video,
.bf-hero.has-bg-video {
  min-height: calc(100vh + var(--site-header-height, 4.5rem));
}

.bf-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Match .header-inner centering so title left-edge aligns with logo at all viewport widths */
  max-width: var(--layout-page-max);
  width: 100%;
  margin-inline: auto;
  padding-top: calc(var(--site-header-height, 4.5rem) + 4rem);
  padding-bottom: 4rem;
  padding-inline: clamp(1.25rem, 8vw, 6rem);
}

/* First heading line (overline field repurposed as h1 line 1) — white */
.bf-hero__heading-line {
  display: block;
  color: #fff;
}

.bf-hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4.5vw, 5rem);
  font-weight: 700;
  line-height: 1.0;
  color: var(--color-yellow);
  margin-bottom: 1.5rem;
}

.bf-hero__description {
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: #afafaf;
  max-width: 38ch;
  margin-bottom: 2.5rem;
}

.bf-hero__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Outline button on dark/image hero */
.bf-hero .cp-btn--outline {
  border-color: rgba(237, 237, 237, 0.7);
  color: #EDEDED;
}

.bf-hero .cp-btn--outline:hover {
  box-shadow: 4px 4px 0 0 #000;
}

.bf-hero.has-bg-video .cp-btn--outline {
  background-color: #000;
  border-color: #000;
}

.bf-hero.has-bg-video .bf-hero__description {
  color: #fff;
}

.bf-hero.has-bg-video .bf-hero__heading,
.bf-hero.has-bg-video .bf-hero__description {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 1);
}

/* =========================================================================
   ANGEBOT — 4-card photo grid
   ========================================================================= */

.bf-angebot {
  padding-block: clamp(3rem, 7vw, 6rem);
  /* padding-inline: clamp(1.25rem, 5vw, 4rem); */
  background-color: var(--color-bg-page);
}

.bf-angebot__header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.bf-overline {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-red);
  text-align: center;
  max-width: none;
  margin-bottom: 0.5rem;
}

.bf-angebot__heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--color-yellow);
  margin: 0 0 1rem;
}

.bf-angebot__description {
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: #afafaf;
  max-width: 52ch;
  margin: 0 auto;
}

/* Feature-card overrides for dark Belfrit theme.
   Color tokens (--color-bg-card, --color-black) handle most of it;
   badge uses the brand stamp SVG instead of the mojito-lemon star. */
.bf-angebot .bf-overline {
  text-align: center;
}

.bf-angebot__badge {
  background-image: url('../img/belfrit/feature-cards/belfrit-yellow-square-stamp.svg');
  background-color: transparent;
  border-radius: 0;
  width: 4.5rem;
  height: 4.5rem;
}

.bf-angebot__badge .cp-badge__icon {
  width: 2rem;
  height: 2rem;
}

/* (carousel buttons handled by global Belfrit rule below) */

/* =========================================================================
   QUALITAET — Bild links, Bulletpoints rechts
   ========================================================================= */

.bf-qualitaet {
  padding-block: clamp(3rem, 7vw, 6rem);
  /* padding-inline: clamp(1.25rem, 5vw, 4rem); */
}

@media (min-width: 992px) {
  #qualitaet.bf-qualitaet {
    scroll-margin-top: calc(var(--site-header-height, 4.5rem) + 4rem);
  }

  .bf-qualitaet .cp-media-block__image {
    position: sticky;
    top: calc(var(--site-header-height, 4.5rem) + 3rem);
  }

  /* .bf-qualitaet .cp-media-block {
    min-height: 1200px;
  } */

  .bf-qualitaet .cp-media-block__content {
    padding-top: 0;
  }
}

/* Overline in this section: left-aligned (not centered like angebot) */
.bf-qualitaet .bf-overline {
  text-align: left;
}

/* Heading: yellow, using brand font */
.bf-qualitaet h2 {
  color: var(--color-yellow);
}

/* Bullet: small red rectangle instead of the cp-badge star */
.bf-qualitaet__bullet {
  flex-shrink: 0;
  width: 0.5rem;
  height: 1rem;
  background-color: var(--color-red);
  border-radius: 0.125rem;
  margin-top: 0.3rem;
}

/* Keep benefit-item gap tight with the narrow bullet */
.bf-qualitaet .cp-benefit-item {
  gap: 0.875rem;
  align-items: flex-start;
}

/* Description under heading: muted light text on dark background */
.bf-qualitaet__description {
  color: #afafaf;
  margin-top: 0.75rem;
  margin-bottom: 0;
  max-width: none;
}

/* Quote card: red background, wider + flex-centred (mirrors Mojito-Lemon sizing) */
.bf-qualitaet .cp-quote-card {
  background-color: var(--color-red);
  width: clamp(15rem, 72%, 18rem);
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2rem;
}

.bf-qualitaet .cp-quote-card p {
  color: #fff;
  text-align: center;
  margin-bottom: 0;
}

/* Desktop: left edge at image midline */
@media (min-width: 1025px) {
  .bf-qualitaet .cp-quote-card {
    left: 50%;
    right: auto;
    transform: none;
  }
}

/* 992–1024px: horizontally centred in image column */
@media (min-width: 992px) and (max-width: 1024px) {
  .bf-qualitaet .cp-quote-card {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 1rem;
    width: calc(100% - 2rem);
    transform: translateX(-50%);
  }
}

/* Mobile/tablet: centred in image */
@media (max-width: 991.9px) {
  .bf-qualitaet .cp-quote-card {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* Bulletpoint body text: same muted tone as description */
.bf-qualitaet .cp-benefit-item__content p {
  color: #afafaf;
  max-width: none;
}

/* =========================================================================
   EINSATZBEREICHE — numbered use-case cards slider
   ========================================================================= */

/* Section header: left-aligned (overrides section-heading--center) */
.bf-einsatzbereiche .section-heading {
  text-align: left;
}

.bf-einsatzbereiche .bf-overline {
  text-align: left;
  margin-inline: 0;
}

/* Card number: red instead of mojito green */
.bf-einsatzbereiche .cp-usecase-card__number {
  color: var(--color-red);
}

/* Card title: white on dark card background */
.bf-einsatzbereiche .cp-usecase-card__title {
  color: #fff;
}

/* (carousel buttons handled by global Belfrit rule below) */

/* =========================================================================
   CONTACT — yellow full-bleed, left content + right form
   ========================================================================= */

.bf-contact {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: var(--color-yellow);
  padding-block: clamp(3rem, 7vw, 6rem);
  padding-inline: clamp(1.25rem, 8vw, 6rem);
}

/* Contact-form inline links (e.g. the Datenschutzerklärung link) in brand colour */
.contact-form a {
  color: #ca0a17;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.bf-contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: stretch;
  max-width: 72rem;
  margin-inline: auto;
}

/* Left column */
.bf-contact__overline {
  color: var(--color-red);
  text-align: left;
  margin-inline: 0;
}

.bf-contact__heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--color-dark);
  line-height: 1.05;
  margin-bottom: 1rem;
}

.bf-contact__desc {
  color: var(--color-dark);
  opacity: 0.8;
  margin-bottom: 1.5rem;
  max-width: none;
}

/* Check bullets */
.bf-contact__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bf-contact__bullet {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: var(--color-dark);
}

/* Right column: flex so success message centers vertically */
.bf-contact__right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bf-contact__right .contact-form {
  width: 100%;
}

/* Right column: form styling on yellow background */
.bf-contact__right .form-control,
.bf-contact__right .form-select {
  background-color: #fff;
  border-color: transparent;
  color: var(--color-dark);
  border-radius: 2rem;
}

.bf-contact__right .form-control:focus,
.bf-contact__right .form-select:focus {
  border-color: var(--color-red);
  box-shadow: none;
}

.bf-contact__right .form-label {
  color: var(--color-dark);
  font-weight: 600;
  font-size: 0.9375rem;
}

/* Textarea: recognisable multi-line field */
.bf-contact__right textarea.form-control {
  border-radius: 1rem !important;
  height: 7rem !important;
  resize: vertical;
}

/* Submit button: use Belfrit red (overrides generic btn-dark) */
.bf-contact__right .btn-dark {
  display: block;
  margin-top: 1.5rem;
  background-color: var(--color-red);
  border-color: var(--color-red);
  border-radius: var(--radius-button, 1.6875rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.75rem 2rem;
  color: #fff;
}

.bf-contact__right .btn-dark:hover,
.bf-contact__right .btn-dark:focus {
  background-color: #a60814;
  border-color: #a60814;
  color: #fff;
}

.bf-contact .alert.contact-form__success,
.bf-contact .alert.contact-form__success p {
  background: none;
  border: none;
  box-shadow: none;
  font-size: 1.125rem !important;
  /* 18px */
  color: var(--color-dark) !important;
  text-align: center;
  padding: 0;
  margin: 0;
}

.contact-form__privacy-label p {
  color: #111111 !important;
}

.form-check-input:checked {
  background-color: #ca0c17 !important;
  border-color: #ca0c17 !important;
}

/* Below 992px: stack the form under the info column (like on phones) */
@media (max-width: 991.98px) {
  .bf-contact__inner {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   SHARED: .bf-num-circle — red circle with white number
   Used in belfrit-ablauf (always) and belfrit-angebot (toggle)
   ========================================================================= */

.bf-num-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-red);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

/* Checkmark circle variant — used in belfrit-contact bullets */
.bf-check-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--color-red);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

/* =========================================================================
   ABLAUF — image left, numbered steps right
   ========================================================================= */

.bf-ablauf {
  padding-block: clamp(3rem, 7vw, 6rem);
  /* padding-inline: clamp(1.25rem, 5vw, 4rem); */
}

@media (min-width: 992px) {
  .bf-ablauf {
    scroll-margin-top: calc(var(--site-header-height, 4.5rem) + 4rem);
  }

  .bf-ablauf .cp-media-block__image {
    position: sticky;
    top: calc(var(--site-header-height, 4.5rem) + 3rem);
  }

  /* .bf-ablauf .cp-media-block {
    min-height: 1200px;
  } */

  .bf-ablauf .cp-media-block__content {
    padding-top: 0;
  }
}

.bf-ablauf .bf-overline {
  text-align: left;
}

.bf-ablauf .section-heading {
  margin-bottom: 2rem;
}

.bf-ablauf__intro {
  color: #afafaf;
  margin-top: 0.75rem;
  margin-bottom: 0;
  max-width: none;
}

.bf-ablauf__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bf-ablauf__step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.bf-ablauf__step-content {
  flex: 1 1 0;
  min-width: 0;
}

.bf-ablauf__step-title {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}

.bf-ablauf__step-text {
  color: #afafaf;
  margin: 0;
  max-width: none;
}

/* =========================================================================
   EVENTS — card grid, adapted from mini-donuts-events
   ========================================================================= */

#bf-events {
  /* Full-bleed, no rounded corners */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: var(--color-bg-card);
  padding-block: var(--space-2xl);
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.bf-events__card {
  /* Constrain content width to match feature-card grid */
  max-width: 72rem;
  margin-inline: auto;
}

/* Date badge: yellow with black text */
.bf-events .cp-event-card__badge {
  background-color: var(--color-yellow);
}

.bf-events .cp-event-card__badge-day,
.bf-events .cp-event-card__badge-month {
  color: #000;
}

/* Card text: standard Belfrit text white */
.bf-events .cp-event-card__title {
  color: var(--color-text);
}

.bf-events .cp-event-card__date,
.bf-events .cp-event-card__desc {
  color: #afafaf;
}

.bf-events .cp-event-card__desc-toggle {
  color: #afafaf;
}

#bf-events .cp-event-card__desc-fade {
  --cp-event-card-desc-fade-color: var(--color-bg-card);
}

/* Calendar icon: invert to white on dark background */
.bf-events .cp-event-card__cal-icon {
  filter: invert(1);
}

/* Divider: full opacity on dark background */
.bf-events .cp-event-card__divider {
  border-top-color: rgba(237, 237, 237, 1);
}

/* (carousel buttons handled by global Belfrit rule below) */

/* CTA button: centred below grid */
.bf-events__cta {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* ≤1024px (tablet + phone): the Events nav arrows are removed at every viewport
   for Belfrit (see the #bf-events rule near the header section), so no arrow lane
   is needed. Reach the same page gutter as the Qualität (image + bulletpoints)
   block: mirror the shared `.container` gutter onto this full-bleed section's
   padding and drop the card / slider lane insets, so the event cards line up with
   the feature-card and einsatzbereiche tracks — and with the Qualität content. */
@media (max-width: 1024px) {
  /* ID selector to override the `#bf-events` base padding (same specificity). */
  #bf-events {
    padding-inline: clamp(1.5rem, 5vw, 3rem);
  }

  .bf-events__card,
  #bf-events .cp-events-slider {
    padding-inline: 0;
  }
}

@media (max-width: 767px) {
  #bf-events {
    padding-inline: 1.25rem;
  }
}

/* =========================================================================
   SORTIMENT — stacked product rows: content left, image right, HR dividers
   ========================================================================= */

.bf-sortiment {
  padding-block: clamp(3rem, 7vw, 6rem);
  /* padding-inline: clamp(1.25rem, 5vw, 4rem); */
}

/* Header: overline → heading → intro stacked vertically */
.bf-sortiment__header {
  display: block;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Overline: left-aligned (global .bf-overline defaults to center) */
.bf-sortiment .bf-overline {
  text-align: left;
  margin-inline: 0;
}

.bf-sortiment__lead {
  margin-bottom: 0.75rem;
}

.bf-sortiment__lead h2 {
  margin-bottom: 0;
}

.bf-sortiment__intro {
  color: #afafaf;
  max-width: 42%;
  /* matches the text-column width of each item row */
  margin: 0;
}

/* Divider */
.bf-sortiment__rule {
  border: none;
  border-top: 1px solid rgba(237, 237, 237, 0.15);
  margin: 0;
}

/* Product row */
.bf-sortiment__item {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.bf-sortiment__item-content {
  flex: 0 0 42%;
}

.bf-sortiment__item-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

.bf-sortiment__item-desc {
  color: #afafaf;
  margin-bottom: 1rem;
  max-width: none;
}

/* Bullet list */
.bf-sortiment__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.bf-sortiment__bullet {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.03125rem;
  color: var(--color-text);
}

.bf-sortiment__bullet::before {
  content: '';
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-red);
}

/* Image */
.bf-sortiment__item-image {
  flex: 0 0 42%;
  margin: 0;
  min-width: 0;
}

.bf-sortiment__item-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-card, 1.875rem);
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

@media (max-width: 767px) {
  .bf-sortiment__item {
    flex-direction: column;
  }

  .bf-sortiment__item-content {
    flex: none;
  }
}

/* =========================================================================
   BANNER — full-bleed image with centred heading, top-left percentage,
            bottom-right button
   ========================================================================= */

.bf-banner {
  --bf-banner-inset: clamp(1.5rem, 4vw, 3.5rem);

  /* Break out to full viewport width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  position: relative;
  min-height: clamp(22rem, 55vw, 48rem);
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-card);

  /* Centre the main heading */
  display: grid;
  place-items: center;
}

.bf-banner__percentage {
  position: absolute;
  top: var(--bf-banner-inset);
  left: var(--bf-banner-inset);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, 8rem);
  font-weight: 700;
  color: var(--color-yellow);
  line-height: 1;
}

.bf-banner__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 5rem);
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.1;
  margin: 0;
  padding-inline: var(--bf-banner-inset);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 1);
  /* Keep text readable over the percentage and button */
  position: relative;
  z-index: 1;
}

.bf-banner__btn {
  position: absolute;
  bottom: var(--bf-banner-inset);
  right: var(--bf-banner-inset);
}

/* =========================================================================
   IMAGE-TITLE — large heading with an inline image between two text spans
   ========================================================================= */

.bf-image-title {
  /* Break out of Bootstrap column/container to span full viewport width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-block: clamp(1.5rem, 3vw, 3rem);
  /* No inline padding: the content scrolls edge-to-edge as an endless marquee. */
}

.bf-image-title__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4em;
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 6rem);
  font-weight: 700;
  color: var(--color-yellow);
  line-height: 1.05;
  margin: 0;
}

/* Endless marquee — same technique as the belfrit-banner ticker: N identical
   copies in a row, translated by exactly one copy width (-100% / N) on loop. */
.bf-image-title__marquee-wrap {
  overflow: hidden;
}

.bf-image-title__marquee {
  display: flex;
  width: max-content;
  animation: bf-image-title-scroll 40s linear infinite;
}

.bf-image-title__marquee .bf-image-title__heading {
  flex-shrink: 0;
  flex-wrap: nowrap;
  justify-content: flex-start;
  /* Space between repeated copies (both sides → even gap at the loop seam). */
  padding-inline: 0.5em;
}

@keyframes bf-image-title-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% / 8));
  }
}

/* Pause on hover for readability. */
.bf-image-title__marquee-wrap:hover .bf-image-title__marquee {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .bf-image-title__marquee {
    animation: none;
  }
}

.bf-image-title__img-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.bf-image-title__img {
  height: 1em;
  width: auto;
  object-fit: cover;
  border-radius: 0.1em;
  vertical-align: middle;
}

/* -------------------------------------------------------------------------
   Hero: tablet / mobile — keep full-bleed, reduce header offset
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  #hero.bf-hero,
  .bf-hero {
    min-height: 85vh;
    margin-top: 0;
    /* On mobile header is fixed via CSS (responsive.css), no offset needed */
    padding-top: var(--site-header-height, 4.5rem);
  }

  .bf-hero__content {
    padding-top: calc(var(--site-header-height, 4.5rem) + 2rem);
    padding-bottom: 3rem;
    padding-inline: clamp(1.25rem, 6vw, 4rem);
  }

  /* Stronger overlay on small screens (content takes full width) */
  #hero.bf-hero::before,
  .bf-hero::before {
    background: rgba(0, 0, 0, 0.6);
  }
}

@media (max-width: 767px) {

  #hero.bf-hero,
  .bf-hero {
    min-height: 90vh;
    background-position: center top;
  }

  .bf-hero__heading {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }
}

/* Background video: full viewport on tablet/mobile too. Here the hero has no
   negative margin (margin-top: 0), so plain 100vh fills the screen — just
   override the reduced 85vh/90vh image-hero heights for the video case. */
@media (max-width: 1024px) {

  #hero.bf-hero.has-bg-video,
  .bf-hero.has-bg-video {
    min-height: 100vh;
  }
}

/* =========================================================================
   FOOTER
   ========================================================================= */

.bf-footer {
  background-color: var(--color-dark, #111);
}

/* Hero area: big centered tagline + description */
.bf-footer__hero {
  padding-block: clamp(5rem, 12vw, 10rem);
  padding-inline: clamp(2rem, 12vw, 10rem);
  text-align: center;
}

.bf-footer__tagline {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 4.5rem);
  font-style: italic;
  color: var(--color-yellow);
  line-height: 1.1;
  margin-bottom: 1.25rem;
  text-align: center;
  max-width: 48rem;
  margin-inline: auto;
}

.bf-footer__desc {
  color: #afafaf;
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: 0;
}

/* Bottom bar: copyright | nav | go-to-top — all on one line */
.bf-footer__bar {
  border-top: 1px solid rgba(237, 237, 237, 0.1);
  padding-block: 1.25rem;
  padding-inline: clamp(1.25rem, 8vw, 6rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.bf-footer__top-link {
  justify-self: end;
}

.bf-footer__copy {
  color: #afafaf;
  font-size: 0.875rem;
  margin: 0;
  white-space: nowrap;
  justify-self: start;
}

.bf-footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0;
}

.bf-footer__nav-item+.bf-footer__nav-item::before {
  content: '•';
  margin-inline: 0.625rem;
  color: var(--color-red);
}

.bf-footer__nav-list a {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
}

.bf-footer__nav-list a:hover,
.bf-footer__nav-list a:focus {
  color: var(--color-yellow);
}

.bf-footer__top-link {
  font-size: 0.875rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.bf-footer__top-link:hover,
.bf-footer__top-link:focus {
  color: var(--color-yellow);
}

@media (max-width: 640px) {
  .bf-footer__bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }
}

/* -------------------------------------------------------------------------
   Tablet/mobile (≤1024px): center all section headings and overlines.
   Per-section left-align rules have higher specificity (0-2-0 vs 0-1-0)
   so we repeat those selectors here to match specificity and win by
   source order.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  .section-heading,
  .bf-einsatzbereiche .section-heading,
  .bf-overline,
  .bf-qualitaet .bf-overline,
  .bf-einsatzbereiche .bf-overline,
  .bf-ablauf .bf-overline,
  .bf-sortiment .bf-overline,
  .bf-sortiment__lead h2 {
    text-align: center;
    margin-inline: auto;
  }

  /* Sortiment intro: full width and centered on mobile */
  .bf-sortiment__intro {
    max-width: none;
    text-align: center;
  }

  /* Contact: keep heading and overline left-aligned */
  .bf-contact__overline,
  .bf-contact__heading {
    text-align: left;
    margin-inline: 0;
  }
}

/* =========================================================================
   Banner ticker
   ========================================================================= */
.bf-banner__ticker-wrap {
  overflow: hidden;
  padding-block: 1.125rem;
  background-color: var(--color-bg-page);
  /* background-color matches body (#111111) — appears full-bleed without
     using 100vw (which would introduce a -7px left-clip on scrollbar browsers) */
}

.bf-banner__ticker {
  display: flex;
  width: max-content;
  animation: bf-ticker-scroll 21s linear infinite;
}

.bf-banner__ticker-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bf-banner__ticker-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-yellow);
  white-space: nowrap;
}

.bf-banner__ticker-sep {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  object-fit: contain;
}

@keyframes bf-ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% / 10));
  }
}

.bf-banner__ticker-wrap:hover .bf-banner__ticker {
  animation-play-state: paused;
}