/* ==========================================================================
   Base — Reset, Grundtypografie, Container, Utility-Klassen
   ========================================================================== */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background: var(--color-white);
  color: var(--color-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* --- Container -------------------------------------------------------- */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter-desktop);
}

@media (max-width: 1023px) {
  .container { padding: 0 var(--gutter-tablet); }
}

@media (max-width: 767px) {
  .container { padding: 0 var(--gutter-mobile); }
}

/* --- Section-Padding ---------------------------------------------------
   Werte aus Styleguide Abschnitt 3 "Section-Padding-Empfehlungen"
   ------------------------------------------------------------------------ */

.section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.section--compact {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.section--banner {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

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

@media (max-width: 1023px) {
  .section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .section--compact { padding-top: var(--space-10); padding-bottom: var(--space-10); }
  .section--banner { padding-top: var(--space-8); padding-bottom: var(--space-8); }
}

@media (max-width: 767px) {
  .section { padding-top: var(--space-10); padding-bottom: var(--space-10); }
  .section--compact { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .section--banner { padding-top: var(--space-6); padding-bottom: var(--space-6); }
}

/* --- Typografie-Utilities ----------------------------------------------
   Ein Utility pro Type-Token aus dem Styleguide (Abschnitt 1).
   ------------------------------------------------------------------------ */

.eyebrow {
  display: block;
  font-size: var(--type-label);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.h-display-2 {
  font-family: var(--font-family-display);
  font-size: var(--type-display-2);
  line-height: var(--lh-display-2);
  font-weight: var(--font-weight-black);
  text-transform: uppercase;
  letter-spacing: -1px;
  text-wrap: balance;
}

.h-h2 {
  font-size: var(--type-h2);
  line-height: var(--lh-h2);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.2px;
  color: var(--color-black);
  text-wrap: balance;
}

.h-h3 {
  font-size: var(--type-h3);
  line-height: var(--lh-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
}

.text-large {
  font-size: var(--type-text-large);
  line-height: var(--lh-text-large);
  font-weight: var(--font-weight-regular);
}

.text {
  font-size: var(--type-text);
  line-height: var(--lh-text);
  font-weight: var(--font-weight-regular);
  color: var(--color-body);
}

.text-small {
  font-size: var(--type-text-small);
  line-height: var(--lh-text-small);
  font-weight: var(--font-weight-regular);
  color: var(--color-body);
}

.caption {
  font-size: var(--type-caption);
  line-height: 18px;
  color: var(--color-dark);
}

@media (max-width: 1023px) {
  .h-display-2 { font-size: 54px; line-height: 1.1; }
}

@media (max-width: 767px) {
  .h-display-2 { font-size: 32px; line-height: 1.15; }
  .h-h2 { font-size: 24px; line-height: 1.3; }
}

/* --- Sichtbarer Fokus (Tastaturbedienung) -------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}