/* ===== Design-Tokens ===== */
:root{
  --bg:#0b0f17;
  --text:#e7ebf3; --text-dim:#a6b0c3;
  --primary:#C38E4F; --border:#253049;
  --overlay: rgba(11,15,23,.55);
  --container: 1600px; --radius:16px; --radius-sm:10px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ===== Hintergrund (wie Hauptseite) ===== */
html, body { height: 100%; }
body{
  margin:0;
  color: var(--text);
  background-image:
    linear-gradient(var(--overlay), var(--overlay)),
    url("/assets/banner.png");
  background-position: center top, center top;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  min-height: 100vh;
}

.container{ 
  max-width: var(--container); 
  margin-inline:auto; 
  padding-inline:24px; 
}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ===== Fester Zurück-Button ===== */
.back-fixed{
  position: fixed; top: 10px; left: 10px; z-index: 100;
  display: inline-block; padding: 8px 12px; border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 15%, black);
  color: #fff; text-decoration: none; font-weight: 800; letter-spacing:.2px;
  border: 1px solid color-mix(in oklab, var(--primary), black 25%);
  backdrop-filter: blur(6px);
}
.back-fixed:hover, .back-fixed:focus-visible{
  outline:2px solid color-mix(in oklab, var(--primary), white 20%); outline-offset:2px;
}

/* ===== Hero ===== */
.hero{ background: transparent; padding: 72px 0 24px; text-align:center; }
.hero h1{ margin:0; font-size: clamp(32px,3.2vw,48px); text-shadow:0 2px 12px rgba(0,0,0,.35); }

/* ===== Tabs ===== */
.tabbar{ display:flex; gap:12px; align-items:center; justify-content:center; margin:20px 0 18px; flex-wrap:wrap; }
.tab{
  appearance:none; padding:12px 18px; border-radius:999px; border:1px solid var(--border);
  background: rgba(15,21,36,.9); color:#fff; font-weight:800; cursor:pointer;
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
  font-size:1rem;
}
.tab[aria-selected="true"]{ background: color-mix(in oklab, var(--primary) 24%, black);
  border-color: color-mix(in oklab, var(--primary), black 20%); }
.tab:hover{ transform: translateY(-1px); }
.tab:focus-visible{ outline:2px solid color-mix(in oklab, var(--primary), white 20%); outline-offset:2px; }
.tab[disabled]{ opacity:.6; cursor:progress; }

/* ===== Abschnitt ===== */
.section{ padding: 12px 0 40px; background: transparent; }

/* ===== Daten-Karte ===== */
.lb-card{
  background: rgba(12,18,30,.85);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 10px;
  backdrop-filter: blur(4px);
  max-width: 1600px;
  margin: 0 auto;
}

.lb-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

#app{
  min-height:50vh;
  min-width:1400px;    /* mehr Platz */
  max-width:1600px;
  margin:0 auto;
  border-radius:calc(var(--radius) - 6px);
}
#loading-bg{ padding-top:5rem; padding-bottom:5rem; }
.loading-logo img{ height:85px; width:auto; }

.lb-note{ color:var(--text-dim); margin:10px 2px 2px; font-size:1rem; }

/* ===== Tabellen breiter + luftiger ===== */
.lb-card .dataTables_wrapper {
  width: 100%;
  min-width: 1400px;
  max-width: 1600px;
  margin: 0 auto;
}

.lb-card table.dataTable {
  width: 100% !important;
  min-width: 1400px !important;
}

.lb-card table.dataTable th,
.lb-card table.dataTable td {
  padding: 12px 16px;
  font-size: 1rem;
  white-space: nowrap;
}

.lb-card .dataTables_wrapper .dataTables_scrollHeadInner th {
  font-weight: 800;
  font-size: 1.05rem;
}

/* ===== Erklärungs-Box ===== */
.lb-explainer{
  margin-top: 18px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: rgba(12,18,30,.8);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text-dim);
  line-height: 1.55;
  font-size: 1rem;
  max-width: 1400px;
  margin-inline:auto;
}
.lb-explainer h3{ margin:0 0 8px; font-size:1.2rem; color:var(--text); }
.lb-explainer ul{ margin:0 0 10px 1.2em; padding:0; }
.lb-explainer li{ margin-bottom:6px; line-height:1.5; }
.lb-explainer strong{ color:var(--text); }
.lb-explainer li em {
  color: var(--primary);
  font-style: normal;
  font-weight: 700;
  margin-left: 4px;
}
.lb-explainer p {
  color: var(--primary);
  font-weight: 700;
}

/* ===== Hall of Fame ===== */
.hof { margin-top: 22px; max-width:1600px; margin-inline:auto; }
.hof-header{ display:flex; align-items:baseline; gap:12px; margin: 6px 4px 10px; }
.hof-header h2{ margin:0; font-size:1.35rem; color:var(--text); }
.hof-sub{ margin:0; color:var(--text-dim); font-size:1rem; }
.hof-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.hof-card{
  background: rgba(12,18,30,.8);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
}
.hof-card h3{ margin:0 0 6px; font-size:1.1rem; color: var(--text); }
.hof-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.hof-list li{
  display:grid; grid-template-columns: 28px 1fr auto; align-items:center; gap:8px;
  white-space: nowrap;
}
.hof-rank{ font-size:1.1rem; }
.hof-name{ overflow:hidden; text-overflow:ellipsis; }
.hof-score{ color: var(--primary); font-weight: 800; }
/* responsive */
@media (max-width: 1200px){ .hof-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .hof-grid{ grid-template-columns: 1fr; } }

/* ===== Guide-CTA ===== */
.guide-cta{ display:flex; justify-content:flex-end; padding:14px 4px 4px; max-width:1600px; margin-inline:auto; }
.btn-primary{
  display:inline-block; padding:12px 18px; border-radius:999px;
  background: var(--primary); color:#fff; text-decoration:none; font-weight:800;
  border:1px solid color-mix(in oklab, var(--primary), black 20%);
}
.btn-primary:hover, .btn-primary:focus-visible{
  background: color-mix(in oklab, var(--primary) 85%, black);
  outline:2px solid color-mix(in oklab, var(--primary), white 20%); outline-offset:2px;
}

/* ===== Footer ===== */
.site-footer{ color:var(--text-dim); background:transparent; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; max-width:1600px; margin-inline:auto; }

/* Motion-Safe */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Mobile */
@media (max-width:640px){
  #app{ min-width:600px; }
  .hero{ padding-top:78px; }
}