/* Startseite: nutzt die Farbrollen und Grundstile aus style.css. */
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.nav .wrap { display: flex; gap: 16px; align-items: center; padding-block: 12px; flex-wrap: wrap; }
.nav strong { font-size: 16px; font-weight: 650; }
.nav .luecke { flex: 1; }
.nav a { text-decoration: none; color: var(--ink-2); }
.knopf {
  display: inline-block; padding: 9px 18px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  text-decoration: none; font-weight: 600;
}
.knopf.wichtig { background: var(--s1); border-color: var(--s1); color: #fff; }
.hero { padding-block: 64px 40px; }
.hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.15; margin: 0 0 14px; max-width: 18ch; }
.hero p { font-size: 18px; color: var(--ink-2); max-width: 56ch; margin: 0 0 24px; }
.hero .knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.zahlen { margin-top: 40px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.abschnitt { padding-block: 40px; }
.abschnitt h2 { font-size: 24px; margin: 0 0 6px; }
.abschnitt > .wrap > p { color: var(--ink-2); margin: 0 0 22px; max-width: 64ch; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.raster .karte { padding: 16px; }
.raster h3 { margin: 0 0 6px; font-size: 16px; }
.raster p { margin: 0; color: var(--ink-2); font-size: 14px; }
.abschnitt.band { background: var(--surface); border-block: 1px solid var(--border); }
.hinweis { font-size: 13px; color: var(--ink-muted); }
footer { padding-block: 32px; color: var(--ink-muted); font-size: 13px; }