/* =============================================================
   origin coaching — Design-Tokens
   Eine Quelle für alle neun Seiten. Wer hier etwas ändert,
   ändert es überall — genau dafür ist diese Datei da.
   Stand: 1. August 2026
   ============================================================= */

:root{

  /* ---- Farben ------------------------------------------------
     Creme trägt, Tinte schreibt, Ziegel führt, Honig akzentuiert.
     Honig ist bewusst NUR für Handlungsaufforderungen und den
     Geschenk-Baustein gedacht — sonst verliert er seine Wirkung. */
  --cream-50:#FDF7E7;
  --cream-100:#FAEED1;
  --cream-200:#F4E0AE;
  --cream-300:#EBCE85;

  --honey-400:#E8A94A;
  --honey-500:#D89426;
  --honey-700:#97610B;   /* korrigiert: war #A06A14, Kontrast 4,30 */
  --honey-300:#F8B95A;   /* für Text auf dunklem Grund, Kontrast 4,88 */

  --sage-100:#E5E7D4;
  --sage-500:#7E8D63;
  --sage-700:#56633F;

  --brick-500:#B23A22;
  --brick-600:#9A2E1A;
  --brick-700:#7A2412;

  --ink-900:#3D2618;
  --ink-800:#4D3520;     /* war nirgends definiert, wurde aber benutzt */
  --ink-700:#5E4429;
  --ink-500:#846847;     /* korrigiert: war #8A6E4D, Kontrast 4,44 */
  --ink-300:#B9A48A;

  /* ---- Schriftgrößen — acht Stufen ---------------------------
     Bewusst acht statt der vorgeschlagenen sieben: mit sieben
     fielen Kartenüberschrift und Abschnittsüberschrift auf
     dieselbe Größe, das hätte die Hierarchie eingeebnet. */
  --fs-1:12px;    /* Label, Eyebrow, Kleingedrucktes */
  --fs-2:14px;    /* Meta, Fußzeile, Bildunterschrift */
  --fs-3:16px;    /* Fließtext */
  --fs-4:19px;    /* Lead, hervorgehobener Absatz */
  --fs-5:22px;    /* Kartenüberschrift */
  --fs-6:28px;    /* Abschnittsüberschrift klein */
  --fs-7:42px;    /* Abschnittsüberschrift */
  --fs-8:64px;    /* Display */

  /* ---- Zeilenhöhen ------------------------------------------- */
  --lh-tight:1.08;   /* Display */
  --lh-snug:1.2;     /* Überschriften */
  --lh-normal:1.6;   /* Fließtext */
  --lh-loose:1.7;    /* lange Absätze */

  /* ---- Abstände — Basis 4 ------------------------------------ */
  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-6:24px;  --sp-8:32px;  --sp-12:48px; --sp-16:64px;
  --sp-24:96px; --sp-32:128px;

  /* ---- Radien — drei Stufen ---------------------------------- */
  --r-sm:8px;      /* Eingaben, Labels, kleine Flächen */
  --r-lg:18px;     /* Karten, Bilder, Bänder */
  --r-full:999px;  /* Schaltflächen, Pillen */

  /* ---- Höhenstufen — gleiche Lichtrichtung ------------------- */
  --sh-1:0 1px 2px rgba(61,38,24,.07);
  --sh-2:0 10px 28px -20px rgba(61,38,24,.34);
  --sh-3:0 20px 44px -26px rgba(61,38,24,.42);

  /* ---- Rhythmus ---------------------------------------------- */
  --section-y:var(--sp-24);        /* neues Thema */
  --section-y-tight:var(--sp-16);  /* gehört zum Vorherigen */
  --section-y-wide:var(--sp-32);   /* deutlicher Einschnitt */

  /* ---- Bewegung ---------------------------------------------- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.22s;
}

/* Wer Bewegung reduziert haben möchte, bekommt keine. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---- Sichtbarer Tastaturfokus auf allen Seiten ---------------
   Vorher gab es keinen — wer mit Tab navigiert, sah nicht,
   wo er steht. */
:focus-visible{
  outline:2px solid var(--brick-500);
  outline-offset:3px;
  border-radius:2px;
}
:focus:not(:focus-visible){outline:none}

/* ---- Auftakt beim Laden --------------------------------------
   Ein einziger, gestaffelter Moment statt vieler Effekte. */
@keyframes rise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.rise{animation:rise .5s var(--ease) both}
.rise-1{animation-delay:.04s}
.rise-2{animation-delay:.10s}
.rise-3{animation-delay:.16s}
.rise-4{animation-delay:.22s}