/* ==========================================================================
   Page frame: containers, sections, header, navigation, footer.
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

/* Vertical rhythm between page sections. */
.section {
    padding-block: var(--section-gap);
}

.section--tight {
    padding-block: calc(var(--section-gap) * 0.55);
}

/* Alternating band, used to separate adjacent sections without a rule. */
.section--sand {
    background-color: var(--color-sand-deep);
}

.section--ink {
    background-color: var(--color-ink);
    color: var(--color-sand);
}

.section--ink h2,
.section--ink h3 {
    color: var(--color-sand);
}

/* A small tracked-out label above a heading ("Ausstattung", "Die Gegend"). */
.eyebrow {
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-terracotta);
}

.section--ink .eyebrow {
    color: var(--color-terracotta-light);
}

.section-header {
    max-width: 40rem;
    margin-bottom: var(--space-12);
}

.section-header--centered {
    margin-inline: auto;
    text-align: center;
}

.lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out);
}

/* The frosted glass sits on a pseudo-element, not on the header itself, and that is not
   cosmetic tidiness. An element with `backdrop-filter` becomes the containing block for
   every `position: fixed` descendant — and the mobile navigation drawer lives inside this
   header. With the filter on the header, the drawer's `inset: header-height 0 0 auto`
   resolved against a 73px-tall box instead of the screen: it came out 64px high with 740px
   of links inside it, so a phone showed a sliver with one and a half menu entries.
   On the pseudo-element the effect looks identical and traps nothing. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgb(250 246 240 / 0.88);
    backdrop-filter: blur(12px) saturate(1.4);
}

@supports not (backdrop-filter: blur(1px)) {
    .site-header::before { background-color: var(--color-sand); }
}

/* Toggled by header.js once the page is scrolled away from the top. */
.site-header.is-scrolled {
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    min-height: var(--header-height);
}

.site-brand {
    display: inline-flex;
    flex-direction: column;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    line-height: 1;
    color: var(--color-ink);
    text-decoration: none;
}

.site-brand__mark {
    text-transform: lowercase;
}

.site-brand__tagline {
    margin-top: 2px;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

/* --- Primary navigation -------------------------------------------------- */

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__list li + li {
    margin-top: 0;
}

.site-nav__link {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.site-nav__link:hover {
    background-color: rgb(180 85 45 / 0.08);
    color: var(--color-terracotta-dark);
}

.site-nav__link[aria-current='page'] {
    color: var(--color-terracotta);
    background-color: var(--color-terracotta-tint);
}

/* --- Language switcher --------------------------------------------------- */

.lang-switch {
    position: relative;
}

.lang-switch__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out);
}

.lang-switch__toggle:hover {
    border-color: var(--color-border-strong);
}

.lang-switch__code {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.lang-switch__chevron {
    width: 0.6rem;
    transition: transform var(--duration-fast) var(--ease-out);
}

.lang-switch__toggle[aria-expanded='true'] .lang-switch__chevron {
    transform: rotate(180deg);
}

.lang-switch__menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    min-width: 11rem;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.lang-switch__menu[hidden] {
    display: none;
}

.lang-switch__menu li + li {
    margin-top: 2px;
}

.lang-switch__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--color-ink);
    text-decoration: none;
}

.lang-switch__item:hover {
    background-color: var(--color-sand-deep);
}

.lang-switch__item[aria-current='true'] {
    font-weight: 600;
    color: var(--color-terracotta);
}

/* --- Mobile drawer ------------------------------------------------------- */

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 1.15rem;
    height: 1.5px;
    background-color: var(--color-ink);
    transition: transform var(--duration) var(--ease-out),
                opacity var(--duration-fast) var(--ease-out);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: '';
    position: absolute;
}

.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after { transform: translateY(6px); }

.nav-toggle[aria-expanded='true'] .nav-toggle__bars {
    background-color: transparent;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before {
    transform: rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after {
    transform: rotate(-45deg);
}

@media (max-width: 62rem) {
    .nav-toggle {
        display: inline-flex;
        position: relative;
    }

    /* Off-canvas panel. Kept in the DOM and translated out of view so the
       transition works; `visibility` keeps it out of the tab order when closed. */
    .site-nav {
        position: fixed;
        inset: var(--header-height) 0 0 auto;
        width: min(22rem, 86vw);
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-6);
        padding: var(--space-8) var(--space-6);
        overflow-y: auto;
        background-color: var(--color-surface-raised);
        border-left: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--duration) var(--ease-out),
                    visibility var(--duration);
        z-index: var(--z-drawer);
    }

    .site-nav.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
    }

    .site-nav__link {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-base);
    }

    .lang-switch__menu {
        position: static;
        box-shadow: none;
        border: 0;
        padding: 0;
        margin-top: var(--space-2);
    }
}

/* Dims the page behind the open drawer and closes it on tap. */
.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background-color: rgb(43 38 34 / 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration) var(--ease-out), visibility var(--duration);
}

.nav-scrim.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Locked while the drawer or the lightbox is open, so the page behind cannot scroll.
   Both wwwroot/js/site.js and wwwroot/js/lightbox.js set this class on the body.

   The lock has to sit on <html>, and that is not a matter of taste. A browser normally
   takes the *body's* overflow and applies it to the viewport — but only as long as the
   root element's own overflow is `visible`. Since base.css gives html `overflow-x: clip`
   (to stop the parked drawer adding 320px of scrollable emptiness), that no longer
   holds: the body's `overflow: hidden` would then clip the body box and leave the page
   behind merrily scrolling, with the sticky header breaking loose on the way.

   The rule on body stays as well. It costs nothing and keeps the lock working should the
   clip on html ever be removed again. */
html:has(> body.has-drawer-open) {
    overflow: hidden;
}

body.has-drawer-open {
    overflow: hidden;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    margin-top: var(--section-gap);
    padding-block: var(--space-16) var(--space-8);
    background-color: var(--color-ink);
    color: var(--color-sand-deep);
    font-size: var(--text-sm);
}

.site-footer a {
    color: var(--color-sand);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--color-terracotta-light);
    text-decoration: underline;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--space-10);
    padding-bottom: var(--space-10);
    border-bottom: 1px solid rgb(250 246 240 / 0.14);
}

.site-footer__heading {
    margin-bottom: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-ink-faint);
}

.site-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__list li + li {
    margin-top: var(--space-2);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-6);
    color: var(--color-ink-faint);
}

.site-footer__bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__bottom-links li + li {
    margin-top: 0;
}