/* ==========================================================================
   YELS – Design-Tokens
   Alle Farben, Schriften, Abstände und Rundungen stehen NUR hier.
   Wer die Optik der ganzen Seite ändern will, ändert diese Datei.
   ========================================================================== */

:root {
  /* --- Farben -------------------------------------------------------------
     Pflaume auf Beige. Kein reines Schwarz und kein reines Weiß: die
     Flächen sind warm und sandig wie das Studio selbst, die Akzente bleiben
     pflaumig. Dadurch wirkt die Seite ruhig statt zusammengewürfelt.
  ---------------------------------------------------------------------- */
  --paper:        #FAF6EF;   /* Standard-Hintergrund, warmes Beige          */
  --paper-soft:   #F3ECE1;   /* für abgesetzte Abschnitte                   */
  --paper-warm:   #E9DFD0;   /* Karten auf abgesetztem Grund                */

  --ink:          #2A1F2B;   /* Text und Buttons, Aubergine statt Schwarz   */
  --ink-soft:     #4C3D4D;   /* Fließtext in großen Blöcken                 */
  --ink-muted:    #7B6C7C;   /* Nebeninfos, Labels                          */

  --accent-soft:  #F2E8E6;   /* sehr helle Akzentfläche                     */
  --accent-mid:   #DFC9D6;   /* Akzentfläche: Kacheln, Siegel, Marker       */
  --accent:       #8A6076;   /* Akzent: Ringe, Sterne, Hover                */
  --accent-deep:  #6E4A5E;   /* dunkler: Button-Füllung, gedrückter Zustand */

  --deep:         #3B2B3C;   /* dunkle Abschnitte – kein Sprung auf Schwarz */

  --line:         #E6DCCC;   /* feine Trennlinien                           */
  --line-strong:  #D2C4AF;

  --ok:           #3F7A63;
  --warn:         #A64A55;

  /* Halbtransparente Varianten für Verläufe und Schleier */
  --glow-a:       rgba(138, 96, 118, .16);
  --glow-b:       rgba(223, 201, 214, .40);

  /* --- Schrift ---------------------------------------------------------- */
  --font-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Typo-Skala – fließend zwischen Handy und Desktop */
  --fs-hero:  clamp(2.5rem, 7vw, 6.2rem);
  --fs-h1:    clamp(2.4rem, 6vw, 4.6rem);
  --fs-h2:    clamp(1.9rem, 4.2vw, 3.2rem);
  --fs-h3:    clamp(1.25rem, 2vw, 1.6rem);
  --fs-h4:    1.05rem;
  --fs-lead:  clamp(1.02rem, 1.4vw, 1.2rem);
  --fs-body:  1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;

  /* --- Abstände --------------------------------------------------------- */
  --gap-xs: .5rem;
  --gap-s:  .875rem;
  --gap-m:  1.5rem;
  --gap-l:  2.5rem;
  --gap-xl: 4rem;
  --section-y: clamp(4.5rem, 9vw, 9rem);   /* vertikaler Abstand je Abschnitt */
  --wrap:      1280px;                      /* max. Inhaltsbreite              */
  --wrap-narrow: 760px;
  --pad-x:     clamp(1.25rem, 5vw, 3.5rem); /* seitlicher Innenabstand         */
  --header-h:  84px;

  /* --- Form ------------------------------------------------------------- */
  --radius-s:  6px;
  --radius-m:  14px;
  --radius-l:  26px;
  --radius-pill: 999px;

  /* Schatten tragen den Pflaumenton statt neutralem Schwarz – sonst wirken
     sie wie ein grauer Fleck auf farbigem Grund. */
  --shadow-soft:  0 2px 10px rgba(42, 31, 43, .06);
  --shadow-card:  0 18px 50px -24px rgba(42, 31, 43, .38);
  --shadow-lift:  0 28px 60px -28px rgba(42, 31, 43, .45);
  --shadow-glow:  0 20px 60px -30px rgba(138, 96, 118, .70);

  /* --- Bewegung --------------------------------------------------------- */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  /* Federung: schwingt leicht über das Ziel hinaus und zurück. Gibt
     Knöpfen und Karten Gewicht, statt sie stur hinzuschieben. */
  --ease-spring: cubic-bezier(.34, 1.42, .64, 1);
  --t-fast:    .18s;
  --t-mid:     .4s;
  --t-slow:    .8s;

  /* --- Ebenen ----------------------------------------------------------- */
  --z-korn:     1;     /* Kornschleier über der Seite   */
  --z-header:   100;
  --z-menue:    99;
  --z-klapp:    120;
}