/* ==========================================================
   BBH Technische Anlagen GmbH
   GEMEINSAME WEBSITE-CSS

   Ford / 48-V:               bbh48z-*
   KFZ Elektrik / Elektronik: bbhkfz-*
   Fahrzeugtechnik /
   Nutzfahrzeuge /
   Funktionsmotor /
   Fahrzeugumbauten /
   Komfort & Sicherheit /
   Startseite / Kontakt:      bbhveh-*
   Produktübersicht:          bbhprod-*

   GEMEINSAME KOMPONENTEN:
   Pills:                     bbh-pills / bbh-pill
   Markenfeld:                bbh-brand-panel
   Karten / Kontakt:          bbhcontact-*

   Balasana-Robustheit über !important.
   ========================================================== */


/* ==========================================================
   01. WORDPRESS / BALASANA RESET
   ========================================================== */

.bbh48z-shell,
.bbhkfz-shell,
.bbhveh-shell,
.bbhprod-shell {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
}

body:has(
    .bbh48z-shell,
    .bbhkfz-shell,
    .bbhveh-shell,
    .bbhprod-shell
) {
    overflow-x: clip !important;
}

body:has(
    .bbh48z-shell,
    .bbhkfz-shell,
    .bbhveh-shell,
    .bbhprod-shell
) .entry-title,
body:has(
    .bbh48z-shell,
    .bbhkfz-shell,
    .bbhveh-shell,
    .bbhprod-shell
) .entry-header {
    display: none !important;
}

body:has(
    .bbh48z-shell,
    .bbhkfz-shell,
    .bbhveh-shell,
    .bbhprod-shell
) .entry-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ==========================================================
   02. ALTES STARTSEITEN-BANNER ENTFERNEN
   ========================================================== */

body:has(.bbhveh-hero--no-media)
img[src*="Banner1-1568x273.jpg"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.bbhveh-hero--no-media)
figure:has(img[src*="Banner1-1568x273.jpg"]),
body:has(.bbhveh-hero--no-media)
p:has(img[src*="Banner1-1568x273.jpg"]),
body:has(.bbhveh-hero--no-media)
.wp-block-image:has(img[src*="Banner1-1568x273.jpg"]),
body:has(.bbhveh-hero--no-media)
.wp-block-gallery:has(img[src*="Banner1-1568x273.jpg"]),
body:has(.bbhveh-hero--no-media)
.wp-block-cover:has(img[src*="Banner1-1568x273.jpg"]),
body:has(.bbhveh-hero--no-media)
a:has(img[src*="Banner1-1568x273.jpg"]) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}


/* ==========================================================
   03. GEMEINSAME BASIS
   ========================================================== */

.bbh48z,
.bbhkfz,
.bbhveh,
.bbhprod {
    --bbh-dark: #0b1a22;
    --bbh-dark-2: #102832;

    --bbh-blue: #008eb6;
    --bbh-cyan: #26bdd8;
    --bbh-cyan-light: #8ce2ef;

    --bbh-text: #14262e;
    --bbh-muted: #5d7079;

    --bbh-line: #d9e4e8;

    --bbh-bg: #f2f7f8;
    --bbh-bg-2: #eaf2f5;

    position: relative !important;

    width: calc(100% - 48px) !important;
    max-width: 1200px !important;

    margin: 0 auto 80px auto !important;
    padding: 0 !important;

    color: var(--bbh-text) !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 16px !important;
    line-height: 1.65 !important;

    float: none !important;
    clear: both !important;
}

:is(.bbh48z, .bbhkfz, .bbhveh, .bbhprod),
:is(.bbh48z, .bbhkfz, .bbhveh, .bbhprod) *,
:is(.bbh48z, .bbhkfz, .bbhveh, .bbhprod) *::before,
:is(.bbh48z, .bbhkfz, .bbhveh, .bbhprod) *::after {
    box-sizing: border-box !important;
}

:is(.bbh48z, .bbhkfz, .bbhveh, .bbhprod) * {
    min-width: 0;
}

:is(.bbh48z, .bbhkfz, .bbhveh, .bbhprod) img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    margin: 0 !important;
}

:is(.bbh48z, .bbhkfz, .bbhveh, .bbhprod) h1,
:is(.bbh48z, .bbhkfz, .bbhveh, .bbhprod) h2,
:is(.bbh48z, .bbhkfz, .bbhveh, .bbhprod) h3,
:is(.bbh48z, .bbhkfz, .bbhveh, .bbhprod) h4 {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        Helvetica,
        sans-serif !important;

    text-transform: none !important;
    font-style: normal !important;
}

:is(.bbh48z, .bbhkfz, .bbhveh, .bbhprod) p {
    width: auto !important;
    max-width: none !important;
    margin: 0 0 18px 0 !important;

    color: var(--bbh-muted) !important;

    font-size: 16px !important;
    line-height: 1.72 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
}

:is(.bbh48z, .bbhkfz, .bbhveh, .bbhprod) p:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================
   04. GEMEINSAMER HERO
   ========================================================== */

.bbh48z-hero,
.bbhkfz-hero,
.bbhveh-hero,
.bbhprod-hero {
    position: relative !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    overflow: hidden !important;

    padding: 52px 62px 34px 62px !important;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(38,189,216,.20),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #091820 0%,
            #102a34 58%,
            #0b2029 100%
        ) !important;

    border-radius: 22px !important;

    box-shadow:
        0 22px 55px rgba(13,31,40,.16) !important;
}

.bbh48z-hero::before,
.bbhkfz-hero::before,
.bbhveh-hero::before,
.bbhprod-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 38px 38px;

    pointer-events: none;
}

.bbh48z-hero::after,
.bbhkfz-hero::after,
.bbhveh-hero::after,
.bbhprod-hero::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -190px;
    bottom: -215px;

    border: 1px solid rgba(75,208,230,.17);
    border-radius: 50%;

    box-shadow:
        0 0 0 48px rgba(32,184,213,.027),
        0 0 0 96px rgba(32,184,213,.018);

    pointer-events: none;
}


/* ==========================================================
   05. HERO OVERLINE
   ========================================================== */

.bbh48z-overline,
.bbhkfz-overline,
.bbhveh-overline,
.bbhprod-overline {
    display: flex !important;

    align-items: center !important;

    gap: 11px !important;

    margin: 0 0 18px 0 !important;

    color: var(--bbh-cyan-light) !important;
    -webkit-text-fill-color: var(--bbh-cyan-light) !important;

    font-size: 11px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;

    letter-spacing: 1.4px !important;

    text-transform: uppercase !important;
}

.bbh48z-overline::before,
.bbhkfz-overline::before,
.bbhveh-overline::before,
.bbhprod-overline::before {
    content: "";

    display: block !important;

    flex: 0 0 31px !important;

    width: 31px !important;
    height: 2px !important;

    background: var(--bbh-cyan) !important;
}


/* ==========================================================
   06. HERO TITEL
   ========================================================== */

.bbh48z .bbh48z-hero h1,
.bbhkfz .bbhkfz-hero h1,
.bbhveh .bbhveh-hero h1,
.bbhprod .bbhprod-hero h1 {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: clamp(44px,4.5vw,65px) !important;

    line-height: 1.03 !important;

    font-weight: 780 !important;

    letter-spacing: -1.8px !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
}

.bbh48z .bbh48z-hero h1 span,
.bbhkfz .bbhkfz-hero h1 span,
.bbhveh .bbhveh-hero h1 span,
.bbhprod .bbhprod-hero h1 span {
    display: block !important;

    margin: 7px 0 0 0 !important;
    padding: 0 !important;

    color: #61d5e8 !important;
    -webkit-text-fill-color: #61d5e8 !important;
}


/* ==========================================================
   07. HERO BODY
   ========================================================== */

.bbh48z-hero-body,
.bbhkfz-hero-body,
.bbhveh-hero-body,
.bbhprod-hero-body {
    position: relative !important;
    z-index: 2 !important;

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: flex-start !important;

    gap: 48px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.bbhprod-hero-body {
    align-items: center !important;
    gap: 52px !important;
}

.bbh48z-hero-copy {
    flex: 0 1 42% !important;
    width: 42% !important;
}

.bbhkfz-hero-copy,
.bbhveh-hero-copy {
    flex: 0 1 43% !important;
    width: 43% !important;
}

.bbhprod-hero-copy {
    flex: 0 1 46% !important;
    width: 46% !important;
}

.bbh48z-hero-image {
    flex: 1 1 58% !important;
    width: 58% !important;
}

.bbhkfz-hero-image,
.bbhveh-hero-image {
    flex: 1 1 57% !important;
    width: 57% !important;
}

.bbh48z-lead,
.bbhkfz-hero-lead,
.bbhveh-hero-lead,
.bbhprod-hero-lead {
    width: 100% !important;

    margin: 0 0 28px 0 !important;

    color: #d2dde2 !important;
    -webkit-text-fill-color: #d2dde2 !important;

    font-size: 17px !important;
    line-height: 1.72 !important;
}

.bbhprod-hero-lead {
    margin-bottom: 0 !important;
}


/* ==========================================================
   08. GEMEINSAMER HERO GRID
   ========================================================== */

.bbhkfz-hero-grid,
.bbhveh-hero-grid {
    position: relative !important;
    z-index: 2 !important;

    display: grid !important;

    grid-template-columns:
        minmax(0,42fr)
        minmax(0,58fr) !important;

    grid-template-areas:
        "main image"
        "facts facts" !important;

    column-gap: 46px !important;
    row-gap: 18px !important;

    align-items: stretch !important;
    align-content: start !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

.bbhkfz-hero-main,
.bbhveh-hero-main {
    grid-area: main !important;

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

.bbhkfz-hero-main .bbhkfz-hero-copy,
.bbhveh-hero-main .bbhveh-hero-copy {
    display: block !important;

    flex: none !important;

    width: 100% !important;

    margin: auto 0 0 0 !important;

    padding: 30px 0 0 0 !important;
}

.bbhkfz-hero-main .bbhkfz-hero-lead:last-child,
.bbhveh-hero-main .bbhveh-hero-lead:last-child {
    margin-bottom: 0 !important;
}

.bbhkfz-hero-grid > .bbhkfz-hero-image,
.bbhveh-hero-grid > .bbhveh-hero-image {
    grid-area: image !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-self: stretch !important;

    flex: none !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;

    margin: 0 !important;
}

.bbhkfz-hero-grid > .bbhkfz-hero-image img,
.bbhveh-hero-grid > .bbhveh-hero-image img {
    width: 100% !important;

    height: auto !important;

    max-height: 430px !important;

    object-fit: contain !important;
    object-position: center center !important;
}

.bbhkfz-hero-grid > .bbhkfz-facts,
.bbhveh-hero-grid > .bbhveh-facts {
    grid-area: facts !important;

    display: grid !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    gap: 10px !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   09. HERO OHNE BILD
   ========================================================== */

.bbhveh-hero--no-media .bbhveh-hero-grid {
    grid-template-columns: minmax(0,1fr) !important;

    grid-template-areas:
        "main"
        "facts" !important;

    column-gap: 0 !important;
    row-gap: 32px !important;
}

.bbhveh-hero--no-media .bbhveh-hero-main {
    width: 100% !important;
    max-width: 980px !important;

    margin: 0 !important;
}

.bbhveh-hero--no-media .bbhveh-hero-main h1 {
    width: 100% !important;
    max-width: 950px !important;
}

.bbhveh-hero--no-media .bbhveh-hero-main .bbhveh-hero-copy {
    width: 100% !important;
    max-width: 900px !important;

    margin: 0 !important;

    padding-top: 28px !important;
}

.bbhveh-hero--no-media .bbhveh-facts {
    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    width: 100% !important;

    margin: 0 !important;
}


/* ==========================================================
   10. HELLER HERO
   ========================================================== */

.bbhveh-hero.bbhveh-hero--light {
    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(38,189,216,.13),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #f8fbfc 0%,
            #f1f7f9 52%,
            #eaf3f6 100%
        ) !important;

    border: 1px solid #d7e6eb !important;

    box-shadow:
        0 18px 44px rgba(13,31,40,.08) !important;
}

.bbhveh-hero.bbhveh-hero--light::before {
    background-image:
        linear-gradient(
            rgba(18,55,68,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(18,55,68,.035) 1px,
            transparent 1px
        ) !important;
}

.bbhveh-hero.bbhveh-hero--light::after {
    border-color: rgba(0,142,182,.13) !important;

    box-shadow:
        0 0 0 48px rgba(0,142,182,.025),
        0 0 0 96px rgba(0,142,182,.017) !important;
}

.bbhveh-hero--light .bbhveh-overline {
    color: var(--bbh-blue) !important;
    -webkit-text-fill-color: var(--bbh-blue) !important;
}

.bbhveh .bbhveh-hero.bbhveh-hero--light h1 {
    color: var(--bbh-dark) !important;
    -webkit-text-fill-color: var(--bbh-dark) !important;
}

.bbhveh .bbhveh-hero.bbhveh-hero--light h1 span {
    color: #069fbe !important;
    -webkit-text-fill-color: #069fbe !important;
}

.bbhveh-hero--light .bbhveh-hero-lead {
    color: #4e6772 !important;
    -webkit-text-fill-color: #4e6772 !important;
}


/* ==========================================================
   11. MARKENFELD / LOGO
   ========================================================== */

.bbh-brand-panel {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    min-height: 310px !important;

    padding: 30px 34px !important;

    background: #ffffff !important;

    border: 1px solid #d6e4e9 !important;

    border-radius: 16px !important;

    box-shadow:
        0 16px 36px rgba(16,47,59,.08) !important;
}

.bbh-brand-panel img {
    display: block !important;

    width: 100% !important;
    max-width: 520px !important;

    height: auto !important;
    max-height: 250px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center center !important;
}


/* ==========================================================
   12. HERO LANGE TITEL
   ========================================================== */

.bbhveh-hero--wide-title .bbhveh-hero-grid,
.bbhveh-hero--motor .bbhveh-hero-grid {
    grid-template-columns:
        minmax(0,48fr)
        minmax(0,52fr) !important;

    column-gap: 36px !important;
}

.bbhveh-hero--wide-title .bbhveh-hero-main h1 {
    width: 100% !important;
    max-width: 100% !important;

    font-size: clamp(39px,4.1vw,55px) !important;
    line-height: 1.04 !important;
    letter-spacing: -1.5px !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

.bbhveh-hero--wide-title .bbhveh-hero-main h1 span {
    font-size: .84em !important;
    line-height: 1.08 !important;
}

.bbhveh-hero--motor .bbhveh-hero-main h1 {
    width: 100% !important;
    max-width: 100% !important;

    font-size: clamp(40px,4.2vw,56px) !important;
    line-height: 1.04 !important;
    letter-spacing: -1.5px !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

.bbhveh-hero--motor .bbhveh-hero-main h1 span {
    font-size: .82em !important;
    line-height: 1.08 !important;
}


/* ==========================================================
   13. HERO FACTS
   ========================================================== */

.bbh48z-facts,
.bbhkfz-facts,
.bbhveh-facts {
    display: grid !important;

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

    gap: 10px !important;

    width: 100% !important;
}

.bbh48z-fact,
.bbhkfz-fact,
.bbhveh-fact {
    min-height: 88px !important;

    padding: 17px 18px !important;

    background: rgba(255,255,255,.055) !important;

    border: 1px solid rgba(255,255,255,.14) !important;

    border-radius: 10px !important;
}

.bbh48z-fact strong,
.bbhkfz-fact strong,
.bbhveh-fact strong {
    display: block !important;

    margin: 0 0 9px 0 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 750 !important;
}

.bbh48z-fact span,
.bbhkfz-fact span,
.bbhveh-fact span {
    display: block !important;

    color: #b4c3c9 !important;
    -webkit-text-fill-color: #b4c3c9 !important;

    font-size: 11.5px !important;
    line-height: 1.5 !important;
}


/* ==========================================================
   14. HERO BILD
   ========================================================== */

.bbh48z-hero-image,
.bbhkfz-hero-image,
.bbhveh-hero-image {
    position: relative !important;

    margin: 0 !important;
    padding: 9px !important;

    background: rgba(255,255,255,.085) !important;

    border: 1px solid rgba(255,255,255,.17) !important;

    border-radius: 16px !important;

    box-shadow:
        0 20px 48px rgba(0,0,0,.30) !important;
}

.bbh48z-hero-image img,
.bbhkfz-hero-image img,
.bbhveh-hero-image img {
    width: 100% !important;

    height: auto !important;

    object-fit: contain !important;
    object-position: center center !important;

    border-radius: 10px !important;
}

.bbh48z-image-label,
.bbhkfz-image-label,
.bbhveh-image-label {
    position: absolute !important;

    left: 20px !important;
    right: 20px !important;
    bottom: 19px !important;

    padding: 8px 11px !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: rgba(7,22,29,.86) !important;

    border: 1px solid rgba(255,255,255,.14) !important;

    border-radius: 5px !important;

    font-size: 10px !important;
    line-height: 1.35 !important;
}


/* ==========================================================
   15. HERO BADGES
   ========================================================== */

.bbh48z-voltage {
    position: absolute !important;
    z-index: 10 !important;

    top: -18px !important;
    right: -17px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 76px !important;
    height: 76px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background:
        linear-gradient(145deg,#35c4dc,#05a6c8) !important;

    border: 5px solid #102630 !important;
    border-radius: 50% !important;

    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    white-space: nowrap !important;

    box-shadow:
        0 10px 24px rgba(0,178,211,.32) !important;
}

.bbhkfz-bus-badge,
.bbhveh-badge {
    position: absolute !important;
    z-index: 10 !important;

    top: -17px !important;
    right: -16px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 84px !important;
    height: 84px !important;

    padding: 8px !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background:
        linear-gradient(145deg,#35c5dc,#04a6c9) !important;

    border: 5px solid #102630 !important;
    border-radius: 50% !important;

    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;

    text-align: center !important;

    box-shadow:
        0 10px 24px rgba(0,178,211,.32) !important;
}

.bbhkfz-bus-badge {
    flex-direction: column !important;
    font-size: 14px !important;
}


/* ==========================================================
   16. CORE CARDS
   ========================================================== */

.bbh48z-core,
.bbhkfz-core,
.bbhveh-core {
    display: flex !important;

    flex-direction: row !important;

    align-items: stretch !important;

    gap: 16px !important;

    width: 100% !important;

    margin: 18px 0 84px 0 !important;
}

.bbh48z-core-card,
.bbhkfz-core-card,
.bbhveh-core-card {
    flex: 1 1 0 !important;

    width: calc((100% - 32px) / 3) !important;

    margin: 0 !important;
    padding: 26px !important;

    background: #ffffff !important;

    border: 1px solid var(--bbh-line) !important;

    border-radius: 13px !important;

    box-shadow:
        0 8px 25px rgba(17,43,55,.055) !important;
}

.bbh48z-core-number,
.bbhkfz-core-number,
.bbhveh-core-number {
    display: block !important;

    margin: 0 0 17px 0 !important;

    color: var(--bbh-blue) !important;
    -webkit-text-fill-color: var(--bbh-blue) !important;

    font-size: 10px !important;
    line-height: 1.4 !important;
    font-weight: 850 !important;

    letter-spacing: 1.2px !important;

    text-transform: uppercase !important;
}

.bbh48z-core-card h3,
.bbhkfz-core-card h3,
.bbhveh-core-card h3 {
    margin: 0 0 10px 0 !important;

    color: var(--bbh-dark) !important;

    font-size: 19px !important;
    line-height: 1.28 !important;
    font-weight: 750 !important;
}

.bbh48z-core-card p,
.bbhkfz-core-card p,
.bbhveh-core-card p {
    font-size: 14px !important;
    line-height: 1.65 !important;
}


/* ==========================================================
   17. SECTION HEADINGS
   ========================================================== */

.bbh48z-section,
.bbhkfz-section,
.bbhveh-section,
.bbhprod-section {
    width: 100% !important;

    margin: 0 0 84px 0 !important;

    clear: both !important;
}

.bbhprod-overview {
    margin-top: 72px !important;
}

.bbh48z-heading,
.bbhkfz-heading,
.bbhveh-heading,
.bbhprod-heading {
    width: 100% !important;

    margin: 0 0 30px 0 !important;
}

.bbh48z-kicker,
.bbhkfz-kicker,
.bbhveh-kicker,
.bbhprod-kicker,
.bbhkfz-dark-kicker,
.bbhveh-dark-kicker {
    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    margin: 0 0 10px 0 !important;

    color: var(--bbh-blue) !important;
    -webkit-text-fill-color: var(--bbh-blue) !important;

    font-size: 10px !important;
    line-height: 1.4 !important;
    font-weight: 850 !important;

    letter-spacing: 1.4px !important;

    text-transform: uppercase !important;
}

.bbh48z-kicker::before,
.bbhkfz-kicker::before,
.bbhveh-kicker::before,
.bbhprod-kicker::before,
.bbhkfz-dark-kicker::before,
.bbhveh-dark-kicker::before {
    content: "";

    display: block !important;

    flex: 0 0 27px !important;

    width: 27px !important;
    height: 2px !important;

    background: var(--bbh-cyan) !important;
}

.bbh48z-heading h2,
.bbh48z-training h2,
.bbh48z-cta h2,
.bbhkfz-heading h2,
.bbhkfz-target-wrap h2,
.bbhkfz-cta h2,
.bbhveh-heading h2,
.bbhveh-target-wrap h2,
.bbhveh-cta h2,
.bbhprod-heading h2,
.bbhprod-cta h2 {
    width: 100% !important;

    margin: 0 0 14px 0 !important;

    color: var(--bbh-dark) !important;
    -webkit-text-fill-color: var(--bbh-dark) !important;

    font-size: clamp(28px,3vw,39px) !important;

    line-height: 1.16 !important;

    font-weight: 780 !important;

    letter-spacing: -.8px !important;
}

.bbh48z-heading p,
.bbhkfz-heading p,
.bbhveh-heading p,
.bbhprod-heading p {
    max-width: 1000px !important;

    font-size: 16px !important;
    line-height: 1.7 !important;
}


/* ==========================================================
   18. GEMEINSAME NUMMERN
   ========================================================== */

.bbhveh-process-number,
.bbhkfz-practice-number,
.bbhprod-quick-number,
.bbhprod-info-number,
.bbhprod-card-index {
    display: grid !important;

    place-items: center !important;

    box-sizing: border-box !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding: 0 !important;

    text-align: center !important;
    text-indent: 0 !important;

    font-weight: 850 !important;

    white-space: nowrap !important;
}

.bbhveh-process-number,
.bbhkfz-practice-number,
.bbhprod-quick-number,
.bbhprod-info-number {
    position: static !important;

    flex: 0 0 40px !important;

    width: 40px !important;
    min-width: 40px !important;

    height: 40px !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background:
        linear-gradient(145deg,#25bdd7,#068fae) !important;

    border: 0 !important;
    border-radius: 8px !important;

    box-shadow: none !important;

    font-size: 10px !important;
    line-height: 10px !important;

    transform: none !important;
}

.bbhveh-process-number,
.bbhkfz-practice-number,
.bbhprod-info-number {
    margin-bottom: 18px !important;
}

.bbhveh-process-number br,
.bbhkfz-practice-number br,
.bbhprod-quick-number br,
.bbhprod-info-number br,
.bbhprod-card-index br {
    display: none !important;
}


/* ==========================================================
   19. GEMEINSAME BULLETS
   ========================================================== */

.bbhkfz-equipment-item,
.bbhveh-equipment-item,
.bbhprod-card-feature {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    min-height: 18px !important;

    margin: 0 !important;
    padding: 0 0 0 15px !important;

    color: var(--bbh-muted) !important;
    -webkit-text-fill-color: var(--bbh-muted) !important;

    background-color: transparent !important;

    background-image:
        radial-gradient(
            circle,
            var(--bbh-cyan) 0 3px,
            transparent 3.2px
        ) !important;

    background-repeat: no-repeat !important;
    background-size: 6px 6px !important;
    background-position: 0 6px !important;

    border: 0 !important;

    box-shadow: none !important;

    font-size: 12.5px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;

    text-align: left !important;
    text-indent: 0 !important;

    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;

    transform: none !important;
}

.bbhkfz-equipment-item::before,
.bbhveh-equipment-item::before,
.bbhprod-card-feature::before,
.bbhkfz-equipment-item::after,
.bbhveh-equipment-item::after,
.bbhprod-card-feature::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   20. HELLE PRODUKTBEREICHE
   ========================================================== */

.bbhkfz-product,
.bbhveh-product {
    display: flex !important;

    flex-direction: row !important;

    align-items: stretch !important;

    width: 100% !important;

    overflow: hidden !important;

    background: var(--bbh-bg) !important;

    border: 1px solid var(--bbh-line) !important;

    border-radius: 18px !important;
}

.bbhkfz-product-image,
.bbhveh-product-image {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 52% !important;

    width: 52% !important;

    min-height: 550px !important;

    padding: 18px !important;

    background: #e8eef1 !important;
}

.bbhkfz-product-image--portrait {
    min-height: 690px !important;
}

.bbhkfz-product-image--landscape {
    min-height: 500px !important;
}

.bbhkfz-product-image img,
.bbhveh-product-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    border-radius: 9px !important;
}

.bbhkfz-product-copy,
.bbhveh-product-copy {
    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    flex: 1 1 48% !important;

    width: 48% !important;

    padding: 44px !important;
}

.bbhkfz-product-copy h3,
.bbhveh-product-copy h3 {
    margin: 0 0 16px 0 !important;

    color: var(--bbh-dark) !important;

    font-size: 28px !important;
    line-height: 1.18 !important;
    font-weight: 780 !important;
}

.bbhkfz-product-copy p,
.bbhveh-product-copy p {
    font-size: 15px !important;
    line-height: 1.7 !important;
}


/* ==========================================================
   21. DETAIL-PRODUKTBLOCK
   ========================================================== */

.bbhkfz-product.bbhkfz-product--detail,
.bbhveh-product.bbhveh-product--detail {
    display: grid !important;

    grid-template-columns:
        minmax(0,52fr)
        minmax(0,48fr) !important;

    grid-template-rows:
        auto
        auto !important;

    align-items: stretch !important;

    width: 100% !important;
}

.bbhkfz-product--detail .bbhkfz-product-image,
.bbhveh-product--detail .bbhveh-product-image {
    grid-column: 1 !important;
    grid-row: 1 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;

    padding: 18px !important;

    background: #e8eef1 !important;

    overflow: hidden !important;
}

.bbhkfz-product--detail .bbhkfz-product-image img,
.bbhveh-product--detail .bbhveh-product-image img {
    display: block !important;

    width: auto !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: 520px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center center !important;

    border-radius: 9px !important;
}

.bbhkfz-product--detail .bbhkfz-product-copy,
.bbhveh-product--detail .bbhveh-product-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 38px 42px !important;
}

.bbhkfz-product-details,
.bbhveh-product-details {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 30px 44px 40px 44px !important;

    background: rgba(255,255,255,.48) !important;

    border-top: 1px solid var(--bbh-line) !important;
}


/* ==========================================================
   22. TECH BOXEN
   ========================================================== */

.bbhkfz-tech,
.bbhveh-tech {
    display: grid !important;

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

    gap: 9px !important;

    width: 100% !important;

    margin: 21px 0 0 0 !important;
}

.bbhkfz-product-details .bbhkfz-tech,
.bbhveh-product-details .bbhveh-tech {
    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    margin-top: 0 !important;
}

.bbhkfz-tech-item,
.bbhveh-tech-item {
    min-height: 73px !important;

    padding: 13px 14px !important;

    background: #ffffff !important;

    border: 1px solid var(--bbh-line) !important;

    border-radius: 9px !important;
}

.bbhkfz-tech-item strong,
.bbhveh-tech-item strong {
    display: block !important;

    margin: 0 0 5px 0 !important;

    color: var(--bbh-dark) !important;

    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 750 !important;
}

.bbhkfz-tech-item span,
.bbhveh-tech-item span {
    display: block !important;

    color: var(--bbh-muted) !important;

    font-size: 11.5px !important;
    line-height: 1.45 !important;
}


/* ==========================================================
   23. EQUIPMENT
   ========================================================== */

.bbhkfz-equipment,
.bbhveh-equipment {
    width: 100% !important;

    margin: 25px 0 0 0 !important;
}

.bbhkfz-equipment-title,
.bbhveh-equipment-title {
    margin: 0 0 12px 0 !important;

    color: var(--bbh-dark) !important;

    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
}

.bbhkfz-equipment-grid,
.bbhveh-equipment-grid {
    display: grid !important;

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

    column-gap: 20px !important;
    row-gap: 8px !important;

    width: 100% !important;
}

.bbhkfz-product-details .bbhkfz-equipment-grid,
.bbhveh-product-details .bbhveh-equipment-grid {
    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    column-gap: 28px !important;
    row-gap: 9px !important;
}

.bbhkfz-product-note,
.bbhveh-product-note {
    margin-top: 24px !important;

    padding-top: 20px !important;

    border-top: 1px solid var(--bbh-line) !important;
}


/* ==========================================================
   24. DARK PRODUCT
   ========================================================== */

.bbhkfz-product-dark,
.bbhveh-product-dark {
    display: flex !important;

    flex-direction: row !important;

    align-items: stretch !important;

    width: 100% !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(38,189,216,.18),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #0b1b23,
            #122a34
        ) !important;

    border-radius: 19px !important;

    box-shadow:
        0 18px 45px rgba(14,35,45,.11) !important;
}

.bbhkfz-product-dark-copy,
.bbhveh-product-dark-copy {
    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    flex: 1 1 48% !important;

    width: 48% !important;

    padding: 46px !important;
}

.bbhkfz-product-dark-image,
.bbhveh-product-dark-image {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 52% !important;

    width: 52% !important;

    min-height: 600px !important;

    padding: 20px !important;

    background: rgba(255,255,255,.035) !important;
}

.bbhkfz-product-dark-image img,
.bbhveh-product-dark-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    border-radius: 11px !important;
}

.bbhkfz-dark-kicker,
.bbhveh-dark-kicker {
    color: #7bdceb !important;
    -webkit-text-fill-color: #7bdceb !important;
}

.bbhkfz-product-dark-copy h3,
.bbhveh-product-dark-copy h3 {
    margin: 0 0 17px 0 !important;

    color: #ffffff !important;

    font-size: 28px !important;
    line-height: 1.18 !important;
    font-weight: 780 !important;
}

.bbhkfz-product-dark-copy p,
.bbhveh-product-dark-copy p {
    color: #c8d5da !important;
    -webkit-text-fill-color: #c8d5da !important;

    font-size: 15px !important;
    line-height: 1.72 !important;
}

.bbhkfz-product-dark .bbhkfz-equipment-title,
.bbhveh-product-dark .bbhveh-equipment-title {
    color: #ffffff !important;
}

.bbhkfz-product-dark .bbhkfz-equipment-item,
.bbhveh-product-dark .bbhveh-equipment-item {
    color: #c8d5da !important;
    -webkit-text-fill-color: #c8d5da !important;
}


/* ==========================================================
   25. DARK TECH
   ========================================================== */

.bbhkfz-dark-tech,
.bbhveh-dark-tech {
    display: grid !important;

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

    gap: 9px !important;

    margin: 21px 0 0 0 !important;
}

.bbhkfz-dark-tech-item,
.bbhveh-dark-tech-item {
    min-height: 73px !important;

    padding: 14px !important;

    background: rgba(255,255,255,.055) !important;

    border: 1px solid rgba(255,255,255,.14) !important;

    border-radius: 9px !important;
}

.bbhkfz-dark-tech-item strong,
.bbhveh-dark-tech-item strong {
    display: block !important;

    margin: 0 0 5px 0 !important;

    color: #ffffff !important;

    font-size: 13px !important;
}

.bbhkfz-dark-tech-item span,
.bbhveh-dark-tech-item span {
    display: block !important;

    color: #bac9cf !important;

    font-size: 11.5px !important;
    line-height: 1.45 !important;
}


/* ==========================================================
   26. PROCESS / PRACTICE
   ========================================================== */

.bbhveh-process,
.bbhkfz-practice {
    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: stretch !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;
}

.bbhveh-process {
    gap: 14px !important;
}

.bbhkfz-practice {
    gap: 16px !important;
}

.bbhveh-process > p,
.bbhveh-process > br,
.bbhkfz-practice > p,
.bbhkfz-practice > br {
    display: none !important;
}

.bbhveh-process-card {
    display: block !important;

    flex: 1 1 0 !important;

    width: calc((100% - 42px) / 4) !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 25px !important;

    background: var(--bbh-bg) !important;

    border: 1px solid var(--bbh-line) !important;

    border-radius: 13px !important;
}

.bbhkfz-practice-card {
    display: block !important;

    flex: 1 1 0 !important;

    width: calc((100% - 32px) / 3) !important;

    min-width: 0 !important;
    min-height: 315px !important;

    margin: 0 !important;

    padding: 27px !important;

    background: #ffffff !important;

    border: 1px solid var(--bbh-line) !important;

    border-radius: 13px !important;

    box-shadow:
        0 8px 25px rgba(17,43,55,.055) !important;
}

.bbhveh-process-card h3,
.bbhkfz-practice-card h3 {
    margin: 0 0 9px 0 !important;

    color: var(--bbh-dark) !important;

    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 750 !important;
}

.bbhkfz-practice-card h3 {
    font-size: 20px !important;
}


/* ==========================================================
   27. TARGET WRAP
   ========================================================== */

.bbhkfz-target-wrap,
.bbhveh-target-wrap {
    width: 100% !important;

    padding: 43px !important;

    background: var(--bbh-bg) !important;

    border-radius: 18px !important;
}


/* ==========================================================
   28. GEMEINSAME PILLS
   ========================================================== */

.bbh-pills,
.bbh48z-targets,
.bbhkfz-targets,
.bbhveh-targets {
    display: flex !important;

    flex-direction: row !important;
    flex-wrap: wrap !important;

    align-items: center !important;

    gap: 10px !important;

    width: 100% !important;

    margin: 27px 0 0 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;
}

.bbh-pills > p,
.bbh-pills > br,
.bbh48z-targets > p,
.bbh48z-targets > br,
.bbhkfz-targets > p,
.bbhkfz-targets > br,
.bbhveh-targets > p,
.bbhveh-targets > br {
    display: none !important;
}


/* ==========================================================
   29. GEMEINSAME PILL-KOMPONENTE

   WICHTIG:
   Dieser Style wird für ALLE modernen blauen Auswahlfelder
   und Buttons verwendet.

   Die 14px Padding unten entsprechen optisch einer
   Verschiebung des Textes um ca. -7px.

   Dadurch ist KEINE seitenbezogene Korrektur mehr nötig.
   ========================================================== */

.bbh-pill {
    position: relative !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 150px !important;

    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    margin: 0 !important;

    /* optische vertikale Zentrierung */
    padding: 0 28px 14px 28px !important;

    color: #176377 !important;
    -webkit-text-fill-color: #176377 !important;

    background: #e6f5f8 !important;

    border: 1px solid #c8e5eb !important;

    border-radius: 999px !important;

    box-sizing: border-box !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 750 !important;

    text-align: center !important;
    text-indent: 0 !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    transform: none !important;

    cursor: default !important;
}

a.bbh-pill {
    cursor: pointer !important;
}

a.bbh-pill:hover,
a.bbh-pill:focus,
a.bbh-pill:active,
a.bbh-pill:visited {
    color: #176377 !important;
    -webkit-text-fill-color: #176377 !important;

    text-decoration: none !important;
}

a.bbh-pill:hover {
    border-color: #8fd5e2 !important;

    box-shadow:
        0 7px 18px rgba(17,43,55,.07) !important;
}

.bbh-pill::before,
.bbh-pill::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   30. ALTE PILL-STRUKTUREN
   ========================================================== */

.bbh48z-chip,
.bbhkfz-target,
.bbhveh-target {
    position: relative !important;

    display: grid !important;

    place-items: center !important;

    flex: 0 0 auto !important;

    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    margin: 0 !important;

    padding: 0 14px !important;

    color: #176377 !important;

    background: #e6f5f8 !important;

    border: 1px solid #c8e5eb !important;

    border-radius: 999px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}

.bbh48z-chip-school,
.bbhkfz-target-school,
.bbhveh-target-school {
    width: 155px !important;
}

.bbh48z-chip-trainingcenter,
.bbhkfz-target-trainingcenter,
.bbhveh-target-trainingcenter {
    width: 195px !important;
}

.bbh48z-chip-master,
.bbhkfz-target-master,
.bbhveh-target-master {
    width: 165px !important;
}

.bbh48z-chip-university,
.bbhkfz-target-university,
.bbhveh-target-university {
    width: 145px !important;
}

.bbh48z-chip-further,
.bbhkfz-target-further,
.bbhveh-target-further {
    width: 235px !important;
}


/* ==========================================================
   31. ALTE PILL-LABEL
   ========================================================== */

.bbh48z-chip-label,
.bbhkfz-target-label,
.bbhveh-target-label {
    position: static !important;

    display: grid !important;

    place-items: center !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #176377 !important;
    -webkit-text-fill-color: #176377 !important;

    background: transparent !important;

    border: 0 !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 750 !important;

    text-align: center !important;
    text-indent: 0 !important;

    white-space: nowrap !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    transform: translateY(-7px) !important;

    pointer-events: none !important;

    box-sizing: border-box !important;
}

.bbh48z-chip-label::before,
.bbh48z-chip-label::after,
.bbhkfz-target-label::before,
.bbhkfz-target-label::after,
.bbhveh-target-label::before,
.bbhveh-target-label::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   32. VEHICLE MODULES
   ========================================================== */

.bbhveh-modules {
    display: grid !important;

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

    grid-auto-flow: row !important;

    gap: 18px !important;

    align-items: stretch !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;
}

.bbhveh-modules > p,
.bbhveh-modules > br {
    display: none !important;
}

.bbhveh-module {
    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid var(--bbh-line) !important;

    border-radius: 16px !important;

    box-shadow:
        0 8px 25px rgba(17,43,55,.055) !important;
}

.bbhveh-module-image {
    width: 100% !important;

    aspect-ratio: 16 / 10 !important;

    overflow: hidden !important;

    background: #e8eef1 !important;
}

.bbhveh-module-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
}

.bbhveh-module-copy {
    display: flex !important;

    flex-direction: column !important;

    flex: 1 1 auto !important;

    width: 100% !important;

    padding: 27px !important;
}

.bbhveh-module-copy h3 {
    margin: 0 0 11px 0 !important;

    color: var(--bbh-dark) !important;

    font-size: 21px !important;
    line-height: 1.25 !important;
    font-weight: 760 !important;
}

.bbhveh-module-copy p {
    margin: 0 0 15px 0 !important;

    font-size: 14px !important;
    line-height: 1.66 !important;
}


/* ==========================================================
   33. PRODUCT HERO GALLERY
   ========================================================== */

.bbhprod-hero-gallery {
    display: flex !important;

    flex-direction: row !important;

    flex: 1 1 54% !important;

    width: 54% !important;
    height: 365px !important;

    gap: 10px !important;

    padding: 9px !important;

    background: rgba(255,255,255,.085) !important;

    border: 1px solid rgba(255,255,255,.17) !important;

    border-radius: 16px !important;

    box-shadow:
        0 20px 48px rgba(0,0,0,.30) !important;
}

.bbhprod-gallery-main {
    position: relative !important;

    flex: 0 0 61% !important;

    width: 61% !important;
    height: 100% !important;

    overflow: hidden !important;

    border-radius: 10px !important;
}

.bbhprod-gallery-side {
    display: flex !important;

    flex-direction: column !important;

    flex: 1 1 39% !important;

    gap: 10px !important;

    height: 100% !important;
}

.bbhprod-gallery-small {
    position: relative !important;

    flex: 1 1 50% !important;

    overflow: hidden !important;

    border-radius: 10px !important;
}

.bbhprod-gallery-main img,
.bbhprod-gallery-small img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
}

.bbhprod-gallery-label {
    position: absolute !important;

    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;

    padding: 7px 9px !important;

    color: #ffffff !important;

    background: rgba(7,22,29,.82) !important;

    border: 1px solid rgba(255,255,255,.13) !important;

    border-radius: 5px !important;

    font-size: 9px !important;
    line-height: 1.3 !important;
}


/* ==========================================================
   34. PRODUKT SCHNELLAUSWAHL
   ========================================================== */

.bbhprod-quick-wrap {
    width: 100% !important;

    margin: 18px 0 72px 0 !important;

    padding: 26px 30px 28px 30px !important;

    background: var(--bbh-bg) !important;

    border-radius: 16px !important;
}

.bbhprod-quick-head {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 20px !important;

    width: 100% !important;

    margin: 0 0 17px 0 !important;
}

.bbhprod-quick-title {
    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    margin: 0 !important;

    color: var(--bbh-dark) !important;

    font-size: 17px !important;
    line-height: 1.3 !important;
    font-weight: 780 !important;
}

.bbhprod-quick-title::before {
    content: "";

    display: block !important;

    flex: 0 0 27px !important;

    width: 27px !important;
    height: 2px !important;

    background: var(--bbh-cyan) !important;
}

.bbhprod-quick-note {
    margin: 0 !important;

    color: var(--bbh-muted) !important;

    font-size: 12px !important;
    line-height: 1.4 !important;
}

.bbhprod-quick {
    display: grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    gap: 12px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.bbhprod-quick > p,
.bbhprod-quick > br {
    display: none !important;
}

.bbhprod-quick-item {
    position: relative !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    width: 100% !important;

    min-height: 58px !important;

    margin: 0 !important;

    padding: 8px 14px !important;

    background: #ffffff !important;

    border: 1px solid #c9dce5 !important;

    border-radius: 10px !important;

    box-shadow:
        0 3px 10px rgba(15,50,64,.035) !important;

    overflow: hidden !important;
}

.bbhprod-quick-number {
    margin-right: 13px !important;
}

.bbhprod-quick-text {
    position: static !important;

    display: flex !important;

    align-items: center !important;

    flex: 1 1 auto !important;

    min-height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #176377 !important;
    -webkit-text-fill-color: #176377 !important;

    background: none !important;

    border: 0 !important;

    font-size: 12.5px !important;
    line-height: 1.25 !important;
    font-weight: 750 !important;

    text-align: left !important;

    transform: none !important;

    pointer-events: none !important;
}

.bbhprod-quick-arrow {
    position: static !important;

    display: grid !important;

    place-items: center !important;

    flex: 0 0 24px !important;

    width: 24px !important;
    height: 40px !important;

    margin: 0 0 0 8px !important;
    padding: 0 !important;

    color: var(--bbh-blue) !important;
    -webkit-text-fill-color: var(--bbh-blue) !important;

    background: none !important;

    border: 0 !important;

    font-size: 18px !important;
    line-height: 1 !important;

    pointer-events: none !important;
}


/* ==========================================================
   35. PRODUKTGRUPPEN
   ========================================================== */

.bbhprod-groups {
    display: grid !important;

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

    gap: 22px !important;

    align-items: stretch !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.bbhprod-groups > p,
.bbhprod-groups > br {
    display: none !important;
}

.bbhprod-card {
    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid var(--bbh-line) !important;

    border-radius: 16px !important;

    box-shadow:
        0 8px 26px rgba(17,43,55,.055) !important;

    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease !important;
}

.bbhprod-card:hover {
    transform: translateY(-4px) !important;

    border-color: #a9d8e2 !important;

    box-shadow:
        0 17px 38px rgba(17,43,55,.11) !important;
}


/* ==========================================================
   36. PRODUKTKARTEN BILDER
   ========================================================== */

.bbhprod-card-image {
    position: relative !important;

    display: flex !important;

    align-items: flex-start !important;
    justify-content: center !important;

    width: 100% !important;

    aspect-ratio: 16 / 10 !important;

    overflow: hidden !important;

    margin: 0 !important;

    padding: 8px !important;

    background: #e8eef1 !important;
}

.bbhprod-card-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center top !important;
}


/* ==========================================================
   37. PRODUKTKARTEN NUMMER
   ========================================================== */

.bbhprod-card-index {
    position: absolute !important;
    z-index: 3 !important;

    top: 16px !important;
    left: 16px !important;

    width: 43px !important;
    min-width: 43px !important;
    max-width: 43px !important;

    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: rgba(9,28,37,.92) !important;

    border: 1px solid rgba(255,255,255,.18) !important;

    border-radius: 9px !important;

    box-shadow:
        0 5px 12px rgba(0,0,0,.15) !important;

    font-size: 10px !important;
    line-height: 10px !important;
    font-weight: 850 !important;

    letter-spacing: 0 !important;

    text-align: center !important;

    transform: none !important;
}


/* ==========================================================
   38. PRODUKTKARTEN BODY
   ========================================================== */

.bbhprod-card-body {
    display: flex !important;

    flex-direction: column !important;

    flex: 1 1 auto !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 26px 28px 27px 28px !important;
}

.bbhprod-card-type {
    display: block !important;

    margin: 0 0 7px 0 !important;

    color: var(--bbh-blue) !important;
    -webkit-text-fill-color: var(--bbh-blue) !important;

    font-size: 9px !important;
    line-height: 1.4 !important;
    font-weight: 850 !important;

    letter-spacing: 1.2px !important;

    text-transform: uppercase !important;
}

.bbhprod-card h3 {
    margin: 0 0 11px 0 !important;

    color: var(--bbh-dark) !important;

    font-size: 23px !important;
    line-height: 1.22 !important;
    font-weight: 780 !important;
}

.bbhprod-card p {
    margin: 0 0 17px 0 !important;

    color: var(--bbh-muted) !important;

    font-size: 14px !important;
    line-height: 1.62 !important;
}

.bbhprod-card-features {
    display: flex !important;

    flex-direction: column !important;

    gap: 10px !important;

    width: 100% !important;

    margin: 2px 0 21px 0 !important;
    padding: 0 !important;
}

.bbhprod-card-features > p,
.bbhprod-card-features > br {
    display: none !important;
}


/* ==========================================================
   39. PRODUKT ACTION
   ========================================================== */

.bbhprod-card-action {
    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 10px !important;

    width: 100% !important;

    min-height: 50px !important;

    margin: auto 0 0 0 !important;

    padding: 10px 13px !important;

    color: #176377 !important;

    background: var(--bbh-bg) !important;

    border: 1px solid #d5e6ea !important;

    border-radius: 9px !important;
}

.bbhprod-card-action > span:first-child {
    position: static !important;

    display: flex !important;

    align-items: center !important;

    flex: 1 1 auto !important;

    min-height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #176377 !important;
    -webkit-text-fill-color: #176377 !important;

    font-size: 12.5px !important;
    line-height: 1.2 !important;
    font-weight: 780 !important;

    transform: none !important;

    pointer-events: none !important;
}

.bbhprod-card-action-arrow {
    position: static !important;

    display: grid !important;

    place-items: center !important;

    flex: 0 0 28px !important;

    width: 28px !important;
    height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--bbh-blue) !important;
    -webkit-text-fill-color: var(--bbh-blue) !important;

    font-size: 18px !important;
    line-height: 18px !important;
	transform: translateY(-7px) !important;
    pointer-events: none !important;

}


/* ==========================================================
   40. CLICK OVERLAY
   ========================================================== */

.bbhprod-click-overlay {
    position: absolute !important;
    z-index: 50 !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    border-radius: inherit !important;

    box-shadow: none !important;

    font-size: 0 !important;
    line-height: 0 !important;

    opacity: 0 !important;

    cursor: pointer !important;
}

.bbhprod-click-overlay::before,
.bbhprod-click-overlay::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   41. PRODUKT INFO
   ========================================================== */

.bbhprod-info {
    display: grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    gap: 16px !important;

    align-items: stretch !important;

    width: 100% !important;
}

.bbhprod-info-card {
    padding: 26px !important;

    background: var(--bbh-bg) !important;

    border: 1px solid var(--bbh-line) !important;

    border-radius: 13px !important;
}

.bbhprod-info-card h3 {
    margin: 0 0 9px 0 !important;

    color: var(--bbh-dark) !important;

    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 750 !important;
}

.bbhprod-info-card p {
    font-size: 13.5px !important;
    line-height: 1.62 !important;
}


/* ==========================================================
   42. FORD SYSTEM
   ========================================================== */

.bbh48z-system {
    display: flex !important;

    flex-direction: row !important;

    align-items: stretch !important;

    width: 100% !important;

    overflow: hidden !important;

    background: var(--bbh-bg) !important;

    border: 1px solid var(--bbh-line) !important;

    border-radius: 18px !important;
}

.bbh48z-system-image {
    flex: 0 0 52% !important;

    width: 52% !important;

    min-height: 450px !important;

    background: #e9eff2 !important;
}

.bbh48z-system-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
}

.bbh48z-system-copy {
    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    flex: 1 1 48% !important;

    width: 48% !important;

    padding: 46px !important;
}

.bbh48z-system-copy::before {
    content: "48 V";

    position: absolute;

    top: 10px;
    right: 20px;

    color: rgba(0,141,184,.055);

    font-size: 88px;
    line-height: 1;
    font-weight: 900;

    pointer-events: none;
}


/* ==========================================================
   43. FORD DIAGNOSE
   ========================================================== */

.bbh48z-diagnose {
    display: flex !important;

    flex-direction: row !important;

    align-items: stretch !important;

    gap: 20px !important;

    width: 100% !important;
}

.bbh48z-diag-card {
    display: flex !important;

    flex-direction: column !important;

    flex: 1 1 0 !important;

    width: calc((100% - 20px) / 2) !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid var(--bbh-line) !important;

    border-radius: 16px !important;

    box-shadow:
        0 9px 28px rgba(17,43,55,.055) !important;
}

.bbh48z-diag-image {
    position: relative !important;

    width: 100% !important;

    aspect-ratio: 1.55 / 1 !important;

    overflow: hidden !important;

    background: #e9eff2 !important;
}

.bbh48z-diag-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
}

.bbh48z-diag-number {
    position: absolute !important;

    left: 18px !important;
    bottom: 18px !important;

    display: grid !important;

    place-items: center !important;

    width: 43px !important;
    height: 43px !important;

    color: #ffffff !important;

    background: rgba(11,28,37,.88) !important;

    border-radius: 8px !important;

    font-size: 11px !important;
    line-height: 11px !important;
    font-weight: 800 !important;
}

.bbh48z-diag-copy {
    flex: 1 1 auto !important;

    padding: 28px !important;
}


/* ==========================================================
   44. FORD FAULT
   ========================================================== */

.bbh48z-fault {
    display: flex !important;

    flex-direction: row !important;

    align-items: stretch !important;

    width: 100% !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(32,184,213,.17),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #0d1b23,
            #132832
        ) !important;

    border-radius: 19px !important;
}

.bbh48z-fault-image {
    flex: 0 0 52% !important;

    width: 52% !important;

    padding: 20px !important;
}

.bbh48z-fault-image img {
    width: 100% !important;
    height: 100% !important;

    min-height: 430px !important;

    object-fit: cover !important;

    border-radius: 11px !important;
}

.bbh48z-fault-copy {
    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    flex: 1 1 48% !important;

    width: 48% !important;

    padding: 46px !important;
}


/* ==========================================================
   45. FORD TRAINING
   ========================================================== */

.bbh48z-training {
    width: 100% !important;

    padding: 46px !important;

    background: var(--bbh-bg) !important;

    border-radius: 18px !important;
}

.bbh48z-training-grid {
    display: grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    gap: 13px !important;

    margin: 29px 0 0 0 !important;
}

.bbh48z-training-item {
    min-height: 125px !important;

    padding: 21px !important;

    background: #ffffff !important;

    border: 1px solid var(--bbh-line) !important;

    border-radius: 11px !important;
}


/* ==========================================================
   46. KONTAKT / STANDORT

   Desktop:
   Karte links 55 %
   Adresse rechts 45 %

   Kein Umbruch vor 700px.
   ========================================================== */

.bbhcontact-location {
    position: relative !important;

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: stretch !important;
    justify-content: flex-start !important;

    gap: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 560px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: var(--bbh-bg) !important;

    border: 1px solid var(--bbh-line) !important;

    border-radius: 18px !important;

    float: none !important;
    clear: both !important;
}

.bbhcontact-location > p:empty,
.bbhcontact-location > br {
    display: none !important;
}


/* ==========================================================
   47. KONTAKT – KARTE
   ========================================================== */

.bbhcontact-map {
    position: relative !important;

    display: block !important;

    flex: 0 0 55% !important;

    width: 55% !important;
    max-width: 55% !important;

    min-width: 0 !important;
    min-height: 560px !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #e6eef1 !important;

    float: none !important;
    clear: none !important;

    align-self: stretch !important;
}

.bbhcontact-map iframe {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 560px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    border-radius: 0 !important;

    float: none !important;
}


/* ==========================================================
   48. KONTAKT – ADRESSE / INFOS
   ========================================================== */

.bbhcontact-copy {
    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

    flex: 1 1 45% !important;

    width: 45% !important;
    max-width: 45% !important;

    min-width: 0 !important;
    min-height: 560px !important;

    align-self: stretch !important;

    justify-content: flex-start !important;

    margin: 0 !important;

    padding: 42px !important;

    background: var(--bbh-bg) !important;

    float: none !important;
    clear: none !important;
}

.bbhcontact-copy > p:empty,
.bbhcontact-copy > br {
    display: none !important;
}

.bbhcontact-copy h3 {
    width: 100% !important;

    margin: 0 0 8px 0 !important;
    padding: 0 !important;

    color: var(--bbh-dark) !important;
    -webkit-text-fill-color: var(--bbh-dark) !important;

    font-size: clamp(25px,2.4vw,32px) !important;
    line-height: 1.18 !important;
    font-weight: 780 !important;

    letter-spacing: -.5px !important;
}

.bbhcontact-address {
    display: block !important;

    width: 100% !important;

    margin: 0 0 25px 0 !important;
    padding: 0 !important;

    color: var(--bbh-muted) !important;
    -webkit-text-fill-color: var(--bbh-muted) !important;

    font-size: 16px !important;
    line-height: 1.6 !important;
}


/* ==========================================================
   49. KONTAKT – ÖFFNUNGSZEITEN
   ========================================================== */

.bbhcontact-hours {
    width: 100% !important;

    margin: 27px 0 0 0 !important;

    padding: 23px 0 0 0 !important;

    border-top: 1px solid var(--bbh-line) !important;
}

.bbhcontact-hours h4 {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;

    color: var(--bbh-dark) !important;
    -webkit-text-fill-color: var(--bbh-dark) !important;

    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 780 !important;
}

.bbhcontact-hours p {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 14px !important;
    line-height: 1.7 !important;
}

.bbhcontact-map-actions {
    display: flex !important;

    flex-direction: row !important;
    flex-wrap: wrap !important;

    align-items: center !important;

    gap: 10px !important;

    width: 100% !important;

    margin: 25px 0 0 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   50. CTA
   ========================================================== */

.bbh48z-cta,
.bbhkfz-cta,
.bbhveh-cta,
.bbhprod-cta {
    position: relative !important;

    isolation: isolate !important;

    width: 100% !important;

    overflow: hidden !important;

    padding: 52px !important;

    background:
        linear-gradient(
            125deg,
            #007da3 0%,
            #00a2bf 100%
        ) !important;

    border-radius: 19px !important;
}

.bbh48z-cta::after,
.bbhkfz-cta::after,
.bbhveh-cta::after,
.bbhprod-cta::after {
    content: "" !important;

    position: absolute !important;
    z-index: 0 !important;

    right: 24px !important;
    bottom: 18px !important;

    width: 310px !important;
    height: 150px !important;

    background-image:
        url("/wp-content/uploads/2024/05/cropped-cropped-cropped-BBH-Logo_2020_gross-3.png") !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    opacity: .075 !important;

    filter:
        grayscale(1)
        brightness(0)
        invert(1) !important;

    pointer-events: none !important;
}

.bbh48z-cta-inner,
.bbhkfz-cta-inner,
.bbhveh-cta-inner,
.bbhprod-cta-inner {
    position: relative !important;
    z-index: 2 !important;

    width: 100% !important;

    max-width: 850px !important;
}

.bbh48z-cta .bbh48z-kicker,
.bbhkfz-cta .bbhkfz-kicker,
.bbhveh-cta .bbhveh-kicker,
.bbhprod-cta .bbhprod-kicker {
    color: #c9f5fb !important;
    -webkit-text-fill-color: #c9f5fb !important;
}

.bbh48z-cta h2,
.bbhkfz-cta h2,
.bbhveh-cta h2,
.bbhprod-cta h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.bbh48z-cta p,
.bbhkfz-cta p,
.bbhveh-cta p,
.bbhprod-cta p {
    max-width: 780px !important;

    color: rgba(255,255,255,.91) !important;
    -webkit-text-fill-color: rgba(255,255,255,.91) !important;

    font-size: 15.5px !important;
}


/* ==========================================================
   51. KONTAKTBOXEN
   ========================================================== */

.bbh48z-contact,
.bbhkfz-contact,
.bbhveh-contact,
.bbhprod-contact {
    display: flex !important;

    flex-direction: row !important;
    flex-wrap: wrap !important;

    gap: 12px !important;

    width: 100% !important;

    margin: 27px 0 0 0 !important;
}

.bbh48z-contact-box,
.bbhkfz-contact-box,
.bbhveh-contact-box,
.bbhprod-contact-box {
    position: relative !important;

    min-width: 255px !important;

    height: 62px !important;

    background: rgba(255,255,255,.12) !important;

    border: 1px solid rgba(255,255,255,.28) !important;

    border-radius: 8px !important;

    overflow: hidden !important;
}

.bbh48z-contact-label,
.bbhkfz-contact-label,
.bbhveh-contact-label,
.bbhprod-contact-label {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: calc(100% - 34px) !important;

    margin: 0 !important;
    padding: 0 !important;

    transform:
        translate(-50%,-50%)
        translateY(1px) !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;

    text-align: center !important;

    white-space: nowrap !important;

    pointer-events: none !important;
}

.bbh48z-contact-overlay,
.bbhkfz-contact-overlay,
.bbhveh-contact-overlay,
.bbhprod-contact-overlay {
    position: absolute !important;
    z-index: 10 !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    background: transparent !important;

    border: 0 !important;

    font-size: 0 !important;
}


/* ==========================================================
   52. RESPONSIVE <= 1100
   ========================================================== */

@media (max-width:1100px) {

    .bbhprod-quick {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    .bbhkfz-product-details .bbhkfz-tech,
    .bbhveh-product-details .bbhveh-tech {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

}


/* ==========================================================
   53. RESPONSIVE <= 900
   ========================================================== */

@media (max-width:900px) {

    .bbh48z,
    .bbhkfz,
    .bbhveh,
    .bbhprod {
        width: calc(100% - 32px) !important;
    }


    .bbh48z-hero,
    .bbhkfz-hero,
    .bbhveh-hero,
    .bbhprod-hero {
        padding: 42px 44px 30px 44px !important;
    }


    .bbhkfz-hero-grid,
    .bbhveh-hero-grid,
    .bbhveh-hero--wide-title .bbhveh-hero-grid,
    .bbhveh-hero--motor .bbhveh-hero-grid {
        grid-template-columns: 1fr !important;

        grid-template-areas:
            "main"
            "image"
            "facts" !important;

        row-gap: 28px !important;
    }


    .bbhveh-hero--no-media .bbhveh-hero-grid {
        grid-template-columns: 1fr !important;

        grid-template-areas:
            "main"
            "facts" !important;

        row-gap: 26px !important;
    }


    .bbhkfz-hero-main .bbhkfz-hero-copy,
    .bbhveh-hero-main .bbhveh-hero-copy {
        margin-top: 0 !important;

        padding-top: 26px !important;
    }


    .bbhveh-hero--no-media
    .bbhveh-hero-main
    .bbhveh-hero-copy {
        padding-top: 24px !important;
    }


    .bbhkfz-hero-grid > .bbhkfz-hero-image,
    .bbhveh-hero-grid > .bbhveh-hero-image {
        width: 100% !important;

        height: auto !important;
    }


    .bbhkfz-hero-grid > .bbhkfz-hero-image img,
    .bbhveh-hero-grid > .bbhveh-hero-image img {
        max-height: none !important;
    }


    .bbhkfz-hero-grid > .bbhkfz-facts,
    .bbhveh-hero-grid > .bbhveh-facts,
    .bbhveh-hero--no-media .bbhveh-facts {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }


    .bbh-brand-panel {
        min-height: 250px !important;
    }


    .bbh48z-hero-body,
    .bbhkfz-hero-body,
    .bbhveh-hero-body,
    .bbhprod-hero-body {
        flex-direction: column !important;

        align-items: stretch !important;

        gap: 34px !important;
    }


    .bbh48z-hero-copy,
    .bbh48z-hero-image,
    .bbhkfz-hero-copy,
    .bbhkfz-hero-image,
    .bbhveh-hero-copy,
    .bbhveh-hero-image,
    .bbhprod-hero-copy,
    .bbhprod-hero-gallery {
        flex: none !important;

        width: 100% !important;
    }


    .bbhprod-hero-gallery {
        height: 390px !important;
    }


    .bbh48z-system,
    .bbh48z-fault,
    .bbhkfz-product,
    .bbhkfz-product-dark,
    .bbhveh-product,
    .bbhveh-product-dark {
        flex-direction: column !important;
    }


    .bbhkfz-product.bbhkfz-product--detail,
    .bbhveh-product.bbhveh-product--detail {
        grid-template-columns: 1fr !important;

        grid-template-rows:
            auto
            auto
            auto !important;
    }


    .bbhkfz-product--detail .bbhkfz-product-image,
    .bbhveh-product--detail .bbhveh-product-image {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }


    .bbhkfz-product--detail .bbhkfz-product-copy,
    .bbhveh-product--detail .bbhveh-product-copy {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }


    .bbhkfz-product-details,
    .bbhveh-product-details {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }


    .bbhkfz-product-details .bbhkfz-equipment-grid,
    .bbhveh-product-details .bbhveh-equipment-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }


    .bbhveh-process {
        flex-wrap: wrap !important;
    }


    .bbhveh-process-card {
        flex:
            0 0 calc((100% - 14px) / 2) !important;

        width:
            calc((100% - 14px) / 2) !important;
    }


    /* Kontakt bleibt auch auf Tablets nebeneinander */

    .bbhcontact-location {
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        min-height: 520px !important;
    }


    .bbhcontact-map {
        flex: 0 0 52% !important;

        width: 52% !important;
        max-width: 52% !important;

        min-height: 520px !important;
    }


    .bbhcontact-map iframe {
        min-height: 520px !important;
    }


    .bbhcontact-copy {
        flex: 1 1 48% !important;

        width: 48% !important;
        max-width: 48% !important;

        min-height: 520px !important;

        padding: 32px !important;
    }

}


/* ==========================================================
   54. RESPONSIVE <= 700
   ========================================================== */

@media (max-width:700px) {

    .bbh48z-core,
    .bbhkfz-core,
    .bbhveh-core {
        flex-direction: column !important;
    }


    .bbh48z-core-card,
    .bbhkfz-core-card,
    .bbhveh-core-card {
        width: 100% !important;
    }


    .bbhkfz-equipment-grid,
    .bbhveh-equipment-grid,
    .bbhkfz-product-details .bbhkfz-equipment-grid,
    .bbhveh-product-details .bbhveh-equipment-grid {
        grid-template-columns: 1fr !important;
    }


    .bbhkfz-practice {
        flex-direction: column !important;
    }


    .bbhkfz-practice-card {
        width: 100% !important;
    }


    .bbhveh-process {
        flex-direction: column !important;
    }


    .bbhveh-process-card {
        width: 100% !important;

        flex: 0 0 auto !important;
    }


    .bbhprod-quick {
        grid-template-columns: 1fr !important;
    }


    .bbhprod-groups {
        grid-template-columns: 1fr !important;
    }


    .bbhprod-info {
        grid-template-columns: 1fr !important;
    }


    .bbh-pill {
        flex:
            0 0 calc((100% - 10px) / 2) !important;

        width:
            calc((100% - 10px) / 2) !important;

        min-width: 0 !important;

        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    .bbh48z-chip-school,
    .bbh48z-chip-trainingcenter,
    .bbh48z-chip-master,
    .bbh48z-chip-university,
    .bbh48z-chip-further,
    .bbhkfz-target-school,
    .bbhkfz-target-trainingcenter,
    .bbhkfz-target-master,
    .bbhkfz-target-university,
    .bbhkfz-target-further,
    .bbhveh-target-school,
    .bbhveh-target-trainingcenter,
    .bbhveh-target-master,
    .bbhveh-target-university,
    .bbhveh-target-further {
        width: calc((100% - 10px) / 2) !important;
    }


    /* Kontakt erst jetzt untereinander */

    .bbhcontact-location {
        flex-direction: column !important;
        flex-wrap: nowrap !important;

        min-height: 0 !important;
    }


    .bbhcontact-map {
        flex: none !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 420px !important;
        min-height: 420px !important;
    }


    .bbhcontact-map iframe {
        position: absolute !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 420px !important;
    }


    .bbhcontact-copy {
        flex: none !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 0 !important;

        padding: 31px 26px !important;
    }

}


/* ==========================================================
   55. RESPONSIVE <= 560
   ========================================================== */

@media (max-width:560px) {

    .bbh48z,
    .bbhkfz,
    .bbhveh,
    .bbhprod {
        width: calc(100% - 20px) !important;

        margin-bottom: 45px !important;
    }


    .bbh48z-hero,
    .bbhkfz-hero,
    .bbhveh-hero,
    .bbhprod-hero {
        padding: 31px 23px 24px 23px !important;

        border-radius: 15px !important;
    }


    .bbh48z .bbh48z-hero h1,
    .bbhkfz .bbhkfz-hero h1,
    .bbhveh .bbhveh-hero h1,
    .bbhprod .bbhprod-hero h1,
    .bbhveh-hero--wide-title .bbhveh-hero-main h1,
    .bbhveh-hero--motor .bbhveh-hero-main h1 {
        font-size: 35px !important;

        letter-spacing: -1px !important;
    }


    .bbh48z-facts,
    .bbhkfz-facts,
    .bbhveh-facts,
    .bbhkfz-hero-grid > .bbhkfz-facts,
    .bbhveh-hero-grid > .bbhveh-facts,
    .bbhveh-hero--no-media .bbhveh-facts {
        grid-template-columns: 1fr !important;
    }


    .bbh48z-image-label,
    .bbhkfz-image-label,
    .bbhveh-image-label {
        display: none !important;
    }


    .bbh-brand-panel {
        min-height: 210px !important;

        padding: 24px !important;
    }


    .bbh-brand-panel img {
        max-height: 190px !important;
    }


    .bbh48z-diagnose {
        flex-direction: column !important;
    }


    .bbh48z-diag-card {
        width: 100% !important;
    }


    .bbh48z-training-grid {
        grid-template-columns: 1fr !important;
    }


    .bbh48z-system-copy,
    .bbh48z-fault-copy {
        padding: 29px 23px !important;
    }


    .bbhkfz-product-copy,
    .bbhkfz-product-dark-copy,
    .bbhveh-product-copy,
    .bbhveh-product-dark-copy {
        padding: 29px 23px !important;
    }


    .bbhkfz-product--detail .bbhkfz-product-image img,
    .bbhveh-product--detail .bbhveh-product-image img {
        max-height: 380px !important;
    }


    .bbhkfz-product--detail .bbhkfz-product-copy,
    .bbhveh-product--detail .bbhveh-product-copy {
        padding: 29px 23px !important;
    }


    .bbhkfz-product-details,
    .bbhveh-product-details {
        padding: 25px 23px 30px 23px !important;
    }


    .bbhkfz-product-details .bbhkfz-tech,
    .bbhveh-product-details .bbhveh-tech,
    .bbhkfz-tech,
    .bbhkfz-dark-tech,
    .bbhveh-tech,
    .bbhveh-dark-tech {
        grid-template-columns: 1fr !important;
    }


    .bbhkfz-target-wrap,
    .bbhveh-target-wrap {
        padding: 31px 22px !important;
    }


    .bbh-pill {
        flex: 0 0 100% !important;

        width: 100% !important;

        min-width: 0 !important;
    }


    .bbh48z-chip-school,
    .bbh48z-chip-trainingcenter,
    .bbh48z-chip-master,
    .bbh48z-chip-university,
    .bbh48z-chip-further,
    .bbhkfz-target-school,
    .bbhkfz-target-trainingcenter,
    .bbhkfz-target-master,
    .bbhkfz-target-university,
    .bbhkfz-target-further,
    .bbhveh-target-school,
    .bbhveh-target-trainingcenter,
    .bbhveh-target-master,
    .bbhveh-target-university,
    .bbhveh-target-further {
        width: 100% !important;
    }


    .bbhveh-modules {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap: 10px !important;
    }


    .bbhveh-module {
        border-radius: 11px !important;
    }


    .bbhveh-module-image {
        aspect-ratio: 4 / 3 !important;
    }


    .bbhveh-module-copy {
        padding: 13px !important;
    }


    .bbhveh-module-copy h3 {
        font-size: 14px !important;
    }


    .bbhveh-module-copy p {
        font-size: 10.5px !important;
        line-height: 1.48 !important;
    }


    .bbhprod-hero-gallery {
        height: 280px !important;
    }


    .bbhprod-gallery-label {
        display: none !important;
    }


    .bbhprod-quick-wrap {
        padding: 20px 18px 22px 18px !important;
    }


    .bbhprod-card-image {
        aspect-ratio: 4 / 3 !important;

        padding: 6px !important;
    }


    .bbhprod-card-body {
        padding: 21px !important;
    }


    .bbhprod-card h3 {
        font-size: 20px !important;
    }


    .bbhcontact-map {
        height: 360px !important;
        min-height: 360px !important;
    }


    .bbhcontact-map iframe {
        min-height: 360px !important;
    }


    .bbhcontact-copy {
        padding: 27px 21px !important;
    }


    .bbh48z-cta,
    .bbhkfz-cta,
    .bbhveh-cta,
    .bbhprod-cta {
        padding: 36px 23px !important;
    }


    .bbh48z-contact,
    .bbhkfz-contact,
    .bbhveh-contact,
    .bbhprod-contact {
        flex-direction: column !important;
    }


    .bbh48z-contact-box,
    .bbhkfz-contact-box,
    .bbhveh-contact-box,
    .bbhprod-contact-box {
        width: 100% !important;

        min-width: 0 !important;
    }

}


/* ==========================================================
   56. SEHR KLEINE SMARTPHONES
   ========================================================== */

@media (max-width:339px) {

    .bbhveh-modules {
        grid-template-columns: 1fr !important;
    }

}