@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');

:root{
  /* Schlicht & klar */
  --brand: #0b5db7;
  --text: #33363E; /* alle Schriften schwarz */
  --muted: #000000; /* auch Sekundärtext schwarz */
  --bg: #cfe2ff;
  --line: #cfe2ff;
  --row-stripe: rgba(255,255,255,0.25);
  /* Goldener Schnitt Skalen */
  --phi: 1.618;
  --base-size: 1rem;
  --title-size: calc(var(--base-size) * 4.854);
  --subtitle-size: calc(var(--title-size / (1.618*2)));
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: "Arimo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg) url("assets/background.jpg") no-repeat center center fixed;
  background-size: cover;
}

/* Container */
.wrap { max-width: 1160px; margin: 0 55% 0 auto; padding: 10px 16px; }

/* Topbar (Logo fix oben links) */
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  height: 302px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 8px 16px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-left{ display:flex; align-items:center; gap:12px; }
.logo{
  width:308px;
  aspect-ratio: 308 / 163; /* Originalverhältnis des SVG */
  display: block;
  position: absolute;
  top: 30px;
  left: 30px;
}
.logo svg{
  width:100%;
  height:100%;
  display:block;
}
.title h1{
  margin:0;
  font-size: var(--title-size);
  line-height:1.1;
  text-transform: uppercase;
  font-weight:700;
  color: var(--text);
}
.title small{
  color: var(--text);
  display:block;
  font-size: 3rem;
  text-align: left;
}

/* Main: wir reservieren den Platz so, dass 10 Zeilen immer ohne Scroll passen */
.main{
  min-height: calc(100vh - 120px);
  display: grid;
  align-items: start;
  padding-top: 350px; /* Platz unter fixiertem Logo */
}

/* Board ohne Blur */
.board{
  width: 100%;
}

/* Kopfzeile */
.header-row{
  display: grid;
  grid-template-columns: 100px 1fr 180px; /* mehr horizontaler Abstand */
  gap: 20px;
  padding: 14px 10px;
  color: var(--text);
  font-weight: 600;
}

/* Datenzeilen: exakt 10 Zeilen */
.rows{
  display: grid;
  grid-template-rows: repeat(10, auto);
  grid-auto-flow: row;
}
.row{
  display: grid;
  grid-template-columns: 100px 1fr 180px;
  align-items: center;
  padding: 6px 10px;
  line-height: 1.3;
  column-gap: 20px;
  margin-bottom: 0; /* Basis: kein extra margin, Podest regelt selbst */
}

/* Streifen & Podest-Skalierung nach goldenem Schnitt */
.rows .row:nth-child(odd){ background: var(--row-stripe); }

/* Podestplätze: klare Staffelung, Abstände proportional zur Größe */
.rows .row:nth-child(1){ font-weight:800; color: gold; font-size: calc(var(--base-size) * var(--phi) * var(--phi) * var(--phi)); padding-bottom: calc(0.33em * var(--phi) * var(--phi) * var(--phi) - var(--phi)); }
.rows .row:nth-child(2){ font-weight:700; color: silver; font-size: calc(var(--base-size) * var(--phi) * var(--phi)); padding-bottom: calc(0.33em * var(--phi) * var(--phi) - var(--phi)); }
.rows .row:nth-child(3){ font-weight:600; color: #ce8946; font-size: calc(var(--base-size) * var(--phi)); padding-bottom: calc(0.33em * var(--phi) - var(--phi)); }
.rows .row:nth-child(4){ font-weight:500; font-size: var(--base-size); padding-bottom: calc(0.33em); }

/* Ab Rang 5 bleibt es bei der Basisschriftgröße */
.rows .row:nth-child(n+5){ font-size: var(--base-size); font-weight:400; padding-bottom: calc(0.33em); }

/* Spaltenausrichtung */
.col.rank{ text-align: center; padding-right: 10px; font-feature-settings:"tnum" 1; font-variant-numeric: tabular-nums; }
.col.name{ text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col.time{ text-align: right; font-feature-settings:"tnum" 1; font-variant-numeric: tabular-nums; }

/* Status & Footer */
.status{ color: var(--text); font-size: .9rem; }
.footer{ color: var(--text); }
.footer .wrap{ padding: 10px 16px; }

/* Responsive: bei schmalen Displays Zeit etwas schmaler */
@media (max-width: 640px){
  .header-row, .row{
    grid-template-columns: 64px 1fr 120px;
    gap: 10px;
  }
}

/* Barrierefreiheit: weniger Bewegung */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}