/* ============================================================
   Chantraine & Ganser - Brand Tokens (v2)
   Stand: 2026-05-13
   Quelle der Wahrheit: marketing/brand/BRAND.md

   v2 — Harmonisierung 2026-05-13:
   - Naming auf englisch (--cg-blue/-teal/-lime statt deutsch)
   - Spacing-Prefix --cg-space-* (Tailwind-Stil, rem-basiert)
   - Fraunces als Display-Schrift (via fonts.css separat eingebunden)
   - Zwei Brand-Element-Form-Tokens: --cg-shape-pill + --cg-radius-card
   - Lime-Pille als Standard-CTA (.cg-btn) — Brand-Hauptelement
   - Container-Skala 720 / 1200 / 1440 px
   - Tonabstufungen Blau/Teal/Lime in 80/60/40/20
   ============================================================ */

:root {
  /* ===== Primaerfarben ===== */
  --cg-blue: #1e3e6b;          /* CG-Tiefblau (Text/Primaer) */
  --cg-teal: #00a19a;          /* CG-Meergruen (Highlights/Sekundaer) */
  --cg-lime: #d4dc59;          /* CG-Limettengruen (CTAs, sparsam) */

  /* ===== Tonabstufungen (Mischung mit Weiss) ===== */
  --cg-blue-80: color-mix(in srgb, var(--cg-blue) 80%, white);
  --cg-blue-60: color-mix(in srgb, var(--cg-blue) 60%, white);
  --cg-blue-40: color-mix(in srgb, var(--cg-blue) 40%, white);
  --cg-blue-20: color-mix(in srgb, var(--cg-blue) 20%, white);

  --cg-teal-80: color-mix(in srgb, var(--cg-teal) 80%, white);
  --cg-teal-60: color-mix(in srgb, var(--cg-teal) 60%, white);
  --cg-teal-40: color-mix(in srgb, var(--cg-teal) 40%, white);
  --cg-teal-20: color-mix(in srgb, var(--cg-teal) 20%, white);

  --cg-lime-80: color-mix(in srgb, var(--cg-lime) 80%, white);
  --cg-lime-60: color-mix(in srgb, var(--cg-lime) 60%, white);
  --cg-lime-40: color-mix(in srgb, var(--cg-lime) 40%, white);
  --cg-lime-20: color-mix(in srgb, var(--cg-lime) 20%, white);

  /* ===== Spezielle Toene ===== */
  --cg-blue-deep: #122947;      /* Hero-Headlines, dunkler als --cg-blue */
  --cg-text: #2a2a2a;           /* Body, kein Reinschwarz */
  --cg-warmwhite: #f5f2ec;      /* Cremeton auf dunklen Brand-Flaechen */

  /* ===== Marken-Verlauf — fuenf Stufen =====
   * 45deg: Tiefblau unten-links zu Meergruen oben-rechts (Logo-Richtung).
   * Stufen vom leisesten zum vollsten:
   * - whisper  : 4 % Markenmischung mit Weiss, kaum sichtbar — ruhige
   *              Sektionen ohne „getoente Flaeche"
   * - 08       : 8 % Deckkraft — Karten-Hover-Hauch, dezente Akzente
   * - 20       : 20 % Deckkraft — Brand-Element-Akzentflaechen
   * - 50       : 50 % Deckkraft — Overlays
   * - 100      : Vollfarbe — Footer, Brand-Element mit Maske */
  --cg-gradient: linear-gradient(45deg, var(--cg-blue), var(--cg-teal));
  --cg-gradient-50: linear-gradient(45deg, rgb(30 62 107 / 0.5), rgb(0 161 154 / 0.5));
  --cg-gradient-20: linear-gradient(45deg, rgb(30 62 107 / 0.2), rgb(0 161 154 / 0.2));
  --cg-gradient-08: linear-gradient(45deg, rgb(30 62 107 / 0.08), rgb(0 161 154 / 0.08));
  --cg-gradient-whisper: linear-gradient(
    45deg,
    color-mix(in srgb, var(--cg-blue) 4%, white) 0%,
    color-mix(in srgb, var(--cg-teal) 4%, white) 100%
  );

  /* Vollton-Mittelwert des 8 %-Verlaufs — fuer Header, wo Verlauf irritiert */
  --cg-bg-tint: color-mix(
    in srgb,
    color-mix(in srgb, var(--cg-blue) 50%, var(--cg-teal)) 8%,
    white
  );

  /* ===== Brand-Element-Form (asymmetrische Pille) =====
   * Pillen-Bogen-Ecken: oben links (TL) + unten rechts (BR).
   * Harte Ecken: oben rechts (TR) + unten links (BL).
   * Quelle: BRAND.md §„Markenregel: Form-Verwendung" — niemals spiegeln.
   *
   * Drei Auspraegungen je nach Element-Groesse:
   * - shape-pill  : Prozent-Notation, skaliert mit Element. Fuer
   *                 Logo-Pillen, Eyebrow-Tags, kleine dekorative
   *                 Akzente — alles unter ~40 px Hoehe.
   * - shape-button: Feste 12 px. Fuer CTAs/Buttons — sanfte Card-
   *                 Style-Abrundung mit Logo-Geometrie, nicht
   *                 Pillen-laut. Standard fuer .cg-btn.
   * - radius-card : Feste 70 px. Fuer Brand-Container ab ~140 px
   *                 Hoehe (Hero, Cluster-Karten, LeadMagnet-Buehne)
   *                 — damit der Bogen ein echter Kreisbogen wird,
   *                 nicht flach. */
  --cg-shape-pill: 23% 0 23% 0 / 50% 0 50% 0;
  --cg-shape-button: 12px 0 12px 0;
  --cg-radius-card: 70px 0 70px 0;

  /* ===== Typografie ===== */
  --cg-font-body: 'PT Sans', system-ui, -apple-system, sans-serif;
  --cg-font-display: 'Fraunces Variable', 'Fraunces', Georgia, serif;

  /* Skala modular 1.25, fluid via clamp. Base 1rem = 18 px (html-Reset). */
  --cg-text-base:  1rem;                                   /*  18 px */
  --cg-text-h1:    clamp(2.25rem, 4vw + 1rem, 4rem);       /*  41–72 px */
  --cg-text-h2:    clamp(1.75rem, 2.5vw + 1rem, 3.052rem); /*  32–55 px */
  --cg-text-h3:    clamp(1.5rem, 1.5vw + 1rem, 2.441rem);  /*  27–44 px */
  --cg-text-h4:    1.953rem;    /* 35 px */
  --cg-text-h5:    1.563rem;    /* 28 px */
  --cg-text-h6:    1.25rem;     /* 22 px */
  --cg-text-lead:  1.25rem;     /* 22 px — Hero-Subline, Lead-Paragraph */
  --cg-text-body:  1rem;        /* 18 px */
  --cg-text-small: 0.875rem;    /* 16 px — Footnote, Hinweis */

  --cg-leading-tight:   1.1;    /* Headlines */
  --cg-leading-normal:  1.5;    /* Body */
  --cg-leading-loose:   1.7;    /* Lange Lesetexte */

  /* ===== Spacing (rem-basiert, Base 1rem = 18 px) ===== */
  --cg-space-1:  0.25rem;    /*  ~5 px */
  --cg-space-2:  0.5rem;     /*  ~9 px */
  --cg-space-3:  0.75rem;    /* ~14 px */
  --cg-space-4:  1rem;       /*  18 px */
  --cg-space-6:  1.5rem;     /* ~27 px */
  --cg-space-8:  2rem;       /*  36 px */
  --cg-space-12: 3rem;       /*  54 px */
  --cg-space-16: 4rem;       /*  72 px */
  --cg-space-24: 6rem;       /* ~108 px */
  --cg-space-32: 8rem;       /* 144 px */

  /* Section-Padding (fluid) */
  --cg-section-padding: clamp(3rem, 6vw, 6rem);

  /* ===== Container ===== */
  --cg-container-narrow:  720px;     /* Pillar Pages, Lesetexte */
  --cg-container-default: 1200px;    /* Standard-Sektionen */
  --cg-container-wide:    1440px;    /* Hero, grosse Bilder */

  /* ===== Buttons (Lime-CTA als Brand-Hauptelement) ===== */
  --cg-btn-radius:  var(--cg-shape-button);
  --cg-btn-padding: var(--cg-space-3) var(--cg-space-6);
}

/* ===== Base ===== */
html {
  /* 112.5% statt 18px — respektiert User-Browser-Zoom (A11y).
   * Auf Default-Browser-Setting (16 px) ergibt das 18 px = 1 rem. */
  font-size: 112.5%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--cg-font-body);
  font-size: var(--cg-text-body);
  line-height: var(--cg-leading-normal);
  color: var(--cg-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cg-font-display);
  font-weight: 600;
  line-height: var(--cg-leading-tight);
  color: var(--cg-blue-deep);
  margin: 0 0 var(--cg-space-4) 0;
}

h1 { font-size: var(--cg-text-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--cg-text-h2); }
h3 { font-size: var(--cg-text-h3); }
h4 { font-size: var(--cg-text-h4); }
h5 { font-size: var(--cg-text-h5); }
h6 { font-size: var(--cg-text-h6); }

p { margin: 0 0 var(--cg-space-4) 0; }

a {
  color: var(--cg-teal);
  text-decoration: underline;
}
a:hover { color: var(--cg-blue); }

/* ===== Lime-CTA — Brand-Hauptelement =====
 * BRAND.md §„Akzentfarbe": Limettengruen fuer CTAs, sparsam einsetzen. */
.cg-btn {
  display: inline-block;
  font-family: var(--cg-font-body);
  font-size: var(--cg-text-body);
  font-weight: 700;
  background: var(--cg-lime);
  color: var(--cg-blue-deep);
  padding: var(--cg-btn-padding);
  border: none;
  border-radius: var(--cg-btn-radius);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(212 220 89 / 0.4);
}

.cg-btn--small {
  font-size: var(--cg-text-small);
  padding: var(--cg-space-2) var(--cg-space-4);
}

/* ===== Hero-Form - Brand-Pille als Hero-Hintergrund =====
 * Wird vom Snippet "hero-form" eingebaut. Pille in ihrer natuerlichen
 * Proportion (viewBox 1920:1167) anzeigen, NICHT slicen - sonst wird
 * die untere Cubic-Bezier-Rundung abgeschnitten. width:100% +
 * aspect-ratio rendert die Form 1:1.
 *
 * Container-Konvention (siehe hero-form.html):
 *   - position:relative auf dem Eltern-Element
 *   - overflow:hidden falls das Snippet ueber den Container hinausragt
 *   - Andere Hero-Inhalte (Header, Card) brauchen position:relative +
 *     z-index >= 1 damit sie ueber der Pille (z=0) liegen. */
.cg-hero-form {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1167;
  z-index: 0;
  display: block;
}