/*
 * The recurring building blocks of docs/03 and docs/04: date block, image frame and
 * fallback tile, buttons, category badges, form fields, cards, event rows, calendar grid,
 * pagination, empty state, cookie notice, back-to-top.
 *
 * The whole design is rectangular: no border-radius anywhere except the two circular
 * buttons (search, back to top). No gradients, no shadows beyond the two tokens.
 */

/* ---------------------------------------------------------------- date block ----- */

/*
 * The graphic backbone of every event list (docs/03). 84px in compact lists, 92px in the
 * event list of T5.
 */
.date-block {
    display: block; /* it is a <time> element, which is inline by default */
    width: 84px;
    flex-shrink: 0;
    border: 1px solid var(--linie);
    background: var(--weiss);
    padding: 0.5rem 0.25rem 0.6rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.date-block--wide {
    width: 92px;
    padding: 0.7rem 0.3rem;
}

/* Only the list variant carries a weekday; the template omits it on the start page. */
.date-block__weekday {
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grau);
    line-height: 1.4;
}

.date-block__day {
    display: block;
    font-family: var(--schrift-titel);
    font-size: 1.9rem;
    line-height: 1;
}

.date-block--wide .date-block__day {
    font-size: 2.1rem;
    line-height: 1.05;
}

.date-block__month {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--akzent);
    line-height: 1.4;
}

.date-block--wide .date-block__month {
    margin-top: 0;
    letter-spacing: 0.14em;
}

/* The compact variant sets the year apart instead of running it into the month line. */
.date-block__year {
    display: block;
    font-size: 0.68rem;
    color: var(--grau);
    line-height: 1.4;
}

/* ---------------------------------------------------------------- images --------- */

/*
 * Every image goes through templates/_partials/image_or_fallback.html.twig, which renders
 * either a <picture> or the H tile below into .media. The aspect ratio is part of the
 * frame, so a missing image never changes the layout.
 */
.media {
    position: relative;
    overflow: hidden;
    background: var(--papier2);
}

.media--4x3 {
    aspect-ratio: 4 / 3;
}

.media--16x9 {
    aspect-ratio: 16 / 9;
}

.media--3x4 {
    aspect-ratio: 3 / 4;
}

/*
 * The whole picture at its own ratio, for the lead image of a report. Two thirds of the stock
 * is portrait, and a portrait photograph in a landscape frame loses more of itself the wider
 * the frame is — which is why the large view used to show less than the card that led to it
 * (Kundenrückmeldung 18.08.2026, docs/OFFENE-PUNKTE.md § 10). Nothing is cut here; the height
 * is capped instead, so a portrait does not push the text off the screen.
 */
.media--natural {
    display: flex;
    justify-content: center;
    background: none;
}

.media--natural picture {
    display: contents;
}

/*
 * The image is taken out of the flow rather than stretched inside it: it sits in a <picture>,
 * whose own height is that of its content, so a "height: 100%" here would measure itself
 * against the image it is supposed to size. It then kept its own ratio and the frame clipped
 * whatever stuck out at the bottom — the crop was not centred, it was the top of the picture.
 * Positioned against .media, which has the ratio, the frame is definite and cover centres.
 */
.media__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Capped in height, not in width: a 3:4 photograph at the full width of the text column would
 * be a screenful of its own and push the report out of sight. 34rem is the tallest a picture
 * gets on a roomy screen, 70vh the tallest on a shallow one — whichever is smaller, so the
 * first lines of the text stay in view either way.
 */
.media--natural .media__image {
    position: static;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(34rem, 70vh);
}

/*
 * Fallback tile: shown while the 86 missing image files are outstanding
 * (docs/OFFENE-PUNKTE.md §1) and for every entry that legitimately has no image.
 */
.media__fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: var(--papier2);
    border: 1px solid var(--linie);
}

.media__monogram {
    width: 30%;
    min-width: 48px;
    opacity: 0.28;
}

/*
 * Mount for small historical originals — the key image is only 480×343 and is never
 * upscaled (docs/03). This mount carries one of the two shadows the design allows.
 */
.passepartout {
    padding: clamp(1rem, 3vw, 2rem);
    background: var(--weiss);
    border: 1px solid var(--linie);
    box-shadow: var(--schatten-bild);
}

.passepartout .media {
    background: none;
}

figure {
    margin: 0;
}

figcaption {
    margin-top: var(--raum2);
    font-size: 0.85rem;
    color: var(--grau);
    line-height: 1.55;
}

/* ---------------------------------------------------------------- buttons -------- */

/* Two levels, no third (docs/03). */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 44px;
    padding: 0.95rem 1.8rem;
    border: 1px solid transparent;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
}

.button--primary {
    background: var(--tinte);
    border-color: var(--tinte);
    color: var(--papier);
}

.button--primary:hover {
    background: var(--akzent);
    border-color: var(--akzent);
    color: #fff;
}

.button--secondary {
    background: none;
    border-color: var(--linie);
    color: var(--tinte);
}

.button--secondary:hover {
    border-color: var(--akzent);
    color: var(--akzent);
}

/* The same two levels on a --tinte background (T1, closing section). */
.button--accent {
    background: var(--akzent);
    border-color: var(--akzent);
    color: #fff;
}

.button--accent:hover {
    background: var(--akzent-hell);
    border-color: var(--akzent-hell);
}

.button--on-dark {
    background: none;
    border-color: var(--tinte-linie);
    color: var(--papier);
}

.button--on-dark:hover {
    border-color: var(--akzent-hell);
    color: var(--akzent-hell);
}

/* Tighter measure for the buttons inside the cookie notice (docs/04, T15). */
.button--compact {
    padding: 0.75rem 1.4rem;
    letter-spacing: 0.06em;
}

.button[disabled],
.button[aria-disabled='true'] {
    background: var(--inaktiv-grund);
    border-color: var(--inaktiv-grund);
    color: var(--inaktiv-text);
    cursor: not-allowed;
}

/* Text link with an arrow: "Alle Termine →". */
.link-more {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--akzent);
    text-decoration: none;
}

.link-more:hover {
    color: var(--tinte);
}

/* The only round shapes in the design. */
.round-button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--linie);
    border-radius: 50%;
    color: var(--tinte);
}

.round-button:hover {
    border-color: var(--akzent);
    background: var(--akzent-tint);
    color: var(--akzent);
}

/* The two SVG icons of the whole site: magnifier and arrow up (docs/03). */
.icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.8;
}

.to-top {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: var(--z-nach-oben);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--weiss);
    border: 1px solid var(--linie);
    box-shadow: var(--schatten-knopf);
    color: var(--tinte);
}

.to-top:hover {
    border-color: var(--akzent);
    color: var(--akzent);
}

/* Only useful once the page has been scrolled; assets/js/backtotop.js unhides it. */
.to-top[hidden] {
    display: none;
}

.to-top .icon {
    width: 18px;
    height: 18px;
}

/* ---------------------------------------------------------------- badges --------- */

/* Event category (Führung · Fest · Reise · Versammlung · Konzert). */
.badge {
    display: inline-block;
    border: 1px solid var(--akzent-hell);
    padding: 0.2rem 0.65rem;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--akzent);
    line-height: 1.6;
}

/* ---------------------------------------------------------------- cards ---------- */

.card {
    background: var(--weiss);
    border: 1px solid var(--linie);
    padding: clamp(1.2rem, 3vw, 1.8rem);
}

.card--band {
    background: var(--papier2);
    border-color: var(--linie);
}

.card__title {
    font-family: var(--schrift-titel);
    font-size: clamp(1.28rem, 1.2rem + 0.2vw, 1.3rem);
    line-height: 1.25;
}

/* Grid used by every card list (T10, T3, T1). */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.4rem);
}

/* Report card: 4:3 image, event date, title, 150 character teaser (T10). */
.report-card {
    display: block;
    color: var(--tinte);
    text-decoration: none;
}

.report-card:hover {
    color: var(--akzent);
}

.report-card__date {
    display: block;
    margin-top: var(--raum2);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--akzent);
}

.report-card__title {
    font-family: var(--schrift-titel);
    font-size: 1.28rem;
    line-height: 1.25;
    margin-top: 0.4rem;
}

.report-card__teaser {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    color: var(--tinte2);
}

/* ---------------------------------------------------------------- event row ------ */

/* Date block plus text, separated by a hairline (T5, T1). */
.event-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1rem, 3vw, 2.2rem);
    align-items: start;
    padding: clamp(1.2rem, 3vw, 1.8rem) 0;
    border-bottom: 1px solid var(--linie2);
    color: var(--tinte);
    text-decoration: none;
}

.event-row:hover {
    background: var(--papier2);
}

/*
 * One line, "Mittwoch · 17:30–19:00 Uhr · Führung" (T1). The middle dots are drawn here
 * rather than written into the template: they separate, they do not say anything, and a
 * translator has no business with them.
 */
.event-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grau);
    line-height: 1.5;
}

.event-row__meta > * + *::before {
    content: '·';
    margin: 0 0.5em;
}

.event-row__title {
    margin-top: 0.5rem;
    font-family: var(--schrift-titel);
    font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem);
    line-height: 1.2;
}

.event-row__teaser {
    margin-top: 0.5rem;
    max-width: 64ch;
    font-size: 0.98rem;
    color: var(--tinte2);
}

/*
 * The list variant of T5: roomier rows, category above the title, time below it. The
 * compact variant of T1 keeps the single meta line above the title instead.
 */
.event-row--list {
    padding: clamp(1.4rem, 3vw, 1.8rem) 0;
}

.event-row__time {
    margin-top: 0.4rem;
    font-size: 0.92rem;
    color: var(--grau);
}

/* Container of an event list, so the first row has the same rule above it as below. */
.event-list {
    margin-top: var(--raum3);
    border-top: 1px solid var(--linie2);
}

/* ---------------------------------------------------------------- calendar ------- */

/*
 * Month grid of T6: seven columns, hairlines drawn by the 1px gap over --linie. Below
 * 1140px the grid gives way to a day list rendered by the template.
 */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--linie);
    border: 1px solid var(--linie);
}

.calendar-grid__weekday {
    background: var(--papier2);
    padding: 0.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinte2);
    text-align: center;
}

.calendar-grid__cell {
    min-height: 118px;
    background: var(--weiss);
    padding: 0.4rem;
}

.calendar-grid__cell--today {
    background: var(--akzent-tint);
}

.calendar-grid__day {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: var(--grau);
    font-variant-numeric: tabular-nums;
}

.calendar-grid__event {
    display: block;
    margin-top: 0.3rem;
    padding: 0.25rem 0.4rem;
    background: var(--tinte);
    color: var(--papier);
    font-size: 0.76rem;
    line-height: 1.35;
    text-decoration: none;
}

.calendar-grid__event:hover {
    background: var(--akzent);
    color: #fff;
}

@media (width < 1140px) {
    .calendar-grid {
        display: none;
    }
}

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

/* ---------------------------------------------------------------- pagination ----- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--raum2);
    margin-top: var(--raum4);
    padding-top: var(--raum3);
    border-top: 1px solid var(--linie);
    font-variant-numeric: tabular-nums;
}

.pagination__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinte);
    text-decoration: none;
}

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

/* Dimmed instead of removed, so the row keeps its shape on a single-page list. */
.pagination__link[aria-disabled='true'] {
    color: var(--inaktiv-text);
    pointer-events: none;
}

.pagination__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* The labelled variant of T5: "Seite 1 von 4" on the left, both controls on the right. */
.pagination__info {
    font-size: 0.9rem;
    color: var(--grau);
}

.pagination__controls {
    display: flex;
    gap: 0.6rem;
}

.pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--linie);
    font-size: 0.85rem;
    color: var(--tinte);
    text-decoration: none;
}

.pagination__page[aria-current] {
    background: var(--tinte);
    border-color: var(--tinte);
    color: var(--papier);
}

/* ---------------------------------------------------------------- empty state ---- */

/* A designed state, not a bare sentence — January really is empty (T5). */
.empty-state {
    border: 1px solid var(--linie);
    background: var(--weiss);
    padding: clamp(2rem, 5vw, 3.5rem) var(--seitenrand);
    text-align: center;
}

.empty-state__monogram {
    width: 64px;
    margin: 0 auto var(--raum3);
    opacity: 0.4;
}

.empty-state__text {
    max-width: 44ch;
    margin: var(--raum2) auto 0;
    color: var(--tinte2);
}

.empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
    margin-top: var(--raum3);
}

/* ---------------------------------------------------------------- form ----------- */

.form {
    max-width: 38rem;
    display: grid;
    gap: 1.4rem;
}

.field__label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.field__control {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--linie);
    background: var(--weiss);
    color: var(--tinte);
}

.field__control:focus {
    border-color: var(--akzent);
}

.field__control[disabled] {
    border-color: var(--linie2);
    background: var(--feld-inaktiv);
    color: var(--inaktiv-text);
}

.field--invalid .field__control {
    border-color: var(--rot);
}

.field__error {
    margin-top: 0.4rem;
    font-size: 0.88rem;
    color: var(--rot);
}

.field__hint {
    margin-top: 0.4rem;
    font-size: 0.88rem;
    color: var(--grau);
}

/* Consent checkbox, boxed on --papier2 (T12). */
.field--consent {
    background: var(--papier2);
    border: 1px solid var(--linie);
    padding: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: start;
}

.field--consent input[type='checkbox'] {
    width: 22px;
    height: 22px;
    accent-color: var(--akzent);
}

/* The invalid rule above targets .field__control; the consent box has none. */
.field--consent.field--invalid {
    border-color: var(--rot);
}

.field__consent {
    display: block;
    font-size: 0.94rem;
    color: var(--tinte2);
}

/* The asterisk of the mandatory fields, in the label and in the footnote. */
.form__required {
    color: var(--akzent);
}

.form__footnote {
    font-size: 0.85rem;
    color: var(--grau);
}

/*
 * Honeypot for the contact form (Phase 5): hidden by CSS, never by the hidden attribute —
 * a bot that ignores stylesheets fills it in (docs/09).
 */
.honeypot {
    display: none;
}

/* Form-wide messages. Error is led by the server (T12). */
.alert {
    border-left: 3px solid var(--linie);
    padding: 1rem 1.2rem;
    margin-bottom: var(--raum4);
    font-size: 0.95rem;
}

.alert__title {
    font-weight: 600;
}

.alert__text {
    margin-top: 0.5rem;
    color: var(--tinte2);
}

.alert--error .alert__title {
    color: var(--rot);
}

/* The acknowledgement is the one message the design sets in Playfair (T12). */
.alert--success .alert__title {
    font-family: var(--schrift-titel);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--gruen);
}

.alert--error {
    border-left-color: var(--rot);
    background: var(--fehler-flaeche);
    color: var(--tinte);
}

.alert--success {
    border-left-color: var(--gruen);
    background: var(--erfolg-flaeche);
    color: var(--tinte);
}

/* ---------------------------------------------------------------- consent -------- */

/*
 * Cookie notice for the one technically necessary session cookie. Rendered server-side so
 * it is present without JavaScript; assets/js/consent.js remembers the acknowledgement and
 * hides it (docs/04, T15).
 */
.consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-hinweis);
    background: var(--tinte);
    color: var(--tinte-text);
    border-top: 3px solid var(--akzent);
}

.consent[hidden] {
    display: none;
}

.consent__inner {
    max-width: 1000px;
    margin-inline: auto;
    padding: 1.3rem var(--seitenrand);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}

.consent__text {
    max-width: 56ch;
    font-size: 0.92rem;
}

.consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

/*
 * The settings dialog shows exactly two rows: what is set, and what is not set here. A
 * native <dialog> brings modal semantics, focus containment and Escape with no JS of our
 * own. No shadow: docs/03 allows exactly two, and neither is this one — the dimmed backdrop
 * carries the separation.
 */
.consent-dialog {
    max-width: 520px;
    width: calc(100% - 3rem);
    padding: 2rem clamp(1.3rem, 4vw, 2.2rem);
    border: 1px solid var(--linie);
    background: var(--weiss);
    color: var(--tinte);
}

.consent-dialog::backdrop {
    background: rgb(28 26 23 / 55%);
}

.consent-dialog__row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1rem 0;
    border-top: 1px solid var(--linie2);
    font-size: 0.9rem;
    color: var(--tinte2);
}

.consent-dialog__row input[type='checkbox'] {
    width: 22px;
    height: 22px;
    margin-top: 0.25rem;
    accent-color: var(--akzent);
}

.consent-dialog__row--off {
    opacity: 0.55;
}

.consent-dialog__label {
    display: block;
    color: var(--tinte);
    font-weight: 600;
}

.consent-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: var(--raum3);
}

/* ---------------------------------------------------------------- content pages -- */

/*
 * The editorial body of a T2 page. Everything an editor can produce is a plain element —
 * paragraph, heading, list, quote — because the mask offers nothing else and the sanitiser
 * would drop a class anyway. The design is therefore attached to the elements here, not to
 * class names somebody would have to type: the redaction writes an ordinary list and gets
 * the approved look.
 *
 * The measure, the paragraph rhythm and the headings come from .prose (app.css); what
 * follows is what the four pages need on top of it.
 */

/*
 * The opening line of "Der Verein" (T2): part of the running text, not a heading — the page
 * already has its h1 in the header band. On the imprint the same position holds the club's
 * name, one size smaller.
 */
.page-body--claim > p:first-child {
    font-family: var(--schrift-titel);
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
    line-height: 1.45;
    color: var(--tinte);
}

.page-body--legal > p:first-child {
    font-family: var(--schrift-titel);
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--tinte);
}

/*
 * Bullet lists keep the typographic mark of the design instead of a disc — the same "·" the
 * benefit list of "Mitglied werden" carried when it was a hand-built component. ::marker
 * takes font and colour, so no extra element is needed to produce it.
 */
.page-body ul > li::marker {
    content: '· ';
    font-family: var(--schrift-titel);
    font-size: 1.3rem;
    color: var(--akzent);
}

/*
 * A list item that opens in bold is a titled point: the bold part becomes its own line, the
 * rest reads as the explanation under it. That is how the three benefits of "Mitglied
 * werden" are set, and an editor produces it by marking the first words bold.
 */
.page-body li > strong:first-child {
    display: block;
    color: var(--tinte);
}

/* Label/value pairs of the "Der Verein im Überblick" card (T2). */
.fact-list {
    display: grid;
    gap: 0.85rem;
    margin-top: var(--raum3);
    font-size: 0.95rem;
}

.fact-list__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--linie2);
}

.fact-list__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.fact-list dt {
    color: var(--grau);
}

.fact-list dd {
    margin: 0;
    text-align: right;
}

/* Buttons stacked in a narrow aside, and the usual wrapping row below running text. */
.button-stack {
    display: grid;
    gap: 0.7rem;
    margin-top: var(--raum3);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: var(--raum4);
}

/* ---------------------------------------------------------------- board ---------- */

.board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.board-card {
    display: grid;
    gap: 1.2rem;
    align-content: start;
}

/*
 * The chairwoman: full width, because hers is the only entry carrying an address. Two
 * columns as soon as there is room for them.
 */
.board-card--wide {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: center;
    padding: clamp(1.5rem, 4vw, 2.4rem);
}

.board-card__name {
    font-family: var(--schrift-titel);
    font-size: 1.4rem;
    margin-top: 0.5rem;
}

.board-card--wide .board-card__name {
    font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
}

.board-card__address {
    font-size: 0.98rem;
    color: var(--tinte2);
    line-height: 1.75;
}

.board-section-heading {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--linie);
    font-size: 1.6rem;
}

.board-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: var(--raum3);
    padding: 0;
    list-style: none;
}

.board-list__item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.1rem;
    background: var(--papier2);
}

.board-list__monogram {
    width: 26px;
    opacity: 0.45;
}

.board-as-of {
    margin-top: var(--raum4);
}

/* ---------------------------------------------------------------- membership ----- */

/*
 * The benefit list and the two steps of "Mitglied werden" were hand-built components until
 * the page became editorial. Their look now comes from the .page-body rules further up:
 * a bullet list with the typographic mark, a bold lead-in per item, and an ordinary
 * numbered list for the steps.
 */

.contact-card__name {
    font-family: var(--schrift-titel);
    font-size: 1.5rem;
    margin-top: 0.6rem;
}

.contact-card__office {
    font-size: 0.95rem;
    color: var(--tinte2);
    margin-top: 0.4rem;
}

.contact-card__address {
    font-size: 0.95rem;
    margin-top: 0.9rem;
    line-height: 1.75;
}

/* The note beside the contact form (T12). */
.contact-hint {
    margin-top: 0.7rem;
    font-size: 0.94rem;
    color: var(--tinte2);
}

/* ---------------------------------------------------------------- legal pages ---- */

/*
 * Imprint and privacy statement: a single column of 74ch. Narrower than .wrap, which this
 * overrides on purpose — the value is written out rather than inherited so the rule is
 * readable on its own.
 */
.legal-page {
    max-width: 74ch;
}

/*
 * The name block and the "Stand: …" line of the two legal pages are paragraphs of the
 * editorial text now: the first one is sized by .page-body--legal, the last one reads as
 * what it is — a sentence the editor writes when the text changes.
 */

/* ---------------------------------------------------------------- toolbar -------- */

/* Above every event list: view switcher on the left, search and archive on the right. */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--raum2);
    padding-bottom: var(--raum3);
    border-bottom: 1px solid var(--linie);
}

.toolbar__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

/* Three segments sharing one frame; the current one is filled (T5). */
.segmented {
    display: flex;
    border: 1px solid var(--linie);
}

.segment {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 1.4rem;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinte2);
    text-decoration: none;
}

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

.segment[aria-current] {
    background: var(--tinte);
    color: var(--papier);
}

/* Search field with the magnifier sitting inside it. */
.search-field {
    position: relative;
    display: flex;
    align-items: center;
}

.search-field__icon {
    position: absolute;
    left: 0.85rem;
    display: flex;
    color: var(--grau);
    pointer-events: none;
}

.search-field__icon .icon {
    width: 16px;
    height: 16px;
}

.search-field__input {
    min-width: min(260px, 60vw);
    min-height: 44px;
    padding: 0.7rem 1rem 0.7rem 2.5rem;
    border: 1px solid var(--linie);
    background: var(--weiss);
    font: inherit;
    font-size: 0.95rem;
    color: var(--tinte);
}

.search-field__input:focus {
    border-color: var(--akzent);
}

/* Result line between toolbar and list. */
.result-count {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--raum2);
    margin-top: var(--raum3);
    font-size: 0.92rem;
    color: var(--grau);
}

/* ---------------------------------------------------------------- event detail -- */

/*
 * Variant (b) of T8: the fixed sentence for an event without a description. Quote style,
 * but a lighter rule than a real quotation — it is a note from the club, not a citation.
 */
.event-detail__no-description {
    padding: 1.4rem 1.6rem;
    border-left: 2px solid var(--linie);
    color: var(--tinte2);
    font-style: italic;
}

/* A whole box that is one link: the report of variant (d), and "Ankündigung dazu" on T11. */
.linked-box {
    display: block;
    margin-top: var(--raum4);
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--linie);
    background: var(--weiss);
    color: var(--tinte);
    text-decoration: none;
}

.linked-box:hover {
    border-color: var(--akzent);
    background: var(--akzent-tint);
}

.linked-box__title {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--schrift-titel);
    font-size: 1.25rem;
    line-height: 1.3;
}

/* The sticky date card of T8. */
.date-card__span {
    margin-top: var(--raum2);
    font-family: var(--schrift-titel);
    font-size: 1.5rem;
    line-height: 1.3;
}

.date-card__meta {
    margin-top: 0.4rem;
    color: var(--tinte2);
}

.date-card__actions {
    display: grid;
    gap: 0.6rem;
    margin-top: var(--raum3);
    padding-top: var(--raum2);
    border-top: 1px solid var(--linie2);
}

.date-card__note {
    margin-top: var(--raum2);
    font-size: 0.88rem;
    color: var(--grau);
}

/* ---------------------------------------------------------------- reports ------- */

/* Year filter of T10 — built from the data, every chip a real link. */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: var(--raum3);
    border-bottom: 1px solid var(--linie);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--linie);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--tinte2);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.filter-chip:hover {
    border-color: var(--akzent);
}

.filter-chip[aria-current] {
    background: var(--tinte);
    border-color: var(--tinte);
    color: var(--papier);
}

.report-grid {
    margin-top: var(--raum3);
}

/* A card that is a frame only — the aside boxes of T11. */
.card--plain {
    background: none;
    padding: 1.3rem;
}

.report-lead-image {
    margin-bottom: var(--raum4);
}

.report-body {
    font-size: 1.06rem;
}

.report-published {
    margin-top: var(--raum4);
}

.report-aside {
    display: grid;
    gap: var(--raum3);
    align-content: start;
}

/* Previous and next report, by event date (T11). */
.neighbours {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--raum2);
    margin-top: var(--raum4);
    padding-top: var(--raum3);
    border-top: 1px solid var(--linie);
}

.neighbours__link {
    color: var(--tinte);
    text-decoration: none;
}

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

.neighbours__link--newer {
    text-align: right;
}

.neighbours__label {
    display: block;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grau);
}

.neighbours__title {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--schrift-titel);
    font-size: 1.1rem;
    line-height: 1.3;
}

/* A short list of titles: "Zuletzt unternommen", "Weiter im Archiv". */
.title-list {
    display: grid;
    gap: 0.55rem;
    margin-top: var(--raum2);
}

.title-list__link {
    font-size: 0.94rem;
    line-height: 1.4;
    color: var(--tinte2);
    text-decoration: none;
}

.title-list__link:hover {
    color: var(--akzent);
}

/* ---------------------------------------------------------------- start page ---- */

/* Hero (T1): copy beside the key image, never full bleed — the original is 480×343. */
.hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.hero__kicker {
    letter-spacing: 0.26em;
    margin-bottom: var(--raum3);
}

.hero__heading {
    font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4rem);
    line-height: 1.08;
}

.hero__text {
    max-width: 46ch;
    margin-top: var(--raum3);
    font-size: 1.12rem;
    color: var(--tinte2);
}

.hero__image {
    width: 100%;
    height: auto;
}

/* Figures band — four fixed numbers (T1, docs/07). */
.figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--raum4);
}

.figures__value {
    font-family: var(--schrift-titel);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--akzent);
    font-variant-numeric: tabular-nums;
}

.figures__label {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grau);
}

/* Section heading with a link on the far side ("Alle Termine →"). */
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--raum2);
    padding-bottom: var(--raum3);
    border-bottom: 1px solid var(--linie);
}

.character {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.character__monogram {
    width: 64px;
    height: 64px;
    object-fit: contain;
    opacity: 0.5;
    margin-bottom: var(--raum3);
}

.character__text {
    margin-top: var(--raum2);
    color: var(--tinte2);
}

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

.history-box {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.history-box__title {
    margin-top: var(--raum2);
    font-size: 1.6rem;
}

.history-box__text {
    margin-top: var(--raum2);
    font-size: 0.98rem;
    color: var(--tinte2);
}

.history-box__quote {
    margin-top: var(--raum3);
    padding-left: 1.1rem;
    border-left: 2px solid var(--akzent);
    font-family: var(--schrift-titel);
    font-style: italic;
    font-size: 1.12rem;
    line-height: 1.5;
    color: var(--tinte);
}

.history-box__more {
    margin-top: var(--raum3);
}

/* Closing call on --tinte. */
.closing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--raum4);
    align-items: center;
}

.closing__text {
    max-width: 48ch;
    margin-top: var(--raum2);
    color: var(--tinte-text);
}

.closing__actions {
    margin-top: 0;
}

/* ---------------------------------------------------------------- history ------- */

/* A mount for a picture that sits beside running text — narrower than the hero's. */
.passepartout--tight {
    padding: clamp(0.8rem, 2vw, 1.4rem);
    box-shadow: none;
}

.history-intro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.history-intro__text {
    max-width: 66ch;
    margin-top: var(--raum2);
    color: var(--tinte2);
}

.history-intro__image {
    width: 100%;
    height: auto;
}

/* Heading that opens a section further down a page (T3). */
.section-heading {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding-bottom: var(--raum3);
    border-bottom: 1px solid var(--linie);
}

/* "Stationen" — an ordered list, because the entries are a sequence (T3). */
.timeline {
    margin-top: var(--raum4);
    padding: 0;
    list-style: none;
}

.timeline__row {
    display: grid;
    grid-template-columns: minmax(96px, 132px) 1fr;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: baseline;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--linie2);
}

.timeline__year {
    font-family: var(--schrift-titel);
    font-size: 1.35rem;
    color: var(--akzent);
    font-variant-numeric: tabular-nums;
}

.timeline__text {
    color: var(--tinte2);
}

/* Archive tiles (T3). */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: clamp(1.2rem, 3vw, 2rem);
    margin-top: var(--raum4);
}

.tile {
    display: block;
    padding: 1.4rem;
    border: 1px solid var(--linie);
    background: var(--weiss);
    color: var(--tinte);
    text-decoration: none;
}

.tile:hover {
    border-color: var(--akzent);
    background: var(--akzent-tint);
}

.tile__head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.tile__monogram {
    width: 26px;
    opacity: 0.5;
}

.tile__title {
    display: block;
    margin-top: var(--raum2);
    font-family: var(--schrift-titel);
    font-size: 1.3rem;
    line-height: 1.25;
}

.tile__teaser {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--tinte2);
}

/* ---------------------------------------------------------------- chair table --- */

/*
 * "Vorsitzende ab 1810" (T4 b). A real table with header cells, not the running text the
 * legacy site had — that is what makes the 28 rows readable and navigable.
 */
.chair-table {
    width: 100%;
    margin-top: var(--raum4);
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.chair-table th {
    padding: 0.7rem 1rem 0.7rem 0;
    border-top: 2px solid var(--tinte);
    border-bottom: 1px solid var(--linie);
    text-align: left;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grau);
}

.chair-table td {
    padding: 0.72rem 1rem 0.72rem 0;
    border-bottom: 1px solid var(--linie2);
    font-size: 0.96rem;
    vertical-align: baseline;
}

.chair-table__period {
    color: var(--akzent);
    width: 22%;
}

.chair-table__office {
    color: var(--tinte2);
}

/*
 * Below 768px the three values stack. The header row disappears, so every cell names its
 * own column through the data-label attribute (T4).
 */
@media (width < 768px) {
    .chair-table thead {
        display: none;
    }

    .chair-table tr {
        display: block;
        padding: 0.9rem 0;
        border-bottom: 1px solid var(--linie2);
    }

    .chair-table td {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
    }

    .chair-table td::before {
        content: attr(data-label) ': ';
        font-size: 0.74rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--grau);
    }
}

/* ---------------------------------------------------------------- archive ------- */

/* One year of past events (T9). A register to scan, not a list to read. */
.year-group {
    margin-bottom: var(--raum5);
}

.year-group__heading {
    padding-bottom: 0.8rem;
    border-bottom: 2px solid var(--tinte);
    font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
    color: var(--akzent);
    font-variant-numeric: tabular-nums;
}

.archive-row {
    display: grid;
    grid-template-columns: minmax(120px, 150px) 1fr auto;
    gap: 1.2rem;
    align-items: baseline;
    padding: 1rem 0;
    border-bottom: 1px solid var(--linie2);
    color: var(--tinte);
    text-decoration: none;
}

.archive-row:hover {
    background: var(--papier2);
}

.archive-row__date {
    font-size: 0.92rem;
    color: var(--grau);
    font-variant-numeric: tabular-nums;
}

.archive-row__title {
    font-size: 1.05rem;
}

.archive-row__category {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--akzent);
}

/* Below 768px the three columns stack; the category moves under the title. */
@media (width < 768px) {
    .archive-row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }
}

/* ---------------------------------------------------------------- period nav ---- */

/* Back · label · forward, above the month grid and the day card (T6, T7). */
.period-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--raum2);
    margin: var(--raum4) 0 var(--raum3);
}

.period-nav__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--linie);
    color: var(--tinte2);
    text-decoration: none;
}

.period-nav__arrow:hover {
    border-color: var(--akzent);
    color: var(--akzent);
}

.period-nav__label {
    font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
    text-align: center;
}

/* Cells outside the shown month: dimmed, never blank — an empty cell reads as a fault. */
.calendar-grid__cell--outside {
    background: var(--papier2);
}

.calendar-grid__cell--outside .calendar-grid__day {
    opacity: 0.5;
}

/* The day list below 1140px, where the seven-column grid has no room (T6). */
.calendar-list {
    margin-top: var(--raum3);
    border: 1px solid var(--linie);
    background: var(--weiss);
}

.calendar-list__row {
    display: flex;
    gap: 1rem;
    padding: 1.1rem;
    border-bottom: 1px solid var(--linie2);
    color: var(--tinte);
    text-decoration: none;
}

.calendar-list__row:last-child {
    border-bottom: 0;
}

.calendar-list__date {
    min-width: 52px;
    text-align: center;
}

.calendar-list__day {
    display: block;
    font-family: var(--schrift-titel);
    font-size: 1.5rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.calendar-list__weekday {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--grau);
}

.calendar-list__title {
    display: block;
    font-size: 0.98rem;
}

.calendar-list__time {
    display: block;
    font-size: 0.85rem;
    color: var(--grau);
}

/* An empty calendar list has nothing to frame. */
.calendar-list:empty {
    display: none;
}

.calendar-note {
    margin-top: var(--raum3);
    font-size: 0.88rem;
    color: var(--grau);
}

.calendar-note--empty {
    padding: clamp(2rem, 5vw, 3rem) 1.2rem;
    border: 1px solid var(--linie);
    background: var(--weiss);
    text-align: center;
    color: var(--tinte2);
    font-size: 1rem;
}

/* ---------------------------------------------------------------- day view ------ */

.day-cards {
    display: grid;
    gap: var(--raum2);
}

.day-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: baseline;
    color: var(--tinte);
    text-decoration: none;
}

.day-card:hover {
    border-color: var(--akzent);
}

.day-card__time {
    font-family: var(--schrift-titel);
    font-size: 1.4rem;
    color: var(--akzent);
    font-variant-numeric: tabular-nums;
}

.day-card__title {
    display: block;
    font-family: var(--schrift-titel);
    font-size: 1.6rem;
    line-height: 1.25;
}

.day-card__meta {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.92rem;
    color: var(--grau);
}

.day-empty {
    padding: clamp(2.5rem, 6vw, 4rem) 1.2rem;
    border: 1px solid var(--linie);
    background: var(--weiss);
    text-align: center;
    color: var(--tinte2);
}

.day-empty__monogram {
    width: 52px;
    opacity: 0.35;
    margin-bottom: var(--raum2);
}

/* ---------------------------------------------------------------- search -------- */

/*
 * T13. The field and its button sit on one line; the button keeps its own label rather than
 * hiding behind a magnifier, because this is the page the visitor came to in order to
 * search — the compact variant in the event toolbar is the one that saves room.
 */
.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: var(--raum3);
}

.search-form__input {
    flex: 1;
    min-width: min(260px, 100%);
    min-height: 44px;
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--linie);
    background: var(--weiss);
    font: inherit;
    font-size: 1.05rem;
    color: var(--tinte);
}

.search-form__input:focus {
    border-color: var(--akzent);
}

/* Sits between the count line and the hits: how many of them the page shows. */
.search-hint {
    margin-top: calc(var(--raum1) * -1);
    margin-bottom: var(--raum2);
    font-size: 0.9rem;
    color: var(--grau);
}

.search-results {
    margin-top: var(--raum2);
}

/* The whole row is the link — 88px of kind, then title and context. */
.search-hit {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 1.2rem;
    align-items: baseline;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--linie2);
    text-decoration: none;
    color: var(--tinte);
}

.search-hit:hover,
.search-hit:focus-visible {
    background: var(--papier2);
}

.search-hit__kind {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--akzent);
}

.search-hit__title {
    display: block;
    font-family: var(--schrift-titel);
    font-size: 1.2rem;
    line-height: 1.3;
}

.search-hit__context {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.9rem;
    color: var(--grau);
}

/* Narrow screens: the kind moves above the title instead of squeezing it into a column. */
@media (width < 560px) {
    .search-hit {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
}

/* ---------------------------------------------------------------- error page ---- */

/* T14. Centred and narrow: there is nothing to read here but the way out. */
.error-page {
    max-width: 640px;
    margin-inline: auto;
    padding: clamp(4rem, 12vw, 8rem) var(--seitenrand);
    text-align: center;
}

.error-page__monogram {
    width: 92px;
    height: auto;
    opacity: 0.4;
}

.error-page__code {
    margin-top: var(--raum4);
    font-size: 0.78rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--akzent);
}

.error-page__heading {
    margin-top: var(--raum2);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
}

.error-page__text {
    margin-top: var(--raum3);
    color: var(--tinte2);
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-top: var(--raum4);
}