/* ===== CSS‑Variablen ===== */
:root {
  --clr-text:   #223046;
  --clr-muted:  #4a5a6a;
  --clr-light:  #f0f4fa;
  --clr-bg:     #f7f9fa;
  --clr-accent: #2bb3a3;
}

/* ===== Grundlayout / Typografie ===== */
html {
  box-sizing: border-box;
  font-size: 100%;
}

*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  padding-top: 90px;                 /* Platz für Fixed‑Header */
  font-family: "Segoe UI", "Roboto", Arial, Helvetica, sans-serif;
  background: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.7;
  font-size: 1.08rem;
  letter-spacing: .01em;
}

/* Responsive Body Padding für mobile Header-Höhen */
@media (max-width: 900px) {
  body {
    padding-top: 70px; /* Angepasst an mobile Header-Höhe */
  }
}

@media (max-width: 600px) {
  body {
    padding-top: 65px; /* Angepasst an kleine mobile Header-Höhe */
  }
}

@media (max-width: 400px) {
  body {
    padding-top: 60px; /* Angepasst an sehr kleine mobile Header-Höhe */
  }
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em 0;
  font-family: "Segoe UI Semibold", "Roboto", Arial, Helvetica, sans-serif;
  color: var(--clr-text);
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.3rem; }

ul { padding-left: 22px; }

a { color: var(--clr-accent); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }