/* Base — Reset + Grundtypografie. Mobile-first: alles hier gilt fuer den kleinsten Breakpoint. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-body-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; transition: color 0.15s ease; }
/* Homogener Hover fuer alle "normalen" Links (Nav, Footer, Inline-Links im Content) --
   Buttons (.btn) haben ihr eigenes Hover-Verhalten in components.css, daher ausgeschlossen. */
a:not(.btn):hover { color: var(--color-accent); text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--space-2); font-weight: 700; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p { margin: 0 0 var(--space-2); }
ul, ol { margin: 0 0 var(--space-2); padding-left: 1.25em; }
li { margin-bottom: 0.35em; }
strong { font-weight: 700; }

.lead {
  font-size: var(--text-lg);
  color: var(--color-body-text);
  max-width: 60ch;
}
.text-muted { color: var(--color-muted-text); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (min-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.container--narrow { max-width: var(--container-narrow); }

@media (min-width: 768px) {
  .container { padding-inline: 2rem; }
}
@media (min-width: 1024px) {
  .container { padding-inline: 3rem; }
}