/* ===========================================================
   ÖKOLOGISCH LEBEN — Colors & Type
   "Watercolor Editorial" — soft cream paper, forest greens,
   sage-teal accents, watercolor rainbow ribbon, classical serif.
   -----------------------------------------------------------
   Source of truth:
   - Official palette: Farbcodes_Christoff001 (März 2026)
   - Paper/ink system + type scale: oel-website/src/styles.css
   Load this file, then use the semantic vars below.
   =========================================================== */

/* ---- Webfonts (same families the live site loads) ---- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/CormorantGaramond-Variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/CormorantGaramond-Italic-Variable.ttf") format("truetype-variations");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Allura";
  src: url("../assets/fonts/Allura-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* =========================================================
     OFFICIAL BRAND PALETTE (hex — the canonical reference)
     Each color carries a documented semantic role.
     ========================================================= */
  --blattgruen:  #7CB87A;   /* Leaf green — Pflanzen, Wachstum, Anbau   */
  --waldgruen:   #2D6A4F;   /* Forest green — HAUPTFARBE / CI            */
  --tannengruen: #1B3A2D;   /* Fir green — Hintergründe, Struktur        */
  --minthauch:   #E3FAEB;   /* Mint breath — helle Info-Boxen            */
  --salbeiblau:  #AEE0D6;   /* Sage blue — Klima, Digital                */
  --wasserblau:  #3A9BC8;   /* Water blue — Wasser, Strategie            */
  --erdbraun:    #6B4226;   /* Earth brown — Boden, Zahlen               */
  --sonnengelb:  #F5C842;   /* Sun yellow — Energie, Sonne               */
  --dottergelb:  #F2A900;   /* Yolk yellow — Ernte, Markt                */
  --morgenrot:   #C0392B;   /* Morning red — Akzente, Warnhinweise       */
  --amethist:    #7B4FA6;   /* Amethyst — Wissen, Quellen                */
  --mintblau:    #B9D8D7;   /* Mint blue — CI-Akzent (NEU)               */

  /* =========================================================
     PAPER GROUND — warm cream, "aged paper" base
     ========================================================= */
  --paper:        oklch(0.945 0.022 88);   /* warm cream — page ground   */
  --paper-2:      oklch(0.915 0.030 85);   /* deeper paper for cards     */
  --paper-3:      oklch(0.885 0.038 82);   /* deepest accent paper       */
  --paper-tint:   oklch(0.935 0.030 175);  /* cool watercolor wash       */
  --minthauch-bg: #E3FAEB;                 /* light info-box ground      */

  /* =========================================================
     INK — forest greens for all text
     ========================================================= */
  --ink:          oklch(0.28 0.035 150);   /* deep forest — headings/body, ≈ Tannengrün */
  --ink-2:        oklch(0.42 0.035 150);   /* mid — secondary text, ≈ Waldgrün          */
  --ink-soft:     oklch(0.55 0.028 150);   /* body de-emphasis, captions                */
  --ink-faint:    oklch(0.72 0.020 150);   /* hairlines, disabled, faint captions       */

  /* =========================================================
     ACCENTS — interactive + decorative
     The default CTA uses the sage-teal "Salbei" hue.
     ========================================================= */
  --sage:         oklch(0.62 0.045 175);   /* primary CTA — teal-sage    */
  --sage-deep:    oklch(0.52 0.05  175);   /* CTA hover / icon green     */
  --sage-soft:    oklch(0.82 0.025 175);   /* soft sage fill             */
  --clay:         oklch(0.62 0.06  55);    /* earthy warm                */
  --bloom:        oklch(0.70 0.07  330);   /* watercolor pink            */
  --sky:          oklch(0.75 0.05  230);   /* watercolor sky             */
  --sun:          oklch(0.82 0.07  90);    /* watercolor sun             */

  /* Watercolor rainbow ribbon stops (signature motif) */
  --rb-1: oklch(0.78 0.10 30);   /* warm red    */
  --rb-2: oklch(0.82 0.10 75);   /* amber       */
  --rb-3: oklch(0.78 0.07 140);  /* green       */
  --rb-4: oklch(0.74 0.07 200);  /* blue        */
  --rb-5: oklch(0.72 0.08 280);  /* violet      */
  --rb-6: oklch(0.76 0.08 330);  /* pink        */

  /* =========================================================
     TYPE FAMILIES
     ========================================================= */
  --font-serif:  "Cormorant Garamond", "EB Garamond", Georgia, serif; /* everything */
  --font-script: "Allura", "Pinyon Script", "Brush Script MT", cursive; /* signature only */
  --font-caps:   "Cormorant Garamond", Georgia, serif; /* eyebrows / nav / labels (uppercased + tracked) */

  /* =========================================================
     RHYTHM / SHAPE
     ========================================================= */
  --container:    1180px;
  --gutter:       clamp(20px, 4vw, 56px);
  --radius:       14px;     /* default card / control radius */
  --radius-lg:    22px;     /* large feature cards           */
  --radius-pill:  999px;    /* buttons, inputs, chips        */

  /* =========================================================
     SHADOWS — like a printed page, never harsh
     ========================================================= */
  --shadow-paper: 0 1px 0 oklch(0.96 0.02 88), 0 18px 40px -28px oklch(0.30 0.03 150 / 0.30);
  --shadow-soft:  0 1px 2px oklch(0.30 0.03 150 / 0.05), 0 6px 18px -10px oklch(0.30 0.03 150 / 0.18);
  --shadow-lift:  0 1px 2px oklch(0.30 0.03 150 / 0.06), 0 18px 36px -20px oklch(0.30 0.03 150 / 0.30);
}

/* ===========================================================
   BASE TYPE — apply to body
   =========================================================== */
.oel-type-base,
body.oel {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ===========================================================
   SEMANTIC TYPE SCALE
   Headings are medium-weight serif, slightly tightened.
   Display sizes use clamp() to stay fluid.
   =========================================================== */
.h1, h1.oel {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.05;
  margin: 0;
}
.h2, h2.oel {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  margin: 0;
}
.h3, h3.oel {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.2;
  margin: 0;
}
.h4, h4.oel {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
  font-size: 1.05rem;
  margin: 0;
}

/* Body copy */
.p, p.oel {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 1em;
  text-wrap: pretty;
}

/* Lead — italic intro paragraph */
.lead {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.5;
}

/* Eyebrow / kicker — tracked uppercase serif */
.eyebrow {
  font-family: var(--font-caps);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}

/* Nav / menu labels — slightly looser tracking */
.label-nav {
  font-family: var(--font-caps);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Small all-caps stat / field labels */
.label-up {
  font-family: var(--font-caps);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink-soft);
}

/* Big italic display numerals (stats, "2008", "∞") */
.stat-num {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-style: italic;
  color: var(--ink);
  line-height: 1;
}

/* Signature — script face, used ONLY for the founder's name / sign-off */
.signature {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ink);
}

/* Pull-quote — large italic serif, centered */
.quote {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-style: italic;
  color: var(--ink);
  line-height: 1.45;
}