:root {
    /* ================================
       Colors
    ================================ */
    --bd-color-primary: #353D92;
    --bd-color-secondary: #F5F7FA;
    --bd-color-hover: #141C6F;
    --bd-color-xline: #C4CD26;
    --bd-color-tertiary: #F8FAF5;

    --bd-color-darker: #1d1d1b;
    --bd-color-body: #2b2b2b;
    --bd-color-altgrey: #7a7a7a;
    --bd-color-darkgrey: #3a3a3a;
    --bd-color-lightgrey: #f3f4f6;

    --bd-color-white: #ffffff;
    --bd-color-black: #000000;

    --bd-color-border: #e5e7eb;
    --bd-color-alternative: #d1d5db;

    /* ================================
       Typography
    ================================ */
    /* Type scale */
    --bd-fs-h1: clamp(2rem, 2.5vw, 2.6rem);
    --bd-fs-h2: clamp(1.7rem, 2vw, 2.1rem);
    --bd-fs-h3: clamp(1.3rem, 1.6vw, 1.6rem);
    --bd-fs-h4: clamp(1.1rem, 1.3vw, 1.3rem);
    --bd-fs-h5: 1.05rem;
    --bd-fs-h6: 0.95rem;

    --bd-fs-content: 1.125em;
    --bd-fs-content-large: 1.125em;

    /* Leading */
    --bd-lh-tight: 1.1;
    --bd-lh-snug: 1.2;
    --bd-lh-normal: 1.35;
    --bd-lh-loose: 1.4;

    /* Top/Sub lines */
    --bd-fs-topline: 0.8em;
    --bd-fs-subline: 0.85em;
    --bd-color-topline: var(--bd-color-altgrey);
    --bd-color-subline: var(--bd-color-altgrey);
    --bd-space-headline-bottom: 0.5em;

    /* ================================
       Layout
    ================================ */
    --bd-container-max: 1520px;
    --bd-container-narrow: 800px;
    --bd-container-wide: 1600px;
    --bd-card-radius: 8px;

    /* Spacing Scale */
    --bd-space-1: 0.5rem;
    --bd-space-2: 1rem;
    --bd-space-3: 1.5rem;
    --bd-space-4: 2rem;
    --bd-space-5: 3rem;

    /* Grid Gaps */
    --bd-gap-mobile: var(--bd-space-2);
    --bd-gap-desktop: var(--bd-space-3);
    --bd-gap: var(--bd-gap-desktop);

    /* Breakpoints (Doc only) */
    --bd-bp-sm: 480px;
    --bd-bp-md: 768px;
    --bd-bp-lg: 1024px;
    --bd-bp-xl: 1280px;

    /* ================================
       Button Tokens
    ================================ */
    --bd-btn-radius: 4px;
    --bd-btn-weight: 600;
    --bd-btn-trans: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Font Sizes */
    --bd-btn-fs: 1rem;
    --bd-btn-fs-s: 0.875rem;
    --bd-btn-fs-l: 1.125rem;

    /* Padding Y/X */
    --bd-btn-py: 0.75em;
    --bd-btn-px: 1.5em;
    --bd-btn-py-s: 0.4em;
    --bd-btn-px-s: 1em;
    --bd-btn-py-l: 1em;
    --bd-btn-px-l: 2em;

    /* Min Heights */
    --bd-btn-min-h: 3rem;
    --bd-btn-min-h-s: 2.25rem;
    --bd-btn-min-h-l: 3.5rem;

    /* Shadows & Focus */
    --bd-btn-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --bd-btn-shadow-none: none;
    --bd-btn-focus-ring: 0 0 0 4px rgba(53, 61, 146, 0.2);
}




/* Headline utilities */
.bd-h1 {
    font-size: var(--bd-fs-h1);
    line-height: var(--bd-lh-tight);
}

.bd-h2 {
    font-size: var(--bd-fs-h2);
    line-height: var(--bd-lh-snug);
}

.bd-h3 {
    font-size: var(--bd-fs-h3);
    line-height: 1.25;
}

.bd-h4 {
    font-size: var(--bd-fs-h4);
    line-height: 1.3;
}

.bd-h5 {
    font-size: var(--bd-fs-h5);
    line-height: var(--bd-lh-normal);
}

.bd-h6 {
    font-size: var(--bd-fs-h6);
    line-height: var(--bd-lh-loose);
    color: var(--bd-color-altgrey);
}

/* Headlines */
h1,
h2,
h3,
h4,
h5,
h6,
.bd-h1,
.bd-h2,
.bd-h3,
.bd-h4,
.bd-h5,
.bd-h6 {
    margin: 0 0 var(--bd-space-headline-bottom) 0;
    font-weight: 700;
    color: var(--bd-color-darker);
    letter-spacing: -0.01em;
}

h1,
h2,
h3,
.bd-h1,
.bd-h2,
.bd-h3 {
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}

h1 {
    font-size: var(--bd-fs-h1);
    line-height: var(--bd-lh-tight);
}

h2 {
    font-size: var(--bd-fs-h2);
    line-height: var(--bd-lh-snug);
}

h3 {
    font-size: var(--bd-fs-h3);
    line-height: 1.25;
}

h4 {
    font-size: var(--bd-fs-h4);
    line-height: 1.3;
}

h5 {
    font-size: var(--bd-fs-h5);
    line-height: var(--bd-lh-normal);
}

h6 {
    font-size: var(--bd-fs-h6);
    line-height: var(--bd-lh-loose);
    color: var(--bd-color-altgrey);
}

/* Topline/Subline */
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
    display: block;
    font-weight: 500;
}

h1 .bd-topline,
h2 .bd-topline,
h3 .bd-topline,
h4 .bd-topline,
h5 .bd-topline,
h6 .bd-topline {
    font-size: var(--bd-fs-topline);
    line-height: 1.2;
    color: var(--bd-color-topline);
    margin-bottom: 0.25em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

h1 .bd-subline,
h2 .bd-subline,
h3 .bd-subline,
h4 .bd-subline,
h5 .bd-subline,
h6 .bd-subline {
    font-size: var(--bd-fs-subline);
    line-height: 1.3;
    color: var(--bd-color-subline);
    margin-top: 0.25em;
    font-weight: 400;
}

/* Headline links */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    color: var(--bd-color-primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

h1 a:focus-visible,
h2 a:focus-visible,
h3 a:focus-visible,
h4 a:focus-visible,
h5 a:focus-visible,
h6 a:focus-visible {
    outline: 2px solid var(--bd-color-primary);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Compact context */
.bd-narrow h1,
.bd-narrow h2,
.bd-narrow h3 {
    line-height: 1.05;
    margin-bottom: 0.25em;
}

/* Utilities */
.bd-headline-group {
    margin-bottom: 2rem;
}

.bd-headline-group--center {
    text-align: center;
}

.bd-headline-group--right {
    text-align: right;
}

.bd-headline-group--spaced>*+* {
    margin-top: 0.5em;
}

.bd-text-small {
    font-size: 0.9rem;
}

.bd-text-muted {
    color: var(--bd-color-altgrey);
}

.bd-text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bd-text-strong {
    font-weight: 700;
}

.bd-mt-0 {
    margin-top: 0;
}

.bd-mt-s {
    margin-top: 0.5rem;
}

.bd-mt-m {
    margin-top: 1rem;
}

.bd-mt-l {
    margin-top: 2rem;
}

.bd-mb-0 {
    margin-bottom: 0;
}

.bd-mb-s {
    margin-bottom: 0.5rem;
}

.bd-mb-m {
    margin-bottom: 1rem;
}

.bd-mb-l {
    margin-bottom: 2rem;
}

.bd-content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.bd-content-narrow {
    max-width: 800px;
}

.bd-content-wide {
    max-width: 1400px;
}

.bd-measure {
    max-width: 65ch;
}

.bd-measure-narrow {
    max-width: 50ch;
}

.bd-measure-wide {
    max-width: 80ch;
}

.bd-divider {
    height: 1px;
    background: var(--bd-color-alternative);
    margin: 2rem 0;
}

.bd-divider--light {
    opacity: 0.4;
}

.bd-divider--spaced {
    margin: 3rem 0;
}

.bd-text-left {
    text-align: left;
}

.bd-text-center {
    text-align: center;
}

.bd-text-right {
    text-align: right;
}

.bd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =========================================================
    BD SECTION SYSTEM – TOKEN DRIVEN, SPACING VARIANTS
   ========================================================= */

.bd-section {
    margin-block: var(--bd-space-5);
}

.bd-section--tight {
    margin-block: var(--bd-space-3);
}

.bd-section--loose {
    margin-block: calc(var(--bd-space-5) * 1.5);
}

.bd-section--xl {
    margin-block: calc(var(--bd-space-5) * 2);
}

/* Section Content Font Size */
.bd-section-content,
.bd-content-section,
.bd-measure {
    font-size: var(--bd-fs-content);
    line-height: 1.65;
}

.bd-section--xl .bd-section-content {
    font-size: var(--bd-fs-content-large);
}


/* =========================================================
   BD GRID SYSTEM – TOKEN DRIVEN, MOBILE FIRST
   ========================================================= */

/* -------------------------
   Containers
------------------------- */

.bd-container {
    width: 100%;
    max-width: var(--bd-container-max);
    margin-inline: auto;
    padding-inline: var(--bd-space-3);
}

.bd-container-narrow {
    max-width: var(--bd-container-narrow);
}

.bd-container-wide {
    max-width: var(--bd-container-wide);
}

.bd-container-fluid {
    max-width: 100%;
}

@media (max-width: 480px) {
    .bd-container {
        padding-inline: var(--bd-space-4);
    }
}

@media (min-width: 768px) {
    .bd-container,
    .bd-container-fluid {
        padding-inline: var(--bd-space-4);
    }
}


/* -------------------------
   Breakout Fullwidth
------------------------- */
.bd-fullwidth {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-inline: var(--bd-space-2);
}

@media (min-width: 768px) {
    .bd-fullwidth {
        padding-inline: var(--bd-space-4);
    }
}

.bd-fullwidth-nopad {
    padding-inline: 0;
}

/* -------------------------
   Grid Core (Mobile First)
------------------------- */
.bd-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bd-gap-mobile);
}

.bd-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--bd-gap-mobile);
}

/* -------------------------
   Grid Activation (Tablet+)
------------------------- */
@media (min-width: 768px) {
    .bd-grid {
        grid-template-columns: repeat(12, 1fr);
        gap: var(--bd-gap-desktop);
    }

    .bd-grid-auto {
        gap: var(--bd-gap-desktop);
    }

    .bd-col-1 {
        grid-column: span 1;
    }

    .bd-col-2 {
        grid-column: span 2;
    }

    .bd-col-3 {
        grid-column: span 3;
    }

    .bd-col-4 {
        grid-column: span 4;
    }

    .bd-col-5 {
        grid-column: span 5;
    }

    .bd-col-6 {
        grid-column: span 6;
    }

    .bd-col-7 {
        grid-column: span 7;
    }

    .bd-col-8 {
        grid-column: span 8;
    }

    .bd-col-9 {
        grid-column: span 9;
    }

    .bd-col-10 {
        grid-column: span 10;
    }

    .bd-col-11 {
        grid-column: span 11;
    }

    .bd-col-12 {
        grid-column: span 12;
    }

    .bd-start-2 {
        grid-column-start: 2;
    }

    .bd-start-3 {
        grid-column-start: 3;
    }

    .bd-start-4 {
        grid-column-start: 4;
    }

    .bd-start-5 {
        grid-column-start: 5;
    }

    .bd-start-auto {
        grid-column-start: auto;
    }
}

/* -------------------------
   Desktop / Large Screens
------------------------- */
@media (min-width: 1024px) {
    .bd-col-lg-3 {
        grid-column: span 3;
    }

    .bd-col-lg-4 {
        grid-column: span 4;
    }

    .bd-col-lg-6 {
        grid-column: span 6;
    }

    .bd-col-lg-8 {
        grid-column: span 8;
    }
}

/* -------------------------
   Flex Helpers
------------------------- */
.bd-flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bd-space-2);
}

.bd-flex-middle {
    align-items: center;
}

.bd-flex-bottom {
    align-items: flex-end;
}

.bd-flex-between {
    justify-content: space-between;
}

.bd-flex-center {
    justify-content: center;
}

/* -------------------------
   Grid Alignment
------------------------- */
.bd-items-start {
    align-items: start;
}

.bd-items-center {
    align-items: center;
}

.bd-items-end {
    align-items: end;
}

.bd-justify-start {
    justify-items: start;
}

.bd-justify-center {
    justify-items: center;
}

.bd-justify-end {
    justify-items: end;
}

.bd-content-start {
    justify-content: start;
}

.bd-content-center {
    justify-content: center;
}

.bd-content-between {
    justify-content: space-between;
}

/* -------------------------
   Ordering
------------------------- */
.bd-order-first {
    order: -1;
}

.bd-order-last {
    order: 99;
}

@media (min-width: 768px) {
    .bd-order-md-0 {
        order: 0;
    }
}

/* -------------------------
   Visibility
------------------------- */
.bd-hidden-mobile {
    display: none;
}

@media (min-width: 768px) {
    .bd-hidden-mobile {
        display: block;
    }

    .bd-hidden-desktop {
        display: none;
    }
}

/* =========================================================
   Content + Sidebar Layout
   ========================================================= */

.bd-layout-main {
    display: flex;
    flex-direction: column;
    gap: var(--bd-space-4);
}

@media (min-width: 1024px) {
    .bd-layout-main {
        flex-direction: row;
        align-items: flex-start;
        gap: calc(2 * var(--bd-space-4));
    }

    .bd-layout-content {
        flex: 1 1 auto;
        min-width: 0;
    }

    .bd-layout-sidebar {
        flex: 0 0 300px;
        max-width: 300px;
    }
}

/* =========================================================
   BD BUTTON SYSTEM – TOKEN DRIVEN, A11Y SAFE, FREEZE READY
   ========================================================= */

/* -------------------------
   Base Reset
------------------------- */
.bd-btn {
    all: unset;
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;

    padding: var(--bd-btn-py) var(--bd-btn-px);
    min-height: var(--bd-btn-min-h);

    font-family: inherit;
    font-size: var(--bd-btn-fs);
    font-weight: var(--bd-btn-weight);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    user-select: none;

    cursor: pointer;

    border-radius: var(--bd-btn-radius);
    border: 2px solid transparent;
    background-color: transparent;
    color: inherit;

    transition: var(--bd-btn-trans);
}

.bd-btn--text {
    padding: 0;
    min-height: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.bd-btn--text:hover:not(:disabled):not([aria-disabled="true"]),
.bd-btn.bd-btn--text:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
    box-shadow: none;
    text-decoration: underline;
    color: var(--bd-color-hover);
}

/* -------------------------
   Interaction
------------------------- */
.bd-btn:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(-2px);
    box-shadow: var(--bd-btn-shadow);
}

.bd-btn:active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(0);
    box-shadow: var(--bd-btn-shadow-none);
}

.bd-btn:focus-visible {
    outline: 2px solid var(--bd-color-primary);
    outline-offset: 4px;
    box-shadow: var(--bd-btn-focus-ring);
}

/* Motion Safety */
@media (prefers-reduced-motion: reduce) {
    .bd-btn {
        transition: none;
    }

    .bd-btn:hover {
        transform: none;
        box-shadow: none;
    }
}

/* -------------------------
   Disabled
------------------------- */
.bd-btn:disabled,
.bd-btn[aria-disabled="true"],
.bd-btn.bd-is-disabled {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(100%);
}

/* -------------------------
   Variants
------------------------- */
.bd-btn--primary {
    background-color: var(--bd-color-primary);
    color: var(--bd-color-white);
    border-color: var(--bd-color-primary);
}

.bd-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--bd-color-hover);
    border-color: var(--bd-color-hover);
    color: var(--bd-color-white);
}

.bd-btn--secondary {
    background-color: var(--bd-color-white);
    color: var(--bd-color-primary);
    border-color: var(--bd-color-alternative);
}

.bd-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--bd-color-primary);
    color: var(--bd-color-hover);
}

.bd-btn--outline {
    background-color: transparent;
    color: var(--bd-color-primary);
    border-color: var(--bd-color-primary);
}

.bd-btn--outline:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--bd-color-primary);
    color: var(--bd-color-white);
}

.bd-btn--text {
    padding: 0;
    min-height: auto;
    border: 0;
    background: transparent;
    color: var(--bd-color-primary);
    box-shadow: none;
    transform: none;
}

.bd-btn--text:hover:not(:disabled):not([aria-disabled="true"]) {
    text-decoration: underline;
    color: var(--bd-color-hover);
}

/* -------------------------
   Sizes
------------------------- */
.bd-btn--s {
    padding: var(--bd-btn-py-s) var(--bd-btn-px-s);
    font-size: var(--bd-btn-fs-s);
    min-height: var(--bd-btn-min-h-s);
}

.bd-btn--l {
    padding: var(--bd-btn-py-l) var(--bd-btn-px-l);
    font-size: var(--bd-btn-fs-l);
    min-height: var(--bd-btn-min-h-l);
}

.bd-btn--full {
    width: 100%;
    display: flex;
}

/* -------------------------
   Icon Support
------------------------- */
.bd-btn svg,
.bd-btn .fa,
.bd-btn .fas,
.bd-btn .far,
.bd-btn .fab {
    display: inline-block;
    line-height: 1;
    color: inherit;
    transition: transform 0.2s ease;
}

.bd-btn:hover .bd-icon-slide {
    transform: translateX(4px);
}

.bd-btn:hover .bd-icon-slide-left {
    transform: translateX(-4px);
}

/* =========================================================
   BD SIDEBAR & WIDGETS
   Global einsetzbar für News, Jobs, etc.
   ========================================================= */

.bd-sidebar {
    position: sticky;
    top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    min-width: 0;
    color: var(--bd-color-body);
    font-size: 0.95rem;
    line-height: 1.55;
}

.bd-widget {
    padding: 0;
}

.bd-widget + .bd-widget {
    padding-top: 1.4rem;
}

.bd-widget-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bd-color-altgrey);
    font-weight: 700;
    margin-bottom: 1.25rem;
    display: block;
    border-bottom: 1px solid var(--bd-color-border);
    padding-bottom: 0.6rem;
}

.bd-sidebar p,
.bd-sidebar li,
.bd-sidebar a {
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ---------------------------------------------------------
   Standard Sidebar Links (exkl. Buttons & Share Icons)
--------------------------------------------------------- */
.bd-sidebar a:not(.bd-btn):not(.bd-share-icon) {
    color: var(--bd-color-body);
    text-decoration: none;
}

.bd-sidebar a:not(.bd-btn):not(.bd-share-icon):hover {
    color: var(--bd-color-primary);
}

/* ---------------------------------------------------------
   Social Share Buttons (isoliert)
--------------------------------------------------------- */
.bd-share-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bd-share-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bd-color-lightgrey);
    color: var(--bd-color-darkgrey);
    transition: 0.2s;
    font-size: 1.15rem;
    text-decoration: none;
}

.bd-share-icon:hover {
    background: var(--bd-color-primary);
    color: #fff;
    transform: translateY(-2px);
}

/* ---------------------------------------------------------
   Tag Cloud
--------------------------------------------------------- */
.bd-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.bd-tag {
    font-size: 0.85rem;
    color: var(--bd-color-body);
    background: var(--bd-color-lightgrey);
    padding: 6px 12px;
    border-radius: 6px;
    transition: 0.2s;
}

.bd-tag:hover {
    background: var(--bd-color-primary);
    color: #fff;
}

/* ---------------------------------------------------------
   Table of Contents
--------------------------------------------------------- */
.bd-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--bd-color-lightgrey);
}

.bd-toc-list li {
    margin: 0;
}

.bd-toc-list a {
    display: block;
    padding: 0.55rem 0 0.55rem 1.5rem;
    font-size: 0.95rem;
    color: var(--bd-color-body);
    border-left: 2px solid transparent;
    margin-left: -2px;
    transition: 0.2s;
}

.bd-toc-list a:hover {
    color: var(--bd-color-primary);
}

.bd-toc-list a.active {
    border-left-color: var(--bd-color-primary);
    color: var(--bd-color-primary);
    font-weight: 600;
}

/* ---------------------------------------------------------
   Contact Carousel
--------------------------------------------------------- */
.bd-carousel-wrapper {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--bd-color-border);
    border-radius: var(--bd-card-radius);
    padding: 2.5rem 0;
    background: var(--bd-color-white);
    width: 100%;
}

.bd-contact-slide-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
}

.bd-contact-img-large {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bd-color-secondary);
    margin-bottom: 1rem;
}

.bd-contact-name {
    font-size: 1.15rem;
    margin: 0;
    font-weight: 700;
    color: var(--bd-color-darker);
    line-height: 1.2;
}

.bd-contact-position {
    font-size: 0.8rem;
    color: var(--bd-color-altgrey);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: 1.5rem;
}

.bd-contact-actions {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    justify-content: center;
}

.bd-carousel-controls {
    margin: 1.5rem 2rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--bd-color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bd-carousel-wrapper button.bd-carousel-arrow {
    all: unset;
    cursor: pointer;
    color: var(--bd-color-altgrey);
    font-size: 1.05rem;
    padding: 0.5rem;
    transition: 0.2s;
}

.bd-carousel-wrapper button.bd-carousel-arrow:hover {
    color: var(--bd-color-primary);
    transform: scale(1.15);
}




/* =========================================================
   FAQ
   ========================================================= */

.bd-faq-section h2 {
    text-align: center;
}

.bd-faq-section > details,
.bd-faq-section .bd-faq-details {
    max-width: var(--bd-container-narrow);
    margin-left: auto;
    margin-right: auto;
}

.bd-faq-details {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.bd-faq-summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    padding: 1.6rem 2.5rem 1.2rem 0;
    color: var(--bd-color-darker);
}

.bd-faq-summary::-webkit-details-marker {
    display: none;
}

.bd-faq-summary::after {
    content: "\f067";
    font-family: "Font Awesome 6 Pro","Font Awesome 5 Pro",sans-serif;
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--bd-color-primary);
    transition: transform 0.25s ease;
}

.bd-faq-details[open] .bd-faq-summary::after {
    content: "\f068";
    transform: translateY(-50%) rotate(180deg);
}

.bd-faq-content {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--bd-color-body);
    padding: 0.25rem 0 1.75rem;
    max-width: 720px;
}

@media (hover: hover) {
    .bd-faq-summary:hover {
        color: var(--bd-color-primary);
    }
}

@media (max-width: 768px) {
    .bd-faq-summary {
        font-size: 1.05rem;
        padding-right: 2rem;
    }

    .bd-faq-content {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}


/*--------------------------------------------------------------
# HERO
--------------------------------------------------------------*/
.bd-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 550px;
    padding: 4rem 0;
    background: var(--bd-color-darker);
    color: var(--bd-color-white);
    overflow: hidden;
    margin-bottom: 4rem;
}

.bd-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.38;
    filter: contrast(1.12) brightness(0.78);
}

/* Overlay für bessere Lesbarkeit auf hellen Motiven */
.bd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .1;
    background:
        radial-gradient(80% 80% at 25% 40%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.10) 65%, rgba(0,0,0,0.00) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.00) 100%);
}

.bd-hero .bd-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.bd-hero-content {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bd-hero-title {
    font-size: clamp(2.6rem, 6vw, 4.2rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 0 0 1.1rem;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

.bd-hero-lead {
    font-size: 1.35rem;
    line-height: 1.6;
    max-width: 720px;
    font-weight: 300;
    opacity: 0.95;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

/* Badge */
.bd-hero-badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 1.25rem;
    border: 1px solid transparent;
}

.bd-hero-badge--primary {
    background: var(--bd-color-primary);
    color: #fff;
    border-color: var(--bd-color-primary);
}

.bd-hero-badge--secondary {
    background: var(--bd-color-secondary);
    color: var(--bd-color-primary);
    border-color: var(--bd-color-secondary);
}

.bd-hero-badge--xline {
    background: var(--bd-color-xline);
    color: var(--bd-color-primary);
    border-color: var(--bd-color-xline);
}

/* Button-Abstand nur wenn Button existiert */
.bd-hero-content .bd-btn {
    margin-top: 1.6rem;
}

.bd-hero--center .bd-hero-content {
    align-items: center;
    margin: 0 auto;
    text-align: center;
}

@media (max-width: 768px) {
    .bd-hero {
        min-height: 420px;
        padding: 3rem 0;
        margin-bottom: 3rem;
    }

    .bd-hero-title {
        font-size: clamp(2.1rem, 8vw, 3rem);
    }

    .bd-hero-lead {
        font-size: 1.15rem;
    }

    .bd-hero-content .bd-btn {
        margin-top: 1.3rem;
    }
}


/* =========================================================
   BD CARD SYSTEM
   Wiederverwendbar für Produkte, Anwendungen, News, etc.
   ========================================================= */

.bd-card {
    display: flex;
    flex-direction: column;
    background: var(--bd-color-white);
    border: 1px solid var(--bd-color-border);
    border-radius: var(--bd-card-radius);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    color: var(--bd-color-body);
    text-decoration: none; /* wenn <a> als Card genutzt */
}

.bd-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--bd-color-primary);
}

/* Bild-Wrapper: Cover-Modus (z.B. Anwendungen, News) */
.bd-card-img-wrap {
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid var(--bd-color-border);
    background: var(--bd-color-secondary);
    flex-shrink: 0;
}

.bd-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.bd-card:hover .bd-card-img {
    transform: scale(1.04);
}

/* Bild-Wrapper: Contain-Modus (z.B. Produkte mit weißem BG) */
.bd-card-img-wrap--contain {
display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    height: 260px;
    background: var(--bd-color-secondary);
}

.bd-card-img-wrap--contain img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Card Body */
.bd-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
}

/* CTA-Link im Card nach unten drücken */
.bd-card-body .bd-btn--text {
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Innerhalb einer verlinkten Card (.bd-card als <a>):
   Der .bd-btn--text ist kein echter Button sondern ein
   visueller Indikator – kein eigener Hover-Effekt. */
a.bd-card .bd-btn--text,
a.bd-card .bd-btn--text:hover {
    transform: none;
    box-shadow: none;
    text-decoration: none;
    pointer-events: none; /* Card-Link übernimmt */
}

/* Pfeil beim Card-Hover leicht nach rechts schieben */
a.bd-card:hover .bd-btn--text .fa-chevron-right,
a.bd-card:hover .bd-btn--text i {
    transform: translateX(4px);
    transition: transform 0.2s ease;
}

/* Card: horizontales Layout (z.B. Job-List-Items) */
.bd-card--horizontal {
    flex-direction: row;
    align-items: center;
}

.bd-card--horizontal .bd-card-img-wrap {
    width: 120px;
    flex-shrink: 0;
    border-bottom: 0;
    border-right: 1px solid var(--bd-color-border);
}

/* =========================================================
   BD CARD – STRETCH LINK
   ========================================================= */

.bd-card {
    position: relative;
}

.bd-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--bd-card-radius);
}

/* Interaktive Elemente über Overlay */
.bd-card-body .bd-btn--text,
.bd-card-body a,
.bd-card-body button {
    position: relative;
    z-index: 0;
}

/* =========================================================
   BD CARD – BUTTON LOGIK (isoliert von global .bd-btn)
   ========================================================= */

.bd-card .bd-btn--text {
    text-decoration: none;
    transition: color .2s ease, text-decoration-color .2s ease;
}

/* Keine globale Lift-Animation in Cards */
.bd-card .bd-btn--text:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
    box-shadow: none;
    text-decoration: underline;
}

/* Abstand unten im Body */
.bd-card-body .bd-btn--text {
    margin-top: auto;
    padding-top: .5rem;
}

/* =========================================================
   BD CARD – XLINE VARIANTE
   ========================================================= */

.bd-card--xline .bd-card-img-wrap--contain {
    background: var(--bd-color-tertiary);
}

/* Grundfarbe */
.bd-card--xline .bd-btn--text {
    color: var(--bd-color-xline);
}

/* Hover darf NICHT auf global --bd-color-hover springen */
.bd-card--xline .bd-btn--text:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--bd-color-xline);
    text-decoration: underline;
}

/* Card-Rahmen bei Hover */
.bd-card--xline:hover {
    border-color: var(--bd-color-xline);
}

/* Icon ebenfalls XLINE */
.bd-card--xline .bd-btn--text i,
.bd-card--xline:hover .bd-btn--text i {
    color: var(--bd-color-xline);
}

/* =========================================================
   BD SECTION HEADER
   Überschrift + optionaler "Alle"-Link nebeneinander
   ========================================================= */

.bd-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    gap: 1rem;
}

.bd-section-header h2,
.bd-section-header h3 {
    margin: 0;
}

/* =========================================================
   BD PROSE
   Formatierter Redakteurs-Content aus wysiwyg-Feldern.
   Kein strip_tags – volle HTML-Ausgabe erwartet.
   ========================================================= */

.bd-prose {
    font-size: var(--bd-fs-content);
    line-height: 1.7;
    color: var(--bd-color-body);
    margin-bottom: 1.5rem;
}

.bd-prose > * + * {
    margin-top: 0.75em;
}

.bd-prose p,
.bd-prose ul,
.bd-prose ol {
    margin-bottom: 1em;
}

.bd-prose p:last-child,
.bd-prose ul:last-child,
.bd-prose ol:last-child {
    margin-bottom: 0;
}

.bd-prose ul,
.bd-prose ol {
    padding-left: 1.5em;
}

.bd-prose li + li {
    margin-top: 0.3em;
}

.bd-prose strong {
    font-weight: 700;
}

.bd-prose em {
    font-style: italic;
}

.bd-prose a {
    color: var(--bd-color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bd-prose a:hover {
    color: var(--bd-color-hover);
}

.bd-prose h2,
.bd-prose h3,
.bd-prose h4 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}


/* =========================================================
   BD CAROUSEL TRACK + SLIDE
   Ergänzt .bd-carousel-wrapper aus global.css.
   Wird für Kontakt-Karussell (Sidebar) genutzt,
   perspektivisch auch für Produkt-/Referenz-Slider.
   ========================================================= */

.bd-carousel-track {
    display: flex;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.bd-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

/* Einzel-Kontakt: Pfeil-Controls ausblenden */
.bd-carousel-wrapper--single .bd-carousel-controls {
    display: none;
}

/* =========================================================
   BD WIDGET CTA
   Sidebar-CTA-Box, global nutzbar (Jobs, Branchen, etc.)
   ========================================================= */

.bd-widget-cta {
    background: var(--bd-color-white);
    border: 1px solid var(--bd-color-border);
    border-radius: var(--bd-card-radius);
    padding: 2rem 1.5rem;
    text-align: center;
}

.bd-cta-icon {
    font-size: 2.5rem;
    color: var(--bd-color-primary);
    margin-bottom: 1rem;
    line-height: 1;
}

.bd-cta-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bd-color-darker);
    margin-bottom: 0.5rem;
}

.bd-cta-text {
    font-size: 0.9rem;
    color: var(--bd-color-altgrey);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* =========================================================
   BD TRUST GRID
   Kundenlogos / Referenzen – Sidebar Widget.
   ========================================================= */

.bd-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.bd-trust-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    background: var(--bd-color-secondary);
    border-radius: var(--bd-card-radius);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bd-color-altgrey);
    text-align: center;
    min-height: 52px;
}

.bd-trust-logo img {
    max-height: 36px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.2s, opacity 0.2s;
}

.bd-trust-logo:hover img {
    filter: none;
    opacity: 1;
}