/* ══════════════════════════════════════════════════════════════
   base.css – Variablen, Reset, Typografie, Animationen, Utilities
   Prof. Dr. Kai T. Horstmann
   ══════════════════════════════════════════════════════════════ */

/* ── Lokale Schriftarten ────────────────────────────────────── */
@font-face { font-display: swap; font-family: 'DM Sans'; font-style: normal;  font-weight: 300; src: url('../fonts/dm-sans-v17-latin-300.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'DM Sans'; font-style: italic;  font-weight: 300; src: url('../fonts/dm-sans-v17-latin-300italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'DM Sans'; font-style: normal;  font-weight: 400; src: url('../fonts/dm-sans-v17-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'DM Sans'; font-style: italic;  font-weight: 400; src: url('../fonts/dm-sans-v17-latin-italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'DM Sans'; font-style: normal;  font-weight: 500; src: url('../fonts/dm-sans-v17-latin-500.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'DM Sans'; font-style: italic;  font-weight: 500; src: url('../fonts/dm-sans-v17-latin-500italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'DM Sans'; font-style: normal;  font-weight: 600; src: url('../fonts/dm-sans-v17-latin-600.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'DM Sans'; font-style: italic;  font-weight: 600; src: url('../fonts/dm-sans-v17-latin-600italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'DM Sans'; font-style: normal;  font-weight: 700; src: url('../fonts/dm-sans-v17-latin-700.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'DM Sans'; font-style: italic;  font-weight: 700; src: url('../fonts/dm-sans-v17-latin-700italic.woff2') format('woff2'); }

/* ── Variablen ──────────────────────────────────────────────── */
:root {
  /* Einziger Farbakzent: Ochsenblutrot */
  --ox:       #6E1C1C;
  --ox-dark:  #4A1010;
  --ox-mid:   #8B2E2E;
  --ox-light: #C07070;   /* aufgehelltes Rot für Text auf dunklem Hintergrund */

  /* Hintergründe: modernes Warm-Grau */
  --ivory:    #F6F4F1;   /* Haupthintergrund */
  --cream:    #EDEDEA;   /* alternierende Abschnitte */

  /* Neutrale Töne */
  --dark:     #1A1714;   /* Fast-Schwarz */
  --charcoal: #2E2A27;   /* Dunkelgrau */
  --mid-gray: #6B6560;   /* Mittleres Grau */
  --lt-gray:  #CFC9C4;   /* Helles Grau für Rahmen */
  --white:    #FDFCFB;   /* Warmes Weiß */

  /* Keine Gold-Variable mehr – Aliase auf Rot/Grau */
  --gold:     #6E1C1C;   /* = --ox */
  --gold-lt:  #C07070;   /* = --ox-light */

  /* Typografie: nur Sans-Serif */
  --ff-head:  'DM Sans', system-ui, sans-serif;
  --ff-body:  'DM Sans', system-ui, sans-serif;
  --ff-ui:    'DM Sans', system-ui, sans-serif;

  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  color: var(--dark);
  font-family: var(--ff-body);
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ── Utility ────────────────────────────────────────────────── */
.label {
  font-family: var(--ff-ui);
  font-size: 0.785rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ox);
}
.label--light { color: var(--ox-light); }

.tag {
  font-family: var(--ff-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid-gray);
}

/* ── Animationen ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.anim-fade-up  { opacity: 0; animation: fadeUp  0.8s var(--transition) forwards; }
.anim-fade-in  { opacity: 0; animation: fadeIn  1s   var(--transition) forwards; }
.d1 { animation-delay: 0.1s; }
.d2 { animation-delay: 0.25s; }
.d3 { animation-delay: 0.4s; }
.d4 { animation-delay: 0.55s; }
.d5 { animation-delay: 0.7s; }