/* =============================================================
   Basis: Reset, Typografie, Raster – beide Marken
   Werte nur über Tokens (tokens.css). Keine festen Abschnittshöhen.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--c-bg);
  color: var(--c-text);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], .px-list-reset { list-style: none; padding: 0; }
a { color: inherit; }
a:hover { color: var(--c-link-hover); }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
[data-brand="sport"] :focus-visible { outline-color: var(--c-accent); }
[data-brand="business"] :focus-visible { outline-color: var(--c-text); }
button { font: inherit; color: inherit; }

.px-skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--c-accent); color: var(--c-on-accent);
  padding: var(--space-3) var(--space-5); font-weight: 700; text-decoration: none;
}
.px-skip:focus { top: var(--space-3); }
@media (max-width: 767px) { .px-hide-m { display: none !important; } }
@media (min-width: 768px) { .px-show-m { display: none !important; } }
.px-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Überschriften ---------- */
.px-h1, .px-display, .px-h2, .px-h2-l, .px-h3, .px-h3-l, .px-h3-s, .px-figure {
  font-weight: var(--hl-weight);
  line-height: var(--hl-leading);
  letter-spacing: var(--hl-tracking);
}
.px-display { font-size: var(--fs-display); font-stretch: var(--hl-stretch-1); font-variation-settings: "wdth" var(--hl-wdth-1); }
.px-h1      { font-size: var(--fs-h1);      font-stretch: var(--hl-stretch-1); font-variation-settings: "wdth" var(--hl-wdth-1); }
.px-h2      { font-size: var(--fs-h2);      font-stretch: var(--hl-stretch-2); font-variation-settings: "wdth" var(--hl-wdth-2); }
.px-h2-l    { font-size: var(--fs-h2-l);    font-stretch: var(--hl-stretch-2); font-variation-settings: "wdth" var(--hl-wdth-2); }
.px-h3-l    { font-size: var(--fs-h3-l);    font-stretch: 72%; font-variation-settings: "wdth" 72; }
.px-h3      { font-size: var(--fs-h3);      font-stretch: var(--hl-stretch-3); font-variation-settings: "wdth" var(--hl-wdth-3); }
.px-h3-s    { font-size: var(--fs-h3-s);    font-stretch: 78%; font-variation-settings: "wdth" 78; }
.px-h-sub   { font-size: 32px; font-weight: 700; font-stretch: 80%; font-variation-settings: "wdth" 80; line-height: var(--hl-leading); letter-spacing: var(--hl-tracking); }
.px-figure  { font-size: var(--fs-figure);  font-stretch: var(--fig-stretch); font-variation-settings: "wdth" var(--fig-wdth); line-height: var(--fig-leading); }

/* ---------- Text ---------- */
.px-lead   { font-size: clamp(18px, calc(16.51px + 0.381vw), 22px); line-height: 1.4; }
@media (min-width: 1024px) { .px-lead { line-height: 1.35; } }
.px-body-l { font-size: var(--fs-body-l); line-height: var(--lh-body); }
.px-body   { font-size: var(--fs-body); line-height: var(--lh-body); }
.px-body-s { font-size: var(--fs-body-s); line-height: var(--lh-tight); }
.px-small  { font-size: var(--fs-small); line-height: var(--lh-body); }
.px-meta   { font-size: var(--fs-meta); line-height: var(--lh-body); font-weight: 600; }
.px-strong { font-weight: 700; }
.px-muted  { color: var(--c-text-2); }
.px-label  { font-size: var(--fs-label, 15px); font-weight: 700; text-transform: uppercase; letter-spacing: var(--label-tracking, 0.04em); }
.px-measure   { max-width: 620px; }
.px-measure-s { max-width: 460px; }
.px-stack   { display: flex; flex-direction: column; gap: var(--gap, var(--space-5)); }

/* ---------- Abschnitt und Raster ---------- */
.px-section {
  position: relative;
  padding: var(--section-y) var(--gutter);
  background: var(--sec-bg, var(--c-bg));
}
.px-section--l    { padding-block: var(--section-y-l); }
.px-section--flush{ padding-block: 0; }
.px-section--surface { --sec-bg: var(--c-surface); }
.px-section--dark    { --sec-bg: var(--c-surface-dark, #1F2023); color: #FFFFFF; --c-text: #FFFFFF; --c-text-2: var(--c-text-inverse-2, #B4B8BD); --c-line: var(--c-line-2, #3A3D42); }
.px-section--line { border-top: 1px solid var(--c-line); }
.px-section > .px-marker--edge { position: absolute; top: calc(var(--marker-m) / -2); left: var(--gutter); }

.px-container { max-width: var(--container); margin-inline: auto; }
.px-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--row-gap, var(--col-gap));
  max-width: var(--container);
  margin-inline: auto;
}
.px-grid > * { min-width: 0; grid-column: 1 / -1; }
@media (min-width: 768px) {
  .px-grid > .c-1  { grid-column: span 1; }  .px-grid > .c-2  { grid-column: span 2; }
  .px-grid > .c-3  { grid-column: span 3; }  .px-grid > .c-4  { grid-column: span 4; }
  .px-grid > .c-5  { grid-column: span 5; }  .px-grid > .c-6  { grid-column: span 6; }
  .px-grid > .c-7  { grid-column: span 7; }  .px-grid > .c-8  { grid-column: span 8; }
  .px-grid > .c-9  { grid-column: span 9; }  .px-grid > .c-10 { grid-column: span 10; }
  .px-grid > .c-11 { grid-column: span 11; } .px-grid > .c-12 { grid-column: span 12; }
  .px-grid > .s-1  { grid-column-start: 2; }  /* Versatz um eine Spalte */
}
/* Tablet: schmale Spalten (≤ 4) paarweise */
@media (min-width: 768px) and (max-width: 1023px) {
  .px-grid > .c-2, .px-grid > .c-3, .px-grid > .c-4 { grid-column: span 6; }
  .px-grid > .c-5, .px-grid > .c-7 { grid-column: span 6; }
}

/* ---------- Bilder ---------- */
.px-media {
  position: relative;
  overflow: hidden;
  background: #000000;
  aspect-ratio: var(--ratio-m, var(--ratio, auto));
}
@media (min-width: 768px) { .px-media { aspect-ratio: var(--ratio, auto); } }
.px-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos-m, var(--pos, 50% 50%));
}
@media (min-width: 768px) { .px-media img { object-position: var(--pos, 50% 50%); } }
.px-media.is-contain { background: transparent; }
.px-media.is-contain img { object-fit: contain; }
.px-media--fill { position: absolute; inset: 0; aspect-ratio: auto; }

/* ---------- Bedienelemente ---------- */
.px-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--btn-h); padding: 0 var(--btn-pad-x);
  background: var(--c-accent); color: var(--c-on-accent);
  font-size: var(--fs-button); font-weight: var(--btn-weight);
  text-decoration: none; border: 0; border-radius: var(--btn-radius); cursor: pointer;
}
.px-btn:hover { color: var(--c-on-accent); filter: brightness(0.92); }
.px-link {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  font-size: var(--fs-button); font-weight: 600;
  text-decoration: underline; text-underline-offset: var(--link-underline-offset);
  text-decoration-thickness: var(--link-underline-thickness);
}
.px-link--l { text-underline-offset: 6px; padding-inline: var(--space-1); }
.px-link--accent { color: var(--c-accent); font-size: var(--fs-body-s); font-weight: 700; }
[data-brand="business"] .px-link--accent { color: var(--c-text); }
.px-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-7); }

/* ---------- Pixel-Marker ---------- */
.px-marker { display: inline-block; flex-shrink: 0; background: var(--c-accent); }
.px-marker--xs { width: var(--marker-xs); height: var(--marker-xs); }
.px-marker--s  { width: var(--marker-s);  height: var(--marker-s); }
.px-marker--m  { width: var(--marker-m);  height: var(--marker-m); }
.px-marker--l  { width: var(--marker-l);  height: var(--marker-l); }
.px-marker--muted { background: var(--c-text-2); }
.px-marker--text  { background: var(--c-text); }

/* ---------- Aufzählung mit Marker ---------- */
.px-bullets { list-style: none; padding: 0; display: grid; gap: var(--space-3) var(--space-6); }
.px-bullets li { display: flex; gap: var(--space-3); align-items: baseline; }
.px-bullets li::before { content: ""; width: var(--marker-s); height: var(--marker-s); background: var(--c-accent); flex-shrink: 0; transform: translateY(-1px); }
@media (min-width: 768px) { .px-bullets--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }