:root{
--bg:#0b0d10; /* sehr dunkles Grau */
--card:#12161c; /* dunkle Card */
--muted:#8a8f98; /* graue Labels */
--text:#e9eef4; /* fast weiß */
--accent:#d43a2f; /* Apex-Rot */
--accent-2:#f5a623; /* warmes Orange */
--ok:#35c28a; /* grün */
--danger:#c23a35; /* rot */
--shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg)}


.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:1px 20px;background:linear-gradient(90deg,#141a21, #0b0d10);border-bottom:1px solid #1e2630;box-shadow:var(--shadow)}
.brand{font-weight:800;letter-spacing:.5px}
.btn{display:inline-block;padding:10px 14px;border:1px solid #2a323e;background:#1a2029;border-radius:12px;text-decoration:none;color:var(--text);transition:transform .05s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg, #e04b40, #b92f27);border-color:#a72821}
.btn.danger{border-color:#6a2020;background:#291516}


.container{display:grid;grid-template-columns: 1fr 340px;gap:18px;max-width:1400px;margin:24px 0 24px 60px;padding:0 12px}
.card{background: radial-gradient(120% 120% at 100% 0%, rgba(239,88,69,.05) 0%, transparent 40%), var(--card);border:1px solid #1e2630;border-radius:20px;box-shadow:var(--shadow);padding:18px}
.card h2{margin:0 0 12px 0;font-weight:800}


.input-card .row-form{display:grid;width: 120px;grid-template-columns: repeat(3, minmax(150px,1fr));gap:12px;align-items:end}
.field-group{display:flex;flex-direction:column;gap:6px}
.field-group label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.field-group input{padding:10px 12px;border:1px solid #27303b;background:#0f1318;color:var(--text);border-radius:12px;outline:none}
.field-group input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,58,47,.25)}


.hint{color:var(--muted);font-size:12px;margin-top:10px}
.toast{margin:8px 0 0 0;background:#13251b;border:1px solid #1b5036;color:#c7f3de;padding:8px 12px;border-radius:10px;display:inline-block}


/*.stats-card{position:sticky;top:86px;height:max-content}
.stats-grid{display:grid;grid-template-columns: 1fr;gap:16px}*/
.alert{background:#291516;border:1px solid #5b2424;color:#ffb3b3;padding:10px 12px;border-radius:12px;margin-bottom:10px}

/* ===== Tabellen: lesbarer, zentriert, responsive ===== */
.table {
  width: 100%;
  border-collapse: separate; /* bessere Abstände als collapse */
  border-spacing: 0;
  table-layout: auto;        /* verhindert „Zusammenquetschen“ */
}
.table thead th,
.table td {
  padding: 10px 12px;
  border-bottom: 1px solid #202936;
  text-align: center;        /* zentriert */
  vertical-align: middle;    /* mittig ausgerichtet */
  white-space: nowrap;       /* keine Zeilenbrüche in Zellen */
}
.table thead th {
  font-size: 12px;
  color: #a9b1bb;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid #2a3443;
}
.table.compact thead th,
.table.compact td {
  padding: 8px 10px;         /* etwas kompakter */
}
.table tr:hover { background: #0f141a; }

/* Hilfsklassen, falls du punktuell ausrichten willst */
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

/* Scroll-Hülle für schmale Screens */
.table-wrap {
  width: 100%;
  overflow: auto;
}
.table-wrap::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: #2a323e; border-radius: 10px;
}
.table-wrap::-webkit-scrollbar-track {
  background: #0f1318; border-radius: 10px;
}

/* Liste: leichter Hover-Kontrast */
.list-card table tr:hover { background: #0f141a; }

/* --- Fix: Tabellen sauber innerhalb der runden Stats-Karte anzeigen --- */
.stats-card {
  overflow: hidden;               /* schneidet Linien an den Ecken sauber ab */
}

/* kleiner Seitenpuffer, damit die Linien nicht „am Rand kleben“ */
.stats-card .table-wrap {
  padding: 0 8px;                 /* horizontale Innenabstände */
}

/* optional: minimal mehr Luft in den Zellen der Stats-Tabellen */
.stats-card .table thead th,
.stats-card .table td {
  padding-left: 8px;
  padding-right: 8px;
}

/* Rückgängig: nicht die ganze Karte clippen – sonst schneidet es rechts ab */
.stats-card {
  overflow: visible; /* statt hidden */
}

/* Die Tabelle selbst bekommt die „Rundung/Clip“, nicht die ganze Karte */
.stats-card .table-wrap {
  overflow-x: auto;          /* horizontal scrollen, nichts wird abgeschnitten */
  overflow-y: hidden;
  border-radius: 14px;       /* Linien an den rechten/ linken Ecken sauber */
  padding: 0;                /* kein Puffer, damit nichts gegen den Rand gequetscht wird */
  margin: 0;                 /* keine negativen Margins nötig */
}

/* Tabelle darf breiter als die Box werden → scroll statt cut */
.stats-card .table {
  min-width: 100%;
  width: max-content;        /* wächst so breit wie nötig, bleibt aber scrollbar */
}

/* Lesbarkeit: etwas Luft innen */
.stats-card .table thead th,
.stats-card .table td {
  padding-left: 12px;
  padding-right: 12px;
}

/* Wenn die Trennlinien optisch zu weit bis an den Rand gehen, hier leicht einrücken */
.stats-card .table thead th:first-child,
.stats-card .table td:first-child { padding-left: 16px; }
.stats-card .table thead th:last-child,
.stats-card .table td:last-child  { padding-right: 16px; }

.input-card {
  grid-column: 1;
  background: #1b1f26;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 100%;
  width: 600px;
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

/* --- Layout-Optimierung: Eingabe & Statistik nebeneinander --- */
.input-card {
  grid-column: 1;
  grid-row: 1;
}

.stats-card {
  grid-column: 2;       /* in rechte Spalte verschieben */
  grid-row: 1;          /* gleiche Zeile wie Eingabe */
  align-self: start;    /* oben bündig mit Eingabe */
}

/* Tabelle unten bleibt unterhalb der Eingabe */
.list-card {
  grid-column: 1;
  grid-row: 2;
}

/* Grid-Einstellungen anpassen: mehr Platz zwischen links/rechts */
.container {
  display: grid;
  grid-template-columns: 1fr 340px; /* linke Spalte flexibel, rechte fix */
  gap: 24px;                        /* Abstand zwischen den Spalten */
  max-width: 1400px;                /* etwas breiter für mehr Platz */
  margin: 24px 0 24px 60px;         /* Seite leicht nach links rücken */
  padding: 0 12px;
}

/* --- Spieler-Gruppierung in der Ergebnistabelle --- */

/* Vertikale Trennlinien zwischen Spielern */
.list-card .table tr td:nth-child(8),
.list-card .table tr th:nth-child(8),
.list-card .table tr td:nth-child(13),
.list-card .table tr th:nth-child(13),
.list-card .table tr td:nth-child(18),
.list-card .table tr th:nth-child(18) {
  border-right: 2px solid #2f2f2f;
}

/* Hintergrundfarben pro Spielerblock */
.list-card .table tr td:nth-child(4),
.list-card .table tr td:nth-child(5),
.list-card .table tr td:nth-child(6),
.list-card .table tr td:nth-child(7),
.list-card .table tr td:nth-child(8) {
  background-color: rgba(255, 99, 99, 0.7); /* Fred - leicht rötlich */
}

.list-card .table tr td:nth-child(9),
.list-card .table tr td:nth-child(10),
.list-card .table tr td:nth-child(11),
.list-card .table tr td:nth-child(12),
.list-card .table tr td:nth-child(13) {
  background-color: rgba(99, 255, 170, 0.7); /* Korre - leicht grünlich */
}

.list-card .table tr td:nth-child(14),
.list-card .table tr td:nth-child(15),
.list-card .table tr td:nth-child(16),
.list-card .table tr td:nth-child(17),
.list-card .table tr td:nth-child(18) {
  background-color: rgba(99, 170, 255, 0.7); /* Daniel - leicht bläulich */
}

/* Kopfzeilen angleichen */
.list-card .table thead th {
  background-color: #1f1f1f;
  border-bottom: 2px solid #333;
  text-align: center;
}

/* Einheitliche Zelloptik */
.list-card .table td, .table th {
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
}

/* soll das Scoreboard verbessern */
/* Default: responsive (fällt auf 1–3 Spalten zurück) */
.board {
  display: grid;
  gap: 20px;
  align-items: start;
  justify-content: start;
  padding: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Basis */
}

/* --- Einheitliche Höhe der Scoreboard-Kacheln pro Zeile --- */
.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: stretch;    /* ✨ sorgt für gleiche Höhe */
  justify-content: start;
  padding: 20px;
}

/* Karten füllen nun automatisch die volle Höhe ihrer Grid-Zelle */
.board-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* verteilt Inhalte sauber vertikal */
  height: 100%;                   /* nimmt volle Zeilenhöhe ein */
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}


/* Groß: zuverlässig 3 Spalten */
@media (min-width: 1400px) {
  .board {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mittel: 3 Spalten */
@media (max-width: 1399px) and (min-width: 1100px) {
  .board {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Klein: 2 Spalten */
@media (max-width: 1099px) and (min-width: 740px) {
  .board {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Very small: 1 Spalte */
@media (max-width: 739px) {
  .board {
    grid-template-columns: 1fr;
  }
}

/* Board-Container: nicht zentrieren, nach links rücken, breiter erlauben */
.board-container {
  max-width: 1600px;     /* mehr Platz als 1200px, sonst bleiben's 3 Spalten */
  width: 100%;
  margin: 24px 0 24px 20px;  /* linksbündig (nicht mehr auto-zentriert) */
  padding: 0 16px;
  text-align: left;
}

/* Karten gleichmäßiger gestalten */
.board-card {
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.board-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 14px rgba(255,255,255,0.1);
}

/* Toolbar */
.toolbar {
  display:flex; gap:8px; align-items:center;
  padding:10px 16px; border-bottom:1px solid #1e2630;
  background:linear-gradient(90deg,#141a21,#0b0d10);
}
.toolbar .spacer { flex:1 }

/* Karten */
.board-card {
  background: radial-gradient(120% 120% at 100% 0%, rgba(239,88,69,.05) 0%, transparent 40%), var(--card);
  border:1px solid #1e2630; border-radius:20px; box-shadow:var(--shadow); padding:18px;
}
.board-card h2 { margin: 0 0 12px; font-weight: 800; }

/* Metrik-Kacheln in Karten */
.metrics { display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top:12px }
.metric { background:linear-gradient(180deg,#161c24,#101419); border:1px solid #232d3a; border-radius:16px; padding:12px 14px }
.metric-label { font-size:12px; color:#a9b1bb; text-transform:uppercase; letter-spacing:.06em }
.metric-value { font-size:28px; font-weight:800 }
.footer-bar { text-align:center; color:#a9b1bb; font-size:12px; margin-top:8px }

/* ===== Oberer Statistikbalken ===== */
.top-metrics {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;             /* bei kleinen Bildschirmen umbrechen */
}

.top-metrics .metric {
  background: linear-gradient(180deg, #161c24, #101419);
  border: 1px solid #232d3a;
  border-radius: 16px;
  padding: 10px 14px;
  min-width: 160px;
  text-align: center;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
}

.top-metrics .metric-label {
  font-size: 11px;
  color: #a9b1bb;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.top-metrics .metric-value {
  font-size: 20px;
  font-weight: 800;
  color: #e9eef4;
}

/* Tabellen in Karten */
.board-card .table-wrap { overflow:auto; border-radius:14px }
.board-card .table { min-width:100%; width:max-content }
.board-card .table thead th, .board-card .table td { padding-left:12px; padding-right:12px }
/* Nur in Scoreboard-Kacheln dürfen Zellen umbrechen */
.board-card .table thead th,
.board-card .table td {
  white-space: normal;
}

/* Wenn Tabellen trotzdem zu breit werden → horizontal scrollen, nicht das Grid sprengen */
.board-card .table-wrap {
  overflow-x: auto;
}


/* Controls/Badges */
.controls .btn { padding:8px 12px; }
.select { background:#1a2029; border:1px solid #2a323e; color:#e9eef4; border-radius:12px; padding:8px 10px; }
.badge { display:inline-block; padding:4px 8px; border:1px solid #2a323e; border-radius:999px; color:#a9b1bb; font-size:12px; }

/* Balken (Bars) */
.bars { display:grid; gap:6px; margin-top:8px }
.bar-row { display:flex; align-items:center; gap:8px }
.bar-row .label { width:80px; text-align:right; color:#a9b1bb; font-size:12px }
.bar-row .bar { flex:1; height:10px; background:#1a2029; border:1px solid #2a323e; border-radius:999px; overflow:hidden }
.bar-row .bar > div { height:100%; background:linear-gradient(180deg,#e04b40,#b92f27) }
.bar-row .val { width:70px; text-align:left; font-variant-numeric: tabular-nums }

/* Trend-Farben */
.up { color:#35c28a; display:inline-flex; vertical-align:middle }
.down { color:#c23a35; display:inline-flex; vertical-align:middle }
.neutral { color:#a9b1bb; display:inline-flex; vertical-align:middle }

/* Line-Charts */
.chart { width:100%; height:160px; }
.chart svg { width:100%; height:100%; display:block; }
.chart .grid line { stroke: #2a323e; opacity: .6; }
.chart .axis text { fill: #a9b1bb; font-size: 10px }
.chart .line { fill: none; stroke-width: 2.5 } 

/* ---- Schaden pro Kill Box kleiner darstellen ---- */
.spk-card {
  max-width: 400px;       /* Breite begrenzen */
  flex: 0 0 280px;        /* feste Breite im Grid */
  justify-self: start;    /* bleibt linksbündig */
}

/* Für kleine Bildschirme trotzdem vollbreit anzeigen */
@media (max-width: 1200px) {
  .spk-card {
    max-width: 100%;
    flex: 1 1 auto;
  }
}

/* ---- Schaden pro Kill Box kleiner darstellen ---- */
.platz {
  max-width: 400px;       /* Breite begrenzen */
  flex: 0 0 280px;        /* feste Breite im Grid */
  justify-self: start;    /* bleibt linksbündig */
}

/* Für kleine Bildschirme trotzdem vollbreit anzeigen */
@media (max-width: 1200px) {
  .platz {
    max-width: 100%;
    flex: 1 1 auto;
  }
}

/* === Gold-Akzent für bestimmte Kacheln === */
.board-card.gold{
  border-color: #8a6b1f; /* dunkles Gold */
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(245,166,35,.08) 0%, transparent 45%),
    var(--card);
  box-shadow:
    0 0 0 1px rgba(245,166,35,.12),
    0 10px 30px rgba(245,166,35,.12);
}
.board-card.gold h2{
  color: #f5c453; /* Überschrift leicht gold */
}

/* Tabellen in Gold-Kacheln minimal betonen */
.board-card.gold .table thead th{
  border-bottom-color: rgba(245,166,35,.35);
}
.board-card.gold .table tr:hover{
  background: rgba(245,166,35,.06);
}

/* Balken-Farbe in Gold-Kacheln (nur dort) */
.board-card.gold .bar-row .bar > div{
  background: linear-gradient(180deg,#f5c453,#b88a2c);
}

/* dezentes Hover-Glow */
.board-card.gold:hover{
  box-shadow:
    0 0 0 1px rgba(245,166,35,.18),
    0 12px 34px rgba(245,166,35,.18);
}

.board-card.gold h2 {
  text-align: center;
}

/*  Trendlinien für alle drei Spieler und Kategorien pro Spieler eine Kachel */ 
.player-trend .controls { margin: 6px 0 10px; }
.player-trend .controls select {
  background:#1a2029; border:1px solid #2a323e; color:#e9eef4;
  border-radius:12px; padding:6px 10px;
}

/* === Spieler-Trend-Kacheln: 3 große Mini-Charts untereinander === */

/* Container für jeden Mini-Chart-Block */
.player-trend {
  display: block !important;      /* statt grid/flex mit Spalten */
}

.player-trend .mini-chart {
  display: block;
  width: 100%;
  margin: 6px 0 10px 0;
}

/* Der eigentliche Chart-Bereich */
.player-trend .chart {
  display: block;
  width: 100% !important;   /* zwingt volle Breite innerhalb der Kachel */
  height: 130px;            /* hier kannst du später 110–150 testen */
  margin: 2px 0 0 0;
}

/* SVG im Chart immer vollflächig */
.player-trend .chart svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Titel über jedem Mini-Chart (Kills / Schaden / Teamplayer) */
.player-trend .mini-chart-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #a9b1bb;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.chart .line {
  stroke-width: 0.9;
}

.chart .axis text {
  font-size: 5.5px;
  opacity: 0.8;
}

.chart .grid line {
  opacity: 0.25;
}

/* ===== Hall of Fame ===== */

.hof-container {
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 16px 40px;
}

.hof-hero {
  text-align: center;
  margin-bottom: 20px;
}

.hof-hero h1 {
  margin: 0 0 8px;
  font-size: 42px;
  font-weight: 800;
  color: #f5c453;
}

.hof-hero p {
  margin: 0;
  color: #a9b1bb;
}

.hof-updated {
  margin-top: 10px;
  font-size: 13px;
  color: #a9b1bb;
}

.hof-card {
  margin-bottom: 20px;
}

.hof-card h2,
.hof-table-card h2 {
  text-align: center;
}

/* Olympia-Treppchen */
.podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 18px;
  align-items: end;
  min-height: 360px;
  margin-top: 24px;
}

.podium-slot {
  display: flex;
  align-items: end;
  justify-content: center;
  border-radius: 22px;
  padding: 18px 14px;
  position: relative;
  overflow: hidden;
  border: 1px solid #2a323e;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(245,166,35,.08) 0%, transparent 45%),
    linear-gradient(180deg, #161c24, #101419);
  box-shadow: var(--shadow);
}

.podium-first {
  min-height: 300px;
  border-color: rgba(245, 196, 83, 0.7);
  box-shadow:
    0 0 0 1px rgba(245, 196, 83, .18),
    0 0 28px rgba(245, 196, 83, .18);
}

.podium-second {
  min-height: 245px;
  border-color: rgba(180, 190, 205, 0.55);
}

.podium-third {
  min-height: 210px;
  border-color: rgba(184, 122, 56, 0.65);
}

.podium-player {
  width: 100%;
  text-align: center;
}

.podium-rank {
  font-size: 46px;
  line-height: 1;
  font-weight: 800;
  color: #f5c453;
  margin-bottom: 14px;
  text-shadow: 0 0 18px rgba(245, 196, 83, .35);
}

.podium-second .podium-rank {
  color: #c7d0dd;
  text-shadow: 0 0 16px rgba(199, 208, 221, .28);
}

.podium-third .podium-rank {
  color: #d18a43;
  text-shadow: 0 0 16px rgba(209, 138, 67, .28);
}

.podium-avatar {
  width: 118px;
  height: 118px;
  margin: 0 auto 14px;
  border-radius: 999px;
  border: 3px solid #2a323e;
  background: #0f1318;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.podium-first .podium-avatar {
  width: 142px;
  height: 142px;
  border-color: #f5c453;
}

.podium-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.podium-avatar-fallback {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 800;
  color: #e9eef4;
  background: linear-gradient(180deg, #1a2029, #101419);
}

.podium-name {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
}

.podium-kills {
  font-size: 18px;
  font-weight: 800;
  color: #f5c453;
}

.hof-table-card {
  margin-top: 20px;
}

@media (max-width: 800px) {
  .podium {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .podium-first,
  .podium-second,
  .podium-third {
    min-height: 220px;
  }

  .podium-first {
    order: 1;
  }

  .podium-second {
    order: 2;
  }

  .podium-third {
    order: 3;
  }
}

/* Mehrere Hall-of-Fame-Podien untereinander */
.hof-podiums {
  display: grid;
  gap: 22px;
}

/* ===== Beste Spielstunden ===== */

.hours-card {
  cursor: pointer;
}

.hours-card:hover {
  border-color: rgba(245, 166, 35, .45);
}

.hours-card-hint {
  color: #a9b1bb;
  font-size: 12px;
  margin: -4px 0 12px;
  text-align: center;
}

.hours-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.hours-group h3 {
  margin: 0 0 8px;
  color: #f5c453;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hours-list {
  display: grid;
  gap: 8px;
}

.hour-mini-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid #27303b;
  background: #0f1318;
  border-radius: 14px;
}

.hour-mini-rank {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #e04b40, #b92f27);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}

.hour-mini-title {
  font-weight: 800;
  color: #e9eef4;
  margin-bottom: 3px;
}

.hour-mini-meta {
  color: #a9b1bb;
  font-size: 12px;
  line-height: 1.35;
}

.hours-empty {
  color: #a9b1bb;
  font-size: 13px;
  padding: 10px;
  border: 1px dashed #2a323e;
  border-radius: 12px;
}

/* Modal */
.hours-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
}

.hours-modal.open {
  display: block;
}

.hours-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(4px);
}

.hours-modal-content {
  position: relative;
  max-width: 1100px;
  max-height: 86vh;
  overflow: auto;
  margin: 6vh auto;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid #2a323e;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(239,88,69,.08) 0%, transparent 40%),
    #12161c;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

.hours-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.hours-modal-head h2 {
  margin: 0;
  color: #f5c453;
}

.hours-modal-head p {
  margin: 6px 0 0;
  color: #a9b1bb;
  font-size: 12px;
}

.hours-modal-close {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid #2a323e;
  background: #1a2029;
  color: #e9eef4;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.hours-modal-close:hover {
  background: #291516;
  border-color: #6a2020;
}

.hours-table {
  width: 100%;
}

@media (max-width: 740px) {
  .hours-modal-content {
    margin: 3vh 10px;
    max-height: 94vh;
  }

  .hours-modal-head {
    align-items: center;
  }
}

/* ===== Modus-Schalter: Joker / Ranked / Pubs ===== */

.input-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.input-title-row h2 {
  margin: 0;
}

.mode-heading-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.mode-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  width: 215px;
  flex: 0 0 215px;
}

.mode-switch input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Standard: deaktiviert = rot */
.mode-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e04b40;
  background: rgba(224, 75, 64, 0.18);
  color: #ffd2cf;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow:
    0 0 0 1px rgba(224, 75, 64, 0.18),
    0 0 12px rgba(224, 75, 64, 0.35);
  transition: all .18s ease;
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow: hidden;
}

.mode-text-on,
.mode-text-off {
  white-space: nowrap;
  flex-shrink: 0;
}

.mode-pill::before {
  content: "●";
  margin-right: 7px;
  color: #e04b40;
}

/* Textlogik */
.mode-text-on {
  display: none;
}

.mode-text-off {
  display: inline;
}

/* Aktiv = grün */
.mode-switch input[type="radio"]:checked + .mode-pill {
  border-color: #35c28a;
  background: rgba(53, 194, 138, 0.16);
  color: #baf5dc;
  box-shadow:
    0 0 0 1px rgba(53, 194, 138, 0.18),
    0 0 16px rgba(53, 194, 138, 0.5);
}

.mode-switch input[type="radio"]:checked + .mode-pill::before {
  color: #35c28a;
}

.mode-switch input[type="radio"]:checked + .mode-pill .mode-text-off {
  display: none;
}

.mode-switch input[type="radio"]:checked + .mode-pill .mode-text-on {
  display: inline;
}

@media (max-width: 900px) {
  .input-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .mode-heading-control {
    justify-content: flex-start;
  }

  .mode-switch {
  width: 215px;
  flex-basis: 215px;
}
}
/* ===== Archivierte Runden: Farbblöcke ===== */

/*
Spaltenaufbau der Archiv-Tabelle:

1–2   Datum / Uhrzeit
3–7   Fred
8–12  Korre
13–17 Daniel
18    Platzierung
*/

/* Kopfzeile wie in der Eingabeseite dunkel darstellen */
.archive-list-card .archive-rounds-table thead th {
  background-color: #1f1f1f;
  border-bottom: 2px solid #333;
  text-align: center;
}

/* Fred: Spalten 3 bis 7 */
.archive-list-card .archive-rounds-table tbody td:nth-child(3),
.archive-list-card .archive-rounds-table tbody td:nth-child(4),
.archive-list-card .archive-rounds-table tbody td:nth-child(5),
.archive-list-card .archive-rounds-table tbody td:nth-child(6),
.archive-list-card .archive-rounds-table tbody td:nth-child(7) {
  background-color: rgba(255, 99, 99, 0.70);
}

/* Korre: Spalten 8 bis 12 */
.archive-list-card .archive-rounds-table tbody td:nth-child(8),
.archive-list-card .archive-rounds-table tbody td:nth-child(9),
.archive-list-card .archive-rounds-table tbody td:nth-child(10),
.archive-list-card .archive-rounds-table tbody td:nth-child(11),
.archive-list-card .archive-rounds-table tbody td:nth-child(12) {
  background-color: rgba(99, 255, 170, 0.70);
}

/* Daniel: Spalten 13 bis 17 */
.archive-list-card .archive-rounds-table tbody td:nth-child(13),
.archive-list-card .archive-rounds-table tbody td:nth-child(14),
.archive-list-card .archive-rounds-table tbody td:nth-child(15),
.archive-list-card .archive-rounds-table tbody td:nth-child(16),
.archive-list-card .archive-rounds-table tbody td:nth-child(17) {
  background-color: rgba(99, 170, 255, 0.70);
}

/* Trennlinie nach Fred, Korre und Daniel */
.archive-list-card .archive-rounds-table th:nth-child(7),
.archive-list-card .archive-rounds-table td:nth-child(7),
.archive-list-card .archive-rounds-table th:nth-child(12),
.archive-list-card .archive-rounds-table td:nth-child(12),
.archive-list-card .archive-rounds-table th:nth-child(17),
.archive-list-card .archive-rounds-table td:nth-child(17) {
  border-right: 2px solid #2f2f2f;
}

/* Einheitliche Zelloptik */
.archive-list-card .archive-rounds-table th,
.archive-list-card .archive-rounds-table td {
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
}

/* ==================================================
   Tachometer neben der Eingabekachel
   ================================================== */

.container {
  grid-template-columns:
    minmax(0, 600px)
    minmax(0, 1fr);

  max-width: 1400px;
  gap: 24px;
}

.input-card {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 100%;
}

.gauge-grid {
  grid-column: 2;
  grid-row: 1;

  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  grid-template-rows:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
  width: 100%;
  height: 100%;
  min-width: 0;

  align-self: stretch;
}

.list-card {
  grid-column: 1 / -1;
  grid-row: 2;
}

.gauge-card {
  min-width: 0;
  padding: 14px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  overflow: hidden;
}

.gauge-card h3 {
  margin: 0 0 6px;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
}

.gauge-shell {
  width: 100%;
  text-align: center;
}

.gauge-svg {
  display: block;
  width: 100%;
  height: 165px;
  overflow: visible;
  margin: 4px auto 0;
}

.gauge-needle {
  stroke: #e04b40;
  stroke-width: 5;
  stroke-linecap: round;

  filter:
    drop-shadow(0 0 5px rgba(224, 75, 64, .65));

  transition:
    x2 .25s ease,
    y2 .25s ease;
}

.gauge-center {
  fill: #161c24;
  stroke: #3a4655;
  stroke-width: 3;
}

.gauge-record-mark {
  stroke: #f5c453;
  stroke-width: 3;
  stroke-linecap: round;

  filter:
    drop-shadow(0 0 5px rgba(245, 196, 83, .75));
}

/* Rekordzahl direkt neben der goldenen Markierung */
.gauge-record-value {
  fill: #f5c453;
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  pointer-events: none;

  paint-order: stroke;
  stroke: #101419;
  stroke-width: 3px;
  stroke-linejoin: round;

  filter:
    drop-shadow(0 0 3px rgba(245, 196, 83, .55));
}

.gauge-scale-label {
  fill: #a9b1bb;
  font-size: 10px;
  font-weight: 600;
}

.gauge-main-value {
  margin-top: -14px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  color: #e9eef4;
  font-variant-numeric: tabular-nums;
}

.gauge-record {
  margin-top: 6px;
  min-height: 30px;
  color: #a9b1bb;
  font-size: 11px;
  line-height: 1.35;
}

@media (max-width: 1250px) and (min-width: 1001px) {
  .container {
    grid-template-columns:
      minmax(0, 600px)
      minmax(260px, 1fr);
  }

  .gauge-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1000px) {
  .container {
    grid-template-columns: 1fr;
    width: calc(100% - 24px);
    margin: 24px auto;
  }

  .input-card {
    grid-column: 1;
    grid-row: 1;
  }

  .gauge-grid {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .list-card {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 650px) {
  .gauge-grid {
    grid-template-columns: 1fr;
  }

  .gauge-main-value {
    font-size: 27px;
  }
}

/* ==================================================
   Korrektur: Eingabe, Tachometer und Rundentabelle
   ================================================== */

/* Gesamtbereich nicht verbreitern */
.container {
  grid-template-columns:
    minmax(0, 600px)
    minmax(0, 1fr);

  align-items: stretch;
  max-width: 1400px;
  width: calc(100% - 72px);
}

/*
Die Eingabekachel behält ihre eigene Höhe
und wird nicht auf die Höhe der Tachometer gestreckt.
*/
.input-card {
  grid-column: 1;
  grid-row: 1;

  width: 100%;
  max-width: 600px;
  height: max-content;
  align-self: start;
}

/*
Die vier Tachometer teilen sich den verfügbaren
rechten Bereich gleichmäßig als 2 × 2 Raster.
*/
.gauge-grid {
  grid-column: 2;
  grid-row: 1;

  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  grid-template-rows:
    repeat(2, minmax(0, 1fr));

  gap: 14px;
  width: 100%;
  min-width: 0;
  align-self: start;
}

/* Alle vier Tachometer gleich groß */
.gauge-card {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 18px 16px;
}

/*
Die Rundentabelle steht unter beiden Bereichen
und nutzt die gesamte Breite des Containers.
*/
.list-card {
  grid-column: 1 / -1;
  grid-row: 2;

  width: 100%;
  max-width: none;
  min-width: 0;
}

/* Kein horizontaler Scrollbalken bei der Rundentabelle */
.list-card .table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

/*
Die Tabelle wird auf die vorhandene Breite verteilt,
statt breiter als die Karte zu werden.
*/
.list-card .table {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  table-layout: auto;
}

/* Zellen dürfen sich verkleinern */
.list-card .table th,
.list-card .table td {
  min-width: 0;
  padding: 6px 3px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  font-size: clamp(9px, 0.7vw, 11px);
}

/* Buttons innerhalb der Tabelle kompakter halten */
.list-card .table .btn {
  max-width: 100%;
  padding: 6px 8px;
  font-size: 11px;
  white-space: nowrap;
}

/*
Auch zwischen 1001 und 1250 Pixeln bleiben
die Tachometer in einem gleichmäßigen 2 × 2 Raster.
Diese Regel überschreibt die bisherige einspaltige Darstellung.
*/
@media (max-width: 1250px) and (min-width: 1001px) {
  .container {
    grid-template-columns:
      minmax(0, 560px)
      minmax(0, 1fr);
  }

  .input-card {
    max-width: 560px;
  }

  .gauge-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .gauge-card {
    padding: 14px 12px;
  }

  .gauge-svg {
    height: 145px;
  }

  .gauge-main-value {
    font-size: 32px;
  }
}

/* Tablet: Eingabe, Tachometer und Tabelle untereinander */
@media (max-width: 1000px) {
  .container {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 24px);
    margin: 24px auto;
  }

  .input-card {
    grid-column: 1;
    grid-row: 1;

    width: 100%;
    max-width: none;
  }

  .gauge-grid {
    grid-column: 1;
    grid-row: 2;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .list-card {
    grid-column: 1;
    grid-row: 3;
  }
}

/* Smartphone: Tachometer untereinander */
@media (max-width: 650px) {
  .gauge-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .list-card .table th,
  .list-card .table td {
    padding: 4px 2px;
    font-size: 9px;
  }

  .list-card .table .btn {
    padding: 4px;
    font-size: 9px;
  }
}

.btn.btn-gold {
  color: #1a1407;
  border-color: #8a6b1f;
  background: linear-gradient(180deg, #f5c453, #c7921f);
  box-shadow:
    0 0 0 1px rgba(245, 196, 83, .18),
    0 0 14px rgba(245, 196, 83, .28);
}

.btn.btn-gold:hover {
  background: linear-gradient(180deg, #ffd66b, #d6a31c);
  border-color: #b88a2c;
  box-shadow:
    0 0 0 1px rgba(245, 196, 83, .28),
    0 0 18px rgba(245, 196, 83, .42);
}

/* Offene JSON-Importe im Navigationsbutton */
.import-review-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.import-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 22px;
  height: 22px;
  padding: 0 6px;

  border-radius: 999px;

  background: #d43a2f;
  color: #ffffff;

  font-size: 11px;
  font-weight: 800;

  box-shadow:
    0 0 10px rgba(212, 58, 47, .55);
}

/* ==================================================
   JSON-Import: Prüf- und Bestätigungsseite
   ================================================== */

.review-container {
  max-width: 1400px;
  margin: 24px auto;
  padding: 0 18px 50px;
}

.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.review-head h1 {
  margin: 0 0 6px;
  color: #f5c453;
}

.review-head p {
  margin: 0;
  color: #a9b1bb;
}

.review-empty {
  text-align: center;
}

.review-card {
  margin-top: 20px;
}

.review-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.review-card-head h2 {
  margin: 0 0 8px;
}

.review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: #a9b1bb;
  font-size: 12px;
}

.review-meta strong {
  color: #e9eef4;
}

.review-warnings {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 196, 83, .45);
  border-radius: 14px;
  background: rgba(245, 196, 83, .08);
  color: #f5d98b;
}

.review-warnings ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.review-global-grid {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.4fr)
    minmax(150px, .7fr)
    minmax(130px, .6fr)
    minmax(180px, .8fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 18px;
}

.review-global-grid .select {
  width: 100%;
  min-height: 40px;
}

.review-kill-check {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
  padding: 10px 12px;
  border: 1px solid #27303b;
  border-radius: 12px;
  background: #0f1318;
  color: #a9b1bb;
  font-size: 12px;
}

.review-kill-check strong {
  color: #e9eef4;
  text-align: right;
}

.review-player-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.review-player-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #27303b;
  border-radius: 16px;
  background: #0f1318;
}

.review-player-card h3 {
  margin: 0 0 8px;
  text-align: center;
  color: #f5c453;
}

.review-detected {
  min-height: 54px;
  margin-bottom: 12px;
  color: #a9b1bb;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.review-detected strong,
.review-detected span {
  display: block;
}

.review-detected strong {
  color: #e9eef4;
}

.review-field-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.review-survival-field {
  grid-column: 1 / -1;
}

.review-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.review-raw {
  margin-top: 18px;
  color: #a9b1bb;
}

.review-raw summary {
  cursor: pointer;
}

.review-raw pre {
  max-height: 420px;
  overflow: auto;
  padding: 14px;
  border: 1px solid #27303b;
  border-radius: 12px;
  background: #090c10;
  color: #cbd3dd;
  white-space: pre-wrap;
  word-break: break-word;
}

.import-review-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.import-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #d43a2f;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(212, 58, 47, .55);
}

@media (max-width: 1000px) {
  .review-global-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .review-player-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .review-head,
  .review-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .review-global-grid {
    grid-template-columns: 1fr;
  }

  .review-field-grid {
    grid-template-columns: 1fr;
  }

  .review-survival-field {
    grid-column: auto;
  }

  .review-actions {
    justify-content: stretch;
  }

  .review-actions .btn {
    width: 100%;
    text-align: center;
  }
}/* ==================================================
   Live-Coaching
   ================================================== */

.coaching-nav,
.coaching-nav-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.coaching-container {
  max-width: 1500px;
  margin: 24px auto;
  padding: 0 18px 50px;
}

.coaching-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
}

.coaching-hero > div:first-child {
  flex: 1;
  padding: 8px 0;
}

.coaching-eyebrow {
  margin-bottom: 6px;
  color: #f5c453;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.coaching-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
}

.coaching-hero p,
.coaching-history p,
.coaching-report-head p {
  margin: 0;
  color: #a9b1bb;
  line-height: 1.55;
}

.coaching-progress-card {
  min-width: 250px;
  padding: 18px 22px;
  border: 1px solid rgba(245, 196, 83, .35);
  border-radius: 20px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(245, 196, 83, .10) 0%, transparent 48%),
    #12161c;
  box-shadow: var(--shadow);
  text-align: center;
}

.coaching-progress-card span,
.coaching-progress-card small {
  display: block;
  color: #a9b1bb;
}

.coaching-progress-card span {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.coaching-progress-card strong {
  display: block;
  margin: 4px 0 8px;
  color: #f5c453;
  font-size: 44px;
  line-height: 1;
}

.coaching-progress-card small {
  font-size: 12px;
  line-height: 1.4;
}

.coaching-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 16px;
}

.coaching-status strong,
.coaching-status span {
  display: block;
}

.coaching-status strong {
  margin-bottom: 4px;
}

.coaching-status span {
  color: #a9b1bb;
  font-size: 12px;
  line-height: 1.45;
}

.coaching-status-pending {
  border: 1px solid rgba(245, 196, 83, .42);
  background: rgba(245, 196, 83, .08);
}

.coaching-status-error {
  border: 1px solid rgba(194, 58, 53, .55);
  background: rgba(194, 58, 53, .10);
}

.coaching-spinner {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 3px solid rgba(245, 196, 83, .24);
  border-top-color: #f5c453;
  border-radius: 999px;
  animation: coaching-spin .9s linear infinite;
}

@keyframes coaching-spin {
  to { transform: rotate(360deg); }
}

.coaching-history,
.coaching-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.coaching-history h2,
.coaching-report-head h2 {
  margin: 0 0 5px;
}

.coaching-history-buttons {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.coaching-report-meta {
  display: grid;
  gap: 5px;
  color: #a9b1bb;
  font-size: 11px;
  text-align: right;
}

.coaching-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.coaching-team-card {
  grid-column: 1 / -1;
}

.coaching-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.coaching-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.coaching-card-kicker {
  margin-bottom: 3px;
  color: #a9b1bb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.coaching-card h2 {
  margin: 0;
  color: #f5c453;
}

.coaching-summary {
  margin: 0 0 16px;
  padding: 14px;
  border-left: 3px solid #f5c453;
  border-radius: 0 12px 12px 0;
  background: rgba(245, 196, 83, .06);
  color: #e9eef4;
  font-size: 14px;
  line-height: 1.6;
}

.coaching-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  flex: 1;
}

.coaching-list-block {
  min-width: 0;
  padding: 13px;
  border: 1px solid #27303b;
  border-radius: 14px;
  background: #0f1318;
}

.coaching-list-block h3 {
  margin: 0 0 8px;
  color: #e9eef4;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.coaching-list-block ul {
  margin: 0;
  padding-left: 18px;
}

.coaching-list-block li {
  margin-bottom: 7px;
  color: #cbd3dd;
  font-size: 12px;
  line-height: 1.5;
}

.coaching-list-block li:last-child {
  margin-bottom: 0;
}

.coaching-positive {
  border-color: rgba(53, 194, 138, .35);
}

.coaching-positive h3 {
  color: #74ddb2;
}

.coaching-observation {
  border-color: rgba(245, 196, 83, .34);
}

.coaching-observation h3 {
  color: #f5c453;
}

.coaching-hypothesis h3 {
  color: #9eb6d1;
}

.coaching-actions-list {
  border-color: rgba(224, 75, 64, .35);
}

.coaching-actions-list h3 {
  color: #ff9189;
}

.coaching-focus {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(245, 196, 83, .45);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(245, 196, 83, .11), rgba(245, 196, 83, .05));
}

.coaching-focus span,
.coaching-focus strong {
  display: block;
}

.coaching-focus span {
  margin-bottom: 5px;
  color: #a9b1bb;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.coaching-focus strong {
  color: #f5d98b;
  font-size: 13px;
  line-height: 1.5;
}

.coaching-muted,
.coaching-empty-section {
  color: #a9b1bb;
  font-size: 12px;
  line-height: 1.5;
}

.coaching-muted {
  margin: 0;
}

.coaching-empty-section {
  padding: 20px;
  border: 1px dashed #2a323e;
  border-radius: 14px;
  text-align: center;
}

.coaching-no-report {
  text-align: center;
}

.coaching-no-report h2 {
  color: #f5c453;
}

.coaching-no-report p {
  color: #a9b1bb;
}

@media (max-width: 1100px) {
  .coaching-grid {
    grid-template-columns: 1fr;
  }

  .coaching-team-card {
    grid-column: auto;
  }
}

@media (max-width: 800px) {
  .coaching-hero,
  .coaching-history,
  .coaching-report-head,
  .coaching-status {
    flex-direction: column;
    align-items: stretch;
  }

  .coaching-progress-card {
    min-width: 0;
  }

  .coaching-history-buttons {
    justify-content: flex-start;
  }

  .coaching-report-meta {
    text-align: left;
  }
}

@media (max-width: 620px) {
  .coaching-container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .coaching-section-grid {
    grid-template-columns: 1fr;
  }

  .coaching-card-head {
    flex-direction: column;
  }

  .coaching-nav {
    flex-wrap: wrap;
  }
}

/* ==================================================
   COCKPIT DESIGN V1
   Eingabeseite und Scoreboard
   ================================================== */

.cockpit-page {
  --cockpit-bg: #02070d;
  --cockpit-panel: #07121e;
  --cockpit-panel-2: #0a1724;
  --cockpit-line: rgba(44, 155, 224, .42);
  --cockpit-line-soft: rgba(44, 155, 224, .16);
  --cockpit-red: #ff3d35;
  --cockpit-red-dark: #8e1718;
  --cockpit-cyan: #39b9ff;
  --cockpit-green: #37e39c;
  --cockpit-gold: #ffc43d;
  --cockpit-copy: #d8e9f7;
  --cockpit-muted: #6f8ca4;

  min-height: 100vh;
  font-family: "Rajdhani", system-ui, sans-serif;
  color: var(--cockpit-copy);
  background:
    radial-gradient(circle at 50% -15%, rgba(23, 91, 141, .23), transparent 37%),
    radial-gradient(circle at 8% 30%, rgba(165, 22, 32, .10), transparent 27%),
    linear-gradient(180deg, #030a11 0%, #02070d 45%, #03101a 100%);
}

.cockpit-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(rgba(45, 139, 199, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 139, 199, .055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.cockpit-page *,
.cockpit-page *::before,
.cockpit-page *::after {
  box-sizing: border-box;
}

.cockpit-header {
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid rgba(45, 145, 208, .38);
  background:
    linear-gradient(180deg, rgba(5, 15, 25, .98), rgba(2, 8, 14, .96));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .48),
    0 1px 0 rgba(49, 180, 255, .15);
  backdrop-filter: blur(16px);
}

.cockpit-header-main {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 22px;
}

.cockpit-brand {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cockpit-copy);
  text-decoration: none;
}

.cockpit-brand-mark {
  position: relative;
  width: 44px;
  height: 48px;
  flex: 0 0 44px;
  filter:
    drop-shadow(0 0 8px rgba(255, 61, 53, .34));
}

.cockpit-brand-mark::before,
.cockpit-brand-mark::after,
.cockpit-brand-mark > span {
  content: "";
  position: absolute;
  display: block;
}

.cockpit-brand-mark::before {
  left: 4px;
  top: 1px;
  width: 19px;
  height: 44px;
  background: linear-gradient(180deg, #ff4e45, #b91f25);
  clip-path: polygon(56% 0, 100% 0, 45% 100%, 0 100%);
}

.cockpit-brand-mark::after {
  right: 4px;
  top: 1px;
  width: 19px;
  height: 44px;
  background: linear-gradient(180deg, #ff4e45, #b91f25);
  clip-path: polygon(0 0, 44% 0, 100% 100%, 55% 100%);
}

.cockpit-brand-mark > span {
  left: 13px;
  bottom: 8px;
  width: 18px;
  height: 8px;
  background: #08111a;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  z-index: 2;
}

.cockpit-brand-copy {
  display: grid;
  line-height: 1;
}

.cockpit-brand-copy strong {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(15px, 1.28vw, 22px);
  font-weight: 800;
  letter-spacing: .035em;
  text-shadow: 0 0 14px rgba(103, 190, 255, .22);
}

.cockpit-brand-copy small {
  margin-top: 6px;
  color: var(--cockpit-cyan);
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  letter-spacing: .16em;
}

.cockpit-nav {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cockpit-nav-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(43, 136, 198, .45);
  color: #bfd5e8;
  background:
    linear-gradient(180deg, rgba(10, 29, 45, .94), rgba(5, 16, 27, .94));
  box-shadow:
    inset 0 0 18px rgba(28, 125, 188, .06),
    0 0 0 1px rgba(2, 10, 17, .8);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.cockpit-nav-btn:hover,
.cockpit-nav-btn:focus-visible {
  color: #fff;
  border-color: rgba(57, 185, 255, .85);
  box-shadow:
    inset 0 0 20px rgba(57, 185, 255, .12),
    0 0 16px rgba(57, 185, 255, .16);
  transform: translateY(-1px);
  outline: none;
}

.cockpit-nav-primary {
  color: #fff;
  border-color: rgba(255, 61, 53, .78);
  background:
    linear-gradient(180deg, rgba(202, 42, 37, .96), rgba(113, 20, 24, .96));
  box-shadow:
    inset 0 0 18px rgba(255, 145, 128, .18),
    0 0 16px rgba(255, 61, 53, .18);
}

.cockpit-nav-gold {
  color: #ffe29a;
  border-color: rgba(255, 196, 61, .72);
  background:
    linear-gradient(180deg, rgba(123, 82, 8, .82), rgba(53, 36, 5, .94));
  box-shadow:
    inset 0 0 18px rgba(255, 196, 61, .10),
    0 0 16px rgba(255, 196, 61, .12);
}

.cockpit-nav-danger {
  color: #ffc7c4;
  border-color: rgba(255, 61, 53, .48);
}

.cockpit-count {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  color: #fff;
  background: var(--cockpit-red);
  font-size: 10px;
  box-shadow: 0 0 10px rgba(255, 61, 53, .5);
}

.cockpit-status-strip {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.1fr)
    minmax(180px, 1.35fr)
    repeat(6, minmax(110px, .85fr));
  border-top: 1px solid rgba(45, 145, 208, .24);
  background:
    linear-gradient(90deg, rgba(4, 15, 25, .98), rgba(3, 13, 23, .98));
}

.cockpit-status-item {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 18px;
  border-right: 1px solid rgba(45, 145, 208, .18);
}

.cockpit-status-item:last-child {
  border-right: 0;
}

.cockpit-status-icon {
  color: #7bbde8;
  font-size: 20px;
  text-shadow: 0 0 10px rgba(57, 185, 255, .28);
}

.cockpit-status-copy {
  min-width: 0;
  display: grid;
}

.cockpit-status-copy small {
  color: #52758e;
  font-family: "Orbitron", sans-serif;
  font-size: 8px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.cockpit-status-copy strong {
  overflow: hidden;
  color: #cfe4f4;
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-green {
  color: var(--cockpit-green) !important;
  text-shadow: 0 0 10px rgba(55, 227, 156, .26);
}

.status-red {
  color: var(--cockpit-red) !important;
  text-shadow: 0 0 10px rgba(255, 61, 53, .28);
}

/* ---------- gemeinsame Cockpit-Panels ---------- */

.cockpit-page .card,
.cockpit-page .board-card,
.cockpit-panel {
  position: relative;
  border: 1px solid rgba(45, 145, 208, .34);
  border-radius: 4px 18px 4px 18px;
  background:
    linear-gradient(135deg, rgba(17, 38, 56, .20), transparent 24%),
    radial-gradient(circle at 100% 0, rgba(42, 149, 217, .10), transparent 38%),
    linear-gradient(180deg, rgba(8, 21, 34, .97), rgba(4, 13, 22, .98));
  box-shadow:
    inset 0 0 0 1px rgba(5, 16, 27, .86),
    inset 0 0 34px rgba(19, 106, 164, .035),
    0 15px 34px rgba(0, 0, 0, .34);
}

.cockpit-page .card::before,
.cockpit-page .board-card::before,
.cockpit-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  width: 74px;
  height: 2px;
  background: var(--cockpit-cyan);
  box-shadow: 0 0 12px rgba(57, 185, 255, .56);
}

.cockpit-page .card::after,
.cockpit-page .board-card::after,
.cockpit-panel::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 9px;
  width: 34px;
  height: 8px;
  opacity: .45;
  border-right: 1px solid var(--cockpit-cyan);
  border-bottom: 1px solid var(--cockpit-cyan);
}

.cockpit-page h1,
.cockpit-page h2,
.cockpit-page h3 {
  font-family: "Orbitron", sans-serif;
  letter-spacing: .018em;
}

/* ---------- Eingabeseite ---------- */

.cockpit-app-page .cockpit-dashboard {
  width: calc(100% - 32px) !important;
  max-width: 1780px !important;
  margin: 18px auto 34px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns:
    minmax(470px, .92fr)
    minmax(720px, 1.38fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.cockpit-app-page .input-card {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 22px !important;
  border-color: rgba(255, 61, 53, .48) !important;
  box-shadow:
    inset 0 0 0 1px rgba(93, 16, 21, .34),
    inset 0 0 44px rgba(255, 61, 53, .025),
    0 18px 40px rgba(0, 0, 0, .36) !important;
}

.cockpit-app-page .input-card::before {
  background: var(--cockpit-red);
  box-shadow: 0 0 13px rgba(255, 61, 53, .62);
}

.cockpit-panel-heading,
.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cockpit-panel-heading {
  margin-bottom: 15px;
}

.cockpit-panel-heading h2,
.panel-title-row h2 {
  margin: 0;
  color: #edf7ff;
  font-size: clamp(17px, 1.3vw, 24px);
  text-transform: uppercase;
}

.cockpit-kicker {
  display: block;
  margin-bottom: 5px;
  color: #50718a;
  font-family: "Orbitron", sans-serif;
  font-size: 8px;
  letter-spacing: .18em;
}

.panel-heading-icon {
  color: var(--cockpit-red);
  text-shadow: 0 0 12px rgba(255, 61, 53, .45);
}

.cockpit-app-page .toast {
  margin: 0;
  color: #9ff4ce;
  border: 1px solid rgba(55, 227, 156, .38);
  background: rgba(16, 89, 64, .22);
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  letter-spacing: .05em;
}

.cockpit-mode-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 16px;
}

.cockpit-mode-selector .mode-switch {
  width: auto;
  min-width: 0;
  flex: none;
}

.cockpit-mode-selector .mode-pill {
  min-height: 42px;
  border-radius: 3px 10px 3px 10px;
  border-color: rgba(255, 61, 53, .62);
  color: #f7a7a2;
  background:
    linear-gradient(180deg, rgba(77, 19, 24, .76), rgba(30, 11, 15, .92));
  box-shadow:
    inset 0 0 15px rgba(255, 61, 53, .06),
    0 0 9px rgba(255, 61, 53, .10);
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
}

.cockpit-mode-selector .mode-pill::before {
  display: none;
}

.cockpit-mode-selector .mode-symbol {
  margin-right: 8px;
  font-size: 14px;
}

.cockpit-mode-selector .mode-switch input:checked + .mode-pill {
  border-color: rgba(55, 227, 156, .86);
  color: #55f0b0;
  background:
    linear-gradient(180deg, rgba(13, 85, 60, .72), rgba(4, 35, 25, .92));
  box-shadow:
    inset 0 0 18px rgba(55, 227, 156, .10),
    0 0 14px rgba(55, 227, 156, .24);
}

.cockpit-round-form {
  display: grid;
  gap: 0;
  padding: 13px 14px 15px;
  border-top: 1px solid rgba(58, 128, 180, .24);
  border-bottom: 1px solid rgba(58, 128, 180, .24);
  background:
    linear-gradient(90deg, rgba(4, 14, 23, .70), rgba(8, 23, 36, .36), rgba(4, 14, 23, .70));
}

.stat-matrix-head,
.stat-matrix-row {
  display: grid;
  grid-template-columns:
    minmax(135px, .9fr)
    repeat(3, minmax(76px, 1fr));
  gap: 10px;
  align-items: center;
}

.stat-matrix-head {
  min-height: 34px;
  margin-bottom: 5px;
  color: #9cb4c7;
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  text-transform: uppercase;
}

.stat-matrix-head > div:not(:first-child) {
  text-align: center;
}

.player-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 7px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.player-fred {
  color: #ff5f63;
  background: currentColor;
}

.player-korre {
  color: #ffc43d;
  background: currentColor;
}

.player-daniel {
  color: #39b9ff;
  background: currentColor;
}

.stat-matrix-row {
  min-height: 45px;
  padding: 5px 0;
  border-top: 1px solid rgba(70, 124, 161, .12);
}

.stat-matrix-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c1d3df;
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.stat-matrix-row label > span {
  width: 22px;
  color: #9dc4df;
  font-size: 16px;
  text-align: center;
}

.stat-matrix-row input,
.placement-control input {
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(55, 112, 153, .48);
  border-radius: 3px 8px 3px 8px;
  outline: 0;
  color: #dff1ff;
  background:
    linear-gradient(180deg, rgba(7, 19, 30, .98), rgba(3, 12, 20, .98));
  box-shadow:
    inset 0 0 12px rgba(17, 70, 106, .09);
  font-family: "Orbitron", sans-serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.stat-matrix-row input:focus,
.placement-control input:focus {
  border-color: rgba(57, 185, 255, .92);
  background: #071827;
  box-shadow:
    inset 0 0 14px rgba(57, 185, 255, .08),
    0 0 0 2px rgba(57, 185, 255, .10),
    0 0 12px rgba(57, 185, 255, .18);
}

.stat-matrix-row input::placeholder,
.placement-control input::placeholder {
  color: #526f84;
}

.cockpit-form-footer {
  display: grid;
  grid-template-columns: minmax(170px, .62fr) minmax(220px, 1fr);
  gap: 14px;
  align-items: end;
  margin-top: 14px;
}

.placement-control {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 100px;
  gap: 10px;
  align-items: center;
  color: #c5d6e2;
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  text-transform: uppercase;
}

.cockpit-save-button {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid rgba(255, 61, 53, .92);
  border-radius: 3px 12px 3px 12px;
  color: #fff;
  background:
    linear-gradient(180deg, #c72c2a, #711519);
  box-shadow:
    inset 0 0 18px rgba(255, 147, 130, .12),
    0 0 15px rgba(255, 61, 53, .22);
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
  cursor: pointer;
}

.cockpit-save-button:hover,
.cockpit-save-button:focus-visible {
  background:
    linear-gradient(180deg, #ec4038, #8c191d);
  box-shadow:
    inset 0 0 20px rgba(255, 173, 156, .18),
    0 0 21px rgba(255, 61, 53, .36);
  outline: none;
}

.cockpit-panel-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  padding: 10px 12px;
  border: 1px solid rgba(47, 121, 171, .27);
  color: #7696ad;
  background: rgba(3, 13, 22, .72);
  font-size: 12px;
}

.cockpit-panel-note > span {
  color: #8bc9f1;
}

/* Tachometer */

.cockpit-app-page .gauge-grid {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0;
}

.cockpit-app-page .gauge-card {
  min-height: 326px;
  padding: 17px 20px 14px !important;
  border-color: rgba(45, 145, 208, .55) !important;
  border-radius: 4px 18px 4px 18px !important;
  overflow: hidden;
}

.cockpit-app-page .gauge-card h3 {
  margin: 0;
  color: #e6f3fc;
  font-size: 13px;
  text-transform: uppercase;
}

.gauge-title-icon {
  margin-right: 9px;
  color: #8bd5ff;
  font-size: 18px;
  text-shadow: 0 0 11px rgba(57, 185, 255, .42);
}

.cockpit-app-page .gauge-svg {
  height: 190px;
  margin-top: 5px;
  filter: drop-shadow(0 0 9px rgba(57, 185, 255, .07));
}

.cockpit-app-page .gauge-main-value {
  margin-top: -17px;
  color: #f3f8fc;
  font-family: "Orbitron", sans-serif;
  font-size: 46px;
  text-shadow: 0 0 18px rgba(129, 203, 255, .16);
}

.cockpit-app-page .gauge-record {
  min-height: 36px;
  display: grid;
  place-items: center;
  margin: 9px 0 0;
  padding: 8px;
  border: 1px solid rgba(45, 145, 208, .24);
  border-radius: 2px 9px 2px 9px;
  color: #7898af;
  background: rgba(3, 13, 22, .65);
  font-size: 11px;
}

.cockpit-app-page .gauge-record-mark,
.cockpit-app-page .gauge-record-value {
  filter:
    drop-shadow(0 0 5px rgba(255, 196, 61, .85));
}

.cockpit-app-page .gauge-needle {
  stroke: #ff4b43;
  stroke-width: 4;
  filter:
    drop-shadow(0 0 6px rgba(255, 61, 53, .72));
}

.cockpit-app-page .gauge-center {
  fill: #07121e;
  stroke: #3c5d75;
}

/* Kampfprotokoll */

.cockpit-app-page .list-card {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 14px !important;
  overflow: hidden;
}

.panel-title-row {
  min-height: 42px;
  padding: 0 4px 10px;
}

.panel-title-row h2 {
  font-size: 14px;
}

.cockpit-table-count {
  padding: 6px 10px;
  border: 1px solid rgba(45, 145, 208, .28);
  color: #88a9c0;
  background: rgba(5, 17, 27, .72);
  font-family: "Orbitron", sans-serif;
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cockpit-page .table-wrap {
  border: 1px solid rgba(42, 109, 156, .20);
  border-radius: 3px 10px 3px 10px;
  background: rgba(2, 9, 15, .52);
}

.cockpit-page .table {
  border-spacing: 0;
  color: #c8dae6;
  font-variant-numeric: tabular-nums;
}

.cockpit-page .table thead th {
  color: #82a1b8;
  border-bottom: 1px solid rgba(48, 127, 180, .34);
  background:
    linear-gradient(180deg, rgba(10, 29, 44, .95), rgba(5, 17, 28, .95)) !important;
  font-family: "Orbitron", sans-serif;
  font-size: 8px;
  letter-spacing: .045em;
}

.cockpit-page .table tbody td {
  border-bottom-color: rgba(45, 108, 151, .14);
  background: rgba(4, 14, 23, .38);
  font-size: 11px;
}

.cockpit-page .table tbody tr:nth-child(even) td {
  background: rgba(8, 23, 36, .42);
}

.cockpit-page .table tbody tr:hover td {
  background: rgba(18, 55, 80, .54) !important;
}

/* bisherige kräftige Spielerflächen zurücknehmen */
.cockpit-app-page .list-card .table tbody td:nth-child(n+4):nth-child(-n+8) {
  background-color: rgba(157, 33, 42, .10);
}

.cockpit-app-page .list-card .table tbody td:nth-child(n+9):nth-child(-n+13) {
  background-color: rgba(171, 126, 18, .09);
}

.cockpit-app-page .list-card .table tbody td:nth-child(n+14):nth-child(-n+18) {
  background-color: rgba(24, 113, 168, .11);
}

.cockpit-app-page .list-card .btn.danger {
  padding: 5px 8px;
  border-radius: 2px 7px 2px 7px;
  font-size: 9px;
}

/* ---------- Scoreboard ---------- */

.cockpit-scoreboard-page .cockpit-board-container {
  width: calc(100% - 32px);
  max-width: 1780px;
  margin: 16px auto 30px;
  padding: 0;
}

.cockpit-scoreboard-page .board.scoreboard-layout {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: 13px;
  padding: 0;
  align-items: stretch;
}

.cockpit-scoreboard-page .board-card {
  min-width: 0;
  padding: 15px;
  border-radius: 3px 16px 3px 16px;
  transform: none;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.cockpit-scoreboard-page .board-card:hover {
  transform: translateY(-2px);
  border-color: rgba(65, 174, 242, .65);
  box-shadow:
    inset 0 0 0 1px rgba(4, 15, 25, .85),
    0 16px 34px rgba(0, 0, 0, .38),
    0 0 18px rgba(57, 185, 255, .10);
}

.cockpit-scoreboard-page .board-card h2 {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 12px;
  color: #eaf5fc;
  font-size: 14px;
  text-transform: uppercase;
}

.score-icon {
  color: #80cbf7;
  font-size: 20px;
  text-shadow: 0 0 10px rgba(57, 185, 255, .34);
}

.score-icon-red {
  color: var(--cockpit-red);
  text-shadow: 0 0 10px rgba(255, 61, 53, .38);
}

.score-icon-gold {
  color: var(--cockpit-gold);
  text-shadow: 0 0 10px rgba(255, 196, 61, .38);
}

.score-icon-green {
  color: var(--cockpit-green);
  text-shadow: 0 0 10px rgba(55, 227, 156, .32);
}

.cockpit-scoreboard-page .scoreboard-main-card {
  grid-column: span 5 !important;
  min-height: 330px;
  order: 1;
}

.cockpit-scoreboard-page #killsCard,
.cockpit-scoreboard-page #damageCard {
  border-color: rgba(196, 43, 44, .52);
  background:
    linear-gradient(135deg, rgba(92, 13, 19, .12), transparent 28%),
    radial-gradient(circle at 100% 0, rgba(255, 61, 53, .08), transparent 36%),
    linear-gradient(180deg, rgba(10, 22, 34, .98), rgba(4, 13, 22, .99));
}

.cockpit-scoreboard-page #killsCard::before,
.cockpit-scoreboard-page #damageCard::before {
  background: var(--cockpit-red);
  box-shadow: 0 0 12px rgba(255, 61, 53, .54);
}

.cockpit-scoreboard-page #teamplayerCard {
  border-color: rgba(255, 196, 61, .55);
  background:
    linear-gradient(135deg, rgba(110, 77, 7, .13), transparent 28%),
    radial-gradient(circle at 100% 0, rgba(255, 196, 61, .08), transparent 36%),
    linear-gradient(180deg, rgba(10, 22, 34, .98), rgba(4, 13, 22, .99));
}

.cockpit-scoreboard-page #teamplayerCard::before {
  background: var(--cockpit-gold);
  box-shadow: 0 0 12px rgba(255, 196, 61, .50);
}

.cockpit-scoreboard-page .scoreboard-compact-card {
  grid-column: span 3 !important;
  min-height: 188px;
  order: 2;
  padding: 12px;
  cursor: pointer;
}

.cockpit-scoreboard-page .scoreboard-compact-card h2 {
  font-size: 12px;
  margin-bottom: 3px;
}

.cockpit-scoreboard-page .metric-card-hint {
  margin: 0 0 7px;
  color: #52748d;
  font-size: 9px;
  text-align: center;
}

.cockpit-scoreboard-page .scoreboard-compact-card .table thead th,
.cockpit-scoreboard-page .scoreboard-compact-card .table td {
  padding: 6px 5px;
  font-size: 9px;
}

.cockpit-scoreboard-page .scoreboard-main-card .table {
  width: 100%;
  min-width: 100%;
}

.cockpit-scoreboard-page .scoreboard-main-card .table thead th,
.cockpit-scoreboard-page .scoreboard-main-card .table td {
  padding: 8px 7px;
}

.cockpit-scoreboard-page .bars {
  gap: 8px;
  margin-top: 13px;
}

.cockpit-scoreboard-page .bar-row {
  gap: 9px;
}

.cockpit-scoreboard-page .bar-row .label {
  width: 62px;
  color: #aac1d1;
  font-family: "Orbitron", sans-serif;
  font-size: 8px;
}

.cockpit-scoreboard-page .bar-row .bar {
  height: 12px;
  border-color: rgba(45, 121, 174, .35);
  border-radius: 2px;
  background: #06121d;
}

.cockpit-scoreboard-page .bar-row .bar > div {
  background: linear-gradient(90deg, #1a77b4, #39b9ff);
  box-shadow: 0 0 8px rgba(57, 185, 255, .28);
}

.cockpit-scoreboard-page .scoreboard-main-card .bar-row:nth-child(1) .bar > div {
  background: linear-gradient(90deg, #8f1d22, #ff3d35);
  box-shadow: 0 0 8px rgba(255, 61, 53, .30);
}

.cockpit-scoreboard-page .scoreboard-main-card .bar-row:nth-child(2) .bar > div {
  background: linear-gradient(90deg, #117048, #37e39c);
  box-shadow: 0 0 8px rgba(55, 227, 156, .25);
}

.cockpit-scoreboard-page .scoreboard-main-card .bar-row:nth-child(3) .bar > div {
  background: linear-gradient(90deg, #175e9e, #39b9ff);
  box-shadow: 0 0 8px rgba(57, 185, 255, .25);
}

.cockpit-scoreboard-page .bar-row .val {
  width: 72px;
  color: #d9ebf7;
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
}

.cockpit-scoreboard-page #bestHoursCard {
  grid-column: span 8 !important;
  order: 3;
  min-height: 220px;
}

.cockpit-scoreboard-page .hours-groups {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cockpit-scoreboard-page .hours-group {
  padding: 10px;
  border: 1px solid rgba(49, 128, 182, .22);
  background: rgba(3, 13, 22, .62);
}

.cockpit-scoreboard-page .hours-group:first-child {
  border-color: rgba(55, 227, 156, .26);
}

.cockpit-scoreboard-page .hours-group:last-child {
  border-color: rgba(255, 61, 53, .25);
}

.cockpit-scoreboard-page .hours-group h3 {
  color: #91bad5;
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
}

.cockpit-scoreboard-page .hours-group:first-child h3 {
  color: var(--cockpit-green);
}

.cockpit-scoreboard-page .hours-group:last-child h3 {
  color: #ff6f68;
}

.cockpit-scoreboard-page .hour-mini-row {
  grid-template-columns: 28px 1fr;
  padding: 7px 8px;
  border-radius: 2px 8px 2px 8px;
  border-color: rgba(49, 128, 182, .20);
  background: rgba(5, 17, 28, .72);
}

.cockpit-scoreboard-page .hour-mini-rank {
  width: 23px;
  height: 23px;
  border-radius: 3px;
  font-size: 10px;
}

.cockpit-scoreboard-page .hour-mini-title {
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
}

.cockpit-scoreboard-page .hour-mini-meta {
  font-size: 10px;
}

.cockpit-summary-card {
  grid-column: span 7 !important;
  order: 3;
  min-height: 220px;
}

.summary-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
}

.summary-kpi {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 14px 9px;
  border: 1px solid rgba(45, 132, 192, .28);
  border-radius: 2px 10px 2px 10px;
  background:
    linear-gradient(180deg, rgba(8, 27, 42, .85), rgba(3, 13, 22, .88));
  text-align: center;
}

.summary-kpi span {
  color: #7595ab;
  font-family: "Orbitron", sans-serif;
  font-size: 8px;
  text-transform: uppercase;
}

.summary-kpi strong {
  margin: 12px 0 8px;
  color: #e7f4fc;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1;
  text-shadow: 0 0 12px rgba(57, 185, 255, .16);
}

.summary-kpi small {
  color: #5d7c92;
  font-size: 10px;
}

.cockpit-scoreboard-page .cockpit-utility-card {
  grid-column: span 5 !important;
  order: 4;
  min-height: 215px;
}

.cockpit-scoreboard-page .footer-bar {
  grid-column: 1 / -1;
}

.cockpit-footer-status {
  margin-top: 3px;
  padding: 10px 13px;
  border: 1px solid rgba(45, 145, 208, .22);
  color: #7394aa;
  background: rgba(3, 13, 22, .72);
  font-family: "Orbitron", sans-serif;
  font-size: 8px;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
}

.live-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--cockpit-green);
  box-shadow: 0 0 9px rgba(55, 227, 156, .68);
  animation: cockpit-pulse 1.8s ease-in-out infinite;
}

@keyframes cockpit-pulse {
  0%, 100% {
    opacity: .45;
    transform: scale(.82);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Modale im Cockpit-Stil */

.cockpit-page .hours-modal-content {
  border-color: rgba(45, 145, 208, .48);
  border-radius: 4px 18px 4px 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(57, 185, 255, .10), transparent 34%),
    linear-gradient(180deg, #081624, #030b13);
}

.cockpit-page .hours-modal-head h2 {
  color: #dff2ff;
}

/* ---------- Responsive ---------- */

@media (max-width: 1450px) {
  .cockpit-header-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .cockpit-nav {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .cockpit-status-strip {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
  }

  .cockpit-app-page .cockpit-dashboard {
    grid-template-columns:
      minmax(420px, .95fr)
      minmax(600px, 1.25fr) !important;
  }
}

@media (max-width: 1120px) {
  .cockpit-status-strip {
    overflow-x: auto;
    display: flex;
  }

  .cockpit-status-item {
    min-width: 170px;
  }

  .cockpit-app-page .cockpit-dashboard {
    grid-template-columns: 1fr !important;
  }

  .cockpit-app-page .input-card,
  .cockpit-app-page .gauge-grid,
  .cockpit-app-page .list-card {
    grid-column: 1 !important;
  }

  .cockpit-app-page .input-card {
    grid-row: 1 !important;
  }

  .cockpit-app-page .gauge-grid {
    grid-row: 2 !important;
  }

  .cockpit-app-page .list-card {
    grid-row: 3 !important;
  }

  .cockpit-scoreboard-page .scoreboard-main-card {
    grid-column: span 5 !important;
  }

  .cockpit-scoreboard-page .scoreboard-compact-card {
    grid-column: span 5 !important;
  }

  .cockpit-scoreboard-page #bestHoursCard,
  .cockpit-summary-card {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 820px) {
  .cockpit-header-main {
    padding: 10px 12px;
  }

  .cockpit-brand-copy strong {
    font-size: 15px;
  }

  .cockpit-nav-btn {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .cockpit-app-page .cockpit-dashboard,
  .cockpit-scoreboard-page .cockpit-board-container {
    width: calc(100% - 18px) !important;
  }

  .cockpit-app-page .gauge-grid {
    grid-template-columns: 1fr !important;
  }

  .cockpit-scoreboard-page .board.scoreboard-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cockpit-scoreboard-page .scoreboard-main-card,
  .cockpit-scoreboard-page .scoreboard-compact-card,
  .cockpit-scoreboard-page .cockpit-utility-card {
    grid-column: span 1 !important;
  }

  .cockpit-scoreboard-page #bestHoursCard,
  .cockpit-summary-card {
    grid-column: 1 / -1 !important;
  }

  .summary-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .cockpit-brand-mark {
    width: 36px;
    height: 40px;
    flex-basis: 36px;
  }

  .cockpit-brand-copy small {
    display: none;
  }

  .cockpit-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cockpit-nav-btn {
    white-space: normal;
    text-align: center;
  }

  .cockpit-mode-selector {
    grid-template-columns: 1fr;
  }

  .stat-matrix-head,
  .stat-matrix-row {
    grid-template-columns:
      minmax(105px, .95fr)
      repeat(3, minmax(52px, 1fr));
    gap: 6px;
  }

  .stat-matrix-row label {
    gap: 5px;
    font-size: 8px;
  }

  .stat-matrix-row label > span {
    width: 16px;
    font-size: 12px;
  }

  .stat-matrix-row input {
    padding: 5px;
    font-size: 10px;
  }

  .cockpit-form-footer {
    grid-template-columns: 1fr;
  }

  .placement-control {
    grid-template-columns: 1fr 100px;
  }

  .cockpit-scoreboard-page .board.scoreboard-layout {
    grid-template-columns: 1fr;
  }

  .cockpit-scoreboard-page .scoreboard-main-card,
  .cockpit-scoreboard-page .scoreboard-compact-card,
  .cockpit-scoreboard-page #bestHoursCard,
  .cockpit-summary-card,
  .cockpit-scoreboard-page .cockpit-utility-card {
    grid-column: 1 !important;
  }

  .cockpit-scoreboard-page .hours-groups,
  .summary-kpi-grid {
    grid-template-columns: 1fr;
  }
}


/* ==================================================
   COCKPIT DESIGN V2 – Lesbarkeit und komplette Website
   ================================================== */

.status-gold {
  color: var(--cockpit-gold) !important;
  text-shadow: 0 0 10px rgba(255, 196, 61, .36);
}

/* Einheitliche Aktionsbuttons innerhalb aller Cockpit-Seiten */
.cockpit-page .btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid rgba(43, 136, 198, .48);
  border-radius: 0;
  color: #c9dfef;
  background: linear-gradient(180deg, rgba(10, 29, 45, .96), rgba(5, 16, 27, .96));
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  box-shadow: inset 0 0 16px rgba(57, 185, 255, .05), 0 0 0 1px rgba(2, 10, 17, .82);
  font-family: "Rajdhani", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.cockpit-page .btn:hover,
.cockpit-page .btn:focus-visible {
  color: #fff;
  border-color: rgba(57, 185, 255, .88);
  box-shadow: inset 0 0 18px rgba(57, 185, 255, .11), 0 0 15px rgba(57, 185, 255, .17);
  transform: translateY(-1px);
  outline: none;
}

.cockpit-page .btn.primary {
  color: #fff;
  border-color: rgba(255, 61, 53, .76);
  background: linear-gradient(180deg, rgba(205, 45, 39, .97), rgba(111, 18, 23, .97));
  box-shadow: inset 0 0 17px rgba(255, 150, 135, .14), 0 0 14px rgba(255, 61, 53, .17);
}

.cockpit-page .btn.btn-gold {
  color: #ffe7a8;
  border-color: rgba(255, 196, 61, .72);
  background: linear-gradient(180deg, rgba(120, 81, 9, .88), rgba(51, 34, 5, .96));
}

.cockpit-page .btn.danger {
  color: #ffc7c4;
  border-color: rgba(255, 61, 53, .52);
  background: linear-gradient(180deg, rgba(91, 22, 27, .86), rgba(35, 10, 14, .96));
}

/* Breitere und besser lesbare Statuszeile */
.cockpit-status-copy small {
  color: #7899af;
  font-size: 9px;
  font-weight: 800;
}

.cockpit-status-copy strong {
  color: #e2f2fc;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

/* Lesbarkeit in Tabellen und Kacheln */
.cockpit-page .table thead th {
  color: #b8d3e5;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .055em;
  text-shadow: 0 0 8px rgba(57, 185, 255, .12);
}

.cockpit-page .table tbody td {
  color: #edf7fd;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.cockpit-page .table thead th,
.cockpit-page .table tbody td {
  padding-top: 9px;
  padding-bottom: 9px;
}

.cockpit-scoreboard-page .scoreboard-main-card h2 {
  min-height: 32px;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 800;
}

.cockpit-scoreboard-page .scoreboard-main-card .table thead th { font-size: 11px; }
.cockpit-scoreboard-page .scoreboard-main-card .table tbody td { font-size: 13px; font-weight: 600; }
.cockpit-scoreboard-page .scoreboard-compact-card h2 { font-size: 14px; font-weight: 800; }
.cockpit-scoreboard-page .scoreboard-compact-card .table thead th { font-size: 10px; font-weight: 800; }
.cockpit-scoreboard-page .scoreboard-compact-card .table tbody td { font-size: 11px; font-weight: 600; }
.cockpit-scoreboard-page .scoreboard-compact-card { min-height: 205px; }
.cockpit-scoreboard-page .metric-card-hint { color: #7899af; font-size: 10px; font-weight: 600; }
.cockpit-scoreboard-page .bar-row .label { color: #c0d4e1; font-size: 10px; font-weight: 800; }
.cockpit-scoreboard-page .bar-row .val { color: #edf8ff; font-size: 11px; font-weight: 800; }

/* Allgemeine Inhaltsbreite für Unterseiten */
.cockpit-content-container,
.cockpit-page .review-container,
.cockpit-page .coaching-container,
.cockpit-page .hof-container {
  width: calc(100% - 32px);
  max-width: 1780px;
  margin: 18px auto 42px;
  padding: 0;
}

.cockpit-page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  padding: 20px 24px;
  border: 1px solid rgba(45, 145, 208, .36);
  border-radius: 4px 18px 4px 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(57, 185, 255, .10), transparent 36%),
    linear-gradient(180deg, rgba(8, 21, 34, .98), rgba(4, 13, 22, .98));
  box-shadow: inset 0 0 0 1px rgba(4, 15, 25, .86), 0 15px 34px rgba(0,0,0,.32);
}

.cockpit-page-hero::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  width: 96px;
  height: 2px;
  background: var(--cockpit-cyan);
  box-shadow: 0 0 13px rgba(57, 185, 255, .58);
}

.cockpit-page-eyebrow {
  margin-bottom: 5px;
  color: var(--cockpit-cyan);
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cockpit-page-hero h1 {
  margin: 0 0 7px;
  color: #f0f8ff;
  font-size: clamp(22px, 2.7vw, 40px);
  text-transform: uppercase;
}

.cockpit-page-hero p {
  max-width: 920px;
  margin: 0;
  color: #91adc1;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.cockpit-hero-stat {
  min-width: 190px;
  padding: 13px 18px;
  border: 1px solid rgba(255, 196, 61, .42);
  background: rgba(92, 63, 8, .13);
  text-align: center;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.cockpit-hero-stat span,
.cockpit-hero-stat small { display: block; color: #8ca7ba; }
.cockpit-hero-stat span { font-family: "Orbitron", sans-serif; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.cockpit-hero-stat strong { display: block; margin: 3px 0; color: var(--cockpit-gold); font-family: "Orbitron", sans-serif; font-size: 30px; }
.cockpit-hero-stat small { font-size: 12px; font-weight: 600; }

/* Archivübersicht */
.cockpit-archive-page .archive-overview-card {
  padding: 20px;
}

.cockpit-archive-page .archive-events-table tbody tr {
  transition: background .15s ease, box-shadow .15s ease;
}

.cockpit-archive-page .archive-events-table tbody tr:hover td {
  background: rgba(57, 185, 255, .075);
}

.cockpit-archive-page .archive-event-name {
  color: #f1f9ff;
  font-family: "Orbitron", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.cockpit-archive-page .archive-event-date {
  color: #9db5c6;
  font-weight: 600;
}

/* Archiv-Scoreboard */
.cockpit-archive-scoreboard-page .board.scoreboard-layout {
  grid-template-columns: repeat(15, minmax(0, 1fr));
}

.cockpit-archive-scoreboard-page .scoreboard-main-card { grid-column: span 5; }
.cockpit-archive-scoreboard-page .scoreboard-compact-card { grid-column: span 3; }
.cockpit-archive-scoreboard-page .archive-list-card { grid-column: 1 / -1; }
.cockpit-archive-scoreboard-page .archive-rounds-table tbody td { background-color: rgba(5, 18, 29, .88) !important; }
.cockpit-archive-scoreboard-page .archive-rounds-table tbody tr:hover td { background-color: rgba(57, 185, 255, .10) !important; }

/* Hall of Fame */
.cockpit-hof-page .hof-container { max-width: 1640px; }
.cockpit-hof-page .hof-hero { text-align: left; }
.cockpit-hof-page .hof-hero h1 { color: #f6f0d7; text-shadow: 0 0 18px rgba(255, 196, 61, .22); }
.cockpit-hof-page .hof-card { padding: 22px; border-color: rgba(255, 196, 61, .32); }
.cockpit-hof-page .hof-card::before { background: var(--cockpit-gold); box-shadow: 0 0 13px rgba(255, 196, 61, .55); }
.cockpit-hof-page .hof-card h2 { color: #ffe29a; font-size: 18px; text-transform: uppercase; }
.cockpit-hof-page .podium-slot {
  border-radius: 4px 16px 4px 16px;
  background: radial-gradient(circle at 50% 0, rgba(255, 196, 61, .09), transparent 44%), linear-gradient(180deg, #091827, #040d16);
}
.cockpit-hof-page .podium-first { border-color: rgba(255, 196, 61, .72); }
.cockpit-hof-page .podium-second { border-color: rgba(175, 210, 234, .52); }
.cockpit-hof-page .podium-third { border-color: rgba(211, 129, 68, .58); }
.cockpit-hof-page .podium-name { color: #f0f7fd; font-family: "Orbitron", sans-serif; font-size: 20px; }
.cockpit-hof-page .podium-kills { color: var(--cockpit-gold); font-size: 17px; }

/* JSON-Import */
.cockpit-import-page .review-head {
  position: relative;
  margin-bottom: 16px;
  padding: 20px 24px;
  border: 1px solid rgba(45, 145, 208, .36);
  border-radius: 4px 18px 4px 18px;
  background: radial-gradient(circle at 100% 0, rgba(57, 185, 255, .10), transparent 35%), linear-gradient(180deg, #081522, #040d16);
}
.cockpit-import-page .review-head h1 { color: #edf8ff; font-size: clamp(22px, 2.6vw, 38px); text-transform: uppercase; }
.cockpit-import-page .review-head p { color: #91adc1; font-size: 14px; font-weight: 600; }
.cockpit-import-page .review-card { padding: 20px; border-color: rgba(255, 61, 53, .38); }
.cockpit-import-page .review-card::before { background: var(--cockpit-red); box-shadow: 0 0 13px rgba(255, 61, 53, .55); }
.cockpit-import-page .review-card-head h2 { color: #f2f9ff; font-size: 18px; }
.cockpit-import-page .review-meta { color: #87a6ba; font-size: 13px; font-weight: 600; }
.cockpit-import-page .review-player-card { border-color: rgba(45, 145, 208, .34); border-radius: 3px 13px 3px 13px; background: rgba(3, 13, 22, .86); }
.cockpit-import-page .review-player-card h3 { color: var(--cockpit-cyan); font-size: 15px; }
.cockpit-import-page .field-group label { color: #86a7bd; font-size: 11px; font-weight: 800; }
.cockpit-import-page .field-group input,
.cockpit-import-page .select {
  min-height: 42px;
  border-color: rgba(45, 145, 208, .34);
  border-radius: 3px 10px 3px 10px;
  color: #f1f9ff;
  background: rgba(2, 10, 17, .92);
  font-size: 14px;
  font-weight: 700;
}
.cockpit-import-page .field-group input:focus,
.cockpit-import-page .select:focus { border-color: var(--cockpit-cyan); box-shadow: 0 0 0 2px rgba(57, 185, 255, .13), 0 0 14px rgba(57,185,255,.12); }
.cockpit-import-page .review-kill-check { border-color: rgba(255, 196, 61, .36); background: rgba(94, 64, 7, .10); }
.cockpit-import-page .review-actions { padding-top: 15px; border-top: 1px solid rgba(45,145,208,.16); }

/* Live-Coaching */
.cockpit-coaching-page .coaching-container { max-width: 1680px; }
.cockpit-coaching-page .coaching-hero {
  position: relative;
  margin-bottom: 16px;
  padding: 20px 24px;
  border: 1px solid rgba(45, 145, 208, .36);
  border-radius: 4px 18px 4px 18px;
  background: radial-gradient(circle at 100% 0, rgba(57,185,255,.10), transparent 38%), linear-gradient(180deg, #081522, #040d16);
}
.cockpit-coaching-page .coaching-eyebrow { color: var(--cockpit-cyan); font-size: 9px; letter-spacing: .16em; }
.cockpit-coaching-page .coaching-hero h1 { color: #f1f9ff; font-size: clamp(24px, 3vw, 42px); text-transform: uppercase; }
.cockpit-coaching-page .coaching-hero p { color: #92adc1; font-size: 14px; font-weight: 600; }
.cockpit-coaching-page .coaching-progress-card { border-radius: 3px 13px 3px 13px; border-color: rgba(255,196,61,.48); background: rgba(87,59,7,.13); }
.cockpit-coaching-page .coaching-card { padding: 20px; }
.cockpit-coaching-page .coaching-team-card { border-color: rgba(255,196,61,.44); }
.cockpit-coaching-page .coaching-team-card::before { background: var(--cockpit-gold); box-shadow: 0 0 13px rgba(255,196,61,.52); }
.cockpit-coaching-page .coaching-card h2 { color: #ecf8ff; font-size: 18px; text-transform: uppercase; }
.cockpit-coaching-page .coaching-summary { color: #e4f0f8; font-size: 15px; font-weight: 600; }
.cockpit-coaching-page .coaching-list-block { border-radius: 3px 12px 3px 12px; background: rgba(2,10,17,.82); }
.cockpit-coaching-page .coaching-list-block h3 { font-size: 12px; font-weight: 800; }
.cockpit-coaching-page .coaching-list-block li { color: #d0e0eb; font-size: 13px; font-weight: 600; }
.cockpit-coaching-page .coaching-report-meta { color: #8da8bb; font-size: 12px; font-weight: 600; }

@media (max-width: 1120px) {
  .cockpit-archive-scoreboard-page .board.scoreboard-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cockpit-archive-scoreboard-page .scoreboard-main-card,
  .cockpit-archive-scoreboard-page .scoreboard-compact-card { grid-column: span 1; }
}

@media (max-width: 760px) {
  .cockpit-page-hero { align-items: stretch; flex-direction: column; }
  .cockpit-hero-stat { min-width: 0; }
  .cockpit-page .table thead th { font-size: 9px; }
  .cockpit-page .table tbody td { font-size: 10px; }
  .cockpit-archive-scoreboard-page .board.scoreboard-layout { grid-template-columns: 1fr; }
  .cockpit-archive-scoreboard-page .scoreboard-main-card,
  .cockpit-archive-scoreboard-page .scoreboard-compact-card { grid-column: 1; }
}

/* Statusleisten passen sich auf Unterseiten der tatsächlichen Elementzahl an. */
.cockpit-status-strip {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

@media (max-width: 1120px) {
  .cockpit-status-strip {
    display: flex;
    overflow-x: auto;
  }

  .cockpit-status-item {
    min-width: 170px;
  }
}

/* ==================================================
   LIVE-MVP
   ================================================== */

.cockpit-scoreboard-page .cockpit-mvp-card {
  grid-column: 1 / -1 !important;
  order: 0;
  min-height: 0;
  padding: 18px;
  border-color: rgba(255, 196, 61, .48);
  background:
    linear-gradient(135deg, rgba(105, 72, 8, .12), transparent 30%),
    radial-gradient(circle at 100% 0, rgba(255, 196, 61, .08), transparent 35%),
    linear-gradient(180deg, rgba(10, 23, 35, .99), rgba(4, 13, 22, .99));
  box-shadow:
    inset 0 0 28px rgba(255, 196, 61, .025),
    0 16px 36px rgba(0, 0, 0, .36),
    0 0 20px rgba(255, 196, 61, .08);
}

.cockpit-scoreboard-page .cockpit-mvp-card::before {
  background: var(--cockpit-gold);
  box-shadow: 0 0 13px rgba(255, 196, 61, .52);
}

.mvp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 16px;
}

.cockpit-scoreboard-page .cockpit-mvp-card .mvp-card-head h2 {
  min-height: 0;
  justify-content: flex-start;
  margin: 3px 0 6px;
  color: #fff3c7;
  font-size: 20px;
  text-align: left;
}

.mvp-eyebrow {
  display: flex;
  align-items: center;
  color: #8da9bb;
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.mvp-card-head p {
  max-width: 1000px;
  margin: 0;
  color: #a9c0d0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.mvp-leader-panel {
  min-width: 220px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 196, 61, .44);
  background:
    linear-gradient(180deg, rgba(87, 61, 9, .43), rgba(31, 22, 5, .62));
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  text-align: right;
}

.mvp-leader-panel small,
.mvp-leader-panel span {
  display: block;
  color: #bda86a;
  font-size: 10px;
  font-weight: 700;
}

.mvp-leader-panel small {
  font-family: "Orbitron", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.mvp-leader-panel strong {
  display: block;
  margin: 4px 0;
  color: #ffe28a;
  font-family: "Orbitron", sans-serif;
  font-size: 22px;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(255, 196, 61, .28);
}

.mvp-player-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.mvp-player-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(45, 136, 198, .34);
  background:
    linear-gradient(180deg, rgba(7, 26, 41, .88), rgba(3, 13, 22, .94));
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: inset 0 0 18px rgba(57, 185, 255, .035);
}

.mvp-player-card-leader {
  border-color: rgba(255, 196, 61, .62);
  background:
    linear-gradient(180deg, rgba(70, 49, 8, .31), rgba(14, 16, 19, .96));
  box-shadow:
    inset 0 0 20px rgba(255, 196, 61, .05),
    0 0 16px rgba(255, 196, 61, .08);
}

.mvp-player-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 11px;
  align-items: center;
}

.mvp-rank {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(57, 185, 255, .42);
  color: #9fd9fb;
  background: rgba(5, 21, 34, .85);
  font-family: "Orbitron", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.mvp-player-card-leader .mvp-rank {
  border-color: rgba(255, 196, 61, .65);
  color: #ffe28a;
  background: rgba(69, 48, 8, .58);
}

.mvp-player-head small {
  display: block;
  margin-bottom: 2px;
  color: #66879c;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.mvp-player-head h3 {
  margin: 0;
  color: #eaf7ff;
  font-family: "Orbitron", sans-serif;
  font-size: 16px;
  font-weight: 800;
}

.mvp-total {
  color: #dff4ff;
  font-family: "Orbitron", sans-serif;
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
}

.mvp-player-card-leader .mvp-total {
  color: #ffe28a;
  text-shadow: 0 0 10px rgba(255, 196, 61, .22);
}

.mvp-progress {
  height: 10px;
  margin: 13px 0;
  overflow: hidden;
  border: 1px solid rgba(45, 121, 174, .36);
  background: #06121d;
}

.mvp-progress span {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #17669c, #39b9ff);
  box-shadow: 0 0 9px rgba(57, 185, 255, .28);
}

.mvp-player-card-leader .mvp-progress span {
  background: linear-gradient(90deg, #916512, #ffc43d);
  box-shadow: 0 0 9px rgba(255, 196, 61, .30);
}

.mvp-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.mvp-breakdown-item {
  min-width: 0;
  padding: 7px 6px;
  border: 1px solid rgba(43, 123, 178, .22);
  background: rgba(4, 16, 27, .72);
  text-align: center;
}

.mvp-breakdown-item small,
.mvp-breakdown-item strong {
  display: block;
}

.mvp-breakdown-item small {
  margin-bottom: 3px;
  color: #7090a5;
  font-size: 9px;
  font-weight: 800;
}

.mvp-breakdown-item strong {
  color: #deeff9;
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.mvp-empty {
  grid-column: 1 / -1;
  padding: 22px;
  border: 1px dashed rgba(57, 185, 255, .30);
  color: #7e9bae;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 1180px) {
  .mvp-player-grid {
    grid-template-columns: 1fr;
  }

  .mvp-breakdown-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .mvp-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .mvp-leader-panel {
    min-width: 0;
    text-align: left;
  }

  .mvp-breakdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mvp-total {
    font-size: 16px;
  }
}

/* ==================================================
   LIVE-MVP – kompakte horizontale Darstellung
   ================================================== */

.cockpit-scoreboard-page
.cockpit-mvp-card.mvp-compact-card {
  grid-column: 1 / -1 !important;
  order: 0;

  display: grid;
  grid-template-columns:
    145px
    minmax(0, 1fr);

  align-items: center;
  gap: 12px;

  min-height: 0;
  padding: 9px 12px;

  border-color: rgba(255, 196, 61, .42);

  background:
    linear-gradient(
      90deg,
      rgba(71, 49, 7, .22),
      rgba(6, 19, 30, .98) 26%,
      rgba(4, 13, 22, .99)
    );

  box-shadow:
    inset 0 0 20px rgba(255, 196, 61, .025),
    0 8px 22px rgba(0, 0, 0, .30),
    0 0 14px rgba(255, 196, 61, .06);
}

/* Linke MVP-Beschriftung */
.mvp-compact-label {
  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;
  padding-right: 12px;

  border-right:
    1px solid rgba(255, 196, 61, .24);
}

.mvp-compact-label .score-icon {
  flex: 0 0 auto;
  font-size: 19px;
}

.mvp-compact-title {
  display: block;
  min-width: 0;
}

.mvp-compact-title small,
.mvp-compact-title strong {
  display: block;
}

.mvp-compact-title small {
  margin-bottom: 1px;

  color: #8da9bb;

  font-family: "Orbitron", sans-serif;
  font-size: 8px;
  font-weight: 800;

  letter-spacing: .09em;
  text-transform: uppercase;
}

.mvp-compact-title strong {
  color: #ffe28a;

  font-family: "Orbitron", sans-serif;
  font-size: 14px;
  font-weight: 800;

  white-space: nowrap;

  text-shadow:
    0 0 9px rgba(255, 196, 61, .24);
}

/* Drei Spieler nebeneinander */
.cockpit-scoreboard-page
.mvp-compact-card .mvp-player-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 8px;
  min-width: 0;
}

/* Einzelne kompakte Spielerzeile */
.cockpit-scoreboard-page
.mvp-player-card.mvp-player-compact {
  display: grid;

  grid-template-columns:
    30px
    minmax(62px, 1fr)
    auto
    auto
    auto
    auto;

  align-items: center;
  gap: 8px;

  min-width: 0;
  padding: 7px 9px;

  border:
    1px solid rgba(45, 136, 198, .30);

  background:
    linear-gradient(
      180deg,
      rgba(7, 26, 41, .84),
      rgba(3, 13, 22, .92)
    );

  clip-path:
    polygon(
      7px 0,
      100% 0,
      100% calc(100% - 7px),
      calc(100% - 7px) 100%,
      0 100%,
      0 7px
    );

  box-shadow:
    inset 0 0 14px rgba(57, 185, 255, .025);

  cursor: help;
}

.cockpit-scoreboard-page
.mvp-player-card.mvp-player-compact:hover {
  border-color: rgba(57, 185, 255, .55);

  background:
    linear-gradient(
      180deg,
      rgba(10, 38, 58, .92),
      rgba(3, 16, 27, .96)
    );
}

/* Führender Spieler */
.cockpit-scoreboard-page
.mvp-player-card.mvp-player-compact.mvp-player-card-leader {
  border-color: rgba(255, 196, 61, .60);

  background:
    linear-gradient(
      180deg,
      rgba(77, 53, 7, .35),
      rgba(14, 16, 19, .96)
    );

  box-shadow:
    inset 0 0 15px rgba(255, 196, 61, .04),
    0 0 11px rgba(255, 196, 61, .07);
}

/* Rang */
.cockpit-scoreboard-page
.mvp-player-compact .mvp-rank {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(57, 185, 255, .40);

  color: #a9ddfa;
  background: rgba(5, 21, 34, .82);

  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  font-weight: 800;
}

.cockpit-scoreboard-page
.mvp-player-card-leader .mvp-rank {
  border-color: rgba(255, 196, 61, .65);
  color: #ffe28a;
  background: rgba(69, 48, 8, .58);
}

/* Spielername */
.mvp-player-name {
  overflow: hidden;

  color: #eef9ff;

  font-family: "Orbitron", sans-serif;
  font-size: 12px;
  font-weight: 800;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Gesamtpunkte */
.cockpit-scoreboard-page
.mvp-player-compact .mvp-total {
  color: #dff4ff;

  font-family: "Orbitron", sans-serif;
  font-size: 14px;
  font-weight: 800;

  white-space: nowrap;
}

.cockpit-scoreboard-page
.mvp-player-card-leader .mvp-total {
  color: #ffe28a;

  text-shadow:
    0 0 8px rgba(255, 196, 61, .22);
}

/* Kills, Schaden und Teamplay */
.mvp-mini-stat {
  display: block;

  min-width: 54px;
  padding-left: 7px;

  border-left:
    1px solid rgba(57, 185, 255, .16);

  text-align: right;
  white-space: nowrap;
}

.mvp-mini-stat small,
.mvp-mini-stat b {
  display: block;
}

.mvp-mini-stat small {
  margin-bottom: 1px;

  color: #7292a7;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .04em;
  text-transform: uppercase;
}

.mvp-mini-stat b {
  color: #dceef8;

  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  font-weight: 800;
}

.mvp-mini-teamplay b {
  color: #8ce9c4;
}

/* Leerer Zustand */
.mvp-compact-card .mvp-empty {
  padding: 10px;

  border:
    1px dashed rgba(57, 185, 255, .28);

  color: #8ba7b8;

  font-size: 11px;
  font-weight: 700;

  text-align: center;
}

/* Mittlere Bildschirme */
@media (max-width: 1280px) {
  .cockpit-scoreboard-page
  .cockpit-mvp-card.mvp-compact-card {
    grid-template-columns: 1fr;
  }

  .mvp-compact-label {
    padding-right: 0;
    padding-bottom: 7px;

    border-right: 0;
    border-bottom:
      1px solid rgba(255, 196, 61, .20);
  }
}

/* Tablet */
@media (max-width: 1000px) {
  .cockpit-scoreboard-page
  .mvp-compact-card .mvp-player-grid {
    grid-template-columns: 1fr;
  }
}

/* Smartphone */
@media (max-width: 620px) {
  .cockpit-scoreboard-page
  .mvp-player-card.mvp-player-compact {
    grid-template-columns:
      30px
      minmax(70px, 1fr)
      auto;

    gap: 7px;
  }

  .mvp-mini-stat {
    padding-top: 5px;
    padding-left: 0;

    border-top:
      1px solid rgba(57, 185, 255, .14);

    border-left: 0;
    text-align: left;
  }

  .mvp-player-compact .mvp-mini-stat:nth-of-type(1) {
    grid-column: 2;
  }
}

/* ==================================================
   LIVE-MVP – extra schmale Variante
   ================================================== */

.cockpit-scoreboard-page
.cockpit-mvp-card.mvp-compact-card {
  grid-template-columns:
    112px
    minmax(0, 1fr);

  gap: 7px;
  padding: 4px 7px;
}

/* Linker Titelbereich */
.mvp-compact-label {
  gap: 5px;
  padding-right: 7px;
}

.mvp-compact-label .score-icon {
  font-size: 15px;
}

.mvp-compact-title small {
  display: none;
}

.mvp-compact-title strong {
  font-size: 11px;
}

/* Spielerbereiche enger zusammenrücken */
.cockpit-scoreboard-page
.mvp-compact-card .mvp-player-grid {
  gap: 5px;
}

/* Einzelne Spielerzeile deutlich flacher */
.cockpit-scoreboard-page
.mvp-player-card.mvp-player-compact {
  grid-template-columns:
    24px
    minmax(48px, 1fr)
    auto
    auto
    auto
    auto;

  gap: 5px;
  padding: 3px 6px;
}

/* Rangfeld verkleinern */
.cockpit-scoreboard-page
.mvp-player-compact .mvp-rank {
  width: 24px;
  height: 24px;
  font-size: 8px;
}

/* Spielername */
.mvp-player-name {
  font-size: 10px;
}

/* Gesamtpunktzahl */
.cockpit-scoreboard-page
.mvp-player-compact .mvp-total {
  font-size: 11px;
}

/* Kills, Schaden und Teamplay */
.mvp-mini-stat {
  min-width: 43px;
  padding-left: 5px;
}

.mvp-mini-stat small {
  margin-bottom: 0;
  font-size: 6px;
  line-height: 1.1;
}

.mvp-mini-stat b {
  font-size: 8px;
  line-height: 1.2;
}

/*
 * Die vorherige Regel hat den Banner bereits unter
 * 1280 Pixeln zweizeilig dargestellt.
 * Bis 900 Pixel bleibt er jetzt in einer Zeile.
 */
@media (max-width: 1280px) and (min-width: 901px) {
  .cockpit-scoreboard-page
  .cockpit-mvp-card.mvp-compact-card {
    grid-template-columns:
      112px
      minmax(0, 1fr);
  }

  .mvp-compact-label {
    padding-right: 7px;
    padding-bottom: 0;

    border-right:
      1px solid rgba(255, 196, 61, .24);

    border-bottom: 0;
  }

  .cockpit-scoreboard-page
  .mvp-compact-card .mvp-player-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

/* Erst auf kleineren Tablets untereinander */
@media (max-width: 900px) {
  .cockpit-scoreboard-page
  .cockpit-mvp-card.mvp-compact-card {
    grid-template-columns: 1fr;
  }

  .mvp-compact-label {
    padding-right: 0;
    padding-bottom: 5px;

    border-right: 0;
    border-bottom:
      1px solid rgba(255, 196, 61, .20);
  }

  .cockpit-scoreboard-page
  .mvp-compact-card .mvp-player-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================================================
   COCKPIT – LESBARKEIT V2
   Klare Schrift, stärkere Kontraste, bessere Tabellen
   ================================================== */

:root {
  --readable-text: #f2f8fc;
  --readable-body: #d6e5ee;
  --readable-muted: #91acbd;
  --readable-label: #b5cedd;
  --readable-border: rgba(111, 169, 201, .22);
  --readable-row: rgba(20, 47, 65, .22);
  --readable-row-hover: rgba(57, 185, 255, .10);
}

/*
 * Normale Texte und Zahlen nicht mit der technischen
 * Display-Schrift darstellen.
 */
.cockpit-page,
.cockpit-page input,
.cockpit-page select,
.cockpit-page button,
.cockpit-page table,
.cockpit-page .board-card,
.cockpit-page .card {
  font-family:
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  text-rendering: optimizeLegibility;
}

/*
 * Orbitron nur für markante Überschriften,
 * Statusanzeigen und Cockpit-Titel.
 */
.cockpit-page h1,
.cockpit-page h2,
.cockpit-page h3,
.cockpit-page .cockpit-brand-title,
.cockpit-page .cockpit-section-title,
.cockpit-page .gauge-main-value,
.cockpit-page .metric-value {
  font-family:
    "Orbitron",
    "Segoe UI",
    sans-serif;
}

/* ==================================================
   Allgemeine Kacheln
   ================================================== */

.cockpit-page .card,
.cockpit-page .board-card,
.cockpit-page .review-card,
.cockpit-page .coaching-card {
  color: var(--readable-body);

  border-color:
    rgba(77, 148, 190, .28);
}

.cockpit-page .card h2,
.cockpit-page .board-card h2 {
  color: var(--readable-text);

  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;

  letter-spacing: .025em;

  text-shadow:
    0 0 8px rgba(57, 185, 255, .14);
}

.cockpit-page .hint,
.cockpit-page .footer-bar,
.cockpit-page .metric-card-hint,
.cockpit-page .hours-card-hint {
  color: var(--readable-muted);

  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

/* ==================================================
   Tabellen allgemein
   ================================================== */

.cockpit-page .table {
  color: var(--readable-body);

  font-variant-numeric:
    tabular-nums;

  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
}

/* Kopfzeilen */
.cockpit-page .table thead th {
  padding: 10px 8px !important;

  color: #c6dfed !important;
  background:
    linear-gradient(
      180deg,
      rgba(18, 48, 68, .96),
      rgba(8, 26, 40, .96)
    ) !important;

  border-bottom:
    1px solid rgba(80, 163, 210, .42) !important;

  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.35;

  letter-spacing: .045em;
  text-transform: uppercase;

  text-shadow:
    0 0 7px rgba(57, 185, 255, .15);
}

/* Tabellenwerte */
.cockpit-page .table tbody td {
  padding: 10px 8px !important;

  color: var(--readable-body) !important;

  border-bottom:
    1px solid var(--readable-border) !important;

  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4;

  text-shadow: none;
}

/* Zahlen kräftiger hervorheben */
.cockpit-page .table tbody td:not(:first-child) {
  color: var(--readable-text) !important;
  font-weight: 700 !important;
}

/* Abwechselnde Zeilen */
.cockpit-page .table tbody tr:nth-child(even) {
  background:
    var(--readable-row);
}

/* Deutlich sichtbarer Hover */
.cockpit-page .table tbody tr:hover {
  background:
    var(--readable-row-hover) !important;

  box-shadow:
    inset 3px 0 0 rgba(57, 185, 255, .65);
}

/* Tabellen dürfen bei größerer Schrift scrollen */
.cockpit-page .table-wrap {
  overflow-x: auto;
}

/* ==================================================
   Drei große Scoreboard-Kacheln
   ================================================== */

.cockpit-scoreboard-page
.scoreboard-main-card h2 {
  font-size: 18px;
}

.cockpit-scoreboard-page
.scoreboard-main-card .table thead th {
  font-size: 12px !important;
}

.cockpit-scoreboard-page
.scoreboard-main-card .table tbody td {
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Spielername besonders deutlich */
.cockpit-scoreboard-page
.scoreboard-main-card .table tbody td:nth-child(2) {
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* ==================================================
   Fünf kompakte Scoreboard-Kacheln
   ================================================== */

.cockpit-scoreboard-page
.scoreboard-compact-card h2 {
  font-size: 15px;
  font-weight: 800;
}

.cockpit-scoreboard-page
.scoreboard-compact-card .table thead th {
  padding: 8px 5px !important;
  font-size: 10px !important;
}

.cockpit-scoreboard-page
.scoreboard-compact-card .table tbody td {
  padding: 9px 5px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.cockpit-scoreboard-page
.scoreboard-compact-card .table tbody td:nth-child(2) {
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* ==================================================
   Kompakter Live-MVP
   ================================================== */

.cockpit-scoreboard-page
.mvp-compact-title strong {
  font-size: 12px !important;
  font-weight: 800;
}

.cockpit-scoreboard-page
.mvp-player-name {
  color: #ffffff !important;

  font-size: 11px !important;
  font-weight: 800 !important;

  letter-spacing: .01em;
}

.cockpit-scoreboard-page
.mvp-player-compact .mvp-total {
  color: #eaf7ff !important;

  font-size: 12px !important;
  font-weight: 800 !important;
}

.cockpit-scoreboard-page
.mvp-player-card-leader .mvp-total,
.cockpit-scoreboard-page
.mvp-player-card-leader .mvp-player-name {
  color: #ffe184 !important;
}

.cockpit-scoreboard-page
.mvp-mini-stat small {
  color: #9ab4c4 !important;

  font-size: 8px !important;
  font-weight: 800 !important;

  letter-spacing: .035em;
}

.cockpit-scoreboard-page
.mvp-mini-stat b {
  color: #edf8ff !important;

  font-size: 10px !important;
  font-weight: 800 !important;
}

.cockpit-scoreboard-page
.mvp-mini-teamplay b {
  color: #8ff0c8 !important;
}

/* ==================================================
   Statuszeile
   ================================================== */

.cockpit-status-copy small {
  color: #9ab5c5 !important;

  font-size: 10px !important;
  font-weight: 700 !important;

  letter-spacing: .045em;
}

.cockpit-status-copy strong {
  color: #eff9ff !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.35;

  letter-spacing: .01em;
}

.cockpit-status-icon {
  color: #7ed6ff;

  filter:
    drop-shadow(
      0 0 4px rgba(57, 185, 255, .35)
    );
}

/* ==================================================
   Eingabeseite
   ================================================== */

.cockpit-app-page
.stat-matrix-head {
  color: #cce6f4;

  font-size: 11px !important;
  font-weight: 800 !important;
}

.cockpit-app-page
.stat-matrix-row label {
  color: #d9e8f0;

  font-size: 11px !important;
  font-weight: 700 !important;
}

.cockpit-app-page
.stat-matrix-row input,
.cockpit-app-page
.placement-control input {
  color: #ffffff;

  font-size: 14px !important;
  font-weight: 700 !important;

  font-variant-numeric:
    tabular-nums;
}

.cockpit-app-page
.stat-matrix-row input::placeholder {
  color: #617b8c;
  opacity: 1;
}

/* ==================================================
   Farbbereiche der Rundentabellen
   Weniger grell, dafür weißere Schrift
   ================================================== */

/* Fred */
.cockpit-app-page
.list-card .table tbody td:nth-child(4),
.cockpit-app-page
.list-card .table tbody td:nth-child(5),
.cockpit-app-page
.list-card .table tbody td:nth-child(6),
.cockpit-app-page
.list-card .table tbody td:nth-child(7),
.cockpit-app-page
.list-card .table tbody td:nth-child(8) {
  background-color:
    rgba(145, 42, 42, .24) !important;
}

/* Korre */
.cockpit-app-page
.list-card .table tbody td:nth-child(9),
.cockpit-app-page
.list-card .table tbody td:nth-child(10),
.cockpit-app-page
.list-card .table tbody td:nth-child(11),
.cockpit-app-page
.list-card .table tbody td:nth-child(12),
.cockpit-app-page
.list-card .table tbody td:nth-child(13) {
  background-color:
    rgba(32, 122, 84, .22) !important;
}

/* Daniel */
.cockpit-app-page
.list-card .table tbody td:nth-child(14),
.cockpit-app-page
.list-card .table tbody td:nth-child(15),
.cockpit-app-page
.list-card .table tbody td:nth-child(16),
.cockpit-app-page
.list-card .table tbody td:nth-child(17),
.cockpit-app-page
.list-card .table tbody td:nth-child(18) {
  background-color:
    rgba(38, 91, 150, .25) !important;
}

/* Text in allen Spielerbereichen */
.cockpit-app-page
.list-card .table tbody td {
  color: #ffffff !important;
}

/* ==================================================
   Archivierte Rundentabelle
   ================================================== */

/* Fred */
.cockpit-page
.archive-rounds-table tbody td:nth-child(n+3):nth-child(-n+7) {
  background-color:
    rgba(145, 42, 42, .24) !important;
}

/* Korre */
.cockpit-page
.archive-rounds-table tbody td:nth-child(n+8):nth-child(-n+12) {
  background-color:
    rgba(32, 122, 84, .22) !important;
}

/* Daniel */
.cockpit-page
.archive-rounds-table tbody td:nth-child(n+13):nth-child(-n+17) {
  background-color:
    rgba(38, 91, 150, .25) !important;
}

.cockpit-page
.archive-rounds-table tbody td {
  color: #ffffff !important;
}

/* ==================================================
   Beste Spielstunden und Modale
   ================================================== */

.cockpit-page .hours-group h3 {
  font-size: 12px;
  font-weight: 800;
}

.cockpit-page .hour-mini-title {
  color: #ffffff;

  font-size: 13px;
  font-weight: 800;
}

.cockpit-page .hour-mini-meta {
  color: #bed0db;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.cockpit-page .hours-modal-content {
  color: var(--readable-body);
}

.cockpit-page
.hours-modal-content .table tbody td {
  font-size: 13px !important;
}

/* ==================================================
   Import-Prüfung
   ================================================== */

.cockpit-page
.review-player-card h3 {
  color: #ffe184;

  font-size: 17px;
  font-weight: 800;
}

.cockpit-page
.review-detected {
  color: #aec5d3;

  font-size: 12px;
  font-weight: 600;
}

.cockpit-page
.review-field-grid label,
.cockpit-page
.review-global-grid label {
  color: #c9dce7;

  font-size: 11px;
  font-weight: 700;
}

.cockpit-page
.review-field-grid input,
.cockpit-page
.review-global-grid input,
.cockpit-page
.review-global-grid select {
  color: #ffffff;

  font-size: 14px;
  font-weight: 700;
}

/* ==================================================
   Coaching
   ================================================== */

.cockpit-page
.coaching-summary {
  color: #edf7fd;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
}

.cockpit-page
.coaching-list-block h3 {
  font-size: 13px;
  font-weight: 800;
}

.cockpit-page
.coaching-list-block li {
  color: #d7e6ee;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

.cockpit-page
.coaching-focus strong {
  color: #ffe6a0;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

/* ==================================================
   Diagramme
   ================================================== */

.cockpit-page
.chart .axis text {
  fill: #b5ccda;

  font-size: 8px !important;
  font-weight: 700;
}

.cockpit-page
.chart .grid line {
  stroke: rgba(105, 150, 178, .34);
  opacity: 1;
}

/* ==================================================
   Buttons und Badges
   ================================================== */

.cockpit-page .btn {
  font-size: 12px;
  font-weight: 700;
}

.cockpit-page .badge {
  color: #c8dce8;

  font-size: 11px;
  font-weight: 700;
}

/* ==================================================
   Responsive
   ================================================== */

@media (max-width: 740px) {
  .cockpit-page .table thead th {
    padding: 8px 5px !important;
    font-size: 9px !important;
  }

  .cockpit-page .table tbody td {
    padding: 8px 5px !important;
    font-size: 11px !important;
  }

  .cockpit-scoreboard-page
  .scoreboard-main-card .table tbody td {
    font-size: 12px !important;
  }

  .cockpit-status-copy strong {
    font-size: 12px !important;
  }

  .cockpit-status-copy small {
    font-size: 9px !important;
  }
}

/* ==================================================
   APP – kompakter Runde-speichern-Button
   ================================================== */

.cockpit-app-page .cockpit-form-footer {
  grid-template-columns:
    minmax(0, 1fr)
    max-content;

  gap: 10px;
  align-items: end;
}

.cockpit-app-page .placement-control {
  min-width: 0;
}

.cockpit-app-page .cockpit-save-button {
  width: auto;
  min-width: 160px;
  max-width: 180px;
  min-height: 38px;

  justify-self: end;

  padding: 7px 13px;

  gap: 7px;

  font-size: 11px;
  line-height: 1.2;

  white-space: nowrap;
}

.cockpit-app-page .cockpit-save-button > span {
  font-size: 12px;
}

/* Auf kleinen Bildschirmen wieder volle Breite */
@media (max-width: 650px) {
  .cockpit-app-page .cockpit-form-footer {
    grid-template-columns: 1fr;
  }

  .cockpit-app-page .cockpit-save-button {
    width: 100%;
    min-width: 0;
    max-width: none;

    justify-self: stretch;
  }
}

/* ==================================================
   APP – vollständige scrollbare Rundentabelle
   ================================================== */

.app-rounds-table-wrap {
  position: relative;

  width: 100%;
  max-width: 100%;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  border:
    1px solid rgba(67, 145, 190, .28);

  background:
    rgba(2, 11, 19, .72);

  scrollbar-width: auto;
  scrollbar-color:
    #437b9c
    #07131d;
}

/* Deutlich sichtbarer horizontaler Scrollbalken */
.app-rounds-table-wrap::-webkit-scrollbar {
  height: 14px;
}

.app-rounds-table-wrap::-webkit-scrollbar-track {
  background: #07131d;

  border-top:
    1px solid rgba(80, 151, 190, .20);
}

.app-rounds-table-wrap::-webkit-scrollbar-thumb {
  min-width: 80px;

  border:
    3px solid #07131d;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #245775,
      #52a7d2,
      #245775
    );
}

.app-rounds-table-wrap::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      90deg,
      #357a9f,
      #70c7ef,
      #357a9f
    );
}

/*
 * Nicht mehr auf die Kartenbreite zusammenpressen.
 * Die Tabelle erhält die Breite, die ihre 27 Spalten benötigen.
 */
.list-card .app-rounds-table {
  width: max-content !important;
  max-width: none !important;

  table-layout: auto !important;
  border-collapse: separate;
  border-spacing: 0;
}

/* Alle Inhalte vollständig anzeigen */
.list-card .app-rounds-table th,
.list-card .app-rounds-table td {
  min-width: 72px;

  padding:
    10px 9px !important;

  overflow: visible !important;

  color: #eef8fd !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35;

  text-align: center;
  text-overflow: clip;

  white-space: nowrap !important;

  border-right: 0 !important;
  border-bottom:
    1px solid rgba(78, 141, 177, .22) !important;
}

/* Datum und Uhrzeit */
.list-card .app-rounds-table th:nth-child(2),
.list-card .app-rounds-table td:nth-child(2) {
  min-width: 96px;
}

.list-card .app-rounds-table th:nth-child(3),
.list-card .app-rounds-table td:nth-child(3) {
  min-width: 78px;
}

/* Schaden benötigt etwas mehr Platz */
.list-card .app-rounds-table th:nth-child(5),
.list-card .app-rounds-table td:nth-child(5),
.list-card .app-rounds-table th:nth-child(12),
.list-card .app-rounds-table td:nth-child(12),
.list-card .app-rounds-table th:nth-child(19),
.list-card .app-rounds-table td:nth-child(19) {
  min-width: 92px;
}

/* Überlebenszeit */
.list-card .app-rounds-table th:nth-child(10),
.list-card .app-rounds-table td:nth-child(10),
.list-card .app-rounds-table th:nth-child(17),
.list-card .app-rounds-table td:nth-child(17),
.list-card .app-rounds-table th:nth-child(24),
.list-card .app-rounds-table td:nth-child(24) {
  min-width: 94px;
}

/* Aktionsspalte */
.list-card .app-rounds-table th:nth-child(27),
.list-card .app-rounds-table td:nth-child(27) {
  min-width: 100px;
}

/* Alte Spieler-Trennlinien vollständig überschreiben */
.list-card .app-rounds-table th,
.list-card .app-rounds-table td {
  border-right: 0 !important;
}

/* Trennlinie nach Fred, Korre und Daniel */
.list-card .app-rounds-table th:nth-child(10),
.list-card .app-rounds-table td:nth-child(10),
.list-card .app-rounds-table th:nth-child(17),
.list-card .app-rounds-table td:nth-child(17),
.list-card .app-rounds-table th:nth-child(24),
.list-card .app-rounds-table td:nth-child(24) {
  border-right:
    2px solid rgba(111, 186, 225, .55) !important;
}

/* Fred: Spalten 4–10 */
.list-card
.app-rounds-table
tbody
td:nth-child(n+4):nth-child(-n+10) {
  background:
    rgba(142, 42, 42, .25) !important;
}

/* Korre: Spalten 11–17 */
.list-card
.app-rounds-table
tbody
td:nth-child(n+11):nth-child(-n+17) {
  background:
    rgba(27, 118, 77, .24) !important;
}

/* Daniel: Spalten 18–24 */
.list-card
.app-rounds-table
tbody
td:nth-child(n+18):nth-child(-n+24) {
  background:
    rgba(34, 88, 151, .27) !important;
}

/* Kopfzeile */
.list-card .app-rounds-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;

  color: #cde8f7 !important;

  background:
    linear-gradient(
      180deg,
      #102d41,
      #071823
    ) !important;

  border-bottom:
    1px solid rgba(91, 184, 235, .48) !important;

  font-size: 11px !important;
  font-weight: 800 !important;

  letter-spacing: .025em;
}

/* Hover über eine Runde */
.list-card .app-rounds-table tbody tr:hover td {
  filter: brightness(1.18);
}

/* Hinweis über der Tabelle */
.table-scroll-hint {
  margin:
    -3px 0 10px;

  color: #91afc0;

  font-size: 11px;
  font-weight: 700;

  text-align: right;
}

/* Leerer Zustand */
.app-rounds-empty {
  color: #91afc0 !important;
  text-align: center !important;
}

/* Smartphone und Tablet */
@media (max-width: 800px) {
  .list-card .app-rounds-table {
  }

  .list-card .app-rounds-table th,
  .list-card .app-rounds-table td {
    padding:
      8px 7px !important;

    font-size: 11px !important;
  }

  .table-scroll-hint {
    text-align: left;
  }
}

/* ==================================================
   APP – Rundentabelle vollständig ohne Scrollbalken
   ================================================== */

/*
 * Die gesamte Eingabeseite bekommt auf Desktop
 * nahezu die volle Bildschirmbreite.
 */
.cockpit-app-page .container {
  width: calc(100% - 24px) !important;
  max-width: 1900px !important;
  margin: 18px auto !important;
  padding: 0 6px !important;
}

/* Rundentabelle über die gesamte Containerbreite */
.cockpit-app-page .list-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 12px !important;
}

/* Kein horizontaler Scrollbalken */
.cockpit-app-page .app-rounds-table-wrap {
  width: 100% !important;
  max-width: 100% !important;

  overflow-x: hidden !important;
  overflow-y: visible !important;

  border:
    1px solid rgba(67, 145, 190, .28);
}

/*
 * Tabelle exakt auf die verfügbare Breite verteilen.
 * Die frühere Mindestbreite von 2.200 oder 2.380 Pixel
 * wird vollständig aufgehoben.
 */
.cockpit-app-page .list-card .app-rounds-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  table-layout: fixed !important;
  border-collapse: separate;
  border-spacing: 0;
}

/* Grundformat aller Spalten */
.cockpit-app-page
.list-card
.app-rounds-table th,
.cockpit-app-page
.list-card
.app-rounds-table td {
  min-width: 0 !important;
  max-width: none !important;

  padding: 7px 2px !important;

  overflow: hidden !important;

  color: #f2f8fc !important;

  font-family:
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  font-size: clamp(9px, .65vw, 12px) !important;
  font-weight: 700 !important;
  line-height: 1.25;

  text-align: center;
  text-overflow: clip;

  white-space: nowrap !important;
}

/* Erste Kopfzeile: Spielernamen */
.cockpit-app-page
.app-rounds-player-head th {
  padding: 7px 3px !important;

  color: #eef9ff !important;

  font-size: clamp(10px, .75vw, 13px) !important;
  font-weight: 800 !important;

  letter-spacing: .04em;
  text-transform: uppercase;

  background:
    linear-gradient(
      180deg,
      rgba(17, 48, 67, .98),
      rgba(7, 24, 36, .98)
    ) !important;
}

/* Zweite Kopfzeile: Statistik-Kürzel */
.cockpit-app-page
.app-rounds-stat-head th {
  padding: 6px 1px !important;

  color: #c8e2f0 !important;

  font-size: clamp(8px, .58vw, 10px) !important;
  font-weight: 800 !important;

  letter-spacing: 0;
  text-transform: none;

  background:
    linear-gradient(
      180deg,
      rgba(12, 38, 55, .98),
      rgba(5, 20, 31, .98)
    ) !important;
}

/* Spielernamen farblich voneinander abgrenzen */
.cockpit-app-page .player-head-fred {
  border-bottom:
    2px solid rgba(235, 86, 86, .80) !important;

  color: #ffb2b2 !important;
}

.cockpit-app-page .player-head-korre {
  border-bottom:
    2px solid rgba(70, 213, 145, .80) !important;

  color: #9ef0c8 !important;
}

.cockpit-app-page .player-head-daniel {
  border-bottom:
    2px solid rgba(83, 167, 255, .85) !important;

  color: #acd5ff !important;
}

/* Laufende Nummer */
.cockpit-app-page
.app-rounds-table th:nth-child(1),
.cockpit-app-page
.app-rounds-table td:nth-child(1) {
  width: 2.5%;
}

/* Datum */
.cockpit-app-page
.app-rounds-table th:nth-child(2),
.cockpit-app-page
.app-rounds-table td:nth-child(2) {
  width: 5.5%;
}

/* Uhrzeit */
.cockpit-app-page
.app-rounds-table th:nth-child(3),
.cockpit-app-page
.app-rounds-table td:nth-child(3) {
  width: 4%;
}

/*
 * Spielerstatistiken:
 * Alle 21 Statistikspalten teilen sich den Hauptbereich.
 */
.cockpit-app-page
.app-rounds-table th:nth-child(n+4):nth-child(-n+24),
.cockpit-app-page
.app-rounds-table td:nth-child(n+4):nth-child(-n+24) {
  width: 3.55%;
}

/* Schadensspalten etwas breiter */
.cockpit-app-page
.app-rounds-table th:nth-child(5),
.cockpit-app-page
.app-rounds-table td:nth-child(5),
.cockpit-app-page
.app-rounds-table th:nth-child(12),
.cockpit-app-page
.app-rounds-table td:nth-child(12),
.cockpit-app-page
.app-rounds-table th:nth-child(19),
.cockpit-app-page
.app-rounds-table td:nth-child(19) {
  width: 4.3%;
}

/* Überlebenszeit etwas breiter */
.cockpit-app-page
.app-rounds-table th:nth-child(10),
.cockpit-app-page
.app-rounds-table td:nth-child(10),
.cockpit-app-page
.app-rounds-table th:nth-child(17),
.cockpit-app-page
.app-rounds-table td:nth-child(17),
.cockpit-app-page
.app-rounds-table th:nth-child(24),
.cockpit-app-page
.app-rounds-table td:nth-child(24) {
  width: 4%;
}

/* Platzierung */
.cockpit-app-page
.app-rounds-table th:nth-child(25),
.cockpit-app-page
.app-rounds-table td:nth-child(25) {
  width: 3.5%;
}

/* Modus */
.cockpit-app-page
.app-rounds-table th:nth-child(26),
.cockpit-app-page
.app-rounds-table td:nth-child(26) {
  width: 4.5%;
}

/* Aktion */
.cockpit-app-page
.app-rounds-table th:nth-child(27),
.cockpit-app-page
.app-rounds-table td:nth-child(27) {
  width: 5%;
}

/* Kompakter Löschen-Button */
.cockpit-app-page
.app-rounds-table .btn {
  width: auto !important;
  min-width: 0 !important;

  padding: 5px 6px !important;

  font-size: clamp(8px, .55vw, 10px) !important;
  font-weight: 700;

  white-space: nowrap;
}

/* Spielerblöcke */
.cockpit-app-page
.app-rounds-table
tbody
td:nth-child(n+4):nth-child(-n+10) {
  background:
    rgba(132, 40, 40, .23) !important;
}

.cockpit-app-page
.app-rounds-table
tbody
td:nth-child(n+11):nth-child(-n+17) {
  background:
    rgba(28, 116, 77, .22) !important;
}

.cockpit-app-page
.app-rounds-table
tbody
td:nth-child(n+18):nth-child(-n+24) {
  background:
    rgba(35, 84, 143, .25) !important;
}

/* Deutliche Trennung nach jedem Spieler */
.cockpit-app-page
.app-rounds-table th:nth-child(10),
.cockpit-app-page
.app-rounds-table td:nth-child(10),
.cockpit-app-page
.app-rounds-table th:nth-child(17),
.cockpit-app-page
.app-rounds-table td:nth-child(17),
.cockpit-app-page
.app-rounds-table th:nth-child(24),
.cockpit-app-page
.app-rounds-table td:nth-child(24) {
  border-right:
    2px solid rgba(111, 186, 225, .52) !important;
}

/* Scroll-Hinweis sicher ausblenden */
.cockpit-app-page .table-scroll-hint {
  display: none !important;
}/* ==================================================
   APP – übersichtliche Rundentabelle ohne Scrollen
   7 Hauptspalten, Spielerwerte als Mini-Raster
   ================================================== */

.cockpit-app-page .app-rounds-overview-wrap {
  width: 100%;
  max-width: 100%;
  overflow: visible !important;
  border: 1px solid rgba(67, 145, 190, .30);
  border-radius: 3px 12px 3px 12px;
  background: rgba(2, 11, 19, .76);
}

.cockpit-app-page .app-rounds-overview-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate;
  border-spacing: 0;
}

.cockpit-app-page .app-rounds-overview-table col.col-index { width: 4%; }
.cockpit-app-page .app-rounds-overview-table col.col-datetime { width: 11%; }
.cockpit-app-page .app-rounds-overview-table col.col-player { width: 24%; }
.cockpit-app-page .app-rounds-overview-table col.col-result { width: 6%; }
.cockpit-app-page .app-rounds-overview-table col.col-action { width: 7%; }

.cockpit-app-page .app-rounds-overview-table th,
.cockpit-app-page .app-rounds-overview-table td {
  min-width: 0 !important;
  padding: 8px 6px !important;
  border-right: 1px solid rgba(71, 137, 176, .16);
  border-bottom: 1px solid rgba(71, 137, 176, .22) !important;
  color: #edf7fd !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25;
  text-align: center;
  vertical-align: middle;
  white-space: normal !important;
  overflow: visible !important;
}

.cockpit-app-page .app-rounds-overview-table th:last-child,
.cockpit-app-page .app-rounds-overview-table td:last-child {
  border-right: 0;
}

.cockpit-app-page .app-rounds-overview-table thead th {
  padding: 11px 6px !important;
  color: #d9edf8 !important;
  background: linear-gradient(180deg, #113148, #071a27) !important;
  border-bottom: 1px solid rgba(91, 184, 235, .52) !important;
  font-family: "Orbitron", "Segoe UI", sans-serif;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cockpit-app-page .app-rounds-overview-table thead .head-fred {
  color: #ffb1b1 !important;
  border-bottom: 2px solid rgba(235, 86, 86, .82) !important;
}

.cockpit-app-page .app-rounds-overview-table thead .head-korre {
  color: #a0f1cc !important;
  border-bottom: 2px solid rgba(70, 213, 145, .82) !important;
}

.cockpit-app-page .app-rounds-overview-table thead .head-daniel {
  color: #b3d9ff !important;
  border-bottom: 2px solid rgba(83, 167, 255, .86) !important;
}

/* ==================================================
   Rundentabelle – wechselnde Zeilenfarben
   ================================================== */

/* Ungerade Standardzeilen */
.cockpit-app-page
.app-rounds-overview-table
tbody tr:nth-child(odd):not(.round-champion-row)
> td:not(.round-player-cell) {
  background:
    rgba(4, 15, 25, .52) !important;
}

/* Gerade Standardzeilen */
.cockpit-app-page
.app-rounds-overview-table
tbody tr:nth-child(even):not(.round-champion-row)
> td:not(.round-player-cell) {
  background:
    rgba(14, 37, 53, .68) !important;
}

/* Hover */
.cockpit-app-page
.app-rounds-overview-table
tbody tr:not(.round-champion-row):hover > td {
  filter: brightness(1.12);
}

/* Laufende Nummer */
.cockpit-app-page .round-index {
  color: #9fc9e2 !important;

  font-family:
    "Orbitron",
    "Segoe UI",
    sans-serif;

  font-size: 13px !important;
  font-weight: 800 !important;
}

/* Datum, Zeit und Ergebnis */
.cockpit-app-page .round-datetime strong,
.cockpit-app-page .round-datetime span,
.cockpit-app-page .round-result strong,
.cockpit-app-page .round-result span {
  display: block;
}

.cockpit-app-page .round-datetime strong {
  color: #f4f9fc;
  font-size: 12px;
}

.cockpit-app-page .round-datetime span {
  margin-top: 4px;

  color: #8fb0c4;

  font-size: 11px;
  font-weight: 700;
}

.cockpit-app-page .round-result strong {
  color: #ffe28a;

  font-family:
    "Orbitron",
    "Segoe UI",
    sans-serif;

  font-size: 16px;
  font-weight: 800;
}

.cockpit-app-page .round-result span {
  margin-top: 5px;

  color: #a8c1d1;

  font-size: 10px;
  font-weight: 800;

  text-transform: uppercase;
}

.cockpit-app-page .round-player-cell {
  padding: 7px !important;
}

/* ==================================================
   Fred – ungerade und gerade Zeilen
   ================================================== */

.cockpit-app-page
.app-rounds-overview-table
tbody tr:nth-child(odd):not(.round-champion-row)
.player-fred-cell {
  background:
    rgba(103, 29, 35, .24) !important;

  border-left:
    1px solid rgba(235, 86, 86, .28);

  border-right:
    1px solid rgba(235, 86, 86, .34);
}

.cockpit-app-page
.app-rounds-overview-table
tbody tr:nth-child(even):not(.round-champion-row)
.player-fred-cell {
  background:
    rgba(151, 43, 50, .34) !important;

  border-left:
    1px solid rgba(247, 100, 100, .40);

  border-right:
    1px solid rgba(247, 100, 100, .46);
}

/* ==================================================
   Korre – ungerade und gerade Zeilen
   ================================================== */

.cockpit-app-page
.app-rounds-overview-table
tbody tr:nth-child(odd):not(.round-champion-row)
.player-korre-cell {
  background:
    rgba(22, 91, 64, .24) !important;

  border-left:
    1px solid rgba(70, 213, 145, .28);

  border-right:
    1px solid rgba(70, 213, 145, .34);
}

.cockpit-app-page
.app-rounds-overview-table
tbody tr:nth-child(even):not(.round-champion-row)
.player-korre-cell {
  background:
    rgba(31, 130, 89, .34) !important;

  border-left:
    1px solid rgba(80, 230, 160, .40);

  border-right:
    1px solid rgba(80, 230, 160, .46);
}

/* ==================================================
   Daniel – ungerade und gerade Zeilen
   ================================================== */

.cockpit-app-page
.app-rounds-overview-table
tbody tr:nth-child(odd):not(.round-champion-row)
.player-daniel-cell {
  background:
    rgba(28, 67, 113, .27) !important;

  border-left:
    1px solid rgba(83, 167, 255, .28);

  border-right:
    1px solid rgba(83, 167, 255, .34);
}

.cockpit-app-page
.app-rounds-overview-table
tbody tr:nth-child(even):not(.round-champion-row)
.player-daniel-cell {
  background:
    rgba(39, 93, 158, .38) !important;

  border-left:
    1px solid rgba(94, 180, 255, .42);

  border-right:
    1px solid rgba(94, 180, 255, .48);
}

/* Mini-Felder innerhalb von Fred */
.cockpit-app-page
.player-fred-cell .round-stat {
  border-color:
    rgba(235, 86, 86, .22);

  background:
    rgba(53, 12, 16, .52);
}

/* Mini-Felder innerhalb von Korre */
.cockpit-app-page
.player-korre-cell .round-stat {
  border-color:
    rgba(70, 213, 145, .22);

  background:
    rgba(8, 45, 31, .52);
}

/* Mini-Felder innerhalb von Daniel */
.cockpit-app-page
.player-daniel-cell .round-stat {
  border-color:
    rgba(83, 167, 255, .24);

  background:
    rgba(8, 31, 58, .54);
}

/* Gerade Zeilen auch innerhalb der Mini-Felder hervorheben */
.cockpit-app-page
.app-rounds-overview-table
tbody tr:nth-child(even):not(.round-champion-row)
.round-stat {
  filter: brightness(1.16);
}

/* ==================================================
   Championrunde – komplette Zeile in Gold
   ================================================== */

.cockpit-app-page
.app-rounds-overview-table
tbody tr.round-champion-row > td {
  background:
    linear-gradient(
      180deg,
      rgba(115, 78, 10, .64),
      rgba(61, 41, 7, .72)
    ) !important;

  border-top:
    1px solid rgba(255, 207, 91, .72) !important;

  border-bottom:
    1px solid rgba(255, 196, 61, .70) !important;

  box-shadow:
    inset 0 0 18px rgba(255, 196, 61, .06);
}

/* Goldene Spielerbereiche */
.cockpit-app-page
.app-rounds-overview-table
tbody tr.round-champion-row
.round-player-cell {
  background:
    linear-gradient(
      180deg,
      rgba(129, 88, 13, .72),
      rgba(67, 45, 7, .78)
    ) !important;

  border-left:
    1px solid rgba(255, 205, 83, .58);

  border-right:
    1px solid rgba(255, 205, 83, .58);
}

/* Mini-Felder innerhalb der Championrunde */
.cockpit-app-page
.app-rounds-overview-table
tbody tr.round-champion-row
.round-stat {
  border-color:
    rgba(255, 210, 100, .52) !important;

  background:
    rgba(72, 47, 5, .72) !important;

  box-shadow:
    inset 0 0 10px rgba(255, 196, 61, .05);
}

/* Texte der Championrunde */
.cockpit-app-page
.app-rounds-overview-table
tbody tr.round-champion-row
.round-index,
.cockpit-app-page
.app-rounds-overview-table
tbody tr.round-champion-row
.round-datetime strong,
.cockpit-app-page
.app-rounds-overview-table
tbody tr.round-champion-row
.round-result strong,
.cockpit-app-page
.app-rounds-overview-table
tbody tr.round-champion-row
.round-stat strong {
  color: #ffe497 !important;

  text-shadow:
    0 0 8px rgba(255, 196, 61, .24);
}

/* Krone vor Platz 1 */
.cockpit-app-page
.app-rounds-overview-table
tbody tr.round-champion-row
.round-result strong::before {
  content: "♛ ";
}

/* Hover der Championrunde */
.cockpit-app-page
.app-rounds-overview-table
tbody tr.round-champion-row:hover > td {
  filter: brightness(1.12);
}

.cockpit-app-page .round-player-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}

.cockpit-app-page .round-stat {
  min-width: 0;
  padding: 5px 3px 6px;
  border: 1px solid rgba(121, 176, 207, .18);
  background: rgba(2, 12, 20, .54);
  border-radius: 2px 7px 2px 7px;
  text-align: center;
}

.cockpit-app-page .round-stat-time {
  grid-column: span 2;
}

.cockpit-app-page .round-stat small,
.cockpit-app-page .round-stat strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cockpit-app-page .round-stat small {
  margin-bottom: 2px;
  color: #94b0c1;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.cockpit-app-page .round-stat strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cockpit-app-page .round-action .btn {
  width: auto !important;
  min-width: 58px !important;
  min-height: 34px !important;
  padding: 6px 8px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.cockpit-app-page .app-rounds-empty {
  padding: 22px !important;
  color: #8eacbe !important;
  text-align: center;
}

@media (max-width: 1280px) {
  .cockpit-app-page .app-rounds-overview-table col.col-index { width: 3.5%; }
  .cockpit-app-page .app-rounds-overview-table col.col-datetime { width: 10.5%; }
  .cockpit-app-page .app-rounds-overview-table col.col-player { width: 24.5%; }
  .cockpit-app-page .app-rounds-overview-table col.col-result { width: 5.5%; }
  .cockpit-app-page .app-rounds-overview-table col.col-action { width: 7%; }

  .cockpit-app-page .round-player-stats { gap: 3px; }
  .cockpit-app-page .round-stat { padding: 4px 2px 5px; }
  .cockpit-app-page .round-stat small { font-size: 7px; }
  .cockpit-app-page .round-stat strong { font-size: 11px; }
}

@media (max-width: 900px) {
  .cockpit-app-page .app-rounds-overview-table th,
  .cockpit-app-page .app-rounds-overview-table td {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  .cockpit-app-page .round-stat small { font-size: 6px; }
  .cockpit-app-page .round-stat strong { font-size: 10px; }
  .cockpit-app-page .round-action .btn { min-width: 46px !important; padding: 5px 4px !important; font-size: 8px !important; }
}

/* ==================================================
   SCOREBOARD – einheitliche dritte Kachelreihe
   ================================================== */

/*
 * Drei gleich breite Karten:
 *
 * Schaden pro Kill | Doppel-Nuller | Beste Spielstunden
 */
.cockpit-scoreboard-page
.scoreboard-third-row-card,
.cockpit-scoreboard-page
#bestHoursCard.scoreboard-third-row-card {
  grid-column:
    span 5 !important;

  order: 3 !important;

  width: 100%;
  min-width: 0;
  min-height: 205px !important;

  padding: 12px !important;

  cursor: pointer;
}

/*
 * Alte Sondergröße der Stundenkachel überschreiben.
 */
.cockpit-scoreboard-page
#bestHoursCard {
  grid-column:
    span 5 !important;

  min-height: 205px !important;
}

/*
 * Gleiche Überschriftenhöhe wie bei Knocks,
 * Assists, Revives usw.
 */
.cockpit-scoreboard-page
.scoreboard-third-row-card h2 {
  min-height: 27px;

  margin: 0 0 5px;

  font-size: 15px;
  font-weight: 800;
}

/*
 * Gleicher Hinweistext wie bei den anderen
 * kompakten Kacheln.
 */
.cockpit-scoreboard-page
.scoreboard-third-row-card
.metric-card-hint {
  margin: 0 0 9px;

  color: #7899af;

  font-size: 10px;
  font-weight: 600;

  text-align: center;
}

/*
 * Einheitliche Tabellen.
 */
.cockpit-scoreboard-page
.scoreboard-third-row-card
.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.cockpit-scoreboard-page
.scoreboard-third-row-card
.table {
  width: 100%;
  min-width: 100%;
}

.cockpit-scoreboard-page
.scoreboard-third-row-card
.table thead th {
  padding:
    8px 5px !important;

  font-size:
    10px !important;

  font-weight:
    800 !important;
}

.cockpit-scoreboard-page
.scoreboard-third-row-card
.table tbody td {
  padding:
    9px 5px !important;

  font-size:
    12px !important;

  font-weight:
    700 !important;
}

/*
 * Spieler beziehungsweise Stundenbezeichnung
 * stärker hervorheben.
 */
.cockpit-scoreboard-page
.scoreboard-third-row-card
.table tbody td:nth-child(2) {
  color:
    #ffffff !important;

  font-weight:
    800 !important;
}

/*
 * Gleiche Hover-Darstellung wie bei Knocks.
 */
.cockpit-scoreboard-page
.scoreboard-third-row-card:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(65, 174, 242, .65);

  box-shadow:
    inset 0 0 0 1px
      rgba(4, 15, 25, .85),

    0 16px 34px
      rgba(0, 0, 0, .38),

    0 0 18px
      rgba(57, 185, 255, .10);
}

/* Mittlere Bildschirmbreite */
@media (max-width: 1120px) {
  .cockpit-scoreboard-page
  .scoreboard-third-row-card,
  .cockpit-scoreboard-page
  #bestHoursCard.scoreboard-third-row-card {
    grid-column:
      span 5 !important;
  }
}

/* Tablet: zwei Karten pro Reihe */
@media (max-width: 820px) {
  .cockpit-scoreboard-page
  .scoreboard-third-row-card,
  .cockpit-scoreboard-page
  #bestHoursCard.scoreboard-third-row-card {
    grid-column:
      span 1 !important;
  }
}

/* Smartphone: alle Karten untereinander */
@media (max-width: 620px) {
  .cockpit-scoreboard-page
  .scoreboard-third-row-card,
  .cockpit-scoreboard-page
  #bestHoursCard.scoreboard-third-row-card {
    grid-column:
      1 !important;
  }
}