/*
 * Kanzlei — Stylesheet (Premium). Nachtblau auf Kalkweiss, Haarlinien und nummerierte Register: Jeder Abschnitt trägt
 * in der Randspalte seine Nummer (01, 02 …) über einem Registerreiter, der Inhalt steht rechts — wie ein Vertrag.
 * Source Serif 4 für Titel und Zahlen, Public Sans für den Text. Alle Farben, Schriften und Abstände kommen aus
 * «design» (theme.lava) und lassen sich im Backend überschreiben; feste Farben nur für Fehler und Druck.
 * Bewegung nur an Bildern und nur ohne «reduzierte Bewegung». WCAG 2.2 AA bei Tag und Nacht, je Farbvariante.
 *
 * Schriften: Source Serif 4 — Copyright 2014 The Source Serif 4 Project Authors
 * (https://github.com/adobe-fonts/source-serif); Public Sans — Copyright 2015 The Public Sans Project Authors
 * (https://github.com/uswds/public-sans). Beide lizenziert unter der SIL Open Font License, Version 1.1
 * (https://openfontlicense.org).
 */

/* ── Grundlage ─────────────────────────────────────────── */
:root {
    --wrap: 78rem;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --margin-col: 15rem;
    --rule: color-mix(in srgb, var(--color-text) 24%, transparent);
    --error: #a3241c;
    --mark: color-mix(in srgb, var(--color-link) 16%, transparent);
}

:root[data-theme='dark'] {
    --rule: color-mix(in srgb, var(--color-text) 22%, transparent);
    --error: #f39a93;
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-background);
    font-feature-settings: 'kern', 'liga';
    counter-reset: register;
}

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

h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -0.012em;
    margin: 0 0 var(--space-4);
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: manual;
}

@media (max-width: 30rem) {
    h1,
    h2 {
        hyphens: auto;
    }
}

h1 {
    font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.6rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.7rem, 1.35rem + 1.3vw, 2.5rem);
}

h3 {
    font-size: 1.35rem;
}

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

em,
i,
cite {
    font-family: var(--font-emphasis);
    font-style: normal;
}

h1 em,
h2 em,
h3 em {
    font-family: var(--font-italic);
}

strong,
b {
    font-weight: 650;
}

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

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

: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 !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Kleine Beschriftungen: gesperrte Versalien der Textschrift */
.kicker,
.reg-label,
.place-label,
.pub-meta,
.step-duration,
.footer-title,
.notice-label,
.attachment-label,
.facts-title,
.small-title,
.register-title,
.fees-table thead th,
.person-areas,
.route-mode,
.facts-list dt,
.intro-figure figcaption,
.gallery-row figcaption {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.kicker {
    margin-bottom: var(--space-4);
    color: var(--color-link);
}

/* ── Gerüst ────────────────────────────────────────────── */
main {
    display: block;
}

main:focus {
    outline: none;
}

.skip-link {
    position: absolute;
    left: var(--space-3);
    top: -4rem;
    z-index: 40;
    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 > *,
.landing > *,
.detail > * {
    margin-block: 0;
}

.page-body,
.landing {
    display: grid;
    gap: clamp(var(--space-8), 7vw, var(--space-9));
    padding-bottom: var(--space-9);
}

.page-body {
    padding-top: var(--space-7);
}

/* Endet die Seite mit dem dunklen Band, schliesst der Fuss direkt an */
.landing:has(> .cta:last-child),
.page-body:has(> .cta:last-child) {
    padding-bottom: 0;
}

.detail {
    display: grid;
    gap: var(--space-8);
    padding-bottom: var(--space-9);
}

/* Breite Spalte für alles, was nicht über die ganze Breite geht */
.reg,
.split,
.text-block,
.figure,
.search-block,
.account-block,
.members-block,
.notice,
.pull-quote,
.comments {
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
}

/* ── Register: Randspalte mit Nummer, Inhalt rechts ───── */
.reg {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5) clamp(var(--space-6), 5vw, var(--space-9));
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
}

@media (min-width: 60rem) {
    .reg {
        grid-template-columns: var(--margin-col) minmax(0, 1fr);
    }

    .reg > .reg-body {
        grid-column: 2;
    }
}

/* Der Registerreiter: ein kräftiger Strich über der Randspalte, auf der Haarlinie */
.reg > .reg-head {
    position: relative;
}

.reg > .reg-head::after {
    content: '';
    position: absolute;
    left: 0;
    top: calc(-1 * var(--space-5) - 2px);
    width: min(100%, 4.5rem);
    height: 3px;
    background: var(--color-accent);
}

@media (min-width: 60rem) {
    .reg > .reg-head {
        position: sticky;
        top: 7.5rem;
        align-self: start;
    }

    .reg > .reg-head::after {
        width: 100%;
    }
}

.reg-head-leer::after {
    display: none;
}

/* Nummer des Abschnitts — nur Abschnitte mit Titel zählen */
.reg-head:has(.reg-title)::before {
    counter-increment: register;
    content: counter(register, decimal-leading-zero) / '';
    display: block;
    margin-bottom: var(--space-3);
    font-family: var(--font-heading);
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-link);
}

.reg-title {
    margin: 0;
    font-size: clamp(1.45rem, 1.25rem + 0.6vw, 1.8rem);
    line-height: 1.2;
}

.reg-intro {
    margin: var(--space-3) 0 0;
    color: var(--color-muted);
    font-size: 0.9375rem;
}

.reg-label {
    margin: 0;
    color: var(--color-link);
}

.reg-more {
    margin: var(--space-5) 0 0;
}

/* ── Briefkopf ─────────────────────────────────────────── */
.letterhead {
    background: var(--color-dark);
    color: var(--color-dark-text);
    font-size: 0.8125rem;
}

.letterhead-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--space-5);
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
}

.letterhead-places ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.letterhead-places [aria-current] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.45em;
}

.letterhead-places {
    margin: 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.75rem;
}

.letterhead a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    color: var(--color-dark-text);
    text-decoration: none;
}

.letterhead a:hover {
    text-decoration: underline;
}

.letterhead :focus-visible {
    outline-color: var(--color-dark-link);
    outline-offset: 0;
}

.letterhead-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-4);
    margin-left: auto;
}

.letterhead .languages ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--space-3);
    border-left: 1px solid
        color-mix(in srgb, var(--color-dark-text) 30%, transparent);
}

.letterhead .languages a,
.letterhead .languages span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 40px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.letterhead .languages [aria-current] {
    color: var(--color-dark-link);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.45em;
}

.letterhead .appearance-toggle {
    width: 40px;
    height: 40px;
    color: var(--color-dark-text);
}

.header-account a.members-link,
.header-account button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: inherit;
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.header-account form {
    margin: 0;
}

@media (max-width: 63.99rem) {
    .letterhead-places {
        display: none;
    }
}

@media (max-width: 47.99rem) {
    .letterhead .tool-link span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .letterhead .tool-link {
        min-width: 40px;
        justify-content: center;
    }

    .letterhead-tools {
        gap: 0 var(--space-1);
    }

    .letterhead .languages ul {
        padding-left: var(--space-1);
    }
}

/* ── Kopf ──────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--color-background) 96%, transparent);
    border-bottom: 3px double var(--rule);
    backdrop-filter: saturate(1.1) blur(8px);
}

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
    padding-block: var(--space-3);
}

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

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

.brand-name {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

/* Ein langer Name bricht um, das Menü bleibt auf einer Zeile */
.brand {
    flex: 0 1 auto;
    min-width: 0;
}

.header-wide {
    flex: none;
    margin-left: auto;
}

.header-action {
    flex: none;
}

.nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav ul ul {
    display: none;
}

.nav li {
    display: flex;
}

.nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
}

.nav a:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-link);
    text-underline-offset: 0.55em;
}

.nav a[aria-current='page'],
.nav .active > a {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.55em;
}

.button-header {
    min-height: 44px;
    white-space: nowrap;
}

/* Menü auf schmaleren Bildschirmen: <details> ohne Skript */
.menu {
    display: none;
    margin: 0 0 0 auto;
}

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

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

.menu-lines {
    width: 16px;
    height: 10px;
    border-block: 1.5px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 1.5px
        no-repeat;
}

.menu[open] .menu-lines {
    border-color: transparent;
    background:
        linear-gradient(
            45deg,
            transparent 45%,
            currentColor 45%,
            currentColor 55%,
            transparent 55%
        ),
        linear-gradient(
            -45deg,
            transparent 45%,
            currentColor 45%,
            currentColor 55%,
            transparent 55%
        );
}

.menu-panel {
    position: absolute;
    inset-inline: calc(-1 * var(--gutter));
    top: calc(100% + 3px);
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5) var(--gutter) var(--space-7);
    background: var(--color-background);
    color: var(--color-text);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 30px 40px -30px rgb(0 0 0 / 25%);
}

.menu-panel .nav ul {
    flex-direction: column;
    align-items: stretch;
    counter-reset: menu;
}

.menu-panel .nav li {
    border-bottom: 1px solid var(--color-line);
}

.menu-panel .nav a {
    flex: 1;
    gap: var(--space-4);
    min-height: 56px;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 400;
}

.menu-panel .nav a::before {
    counter-increment: menu;
    content: counter(menu, decimal-leading-zero) / '';
    min-width: 2.2rem;
    font-size: 0.95rem;
    color: var(--color-link);
    font-variant-numeric: tabular-nums;
}

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

.menu-tools .tool-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    color: var(--color-text);
    font-weight: 600;
}

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

    .menu {
        display: block;
    }
}

@media (max-width: 30rem) {
    .brand-name {
        font-size: 1.3rem;
    }

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

    .menu > summary {
        padding-inline: var(--space-3);
    }
}

/* Schmal: Kopf scrollt mit, statt den Bildschirm zu belegen */
@media (max-width: 47.99rem) {
    .site-header {
        position: relative;
    }
}

/* ── Knöpfe ────────────────────────────────────────────── */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.button:hover {
    background: transparent;
    color: var(--color-link);
}

.button-header {
    background: transparent;
    color: var(--color-link);
}

.button-header:hover,
.button-header[aria-current='page'] {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.button-outline {
    background: transparent;
    color: var(--color-link);
}

.button-outline:hover {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.button-light {
    background: var(--color-dark-text);
    border-color: var(--color-dark-text);
    color: var(--color-dark);
}

.button-light:hover {
    background: transparent;
    color: var(--color-dark-text);
}

.more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    font-weight: 600;
}

.more::after {
    content: '→' / '';
    text-decoration: none;
    display: inline-block;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
}

/* ── Fotos: getönt in der Farbe der Variante ──────────── */
.photo {
    position: relative;
    overflow: hidden;
    background: var(--color-tint);
    isolation: isolate;
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.55) contrast(1.04);
}

.photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-tint);
    mix-blend-mode: color;
    opacity: 0.72;
    pointer-events: none;
}

:root[data-theme='dark'] .photo img {
    filter: saturate(0.5) contrast(1.02) brightness(0.84);
}

/* ── Bühne ─────────────────────────────────────────────── */
.intro {
    display: grid;
    gap: var(--space-7);
    align-items: end;
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
    padding-top: clamp(var(--space-6), 6vw, var(--space-9));
}

@media (min-width: 60rem) {
    .intro {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
        gap: clamp(var(--space-7), 6vw, var(--space-9));
    }
}

.intro-title {
    max-width: 14ch;
    margin-bottom: var(--space-5);
    font-size: clamp(2.7rem, 1.4rem + 5vw, 5.6rem);
    line-height: 1;
    letter-spacing: -0.028em;
}

.intro-lead {
    max-width: 36rem;
    font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.3rem);
    line-height: 1.55;
    color: var(--color-muted);
}

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

.intro .actions {
    margin-top: var(--space-6);
}

.intro-note {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 36rem;
    margin: var(--space-6) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--rule);
    font-size: 0.9375rem;
    color: var(--color-muted);
}

.intro-note::before {
    content: '';
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    background: var(--color-accent);
}

.intro-figure {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--rule);
}

.intro-figure .photo {
    aspect-ratio: 4 / 5;
}

.intro-figure figcaption {
    margin-top: var(--space-3);
    color: var(--color-muted);
}

@media (max-width: 59.99rem) {
    .intro-figure {
        max-width: 30rem;
    }

    .intro-figure .photo {
        aspect-ratio: 4 / 3;
    }
}

/* ── Grundsatz ─────────────────────────────────────────── */
.statement-text {
    max-width: 22ch;
    margin-bottom: var(--space-6);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.statement-body {
    max-width: 40rem;
    color: var(--color-muted);
    font-size: 1.125rem;
}

.signature {
    margin: var(--space-5) 0 0;
    font-family: var(--font-italic);
    font-size: 1.35rem;
    color: var(--color-link);
}

/* ── Fachgebiete ───────────────────────────────────────── */
.area-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.areas-liste .area {
    position: relative;
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-4);
    align-items: baseline;
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--color-line);
}

.areas-liste .area:first-child {
    padding-top: 0;
}

.areas-liste .area::after {
    content: '→' / '';
    font-size: 1.25rem;
    color: var(--color-link);
}

.area-num {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-link);
}

.area-title {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.65rem);
}

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

.area-title a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.area:hover .area-title a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.area-intro {
    max-width: 40rem;
    color: var(--color-muted);
    font-size: 0.9375rem;
}

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

.areas-liste .area:hover {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--color-link) 6%, transparent),
        transparent 70%
    );
}

.areas-kacheln .area-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-6) var(--space-5);
}

.areas-kacheln .area {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3) var(--space-3);
    align-content: start;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-line);
}

.areas-kacheln .area .photo {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 2;
    margin-bottom: var(--space-2);
}

.areas-kacheln .area-num {
    padding-top: 0.15em;
}

.areas-kacheln .area-title {
    font-size: 1.35rem;
}

/* ── Team ──────────────────────────────────────────────── */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: var(--space-7) var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 60rem) {
    .team-grid {
        grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    }
}

.person-card {
    position: relative;
}

.portrait {
    margin: 0 0 var(--space-4);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--color-line);
}

.portrait img,
.portrait svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.monogram-ground {
    fill: var(--color-surface);
}

.monogram-frame {
    fill: none;
    stroke: var(--rule);
    stroke-width: 1;
}

.monogram-letters {
    font-family: var(--font-heading);
    font-size: 70px;
    letter-spacing: 3px;
    fill: var(--color-link);
}

.monogram-rule {
    stroke: var(--color-link);
    stroke-width: 2;
}

.person-name {
    margin: 0 0 var(--space-1);
    font-size: 1.3rem;
}

.person-name a {
    color: var(--color-text);
    text-decoration: none;
}

.person-name a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.person-card:hover .person-name a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.person-card:hover .monogram-frame {
    stroke: var(--color-link);
}

.person-role {
    margin: 0 0 var(--space-3);
    color: var(--color-muted);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.person-areas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0 0 var(--space-2);
    color: var(--color-link);
    font-size: 0.6875rem;
}

.person-langs {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-muted);
}

/* ── Publikationen ─────────────────────────────────────── */
.pub-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pub {
    display: grid;
    gap: var(--space-2) var(--space-6);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--color-line);
}

.pub:first-child {
    padding-top: 0;
}

@media (min-width: 40rem) {
    .pub {
        grid-template-columns: 9rem minmax(0, 1fr);
    }
}

.pub-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    color: var(--color-muted);
}

.pub-meta time {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

.pub-cat {
    color: var(--color-link);
}

.pub-title {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
}

.pub-title a {
    color: var(--color-text);
    text-decoration-color: var(--rule);
}

.pub-title a:hover {
    text-decoration-color: currentColor;
}

.pub-intro {
    max-width: 42rem;
    color: var(--color-muted);
    font-size: 0.9375rem;
}

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

.pub-authors {
    margin: var(--space-2) 0 0;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.pub-list .empty {
    color: var(--color-muted);
}

/* Register der Publikationen */
.register-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-6);
}

.register-title {
    margin-bottom: var(--space-3);
    color: var(--color-muted);
}

.categories ul,
.archive ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-line);
}

.categories li,
.archive li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    border-bottom: 1px solid var(--color-line);
}

.categories a,
.archive a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.categories .count,
.archive .count {
    font-family: var(--font-heading);
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
}

.categories [aria-current] {
    font-weight: 650;
}

/* ── Standorte ─────────────────────────────────────────── */
.place-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-6) var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.place {
    position: relative;
    padding-left: var(--space-4);
    border-left: 1px solid var(--rule);
}

.place .photo {
    aspect-ratio: 3 / 2;
    margin: 0 0 var(--space-4) calc(-1 * var(--space-4));
}

.place-label {
    margin: 0 0 var(--space-1);
    color: var(--color-link);
}

.place-title {
    margin: 0 0 var(--space-3);
    font-size: 1.6rem;
}

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

.place-title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.place address {
    font-style: normal;
}

.place-contact {
    display: grid;
    gap: 0;
    margin-bottom: var(--space-3);
}

.place-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.place-hours {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-muted);
}

/* ── Mandatsanfrage ────────────────────────────────────── */
.inquiry-body {
    display: grid;
    gap: var(--space-6);
    align-items: start;
}

@media (min-width: 72rem) {
    .inquiry-body {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: var(--space-7);
    }
}

.inquiry-points {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
}

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

.inquiry-points li:first-child {
    padding-top: 0;
}

.point-num {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--color-link);
    font-variant-numeric: tabular-nums;
}

.point-title {
    margin: 0 0 var(--space-1);
    font-weight: 650;
}

.point-text {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9375rem;
}

.inquiry-phone {
    display: grid;
    gap: var(--space-1);
}

.inquiry-phone a {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    color: var(--color-text);
    text-decoration: none;
    font-variant-numeric: lining-nums;
}

.inquiry-phone a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.inquiry-phone span {
    color: var(--color-muted);
    font-size: 0.9375rem;
}

/* Das Blatt: Formulare auf Papier mit Haarlinie */
.sheet {
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-top: 3px solid var(--color-accent);
    box-shadow: 0 30px 50px -40px rgb(10 20 40 / 35%);
}

/* ── Formulare ─────────────────────────────────────────── */
.form {
    display: grid;
    gap: var(--space-5);
    counter-reset: gruppe;
}

.form-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4) var(--space-5);
    min-width: 0;
    margin: 0;
    padding: 0 0 var(--space-5);
    border: 0;
    border-bottom: 1px solid var(--color-line);
}

@media (min-width: 40rem) {
    .form-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-group > .form-textarea,
    .form-group > .form-radio,
    .form-group > .form-explanation,
    .form-group > .form-checkbox {
        grid-column: 1 / -1;
    }
}

.form .form-group > legend {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: 0;
    font-family: var(--font-heading);
    font-size: 1.35rem;
}

.form-group > legend::before {
    counter-increment: gruppe;
    content: counter(gruppe, decimal-leading-zero) / '';
    font-size: 1rem;
    color: var(--color-link);
    font-variant-numeric: tabular-nums;
}

.form-field {
    display: grid;
    align-content: start;
    gap: var(--space-1);
    min-width: 0;
}

.form label,
.form legend {
    font-size: 0.875rem;
    font-weight: 600;
}

.form .form-group > legend {
    font-weight: 400;
}

.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: color-mix(in srgb, var(--color-text) 3%, var(--color-surface));
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
}

.form textarea {
    min-height: 9rem;
    border: 1px solid var(--color-border);
    resize: vertical;
}

.form select {
    appearance: none;
    padding-right: var(--space-7);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
        linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

.form input:not([type='checkbox'], [type='radio'], [type='hidden']):focus,
.form textarea:focus,
.form select:focus {
    border-color: var(--color-focus);
    outline: 2px solid var(--color-focus);
    outline-offset: 0;
}

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

.form-radio {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
    border: 0;
}

.form-radio > legend {
    width: 100%;
    margin-bottom: var(--space-2);
    padding: 0;
}

.form-radio > label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    font-weight: 400;
}

.form-checkbox label,
.form-consent label {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    font-size: 0.9375rem;
    font-weight: 400;
}

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

.form-required {
    color: var(--color-link);
}

.form .error,
.form-error {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--error);
}

.form-errors {
    padding: var(--space-4);
    border-left: 3px solid var(--error);
    background: color-mix(in srgb, var(--error) 8%, transparent);
}

.form-errors p,
.form-errors ul {
    margin: 0;
}

.has-error input,
.has-error textarea,
.has-error select {
    border-color: var(--error) !important;
}

.form button,
.search button,
.members-join button,
.account-form button {
    justify-self: start;
    min-height: 48px;
    padding: var(--space-2) var(--space-6);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-accent-text);
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 0;
    cursor: pointer;
}

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

.form-thanks {
    margin: 0;
    padding: var(--space-5);
    border-left: 3px solid var(--color-accent);
    background: color-mix(in srgb, var(--color-link) 6%, transparent);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.4;
}

.basalto-pruefung {
    font-size: 0.875rem;
    color: var(--color-muted);
}

/* ── Kennzahlen ────────────────────────────────────────── */
.figure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: var(--space-6) 0;
    margin: 0;
}

.figure-item {
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-5);
    border-left: 1px solid var(--rule);
}

.figure-item dd {
    order: -1;
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 2rem + 2.6vw, 4.2rem);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: lining-nums;
}

.figure-item dt {
    max-width: 14rem;
    color: var(--color-muted);
    font-size: 0.9375rem;
    line-height: 1.45;
}

/* ── Ablauf ────────────────────────────────────────────── */
.step-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-6) var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.step {
    position: relative;
    padding-top: var(--space-4);
    border-top: 1px solid var(--rule);
}

.step::before {
    content: '';
    position: absolute;
    left: 0;
    top: -4px;
    width: 7px;
    height: 7px;
    background: var(--color-accent);
}

.step-num {
    margin: 0 0 var(--space-3);
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 1;
    color: var(--color-link);
    font-variant-numeric: lining-nums tabular-nums;
}

.step-title {
    margin-bottom: var(--space-2);
    font-size: 1.3rem;
}

.step-text {
    color: var(--color-muted);
    font-size: 0.9375rem;
}

.step-duration {
    margin: 0;
    color: var(--color-link);
    font-size: 0.6875rem;
}

/* ── Stimmen und Zitate ────────────────────────────────── */
.quote-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-6) var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.quote-list figure {
    height: 100%;
    margin: 0;
    padding-left: var(--space-5);
    border-left: 1px solid var(--rule);
}

.quote-list blockquote {
    margin: 0;
}

.quote-list blockquote p {
    margin: 0;
    font-family: var(--font-italic);
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    line-height: 1.32;
}

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

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

.quote-list figcaption {
    margin-top: var(--space-4);
    color: var(--color-muted);
    font-size: 0.875rem;
}

.pull-quote {
    margin-block: var(--space-6);
    padding: var(--space-5) 0;
    border-block: 1px solid var(--rule);
}

.pull-quote blockquote {
    margin: 0;
}

.pull-quote p {
    margin: 0;
    font-family: var(--font-italic);
    font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
    line-height: 1.3;
}

.pull-quote figcaption {
    margin-top: var(--space-3);
    font-size: 0.875rem;
    color: var(--color-muted);
}

/* ── Konditionen ───────────────────────────────────────── */
.fees-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.fees-table thead th {
    padding: 0 var(--space-3) var(--space-3) 0;
    border-bottom: 2px solid var(--color-accent);
    color: var(--color-muted);
    text-align: left;
}

.fees-table tbody th,
.fees-table td {
    padding: var(--space-4) var(--space-3) var(--space-4) 0;
    border-bottom: 1px solid var(--color-line);
    text-align: left;
    vertical-align: baseline;
}

.fees-table tbody th {
    font-weight: 650;
}

.fees-table td {
    color: var(--color-muted);
}

.fees-table .fees-price {
    padding-right: 0;
    text-align: right;
    white-space: nowrap;
}

.fees-table td.fees-price {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-text);
    font-variant-numeric: lining-nums tabular-nums;
}

.fees-note {
    margin: var(--space-4) 0 0;
    font-size: 0.875rem;
    color: var(--color-muted);
}

@media (max-width: 39.99rem) {
    .fees-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .fees-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-1) var(--space-3);
        padding-block: var(--space-4);
        border-bottom: 1px solid var(--color-line);
    }

    .fees-table tbody th,
    .fees-table td {
        padding: 0;
        border: 0;
    }

    .fees-table td:not(.fees-price) {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .fees-table td.fees-price {
        white-space: normal;
    }
}

/* ── Bild und Text ─────────────────────────────────────── */
.split {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

@media (min-width: 60rem) {
    .split {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: clamp(var(--space-7), 6vw, var(--space-9));
    }

    .split-rechts .split-image {
        order: 2;
    }
}

.split-image {
    padding: 12px;
    border: 1px solid var(--rule);
}

.split-image .photo {
    aspect-ratio: 4 / 3;
}

.split-text > * {
    max-width: 34rem;
}

.split-text .prose {
    color: var(--color-muted);
}

/* ── Bildreihe ─────────────────────────────────────────── */
.gallery-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.gallery-row figure {
    margin: 0;
}

.gallery-row .photo {
    aspect-ratio: 4 / 5;
}

.gallery-row figcaption {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-line);
    color: var(--color-muted);
}

.caption-num {
    color: var(--color-link);
    font-variant-numeric: tabular-nums;
}

/* ── Fliesstext, Bild, Hinweis, Fragen ─────────────────── */
.prose > :last-child {
    margin-bottom: 0;
}

.prose ul,
.prose ol,
.services ul,
.cv ul {
    padding-left: 1.2em;
}

.prose li,
.services li {
    margin-bottom: var(--space-2);
}

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

.prose h2 {
    margin-top: var(--space-7);
    font-size: clamp(1.45rem, 1.25rem + 0.6vw, 1.85rem);
}

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

.prose blockquote {
    margin-inline: 0;
    padding-left: var(--space-5);
    border-left: 1px solid var(--rule);
    font-family: var(--font-italic);
    font-size: 1.2rem;
}

/* Text: schmale Lesespalte rechts der Randspalte; Zwischentitel mit Randziffer */
.text-block {
    counter-reset: ziffer;
}

@media (min-width: 60rem) {
    .text-block {
        padding-left: calc(
            var(--margin-col) + clamp(var(--space-6), 5vw, var(--space-9))
        );
    }
}

.text-block > * {
    max-width: 42rem;
}

.text-block > p:first-child {
    font-size: 1.1875rem;
    line-height: 1.6;
}

.text-block h2 {
    position: relative;
}

.text-block h2::before {
    counter-increment: ziffer;
    content: counter(ziffer) / '';
    display: inline-block;
    min-width: 2.2rem;
    margin-right: var(--space-2);
    font-size: 0.75em;
    color: var(--color-link);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 60rem) {
    .text-block h2::before {
        position: absolute;
        right: 100%;
        top: 0.35em;
        min-width: 0;
        margin-right: var(--space-5);
        font-family: var(--font-body);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        content: 'N ' counter(ziffer) / '';
        white-space: nowrap;
    }
}

.figure img {
    width: 100%;
}

.figure figcaption {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-line);
    color: var(--color-muted);
    font-size: 0.875rem;
}

.notice {
    display: grid;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--color-accent);
    background: var(--color-surface);
}

@media (min-width: 60rem) {
    .notice {
        grid-template-columns: var(--margin-col) minmax(0, 1fr);
        gap: var(--space-5) clamp(var(--space-6), 5vw, var(--space-9));
    }
}

.notice-label {
    margin: 0;
    color: var(--color-link);
}

.notice-wichtig .notice-label::before {
    content: '! ' / '';
}

.notice-title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading);
    font-size: 1.3rem;
}

.notice-body {
    max-width: 44rem;
}

.faq details {
    border-bottom: 1px solid var(--color-line);
}

.faq details:first-child {
    border-top: 1px solid var(--color-line);
}

.faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    min-height: 60px;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    cursor: pointer;
    list-style: none;
}

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

.faq summary::after {
    content: '+' / '';
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--rule);
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--color-link);
}

.faq details[open] summary::after {
    content: '−' / '';
}

.faq .prose {
    max-width: 44rem;
    padding-bottom: var(--space-5);
    color: var(--color-muted);
}

/* ── Aufruf ────────────────────────────────────────────── */
.cta {
    background: var(--color-dark);
    color: var(--color-dark-text);
}

.cta-inner {
    display: grid;
    gap: var(--space-5) var(--space-9);
    align-items: end;
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
    padding-block: clamp(var(--space-7), 8vw, var(--space-9));
}

@media (min-width: 60rem) {
    .cta-inner {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    }
}

.cta h2 {
    max-width: 16ch;
    margin: 0;
    font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.cta p {
    color: var(--color-dark-muted);
}

.cta .actions {
    margin: var(--space-5) 0 0;
}

.cta :focus-visible {
    outline-color: var(--color-dark-link);
}

/* ── Seitenkopf ────────────────────────────────────────── */
.page-header {
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
    padding-top: clamp(var(--space-6), 5vw, var(--space-8));
}

.page-header-inner {
    display: grid;
    gap: var(--space-4) clamp(var(--space-6), 5vw, var(--space-9));
    padding-bottom: var(--space-6);
    border-bottom: 3px double var(--rule);
}

@media (min-width: 60rem) {
    .page-header-inner {
        grid-template-columns: var(--margin-col) minmax(0, 1fr);
        align-items: end;
    }

    .page-header-side {
        align-self: end;
        padding-bottom: 0.6rem;
    }
}

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

.page-header .lead,
.detail-header .lead {
    max-width: 40rem;
    font-size: clamp(1.1rem, 1.02rem + 0.3vw, 1.25rem);
    color: var(--color-muted);
}

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

.breadcrumbs ol,
.breadcrumbs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.breadcrumbs li + li::before {
    content: '/' / '';
    color: var(--color-muted);
}

.breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--color-link);
}

.breadcrumbs [aria-current] {
    color: var(--color-muted);
}

/* ── Detailseiten ──────────────────────────────────────── */
.detail-header {
    margin-top: clamp(var(--space-6), 5vw, var(--space-8));
    padding-top: var(--space-6);
}

.detail-header > .reg-head::after {
    top: calc(-1 * var(--space-6) - 2px);
}

.detail-header h1 {
    max-width: 18ch;
}

.detail-number {
    margin: var(--space-3) 0 0;
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--color-link);
    font-variant-numeric: lining-nums;
}

.detail-photo {
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
}

.detail-photo .photo {
    aspect-ratio: 21 / 8;
}

@media (max-width: 47.99rem) {
    .detail-photo .photo {
        aspect-ratio: 3 / 2;
    }
}

.detail-body {
    padding-top: var(--space-6);
}

.detail-body > .reg-head::after {
    top: calc(-1 * var(--space-6) - 2px);
}

.detail-content {
    display: grid;
    gap: var(--space-6);
}

.detail-content > * {
    width: auto;
    margin: 0;
}

.detail-content .text-block {
    padding-left: 0;
}

.detail-content .text-block h2::before {
    position: static;
    margin-right: var(--space-2);
    content: counter(ziffer) / '';
    font-family: var(--font-heading);
    font-size: 0.75em;
    letter-spacing: 0;
}

.detail-content .reg,
.detail-content .split {
    width: auto;
    grid-template-columns: minmax(0, 1fr);
}

.detail-content .reg > .reg-body {
    grid-column: auto;
}

.detail-content .reg > .reg-head {
    position: relative;
    top: auto;
}

.detail-content .reg > .reg-head::after {
    width: 4.5rem;
}

.detail-content .notice {
    grid-template-columns: minmax(0, 1fr);
}

.facts-title {
    margin: 0 0 var(--space-3);
    color: var(--color-muted);
}

.facts-title ~ .facts-title {
    margin-top: var(--space-6);
}

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

.services li {
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--color-line);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.facts-action {
    margin-top: var(--space-5);
}

.facts-text {
    font-size: 0.9375rem;
    color: var(--color-muted);
}

.hours-list {
    margin: 0;
}

.hours-list > div {
    display: grid;
    gap: 0;
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--color-line);
    font-size: 0.9375rem;
}

.hours-list dt {
    font-weight: 650;
}

.hours-list dd {
    margin: 0;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.related:not(:has(li)) {
    display: none;
}

.small-title {
    margin: 0 0 var(--space-3);
    color: var(--color-muted);
}

/* Person */
.person-sheet {
    margin-top: clamp(var(--space-6), 5vw, var(--space-8));
    padding-top: var(--space-6);
}

.person-sheet > .reg-head::after {
    top: calc(-1 * var(--space-6) - 2px);
}

@media (max-width: 59.99rem) {
    .person-sheet > .reg-body {
        order: -1;
    }

    .person-aside {
        display: grid;
        grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
        gap: var(--space-5);
        align-items: start;
    }

    .person-aside .portrait {
        margin: 0;
    }

    .person-action {
        display: none;
    }
}

.person-aside .portrait {
    max-width: 18rem;
    margin-bottom: var(--space-5);
    padding: 10px;
    border: 1px solid var(--rule);
    aspect-ratio: auto;
}

.person-aside .portrait svg,
.person-aside .portrait img {
    aspect-ratio: 4 / 5;
}

.facts-list {
    margin: 0;
}

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

.facts-list dt {
    color: var(--color-muted);
    font-size: 0.6875rem;
}

.facts-list dd {
    margin: 0;
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

.facts-list a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}

.person-header h1 {
    margin-bottom: var(--space-5);
}

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

.person-section {
    margin-top: var(--space-7);
}

.area-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 0 var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-line);
}

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

.area-links a {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    min-height: 52px;
    padding-block: var(--space-3);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-text);
    text-decoration: none;
}

.area-links a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.area-links-num {
    font-size: 0.95rem;
    color: var(--color-link);
    font-variant-numeric: tabular-nums;
}

.cv ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--rule);
}

.cv li {
    position: relative;
    padding: 0 0 var(--space-3) var(--space-5);
    font-variant-numeric: tabular-nums;
}

.cv li > p {
    margin: 0;
}

.cv li::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 0.55em;
    width: 7px;
    height: 7px;
    background: var(--color-accent);
}

.person-action {
    margin-top: var(--space-7);
}

.name-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 0 var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-line);
}

.name-list li {
    display: grid;
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-line);
}

.name-list a {
    font-family: var(--font-heading);
    font-size: 1.15rem;
}

.name-list span {
    font-size: 0.875rem;
    color: var(--color-muted);
}

/* Publikation */
.pub-date {
    margin: var(--space-2) 0 0;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-text);
}

.detail-pub .detail-header .pub-authors {
    margin-top: var(--space-5);
    font-size: 0.9375rem;
}

.attachment {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-line);
}

.attachment-label {
    margin: 0;
    color: var(--color-muted);
}

.detail-pub .detail-content {
    max-width: 44rem;
}

.pub-list-kurz .pub-intro {
    display: none;
}

/* Standort */
.place-address {
    margin: 0 0 var(--space-4);
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem);
    font-style: normal;
    line-height: 1.35;
}

.detail-place .place-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
}

.route h2 {
    font-size: clamp(1.45rem, 1.25rem + 0.6vw, 1.8rem);
}

.route-line {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.route-line li {
    position: relative;
    padding: 0 0 var(--space-5) var(--space-6);
}

.route-line li::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0.9rem;
    bottom: -0.2rem;
    width: 2px;
    background: var(--rule);
}

.route-line li:last-child::before {
    display: none;
}

.route-line li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-accent);
    background: var(--color-background);
}

.route-line li:last-child::after {
    background: var(--color-accent);
}

.route-mode {
    margin: 0 0 var(--space-1);
    color: var(--color-link);
}

.route-text {
    margin: 0;
    max-width: 36rem;
}

/* Teilen (aus dem Kern) */
.basalto-teilen {
    margin-top: var(--space-4);
}

.basalto-teilen .basalto-teilen__titel {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--color-muted);
}

.basalto-teilen .basalto-teilen__knopf {
    border-radius: 0;
    border-color: var(--rule);
    background: transparent;
}

.basalto-teilen .basalto-teilen__knopf:hover {
    border-color: var(--color-link);
    color: var(--color-link);
}

/* ── Suche ─────────────────────────────────────────────── */
.search form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: end;
    max-width: 48rem;
    margin-bottom: var(--space-5);
}

.search label {
    flex-basis: 100%;
    font-weight: 600;
}

.search input[type='search'] {
    flex: 1 1 18rem;
    width: auto;
    min-height: 56px;
    font-family: var(--font-heading);
    font-size: 1.35rem;
}

.search button {
    min-height: 56px;
}

.search-filter ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    border-bottom: 1px solid var(--color-line);
}

.search-filter a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    color: var(--color-muted);
}

.search-filter a[aria-current] {
    color: var(--color-link);
    box-shadow: inset 0 -2px 0 var(--color-accent);
}

.search-count {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.search-results {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: treffer;
}

.search-results li {
    position: relative;
    padding: var(--space-4) 0 var(--space-4) 3rem;
    border-bottom: 1px solid var(--color-line);
}

.search-results li::before {
    counter-increment: treffer;
    content: counter(treffer, decimal-leading-zero) / '';
    position: absolute;
    left: 0;
    top: var(--space-4);
    font-family: var(--font-heading);
    color: var(--color-link);
    font-variant-numeric: tabular-nums;
}

.search-results a {
    font-family: var(--font-heading);
    font-size: 1.3rem;
}

.search-results p {
    margin: var(--space-1) 0 0;
    max-width: 48rem;
    font-size: 0.9375rem;
    color: var(--color-muted);
}

mark {
    background: var(--mark);
    color: inherit;
    padding-inline: 0.1em;
}

.pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding-inline: var(--space-3);
    border: 1px solid var(--rule);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.pagination [aria-current] {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-color: var(--color-accent);
}

/* ── Kommentare (Modul) ───────────────────────────────── */
.comments {
    display: grid;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
}

.detail-content .comments {
    width: auto;
}

.comments > h2 {
    font-size: clamp(1.45rem, 1.25rem + 0.6vw, 1.8rem);
}

.comments-empty {
    color: var(--color-muted);
}

.comment-list,
.comment-replies {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.comment-inner {
    display: flex;
    gap: var(--space-4);
}

.comment-main {
    min-width: 0;
    flex: 1;
}

.comment-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--rule);
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-link);
    background: color-mix(in srgb, var(--color-link) 7%, var(--color-surface));
}

.comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0 0 var(--space-2);
    font-size: 0.875rem;
}

.comment-meta time {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.comment-replies {
    margin: var(--space-3) 0 0 var(--space-5);
    padding-left: var(--space-5);
    border-left: 1px solid var(--rule);
}

.comment-form {
    padding: clamp(var(--space-5), 4vw, var(--space-6));
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-top: 3px solid var(--color-accent);
}

.comment-form h3 {
    font-size: 1.35rem;
}

.comment-fields {
    display: grid;
    gap: var(--space-4) var(--space-5);
}

@media (min-width: 40rem) {
    .comment-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.comment-hint {
    font-size: 0.875rem;
    color: var(--color-muted);
}

/* ── Kundenkonto und Mitglieder (aus dem Kern) ─────────── */
body .konto {
    --konto-r: 0px;
    --konto-r-gross: 0px;
    --konto-hex: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    --konto-schatten: 0 30px 50px -40px rgb(10 20 40 / 35%);
    font-family: var(--font-body);
}

body .konto h2,
body .konto h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Das Konto bringt seine eigene Karte mit: kein zweiter Rahmen, das dunkle Band in Nachtblau statt Lava */
body .konto .account-login {
    max-width: none;
    padding: 0;
    border: 0;
    background: none;
}

body .konto .konto-versprechen {
    background: linear-gradient(
        160deg,
        var(--color-dark) 40%,
        color-mix(in srgb, var(--color-dark) 82%, var(--color-dark-link))
    );
    border-top: 3px solid var(--color-dark-link);
}

body .konto .konto-anmeldung {
    border-top: 3px solid var(--color-accent);
}

.account-block,
.members-block {
    display: grid;
    gap: var(--space-6);
}

.account-login,
.members-panel {
    max-width: 40rem;
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-top: 3px solid var(--color-accent);
}

.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 {
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    font: inherit;
    font-weight: 600;
    color: var(--color-text);
    background: transparent;
    border: 1px solid var(--color-border);
    cursor: pointer;
}

.account-status,
.members-state {
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-accent);
    background: color-mix(in srgb, var(--color-link) 6%, transparent);
}

/* ── Fuss ──────────────────────────────────────────────── */
.site-footer {
    background: var(--color-dark);
    color: var(--color-dark-muted);
    font-size: 0.9375rem;
}

.footer-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--space-6) var(--space-7);
    align-items: start;
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
    padding-block: var(--space-8);
}

.footer-brand {
    grid-column: 1 / -1;
    padding-bottom: var(--space-5);
    border-bottom: 3px double
        color-mix(in srgb, var(--color-dark-text) 28%, transparent);
}

.footer-name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-dark-text);
}

.footer-title {
    margin: 0 0 var(--space-3);
    color: var(--color-dark-link);
}

@media (min-width: 64rem) {
    .footer-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(
                0,
                1.1fr
            ) minmax(0, 0.9fr);
    }

    .footer-places {
        grid-column: span 3;
    }

    .footer-places ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.footer-places:not(:has(li)) {
    display: none;
}

.footer-places ul {
    display: grid;
    gap: var(--space-4) var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-places li {
    display: grid;
}

.footer-places a {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-dark-text);
    text-decoration: none;
}

.footer-places a:hover {
    text-decoration: underline;
}

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

.global-footer .claim {
    margin-bottom: var(--space-4);
    font-family: var(--font-italic);
    font-size: 1.25rem;
    line-height: 1.35;
    color: var(--color-dark-text);
}

.global-footer .phone,
.global-footer .email {
    color: var(--color-dark-text);
}

.global-footer .register {
    margin-top: var(--space-4);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
}

.site-footer .nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.site-footer .nav a {
    min-height: 32px;
    color: var(--color-dark-text);
    font-size: 0.9375rem;
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: color-mix(
        in srgb,
        var(--color-dark-text) 40%,
        transparent
    );
}

.site-footer a {
    color: var(--color-dark-text);
}

.site-footer :focus-visible {
    outline-color: var(--color-dark-link);
}

/* ── Umschalter Tag/Nacht ({% appearance %}) ───────────── */
.appearance-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

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

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

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

/* ── Nacht (dunkle Darstellung) ────────────────────────── */
:root[data-theme='dark'] .site-header {
    background: color-mix(in srgb, var(--color-background) 94%, transparent);
}

:root[data-theme='dark'] .brand-mark {
    filter: brightness(0) invert(92%);
}

:root[data-theme='dark'] .letterhead {
    border-bottom: 1px solid var(--color-line);
}

:root[data-theme='dark'] .cta,
:root[data-theme='dark'] .site-footer {
    border-top: 1px solid var(--color-line);
}

:root[data-theme='dark'] .sheet,
:root[data-theme='dark'] .comment-form,
:root[data-theme='dark'] .account-login,
:root[data-theme='dark'] .members-panel {
    box-shadow: none;
    border-color: var(--color-line);
}

:root[data-theme='dark'] .monogram-ground {
    fill: var(--color-surface);
}

:root[data-theme='dark'] .areas-liste .area:hover {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--color-link) 9%, transparent),
        transparent 70%
    );
}

/* ── Bewegung nur auf Wunsch, nur an Bildern ───────────── */
@media (prefers-reduced-motion: no-preference) {
    .reveal-ready .reveal {
        clip-path: inset(0 0 100% 0);
        transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.15, 1);
    }

    .reveal-ready .reveal img {
        transform: scale(1.06);
        transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .reveal-ready .reveal.is-visible {
        clip-path: inset(0);
    }

    .reveal-ready .reveal.is-visible img {
        transform: none;
    }

    .photo-intro img {
        animation: kanzlei-auftritt 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    @keyframes kanzlei-auftritt {
        from {
            transform: scale(1.06);
        }

        to {
            transform: scale(1);
        }
    }
}

/* ── Druck ─────────────────────────────────────────────── */
@media print {
    .letterhead,
    .site-header,
    .skip-link,
    .photo,
    .sheet,
    .comment-form,
    .appearance-toggle,
    .basalto-teilen {
        display: none;
    }

    .cta,
    .site-footer {
        background: #fff;
        color: #000;
    }

    .reg > .reg-head {
        position: static;
    }
}