/**
 * Mega Menu – Styles
 *
 * "Fenster"-Konzept: Primärnavi ist ein Container mit Rahmen + border-radius.
 * Beim Öffnen des Mega Menus schiebt sich der untere Rand nach unten,
 * nur eine Trennlinie zwischen Nav und Panel. Border-radius am Panel-Bottom.
 *
 * Breakpoints:
 *   Desktop:  >= 1280px
 *   Tablet:   1024px – 1279px
 *   Mobile:   < 1024px
 *
 * @package DTVP
 */

/* ==========================================================================
   Header Container
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: transparent;
    padding: 0 var(--container-padding);
    pointer-events: none;
    /* Feste Höhe damit der sticky-Platzhalter im Dokument-Flow
       sich beim Scroll-Shrink nicht ändert (verhindert Flackern) */
    height: var(--header-h);
}

/* Nur der Inner-Container fängt Klicks */
.site-header__inner {
    pointer-events: auto;
}

/* Main-Content hinter den transparenten Header schieben.
   Der Hero füllt dann den gesamten Viewport inkl. Header-Bereich.
   Immer den vollen (unscrolled) Wert nutzen, damit sich das Layout
   beim Scroll-Shrink nicht verschiebt und kein Flackern entsteht. */
.site-main {
    margin-top: calc(-1 * var(--header-h));
}

/* Padding-Top damit Content nicht unterm transparenten Nav verschwindet.
   !important nötig weil .has-padding-full ebenfalls !important setzt.
   Hero-Fullscreen regelt das selbst via .hero__inner + JS. */
.page-header,
.subpage-header {
    padding-top: var(--header-h) !important;
}

/* ==========================================================================
   Nav-Fenster: der gerahmte Container
   ========================================================================== */

.site-header__inner {
    display: flex;
    align-items: stretch;
    max-width: var(--container-max);
    margin: 0 auto;
    position: relative;

    /* Kein backdrop-filter direkt auf __inner, damit Panel eigenen Blur haben kann */
    background: transparent;

    /* Rahmen: links, rechts, unten – oben bündig am Rand */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: none;
    border-radius: 0 0 15px 15px;

    /* Schatten */
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    /* Transition für border-radius Änderung beim Mega-Open */
    transition: border-radius var(--transition-base);
}

/* Glass-Effekt via Pseudo-Element, damit Panel seinen eigenen backdrop-filter nutzen kann */
.site-header__inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 13, 0.5);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border-radius: inherit;
    z-index: -1;
}

/* Wenn Mega Menu offen: untere Ecken gerade, weil Panel die Ecken übernimmt */
.site-header__inner.mega-is-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

/* ==========================================================================
   Positionierung: alles static damit Panel relativ zu __inner ist
   ========================================================================== */

.site-header__nav,
.site-header__menu,
.site-header__menu > li,
.menu-item--has-mega {
    position: static !important;
}

/* ==========================================================================
   Branding: Wortmarke + Signet
   ========================================================================== */

.site-header__inner {
    height: var(--header-h);
    transition:
        height var(--transition-base),
        border-radius var(--transition-base);
}

.site-header.is-scrolled .site-header__inner {
    height: var(--header-h-scrolled);
}

.site-header__branding {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: var(--space-3) var(--space-6);
    /* Trennlinie rechts */
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.site-header__logo-link {
    display: flex;
    align-items: center;
    color: var(--color-white);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.site-header__logo-link:hover {
    opacity: 0.85;
    color: var(--color-white);
}

.site-header__wordmark {
    height: 28px;
    width: auto;
    display: block;
}

.site-header__wordmark-text {
    font-family: 'Archivo Black', Impact, sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-white);
    letter-spacing: 0.02em;
    line-height: 1;
}

.site-header__signet {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-header__signet-svg {
    display: block;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.site-header__nav {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.site-header__menu {
    display: flex;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Vertikale Trennlinien zwischen Menüpunkten */
.site-header__menu > li {
    display: flex;
    align-items: stretch;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.site-header__menu > li:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.site-header__menu > li > a {
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-white);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: color var(--transition-fast);
    position: relative;
}

.site-header__menu > li > a:hover,
.site-header__menu > li.is-open > a {
    color: var(--color-magenta);
}

/* Magenta Underline bei Hover/Active
   Vertikal zentriert zwischen Text-Unterkante und Box-Unterkante:
   Text ist via flex align-items:center bei 50% zentriert, Text-Unterkante
   liegt ~0.5em unter der Mitte; der Mittelpunkt zwischen Text-Unterkante
   und Container-Unterkante liegt bei 3/4 der Höhe + 0.25em. Der Strich
   wird dort zentriert (–1px = halbe Strichhöhe). */
.site-header__menu > li > a::after {
    content: '';
    position: absolute;
    bottom: calc(25% - 0.25em - 1px);
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 24px;
    height: 2px;
    background: var(--color-magenta);
    border-radius: 1px;
    transition: transform var(--transition-fast);
}

.site-header__menu > li > a:hover::after,
.site-header__menu > li.is-open > a::after {
    transform: translateX(-50%) scaleX(1);
}

/* ==========================================================================
   Header Actions (Login / Logout)
   ========================================================================== */

.site-header__actions {
    display: flex;
    align-items: center;
    padding: 0 var(--space-4);
    margin-left: auto;
}

/* Small button variant for header */
.btn--sm {
    height: 32px;
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
    border-radius: 8px;
    white-space: nowrap;
}

/* ==========================================================================
   Mega Menu Panel
   ========================================================================== */

.mega-menu__panel {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    z-index: 999;

    /* Glass-Hintergrund passend zum Nav-Fenster */
    background: rgba(13, 13, 13, 0.5);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);

    /* Border-Radius nur unten – oben nahtlos anschließend */
    border-radius: 0 0 15px 15px;

    /* Rahmen: links, rechts, unten – kein Top (nahtloser Übergang) */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: none;

    /* Trennlinie zwischen Nav und Panel-Content */
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    /* Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity var(--transition-base),
        transform var(--transition-base),
        visibility 0s 300ms;
    pointer-events: none;
}

/* Panel sichtbar */
.menu-item--has-mega.is-open > .mega-menu__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        opacity var(--transition-base),
        transform var(--transition-base),
        visibility 0s 0s;
}

/* Trennlinie oben im Panel-Inner */
.mega-menu__panel-inner {
    padding: var(--space-8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Spalten-Grid
   ========================================================================== */

.mega-menu__columns {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(4, 1fr);
}

.mega-menu__col--1-4 { grid-column: span 1; }
.mega-menu__col--1-3 { grid-column: span 1; }
.mega-menu__col--1-2 { grid-column: span 2; }

/* ==========================================================================
   Spalten-Typ: Link-Gruppen
   ========================================================================== */

.mega-menu__group-title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    position: relative;
}

/* Linksbündiger Magenta-Trennstrich – gleicher Strich wie im Nav-Walker */
.mega-menu__group-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--color-magenta);
    border-radius: 1px;
}

.mega-menu__col--links .mega-menu__link-list + .mega-menu__group-title {
    margin-top: var(--space-6);
}

.mega-menu__link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-menu__link-list li {
    margin: 0;
    padding: 0;
}

.mega-menu__link-list a {
    display: block;
    padding: var(--space-1) 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition:
        color var(--transition-fast),
        padding-left var(--transition-fast);
}

.mega-menu__link-list a:hover {
    color: var(--color-white);
    padding-left: var(--space-2);
}

.mega-menu__overview-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-magenta);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.mega-menu__overview-link:hover {
    color: var(--color-magenta-light);
}

.mega-menu__overview-arrow {
    font-size: 1.2em;
    transition: transform var(--transition-fast);
}

.mega-menu__overview-link:hover .mega-menu__overview-arrow {
    transform: translateX(3px);
}

/* ==========================================================================
   Spalten-Typ: Nächste Termine (Events)
   ========================================================================== */

.mega-menu__events-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.mega-menu__events-item {
    margin: 0;
    padding: 0;
}

.mega-menu__events-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: inherit;
    transition:
        color var(--transition-fast),
        padding-left var(--transition-fast);
}

a.mega-menu__events-link:hover {
    padding-left: var(--space-2);
}

a.mega-menu__events-link:hover .mega-menu__events-name {
    color: var(--color-magenta);
}

a.mega-menu__events-link:hover .mega-menu__events-date {
    color: rgba(255, 255, 255, 0.9);
}

.mega-menu__events-name {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-white);
    line-height: var(--leading-snug);
    transition: color var(--transition-fast);
}

.mega-menu__events-date {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-regular);
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition-fast);
}

.mega-menu__events-empty {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    margin: 0;
}

/* ==========================================================================
   Spalten-Typ: Teaser
   ========================================================================== */

.mega-menu__teaser-image {
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.mega-menu__teaser-image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.mega-menu__col--teaser:hover .mega-menu__teaser-image img {
    transform: scale(1.04);
}

.mega-menu__teaser-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--color-white);
    margin: 0 0 var(--space-2);
    line-height: var(--leading-snug);
}

.mega-menu__teaser-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.65);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-4);
}

.mega-menu__teaser-btn {
    font-size: var(--text-xs);
}

/* ==========================================================================
   Spalten-Typ: Promo-Banner
   ========================================================================== */

.mega-menu__promo {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--space-6);
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mega-menu__promo-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
}

/* Optionale Overlay-Grafik (PNG/SVG) zwischen Hintergrundfarbe und Content.
   object-fit: contain lässt die Hintergrundfarbe um und durch transparente
   Bereiche der Grafik durchscheinen. Deckkraft via inline style aus ACF. */
.mega-menu__promo-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
}

.mega-menu__promo-content {
    position: relative;
    z-index: var(--z-base);
}

/* Eyebrow – identisch zu .mega-menu__group-title
   (JetBrains Mono Bold + linksbündiger 24px-Magenta-Strich) */
.mega-menu__promo-tag {
    display: block;
    width: fit-content;
    position: relative;
    padding: 0 0 var(--space-3);
    margin: 0 0 var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--promo-text-color, var(--color-white));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
}

.mega-menu__promo-tag::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--color-magenta);
    border-radius: 1px;
}

.mega-menu__promo-title {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--promo-text-color, var(--color-white));
    margin: 0 0 var(--space-2);
    line-height: var(--leading-snug);
}

.mega-menu__promo-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--promo-text-color, var(--color-white));
    opacity: 0.85;
    margin: 0 0 var(--space-4);
    line-height: var(--leading-normal);
}

/* Standard-Button-Größe; Chevron skaliert via .btn__icon (width: 1em) mit. */
.mega-menu__promo-btn {
    align-self: flex-start;
}

/* ==========================================================================
   Backdrop Overlay
   ========================================================================== */

.mega-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: calc(var(--z-header) - 1);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--transition-base),
        visibility 0s 300ms;
    pointer-events: none;
}

.mega-menu-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity var(--transition-base),
        visibility 0s 0s;
}

/* ==========================================================================
   Hamburger (Mobile) – ham6 SVG Animation
   ========================================================================== */

.site-header__hamburger {
    display: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    width: 44px;
    height: 44px;
    position: relative;
    z-index: calc(var(--z-header) + 10);
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
}

.ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    user-select: none;
}

.ham__line {
    fill: none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke: #ffffff;
    stroke-width: 5.5;
    stroke-linecap: round;
}

/* ham6: default (☰) */
.ham6 .ham__line--top {
    stroke-dasharray: 40 172;
}

.ham6 .ham__line--middle {
    stroke-dasharray: 40 111;
}

.ham6 .ham__line--bottom {
    stroke-dasharray: 40 172;
}

/* ham6: active (✕) */
.is-active .ham__line--top {
    stroke-dashoffset: -132px;
}

.is-active .ham__line--middle {
    stroke-dashoffset: -71px;
}

.is-active .ham__line--bottom {
    stroke-dashoffset: -132px;
}

/* Signet Color Tokens entfernt – Farben werden jetzt direkt in dtvp_render_signet() gesetzt */

/* ==========================================================================
   Tablet (1024px – 1279px)
   ========================================================================== */

@media (min-width: 1024px) and (max-width: 1279px) {
    .site-header__menu > li > a {
        padding: var(--space-3) var(--space-3);
        font-size: var(--text-xs);
    }

    .mega-menu__panel-inner {
        padding: var(--space-6);
    }

    .mega-menu__columns {
        gap: var(--space-4);
    }
}

/* ==========================================================================
   Mobile (< 1024px)
   ========================================================================== */

@media (max-width: 1023px) {
    .site-header {
        padding: var(--space-2) var(--container-padding) 0;
        z-index: calc(var(--z-header) + 5);
    }

    .site-header__inner {
        border-radius: var(--radius-md);
        padding: 0 var(--space-4);
    }

    .site-header__branding {
        border-right: none;
        padding: var(--space-3) 0;
    }

    .site-header__hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        position: fixed;
        /* Vertikal zentriert zum Header: (header-h - button-h) / 2 + mobile top padding */
        top: calc(var(--space-2) + (var(--header-h) - 44px) / 2);
        right: calc(var(--container-padding) + var(--space-4));
        z-index: 99999;
        transition: top var(--transition-base);
    }

    .site-header__hamburger.is-scrolled-pos {
        top: calc(var(--space-2) + (var(--header-h-scrolled) - 44px) / 2);
    }

    /* Actions: im Sidebar-Menü als Block am Ende */
    .site-header__actions {
        margin-left: 0;
        padding: var(--space-6) 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: var(--space-4);
    }

    .site-header__actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .site-header__menu > li,
    .site-header__menu > li:first-child {
        border-right: none;
        border-left: none;
        flex-direction: column;
        align-items: stretch;
    }

    /* Mobile: Nav als Sidebar */
    .site-header__nav {
        position: fixed !important;
        top: 0;
        right: -100%;
        width: min(380px, 85vw);
        height: 100vh;
        background: rgba(13, 13, 13, 0.96);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        z-index: var(--z-header);
        overflow-y: auto;
        padding: 80px var(--space-6) var(--space-8);
        transition: right var(--transition-base);
        flex-direction: column;
        align-items: stretch;
    }

    .site-header__nav.is-open {
        right: 0;
    }

    .site-header__menu {
        flex-direction: column;
        gap: 0;
    }

    .site-header__menu > li {
        width: 100%;
    }

    .site-header__menu > li > a {
        padding: var(--space-3) 0;
        font-size: var(--text-sm);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        text-transform: none;
        letter-spacing: 0;
    }

    .site-header__menu > li > a::after {
        display: none;
    }

    /* Mega Panel: Akkordeon */
    .mega-menu__panel {
        position: static;
        width: 100%;
        left: 0;
        right: 0;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        transition: max-height var(--transition-base);
    }

    .menu-item--has-mega.is-open > .mega-menu__panel {
        max-height: 2000px;
        transform: none;
    }

    .mega-menu__panel-inner {
        padding: var(--space-4);
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .mega-menu__columns {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .mega-menu__col--1-4,
    .mega-menu__col--1-3,
    .mega-menu__col--1-2 {
        grid-column: span 1;
    }

    .menu-item--has-mega > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .menu-item--has-mega > a::after {
        content: '';
        position: static;
        width: 8px;
        height: 8px;
        border-right: 2px solid rgba(255, 255, 255, 0.5);
        border-bottom: 2px solid rgba(255, 255, 255, 0.5);
        transform: translateY(-2px) rotate(45deg);
        transition: transform var(--transition-fast);
        flex-shrink: 0;
        background: none;
        border-radius: 0;
        display: block;
    }

    .menu-item--has-mega.is-open > a::after {
        transform: translateY(2px) rotate(-135deg);
    }

    .mega-menu-backdrop {
        display: none;
    }

    /* Mobile: Nur Links + Promo anzeigen, Teaser + Events ausblenden */
    .mega-menu__col--teaser,
    .mega-menu__col--events {
        display: none;
    }

    .mega-menu__group-title {
        font-size: 0.6875rem;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-2);
    }

    .mega-menu__group-title::after {
        width: 20px;
        height: 1px;
    }

    .mega-menu__link-list a {
        font-size: var(--text-sm);
        padding: var(--space-2) 0 var(--space-2) var(--space-3);
        color: rgba(255, 255, 255, 0.7);
        border-bottom: none;
    }

    .mega-menu__link-list a:hover {
        color: var(--color-white);
    }

    .mega-menu__overview-link {
        margin-top: var(--space-3);
        padding-left: var(--space-3);
        font-size: var(--text-xs);
    }
}