/* === FantasyBlitz site.css (shared header/nav, v5) === */
:root{
  --header-h: 92px;
  --header-h-m: 70px;
  --bg: #ffffff;
  --text: #111111;
  --muted:#60646c;
  --line: #e5e7eb;
  --accent:#333333;
  --accent-hover:#444444;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --radius: 14px;
  --container: 1180px;
}

/* Base */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body.site-v2{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: #f7f7f8;
  padding-top: var(--header-h);
}
@media (max-width: 900px){ body.site-v2{ padding-top: var(--header-h-m); } }
body.site-v2 a{ color: inherit; text-decoration: none; }
.container{ max-width: var(--container); margin:0 auto; padding:0 18px; }

/* Reset alte globale header/nav Regeln, damit nichts kollidiert */
body.site-v2 header::before,
body.site-v2 header::after{display:none!important;content:none!important}
/* Reset nur für Desktop-Nav, NICHT fürs mobile Panel */
body.site-v2 nav:not(.nav-panel){
  position: static;
  left:auto; right:auto; top:auto;
  transform:none;
  background:transparent;
  box-shadow:none;
}


/* ===== Fixierter heller Header ===== */
body.site-v2 .site-header{
  position:fixed; inset:0 0 auto 0;
  height:var(--header-h);
  background:var(--bg); color:var(--text);
  border-bottom:1px solid var(--line);
  box-shadow:0 3px 12px rgba(0,0,0,.06);
  z-index:1000;
}
@media (max-width:900px){ body.site-v2 .site-header{ height:var(--header-h-m); } }

body.site-v2 .header-inner{
  height:100%; display:flex; align-items:center; gap:16px;
  justify-content:flex-start;           /* Logo links */
}
body.site-v2 .brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
body.site-v2 .brand img{ height:calc(100% - 20px); max-height:64px; width:auto; display:block; }
@media (max-width:900px){ body.site-v2 .brand img{ max-height:52px; } }

/* ===== Desktop-Navigation (rechts neben Logo) ===== */
body.site-v2 .nav-desktop{ margin-left:16px; display:flex; align-items:center; }
@media (min-width:901px){ body.site-v2 .nav-desktop{ margin-left:16px!important; } }

body.site-v2 .nav-list{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:22px;
}
body.site-v2 .nav-list>li>a,
body.site-v2 .nav-list>li>button.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px; border-radius:10px;
  font-weight:600;   
  color:var(--text);
  background:transparent; border:1px solid transparent;
  font-family: inherit; /* nur Schriftfamilie erben */
  font-size: inherit;   /* optional, falls Größe gleich bleiben soll */
}

body.site-v2 .nav-list>li>a:hover,
body.site-v2 .nav-list>li>button.nav-link:hover{ background:#f2f2f3; }

/* Dropdown (Desktop) – ohne Lücke */
body.site-v2 .dropdown{ position:relative; }
body.site-v2 .nav-link{ cursor:pointer; background:none; border:0; }
body.site-v2 .nav-caret::after{ content:" ▾"; font-size:.85em; }
body.site-v2 .submenu{
  position:absolute; left:0; top:100%;   /* direkt unter dem Menüpunkt */
  display:none; min-width:220px; padding:8px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); z-index:1002; /* über allem klickbar */
}
body.site-v2 .submenu a{
  display:block; padding:10px 12px; border-radius:10px;
  font-weight:400;   /* NEU → normal statt fett */
}

body.site-v2 .submenu a:hover{ background:#f3f4f6; }
body.site-v2 .dropdown:hover .submenu{ display:block; }

/* ===== Burger & Mobile Panel ===== */
body.site-v2 .nav-toggle{
  margin-left:auto; width:44px; height:44px;
  border-radius:10px; border:0; background:transparent; cursor:pointer;
  display:none; /* Desktop: aus */
}
body.site-v2 .nav-toggle .bar{
  width:22px; height:2px; background:#222; display:block;
  margin:0; border-radius:1px;
}

body.site-v2 .nav-toggle:focus-visible{ outline:2px solid #222; outline-offset:2px; }

body.site-v2 .overlay[hidden]{ display:none; }
body.site-v2 .overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:999; }

body.site-v2 .nav-panel{ display:none; }

@media (max-width:900px){
  body.site-v2 .nav-desktop{ display:none; }
  body.site-v2 .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:4px;   /* 3 Balken untereinander */
  }

  body.site-v2 .nav-panel{
    position:fixed; left:0; right:0; top:var(--header-h-m); bottom:0;
    background:var(--bg); border-top:1px solid var(--line);
    padding:16px; display:none; flex-direction:column; gap:10px;
    z-index:1001; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  body.site-v2 .nav-panel.open{ display:flex; }

  body.site-v2 .nav-panel a, body.site-v2 .nav-panel button.nav-link{
    width:100%; text-align:left;
    padding:12px 12px; border-radius:12px;
    font-weight:700; background:#f6f7f8; border:1px solid var(--line);
    font: inherit;
  }
  body.site-v2 .nav-panel a:hover, body.site-v2 .nav-panel button.nav-link:hover{ background:#eef0f2; }
  body.site-v2 .nav-panel .dropdown{
    position: static;
    display: block;         /* überschreibt style.css (inline-block) */
    width: 100%;
  }
  body.site-v2 .nav-panel .dropdown > .nav-link{
    display: block;         /* Button verhält sich wie die Links */
    width: 100%;
    text-align: left;
  }
  body.site-v2 .nav-panel .dropdown .submenu{
    position: static;
    display: none;
    margin-top: 8px; padding: 8px;
    border: 1px solid var(--line); border-radius: 10px; background: #fff;
    width: 100%;
  }
  body.site-v2 .nav-panel .dropdown.open .submenu{ display:block; }
  body.site-v2 .nav-panel .dropdown.open .nav-caret::after{ content:" ▴"; }
}

/* === Buttons (Lesbarkeit) === */
body.site-v2 a.btn-dark,
body.site-v2 .btn-dark{
  display:inline-block;
  color:#fff !important;
  background: var(--accent) !important;
  border:1px solid var(--accent) !important;
  font-weight:700;
  padding:12px 14px;
  border-radius:12px;
}
body.site-v2 a.btn-dark:hover,
body.site-v2 .btn-dark:hover{ background: var(--accent-hover) !important; }

/* Overlay für mobiles Menü */
.overlay[hidden]{ display:none; }
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
}

/* nav panel must sit above overlay */
.nav-panel{ z-index:1001; }


/* Mobiles Panel über Overlay */
.nav-panel{ z-index: 1001; }

@media (max-width:900px){
  body.site-v2 .nav-panel{
    position: fixed !important;
    left: 0; right: 0; top: var(--header-h-m); bottom: 0;
    z-index: 1001;                 /* über .overlay (1000) */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.site-v2 .nav-panel.open{ display: flex; }
}

/* --- Heller Footer im gleichen Stil wie der Header --- */
body.site-v2 footer,
body.site-v2 .site-footer{
  background: var(--bg);
  color: var(--text);
  border-top: 1px solid var(--line);
  box-shadow: 0 -3px 12px rgba(0,0,0,.06);
  padding: 20px 0;
}

body.site-v2 .site-footer p{
  margin: 0;
  text-align: center;
}

body.site-v2 .site-footer .footer-link{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
body.site-v2 .site-footer .footer-link:hover{
  border-bottom-color: #cbd5e1;
}


/* === Draft-Toolbar: Buttons angleichen & mobil sauber stapeln === */

/* Optik angleichen: Toggle wie der große CTA, nur etwas kleiner */
.draft-toolbar .btn-toggle{
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  border-radius: 12px;
  padding: 10px 14px;           /* etwas kleiner als .btn-dark */
  font-weight: 700;
}
.draft-toolbar .btn-toggle:hover{
  background: var(--accent-hover);
}

/* Desktop: Abstand einheitlich */
.draft-toolbar{
  display: flex;
  gap: 28px;                    /* Abstand zwischen Buttons */
  align-items: center;
  flex-wrap: wrap;
}

/* === Draft-Buttons: Mobile sauber stapeln & Abstand erzwingen === */
@media (max-width:900px){
  /* Wrapper: untereinander + Abstand */
  .draft-toolbar{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  /* Nur der große CTA vollbreit */
  .draft-toolbar > *:not(.btn-toggle){ width:100%; }

  /* Toggle schmal, linksbündig */
  .btn-toggle{
    background: var(--accent);
    border: 1px solid var(--accent);
    color:#fff; font-weight:700;
    padding: 9px 12px;
    border-radius:12px;
    width: auto;
    align-self: flex-start;
    display: inline-flex;
  }

  /* Falls dein Toggle die ID nutzt – doppelt absichern */
  #togglePosColors{
    display: inline-flex;
    width: auto !important;
    align-self: flex-start;
    margin-top: 22px !important;
    float: none !important;
    position: static !important;
    padding: 9px 12px;
  }

  /* großer CTA optisch konsistent */
  .btn-dark{
    padding: 14px 16px;
    border-radius: 14px;
  }
}


/* Rankings: Header auf Mobil sauber umbrechen */
@media (max-width: 900px){
  .rankings-page .header-row{
    flex-direction: column;           /* statt nebeneinander */
    align-items: flex-start;
    gap: 8px;
  }

  .rankings-page .header-right{
    display: flex;
    flex-direction: column;           /* Select + Update untereinander */
    align-items: flex-start;
    gap: 6px;
    width: 100%;
  }

  .rankings-page .week-select{
    align-self: flex-start;           /* links statt ganz rechts */
    max-width: 200px;                 /* optional: nicht zu breit */
    font-size: .95rem;
    padding: 6px 12px;
  }

  .rankings-page .last-update{
    white-space: normal;              /* darf umbrechen */
    overflow-wrap: anywhere;          /* zur Not überall trennen */
    text-align: left;
    font-size: .9rem;
  }
}