:root {

/* Font sizes */
  --arpina-fs--2xs: clamp(0.75rem, 0.125vw + 0.725rem, 0.85rem);
  --arpina-fs--xs: clamp(0.825rem, 0.156vw + 0.794rem, 0.95rem);
  --arpina-fs--s: clamp(0.9rem, 0.188vw + 0.863rem, 1.05rem);
  --arpina-fs--sm: clamp(0.949rem, 0.197vw + 0.909rem, 1.106rem);
  --arpina-fs--base: clamp(1rem, 0.206vw + 0.959rem, 1.165rem);
  --arpina-fs--m: clamp(1.2rem, 0.562vw + 1.087rem, 1.65rem);
  --arpina-fs--l: clamp(1.5rem, 1.062vw + 1.288rem, 2.35rem);
  --arpina-fs--xl: clamp(1.875rem, 1.281vw + 1.619rem, 2.9rem);
  --arpina-fs--2xl: clamp(2.25rem, 1.875vw + 1.875rem, 3.75rem);
  --arpina-fs--3xl: clamp(2.75rem, 2.625vw + 2.225rem, 4.85rem);
  --arpina-fs--4xl: clamp(3.361rem, 3.639vw + 2.633rem, 6.273rem);

/* Line height */
  --arpina-flh--none: 1;
  --arpina-flh--tight: 1.1;
  --arpina-flh--snug: 1.2;
  --arpina-flh--body: 1.5;
  --arpina-flh--relaxed: 1.625;
  --arpina-flh--loose: 2;

/* Spacing */
  --arpina-space--2xs: clamp(0.24rem, 0.487vw + 0.143rem, 0.63rem);
  --arpina-space--xs: clamp(0.347rem, 0.559vw + 0.235rem, 0.794rem);
  --arpina-space--s: clamp(0.5rem, 0.625vw + 0.375rem, 1rem);
  --arpina-space--sm: clamp(0.721rem, 0.673vw + 0.586rem, 1.26rem);
  --arpina-space--base: clamp(1.04rem, 0.684vw + 0.903rem, 1.587rem);
  --arpina-space--m: clamp(1.5rem, 0.625vw + 1.375rem, 2rem);
  --arpina-space--l: clamp(2rem, 1.25vw + 1.75rem, 3rem);
  --arpina-space--xl: clamp(3rem, 2.5vw + 2.5rem, 5rem);
  --arpina-space--2xl: clamp(4rem, 3.75vw + 3.25rem, 7rem);
  --arpina-space--3xl: clamp(5rem, 5vw + 4rem, 9rem);
  --arpina-space--4xl: clamp(6rem, 8.75vw + 4.25rem, 13rem);

/* Container / Wrapper widths */
  --arpina-container--2xs: 26rem;      /* 416px */
  --arpina-container--xs: 39.5rem;     /* 632px */
  --arpina-container--s: 53rem;        /* 848px */
  --arpina-container--m: 66.5rem;      /* 1064px */
  --arpina-container--base: var(--gb-container-width);
  --arpina-container--xl: 93.5rem;     /* 1496px */

/* Radius */
  --arpina-radius--xs: 0.25rem;
  --arpina-radius--s: 0.5rem;
  --arpina-radius--base: 0.75rem;
  --arpina-radius--m: 1.25rem;
  --arpina-radius--l: 2rem;
  --arpina-radius--xl: 3rem;
  --arpina-radius--2xl: 4.2rem;
  --arpina-radius--full: 100rem;

/* Border */
  --arpina-border--thin: 1px;
  --arpina-border--base: 2px;
  --arpina-border--thick: 4px;

/* Z-Index */
  --arpina-z--base: 1;
  --arpina-z--dropdown: 10;
  --arpina-z--sticky: 20;
  --arpina-z--overlay: 30;
  --arpina-z--modal: 40;
  --arpina-z--toast: 50;

/* Transitions */
  --arpina-transition--fast: 150ms;
  --arpina-transition--base: 250ms;
  --arpina-transition--slow: 400ms;

/* Easing */
  --arpina-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --arpina-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

/* Shadows */
  --arpina-shadow--small-light: 0px 16px 5px 0px rgba(20, 17, 31, 0.00), 0px 10px 4px 0px rgba(20, 17, 31, 0.00), 0px 6px 4px 0px rgba(20, 17, 31, 0.02), 0px 3px 3px 0px rgba(20, 17, 31, 0.03), 0px 1px 1px 0px rgba(20, 17, 31, 0.03);
  --arpina-shadow--medium-light: 0px 69px 19px 0px rgba(20, 17, 31, 0.00), 0px 44px 18px 0px rgba(20, 17, 31, 0.01), 0px 25px 15px 0px rgba(20, 17, 31, 0.03), 0px 11px 11px 0px rgba(20, 17, 31, 0.04), 0px 3px 6px 0px rgba(20, 17, 31, 0.05);
  --arpina-shadow--large-light: 0px 219px 61px 0px rgba(20, 17, 31, 0.00), 0px 140px 56px 0px rgba(20, 17, 31, 0.01), 0px 79px 47px 0px rgba(20, 17, 31, 0.03), 0px 35px 35px 0px rgba(20, 17, 31, 0.04), 0px 9px 19px 0px rgba(20, 17, 31, 0.05);
  --arpina-shadow--extra-large-light: 0px 536px 150px 0px rgba(20, 17, 31, 0.00), 0px 343px 137px 0px rgba(20, 17, 31, 0.01), 0px 193px 116px 0px rgba(20, 17, 31, 0.03), 0px 86px 86px 0px rgba(20, 17, 31, 0.04), 0px 21px 47px 0px rgba(20, 17, 31, 0.05);
  --arpina-shadow--small-dark: 0px 16px 4px 0px rgba(20, 17, 31, 0.00), 0px 10px 4px 0px rgba(20, 17, 31, 0.01), 0px 6px 3px 0px rgba(20, 17, 31, 0.05), 0px 3px 3px 0px rgba(20, 17, 31, 0.09), 0px 1px 1px 0px rgba(20, 17, 31, 0.10);
  --arpina-shadow--medium-dark: 0px 66px 18px 0px rgba(20, 17, 31, 0.00), 0px 42px 17px 0px rgba(20, 17, 31, 0.01), 0px 24px 14px 0px rgba(20, 17, 31, 0.05), 0px 10px 10px 0px rgba(20, 17, 31, 0.09), 0px 3px 6px 0px rgba(20, 17, 31, 0.10);
  --arpina-shadow--large-dark: 0px 219px 61px 0px rgba(20, 17, 31, 0.00), 0px 140px 56px 0px rgba(20, 17, 31, 0.01), 0px 79px 47px 0px rgba(20, 17, 31, 0.05), 0px 35px 35px 0px rgba(20, 17, 31, 0.09), 0px 9px 19px 0px rgba(20, 17, 31, 0.10);
  --arpina-shadow--extra-large-dark: 0px 536px 150px 0px rgba(20, 17, 31, 0.00), 0px 343px 137px 0px rgba(20, 17, 31, 0.01), 0px 193px 116px 0px rgba(20, 17, 31, 0.05), 0px 86px 86px 0px rgba(20, 17, 31, 0.09), 0px 21px 47px 0px rgba(20, 17, 31, 0.10);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --arpina-transition--fast: 0ms;
    --arpina-transition--base: 0ms;
    --arpina-transition--slow: 0ms;
  }
}

/* ==========================================================================
   Custom Animations Library (GenerateBlocks / Child Theme)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fade In
   -------------------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   2. Fade In Up
   -------------------------------------------------------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   3. Fade In Down
   -------------------------------------------------------------------------- */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   4. Fade In Left
   -------------------------------------------------------------------------- */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --------------------------------------------------------------------------
   5. Fade In Right
   -------------------------------------------------------------------------- */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --------------------------------------------------------------------------
   6. Fade In Words (Nützlich für gestaffelte Text-Animationen)
   -------------------------------------------------------------------------- */
@keyframes fadeInWords {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-words span {
  display: inline-block;
  opacity: 0;
  animation: fadeInWords 0.4s ease-out forwards;
}

/* Optional: Einfache Staffelung für Wörter/Elemente innerhalb eines Containers */
.fade-in-words span:nth-child(1) { animation-delay: 0.1s; }
.fade-in-words span:nth-child(2) { animation-delay: 0.2s; }
.fade-in-words span:nth-child(3) { animation-delay: 0.3s; }
.fade-in-words span:nth-child(4) { animation-delay: 0.4s; }

/* --------------------------------------------------------------------------
   7. Zoom (Zoom In)
   -------------------------------------------------------------------------- */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   8. Pulse
   -------------------------------------------------------------------------- */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}