/* ===============================
   Wonderland Styles (complete)
   =============================== */

:root{
  --grad-a:#9A4BFF;
  --grad-b:#00E1FF;
  --bg:#0a0d11;
  --card:#0e1117cc;
  --border:#ffffff22;
  --text:#eef1f8;
  --muted:#aeb6c7;
  --shadow: 0 10px 40px rgba(0,0,0,.45);
  --glow: 0 0 32px rgba(154,75,255,.25), 0 0 24px rgba(0,225,255,.2);
  --radius: 18px;
  --transition: 160ms cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% 10%, #1b1135 0%, transparent 60%),
    radial-gradient(1000px 700px at 90% 30%, #072a3a 0%, transparent 60%),
    linear-gradient(120deg, #0b0e12 0%, #0a0d11 100%);
  background-attachment:fixed;
}

/* ===== Page wrapper for sticky footer ===== */
.page{min-height:100vh; display:flex; flex-direction:column}
.wl-main{max-width:1100px; margin:40px auto; padding:0 20px; flex:1}

/* ===== Utilities ===== */
.gradient-text{
  background:linear-gradient(90deg,var(--grad-a),var(--grad-b));
  -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.glass{
  background:linear-gradient(180deg, #0f1421cc, #0f1421aa);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:saturate(1.15) blur(12px);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition)
}
.glass:hover{border-color:#ffffff33; box-shadow:var(--shadow), var(--glow)}

/* ===== Header: centered nav (clean buttons) ===== */
.wl-header{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:12px; padding:14px 24px;
  backdrop-filter:saturate(1.2) blur(10px);
  background:linear-gradient(180deg, #0d1016dd, #0d101600);
  border-bottom:1px solid var(--border);
}

.wl-head-left{min-height:1px}
.wl-head-right{justify-self:end}

/* ===== Brand (links im Header) ===== */
.wl-brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--text);
}
.brand-logo{
  width:34px; height:34px; border-radius:10px; object-fit:contain;
  box-shadow: var(--shadow);
}
.brand-name{
  font-weight:800; letter-spacing:.2px;
  background:linear-gradient(90deg,var(--grad-a),var(--grad-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}


.wl-nav{
  justify-self:center; display:flex; gap:12px; flex-wrap:wrap;
}

.wl-nav a{
  position:relative;
  display:inline-block;
  text-decoration:none; color:var(--text);
  padding:8px 14px; border-radius:12px;
  border:1px solid var(--border);
  background:none;              /* kein Layer */
  overflow:hidden;              /* verhindert Ränder */
  isolation:isolate;            /* keine Misch-Effekte */
  transition: border-color 160ms ease, transform 160ms ease;
}
.wl-nav a:hover{
  border-color:#ffffff33; transform: translateY(-1px);
}
.wl-nav a.active{
  border:0;                     /* eigener Hintergrund -> keine Border */
  background-image: linear-gradient(90deg,var(--grad-a),var(--grad-b)); /* 1 Layer */
  color:#0a0d11; font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* ===== IP chip (clean gradient border) ===== */
.ip-chip{
  position: relative;
  display:inline-flex; align-items:center; gap:8px;
  border-radius:14px; padding:8px 10px; background:#0b111c;
}
.ip-chip::before{
  content:""; position:absolute; inset:0; border-radius:14px; padding:1px;
  background: linear-gradient(90deg,var(--grad-a),var(--grad-b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}
.ip-chip .ip-text{font-weight:700; letter-spacing:.2px}

/* === Buttons: EIN Layer (nur Linear-Gradient) === */
.btn,
.fab,
.copy-btn{
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;

  /* genau 1 Layer */
  background-image: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  background-color: transparent;

  color: #0a0d11;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.fab{
  width: 52px; height: 52px; border-radius: 14px; font-size: 30px;
  display: grid; place-items: center; padding: 0;
}
.btn:hover, .fab:hover, .copy-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}

/* Ghost-Variante bleibt transparent, kein Gradient */
.btn.ghost{
  background: none;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}

/* ===== Hero / Countdown ===== */
.wl-hero{padding:36px; text-align:center}
.wl-sub{color:var(--muted); margin-top:6px}
.countdown{margin:28px auto 8px; display:flex; align-items:center; justify-content:center; gap:12px}
.cd-box{
  min-width:110px; padding:18px 16px; border-radius:16px; border:1px solid var(--border);
  background:linear-gradient(180deg,#0c111ecc,#0b101ccc);
  transition:transform var(--transition)
}
.cd-box:hover{transform:translateY(-2px)}
.cd-box span{display:block; font-size:42px; font-weight:800; letter-spacing:1px}
.cd-box label{color:var(--muted); font-size:12px}
.cd-sep{opacity:.5; font-weight:800; font-size:24px; margin-top:-10px}
.wl-note{color:var(--muted); margin-top:8px}

/* === Logo über der Countdown-Box, ohne Shine === */
.hero-logo-wrap{
  display: grid;
  place-items: center;
  margin: 0 auto 8px;   /* Abstand nach unten zur Box */
}

.hero-logo-img{
  display: block;
  width: 128px;         /* anpassen nach Wunsch */
  height: auto;
  border-radius: 16px;
  background: none;     /* KEIN Gradient dahinter */
  padding: 0;           /* kein Innenabstand */
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform 160ms ease;
}

.hero-logo-wrap:hover .hero-logo-img{
  transform: scale(1.03);   /* dezenter Hover ohne „Mond“ */
}


/* ===== Updates list & actions ===== */
.wl-updates{padding:26px}
.updates-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.updates-list{display:grid; gap:12px}
.update-card{
  padding:16px; border-radius:14px; border:1px solid var(--border);
  background:linear-gradient(180deg,#0d1423cc,#0b111ecc);
}
.update-headline{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.update-actions{display:flex; gap:8px; align-items:center}
/* ===== Icon buttons for updates (SVG based) ===== */
.icon-btn{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0b111c;
  cursor:pointer;
  box-shadow: var(--shadow);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.icon-btn:hover{ transform: translateY(-1px); border-color:#ffffff33; box-shadow: var(--shadow), var(--glow) }
.icon-btn svg{ width:20px; height:20px; display:block }
.icon-btn.edit svg path{ fill:url(#grad-edit) }
.icon-btn.delete{ background:linear-gradient(180deg,#2a0f14,#18090c); border-color:#ff647233 }
.icon-btn.delete:hover{ border-color:#ff6472aa }
.icon-btn.delete svg path{ stroke:#ff6b7a; stroke-width:2; fill:none }
.empty-hint{color:var(--muted); text-align:center; padding:16px}

/* ===== Modal ===== */
.modal{position:fixed; inset:0; display:none}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{ position:absolute; inset:0; background:#0008; backdrop-filter: blur(4px); }
.modal-card{ position:relative; width:min(720px, 92vw); margin:10vh auto 0; padding:18px }
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.modal-close{
  width:36px; height:36px; border-radius:8px; border:1px solid var(--border);
  background:transparent; color:var(--text); font-size:20px; cursor:pointer;
}
.field{display:grid; gap:6px; margin:12px 0}
.field input[type="date"], .field textarea{
  background:#0c1017; border:1px solid var(--border);
  color:var(--text); padding:10px 12px; border-radius:10px;
}

/* ===== Footer (sticky bottom) ===== */
.wl-footer{
  margin:50px auto 0; max-width:1100px; padding:16px 20px;
  display:flex; align-items:center;
  gap:16px;                 /* <-- Abstand zwischen links & rechts */
  flex-wrap:wrap;           /* bricht auf kleinen Screens sauber um */
}
.footer-left{white-space:nowrap}
.footer-right{
  margin-left:auto;         /* schiebt Login nach rechts */
  display:flex; gap:8px; align-items:center;
}
.auth-box{display:flex; gap:8px; align-items:center}
.auth-box input{
  background:#0c1017; border:1px solid var(--border);
  color:var(--text); padding:8px 10px; border-radius:10px; min-width:150px;
}


/* ===== Small screens ===== */
@media (max-width:640px){
  .cd-box{min-width:86px; padding:14px 12px}
  .cd-box span{font-size:34px}
  .wl-header{grid-template-columns: 1fr auto 1fr; padding:12px 16px}
  .ip-chip{display:none} /* Platz sparen; optional zeigen */
  .hero-logo-img{width:100px; height:100px}
}

/* === Team Page – Panel & Sections (mit Top-Abstand) === */
.team-panel{
  max-width: 960px; 
  margin: 28px auto 16px;   /* Abstand zum Header wie Updates */
  padding: 16px; 
  border-radius: 18px;
}
.team-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }

.rank-section{ margin: 22px auto 28px; max-width: 940px; }
.rank-section + .rank-section{
  border-top: 1px solid var(--border);
  padding-top: 20px; margin-top: 26px;
}

/* Überschrift: Gradient nur auf dem Text */
.rank-header{
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 800; letter-spacing: .3px;
  line-height: 1.15;
  display:inline-block;
  background: var(--rank-grad, linear-gradient(90deg, var(--grad-a), var(--grad-b)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 10px;
}
.rank-header.rank-claus       { --rank-grad: linear-gradient(90deg, #f33939, #d10000); }
.rank-header.rank-wichtelplus { --rank-grad: linear-gradient(90deg, #4276f0, #446cca); }
.rank-header.rank-wichtel     { --rank-grad: linear-gradient(90deg, #4276f0, #115cd4); }
.rank-header.rank-elfe        { --rank-grad: linear-gradient(90deg, #00a313, #008a10); }
.rank-header.rank-builder     { --rank-grad: linear-gradient(90deg, #ffb347, #ff7f00); }

/* Karten-Grid: bis zu 3 nebeneinander, immer zentriert */
.rank-section .team-grid{
  display: grid;
  grid-template-columns: repeat(3, 280px);
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
  max-width: calc(3 * 280px + 2 * 14px);
  margin-left: auto; margin-right: auto;
}
@media (max-width: 980px){
  .rank-section .team-grid{ grid-template-columns: repeat(2, 280px); max-width: calc(2 * 280px + 1 * 14px); }
}
@media (max-width: 620px){
  .rank-section .team-grid{ grid-template-columns: 280px; max-width: 280px; }
}

/* Karten */
.team-card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 16px;
  box-shadow: var(--shadow);
  display:grid; grid-template-columns: 86px 1fr; align-items:center; gap:12px;
  width:100%;
}
.team-skin{ width:86px; height:86px; border-radius:12px; border:1px solid var(--border); object-fit:cover; background:#0c1017; }
.team-text{ display:flex; flex-direction:column; gap:2px; }

/* Neue Zeilen: Name immer, Notiz optional */
.team-name-line{ font-weight:700; font-size:1.02rem; }
.team-note-line{ font-size:.92rem; color: var(--muted); }

/* Hinweise/Fehler */
.team-empty, .team-error{
  margin-top:1rem; padding:.75rem 1rem; border:1px dashed var(--border);
  border-radius:12px; color: var(--muted);
}

/* Team: Aktionen kompakt rechts in der Karte */
.team-card{ grid-template-columns: 86px 1fr; }
.team-card.has-actions{ grid-template-columns: 86px 1fr auto; }

.team-card .update-actions{
  justify-self: end;
  display: flex; gap: 8px; align-items: center;
}

/* Kompakte Icon-Buttons (wie Updates, aber kleiner) */
.update-actions .icon-btn{
  width: 28px; height: 28px;
  padding: 0;
  border-radius: 8px;
  display: grid; place-items: center;
}
.update-actions .icon-btn svg{
  width: 16px; height: 16px;
}

/* Name-Zeile mit Aktionen rechts */
.name-row{ display:flex; align-items:center; gap:8px; }
.team-name-line{ font-weight:700; font-size:1.02rem; }
.team-note-line{ font-size:.92rem; color: var(--muted); }

/* Aktionen kompakt rechts neben dem Namen */
.team-actions{ display:flex; align-items:center; gap:6px; margin-left:auto; }

/* Kleine Icon-Buttons im Updates-Stil: bunt (edit) & rot (delete) */
.icon-btn{
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  color: #fff; cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .12s ease, opacity .12s ease;
}
.icon-btn:hover{ transform: translateY(-1px); }
.icon-btn:active{ transform: translateY(0); opacity:.9; }

/* Edit = bunter Gradient analog Theme */
.icon-btn.icon-edit{
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
}
/* Delete = rot (wie deine Claus-Farben) */
.icon-btn.icon-del{
  background: linear-gradient(90deg, #f33939, #d10000);
}

/* SVG-Größe innen */
.icon-btn svg{ width: 14px; height: 14px; fill: currentColor; }