/* Raster, Abstände, Radius, Linien, Motion, Fokus (Briefing 3.1, 3.6–3.8, 5, 6.2) */
:root {
  --grid-columns: 12;
  /* Fluid: 1920 px = Screen-Maß (194 / 40 / 91). Darunter skaliert das Raster proportional bis 1024 px. */
  --grid-margin: clamp(48px, 10.104cqw, 194px);
  --grid-gutter: clamp(24px, 2.083cqw, 40px);
  --grid-container: calc(100cqw - 2 * var(--grid-margin));
  --grid-col: calc((var(--grid-container) - 11 * var(--grid-gutter)) / 12);
  --span-3: calc(3 * var(--grid-col) + 2 * var(--grid-gutter));
  --span-4: calc(4 * var(--grid-col) + 3 * var(--grid-gutter));
  --span-5: calc(5 * var(--grid-col) + 4 * var(--grid-gutter));
  --span-6: calc(6 * var(--grid-col) + 5 * var(--grid-gutter));
  --span-7: calc(7 * var(--grid-col) + 6 * var(--grid-gutter));
  --span-8: calc(8 * var(--grid-col) + 7 * var(--grid-gutter));
  --span-10: calc(10 * var(--grid-col) + 9 * var(--grid-gutter));
  --span-12: var(--grid-container);

  /* 4-px-Basis */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-15: 60px; --space-20: 80px; --space-30: 120px;

  --section-pad: 120px;
  --module-gap: 120px;
  --row-gap: 120px;
  --card-gap: 60px;
  --entry-gap: 60px;
  --list-rule-gap: 40px;
  --text-media-gap: 60px;
  --card-pad: 40px;          /* * Sessions/Sprints */
  --card-pad-teaser: 30px;   /* * Teaser 01/02 seitlich */

  --radius-image: 3px;
  --radius-tile: 3px;
  --radius-card: 3px;        /* * laut Screen */
  --radius-button: 3px;

  --rule-width: 2px;
  --button-border: 2px;
  --button-height: 50px;     /* * */
  --button-height-l: 54px;   /* * Hero */
  --button-height-nav: 40px; /* * */
  --underline-offset: 6px;

  --nav-sticky-height: 80px; /* Vorschlag, Offset für Sticky-Spalten */
  --sticky-offset: calc(var(--nav-sticky-height) + 40px);

  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 250ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --shift-arrow: 10px;

  --focus-width: 2px;
  --focus-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --shift-arrow: 0px; --motion-base: 0ms; --motion-slow: 0ms; }
}
html { scroll-padding-top: var(--nav-sticky-height); }