/* ===============================
   Wonderland Styles – Cleaned
   (Optik unverändert, Redundanzen entfernt)
   =============================== */

/* ---------- Design Tokens ---------- */
:root{
  --grad-a:#1CFF62;
  --grad-b:#07DAFF;
  --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);
}

/* ---------- Base ---------- */
*{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%, rgba(28,255,98,0.10) 0%, transparent 60%),   /* sanftes Grün oben links */
    radial-gradient(1000px 700px at 90% 30%, rgba(7,218,255,0.08) 0%, transparent 60%),  /* Cyan-Schimmer rechts */
    linear-gradient(120deg, #090c11 0%, #04070d 100%);                                   /* dunkle Basis */
  background-attachment: fixed;
}


/* ---------- Page & Main (nicht sticky footer, finaler Zustand) ---------- */
.page { display:block; min-height:auto; }
.wl-main{ max-width:1100px; margin:40px auto; padding:0 20px; }

/* ---------- 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 / Brand / Nav ---------- */
.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}

.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; overflow:hidden; isolation:isolate;
  transition: border-color 160ms ease, transform 160ms ease;
}
.wl-nav a:hover{ border-color:#ffffff33; transform: translateY(-1px); }
.wl-nav a.active{
  border:0;
  background-image: linear-gradient(90deg,var(--grad-a),var(--grad-b));
  color:#0a0d11; font-weight:700; box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* ---------- IP Chip ---------- */
.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 ---------- */
.btn, .fab, .copy-btn{
  border:0; border-radius:12px; padding:10px 14px; cursor:pointer;
  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); }
.btn.ghost{ background:none; color:var(--text); border:1px solid var(--border); box-shadow:none; }

/* ---------- Hero / Countdown / Logo ---------- */
.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}

.hero-logo-wrap{ display:grid; place-items:center; margin:0 auto 8px; }
.hero-logo-img{
  display:block; width:128px; height:auto; border-radius:16px; background:none; padding:0;
  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); }

/* ---------- Updates ---------- */
.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:12px 14px; border-radius:14px; border:1px solid var(--border);
  background:linear-gradient(180deg,#0d1423cc,#0b111ecc);
}
.update-line{
  display:flex;
  gap:8px;
  align-items:center;      /* damit align-self der Kinder greift */
  line-height:1.45;
}

/* Datum links – vertikal mittig neben mehrzeiligem Text */
.update-card .date-inline{
  font-weight:600;
  opacity:.9;
  white-space:nowrap;
  align-self:center;        /* zentriert vertikal relativ zum mehrzeiligen Text */
}

/* kleiner Trenner */
.update-card .sep{
  opacity:.45;
  user-select:none;
  align-self:center;        /* hält den Punkt ebenfalls mittig */
}

/* Text nimmt den verfügbaren Platz ein und darf umbrechen */
.update-card .text-inline{
  flex:1 1 auto;
  min-width:0;
  word-break:break-word;    /* falls sehr lange Worte vorkommen */
}

/* Admin-Aktionen rechts, in derselben Zeile, vertikal mittig */
.update-actions-inline{
  margin-left:auto;         /* schiebt die Buttons ganz nach rechts */
  display:flex;
  gap:6px;
  align-self:center;        /* vertikal mittig wie das Datum */
}



.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 – dezente Farbakzente (einheitlich für alle Seiten)
   ========================================================= */

/* Basis-Stil für alle Icon-Buttons */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0b111c;
  color: var(--text);               /* Standard: helles Symbol */
  cursor: pointer;
  box-shadow: var(--shadow);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}

.icon-btn:hover {
  transform: translateY(-1px);
  border-color: #ffffff33;
  box-shadow: var(--shadow), var(--glow);
}

/* SVGs übernehmen automatisch die Button-Farbe */
.icon-btn svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor !important;
  stroke: currentColor !important;
  transition: transform 0.15s ease;
}

.icon-btn:hover svg {
  transform: scale(1.08);
}

/* ---------- Varianten ---------- */

/* 🗑 Delete – dezentes Rot (Umrandung + Symbol) */
.icon-btn.delete,
.icon-btn.icon-del {
  border-color: #ff6464;
  color: #ff6464;
}
.icon-btn.delete:hover,
.icon-btn.icon-del:hover {
  border-color: #ff8a8a;
  color: #ff8a8a;
}

/* ✏ Edit – dezentes Gelb */
.icon-btn.edit,
.icon-btn.icon-edit {
  border-color: #f7cc46;
  color: #f7cc46;
}
.icon-btn.edit:hover,
.icon-btn.icon-edit:hover {
  border-color: #f9df7a;
  color: #f9df7a;
}

/* 👁 View – dezentes Grün */
.icon-btn.view,
.icon-btn.icon-view {
  border-color: #50d38a;
  color: #50d38a;
}
.icon-btn.view:hover,
.icon-btn.icon-view:hover {
  border-color: #6be5a1;
  color: #6be5a1;
}

/* =========================================================
   Abstände für Aktionsleisten (News / Updates / Team)
   ========================================================= */
.update-actions,
.news-actions,
.team-actions,
.news-bottom-row .admin-actions {
  display: flex;
  align-items: center;
  gap: 8px; /* Abstand zwischen Icon-Buttons */
}


/* ---------- 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 ---------- */
.wl-footer{
  margin:32px auto 0; max-width:1100px; padding:16px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.footer-left{white-space:nowrap}
.footer-right{ margin-left:auto; 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;
}

/* ---------- Team ---------- */
.team-panel{ max-width:960px; margin:28px auto 16px; 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; }

.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); }

.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; }
}

.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; /* 2 Spalten genügen */
  align-items:center; gap:12px; width:100%;
  position: relative;               /* NEU: für absolute Icons */
  overflow: visible;                /* Icons bleiben sichtbar */
}
.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; }
.team-name-line{ font-weight:700; font-size:1.02rem; }
.team-note-line{ font-size:.92rem; color: var(--muted); }
.team-empty, .team-error{ margin-top:1rem; padding:.75rem 1rem; border:1px dashed var(--border); border-radius:12px; color: var(--muted); }
.team-card.has-actions{ grid-template-columns: 86px 1fr; padding-right: 64px; }
.name-row{ display:flex; align-items:center; gap:8px; }
.team-actions{ position:absolute; top:10px; right:10px; display:flex; align-items:center; gap:6px; z-index:2; }
.icon-btn svg{ width:14px; height:14px; fill: currentColor; } /* für die kleinen Varianten */
.team-card .icon-btn{ width:28px; height:28px; border-radius:8px; }
.team-card .icon-btn svg{ width:16px; height:16px; }

/* ---------- News – Liste/Karten ---------- */
/* News: Head-Zeile (Titel + Plus) */
.news-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.news-list{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; margin:1.5rem auto; }
.news-card{ width:min(1100px, 96vw); padding:1.25rem 1.5rem; }
.news-row--xl{ display:grid; grid-template-columns:520px 1fr; gap:1.25rem; align-items:center; }

.news-cover{ width:100%; height:0; position:relative; overflow:hidden; border-radius:12px; background:rgba(0,0,0,.05); }
.news-cover--xl{ padding-top:32%; box-shadow:0 6px 18px rgba(0,0,0,.06) inset; }
.news-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.news-cover--placeholder{ position:absolute; inset:0; display:grid; place-items:center; color:rgba(0,0,0,.55); font-size:.95rem; }

.news-info--xl{ display:grid; align-content:center; gap:.6rem; }
.news-title--xl{ font-size:clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); line-height:1.15; margin:0 0 .25rem; }
.news-bottom-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem 1rem; }
.news-meta--xl{ display:grid; gap:.15rem; opacity:.9; }
.news-open-btn{ flex-shrink:0; padding:.55rem 1.1rem; font-weight:600; border-radius:.6rem; }
.admin-actions{ margin-top:.5rem; }

.news-card:hover .news-title--xl{ text-decoration:none; }
.news-card:hover .news-cover img{ transform:scale(1.02); transition:transform .25s ease; }

@media (max-width:1100px){ .news-row--xl{ grid-template-columns:460px 1fr; } }
@media (max-width:900px){ .news-row--xl{ grid-template-columns:380px 1fr; } }
@media (max-width:720px){
  .news-row--xl{ grid-template-columns:1fr; gap:.9rem; }
  .news-cover--xl{ padding-top:40%; }
  .news-bottom-row{ flex-direction:column; align-items:stretch; gap:.6rem; }
  .news-open-btn{ align-self:stretch; }
}

/* ---------- News – Artikel ---------- */
.article-card{
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:26px 30px;
}
.article-hero{
  width:100%; aspect-ratio:16 / 6; border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,#0d1423cc,#0b111ecc);
  margin:1rem 0 1rem; position:relative; box-shadow:0 10px 30px rgba(0,0,0,.4);
  display:flex; justify-content:center; align-items:center;
}
.article-hero img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block; transition:transform .25s ease;
}
.article-card:hover .article-hero img { transform: scale(1.015); }

.article-title{
  font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  font-weight:800; margin:0 0 6px;
  background:linear-gradient(90deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.article-meta{ color:var(--muted); font-size:.95rem; margin-bottom:1.25rem; display:flex; gap:1.25rem; flex-wrap:wrap; }
.article-content{ line-height:1.65; font-size:1.02rem; }
.article-content p{ margin:.6rem 0; }
.article-content h2, .article-content h3{ margin-top:1.25rem; margin-bottom:.5rem; font-weight:700; }
.article-actions{ display:flex; justify-content:flex-end; margin:.5rem 0 .9rem; }
.article-back-btn{
  white-space:nowrap; font-weight:700; padding:8px 14px; border-radius:10px;
  background:rgba(255,255,255,.05); transition:background .2s; text-decoration:none;
}
.article-back-btn:hover{ background:rgba(255,255,255,.15); }
.article-head-top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem 1rem; }
.article-head-top .article-title{ margin:0; flex:1 1 auto; }
.article-footer .btn.ghost{ color:var(--text); border:1px solid var(--border); }

@media (max-width:720px){
  .article-card{ padding:18px 20px; }
  .article-hero{ aspect-ratio:16 / 9; margin-bottom:16px; }
  .article-meta{ flex-direction:column; gap:.25rem; }
  .article-footer{ justify-content:center; }
}

/* Trennstrich (einmalig) */
.article-hr{
  display:block; border:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  margin:12px 0;
}

/* ---------- Editor / Quill ---------- */
.editor-wrap .editor-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.editor-card{
  border-radius:var(--radius); background:var(--card); border:1px solid var(--border);
  box-shadow:var(--shadow); padding:16px 18px 18px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field-label{ font-weight:600; opacity:.85; }
.field-input{ width:100%; border:1px solid var(--border); background: var(--card-weak,#0e1523); color: var(--text,#e7ecf7); border-radius:10px; padding:10px 12px; }

.quill-wrap{
  position:relative; border:1px solid var(--border); border-radius:12px; overflow:visible;
}
#quill-toolbar, .ql-toolbar.ql-snow{
  position:sticky; top:0; z-index:30; border-bottom:1px solid var(--border);
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: blur(6px);
}
.ql-container{ min-height:360px; border-bottom-left-radius:12px; border-bottom-right-radius:12px; overflow:hidden; }
.ql-snow .ql-stroke { stroke:#e7ecf7; }
.ql-snow .ql-fill   { fill:#e7ecf7; }
.ql-snow .ql-picker,
.ql-snow .ql-picker-label,
.ql-snow .ql-picker-item { color:#e7ecf7; }
.ql-snow .ql-picker-options { background: var(--card); border:1px solid var(--border); }
.ql-snow .ql-picker.ql-color-picker .ql-picker-label,
.ql-snow .ql-picker.ql-background .ql-picker-label { border-color: rgba(255,255,255,.2); }
#quill-toolbar .ql-hr { font-weight:700; color:#e7ecf7; }

/* Inline Image Resize Overlay */
.ql-img-overlay{
  position:absolute; pointer-events:none; border:1px dashed rgba(255,255,255,.7);
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset; border-radius:6px; z-index:10;
}
.ql-img-overlay .ql-img-handle{
  position:absolute; width:10px; height:10px; background:#fff; border:2px solid #00baff; border-radius:50%; pointer-events:all;
}
.ql-img-overlay .ql-nw{ left:-6px; top:-6px; } .ql-img-overlay .ql-ne{ right:-6px; top:-6px; }
.ql-img-overlay .ql-sw{ left:-6px; bottom:-6px; } .ql-img-overlay .ql-se{ right:-6px; bottom:-6px; }

.news-card-title{
  font-weight:700; font-size:1.4rem;
  background:linear-gradient(90deg, var(--grad-a), var(--grad-b)); /* <- Tokens */
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; text-fill-color:transparent; margin:0 0 6px 0;
}

/* NEWS – ausgeblendete Beiträge  */
.news-card.is-hidden {
  opacity: .55;                       /* leicht transparent */
  filter: grayscale(.25) saturate(.85);/* dezentes Entsättigen */
  transition: opacity .2s ease, filter .2s ease;
}

/* Wichtige Bedienelemente sollen nicht „zu blass“ werden */
.news-card.is-hidden .icon-btn,
.news-card.is-hidden a,
.news-card.is-hidden button {
  opacity: 1;
  filter: none;
}

/* ---------- About ---------- */
.wl-about .about-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.wl-about .about-head h2{ margin:0; font-size:1.8rem; font-weight:700; }
.wl-about .edit-btn{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background: var(--card, rgba(255,255,255,0.08));
  color: var(--text, #eaeaea); border:1px solid rgba(255,255,255,0.16);
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
}
.wl-about .edit-btn:hover{ background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.32); transform: scale(1.05); }
.wl-about .edit-btn svg{ width:18px; height:18px; stroke: currentColor; }
.wl-about .about-card{ padding:20px; border-radius:14px; transition: background .25s ease, transform .15s ease; }
.wl-about .about-card:hover{ background: var(--card, rgba(255,255,255,0.1)); transform: translateY(-2px); }
.wl-about .article-content{ line-height:1.55; font-size:1.02rem; }
.wl-about .article-content p{ margin:.5rem 0; }
.wl-about .article-content > :first-child{ margin-top:0!important; }
.wl-about .article-content > :last-child{ margin-bottom:0!important; }
.wl-about .article-content h2,
.wl-about .article-content h3 { margin:.9rem 0 .45rem; line-height:1.25; }
.wl-about .article-content ul,
.wl-about .article-content ol { margin:.45rem 0 .7rem 1.2rem; }
.wl-about .article-content li { margin:.2rem 0; }

/* ---------- Responsive (global) ---------- */
@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}
  .hero-logo-img{width:100px; height:100px}
}
@media (max-width:720px){
  .form-row{ grid-template-columns:1fr; }
}

/* NUR FÜR RELEASE */

.big-live {
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.5em;
}

#countdown p.wl-sub {
  font-size: 1.4rem;
  text-align: center;
  cursor: pointer;
}

.live-wrap {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  animation: fadeIn 1s ease forwards;
}

.live-chip {
  margin-top: 0.3rem;
  padding: 10px 16px;
  font-size: 1.2rem;
  background: none;
  box-shadow: none;
}

.live-chip::before {
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Konfetti-Overlay */
.confetti-canvas{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* Live-Zustand (falls noch nicht hinzugefügt) */
.live-wrap{
  display:grid;
  justify-items:center;
  gap:.8rem;
  animation: fadeIn .9s ease forwards;
}
.live-chip{
  margin-top:.3rem;
  padding:10px 16px;
  font-size:1.2rem;
  background:none;
  box-shadow:none;
}
.live-chip::before{
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
}

@keyframes fadeIn{
  from{opacity:0; transform: translateY(8px);}
  to{opacity:1; transform: translateY(0);}
}