#brx-content .brxe-rlcazu:nth-of-type(even) {
    flex-direction: row-reverse;
}
@media (max-width: 767px) {
    #brx-content .brxe-rlcazu,
    #brx-content .brxe-rlcazu:nth-of-type(even) {
        flex-direction: column;
    }
}

/* =========================================================
   UNWIRED: Bricks + ACSS System Layer (single stylesheet)
   - ACSS is source of truth for tokens
   - This file adds: locked palette map, alias tokens, global layout recipes,
     variable classes, button component system (responsive sizing),
     and LP S01 hero styles.
   ========================================================= */

/* =========================================================
   Global horizontal-overflow guard
   Off-canvas UI (mobile drawer .bricks-mobile-menu-wrapper) parks
   right of the viewport via translateX(100%). The header's
   backdrop-filter makes it the containing block for that fixed
   drawer, and the header is sticky (in-flow) — so the parked
   drawer counts as document scrollable overflow and every page
   gets a horizontal scrollbar on mobile/tablet.
   clip, NOT hidden: hidden would turn html into a scroll
   container and break position: sticky (header). clip only cuts
   the paint/scroll region, no scroll container is created.
   Support floor: Safari/iOS 16, Chrome 90, Firefox 81 — older
   engines ignore the value (guard degrades to visible, no harm).
========================================================= */

html,
body {
  overflow-x: clip;
}

/* Checklisten bekommen im Bricks-Template teils fixe Breiten (z.B. 400px
   auf dem Datenblatt-Single, Element-ID-Styles). Auf schmalen Viewports
   ragte das 29px über den Viewport — vor dem clip-Guard sichtbarer
   Overflow, mit Guard stiller Abschnitt der Listentexte. max-width
   klemmt die feste Breite ab, wo sie nicht passt, und ist überall sonst
   ein No-Op. */
body .c-checklist {
  max-width: 100%;
}

/* =========================================================
   Header - desktop
========================================================= */

#brx-header {
  position: sticky;
  top: 24px;
  z-index: 1100;
  width: 100%;
  margin-top: 24px;
}

.c-header {
  width: 100%;
  background: transparent;
  overflow: visible;
}

/* width wrapper stays controlled by the system */
#brx-header .l-container.v-container--header {
  width: 100%;
  max-width: var(--uw-container-header);
  margin-inline: auto;
}

/* shell */
.c-header__shell {
  position: relative;
  background: var(--G700);
  border-radius: calc(var(--uw-radius-8) * 2);
  min-height: 80px;
  padding: 16px 24px;
  width: 100%;   /* changed from 1112px */
  background: rgba(31, 31, 31, 0.3);
  border-radius: 16px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);

  /* optional subtle glass edge */
  border: 1px solid color-mix(in srgb, var(--G50) 12%, transparent);
}

/* keep dropdowns visible */
.c-header__frame,
.c-header__stage,
.c-header__bar {
  overflow: visible;
}

/* frame */
.c-header__frame {
  display: flex;
  align-items: center;
  gap: var(--uw-space-48);
  min-height: 48px;
  width: 100%;
}

/* brand */
.c-header__brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.c-header__brand-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  width: 78px;
  height: 43px;
}

.c-header__logo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    filter 0.45s ease;
}

.c-header__logo--top {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.c-header__logo--sticky {
  opacity: 0;
  transform: scale(0.94);
  filter: blur(3px);
  pointer-events: none;
}

.c-header__shell.is-sticky .c-header__logo--top {
  opacity: 0;
  transform: scale(0.94);
  filter: blur(3px);
  pointer-events: none;
}

.c-header__shell.is-sticky .c-header__logo--sticky {
  opacity: 1;
  transform: scale(0.8);
  filter: blur(0);
  pointer-events: auto;
}

/* stage */
.c-header__stage {
  flex: 1 1 auto;
  min-width: 0;
}

.c-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uw-space-32);
  min-height: 48px;
}

/* nav menu */
.c-header__nav .bricks-mobile-menu-toggle,
.c-header__nav .bricks-mobile-menu-wrapper,
.c-header__nav .bricks-mobile-menu-overlay {
  display: none;
}

.c-header__nav .bricks-nav-menu-wrapper {
  display: block;
}

.c-header__nav .bricks-nav-menu {
  display: flex;
  align-items: center;
  gap: var(--uw-space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-header__nav .bricks-nav-menu > li {
  margin: 0;
}

.c-header__nav .bricks-nav-menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: var(--uw-space-8);
  color: var(--G50);
  text-decoration: none;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
  white-space: nowrap;
}

.c-header__nav .bricks-nav-menu > li > a:hover {
  color: var(--G200);
}

/* Solutions-Chevron (Desktop): das Bricks-SVG im Submenu-Toggle-Button
   rotiert mit dem Öffnen (Bug 2 des Menü-Audits: vorher statisch ▼).
   aria-expanded toggelt Bricks selbst — Zustand und Optik hängen an
   demselben Attribut und können nicht auseinanderlaufen.
   (Die frühere .c-header__dd>a::after-Regel war tot: keine Menü-Item-
   Klasse c-header__dd im DOM — entfernt.) */
.c-header__nav .bricks-nav-menu .brx-submenu-toggle > button svg {
  transition: transform 0.2s ease;
}

.c-header__nav .bricks-nav-menu .brx-submenu-toggle > button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* actions */
.c-header__actions {
  display: flex;
  align-items: center;
  gap: var(--uw-space-16);
  flex: 0 0 auto;
}

.c-header__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  padding-inline: 0;
  border: none;
}

.c-header__icon-btn:hover {
  color: var(--G200);
}

.c-header__login {
  color: var(--G50);
  text-decoration: none;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: var(--uw-fw-500);
  cursor: pointer;
  white-space: nowrap;
}

.c-header__login:hover {
  color: var(--G200);
}

.c-header__cta {
  min-height: 48px;
  padding: 8px 16px;
  white-space: nowrap;
}

/* search layer */
.c-header__search {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 5;
}

.c-header__shell.is-search-open .c-header__nav,
.c-header__shell.is-search-open .c-header__actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.c-header__shell.is-search-open .c-header__search {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.c-header__search-form,
.c-header__search-form-el {
  width: 100%;
}

.c-header__search-form-el {
  display: flex;
  align-items: center;
  gap: var(--uw-space-16);
  width: 100%;
}

.c-header__search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 8px;
  border: 1px solid var(--G600);
  border-radius: calc(var(--uw-radius-8) * 2); /* 16px */
  background: var(--G700);
}

.c-header__search-icon,
.c-header__search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--G50);
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

.c-header__search-icon svg,
.c-header__search-close svg {
  width: 24px;
  height: 24px;
}

.c-header__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--G50);
  outline: none;
  box-shadow: none;
  padding: 0 8px;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
}

.c-header__search-input::placeholder {
  color: var(--G400);
  opacity: 1;
}

.c-header__search-submit {
  min-height: 48px;
  padding: 8px 16px;
  white-space: nowrap;
}

/* mega menu template root */
.c-header__mega {
  width: min(944px, calc(100vw - 48px));
  background: var(--G700);
  border-radius: calc(var(--uw-radius-8) * 2); /* 16px */
  padding: var(--uw-space-24);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
  margin-top: var(--uw-space-32);
}

.c-header__mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--uw-space-48);
}

.c-header__mega-col {
  display: flex;
  flex-direction: column;
  gap: var(--uw-space-24);
}

.c-header__mega-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--uw-space-16);
  align-items: start;
}

.c-header__mega-item-icon {
  /* Desktop badge size — sets one var so the .c-icon-badge geometry
     (width, height, flex-basis, dot positions) stays in sync. */
  --badge-size: 48px;
}

.c-header__mega-item-title {
  color: var(--G50);
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: var(--uw-fw-600);
  transition:
    color var(--transition-duration) var(--transition-timing)
    var(--transition-delay);
}


.c-header__mega-item:hover .c-header__mega-item-title {
  color: var(--G200);
}



.c-header__mega-item-desc {
  margin: 0;
  color: var(--G100);
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
}

/* =========================================================
   Desktop-Mega-Menü: Detail-Zeile statt permanenter Texte
   Plan: plans/Menu-restructure-PLAN.md §3; Richtungsentscheid
   Philipp 2026-07-22: Hover-Tooltips verworfen, stattdessen eine
   fest reservierte Detail-Zone am Panel-Unterrand (Header.js
   injiziert .uw-mega-detail und füllt sie bei Hover/Fokus).

   Im Ruhezustand zeigt jede Zeile nur Icon + Titel — das Panel
   schrumpft von ~686px auf ~500px und passt auf 13"-Viewports
   (Bug 8: 1366×768 schnitt unten ab). Die Zone ist immer da →
   kein Layout-Sprung, die Beschreibung erscheint immer am selben
   Ort. Scope .bricks-nav-menu-wrapper = NUR die Desktop-Nav; im
   Drawer gibt es keine Beschreibungen (Snippet 33).
========================================================= */

/* Der Bricks-Megamenü-Layer ist unsichtbar VIEWPORTBREIT, das sichtbare
   Panel nur min(944px, …) — Klicks daneben landeten im unsichtbaren
   Layer, galten als "innen" und schlossen das Menü NICHT (von Philipp
   gemeldet). pointer-events:none macht den Layer klick-durchlässig;
   nur das echte Panel fängt wieder Events. */
.c-header__nav .bricks-nav-menu-wrapper .brx-megamenu {
  pointer-events: none;
}

.c-header__nav .bricks-nav-menu-wrapper .brx-megamenu .c-header__mega {
  pointer-events: auto;
  /* Eigener Stacking Context: die Hover-Fläche der Zeilen ist ein
     ::before mit z-index:-1 — ohne Context hier fiele sie HINTER den
     Panel-Hintergrund und wäre unsichtbar. */
  isolation: isolate;
}

.c-header__nav .bricks-nav-menu-wrapper .c-header__mega-item {
  align-items: center;
  border-radius: var(--uw-radius-12);
  /* KEIN padding/negative-margin für die Hover-Fläche: das änderte die
     Grid-Spaltenbreite und ließ Titel zweizeilig umbrechen. Die Fläche
     liegt bündig an Icon+Titel — reicht, Radius macht den Karten-Look. */
}

/* Zeilen-Hover wie im Drawer (Philipp 2026-07-22: Hover-Fläche soll auf
   allen Viewports gleich sein). BEWUSST nicht G600 — das ist exakt die
   Icon-Badge-Fläche (#3d3d3d), die Badges verschwänden optisch.
   Die Fläche liegt auf einem ::before mit Überhang (inset negativ):
   Luft um Badge und Titel, OHNE die Grid-Spaltenbreite anzufassen —
   padding/negative-margin am Element selbst ließ Titel umbrechen,
   und eine bündige Fläche klebte optisch am Badge (Philipp). */
.c-header__nav .bricks-nav-menu-wrapper .c-header__mega-item {
  position: relative;
}

.c-header__nav .bricks-nav-menu-wrapper .c-header__mega-item::before {
  content: "";
  position: absolute;
  inset: -6px -10px;
  border-radius: var(--uw-radius-12);
  /* hinter Icon+Text, aber vor dem Panel-Hintergrund (negative
     z-index-Kinder malen über Ancestor-Backgrounds) */
  z-index: -1;
}

.c-header__nav .bricks-nav-menu-wrapper .c-header__mega-item:hover::before,
.c-header__nav .bricks-nav-menu-wrapper .c-header__mega-item:focus-visible::before {
  background: color-mix(in srgb, var(--G50) 7%, transparent);
}

/* Quelle der Detail-Texte — auf dem Desktop nie im Fluss sichtbar,
   Header.js liest sie in die Detail-Zeile. */
.c-header__nav .bricks-nav-menu-wrapper .c-header__mega-item-desc {
  display: none;
}

.c-header__nav .bricks-nav-menu-wrapper .uw-mega-detail {
  display: flex;
  align-items: baseline;
  gap: var(--uw-space-8);
  margin-top: var(--uw-space-16);
  padding: var(--uw-space-12) var(--uw-space-8) 0;
  border-top: 1px solid var(--G600);
  /* Eine Zeile fest reservieren, damit Hover nichts verschiebt. */
  min-height: calc(var(--text-s-line-height) + var(--uw-space-12));
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
  color: var(--G200);
  white-space: nowrap;
  overflow: hidden;
}

.c-header__nav .bricks-nav-menu-wrapper .uw-mega-detail-title {
  flex: 0 0 auto;
  color: var(--G50);
  font-weight: var(--uw-fw-600);
}

.c-header__nav .bricks-nav-menu-wrapper .uw-mega-detail-text {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sicherheitsnetz gegen Clipping (Plan §3): auf niedrigen Viewports
   wird das Panel gedeckelt und scrollt innen. BEWUSST nur per
   max-height-Media-Query statt pauschal: overflow-y:auto clippt
   absolute Kinder IMMER (auch ohne Scrollbalken) — die Overlay-
   Beschreibung der letzten Zeile würde sonst überall abgeschnitten.
   Ab 640px Viewporthöhe passt das Panel (~600px Unterkante) per
   Design; darunter greift der Deckel. */
@media (max-height: 640px) {
  .c-header__nav .bricks-nav-menu-wrapper .c-header__mega {
    /* ~104px Header-Unterkante + 32px Panel-Abstand + 24px Luft. */
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }
}

/* Mega-menu column icon cycle.
   Column class anchors the START colour; items inside cycle
   P700 → B600 → Y600 with a per-column offset so across the row:
     green-col:  P B Y  P B Y …
     blue-col:   B Y P  B Y P …
     yellow-col: Y P B  Y P B …
   `:nth-child` targets the <li>.c-header__mega-list-item (the real
   siblings in <ul>). The .c-header__mega-item is the <a> inside each
   <li> and is always its only child, so nth-child on it would never
   advance — must target the list-item wrapper. */

.v-mega-icon-green  .c-header__mega-list-item:nth-child(3n + 1) { --mega-icon-color: var(--P700); }
.v-mega-icon-green  .c-header__mega-list-item:nth-child(3n + 2) { --mega-icon-color: var(--B600); }
.v-mega-icon-green  .c-header__mega-list-item:nth-child(3n + 3) { --mega-icon-color: var(--Y600); }

.v-mega-icon-blue   .c-header__mega-list-item:nth-child(3n + 1) { --mega-icon-color: var(--B600); }
.v-mega-icon-blue   .c-header__mega-list-item:nth-child(3n + 2) { --mega-icon-color: var(--Y600); }
.v-mega-icon-blue   .c-header__mega-list-item:nth-child(3n + 3) { --mega-icon-color: var(--P700); }

.v-mega-icon-yellow .c-header__mega-list-item:nth-child(3n + 1) { --mega-icon-color: var(--Y600); }
.v-mega-icon-yellow .c-header__mega-list-item:nth-child(3n + 2) { --mega-icon-color: var(--P700); }
.v-mega-icon-yellow .c-header__mega-list-item:nth-child(3n + 3) { --mega-icon-color: var(--B600); }

/* apply colour to icon wrapper */
.v-mega-icon-green .c-header__mega-item-icon,
.v-mega-icon-blue .c-header__mega-item-icon,
.v-mega-icon-yellow .c-header__mega-item-icon {
  color: var(--mega-icon-color);
}

/* override inline path fills in custom SVGs */
.v-mega-icon-green .c-header__mega-item-icon svg path,
.v-mega-icon-blue .c-header__mega-item-icon svg path,
.v-mega-icon-yellow .c-header__mega-item-icon svg path {
  fill: var(--mega-icon-color);
}


/* =========================================================
   HEADER SEARCH - GENERAL
========================================================= */

.c-header__shell {
  position: relative;
  overflow: visible;
}

.c-header__search {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 5;
  background: transparent;
  overflow: visible;
}

.c-header__shell.is-search-open .c-header__nav,
.c-header__shell.is-search-open .c-header__actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.c-header__shell.is-search-open .c-header__search {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.c-header__search-form,
.c-header__search-form-el {
  width: 100%;
  overflow: visible;
}

.c-header__search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  width: 100%;
}

.c-header__search-stack {
  position: relative;
  min-width: 0;
}

.c-header__search-field {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 10px 8px;
  gap: 8px;
  background: var(--G700);
  border: 1px solid var(--G600);
  border-radius: 16px;
}

.c-header__search-icon,
.c-header__search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--G50);
  cursor: pointer;
  flex: 0 0 auto;
}

.c-header__search-icon svg,
.c-header__search-close svg {
  display: block;
  width: 24px;
  height: 24px;
}

.c-header__search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--G50);
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  box-shadow: none;
}

.c-header__search-input::placeholder {
  color: var(--G400);
  opacity: 1;
}

body.bricks-is-frontend.bricks-is-frontend .c-header__search-input:focus,
body.bricks-is-frontend.bricks-is-frontend .c-header__search-input:focus-visible,
body.bricks-is-frontend.bricks-is-frontend .c-header__search-icon:focus,
body.bricks-is-frontend.bricks-is-frontend .c-header__search-icon:focus-visible,
body.bricks-is-frontend.bricks-is-frontend .c-header__search-close:focus,
body.bricks-is-frontend.bricks-is-frontend .c-header__search-close:focus-visible,
body.bricks-is-frontend.bricks-is-frontend .c-header__search-submit:focus,
body.bricks-is-frontend.bricks-is-frontend .c-header__search-submit:focus-visible {
  outline: none;
  box-shadow: none;
}

body.bricks-is-frontend.bricks-is-frontend .c-header__search-field:focus-within {
  border-color: #F9FFFB;
  box-shadow: 0 0 0 1px #F9FFFB;
}

.c-header__search-submit {
  min-height: 48px;
  padding: 8px 16px;
  white-space: nowrap;
}

.c-header__search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background: var(--G700);
  border-radius: 16px;
  overflow: hidden;
  z-index: 30;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}

.c-header__search-results[hidden] {
  display: none;
}

.c-header__search-result,
.c-header__search-empty {
  display: block;
  padding: 8px;
  color: var(--G50);
  text-decoration: none;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
}

.c-header__search-result:hover {
  background: color-mix(in srgb, var(--G50) 4%, transparent);
}

.c-header__search-empty {
  color: var(--G200);
}



/* =========================================================
   Background API (locked)
   - surface color comes from ACSS bg--* / text--*
   - pattern is optional
   - overlay is optional
   - apply on wrappers only
========================================================= */

:root {
  --uw-pattern-artboard-width: 1440px;
  --uw-pattern-content-width: var(--uw-container-content); /* 944px */
  --uw-pattern-content-inset: 60px;
  --uw-pattern-radial-size: min(100vw, 1440px);

  --uw-pattern-side-width: max(
    0px,
    calc(((100vw - var(--uw-pattern-content-width)) / 2) + var(--uw-pattern-content-inset))
  );

  --uw-pattern-fade-span: calc(
    ((var(--uw-pattern-artboard-width) - var(--uw-pattern-content-width)) / 2) +
      var(--uw-pattern-content-inset)
  );

  --uw-pattern-major-step: 60px;
  --uw-pattern-line-major: color-mix(in srgb, var(--G600) 30%, transparent);

  /* surface + fade target */
  --uw-pattern-bg: var(--G800);
  --uw-surface-bg: var(--G800);

  /* stackable section overlays */
  --uw-pattern-overlay-radial: linear-gradient(transparent, transparent);
  --uw-pattern-overlay-y: linear-gradient(transparent, transparent);

  /* full-screen grid for radial modes */
  --uw-pattern-full-grid-v: linear-gradient(transparent, transparent);
  --uw-pattern-full-grid-h: linear-gradient(transparent, transparent);

  /* pattern-only vertical fade for side-grid mode */
  --uw-pattern-y-overlay: linear-gradient(transparent, transparent);
  --uw-pattern-y-stop: 20%;

  /* optional cut shape */
  --uw-pattern-cut-top: 33.333%;
  --uw-pattern-cut-bottom: 88.505%;
  --uw-pattern-cut-inner-visible: 34.8%;
}

@layer uw-vars {
  .v-pattern-bg-700 {
    --uw-pattern-bg: var(--G700);
    --uw-surface-bg: var(--G700);
  }

  .v-pattern-bg-800 {
    --uw-pattern-bg: var(--G800);
    --uw-surface-bg: var(--G800);
  }

  .v-pattern-inset-134 {
    --uw-pattern-content-inset: 134px;
  }
}

/* `clip` keeps the visual cropping but does NOT establish a scroll
   container, so `position: sticky` descendants (e.g. .c-wb-scroll__sticky)
   still pin to the viewport. `overflow: hidden` here used to silently
   break sticky scroll-pinned compositions placed inside a pattern section.

   RUCSS COMPAT (2026-08-03): plain selector list + comment-free body on
   purpose. In its previous form — an `:is(...)` list with comments between
   the declarations — WP Rocket's Remove-Unused-CSS service silently dropped
   this ENTIRE rule from the generated used-CSS (while the sibling
   `:is(...) > *` rule below survived). Losing `overflow: clip` let the
   hero's pattern strips and switcher panels bleed over following sections.
   Specificity is unchanged (`:is()` scores the max of its arguments = one
   class, same as each plain selector). Do not fold this back into `:is()`
   and do not put comments inside the braces. */
.u-pattern-side-grid,
.u-pattern-fade-none,
.u-pattern-fade-y,
.u-pattern-fade-radial-out,
.u-pattern-fade-radial-in {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-color: var(--uw-surface-bg);
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}

:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
) > * {
  position: relative;
  z-index: 2;
}

/* reset */
.u-pattern-fade-none,
.u-pattern-side-grid {
  --uw-pattern-overlay-radial: linear-gradient(transparent, transparent);
  --uw-pattern-overlay-y: linear-gradient(transparent, transparent);
  --uw-pattern-full-grid-v: linear-gradient(transparent, transparent);
  --uw-pattern-full-grid-h: linear-gradient(transparent, transparent);
  --uw-pattern-y-overlay: linear-gradient(transparent, transparent);
}

/* stackable Y fade */
.u-pattern-fade-y {
  --uw-pattern-overlay-y: linear-gradient(
    to bottom,
    var(--uw-pattern-bg) 0%,
    transparent 20%,
    transparent 80%,
    var(--uw-pattern-bg) 100%
  );

  --uw-pattern-y-overlay: linear-gradient(
    to bottom,
    var(--uw-pattern-bg) 0%,
    transparent var(--uw-pattern-y-stop),
    transparent calc(100% - var(--uw-pattern-y-stop)),
    var(--uw-pattern-bg) 100%
  );
}

/* radial modes use a fixed 1440px field */
.u-pattern-fade-radial-out,
.u-pattern-fade-radial-in {
  --uw-pattern-overlay-radial: linear-gradient(transparent, transparent);
}

/* radial-out:
   grid exists only inside the centered 1440 field,
   fades from center out,
   outside that field stays at 0% */
.u-pattern-fade-radial-out::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--uw-pattern-radial-size);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;

  background-image:
    var(--uw-pattern-y-overlay),
    repeating-linear-gradient(
      to right,
      var(--uw-pattern-line-major) 0 1px,
      transparent 1px var(--uw-pattern-major-step)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--uw-pattern-line-major) 0 1px,
      transparent 1px var(--uw-pattern-major-step)
    );

  background-repeat: no-repeat, repeat, repeat;
  background-size: 100% 100%, auto auto, auto auto;

  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    #000 0%,
    #000 22%,
    rgba(0, 0, 0, 0.92) 46%,
    rgba(0, 0, 0, 0.45) 72%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle at 50% 50%,
    #000 0%,
    #000 22%,
    rgba(0, 0, 0, 0.92) 46%,
    rgba(0, 0, 0, 0.45) 72%,
    transparent 100%
  );
}

/* radial-in:
   full section has grid,
   centered 1440 field fades from edges inward to center,
   outside 1440 stays the same as the 1440 edge */
.u-pattern-fade-radial-in::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    var(--uw-pattern-y-overlay),
    repeating-linear-gradient(
      to right,
      var(--uw-pattern-line-major) 0 1px,
      transparent 1px var(--uw-pattern-major-step)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--uw-pattern-line-major) 0 1px,
      transparent 1px var(--uw-pattern-major-step)
    );

  background-repeat: no-repeat, repeat, repeat;
  background-size: 100% 100%, auto auto, auto auto;
}

.u-pattern-fade-radial-in::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--uw-pattern-radial-size);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;

  background: radial-gradient(
    circle at 50% 50%,
    var(--uw-pattern-bg) 0%,
    color-mix(in srgb, var(--uw-pattern-bg) 96%, transparent) 20%,
    color-mix(in srgb, var(--uw-pattern-bg) 68%, transparent) 44%,
    color-mix(in srgb, var(--uw-pattern-bg) 18%, transparent) 72%,
    transparent 100%
  );
}

/* side-grid mode only */
.u-pattern-side-grid::before,
.u-pattern-side-grid::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--uw-pattern-side-width);
  pointer-events: none;
  z-index: 0;
}

/* left side */
.u-pattern-side-grid::before {
  left: 0;

  background-image:
    var(--uw-pattern-y-overlay),
    linear-gradient(
      to right,
      transparent 0,
      transparent calc(100% - var(--uw-pattern-fade-span)),
      var(--uw-pattern-bg) 100%
    ),
    repeating-linear-gradient(
      to right,
      var(--uw-pattern-line-major) 0 1px,
      transparent 1px var(--uw-pattern-major-step)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--uw-pattern-line-major) 0 1px,
      transparent 1px var(--uw-pattern-major-step)
    );

  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: 100% 100%, 100% 100%, auto auto, auto auto;
}

/* right side */
.u-pattern-side-grid::after {
  right: 0;

  background-image:
    var(--uw-pattern-y-overlay),
    linear-gradient(
      to right,
      var(--uw-pattern-bg) 0,
      transparent var(--uw-pattern-fade-span),
      transparent 100%
    ),
    repeating-linear-gradient(
      to right,
      var(--uw-pattern-line-major) 0 1px,
      transparent 1px var(--uw-pattern-major-step)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--uw-pattern-line-major) 0 1px,
      transparent 1px var(--uw-pattern-major-step)
    );

  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: 100% 100%, 100% 100%, auto auto, auto auto;
}

/* hide side-grid strips when radial mode is active */
.u-pattern-side-grid.u-pattern-fade-radial-out::before,
.u-pattern-side-grid.u-pattern-fade-radial-out::after,
.u-pattern-side-grid.u-pattern-fade-radial-in::before,
.u-pattern-side-grid.u-pattern-fade-radial-in::after {
  display: none;
}

/* optional cut shape */
.u-pattern-side-cut.u-pattern-side-grid::before {
  clip-path: polygon(
    0 0,
    100% 0,
    100% var(--uw-pattern-cut-top),
    var(--uw-pattern-cut-inner-visible) var(--uw-pattern-cut-top),
    var(--uw-pattern-cut-inner-visible) var(--uw-pattern-cut-bottom),
    100% var(--uw-pattern-cut-bottom),
    100% 100%,
    0 100%
  );
}

.u-pattern-side-cut.u-pattern-side-grid::after {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--uw-pattern-cut-bottom),
    calc(100% - var(--uw-pattern-cut-inner-visible))
      var(--uw-pattern-cut-bottom),
    calc(100% - var(--uw-pattern-cut-inner-visible)) var(--uw-pattern-cut-top),
    0 var(--uw-pattern-cut-top)
  );
}

/* surface override inside pattern sections */
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-card,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-card--bg-800,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-blog-card,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-event-card,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-banner,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-calc,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-calc__layout,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-calc__results,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-compare__table,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-success-story-card,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-success-story-card-grid > .c-card {
  background: var(--uw-surface-bg);
}

/* =========================================================
   TYPOGRAPHY LOCK (Figma exact)
   Forces exact sizes + line-heights per breakpoint.
   (DO NOT redefine these later with clamp)
   ========================================================= */

/* Font-weight helpers (text only) */
body .fw-500 {
    font-weight: var(--uw-fw-500);
}
body .fw-600 {
    font-weight: var(--uw-fw-600);
}

/* Desktop */
:root {
    /* Headings */
    --h1: 48px;
    --h1-line-height: 56px;
    --h2: 28px;
    --h2-line-height: 36px;
    --h3: 24px;
    --h3-line-height: 32px;
    --h4: 20px;
    --h4-line-height: 28px;
    --h5: 18px;
    --h5-line-height: 26px;

    /* Text */
    --text-m: 16px;
    --text-m-line-height: 24px; /* Body 1 */

    --text-s: 14px;
    --text-s-line-height: 22px; /* Body 2 */

    --text-xs: 12px;
    --text-xs-line-height: 16px; /* Body 3 */
}

/* Card Animations */
:root {
    --card-highlight-scale: 1.02;
    --card-highlight-ring-width: 1px;
    --card-highlight-glow-size: 24px;
    --card-highlight-glow-strength: 25%;
    --card-highlight-color: var(--P700);
    --card-highlight-speed: 0.3s;
    --card-highlight-ease: ease;
}

/* Mobile */
@media (max-width: 767px) {
    :root {
        --h1: 28px;
        --h1-line-height: 36px;
        --h2: 24px;
        --h2-line-height: 32px;
        --h3: 20px;
        --h3-line-height: 28px;
        --h4: 18px;
        --h4-line-height: 26px;
        --h5: 16px;
        --h5-line-height: 24px;

        --text-m: 14px;
        --text-m-line-height: 22px;

        --text-s: 14px;
        --text-s-line-height: 22px;

        --text-xs: 12px;
        --text-xs-line-height: 16px;
    }
}

@layer uw-tokens, uw-base, uw-layout, uw-vars, uw-states;

/* =========================================================
   LAYOUT LOCKS (unlayered, beats Bricks/theme defaults)
   Keep split + containers inside content width and prevent overflow
   ========================================================= */

/* Ensure our container width always applies */
.brxe-container.l-container,
.l-container {
    width: 100%;
    max-width: var(--uw-container-width, var(--content-width, 944px));
    margin-inline: auto;
    /* padding-inline: var(--uw-gutter, var(--gutter, 24px)); */
}

/* Uniform-scale wrapper for 450×450 UI scene compositions.
   Apply to a Bricks Div wrapping any .c-ui-scene shortcode.
   The scene stays rigid at 450×450; zoom scales it proportionally
   when the wrapper is narrower than 450px. */
.l-ui-scene {
  container-type: inline-size;
  max-width: 450px;
  width: 100%;
}

.l-ui-scene .c-ui-scene {
  zoom: calc(100cqw / 450px);
}

/* Make split columns shrink correctly instead of overflowing */
.l-split {
    width: 100%;
}

/* critical for grid overflow bugs — deliberately OUTSIDE the 992px query:
   collapsed to one column, grid items still default to min-width:auto, so
   a fixed-width child (e.g. the 400px checklist on the datenblatt single)
   blows the item past the 1fr track and past a 390px viewport; max-width
   on the child can't help, 100% would reference the already-inflated item.
   min-width:0 must hold at every breakpoint. */
.l-split > * {
    min-width: 0;
}

@media (min-width: 992px) {
    .l-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Ensure images never push the grid wider */
.l-split img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ----------------------------
   1) TOKENS (aliases + locked palette)
   ---------------------------- */

@layer uw-tokens {
    :root {
        /* =====================================================
       Locked Palette Map (Use var(--G800), var(--P700), etc.)
       ===================================================== */

        /* Primary (P) */
        --P900: #108b3e;
        --P800: #16ac4e;
        --P700: #1bd761;
        --P600: #49df81;
        --P500: #76e7a0;
        --P400: #a4efc0;
        --P300: #bbf3d0;
        --P200: #d1f7df;
        --P100: #e8fbef;
        --P50: #f9fffb;

        /* Grays (G) */
        --G800: #121212;
        --G700: #1f1f1f;
        --G600: #3d3d3d;
        --G500: #5a5a5a;
        --G400: #787878;
        --G300: #959595;
        --G200: #bdbdbd;
        --G100: #e0e0e0;
        --G50: #ffffff;

        /* Error (R) */
        --R800: #d8001a;
        --R700: #f91b29;
        --R600: #ff2725;
        --R500: #ff4149;
        --R400: #f76a6f;
        --R300: #fd9598;
        --R200: #ffcbd2;
        --R100: #ffd8df;
        --R50: #ffeaee;

        /* Tertiary Blue (B) */
        --B800: #006e99;
        --B700: #0092cc;
        --B600: #00b7ff;
        --B500: #33c5ff;
        --B400: #66d4ff;
        --B300: #99e2ff;
        --B200: #b2e9ff;
        --B100: #ccf1ff;
        --B50: #e5f8ff;

        /* Tertiary Yellow (Y) */
        --Y800: #998700;
        --Y700: #ccb400;
        --Y600: #ffe100;
        --Y500: #ffe733;
        --Y400: #ffed66;
        --Y300: #fff399;
        --Y200: #fff6b2;
        --Y100: #fff9cc;
        --Y50: #fffce5;

        /* Weights */
        --uw-fw-500: 500;
        --uw-fw-600: 600;

        /* =====================================================
       Figma layout tokens
       ===================================================== */
        --uw-container-content: 944px;
        --uw-container-header: 1112px;
        --uw-container-footer: 1184px;

        --uw-container-width: var(--uw-container-content);

        /* Gutter target: 16 mobile / 24 desktop */
        --uw-gutter: clamp(16px, 2vw, 24px);

        /* Radii */
        --uw-radius-8: 8px;
        --uw-radius-12: 12px;
        --uw-radius-16: 16px;
        --uw-radius-24: 24px;
        --uw-radius-pill: 100px;

        /* SPACING LOCK (Pendant zum Typography-Lock):
           Die Tokens sind nach Pixeln BENANNT und müssen auf jedem
           Breakpoint exakt diesen Wert liefern — Figma-treu, wie die
           Typo. Früher waren sie Aliasse auf die fluiden ACSS
           clamp()-Tokens (--space-s/m/l/xl); die schrumpfen bei 375px
           auf ~70% und stauchen die Skala zusammen
           (--uw-space-64 ≈ --uw-space-48 ≈ 34px). Ergebnis: das ganze
           Mobile-/Tablet-Layout lief dichter als im Figma spezifiziert.
           Breakpoint-Abstufungen passieren bewusst in Media Queries
           (z. B. Hero-Mobile-Rhythmus), NICHT implizit im Token. */
        --uw-space-0: 0px;
        --uw-space-4: 4px;
        --uw-space-8: 8px;
        --uw-space-12: 12px;
        --uw-space-15: 15px; /* one-off: required by design */

        --uw-space-16: 16px;
        --uw-space-24: 24px;
        --uw-space-32: 32px;
        --uw-space-40: 40px;
        --uw-space-48: 48px;

        --uw-space-64: 64px;
        --uw-space-65: 65px; /* one-off: 64 + 1px Trennlinie */

        --uw-space-96: 96px;
        --uw-space-128: 128px;

        /* Text colors (Figma) */
        --uw-text-body: var(--G100);
        --uw-text-heading: var(--G50);

        /* =====================================================
       Button sizing (responsive: one button for all devices)
       Desktop: 12px 16px + Body 1
       Mobile: 8px 16px + Body 2
       ===================================================== */
        --btn-py: 12px;
        --btn-px: 16px;
        --btn-font-size: var(--text-m); /* Body 1 */
        --btn-line-height: var(--text-m-line-height);
        --btn-icon-gap: var(--uw-space-8);
    }

    @media (max-width: 767px) {
        :root {
            --btn-py: 8px;
            --btn-px: 16px;
            --btn-font-size: var(--text-s); /* Body 2 */
            --btn-line-height: var(--text-s-line-height);
        }
    }
}

/* ----------------------------
   2) BASE
   ---------------------------- */
@layer uw-base {
    body {
        background: var(--body-bg-color, var(--G800));
        color: var(--body-color, var(--G50));
    }
}

/* ----------------------------
   3) GLOBAL LAYOUT CLASSES
   ---------------------------- */
@layer uw-layout {
    .l-section {
        width: 100%;
        padding-block: var(
            --section-pad,
            var(--section-space-m, var(--uw-space-96))
        );
    }

    /* Full-bleed guarantee for section bands */
    .brxe-section.l-section {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding-inline: 0; /* gutters belong to .l-container */
    }

    .l-container {
        width: 100%;
        max-width: var(--uw-container-width, var(--content-width, 944px));
        margin-inline: auto;
    }

    .l-stack {
        display: flex;
        flex-direction: column;
        gap: var(--gap, var(--uw-space-24));
    }

    .l-cluster {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--gap, var(--uw-space-16));
    }

    .l-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: var(--gap, var(--uw-space-24));
    }

    .l-grid {
        display: grid;
        gap: var(--gap, var(--uw-space-24));
        grid-template-columns: repeat(
            auto-fit,
            minmax(min(var(--min, 280px), 100%), 1fr)
        );
    }

    .l-grid-fixed {
        display: grid;
        gap: var(--gap, var(--uw-space-24));
        grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
    }

    @media (max-width: 767px) {
        .l-grid-fixed {
            grid-template-columns: 1fr;
        }
    }

    .l-split {
        display: grid;
        align-items: center;
        gap: var(--gap, var(--uw-space-64));
        grid-template-columns: 1fr;
    }

    @media (min-width: 992px) {
        .l-split {
            grid-template-columns: 1fr 1fr;
        }
    }

    /* NEW: Center only on desktop and up */
    .l-center {
        margin-inline: auto;
    }

    @media (min-width: 768px) {
        .l-center {
            text-align: center;
            align-items: center;
        }

        .l-center .brxe-heading,
        .l-center .brxe-text-basic,
        .l-center .brxe-list {
            text-align: center;
        }
    }

    body .u-left {
    text-align: left;
    }

    body .l-stack.u-left {
    align-items: flex-start;
    }

    body .l-row.u-left,
    body .l-cluster.u-left {
    justify-content: flex-start;
    }

    body .u-left .brxe-heading,
    body .u-left .brxe-text-basic,
    body .u-left .brxe-list {
    text-align: inherit;
    }

    .u-center {
        margin-inline: auto;
        text-align: center;
    }

    .u-center .brxe-heading,
    .u-center .brxe-text-basic {
        text-align: center;
    }

    .u-full-bleed {
        width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
    }
}

/* ----------------------------
   4) VARIABLE CLASSES (ONLY set CSS variables)
   ---------------------------- */
@layer uw-vars {
    .v-container--content {
        --uw-container-width: var(--uw-container-content);
    }

    .v-container--header {
        --uw-container-width: var(--uw-container-header);
    }

    .v-container--footer {
        --uw-container-width: var(--uw-container-footer);
    }

    .v-gap-0 {
        --gap: var(--uw-space-0);
    }
    .v-gap-4 {
        --gap: var(--uw-space-4);
    }
    .v-gap-8 {
        --gap: var(--uw-space-8);
    }
    .v-gap-12 {
        --gap: var(--uw-space-12);
    }
    .v-gap-16 {
        --gap: var(--uw-space-16);
    }
    .v-gap-24 {
        --gap: var(--uw-space-24);
    }
    .v-gap-32 {
        --gap: var(--uw-space-32);
    }
    .v-gap-40 {
        --gap: var(--uw-space-40);
    }
    .v-gap-48 {
        --gap: var(--uw-space-48);
    }
    .v-gap-64 {
        --gap: var(--uw-space-64);
    }
    .v-gap-96 {
        --gap: var(--uw-space-96);
    }
    .v-gap-128 {
        --gap: var(--uw-space-128);
    }
    .v-section-pad-0 {
        --section-pad: var(--uw-space-0);
    }
    .v-section-pad-48 {
        --section-pad: var(--uw-space-48);
    }
    .v-section-pad-64 {
        --section-pad: var(--uw-space-64);
    }
    .v-section-pad-96 {
        --section-pad: var(--uw-space-96);
    }
    .v-section-pad-128 {
        --section-pad: var(--uw-space-128);
    }

    .v-min-220 {
        --min: 220px;
    }
    .v-min-260 {
        --min: 260px;
    }
    .v-min-280 {
        --min: 280px;
    }
    .v-min-300 {
        --min: 300px;
    }
    .v-min-320 {
        --min: 320px;
    }
    .v-min-360 {
        --min: 360px;
    }
    .v-min-420 {
        --min: 420px;
    }

    .v-cols-2 {
        --cols: 2;
    }
    .v-cols-3 {
        --cols: 3;
    }
    .v-cols-4 {
        --cols: 4;
    }

    .v-radius-8 {
        --radius: var(--uw-radius-8);
    }
    .v-radius-12 {
        --radius: var(--uw-radius-12);
    }
    .v-radius-24 {
        --radius: var(--uw-radius-24);
    }
    .v-radius-pill {
        --radius: var(--uw-radius-pill);
    }
}

/* ----------------------------
   5) STATE HOOKS (empty)
   ---------------------------- */
@layer uw-states {
}

/* =========================================================
   BUTTON SYSTEM (global)
   NOTE: We avoid "btn--" in class names to prevent wildcard selector collisions.
   ========================================================= */
.c-btn,
.brxe-button.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-icon-gap);
    padding: var(--btn-py) var(--btn-px);

    border-radius: var(--uw-radius-pill);
    border: 1px solid;

    text-decoration: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-weight: var(--uw-fw-500); /* LOCK: all buttons 500 */
    font-size: var(--btn-font-size);
    line-height: var(--btn-line-height);

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        opacity 0.18s ease;
}

/* Icon placement */
.c-btn-icon-right {
    flex-direction: row-reverse;
}

.c-btn__icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
}

.has-icon .c-btn__icon {
    display: inline-flex;
}

.c-btn:not(.has-icon) .c-btn__icon {
    display: none;
}

/* Primary */
.c-btn-primary {
    background: var(--P700);
    color: var(--G800);
}
.c-btn-primary:hover {
    background: var(--P500);
    color: var(--G800);
}
.c-btn-primary.is-disabled,
.c-btn-primary:disabled {
    background: var(--P900);
    color: var(--G700);
    cursor: not-allowed;
    pointer-events: none;
}

/* Secondary */
.c-btn-secondary {
    background: var(--G50);
    color: var(--G800);
}
.c-btn-secondary:hover {
    background: var(--G200);
    color: var(--G800);
}
.c-btn-secondary.is-disabled,
.c-btn-secondary:disabled {
    background: var(--G200);
    color: var(--G400);
    cursor: not-allowed;
    pointer-events: none;
}

/* Tertiary */
.c-btn-tertiary {
    background: transparent;
    border-color: var(--G50);
    color: var(--G50);
}
.c-btn-tertiary:hover {
    border-color: var(--G200);
    color: var(--G200);
}
.c-btn-tertiary.is-disabled,
.c-btn-tertiary:disabled {
    border-color: var(--G400);
    color: var(--G400);
    cursor: not-allowed;
    pointer-events: none;
}

/* Text */
.c-btn-text {
    padding: 0;
    background: transparent;
    border-color: transparent;
    color: var(--G50);
}
.c-btn-text:hover {
    color: var(--G200);
}
.c-btn-text.is-disabled,
.c-btn-text:disabled {
    color: var(--G400);
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading dots */
.c-btn.is-loading {
    pointer-events: none;
}

.c-btn__dots {
    display: none;
    width: 32px;
    height: 18px;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.c-btn.is-loading .c-btn__dots {
    display: inline-flex;
}

.c-btn__dots::before,
.c-btn__dots::after,
.c-btn__dots span {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.35;
    animation: uwBtnDots 1s infinite ease-in-out;
}

.c-btn__dots span {
    animation-delay: 0.15s;
    opacity: 0.6;
}

.c-btn__dots::after {
    animation-delay: 0.3s;
    opacity: 0.85;
}

@keyframes uwBtnDots {
    0%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-4px);
    }
}

/* =========================================================
   LP | S01 Hero (MOBILE FIRST = LEFT)
   ========================================================= */

/* MOBILE default: left aligned */
.c-hero__wrap {
    align-items: stretch;
}

.c-hero__intro {
    text-align: left;
    align-items: flex-start;
    margin-inline: 0;
    max-width: none;
    width: 100%;
}

.c-hero__intro .brxe-heading {
    color: var(--uw-text-heading);
}

.c-hero__intro .brxe-text-basic {
    color: var(--uw-text-body);
}

.brxe-list.c-hero__points {
    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    width: 100%;
    gap: var(--gap, var(--uw-space-24));
}

.brxe-list.c-hero__points > li .content {
    display: inline-flex;
    align-items: center;
    gap: var(--uw-space-8);
}

.c-hero__cta {
    width: 100%;
    justify-content: flex-start;
}

@media (min-width: 768px) {
    /* Desktop only centering */
    .c-hero__wrap {
        align-items: center;
    }

    .c-hero__intro {
        text-align: center;
        align-items: center;
        margin-inline: auto;
        max-width: 70ch;
    }

    .brxe-list.c-hero__points {
        justify-content: center;
    }

    .c-hero__cta {
        justify-content: center;
    }
}

.c-hero__frame {
    background: none;
    border: 0;
    padding: 0;
    box-shadow: none;
}

.c-hero__media {
    position: relative;
    overflow: visible;
    background: var(--G800);
    border-radius: var(--uw-radius-24);
    padding: var(--uw-space-24);
    background: var(--G800);
    border: 1px solid var(--G50);
}

.c-hero__image {
    display: none;
    width: 100%;
    height: auto;
}

.c-hero__image.is-active {
    display: block;
}

.c-hero__toggles {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--uw-space-15) * 5);
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--uw-space-24);
}

.c-hero__toggle {
    position: relative;
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    overflow: visible;
}

.c-hero__toggle svg.c-hero__toggle-ico--base {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: block;
}

.c-hero__toggle svg.c-hero__toggle-ico--hover {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateY(-4px);
    width: 72px;
    height: 72px;
    display: block;
}

.c-hero__toggle .c-hero__toggle-ico--base {
    opacity: 1;
}
.c-hero__toggle .c-hero__toggle-ico--hover {
    opacity: 0;
}

.c-hero__toggle:hover .c-hero__toggle-ico--base {
    opacity: 0;
}
.c-hero__toggle:hover .c-hero__toggle-ico--hover {
    opacity: 1;
}

.c-hero__toggle.is-active .c-hero__toggle-ico--base {
    opacity: 0;
}
.c-hero__toggle.is-active .c-hero__toggle-ico--hover {
    opacity: 1;
}

.c-hero__toggle::before {
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + var(--uw-space-8));
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    opacity: 0;
    pointer-events: none;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: var(--uw-space-4) var(--uw-space-8);
    gap: var(--uw-space-8);

    background: var(--P700);
    border: 1px solid var(--G50);
    border-radius: var(--uw-radius-8);

    font-weight: var(--uw-fw-500);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    color: var(--G800);
    white-space: nowrap;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.c-hero__toggle:hover::before {
    /* removed .c-hero__toggle.is-active::before so the label only appears on hover */
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =========================================
   Hero toggle label hard fix
========================================= */

/* let the label escape all hero toggle wrappers */
.c-hero__frame,
.c-hero__media,
.c-hero__toggles,
.c-hero__toggle {
  overflow: visible;
}

/* keep the toggle group above nearby media content */
.c-hero__toggles {
  z-index: 30;
}

/* create a clean local stacking context */
.c-hero__toggle {
  isolation: isolate;
}

/* tooltip label must sit above icon + shine layer */
.c-hero__toggle::before {
  z-index: 50;
}

.c-hero__trusted {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--uw-space-65);
  width: 100%;
}

.c-hero__trusted-label {
  white-space: nowrap;
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
  font-weight: var(--uw-fw-500);
  color: var(--uw-text-body);
  flex: 0 0 auto;
}

.c-hero__trusted-logos {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 12%,
    black 76%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 12%,
    black 76%,
    transparent 100%
  );
}

.c-hero__trusted-track {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--uw-space-32);
  width: max-content;
  will-change: transform;
  transform: translateX(0);
}

.c-hero__trusted-track > * {
  flex: 0 0 auto;
}

.c-hero__trusted-logo {
  display: block;
  flex: 0 0 120px;
  width: 120px;
  height: 32px;
  object-fit: contain;
  object-position: center;
  max-width: none;
  max-height: none;
  border-radius: 0;
}

.c-hero .c-hero__image,
.c-hero .c-hero__video,
.c-hero .c-hero__shortcode {
  display: none;
}

.c-hero.is-media-image .c-hero__image {
  display: block;
}

.c-hero.is-media-video .c-hero__video {
  display: block;
}

.c-hero.is-media-shortcode .c-hero__shortcode {
  display: block;
}

.c-hero.is-media-none .c-hero__image,
.c-hero.is-media-none .c-hero__video,
.c-hero.is-media-none .c-hero__shortcode {
  display: none;
}

/* =========================================================
   TYPO UTILITIES (unlayered)
   ========================================================= */
.c-eyebrow {
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: var(--uw-fw-600);
    color: var(--P700);
}

/* =========================================================
   TEXT UTILITIES
   ========================================================= */
/* Muted text (global) */
.u-text-muted,
.brxe-text-basic.u-text-muted,
.brxe-heading.u-text-muted {
    color: var(--uw-text-muted, var(--uw-text-body));
}

/* Optional: set the default muted token (dark theme baseline) */
:root {
    --uw-text-muted: var(--G100);
}

/* =========================================================
   S01 HERO - Mobile exact spacing from Figma exports
   ========================================================= */
@media (max-width: 767px) {
    /* Rhythmus zwischen den Hero-Hauptblöcken (Intro / CTA / Screen /
       Logos) = 24 — im Figma-Landing (393px, Node 271:3086) nachgemessen:
       Checks y244→CTA y268, CTA-Ende y308→Screen y332, Screen-Ende
       y561→Logos y585, alle 24. Wirkt erst seit dem Spacing-Lock —
       vorher schrumpften die fluiden Tokens den Wert auf ~17px, DAS war
       die gemeldete Dichte. Feinabstände IM Intro: 8/24 (Regeln unten
       + Snippet 033). */
    .c-hero__wrap {
        --gap: var(--uw-space-24);
        align-items: stretch;
    }

    .c-hero__main {
        --gap: var(--uw-space-24);
        width: 100%;
    }

    /* heading->body micro spacing = 8 */
    .c-hero__intro {
        --gap: var(--uw-space-8);
    }

    /* list wrap gap = 8 */
    .brxe-list.c-hero__points {
        gap: var(--uw-space-8);
    }

    /* CTA row gap = 16. body-Präfix + --gap-Override, weil das Element
       den Dial v-gap-24 trägt: dessen Variable gewinnt sonst über die
       l-cluster-Konsumregel und die Buttons (149+135+24 = 308px)
       umbrechen bei 375px (305px Zeilenbreite). 149+135+16 = 300 passt.
       Vor dem Spacing-Lock war das unsichtbar — die fluiden Tokens
       schrumpften den 24er-Gap auf ~17px. */
    body .c-hero__cta {
        --gap: var(--uw-space-16);
        gap: var(--uw-space-16);
    }

    /* media frame padding 8 + radius 12 */
    .c-hero__media {
        width: 100%;
        max-width: 100%;
        padding: var(--uw-space-8);
        border-radius: var(--uw-radius-12);
    }

    /* Trusted row: mobile wraps */
    .c-hero__trusted {
        width: 100%;
        justify-content: flex-start; /* MOBILE DEFAULT LEFT */
        gap: var(--uw-space-24);
        flex-wrap: wrap;
    }

    .c-hero__trusted-logos {
        gap: var(--uw-space-24);
        flex-wrap: wrap;
        justify-content: flex-start; /* MOBILE DEFAULT LEFT */
        opacity: 0.5;
    }

    /* Logos in natürlicher Breite bei fester Höhe. Der Desktop-Slot
       (feste 120px-Box, object-fit: contain) macht kompakte Logos auf
       Mobile winzig und die leere Box-Luft wirkt wie riesige Abstände.
       width:auto = Breite aus dem Seitenverhältnis; der Gap im Track
       ist damit der echte sichtbare Abstand. Figma-Landing: Höhe 18,
       Breiten 31–112px natürlich, Gap 24. Das Marquee-JS (Snippet 015)
       steppt per offsetLeft und verkraftet variable Breiten.
       Scope .c-hero--switcher: NUR das Landing-Hero ist am Figma
       nachgemessen — die trusted-logos-Teilkomponente steckt auch in
       Nicht-Switcher-Heroes (Über uns, ÖPNV, Demo, …), dort gilt
       weiter die Nicht-Switcher-Regel aus Snippet 033 (max-height 24).
       body-Präfix, damit diese Regel deren Spezifität schlägt, wo
       BEIDE gelten (Landing). */
    body .c-hero--switcher .c-hero__trusted-logo {
        flex: 0 0 auto;
        width: auto;
        height: 18px;
        max-height: none;
        opacity: 1;
    }

    body .c-hero--switcher .c-hero__trusted-track {
        gap: var(--uw-space-24);
    }
}

/* JS-injizierte Slider-Dots (Preis-Pakete): nur mobil (Snippet 033
   zeigt .c-slider-dots per flex ≤767). Basis-Regel versteckt sie
   überall sonst — falls das JS sie nach einem Resize auf Desktop im DOM
   belässt. (Netzwerk-Prozess-Dots sind Bricks-Markup und regeln ihre
   Desktop-Sichtbarkeit über die Komponente selbst.) */
.c-slider-dots {
    display: none;
}

/* =========================================================
   RESPONSIVE SICHTBARKEITS-UTILITY
   u-hide-mobile existierte als Bricks-Globalklasse bereits auf
   Elementen, hatte aber NIRGENDS CSS — eine tote Klasse. Definition
   gehört hierher ins System-Snippet: blendet Inhalte aus, die es im
   Mobile-Design (Figma Landing 393px) nicht gibt, z. B. den
   Value-Props-Block unter den Paketen oder die Pane-Buttons der
   Plattform-Tabs. Desktop unberührt.
   Doppelte Klasse (0,2,1): muss die höchstspezifischen Display-
   Utilities schlagen, ohne !important — konkret `.brxe-button.c-btn`
   (0,2,0), das den "Preise ansehen"-Button auf display:flex hält.
   Eine einfache `body .u-hide-mobile` (0,1,1) verlöre dagegen. */
@media (max-width: 767px) {
    body .u-hide-mobile.u-hide-mobile {
        display: none;
    }
}

/* =========================================================
   GUTTER LOCK (unlayered — muss ACSS' :root-Definition schlagen)
   Es gab ZWEI Gutter-Quellen: das Design-Token --uw-gutter
   ("16 mobil / 24 Desktop", Figma: alle Section-Inhalte bei x=16
   auf 393px) und ACSS' fluides --gutter (clamp ~16→24, bei 390px
   19,3px), das der Content-Grid der Sections tatsächlich konsumiert
   (Spalte: 100% - gutter*2). Ergebnis: JEDE Section stand 3,3px
   neben dem Design und neben allem, was --uw-gutter nutzt (z. B.
   Breadcrumbs aus Snippet 33) — die vom User gemeldete
   "uneinheitliche Gutter"-Wahrnehmung. Eine Quelle der Wahrheit:
   ACSS-Konsumenten folgen ab hier dem Design-Token. Unlayered und
   nach ACSS geladen → gewinnt per Reihenfolge. */
:root {
    --gutter: var(--uw-gutter);
}

/* =========================================================
   SECTION-RHYTHMUS MOBILE (Figma Landing 393px, Node 271:3086)
   Die v-*-Dial-Klassen gelten auf jedem Breakpoint — entfernen
   würde den Desktop brechen. Stattdessen wird hier (wie beim
   Typography-Lock) der WERT der Dials mobil remappt: Abstand
   zwischen Sections = 48 (Frame-Gap des Figma-Landings, zwischen
   ALLEN Sections konstant), Section-Innenabstand 24 statt 48.
   Bewusst NUR die großen Rhythmus-Dials: kleine Gaps (8/16/24)
   sind im Figma mobil identisch zum Desktop und bleiben unberührt.
   body-Präfix schlägt die gelayerten Dial-Definitionen (uw-vars).
   Tablet (768–991) behält ABSICHTLICH den Desktop-Rhythmus
   (128/48): es gibt kein Tablet-Figma; vor dem Spacing-Lock lief
   Tablet auf ~85% der Desktop-Werte, jetzt exakt darauf. Wer hier
   einen eigenen Tablet-Rhythmus will, braucht erst eine Design-
   Entscheidung. */
/* Reparatur VOR dem Remap: Die Bricks-Globalklasse v-gap-128 trug
   _rowGap/_columnGap als gespeicherten Stil (bricks_global_classes,
   Anti-Pattern: v-Klassen dürfen nur ihre Variable setzen) — Bricks
   renderte daraus `.v-gap-128 { gap: var(--uw-space-128) }` und umging
   den Dial, ein Variablen-Remap wäre wirkungslos. Die Dial-Hygiene-
   Migration (content-migrations/dial-hygiene/) entfernt den Stil aus
   der DB; diese Regel bleibt als versionierter Schutz, bis die
   Migration AUF STAGING gelaufen ist (danach redundant → entfernbar,
   siehe README der Migration). Bewusst OHNE Strukturbedingung
   (.l-section o. Ä.): sie muss jeden Träger des Dials abdecken.
   Auf Nicht-Flex/Grid-Elementen ist gap inert. */
body .v-gap-128 {
    gap: var(--gap, var(--uw-space-128));
}

@media (max-width: 767px) {
    /* Klassen-Scope statt Strukturmuster: JEDER v-gap-128-Konsument
       (Seiten-Wrapper, CTA-Section, Rechtsseiten-Stacks nach der
       Dial-Hygiene-Migration) bekommt mobil den 48er-Rhythmus. */
    body .v-gap-128 {
        --gap: var(--uw-space-48);
    }

    body .l-section.v-section-pad-48 {
        --section-pad: var(--uw-space-24);
    }
}

/* =========================================================
   BRICKS CONTAINER OVERRIDES
   Only l-container should behave like a width wrapper.
   Layout-parent containers must be fluid (100%) inside the wrapper.
   ========================================================= */

/* 1) Width wrapper stays controlled by our system */
body .brxe-container.l-container,
body .l-container {
    width: 100%;
    max-width: var(--uw-container-width, var(--content-width, 944px));
    margin-inline: auto;
    /* padding-inline: var(--uw-gutter, 24px); */
}

/* 2) Any Container used as a layout parent should NOT clamp to content width */
body .brxe-container.l-stack,
body .brxe-container.l-row,
body .brxe-container.l-cluster,
body .brxe-container.l-split,
body .brxe-container.l-grid,
body .brxe-container.l-grid-fixed {
    width: 100%;
    max-width: none;
}

/* 3) Prevent grid/split overflow from “wide children”
   NOTE: the load-bearing copy of `.l-split > * { min-width: 0 }` lives
   UNSCOPED near the first .l-split block ("critical for grid overflow
   bugs") — it must hold at EVERY breakpoint (400px-checklist bleed on
   the datenblatt single, <992px). The copy below is redundant armor at
   ≥992px; if you dedup, keep the unscoped one. */
@media (min-width: 992px) {
    body .l-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    body .l-split > * {
        min-width: 0;
    }
}

body .l-split img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Nested Bricks containers inside our width wrapper must be fluid */
.l-container .brxe-container:not(.l-container) {
    width: 100%;
    max-width: none;
}

/* =========================================================
   Reusable gradient border
   Top: #1BD761 @ 32% -> Bottom: 0%
   ========================================================= */
.u-border-grad {
    position: relative;
}

.u-border-grad::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;

    background: linear-gradient(
        180deg,
        rgba(27, 215, 97, 0.32) 0%,
        rgba(27, 215, 97, 0) 100%
    );

    /* Border-only mask (WebKit) */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;

    /* Fallback border if mask unsupported */
    pointer-events: none;
}

@supports not (-webkit-mask-composite: xor) {
    .u-border-grad {
        border: 1px solid rgba(27, 215, 97, 0.32);
    }

    .u-border-grad::before {
        display: none;
    }
}

/* =========================================================
   Card system
   - Desktop padding: 24
   - Mobile padding: 16
   - Media: fixed height, cover, aligned to top (left top)
   ========================================================= */
.c-card {
    --card-pad: var(--uw-space-24);
    --card-media-h: 165px;
    /*--scard-media-h: 477px;*/

    background: var(--G700);
    border-radius: var(--radius, var(--uw-radius-12));
    overflow: hidden;

    display: flex;
    flex-direction: column;

    min-height: 301px; /* matches your Figma card height */
}

@media (max-width: 767px) {
    .c-card {
        --card-pad: var(--uw-space-16);
    }
}

.c-card__body {
    padding: var(--card-pad);
}

/* Text styles */
.c-card__num,
.c-card__title,
.c-card__desc {
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
}

.c-card__num {
    color: var(--G300);
    font-weight: 400;
    transition: color 0.3s ease;
}

.c-card__title {
    color: var(--G50);
    font-weight: var(--uw-fw-600);
}

/* desc color comes from u-text-muted */

/* Media sits at bottom, flush right + bottom, clipped by card */
.c-card__media {
    margin-top: auto;
    padding-left: var(--card-pad); /* keeps left alignment with content */
    padding-right: 0;
    padding-bottom: 0;
    width: 100%;
}

/* Media fills its own “window”, covers, aligned to top */
.c-card__media > img,
.c-card__media > video,
.c-card__media > iframe {
    display: block;
    height: var(--card-media-h);
    width: calc(100% + var(--card-pad)); /* creates the right “overhang” */
    max-width: none;
    object-fit: cover;
    object-position: left top; /* if you truly want top-center, use: center top */
    border-radius: var(--uw-radius-12) 0 var(--uw-radius-12) 0;
}

.cs-card__media {
    margin-top: auto;
    padding-left: var(--card-pad); /* keeps left alignment with content */
    padding-right: 0;
    padding-bottom: 0;
    width: 100%;
    height: 477px;
}

.cs-card__media > img,
.cs-card__media > video,
.cs-card__media > iframe {
    display: block;
    height: var(--scard-media-h);
    width: calc(100% + var(--card-pad)); /* creates the right “overhang” */
    max-width: none;
    object-fit: cover;
    object-position: left top; /* if you truly want top-center, use: center top */
    border-radius: var(--uw-radius-12) 0 var(--uw-radius-12) 0;
}

/* =========================================================
   Card media: Bricks video support (.brxe-video wrapper)
   ========================================================= */
.c-card__media {
    overflow: hidden; /* clips video overhang */
}

/* The Bricks wrapper becomes the media window */
.c-card__media .brxe-video,
.c-card__media .bricks-video {
    width: calc(100% + var(--card-pad)); /* keeps the right edge flush */
    height: var(--card-media-h);
    margin: 0;
}

/* Make the actual <video> fill the window */
.c-card__media .brxe-video video,
.c-card__media .bricks-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top; /* top aligned */
}

/* Optional: keep the same corner treatment as images */
.c-card__media .brxe-video,
.c-card__media .bricks-video {
    border-radius: var(--uw-radius-12) 0 var(--uw-radius-12) 0;
}

/* u-center should center layout children too (not just text) */
body .u-center {
    text-align: center;
    /* Neutralisiert Dirt: die Bricks-Globalklasse u-center trägt ein
       gespeichertes _padding: 20px (bricks_global_classes) — ein
       Zentrier-Utility darf keinen Innenabstand mitbringen. Das schob
       jeden u-center-Block (z. B. den Erfolgsgeschichten-Header nach
       dem l-center->u-center-Swap) 20px nach innen (36px statt 16px
       Gutter). (0,1,1) schlägt die gespeicherte .u-center-Regel (0,1,0).
       DB-Bereinigung wird von der Dial-Hygiene-Migration gemeldet. */
    padding-inline: 0;
}

body .l-stack.u-center {
    align-items: center;
}

body .l-row.u-center,
body .l-cluster.u-center {
    justify-content: center;
}

/* Bricks sometimes sets text-align on elements; force inherit */
body .u-center .brxe-heading,
body .u-center .brxe-text-basic {
    text-align: inherit;
}

/* List reset (generic) */
.c-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--uw-space-8);
}

/* Checklist layout (generic) */
.c-checklist .content {
    display: inline-flex;
    align-items: start;
    gap: var(--uw-space-8);
    margin: 0;
}

.c-checklist .icon {
    display: inline-flex;
    padding-top: 2px;
}

.c-checklist .title {
    display: flex;
    margin: 0;
    text-align: left;
}

/* ---------------------------------------------------------------
   Checklist — RICH-TEXT variant: .c-checklist--rich
   ---------------------------------------------------------------
   WHY: the generic .c-checklist above needs the structured
   .content/.icon/.title markup (one hand-placed SVG per item) that
   the Bricks *List* widget emits. Rich-text / WYSIWYG fields (e.g.
   the datasheet CPT description) can only emit a plain <ul><li>text
   — no per-item icon element — so they'd fall back to browser discs.

   This variant generates the green check as a pseudo-element marker
   instead, so a bare <ul><li> renders identically to the structured
   checklist. It is a SEPARATE modifier (not folded into .c-checklist)
   on purpose: applying it globally to .c-checklist would double-mark
   the List-widget checklists (they already ship their own .icon SVG)
   and hit their nested spec sub-lists. Add .c-checklist--rich only on
   the rich-text block whose plain list should become a checklist.

   Icon uses the mask-token pattern (cf. --footer-send-icon): one SVG
   recoloured via background-color, so it follows --success like every
   other green in the system. Spacing uses the --uw-space-* scale with
   a --gap override hook, matching .l-row / .l-stack. */

/* Check glyph as a recolourable mask token. */
:root {
    --uw-icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.285 6.708a1 1 0 0 1 .007 1.414l-9.2 9.3a1 1 0 0 1-1.422 0l-4.29-4.33a1 1 0 1 1 1.42-1.408l3.58 3.615 8.49-8.59a1 1 0 0 1 1.415-.001z'/></svg>");
}

/* Reset the plain list like .c-list does for its own element. */
.c-checklist--rich ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--gap, var(--uw-space-12)); /* item spacing; override via --gap */
}

.c-checklist--rich li {
    position: relative;
    padding-left: 1.9em; /* room for the marker (icon width + gap) */
}

/* Top-level items: green check, coloured via --success through the mask. */
.c-checklist--rich li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    background-color: var(--success, #1bd761);
    -webkit-mask: var(--uw-icon-check) center / contain no-repeat;
            mask: var(--uw-icon-check) center / contain no-repeat;
}

/* Nested sub-lists: extra breathing room above so they read as a group. */
.c-checklist--rich li > ul {
    margin-top: var(--uw-space-12);
}

/* Nested items: swap the check for a small green dot (drop the mask). */
.c-checklist--rich ul ul li::before {
    -webkit-mask: none;
            mask: none;
    background-color: var(--success, #1bd761);
    width: 0.42em;
    height: 0.42em;
    border-radius: 50%;
    top: 0.62em; /* align dot to the text baseline */
    left: 0.35em;
}


/* Grid span helpers (for 50/25/25 layouts) */
.v-span-2 {
    --span: 2;
}

/* Only span on desktop/tablet; avoid implicit columns on mobile 1-col grid */
@media (min-width: 768px) {
    .u-grid-span {
        grid-column: span var(--span, 1);
    }
}

/* =========================================================
   Tabs (Bricks native) – one class hook: .c-tabs
   - tab padding: 4px 12px
   - gap between tabs: 24px
   - gap to content: 24px
   - inactive tab surface is variable-driven per instance
========================================================= */

.c-tabs [role='tablist'] {
  display: flex;
  align-items: flex-start;
  gap: var(--uw-space-24);
  margin: 0 0 var(--uw-space-48) 0;
  padding: 0;
}

.c-tabs [role='tab'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 12px;
  height: 32px;

  border-radius: var(--uw-radius-pill);
  border: 0;

  background: var(--tabs-tab-bg, var(--G800));
  color: var(--tabs-tab-color, var(--G50));

  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
  min-width: 84px;
  cursor: pointer;
}

.c-tabs [role='tab'][aria-selected='true'] {
  background: var(--tabs-tab-active-bg, var(--P700));
  color: var(--tabs-tab-active-color, var(--G800));
  font-weight: var(--uw-fw-500);
}

.c-tabs [role='tab']:not([aria-selected='true']):hover {
  background: var(--tabs-tab-hover-bg, var(--P500));
  color: var(--tabs-tab-hover-color, var(--G800));
}

.c-tabs [role='tab']:focus-visible {
  outline: 2px solid var(--P700);
  outline-offset: 2px;
}

/* =========================================
   Tabs -> switcher style
   For 2 tabs only
========================================= */

.c-tabs--switcher .tab-menu,
.c-tabs--switcher[role='tablist'],
.c-tabs--switcher [role='tablist'] {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  background: var(--G700);
  border-radius: var(--uw-radius-pill);
  overflow: hidden;
  isolation: isolate;
}

/* sliding active pill */
.c-tabs--switcher .tab-menu::before,
.c-tabs--switcher [role='tablist']::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  background: var(--P700);
  border-radius: inherit;
  transition: transform 0.24s ease;
  z-index: 0;
}

/* move pill to tab 2 when tab 2 is active */
.c-tabs--switcher .tab-menu:has(> :nth-child(2)[aria-selected='true'])::before,
.c-tabs--switcher [role='tablist']:has(> :nth-child(2)[aria-selected='true'])::before {
  transform: translateX(100%);
}

/* individual tab buttons */
.c-tabs--switcher .tab-title,
.c-tabs--switcher [role='tab'] {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 16px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.24s ease;
}

/* kill any spacing wrappers inside */
.c-tabs--switcher .tab-title > *,
.c-tabs--switcher [role='tab'] > * {
  margin: 0;
}

/* text colors */
.c-tabs--switcher .tab-title[aria-selected='false'],
.c-tabs--switcher [role='tab'][aria-selected='false'] {
  color: var(--G50);
}

.c-tabs--switcher .tab-title[aria-selected='true'],
.c-tabs--switcher [role='tab'][aria-selected='true'] {
  color: var(--G800);
}

/* ensure text inherits the right color */
.c-tabs--switcher .tab-title .brxe-text-basic,
.c-tabs--switcher [role='tab'] .brxe-text-basic {
  color: inherit;
}

/* remove old tab component spacing if it is still applied */
.c-tabs--switcher.c-tabs [role='tablist'] {
  gap: 0;
  margin: 0;
}

/* optional hover */
.c-tabs--switcher .tab-title:hover,
.c-tabs--switcher [role='tab']:hover {
  color: inherit;
}

/* =========================================
   App tabs switcher — per-tab active/hover colors
   Same custom property pattern as active (which works)
========================================= */

/* Tab 2: B600 active, B500 hover */
.c-tabs--app-switcher [role='tab']:nth-child(2)[aria-selected='true'] {
  --tabs-tab-active-bg: var(--B600);
}
.c-tabs--app-switcher [role='tab']:nth-child(2):not([aria-selected='true']):hover {
  background: var(--B400) !important;
}

/* Tab 3: Y600 active, Y500 hover */
.c-tabs--app-switcher [role='tab']:nth-child(3)[aria-selected='true'] {
  --tabs-tab-active-bg: var(--Y600);
}
.c-tabs--app-switcher [role='tab']:nth-child(3):not([aria-selected='true']):hover {
  background: var(--Y400) !important;
}

/* =========================================
   Price tabs -> switcher style
   Locked for 2 tabs
========================================= */

.c-tabs--switcher .tab-menu {
  position: relative;
  display: flex;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 auto;
  width: max-content;
  background: var(--G700);
  border-radius: var(--uw-radius-pill);
  overflow: hidden;
  isolation: isolate;
}

/* sliding active pill */
.c-tabs--switcher .tab-menu::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 2px;
  width: calc(50% - 2px);
  background: var(--P700);
  border-radius: var(--uw-radius-pill);
  transition: transform 0.24s ease;
  z-index: 0;
}

/* move the pill when tab 2 is active */
.c-tabs--switcher .tab-menu:has(> .tab-title:nth-child(2)[aria-selected="true"])::before {
  transform: translateX(100%);
}

/* each side of the switcher */
.c-tabs--switcher .tab-title {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 4px 28px;
  margin: 0;

  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

/* inner text */
.c-tabs--switcher .tab-title .brxe-text-basic {
  margin: 0;
  color: inherit;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: var(--uw-fw-500);
  white-space: nowrap;
}

/* keyboard focus */
.c-tabs--switcher .tab-title:focus-visible {
  outline: 2px solid var(--G50);
  outline-offset: 2px;
}


/* =========================================
   Price tabs switcher
   Scoped override for the pricing tabs only
========================================= */

/* tab list = centered dark pill track */
body .c-tabs--pricing-switcher .tab-menu[role="tablist"] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;

  width: max-content;
  margin: 0 auto;
  padding: 0;

  background: var(--G700);
  border: 0;
  border-radius: var(--uw-radius-pill);
  box-shadow: none;
}

/* each tab title = auto width, no forced sizing */
body .c-tabs--pricing-switcher .tab-title[role="tab"] {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 4px 28px;
  gap: 0;

  background: transparent;
  border: 0;
  border-radius: var(--uw-radius-pill);
  box-shadow: none;
}

/* active side = full pill */
body .c-tabs--pricing-switcher .tab-title[role="tab"][aria-selected="true"],
body .c-tabs--pricing-switcher .tab-title[role="tab"].brx-open {
  background: var(--P700);
}

/* inactive side stays transparent so the parent dark pill shows through */
body .c-tabs--pricing-switcher .tab-title[role="tab"][aria-selected="false"] {
  background: transparent;
}

/* text reset */
body .c-tabs--pricing-switcher .tab-title .brxe-text-basic {
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: inherit;
  white-space: nowrap;
}

/* active label */
body .c-tabs--pricing-switcher .tab-title[role="tab"][aria-selected="true"] .brxe-text-basic,
body .c-tabs--pricing-switcher .tab-title[role="tab"].brx-open .brxe-text-basic {
  font-weight: 500;
  color: var(--G800);
}

/* inactive label */
body .c-tabs--pricing-switcher .tab-title[role="tab"][aria-selected="false"] .brxe-text-basic {
  font-weight: 400;
  color: var(--G50);
}

/* kill generic c-tabs spacing from the global component */
body .c-tabs.c-tabs--pricing-switcher [role="tablist"] {
  margin-bottom: 0;
}

body .c-tabs.c-tabs--pricing-switcher [role="tab"] {
  min-width: 0;
  height: auto;
}

/* =========================================================
   Railway ops tabs media
========================================================= */

body .c-railway-ops-tabs .tab-pane .brxe-image,
body .c-railway-ops-tabs .tab-pane picture {
  display: block;
  width: min(100%, 450px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

body .c-railway-ops-tabs .tab-pane .brxe-image img,
body .c-railway-ops-tabs .tab-pane picture > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (min-width: 992px) {
  body .c-railway-ops-tabs .tab-pane .brxe-image,
  body .c-railway-ops-tabs .tab-pane picture {
    width: 450px;
    height: 300px;
    aspect-ratio: auto;
  }
}

/* =========================================================
   Height helpers for this tabs layout (desktop/tablet only)
========================================================= */
@media (min-width: 768px) {
    .u-minh-232 {
        height: 232px;
        min-height: 0; /* overrides .c-card min-height:301 */
    }
    .u-minh-488 {
        height: 488px;
        min-height: 0; /* overrides .c-card min-height:301 */
    }
}

/* Card background modifier */
.c-card--bg-800 {
    background: var(--G800);
}

/* Link-style button (Primary 700 text + icon) */
.c-btn-link {
    color: var(--P700);
}

/* Hover */
.c-btn-link:hover {
    color: var(--P500);
}

/* Utility: minimum width 178px (buttons, chips, etc.) */
.u-minw-178 {
    min-width: 178px;
}

/* Make svg icons follow text color */
.c-btn-link svg {
    fill: currentColor;
}

/* Card link-button should size to content and sit left */
.c-card__body .c-btn-link {
    align-self: flex-start; /* stops flex stretch */
    width: fit-content; /* keeps it tight like Figma */
    justify-content: flex-start;
}

/* Bricks button defaults can add padding. Kill it for text/link buttons. */
body .brxe-button.bricks-button.c-btn.c-btn-text,
body .brxe-button.bricks-button.c-btn.c-btn-text.c-btn-link {
    padding: 0;
    min-height: 0;
    height: auto;
}

/* Force system gaps to win over Bricks :where(.brxe-div) gap */
body .l-stack {
    gap: var(--gap, var(--uw-space-24));
}

/* Force section vertical padding to win over Bricks defaults */
body .brxe-section.l-section,
body .l-section {
    padding-block: var(
        --section-pad,
        var(--section-space-m, var(--uw-space-96))
    );
}

/* =========================================================
   Datasheets / Product Card (Query-loop safe)
   Uses existing system: c-card + u-border-grad + c-btn
========================================================= */

.c-ds-card {
    height: 100%; /* helps equal-height cards in grid */
}

.c-ds-card__body {
    /* set component rhythm from one place (no v-gap needed) */
    --gap: var(--uw-space-16);
}

/* Icon sizing (matches the 48px icons in design) */
.c-ds-card__icon {
    width: 48px;
    height: 48px;
    display: block;
}

/* Ensure any editor-generated paragraphs don't add extra height */
.c-ds-card__desc,
.c-ds-card__desc p {
    margin: 0;
}

/* CTA sits left and sizes to content (not full width) */
.c-ds-card__cta {
    align-self: flex-start;
    width: fit-content;
}

/* Arrow follows button color (works even if SVG path had a hard fill) */
.c-ds-card__cta svg path {
    fill: currentColor;
}

/* =========================================================
   Product tile card (image + title + CTA)
========================================================= */
.c-prod-card__row {
    align-items: center; /* keeps image + text vertically aligned */
}

.c-prod-card__img {
    width: 108px;
    height: 108px;
    flex: 0 0 auto;
    object-fit: contain;
    display: block;
}

/* keep the CTA snug and left-aligned */
.c-prod-card__cta {
    align-self: flex-start;
    width: fit-content;
}

/* make arrow follow link color even if SVG has inline fills elsewhere */
.c-prod-card__cta svg path {
    fill: currentColor;
}

/* No-radius utility (for link-like CTAs) */
.u-radius-0 {
    border-radius: 0;
}
.u-radius-4 {
    border-radius: 4px;
}
.u-radius-5 {
    border-radius: 5px;
}
.u-radius-8 {
    border-radius: 8px;
}
.u-radius-12 {
    border-radius: 12px;
}
.u-radius-24 {
    border-radius: 24px;
}

/* Ensure Bricks doesn't re-inject background/border for text buttons */
body .brxe-button.bricks-button.c-btn.c-btn-text {
    background: transparent;
    border-color: transparent;
}

/* Product tile cards: no forced minimum height */
.c-card--auto-h {
    min-height: 0;
}

/* =========================================================
   App Tabs — c-app-tab--unwired / c-app-tab--partner
   Used in: UI-Element-App-Tab-Unwired.html (and partner variant)
========================================================= */

.c-app-tab--unwired .c-card--app,
.c-app-tab--partner .c-card--app {
    min-height: 144px;
}

.c-app-tab--unwired .c-card--app {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--P700) 8%, transparent) 0%,
        transparent 60%
    );
}

/* Icon color: P700 for Unwired tab, B600 for Partner tab */
.c-app-tab--unwired .c-icon-badge {
    --badge-icon-color: var(--P700);
}

.c-app-tab--partner .c-icon-badge {
    --badge-icon-color: var(--B600);
}

.c-app-tab--partner .c-card--app {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--B600) 8%, transparent) 0%,
        transparent 60%
    );
}

.c-app-tab--partner .c-card--app.u-border-grad::before {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--B600) 32%, transparent) 0%,
        transparent 100%
    );
}

@supports not (-webkit-mask-composite: xor) {
    .c-app-tab--partner .c-card--app.u-border-grad {
        border-color: color-mix(in srgb, var(--B600) 32%, transparent);
    }
}

.c-card.c-card--platform {
    min-height: 120px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--P700) 24%, transparent) 0%,
        color-mix(in srgb, var(--P700) 8%, transparent) 100%
    );
    justify-content: center;
}

.c-card.c-card--platform.u-border-grad::before {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--P700) 56%, transparent) 0%,
        color-mix(in srgb, var(--P700) 16%, transparent) 100%
    );
}

@supports not (-webkit-mask-composite: xor) {
    .c-card.c-card--platform.u-border-grad {
        border-color: color-mix(in srgb, var(--P700) 56%, transparent);
    }
}

/* Y600 tab — Ihre App */
.c-card--app-content {
    min-height: 0;
}

.c-card__media-top {
    width: 100%;
    height: 120px;
    overflow: hidden;
    flex: 0 0 auto;
}

.c-card__media-top > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.c-app-tab--customer .c-card--app-content {
    background: linear-gradient(135deg, color-mix(in srgb, var(--Y600) 8%, transparent) 0%, transparent 60%);
}

.c-app-tab--customer .c-card--app-content.u-border-grad::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--Y600) 32%, transparent) 0%, transparent 100%);
}

@supports not (-webkit-mask-composite: xor) {
    .c-app-tab--customer .c-card--app-content.u-border-grad {
        border-color: color-mix(in srgb, var(--Y600) 32%, transparent);
    }
}

/* =========================================================
   Partner Card (query-loop)
   Matches Figma: padding 12, gap 16, frame 200h, radius 12/8
========================================================= */

.c-partner-card {
    min-height: 0;
} /* overrides .c-card min-height when needed */

.c-partner-card__body {
    --gap: 16px; /* works with your body .l-stack gap override */
}

.c-partner-card__frame {
    height: 200px;
    width: 100%;
    border-radius: 8px;
    background: #004280; /* from Figma */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo inside the frame */
.c-partner-card__logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* CTA: white, no background, tight to content */
.c-partner-card__cta {
    align-self: flex-start;
    width: fit-content;
    color: var(--G50);
}

/* Ensure arrow inherits CTA color */
.c-partner-card__cta svg path {
    fill: currentColor;
}

/* If Bricks wraps text in <p>, remove margins so heights stay consistent */
.c-partner-card__body p {
    margin: 0;
}

/* Optional: fixed card height like Figma (desktop/tablet only) */
@media (min-width: 768px) {
    .c-partner-card {
        height: 464px;
    }
}

/* partner CTA: white */
.c-partner-card__cta {
    color: var(--G50);
}
.c-partner-card__cta svg path {
    fill: currentColor;
}

/* =========================================================
   CTA Banner (matches Banner.pdf)
========================================================= */
.c-banner {
    position: relative;
    border-radius: var(--uw-radius-24);
    padding: var(--uw-space-64);
    overflow: hidden;

    background:
        radial-gradient(
            800px 450px at 18% 20%,
            rgba(27, 215, 97, 0.22) 0%,
            rgba(27, 215, 97, 0) 60%
        ),
        radial-gradient(
            900px 520px at 82% 30%,
            rgba(27, 215, 97, 0.18) 0%,
            rgba(27, 215, 97, 0) 55%
        ),
        linear-gradient(90deg, var(--G800) 0%, #0f2617 65%, #0f3a1e 100%);
}

.c-banner::before {
    content: '';
    position: absolute;
    inset: -10%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(
            800px 450px at 18% 20%,
            rgba(27, 215, 97, 0.3) 0%,
            rgba(27, 215, 97, 0) 60%
        ),
        radial-gradient(
            900px 520px at 82% 30%,
            rgba(27, 215, 97, 0.24) 0%,
            rgba(27, 215, 97, 0) 55%
        ),
        linear-gradient(90deg, var(--G800) 0%, #0f2617 65%, #0f3a1e 100%);

    opacity: 0.9;
    transform-origin: center;
    animation: uwBannerGradientDrift 10s ease-in-out infinite alternate;
    will-change: transform;
}

.c-banner > * {
    position: relative;
    z-index: 1;
}

@keyframes uwBannerGradientDrift {
    0% {
        transform: translateX(-6%) translateY(-3%) scale(1.08);
    }
    100% {
        transform: translateX(6%) translateY(3%) scale(1.14);
    }
}

/* Green headline like the PDF */
.c-banner .brxe-heading {
    color: var(--P700);
}

/* Body stays readable */
.c-banner .brxe-text-basic {
    color: var(--G50);
}

.c-banner__media {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.c-banner__img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
}

@media (max-width: 767px) {
    /* body-Präfix nötig: Die Bricks-KOMPONENTE des Banners trägt in
       ihrem _cssCustom eine geforkte Kopie des .c-banner-Blocks
       (Kennung: animation uwBannerBgTest, padding 64, KEIN Mobile-
       Override) und liefert sie inline auf jeder Seite aus — sie
       schlägt eine gleichspezifische Snippet-Regel. Ohne diesen
       Override bleibt die Banner-Innenbreite mobil bei ~226px und
       die CTA-Buttons können nie nebeneinander stehen (Figma:
       Card-Padding 24, Buttons je ~50%). Aufräumen der Komponenten-
       CSS-Kopie steht aus; bis dahin gewinnt diese Regel. */
    body .c-banner {
        padding: var(--uw-space-24);
    }
    .c-banner__media {
        justify-content: center;
    }
}

@media (max-width: 991px) {
    .c-banner__people {
        display: none;
    }
}

.c-banner__people {
    position: relative;
    min-height: 400px;
    width: 100%;
}

.c-banner__person {
    position: absolute;
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: var(--uw-radius-24);
    box-sizing: border-box;
    transition:
        transform 2s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 2s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-banner__person img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--uw-radius-24) - 3px);
    transition:
        filter 2s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-banner__person--top {
    top: 0;
    right: 50px;
}

.c-banner__person--middle {
    top: 90px;
    left: 0;
}

.c-banner__person--bottom {
    top: 180px;
    right: 0;
}

.c-banner__person.is-focus {
    transform: scale(1.035);
    z-index: 3;
    opacity: 1;
    box-shadow:
        0 0 0 1px var(--P700),
        0 0 18px color-mix(in srgb, var(--P700) 16%, transparent);
}

.c-banner__person.is-focus img {
    filter: brightness(1);
    opacity: 1;
}

.c-banner__person.is-mid {
    transform: scale(0.975);
    z-index: 2;
    opacity: 0.92;
    box-shadow: none;
}

.c-banner__person.is-mid img {
    filter: brightness(0.8);
    opacity: 0.92;
}

.c-banner__person.is-back {
    transform: scale(0.94);
    z-index: 1;
    opacity: 0.78;
    box-shadow: none;
}

.c-banner__person.is-back img {
    filter: brightness(0.62);
    opacity: 0.78;
}

@media (min-width: 992px) {
    .c-banner.l-split {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    }
}

/* =========================================================
   FAQ (Bricks nested accordion)
   Hook: .c-faq on the accordion element
========================================================= */

.c-faq {
    width: 100%;
}

/* each accordion item wrapper */
.c-faq .listening {
    border-bottom: 1px solid var(--G600);
}

/* clickable title row */
.c-faq .accordion-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uw-space-24);

    padding-block: var(--uw-space-24);
    padding-inline: 0;

    background: transparent;
}

/* title styling */
.c-faq .accordion-title-wrapper .brxe-heading {
    margin: 0;
    font-weight: var(--uw-fw-600);
}

/* plus icon */
.c-faq .accordion-title-wrapper svg {
    flex: 0 0 auto;
    transition: transform 0.18s ease;
}

/* open state = turn + into x (rotate 45deg) */
.c-faq .accordion-title-wrapper[aria-expanded='true'] svg {
    transform: rotate(45deg);
}

/* content spacing */
.c-faq .accordion-content-wrapper {
    padding: 0 0 var(--uw-space-24) 0;
    background: transparent;
}

.c-faq .accordion-content-wrapper .brxe-text p {
    margin: 0;
    color: var(--G100);
}

/* FAQ spacing fix: 8px between title and content */
.c-faq .accordion-title-wrapper {
    padding-top: var(--uw-space-24);
    padding-bottom: var(--uw-space-24);
}

/* When open: keep 24px top, reduce bottom to 8px */
.c-faq .accordion-title-wrapper[aria-expanded='true'] {
    padding-bottom: var(--uw-space-8);
}

/* Content: add 8px breathing room from title, keep 24px at bottom */
.c-faq .accordion-content-wrapper {
    padding-top: var(--uw-space-8);
    padding-bottom: var(--uw-space-24);
}

/* =========================================================
   ADD-ON: Utilities needed for new templates
   (append at bottom of locked CSS)
========================================================= */

/* Button min-width utility */
.u-minw-178 {
    min-width: 178px;
}

/* Card modifier: remove c-card min-height when not desired */
.c-card--no-minh {
    min-height: 0;
}

/* Flex child utilities (added 2026-07-07)
   l-split is fixed 50/50; these enable asymmetric rows:
   .u-grow       → child fills remaining space (min-width: 0
                   allows shrinking below content width)
   .u-no-shrink  → child keeps its natural content width
   Also: force system gap on l-row/l-cluster (the existing
   force rule only covered l-stack, so v-gap-* had no effect
   on rows against the Bricks default gap). */

.u-grow {
    flex: 1 1 0;
    min-width: 0;
}

.u-no-shrink {
    flex: 0 0 auto;
}

/* Icon follows the surrounding text color — overrides hardcoded
   fill attributes baked into SVGs (e.g. Material icons export
   fill="#1f1f1f"). Apply directly to the Bricks icon element.
   Supersedes the per-component copies (.c-btn-link svg,
   .c-ds-card__cta svg path, .c-prod-card__cta svg path) —
   candidates for cleanup once migrated. */
svg.u-icon-current,
.u-icon-current svg,
svg.u-icon-current path,
.u-icon-current svg path {
    fill: currentColor;
}

/* Screen-centered hero (v2 — padding compensation).
   Apply .u-vcenter-screen to the hero section (on top of
   l-section): its content lands at the exact vertical center
   of the initial viewport (svh). The bottom padding equals the
   page chrome above the section (header + breadcrumb), which
   shifts the flex center up to true 50svh WITHOUT moving any
   painted layers — v1 used transform, which pushed pattern
   backgrounds (u-pattern-*) over the breadcrumbs. Do not
   reintroduce transforms here.
   UPDATE the chrome values if header/breadcrumb heights change.
   Works with pattern backgrounds and content of any height
   (grows downward). */
:root {
    --uw-page-chrome: 228px; /* 24 header margin + 84 header + 120 breadcrumb */
}

@media (max-width: 767px) {
    :root {
        /* 24 header margin + 64 header + 120 breadcrumb block —
           breadcrumb is single-line on mobile now (current-page
           crumb hidden). Calculated, not device-measured:
           spot-check on a real phone once deployed. */
        --uw-page-chrome: 208px;
    }
}

body .l-section.u-vcenter-screen {
    min-height: calc(100svh - var(--uw-page-chrome));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 0 var(--uw-page-chrome);
}

body .l-row,
body .l-cluster {
    gap: var(--gap, var(--uw-space-24));
}

/* =========================================================
   Certifications card (matches Figma layout)
   - Total height: 568
   - Media: 200 (logo band)
   - Body padding already from .c-card__body (24 desktop / 16 mobile)
   - Internal body spacing handled by l-stack + v-gap-16
========================================================= */
.c-cert-card {
    height: 568px;
}

/* Top media band */
.c-cert-card__media {
    height: 200px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CTA: lock to content, left aligned, Figma height */
.c-cert-card__cta {
    height: 24px;
    align-self: flex-start;
    width: fit-content;
    justify-content: flex-start;
}

/* Bricks can sneak padding into “button” elements: hard stop for text buttons */
body .brxe-button.c-btn.c-btn-text {
    padding: 0;
    min-height: 0;
    height: auto;
}

/* =========================================================
   CERTIFICATIONS CARD (matches Figma)
   - Card: fixed height 568
   - Media band: 200px, no padding (frame image fills it)
   - Body: fills remaining height
   - CTA: pinned to bottom
========================================================= */

/* Text buttons should not inherit pill radius */
.c-btn.c-btn-text {
    border-radius: 0;
}

/* The certification card */
.c-cert-card {
    height: 568px; /* all 3 equal height */
    display: flex; /* make card a flex column */
    flex-direction: column;
}

/* Media band */
.c-cert-card__media {
    height: 200px;
    padding: 0; /* IMPORTANT: no padding for frame images */
    overflow: hidden;
}

/* Frame image fills the band */
.c-cert-card__media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* safe even if image ratios vary */
    object-position: center;
    border-radius: 12px 12px 0 0px;
}

/* Body fills remaining height */
.c-cert-card .c-card__body {
    flex: 1; /* takes remaining space under media */
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* Let description be the flexible area */
.c-cert-card__desc {
    flex: 1;
}

/* CTA pinned to bottom-left */
.c-cert-card__cta {
    margin-top: auto; /* pushes CTA to bottom */
    align-self: flex-start;
    color: var(--G50); /* white text like Figma */
}

/* Make svg follow text color (optional but recommended) */
.c-cert-card__cta svg,
.c-cert-card__cta svg path {
    fill: currentColor;
}

/* =========================================================
   Cert card CTA: no border + left aligned content
   (Overrides base .c-btn centering + 1px border)
========================================================= */
body .c-cert-card__cta.c-btn,
body .brxe-button.c-cert-card__cta.c-btn {
    justify-content: flex-end; /* not centered */
    border: 0; /* kill the 1px */
    padding: 0; /* keep it “link” style */
    border-radius: 0; /* no pill shape */
    background: transparent;
    min-height: 0;
    height: auto;
    width: fit-content; /* keeps it tight (min-width still applies) */
    align-self: flex-start; /* ensures it sits left in stacks */
}

/* =========================
   TEAM CARD (Figma)
   ========================= */

/* Card */
.c-team-card {
    position: relative;
    height: 348px; /* Figma */
    padding: var(--uw-space-8);
    border-radius: var(--uw-radius-12);
    overflow: hidden;
    display: flex;
    align-items: flex-end; /* meta sits at bottom */
    justify-content: flex-end;
    background: var(--G700); /* fallback if image fails */
}

/* Image becomes background */
.c-team-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Meta overlay */
.c-team-card__meta {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 66px; /* Figma */
    padding: var(--uw-space-8);
    border-radius: var(--uw-radius-12);
    background: rgba(18, 18, 18, 0.8); /* #121212 @ 80% */
    display: flex;
    align-items: start;
}

/* Your name/role stack gap = 4px (since v-gap-4 doesn’t exist) */
.c-team-card__text {
    --gap: var(--uw-space-4);
}

/* Typography (works with your existing text--600 / text--s usage) */
.c-team-card__meta .text--600 {
    font-weight: var(--uw-fw-600);
    color: var(--G50);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
}

.c-team-card__meta .text--s {
    font-weight: 400;
    color: var(--G100);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
}

/* =========================================================
   Text Block (TOC + Content) – matches Text Block.pdf
   Left TOC + right content + bottom meta row
========================================================= */

/* Use existing l-split, but make it "TOC fixed / content fluid" on desktop */
@media (min-width: 992px) {
    .c-textblock {
        grid-template-columns: 280px minmax(0, 1fr);
        align-items: start;
    }
}

/* TOC column */
.c-textblock__toc {
    width: 100%;
}

@media (min-width: 992px) {
    .c-textblock__toc {
        position: sticky;
        top: var(--uw-space-128);
        align-self: start;
    }
}

/* Bricks TOC styling */
.c-textblock__toc .toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-12);
}

.c-textblock__toc .toc-link {
    text-decoration: none;
    color: var(--G100);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
}

.c-textblock__toc .toc-link:hover {
    color: var(--G50);
}

.c-textblock__toc .toc-list-item.is-active-li > .toc-link,
.c-textblock__toc .toc-link.is-active-link {
    color: var(--P700);
    font-weight: var(--uw-fw-500);
}

/* Checklist list in the content area (title + description) */
.c-textblock .brxe-list.display--list-item {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-16);
}

.c-textblock .brxe-list.display--list-item > li {
    margin: 0;
    padding: 0;
}

.c-textblock .brxe-list.display--list-item > li .content {
    display: flex;
    align-items: center;
    gap: var(--uw-space-8);
}

.c-textblock .brxe-list.display--list-item > li .description {
    margin-top: var(--uw-space-8);
    margin-left: calc(20px + var(--uw-space-8));
}

/* Bottom meta row: "20 min read" + socials */
.c-textblock__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uw-space-24);
}

.c-textblock__meta .brxe-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Text Block split: 1/3 + 2/3 */
@media (min-width: 992px) {
    .c-textblock {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        align-items: start;
    }
}

/* Offset for anchor jumps inside the text block */
.c-textblock {
    --toc-offset: 200px;
}

.c-textblock__content :is(h2, h3, h4) {
    scroll-margin-top: var(--toc-offset);
}

/* =========================================================
   Text Block (TOC + Content)
   - Desktop: 1/3 + 2/3
   - TOC item gap: 12px
   - Sticky offset + scroll offset: 200px
========================================================= */

.c-textblock {
    --toc-offset: 200px;
}

/* 1/3 + 2/3 beats the default .l-split 1/1 */
@media (min-width: 992px) {
    .c-textblock.l-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        align-items: start;
    }
}

/* Sticky TOC, starting 200px from top */
@media (min-width: 992px) {
    .c-textblock__toc .brxe-post-toc {
        position: sticky;
        top: var(--toc-offset);
        max-height: calc(100vh - var(--toc-offset));
        overflow: auto;
    }
}

/* Clicking TOC: stop ~200px from top */
.c-textblock__content :is(h2, h3, h4) {
    scroll-margin-top: var(--toc-offset);
}

/* TOC list reset + 12px spacing */
.c-textblock__toc .toc-list {
    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
    flex-direction: column;
    gap: var(--uw-space-12);
}

/* If a list item contains a nested toc-list, give it a 12px separation */
.c-textblock__toc .toc-list-item > .toc-list {
    margin-top: var(--uw-space-12);
    padding-left: var(--uw-space-12); /* optional indent for H4 */
}

/* Link styling */
.c-textblock__toc .toc-link {
    text-decoration: none;
    color: var(--G50);
}

.c-textblock__toc .toc-link:hover {
    color: var(--P700);
}

/* Active */
.c-textblock__toc .toc-link.is-active-link {
    color: var(--P700);
}

/* =========================================================
   Blog section + blog card (component)
   FINAL (no duplicates)
   - Matches Blog.pdf
   - 2-col grid on desktop, 1-col on mobile (via l-grid-fixed + v-cols-2)
   - Media always shows (no absolute positioning needed)
========================================================= */

/* Header */
.c-blog__header {
    align-items: center;
    text-align: center;
}

/* “See All →” behaves like a link (NOT a button) */
body .c-blog__seeall {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--uw-space-8);

    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;

    color: var(--G50);
    text-decoration: none;

    width: fit-content;
    height: auto;
    min-height: 0;

    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    font-weight: var(--uw-fw-500);
}
body .c-blog__seeall:hover {
    color: var(--G200);
}
body .c-blog__seeall svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Grid wrapper */
.c-blog__grid {
    width: 100%;
}

/* Card shell */
.c-blog-card {
    background: var(--G700);
    border-radius: var(--uw-radius-12);
    padding: var(--uw-space-12);

    display: flex;
    flex-direction: column;
    gap: var(--uw-space-12);

    text-decoration: none;
    color: inherit;

    position: relative; /* needed for u-border-grad */
    overflow: hidden; /* keeps corners clean */
}

/* Equal card heights on tablet/desktop (Figma: 391px) */
@media (min-width: 768px) {
    .c-blog-card {
        height: 391px;
    }
}

/* Media frame (Figma: 436x237 inside the 12px padded card) */
.c-blog-card__media {
    position: relative;
    height: 237px;
    border-radius: var(--uw-radius-8);
    overflow: hidden;
    padding: 0;

    /* if Bricks ever uses background-image here */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    background-color: var(--G600); /* fallback */
}

/* Image: keep it IN FLOW so it always shows */
.c-blog-card__media > img,
.c-blog-card__media .brxe-image,
.c-blog-card__img {
    width: 436px;
    height: 100%;
    max-width: none;
    display: block;

    object-fit: cover;
    object-position: center;
}

/* Optional tag pill (inside media, top-left) */
.c-blog-card__tag {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 2px 8px;
    height: 28px;

    border-radius: var(--uw-radius-pill);
    background: var(--tag-bg, var(--P200));
    color: var(--tag-fg, var(--P900));

    font-weight: var(--uw-fw-600);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    white-space: nowrap;
}

/* Variable tag variants (vars only) */
.v-tag--whitepaper {
    --tag-bg: var(--P200);
    --tag-fg: var(--P900);
}
.v-tag--news {
    --tag-bg: var(--R100);
    --tag-fg: var(--R800);
}

/* Body stack under media */
.c-blog-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-12);
    flex: 1;
    min-height: 0;
}

/* Remove default Bricks margins that can wreck vertical rhythm */
.c-blog-card__title,
.c-blog-card__date,
.c-blog-card__body .post-meta {
    margin: 0;
}

/* Date (your markup already has c-blog-card__date) */
.c-blog-card__date {
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    color: var(--G200);
}

/* Title */
.c-blog-card__title {
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    font-weight: var(--uw-fw-600);
    color: var(--G50);

    /* keep cards visually even with longer titles */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Author row (your markup uses .post-meta) pinned to bottom */
.c-blog-card__body .post-meta {
    margin-top: auto;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: var(--uw-fw-500);
    color: var(--G100);
}

/* =========================================================
   CONTACT SECTION (c-contact)
   Matches Contact Us.pdf layout
========================================================= */

/* Split: make right column larger on desktop */
@media (min-width: 992px) {
    .c-contact.l-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        align-items: start;
    }
}

/* Left column */
.c-contact__info .brxe-heading {
    text-align: left;
}
.c-contact__info .brxe-text-basic {
    text-align: left;
}

/* Contact list spacing + alignment */
.c-contact__list {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-16);
    margin-top: var(--uw-space-8);
}
.c-contact__list .content {
    display: inline-flex;
    align-items: center;
    gap: var(--uw-space-12);
}
.c-contact__list .icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}
.c-contact__list a {
    color: inherit;
    text-decoration: none;
}
.c-contact__list a:hover {
    color: var(--G200);
}

/* =========================================================
   FORM (c-form) – 2 columns desktop, 1 column mobile
========================================================= */
.c-form {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--uw-space-24);
}

@media (min-width: 768px) {
    .c-form {
        grid-template-columns: 1fr 1fr;
    }
}

/* Each form-group behaves as a grid item */
.c-form .form-group {
    margin: 0; /* kill any theme spacing */
}

/* Make textarea row full width (modern browsers) */
@supports (selector(:has(*))) {
    .c-form .form-group:has(textarea) {
        grid-column: 1 / -1;
    }
}

/* Submit row full width */
.c-form .submit-button-wrapper {
    grid-column: 1 / -1;
    margin-top: var(--uw-space-24);
    height: 48px;
}

/* Labels */
.c-form label {
    display: block;
    margin-bottom: var(--uw-space-8);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    color: var(--G200);
    font-weight: 400;
}

/* Inputs + textarea */
.c-form input,
.c-form textarea {
    width: 100%;
    background: var(--G700);
    color: var(--G50);

    border: 1px solid var(--G600);
    border-radius: var(--uw-radius-12);

    padding: var(--uw-space-16);
    outline: none;
    box-shadow: none;
}

.c-form textarea {
    min-height: 200px;
    resize: vertical;
}

/* Placeholder */
.c-form input::placeholder,
.c-form textarea::placeholder {
    color: var(--G400);
}

/* Focus */
.c-form input:focus,
.c-form textarea:focus {
    border-color: var(--P700);
    box-shadow: 0 0 0 2px rgba(27, 215, 97, 0.18);
}

/* Submit button (big green bar) */
.c-form button.bricks-button {
    width: 100%;
    min-height: 48px;
    max-height: 48px;
    border: 0; /* no 1px border */
    border-radius: var(--uw-radius-pill);

    background: var(--P700);
    color: var(--G800);

    font-weight: var(--uw-fw-500);
    font-size: var(--btn-font-size);
    line-height: var(--btn-line-height);

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.c-form button.bricks-button:hover {
    background: var(--P500);
}

/* =========================================================
   Contact section (component) – matches Contact Us.pdf
   - 1/3 info + 2/3 form (desktop)
   - form: 2-col grid, textarea full width, big pill submit
========================================================= */

/* --- Layout split: 1/3 + 2/3 --- */
@media (min-width: 992px) {
    body .c-contact {
        display: grid; /* override any flex from l-split */
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--uw-space-96); /* feels like the PDF spacing */
        align-items: start;
    }
}

/* Mobile: stack */
@media (max-width: 991px) {
    body .c-contact {
        display: flex;
        flex-direction: column;
        gap: var(--uw-space-48);
    }
}

/* --- Left column spacing + contact list --- */
body .c-contact__info {
    align-items: flex-start;
}

body .c-contact__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-8);
}

body .c-contact__list .content {
    display: flex;
    align-items: center;
    gap: var(--uw-space-16);
}

body .c-contact__list .icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
}

body .c-contact__list a {
    color: var(--G50);
    text-decoration: none;
}

body .c-contact__list a:hover {
    color: var(--G200);
}

/* --- Form grid --- */
body .c-contact__form-el {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--uw-space-24);
    width: 100%;
    align-items: start;
}

/* Make each form-group “grid item” behave nicely */
body .c-contact__form-el .form-group {
    margin: 0; /* kill any theme margins */
}

/* Textarea group full width */
body .c-contact__form-el .form-group:has(textarea),
body .c-contact__form-el .form-group.submit-button-wrapper {
    grid-column: 1 / -1;
}

/* --- Labels (PDF style: uppercase, subtle) --- */
body .c-contact__form-el label {
    display: block;
    margin: 0 0 var(--uw-space-8) 0;
    color: var(--G200);
    font-weight: var(--uw-fw-500);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    letter-spacing: 0.08em;
}

/* --- Inputs + textarea (dark fields, rounded, bordered) --- */
body .c-contact__form-el input,
body .c-contact__form-el textarea {
    width: 100%;
    background: var(--G700);
    color: var(--G50);
    border: 1px solid var(--G600);
    border-radius: var(--uw-radius-12);
    padding: 14px 16px;
    outline: none;
}

/* Input height like the PDF boxes */
body .c-contact__form-el input {
    min-height: 52px;
}

/* Textarea size like the PDF */
body .c-contact__form-el textarea {
    min-height: 120px;
    padding: 12px;
    resize: vertical;
}

/* Placeholder tone */
body .c-contact__form-el input::placeholder,
body .c-contact__form-el textarea::placeholder {
    color: var(--G400);
}

/* Focus */
body .c-contact__form-el input:focus,
body .c-contact__form-el textarea:focus {
    border-color: var(--G500);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--P700) 35%, transparent);
}

/* --- Submit button: full-width green pill --- */
body .c-contact__form-el .submit-button-wrapper button.bricks-button {
    width: 100%;
    min-height: 72px;
    border: 0;
    border-radius: var(--uw-radius-pill);
    background: var(--P700);
    color: var(--G800);
    font-weight: var(--uw-fw-500);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--uw-space-24);
}

body .c-contact__form-el .submit-button-wrapper button.bricks-button:hover {
    background: var(--P500);
}

/* =========================================================
   Contact section (PDF match)
   Hooks: .c-contact + .c-form--contact
========================================================= */

/* 2-col layout + ratio */
body .c-contact {
    width: 100%;
    display: grid;
    gap: var(--gap, var(--uw-space-48));
    align-items: start;
}

@media (min-width: 992px) {
    body .c-contact {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); /* info | form */
    }
}

/* Contact list */
body .c-contact__list,
body .c-contact__list .brxe-list {
    margin: 0;
    padding: 0;
}

body .c-contact__list li .content {
    display: flex;
    align-items: center;
    gap: var(--uw-space-12);
}

body .c-contact__list .icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--G200);
}

body .c-contact__list .icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

body .c-contact__list a {
    color: var(--G50);
    text-decoration: none;
}
body .c-contact__list a:hover {
    color: var(--G200);
}

/* =========================================================
   Bricks form override (kills flex + per-field padding/width)
========================================================= */

body form.brxe-form.c-form--contact {
    width: 100%;
    display: grid; /* overrides Bricks flex */
    grid-template-columns: 1fr;
    gap: var(--uw-space-24);
    align-items: start;
}

@media (min-width: 768px) {
    body form.brxe-form.c-form--contact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Each field group becomes a small stack */
body .c-contact form.brxe-form.c-form--contact .form-group {
    margin: 0;
    padding: 0; /* kills Bricks “0 0 20px” padding */
    width: auto; /* kills old “width:50%” hacks */
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-8); /* label -> input gap */
}

/* Textarea row spans full width */
body .c-contact form.brxe-form.c-form--contact .form-group:has(textarea),
body .c-contact form.brxe-form.c-form--contact .submit-button-wrapper {
    grid-column: 1 / -1;
}

/* Labels (uppercase like the PDF) */
body .c-contact form.brxe-form.c-form--contact label {
    margin: 0;
    font-weight: 400;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    color: var(--G200);
    letter-spacing: 0.08em;
    text-transform: none;
}

/* Inputs */
body .c-contact form.brxe-form.c-form--contact input,
body .c-contact form.brxe-form.c-form--contact textarea {
    width: 100%;
    border-radius: var(--uw-radius-12);
    border: 1px solid var(--G600);
    color: var(--G50);

    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    background-color: var(--G800);

    padding: 8px 12px;
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
}

body .c-contact form.brxe-form.c-form--contact input::placeholder,
body .c-contact form.brxe-form.c-form--contact textarea::placeholder {
    color: var(--G500);
}

body .c-contact form.brxe-form.c-form--contact input:focus,
body .c-contact form.brxe-form.c-form--contact textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--P700) 45%, transparent);
    outline-offset: 2px;
}

/* Textarea sizing (PDF has a big box) */
body .c-contact form.brxe-form.c-form--contact textarea {
    min-height: 120px;
    resize: vertical;
}

body .c-contact form.brxe-form.c-form--contact button[type='submit'] {
    width: 100%;
    min-height: 48px;
    border-radius: var(--uw-radius-pill);
    border: 0; /* no 1px border */
    background: var(--P700);
    color: var(--G800);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-weight: var(--uw-fw-500);
}
body .c-contact form.brxe-form.c-form--contact button[type='submit']:hover {
    background: var(--P500);
}

/* =========================================================
   Compare Plans (c-compare)
   - Append-only component styles
   - Uses existing tokens: --G*, --P*, --R*, --uw-space-*
========================================================= */

.c-compare__table {
    background: var(--G800);
    border: 1px solid var(--G600);
    border-radius: var(--radius, var(--uw-radius-24));
    overflow-x: auto; /* mobile: allow horizontal scroll */
    -webkit-overflow-scrolling: touch;
}

/* Inner sets the minimum “table width” so scroll actually happens */
.c-compare__inner {
    min-width: 820px; /* tweak if you want tighter */
}

/* Each row is a 4-col grid */
.c-compare__row {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

/* Row separators */
.c-compare__row + .c-compare__row {
    border-top: 1px solid var(--G600);
}

/* Cells */
.c-compare__cell {
    padding: var(--uw-space-16) var(--uw-space-24);
    min-width: 0;
    align-content: center;
}

.c-compare__cell--feature {
    text-align: left;
    font-weight: var(--uw-fw-600);
    color: var(--G50);
}

.c-compare__cell--plan {
    text-align: center;
    color: var(--G100);
}

/* Plan header stack */
.c-compare__planhead {
    align-items: center; /* centers text + button inside the cell */
}

.c-compare__planname {
    margin: 0;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: var(--uw-fw-600);
    color: var(--G50);
}

/* Icons */
.c-compare__icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    color: var(--G100); /* fallback */
}
.c-compare__icon--yes {
    color: var(--P700);
}
.c-compare__icon--no {
    color: var(--R700);
}

/* Vertical separators ONLY on compare rows (not header row) */
.c-compare__row:not(.c-compare__row--head) .c-compare__cell + .c-compare__cell {
    border-left: 1px solid var(--G600);
}

/* Slightly tighter padding on mobile (table still scrolls) */
@media (max-width: 767px) {
    .c-compare__cell {
        padding: var(--uw-space-12) var(--uw-space-16);
    }
}

@layer uw-vars {
    .v-btn-sm {
        --btn-py: 8px;
        --btn-px: 12px;
        --btn-font-size: var(--text-s);
        --btn-line-height: var(--text-s-line-height);
    }
  .v-tabs-tab-bg-700 {
    --tabs-tab-bg: var(--G700);
  }
  .v-tabs-tab-bg-800 {
    --tabs-tab-bg: var(--G800);
  }
}

/* =========================================================
   Success Stories
   - CSS aligned to current Bricks markup
   - Featured card + 3 supporting cards
========================================================= */

/* Intro area */
.c-success-story-card-grid{
  width: 100%;
}

.c-success-story-card-grid > *{
  min-width: 0;
}

/* Top intro CTA */
.brxe-rntyth > .c-btn.c-btn-text{
  align-self: center;
  width: fit-content;
}

/* =========================================================
   Featured card
========================================================= */

.c-success-story-card--featured{
  min-height: 0;
  padding: var(--uw-space-24);
}

.c-success-story-card--featured > .l-split{
  align-items: stretch;
}

@media (min-width: 992px){
  .c-success-story-card--featured > .l-split{
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
    gap: var(--uw-space-24);
  }
}

/* Featured card inner content column */
.c-success-story-card--featured .c-success-story-card__content{
  min-width: 0;
  justify-content: space-between;
  height: 100%;
  text-align: left;
  align-items: flex-start;
}

/* The nested copy stack */
.c-success-story-card--featured .c-success-story-card__content > .l-stack{
  min-width: 0;
  text-align: left;
  align-items: flex-start;
}

/* Featured logo */
.c-success-story-card--featured .c-success-story-card__content > .l-stack > img{
  display: block;
  width: auto;
  max-width: 132px;
  height: auto;
  max-height: 48px;
  border-radius: 0;
}

/* Featured title */
.c-success-story-card--featured h4{
  margin: 0;
  text-align: left;
}

/* Featured description */
.c-success-story-card--featured .u-text-muted,
.c-success-story-card--featured .u-text-muted p{
  margin: 0;
  color: var(--G100);
  text-align: left;
}

/* Featured CTA */
.c-success-story-card--featured .c-btn.c-btn-text{
  align-self: flex-start;
  width: fit-content;
  justify-content: flex-start;
  color: var(--G50);
}

.c-success-story-card--featured .c-btn.c-btn-text:hover{
  color: var(--G200);
}

.c-success-story-card--featured .c-btn svg,
.c-success-story-card--featured .c-btn svg path{
  fill: currentColor;
}

/* Featured media */
.c-success-story-card--featured .c-success-story-card__media{
  width: 100%;
  min-width: 0;
  height: 100%;
}

.c-success-story-card--featured .c-success-story-card__media > img,
.c-success-story-card--featured .c-success-story-card__media .brxe-image,
.c-success-story-card--featured .c-success-story-card__media picture img{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--uw-radius-12);
}

/* =========================================================
   Supporting cards
========================================================= */

.c-success-story-card-grid .c-success-story-card{
  min-height: 0;
  height: 100%;
}

@media (min-width: 768px){
  .c-success-story-card-grid .c-success-story-card{
    min-height: 192px;
  }
}

.c-success-story-card-grid .c-card__body{
  padding: var(--uw-space-16);
  min-height: 100%;
  justify-content: space-between;
  text-align: left;
  align-items: flex-start;
}

/* top stack in each small card */
.c-success-story-card-grid .c-card__body > .l-stack{
  min-width: 0;
  text-align: left;
  align-items: flex-start;
}

/* small card logos */
.c-success-story-card-grid .c-card__body > .l-stack > img{
  display: block;
  width: auto;
  max-width: 116px;
  height: auto;
  max-height: 40px;
  border-radius: 0;
}

/* small card titles */
.c-success-story-card-grid h4{
  margin: 0;
  text-align: left;
}

/* small card CTA */
.c-success-story-card-grid .c-btn.c-btn-text{
  align-self: flex-start;
  width: fit-content;
  justify-content: flex-start;
  color: var(--G50);
}

.c-success-story-card-grid .c-btn.c-btn-text:hover{
  color: var(--G200);
}

.c-success-story-card-grid .c-btn svg,
.c-success-story-card-grid .c-btn svg path{
  fill: currentColor;
}

/* =========================================================
   Left-align safety
   Prevent parent centering contexts from leaking in
========================================================= */

.c-success-story-card,
.c-success-story-card .c-card__body,
.c-success-story-card .l-stack,
.c-success-story-card h4,
.c-success-story-card .brxe-text-basic{
  text-align: left;
}

.c-success-story-card .c-card__body,
.c-success-story-card .l-stack{
  align-items: flex-start;
}

/* =========================================================
   Our Story (c-story + c-timeline) – FINAL (single block)
========================================================= */

/* =========================================================
   Our Story (c-story + c-timeline) – fixed
   Root fix: re-clamp timeline wrapper to 716px
========================================================= */

.c-story {
  background: radial-gradient(
    120% 90% at 50% 0%,
    var(--G700) 0%,
    var(--G800) 65%
  );
}

/* Timeline wrapper */
body .c-story .brxe-container.c-timeline,
body .c-story .c-timeline {
  position: relative;
  width: 100%;
  max-width: 716px;
  margin-inline: auto;
  padding-top: 80px;
  align-items: stretch;

  /* spacing between items */
  gap: 80px;

  /* geometry (Figma) */
  --tl-dot: 16px;
  --tl-gap-content: 37px;
  --tl-year-pad: 91px;
  --tl-line: 64px;
  --tl-gap-dot-line: 11px;
}

/* Center dashed line */
.c-story .c-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-0.5px);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--G50) 0 12px,
    transparent 12px 24px
  );
}

/* Each item: two halves */
.c-story .c-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  width: 100%;
}

/* YEAR default = left side */
.c-story .c-timeline__year {
  grid-column: 1;
  justify-self: end;
  width: fit-content;
  padding-right: var(--tl-year-pad);
  text-align: right;
}

/* Force year to green */
.c-story .c-timeline__year > .brxe-heading,
.c-story .c-timeline__year > h1,
.c-story .c-timeline__year > h2,
.c-story .c-timeline__year > h3,
.c-story .c-timeline__year > h4 {
  color: var(--P700);
  font-size: var(--h3);
  line-height: var(--h3-line-height);
  font-weight: var(--uw-fw-600);
  margin: 0;
}

/* CONTENT default = right side */
.c-story .c-timeline__content {
  grid-column: 2;
  justify-self: start;
  width: min(100%, 314px);
  min-width: 0;
  padding-left: calc((var(--tl-dot) / 2) + var(--tl-gap-content));
  text-align: left;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--uw-space-8);
}

.c-story .c-timeline__title {
  width: 100%;
  margin: 0;
  font-size: var(--h3);
  line-height: var(--h3-line-height);
  font-weight: var(--uw-fw-600);
  color: var(--G50);
  text-align: left;
}

.c-story .c-timeline__desc {
  width: 100%;
  margin: 0;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
  color: var(--G100);
  text-align: left;
}

/* DOT: centered on timeline */
.c-story .c-timeline__dot {
  grid-column: 1 / -1;
  grid-row: 1;
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--tl-dot);
  height: var(--tl-dot);
  border-radius: 999px;
  background: var(--P700);
  transform: translateX(-50%);
  margin-top: calc((var(--h3-line-height) - var(--tl-dot)) / 2);
  z-index: 1;
}

/* odd rows: connector to the left */
.c-story .c-timeline__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + var(--tl-gap-dot-line));
  width: var(--tl-line);
  border-top: 1px solid var(--G50);
  transform: translateY(-50%);
}

.c-story .c-timeline__dot::after {
  content: "";
  display: none;
}

/* EVEN rows: swap sides */
.c-story .c-timeline__item:nth-child(even) .c-timeline__year {
  grid-column: 2;
  justify-self: start;
  padding-right: 0;
  padding-left: var(--tl-year-pad);
  text-align: left;
}

.c-story .c-timeline__item:nth-child(even) .c-timeline__content {
  grid-column: 1;
  justify-self: end;
  width: min(100%, 314px);
  min-width: 0;
  padding-left: 0;
  padding-right: calc((var(--tl-dot) / 2) + var(--tl-gap-content));
  text-align: right;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: var(--uw-space-8);
}

.c-story .c-timeline__item:nth-child(even) .c-timeline__title,
.c-story .c-timeline__item:nth-child(even) .c-timeline__desc {
  text-align: right;
}

/* even rows: connector to the right */
.c-story .c-timeline__item:nth-child(even) .c-timeline__dot::before {
  display: none;
}

.c-story .c-timeline__item:nth-child(even) .c-timeline__dot::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: calc(100% + var(--tl-gap-dot-line));
  width: var(--tl-line);
  border-top: 1px solid var(--G50);
  transform: translateY(-50%);
}

/* Timeline content must start at the top of its cell */
.c-story .c-timeline__content {
  justify-content: flex-start;
}

/* Keep the mirrored alignment for even rows */
.c-story .c-timeline__item:nth-child(even) .c-timeline__content {
  justify-content: flex-start;
  align-items: flex-end;
}

/* =========================================================
   Calculator (c-calc)
   Component CSS (global stylesheet, append-only)
========================================================= */

.c-calc {
    /* optional background band */
    background: var(--G800);
}

/* Layout: left panel + right results */
.c-calc__layout {
    align-items: start;
    background: var(--G700);
    border-radius: var(--uw-radius-24, 24px);
}

.c-calc__section {
    min-width: 100%;
}

/* Panels */
.c-calc__panel {
    padding: var(--uw-space-24, 24px);
}

.c-calc__results {
    background: var(--G600);
    border-radius: var(--uw-radius-24, 24px);
    padding: var(--uw-space-24, 24px);
}

/* Generic states (scoped to calculator) */
.c-calc .is-hidden {
    display: none;
}
.c-calc .is-disabled {
    opacity: 0.55;
    pointer-events: none;
}
.c-calc .is-collapsed .c-calc__acc-body,
.c-calc .is-collapsed .c-calc__personal-body {
    display: none;
}

/* Section label */
.c-calc__label {
    font-weight: var(--uw-fw-600, 600);
    color: var(--G50);
    margin-bottom: var(--uw-space-12, 12px);
}

.c-calc__personal-body div {
    margin-bottom: 8px;
}

/* Toggle groups */
.c-calc__toggle,
.c-calc__deck-toggle {
    display: flex;
    gap: var(--uw-space-12, 12px);
    padding-bottom: var(--uw-space-16, 16px);
}

/* Make toggle pills match design (active green, inactive dark pill) */
.c-calc__toggle-btn.c-btn,
.c-calc__deck-btn.c-btn {
    /* overwrite any Bricks helper backgrounds */
    background: var(--G600);
    color: var(--G50);
    border: 1px solid transparent;
    border-radius: var(--uw-radius-pill, 999px);
    padding: 8px 16px;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
}

/* Active state = green pill */
.c-calc__toggle-btn.is-active,
.c-calc__deck-btn.is-active {
    background: var(--P700);
    color: var(--G800);
}

/* If Bricks forces background via helper classes, this wins */
.c-calc__toggle .bricks-background-primary,
.c-calc__deck-toggle .bricks-background-primary {
    background: inherit;
}

/* Dividers between accordion sections */
.c-calc__section + .c-calc__rail,
.c-calc__rail + .c-calc__bus,
.c-calc__bus + .c-calc__personal {
    margin-top: var(--uw-space-16, 16px);
}

/* Accordion head */
.c-calc__acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--G50);
    font-weight: var(--uw-fw-600, 600);
    padding: var(--uw-space-16, 16px) 0;
    border-top: 1px solid var(--G600);
}

/* Accordion body */
.c-calc__acc-body {
    padding-bottom: var(--uw-space-16, 16px);
}

/* Inputs grid */
.c-calc__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--uw-space-16, 16px);
    margin-top: var(--uw-space-16, 16px);
}

/* Field label */
.c-calc__field > .brxe-text-basic {
    color: var(--G200);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    margin-bottom: var(--uw-space-8, 8px);
}

/* Inputs */
.c-calc__input {
    width: 100%;
    background: transparent;
    border: 1px solid var(--G600);
    border-radius: var(--uw-radius-12, 12px);
    padding: 12px 12px;
    color: var(--G50);
    outline: none;
}

.c-calc__input::placeholder {
    color: var(--G200);
}

/* Next + Calculate buttons (big white pill) */
.c-calc__next.c-btn,
.c-calc__calculate.c-btn {
    width: 100%;
    margin-top: var(--uw-space-16, 16px);

    /* make it the big pill style shown */
    background: var(--G50);
    color: var(--G800);
    border-radius: var(--uw-radius-pill, 999px);
    padding: 12px 16px;
    justify-content: center;
}

/* Personal info block */
.c-calc__personal {
    margin-top: var(--uw-space-16, 16px);
    padding-top: var(--uw-space-16, 16px);
}

.c-calc__personal > .brxe-text-basic {
    color: var(--G200);
    font-weight: var(--uw-fw-600, 600);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.c-calc__personal-body {
    margin-top: var(--uw-space-16, 16px);
    display: grid;
    gap: var(--uw-space-16, 16px);
}

/* ---------------------------------------------------------
   Right side (cards + inquire) for when you build it
--------------------------------------------------------- */

.c-calc__cards {
    display: grid;
    gap: var(--uw-space-16, 16px);
    min-width: 100%;
}

.c-calc__card {
    background: var(--G800);
    border: 1px solid var(--G600);
    border-radius: var(--uw-radius-24, 24px);
    padding: var(--uw-space-16, 16px);
    min-height: 192px;
}

/* top row */
.c-calc__cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.c-calc__cardtitle {
    font-weight: var(--uw-fw-600, 600);
    color: var(--G50);
}

.c-calc__badge {
    padding: 6px 12px;
    border-radius: var(--uw-radius-pill, 999px);
    background: var(--G600);
    color: var(--G50);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
}

.c-calc__badge.is-premium {
    background: var(--P700);
    color: var(--G800);
}

.c-calc__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--uw-space-16, 16px);
    width: 100%;
}

.c-calc__metriclabel {
    color: var(--G200);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    margin-bottom: 2px;
}

.c-calc__metricvalue {
    color: var(--G50);
    font-weight: var(--uw-fw-600, 600);
    font-size: 32px;
    line-height: 40px;
}

.c-calc__breakdown {
    color: var(--G200);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    text-decoration: underline;
    cursor: pointer;
}

.c-calc__inquire.c-btn {
    width: 100%;
    margin-top: var(--uw-space-16, 16px);
    background: var(--P700);
    color: var(--G800);
    border-radius: var(--uw-radius-pill, 999px);
    padding: 14px 16px;
    justify-content: center;
}

/* Chevron styling + rotate when collapsed */
.c-calc__acc-head .brxe-icon {
    width: 20px;
    height: 20px;
    flex: none;
    transition: transform 0.18s ease;
}

/* When the section is collapsed, chevron points down (default) */
.c-calc .is-collapsed .c-calc__acc-head .brxe-icon {
    transform: rotate(0deg);
}

/* When expanded, point up */
.c-calc__personal:not(.is-collapsed) .c-calc__acc-head .brxe-icon {
    transform: rotate(180deg);
}

.c-calc__metrics .c-calc__breakdown {
    grid-column: 1 / -1;
    margin-top: var(--uw-space-16, 16px);
}

/* Calculator breakdown modal */
.c-calc__modal {
    position: relative;
}
.c-calc__modal.is-hidden {
    display: none;
}

.c-calc__modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
}

.c-calc__modal__panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100% - 32px));
    background: var(--G800);
    border: 1px solid var(--G600);
    border-radius: var(--uw-radius-24, 24px);
    padding: var(--uw-space-24, 24px);
    z-index: 9999;
}

.c-calc__modal__close {
    width: 100%;
    margin-bottom: var(--uw-space-16, 16px);
    background: var(--G600);
    border: 0;
    border-radius: var(--uw-radius-pill, 999px);
    color: var(--G50);
    padding: 10px 16px;
    cursor: pointer;
}

.c-calc__modal-title {
    font-weight: var(--uw-fw-600, 600);
    color: var(--G50);
    margin-bottom: 8px;
}
.c-calc__modal-sub {
    color: var(--G200);
    margin-bottom: 16px;
}

.c-calc__modal-list {
    margin: 0;
    padding-left: 18px;
    color: var(--G200);
}
.c-calc__modal-list li {
    margin: 8px 0;
}

/* Locked criteria summary (after Next) */
.c-calc__summary {
    margin-top: var(--uw-space-24, 24px);
    display: grid;
    gap: var(--uw-space-12, 12px);
}

.c-calc__summary-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    color: var(--G200);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
}

.c-calc__summary-row strong {
    color: var(--G50);
    font-weight: var(--uw-fw-600, 600);
}

/* Make the “selected pill” feel fixed */
.c-calc__deck-btn.is-static {
    pointer-events: none;
}

/* Personal summary (after Calculate) */
.c-calc__personal-summary {
    margin-top: var(--uw-space-24, 24px);
    display: grid;
    gap: var(--uw-space-12, 12px);
}

/* Calculator selectable service cards */
[data-uw-calc="1"] [data-package-select] {
  cursor: pointer;
}

[data-uw-calc="1"] [data-package-select].is-selected {
  border-color: var(--P700) !important;
  box-shadow: 0 0 0 1px var(--P700);
}

[data-uw-calc="1"] [data-package-select]:focus-visible {
  outline: 2px solid var(--P700);
  outline-offset: 4px;
}

/* =========================================================
   Calculator package badge selection state
========================================================= */

/* Every unselected package badge */
.c-calc [data-package-select] .c-calc__badge {
    background: var(--G600);
    color: var(--G50);
}

/* Only the currently selected package badge */
.c-calc [data-package-select].is-selected .c-calc__badge {
    background: var(--P700);
    color: var(--G800);
}

/* =========================================================
   Calculator Fluent Forms inquiry popup
   Figma-aligned
========================================================= */

/* Bricks popup wrapper */
body .brx-popup-content:has(.c-calc-inquiry-popup) {
    width: auto;
    max-width: none;
    padding: 0;
    background: var(--G700);
}

/* Popup card */
body .c-calc-inquiry-popup {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    width: 780px;
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);

    padding: 24px;
    gap: 24px;

    margin-inline: auto;

    background: var(--G700);
    border-radius: 16px;

    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

/* =========================================================
   Header
========================================================= */

body .c-calc-inquiry-popup__header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    width: 100%;
    padding: 0;
    gap: 8px;
}

body .c-calc-inquiry-popup__header h2,
body .c-calc-inquiry-popup__header h3 {
    flex: 1 1 auto;

    margin: 0;

    color: var(--G50);

    font-family: inherit;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}

body .c-calc-inquiry-popup__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 24px;

    width: 24px;
    height: 24px;

    color: var(--G200);
    cursor: pointer;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

body .c-calc-inquiry-popup__close:hover {
    color: var(--G50);
    transform: rotate(90deg);
}

/* =========================================================
   Fluent Forms base
========================================================= */

body .c-calc-inquiry-popup__form,
body .c-calc-inquiry-popup .fluentform,
body .c-calc-inquiry-popup form.frm-fluent-form {
    width: 100%;
}

body .c-calc-inquiry-popup form.frm-fluent-form fieldset {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 24px;
    row-gap: 24px;

    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;
}

body .c-calc-inquiry-popup
form.frm-fluent-form
.ff-el-group {
    width: 100%;
    min-width: 0;
    margin: 0;
}

/* =========================================================
   Desktop field order
========================================================= */

body .c-calc-inquiry-popup
.ff-el-group:has([name="email"]) {
    grid-column: 1;
    grid-row: 1;
}

body .c-calc-inquiry-popup
.ff-el-group:has([name="company"]) {
    grid-column: 2;
    grid-row: 1;
}

body .c-calc-inquiry-popup
.ff-el-group:has([name="full_name"]) {
    grid-column: 1;
    grid-row: 2;
}

body .c-calc-inquiry-popup
.ff-el-group:has([name="phone"]) {
    grid-column: 2;
    grid-row: 2;
}

body .c-calc-inquiry-popup
.ff-el-group:has([name="message"]) {
    grid-column: 1 / -1;
    grid-row: 3;
}

body .c-calc-inquiry-popup
.ff-el-group:has([name="terms-n-condition"]) {
    grid-column: 1 / -1;
    grid-row: 4;
}

body .c-calc-inquiry-popup
form.frm-fluent-form
.ff_submit_btn_wrapper {
    display: flex;
    justify-content: flex-end;

    grid-column: 1 / -1;
    grid-row: 5;

    width: 100%;

    margin: 0;
}

/* =========================================================
   Labels
========================================================= */

body .c-calc-inquiry-popup
.ff-el-input--label {
    margin-bottom: 8px;
}

body .c-calc-inquiry-popup
.ff-el-input--label label {
    margin: 0;

    color: var(--G200);

    font-family: inherit;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
}

/* =========================================================
   Inputs
========================================================= */

body .c-calc-inquiry-popup
form.frm-fluent-form
.ff-el-form-control {
    display: block;

    width: 100%;
    min-width: 0;
    height: 48px;
    min-height: 48px;

    padding: 10px 8px;

    color: var(--G50);
    background: var(--G700);

    border: 1px solid var(--G600);
    border-radius: 8px;

    box-shadow: none;
    outline: none;

    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

body .c-calc-inquiry-popup
form.frm-fluent-form
.ff-el-form-control:focus {
    border-color: var(--P700);
    box-shadow: 0 0 0 1px var(--P700);
}

/* Readonly prefilled fields */
body .c-calc-inquiry-popup
form.frm-fluent-form
.ff-el-form-control[readonly] {
    color: var(--G50);
    background: var(--G700);

    border-color: var(--G600);

    opacity: 1;
    cursor: default;

    -webkit-text-fill-color: var(--G50);
}

/* Placeholder */
body .c-calc-inquiry-popup
form.frm-fluent-form
.ff-el-form-control::placeholder {
    color: var(--G400);
    opacity: 1;
}

/* Autofill */
body .c-calc-inquiry-popup
form.frm-fluent-form
input.ff-el-form-control:-webkit-autofill,
body .c-calc-inquiry-popup
form.frm-fluent-form
input.ff-el-form-control:-webkit-autofill:hover,
body .c-calc-inquiry-popup
form.frm-fluent-form
input.ff-el-form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--G50);
    -webkit-box-shadow:
        0 0 0 1000px var(--G700) inset;

    caret-color: var(--G50);
}

/* Textarea */
body .c-calc-inquiry-popup
form.frm-fluent-form
textarea.ff-el-form-control {
    height: 120px;
    min-height: 120px;

    padding: 10px 8px;

    resize: vertical;
}

/* =========================================================
   Phone field
========================================================= */

body .c-calc-inquiry-popup .iti {
    width: 100%;
}

body .c-calc-inquiry-popup
.iti__selected-country {
    background: transparent;
}

body .c-calc-inquiry-popup
.iti__country-list {
    color: var(--G800);
}

/* =========================================================
   Privacy field
========================================================= */

body .c-calc-inquiry-popup
.ff-el-form-check {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin: 0;
}

body .c-calc-inquiry-popup
.ff-el-form-check input[type="checkbox"] {
    flex: 0 0 24px;

    width: 24px;
    height: 24px;

    margin: 2px 0 0;

    accent-color: var(--P700);
}

body .c-calc-inquiry-popup
.ff-el-form-check-label,
body .c-calc-inquiry-popup
.ff-el-form-check-label p {
    margin: 0;

    color: var(--G200);

    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
}

body .c-calc-inquiry-popup
.ff-el-form-check-label strong {
    color: var(--G50);
    font-weight: 600;
}

body .c-calc-inquiry-popup
.ff-el-form-check-label a {
    color: var(--G50);

    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =========================================================
   Submit button
========================================================= */

body .c-calc-inquiry-popup
form.frm-fluent-form
.ff-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 268px;
    max-width: 100%;
    height: 48px;
    min-height: 48px;

    margin: 0;
    padding: 8px 16px;

    color: var(--G800);
    background: var(--P700);

    border: 0;
    border-radius: 100px;

    box-shadow: none;
    opacity: 1;

    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

body .c-calc-inquiry-popup
form.frm-fluent-form
.ff-btn-submit:hover {
    background: var(--P500);
    transform: translateY(-1px);
}

/* =========================================================
   Validation and messages
========================================================= */

body .c-calc-inquiry-popup
.ff-el-is-error
.ff-el-form-control {
    border-color: var(--R500);
}

body .c-calc-inquiry-popup
.error,
body .c-calc-inquiry-popup
.text-danger,
body .c-calc-inquiry-popup
.ff-el-is-error .error {
    color: var(--R500);

    font-size: 12px;
    line-height: 16px;
}

body .c-calc-inquiry-popup
.ff-message-success,
body .c-calc-inquiry-popup
.ff-errors-in-stack {
    grid-column: 1 / -1;

    width: 100%;
    margin: 0;
}

/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {
    body .c-calc-inquiry-popup {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);

        padding: 20px;
        gap: 20px;
    }

    body .c-calc-inquiry-popup
    form.frm-fluent-form
    fieldset {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }

    body .c-calc-inquiry-popup
    .ff-el-group:has([name="email"]),
    body .c-calc-inquiry-popup
    .ff-el-group:has([name="company"]),
    body .c-calc-inquiry-popup
    .ff-el-group:has([name="full_name"]),
    body .c-calc-inquiry-popup
    .ff-el-group:has([name="phone"]),
    body .c-calc-inquiry-popup
    .ff-el-group:has([name="message"]),
    body .c-calc-inquiry-popup
    .ff-el-group:has([name="terms-n-condition"]),
    body .c-calc-inquiry-popup
    form.frm-fluent-form
    .ff_submit_btn_wrapper {
        grid-column: 1;
        grid-row: auto;
    }

    body .c-calc-inquiry-popup
    form.frm-fluent-form
    .ff-btn-submit {
        width: 100%;
    }
}

/* =========================================================
   Calculator package selection indicator
========================================================= */

.c-calc [data-package-select] .c-calc__cardhead {
    gap: var(--uw-space-8);
}

.c-calc [data-package-select] .c-calc__cardtitle {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: var(--uw-space-8);

    flex: 1 1 auto;
    min-width: 0;
}

/* Unselected circle */
.c-calc [data-package-select] .c-calc__cardtitle::before {
    content: "";

    display: inline-flex;
    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    background: transparent;
    border: 1.5px solid var(--G200);
    border-radius: 50%;

    box-sizing: border-box;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}

/* Checkmark, hidden by default */
.c-calc [data-package-select] .c-calc__cardtitle::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 4px;

    width: 7px;
    height: 4px;

    border-left: 2px solid var(--G800);
    border-bottom: 2px solid var(--G800);

    opacity: 0;

    transform:
        translateY(-65%)
        rotate(-45deg);

    transition: opacity 0.18s ease;
}

/* Selected circle */
.c-calc
[data-package-select].is-selected
.c-calc__cardtitle::before {
    background: var(--P700);
    border-color: var(--P700);
}

/* Selected checkmark */
.c-calc
[data-package-select].is-selected
.c-calc__cardtitle::after {
    opacity: 1;
}

/* Keep badges from shrinking */
.c-calc [data-package-select] .c-calc__badge {
    flex: 0 0 auto;
}

/* =========================================================
   Events section + Event card (component)
   Matches Events.pdf (2-up grid, fixed card height, CTA pinned)
========================================================= */

/* Grid: prevent 3 columns in 944 content width */
.c-events__grid,
.brxe-hhmcce.l-grid {
    width: 100%;
}

/* Event card shell */
.c-event-card {
    background: var(--G700);
    border-radius: var(--uw-radius-12);
    padding: var(--uw-space-12);
    min-height: 600px; /* protect against any .c-card min-height rules */
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-24);
    overflow: hidden;
}

/* Media frame (top) */
.c-event-card__media {
    position: relative;
    height: 237px; /* Figma */
    border-radius: var(--uw-radius-8);
    overflow: hidden;

    /* if Bricks applies bg-image to the wrapper */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    /* fallback */
    background-color: var(--G600);
}

/* If Bricks outputs an <img> inside the media wrapper */
.c-event-card__media > img,
.c-event-card__media .brxe-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* Body area: takes remaining height */
.c-event-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-24);
    flex: 1;
    min-height: 0;
}

/* Optional: tighten title + description block (your HTML uses v-gap-16 already) */
.c-event-card__body h4 {
    margin: 0;
}

/* Meta list spacing (PDF has tight 8px rows) */
.c-event-card__body .c-checklist,
.c-event-card__body .c-list {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-0);
}

/* CTA pinned to bottom, outlined white (matches PDF button) */
.c-event-card__cta {
    margin-top: auto; /* push to bottom */
    align-self: flex-start; /* left aligned */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--uw-space-8);

    height: 48px;
    padding: 8px 16px;

    background: transparent;
    border: 1px solid var(--G50);
    border-radius: var(--uw-radius-pill);
    color: var(--G50);
    text-decoration: none;
}

/* Make sure no “button system” adds centering/full-width here */
.c-event-card__cta {
    width: fit-content;
}
.c-event-card__cta:hover {
    background: color-mix(in srgb, var(--G50) 10%, transparent);
}

/* Icon sizing */
.c-event-card__cta svg {
    width: 20px;
    height: 20px;
}

/* =========================================================
   Events card
   - Fixed 591px height (desktop)
   - CTA pinned to bottom
========================================================= */

.c-event-card {
    display: flex;
    flex-direction: column;
}

/* Figma height: apply on desktop/tablet, keep mobile flexible for now */
@media (min-width: 768px) {
    .c-event-card {
        height: 591px;
    }
}

/* Main content (media + text) takes remaining space */
.c-event-card__main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Push CTA to the bottom of the card */
.c-event-card__cta-wrap {
    margin-top: auto;
}

/* =========================================================
   Calculator – Price Breakdown Popup (c-calc__bd)
========================================================= */

.c-calc__bd.is-hidden {
    display: none;
}

.c-calc__bd-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
}

.c-calc__bd-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(584px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    overflow: auto;

    background: var(--G700);
    border-radius: 16px;
    padding: 24px;
    z-index: 9999;

    display: flex;
    flex-direction: column;
    gap: 24px;
}

.c-calc__bd-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.c-calc__bd-title {
    flex: 1;
    font-weight: var(--uw-fw-600, 600);
    font-size: 20px;
    line-height: 28px;
    color: var(--G50);
}

.c-calc__bd-close {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: var(--G200);
    cursor: pointer;
    font-size: 20px;
    line-height: 24px;
    padding: 0;
}

.c-calc__bd-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.c-calc__bd-label {
    flex: 1;
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    color: var(--G100);
}

.c-calc__bd-val {
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    font-weight: var(--uw-fw-600, 600);
    color: var(--G50);
}

.c-calc__bd-divider {
    border-top: 1px solid var(--G600);
    margin: 24px 0;
}

.c-calc__bd-body {
    display: flex;
    flex-direction: column;
}

.c-calc__bd-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.c-calc__bd-tile {
    background: var(--G600);
    border-radius: 12px;
    padding: 12px;
    display: grid;
    gap: 8px;
}

.c-calc__bd-tlabel {
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    color: var(--G100);
}

.c-calc__bd-tvalue {
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    color: var(--G50);
}

.c-calc__bd-cta.c-btn {
    width: 268px;
    align-self: flex-end;
    margin-top: 24px;
}

/* =========================================================
   SUPPORT REQUEST
   consolidated clean version
   completed steps render in external summary stack
   no !important
========================================================= */

/* top alignment */
.c-support-request {
    align-items: flex-start;
}

.c-support-request__aside,
.c-support-request__main {
    min-width: 0;
    align-self: flex-start;
}

.c-support-request__panel {
    align-self: flex-start;
    margin-top: 0;
}

/* hide native step header */
.c-support-request__form .ff-step-header {
    display: none;
}

/* main stack */
.c-support-request__form .ff-step-body {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-24);
}

/* completed cards stack */
.c-support-request__stack-complete {
    display: grid;
    gap: var(--uw-space-24);
}

.c-support-request__stack-complete:empty {
    display: none;
}

/* base step card */
.c-support-request__form .fluentform-step {
    position: relative;
    border-radius: var(--uw-radius-24);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--G50) 3%, transparent) 0%,
            color-mix(in srgb, var(--G50) 6%, transparent) 50%,
            color-mix(in srgb, var(--G50) 3%, transparent) 100%
        ),
        var(--G800);
    overflow: hidden;
}

/* active step */
.c-support-request__form .c-support-request__step.is-active {
    display: block;
    padding: var(--uw-space-24);
    padding-top: calc(var(--uw-space-96) + var(--uw-space-24));
}

.c-support-request__form .c-support-request__step.is-active::before {
    content: attr(data-step-label);
    position: absolute;
    top: var(--uw-space-24);
    left: var(--uw-space-24);
    color: var(--P700);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.c-support-request__form .c-support-request__step.is-active::after {
    content: attr(data-step-title);
    position: absolute;
    top: calc(
        var(--uw-space-24) + var(--text-s-line-height) + var(--uw-space-8)
    );
    left: var(--uw-space-24);
    right: var(--uw-space-24);
    color: var(--G50);
    font-size: var(--h2);
    line-height: var(--h2-line-height);
    font-weight: var(--uw-fw-600);
}

/* future closed steps */
.c-support-request__form .c-support-request__step.is-future {
    display: block;
    min-height: calc(
        var(--uw-space-24) + var(--text-s-line-height) + var(--uw-space-8) +
            var(--text-m-line-height) + var(--uw-space-24)
    );
    pointer-events: none;
}

.c-support-request__form .c-support-request__step.is-future::before {
    content: attr(data-step-label);
    position: absolute;
    top: var(--uw-space-24);
    left: var(--uw-space-24);
    color: var(--G200);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.c-support-request__form .c-support-request__step.is-future::after {
    content: attr(data-step-title);
    position: absolute;
    top: calc(
        var(--uw-space-24) + var(--text-s-line-height) + var(--uw-space-8)
    );
    left: var(--uw-space-24);
    right: var(--uw-space-24);
    color: var(--G50);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    font-weight: var(--uw-fw-600);
}

.c-support-request__form .c-support-request__step.is-future > * {
    display: none;
}

/* completed original plugin steps are hidden */
.c-support-request__form .c-support-request__step.is-complete {
    display: none;
}

/* hide old inline placeholders from the form markup */
.c-support-request__summary {
    display: none;
}

/* summary cards in external stack */
.c-support-request__summary-card {
    padding: var(--uw-space-24);
    border-radius: var(--uw-radius-24);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--G50) 3%, transparent) 0%,
            color-mix(in srgb, var(--G50) 6%, transparent) 50%,
            color-mix(in srgb, var(--G50) 3%, transparent) 100%
        ),
        var(--G800);
}

.c-support-request__summary-kicker {
    margin-bottom: var(--uw-space-16);
    color: var(--P700);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.c-support-request__summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uw-space-16);
    margin-bottom: var(--uw-space-12);
}

.c-support-request__summary-title {
    color: var(--G50);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    font-weight: var(--uw-fw-600);
}

.c-support-request__summary-chevron {
    color: var(--G200);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
}

.c-support-request__summary-lines {
    display: grid;
    gap: var(--uw-space-8);
}

.c-support-request__summary-line {
    color: var(--G100);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
}

/* fields */
.c-support-request__form .c-support-request__step.is-active .ff-el-group {
    margin-bottom: var(--uw-space-16);
}

.c-support-request__form
    .c-support-request__step.is-active
    .ff-el-input--label
    label {
    display: block;
    margin: 0 0 var(--uw-space-8) 0;
    color: var(--G200);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.c-support-request__form .c-support-request__step.is-active .ff-el-form-control,
.c-support-request__form .c-support-request__step.is-active input[type='text'],
.c-support-request__form .c-support-request__step.is-active input[type='email'],
.c-support-request__form .c-support-request__step.is-active input[type='tel'],
.c-support-request__form .c-support-request__step.is-active textarea,
.c-support-request__form .c-support-request__step.is-active select {
    width: 100%;
    min-height: var(--uw-space-48);
    padding: var(--uw-space-12) var(--uw-space-8);
    border: 1px solid var(--G600);
    border-radius: var(--uw-radius-8);
    background: var(--G700);
    color: var(--G50);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    box-shadow: none;
    outline: none;
    appearance: none;
}

.c-support-request__form .c-support-request__step.is-active textarea {
    min-height: var(--uw-space-96);
    resize: none;
}

.c-support-request__form
    .c-support-request__step.is-active
    .ff-el-form-control::placeholder,
.c-support-request__form .c-support-request__step.is-active input::placeholder,
.c-support-request__form
    .c-support-request__step.is-active
    textarea::placeholder {
    color: var(--G400);
    opacity: 1;
}

.c-support-request__form
    .c-support-request__step.is-active
    .ff-el-form-control:focus,
.c-support-request__form .c-support-request__step.is-active input:focus:not([type="radio"]):not([type="checkbox"]),
.c-support-request__form .c-support-request__step.is-active textarea:focus,
.c-support-request__form .c-support-request__step.is-active select:focus {
    background: var(--G700);
    color: var(--G50);
    border-color: var(--P50);
    box-shadow: none;
}

/* autofill */
.c-support-request__form
    .c-support-request__step.is-active
    input:-webkit-autofill,
.c-support-request__form
    .c-support-request__step.is-active
    input:-webkit-autofill:hover,
.c-support-request__form
    .c-support-request__step.is-active
    input:-webkit-autofill:focus,
.c-support-request__form
    .c-support-request__step.is-active
    textarea:-webkit-autofill,
.c-support-request__form
    .c-support-request__step.is-active
    textarea:-webkit-autofill:hover,
.c-support-request__form
    .c-support-request__step.is-active
    textarea:-webkit-autofill:focus,
.c-support-request__form
    .c-support-request__step.is-active
    select:-webkit-autofill,
.c-support-request__form
    .c-support-request__step.is-active
    select:-webkit-autofill:hover,
.c-support-request__form
    .c-support-request__step.is-active
    select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--G50);
    box-shadow: inset 0 0 0 1000px var(--G700);
    transition: background-color 9999s ease-out 0s;
}

/* phone */
.c-support-request__form .c-support-request__step.is-active .iti {
    width: 100%;
}

.c-support-request__form
    .c-support-request__step.is-active
    .iti__selected-country {
    height: var(--uw-space-48);
    border: 0;
    background: transparent;
}

.c-support-request__form .c-support-request__step.is-active .ff-el-phone {
    padding-left: calc(var(--uw-space-32) + var(--uw-space-16));
}

/* actions */
.c-support-request__form .c-support-request__step.is-active .step-nav {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--uw-space-24);
}

.c-support-request__form .ff-btn-prev {
    display: none;
}

.c-support-request__form .c-support-request__step.is-active .ff-btn-next,
.c-support-request__form .c-support-request__step.is-active .ff-btn-submit {
    display: inline-flex;
    width: 100%;
    min-height: var(--uw-space-48);
    align-items: center;
    justify-content: center;
    padding: var(--btn-py) var(--btn-px);
    border: 0;
    border-radius: var(--uw-radius-pill);
    font-size: var(--btn-font-size);
    line-height: var(--btn-line-height);
    font-weight: var(--uw-fw-500);
    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

.c-support-request__form
    .c-support-request__step.is-active
    .ff-btn-next[disabled],
.c-support-request__form
    .c-support-request__step.is-active
    .ff-btn-submit[disabled] {
    background: var(--P900);
    color: var(--G700);
    cursor: not-allowed;
    opacity: 1;
}

.c-support-request__form
    .c-support-request__step.is-active
    .ff-btn-next:not([disabled]),
.c-support-request__form
    .c-support-request__step.is-active
    .ff-btn-submit:not([disabled]) {
    background: var(--P700);
    color: var(--G800);
}

.c-support-request__form
    .c-support-request__step.is-active
    .ff-btn-next:not([disabled]):hover,
.c-support-request__form
    .c-support-request__step.is-active
    .ff-btn-submit:not([disabled]):hover {
    background: var(--P500);
    color: var(--G800);
}

/* mobile */
@media (max-width: 767px) {
    .c-support-request__form .c-support-request__step.is-active {
        padding: var(--uw-space-16);
        padding-top: calc(var(--uw-space-96) + var(--uw-space-16));
    }

    .c-support-request__form .c-support-request__step.is-active::before,
    .c-support-request__form .c-support-request__step.is-future::before {
        top: var(--uw-space-16);
        left: var(--uw-space-16);
    }

    .c-support-request__form .c-support-request__step.is-active::after,
    .c-support-request__form .c-support-request__step.is-future::after {
        left: var(--uw-space-16);
        right: var(--uw-space-16);
        top: calc(
            var(--uw-space-16) + var(--text-s-line-height) + var(--uw-space-8)
        );
    }

    .c-support-request__form .c-support-request__step.is-active::after {
        font-size: var(--h2);
        line-height: var(--h2-line-height);
    }

    .c-support-request__form .c-support-request__step.is-future::after {
        font-size: var(--text-m);
        line-height: var(--text-m-line-height);
    }

    .c-support-request__form .c-support-request__step.is-active .ff-el-group {
        margin-bottom: var(--uw-space-12);
    }

    .c-support-request__form
        .c-support-request__step.is-active
        .ff-el-form-control,
    .c-support-request__form
        .c-support-request__step.is-active
        input[type='text'],
    .c-support-request__form
        .c-support-request__step.is-active
        input[type='email'],
    .c-support-request__form
        .c-support-request__step.is-active
        input[type='tel'],
    .c-support-request__form .c-support-request__step.is-active textarea,
    .c-support-request__form .c-support-request__step.is-active select {
        min-height: var(--uw-space-40);
        font-size: var(--text-s);
        line-height: var(--text-s-line-height);
    }

    .c-support-request__form
        .c-support-request__step.is-active
        .iti__selected-country {
        height: var(--uw-space-40);
    }

    .c-support-request__summary-card {
        padding: var(--uw-space-16);
    }
}

/* =========================================================
   Inquiry Popup (Calculator) – c-calc inquiry modal
   Append-only
========================================================= */

.c-calc__inq {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--uw-space-24);
}

.c-calc__inq.is-hidden {
    display: none;
}

.c-calc__inq-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.c-calc__inq-panel {
    position: relative;
    width: 584px;
    max-width: 94vw;
    background: var(--G700);
    border-radius: 16px;
    padding: var(--uw-space-24);
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-24);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.c-calc__inq-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uw-space-8);
}

.c-calc__inq-title {
    font-size: var(--h4);
    line-height: var(--h4-line-height);
    font-weight: var(--uw-fw-600);
    color: var(--G50);
}

.c-calc__inq-close {
    background: transparent;
    border: 0;
    color: var(--G200);
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.c-calc__inq-form {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--uw-space-24);
}

@media (min-width: 768px) {
    .c-calc__inq-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.c-calc__inq-form .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-8);
    margin: 0;
}

.c-calc__inq-form .form-group:has(textarea),
.c-calc__inq-form .submit-row {
    grid-column: 1 / -1;
}

.c-calc__inq-form label {
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    color: var(--G200);
    font-weight: 400;
}

.c-calc__inq-form input,
.c-calc__inq-form textarea {
    width: 100%;
    background: var(--G800);
    color: var(--G50);
    border: 1px solid var(--G600);
    border-radius: var(--uw-radius-12);
    padding: var(--uw-space-16);
    outline: none;
}

.c-calc__inq-form input[readonly] {
    opacity: 0.85;
}

.c-calc__inq-form textarea {
    min-height: 120px;
    resize: vertical;
}

.c-calc__inq-form button[type='submit'] {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: var(--uw-radius-pill);
    background: var(--P700);
    color: var(--G800);
    font-weight: var(--uw-fw-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.c-calc__inq-form button[type='submit']:hover {
    background: var(--P500);
}

.c-calc__inq-note {
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    color: var(--G200);
}

.c-calc__inq-success {
    color: var(--G50);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
}

.fx-card-highlight {
    transition:
        transform var(--card-highlight-speed) var(--card-highlight-ease),
        box-shadow var(--card-highlight-speed) var(--card-highlight-ease),
        filter var(--card-highlight-speed) var(--card-highlight-ease);
}

.fx-card-highlight:hover,
.fx-card-highlight:focus-within,
.fx-card-highlight.is-anim-active {
    transform: scale(var(--card-highlight-scale));
    /* z-index 1: Der Glow (äußerer box-shadow) malt sonst UNTER dem
       opaken Hintergrund der Nachbarkarte — beim Anim-Handoff tragen
       kurzzeitig BEIDE Karten einen transform (= Stacking-Context),
       dann gewinnt die spätere im Baum und schneidet den Glow der
       früheren an der Kartenkante ab (gemeldet auf Mobile, gilt aber
       überall). Wirkt ohne position: Karten sind Grid-/Flex-Items. */
    z-index: 1;
    box-shadow:
        0 0 0 var(--card-highlight-ring-width) var(--card-highlight-color),
        0 0 var(--card-highlight-glow-size)
            color-mix(
                in srgb,
                var(--card-highlight-color) var(--card-highlight-glow-strength),
                transparent
            );
}

.c-card__num {
    transition: color var(--card-highlight-speed) var(--card-highlight-ease);
}

.fx-card-highlight:hover .c-card__num,
.fx-card-highlight:focus-within .c-card__num,
.fx-card-highlight.is-anim-active .c-card__num {
    color: var(--card-highlight-color);
}

.c-tabs .c-card {
    transition:
        transform var(--card-highlight-speed) var(--card-highlight-ease),
        box-shadow var(--card-highlight-speed) var(--card-highlight-ease),
        filter var(--card-highlight-speed) var(--card-highlight-ease);
}

.c-tabs .c-card:hover,
.c-tabs .c-card:focus-within,
.c-tabs .c-card.is-anim-active {
    transform: scale(var(--card-highlight-scale));
    /* z-index 1: siehe fx-card-highlight oben — Glow darf nicht unter
       der Nachbarkarte verschwinden. */
    z-index: 1;
    box-shadow:
        0 0 0 var(--card-highlight-ring-width) var(--card-highlight-color),
        0 0 var(--card-highlight-glow-size)
            color-mix(
                in srgb,
                var(--card-highlight-color) var(--card-highlight-glow-strength),
                transparent
            );
}

.c-tabs .c-card .c-card__num {
    transition: color var(--card-highlight-speed) var(--card-highlight-ease);
}

.c-tabs .c-card:hover .c-card__num,
.c-tabs .c-card:focus-within .c-card__num,
.c-tabs .c-card.is-anim-active .c-card__num {
    color: var(--card-highlight-color);
}

.c-tabs .fx-card-highlight {
    text-align: left;
    align-items: stretch;
}

.c-tabs .fx-card-highlight .c-checklist,
.c-tabs .fx-card-highlight .c-checklist > li,
.c-tabs .fx-card-highlight .c-checklist .content,
.c-tabs .fx-card-highlight .c-checklist .description,
.c-tabs .fx-card-highlight .c-checklist .description ul,
.c-tabs .fx-card-highlight .c-checklist .description li {
    text-align: left;
}

.c-tabs .fx-card-highlight .c-checklist .content {
    justify-content: flex-start;
}

.c-tabs .fx-card-highlight .c-checklist .description {
    align-self: stretch;
}

.c-tabs .fx-card-highlight .c-checklist .description ul {
    margin: 0;
    padding-left: 20px;
}

/* =========================================================
   Trusted Devices logos
   Ambient motion + hover emphasis
========================================================= */

.c-device-logos__tile {
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        filter 0.28s ease;
    animation: uwLogoFloat 5.5s ease-in-out infinite;
    will-change: transform;
}

/* Stagger the floating a little */
.c-device-logos__row .c-device-logos__tile:nth-child(1) {
    animation-delay: 0s;
}

.c-device-logos__row .c-device-logos__tile:nth-child(2) {
    animation-delay: 0.9s;
}

.c-device-logos__row .c-device-logos__tile:nth-child(3) {
    animation-delay: 1.8s;
}

/* Hover / focus */
.c-device-logos__tile:hover,
.c-device-logos__tile:focus-within {
    transform: translateY(-6px) scale(1.015);
    box-shadow:
        0 0 0 1px var(--P700),
        0 0 24px color-mix(in srgb, var(--P700) 20%, transparent);
}

/* Optional: make the image itself feel a touch crisper on hover */
.c-device-logos__tile:hover img,
.c-device-logos__tile:focus-within img {
    filter: brightness(1.02);
}

/* Ambient floating */
@keyframes uwLogoFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .c-device-logos__tile {
        animation: none;
        transition: none;
    }

    .c-device-logos__tile:hover,
    .c-device-logos__tile:focus-within {
        transform: none;
        box-shadow:
            0 0 0 1px var(--P700),
            0 0 16px color-mix(in srgb, var(--P700) 16%, transparent);
    }
}

.c-device-logos,
.c-device-logos__row {
    overflow: visible;
}

/* Tile = the white rounded container.
   Logo assets should be TRANSPARENT SVGs — the tile provides bg + radius.
   Per-section knobs:
     --uw-device-tile-bg      surface color (default white)
     --uw-device-tile-radius  corner radius (default 12)
     --uw-device-tile-pad     inner padding (default 24)
     --uw-device-tile-minh    min tile height (default 120)
     --uw-device-tile-aspect  width/height ratio (default auto — set e.g. 3/1 to
                              keep tiles proportional across narrow + wide columns) */
.c-device-logos__tile {
    background: var(--uw-device-tile-bg, var(--G50));
    border-radius: var(--uw-device-tile-radius, var(--uw-radius-12));
    padding: var(--uw-device-tile-pad, var(--uw-space-24));
    min-height: var(--uw-device-tile-minh, 120px);
    aspect-ratio: var(--uw-device-tile-aspect, auto);
    display: grid;
    place-items: center;
}

/* Logos scale to tile width (minus tile padding) while keeping aspect.
   Height cap stops tall/square logos from dominating short/wide ones —
   tune --uw-device-logo-max-h per layout if needed.
   border-radius: 0 defeats ACSS default `:where(img) { border-radius: var(--radius) }`
   which otherwise clips the logo edges into a pill shape. */
.c-device-logos__tile :is(img, svg) {
    display: block;
    width: 100%;
    height: auto;
    max-height: var(--uw-device-logo-max-h, 64px);
    object-fit: contain;
    border-radius: 0;
}

/* =========================================================
   Breathe variant — push-pull spotlight cycle.
   Opt in by adding .c-device-logos--breathe to the wrapper.
   JS (initDeviceLogoBreathe) rotates .is-focus / .is-shrink
   classes through tiles every --uw-device-breathe-step (default 2800ms).
   Disables ambient float to avoid transform fights.

   Speed knobs (set on the .c-device-logos--breathe block):
     --uw-device-breathe-step      ms between focus changes (default 2800)
     --uw-device-breathe-ease-dur  scale-in/out duration    (default 1s)
========================================================= */
.c-device-logos--breathe .c-device-logos__tile {
    animation: none;
    transition:
        transform var(--uw-device-breathe-ease-dur, 1s) cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow var(--uw-device-breathe-ease-dur, 1s) cubic-bezier(0.22, 1, 0.36, 1),
        filter var(--uw-device-breathe-ease-dur, 1s) cubic-bezier(0.22, 1, 0.36, 1);
}

.c-device-logos--breathe .c-device-logos__tile.is-focus {
    transform: translateY(-6px) scale(1.06);
    box-shadow:
        0 0 0 1px var(--P700),
        0 0 24px color-mix(in srgb, var(--P700) 22%, transparent);
    z-index: 2;
}

.c-device-logos--breathe .c-device-logos__tile.is-shrink {
    transform: scale(0.96);
    filter: saturate(0.9) brightness(0.96);
}

@media (prefers-reduced-motion: reduce) {
    .c-device-logos--breathe .c-device-logos__tile {
        transition: none;
    }
    .c-device-logos--breathe .c-device-logos__tile.is-focus,
    .c-device-logos--breathe .c-device-logos__tile.is-shrink {
        transform: none;
        box-shadow: none;
        filter: none;
    }
}

/* Device logo wall ("Kompatible Geraete"): keep the 3x3 scan
   layout on mobile — the global l-grid-fixed 1-column collapse
   turned 9 tiles into a ~1300px white wall. Compact tiles keep
   all brands visible at a glance (232px total). body prefix
   beats the generic l-grid-fixed mobile rule. */
@media (max-width: 767px) {
  body .c-device-logos__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--uw-space-8);
  }

  body .c-device-logos__tile {
    height: 72px;
    min-height: 0;
    padding: var(--uw-space-12);
  }

  body .c-device-logos__tile :is(img, svg) {
    max-height: 28px;
    max-width: 100%;
    object-fit: contain;
  }
}

/* Feature grids with hero cards (v-cols-4 + v-span-2 children):
   on mobile, collapse to 2 columns instead of 1 — span-2 cards
   keep full width, small cards pair up, preserving the
   size-equals-importance hierarchy from desktop.
   - span re-enabled (the generic helper disables it on mobile)
   - min-height released, content defines height
   - align stretch forced: Bricks element settings put
     align-items: flex-start on these grids, which made paired
     cards unequal in height */
@media (max-width: 767px) {
  body .l-grid-fixed.v-cols-4:has(> .v-span-2) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--uw-space-12);
    align-items: stretch;
  }

  body .l-grid-fixed.v-cols-4:has(> .v-span-2) > .v-span-2 {
    grid-column: span 2;
  }

  body .l-grid-fixed.v-cols-4:has(> .v-span-2) > .c-card {
    min-height: 0;
    height: auto;
    align-self: stretch;
  }
}

/* Solution teaser cards (c-card with a "Mehr erfahren" link):
   on mobile, icon moves inline with the title — the stacked
   icon row wasted ~70px per card. Description spans full
   width below. The empty space seen on phones came from the
   desktop fixed-height + space-between rules, which are
   min-768px only and need no mobile counterpart. */
@media (max-width: 767px) {
  body .c-card:has(.c-btn-link) .c-card__body > div:first-child {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--uw-space-12);
    row-gap: var(--uw-space-8);
    align-items: center;
  }

  body .c-card:has(.c-btn-link) .c-card__body > div:first-child > svg {
    margin-bottom: 0;
    width: 32px;
    height: 32px;
  }

  body .c-card:has(.c-btn-link) .c-card__body > div:first-child > .u-text-muted {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   Breadcrumbs
   - wrapper should sit inside header-width container
   - top space 32 / bottom space 64
========================================================= */

.c-breadcrumbs {
  width: 100%;
  margin-top: var(--uw-space-32);
  margin-bottom: var(--uw-space-64);
}

/* Tablet gutter: the breadcrumb wrapper is rendered directly in <main>,
   OUTSIDE any <section> — so the ACSS content grid (which gives every
   section's content column `min(--content-width, 100% - gutter*2)`)
   never applies to it, and .l-container itself carries no gutter
   (padding-inline deliberately commented out above). Result: between
   768px and ~990px the wrapper hits the screen edge. Mirror the ACSS
   content-column formula here — same ACSS --gutter var, so the crumbs
   stay pixel-aligned with section content at every viewport width
   instead of guessing a breakpoint. <768px keeps the existing mobile
   treatment (16px padding on .c-breadcrumbs, see snippet 33) untouched. */
@media (min-width: 768px) {
  .brxe-container.l-container:has(> .c-breadcrumbs) {
    /* Fallback chains matter: this rule WINS the cascade, so a bare
       var(--gutter) without fallback would make the whole declaration
       invalid (max-width: none → full-bleed everywhere) if ACSS ever
       goes missing. Same width fallback as the .l-container rules. */
    max-width: min(
      var(--uw-container-width, var(--content-width, 944px)),
      calc(100% - var(--gutter, var(--uw-gutter, 24px)) * 2)
    );
  }
}

/* Mobile: hide the current-page crumb (duplicates the H1 and
   wraps to multiple lines) AND its preceding separator —
   ancestors stay as a one-line path. aria-current is the
   semantic anchor; :last-of-type would NOT work here (it
   matches by tag, and items/separators are both spans).
   Rank Math's breadcrumb JSON-LD is unaffected. */
@media (max-width: 767px) {
  /* Hide the whole breadcrumb when nothing useful remains:
     if the only ancestor is the homepage (structure = Startseite
     + separator + current page), the bar would show a lone
     "Startseite" next to the logo, which links home anyway.
     Pages with a real parent level keep their path.
     NOTE: on such pages the mobile page chrome shrinks by the
     breadcrumb height — if a top-level page ever combines this
     with u-vcenter-screen, check its centering. */
  .c-breadcrumbs:not(:has(.item:not(:first-child):not([aria-current="page"]))) {
    display: none;
  }

  .c-breadcrumbs [aria-current="page"],
  .c-breadcrumbs .separator:has(+ [aria-current="page"]) {
    display: none;
  }

  .c-breadcrumbs {
    flex-wrap: nowrap;
  }

  /* safety net if an ancestor item is ever too long */
  .c-breadcrumbs .item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* common wrappers */
.c-breadcrumbs :is(ol, ul, .rank-math-breadcrumb, .breadcrumbs) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--uw-space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* list items / crumb items */
.c-breadcrumbs li,
.c-breadcrumbs .breadcrumb,
.c-breadcrumbs .crumb {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* link + text base */
.c-breadcrumbs a,
.c-breadcrumbs span,
.c-breadcrumbs li > * {
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
  color: var(--G200);
  text-decoration: none;
}

/* hover */
.c-breadcrumbs a:hover {
  color: var(--G50);
}

/* current item */
.c-breadcrumbs [aria-current="page"],
.c-breadcrumbs .current,
.c-breadcrumbs .current-item,
.c-breadcrumbs .breadcrumb_last,
.c-breadcrumbs li:last-child > span,
.c-breadcrumbs li:last-child > strong,
.c-breadcrumbs li:last-child > a {
  color: var(--P700);
  font-weight: var(--uw-fw-500);
}

/* separators for list-based breadcrumbs */
.c-breadcrumbs li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 19px;
  margin-left: var(--uw-space-12);
  background: var(--G500);
}

/* common plugin separators */
.c-breadcrumbs .separator,
.c-breadcrumbs .sep {
  display: inline-block;
  width: 1px;
  height: 19px;
  margin-inline: var(--uw-space-12);
  background: var(--G500);
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  vertical-align: middle;
}

/* if plugin outputs text separators directly, hide them when class exists */
.c-breadcrumbs .separator * ,
.c-breadcrumbs .sep * {
  display: none;
}

/* =========================================================
   Hero toggles
   Diagonal shine wipe
========================================================= */

.c-hero__toggle {
  position: relative;
  /* overflow: hidden; */
  border-radius: 10px;
}

.c-hero__toggle::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;

  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 22%,
    rgba(27, 215, 97, 0.00) 32%,
    rgba(27, 215, 97, 0.10) 40%,
    rgba(255, 255, 255, 0.30) 50%,
    rgba(27, 215, 97, 0.18) 60%,
    rgba(27, 215, 97, 0.06) 68%,
    transparent 78%,
    transparent 100%
  );

  transform: translateX(-160%) skewX(-18deg);
  animation: uwHeroToggleShine 5.4s ease-in-out infinite;
}

/* stagger */
.c-hero__toggle:nth-child(1)::after {
  animation-delay: 0s;
}

.c-hero__toggle:nth-child(2)::after {
  animation-delay: 1.8s;
}

.c-hero__toggle:nth-child(3)::after {
  animation-delay: 3.6s;
}

@keyframes uwHeroToggleShine {
  0%, 18%, 100% {
    opacity: 0;
    transform: translateX(-160%) skewX(-18deg);
  }

  6% {
    opacity: 1;
  }

  14% {
    opacity: 1;
    transform: translateX(160%) skewX(-18deg);
  }

  16% {
    opacity: 0;
    transform: translateX(160%) skewX(-18deg);
  }
}

/* hover / active wins */
.c-hero__toggle:hover::after,
.c-hero__toggle.is-active::after {
  animation-play-state: paused;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .c-hero__toggle::after {
    animation: none;
  }
}

/* =========================================================
   Hero 1 switcher
   Scoped only to heroes that opt in with .c-hero--switcher
   Safe with existing Hero 2 media_type logic
========================================================= */

/* hide all switcher media by default */
.c-hero--switcher .c-hero__media {
  display: none;
}

/* show active switcher media */
.c-hero--switcher .c-hero__media.is-active {
  display: block;
}

/* keep media types fluid inside the existing hero frame */
.c-hero--switcher .c-hero__image,
.c-hero--switcher .c-hero__video,
.c-hero--switcher .c-hero__shortcode {
  width: 100%;
  max-width: 100%;
}

/* common outputs */
.c-hero--switcher .c-hero__media > img,
.c-hero--switcher .c-hero__media iframe,
.c-hero--switcher .c-hero__media video,
.c-hero--switcher .c-hero__media .brxe-shortcode,
.c-hero--switcher .c-hero__media .brxe-code {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* shortcode safety */
.c-hero--switcher .c-hero__shortcode > * {
  max-width: 100%;
}

/* Scope the logic to this section only */
.c-feature-lists .brxe-list > li:nth-child(3n + 1) .icon {
    color: var(--B600);
}

.c-feature-lists .brxe-list > li:nth-child(3n + 2) .icon {
    color: var(--Y600);
}

.c-feature-lists .brxe-list > li:nth-child(3n) .icon {
    color: var(--P700);
}

/* Make SVGs follow the icon color */
.c-feature-lists .brxe-list > li .icon svg,
.c-feature-lists .brxe-list > li .icon svg path {
    fill: currentColor;
}

/* ---------------------------------
   1) Plain feature-card icons
--------------------------------- */
.brxe-yvrpcy > .c-card:nth-child(3n + 1) .brxe-ksjkbl {
  color: var(--B600);
}

.brxe-yvrpcy > .c-card:nth-child(3n + 2) .brxe-ksjkbl {
  color: var(--P700);
}

.brxe-yvrpcy > .c-card:nth-child(3n + 3) .brxe-ksjkbl {
  color: var(--Y600);
}

.brxe-yvrpcy > .c-card .brxe-ksjkbl,
.brxe-yvrpcy > .c-card .brxe-ksjkbl path {
  fill: currentColor !important;
}

/* ---------------------------------
   2) Icon badge icons
--------------------------------- */
.c-icon-badge {
  --badge-size: 40px;
  --badge-radius: 6px;
  --badge-bg: #3d3d3d;
  --badge-dot-size: 4px;
  --badge-dot-offset: 4px;
  --badge-dot-color: #5a5a5a;
  --badge-icon-size: 20px;
  --badge-icon-color: #fff;
  

  position: relative;
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: var(--badge-radius);
  background: var(--badge-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* flex-basis follows --badge-size so flex parents don't need a separate
     flex/width override; callers resize the badge by setting --badge-size only. */
  flex: 0 0 var(--badge-size);
}

.c-icon-badge--48 {
  --badge-size: 48px;
}

.c-icon-badge::before,
.c-icon-badge::after {
  content: "";
  position: absolute;
  width: var(--badge-dot-size);
  height: var(--badge-dot-size);
  border-radius: 999px;
  background: var(--badge-dot-color);
}

.c-icon-badge::before {
  top: var(--badge-dot-offset);
  left: var(--badge-dot-offset);
  box-shadow:
    calc(var(--badge-size) - (2 * var(--badge-dot-offset)) - var(--badge-dot-size)) 0 0 var(--badge-dot-color),
    0 calc(var(--badge-size) - (2 * var(--badge-dot-offset)) - var(--badge-dot-size)) 0 var(--badge-dot-color);
}

.c-icon-badge::after {
  right: var(--badge-dot-offset);
  bottom: var(--badge-dot-offset);
}

.c-icon-badge__icon {
  width: var(--badge-icon-size);
  height: var(--badge-icon-size);
  color: var(--badge-icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.c-icon-badge__icon,
.c-icon-badge__icon svg,
.c-icon-badge__icon svg path {
  fill: currentColor !important;
}

/* Color modifiers — override --badge-icon-color per token.
   Use because `.c-icon-badge__icon svg path { fill: currentColor !important }`
   beats any inline fill set in Bricks editor. Add class on .c-icon-badge. */
.c-icon-badge.is-p700 { --badge-icon-color: var(--P700); }
.c-icon-badge.is-y600 { --badge-icon-color: var(--Y600); }
.c-icon-badge.is-b600 { --badge-icon-color: var(--B600); }

/* =========================================================
   Stats band — "numbers as proof" counter row.
   Structure: .l-section.c-stats > .l-container.v-container--content
              > ul.c-stats__grid.l-grid-fixed.v-cols-3.v-gap-0
   Desktop draws a vertical hairline between columns; Mobile System CSS
   swaps it to a horizontal rule once .l-grid-fixed stacks to one column.
   Count-up via .js-ui-stats + .c-stats__num (UI-Components-Animation.js
   → initStats). Numbers sit at --h2; label at --text-s.
========================================================= */
.c-stats__grid {
  /* width:100% so the grid fills its container even when Bricks renders the
     parent as a flex column whose align-items isn't `stretch` — without it the
     ul shrinks to content width and the 1fr columns cluster to the left. */
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--uw-space-8);
  /* padding (not grid gap) around the divider so the hairline sits centered
     between columns — pair with .v-gap-0 on the grid. */
  padding-inline: var(--uw-space-24);
}

/* vertical hairline between columns */
.c-stats__item + .c-stats__item {
  border-left: 1px solid var(--G600);
}

.c-stats__value {
  display: inline-flex;
  align-items: baseline;
  color: var(--G50);
  font-weight: var(--uw-fw-600);
  font-size: var(--h2);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* "+" reads as "more than" (8.000+), accented in brand green */
.c-stats__plus {
  color: var(--P700);
  margin-left: 2px;
}

.c-stats__label {
  color: var(--G100);
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
  font-weight: 400;
}

/* =========================================================
   Solution 2
   New component API
   - fixed rows, property-driven visibility
   - per-row media can be image / video / shortcode / none
   - even rows auto-reverse on desktop
========================================================= */

.c-solution-2 {
  width: 100%;
}

.c-solution-2__rows {
  width: 100%;
}

.c-solution-2__row {
  width: 100%;
  align-items: center;
}

.c-solution-2__row > .c-solution-2__media-col,
.c-solution-2__row > .c-solution-2__content {
  min-width: 0;
}

/* auto reverse every even row on desktop */
@media (min-width: 768px) {
  .c-solution-2__row:nth-child(even) > .c-solution-2__media-col {
    order: 2;
  }

  .c-solution-2__row:nth-child(even) > .c-solution-2__content {
    order: 1;
  }
}

@media (max-width: 767px) {
  .c-solution-2__row > .c-solution-2__media-col,
  .c-solution-2__row > .c-solution-2__content {
    order: initial;
  }
}

/* =========================================================
   Media column
========================================================= */

.c-solution-2__media-col {
  width: 100%;
}

.c-solution-2__media {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--uw-radius-12);
}

.c-solution-2__media-item {
  display: none;
  width: 100%;
  min-width: 0;
  max-width: 448px;
  max-height: 448px;
  margin-inline: auto;
}

.c-solution-2__media-item.is-active {
  display: block;
}

/* property-driven media type on the row */
.c-solution-2__row[visibility="is-row-hidden"] {
  display: none;
}

.c-solution-2__row[media-type="is-media-image"] .c-solution-2__media-item--image {
  display: block;
}

.c-solution-2__row[media-type="is-media-video"] .c-solution-2__media-item--video {
  display: block;
}

.c-solution-2__row[media-type="is-media-shortcode"] .c-solution-2__media-item--shortcode {
  display: block;
  position: relative;
}

.c-solution-2__row[media-type="is-media-none"] .c-solution-2__media-item--image,
.c-solution-2__row[media-type="is-media-none"] .c-solution-2__media-item--video,
.c-solution-2__row[media-type="is-media-none"] .c-solution-2__media-item--shortcode {
  display: none;
}

/* common media outputs */
.c-solution-2__media-item > img,
.c-solution-2__media-item iframe,
.c-solution-2__media-item video,
.c-solution-2__media-item .brxe-shortcode,
.c-solution-2__media-item .brxe-code,
.c-solution-2__media-item .brxe-image,
.c-solution-2__media-item picture,
.c-solution-2__media-item picture > img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.c-solution-2__media-item video {
  height: auto;
}

.c-solution-2__media-item iframe {
  border: 0;
}

.c-solution-2__media-item--shortcode > * {
  max-width: 100%;
}

/* =========================================================
   Content column
========================================================= */

.c-solution-2__content {
  width: 100%;
  min-width: 0;
}

.c-solution-2__intro {
  width: 100%;
}

.c-solution-2__content .c-eyebrow {
  align-self: flex-start;
}

.c-solution-2__content .brxe-heading,
.c-solution-2__content .brxe-text-basic {
  max-width: 100%;
}

/* =========================================================
   Features list
========================================================= */

.c-solution-2__features {
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  gap: var(--uw-space-12);
}

.c-solution-2__features > li {
  margin: 0;
  padding: 0;
}

.c-solution-2__features > li.is-feature-hidden {
  display: none;
}

.c-solution-2__features .content {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--uw-space-8);
  margin: 0;
}

.c-solution-2__features .icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 20px;
}
/* Solution 2 feature icon color cycle: P, B, Y */
.c-solution-2 .c-solution-2__features > li:nth-child(3n + 1) .icon {
  color: var(--Y600);
}

.c-solution-2 .c-solution-2__features > li:nth-child(3n + 2) .icon {
  color: var(--P700);
}

.c-solution-2 .c-solution-2__features > li:nth-child(3n + 3) .icon {
  color: var(--B600);
}
.c-solution-2__features .icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.c-solution-2__features .title {
  display: block;
  margin: 0;
  text-align: left;
}

/* =========================================================
   Optional button row
========================================================= */

.c-solution-2__content .c-btn {
  align-self: flex-start;
}

/* =========================================================
   Safe defaults for old scene wrappers inside shortcode media
========================================================= */

.c-solution-2__media .c-ui-scene {
  width: 100%;
  max-width: 100%;
}

/* =========================================================
   Mobile tightening
========================================================= */

@media (max-width: 767px) {
  .c-solution-2__media {
    border-radius: var(--uw-radius-12);
  }

  .c-solution-2__features {
    gap: var(--uw-space-8);
  }
}


/* =========================================================
   Footer (clean single block)
========================================================= */

body .c-footer {
  --section-pad: 32px;
    background: var(--G700);

}

.c-footer__shell {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

.c-footer__top {
  width: 100%;
}

@media (min-width: 768px) {
  .c-footer__top {
    display: grid;
    grid-template-columns: 368px 224px 224px 224px;
    column-gap: 48px;
    row-gap: 0;
    align-items: start;
  }
}

.c-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.c-footer__logo {
  width: 64px;
  height: 64px;
  display: block;
}

.c-footer__lede {
  max-width: 26ch;
  color: var(--G50);
}

.c-footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-footer__newsletter-title,
.c-footer__nav-title {
  margin: 0;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: var(--uw-fw-500);
  color: var(--G50);
}

/* Footer-Menü-Überschriften (Spaltentitel) sind fett, nicht medium
   (Figma). Nur die Nav-Spaltentitel; der Newsletter-Formulartitel
   bleibt medium. */
.c-footer__nav-title {
  font-weight: var(--uw-fw-600);
}

.c-footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* menus */
.c-footer .bricks-mobile-menu-toggle,
.c-footer .bricks-mobile-menu-wrapper,
.c-footer .bricks-mobile-menu-overlay {
  display: none;
}

.c-footer .bricks-nav-menu-wrapper {
  display: block;
}

.c-footer .bricks-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-footer .bricks-nav-menu a {
  color: var(--G50);
  text-decoration: none;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
}

.c-footer .bricks-nav-menu a:hover {
  color: var(--G200);
}

/* newsletter form */
.c-footer__newsletter-form {
  --footer-send-icon: url("/wp-content/uploads/2026/04/send.svg");
  width: 100%;
  max-width: 368px;
}

.c-footer__newsletter-form form {
  position: relative;
}

.c-footer__newsletter-form .ff-el-group {
  margin: 0;
}

.c-footer__newsletter-form .ff-el-input--label {
  display: none;
}

.c-footer__newsletter-form input[type="email"],
.c-footer__newsletter-form .ff-el-form-control {
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 12px 36px 12px 8px;
  background: var(--G600);
  border: 1px solid var(--G600);
  border-radius: 8px;
  color: var(--G50);
  box-shadow: none;
  outline: none;
}

.ff-default .ff-el-form-control {
  border: 1px solid var(--G600) !important;
}

.c-footer__newsletter-form input[type="email"]::placeholder,
.c-footer__newsletter-form .ff-el-form-control::placeholder {
  color: var(--G400);
  opacity: 1;
}

.c-footer__newsletter-form .ff_submit_btn_wrapper {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  margin: 0;
}

.c-footer__newsletter-form .ff-btn-submit {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  font-size: 0;
  line-height: 0;
  box-shadow: none;
}

.c-footer__newsletter-form .ff-btn-submit::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--P700);
  -webkit-mask: var(--footer-send-icon) center / 20px 20px no-repeat;
  mask: var(--footer-send-icon) center / 20px 20px no-repeat;
}

/* bottom row */
.c-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding-block: 20px;
  border-top: 1px solid var(--G600);
}

.c-footer__copyright {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--G50);
}

.c-footer__socials {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.c-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

@media (max-width: 767px) {
  .c-footer__shell {
    gap: 24px;
  }

  .c-footer__top {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .c-footer__newsletter-form {
    max-width: 100%;
  }

  .c-footer__bottom {
    align-items: flex-start;
  }
}

.c-footer__nav-col .menu-item.is-hiring > a,
.c-footer__nav-col .current-menu-item.is-hiring > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.c-footer__nav-col .menu-item.is-hiring > a::after {
  content: "We're hiring";
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  background: var(--P700);
  color: var(--G700);
  white-space: nowrap;
}


/* =========================================
   Footer width hard-lock
   Bypass variable/layer ambiguity for this instance
========================================= */

/* section owns the full-width band */
body #brx-footer > .l-section.c-footer {
  --section-pad: 32px;
  width: 100%;
  max-width: none;
}

/* hard-lock the footer wrapper to 1184px */
body #brx-footer .l-container.v-container--footer {
  width: 100%;
  max-width: 1184px;
  width: 1184px;
  margin-inline: auto;
}

/* make sure footer internals fill that wrapper */
body #brx-footer .c-footer__shell,
body #brx-footer .c-footer__top,
body #brx-footer .c-footer__bottom {
  width: 100%;
}

/* desktop top grid */
@media (min-width: 768px) {
  body #brx-footer .c-footer__top {
    display: grid;
    grid-template-columns: 368px 224px 224px 224px;
    column-gap: 48px;
    row-gap: 0;
    align-items: start;
  }
}

/* =========================================
   Footer section opt-out + local layout
========================================= */

/* footer section is just the full-width band */
body #brx-footer > section.l-section.c-footer.content-grid--off {
  --section-pad: 32px;
  width: 100%;
  max-width: none;
}

/* footer wrapper width */
body #brx-footer .l-container.v-container--footer {
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
}

/* footer internals fill the wrapper */
body #brx-footer .c-footer__shell,
body #brx-footer .c-footer__top,
body #brx-footer .c-footer__bottom {
  width: 100%;
}

/* desktop top grid */
@media (min-width: 768px) {
  body #brx-footer .c-footer__top {
    display: grid;
    grid-template-columns: 368px 224px 224px 224px;
    column-gap: 48px;
    row-gap: 0;
    align-items: start;
  }
}

body #brx-footer .c-footer .c-footer__menu .bricks-nav-menu > li {
  margin: 0;
}


/* =========================================
   Footer newsletter submit button cleanup
   Fluent Forms override
========================================= */

body #brx-footer .c-footer__newsletter-form .ff_submit_btn_wrapper {
  position: absolute;
  top: 36%;
  right: 8px;
  transform: translateY(-50%);
  margin: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

body #brx-footer .c-footer__newsletter-form .ff-btn-submit,
body #brx-footer .c-footer__newsletter-form .ff-btn-submit:hover,
body #brx-footer .c-footer__newsletter-form .ff-btn-submit:focus,
body #brx-footer .c-footer__newsletter-form .ff-btn-submit:active {
  display: block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  appearance: none;

  /* hide visible button text */
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;

  position: relative;
  cursor: pointer;
}

/* kill any plugin pseudo noise */
body #brx-footer .c-footer__newsletter-form .ff-btn-submit::after {
  content: none !important;
  display: none !important;
}

/* our send icon */
body #brx-footer .c-footer__newsletter-form .ff-btn-submit::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--P700);
  -webkit-mask: var(--footer-send-icon) center / 20px 20px no-repeat;
  mask: var(--footer-send-icon) center / 20px 20px no-repeat;

  position: absolute;
  inset: 0;
}

body #brx-footer .c-footer__newsletter-form .ff-btn-submit:hover::before,
body #brx-footer .c-footer__newsletter-form .ff-btn-submit:focus::before {
  background-color: var(--P500);
}

/* =========================================================
   Product tour form (Fluent Forms) - FINAL
========================================================= */

.c-tour-form {
  background: var(--G700);
  border-radius: var(--uw-radius-24);
  padding: var(--uw-space-40);
}

.c-tour-form__intro {
  margin-bottom: var(--uw-space-24);
}

.c-tour-form__title,
.c-tour-form__lede {
  margin: 0;
}

/* ---------------------------------------------------------
   Optional logo row helper
--------------------------------------------------------- */
.c-tour-form__logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--uw-space-8);
}

/* Trusted band (customer logos + quality badges in one l-row,
   built with u-grow/u-no-shrink): on mobile the single row
   squeezes the logo band between label and badges — stack it
   into two rows instead: logos full-width on top, badges below.
   Scoped via :has on the exact sibling pair, no extra class
   needed in Bricks (used on /demo/ and /newsletter/). */
@media (max-width: 767px) {
  body .l-row:has(> .c-hero__trusted + .c-tour-form__logos) {
    flex-direction: column;
    align-items: stretch;
    gap: var(--uw-space-32);
  }

  /* label centered above the logo band */
  body .l-row:has(> .c-hero__trusted + .c-tour-form__logos) .c-hero__trusted {
    flex-direction: column;
    align-items: center;
    gap: var(--uw-space-24);
  }

  body .l-row:has(> .c-hero__trusted + .c-tour-form__logos) .c-hero__trusted-logos {
    justify-content: center;
  }

  /* logo boxes hug their artwork: the desktop rule gives every
     logo a fixed 120px flex-basis; with the mobile 18px height
     cap the artwork shrinks inside that box and the leftover
     space reads as huge gaps. flex-basis auto is required —
     width alone loses against the flex sizing. */
  body .l-row:has(> .c-hero__trusted + .c-tour-form__logos) .c-hero__trusted-logos img {
    width: auto;
    flex: 0 0 auto;
    max-height: 24px; /* overrides the 18px mobile cap from the Mobile CSS */
  }

  /* quality badges centered below, slightly larger than the
     40px default from the tour-form logo helper */
  body .l-row:has(> .c-hero__trusted + .c-tour-form__logos) > .c-tour-form__logos {
    justify-content: center;
  }

  body .l-row:has(> .c-hero__trusted + .c-tour-form__logos) > .c-tour-form__logos img {
    height: 80px;
  }
}




/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */
@media (max-width: 767px) {
  .c-tour-form {
    padding: var(--uw-space-24);
  }
}

/* =========================================================
   Legal / policy rich text content
   Apply only to the Rich Text / Basic Text element
   that contains the legal body copy
========================================================= */

body .c-legal-content :is(h2, h3, h4, h5) {
  margin: 48px 0 24px;
}

/* first heading in the content should not get the 48px top space */
body .c-legal-content > :is(h2, h3, h4, h5):first-child,
body .c-legal-content :is(h2, h3, h4, h5):first-child {
  margin-top: 0;
}

/* reset paragraph margins */
body .c-legal-content p {
  margin: 0;
}

/* 24px after each paragraph,
   except when it is the last paragraph
   or when the next element is h2/h3/h4 */
body .c-legal-content p:not(:last-child):not(:has(+ :is(h2, h3, h4, h5))) {
  margin-bottom: 24px;
}

/* links */
body .c-legal-content a {
  color: var(--P700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body .c-legal-content a:hover {
  color: var(--P500);
}

/* =========================================================
   Datasheet cards - equal height + CTA pinned bottom
========================================================= */

.c-ds-card {
  height: 100%;
}

.c-ds-card__body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.c-ds-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* =========================================================
   Article meta bar — author card + date
   (Replaced the old plain "Author: Name | Role" meta line
   2026-07-09; the .item-based rules were deleted with it.)
========================================================= */

body .c-article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uw-space-16);
  width: 100%;
  border-top: 1px solid var(--G600);
  padding-top: var(--uw-space-24);
}

body .c-article-meta__author {
  display: flex;
  align-items: center;
  gap: var(--uw-space-12);
}

body .c-article-meta__avatar {
  position: relative;
  overflow: hidden;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--P700);
  background: color-mix(in srgb, var(--P700) 8%, transparent);
  color: var(--P700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--uw-fw-600);
  font-size: var(--text-m);
  flex: 0 0 auto;
}

/* author image fills the circle and covers the initials fallback */
body .c-article-meta__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

body .c-article-meta__name {
  color: var(--G50);
  font-weight: var(--uw-fw-500);
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
}

body .c-article-meta__role,
body .c-article-meta__date {
  color: var(--G300);
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
}

body .c-article-meta__date {
  display: flex;
  align-items: center;
  gap: var(--uw-space-8);
  white-space: nowrap;
}

body .c-article-meta__date svg {
  width: 16px;
  height: 16px;
}


/* =========================================================
   FLUENT FORMS BASE (site-wide) — v2.4
   One rule set for ALL Fluent Forms, current and future.
   Scoped to .fluentform (plugin's own wrapper class) — no
   Bricks class and no form IDs needed.
   Visual reference: contact form design (gradient inputs,
   green focus outline). Per-form looks: v-* variable classes
   or the modifiers at the end of this block.
   Replaces: .c-tour-form__ff field styling, .c-newsletter-form
   field styling, and the fluent_form_7 contact block.
   NOTE: the submit selector is intentionally specific
   (form + wrapper + class) so it also beats Fluent Forms'
   per-form styler CSS if someone forgets to set the submit
   button to "No Style" in the FF editor. Setting "No Style"
   remains best practice.
   Loading animation on submit is intentionally NOT hidden.
========================================================= */

/* --- structure --- */
body .fluentform,
body .fluentform form,
body .fluentform fieldset {
  width: 100%;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* top-level field spacing — covers all three block types FF
   renders at fieldset level: plain groups, field containers
   (e.g. name field) AND column rows (ff-t-container) */
body .fluentform fieldset > .ff-field_container,
body .fluentform fieldset > .ff-t-container,
body .fluentform fieldset > .ff-el-group,
body .fluentform .ff-el-group {
  margin-bottom: var(--uw-space-24);
  text-align: left;
}

body .fluentform .ff-el-group:last-child,
body .fluentform fieldset > .ff-field_container:last-child,
body .fluentform fieldset > .ff-t-container:last-child {
  margin-bottom: 0;
}

/* field group: block layout on purpose. FF adds clearfix
   ::before/::after pseudos to .ff-el-group — as flex items they
   each add a phantom gap. Label spacing comes from the label
   margin below instead. */
body .fluentform .ff-el-group {
  width: 100%;
  padding: 0;
}

/* --- two-column rows (FF container fields) --- */
body .fluentform fieldset > .ff-t-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uw-space-24);
  width: 100%;
  padding: 0;
}

@media (min-width: 768px) {
  body .fluentform fieldset > .ff-t-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body .fluentform .ff-t-cell {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 0;
}

/* prevent FF inline flex-basis from shrinking grid cells */
body .fluentform fieldset > .ff-t-container > .ff-t-cell {
  flex-basis: auto;
}

/* no extra margins inside rows — the grid gap is the spacing */
body .fluentform .ff-t-container .ff-el-group,
body .fluentform .ff-field_container .ff-el-group,
body .fluentform .ff-t-cell .ff-el-group {
  margin-bottom: 0;
}

/* nested Name field: reset FF's inner layout, fill the column */
body .fluentform .ff-name-field-wrapper,
body .fluentform .ff-name-field-wrapper .ff-t-container,
body .fluentform .ff-name-field-wrapper .ff-t-cell,
body .fluentform .ff-name-field-wrapper .ff-el-group,
body .fluentform .ff-name-field-wrapper .ff-el-input--content {
  width: 100%;
  max-width: none;
  min-width: 0;
  flex: 1 1 auto;
}

/* name field: two subfields (e.g. Vorname/Nachname) sit side by
   side from 768px; single-subfield name fields fill the width.
   (The old contact-form fix forced display:block here, which
   stacked two-subfield name rows.) */
body .fluentform .ff-name-field-wrapper .ff-t-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uw-space-24);
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  body .fluentform .ff-name-field-wrapper .ff-t-container:has(> .ff-t-cell:nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body .fluentform .ff-name-field-wrapper input.ff-el-form-control {
  width: 100%;
  max-width: none;
  min-width: 0;
}

/* --- labels --- */
body .fluentform .ff-el-input--label {
  display: block;
  margin: 0 0 var(--uw-space-8) 0;
  padding: 0;
  color: var(--uw-text-muted, var(--G100));
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

body .fluentform .ff-el-input--label label {
  display: inline;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

body .fluentform .ff-el-input--content {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* --- text inputs, selects, textareas --- */
body .fluentform input[type="text"],
body .fluentform input[type="email"],
body .fluentform input[type="tel"],
body .fluentform input[type="number"],
body .fluentform select,
body .fluentform textarea,
body .fluentform .ff-el-form-control {
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  background: transparent;
  background-image: none;
  border: 1px solid var(--G600);
  border-radius: var(--form-input-radius, var(--uw-radius-12));
  color: var(--G50);
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
  box-shadow: none;
  outline: none;
}

body .fluentform input::placeholder,
body .fluentform textarea::placeholder,
body .fluentform .ff-el-form-control::placeholder {
  color: var(--G500);
  opacity: 1;
}

body .fluentform input:hover,
body .fluentform select:hover,
body .fluentform textarea:hover,
body .fluentform .ff-el-form-control:hover {
  border-color: var(--G500);
}

body .fluentform input:focus,
body .fluentform input:focus-visible,
body .fluentform select:focus,
body .fluentform textarea:focus,
body .fluentform .ff-el-form-control:focus,
body .fluentform .ff-el-form-control:focus-visible {
  border-color: var(--G600);
  outline: 2px solid color-mix(in srgb, var(--P700) 45%, transparent);
  outline-offset: 2px;
  box-shadow: none;
}

body .fluentform textarea {
  min-height: 120px;
  resize: vertical;
}

/* --- select arrow + placeholder color --- */
body .fluentform select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 8px 40px 8px 12px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--G200) 50%),
    linear-gradient(135deg, var(--G200) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

body .fluentform select:required:invalid,
body .fluentform select:not([required]):has(option:checked[value=""]) {
  color: var(--G500);
}

body .fluentform select:required:not(:invalid),
body .fluentform select option:not([value=""]) {
  color: var(--G50);
}

/* --- phone field (intl-tel-input) --- */
body .fluentform .iti {
  width: 100%;
  display: block;
}

body .fluentform .iti input.ff-el-form-control {
  width: 100%;
}

body .fluentform .iti__selected-country {
  height: 100%;
  min-height: 48px;
  padding: 0 8px 0 12px;
  border: 0;
  background: transparent;
  color: var(--G50);
}

body .fluentform .iti__arrow {
  border-top-color: var(--G200);
}

body .fluentform .iti__dropdown-content {
  background: var(--G700);
  border: 1px solid var(--G600);
  color: var(--G50);
  border-radius: var(--uw-radius-8);
  overflow: hidden;
}

body .fluentform .iti__search-input {
  background: var(--G800);
  color: var(--G50);
  border: 0;
  border-bottom: 1px solid var(--G600);
  border-radius: 0;
}

body .fluentform .iti__country {
  color: var(--G50);
}

body .fluentform .iti__country:hover,
body .fluentform .iti__highlight {
  background: var(--G600);
}

/* --- radio rows (any radio group) --- */
body .fluentform .ff-el-input--content:has(input[type="radio"]) {
  display: flex;
  align-items: flex-start;
  gap: var(--uw-space-24);
  flex-wrap: wrap;
}

/* Narrow containers (popups, tight columns): a wrapping radio
   row looks broken (2+1 layout), so below 400px of FORM width
   the options stack vertically instead. Container query on
   purpose — the trigger is the form's width, not the viewport
   (the same form lives in wide pages AND narrow popups). */
body .fluentform .ff-el-group:has(input[type="radio"]) {
  container-type: inline-size;
}

@container (max-width: 400px) {
  body .fluentform .ff-el-input--content:has(input[type="radio"]) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0; /* rhythm comes from the label padding below */
  }

  /* keep tap targets comfortable despite gap 0 */
  body .fluentform .ff-el-input--content:has(input[type="radio"]) .ff-el-form-check label {
    padding-block: 4px;
  }
}

/* Radio group labels are VISIBLE by default — future radio
   questions ("Bevorzugter Kontaktweg" etc.) need them.
   Hidden only where options are self-explanatory: the Anrede
   field, plus any field given the class ff-label-sr-only in
   the FF editor. Visually hidden but kept readable for
   screen readers (no display:none). */
body .fluentform .ff-newsletter-form__salutation > .ff-el-input--label,
body .fluentform .ff-label-sr-only > .ff-el-input--label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body .fluentform .ff-el-form-check:has(input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

body .fluentform .ff-el-form-check:has(input[type="radio"]) .ff-el-form-check-label,
body .fluentform .ff-el-form-check:has(input[type="radio"]) label {
  display: inline-flex;
  align-items: center;
  gap: var(--uw-space-12);
  margin: 0;
  color: var(--G100);
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
}

body .fluentform input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 2px solid var(--G200);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  flex: 0 0 20px;
}

body .fluentform input[type="radio"]:hover { border-color: var(--G100); }

body .fluentform input[type="radio"]:checked {
  border-color: var(--G200);
  background: radial-gradient(circle at center, var(--P700) 0 4px, transparent 4.5px);
}

body .fluentform input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 1px var(--G50);
}

/* --- checkboxes (consent etc.) --- */
body .fluentform .ff-el-group:has(input[type="checkbox"]) { width: 100%; }

body .fluentform .ff-el-group:has(input[type="checkbox"]) > .ff-el-input--label {
  display: none;
}

body .fluentform .ff-el-group:has(input[type="checkbox"]) .ff-el-form-check {
  margin: 0;
}

body .fluentform .ff-el-group:has(input[type="checkbox"]) .ff-el-form-check-label,
body .fluentform .ff-el-group:has(input[type="checkbox"]) .ff-el-form-check label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: var(--uw-space-12);
  align-items: start;
  margin: 0;
  color: var(--G100);
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
  letter-spacing: 0;
  cursor: pointer;
}

body .fluentform .ff-el-group:has(input[type="checkbox"]) .ff-el-form-check label > span {
  display: block;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

body .fluentform input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 2px solid var(--G200);
  border-radius: 4px;
  background: transparent;
  background-image: none;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  position: relative;
}

body .fluentform input[type="checkbox"]:hover { border-color: var(--G100); }

body .fluentform input[type="checkbox"]:checked {
  background: transparent;
  border-color: var(--G200);
}

body .fluentform input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 1.5px;
  width: 8px;
  height: 14px;
  border: solid var(--P700);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body .fluentform input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 1px var(--G50);
}

body .fluentform .ff-el-group:has(input[type="checkbox"]) a {
  color: var(--G50);
  text-decoration: underline;
}

body .fluentform .ff-el-group:has(input[type="checkbox"]) a:hover {
  color: var(--G200);
}

/* --- submit ---
   Selector is deliberately (0,3,2)-specific: it must beat
   Fluent Forms' per-form styler rule
   form.fluent_form_X .ff-btn-submit:not(.ff_btn_no_style)
   which is (0,3,1). Do not "simplify" this selector. */
body .fluentform form .ff_submit_btn_wrapper,
body .fluentform form .ff-btn-wrap {
  width: 100%;
  margin: 0;
  padding: 0;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  gap: 0;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
}

body .fluentform form .ff_submit_btn_wrapper .ff-btn-submit,
body .fluentform form .ff_submit_btn_wrapper button[type="submit"],
body .fluentform form .ff-btn-wrap .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 8px 16px;
  margin: 0;
  border: 0;
  border-radius: var(--uw-radius-pill);
  background: var(--P700);
  background-image: none;
  box-shadow: none;
  color: var(--G800);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: var(--uw-fw-500);
  text-align: center;
  cursor: pointer;
}

body .fluentform form .ff_submit_btn_wrapper .ff-btn-submit:hover,
body .fluentform form .ff_submit_btn_wrapper button[type="submit"]:hover,
body .fluentform form .ff-btn-wrap .ff-btn-submit:hover {
  background: var(--P500);
  color: var(--G800);
}

body .fluentform form .ff_submit_btn_wrapper .ff-btn-submit:focus-visible,
body .fluentform form .ff_submit_btn_wrapper button[type="submit"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--P700) 45%, transparent);
  outline-offset: 2px;
  box-shadow: none;
}

/* --- messages --- */
body .fluentform .ff-el-is-error input,
body .fluentform .ff-el-is-error select,
body .fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--R500);
}

body .fluentform .text-danger,
body .fluentform .ff-el-is-error .error,
body .fluentform .ff-el-help-message,
body .fluentform .ff-message-error {
  margin-top: var(--uw-space-8);
  color: var(--R500);
  font-size: var(--text-xs);
  line-height: var(--text-xs-line-height);
  text-align: left;
}

/* success message: subtle green box. Same design language as
   the glass header border and u-border-grad (color-mix at low
   opacity). Explicitly resets FF's default box so no plugin
   styling shines through. */
body .fluentform .ff-message-success {
  margin-top: var(--uw-space-16);
  padding: var(--uw-space-16);
  background: color-mix(in srgb, var(--P700) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--P700) 32%, transparent);
  border-radius: var(--uw-radius-12);
  color: var(--G50);
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
  text-align: left;
  box-shadow: none;
}


/* global error box (advanced validation, submit errors) */
body .fluentform .ff-errors-in-stack,
body .fluentform .ff-form-errors {
  margin-top: var(--uw-space-24);
  padding: var(--uw-space-16);
  background: transparent;
  border: 1px solid var(--R500);
  border-radius: var(--uw-radius-12);
  color: var(--R500);
  font-size: var(--text-xs);
  line-height: var(--text-xs-line-height);
}

body .fluentform .ff-errors-in-stack .error-clear { display: none; }

/* --- mobile --- */
@media (max-width: 767px) {
  body .fluentform fieldset > .ff-t-container {
    grid-template-columns: 1fr;
    gap: var(--uw-space-24);
  }

  body .fluentform textarea {
    min-height: 160px;
  }
}

/* --- modifiers (put on the Bricks wrapper around the form) --- */

/* submit hugs content, aligned right (newsletter style) */
.c-form--submit-end .ff_submit_btn_wrapper { justify-content: flex-end; }
.c-form--submit-end .ff-btn-submit,
.c-form--submit-end button[type="submit"] {
  width: auto;
  min-width: 148px;
  flex: 0 0 auto;
}

/* =========================================================
   Newsletter Form
   Reusable base form + page shell + popup shell
   Uses updated classes:
   - c-newsletter-form
   - c-newsletter-form-card
   - c-newsletter-popup
   - ff-newsletter-form__field
   - ff-newsletter-form__salutation
   - ff-newsletter-form__consent
   ========================================================= */

/* =========================================================
   PAGE SHELL
   Use when the form sits directly on a page
========================================================= */

body .c-newsletter-form-card,
body .c-newsletter-form-card.u-center {
  width: 100%;
  max-width: 496px;
  background: var(--G700);
  border-radius: calc(var(--uw-radius-8) * 2); /* 16 */
  padding: var(--uw-space-24);
  text-align: left;
}

body .c-newsletter-form-card.u-center,
body .c-newsletter-form-card.u-center .brxe-heading,
body .c-newsletter-form-card.u-center .brxe-text-basic,
body .c-newsletter-form-card.u-center .c-newsletter-form-card__title {
  text-align: left;
  align-items: flex-start;
}

.c-newsletter-form-card__title {
  margin: 0;
  color: var(--G50);
  font-size: var(--h4);
  line-height: var(--h4-line-height);
  font-weight: var(--uw-fw-600);
  text-align: left;
}

/* =========================================================
   POPUP SHELL
========================================================= */

.c-newsletter-popup {
  width: min(496px, calc(100vw - (var(--uw-space-16) * 2)));
  background: var(--G700);
  border-radius: calc(var(--uw-radius-8) * 2); /* 16 */
  padding: var(--uw-space-24);
}

.c-newsletter-popup__shell {
  display: flex;
  flex-direction: column;
  gap: var(--uw-space-24);
}

.c-newsletter-popup__head {
  display: flex;
  align-items: flex-start;
  gap: var(--uw-space-8);
}

.c-newsletter-popup__title {
  flex: 1 1 auto;
  margin: 0;
  color: var(--G50);
  font-size: var(--h4);
  line-height: var(--h4-line-height);
  font-weight: var(--uw-fw-600);
  text-align: left;
}

.c-newsletter-popup__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--uw-space-24);
  height: var(--uw-space-24);
  min-width: var(--uw-space-24);
  min-height: var(--uw-space-24);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--G200);
  cursor: pointer;
}

.c-newsletter-popup__close:hover {
  color: var(--G100);
}

.c-newsletter-popup__close svg,
.c-newsletter-popup__close i {
  display: block;
  width: var(--uw-space-24);
  height: var(--uw-space-24);
  fill: currentColor;
}


/* center the whole form card inside the content container */
body .c-newsletter-form-card {
  margin-inline: auto;
}

/* keep the inner stack full-width and left aligned */
body .c-newsletter-form-card > .l-stack,
body .c-newsletter-form-card .c-newsletter-form {
  width: 100%;
  align-items: stretch;
  text-align: left;
}

/* keep title and form text left aligned */
body .c-newsletter-form-card .c-newsletter-form-card__title,
body .c-newsletter-form-card .ff-el-group,
body .c-newsletter-form-card .ff-el-input--label,
body .c-newsletter-form-card .ff-el-input--content,
body .c-newsletter-form-card .ff-el-form-check,
body .c-newsletter-form-card .ff-el-form-check-label {
  text-align: left;
}


/* =========================================================
   Partner tabs + partner groups
========================================================= */

body .c-tabs--partners {
  width: 100%;
}

body .c-tabs--partners .tab-menu[role="tablist"] {
  display: flex;
  align-items: flex-start;
  gap: var(--uw-space-24);
  margin: 0 0 var(--uw-space-48) 0;
  padding: 0;
  flex-wrap: wrap;
}

body .c-tabs--partners .tab-title[role="tab"] {
  min-width: 0;
  min-height: 32px;
  height: auto;
  padding: 4px 12px;
  border-radius: var(--uw-radius-pill);
  background: var(--G700);
  color: var(--G50);
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
}

body .c-tabs--partners .tab-title[role="tab"][aria-selected="true"],
body .c-tabs--partners .tab-title[role="tab"].brx-open {
  background: var(--P700);
  color: var(--G800);
  font-weight: var(--uw-fw-500);
}

body .c-tabs--partners .tab-title[role="tab"] .brxe-text-basic {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  white-space: nowrap;
}

body .c-tabs--partners .tab-content,
body .c-tabs--partners .tab-pane {
  width: 100%;
}

body .c-partner-group {
  width: 100%;
}

body .c-partner-group__heading {
  margin: 0;
  color: var(--G50);
  font-size: var(--h3);
  line-height: var(--h3-line-height);
  font-weight: var(--uw-fw-600);
  text-align: left;
}

body .c-partner-grid {
  width: 100%;
}

body .c-partner-grid > * {
  min-width: 0;
}

body .c-partner-group__load-more {
  align-self: center;
  width: fit-content;
  margin-inline: auto;
}

/* Mobile tabs */
@media (max-width: 767px) {
  body .c-tabs--partners .tab-menu[role="tablist"] {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--uw-space-8);
    margin-bottom: var(--uw-space-24);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body .c-tabs--partners .tab-menu[role="tablist"]::-webkit-scrollbar {
    display: none;
  }

  body .c-tabs--partners .tab-title[role="tab"] {
    flex: 0 0 auto;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
  }

  body .c-partner-grid {
    grid-template-columns: 1fr;
    gap: var(--uw-space-16);
  }
}

/* =========================================================
   Partner cards correction patch
   Fixes current loop-grid render
========================================================= */

body .c-tabs--partners,
body .c-tabs--partners .tab-content,
body .c-tabs--partners .tab-pane,
body .c-partner-group,
body .c-partner-grid {
  width: 100%;
}

/* Partner group heading */
body .c-partner-group__heading,
body .c-partner-group__headin {
  margin: 0;
  color: var(--G50);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--h3);
  line-height: var(--h3-line-height);
  font-weight: var(--uw-fw-600);
  text-align: left;
}

/* Grid */
body .c-partner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--uw-space-24);
}

body .c-partner-grid > * {
  min-width: 0;
}

/* Card shell */
body .c-partner-card,
body .c-partner-card.c-card {
  width: 100%;
  height: 464px;
  min-height: 0;
  padding: var(--uw-space-12);
  border-radius: var(--uw-radius-12);
  background: var(--G700);
  font-family: Inter, system-ui, sans-serif;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--uw-space-16);
  overflow: hidden;
}

/* Image frame */
body .c-partner-card__frame {
  width: 100%;
  height: 200px;
  min-height: 200px;
  padding: 0;
  margin: 0;
  border-radius: var(--uw-radius-8);
  background: transparent;
  display: block;
  overflow: hidden;
}

/* Kill accidental stack behavior on frame */
body .c-partner-card__frame.l-stack {
  gap: 0;
}

/* Image fills the 275/200 media frame */
body .c-partner-card__logo,
body .c-partner-card__frame img,
body .c-partner-card__frame picture img,
body .c-partner-card__frame .brxe-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  border-radius: var(--uw-radius-8);
}

/* Title */
body .c-partner-card__title {
  width: 100%;
  margin: 0;
  color: var(--G50);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: var(--uw-fw-600);
  text-align: left;
}

/* Description */
body .c-partner-card__desc {
  width: 100%;
  max-height: calc(var(--text-m-line-height) * 6);
  margin: 0;
  overflow: hidden;
  color: var(--G100);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
  text-align: left;
}

/* Normalize rich post content inside desc */
body .c-partner-card__desc p,
body .c-partner-card__desc a,
body .c-partner-card__desc span,
body .c-partner-card__desc li {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

body .c-partner-card__desc p {
  margin: 0;
}

body .c-partner-card__desc p:not(:first-child),
body .c-partner-card__desc ul,
body .c-partner-card__desc ol,
body .c-partner-card__desc .wp-block-list {
  display: none;
}

body .c-partner-card__desc a {
  text-decoration: none;
}

/* CTA pinned bottom */
body .c-partner-card__cta {
  margin-top: auto;
  align-self: flex-start;
  width: fit-content;
  min-height: 0;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--G50);

  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--uw-space-8);

  font-family: Inter, system-ui, sans-serif;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: var(--uw-fw-500);
  text-decoration: none;
}

body .c-partner-card__cta:hover {
  color: var(--G200);
  background: transparent;
}

body .c-partner-card__cta svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

body .c-partner-card__cta svg path {
  fill: currentColor;
}

/* If c-btn-icon-right is still present, force icon left visually */
body .c-partner-card__cta.c-btn-icon-right svg {
  order: -1;
}

/* Reset Bricks button defaults */
body .brxe-button.c-partner-card__cta.c-btn,
body .bricks-button.c-partner-card__cta.c-btn {
  padding: 0;
  border: 0;
  background: transparent;
  min-height: 0;
}

/* Load more */
body .c-partner-group__load-more {
  align-self: center;
  width: fit-content;
  margin-inline: auto;
}

/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {
  body .c-partner-grid {
    grid-template-columns: 1fr;
    gap: var(--uw-space-16);
  }

  body .c-partner-card,
  body .c-partner-card.c-card {
    height: auto;
    min-height: 0;
  }

  body .c-partner-card__frame {
    height: 200px;
    min-height: 200px;
  }

  body .c-partner-card__cta {
    margin-top: 0;
  }
}

/* Hide partner Load More button when Bricks has no more results */
body .c-partner-group__load-more.brx-load-more-hidden {
  display: none;
}

/* =========================================================
   Certification cards
   Fixed media, equal-height grid cards, CTA pinned bottom
========================================================= */

body .c-certifications-section .l-grid-fixed {
  align-items: stretch;
}

body .c-certifications-section .l-grid-fixed > * {
  height: 100%;
  min-width: 0;
}

body .c-cert-card,
body .c-card.c-cert-card {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  background: var(--G700);
  border-radius: var(--uw-radius-12);
}

/* Fixed image/media area */
body .c-cert-card__media {
  width: 100%;
  height: 200px;
  min-height: 200px;
  flex: 0 0 200px;
  overflow: hidden;
  border-radius: var(--uw-radius-12) var(--uw-radius-12) 0 0;
}

/* Image fills the fixed media area */
body .c-cert-card__media img,
body .c-cert-card__media .brxe-image,
body .c-cert-card__media picture img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

/* Body takes remaining height and grows with text */
body .c-cert-card > .c-card__body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding: var(--uw-space-24);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--uw-space-16);
}

/* Normalize text spacing */
body .c-cert-card > .c-card__body > .brxe-text-basic,
body .c-cert-card > .c-card__body > .brxe-text-basic p {
  margin: 0;
}

/* Push CTA to the bottom of each card */
body .c-cert-card .c-cert-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* Mobile */
@media (max-width: 767px) {
  body .c-certifications-section .l-grid-fixed {
    grid-template-columns: 1fr;
  }

  body .c-cert-card,
  body .c-card.c-cert-card {
    height: auto;
  }

  body .c-cert-card__media {
    height: 200px;
    min-height: 200px;
    flex-basis: 200px;
  }

  body .c-cert-card > .c-card__body {
    padding: var(--uw-space-16);
  }

  body .c-cert-card .c-cert-card__cta {
    margin-top: var(--uw-space-16);
  }
}


/* #########################################################
   #########################################################

   ASHOT PART BEGINS HERE
   (former separate snippet, merged 2026-07-08)

   Contains: contact-section transition helper, Supported
   Device popup + cards, section pattern background variables,
   Solution 2 pattern, header mega menu resets, header
   responsive switch (1100px), header language switcher
   dropdown, sitewide content links.

   NOTE ON LOAD ORDER: this part used to load AFTER the
   Mobile System CSS. Merged here it loads BEFORE it, so on
   equal specificity the Mobile CSS now wins ties. Known
   overlap areas to check after changes: header at narrow
   viewports, Solution 2 on mobile.

   #########################################################
   ######################################################### */

/* =========================================================
   Contact section: transition helper
   Hide old Bricks form while Fluent Form replacement is live.
   (All Fluent Forms field styling now lives in the
   FLUENT FORMS BASE inside System CSS.)
========================================================= */

body .c-contact .c-contact__form > form.brxe-form.c-form--contact {
  display: none;
}

/* =========================================================
   Supported Device Popup
   Dynamic Supported Devices details popup
   Uses:
   - Featured image
   - ACF repeater: device_specs
   - spec_label / spec_value
========================================================= */

body .c-device-popup {
  width: min(592px, calc(100vw - (var(--uw-space-16) * 2)));
  max-height: min(990px, calc(100vh - (var(--uw-space-16) * 2)));
  padding: var(--uw-space-24);
  border-radius: calc(var(--uw-radius-8) * 2);
  background: var(--G700);
  display: flex;
  flex-direction: column;
  gap: var(--uw-space-24);
  overflow-y: auto;
}

/* Header */
body .c-device-popup__head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--uw-space-8);
}

body .c-device-popup__title {
  flex: 1 1 auto;
  margin: 0;
  color: var(--G50);
  font-size: var(--h4);
  line-height: var(--h4-line-height);
  font-weight: var(--uw-fw-600);
}

body .c-device-popup__close {
  width: var(--uw-space-24);
  height: var(--uw-space-24);
  min-width: var(--uw-space-24);
  min-height: var(--uw-space-24);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--G200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

body .c-device-popup__close:hover {
  color: var(--G50);
}

body .c-device-popup__close svg,
body .c-device-popup__close svg path {
  width: var(--uw-space-24);
  height: var(--uw-space-24);
  fill: currentColor;
}

/* Image panel */
body .c-device-popup__media {
  width: 100%;
  height: 252px;
  min-height: 252px;
  padding: 10px;
  background: var(--G50);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body .c-device-popup__img,
body .c-device-popup__media img,
body .c-device-popup__media picture img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Specs table */
body .c-device-popup__specs {
  width: 100%;
  display: flex;
  flex-direction: column;
}

body .c-device-popup__spec-row {
  width: 100%;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: var(--uw-space-24);
  align-items: start;
  padding: 6px;
}

body .c-device-popup__spec-row:nth-child(odd) {
  background: var(--G600);
}

body .c-device-popup__spec-label,
body .c-device-popup__spec-value,
body .c-device-popup__spec-value p,
body .c-device-popup__spec-value li {
  color: var(--G100);
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
  font-weight: 400;
}

body .c-device-popup__spec-label {
  margin: 0;
}

body .c-device-popup__spec-value {
  min-width: 0;
}

body .c-device-popup__spec-value p {
  margin: 0 0 var(--uw-space-8) 0;
}

body .c-device-popup__spec-value p:last-child {
  margin-bottom: 0;
}

/* Lists use green check icon */
body .c-device-popup__spec-value ul,
body .c-device-popup__spec-value ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

body .c-device-popup__spec-value li {
  position: relative;
  margin: 0 0 var(--uw-space-8) 0;
  padding-left: 28px;
}

body .c-device-popup__spec-value li:last-child {
  margin-bottom: 0;
}

body .c-device-popup__spec-value li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  background: var(--P700);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.32826 13.2288L3.85326 9.75378L2.66992 10.9288L7.32826 15.5871L17.3283 5.58711L16.1533 4.41211L7.32826 13.2288Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.32826 13.2288L3.85326 9.75378L2.66992 10.9288L7.32826 15.5871L17.3283 5.58711L16.1533 4.41211L7.32826 13.2288Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Nested list spacing */
body .c-device-popup__spec-value li ul,
body .c-device-popup__spec-value li ol {
  margin-top: var(--uw-space-8);
}

/* Hide genuinely empty repeater rows if one slips through */
body .c-device-popup__spec-row:has(.c-device-popup__spec-label:empty),
body .c-device-popup__spec-row:has(.c-device-popup__spec-value:empty) {
  display: none;
}

/* Mobile */
@media (max-width: 767px) {
  body .c-device-popup {
    width: calc(100vw - (var(--uw-space-16) * 2));
    max-height: calc(100vh - (var(--uw-space-16) * 2));
    padding: var(--uw-space-16);
    gap: var(--uw-space-16);
  }

  body .c-device-popup__media {
    height: 180px;
    min-height: 180px;
  }

  body .c-device-popup__spec-row {
    grid-template-columns: 1fr;
    gap: var(--uw-space-4);
    padding: var(--uw-space-8);
  }

  body .c-device-popup__spec-label {
    color: var(--G50);
    font-weight: var(--uw-fw-500);
  }
}

/* =========================================================
   Supported Device cards
========================================================= */

body .c-prod-card {
  width: 100%;
  background: var(--G700);
  border-radius: var(--uw-radius-8);
  padding: var(--uw-space-12);
}

body .c-prod-card__row {
  display: flex;
  align-items: stretch;
  gap: var(--uw-space-16);
}

body .c-prod-card__img {
  width: 148px;
  height: 148px;
  min-width: 148px;
  object-fit: contain;
  object-position: center;
  background: var(--G50);
  border-radius: var(--uw-radius-8);
}

body .c-prod-card__content {
  flex: 1 1 auto;
  min-width: 0;
}

body .c-prod-card__title {
  color: var(--G50);
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: var(--uw-fw-600);
}

body .c-prod-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 767px) {
  body .c-prod-card__row {
    align-items: flex-start;
  }

  body .c-prod-card__img {
    width: 112px;
    height: 112px;
    min-width: 112px;
  }
}

/* =========================================================
   Supported Device Popup shell corrections
   Fixes:
   - white popup wrapper
   - wrong overlay color
   - non-centered popup
   - AJAX white loading box
========================================================= */

/* Bricks popup overlay */
body .brx-popup {
  background: rgba(18, 18, 18, 0.72);
}

/* Bricks popup content wrapper must not create a white panel */
body .brx-popup .brx-popup-content {
  background: var(--G700);
  box-shadow: none;
  padding: 0;
  border: 0;
  width: auto;
  max-width: none;
  border-radius: var(--uw-radius-16);
}

/* Center popup content */
body .brx-popup {
  align-items: center;
  justify-content: center;
}

/* Prevent AJAX loading state from showing a white rectangle */
body .brx-popup .brx-popup-content:empty,
body .brx-popup .brx-popup-content.brx-loading,
body .brx-popup .brx-popup-content.bricks-loading {
  background: transparent;
  box-shadow: none;
}

/* Any direct wrapper inside popup content should not add white background */
body .brx-popup .brx-popup-content > section,
body .brx-popup .brx-popup-content > div:not(.c-device-popup) {
  background: transparent;
}

/* Supported Device popup actual card */
body .brx-popup .c-device-popup {
  margin: auto;
  background: var(--G700);
  box-shadow: none;
}

/* Close icon */
body .c-device-popup__close {
  cursor: pointer;
  background: transparent;
}

body .c-device-popup__close svg,
body .c-device-popup__close svg path {
  fill: currentColor;
}

.c-supported-devices__load-more {
  align-self: center;
}

/* Checklist icons.
   Green is the default (Figma). Contexts can retint via the
   --checklist-icon hook without duplicating icon rules —
   see the pricing switcher exception below. */
body .c-checklist li .icon {
  color: var(--checklist-icon, var(--P700));
}

/* Pricing switcher tabs: muted white icons (G100 replaces the
   old non-token #dddedf). Scoped to the component class, so it
   applies on every page the switcher is used. */
body .c-tabs--pricing-switcher .c-checklist {
  --checklist-icon: var(--G100);
}

body .c-checklist li .icon svg,
body .c-checklist li .icon svg path {
  fill: currentColor;
}


/* =========================================================
   Section pattern background variables
========================================================= */

body .v-pattern-bg-700 {
  --section-pattern-bg: var(--G700);
  --section-pattern-opacity: 1;
}

/* =========================================================
   Solution 2 pattern background
========================================================= */

body .l-section.c-solution-2 {
  position: relative;
  isolation: isolate;
  background-color: var(--section-pattern-bg, transparent);
  overflow: hidden;
}

body .l-section.c-solution-2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--section-pattern-opacity, 1);
  background:
    radial-gradient(circle at 20% 20%, rgba(27, 215, 97, 0.08), transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(27, 215, 97, 0.05), transparent 32%);
}

/* =========================================================
   Header mega menu semantic list reset
========================================================= */

body .c-header__mega-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

body .c-header__mega-list-item {
  margin: 0;
  padding: 0;
}

/* =========================================================
   Header responsive switch
   Desktop nav switches to mobile controls at 1100px
========================================================= */

@media (max-width: 1100px) {
  body #brx-header .c-header__shell,
  body #brx-header .c-header__frame,
  body #brx-header .c-header__bar,
  body #brx-header .c-header__stage {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body #brx-header .c-header__frame,
  body #brx-header .c-header__bar {
    display: flex;
    align-items: center;
  }

  body #brx-header .c-header__bar {
    justify-content: flex-end;
    gap: var(--uw-space-24);
  }

  body #brx-header .c-header__stage {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Hide only the desktop nav list */
  body #brx-header .c-header__nav.brxe-nav-menu > .bricks-nav-menu-wrapper {
    display: none;
  }

  /* Keep the nav element alive for the hamburger */
  body #brx-header .c-header__nav.brxe-nav-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    order: 1;
  }

  /* Show hamburger */
  body #brx-header .c-header__nav.brxe-nav-menu > .bricks-mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--G50);
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 3;
  }

  /* Make hamburger bars visible on dark header */
  body #brx-header .c-header__nav.brxe-nav-menu > .bricks-mobile-menu-toggle .bar-top,
  body #brx-header .c-header__nav.brxe-nav-menu > .bricks-mobile-menu-toggle .bar-center,
  body #brx-header .c-header__nav.brxe-nav-menu > .bricks-mobile-menu-toggle .bar-bottom {
    display: block;
    width: 28px;
    height: 2px;
    background-color: var(--G50);
    border-radius: var(--uw-radius-pill);
  }

  /* Keep icons/actions visible */
  body #brx-header .c-header__actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--uw-space-16);
    order: 2;
  }

  body #brx-header .c-header__icon-search,
  body #brx-header .c-header__icon-globe {
    display: inline-flex;
    flex: 0 0 auto;
  }

  /* Hide only login text */
  body #brx-header .c-header__login {
    display: none;
  }

  /* Keep CTA through tablet widths */
  body #brx-header .c-header__cta {
    display: inline-flex;
    white-space: nowrap;
  }
}

/* Small mobile cleanup */
@media (max-width: 767px) {
  body #brx-header .c-header__shell {
    border-radius: var(--uw-radius-16);
  }

  body #brx-header .c-header__bar {
    gap: var(--uw-space-16);
  }

  body #brx-header .c-header__actions {
    gap: var(--uw-space-12);
  }

  body #brx-header .c-header__cta {
    display: none;
  }
}

/* Very small mobile: remove globe, keep search + hamburger */
@media (max-width: 480px) {
  body #brx-header .c-header__icon-globe {
    display: none;
  }
}

/* ---------- Footer: switch earlier, before 1280 overflow ---------- */

@media (max-width: 1280px) {
  body #brx-footer,
  body .c-footer {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body .c-footer__inner,
  body .c-footer__main,
  body .c-footer__grid,
  body .c-footer__top,
  body .c-footer__bottom {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body .c-footer__grid,
  body .c-footer__main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  body .c-footer__brand,
  body .c-footer__newsletter {
    grid-column: 1 / -1;
  }

  body .c-footer__col,
  body .c-footer__nav,
  body .c-footer__list {
    min-width: 0;
  }
}

/* Footer tablet/mobile stacking */
@media (max-width: 767px) {
  body .c-footer__grid,
  body .c-footer__main {
    grid-template-columns: 1fr;
  }

  /* Copyright + Social-Icons bleiben EINE Zeile (Copyright links,
     Icons rechts) — wie Desktop/Figma; nicht stapeln. */
  body .c-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--uw-space-16);
  }

  body .c-footer__social {
    justify-content: flex-end;
  }
}

/* =========================================================
   Header language switcher dropdown
========================================================= */

body .c-header__lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body .c-header__lang-toggle {
  /* width:auto statt fix 32px: neben dem Globus steht der aktuelle
     Sprachcode ("DE ▾", injiziert von Header.js) — Zustand sichtbar,
     Funktion verständlich (Philipp 2026-07-22). */
  width: auto;
  min-width: 32px;
  height: 32px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--G50);
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

body .c-header__lang-toggle .uw-lang-code {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
  font-weight: var(--uw-fw-500);
  color: var(--G50);
}

/* Kleiner Öffnungs-Indikator hinter dem Code. */
body .c-header__lang-toggle .uw-lang-code::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-right: 1.5px solid var(--G200);
  border-bottom: 1.5px solid var(--G200);
  transform: rotate(45deg) translate(-1px, -1px);
}

/* ≤767px ist der Header eng — der Drawer hat eigene Sprach-Pills,
   das Label am Globus darf weichen. */
@media (max-width: 767px) {
  body .c-header__lang-toggle .uw-lang-code {
    display: none;
  }
}

body .c-header__lang-toggle svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Dropdown panel centered under globe */
body .c-header__lang-dropdown {
  position: absolute;
  top: calc(100% + var(--uw-space-12));
  left: 50%;
  z-index: 50;

  min-width: 120px;
  padding: var(--uw-space-24);
  border-radius: var(--uw-radius-24);
  background: var(--G700);
  border: 1px solid var(--G600);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 160ms ease;
}

body .c-header__lang.is-open .c-header__lang-dropdown,
body .c-header__lang:focus-within .c-header__lang-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* WPML list reset */
body .c-header__lang-dropdown ul,
body .c-header__lang-dropdown .wpml-ls,
body .c-header__lang-dropdown .wpml-ls ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body .c-header__lang-dropdown .wpml-ls ul,
body .c-header__lang-dropdown ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--uw-space-12);
}

body .c-header__lang-dropdown li,
body .c-header__lang-dropdown .wpml-ls-item {
  margin: 0;
  padding: 0;
}

/* Put active language second */
body .c-header__lang-dropdown .wpml-ls-item {
  order: 1;
}

body .c-header__lang-dropdown .wpml-ls-current-language {
  order: 2;
}

/* Language pills - default gray */
body .c-header__lang-dropdown a,
body .c-header__lang-dropdown .wpml-ls-link {
  width: 80px;
  min-height: 22px;
  padding: 2px 12px;
  border-radius: var(--uw-radius-pill);
  background: var(--G600);
  color: var(--G50);
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--uw-space-8);

  font-weight: var(--uw-fw-500);
  font-size: var(--text-s);
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
}

/* Active language - green */
body .c-header__lang-dropdown .wpml-ls-current-language > a,
body .c-header__lang-dropdown .wpml-ls-current-language > .wpml-ls-link {
  background: var(--P700);
  color: var(--G800);
}

/* Hover for all language pills */
body .c-header__lang-dropdown a:hover,
body .c-header__lang-dropdown a:focus-visible,
body .c-header__lang-dropdown .wpml-ls-link:hover,
body .c-header__lang-dropdown .wpml-ls-link:focus-visible {
  background: var(--P500);
  color: var(--G800);
}

/* Optional: hide WPML flags if they appear */
body .c-header__lang-dropdown .wpml-ls-flag {
  display: none;
}

/* =========================================================
   Sitewide standard content links
   Applies to text/rich text/Gutenberg content only
========================================================= */

body :where(
  .brxe-text,
  .brxe-text-basic,
  .brxe-post-content,
  .entry-content,
  .post-content,
  .wp-block-post-content,
  .wp-block-paragraph,
  .wp-block-list,
  .wp-block-quote,
  .c-content,
  .c-richtext
) a:where(
  :not(.c-btn):not(.bricks-button):not([class*="c-btn"]):not([class*="button"])
) {
  color: var(--P700);
  text-decoration-color: currentColor;
  text-underline-offset: 0.15em;
}

body :where(
  .brxe-text,
  .brxe-text-basic,
  .brxe-post-content,
  .entry-content,
  .post-content,
  .wp-block-post-content,
  .wp-block-paragraph,
  .wp-block-list,
  .wp-block-quote,
  .c-content,
  .c-richtext
) a:where(
  :not(.c-btn):not(.bricks-button):not([class*="c-btn"]):not([class*="button"])
):hover,
body :where(
  .brxe-text,
  .brxe-text-basic,
  .brxe-post-content,
  .entry-content,
  .post-content,
  .wp-block-post-content,
  .wp-block-paragraph,
  .wp-block-list,
  .wp-block-quote,
  .c-content,
  .c-richtext
) a:where(
  :not(.c-btn):not(.bricks-button):not([class*="c-btn"]):not([class*="button"])
):focus-visible {
  color: var(--P500);
}

/* =========================================================
   Breadcrumb responsive spacing
   Keeps breadcrumbs aligned with content/header on tablet
========================================================= */
@media (max-width: 1100px) {
  body .v-container--header > .c-breadcrumbs {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--uw-space-24);
  }
}

@media (max-width: 767px) {
  body .v-container--header > .c-breadcrumbs {
    padding-inline: var(--uw-space-24);
  }
}


/* =========================================================
   Header sticky logo switch on compact/mobile header
   Keeps desktop behavior, fixes 1100px and below
========================================================= */

@media (max-width: 1100px) {
  body #brx-header .c-header__brand-link {
    display: inline-flex;
    align-items: center;
  }

  body #brx-header .c-header__logo--top {
    display: block;
  }

  body #brx-header .c-header__logo--sticky {
    display: none;
  }

  body #brx-header .c-header__shell.is-sticky .c-header__logo--top {
    display: none;
  }

  body #brx-header .c-header__shell.is-sticky .c-header__logo--sticky {
    display: block;
    width: 64px;
    height: auto;
  }
}

/* =========================================================
   Hidden attribute override
   Required because Automatic.css applies section grid with !important
========================================================= */

body #brx-content section[hidden] {
  display: none !important;
}

/* TEMP: remove wrong full-height behavior from spacing utility */
body .v-section-pad-128 {
  height: auto;
}

.c-list .description {
    margin-left: 28px;
    margin-bottom: 12px;
}


/* =========================================================
   Newsletter Success Popup
========================================================= */

.c-newsletter-success-popup {
  width: min(100%, 1100px);
  padding: var(--uw-space-96) var(--uw-space-48);
  text-align: center;
  background: var(--G900);
  border-radius: 16px;
}

.c-newsletter-success-popup h1,
.c-newsletter-success-popup h2 {
  color: var(--white);
}

.c-newsletter-success-popup h1 span,
.c-newsletter-success-popup h2 span {
  color: var(--P700);
}

.c-newsletter-success-popup p {
  color: var(--G100);
}

@media (max-width: 767px) {
  .c-newsletter-success-popup {
    padding: var(--uw-space-64) var(--uw-space-24);
  }
}

/* =========================================================
   Whitepaper Single Button
========================================================= */

.c-whitepaper-trigger {
  display: inline-flex;
  width: auto;
  max-width: max-content;
  min-width: 268px;
  flex: 0 0 auto;
  align-self: flex-start;
  cursor: pointer;
}

@media (max-width: 767px) {
  .c-whitepaper-trigger {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}


/* =========================================================
   Whitepaper Form Popup
========================================================= */

body .c-whitepaper-popup {
  display: flex;
  flex-direction: column;
  gap: var(--uw-space-24);
  width: min(calc(100vw - 32px), 780px);
  max-height: calc(100dvh - 48px);
  padding: var(--uw-space-24);
  background: var(--G700);
  border-radius: 16px;
  overflow-y: auto;
  max-width: 100%;
}

.c-whitepaper-popup__header {
  display: flex;
  align-items: flex-start;
  gap: var(--uw-space-8);
  width: 100%;
}

.c-whitepaper-popup__header h2,
.c-whitepaper-popup__header h3,
.c-whitepaper-popup__header h4 {
  flex: 1 1 auto;
  margin: 0;
  color: var(--white);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

.c-whitepaper-popup__close {
  flex: 0 0 auto;
  color: var(--G200);
  cursor: pointer;
}

.c-whitepaper-popup__form[hidden] {
  display: none !important;
}

/* Fluent Forms layout inside popup */
.c-whitepaper-popup .frm-fluent-form fieldset {
  display: grid;
  column-gap: var(--uw-space-24);
  row-gap: var(--uw-space-24);
}

.c-whitepaper-popup .ff-el-group {
  margin: 0;
}

.c-whitepaper-popup .ff-el-input--label label {
  color: var(--G200);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}

.c-whitepaper-popup .ff-el-form-control {
  height: 48px;
  padding: 10px 8px;
  color: var(--white);
  background: var(--G700);
  border: 1px solid var(--G600);
  border-radius: 8px;
  font-size: 16px;
  line-height: 24px;
}

.c-whitepaper-popup .ff-el-form-control::placeholder {
  color: var(--G400);
}

.c-whitepaper-popup .ff-el-form-check,
.c-whitepaper-popup .ff-el-group:has(input[type="checkbox"]),
.c-whitepaper-popup .ff_submit_btn_wrapper {
  grid-column: 1 / -1;
}

.c-whitepaper-popup .ff-el-form-check label,
.c-whitepaper-popup .ff-el-form-check span,
.c-whitepaper-popup .ff-el-group:has(input[type="checkbox"]) label {
  color: var(--G100);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.c-whitepaper-popup .ff-el-form-check a,
.c-whitepaper-popup .ff-el-group:has(input[type="checkbox"]) a {
  color: var(--P700);
}

.c-whitepaper-popup .ff_submit_btn_wrapper {
  display: flex;
  justify-content: flex-end;
}

.c-whitepaper-popup .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 268px;
  height: 48px;
  padding: 8px 16px;
  color: var(--G800);
  background: var(--P700);
  border: 0;
  border-radius: 100px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

.c-whitepaper-popup .ff-btn-submit:hover {
  background: var(--P500);
}

@media (max-width: 767px) {
  .c-whitepaper-popup {
    width: min(calc(100vw - 24px), 780px);
    max-height: calc(100dvh - 24px);
    padding: var(--uw-space-20);
  }

  .c-whitepaper-popup .frm-fluent-form fieldset {
    grid-template-columns: 1fr;
  }

  .c-whitepaper-popup .ff_submit_btn_wrapper,
  .c-whitepaper-popup .ff-btn-submit {
    width: 100%;
  }
}

/* Hide whitepaper CTA button by default on single posts */
body.single-post .c-whitepaper-trigger {
  display: none;
}

/* Show only on posts inside the Whitepaper category */
body.single-post.category-whitepaper .c-whitepaper-trigger {
  display: inline-flex;
}

/* Single post FAQ relocated outside post content */
.c-textblock__faq {
  width: 100%;
}

.c-textblock__faq .l-container,
.c-textblock__faq .v-container--content {
  width: 100%;
}
/* =========================================================
   Reduzierte Bewegung: alle Header-Transitions (Mega-Menü,
   Drawer, Chevrons, Backdrop) respektieren die OS-Einstellung.
   0.01ms statt 0: transitionend-Events feuern weiter, JS-Logik
   (z.B. der 320ms-Filter-Timer) bleibt unberührt.
========================================================= */
@media (prefers-reduced-motion: reduce) {
  #brx-header *,
  #brx-header *::before,
  #brx-header *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* =========================================================
   POST FAQ
   Gutenberg / WordPress Accordion adapter
   Matches the existing Bricks c-faq component
========================================================= */

.c-post-faq {
  width: 100%;
  margin: 0;
  padding: 0;
}

/*
 * Recreate:
 * l-container v-container--content
 * + l-stack v-gap-48
 */
.c-post-faq > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--uw-container-content);
  margin-inline: auto;
  padding: 0;
}

/* FAQ section heading */
.c-post-faq > .wp-block-group__inner-container > .wp-block-heading {
  width: 100%;
  margin: 0;
  margin-bottom: var(--uw-space-48);
}

/* Remove Gutenberg layout margins between accordion blocks */
.c-post-faq .wp-block-accordion {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Each Gutenberg accordion block currently contains one item */
.c-post-faq .wp-block-accordion-item {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--G600);
}

/* Remove Gutenberg heading margins */
.c-post-faq .wp-block-accordion-heading {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Question row */
.c-post-faq .wp-block-accordion-heading__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uw-space-24);

  width: 100%;
  min-height: 0;
  margin: 0;
  padding: var(--uw-space-24) 0;

  appearance: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;

  color: var(--G50);
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* Match the Bricks h4 accordion titles */
.c-post-faq .wp-block-accordion-heading__toggle-title {
  flex: 1 1 auto;
  min-width: 0;

  color: inherit;
  font-size: var(--h4);
  line-height: var(--h4-lh, 1.4);
  font-weight: var(--uw-fw-600);

  text-decoration: none;
}

/* Prevent theme/global link-like hover styling */
.c-post-faq .wp-block-accordion-heading__toggle:hover,
.c-post-faq .wp-block-accordion-heading__toggle:focus,
.c-post-faq .wp-block-accordion-heading__toggle:active,
.c-post-faq .wp-block-accordion-heading__toggle:hover
  .wp-block-accordion-heading__toggle-title,
.c-post-faq .wp-block-accordion-heading__toggle:focus
  .wp-block-accordion-heading__toggle-title {
  color: var(--G50);
  text-decoration: none;
}

/* Keep an accessible keyboard focus state */
.c-post-faq .wp-block-accordion-heading__toggle:focus-visible {
  outline: 2px solid var(--P700);
  outline-offset: 4px;
}

/* Plus / close icon */
.c-post-faq .wp-block-accordion-heading__toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  color: var(--G200);
  font-size: 28px;
  line-height: 1;
  font-weight: var(--uw-fw-400);

  text-decoration: none;
}

/* Accordion answer panel */
.c-post-faq .wp-block-accordion-panel {
  width: 100%;
  margin: 0;
  padding: 0 0 var(--uw-space-24);

  color: var(--G100);
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
}

/* Normalize Gutenberg content spacing inside answers */
.c-post-faq .wp-block-accordion-panel > :first-child {
  margin-top: 0;
}

.c-post-faq .wp-block-accordion-panel > :last-child {
  margin-bottom: 0;
}

.c-post-faq .wp-block-accordion-panel p {
  margin-top: 0;
  margin-bottom: var(--uw-space-16);
}

.c-post-faq .wp-block-accordion-panel ul,
.c-post-faq .wp-block-accordion-panel ol {
  margin-top: 0;
  margin-bottom: var(--uw-space-16);
  padding-left: var(--uw-space-24);
}

.c-post-faq .wp-block-accordion-panel li + li {
  margin-top: var(--uw-space-8);
}

/* Remove Gutenberg constrained-layout interference */
.c-post-faq .is-layout-constrained > *,
.c-post-faq .is-layout-flow > * {
  max-width: none;
}

/* =========================================================
   POST FAQ
   Mobile
========================================================= */

@media (max-width: 767px) {
  /* .c-post-faq > .wp-block-group__inner-container {
    gap: var(--uw-space-32);
  } */

  .c-post-faq .wp-block-accordion-heading__toggle {
    align-items: flex-start;
    /* gap: var(--uw-space-16); */
    padding-block: var(--uw-space-24);
  }

  .c-post-faq .wp-block-accordion-heading__toggle-title {
    font-size: var(--h5);
    line-height: var(--h5-lh);
  }

  .c-post-faq .wp-block-accordion-heading__toggle-icon {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    font-size: 24px;
  }

  .c-post-faq .wp-block-accordion-panel {
    padding-bottom: var(--uw-space-24);
  }
}


/* =========================================================
   SHARED LONG-FORM PROSE
   Blog posts, success stories, legal content and resources
========================================================= */

body :is(.c-prose, .c-legal-content) {
  color: var(--uw-text-body, var(--G100));
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
}

/* ---------------------------------------------------------
   Headings
--------------------------------------------------------- */

body :is(.c-prose, .c-legal-content)
:is(h2, h3, h4, h5, h6) {
  margin: var(--uw-space-48) 0 var(--uw-space-24);
  color: var(--uw-text-heading, var(--G50));
  font-weight: var(--uw-fw-600);
}

/* Do not add 48px above the first heading */
body :is(.c-prose, .c-legal-content)
> :is(h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

/* Gutenberg heading sizes follow the locked site system */
body :is(.c-prose, .c-legal-content) h2 {
  font-size: var(--h2);
  line-height: var(--h2-line-height);
}

body :is(.c-prose, .c-legal-content) h3 {
  font-size: var(--h3);
  line-height: var(--h3-line-height);
}

body :is(.c-prose, .c-legal-content) h4 {
  font-size: var(--h4);
  line-height: var(--h4-line-height);
}

body :is(.c-prose, .c-legal-content) h5 {
  font-size: var(--h5);
  line-height: var(--h5-line-height);
}

body :is(.c-prose, .c-legal-content) h6 {
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
}

/* ---------------------------------------------------------
   Paragraph rhythm
--------------------------------------------------------- */

body :is(.c-prose, .c-legal-content) p {
  margin: 0;
  color: var(--uw-text-body, var(--G100));
}

/*
 * 24px between paragraphs and other normal prose blocks.
 * Do not add 24px below a paragraph when a heading follows,
 * because the heading already owns its 48px top spacing.
 */
body :is(.c-prose, .c-legal-content)
p:not(:last-child):not(:has(+ :is(h2, h3, h4, h5, h6))) {
  margin-bottom: var(--uw-space-24);
}

/* ---------------------------------------------------------
   Lists
--------------------------------------------------------- */

body :is(.c-prose, .c-legal-content)
:is(ul, ol) {
  margin: 0 0 var(--uw-space-24);
  padding-left: var(--uw-space-24);
  color: var(--uw-text-body, var(--G100));
}

/* Heading provides the next section's spacing */
body :is(.c-prose, .c-legal-content)
:is(ul, ol):has(+ :is(h2, h3, h4, h5, h6)) {
  margin-bottom: 0;
}

body :is(.c-prose, .c-legal-content) li {
  color: var(--uw-text-body, var(--G100));
}

body :is(.c-prose, .c-legal-content) li + li {
  margin-top: var(--uw-space-8);
}

/* Nested lists */
body :is(.c-prose, .c-legal-content)
li > :is(ul, ol) {
  margin-top: var(--uw-space-8);
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   Emphasis and links
--------------------------------------------------------- */

body :is(.c-prose, .c-legal-content)
:is(strong, b) {
  color: var(--uw-text-heading, var(--G50));
  font-weight: var(--uw-fw-600);
}

body :is(.c-prose, .c-legal-content) a {
  color: var(--P700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

body :is(.c-prose, .c-legal-content) a:hover {
  color: var(--P500);
}

/* ---------------------------------------------------------
   Images and captions
--------------------------------------------------------- */

body :is(.c-prose, .c-legal-content)
:is(figure, .wp-block-image) {
  width: 100%;
  margin: var(--uw-space-32) 0;
}

body :is(.c-prose, .c-legal-content)
:is(figure, .wp-block-image) img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

body :is(.c-prose, .c-legal-content)
:is(figcaption, .wp-element-caption) {
  margin-top: var(--uw-space-8);
  color: var(--G200);
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
}

/* ---------------------------------------------------------
   Blockquotes
--------------------------------------------------------- */

body :is(.c-prose, .c-legal-content)
:is(blockquote, .wp-block-quote) {
  margin: var(--uw-space-32) 0;
  padding-left: var(--uw-space-24);
  border-left: 2px solid var(--P700);
  color: var(--uw-text-body, var(--G100));
}

body :is(.c-prose, .c-legal-content)
:is(blockquote, .wp-block-quote) p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   Tables
--------------------------------------------------------- */

body :is(.c-prose, .c-legal-content)
:is(table, .wp-block-table) {
  width: 100%;
  margin: var(--uw-space-32) 0;
}

body :is(.c-prose, .c-legal-content)
table {
  width: 100%;
  border-collapse: collapse;
}

body :is(.c-prose, .c-legal-content)
:is(th, td) {
  padding: var(--uw-space-12);
  border: 1px solid var(--G600);
  text-align: left;
  vertical-align: top;
}

body :is(.c-prose, .c-legal-content) th {
  color: var(--uw-text-heading, var(--G50));
  font-weight: var(--uw-fw-600);
  background: var(--G700);
}

body :is(.c-prose, .c-legal-content) td {
  color: var(--uw-text-body, var(--G100));
}

/* ---------------------------------------------------------
   Code blocks
--------------------------------------------------------- */

body :is(.c-prose, .c-legal-content)
:is(pre, .wp-block-code) {
  overflow-x: auto;
  margin: var(--uw-space-32) 0;
  padding: var(--uw-space-24);
  border: 1px solid var(--G600);
  border-radius: var(--uw-radius-8);
  background: var(--G700);
  color: var(--G100);
}

body :is(.c-prose, .c-legal-content)
:not(pre) > code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--G700);
  color: var(--G100);
}

/* ---------------------------------------------------------
   Horizontal rule
--------------------------------------------------------- */

body :is(.c-prose, .c-legal-content)
:is(hr, .wp-block-separator) {
  width: 100%;
  margin: var(--uw-space-48) 0;
  border: 0;
  border-top: 1px solid var(--G600);
}

/* ---------------------------------------------------------
   Remove Gutenberg global layout spacing conflicts
   from the main Post Content wrapper
--------------------------------------------------------- */

body .c-prose.is-layout-flow > * + *,
body .c-prose.is-layout-constrained > * + * {
  margin-block-start: 0;
}

/* =========================================================
   LONG-FORM TABLE OF CONTENTS
========================================================= */

body .c-textblock__toc .toc-title {
  margin: 0 0 var(--uw-space-24);
  color: var(--G50);
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: var(--uw-fw-600);
}

body .c-textblock__toc .toc-list {
  display: flex;
  flex-direction: column;
  gap: var(--uw-space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

body .c-textblock__toc .toc-list-item {
  margin: 0;
  padding: 0;
}

body .c-textblock__toc .toc-link {
  color: var(--G100);
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
  font-weight: 400;
  text-decoration: none;
}

body .c-textblock__toc .toc-link:hover {
  color: var(--G50);
  text-decoration: none;
}

body .c-textblock__toc
.toc-list-item.is-active-li > .toc-link,
body .c-textblock__toc
.toc-link.is-active-link {
  color: var(--P700);
  font-weight: var(--uw-fw-500);
}

/*
 * Safety fallback only.
 * The Bricks TOC should still be configured for H2 only.
 */
body .c-textblock__toc
.toc-list .toc-list {
  display: none;
}

/* =========================================================
   BLOG CARDS
   Static Success Story card
========================================================= */

.c-blog-card.is-blog-card-static {
  pointer-events: none;
  cursor: default;
}

.c-blog-card.is-blog-card-static,
.c-blog-card.is-blog-card-static * {
  cursor: default;
}

.c-blog-card.is-blog-card-static a {
  text-decoration: none;
}