/* =====================================================================
   02 – BASIS  (Grundgerüst: Typografie, Raster, Abstände, Hilfsklassen)
   Farben und Größen kommen aus 01-einstellungen.css
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--kopf-hoehe) + 8px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--schrift-text); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--weiss); -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
p, h1, h2, h3, h4, figure, blockquote, ol, ul, fieldset { margin: 0; }
ol, ul { padding: 0; }
a { color: var(--braun); }
a:hover { color: var(--nacht); }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }
button, input, select, textarea { font: inherit; }

/* ---------- Inhaltsbreite ---------- */
.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Abschnitte ---------- */
.sec        { padding: var(--abschnitt) 0; }
.sec.tight  { padding: var(--abschnitt-eng) 0; }
.dark       { background: var(--dunkel); color: var(--weiss); }
.grey       { background: var(--grau); }
.yellow     { background: var(--gelb); color: var(--nacht); }

/* ---------- Typografie ---------- */
.h      { font-family: var(--schrift-titel); font-weight: 700; letter-spacing: -.01em; line-height: 1.12; }
.h1     { font-size: var(--groesse-h1); line-height: 1.03; font-weight: 900; }
.h1-seite { font-size: var(--groesse-h1-s); }
.h2     { font-size: var(--groesse-h2); }
.h2-klein { font-size: clamp(28px, 3vw, 40px); }
.h3     { font-size: var(--groesse-h3); line-height: 1.25; }
.extra  { font-weight: 900; }
.lead   { font-size: var(--groesse-lead); line-height: 1.6; color: var(--text-2); }
.p      { font-size: var(--groesse-text); line-height: 1.6; color: var(--text-2); }
.p.klein { font-size: 16px; }
.small  { font-size: var(--groesse-klein); line-height: 1.5; color: var(--text-3); }
.eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--braun); display: flex; align-items: center; gap: 10px; }
.eyebrow.klein { font-size: 12px; }
.acc    { color: var(--gelb); }                                         /* *Wort* auf dunklem Grund */
.mark   { background: linear-gradient(transparent 62%, var(--gelb) 62%); }  /* *Wort* auf hellem Grund */
.secHead { max-width: 780px; }
.schmal { max-width: 380px; }
.schmal-gross { max-width: 820px; }
.lesebreite { max-width: 820px; }

/* Texte auf dunklem und gelbem Grund */
.dark .eyebrow { color: var(--gelb); }
.dark .lead, .dark .p { color: var(--text-hell); }
.dark .small { color: var(--text-hell-2); }
.dark a:not(.btn):not(.card) { color: var(--weiss); }
.yellow .eyebrow, .yellow .lead, .yellow .p, .yellow .small { color: var(--nacht); }
.yellow .mark { background: linear-gradient(transparent 62%, var(--weiss) 62%); }

/* ---------- Layout-Helfer: Stapel, Reihen, Raster ---------- */
.stack { display: flex; flex-direction: column; }
.row   { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.row.between { justify-content: space-between; }
.row.end { align-items: flex-end; }
.nowrap { flex-wrap: nowrap; }
.g8 { gap: 8px; } .g12 { gap: 12px; } .g16 { gap: 16px; } .g24 { gap: 24px; } .g32 { gap: 32px; } .g40 { gap: 40px; }

.grid { display: grid; gap: 24px; }
.c2   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 56px; align-items: center; }
.c2.oben { align-items: start; }
.c3   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.c4   { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auto160 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 20px; }
.auto200 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.auto230 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 28px 24px; }
.auto240 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px; }
.auto300 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 32px 24px; }
.auto320 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
@media (max-width: 520px) { .zwei { grid-template-columns: 1fr; } }

/* ---------- Listen ---------- */
ul.clean, ol.clean { list-style: none; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; }
.check .icon { flex: none; margin-top: 2px; color: var(--braun); }
.textliste { padding-left: 22px; font-size: var(--groesse-text); line-height: 1.6; color: var(--text-2); }

/* ---------- Nur für Screenreader / versteckt ---------- */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--gelb); color: var(--nacht); padding: 10px 16px; z-index: 100; border-radius: var(--radius); }
.skip:focus { left: 8px; }