/* ============================================================
   TuS OEDT – Blau / Weiß / Rot
   ============================================================ */
:root {
  --primary:   #cc0000;    /* Primärfarbe – wird von applyConfig überschrieben */
  --primary2:  #e62020;    /* abgeleitet – wird von applyConfig gesetzt */
  --primary3:  #ff3333;    /* abgeleitet – wird von applyConfig gesetzt */
  --accent:    #003087;    /* Akzentfarbe – wird von applyConfig überschrieben */
  --accent2:   #0047b3;    /* abgeleitet – wird von applyConfig gesetzt */
  --on-primary: #ffffff;    /* Textfarbe auf --primary-Flächen, berechnet von applyConfig */
  --on-accent:  #ffffff;    /* Textfarbe auf --accent-Flächen */
  --on-btn:     #ffffff;    /* Textfarbe auf --btn-bg-Flächen */
  --btn-bg:    #003087;    /* Buttons + Überschriften immer Blau */
  --btn-bg2:   #0047b3;
  --bg:     #f0f2f6;
  --surface:#ffffff;
  --surf2:  #f7f9fc;
  --border: #d0d8e8;
  --text:   #1a2340;
  --text2:  #5a6a8a;
  --green:  #1a8a3a;
  --radius: 10px;
  --shadow: 0 2px 12px rgba(0,48,135,.10);
  --shadow-lg: 0 8px 32px rgba(0,48,135,.15);
}

/* Dark Mode */
[data-theme="dark"] {
  --bg:      #0f1117;
  --surface: #1a1f2e;
  --surf2:   #222838;
  --border:  #2d3550;
  --text:    #e2e8f0;
  --text2:   #8899bb;
  --shadow:  0 2px 12px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Safari iOS: body background-color färbt die Adressleiste ein */
html { background: var(--bg); }
body { background: var(--bg); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 15px; min-height: 100vh; }
#app-screen { background: var(--bg); min-height: 100vh; }

/* ── HEADER ── */
header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary2) 60%, var(--primary3) 100%);
  color: var(--on-primary);
  box-shadow: var(--shadow-lg);
  position: sticky; top: 0; z-index: 200;
}
.header-top {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 28px; border-bottom: 3px solid var(--accent);
}
.logo-wrap { display: flex; align-items: center; gap: 14px; }
.logo-img { height: 52px; width: auto; background: #fff; border-radius: 8px; padding: 5px 8px; }
.logo-text { }
.logo-main {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px; font-weight: 600; letter-spacing: 0.5px;
  color: var(--on-primary); line-height: 1;
}
.logo-main span { color: var(--on-primary); }
.logo-sub { font-size: 11px; color: var(--on-primary); opacity: .7; letter-spacing: 2px; text-transform: uppercase; margin-top: 2px; }

.header-stripe { display: none; }

nav {
  display: flex; gap: 2px; margin-left: 24px; flex: 1;
}
nav button {
  background: none; border: none; color: var(--on-primary);
  opacity: .85; cursor: pointer; font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: 1px;
  padding: 7px 16px; border-radius: 6px;
  transition: all .15s; text-transform: uppercase;
  position: relative;
  /* Gleiche Höhe für alle Buttons, auch wenn Label zweizeilig */
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; align-self: stretch;
  line-height: 1.15;
}
nav button:hover { background: rgba(255,255,255,.12); color: var(--on-primary); }
nav button .nav-icon {
  display: block;
  font-size: 17px;
  line-height: 1;
  margin-bottom: 2px;
  color: var(--primary-light);
  opacity: 0.72;
  transition: opacity .15s;
  filter: grayscale(1);
}
nav button.active .nav-icon,
nav button:hover .nav-icon {
  opacity: 1;
  filter: grayscale(0);
}
nav button .nav-label { font-size: 11px; line-height: 1; }
nav button.active {
  background: var(--primary-dark);
  color: var(--on-primary);
  box-shadow: none;
}

.header-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }
#user-btn { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex-shrink: 0; }
.user-badge {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12); border-radius: 20px;
  padding: 5px 14px 5px 8px; cursor: pointer; transition: background .15s;
}
.btn-logout-header {
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.38);
  color: var(--on-primary);
  border-radius: 20px;
  width: 34px; height: 34px;
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}
.btn-logout-header:hover { background: rgba(255,255,255,.32); }
.user-badge:hover { background: rgba(255,255,255,.2); }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700;
  overflow: visible; flex-shrink: 0; position: relative;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.user-name { font-size: 13px; font-weight: 600; color: var(--on-primary); }
.user-rolle { font-size: 10px; color: var(--on-primary); opacity: .6; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── FOOTER ── */
#app-footer {
  text-align: center;
  padding: 18px 20px 24px;
  font-size: 12px;
  color: var(--text2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  margin-top: 32px;
}

/* ── LOGIN ── */
.login-wrap {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; box-sizing: border-box;
  background: rgba(0,15,50,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: loginFadeIn .18s ease;
}
@keyframes loginFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.login-card {
  background: #fff; border-radius: 16px; padding: 40px 44px;
  max-width: 420px; width: 100%; box-shadow: 0 24px 64px rgba(0,0,0,.28);
  text-align: center; position: relative; z-index: 1;
  animation: loginSlideIn .2s cubic-bezier(.34,1.4,.64,1);
}
@keyframes loginSlideIn {
  from { transform: translateY(-18px) scale(.97); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}
.login-logo { height: 80px; margin-bottom: 20px; }
.login-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px; font-weight: 600; color: var(--primary); margin-bottom: 4px;
}
.login-sub { font-size: 13px; color: var(--text2); margin-bottom: 28px; }
.login-card .form-group { text-align: left; margin-bottom: 16px; }
.login-card label { font-size: 12px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 6px; }
.login-card input {
  width: 100%; background: var(--surf2); border: 2px solid var(--border);
  border-radius: 8px; padding: 11px 14px; font-family: 'Barlow', sans-serif;
  font-size: 14px; color: var(--text); outline: none; transition: border .15s;
}
.login-card input:focus { border-color: var(--primary); }
.login-err { background: #fde8e8; border: 1px solid #f5b0b0; color: var(--accent); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; display: none; }
.btn-login {
  width: 100%; background: var(--btn-bg); color: var(--on-btn); border: none;
  border-radius: 8px; padding: 13px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; transition: background .15s;
}
.btn-login:hover { background: var(--btn-bg2); }
.btn-login-cancel {
  width: 100%; background: transparent; color: var(--text2);
  border: 1.5px solid var(--border); border-radius: 8px; padding: 13px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; transition: background .15s, color .15s;
}
.btn-login-cancel:hover { background: var(--surf2); color: var(--text); }

/* ── MAIN ── */
main { padding: 24px 28px; max-width: 1440px; margin: 0 auto; }

/* ── STATS BAR ── */
.stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 0; }
/* In multi-col dashboard rows: stretch to full height */
.dash-row-wrap .stats-bar {
  height: 100%;
}
.stats-bar.layout-vertical {
  grid-template-columns: 1fr;
  align-content: stretch;
}
.stats-bar.layout-vertical .stat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Dashboard-Zeile: konfigurierte Spaltenbreiten, responsive umbrechen */
.dash-row-wrap {
  display: grid;
  grid-template-columns: var(--dash-gtc, 1fr);
  gap: 20px;
  align-items: stretch;
}
.dash-row-wrap > div {
  height: 100%;
}
.dash-row-wrap.stacked {
  grid-template-columns: 1fr !important;
}
.dash-row-wrap.stacked > div {
  min-width: 0 !important;
  flex: 1 !important;
}
.dash-row-wrap.stacked .dash-col-auto {
  order: -1;
}

.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 16px; text-align: center;
  box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s;
  border-top: 4px solid var(--primary);
  display: flex; flex-direction: column; justify-content: center;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat-num { font-family: 'Barlow Condensed', sans-serif; font-size: 34px; font-weight: 600; color: var(--primary); line-height: 1; }
.stat-label { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

/* ── PANEL / CARD ── */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  margin-bottom: 20px;
}
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  background: var(--surf2);
}
.panel-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 600;
  color: var(--primary); display: flex; align-items: center; gap: 8px;
}
.panel-count { font-size: 12px; color: var(--text2); font-weight: 600; }

/* ── FILTER ── */
.filter-bar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  box-shadow: var(--shadow); margin-bottom: 16px;
}
.fg { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.fg label { font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; }
.fg select, .fg input {
  background: var(--surf2); border: 1.5px solid var(--border);
  color: var(--text); border-radius: 7px; padding: 8px 10px;
  font-family: 'Barlow', sans-serif; font-size: 13px; outline: none; transition: border .15s;
  box-sizing: border-box; height: 38px;
}
.fg select:focus, .fg input:focus { border-color: var(--primary); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 7px; padding: 8px 18px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: all .15s;
}
.btn-primary { background: var(--btn-bg); color: var(--on-btn); }
.btn-primary:hover { background: var(--btn-bg2); }

.btn-ghost  { background: var(--surf2); color: var(--text); border: 1.5px solid var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.btn-sm { padding: 5px 12px; font-size: 12px; height: 30px; box-sizing: border-box; line-height: 1; }
.btn-danger { background: var(--surf2); color: var(--text); border: 1.5px solid var(--border); }
.btn-danger:hover { background: #c0392b; color: #fff; border-color: #c0392b; }

/* ── TABLE ── */
.table-scroll { overflow-x: auto; }

/* Dashboard Letzte Veranstaltungen: einheitliche Spaltenbreiten über alle Tabellen */
.veranst-dash-table { table-layout: fixed; width: 100%; }
.veranst-dash-table .vcol-athlet   { width: 28%; }
.veranst-dash-table .vcol-ak       { width:  8%; }
.veranst-dash-table .vcol-result   { width: 14%; }
.veranst-dash-table .vcol-pace     { width: 12%; }
.veranst-dash-table .vcol-platz    { width: 12%; }
.veranst-dash-table .vcol-ms       { width: 15%; }
.veranst-dash-table .vcol-ms-platz { width: 11%; }
.veranst-dash-table td, .veranst-dash-table th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* AK-Badge kompakter damit er auch in schmalen Spalten nicht abgeschnitten wird */
.veranst-dash-table td:nth-child(2) .badge { padding: 2px 5px; letter-spacing: 0; }
table { width: 100%; border-collapse: collapse; }
th {
  background: var(--surf2); padding: 10px 14px;
  text-align: left; font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text2); border-bottom: 2px solid var(--border);
  cursor: pointer; white-space: nowrap; user-select: none;
}
th:hover { color: var(--primary); }
th.sorted { color: var(--primary); }
td { padding: 10px 14px; border-bottom: 1px solid #edf0f7; white-space: nowrap; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surf2); }

.result { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 600; color: var(--result-color, var(--primary)); }
.athlet-link { color: var(--text); font-weight: 600; text-decoration: none; cursor: pointer; border-bottom: 1px dotted var(--border); transition: border-color .1s; }
.athlet-link:hover { border-color: var(--text2); }
.ort-text { color: var(--text2); font-size: 12px; }
.disziplin-text { color: var(--primary2); font-size: 12px; font-weight: 600; }

/* ── BADGES ── */
.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; }
.badge-m { background: var(--accent); color: var(--on-accent); }
.badge-w { background: var(--primary); color: var(--on-primary); }
.badge-platz { background: rgba(26,138,58,.12); color: var(--green); }

.badge-ms { background: rgba(180,120,0,.13); color: #7a5000; border: 1px solid rgba(180,120,0,.3); font-size: 11px; font-weight: 700; letter-spacing: .3px; }
[data-theme="dark"] .badge-ms { background: rgba(180,120,0,.22); color: #f0c060; border-color: rgba(180,120,0,.4); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-ms { background: rgba(180,120,0,.22); color: #f0c060; border-color: rgba(180,120,0,.4); }
}

.badge-editor { background: rgba(0,48,135,.15); color: var(--primary); }

.badge-aktiv      { background: color-mix(in srgb,var(--accent) 10%,transparent); color: var(--accent); border: 1px solid color-mix(in srgb,var(--accent) 25%,transparent); }
.badge-gold   { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:600; letter-spacing:.4px; background:#fff3cd; color:#856404; border:1px solid #ffc107; }

.badge-ak     { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:600; letter-spacing:.4px; background:#eef1f7; color:#5a6a8a; border:1px solid #c0cce0; }
.badge-silver { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:600; letter-spacing:.4px; background:#f0f0f0; color:#555; border:1px solid #bbb; }
.badge-pb     { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:600; letter-spacing:.4px; background:rgba(26,138,58,.12); color:#1a8a3a; border:1px solid rgba(26,138,58,.3); }
.timeline-badges .badge-gold, .timeline-badges .badge-ak, .timeline-badges .badge-silver, .timeline-badges .badge-pb { font-weight:600; }
.badge-inaktiv    { background: color-mix(in srgb,var(--primary) 10%,transparent); color: var(--primary); border: 1px solid color-mix(in srgb,var(--primary) 20%,transparent); }
.badge-eingeloggt { background: rgba(34,197,94,.12); color: #15803d; border: 1px solid rgba(34,197,94,.3); }

/* ── PAGINATION ── */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surf2);
}
.page-info { font-size: 12px; color: var(--text2); }
.page-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.page-btn {
  background: var(--surface); border: 1.5px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 4px 11px; cursor: pointer; font-size: 12px; font-weight: 600;
  transition: all .1s;
}
.page-btn:hover { border-color: var(--primary); color: var(--primary); }
.page-btn.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.page-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── SUBTABS ── */
.subtabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.subtab {
  background: var(--surface); border: 1.5px solid var(--border); color: var(--text2);
  padding: 7px 16px; border-radius: 7px; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase; transition: all .15s;
}
.subtab:hover { border-color: var(--primary); color: var(--primary); }
.subtab.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* ── MODAL ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,20,60,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 500; padding: 20px;
  animation: fadein .2s;
}
@keyframes fadein { from{opacity:0} to{opacity:1} }
.modal {
  background: var(--surface); border-radius: 14px; padding: 30px;
  max-width: 580px; width: 100%; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg); animation: slidein .25s;
}
.modal-wide { max-width: 800px; }
.modal-profile { max-width: 800px; width: 100%; height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
@keyframes slidein { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal h2 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 600;
  color: var(--primary); margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
}
.modal-close { margin-left: auto; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text2); line-height: 1; }
.modal-close:hover { color: var(--accent); }

/* ── FORM GRID ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1/-1; }
.form-group label { font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; }
.form-group input, .form-group select, .form-group textarea {
  background: var(--surf2); border: 1.5px solid var(--border);
  color: var(--text); border-radius: 7px; padding: 9px 12px;
  font-family: 'Barlow', sans-serif; font-size: 13px; outline: none; transition: border .15s;
  box-sizing: border-box; height: 40px;
}
.form-group textarea { height: auto; }
.form-group input:focus, .form-group select:focus { border-color: var(--primary); }
.form-group input.error { border-color: var(--accent); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }

/* ── TOP LIST ── */

/* Medaillen-Badges: gefüllte Chips für Platz 1–3 */
.medal-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700;
  line-height: 1; flex-shrink: 0;
}
.medal-badge.gold   { background: #f5c518; color: #fff;    border: 1.5px solid #f5c518; }
.medal-badge.silver { background: #b0b0b0; color: #fff;    border: 1.5px solid #b0b0b0; }
.medal-badge.bronze { background: #cd7f32; color: #fff;    border: 1.5px solid #cd7f32; }
.medal-badge.rank   { background: var(--surf2); color: var(--text2); border: 1.5px solid var(--border); font-size: 12px; }

/* Dark Mode */
[data-theme="dark"] .medal-badge.gold   { background: #f5c518; color: #fff;    border-color: #f5c518; }
[data-theme="dark"] .medal-badge.silver { background: #b0b0b0; color: #fff;    border-color: #b0b0b0; }
[data-theme="dark"] .medal-badge.bronze { background: #cd7f32; color: #fff;    border-color: #cd7f32; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .medal-badge.gold   { background: #f5c518; color: #fff;    border-color: #f5c518; }
  :root:not([data-theme="light"]) .medal-badge.silver { background: #b0b0b0; color: #fff;    border-color: #b0b0b0; }
  :root:not([data-theme="light"]) .medal-badge.bronze { background: #cd7f32; color: #fff;    border-color: #cd7f32; }
}

.top-name { font-weight: 600; font-size: 14px; }

/* ── REKORDE ── */

/* ── NOTIFICATION ── */
.notification {
  position: fixed; bottom: 24px; right: 24px;
  padding: 13px 22px; border-radius: 10px;
  font-weight: 600; font-size: 14px; z-index: 999;
  box-shadow: var(--shadow-lg); animation: slideup .3s;
  max-width: 380px;
}
@keyframes slideup { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }
.notif-ok    { background: var(--green); color: #fff; }
.notif-err   { background: var(--accent); color: var(--on-accent); }
.notif-info  { background: var(--primary); color: var(--on-primary); }

/* ── LOADING ── */
.loading { display: flex; align-items: center; justify-content: center; padding: 60px; color: var(--text2); font-size: 16px; gap: 12px; }
.spinner { width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { padding: 48px; text-align: center; color: var(--text2); }
.empty .empty-icon { font-size: 40px; margin-bottom: 12px; }
.empty .empty-text { font-size: 15px; }

/* ── ATHLET-PROFIL ── */
.profile-header { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.profile-avatar {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 600; color: var(--on-primary);
  box-shadow: 0 4px 16px rgba(0,48,135,.25);
  overflow: hidden;
}

/* ── ADMIN ── */
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.user-row { display: flex; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); gap: 12px; }
.user-row:last-child { border-bottom: none; }
.user-row:hover { background: var(--surf2); }

/* Dark Mode: Formular-Elemente und spezielle Komponenten */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--surf2); color: var(--text); border-color: var(--border);
}
[data-theme="dark"] .modal { background: var(--surface); }
[data-theme="dark"] .panel { background: var(--surface); }
[data-theme="dark"] .login-card { background: var(--surface); }
[data-theme="dark"] .login-wrap { background: rgba(0,5,20,.72); }
[data-theme="dark"] .rek-top-btn { background: var(--surf2); border-color: var(--border); }
[data-theme="dark"] .rek-top-btn:hover { background: var(--border); }
[data-theme="dark"] .rek-cat-btn { background: var(--surf2); }
[data-theme="dark"] .rek-ak-card { background: var(--surface); }
[data-theme="dark"] table tr:hover td { background: var(--surf2); }
[data-theme="dark"] th { background: var(--surf2); color: var(--text); }
[data-theme="dark"] .filter-bar { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .subtab { background: var(--surf2); border-color: var(--border); color: var(--text2); }
[data-theme="dark"] .btn-ghost { background: var(--surf2); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .stat-card { background: var(--surface); }
[data-theme="dark"] .user-row { border-bottom-color: var(--border); }
[data-theme="dark"] .user-badge { background: var(--surf2); }
[data-theme="dark"] nav button { color: var(--text2); }
[data-theme="dark"] nav button.active { color: var(--on-primary); }

[data-theme="dark"] .page-btn { background: var(--surf2); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .page-btn.active { background: var(--btn-bg); color: var(--on-btn); }
[data-theme="dark"] .rek-table tbody tr:nth-child(even) { background: var(--surf2); }

[data-theme="dark"] header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
[data-theme="dark"] .result,

[data-theme="dark"] .timeline-result { --result-accent-color: var(--accent-light); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input,
  :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) textarea {
    background: var(--surf2); color: var(--text); border-color: var(--border);
  }
  :root:not([data-theme="light"]) .modal { background: var(--surface); }
  :root:not([data-theme="light"]) .panel { background: var(--surface); }
  :root:not([data-theme="light"]) .login-card { background: var(--surface); }
  :root:not([data-theme="light"]) .rek-top-btn { background: var(--surf2); border-color: var(--border); }
  :root:not([data-theme="light"]) .rek-cat-btn { background: var(--surf2); }
  :root:not([data-theme="light"]) .rek-ak-card { background: var(--surface); }
  :root:not([data-theme="light"]) th { background: var(--surf2); color: var(--text); }
  :root:not([data-theme="light"]) .filter-bar { background: var(--surface); }
  :root:not([data-theme="light"]) .subtab { background: var(--surf2); border-color: var(--border); }
  :root:not([data-theme="light"]) .btn-ghost { background: var(--surf2); border-color: var(--border); color: var(--text); }
  :root:not([data-theme="light"]) .stat-card { background: var(--surface); }

  :root:not([data-theme="light"]) header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  }
  :root:not([data-theme="light"]) .result,

  :root:not([data-theme="light"]) .timeline-result { --result-accent-color: var(--accent-light); }
  :root:not([data-theme="light"]) .page-btn { background: var(--surf2); border-color: var(--border); color: var(--text); }
  :root:not([data-theme="light"]) .page-btn.active { background: var(--btn-bg); color: var(--on-btn); }
}

/* OS-Präferenz Dark Mode (wird von JS überschrieben wenn manuell gesetzt) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      #0f1117;
    --surface: #1a1f2e;
    --surf2:   #222838;
    --border:  #2d3550;
    --text:    #e2e8f0;
    --text2:   #8899bb;
    --shadow:  0 2px 12px rgba(0,0,0,.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
  }
}

/* ══════════════════════════════════════════════
   RESPONSIVE – Tablet (max 900px)
   ══════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Layout */
  main { padding: 12px; }
  .header-top { padding: 8px 14px; gap: 10px; }
  .logo-img { height: 40px; }
  .logo-main { font-size: 17px; }
  .logo-sub  { font-size: 10px; }

  /* Nav: scrollbar horizontal */
  #main-nav { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
               scrollbar-width: none; white-space: nowrap; flex-shrink: 1; min-width: 0; }
  #main-nav::-webkit-scrollbar { display: none; }
  #main-nav button { flex-shrink: 0; padding: 8px 14px; font-size: 13px; }

  /* Formulare */
  .form-grid  { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }

  /* Filter-Bar */
  .filter-bar { flex-direction: column; gap: 10px; }
  .filter-bar > * { width: 100%; }

  /* Tabellen scrollen */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Stats-Bar */
  .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Rekorde Top-Disziplinen */
  .rek-top-disz { gap: 8px; }
  .rek-top-btn  { min-width: 100px; padding: 9px 12px; }
  .rek-top-name { font-size: 13px; }

  /* Rekorde Kategorie-Tabs */
  .rek-cat-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch;
                  scrollbar-width: none; white-space: nowrap; }
  .rek-cat-tabs::-webkit-scrollbar { display: none; }

  /* Panel-Header */
  .panel-header { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Modal */
  .modal { padding: 20px; max-width: 100%; }

  /* Profil */

  /* Dashboard-Grid: untereinander ab 900px */

}

/* ══════════════════════════════════════════════
   RESPONSIVE – Smartphone (max 600px)
   ══════════════════════════════════════════════ */

/* ── Tablet (iPad): Pace + Meisterschaft ausblenden, Breiten anpassen ── */
@media (min-width: 601px) and (max-width: 1100px) {
  .veranst-dash-table .vcol-pace,
  .veranst-dash-table th:nth-child(4),
  .veranst-dash-table td:nth-child(4),
  .veranst-dash-table .vcol-ms,
  .veranst-dash-table th:nth-child(6),
  .veranst-dash-table td:nth-child(6),
  .veranst-dash-table .vcol-ms-platz,
  .veranst-dash-table th:nth-child(7),
  .veranst-dash-table td:nth-child(7) { display: none; }

  /* 4 verbleibende Spalten: Athlet | AK | Ergebnis | Platz AK */
  .veranst-dash-table .vcol-athlet { width: 38%; }
  .veranst-dash-table .vcol-ak     { width: 15%; }
  .veranst-dash-table .vcol-result { width: 27%; }
  .veranst-dash-table .vcol-platz  { width: 20%; }

  .veranst-dash-table td, .veranst-dash-table th { font-size: 12px; padding: 5px 7px; }
  .veranst-dash-table .result { font-size: 13px; }
}

@media (max-width: 600px) {
  /* Layout */
  main { padding: 8px; }
  .header-top { padding: 6px 10px; gap: 6px; }
  .logo-img { height: 34px; }
  .logo-main { font-size: 15px; }
  .logo-sub  { display: none; }
  .logo-text { gap: 1px; }

  /* Header-Right – kompakter */
  .header-right { gap: 6px; }
  .user-name, .user-rolle { display: none; }
  .user-badge { padding: 4px; }

  /* Nav */
  #main-nav button { padding: 7px 10px; font-size: 12px; }

  /* Stats */
  .stats-bar { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  .stat-num  { font-size: 24px; }

  /* Panels */
  .panel { border-radius: 8px; }
  .panel-header { padding: 10px 14px; }
  .panel-header { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
  .panel-header .panel-title { flex: 1; min-width: 0; }

  /* Tabellen: auf Smartphones kritische Spalten ausblenden */
  /* Nur normale Tabellen – veranst-dash-table hat eigene Regeln */
  table:not(.veranst-dash-table):not(.serie-teilnahmen-table) th:nth-child(4),
  table:not(.veranst-dash-table):not(.serie-teilnahmen-table) td:nth-child(4) { display: none; }
  /* rek-table: Spalte 4 (AK oder Pace) ausblenden */
  .rek-table:not(.serie-teilnahmen-table):not(.vr-table) th:nth-child(4),
  .rek-table:not(.serie-teilnahmen-table):not(.vr-table) td:nth-child(4) { display: none; }
  /* rek-table: letzte Spalte (Datum) ausblenden –
     ohne Pace: Badge|Name|Erg.|~~AK~~|~~Datum~~ → 3 Sp.
     mit Pace:  Badge|Name|Erg.|~~Pace~~|AK|~~Datum~~ → 4 Sp. */
  .rek-table:not(.serie-teilnahmen-table):not(.vr-table) th:last-child,
  .rek-table:not(.serie-teilnahmen-table):not(.vr-table) td:last-child { display: none; }
  /* Athletenname auf Mobile auf max. 140px begrenzen;
     .rek-name-cell ist ein Block-div – overflow:hidden wirkt zuverlässig ohne table-layout:fixed */
  .rek-name-cell { max-width: 140px; }
  /* Ergebnis-Spalte: kein Umbruch, rechtsbündig */
  .rek-table td.result { white-space: nowrap; text-align: right; }
  /* veranst-dash-table auf Smartphone: Pace + Meisterschaft + Platz MS ausblenden */
  .veranst-dash-table .vcol-pace,
  .veranst-dash-table th:nth-child(5),
  .veranst-dash-table td:nth-child(5),
  .veranst-dash-table .vcol-ms,
  .veranst-dash-table th:nth-child(6),
  .veranst-dash-table td:nth-child(6),
  .veranst-dash-table .vcol-ms-platz,
  .veranst-dash-table th:nth-child(7),
  .veranst-dash-table td:nth-child(7) { display: none; }

  /* Verbleibende 4 Spalten neu verteilen */
  .veranst-dash-table .vcol-athlet { width: 42%; }
  .veranst-dash-table .vcol-ak     { width: 12%; }
  .veranst-dash-table .vcol-result { width: 22%; }
  .veranst-dash-table .vcol-platz  { width: 24%; }

  /* Schrift + Padding kompakter */
  .veranst-dash-table td, .veranst-dash-table th { font-size: 12px; padding: 6px 8px; }
  .veranst-dash-table .result { font-size: 14px; }

  /* Filter-Bar */
  .filter-bar { padding: 12px; }
  .filter-bar input, .filter-bar select { font-size: 16px; } /* iOS zoom fix */

  /* Formulare: iOS zoom fix + volle Breite */
  .form-group input, .form-group select, .form-group textarea { font-size: 16px; }
  .form-group { width: 100%; }

  /* Rekorde */
  .rek-cat-tabs { padding-bottom: 4px; }
  .rek-cat-btn { font-size: 13px; padding: 8px 14px; }
  .rek-top-disz { gap: 6px; }
  .rek-top-btn  { min-width: 90px; padding: 8px 10px; }
  .rek-top-name { font-size: 12px; }
  .rek-top-cnt  { font-size: 10px; }
  .rek-ak-grid  { grid-template-columns: 1fr; }

  /* Männer/Frauen & Dashboard: untereinander */
  .mw-grid { grid-template-columns: 1fr !important; }

  /* Timeline kompakter */
  .timeline-date { min-width: 0; width: auto; font-size: 10px; }
  .timeline-result { font-size: 15px; }

  /* Subtabs scrollen */
  .subtabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
             scrollbar-width: none; padding-bottom: 2px; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtab { flex-shrink: 0; font-size: 12px; padding: 6px 12px; }

  /* Pagination */
  .pagination { gap: 4px; }
  .page-btn { min-width: 30px; height: 30px; font-size: 12px; }
  .page-info { font-size: 12px; }

  /* Modal: Vollbild von unten */
  .modal { padding: 16px; border-radius: 12px 12px 0 0; width: 100%; max-width: 100%; margin: 0; }

  .modal-actions { flex-direction: column; gap: 8px; }
  .modal-actions .btn { width: 100%; justify-content: center; }

  /* Login */
  .login-card { padding: 28px 20px; border-radius: 12px 12px 0 0; width: 100%; max-width: 100%; }
  .login-logo { height: 60px; }
  .login-title { font-size: 22px; }
  .login-wrap { padding: 0; align-items: flex-end; }

  /* Eintragen – Tabellenzeilen als Karten */

  /* Athleten-Liste: kompaktere Zeilen */
  .user-row { flex-wrap: wrap; gap: 6px; }

  /* Veranstaltungs-Meta: untereinander */
  .veranst-meta { flex-direction: column; align-items: flex-start; gap: 2px; }

  /* Veranstaltungs-Blöcke: weniger Padding auf Mobile */
  .veranst-dash-block { padding: 10px 12px !important; }

  /* Profil */
  .profile-header { flex-direction: column; align-items: flex-start; gap: 10px; }

}

.rek-ak-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.rek-ak-card { background: #fff; border-radius: 10px; border: 1px solid var(--border); overflow: hidden; }
.rek-ak-header { background: var(--btn-bg); color: var(--on-btn); font-weight: 600; font-size: 13px;
  padding: 8px 14px; letter-spacing: .04em; }
.rek-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rek-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
.rek-table th { padding: 7px 10px; text-align: left; color: var(--text2); font-size: 11px;
  font-weight: 600; text-transform: uppercase; border-bottom: 2px solid var(--border); }
.rek-table tr:last-child td { border-bottom: none; }
.rek-table tr:hover td { background: var(--surf2); }
/* Athletenname-Zelle: Block damit overflow/ellipsis zuverlässig funktionieren */
.rek-name-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rek-top-disz { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 0 16px; }
.rek-top-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 11px 18px; border-radius: 10px; border: 2px solid var(--border);
  background: var(--surface); cursor: pointer; transition: all .15s; font-family: inherit;
  text-align: left; min-width: 120px;
}
.rek-top-btn--sm { font-size:13px; min-width:100px; padding:8px 12px; }
.rek-top-btn--sm .rek-top-name { font-weight:400; font-size:13px; }
.rek-top-btn--sm .rek-top-cnt  { font-size:11px; }
.rek-top-btn:hover { border-color: var(--accent); background: var(--surf2); }
.rek-top-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  outline: 2px solid var(--accent2);
  outline-offset: 1px;
}
.rek-top-name { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.2; }
.rek-top-btn.active .rek-top-name { color: var(--on-accent); }
.rek-top-cnt  { font-size: 11px; color: var(--text2); margin-top: 3px; }
.rek-top-btn.active .rek-top-cnt  { color: var(--on-accent); opacity: .75; }

.rek-cat-tabs { display: flex; gap: 10px; padding: 16px 0 10px; flex-wrap: wrap; }
.rek-cat-btn {
  padding: 10px 22px; border-radius: 10px; border: 2px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 15px; font-weight: 600;
  cursor: pointer; transition: all .15s; font-family: inherit; white-space: nowrap;
}
.rek-cat-btn:hover { border-color: var(--primary); color: var(--primary); }
.rek-cat-btn.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.rek-disz-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 600;
  color: var(--text); margin: 4px 0 16px; letter-spacing: .01em;
  border-bottom: 3px solid var(--accent); padding-bottom: 6px; display: inline-block;
}

/* ── VEREINSREKORDE ── */
/* table-layout:fixed ist Pflicht: erzwingt colgroup-Breiten und erlaubt text-overflow auf td */
.vr-table { table-layout: fixed; }
.vr-table .vr-group-head {
  text-align: center; text-transform: none; font-size: 13px;
  border-bottom: 2px solid var(--border); font-weight: 600;
}
.vr-table .vr-subhead th { font-size: 11px; color: var(--text2); border-bottom: 1px solid var(--border); }
/* Spaltenbreiten: 10% Disziplin + je 45% Frauen/Männer = 100% exakt */
.vr-table col.vr-col-disz { width: 10%; }
.vr-table col.vr-name     { width: 13%; }
.vr-table col.vr-result   { width:  7%; }
.vr-table col.vr-date     { width:  7%; }
.vr-table col.vr-event    { width: 18%; }
/* Zellen */
.vr-table .vr-col-disz { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-table .vr-result   { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.vr-table .vr-date     { white-space: nowrap; }
.vr-table .vr-event    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Trennlinie zwischen Frauen- und Männer-Block */
.vr-table td:nth-child(5), .vr-table th:nth-child(5) { border-right: 2px solid var(--border); }
/* Kategorie-Trennzeile */
.vr-table tr.vr-cat-sep td {
  font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700;
  color: var(--text); background: var(--surf2);
  padding: 6px 10px; border-bottom: 1px solid var(--border);
  letter-spacing: .03em;
}

/* Mobile-Karten-Layout für Vereinsrekorde */
.vr-mobile { display: none; }

@media (max-width: 700px) {
  .vr-desktop { display: none !important; }
  .vr-mobile  { display: block; }
}

/* Karten-Styles (immer definiert, nur auf Mobile sichtbar) */
.vr-m-cat-hd {
  font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700;
  color: var(--text); background: var(--surf2);
  padding: 6px 12px; border-bottom: 1px solid var(--border);
  letter-spacing: .03em;
}
.vr-m-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.vr-m-row:active { background: var(--surf2); }
.vr-m-disz {
  font-weight: 700; font-size: 13px; min-width: 72px; max-width: 90px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-top: 2px; flex-shrink: 0;
}
.vr-m-entries { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vr-m-entry {
  display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0;
}
.vr-m-symbol { font-size: 13px; width: 16px; flex-shrink: 0; color: var(--text2); }
.vr-m-name   { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.vr-m-result { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.vr-m-entry--w .vr-m-symbol { color: var(--primary); }
.vr-m-entry--w .vr-m-name   { color: var(--primary); font-weight: 500; }
.vr-m-entry--empty .vr-m-name, .vr-m-entry--empty .vr-m-result { color: var(--text3); }

/* ── TIMELINE ── */
.timeline { padding: 8px 16px; }
.timeline-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); position: relative; }
.timeline-item:last-child { border-bottom: none; }

.timeline-date { font-size: 11px; color: var(--text2); min-width: 70px; padding-top: 2px; }
.timeline-body { flex: 1; }

.timeline-athlet { font-size: 12px; color: var(--text2); }
.timeline-athlet-disz { font-size: 13px; margin-bottom: 2px; line-height: 1.3; }
.timeline-result { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 600; color: var(--result-accent-color, var(--accent)); }
.timeline-badges { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }

.modal table td, .modal table th { padding: 5px 6px; border-bottom: 1px solid var(--border); }
.modal table tr:last-child td { border-bottom: none; }
[data-theme="dark"] .rek-table tr[style*="fff0ee"] td { background: rgba(220,80,60,.15) !important; }
[data-theme="dark"] .rek-table tr[style*="eef3ff"] td { background: rgba(60,100,220,.15) !important; }

/* ══════════════════════════════════════════════
   EINTRAGEN – Input-Klassen (responsive)
   ══════════════════════════════════════════════ */
.bk-input-sel  { width: 160px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; background: var(--surface); color: var(--text); }

@media (max-width: 600px) {
.bk-input-sel {
    width: 100%; font-size: 16px; padding: 8px 10px;
  }
}

/* ══════════════════════════════════════════════
   MODAL – Wrapper für Slide-up auf Mobile
   ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   BURGER-MENÜ
   ══════════════════════════════════════════════ */
.burger-btn {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  width: 38px; height: 38px; gap: 5px;
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 8px; cursor: pointer; flex-shrink: 0;
  transition: background .15s;
}
.burger-btn:hover { background: rgba(255,255,255,.22); }
.burger-btn span {
  display: block; width: 18px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.burger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn.open span:nth-child(2) { opacity: 0; }
.burger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav-Overlay */
#mobile-nav-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 190;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  animation: fadeIn .15s ease;
}
#mobile-nav-overlay.open { display: block; }

#mobile-nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 195;
  width: 260px;
  background: var(--header-bg);
  box-shadow: -4px 0 24px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
#mobile-nav-drawer.open { transform: translateX(0); }

#mobile-header-ver { display: none; }

#mobile-page-title {
  display: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 600; letter-spacing: .5px;
  color: rgba(255,255,255,.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; text-align: center;
}

.mobile-nav-items { flex: 1; padding: 10px 0; }
.mobile-nav-items button {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 13px 20px;
  background: none; border: none; color: rgba(255,255,255,.8);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; cursor: pointer; text-align: left;
  transition: background .12s, color .12s;
  border-left: 3px solid transparent;
}
.mobile-nav-items button:hover { background: rgba(255,255,255,.1); color: var(--on-primary); }
.mobile-nav-items button.active {
  background: rgba(255,255,255,.15); color: var(--on-primary);
  border-left-color: var(--accent2);
}
.mobile-nav-divider {
  height: 1px; background: rgba(255,255,255,.12); margin: 6px 20px;
}

.mobile-nav-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12px; color: rgba(255,255,255,.4);
}

@media (max-width: 900px) {
  .burger-btn { display: flex; }
  #main-nav { display: none; }
  #mobile-page-title { display: block; }
  #mobile-header-ver { display: inline; }
  .logo-sub { display: none; }
  .anon-btn-wrap { display: none !important; }
  /* Profil- und Logout-Button im Header ausblenden wenn Burger aktiv */
  #user-btn { display: none !important; }
  .btn-logout-header { display: none !important; }
}

/* ══════════════════════════════════════════════
   REGISTRIERUNG
   ══════════════════════════════════════════════ */
.reg-step {
  display: none;
}
.reg-step.active { display: block; }

.reg-progress {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 28px;
}
.reg-step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.5);
  flex-shrink: 0; transition: all .2s;
  font-family: 'Barlow Condensed', sans-serif;
}
.reg-step-dot.done  { background: #4ade80; border-color: #4ade80; color: #fff; }
.reg-step-dot.active { background: #fff; border-color: #fff; color: var(--primary); }
.reg-step-line { flex: 1; height: 2px; background: rgba(255,255,255,.15); margin: 0 6px; }
.reg-step-line.done { background: #4ade80; }

.reg-info-box {
  background: var(--surf2);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
  font-size: 13px; color: var(--text2);
  margin-bottom: 20px; line-height: 1.5;
}

/* Admin Registrierungsverwaltung */
.reg-pending-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px;
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 10px;
}
.reg-pending-info { flex: 1; min-width: 0; }
.reg-pending-name { font-weight: 700; font-size: 15px; }

.badge-pending  { background: #fff8e1; color: #b45309; border: 1px solid #fcd34d; }
.badge-email-ok { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.badge-email-no { background: #fde8e8; color: #7f1d1d; border: 1px solid #fca5a5; }

/* Anon-Buttons (Desktop) */
.anon-btn-wrap {
  display: flex; align-items: center; gap: 8px;
}

/* Anon-Registrieren-Button im Header (immer auf dunklem Hintergrund) */
.anon-reg-btn {
  color: rgba(255,255,255,.9) !important;
  border-color: rgba(255,255,255,.35) !important;
  background: transparent !important;
}
.anon-reg-btn:hover {
  background: rgba(255,255,255,.15) !important;
  color: var(--on-primary) !important;
  border-color: rgba(255,255,255,.6) !important;
}

/* ── E-Mail-Hint im Registrierungsformular ── */
.reg-email-hint {
  padding: 7px 12px; border-radius: 0 0 7px 7px;
  margin-top: -1px; margin-bottom: 0;
  font-size: 12px; line-height: 1.4;
  background: var(--surf2); border: 1px solid var(--border); border-top: none;
  color: var(--text2); transition: background .2s, border-color .2s, color .2s;
}
.reg-email-hint.reg-email-ok {
  background: #f0fdf4; border-color: #86efac; color: #15803d;
}
.reg-email-hint.reg-email-err {
  background: #fef2f2; border-color: #fca5a5; color: #b91c1c;
  font-weight: 600;
}
[data-theme="dark"] .reg-email-hint {
  background: #1e2535; border-color: #3a4460; color: #a0b0cc;
}
[data-theme="dark"] .reg-email-hint.reg-email-ok {
  background: #052e16; border-color: #166534; color: #4ade80;
}
[data-theme="dark"] .reg-email-hint.reg-email-err {
  background: #450a0a; border-color: #7f1d1d; color: #f87171;
}

/* Placeholder im Dark Mode = Rahmenfarbe */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] select::placeholder {
  color: var(--border);
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input::placeholder,
  :root:not([data-theme="light"]) textarea::placeholder {
    color: var(--border);
    opacity: 1;
  }
}

/* ── Passwort-Stärke ── */
.pw-strength-wrap { margin-top: 8px; }
.pw-strength-bar {
  height: 5px; background: var(--border); border-radius: 3px;
  overflow: hidden; margin-bottom: 8px;
}
.pw-strength-fill {
  height: 100%; border-radius: 3px; width: 0%;
  transition: width .3s, background .3s;
}
.pw-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-group {
  font-size: 11px; padding: 2px 8px; border-radius: 20px;
  font-weight: 600;
}
.pw-group.ok      { background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }
.pw-group.missing { background: var(--surf2); color: var(--text2); border: 1px solid var(--border); }
[data-theme="dark"] .pw-group.ok { background: #052e16; color: #4ade80; border-color: #166534; }

/* ── Registrierung Fehler-Box ── */
.reg-err-box {
  background: #fef2f2; border: 1px solid #fca5a5;
  color: #b91c1c; font-size: 13px; font-weight: 600;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 12px;
}
[data-theme="dark"] .reg-err-box {
  background: #450a0a; border-color: #7f1d1d; color: #f87171;
}

/* ── Registrierung Buttons gleich groß ── */
.reg-btn-row {
  display: flex; gap: 10px; margin-top: 16px;
}
.reg-btn-row .btn-login,
.reg-btn-row .btn-login-cancel {
  flex: 1;
  width: auto;
  margin-top: 0;
}
/* Passwort-Wiederholung: kleinerer Abstand */
.modal .form-group + .form-group {
  margin-top: 12px;
}

/* Input über Hint: untere Ecken eckig damit nahtloser Übergang */
#reg-email:has(+ .reg-email-hint),
#reg-email {
  border-radius: var(--radius) var(--radius) 0 0;
}

/* ── Admin Settings ── */
.settings-panel-body {
  padding: 8px 20px;
}
.settings-row {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-label { flex: 1; min-width: 0; padding-top: 4px; }
.settings-row-input { flex-shrink: 0; }
.settings-input {
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px; font-family: inherit;
  background: var(--surf2); color: var(--text);
  width: 260px;
  transition: border-color .15s;
}
.settings-input:focus { outline: none; border-color: var(--primary); }
@media (max-width: 600px) {
  .settings-row { flex-direction: column; gap: 8px; }
  .settings-input { width: 100%; }
}

/* ── SETUP-WIZARD ─────────────────────────────────────────── */
.setup-header { text-align: center; padding: 28px 24px 8px; }
.setup-logo   { font-size: 48px; margin-bottom: 8px; }
.setup-header h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--text); }
.setup-header p  { margin: 0; color: var(--text2); font-size: 14px; }

.setup-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 16px 24px; border-bottom: 1px solid var(--border);
}
.setup-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.setup-step-num {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--text2); background: var(--surface);
  transition: all .2s;
}
.setup-step.active .setup-step-num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.setup-step.done   .setup-step-num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.setup-step-label  { font-size: 11px; color: var(--text2); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.setup-step.active .setup-step-label { color: var(--accent); }
.setup-step-line { flex: 1; height: 2px; background: var(--border); min-width: 32px; margin-bottom: 20px; }

.setup-body  { padding: 20px 24px 24px; }
.setup-hint  { font-size: 13px; color: var(--text2); margin: 0 0 16px; line-height: 1.5; }
.setup-hint code { background: var(--surf2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.setup-field { margin-bottom: 14px; }
.setup-label { display: block; font-size: 12px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px; }
.setup-input { width: 100%; padding: 9px 12px; border-radius: 7px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 14px; box-sizing: border-box;
  transition: border-color .15s; font-family: inherit; }
.setup-input:focus { outline: none; border-color: var(--accent); }
.setup-btn-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

#setup-box { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--border); overflow: hidden; }
.setup-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--accent); margin: 4px 0 12px; }
.setup-divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.setup-field-hint { font-size: 11px; color: var(--text2); margin-bottom: 5px; }

/* ── JAHRES-HERVORHEBUNG ──────────────────────────────────── */
.hl-cur-year  { background: color-mix(in srgb, var(--primary) 12%, transparent) !important; }
.hl-prev-year { background: color-mix(in srgb, var(--accent)  12%, transparent) !important; }
[data-theme="dark"] .hl-cur-year  { background: color-mix(in srgb, var(--primary) 20%, var(--surface)) !important; }
[data-theme="dark"] .hl-prev-year { background: color-mix(in srgb, var(--accent)  20%, var(--surface)) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hl-cur-year  { background: color-mix(in srgb, var(--primary) 20%, var(--surface)) !important; }
  :root:not([data-theme="light"]) .hl-prev-year { background: color-mix(in srgb, var(--accent)  20%, var(--surface)) !important; }
}

/* ── BADGES DARK MODE ──────────────────────────────────────── */
[data-theme="dark"] .badge-gold {
  background: #3d2e00;
  color: #ffd87a;
  border-color: #6b4f00 !important;
}

[data-theme="dark"] .badge-silver { background:rgba(255,255,255,.08); color:#ccc; border-color:rgba(255,255,255,.2); }
[data-theme="dark"] .badge-pb     { background:rgba(26,138,58,.2); color:#4cd97a; border-color:rgba(26,138,58,.4); }
[data-theme="dark"] .badge-ak {
  background: #1a1f2e;
  color: #8fa3c0;
  border-color: #2e3a50 !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-gold {
    background: #3d2e00; color: #ffd87a; border-color: #6b4f00 !important;
  }

  :root:not([data-theme="light"]) .badge-silver { background:rgba(255,255,255,.08); color:#ccc; border-color:rgba(255,255,255,.2); }
  :root:not([data-theme="light"]) .badge-pb     { background:rgba(26,138,58,.2); color:#4cd97a; border-color:rgba(26,138,58,.4); }
  :root:not([data-theme="light"]) .badge-ak {
    background: #1a1f2e; color: #8fa3c0; border-color: #2e3a50 !important;
  }
}
/* ══════════════════════════════════════════════
   RESPONSIVE – Sehr kleines Smartphone (max 400px)
   ══════════════════════════════════════════════ */
@media (max-width: 400px) {
  .veranst-dash-table .vcol-athlet { width: 40%; }
  .veranst-dash-table .vcol-ak     { width: 13%; }
  .veranst-dash-table .vcol-result { width: 25%; }
  .veranst-dash-table .vcol-platz  { width: 22%; }
  .veranst-dash-table td, .veranst-dash-table th { padding: 5px 6px; font-size: 11px; }
}

/* ── Admin System-Dashboard: alle Tabellen als echte Tabellen, 100% breit ── */
/* Überschreibt das globale display:block aus der Mobil-Media-Query */
.admin-phpbb-table,
.admin-gaeste-table,
.admin-login-table,
.admin-aktiv-table {
  display: table !important;
  width: 100% !important;
  table-layout: fixed;
}
/* phpBB Stat-Tabelle: Label-Spalte etwas breiter als Wert-Spalte */
.admin-phpbb-table col:first-child { width: 55%; }
/* Zelleninhalt nicht überlaufen lassen */
.admin-gaeste-table td,
.admin-login-table td,
.admin-aktiv-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Erste Spalte (Name/IP) darf umbrechen */
.admin-gaeste-table td:first-child,
.admin-login-table td:first-child,
.admin-aktiv-table td:first-child { white-space: normal; }

/* ══════════════════════════════════════════════
   ADMIN – Responsive (Smartphone / Tablet)
   ══════════════════════════════════════════════ */

/* ── Gemeinsam: Admin-Tabellen scrollen ── */

/* ── Admin Subtabs: mehr Abstand, besser scrollbar ── */
@media (max-width: 900px) {
  .subtabs { gap: 3px; }
  .subtab  { font-size: 11px; padding: 6px 10px; }
}

/* ── Tablet (601–1024px) ── */
@media (max-width: 1024px) {
  /* Darstellung: max-width + Inputs voll breit */
  .settings-row { flex-direction: column; gap: 6px; }
  .settings-input { width: 100% !important; box-sizing: border-box; }

  /* System-Dashboard: 2-col-Grid → 1-col */
  .admin-sys-grid { grid-template-columns: 1fr !important; }

  /* Benutzer-Karte: Actions umbrechen */
  .user-row { flex-wrap: wrap; }

  /* Konto: 3-col → 1-col */
  .konto-grid { grid-template-columns: 1fr !important; }
}

/* ── Smartphone (≤ 600px) ── */
@media (max-width: 600px) {
  /* Admin-Tabellen: horizontal scrollen */
  #main-content .data-table { display: block; overflow-x: auto; white-space: nowrap; }
  #main-content .data-table td,
  #main-content .data-table th { padding: 8px 10px; font-size: 12px; }

  /* Anträge-Tabelle – rek-table und veranst-dash-table ausschließen (eigene Responsive-Logik) */
  #main-content table:not(.rek-table):not(.veranst-dash-table):not(.serie-teilnahmen-table) { display: block; overflow-x: auto; width: 100%; }

  /* Buttons in Zeilen nicht umbrechen */
  .data-table .btn-sm { font-size: 11px; padding: 3px 7px; }

  /* Panel-Innenabstand kompakter */
  #main-content .panel { padding: 0; }
  #main-content .panel > div[style*="padding:20"] { padding: 14px !important; }
  #main-content .panel > div[style*="padding: 20"] { padding: 14px !important; }

  /* Formulare: volle Breite */
  .settings-row-input,
  .settings-input { width: 100% !important; box-sizing: border-box; }

  /* Darstellung: Farb-Picker nebeneinander */
  .settings-row > .settings-row-input > div { flex-wrap: wrap; }

  /* Konto-Seite: Spalten untereinander */
  .konto-grid { grid-template-columns: 1fr !important; }

  /* User-Row: kompakter */
  .user-row { padding: 10px 12px; }

  /* Admin Benutzer: Rolle + Aktionen umbrechen */
  .user-row { flex-wrap: wrap; gap: 6px; }

  /* Registrierungen: Karten statt Tabelle */

  /* Bulk-Eintragen: Eingabe-Tabelle scrollbar */
  #bulk-table-wrap { overflow-x: auto; }
  #bulk-table-wrap table { min-width: 540px; }

  /* Antraege-Zuletzt-Tabelle scrollbar */
  .done-table-wrap { overflow-x: auto; }

  /* System-Dashboard Aktiv-Nutzer-Tabelle */

  /* GitHub + Darstellung: Inputs */
  input[type="date"].settings-input,
  input[type="text"].settings-input,
  input[type="password"].settings-input,
  input[type="number"].settings-input { width: 100% !important; }

  /* Subtabs: etwas kleiner */
  .subtab { font-size: 11px; padding: 5px 9px; }

  /* HoF-Karte: volle Breite */

}