/* ==========================================================================
   Base – Reset, Grundtypografie, elementare Elemente
   ========================================================================== */

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

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

body {
    background-color: var(--c-bg);
    color: var(--c-ink-soft);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a {
    color: var(--c-accent-deep);
    text-decoration: none;
    transition: color var(--t-fast);
}

a:hover {
    color: var(--c-ink);
}

/* --- Überschriften ------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 500;
    line-height: var(--lh-tight);
    color: var(--c-ink);
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p { max-width: 68ch; }

/* --- Hilfsklassen -------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-3);
}

.container--text {
    max-width: var(--container-text);
}

.section {
    padding-block: var(--sp-7);
}

/* Zusätzlicher Abstand nach oben, z. B. zwischen CTA-Box und Folge-Sektion */
.section--spaced-top {
    margin-top: var(--sp-6);
}

/* Kapitälchen-Label (z. B. über Überschriften) */
.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: var(--sp-2);
}

.lead {
    font-size: var(--fs-md);
    color: var(--c-ink-soft);
}

.text-center { text-align: center; }

/* Visuell verborgen, aber für Screenreader vorhanden */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Skip-Link für Tastatur-Navigation */
.skip-link {
    position: absolute;
    left: var(--sp-2);
    top: -3rem;
    z-index: 1000;
    background: var(--c-ink);
    color: var(--c-white);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius);
    transition: top var(--t-fast);
}

.skip-link:focus {
    top: var(--sp-2);
    color: var(--c-white);
}

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