/* =========================================================================
   Variante A -- "Warm"
   Erdtöne aus dem Konzertfoto, Serifenschrift, ruhige Flächen.
   Ein gewachsener Verein, der die Menschen in den Vordergrund stellt.
   ========================================================================= */

:root {
    --c-bg: #fbf7f0;
    --c-surface: #ffffff;
    --c-surface-alt: #f3ebdd;
    --c-text: #2f2620;
    --c-muted: #6d5f54;
    --c-accent: #8c3a2b;
    --c-accent-ink: #fdf8f2;
    --c-accent-soft: #f3e3d8;
    --c-border: #e3d7c6;
    --c-header-bg: #fbf7f0;
    --c-header-ink: #2f2620;
    --c-footer-bg: #3a2b23;
    --c-footer-ink: #eee2d4;

    --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --font-head: var(--font-body);
    --head-weight: 700;
    --head-spacing: 0;
    --body-size: 1.09rem;
    --line: 1.72;

    --radius: 8px;
    --radius-lg: 16px;
    --shadow: 0 2px 10px rgb(94 66 46 / 8%);
    --wrap: 1080px;
    --section-y: 4.5rem;
}

/* A secondary amber accent used sparingly for warmth. Split into a
   saturated shade for surfaces and ornaments and a darker one for text,
   because the saturated amber only reaches 2.8:1 on the cream ground. */
:root {
    --c-amber: #c8863c;
    --c-amber-text: #8f5a1c;
    --c-amber-on-dark: #dda160;
}

.site-header {
    border-bottom: 1px solid var(--c-border);
}

.brand__mark {
    border-radius: 50%;
    background: var(--c-amber);
    color: #3a2b23;
}

.brand__sub {
    font-style: italic;
    letter-spacing: 0.02em;
}

.site-nav__link {
    font-size: 1.02rem;
}

.site-nav__link[aria-current="page"] {
    background: var(--c-accent-soft);
}

/* Hero: image first, then a calm cream panel with the text. */
.hero__media img {
    aspect-ratio: 21 / 8;
}

.hero__panel {
    background: var(--c-bg);
    padding-block: 3.25rem 1rem;
    text-align: center;
}

.hero__eyebrow {
    font-family: var(--font-body);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.06em;
    font-size: 0.95rem;
    color: var(--c-amber-text);
}

.hero__title {
    font-size: clamp(2rem, 4.8vw, 3rem);
    line-height: 1.15;
}

.hero__lead {
    margin-inline: auto;
    color: var(--c-text);
}

.hero__actions {
    justify-content: center;
}

/* A hairline ornament under the hero, like a printed programme. */
.hero__panel .wrap::after {
    content: "";
    display: block;
    width: 5rem;
    height: 2px;
    margin: 2.5rem auto 0;
    background: var(--c-amber);
}

.section__title,
.page-head__title,
.hero__title,
.cta__title {
    font-weight: 700;
}

.page-head__eyebrow {
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.05em;
    font-size: 0.98rem;
    color: var(--c-amber-text);
}

.card--quote {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-amber);
    border-radius: var(--radius);
}

.quote::before {
    content: "";
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: 0.75rem;
    background: var(--c-amber);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M12 4v16.2a4.6 4.6 0 1 0 2.4 4V10.6l9.6-2.2v8.8a4.6 4.6 0 1 0 2.4 4V4L12 6.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.facts {
    padding-block: 0.5rem;
}

.fact {
    text-align: center;
    padding-inline: 0.5rem;
    border-left: 1px solid var(--c-border);
}

.fact:first-child { border-left: 0; }

@media (max-width: 52rem) {
    .fact:nth-child(odd) { border-left: 0; }
}

.fact__value {
    color: var(--c-accent);
}

.section--facts {
    background: var(--c-surface-alt);
}

.block {
    background: var(--c-surface);
    border-color: var(--c-border);
}

.block__num {
    font-size: 1.6rem;
    color: var(--c-amber-text);
}

.block__list li::before {
    top: 0.68em;
    width: 0.4rem;
    height: 0.4rem;
    background: var(--c-amber);
}

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

.person__role {
    font-style: italic;
    font-weight: 400;
    font-size: 1rem;
}

.person__bio {
    font-size: 0.95rem;
}

.donate__account {
    background: var(--c-accent);
    background-image: linear-gradient(150deg, #9a4433 0%, #7a3125 100%);
}

.faq__q {
    font-size: 1.1rem;
}

.btn {
    letter-spacing: 0.01em;
}

/* Zahlenband und Aufruf liegen auf derselben Flaeche, eine Haarlinie
   gliedert sie. */
.section--facts + .section--cta .cta {
    border-top: 1px solid var(--c-border);
    padding-top: 3rem;
}

.site-footer {
    background: var(--c-footer-bg);
}

.site-footer__title {
    color: var(--c-amber-on-dark);
}