:root {
    /* Abstände */
    --spacing-xs: 0.25rem;
    --spacing-s: 0.5rem;
    --spacing-m: 0.5rem;
    --spacing-l: 0.75rem;
    --spacing-xl: 1rem;

    /* Schatten */
    --shadow-light: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-medium: 0 4px 8px rgba(0,0,0,0.1);
    --shadow-heavy: 0 8px 16px rgba(0,0,0,0.15);

    /* Rahmenradien */
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 12px;
    --radius-full: 9999px;

    /* Linienstärken */
    --border-width-thin: 1px;
    --border-width-thick: 2px;

}

h1 {
    font-size: 2rem;
    margin: 0.5em 0;

}

h2 {
    font-size: 1.5rem;
    margin: 0.3em 0;

}

/* Visuelle Stile (Hilfsklassen) */
.u-paper {
    background-color: var(--color-base-bg);
    border: var(--border-width-thin) solid var(--color-base-border);
    border-radius: var(--radius-medium);
}

.u-paper-context {
    background-color: var(--color-zebra-light);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--radius-medium);
}

.u-elevated {
    box-shadow: var(--shadow-medium);
}