/* ================================================================
   MINI RESPONSIVE FRAMEWORK
   Nur Reset + Container + Abstände + Grid.
   ================================================================ */

:root {
    --fw-container: 1200px;
    --fw-container-narrow: 820px;
    --fw-gutter: clamp(20px, 4vw, 64px);
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: clamp(24px, 3vw, 40px);
    --space-lg: clamp(48px, 6vw, 96px);
    --space-xl: clamp(72px, 9vw, 144px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; }
img, picture, video, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
a { color: inherit; }

.container {
    width: min(100% - (var(--fw-gutter) * 2), var(--fw-container));
    margin-inline: auto;
}
.container-narrow { max-width: var(--fw-container-narrow); }
.section { padding-block: var(--space-xl); }
.grid { display: grid; gap: var(--space-md); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.stack-sm > * + * { margin-top: var(--space-sm); }
.stack-md > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.text-center { text-align: center; }

@media (max-width: 900px) {
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    :root { --fw-gutter: 20px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}