/* ============================================================
   RESSOURCENENTDECKER — Design-Tokens
   Drop-in CSS für weitere Projekte (Print, Web, Slides).
   Brand: Sabine Betz-Ungerer · Coach · Supervisorin · Lehrsupervisorin
   Version: 1.0 (2026-05)
   ============================================================

   Verwendung:
     <link rel="stylesheet" href="ressourcenentdecker-tokens.css">

   Alle Token-Namen sind stabil. Werte spiegeln den
   Ist-Zustand der Website www.ressourcenentdecker.de wider.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&display=swap');

:root {
  /* ── 1. Farben ─────────────────────────────────────────── */
  --color-teal-primary:   #2D7A8A;   /* Logo, Headlines, CTAs */
  --color-teal-dark:      #1A5866;   /* Logo auf Weiß, H2 */
  --color-teal-light:     #E8F4F6;   /* Flächen, Boxen */
  --color-teal-night:     #1A3A42;   /* Dunkle Hero-/Coverflächen */
  --color-sand:           #C4873A;   /* Akzent — sparsam */
  --color-warm-white:     #F5F0E8;   /* Seitengrund (Print/Web) */
  --color-white:          #FFFFFF;
  --color-text-dark:      #2A2A28;   /* Fließtext */
  --color-text-mid:       #7A7A75;   /* Captions, Labels */
  --color-text-mid-strong:#4F4E4A;   /* Sekundärtext stärker */

  /* Helle Texte auf dunklem Grund */
  --color-text-on-dark:      rgba(255,255,255,0.96);
  --color-text-on-dark-soft: rgba(245,240,232,0.95);
  --color-text-on-dark-meta: rgba(245,240,232,0.78);

  /* Semantische Aliase */
  --color-bg-page:        var(--color-warm-white);
  --color-bg-section:     var(--color-teal-light);
  --color-bg-dark:        var(--color-teal-night);
  --color-fg-primary:     var(--color-text-dark);
  --color-fg-secondary:   var(--color-text-mid);
  --color-fg-accent:      var(--color-teal-primary);
  --color-fg-accent-dark: var(--color-teal-dark);
  --color-border:         rgba(45, 122, 138, 0.20);
  --color-border-quote:   var(--color-sand);

  /* ── 2. Schrift ────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-body:    'Lato', 'Gill Sans MT', 'Frutiger Next', sans-serif;

  /* ── 3. Typo-Skala (Web px) ────────────────────────────── */
  /* H1 — Cormorant Regular, kursiv-Akzent erlaubt */
  --text-h1-size:         clamp(32px, 5vw, 56px);
  --text-h1-family:       var(--font-display);
  --text-h1-weight:       400;
  --text-h1-color:        var(--color-teal-dark);
  --text-h1-line-height:  1.10;
  --text-h1-tracking:     -0.005em;

  /* H2 — Section Headings */
  --text-h2-size:         clamp(31px, 4vw, 48px);
  --text-h2-family:       var(--font-display);
  --text-h2-weight:       400;
  --text-h2-color:        var(--color-teal-dark);
  --text-h2-line-height:  1.18;

  /* H3 — Rubrik (Caps) */
  --text-h3-size:         14px;
  --text-h3-family:       var(--font-body);
  --text-h3-weight:       700;
  --text-h3-color:        var(--color-text-dark);
  --text-h3-line-height:  1.4;
  --text-h3-transform:    uppercase;
  --text-h3-tracking:     0.08em;

  /* Body */
  --text-body-size:       16px;
  --text-body-family:     var(--font-body);
  --text-body-weight:     400;
  --text-body-color:      var(--color-text-dark);
  --text-body-line-height: 1.75;

  /* Lead — größerer Einstiegsabsatz */
  --text-lead-size:       clamp(16px, 1.4vw, 19px);
  --text-lead-weight:     300;
  --text-lead-line-height: 1.7;

  /* Caption */
  --text-caption-size:    13px;
  --text-caption-family:  var(--font-body);
  --text-caption-weight:  300;
  --text-caption-color:   var(--color-text-mid);
  --text-caption-line-height: 1.5;
  --text-caption-tracking: 0.06em;

  /* Label / Eyebrow */
  --text-label-size:      11px;
  --text-label-family:    var(--font-body);
  --text-label-weight:    700;
  --text-label-color:     var(--color-teal-primary);
  --text-label-transform: uppercase;
  --text-label-tracking:  0.18em;
  --text-label-line-height: 1.4;

  /* Quote */
  --text-quote-size:      clamp(20px, 2vw, 26px);
  --text-quote-family:    var(--font-display);
  --text-quote-weight:    400;
  --text-quote-style:     italic;
  --text-quote-color:     var(--color-teal-dark);
  --text-quote-line-height: 1.45;

  /* ── 4. Abstände ───────────────────────────────────────── */
  --space-xs:   4px;   /* 1mm   — Icon-Abstände */
  --space-s:    8px;   /* 2mm   — inline */
  --space-m:    16px;  /* 4mm   — Karten-Padding */
  --space-l:    24px;  /* 6mm   — Komponenten-Gap */
  --space-xl:   48px;  /* 12mm  — Sektion-Gap */
  --space-2xl:  96px;  /* 24mm  — Seitenrand Desktop */

  /* ── 5. Layout ─────────────────────────────────────────── */
  --layout-max-width:     1200px;
  --layout-gutter:        24px;
  --layout-pad:           clamp(20px, 5vw, 48px);
  --layout-margin:        var(--space-2xl);
  --layout-margin-tablet: var(--space-xl);
  --layout-margin-mobile: var(--space-l);

  /* ── 6. Border & Radius ────────────────────────────────── */
  --radius-sm:    2px;    /* Buttons, Inputs, Bilder */
  --radius-md:    4px;    /* Karten (selten) */
  --radius-lg:    6px;
  --border-thin:  1px solid var(--color-border);
  --border-quote: 3px solid var(--color-sand);

  /* ── 7. Schatten (flach) ───────────────────────────────── */
  --shadow-card:   0 1px  4px rgba(26, 58, 66, 0.08);
  --shadow-raised: 0 4px 16px rgba(26, 58, 66, 0.12);
}

/* ── 8. Basis-Element-Styles ───────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  color: var(--color-text-dark);
  line-height: var(--text-body-line-height);
  background-color: var(--color-warm-white);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-family: var(--text-h1-family);
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  color: var(--text-h1-color);
  line-height: var(--text-h1-line-height);
  letter-spacing: var(--text-h1-tracking);
  margin: 0;
}
h2 {
  font-family: var(--text-h2-family);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  color: var(--text-h2-color);
  line-height: var(--text-h2-line-height);
  margin: 0;
}
h3 {
  font-family: var(--text-h3-family);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  color: var(--text-h3-color);
  line-height: var(--text-h3-line-height);
  text-transform: var(--text-h3-transform);
  letter-spacing: var(--text-h3-tracking);
  margin: 0;
}
p { line-height: var(--text-body-line-height); }

.eyebrow, .label {
  font-family: var(--text-label-family);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  color: var(--text-label-color);
  text-transform: var(--text-label-transform);
  letter-spacing: var(--text-label-tracking);
  line-height: var(--text-label-line-height);
}
.eyebrow.on-dark { color: var(--color-sand); }

.caption {
  font-family: var(--text-caption-family);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  color: var(--text-caption-color);
  line-height: var(--text-caption-line-height);
  letter-spacing: var(--text-caption-tracking);
}

blockquote, .pullquote {
  font-family: var(--text-quote-family);
  font-size: var(--text-quote-size);
  font-style: var(--text-quote-style);
  color: var(--text-quote-color);
  line-height: var(--text-quote-line-height);
  border-left: var(--border-quote);
  padding-left: var(--space-l);
  margin: var(--space-l) 0;
}

a {
  color: var(--color-teal-primary);
  text-decoration: none;
}
a:hover {
  color: var(--color-teal-dark);
  text-decoration: underline;
}

/* ── 9. Komponenten-Klassen ───────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-primary {
  background: var(--color-teal-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-teal-dark); }
.btn-ghost {
  background: transparent;
  color: var(--color-teal-primary);
  border: 1px solid rgba(45, 122, 138, 0.4);
}
.btn-ghost:hover {
  border-color: var(--color-teal-primary);
  background: var(--color-teal-light);
}

.container {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding-left: var(--layout-pad);
  padding-right: var(--layout-pad);
}