/* =========================================================================
   Variante B -- "Klar"
   Viel Weissraum, schmale Lesespalte, feine Linien statt Farbflächen.
   Das Design tritt zurück, die Information steht im Zentrum.
   ========================================================================= */

:root {
    --c-bg: #ffffff;
    --c-surface: #ffffff;
    --c-surface-alt: #f5f7f7;
    --c-text: #16211f;
    --c-muted: #5a6b69;
    --c-accent: #1f4b53;
    --c-accent-ink: #ffffff;
    --c-accent-soft: #e8f0f0;
    --c-border: #d9e0e0;
    --c-header-bg: #ffffff;
    --c-header-ink: #16211f;
    --c-footer-bg: #16211f;
    --c-footer-ink: #dfe6e5;

    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-head: var(--font-body);
    --head-weight: 600;
    --head-spacing: -0.015em;
    --body-size: 1.05rem;
    --line: 1.7;

    --radius: 2px;
    --radius-lg: 2px;
    --shadow: none;
    --border-width: 1px;
    /* Schmaler als die Basis. Die enge Lesespalte ist das Prinzip dieser
       Variante, deshalb gilt sie fuer die ganze Seite und nicht nur fuer
       den Fliesstext. Bei einem breiteren Rahmen sass der Inhalt in der
       linken Haelfte und rechts blieb eine Flaeche stehen, die unfertig
       statt reduziert wirkte. */
    --wrap: 780px;
    /* Die Kopfleiste laeuft breiter als die Lesespalte, damit die
       Navigation bis zum Umschaltpunkt auf das Mobilmenue Platz hat. */
    --wrap-header: 1060px;
    --wrap-narrow: 40rem;
    --section-y: 5rem;
}

/* Header: quiet, one hairline, no filled states. */
.site-header {
    border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
    min-height: 5rem;
}

.brand__mark {
    background: transparent;
    color: var(--c-accent);
    border: 1px solid var(--c-border);
    border-radius: 2px;
}

.brand__name {
    font-weight: 600;
    letter-spacing: -0.02em;
}

.brand__sub {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.site-nav__link {
    font-size: 0.97rem;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    padding-inline: 0.5rem;
}

.site-nav__link:hover {
    background: transparent;
    border-bottom-color: var(--c-border);
}

.site-nav__link[aria-current="page"] {
    border-bottom-color: var(--c-accent);
    font-weight: 600;
}

.site-nav__cta {
    border-radius: 2px;
}

/* Hero: text first in a narrow column, image as a calm band below. */
.hero {
    display: flex;
    flex-direction: column;
}

.hero__panel {
    order: -1;
    padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.5rem, 6vw, 4rem);
}

.hero__panel .wrap {
    max-width: 46rem;
}

.hero__eyebrow {
    color: var(--c-accent);
    letter-spacing: 0.18em;
    font-size: 0.75rem;
}

.hero__title {
    font-size: clamp(1.9rem, 4.6vw, 2.9rem);
    max-width: 20ch;
    letter-spacing: -0.025em;
}

.hero__lead {
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    color: var(--c-text);
    max-width: 34rem;
}

.hero__media img {
    aspect-ratio: 24 / 7;
}

.section--intro {
    padding-top: clamp(3rem, 7vw, 5rem);
}

.intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    max-width: 42rem;
}

.intro__aside {
    max-width: 34rem;
}

.card {
    border-radius: 2px;
}

.card--quote {
    background: transparent;
    border: 0;
    border-left: 3px solid var(--c-accent);
    padding: 0.25rem 0 0.25rem 1.5rem;
}

.quote {
    font-style: normal;
    font-size: 1.1rem;
    color: var(--c-muted);
}

.section__title {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    letter-spacing: -0.02em;
}

.page-head {
    padding-block: clamp(3rem, 7vw, 5rem) 0;
    border-bottom: 1px solid var(--c-border);
    padding-bottom: clamp(2rem, 5vw, 3rem);
}

.page-head__eyebrow {
    color: var(--c-accent);
    letter-spacing: 0.18em;
    font-size: 0.75rem;
}

.page-head__title {
    font-size: clamp(1.9rem, 4.4vw, 2.7rem);
    letter-spacing: -0.03em;
    max-width: 18ch;
}

.page-head__lead {
    max-width: 40rem;
    font-size: 1.08rem;
}

/* Facts as a plain ruled row, no colour blocks. */
.section--facts {
    background: transparent;
    padding-block: 0 var(--section-y);
}

.facts {
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    padding-block: 2rem;
    gap: 2rem;
}

.fact__value {
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 600;
    color: var(--c-text);
    letter-spacing: -0.03em;
}

.fact__label {
    font-size: 0.9rem;
}

/* Blocks: single column, ruled, no cards. */
.blocks {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 46rem;
}

.block {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--c-border);
    border-radius: 0;
    padding: 2rem 0;
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: 2rem;
}

@media (max-width: 44rem) {
    .block { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
}

.block:first-child { border-top: 0; padding-top: 0; }

.block__head {
    display: block;
    margin: 0;
}

.block__num {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--c-muted);
    margin-bottom: 0.35rem;
}

.block__title {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.block__list li::before {
    top: 0.72em;
    width: 0.3rem;
    height: 0.3rem;
    background: var(--c-muted);
}

/* Board: a quiet directory rather than a gallery of cards. */
.board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 3rem;
    max-width: 52rem;
}

@media (max-width: 44rem) {
    .board { grid-template-columns: minmax(0, 1fr); }
}

.person {
    flex-direction: row;
    gap: 1.25rem;
    align-items: start;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--c-border);
    border-radius: 0;
    padding: 1.75rem 0;
}

.person__photo {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--c-surface-alt);
}

.person__photo img {
    object-position: center 20%;
}

.person__initials {
    font-size: 1.15rem;
    font-weight: 600;
    opacity: 1;
    color: var(--c-muted);
    letter-spacing: 0.02em;
}

.person__body { padding: 0; }
.person__name { font-size: 1.05rem; }

.person__role {
    color: var(--c-muted);
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.person__bio { font-size: 0.9rem; }

/* Donations: the account as a ruled block, not a filled panel. */
.donate {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    max-width: 46rem;
}

.donate__account {
    background: transparent;
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-top: 3px solid var(--c-accent);
    border-radius: 0;
    padding: 1.75rem;
}

.donate__title { color: var(--c-text); }
.donate__holder { color: var(--c-muted); opacity: 1; }
.donate__iban-label { color: var(--c-muted); opacity: 1; }
.donate__iban-value { color: var(--c-accent); font-weight: 600; }

.donate__twint {
    border-top-color: var(--c-border);
    color: var(--c-muted);
    opacity: 1;
}

.faq {
    border: 0;
    border-top: 1px solid var(--c-border);
    border-radius: 0;
}

.faq__q { padding-inline: 0; font-weight: 600; font-size: 1rem; }
.faq__a { padding-inline: 0; }

.factlist {
    max-width: 46rem;
}

.contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    max-width: 58rem;
}

@media (max-width: 56rem) {
    .contact { grid-template-columns: minmax(0, 1fr); }
}

.contact__aside { order: 2; }
.contact__form { order: 1; }

.card--note {
    background: var(--c-surface-alt);
}

.field__input { border-radius: 2px; }

.cta {
    border-top: 1px solid var(--c-border);
    padding-top: 2.5rem;
}

.section--cta {
    background: transparent;
    /* Die Trennlinie von .cta setzt den Abstand bereits. */
    padding-top: 0;
}

/* Nach dem Zahlenband steht schon dessen Unterlinie. Eine zweite Linie
   direkt darunter sah nach einem Fehler aus. */
.section--facts + .section--cta .cta {
    border-top: 0;
    padding-top: 3rem;
}

.cta__title {
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
}

.site-footer {
    padding-block: 3.5rem 1.5rem;
}

.site-footer__title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.7;
}