/* header.css - Enthält nur Header-Styles (Dimension & Menü) */

/* ═══════════════════════════════════════════════════════════════
   kogniflow.css
   Dimension-Header (angepasst) + Seiten-Overrides
═══════════════════════════════════════════════════════════════ */

/* ── Dimension-Header (Hero, vollflächig) ─────────────────── */

#header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 4rem 2rem;
    background-color: #1e2a36;
    background-image:
        radial-gradient(rgba(99, 102, 241, 0.18) 25%, transparent 60%),
        linear-gradient(160deg, #1a1a2e 0%, #2e3842 60%, #1a1a3e 100%);
    transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
    text-align: center;
}

    #header > * {
        transition: opacity 0.325s ease-in-out;
        position: relative;
        margin-top: 3rem;
    }

        #header > *::before {
            content: '';
            display: block;
            position: absolute;
            top: calc(-3rem - 1px);
            left: calc(50% - 1px);
            width: 1px;
            height: calc(3rem + 1px);
            /* background: rgba(255, 255, 255, 0.3); */
        }

    #header > :first-child {
        margin-top: 0;
    }

        #header > :first-child::before {
            display: none;
        }

    /* Logo-Kreis */
    #header .logo {
        width: 5.5rem;
        height: 5.5rem;
        border: solid 1px rgba(255, 255, 255, 0.5);
        border-radius: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        #header .logo img {
            width: 88%;
            height: 88%;
            object-fit: contain;
            border-radius: 100%;
            display: block;
        }

    /* Text-Block */
    #header .content {
        border-style: solid;
        border-color: rgba(255, 255, 255, 0.3);
        border-top-width: 1px;
        border-bottom-width: 1px;
        max-width: 100%;
    }

        #header .content .inner {
            transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
            transition-delay: 0.25s;
            padding: 2.5rem 3rem;
            max-height: 40rem;
            overflow: hidden;
        }

            #header .content .inner > :last-child {
                margin-bottom: 0;
            }

        #header .content h1 {
            color: #ffffff;
            font-size: 2.25rem;
            letter-spacing: 0.1rem;
            margin: 0 0 0.6rem;
            font-weight: 700;
        }

        #header .content p {
            color: rgba(255, 255, 255, 0.7);
            text-transform: uppercase;
            letter-spacing: 0.2rem;
            font-size: 0.78rem;
            line-height: 2;
            margin: 0;
        }

    /* Nav-Leiste */
        #header nav ul {
            display: flex;
            margin-bottom: 0;
            list-style: none;
            padding-left: 3px;
        }

        #header nav ul li {
            padding-left: 0;
            border-left: solid 1px rgba(255, 255, 255, 0.3);
        }

            #header nav ul li:first-child {
                border-left: 0;
                margin: auto;
            }

            #header nav ul li a {
                display: block;
                min-width: 7rem;
                height: 2.75rem;
                line-height: 2.75rem;
                padding: 0 1.25rem;
                text-transform: uppercase;
                letter-spacing: 0.18rem;
                font-size: 0.75rem;
                color: rgba(255, 255, 255, 0.85);
                border-bottom: 0;
                transition: background-color 0.15s ease, color 0.15s ease;
            }

                #header nav ul li a:hover {
                    background-color: rgba(255, 255, 255, 0.075);
                    color: #ffffff;
                }

                #header nav ul li a:active {
                    background-color: rgba(255, 255, 255, 0.175);
                }

/* Preload-Blur-Animation */
body.is-preload #header {
    filter: blur(0.125rem);
}

    body.is-preload #header > * {
        opacity: 0;
    }

    body.is-preload #header .content .inner {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
    }

/* Responsive ── 980px */
@media screen and (max-width: 980px) {
    #header .content p br { display: none; }
}

/* Responsive ── 736px */
@media screen and (max-width: 736px) {

    #header > * { margin-top: 2rem; }

        #header > *::before {
            top: calc(-2rem - 1px);
            height: calc(2rem + 1px);
        }

    #header .logo { width: 4.75rem; height: 4.75rem; }

    #header .content .inner { padding: 2rem 1.25rem; }

    #header .content h1 { font-size: 1.75rem; }

    #header .content p { line-height: 1.875; }

}

/* Responsive ── 480px */
@media screen and (max-width: 480px) {

    #header { padding: 2rem 1rem; }

        #header .content .inner { padding: 2rem 0; }

        #header nav ul {
            flex-direction: column;
            min-width: 10rem;
            max-width: 100%;
        }

            #header nav ul li {
                border-left: 0;
                border-top: solid 1px rgba(255, 255, 255, 0.3);
            }

                #header nav ul li:first-child { border-top: 0; }

                #header nav ul li a {
                    height: 3rem;
                    line-height: 3rem;
                    min-width: 0;
                    width: 100%;
                }

}



/* ═══════════════════════════════════════════════════════════════
   Flowchart-Dropdown-Navigation
═══════════════════════════════════════════════════════════════ */

#header nav ul li.has-dropdown {
    position: relative;
}

/* ─────────────────────────────────────────────────────────────
   Basis & Panel
───────────────────────────────────────────────────────────── */
.has-dropdown > a::after {
    content: '\25BE';
    font-size: 0.8em;
    letter-spacing: 0;
    margin-left: 2px;
    opacity: 0.55;
    vertical-align: 1px;
}

.nav-dropdown {
    left: 50%;
    opacity: 0;
    padding-top: 25px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    transform: translateX(-50%) translateY(10px);
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.35s,
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
    white-space: nowrap;
    z-index: 1000;
}

.nav-dropdown::before {
    background: rgba(255, 255, 255, 0.4);
    content: '';
    height: 25px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 1px;
}

.nav-dropdown ul {
    background: transparent;
    border: none;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: max-content;
}

.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
}

/* ─────────────────────────────────────────────────────────────
   Dropdown-Items (Wrapper)
───────────────────────────────────────────────────────────── */
.nav-dropdown ul > div {
    display: flex;
    margin: 0;
    padding: 20px 5px 0 5px;
    position: relative;
}

.nav-dropdown ul > li {
    display: flex;
    margin: 0;
    padding: 20px 5px 0 5px;
    position: relative;
}

.nav-dropdown ul > div > li {
    padding: 0;
    margin: 0;
    width: 100%;

}

/* ─────────────────────────────────────────────────────────────
   Horizontalbalken (::after)
───────────────────────────────────────────────────────────── */
.nav-dropdown ul > div::after {
    background: rgba(255, 255, 255, 0.4);
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

.nav-dropdown ul > li::after {
    background: rgba(255, 255, 255, 0.4);
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

.nav-dropdown ul > div:first-child::after { left: 50%; }
.nav-dropdown ul > li:first-child::after { left: 50%; }

.nav-dropdown ul > div:first-child:last-child::after {
    left: 50%;
    right: 50%;
    width: 0;
}
.nav-dropdown ul > li:first-child:last-child::after {
    left: 50%;
    right: 50%;
    width: 0;
}

.nav-dropdown ul > div:last-child::after { right: 50%; }
.nav-dropdown ul > li:last-child::after { right: 50%; }

/* ─────────────────────────────────────────────────────────────
   Vertikale Abstiege (::before)
───────────────────────────────────────────────────────────── */
.nav-dropdown ul > div::before {
    background: rgba(255, 255, 255, 0.4);
    content: '';
    height: 20px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 1px;
    z-index: -1;
}

.nav-dropdown ul > li::before {
    background: rgba(255, 255, 255, 0.4);
    content: '';
    height: 20px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 1px;
    z-index: -1;
}

/* ─────────────────────────────────────────────────────────────
   Links und Button-Styling
───────────────────────────────────────────────────────────── */
.nav-dropdown ul > div > li > a {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(22, 32, 44, 0.95);
    border: solid 1px rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    color: rgba(255, 255, 255, 0.85);
    display: block;
    font-size: 0.72rem;
    height: 2.75rem;
    letter-spacing: 0.15rem;
    line-height: 2.75rem;
    min-width: 7.5rem;
    padding: 0 1.25rem;
    text-align: center;
    text-transform: uppercase;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-dropdown ul > li > a {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(22, 32, 44, 0.95);
    border: solid 1px rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    color: rgba(255, 255, 255, 0.85);
    display: block;
    font-size: 0.72rem;
    height: 2.75rem;
    letter-spacing: 0.15rem;
    line-height: 2.75rem;
    min-width: 7.5rem;
    padding: 0 1.25rem;
    text-align: center;
    text-transform: uppercase;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nav-dropdown ul > div > li > a:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.45);
    color: #ffffff;
}
.nav-dropdown ul > li > a:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.45);
    color: #ffffff;
}

.nav-dropdown ul > div > li > a:active { background-color: rgba(255,255,255,0.2); }
.nav-dropdown ul > li > a:active { background-color: rgba(255,255,255,0.2); }

/* ─────────────────────────────────────────────────────────────
   Use-Cases Grid (4 Column Layout)
───────────────────────────────────────────────────────────── */
.uc-dropdown ul {
    justify-content: center;
    width: 38rem;
}

.uc-dropdown ul > div {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 25%;
}
.uc-dropdown ul > li {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 25%;
}

.uc-dropdown ul > div > li > a {
    min-width: 0;
    padding: 0 0.5rem;
    width: 100%;
}
.uc-dropdown ul > li > a {
    min-width: 0;
    padding: 0 0.5rem;
    width: 100%;
}

.uc-dropdown ul > div:nth-child(4)::after { right: 50% !important; }
.uc-dropdown ul > li:nth-child(4)::after { right: 50% !important; }

.uc-dropdown ul > div:last-child::after { right: 0; }
.uc-dropdown ul > li:last-child::after { right: 0; }

.uc-dropdown ul > div:nth-child(n+5) { padding-top: 15px; }
.uc-dropdown ul > li:nth-child(n+5) { padding-top: 15px; }

.uc-dropdown ul > div:nth-child(n+5)::after { display: none; }
.uc-dropdown ul > li:nth-child(n+5)::after { display: none; }

.uc-dropdown ul > div:nth-child(n+5)::before { height: 15px; }
.uc-dropdown ul > li:nth-child(n+5)::before { height: 15px; }

/* ─────────────────────────────────────────────────────────────
   Gestaffelte Item-Animation (stagger beim Öffnen)
───────────────────────────────────────────────────────────── */

/* Ausgangszustand: Items unsichtbar + minimal nach unten versetzt */
.nav-dropdown ul > div,
.nav-dropdown ul > li {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Beim Öffnen: sichtbar + in Position */
.has-dropdown:hover .nav-dropdown ul > div,
.has-dropdown:focus-within .nav-dropdown ul > div,
.has-dropdown:hover .nav-dropdown ul > li,
.has-dropdown:focus-within .nav-dropdown ul > li {
    opacity: 1;
    transform: translateY(0);
}

/* Gestaffelte Verzögerungen (je +70 ms pro Item) */
.has-dropdown:hover .nav-dropdown ul > :nth-child(1),
.has-dropdown:focus-within .nav-dropdown ul > :nth-child(1)  { transition-delay: 0.07s; }
.has-dropdown:hover .nav-dropdown ul > :nth-child(2),
.has-dropdown:focus-within .nav-dropdown ul > :nth-child(2)  { transition-delay: 0.14s; }
.has-dropdown:hover .nav-dropdown ul > :nth-child(3),
.has-dropdown:focus-within .nav-dropdown ul > :nth-child(3)  { transition-delay: 0.21s; }
.has-dropdown:hover .nav-dropdown ul > :nth-child(4),
.has-dropdown:focus-within .nav-dropdown ul > :nth-child(4)  { transition-delay: 0.28s; }
.has-dropdown:hover .nav-dropdown ul > :nth-child(5),
.has-dropdown:focus-within .nav-dropdown ul > :nth-child(5)  { transition-delay: 0.35s; }
.has-dropdown:hover .nav-dropdown ul > :nth-child(6),
.has-dropdown:focus-within .nav-dropdown ul > :nth-child(6)  { transition-delay: 0.42s; }
.has-dropdown:hover .nav-dropdown ul > :nth-child(7),
.has-dropdown:focus-within .nav-dropdown ul > :nth-child(7)  { transition-delay: 0.49s; }
.has-dropdown:hover .nav-dropdown ul > :nth-child(8),
.has-dropdown:focus-within .nav-dropdown ul > :nth-child(8)  { transition-delay: 0.56s; }
.has-dropdown:hover .nav-dropdown ul > :nth-child(9),
.has-dropdown:focus-within .nav-dropdown ul > :nth-child(9)  { transition-delay: 0.63s; }
.has-dropdown:hover .nav-dropdown ul > :nth-child(10),
.has-dropdown:focus-within .nav-dropdown ul > :nth-child(10) { transition-delay: 0.70s; }
.has-dropdown:hover .nav-dropdown ul > :nth-child(11),
.has-dropdown:focus-within .nav-dropdown ul > :nth-child(11) { transition-delay: 0.77s; }
.has-dropdown:hover .nav-dropdown ul > :nth-child(12),
.has-dropdown:focus-within .nav-dropdown ul > :nth-child(12) { transition-delay: 0.84s; }

/* ─────────────────────────────────────────────────────────────
   Responsive
───────────────────────────────────────────────────────────── */
@media screen and (max-width: 736px) {
    .has-dropdown > a::after {
        display: none;
    }
    .nav-dropdown {
        display: none !important;
    }
}