/* ==========================================================================
   base.css — Reset, Grundtypografie, Layout-Container, Utilities
   Bezug: 02-Designsystem.md Abschnitt 3, 4, 10
   ========================================================================== */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

/* hidden-Attribut muss display-Regeln von Komponenten ueberschreiben */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Audit D-3: Sicherheitsnetz gegen Sub-Pixel-Ueberstaende (z. B. am
     768-px-Breakpoint). clip statt hidden — erhaelt die Scroll-Position
     und unterbindet keinen Sticky-/Fixed-Kontext. */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

a { color: var(--color-accent-dark); }

ul, ol { padding-left: 1.3em; }

/* --- Typografie --- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  font-variant-numeric: lining-nums;
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }

h5 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  color: var(--color-primary);
}

h6 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h6);
  line-height: 1.4;
  color: var(--color-primary);
}

p { font-size: var(--fs-body); line-height: var(--lh-body); }

strong, b { font-weight: 700; }

/* --- Overline / Kicker (h6-Stil) --- */
.overline {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h6);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-sm);
}

.overline--on-dark { color: var(--color-accent-light); }

/* --- Lead-Text --- */
.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--color-text-muted);
}

/* --- Fliesstext-Bloecke (begrenzte Zeilenlaenge) --- */
.prose { max-width: var(--container-text); }

.prose p + p { margin-top: var(--space-md); }

.prose h2 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.prose h3 { margin-top: var(--space-lg); margin-bottom: var(--space-xs); }

.prose ul, .prose ol { margin-top: var(--space-sm); }
.prose li + li { margin-top: var(--space-3xs); }

.prose a {
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--color-primary); }

/* --- Layout-Container --- */
.container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--content { max-width: var(--container-content); }
.container--text    { max-width: var(--container-text); }

/* --- Sektionen --- */
.section {
  padding-block: var(--section-pad);
}

.section--alt  { background-color: var(--color-bg-alt); }
.section--card { background-color: var(--color-bg-card); }

.section--dark {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4,
.section--dark h5, .section--dark h6 { color: var(--color-text-on-dark); }

.section__head {
  max-width: var(--container-text);
  margin-bottom: var(--space-xl);
}
.section__head--center {
  margin-inline: auto;
  text-align: center;
}
.section__head p { color: var(--color-text-muted); margin-top: var(--space-sm); }
.section--dark .section__head p { color: var(--color-text-on-dark-muted); }

/* --- Grid-Helfer --- */
.grid { display: grid; gap: var(--space-lg); }

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 959px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

/* --- Abstands-Utilities --- */
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mb-0   { margin-bottom: 0; }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }

/* --- Barrierefreiheit --- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Skiplink */
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100px;
  z-index: 2000;
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-sm); }

/* Sichtbarer Fokusring fuer alle interaktiven Elemente */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Auf dunklem Grund: heller Fokusring */
.section--dark a:focus-visible,
.section--dark button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline-color: var(--color-accent-light);
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Scroll-Reveal (per JS aktiviert) --- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease, transform 400ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
/* Falls JS deaktiviert: Inhalte trotzdem sichtbar */
.no-js .reveal { opacity: 1; transform: none; }