/* =========================================================
   UNWIRED: Bricks + ACSS System Layer (single mobile stylesheet)
   ========================================================= */

/* =========================================================
   HEADER - MOBILE
========================================================= */
@media (max-width: 767px) {
  #brx-header {
    top: 24px;
    margin-top: 24px;
  }

  #brx-header .l-container.v-container--header {
    width: 100%;
    max-width: none;
  }

  .c-header {
    width: 100%;
    background: transparent;
    overflow: visible;
    padding-inline: 16px;
  }

  body .c-header__shell {
    position: relative;
    width: 100%;
    min-height: 64px;
    padding: 0 12px;
    border-radius: 16px;
    overflow: visible;
    display: flex;
  }

  .c-header__bar {
    min-height: 64px;
  }

  .c-header__frame {
    width: 100%;
    min-height: 64px;
  }

  .c-header__brand {
    flex: 0 0 auto;
  }

  .c-header__brand-link {
    display: flex;
    align-items: center;
  }

  .c-header__logo--sticky {
    display: none;
  }

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

  .c-header__bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .c-header__actions {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  } 

  .c-header__icon-globe,
  .c-header__login {
    display: none;
  }

  .c-header__icon-search {
    order: 1;
    display: inline-flex;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    flex: 0 0 auto;
    cursor: pointer;
  }

  .c-header__cta {
    order: 2;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
  }

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

  .c-header__nav .bricks-mobile-menu-toggle {
    display: inline-flex;
    position: relative;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    flex: 0 0 24px;
  }

  .c-header__nav .bricks-mobile-menu-toggle .bar-top,
  .c-header__nav .bricks-mobile-menu-toggle .bar-center,
  .c-header__nav .bricks-mobile-menu-toggle .bar-bottom {
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--G50);
    border-radius: 2px;
    transform-origin: center;
    transition: transform 0.24s ease, opacity 0.24s ease, top 0.24s ease;
  }

  .c-header__nav .bricks-mobile-menu-toggle .bar-top {
    top: 5px;
  }

  .c-header__nav .bricks-mobile-menu-toggle .bar-center {
    top: 11px;
  }

  .c-header__nav .bricks-mobile-menu-toggle .bar-bottom {
    top: 17px;
  }

  .c-header__nav .bricks-mobile-menu-toggle[aria-expanded="true"] .bar-top {
    top: 11px;
    transform: rotate(45deg);
  }

  .c-header__nav .bricks-mobile-menu-toggle[aria-expanded="true"] .bar-center {
    opacity: 0;
  }

  .c-header__nav .bricks-mobile-menu-toggle[aria-expanded="true"] .bar-bottom {
    top: 11px;
    transform: rotate(-45deg);
  }

  /* (Panel-, Listen- und Overlay-Styles des Burger-Menüs leben seit dem
     Menü-Redesign 2026-07 in EINEM ≤1100px-Drawer-Block am Dateiende —
     vorher gab es hier eine Phone-Kopie und weiter unten eine Tablet-
     Kopie, die per Auge synchron gehalten werden mussten.) */

  /* mobile search */
  .c-header__search {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    background: transparent;
    z-index: 20;
    overflow: visible;
  }

  .c-header__shell.is-search-open {
    min-height: 64px;
    padding: 0 16px;
  }

  .c-header__shell.is-search-open .c-header__brand,
  .c-header__shell.is-search-open .c-header__actions,
  .c-header__shell.is-search-open #brxe-irxcgr {
    display: none;
  }

  .c-header__shell.is-search-open .c-header__search {
    display: flex;
    align-items: center;
  }

  .c-header__shell.is-search-open .c-header__frame,
  .c-header__shell.is-search-open .c-header__bar {
    min-height: 64px;
    align-items: center;
  }

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

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

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

  .c-header__search-field {
    min-height: 40px;
    padding: 10px 8px;
    border-radius: 8px;
  }

  .c-header__search-icon,
  .c-header__search-close {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
  }

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

  .c-header__search-input {
    padding: 0 8px;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
  }

  .c-header__search-submit {
    width: 79px;
    min-width: 79px;
    min-height: 40px;
    padding: 8px 16px;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
  }

  .c-header__search-results {
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    border-radius: 12px;
  }

  .c-header__search-result,
  .c-header__search-empty {
    padding: 8px;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
  }

  /* mobile breadcrumbs */
  .c-breadcrumbs {
    width: 100%;
    margin-top: var(--uw-space-24);
    margin-bottom: var(--uw-space-48);
    padding-right: 16px;
    padding-left: 16px;
}

.c-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "brand brand"
      "company resources"
      "legal legal";
    column-gap: 32px;
    row-gap: 24px;
    align-items: start;
  }

  .c-footer__brand {
    grid-area: brand;
    gap: 24px;
    min-width: 0;
  }

  .c-footer__nav-col--company {
    grid-area: company;
    min-width: 0;
  }

  .c-footer__nav-col--resources {
    grid-area: resources;
    min-width: 0;
  }

  .c-footer__nav-col--legal {
    grid-area: legal;
    min-width: 0;
  }

  .c-footer__nav-col {
    gap: 8px;
  }

  .c-footer__menu .bricks-nav-menu {
    gap: 8px;
  }

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

  .c-footer__menu .bricks-nav-menu a {
    line-height: 22px;
  }

  .c-footer__bottom {
    padding-block: 16px;
    gap: 1px;
    align-items: center;
  }

  .c-footer__copyright {
    max-width: 211px;
  }

  .c-footer__socials {
    gap: 7px;
  }
}


@media (max-width: 767px) {
  body #brx-header .c-header__shell {
    padding: 0 12px;
  }

  body #brx-header .c-header__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding-right: 36px; /* reserve space for hamburger */
  }

  body #brx-header .c-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  body #brx-header .c-header__icon-globe,
  body #brx-header .c-header__login {
    display: none;
  }

  body #brx-header .c-header__cta,
  body #brx-header .c-btn.c-header__cta,
  body #brx-header .brxe-button.c-header__cta {
    font-size: 12px;
    line-height: 16px;
    padding: 8px 12px;
    min-height: 40px;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
  }

  body #brx-header #brxe-irxcgr {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    transform: none;
    z-index: 30;
  }

  body #brx-header #brxe-irxcgr .c-header__nav,
  body #brx-header #brxe-irxcgr .c-header__nav.l-row {
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    /* Burger saß mit 13px Ink-Abstand fast auf dem Pillenrand —
       8px nach innen (Philipp, 2026-07-22). */
    margin-right: 8px;
  }

  body #brx-header #brxe-irxcgr .bricks-nav-menu-wrapper,
  body #brx-header #brxe-irxcgr .bricks-nav-menu-wrapper.mobile_landscape {
    display: none;
  }

  body #brx-header #brxe-irxcgr .bricks-mobile-menu-toggle {
    display: inline-flex;
    position: relative;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    box-shadow: none;
    flex: 0 0 24px;
  }

  /* (Wrapper-Position: siehe Drawer-Block am Dateiende. Eine frühere
     top/left/right-Regel hier hätte per ID-Spezifität jede spätere
     klassenbasierte Drawer-Geometrie geschlagen — deshalb ersatzlos.) */
}


@media (max-width: 767px) {
  .c-hero--switcher {
    background-image: none;
  }

  .c-hero--switcher::before,
  .c-hero--switcher::after {
    content: none;
    display: none;
  }

  /* (Entfernt: padding-inline var(--uw-gutter) auf dem Hero-Container.
     Das Hero ist eine echte <section> im ACSS-Content-Grid — der Grid
     liefert den Gutter bereits; das Padding ADDIERTE einen zweiten
     (Inhalt bei 35px statt 16px, Figma: x=16). */

  /* Hero-Hauptblock-Rhythmus (24, Figma-Landing) lebt NUR im
     S01-Hero-Mobile-Block von Snippet 098 (--gap-Dial-Route).
     Frühere direkte gap-Regeln hier gewannen per Spezifität und
     machten die 098-Werte wirkungslos — doppelte Wahrheit entfernt. */

  .c-hero--switcher .c-hero__intro {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    text-align: left;
  }

  .c-hero--switcher .c-hero__intro > .brxe-heading,
  .c-hero--switcher .c-hero__intro > .brxe-text-basic,
  .c-hero--switcher .c-hero__intro > .c-hero__points {
    margin: 0;
  }

  .c-hero--switcher .c-hero__intro > .brxe-heading + .brxe-text-basic {
    margin-top: var(--uw-space-8);
  }

  .c-hero--switcher .c-hero__intro > .brxe-text-basic + .c-hero__points {
    margin-top: var(--uw-space-24);
  }

  .c-hero--switcher .c-hero__points {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: var(--uw-space-8);
    column-gap: var(--uw-space-8);
    width: 100%;
  }

  .c-hero--switcher .c-hero__points > li {
    margin: 0;
  }

  .c-hero--switcher .c-hero__cta {
    justify-content: flex-start;
  }

  .c-hero--switcher .c-hero__stage {
    gap: 0;
  }

  .c-hero--switcher .c-hero__frame .c-hero__shortcode,
  .c-hero--switcher .c-hero__frame .c-hero__media {
    display: none;
  }

  .c-hero--switcher .c-hero__frame .c-hero__shortcode:first-child,
  .c-hero--switcher .c-hero__frame .c-hero__media:first-child {
    display: block;
  }

  .c-hero--switcher .c-hero__toggles {
    display: none;
  }

  .c-hero--switcher .c-hero__trusted {
    gap: var(--uw-space-24);
    justify-content: flex-start;
    align-items: flex-start;
  }

  .c-hero--switcher .c-hero__trusted-label {
    display: none;
  }

  .c-hero--switcher .c-hero__trusted-logos {
    width: 100%;
    justify-content: flex-start;
  }
  .c-hero.is-media-none .brxe-ubkixo.l-center {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
  }

  .c-hero:not(.c-hero--switcher):not(.is-media-none) .c-hero__wrap {
    gap: var(--uw-space-24);
  }

  .c-hero:not(.c-hero--switcher):not(.is-media-none) .u-center,
  .c-hero:not(.c-hero--switcher):not(.is-media-none) .c-hero__intro {
    align-items: flex-start;
    text-align: left;
  }

  .c-hero:not(.c-hero--switcher):not(.is-media-none) .c-hero__intro > .brxe-heading,
  .c-hero:not(.c-hero--switcher):not(.is-media-none) .c-hero__intro > .brxe-text-basic {
    margin: 0;
    text-align: left;
  }

  .c-hero:not(.c-hero--switcher):not(.is-media-none) .c-hero__intro > .brxe-heading + .brxe-text-basic {
    margin-top: var(--uw-space-24);
  }

  .c-hero:not(.c-hero--switcher):not(.is-media-none) .tag,
  .c-hero:not(.c-hero--switcher):not(.is-media-none) .tag img,
  .c-hero:not(.c-hero--switcher):not(.is-media-none) .brxe-image.tag img {
    display: block;
    width: 100%;
    border-radius: 24px;
  }

  .c-hero:not(.c-hero--switcher):not(.is-media-none) .c-hero__trusted {
    gap: var(--uw-space-24);
    align-items: flex-start;
  }

  .c-hero:not(.c-hero--switcher):not(.is-media-none) .c-hero__trusted-label {
    display: none;
  }

  .c-hero:not(.c-hero--switcher):not(.is-media-none) .c-hero__trusted-logos {
    width: 100%;
    overflow: hidden;
  }

  .c-hero:not(.c-hero--switcher):not(.is-media-none) .c-hero__trusted-logo {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    max-height: 24px;
  }

  .c-hero--whitepaper .brxe-gtexvn {
    gap: var(--uw-space-24);
  }

  .c-hero--whitepaper .brxe-gtexvn > .brxe-spzade {
    order: 1;
  }

  .c-hero--whitepaper .brxe-gtexvn > .brxe-djzvtb {
    order: 2;
  }

  .c-hero--whitepaper .brxe-spzade {
    gap: var(--uw-space-24);
  }

  .c-hero--whitepaper .brxe-istxww {
    gap: var(--uw-space-8);
  }

  .c-hero--whitepaper .brxe-tsskdh {
    gap: var(--uw-space-8);
  }

  .c-hero--whitepaper .brxe-bffegz {
    justify-content: flex-start;
  }

  .c-hero--requirements .brxe-ejzave {
    gap: var(--uw-space-24);
  }

  .c-hero--requirements .brxe-wkavqf {
    gap: var(--uw-space-24);
  }

   .c-hero--mobile-content-first .l-split {
    gap: var(--uw-space-24);
  }

  .c-hero--mobile-content-first .l-split > :first-child {
    order: 2;
  }

  .c-hero--mobile-content-first .l-split > :last-child {
    order: 1;
  }

  .c-hero--mobile-content-first .brxe-xpijfc {
    gap: var(--uw-space-8);
  }

  .c-hero--mobile-content-first .brxe-ouwhfb {
    gap: var(--uw-space-24);
  }

  .c-hero--mobile-content-first .brxe-ohgylb {
    gap: var(--uw-space-8);
    align-items: flex-start;
    text-align: left;
  }

  .c-hero--mobile-content-first .brxe-gbaput {
    gap: var(--uw-space-24);
    align-items: flex-start;
    text-align: left;
  }

  .c-hero--mobile-content-first .brxe-ripssu {
    gap: var(--uw-space-24);
  }

  .c-hero--mobile-content-first .brxe-tnwfhi {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  .c-hero--mobile-content-first .brxe-mhqpld,
  .c-hero--mobile-content-first .brxe-poxqfy {
    text-align: left;
  }

  .c-hero--mobile-content-first .brxe-tnwfhi .c-btn {
    align-self: flex-start;
  }

   .c-solutions-platform .brxe-xkpmbv {
    gap: var(--uw-space-24);
  }

  .c-solutions-platform .brxe-ebjaeu,
  .c-solutions-platform .brxe-ebjaeu.u-center {
    gap: 0;
    align-items: flex-start;
    text-align: left;
    margin-inline: 0;
  }

  .c-solutions-platform .brxe-tmlhcq,
  .c-solutions-platform .brxe-vlvnbi {
    text-align: left;
    margin: 0;
  }

  .c-solutions-platform .brxe-tmlhcq + .brxe-vlvnbi {
    margin-top: var(--uw-space-8);
  }

  .c-solutions-platform .brxe-vlvnbi + .c-tabs--cards-explorer {
    margin-top: var(--uw-space-24);
  }

  .c-tabs--cards-explorer {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-24);
    width: 100%;
  }

  .c-tabs--cards-explorer .tab-menu {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--uw-space-8);
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .c-tabs--cards-explorer .tab-menu::-webkit-scrollbar {
    display: none;
  }

  .c-tabs--cards-explorer .tab-title {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 30px;
    padding: 4px 12px;
    border-radius: var(--uw-radius-pill);
    background: var(--G800);
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
  }

  .c-tabs--cards-explorer .tab-title[aria-selected="true"],
  .c-tabs--cards-explorer .tab-title.brx-open {
    background: var(--P700);
    color: var(--G800);
  }

  .c-tabs--cards-explorer .tab-title[aria-selected="false"] {
    background: var(--G800);
    color: var(--G50);
  }

  .c-tabs--cards-explorer .tab-title .brxe-text-basic {
    margin: 0;
    font-size: var(--text-s);
    line-height: 16px;
    color: inherit;
    text-align: center;
    white-space: nowrap;
    text-wrap: nowrap;
  }

  .c-tabs--cards-explorer .tab-title[aria-selected="true"] .brxe-text-basic,
  .c-tabs--cards-explorer .tab-title.brx-open .brxe-text-basic {
    font-weight: var(--uw-fw-500);
  }

  .c-tabs--cards-explorer .tab-content {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .c-tabs--cards-explorer .tab-pane {
    margin: 0;
    padding: 0;
  }

  .c-solutions-platform .tab-pane > section > .l-container > .l-stack,
  .c-solutions-platform .tab-pane .l-stack.l-center {
    gap: var(--uw-space-16);
    align-items: stretch;
    text-align: left;
    margin-inline: 0;
  }

  .c-solutions-platform .tab-pane .l-grid-fixed {
    grid-template-columns: 1fr;
    gap: var(--uw-space-16);
  }

  .c-solutions-platform .tab-pane .l-grid-fixed > .l-stack {
    gap: var(--uw-space-16);
  }

  /* Pillen-Reihe: Figma (Node 271:3144) startet an der Gutter-Kante
     (kein Menü-Padding) mit 8er-Gap — die Desktop-Werte (24/24)
     erzeugten mobil den "versetzten" Look links neben den Karten.
     Scope GENERISCH auf .c-tabs--cards-explorer (nicht nur die
     Homepage-.c-solutions-platform): dieselbe Karten-Explorer-Tab-Reihe
     kommt z. B. als App-Switcher auf /loesung-nach-technologie/*
     (c-tabs--cards-explorer c-tabs--app-switcher) vor und hatte dort
     denselben Versatz. Spezifität (0,4,1) via zusätzlicher .c-tabs-
     Klasse: muss die generische Scroll-Regel
     `body .c-tabs .tab-menu[role=tablist]` (0,3,1) schlagen, die SPÄTER
     in dieser Datei Padding/Gap 24 setzt. */
  body .c-tabs--cards-explorer.c-tabs .tab-menu[role="tablist"] {
    padding-inline: 0;
    gap: var(--uw-space-8);
  }

  .c-solutions-platform .tab-pane .u-minh-232,
  .c-solutions-platform .tab-pane .u-minh-488,
  .c-solutions-platform .tab-pane .c-card {
    min-height: 0;
    height: auto;
    /* Figma-Karte: EIN 16er-Innenabstand. Der kommt unten vom
       c-card__body; das Karten-Padding aus der 98-Basis ADDIERTE
       sich dazu (16+16 = 32 Inset, Titel bei x=100 statt 84). */
    padding: 0;
  }

  .c-solutions-platform .tab-pane .c-card__media,
  .c-solutions-platform .tab-pane .cs-card__media {
    display: none;
  }

  .c-solutions-platform .tab-pane .c-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    align-items: start;
    column-gap: 12px;
    padding: var(--uw-space-16);
  }

  .c-solutions-platform .tab-pane .c-card__body > .l-stack.u-left {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon desc";
    column-gap: 12px;
    row-gap: var(--uw-space-8);
    min-width: 100%;
    /* explizit: das generische Teaser-Pattern aus Snippet 98
       (body .c-card:has(.c-btn-link) … div:first-child) setzt
       align-items: center und ZENTRIERTE das Icon vertikal in der
       Icon-Spalte. Figma (Node 271:3149): Icon oben. Nie auf
       Grid-Defaults verlassen, wenn generische Patterns dieselben
       Elemente treffen. */
    align-items: start;
  }

  .c-solutions-platform .tab-pane .c-card__body > .l-stack.u-left > :first-child {
    grid-area: icon;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .c-solutions-platform .tab-pane .c-card__body > .l-stack.u-left > :nth-child(2) {
    grid-area: title;
    margin: 0;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: var(--uw-fw-600);
    color: var(--G50);
  }

  .c-solutions-platform .tab-pane .c-card__body > .l-stack.u-left > :nth-child(3) {
    grid-area: desc;
    margin: 0;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    color: var(--G100);
  }

  .c-solutions-platform .tab-pane .c-card__body > .c-btn-link {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
    margin: 0;
    align-self: flex-start;
    justify-self: end;
    color: var(--G50);
    overflow: hidden;
    font-size: 0;
    line-height: 0;
  }

  .c-solutions-platform .tab-pane .c-card__body > .c-btn-link svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  /* How-it-works Schritt-Karten: 16px vom Text-BLOCK zum Bild (Figma
     Node 271:3122/3134: Frame 15 endet y90, Bild y106 = 16px). Nicht
     per min-height + margin-top:auto an den Kartenboden gedrückt
     (ungleicher, zu großer Abstand — gemeldet); min-height-als-Abstand
     ist ein Anti-Pattern.
     WICHTIG: der c-card__body hat 16px Innen-Padding rundum — das
     Bottom-Padding ADDIERTE sich zum media-margin (16) = 33px, das
     Doppelte des Figma-Werts. Bottom-Padding hier auf 0, damit die
     16px NUR aus dem media-margin kommen. 16 (nicht 8) gleicht die
     fehlende Zeilenhöhen-Luft des Bildes aus: ein 8px-Box-Abstand wirkt
     zwischen zwei Textzeilen (beide mit Leading) ausgewogen, gegen ein
     Bild (kein Leading) aber zu eng.
     Scope :has(.c-card__num): die nummerierten Schritt-Karten sind die
     EINZIGEN Karten mit c-card__num (verifiziert: genau 3), daher kein
     eigener Section-/Wrapper-Klassenname nötig. */
  body .c-card:has(.c-card__num):has(.c-card__media) {
    min-height: 0;
  }

  body .c-card:has(.c-card__num) > .c-card__body {
    padding-bottom: 0;
  }

  body .c-card:has(.c-card__num) > .c-card__media {
    margin-top: var(--uw-space-16);
  }

/* =========================================================
   Button modifier: icon only
   Keeps text accessible, hides it visually
========================================================= */

body .c-btn.c-btn-icon-only {
  gap: 0;
}

body .c-btn.c-btn-icon-only svg {
  flex: 0 0 auto;
  margin-left: -7px;
}

  .c-railway-ops-tabs .brxe-hbbnka,
  .c-railway-ops-tabs .brxe-rvmsnm {
    gap: var(--uw-space-24);
  }

  .c-railway-ops-tabs .tab-pane .l-split.align-items--start {
    display: block;
  }

  .c-railway-ops-tabs .tab-pane .l-split.align-items--start > :first-child {
    display: none;
  }

  .c-railway-ops-tabs .tab-pane .l-split.align-items--start > :last-child {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .c-railway-ops-tabs .tab-pane .l-split.align-items--start > :last-child .u-text-muted,
  .c-railway-ops-tabs .tab-pane .l-split.align-items--start > :last-child .brxe-heading,
  .c-railway-ops-tabs .tab-pane .l-split.align-items--start > :last-child .c-eyebrow {
    text-align: left;
  }

  .c-related-solutions .brxe-lcxurq {
    gap: var(--uw-space-24);
  }

  .c-related-solutions .brxe-yvrpcy {
    grid-template-columns: 1fr;
    gap: var(--uw-space-24);
  }

  .c-related-solutions .c-card {
    min-height: 0;
    height: auto;
  }

  .c-related-solutions .c-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--uw-space-24);
    min-height: 0;
    height: auto;
  }

  .c-related-solutions .brxe-ouabue {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--uw-space-8);
    min-height: 0;
  }

  .c-related-solutions .brxe-exyvto {
    margin-top: 0;
  }

  /* Featured Story-Card: Bild NACH OBEN (Figma-Reihenfolge mobil:
     Bild, Logo, Heading, Paragraph, Mehr erfahren). Standard stapelt
     Content (Logo/Heading/Para/Link) zuerst, Bild zuletzt. order:-1 auf
     das Media-Element hebt es im l-split/Grid an die erste Position. */
  .c-success-story-card--featured .c-success-story-card__media {
    order: -1;
  }

  .c-success-stories-section .brxe-rntyth {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    margin-inline: 0;
  }

  .c-success-stories-section .brxe-rntyth > * {
    align-self: flex-start;
    text-align: left;
  }

  .c-success-stories-section .brxe-fjcvpy {
    align-self: flex-start;
    justify-content: flex-start;
    margin-inline: 0;
  }
  .c-success-stories-section .brxe-rntyth > .c-btn.c-btn-text {
    align-self: flex-start;
  }

  .c-tabs--pricing-switcher .tab-pane .fx-card-highlight,
  .c-tabs--pricing-switcher .tab-pane .u-border-grad,
  .c-tabs--pricing-switcher .tab-pane .l-grid > *,
  .c-tabs--pricing-switcher .tab-pane .l-grid > .brxe-container,
  .c-tabs--pricing-switcher .tab-pane .l-grid > .brxe-block {
    height: auto;
    min-height: 0;
  }

  .c-tabs--pricing-switcher .tab-pane .l-grid {
    align-items: start;
  }

  .c-tabs--pricing-switcher .tab-pane .l-stack.v-gap-32,
  .c-tabs--pricing-switcher .tab-pane .l-stack.v-gap-24,
  .c-tabs--pricing-switcher .tab-pane .l-stack.v-gap-16,
  .c-tabs--pricing-switcher .tab-pane .l-stack.v-gap-8 {
    height: auto;
    min-height: 0;
  }

  /* (Entfernt: .c-tabs--pricing-switcher + .brxe-imnkuz-Regeln — der
     Value-Props-Block imnkuz ist mobil display:none (u-hide-mobile),
     die height-Resets liefen ins Leere; zudem Instanz-Selektor-
     Anti-Pattern.) */

  /* =========================================================
     PREIS-PAKETE: MOBILER SLIDER (Figma Node 271:3163)
     Desktop: Karten im l-grid nebeneinander. Mobil: horizontaler
     Scroll-Snap-Slider, eine Karte pro Ansicht (mit Peek der
     nächsten), Premium zuerst. Dots werden per JS ergänzt
     (Snippet 090, pricing-scoped). Muster wie c-network-process.
     ========================================================= */
  /* Carousel-Container — EXAKT dieselben Scroll-Eigenschaften wie der
     funktionierende c-network-process-Slider, nichts extra:
     overflow-y HIDDEN ist der Schlüssel. Der Container hat damit KEINEN
     vertikalen Scroll → vertikale Wischgesten laufen automatisch an die
     Seite durch (genau deshalb hängt der Referenz-Slider nicht).
     KEIN touch-action:pan-x! Das hatte die Semantik verkehrt und
     DEAKTIVIERTE vertikales Wischen auf dem Slider (= die gemeldete
     Falle). KEIN overscroll — der Referenz-Slider hat es auch nicht.
     (Die frühere Falle kam von overflow-y:visible, das der Browser bei
     overflow-x:auto zu auto macht = 2D-Scrollbereich, der vertikal fängt.) */
  .c-tabs--pricing-switcher .tab-pane .l-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--uw-space-16);
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .c-tabs--pricing-switcher .tab-pane .l-grid::-webkit-scrollbar {
    display: none;
  }

  .c-tabs--pricing-switcher .tab-pane .l-grid > * {
    flex: 0 0 88%;
    min-width: 88%;
    scroll-snap-align: start;
  }

  /* fx-card-highlight (Hover-/Focus-/Anim-Glow + scale 1.02) im Slider
     ABschalten. Zwei Gründe: (1) der äußere box-shadow-Glow wird vom
     Scroll-Container (overflow) konstruktionsbedingt abgeschnitten — wie
     beim Referenz-Slider unten gibt es im nativen Scroll-Slider keinen
     ungeschnittenen Glow; (2) transform:scale bei :focus-within lieferte
     zusammen mit scroll-snap:mandatory die "vertikal festhängen"-Falle
     (fokussierte Karte wird re-zentriert und kämpft gegen den Scroll).
     Die statische grüne u-border-grad-Border bleibt (Figma). */
  .c-tabs--pricing-switcher .tab-pane .fx-card-highlight,
  .c-tabs--pricing-switcher .tab-pane .fx-card-highlight:hover,
  .c-tabs--pricing-switcher .tab-pane .fx-card-highlight:focus-within,
  .c-tabs--pricing-switcher .tab-pane .fx-card-highlight.is-anim-active,
  .c-tabs--pricing-switcher .tab-pane .c-card:hover,
  .c-tabs--pricing-switcher .tab-pane .c-card:focus-within,
  .c-tabs--pricing-switcher .tab-pane .c-card.is-anim-active {
    transform: none;
    box-shadow: none;
  }

  /* Premium zuerst: DOM-Reihenfolge ist Basis, Premium, Standard;
     Figma zeigt Premium als erste (hervorgehobene) Karte. order wirkt
     nur im Flex-Slider (mobil), Desktop-Grid unberührt. Premium =
     Karte mit u-border-grad als KIND (Basis/Standard tragen es selbst). */
  .c-tabs--pricing-switcher .tab-pane .l-grid > .fx-card-highlight:has(> .u-border-grad) {
    order: -1;
  }

  /* Premium-Karte als EINE zusammenhängende Karte: grüner Header füllt
     den oberen Kartenrand bündig (Figma 271:3164) statt als eingerückte
     Box mit Abstand zu schweben. overflow:hidden clippt Header/Body auf
     die Kartenrundung (der Anim-Glow ist im Slider ohnehin aus). */
  .c-tabs--pricing-switcher .tab-pane .fx-card-highlight:has(> .u-border-grad) {
    padding: 0;
    overflow: hidden;
    border-radius: var(--uw-radius-16);
  }

  .c-tabs--pricing-switcher .tab-pane .fx-card-highlight:has(> .u-border-grad) > :first-child {
    border-radius: 0;
    padding: var(--uw-space-24);
  }

  .c-tabs--pricing-switcher .tab-pane .fx-card-highlight:has(> .u-border-grad) > .u-border-grad {
    border-radius: 0;
    padding: var(--uw-space-24);
  }

  /* Dots des Preis-Sliders nutzen die GEMEINSAME Slider-Dot-Optik
     (.c-slider-dots/.c-slider-dot) — dieselbe wie der Netzwerk-Prozess-
     Slider weiter unten. Keine eigene Definition hier (siehe unten). */

  body .c-network-process .brxe-diukzp {
    gap: var(--uw-space-24);
  }

  body .c-network-process .brxe-ohahra {
    gap: var(--uw-space-24);
    align-items: flex-start;
    text-align: left;
  }

  body .c-network-process .brxe-vljycd.c-network-process__carousel.brxe-container.l-stack {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body .c-network-process .brxe-vljycd.c-network-process__carousel.brxe-container.l-stack::-webkit-scrollbar {
    display: none;
  }

  body .c-network-process .c-network-process__slide.brxe-container {
    flex: 0 0 100%;
    min-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-24);
    scroll-snap-align: start;
  }

  body .c-network-process .c-network-process__slide > :first-child {
    order: 2;
  }

  body .c-network-process .c-network-process__slide > :last-child {
    order: 1;
  }

  body .c-network-process .c-network-process__slide .l-cluster {
    justify-content: flex-start;
  }

  body .c-network-process .c-network-process__slide .tag,
  body .c-network-process .c-network-process__slide .tag img,
  body .c-network-process .c-network-process__slide .brxe-image.tag img {
    display: block;
    width: 100%;
  }

  /* GEMEINSAME Slider-Dots — eine Definition für alle Mobile-Slider:
     Netzwerk-Prozess (Bricks-Markup c-network-process__dot) UND
     Preis-Pakete (JS-injiziert als .c-slider-dot). c-slider-* ist die
     generische, wiederverwendbare Variante; das border/padding-Reset
     deckt den <button> der JS-Dots ab (bei den div-Dots harmlos). */
  body .c-network-process .c-network-process__dots,
  .c-slider-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--uw-space-8);
    width: 100%;
    margin-top: var(--uw-space-16);
  }

  body .c-network-process .c-network-process__dot,
  .c-slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--G600);
    border: 0;
    padding: 0;
    flex: 0 0 auto;
  }

  body .c-network-process .c-network-process__dot.is-active,
  .c-slider-dot.is-active {
    background: var(--P700);
  }
  body .c-network-process .brxe-msdfkq > .brxe-asggfx {
    order: 1;
  }

  body .c-network-process .brxe-msdfkq > .brxe-vatpyg {
    order: 2;
  }
  
  .c-datasheets-section .brxe-ruqtvp {
    gap: var(--uw-space-24);
  }

  .c-datasheets-section .brxe-gtjipf {
    gap: var(--uw-space-8);
    align-items: flex-start;
    text-align: left;
    margin-inline: 0;
  }

  .c-datasheets-section .brxe-eutxnb,
  .c-datasheets-section .brxe-eosbiv {
    text-align: left;
  }

  .c-datasheets-section .brxe-jnuycu {
    gap: var(--uw-space-16);
  }

  .c-datasheets-section .c-ds-card__cta {
    width: 100%;
  }

  .c-datasheets-section .c-ds-card__cta .c-btn {
    width: 100%;
    justify-content: center;
  }
  
  .c-tour-demo .brxe-agjagp {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-48);
  }

  .c-tour-demo .brxe-agjagp > .brxe-blquxj {
    order: 1;
  }

  .c-tour-demo .brxe-agjagp > .brxe-obzaug {
    order: 2;
    width: 100%;
  }

  .c-tour-demo .brxe-blquxj {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: var(--uw-space-24);
  }

  .c-tour-demo .c-tour-demo__intro,
  .c-tour-demo .c-tour-demo__checklist {
    width: 100%;
  }

  .c-tour-demo .c-tour-form__logos {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--uw-space-8);
  }

  .c-tour-demo .c-tour-form__logos img {
    width: auto;
    height: 40px;
    flex: 0 0 auto;
    object-fit: contain;
  }
}

/* Team section desktop */
.c-team-section .c-team-card-mobile {
  display: none;
}

.c-team-section .c-team-card--desktop {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--G700);
}

.c-team-section .c-team-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 299 / 348;
  object-fit: cover;
  border-radius: 12px;
}

.c-team-section .c-team-card__meta {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--G700) 88%, transparent);
}

.c-team-section .c-team-section__dots {
  display: none;
}

@media (max-width: 767px) {
  body .c-team-section .c-team-section__intro,
  body .c-team-section .c-team-section__intro.u-center {
    align-items: flex-start;
    text-align: left;
    margin-inline: 0;
    gap: var(--uw-space-24);
  }

  body .c-team-section .c-team-section__intro > * {
    align-self: flex-start;
    text-align: left;
  }

  body .c-team-section .c-team-carousel.brxe-container.l-grid-fixed {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: 308px;
    row-gap: 24px;
    column-gap: 16px;
    align-items: start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body .c-team-section .c-team-carousel.brxe-container.l-grid-fixed::-webkit-scrollbar {
    display: none;
  }

  body .c-team-section .c-team-person {
    width: 308px;
    min-width: 308px;
    scroll-snap-align: start;
  }

  body .c-team-section .c-team-card--desktop {
    display: none;
  }

  body .c-team-section .c-team-card-mobile {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 8px;
    gap: 12px;
    width: 308px;
    background: var(--G700);
    border-radius: 12px;
  }

  body .c-team-section .c-team-card-mobile__img {
    width: 96px;
    min-width: 96px;
    height: 96px;
    border-radius: 8px;
    object-fit: cover;
  }

  body .c-team-section .c-team-card-mobile__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
  }

  body .c-team-section .c-team-card-mobile__name {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--G50);
  }

  body .c-team-section .c-team-card-mobile__role {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--G100);
  }

  body .c-team-section .c-team-section__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--uw-space-8);
    width: 100%;
    margin-top: var(--uw-space-16);
  }

  body .c-team-section .c-team-section__dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--G600);
    flex: 0 0 auto;
  }

  body .c-team-section .c-team-section__dot.is-active {
    background: var(--P700);
  }

  .c-certifications-section .brxe-uqdtud {
    gap: var(--uw-space-24);
  }

  .c-certifications-section .brxe-irrkuj,
  .c-certifications-section .brxe-irrkuj.u-center {
    gap: var(--uw-space-8);
    align-items: flex-start;
    text-align: left;
    margin-inline: 0;
  }

  .c-certifications-section .brxe-irrkuj > * {
    align-self: flex-start;
    text-align: left;
  }

  .c-certifications-section .brxe-qqcohk {
    grid-template-columns: 1fr;
    gap: var(--uw-space-24);
  }

  .c-certifications-section .c-cert-card {
    min-height: 0;
    height: auto;
  }

  .c-certifications-section .c-cert-card__media {
    width: 100%;
  }

  .c-certifications-section .c-cert-card__media img {
    display: block;
    width: 100%;
    height: auto;
  }

  .c-certifications-section .c-cert-card .c-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--uw-space-24);
    min-height: 0;
    height: auto;
  }

  .c-certifications-section .c-cert-card__cta {
    align-self: flex-start;
    margin-top: 0;
  }


  .c-story .c-story__wrap,
  .c-story .brxe-hwmbrq {
    gap: var(--uw-space-24);
  }

  .c-story .c-story__header,
  .c-story .c-story__header.u-center {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--uw-space-8);
    text-align: left;
    margin-inline: 0;
  }

  .c-story .c-story__header > * {
    margin: 0;
    text-align: left;
    align-self: flex-start;
  }

  .c-story .c-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-24);
    width: 100%;
    padding: 0;
  }

  .c-story .c-timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 0;
    left: 8px;
    width: 1px;
    background-image: repeating-linear-gradient(
      to bottom,
      var(--G50) 0 12px,
      transparent 12px 24px
    );
    opacity: 0.5;
  }

  .c-story .c-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: var(--uw-space-8);
    row-gap: var(--uw-space-16);
    align-items: start;
  }

  .c-story .c-timeline__dot {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--P700);
    justify-self: center;
    align-self: start;
    z-index: 1;
  }

  .c-story .c-timeline__dot::before,
  .c-story .c-timeline__dot::after {
    display: none;
  }

  .c-story .c-timeline__year {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 0;
    text-align: left;
    justify-self: start;
    align-self: start;
  }

  .c-story .c-timeline__content {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    padding: 0 0 0 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--uw-space-8);
    text-align: left;
    justify-self: start;
  }

  .c-story .c-timeline__year h3,
  .c-story .c-timeline__title,
  .c-story .c-timeline__desc {
    margin: 0;
    text-align: left;
  }

  .c-story .c-timeline__item:nth-child(odd) .c-timeline__year,
  .c-story .c-timeline__item:nth-child(even) .c-timeline__year {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
    text-align: left;
    justify-self: start;
  }

  .c-story .c-timeline__item:nth-child(odd) .c-timeline__content,
  .c-story .c-timeline__item:nth-child(even) .c-timeline__content {
    grid-column: 2;
    grid-row: 2;
    padding: 0 0 0 8px;
    text-align: left;
    justify-self: start;
    align-items: flex-start;
  }

  body .c-story .brxe-container.c-timeline, body .c-story .c-timeline {
    gap: 24px;
  }

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

  .c-story .c-timeline__item:nth-child(even) .c-timeline__dot::after {
    display: none;
  }

  body .c-story .brxe-container.c-timeline, body .c-story .c-timeline {
    padding-top: 0;
  }


  /* =========================================================
   NEWSLETTER MOBILE
========================================================= */

  body .c-newsletter-form-card,
  body .c-newsletter-form-card.u-center {
    max-width: 100%;
    padding: var(--uw-space-16);
  }

  .c-newsletter-popup {
    width: calc(100vw - (var(--uw-space-16) * 2));
    padding: var(--uw-space-16);
  }

  body .c-newsletter-form .ff-el-group {
    margin-bottom: var(--uw-space-24);
  }

  body .c-newsletter-form .ff-newsletter-form__salutation > .ff-el-input--content {
    gap: var(--uw-space-24);
  }

  body .c-newsletter-form .ff-newsletter-form__salutation .ff-el-form-check-label,
  body .c-newsletter-form .ff-newsletter-form__salutation .ff-el-form-check label,
  body .c-newsletter-form .ff-newsletter-form__consent .ff-el-form-check-label,
  body .c-newsletter-form .ff-newsletter-form__consent .ff-el-form-check label,
  body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) .ff-el-form-check-label,
  body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) .ff-el-form-check label {
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
  }

  body .c-newsletter-form .ff_submit_btn_wrapper .ff-btn.ff-btn-submit,
  body .c-newsletter-form .ff_submit_btn_wrapper button[type="submit"] {
    min-width: 148px;
    height: 48px;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
  }
}

/* (Der frühere Phone-Drawer-Block — 91vw-Karte unter der Pille,
   #brxe-irxcgr-ID-gebunden — ist mit dem Menü-Redesign 2026-07 durch
   den EINEN ≤1100px-Drawer-Block am Dateiende ersetzt.) */

/* Bricks malt per Default ein ::before (inset:0, z:-1, hartkodiert
   #23282d) als Menü-Hintergrund in den Mobile-Menu-Wrapper. Da es
   absolute im Scroll-Inhalt hängt, scrollt es bei langem Inhalt mit
   weg und darunter erscheint der echte Wrapper-Hintergrund → zwei
   Töne (Phone wie Tablet, von Philipp gemeldet). Für den gesamten
   Burger-Bereich (≤1100px) entfernen; der Wrapper-Hintergrund ist
   die einzige Farbquelle. Header-scoped: die Footer-Menüs behalten
   Bricks-Defaults. Beachte: das Pseudo ist auch Bricks' Träger für
   ein im Builder konfigurierbares Mobile-Menu-Hintergrundbild
   (background-size:cover) — würde je eines gesetzt, bliebe es im
   Header ≤1100px bewusst unsichtbar (aktuell nirgends genutzt). */
@media (max-width: 1100px) {
  body #brx-header .c-header__nav .bricks-mobile-menu-wrapper::before {
    content: none;
  }
}

/* =========================================================
   Header drawer mega menu → echtes Akkordeon (≤1100px)
   Plan §4: Lösungen öffnet NUR die drei Gruppen-Header
   (Nach Anwendung / Nach Branche / Nach Technologie); eine
   Gruppe zeigt kompakte Zeilen (Icon + Titel, KEINE
   Beschreibung). Vorher stapelte der Block alle 14 Items samt
   Beschreibungen zu ~1360px Inhalt in einem ~540px-Panel —
   die "2,5–3 Screens"-Wand aus dem UX-Audit.

   Höhen-Animation über den grid-template-rows-0fr/1fr-Trick:
   animierbar ohne JS-Höhenmessung, Inhalt bleibt im Flow.
   Header.js injiziert die .uw-group-toggle-Buttons (der Span
   im Bricks-Template ist kein fokussierbares Element) und
   schaltet .is-open exklusiv (Akkordeon).
========================================================= */

@media (max-width: 1100px) {
  /* Ebene 1: Lösungen-Inhalt (das Megamenü) klappt animiert auf.
     display bleibt grid — Sichtbarkeit steuert die Zeilenhöhe PLUS
     visibility: overflow:hidden clippt nur visuell, für Screenreader
     (und Playwrights :visible) blieben die eingeklappten Zeilen sonst
     erreichbar. visibility interpoliert diskret am Transitionsende
     und kollidiert deshalb nicht mit der Höhen-Animation. */
  body #brx-header .bricks-mobile-menu-wrapper .menu-item-has-children > .brx-megamenu {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition:
      grid-template-rows 0.25s ease-out,
      visibility 0.25s ease-out;
    position: static;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  body #brx-header .bricks-mobile-menu-wrapper .menu-item-has-children.open > .brx-megamenu,
  body #brx-header .bricks-mobile-menu-wrapper .menu-item-has-children.active > .brx-megamenu,
  body #brx-header .bricks-mobile-menu-wrapper .menu-item-has-children.is-mobile-mega-open > .brx-megamenu {
    grid-template-rows: 1fr;
    visibility: visible;
  }

  /* Das einzige Grid-Kind (die Bricks-Section) braucht min-height:0,
     sonst erzwingt ihr Inhalt die volle Höhe trotz 0fr. */
  body #brx-header .bricks-mobile-menu-wrapper .menu-item-has-children > .brx-megamenu > * {
    min-height: 0;
    overflow: hidden;
  }

  body #brx-header .bricks-mobile-menu-wrapper .brx-megamenu .l-section,
  body #brx-header .bricks-mobile-menu-wrapper .brx-megamenu .l-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  body #brx-header .bricks-mobile-menu-wrapper .c-header__mega {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 0 var(--uw-space-8) var(--uw-space-8);
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  body #brx-header .bricks-mobile-menu-wrapper .c-header__mega-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  /* Ebene 2: eine Gruppe = Header-Button (JS-injiziert) + Liste.
     Gleicher 0fr/1fr-Trick; .is-open setzt Header.js exklusiv. */
  body #brx-header .bricks-mobile-menu-wrapper .c-header__mega-col {
    display: grid;
    grid-template-rows: min-content 0fr;
    transition: grid-template-rows 0.25s ease-out;
    gap: 0;
    width: 100%;
  }

  body #brx-header .bricks-mobile-menu-wrapper .c-header__mega-col.is-open {
    grid-template-rows: min-content 1fr;
  }

  body #brx-header .bricks-mobile-menu-wrapper .uw-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uw-space-12);
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 var(--uw-space-12);
    border: 0;
    border-radius: var(--uw-radius-12);
    background: transparent;
    cursor: pointer;
    text-align: left;
    box-shadow: none;
  }

  body #brx-header .bricks-mobile-menu-wrapper .uw-group-toggle:active {
    background: color-mix(in srgb, var(--G50) 7%, transparent);
  }

  /* Gruppen-Label: Typo kommt aus den Template-Klassen des Spans
     (text--500 text--s) — KEIN uppercase/Sonder-Sizing (Philipp,
     2026-07-22: das System nutzt nirgends Versalien). Abgrenzung zu
     den Links leistet die gedämpfte Farbe + das Chevron. */
  body #brx-header .bricks-mobile-menu-wrapper .uw-group-toggle > span {
    display: block;
    color: var(--G200);
  }

  /* Explizite Maße: das Chevron ist ein Klon des Bricks-SVGs — ohne
     width/height fiele es auf die SVG-Intrinsic-Größe 300×150 zurück
     und blähte den Button auf >300px Höhe (live so passiert). */
  body #brx-header .bricks-mobile-menu-wrapper .uw-group-toggle svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--G200);
    transition: transform 0.2s ease;
  }

  body #brx-header .bricks-mobile-menu-wrapper .uw-group-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  body #brx-header .bricks-mobile-menu-wrapper .c-header__mega-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0.25s ease-out;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Sichtbar nur, wenn Gruppe UND Lösungen offen sind: visibility:
     visible auf einem Nachfahren hebt das hidden des Vorfahren wieder
     auf (CSS-visibility-Eigenheit) — eine offen "vergessene" Gruppe
     bliebe sonst nach dem Zuklappen von Lösungen für Screenreader
     erreichbar, obwohl sie im 0fr-Clip visuell verschwunden ist. */
  body #brx-header .bricks-mobile-menu-wrapper .menu-item-has-children.open .c-header__mega-col.is-open > .c-header__mega-list,
  body #brx-header .bricks-mobile-menu-wrapper .menu-item-has-children.active .c-header__mega-col.is-open > .c-header__mega-list,
  body #brx-header .bricks-mobile-menu-wrapper .menu-item-has-children.is-mobile-mega-open .c-header__mega-col.is-open > .c-header__mega-list {
    visibility: visible;
  }

  body #brx-header .bricks-mobile-menu-wrapper .c-header__mega-list-item {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Kompakte Zeile: kleines Icon + Titel, EINE Zeile, ≥48px Tapfläche. */
  body #brx-header .bricks-mobile-menu-wrapper .c-header__mega-item {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--uw-space-12);
    min-height: 48px;
    padding: var(--uw-space-4) var(--uw-space-12);
    border-radius: var(--uw-radius-12);
    text-decoration: none;
  }

  /* Hover/Pressed: NICHT G600 — das ist exakt die Icon-Badge-Fläche
     (#3d3d3d), die Badges verschwänden optisch (Philipp 2026-07-22).
     Stattdessen subtiles Aufhellen über dem G700-Panel; identisch zum
     Desktop-Hover in 98. */
  body #brx-header .bricks-mobile-menu-wrapper .c-header__mega-item:hover,
  body #brx-header .bricks-mobile-menu-wrapper .c-header__mega-item:active {
    background: color-mix(in srgb, var(--G50) 7%, transparent);
  }

  body #brx-header .bricks-mobile-menu-wrapper .c-header__mega-item-icon {
    /* Mobile badge size — single var drives width, height, flex-basis
       and ::before box-shadow dot offsets via .c-icon-badge base rule. */
    --badge-size: 32px;
  }

  body #brx-header .bricks-mobile-menu-wrapper .c-header__mega-item-icon svg {
    width: 20px;
    height: 20px;
  }

  body #brx-header .bricks-mobile-menu-wrapper .c-header__mega-item-copy {
    min-width: 0;
    gap: 0;
  }

  body #brx-header .bricks-mobile-menu-wrapper .c-header__mega-item-title {
    color: var(--G50);
    font-weight: var(--uw-fw-600);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Keine Beschreibungen im Drawer (Plan §4) — sie waren der
     Löwenanteil der alten 1360px-Inhaltswand. */
  body #brx-header .bricks-mobile-menu-wrapper .c-header__mega-item-desc {
    display: none;
  }

  /* (Zwei Alt-Regeln aus dem Vorgänger-Block ersatzlos entfernt:
     ".c-header__mega { margin-top: 0 }" war unerreichbar — im Drawer
     überschreibt margin:0 oben, das Desktop-Panel existiert ≤1100px
     nicht; ".l-ui-scene .c-ui-scene { zoom: none }" war ungültiges
     CSS (zoom kennt kein none) und damit ein No-Op.) */

}


/* =========================================================
   FAQ accordion mobile title/icon alignment
   Keeps +/- icon on the right from 1100px down
========================================================= */

@media (max-width: 1100px) {
  body .c-faq .accordion-title-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--uw-space-16);
    width: 100%;
  }

  body .c-faq .accordion-title-wrapper > .accordion-title,
  body .c-faq .accordion-title-wrapper > h1,
  body .c-faq .accordion-title-wrapper > h2,
  body .c-faq .accordion-title-wrapper > h3,
  body .c-faq .accordion-title-wrapper > h4,
  body .c-faq .accordion-title-wrapper > h5,
  body .c-faq .accordion-title-wrapper > h6 {
    min-width: 0;
    margin: 0;
  }

  body .c-faq .accordion-title-wrapper > svg,
  body .c-faq .accordion-title-wrapper > .brxe-icon {
    justify-self: end;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
  }
}


/* =========================================================
   Solution 2 mobile content stack
   Keeps intro, feature list, and CTA in one column from 1100px
========================================================= */

@media (max-width: 1100px) {
  body .c-solution-2__content {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
  }

  body .c-solution-2__content > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body .c-solution-2__intro {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body .c-solution-2__features {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  body .c-solution-2__features li,
  body .c-solution-2__features .content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body .c-solution-2__features .content {
    display: flex;
    align-items: flex-start;
  }

  body .c-solution-2__features .icon {
    flex: 0 0 auto;
  }

  body .c-solution-2__features .title {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}


/* =========================================================
   Solution 2 compact row hardening
   Keeps media, text, feature list, and CTA in one column
   from the sitewide compact breakpoint down
========================================================= */

@media (max-width: 1100px) {
  body .c-solution-2__row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  body .c-solution-2__row > .c-solution-2__media-col,
  body .c-solution-2__row > .c-solution-2__content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body .c-solution-2__content {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
  }

  body .c-solution-2__content > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body .c-solution-2__content > .l-stack:not(.c-solution-2__intro) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  body .c-solution-2__features {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  body .c-solution-2__features li {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body .c-solution-2__features .content {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--uw-space-12);
  }

  body .c-solution-2__features .icon {
    flex: 0 0 auto;
  }

  body .c-solution-2__features .title {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body .c-solution-2__media,
  body .c-solution-2__media-item,
  body .c-solution-2__media-item > * {
    max-width: 100%;
    min-width: 0;
  }

  /* Frueher sprangen Modem-Uplinks/Standards-Integrations im Animations-
     Zustand um 100/150px nach unten (erst per margin-top, dann per
     transform). Der Versatz war an die transiente is-ui-sequence-active/
     is-state-merged-Klasse gebunden, die der scroll-getriebene Aktivator
     beim Vorbeiscrollen an- UND wieder ausschaltet (nur eine Scene ist
     gleichzeitig aktiv). Ergebnis: die Scene hopste beim Aktivieren nach
     unten und beim Uebergeben an die naechste Scene wieder hoch — der auf
     dem Handy sichtbare "Sprung" — und drueckte im aktiven Zustand den
     Folge-Text zusammen / schnitt MODEM 4 ab.
     Die Scenes sind starre 450x450-Boxen mit absolut positioniertem Inhalt;
     ihre korrekte Ruhelage IST die ohne Versatz. Der zustandsgebundene
     Versatz ist daher ersatzlos entfernt — keine Regel = kein Sprung.
     (Getestet: tests/ui/mobile-scene-animation.spec.js) */
}


/* =========================================================
   Stats band — mobile
   .l-grid-fixed stacks to one column at 767px, so the divider rotates
   from vertical (between columns) to horizontal (between rows). Symmetric
   padding-block keeps the horizontal rule centered between stacked stats.
========================================================= */
@media (max-width: 767px) {
  .c-stats__item {
    padding-inline: 0;
    padding-block: var(--uw-space-24);
  }

  .c-stats__item + .c-stats__item {
    border-left: 0;
    border-top: 1px solid var(--G600);
  }
}



/* =========================================================
   Mobile / compact tabs horizontal scroll
   Prevents tabs from causing page-wide overflow
========================================================= */

@media (max-width: 1100px) {
  body .c-tabs {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  /* Ausnahme: Tab-Varianten mit glühenden Karten (fx-card-highlight /
     c-tabs .c-card) dürfen NICHT horizontal clippen — sonst schneidet
     die c-tabs-Box den seitlichen Glow (box-shadow) an der Kartenkante
     ab (gemeldet: Pakete + Plattform-Karten). box-shadow ist reines
     Paint, erzeugt keinen Scroll; die interne Pillen-Leiste scrollt
     weiter über ihr eigenes overflow-x:auto, und der globale
     html/body-Guard verhindert Seiten-Scroll. Später im Cascade +
     gleiche Spezifität (0,1,1) → gewinnt über die Regel oben. */
  body .c-tabs--cards-explorer,
  body .c-tabs--pricing-switcher {
    overflow: visible;
  }

  body .c-tabs > .tab-menu,
  body .c-tabs .tab-menu[role="tablist"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;

    gap: var(--uw-space-24);
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    padding-inline: var(--uw-space-24);
    scroll-padding-inline: var(--uw-space-24);

    scrollbar-width: none;
  }

  body .c-tabs > .tab-menu::-webkit-scrollbar,
  body .c-tabs .tab-menu[role="tablist"]::-webkit-scrollbar {
    display: none;
  }

  body .c-tabs .tab-title {
    flex: 0 0 auto;
    white-space: nowrap;
    max-width: none;
  }

  body .c-tabs .tab-title > * {
    white-space: nowrap;
  }

  /* Ausnahme: Switcher-Pillen (2-Optionen-Umschalter, Snippet 98) sind
     content-sized + zentriert und dürfen die Scroll-Behandlung oben
     nicht erben — width: 100% streckt die dunkle Pillen-Schiene über
     den ganzen Container und das padding-inline schiebt Fremd-Padding
     in die Pille. Gleiche Spezifitätsstufe (0,3,1) wie die Regel oben
     UND wie die Pricing-Desktop-Regeln in Snippet 98, aber später im
     Cascade (98.css lädt vor 33.css) → gewinnt genau hier.
     Achtung c-tabs--switcher: aktuell auf keiner Live-Seite im Einsatz;
     seine 98er-Basis ist ein GRID-Pill (1fr 1fr, overflow hidden) und
     nur (0,2,0) — diese Ausnahme stellt dort max-content sicher, aber
     kein vollständiges Grid-Restore. Bei Wiederverwendung der Variante
     mobil gegentesten. */
  body .c-tabs--switcher .tab-menu[role="tablist"],
  body .c-tabs--pricing-switcher .tab-menu[role="tablist"] {
    width: max-content;
    max-width: 100%;
    justify-content: center;
    gap: 0; /* Scroll-Regel oben setzt gap 24 — würde die Pille spalten */
    margin-inline: auto;
    padding-inline: 0;
    overflow-x: visible;
  }

  /* Die Pille zentriert sich per margin auto nur innerhalb ihres
     TABS-ELEMENTS — das ist auf Mobile schmaler als die Spalte
     (Shrink-Breite der Panes) und sitzt links: die Pille wirkte
     linksbündig, obwohl alle Zentrier-Regeln griffen. Figma
     (Node 271:3160): Pille mittig zur Section. Element auf volle
     Breite → die bestehende Zentrierung stimmt wieder. */
  body .c-tabs--switcher,
  body .c-tabs--pricing-switcher {
    width: 100%;
  }
}

/* Mobile: hide the current-page crumb (duplicates the H1 and
   wraps to multiple lines) — ancestors stay as one-line path */
@media (max-width: 767px) {
  .c-breadcrumbs .item:last-child,
  .c-breadcrumbs .separator:last-of-type {
    display: none;
  }

  /* safety net if an ancestor is ever too long */
  .c-breadcrumbs {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* =========================================================
   Header burger — tablet range (768px–1100px)
   Panel-/Listen-Styles leben seit dem Menü-Redesign im EINEN
   ≤1100px-Drawer-Block am Dateiende. Hier bleibt nur, was im
   Tablet-Bereich vom Phone abweicht: Burger-Platzierung und
   die Bar-Zentrierung des ☰/✕-Toggles.
========================================================= */
@media (min-width: 767.02px) and (max-width: 1100px) {
  /* Burger ganz nach außen rechts — gleiche Position wie auf dem
     Phone, statt links neben Suche/Globus/CTA (UX-Entscheidung
     Philipp 2026-07-22). Die Nav steckt in einem klassenlosen
     Wrapper-Div in der Bar (order 0, Actions order 2) — geordnet
     wird also der Wrapper, per :has statt über seine brxe-ID (die
     ID-Kopplung war die Ursache des ursprünglichen Bugs). Fällt
     :has je aus, degradiert es nur zur alten Innen-Position.
     Der natürliche Bar-Abstand (~25px, symmetrisch zum Logo) reicht
     als Rand-Luft; das 8px-Extra gilt nur dem engen Phone-Header. */
  body #brx-header .c-header__bar > div:has(> .c-header__nav) {
    order: 3;
  }

  /* Bar alignment only — the burger→X open animation itself is
     Bricks-native (frontend-layer, @layer bricks: absolute bars,
     top 0/7/14, open top 16 + rotate) and must NOT be overridden
     here: any unlayered transform/top wins over the layered rules
     and breaks the X (learned the hard way — a translateY here
     turned it into a chevron). Bricks sizes its bars for a 20×16
     button; 98 enlarges the button to 32×32, which leaves the bar
     group clinging to the top edge. Shift the group down 8px so it
     sits centered; Bricks' open state (top 16) lands within 1px of
     the new center, so the X stays visually centered too. */
  body #brx-header .c-header__nav .bricks-mobile-menu-toggle .bar-top {
    top: 8px;
  }

  body #brx-header .c-header__nav .bricks-mobile-menu-toggle .bar-center {
    top: 15px;
  }

  body #brx-header .c-header__nav .bricks-mobile-menu-toggle .bar-bottom {
    top: 22px;
  }

  /* These unlayered `top`s also beat Bricks' layered OPEN position
     (top 16), so restate it shifted to the new group center; the
     rotate/hide of the X keeps coming from Bricks untouched. */
  body #brx-header .c-header__nav .bricks-mobile-menu-toggle[aria-expanded="true"] .bar-top,
  body #brx-header .c-header__nav .bricks-mobile-menu-toggle[aria-expanded="true"] .bar-bottom {
    top: 15px;
  }
}

/* =========================================================
   Header drawer — EIN Drawer für alle Breiten ≤1100px
   Plan: plans/Menu-restructure-PLAN.md §4.

   Volle Höhe, rechts verankert, Backdrop dimmt die Seite;
   Struktur (von Header.js injiziert):
     .uw-drawer-head   Logo + ✕ (fix)
     .uw-drawer-scroll einzige Scroll-Region (Menüliste)
     .uw-drawer-foot   Login + CTA, gepinnt (fix)

   Zustand: Single Source of Truth ist `show-mobile-menu` auf dem
   .brxe-nav-menu (Bricks toggelt sie; Overlay-Klick und Esc sind
   Bricks-nativ). KEINE aria-expanded~Sibling-Selektoren mehr —
   die banden den Zustand an die DOM-Reihenfolge statt an die Klasse.

   Containing-Block-Falle: die Shell hat backdrop-filter (Frosted-
   Glass-Pille) und wäre damit in Chromium der Anker für ALLES
   position:fixed hier drin — ein "voller Viewport"-Drawer ist so
   unmöglich. Header.js setzt deshalb body.uw-drawer-open, solange
   der Drawer offen ist (+ Schließ-Transition), und die Regel unten
   schaltet den Filter in genau diesem Fenster ab. Der Backdrop
   liegt über der Pille, der Blur-Wegfall ist dadurch unsichtbar.
========================================================= */

@media (max-width: 1100px) {
  /* Während der Drawer offen ist (und während er zuschlägt) darf die
     Shell KEIN Containing Block sein — sonst ankern Drawer + Backdrop
     an der Pille statt am Viewport (siehe Block-Kommentar). */
  body.uw-drawer-open #brx-header .c-header__shell {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Backdrop: Bricks rendert das Overlay-Element ohnehin und schließt
     bei Klick darauf nativ — wir machen es nur sichtbar. Deckt auch
     den Header ab: der Drawer-✕ ist die Schließ-Affordanz (Plan §4
     "nimmt den Screen entschlossen ein"). */
  body #brx-header .c-header__nav .bricks-mobile-menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.25s ease,
      visibility 0.25s ease;
    z-index: 2900;
  }

  body #brx-header .c-header__nav.show-mobile-menu .bricks-mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Drawer-Panel: volle Höhe, rechts, schiebt von rechts ein.
     top/bottom statt height — so folgt es auch einklappender
     Browser-Chrome (iOS) ohne dvh-Sonderfälle. */
  body #brx-header .c-header__nav .bricks-mobile-menu-wrapper {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    width: min(360px, calc(100vw - 16px));
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--G700);
    border-radius: 0;
    overflow: hidden;
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    /* Nur schieben, nicht faden — visibility hält das Panel bis zum
       Ende der Slide-out-Transition sichtbar. */
    transition:
      transform 0.28s ease-out,
      visibility 0.28s ease-out;
    z-index: 3000;
  }

  body #brx-header .c-header__nav.show-mobile-menu .bricks-mobile-menu-wrapper {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  /* --- Kopf: Logo + ✕ ------------------------------------------ */

  body #brx-header .bricks-mobile-menu-wrapper .uw-drawer-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uw-space-16);
    min-height: 64px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) var(--uw-space-16) 8px var(--uw-space-24);
    border-bottom: 1px solid var(--G600);
  }

  body #brx-header .bricks-mobile-menu-wrapper .uw-drawer-logo {
    display: block;
    width: 64px;
    height: auto;
  }

  /* Sprach-Pills im Drawer-Kopf (Logo … DE EN ✕): der Header-Globus
     ist <480px ausgeblendet — ohne die Pills könnten Phone-Nutzer die
     Sprache gar nicht wechseln. Im Kopf statt im Fuß: bei 320px Breite
     passen Pills + Login + CTA nicht nebeneinander in den Fuß. */
  body #brx-header .bricks-mobile-menu-wrapper .uw-drawer-lang {
    display: flex;
    align-items: center;
    gap: var(--uw-space-8);
    margin-left: auto;
    margin-right: var(--uw-space-8);
  }

  body #brx-header .bricks-mobile-menu-wrapper .uw-drawer-lang-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 2px 12px;
    border-radius: var(--uw-radius-pill);
    background: var(--G600);
    color: var(--G50);
    text-decoration: none;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: var(--uw-fw-500);
  }

  /* Aktive Sprache grün — wie die Pills im Globus-Dropdown (98). */
  body #brx-header .bricks-mobile-menu-wrapper .uw-drawer-lang-link.is-current {
    background: var(--P700);
    color: var(--G800);
  }

  body #brx-header .bricks-mobile-menu-wrapper .uw-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: var(--uw-radius-12);
    background: transparent;
    color: var(--G50);
    cursor: pointer;
    box-shadow: none;
  }

  body #brx-header .bricks-mobile-menu-wrapper .uw-drawer-close:active {
    background: color-mix(in srgb, var(--G50) 7%, transparent);
  }

  body #brx-header .bricks-mobile-menu-wrapper .uw-drawer-close svg {
    width: 24px;
    height: 24px;
  }

  /* --- Mitte: die EINZIGE Scroll-Region -------------------------- */

  body #brx-header .bricks-mobile-menu-wrapper .uw-drawer-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Kein Scroll-Chaining auf die (gesperrte) Seite — der Kern von
       Bug 1 "Wheel über offenem Drawer tut nichts". */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--uw-space-8) var(--uw-space-8) var(--uw-space-16);
  }

  /* --- Menüliste: Zeilen ≥48px (Bug 6: vorher 38px) --------------- */

  body #brx-header .c-header__nav .bricks-mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body #brx-header .c-header__nav .bricks-mobile-menu > li {
    margin: 0;
    width: 100%;
  }

  body #brx-header .c-header__nav .bricks-mobile-menu > li > a,
  body #brx-header .c-header__nav .bricks-mobile-menu > li > .brx-submenu-toggle > a,
  body #brx-header .c-header__nav .bricks-mobile-menu > li > .brx-open > a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 4px var(--uw-space-12);
    border-radius: var(--uw-radius-12);
    color: var(--G50);
    text-decoration: none;
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
  }

  body #brx-header .c-header__nav .bricks-mobile-menu > li > a:active {
    background: color-mix(in srgb, var(--G50) 7%, transparent);
  }

  body #brx-header .c-header__nav .bricks-mobile-menu .menu-item-has-children > .brx-submenu-toggle,
  body #brx-header .c-header__nav .bricks-mobile-menu .menu-item-has-children > .brx-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uw-space-12);
    width: 100%;
    min-height: 48px;
  }

  /* Der Link im Toggle-Row füllt die Zeile — volle Tapfläche. */
  body #brx-header .c-header__nav .bricks-mobile-menu .menu-item-has-children > .brx-submenu-toggle > a {
    flex: 1 1 auto;
  }

  body #brx-header .c-header__nav .bricks-mobile-menu .menu-item-has-children > .brx-submenu-toggle > button,
  body #brx-header .c-header__nav .bricks-mobile-menu .menu-item-has-children > .brx-open > button,
  body #brx-header .c-header__nav .bricks-mobile-menu .menu-item-has-children > button,
  body #brx-header .c-header__nav .bricks-mobile-menu .submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-radius: var(--uw-radius-12);
    background: transparent;
    color: var(--G50);
    box-shadow: none;
  }

  /* Chevron rotiert auf JEDER Akkordeon-Ebene (Bug 2: vorher statisch).
     aria-expanded pflegt Bricks/Header.js — Zustand und Optik können
     nicht auseinanderlaufen. Feste Maße: das Bricks-SVG hat keine
     width/height-Attribute und fällt im 48px-Button sonst auf die
     volle Buttongröße zurück (sah aus wie ein Riesen-Caret). */
  body #brx-header .c-header__nav .bricks-mobile-menu .brx-submenu-toggle > button svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
  }

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

  /* Klassische Untermenüs (aktuell nicht im Hauptmenü, aber Bricks
     kann sie jederzeit rendern): eingerückt, gleiche Zeilenhöhe. */
  body #brx-header .c-header__nav .bricks-mobile-menu .sub-menu {
    display: none;
    margin: 0;
    padding: 0 0 var(--uw-space-8) var(--uw-space-16);
    list-style: none;
  }

  body #brx-header .c-header__nav .bricks-mobile-menu .brx-open + .sub-menu,
  body #brx-header .c-header__nav .bricks-mobile-menu .menu-item.open > .sub-menu,
  body #brx-header .c-header__nav .bricks-mobile-menu .menu-item-has-children.open > .sub-menu {
    display: block;
  }

  body #brx-header .c-header__nav .bricks-mobile-menu .sub-menu li {
    margin: 0;
  }

  body #brx-header .c-header__nav .bricks-mobile-menu .sub-menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 4px var(--uw-space-12);
    color: var(--G100);
    text-decoration: none;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
  }

  /* --- Fuß: Login + CTA, gepinnt (Bug 3) -------------------------- */

  body #brx-header .bricks-mobile-menu-wrapper .uw-drawer-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--uw-space-12);
    padding: var(--uw-space-16) var(--uw-space-16) calc(var(--uw-space-16) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--G600);
  }

  /* Die Klone behalten ihre Original-Klassen (Labels/URLs/i18n kommen
     aus den Header-Actions) — 98 versteckt .c-header__login ≤1100px
     und .c-header__cta ≤767px, hier drin gelten sie wieder. */
  body #brx-header .uw-drawer-foot .c-header__login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-height: 48px;
    padding: 8px var(--uw-space-16);
    border: 1px solid var(--G500);
    border-radius: var(--uw-radius-pill);
    color: var(--G50);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: var(--uw-fw-500);
    text-decoration: none;
    white-space: nowrap;
  }

  body #brx-header .uw-drawer-foot .c-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-height: 48px;
    padding: 8px var(--uw-space-16);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    white-space: nowrap;
  }
}

/* Tablet-Breite (768–1100px): gleicher Drawer, feste 380px an der
   rechten Kante — die Seite bleibt sichtbar, aber gedimmt (Plan §4). */
@media (min-width: 767.02px) and (max-width: 1100px) {
  body #brx-header .c-header__nav .bricks-mobile-menu-wrapper {
    width: 380px;
  }
}

body .c-team-section .c-team-card-mobile {
  flex-wrap: nowrap;          /* neutralize Bricks block default */
}
body .c-team-section .c-team-card-mobile__text {
  flex: 1 1 0;                /* was 1 1 auto — basis 0 never triggers wrap */
}
body .c-team-section .c-team-card-mobile__role {
  overflow-wrap: anywhere;    /* long unbroken words break too */
}