/**
 * vollneutral.ch — global.css
 * Zentrale Styles für die Hauptseite (Hero, Alben, Blog, Reiseberichte).
 * Farben/Typografie an die bestehende Marke angelehnt (Parchment/Braun,
 * Playfair Display + Inter). Der Wissens-Bereich hat ein eigenes
 * Stylesheet (wissen.css) mit eigener Layout-Sprache.
 */

/* ─────────────────────────────────────────────────────────────
   1. CSS-VARIABLEN (Markenfarben)
───────────────────────────────────────────────────────────── */
:root {
  --parchment: #f4edd8;
  --parchment2: #ede3c6;
  --beige-light: #faf6ec;
  --brown-mid: #9b7b3a;
  --brown-dark: #5c3d11;
  --ink: #1c1208;
  --ink-soft: #3a2a10;
  --ink-muted: #7a6a50;
  --divider: #c9b886;
}

/* ─────────────────────────────────────────────────────────────
   2. RESET & BASE
───────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--parchment);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
}

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

a {
  text-decoration: none;
  color: inherit;
}

h1,
h2,
h3 {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  line-height: 1.2;
}

/* Kursiver Akzent innerhalb von Überschriften, z. B. im Hero-Satz */
em {
  font-style: italic;
  color: var(--brown-mid);
}

/* ─────────────────────────────────────────────────────────────
   3. CLIP / VIDEO (Alben)
───────────────────────────────────────────────────────────── */
.clip {
  width: 100%;
  height: auto;
  display: block;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}