/* ============================================================
   GS Fitness · utilities.css
   Selbstgeschriebene Utility-Schicht (kein Tailwind, kein Build).
   Jede Deklaration greift ausschliesslich auf Tokens aus tokens.css
   zu – keine arbitrary values, keine Roh-Farbwerte, kein Inline-Style.
   ============================================================ */

/* ---------- Basis ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-surface);color:var(--color-text);
  font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-relaxed);
  -webkit-font-smoothing:antialiased;text-wrap:pretty}
::selection{background:var(--color-selection);color:var(--color-text)}
img{max-width:100%}

/* Reflow: lange Strings und deutsche Komposita brechen um (320px) */
h1,h2,h3,p,li,a,span{overflow-wrap:break-word;hyphens:auto}
/* Pflicht ab --text-xl (Coding-Guidelines Kap. 5b) */
.u-fs-xl,.u-fs-2xl,.u-fs-3xl,.u-fs-display{hyphens:auto;overflow-wrap:break-word}
@media (min-width:1025px){
  h1,h2,h3,h4,h5{hyphens:none;overflow-wrap:normal;word-break:normal}
}

/* Fokus immer sichtbar */
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px;border-radius:var(--radius-xs)}

/* ---------- Display / Position ---------- */
.u-d-block{display:block}
.u-d-flex{display:flex}
.u-d-grid{display:grid}
.u-d-inline-block{display:inline-block}
.u-d-inline-flex{display:inline-flex}
.u-pos-relative{position:relative}
.u-pos-absolute{position:absolute}
.u-inset-0{inset:0}
.u-inset-blob{inset:calc(var(--s-5) * -1) var(--s-3) var(--s-3) calc(var(--s-5) * -1)}
.u-top-0{top:0}
.u-top-8{top:var(--s-8)}
.u-top-20{top:var(--s-20)}
.u-lft-0{left:0}
.u-rgt-0{right:0}
.u-bot-12{bottom:var(--s-12)}
.u-bot-hair{bottom:calc(var(--border-hair) * -1)}
.u-lft-blob{left:8%}
.u-lft-blob-neg{left:calc(var(--s-21) * -1)}
.u-rgt-blob-neg{right:calc(var(--s-10) * -1)}
.u-ov-hidden{overflow:hidden}
.u-z-0{z-index:var(--z-base)}
.u-z-1{z-index:var(--z-raised)}
.u-z-2{z-index:var(--z-content)}

/* ---------- Flex / Grid ---------- */
.u-fd-column{flex-direction:column}
.u-fwrap-wrap{flex-wrap:wrap}
.u-flex-1{flex:1}
.u-flex-none{flex:none}
.u-ai-center{align-items:center}
.u-ai-start{align-items:start}
.u-ai-stretch{align-items:stretch}
.u-ai-baseline{align-items:baseline}
.u-ai-flex-start{align-items:flex-start}
.u-ai-flex-end{align-items:flex-end}
.u-jc-center{justify-content:center}
.u-jc-between{justify-content:space-between}
/* Mobil ist der query-freie Default: eine Spalte. Stufen kommen per min-width. */
.u-gtc-2,.u-gtc-3,.u-gtc-4,.u-gtc-split-media{grid-template-columns:1fr}
.u-gap-2{gap:var(--s-2)}
.u-gap-3{gap:var(--s-3)}
.u-gap-4{gap:var(--s-4)}
.u-gap-6{gap:var(--s-6)}
.u-gap-12{gap:var(--s-12)}

/* ---------- Groessen ---------- */
.u-w-100{width:100%}
.u-h-100{height:100%}
.u-h-auto{height:auto}
.u-w-fit{width:fit-content}
.u-w-hair{width:var(--border-hair)}
.u-w-10{width:var(--size-icon)}
.u-h-10{height:var(--size-icon)}
.u-h-7{height:var(--s-7)}
.u-h-18{height:var(--s-18)}
.u-w-blob-sm{width:var(--size-blob-sm)}
.u-h-blob-sm{height:var(--size-blob-sm)}
.u-w-blob-md{width:var(--size-blob-md)}
.u-h-blob-md{height:var(--size-blob-md)}
.u-w-blob-lg{width:var(--size-blob-lg)}
.u-h-blob-lg{height:var(--size-blob-lg)}
.u-w-blob-xl{width:var(--size-blob-xl)}
.u-h-blob-xl{height:var(--size-blob-xl)}
.u-mw-page{max-width:var(--width-page)}
.u-mw-nav{max-width:var(--width-nav)}
.u-mw-narrow{max-width:var(--width-narrow)}
.u-mw-intro{max-width:var(--width-intro)}
.u-mw-media{max-width:var(--width-media)}
.u-mw-hero{max-width:var(--width-hero-card)}
.u-mw-img{max-width:var(--width-img)}
.u-mw-brand{max-width:var(--width-brand)}
.u-mh-media{min-height:var(--height-media)}
.u-mh-hero{min-height:var(--height-hero)}
.u-of-cover{object-fit:cover}
.u-objp-center{object-position:center}
.u-objp-upper{object-position:center 30%}

/* ---------- Abstand (4px-Raster, ausschliesslich Tokens) ---------- */
.u-m-0{margin:0}
.u-m-center{margin:0 auto}
.u-m-be-2{margin:0 0 var(--s-2)}
.u-m-be-4{margin:0 0 var(--s-4)}
.u-m-be-5{margin:0 0 var(--s-5)}
.u-m-be-6{margin:0 0 var(--s-6)}
.u-m-be-8{margin:0 0 var(--s-8)}
.u-m-be-12{margin:0 0 var(--s-12)}
.u-m-bs-3{margin:var(--s-3) 0 0}
.u-m-bs-6{margin:var(--s-6) 0 0}
.u-m-bs-8{margin:var(--s-8) 0 0}
.u-mb-2{margin-bottom:var(--s-2)}
.u-mb-4{margin-bottom:var(--s-4)}
.u-mb-6{margin-bottom:var(--s-6)}
.u-mb-8{margin-bottom:var(--s-8)}
.u-mb-12{margin-bottom:var(--s-12)}
.u-mt-6{margin-top:var(--s-6)}
.u-mt-8{margin-top:var(--s-8)}
.u-mt-12{margin-top:var(--s-12)}
/* zulaessige Ausnahme: 1px-Korrektur zur optischen Ausrichtung von Icons */
.u-mt-hair{margin-top:var(--border-hair)}
.u-ml-4{margin-left:var(--s-4)}
.u-p-0{padding:0}
.u-p-2-4{padding:var(--s-2) var(--s-4)}
.u-p-3-5{padding:var(--s-3) var(--s-5)}
.u-p-4-5{padding:var(--s-4) var(--s-5)}
.u-p-6-8{padding:var(--s-6) var(--s-8)}
.u-p-8{padding:var(--s-8)}
.u-p-12{padding:var(--s-12)}
.u-p-12-8{padding:var(--s-12) var(--space-gutter)}
.u-p-22-14{padding:var(--s-22) var(--s-14)}
.u-p-section{padding:var(--space-section) var(--space-gutter)}
.u-pl-3{padding-left:var(--s-3)}
.u-pt-4{padding-top:var(--s-4)}

/* ---------- Farbe: Text ---------- */
.u-c-text{color:var(--color-text)}
.u-c-muted{color:var(--color-text-muted)}
.u-c-body{color:var(--color-text-body)}
.u-c-subtle{color:var(--color-text-subtle)}
.u-c-accent{color:var(--color-accent)}
.u-c-accent-invert{color:var(--color-accent-invert)}
.u-c-invert{color:var(--color-text-invert)}
.u-c-invert-strong{color:var(--color-text-invert-strong)}
.u-c-invert-muted{color:var(--color-text-invert-muted)}
.u-c-invert-subtle{color:var(--color-text-invert-subtle)}
.u-c-invert-faint{color:var(--color-text-invert-faint)}
.u-c-inherit{color:inherit}

/* ---------- Farbe: Flaeche ---------- */
.u-bg-base{background:var(--color-surface)}
.u-bg-alt{background:var(--color-surface-alt)}
.u-bg-soft{background:var(--color-accent-soft)}
.u-bg-dark{background:var(--color-surface-dark)}
.u-bg-action{background:var(--color-action)}
.u-bg-transparent{background:transparent}
.u-bg-glass-strong{background:var(--color-surface-glass-strong)}
.u-bg-invert-soft{background:var(--color-surface-invert-soft)}
.u-bg-invert-wash{background:var(--color-surface-invert-wash)}
.u-bg-accent-wash{background:var(--color-accent-wash)}
.u-bg-divider{background:var(--color-line-divider)}
.u-bg-grad-brand{background:var(--gradient-brand)}
.u-bg-grad-accent{background:var(--gradient-accent)}
.u-bg-grad-scrim{background:var(--gradient-scrim)}

/* ---------- Rahmen / Radius / Schatten ---------- */
.u-bd-0{border:0}
.u-bd-soft{border:var(--border-hair) solid var(--color-line-soft)}
.u-bd-line{border:var(--border-hair) solid var(--color-line)}
.u-bd-line-mid{border:var(--border-hair) solid var(--color-line-mid)}
.u-bd-accent-soft{border:var(--border-thick) solid var(--color-accent-soft)}
.u-bd-invert{border:var(--border-thick) solid var(--color-line-invert-strong)}
.u-bdl-action{border-left:var(--border-accent) solid var(--color-action)}
.u-bdl-accent{border-left:var(--border-accent) solid var(--color-accent)}
.u-bdl-accent-soft{border-left:var(--border-accent) solid var(--color-accent-soft)}
.u-bdt-action{border-top:var(--border-accent) solid var(--color-action)}
.u-bdt-accent{border-top:var(--border-thick) solid var(--color-line-accent)}
.u-bdt-invert{border-top:var(--border-thick) solid var(--color-line-invert-strong)}
.u-br-sm{border-radius:var(--radius-sm)}
.u-br-md{border-radius:var(--radius-md)}
.u-br-lg{border-radius:var(--radius-lg)}
.u-br-xl{border-radius:var(--radius-xl)}
.u-br-2xl{border-radius:var(--radius-2xl)}
.u-br-3xl{border-radius:var(--radius-3xl)}
.u-br-4xl{border-radius:var(--radius-4xl)}
.u-br-pill{border-radius:var(--radius-pill)}
.u-br-blob-a{border-radius:var(--radius-blob-a)}
.u-br-blob-b{border-radius:var(--radius-blob-b)}
.u-sh-card-sm{box-shadow:var(--shadow-card-sm)}
.u-sh-card-lg{box-shadow:var(--shadow-card-lg)}
.u-sh-dark{box-shadow:var(--shadow-dark)}
.u-sh-action{box-shadow:var(--shadow-action)}
.u-sh-action-sm{box-shadow:var(--shadow-action-sm)}
.u-bf-sm{backdrop-filter:blur(6px)}

/* ---------- Typografie ---------- */
.u-ff-display{font-family:var(--font-display)}
.u-fw-semi{font-weight:var(--weight-semi)}
.u-fw-bold{font-weight:var(--weight-bold)}
.u-fw-black{font-weight:var(--weight-black)}
.u-fs-sm{font-size:var(--text-sm)}
.u-fs-base{font-size:var(--text-base)}
.u-fs-md{font-size:var(--text-md)}
.u-fs-lg{font-size:var(--text-lg)}
.u-fs-xl{font-size:var(--text-xl)}
.u-fs-2xl{font-size:var(--text-2xl)}
.u-fs-3xl{font-size:var(--text-3xl)}
.u-fs-display{font-size:var(--text-display)}
.u-lh-flat{line-height:var(--leading-flat)}
.u-lh-tight{line-height:var(--leading-tight)}
.u-lh-snug{line-height:var(--leading-snug)}
.u-lh-normal{line-height:var(--leading-normal)}
.u-lh-relaxed{line-height:var(--leading-relaxed)}
.u-lh-loose{line-height:var(--leading-loose)}
.u-lsp-tight{letter-spacing:var(--tracking-tight)}
.u-lsp-tighter{letter-spacing:var(--tracking-tighter)}
.u-lsp-wide{letter-spacing:var(--tracking-wide)}
.u-ta-center{text-align:center}
.u-td-none{text-decoration:none}
.u-tt-uppercase{text-transform:uppercase}
.u-ws-nowrap{white-space:nowrap}
.u-fst-normal{font-style:normal}
.u-ls-none{list-style:none}
.u-cur-pointer{cursor:pointer}

/* ---------- Raster-Stufen: innerhalb der mobilen Spanne zweispaltig,
   volle Spaltenzahl erst im Desktop-Rahmen ---------- */
@media (min-width:641px){
  .u-gtc-2,.u-gtc-3,.u-gtc-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1025px){
  .u-gtc-3{grid-template-columns:repeat(3,1fr)}
  .u-gtc-4{grid-template-columns:repeat(4,1fr)}
  /* Begruendete Einzelentscheidung: Bild-/Textsplit leicht asymmetrisch */
  .u-gtc-split-media{grid-template-columns:.95fr 1.05fr}
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{scroll-behavior:auto}
}