/*
|--------------------------------------------------------------------------
| Typografie
|--------------------------------------------------------------------------
|
| Zentrale Schriftdefinitionen für das Frontend.
|
| Seitenspezifische Abstände und besondere Überschriften gehören weiterhin
| in die jeweilige CSS-Datei der Seite oder Komponente.
|
*/


/*
|--------------------------------------------------------------------------
| Grundelemente
|--------------------------------------------------------------------------
*/

html {
    font-size: 16px;
}

body {
    color: var(--text-primary);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/*
|--------------------------------------------------------------------------
| Überschriften
|--------------------------------------------------------------------------
*/

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--text-primary);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    overflow-wrap: break-word;
}

h1 {
    margin-bottom: var(--spacing-6);
    font-size: clamp(
        var(--font-size-3xl),
        5vw,
        var(--font-size-4xl)
    );
    line-height: var(--line-height-tight);
}

h2 {
    margin-bottom: var(--spacing-5);
    font-size: clamp(
        var(--font-size-2xl),
        4vw,
        var(--font-size-3xl)
    );
}

h3 {
    margin-bottom: var(--spacing-4);
    font-size: clamp(
        var(--font-size-xl),
        3vw,
        var(--font-size-2xl)
    );
}

h4 {
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-xl);
}

h5 {
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-lg);
}

h6 {
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-base);
}


/*
|--------------------------------------------------------------------------
| Absätze
|--------------------------------------------------------------------------
*/

p {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
    color: var(--text-secondary);
    overflow-wrap: break-word;
}

p:last-child {
    margin-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| Links
|--------------------------------------------------------------------------
*/

a {
    color: var(--text-link);
    text-decoration: none;
    transition:
        color var(--transition-base),
        opacity var(--transition-base);
}

a:hover,
a:focus-visible {
    color: var(--text-link-hover);
}

a:focus-visible {
    outline: 2px solid var(--theme-current);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}


/*
|--------------------------------------------------------------------------
| Hervorhebungen
|--------------------------------------------------------------------------
*/

strong,
b {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
}

em,
i {
    font-style: italic;
}

mark {
    padding: 0 var(--spacing-1);
    color: var(--text-dark);
    background: var(--theme-current);
    border-radius: var(--radius-xs);
}

small {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}


/*
|--------------------------------------------------------------------------
| Listen
|--------------------------------------------------------------------------
*/

ul,
ol {
    margin-top: 0;
    margin-bottom: var(--spacing-5);
    padding-left: var(--spacing-6);
    color: var(--text-secondary);
}

li {
    margin-bottom: var(--spacing-2);
}

li:last-child {
    margin-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| Zitate
|--------------------------------------------------------------------------
*/

blockquote {
    margin:
        var(--spacing-6)
        0;
    padding:
        var(--spacing-4)
        var(--spacing-5);
    color: var(--text-secondary);
    background: var(--background-surface);
    border-left: 4px solid var(--theme-current);
    border-radius:
        0
        var(--radius-lg)
        var(--radius-lg)
        0;
}

blockquote p {
    color: inherit;
}


/*
|--------------------------------------------------------------------------
| Trennlinien
|--------------------------------------------------------------------------
*/

hr {
    margin:
        var(--spacing-8)
        0;
    border: 0;
    border-top:
        var(--border-width)
        solid
        var(--border-color);
}


/*
|--------------------------------------------------------------------------
| Code und technische Inhalte
|--------------------------------------------------------------------------
*/

code,
pre,
kbd,
samp {
    font-family:
        Consolas,
        Monaco,
        "Courier New",
        monospace;
}

code {
    padding:
        var(--spacing-1)
        var(--spacing-2);
    color: var(--text-primary);
    background: var(--background-surface-strong);
    border:
        var(--border-width)
        solid
        var(--border-color);
    border-radius: var(--radius-sm);
}

pre {
    max-width: 100%;
    margin:
        var(--spacing-5)
        0;
    padding: var(--spacing-5);
    overflow-x: auto;
    color: var(--text-primary);
    background: var(--background-surface-strong);
    border:
        var(--border-width)
        solid
        var(--border-color);
    border-radius: var(--radius-lg);
}

pre code {
    padding: 0;
    background: transparent;
    border: 0;
}


/*
|--------------------------------------------------------------------------
| Wiederverwendbare Textklassen
|--------------------------------------------------------------------------
*/

.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

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

.text-accent {
    color: var(--theme-current);
}

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

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

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


/*
|--------------------------------------------------------------------------
| Einleitungstext
|--------------------------------------------------------------------------
*/

.lead {
    max-width: var(--text-max-width);
    color: var(--text-secondary);
    font-size: clamp(
        var(--font-size-md),
        2vw,
        var(--font-size-lg)
    );
    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Kleine Abschnittsüberschrift
|--------------------------------------------------------------------------
*/

.eyebrow {
    display: inline-block;
    margin-bottom: var(--spacing-3);
    color: var(--theme-current);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Abschnittsbeschreibung
|--------------------------------------------------------------------------
*/

.section-description {
    max-width: var(--text-max-width);
    color: var(--text-secondary);
    font-size: var(--font-size-md);
}


/*
|--------------------------------------------------------------------------
| Begrenzte Textbreite
|--------------------------------------------------------------------------
*/

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


/*
|--------------------------------------------------------------------------
| Barrierefreiheit
|--------------------------------------------------------------------------
*/

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0, 0, 0, 0);
}


/*
|--------------------------------------------------------------------------
| Responsive Anpassungen
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {
    body {
        font-size: var(--font-size-base);
    }

    h1 {
        margin-bottom: var(--spacing-5);
    }

    h2 {
        margin-bottom: var(--spacing-4);
    }

    .lead,
    .section-description {
        font-size: var(--font-size-base);
    }
}