/* site.css — Kosmetikstudio Muster GmbH (template #3, v1).
   Loads AFTER tokens.css + all block.css files. Site-level page chrome + de bewuste
   niche-register-beslissingen (font-paar + warm palet) leven hier — nooit in de
   gekopieerde block.css (backport-regel msl-blocks/README.md).

   Register-keuze (scout 2026-07-06, zie SOURCES.md): elegant-editorial, warm-neutraal.
   Twee overrides t.o.v. bibliotheks-defaults, allebei bewust:
     1. Font-paar: Cormorant Garamond (headings) + Inter (body) — beauty-rij DESIGN-RULES,
        gemeten uit seelenwellness-muenchen.de.
     2. Warm palet i.p.v. navy: --c-primary wordt warme espresso, --c-accent een gedempte
        rosewood, --c-bg-alt een warm greige. Omdat --c-dark-1/2/3 via color-mix uit
        --c-primary komen, schuift de hele donker-familie automatisch warm mee (token-bedoeling).
   Personalizer overschrijft --c-accent (klant-kleur) en --c-primary (verdonkerde logo-kleur)
   per klant; deze waarden zijn de muster-default. */

:root {
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Warm palet (niche-register, overschrijfbaar door personalizer) */
  --c-primary: #2c2723;
  --c-accent: #b27c6e;
  --c-bg-alt: #f6f2ed;

  /* Cormorant is een display-serif die klein oogt; iets groter + 600 geeft de
     elegante-maar-leesbare kop-schaal uit de scout (seelenwellness h1 ~500/70px). */
  --fs-h1: clamp(2.4rem, 5.5vw, 3.75rem);
  --fs-h2: clamp(1.9rem, 4vw, 2.75rem);

  /* Page-chrome sizing, buiten tokens.css (specifiek voor deze template's
     Rohentwurf-banner). */
  --rohentwurf-h: 2.5rem;
}

/* Cormorant Garamond op koppen op 600 zetten (bibliotheks-koppen erven --font-heading;
   de zwaardere weight houdt de serif op donker/licht leesbaar). */
h1, h2, h3,
.hero2-title, .beh1-title, .beh1-row-name, .team1-title, .team1-name,
.gal2-header h2, .rev3-header h2, .steps2-heading, .gut1-title, .faq2-heading,
.loc2-info h2, .insta1-title, .fpanel2-title, .ftr2-brand h3 {
  font-weight: 600;
}

/* --- Baseline page reset (site-level, geen block-concern) --- */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.5;
}

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

img, video {
  max-width: 100%;
}

a {
  color: inherit;
}

/* Anker-doelen niet onder de sticky Rohentwurf-banner laten vallen. Nav is statisch,
   alleen de banner overlapt nog (navbar/v1-migratie, Giu 2026-07-06). */
[id] {
  scroll-margin-top: calc(var(--rohentwurf-h) + var(--space-2));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --- Rohentwurf-banner (legal-kadering, ONBOARDING §2 Layer 4) ---
   Sticky bovenaan, boven de navbar (z-index hoger dan navbar-v2's 1000). display:block +
   text-align:center bewust (lopende zin met één inline <strong>, geen flex-items — flex
   brak de zin bij 390px in losse kolommen; block + center voorkomt dat). */
.rohentwurf-banner {
  position: sticky;
  top: 0;
  z-index: 1001;
  min-height: var(--rohentwurf-h);
  display: block;
  padding: 0.5rem var(--space-3);
  background: var(--c-text);
  color: var(--c-bg);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

.rohentwurf-banner strong {
  font-weight: 800;
}

/* --- Integratie: sectie-ritme. loc2 (Kontakt) staat direct onder de faq (bg-alt);
   twee grijze vlakken op elkaar → loc2 wit. Compositie-keuze, dus site-laag. --- */
.loc2 {
  background: var(--c-bg);
}