/* Reset and Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-primary: #00294d;
    --color-secondary: #4a5568;
    --color-accent: #f7ad00;
    --color-accent-light: #dedc00;
    --color-bg-light: #e0e3dd;
    --color-bg-dark: #001D49;
    --color-text: #000;
    --color-text-light: #fff;
    --color-text-muted: #666;
    --color-red: #dd685c;
    
    --header-height: 4.6875rem;
    
    --pink: #ba4e97;
    --altrosa: #947180;
    --hellblau: #00a0de;
    --rosa: #dd685c;
    --lachsrot: var(--rosa);
    --petrol: #0084a1;
    --green2: #656881;
    --blaugrau: #435061;
    --stahlblau: #435061;
    --bg-light: var(--color-bg-light);
    --bg-midgray: #c6c5bb;
    --bg-gray: #949288;
    --darkgray: #646363;
    --bg-darkgray: var(--darkgray);
    
    --bg-darkblue: var(--color-primary);
    --bg-steelblue: #666881;
    --bg-gelb: #DEDC00;
    --bg-orange: var(--color-accent);
    --text-blue: #0083A0;

    --svg-bg: #656363;

    --bs-box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.5);
}

/* Lenis smooth scroll (js/lenis.min.js + Initialisierung in js/script.js) */
html.lenis {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

body {
    font-family: 'Open Sans', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--color-text);
    font-weight:400;
    line-height: 1.6;
}
.cap { text-transform: uppercase; }
.bg-light {
    background-color: var(--bg-light) !important;
}
.bg-gray {
    background-color: var(--bg-gray) !important;
}
.bg-steelblue {
    background-color: var(--bg-steelblue) !important;
}
.bg-darkblue {
    background-color: var(--bg-darkblue) !important;
}
.bg-blue {
    background-color: var(--bg-blue) !important;
}
.bg-white {
    background-color: #fff !important;
}
.bg-gelb {
    background-color: var(--bg-gelb) !important;
}
.bg-midgray {
    background-color: var(--bg-midgray) !important;
}
.bg-lachsrot {
    background-color: var(--lachsrot) !important;
}
.bg-altrosa {
    background-color: var(--altrosa) !important;
}
.bg-petrol {
    background-color: var(--petrol) !important;
}
.bg-pink {
    background-color: var(--pink) !important;
}
.bg-orange {
    background-color: var(--bg-orange) !important;
}
.section { background: transparent;}
p {
    color: #646363;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
p.fliesstext-gross {
    font-weight: 500;
    color: var(--color-primary);
    font-size: 1.2rem;
    /* margin-top: 2rem; */
}
p.fliesstext-gross2 {
    font-weight: 500;
    color: var(--color-primary);
    font-size: 1.5rem;
    /* margin-top: 2rem; */
}
p.fliesstext-extragross {
    font-weight: 500;
    color: var(--color-primary);
    font-size: 3.5rem;
    margin-top: 4rem;
    /* text-align: center; */
}
/* Editor: Texteditor in Spalten */
.multiCol {
    column-count: 3;
    column-gap: 5rem;
    margin: 2rem 0;
}
.multiCol p,
.multiCol li,
.multiCol blockquote {
    break-inside: avoid;
}
@media (max-width: 992px) {
    .multiCol { column-count: 2; column-gap: 2rem; }
}
@media (max-width: 576px) {
    .multiCol { column-count: 1; column-gap: 1rem; }
}
h1 {
    font-weight: 600;
    color: var(--color-primary);
    padding: 1.5rem 0 0;
}
.icon-header h1 {
    padding: 1.5rem 0 4rem;
}
.nav-item { text-transform: uppercase; }
/* Header */
.home_page .header_height{
    height:0;
}
.sticky-lock .header_height{
    height:var(--header-height);
}
.header,.home_page.sticky .header{
    background-color:#00294d;
    padding:1.25rem 0;
    z-index: 999;
    height: var(--header-height);
    transition: all .2s;
    box-shadow: var(--bs-box-shadow);
}
.home_page .header{
    background-color:transparent;
    box-shadow:none;
}
.home_page .header.sticky{
    height: var(--header-height);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-einkauf {
    height: 300px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-text-light);
}

.logo-icon {
    width: 35px;
    height: 35px;
    background: var(--color-accent);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    color: var(--color-primary);
}

.logo-text {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
}

.logo-text small {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.8;
}

.main-nav {
    display: flex;
    gap:2rem;
}

.nav-link {
    transition: opacity 0.3s;
}
.header .nav-link{
    color: #FFF;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem; /* 142.857% */
}
.header .nav-link.active{
    color:#F7AD00;
}
.nav-link:hover,
.nav-link.active {
    opacity: 1;
}
/* Nur Offcanvas/Mobile: Menü im normalen Fluss. Desktop (#mainNavbar) braucht position:absolute (Bootstrap). */
@media (max-width: 991.98px) {
    #offcanvasNavbar .dropdown-menu.show,
    .main-nav-mb .dropdown-menu.show {
        display: block;
        position: relative !important;
        transform: none !important;
        margin-bottom: 1rem !important;
    }
}
.header-actions {
    display: flex;
    align-items: center;
    gap:.86rem;
}
.header-actions .dropdown .dropdown-toggle::after{
    transform:rotate(-90deg);
}
.input-search {
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    height:1.75rem;
    padding: 0 0.25rem 0 0.38rem;
    line-height:1;
    text-align:left;
    font-size:.875rem;
    padding-left:1.75rem!important;
    direction: ltr;
    transition: all .2s;
}
.input-search::placeholder{
    font-size:0.875rem!important;
    color:#fff!important;
    font-weight:100!important;
}
.input-search:focus,.input-search:not(:placeholder-shown){
    width:8rem;
}
.lang {
    color: var(--color-text-light);
}
.header-actions .nav-link,.header-actions .input-search{
    background-color:rgba(255,255,255,.2);
    padding:.25rem 0.38rem;
    border-radius:0 .5rem .5rem .5rem;
}

/* Hero Section */
.hero {
    position: relative;
    height:649px;
    display: flex;
    align-items:end;
    /* justify-content: center; */
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(to bottom, rgba(26, 58, 92, 0.7), rgba(26, 58, 92, 0.5)); */
}

.hero-title {
    position: relative;
    color: var(--color-text-light);
    font-size: 4.85625rem;
    font-weight: 500;
    letter-spacing: -0.17781rem;
    text-align: center;
    margin-bottom: 5.5rem;
}
.container-full {
    padding-left: 5vw;
}
/* Stats Section */
.stats-section {
    background: var(--color-bg-light);
    padding: 20px 0 40px;
}
.stats-section .card img{
    border-radius: 0 .875rem .875rem .875rem;
    height: 100%;
}
    /*###*/
/* Lưới hàng trên */
.grid-top {
    display: grid;
    grid-template-columns:2.2fr 1fr;
    gap:4.375rem;
    margin-bottom:3.375rem;
}

.main-video {
    height:26.1875rem;
    overflow: hidden;
}

/* Großbild im Video-Slot (t32__bild_gross): Fläche wie HTML5-Video füllen */
.stats-section .card.main-video > img {
    width: 100%;
    object-fit: cover;
}

.play-btn {
    position: absolute;
    bottom:1.54rem;
    right:1.54rem;
    background: #E6007D;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items:start;
    justify-content: center;
    font-weight: bold;
    font-size: 1.59375rem;
    line-height:1.75;
    cursor: pointer;
    width: 2.92256rem;
    height: 2.92256rem;
}

.stat-group {
    display: flex;
    flex-direction: column;
    gap:1rem;
}
.card{
    --bs-body-bg: transparent;
    --bs-border-width: 0;
    --bs-card-border-radius:0;
    border-radius: 0 .875rem .875rem .875rem;
    overflow: hidden;
}
.bg-gray .card {
    background-color: #aaa8a1 !important;
}
.bg-steelblue .card {
    background-color: var(--bg-steelblue) !important;
}
.bg-darkblue .card {
    background-color: #325471 !important;
}
.bg-blue .card {
    background-color: var(--bg-blue) !important;
}
.bg-gelb .card {
    background-color: var(--bg-gelb) !important;
}
.bg-svg .card {
    background-color: var(--svg-bg) !important;
}
.project-text-banner .card {
    background-color: #435061 !important;
}
.banner-green2 .card {
    background-color: var(--green2) !important;
}
.banner-stahlblau .card {
    background-color: var(--stahlblau) !important;
}
.modul-banner-cta-color--transparent .card {
    background-color: transparent !important;
    border: solid 1px var(--blaugrau);
}
.stat-card {
    flex: 1;
}
.img-svg-banner {
    width: 100px;
    height: auto;
    object-fit: contain;
}

/* Hiệu ứng chữ đè ảnh */
.overlay, .overlay-large {
    position: absolute;
    bottom: 20px;
    left: 25px;
    color: white;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.modul-banner .overlay-large,
.modul-banner .overlay {
    top: 20px;
    left: 25px;
}
.modul-banner-cta-color--transparent .overlay-large,
.modul-banner-cta-color--transparent .overlay {
    top: 10px;
    left: 15px;
}
.modul-banner-svg .overlay {
    bottom: 12px;
    top: inherit;
    left: 20px;
}
/* Banner: Overlay-Text darf umbrechen */
.overlay-large .txt{
    max-width: 18ch;
    line-height: 1.5;
    font-size: 1rem;
}
.txt-vor {
    padding-right: .25rem;
}
/* Modul-Banner 1-3: Overlay zweizeilig (vor/num/nach + unter) */
.modul-banner--1-3 .overlay-large{
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
}
.modul-banner--1-3 .overlay-large .overlay-line{
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.modul-banner--1-3 .overlay-large .txt-unter{
    display: block;
    max-width: 50ch;
}

/* Modul-Banner 1-2 & 2-3: gleicher zweizeiliger Overlay-Aufbau */
.modul-banner--1-2 .overlay-large,
.modul-banner--2-3 .overlay-large{
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
}
.modul-banner--1-2 .overlay-large .overlay-line,
.modul-banner--2-3 .overlay-large .overlay-line{
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.modul-banner--1-2 .overlay-large .txt-unter,
.modul-banner--2-3 .overlay-large .txt-unter{
    display: block;
    max-width: 50ch;
}

/* Modul-Banner CTA: 2 Textblöcke + interne/externe Links */
.modul-banner-cta .modul-banner-cta__overlay{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    max-width: 44ch;
}
.modul-banner-cta .modul-banner-cta__text-row{
    display: flex;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
}
.color__headline {
    font-size: 1.5rem; line-height: 1.2;
}
.modul-banner-cta-color--transparent .color__headline {
    font-size: .9rem; line-height: 1.1; font-weight: 400; 
}
.modul-banner-cta-color__headline-wrap {
    display: block;
    height: 68px;
}
.modul-banner-cta-color--transparent .modul-banner-cta-color__headline-wrap {
    display: block;
    height: 100px;
}
.modul-banner-cta .modul-banner-cta__text{
    margin: 0;
    color: #fff;
}
.modul-banner-cta .modul-banner-cta__links{
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1rem;
}
.modul-banner-cta .modul-banner-cta__link{
    display: inline-block;
    color: #fff;
    font-weight: 700;
    text-decoration: underline;

}
.modul-banner-bild-text {
    margin-top: 3rem;
    padding: 2rem;
}
/* Vertikale Zentrierung: .row.align-items-center — kein d-flex auf der Bild-Spalte
   (sonst kollabiert die Höhe oft mit img-fluid / %-Breiten). */
.modul-banner-bild-text__image {
    width: 100%;
    max-width: 100%;
}
.modul-banner-bild-text__image img,
.modul-banner-bild-text__image picture,
.modul-banner-bild-text__image svg {
    display: block;
    max-width: 100%;
    height: auto;
}
/* Erster/letzter Absatz aus dem Editor: kein asymmetrischer Außenabstand im Banner */
.modul-banner-bild-text .modul-banner-bild-text__text.text-editor > *:first-child {
    margin-top: 0 !important;
}
.modul-banner-bild-text .modul-banner-bild-text__text.text-editor > *:last-child {
    margin-bottom: 0 !important;
}
/* Modul-Banner CTA Overlay-Variante: Vollflächiges Farb-Overlay, bei Hover ausblenden */
.modul-banner-cta--overlay .card {
    overflow: hidden;
}
.modul-banner-cta--overlay .overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(18, 32, 58, 0.58);
    mix-blend-mode: normal;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.45s ease;
}
.modul-banner-cta--overlay .modul-banner-cta__overlay {
    z-index: 2;
    opacity: 1;
    transition: opacity 0.45s ease;
}
.modul-banner-cta--overlay:hover .overlay {
    opacity: 0;
}
.modul-banner-cta--overlay:hover .modul-banner-cta__overlay {
    opacity: 0;
    pointer-events: none;
}

/* CTA Video Overlay: Video liegt auf dem Bild, läuft dauerhaft (muted autoplay) */
.modul-banner-cta--video-overlay-card .modul-banner-cta__hover-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
}

/* ——— Template 40: Prozess-Stepper ——— */
/* Linie = volle Breite (container-fluid), Schritte nur in .container */
.prozess-stepper-section {
}
.prozess-stepper-fluid {
    width: 100%;
    box-sizing: border-box;
}
.prozess-stepper-shell {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
/* Durchgehende Linie über die gesamte Fluid-Breite */
.prozess-stepper-shell::before {
    content: '';
    position: absolute;
    top: calc(2rem + 1rem);
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: var(--blaugrau);
    z-index: 0;
    box-sizing: border-box;
    pointer-events: none;
}
.prozess-stepper {
    display: block;
    position: relative;
    padding: 2rem 0 1.5rem;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
/* Schritte: .directeditmode = Flex-Zeile */
.prozess-stepper > .directeditmode {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 1;
    gap: 0;
}
.prozess-stepper .prozess-stepper__item,
.prozess-stepper .step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: left;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}
.prozess-stepper .prozess-stepper__circle,
.prozess-stepper .step-circle {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--blaugrau);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
    box-sizing: border-box;
}
.prozess-stepper .prozess-stepper__content,
.prozess-stepper .step-content {
    text-align: left;
    padding: 0 0.5rem;
    width: 100%;
}
.prozess-stepper .prozess-stepper__title,
.prozess-stepper .step-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--blaugrau);
    margin-bottom: 0;
    line-height: 1.3;
}
.prozess-stepper .prozess-stepper__title::after,
.prozess-stepper .step-title::after {
    content: '';
    display: block;
    width: 30%;
    height: 1px;
    background: var(--blaugrau);
    margin: 0.5rem 0 0.5rem;
}
.prozess-stepper .prozess-stepper__text,
.prozess-stepper .step-text {
    font-size: 1rem;
    color: var(--blaugrau);
    line-height: 1.5;
}
@media (max-width: 600px) {
    .prozess-stepper > .directeditmode {
        flex-direction: column;
        gap: 1.5rem;
        align-items: stretch;
    }
    .prozess-stepper-shell::before {
        top: calc(2rem + 11px);
        left: calc(var(--bs-gutter-x, 0.75rem) + 11px);
        right: auto;
        width: 1px;
        height: calc(100% - 4rem);
        bottom: 1.5rem;
    }
    .prozess-stepper .prozess-stepper__item,
    .prozess-stepper .step {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        flex: none;
        width: 100%;
    }
    .prozess-stepper .prozess-stepper__circle,
    .prozess-stepper .step-circle {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .prozess-stepper .prozess-stepper__content,
    .prozess-stepper .step-content {
        text-align: left;
        padding: 0;
        width: auto;
    }
    .prozess-stepper .prozess-stepper__title::after,
    .prozess-stepper .step-title::after {
        margin: 6px 0 8px;
    }
}
img.icon {
  width: 100px;  height: 100px; 
}

.icon-header img.icon {
    position: absolute; right: 0; top: 0;
}

.stoerer {
    font-size: 2rem; color: #fff; line-height: 1.3;
}
.inline-block {
    display: inline-block;
}
.align-left { float: left; margin-right: 2rem; }
/* ——— Template 41: Split-Panel / Accordion ——— */
.sp-panel-accordion-section {
    overflow: hidden;
}
/* Kein width:100% – sonst wirkt das Modul oft „volle Viewport-Breite“ und kämpft mit .container */
.sp-panel-accordion-fluid,
.sp-panel-accordion-shell {
    box-sizing: border-box;
    max-width: 100%;
}
.sp-panel-accordion {
    box-sizing: border-box;
    max-width: 100%;
}
/* Desktop: horizontale Panels */
.sp-panels {
    display: flex;
    height: 60vh;
    min-height: 600px;
    overflow: hidden;
}
.sp-panels .sp-panel {
    flex: 1;
    position: relative;
    cursor: pointer;
    transition: flex 0.95s cubic-bezier(0.22, 0.8, 0.2, 1);
    overflow: hidden;
    min-width: 60px;
}
/* Bild-Overlay: immer sichtbar (Ruhezustand); stärker wenn Panel aktiv.
   Presets über Klasse am Root: .sp-overlay--default | .sp-overlay--light | .sp-overlay--dark */
.sp-panels .sp-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: background 0.65s cubic-bezier(0.22, 0.8, 0.2, 1);
}
/* Fallback: ältere Ausgaben ohne sp-overlay--* */
.sp-panel-accordion:not([class*="sp-overlay--"]) .sp-panels .sp-panel::before {
    background: rgba(10, 22, 40, 0.58);
    opacity: 0.38;
}
.sp-panel-accordion:not([class*="sp-overlay--"]) .sp-panels .sp-panel.active::before {
    opacity: 1;
}
.sp-panel-accordion.sp-overlay--default .sp-panels .sp-panel::before {
    background: rgba(10, 22, 40, 0.4);
}
.sp-panel-accordion.sp-overlay--default .sp-panels .sp-panel.active::before {
    background: rgba(10, 22, 40, 0.66);
}
.sp-panel-accordion.sp-overlay--default .sp-panels .sp-panel:hover:not(.active)::before {
    background: rgba(10, 22, 40, 0.48);
}
.sp-panel-accordion.sp-overlay--light .sp-panels .sp-panel::before {
    background: rgba(10, 22, 40, 0.22);
}
.sp-panel-accordion.sp-overlay--light .sp-panels .sp-panel.active::before {
    background: rgba(10, 22, 40, 0.52);
}
.sp-panel-accordion.sp-overlay--light .sp-panels .sp-panel:hover:not(.active)::before {
    background: rgba(10, 22, 40, 0.3);
}
.sp-panel-accordion.sp-overlay--dark .sp-panels .sp-panel::before {
    background: rgba(10, 22, 40, 0.52);
}
.sp-panel-accordion.sp-overlay--dark .sp-panels .sp-panel.active::before {
    background: rgba(10, 22, 40, 0.82);
}
.sp-panel-accordion.sp-overlay--dark .sp-panels .sp-panel:hover:not(.active)::before {
    background: rgba(10, 22, 40, 0.6);
}
/* Mouseover: Panels werden wieder breiter (sanft) */
.sp-panels .sp-panel:hover:not(.active) {
    flex: 1.18;
}
.sp-panels .sp-panel.active {
    /* flex: 4.5; */
    flex: 3;
}
.sp-panels .sp-panel.active:hover {
    /* flex: 4.5; */
    flex: 3;
}
.sp-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 1s cubic-bezier(0.22, 0.8, 0.2, 1);
    transform: translateZ(0);
    backface-visibility: hidden;
    transform-origin: center center;
}
.sp-panels .sp-panel:hover:not(.active) .sp-bg {
    transform: scale(1.08);
}
/* Normalzustand: Icon + Label im oberen Drittel, horizontal zentriert.
   NICHT vertical zentrieren (justify-content: center): bei großem Label-Text
   wird der Block höher als 33 % → ragt nach oben → .sp-panel overflow:hidden schneidet das Icon ab. */
.sp-panels .sp-label {
    position: absolute;
    top: 15%;
    left: 0;
    right: 0;
    height: 33.333%;
    bottom: auto;
    z-index: 2;
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: clamp(0.5rem, 2vh, 1.25rem) 10px 0;
    opacity: 1;
    transition: opacity 0.45s ease;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.sp-panels .sp-panel.active .sp-label {
    opacity: 0;
}
/* Text aus pN_label (mehrzeilig möglich) */
.sp-panels .sp-label .sp-label-text {
    display: block;
    flex-shrink: 1;
    min-width: 0;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-weight: 500;
    line-height: 1.35;
    max-width: 95%;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
/* Icon: nicht schrumpfen (Flex), damit es sichtbar bleibt */
.sp-panels .sp-label-icon {
    flex-shrink: 0;
    font-size: 36px;
    filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.4));
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    margin-bottom: 1rem;
}
.sp-panels .sp-label-icon img.sp-panel-icon-img,
.sp-panels .sp-label-icon img {
    display: block;
    /* max-height: 42px; */
    width: auto;
    max-width: 80px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.sp-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0px 30px 20px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.42s ease 0.1s, transform 0.7s cubic-bezier(0.22, 0.8, 0.2, 1) 0.07s;
    pointer-events: none;
    box-sizing: border-box;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.sp-panels .sp-panel.active .sp-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Während Desktop-Transition: Content ausblenden (Phase 1) */
.sp-panels.is-transitioning .sp-panel .sp-content {
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.18s ease-out, transform 0.2s ease-out;
}
/* Sanfteres Schließen: mehr Ease-out + kleiner Nachlauf */
.sp-panels.is-closing .sp-panel {
    transition-duration: 1.25s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-panels.is-closing .sp-bg {
    transition-duration: 1.35s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-panels.is-closing .sp-panel::before {
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-panels.is-closing .sp-content {
    transition: opacity 0.55s ease-out, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Aufgeklappt: Icon + Label (pN_label) + Überschrift, alles zentriert */
.sp-panels .sp-content-top {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    text-align: center;
    width: 100%;
}
.sp-panels .sp-content-top .sp-content-label {
    display: block;
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-weight: 400;
    line-height: 1.35;
    max-width: 95%;
    margin: 0 0 10px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.sp-panels .sp-content-icon {
    font-size: 45px;
    filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
    margin-bottom: 10px;
    display: block;
    line-height: 1;
    text-align: center;
}
.sp-panels .sp-content-icon img.sp-panel-icon-img,
.sp-panels .sp-content-icon img {
    display: block;
    width: auto;
    max-width: 80px;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}
.sp-panels .sp-content-top h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 12px;
    width: 100%;
    max-width: 100%;
    text-align: left;
}
.sp-panels .sp-content-divider {
    border: none;
    border-top: 1px solid #fff;
    margin: 3rem 0 20px;
    width: 50%;
    max-width: 280px;
    opacity: 1;
    
}
/* Fließtext: weiß, linksbündig */
.sp-panels .sp-panel.active .sp-content-body {
    align-self: stretch;
    text-align: left;
    color: #fff;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 12px;
    max-width: none;
    width: 100%;
}
/* Desktop aufgeklappt: kein CTA */
.sp-panels .sp-panel.active .sp-btn,
.sp-panels .sp-panel.active a.sp-btn,
.sp-panels .sp-panel.active .sp-btn--static {
    display: none !important;
}
.sp-btn {
    display: inline-block;
    background: #1a5fb4;
    color: #fff;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    padding: 14px 28px;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}
a.sp-btn:hover {
    background: #2166c4;
    color: #fff;
}
.sp-btn--static {
    cursor: default;
    pointer-events: none;
}

/* Wenn ein Panel offen ist: Hover anderer Panels nicht verbreitern (kein Textspringen) */
.sp-panels.has-active .sp-panel:hover:not(.active) {
    flex: 1.08;
}

/* Kleines Performance-Tuning für weichere Motion */
.sp-panels .sp-panel,
.sp-panels .sp-bg,
.sp-panels .sp-content,
.sp-panels .sp-label {
    will-change: transform, opacity;
}
/* Mobile Accordion */
.sp-accordion {
    display: none;
}
.sp-acc-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}
.sp-acc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    cursor: pointer;
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 72px;
}
.sp-acc-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    transition: background 0.35s ease;
}
.sp-panel-accordion:not([class*="sp-overlay--"]) .sp-acc-header::before {
    background: rgba(10, 22, 40, 0.65);
}
.sp-panel-accordion.sp-overlay--default .sp-acc-header::before {
    background: rgba(10, 22, 40, 0.52);
}
.sp-panel-accordion.sp-overlay--light .sp-acc-header::before {
    background: rgba(10, 22, 40, 0.38);
}
.sp-panel-accordion.sp-overlay--dark .sp-acc-header::before {
    background: rgba(10, 22, 40, 0.72);
}
.sp-acc-header-icon {
    font-size: 20px;
    filter: brightness(0) invert(1);
    position: relative;
    z-index: 1;
    line-height: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.sp-acc-header-icon img.sp-panel-icon-img,
.sp-acc-header-icon img {
    display: block;
    width: 90%;
    max-width: 54px;
    height: auto;
    object-fit: contain;
}
.sp-acc-header-text {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    position: relative;
    z-index: 1;
    flex: 1;
}
.sp-acc-chevron {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 11px;
    transition: transform 0.3s;
}
.sp-acc-item.open .sp-acc-chevron {
    transform: rotate(180deg);
}
.sp-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #0f1e35;
}
.sp-acc-item.open .sp-acc-body {
    max-height: 480px;
}
.sp-acc-body-inner {
    padding: 24px 20px 28px;
}
.sp-acc-body-inner p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 18px;
}
.sp-acc-btn {
    display: inline-block;
    background: #1a5fb4;
    color: #fff;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}
a.sp-acc-btn:hover {
    background: #2166c4;
    color: #fff;
}
.sp-acc-btn--static {
    cursor: default;
    pointer-events: none;
}
@media (max-width: 700px) {
    .sp-panels {
        display: none;
    }
    .sp-accordion {
        display: block;
    }
}

.modul-banner .row1 { color: #fff !important; font-weight: 500; font-size: 1.2rem;}
/* .modul-banner .row2 { font-size: .9rem;} */

.num {
    font-size: clamp(3rem, 5vw, 6.71875rem);
    font-weight: 700;
    line-height: 0.8;
}

.txt {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.5px;
}

/* Lưới hàng dưới */
.grid-bottom {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
}

/* t32__text_klein: Kurztext-Overlay auf kleinem Bild */
.grid-bottom .info-box .card.small-img.position-relative .overlay .txt {
    font-size: 1rem;
    max-width: 18ch;
    line-height: 1.2;
}
.grid-bottom .info-box .card.small-img.position-relative.text_hl .overlay .txt {
    font-size: 1.5rem !important;
    max-width: inherit !important;
}
.description p {
    margin-top: 15px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #333;
}

.description a {
    color: #646363;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: bold;
    margin-left: 5px;
}
/*###*/

.stat-card-number {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-light);
    border: 1px solid #ddd;
}

.stat-card-dark {
    background: var(--color-secondary);
    border: none;
}

.stat-card-dark .stat-number,
.stat-card-dark .stat-label {
    color: var(--color-text-light);
}

.stat-card-yellow {
    background: var(--color-accent);
    border: none;
}

.stat-number {
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
}

.stat-label {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 5px;
}

.stat-card-image {
    background: #ccc;
}

.stats-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.stats-text-col p {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.8;
}


/* Brick t1__bildergalerie (Swiper + Fancybox) */
.modul-headline-text {
    --modul-headline-color: var(--color-primary);
    margin: 0 0 1.5rem;
}

.modul-headline-text__headline {
    color: var(--modul-headline-color);
    margin: 0 0 .5rem;
}

.modul-headline-text__text {
    color: #646363;
}

.bildergalerie-block {
    position: relative;
}

.bildergalerie__title {
    margin: 0 0 1rem;
}

.bildergalerie-swiper .swiper-slide {
    height: auto;
}

.bildergalerie-swiper .swiper-pagination-bullet {
    background: rgba(222, 220, 0, 0.45);
    opacity: 1;
}

.bildergalerie-swiper .swiper-pagination-bullet-active {
    background: var(--bg-gelb);
}

.bildergalerie-swiper .swiper-button-prev,
.bildergalerie-swiper .swiper-button-next {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 0 12px 12px 12px;
    background: var(--bg-gelb);
    border: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.bildergalerie-swiper .swiper-button-prev:hover,
.bildergalerie-swiper .swiper-button-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    background: var(--color-primary);
}
.bg-darkblue .bildergalerie-swiper .swiper-button-prev:hover,
.bg-darkblue .bildergalerie-swiper .swiper-button-next:hover {
    background: var(--petrol);
}

.bildergalerie-swiper .swiper-button-prev::after,
.bildergalerie-swiper .swiper-button-next::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
}

.bildergalerie-swiper .swiper-button-prev::after {
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 12px solid #fff;
    margin-left: -2px;
}

.bildergalerie-swiper .swiper-button-next::after {
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #fff;
    margin-right: -2px;
}

@media (max-width: 991.98px) {
    .bildergalerie-swiper .swiper-button-prev,
    .bildergalerie-swiper .swiper-button-next {
        display: none;
    }
}

/* Desktop bis 1350px: Pfeile sichtbar außerhalb des Sliders */
@media (min-width: 992px) and (max-width: 1350px) {
    .bildergalerie-swiper {
        overflow: visible;
    }
    .bildergalerie-swiper .swiper-button-prev {
        left: 10px;
    }
    .bildergalerie-swiper .swiper-button-next {
        right: 10px;
    }
}

/* Übergang 1351–1399px: ebenfalls außerhalb, ohne Sprung */
@media (min-width: 1351px) and (max-width: 1399px) {
    .bildergalerie-swiper {
        overflow: visible;
    }
    .bildergalerie-swiper .swiper-button-prev {
        left: -39px;
    }
    .bildergalerie-swiper .swiper-button-next {
        right: -39px;
    }
}

/* Große Desktops > 1400px: Pfeile weiter nach außen */
@media (min-width: 1400px) {
    .bildergalerie-swiper {
        overflow: visible;
    }
    .bildergalerie-swiper .swiper-button-prev {
        left: -50px;
    }
    .bildergalerie-swiper .swiper-button-next {
        right: -50px;
    }
}

.bildergalerie__link {
    display: block;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
}

.bildergalerie__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .45s ease;
}

.bildergalerie__link:hover .bildergalerie__img {
    transform: scale(1.03);
}

.bildergalerie__tooltip {
    --bg-tooltip: rgba(18, 24, 33, 0.88);
    --color-tooltip: #fff;
    --size-tooltip: 0.85rem;
    --lh-tooltip: 1.25;
    --pad-tooltip: 0.45rem 0.65rem;
    --radius-tooltip: 0.45rem;
    --offset-tooltip: 0.65rem;

    position: absolute;
    left: var(--offset-tooltip);
    right: var(--offset-tooltip);
    bottom: var(--offset-tooltip);
    padding: var(--pad-tooltip);
    border-radius: var(--radius-tooltip);
    background: var(--bg-tooltip);
    color: var(--color-tooltip);
    font-size: var(--size-tooltip);
    line-height: var(--lh-tooltip);
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 2;
}

.bildergalerie__link:hover .bildergalerie__tooltip,
.bildergalerie__link:focus-visible .bildergalerie__tooltip {
    opacity: 1;
    transform: translateY(0);
}


/* Branchen Section */
.branchen-section {
    /* background:#949288;
    padding:2.3rem 0 1.5rem; */
}
    .branchen-section h1,
    .branchen-section h2,
    .branchen-section h3,
    .branchen-section h4,
    .branchen-section h5,
    .branchen-section h6,
    .branchen-section p,
    .branchen-section span,
    .branchen-section a,
    .branchen-section li {
        color: #fff !important;
    }
    .branchen-section a:hover {
        color: var(--bg-gelb) !important;
    }

.dienstleistung-section h2, 
.section-label {
    font-size: 1.59375rem;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom:2rem;
    color:#E0E3DD;
    text-transform: uppercase;
}

.branchen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:6.625rem;
}

.branchen-card {
    position: relative;
    overflow: hidden;
}
.branchen-card .wap_img{
    position:relative;
    /* height: 19.32888rem; */
    height: 30vw;
    /* border-radius:0 1.375rem 1.375rem 1.375rem; */
    overflow: hidden;
}
.branchen-card .wap_img::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
  }
 
.branchen-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.branchen-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); */
}

.branchen-content {
    position: absolute;
    bottom:1.7rem;
    left:0;
    right:0;
}

.branchen-content .container {
    max-width: var(--bs-container-lg, 1140px);
    margin: 0 auto;
}

.branchen-content h3 {
    color: #FFF;
    font-size: 1.59375rem;
    font-weight: 700;
    line-height: 2.1875rem; /* 137.255% */
    letter-spacing: -0.06225rem;
}

.branchen-text {
    padding-top:.88rem;
}

.branchen-text-col p {
    font-size: 0.875rem;
    letter-spacing: -0.02819rem;
    line-height: 1.25rem;
}
.branchen-text-col p a{
    color:#fff;
    font-weight:bold;
}
.branchen-headline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; */
    padding: 1.5rem 0 0;
    z-index: 9;
}
.big-grid h3 {
    margin-bottom: 1rem;
}
/* Dienstleistung Section */
.dienstleistung-section {
    background: var(--color-bg-dark);
    padding: 40px 0;
}

.dienstleistung-section h2, 
.dienstleistung-section .section-label {
    color: rgba(255,255,255,0.6);
}

.service-card {
    display: block;
    position: relative;
    height: 40.5rem;
    border-radius:0 3rem 3rem 3rem;
    overflow: hidden;
    margin-bottom:2.875rem;
}

.service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:all .8s;
}
.service-card:hover img{
    transform: scale(1.07);
}
/* Modul-Video: gleiches Framing wie Bild + Zoom bei Hover innerhalb des Rahmens */
.service-card video.modul-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1);
    will-change: transform;
}
.service-card:hover video.modul-video {
    transform: scale(1.11);
}
.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(to top, rgba(26, 58, 92, 0.9), rgba(26, 58, 92, 0.3));*/
}

.service-content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.service-content h3 {
    color: var(--color-text-light);
    font-size: 2.8125rem;
    font-weight:700;
    letter-spacing: -0.10713rem;
}

.service-card .play-btn {
    position: absolute;
    top:2.94rem;
    right:3.91rem;
    bottom:auto;
}


/* Banner Section */
.modul-banner {
    padding:3.18rem 0 0;
    display: inline-block;
}
.modul-banner-svg {
    padding:1.18rem 0 0;
    display: inline-block;
}
.banner-green2 .modul-banner,
.engineering-banner .modul-banner,
.project-text-banner .modul-banner {
    padding: 0;
}
.modul-banner h2,
.modul-banner .section-label {
    color: #001D49;
}
.modul-banner--1-3 {
    padding:3.18rem 0 0;
}
.modul-banner-grid--1-3-1-3-1-3 .modul-banner--1-3 {
    padding:.5rem 0 0;
}
.modul-banner .card {
    height: 12.5rem;
}
.modul-banner-grid--1-3-1-3-1-3 .modul-banner .card {
    height: 10rem;
}
.modul-banner-svg .card {
    height: 8rem;
}
.project-text-banner .card {
    height: 10rem;
}
.banner-green2 .card {
    height: 10rem !important;
}
.engineering-banner .card {
    height: 12rem !important;
}
/* Modul-Banner Grid-Wrapper (start/end per Checkbox in jedem Banner) */
.modul-banner-grid{
    display: grid;
    gap: 2rem;
    align-items: start;
}
.large-grid {
    gap: 4rem;
}
.project-text-banner .modul-banner-grid,
.engineering-banner .modul-banner-grid{
    display: grid;
    gap: 2rem 3rem;
    align-items: start;
}
.modul-banner .card img {
    /* border-radius: 0 .875rem .875rem .875rem; */
    height: 100%;
}
/* Layout-Varianten (werden über wrap_mode gesetzt) */
.modul-banner-grid--1-3-2-3{ grid-template-columns: 1fr 2fr; }
.modul-banner-grid--2-3-1-3{ grid-template-columns: 2fr 1fr; }
.modul-banner-grid--1-3-1-3-1-3{ grid-template-columns: 1fr 1fr 1fr; }
.modul-banner-grid--1-2-1-2{ grid-template-columns: 1fr 1fr; }
.modul-banner-grid--1-4-1-4-1-4-1-4{ grid-template-columns: repeat(4, 1fr); }
.modul-banner-grid--1-4-3-4{ grid-template-columns: 1fr 3fr; }
.modul-banner-grid--3-4-1-4{ grid-template-columns: 3fr 1fr; }

.engineering-banner .modul-banner--2-3 { grid-column: 2 / 4; }
.lightbox { 
    border-radius: 0 2rem 2rem 2rem;
    overflow: hidden;
    margin: 2rem 0;
}
ul.linien-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.linien-liste li {
    position: relative;
    padding-left: 0;
    margin-bottom: 0.5rem;
}
ul.linien-liste li::after {
    content: '';
    display: block;
    width: 25%;
    max-width: 100%;
    height: 1px;
    background: var(--bg-gelb);
    margin-top: 2px;
}
ul.linien-liste li:last-child::after {
    display: none;
}


.modul-banner-svg .card .img-svg-banner{
    display: block;
    margin-left: auto;
    padding-right: 1.5rem;
}
.modul-banner-svg .txt {
    font-size: 1.4rem;
    letter-spacing: normal;
    line-height: 1.3;
}

.teaser-engineering {
    padding-top: 3rem !important;
}
.teaser-karriere {
    padding: 0 0 22rem 0 !important;
}
.image-sizer {
    display: block;
    height: 18vw;
}
.header-einkauf,
.branche-img {
    display: flex;
    align-items: flex-end;
    width: 100%;
    /* Für dein 1920x508-Format: Höhe = Breite * (508/1920) */
    aspect-ratio: 1920 / 500;

    /* Wenn hier ein Background-Image drauf liegt */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Text im unteren Bereich der Hero/Branchen-Section platzieren */
.branche-img h1 {
    /* überschreibt globales h1 padding-top, damit es unten ankommt */
    padding: 0;
    margin: 0;
    color: #fff;
}
.header-einkauf img {

}
.dienstleistung-img {
    display: flex;
    align-items: flex-end;
    width: 100%;
    /* Für dein 1920x508-Format: Höhe = Breite * (508/1920) */
    aspect-ratio: 1920 / 500;

    /* Wenn hier ein Background-Image drauf liegt */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
}
.dienstleistung-img h1 {
    /* überschreibt globales h1 padding-top, damit es unten ankommt */
    padding: 0;
    margin: 0;
    color: #fff;
}


/* Responsive Preset für Banner-Grids */
@media (max-width: 991px){
	.modul-banner-grid{
		/* grid-template-columns: 1fr !important; */
		gap: 1rem;
	}
	.modul-banner{
		width: 100%;
	}
}
@media (max-width: 767px){
	.modul-banner-grid{
		grid-template-columns: 1fr !important;
		gap: 1rem;
	}
	.modul-banner{
		width: 100%;
	}
}

/* Contact Bar */
.contact-bar {
    background: var(--color-bg-light);
    padding:4rem 0;
}

.contact-items {
    display: flex;
    gap:4.75rem;
}

.contact-item {
    display: flex;
    align-items: center;
    height:4.625rem;
    padding:0 1.2rem;
    gap:1.12rem;
    text-decoration: none;
    color:#001D49;
    font-weight:400;
    background-color:#F7AD00;
    border-radius:0 0.875rem 0.875rem 0.875rem;
    transition: .5s;
}
.contact-item:hover {
    background-color: var(--bg-gray);
    transition: .5s;
}
.contact-item .txt1{
    color: #001D49;
    font-size: 0.76875rem;
    font-weight: 700;
    line-height: 1.0625rem; /* 138.211% */
    letter-spacing: 0.003rem;
}
.contact-item .txt2{
    color: #001D49;
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.875rem; /* 136.364% */
}
/* Intro Section */
.intro-section {
    background: var(--color-bg-light);
    padding:3.18rem 0 0;
}
h2,
.intro-title {
    color: #001D49;
    font-size: 2.6875rem;
    font-weight: 300;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.intro-text {
    color: #001D49;
    font-size: 1.5625rem;
    font-style: normal;
    line-height: 2.1875rem; /* 140% */
    letter-spacing: -0.04956rem;
}

/* Concept Section */
.concept-section {
    background:#00294D;
    padding: 60px 0;
}

.concept-grid {
    display: grid;
    grid-template-columns: 2.75fr 1fr;
    gap:9.5rem;
    margin-bottom:3.7rem;
}
.pb-4 .concept-grid {
    margin-bottom:0;
}
.concept-text p {
    color: #0083A0;
    font-size: 1.5625rem;
    font-weight: 700;
    line-height: 2.1875rem; /* 140% */
    letter-spacing: -0.04956rem;
}

.concept-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo-icon-large {
    width: 50px;
    height: 50px;
    background: var(--color-accent);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 24px;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.logo-text-block {
    display: flex;
    flex-direction: column;
}

.logo-main {
    color: var(--color-text-light);
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
}

.logo-sub {
    color: var(--color-text-light);
    font-size: 14px;
    font-weight: 400;
    opacity: 0.8;
}

.logo-tagline {
    color: rgba(255,255,255,0.6);
    font-size: 11px;
    letter-spacing: 1px;
    margin-top: 5px;
}

.concept-image {
    position: relative;
    height: 40.59894rem;
    border-radius:0 3rem 3rem 0;
    overflow: hidden;
}

.concept-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.concept-image .play-btn {
    position: absolute;
    bottom:3.48rem;
    right:3.6rem;
}

/* Individual Section */
.individual-section {
    background:#666881;
    padding:3.5rem 0 6rem;
}

.individual-grid {
    display: grid;
    grid-template-columns: 2.75fr 1fr;
    gap: 9.5rem;
    margin-bottom: 3.7rem;
}

.individual-text .highlight {
    color: #DEDC00;
    font-size: 1.5625rem;
    font-weight: 700;
    line-height: 2rem;
    letter-spacing: -0.04956rem;
    margin-bottom: .88rem;
}

.individual-text p {
    color: #FFF;
    font-size: 1.5625rem;
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: -0.04425rem;
}

.individual-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo-icon-large.pink {
    background: var(--pink);
    color: white;
}

.individual-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:4.25rem;
}

.feature-box {
    height: 12.5rem;
    background: rgba(255,255,255,0.1);
    border-radius:0 0.875rem 0.875rem 0.875rem;
    object-fit: cover;
}

/* Footer Contact */
.footer-contact {
    background:#fff;
    padding:1.68rem 0 3.43rem;
}
.footer-contact .contact-item{
    background-color:#E0E3DD;
}
.footer-contact .contact-item:hover {
    background-color: var(--bg-gelb);
    transition: .5s;
}
.footer-contact .txt_bottom{
    color: #E0E3DD;
    font-size: 1.59375rem;
    line-height:0.7;
    font-weight: 400;
    letter-spacing: -0.056rem;
    bottom:0;
}
/* Footer */
.footer {
    background:#E0E3DD;
    padding:1.6rem 0 6.6rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 40px;
}

.footer-col h5 {
    color: #646363;
    font-size: 0.76875rem;
    font-weight: 700;
    line-height: 1.0625rem; /* 138.211% */
    margin-bottom:0;
}

.footer-col h5:first-child {
    margin-top: 0;
}
.footer-col{
    gap:1.15rem;
}
footer .nav-link,
footer p {
    color: #646363;
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.1rem;
    text-transform: none;
}
footer .nav-link {
    margin-bottom:0;
    line-height: 1.4rem;
}

.footer-col ul {
    list-style: none;
    margin-left: 0;
    padding-left:0;
    margin-bottom:0;
}

.footer-col li {
    color: #646363;
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.375rem; /* 138.365% */
}
.footer-col-item{
    display: flex;
    gap:1.3rem;
}
/*page2*/
.section_shadow{
    background-image:url("../images/shadow_section.png");
    background-size:100% 4.9375rem;
    background-position: left top;
    background-repeat: no-repeat;
}
/* Hero Section */
.hero_section {
    position: relative;
    overflow: hidden;
    background-image: var(--bg);
    background-position:center top;
    background-size:cover;
}
.hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.4);
}

.hero__content {
    position: relative;
    z-index: 10;
    height:25.1875rem;
    padding-top:2.3125rem;
}

.hero__title {
    color: #FFF;
    font-size: 2.8125rem;
    font-weight: 700;
    line-height: 3.875rem; /* 137.778% */
    letter-spacing: -0.10988rem;
}

/* Intro Section */
.intro {
    padding:0 0 5.375rem;
    color: var(--color-text-light);
}

.intro__highlight {
    color: #F7AD00;
    font-size: 1.5625rem;
    font-weight: 600;
    line-height: 2rem;
    letter-spacing: -0.04956rem;
    margin-bottom:1.29rem;
}

.intro__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:0 4.16rem;
    margin-bottom:3.31rem;
}

.intro__col {
    color: #FFF;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem; /* 142.857% */
    letter-spacing: -0.03075rem;
}

/* Mehrspaltiger Einleitungstext (Template 33) */
.intro__grid--multicol {
    column-count: 3;
    column-gap: 4.16rem;
}

.intro__grid--multicol p {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:2.75rem 4.16rem;
}

.feature-card {
    background:#445060;
    padding:.67rem 1.25rem 1.45rem;
    border-radius:0 .87rem .875rem .875rem;
}

.feature-card__title {
    color: #FFF;
    font-size: 1.5625rem;
    font-weight: 600;
    line-height: 1.875rem;
    letter-spacing: -0.06406rem;
    margin-bottom: .31rem;
}

.feature-card__subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5625rem;
    letter-spacing: -0.05125rem;
}

/* Engineering Section */
.engineering {
    background-color:#00294d;
    padding:1.5rem 0 4rem;
    color: var(--color-text-light);
}

.section-header {
    display: grid;
    grid-template-columns: 1fr 2.2fr;
    gap:4.16rem;
    margin-bottom:1.75rem;
}
.section-header__text {
    /*flex: 0 0 250px;*/
}

.section-header__title {
    color: #FFF;
    font-size: 2.8125rem;
    font-weight: 700;
    line-height:137.778%;
    letter-spacing: -0.11538rem;
    margin-bottom:.58rem;
}

.section-header__subtitle {
    color: #FFF;
    font-size: 1.5625rem;
    font-weight: 700;
    line-height: 2.1875rem; /* 140% */
    letter-spacing: -0.06406rem;
}

.section-header__image {
    flex: 1;
    border-radius:0 .875rem .875rem .875rem;
    overflow: hidden;
}

.section-header__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-desc {
    color: #949288;
    font-size: 1.5625rem;
    font-weight: 600;
    line-height: 2.1875rem; /* 140% */
    letter-spacing: -0.05113rem;
    margin-bottom:2.87rem;
}

.services-title {
    color: #949288;
    font-size: 1.59375rem;
    font-weight: 400;
    line-height: 2.1875rem; /* 137.255% */
    letter-spacing: -0.07469rem;
    margin-bottom:3.33rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.58rem 4.31rem;
    margin-bottom:1rem;
}

.service-card2 {
    border-radius:0 .875rem .875rem .875rem;
    overflow: hidden;
    min-height:12.5rem;
    position:relative;
    display: grid;
    align-items: end;
}
.service-card2-content{
    padding:.88rem 1.36rem;
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
}
.service-card2-img img{
    width:100%;
    transition:all .8s;
}
.service-card2:hover .service-card2-img img{
    transform: scale(1.07);
}
.service-card--red {
    background: var(--color-red);
}
.service-card__title {
    color: #FFF;
    font-size: 1.5625rem;
    font-weight: 600;
    line-height: 2.1875rem; /* 140% */
    letter-spacing: -0.06406rem;
    transition:all .3s;
}
.service-card2:hover .service-card__title{
    opacity:0;
}
.contact-bar {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

.contact-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s;
}

.contact-btn--email {
    background: var(--color-accent);
}

.contact-btn--phone {
    background: var(--color-accent);
}

.contact-btn:hover {
    opacity: 0.9;
}

.contact-btn i {
    width: 16px;
    height: 16px;
}

/* Project Management Section */
.project-mgmt {
}

/* IT Security Section */
.it-security {
    padding:3.75rem 0 6rem;
    background-color: #00294d;
}

.it-security__title {
    color:rgba(222, 220, 0, .3);
    font-size: 10rem;
    font-weight: 700;
    line-height:1.25;
    letter-spacing: -0.42969rem;
    margin-bottom:1.09rem;
    height:12.5rem;
    padding:0 2.73rem;
    background-image:var(--bg);
    background-size:cover;
    border-radius:0 .875rem .875rem .875rem;
}

.it-security__grid,.production__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.58rem 4.31rem;
}

.it-security__col{
    color: #FFF;
    font-size: 0.875rem;
    font-weight: 400;
    line-height:142.857%;
    letter-spacing: -0.02819rem;
}
.it-security__col.txt1,.production__col.txt1{
    color: #949288;
    font-size: 1.5625rem;
    font-weight: 600;
    line-height:140%;
    letter-spacing: -0.04881rem;
}
/* Production Section */
.production {
    background:#939188;
    padding:3rem 0 4rem;
}

.production__title {
    color: #FFF;
    font-size: 2.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3.875rem; /* 137.778% */
    letter-spacing: -0.10713rem;
    margin-bottom:2.25rem;
}

.production__image {
    position: relative;
    width: 100%;
    border-radius:0 3rem 3rem 3rem;
    overflow: hidden;
    margin-bottom:1rem;
}

.production__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:all .8s;
}
.production__image:hover img{
    transform: scale(1.07);
}
.production__image .play-btn{
    right:4rem;
    top:2.5rem;
    bottom: auto;
}

.production__grid {
}

.production__col {
    color: #FFF;
    font-size: 1.5625rem;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.04731rem;
}
.production__col.txt1{
    color: #fff;
}
/* Quality Section */
.quality {
    background-color: #939188;
}

.quality__title {}

.quality__grid {
}

.quality__col {}
.quality__col.it-security__col.txt1{
    color:#006885;
}
/* Logistics Section */
.logistics {
    background-color: #939188;
}

.logistics__title {
    font-size: 48px;
    font-weight: 300;
    color: var(--color-accent);
    margin-bottom: 40px;
}

.logistics__grid {

}

.logistics__col.it-security__col.txt1{
    color: #445060;
}

/* Validation Section */
.validation {
    background: #c6c5bb;
    padding: 3rem 0 4rem;
}

.validation__title {
    color: #001D49;
    font-size: 2.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3.875rem;
    letter-spacing: -0.10713rem;
    margin-bottom: 2.25rem;
}

.validation__image {
}

.validation__image img {
}
/*page2*/
/*contact*/
/* Main Content */
.main-content {
    padding: 40px 0;
    background-color:#c6c5bb;
    background-image:url("../images/contact_bg.png");
    background-size:120rem auto;
    background-position:top center;
}
.contact-title{
    color: #001D49;
    font-size: 2.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 137.778%;
    letter-spacing: -0.11538rem;
}
.content-grid {
    display: grid;
    grid-template-columns:1.98fr 1fr;
    gap:7rem 3rem;
}

/* Left Column */
.intro-section {
    margin-bottom: 30px;
}

.section-title {
    color: #646363;
    font-size: 1.5625rem;
    font-weight: 700;
    line-height: 2.1875rem; /* 140% */
    letter-spacing: -0.06713rem;
    margin-bottom:1rem;
}

.intro-text {
    color: #646363;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.375rem; /* 137.5% */
    /* letter-spacing: -0.03225rem; */
    margin-bottom:2rem;
}

.sub-title {
    color: #001D49;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem; /* 140% */
    letter-spacing: -0.04881rem;
    margin-bottom:1.8rem;
}

.contact-box {
    background-color:#DEDC00;
    padding:2rem;
    border-radius:0 .875rem .875rem .875rem;
    display: flex;
    gap:3.73rem;
    align-items: flex-start;
}

.fingerprint-icon {
    flex-shrink: 0;
}

.fingerprint-icon img {
    width:7.8125rem;
}

.contact-info {
    font-size:1rem;
    color:#666881;
    line-height:137.5%;
}
.contact-info p{
    margin-bottom:1rem;
}
.contact-label {
    margin-bottom:1rem;
}

.contact-company {
    font-weight: 700;
}

.contact-dept {
    font-weight: 700;
}

.contact-address {
    margin: 5px 0;
    line-height: 1.5;
}

.contact-email {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}

/* Right Column */
.jobs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.jobs-title {
    color: #646363;
    font-size: 1.5625rem;
    font-weight: 700;
    line-height:140%;
    letter-spacing: -0.07325rem;
}

.jobs-notice {
    background-color: var(--accent-coral);
    color: var(--white);
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.4;
    max-width: 180px;
}

.job-categories {
    margin-bottom:1.875rem;
}

.job-category {
    margin-bottom:2rem;
}

.category-title {
    color: #BA4E97;
    font-size: 1rem;
    font-weight: 700;
    line-height:137.5% ;
    letter-spacing: -0.03906rem;
}

.job-list {
    list-style: none;
    padding-left:0;
}

.job-list li {
    padding:.5rem 0;
    display: flex;
    align-items: start;
    gap:1.25rem;
    color: #001D49;
    font-size: 1rem;
    line-height:137.5%;
    letter-spacing: -0.03319rem;
}

.job-list li i {
    color: #DD685C;
    font-size: 1.25rem;
    font-weight: 800;
    line-height:140%;
    letter-spacing: -0.625rem;

}

.promo-image {
    position: relative;
    width: 100%;
    max-width: 300px;
}

.promo-image img {
    width: 100%;
    border-radius: 4px;
}

.promo-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background-color: var(--accent-coral);
    color: var(--white);
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* Contact Section */
.contact-section {
    background-color: #c8b8b8;
    padding: 40px 0;
}

.contact-section-title {
    color: #445060;
    font-size: 1.5625rem;
    font-weight: 400;
    line-height:140%;
    letter-spacing: -0.04575rem;
    margin-bottom:1.333rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:27.4rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-input {
    padding:.5rem 1rem;
    border: none;
    border-radius:0 .875rem .875rem .875rem;
    background-color:#fff;
    color: #646363;
    font-size: 0.76875rem;
    font-weight: 400;
    line-height: 1.0625rem; /* 138.211% */
}

.form-input::placeholder {
    color:#646363;
    font-size: 10px;
}
.form-input.form-input{
    height:2.0625rem;
}
.form-row {
    display: flex;
    gap: 15px;
}

.form-textarea {
    flex: 1;
    padding:.5rem 1rem;
    border: none;
    border-radius:0 .875rem .875rem .875rem;
    font-size: 0.76875rem;
    font-weight: 400;
    line-height: 1.0625rem; /* 138.211% */
    background-color:#fff;
    min-height: 120px;
    resize: vertical;
    color:#646363;
    outline:none!important;
}

.form-textarea::placeholder {
    font-size: 0.76875rem !important;
}

.form-control {
    background-color: #fff;
    border-radius: 0 .875rem .875rem .875rem;
    margin-bottom: .5rem;
}
.submit-btn {
    background-color: #8c8487;
    border: none;
    padding: 8px 20px;
    border-radius:0 .875rem .875rem .875rem;
    cursor: pointer;
    align-self: flex-start;
    margin-top: 10px;
    color: #FFF;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem; /* 142.857% */
}
.btn {
    border-radius: 0 .875rem .875rem .875rem;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    transition: .5s;
    border: none;
}
.btn-info {
    background-color: #949287;
    color: #fff;
}
.btn-info:hover {
    background-color: var(--color-primary);
    color: #fff;
    transition: .5s;
}
.btn-success {
    background-color: transparent;
    border: 1px solid var(--bg-darkgray);
    color: var(--bg-darkgray);
    transition: .5s;
}
.btn-success:hover {
    background-color: var(--bg-darkgray);
    color: #fff;
    transition: .5s;
}
.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.alert.hide {
    display: none; transition: .5s;
}
.contact-method {
    background-color: #8a7a8a;
    padding: 15px 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.contact-methods .contact-item{
    background-color: #957181;

}
.contact-methods .contact-item .txt1,.contact-methods .contact-item .txt2{
    color:#fff;
}
.contact-methods img{
    filter: grayscale(100%) invert(100%);
}

.alert-primary {
    --bs-alert-color: var(--color-primary);
    --bs-alert-bg: var(--bg-light);
    --bs-alert-border-color: var(--bg-light);
    --bs-alert-link-color: var(--bg-light);
}

.method-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    flex-shrink: 0;
}

.method-icon i {
    width: 20px;
    height: 20px;
}

.method-info {
    display: flex;
    flex-direction: column;
    color: var(--white);
}

.method-label {
    font-size: 9px;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.method-value {
    font-size: 14px;
    font-weight: 500;
}
.intro-section {
    margin-bottom: 30px;
}
.contact{}
.search_wap{
    width:6rem;
    direction: rtl;
}
.search_form{
    width: fit-content;
}

.bg-color {
    padding: 4rem 0;
}
.pt-0.bg-color, .pt-2.bg-color {
    padding: 0 0 4rem;
}
/*contact*/
.dropdown-menu-dark{
    --bs-dropdown-bg:rgba(100, 99, 99,.5);
    --bs-dropdown-border-radius:0;
    --bs-dropdown-border-width:0;
    --bs-dropdown-item-padding-y:.5rem;
}
.dropdown-header,
.dropdown-menu-dark .dropdown-item{
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.125rem;
    color:#fff;
}
.dropdown-item-lv2{
    list-style:none;
    margin-left: 1rem;
    font-weight: 400 !important;
}
.dropdown-menu-dark ul.lv2 .dropdown-item{
    font-weight: 400;
}


/* Textfarben auf bg farben invertieren */
.bg-gray p,
.bg-gray h1,
.bg-gray h2,
.bg-gray h3,
.bg-gray h4,
.bg-gray h5,
.bg-gray h6,
.bg-gray a,
.bg-gray span,
.bg-gray li,
.bg-gray ul,
.bg-gray ol,
.bg-gray blockquote,
.bg-gray code,
.bg-gray pre,
.bg-gray table,
.bg-gray th
{
    color: #fff!important;
}

h2.blue {
    color: var(--bg-blue) !important;
}
h2.darkblue {
    color: var(--bg-darkblue) !important;
}
h2.gray {
    color: var(--bg-gray) !important;
}
h2.steelblue {
    color: var(--bg-steelblue) !important;
}
h2.gelb {
    color: var(--bg-gelb) !important;
}

.bg-midgray h3 {
    color: var(--bg-darkgray) !important;
}
.bg-midgray h5,
.bg-midgray h6,
.bg-midgray p,
.bg-midgray li,
.bg-midgray span {
    color: var(--green2) !important;
}

p.modul-banner-cta__text {
    color: #fff !important;
}

.text-blau p,
.text-blau h2,
.text-blau h3,
.text-blau h4,
.text-blau h5,
.text-blau h1 {
    color: var(--color-primary) !important;
}
.text-darkgray p,
.text-darkgray h2,
.text-darkgray h3,
.text-darkgray h5,
.text-darkgray h6 {
    color: var(--darkgray) !important;
}
.bg-darkblue p,
.bg-darkblue h2,
.bg-darkblue h3,
.bg-darkblue h4,
.bg-darkblue h5,
.bg-darkblue h6 {
    color: var(--text-blue) !important;
}
.bg-darkblue label {
    color: #fff !important;
}
.bg-darkblue .btn-info {
    background: var(--bg-gelb) !important; 
    color: var(--color-primary) !important;
}
.text-gelb p,
.text-gelb h2,
.text-gelb h3,
.text-gelb h4,
.text-gelb h5,
.text-gelb h6,
.text-gelb a,
.text-gelb span,
.bg-steelblue p,
.bg-steelblue h2,
.bg-steelblue h3,
.bg-steelblue h4,
.bg-steelblue h5,
.bg-steelblue h6 {
    color: var(--bg-gelb)   !important;
}
.text-orange p,
.text-orange a,
.text-orange h3,
.text-orange h4,
.text-orange h5,
.text-orange h6 {
    color: var(--bg-orange) !important;
}
.bg-darkgray p,
.bg-darkgray a,
.bg-petrol p,
.bg-petrol a,
.bg-petrol h2,
.bg-gray p,
.bg-gray h2,
.bg-gray h3,
.bg-gray h4,
.bg-gray h5,
.bg-gray li,
.bg-gray span,
.header-einkauf h1,
.text-weiss,
.text-weiss a,
.text-weiss p,
.text-weiss li,
.headline-weiss li,
.headline-weiss h2,
.headline-weiss h3,
.headline-weiss h1,
h3.weiss {
    color: #fff !important;
}
.bg-darkgray h6,
.bg-darkgray a:hover,
.bg-petrol a:hover,
.text-weiss a:hover {
    color: var(--bg-gelb) !important;
}

.text--midgray p,
.text--midgray h4 {
    color: var(--bg-midgray) !important;
}
h3.weiss.thin {
    font-weight: 300;
}
.bg-darkblue .headline-text__text,
.bg-darkblue h3.modul-headline-text__headline,
.banner-green2 .card .row2,
.card span {
    color: #fff !important;
}
.sp-content-icon,
.sp-content-body,
.sp-panels .sp-content h3,
span.sp-label-text,
.sp-acc-body-inner p,
span.sp-acc-header-text,
span.sp-acc-chevron,
.sp-panels .sp-content-top .sp-content-label,
.sp-panels .sp-panel.active .sp-content-body {
    color: #fff !important;
}

.text-darkblue p,
.text-darkblue a,
h2.darkblue {
    color: var(--bg-darkblue) !important;
}
.bg-midgray .fliesstext-gross2,
.bg-midgray .fliesstext-gross {
    color: var(--stahlblau) !important;
}
.h2-weiss h2 {
    color: #fff !important;
}

.pg30 h2,
.pg6 h2 {
    color: var(--darkgray) !important;
    font-size: 1.25rem;
}
.pg30 p + h2,
.pg6 p + h2 {
    margin-top: 2rem;
}
.bg-darkgray h6 { font-size: 1.1rem; line-height: 1.3; }
/* strong/b in .text-weiss-Bereichen: explizit gelb (nach Komma war kein Selektor → Regel ungültig) */
.bg-petrol h3,
.text-bold-gelb strong {
    color: var(--bg-gelb) !important;
}
.bg-petrol p + h3 { 
    margin-top: 2rem;
}
.bg-petrol h3 {
    font-size: 1.25rem;;
}
.text-bold-gelb b {
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

.modul-headline-text__headline {
    background: var(--bg-steelblue);
    border-radius: 0 12px 12px 12px;
    padding: 10px 20px;
    margin-bottom: .5rem;
}
.karriere b { color: var(--pink) !important; text-transform: uppercase; font-weight: 600; }
.karriere ul {
    padding-left: 0;;
}
    .karriere li {
    list-style: none !important;
    position: relative;
    padding-left: 1.1em; /* Platz für Pfeil */
}
/* Pfeil vor jedem Listenpunkt (auch bei mehrzeiligem Link-Text oben ausgerichtet) */
.karriere li::before {
    content: '>';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-red);
    font-weight: 700;
    line-height: inherit;
}
.karriere li a { color: var(--color-primary) !important; }

.map-container {
    height: 50vh;
    min-height: 250px;
}

.icon-file::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 34' fill='none'%3E%3Cpath d='M0 0 L15 0 L24 9 L24 34 L0 34 Z' stroke='%23646363' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M15 0 L15 9 L24 9' stroke='%23646363' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
  }
  .icon-file:hover::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 34' fill='none'%3E%3Cpath d='M0 0 L15 0 L24 9 L24 34 L0 34 Z' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M15 0 L15 9 L24 9' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
  }

/* Download-Link: Icon über Text (wie Design), Limette + weißer Text */
.btn-icon.icon-file {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  /* max-width: 12rem; */
  text-decoration: none;
  color: #fff;
  font-weight: 400;
  line-height: 1.5;
}
.btn-icon.icon-file:hover {
  color: #fff;
  opacity: 0.92;
}
.btn-icon.icon-file::before {
  margin-right: 0;
  width: 2rem;
  height: 2.75rem;
  flex-shrink: 0;
  vertical-align: top;
  /* gleiche Form, Strichfarbe Limette (--bg-gelb) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 34' fill='none'%3E%3Cpath d='M0 0 L15 0 L24 9 L24 34 L0 34 Z' stroke='%23DEDC00' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M15 0 L15 9 L24 9' stroke='%23DEDC00' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.btn-icon.icon-file:hover::before {
  margin-right: 0;
  width: 2rem;
  height: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 34' fill='none'%3E%3Cpath d='M0 0 L15 0 L24 9 L24 34 L0 34 Z' stroke='%23f0f080' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M15 0 L15 9 L24 9' stroke='%23f0f080' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* CTA-Variante: Icon links, Text rechts (ohne Basis-Klassen zu ändern) */
.btn-cta.btn-icon.icon-file {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  margin-bottom: 2rem;
}

.btn-cta.btn-icon.icon-file::before,
.btn-cta.btn-icon.icon-file:hover::before {
  margin-right: 0;
  flex: 0 0 2rem;
}

.kennzahlen {
    display: block;
    height: calc(100vw / 4);
    max-height: 22.5rem;
}
/* Responsive */
@media (max-width:991.98px) {
    .offcanvas-end{
        --bs-nav-link-padding-y:.5rem;
        --bs-nav-link-padding-x:0;
    }
    .dropdown-menu-dark{
        --bs-dropdown-bg: rgba(100, 99, 99, .95);
    }
    .logo img{
        height:1.5rem;
    }
    .main-nav {
        display: none;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .stat-card-large {
        grid-row: span 1;
        grid-column: span 2;
        height: 250px;
    }

    .branchen-grid,
    .stats-text,
    .branchen-text,
    .concept-grid,
    .individual-grid,
    .footer-grid {
        /* grid-template-columns: 1fr; */
        gap:2rem;
    }

    .individual-features {
        grid-template-columns: 1fr;
    }

    .hero-title {
        font-size: 28px;
    }
    .grid-top{
        /* grid-template-columns:1fr; */
        gap:1rem;
        margin-left: 15px;

    }
    .main-video{
        height:12.5rem;
    }
    .grid-bottom{
        grid-template-columns:1fr;
        gap:2rem;
    }
    .branchen-grid{
        grid-template-columns:1fr;
        gap:2rem;
    }
    .branchen-card .wap_img{
        height:13.125rem;
    }
    .service-card{
        height:12.5rem;
        border-radius:0 1.5rem 1.5rem 1.5rem;
    }
    .service-content h3{
        font-size: 1.8125rem;
        line-height:normal;
    }
    .service-card .play-btn{
        top:1rem;
        right:1rem;
    }
    .contact-items{
        display: grid;
        gap:1rem;
    }
    .concept-image{
        height:12.5rem;
    }
    .concept-image .play-btn{
        bottom:1rem;
        right: 1rem;
    }
    .intro-title{
        font-size:2.15rem;
        line-height:inherit;
    }
    .concept-text p,.intro-text,.individual-text .highlight,.individual-text p{
        font-size:1.25rem;
        line-height:inherit;
    }
    .individual-features{
        gap: 2rem;
    }
    /*page2*/
    .hero__title {
        font-size:2.25rem;
        line-height:normal;
    }

    .intro__grid,
    .features,
    .services-grid,
    .it-security__grid,
    .production__grid,
    .quality__grid,
    .logistics__grid {
        grid-template-columns: 1fr;
        gap: 1.58rem 4.31rem;
    }

    .section-header {
        flex-direction: column;
        grid-template-columns: 1fr;
        gap: 1.16rem;
    }

    .section-header__text {
        flex: none;
    }

    .contact-bar {
        flex-direction: column;
    }
    .service-card2{
        min-height:auto;
    }
    .production__title,.validation__title{
        font-size: 1.8125rem;
    }
    .it-security__title{
        display:grid;
        align-items:center;
        letter-spacing:normal;
        font-size:2rem;
        height: 4.5rem;
        padding: 0 1rem;
    }
    .branchen-content{
        left:2rem;
    }
    .branchen-content h3{
        font-size:1.275rem;
    }
    .intro-title{
        font-size: calc(2.15rem / 1.25);
    }
    .section-header__title{
        font-size:2.25rem;
    }
    .section-header__subtitle{
        font-size:1.25rem;
        line-height:normal;
    }
    .section-desc{
        font-size:1.25rem;
        line-height:normal;
    }
    .it-security__col.txt1, .production__col.txt1{
        font-size:1.25rem;
    }
    .it-security__col,.production__col{
        font-size:.875rem;
    }
    .validation__image{
        border-radius: 0 .875rem .875rem .875rem;
    }
    .production__image .play-btn{
        right: calc(4rem / 4);
        top: calc(2.5rem / 4);
    }
    .menu-btn{
        height:1rem;
    }
    /*page2*/
    /*contact*/
    .contact-grid{
        grid-template-columns:1fr;
    }
    .contact-title{
        margin-bottom:72vh;
    }
    .content-grid{
        grid-template-columns:1fr;
    }
    .contact-box{
        padding: 1.5rem;
        gap: 1.5rem;
    }
    .fingerprint-icon img{
        width:2.5rem;
    }
    .contact-grid{
        gap:3rem
    }
    /*contact*/
    .input-search{
        max-width:6rem;
    }
    .input-search:focus, .input-search:not(:placeholder-shown){
        max-width:8rem;
    }
    .modul-banner-svg .card .img-svg-banner {
        padding-left: 2rem;
        padding-right: 0;
        margin-right: 15px;
    }
    .modul-banner-svg .overlay {
        width: 75%;
    }
    .hero-title { letter-spacing: normal !important; }
    .grid-bottom { grid-template-columns: 1fr 1fr; }
    .concept-grid { margin-bottom: 0 !important; }
    .branchen-card .wap_img {
        height: 25rem;
    }
    .bg-color {
        padding: 2rem 15px !important;
    }
    .modul-banner .overlay-large, .modul-banner .overlay {
        top: 15px;
        left: 15px;
        right: 10px;
    }
    .modul-banner-grid--1-3-1-3-1-3 .modul-banner .card {
        height: 12.2rem;
    }
    .icon-header img.icon {
        right: 3rem;
        top: 0;
    }
    .contact-items {
        display: inline-block;
    }
    .teaser-engineering {
        background-position: center -5rem !important;
    }
}

@media (max-width:767px){
    :root {
        --bs-nav-link-font-size: 1.2rem;
    }
    .dropdown-header, .dropdown-menu-dark .dropdown-item {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .offcanvas-end {
        --bs-nav-link-padding-y: 1rem;
    }
    .branchen-grid,
    .stats-text,
    .branchen-text,
    .concept-grid,
    .individual-grid,
    .footer-grid {
        grid-template-columns: 1fr;
        gap:2rem;
    }
    .grid-bottom { grid-template-columns: 1fr; }
    .grid-top{
        grid-template-columns:1fr;
        gap:1rem;
    }
    #tarteaucitronIcon #tarteaucitronManager img{
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    .logo img {
        height: 2rem;
    }
    .menu-btn {
        height: 1.5rem !important;
    }
    .header .nav-link {
        font-size: 1.1rem !important;
        line-height: 1.5rem !important;
    }
    .hero-title { letter-spacing: normal !important; }
    h1, h2 {
        font-size: calc(var(--ratio-section) * 2rem);
    }
    .bg-color {
        padding: 2rem 15px !important;
    }
    .grid-top {
        margin-left: 0; margin-bottom: 1rem;
    }
    .concept-grid { margin-bottom: 0 !important; }
    .branchen-card .wap_img {
        height: 52vh;
    }
    .branchen-content {
        left: 0;
    }

    .service-content {
        bottom: 10px;
        left: 20px;
        right: 30px;
    }
    .service-content h3 {
        font-size: 1.5rem;
        line-height: normal;
        font-weight: 600;
        letter-spacing: 0;
    }
    .dienstleistung-img,
    .branche-img { height: 30vh; }

    .modul-banner {
        padding: 0;
    }
    .modul-banner .overlay-large {
        top: 20px;
        left: 15px;
        right: 15px;
    }
    .modul-banner-grid--1-3-1-3-1-3 .modul-banner .card {
        height: 11rem;
    }
    .engineering-banner .modul-banner-grid {
        display: block;
    }

    p.fliesstext-extragross {
        font-size: 3rem;
        margin-top: 4rem;
        line-height: 1;
        padding-bottom: 2rem;
    }

    .footer {
        padding: 1.6rem 0 6.6rem 15px;
    }
    .footer-col h5,
    .footer-col li,
    footer .nav-link, 
    footer p {
        font-size: .9rem;
        line-height: 1.5;
    }
    .footer-col li { line-height: 2; }
    footer .nav-link { padding: 3px 0;}
    .branch_nav { margin-top: 2rem; }
}







@media (min-width:992px) {
    .stats-section .grid-bottom .card{
        height:12.5rem;
    }
    .input-search {
        width: 6rem;
    }
    .grid-bottom .img{height:12.5rem}
    .contact-title{
        margin-bottom:80vh;
    }
    .dropdown-menu-dark{
        margin-top:.4rem!important;
        text-transform:none!important;
    }
    .main-nav .nav-link{
        padding:.5rem 0;
    }
    .header .nav-link:hover{
        color: #F7AD00;
    }
}
@media (min-width:992px) and (max-width:1440px){
    .header .container{
        width:90vw;
    }
}