/* =========================================================
   Angels / FinalDragonBeatz – Meredian GER
   FARBEN & SCHRIFTEN: hier oben einfach ändern!
   ========================================================= */
:root {
  /* Farben passend zum Logo: Neon-Violett + Chrom-Silber auf Schwarz */
  --bg:          #07040c;   /* Seitenhintergrund (fast schwarz) */
  --bg-2:        #120a1e;   /* Flächen / Karten */
  --bg-3:        #1c1030;   /* Hover-Flächen */
  --nav-bg:      #0b0613;   /* Navigationsleiste */
  --dropdown:    #1d0b33;   /* Dropdown-Hintergrund */
  --dropdown-hover: #4a1580;
  --silver:      #d9d9e6;   /* Akzent 1: Chrom-Silber (Überschriften, Buttons) */
  --silver-2:    #ffffff;   /* helles Silber/Weiß für Verläufe */
  --silver-dark: #8c8ca3;   /* dunkles Silber für Verläufe */
  --neon-pink:   #e040fb;   /* Akzent 2: Neon-Pink/Lila */
  --neon:        #b026ff;   /* Akzent 3: Neon-Violett (Hauptfarbe) */
  --gold:        #f5c451;   /* nur noch sparsam (Datums-Badges) */
  --text:        #ece8f4;   /* Fließtext */
  --muted:       #a59cba;   /* gedämpfter Text */
  --border:      rgba(176,38,255,.28);
  --chrome:      linear-gradient(180deg, #ffffff 0%, #d9d9e6 45%, #8c8ca3 55%, #e9e9f2 100%);
  --radius:      14px;
  --font:        'Poppins', 'Segoe UI', Arial, Helvetica, sans-serif;
  --maxw:        1150px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--text); line-height: 1.65;
  background:
    radial-gradient(ellipse at 15% -10%, rgba(176,38,255,.25), transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(224,64,251,.16), transparent 50%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; }
a { color: var(--silver); }
a:hover { color: var(--neon-pink); }
img, svg { max-width: 100%; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- Header / Navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(180deg, var(--nav-bg), rgba(18,8,31,.92));
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--silver), var(--neon-pink), var(--neon)) 1;
  backdrop-filter: blur(6px);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 66px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-logo { height: 64px; width: auto; display: block; margin: 4px 0; filter: drop-shadow(0 0 8px rgba(176,38,255,.55)); transition: filter .2s; }
.brand:hover .brand-logo { filter: drop-shadow(0 0 14px rgba(224,64,251,.85)); }
.brand-text { line-height: 1.1; }
.brand-text strong { display: block; font-weight: 800; font-size: 1.02rem; letter-spacing: .5px;
  background: linear-gradient(90deg, #fff, var(--silver) 55%, var(--neon-pink));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-text small { color: var(--muted); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; }

.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav > ul { display: flex; gap: 2px; align-items: center; }
.brand-text strong { white-space: nowrap; }
.main-nav li { position: relative; }
.main-nav a, .main-nav button.dd-toggle {
  display: block; padding: 10px 11px; color: var(--text); text-decoration: none; white-space: nowrap;
  font: 700 .82rem var(--font); text-transform: uppercase; letter-spacing: .6px;
  background: none; border: 0; cursor: pointer; border-radius: 8px;
}
.main-nav > ul > li > a:hover, .main-nav button.dd-toggle:hover,
.main-nav li.open > button.dd-toggle, .main-nav a.active, .main-nav button.active {
  color: var(--silver); background: rgba(176,38,255,.08);
}
.dd-toggle .arrow { display: inline-block; margin-left: 4px; font-size: .7em; transition: transform .2s; }
li.open > .dd-toggle .arrow { transform: rotate(180deg); }
.nav-radio { background: linear-gradient(90deg, var(--neon-pink), var(--neon)) !important; color: #fff !important; box-shadow: 0 0 14px rgba(224,64,251,.45); }
.nav-radio:hover { filter: brightness(1.15); }

.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 260px; padding: 6px 0 !important;
  background: var(--dropdown); border: 1px solid var(--border); border-top: 3px solid var(--silver);
  border-radius: 0 0 10px 10px; box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 18px rgba(176,38,255,.25);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: .18s ease;
  max-height: 75vh; overflow-y: auto;
}
.dropdown a { font-size: .8rem !important; padding: 9px 18px !important; border-radius: 0 !important; color: #fff !important; }
.dropdown a:hover { background: var(--dropdown-hover) !important; color: var(--silver-2) !important; padding-left: 24px !important; }
@media (hover: hover) and (min-width: 1201px) {
  .main-nav li.has-dd:hover > .dropdown { opacity: 1; visibility: visible; transform: none; }
}
.main-nav li.open > .dropdown { opacity: 1; visibility: visible; transform: none; }

.hamburger { display: none; background: none; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.hamburger span { display: block; width: 24px; height: 3px; margin: 4px 0; background: var(--silver); border-radius: 2px; transition: .25s; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1200px) {
  .hamburger { display: block; }
  .main-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--nav-bg);
    border-bottom: 2px solid var(--neon-pink); display: none; max-height: calc(100vh - 66px); overflow-y: auto; }
  .main-nav.open { display: block; }
  .main-nav > ul { flex-direction: column; align-items: stretch; padding: 10px 14px 16px; }
  .main-nav a, .main-nav button.dd-toggle { width: 100%; text-align: left; padding: 13px 12px; }
  .dropdown { position: static; display: none; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border-radius: 8px; max-height: none; margin: 2px 0 8px; }
  .main-nav li.open > .dropdown { display: block; }
  .nav-radio { text-align: center !important; margin-top: 6px; }
  .brand-text strong { font-size: .9rem; }
  .brand-logo { height: 52px; }
}
@media (max-width: 420px) { .brand-text small { display: none; } .brand-text strong { font-size: .8rem; white-space: normal; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 70px 0 60px; text-align: center; }
.hero-logo { position: relative; width: min(520px, 86%); margin: 0 auto 6px; }
.hero-logo::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(176,38,255,.55), rgba(224,64,251,.18) 45%, transparent 70%); filter: blur(30px);
  animation: pulse 5s ease-in-out infinite; }
.hero-logo img { width: 100%; height: auto; display: block; }
@keyframes pulse { 0%,100% { opacity: .7; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.hero { isolation: isolate; padding-top: 30px; }
.member-card { display: block; max-width: 700px; margin: 0 auto 24px; border-radius: 22px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(217,217,230,.25), 0 0 34px rgba(176,38,255,.45); transition: .25s; }
.member-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 46px rgba(224,64,251,.6); }
.member-card img { display: block; width: 100%; height: auto; }
.hero h1 { font-size: clamp(1.8rem, 5vw, 3.2rem); line-height: 1.15; margin: 0 0 10px; font-weight: 800;
  background: linear-gradient(90deg, var(--silver-2), var(--silver) 40%, var(--neon-pink) 75%, var(--neon));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 30px rgba(176,38,255,.15); }
.hero .tagline { color: var(--muted); font-size: 1.1rem; max-width: 640px; margin: 0 auto 26px; }
.page-hero { padding: 46px 0 26px; text-align: center; }
.page-hero h1 { margin: 0 0 6px; font-size: clamp(1.6rem, 4vw, 2.5rem); color: var(--silver); text-transform: uppercase; letter-spacing: 1px;
  text-shadow: 0 0 18px rgba(176,38,255,.35); }
.page-hero p { color: var(--muted); margin: 0 auto; max-width: 680px; }

/* glow animation */
.glow { animation: glow 4s ease-in-out infinite; }
@keyframes glow { 0%,100% { filter: drop-shadow(0 0 8px rgba(176,38,255,.5)); } 50% { filter: drop-shadow(0 0 22px rgba(224,64,251,.7)); } }
@media (prefers-reduced-motion: reduce) { .glow, .hero-logo::before { animation: none; } html { scroll-behavior: auto; } }

/* ---------- Buttons ---------- */
.btn { display: inline-block; padding: 12px 24px; border-radius: 999px; font-weight: 700; text-decoration: none;
  text-transform: uppercase; letter-spacing: .6px; font-size: .88rem; transition: .2s; border: 2px solid transparent; }
.btn-chrome { background: var(--chrome); color: #14081f; box-shadow: 0 0 16px rgba(176,38,255,.55), inset 0 0 0 1px rgba(255,255,255,.6); }
.btn-chrome:hover { color: #14081f; transform: translateY(-2px); box-shadow: 0 0 28px rgba(224,64,251,.8), inset 0 0 0 1px #fff; }
.btn-neon { background: linear-gradient(90deg, var(--neon-pink), var(--neon)); color: #fff; box-shadow: 0 0 16px rgba(224,64,251,.45); }
.btn-neon:hover { color: #fff; transform: translateY(-2px); }
.btn-outline { border-color: var(--silver); color: var(--silver); }
.btn-outline:hover { background: var(--silver); color: #14081f; }
.btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Sections & Cards ---------- */
section { padding: 34px 0; }
.section-title { text-align: center; font-size: 1.6rem; margin: 0 0 24px; text-transform: uppercase; letter-spacing: 1px; color: var(--silver); }
.section-title::after { content: ""; display: block; width: 90px; height: 3px; margin: 10px auto 0;
  background: linear-gradient(90deg, var(--silver), var(--neon-pink)); border-radius: 2px; }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.card { background: linear-gradient(160deg, var(--bg-2), #0f0720); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; transition: .2s; position: relative; overflow: hidden; }
.card:hover { transform: translateY(-3px); border-color: var(--neon-pink); box-shadow: 0 0 22px rgba(224,64,251,.25); }
.card h3 { margin: 0 0 8px; color: var(--silver-2); font-size: 1.1rem; }
.card p { margin: 0 0 12px; color: var(--muted); font-size: .95rem; }
.card .icon { font-size: 1.8rem; line-height: 1; margin-bottom: 10px; display: block; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.badge-soon { background: rgba(176,38,255,.18); color: #e3c6ff; border: 1px solid rgba(176,38,255,.45); }
.badge-date { background: rgba(245,196,81,.12); color: var(--gold); border: 1px solid rgba(245,196,81,.35); }
.panel { background: linear-gradient(135deg, rgba(176,38,255,.15), rgba(224,64,251,.10)); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px; }
.two-col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: center; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }

/* Radio */
.radio-box { text-align: center; }
.radio-box .eq { display: flex; gap: 5px; justify-content: center; align-items: flex-end; height: 40px; margin: 6px 0 16px; }
.radio-box .eq span { width: 7px; background: linear-gradient(var(--neon-pink), var(--silver)); border-radius: 3px; animation: eq 1s ease-in-out infinite; }
.radio-box .eq span:nth-child(2){animation-delay:.2s}.radio-box .eq span:nth-child(3){animation-delay:.4s}
.radio-box .eq span:nth-child(4){animation-delay:.1s}.radio-box .eq span:nth-child(5){animation-delay:.3s}
@keyframes eq { 0%,100% { height: 8px; } 50% { height: 40px; } }
audio { width: 100%; max-width: 420px; margin-top: 10px; }

/* Team */
.team-card { text-align: center; }
.avatar { width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center;
  font-size: 2.2rem; font-weight: 800; color: #14081f; background: linear-gradient(135deg, var(--silver-2), var(--silver) 50%, var(--neon-pink));
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--silver), 0 0 20px rgba(176,38,255,.5); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.role { display: inline-block; margin-bottom: 10px; }
.role-admin { background: var(--silver); color: #14081f; }
.role-dj    { background: var(--neon-pink); color: #fff; }
.role-mod   { background: var(--neon); color: #fff; }

/* Hilfe */
.help-layout { display: grid; grid-template-columns: 270px 1fr; gap: 28px; align-items: start; }
.help-toc { position: sticky; top: 86px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; max-height: calc(100vh - 110px); overflow-y: auto; }
.help-toc h2 { font-size: .9rem; text-transform: uppercase; color: var(--silver); margin: 4px 8px 10px; letter-spacing: 1px; }
.help-toc ol { margin: 0; padding: 0 0 0 26px; font-size: .86rem; }
.help-toc li { margin: 3px 0; }
.help-toc a { color: var(--text); text-decoration: none; display: block; padding: 3px 4px; border-radius: 6px; }
.help-toc a:hover { color: var(--silver); background: rgba(176,38,255,.08); }
.help-section { background: var(--bg-2); border: 1px solid var(--border); border-left: 4px solid var(--neon-pink);
  border-radius: var(--radius); padding: 22px 26px; margin-bottom: 22px; scroll-margin-top: 90px; }
.help-section h2 { margin: 0 0 10px; color: var(--silver-2); font-size: 1.3rem; }
.help-section h3 { color: var(--silver); font-size: 1rem; margin: 18px 0 6px; }
.help-section ul, .help-section ol { padding-left: 22px; }
.help-section li { margin: 4px 0; }
.tip { background: rgba(176,38,255,.08); border: 1px dashed var(--border); border-radius: 10px; padding: 10px 14px; font-size: .92rem; }
.fill { background: rgba(224,64,251,.15); color: #f3c4ff; padding: 0 5px; border-radius: 4px; font-style: italic; }
.back-top { font-size: .82rem; }
code { background: #000; color: var(--silver-2); padding: 1px 6px; border-radius: 4px; font-size: .9em; }
dl.glossar dt { font-weight: 700; color: var(--silver); margin-top: 10px; }
dl.glossar dd { margin: 2px 0 0 0; color: var(--text); }
@media (max-width: 900px) { .help-layout { grid-template-columns: 1fr; } .help-toc { position: static; max-height: none; } }

/* Text-Seiten (Impressum/Datenschutz) */
.prose { max-width: 820px; margin: 0 auto; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 32px; }
.prose h2 { color: var(--silver); font-size: 1.2rem; margin-top: 26px; }
.prose h2:first-child { margin-top: 0; }

/* Footer */
.site-footer { margin-top: 40px; background: var(--nav-bg); border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--neon), var(--neon-pink), var(--silver)) 1; padding: 26px 0; font-size: .88rem; color: var(--muted); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.site-footer a { color: var(--muted); text-decoration: none; margin-left: 16px; }
.site-footer a:first-child { margin-left: 0; }
.site-footer a:hover { color: var(--silver); }
.section-title.left { text-align: left; }
.section-title.left::after { margin-left: 0; }

/* ---------- Login / Nutzer ---------- */
.nav-login { display: inline-flex !important; align-items: center; gap: 6px; background: #5865f2 !important; color: #fff !important; }
.nav-login:hover { filter: brightness(1.15); }
.nav-locked { color: var(--silver-2) !important; }
.user-btn { display: inline-flex !important; align-items: center; gap: 8px; text-transform: none !important; }
.user-avatar { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--silver); }
.user-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-right { left: auto; right: 0; min-width: 220px; }
.dd-info { padding: 10px 18px; font-size: .8rem; color: var(--muted); border-bottom: 1px solid var(--border); }
.dd-info strong { color: var(--silver-2); }
.dd-logout { width: 100%; text-align: left; background: none; border: 0; color: #fff; font: 700 .8rem var(--font);
  text-transform: uppercase; padding: 10px 18px; cursor: pointer; }
.dd-logout:hover { background: var(--dropdown-hover); color: var(--silver-2); }
.no-access { text-align: center; padding: 70px 0; }
.no-access .lock { font-size: 4rem; display: block; margin-bottom: 10px; filter: drop-shadow(0 0 16px rgba(224,64,251,.6)); }
.no-access h1 { color: var(--neon-pink); text-transform: uppercase; margin: 0 0 10px; }
.area-banner { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: rgba(224,64,251,.15); border: 1px solid var(--neon-pink); color: #f3c4ff; margin-bottom: 12px; text-transform: uppercase; }
.notes { width: 100%; min-height: 160px; background: #0b0614; color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 12px; font: .95rem var(--font); }
table.simple { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.simple th, table.simple td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; }
table.simple th { color: var(--silver); }
@media (max-width: 1200px) { .dropdown-right { min-width: 0; } .user-name { max-width: none; } }

/* ---------- Team (aus team.json) ---------- */
.team-card .avatar { background: linear-gradient(135deg, #fff, var(--silver) 40%, var(--rc, var(--neon)));
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--rc, var(--neon)), 0 0 22px var(--rc, var(--neon)); overflow: hidden; }
.team-discord { font-size: .85rem !important; margin-bottom: 6px !important; }

/* ---------- Admin ---------- */
.admin-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .admin-layout { grid-template-columns: 1fr; } }
.admin-form label { display: block; font-size: .85rem; color: var(--silver); font-weight: 600; margin-bottom: 12px; }
.admin-form input[type=text], .admin-form input[type=url], .admin-form textarea, .admin-form input[type=file] {
  display: block; width: 100%; margin-top: 5px; padding: 10px 12px; border-radius: 10px; font: .95rem var(--font);
  background: #07040c; color: var(--text); border: 1px solid var(--border); }
.admin-form input:focus, .admin-form textarea:focus { outline: none; border-color: var(--neon-pink); box-shadow: 0 0 0 3px rgba(224,64,251,.2); }
.admin-form fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 4px; margin: 0 0 14px; }
.admin-form legend { color: var(--silver); font-weight: 700; font-size: .85rem; padding: 0 6px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.swatch { margin: 0 !important; cursor: pointer; }
.swatch input[type=radio] { position: absolute; opacity: 0; }
.swatch span { display: block; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); }
.swatch input:checked + span { border-color: #fff; box-shadow: 0 0 0 3px var(--neon-pink); }
.swatch.custom { display: inline-flex !important; align-items: center; gap: 6px; font-weight: 400 !important; }
.swatch.custom input { width: 38px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.cur-img { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.cur-img img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--silver); }
label.inline { display: inline-flex !important; gap: 6px; align-items: center; margin: 0 !important; }
.alert { padding: 12px 16px; border-radius: 10px; margin: 0 0 18px; }
.alert-ok { background: rgba(46,229,157,.12); border: 1px solid rgba(46,229,157,.5); color: #b8ffe0; }
.alert-err { background: rgba(255,61,90,.12); border: 1px solid rgba(255,61,90,.55); color: #ffc4cd; }
.admin-list { list-style: none; margin: 0; padding: 0; }
.admin-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.mini-av { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid; display: grid; place-items: center; overflow: hidden;
  font-weight: 800; color: #fff; background: #1c1030; }
.mini-av img { width: 100%; height: 100%; object-fit: cover; }
.who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who small { color: var(--muted); display: flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.acts { display: flex; gap: 4px; align-items: center; }
.acts form { display: flex; gap: 4px; margin: 0; }
.ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: #07040c;
  color: var(--silver); cursor: pointer; text-decoration: none; font-size: .85rem; }
.ic:hover:not([disabled]) { border-color: var(--neon-pink); color: #fff; }
.ic[disabled] { opacity: .3; cursor: default; }
.ic.danger:hover { border-color: #ff3d5a; background: rgba(255,61,90,.15); }

/* ---------- Mere-Transfer ---------- */
.tr-drop { position: relative; display: flex !important; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; margin-bottom: 14px !important;
  border: 2px dashed rgba(176,38,255,.55); border-radius: 14px; background: rgba(176,38,255,.07); text-align: center; cursor: pointer; transition: .2s; }
.tr-drop:hover { border-color: var(--neon-pink); background: rgba(224,64,251,.1); }
.tr-drop-ic { font-size: 1.8rem; }
.tr-drop small { color: var(--muted); font-weight: 400; }
.tr-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0 !important; }
.admin-form select { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; border-radius: 10px; font: .95rem var(--font);
  background: #07040c; color: var(--text); border: 1px solid var(--border); }
.tr-list { list-style: none; margin: 0; padding: 0; }
.tr-list li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.tr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-main small { color: var(--muted); font-size: .78rem; }
.tr-note { color: var(--silver) !important; font-style: italic; }
.tr-linkrow { display: flex; gap: 6px; margin-top: 6px; }
.tr-linkrow input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: #07040c; color: var(--silver); font: .8rem monospace; }
.btn-sm { padding: 7px 14px; font-size: .75rem; }
.tr-dl { max-width: 520px; margin: 0 auto; }
.tr-dl-name { font-size: 1.2rem; font-weight: 700; color: #fff; word-break: break-all; margin: 0 0 4px; }
.badge-live { background: rgba(46,229,157,.14); color: #b8ffe0; border: 1px solid rgba(46,229,157,.5); }
.tool-card .btn { margin-left: 8px; vertical-align: middle; }
/* Tool-Unterseiten */
.crumbs { font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
.crumbs a { color: var(--silver); text-decoration: none; }
.crumbs a:hover { color: var(--neon-pink); }
.tool-icon { font-size: 2.6rem; display: block; margin-bottom: 6px; filter: drop-shadow(0 0 14px rgba(176,38,255,.7)); }
.soon-box { text-align: center; padding: 34px 26px; }
.soon-box .soon-ic { font-size: 3rem; display: block; margin-bottom: 8px; animation: pulse 3s ease-in-out infinite; }
.soon-box h2 { margin: 0 0 8px; color: var(--silver); text-transform: uppercase; letter-spacing: 1px; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 22px; }
.ph-grid .card h3 { font-size: 1rem; }
.tool-wrap { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .tool-wrap { grid-template-columns: 1fr; } }
.tool-side label { display: block; font-size: .82rem; color: var(--silver); font-weight: 600; margin-bottom: 10px; }
.tool-side input[type=number], .tool-side select, .tool-side input[type=text] { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border-radius: 8px;
  background: #07040c; color: var(--text); border: 1px solid var(--border); font: .9rem var(--font); }
.tool-side input[type=range] { width: 100%; accent-color: var(--neon); }
.tool-side .row2 { gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.chip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: #07040c; color: var(--silver); cursor: pointer; font: 600 .76rem var(--font); }
.chip:hover, .chip.on { border-color: var(--neon-pink); color: #fff; background: rgba(176,38,255,.25); }
.pr-stage { position: relative; min-height: 340px; display: grid; place-items: center; border-radius: 14px; overflow: hidden;
  background: repeating-conic-gradient(#1a1027 0 25%, #120a1e 0 50%) 0 0 / 22px 22px; border: 1px solid var(--border); }
.pr-stage canvas { max-width: 100%; max-height: 70vh; display: block; box-shadow: 0 0 24px rgba(176,38,255,.4); }
.pr-empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.pr-empty .tr-drop { max-width: 420px; margin: 0 auto; }
.pr-info { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; margin-top: 12px; font-size: .85rem; color: var(--muted); }
.pr-info b { color: #fff; }
.pe-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pe-toolbar button, .pe-toolbar label.chip { min-width: 36px; }
.pe-toolbar input[type=color] { width: 30px; height: 26px; border: 0; padding: 0; background: none; vertical-align: middle; }
.pe-text { width: 100%; min-height: 300px; resize: vertical; padding: 14px; border-radius: 12px; border: 1px solid var(--border); background: #07040c; color: var(--text);
  font: .92rem/1.55 ui-monospace, Consolas, monospace; }
.pe-preview { width: 100%; min-height: 300px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.pe-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .pe-cols { grid-template-columns: 1fr; } }
.pe-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: .82rem; color: var(--muted); align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.seg button { background: #07040c; color: var(--silver); border: 0; padding: 7px 14px; cursor: pointer; font: 700 .78rem var(--font); }
.seg button.on { background: linear-gradient(90deg, var(--neon), var(--neon-pink)); color: #fff; }
.tr-drop.over { border-color: var(--neon-pink); background: rgba(224,64,251,.15); }
.tr-progress { margin: 4px 0 14px; }
.tr-bar { height: 14px; border-radius: 999px; background: #07040c; border: 1px solid var(--border); overflow: hidden; }
.tr-bar span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .25s;
  background: linear-gradient(90deg, var(--neon), var(--neon-pink), #fff); box-shadow: 0 0 12px rgba(224,64,251,.8); }
.tr-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: .82rem; color: var(--muted); }
.tr-stats b { color: #fff; }
.tr-status { margin: 6px 0 0; font-size: .82rem; color: var(--silver); min-height: 1.2em; }
.tr-status.err { color: #ffc4cd; }

/* Mere-Tools-Übersicht: 3–4 Karten zentriert, gleich breit */
.tools-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.tools-grid > .tool-card { flex: 0 1 300px; display: flex; flex-direction: column; align-items: flex-start; }
.tools-grid > .tool-card p { flex: 1; }
.tools-grid > .tool-card .badge { margin-bottom: 14px; }
.tools-grid > .tool-card .btn { margin-left: 0; }
@media (max-width: 620px) { .tools-grid > .tool-card { flex-basis: 100%; } }

/* PicResize: Größenlimit + Bild-Links */
.pr-good { color: #2ee59d; }
.pr-bad { color: #ff5a7a; }
.pr-note { margin: 8px 0 0; color: var(--muted); font-size: .85rem; min-height: 1em; }
.pr-upbox { margin-top: 10px; }
.pr-upmsg { margin: 8px 0 0; font-size: .85rem; min-height: 1em; }
.pr-hint { margin: 12px 0 0; color: var(--muted); font-size: .85rem; }
.pr-result { margin-top: 18px; padding: 16px; border: 1px solid var(--neon-pink); border-radius: 14px; background: rgba(176,38,255,.10); }
.pr-result h3 { margin: 0 0 10px; color: var(--silver-2); }
.pr-result-in { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: start; }
.pr-result label { display: block; font-size: .78rem; color: var(--muted); margin: 6px 0 4px; text-transform: uppercase; letter-spacing: .5px; }
@media (max-width: 620px) { .pr-result-in { grid-template-columns: 1fr; } }
.pr-thumb { display: block; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border);
  background: repeating-conic-gradient(#2a1840 0 25%, #1a0f2b 0 50%) 0 0 / 16px 16px; flex: 0 0 auto; }
.pr-thumb.big { width: 140px; height: 140px; }
.pr-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pr-mylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pr-mylist li { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: rgba(0,0,0,.2); }
.pr-meta { flex: 1; min-width: 0; }
.pr-meta strong { display: block; color: var(--silver-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-meta small { color: var(--muted); display: block; margin-bottom: 6px; }
.pr-myempty { color: var(--muted); }

/* ===== Bilderschutz (Admin › Bilderschutz) – 100 % Schutz ist technisch unmöglich ===== */
body.img-protect img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.img-protect .no-protect img { -webkit-user-drag: auto; user-select: auto; -webkit-touch-callout: default; }
body.img-protect .img-guard { position: relative; }
body.img-protect .img-guard::after { content: ""; position: absolute; inset: 0; z-index: 3; background: transparent; border-radius: inherit; }
/* Wasserzeichen (nur Team-, News- und ähnliche Bilder – nicht Logo/PicResize) */
body.img-protect.wm-on .wm { overflow: hidden; }
body.img-protect.wm-on .wm::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22120%22%20viewBox%3D%220%200%20220%20120%22%3E%3Cg%20transform%3D%22rotate%28-28%20110%2060%29%22%20fill%3D%22%23ffffff%22%20font-family%3D%22Poppins%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%3E%3Ctext%20x%3D%22110%22%20y%3D%2252%22%20font-size%3D%2215%22%20text-anchor%3D%22middle%22%3EAngels%20/%20FinalDragonBeatz%3C/text%3E%3Ctext%20x%3D%22110%22%20y%3D%2274%22%20font-size%3D%2211%22%20text-anchor%3D%22middle%22%20fill%3D%22%23e040fb%22%3EMeredian%20GER%3C/text%3E%3C/g%3E%3C/svg%3E"); background-size: 150px auto; background-repeat: repeat;
  opacity: var(--wm-op, .18); mix-blend-mode: screen; pointer-events: auto; }
.team-card .avatar.wm::after { background-size: 90px auto; }
/* Unschärfe bei Fokusverlust / Druck-Taste */
body.blur-on img, body.blur-on .team-card .avatar { transition: filter .15s ease; }
body.blur-on.is-blurred .img-guard img, body.blur-on.is-blurred .wm img, body.blur-on.is-blurred .rich img, body.blur-on.is-blurred .member-card img { filter: blur(20px); }
@media print {
  body.img-protect img, body.img-protect picture, body.img-protect .team-card .avatar img { visibility: hidden !important; }
}
/* News-Bilder */
.news-card .news-img { margin: -4px -4px 14px; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: #0b0614; }
.news-card .news-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rich > :first-child { margin-top: 0; }
.card .rich p { margin: 0 0 12px; color: var(--muted); font-size: .95rem; }
.rich img { max-width: 100%; height: auto; border-radius: 10px; }
.card-wide { grid-column: 1 / -1; }

/* ===== Countdown ===== */
.countdown { margin: 4px auto 22px; max-width: 640px; text-align: center; transition: opacity .8s ease, transform .8s ease; }
.countdown.is-hiding { opacity: 0; transform: scale(.96); }
.cd-title { margin: 0 0 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 3px; font-size: .95rem;
  background: linear-gradient(90deg, var(--silver), #fff, var(--neon-pink), var(--silver)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cd-cell { position: relative; padding: 14px 6px 10px; border-radius: 16px; background: linear-gradient(160deg, rgba(176,38,255,.22), rgba(12,6,22,.9) 60%);
  border: 1px solid rgba(224,64,251,.55); box-shadow: 0 0 18px rgba(176,38,255,.35), inset 0 1px 0 rgba(255,255,255,.25); overflow: hidden; }
.cd-cell::before { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255,255,255,.10), transparent); pointer-events: none; }
.cd-num { display: block; font-size: clamp(1.8rem, 6vw, 2.9rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 0%, #d9d9e6 45%, #8f8aa3 55%, #f2f2f8 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px rgba(224,64,251,.55)); }
.cd-lbl { display: block; margin-top: 6px; font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--neon-pink); font-weight: 700; }
.cd-cell.tick { animation: cdPulse .5s ease; }
@keyframes cdPulse { 0% { box-shadow: 0 0 30px rgba(224,64,251,.75), inset 0 1px 0 rgba(255,255,255,.3); } 100% { box-shadow: 0 0 18px rgba(176,38,255,.35), inset 0 1px 0 rgba(255,255,255,.25); } }
.cd-when { margin: 10px 0 0; color: var(--muted); font-size: .8rem; }
.cd-done { margin: 6px 0; font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 800; color: #fff; text-shadow: 0 0 18px var(--neon-pink), 0 0 36px var(--neon); animation: cdPulse 1.2s ease infinite alternate; }
.countdown.big { max-width: 760px; }
.countdown.big .cd-num { font-size: clamp(2.2rem, 9vw, 4.4rem); }
.countdown.big .cd-cell { padding: 20px 8px 14px; }
@media (max-width: 480px) { .cd-grid { gap: 7px; } .cd-lbl { font-size: .58rem; letter-spacing: 1px; } }
@media (prefers-reduced-motion: reduce) { .cd-cell.tick, .cd-done { animation: none; } }

/* ===== Coming-Soon-Seite ===== */
body.coming-soon { min-height: 100vh; display: flex; flex-direction: column; }
.cs-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 16px; }
.cs-logo { width: min(380px, 70vw); }
.cs-h1 { margin: 0 0 6px; font-size: clamp(1.7rem, 5vw, 3rem); font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  background: linear-gradient(90deg, #fff, var(--silver), var(--neon-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-sub { color: var(--muted); margin: 0 0 22px; }
.cs-foot { text-align: center; padding: 16px; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--border); }
.cs-foot a { color: var(--silver); }
.cs-adminbar { background: linear-gradient(90deg, #5a1182, #b026ff); color: #fff; text-align: center; font-size: .85rem; padding: 7px 12px; }
.cs-adminbar a { color: #fff; font-weight: 700; text-decoration: underline; }

/* ===== Admin-Tabs ===== */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.admin-tabs a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--silver); text-decoration: none; font-weight: 600; font-size: .9rem; background: rgba(0,0,0,.25); }
.admin-tabs a:hover { border-color: var(--neon-pink); }
.admin-tabs a.on { background: linear-gradient(135deg, var(--neon), var(--neon-pink)); color: #fff; border-color: transparent; box-shadow: 0 0 14px rgba(224,64,251,.45); }
.fmt-bar { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 4px; }
.fmt-bar button { padding: 4px 9px; border-radius: 6px; border: 1px solid var(--border); background: #120a1f; color: var(--silver); cursor: pointer; font-size: .8rem; }
.fmt-bar button:hover { border-color: var(--neon-pink); }
.admin-hint { color: var(--muted); font-size: .8rem; margin: 2px 0 10px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-table th, .admin-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.admin-table th { color: var(--silver); font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; }
.admin-table td small { color: var(--muted); }
.admin-scroll { overflow-x: auto; }
.switch-row { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
[hidden] { display: none !important; }

/* ===== News & Events – groß & auffällig ===== */
.news-section { padding: 70px 0; position: relative; }
.news-section::before { content: ""; position: absolute; inset: 20px 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(176,38,255,.18), transparent 60%); }
.news-title { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 10px; letter-spacing: 2px;
  background: linear-gradient(90deg, #fff, var(--silver) 40%, var(--neon-pink)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(224,64,251,.35)); }
.news-sub { text-align: center; color: var(--muted); font-size: 1.1rem; margin: 0 auto 34px; max-width: 640px; }
.news-section .news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 820px) { .news-section .news-grid { grid-template-columns: 1fr; gap: 22px; } }
.news-section .news-card { padding: 30px 30px 32px; border-radius: 22px; border-width: 1px; display: flex; flex-direction: column; align-items: flex-start;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.news-section .news-card:hover { transform: translateY(-6px); border-color: var(--neon-pink);
  box-shadow: 0 0 0 1px rgba(224,64,251,.6), 0 0 34px rgba(224,64,251,.55), 0 0 70px rgba(176,38,255,.35); }
.news-section .news-card .news-img { align-self: stretch; margin: -10px -10px 22px; aspect-ratio: 16 / 9; min-height: 280px; border-radius: 16px; }
.news-section .news-card .news-img img { transition: transform .4s ease; }
.news-section .news-card:hover .news-img img { transform: scale(1.04); }
.news-section .news-card .badge-date { font-size: .9rem; padding: 7px 16px; letter-spacing: 1px; box-shadow: 0 0 14px rgba(245,196,81,.2); }
.news-section .news-card h3 { font-size: clamp(1.35rem, 2.6vw, 1.6rem); margin: 16px 0 12px; line-height: 1.25; }
.news-section .news-card .rich, .news-section .news-card .rich p { font-size: 1.1rem; line-height: 1.65; }
.news-section .news-card .rich { flex: 1; }
.news-section .news-card .btn { margin-top: 10px; font-size: 1rem; padding: 12px 26px; }
@media (max-width: 820px) {
  .news-section { padding: 50px 0; }
  .news-section .news-card { padding: 22px 20px 24px; }
  .news-section .news-card .news-img { min-height: 0; margin: -6px -4px 18px; }
}
@media (min-width: 821px) { .news-section .news-grid > .news-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 15px); } }