/* =====================================================================
   Riedler – layout.css
   Page-Frame, Header (dark), Nav-Overlay mit Hover-Submenu.
   ===================================================================== */

/* --------------- Header --------------- */

.site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 50;
    height: var(--header-h);
    color: var(--riedler-light);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background var(--dur) var(--ease-out),
                backdrop-filter var(--dur) var(--ease-out),
                -webkit-backdrop-filter var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
    border-bottom: 1px solid transparent;
}

/* iOS-style frosted glass — translucent dark + heavy backdrop blur + saturation pop */
.site-header--scrolled {
    background: rgba(20, 24, 30, .55);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom-color: rgba(255, 255, 255, .08);
}
/* Fallback ohne backdrop-filter — etwas opaker, damit Text lesbar bleibt */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header--scrolled { background: rgba(20, 24, 30, .92); }
}
body.nav-open .site-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}

.site-header__inner {
    height: 100%;
    width: 100%;
    padding-inline: var(--container-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    color: inherit;
}
.site-header__logo img { height: clamp(42px, 3.3vw, 52px); width: auto; display: block; }

.site-header__right {
    display: inline-flex;
    align-items: center;
    gap: 28px;
}

/* "Drei Punkte" / Burger – minimaler Trigger wie im Figma */
.site-header__burger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 52px;
    height: 52px;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    transition: opacity var(--dur) var(--ease-out);
}
.site-header__burger span {
    width: 34px;
    height: 3px;
    background: var(--riedler-white);
    transform-origin: center;
    transition: transform var(--dur) var(--ease-out);
}
body.nav-open .site-header__burger {
    color: var(--riedler-white);
}
body.nav-open .site-header__burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.nav-open .site-header__burger span:nth-child(2) { transform: translateY(-5.5px) rotate(-45deg); }

/* --------------- Nav-Overlay (Burger-Menü) --------------- */

.site-nav {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow-y: auto;
    background: #8290a0;
    color: var(--riedler-white);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease-out),
                visibility 0s linear var(--dur);
}
body.nav-open .site-nav {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--dur) var(--ease-out),
                visibility 0s linear 0s;
}
body.nav-open { overflow: hidden; }

.site-nav__grid {
    position: relative;
    min-height: 100vh;
    padding: calc(var(--header-h) + clamp(40px, 6vw, 96px)) var(--container-pad) clamp(40px, 6vw, 80px);
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 1.4fr 1.2fr;
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 5vw, 96px);
    row-gap: clamp(32px, 5vw, 64px);
}

/* --- Spalte 1: Top-Pages --- */

.site-nav__top {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
    align-content: start;
}
.site-nav__item { position: static; }
.site-nav__link {
    display: inline-block;
    padding: 4px 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -.015em;
    color: var(--riedler-white);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.site-nav__link:hover,
.site-nav__item--trail > .site-nav__link,
.site-nav__link[aria-current="page"] {
    border-bottom-color: rgba(26, 33, 40, .55);
    color: var(--riedler-dark);
}

/* --- Submenu-Panel: erscheint nur on hover/focus auf Items mit Children --- */

.site-nav__sub-panel {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 100%;
    padding-inline-start: clamp(32px, 5vw, 96px);
    width: 70vw;
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    column-gap: clamp(32px, 4vw, 80px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                visibility 0s linear var(--dur);
}
.site-nav__item--has-submenu:hover > .site-nav__sub-panel,
.site-nav__item--has-submenu:focus-within > .site-nav__sub-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                visibility 0s linear 0s;
}

.site-nav__col {
    display: grid;
    gap: clamp(28px, 3vw, 48px);
    align-content: start;
}

.site-nav__group { display: grid; gap: 14px; }
.site-nav__group-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.375rem;
    letter-spacing: -.005em;
    color: var(--riedler-white);
}
.site-nav__group-title a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--dur) var(--ease-out);
}
.site-nav__group-title a:hover { opacity: .85; }

.site-nav__group-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0px;
}
.site-nav__group-list a {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: .9375rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    transition: color var(--dur) var(--ease-out);
}
.site-nav__group-list a:hover,
.site-nav__group-list a[aria-current="page"] {
    color: var(--riedler-white);
}

/* --- Kontakt unten links --- */

.site-nav__contact {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    font-style: normal;
    font-family: var(--font-sans);
    font-size: .9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .9);
    display: grid;
    gap: 18px;
}
.site-nav__contact-block { margin: 0; }
.site-nav__contact a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur) var(--ease-out);
}
.site-nav__contact a:hover { color: var(--riedler-white); }

/* --------------- Main / Section --------------- */

main { display: block; }
.section { padding-block: var(--section-pad-y); }
.section--dark { background: var(--bg-dark); color: var(--text-on-dark); }
.section--mid  { background: var(--riedler-dark); color: var(--text-on-dark); }
.section--tight { padding-block: clamp(48px, 5vw, 96px); }

/* --------------- Helle Seiten (Impressum, Datenschutz) --------------- */
/* Auf Seiten mit weißem Hintergrund (body.page--light) verschwinden das weiße
   Logo und die weißen Burger-Linien im transparenten Header am Seitenanfang.
   Nur in genau diesem Zustand (Header nicht gescrollt, Menü geschlossen) die
   Marken dunkel einfärben. Beim Scrollen wird der Header zu dunklem
   Frosted-Glass, bei offenem Menü liegt das dunkle Overlay darüber – dann
   bleiben Logo/Burger hell. */
.page--light:not(.nav-open) .site-header:not(.site-header--scrolled) .site-header__logo img {
    filter: invert(1);
}
.page--light:not(.nav-open) .site-header:not(.site-header--scrolled) .site-header__burger span {
    background: var(--riedler-text);
}

/* Mehr Luft zur fixierten Navbar: auf hellen Textseiten ist .text-body die
   erste Section und liegt sonst fast bündig unter dem Header (88px). */
.page--light .text-body {
    padding-block-start: calc(var(--header-h) + clamp(32px, 5vw, 64px));
}

/* --- Nav-Overlay: Videos ausblenden (2026-07-21) ---------------------
   Autoplay-<video> bekommt vom Browser eine eigene GPU-Compositing-Layer,
   die trotz z-index 40 / opakem Hintergrund ÜBER dem fixierten Nav-Overlay
   gemalt wird (Hit-Testing sagt korrekt „Nav oben", man sieht das Video
   trotzdem durch). Kein z-index-Problem — translateZ/will-change auf .site-nav
   hilft besonders in iOS-Safari nicht. Zuverlaessig ueber alle Engines:
   Video waehrend geoeffnetem Menue unsichtbar schalten. `visibility` statt
   `display`, damit es kein Reflow gibt und die Wiedergabe nicht neu startet. */
body.nav-open video { visibility: hidden; }