body {
    --layout-max-width: 2000px;
    --layout-gutter-x: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    --brand-primary: hsl(203, 100%, 37%);
    --brand-primary-muted-dark: hsl(206, 23%, 18%);
}

/* ============================================================
   BS5 Utility Polyfills – ENTFERNEN nach Bootstrap 5 Migration
   ============================================================ */
.top-0 {
    top: 0 !important;
}

.start-0 {
    left: 0 !important;
}

.fw-light {
    font-weight: 300 !important;
}

.fw-normal {
    font-weight: 400 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.fw-bolder {
    font-weight: bolder !important;
}

.lh-1 {
    line-height: 1 !important;
}

.opacity-75 {
    opacity: 0.75 !important;
}

.g-4 {
    margin-right: -12px !important;
    margin-left: -12px !important;
    margin-top: -24px !important;
}

.g-4>[class*="col-"] {
    padding-right: 12px !important;
    padding-left: 12px !important;
    margin-top: 24px !important;
}

/* ============================================================ */

.width-full {
    width: 100%;
    padding-inline: 0;
}

.width-vp-2000 {
    width: 100%;
    max-width: var(--layout-max-width);
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
}

.container-2000 {
    width: 100%;
    max-width: var(--layout-max-width);
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
}

@media (max-width: 1999.98px) {
    .container-2000 {
        padding-inline: var(--layout-gutter-x);
    }
}

/* ===========================================================
   REDAXO – Grid Layout
   =========================================================== */

.rx-grid-container {
    margin-bottom: 40px;
    box-sizing: border-box;
}

.grid-width-standard {
    max-width: 1240px;
}

.grid-width-wide {
    max-width: 1640px;
}

.grid-width-full {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.rx-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr;
}

.rx-grid-wrapper > * {
    min-width: 0;
    overflow-wrap: break-word;
}

.rx-grid-wrapper.grid-gap-none { gap: 0; }
.rx-grid-wrapper.grid-gap-sm   { gap: 10px; }
.rx-grid-wrapper.grid-gap-md   { gap: 20px; }
.rx-grid-wrapper.grid-gap-lg   { gap: 40px; }
.rx-grid-wrapper.grid-gap-xl   { gap: 60px; }

.rx-grid-wrapper.break-none {
    grid-template-columns: var(--grid-cols);
}

@media (min-width: 768px) {
    .rx-grid-wrapper.break-sm {
        grid-template-columns: var(--grid-cols);
    }
}

@media (min-width: 992px) {
    .rx-grid-wrapper.break-md {
        grid-template-columns: var(--grid-cols);
    }
}

/* ===========================================================
   BFA – Hero KPI Animation
   =========================================================== */

/* Hero-Textausrichtung ab LG */
@media (min-width: 992px) {
    .hero-text-block {
        margin-left: 17vw;
    }

    .hero-subtitle {
        --hero-subtitle-indent: 14vw;
        /* Stellschraube: z.B. 5vw, 10vw, 120px … */
        margin-left: var(--hero-subtitle-indent);
    }
}

.bfa-container {
    --bfa-start-delay: 1.0s;
    --bfa-panel-speed: 2.5s;
    --bfa-pause-between: 0.2s;
    width: 100%;
    max-width: 2000px;
    margin-inline: auto;
}

.bfa-hero-img {
    object-fit: cover;
    height: auto;
}

/* ---- Panel Base ---- */
.bfa-panel {
    position: absolute;
    top: 0;
    height: 100%;

    /* Breite und Position kommen per CSS-Klasse bzw. Inline-Style:
       width  → .panel-width-* Klasse
       right  → inline style (kumulierte Breite nachfolgender Panels)
       --bfa-i → inline style (0-basierter Index für Animation-Delay)   */

    /* backdrop-filter entfernt – Alpha-Werte der Farb-Klassen erhöht
       für gleichen visuellen Effekt ohne GPU-Overhead */
    contain: layout style paint;
}

/* Animationsstart erst verknüpft an IntersectionObserver-Klasse */
.bfa-container.is-visible .bfa-panel {
    will-change: transform;
    animation: bfa-slideLeft var(--bfa-panel-speed) cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
    animation-delay: calc(var(--bfa-start-delay) + var(--bfa-i, 0) * (var(--bfa-panel-speed) + var(--bfa-pause-between)));
}

.counter {
    display: inline-block;
}

.bfa-panel__label {
    font-size: 0.9rem;
    letter-spacing: 0.15em;
}

@keyframes bfa-slideLeft {
    to {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bfa-container.is-visible .bfa-panel {
        animation: none;
        transform: translateX(0);
    }
}

/* ---- Panel Breiten-Klassen (calc() verhindert Sub-Pixel-Lücken) ---- */
.panel-width-25 {
    width: 25%;
}

.panel-width-33 {
    width: calc(100% / 3);
}

.panel-width-50 {
    width: 50%;
}

.panel-width-67 {
    width: calc(200% / 3);
}

.panel-width-100 {
    width: 100%;
}

/* ---- Panel-Variante: Linksbündig (Text-Modus) ---- */
.bfa-panel--left {
    left: 0;
    right: auto;
}

.bfa-panel--left .bfa-panel__content {
    text-align: left;
}

.bfa-panel--left .bfa-panel__content .ico {
    margin-left: 0;
    margin-right: 0;
}

.bfa-panel__content .ico {
    display: block;
    width: 36px;
    height: 36px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Panel Farb-Klassen (Alpha 0.88 statt 0.7 + backdrop-filter) ---- */
.overlay-ocean {
    background-color: hsla(198, 100%, 41%, 0.88);
}

.overlay-azure {
    background-color: hsla(212, 100%, 41%, 0.88);
}

.overlay-navy {
    background-color: hsla(224, 100%, 41%, 0.88);
}

.overlay-indigo {
    background-color: hsla(236, 100%, 41%, 0.88);
}

.overlay-teal {
    background-color: hsla(180, 80%, 35%, 0.88);
}

.overlay-slate {
    background-color: hsla(210, 30%, 40%, 0.88);
}

/* ---- Icon-Klassen (CSS mask-image, Farbe via currentColor) ---- */
.ico {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.ico-arrow-right {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8'/%3E%3C/svg%3E");
}

.ico-play-circle-fill {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z'/%3E%3C/svg%3E");
}

.ico-buildings {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022M6 8.694 1 10.36V15h5zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5z'/%3E%3Cpath d='M2 11h1v1H2zm2 0h1v1H4zm-2 2h1v1H2zm2 0h1v1H4zm4-4h1v1H8zm2 0h1v1h-1zm-2 2h1v1H8zm2 0h1v1h-1zm2-2h1v1h-1zm0 2h1v1h-1zM8 7h1v1H8zm2 0h1v1h-1zm2 0h1v1h-1zM8 5h1v1H8zm2 0h1v1h-1zm2 0h1v1h-1zm0-2h1v1h-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022M6 8.694 1 10.36V15h5zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5z'/%3E%3Cpath d='M2 11h1v1H2zm2 0h1v1H4zm-2 2h1v1H2zm2 0h1v1H4zm4-4h1v1H8zm2 0h1v1h-1zm-2 2h1v1H8zm2 0h1v1h-1zm2-2h1v1h-1zm0 2h1v1h-1zM8 7h1v1H8zm2 0h1v1h-1zm2 0h1v1h-1zM8 5h1v1H8zm2 0h1v1h-1zm2 0h1v1h-1zm0-2h1v1h-1z'/%3E%3C/svg%3E");
}

.ico-people {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1zm-7.978-1L7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002-.014.002zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0M6.936 9.28a6 6 0 0 0-1.23-.247A7 7 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.24 2.24 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816M4.92 10A5.5 5.5 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1zm-7.978-1L7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002-.014.002zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0M6.936 9.28a6 6 0 0 0-1.23-.247A7 7 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.24 2.24 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816M4.92 10A5.5 5.5 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4'/%3E%3C/svg%3E");
}

.ico-mic-fill {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0z'/%3E%3Cpath d='M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0z'/%3E%3Cpath d='M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
}

.ico-trophy {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5q0 .807-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.313A1.75 1.75 0 0 0 10.75 15H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.25A1.75 1.75 0 0 0 7 13.25v-2.313c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33 33 0 0 1 2.5.5m.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.398-.588-2.797-.72-3.935m10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.138-.388 2.537-.72 3.935M3.504 1q.01.775.056 1.469c.13 2.028.457 3.546.87 4.667C5.294 9.48 6.484 10 7 10a.5.5 0 0 1 0 1c-.516 0-1.706-.52-2.57-2.864-.413-1.12-.74-2.64-.87-4.667a31 31 0 0 1-.056-1.463A.5.5 0 0 1 3.504 1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5q0 .807-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.313A1.75 1.75 0 0 0 10.75 15H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.25A1.75 1.75 0 0 0 7 13.25v-2.313c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33 33 0 0 1 2.5.5m.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.398-.588-2.797-.72-3.935m10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.138-.388 2.537-.72 3.935M3.504 1q.01.775.056 1.469c.13 2.028.457 3.546.87 4.667C5.294 9.48 6.484 10 7 10a.5.5 0 0 1 0 1c-.516 0-1.706-.52-2.57-2.864-.413-1.12-.74-2.64-.87-4.667a31 31 0 0 1-.056-1.463A.5.5 0 0 1 3.504 1z'/%3E%3C/svg%3E");
}

.ico-graph-up {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07'/%3E%3C/svg%3E");
}

.ico-globe {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7 7 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49a7 7 0 0 0 .656 2.5zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7 7 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49a7 7 0 0 0 .656 2.5zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z'/%3E%3C/svg%3E");
}

.ico-mortarboard {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917z'/%3E%3Cpath d='M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917z'/%3E%3Cpath d='M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466z'/%3E%3C/svg%3E");
}

.ico-lightbulb {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1-.5.5 8.5 8.5 0 0 1-4 0A.5.5 0 0 1 5.5 14a.5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1-.5.5 8.5 8.5 0 0 1-4 0A.5.5 0 0 1 5.5 14a.5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1'/%3E%3C/svg%3E");
}

.ico-book {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492z'/%3E%3Cpath d='M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492z'/%3E%3Cpath d='M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466z'/%3E%3C/svg%3E");
}

/* Tech-Accent UI Elements (Curtain Swipe) */
.tech-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: transparent;
    border: none;
    border-left: 4px solid var(--brand-primary);
    border-radius: 0;
}

.tech-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--brand-primary-muted-dark);
    z-index: -2;
}

.tech-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--brand-primary);
    transform: translateX(-101%);
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    z-index: -1;
}

.tech-card:hover::before {
    transform: translateX(0);
}

/* Set inner context to keep it above the backgrounds */
.tech-card>* {
    position: relative;
    z-index: 2;
}

.tech-card .ico {
    color: #ffffff;
    fill: #ffffff;
    background-color: #ffffff;
}

.tech-card-badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    border-radius: 0.25rem;
    color: #ffffff;
    background-color: var(--brand-primary);
    font-size: 0.55rem;
    letter-spacing: 0.5px;
    vertical-align: text-top;
    margin: 2px 0 0 5px;
}

.tech-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #ffffff;
}

.tech-sub {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
}

.tech-sub-muted {
    opacity: 0.6;
    font-weight: 500;
}

/* Icon Cards */
.section-label {
    font-size: 0.75rem;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6c757d;
}

.icon-card {
    border: none;
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.icon-card:hover {
    transform: translateY(-3px);
}

.icon-card:hover .icon-card-icon {
    background-color: var(--brand-primary);
}

.icon-card:hover .icon-card-icon .ico {
    background-color: #ffffff;
}

.icon-card:hover .icon-card-link {
    opacity: 1;
}

.icon-card-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: hsla(203, 100%, 37%, 0.12);
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.icon-card-icon .ico {
    width: 24px;
    height: 24px;
    transition: background-color 0.3s ease;
}

.icon-card-link {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--brand-primary);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.icon-card-title {
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.icon-card-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}

/* ===========================================================
   Chips – Universelle Chip/Pill-Badge Liste
   Präfix: chips (BEM)
   =========================================================== */

.chips {
    --chips-bg: #eef7fc;
    --chips-color: #314963;
    --chips-subtitle-color: #5e6a75;
    --chips-title-color: #0f1720;
}

.chips__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 0.72rem;
    margin: 0;
}

.chips__item {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-size: 0.7rem;
    line-height: 1;
    letter-spacing: 0.055em;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.42rem 1.25rem;
    border-radius: 50rem;
    border: none;
    background-color: #c8e6f9;
    color: #00395d;
}

.chips__item--new {
    padding-right: 0.7rem;
}

.chips__badge {
    display: inline-flex;
    align-items: center;
    height: 16px;
    font-size: 0.62rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
    background-color: var(--brand-primary);
    color: #fff;
    padding: 0 0.32rem;
    border-radius: 3px;
    margin-left: 0.4rem;
}

.chips__subtitle {
    margin: 0 0 1.45rem;
    font-size: 0.78rem;
    line-height: 1.2;
    letter-spacing: 0.16em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--chips-subtitle-color);
}

.chips__title {
    margin: 0 0 2rem;
    font-size: 1.85rem;
    line-height: 1.15;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--chips-title-color);
}

.chips__link {
    display: inline-flex;
    align-self: flex-start;
    gap: 0.35rem;
    margin-top: 2rem;
    font-size: 1rem;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--brand-primary);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.chips__link:hover {
    color: #003558;
    opacity: 0.7;
    text-decoration: none;
}

@media (max-width: 767px) {
    .chips__title {
        font-size: 1.5rem;
    }

    .chips__item {
        padding-inline: 1rem;
    }
}

/* img-banner – Universeller Bild-Banner (war: Why FILTECH Banner) */
.img-banner {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Hintergrundbild als natives <img> mit object-fit: cover
   → LCP-optimiert, responsive-fähig, a11y-sauber */
.img-banner__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

.img-banner::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.img-banner--dark-blue::after {
    background: linear-gradient(135deg, hsla(220, 78%, 16%, 0.70) 0%, hsla(210, 67%, 26%, 0.50) 100%);
}

.img-banner--brand-primary::after {
    background: linear-gradient(135deg, hsla(203, 100%, 37%, 0.75) 0%, hsla(206, 23%, 18%, 0.55) 100%);
}

.img-banner--dark-teal::after {
    background: linear-gradient(135deg, hsla(180, 80%, 35%, 0.70) 0%, hsla(210, 30%, 40%, 0.50) 100%);
}

.img-banner--dark-red::after {
    background: linear-gradient(135deg, hsla(350, 70%, 25%, 0.70) 0%, hsla(0, 55%, 35%, 0.50) 100%);
}

.img-banner__inner {
    position: relative;
    z-index: 2;
}

/* --- Helper Classes --- */
.hero-title {
    letter-spacing: -1px;
    font-weight: 900;
    line-height: 1;
}

.hero-subtitle {
    color: var(--brand-primary);
    letter-spacing: 0.5px;
    margin-left: var(--hero-subtitle-indent, 0);
}

.img-banner__content {
    max-width: 800px;
}

.img-banner__label {
    color: rgba(255, 255, 255, 0.9);
}

.img-banner__body {
    color: #ffffff;
}

.img-banner__body h1,
.img-banner__body h2,
.img-banner__body h3 {
    color: #ffffff;
    letter-spacing: -1.5px;
    line-height: 1.05;
}

.img-banner__body p {
    color: #ffffff;
}

.img-banner__accent {
    opacity: 0.7;
}

.img-banner__desc {
    font-size: 0.78rem;
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Min-Height Modifikator-Klassen */
.img-banner--h-auto {
    min-height: auto;
}

.img-banner--h-280 {
    min-height: 280px;
}

.img-banner--h-400 {
    min-height: 400px;
}

.img-banner--h-500 {
    min-height: 500px;
}

.img-banner--h-60vh {
    min-height: 60vh;
}

.img-banner--h-stretch {
    height: 100%;
}

.img-banner--h-stretch .img-banner__inner {
    height: 100%;
}

/* Mobile Optimizations for Hero/KPI Panels + Grid */
@media (max-width: 767px) {
    .bfa-container,
    .bfa-hero-img {
        min-height: 300px;
    }

    .bfa-panel {
        align-items: flex-start;
        padding-top: 1.2rem;
    }

    .bfa-panel__content {
        padding: 1rem;
    }

    .bfa-panel__content .ico {
        width: 26px;
        height: 26px;
        margin-bottom: 0.5rem;
    }

    .bfa-panel__content h2.counter {
        font-size: 2.2rem;
    }

    .bfa-panel__label {
        font-size: 0.7rem;
        letter-spacing: 0.1em;
    }

    /* img-banner Mobile Optimierungen */
    .img-banner--h-280 {
        min-height: 200px;
    }

    .img-banner--h-400 {
        min-height: 280px;
    }

    .img-banner--h-500 {
        min-height: 350px;
    }

    .img-banner--h-60vh {
        min-height: 40vh;
    }
}

/* ===========================================================
   Module Margin Utilities (Vertical Rhythm)
   =========================================================== */
.module-mb-none { margin-bottom: 0 !important; }
.module-mb-small { margin-bottom: 24px; }
.module-mb-default { margin-bottom: 48px; }
.module-mb-large { margin-bottom: 80px; }
.module-mb-xlarge { margin-bottom: 120px; }

@media (max-width: 767px) {
    .module-mb-large { margin-bottom: 48px; }
    .module-mb-xlarge { margin-bottom: 60px; }
}