/* ============================================
   BRAND.CSS — Deutschland Entdecken
   Color System, Typography, Brand Variables
   ============================================ */

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

:root {
  /* ── Color Palette ── */
  --color-primary:      #243A4A;
  --color-secondary:    #344B3F;
  --color-accent:       #E6B85C;
  --color-accent-2:     #A94A3F;
  --color-bg:           #F1F2EE;
  --color-bg-contrast:  #3B4147;
  --color-text:         #222629;
  --color-text-light:   #6B7280;
  --color-text-muted:   rgba(34,38,41,0.55);
  --color-white:        #FFFFFF;
  --color-border:       rgba(36,58,74,0.12);
  --color-border-light: rgba(241,242,238,0.18);

  /* ── Gradients ── */
  --grad-hero:      linear-gradient(135deg, #243A4A 0%, #344B3F 55%, #3B4147 100%);
  --grad-bg-light:  linear-gradient(180deg, #F1F2EE 0%, #E3E5DF 100%);
  --grad-accent:    linear-gradient(90deg, #E6B85C 0%, #F2CF85 100%);
  --grad-nature:    linear-gradient(135deg, #344B3F 0%, #5C7A68 100%);
  --grad-overlay:   rgba(36,58,74,0.35);

  /* ── Typography ── */
  --font-primary:  'Inter', 'Manrope', sans-serif;
  --font-display:  'Manrope', 'Inter', sans-serif;
  --font-mono:     'IBM Plex Sans', monospace;

  --fs-xs:   clamp(0.7rem,  1vw,   0.8rem);
  --fs-sm:   clamp(0.85rem, 1.2vw, 0.95rem);
  --fs-base: clamp(1rem,    1.4vw, 1.05rem);
  --fs-md:   clamp(1.1rem,  1.6vw, 1.2rem);
  --fs-lg:   clamp(1.25rem, 2vw,   1.5rem);
  --fs-xl:   clamp(1.5rem,  2.5vw, 2rem);
  --fs-2xl:  clamp(2rem,    3.5vw, 2.8rem);
  --fs-3xl:  clamp(2.5rem,  4.5vw, 3.8rem);
  --fs-4xl:  clamp(3rem,    5.5vw, 5rem);
  --fs-hero: clamp(2.8rem,  6vw,   5.5rem);

  --lh-tight:   1.2;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;
  --lh-loose:   2;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Borders & Shadows ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --shadow-sm:     0 1px 3px rgba(36,58,74,0.08), 0 1px 2px rgba(36,58,74,0.06);
  --shadow-md:     0 4px 12px rgba(36,58,74,0.10), 0 2px 6px rgba(36,58,74,0.06);
  --shadow-lg:     0 10px 30px rgba(36,58,74,0.12), 0 4px 10px rgba(36,58,74,0.08);
  --shadow-xl:     0 20px 50px rgba(36,58,74,0.15), 0 8px 20px rgba(36,58,74,0.10);
  --shadow-accent: 0 8px 24px rgba(230,184,92,0.25);

  /* ── Transitions ── */
  --transition-fast:   150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base:   300ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:   500ms cubic-bezier(0.4,0,0.2,1);
  --transition-spring: 400ms cubic-bezier(0.34,1.56,0.64,1);

  /* ── Container ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --container-pad: clamp(1rem, 5vw, 3rem);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
  max-width: 100vw;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Typography Base ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-primary);
}

h1 { font-size: var(--fs-hero);  font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

p { line-height: var(--lh-relaxed); color: var(--color-text); }

.label, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}

.text-accent  { color: var(--color-accent); }
.text-primary { color: var(--color-primary); }
.text-white   { color: var(--color-white); }
.text-muted   { color: var(--color-text-muted); }
.text-light   { color: var(--color-text-light); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 32px;
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
}

.btn-primary {
  background: var(--grad-accent);
  color: var(--color-primary);
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
  background: linear-gradient(90deg, #EDC46F 0%, #F5D896 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(230,184,92,0.35);
}

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

.btn-white {
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.btn-white:hover {
  background: var(--color-bg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-ghost {
  background: rgba(255,255,255,0.1);
  color: var(--color-white);
  border-color: rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
}

.btn-sm { padding: 10px 22px; font-size: var(--fs-xs); }
.btn-lg { padding: 18px 44px; font-size: var(--fs-md); }

/* ── Tags ── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tag-accent  { background: rgba(230,184,92,0.15); color: var(--color-accent);   border: 1px solid rgba(230,184,92,0.3); }
.tag-primary { background: rgba(36,58,74,0.08);   color: var(--color-primary);  border: 1px solid rgba(36,58,74,0.15); }
.tag-red     { background: rgba(169,74,63,0.1);   color: var(--color-accent-2); border: 1px solid rgba(169,74,63,0.2); }
.tag-green   { background: rgba(52,75,63,0.1);    color: var(--color-secondary);border: 1px solid rgba(52,75,63,0.2); }

/* ── Section Label ── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}
.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-accent);
}
.section-label.dark { color: var(--color-primary); }
.section-label.dark::before { background: var(--color-primary); }

/* ── Divider ── */
.divider { width: 100%; height: 1px; background: var(--color-border); }
.divider-accent {
  width: 60px; height: 2px;
  background: var(--grad-accent);
  border-radius: var(--radius-full);
  margin: var(--space-5) 0;
}

/* ── Card Base ── */
.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }

/* ── Section Titles ── */
.section-title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-5);
}
.section-title.light { color: var(--color-white); }

.section-subtitle {
  font-size: var(--fs-md);
  color: var(--color-text-light);
  line-height: var(--lh-relaxed);
  max-width: 560px;
}
.section-subtitle.light { color: rgba(255,255,255,0.72); }

/* ── Animated Underline ── */
.animated-link { position: relative; display: inline-block; }
.animated-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: var(--color-accent);
  transition: width var(--transition-base);
}
.animated-link:hover::after { width: 100%; }

/* ── Stat Number ── */
.stat-number {
  font-family: var(--font-mono);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  line-height: 1;
}

/* ── Gov Badge ── */
.gov-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  background: rgba(230,184,92,0.12);
  border: 1px solid rgba(230,184,92,0.35);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gov-badge svg { width: 14px; height: 14px; flex-shrink: 0; }