/* =========================================================
   jobs.css — Jobs / Karriere (Video-Background + Overlay)
   Ziel:
   - Video bleibt fix im Hintergrund
   - Links liegen beim Start über dem Video (nur Links sichtbar)
   - Klick auf Link => smooth scroll im Overlay zu Card
   - Overlay ist um Navbar-Höhe nach unten verschoben
   - Cards haben feste Höhe, Buttons immer unten, Content ggf. innen scroll
   ========================================================= */


/* ---------- Konfiguration ---------- */
:root {
    --jobs-nav-offset: 72px; /* Navbar-Höhe: bei dir ggf. 64/72/80 anpassen */
    --jobs-left: 5%;
    --jobs-links-vpos: 55vh; /* vertikale Position der Links im Startbereich */
    --jobs-card-maxw: 980px;
    --jobs-card-h: min(72vh, 620px); /* feste Card-Höhe => alle Cards identisch */
}


/* ---------- Optional: nur auf Jobs-Seite Body-Scroll sperren ---------- */
/* Wenn du im Layout body class="jobs-page" setzen kannst, dann aktiv lassen */
body.jobs-page {
    overflow: hidden;
}


/* ---------- Overlay: NUR das Overlay scrollt ---------- */
.jobs-overlay-scroll {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--jobs-nav-offset);
    bottom: 0;
    z-index: 2;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth; /* Smooth scroll im Overlay */
    -webkit-overflow-scrolling: touch;
}


    /* ---------- Startbereich: nur Links sichtbar ---------- */
    /* Wir reservieren 1 Viewport "Höhe" vor den Details,
   damit man beim Laden NICHT schon die erste Card sieht. */
    .jobs-overlay-scroll::before {
        content: "";
        display: block;
        height: calc(100vh - var(--jobs-nav-offset));
        pointer-events: none;
    }


    /* ---------- Links (über dem Video, normaler Flow, scrollt mit) ---------- */
    .jobs-overlay-scroll .video-overlay-links {
        position: absolute;
        left: var(--jobs-left);
        top: calc(var(--jobs-links-vpos) - var(--jobs-nav-offset));
        z-index: 3;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }


    /* Link-Buttons wie ursprünglich (nicht volle Breite) */
    .jobs-overlay-scroll .job-link {
        display: inline-flex;
        width: fit-content;
        padding: 14px 24px;
        background: rgba(0, 0, 0, 0.60);
        color: #fff;
        text-decoration: none;
        font-size: 1.2rem;
        font-weight: 600;
        border-radius: 8px;
        backdrop-filter: blur(6px);
        transition: all 0.25s ease;
    }

        .jobs-overlay-scroll .job-link:hover {
            background: #1f3c5a;
            transform: translateX(5px);
        }


    /* ---------- Container für Details ---------- */
    /* Bootstrap container + py-5 hat bei dir viel Luft erzeugt.
   Wir ziehen das hier für diese Seite wieder kompakt. */
    .jobs-overlay-scroll .container.py-5 {
        padding-top: 12px !important;
        padding-bottom: 28px !important;
    }


    /* =========================================================
   CARD LAYOUT (gleich hoch, Buttons immer unten)
   ========================================================= */

    /* WICHTIG: globales section-styling aus site.css für diese Seite neutralisieren */
    .jobs-overlay-scroll section.job-detail-card {
        height: auto !important;
        padding: 0 !important;
        display: block !important;
        gap: 0 !important;
        overflow: visible !important;
        scroll-snap-align: none !important;
    }


    /* Card Styling + feste Höhe */
    .jobs-overlay-scroll .job-detail-card {
        max-width: var(--jobs-card-maxw);
        margin-left: auto;
        margin-right: auto;
        background: rgba(0, 0, 0, 0.72);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 16px;
        /* kompakter */
        padding: 18px 20px;
        backdrop-filter: blur(8px);
        box-shadow: 0 10px 24px rgba(0,0,0,.25);
        /* Anchor Offset (wegen Navbar + angenehmer Abstand) */
        scroll-margin-top: calc(var(--jobs-nav-offset) + 18px);
        /* Layout: Header | Body (flex) | Footer */
        display: grid;
        grid-template-rows: auto 1fr auto;
        height: var(--jobs-card-h);
        overflow: hidden; /* verhindert äußere Scrollbar */
    }


        /* Typografie/Abstände kompakter, weniger "riesige Räume" */
        .jobs-overlay-scroll .job-detail-card h2 {
            margin: 0 0 6px 0;
        }

        .jobs-overlay-scroll .job-detail-card .job-meta {
            margin: 0 0 10px 0 !important;
            opacity: .9;
        }

        .jobs-overlay-scroll .job-detail-card .job-lead {
            margin: 0 0 10px 0 !important;
            font-weight: 800;
        }

        .jobs-overlay-scroll .job-detail-card p {
            margin: 0 0 10px 0;
        }


        /* Body-Bereich: alles außer den Buttons darf scrollen, wenn zu lang */
        .jobs-overlay-scroll .job-detail-card > :not(.job-actions) {
            min-height: 0; /* wichtig für Grid/overflow */
        }

        /* Listen kompakter + Scroll im mittleren Bereich erzeugen wir über "content-wrap" ohne HTML:
   Wir nutzen einen Trick: die ULs bleiben normal, aber die Card scrollt in der Mitte,
   weil grid-row 2 automatisch den restlichen Platz bekommt. */
        .jobs-overlay-scroll .job-detail-card h5 {
            margin: 10px 0 6px 0;
        }

        .jobs-overlay-scroll .job-detail-card ul {
            margin: 0 0 10px 0;
            padding-left: 18px;
        }

        .jobs-overlay-scroll .job-detail-card li {
            margin: 0 0 4px 0;
        }


    /* Footer: Buttons immer unten, mit Trennlinie */
    .jobs-overlay-scroll .job-actions {
        align-self: end;
        margin-top: 8px;
        padding-top: 10px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        border-top: 1px solid rgba(255,255,255,0.12);
    }


    /* Target Highlight (bei Anchor-Navigation) */
    .jobs-overlay-scroll .job-detail-card:target {
        outline: 3px solid rgba(31, 60, 90, 0.6);
        box-shadow: 0 0 32px rgba(31, 60, 90, 0.22), 0 10px 24px rgba(0,0,0,.25);
    }


/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .jobs-overlay-scroll {
        scroll-behavior: auto;
    }

        .jobs-overlay-scroll .job-link {
            transition: none;
        }
}

.jobs-overlay-scroll .job-card {
    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    backdrop-filter: blur(8px);
}

.job-card {
    padding: 20px 10px;
    font-size: 1.05rem;
}

    /* Text wirklich weiß erzwingen */
    .jobs-overlay-scroll .job-card h2,
    .jobs-overlay-scroll .job-card h5,
    .jobs-overlay-scroll .job-card p,
    .jobs-overlay-scroll .job-card li,
    .jobs-overlay-scroll .job-card strong,
    .jobs-overlay-scroll .job-card span,
    .jobs-overlay-scroll .job-card a {
        color: #ffffff;
    }