*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:var(--type-body);color:var(--text);background:var(--surface)}
h1{font:var(--type-h1);color:var(--accent);margin:0 0 16px}
h2{font:var(--type-h2);color:var(--accent);margin:0 0 16px}
h3{font:var(--type-h3);color:var(--accent);margin:0 0 8px}
p{margin:0 0 16px;max-width:65ch}
strong,b{font:var(--type-strong);color:inherit}
a{color:var(--accent);text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.container{max-width:var(--container);margin:0 auto;padding-inline:24px}
.container--text{max-width:var(--container-text)}
.container--wide{max-width:var(--container-wide)}
.container--bleed{max-width:none;padding-inline:0}
.sec{padding:var(--section-padding) 0}
/* 12-Spalten-Raster für Abschnitte, die mehr als eine Textspalte brauchen.
   Kinder setzen grid-column selbst — asymmetrische Aufteilungen inklusive. */
.grid{display:grid;grid-template-columns:repeat(var(--grid-columns),1fr);gap:var(--grid-gutter)}
/* Container-Queries: Bausteine reagieren auf ihren Platz, nicht auf die Fensterbreite. */
.cq{container-type:inline-size}
.sec--inverse{background:var(--surface-inverse);color:var(--text-inverse)}
.sec--inverse h1,.sec--inverse h2,.sec--inverse h3{color:var(--text-inverse)}