/* ==========================================================================
   base.css
   Reset + Grundtypografie. Baut auf tokens.css auf.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: var(--fw-regular);
  color: var(--text-default-default);
  background: var(--surface-light-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  hyphens: auto; /* seitenweit statt pro Komponente — nutzt das lang-Attribut
    auf <html> (siehe header.php) für die richtige Trennregeln-Sprache;
    vererbt sich an alle Kind-Elemente, "hyphens" ist eine inherited property */
  overflow-wrap: break-word; /* Fallback für sehr lange/unbrechbare Wörter,
    falls der Browser hyphens:auto nicht unterstützt (z.B. Firefox < 43) */
}

/* Markierte-Text-Farbe (::selection) auf die Marken-Akzentfarbe statt dem
   Browser-Standardblau — --accent-green statt --accent-green-text, weil
   Ersteres im Rest des Codes bereits als Hintergrund-Akzent verwendet wird
   (z.B. .feature-tile.is-active), Letzteres ist für Textfarbe AUF dunklem
   Grund reserviert (siehe Kommentar in tokens.css), nicht für einen
   Hintergrund gedacht. Vordergrund bewusst FEST auf --grey-6 (nicht das
   Dark-Mode-flippende --text-default-default!) — --accent-green selbst
   bleibt in Light UND Dark Mode gleich hell, mit dem theme-abhängigen
   Token würde der Text im Dark Mode hell auf hellgrün und damit unlesbar. */
::selection {
  background: var(--accent-green);
  color: var(--grey-6);
}

img, svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Typografie-Klassen (entsprechen der Figma Type Scale) --------------- */

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-ultrabold);
  line-height: 1.05;
  margin: 0;
}

h2, .h2-bold {
  font-size: var(--fs-h2);
  font-weight: var(--fw-ultrabold);
  line-height: 1.15;
  margin: 0;
}

.h2-regular {
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  margin: 0;
}

h3, .h3-bold {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  margin: 0;
}

.h3-regular {
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  margin: 0;
}

h4, .h4-bold {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  margin: 0;
}

h5, .h5-bold {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  margin: 0;
}

.h5-regular {
  font-size: var(--fs-h5);
  font-weight: var(--fw-regular);
  line-height: 1.3;
  margin: 0;
}

h6, .h6 {
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  margin: 0;
}

.headline-decorative {
  font-size: var(--fs-headline-decorative);
  font-weight: var(--fw-ultrabold);
  line-height: 1;
  margin: 0;
}

.overline {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.copy-display {
  font-size: var(--fs-copy-display);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  margin: 0;
}

.copy-large {
  font-size: var(--fs-copy-large);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  margin: 0;
}

.copy-small {
  font-size: var(--fs-copy-small);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  margin: 0;
}

.button-text-small {
  font-size: var(--fs-button-small);
  font-weight: var(--fw-semibold);
  margin: 0;
}

/* --- Layout-Hilfsklassen -------------------------------------------------- */

.container {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Bild-Platzhalter, solange echte Bilder fehlen (assets/img/ ist leer) —
   Größe/Aspect-Ratio wird von der jeweiligen Komponente vorgegeben. */
.img-placeholder {
  background: var(--surface-light-subtlest);
  border: 1px dashed var(--line-subtler);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-default-subtlest);
  font-size: var(--fs-copy-small);
}

/* Sichtbarer Fokus-Ring für Tastaturnavigation */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--text-default-default);
  outline-offset: 2px;
}