/* base.css — Fonts, Reset, Grundtypografie, Utilities, Motion-Grundlagen.
   Komponenten-Styles liegen in styles.css, Variablen in tokens.css. */

/* ---------- Fonts (self-hosted, DSGVO-konform) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-italic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

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

html {
  overflow-x: hidden; /* verhindert horizontales Scrollen durch Off-Canvas-Nav */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }

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

a { color: inherit; }

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

/* ---------- Grundtypografie ---------- */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
}

h3, h4 { font-weight: 600; letter-spacing: -.01em; }

/* Gold-Akzentwort in Headlines: genau ein Wort pro Headline.
   Auf hellen Flächen dunklerer Goldton (Kontrast AA), auf Ink das helle Brand-Gold. */
.accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-text);
}
.section--ink .accent,
.hero--ink .accent { color: var(--gold); }

/* ---------- Layout-Utilities ---------- */
.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--sand { background: var(--sand); }
.section--ink {
  background: var(--grad-ink);
  color: var(--text-on-ink);
}
.section--narrow { padding-block: calc(var(--section-y) * .55); }
/* Platz für Kurven-Divider bzw. nahtloser Anschluss zweier Ink-Sektionen */
.section--curve-pb { padding-bottom: calc(var(--section-y) + 40px); }
.section--no-pt { padding-top: 0; }

/* Vertikaler Fluss: gleichmäßige Abstände zwischen Kind-Elementen */
.flow > * + * { margin-top: 1rem; }
.flow--lg > * + * { margin-top: 1.25rem; }

/* ---------- Barrierefreiheit ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: var(--white);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* ---------- Motion-Grundlagen ---------- */
/* Scroll-Reveals: Basisvariante fährt von unten ein, Varianten von links/rechts/skaliert */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal--left  { transform: translateX(-44px); }
.reveal--right { transform: translateX(44px); }
.reveal--scale { transform: scale(.92); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-reveal-delay="1"] { transition-delay: .09s; }
.reveal[data-reveal-delay="2"] { transition-delay: .18s; }
.reveal[data-reveal-delay="3"] { transition-delay: .27s; }
.reveal[data-reveal-delay="4"] { transition-delay: .36s; }
.reveal[data-reveal-delay="5"] { transition-delay: .45s; }

/* Parallax-Elemente (js/parallax.js setzt --parallax-y) */
[data-parallax] {
  transform: translateY(var(--parallax-y, 0));
  will-change: transform;
}

/* Sanftes Schweben (Badges, Deko) */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float { animation: float-soft 5s ease-in-out infinite; }
.float--slow { animation-duration: 7s; animation-delay: 1.2s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .reveal--left, .reveal--right, .reveal--scale { opacity: 1; transform: none; }
  [data-parallax] { transform: none; }
}