@font-face {
  font-family: 'Funnel Display';
  src: url('../src/fonts/FunnelDisplay-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Funnel Sans';
  src: url('../src/fonts/FunnelSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Funnel Sans';
  src: url('../src/fonts/FunnelSans-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Farben */
  --bg: #0A0A0A;
  --surface: #111111;
  --border: #1A1A1A;
  --border-hover: #2A2A2A;
  --text-primary: #F2F2F2;
  --text-secondary: #959595;
  --text-tertiary: #575757;
  --accent: #F2F2F2;
  --accent-primary: #43bd9a;
  --accent-primary-hover: #55efc4;;
  --success: #43bd9a;

  /* Typografie */
  --font-display: 'Funnel Display', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Funnel Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs: 11px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 34px;
  --text-3xl: 48px;
  --text-4xl: 58px;

  --weight-display: 400;
  --weight-body: 400;
  --weight-label: 500;

  --ls-tight: 0.01em;
  --ls-label: 0.08em;
  --ls-display: -0.03em;

  --lh-display-tight: 1.05;
  --lh-display: 1.1;
  --lh-display-loose: 1.2;
  --lh-body: 1.5;
  --lh-body-tight: 1.7;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-full: 999px;

  /* Spacing */
  --space-0: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --page-padding: 24px;
  --section-padding-desktop: 100px;
  --section-padding-tablet: 80px;
  --section-padding-mobile: 60px;

  /* Animierter Gradient-Border (Button Hover) */
  --gradient-shadow: linear-gradient(
    45deg,
    var(--surface),
    var(--surface),
    #ECBE7C,
    #70F1B5,
    var(--surface),
    var(--surface),
    #71ABE9,
    #E37BC5,
    #D26AE0,
    #F1DDE7
  );
}

:root[data-theme="light"] {
  /* Farben – Light Theme */
  --bg: #F7F5F2;
  --surface: #efece6;
  --border: #E0E0E0;
  --border-hover: #C9C9C9;
  --text-primary: #141414;
  --text-secondary: #5F5F5F;
  --text-tertiary: #A0A0A0;
  --accent: #000000;

  --accent-primary: #55efc4;
  --accent-primary-hover: #43bd9a;
  --success: #43bd9a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

body {
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

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

.page {
  min-height: 100vh;
  padding-top: 72px; /* Platz für fixe Nav */
}

.container {
  max-width: 1224px;
  margin: 0 auto;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

.section {
  padding-top: var(--section-padding-desktop);
  padding-bottom: var(--section-padding-desktop);
}

@media (max-width: 1023px) {
  :root {
    /* Typografie – Tablet */
    --text-xl: 18px;
    --text-2xl: 24px;
    --text-3xl: 34px;
    --text-4xl: 48px;
    --page-padding: 16px;
  }

  .section {
    padding-top: var(--section-padding-tablet);
    padding-bottom: var(--section-padding-tablet);
  }
}

@media (max-width: 767px) {
  :root {
    /* Typografie – Mobile */
    --text-xl: 18px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 38px;
    --page-padding: 12px;
  }

  .section {
    padding-top: var(--section-padding-mobile);
    padding-bottom: var(--section-padding-mobile);
  }
}