/* Shared header and navigation styles */

:root {
    --header-right-gap: 3rem;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    height: 8rem;
    width: 100%;
    background-color: transparent;
    z-index: 60;
}

.header-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.logo-link {
    align-items: center;
    justify-content: center;
    display: flex;
    height: 6rem;
    width: 9rem;
    margin-right: var(--header-right-gap);
}

.logo-img {
    box-sizing: border-box;
    fill: #FF5F00;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.logo-img.scrollout-legal {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Navigation */
.nav-symbol {
    display: flex;
    gap: 2rem;
    padding: 40px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.line {
    width: 3rem;
    height: 3rem;
    display: block;
    transform-style: preserve-3d;
    perspective: 500px;
}

.line polyline {
    fill: none;
    stroke: #FF5F00 !important;
    stroke-width: 10;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: center;
}

.line polyline:nth-child(1),
.line polyline:nth-child(3) {
    transition: transform 0.25s ease 0s;
}

.line polyline:nth-child(2) {
    transition: transform 0.22s cubic-bezier(0.3, 0, 0.2, 1) 0.2s, opacity 0.18s ease 0.2s;
}

body.menu-open #menuToggle .line polyline:nth-child(1) {
    transition-delay: 0.15s;
    transform: translateY(25px) rotate(45deg);
}

body.menu-open #menuToggle .line polyline:nth-child(2) {
    transition-delay: 0s;
    transform: rotateX(85deg) scaleY(0.35);
    opacity: 0;
}

body.menu-open #menuToggle .line polyline:nth-child(3) {
    transition-delay: 0.15s;
    transform: translateY(-25px) rotate(-45deg);
}

.fullscreen-nav {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.fullscreen-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, 
    rgba(255, 255, 255, 1) 28%,
    rgba(255, 255, 255, 0.88) 40%,
    rgba(255, 255, 255, 0.7) 55%, 
    rgba(255, 255, 255, 0.4) 75%,  
    rgba(255, 255, 255, 0.15) 90%, 
    rgba(255, 255, 255, 0) 100%    
    );
    z-index: 1;
    pointer-events: none;
}

.fullscreen-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.fullscreen-nav .primary-nav {
    position: relative;
    z-index: 2;
    list-style: none;
    margin: 0;
    padding: 1rem 8rem 8rem;
    text-align: left;
}

.fullscreen-nav .primary-nav li + li {
    margin-top: 0.25rem;
}

.fullscreen-nav .primary-nav > li > a {
    color: #000;
    text-decoration: none;
    font-size: 8rem;
    line-height: 1;
    position: relative;
    display: inline-block;
}

.fullscreen-nav .primary-nav > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s ease;
}

.fullscreen-nav .primary-nav > li > a:hover::after,
.fullscreen-nav .primary-nav > li > a:focus-visible::after {
    transform: scaleX(1);
}

.fullscreen-nav .primary-nav .primary-subnav {
    list-style: none;
    margin: 0;
    padding: 0 0 0.25rem 1.35rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.28s ease, opacity 0.2s ease, margin-top 0.28s ease;
}

.fullscreen-nav .primary-nav .has-submenu:hover .primary-subnav,
.fullscreen-nav .primary-nav .has-submenu:focus-within .primary-subnav {
    max-height: 12rem;
    opacity: 1;
    margin-top: 0.7rem;
}

.fullscreen-nav .primary-nav .primary-subnav li + li {
    margin-top: 0.35rem;
}

.fullscreen-nav .primary-nav .primary-subnav a {
    color: #000;
    text-decoration: none;
    font-size: 1.9rem;
    line-height: 1.15;
    position: relative;
    display: inline-block;
}

.fullscreen-nav .primary-nav .primary-subnav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s ease;
}

.fullscreen-nav .primary-nav .primary-subnav a:hover::after,
.fullscreen-nav .primary-nav .primary-subnav a:focus-visible::after {
    transform: scaleX(1);
}

.fullscreen-nav .nav-preview-picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.fullscreen-nav .nav-preview-html {
    border: 0;
    background: #fff;
}

.fullscreen-nav .nav-preview-picture.is-active {
    opacity: 1;
}

.secondary-nav {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 3rem;
    list-style: none;
    margin: 0;
    left: 8rem;
    bottom: 5.8rem;
    padding: 0;
    text-align: left;
}

.secondary-nav li + li {
    margin-top: 0;
}

.social-media-item {
    position: relative;
}

.social-media-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 1rem;
}

.social-icons-tray {
    position: absolute;
    left: 0;
    top: calc(100% + 0.9rem);
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 0;
    white-space: nowrap;
}

.social-icon {
    width: auto;
    height: auto;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #000;
    font-size: 1.15rem;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-14px) translateY(-28px) rotate(-12deg);
    box-shadow: none;
}

.social-media-item:hover .social-icon,
.social-media-item:focus-within .social-icon,
.social-media-item.is-open .social-icon {
    pointer-events: auto;
    animation: social-icon-drop 0.32s cubic-bezier(0.22, 0.9, 0.2, 1) forwards;
}

.social-media-item:hover .social-icon:nth-child(1),
.social-media-item:focus-within .social-icon:nth-child(1),
.social-media-item.is-open .social-icon:nth-child(1) {
    animation-delay: 0s;
}

.social-media-item:hover .social-icon:nth-child(2),
.social-media-item:focus-within .social-icon:nth-child(2),
.social-media-item.is-open .social-icon:nth-child(2) {
    animation-delay: 0.08s;
}

.social-media-item:hover .social-icon:nth-child(3),
.social-media-item:focus-within .social-icon:nth-child(3),
.social-media-item.is-open .social-icon:nth-child(3) {
    animation-delay: 0.16s;
}

.social-media-item:hover .social-icon:nth-child(4),
.social-media-item:focus-within .social-icon:nth-child(4),
.social-media-item.is-open .social-icon:nth-child(4) {
    animation-delay: 0.24s;
}

.social-icon:hover,
.social-icon:focus-visible {
    color: #111;
}

@keyframes social-icon-drop {
    0% {
        opacity: 0;
        transform: translateX(-14px) translateY(-28px) rotate(-12deg);
    }
    60% {
        opacity: 1;
        transform: translateX(0) translateY(8px) rotate(0deg);
    }
    78% {
        transform: translateX(0) translateY(-2px) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(0deg);
    }
}

.secondary-nav a {
    color: #000;
    text-decoration: none;
    font-size: 1.2rem;
    position: relative;
    display: inline-block;
}

.secondary-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s ease;
}

.secondary-nav a:hover::after,
.secondary-nav a:focus-visible::after {
    transform: scaleX(1);
}

.social-media-item:hover > .secondary-nav-text::after,
.social-media-item:focus-within > .secondary-nav-text::after {
    transform: scaleX(1);
}

.adress {
    position: absolute;
    z-index: 2;
    right: var(--header-right-gap);
    bottom: 7rem;
    margin: 0;
    color: #FF5F00;
    font-size: 1rem;
    text-align: right;
    line-height: 1.4;
}

body.menu-open {
    overflow: hidden;
    /* iOS-Fix: verhindert Scrollen unter der Nav auch auf Safari Mobile */
    position: fixed;
    width: 100%;
}

/* Index Farbanpassung: Menü-Symbol */
body.colorScheme-dark .line polyline {
    stroke: #ffffff;
}

body.colorScheme-light .line polyline {
    stroke: #000000;
}

/* Index Farbanpassung: Logo */
body.colorScheme-light .logo-img {
    filter: invert(1);
}

body.colorScheme-dark .logo-img {
    filter: invert(0);
}

body.menu-open .line polyline {
    stroke: #000;   /* überschreibt die colorScheme-Regel */
}

body.colorScheme-dark.menu-open .logo-img {
    filter: invert(1);
}

/* ==============================================
   Navigation – Responsive
   ============================================== */

/* Submenu-Toggle-Button (nur Mobile sichtbar) */
.submenu-toggle {
    display: none; /* auf Desktop versteckt */
}

/* Adresse in der secondary-nav-Liste (nur Mobile sichtbar) */
.secondary-nav-adress-item {
    display: none;
}

@media (max-width: 768px) {
    /* has-submenu li: Link und Toggle nebeneinander */
    .fullscreen-nav .primary-nav .has-submenu {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .fullscreen-nav .primary-nav .has-submenu > a {
        flex: 1;
    }

    .fullscreen-nav .primary-nav .has-submenu .primary-subnav {
        flex-basis: 100%;
    }

    .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0.4rem 0.6rem;
        margin-left: 0.6rem;
        color: #FF5F00;
    }

    .submenu-toggle svg {
        width: 2rem;
        height: 1.4rem;
        display: block;
        overflow: visible;
    }

    .submenu-toggle svg polyline {
        fill: none;
        stroke: #FF5F00;
        stroke-width: 10;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.25s ease;
        transform-box: fill-box;
        transform-origin: center;
    }

    .has-submenu.is-open .submenu-toggle svg polyline {
        transform: rotate(180deg);
    }

    .fullscreen-nav .primary-nav > li > a {
        font-size: clamp(3rem, 11vw, 5.5rem);
    }

    /* Fullscreen-Nav: Inhalt zentrieren, kein Scroll standardmäßig */
    .fullscreen-nav {
        justify-content: center;
        overflow: hidden;
    }

    .fullscreen-nav .primary-nav {
        padding: 1rem 2rem 0rem;
    }

    /* Nur scrollen wenn Works-Submenu ausgeklappt ist */
    .fullscreen-nav:has(.has-submenu.is-open) {
        overflow-y: auto;
        justify-content: flex-start;
        padding-top: 2rem;
    }

    .fullscreen-nav .primary-nav .primary-subnav a {
        font-size: 1.5rem;
    }

    /* Mobile: Hover/focus-within deaktivieren — Submenu wird per JS-Klick (.is-open) gesteuert */
    .fullscreen-nav .primary-nav .has-submenu:hover .primary-subnav,
    .fullscreen-nav .primary-nav .has-submenu:focus-within .primary-subnav {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
    }

    .fullscreen-nav .primary-nav .has-submenu.is-open .primary-subnav {
        max-height: 20rem;
        opacity: 1;
        margin-top: 0.7rem;
        align-items: center;
        justify-content: center;
    }

    .has-submenu.is-open .submenu-toggle svg polyline {
        transform: rotate(180deg);
    }

    .secondary-nav {
        display: flex;
        position: static;
        left: auto;
        bottom: auto;
        gap: 0rem;
        flex-direction: column;
        align-items: flex-start;
        padding: 0 2rem 5rem; /* Platz für die Adresse am unteren Rand */
        margin-top: 2rem;
    }

    .logo-link {
        height: 4.5rem;
        width: 7rem;
        margin-right: 2rem; 
    }

    .header {
        height: 6rem;
        background-color: #ffffff;
    }

    /* Fix: CSS-Variable für den Header-Gap auf Mobile zurücksetzen */
    :root {
        --header-right-gap: 0rem;
    }

    /* Kleinere Touch-Area für den Hamburger-Button */
    .nav-symbol {
        padding: 16px 20px;
    }

    /* Vollständig weißer Hintergrund im Vollbild-Menü (kein Gradient/Glaseffekt) */
    .fullscreen-nav::before {
        background: #ffffff;
    }

    /* Preview-Bilder und -Videos im Menü auf Mobile ausblenden */
    .nav-preview-picture {
        display: none !important;
    }

    /* Adresse: immer am unteren Rand, unabhängig vom Scroll-Zustand */
    p.adress {
        position: absolute;
        bottom: 2rem;
        left: 2rem;
        right: 2rem;
        text-align: left;
        font-size: 1rem;
        line-height: 1.5;
        margin: 0;
        color: #FF5F00;
        z-index: 3;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .fullscreen-nav .primary-nav > li > a {
        font-size: 6rem;
    }

    .fullscreen-nav .primary-nav {
        padding: 1rem 5rem 6rem;
    }

    .secondary-nav {
        left: 5rem;
    }
}