/* Klassen-Ranking — responsive Layout
   Variablen werden in :root und in Mobile-/Tablet-Breakpoints gesetzt.
   Variantenspezifische Farben/Schriften kommen weiter inline aus React. */

:root {
  /* Größen (Desktop) */
  --klax-bike-size: 56px;
  --klax-rank-w: 38px;
  --klax-rank-fs: 19px;
  --klax-rank-fs-big: 24px;
  --klax-rank-fs-mono: 12px;
  --klax-name-fs: 15px;
  --klax-name-fs-serif: 22px;
  --klax-km-fs: 16px;
  --klax-bar-h: 22px;
  --klax-row-pad: 6px;
  --klax-gap: 18px;

  --klax-page-max: 1080px;
  --klax-page-px: clamp(16px, 4vw, 56px);
}

/* Tablet */
@media (max-width: 900px) {
  :root {
    --klax-bike-size: 44px;
    --klax-rank-w: 34px;
    --klax-rank-fs: 17px;
    --klax-rank-fs-big: 22px;
    --klax-name-fs: 14px;
    --klax-name-fs-serif: 20px;
    --klax-km-fs: 14px;
    --klax-bar-h: 18px;
    --klax-gap: 14px;
  }
}

/* Mobil */
@media (max-width: 600px) {
  :root {
    --klax-bike-size: 34px;
    --klax-rank-w: 28px;
    --klax-rank-fs: 15px;
    --klax-rank-fs-big: 19px;
    --klax-rank-fs-mono: 11px;
    --klax-name-fs: 14px;
    --klax-name-fs-serif: 18px;
    --klax-km-fs: 13px;
    --klax-bar-h: 14px;
    --klax-gap: 10px;
  }
}

.klax-page {
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
}
.klax-page--compact {
  --klax-bike-size: calc(var(--klax-bike-size) * 0.78);
  --klax-bar-h: calc(var(--klax-bar-h) * 0.7);
}

/* ─── Header ─── */
.klax-header {
  max-width: var(--klax-page-max);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 36px) var(--klax-page-px) clamp(16px, 3vw, 24px);
}
.klax-eyebrow {
  font-size: clamp(10px, 1.1vw, 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.klax-title {
  font-size: clamp(32px, 6.5vw, 56px);
  line-height: 0.95;
  margin: 8px 0 0;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.klax-title--sport {
  font-size: clamp(28px, 5.5vw, 44px);
  text-transform: uppercase;
  letter-spacing: -0.025em;
  margin: 8px 0 14px;
  color: #fff;
}
.klax-title--minimal {
  font-size: clamp(44px, 8vw, 88px);
  font-weight: 400;
  margin: 14px 0 0;
  letter-spacing: -0.015em;
}
.klax-title--minimal em {
  display: block;
}
.klax-header-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-top: clamp(14px, 2.5vw, 22px);
}
/* Dual-Stat (km + CO₂) */
.klax-stats-row {
  display: flex;
  align-items: flex-end;
  gap: clamp(14px, 2.5vw, 28px);
  flex-wrap: wrap;
}
.klax-stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.klax-stat-divider {
  width: 1px;
  height: clamp(36px, 5vw, 56px);
  background: currentColor;
  opacity: 0.18;
  align-self: flex-end;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.klax-stat-divider--sport {
  background: rgba(255, 255, 255, 0.28);
  opacity: 1;
}
.klax-stat-unit {
  font-size: 0.4em;
  margin-left: 6px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.7;
  vertical-align: baseline;
}
.klax-stat-label {
  font-size: clamp(11px, 1.2vw, 13px);
  margin-top: 6px;
  letter-spacing: 0.02em;
  opacity: 0.78;
}
.klax-stat-label--sport {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  font-size: clamp(10px, 1.1vw, 12px);
  opacity: 0.9;
}
.klax-counter-num {
  font-size: clamp(28px, 5vw, 48px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 600;
}
.klax-counter-num .klax-counter-unit {
  font-size: 0.35em;
  margin-left: 8px;
  opacity: 0.65;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.klax-counter-sub {
  font-size: clamp(12px, 1.4vw, 14px);
  margin-top: 6px;
}
.klax-counter-sub--sport {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  font-size: clamp(10px, 1.1vw, 12px);
  opacity: 0.85;
}
.klax-days {
  text-align: center;
  font-weight: 600;
  line-height: 1.1;
  padding: 10px 14px;
  min-width: 86px;
}
.klax-days--playful { border-radius: 14px; }
.klax-days--sport   { border-radius: 0; }
.klax-days-num {
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1;
}
.klax-days-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 4px;
  font-weight: 500;
}

/* Sport-Header */
.klax-header--sport { padding: 0; max-width: none; }
.klax-header--sport .klax-header-band {
  padding: clamp(18px, 3vw, 24px) var(--klax-page-px) clamp(20px, 3vw, 28px);
  position: relative;
  overflow: hidden;
}
.klax-header--sport .klax-eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  opacity: 0.9;
}
.klax-header-pattern {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 12px);
  pointer-events: none;
}
.klax-header--sport .klax-header-bottom {
  position: relative;
}
.klax-header-strip {
  padding: 10px var(--klax-page-px);
  background: #0a1208;
  color: #fff;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Minimal-Header */
.klax-header--minimal {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(20px, 3vw, 28px);
}
.klax-minimal-stats {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: clamp(14px, 2.5vw, 32px);
  margin-top: clamp(20px, 3vw, 32px);
  padding-top: clamp(14px, 2vw, 20px);
}
.klax-minimal-stats .klax-counter-num {
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 400;
}
.klax-minimal-stats .klax-counter-unit {
  font-size: 0.3em;
}

/* Stats stapeln auf Mobil */
@media (max-width: 560px) {
  .klax-minimal-stats {
    grid-template-columns: 1fr 1fr;
  }
  .klax-minimal-stats > :last-child {
    grid-column: 1 / -1;
    text-align: left !important;
  }
}

/* ─── Liste ─── */
.klax-list {
  max-width: var(--klax-page-max);
  margin: 0 auto;
  padding: clamp(8px, 2vw, 16px) var(--klax-page-px) clamp(20px, 3vw, 40px);
}

.klax-row {
  display: grid;
  grid-template-columns: var(--klax-rank-w) minmax(120px, 1.2fr) minmax(140px, 2.6fr) 86px;
  gap: var(--klax-gap);
  align-items: center;
  padding: var(--klax-row-pad) 4px;
  min-height: calc(var(--klax-bar-h) + var(--klax-bike-size) + 12px);
}
.klax-row--minimal {
  border-bottom: 1px solid #ddd7c8;
  padding: 10px 0;
}
.klax-row--compact {
  --klax-row-pad: 3px;
}

.klax-rank {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: var(--klax-rank-fs);
}
.klax-row--playful .klax-rank {
  justify-content: center;
}
.klax-row--minimal .klax-rank {
  font-size: var(--klax-rank-fs-mono);
}

.klax-name {
  font-size: var(--klax-name-fs);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.klax-row--minimal .klax-name {
  font-size: var(--klax-name-fs-serif);
  line-height: 1;
}

.klax-bar-lane {
  position: relative;
  height: calc(var(--klax-bar-h) + var(--klax-bike-size) + 4px);
  overflow: visible;
}
.klax-bar-track,
.klax-bar-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: var(--klax-bar-h);
}
.klax-bar-track  { right: 0; }
.klax-bar-fill   { width: 0; }
.klax-bike-holder {
  position: absolute;
  /* SVG viewBox ~189×183 (mit translate); Räder am unteren Rand. */
  bottom: calc(var(--klax-bar-h) - var(--klax-bike-size) * 0.03);
  width: calc(var(--klax-bike-size) * 1.033);
  height: var(--klax-bike-size);
  transform: translateX(-50%);
  pointer-events: none;
}
.klax-bike-holder svg { display: block; width: 100%; height: 100%; overflow: visible; }

.klax-km {
  text-align: right;
  white-space: nowrap;
  font-size: var(--klax-km-fs);
}
.klax-km-unit {
  opacity: 0.55;
  margin-left: 3px;
  font-size: 0.82em;
}

/* Mobil: Name+km oben, Balken in eigener Zeile darunter */
@media (max-width: 640px) {
  .klax-row {
    grid-template-columns: var(--klax-rank-w) 1fr auto;
    grid-template-areas:
      "rank name km"
      "bar  bar  bar";
    column-gap: 12px;
    row-gap: 4px;
  }
  .klax-rank     { grid-area: rank; }
  .klax-name     { grid-area: name; }
  .klax-km       { grid-area: km; }
  .klax-bar-lane { grid-area: bar; }
}

.klax-footnote {
  margin-top: 22px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Wheels */
.klax-wheel-spin {
  animation-name: klax-spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes klax-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}