/* STUDIO KLARA — Gestaltungs-Token.
   Keine Magic Numbers im Markup: Farbe, Typo-Skala, Raster, Dauer und Easing
   stehen ausschliesslich hier. */

@font-face{
  font-family:"Fraunces";
  src:url("font/fraunces-var.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"InterVar";
  src:url("font/inter-var.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* --- Farbe: drei Grundtoene, ein Akzent. Dunkel, konsequent durchgezogen. --- */
  --tinte:#14120F;          /* warmes Off-Black, Grundflaeche */
  --tinte-2:#1D1A16;        /* eine Stufe heller, fuer abgesetzte Flaechen */
  --papier:#F2EFE8;         /* gebrochenes Weiss, Fliesstext  16,4:1 auf Tinte */
  --rauch:#9A948A;          /* zurueckgenommener Text          6,30:1 auf Tinte */
  --ton:#C4623F;            /* Akzent, gebrannter Ton          4,64:1 auf Tinte */
  --kante:#332E27;          /* Trennlinien */

  /* --- Typografie --- */
  --schrift-display:"Fraunces",Georgia,"Times New Roman",serif;
  --schrift-text:"InterVar",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    Helvetica,Arial,sans-serif;
  --t-xs:clamp(.72rem,.68rem + .18vw,.8rem);
  --t-s:clamp(.86rem,.82rem + .2vw,.95rem);
  --t-m:clamp(1rem,.95rem + .28vw,1.13rem);
  --t-l:clamp(1.3rem,1.1rem + 1vw,1.8rem);
  --t-xl:clamp(1.9rem,1.4rem + 2.6vw,3.4rem);
  --t-2xl:clamp(2.6rem,1.6rem + 5vw,6rem);
  --t-mega:clamp(3.4rem,1rem + 12vw,11rem);
  --zeile-eng:1.06;
  --zeile-mittel:1.28;
  --zeile-text:1.62;

  /* --- Raster und Raum --- */
  --rand:clamp(1.25rem,5vw,4.5rem);
  --spalte:minmax(0,1fr);
  --r-1:.5rem;  --r-2:1rem;   --r-3:1.75rem;
  --r-4:clamp(2.4rem,5vw,4rem);
  --r-5:clamp(4rem,9vw,8rem);
  --r-6:clamp(6rem,14vw,13rem);
  --strich:1px;

  /* --- Bewegung: feste Skala, keine frei erfundenen Zahlen ---
     Grosse Flaechen bewegen sich langsamer als kleine. */
  --d-instant:100ms;   /* Hover, Tap-Feedback */
  --d-fast:200ms;      /* Knoepfe, kleine Zustandswechsel */
  --d-base:320ms;      /* Karten, Reveals, Menuepunkte */
  --d-slow:560ms;      /* Sektionswechsel, grosse Flaechen */
  --d-epic:900ms;      /* Hero-Intro, einmalig */
  --e-aus:cubic-bezier(.22,1,.36,1);      /* Eintritt */
  --e-ein:cubic-bezier(.64,0,.78,0);      /* Austritt */
  --e-beides:cubic-bezier(.65,0,.35,1);   /* bleibt im Sichtfeld */
  --stagger:56ms;                          /* zwischen Geschwistern */
}

@media (prefers-reduced-motion:reduce){
  :root{
    --d-instant:0ms; --d-fast:120ms; --d-base:140ms;
    --d-slow:150ms;  --d-epic:150ms; --stagger:0ms;
    --e-aus:ease; --e-ein:ease; --e-beides:ease;
  }
}