/* ================================================================
   BRAND.CSS — NaturReise Deutschland
   Design Tokens: Colors, Typography, Buttons, Utilities
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

/* ── CSS CUSTOM PROPERTIES ─────────────────────────────────────── */
:root {
  /* Brand Palette */
  --c-primary:        #1F3A45;
  --c-secondary:      #2E4A3E;
  --c-accent:         #C9A24A;
  --c-accent2:        #8C3F3A;
  --c-bg:             #E1E8EA;
  --c-bg-dark:        #2B3436;
  --c-text:           #1E2324;

  /* Extended */
  --c-primary-light:  #2A4D5C;
  --c-accent-hover:   #CFAC5C;
  --c-accent-light:   #D9B96E;
  --c-bg-mid:         #D2DBDE;
  --c-text-muted:     #5A6566;
  --c-text-light:     #8A9699;
  --c-border:         rgba(31, 58, 69, 0.12);
  --c-border-light:   rgba(255, 255, 255, 0.15);
  --c-white:          #FFFFFF;
  --c-overlay:        rgba(31, 58, 69, 0.45);

  /* Gradients */
  --grad-hero:        linear-gradient(135deg, #1F3A45 0%, #2E4A3E 55%, #2B3436 100%);
  --grad-light:       linear-gradient(180deg, #E1E8EA 0%, #D2DBDE 100%);
  --grad-accent:      linear-gradient(135deg, #C9A24A 0%, #D9B96E 100%);
  --grad-forest:      linear-gradient(135deg, #2E4A3E 0%, #5F776B 100%);
  --grad-warm:        linear-gradient(135deg, #8C3F3A 0%, #A65750 100%);
  --grad-card:        linear-gradient(160deg, #243E4A 0%, #2E4A3E 100%);

  /* Typography */
  --font-main:  'Inter', 'IBM Plex Sans', sans-serif;
  --font-alt:   'Manrope', 'Inter', sans-serif;
  --font-mono:  'IBM Plex Mono', monospace;

  /* Sizes */
  --fs-xs:    0.7rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   2rem;
  --fs-3xl:   2.5rem;
  --fs-hero:  clamp(2.4rem, 5.5vw, 4.75rem);
  --fs-disp:  clamp(1.9rem, 3.5vw, 3.25rem);
  --fs-h2:    clamp(1.5rem, 2.5vw, 2.25rem);
  --fs-h3:    clamp(1.1rem, 1.5vw, 1.4rem);

  /* Weights */
  --fw-light:   300;
  --fw-reg:     400;
  --fw-med:     500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-base:    1.6;
  --lh-relax:   1.75;
  --lh-loose:   1.9;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Border radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* Shadows */
  --sh-sm:   0 1px 4px rgba(30,35,36,.07);
  --sh-md:   0 4px 18px rgba(30,35,36,.10);
  --sh-lg:   0 10px 40px rgba(30,35,36,.12);
  --sh-xl:   0 20px 64px rgba(30,35,36,.15);
  --sh-card: 0 2px 14px rgba(31,58,69,.08), 0 1px 4px rgba(31,58,69,.04);
  --sh-hover:0 14px 44px rgba(31,58,69,.18);
  --sh-glow: 0 0 40px rgba(201,162,74,.25);

  /* Transitions */
  --t-fast:   0.15s ease;
  --t-base:   0.3s ease;
  --t-slow:   0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --t-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container:        1200px;
  --container-wide:   1380px;
  --container-narrow: 780px;
  --gutter:           clamp(1rem, 3vw, 2rem);
  --section-py:       clamp(64px, 9vw, 120px);
  --header-h:         76px;
}

/* ── BASE RESET ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-main);
  font-size: var(--fs-base);
  font-weight: var(--fw-reg);
  line-height: var(--lh-base);
  color: var(--c-text);
  background-color: var(--c-bg);
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; }
h1, h2, h3, h4, h5, h6 { line-height: var(--lh-tight); font-weight: var(--fw-semi); }

/* ── TYPOGRAPHY CLASSES ────────────────────────────────────────── */
.t-hero   { font-size: var(--fs-hero); font-weight: var(--fw-semi); line-height: var(--lh-tight); letter-spacing: -0.025em; }
.t-disp   { font-size: var(--fs-disp); font-weight: var(--fw-semi); line-height: var(--lh-snug); letter-spacing: -0.02em; }
.t-h2     { font-size: var(--fs-h2);   font-weight: var(--fw-semi); line-height: var(--lh-snug); letter-spacing: -0.015em; }
.t-h3     { font-size: var(--fs-h3);   font-weight: var(--fw-med);  line-height: var(--lh-snug); }
.t-body   { font-size: var(--fs-base); font-weight: var(--fw-reg);  line-height: var(--lh-relax); }
.t-lg     { font-size: var(--fs-md);   font-weight: var(--fw-reg);  line-height: var(--lh-relax); }
.t-sm     { font-size: var(--fs-sm);   line-height: var(--lh-base); }
.t-label  { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-med); letter-spacing: 0.14em; text-transform: uppercase; }
.t-mono   { font-family: var(--font-mono); }

/* ── SECTION LABEL ─────────────────────────────────────────────── */
.sec-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-med);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-5);
}
.sec-label::before {
  content: '';
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--c-accent);
  flex-shrink: 0;
}
.sec-label--light { color: rgba(201,162,74,.8); }
.sec-label--light::before { background: rgba(201,162,74,.8); }

/* ── BUTTONS ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.875rem 2rem;
  font-family: var(--font-main);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-base);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.08);
  opacity: 0;
  transition: opacity var(--t-base);
}
.btn:hover::after { opacity: 1; }

.btn-primary {
  background: var(--grad-accent);
  color: var(--c-primary);
  box-shadow: 0 4px 22px rgba(201,162,74,.32);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #CFAC5C, #D9B96E);
  box-shadow: 0 8px 32px rgba(201,162,74,.48);
  transform: translateY(-2px);
  color: var(--c-primary);
}

.btn-outline {
  background: transparent;
  color: var(--c-accent);
  border: 1.5px solid var(--c-accent);
}
.btn-outline:hover {
  background: var(--c-accent);
  color: var(--c-primary);
  transform: translateY(-2px);
}

.btn-ghost {
  background: rgba(255,255,255,.1);
  color: var(--c-white);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-2px);
  color: var(--c-white);
}

.btn-dark {
  background: var(--c-primary);
  color: var(--c-white);
}
.btn-dark:hover {
  background: var(--c-secondary);
  transform: translateY(-2px);
  color: var(--c-white);
}

.btn-sm { padding: 0.625rem 1.375rem; font-size: 0.75rem; }
.btn-lg { padding: 1.1rem 2.5rem; font-size: var(--fs-base); }

/* ── BADGES ────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.28rem 0.8rem;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: var(--fw-med);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.badge-accent  { background: rgba(201,162,74,.12); color: var(--c-accent); border: 1px solid rgba(201,162,74,.25); }
.badge-primary { background: rgba(31,58,69,.08);   color: var(--c-primary); border: 1px solid rgba(31,58,69,.15); }
.badge-dark    { background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.15); }
.badge-red     { background: rgba(140,63,58,.1);  color: var(--c-accent2); border: 1px solid rgba(140,63,58,.2); }
.badge-green   { background: rgba(46,74,62,.1);   color: var(--c-secondary); border: 1px solid rgba(46,74,62,.2); }

/* ── STAT NUMBER ───────────────────────────────────────────────── */
.stat-num {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: var(--fw-semi);
  color: var(--c-accent);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ── ANIMATED UNDERLINE ────────────────────────────────────────── */
.link-ul {
  position: relative;
  text-decoration: none;
  display: inline-block;
}
.link-ul::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--c-accent);
  transition: width var(--t-slow);
}
.link-ul:hover::after { width: 100%; }

/* ── DIVIDER ───────────────────────────────────────────────────── */
.divider       { height: 1px; background: var(--c-border); border: none; }
.divider-light { background: rgba(255,255,255,.1); }

/* ── ICON WRAP ─────────────────────────────────────────────────── */
.icon-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r-lg);
  flex-shrink: 0;
}
.icon-wrap--accent  { background: rgba(201,162,74,.12); color: var(--c-accent); }
.icon-wrap--primary { background: rgba(31,58,69,.08);   color: var(--c-primary); }
.icon-wrap--dark    { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }
.icon-wrap--lg { width: 64px; height: 64px; border-radius: var(--r-xl); }

/* ── SCROLL REVEAL ─────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left  { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.reveal-left.visible, .reveal-right.visible { transform: translateX(0); }
.reveal-scale { transform: scale(0.92); }
.reveal-scale.visible { transform: scale(1); }

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* ── COLOR HELPERS ─────────────────────────────────────────────── */
.c-primary   { color: var(--c-primary); }
.c-accent    { color: var(--c-accent); }
.c-muted     { color: var(--c-text-muted); }
.c-white     { color: var(--c-white); }
.c-text      { color: var(--c-text); }

.bg-primary  { background-color: var(--c-primary); }
.bg-dark     { background-color: var(--c-bg-dark); }
.bg-bg       { background-color: var(--c-bg); }
.bg-hero     { background: var(--grad-hero); }