/* ============================================================
   Chantraine & Ganser - Brand Tokens
   Single Source of Truth fuer Web-Konsumenten (LPs, Worker, etc.).
   Migriert 2026-06-06 aus C:\Projekte\chantraine-ganser-web\lp-zahnzusatz\brand-src\brand\tokens.css

   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

   v3 Hover-Flip aktiviert 2026-06-06 (Marcus' Abnahme):
   - .cg-btn:hover nutzt jetzt --cg-shape-button-hover (Eck-Flip diagonal)
   ============================================================ */

: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 */

  /* ===== Text-Spezial-Toene (WCAG 2.1 AA, Contrast >= 4.5:1 auf weiss) =====
   * Eingefuehrt 2026-05-20 nach Lighthouse-Audit cg-lp-zahnzusatz.
   * Brand-Toene --cg-blue-60/--cg-teal bleiben fuer Akzent-Flaechen + Buttons unveraendert.
   * Diese hier sind ausschliesslich fuer Text- und Link-Verwendung gedacht. */
  --cg-text-muted: #5e6e84;     /* Mini-Text (Bio, Disclaimer, Hinweise) — Contrast 5.20 auf #fff */
  --cg-teal-text:  #007a76;     /* Teal als Text/Link — Contrast 5.19 auf #fff */
  --cg-whatsapp:   #075e54;     /* WhatsApp Brand-Dark-Green — Contrast 7.67 auf #fff */

  /* ===== Marken-Verlauf — fuenf Stufen =====
   * 45deg: Tiefblau unten-links zu Meergruen oben-rechts (Logo-Richtung). */
  --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. */
  --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;

  /* Eck-Flip-Hover-Spec — Stand 2026-06-06 LIVE (Marcus' Abnahme).
   * Spiegel-Variante des --cg-shape-button. */
  --cg-shape-button-hover: 0 12px 0 12px;

  /* ===== 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);
  text-decoration: underline;
}
a:hover { color: var(--cg-blue); }

/* ===== Lime-CTA — Brand-Hauptelement =====
 * BRAND.md §„Akzentfarbe": Limettengruen fuer CTAs, sparsam einsetzen.
 * Hover-Flip seit 2026-06-06 live (Marcus' Abnahme).
 * Reduced-Motion: bei prefers-reduced-motion bleibt der Eck-Flip aus,
 * nur Background-Wechsel — A11y-konform. */
.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: background 200ms ease,
              color 200ms ease,
              border-radius 200ms ease;
}
.cg-btn:hover,
.cg-btn:focus-visible {
  background: var(--cg-blue);
  color: #fff;
  border-radius: var(--cg-shape-button-hover);
}

@media (prefers-reduced-motion: reduce) {
  .cg-btn { transition: background 120ms linear, color 120ms linear; }
  .cg-btn:hover, .cg-btn:focus-visible { border-radius: var(--cg-shape-button); }
}

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

/* Outline-Variante (zurueckhaltender CTA, fuer Sekundaer-Aktionen) */
.cg-btn--outline {
  background: transparent;
  color: var(--cg-blue);
  box-shadow: inset 0 0 0 2px var(--cg-blue);
}
.cg-btn--outline:hover,
.cg-btn--outline:focus-visible {
  background: var(--cg-blue);
  color: #fff;
  box-shadow: none;
}

/* ===== Hero-Form — Brand-Pille als Hero-Hintergrund =====
 * Wird vom Snippet "hero-form" eingebaut. Pille in ihrer natuerlichen
 * Proportion (viewBox 1920:1167) anzeigen, NICHT slicen.
 *
 * 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;
}