/* ============================================================
   Base — Reset, Body, Headlines, Selection, Scrollbar, Grain
   Konsumenten: alle Seiten (immer als zweites nach tokens.css laden)
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }
html.menu-open { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font-modern-artisan);
  color: var(--color-anthrazit);
  background: var(--color-sand);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button { font: inherit; cursor: pointer; }

a { color: inherit; }

/* ============================================================
   Selection — Vinzenz Rot statt Browser-Default
   ============================================================ */

::selection {
  background: var(--color-rot);
  color: var(--color-cream);
}

/* ============================================================
   Custom Scrollbar — Sand + Gold passend zum Design
   ============================================================ */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold) var(--color-sand);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-sand); }
::-webkit-scrollbar-thumb {
  background: var(--color-gold);
  border-radius: 999px;
  border: 2px solid var(--color-sand);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-gruen); }

/* ============================================================
   Headlines — Basis (Detail-Styling in components/typography.css)
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}

h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }

/* ============================================================
   Grain-Overlay — als Wrapper-Klasse fuer Sections nutzbar
   ============================================================ */

.grain {
  position: relative;
}
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.08;
  pointer-events: none;
  mix-blend-mode: multiply;
}