.elementor-kit-9{--e-global-color-primary:#000000;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#FFFFFF;--e-global-color-accent:#F3FE53;--e-global-typography-primary-font-family:"Inter Display";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Inter Display";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Inter Display";--e-global-typography-text-font-size:clamp(14px, calc(10.67px + 0.486vw), 20px);--e-global-typography-text-font-weight:700;--e-global-typography-accent-font-family:"Inter Display";--e-global-typography-accent-font-weight:700;background-color:var( --e-global-color-v4-black );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1250px;}.e-con{--container-max-width:1250px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}.elementor-kit-9{--e-page-transition-entrance-animation:e-page-transition-fade-out;--e-page-transition-exit-animation:e-page-transition-fade-in;}}:root { --font:#ffffff; --black:#000000; --mood1:#f3fe53; --mood2:#f96060; --main:Inter; }
/* Start custom CSS *//* =========================================
   Globales Linienraster – Seiten, Single Posts + Header
   ========================================= */

main#content,
.elementor-location-single,
.elementor-location-footer {
    position: relative;
}

main#content::before,
.elementor-location-single::before,
.elementor-location-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 9999;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)),
        linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)),
        linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28));

    background-size: 1px 100%, 1px 100%, 1px 100%;
    background-position: 17.4479167% 0, 50% 0, 82.5520833% 0;
    background-repeat: no-repeat;
}

.grid-front {
    position: relative;
    z-index: 10000;
}


/* =========================================
   Footer – vertikale Rasterlinien direkt auf den Grid-Containern
   ========================================= */

.elementor-location-footer > .main-grid {
    position: relative !important;
    isolation: isolate;
}

.elementor-location-footer > .main-grid::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 10;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)),
        linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)),
        linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28));

    background-size:
        1px 100%,
        1px 100%,
        1px 100%;

    background-position:
        17.4479167% 0,
        50% 0,
        82.5520833% 0;

    background-repeat: no-repeat;
}

/* Footer-Inhalte über/unter dem Raster korrekt stapeln */
.elementor-location-footer > .main-grid > * {
    position: relative;
    z-index: 11;
}

/* =========================================
   Footer – mobiles Raster
   ========================================= */

@media (max-width: 767px) {
    .elementor-location-footer > .main-grid::before {
        background-position:
            8% 0,
            50% 0,
            92% 0;
    }
}

/* =========================================
   Single Project – graue Rasterlinien auf weißer Contentbox
   ========================================= */

.single-project-content {
    position: relative;
}

.single-project-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10000;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.18),
            rgba(0, 0, 0, 0.18)
        ),
        linear-gradient(
            rgba(0, 0, 0, 0.18),
            rgba(0, 0, 0, 0.18)
        ),
        linear-gradient(
            rgba(0, 0, 0, 0.18),
            rgba(0, 0, 0, 0.18)
        );

    background-size:
        1px 100%,
        1px 100%,
        1px 100%;

    background-position:
        0 0,
        39.4321766% 0,
        78.8643533% 0;

    background-repeat: no-repeat;
}

.grid-front {
    z-index: 10001;
}
/* =========================================
   Hauptgrid – globale benannte Gridlinien
   ========================================= */

.main-grid {
    display: grid !important;

    grid-template-columns:
        [col-1] 17.4479167%
        [col-2] 32.5520833%
        [col-3] 32.5520833%
        [col-4] 17.4479167%
        [col-end] !important;
}

.grid-column-1 {
    grid-column: col-1 / col-2;
}

.grid-column-2 {
    grid-column: col-2 / col-3;
}

.grid-column-3 {
    grid-column: col-3 / col-4;
}

.grid-column-4 {
    grid-column: col-4 / col-end;
}

.grid-column-2-3 {
    grid-column: col-2 / col-4;
}

.grid-column-3-4 {
    grid-column: col-3 / col-end;
}

.grid-column-2-4 {
    grid-column: col-2 / col-end;
}

.grid-row-1 {
    grid-row: 1;
    align-self: start;
}

.grid-row-2 {
    grid-row: 2;
}

/* =========================================
   Mobile Grid – Standardverhalten Projekt-Content
   ========================================= */

@media (max-width: 767px) {

    /* Mobiles Grundraster: schmale Außenränder, breite Contentfläche */
    .main-grid {
        grid-template-columns:
            [col-1] 8%
            [col-2] 42%
            [col-3] 42%
            [col-4] 8%
            [col-end] !important;
    }

    /*
     * Einspaltige Textbereiche aus Desktop
     * werden mobil über Spalte 2 + 3 gezogen.
     */
    .single-project-content .grid-column-2,
    .single-project-content .grid-column-3 {
        grid-column: col-2 / col-4 !important;
    }
}

/* =========================================
   Mobile Grid – schmälere Außenbereiche + passende Rasterlinien
   ========================================= */

@media (max-width: 767px) {

    /* Globales 4-Spalten-Raster auf Mobile */
    .main-grid {
        grid-template-columns:
            [col-1] 8%
            [col-2] 42%
            [col-3] 42%
            [col-4] 8%
            [col-end] !important;
    }

    /* Projekte-Viewport verwendet ein eigenes Grid und muss mitziehen */
    .projects-viewport {
        grid-template-columns:
            8%
            42%
            42%
            8% !important;
    }

    /* Elementor darf mobile Grid-Items nicht über ihre Grid-Fläche hinaus verbreitern */
    [class*="mobile-grid-column-"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* Globale sichtbare Rasterlinien an das mobile Grid anpassen */
    main#content::before,
    .elementor-location-single::before,
    .projects-viewport::after {
        background-position:
            8% 0,
            50% 0,
            92% 0;
    }

    /* Graue Rasterlinien innerhalb der weißen Single-Project-Contentbox */
    .single-project-content::before {
        background-position:
            0 0,
            45.6521739% 0,
            91.3043478% 0;
    }
}

/* =========================================
   Mobile Grid – responsive Spalten-Hilfsklassen
   ========================================= */

@media (max-width: 767px) {

    .mobile-grid-column-1 {
        grid-column: col-1 / col-2 !important;
    }

    .mobile-grid-column-2 {
        grid-column: col-2 / col-3 !important;
    }

    .mobile-grid-column-3 {
        grid-column: col-3 / col-4 !important;
    }

    .mobile-grid-column-4 {
        grid-column: col-4 / col-end !important;
    }

    .mobile-grid-column-1-2 {
        grid-column: col-1 / col-3 !important;
    }

    .mobile-grid-column-2-3 {
        grid-column: col-2 / col-4 !important;
    }

    .mobile-grid-column-3-4 {
        grid-column: col-3 / col-end !important;
    }

    .mobile-grid-column-1-3 {
        grid-column: col-1 / col-4 !important;
    }

    .mobile-grid-column-2-4 {
        grid-column: col-2 / col-end !important;
    }

    .mobile-grid-column-1-4 {
        grid-column: col-1 / col-end !important;
    }
}


/* =========================================
   Single Project – Subgrid durch Elementor Post Content weiterreichen
   ========================================= */

.single-project-content {
    display: grid !important;
    grid-template-columns: subgrid !important;
}

/* Post-Content-Widget über die gesamte weiße Contentbox */
.project-post-content {
    grid-column: 1 / -1 !important;

    display: grid !important;
    grid-template-columns: subgrid !important;

    width: 100%;
    min-width: 0;
}

/* Elementor-Wrapper des eigentlichen Beitrags ebenfalls als Subgrid */
.project-post-content > .elementor[data-elementor-type="wp-post"] {
    grid-column: 1 / -1 !important;

    display: grid !important;
    grid-template-columns: subgrid !important;

    width: 100%;
    min-width: 0;
}

/* =========================================================
   PROJECTS
   ========================================================= */

.projects-scroll-section {
    position: relative;
    width: 100%;
    overflow: visible !important;
}


/* ---------------------------------------------------------
   Sticky Viewport
   --------------------------------------------------------- */

.projects-viewport {
    position: sticky !important;
    top: 0;

    width: 100%;
    height: 100vh;
    min-height: 100vh;

    /*
     * Wichtig:
     * Elementor liefert diesen Container eigentlich
     * als Flexbox aus. Für unser Seitenraster brauchen
     * wir hier tatsächlich Grid.
     */
    display: grid !important;

    grid-template-columns:
        17.4479167%
        32.5520833%
        32.5520833%
        17.4479167% !important;

    grid-template-rows:
        clamp(145px, 18vh, 185px)
        minmax(0, 1fr) !important;

    align-content: stretch;
    overflow: hidden !important;

    /*
     * Background-Grundfarbe.
     * Die eigentlichen Projektbilder werden durch JS
     * in zwei Background-Layer eingesetzt.
     */
    background-color: #07172b;

    isolation: isolate;
}


/* ---------------------------------------------------------
   Dynamische Background-Layer
   --------------------------------------------------------- */

.projects-background {
    position: absolute;
    inset: 0;

    z-index: 0;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    pointer-events: none;

    opacity: 0;

    transition:
        opacity 650ms cubic-bezier(0.22, 1, 0.36, 1);

    will-change: opacity;
}


/*
 * Dunkler Overlay wie im Screendesign.
 * Wert später problemlos anpassbar.
 */
.projects-background::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            rgba(3, 15, 31, 0.72),
            rgba(3, 15, 31, 0.72)
        );
}


.projects-background.is-active {
    opacity: 1;
}


/*
 * Der normale Elementor-Inhalt muss oberhalb
 * des Backgrounds liegen.
 */
.projects-viewport > :not(.projects-background) {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   Überschrift + Button
   --------------------------------------------------------- */

.projects-viewport > .grid-row-1 {
    grid-row: 1;
}


.projects-viewport > .grid-column-2 {
    grid-column: 2 / 3;
}


.projects-viewport > .grid-column-3 {
    grid-column: 3 / 4;
}


/* ---------------------------------------------------------
   Loop Grid / horizontaler Track
   --------------------------------------------------------- */

.projects-track {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    /*
     * Vertikale Position der Karten.
     */
    align-self: start !important;

    overflow: visible !important;
}


.projects-track > .elementor-widget-container {
    overflow: visible !important;
}


.projects-track .elementor-loop-container {
    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: max-content !important;
    max-width: none !important;

    /*
     * Hier kommt der deutlich größere Abstand
     * aus deinem Screendesign.
     */
    gap: clamp(480px, 40vw, 700px) !important;

    align-items: flex-start;

    transform: translate3d(0, 0, 0);

    will-change: transform;
}


/* ---------------------------------------------------------
   Projektkarten
   --------------------------------------------------------- */

.projects-track .e-loop-item {
    /*
     * Breite reagiert sowohl auf Bildschirmbreite
     * als auch auf Bildschirmhöhe.
     *
     * Dadurch werden die Karten auf flachen
     * Displays automatisch kleiner.
     */
    flex:
        0 0
        clamp(
            280px,
            min(23vw, 38vh),
            420px
        ) !important;

    width:
        clamp(
            280px,
            min(23vw, 38vh),
            420px
        ) !important;
    max-width: none !important;
}


/*
 * Elementor versucht beim Loop teilweise selbst
 * Grid-Spalten zu definieren.
 */
.projects-track .elementor-loop-container.elementor-grid {
    grid-template-columns: none !important;
}


/* ---------------------------------------------------------
   Karte
   --------------------------------------------------------- */

.project-card {
    position: relative !important;

    width: 100%;

    z-index: 1;

    overflow: visible !important;
}


/* =========================================
   Projektkarte – statischer gelber Hover
   ========================================= */

.project-card::before {
    content: "";
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background: #efff35;

    z-index: -1;
    pointer-events: none;

    opacity: 0;
    transform: none;
}

.project-card:hover::before,
.project-card:focus-within::before {
    opacity: 1;
    transform: none;
}

/* Karteninhalt bleibt über der gelben Fläche */
.project-card > * {
    position: relative;
    z-index: 1;
}

.projects-viewport > .grid-column-2.grid-row-1 {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
}

.projects-viewport > .grid-column-3 {
    grid-column: 3 / 4 !important;
    grid-row: 1 !important;
}


/* =========================================================
   TABLET + MOBILE
   ========================================================= */

@media (max-width: 1024px) {

    .projects-scroll-section {
        height: auto !important;
        min-height: 0 !important;
    }


    .projects-viewport {
        position: relative !important;

        top: auto;

        height: auto;
        min-height: 0;

        overflow: hidden !important;

        display: grid !important;
    }


    .projects-track {
        overflow-x: auto !important;
        overflow-y: visible !important;

        grid-column: 1 / -1 !important;

        overscroll-behavior-inline: contain;

        -webkit-overflow-scrolling: touch;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;
    }


    .projects-track::-webkit-scrollbar {
        display: none;
    }


    .projects-track .elementor-loop-container {
        width: max-content !important;

        gap: clamp(32px, 8vw, 80px) !important;

        /*
         * Startposition wieder ungefähr auf
         * unserem Seitenraster.
         */
        padding-inline:
            max(24px, 8vw);

        padding-bottom: 30px;
    }


    .projects-track .e-loop-item {
        flex: 0 0 min(78vw, 430px) !important;

        width: min(78vw, 430px) !important;

        scroll-snap-align: start;
    }


    /*
     * Hover funktioniert auf Touch-Geräten
     * ohnehin nicht sinnvoll.
     */
    .project-card::before {
        display: none;
    }
}

.projects-viewport {
    z-index: 20;
}

.projects-viewport::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.28),
            rgba(255, 255, 255, 0.28)
        ),
        linear-gradient(
            rgba(255, 255, 255, 0.28),
            rgba(255, 255, 255, 0.28)
        ),
        linear-gradient(
            rgba(255, 255, 255, 0.28),
            rgba(255, 255, 255, 0.28)
        );

    background-size:
        1px 100%,
        1px 100%,
        1px 100%;

    background-position:
        17.4479167% 0,
        50% 0,
        82.5520833% 0;

    background-repeat: no-repeat;
}

.projects-viewport > :not(.projects-background) {
    position: relative;
    z-index: 2;
}



.project-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1.25 / 1;
    object-fit: cover;
}


/* =========================================================
   Hover + Verlinkung Projekte-Seite
   ========================================================= */

.project-list-item {
    position: relative !important;
}

.project-list-content {
    background-color: #ffffff !important;
    transition: background-color 250ms ease;
}

.project-list-item:has(.project-list-link:hover) .project-list-content {
    background-color: #efff35 !important;
}

/* Unsichtbarer klickbarer Bereich über Spalte 2–4 */
.project-list-link {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 17.4479167% !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    z-index: 10 !important;
}



.header-edge-left {
    width: 100%;
    box-sizing: border-box;
    padding-left: 8vw !important;

}

.header-edge-right {
    width: 100%;
    box-sizing: border-box;
    padding-right: 8vw !important;
}



/* =========================================
   Hero – Desktop Scroll-Shutter-Animation
   ========================================= */

@media (min-width: 1025px) {

    .hero-scroll-section {
        position: relative;
        width: 100%;
        height: 280vh;
        overflow: visible !important;
    }

    .hero-sticky {
        position: sticky !important;
        top: 0;
        width: 100%;
        height: 100vh;
        min-height: 100vh;
        overflow: hidden !important;
    }

    /*
     * Die Hero-Headline muss unter den schwarzen
     * Shutter-Flächen liegen. Sie besitzt zusätzlich
     * die globale Klasse .grid-front, daher überschreiben
     * wir deren hohen z-index nur innerhalb des Heros.
     */
    .hero-sticky .type-hero {
        position: relative;
        z-index: 20 !important;
    }

    /*
     * Wird automatisch per JavaScript erzeugt.
     * Sechs gleich breite vertikale Bereiche.
     */
    .hero-shutters {
        position: absolute;
        inset: 0;
        z-index: 50;
        pointer-events: none;

        display: grid;
        grid-template-columns:
        17.4479167%
        16.27604165%
        16.27604165%
        16.27604165%
        16.27604165%
        17.4479167%;
    }

    .hero-shutter {
        width: 100%;
        height: 100%;
        background: #000;

        transform: scaleX(0);
        will-change: transform;
    }

    .hero-shutter:nth-child(odd) {
        transform-origin: left center;
    }

    .hero-shutter:nth-child(even) {
        transform-origin: left center;
    }
}


/* =========================================
   Hero – Animation auf Tablet/Mobile deaktivieren
   ========================================= */

@media (max-width: 1024px) {

    .hero-scroll-section {
        height: auto !important;
        min-height: 0 !important;
    }

    .hero-sticky {
        position: relative !important;
        top: auto !important;
        height: auto;
        min-height: 100vh;
    }

    .hero-shutters {
        display: none !important;
    }
}


/* =========================================
   Hero – Headline + Showreel direkt untereinander
   ========================================= */

.hero-sticky {
    grid-template-rows: auto auto 1fr !important;
    align-content: start !important;
}

.hero-sticky > .type-hero {
    grid-row: 1 !important;
}

.hero-sticky > .showreel-tile {
    grid-row: 2 !important;
    align-self: start !important;
    position: relative;
    z-index: 20;

    margin-top: clamp(16px, 2vw, 32px);
}

/* Hero-Video aus dem Grid nehmen und als Hintergrund verwenden */
.hero-sticky > .e-self-hosted-video-base {
    position: absolute !important;
    inset: 0;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
    z-index: 0;
}


/* =========================================
   Showreel-Lightbox – Button-Standardstyles entfernen
   ========================================= */

button.showreel-tile {
    appearance: none !important;
    -webkit-appearance: none !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    background: transparent;
    color: inherit;
    font: inherit;

    cursor: pointer;
}

button.showreel-tile:hover,
button.showreel-tile:focus,
button.showreel-tile:focus-visible,
button.showreel-tile:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* =========================================
   Elementor Video-Lightbox – mittig im Viewport positionieren
   ========================================= */

.dialog-lightbox-widget .dialog-lightbox-widget-content {
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    margin: 0 !important;

    transform: translate(-50%, -50%) !important;
}

/* =========================================
   Single Projects – automatische mobile Spalten
   ========================================= */

@media (max-width: 767px) {

    /* Desktop Spalte 3–4 wird mobil über den kompletten Contentbereich 2–4 */
    .project-post-content .grid-column-3-4 {
        grid-column: col-2 / col-end !important;
    }

    /* Einzelne Spalte 2 oder 3 wird mobil auf Spalte 2–3 erweitert */
    .project-post-content .grid-column-2,
    .project-post-content .grid-column-3 {
        grid-column: col-2 / col-4 !important;
    }

    /* Bereits 2–3 bleibt 2–3 */
    .project-post-content .grid-column-2-3 {
        grid-column: col-2 / col-4 !important;
    }

    /* Bereits 2–4 bleibt vollflächig */
    .project-post-content .grid-column-2-4 {
        grid-column: col-2 / col-end !important;
    }
}


/* =========================================
   Single Projects – Inhalte über Rasterlinien
   + optionale Ausnahme unter Rasterlinien
   ========================================= */

/* Feste Template-Inhalte über den Rasterlinien */
.single-project-content > :not(.project-post-content) {
    position: relative;
    z-index: 10001;
}

/* Individuelle Projekt-Inhalte standardmäßig über den Rasterlinien */
.project-post-content > .elementor[data-elementor-type="wp-post"] > .e-con {
    position: relative;
    z-index: 10001;
}

/* Ausnahme: Rasterlinien sollen über diesem Element liegen */
.project-post-content > .elementor[data-elementor-type="wp-post"] > .e-con.grid-behind-lines {
    z-index: 1 !important;
}



/* =========================================
   Single Projects – globale Bildanimationen
   ========================================= */

/* Projektbilder im Content */
.project-post-content img {
    opacity: 0;
    transform: translateY(40px) scale(0.985);
    transition:
        opacity 700ms ease,
        transform 900ms cubic-bezier(.22, .61, .36, 1);

    will-change: transform, opacity;
}

.project-post-content img.project-image-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* =========================================
   Single Projects – Hero/Beitragsbild
   ========================================= */

.single-project-content > img:first-of-type {
    --project-hero-blur: 0px;
    --project-hero-scale: 1;
    --project-hero-y: 0px;

    transform:
        translateY(var(--project-hero-y))
        scale(var(--project-hero-scale));

    filter: blur(var(--project-hero-blur));

    transform-origin: center center;
    will-change: transform, filter;
}



.dialog-lightbox-widget{
    z-index: 999999;
}


/* =========================================
   GDC – WPML Sprachumschalter DE / EN
   unterstützt en-GB
   ========================================= */

.gdc-language-switcher .wpml-ls {
    padding: 0 !important;
    border: 0 !important;
}

.gdc-language-switcher .wpml-ls ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;

    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Reihenfolge immer DE → EN */
.gdc-language-switcher .wpml-ls-item-de {
    order: 1;
}

.gdc-language-switcher li[class*="wpml-ls-item-en"] {
    order: 2;
}

.gdc-language-switcher .wpml-ls li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Originalbezeichnungen Deutsch / English ausblenden */
.gdc-language-switcher .wpml-ls-native {
    display: none !important;
}

/* Grundzustand */
.gdc-language-switcher .wpml-ls-link {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    color: #ffffff !important;
    opacity: 0.6;

    font-size: clamp(18px, 1.95vw, 34px);
    font-weight: 700;
    line-height: 1;

    text-decoration: none !important;

    transition: opacity 200ms ease;
}

/* DE ausgeben */
.gdc-language-switcher .wpml-ls-item-de > .wpml-ls-link::after {
    content: "DE";
}

/* EN / en-GB ausgeben */
.gdc-language-switcher li[class*="wpml-ls-item-en"] > .wpml-ls-link::after {
    content: "EN";
}

/* Aktuelle Sprache */
.gdc-language-switcher .wpml-ls-current-language > .wpml-ls-link {
    opacity: 1;
    pointer-events: none;
    cursor: default;
}

/* Andere Sprache */
.gdc-language-switcher .wpml-ls-item:not(.wpml-ls-current-language) > .wpml-ls-link {
    opacity: 0.5;
}

.gdc-language-switcher .wpml-ls-item:not(.wpml-ls-current-language) > .wpml-ls-link:hover {
    opacity: 1;
}

/* =========================================
   Projekte-Übersicht – nur Bilder vor Rasterlinien
   ========================================= */

/* Verschachtelte grid-front Stacking-Contexts der Projektliste neutralisieren */
main#content .grid-front:has(.projects-list-loop),
main#content .projects-list-loop.grid-front,
main#content .projects-list-loop .project-list-item.grid-front {
    z-index: auto !important;
    isolation: auto !important;
}

/* Projektzeile bleibt Bezugspunkt für den absoluten Klick-Link,
   erzeugt aber keinen eigenen Stacking Context */
main#content .projects-list-loop .project-list-item {
    position: relative !important;
    z-index: auto !important;
}

/* NUR der Bildcontainer kommt über das globale Raster (9999) */
main#content .projects-list-loop .project-list-item > .grid-column-3-4 {
    position: relative !important;
    z-index: 10000 !important;
}

/* Transparenter Klick-Link bleibt noch eine Ebene darüber */
main#content .projects-list-loop .project-list-link {
    z-index: 10001 !important;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Inter';
	font-display: auto;
	src: url('https://gdc-design.de/wp-content/uploads/2026/08/InterVariable.ttf') format('truetype');
}
/* End Custom Fonts CSS */