/* ================================================================
   WANDERHORIZONT — Brand CSS
   Reisen durch das wahre Deutschland
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&family=Manrope:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ----------------------------------------------------------------
   COLOR TOKENS
   ---------------------------------------------------------------- */
:root {
  /* Primary palette */
  --c-primary:       #3F6A74;
  --c-secondary:     #6F8F78;
  --c-accent:        #D6C07A;
  --c-accent-hover:  #DDC988;
  --c-accent2:       #B0896C;

  /* Backgrounds */
  --c-bg:            #F4F8F6;
  --c-bg-contrast:   #BFCAC6;
  --c-bg-card:       #FFFFFF;

  /* Text */
  --c-text:          #2A3233;
  --c-text-light:    #5A6B6D;
  --c-text-muted:    #8A9FA3;
  --c-white:         #FFFFFF;

  /* Gradients */
  --grad-hero:       linear-gradient(135deg, #3F6A74 0%, #6F8F78 55%, #BFCAC6 100%);
  --grad-light:      linear-gradient(180deg, #F4F8F6 0%, #E8F0ED 100%);
  --grad-accent:     linear-gradient(135deg, #D6C07A 0%, #E5D59A 100%);
  --grad-green:      linear-gradient(135deg, #6F8F78 0%, #9FB6A8 100%);
  --grad-warm:       linear-gradient(135deg, #B0896C 0%, #C6A08A 100%);
  --overlay:         rgba(63, 106, 116, 0.28);
  --overlay-dark:    rgba(42, 50, 51, 0.55);

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

  /* Font sizes */
  --fs-hero:         clamp(2.6rem, 6vw, 5.2rem);
  --fs-h1:           clamp(2rem, 4.5vw, 3.8rem);
  --fs-h2:           clamp(1.6rem, 3.2vw, 2.8rem);
  --fs-h3:           clamp(1.2rem, 2vw, 1.6rem);
  --fs-body:         clamp(0.95rem, 1.1vw, 1.05rem);
  --fs-small:        0.85rem;
  --fs-mono:         clamp(0.75rem, 1vw, 0.875rem);
  --fs-label:        0.75rem;

  /* Line heights */
  --lh-tight:        1.15;
  --lh-heading:      1.25;
  --lh-body:         1.72;
  --lh-loose:        1.9;

  /* Letter spacing */
  --ls-tight:        -0.025em;
  --ls-normal:       -0.01em;
  --ls-wide:         0.06em;
  --ls-wider:        0.12em;

  /* Spacing scale */
  --sp-xs:           0.375rem;
  --sp-sm:           0.75rem;
  --sp-md:           1.25rem;
  --sp-lg:           2rem;
  --sp-xl:           3rem;
  --sp-2xl:          5rem;
  --sp-3xl:          8rem;
  --container:       1280px;
  --container-sm:    960px;
  --section-pad:     clamp(60px, 9vw, 128px);
  --gap:             clamp(16px, 2.2vw, 32px);

  /* Borders */
  --radius:          16px;
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       24px;
  --radius-xl:       36px;
  --radius-pill:     999px;

  /* Shadows */
  --shadow-xs:       0 1px 6px rgba(63, 106, 116, 0.07);
  --shadow-sm:       0 2px 14px rgba(63, 106, 116, 0.09);
  --shadow-md:       0 8px 36px rgba(63, 106, 116, 0.13);
  --shadow-lg:       0 24px 72px rgba(63, 106, 116, 0.17);
  --shadow-accent:   0 8px 28px rgba(214, 192, 122, 0.32);

  /* Transitions */
  --t-fast:          0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-base:          0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-slow:          0.58s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-spring:        0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ----------------------------------------------------------------
   TYPOGRAPHY BASE
   ---------------------------------------------------------------- */
body {
  font-family: var(--font-main);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background-color: var(--c-bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-alt);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
}

h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; }

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

p {
  line-height: var(--lh-body);
  color: var(--c-text-light);
}

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.label-accent {
  color: var(--c-accent2);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}

/* ----------------------------------------------------------------
   UTILITY CLASSES
   ---------------------------------------------------------------- */
.text-primary   { color: var(--c-primary); }
.text-accent    { color: var(--c-accent); }
.text-accent2   { color: var(--c-accent2); }
.text-muted     { color: var(--c-text-muted); }
.text-white     { color: var(--c-white); }
.text-center    { text-align: center; }
.text-left      { text-align: left; }

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

.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* ----------------------------------------------------------------
   DIVIDER
   ---------------------------------------------------------------- */
.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--c-bg-contrast) 30%, var(--c-bg-contrast) 70%, transparent 100%);
  border: none;
  margin: 0;
}

.divider-accent {
  width: 48px;
  height: 3px;
  background: var(--grad-accent);
  border-radius: var(--radius-pill);
  margin: var(--sp-md) 0;
}