/* ============================================================
   EMBERCITY – Shared Stylesheet
   Dark Minecraft-Server UI · Lava / Ember / Fire
   ============================================================ */

:root{
  /* Farbwelt – Lava / Ember */
  --bg:        #080302;
  --bg-2:      #0d0503;
  --bg-3:      #120704;
  --panel:     #160905;
  --panel-2:   #1a0d06;
  --panel-3:   #1e1108;
  --input-bg:  #100603;
  --line:      rgba(255,106,26,.14);
  --line-2:    rgba(255,106,26,.28);
  --line-soft: rgba(255,106,26,.07);

  --text:      #f5ece8;
  --muted:     #a07868;
  --muted-2:   #7a5a50;

  --cyan:      #ff6a1a;
  --cyan-2:    #ffb347;
  --blue:      #dc2626;
  --blue-2:    #b91c1c;
  --purple:    #dc2626;
  --purple-2:  #b91c1c;
  --violet:    #f87171;
  --amber:     #f97316;
  --amber-2:   #fb923c;
  --orange:    #ff6a1a;
  --green:     #22c55e;
  --red:       #ef4444;
  --pink:      #f97316;
  --gold:      #f59e0b;

  --radius:    14px;
  --radius-s:  10px;
  --radius-xs: 8px;

  --shadow:    0 18px 50px rgba(0,0,0,.6);
  --shadow-s:  0 8px 24px rgba(0,0,0,.5);

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-disp: "Archivo", "Inter", system-ui, sans-serif;

  --nav-h: 72px;
  --maxw: 1320px;
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:14.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
img,svg{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:rgba(255,106,26,.28); }

::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#180a02; border-radius:8px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#1a3157; }

:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; border-radius:6px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
}

/* ---------- Typo-Utilities ---------- */
.kicker{
  font-family:var(--font-disp);
  font-weight:800;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cyan);
  display:flex; align-items:center; gap:8px;
}
.display{
  font-family:var(--font-disp);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.04;
  color:#fff;
}
.h-xl{ font-size:clamp(38px,4.6vw,56px); }
.h-lg{ font-size:clamp(30px,3.4vw,42px); }
.h-md{ font-size:clamp(22px,2.4vw,30px); }
.lead{ color:var(--muted); font-size:15px; max-width:560px; }
.small{ font-size:12.5px; }
.tiny{ font-size:11.5px; }
.muted{ color:var(--muted); }
.muted-2{ color:var(--muted-2); }
.mono{ font-variant-numeric:tabular-nums; }

.c-cyan{ color:var(--cyan); }
.c-purple{ color:var(--violet); }
.c-amber{ color:var(--amber); }
.c-green{ color:var(--green); }
.c-red{ color:var(--red); }
.c-gold{ color:var(--gold); }

/* ---------- Layout-Utilities ---------- */
.container{ width:min(var(--maxw), calc(100% - 48px)); margin-inline:auto; }
.row{ display:flex; align-items:center; }
.gap-4{ gap:4px; } .gap-6{ gap:6px; } .gap-8{ gap:8px; } .gap-10{ gap:10px; }
.gap-12{ gap:12px; } .gap-14{ gap:14px; } .gap-16{ gap:16px; } .gap-20{ gap:20px; }
.between{ justify-content:space-between; }
.wrap{ flex-wrap:wrap; }
.grow{ flex:1; }
.mt-6{ margin-top:6px; } .mt-8{ margin-top:8px; } .mt-10{ margin-top:10px; }
.mt-12{ margin-top:12px; } .mt-14{ margin-top:14px; } .mt-16{ margin-top:16px; }
.mt-20{ margin-top:20px; } .mt-24{ margin-top:24px; } .mt-28{ margin-top:28px; }

/* ============================================================
   ICONS
   ============================================================ */
.ic{ width:16px; height:16px; flex:none; stroke:currentColor; fill:none;
     stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ic-14{ width:14px; height:14px; }
.ic-12{ width:12px; height:12px; }
.ic-18{ width:18px; height:18px; }
.ic-20{ width:20px; height:20px; }
.ic-fill{ fill:currentColor; stroke:none; }

/* farbige Icon-Kacheln */
.tile{
  width:46px; height:46px; border-radius:12px; flex:none;
  display:grid; place-items:center; position:relative;
}
.tile .ic{ width:22px; height:22px; }
.tile::after{ content:""; position:absolute; inset:0; border-radius:inherit;
  border:1px solid rgba(255,255,255,.08); }
.tile-sm{ width:38px; height:38px; border-radius:10px; }
.tile-sm .ic{ width:18px; height:18px; }
.tile-blue  { background:linear-gradient(145deg,#123c74,#0b2a55); color:#66c4ff; box-shadow:0 6px 18px rgba(47,128,237,.25); }
.tile-cyan  { background:linear-gradient(145deg,#0b3d57,#082c44); color:#4dd7ff; box-shadow:0 6px 18px rgba(255,106,26,.22); }
.tile-purple{ background:linear-gradient(145deg,#3b2a75,#241a4e); color:#fca5a5; box-shadow:0 6px 18px rgba(220,38,38,.28); }
.tile-amber { background:linear-gradient(145deg,#5e4008,#3d2a06); color:#ffc23d; box-shadow:0 6px 18px rgba(245,165,36,.25); }
.tile-gold  { background:linear-gradient(145deg,#6b4b06,#42300a); color:#ffd257; box-shadow:0 6px 18px rgba(251,191,36,.25); }
.tile-green { background:linear-gradient(145deg,#0d4d2b,#083a20); color:#4ade80; box-shadow:0 6px 18px rgba(34,197,94,.22); }
.tile-red   { background:linear-gradient(145deg,#5f1414,#3c0e0e); color:#ff7b7b; box-shadow:0 6px 18px rgba(239,68,68,.25); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(8,3,2,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  height:var(--nav-h);
  display:flex; align-items:center; gap:26px;
}
.nav-links{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav-link{
  position:relative;
  padding:10px 14px;
  font-size:14px; font-weight:600;
  color:var(--muted);
  border-radius:8px;
  transition:color .18s;
  display:flex; align-items:center; gap:7px;
}
.nav-link:hover{ color:#fff; }
.nav-link.active{ color:#fff; }
.nav-link.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  border-radius:2px; background:var(--cyan);
  box-shadow:0 0 10px rgba(255,106,26,.9);
}
.nav-search{
  margin-left:18px;
  display:flex; align-items:center; gap:8px;
  background:var(--input-bg);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 12px;
  width:230px;
  color:var(--muted-2);
}
.nav-search input{
  background:none; border:0; outline:none; width:100%;
  color:var(--text); font-size:13px;
}
.nav-search input::placeholder{ color:var(--muted-2); }
.kbd{
  font-size:10px; font-weight:700; color:var(--muted);
  border:1px solid var(--line-2); border-bottom-width:2px;
  border-radius:5px; padding:2px 5px; background:rgba(255,255,255,.03);
}

/* Logo */
.logo{ display:flex; align-items:center; flex:none; }
.logo-mark{
  font-family:var(--font-disp); font-weight:900; font-size:26px;
  letter-spacing:.02em; line-height:1;
  background:linear-gradient(180deg,#bfe9ff 0%, #4fb7ff 45%, #1868d8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(6,26,58,.9)) drop-shadow(0 4px 10px rgba(30,120,255,.35));
  transform:rotate(-2deg);
  position:relative;
}
.logo-grass{
  width:30px; height:30px; margin-right:9px; flex:none;
  transform:rotate(-4deg);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(900px 420px at 78% -10%, rgba(37,99,235,.20), transparent 60%),
    radial-gradient(700px 340px at 12% 0%, rgba(255,106,26,.10), transparent 60%),
    linear-gradient(180deg,#1a0800 0%, #071224 55%, var(--bg) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  padding:54px 0 46px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:40px;
}
.hero-inner .display{ margin:14px 0 16px; text-shadow:0 4px 30px rgba(0,20,60,.8); }
.hero-art{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-art svg{ position:absolute; right:0; bottom:0; height:100%; width:auto; opacity:.9; }
.hero-beam{
  position:absolute; z-index:1; top:-40px; bottom:0; right:26%;
  width:70px; pointer-events:none;
  background:linear-gradient(180deg, rgba(125,214,255,0) 0%, rgba(125,214,255,.16) 30%, rgba(125,214,255,.30) 100%);
  filter:blur(6px);
  clip-path:polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  animation:beam 5s ease-in-out infinite alternate;
}
@keyframes beam{ from{ opacity:.55; } to{ opacity:1; } }
.hero-stars{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-stars i{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#ffcc99; opacity:.5; animation:tw 3.4s ease-in-out infinite alternate;
}
@keyframes tw{ from{ opacity:.15; } to{ opacity:.7; } }

.hero-side{ flex:none; width:330px; }

/* kompakter Seitenkopf (Team-Unterseiten) */
.pagehead{ padding:26px 0 0; }

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.card{
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-s);
  position:relative;
}
.card-pad{ padding:20px; }
.card-pad-lg{ padding:24px; }
.card-head{
  display:flex; align-items:center; gap:10px;
  padding:16px 20px;
  border-bottom:1px solid var(--line-soft);
}
.card-head .kicker{ font-size:12.5px; }
.card-body{ padding:20px; }
.card-foot{ padding:14px 20px; border-top:1px solid var(--line-soft); }

.card-accent{ border-top:2px solid transparent; }
.card-accent.acc-purple{ border-top-color:var(--purple); box-shadow:0 -14px 40px -22px rgba(220,38,38,.55), var(--shadow-s); }
.card-accent.acc-amber { border-top-color:var(--amber);  box-shadow:0 -14px 40px -22px rgba(245,165,36,.55), var(--shadow-s); }
.card-accent.acc-cyan  { border-top-color:var(--cyan);   box-shadow:0 -14px 40px -22px rgba(255,106,26,.5),  var(--shadow-s); }

.subcard{
  background:rgba(8,18,38,.7);
  border:1px solid var(--line);
  border-radius:var(--radius-s);
}

/* Info-Zeilen (Label links, Wert rechts) */
.kv{ display:flex; align-items:center; justify-content:space-between; gap:12px;
     padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13px; }
.kv:last-child{ border-bottom:0; }
.kv .k{ color:var(--muted); display:flex; align-items:center; gap:8px; }
.kv .v{ font-weight:600; text-align:right; display:flex; align-items:center; gap:7px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:700; font-size:13.5px;
  padding:11px 18px; border-radius:10px;
  border:1px solid transparent;
  transition:transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s;
  white-space:nowrap; user-select:none;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 13px; font-size:12.5px; border-radius:8px; }
.btn-xs{ padding:6px 10px; font-size:12px; border-radius:8px; }

.btn-cyan{
  background:linear-gradient(180deg,#3fb6f5,#1d8fe0);
  color:#04121f;
  box-shadow:0 8px 22px rgba(45,155,240,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-cyan:hover{ box-shadow:0 10px 28px rgba(45,155,240,.5), inset 0 1px 0 rgba(255,255,255,.35); }

.btn-blue{
  background:linear-gradient(180deg,#cc3300,#1f5fd0);
  color:#fff;
  box-shadow:0 8px 22px rgba(47,128,237,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-blue:hover{ box-shadow:0 10px 28px rgba(47,128,237,.5), inset 0 1px 0 rgba(255,255,255,.2); }

.btn-purple{
  background:linear-gradient(180deg,#b91c1c,#5b2fd6);
  color:#fff; text-transform:uppercase; letter-spacing:.08em; font-size:12.5px;
  box-shadow:0 8px 24px rgba(124,77,255,.4), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-purple:hover{ box-shadow:0 10px 30px rgba(124,77,255,.55), inset 0 1px 0 rgba(255,255,255,.22); }

.btn-amber{
  background:linear-gradient(180deg,#f7ab2e,#e08607);
  color:#241300; text-transform:uppercase; letter-spacing:.08em; font-size:12.5px;
  box-shadow:0 8px 24px rgba(245,165,36,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-amber:hover{ box-shadow:0 10px 30px rgba(245,165,36,.5), inset 0 1px 0 rgba(255,255,255,.35); }

.btn-ghost{
  background:rgba(56,130,246,.06);
  border-color:var(--line-2);
  color:var(--cyan-2);
}
.btn-ghost:hover{ background:rgba(56,130,246,.12); border-color:rgba(255,106,26,.4); }

.btn-outline{
  background:transparent; border-color:var(--line-2); color:var(--muted);
}
.btn-outline:hover{ color:#fff; border-color:rgba(255,106,26,.45); }

.btn-danger{
  background:rgba(239,68,68,.08);
  border-color:rgba(239,68,68,.4);
  color:#ff8585;
}
.btn-danger:hover{ background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.6); }

.btn-danger-solid{
  background:linear-gradient(180deg,#ef4444,#c62b2b); color:#fff;
  box-shadow:0 8px 22px rgba(239,68,68,.35);
}

/* ============================================================
   FORMULARE
   ============================================================ */
.field{ margin-bottom:16px; }
.field:last-child{ margin-bottom:0; }
.label{
  display:flex; align-items:center; gap:4px;
  font-size:12.5px; font-weight:700; color:#d7e5fb;
  margin-bottom:7px; letter-spacing:.02em;
}
.req{ color:var(--red); font-weight:800; }
.hint{ font-size:11.5px; color:var(--muted-2); margin-top:6px; }

.input,.select,.textarea{
  width:100%;
  background:var(--input-bg);
  border:1px solid var(--line);
  border-radius:var(--radius-xs);
  padding:11px 13px;
  font-size:13.5px;
  color:var(--text);
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.input::placeholder,.textarea::placeholder{ color:var(--muted-2); }
.input:hover,.select:hover,.textarea:hover{ border-color:var(--line-2); }
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:rgba(255,106,26,.6);
  box-shadow:0 0 0 3px rgba(255,106,26,.14);
  background:#0a1730;
}
.textarea{ resize:vertical; min-height:92px; line-height:1.5; }
.select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238ea6c8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:36px;
}
.select option{ background:#160905; color:var(--text); }

.input.invalid,.select.invalid,.textarea.invalid,.dropzone.invalid{
  border-color:rgba(239,68,68,.65) !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.12);
  animation:shake .3s ease;
}
@keyframes shake{ 25%{transform:translateX(-3px);} 75%{transform:translateX(3px);} }

.input-icon{ position:relative; }
.input-icon .ic{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted-2); pointer-events:none; }
.input-icon .input{ padding-right:38px; }

/* Upload-Dropzone */
.dropzone{
  border:1.5px dashed rgba(255,106,26,.3);
  border-radius:var(--radius-s);
  background:rgba(8,18,38,.5);
  padding:20px 16px;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.dropzone:hover,.dropzone.drag{
  border-color:rgba(255,106,26,.65);
  background:rgba(12,26,52,.75);
}
.dz-title{ font-size:13px; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:8px; }
.dz-title .link{ color:var(--cyan); font-weight:700; }
.dz-sub{ font-size:11.5px; color:var(--muted-2); margin-top:6px; }
.dz-icon{ color:var(--cyan); margin:0 auto 8px; width:24px; height:24px; }
.dz-files{ margin-top:10px; display:flex; flex-direction:column; gap:6px; text-align:left; }
.dz-file{
  display:flex; align-items:center; gap:9px;
  background:rgba(255,106,26,.07); border:1px solid var(--line);
  border-radius:8px; padding:7px 10px; font-size:12px;
}
.dz-file .name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dz-file .size{ color:var(--muted-2); }
.dz-file .rm{ color:var(--muted-2); padding:2px; border-radius:5px; }
.dz-file .rm:hover{ color:#ff8585; background:rgba(239,68,68,.12); }

/* Checkboxen */
.check{
  display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none;
  font-size:12.5px; color:var(--muted);
}
.check input{ display:none; }
.check .box{
  width:16px; height:16px; border-radius:5px; flex:none;
  border:1.5px solid var(--line-2); background:var(--input-bg);
  display:grid; place-items:center; transition:all .16s;
}
.check .box svg{ width:10px; height:10px; opacity:0; transform:scale(.5); transition:all .16s; stroke:#04121f; stroke-width:3.4; }
.check input:checked + .box{ background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 10px rgba(255,106,26,.5); }
.check input:checked + .box svg{ opacity:1; transform:scale(1); }

/* ============================================================
   BADGES / PILLS / STATUS
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:6px; border:1px solid transparent;
  line-height:1.5; white-space:nowrap;
}
.badge .ic{ width:11px; height:11px; }
.badge-team    { background:rgba(47,128,237,.14); border-color:rgba(47,128,237,.45); color:#6db3ff; }
.badge-mod     { background:rgba(220,38,38,.14); border-color:rgba(220,38,38,.45); color:#c0a4ff; }
.badge-admin   { background:rgba(249,115,22,.14); border-color:rgba(249,115,22,.5);  color:#ffb066; }
.badge-supporter{ background:rgba(255,106,26,.12); border-color:rgba(255,106,26,.45); color:#5ed0ff; }
.badge-spieler { background:rgba(142,166,200,.12); border-color:rgba(142,166,200,.35); color:#a9c0e2; }

.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700;
  padding:4px 10px; border-radius:999px;
  white-space:nowrap;
}
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.pill-neu       { background:rgba(255,106,26,.1);  color:#ff9933; }
.pill-progress  { background:rgba(245,165,36,.1);  color:#ffc23d; }
.pill-wait      { background:rgba(47,128,237,.12); color:#7ab4ff; }
.pill-check     { background:rgba(245,165,36,.1);  color:#ffc23d; }
.pill-done      { background:rgba(34,197,94,.1);   color:#4ade80; }
.pill-active    { background:rgba(34,197,94,.1);   color:#4ade80; }
.pill-expired   { background:rgba(142,166,200,.1); color:#93a9c9; }
.pill-denied    { background:rgba(239,68,68,.1);   color:#ff8585; }
.pill-info      { background:rgba(255,106,26,.1);  color:#ff9933; }
.pill-solved    { background:rgba(34,197,94,.12);  color:#4ade80; border:1px solid rgba(34,197,94,.35); border-radius:6px; }
.pill-solved::before{ display:none; }

/* Kategorie-Chips (Ticket-Tabelle) */
.chip{
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  padding:4px 10px; border-radius:7px; border:1px solid transparent; white-space:nowrap;
}
.chip-report{ background:rgba(220,38,38,.12); border-color:rgba(220,38,38,.4);  color:#c0a4ff; }
.chip-bug   { background:rgba(245,165,36,.1);  border-color:rgba(245,165,36,.4);  color:#ffc23d; }
.chip-unban { background:rgba(239,68,68,.1);   border-color:rgba(239,68,68,.4);   color:#ff8585; }
.chip-neutral{ background:rgba(142,166,200,.08); border-color:rgba(142,166,200,.25); color:#a9c0e2; }
.chip-green { background:rgba(34,197,94,.1);   border-color:rgba(34,197,94,.4);   color:#4ade80; }
.chip-purple{ background:rgba(220,38,38,.12); border-color:rgba(220,38,38,.4);  color:#c0a4ff; }
.chip-amber { background:rgba(245,165,36,.1);  border-color:rgba(245,165,36,.4);  color:#ffc23d; }

/* Punkt-Status */
.dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.dot-green{ background:var(--green); box-shadow:0 0 9px rgba(34,197,94,.9); }
.dot-red{ background:var(--red); box-shadow:0 0 9px rgba(239,68,68,.9); }
.dot-amber{ background:var(--amber); box-shadow:0 0 9px rgba(245,165,36,.9); }
.dot-blue{ background:var(--cyan); box-shadow:0 0 9px rgba(255,106,26,.9); }

/* ============================================================
   AVATARE (Pixel-Heads via JS)
   ============================================================ */
.avatar{
  width:34px !important; height:34px !important; border-radius:8px; overflow:hidden !important; flex:none;
  background:#0d1c36; border:1px solid var(--line-2);
  image-rendering:pixelated; position:relative;
  display:inline-flex !important; align-items:center; justify-content:center;
  min-width:34px; max-width:34px;
}
.avatar-xs{ width:22px !important; height:22px !important; min-width:22px; max-width:22px; border-radius:6px; }
.avatar-sm{ width:28px !important; height:28px !important; min-width:28px; max-width:28px; border-radius:7px; }
.avatar-lg{ width:56px !important; height:56px !important; min-width:56px; max-width:56px; border-radius:12px; }
.avatar-xl{ width:84px !important; height:84px !important; min-width:84px; max-width:84px; border-radius:16px; border-width:2px; }
.avatar svg{ width:100%; height:100%; }
.avatar img{ width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.avatar-ring{ box-shadow:0 0 0 3px rgba(255,106,26,.18), 0 10px 26px rgba(0,0,0,.5); }
.avatar .status{
  position:absolute; right:-2px; bottom:-2px; width:12px; height:12px;
  border-radius:50%; background:var(--green); border:2.5px solid var(--panel);
}

.userline{ display:flex; align-items:center; gap:9px; min-width:0; }
.userline .name{ font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============================================================
   TABELLEN
   ============================================================ */
.tablewrap{ overflow-x:auto; }
.table{ width:100%; border-collapse:collapse; font-size:13px; min-width:760px; }
.table thead th{
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); text-align:left;
  padding:10px 14px; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.table tbody td{
  padding:12px 14px; border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
}
.table tbody tr{ transition:background .15s; }
.table tbody tr:hover{ background:rgba(56,130,246,.05); }
.table tbody tr:last-child td{ border-bottom:0; }
.t-id{ font-weight:700; color:#bcd6ff; white-space:nowrap; }
.t-dim{ color:var(--muted); }
.t-dim2{ color:var(--muted-2); }
.rowmenu{
  width:28px; height:28px; border-radius:7px; display:grid; place-items:center;
  color:var(--muted-2);
}
.rowmenu:hover{ background:rgba(56,130,246,.1); color:#fff; }

/* Filterleiste */
.filterbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filterbar .input,.filterbar .select{ width:auto; padding:9px 12px; font-size:12.5px; }
.filterbar .select{ padding-right:34px; min-width:140px; }
.filterbar .search{ min-width:220px; }

/* Pagination */
.pager{ display:flex; align-items:center; gap:6px; }
.page{
  min-width:30px; height:30px; padding:0 8px; border-radius:8px;
  display:grid; place-items:center;
  font-size:12.5px; font-weight:700; color:var(--muted);
  border:1px solid transparent;
}
.page:hover{ color:#fff; background:rgba(56,130,246,.08); }
.page.on{ background:var(--blue); color:#fff; box-shadow:0 4px 14px rgba(47,128,237,.4); }
.page.arrow{ border-color:var(--line); }
.page.dots{ pointer-events:none; }

/* ============================================================
   HISTORY-LISTEN (Spielerprofil)
   ============================================================ */
.hlist{ display:flex; flex-direction:column; }
.hitem{
  display:flex; align-items:center; gap:14px;
  padding:13px 4px; border-bottom:1px solid var(--line-soft);
  position:relative;
}
.hitem:last-child{ border-bottom:0; }
.hitem::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--hdot,#ff9933); box-shadow:0 0 8px var(--hdot,#ff9933);
}
.hicon{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line);
}
.hicon .ic{ width:16px; height:16px; }
.hi-red   { background:rgba(239,68,68,.1);  color:#ff8585; }
.hi-amber { background:rgba(245,165,36,.1); color:#ffc23d; }
.hi-blue  { background:rgba(255,106,26,.1); color:#ff9933; }
.hi-purple{ background:rgba(220,38,38,.12);color:#c0a4ff; }
.hi-green { background:rgba(34,197,94,.1);  color:#4ade80; }
.hcol{ min-width:0; }
.hcol .t{ font-weight:800; font-size:13.5px; }
.hcol .s{ font-size:11.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-top:2px; }
.hmeta{ min-width:0; flex:1; }
.hmeta .lbl{ font-size:10.5px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.hmeta .val{ font-size:12.5px; color:#d7e5fb; margin-top:2px; }

/* ============================================================
   TIMELINE (Falldetails)
   ============================================================ */
.timeline{ position:relative; padding-left:26px; }
.timeline::before{
  content:""; position:absolute; left:8px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg, rgba(255,106,26,.4), rgba(56,130,246,.08));
  border-radius:2px;
}
.tl-item{ position:relative; display:flex; gap:14px; padding:11px 0; }
.tl-item::before{
  content:""; position:absolute; left:-23px; top:20px;
  width:9px; height:9px; border-radius:50%;
  background:var(--tldot,#ff9933);
  box-shadow:0 0 0 3px rgba(8,18,38,1), 0 0 10px var(--tldot,#ff9933);
}
.tl-time{ flex:none; width:76px; text-align:right; }
.tl-time .d{ font-size:11.5px; font-weight:700; color:#bcd6ff; }
.tl-time .t{ font-size:11px; color:var(--muted-2); }
.tl-icon{
  width:34px; height:34px; border-radius:9px; flex:none;
  display:grid; place-items:center; border:1px solid var(--line);
}
.tl-icon .ic{ width:15px; height:15px; }
.tl-main{ flex:1; min-width:0; }
.tl-title{ font-weight:800; font-size:13px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tl-desc{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.tl-actor{ display:flex; align-items:center; gap:7px; margin-top:6px; font-size:12px; color:var(--muted); }
.tl-state{ flex:none; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; align-self:center; }

/* ============================================================
   NOTIZEN & KOMMENTARE
   ============================================================ */
.note{
  padding:13px 0; border-bottom:1px solid var(--line-soft);
  display:flex; gap:11px;
}
.note:last-child{ border-bottom:0; }
.note .body{ flex:1; min-width:0; }
.note .who{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; flex-wrap:wrap; }
.note .when{ font-size:11px; color:var(--muted-2); font-weight:500; }
.note .txt{ font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.55; }
.note .rowmenu{ align-self:flex-start; }

/* ============================================================
   STAT-KARTEN (Dashboard)
   ============================================================ */
.stat{
  display:flex; align-items:center; gap:14px;
  padding:18px;
}
.stat .num{ font-family:var(--font-disp); font-weight:900; font-size:30px; line-height:1; }
.stat .lbl{ font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; }
.stat .delta{ font-size:11.5px; color:var(--green); display:flex; align-items:center; gap:4px; margin-top:6px; }
.stat .delta .ic{ width:11px; height:11px; }

/* Mini-Stats (Spielerprofil) */
.mstat{ padding:14px 16px; display:flex; flex-direction:column; gap:5px; min-width:0; }
.mstat .top{ display:flex; align-items:center; gap:7px; font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); }
.mstat .top .ic{ width:13px; height:13px; }
.mstat .big{ font-family:var(--font-disp); font-weight:800; font-size:17px; color:#fff; }
.mstat .sub{ font-size:11px; color:var(--muted-2); }

/* Fortschrittsbalken */
.bar{ height:6px; border-radius:99px; background:rgba(255,106,26,.12); overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,#f5a524,#fbbf24); box-shadow:0 0 10px rgba(245,165,36,.6); }

/* ============================================================
   SIDEBAR (Team-Dashboard)
   ============================================================ */
.shell{ display:flex; min-height:100vh; }
.sidebar{
  width:236px; flex:none;
  background:linear-gradient(180deg,#120704 0%, #060d1c 100%);
  border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column;
  padding:18px 14px;
  position:sticky; top:0; height:100vh;
}
.sidebar .logo{ padding:4px 8px 18px; }
.snav{ display:flex; flex-direction:column; gap:3px; }
.snav a{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px;
  font-size:13.5px; font-weight:600; color:var(--muted);
  border:1px solid transparent;
  transition:all .15s;
}
.snav a .ic{ width:17px; height:17px; }
.snav a:hover{ color:#fff; background:rgba(56,130,246,.07); }
.snav a.on{
  color:#fff; background:linear-gradient(90deg, rgba(255,106,26,.16), rgba(56,130,246,.05));
  border-color:rgba(255,106,26,.35);
  box-shadow:inset 3px 0 0 var(--cyan);
}
.sidebar .foot{ margin-top:auto; padding-top:16px; }
.main-col{ flex:1; min-width:0; padding:22px 26px 40px; }

/* Profil-Chip oben rechts */
.mechip{
  display:flex; align-items:center; gap:10px;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:12px; padding:8px 12px; cursor:pointer;
}
.mechip .nm{ font-size:13px; font-weight:700; line-height:1.2; }
.mechip .rl{ font-size:11px; color:var(--muted-2); }
.mechip:hover{ border-color:var(--line-2); }

/* ============================================================
   DROPDOWN-MENÜS
   ============================================================ */
.dd{ position:relative; }
.dd-menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:40;
  min-width:200px;
  background:#0b1a32; border:1px solid var(--line-2);
  border-radius:12px; box-shadow:var(--shadow);
  padding:6px;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .16s, transform .16s;
}
.dd.open .dd-menu{ opacity:1; transform:none; pointer-events:auto; }
.dd-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 11px; border-radius:8px;
  font-size:13px; font-weight:600; color:var(--muted); text-align:left;
}
.dd-item .ic{ width:15px; height:15px; }
.dd-item:hover{ background:rgba(56,130,246,.1); color:#fff; }
.dd-item.danger{ color:#ff8585; }
.dd-item.danger:hover{ background:rgba(239,68,68,.12); }
.dd-sep{ height:1px; background:var(--line-soft); margin:5px 4px; }

/* ============================================================
   ACCORDION (Wiki-Guide)
   ============================================================ */
.acc{ overflow:hidden; }
.acc-head{
  width:100%; display:flex; align-items:center; gap:15px;
  padding:17px 18px; text-align:left;
}
.acc-num{
  width:30px; height:30px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:rgba(255,106,26,.1); border:1px solid rgba(255,106,26,.4);
  color:var(--cyan); font-weight:800; font-size:13px;
}
.acc-ic{ width:40px; height:40px; flex:none; display:grid; place-items:center; }
.acc-ic svg{ width:34px; height:34px; }
.acc-title{ font-family:var(--font-disp); font-weight:800; font-size:14px; letter-spacing:.06em; text-transform:uppercase; }
.acc-prev{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.acc-chev{ margin-left:auto; color:var(--muted-2); transition:transform .25s; flex:none; }
.acc.open .acc-chev{ transform:rotate(180deg); color:var(--cyan); }
.acc-body{
  max-height:0; overflow:hidden; transition:max-height .3s ease;
}
.acc-body-in{ padding:2px 18px 18px 63px; font-size:13px; color:var(--muted); line-height:1.65; }
.acc.open{ border-color:var(--line-2); }

/* ============================================================
   VIDEO-PLAYER (Mockup)
   ============================================================ */
.video{
  border-radius:var(--radius-s); overflow:hidden; position:relative;
  border:1px solid var(--line);
  background:#04101f;
  aspect-ratio:16/9.4;
  cursor:pointer;
}
.video .thumb{ position:absolute; inset:0; }
.video .playbtn{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%;
  background:rgba(4,16,32,.55); border:2.5px solid rgba(255,255,255,.85);
  display:grid; place-items:center; color:#fff;
  backdrop-filter:blur(3px);
  transition:transform .2s, background .2s;
}
.video:hover .playbtn{ transform:translate(-50%,-50%) scale(1.08); background:rgba(255,106,26,.35); }
.video .playbtn svg{ width:20px; height:20px; margin-left:3px; fill:#fff; stroke:none; }
.video .controls{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, transparent, rgba(2,8,18,.9));
  padding:20px 12px 9px;
  display:flex; align-items:center; gap:10px;
  font-size:11px; color:#cfe4ff;
}
.video .track{ flex:1; height:4px; border-radius:99px; background:rgba(255,255,255,.2); position:relative; }
.video .track i{ position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:inherit; background:var(--cyan); box-shadow:0 0 8px rgba(255,106,26,.8); transition:width .3s linear; }
.video .controls .ic{ width:14px; height:14px; }

/* Fortschritts-Ring */
.ring{ position:relative; width:86px; height:86px; flex:none; }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring .bgc{ fill:none; stroke:rgba(255,106,26,.14); stroke-width:7; }
.ring .fgc{ fill:none; stroke:var(--green); stroke-width:7; stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(34,197,94,.7));
  transition:stroke-dashoffset .45s ease, stroke .3s; }
.ring .mid{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.ring .mid .a{ font-family:var(--font-disp); font-weight:900; font-size:17px; line-height:1; }
.ring .mid .b{ font-size:9.5px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.1em; font-weight:700; margin-top:2px; }

/* Checkliste */
.clist{ display:flex; flex-direction:column; gap:9px; }
.clist .check{ font-size:13px; color:#d7e5fb; }
.clist .check .box{ width:17px; height:17px; }
.clist .check input:checked ~ span.tx{ color:var(--muted); }

/* Donut */
.donut{
  width:132px; height:132px; border-radius:50%; position:relative; flex:none; margin-inline:auto;
  background:conic-gradient(var(--red) 0 12%, var(--amber) 12% 57%, var(--blue) 57% 100%);
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.4));
}
.donut::before{
  content:""; position:absolute; inset:17px; border-radius:50%;
  background:var(--panel);
  border:1px solid var(--line-soft);
}
.legend{ display:flex; flex-direction:column; gap:8px; }
.legend .li{ display:flex; align-items:center; gap:9px; font-size:12.5px; }
.legend .sw{ width:9px; height:9px; border-radius:3px; flex:none; }
.legend .nm{ color:var(--muted); flex:1; }
.legend .vl{ font-weight:700; }

/* ============================================================
   FEEDS / SCHNELLLINKS / LISTEN
   ============================================================ */
.feed{ display:flex; flex-direction:column; }
.feed-item{
  display:flex; gap:10px; padding:11px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:12.5px; color:var(--muted);
}
.feed-item:last-child{ border-bottom:0; }
.feed-item::before{
  content:""; width:7px; height:7px; border-radius:50%; margin-top:5px; flex:none;
  background:var(--fdot,#ff9933); box-shadow:0 0 8px var(--fdot,#ff9933);
}
.feed-item b{ color:#d7e5fb; font-weight:700; }
.feed-item .tm{ display:block; font-size:11px; color:var(--muted-2); margin-top:3px; }

.qlink{
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:10px;
  background:rgba(8,18,38,.65); border:1px solid var(--line);
  font-size:13px; font-weight:600; color:#d7e5fb;
  transition:all .16s;
}
.qlink:hover{ border-color:rgba(255,106,26,.45); background:rgba(12,26,52,.85); transform:translateX(2px); }
.qlink .ic{ color:var(--cyan); }
.qlink .arr{ margin-left:auto; color:var(--muted-2); }
.qlinks{ display:flex; flex-direction:column; gap:8px; }

/* Beweis-Zeilen */
.evrow{ display:flex; align-items:center; gap:10px; padding:8px 0; font-size:13px;
  border-bottom:1px solid var(--line-soft); color:var(--muted); }
.evrow:last-child{ border-bottom:0; }
.evrow .ic{ color:var(--cyan); }
.evrow .n{ margin-left:auto; font-weight:700; color:#d7e5fb; }

/* ============================================================
   STATS-FOOTER-LEISTE
   ============================================================ */
.statbar{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.statbar .cell{
  display:flex; align-items:center; gap:13px;
  padding:19px 24px;
  border-right:1px solid var(--line-soft);
}
.statbar .cell:last-child{ border-right:0; }
.statbar .n{ font-family:var(--font-disp); font-weight:900; font-size:20px; color:#fff; }
.statbar .l{ font-size:12px; color:var(--muted-2); margin-top:1px; }
.statbar .ic{ width:20px; height:20px; color:var(--cyan); }

/* ============================================================
   TOASTS
   ============================================================ */
.toasts{ position:fixed; right:20px; bottom:20px; z-index:200; display:flex; flex-direction:column; gap:10px; }
.toast{
  display:flex; align-items:center; gap:11px;
  background:#0c1c36; border:1px solid rgba(255,106,26,.4);
  border-radius:12px; padding:13px 16px;
  font-size:13px; font-weight:600;
  box-shadow:var(--shadow);
  animation:toastin .3s cubic-bezier(.2,.9,.3,1.2);
  max-width:360px;
}
.toast.ok{ border-color:rgba(34,197,94,.5); }
.toast.ok .ic{ color:var(--green); }
.toast.err{ border-color:rgba(239,68,68,.5); }
.toast.err .ic{ color:var(--red); }
.toast .ic{ color:var(--cyan); }
@keyframes toastin{ from{ opacity:0; transform:translateY(10px) scale(.96); } }
.toast.out{ opacity:0; transform:translateY(8px); transition:all .25s; }

/* Copy-Button */
.copybtn{ color:var(--muted-2); padding:3px; border-radius:6px; display:inline-grid; place-items:center; }
.copybtn:hover{ color:var(--cyan); background:rgba(255,106,26,.1); }
.copybtn .ic{ width:13px; height:13px; }

/* ============================================================
   SEITEN-SPEZIFISCH
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.crumbs{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:15px 0; font-size:12.5px; color:var(--muted-2);
}
.crumbs a{ color:var(--muted); font-weight:600; display:flex; align-items:center; gap:6px; }
.crumbs a:hover{ color:var(--cyan); }
.crumbs .sep{ color:#31456b; }
.crumbs .cur{ color:#d7e5fb; font-weight:700; }

/* ---------- Support-Seite ---------- */
.support-grid{
  display:grid; gap:22px;
  grid-template-columns:250px 1fr 1fr;
  align-items:start;
  padding:30px 0 56px;
}
.side-stack{ display:flex; flex-direction:column; gap:16px; }
.tickline{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted); padding:4px 0; }
.tickline .ic{ width:13px; height:13px; color:var(--green); }
.rt-row{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:9px;
  padding:9px 11px; margin-top:9px; background:rgba(8,18,38,.6);
}
.rt-row .ic{ color:var(--cyan); width:15px; height:15px; }
.rt-row .a{ font-size:11.5px; color:var(--muted); }
.rt-row .b{ font-size:12px; font-weight:800; color:var(--cyan); }
.rt-row.amber .ic{ color:var(--amber); }
.rt-row.amber .b{ color:var(--amber); }

.hero-infocard{ text-align:left; }
.hero-infocard .hd{ display:flex; align-items:center; gap:9px; font-family:var(--font-disp);
  font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.hero-infocard p{ font-size:12.5px; color:var(--muted); margin-top:9px; }

/* ---------- Regelwerk ---------- */
.rules-grid{
  display:grid; gap:22px;
  grid-template-columns:1.35fr 1fr .92fr;
  align-items:start;
  padding:30px 0 34px;
}
.rulecards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.rulecard{
  display:flex; gap:13px; align-items:flex-start;
  padding:16px; border-radius:12px;
  background:rgba(8,18,38,.65); border:1px solid var(--line);
  transition:all .18s; cursor:pointer;
}
.rulecard:hover{ border-color:rgba(255,106,26,.45); transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.35); }
.rulecard .t{ font-family:var(--font-disp); font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:8px; }
.rulecard .t .arr{ margin-left:auto; color:var(--muted-2); }
.rulecard:hover .t .arr{ color:var(--cyan); }
.rulecard p{ font-size:12px; color:var(--muted); margin-top:5px; line-height:1.55; }

.allrules{
  display:flex; align-items:center; gap:13px;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(8,18,38,.5); padding:15px 17px;
  position:relative; overflow:hidden;
}
.allrules .shield{ margin-left:auto; opacity:.55; width:64px; height:64px; flex:none; }
.allrules .t{ font-family:var(--font-disp); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#fff; display:flex; gap:8px; align-items:center; }
.allrules p{ font-size:12px; color:var(--muted); margin-top:4px; max-width:420px; }

.warncard{ border-color:rgba(245,165,36,.4); background:linear-gradient(180deg, rgba(60,42,8,.35), rgba(14,5,2,.9)); }
.warncard .hd{ color:var(--amber); }

/* ---------- Wiki-Übersicht ---------- */
.wiki-grid{ display:grid; gap:24px; grid-template-columns:1fr 300px; align-items:start; padding:8px 0 34px; }
.wikisearch{
  display:flex; align-items:center; gap:10px;
  background:var(--input-bg); border:1px solid var(--line-2);
  border-radius:13px; padding:6px 8px 6px 16px;
  max-width:640px; margin-top:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.wikisearch .ic{ color:var(--muted-2); }
.wikisearch input{ flex:1; background:none; border:0; outline:none; font-size:14px; color:var(--text); padding:9px 0; }
.wikisearch .select{ width:auto; border:0; background-color:rgba(56,130,246,.08); min-width:150px; padding:9px 34px 9px 13px; border-radius:9px; font-size:12.5px; }

.featured{
  display:grid; grid-template-columns:220px 1fr; overflow:hidden;
}
.featured .art{ position:relative; min-height:150px; background:#071a30; border-right:1px solid var(--line-soft); }
.featured .art svg{ position:absolute; inset:0; width:100%; height:100%; }
.featured .fx{ padding:20px 22px; display:flex; flex-direction:column; align-items:flex-start; gap:9px; justify-content:center; }
.featured .fx .t{ font-family:var(--font-disp); font-weight:900; font-size:19px; letter-spacing:.04em; text-transform:uppercase; }
.featured .fx p{ font-size:13px; color:var(--muted); max-width:520px; }

.guidegrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.guidecard{
  padding:17px; display:flex; flex-direction:column; gap:9px;
  transition:all .18s; cursor:pointer;
}
.guidecard:hover{ transform:translateY(-3px); border-color:rgba(255,106,26,.45); box-shadow:0 16px 36px rgba(0,0,0,.4); }
.guidecard .t{ font-family:var(--font-disp); font-weight:800; font-size:13px; letter-spacing:.07em; text-transform:uppercase; }
.guidecard p{ font-size:12.5px; color:var(--muted); flex:1; }
.guidecard .more{ font-size:12px; font-weight:700; color:var(--cyan); display:flex; align-items:center; gap:6px; }
.guidecard:hover .more{ gap:9px; }
.guidecard .more{ transition:gap .18s; }

.wk-fact{ display:flex; gap:10px; padding:9px 0; }
.wk-fact .ic{ color:var(--cyan); margin-top:1px; }
.wk-fact .a{ font-size:12.5px; font-weight:700; color:#d7e5fb; }
.wk-fact .b{ font-size:11.5px; color:var(--muted-2); }

/* ---------- Wiki-Artikel ---------- */
.article-grid{ display:grid; gap:24px; grid-template-columns:1fr 330px; align-items:start; padding:6px 0 40px; }
.tagrow{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:7px;
  background:rgba(56,130,246,.08); border:1px solid var(--line); color:var(--muted);
}
.tag.hl{ color:#6db3ff; border-color:rgba(47,128,237,.4); }
.tipbar{
  display:flex; align-items:flex-start; gap:10px;
  border:1px solid rgba(255,106,26,.35); border-radius:11px;
  background:rgba(255,106,26,.06);
  padding:12px 15px; font-size:12.5px; color:var(--muted);
}
.tipbar .ic{ color:var(--cyan); margin-top:1px; }
.tipbar b{ color:#d7e5fb; }
.votebar{ display:flex; align-items:center; gap:10px; }
.vote{
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:9px;
  border:1px solid var(--line); background:rgba(8,18,38,.6);
  font-weight:700; font-size:13px; color:var(--muted);
  transition:all .16s;
}
.vote:hover{ border-color:var(--line-2); color:#fff; }
.vote.on-up{ border-color:rgba(34,197,94,.55); color:#4ade80; background:rgba(34,197,94,.08); }
.vote.on-down{ border-color:rgba(239,68,68,.55); color:#ff8585; background:rgba(239,68,68,.08); }

/* ---------- Spielerprofil ---------- */
.team-toolbar{
  display:flex; align-items:center; gap:14px;
  padding:18px 0 4px;
}
.backbtn{
  width:38px; height:38px; border-radius:10px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(8,18,38,.6);
  color:var(--muted);
}
.backbtn:hover{ color:#fff; border-color:var(--line-2); }
.bigsearch{
  flex:1; max-width:420px;
  display:flex; align-items:center; gap:10px;
  background:var(--input-bg); border:1px solid var(--line);
  border-radius:11px; padding:10px 14px;
}
.bigsearch .ic{ color:var(--muted-2); }
.bigsearch input{ flex:1; background:none; border:0; outline:none; color:var(--text); font-size:13.5px; }
.searchchip{
  display:flex; align-items:center; gap:8px;
  background:rgba(56,130,246,.1); border:1px solid var(--line-2);
  border-radius:9px; padding:8px 12px; font-size:12.5px; font-weight:700; color:#bcd6ff;
}
.shortcut-hint{ margin-left:auto; font-size:11.5px; color:var(--muted-2); }

.playerhead{ display:flex; align-items:center; gap:18px; padding:20px; flex-wrap:wrap; }
.playerhead .nm{ font-family:var(--font-disp); font-weight:900; font-size:30px; letter-spacing:.01em; }
.playerhead .uuid{ font-size:11.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-top:3px; }
.onlineline{ display:flex; align-items:center; gap:7px; font-size:12px; color:#7fe0a5; margin-top:7px; }

.pstats{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.profile-grid{ display:grid; gap:22px; grid-template-columns:1fr 330px; align-items:start; padding:20px 0 44px; }

/* Account-Status */
.warnbar-wrap{ padding:8px 0 2px; }

/* ---------- Team-Dashboard ---------- */
.dash-hero{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:16px;
  background:
    radial-gradient(700px 300px at 80% -20%, rgba(37,99,235,.28), transparent 60%),
    linear-gradient(180deg,#0c1e3c 0%, #120704 100%);
  padding:30px 30px 34px;
}
.dash-grid{ display:grid; gap:20px; grid-template-columns:1fr 316px; align-items:start; }
.dash-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.dashfoot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 4px 0; font-size:12px; color:var(--muted-2);
  border-top:1px solid var(--line-soft); margin-top:26px;
}

/* ---------- Falldetails ---------- */
.case-grid{ display:grid; gap:22px; grid-template-columns:1fr 320px; align-items:start; padding:16px 0 44px; }
.casehead{ padding:20px; }
.casemeta{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px 20px;
  padding:16px 20px; border-top:1px solid var(--line-soft);
}
.cm .l{ font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); }
.cm .v{ font-size:13px; font-weight:700; margin-top:5px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }

.commentbox textarea{ min-height:96px; }
.commentbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }

/* Empfehlung */
.reco{
  display:flex; gap:11px; padding:12px 13px; border-radius:11px;
  border:1px solid var(--line); background:rgba(8,18,38,.6);
  font-size:12px; color:var(--muted); align-items:flex-start;
  transition:all .16s; text-align:left; width:100%;
}
.reco .ic{ margin-top:1px; flex:none; }
.reco b{ display:block; color:#d7e5fb; font-size:12.5px; margin-bottom:2px; }
.reco.hl{ border-color:rgba(245,165,36,.55); background:linear-gradient(180deg, rgba(72,50,8,.4), rgba(14,5,2,.85)); }
.reco.hl b{ color:var(--amber-2); }
.reco:hover{ border-color:var(--line-2); }
.reco.hl:hover{ border-color:rgba(245,165,36,.8); }

/* Entscheidung */
.decis{
  border:1px solid var(--line); border-radius:11px;
  padding:12px 13px; background:rgba(8,18,38,.55);
  display:flex; gap:11px; font-size:12.5px;
}
.decis .ic{ flex:none; margin-top:2px; }
.decis.ok{ border-color:rgba(34,197,94,.4); }
.decis.no{ border-color:rgba(239,68,68,.4); }
.decis b{ display:block; margin-bottom:2px; }
.decis .sub{ color:var(--muted); font-size:12px; }
.decis .tm{ color:var(--muted-2); font-size:11px; margin-top:4px; }

/* ---------- Team-History ---------- */
.hist-grid{ display:grid; gap:22px; grid-template-columns:1fr 320px; align-items:start; padding:16px 0 10px; }
.hist-bottom{ display:grid; gap:22px; grid-template-columns:1fr 1fr; padding:0 0 44px; }
.hist-head{ display:flex; align-items:center; gap:16px; padding:20px; flex-wrap:wrap; }
.hstats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:0 20px 20px; }
.linkrow{
  display:flex; align-items:center; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--line-soft); font-size:12.5px;
}
.linkrow:last-child{ border-bottom:0; }
.linkrow .id{ font-weight:800; color:#bcd6ff; width:130px; flex:none; }
.linkrow .what{ color:var(--muted); flex:1; }
.linkrow .dt{ color:var(--muted-2); font-size:11.5px; width:78px; }

.morelink{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:10px; margin-top:6px;
  font-size:12.5px; font-weight:700; color:var(--cyan);
  border-radius:9px;
}
.morelink:hover{ background:rgba(255,106,26,.07); }

/* ---------- Index / Übersicht ---------- */
.indexgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:34px 0 60px; }
.indexcard{ padding:19px; display:flex; flex-direction:column; gap:10px; transition:all .18s; }
.indexcard:hover{ transform:translateY(-3px); border-color:rgba(255,106,26,.5); box-shadow:0 16px 40px rgba(0,0,0,.45); }
.indexcard .t{ font-family:var(--font-disp); font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:.05em; }
.indexcard p{ font-size:12.5px; color:var(--muted); flex:1; }
.indexcard .go{ font-size:12px; font-weight:700; color:var(--cyan); display:flex; align-items:center; gap:6px; }

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--line-soft);
  padding:26px 0 34px; margin-top:10px;
  color:var(--muted-2); font-size:12.5px;
}
.footer .row{ justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer a:hover{ color:var(--cyan); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1240px){
  .support-grid{ grid-template-columns:1fr 1fr; }
  .support-grid .side-stack{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; }
  .support-grid .side-stack > *{ flex:1; min-width:240px; }
  .rules-grid{ grid-template-columns:1fr 1fr; }
  .rules-grid .rail{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
  .pstats{ grid-template-columns:repeat(3,1fr); }
  .guidegrid{ grid-template-columns:1fr 1fr; }
  .dash-stats{ grid-template-columns:repeat(2,1fr); }
  .indexgrid{ grid-template-columns:repeat(2,1fr); }
  .casemeta{ grid-template-columns:repeat(2,1fr); }
  .hstats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1080px){
  .wiki-grid,.article-grid,.profile-grid,.case-grid,.hist-grid,.dash-grid{ grid-template-columns:1fr; }
  .hero-side{ width:100%; }
  .hero-inner{ flex-direction:column; }
  .sidebar{ display:none; }
  .hist-bottom{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .nav-links{ display:none; }
  .nav-search{ display:none; }
  .support-grid{ grid-template-columns:1fr; }
  .rules-grid{ grid-template-columns:1fr; }
  .rules-grid .rail{ grid-template-columns:1fr; }
  .rulecards{ grid-template-columns:1fr; }
  .guidegrid{ grid-template-columns:1fr; }
  .featured{ grid-template-columns:1fr; }
  .featured .art{ min-height:120px; border-right:0; border-bottom:1px solid var(--line-soft); }
  .statbar{ grid-template-columns:1fr 1fr; }
  .statbar .cell:nth-child(2){ border-right:0; }
  .pstats{ grid-template-columns:1fr 1fr; }
  .dash-stats{ grid-template-columns:1fr; }
  .indexgrid{ grid-template-columns:1fr; }
  .tl-time{ display:none; }
  .casemeta{ grid-template-columns:1fr; }
  .hstats{ grid-template-columns:1fr; }
  .container{ width:calc(100% - 32px); }
}

/* ============================================================
   ERGÄNZUNGEN – fehlende Klassen & Seitenspezifika
   ============================================================ */

/* ── Farb-Utilities ── */
.c-red { color: var(--red) !important; }
.c-green { color: var(--green) !important; }
.c-cyan { color: var(--cyan) !important; }
.c-amber { color: var(--amber-2) !important; }
.muted-2 { color: var(--muted-2, #4a5a7a); }
.mt-4  { margin-top: 4px; }
.mt-6  { margin-top: 6px; }
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-16 { margin-bottom: 16px; }
.grow  { flex: 1 1 0; }
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.flex-wrap { flex-wrap: wrap; }
.tiny  { font-size: 11px; }

/* ── rt-row Farben ── */
.rt-row.purple .ic, .rt-row.purple .b { color: var(--violet); }
.rt-row.amber  .ic, .rt-row.amber  .b { color: var(--amber-2); }

/* ── Kicker-Farbvarianten ── */
.kicker.k-purple { color: #fca5a5; }
.kicker.k-amber  { color: var(--amber-2); }

/* ── date/time/select dark-mode ── */
input[type="date"], input[type="time"] { color-scheme: dark; }

/* ── Chest-Farb-Shift ── */
.chest-cyan {
  filter: hue-rotate(155deg) saturate(1.6) brightness(1.15)
          drop-shadow(0 0 14px rgba(255,106,26,.5));
}

/* ── Wiki-Artikel Layout ── */
.wiki-art-grid {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 28px;
  align-items: start;
  padding-bottom: 64px;
}
@media (max-width: 900px) {
  .wiki-art-grid { grid-template-columns: 1fr; }
}

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted);
  padding: 12px 0;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb span { color: var(--text); }

/* ── Artikel-Header ── */
.art-head { padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.h-lg { font-size: clamp(24px,4vw,38px); }

/* ── Tags ── */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-size: 11.5px; font-weight: 600; border-radius: 6px;
  padding: 3px 10px; background: rgba(255,255,255,.06);
  color: var(--muted); border: 1px solid var(--border);
}
.tag.tag-hl { background: rgba(255,106,26,.12); color: var(--cyan); border-color: rgba(255,106,26,.2); }
.tag.tag-muted { opacity: .65; }

/* ── Accordion ── */
.acc { overflow: hidden; }
.acc + .acc { margin-top: 0; }
.acc-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; background: none; border: none; width: 100%;
  cursor: pointer; text-align: left; color: var(--text);
}
.acc-head:hover { background: rgba(255,255,255,.03); }
.acc-meta { display: flex; align-items: center; gap: 8px; }
.acc-num { font-size: 11px; font-weight: 800; color: var(--muted); font-family: 'Archivo', sans-serif; min-width: 20px; }
.acc-ic svg { display: block; }
.acc-title { font-weight: 700; font-size: 14.5px; flex: 1; }
.acc-prev { font-size: 12.5px; color: var(--muted); flex: 2; display: none; }
.acc-chev { transition: transform .2s; flex: none; }
.acc.open .acc-chev { transform: rotate(180deg); }
.acc-body {
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
  padding: 0 20px;
}
.acc.open .acc-body { padding-bottom: 18px; }
.acc-body p { font-size: 13.5px; color: var(--muted); line-height: 1.7; margin-top: 10px; }
.acc-body p:first-child { margin-top: 0; }
@media (min-width: 640px) {
  .acc-prev { display: block; }
}

/* ── Tipp-Bar ── */
.tipbar {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(234,179,8,.07); border: 1px solid rgba(234,179,8,.18);
  border-radius: 10px; padding: 14px 18px;
  font-size: 13.5px; color: var(--muted); line-height: 1.6;
}
.tipbar strong { color: var(--text); }

/* ── Vote-Bar ── */
.votebar { display: flex; gap: 10px; }
.votebtn {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(255,255,255,.04); color: var(--muted); cursor: pointer;
  font-size: 13px; font-weight: 600; transition: background .15s, border-color .15s;
}
.votebtn:hover { background: rgba(255,255,255,.08); }
.votebtn.on-up   { background: rgba(255,106,26,.12); border-color: rgba(255,106,26,.3); color: var(--cyan); }
.votebtn.on-down { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.3);  color: var(--red); }

/* ── Art-Bottom ── */
.art-bottom {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 580px) { .art-bottom { grid-template-columns: 1fr; } }

/* ── Video-Mockup ── */
.video { cursor: pointer; }
.thumb {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: linear-gradient(160deg, #1c0a00 0%, #0a0401 100%);
  border-radius: 10px 10px 0 0;
}
.thumb-art {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; gap: 0;
}
.thumb-label {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  text-align: center;
}
.thumb-label .t { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 15px; letter-spacing: .08em; color: #fff; }
.thumb-label .s { font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: .06em; }
.playbtn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.4);
  color: #fff; display: flex; align-items: center; justify-content: center;
  transition: opacity .2s, background .15s; cursor: pointer;
}
.playbtn:hover { background: rgba(255,255,255,.25); }
.controls {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: rgba(8,3,2,.8);
  border-radius: 0 0 10px 10px; font-size: 11.5px; color: var(--muted);
}
.track {
  flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); position: relative;
}
.track i {
  display: block; height: 100%; border-radius: 2px;
  background: var(--cyan); width: 0; transition: width .5s linear;
}
.vtime { font-size: 11px; font-family: monospace; white-space: nowrap; }
.card-pad-sm { padding: 12px 16px 0; }

/* ── Schnellcheck-Ring ── */
.check-ring-wrap { display: flex; gap: 16px; align-items: flex-start; }
[data-ring] { position: relative; flex: none; width: 86px; height: 86px; }
[data-ring] svg { width: 86px; height: 86px; transform: rotate(-90deg); }
[data-ring] .bgc { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 6; }
[data-ring] .fgc { fill: none; stroke: var(--cyan); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .4s, stroke .3s; }
.mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mid .a { font-weight: 800; font-size: 15px; font-family: 'Archivo', sans-serif; }
.mid .b { font-size: 10px; color: var(--muted); }
.checks { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }
.check input { accent-color: var(--cyan); }
.check-msg { color: var(--muted); line-height: 1.5; }
.chest-showcase { text-align: center; }
.chest-big { display: inline-block; width: 48px; height: 48px; }

/* ── Support-Grid ── */
.support-grid {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: 24px; align-items: start;
  padding-bottom: 64px;
}
@media (max-width: 1080px) {
  .support-grid { grid-template-columns: 1fr 1fr; }
  .support-grid > .side-stack { display: none; }
}
@media (max-width: 640px) {
  .support-grid { grid-template-columns: 1fr; }
}

.card-accent.acc-purple { border-top: 3px solid var(--violet); }
.card-accent.acc-amber  { border-top: 3px solid var(--amber-2); }
.card-accent.acc-cyan   { border-top: 3px solid var(--cyan); }
.card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
}
.card-body { padding: 18px 20px; }
.hero-infocard { max-width: 320px; }
.hero-infocard .hd { font-weight: 700; font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.hero-infocard p { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
.hero-side { background: rgba(14,5,2,.8); backdrop-filter: blur(12px); }
.tickline { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; color: var(--muted); }
.tickline svg { color: var(--green); flex: none; }

/* ── Regelwerk-Grid ── */
.rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 280px;
  gap: 24px; align-items: start;
  padding-bottom: 20px;
}
@media (max-width: 1080px) {
  .rules-grid { grid-template-columns: 1fr 1fr; }
  .rules-grid > .rail { display: none; }
}
@media (max-width: 640px) { .rules-grid { grid-template-columns: 1fr; } }

.rulecards { display: flex; flex-direction: column; gap: 12px; }
.rulecard {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--border);
  border-radius: 10px; text-decoration: none; color: var(--text);
  transition: background .15s, border-color .15s;
}
.rulecard:hover { background: rgba(255,255,255,.04); border-color: rgba(255,106,26,.25); }
.rulecard .t { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.rulecard .arr { color: var(--muted); }
.rulecard p { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.allrules {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,106,26,.05); border: 1px solid rgba(255,106,26,.12);
  border-radius: 10px; padding: 14px 16px;
}
.allrules .t { font-weight: 700; font-size: 13.5px; }
.allrules p { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.allrules .shield { flex: none; width: 36px; height: 36px; }
.warncard { background: rgba(251,191,36,.04); border: 1px solid rgba(251,191,36,.15) !important; }
.qlinks { display: flex; flex-direction: column; gap: 2px; }
.qlink {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 8px; text-decoration: none;
  font-size: 13px; color: var(--muted); transition: background .12s, color .12s;
}
.qlink:hover { background: rgba(255,255,255,.05); color: var(--text); }
.qlink .arr { margin-left: auto; }

/* ── Wiki-Grid ── */
.wiki-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px; align-items: start;
  padding-bottom: 20px;
}
@media (max-width: 900px) { .wiki-grid { grid-template-columns: 1fr; } }

.wikisearch {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  border-radius: 10px; padding: 0 14px; margin-top: 22px; max-width: 560px;
}
.wikisearch svg { color: var(--muted); flex: none; }
.wikisearch input {
  flex: 1; background: none; border: none; padding: 12px 0;
  color: var(--text); font-size: 14px; outline: none;
}
.wikisearch .select { border: none; background: none; font-size: 12.5px; }

.featured {
  display: flex; overflow: hidden; border: 1px solid rgba(255,106,26,.2);
}
.featured .art { width: 220px; flex: none; overflow: hidden; }
.featured .art svg { display: block; width: 100%; height: 100%; }
.featured .fx { padding: 22px; }
.featured .t { font-size: 20px; font-weight: 800; font-family: 'Archivo', sans-serif; letter-spacing: .02em; }
.featured p { font-size: 13.5px; color: var(--muted); margin: 8px 0 18px; line-height: 1.6; }
@media (max-width: 640px) { .featured { flex-direction: column; } .featured .art { width: 100%; height: 140px; } }

.guidegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.guidecard { padding: 18px 16px; text-decoration: none; color: var(--text); transition: border-color .15s; }
.guidecard:hover { border-color: rgba(255,106,26,.3); }
.guidecard .t { font-weight: 700; font-size: 14px; margin: 10px 0 6px; }
.guidecard p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.guidecard .more { font-size: 12px; color: var(--cyan); margin-top: 10px; display: flex; align-items: center; gap: 4px; }
.wk-fact { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--border); }
.wk-fact:first-child { border-top: none; }
.wk-fact .a { font-weight: 700; font-size: 12.5px; }
.wk-fact .b { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── Statbar ── */
.statbar { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.statbar .cell {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; border-right: 1px solid var(--border);
}
.statbar .cell:last-child { border-right: none; }
.statbar .n { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 20px; }
.statbar .l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.statbar .ic { color: var(--cyan); flex: none; }
@media (max-width: 820px) { .statbar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .statbar { grid-template-columns: 1fr; } }

/* ── Index-Grid ── */
.indexgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.indexcard { padding: 22px 20px; text-decoration: none; color: var(--text); transition: border-color .15s; }
.indexcard:hover { border-color: rgba(255,106,26,.3); }
.indexcard .t { font-weight: 700; font-size: 15px; margin: 12px 0 8px; }
.indexcard p { font-size: 13px; color: var(--muted); line-height: 1.6; }
.indexcard .more { font-size: 12.5px; color: var(--cyan); margin-top: 12px; display: flex; align-items: center; gap: 4px; }

/* ── Shell (Dashboard) ── */
.shell-page body, .shell-page { min-height: 100vh; }
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px; flex: none;
  background: var(--bg-2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sb-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 20px 16px; text-decoration: none;
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 16px;
  letter-spacing: .06em; color: var(--text);
}
.snav { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; flex: 1; }
.snav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; text-decoration: none;
  font-size: 13.5px; color: var(--muted); transition: background .12s, color .12s;
}
.snav-item:hover { background: rgba(255,255,255,.05); color: var(--text); }
.snav-item.active { background: rgba(255,106,26,.12); color: var(--cyan); font-weight: 600; }
.sb-foot { padding: 16px 20px; border-top: 1px solid var(--border); }
.sb-site { font-size: 11.5px; font-weight: 700; color: var(--muted); text-decoration: none; display: flex; align-items: center; gap: 5px; }
.sb-site:hover { color: var(--cyan); }
.main-col { flex: 1; min-width: 0; padding: 24px 28px; overflow-x: hidden; }

/* ── Topbar ── */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.mechip { display: flex; align-items: center; gap: 10px; }
.mname { font-weight: 700; font-size: 14px; }
.mrole { font-size: 12px; color: var(--muted); }
.topbar-actions { display: flex; gap: 8px; }

/* ── Dash-Grid ── */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr repeat(4, auto);
  gap: 14px; align-items: stretch;
}
.dash-hero {
  background: linear-gradient(135deg, #160905 0%, #07121f 100%);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 24px 28px; position: relative; overflow: hidden;
}
.dash-hero [data-hero-art] { position: absolute; inset: 0; pointer-events: none; }
.dash-stat {
  min-width: 130px; border-radius: 12px;
  padding: 18px 20px; border: 1px solid var(--border);
}
.ds-ic { margin-bottom: 8px; }
.ds-n { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 28px; }
.ds-l { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.ds-d { font-size: 11.5px; font-weight: 700; margin-top: 6px; }
@media (max-width: 1080px) { .dash-grid { grid-template-columns: 1fr 1fr; } }

/* ── Filterbar ── */
.filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 14px; }
.search-wrap { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; }
.search-wrap input { background: none; border: none; padding: 9px 0; font-size: 13px; color: var(--text); outline: none; width: 100%; }

/* ── Tabelle ── */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: 10px 14px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--border); }
.tbl th { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; background: rgba(255,255,255,.02); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: rgba(255,255,255,.025); }
.tid a { color: var(--cyan); text-decoration: none; font-family: monospace; font-size: 12.5px; }
.tbl-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 0; }

/* ── Chips & Pills ── */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 3px 8px; }
.chip-report { background: rgba(220,38,38,.15); color: #f87171; }
.chip-bug    { background: rgba(251,191,36,.14); color: var(--amber-2); }
.chip-unban  { background: rgba(239,68,68,.12);  color: #f87171; }
.chip-green  { background: rgba(74,222,128,.12); color: var(--green); }
.pill { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; border-radius: 99px; padding: 3px 10px; }
.pill-neu      { background: rgba(255,106,26,.15);  color: var(--cyan); }
.pill-progress { background: rgba(220,38,38,.15);  color: #f87171; }
.pill-wait     { background: rgba(251,191,36,.13);  color: var(--amber-2); }
.pill-check    { background: rgba(220,38,38,.14);  color: #f87171; }
.pill-done     { background: rgba(74,222,128,.13);  color: var(--green); }
.pill-expired  { background: rgba(100,116,139,.14); color: #94a3b8; }
.pill-denied   { background: rgba(239,68,68,.13);   color: #f87171; }
.pill-info     { background: rgba(255,106,26,.1);   color: #ffb347; }
.pill-solved   { background: rgba(74,222,128,.13);  color: var(--green); }

/* ── Badges ── */
.badge { font-size: 10px; font-weight: 700; border-radius: 4px; padding: 2px 6px; letter-spacing: .04em; }
.badge-admin  { background: rgba(239,68,68,.18);   color: #f87171; }
.badge-mod    { background: rgba(220,38,38,.18);  color: #f87171; }
.badge-team   { background: rgba(100,116,139,.2);  color: #94a3b8; }
.badge-sup    { background: rgba(234,179,8,.15);   color: var(--gold); }

/* ── Pager ── */
.pager { display: flex; gap: 4px; align-items: center; }
.page {
  min-width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border);
  background: none; color: var(--muted); font-size: 13px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 6px;
}
.page.on { background: var(--cyan); color: #fff; border-color: var(--cyan); }
.page.dots { border: none; cursor: default; }

/* ── Dash-Bottom ── */
.dash-bottom { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 16px; margin-top: 20px; }
@media (max-width: 900px) { .dash-bottom { grid-template-columns: 1fr; } }

/* ── Feed ── */
.feed { display: flex; flex-direction: column; gap: 10px; }
.fitem { display: flex; align-items: flex-start; gap: 9px; }
.fb { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.fn { font-weight: 700; color: var(--text); }
.ft { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.morelink { display: inline-block; font-size: 12.5px; color: var(--cyan); text-decoration: none; }
.morelink:hover { text-decoration: underline; }

/* ── Donut ── */
.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut {
  width: 88px; height: 88px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.donut::after {
  content: ''; position: absolute;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--bg-card, #140805);
}
.donut-mid { position: relative; z-index: 1; text-align: center; }
.donut-mid .n { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 17px; }
.donut-mid .l { font-size: 9.5px; color: var(--muted); }
.dleg { display: flex; align-items: center; gap: 7px; font-size: 12.5px; margin-bottom: 6px; }
.dleg .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* ── Dashfoot ── */
.dashfoot { font-size: 12px; color: var(--muted); margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.dashfoot .sep { margin: 0 8px; }

/* ── Team-Toolbar ── */
.team-toolbar { display: flex; align-items: center; gap: 12px; padding-top: 14px; padding-bottom: 4px; flex-wrap: wrap; }
.bigsearch {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  border-radius: 10px; padding: 0 14px; max-width: 440px;
}
.bigsearch input { flex: 1; background: none; border: none; padding: 10px 0; font-size: 14px; color: var(--text); outline: none; }
.searchchip { font-size: 12px; background: rgba(255,106,26,.1); color: var(--cyan); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.shortcut-hint kbd { background: rgba(255,255,255,.08); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 11px; }

/* ── Profil-Grid ── */
.profile-grid {
  display: grid;
  grid-template-columns: 260px 1fr 280px;
  gap: 20px; align-items: start;
  padding-bottom: 48px;
}
@media (max-width: 1100px) { .profile-grid { grid-template-columns: 240px 1fr; } .profile-grid aside { display: none; } }
@media (max-width: 720px)  { .profile-grid { grid-template-columns: 1fr; } }

.player-card { text-align: center; }
.pname { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 20px; letter-spacing: .02em; }
.puuid { word-break: break-all; display: flex; align-items: center; justify-content: center; gap: 5px; }
.ponline { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pbadges { display: flex; justify-content: center; gap: 6px; }
.pstats { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.mstat { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; text-align: center; }
.mstat .lbl { font-size: 10.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.mstat .val { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14px; margin: 4px 0 2px; }
.mstat .sub { font-size: 11px; color: var(--muted); }

/* ── Verlauf (History Items) ── */
.hitem { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.hitem:last-child { border-bottom: none; }
.hdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.hicon { flex: none; display: flex; align-items: center; }
.hcol { flex: 2; min-width: 0; }
.ht { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.hw { margin-top: 2px; }
.hmeta { flex: 3; }
.btn-xs { padding: 4px 10px; font-size: 11.5px; border-radius: 6px; }
.select-sm { padding: 5px 10px; font-size: 12.5px; }
.card-foot { padding: 10px 20px; border-top: 1px solid var(--border); }

/* ── Notes ── */
.notes { display: flex; flex-direction: column; gap: 12px; }
.note { display: flex; align-items: flex-start; gap: 10px; }
.note .body { flex: 1; }
.note .who { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.note .when { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.note .txt { font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 4px; }
.rowmenu { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.rowmenu:hover { background: rgba(255,255,255,.06); }

/* ── KV-List ── */
.kv-list { display: flex; flex-direction: column; gap: 8px; }
.kv { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.kv > span:first-child { color: var(--muted); }

/* ── Bar-slim ── */
.bar-slim { display: inline-flex; width: 60px; height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.bar-slim i { display: block; height: 100%; background: var(--amber-2); border-radius: 2px; }

/* ── Account-Status Copybtn ── */
.copybtn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.copybtn:hover { color: var(--cyan); background: rgba(255,106,26,.1); }

/* ── Userlines ── */
.userlines { display: flex; flex-direction: column; gap: 8px; }
.uline { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.urole { margin-left: auto; font-size: 11.5px; color: var(--muted); }

/* ── Evrows ── */
.evrows { display: flex; flex-direction: column; gap: 8px; }
.evrow { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.evrow:last-child { border-bottom: none; }

/* ── Decis ── */
.decis { display: flex; align-items: flex-start; gap: 10px; }
.decis .dt { font-weight: 700; font-size: 13.5px; }
.decis.ok { color: var(--green); }
.decis.no { color: var(--red); }
.decis p { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* ── Reco ── */
.reco { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.reco.hl { background: rgba(255,106,26,.06); border: 1px solid rgba(255,106,26,.14); border-radius: 8px; padding: 10px 12px; }

/* ── Case-Grid ── */
.case-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px; align-items: start;
  padding-bottom: 48px;
}
.casehead { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.casemeta { min-width: 240px; }
.summary-box { background: rgba(255,255,255,.03); border-radius: 8px; padding: 10px 14px; border: 1px solid var(--border); }
.case-main { min-width: 0; }
@media (max-width: 1100px) { .case-grid { grid-template-columns: 1fr; } }

/* ── Timeline ── */
.timeline { display: flex; flex-direction: column; gap: 0; padding: 0 20px; }
.tl-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.tl-item:last-child { border-bottom: none; }
.tl-time { font-size: 11px; color: var(--muted); min-width: 90px; padding-top: 3px; font-family: monospace; }
.tl-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: rgba(255,255,255,.08); }
.tl-body { flex: 1; }
.tl-title { font-weight: 700; font-size: 13.5px; }
.tl-actor { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 4px; }
.tl-desc { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.tl-state { display: inline-block; font-size: 11px; font-weight: 700; margin-top: 6px; }

/* ── Commentbar ── */
.commentbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Hist-Grid ── */
.hist-head { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.hstats { display: flex; flex-wrap: wrap; gap: 10px; }
.hist-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px; align-items: start;
  padding-bottom: 48px;
}
@media (max-width: 1000px) { .hist-grid { grid-template-columns: 1fr; } }
.tbl-hist th:last-child, .tbl-hist td:last-child { display: none; }
.hist-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 740px) { .hist-bottom { grid-template-columns: 1fr; } }
.linkrows { display: flex; flex-direction: column; gap: 8px; }
.linkrow { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.linkrow:last-child { border-bottom: none; }

/* ── Dot-Online ── */
.dot-online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }

/* ── Nav-Search ── */
.nav-search {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  border-radius: 8px; padding: 0 10px; height: 34px; margin-left: auto;
}
.nav-search input { background: none; border: none; font-size: 13px; color: var(--text); outline: none; width: 140px; }
.nav-search kbd { font-size: 10px; background: rgba(255,255,255,.07); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--muted); }

/* ── Form-Extras ── */
.select-sm { padding: 6px 10px; font-size: 12.5px; }
.btn-danger {
  background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.3);
  color: #f87171; border-radius: 8px; padding: 8px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.btn-danger:hover { background: rgba(239,68,68,.25); }
.btn-danger:disabled { opacity: .5; cursor: not-allowed; }
.btn-blue {
  background: rgba(220,38,38,.18); border: 1px solid rgba(220,38,38,.3);
  color: #f87171; border-radius: 8px; padding: 8px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.btn-blue:hover { background: rgba(220,38,38,.28); }
.btn-sm { padding: 7px 14px; font-size: 12.5px; }

/* ── Toast ── */
.toasts { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast {
  display: flex; align-items: center; gap: 10px;
  background: #1e0d04; border: 1px solid rgba(255,106,26,.2);
  border-radius: 10px; padding: 12px 16px; min-width: 260px; max-width: 360px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); font-size: 13.5px;
  animation: tslide .3s ease;
}
.toast.ok   { border-color: rgba(74,222,128,.3); }
.toast.err  { border-color: rgba(239,68,68,.3); }
.toast.out  { animation: tsout .3s ease forwards; }
.toast svg  { flex: none; }
.toast.ok svg  { color: var(--green); }
.toast.err svg { color: var(--red); }
@keyframes tslide { from { opacity:0; transform: translateX(24px); } to { opacity:1; transform: none; } }
@keyframes tsout  { to   { opacity:0; transform: translateX(24px); } }

/* ── Misc ── */
.btn-purple { background: rgba(220,38,38,.18); border: 1px solid rgba(220,38,38,.3); color: #f87171; border-radius: 8px; padding: 10px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .15s; }
.btn-purple:hover { background: rgba(220,38,38,.28); }
.btn-amber  { background: rgba(251,191,36,.15);  border: 1px solid rgba(251,191,36,.3);  color: var(--amber-2); border-radius: 8px; padding: 10px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .15s; }
.btn-amber:hover  { background: rgba(251,191,36,.25); }
.btn-block { width: 100%; display: flex; justify-content: center; }
.btn-cyan  { background: rgba(255,106,26,.18); border: 1px solid rgba(255,106,26,.3); color: var(--cyan); border-radius: 8px; padding: 10px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .15s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.btn-cyan:hover  { background: rgba(255,106,26,.28); }
.btn-ghost { background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.btn-ghost:hover { background: rgba(255,255,255,.09); color: var(--text); }

/* ── Dropdown ── */
.dd { position: relative; }
.dd-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; background: #180a02; border: 1px solid var(--border); border-radius: 10px; padding: 6px; min-width: 180px; z-index: 200; box-shadow: 0 12px 32px rgba(0,0,0,.4); }
.dd.open .dd-menu { display: flex; flex-direction: column; }
.dd-item { padding: 9px 12px; border-radius: 7px; font-size: 13px; cursor: pointer; color: var(--muted); transition: background .1s, color .1s; }
.dd-item:hover { background: rgba(255,255,255,.06); color: var(--text); }

/* ── Dropzone ── */
.dropzone { border: 2px dashed var(--border); border-radius: 10px; padding: 20px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.drag { border-color: var(--cyan); background: rgba(255,106,26,.04); }
.dropzone.invalid { border-color: var(--red); }
.dz-icon { display: block; width: 32px; height: 32px; margin: 0 auto 8px; color: var(--muted); }
.dz-title { font-size: 13.5px; color: var(--muted); }
.dz-title .link { color: var(--cyan); text-decoration: underline; }
.dz-sub { font-size: 12px; color: var(--muted); margin-top: 4px; opacity: .7; }
.dz-files { margin-top: 10px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.dz-file { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.04); border-radius: 7px; padding: 6px 10px; font-size: 12.5px; }
.dz-file .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-file .size { color: var(--muted); font-size: 11px; }
.dz-file .rm  { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px; }

/* ── Field & Form ── */
.field { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; }
.field:first-child { margin-top: 0; }
.label { font-size: 12.5px; font-weight: 700; color: var(--text); }
.req   { color: var(--red); }
.hint  { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.input, .textarea, .select {
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 12px; font-size: 13.5px;
  color: var(--text); outline: none; font-family: 'Inter', sans-serif;
  transition: border-color .15s;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--cyan); }
.input.invalid, .textarea.invalid, .select.invalid { border-color: var(--red); }
.textarea { min-height: 90px; resize: vertical; }
.select option { background: #140805; }
.row { display: flex; align-items: center; }

/* ── Side-Stack ── */
.side-stack { display: flex; flex-direction: column; gap: 16px; }

/* ── Footer ── */
.footer { border-top: 1px solid var(--border); padding: 20px 0; }
.footer .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--muted); }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--cyan); }

/* ============================================================
   EMBERCITY – Rebranding Patches
   ============================================================ */

/* ── Logo-Image in Nav & Sidebar ── */
.logo-img {
  height: 42px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 8px rgba(255,100,0,.35));
  transition: filter .2s;
}
.logo:hover .logo-img, .sb-logo:hover .logo-img {
  filter: drop-shadow(0 0 14px rgba(255,100,0,.65));
}
.logo { display: flex; align-items: center; }
.sb-logo { padding: 14px 16px 12px; }

/* ── Hero Ember-Sterne (Glut-Partikel) ── */
.hero-stars i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ff7a2a;
  box-shadow: 0 0 6px 2px rgba(255,80,0,.6), 0 0 2px #ffaa44;
  animation: ember-float 4s ease-in-out infinite alternate;
  opacity: .7;
}
@keyframes ember-float {
  0%   { transform: translateY(0)   scale(1);   opacity: .7; }
  50%  { transform: translateY(-8px) scale(1.4); opacity: 1;  }
  100% { transform: translateY(-3px) scale(.8);  opacity: .4; }
}

/* ── Hero Lava-Atmosphäre ── */
.hero {
  background: linear-gradient(160deg, #1a0400 0%, #080100 100%) !important;
  border-bottom: 1px solid rgba(255,80,0,.2);
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 120px;
  background: linear-gradient(to top, rgba(180,30,0,.18) 0%, transparent 100%);
  pointer-events: none;
}

/* ── Nav Lava-Glow ── */
.nav {
  background: rgba(8,1,0,.94) !important;
  border-bottom: 1px solid rgba(255,80,0,.16) !important;
}

/* ── Active Nav-Link Lava ── */
.nav-link.active {
  color: #ff6a1a !important;
}
.nav-link.active::after {
  background: #ff5500 !important;
}

/* ── Lava-Glow auf Buttons & Karten ── */
.btn-cyan:hover, .btn-cyan:focus {
  box-shadow: 0 0 18px rgba(255,90,0,.35) !important;
}
.card:hover {
  border-color: rgba(255,80,0,.28) !important;
}