/* ═══════════════════════════════════════════════════════
   CHANGA — Global System CSS
   Quelle: Changa Brand Guide (Changa Guide final.html)
           + CHANGA FRONTEND_ARCHITECTURE.md
   Immer VOR landingpage.css laden.
   ═══════════════════════════════════════════════════════ */


/* ─── 0. FONTS ──────────────────────────────────────────── */
@font-face {
  font-family: 'Outfit';
  src: url('../../assets/fonts/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../../assets/fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}


/* ─── 1. DESIGN-TOKENS ──────────────────────────────────── */
:root {
  /* Farben */
  --obsidian:      #0D0E10;
  --anthracite:    #16181B;
  --slate:         #23272C;
  --pearl:         #F5F6F7;
  --orange:        #E8621A;
  --orange-light:  #FF9A55;
  --orange-deep:   #C9501A;
  --orange-shadow: #A83D12;
  --salsa:         #F5874A;
  --mango:         #F2C06E;
  --steel-text:    #8B9298;
  --iron-text:     #4A4F54;
  --text-light:    #E8EAED;
  --text-dark:     #1A1C1E;
  --surface-white: #fff;
  --surface-cool:  #F4F5F7;

  /* Hintergrund-Gradienten (Brand Guide Tokens) */
  --bg-gradient-dark: radial-gradient(circle at 50% -20%, var(--slate) 0%, var(--obsidian) 80%);
  --bg-gradient-deep: linear-gradient(160deg, var(--obsidian) 0%, var(--anthracite) 55%, var(--slate) 100%);

  /* Border-Radii */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* Shadows & Borders */
  --inner-glow:         inset 0 1px 0 rgba(255,255,255,0.08);
  --border-glass:       1px solid rgba(255,255,255,0.12);
  --shadow-elevated:    0 25px 50px -12px rgba(0,0,0,0.5);
  --shadow-card:        0 8px 40px rgba(232,98,26,.06), 0 2px 8px rgba(13,14,16,.04);
  --border-dark-08:     1px solid rgba(13,14,16,.08);
  --border-dark-12:     1px solid rgba(13,14,16,.12);
  --border-light-10:    1px solid rgba(255,255,255,.10);
  --border-light-12:    1px solid rgba(255,255,255,.12);
  --border-accent-base: 1px solid rgba(232,98,26,.3);

  /* Layout */
  --max-w:       1360px;
  --pad-h:       clamp(1.25rem, 5vw, 2rem);
  --section-pad: clamp(4.5rem, 9vw, 7rem);

  /* Fonts */
  --font-sans:  'Outfit', system-ui, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;

  /* Easing */
  --ease-snap:       cubic-bezier(.2,.9,.2,1);
  --ease-flow:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-base: 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ─── 2. RESET & BASE ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: 100%; scroll-behavior: smooth; }
body  { font-family: var(--font-sans); background: var(--pearl); color: var(--iron-text); -webkit-font-smoothing: antialiased; }
p     { line-height: 1.65; }
a     { text-decoration: none; color: inherit; }
img   { display: block; max-width: 100%; }
ul    { list-style: none; }
input,
select,
textarea,
button { font-family: inherit; }


/* ─── 3. GRAIN-TEXTUR ───────────────────────────────────── */
.ch-grain-elegant {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  mix-blend-mode: overlay; opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ─── 4. HINTERGRUND-LAYER ──────────────────────────────── */

/* Basis-Dark: Radial Slate→Obsidian */
.bg-dark {
  background: var(--bg-gradient-dark);
  position: relative;
  overflow: hidden;
  color: var(--pearl);
}

/* Basis-Deep: Linear Obsidian→Anthracite→Slate */
.bg-deep {
  background: var(--bg-gradient-deep);
  position: relative;
  overflow: hidden;
  color: var(--pearl);
}

.bg-anthracite {
  background: var(--anthracite);
  position: relative;
  overflow: hidden;
  color: var(--pearl);
}

.bg-pearl     { background: var(--pearl); }
.bg-white     { background: var(--surface-white); }
.bg-subtle    { background: var(--surface-cool); }

.bg-pearl-deep { background: var(--pearl); position: relative; overflow: hidden; }
.bg-pearl-deep::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(232,98,26,.06) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(35,39,44,.03) 0%, transparent 40%);
  pointer-events: none; z-index: 0;
}


/* ─── 5. HINTERGRUND-MODIFIER-SYSTEME ───────────────────── */

/* System 1: Silk (Dark) */
.ch-bg-silk canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
}
.ch-bg-silk::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(13,14,16,.15) 0%, transparent 20%, transparent 80%, rgba(13,14,16,.35) 100%);
  pointer-events: none; z-index: 1;
}

/* System 2: Streaks Dark */
.ch-bg-streaks-dark::before,
.ch-bg-streaks-dark::after {
  content: ''; position: absolute; top: -100%; left: -50%; right: -50%; bottom: 0;
  pointer-events: none; z-index: 0;
}
.ch-bg-streaks-dark::before {
  background: linear-gradient(to bottom, var(--orange) 0%, transparent 75%);
  transform: skewX(-28deg); opacity: 0.15;
  mask: linear-gradient(90deg, transparent 0%, black 10%, transparent 20%, black 32%, transparent 42%, black 54%, transparent 64%, black 76%, transparent 86%, black 95%, transparent 100%);
  -webkit-mask: linear-gradient(90deg, transparent 0%, black 10%, transparent 20%, black 32%, transparent 42%, black 54%, transparent 64%, black 76%, transparent 86%, black 95%, transparent 100%);
}
.ch-bg-streaks-dark::after {
  top: -80%;
  background: linear-gradient(to bottom, var(--salsa) 0%, transparent 60%);
  transform: skewX(-28deg) translateX(10%); opacity: 0.10;
  mask: linear-gradient(90deg, transparent 6%, black 18%, transparent 30%, black 44%, transparent 58%, black 72%, transparent 85%);
  -webkit-mask: linear-gradient(90deg, transparent 6%, black 18%, transparent 30%, black 44%, transparent 58%, black 72%, transparent 85%);
}

/* System 3: Hero Spotlight */
.ch-bg-hero-spotlight::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(232,98,26,.15) 0%, rgba(13,14,16,0) 72%);
  pointer-events: none; z-index: 0;
}
.ch-bg-hero-spotlight::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  pointer-events: none;
}

/* System 4: Hero Grid Warm */
.ch-bg-hero-grid {
  background:
    radial-gradient(ellipse 58% 44% at 50% 42%, rgba(232,98,26,.22) 0%, rgba(232,98,26,.08) 36%, rgba(13,14,16,0) 74%),
    linear-gradient(180deg, #111214 0%, #16181b 64%, #0d0e10 100%);
  color: var(--pearl);
}
.ch-bg-hero-grid::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,135,74,.28), transparent);
  pointer-events: none;
}
.ch-hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(245,135,74,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,135,74,.045) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(ellipse 70% 74% at 50% 44%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 74% at 50% 44%, black 0%, transparent 100%);
  pointer-events: none; z-index: 0;
}

/* System 5: Glow (Light) */
.ch-bg-glow::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 85% 55% at 50% -5%, rgba(232,98,26,.14) 0%, transparent 55%),
    radial-gradient(circle at 88% 82%, rgba(242,192,110,.10) 0%, transparent 35%);
  pointer-events: none; z-index: 0;
}

/* System 6: Grid (Light) */
.ch-bg-grid::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(35,39,44,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(35,39,44,.10) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none; z-index: 0;
}
.ch-bg-grid::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 45% at 50% 0%, rgba(232,98,26,.07) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}

/* System 7: Dots (Light) */
.ch-bg-dots::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1.5px 1.5px, rgba(35,39,44,.22) 1.5px, transparent 0);
  background-size: 22px 22px;
  pointer-events: none; z-index: 0;
}
.ch-bg-dots::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(232,98,26,.07) 0%, transparent 32%),
    radial-gradient(circle at 88% 78%, rgba(242,192,110,.06) 0%, transparent 28%);
  pointer-events: none; z-index: 0;
}

/* System 8: Streaks Light */
.ch-bg-streaks-light::before,
.ch-bg-streaks-light::after {
  content: ''; position: absolute; top: -100%; left: -50%; right: -50%; bottom: 0;
  pointer-events: none; z-index: 0;
}
.ch-bg-streaks-light::before {
  background: linear-gradient(to bottom, var(--orange) 0%, transparent 70%);
  transform: skewX(-22deg); opacity: 0.09;
  mask: linear-gradient(90deg, transparent 5%, black 14%, transparent 24%, black 36%, transparent 46%, black 58%, transparent 70%, black 82%, transparent 92%);
  -webkit-mask: linear-gradient(90deg, transparent 5%, black 14%, transparent 24%, black 36%, transparent 46%, black 58%, transparent 70%, black 82%, transparent 92%);
}
.ch-bg-streaks-light::after {
  top: -90%;
  background: linear-gradient(to bottom, var(--salsa) 0%, transparent 60%);
  transform: skewX(-22deg) translateX(12%); opacity: 0.055;
  mask: linear-gradient(90deg, transparent 10%, black 22%, transparent 35%, black 48%, transparent 62%, black 76%, transparent 90%);
  -webkit-mask: linear-gradient(90deg, transparent 10%, black 22%, transparent 35%, black 48%, transparent 62%, black 76%, transparent 90%);
}


/* ─── 6. CARDS ──────────────────────────────────────────── */

/* Dark Glass — für Hero-Badges, dunkle Infokarten */
.ch-card {
  background: linear-gradient(180deg, rgba(22,24,27,.88), rgba(17,18,20,.92));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-elevated), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Elevated Dark — solide Anthrazit-Karte (Brand Guide) */
.ch-card-elevated {
  background: var(--anthracite);
  border: var(--border-glass);
  box-shadow: var(--inner-glow), var(--shadow-elevated);
  border-radius: var(--radius-2xl);
  padding: 40px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  transition: transform 0.4s var(--ease-snap), border-color 0.4s;
}
.ch-card-elevated:hover { transform: translateY(-5px); border-color: rgba(232,98,26,.25); }

/* Light — weiße Karte (Brand Guide) */
.ch-card-light {
  background: var(--surface-white);
  border: 1px solid rgba(13,14,16,.06);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-2xl);
  padding: 40px;
  position: relative;
  z-index: 2;
  transition: transform 0.4s var(--ease-snap), box-shadow 0.4s;
}
.ch-card-light:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(232,98,26,.10), 0 4px 12px rgba(13,14,16,.06);
}


/* ─── 7. BUTTONS ────────────────────────────────────────── */

/* btn-primary — Brand Guide Standard-CTA */
.btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle at 30% 30%, var(--salsa) 0%, var(--orange) 45%, var(--orange-deep) 100%);
  border: var(--border-accent-base);
  box-shadow: 0 0 10px 3px rgba(232,98,26,.25);
  color: var(--pearl);
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 600;
  padding: 18px 36px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  will-change: transform;
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, var(--mango), var(--salsa));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease-flow);
}
.btn-primary span {
  position: relative;
  z-index: 1;
  color: var(--pearl);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px 6px rgba(232,98,26,.30), 0 0 36px 12px rgba(232,98,26,.12);
  color: var(--pearl);
}
.btn-primary:hover::before { transform: scaleX(1); transform-origin: left center; }

/* Größen-Modifier */
.btn--lg { padding: 20px 44px; font-size: 1.05rem; }

/* btn-ghost — für dunkle Hintergründe */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.3);
  color: var(--pearl);
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 400;
  padding: 15px 32px;
  cursor: pointer;
  text-decoration: none;
  transition: background .25s, border-color .25s, transform var(--transition-base);
}
.btn-ghost:hover {
  background: rgba(232,98,26,.12);
  border-color: rgba(232,98,26,.5);
  transform: translateY(-2px);
}


/* ─── 8. EYEBROW-SYSTEM ─────────────────────────────────── */
.ch-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 20px;
}
.ch-eyebrow-dot {
  width: .42rem;
  height: .42rem;
  border-radius: 999px;
  background: var(--orange);
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(232,98,26,.65);
}
.ch-eyebrow-text {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
}
.ch-eyebrow--center {
  display: flex;
  justify-content: center;
  width: 100%;
}


/* ─── 9. LAYOUT-PRIMITIVE ───────────────────────────────── */
.ch-section {
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}
.ch-section--sm { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.ch-section--lg { padding: clamp(6rem, 12vw, 10rem) 0; }

.ch-container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-h);
  position: relative;
  z-index: 1;
}
.ch-container--narrow { max-width: 860px; }

.ch-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.ch-grid  { display: grid; }
.ch-content-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


/* ─── 10. TYPOGRAFIE ────────────────────────────────────── */
.ch-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  color: var(--text-dark);
}
.ch-h2--light { color: var(--text-light); }

.ch-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--text-dark);
}
.ch-h3--light { color: var(--text-light); }

.ch-text-lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--iron-text);
}
.ch-text-lead--light { color: rgba(232,234,237,.85); }

.ch-text-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--iron-text);
}
.ch-text-sm     { font-size: .875rem; line-height: 1.65; }
.ch-text-muted  { color: var(--steel-text); }
.ch-text-center { text-align: center; }
.ch-text-balance { text-wrap: balance; }