/*
 * Page frame: skip link, header with both navigations, footer, page header band and the
 * two content shells (single column, column plus sticky aside).
 *
 * Media queries appear only where the structure genuinely changes — the navigation switch
 * at 1140px and the two-column split. Type scales with clamp() instead (docs/06).
 */

/* ---------------------------------------------------------------- shell ---------- */

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page__main {
    flex: 1;
}

/* The sticky header must not cover the skip-link target. */
#inhalt {
    scroll-margin-top: var(--kopfhoehe);
}

/* Horizontal padding and maximum width of every band of content. */
.wrap {
    width: 100%;
    max-width: var(--inhaltsbreite);
    margin-inline: auto;
    padding-inline: var(--seitenrand);
}

/*
 * The design does not have one section rhythm, it has three, and the difference is visible:
 * sub-pages and detail bodies breathe at 4.5rem, the start page at 5rem with a steeper 6vw,
 * and the figures band is deliberately the tightest of them. This is the sub-page tier —
 * the most common one and therefore the default.
 */
.section {
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* The wider rhythm of the start page (T1). */
.section--roomy {
    padding-block: clamp(3rem, 6vw, 5rem);
}

.section--band {
    background: var(--papier2);
    border-top: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
    padding-block: clamp(2rem, 4vw, 3rem);
}

.section--weiss {
    background: var(--weiss);
    border-top: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
    padding-block: clamp(3rem, 6vw, 5rem);
}

.section--dark {
    background: var(--tinte);
    color: var(--tinte-text);
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

.section--dark h2 {
    color: var(--papier);
}

/* ---------------------------------------------------------------- skip link ------ */

/*
 * First focusable element of every page. Off-screen until focused — never display:none,
 * which would take it out of the tab order (docs/09).
 */
.skip-link {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: var(--z-sprungmarke);
    background: var(--tinte);
    color: var(--papier);
    padding: 0.8rem 1.2rem;
    font-size: 0.9rem;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* ---------------------------------------------------------------- header --------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-kopf);
    background: var(--kopf-grund);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--linie);
}

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

/* Monogram plus the two-line wordmark, set in Playfair — the PNG wordmark is not used
   here, the design asks for live text (docs/04, T15). */
.brand {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    flex-shrink: 0;
    color: var(--tinte);
    text-decoration: none;
}

.brand__monogram {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.brand__name {
    display: flex;
    flex-direction: column;
    line-height: 1.12;
}

.brand__title {
    font-family: var(--schrift-titel);
    font-size: 1.1rem;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.brand__tagline {
    font-size: 0.66rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--akzent);
    padding-left: 0.1em;
}

/* ---------------------------------------------------------------- main nav ------- */

.main-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.main-nav__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.55rem;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--tinte);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.main-nav__link:hover {
    color: var(--akzent);
}

/* Stays marked on sub-pages: /der-verein/vorstand keeps "Der Verein" active (docs/02). */
.main-nav__link[aria-current] {
    color: var(--akzent);
    border-bottom-color: var(--akzent);
}

.main-nav__search {
    margin-left: 0.5rem;
}

/* ---------------------------------------------------------------- nav drawer ----- */

/*
 * Burger navigation below 1140px, built on <details> so it works without JavaScript
 * (docs/04, T15). assets/js/nav.js only adds Escape, focus handling and aria-expanded.
 *
 * The <summary> stays where it is when the panel opens and turns into the close button, so
 * the sticky header remains visible above the overlay: monogram left, close right, exactly
 * the 88px band the design asks for.
 */
.nav-drawer {
    flex-shrink: 0;
}

.nav-drawer__toggle {
    display: grid;
    place-items: center;
    gap: 5px;
    width: 52px;
    height: 52px;
    border: 1px solid var(--linie);
    cursor: pointer;
    list-style: none;
}

.nav-drawer__toggle::-webkit-details-marker {
    display: none;
}

.nav-drawer__toggle:hover {
    border-color: var(--akzent);
}

.nav-drawer__bar {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--tinte);
}

/* Open state: the three bars give way to the close glyph. */
.nav-drawer[open] .nav-drawer__toggle {
    position: relative;
    z-index: calc(var(--z-kopf) + 1);
}

.nav-drawer[open] .nav-drawer__bar {
    display: none;
}

.nav-drawer__close {
    display: none;
    font-family: var(--schrift-titel);
    font-size: 1.5rem;
    line-height: 1;
}

.nav-drawer[open] .nav-drawer__close {
    display: block;
}

/*
 * Two accessible names, one per state. The inactive one is display:none and therefore gone
 * from the accessibility tree — that is how the control stays correctly named without
 * JavaScript, which cannot swap an aria-label.
 */
.nav-drawer__label--open {
    display: none;
}

.nav-drawer[open] .nav-drawer__label--closed {
    display: none;
}

.nav-drawer[open] .nav-drawer__label--open {
    display: block;
}

/*
 * Positioned against .site-header, not the viewport: the header carries a backdrop-filter,
 * which makes it the containing block for fixed children anyway. Absolute plus a sticky
 * header behaves like a full-screen overlay — the panel travels with the header and covers
 * the page from the lower edge of the header downwards.
 *
 * The height subtracts 100%, not the 88px token: the containing block is the header, so
 * 100% is whatever the header actually measures — which is more than 88px as soon as the
 * wordmark needs a second line on a narrow screen.
 */
.nav-drawer__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-overlay);
    height: calc(100vh - 100%);
    height: calc(100dvh - 100%);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--papier);
    padding: 1.5rem var(--seitenrand) 3rem;
}

@media (prefers-reduced-motion: no-preference) {
    .nav-drawer[open] .nav-drawer__panel {
        animation: nav-drawer-fade 0.2s ease;
    }
}

@keyframes nav-drawer-fade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.nav-drawer__link {
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--linie2);
    font-family: var(--schrift-titel);
    font-size: 1.55rem;
    line-height: 1.2;
    color: var(--tinte);
    text-decoration: none;
}

.nav-drawer__link[aria-current] {
    color: var(--akzent);
}

.nav-drawer__secondary {
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--linie2);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grau);
    text-decoration: none;
}

.nav-drawer__secondary:last-child {
    border-bottom: 0;
}

/* Set by assets/js/nav.js while the drawer is open, so the page behind it does not scroll.
   Without JavaScript the panel simply scrolls with the sticky header. */
.nav-is-open {
    overflow: hidden;
}

/*
 * The switch at 1140px is deliberately high: six navigation items plus the wordmark need
 * the room, otherwise the header line breaks (docs/03).
 */
@media (width < 1140px) {
    .main-nav {
        display: none;
    }
}

@media (width >= 1140px) {
    .nav-drawer {
        display: none;
    }
}

/* ---------------------------------------------------------------- page header ---- */

.page-header {
    background: var(--papier2);
    border-bottom: 1px solid var(--linie);
    padding-block: clamp(2.2rem, 5vw, 4rem);
}

.page-header__kicker {
    font-size: 0.76rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--akzent);
    margin-bottom: var(--raum2);
}

.page-header__lead {
    margin-top: var(--raum3);
}

/* Breadcrumb above the H1 of detail pages (T4, T8, T11). */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grau);
    margin-bottom: var(--raum2);
}

.breadcrumb a {
    color: var(--grau);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--akzent);
}

/* ---------------------------------------------------------------- content shells - */

/* Text column plus side column. Single column until there is room for both. */
.with-aside {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
}

@media (width >= 1024px) {
    .with-aside {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 20rem);
        align-items: start;
    }

    .with-aside__side {
        position: sticky;
        top: var(--sticky-abstand);
    }
}

/* The aside carries more than one box on the contact page (T12). */
.with-aside__side > * + * {
    margin-top: var(--raum3);
}

/* ---------------------------------------------------------------- footer --------- */

.site-footer {
    margin-top: var(--raum5);
    background: var(--papier2);
    border-top: 1px solid var(--linie);
}

.site-footer__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
}

.site-footer__monogram {
    width: 52px;
    height: 52px;
    object-fit: contain;
    opacity: 0.85;
    margin-bottom: var(--raum2);
}

.site-footer__name {
    font-family: var(--schrift-titel);
    font-size: 1.15rem;
    line-height: 1.35;
}

.site-footer__heading {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--akzent);
    margin-bottom: 0.9rem;
}

.site-footer__text {
    font-size: 0.92rem;
    color: var(--tinte2);
}

.site-footer__link {
    display: block;
    padding: 0.4rem 0;
    font-size: 0.92rem;
    color: var(--tinte2);
    text-decoration: none;
}

.site-footer__link:hover {
    color: var(--akzent);
}

.site-footer__links {
    display: flex;
    flex-direction: column;
}

/* Date in front of an upcoming event in the footer. */
.site-footer__date {
    color: var(--akzent);
    font-variant-numeric: tabular-nums;
    margin-right: 0.5rem;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum2);
    justify-content: space-between;
    border-top: 1px solid var(--linie);
    padding-block: 1.2rem 2.5rem;
    font-size: 0.82rem;
    color: var(--grau);
}

/* Detail headings are capped at 24ch so a long title keeps its shape (T4, T8, T11). */
.page-header__title--narrow {
    max-width: 24ch;
}

.breadcrumb__separator {
    color: var(--linie);
}