/* ==========================================================================
   wefa Webdesign: Skalen (Radius, Abstände, Breiten, Breakpoints, Bewegung)
   Keine Farben in dieser Datei. Farben: wefa-tokens.css
   ========================================================================== */

:root {
  /* ---- Radien ------------------------------------------------------------ */
  --radius-sm:   4px;     /* Icon-Kacheln, Tabellenzellen-Markierungen, Code-Chips */
  --radius:      6px;     /* Buttons, Formularfelder, Dropdown-Einträge            */
  --radius-lg:   10px;    /* Karten, Rahmen der Demo-Seiten, Dialoge, Hinweisboxen */
  --radius-pill: 999px;   /* Filter-Chips, Tabs, Badges, Tags                      */

  /* ---- Abstände (4-px-Raster) ------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;    /* Sektionsabstand mobil          */
  --space-8: 72px;    /* Sektionsabstand Desktop        */
  --space-9: 96px;    /* Hero, große Trennungen         */

  /* ---- Breiten ----------------------------------------------------------- */
  --w-narrow:  32rem;   /* 512 px: Formulare, Dialoge, Login          */
  --w-text:    40rem;   /* 640 px: Fließtext, Blogartikel             */
  --w-content: 72rem;   /* 1152 px: Inhaltsbereich                    */
  --w-header:  80rem;   /* 1280 px: Header, Footer, Bilderwand        */
  --gutter:    clamp(1rem, 4vw, 2rem);  /* seitlicher Innenabstand    */

  /* ---- Breakpoints (in @media als feste Werte schreiben; hier für JS) ---- */
  --bp-sm: 30rem;   /*  480 px: große Handys                         */
  --bp-md: 48rem;   /*  768 px: Tablet hochkant, Menü wird Leiste    */
  --bp-lg: 64rem;   /* 1024 px: Tablet quer, Laptop                  */
  --bp-xl: 80rem;   /* 1280 px: Desktop, volle Bilderwand            */

  /* ---- Bewegung ---------------------------------------------------------- */
  --dur-fast:    120ms;   /* Farbwechsel, Fokus, Press                       */
  --dur-normal:  200ms;   /* Hover von Buttons, Karten, Links; Dropdown auf  */
  --dur-slow:    360ms;   /* Akkordeon, Bilderwand-Rahmen, Dialoge           */

  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);   /* Standard: kommt an und beruhigt sich */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);      /* Öffnen und Schließen (Höhe)          */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);    /* Leichtes Nachfedern, nur Hover-Anheben */

  --lift-sm:  -2px;   /* Karten, Buttons beim Hover         */
  --lift-md:  -6px;   /* Bilderwand-Rahmen beim Hover       */
  --float-amplitude: 4px;   /* Ruhe-Bewegung der Bilderwand (auf und ab)  */
  --float-duration:  7s;    /* eine Runde; Rahmen versetzen um je 0,8 s   */

  /* ---- Fokus ------------------------------------------------------------- */
  --focus-width:  2px;
  --focus-offset: 2px;
}

/* Bewegung reduzieren: keine Verschiebungen, kein Schweben, nur kurze Farbwechsel */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   1ms;
    --dur-normal: 1ms;
    --dur-slow:   1ms;
    --lift-sm:    0px;
    --lift-md:    0px;
    --float-amplitude: 0px;
  }
  html { scroll-behavior: auto; }
}