@layer theme, animations, defaults, nav, main, layouts;

@layer animations {

    /* --------------------- VIEW TRANSITIONS (MPA) --------------------- */
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.3s;
    }

    /* Header bleibt beim Seitenwechsel STEHEN (kein Blinken):
        eigenes Transition-Element ohne Animation. */
    #header-container {
        view-transition-name: site-header;
    }

    ::view-transition-old(site-header),
    ::view-transition-new(site-header) {
        animation: none;
    }

    @media (prefers-reduced-motion: reduce) {

        ::view-transition-group(*),
        ::view-transition-old(*),
        ::view-transition-new(*) {
            animation: none !important;
        }
    }

    @keyframes menu-fade-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes item-rise {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@layer theme {

    /* BF Konkret Grotesk Pro – self-hosted (aus TTF zu woff2 konvertiert).
       Schnitte: 300 Thin (+italic, für Headlines), 400 Regular, 500 Medium,
       700 Bold, 800 ExtraBold. font-display:swap = Text sofort mit Fallback. */
    @font-face {
        font-family: "Konkret Grotesk Pro";
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url("/assets/fonts/konkret-100.woff2") format("woff2");
    }

    @font-face {
        font-family: "Konkret Grotesk Pro";
        font-style: italic;
        font-weight: 300;
        font-display: swap;
        src: url("/assets/fonts/konkret-100-italic.woff2") format("woff2");
    }

    @font-face {
        font-family: "Konkret Grotesk Pro";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("/assets/fonts/konkret-400.woff2") format("woff2");
    }

    @font-face {
        font-family: "Konkret Grotesk Pro";
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url("/assets/fonts/konkret-500.woff2") format("woff2");
    }

    @font-face {
        font-family: "Konkret Grotesk Pro";
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url("/assets/fonts/konkret-700.woff2") format("woff2");
    }

    @font-face {
        font-family: "Konkret Grotesk Pro";
        font-style: normal;
        font-weight: 800;
        font-display: swap;
        src: url("/assets/fonts/konkret-800.woff2") format("woff2");
    }

    :root {
        --color-primary: #f5c518;
        --color-text: #ffffff;
        --color-bg: #1a1a1a;
        --color-muted: #cdcdcd;
        --color-smoke: rgba(255, 255, 255, 0.15);
        --max-width: 1600px;
        --gap: 2rem;
        /* ungefähre Header-Höhe – Startpunkt des Mobil-Panels */
        --header-h: 64px;
        --radius: 6px;
        /* Schrift aus dem Design (BF Konkret Grotesk Pro, self-hosted s. @font-face) */
        --font-base: "Konkret Grotesk Pro", system-ui, -apple-system, sans-serif;

        /* Icon-Größen (feste Stufen für .icon-sm/-md/-lg) */
        --icon-sm: 18px;
        --icon-md: 24px;
        --icon-lg: 32px;
        --icon-xl: 44px;
        --icon-2xl: 66px;
    }

    /* Inline-SVG-Icons (s. lib/icons.php).
       Default: skaliert mit der Schriftgröße des Elternelements (1em),
       erbt die Farbe über currentColor. Feste Stufen via Modifier. */
    .icon {
        width: 1em;
        height: 1em;
        flex: 0 0 auto;
        /* optisch an die Textbasislinie angleichen */
        vertical-align: -0.125em;
    }

    .icon-sm {
        width: var(--icon-sm);
        height: var(--icon-sm);
    }

    .icon-md {
        width: var(--icon-md);
        height: var(--icon-md);
    }

    .icon-lg {
        width: var(--icon-lg);
        height: var(--icon-lg);
    }

    .icon-xl {
        width: var(--icon-xl);
        height: var(--icon-xl);
    }

    .icon-2xl {
        width: var(--icon-2xl);
        height: var(--icon-2xl);
    }

    /* Visuell versteckt, aber für Screenreader lesbar (z. B. Formular-Labels,
       die optisch durch Placeholder ersetzt sind). */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@layer defaults {
    body {
        font-family: var(--font-base);
        color: var(--color-text);
        background: var(--color-bg);
        line-height: 1.6;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        margin: 0;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    #content-container {
        flex: 1 0 auto;
        position: relative;
        padding-top: 120px;
    }

    .container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 1rem var(--gap);
    }

    .page-bg {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        pointer-events: none;

        mask-image:
            linear-gradient(to right, transparent 0%, #000 40%),
            linear-gradient(to top, transparent 0%, #000 40%);
        mask-composite: intersect;
        -webkit-mask-composite: source-in;
    }

    h1 {
        font-size: clamp(2rem, 4vw, 4.5rem);
        line-height: clamp(2rem, 4vw, 4.5rem);
        font-weight: 300;
        margin: 0;
    }

    h2 {
        font-weight: 400;
    }

    h3 {
        margin-top: 0;
        font-weight: 400;
        text-transform: none;
        color: var(--color-primary);
        font-size: clamp(1.4rem, 2vw, 1.7rem);
    }

    h4 {
        font-size: clamp(1.2rem, 1.8vw, 1.4rem);
        font-weight: 400;
        text-transform: uppercase;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    p, li, a {
        font-size: 1.15rem;
        line-height: 1.5rem;
    }

    a {
        color: var(--color-text);
    }

    img {
        max-width: 100%;
    }

    ul {
        list-style: none;
        padding-left: 0;

        li {
            .icon {
                color: var(--color-primary);
                margin-right: 10px;
            }
        }
    }

    section {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 4rem var(--gap);
    }

    button,
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        flex: 0 0 auto;
        background: var(--color-primary);
        color: var(--color-bg);
        font-weight: 500;
        padding: 0.7rem 1.4rem;
        text-decoration: none;
        white-space: nowrap;
        border: none;
        outline: none;
        box-shadow: none;
        cursor: pointer;
        border-radius: var(--radius);

        /* Hover nur, solange der Button aktiv ist – nicht im disabled-Zustand. */
        &:hover:not(:disabled) {
            opacity: 0.9;
        }

        /* Während des Sendens: deutlich erkennbar nicht klickbar. */
        &:disabled {
            cursor: not-allowed;
            opacity: 0.55;
        }

        &.secondary {
            background-color: transparent;
            color: var(--color-text);
            font-weight: 400;

            svg {
                color: var(--color-primary);
            }
        }

        /* Button-Icons etwas größer als die Textzeile */
        .icon {
            width: 26px;
            height: 26px;
        }

        /* Sende-Zustand: Pfeil-Icon weg, Spinner an seiner Stelle. */
        &.is-loading .icon {
            display: none;
        }

        &.is-loading::after {
            content: "";
            width: 22px;
            height: 22px;
            border: 2px solid currentColor;
            border-top-color: transparent;
            border-radius: 50%;
            animation: btn-spin 0.6s linear infinite;
        }
    }

    @keyframes btn-spin {
        to {
            transform: rotate(360deg);
        }
    }

    hgroup {
        margin-bottom: 1rem;


        >strong {
            display: block;
            color: var(--color-primary);
            font-size: 0.75rem;
            font-weight: 400;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        h1,
        h2,
        h3,
        h4,
        h5 {
            strong {
                color: var(--color-primary);
                font-weight: 300;
            }
        }

        h4 {
            margin-top: 0.25rem;
            font-size: clamp(1.5rem, 3vw, 2.25rem);
            text-transform: uppercase;
        }
    }

    /* ---- Kontaktformular (pages/kontakt.php) ---- */
    form {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        hgroup {
            display: flex;
            align-items: center;
            gap: 1rem;
            line-height: 1;

            .icon {
                color: var(--color-primary);
            }

            h3 {
                margin: 0;

                p {
                    margin: 0;
                    color: var(--color-text);
                }
            }
        }

        /* Label umschließt sein Feld: Beschriftung oben, Feld darunter. */
        label {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            font-size: 0.85rem;
            color: var(--color-muted);
        }

        input,
        textarea,
        select {
            width: 100%;
            padding: 0.4rem 0.7rem;
            font: inherit;
            color: var(--color-text);
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: var(--radius);
            transition: border-color 0.15s, background 0.15s;

            &::placeholder {
                color: var(--color-muted);
            }

            &:focus {
                outline: none;
                border-color: var(--color-primary);
                background: rgba(255, 255, 255, 0.07);
            }
        }

        textarea {
            resize: vertical;
            min-height: 4rem;
        }

        /* Datenschutz-Checkbox: Kästchen + Text nebeneinander. */
        .checkbox {
            flex-direction: row;
            align-items: flex-start;
            gap: 0.6rem;
            color: var(--color-muted);

            input {
                width: auto;
                margin-top: 0.2rem;
                accent-color: var(--color-primary);
            }

            a {
                color: var(--color-primary);
            }
        }

        button {
            justify-content: center;
            width: 100%;
            margin-top: 0.5rem;
        }
    }

    /* AJAX-Statusmeldung über dem Formular */
    .form-status {
        padding: 0.85rem 1rem;
        border-radius: var(--radius);
        font-size: 0.9rem;

        &[hidden] {
            display: none;
        }

        &.is-success {
            color: #d8f5d8;
            background: rgba(60, 180, 75, 0.15);
            border: 1px solid rgba(60, 180, 75, 0.5);
        }

        &.is-error {
            color: #f8d8d8;
            background: rgba(220, 60, 60, 0.15);
            border: 1px solid rgba(220, 60, 60, 0.5);
        }
    }
}

@layer nav {
    header {
        position: fixed;
        top: 0;
        left: 0;
        /* KEIN transform/translate hier: das würde den Header zum Containing
           Block machen und das position:fixed Mobil-Panel an den Header (statt
           Viewport) binden → Panel bricht zusammen. left:0 + width:100% zentriert
           ein vollbreites Element ohnehin. */
        z-index: 100;
        width: 100%;
        background: transparent;
        transition: background-color 0.25s ease, backdrop-filter 0.25s ease;

        /* Gescrollt (Klasse via IntersectionObserver in main.js): dunkler,
           transparenter Hintergrund mit leichtem Blur. */
        &.scrolled {
            background: color-mix(in srgb, var(--color-bg) 70%, transparent);
            backdrop-filter: blur(10px);
        }

        /** ANCHOR Desktop */
        .nav-bar {
            display: flex;
            align-items: center;
            gap: 2rem;

            /* Logo (links) */
            .logo {
                display: inline-flex;
                align-items: baseline;
                font-size: 1.6rem;
                font-weight: 800;
                letter-spacing: -0.02em;
                text-decoration: none;
                color: var(--color-text);

                .logo-mark {
                    color: var(--color-primary);
                }
            }

            /* Menü mittig zwischen Logo und Button */
            .nav-menu {
                margin-inline: auto;

                ul {
                    display: flex;
                    align-items: center;
                    flex-wrap: nowrap;
                    gap: 1.5rem;
                    list-style: none;
                }

                .topnav-link {
                    /* Menüpunkte am Desktop nie umbrechen */
                    white-space: nowrap;

                    /* Punkt-Trenner zwischen den Menüpunkten */
                    &:not(:last-child)::after {
                        content: "•";
                        color: var(--color-primary);
                        margin-left: 1.5rem;
                    }

                    a {
                        text-decoration: none;
                        color: var(--color-text);
                        padding-bottom: 0.4rem;
                        border-bottom: 2px solid transparent;
                        transition: color 0.15s, border-color 0.15s;

                        &:hover {
                            color: var(--color-primary);
                        }
                    }

                    &.active a {
                        border-bottom-color: var(--color-primary);
                    }
                }
            }

            /* Burger/Close – am Desktop versteckt, mobil sichtbar (s. Media-Query). */
            .burger,
            .close {
                display: none;
                cursor: pointer;
            }

            /* ---- Mobil: Burger statt Menü, Vollbild-Panel, fixer CTA ---- */
            @media (max-width: 1400px) {
                .burger {
                    display: block;
                }

                .close {
                    display: none;
                }

                .nav-menu {
                    display: none;
                }

                .btn-cta {
                    display: none;
                }

                /* CTA wandert ins Mobilmenü (unten) */
            }
        }
    }

    /** ANCHOR Mobil
        WICHTIG: .mobile-open sitzt via JS auf #header-container (dem <header>
        selbst), NICHT darin. Diese Regeln dürfen deshalb NICHT in header { }
        verschachtelt sein – sonst entstünde der Selektor `header .mobile-open`,
        der nie matcht und das Mobilmenü tot lässt. */
    @media (max-width: 1400px) {

        /* Header bleibt FIXED (s. Desktop-Regel) und über dem Panel (z-index),
           damit Logo + Close klickbar bleiben. NICHT auf position:relative
           zurücksetzen – das würde das fixe Verhalten aufheben. */
        header {
            z-index: 50;

            .btn-cta {
                display: none !important;
            }

            &.mobile-open {
                /* backdrop-filter würde den Header (wie transform) zum Containing
                   Block machen → das fixe Panel würde brechen. Im offenen Menü
                   deshalb deaktivieren; solider Hintergrund für Logo + Close. */
                background: var(--color-bg);
                backdrop-filter: none;

                .burger {
                    display: none;
                }

                .close {
                    display: block;
                }

                /* Vollflächiges Panel: vom Header bis zum unteren Seitenrand */
                .nav-menu {
                    display: flex;
                    flex-direction: column;
                    position: fixed;
                    top: var(--header-h);
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: var(--color-bg);
                    padding: 2rem var(--gap) 7rem;
                    /* unten Platz für den fixen CTA */
                    z-index: 40;
                    overflow-y: auto;
                    overscroll-behavior: contain;
                    animation: menu-fade-in 0.25s ease both;

                    ul {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 1.5rem;
                        width: 100%;
                    }

                    /* Trenner-Punkte im Mobilmenü ausblenden */
                    .topnav-link:not(:last-child)::after {
                        content: none;
                    }

                    /* Menüpunkte gestaffelt von unten aufsteigend einblenden */
                    .topnav-link {
                        font-size: 1.4rem;
                        animation: item-rise 0.35s ease both;
                        animation-delay: calc(var(--i, 0) * 0.06s + 0.1s);
                    }
                }

                /* CTA-Button ganz unten im Mobilmenü, volle Breite */
                .btn-cta {
                    display: inline-flex !important;
                    justify-content: center;
                    position: fixed;
                    left: var(--gap);
                    right: var(--gap);
                    bottom: 2rem;
                    z-index: 41;
                    animation: item-rise 0.35s ease both;
                    animation-delay: 0.45s;
                }
            }
        }
    }

    /* Bei reduzierter Bewegung: keine Stagger-/Einblend-Animation */
    @media (prefers-reduced-motion: reduce) {

        .mobile-open .nav-menu,
        .mobile-open .nav-menu .topnav-link,
        .mobile-open .btn-cta {
            animation: none;
        }
    }
}

@layer main {
    main .container {
        &::before {
            content: '';
            position: absolute;
            left: -70px;
            top: -50px;
            bottom: 0;
            width: 1px;
            background-color: var(--color-muted);
        }

        &::after {
            content: '';
            position: absolute;
            left: -36px;
            top: 34px;
            bottom: 0;
            width: 30px;
            height: 380px;
            background-image: url(/images/startseite-rand.webp);
        }
    }
}

@layer layouts {
    .grid-root {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        gap: 1.5rem;
    }

    .page-index {

        /* Hintergrundbild als <img class="page-bg"> – gleiche Implementierung
           wie .page-fuer-unternehmen (rechte Hälfte, volle main-Höhe, Verlauf
           per mask-image nach links/unten). */
        .page-bg {
            width: 70%;
        }

        /* Mobil/Basis: alles in EINER Spalte untereinander, jede Box eigene Zeile. */
        .hero-headline {
            grid-column: 1 / 25;
            grid-row: 1 / 2;
        }

        .hero-content {
            grid-column: 1 / 25;
            grid-row: 2 / 3;
            align-self: self-start;
        }

        .avatars {
            grid-column: 1 / 25;
            grid-row: 3 / 4;
        }

        .average {
            grid-column: 1 / 25;
            grid-row: 4 / 5;
        }

        .percentage {
            grid-column: 1 / 25;
            grid-row: 5 / 6;
        }

        .gridbox {
            grid-column: 1 / 25;
            grid-row: 6 / 7;
        }

        .performance {
            grid-column: 1 / 25;
            grid-row: 7 / 8;
        }

        .boxes {
            grid-column: 1 / 25;
            grid-row: 8 / 9;
        }

        @media (min-width: 768px) {
            .hero-headline {
                grid-column: 1 / 16;
                grid-row: 1 / 2;
            }

            .hero-content {
                grid-column: 1 / 16;
                grid-row: 2 / 4;
            }

            .avatars {
                grid-column: 16 / 25;
                grid-row: 3 / 4;
            }

            .average {
                grid-column: 16 / 25;
                grid-row: 2 / 3;
            }

            .percentage {
                grid-column: 16 / 25;
                grid-row: 1 / 2;
            }

            .gridbox {
                grid-column: 1 / 25;
                grid-row: 4 / 5;
            }

            .performance {
                grid-column: 1 / 9;
                grid-row: 5 / 6;
            }

            .boxes {
                grid-column: 9 / 25;
                grid-row: 5 / 6;
            }
        }

        @media (min-width: 1200px) {
            .hero-headline {
                grid-column: 1 / 16;
                grid-row: 1 / 2;
            }

            .hero-content {
                grid-column: 1 / 10;
                grid-row: 2 / 3;
            }

            .avatars {
                grid-column: 11 / 18;
                grid-row: 2 / 3;
            }

            .average {
                grid-column: 19 / 25;
                grid-row: 2 / 3;
            }

            .percentage {
                grid-column: 19 / 25;
                grid-row: 1 / 2;
            }

            .gridbox {
                grid-column: 1 / 25;
                grid-row: 3 / 4;
            }

            .performance {
                grid-column: 1 / 7;
                grid-row: 4 / 5;
            }

            .boxes {
                grid-column: 7 / 25;
                grid-row: 4 / 5;
            }
        }
    }

    .page-fuer-unternehmen {
        .grid-root {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: auto;
            grid-template-areas:
                "hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content"
                ". . . . . . . gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox . . . . . ."
                "content content content content content content content content content content content content content content content content content content content content content content content content"
                "boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes";
        }

        .grid-root>.hero-content {
            grid-area: hero-content;
        }

        .grid-root>.gridbox {
            grid-area: gridbox;
        }

        .grid-root>.content {
            grid-area: content;
        }

        .grid-root>.boxes {
            grid-area: boxes;
        }

        @media (min-width: 768px) {
            .grid-root {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                    "hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox"
                    "content content content content content content content content content content content content content content content content content content content content content content content content"
                    "boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes";

            }
        }

        @media (min-width: 1200px) {
            .grid-root {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                    "hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content . . . . . . . . . . . ."
                    "gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox"
                    "content content content content content content content content content content content content content content . . . . . . . . . ."
                    "boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes";

            }
        }
    }

    .page-ueber-uns {
        .grid-root {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: auto;
        }

        .grid-root>.hero-headline {
            grid-column: 1 / 25;
            grid-row: 1 / 2;
        }

        .grid-root>.hero-content {
            grid-column: 1 / 25;
            grid-row: 2 / 3;
        }

        .grid-root>.wolfgang {
            grid-column: 1 / 13;
            grid-row: 4 / 5;
        }

        .grid-root>.kaya {
            grid-column: 13 / 25;
            grid-row: 4 / 5;
        }

        .grid-root>.title2 {
            grid-column: 1 / 25;
            grid-row: 5 / 6;
        }

        .grid-root>.idee {
            grid-column: 1 / 9;
            grid-row: 6 / 7;
        }

        .grid-root>.weg {
            grid-column: 9 / 17;
            grid-row: 6 / 7;
        }

        .grid-root>.heute {
            grid-column: 17 / 25;
            grid-row: 6 / 7;
        }

        .grid-root>.gridbox {
            grid-column: 1 / 25;
            grid-row: 6 / 7;
        }

        .grid-root>.title1 {
            grid-column: 1 / 25;
            grid-row: 3 / 4;
        }

        @media (min-width: 768px) {
            .grid-root {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                grid-template-rows: auto;

            }

            .grid-root>.hero-headline {
                grid-column: 1 / 19;
                grid-row: 1 / 2;
            }

            .grid-root>.hero-content {
                grid-column: 1 / 19;
                grid-row: 2 / 3;
            }

            .grid-root>.gridbox {
                grid-column: 1 / 25;
                grid-row: 7 / 8;
            }
        }

        @media (min-width: 1024px) {
            .grid-root {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                grid-template-rows: auto;

            }

            .grid-root>.hero-headline {
                grid-column: 1 / 13;
                grid-row: 1 / 2;
            }

            .grid-root>.hero-content {
                grid-column: 1 / 13;
                grid-row: 2 / 3;
            }

            .grid-root>.wolfgang {
                grid-column: 7 / 16;
                grid-row: 3 / 4;
            }

            .grid-root>.kaya {
                grid-column: 16 / 25;
                grid-row: 3 / 4;
            }

            .grid-root>.title2 {
                grid-column: 1 / 7;
                grid-row: 4 / 5;
            }

            .grid-root>.idee {
                grid-column: 7 / 13;
                grid-row: 4 / 5;
            }

            .grid-root>.weg {
                grid-column: 13 / 19;
                grid-row: 4 / 5;
            }

            .grid-root>.heute {
                grid-column: 19 / 25;
                grid-row: 4 / 5;
            }

            .grid-root>.gridbox {
                grid-column: 7 / 25;
                grid-row: 5 / 6;
            }

            .grid-root>.title1 {
                grid-column: 1 / 7;
                grid-row: 3 / 4;
            }
        }
    }

    .page-leistungen {
        .grid-root {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: auto;
            grid-template-areas:
                "hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline"
                "hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content"
                "boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes"
                "cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner";
        }

        .grid-root>.hero-headline {
            grid-area: hero-headline;
        }

        .grid-root>.hero-content {
            grid-area: hero-content;
        }

        .grid-root>.boxes {
            grid-area: boxes;
        }

        .grid-root>.cta-banner {
            grid-area: cta-banner;
        }

        @media (min-width: 768px) {
            .grid-root {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                    "hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline . . . . . ."
                    "hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content"
                    "boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes"
                    "cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner . . . . . .";
            }
        }

        @media (min-width: 1024px) {
            .grid-root {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                    "hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline . . . . . . . . . . . ."
                    "hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content"
                    ". . boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes boxes . ."
                    "cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner cta-banner . . . . . . . . . . . .";
            }
        }
    }

    .page-kontakt {
        .grid-root {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: auto;
            grid-template-areas:
                "hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline"
                "hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content"
                "address address address address address address address address address address address address address address address address address address address address address address address address"
                "form form form form form form form form form form form form form form form form form form form form form form form form";
        }

        .grid-root>.hero-headline {
            grid-area: hero-headline;
        }

        .grid-root>.hero-content {
            grid-area: hero-content;
        }

        .grid-root>.form {
            grid-area: form;
        }

        .grid-root>.address {
            grid-area: address;
        }

        @media (min-width: 768px) {
            .grid-root {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                    "hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline . . . . . ."
                    "hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content . . . . . ."
                    "form form form form form form form form form form form form form address address address address address address address address address address address";

            }
        }

        @media (min-width: 1024px) {
            .grid-root {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                    "hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline . . . . . . . . . . . ."
                    "hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content . . . . . . . . . . . ."
                    "form form form form form form form form form form form form form form form form address address address address address address address address";

            }
        }
    }

    .page-fuer-bewerber {
        .grid-root {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: auto;
            grid-template-areas:
                "hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline"
                "hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content"
                "gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox";
        }

        .grid-root>.hero-headline {
            grid-area: hero-headline;
        }

        .grid-root>.hero-content {
            grid-area: hero-content;
        }

        .grid-root>.gridbox {
            grid-area: gridbox;
        }

        @media (min-width: 768px) {
            .grid-root {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                    "hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline . . . . . ."
                    "hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content . . . . . ."
                    "gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox";

            }
        }

        @media (min-width: 1024px) {
            .grid-root {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                    "hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline hero-headline . . . . . . . . . . . ."
                    "hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content hero-content . . . . . . . . . . . ."
                    "gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox gridbox";

            }
        }
    }
}