/* ═══════════════════════════════════════════════════════════════
   CLUB 218 / apg-export — UNIFIED DESIGN SYSTEM
   © 2026 Andreas Loos · Single Source of Truth für alle Pages
   ═══════════════════════════════════════════════════════════════
   Eingebunden via:  <link rel="stylesheet" href="/club218_theme.css">
   Ersetzt:          duplizierte :root-Blöcke + Basis-Utilities
   =============================================================== */

/* ── DESIGN TOKENS ── (Superset aller bisherigen Pages) ───────── */
:root{
  /* ▸ Neon Primärfarben */
  --pink:#e8177a; --pink2:#ff4da6; --pink3:rgba(232,23,122,.12); --pink4:rgba(232,23,122,.25); --pink5:rgba(232,23,122,.5);
  --blue:#2979ff; --blue2:#64b5f6; --blue3:rgba(41,121,255,.12); --blue4:rgba(41,121,255,.25); --blue5:rgba(41,121,255,.5);

  /* ▸ Sekundäre Akzente */
  --violet:#7c3aed; --violet2:#a78bfa;
  --green:#00e676;  --amber:#ffb300;  --red:#ff3d3d;  --teal:#00bcd4;

  /* ▸ Social-Brand-Farben (für Social-UI) */
  --ig:#c13584; --fb:#1877f2; --tt:#000; --go:#4285f4; --yt:#ff0000;

  /* ▸ Surfaces – tiefes Schwarz mit Violet-Tint */
  --ink:#04020a; --s1:#08040f; --s2:#0e0918; --s3:#160e22; --s4:#1e1230; --s5:#26183d;

  /* ▸ Text & Linien */
  --white:#f0ecfa;
  --muted:rgba(240,236,250,.52);
  --faint:rgba(240,236,250,.07);
  --border:rgba(240,236,250,.08);
  --border-pk:rgba(232,23,122,.25);
  --border-bl:rgba(41,121,255,.25);

  /* ▸ Glows – Premium Dual-Tone */
  --glow-pk:0 0 30px rgba(232,23,122,.4), 0 0 80px rgba(232,23,122,.15);
  --glow-bl:0 0 30px rgba(41,121,255,.4), 0 0 80px rgba(41,121,255,.15);
  --glow-duo:0 0 25px rgba(232,23,122,.35), 0 0 55px rgba(41,121,255,.2);
  --glow-gr:0 0 12px rgba(0,230,118,.5);
  --glow-am:0 0 12px rgba(255,179,0,.5);
  --glow-rd:0 0 12px rgba(255,61,61,.5);

  /* ▸ Gradients */
  --grad-duo:linear-gradient(135deg,#e8177a 0%,#7c3aed 50%,#2979ff 100%);
  --grad-pk:linear-gradient(135deg,#e8177a 0%,#ff4da6 100%);
  --grad-bl:linear-gradient(135deg,#2979ff 0%,#64b5f6 100%);
  --grad-card:linear-gradient(180deg,rgba(232,23,122,.04) 0%,rgba(41,121,255,.03) 100%);

  /* ▸ Layout-Konstanten (PWA / App) */
  --nav-h:60px; --tab-h:64px;

  /* ▸ Radii & Shadows */
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sh-sm:0 2px 8px rgba(0,0,0,.4);
  --sh-md:0 8px 24px rgba(0,0,0,.5);
  --sh-lg:0 20px 60px rgba(0,0,0,.6);

  /* ▸ Transitions */
  --t-fast:.15s ease;
  --t-base:.28s cubic-bezier(.4,0,.2,1);
  --t-slow:.55s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--white);
  font-family:"DM Sans",system-ui,sans-serif;font-weight:300;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img,svg,video{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;color:inherit}

/* ── SCROLLBAR (premium thin) ─────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--pink4),var(--blue4));border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--pink),var(--blue))}

/* ── ANIMATIONS ───────────────────────────────────────────────── */
@keyframes c218-fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes c218-fadeIn{from{opacity:0}to{opacity:1}}
@keyframes c218-slideR{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes c218-slideL{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes c218-pulse-pk{0%,100%{box-shadow:var(--glow-pk)}50%{box-shadow:0 0 50px rgba(232,23,122,.7),0 0 120px rgba(232,23,122,.3)}}
@keyframes c218-pulse-bl{0%,100%{box-shadow:var(--glow-bl)}50%{box-shadow:0 0 50px rgba(41,121,255,.7),0 0 120px rgba(41,121,255,.3)}}
@keyframes c218-pulse-duo{0%,100%{box-shadow:0 0 25px rgba(232,23,122,.35),0 0 55px rgba(41,121,255,.2)}50%{box-shadow:0 0 45px rgba(232,23,122,.6),0 0 100px rgba(41,121,255,.45)}}
@keyframes c218-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes c218-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes c218-ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes c218-spin{to{transform:rotate(360deg)}}
@keyframes c218-grad-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes c218-blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ── SCROLL REVEAL ────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}
.reveal-l{opacity:0;transform:translateX(-35px);transition:opacity .75s ease,transform .75s ease}
.reveal-r{opacity:0;transform:translateX(35px);transition:opacity .75s ease,transform .75s ease}
.reveal-s{opacity:0;transform:scale(.92);transition:opacity .75s ease,transform .75s ease}
.reveal.vis,.reveal-l.vis,.reveal-r.vis,.reveal-s.vis{opacity:1;transform:none}

/* ── TYPO HELPERS ─────────────────────────────────────────────── */
.font-bebas{font-family:"Bebas Neue",sans-serif;letter-spacing:.05em}
.font-display{font-family:"Playfair Display",serif}
.text-gradient{background:var(--grad-duo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.text-pk{color:var(--pink2)}
.text-bl{color:var(--blue2)}
.text-muted{color:var(--muted)}

.sec-label{font-size:.62rem;font-weight:600;letter-spacing:.35em;text-transform:uppercase;color:var(--pink2);display:block;margin-bottom:.7rem}
.sec-label.bl{color:var(--blue2)}
.sec-title{font-family:"Bebas Neue",sans-serif;font-size:clamp(2rem,4.5vw,3.5rem);line-height:1;letter-spacing:.04em;color:var(--white);margin-bottom:1rem}
.sec-title em{color:var(--pink);font-style:normal}
.sec-title em.bl{color:var(--blue2)}
.sec-desc{font-family:"Playfair Display",serif;font-style:italic;font-size:1.05rem;color:var(--muted);line-height:1.85;max-width:560px}
.rule{width:50px;height:2px;background:var(--pink);margin:1.5rem 0;box-shadow:0 0 8px rgba(232,23,122,.5)}
.rule-bl{background:var(--blue);box-shadow:0 0 8px rgba(41,121,255,.5)}
.rule-duo{background:var(--grad-duo);box-shadow:0 0 8px rgba(232,23,122,.4),0 0 12px rgba(41,121,255,.3)}

/* ── LAYOUT ───────────────────────────────────────────────────── */
.sec{padding:6rem 5%}
@media (max-width:768px){.sec{padding:4rem 5%}}
.w{max-width:1240px;margin:0 auto}
.w-narrow{max-width:880px;margin:0 auto}

/* ── BUTTONS ──────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 2.2rem;font-family:"Bebas Neue",sans-serif;font-size:1rem;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid transparent;outline:none;
  transition:all var(--t-base);position:relative;overflow:hidden;
  border-radius:0; user-select:none;
}
.btn::after{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transition:left .6s
}
.btn:hover::after{left:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:disabled:hover::after{left:-100%}

.btn-pk{background:transparent;border-color:var(--pink);color:var(--pink2);box-shadow:0 0 15px rgba(232,23,122,.2)}
.btn-pk:hover{background:rgba(232,23,122,.1);box-shadow:var(--glow-pk);color:#fff;transform:translateY(-2px)}
.btn-bl{background:transparent;border-color:var(--blue);color:var(--blue2);box-shadow:0 0 15px rgba(41,121,255,.2)}
.btn-bl:hover{background:rgba(41,121,255,.1);box-shadow:var(--glow-bl);color:#fff;transform:translateY(-2px)}
.btn-sl{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 0 15px rgba(232,23,122,.3)}
.btn-sl:hover{background:#ff1f80;box-shadow:var(--glow-pk);transform:translateY(-2px)}
.btn-sl-bl{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 15px rgba(41,121,255,.3)}
.btn-sl-bl:hover{background:#3d8bff;box-shadow:var(--glow-bl);transform:translateY(-2px)}
.btn-duo{background:var(--grad-duo);background-size:200% 200%;border-color:transparent;color:#fff;box-shadow:var(--glow-duo);animation:c218-grad-shift 5s ease infinite}
.btn-duo:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(232,23,122,.5),0 0 80px rgba(41,121,255,.3)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--muted)}
.btn-ghost:hover{border-color:var(--white);color:var(--white)}
.btn-sm{padding:.55rem 1.3rem;font-size:.85rem}
.btn-xs{padding:.4rem 1rem;font-size:.75rem}
.btn-block{width:100%}

/* ── GLASS CARDS ──────────────────────────────────────────────── */
.glass{
  background:rgba(14,9,24,.55);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--border);
  position:relative;
}
.glass-pk{border-color:var(--border-pk)}
.glass-bl{border-color:var(--border-bl)}
.glass-grad{position:relative}
.glass-grad::before{
  content:'';position:absolute;inset:0;padding:1px;
  background:var(--grad-duo);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}

/* ── CARD UTILITIES ───────────────────────────────────────────── */
.card{background:var(--s2);border:1px solid var(--border);padding:1.5rem;transition:all var(--t-base)}
.card-hover:hover{border-color:var(--pink4);box-shadow:var(--glow-pk);transform:translateY(-3px)}
.card-hover-bl:hover{border-color:var(--blue4);box-shadow:var(--glow-bl);transform:translateY(-3px)}
.card-hover-duo:hover{box-shadow:var(--glow-duo);transform:translateY(-3px)}

/* ── BADGES & TAGS ────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-pill)}
.badge-pk{background:var(--pink3);color:var(--pink2);border:1px solid var(--border-pk)}
.badge-bl{background:var(--blue3);color:var(--blue2);border:1px solid var(--border-bl)}
.badge-gr{background:rgba(0,230,118,.12);color:var(--green);border:1px solid rgba(0,230,118,.25)}
.badge-am{background:rgba(255,179,0,.12);color:var(--amber);border:1px solid rgba(255,179,0,.25)}
.badge-rd{background:rgba(255,61,61,.12);color:var(--red);border:1px solid rgba(255,61,61,.25)}
.badge-live::before{content:'';width:6px;height:6px;background:var(--red);border-radius:50%;animation:c218-blink 1.4s infinite;box-shadow:var(--glow-rd)}

/* ── INPUTS ───────────────────────────────────────────────────── */
.inp,.sel,.txa{
  width:100%;padding:.85rem 1rem;
  background:var(--s1);border:1px solid var(--border);color:var(--white);
  font-size:.95rem;transition:all var(--t-fast);outline:none;border-radius:0;
}
.inp:focus,.sel:focus,.txa:focus{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink3)}
.inp.bl:focus,.sel.bl:focus,.txa.bl:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue3)}
.lbl{display:block;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}

/* ── TOGGLE / SWITCH ──────────────────────────────────────────── */
.swt{position:relative;display:inline-block;width:46px;height:24px}
.swt input{display:none}
.swt-s{position:absolute;inset:0;background:var(--s3);border:1px solid var(--border);border-radius:24px;cursor:pointer;transition:all var(--t-fast)}
.swt-s::before{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--muted);border-radius:50%;transition:all var(--t-fast)}
.swt input:checked + .swt-s{background:var(--pink3);border-color:var(--pink)}
.swt input:checked + .swt-s::before{transform:translateX(22px);background:var(--pink);box-shadow:var(--glow-pk)}

/* ── TOAST ────────────────────────────────────────────────────── */
#c218-toasts{position:fixed;top:1.5rem;right:1.5rem;z-index:10000;display:flex;flex-direction:column;gap:.6rem;pointer-events:none}
.c218-toast{
  pointer-events:auto;min-width:280px;max-width:380px;
  padding:.9rem 1.1rem;background:var(--s2);border:1px solid var(--border);
  border-left:3px solid var(--pink);
  box-shadow:var(--sh-md);animation:c218-slideR .35s var(--t-base);
  display:flex;align-items:start;gap:.7rem;font-size:.88rem;
}
.c218-toast.ok{border-left-color:var(--green)}
.c218-toast.warn{border-left-color:var(--amber)}
.c218-toast.err{border-left-color:var(--red)}
.c218-toast.info{border-left-color:var(--blue)}
.c218-toast i{font-size:1.05rem;flex-shrink:0;margin-top:1px}
.c218-toast.ok i{color:var(--green)} .c218-toast.warn i{color:var(--amber)}
.c218-toast.err i{color:var(--red)}  .c218-toast.info i{color:var(--blue2)}
.c218-toast.fadeout{opacity:0;transform:translateX(110%);transition:all .3s}

/* ── LOADING / SKELETON ───────────────────────────────────────── */
.spinner{width:32px;height:32px;border:2px solid var(--border);border-top-color:var(--pink);border-radius:50%;animation:c218-spin 1s linear infinite}
.spinner.bl{border-top-color:var(--blue)}
.skel{background:linear-gradient(90deg,var(--s2) 0%,var(--s3) 50%,var(--s2) 100%);background-size:200% 100%;animation:c218-shimmer 1.4s ease-in-out infinite;border-radius:var(--r-sm)}

/* ── DIVIDERS ─────────────────────────────────────────────────── */
.div-h{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:2rem 0}
.div-h-pk{background:linear-gradient(90deg,transparent,var(--pink),transparent)}
.div-h-bl{background:linear-gradient(90deg,transparent,var(--blue),transparent)}
.div-h-duo{background:linear-gradient(90deg,transparent,var(--pink),var(--violet),var(--blue),transparent)}

/* ── HOVER GLOW UTILITY (Mouse-Tracking via JS) ──────────────── */
.hov-glow{position:relative;overflow:hidden}
.hov-glow::before{
  content:'';position:absolute;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,var(--pink3) 0%,transparent 70%);
  pointer-events:none;opacity:0;transition:opacity var(--t-fast);
  left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);
}
.hov-glow:hover::before{opacity:1}
.hov-glow.bl::before{background:radial-gradient(circle,var(--blue3) 0%,transparent 70%)}

/* ── COMMAND PALETTE (⌘K) ─────────────────────────────────────── */
#c218-cmdk{position:fixed;inset:0;z-index:9990;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;background:rgba(4,2,10,.7);backdrop-filter:blur(8px);animation:c218-fadeIn .2s}
#c218-cmdk.show{display:flex}
.cmdk-box{width:min(640px,92vw);background:var(--s2);border:1px solid var(--border-pk);box-shadow:var(--sh-lg),var(--glow-duo);overflow:hidden;animation:c218-fadeUp .25s}
.cmdk-inp-wrap{display:flex;align-items:center;gap:.8rem;padding:1.1rem 1.3rem;border-bottom:1px solid var(--border)}
.cmdk-inp-wrap i{color:var(--pink2);font-size:1.1rem}
.cmdk-inp{flex:1;background:transparent;border:none;outline:none;font-size:1.05rem;color:var(--white)}
.cmdk-list{max-height:50vh;overflow-y:auto;padding:.4rem}
.cmdk-item{display:flex;align-items:center;gap:.9rem;padding:.75rem 1rem;cursor:pointer;border-radius:var(--r-sm);transition:all var(--t-fast)}
.cmdk-item:hover,.cmdk-item.act{background:var(--pink3)}
.cmdk-item i{color:var(--blue2);width:18px}
.cmdk-item .cmdk-l{flex:1}
.cmdk-item .cmdk-l b{display:block;font-weight:500}
.cmdk-item .cmdk-l span{display:block;font-size:.78rem;color:var(--muted)}
.cmdk-item kbd{font-family:monospace;font-size:.7rem;padding:.15rem .45rem;background:var(--s3);border:1px solid var(--border);border-radius:3px;color:var(--muted)}

/* ── MODAL ────────────────────────────────────────────────────── */
.c218-modal{position:fixed;inset:0;z-index:9980;display:none;align-items:center;justify-content:center;padding:2rem;background:rgba(4,2,10,.8);backdrop-filter:blur(6px);animation:c218-fadeIn .2s}
.c218-modal.show{display:flex}
.c218-modal-box{width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--s2);border:1px solid var(--border-pk);box-shadow:var(--sh-lg);animation:c218-fadeUp .3s}
.c218-modal-h{padding:1.3rem 1.6rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.c218-modal-h h3{font-family:"Bebas Neue",sans-serif;font-size:1.4rem;letter-spacing:.06em;color:var(--white)}
.c218-modal-h button{color:var(--muted);font-size:1.3rem;transition:color var(--t-fast)}
.c218-modal-h button:hover{color:var(--white)}
.c218-modal-b{padding:1.6rem}
.c218-modal-f{padding:1.1rem 1.6rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:.6rem}

/* ── BACKGROUND DECOR (Optional, sparingly) ──────────────────── */
.bg-grain::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-orbs::before,.bg-orbs::after{content:'';position:absolute;width:480px;height:480px;border-radius:50%;filter:blur(120px);opacity:.18;animation:c218-float 12s ease-in-out infinite}
.bg-orbs::before{background:var(--pink);top:-10%;left:-10%}
.bg-orbs::after{background:var(--blue);bottom:-10%;right:-10%;animation-delay:-6s}

/* ── ACCESSIBILITY ────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal,.reveal-l,.reveal-r,.reveal-s{opacity:1 !important;transform:none !important}
}

/* ── PRINT ────────────────────────────────────────────────────── */
@media print{
  body{background:#fff;color:#000}
  .glass,.card{background:#fff;border:1px solid #ccc;box-shadow:none}
  .btn{display:none}
}