/* =========================================================
   vb-layout.css – Vectorbirds Layout + Subnav (CLEAN)
   TYPO3 12.4 + bootstrap_package / Pizpalue
   Version: V2.1 – 2026-02-14
   Fokus:
   - Container breiter (zentriert)
   - Subnavigation links: dark + premium (Level 1–3)
   - Active-State: KEIN grüner Marker / KEIN grüner Block / KEINE linke Linie
   - KEIN Einfluss auf Top-Menü (#page-header/.navbar wird nicht angefasst)
   - NEW: Kantiges Design (Radius reduziert)
   ========================================================= */

/* -----------------------------------------
   0) Tokens
   ----------------------------------------- */
:root{
  --vb-container-pad: 24px;

  /* Surfaces */
  --vb-surface: rgba(255,255,255,.06);
  --vb-surface-2: rgba(255,255,255,.03);
  --vb-surface-3: rgba(255,255,255,.045);

  --vb-border: rgba(255,255,255,.10);
  --vb-border-2: rgba(255,255,255,.14);

  /* Text */
  --vb-text: rgba(255,255,255,.88);
  --vb-text-muted: rgba(255,255,255,.66);

  /* Radii (kantig/taktisch) */
  --vb-radius-lg: 4px;
  --vb-radius-md: 4px;

  /* Sticky: Header ~167px -> sicherer Offset */
  --vb-sticky-top: 180px;
}

/* -----------------------------------------
   1) Layout: Container breiter
   ----------------------------------------- */
body .container,
body .container-sm,
body .container-md,
body .container-lg,
body .container-xl,
body .container-xxl,
body .container-mainnavigation{
  width: 100%;
  padding-left: var(--vb-container-pad) !important;
  padding-right: var(--vb-container-pad) !important;
}

/* Bootstrap Breakpoints überschreiben */
@media (min-width: 992px){
  body .container,
  body .container-lg,
  body .container-xl,
  body .container-xxl,
  body .container-mainnavigation{
    max-width: 1600px !important;
  }
}

@media (min-width: 1200px){
  body .container,
  body .container-xl,
  body .container-xxl,
  body .container-mainnavigation{
    max-width: 1720px !important;
  }
}

@media (min-width: 1400px){
  body .container,
  body .container-xxl,
  body .container-mainnavigation{
    max-width: 1840px !important; /* ggf. 1920px */
  }
}

/* Section/Breadcrumb konsistent breit */
body .bp-page-content .section > .container,
body .breadcrumb-section .container{
  max-width: inherit !important;
}

/* Mobile padding */
@media (max-width: 991px){
  :root{ --vb-container-pad: 16px; }
}

/* Abstand zwischen Content & Sidebar */
@media (min-width: 992px){
  .section-row{ gap: 24px; }
}

/* =========================================================
   2) Linke Subnavigation – exakt nach Markup
   Selector: .section-column.subnav-wrap nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
   ========================================================= */

/* Sticky */
@media (min-width: 992px){
  .section-column.subnav-wrap
  nav[aria-label="Subnavigation"].frame.frame-type-subnavigation{
    position: sticky;
    top: var(--vb-sticky-top);
  }
}

/* Card Container */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
> .frame-container{
  background: var(--vb-surface) !important;
  border: 1px solid var(--vb-border) !important;
  border-radius: var(--vb-radius-lg) !important;
  padding: 14px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(10px);
}

/* Reset (nur Subnav) */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav,
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
li.subnav-item{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* UL Layout (Level 1) */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
> .frame-container > .frame-inner > ul.subnav-nav{
  display: grid;
  gap: 8px;
}

/* Links (Level 1–3) */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link{
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--vb-radius-md);
  text-decoration: none !important;

  background: var(--vb-surface-2) !important;
  border: 1px solid rgba(255,255,255,.06) !important;

  color: var(--vb-text-muted) !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Text span darf niemals weißen Hintergrund bekommen */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link .subnav-link-text{
  background: transparent !important;
  color: inherit !important;
}

/* Hover */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link:hover{
  background: var(--vb-surface-3) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
}

/* ACTIVE: nur leicht heller + minimal stärkere Kontur */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
li.subnav-item.active > a.subnav-link,
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
li.subnav-item.current > a.subnav-link,
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link[aria-current="page"]{
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(0,0,0,.24) !important;
}

/* Sicherheitsnetz: Marker AUS */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link::before,
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link::after{
  content: none !important;
}

/* Level 2/3 Einrückung (ohne vertikale Linie) */
.section-column.subnav-wrap nav[aria-label="Subnavigation"] ul ul{
  border-left: 0 !important;
  border-left-style: none !important;
  border-left-width: 0 !important;
  background-image: none !important;
  box-shadow: none !important;

  margin-top: 8px !important;
  margin-left: 8px !important;
  padding-left: 10px !important;

  display: grid;
  gap: 6px;
}

/* Falls Linie über ::before/::after */
.section-column.subnav-wrap nav[aria-label="Subnavigation"] ul ul::before,
.section-column.subnav-wrap nav[aria-label="Subnavigation"] ul ul::after{
  content: none !important;
  display: none !important;
}

/* Sublevel Links kompakter + leiser */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav a.subnav-link{
  padding: 8px 10px;
  border-radius: var(--vb-radius-md);
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.70) !important;
}

/* Sublevel Hover */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav a.subnav-link:hover{
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Sublevel Active */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav li.subnav-item.active > a.subnav-link,
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav a.subnav-link[aria-current="page"]{
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.90) !important;
  font-weight: 600;
}

/* Mobile */
@media (max-width: 991px){
  .section-column.subnav-wrap
  nav[aria-label="Subnavigation"].frame.frame-type-subnavigation{
    position: static;
    margin-top: 8px;
  }

  .section-column.subnav-wrap
  nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
  > .frame-container{
    border-radius: var(--vb-radius-lg) !important;
    padding: 12px !important;
  }
}

/* =========================================================
   VB Subnavigation Desktop Patch – Position + Hierarchie
   Version: 2026-02-15.4
   Zweck:
   - Linkes Menü oben bündig mit Hauptcontent
   - Unterseiten visuell eindeutig als Unterpunkte erkennbar
   ========================================================= */

@media (min-width: 992px){

  /* Spalten innerhalb des Contentbereichs oben ausrichten */
  .bp-page-content .section-row{
    align-items: flex-start !important;
  }

  /* Subnav-Spalte darf nicht vertikal abgesenkt/zentriert werden */
  .bp-page-content .section-column.subnav-wrap{
    align-self: flex-start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Navigation selbst ebenfalls bündig starten */
  .section-column.subnav-wrap
  nav[aria-label="Subnavigation"].frame.frame-type-subnavigation{
    margin-top: 0 !important;
  }
}


/* ---------------------------------------------------------
   VECTIS-Unterseiten klar als Unterebene darstellen
   --------------------------------------------------------- */

/* Unterebene als kleine Baumstruktur */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav{
  margin-top: 8px !important;
  margin-left: 12px !important;
  margin-bottom: 14px !important;
  padding-left: 14px !important;

  border-left: 1px solid rgba(255,255,255,.16) !important;
}

/* Unterpunkte bekommen eine kleine Querlinie zur Hierarchieanzeige */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav > li.subnav-item{
  position: relative !important;
}

.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav > li.subnav-item::before{
  content: "" !important;
  position: absolute !important;
  left: -14px !important;
  top: 50% !important;
  width: 9px !important;
  height: 1px !important;
  background: rgba(255,255,255,.16) !important;
  transform: translateY(-50%) !important;
}

/* Unterseiten etwas kleiner und sichtbar nachrangig */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav a.subnav-link{
  font-size: .94rem !important;
  padding: 8px 10px !important;
  background: rgba(255,255,255,.018) !important;
}

/* Aktive Unterseite weiterhin klar erkennbar */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav li.subnav-item.active > a.subnav-link,
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav a.subnav-link[aria-current="page"]{
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.94) !important;
}
/* =========================================================
   VB Subnavigation Patch – Unterpunkte sauber einpassen
   Version: 2026-02-15.5
   Zweck:
   - VECTIS-Unterseiten bleiben eingerückt
   - Unterpunkte ragen rechts nicht mehr über
   ========================================================= */

.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav{
  width: calc(100% - 12px) !important;
  box-sizing: border-box !important;
}

.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav a.subnav-link{
  width: auto !important;
  box-sizing: border-box !important;
}
/* =========================================================
   VB Subnavigation Patch – dunklere Menübuttons
   Version: 2026-02-15.6
   Zweck:
   - Menüpanel bleibt heller
   - Buttons ruhiger und dunkler
   - näher an Seitenhintergrundfarbe
   ========================================================= */

.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link{
  background: rgba(11,16,32,.72) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Unterseiten ebenfalls dunkler */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav a.subnav-link{
  background: rgba(11,16,32,.66) !important;
  border-color: rgba(255,255,255,.07) !important;
}

/* Hover dezent heller */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link:hover{
  background: rgba(11,16,32,.48) !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* Aktiver Hauptpunkt weiterhin klar erkennbar */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
li.subnav-item.active > a.subnav-link,
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
li.subnav-item.current > a.subnav-link,
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link[aria-current="page"]{
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.18) !important;
}
/* =========================================================
   VB Surface System – Subnavigation an zentrale Farbpalette anbinden
   Version: 2026-02-15.7
   ========================================================= */

/* Menüpanel */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
> .frame-container{
  background: var(--vb-bg-panel) !important;
  border-color: var(--vb-border-soft) !important;
}

/* Normale Haupt- und Unterpunkte */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link{
  background: var(--vb-bg-control) !important;
  border-color: var(--vb-border-soft) !important;
  color: var(--vb-text-muted) !important;
}

/* Hover */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link:hover{
  background: color-mix(in srgb, var(--vb-bg-control) 82%, white 18%) !important;
  border-color: var(--vb-border-strong) !important;
}

/* Aktive Einträge */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
li.subnav-item.active > a.subnav-link,
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
li.subnav-item.current > a.subnav-link,
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link[aria-current="page"]{
  background: var(--vb-bg-active) !important;
  border-color: var(--vb-border-strong) !important;
  color: var(--vb-text-main) !important;
}
/* =========================================================
   VB Subnavigation – Parent Active dezenter bei aktiver Unterseite
   Version: 2026-02-15.8
   Zweck:
   - tatsächliche aktuelle Unterseite bleibt am stärksten
   - übergeordnete Rubrik VECTIS tritt etwas zurück
   ========================================================= */

/* Aktiver Elternpunkt mit sichtbarer Unterebene dezenter darstellen */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
> .frame-container > .frame-inner > ul.subnav-nav
> li.subnav-item.active:has(ul.subnav-nav)
> a.subnav-link{
  background: color-mix(in srgb, var(--vb-bg-active) 72%, var(--vb-bg-panel) 28%) !important;
  border-color: var(--vb-border-soft) !important;
  color: var(--vb-text-main) !important;
  font-weight: 700 !important;
}

/* Tatsächlich aktive Unterseite bleibt klar dominant */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav
li.subnav-item.active > a.subnav-link{
  background: var(--vb-bg-active) !important;
  border-color: var(--vb-border-strong) !important;
  color: var(--vb-text-main) !important;
  font-weight: 700 !important;
}
/* =========================================================
   VB Subnavigation – vertikale Baumlinie korrekt beenden
   Version: 2026-05-13.2
   Zweck:
   - alte durchgehende Border-Linie deaktivieren
   - neue vertikale Linie endet am letzten Abzweig
   ========================================================= */

/* Alte durchgehende vertikale Linie entfernen */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav{
  position: relative !important;
  border-left: 0 !important;
}

/* Vorher deaktiviertes Pseudo-Element wieder aktivieren */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;

  left: 0 !important;
  top: 0.15rem !important;
  bottom: 1.30rem !important;

  width: 1px !important;
  height: auto !important;

  background: var(--vb-border-soft) !important;
}

/* Horizontale Anschlusslinien sauber positionieren */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav > li.subnav-item::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;

  left: -14px !important;
  top: 50% !important;

  width: 10px !important;
  height: 1px !important;

  background: var(--vb-border-soft) !important;
  transform: translateY(-50%) !important;
}
/* ============================================================
   AERIS Recon S7 – Hero mit Produktbild
   Version: 2026-05-16-1
   ============================================================ */

.vb-aeris-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    margin-bottom: clamp(2rem, 4vw, 4rem);
}

.vb-aeris-hero__content {
    min-width: 0;
}

.vb-aeris-hero__title {
    margin: 0 0 0.75rem 0;
    font-size: clamp(2.6rem, 4vw, 4rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #f5f7fb;
}

.vb-aeris-hero__subtitle {
    margin: 0 0 clamp(1.75rem, 3vw, 2.75rem) 0;
    max-width: 58rem;
    font-size: clamp(1.55rem, 2.25vw, 2.15rem);
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #f2f4f8;
}

.vb-aeris-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vb-aeris-hero__fact {
    min-height: 8.8rem;
    padding: 1.45rem 1.6rem;
    border: 1px solid rgba(153, 171, 208, 0.16);
    border-radius: var(--vb-radius-card, 0.35rem);
    background: rgba(18, 27, 48, 0.72);
    box-shadow: 0 0.7rem 1.8rem rgba(0, 0, 0, 0.12);
}

.vb-aeris-hero__fact strong {
    display: block;
    margin-bottom: 0.55rem;
    font-size: clamp(1.55rem, 2vw, 2.1rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #f5f7fb;
}

.vb-aeris-hero__fact span {
    display: block;
    font-size: clamp(1.08rem, 1.25vw, 1.35rem);
    line-height: 1.25;
    font-weight: 700;
    color: #f0f3f8;
}

.vb-aeris-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.vb-aeris-hero__visual::before {
    content: "";
    position: absolute;
    inset: 12% 8% 10% 8%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(124, 183, 36, 0.12) 0%,
        rgba(124, 183, 36, 0.045) 38%,
        rgba(124, 183, 36, 0) 72%
    );
    filter: blur(0.4rem);
    pointer-events: none;
}

.vb-aeris-hero__visual img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 62rem;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 1.5rem 2.25rem rgba(0, 0, 0, 0.42));
}

/* Desktop: Text links, Produktbild rechts */
@media (min-width: 1200px) {
    .vb-aeris-hero {
        grid-template-columns: minmax(34rem, 0.95fr) minmax(32rem, 1.05fr);
        gap: clamp(2rem, 3.2vw, 4rem);
    }

    .vb-aeris-hero__subtitle {
        max-width: 48rem;
    }

    .vb-aeris-hero__visual img {
        max-width: none;
        width: min(100%, 68rem);
    }
}

/* Mittlere Breiten: Bild unterhalb, aber noch großzügig */
@media (max-width: 1199.98px) {
    .vb-aeris-hero__visual {
        order: 2;
    }

    .vb-aeris-hero__visual img {
        max-width: 58rem;
    }
}

/* Mobile Optimierung */
@media (max-width: 767.98px) {
    .vb-aeris-hero {
        gap: 1.75rem;
        margin-bottom: 2.5rem;
    }

    .vb-aeris-hero__title {
        font-size: clamp(2.15rem, 8vw, 3rem);
    }

    .vb-aeris-hero__subtitle {
        margin-bottom: 1.5rem;
        font-size: clamp(1.35rem, 5vw, 1.75rem);
    }

    .vb-aeris-hero__facts {
        grid-template-columns: 1fr;
    }

    .vb-aeris-hero__fact {
        min-height: 0;
        padding: 1.25rem 1.35rem;
    }

    .vb-aeris-hero__visual img {
        max-width: 100%;
    }
}
/* ============================================================
   Produktseiten – Produkt-Stage mit Bild und Kennwert-Kacheln
   Version: 2026-05-17-1
   Einsatz: AERIS, VECTIS, ATLAS etc.
   ============================================================ */

.vb-product-stage {
    margin-top: 1.5rem;
    margin-bottom: 2.75rem;
}

.vb-product-stage__image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.vb-product-stage__image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.vb-product-stage__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vb-product-stage__fact {
    min-height: 9.5rem;
    padding: 1.5rem 1.45rem;
    border: 1px solid rgba(153, 171, 208, 0.16);
    border-radius: var(--vb-radius-card, 0.35rem);
    background: rgba(18, 27, 48, 0.72);
    box-shadow: 0 0.7rem 1.8rem rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.vb-product-stage__fact-value {
    display: block;
    margin: 0 0 0.6rem 0;
    font-size: clamp(1.6rem, 1.75vw, 2.05rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #f5f7fb;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

.vb-product-stage__fact-label {
    display: block;
    margin: 0;
    font-size: clamp(1.05rem, 1.08vw, 1.25rem);
    line-height: 1.28;
    font-weight: 700;
    color: #f0f3f8;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

@media (max-width: 1199.98px) {
    .vb-product-stage__image {
        margin-bottom: 1.5rem;
    }

    .vb-product-stage__image img {
        max-width: 58rem;
    }
}

@media (max-width: 767.98px) {
    .vb-product-stage {
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    .vb-product-stage__facts {
        grid-template-columns: 1fr;
    }

    .vb-product-stage__fact {
        min-height: 0;
        padding: 1.25rem 1.35rem;
    }
}
/* ============================================================
   Header – Sprachumschaltung DE / EN
   Version: 2026-05-17-1
   ============================================================ */

.vb-header-language-wrap {
    display: flex;
    align-items: center;
    margin-left: 1.5rem;
}

.vb-header-language {
    display: flex;
    align-items: center;
}

.vb-header-language ul {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vb-header-language li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vb-header-language li + li::before {
    content: "/";
    margin: 0 0.55rem;
    color: rgba(229, 234, 244, 0.45);
    font-weight: 400;
}

.vb-header-language a {
    color: rgba(229, 234, 244, 0.82);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.vb-header-language a:hover,
.vb-header-language a:focus {
    color: #98f000;
}

.vb-header-language .is-active a {
    color: #98f000;
    font-weight: 700;
}

.vb-header-language .is-disabled {
    opacity: 0.45;
}

/* Mobile Navigation */
@media (max-width: 991.98px) {
    .vb-header-language-wrap {
        margin-left: 0;
        margin-top: 0.85rem;
        padding-top: 0.85rem;
        border-top: 1px solid rgba(153, 171, 208, 0.16);
    }
}
.vb-header-language-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-right: 0.7rem;
    color: rgba(229, 234, 244, 0.78);
    flex: 0 0 auto;
}

.vb-header-language-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* ============================================================
   Produktseiten – Typenlogo im Hero/Product Stage
   Version: 2026-05-17-1
   ============================================================ */

.vb-product-stage__visual {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.vb-product-stage__wordmark {
    display: block;
    width: min(100%, 420px);
    margin: 0 0 1.5rem 0;
}

.vb-product-stage__wordmark img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 1199.98px) {
    .vb-product-stage__visual {
        align-items: center;
    }

    .vb-product-stage__wordmark {
        width: min(100%, 360px);
        margin-bottom: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .vb-product-stage__wordmark {
        width: min(100%, 280px);
        margin-bottom: 1rem;
    }
}
/* ============================================================
   Vectorbirds – TELEVATOR Stage Visual Fix
   Version: V1.0 – 2026-05-24
   Zweck: TELEVATOR-Produktvisual im Hero vollständig anzeigen
   ============================================================ */

.vb-product-stage--televator .vb-product-stage__visual {
  overflow: visible;
  min-height: clamp(340px, 34vw, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vb-product-stage--televator .vb-product-stage__image {
  width: min(100%, 760px);
  max-width: 100%;
  overflow: visible;
}

.vb-product-stage--televator .vb-product-stage__image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
}

@media (min-width: 1200px) {
  .vb-product-stage--televator .vb-product-stage__image {
    transform: translateY(10px);
  }
}
/* ============================================================
   Vectorbirds – TELEVATOR Mobile Stage Spacing
   Version: V1.2 – 2026-05-24
   Zweck: TELEVATOR-Hero auf Mobile/Tablet kompakter darstellen
   ============================================================ */

@media (max-width: 767.98px) {
  .vb-product-stage.vb-product-stage--televator {
    margin-top: -2.25rem !important;
  }

  .vb-product-stage.vb-product-stage--televator .vb-product-stage__visual {
    min-height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0.75rem !important;
  }

  .vb-product-stage.vb-product-stage--televator .vb-product-stage__image {
    width: 112% !important;
    max-width: 112% !important;
    margin-left: -6% !important;
    margin-right: -6% !important;
  }

  .vb-product-stage.vb-product-stage--televator .vb-product-stage__image img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}

/* ============================================================
   Vectorbirds – Button Spacing Fix
   Version: V1.1 – 2026-05-24
   Zweck: Abstand zwischen direkt aufeinanderfolgenden CTA-Buttons
   ============================================================ */

/* Desktop / Tablet: Buttons nebeneinander mit Abstand */
.frame p > .btn + .btn,
.frame .btn + .btn {
  margin-left: 0.75rem !important;
}

/* Mobile: Buttons untereinander mit Abstand */
@media (max-width: 575.98px) {
  .frame p > .btn,
  .frame .btn {
    margin-bottom: 0 !important;
  }

  .frame p > .btn + .btn,
  .frame .btn + .btn {
    margin-left: 0 !important;
    margin-top: 0.75rem !important;
  }
}
/* ============================================================
   Vectorbirds – Content/Card Spacing Optimierung
   Version: V1.0 – 2026-05-28
   Reduziert große vertikale Abstände zwischen Text-Content-
   Elementen und direkt folgenden Card-/HTML-Blöcken
   ============================================================ */


/* ------------------------------------------------------------
   1) Abstand vor Card-Reihen reduzieren
   Betrifft Card-Grids, die als separates HTML-Element nach
   einem Text-/Primary-Block eingefügt werden.
   ------------------------------------------------------------ */

.frame .row.g-4.mt-3:has(.card) {
    margin-top: 0.75rem !important;
}


/* ------------------------------------------------------------
   2) Wenn ein HTML-Card-Element direkt nach einem anderen
   Content-Element folgt, oberen Frame-Abstand reduzieren.
   TYPO3/Bootstrap Package setzt hier oft große Standardspacings.
   ------------------------------------------------------------ */

.frame + .frame:has(.row.g-4 .card) {
    margin-top: 1.5rem !important;
    padding-top: 0 !important;
}


/* ------------------------------------------------------------
   3) Abstand nach Primary-/Textboxen reduzieren,
   wenn danach direkt ein Card-Grid folgt.
   ------------------------------------------------------------ */

.frame:has(+ .frame .row.g-4 .card) {
    margin-bottom: 1.5rem !important;
    padding-bottom: 2rem;
}


/* ------------------------------------------------------------
   4) Mobile etwas enger, damit keine unnötigen Löcher entstehen.
   ------------------------------------------------------------ */

@media (max-width: 767.98px) {
    .frame + .frame:has(.row.g-4 .card) {
        margin-top: 1rem !important;
    }

    .frame:has(+ .frame .row.g-4 .card) {
        margin-bottom: 1rem !important;
        padding-bottom: 1.5rem;
    }

    .frame .row.g-4.mt-3:has(.card) {
        margin-top: 0.5rem !important;
    }
}