/*
 * Negativ — Stylesheet. Ein Kontaktabzug im Netz: dunkel zuerst (Dunkelkammer), hell auf Wunsch (Barytpapier),
 * Bilder Kante an Kante, eine Monospace-Schrift des Systems für alles. Rotlicht als einzige Farbe — für Nummern,
 * Links und den Fokus. Keine Rundungen, keine Schatten, keine Bewegung, kein Skript. Alle Farben, Schriften und
 * Abstände kommen als Variablen aus «design» (theme.lava) und lassen sich unter Einrichtung › Design überschreiben.
 * WCAG 2.2 AA in dunkel und hell.
 */

/* ── Grundlage ─────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    color-scheme: light;
    --rand: clamp(1rem, 3.2vw, 2.75rem);
    --spalte: 44rem;
    --weit: 92rem;
    --label: 0.75rem;
    --error: #a3271c;
    --mark: #f3d9a4;
}

:root[data-theme='dark'] {
    --error: #ff9585;
    --mark: #5c3a12;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--color-background);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-background);
    font-variant-ligatures: none;
    overflow-wrap: break-word;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight, 500);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}

h1 {
    font-size: clamp(1.9rem, 1.2rem + 3vw, 3.6rem);
    letter-spacing: -0.045em;
    line-height: 1.04;
}

h2 {
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
}

h3 {
    font-size: 1.0625rem;
}

p,
ul,
ol,
dl,
figure,
blockquote {
    margin: 0 0 var(--space-4);
}

a {
    color: var(--color-link);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

a:hover {
    text-decoration-thickness: 2px;
}

code,
pre {
    font-family: var(--font-code);
    font-size: 0.9em;
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

::selection {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Beschriftungen: klein, gesperrt, in Grossbuchstaben — wie die Randschrift eines Films */
.kicker,
.block-label,
.footer-title,
.frame-line,
.works-head,
.cv-kind,
.facts dt,
.series-meta,
.about-role,
.statement figcaption {
    font-size: var(--label);
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.5;
    text-transform: uppercase;
}

/* Nummern im Rotlicht, mit Dreieck davor wie die Bildmarke auf dem Film */
.frame-no,
.series-no,
.work-no,
.cv-year {
    color: var(--color-link);
    font-variant-numeric: tabular-nums;
}

.frame-no::before {
    content: '▲' / '';
    margin-right: 0.45em;
    font-size: 0.8em;
}

/* ── Gerüst ────────────────────────────────────────────── */
main {
    display: block;
    padding-bottom: var(--space-9);
}

main:focus {
    outline: none;
}

.skip-link {
    position: absolute;
    left: var(--space-3);
    top: -4rem;
    z-index: 10;
    padding: var(--space-2) var(--space-4);
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.skip-link:focus {
    top: var(--space-3);
}

.page-body > * + * {
    margin-top: var(--space-8);
}

/* ── Kopf: Name links, Menü rechts, eine Haarlinie ─────── */
.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
    min-height: 3.75rem;
    padding: var(--space-2) var(--rand);
    border-bottom: 1px solid var(--color-line);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    margin-right: auto;
    color: var(--color-text);
    text-decoration: none;
}

.brand-mark {
    width: 1.75rem;
    height: 1.75rem;
}

.brand-name {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.header-tools {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: menu;
}

.nav ul ul {
    display: none;
}

.nav li {
    display: flex;
    align-items: center;
    counter-increment: menu;
}

.nav a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6em;
    min-height: 44px;
    align-items: center;
    color: var(--color-text);
    font-size: var(--label);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
}

.header-wide .nav a::before,
.menu-panel .nav a::before {
    content: counter(menu, decimal-leading-zero) / '';
    color: var(--color-muted);
    letter-spacing: 0.04em;
}

.nav a:hover {
    color: var(--color-link);
}

/* Aktuelle Seite: Rotlicht und Linie darunter, nicht nur Farbe (WCAG 1.4.1) */
.nav a[aria-current='page'],
.nav .active > a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.7em;
}

.nav a[aria-current='page']::before,
.nav .active > a::before {
    color: var(--color-link);
}

/* Mitglieder: «Anmelden»/«Abmelden», nur wenn das Modul an ist */
.header-account a.members-link,
.header-account button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    font: inherit;
    font-size: var(--label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-link);
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 0.3em;
    cursor: pointer;
}

.header-account form {
    margin: 0;
}

/* Schmal: das Menü als <details> ohne Skript */
.menu {
    display: none;
    margin: 0;
}

.menu > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border);
    font-size: var(--label);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.menu > summary::-webkit-details-marker {
    display: none;
}

.menu > summary::after {
    content: '+' / '';
    font-size: 1rem;
    letter-spacing: 0;
}

.menu[open] > summary::after {
    content: '−' / '';
}

.menu-panel {
    padding: var(--space-3) 0 var(--space-2);
}

.menu-panel .nav ul {
    flex-direction: column;
}

@media (max-width: 51.99rem) {
    .header-wide {
        display: none;
    }

    .menu {
        display: block;
        order: 3;
        flex-basis: 100%;
    }

    .menu > summary {
        width: 100%;
        justify-content: space-between;
    }

    .menu-panel .nav a {
        width: 100%;
        border-bottom: 1px solid var(--color-line);
    }
}

/* ── Umschalter dunkel/hell ({% appearance %}) ─────────── */
.appearance-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--color-text);
    background: none;
    border: 1px solid var(--color-line);
    cursor: pointer;
}

.appearance-toggle:hover {
    color: var(--color-link);
    border-color: var(--color-border);
}

.appearance-toggle .appearance-sun,
.appearance-toggle[aria-pressed='true'] .appearance-moon {
    display: none;
}

.appearance-toggle[aria-pressed='true'] .appearance-sun {
    display: block;
}

/* ── Seitenkopf ────────────────────────────────────────── */
.page-head {
    width: min(100% - 2 * var(--rand), var(--weit));
    margin: 0 auto var(--space-7);
    padding-top: clamp(var(--space-7), 6vw, var(--space-9));
}

.page-head h1 {
    max-width: 18ch;
    margin-bottom: var(--space-5);
}

.kicker {
    margin: 0 0 var(--space-4);
    color: var(--color-muted);
}

.kicker::before {
    content: '▲' / '';
    margin-right: 0.6em;
    color: var(--color-link);
    font-size: 0.8em;
}

.lead {
    max-width: 40rem;
    color: var(--color-muted);
    font-size: 1rem;
}

.lead > :last-child,
.landing-intro > :last-child {
    margin-bottom: 0;
}

/* Startseite: Titel gross links, Einleitung rechts unten */
.landing-head {
    display: grid;
    gap: var(--space-4) var(--space-7);
    width: min(100% - 2 * var(--rand), var(--weit));
    margin: 0 auto;
    padding-block: clamp(var(--space-7), 7vw, var(--space-10))
        clamp(var(--space-5), 3vw, var(--space-7));
}

.landing-head .kicker {
    margin: 0;
}

.landing-head h1 {
    max-width: 14ch;
    margin: 0;
    font-size: clamp(2.1rem, 1.1rem + 4.6vw, 5.4rem);
}

.landing-intro {
    max-width: 30rem;
    color: var(--color-muted);
}

@media (min-width: 60rem) {
    .landing-head {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem);
        align-items: end;
    }

    .landing-head .kicker {
        grid-column: 1 / -1;
    }
}

.landing .page-body > :first-child {
    margin-top: 0;
}

/* Kopf eines Blocks: Titel links, Hinweis daneben, Linie darunter */
.block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    width: min(100% - 2 * var(--rand), var(--weit));
    margin: 0 auto var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-line);
}

.block-head h2 {
    margin: 0;
    font-size: var(--label);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.block-head h2::before {
    content: '■' / '';
    margin-right: 0.7em;
    color: var(--color-link);
}

/* In Blöcken, die schon die Breite der Seite haben (Werkliste, Ausstellungen): ohne eigene Breite und Linie */
.works > .block-head,
.exhibitions > .block-head {
    width: auto;
    margin-bottom: var(--space-4);
    padding-bottom: 0;
    border-bottom: 0;
}

.block-note {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.block-label {
    margin: 0 0 var(--space-3);
    color: var(--color-muted);
}

/* Zeile unter einem Bild: Nummer, Unterschrift, Angaben, Link */
.frame-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-5);
    padding: var(--space-3) var(--rand);
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-line);
}

.frame-caption {
    color: var(--color-text);
}

.frame-data {
    margin-left: auto;
}

.frame-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-left: auto;
    color: var(--color-link);
}

.frame-link::after {
    content: '→' / '';
    margin-left: 0.6em;
}

/* ── Bild über die ganze Breite ────────────────────────── */
.fullbleed figure {
    margin: 0;
}

.fullbleed img {
    width: 100%;
    height: clamp(16rem, 68vh, 46rem);
    object-fit: cover;
    background: var(--color-surface);
}

.fullbleed-mittel img {
    height: clamp(14rem, 48vh, 34rem);
}

.fullbleed-flach img {
    height: clamp(10rem, 30vh, 22rem);
}

/* ── Raster Kante an Kante (Kontaktabzug) ──────────────── */
.sheet-grid,
.series-grid,
.strip-frames {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sheet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 52rem) {
    .sheet-3 .sheet-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sheet-4 .sheet-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.frame {
    position: relative;
}

.frame figure {
    margin: 0;
}

.frame img,
.strip-frame img,
.series-item img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--color-surface);
}

.ratio-quadrat .frame img,
.ratio-quadrat .strip-frame img {
    aspect-ratio: 1;
}

.ratio-hoch .frame img,
.ratio-hoch .strip-frame img {
    aspect-ratio: 2 / 3;
}

/* Nummer und Unterschrift als Etikett auf der Ecke des Bilds — auf eigener Fläche, darum immer lesbar */
.frame figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-3);
    max-width: calc(100% - var(--space-4));
    padding: var(--space-1) var(--space-3);
    color: var(--color-text);
    background: var(--color-background);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    line-height: 1.6;
    text-transform: uppercase;
}

.frame .frame-no::before {
    content: none;
}

/* ── Serie als Filmstreifen ────────────────────────────── */
.strip-frames {
    grid-template-columns: repeat(auto-fit, minmax(min(50%, 11rem), 1fr));
    background: var(--color-film);
}

.strip-frame {
    position: relative;
    padding: 2.6rem 0.3rem 2.1rem;
    background: var(--color-film);
}

/* Perforation oben und unten: Löcher mit runden Ecken, als Maske — die Farbe kommt aus «hole» */
.strip-frame::before,
.strip-frame::after,
.film-edge {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 0.7rem;
    background: var(--color-hole);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='11'%3E%3Crect x='7' y='0.5' width='12' height='10' rx='2.2'/%3E%3C/svg%3E")
        repeat-x left center / 1.625rem 0.7rem;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='11'%3E%3Crect x='7' y='0.5' width='12' height='10' rx='2.2'/%3E%3C/svg%3E")
        repeat-x left center / 1.625rem 0.7rem;
}

.strip-frame::before {
    top: 0.55rem;
}

.strip-frame::after {
    bottom: 0.55rem;
}

.edge {
    position: absolute;
    top: 1.45rem;
    left: 0.6rem;
    right: 0.6rem;
    display: flex;
    justify-content: space-between;
    color: var(--color-film-text);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1;
}

.strip-frame figure {
    margin: 0;
}

.strip-frame figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-3);
    padding: var(--space-2) 0.3rem 0;
    color: var(--color-film-muted);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    line-height: 1.5;
    text-transform: uppercase;
}

.strip-frame .frame-no {
    color: var(--color-film-text);
}

.strip-frame .frame-caption {
    color: var(--color-film-muted);
}

/* ── Einzelbild mit Bildunterschrift ───────────────────── */
.single {
    margin-inline: auto;
}

/* Hoch- und Quadratformate werden nicht höher als der Bildschirm — das Bild steht dann mittig über der Zeile */
.single img {
    width: auto;
    max-width: 100%;
    max-height: 86vh;
    margin-inline: auto;
    background: var(--color-surface);
}

.single-spalte {
    width: min(100% - 2 * var(--rand), var(--spalte));
}

.single-breit {
    width: min(100% - 2 * var(--rand), 72rem);
}

/* Randlos: von Rand zu Rand, das Bild füllt die Höhe und wird beschnitten */
.single-randlos img {
    width: 100%;
    height: clamp(16rem, 78vh, 52rem);
    max-height: none;
    object-fit: cover;
}

.single-spalte .frame-line,
.single-breit .frame-line {
    padding-inline: 0;
}

/* ── Serien: Kacheln Kante an Kante ────────────────────── */
.series-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    border-top: 1px solid var(--color-line);
}

.series-item {
    position: relative;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--color-line);
}

.series-item + .series-item {
    border-left: 1px solid var(--color-line);
}

.series-item figure {
    margin: 0;
}

.series-item img {
    aspect-ratio: 4 / 3;
}

.series-label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    align-items: baseline;
    padding: var(--space-4) var(--space-5) var(--space-5);
}

.series-no {
    font-size: var(--label);
    letter-spacing: 0.1em;
}

.series-title {
    margin: 0;
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
    letter-spacing: -0.02em;
}

.series-title a {
    color: var(--color-text);
    text-decoration: none;
}

/* die ganze Kachel ist der Link */
.series-title a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.series-title a:focus-visible {
    outline: none;
}

.series-item:has(a:focus-visible) {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}

.series-title a:hover,
.series-item:hover .series-title a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.series-item:hover img {
    opacity: 0.88;
}

/* Jahr und Ort, Umfang: durch Abstand getrennt — bricht die Zeile um, bleibt kein Punkt allein am Anfang */
.series-meta {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
    margin: 0;
    color: var(--color-muted);
}

/* ── Werkliste mit Nummern ─────────────────────────────── */
.works,
.exhibitions,
.about,
.contact-block,
.form-block,
.statement,
.text-block,
.series-foot {
    width: min(100% - 2 * var(--rand), var(--weit));
    margin-inline: auto;
}

.works-head,
.work {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0 var(--space-4);
}

.works-head {
    margin: 0;
    padding-bottom: var(--space-2);
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-text);
}

.works-head span:nth-child(n + 3) {
    display: none;
}

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

.work {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-line);
}

.work-no {
    grid-row: span 2;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    line-height: 1.85;
}

.work-title {
    font-size: 1rem;
}

.work-title a {
    color: var(--color-text);
    text-decoration-color: var(--color-border);
}

.work-title a:hover {
    color: var(--color-link);
    text-decoration-color: currentColor;
}

.work-year,
.work-place,
.work-medium {
    grid-column: 2;
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.work-year {
    display: inline;
}

@media (min-width: 60rem) {
    .works-head,
    .work {
        grid-template-columns: 4.5rem minmax(0, 1.4fr) 5rem minmax(
                0,
                1fr
            ) minmax(0, 1.2fr);
        align-items: baseline;
    }

    .works-head span:nth-child(n + 3) {
        display: block;
    }

    .work-no {
        grid-row: auto;
    }

    .work-year,
    .work-place,
    .work-medium {
        grid-column: auto;
        font-size: 0.875rem;
    }

    .work:hover {
        background: var(--color-surface);
    }
}

/* ── Ausstellungen und Auszeichnungen ──────────────────── */
.cv-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-text);
}

.cv-item {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-line);
}

.cv-year {
    grid-row: span 2;
    font-size: 0.875rem;
}

.cv-kind {
    justify-self: start;
    padding: 0 var(--space-2);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    font-size: 0.6875rem;
}

.cv-title {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-4);
}

.cv-place {
    color: var(--color-muted);
}

@media (min-width: 60rem) {
    .cv-item {
        grid-template-columns: 4.5rem 13rem minmax(0, 1fr);
        align-items: baseline;
    }

    .cv-year {
        grid-row: auto;
    }
}

/* ── Über mich ─────────────────────────────────────────── */
.about {
    display: grid;
    gap: var(--space-6) var(--space-8);
}

.about-image {
    margin: 0;
}

.about-image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--color-surface);
}

.about-name {
    margin-bottom: var(--space-1);
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
    letter-spacing: -0.04em;
}

.about-role {
    margin: 0 0 var(--space-5);
    color: var(--color-link);
}

@media (min-width: 52rem) {
    .about {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: start;
    }
}

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0 var(--space-5);
    margin: var(--space-6) 0 0;
    border-top: 1px solid var(--color-line);
}

.facts div {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-line);
}

.facts dt {
    color: var(--color-muted);
}

.facts dd {
    margin: 0;
}

/* ── Leitsatz ──────────────────────────────────────────── */
.statement {
    padding-block: var(--space-6);
}

.statement blockquote {
    max-width: 34ch;
    margin: 0;
    font-size: clamp(1.35rem, 1rem + 1.7vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.22;
    text-wrap: balance;
}

.statement blockquote p {
    margin: 0;
}

.statement blockquote p::before {
    content: '«';
    color: var(--color-link);
}

.statement blockquote p::after {
    content: '»';
    color: var(--color-link);
}

.statement figcaption {
    margin-top: var(--space-4);
    color: var(--color-muted);
}

.statement figcaption::before {
    content: '— ' / '';
}

/* ── Fliesstext ────────────────────────────────────────── */
.prose {
    max-width: var(--spalte);
}

.text-block {
    padding-right: max(0px, calc(100% - var(--spalte)));
}

.text-block.prose {
    max-width: none;
}

.prose > :last-child {
    margin-bottom: 0;
}

.prose h2 {
    margin-top: var(--space-6);
    font-size: var(--label);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.prose h2:first-child {
    margin-top: 0;
}

.prose h3 {
    margin-top: var(--space-5);
}

.prose ul,
.prose ol {
    padding-left: 1.4em;
}

.prose li::marker {
    color: var(--color-link);
}

.prose blockquote {
    margin-left: 0;
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-link);
}

/* ── Kontakt ───────────────────────────────────────────── */
.contact-block h2 {
    font-size: var(--label);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.contact-block .prose {
    color: var(--color-muted);
}

.contact-mail {
    margin: var(--space-5) 0 0;
    font-size: clamp(1.35rem, 0.9rem + 2.4vw, 3rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.contact-mail a {
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

.contact-facts {
    max-width: 60rem;
}

.contact-facts:empty {
    display: none;
}

/* ── Index aller Serien (unter jeder Serie) ────────────── */
.series-foot {
    margin-top: var(--space-9);
}

.series-index ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-text);
}

.series-index li {
    border-bottom: 1px solid var(--color-line);
}

.series-index a {
    display: flex;
    gap: var(--space-4);
    align-items: baseline;
    min-height: 44px;
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
    color: var(--color-text);
    text-decoration: none;
}

.series-index a:hover .series-name {
    color: var(--color-link);
    text-decoration: underline;
}

.series-index a[aria-current='page'] .series-name {
    text-decoration: underline;
    text-decoration-color: var(--color-marker);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
}

/* ── Knöpfe und Formulare ──────────────────────────────── */
.button,
.form button,
.account-signed-in button,
.members-join button,
.search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-5);
    font: inherit;
    font-size: var(--label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-accent-text);
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 0;
    cursor: pointer;
}

.button:hover,
.form button:hover,
.members-join button:hover,
.search button:hover {
    color: var(--color-accent);
    background: transparent;
}

.form-block {
    max-width: none;
}

.form {
    display: grid;
    gap: var(--space-4);
    max-width: var(--spalte);
}

.form label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--label);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.form input:not([type='checkbox'], [type='radio'], [type='hidden']),
.form textarea,
.form select,
.search input[type='search'] {
    width: 100%;
    min-height: 48px;
    padding: var(--space-2) var(--space-3);
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0;
}

.form textarea {
    min-height: 10rem;
    line-height: 1.6;
}

.form input[type='checkbox'],
.form input[type='radio'] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--color-accent);
}

.form button {
    justify-self: start;
}

.form-field {
    display: grid;
    gap: var(--space-1);
}

.form-help {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.form [role='alert'],
.form .error,
.form-error,
.form-errors,
.form-required {
    margin: 0;
    color: var(--error);
}

.form [role='status'] {
    padding: var(--space-4);
    background: var(--color-surface);
    border-left: 2px solid var(--color-link);
}

.form-consent label {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    font-size: 0.875rem;
    letter-spacing: 0;
    text-transform: none;
}

.form-consent input {
    flex: none;
    margin-top: 0.2rem;
}

/* ── Anmeldung und Mitgliedschaft (Modul «Mitglieder») ─── */
.account-login,
.members-panel {
    width: min(100% - 2 * var(--rand), var(--spalte));
    margin: var(--space-6) auto;
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    background: var(--color-surface);
}

.account-login h2,
.members-panel h2 {
    margin-top: 0;
}

.account-signed-in,
.members-join {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.account-signed-in p {
    margin: 0;
}

.account-signed-in button {
    color: var(--color-text);
    background: transparent;
    border-color: var(--color-border);
}

.account-status {
    padding: var(--space-3) var(--space-4);
    background: var(--color-background);
}

/* ── Suche (aus dem Kern) ──────────────────────────────── */
.search form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: end;
    margin-bottom: var(--space-6);
}

.search label {
    flex-basis: 100%;
    font-size: var(--label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.search input[type='search'] {
    flex: 1 1 16rem;
    width: auto;
}

.search-results {
    list-style: none;
    padding: 0;
}

.search-results li {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-line);
}

mark {
    background: var(--mark);
    color: inherit;
}

/* ── Fuss: Perforation, Leitsatz, Rechtliches ──────────── */
.site-footer {
    position: relative;
    padding-top: 1.8rem;
    background: var(--color-film);
    color: var(--color-film-muted);
    font-size: 0.8125rem;
}

.film-edge {
    top: 0.55rem;
}

.footer-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-5) var(--space-7);
    width: min(100% - 2 * var(--rand), var(--weit));
    margin-inline: auto;
    padding-block: var(--space-6) var(--space-7);
}

.global-footer p {
    margin: 0 0 var(--space-1);
}

.global-footer .claim {
    margin-bottom: var(--space-3);
    color: var(--color-film-text);
    font-size: var(--label);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.footer-title {
    margin: 0 0 var(--space-2);
    color: var(--color-film-text);
}

.site-footer .nav ul,
.footer-languages ul {
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer .nav a,
.footer-languages a,
.footer-languages span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--color-film-muted);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: underline;
}

.site-footer .nav a:hover,
.footer-languages a:hover {
    color: var(--color-film-text);
}

.site-footer .nav a[aria-current='page'] {
    color: var(--color-film-text);
    text-underline-offset: 0.25em;
}

.footer-languages ul {
    flex-direction: row;
    gap: 0 var(--space-3);
}

.footer-languages [aria-current] {
    color: var(--color-film-text);
    font-weight: 600;
    text-decoration: none;
}

.site-footer :focus-visible {
    outline-color: var(--color-film-text);
}

/* Das Zeichen im Kopf ist schwarz gezeichnet: in der dunklen Darstellung hell */
:root[data-theme='dark'] .brand-mark {
    filter: invert(1);
}

/* Cookie-Hinweis (aus dem Kern): eckig; «Immer aktiv» in der Textfarbe — das Grün des Kerns erreicht auf dem
   dunklen Grund, mit dem Negativ beginnt, keine 4,5:1 */
.negativ .basalto-cookies {
    --bc-r: 0px;
}

.negativ .basalto-cookies__aktiv {
    color: var(--color-text);
}

/* Teilen (aus dem Kern): eckig */
.negativ .basalto-teilen__knopf {
    border-radius: 0;
}

.embed {
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    background: var(--color-surface);
}

/* ── Druck: Bilder und Angaben, kein Menü ──────────────── */
@media print {
    .site-header,
    .skip-link,
    .site-footer,
    .series-foot,
    .form-block {
        display: none;
    }

    body {
        font-size: 9pt;
        color: #000;
        background: #fff;
    }

    a {
        color: inherit;
    }

    .strip-frames,
    .strip-frame {
        background: #fff;
    }
}