/* =========================================================
   ELYSIUM DOMIZIL — base.css (global)
   - Fonts
   - Design Tokens (Brand + Element-Gradienten)
   - Reset / Base Elements
   - Kleine globale Utilities (Typo + Spacing)
   ========================================================= */

/* -------------------------
   1) Local fonts (assets/fonts)
   ------------------------- */
@font-face{
  font-family: "Montserrat";
  src: url("../fonts/montserrat-v31-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Montserrat";
  src: url("../fonts/montserrat-v31-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-v40-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-v40-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "WindSong";
  src: url("../fonts/windsong-v13-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------------
   2) Tokens
   ------------------------- */
  :root{
   --font-signature: "WindSong", cursive; /*Brand Signature */

  /* Brand Palette */
  --ivory: #F9F5EF;
  --sand:  #EADDC8;
  --rose:  #F3D7D0;
  --sage:  #C4D1C0;
  --taupe: #B7A99A;
  --taupe-dark: #6F645A;

  /* Backward-compat aliases (aus alter home index) */
  --bg-elfenbein: var(--ivory);
  --bg-sand:      var(--sand);
  --bg-salbei:    var(--sage);
  --bg-rose:      var(--rose);
  --bg-taupe:     var(--taupe);

  /* Text */
  --txt-main: var(--taupe-dark);
  --txt-sec:  var(--taupe);
  --txt-legal:#4F4A45;

  /* Lines / Surfaces */
  --line: rgba(183,169,154,0.18);
  --line-strong: rgba(183,169,154,0.30);

  --soft:  rgba(234,221,200,0.14);
  --soft2: rgba(196,209,192,0.14);

  /* Layout / Radii / Shadow */
  --max: 1120px;
  --text: 860px;

  --r: 18px;
  --r-lg: 24px;

  --shadow: 0 10px 30px rgba(111,100,90,0.06);

  /* Type */
  --font-body: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --font-sans: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-script: "WindSong", "Allura", "Segoe Script", "Brush Script MT", cursive;

  /* Fixed header baseline (JS überschreibt via --header-h) */
  --header-h: 100px;

  /* ---- Element RGB Tokens (für Gradients, Cards, Pills, Mosaic) ---- */
  --ed-ivory: 249,245,239;     /* #F9F5EF */
  --ed-sand:  234,221,200;     /* #EADDC8 */
  --ed-sage:  196,209,192;     /* #C4D1C0 */
  --ed-taupe: 183,169,154;     /* #B7A99A */
  --ed-lightgray: 236,236,232; /* warmes sehr helles Grau */

  /* Terracotta */
  --ed-terracotta: 201,122,92;       /* soft */
  --ed-terracotta-rich: 205,126,84;  /* etwas satter */

  /* Element-Gradienten (global nutzbar) */
  --grad-feuer: linear-gradient(135deg,
    rgba(var(--ed-sand), 0.34),
    rgba(var(--ed-terracotta), 0.12)
  );
  --grad-erde: linear-gradient(135deg,
  rgba(var(--ed-sand), 0.40),
  rgba(var(--ed-sage), 0.24)
);
  --grad-luft: linear-gradient(135deg,
    rgba(var(--ed-ivory), 0.80),
    rgba(var(--ed-lightgray), 0.46)
  );
--grad-wasser: linear-gradient(135deg,
  rgba(var(--ed-ivory), 0.70),
  rgba(var(--ed-taupe), 0.22),
  rgba(var(--ed-sage), 0.16)
);
}

/* Scroll offsets / fixed header helpers */
html{
  scroll-padding-top: calc(var(--header-h) + 16px);
}

/* Anchor-Offsets bei fixed Header (TOC, Sprungmarken, Skip-Link) */
section, article, .section{
  scroll-margin-top: var(--header-h);
}

/* Content nicht unter fixed Header – global */
body.page{
  padding-top: calc(var(--header-h) - 4px);
}

/* Optional: Seiten ohne fixed Header */
body.no-fixed-header{
  padding-top: 0;
}

/* extra sicher für Überschriften/Targets im Content */
#main,
main [id]{
  scroll-margin-top: calc(var(--header-h) + 16px);
}

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

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition: none !important; animation: none !important; }
}

body{
  margin: 0;
  background: var(--ivory);
  color: var(--taupe-dark);
  font-family: var(--font-sans); 
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(183,169,154,0.55);
  text-underline-offset: 3px;
}
a:hover{ text-decoration-color: rgba(183,169,154,0.9); }

/* Sichtbarer Fokus (global) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible{
  outline: 2px solid rgba(183,169,154,0.85);
  outline-offset: 3px;
  border-radius: 10px;
}

/* -------------------------
   4) Base Typography (neutral, aber brauchbar)
   ------------------------- */
h1, h2, h3{
  font-family: var(--font-display);
  margin: 0 0 10px 0;
  line-height: 1.18;
  color: var(--taupe-dark);
}
h1{ font-size: clamp(2rem, 4vw, 2.5rem); }
h2{ font-size: clamp(1.6rem, 3vw, 2rem); }
h3{ font-size: clamp(1.2rem, 2vw, 1.4rem); }

p{ margin: 0 0 14px; }

/* -------------------------
   5) Kleine globale Utilities (werden oft genutzt)
   ------------------------- */
.center{ text-align: center; }

/* Utility: block element centered with readable line length */
.center-block{
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 72ch;
}
/* Background utilities (global) */
.bg-elfenbein{ background: var(--ivory); }
.bg-rose{ background: var(--rose); }

/* Soft Bands */
.bg-roseSoft{
  background: linear-gradient(
    180deg,
    rgba(var(--ed-rose, 243,215,208), 0.38),
    rgba(var(--ed-ivory, 249,245,239), 0.72)
  );
}

.mtop-12{ margin-top: 12px; }
.mtop-16{ margin-top: 16px; }
.mtop-18{ margin-top: 18px; }
.mtop-24{ margin-top: 24px; }
.mtop-32{ margin-top: 32px; }
.mtop-48{ margin-top: 48px; }

.eyebrow{
  margin: 0 0 10px 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(183,169,154,0.95);
}

.lede{
  max-width: 72ch;
  margin: 0;
  color: rgba(111,100,90,0.92);
}
/* Fix: wenn lede + center-block kombiniert wird, muss auto-Margin gewinnen */
.lede.center-block{
  margin-left: auto;
  margin-right: auto;
}

.micro{
  font-size: 0.95rem;
  opacity: 0.85;
}

/* a11y helper */
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
/* =========================
   Global Scrollbar (Body)
   ========================= */
html{
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(183,169,154,0.55) rgba(249,245,239,0.65);
  scrollbar-gutter: stable; /* verhindert Layout-Jumps (Chrome/Edge) */
}

/* Chrome / Edge / Safari */
body::-webkit-scrollbar{
  width: 10px;
}
body::-webkit-scrollbar-thumb{
  background: rgba(183,169,154,0.55);
  border-radius: 10px;
}
body::-webkit-scrollbar-track{
  background: rgba(249,245,239,0.65);
  border-radius: 10px;
}
/* Bullets bündig zur Bildkante */
.page--home .homeBullets--center{
  width: 100%;
  max-width: none;        /* nicht mehr schmaler als das Bild */
  margin: 12px 0 0;       /* kein auto -> nicht "anders" zentriert */
  padding-left: 0;        /* raus, weil wir inside nutzen */
  list-style-position: inside;
  text-align: left;
}
.page--home .homeBullets--center li{    /*„sauber eingerückt“ */
  padding-left: 0.2rem;
}