/* ==========================================================================
   BASE – Reset, Grundtypografie und kleine Hilfsklassen
   Hier stehen KEINE Farbwerte/Größen direkt drin, nur var(--...) aus tokens.css
   ========================================================================== */

/* ----- 1. Reset: einheitlicher Start in allen Browsern ------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4)); /* Ankerlinks nicht unter Header */
}

body {
  background-color: var(--c-bg);
  color: var(--c-text-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

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


/* ----- 2. Typografie ----------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--c-text);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;            /* verhindert hässliche Schusterjungen */
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-normal); }

p { text-wrap: pretty; }

a {
  color: var(--c-text);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--c-accent); }

strong { color: var(--c-text); font-weight: var(--fw-semibold); }

/* Sichtbarer Fokusrahmen für Tastatur-Navigation (Barrierefreiheit) */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}


/* ----- 3. Hilfsklassen (Utilities) --------------------------------------- */

/* Einleitungstext unter Überschriften */
.lead {
  font-size: var(--fs-lead);
  color: var(--c-text-muted);
  max-width: 60ch;
}

/* Kleines Label über einer Überschrift, z.B. "UNSERE KLASSEN" */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-3);
}

/* Text in Orange hervorheben – z.B. ein Wort in der Hero-Headline */
.text-accent { color: var(--c-accent); }

/* Verlaufs-Text (Apple-Style) für einzelne Wörter */
.text-gradient {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-center { text-align: center; }
.mx-auto    { margin-inline: auto; }

/* Nur für Screenreader sichtbar (z.B. "Zum Inhalt springen") */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ----- 4a. Einblenden beim Laden (reine CSS-Animation, KEIN JavaScript) ----
   Für Inhalte, die sofort sichtbar sind – vor allem den Hero.
   Wichtig: hier NICHT .reveal benutzen. Sollte JavaScript blockiert sein,
   bliebe der Hero sonst unsichtbar.
   Reihenfolge steuern über style="--delay: 1" (1 = 90ms später, usw.)
   -------------------------------------------------------------------------- */
.fade-up {
  animation: fadeUp var(--t-slow) var(--ease-out) both;
  animation-delay: calc(var(--delay, 0) * 90ms);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}


/* ----- 4b. Einblenden beim Scrollen --------------------------------------
   Elemente mit class="reveal" faden beim Hereinscrollen sanft ein.
   Gesteuert von assets/js/main.js (fügt .is-visible hinzu).
   Nur für Inhalte WEITER UNTEN auf der Seite verwenden.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Mehrere Elemente nacheinander einblenden: style="--delay: 2" */
.reveal { transition-delay: calc(var(--delay, 0) * 90ms); }

/* Ohne JavaScript trotzdem alles sichtbar */
.no-js .reveal { opacity: 1; transform: none; }