/* ---------- Header / Navigation ---------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:blur(8px);
  background:rgba(15,20,26,.7);
  border-bottom:1px solid var(--line);
}
/* Fallback wenn backdrop-filter nicht greift */
@supports not ((backdrop-filter: blur(8px))){ .site-header{background:#0f141acc} }

.nav{
  max-width:var(--container); margin:0 auto; padding:10px 16px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
}
.nav-left,.nav-right{
  display:flex; align-items:center; gap:16px;
  list-style:none; margin:0; padding:0;
}
.nav-left{justify-self:start}
.nav-right{justify-self:end}
.nav a{
  color:var(--text); text-decoration:none; position:relative; padding:6px 4px;
}
.nav a.is-active::after,.nav a:hover::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--accent); border-radius:2px;
}
.nav-logo{justify-self:center; display:inline-flex; align-items:center;}
.nav-logo img{height:36px; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));}

/* Login-Button */
.btn-login{padding:6px 12px; border:1px solid var(--accent); border-radius:8px; color:var(--text);}
.btn-login:hover{background:rgba(239,181,9,.12);}

/* User-Dropdown */
.nav-user{position:relative}
.nav-user .user-btn{display:flex; align-items:center; gap:.5rem; background:transparent; border:1px solid var(--line); border-radius:999px; padding:4px 8px; color:var(--text); cursor:pointer}
.nav-user .avatar{width:24px; height:24px; border-radius:50%; object-fit:cover}
.chev{width:16px; height:16px; fill:currentColor; opacity:.7}
.user-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  background:var(--bg-3); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
  padding:8px; min-width:220px; display:none; white-space:nowrap; overflow:hidden; z-index:1000;
}
.user-menu.is-open{display:block}
.user-menu a{display:block; padding:.5rem .75rem; border-radius:8px; color:var(--text)}
.user-menu a:hover{background:var(--surface)}
.menu-sep{height:1px; background:var(--line-soft); margin:.4rem .5rem}

/* Burger / Mobile */
.nav-burger{display:none}
.burger{background:transparent; border:0; width:36px; height:32px; display:grid; gap:5px; cursor:pointer}
.burger span{display:block; height:2px; background:var(--text); border-radius:2px}

/* Mobile Offcanvas */
.mobile-nav{display:none; background:var(--bg-2); border-bottom:1px solid var(--line)}
.mobile-nav ul{padding:10px 16px; margin:0; list-style:none}
.mobile-nav a{display:block; padding:10px; border-radius:8px; color:var(--text)}
.mobile-nav a:hover{background:var(--surface)}
.mobile-nav.open{display:block}
.mm-divider{height:1px; background:var(--line); margin:8px 0}
.mm-label{color:var(--muted); font-size:.9rem; padding:6px 10px 4px}

/* Member Quickbar (optional; im PHP nur intern anzeigen) */
.member-bar{
  display:grid; grid-auto-flow:column; gap:10px; align-items:center;
  padding:8px 16px;
  background:transparent);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.member-bar a{color:var(--text); padding:6px 8px; border-radius:8px}
.member-bar a:hover{background:var(--surface)}
.member-bar a.is-active{border-bottom:2px solid var(--accent)}

/* ---------- Topbar + Raid-Progress ---------- */
/* Topbar: unter dem Header, Progress oben, Live-Bar darunter */
.topbar{
  display:none;
  background:transparent !important;
  backdrop-filter:none !important;
}
.topbar.is-active{
  display:flex;
  flex-direction:column;    /* << stapeln! */
  gap:8px;                  /* Abstand zwischen Progress und Live-Bar */
}

/* Progress mittig, aber breit */
.raid-progress{
  display:flex; gap:.5rem; align-items:center;
  max-width:var(--container);
  padding:0 16px;
  margin:0 auto;            /* zentriert unter dem Header */
}

.rp-tile{position:relative; display:inline-block; height:80px}
.rp-tile img{height:80px; width:auto; display:block; border-radius:.35rem; transition:filter .3s ease; filter:none; pointer-events:none}
.rp-pct{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:.15rem .35rem; font-size:1.5rem; font-weight:800; color:#fff; text-shadow:2px 2px 2px #000}

/* ---------- Preloader ---------- */
#preloader{position:fixed; inset:0; background:#0b0f14; display:flex; align-items:center; justify-content:center; z-index:9999; transition:opacity .5s ease, visibility .5s ease; pointer-events:all}
#preloader.hidden{opacity:0; visibility:hidden; pointer-events:none}
#preloader .loader-inner{display:flex; flex-direction:column; align-items:center; gap:1rem}
#preloader .loader-logo{width:200px; height:auto; animation:pulse 1.5s infinite}
.loader-wheel{width:200px; height:auto; will-change: transform; animation: wheel-spin 5s linear infinite; filter: drop-shadow(0 4px 16px rgba(0,0,0,.5)); transform-origin: 50% 50%}
.loader-caption{font-weight:700; letter-spacing:.3px; opacity:.85; color:var(--text)}

@keyframes wheel-spin { to { transform: rotate(-360deg); } }
@keyframes pulse { 0%,100%{opacity:.7; transform:scale(.95)} 50%{opacity:1; transform:scale(1.05)} }
@media (prefers-reduced-motion: reduce){ .loader-wheel{ animation:none } #preloader .loader-logo{ animation:none } }

/* ---------- Live-Banner (nutzt den Header-Hintergrund) ---------- */
.live-banner{
  width:100%;
  background:transparent;               /* <- wichtig */
  /* kein eigener backdrop-filter hier nötig, kommt vom .site-header */

  border-bottom:1px solid var(--line);
  padding:.5rem 0;
  z-index:5;
}
.live-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
}
.live-list{ display:flex; align-items:center; gap:.75rem; white-space:nowrap; flex-wrap:nowrap; font-weight:700; }
.live-list, .live-item, .live-item a{ background:none!important; border:none!important; box-shadow:none!important; }
.live-item{ display:flex; align-items:center; gap:.5rem; line-height:1.2; }
.live-dot{ width:.6rem; height:.6rem; border-radius:50%; background:#ff3b3b; box-shadow:0 0 0 0 rgba(255,59,59,.6); animation:live-blink 1.6s infinite; }
@keyframes live-blink{ 0%{box-shadow:0 0 0 0 rgba(255,59,59,.6)} 70%{box-shadow:0 0 0 .65rem rgba(255,59,59,0)} 100%{box-shadow:0 0 0 0 rgba(255,59,59,0)} }
.live-item a{ color:var(--text,#f3f5f7); text-decoration:none; }
.live-item a:hover{ text-decoration:underline; }
.live-sep{ opacity:.6; }
.live-viewers{ font-weight:500; opacity:.9; }
@media (max-width:640px){ .live-list{ gap:.5rem; font-weight:600 } .live-viewers{ display:none } }

/* ---------- Team Cards (compact) ---------- */
#team-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(360px, 1fr)); gap:14px; align-items:start}
.player-card{
  position:relative; display:grid; grid-template-columns:200px 1fr; gap:12px; align-items:center;
  background:var(--bg-3); border:1px solid var(--line); border-left-width:4px; border-right-color:transparent;
  padding:10px; border-radius:12px; box-shadow:var(--shadow);
  transform:translateZ(0); transition:transform .12s ease, box-shadow .15s ease, border-color .2s ease; overflow:hidden;
}
.player-card:hover{transform:translateY(-2px) rotate3d(0,1,0,.5deg); box-shadow:0 14px 42px rgba(0,0,0,.5)}
.player-card::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.06) 35%,transparent 70%); transform:translateX(-120%); transition:transform .6s ease; pointer-events:none}
.player-card:hover::after{transform:translateX(120%)}
.thumb-wrap{width:100%; aspect-ratio:230/116; overflow:hidden; border-radius:10px; background:#000; position:relative}
.player-thumb{width:100%; height:100%; object-fit:cover; display:block}
.player-meta{display:grid; gap:4px}
.player-top{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px}
.player-name a{color:var(--text); text-decoration:none}
.player-name a:hover{text-decoration:underline}
.player-rank{font-size:.86rem; color:var(--muted); background:var(--bg-2); padding:2px 8px; border-radius:999px}
.player-class{color:var(--muted); font-size:.93rem}
.player-links{display:flex; gap:10px; align-items:center}
.player-links a{display:inline-block; font-size:.85rem; padding:2px 8px; border-radius:999px; background:var(--bg-2); color:var(--accent); text-decoration:none; line-height:1.2}
.player-links a:hover{filter:brightness(1.1)}
.rank-head{grid-column:1 / -1; margin:20px 0 10px; font-size:1.1rem; font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px}
.rank-head::before{content:""; display:inline-block; width:6px; height:20px; background:var(--accent); border-radius:3px}
@media (max-width:520px){.player-card{grid-template-columns:1fr}}
/* ---------- Forms (Apply & Co) ---------- */
.form{max-width:640px; margin:0 auto; display:grid; gap:1rem}
.form-row{display:flex; flex-wrap:wrap; gap:1rem}
.form label{flex:1; display:flex; flex-direction:column; font-weight:600; font-size:.9rem; color:var(--text)}
.form input, .form select, .form textarea{
  width:100%; margin-top:.35rem; padding:.8rem .95rem;
  border:1px solid var(--line); border-radius:10px;
  background:#141a21; color:var(--text); font-size:1rem;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form textarea{min-height:120px; resize:vertical}
.form input::placeholder, .form textarea::placeholder{ color:#8c96a3 }
.form input:focus, .form select:focus, .form textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(239,181,9,.18); background:#10161c;
}

/* Apply Card */
.apply-card{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--bg-3);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 14px 48px rgba(0,0,0,.55);
  padding:24px; max-width:980px; margin:0 auto;
  transition:transform .12s ease, box-shadow .2s ease;
}
.apply-card:hover{ transform:translateY(-2px); box-shadow:0 20px 60px rgba(0,0,0,.6); }
.apply-card::before{content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.apply-card::after{content:""; position:absolute; left:12px; right:12px; top:10px; height:2px; border-radius:2px; background:linear-gradient(90deg, rgba(239,181,9,.65), rgba(205,114,19,.35), transparent 80%); filter:blur(.2px); pointer-events:none}
.apply-title{ margin-top:.4rem; margin-bottom:.9rem; font-size:clamp(1.65rem, 1.1rem + 1.2vw, 2rem); }
.form--apply{ display:grid; gap:16px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:720px){ .form-grid{ grid-template-columns:1fr } }
.form--apply input, .form--apply select, .form--apply textarea{
  --input-bg:#11161d;
  background:linear-gradient(var(--input-bg), var(--input-bg)) padding-box, linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) border-box;
  border:1px solid transparent; border-radius:12px; color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .03s ease;
}
.form--apply input:focus, .form--apply select:focus, .form--apply textarea:focus{
  background:linear-gradient(#0f141a,#0f141a) padding-box, linear-gradient(135deg, rgba(239,181,9,.55), rgba(205,114,19,.35)) border-box;
  box-shadow:none;
}
.form--apply input:active{ transform:translateY(1px) }

/* ---------- Responsive bits ---------- */
@media (max-width:900px){
  .nav{grid-template-columns:1fr auto auto}
  .nav-left{display:none}
  .nav-burger{display:block}
  .nav-logo img{height:30px}
  .member-bar{grid-auto-flow:row; grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .topbar{height:64px}
  .raid-progress{gap:.5rem; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; padding:0 .75rem; mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%)}
  .raid-progress::-webkit-scrollbar{height:6px}
  .raid-progress::-webkit-scrollbar-thumb{background:#333; border-radius:6px}
  .rp-tile{height:48px}
  .rp-tile img{height:48px; width:auto; scroll-snap-align:center}
  .rp-pct{font-size:.7rem; padding:.1rem .35rem}
}

/* ---------- Hero sizes (KEIN .hero mit min-height hier!) ---------- */
.hero--tall  { min-height: var(--hero-h-tall);  padding: 72px 0; }
.hero--short { min-height: var(--hero-h-short); padding: 40px 0; }
.hero--micro { min-height: var(--hero-h-micro); padding: 24px 0; }
@media (max-width: 768px){
  .hero--micro { min-height: 28vh; padding: 28px 0; }
}
/* ---------- Tabellen (intern) ---------- */
.table-wrap{ overflow:auto; border:1px solid var(--line); border-radius:12px }
.table{
  width:100%; border-collapse:collapse; background:var(--bg-3);
}
.table thead th{
  position:sticky; top:0;
  background:var(--bg-2);
  color:var(--text);
  text-align:left;
  border-bottom:1px solid var(--line);
  padding:.7rem .8rem;
  font-weight:600;
}
.table td{
  padding:.65rem .8rem;
  border-bottom:1px solid var(--line-soft);
  color:var(--text);
}
.table tr:hover td{ background:rgba(255,255,255,.03) }
.table--compact td, .table--compact th{ padding:.55rem .7rem }

/* Pills (Status-Anzeigen) */
.pill{
  display:inline-block; font-size:.85rem; line-height:1;
  padding:.25rem .5rem; border-radius:999px;
  background:var(--bg-2); color:var(--text); border:1px solid var(--line);
}
.pill--ok{    background:rgba(34,197,94,.12);  border-color:rgba(34,197,94,.35) }
.pill--warn{  background:rgba(239,68,68,.12);  border-color:rgba(239,68,68,.35) }
.pill--muted{ background:rgba(255,255,255,.05); border-color:var(--line) }
.alert{padding:.75rem 1rem;border-radius:10px;border:1px solid var(--line);margin:.5rem 0}
.alert-error{background:#2a1111;border-color:#703333;color:#ffb3b3}
.alert-success{background:#102a14;border-color:#2f6b3a;color:#b6f7c0}
.alert-info{background:#0f1f2a;border-color:#2b4d63;color:#b6d8f7}
.nav-discord a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .4rem;
}
.nav-discord img {
  display: block;
  width: 24px;
  height: 24px;
  filter: invert(100%); /* Icon weiß, passt zum Dark Theme */
  transition: transform .2s ease;
}
.nav-discord img:hover {
  transform: scale(1.1);
}
/* Stream-Preview (Hover) */
.live-preview {
  position: fixed;
  z-index: 9999;
  width: 320px;               /* 16:9 */
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  background: #0f141a;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
}
.live-preview.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.live-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px), (hover: none) {
  .live-preview { display: none !important; }
}