# CSS-Framework Struktur

## Layer-Hierarchie
1. reset
2. base
3. layout
4. components
5. utilities
6. overrides

## Benennungskonventionen
- Dateinamen: kebab-case
- Klassen: BEM oder Utility-First? (optional notieren)


css/
├── styles.css                    # Haupt-Importdatei
├── settings/
│   ├── colors.css               # Farbdefinitionen
│   ├── typography.css           # Schriftgrößen, Fonts
│   ├── spacing.css              # Abstände (margin, padding)
│   └── variables.css            # Dauer, Easing, Radius, Z-Index etc.
├── base/
│   ├── reset.css                # Reset/Normalize
│   ├── global.css               # globale Stile für html, body, etc.
│   └── typography.css           # h1, p, etc.
├── components/
│   ├── header.css
│   ├── nav.css
│   ├── footer.css
│   └── buttons.css
├── layout/
│   ├── container.css            # .page-container, max-widths, etc.
│   └── grid.css                 # evtl. eigenes Grid-System
├── utilities/
│   ├── animations.css           # .fade-in, .shake, usw.
│   ├── helpers.css              # .skip-link, .hidden, .visually-hidden
│   └── scroll.css               # scroll-behavior, scrollbar-style
├── forms/
│   └── inputs.css
└── themes/
    └── dark.css                 # Farbanpassungen für Dark-Mode (optional)