:root {
  
  --color-lila: #760b5a;
  --color-gruen: #bccf00;
  --color-grau: #878787;
  --color-hellgrau: #fafafa;
  --color-weiss: #ffffff;
  --color-schwarz: #000000;

  
  --color-primary: var(--color-lila);
  --color-accent: var(--color-gruen);
  --color-text: var(--color-schwarz);
  --color-text-muted: var(--color-grau);
  --color-surface: var(--color-weiss);
  --color-surface-alt: var(--color-hellgrau);

  
  --bs-primary: var(--color-lila);
  --bs-body-color: var(--color-schwarz);
  --bs-body-font-family: "Barlow", sans-serif;
  --bs-link-color: var(--color-lila);
  --bs-link-hover-color: var(--color-gruen);

  
  --font-heading: "DM Serif Display", serif;
  --font-body: "Barlow", sans-serif;

  
  --fs-hero: 4.6875rem; 
  --fs-titel: 3.4375rem; 
  --fs-titel-2: 1.5625rem; 
  --fs-text-titel: 1.25rem; 
  --fs-text: 1.25rem; 
  --fs-zitat: 3.4375rem; 

  
  --lh-titel: 1;
  --lh-text: 1.5;

  
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 5rem;
  --space-8: 6.875rem; 
  --space-175: 11rem;

  
  --radius-pill: 50px;
  --radius-sm: 8px;

  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);

  
  --transition-base: 0.25s ease-out;

  
  --aos-duration: 700ms;

  
  --container-edge: 0.75rem;
}

@media (min-width: 576px) {
  :root { --container-edge: max(0.75rem, calc((100vw - 540px) / 2 + 0.75rem)); }
}
@media (min-width: 768px) {
  :root { --container-edge: max(0.75rem, calc((100vw - 720px) / 2 + 0.75rem)); }
}
@media (min-width: 992px) {
  :root { --container-edge: max(0.75rem, calc((100vw - 960px) / 2 + 0.75rem)); }
}
@media (min-width: 1200px) {
  :root { --container-edge: max(0.75rem, calc((100vw - 1140px) / 2 + 0.75rem)); }
}
@media (min-width: 1400px) {
  :root { --container-edge: max(0.75rem, calc((100vw - 1320px) / 2 + 0.75rem)); }
}