/* Basis: Reset und Elementstile. Setzt die Tokens in lesbaren Fließtext um. */

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

html {
  -webkit-text-size-adjust: 100%;
}

/*
  Weiches, orientierendes Scrollen bei allen In-Page-Anker-Klicks
  (Hero-CTA -> #kontakt, Navigation innerhalb der Seite, Zurück-Button des
  Fit-Finders). Nur aktiv, wenn der Nutzer nicht ausdrücklich reduzierte
  Bewegung angefordert hat; unter reduced-motion springt der Browser wie
  gewohnt direkt an das Ziel. `scroll-margin-top` sorgt zugleich dafür, dass
  die Ziel-Sektion nicht unter der sticky Kopfzeile verschwindet, sondern
  einen ruhigen Rand darüber behält.
*/
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.section,
.hero-editorial,
.page-hero {
  scroll-margin-top: 5rem;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-surface);
}

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: var(--line-height-heading);
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

h1 {
  font-size: var(--text-display);
  line-height: var(--line-height-display);
}

h2 {
  font-size: var(--text-heading);
}

h3 {
  font-size: var(--text-subheading);
}

p {
  margin: 0 0 var(--space-3);
  max-width: var(--text-max-width);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--duration-state) var(--easing-standard),
    text-decoration-thickness var(--duration-state) var(--easing-standard);
}

a:hover {
  color: var(--color-accent-text-hover);
  text-decoration-thickness: 2px;
}

/* Invertierte Flächen (Footer, tiefe Sektions-Bänder) kehren die Linkfarbe um,
   damit sie auf dunklem Waldgrün lesbar bleibt, siehe design-direction.md */
.site-footer a,
.section--band-forest a {
  color: var(--color-link-on-inverse);
}

.site-footer a:hover,
.section--band-forest a:hover {
  color: var(--color-link-on-inverse-hover);
}

ul,
ol {
  padding-left: 1.25em;
  max-width: var(--text-max-width);
}

small,
.meta {
  font-size: var(--text-meta);
  color: var(--color-text-muted);
}

/* Sichtbarer, konsistenter Fokuszustand für Tastaturbedienung, unabhängig vom Element */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Nur für Sehende verborgen, für Screenreader und Tastaturnutzer verfügbar */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -3rem;
  background: var(--color-surface-inverse);
  color: var(--color-text-on-inverse);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top var(--duration-state) var(--easing-standard);
}

.skip-link:focus {
  top: var(--space-2);
}

/*
  Scroll-Reveal, siehe animation-plan.md, Aufgabe "Orientieren": erklärt den
  Eintritt eines Abschnitts in den sichtbaren Bereich. Die Klasse js-reveal-ready
  wird von assets/js/main.js nur gesetzt, wenn IntersectionObserver tatsächlich
  läuft, deshalb bleibt jeder Inhalt ohne JavaScript sofort sichtbar, siehe
  Vellox-OS/06_SEO/01-technisches-seo.md zur Unabhängigkeit der Kerninhalte
  von einer einzelnen Laufzeitbedingung.
*/
.js-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--duration-reveal) var(--easing-emphasis),
    transform var(--duration-reveal) var(--easing-emphasis);
}

.js-reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.js-reveal-ready [data-reveal-delay="1"] {
  transition-delay: 90ms;
}

.js-reveal-ready [data-reveal-delay="2"] {
  transition-delay: 180ms;
}

/*
  Akzent-Unterstrich unter Abschnittsüberschriften. Ohne Bewegung bleibt er
  sichtbar in voller Länge, mit aktivem Reveal wächst er beim Eintritt, siehe
  animation-plan.md, Aufgabe "Gewichten".
*/
.section__heading {
  position: relative;
  padding-bottom: var(--space-2);
}

/*
  Optionale, ruhige Subline direkt unter der Abschnittsüberschrift, siehe
  Runde 9. Sie beantwortet die Frage „warum steht dieser Abschnitt hier",
  in einer Zeile, in gedämpfter Farbe. Der wachsende Terrakotta-Unterstrich
  rückt darunter, weil padding-bottom auf dem Container liegt.
*/
.section__heading p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-body);
  max-width: 32rem;
}

.section--band-forest .section__heading p {
  color: #c8cfba;
}

.section__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 3rem;
  border-radius: 2px;
  background-color: var(--color-surface-forest);
}

.js-reveal-ready .section__heading[data-reveal]::after {
  width: 0;
  transition: width var(--duration-moment) var(--easing-emphasis) 150ms;
}

.js-reveal-ready .section__heading[data-reveal].is-revealed::after {
  width: 3rem;
}

.section--band-forest .section__heading::after {
  background-color: var(--color-surface-sage-tint);
}