:root{
  --bg:#0b0c10; --card:#151720; --muted:#8892b0; --fg:#e6edf3; --acc:#64ffda; --border:#23263a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial}
.wrap{max-width:900px;margin:0 auto;padding:16px;padding-bottom:2cm}

h1{margin:0 0 10px;font-weight:700;font-size:clamp(18px,4vw,26px)}
.meta{color:var(--muted);font-size:14px;margin-bottom:12px}

/* Kopfzeile */
.head{
  display:grid;
  grid-template-columns: 3.2ch 2fr 1.5fr 5ch; /* # | Team | Kategorie | Routine */
  gap:12px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#10121a;
  color:var(--muted);
  font-weight:600;
  font-size:clamp(12px,2.5vw,14px);
}

/* Liste */
.list{margin-top:10px;display:grid;grid-template-columns:1fr;gap:8px}

.row{
  display:grid;
  grid-template-columns: 3.2ch 2fr 1.5fr 5ch; /* # | Team | Kategorie | Routine */
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  /* Einzeilig erzwingen */
  white-space:nowrap;
  overflow:hidden;
}

.no{
  text-align:right;
  font-variant-numeric: tabular-nums;
  opacity:.9;
}

/* Teamname und Kategorie dürfen schneiden */
.name, .cat{
  min-width:0;                /* wichtig für ellipsis in grids */
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:500;            /* normal, nicht fett */
  white-space:nowrap;         /* Zeilenumbruch verhindern */
}

/* Teamname bekommt mehr Gewicht */
.name{
  font-weight:600;
}

/* Kategorie etwas kleiner und gedämpft */
.cat{
  font-size:0.85em;
  opacity:0.75;
  font-weight:400;
}

/* Startnummer: rechtsbündig, kompakt */
.no{
  text-align:right;
  font-variant-numeric: tabular-nums;
  opacity:.9;
  font-weight:600;
}

/* Zeiten: rechtsbündig, feste Breite */
.time{
  text-align:right;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity:.95;
  font-size:0.95em;
  font-weight:500;
}

/* Dichte Darstellung auf sehr kleinen Screens */
@media (max-width: 520px){
  html,body{font-size:14px}
  .head,.row{gap:6px; padding:8px 8px; border-radius:8px}
  .head{font-size:11px}
  .row{
    grid-template-columns: 2.5ch 2fr 1fr 4.5ch; /* # | Team | Kategorie | Routine */
  }
  .cat{font-size:0.8em}
  .name{font-size:0.9em}
  .time{font-size:0.85em}
}

/* Tablet Layout */
@media (max-width: 768px) and (min-width: 521px){
  .head,.row{
    grid-template-columns: 3ch 2fr 1.2fr 4.8ch;
    gap:8px;
  }
}

/* Etwas großzügiger ab ~700px */
@media (min-width: 769px){
  .row{padding:12px 14px; gap:14px}
  .head{gap:14px}
}

/* Sehr breite Displays */
@media (min-width: 1200px){
  .head,.row{
    grid-template-columns: 3.5ch 3fr 2fr 6ch;
    gap:16px;
  }
  .wrap{max-width:1000px}
}