/* Visuelles System gemäss docs/ux-design.md, Abschnitt 7 */

:root {
    color-scheme: light dark;

    --farbe-hintergrund: #FBF7F0;
    --farbe-flaeche: #F2EADC;
    --farbe-schrift: #2B2622;
    --farbe-schrift-leise: #6B6158;
    --farbe-akzent: #B5482B;
    --farbe-linie: #DDD2C1;
    --farbe-erfolg: #2F6B47;
    --farbe-entwurf: #8A5A00;
    --farbe-fehler: #A8261B;

    --schrift-titel: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --abstand-1: 4px;
    --abstand-2: 8px;
    --abstand-3: 12px;
    --abstand-4: 16px;
    --abstand-5: 24px;
    --abstand-6: 32px;

    --radius-flaeche: 8px;
    --radius-panel: 12px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --farbe-hintergrund: #1C1A17;
        --farbe-flaeche: #2A2622;
        --farbe-schrift: #EDE6DA;
        --farbe-schrift-leise: #B3A898;
        --farbe-akzent: #E07A5C;
        --farbe-linie: #3D3731;
        --farbe-erfolg: #6FBF8E;
        --farbe-entwurf: #E3B04B;
        --farbe-fehler: #F08070;
    }
}

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

body {
    margin: 0;
    background: var(--farbe-hintergrund);
    color: var(--farbe-schrift);
    font-family: var(--schrift-text);
    font-size: 1rem;
    line-height: 1.5;
}

a {
    color: var(--farbe-akzent);
}

:focus-visible {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: 2px;
}

.kopfzeile {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--abstand-2) var(--abstand-4);
    border-bottom: 1px solid var(--farbe-linie);
}

.kopfzeile__name {
    font-family: var(--schrift-titel);
    font-size: 1.25rem;
    color: var(--farbe-schrift);
    text-decoration: none;
}

.panel {
    padding: var(--abstand-4);
}

.titel {
    margin: 0 0 var(--abstand-3);
    font-family: var(--schrift-titel);
    font-size: 1.75rem;
    font-weight: normal;
}

.leer {
    color: var(--farbe-schrift-leise);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}