/* --- 1. HERO & HINTERGRUND --- */
.bg-hero-container {
    position: relative;
    width: 100%;
    min-height: 450px;
    overflow: hidden;
    background-color: #1a1a1a;
}

.bg-hero-container figure, 
.bg-hero-container img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}

.overlay-content {
    position: relative;
    z-index: 3;
    padding: 80px 50px 140px 50px;
}

/* Deko-Balken oben rechts */
.has-decor::before {
    content: "";
    position: absolute;
    top: 0; right: 10%;
    width: 280px; height: 70px;
    background: #005fa8;
    transform: skewX(-30deg);
    z-index: 2;
}

/* --- 2. VIDEO-BUTTON POSITIONIERUNG --- */
.header-group {
    display: flex;
    align-items: center;
    gap: 40px;
    color: #fff;
}

.pos-right .header-group  { justify-content: space-between; flex-direction: row; }
.pos-left .header-group   { justify-content: flex-end; flex-direction: row-reverse; }
.pos-bottom .header-group { flex-direction: column; align-items: flex-start; }

.video-play-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    gap: 15px;
    font-weight: bold;
}

.play-icon {
    width: 55px; height: 55px;
    background: #fff;
    border-radius: 50%;
    position: relative;
    transition: transform 0.3s ease;
}

.play-icon::after {
    content: "";
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #005fa8;
    position: absolute; top: 50%; left: 55%;
    transform: translate(-50%, -50%);
}

.video-play-link:hover .play-icon { transform: scale(1.1); }

/* --- 3. BOX-OVERLAY & GRID --- */
.box-overlay {
    margin-top: -100px;
    position: relative;
    z-index: 10;
    padding: 0 50px; /* 50px Einrückung links/rechts */
}

.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    align-items: stretch; /* Alle Boxen gleich hoch */
}

/* Versatz-Modus */
.services-grid.is-staggered { align-items: flex-start; }
.services-grid.is-staggered .service-box:nth-child(even) { margin-top: 60px; }

/* --- 4. DIE SERVICE-BOX --- */
.service-box {
    background: #ffffff;
    flex: 1;
    min-width: 260px;
    padding: 35px 30px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

.box-header { display: flex; align-items: center; margin-bottom: 20px; }

.step-number {
    background: #005fa8;
    color: #fff;
    padding: 4px 12px;
    font-weight: 700;
    margin-right: 12px;
}

.step-label { color: #cbd5e0; font-weight: 700; font-size: 0.85rem; letter-spacing: 1.5px; }

.service-box h3 { color: #00457a; font-size: 1.3rem; margin: 0 0 15px 0; font-weight: 700; }

.description { flex-grow: 1; color: #666; line-height: 1.6; font-size: 0.95rem; }


/* GLightbox spezifische Anpassung */
.video-play-link {
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Verhindert das "Zittern" beim Laden lokaler MP4s */
.glightbox-container video {
    max-width: 100%;
    height: auto !important;
}

/* Restliches Layout (Wichtig für die 50px Einrückung) */
.box-overlay {
    margin-top: -80px;
    padding: 0 50px; /* Hier die gewünschte 50px Einrückung */
    position: relative;
    z-index: 10;
}

.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    align-items: stretch;
}

/* Staggered (Versatz) Modus */
.services-grid.is-staggered { align-items: flex-start; }
.services-grid.is-staggered .service-box:nth-child(even) { margin-top: 60px; }

/* Mobil-Anpassung der Einrückung */
@media (max-width: 768px) {
    .box-overlay { padding: 0 20px; }
    .services-grid { flex-direction: column; }
    .services-grid.is-staggered .service-box:nth-child(even) { margin-top: 0; }
}

/* --- 5. RESPONSIVE --- */
@media (max-width: 992px) {
    .box-overlay { padding: 0 20px; }
    .header-group { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
    .services-grid { flex-direction: column; }
    .services-grid.is-staggered .service-box:nth-child(even) { margin-top: 0; }
    .box-overlay { margin-top: -50px; }
    .bg-hero-container { min-height: 350px; }
}