/**
 * Design-Tokens extrahiert aus:
 * Die Werte stammen aus der früheren GDW-Frontend- und Designarbeit.
 * Sie werden hier als Theme-Tokens gepflegt; das WordPress-Theme ist die
 * aktuelle Quelle für die ausgelieferte Gestaltung.
 */

:root {
  /* ---- Farben ---- */
  --color-primary-black: rgba(18, 18, 18, 1);
  --color-toxic: rgba(232, 255, 1, 1);
  --color-background: rgba(236, 229, 209, 1);
  --color-red: rgba(255, 0, 0, 1);

  /* ---- Typografie: Schriftart ---- */
  /* Variable Font "n27", lokal im Theme eingebunden */
  --font-family-sans: "n27", sans-serif;

  /* ---- Typografie: Font-Size-Skala (Tailwind fontSize, Wert + Line-Height) ---- */
  --fs-base: 1rem;              --lh-base: 200%;
  --fs-base-none: 1rem;         --lh-base-none: 100%;
  --fs-base-normal: 1rem;       --lh-base-normal: 150%;
  --fs-8-normal: 0.5rem;        --lh-8-normal: 150%;
  --fs-10: 0.625rem;            --lh-10: 100%;
  --fs-10-normal: 0.625rem;     --lh-10-normal: 150%;
  --fs-12: 0.75rem;             --lh-12: 100%;
  --fs-14: 0.875rem;            --lh-14: 150%;
  --fs-24: 1.5rem;              --lh-24: 150%;
  --fs-32: 2rem;                --lh-32: 150%;
  --fs-40: 2.5rem;              --lh-40: 100%;
  --fs-64: 4rem;                --lh-64: 100%;
  --fs-80: 5rem;                --lh-80: 100%;

  /* ---- Typografie: Letter-Spacing-Skala ---- */
  --ls-medium: 0.03rem;        /* 0.48px */
  --ls-wide: 0.04em;           /* 0.64px */
  --ls-128: 0.08rem;           /* 1.28px */
  --ls-tiny: 0.1rem;           /* 1.6px */
  --ls-intermediate: 0.16rem;  /* 2.56px */
  --ls-small: 0.2rem;          /* 3.2px */

  /* ---- Breakpoints (Referenzwerte, nicht per CSS Custom Property nutzbar in @media,
         hier nur zur Dokumentation — im WP-Theme als SCSS-Variablen/Tailwind-Screens abbilden) ---- */
  --breakpoint-sm: 376px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1440px;
  --breakpoint-2xl: 1920px;

  /* ---- Border ---- */
  --border-width-1: 1px;

  /* ---- Spacing: Margin-Sonderwerte ---- */
  --margin-custom-11px: 0.688rem;
  --margin-custom-15px: 0.938rem;
  --margin-15: 3.75rem;
  --margin-18: 4.5rem;
  --margin-19: 4.75rem;
  --margin-23: 5.75rem;

  /* ---- Spacing: Padding-Sonderwerte ---- */
  --padding-custom-7px: 0.438rem;
  --padding-custom-11px: 0.688rem;
  --padding-11: 2.75rem;
  --padding-15: 3.75rem;
  --padding-28: 7rem;
  --padding-30: 7.5rem;
  --padding-44: 11rem;

  /* ---- Spacing: Gap-Sonderwerte ---- */
  --gap-custom-7px: 0.438rem;
  --gap-custom-9px: 0.563rem;
  --gap-custom-11px: 0.688rem;
  --gap-11: 2.75rem;
  --gap-19: 4.75rem;

  /* Abstand vom Ende eines Infotexts/Textblocks zum Folgeabschnitt */
  --content-follow-gap: 2.25rem;
  --content-follow-gap-compact: 1.375rem;

  /* ---- Inset ---- */
  --inset-22: 5.5rem;

  /* ---- Fluid Spacing (aus globals.css) ---- */
  --px-md: clamp(3rem, calc(48 / 744 * 100vw), 7rem);

  /* ---- Transition-Timing ---- */
  --transition-duration-300-500: 500ms, 300ms;
  --transition-duration-300-1000: 500ms, 1000ms;
}

/* ---- Grid-Templates (Tailwind gridTemplateColumns) ----
   Exakte Spaltendefinitionen für Layout-Wiederverwendung.
   Angewendet z.B. in Themen-/Personen- und Interview-Layouts, siehe LAYOUTS.md */
.grid-2xl-single { grid-template-columns: 480px repeat(5, minmax(0, 1fr)); }
.grid-xl-single  { grid-template-columns: 360px repeat(6, minmax(0, 1fr)); }
.grid-lg-single  { grid-template-columns: 427px repeat(5, minmax(0, 1fr)); }
.grid-md-single  { grid-template-columns: 288px repeat(5, minmax(0, 1fr)); }
.grid-xl-interview-static {
  grid-template-columns: minmax(0, 1fr) minmax(188px, 1fr) repeat(4, minmax(0, 1fr));
}

/* ---- Keyframe-Animationen ---- */
@keyframes spring-down {
  0%   { transform: translateY(-100%); }
  40%  { transform: translateY(0%); }
  50%  { transform: translateY(1%); }
  100% { transform: translateY(0%); }
}

@keyframes spring-up {
  0%   { transform: translateY(100vh); }
  40%  { transform: translateY(0%); }
  50%  { transform: translateY(-1vh); }
  100% { transform: translateY(0%); }
}

@keyframes accordion-spring-up {
  0%   { margin-bottom: 0; }
  30%  { margin-bottom: -1rem; }
  100% { margin-bottom: 0; }
}

/* Nutzung: animation: spring-down 1000ms ease-out;
            animation: spring-up 1000ms ease-out;
            animation: accordion-spring-up 700ms 400ms ease-out; */