/* Main site — self-hosted only, no CDNs (hard rule).
   Montserrat comes from css/fonts.css; the system stack stays as the
   fallback while the font swaps in. */

* {
    box-sizing: border-box;
}

:root {
    /* Type scale, ratio 1.125 at the small end where precision matters,
       opening up for display sizes. Do not add sizes between these. */
    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;

    /* Fluid, not stepped: clamp(MIN, FLUID, MAX) — the middle value must
       carry the viewport unit, or the size never actually scales.
       24px at 320px viewport, 40px from 1024px up. At 24px the longest
       word on these pages ("Datenschutzerklärung", measured 288px)
       hyphenates into two lines instead of overflowing. */
    --text-h1: clamp(1.5rem, 1.045rem + 2.27vw, 2.5rem);

    /* Spacing derived from the text size, so rhythm survives a scale change */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
}

body {
    margin: 0;
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #2b2b2b;
    background: #faf7f2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* Impressum / Datenschutzerklärung — must be reachable from every page
   (§ 5 DDG, Art. 13 DSGVO), so the footer lives in the base template. */
.site-footer {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1.25rem;
    font-size: var(--text-xs);
}

.site-footer a {
    color: #6b6b6b;
}

.legal {
    /* ~73 characters at this measure in Montserrat — the top of the
       comfortable 45-75 range, so the leading has to be generous. */
    max-width: 42rem;
    width: 100%;
    margin-inline: auto;
    padding: var(--space-md);
    line-height: 1.6;
    /* German compounds are long; on a narrow phone hyphenation prevents
       rivers of whitespace. Needs lang="de" on <html> to work. */
    hyphens: auto;
}

.legal p {
    /* Avoids single-word last lines without touching the other lines */
    text-wrap: pretty;
}

.legal h1 {
    font-size: var(--text-h1);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    /* Even line lengths instead of a long line and one stray word */
    text-wrap: balance;
    margin-bottom: var(--space-md);
}

/* Proximity: a heading belongs to the text below it, so the space above
   must be clearly larger than the space below. */
.legal h2 {
    font-size: var(--text-md);
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-xs);
}

.legal h3 {
    font-size: var(--text-base);
    line-height: 1.3;
    text-wrap: balance;
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
}

.legal-logo {
    display: block;
    max-width: 8rem;
    padding: 1rem 1.25rem;
}