/*
=============================================================================
FANTASY DRAFT BOARD – CSS-DOKUMENTATION
=============================================================================
Diese Datei steuert das komplette Erscheinungsbild.

Wichtige Bereiche:
1. :root                     Zentrale Farben
2. Toolbar/Header            Logo, Titel, obere Buttons
3. Board                     Spalten, Tiers, Karten
4. .player-card.QB/RB/...    Positionsfarben
5. .database                 rechte Spielerdatenbank
6. @media                    Responsive Desktop-/Tablet-Regeln

Hinweis:
Wenn mehrere Regeln denselben Selektor betreffen, gewinnt normalerweise die
weiter unten stehende Regel. Die Datei enthält historisch einige Overrides.
=============================================================================
*/

:root{--bg:#0d1117;--panel:#161b22;--panel2:#21262d;--border:#30363d;--text:#f0f6fc;--muted:#8b949e;--accent:#2f81f7;--danger:#f85149;--success:#3fb950;--qb:#FF8F8F;--rb:#8FE36B;--wr:#4FA3E3;--te:#FFD866;--k:#D6A7FF;--dst:#B8C7D9;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}button,input,select{font:inherit}button,.file-label{border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:7px;padding:7px 10px;cursor:pointer}button:hover,.file-label:hover{border-color:#6e7681}button.danger{color:#ff7b72;background:transparent;border-color:#6e2b28}input,select{background:#0d1117;color:var(--text);border:1px solid var(--border);border-radius:7px;padding:7px 9px}header{position:sticky;top:0;z-index:40;padding:10px 14px;background:rgba(13,17,23,.97);border-bottom:1px solid var(--border)}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:7px}.toolbar h1{font-size:17px;margin:0 auto 0 0}.file-label input{display:none}.controls{display:grid;grid-template-columns:minmax(210px,1fr) 150px auto auto auto;gap:7px;padding:9px 14px;background:var(--panel);border-bottom:1px solid var(--border)}.controls label{display:flex;align-items:center;gap:6px}.controls label input{width:78px}.status{grid-column:1/-1;color:var(--muted);font-size:12px}.workspace{display:flex;align-items:flex-start;gap:10px;padding:10px;overflow:visible}.board-scroller{overflow-x:auto;overflow-y:visible;flex:1;min-width:0}.ranking-grid{display:grid;grid-template-columns:72px repeat(6,minmax(190px,1fr));gap:5px;align-items:stretch}.corner,.position-header,.rank-label,.rank-cell{border:1px solid var(--border);border-radius:7px}.corner,.position-header{background:#1c2128;padding:9px;font-weight:800;text-align:center}.position-header{position:sticky;top:0;z-index:8}.corner{color:var(--muted);font-size:11px}.rank-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:72px;background:#1c2128;color:var(--muted);font-weight:800}.tier-toggle{padding:2px 5px;font-size:9px}.tier-label{font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-weight:900}.tier-start{border-top:5px solid var(--accent)!important;border-top-left-radius:2px;border-top-right-radius:2px}.rank-cell{min-height:72px;padding:5px;background:#0d1117}.rank-cell.drag-over{border-color:var(--accent);background:#111b2e}.rank-cell.invalid-drop{border-color:var(--danger);background:#2a1114}.empty-cell{min-height:60px;display:flex;align-items:center;justify-content:center;color:#484f58;font-size:11px}.player-card{position:relative;min-height:54px;padding:5px 48px 4px 8px;border-left:4px solid var(--dst);border-radius:5px;background:#161b22;cursor:grab;user-select:none}.player-card.dragging{opacity:.35}.player-card.drafted{opacity:.45;filter:grayscale(.7)}.player-card.drafted .player-name,.player-card.drafted .meta{text-decoration:line-through}.card-top{display:flex;align-items:center;gap:6px;min-width:0}.player-name{font-size:12px;font-weight:750;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.pos-badge{font-size:9px;font-weight:800;padding:2px 4px;border-radius:4px;background:#0d1117;color:var(--text);border:1px solid var(--border)}.meta{color:var(--muted);font-size:10px;margin-top:2px;white-space:nowrap}.card-actions{position:absolute;right:4px;top:4px;display:flex;gap:3px}.icon-btn{width:20px;height:20px;padding:0;border-radius:50%;font-size:10px}.rating-row{display:flex;align-items:center;gap:6px;margin-top:3px}.rating-group{display:flex;align-items:center;gap:2px}.rating-icon{font-size:11px;font-weight:900}.up{color:var(--success)}.down{color:var(--danger)}.rating-dot{width:14px;height:14px;padding:0;border-radius:3px;background:#0d1117;color:#6e7681;font-size:8px}.rating-dot.active.upside{background:var(--success);border-color:var(--success);color:#fff}.rating-dot.active.bust{background:var(--danger);border-color:var(--danger);color:#fff}.QB{background:color-mix(in srgb,var(--qb) 42%,#161b22);border:1px solid var(--qb)}
.RB{background:#FF9A9A;border:1px solid var(--rb)color:#1F2937;}
.WR{background:#4FA3E3;border-color:#2E86C1;color:#0c4a6e
}}
.TE{background:#9BEA73;border:1px solid var(--te)color:#1F2937;}
.K{background:#D6A7FF;border:1px solid var(--k)color:#1F2937;}
.DST{background:#B8C7D9;border:1px solid var(--dst);color:#1F2937;}.database{width:300px;min-width:300px;position:sticky;top:74px;max-height:calc(100vh - 88px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:9px;overflow:hidden}.db-head{padding:9px;border-bottom:1px solid var(--border);background:#1c2128}.db-title{display:flex;justify-content:space-between;font-weight:800;margin-bottom:7px}.db-filters{display:grid;grid-template-columns:1fr;gap:6px}.db-help{color:var(--muted);font-size:10px}.db-list{overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:5px}.db-card{min-height:46px;padding-right:8px}.db-card .rating-row,.db-card .card-actions{display:none}.load-more{width:100%;margin-top:4px}.no-results{padding:20px 8px;text-align:center;color:var(--muted);font-size:12px}@media(max-width:850px){.controls{grid-template-columns:1fr 1fr}.controls>input{grid-column:1/-1}.database{position:static;max-height:600px}}

@supports not (background:color-mix(in srgb,red 50%,black)){
  .QB{background:#5b2928}.RB{background:#183f27}.WR{background:#6FB9F2;color:#0c4a6e}
  .TE{background:#57491b}.K{background:#1f4c52}.DST{background:#34383d}
}
.player-card.drafted{cursor:grab}
.player-card.drafted:active{cursor:grabbing}


/* Farbige Tier-Balken: Palette wiederholt sich ab Tier 11 */
.tier-row,
.tier-break,
[class*="tier-color-"] {
  color: #fff !important;
  font-weight: 800;
  letter-spacing: .02em;
}

.tier-color-1 { background: #22c55e !important; border-color: #16a34a !important; }
.tier-color-2 { background: #3b82f6 !important; border-color: #2563eb !important; }
.tier-color-3 { background: #8b5cf6 !important; border-color: #7c3aed !important; }
.tier-color-4 { background: #f97316 !important; border-color: #ea580c !important; }
.tier-color-5 { background: #ef4444 !important; border-color: #dc2626 !important; }
.tier-color-6 { background: #eab308 !important; border-color: #ca8a04 !important; color: #111827 !important; }
.tier-color-7 { background: #06b6d4 !important; border-color: #0891b2 !important; }
.tier-color-8 { background: #ec4899 !important; border-color: #db2777 !important; }
.tier-color-9 { background: #a16207 !important; border-color: #854d0e !important; }
.tier-color-10 { background: #6b7280 !important; border-color: #4b5563 !important; }

/* Tier-Zellen und Tier-Label vollständig einfärben */
.tier-row > *,
.tier-break > *,
[class*="tier-color-"] > * {
  background: inherit !important;
  color: inherit !important;
  border-color: inherit !important;
}

/* Spieler behalten ausschließlich ihre Positionsfarben */
.player-card {
  background-clip: padding-box;
}


/* Tier-Balken als eigene Zwischenzeile */
.tier-divider{
  grid-column:1 / -1;
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border:1px solid transparent;
  border-radius:7px;
  padding:6px 42px;
  margin:3px 0 0;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.tier-divider-title{font-size:12px}
.tier-divider-remove{
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  padding:0;
  border-radius:50%;
  background:rgba(0,0,0,.22);
  border-color:rgba(255,255,255,.35);
  color:inherit;
}
.WR .player-name,.WR .meta,.WR .rating-icon{color:#1F2937}
.WR .pos-badge,.WR .rating-dot{background:rgba(255,255,255,.55);border-color:#38bdf8;color:#1F2937}


/* Robuste Darstellung des Draftstatus */
.player-card.drafted {
  opacity: .42 !important;
  filter: grayscale(.75) !important;
}
.player-card.drafted .player-name,
.player-card.drafted .meta,
.player-card.drafted .pos-badge {
  text-decoration: line-through !important;
  text-decoration-thickness: 2px;
}


/* Dünnere Tier-Balken */
.tier-row,
.tier-break{
  min-height:22px !important;
  height:22px !important;
  padding:2px 10px !important;
  margin:2px 0 !important;
  font-size:.82rem !important;
  line-height:18px !important;
  border-width:1px !important;
}


/* v3.6 – wirksame, abgestimmte Positionsfarben */
.player-card.QB{background:#FF8F8F !important;border-color:#DC6666 !important;color:#1F2937 !important}
.player-card.RB{background:#8FE36B !important;border-color:#63BE43 !important;color:#1F2937 !important}
.player-card.WR{background:#4FA3E3 !important;border-color:#2E86C1 !important;color:#10263A !important}
.player-card.TE{background:#FFD866 !important;border-color:#D2AE35 !important;color:#1F2937 !important}
.player-card.K{background:#D6A7FF !important;border-color:#AE76DF !important;color:#1F2937 !important}
.player-card.DST{background:#B8C7D9 !important;border-color:#899CAF !important;color:#1F2937 !important}

/* Text und Badges auf hellen Karten gut lesbar */
.player-card.QB .meta,.player-card.RB .meta,.player-card.WR .meta,
.player-card.TE .meta,.player-card.K .meta,.player-card.DST .meta{
  color:rgba(17,24,39,.82) !important;
}

/* Dünnere Tier-Zwischenzeilen */
.tier-row,.tier-break{
  min-height:16px !important;
  height:16px !important;
  padding:0 8px !important;
  margin:1px 0 !important;
  line-height:16px !important;
  font-size:.74rem !important;
  border-width:1px !important;
}


/* CSV-Import */
.file-label{white-space:nowrap}
#resetPlayerDbBtn{white-space:nowrap}


/* CSV-Ranking-Modus */
.import-mode-label{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:.85rem;color:var(--muted)}
#importPlayerMode,#playerImportMode{max-width:190px;padding:7px 28px 7px 9px}


/* v3.11 – Spielerdatenbank bleibt beim Scrollen auf Board-Höhe sichtbar */
@media (min-width: 900px) {
  .player-database,
  .players-panel,
  .player-pool,
  .database-panel,
  .sidebar,
  .left-panel {
    position: sticky !important;
    top: 12px !important;
    align-self: flex-start !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}

/* Auf kleinen Bildschirmen normales Dokument-Scrolling beibehalten */
@media (max-width: 899px) {
  .player-database,
  .players-panel,
  .player-pool,
  .database-panel,
  .sidebar,
  .left-panel {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* Tatsächlicher Datenbank-Container dieser App */
@media (min-width: 900px) {
  .database {
    position: sticky !important;
    top: 12px !important;
    align-self: flex-start !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}
@media (max-width: 899px) {
  .database {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* v3.12 – funktionierendes Sticky-Layout */
.workspace{
  overflow:visible !important;
  min-width:0;
}
.board-scroller{
  overflow-x:auto !important;
  overflow-y:clip !important;
  min-width:0 !important;
}
@media (min-width:851px){
  .database{
    position:sticky !important;
    top:74px !important;
    align-self:flex-start !important;
    height:calc(100vh - 88px) !important;
    max-height:calc(100vh - 88px) !important;
    overflow:hidden !important;
    z-index:12;
  }
  .database .db-list{
    min-height:0;
    overflow-y:auto !important;
  }
}

/* v3.16 – Umschalter für SFlex / 1QB */
.database-mode-label{display:flex;align-items:center;gap:6px;font-weight:700;white-space:nowrap}
.database-mode-label select{min-width:88px}


/* v3.17 – Interface und Bedienung */
.board-column{min-width:0;flex:1;position:relative}
.board-sticky-header{position:sticky;top:0;z-index:30;height:34px;overflow:hidden;background:var(--panel);border:1px solid var(--border);border-bottom:0;border-radius:8px 8px 0 0}
.board-sticky-header-inner{display:grid;grid-template-columns:54px repeat(6,minmax(190px,1fr));min-width:1240px;will-change:transform}
.board-sticky-header .corner,.board-sticky-header .position-header{position:static!important;height:34px;min-height:34px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);background:#161b22}
.board-scroller{border-radius:0 0 8px 8px}
.ranking-grid>.corner,.ranking-grid>.position-header{display:none!important}
.database-mode-label{display:grid!important;grid-template-columns:1fr auto;gap:8px;margin-bottom:7px;padding:7px 8px;background:#0d1117;border:1px solid var(--border);border-radius:6px}
.database-mode-label span{font-size:11px;color:var(--muted);align-self:center}
.stats-bar{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px!important;align-items:center;min-height:34px}
.stats-bar>span{padding:5px 8px;border-radius:6px;background:#161b22;border:1px solid var(--border);font-size:11px;white-space:nowrap}
.stats-bar .stat-main{background:#1f2937;color:var(--accent)}
.stats-bar .stat-pos{border-left-width:4px}
.stats-bar .stat-pos.QB{border-left-color:var(--qb)}.stats-bar .stat-pos.RB{border-left-color:var(--rb)}.stats-bar .stat-pos.WR{border-left-color:var(--wr)}.stats-bar .stat-pos.TE{border-left-color:var(--te)}.stats-bar .stat-pos.K{border-left-color:var(--k)}.stats-bar .stat-pos.DST{border-left-color:var(--dst)}
.tier-collapse-btn{position:absolute;left:7px;top:50%;transform:translateY(-50%);width:25px;height:24px;padding:0;border-radius:5px;background:rgba(0,0,0,.2);border-color:rgba(255,255,255,.35);color:inherit;font-size:14px}
.rank-cell.drag-preview{outline:3px solid var(--accent);outline-offset:-3px;box-shadow:inset 0 0 0 2px rgba(88,166,255,.25)}
.rank-cell.drag-preview::after{content:'Hier ablegen';position:absolute;inset:6px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--accent);border-radius:6px;background:rgba(13,17,23,.82);color:var(--accent);font-size:11px;font-weight:900;pointer-events:none}
.rank-cell{position:relative}
.remove-player-btn{width:24px;height:24px;padding:0;border-radius:6px!important;background:#3a1519!important;border:1px solid #f85149!important;color:#ff7b72!important;font-size:17px!important;font-weight:900;line-height:20px}
.remove-player-btn:hover{background:#f85149!important;color:#fff!important}
#undoBtn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:850px){.board-sticky-header{top:0}.stats-bar{grid-column:1/-1}.board-sticky-header-inner{grid-template-columns:44px repeat(6,170px);min-width:1064px}}


/* v3.18 – Statistik-Chips: Text neutral, nur Randmarkierung nach Position */
.stats-bar .position-stat,
.stat-item.position-stat,
.stats .position-stat{
  color:var(--text,#e6edf3) !important;
  background:transparent !important;
  border-top-color:var(--border,#30363d) !important;
  border-right-color:var(--border,#30363d) !important;
  border-bottom-color:var(--border,#30363d) !important;
  border-left-width:5px !important;
  border-left-style:solid !important;
}
.position-stat.QB{border-left-color:var(--qb,#ef4444) !important;}
.position-stat.RB{border-left-color:var(--rb,#34d399) !important;}
.position-stat.WR{border-left-color:var(--wr,#87cefa) !important;}
.position-stat.TE{border-left-color:var(--te,#facc15) !important;}
.position-stat.K{border-left-color:var(--k,#c084fc) !important;}
.position-stat.DST{border-left-color:var(--dst,#94a3b8) !important;}

/* Board-Header exakt an Boardbreite koppeln */
.board-header-viewport{
  position:sticky;
  top:0;
  z-index:25;
  overflow:hidden;
  min-width:0;
  width:100%;
}
.board-header-inner{
  display:grid;
  grid-template-columns:repeat(var(--board-columns, 8), minmax(150px,1fr));
  will-change:transform;
}
.board,
.board-header-inner{
  box-sizing:border-box;
}
.stats-bar .QB, .stats .QB{color:var(--text,#e6edf3) !important;}
.stats-bar .RB, .stats .RB{color:var(--text,#e6edf3) !important;}
.stats-bar .WR, .stats .WR{color:var(--text,#e6edf3) !important;}
.stats-bar .TE, .stats .TE{color:var(--text,#e6edf3) !important;}
.stats-bar .K, .stats .K{color:var(--text,#e6edf3) !important;}
.stats-bar .DST, .stats .DST{color:var(--text,#e6edf3) !important;}


/* v3.19 – Nur das Draft Board scrollt; übrige Oberfläche bleibt stehen */
@media (min-width:851px){
  html,body{
    height:100%;
    overflow:hidden !important;
  }
  body{
    margin:0;
    display:flex;
    flex-direction:column;
  }
  body>header,
  body>.controls{
    flex:0 0 auto;
    position:relative;
    top:auto;
  }
  .workspace{
    flex:1 1 auto;
    min-height:0 !important;
    overflow:hidden !important;
    align-items:stretch !important;
  }
  .board-column{
    display:flex !important;
    flex-direction:column;
    min-height:0 !important;
    height:100%;
    overflow:hidden;
  }
  .board-sticky-header{
    position:relative !important;
    top:auto !important;
    flex:0 0 34px;
    width:100%;
    overflow:hidden !important;
  }
  .board-sticky-header-inner{
    display:grid !important;
    grid-template-columns:72px repeat(6,minmax(190px,1fr)) !important;
    gap:5px !important;
    min-width:1237px !important;
    box-sizing:border-box;
  }
  .board-scroller{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:auto !important;
    overscroll-behavior:contain;
  }
  .database{
    position:relative !important;
    top:auto !important;
    height:100% !important;
    max-height:none !important;
    align-self:stretch !important;
  }
  .database .db-list{
    min-height:0;
    overflow-y:auto !important;
  }
}

/* Positionsstatistik: neutraler Text, nur linker Farbrand */
.stats-bar .stat-pos{
  color:var(--text) !important;
  background:#161b22 !important;
  border-left-width:5px !important;
  border-left-style:solid !important;
}
\n\n/* v3.20 - Positionsheader ohne Clipping */
.board-sticky-header{
  height:46px !important;
  min-height:46px !important;
  flex-basis:46px !important;
  box-sizing:border-box;
  overflow:hidden !important;
  border-bottom:1px solid var(--border) !important;
}
.board-sticky-header-inner{
  height:45px !important;
  box-sizing:border-box;
  align-items:stretch;
}
.board-sticky-header .corner,
.board-sticky-header .position-header{
  height:40px !important;
  min-height:40px !important;
  padding:0 9px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  border-radius:6px !important;
  overflow:visible !important;
}
.board-scroller{
  margin-top:0 !important;
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
}

/* Offline-PDF-Export über den Browser-Druckdialog */
@page{
  size:A3 landscape;
  margin:10mm;
}
@media print{
  html,body{
    width:auto !important;
    height:auto !important;
    overflow:visible !important;
    background:#fff !important;
    color:#111 !important;
  }
  body.pdf-export::before{
    content:attr(data-pdf-title);
  }
  body.pdf-export header,
  body.pdf-export .controls,
  body.pdf-export .database{
    display:none !important;
  }
  body.pdf-export .workspace,
  body.pdf-export .board-column,
  body.pdf-export .board-scroller{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    padding:0 !important;
    margin:0 !important;
  }
  body.pdf-export .board-sticky-header{
    position:static !important;
    display:block !important;
    width:100% !important;
    height:40px !important;
    min-height:40px !important;
    border:0 !important;
    overflow:visible !important;
    background:#fff !important;
    margin:0 0 4px !important;
  }
  body.pdf-export .board-sticky-header-inner{
    transform:none !important;
    width:100% !important;
    min-width:0 !important;
    height:40px !important;
    grid-template-columns:52px repeat(6,minmax(115px,1fr)) !important;
    gap:3px !important;
  }
  body.pdf-export .board-sticky-header .corner,
  body.pdf-export .board-sticky-header .position-header{
    height:38px !important;
    min-height:38px !important;
    color:#111 !important;
    background:#e9edf2 !important;
    border:1px solid #777 !important;
  }
  body.pdf-export .ranking-grid{
    width:100% !important;
    min-width:0 !important;
    grid-template-columns:52px repeat(6,minmax(115px,1fr)) !important;
    gap:3px !important;
  }
  body.pdf-export .rank-label,
  body.pdf-export .rank-cell{
    break-inside:avoid;
    page-break-inside:avoid;
    min-height:58px !important;
    color:#111 !important;
    background:#fff !important;
    border-color:#888 !important;
  }
  body.pdf-export .player-card{
    color:#111 !important;
    background:#fff !important;
    box-shadow:none !important;
  }
  body.pdf-export .meta,
  body.pdf-export .rank-label{
    color:#444 !important;
  }
  body.pdf-export button,
  body.pdf-export .card-actions,
  body.pdf-export .tier-collapse-btn,
  body.pdf-export .tier-divider-remove,
  body.pdf-export .tier-toggle{
    display:none !important;
  }
  body.pdf-export .tier-divider{
    break-after:avoid;
    page-break-after:avoid;
    color:#111 !important;
    background:#eee !important;
  }
}


.app-header{
 display:flex;
 align-items:center;
 gap:16px;
}
.app-logo{
 height:56px;
 width:auto;
 flex-shrink:0;
}


/* v3.22 – Icons und Anordnung der Dateiaktionen */
button,
.button-like{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:1.05em;
  flex:0 0 auto;
}
.database-file-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  margin-top:10px;
}
.database-file-actions > *{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.database-reset-action{
  margin-top:8px;
}
.database-reset-action > *{
  width:100%;
  box-sizing:border-box;
}
#importPlayersFile{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* v3.23 */
.fa-icon{
  width:1em;height:1em;display:block;flex:0 0 auto;
  filter:brightness(0) invert(1);
}
button,.button-like,label[for="importPlayersFile"]{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.database-actions{margin-top:10px;width:100%;}
.database-file-actions{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;
}
.database-file-actions>*,
.database-reset-action>*{width:100%;min-width:0;box-sizing:border-box;}
.database-reset-action{margin-top:8px;}
#importPlayersFile{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}


/* v3.24 – geordnete Bedienelemente der Spielerdatenbank */
.db-controls{display:flex;flex-direction:column;gap:10px;}
.database-control-label{display:block;margin:0 0 5px;font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--muted,#8b949e);}
.database-mode-group{margin:0;padding:0;border:0;min-width:0;}
.database-mode-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.database-mode-options label{display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 10px;border:1px solid var(--border,#30363d);border-radius:8px;cursor:pointer;background:var(--panel,#161b22);box-sizing:border-box;}
.database-mode-options label:has(input:checked){border-color:var(--accent,#58a6ff);box-shadow:0 0 0 1px var(--accent,#58a6ff) inset;}
.database-mode-options input{margin:0;}
.database-search-group,.database-position-group,.database-import-mode{display:block;}
.database-search-group input,.database-position-group select,.database-import-mode select{width:100%;box-sizing:border-box;}
.database-actions{margin-top:0;}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}


/* v3.25 – kompaktere Datenbankbuttons */
.database-actions button,
.database-actions .button-like,
.database-mode-options label{
  min-height:32px;
  height:32px;
  padding:4px 9px;
  font-size:.82rem;
  border-radius:7px;
}
.database-actions .fa-icon{
  width:.9em;
  height:.9em;
}
.database-reset-action{
  margin-top:7px;
}
.database-file-actions{
  gap:7px;
}


/* v3.26 – kompakte Datenbankfelder auf Buttonhöhe */
.database-search-group input,
.database-position-group select,
.database-import-mode select{
  height:32px;
  min-height:32px;
  padding:4px 9px;
  font-size:.82rem;
  line-height:1.2;
  border-radius:7px;
  box-sizing:border-box;
}


/* v3.27 – Toolbar: Branding links, Aktionen rechts */
.topbar,
.toolbar,
.toolbar-layout {
  display: flex;
  align-items: center;
  width: 100%;
}

.toolbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  flex: 0 0 auto;
}

.toolbar-actions,
.toolbar-buttons,
.header-actions,
.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* Falls die Toolbar-Buttons ohne eigenen Wrapper direkt im Header liegen */
.topbar > button:first-of-type,
.toolbar > button:first-of-type,
.toolbar-layout > button:first-of-type {
  margin-left: auto;
}


/* =========================================================
   v3.28 – Responsive Desktop-/Tablet-Layout
   Unterstützter Zielbereich: große Desktops bis ca. 768 px.
   ========================================================= */

/* Flexible Größen als allgemeine Grundlage */
:root {
  --responsive-page-gap: clamp(8px, 1.2vw, 18px);
  --responsive-card-gap: clamp(4px, .65vw, 10px);
}

html,
body {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
}

button,
input,
select {
  max-width: 100%;
}

/* Starre Flex-/Grid-Kinder dürfen tatsächlich schrumpfen */
main > *,
.app > *,
.app-layout > *,
.main-layout > *,
.board,
.board-wrap,
.board-container,
.database,
.player-database {
  min-width: 0;
}

/* Toolbar skaliert fließend */
.topbar,
.toolbar,
.toolbar-layout {
  gap: clamp(8px, 1vw, 16px);
  padding-left: var(--responsive-page-gap);
  padding-right: var(--responsive-page-gap);
}

.toolbar-brand {
  min-width: 0;
}

.toolbar-brand img,
.topbar img,
.toolbar img {
  width: clamp(42px, 5vw, 72px);
  height: auto;
  flex: 0 0 auto;
}

.toolbar-brand h1,
.toolbar-brand .title,
.toolbar-brand .app-title,
.topbar h1,
.toolbar h1 {
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  line-height: 1.15;
  white-space: nowrap;
}

.toolbar-actions,
.toolbar-buttons,
.header-actions,
.top-actions {
  min-width: 0;
  gap: clamp(5px, .65vw, 9px);
}

.toolbar-actions button,
.toolbar-buttons button,
.header-actions button,
.top-actions button,
.topbar > button,
.toolbar > button {
  min-height: 32px;
  height: auto;
  padding: 5px clamp(7px, .8vw, 12px);
  font-size: clamp(.72rem, .8vw, .88rem);
  white-space: nowrap;
}

/* Häufige Hauptcontainer fließend machen */
.container,
.app,
.app-shell,
.main,
main {
  max-width: 100%;
}

.board,
.board-wrap,
.board-container {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

/* Tabellen-/Tierboard-Inhalt darf innerhalb des verfügbaren Raums schrumpfen */
.tier-row,
.tier,
.tier-content,
.tier-players,
.player-list,
.players {
  min-width: 0;
}

.player-card {
  min-width: 0;
}

.player-card .player-name,
.player-card .meta,
.player-card .team,
.player-card .position {
  overflow-wrap: anywhere;
}

/* Rechte Datenbank passt ihre Breite flexibel an */
.database,
.player-database {
  width: min(100%, var(--database-width, 340px));
  max-width: 100%;
}

.db-controls,
.database-actions,
.database-file-actions {
  min-width: 0;
}

.database-search-group input,
.database-position-group select,
.database-import-mode select,
.database-actions button,
.database-actions .button-like {
  width: 100%;
}

/* Mittlere Desktopbreiten */
@media (max-width: 1280px) {
  .app-layout,
  .main-layout,
  .content-layout,
  .workspace {
    gap: 12px;
  }

  .database,
  .player-database {
    width: clamp(250px, 25vw, 310px);
  }

  .player-card {
    font-size: .92rem;
  }

  .player-card .meta {
    font-size: .78rem;
  }
}

/* Kleine Laptops / große Tablets */
@media (max-width: 1080px) {
  .topbar,
  .toolbar,
  .toolbar-layout {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .toolbar-brand {
    flex: 1 1 260px;
  }

  .toolbar-actions,
  .toolbar-buttons,
  .header-actions,
  .top-actions {
    flex: 1 1 520px;
    justify-content: flex-end;
  }

  .app-layout,
  .main-layout,
  .content-layout,
  .workspace {
    grid-template-columns: minmax(0, 1fr) clamp(235px, 28vw, 285px);
  }

  .tier-label,
  .tier-name {
    font-size: .86rem;
  }

  .player-card {
    padding: 6px 7px;
  }
}

/* Tablet Querformat / schmales Browserfenster */
@media (max-width: 900px) {
  .topbar,
  .toolbar,
  .toolbar-layout {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .toolbar-brand {
    flex-basis: 100%;
  }

  .toolbar-actions,
  .toolbar-buttons,
  .header-actions,
  .top-actions {
    flex-basis: 100%;
    justify-content: flex-end;
  }

  .toolbar-actions button,
  .toolbar-buttons button,
  .header-actions button,
  .top-actions button,
  .topbar > button,
  .toolbar > button {
    flex: 0 1 auto;
  }

  /* Hauptbereich untereinander statt unbrauchbar schmal nebeneinander */
  .app-layout,
  .main-layout,
  .content-layout,
  .workspace {
    display: flex;
    flex-direction: column;
  }

  .board,
  .board-wrap,
  .board-container {
    width: 100%;
  }

  .database,
  .player-database {
    width: 100%;
    max-width: none;
  }

  /* Datenbankbedienung auf Tablet in mehreren Spalten */
  .db-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 9px 12px;
  }

  .database-mode-group,
  .database-search-group,
  .database-position-group,
  .database-import-mode,
  .database-actions {
    min-width: 0;
  }

  .database-actions {
    grid-column: 1 / -1;
  }

  .database-file-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #dbList,
  .db-list,
  .database-list {
    max-height: 42vh;
  }
}

/* Tablet Hochformat; keine gezielte Smartphone-Optimierung */
@media (max-width: 768px) {
  :root {
    --responsive-page-gap: 8px;
  }

  body {
    font-size: 14px;
  }

  .toolbar-brand h1,
  .toolbar-brand .title,
  .toolbar-brand .app-title,
  .topbar h1,
  .toolbar h1 {
    white-space: normal;
  }

  .toolbar-actions,
  .toolbar-buttons,
  .header-actions,
  .top-actions {
    justify-content: flex-start;
  }

  .toolbar-actions button,
  .toolbar-buttons button,
  .header-actions button,
  .top-actions button,
  .topbar > button,
  .toolbar > button {
    flex: 1 1 auto;
  }

  .db-controls {
    grid-template-columns: 1fr;
  }

  .database-actions {
    grid-column: auto;
  }

  .tier-row,
  .tier {
    gap: 5px;
  }

  .tier-label,
  .tier-name {
    min-width: 54px;
    max-width: 72px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .player-card {
    font-size: .84rem;
    padding: 5px 6px;
  }

  .player-card .meta {
    font-size: .72rem;
  }
}


/* v3.29 – Toolbar-Buttons wieder kompakt wie in v3.27 */
.toolbar-actions button,
.toolbar-buttons button,
.header-actions button,
.top-actions button,
.topbar > button,
.toolbar > button {
  min-height: 30px;
  height: 30px;
  padding: 4px 8px;
  font-size: .78rem;
  line-height: 1;
  border-radius: 7px;
}

/* Responsive Anordnung beibehalten, ohne die Buttons aufzublähen */
@media (max-width: 768px) {
  .toolbar-actions button,
  .toolbar-buttons button,
  .header-actions button,
  .top-actions button,
  .topbar > button,
  .toolbar > button {
    flex: 0 1 auto;
    min-height: 30px;
    height: 30px;
    padding: 4px 8px;
    font-size: .78rem;
  }
}


/* v3.30 – Korrektur der Toolbar-Icon- und Buttongröße
   Die v3.28-Regel ".toolbar img" hatte versehentlich auch Button-Icons skaliert. */

/* Nur das eigentliche Logo darf responsiv größer bzw. kleiner werden. */
.toolbar .app-logo,
.toolbar-layout .app-logo,
.app-header .app-logo {
  width: auto !important;
  height: clamp(42px, 5vw, 56px) !important;
  max-width: none !important;
  flex: 0 0 auto;
}

/* Font-Awesome-Symbole in der Toolbar wieder auf normale Icongröße setzen. */
.toolbar .fa-icon,
.toolbar-layout .fa-icon,
#saveBoardBtn .fa-icon,
#exportBoardPdfBtn .fa-icon {
  width: 1em !important;
  height: 1em !important;
  max-width: 1em !important;
  min-width: 1em !important;
  flex: 0 0 1em !important;
}

/* Die betroffenen Buttons wieder exakt kompakt darstellen. */
#saveBoardBtn,
#exportBoardPdfBtn,
#undoBtn,
#resetBtn,
.toolbar .file-label {
  min-height: 30px !important;
  height: 30px !important;
  padding: 4px 8px !important;
  font-size: .78rem !important;
  line-height: 1 !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* Auch bei Tabletbreite kompakt halten. */
@media (max-width: 900px) {
  #saveBoardBtn,
  #exportBoardPdfBtn,
  #undoBtn,
  #resetBtn,
  .toolbar .file-label {
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 8px !important;
    font-size: .78rem !important;
    flex: 0 1 auto !important;
  }

  .toolbar .fa-icon,
  .toolbar-layout .fa-icon {
    width: 1em !important;
    height: 1em !important;
    max-width: 1em !important;
  }
}


/* ==========================================================================
   WEB v1.1 – MOBILE RESPONSIVE
   Ziel: gute Nutzbarkeit auf Smartphone, Tablet und Desktop.
   ========================================================================== */

/* Grundsätzlich saubere flexible Breiten */
html, body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body {
  overflow-x: hidden;
}

* {
  min-width: 0;
}

button, input, select {
  max-width: 100%;
}

/* ---------- Desktop / große Tablets ---------- */
@media (max-width: 1200px) {
  .workspace {
    gap: 8px;
  }

  .database,
  .player-database {
    width: clamp(250px, 28vw, 300px);
  }

  .toolbar-actions {
    gap: 6px;
  }
}

/* ---------- Tablets ---------- */
@media (max-width: 980px) {
  .toolbar,
  .toolbar-layout,
  .topbar {
    flex-wrap: wrap;
    align-items: center;
  }

  .toolbar-brand {
    flex: 1 1 100%;
  }

  .toolbar-actions,
  .toolbar-buttons,
  .header-actions,
  .top-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .workspace {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
  }

  .board-shell,
  .board-wrap,
  .board-container,
  .board-scroller {
    width: 100% !important;
    max-width: 100% !important;
  }

  .database,
  .player-database {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .database .db-list,
  .db-list {
    max-height: 44vh;
    overflow-y: auto !important;
  }

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

  .database-actions {
    grid-column: 1 / -1;
  }

  .database-file-actions {
    grid-template-columns: 1fr 1fr;
  }

  .controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .controls > * {
    width: 100% !important;
  }
}

/* ---------- Smartphones Querformat / kleine Tablets ---------- */
@media (max-width: 760px) {
  body {
    font-size: 14px;
  }

  .toolbar,
  .toolbar-layout,
  .topbar {
    padding: 8px !important;
    gap: 8px !important;
  }

  .toolbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .app-logo,
  .toolbar .app-logo,
  .toolbar-layout .app-logo {
    height: 38px !important;
    width: auto !important;
  }

  .toolbar-brand h1,
  .toolbar h1,
  .topbar h1 {
    font-size: 1rem !important;
    line-height: 1.1;
    white-space: normal !important;
  }

  .toolbar-actions button,
  .toolbar-buttons button,
  .header-actions button,
  .top-actions button,
  .toolbar .file-label {
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 7px !important;
    font-size: .74rem !important;
  }

  .toolbar .fa-icon {
    width: .95em !important;
    height: .95em !important;
  }

  /* Status/Filter kompakt */
  .controls {
    padding: 8px !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .stats-bar,
  .statistics,
  .stat-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    padding: 6px 8px !important;
  }

  .position-stat,
  .stat-item {
    font-size: .72rem !important;
    padding: 4px 6px !important;
  }

  /* Datenbanksteuerung einspaltig */
  .db-controls {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .database-actions {
    grid-column: auto !important;
  }

  .database-mode-options {
    grid-template-columns: 1fr 1fr !important;
  }

  .database-file-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  .database-search-group input,
  .database-position-group select,
  .database-import-mode select,
  .database-actions button,
  .database-actions .button-like,
  .database-mode-options label {
    min-height: 34px !important;
    height: 34px !important;
    font-size: .78rem !important;
  }

  /* Das Board bleibt horizontal scrollbar. Vertikal wird normal gescrollt. */
  .board-scroller {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* Karten auf Mobile deutlich kompakter */
  .player-card {
    min-height: 46px !important;
    padding: 5px 24px 4px 6px !important;
    border-radius: 5px !important;
  }

  .player-name {
    font-size: .78rem !important;
    line-height: 1.05 !important;
  }

  .meta {
    font-size: .66rem !important;
    margin-top: 2px !important;
  }

  .pos-badge {
    font-size: .62rem !important;
    padding: 1px 3px !important;
  }

  /* Auf Smartphones Boom/Bust ausblenden.
     Funktion und Werte bleiben gespeichert, nur die Anzeige entfällt. */
  .player-card .rating-row,
  .player-card .ratings,
  .player-card .rating-group {
    display: none !important;
  }

  /* Entfernen-Button kompakter */
  .player-card .card-actions {
    top: 4px !important;
    right: 4px !important;
  }

  .player-card .remove-btn,
  .player-card [data-action="remove"] {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
    padding: 0 !important;
    font-size: .72rem !important;
  }

  /* Tierlinien kompakter */
  .tier-row,
  .tier-break {
    min-height: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
    font-size: .68rem !important;
  }

  /* Datenbankkarten kleiner */
  .database .player-card,
  .db-list .player-card {
    min-height: 44px !important;
  }

  .db-help {
    font-size: .67rem !important;
    line-height: 1.25 !important;
  }
}

/* ---------- Smartphones Hochformat ---------- */
@media (max-width: 520px) {
  .toolbar-actions,
  .toolbar-buttons,
  .header-actions,
  .top-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px !important;
  }

  .toolbar-actions > *,
  .toolbar-buttons > *,
  .header-actions > *,
  .top-actions > * {
    width: 100% !important;
  }

  .controls {
    grid-template-columns: 1fr !important;
  }

  .stats-bar,
  .statistics,
  .stat-bar {
    gap: 4px !important;
  }

  .position-stat,
  .stat-item {
    flex: 1 1 calc(33.333% - 4px);
    text-align: center;
  }

  .database-file-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  .database-mode-options {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Horizontaler Boardbereich: genug Mindestbreite für sinnvolle Spalten */
  .ranking-grid,
  .board-grid {
    min-width: 920px !important;
  }

  /* Spalten etwas enger als Desktop */
  .ranking-grid {
    grid-template-columns: 58px repeat(6, minmax(135px, 1fr)) !important;
    gap: 4px !important;
  }

  .rank-label,
  .rank-cell {
    min-height: 54px !important;
  }

  .position-header {
    padding: 6px 4px !important;
    font-size: .72rem !important;
  }

  /* Datenbankliste nicht zu hoch, damit Board erreichbar bleibt */
  .database .db-list,
  .db-list {
    max-height: 36vh;
  }
}

/* ---------- sehr kleine Smartphones ---------- */
@media (max-width: 390px) {
  .toolbar-actions,
  .toolbar-buttons,
  .header-actions,
  .top-actions {
    grid-template-columns: 1fr !important;
  }

  .toolbar-brand {
    align-items: flex-start;
  }

  .app-logo,
  .toolbar .app-logo,
  .toolbar-layout .app-logo {
    height: 34px !important;
  }

  .toolbar-brand h1,
  .toolbar h1,
  .topbar h1 {
    font-size: .92rem !important;
  }

  .position-stat,
  .stat-item {
    flex: 1 1 calc(50% - 4px);
  }

  .ranking-grid {
    min-width: 840px !important;
    grid-template-columns: 54px repeat(6, minmax(125px, 1fr)) !important;
  }
}

/* ---------- Touch-Bedienung verbessern ---------- */
@media (pointer: coarse) {
  button,
  input,
  select,
  .button-like,
  .database-mode-options label {
    touch-action: manipulation;
  }

  /* Desktop-Doppelklick bleibt bestehen; Touch-Nutzer können weiterhin Drag
     verwenden. Mindestflächen werden etwas größer, ohne das Layout aufzublähen. */
  .database .player-card,
  .db-list .player-card {
    cursor: grab;
  }
}


/* ==========================================================================
   WEB v1.2 – MOBILE BOTTOM SHEET FÜR DIE SPIELERDATENBANK
   --------------------------------------------------------------------------
   Idee:
   Auf Smartphones liegt die Spielerdatenbank als Overlay am unteren Rand.
   Sie kann am Griff nach oben/unten gezogen werden.
   Das Draftboard bleibt im Hintergrund sichtbar.
   ========================================================================== */

@media (max-width: 760px) {

  /* Platz unterhalb des Boards, damit das letzte Boardsegment erreichbar bleibt,
     obwohl die Datenbank darüber liegt. */
  body {
    padding-bottom: 28vh;
  }

  .workspace {
    display: block !important;
  }

  /* Mobile Datenbank wird zu einem festen Bottom Sheet. */
  .database,
  .player-database {
    --mobile-sheet-height: 38vh;

    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;
    max-width: none !important;
    height: var(--mobile-sheet-height) !important;
    max-height: 88dvh !important;
    min-height: 18dvh !important;

    margin: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    border: 1px solid rgba(110,118,129,.45) !important;
    border-bottom: 0 !important;

    background: rgba(13,17,23,.985) !important;
    box-shadow: 0 -14px 40px rgba(0,0,0,.42) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;

    z-index: 1000 !important;
    transition: height .22s ease;
    touch-action: none;
  }

  /* Während des Ziehens kein animiertes Hinterherlaufen. */
  .database.mobile-sheet-dragging,
  .player-database.mobile-sheet-dragging {
    transition: none !important;
  }

  /* Griffzone analog zu Sleeper: große Touch-Fläche, kleiner sichtbarer Griff. */
  .mobile-db-sheet-handle {
    position: relative;
    flex: 0 0 auto;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: ns-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    background: linear-gradient(to bottom, rgba(29,38,70,.96), rgba(20,28,53,.96));
    border-bottom: 1px solid rgba(110,118,129,.25);
  }

  .mobile-db-grabber {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.42);
  }

  .mobile-db-handle-title {
    margin-top: 7px;
    font-size: .79rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #f0f6fc;
  }

  .mobile-db-handle-state {
    margin-top: 7px;
    color: #8b9bc1;
    font-size: .9rem;
    line-height: 1;
    transition: transform .2s ease;
  }

  .database.mobile-sheet-expanded .mobile-db-handle-state,
  .player-database.mobile-sheet-expanded .mobile-db-handle-state {
    transform: rotate(180deg);
  }

  /* Header/Filter bleiben im Sheet sichtbar, nur die Spielerliste scrollt. */
  .database .db-head,
  .player-database .db-head {
    flex: 0 0 auto;
    position: sticky !important;
    top: 0 !important;
    z-index: 3;
    max-height: 44dvh;
    overflow-y: auto;
    padding: 8px 10px 9px !important;
    background: rgba(13,17,23,.985) !important;
  }

  .database .db-title,
  .player-database .db-title {
    display: none !important;
  }

  .database .db-list,
  .player-database .db-list,
  .db-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  /* Filterleiste etwas dichter als Desktop. */
  .database .db-controls,
  .player-database .db-controls {
    gap: 6px !important;
  }

  .database .database-control-label,
  .player-database .database-control-label {
    margin-bottom: 3px !important;
    font-size: .68rem !important;
  }

  .database-search-group input,
  .database-position-group select,
  .database-import-mode select,
  .database-actions button,
  .database-actions .button-like,
  .database-mode-options label {
    height: 32px !important;
    min-height: 32px !important;
  }

  /* In der Standardhöhe werden Hilfetext und weniger wichtige Aktionen
     reduziert, um schneller zu den Spielern zu kommen. Beim Expandieren
     werden sie wieder eingeblendet. */
  .database:not(.mobile-sheet-expanded) .db-help,
  .player-database:not(.mobile-sheet-expanded) .db-help {
    display: none !important;
  }

  /* Spielerpool erhält Sleeper-ähnliche kompakte Listenoptik. */
  .database .db-list,
  .player-database .db-list {
    padding: 4px 8px 12px !important;
  }

  .database .player-card,
  .player-database .player-card,
  .db-list .player-card {
    min-height: 50px !important;
    margin: 0 0 5px !important;
    border-radius: 9px !important;
    padding: 6px 8px !important;
    box-shadow: none !important;
  }

  /* Boom/Bust bleibt auf Mobile verborgen. */
  .database .rating-row,
  .player-database .rating-row,
  .board-scroller .rating-row {
    display: none !important;
  }

  /* Board bleibt hinter dem Sheet normal horizontal scrollbar. */
  .board-scroller {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Safe Area für iPhones mit Home Indicator. */
  .database,
  .player-database {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Auf Desktop/Tablet oberhalb 760px ist der mobile Griff unsichtbar. */
@media (min-width: 761px) {
  .mobile-db-sheet-handle {
    display: none !important;
  }
}


/* ==========================================================================
   WEB v1.3 – MOBILE FILTER CHIPS & SETTINGS
   ========================================================================== */

.mobile-player-filters,
.mobile-player-search-wrap,
.mobile-settings-btn,
.mobile-settings-panel,
.mobile-settings-backdrop {
  display: none;
}

@media (max-width: 760px) {

  /* Desktop-Datenbanksteuerung im Player-Sheet ausblenden.
     Die Funktionalität bleibt über die mobilen Ersatzbedienelemente erhalten. */
  .database .database-mode-group,
  .database .database-search-group,
  .database .database-position-group,
  .database .database-import-mode,
  .database .database-actions,
  .database .db-help {
    display: none !important;
  }

  .database .db-head {
    padding: 6px 8px 4px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Horizontale, Sleeper-artige Filterleiste */
  .mobile-player-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 4px 9px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-player-filters::-webkit-scrollbar {
    display: none;
  }

  .mobile-filter-chip {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1px solid rgba(97,114,164,.36);
    background: #17213c;
    color: #f0f6fc;
    font-size: .82rem;
    font-weight: 800;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  }

  .mobile-filter-chip.is-active {
    background: #f8fafc;
    color: #15203b;
    border-color: #f8fafc;
  }

  .mobile-search-chip {
    font-size: 1.55rem;
    font-weight: 400;
    color: #f8fafc;
  }

  .mobile-player-search-wrap {
    padding: 0 4px 8px;
  }

  .mobile-player-search-wrap.is-open {
    display: block;
  }

  #mobilePlayerSearchInput {
    width: 100%;
    height: 36px;
    border-radius: 18px;
    padding: 0 14px;
    background: #111a31;
    border: 1px solid rgba(97,114,164,.45);
    color: #fff;
  }

  /* Mobile Settings button oben */
  .mobile-settings-btn {
    display: inline-flex;
    margin-left: auto;
    min-height: 30px;
    height: 30px;
    padding: 4px 8px;
    gap: 6px;
    align-items: center;
  }

  /* Settings Drawer */
  .mobile-settings-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.46);
    z-index: 1190;
  }

  .mobile-settings-backdrop.is-open {
    display: block;
  }

  .mobile-settings-panel {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1200;
    border-radius: 18px;
    background: #111827;
    border: 1px solid rgba(110,118,129,.42);
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    transform: translateY(calc(100% + 24px));
    transition: transform .2s ease;
    overflow: hidden;
  }

  .mobile-settings-panel.is-open {
    transform: translateY(0);
  }

  .mobile-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(110,118,129,.25);
  }

  .mobile-settings-head button {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    padding: 0;
    font-size: 1.2rem;
  }

  .mobile-settings-content {
    display: grid;
    gap: 12px;
    padding: 14px;
  }

  .mobile-settings-label {
    display: block;
    margin-bottom: 6px;
    color: #8b9bc1;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  .mobile-settings-choice,
  .mobile-settings-file-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mobile-settings-choice button,
  .mobile-settings-file-actions button,
  #mobileImportMode,
  .mobile-reset-db-btn {
    width: 100%;
    height: 36px;
    border-radius: 9px;
  }

  .mobile-settings-choice button.is-active {
    border-color: #58a6ff;
    box-shadow: inset 0 0 0 1px #58a6ff;
    background: #17213c;
  }

  .mobile-reset-db-btn {
    color: #ffb4b4;
    border-color: rgba(239,68,68,.55);
  }
}

@media (max-width: 520px) {
  .mobile-filter-chip {
    width: 54px;
    height: 54px;
    font-size: .76rem;
  }
}

@media (max-width: 390px) {
  .mobile-filter-chip {
    width: 50px;
    height: 50px;
    font-size: .72rem;
  }

  .mobile-player-filters {
    gap: 8px;
  }
}


/* ==========================================================================
   WEB v1.4 – TOOLS-MENÜ & FOOTER
   ========================================================================== */

/* Tools dropdown in der Toolbar */
.tools-menu {
  position: relative;
  flex: 0 0 auto;
}

.tools-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tools-menu-icon {
  font-size: 1rem;
  line-height: 1;
}

.tools-menu-dropdown {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  min-width: 190px;
  padding: 7px;
  border-radius: 10px;
  background: #161b22;
  border: 1px solid rgba(110,118,129,.45);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  z-index: 1500;
}

.tools-menu-dropdown a,
.tools-menu-placeholder,
.tools-menu-section {
  display: block;
  padding: 8px 10px;
  border-radius: 7px;
  text-decoration: none;
}

.tools-menu-dropdown a {
  color: var(--text, #e6edf3);
}

.tools-menu-dropdown a:hover,
.tools-menu-dropdown a.is-active {
  background: rgba(88,166,255,.12);
}

.tools-menu-section {
  margin-top: 4px;
  padding-bottom: 3px;
  color: var(--muted, #8b949e);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.tools-menu-placeholder {
  color: var(--muted, #8b949e);
  opacity: .72;
}

/* Footer */
.site-footer {
  margin-top: 18px;
  padding: 14px clamp(10px, 2vw, 24px);
  border-top: 1px solid rgba(110,118,129,.28);
  background: rgba(13,17,23,.92);
}

.site-footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
}

.site-footer a {
  color: var(--muted, #8b949e);
  text-decoration: none;
  font-size: .78rem;
}

.site-footer a:hover {
  color: var(--text, #e6edf3);
}

/* Rechtliche Unterseiten */
.legal-page {
  min-height: 100vh;
  background: var(--bg, #0d1117);
  color: var(--text, #e6edf3);
}

.legal-content {
  width: min(760px, calc(100% - 28px));
  margin: 0 auto;
  padding: 34px 0 60px;
}

.legal-content h1 {
  margin: 18px 0;
}

.legal-content h2 {
  margin-top: 24px;
}

.legal-back {
  color: var(--accent, #58a6ff);
  text-decoration: none;
}

.legal-notice {
  margin: 18px 0 24px;
  padding: 12px 14px;
  border: 1px solid rgba(234,179,8,.45);
  border-radius: 10px;
  background: rgba(234,179,8,.08);
  line-height: 1.45;
}

/* Mobile */
@media (max-width: 760px) {
  .tools-menu {
    width: 100%;
  }

  .tools-menu-btn {
    width: 100%;
  }

  .tools-menu-dropdown {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    min-width: 0;
    border-radius: 16px;
  }

  /* Footer oberhalb des mobilen Player-Sheets erreichbar halten */
  .site-footer {
    margin-bottom: 42vh;
  }
}


/* ==========================================================================
   WEB v1.5 – FESTER WEBSITE-HEADER
   --------------------------------------------------------------------------
   Der .site-header gehört zur gesamten Website.
   Die bisherige Draftboard-Toolbar bleibt tool-spezifisch darunter.
   ========================================================================== */

:root {
  --site-header-height: 58px;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--site-header-height);
  z-index: 3000;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 0 clamp(12px, 2vw, 24px);
  background: rgba(8, 12, 25, .97);
  border-bottom: 1px solid rgba(110,118,129,.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text, #e6edf3);
  text-decoration: none;
  font-weight: 800;
}

.site-logo {
  width: auto;
  height: 42px;
  flex: 0 0 auto;
}

.site-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(.88rem, 1.2vw, 1.05rem);
}

.site-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.site-header .tools-menu {
  position: relative;
  width: auto;
}

.site-header .tools-menu-btn {
  width: auto;
  min-height: 32px;
  height: 32px;
  padding: 4px 10px;
}

.site-header .tools-menu-dropdown {
  top: calc(100% + 9px);
  right: 0;
  bottom: auto;
}

/* Gesamter Seiteninhalt beginnt unterhalb des festen Website-Headers. */
body {
  padding-top: var(--site-header-height);
}

/* Draftboard-Toolbar bleibt sichtbar, ist aber nur noch Tool-Toolbar. */
body > .toolbar,
body > .topbar,
body > header.toolbar,
body > header.topbar {
  position: relative;
  top: auto;
}

/* Rechtliche Seiten ebenfalls sauber unter dem Header. */
.legal-content {
  padding-top: 34px;
}

/* Footer bleibt Teil des Seiteninhalts. */
.site-footer {
  position: relative;
}

@media (max-width: 760px) {
  :root {
    --site-header-height: 52px;
  }

  .site-header {
    padding: 0 10px;
    gap: 8px;
  }

  .site-logo {
    height: 34px;
  }

  .site-name {
    font-size: .82rem;
  }

  .site-header .tools-menu {
    width: auto;
  }

  .site-header .tools-menu-btn {
    width: auto;
    min-width: 72px;
  }

  .site-header .tools-menu-dropdown {
    position: fixed;
    top: calc(var(--site-header-height) + 8px);
    right: 10px;
    left: auto;
    bottom: auto;
    width: min(240px, calc(100vw - 20px));
    border-radius: 12px;
  }
}


/* ==========================================================================
   WEB v1.6 – FOOTER-KORREKTUR & DOPPELTES BRANDING ENTFERNT
   ========================================================================== */

/* Footer bleibt regulär im Dokumentfluss und ist auf allen Geräten sichtbar. */
.site-footer {
  position: relative !important;
  margin-top: 18px !important;
  margin-bottom: 0 !important;
  padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  z-index: 20;
}

/* Auf Mobile darf das feste Player-Bottom-Sheet den Footer nicht verdecken.
   Dafür bekommt der Seiteninhalt am Ende genug Platz. */
@media (max-width: 760px) {
  body {
    padding-bottom: calc(42vh + max(18px, env(safe-area-inset-bottom))) !important;
  }

  .site-footer {
    margin-bottom: 0 !important;
  }
}

/* Die Draftboard-Toolbar enthält ab v1.6 kein eigenes Logo und keinen Titel mehr.
   Branding befindet sich ausschließlich im festen Website-Header. */
.draft-toolbar .app-header,
.toolbar .app-header,
.topbar .app-header,
.toolbar-brand .app-logo,
.toolbar-brand h1 {
  display: none !important;
}


/* ==========================================================================
   WEB v1.7 – ROBUSTER FOOTER
   --------------------------------------------------------------------------
   Der Footer wird bewusst im normalen Dokumentfluss gehalten.
   Die Seite ist ein Flex-Layout: Header fest, Inhalt flexibel, Footer danach.
   ========================================================================== */

html,
body {
  min-height: 100%;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Der feste Website-Header liegt außerhalb des Dokumentflusses.
   Der Inhaltsbereich erhält den entsprechenden oberen Abstand bereits über body. */
.site-page-content {
  flex: 1 0 auto;
  width: 100%;
}

/* Footer niemals verstecken oder fixieren. */
.site-footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  inset: auto !important;

  flex: 0 0 auto;
  width: 100% !important;
  max-width: none !important;

  margin: 22px 0 0 !important;
  padding: 14px clamp(12px, 2vw, 24px) max(14px, env(safe-area-inset-bottom)) !important;

  background: #0d1117 !important;
  border-top: 1px solid rgba(110,118,129,.34) !important;
  z-index: 30 !important;
}

.site-footer-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
}

/* Mobil:
   Das Bottom Sheet ist fixed und liegt über dem Board.
   Deshalb reserviert NUR der Inhaltsbereich unten Platz.
   Der Footer selbst erhält keinen riesigen Abstand und bleibt danach sichtbar. */
@media (max-width: 760px) {
  body {
    padding-bottom: 0 !important;
  }

  .site-page-content {
    padding-bottom: calc(44dvh + max(16px, env(safe-area-inset-bottom))) !important;
  }

  .site-footer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}


/* ==========================================================================
   WEB v1.8 – SCROLLING & FOOTER FINAL FIX
   --------------------------------------------------------------------------
   Diese Regeln sind absichtlich am Dateiende und überschreiben ältere
   konkurrierende Layout-Regeln aus vorherigen Versionen.
   ========================================================================== */

/* Normales vertikales Dokument-Scrolling wiederherstellen. */
html {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body {
  display: block !important;
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-bottom: 0 !important;
}

/* Keine künstliche Höhenbegrenzung des Seiteninhalts. */
.site-page-content,
.workspace,
.main,
main {
  height: auto !important;
  max-height: none !important;
}

/* Desktop: Seite scrollt normal vertikal. Nur das Board darf horizontal scrollen. */
.board-scroller {
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-height: none !important;
}

/* Footer steht normal am Ende der Seite und ist garantiert sichtbar. */
.site-footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: 100% !important;
  clear: both !important;
  margin: 24px 0 0 !important;
  padding: 14px clamp(12px, 2vw, 24px) !important;
  background: #0d1117 !important;
  border-top: 1px solid rgba(110,118,129,.34) !important;
  z-index: auto !important;
  box-sizing: border-box !important;
}

.site-footer-links {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 18px !important;
}

/* Mobile: nur das Player-Sheet ist fixed. Der Seiteninhalt bleibt scrollbar.
   Genug Platz am Ende verhindert, dass der Footer dauerhaft vom Sheet verdeckt wird. */
@media (max-width: 760px) {
  body {
    overflow-y: auto !important;
    padding-bottom: 0 !important;
  }

  .workspace,
  .main,
  main {
    overflow: visible !important;
  }

  .site-footer {
    position: relative !important;
    margin-top: 24px !important;
    margin-bottom: calc(44dvh + max(16px, env(safe-area-inset-bottom))) !important;
  }
}


/* ==========================================================================
   WEB v1.9 – NATÜRLICHER SEITENFLUSS / FOOTER FIX
   --------------------------------------------------------------------------
   Frühere Versionen hatten einen "App wie Desktopprogramm"-Modus:
   body/workspace waren auf die Viewport-Höhe begrenzt und Teile hatten
   overflow:hidden. Das verhindert einen echten Seitenfooter.

   Ab v1.9 gilt:
   - Website scrollt als normale Webseite vertikal.
   - Website-Header bleibt fixed.
   - Draftboard darf horizontal scrollen.
   - Spielerdatenbank bleibt auf Desktop sticky.
   - Footer folgt ganz normal nach dem Seiteninhalt.
   ========================================================================== */

html {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  overflow-x: hidden !important;
}

body {
  display: block !important;
  position: static !important;
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Sämtliche alten Viewport-Höhen für die App abschalten. */
.workspace {
  display: flex !important;
  align-items: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.board-area,
.board-column,
.board-container,
.board-wrap {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: visible !important;
}

/* Das Board scrollt nur horizontal; seine volle Höhe zählt zur Seitenhöhe. */
.board-scroller {
  display: block !important;
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Desktop-Datenbank darf mitscrollen/sticky bleiben, begrenzt aber NICHT
   die Höhe des gesamten Workspaces. */
@media (min-width: 761px) {
  .database,
  .player-database {
    position: sticky !important;
    top: calc(var(--site-header-height) + 12px) !important;
    align-self: flex-start !important;
    height: auto !important;
    max-height: calc(100vh - var(--site-header-height) - 24px) !important;
    overflow: hidden !important;
  }

  .database .db-list,
  .player-database .db-list {
    overflow-y: auto !important;
    max-height: calc(100vh - var(--site-header-height) - 250px) !important;
  }
}

/* Footer ist ein normaler Block nach dem kompletten Board. */
.site-footer {
  display: block !important;
  position: static !important;
  float: none !important;
  clear: both !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 100% !important;
  height: auto !important;
  min-height: 48px !important;

  margin: 24px 0 0 !important;
  padding: 14px clamp(12px,2vw,24px) !important;
  box-sizing: border-box !important;

  background: #0d1117 !important;
  border-top: 1px solid rgba(110,118,129,.34) !important;
}

/* Mobile Bottom Sheet bleibt fixed. Die Webseite selbst scrollt weiterhin.
   Zusätzlicher Footer-Abstand sorgt dafür, dass seine Links über das Sheet
   hinaus hochgescrollt werden können. */
@media (max-width: 760px) {
  .workspace {
    display: block !important;
  }

  .database,
  .player-database {
    position: fixed !important;
  }

  .site-footer {
    margin-bottom: calc(44dvh + env(safe-area-inset-bottom)) !important;
  }
}


/* ==========================================================================
   WEB v1.10 – VERTIKALES SCROLLEN ÜBER DEM DRAFTBOARD
   --------------------------------------------------------------------------
   Das Draftboard soll nur horizontal scrollen.
   Vertikale Mausrad-/Trackpadbewegungen müssen die gesamte Seite scrollen.
   ========================================================================== */

.board-scroller,
.board-container,
.board-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: auto !important;
}

.board-scroller {
  touch-action: pan-x pan-y !important;
}


/* ==========================================================================
   WEB v1.13 – MOBILE PLAYER SHEET: SPIELERLISTE SICHTBAR
   --------------------------------------------------------------------------
   Auf iOS Safari kollabierte die Spielerliste im Bottom Sheet durch eine
   Kombination aus flex, sticky und max-height/overflow-Regeln aus älteren
   Responsive-Versionen.

   Diese finalen Regeln erzwingen:
   - feste Sheet-Höhe
   - kompakter Kopf
   - Spielerliste nimmt den restlichen Platz ein
   - dbList scrollt innerhalb des Overlays
   ========================================================================== */

@media (max-width: 760px) {
  .database.player-database,
  .player-database,
  .database {
    display: flex !important;
    flex-direction: column !important;
    height: var(--mobile-sheet-height, 42dvh) !important;
    min-height: 220px !important;
    max-height: 88dvh !important;
    overflow: hidden !important;
  }

  .database .mobile-db-sheet-handle,
  .player-database .mobile-db-sheet-handle {
    display: flex !important;
    flex: 0 0 46px !important;
    min-height: 46px !important;
  }

  .database .db-head,
  .player-database .db-head {
    display: block !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    top: auto !important;
    padding: 6px 8px 4px !important;
  }

  .database #mobilePlayerFilters,
  .player-database #mobilePlayerFilters {
    display: flex !important;
    flex: 0 0 auto !important;
  }

  .database #mobilePlayerSearchWrap.is-open,
  .player-database #mobilePlayerSearchWrap.is-open {
    display: block !important;
  }

  .database #dbList,
  .player-database #dbList,
  #dbList.db-list {
    display: block !important;
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 120px !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
    padding: 6px 8px calc(12px + env(safe-area-inset-bottom)) !important;
    background: rgba(13,17,23,.985) !important;
  }

  .database #dbList:empty::before,
  .player-database #dbList:empty::before {
    content: "Keine Spieler geladen";
    display: block;
    padding: 18px 10px;
    color: #8b949e;
    text-align: center;
  }

  .database #dbList .player-card,
  .player-database #dbList .player-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 0 6px !important;
  }
}


/* ==========================================================================
   WEB v1.14 – REPARIERTE SPIELERDATENBANK-STRUKTUR
   ========================================================================== */

@media (max-width: 760px) {
  .player-database {
    display: flex !important;
    flex-direction: column !important;
  }

  .player-database > .db-head {
    flex: 0 0 auto !important;
  }

  .player-database > #dbList {
    display: block !important;
    flex: 1 1 0 !important;
    min-height: 120px !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
    -webkit-overflow-scrolling: touch;
    background: rgba(13,17,23,.985) !important;
  }

  .player-database > #dbList .player-card {
    display: block !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* ==========================================================================
   WEB v1.15 – MOBILE DOUBLE TAP FEEDBACK
   ========================================================================== */

@media (max-width: 760px) {
  .player-database #dbList .player-card {
    touch-action: pan-y !important;
  }

  .player-database #dbList .player-card.mobile-doubletap-placed {
    transform: scale(.985);
    filter: brightness(1.12);
    transition: transform .12s ease, filter .12s ease;
  }
}


/* ==========================================================================
   WEB v1.16 – POWER-USER INFORMATION ARCHITECTURE
   ========================================================================== */

.draft-commandbar {
  position: sticky;
  top: var(--site-header-height);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 6px clamp(10px, 1.5vw, 18px);
  background: rgba(13,17,23,.97);
  border-bottom: 1px solid rgba(110,118,129,.28);
  backdrop-filter: blur(10px);
}
.draft-tool-title { font-size: .95rem; letter-spacing: .02em; }
.draft-commandbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.draft-commandbar .compact-action {
  min-height: 30px !important; height:30px !important; padding:4px 9px !important;
  font-size:.78rem !important; white-space:nowrap;
}
.draft-commandbar .secondary-action { opacity:.82; }
.draft-commandbar .file-label { display:inline-flex; align-items:center; cursor:pointer; }
.draft-commandbar .file-label input { display:none; }

.more-menu { position:relative; }
.more-menu-dropdown {
  position:absolute; right:0; top:calc(100% + 7px); min-width:180px; padding:6px;
  background:#161b22; border:1px solid rgba(110,118,129,.4); border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); z-index:2200;
}
.more-menu-dropdown button { width:100%; text-align:left; }
.danger-menu-action { color:#ff7b72 !important; }

.board-workflow-controls {
  position:relative; z-index:40; padding:8px clamp(10px,1.5vw,18px) 7px;
  background:#0d1117; border-bottom:1px solid rgba(110,118,129,.22);
}
.workflow-section-title, .db-title {
  font-size:.68rem !important; font-weight:800; letter-spacing:.12em; color:#8b949e;
}
.board-control-row { display:flex; align-items:center; gap:6px; margin-top:5px; }
.board-control-row #searchInput { flex:1 1 300px; max-width:460px; }
.board-control-row #positionFilter { width:auto; min-width:150px; }
.board-control-row input, .board-control-row select, .board-control-row button {
  height:31px !important; min-height:31px !important; padding-top:3px !important; padding-bottom:3px !important;
}
.board-workflow-controls .stats-bar { margin-top:6px; }

/* Spielerwahl: Suche + Chips direkt über der Liste. */
.player-database .db-head { padding:8px 8px 6px !important; }
.player-database .db-title { display:flex !important; justify-content:space-between; margin-bottom:6px; }
.player-selection-controls { display:block; }
.player-selection-controls #dbSearch { width:100%; height:31px; min-height:31px; margin:0 0 6px; }
.player-position-chips { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.player-position-chips button {
  min-width:0; height:28px; min-height:28px; padding:2px 3px; font-size:.72rem; font-weight:800;
}
.player-position-chips button.is-active {
  border-color:#58a6ff; background:rgba(88,166,255,.16); color:#f0f6fc;
}
.player-database .db-help, .player-database .db-controls { display:none !important; }

/* Settings: zentral, sekundär, auf Desktop als rechtes Panel. */
.settings-backdrop {
  position:fixed; inset:0; z-index:3990; background:rgba(0,0,0,.48);
}
.settings-panel {
  position:fixed !important; top:var(--site-header-height) !important; right:0 !important; bottom:0 !important;
  left:auto !important; width:min(390px,92vw) !important; height:auto !important; max-height:none !important;
  z-index:4000 !important; display:flex !important; flex-direction:column;
  background:#0d1117; border-left:1px solid rgba(110,118,129,.4);
  transform:translateX(102%); transition:transform .18s ease;
}
.settings-panel.is-open { transform:translateX(0); }
.settings-panel-head {
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
  border-bottom:1px solid rgba(110,118,129,.28);
}
.settings-panel-content { overflow-y:auto; padding:8px 14px 18px; }
.settings-section { padding:12px 0; border-bottom:1px solid rgba(110,118,129,.22); }
.settings-section h3 { margin:0 0 9px; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:#8b949e; }
.settings-radio-row { display:flex; gap:8px; }
.settings-radio-row label { flex:1; }
.settings-inline-field { display:grid; grid-template-columns:auto 90px auto; align-items:center; gap:8px; }
.settings-inline-field input, .settings-inline-field button, .settings-field select { height:32px; }
.settings-field { display:grid; gap:5px; font-size:.78rem; color:#8b949e; }
.settings-file-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
.settings-file-actions button { min-height:32px; }
#importPlayersFile { display:none; }
.settings-mobile-proxy { display:none !important; }
.danger-zone { margin-top:8px; padding:12px; border:1px solid rgba(248,81,73,.35); border-radius:8px; background:rgba(248,81,73,.05); }
.danger-zone h3 { color:#ff7b72; }
.danger-zone .danger { width:100%; }

/* Keyboard result focus */
.db-card.keyboard-selected { outline:2px solid #58a6ff !important; outline-offset:-2px; filter:brightness(1.08); }

/* Existing workspace remains the primary visual area. */
.workspace { margin-top:0 !important; }
.board-column { min-width:0; }

/* Tablet */
@media (max-width: 1024px) and (min-width: 761px) {
  .draft-commandbar .compact-action span:not([aria-hidden="true"]) { display:none; }
  .draft-commandbar .compact-action { min-width:32px; justify-content:center; }
  .board-control-row #searchInput { max-width:none; }
  .board-control-row #positionFilter { min-width:130px; }
}

/* Mobile: keep Sleeper-like bottom sheet; commandbar stays compact. */
@media (max-width:760px) {
  .draft-commandbar { top:var(--site-header-height); min-height:40px; padding:4px 8px; }
  .draft-tool-title { display:none; }
  .draft-commandbar-actions { width:100%; justify-content:flex-end; }
  .draft-commandbar .compact-action { min-width:30px; padding:3px 7px !important; }
  .draft-commandbar .compact-action span:not([aria-hidden="true"]) { display:none; }

  .board-workflow-controls { padding:6px 8px; }
  .workflow-section-title { display:none; }
  .board-control-row { margin-top:0; }
  .board-control-row #searchInput { min-width:0; flex:1 1 auto; }
  .board-control-row #positionFilter { display:none; }
  .board-control-row #clearFiltersBtn { display:none; }
  .board-control-row #undoBtn { flex:0 0 auto; }

  .player-selection-controls { display:none !important; }
  .player-database .db-title { display:none !important; }

  .settings-panel { top:0 !important; width:min(390px,94vw) !important; }
}


/* ==========================================================================
   WEB v1.17 – ÖFFNEN-BUTTON AN COMMAND-BAR ANGEPASST
   ========================================================================== */
.draft-commandbar label.file-label.compact-action {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  min-height: 30px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 4px 9px !important;
  vertical-align: middle !important;
}


/* ==========================================================================
   WEB v1.18 – BOARD ZURÜCKSETZEN DIREKT IN DER COMMAND-BAR
   ========================================================================== */
.draft-commandbar .board-reset-action {
  opacity: .72;
}
.draft-commandbar .board-reset-action:hover,
.draft-commandbar .board-reset-action:focus-visible {
  opacity: 1;
  color: #ff7b72;
  border-color: rgba(248,81,73,.55);
}


/* ==========================================================================
   WEB v1.19 – DESKTOP SPIELERDATENBANK AUF BOARD-HÖHE
   --------------------------------------------------------------------------
   Ziel:
   - Die Spielerdatenbank endet nicht schon nach wenigen Picks.
   - Sie nimmt auf Desktop die gleiche Höhe wie das Draftboard ein.
   - Die Seite wird dadurch NICHT länger als das Draftboard.
   - Nur die Spielerliste innerhalb der Datenbank scrollt.
   ========================================================================== */

@media (min-width: 761px) {
  /* Beide Spalten erhalten dieselbe Höhe innerhalb der Flex-Zeile. */
  .workspace {
    align-items: stretch !important;
  }

  .board-column {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Sidebar nicht mehr künstlich auf Viewport-Höhe begrenzen. */
  .database.player-database,
  .player-database {
    position: relative !important;
    top: auto !important;
    align-self: stretch !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Kopf bleibt oben, Liste nimmt den gesamten verbleibenden Platz ein. */
  .player-database > .db-head {
    flex: 0 0 auto !important;
  }

  .player-database > #dbList {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}


/* ==========================================================================
   WEB v1.20 – MOBILE POWER-DRAFT UX
   --------------------------------------------------------------------------
   Ziel:
   - Draftboard bleibt jederzeit sichtbar.
   - Spielerpool funktioniert als kompaktes Bottom Sheet.
   - Suche und Positionsfilter sind mit dem Daumen erreichbar.
   - Touch-Ziele sind groß genug, ohne unnötig Platz zu verbrauchen.
   - Boom/Bust und andere sekundäre Informationen werden mobil reduziert.
   ========================================================================== */

@media (max-width: 760px) {

  /* ----- Grundlayout / Safe Areas ----- */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: 0 !important;
    overscroll-behavior-y: auto;
  }

  button,
  input,
  select,
  .file-label {
    font-size: 16px; /* verhindert Safari-Autozoom in Inputs */
  }

  /* ----- Website Header kompakt halten ----- */
  .site-header {
    min-height: 50px !important;
    height: 50px !important;
    padding: 0 10px !important;
  }

  .site-logo {
    height: 32px !important;
  }

  .site-name {
    max-width: 54vw;
    font-size: .78rem !important;
  }

  .site-header .tools-menu-btn {
    min-width: 62px !important;
    height: 32px !important;
    padding: 4px 8px !important;
  }

  /* ----- Draft-Aktionsleiste ----- */
  .draft-commandbar {
    position: sticky !important;
    top: 50px !important;
    z-index: 1200 !important;
    min-height: 42px !important;
    padding: 5px 8px !important;
    background: rgba(13,17,23,.98) !important;
  }

  .draft-tool-title {
    display: none !important;
  }

  .draft-commandbar-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .draft-commandbar-actions > button,
  .draft-commandbar-actions > .file-label,
  .draft-commandbar .compact-action {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 4px 5px !important;
    border-radius: 7px !important;
    font-size: .72rem !important;
  }

  .draft-commandbar-actions .fa-icon {
    width: 1em !important;
    height: 1em !important;
  }

  /* Texte bleiben sichtbar, solange genug Breite vorhanden ist. */
  .draft-commandbar-actions span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ----- Board-Steuerung ----- */
  .board-workflow-controls {
    padding: 6px 8px !important;
    background: #0d1117 !important;
  }

  .workflow-section-title {
    display: none !important;
  }

  .board-control-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  #searchInput {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 6px 10px !important;
    font-size: 16px !important;
  }

  #undoBtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 68px !important;
    height: 36px !important;
  }

  #positionFilter,
  #clearFiltersBtn {
    display: none !important;
  }

  .stats-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow-x: auto !important;
    padding: 5px 0 0 !important;
    margin: 0 !important;
    scrollbar-width: none;
  }

  .stats-bar::-webkit-scrollbar {
    display: none;
  }

  .stats-bar > span {
    flex: 0 0 auto;
    min-height: 26px;
    padding: 4px 6px !important;
    font-size: .68rem !important;
  }

  /* ----- Board selbst ----- */
  .workspace {
    display: block !important;
    padding: 6px 0 0 !important;
  }

  .board-column {
    width: 100% !important;
    min-width: 0 !important;
  }

  .board-scroller {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    touch-action: pan-x pan-y !important;
    padding-bottom: 4px !important;
  }

  .ranking-grid {
    min-width: 860px !important;
    grid-template-columns: 54px repeat(6, minmax(126px, 1fr)) !important;
    gap: 4px !important;
  }

  .rank-label,
  .rank-cell {
    min-height: 56px !important;
  }

  .rank-label {
    font-size: .72rem !important;
  }

  .position-header {
    font-size: .72rem !important;
    padding: 6px 4px !important;
  }

  /* Spielerkarte: dicht, aber gut lesbar */
  .player-card {
    min-height: 48px !important;
    padding: 5px 25px 4px 7px !important;
    border-radius: 6px !important;
  }

  .player-name {
    font-size: .78rem !important;
    line-height: 1.08 !important;
  }

  .meta {
    font-size: .65rem !important;
    margin-top: 2px !important;
  }

  .pos-badge {
    font-size: .6rem !important;
    padding: 1px 3px !important;
  }

  /* Sekundäre Bewertung mobil ausblenden. */
  .player-card .rating-row,
  .player-card .ratings,
  .player-card .rating-group {
    display: none !important;
  }

  .remove-player-btn {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
    padding: 0 !important;
  }

  /* ----- Player Bottom Sheet ----- */
  .database.player-database,
  .player-database {
    --mobile-sheet-height: 44dvh;

    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;
    height: var(--mobile-sheet-height) !important;
    min-height: 210px !important;
    max-height: 88dvh !important;

    margin: 0 !important;
    padding: 0 0 env(safe-area-inset-bottom) !important;

    border-radius: 18px 18px 0 0 !important;
    border: 1px solid rgba(110,118,129,.45) !important;
    border-bottom: 0 !important;

    background: rgba(13,17,23,.985) !important;
    box-shadow: 0 -12px 32px rgba(0,0,0,.42) !important;

    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;

    z-index: 3000 !important;
    touch-action: auto !important;
  }

  .mobile-db-sheet-handle {
    display: flex !important;
    flex: 0 0 42px !important;
    min-height: 42px !important;
    align-items: center;
    justify-content: center;
    touch-action: none !important;
    cursor: ns-resize;
  }

  .mobile-db-grabber {
    width: 42px !important;
    height: 4px !important;
  }

  .mobile-db-handle-title {
    font-size: .72rem !important;
  }

  /* ----- Spielerfilter ----- */
  .player-database .db-head {
    flex: 0 0 auto !important;
    padding: 5px 8px 6px !important;
    background: #0d1117 !important;
  }

  .player-database .db-title,
  .player-selection-controls,
  .player-database .db-controls,
  .player-database .db-help {
    display: none !important;
  }

  .mobile-player-filters {
    display: flex !important;
    gap: 7px !important;
    overflow-x: auto !important;
    padding: 3px 1px 6px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-player-filters::-webkit-scrollbar {
    display: none;
  }

  .mobile-filter-chip {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 17px !important;
    font-size: .7rem !important;
  }

  .mobile-search-chip {
    width: 38px !important;
    font-size: 1.1rem !important;
  }

  .mobile-player-search-wrap {
    padding: 0 1px 4px !important;
  }

  .mobile-player-search-wrap.is-open {
    display: block !important;
  }

  #mobilePlayerSearchInput {
    width: 100% !important;
    height: 36px !important;
    border-radius: 9px !important;
    padding: 6px 10px !important;
    font-size: 16px !important;
  }

  /* ----- Spieler-Liste im Sheet ----- */
  .player-database > #dbList {
    display: block !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y !important;

    padding: 4px 7px calc(10px + env(safe-area-inset-bottom)) !important;
  }

  .player-database #dbList .player-card {
    min-height: 48px !important;
    margin: 0 0 5px !important;
    padding: 6px 8px !important;
    touch-action: pan-y !important;
  }

  /* Letzten Spieler nicht am Home-Indikator kleben lassen. */
  .player-database #dbList::after {
    content: "";
    display: block;
    height: 6px;
  }

  /* ----- Einstellungen als echtes Mobile Panel ----- */
  .settings-panel,
  .mobile-settings-panel {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(390px, 94vw) !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-top: env(safe-area-inset-top);
  }

  .mobile-settings-content {
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-settings-content button,
  .mobile-settings-content input,
  .mobile-settings-content select {
    min-height: 40px !important;
  }

  /* ----- Footer trotz Bottom Sheet erreichbar ----- */
  .site-footer {
    margin-bottom: calc(46dvh + env(safe-area-inset-bottom)) !important;
  }
}

/* Sehr schmale Smartphones */
@media (max-width: 390px) {
  .site-name {
    max-width: 48vw;
  }

  .draft-commandbar-actions {
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    gap: 3px !important;
  }

  .draft-commandbar-actions > button,
  .draft-commandbar-actions > .file-label {
    padding-left: 3px !important;
    padding-right: 3px !important;
    font-size: .66rem !important;
  }

  .ranking-grid {
    min-width: 820px !important;
    grid-template-columns: 50px repeat(6, minmax(121px,1fr)) !important;
  }

  .mobile-filter-chip {
    width: 42px !important;
  }
}

/* Landscape: Spielerpool etwas niedriger, damit das Board sichtbar bleibt. */
@media (max-width: 900px) and (orientation: landscape) {
  .database.player-database,
  .player-database {
    --mobile-sheet-height: 38dvh;
    max-height: 72dvh !important;
  }
}


/* ==========================================================================
   WEB v1.21 – MOBILE LAYOUT REPAIR
   Screenshot-basierte Korrektur:
   1. Kein horizontales Scrollen der gesamten Website.
   2. Ausschließlich das Draftboard darf horizontal scrollen.
   3. Board-Header und Board-Zellen verwenden exakt dieselbe Grid-Geometrie.
   4. Commandbar-Aktionen werden nicht mehr abgeschnitten.
   ========================================================================== */

@media (max-width: 760px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    position: relative !important;
  }

  .site-header,
  .draft-commandbar,
  .board-workflow-controls,
  .workspace,
  .board-column,
  .player-database,
  .site-footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Header darf niemals breiter als der Viewport werden. */
  .site-header {
    overflow: hidden !important;
  }

  .site-brand {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .site-name {
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .site-header-actions,
  .site-header .tools-menu-btn {
    flex: 0 0 auto !important;
  }

  /* Commandbar:
     fünf Aktionen passen vollständig in die Bildschirmbreite.
     Icons und kurze Bezeichnungen bleiben sichtbar. */
  .draft-commandbar {
    overflow: hidden !important;
  }

  .draft-commandbar-actions {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .draft-commandbar-actions > button,
  .draft-commandbar-actions > .file-label,
  .draft-commandbar .compact-action {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 3px 4px !important;
    gap: 3px !important;
    font-size: .61rem !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }

  .draft-commandbar-actions > * span:not([aria-hidden="true"]) {
    display: inline !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .draft-commandbar-actions .fa-icon {
    flex: 0 0 12px !important;
    width: 12px !important;
    height: 12px !important;
  }

  /* Bei sehr kleinen Geräten sind klare Kurzbezeichnungen wichtiger als
     abgeschnittene Langtexte. */
  #saveBoardBtn span:last-child { font-size: 0 !important; }
  #saveBoardBtn span:last-child::after { content: "Save"; font-size: .61rem; }

  #exportBoardPdfBtn span:last-child { font-size: 0 !important; }
  #exportBoardPdfBtn span:last-child::after { content: "PDF"; font-size: .61rem; }

  #mobileSettingsBtn span:last-child { font-size: 0 !important; }
  #mobileSettingsBtn span:last-child::after { content: "Setup"; font-size: .61rem; }

  #resetBtn span:last-child { font-size: 0 !important; }
  #resetBtn span:last-child::after { content: "Reset"; font-size: .61rem; }

  /* Board-Steuerung darf ebenfalls keine Viewport-Breite erzeugen. */
  .board-workflow-controls,
  .stats-bar {
    overflow-x: hidden !important;
  }

  .stats-bar {
    flex-wrap: wrap !important;
  }

  /* --------------------------------------------------------------
     DRAFTBOARD
     Einzige horizontal scrollbare Zone der gesamten Seite.
     -------------------------------------------------------------- */
  .board-scroller {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pan-y !important;
    box-sizing: border-box !important;
  }

  /* WICHTIG:
     Header und Zellen dürfen nicht zwei unterschiedliche Grids benutzen.
     Beide erhalten dieselbe feste Spaltenbreite. */
  .ranking-grid,
  .board-sticky-header-inner {
    --mobile-pick-width: 68px;
    --mobile-position-width: 148px;

    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;

    grid-template-columns:
      var(--mobile-pick-width)
      repeat(6, var(--mobile-position-width)) !important;

    column-gap: 4px !important;
    row-gap: 4px !important;
    box-sizing: border-box !important;
  }

  /* Falls der Sticky-Header selbst bisher außerhalb des Scrollcontainers
     eine Viewportbreite erzwingt, darf er nicht breiter als sein Inhalt sein. */
  .board-sticky-header {
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
  }

  .board-sticky-header .corner,
  .board-sticky-header .position-header,
  .ranking-grid .rank-label,
  .ranking-grid .rank-cell {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .ranking-grid .rank-label,
  .ranking-grid .rank-cell {
    min-height: 62px !important;
  }

  /* Kein Kind außerhalb des Boards darf durch feste Mindestbreiten die
     gesamte Seite verbreitern. */
  .workspace > *,
  .board-column > *:not(.board-scroller),
  .player-database > * {
    max-width: 100% !important;
  }

  /* Player Sheet vollständig im Viewport halten. */
  .database.player-database,
  .player-database {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .mobile-player-filters {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
  }

  .player-database > #dbList {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* iPhone SE / sehr schmale Geräte */
@media (max-width: 390px) {
  .draft-commandbar-actions {
    gap: 3px !important;
  }

  .draft-commandbar-actions > button,
  .draft-commandbar-actions > .file-label,
  .draft-commandbar .compact-action {
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: .58rem !important;
  }

  .ranking-grid,
  .board-sticky-header-inner {
    --mobile-pick-width: 62px;
    --mobile-position-width: 140px;
  }
}


/* ==========================================================================
   WEB v1.22 – MOBILE STRUKTURELLE REPARATUR
   --------------------------------------------------------------------------
   Ursache des Screenshots:
   - .board-sticky-header wurde auf max-content gesetzt und lag AUSSERHALB des
     horizontalen .board-scroller. Dadurch verbreiterte er die gesamte Seite.
   - Browser konnten eine alte horizontale Scrollposition beibehalten.
   - Die Commandbar enthielt mehr Inhalt als die Bildschirmbreite sinnvoll
     aufnehmen konnte.

   Grundregel ab jetzt:
   NUR .board-scroller darf breiter als der Viewport sein.
   ========================================================================== */

@media (max-width: 760px) {

  /* --------------------------------------------------------------
     1. PAGE SHELL: exakt Viewportbreite, niemals horizontal scrollen
     -------------------------------------------------------------- */
  html {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    margin: 0 !important;
  }

  .site-header,
  .draft-commandbar,
  .board-workflow-controls,
  .workspace,
  .board-column,
  .site-footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* --------------------------------------------------------------
     2. SITE HEADER
     Logo und Titel bleiben links sichtbar, Tools rechts.
     -------------------------------------------------------------- */
  .site-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
  }

  .site-brand {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 86px) !important;
    overflow: hidden !important;
  }

  .site-logo {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 32px !important;
    max-width: 42px !important;
    object-fit: contain !important;
  }

  .site-name {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .site-nav-actions {
    flex: 0 0 auto !important;
  }

  /* --------------------------------------------------------------
     3. COMMAND BAR
     Auf Mobile nur Icons + sehr kurze Labels.
     Kein Element darf außerhalb der Breite liegen.
     -------------------------------------------------------------- */
  .draft-commandbar {
    overflow: hidden !important;
    padding: 5px 6px !important;
  }

  .draft-commandbar-primary {
    display: none !important;
  }

  .draft-commandbar-actions {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .draft-commandbar-actions > button,
  .draft-commandbar-actions > label,
  .draft-commandbar-actions > .file-label,
  .draft-commandbar .compact-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 3px 3px !important;
    margin: 0 !important;
    gap: 2px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .draft-commandbar-actions img.fa-icon {
    display: block !important;
    flex: 0 0 12px !important;
    width: 12px !important;
    height: 12px !important;
    max-width: 12px !important;
  }

  /* Kurze Mobile-Labels */
  #saveBoardBtn span:last-child,
  #exportBoardPdfBtn span:last-child,
  #mobileSettingsBtn span:last-child,
  #resetBtn span:last-child {
    font-size: 0 !important;
  }
  #saveBoardBtn span:last-child::after { content: "Save"; font-size: 10px; }
  #exportBoardPdfBtn span:last-child::after { content: "PDF"; font-size: 10px; }
  #mobileSettingsBtn span:last-child::after { content: "Setup"; font-size: 10px; }
  #resetBtn span:last-child::after { content: "Reset"; font-size: 10px; }

  .draft-commandbar .file-label {
    font-size: 10px !important;
  }

  /* --------------------------------------------------------------
     4. STATUS / BOARD CONTROLS
     -------------------------------------------------------------- */
  .board-workflow-controls {
    overflow: hidden !important;
  }

  .stats-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .stats-bar > span {
    max-width: 100% !important;
  }

  /* --------------------------------------------------------------
     5. BOARD: einzig horizontal scrollbarer Bereich
     -------------------------------------------------------------- */
  .workspace {
    overflow: hidden !important;
  }

  .board-column {
    overflow: hidden !important;
  }

  /* Der Header ist nur ein VIEWPORTBREITER Clip-Container.
     Er darf die Seite nicht verbreitern. */
  .board-sticky-header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Innerer Header ist genauso breit wie das eigentliche Board.
     JS verschiebt ihn synchron zu .board-scroller. */
  .board-sticky-header-inner,
  .ranking-grid {
    --mobile-pick-width: 68px;
    --mobile-position-width: 148px;
    display: grid !important;
    grid-template-columns:
      var(--mobile-pick-width)
      repeat(6, var(--mobile-position-width)) !important;
    gap: 4px !important;
    width: calc(
      var(--mobile-pick-width) +
      (6 * var(--mobile-position-width)) +
      (6 * 4px)
    ) !important;
    min-width: calc(
      var(--mobile-pick-width) +
      (6 * var(--mobile-position-width)) +
      (6 * 4px)
    ) !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .board-scroller {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: scroll !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pan-y !important;
    box-sizing: border-box !important;
  }

  /* Weder ranking grid noch seine Kinder dürfen den Body beeinflussen,
     weil sie vollständig innerhalb des board-scroller liegen. */
  .ranking-grid {
    margin: 0 !important;
  }

  .board-sticky-header-inner > *,
  .ranking-grid > * {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .board-sticky-header-inner .corner,
  .ranking-grid .rank-label {
    width: var(--mobile-pick-width) !important;
  }

  .board-sticky-header-inner .position-header,
  .ranking-grid .rank-cell {
    width: var(--mobile-position-width) !important;
  }

  /* --------------------------------------------------------------
     6. PLAYER SHEET
     -------------------------------------------------------------- */
  .database.player-database,
  .player-database {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .player-database .db-head,
  .player-database > #dbList {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .mobile-player-filters {
    width: 100% !important;
    max-width: 100% !important;
  }

  .player-database #dbList .player-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 390px) {
  .board-sticky-header-inner,
  .ranking-grid {
    --mobile-pick-width: 62px;
    --mobile-position-width: 140px;
  }
}


/* ==========================================================================
   WEB v1.23 – CLEAN MOBILE SHELL
   board-workflow-controls wurde vollständig aus dem HTML entfernt.
   Nur #boardScroller darf horizontal scrollen.
   ========================================================================== */

.board-workflow-controls{display:none!important}

@media(max-width:760px){
  :root{
    --mobile-board-pick:64px;
    --mobile-board-pos:144px;
    --mobile-board-gap:4px;
  }

  html,body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding-left:0!important;
    padding-right:0!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }

  body > *,
  .site-header,
  .draft-commandbar,
  .workspace,
  .board-column,
  .site-footer{
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .site-header{
    left:0!important;
    right:0!important;
    width:100%!important;
    overflow:hidden!important;
  }

  .site-brand{flex:1 1 auto!important;min-width:0!important;overflow:hidden!important}
  .site-logo{flex:0 0 34px!important;width:34px!important;height:34px!important;max-width:34px!important;object-fit:contain!important}
  .site-name{flex:1 1 auto!important;min-width:0!important;max-width:none!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .site-nav-actions{flex:0 0 auto!important;min-width:0!important}

  .draft-commandbar{
    left:0!important;
    right:0!important;
    width:100%!important;
    overflow:hidden!important;
    padding:5px 6px!important;
  }

  .draft-commandbar-primary{display:none!important}

  .draft-commandbar-actions{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:3px!important;
    margin:0!important;
  }

  .draft-commandbar-actions > button,
  .draft-commandbar-actions > label,
  .draft-commandbar-actions > .file-label,
  .draft-commandbar .compact-action{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    margin:0!important;
    padding:3px 2px!important;
    gap:2px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    font-size:9px!important;
    line-height:1!important;
  }

  .draft-commandbar-actions img.fa-icon{width:11px!important;height:11px!important;max-width:11px!important;flex:0 0 11px!important}
  .draft-commandbar-actions span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

  #saveBoardBtn span:last-child,
  #mobileSettingsBtn span:last-child,
  #resetBtn span:last-child{font-size:0!important}
  #saveBoardBtn span:last-child::after{content:"Save";font-size:9px}
  #mobileSettingsBtn span:last-child::after{content:"Setup";font-size:9px}
  #resetBtn span:last-child::after{content:"Reset";font-size:9px}

  .workspace{
    display:block!important;
    width:100%!important;
    overflow:hidden!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  .board-column{width:100%!important;overflow:hidden!important}

  .board-sticky-header{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .board-sticky-header-inner,
  .ranking-grid{
    display:grid!important;
    grid-template-columns:var(--mobile-board-pick) repeat(6,var(--mobile-board-pos))!important;
    gap:var(--mobile-board-gap)!important;
    width:calc(var(--mobile-board-pick) + 6 * var(--mobile-board-pos) + 6 * var(--mobile-board-gap))!important;
    min-width:calc(var(--mobile-board-pick) + 6 * var(--mobile-board-pos) + 6 * var(--mobile-board-gap))!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }

  #boardScroller,.board-scroller{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    touch-action:pan-x pan-y!important;
    box-sizing:border-box!important;
  }

  .ranking-grid{margin:0!important}
  .board-sticky-header-inner > *,
  .ranking-grid > *{margin:0!important;min-width:0!important;box-sizing:border-box!important}

  .database.player-database,.player-database{
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }

  .player-database .db-head,
  .player-database > #dbList{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .player-database #dbList .player-card{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}

@media(max-width:390px){
  :root{
    --mobile-board-pick:60px;
    --mobile-board-pos:136px;
  }
}