/* ==========================================================
   Knox County Survivors – Project Zomboid Panel
   Theme: Draco-Gaming (Drachen-Feuer: Schwarz / Rot / Orange / Gold)
   ========================================================== */
:root{
  --bg:#0a0805; --bg2:#13100a; --panel:#1a1410; --panel2:#221814;
  --line:#3d2820; --line2:#5a3828;
  --txt:#f0e8dc; --muted:#a89078;
  --acc:#e0651a;        /* Draco-Feuer-Orange */
  --acc-d:#b8451a;
  --warn:#f0a030;
  --bad:#d02020;
  --ok:#50a830;
  --blood:#8e1a1a;
  --gold:#f0c040;
  --r:10px; --r-s:6px;
  --sh:0 6px 20px rgba(0,0,0,.55);
  --mono:ui-monospace,"Consolas","Courier New",monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(26,16,8,.85) 0%, transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, rgba(28,18,8,.8) 0%, transparent 55%),
    radial-gradient(800px 400px at 50% 100%, rgba(21,10,5,.9) 0%, transparent 50%),
    linear-gradient(180deg, rgba(10,8,5,.75) 0%, rgba(10,8,5,.85) 100%),
    url('../img/bg.jpg') center center / cover no-repeat fixed,
    var(--bg);
  color:var(--txt); font-family:'Rubik',system-ui,sans-serif; font-size:15px; line-height:1.55;
  min-height:100vh; display:flex; flex-direction:column;
}
h1,h2,h3,h4{font-family:'Oswald',Impact,sans-serif; letter-spacing:.5px; margin:0 0 .5em; font-weight:700}
h1{font-size:2rem} h2{font-size:1.3rem} h3{font-size:1.08rem}
a{color:var(--acc); text-decoration:none}
a:hover{color:var(--gold); text-decoration:underline}
p{margin:0 0 .8em}
code{font-family:var(--mono); background:#0a0604; border:1px solid var(--line); padding:1px 6px; border-radius:4px; font-size:.88em}
.pre{font-family:var(--mono); background:#0a0604; border:1px solid var(--line); padding:12px; border-radius:var(--r-s); overflow:auto; white-space:pre-wrap; font-size:.85rem}
hr{border:0; border-top:1px solid var(--line); margin:18px 0}

/* ---------- Utilities ---------- */
.muted{color:var(--muted)}
.small{font-size:.82rem}
.ok{color:var(--ok)} .bad{color:var(--bad)} .warn{color:var(--warn)}
.center{text-align:center}
.mt{margin-top:14px} .mb{margin-bottom:14px} .m0{margin:0}
.grow{flex:1 1 auto; min-width:0}
.row{display:flex; align-items:center}
.row.gap{gap:10px} .row.between{justify-content:space-between} .row.wrap{flex-wrap:wrap}
.col{display:flex; flex-direction:column; gap:16px}
.hide{display:none !important}
.nowrap{white-space:nowrap}
.mono{font-family:var(--mono)}

/* ---------- Bootscreen v2 — PDA Boot Sequence ---------- */
.boot{
  position:fixed; inset:0; z-index:9999;
  background: radial-gradient(circle at 50% 50%, #15100c, #0a0805);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease-out;
  overflow:hidden;
}
.boot.out{opacity:0; pointer-events:none}

/* Optional: Background Grid */
.boot::before {
  content:"";
  position:absolute; inset:0;
  background-image: 
    linear-gradient(rgba(74,56,40,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,56,40,0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events:none;
  mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
}

.boot-in{
  width:90%;
  max-width:420px;
  background: linear-gradient(160deg, #15100c 0%, #0c0a08 100%);
  border: 2px solid #4a3828;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), inset 0 0 30px rgba(0,0,0,0.5);
  padding: 40px 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.boot-in::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--acc), var(--gold), var(--acc));
}

.boot-logo{
  font-size: 3rem;
  color: var(--acc);
  filter: drop-shadow(0 0 15px rgba(224,101,26,0.6));
  animation: logoPulse 2s infinite ease-in-out;
  margin-bottom: 10px;
}
@keyframes logoPulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.boot-title{
  font-family: 'Oswald', sans-serif;
  font-size: 1.2rem;
  color: var(--gold);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 25px;
  text-shadow: 0 0 10px rgba(240,192,64,0.3);
}

.boot-terminal{
  background: #050403;
  border: 1px solid #2a1c12;
  border-radius: 2px;
  padding: 12px;
  margin-bottom: 20px;
  height: 90px;
  text-align: left;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: #5a8f8f; /* CRT greenish */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.boot-terminal::after { /* scanlines */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 3px);
  pointer-events: none;
}

#bootLog div {
  margin-bottom: 4px;
  opacity: 0;
  animation: fadeInLog 0.3s forwards;
}
#bootLog .ok { color: var(--ok); }
#bootLog .warn { color: var(--warn); }
#bootLog .err { color: var(--bad); }

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

.boot-bar{
  width: 100%;
  height: 4px;
  background: #0a0604;
  border: 1px solid #2a1c12;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 15px;
}
.boot-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--acc-d), var(--acc));
  box-shadow: 0 0 8px rgba(224,101,26,0.5);
  animation: loadBar 3s ease-out forwards;
}
@keyframes loadBar {
  0% { width: 0%; }
  100% { width: 100%; }
}

.boot-status{
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.boot-status::before {
  content: "▸ ";
  color: var(--acc);
  animation: cursorBlink 1s steps(2) infinite;
}
@keyframes cursorBlink {
  50% { opacity: 0; }
}

/* ---------- Topbar ---------- */
.topbar{position:sticky; top:0; z-index:120; display:flex; align-items:center; gap:14px;
  padding:0 18px; height:60px; background:rgba(10,8,5,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  box-shadow:0 2px 14px rgba(0,0,0,.5)}
.brand{display:flex; align-items:center; gap:10px; color:var(--txt) !important; text-decoration:none !important; flex:0 0 auto}
.brand .mark{font-size:1.6rem; color:var(--acc); line-height:1; text-shadow:0 0 12px rgba(224,101,26,.6)}
.brand-txt{font-family:'Oswald',sans-serif; font-size:1.12rem; letter-spacing:1.5px; line-height:1}
.brand-txt b{color:var(--gold); text-shadow:0 0 10px rgba(240,192,64,.4)}
.brand-txt small{display:block; font-size:.6rem; letter-spacing:2.4px; color:var(--muted); font-family:'Rubik',sans-serif}
/* ---------- Burger Button (nur Mobile) ---------- */
.burger{
  display:none;
  background:none;
  border:1px solid var(--line);
  color:var(--txt);
  font-size:1.2rem;
  padding:4px 12px;
  border-radius:var(--r-s);
  cursor:pointer;
  margin-right:auto;
}
/* ===== Navigation mit Dropdowns ===== */
.nav{display:flex; gap:0; flex:1 1 auto; align-items:center; overflow:visible; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-item,.nav-dropdown>button{
  background:none; border:0; color:var(--muted); font-size:.88rem; font-weight:600;
  padding:8px 12px; cursor:pointer; text-decoration:none !important; white-space:nowrap;
  font-family:inherit; transition:.15s; border-radius:var(--r-s);
}
.nav-item:hover,.nav-dropdown:hover>button,.nav-dropdown.open>button{
  color:var(--txt); background:var(--panel2);
}
.nav-item.active{color:var(--acc) !important; background:rgba(224,101,26,.14)}
.nav-dropdown{position:relative}
.nav-right{margin-left:auto}

/* Unsichtbarer Steg zwischen Button und Menü */
.nav-dropdown::after{
  content:"";
  position:absolute;
  top:100%;
  left:0;
  right:0;
  height:10px;
}

.nav-menu{
  display:none; position:absolute; top:calc(100% + 10px); left:0;
  background:var(--panel); border:1px solid var(--line2); border-radius:var(--r);
  min-width:210px; flex-direction:column; box-shadow:var(--sh); z-index:130; padding:6px;
}
.nav-right .nav-menu{left:auto; right:0}
.nav-dropdown:hover .nav-menu,.nav-dropdown.open .nav-menu{display:flex}
.nav-menu a{
  display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:var(--r-s);
  color:var(--txt) !important; text-decoration:none !important; font-size:.86rem; font-weight:500;
}
.nav-menu a:hover{background:var(--panel2); color:var(--acc) !important}
.nav-menu a .sub{color:var(--muted); font-size:.76rem; margin-left:auto; font-weight:400}
.nav-menu a.danger{color:var(--bad) !important}
.nav-sep{height:1px; background:var(--line); margin:4px 0}
/* ---------- User-Dropdown ---------- */
.umenu{position:relative}
.ubtn{display:flex; align-items:center; gap:8px; background:var(--panel2); border:1px solid var(--line);
  color:var(--txt); padding:4px 10px 4px 4px; border-radius:99px; cursor:pointer; font:inherit; font-size:.9rem}
.ubtn:hover{border-color:var(--acc-d)}
.ubtn .uname{max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ubtn i{font-style:normal; color:var(--muted); font-size:.7rem}
.udrop{position:absolute; right:0; top:calc(100% + 8px); min-width:236px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); padding:6px;
  display:none; flex-direction:column; z-index:130}
.udrop.open{display:flex}
.udrop-head{padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; font-weight:500}
.udrop a,.udrop button{display:block; width:100%; text-align:left; padding:8px 10px; border-radius:var(--r-s);
  background:none; border:0; color:var(--txt) !important; font:inherit; cursor:pointer; text-decoration:none !important}
.udrop a:hover,.udrop button:hover{background:var(--panel2)}
.danger-link{color:var(--bad) !important}

/* ---------- Statusleiste ---------- */
.status-strip{display:flex; flex-wrap:wrap; gap:8px 18px; padding:7px 20px; font-size:.8rem;
  background:linear-gradient(90deg,#15100a,#1e140a); border-bottom:1px solid var(--line); color:var(--muted)}
.status-strip:empty{display:none}
.status-strip b{color:var(--txt)}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:0}
.dot.on{background:var(--ok); box-shadow:0 0 8px var(--ok); animation:pulse 2s infinite}
.dot.off{background:var(--bad)}
@keyframes pulse{50%{opacity:.35}}

/* ---------- Layout ---------- */
.view{flex:1 1 auto; width:100%; max-width:1240px; margin:0 auto; padding:22px 18px 60px;
  display:flex; flex-direction:column; gap:18px}
.grid-2{display:grid; grid-template-columns:1.5fr 1fr; gap:18px; align-items:start}
.grid-2.even{grid-template-columns:1fr 1fr}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.grid-4{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px}

/* ---------- Panels ---------- */
.panel{background:linear-gradient(180deg,var(--panel),#15100a); border:1px solid var(--line);
  border-radius:var(--r); padding:18px 20px; box-shadow:var(--sh); position:relative}
.panel > h1:first-child,.panel > h2:first-child{margin-top:0}
.panel.narrow{max-width:480px; margin:20px auto; width:100%}
.panel.center{text-align:center; padding:44px 20px}
.panel.flat{background:var(--panel); box-shadow:none}
.panel.accent{border-left:3px solid var(--acc)}

/* ---------- Hero ---------- */
.hero{position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:linear-gradient(120deg,#15100a 0%,#1e140a 55%,#22140a 100%)}
.hero:before{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg,rgba(224,101,26,.06) 0 12px,transparent 12px 24px); opacity:.6}
.hero-in{position:relative; padding:44px 34px}
.kicker{display:inline-block; font-size:.74rem; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(240,192,64,.4); background:rgba(240,192,64,.08);
  padding:4px 12px; border-radius:99px}
.hero h1{font-size:clamp(1.9rem,5vw,3.1rem); margin:16px 0 8px; text-transform:uppercase}
.hero h1 b{color:var(--acc); text-shadow:0 0 20px rgba(224,101,26,.5)}
.hero p{max-width:620px; color:#d8d0c4}
.hero-btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.hero-ip{margin-top:16px; font-family:var(--mono); color:var(--muted); font-size:.9rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:linear-gradient(180deg,var(--acc),var(--acc-d)); color:#fff !important; font-weight:700;
  font-family:'Oswald',sans-serif; letter-spacing:.6px; text-transform:uppercase; font-size:.86rem;
  border:0; border-radius:var(--r-s); padding:10px 18px; cursor:pointer; text-decoration:none !important;
  transition:.15s; box-shadow:0 2px 0 #8a2a10, 0 0 15px rgba(224,101,26,.25)}
.btn:hover{filter:brightness(1.15); transform:translateY(-1px); box-shadow:0 3px 0 #8a2a10, 0 0 20px rgba(224,101,26,.4)}
.btn:active{transform:translateY(1px); box-shadow:none}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none}
.btn.ghost{background:transparent; color:var(--txt) !important; border:1px solid var(--line2); box-shadow:none}
.btn.ghost:hover{border-color:var(--acc); color:var(--acc) !important; box-shadow:0 0 10px rgba(224,101,26,.2)}
.btn.danger{background:linear-gradient(180deg,#e03030,#a01010); color:#fff !important; box-shadow:0 2px 0 #700808}
.btn.warn{background:linear-gradient(180deg,#f0b030,#c08010); color:#1a1008 !important; box-shadow:0 2px 0 #8a5a08}
.btn.sm{padding:6px 12px; font-size:.76rem}
.btn.big{padding:14px 26px; font-size:1rem}
.btn.full{width:100%}
.link{background:none; border:0; color:var(--acc); cursor:pointer; font:inherit; padding:0; text-decoration:underline}
.mini-x{background:none; border:0; color:var(--muted); cursor:pointer; font-size:.8rem; padding:0 4px}
.mini-x:hover{color:var(--bad)}
.icon-btn{background:var(--panel2); border:1px solid var(--line); color:var(--txt);
  border-radius:var(--r-s); width:30px; height:28px; cursor:pointer}

/* ---------- Formulare ---------- */
.form{display:flex; flex-direction:column; gap:13px}
label{display:block; font-size:.84rem; color:var(--muted); font-weight:500}
input,select,textarea{width:100%; margin-top:5px; background:#0a0604; color:var(--txt);
  border:1px solid var(--line); border-radius:var(--r-s); padding:10px 12px; font:inherit; font-size:.94rem;
  transition:.15s}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--acc); box-shadow:0 0 0 3px rgba(224,101,26,.14)}
input[type=checkbox]{width:auto; margin:0 8px 0 0; accent-color:var(--acc); vertical-align:-2px}
input[type=color]{height:42px; padding:4px; cursor:pointer}
textarea{resize:vertical; min-height:80px; font-family:inherit}
.check{display:flex; align-items:center; color:var(--txt); font-size:.88rem}
.search{max-width:280px; margin:0}
select{cursor:pointer}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}

/* ---------- Badges ---------- */
.badge{display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  padding:3px 8px; border-radius:99px; border:1px solid; vertical-align:2px; white-space:nowrap}
.role-owner{color:var(--gold); border-color:rgba(240,192,64,.5); background:rgba(240,192,64,.12); text-shadow:0 0 8px rgba(240,192,64,.3)}
.role-admin{color:var(--acc); border-color:rgba(224,101,26,.5); background:rgba(224,101,26,.12)}
.role-mod{color:#5aa9d1; border-color:rgba(90,169,209,.5); background:rgba(90,169,209,.12)}
.role-user{color:var(--muted); border-color:var(--line2); background:rgba(255,255,255,.04)}
.badge.ban{color:#fff; background:var(--blood); border-color:#b3382c}
.badge.ok{color:var(--ok); border-color:rgba(80,168,48,.5); background:rgba(80,168,48,.12)}
.badge.warn{color:var(--warn); border-color:rgba(240,160,48,.5); background:rgba(240,160,48,.12)}
.badge.bad{color:#e6796a; border-color:rgba(208,32,32,.5); background:rgba(208,32,32,.12)}
.badge.neutral{color:var(--muted); border-color:var(--line2)}

/* ---------- Avatar ---------- */
.avatar{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:var(--as,36px); height:var(--as,36px); border-radius:8px;
  background:var(--ac,#e0651a); color:#0a0805; font-family:'Oswald',sans-serif; font-weight:700;
  font-size:calc(var(--as,36px) * .42); letter-spacing:.5px; border:1px solid rgba(0,0,0,.35);
  box-shadow:inset 0 -2px 6px rgba(0,0,0,.25)}

/* ---------- Stats / KV / Bar ---------- */
.stat{background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-s); padding:12px 14px}
.stat span{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted)}
.stat b{display:block; font-family:'Oswald',sans-serif; font-size:1.4rem; margin-top:2px}
.kv{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted); font-size:.86rem}
.bar{height:8px; background:#0a0604; border:1px solid var(--line); border-radius:99px; overflow:hidden; margin:8px 0}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--acc-d),var(--acc))}

/* ---------- Tabellen ---------- */
.table-wrap{overflow-x:auto; margin:0 -4px}
.table{width:100%; border-collapse:collapse; font-size:.9rem}
.table th{text-align:left; font-family:'Oswald',sans-serif; font-size:.76rem; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--muted); padding:9px 10px; border-bottom:2px solid var(--line);
  background:rgba(255,255,255,.02); white-space:nowrap}
.table td{padding:10px; border-bottom:1px solid var(--line); vertical-align:middle}
.table tbody tr:hover{background:rgba(224,101,26,.06)}
.table tr.is-banned{background:rgba(142,26,26,.12)}
.table .actions{display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end}
.rank{font-family:'Oswald',sans-serif; font-size:1.05rem; color:var(--muted); width:44px}
.rank.r1{color:var(--gold)} .rank.r2{color:#c8ccc0} .rank.r3{color:#c98b52}

/* ---------- Karten / Spielerkarten ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:12px}
.pcard{display:flex; gap:12px; align-items:flex-start; background:var(--panel2); border:1px solid var(--line);
  border-radius:var(--r-s); padding:12px; text-decoration:none !important; color:var(--txt) !important; transition:.15s}
.pcard:hover{border-color:var(--acc); transform:translateY(-2px); box-shadow:0 4px 12px rgba(224,101,26,.15)}
.pcard.banned{border-color:#7b2c24; background:rgba(142,26,26,.12)}
.pc-main{min-width:0; flex:1}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
.chips span,.chip{font-size:.72rem; background:#0a0604; border:1px solid var(--line); color:var(--muted);
  padding:2px 8px; border-radius:99px; white-space:nowrap}
a.chip{text-decoration:none !important}
a.chip:hover{border-color:var(--acc); color:var(--acc)}

/* ---------- Profilkopf ---------- */
.prof-head{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.prof-head h1{margin:0 0 4px}

/* ---------- Ankündigungen ---------- */
.ann{border-left:3px solid var(--line2); padding:2px 0 2px 14px; margin-bottom:16px}
.ann.pin{border-left-color:var(--warn); background:rgba(240,160,48,.05)}
.ann h3{margin-bottom:2px}
.ann .meta{font-size:.76rem; color:var(--muted); margin-bottom:6px}
.ann p{margin:0; color:#d8d0c4}

/* ---------- Shoutbox ---------- */
.shoutbox{max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:10px;
  padding:12px; background:#0a0604; border:1px solid var(--line); border-radius:var(--r-s); margin-bottom:12px}
.shout{display:flex; gap:10px}
.shout p{margin:2px 0 0; color:#d8d0c4; word-break:break-word}
.sh-head{display:flex; align-items:center; gap:8px; font-size:.82rem}
.sh-head a{font-weight:700}

/* ---------- Timeline / Totenbuch ---------- */
.timeline{position:relative; padding-left:22px}
.timeline:before{content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--line)}
.tl-item{position:relative; margin-bottom:16px}
.tl-item:before{content:""; position:absolute; left:-20px; top:7px; width:9px; height:9px; border-radius:50%;
  background:var(--panel); border:2px solid var(--acc)}
.tl-item.death:before{border-color:var(--blood)}
.tl-item .meta{font-size:.76rem; color:var(--muted)}

/* ---------- Kopfgeld / Listenkarten ---------- */
.list-item{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--acc);
  border-radius:var(--r-s); padding:12px 14px}
.list-item.hot{border-left-color:var(--blood)}
.list-item.done{opacity:.55; border-left-color:var(--line2)}
.price{font-family:'Oswald',sans-serif; font-size:1.25rem; color:var(--warn)}

/* ---------- Clan ---------- */
.clan-card{display:flex; gap:14px; align-items:center; background:var(--panel2); border:1px solid var(--line);
  border-radius:var(--r-s); padding:14px; text-decoration:none !important; color:var(--txt) !important}
.clan-card:hover{border-color:var(--acc)}
.tag{display:inline-flex; align-items:center; justify-content:center; min-width:56px; height:44px; padding:0 8px;
  border-radius:var(--r-s); background:var(--c,#e0651a); color:#0a0805; font-family:'Oswald',sans-serif;
  font-size:1.05rem; font-weight:700; letter-spacing:1px}
.clan-banner{display:flex; gap:18px; align-items:center; flex-wrap:wrap}

/* ---------- Tabs ---------- */
.tabs{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:18px}
.tabs button{background:none; border:0; border-bottom:2px solid transparent; color:var(--muted);
  padding:9px 14px; cursor:pointer; font-family:'Oswald',sans-serif; letter-spacing:.8px;
  text-transform:uppercase; font-size:.84rem}
.tabs button:hover{color:var(--txt)}
.tabs button.active{color:var(--acc); border-bottom-color:var(--acc)}

/* ---------- Leerstatus / Laden ---------- */
.loading{display:flex; align-items:center; gap:10px; justify-content:center; color:var(--muted); padding:26px}
.empty{text-align:center; color:var(--muted); padding:30px 14px}
.empty .ei{font-size:2rem; opacity:.6; margin-bottom:6px}
.notice{border-radius:var(--r-s); padding:12px 14px; border:1px solid; margin-bottom:14px}
.notice.warn{background:rgba(240,160,48,.1); border-color:rgba(240,160,48,.45); color:#f0d28a}
.notice.bad{background:rgba(208,32,32,.1); border-color:rgba(208,32,32,.45); color:#f0a79c}
.notice.ok{background:rgba(80,168,48,.1); border-color:rgba(80,168,48,.45); color:#c3e2ab}

/* ---------- Toasts ---------- */
.toasts{position:fixed; right:16px; bottom:16px; z-index:9500; display:flex; flex-direction:column; gap:9px; max-width:330px}
.toast{background:var(--panel); border:1px solid var(--line2); border-left:4px solid var(--acc);
  border-radius:var(--r-s); padding:11px 14px; box-shadow:var(--sh); font-size:.9rem;
  animation:tin .28s ease-out}
.toast.ok{border-left-color:var(--ok)} .toast.err{border-left-color:var(--bad)}
.toast.warn{border-left-color:var(--warn)}
.toast.out{opacity:0; transform:translateX(24px); transition:.35s}
@keyframes tin{from{opacity:0; transform:translateX(28px)}}

/* ---------- Modal ---------- */
.modal-bg{position:fixed; inset:0; z-index:9000; background:rgba(4,3,2,.78); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:18px; animation:tin .2s}
.modal{background:var(--panel); border:1px solid var(--line2); border-radius:var(--r); width:100%;
  max-width:460px; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal.wide{max-width:760px}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line)}
.modal-head h3{margin:0}
.modal-head .x{background:none; border:0; color:var(--muted); font-size:1.05rem; cursor:pointer}
.modal-head .x:hover{color:var(--bad)}
.modal-body{padding:18px; overflow-y:auto}
.modal-foot{display:flex; justify-content:flex-end; gap:9px; padding:13px 18px; border-top:1px solid var(--line)}

/* ---------- Mini-Ranking ---------- */
.mini{list-style:none; margin:0; padding:0; counter-reset:m}
.mini li{display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px dashed var(--line); counter-increment:m}
.mini li:last-child{border-bottom:0}
.mini li:before{content:counter(m); font-family:'Oswald',sans-serif; color:var(--muted); width:16px}
.mini li a{display:flex; align-items:center; gap:8px; flex:1; color:var(--txt) !important; text-decoration:none !important}
.mini li a:hover{color:var(--acc) !important}

/* ---------- Regeln / FAQ ---------- */
.rules{counter-reset:r; list-style:none; padding:0; margin:0}
.rules li{counter-increment:r; padding:9px 0 9px 34px; border-bottom:1px dashed var(--line); position:relative}
.rules li:before{content:counter(r); position:absolute; left:0; top:9px; width:22px; height:22px;
  border-radius:50%; background:var(--panel2); border:1px solid var(--line2); color:var(--acc);
  font-family:'Oswald',sans-serif; font-size:.78rem; display:flex; align-items:center; justify-content:center}
details{border:1px solid var(--line); border-radius:var(--r-s); padding:10px 14px; margin-bottom:8px; background:var(--panel2)}
details summary{cursor:pointer; font-weight:500; color:var(--txt)}
details[open] summary{color:var(--acc); margin-bottom:8px}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line); background:#080604; margin-top:auto}
.foot-in{max-width:1240px; margin:0 auto; padding:22px 18px; display:flex; justify-content:space-between;
  gap:18px; flex-wrap:wrap; align-items:center; font-size:.88rem}
.foot-links{display:flex; gap:14px; flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .burger{display:block}
    .nav{position:fixed; left:0; right:0; top:60px; flex-direction:column; gap:0;
    background:var(--panel); border-bottom:1px solid var(--line); padding:8px; display:none;
    max-height:calc(100vh - 60px); overflow-y:auto; box-shadow:var(--sh); z-index:119; align-items:stretch}
  .nav.open{display:flex}
  .nav-item,.nav-dropdown>button{padding:12px 14px; text-align:left; width:100%}
  .nav-right{margin-left:0}
  .nav-menu{position:static; display:none; box-shadow:none; border:none; padding-left:12px}
  .nav-dropdown:hover .nav-menu{display:none}
  .nav-dropdown.open .nav-menu{display:flex}
  .brand-txt small{display:none}
  .hero-in{padding:30px 20px}
  .view{padding:16px 12px 48px; gap:14px}
  .panel{padding:15px 16px}
  .form-row{grid-template-columns:1fr}
  .prof-head{gap:12px}
  .search{max-width:none}
  .status-strip{padding:6px 12px; gap:6px 12px; font-size:.75rem}
  .table th,.table td{padding:8px 7px}
}
@media(max-width:560px){
  h1{font-size:1.55rem} h2{font-size:1.12rem}
  .topbar{padding:0 12px; gap:10px}
  .ubtn .uname{display:none}
  .grid-4{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .cards{grid-template-columns:1fr}
  .hero-btns .btn{width:100%}
  .toasts{left:12px; right:12px; max-width:none}
  .modal{max-width:none}
  .foot-in{flex-direction:column; text-align:center}
}

/* ---------- Ingame-Verknüpfung (Profil) ---------- */
.pzlink{background:var(--panel2); border:1px solid var(--line);
  border-left:3px solid var(--warn); border-radius:var(--r-s); padding:13px 15px}
.pzlink.ok{border-left-color:var(--acc); background:rgba(224,101,26,.06)}
.pzlink-name{font-family:'Oswald',sans-serif; font-size:1.25rem;
  letter-spacing:.5px; line-height:1.3}

/* ---------- Weltuhr: Pausenhinweis ---------- */
.wpause{font-size:.72em; color:var(--warn); letter-spacing:.5px; white-space:nowrap}

/* ---------- Kleinigkeiten, die im Code benutzt werden ---------- */
.stat span{line-height:1.35}
.table td a{text-decoration:none}
.table td a:hover{text-decoration:underline}

/* ---------- Hintergrundmusik ---------- */
.music-btn{
  position:fixed; bottom:18px; right:18px; z-index:200;
  width:44px; height:44px; border-radius:50%;
  background:var(--panel); border:1px solid var(--line2);
  color:var(--txt); cursor:pointer; font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh); transition:.2s;
}
.music-btn:hover{ border-color:var(--acc); transform:scale(1.08); }
.music-btn.playing{
  border-color:var(--acc);
  background:rgba(224,101,26,.12);
}
.music-btn.playing .music-on{ animation:musicPulse 2s infinite; }
@keyframes musicPulse{ 50%{ opacity:.5; } }

@media(max-width:560px){
  .music-btn{ bottom:14px; right:14px; width:38px; height:38px; }
}
/* ---------- Live-Karte ---------- */
#mapWrap{
  cursor:grab;
  background:
    radial-gradient(circle at 30% 40%, rgba(40,24,12,.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(30,18,8,.3) 0%, transparent 50%),
    #0a0805;
}
#mapWrap:active{ cursor:grabbing; }
#mapWrap > div:hover > div:first-child{
  transform:translate(-50%,-50%) scale(1.4);
  transition:transform .15s;
}
#mapSidebar .list-item{
  text-decoration:none !important;
  color:var(--txt) !important;
}
#mapSidebar .list-item:hover{
  background:rgba(224,101,26,.06);
}
/* ==========================================================
   POSTAPOKALYPSE — "Brennendes Knox County"
   4 Schichten: Nebel · Feuerlicht · Gewitter · Film-Korn
   ========================================================== */

/* ---------- Schicht 1: Tiefender Toxi-Nebel (3 Ebenen) ---------- */
body::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -3;
  pointer-events: none;
  background:
    /* Ebene 1: Dunkler Rauch */
    radial-gradient(ellipse 60% 40% at 15% 25%, rgba(20,8,4,.7), transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 75%, rgba(30,12,6,.6), transparent 55%),
    /* Ebene 2: Blutroter Schein */
    radial-gradient(ellipse 70% 50% at 50% 90%, rgba(120,20,10,.25), transparent 50%),
    /* Ebene 3: Oranger Feuer-Glut */
    radial-gradient(circle 300px at 30% 40%, rgba(200,80,20,.12), transparent),
    radial-gradient(circle 400px at 70% 60%, rgba(180,60,15,.1), transparent);
  animation: toxicDrift 35s ease-in-out infinite alternate;
}

/* Zweite Nebel-Schicht — schnellere Bewegung, andere Richtung */
.view::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at 25% 60%, rgba(60,20,8,.4), transparent 55%),
    radial-gradient(ellipse 50% 35% at 75% 30%, rgba(80,30,10,.35), transparent 50%),
    radial-gradient(circle 200px at 10% 80%, rgba(140,40,12,.2), transparent);
  animation: toxicDrift2 22s ease-in-out infinite alternate-reverse;
}

@keyframes toxicDrift {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  33%  { transform: translate(3%, -2%) scale(1.04); opacity: .9; }
  66%  { transform: translate(-4%, 3%) scale(1.06); opacity: .95; }
  100% { transform: translate(2%, -3%) scale(1.02); opacity: 1; }
}

@keyframes toxicDrift2 {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: .8; }
  50%  { transform: translate(-6%, 4%) rotate(1deg); opacity: 1; }
  100% { transform: translate(4%, -5%) rotate(-1deg); opacity: .85; }
}

/* ---------- Schicht 2: Feuerlicht-Flicker (subtiler) ---------- */
.topbar::before,
.panel::before,
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 100%, rgba(200,80,20,.04), transparent 70%);
  animation: fireFlicker 4s ease-in-out infinite alternate;
  z-index: 0; /* Bleibt hinter dem Text, der z-index:1 hat */
}

@keyframes fireFlicker {
  0%   { opacity: .1; }
  25%  { opacity: .25; }
  50%  { opacity: .1; }
  75%  { opacity: .3; }
  100% { opacity: .15; }
}

/* ---------- Schicht 3: Gewitter / Blitzlicht ---------- */
#lightning {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: transparent;
  opacity: 0;
}

#lightning.flash {
  animation: lightningStrike 0.8s ease-out;
}

@keyframes lightningStrike {
  0%   { opacity: 0; background: rgba(200,180,160,0); }
  2%   { opacity: .4; background: rgba(220,200,180,.3); }
  4%   { opacity: 0; background: rgba(220,200,180,0); }
  6%   { opacity: .3; background: rgba(200,180,160,.2); }
  100% { opacity: 0; background: transparent; }
}

/* ---------- Schicht 4: Vignette (stärker, dramatischer) ---------- */
#fxVig {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse 120% 100% at 50% 35%,
    transparent 50%,
    rgba(0,0,0,.2) 80%,
    rgba(0,0,0,.4) 100%) !important; /* Abgeschwächt */
  opacity: .8 !important;
  mix-blend-mode: multiply !important;
}

/* ---------- Schicht 5: Film-Korn (subtiler) ---------- */
#fxNoise {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .03; /* Reduziert von 0.06 */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noiseShift 0.4s steps(4) infinite;
}

/* WICHTIG: Inhalt der Panels über den Effekten halten */
.panel > * {
  position: relative;
  z-index: 1;
}
.hero-in {
  position: relative;
  z-index: 1;
}

/* ---------- Schicht 6: Blutmond-Schein (rechts oben) ---------- */
#fxMoon {
  position: fixed;
  top: 5%;
  right: 8%;
  width: 180px;
  height: 180px;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180,40,20,.15) 0%, rgba(120,20,10,.08) 40%, transparent 70%);
  filter: blur(8px);
  animation: moonPulse 8s ease-in-out infinite alternate;
}

@keyframes moonPulse {
  0%   { opacity: .5; transform: scale(1); }
  50%  { opacity: .8; transform: scale(1.05); }
  100% { opacity: .6; transform: scale(.98); }
}

/* ---------- Panel-Glow verstärken ---------- */

.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(224,101,26,.02), transparent 30%);
  z-index: 0;
}

/* ---------- Scrollbar anpassen ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0a0604;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--acc-d), #5a2810);
  border-radius: 5px;
  border: 1px solid #3d1a08;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--acc), var(--acc-d));
}

/* ---------- Auswahl-Farbe ---------- */
::selection {
  background: rgba(224,101,26,.35);
  color: #fff;
}
/* ==========================================================
   Zombie-Spaziergang am unteren Bildschirmrand
   ========================================================== */
.zombie-horde {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.zombie {
  position: absolute;
  bottom: 0;
  height: 70px;
  width: auto;
  opacity: 0.85;
  filter: brightness(0.6) sepia(0.4) drop-shadow(2px 2px 4px rgba(0,0,0,.8));
  animation: zwalk linear infinite, zbob ease-in-out infinite;
}

/* Große "nahe" Zombies */
.zombie.z-near {
  height: 90px;
  filter: brightness(0.5) sepia(0.5) drop-shadow(2px 2px 6px rgba(0,0,0,.9));
  z-index: 2;
}

/* Kleine "ferne" Zombies */
.zombie.z-far {
  height: 40px;
  opacity: 0.5;
  filter: brightness(0.4) sepia(0.6) grayscale(0.3);
  z-index: 0;
}

/* Von links nach rechts */
@keyframes zwalk {
  from { transform: translateX(-150px); }
  to   { transform: translateX(calc(100vw + 150px)); }
}

/* Watscheln (leichtes Wippen) */
@keyframes zbob {
  0%   { margin-bottom: 0; }
  25%  { margin-bottom: 4px; }
  50%  { margin-bottom: 0; }
  75%  { margin-bottom: 4px; }
  100% { margin-bottom: 0; }
}

/* Einzelne Zombies mit Dauer und Verzögerung */
.z1  { left: -5%;  animation-duration: 25s, 1.2s; animation-delay: 0s, 0s; }
.z2  { left: -10%; animation-duration: 35s, 1.5s; animation-delay: 3s, 0.3s; }
.z3  { left: -15%; animation-duration: 40s, 1.1s; animation-delay: 8s, 0.1s; }
.z4  { left: -8%;  animation-duration: 28s, 1.3s; animation-delay: 12s, 0.5s; }
.z5  { left: -20%; animation-duration: 45s, 1.4s; animation-delay: 5s, 0.2s; }
.z6  { left: -12%; animation-duration: 32s, 1.0s; animation-delay: 15s, 0.4s; }
.z7  { left: -6%;  animation-duration: 38s, 1.6s; animation-delay: 20s, 0.6s; }
.z8  { left: -18%; animation-duration: 42s, 1.2s; animation-delay: 2s, 0.1s; }

/* Umgedrehte Zombies laufen von rechts nach links */
.zombie.flip {
  animation-name: zwalkReverse, zbob;
}

@keyframes zwalkReverse {
  from { transform: translateX(calc(100vw + 150px)) scaleX(-1); }
  to   { transform: translateX(-150px) scaleX(-1); }
}

@media (max-width: 768px) {
  .zombie { height: 50px; }
  .zombie.z-near { height: 65px; }
  .zombie.z-far { height: 30px; }
  .z3, .z5, .z7 { display: none; }
}
/* ==========================================================
   Admin-Bereich: Gruppierte Sidebar
   ========================================================== */
.admin-layout{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:18px;
  align-items:start;
}
@media(max-width:900px){
  .admin-layout{ grid-template-columns:1fr; }
  .admin-side{ position:static !important; }
}
.admin-side{
  position:sticky;
  top:70px;
  max-height:calc(100vh - 80px);
  overflow-y:auto;
  background:linear-gradient(180deg,var(--panel),#15100a);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:10px;
  box-shadow:var(--sh);
}
.admin-side h3{
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:1.6px;
  color:var(--muted);
  margin:14px 8px 6px;
  padding-bottom:4px;
  border-bottom:1px solid var(--line);
}
.admin-side h3:first-child{ margin-top:4px; }
.admin-side button{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  text-align:left;
  background:none;
  border:0;
  color:var(--muted) !important;
  font:inherit;
  font-size:.88rem;
  padding:8px 10px;
  border-radius:var(--r-s);
  cursor:pointer;
  transition:background .15s,color .15s;
}
.admin-side button:hover{
  background:var(--panel2);
  color:var(--txt) !important;
}
.admin-side button.active{
  background:rgba(224,101,26,.1);
  color:var(--acc) !important;
  border-left:3px solid var(--acc);
  padding-left:7px;
}
.admin-side button .ico{
  font-size:1.05rem;
  flex:0 0 auto;
  width:22px;
  text-align:center;
}
.admin-side button .lbl{
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.admin-side button .badge-sm{
  font-size:.58rem;
  padding:1px 6px;
  border-radius:99px;
  background:var(--blood);
  color:#fff;
  font-weight:700;
}
.admin-main{
  min-width:0;
}
.admin-main .panel{ margin-bottom:0; }
/* Mobile: Sidebar einklappbar */
.admin-side-toggle{
  display:none;
  width:100%;
  margin-bottom:10px;
  padding:10px 14px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  color:var(--txt);
  font:inherit;
  font-weight:500;
  cursor:pointer;
  text-align:left;
}
@media(max-width:900px){
  .admin-side-toggle{ display:block; }
  .admin-side{
    display:none;
    max-height:none;
  }
  .admin-side.open{ display:block; }
}
/* ---------- Wartungsmodus (Fullscreen) ---------- */
.maintenance-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(10,8,5,.97);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  backdrop-filter:blur(10px);
}
.maintenance-box{
  max-width:520px;
  text-align:center;
  animation:tin .4s ease-out;
}
.maintenance-box .mi{
  font-size:4rem;
  opacity:.8;
  margin-bottom:10px;
  filter:drop-shadow(0 0 20px rgba(224,101,26,.4));
}
.maintenance-box h1{
  font-size:2.2rem;
  margin-bottom:10px;
}
.maintenance-box p{
  color:var(--muted);
  font-size:1rem;
  line-height:1.6;
}
.maintenance-box .m-actions{
  margin-top:24px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
/* ==========================================================
   Live-Chat (linke Sidebar)
   ========================================================== */
.chat-sidebar{
  position:fixed;
  left:0; top:60px; bottom:0;
  width:320px;
  background:linear-gradient(180deg,var(--panel),#15100a);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  z-index:110;
  transform:translateX(-100%);
  transition:transform .3s ease;
}
.chat-sidebar.open{ transform:translateX(0); }

/* ---------- Chat Toggle Button (minimized state) ---------- */
.chat-toggle{
  position:fixed;
  left:0; bottom:0;
  z-index:115;
  width:46px; height:46px;
  background:linear-gradient(180deg,var(--panel),#15100a);
  border:1px solid var(--line);
  border-left:0;
  border-bottom:0;
  border-radius:0 var(--r-s) 0 0;
  color:var(--txt); cursor:pointer;
  font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  transition:.2s;
  box-shadow:var(--sh);
}
.chat-toggle:hover{
  border-color:var(--acc);
  color:var(--acc);
  filter:brightness(1.15);
}
.chat-toggle.has-unread{
  background:rgba(224,101,26,.15);
  border-color:var(--acc);
}
.chat-toggle .chat-badge{
  position:absolute;
  top:-6px; right:-6px;
  background:var(--bad); color:#fff;
  font-size:.62rem; font-weight:700;
  min-width:18px; height:18px;
  border-radius:99px;
  display:flex; align-items:center; justify-content:center;
  padding:0 4px;
  box-shadow:0 0 8px rgba(208,32,32,.5);
  border:2px solid var(--bg);
}
@media(max-width:1000px){
  .chat-toggle{
    width:42px; height:42px;
    font-size:1.05rem;
  }
}

.chat-header{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:rgba(10,8,5,.5);
}
.chat-channels{
  display:flex; gap:4px; flex-wrap:wrap;
}
.chat-channels button{
  background:none; border:1px solid var(--line);
  color:var(--muted); font:inherit; font-size:.74rem;
  font-weight:600; padding:4px 10px;
  border-radius:99px; cursor:pointer; transition:.15s;
  max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chat-channels button:hover{ color:var(--txt); border-color:var(--line2); }
.chat-channels button.active{
  background:rgba(224,101,26,.14); color:var(--acc); border-color:var(--acc);
}

.chat-online{
  display:flex; align-items:center; gap:6px;
  margin-top:8px; font-size:.72rem; color:var(--muted);
}
.chat-online .dot{ margin:0; }
.chat-online-list{
  display:flex; gap:4px; flex-wrap:wrap; margin-top:4px;
}
.chat-online-list .online-chip{
  display:inline-flex; align-items:center; gap:4px;
  font-size:.68rem; padding:2px 6px;
  background:#0a0604; border:1px solid var(--line);
  border-radius:99px; color:var(--muted);
  cursor:default; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chat-online-list .online-chip .dot{
  width:6px; height:6px; margin:0;
}

.chat-body{
  flex:1; overflow-y:auto;
  padding:10px 12px;
  display:flex; flex-direction:column; gap:8px;
  min-height:0;
}
.chat-body::-webkit-scrollbar{ width:6px; }
.chat-body::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:3px; }

.chat-msg{
  display:flex; gap:8px;
  animation:chatIn .2s ease-out;
}
@keyframes chatIn{ from{opacity:0; transform:translateX(-8px);} }
.chat-msg .cm-content{ min-width:0; flex:1; }
.chat-msg .cm-head{
  display:flex; align-items:center; gap:6px;
  font-size:.76rem;
}
.chat-msg .cm-head a{ font-weight:700; color:var(--txt); text-decoration:none; }
.chat-msg .cm-head a:hover{ color:var(--acc); }
.chat-msg .cm-head .cm-time{ color:var(--muted); margin-left:auto; }
.chat-msg .cm-text{
  font-size:.84rem; color:#d8d0c4;
  word-break:break-word; line-height:1.4;
  margin-top:1px;
}
.chat-msg .cm-source{
  font-size:.56rem; padding:0 4px; border-radius:3px;
  vertical-align:1px;
}
.chat-msg .cm-source.ingame{ background:rgba(208,32,32,.2); color:#f0a79c; }
.chat-msg .cm-source.web{ background:rgba(80,168,48,.15); color:#c3e2ab; }
.chat-msg.mine .cm-head a{ color:var(--acc); }

.chat-input{
  padding:8px 12px;
  border-top:1px solid var(--line);
  background:rgba(10,8,5,.5);
}
.chat-input form{ display:flex; gap:6px; }
.chat-input input{
  flex:1; min-width:0;
  background:#0a0604; border:1px solid var(--line);
  border-radius:var(--r-s); padding:8px 10px;
  color:var(--txt); font:inherit; font-size:.84rem;
}
.chat-input input:focus{ border-color:var(--acc); outline:0; }
.chat-input button{
  background:linear-gradient(180deg,var(--acc),var(--acc-d));
  color:#fff; border:0; border-radius:var(--r-s);
  padding:0 14px; cursor:pointer; font:inherit;
  font-weight:700; font-size:.8rem;
}
.chat-input button:hover{ filter:brightness(1.15); }

.chat-empty{
  text-align:center; color:var(--muted);
  font-size:.82rem; padding:30px 10px;
}

/* ==========================================================
   Chat offen: Inhalt einrücken

   NICHT über padding-left auf <body>: die Topbar sitzt im
   Padding-Bereich des Body und wandert mit. Links oben klafft
   dann ein 320×60-Loch, durch das der Seitenhintergrund
   scheint — Marke und Menü rutschen nach rechts.

   Auch NICHT über margin-left auf .view: das überschreibt nur
   die linke Hälfte von "margin:0 auto", der Inhalt klebt links
   und springt beim Schließen sichtbar zur Mitte.

   Lösung: Topbar bleibt über die ganze Breite. Randlose
   Elemente per margin schieben, .view bekommt Innenabstand
   plus größere Maximalbreite — dadurch bleibt die Zentrierung
   erhalten und rechnet die Restfläche korrekt.
   ========================================================== */
:root{ --chat-w:320px }

/* Sicherheitsnetz gegen ältere Kopien der Regel */
body{ padding-left:0 !important }

.chat-sidebar{ width:var(--chat-w) }

/* Volle Breite, damit Logo und Menü links bleiben */
body.chat-open .topbar{ margin-left:0 }

body.chat-open .status-strip,
body.chat-open .footer,
body.chat-open #brWarn{
  margin-left:var(--chat-w);
}

body.chat-open .view{
  padding-left:calc(18px + var(--chat-w));
  max-width:calc(1240px + var(--chat-w));
}

/* Im Takt der Chat-Leiste mitziehen (.3s) */
.status-strip,.footer,.view{
  transition:margin-left .3s ease, padding-left .3s ease, max-width .3s ease;
}

@media(max-width:1000px){
  /* Chat legt sich darüber, nichts wird verschoben */
  body.chat-open .status-strip,
  body.chat-open .footer,
  body.chat-open #brWarn{ margin-left:0 }
  body.chat-open .view{
    padding-left:12px;
    max-width:1240px;
  }
  .chat-sidebar{
    width:100%;
    max-width:var(--chat-w);
    box-shadow:4px 0 30px rgba(0,0,0,.6);
  }
}
/* Chat nicht schließen bei Input-Fokus */
.chat-sidebar input:focus{ z-index:115; }

/* Chat-Toggle nicht im Weg auf Mobile */
@media(max-width:1000px){
  .chat-toggle{
    width:42px; height:42px;
    font-size:1.05rem;
  }
  body.chat-open .chat-toggle{ display:none; }
}
/* ---------- Chat Header Top (Channels + Minimize) ---------- */
.chat-header-top{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.chat-header-top .chat-channels{
  flex:1;
  min-width:0;
}
.chat-minimize{
  background:none; border:1px solid var(--line);
  color:var(--muted); cursor:pointer;
  font-size:.9rem; padding:2px 8px;
  border-radius:var(--r-s);
  flex:0 0 auto;
  transition:.15s;
}
.chat-minimize:hover{ color:var(--acc); border-color:var(--acc); }

/* ---------- Chat Input Row (Smiley + Input + Send) ---------- */
.chat-input-row{
  display:flex; gap:4px; align-items:center;
}
.chat-smiley-btn{
  background:var(--panel2); border:1px solid var(--line);
  color:var(--txt); cursor:pointer;
  font-size:1.1rem; padding:6px 8px;
  border-radius:var(--r-s);
  flex:0 0 auto;
  transition:.15s;
}
.chat-smiley-btn:hover{ border-color:var(--acc); }
.chat-smiley-btn.active{
  background:rgba(224,101,26,.15);
  border-color:var(--acc);
}
.chat-input-row input{
  flex:1; min-width:0;
}
.chat-send-btn{
  background:linear-gradient(180deg,var(--acc),var(--acc-d));
  color:#fff; border:0;
  border-radius:var(--r-s);
  padding:8px 12px; cursor:pointer;
  font-size:.9rem;
  flex:0 0 auto;
}
.chat-send-btn:hover{ filter:brightness(1.15); }

/* ---------- Smiley Picker ---------- */
.smiley-picker{
  display:none;
  flex-wrap:wrap;
  gap:3px;
  max-height:180px;
  overflow-y:auto;
  padding:8px;
  background:#0a0604;
  border:1px solid var(--line);
  border-radius:var(--r-s);
  margin-top:6px;
}
.smiley-item{
  background:none; border:0;
  font-size:1.3rem; cursor:pointer;
  padding:4px; border-radius:4px;
  transition:.1s;
  line-height:1;
}
.smiley-item:hover{
  background:var(--panel2);
  transform:scale(1.2);
}

/* ---------- Clan-Tag in Chat-Nachrichten ---------- */
.cm-clantag{
  color:var(--acc);
  font-weight:700;
  font-size:.76rem;
  letter-spacing:.5px;
}

/* ---------- Chat Message Delete Button ---------- */
.cm-del{
  background:none; border:0;
  color:var(--muted); cursor:pointer;
  font-size:.7rem; padding:0 2px;
  margin-left:4px;
  opacity:.5;
  transition:.15s;
}
.cm-del:hover{ color:var(--bad); opacity:1; }
/* ---------- Clan-Tag Badge im Chat ---------- */
.badge.clan{
  color:var(--gold);
  border-color:rgba(240,192,64,.5);
  background:rgba(240,192,64,.12);
  text-shadow:0 0 8px rgba(240,192,64,.3);
}
/* ---------- Clan-Tag Pille im Chat ---------- */
.clan-pill{
  display:inline-block;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.5px;
  padding:2px 7px;
  border-radius:99px;
  border:1px solid;
  vertical-align:2px;
  white-space:nowrap;
  cursor:pointer;
  transition:.15s;
}
.clan-pill:hover{
  filter:brightness(1.3);
  box-shadow:0 0 8px currentColor;
}
/* ---------- Chat Sound Button ---------- */
.chat-sound-btn{
  background:var(--panel2);
  border:1px solid var(--line);
  color:var(--muted);
  cursor:pointer;
  font-size:.7rem;
  font-weight:700;
  padding:3px 8px;
  border-radius:var(--r-s);
  transition:.15s;
  letter-spacing:.5px;
}
.chat-sound-btn:hover{
  border-color:var(--acc);
  color:var(--acc);
}

/* ---------- Chat Message Actions ---------- */
.cm-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:4px;
}

/* ---------- Chat Message Head spacing ---------- */
.chat-msg .cm-head{
  gap:6px;
}
.chat-msg .cm-head .cm-time{
  margin-left:auto;
}
.chat-msg .cm-head .cm-actions{
  margin-left:0;
}

/* ---------- Channel Close Button spacing ---------- */
.chat-channels button{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.chan-close{
  font-size:.7rem;
  padding:0 2px;
  margin-left:4px;
  opacity:.5;
  cursor:pointer;
  transition:.15s;
}
.chan-close:hover{
  opacity:1;
  color:var(--bad);
}
.chan-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:120px;
}

/* ---------- Online List klickbar ---------- */
.online-chip{
  cursor:pointer !important;
  transition:.15s;
}
.online-chip:hover{
  border-color:var(--acc) !important;
  color:var(--acc) !important;
  background:rgba(224,101,26,.1) !important;
}
/* ==========================================================
   Auftragskarten — Portrait links, Text rechts
   ========================================================== */
.quest-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(390px,1fr));
  gap:14px;
}
@media(max-width:460px){
  .quest-grid{ grid-template-columns:1fr }
}

.quest-card{
  display:flex;
  min-height:196px;
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  overflow:hidden;
  transition:border-color .18s, transform .18s;
}
.quest-card:hover{
  border-color:var(--line2);
  transform:translateY(-2px);
}
.quest-card.accepted{
  border-color:var(--ok);
  box-shadow:inset 3px 0 0 var(--ok);
}
.quest-card.locked{ opacity:.62 }
.quest-card.locked:hover{ transform:none }

/* ---------- Portrait: ein Drittel der Kartenbreite ---------- */
.quest-portrait{
  flex:0 0 33%;
  max-width:33%;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 38%,
      color-mix(in srgb, var(--ac) 38%, transparent) 0%,
      transparent 72%),
    linear-gradient(160deg, #14100c, #0a0705);
  border-right:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
}
.quest-portrait .qp-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 22%;   /* Gesicht liegt meist oben */
  display:block;
}
/* Bild kaputt -> Emoji-Verlauf bleibt sichtbar */
.quest-portrait.qp-broken .qp-img{ display:none }

.quest-portrait .qp-emoji{
  font-size:clamp(2.4rem, 7vw, 3.8rem);
  line-height:1;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.7));
  position:relative;
  z-index:1;
}
/* Weicher Übergang zur Textseite */
.quest-portrait .qp-fade{
  position:absolute;
  inset:0 0 0 auto;
  width:34%;
  background:linear-gradient(90deg, transparent, var(--panel2));
  pointer-events:none;
  z-index:2;
}
.quest-portrait.dim{ filter:grayscale(.75) brightness(.7) }

/* ---------- Textseite ---------- */
.quest-main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:13px 15px;
}

.quest-head{ min-width:0 }
.qm-name{
  display:block;
  font-family:'Oswald',sans-serif;
  font-size:1.06rem;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.qm-cat{
  display:block;
  font-size:.62rem;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:2px;
}

.quest-need{
  padding:8px 10px;
  background:rgba(0,0,0,.28);
  border-left:2px solid var(--acc);
  border-radius:0 var(--r-s) var(--r-s) 0;
}
.qn-label{
  display:block;
  font-size:.6rem;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:2px;
}
.qn-line{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
}
.qn-qty{
  font-family:'Oswald',sans-serif;
  font-size:1.24rem;
  color:var(--acc);
  flex:0 0 auto;
}
.qn-item{
  font-weight:600;
  font-size:.92rem;
  line-height:1.25;
  min-width:0;
  overflow-wrap:anywhere;
}

.quest-pay{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.qp-sum{
  font-family:'Oswald',sans-serif;
  font-size:1.2rem;
  color:var(--gold);
  text-shadow:0 0 10px rgba(240,192,64,.28);
  white-space:nowrap;
}

/* Fußzeile immer unten */
.quest-foot{ margin-top:auto }
.quest-accept-btn{ width:100% }

.quest-status{
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:7px 10px;
  border-radius:var(--r-s);
  font-size:.82rem;
  background:rgba(0,0,0,.3);
}
.quest-status.accepted{ color:var(--ok);   box-shadow:inset 2px 0 0 var(--ok) }
.quest-status.locked{   color:var(--muted);box-shadow:inset 2px 0 0 var(--line2) }

/* ---------- Schmale Karten ---------- */
@media(max-width:520px){
  .quest-card{ min-height:172px }
  .quest-portrait{ flex-basis:38%; max-width:38% }
  .quest-main{ padding:11px 12px; gap:7px }
  .qm-name{ font-size:.98rem }
}
/* ==========================================================
   Quest-Board: Ergänzungen (Tagessperre)
   ========================================================== */

/* Heute schon bearbeitet — Karte gedimmt, kein Hover-Effekt */
.quest-card.locked{
  opacity:.5;
  filter:saturate(.55);
  border-color:var(--line);
}
.quest-card.locked:hover{
  transform:none;
  box-shadow:none;
  border-color:var(--line);
}

/* Fußzeile "Erledigt / Aufgegeben / Abgelaufen" */
.quest-status.locked{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line2);
  border-radius:var(--r-s);
  font-size:.84rem;
  color:var(--muted);
}
.quest-status.locked > span:first-child{
  color:var(--txt);
  font-weight:600;
  white-space:nowrap;
}
.quest-status.locked > span:last-child{
  text-align:right;
}

/* Erledigte Karte: goldener Rand als Belohnungssignal */
.quest-card.locked .quest-status.locked > span:first-child{
  color:var(--gold);
}

/* Kategorie-Zeile nicht umbrechen lassen */
.quest-npc > div{ min-width:0 }
.quest-npc b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Aktive Aufträge: Abbrechen-Button nicht schrumpfen */
#myQuests .list-item .btn.danger.sm{
  flex:0 0 auto;
  padding:5px 10px;
  line-height:1;
}

.quest-grid{
  display:grid;
  /* Immer genau 2 Spalten — 4 Quests ergeben ein 2x2-Raster */
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}
@media(max-width:700px){
  .quest-grid{ grid-template-columns:minmax(0, 1fr); }
}
/* ==========================================================
   MARKTPLATZ  (konsolidiert — vorher lagen hier drei Kopien,
   die sich gegenseitig überschrieben haben)

   Aufbau: Regal links, Händlerkacheln rechts. Die Liste steht
   im HTML zuerst, wird per order nach rechts getauscht — damit
   sie auf Mobilgeräten oben bleibt (erst wählen, dann kaufen).
   ========================================================== */
   /* Kopfzeile und Lieferungen nebeneinander — spart Höhe.
   Die Lieferliste ist schmaler, weil sie meist nur zwei bis
   drei Zeilen hat. */
.market-top{
  display:grid;
  grid-template-columns:1fr 400px;
  gap:16px;
  align-items:start;
}
@media(max-width:1180px){
  .market-top{ grid-template-columns:1fr 330px }
}
@media(max-width:900px){
  .market-top{ grid-template-columns:1fr }
}

/* Lieferliste kompakter: dort zählt Übersicht, nicht Luft */
#mkPickups .list-item{
  padding:8px 11px;
  font-size:.88rem;
}
#mkPickups .col{ gap:6px }
#mkPickups .notice{
  margin-bottom:0;
  font-size:.8rem;
  padding:9px 11px;
}
/* Bei vielen offenen Lieferungen scrollen statt wachsen */
#mkPickups .col{
  max-height:250px;
  overflow-y:auto;
}
#mkPickups .col::-webkit-scrollbar{ width:5px }
#mkPickups .col::-webkit-scrollbar-thumb{
  background:var(--line2);
  border-radius:3px;
}
.market-layout{
  display:grid;
  grid-template-columns:1fr 330px;
  gap:16px;
  align-items:start;
}
.market-main{ min-width:0; order:1 }

.market-side{
  order:2;
  padding:11px 9px;
  /* sticky, sonst muss man erst die ganze Seite scrollen,
     bevor die Liste selbst scrollen kann */
  position:sticky;
  top:70px;
  max-height:calc(100vh - 88px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.market-side::-webkit-scrollbar{ width:6px }
.market-side::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:3px }

@media(max-width:1180px){
  .market-layout{ grid-template-columns:1fr 260px }
}
@media(max-width:900px){
  .market-layout{ grid-template-columns:1fr }
  .market-main{ order:2 }
  .market-side{
    order:1;
    position:static;
    max-height:none;
    overflow:visible;
  }
}

/* ---------- Händlerliste als Kachelraster ---------- */
#mkVendors{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:7px;
}
@media(max-width:1180px){
  #mkVendors{ grid-template-columns:minmax(0, 1fr) }
}
@media(max-width:900px){
  #mkVendors{ grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)) }
}

/* Stufenüberschrift über die ganze Rasterbreite */
.vendor-tier{
  grid-column:1 / -1;
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--muted);
  margin:11px 2px 1px;
  padding-bottom:4px;
  border-bottom:1px solid var(--line);
}
.vendor-tier:first-child{ margin-top:0 }

/* Kachel: Bild oben, Text unten. Kein Padding am Container —
   das Bild soll bis an den Rand gehen. */
.vendor-row{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  border-radius:var(--r-s);
  border:1px solid var(--line);
  background:var(--panel2);
  overflow:hidden;
  cursor:pointer;
  transition:border-color .15s, transform .15s;
}
.vendor-row:hover{
  border-color:var(--line2);
  transform:translateY(-2px);
}
.vendor-row.active{
  border-color:var(--acc);
  box-shadow:0 0 0 1px var(--acc), 0 4px 14px rgba(224,101,26,.18);
}
.vendor-row.locked{ opacity:.5 }
.vendor-row.locked:hover{ transform:none }
.vendor-row.empty{ opacity:.72 }

/* Bildkasten mit festem Seitenverhältnis, damit zwei Kacheln
   nebeneinander gleich hoch bleiben */
.vr-pic{
  position:relative;
  width:100%;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 40%,
      color-mix(in srgb, var(--ac) 34%, transparent) 0%,
      transparent 72%),
    linear-gradient(160deg, #14100c, #0a0705);
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid var(--line);
}
/* OHNE DIESE REGEL sprengt das Bild die Kachel */
.vr-pic .qp-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 20%;   /* Gesichter sitzen meist oben */
  display:block;
}
/* Bild kaputt -> Farbverlauf bleibt sichtbar */
.vr-pic.qp-broken .qp-img{ display:none }
.vr-pic .qp-emoji{
  font-size:1.75rem;
  line-height:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));
  position:relative;
  z-index:1;
}
.vendor-row.locked .vr-pic{ filter:grayscale(.8) brightness(.6) }

.vr-body{
  padding:7px 9px 9px;
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
}
.vr-body b{
  display:block;
  font-family:'Oswald',sans-serif;
  font-size:.84rem;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vr-prof{
  font-size:.66rem;
  color:var(--muted);
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-height:1.3em;
}
.vr-meta{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:5px;
}
.vr-meta .badge{ font-size:.6rem; padding:2px 6px }
.vr-lock{ font-size:.85rem; opacity:.6; margin-left:auto }
.vr-n{
  font-family:'Oswald',sans-serif;
  font-size:.94rem;
  color:var(--muted);
  margin-left:auto;
}
.vendor-row.active .vr-n{ color:var(--acc) }
.vr-price{
  font-size:.7rem;
  color:var(--gold);
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------- Regalkopf mit großem Portrait ---------- */
.shelf-head{
  display:flex;
  gap:0;
  align-items:stretch;
  margin-bottom:14px;
  padding-bottom:0;
  border-bottom:0;
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  overflow:hidden;
  min-height:152px;
}
.shelf-portrait{
  flex:0 0 30%;
  max-width:30%;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 38%,
      color-mix(in srgb, var(--ac) 38%, transparent) 0%,
      transparent 72%),
    linear-gradient(160deg, #14100c, #0a0705);
  border-right:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
}
.shelf-portrait .qp-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 22%;
  display:block;
}
.shelf-portrait.qp-broken .qp-img{ display:none }
.shelf-portrait .qp-emoji{
  font-size:clamp(2.6rem, 6vw, 4rem);
  line-height:1;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.7));
  position:relative;
  z-index:1;
}
/* Weicher Übergang zur Textseite */
.shelf-portrait .qp-fade{
  position:absolute;
  inset:0 0 0 auto;
  width:34%;
  background:linear-gradient(90deg, transparent, var(--panel2));
  pointer-events:none;
  z-index:2;
}
.shelf-portrait.dim{ filter:grayscale(.75) brightness(.65) }

.shelf-info-col{
  flex:1 1 auto;
  min-width:0;
  padding:14px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}
.shelf-info-col h2{ font-size:1.34rem; line-height:1.15 }

@media(max-width:620px){
  .shelf-head{ min-height:126px }
  .shelf-portrait{ flex-basis:36%; max-width:36% }
  .shelf-info-col{ padding:12px 14px }
  .shelf-info-col h2{ font-size:1.1rem }
}

.shelf-tier{
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:1.6px;
  color:var(--muted);
  margin-bottom:3px;
}
.shelf-quote{
  margin-top:6px;
  font-style:italic;
  color:var(--muted);
  font-size:.86rem;
}
.shelf-info{ font-size:.82rem; margin-bottom:12px }

/* ---------- Warenkarten ---------- */
.shelf-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(252px,1fr));
  gap:12px;
}
.shelf-item{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.shelf-item.out{ opacity:.5 }
.shelf-item.notoffered{
  opacity:.4;
  border-style:dashed;
  background:transparent;
}
.shelf-item.unique{
  border-color:rgba(240,192,64,.45);
  background:linear-gradient(180deg,rgba(240,192,64,.07),var(--panel2));
}

.si-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.si-head b{ min-width:0 }
.si-price{
  font-family:'Oswald',sans-serif;
  font-size:1.05rem;
  color:var(--gold);
  white-space:nowrap;
  flex:0 0 auto;
  text-shadow:0 0 8px rgba(240,192,64,.3);
}
.si-tags{ display:flex; gap:5px; flex-wrap:wrap }
.si-tags:empty{ display:none }
.si-tag{
  font-size:.62rem;
  letter-spacing:.8px;
  text-transform:uppercase;
  padding:1px 7px;
  border-radius:99px;
  border:1px solid;
  white-space:nowrap;
}
.si-tag.gold{ color:var(--gold); border-color:rgba(240,192,64,.5);
              background:rgba(240,192,64,.1) }
.si-tag.rB{ color:#8fae4e; border-color:rgba(143,174,78,.4) }
.si-tag.rC{ color:#5aa9d1; border-color:rgba(90,169,209,.4) }
.si-tag.rD{ color:#c07ad1; border-color:rgba(192,122,209,.45) }
.si-tag.rE{ color:#e0651a; border-color:rgba(224,101,26,.5);
            background:rgba(224,101,26,.1) }

.si-stock{ margin-top:2px }
.si-off{ font-size:.8rem; color:var(--muted); padding:8px 0 4px }
.si-buy{
  display:flex;
  gap:7px;
  align-items:center;
  margin-top:8px;
}
.si-buy .btn{ flex:1 }
.si-qty{
  width:64px;
  flex:0 0 auto;
  margin:0;
  padding:6px 8px;
  font-size:.86rem;
  text-align:center;
  background:#0a0604;
  color:var(--txt);
  border:1px solid var(--line);
  border-radius:var(--r-s);
}
.si-qty:focus{ outline:0; border-color:var(--acc) }

/* Vorschau bei gesperrtem Händler */
.shelf-grid.locked-peek{ pointer-events:none }
.shelf-grid.locked-peek .shelf-item{ opacity:.3 }

/* Fortschrittsbalken im Kopf */
.mk-progress:empty{ display:none }
.mk-progress .bar{ height:6px }
/* ---------- Marktplatz-Verwaltung ---------- */
.mkadm-layout{
  display:grid; gap:14px;
  grid-template-columns:260px minmax(0,1fr);
  align-items:start;
}
@media (max-width:900px){
  .mkadm-layout{ grid-template-columns:1fr }
}
.mkadm-side{
  position:sticky; top:12px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  padding:14px 12px;
}
.mkadm-main{ min-width:0 }

.mkadm-vrow{
  display:flex; align-items:center; gap:10px;
  padding:8px 9px; margin-bottom:4px; cursor:pointer;
  border:1px solid transparent; border-radius:var(--r-s);
  transition:background .15s, border-color .15s;
}
.mkadm-vrow:hover{ background:var(--panel2); border-color:var(--line) }
.mkadm-vrow.active{ background:rgba(224,101,26,.12); border-color:var(--acc) }
.mkadm-vrow.off{ opacity:.5 }
.mkadm-vrow b{
  display:block; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}

.mkadm-avatar{
  display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;
  padding:14px; border-radius:var(--r-s);
  background:var(--panel2); border:1px solid var(--line);
}
.mkadm-avatar input[type=file]{ padding:7px; font-size:.85rem }
.mkadm-note{ align-self:end; padding-bottom:10px; font-size:.8rem; color:var(--muted) }

/* --- Klebende Kopfzeile: Speichern immer erreichbar --- */
.mkadm-bar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; margin-bottom:12px;
  background:var(--panel); border:1px solid var(--line2);
  border-radius:var(--r-s);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.mkadm-bar-name{ display:block; font-family:'Oswald',sans-serif;
  font-size:1.02rem; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis }

/* --- Warenkarten: brechen um, kein Rechtsscrollen --- */
.mkadm-grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
}
.mkadm-card{
  display:flex; flex-direction:column; gap:7px;
  padding:11px; background:var(--panel2);
  border:1px solid var(--line); border-left:3px solid var(--line2);
  border-radius:var(--r-s); transition:.15s;
}
.mkadm-card:focus-within{ border-left-color:var(--acc) }
.mkadm-card.dirty{ border-left-color:var(--warn);
  box-shadow:inset 0 0 0 1px rgba(240,160,48,.3) }
.mkadm-card.is-off{ opacity:.55 }

.mkadm-card-h{ display:flex; align-items:center; gap:8px }
.mkadm-name{ flex:1; min-width:0; font-weight:700 }
.mkadm-state{ flex:0 0 auto }

/* Zahlenfelder im Minigitter — vier pro Zeile, Chance über volle Breite */
.mkadm-fields{
  display:grid; gap:6px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.mkadm-fields label{
  display:flex; flex-direction:column; gap:2px;
  font-size:.68rem; text-transform:uppercase;
  letter-spacing:.6px; color:var(--muted); margin:0;
}
.mkadm-fields label.wide{ grid-column:1 / -1 }
.mkadm-fields input,
.mkadm-fields select{ padding:5px 6px; font-size:.85rem }

.mkadm-card-a{ display:flex; gap:5px; align-items:center;
  padding-top:2px; border-top:1px dashed var(--line) }
.mkadm-card-a .btn{ flex:1 }

.mkadm-card .mono{ font-size:.8rem; padding:5px 7px }
.mkadm-card .bad-in{ border-color:var(--bad);
  background:rgba(208,32,32,.07) }

/* --- Händlerbereich, eingeklappt --- */
.mkadm-vendor summary{ cursor:pointer; padding:2px 0;
  font-size:.95rem; list-style:none }
.mkadm-vendor summary::-webkit-details-marker{ display:none }
.mkadm-vendor summary::before{ content:'\25B8 '; color:var(--acc) }
.mkadm-vendor[open] summary::before{ content:'\25BE ' }

.mkadm-avatar{ display:flex; gap:14px; align-items:flex-start;
  flex-wrap:wrap }
.mkadm-note{ align-self:end; padding-bottom:10px;
  font-size:.8rem; color:var(--muted) }

.search.sm{ max-width:200px; padding:5px 9px; font-size:.85rem }
/* ==========================================================
   Kopfgelder
   ========================================================== */
.bt-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:12px;
}
.bt-card{
  background:var(--panel2);
  border:1px solid var(--line);
  border-left:3px solid var(--blood);
  border-radius:var(--r-s);
  overflow:hidden;
}
.bt-card.me{
  border-left-color:var(--bad);
  background:linear-gradient(180deg,rgba(142,26,26,.14),var(--panel2));
}
.bt-head{
  display:flex; align-items:center; gap:11px;
  padding:11px 13px;
  background:rgba(0,0,0,.25);
  border-bottom:1px solid var(--line);
}
.bt-name{
  display:block;
  font-family:'Oswald',sans-serif;
  font-size:1.04rem;
  line-height:1.2;
  text-decoration:none !important;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bt-sum{
  flex:0 0 auto; text-align:right;
  font-family:'Oswald',sans-serif;
  font-size:1.18rem; color:var(--gold);
  text-shadow:0 0 10px rgba(240,192,64,.28);
  line-height:1.1;
}
.bt-sum span{
  display:block;
  font-family:'Rubik',sans-serif;
  font-size:.62rem; letter-spacing:.6px;
  color:var(--muted); text-shadow:none;
}
.bt-body{ padding:11px 13px }
.bt-line{ display:flex; justify-content:space-between; align-items:baseline }
.bt-placers{ display:flex; gap:5px; flex-wrap:wrap; margin-top:6px }
.bt-placers .chip{ font-size:.68rem; padding:2px 7px }
.bt-meta{
  display:flex; justify-content:space-between;
  align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:9px; padding-top:8px;
  border-top:1px dashed var(--line);
}
.bt-pos{ font-size:.74rem; color:var(--muted) }
.bt-pos code{ font-size:.72rem; padding:0 4px }
/* ==========================================================
   RUF-SYSTEM
   ========================================================== */
.rep-hero{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.rep-dial{
  flex:0 0 auto; width:132px; height:132px; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.rep-dial svg{ position:absolute; inset:0; transform:rotate(-90deg) }
.rep-dial-in{ text-align:center; position:relative; z-index:1 }
.rep-dial-in b{
  display:block; font-family:'Oswald',sans-serif; font-size:2.1rem;
  line-height:1; text-shadow:0 0 14px currentColor;
}
.rep-dial-in span{
  display:block; font-size:.6rem; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--muted); margin-top:3px;
}

/* Skala: -100 links, +100 rechts. Ein Balken von 0 aus wäre
   irreführend — die Mitte ist "Unbekannt", nicht "nichts". */
.rep-scale{ position:relative; margin:16px 0 6px }
.rep-scale-bar{
  height:12px; border-radius:99px; overflow:hidden;
  border:1px solid var(--line); display:flex;
}
.rep-scale-bar i{ display:block; height:100% }
.rep-seg-outlaw{     flex:20; background:rgba(208,32,32,.55) }
.rep-seg-suspicious{ flex:60; background:rgba(240,160,48,.45) }
.rep-seg-unknown{    flex:40; background:rgba(168,144,120,.35) }
.rep-seg-clean{      flex:60; background:rgba(80,168,48,.4) }
.rep-seg-trusted{    flex:20; background:rgba(80,168,48,.7) }
.rep-marker{
  position:absolute; top:-6px; width:3px; height:24px;
  background:var(--txt); border-radius:2px;
  box-shadow:0 0 8px rgba(255,255,255,.5);
  transform:translateX(-50%); transition:left .4s ease;
}
.rep-marker::after{
  content:attr(data-v); position:absolute; top:-17px; left:50%;
  transform:translateX(-50%); font-size:.66rem; font-weight:700;
  font-family:'Oswald',sans-serif; white-space:nowrap;
}
.rep-scale-legend{
  display:flex; justify-content:space-between;
  font-size:.6rem; letter-spacing:.6px; color:var(--muted);
  text-transform:uppercase;
}

.rep-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:.66rem; font-weight:700; letter-spacing:.6px;
  padding:2px 8px; border-radius:99px; border:1px solid;
  white-space:nowrap; vertical-align:2px;
}
.rep-badge.trusted{    color:var(--ok);    border-color:rgba(80,168,48,.55);
                       background:rgba(80,168,48,.12) }
.rep-badge.clean{      color:#8fae4e;      border-color:rgba(143,174,78,.45) }
.rep-badge.unknown{    color:var(--muted); border-color:var(--line2) }
.rep-badge.suspicious{ color:var(--warn);  border-color:rgba(240,160,48,.5);
                       background:rgba(240,160,48,.1) }
.rep-badge.outlaw{     color:#fff;         border-color:#b3382c;
                       background:var(--blood);
                       text-shadow:0 0 8px rgba(208,32,32,.6) }

.rep-ev{
  display:flex; align-items:center; gap:11px;
  padding:8px 11px; border-radius:var(--r-s);
  background:var(--panel2); border:1px solid var(--line);
  border-left:3px solid var(--line2);
}
.rep-ev + .rep-ev{ margin-top:5px }
.rep-ev.pos{ border-left-color:var(--ok) }
.rep-ev.neg{ border-left-color:var(--bad) }
.rep-ev-d{
  flex:0 0 52px; text-align:right;
  font-family:'Oswald',sans-serif; font-size:1.12rem;
}
.rep-ev.pos .rep-ev-d{ color:var(--ok) }
.rep-ev.neg .rep-ev-d{ color:var(--bad) }
.rep-ev-b{ min-width:0; flex:1 }
.rep-ev-b b{ display:block; font-size:.9rem; line-height:1.25 }

.rep-gate{
  display:grid; grid-template-columns:auto 1fr; gap:6px 12px;
  font-size:.84rem; align-items:baseline;
}
.rep-gate dt{ color:var(--muted); white-space:nowrap }
.rep-gate dd{ margin:0 }

/* ==========================================================
   RP-REGELWERK & MELDUNGEN
   ========================================================== */
.rp-rule{
  background:var(--panel2); border:1px solid var(--line);
  border-left:3px solid var(--line2); border-radius:var(--r-s);
  padding:13px 15px;
}
.rp-rule + .rp-rule{ margin-top:9px }
.rp-rule.sev-schwer{ border-left-color:var(--bad) }
.rp-rule.sev-mittel{ border-left-color:var(--warn) }
.rp-rule.sev-leicht{ border-left-color:var(--ok) }
.rp-rule-head{
  display:flex; align-items:baseline; gap:9px;
  flex-wrap:wrap; margin-bottom:5px;
}
.rp-code{
  font-family:var(--mono); font-size:.72rem;
  color:var(--acc); background:#0a0604;
  border:1px solid var(--line); border-radius:4px; padding:1px 6px;
  flex:0 0 auto;
}
.rp-rule-head h3{ margin:0; font-size:1.02rem; flex:1 1 auto; min-width:0 }
.rp-rule p{ margin:0; color:#d8d0c4; font-size:.9rem }
.rp-rule code{ font-size:.84em }

.rp-cmd{
  display:grid; grid-template-columns:auto 1fr; gap:7px 14px;
  align-items:baseline; font-size:.88rem;
}
.rp-cmd code{ white-space:nowrap }

.rp-rep-card{
  background:var(--panel2); border:1px solid var(--line);
  border-left:3px solid var(--warn); border-radius:var(--r-s);
  overflow:hidden;
}
.rp-rep-card.status-open{ border-left-color:var(--bad) }
.rp-rep-card.status-reviewing{ border-left-color:var(--warn) }
.rp-rep-card.status-resolved{ border-left-color:var(--ok); opacity:.75 }
.rp-rep-card.status-rejected{ border-left-color:var(--line2); opacity:.6 }
.rp-rep-head{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:10px 13px; background:rgba(0,0,0,.25);
  border-bottom:1px solid var(--line);
}
.rp-rep-body{ padding:11px 13px }

/* Chatverlauf der Meldung — Monospace, damit die Zeitstempel
   untereinander stehen und man Verläufe scannen kann. */
.rp-ctx{
  font-family:var(--mono); font-size:.76rem; line-height:1.55;
  background:#0a0604; border:1px solid var(--line);
  border-radius:var(--r-s); padding:9px 11px;
  max-height:230px; overflow-y:auto;
}
.rp-ctx div{ display:flex; gap:8px }
.rp-ctx .t{ color:var(--muted); flex:0 0 auto }
.rp-ctx .w{ color:var(--acc); flex:0 0 auto; font-weight:700 }
.rp-ctx .x{ color:#d8d0c4; min-width:0; overflow-wrap:anywhere }
.rp-ctx .me{ color:#c78fdb }
.rp-ctx .ooc{ color:var(--muted); font-style:italic }

.rp-warn-item{
  display:flex; gap:12px; align-items:flex-start;
  padding:11px 13px; border-radius:var(--r-s);
  background:rgba(208,32,32,.08); border:1px solid rgba(208,32,32,.35);
}
.rp-warn-item + .rp-warn-item{ margin-top:8px }
.rp-warn-lvl{
  flex:0 0 40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-size:1.3rem;
  background:var(--blood); color:#fff;
}
.rp-warn-item.ackd{ opacity:.6; background:rgba(255,255,255,.03) }

@media(max-width:620px){
  .rep-hero{ gap:14px }
  .rep-dial{ width:104px; height:104px }
  .rep-dial-in b{ font-size:1.6rem }
}
.qp-rep{
  font-family:'Oswald',sans-serif;
  font-size:.9rem;
  color:var(--ok);
  white-space:nowrap;
}
/* ==========================================================
   ROADMAP — Kopfleiste, Board, Liste, Drawer, Patchnotes
   ========================================================== */

/* ---------- Kopfleiste ---------- */
.rm-bar{padding:14px 16px}
.rm-bar-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) minmax(160px,1.6fr);
  gap:10px;
}
.rm-mini{
  background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r-s);padding:8px 11px;min-width:0;
}
.rm-mini span{
  display:block;font-size:.62rem;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rm-mini b{
  display:block;font-family:'Oswald',sans-serif;
  font-size:1.25rem;line-height:1.2;margin-top:1px;
  font-variant-numeric:tabular-nums;
}
.rm-mini b i{font-style:normal;font-size:.85em}
.rm-mini.wide b{font-size:1rem}

.rm-bar-tools{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line);
}
.rm-bar-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* Filter-Chips */
.rm-fchips{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.rm-fchip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:99px;
  background:var(--panel2);border:1px solid var(--line);
  color:var(--muted);font:inherit;font-size:.78rem;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:.12s;
}
.rm-fchip:hover{color:var(--txt);border-color:var(--line2)}
.rm-fchip b{
  font-family:'Oswald',sans-serif;font-size:.82rem;
  padding:0 5px;border-radius:99px;
  background:rgba(0,0,0,.3);font-variant-numeric:tabular-nums;
}
.rm-fchip.active{
  color:var(--fc,var(--acc));
  border-color:var(--fc,var(--acc));
  background:color-mix(in srgb, var(--fc,var(--acc)) 14%, transparent);
}

/* Ansicht-Umschalter */
.rm-vswitch{
  display:inline-flex;border:1px solid var(--line);
  border-radius:var(--r-s);overflow:hidden;flex:0 0 auto;
}
.rm-vswitch button{
  background:var(--panel2);border:0;color:var(--muted);
  padding:6px 11px;cursor:pointer;font-size:.95rem;line-height:1;
  transition:.12s;
}
.rm-vswitch button + button{border-left:1px solid var(--line)}
.rm-vswitch button:hover{color:var(--txt)}
.rm-vswitch button.active{background:rgba(224,101,26,.15);color:var(--acc)}

/* ---------- Board ---------- */
.rm-board{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;align-items:start;
}
.rm-board.single{grid-template-columns:minmax(0,1fr)}

.rm-col{
  background:linear-gradient(180deg,var(--panel),#15100a);
  border:1px solid var(--line);
  border-top:3px solid var(--sc,var(--acc));
  border-radius:var(--r);
  box-shadow:var(--sh);
  display:flex;flex-direction:column;min-width:0;
}
.rm-col-head{
  display:flex;align-items:center;gap:9px;
  padding:11px 12px;border-bottom:1px solid var(--line);
}
.rm-col-head h2{
  font-size:.92rem;letter-spacing:.6px;
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--sc,var(--acc));
}
.rm-col-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  font-size:.92rem;flex:0 0 auto;
}
.rm-col-n{
  font-family:'Oswald',sans-serif;font-size:.8rem;
  padding:1px 8px;border-radius:99px;
  background:rgba(0,0,0,.35);color:var(--muted);flex:0 0 auto;
}
.rm-col-body{
  display:flex;flex-direction:column;gap:9px;
  padding:10px;min-height:90px;
  max-height:calc(100vh - 300px);overflow-y:auto;
}
.rm-col-body::-webkit-scrollbar{width:6px}
.rm-col-body::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.rm-board.single .rm-col-body{
  max-height:none;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
}
.rm-col-empty{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:18px 6px;color:var(--muted);
  font-size:.76rem;opacity:.6;
}
.rm-col-empty span{letter-spacing:.5px}

/* ---------- Karte ---------- */
.rm-card{
  background:var(--panel2);
  border:1px solid var(--line);
  border-left:3px solid var(--sc,var(--acc));
  border-radius:var(--r-s);
  padding:10px 11px;
  display:flex;flex-direction:column;gap:7px;
  transition:border-color .12s,transform .12s,box-shadow .12s;
  min-width:0;outline:none;
}
.rm-card:hover{
  border-color:var(--line2);
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.rm-card:focus-visible{box-shadow:0 0 0 2px var(--acc)}
.rm-card.active{
  border-color:var(--acc);
  box-shadow:0 0 0 1px var(--acc),0 4px 14px rgba(224,101,26,.2);
}
.rm-card.done{opacity:.62}
.rm-card.top{background:linear-gradient(180deg,rgba(240,192,64,.07),var(--panel2))}

.rm-card-top{
  display:flex;align-items:flex-start;gap:7px;
  cursor:pointer;
}
.rm-card-title{
  flex:1 1 auto;min-width:0;margin:0;
  font-family:'Oswald',sans-serif;font-size:.92rem;
  line-height:1.28;letter-spacing:.3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.rm-card:hover .rm-card-title{color:var(--acc)}
.rm-card-flags{display:flex;gap:3px;flex:0 0 auto}
.rm-flag{
  font-size:.72rem;line-height:1;
  padding:3px 5px;border-radius:5px;
  background:rgba(0,0,0,.3);border:1px solid var(--line);
}
.rm-flag.gold{border-color:rgba(240,192,64,.45)}
.rm-flag.green{border-color:rgba(143,174,78,.45)}
.rm-flag.bad{border-color:rgba(208,32,32,.45)}
.rm-flag.warn{border-color:rgba(240,160,48,.4)}

.rm-card-desc{
  margin:0;cursor:pointer;
  font-size:.79rem;line-height:1.45;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.rm-card-tags{display:flex;gap:4px;flex-wrap:wrap}
.rm-card-tags .chip{font-size:.66rem;padding:1px 7px}
.rm-card-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:6px;margin-top:auto;padding-top:7px;
  border-top:1px dashed var(--line);
}

/* ---------- Voting ---------- */
.rm-votes{
  display:inline-flex;align-items:stretch;flex:0 0 auto;
  white-space:nowrap;border:1px solid var(--line);
  border-radius:99px;background:var(--panel);overflow:visible;
}
.rm-vote-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border:0;background:none;
  color:var(--muted);font:inherit;font-size:.84rem;font-weight:600;
  cursor:pointer;user-select:none;flex:0 0 auto;
  transition:background .12s,color .12s;
}
.rm-vote-btn.up{border-radius:99px 0 0 99px}
.rm-vote-btn.down{border-radius:0 99px 99px 0}
.rm-vote-ico{font-size:.95rem;line-height:1}
.rm-vote-n{
  font-family:'Oswald',sans-serif;font-weight:700;
  min-width:1.1em;text-align:center;font-variant-numeric:tabular-nums;
}
.rm-vote-btn:hover{background:rgba(255,255,255,.05);color:var(--txt)}
.rm-vote-btn.up:hover{color:var(--ok)}
.rm-vote-btn.down:hover{color:var(--bad)}
.rm-vote-btn.up.active{
  background:rgba(80,168,48,.16);color:var(--ok);
  box-shadow:inset 0 0 0 1px rgba(80,168,48,.45);
}
.rm-vote-btn.down.active{
  background:rgba(208,32,32,.14);color:var(--bad);
  box-shadow:inset 0 0 0 1px rgba(208,32,32,.45);
}
.rm-vote-btn.up.active:hover,
.rm-vote-btn.down.active:hover{filter:brightness(1.2)}
.rm-vote-btn:disabled{opacity:.45;cursor:progress}
.rm-vote-btn.ro{cursor:default;pointer-events:none;opacity:.6}
.rm-score{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;padding:0 7px;
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  font-family:'Oswald',sans-serif;font-size:.92rem;
  font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,.25);color:var(--muted);flex:0 0 auto;
}
.rm-score.pos{color:var(--ok)}
.rm-score.neg{color:var(--bad)}

/* Kompaktvariante für Karten und Listenzeilen */
.rm-votes.mini .rm-vote-btn{padding:4px 9px;font-size:.78rem;gap:4px}
.rm-votes.mini .rm-vote-ico{font-size:.85rem}
.rm-votes.mini .rm-score{min-width:32px;font-size:.82rem;padding:0 5px}

/* Kommentar-Zähler */
.rm-cbadge{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  padding:4px 10px;border-radius:99px;
  background:var(--panel);border:1px solid var(--line);
  color:var(--muted);font:inherit;font-size:.78rem;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:.12s;
}
.rm-cbadge:hover{color:var(--acc);border-color:var(--acc)}
.rm-cbadge b{
  font-family:'Oswald',sans-serif;font-variant-numeric:tabular-nums;
  min-width:.85em;text-align:center;
}
.rm-cb-ico{font-size:.88rem;line-height:1}
.rm-cb-lock{font-size:.74rem;opacity:.85}

/* Community-/Sperr-Chips */
.rm-com-chip{
  display:inline-block;white-space:nowrap;
  font-size:.66rem;font-weight:700;letter-spacing:.6px;
  padding:3px 8px;border-radius:99px;
  color:#8fae4e;border:1px solid rgba(143,174,78,.45);
  background:rgba(143,174,78,.1);
}
.rm-lock-chip{
  display:inline-block;white-space:nowrap;
  font-size:.66rem;font-weight:700;letter-spacing:.6px;
  padding:3px 8px;border-radius:99px;
  color:#fff;background:var(--blood);border:1px solid #b3382c;
}

/* ---------- Listenansicht ---------- */
.rm-listwrap{padding:14px 16px}
.rm-lgroup + .rm-lgroup{margin-top:16px}
.rm-lgroup-head{
  display:flex;align-items:center;gap:8px;
  padding:6px 11px;margin-bottom:7px;
  border-left:3px solid var(--acc);
  background:var(--panel2);border-radius:0 var(--r-s) var(--r-s) 0;
  font-family:'Oswald',sans-serif;letter-spacing:.6px;font-size:.88rem;
}
.rm-lgroup-head span{margin-left:auto}

.rm-lrow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 10px;border-radius:var(--r-s);
  border:1px solid var(--line);
  border-left:3px solid var(--sc,var(--acc));
  background:var(--panel2);transition:.12s;
}
.rm-lrow + .rm-lrow{margin-top:5px}
.rm-lrow:hover{border-color:var(--line2)}
.rm-lrow.active{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.rm-lrow-main{
  display:flex;align-items:center;gap:10px;
  flex:1 1 260px;min-width:0;
  background:none;border:0;padding:0;margin:0;
  color:inherit;font:inherit;text-align:left;cursor:pointer;
}
.rm-ldot{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:var(--sc,var(--acc));
}
.rm-lmain{min-width:0;flex:1 1 auto}
.rm-lmain b{
  display:block;font-size:.9rem;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rm-lmain span{
  display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.rm-lrow-main:hover .rm-lmain b{color:var(--acc)}
.rm-lflags{display:flex;gap:3px;flex:0 0 auto}
.rm-lright{display:flex;align-items:center;gap:7px;flex:0 0 auto;margin-left:auto}

/* ---------- Drawer ---------- */
.rm-drawer-wrap{
  position:fixed;inset:0;z-index:9200;
  pointer-events:none;
}
.rm-drawer-wrap.open{pointer-events:auto}
.rm-drawer-bg{
  position:absolute;inset:0;
  background:rgba(4,3,2,.68);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .22s;
}
.rm-drawer-wrap.open .rm-drawer-bg{opacity:1}
.rm-drawer{
  position:absolute;top:0;right:0;bottom:0;
  width:min(520px,100%);
  background:linear-gradient(180deg,var(--panel),#15100a);
  border-left:1px solid var(--line2);
  box-shadow:-18px 0 50px rgba(0,0,0,.6);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.rm-drawer-wrap.open .rm-drawer{transform:translateX(0)}
body.rm-drawer-open{overflow:hidden}

.rm-dr-head{
  flex:0 0 auto;
  padding:14px 18px 13px;
  border-top:3px solid var(--acc);
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.22);
}
.rm-dr-head-top{
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
}
.rm-dr-status{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.68rem;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;
  padding:3px 10px;border-radius:99px;border:1px solid;
}
.rm-dr-x{
  margin-left:auto;flex:0 0 auto;
  background:none;border:1px solid var(--line);
  color:var(--muted);cursor:pointer;
  width:28px;height:28px;border-radius:var(--r-s);
  font-size:.85rem;transition:.12s;
}
.rm-dr-x:hover{color:var(--bad);border-color:var(--bad)}
.rm-dr-head h2{font-size:1.24rem;line-height:1.25}
.rm-dr-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.rm-dr-meta{margin-top:7px}

.rm-dr-body{flex:1 1 auto;overflow-y:auto;padding:14px 18px 22px}
.rm-dr-body::-webkit-scrollbar{width:7px}
.rm-dr-body::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.rm-dr-sec + .rm-dr-sec{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
}
.rm-dr-desc{font-size:.94rem;line-height:1.6;color:#d8d0c4}
.rm-dr-desc p{margin:0 0 .6em}
.rm-dr-desc p:last-child{margin-bottom:0}
.rm-dr-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.rm-dr-vote{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;
  margin-top:13px;padding:10px 12px;
  background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r-s);
}
.rm-dr-sec-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:11px;
}
.rm-dr-sec-head > b{font-family:'Oswald',sans-serif;letter-spacing:.5px}
.rm-dr-lock{margin-left:auto}

/* Kommentare */
.rm-disc-empty{color:var(--muted);font-size:.86rem;padding:8px 2px}
.rm-disc-list{display:flex;flex-direction:column;gap:9px}
.rm-cmt{display:flex;gap:9px;align-items:flex-start}
.rm-cmt-body{
  flex:1 1 auto;min-width:0;
  background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r-s);padding:8px 11px;
}
.rm-cmt.mine .rm-cmt-body{
  border-color:rgba(224,101,26,.35);
  background:linear-gradient(180deg,rgba(224,101,26,.06),var(--panel2));
}
.rm-cmt-head{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.8rem;
}
.rm-cmt-head > b{color:var(--txt)}
.rm-cmt-time{margin-left:auto;white-space:nowrap}
.rm-cmt-del{
  background:none;border:0;padding:0 2px;
  color:var(--muted);cursor:pointer;font-size:.76rem;
  opacity:.55;transition:.12s;
}
.rm-cmt-del:hover{color:var(--bad);opacity:1}
.rm-cmt-text{
  margin-top:3px;font-size:.87rem;line-height:1.5;
  color:#d8d0c4;overflow-wrap:anywhere;
}
.rm-cmt-text p{margin:0 0 .4em}
.rm-cmt-text p:last-child{margin-bottom:0}
.rm-disc-form{margin-top:12px}
.rm-disc-form textarea{margin-top:0;min-height:70px;font-size:.9rem}

/* ---------- Patchnotes ---------- */
.rm-patches{display:flex;flex-direction:column;gap:8px}
.rm-patch{
  background:linear-gradient(180deg,var(--panel),#15100a);
  border:1px solid var(--line);
  border-left:3px solid var(--pc,var(--acc));
  border-radius:var(--r-s);
  overflow:hidden;box-shadow:var(--sh);
}
.rm-patch.latest{box-shadow:0 0 18px rgba(240,192,64,.09),var(--sh)}
.rm-patch-bar{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:11px 14px;background:none;border:0;
  color:inherit;font:inherit;text-align:left;cursor:pointer;
  transition:background .12s;
}
.rm-patch-bar:hover{background:rgba(255,255,255,.03)}
.rm-patch-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  font-size:1.05rem;flex:0 0 auto;
}
.rm-patch-id{
  display:flex;align-items:baseline;gap:9px;
  flex:1 1 200px;min-width:0;
}
.rm-patch-id b{
  font-family:'Oswald',sans-serif;font-size:1rem;
  letter-spacing:.4px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rm-version{
  font-family:'Oswald',sans-serif;font-size:1.02rem;
  color:var(--gold);text-shadow:0 0 10px rgba(240,192,64,.3);
  flex:0 0 auto;
}
.rm-patch-tags{display:flex;gap:5px;flex:0 0 auto}
.rm-patch-sum{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.rm-patch-sum i{font-style:normal;font-weight:700}
.rm-patch-date{flex:0 0 auto;white-space:nowrap}
.rm-caret{flex:0 0 auto;font-size:.72rem;opacity:.7}

.rm-patch-panel{display:none;padding:0 16px 14px 16px}
.rm-patch.open .rm-patch-panel{display:block}
.rm-patch-sumtext{
  margin:0 0 12px;font-size:.98rem;line-height:1.55;color:#d8d0c4;
  padding-top:4px;
}
.rm-changelist{
  list-style:none;padding:12px 14px;margin:0;
  background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r-s);
}
.rm-change{
  display:flex;align-items:flex-start;gap:10px;
  padding:6px 0;border-bottom:1px dashed var(--line);
}
.rm-change:last-child{border-bottom:0}
.rm-change-icon{flex:0 0 auto;font-size:.88rem;line-height:1.5}
.rm-change.ok      .rm-change-icon{color:var(--ok)}
.rm-change.bad     .rm-change-icon{color:var(--bad)}
.rm-change.warn    .rm-change-icon{color:var(--warn)}
.rm-change.neutral .rm-change-icon{color:var(--muted)}
.rm-change span:last-child{flex:1;line-height:1.5;overflow-wrap:anywhere}
.rm-patch-foot{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}

/* ---------- Responsive ---------- */
@media(max-width:1240px){
  .rm-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rm-col-body{max-height:none}
}
@media(max-width:900px){
  .rm-bar-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rm-mini.wide{grid-column:1 / -1}
  .rm-patch-sum,.rm-patch-tags{display:none}
}
@media(max-width:760px){
  .rm-board,.rm-board.single{grid-template-columns:minmax(0,1fr)}
  .rm-board.single .rm-col-body{grid-template-columns:minmax(0,1fr)}
  .rm-bar-tools{flex-direction:column;align-items:stretch}
  .rm-bar-right{justify-content:space-between}
  .rm-drawer{width:100%;border-left:0}
  .rm-lright{width:100%;margin-left:0;justify-content:space-between}
  .rm-patch-date{display:none}
}
@media(max-width:460px){
  .rm-bar-stats{grid-template-columns:minmax(0,1fr)}
  .rm-fchip{font-size:.72rem;padding:4px 9px}
  .rm-votes.mini .rm-vote-btn{padding:5px 8px}
}
/* ==========================================================
   Warenkorb (Marktplatz)
   ========================================================== */
#mkCartTop {
  margin-bottom: 16px;
}
.mk-cart-section {
  border: 1px solid var(--gold) !important;
  background: linear-gradient(180deg, rgba(240,192,64,.04), var(--panel));
}
.mk-cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.mk-cart-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart-row {
  display: grid;
  grid-template-columns: 1fr 70px 100px 38px;
  gap: 12px;
  align-items: center;
  background: var(--panel2);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: var(--r-s);
  transition: border-color .15s;
}
.cart-row:hover {
  border-color: var(--line2);
}
.cart-row-name {
  min-width: 0;
}
.cart-row-name b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .92rem;
}
.cart-qty-input {
  margin: 0 !important;
  padding: 6px 8px !important;
  text-align: center;
  width: 100%;
}
.cart-row-sub {
  text-align: right;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  color: var(--gold);
  white-space: nowrap;
}
.mk-cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 12px;
}
.mk-cart-total {
  display: flex;
  flex-direction: column;
}

/* Responsive Anpassung */
@media (max-width: 600px) {
  .cart-row {
    grid-template-columns: 1fr 60px 38px;
    gap: 8px;
  }
  .cart-row-sub {
    display: none; /* Auf Mobile Preis unter den Namen packen oder ausblenden */
  }
  .mk-cart-footer {
    flex-direction: column;
    text-align: center;
  }
  .mk-cart-footer .btn {
    width: 100%;
  }
}
/* ==========================================================
   Marktplatz v3 — Warenkorb, Lieferungen, Handels-Dialog
   ========================================================== */

/* Kopf */
.mk-head .mk-stats .stat{ min-width:104px }
.mk-head .mk-stats b{ font-size:1.15rem }

/* Rechte Spalte: Korb -> Regal -> Lieferungen */
.market-main{
  display:flex; flex-direction:column; gap:16px;
  min-width:0;
}
.market-main > .panel{ margin:0 }

/* ---------- Warenkorb ---------- */
.mk-cart{ border-left:3px solid var(--gold) }
.mk-cart.empty-cart{ border-left-color:var(--line2); padding:12px 16px }

.mk-cart-tbl{ display:flex; flex-direction:column }
.mk-cl{
  display:grid;
  grid-template-columns:1fr auto 96px 24px;
  align-items:center; gap:10px;
  padding:8px 0;
  border-bottom:1px dashed var(--line);
}
.mk-cl:last-child{ border-bottom:0 }
.mk-cl-n{ min-width:0 }
.mk-cl-n b{
  display:block; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.mk-cl-n span{ display:block }
.mk-cl-q{ display:flex; align-items:center; gap:4px }
.mk-step{
  width:26px; height:26px; padding:0;
  background:var(--panel2); border:1px solid var(--line);
  color:var(--txt); border-radius:var(--r-s);
  cursor:pointer; font:inherit; line-height:1;
}
.mk-step:hover:not([disabled]){ border-color:var(--acc); color:var(--acc) }
.mk-step[disabled]{ opacity:.35; cursor:not-allowed }
.mk-qin{
  width:52px; margin:0; padding:4px 6px;
  text-align:center; font-size:.86rem;
}
.mk-cl-s{
  text-align:right;
  font-family:'Oswald',sans-serif;
  color:var(--gold); white-space:nowrap;
}

.mk-cart-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  margin-top:12px; padding-top:12px;
  border-top:1px solid var(--line);
}
.mk-sum{ display:flex; flex-direction:column; line-height:1.3 }
.mk-sum b{
  font-family:'Oswald',sans-serif; font-size:1.3rem;
  color:var(--gold); text-shadow:0 0 10px rgba(240,192,64,.3);
}
.mk-other{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px }
.mk-other .chip{ cursor:pointer }
.mk-other .chip:hover{ border-color:var(--acc); color:var(--acc) }

/* ---------- Händlerkachel: Zusatzmarken ---------- */
.vendor-row{ position:relative }
.vr-cart,.vr-cool{
  position:absolute; z-index:3;
  top:6px; right:6px;
  font-size:.62rem; font-weight:700;
  padding:2px 7px; border-radius:99px;
  background:rgba(10,8,5,.85);
  border:1px solid var(--gold); color:var(--gold);
  white-space:nowrap;
}
.vr-cool{
  top:auto; bottom:6px; right:6px;
  border-color:var(--warn); color:var(--warn);
}

/* Ware liegt im Korb */
.shelf-item.incart{
  border-color:rgba(240,192,64,.5);
  box-shadow:inset 2px 0 0 var(--gold);
}

/* Werkzeugleiste im Regal */
.mk-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin-bottom:12px;
}
.mk-toolbar .search{ margin:0; max-width:240px }

/* ---------- Lieferungen ---------- */
.mk-orders{ display:flex; flex-direction:column; gap:9px }
.mk-order{
  background:var(--panel2); border:1px solid var(--line);
  border-left:3px solid var(--line2);
  border-radius:var(--r-s); padding:10px 12px;
  display:flex; flex-direction:column; gap:5px;
}
.mk-order.ph-ready,.mk-order.ph-partial{ border-left-color:var(--ok) }
.mk-order.ph-prep,.mk-order.ph-pending{ border-left-color:var(--warn) }
.mk-order.ph-lapsed{ border-left-color:var(--bad) }
.mk-order-h{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.mk-order-sum{
  margin-left:auto;
  font-family:'Oswald',sans-serif;
  color:var(--gold); white-space:nowrap;
}
.mk-order-items{ display:flex; gap:5px; flex-wrap:wrap }
.mk-past{ margin-top:12px }
.mk-past summary{ font-size:.85rem; color:var(--muted) }
.mk-cd{ font-variant-numeric:tabular-nums; font-family:var(--mono) }

/* ==========================================================
   Handels-Dialog (Minispiel)
   ========================================================== */
.modal.hg{ max-width:820px }
.hg-grid{
  display:grid; grid-template-columns:210px 1fr; gap:16px;
  align-items:start;
}
@media(max-width:640px){
  .hg-grid{ grid-template-columns:1fr }
}
.hg-npc{
  border:1px solid var(--line); border-radius:var(--r-s);
  overflow:hidden; background:var(--panel2);
}
.hg-npc .shelf-portrait{
  flex:none; max-width:none; width:100%;
  aspect-ratio:1/1; border-right:0;
  border-bottom:1px solid var(--line);
}
.hg-npc .shelf-portrait .qp-fade{ display:none }
.hg-npc-b{ padding:10px 12px }
.hg-npc-b b{ font-family:'Oswald',sans-serif; font-size:1.05rem }

.hg-deal{ display:flex; flex-direction:column; gap:10px; min-width:0 }
.hg-cart{
  background:#0a0604; border:1px solid var(--line);
  border-radius:var(--r-s); padding:8px 10px;
  max-height:110px; overflow-y:auto;
  font-size:.86rem;
}
.hg-cart-row{
  display:flex; justify-content:space-between; gap:10px;
  padding:2px 0;
}
.hg-price{
  border:1px solid var(--line2); border-radius:var(--r-s);
  padding:9px 12px; background:var(--panel2);
}
.hg-price b{
  font-family:'Oswald',sans-serif; font-size:1.5rem;
  color:var(--gold); text-shadow:0 0 12px rgba(240,192,64,.3);
}
.hg-log{
  display:flex; flex-direction:column; gap:4px;
  max-height:150px; overflow-y:auto;
  background:#0a0604; border:1px solid var(--line);
  border-radius:var(--r-s); padding:8px 10px;
  font-size:.85rem; line-height:1.45;
}
.hg-line{ padding:2px 0; border-bottom:1px dashed rgba(61,40,32,.6) }
.hg-line:last-child{ border-bottom:0 }
.hg-line.ok{ color:#c3e2ab }
.hg-line.bad{ color:#f0a79c }

.hg-moves{ display:flex; flex-direction:column; gap:6px }
.hg-move{
  display:flex; align-items:center; gap:10px;
  width:100%; text-align:left;
  background:var(--panel2); border:1px solid var(--line);
  border-radius:var(--r-s); padding:9px 11px;
  color:var(--txt); font:inherit; cursor:pointer;
  transition:.14s;
}
.hg-move:hover{
  border-color:var(--acc); transform:translateX(3px);
  background:rgba(224,101,26,.08);
}
.hg-move.fraud{
  border-color:rgba(208,32,32,.5);
  background:linear-gradient(180deg,rgba(208,32,32,.1),var(--panel2));
}
.hg-move.fraud:hover{ border-color:var(--bad); background:rgba(208,32,32,.16) }
.hg-move-i{ font-size:1.3rem; flex:0 0 auto; line-height:1 }
.hg-move-b{ min-width:0; flex:1; display:flex; flex-direction:column }
.hg-move-b b{ font-size:.9rem }
.hg-move-b span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hg-move-c{
  flex:0 0 auto; font-family:'Oswald',sans-serif;
  font-size:1rem; min-width:42px; text-align:right;
}
/* ---------- Quest-Fristen ---------- */
.q-cd{ font-family:var(--mono); font-variant-numeric:tabular-nums }
.q-cd.bad{ color:var(--bad); font-weight:700 }

.quest-status.accepted.urgent{
  color:var(--warn);
  box-shadow:inset 2px 0 0 var(--warn);
  background:rgba(240,160,48,.1);
}
.quest-foot .center{ text-align:center }
.quest-pay .badge{ flex:0 0 auto }

/* Frist verpasst: Karte deutlich abgesetzt */
.quest-card.locked .quest-status.locked > span:first-child{ color:var(--gold) }
/* ---------- Verhandlungssperre ---------- */
.vr-cool.hg{
  border-color:var(--gold);
  color:var(--gold);
}
.vendor-row.cooling .vr-pic{ filter:grayscale(.35) }

/* Warnbanner im Handelsdialog */
.hg-warn{
  margin-bottom:14px;
  padding:9px 12px;
  border-radius:var(--r-s);
  background:rgba(240,160,48,.1);
  border:1px solid rgba(240,160,48,.45);
  color:#f0d28a;
  font-size:.85rem;
}
.modal-foot .grow{ text-align:left }
/* ---------- Archiv ---------- */
.ach-cat{ margin:20px 0 10px; padding-bottom:6px;
  border-bottom:1px solid var(--line); font-size:1rem }
.ach-cat:first-child{ margin-top:0 }

.ach-grid{ display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) }

.ach{ display:flex; gap:12px; padding:12px;
  background:var(--panel2); border:1px solid var(--line);
  border-left:3px solid var(--line2); border-radius:var(--r-s);
  opacity:.72; transition:.15s }
.ach.got{ opacity:1; border-left-color:var(--tc);
  background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 8%,transparent),var(--panel2)) }
.ach.shame{ border-left-color:var(--bad) }
.ach.shame.got{ background:linear-gradient(90deg,rgba(208,32,32,.1),var(--panel2)) }
.ach.secret{ opacity:.5 }
.ach:hover{ opacity:1; transform:translateX(2px) }

.ach-ico{ flex:0 0 auto; font-size:1.9rem; line-height:1;
  filter:grayscale(1) }
.ach.got .ach-ico{ filter:none }

.ach-b{ min-width:0; flex:1 }
.ach-h{ display:flex; align-items:baseline; gap:8px;
  justify-content:space-between }
.ach-h b{ font-family:'Oswald',sans-serif; font-size:.98rem }
.ach-t{ flex:0 0 auto; font-size:.62rem; text-transform:uppercase;
  letter-spacing:1.1px; color:var(--tc) }
.ach-note{ font-size:.8rem; color:var(--muted);
  line-height:1.45; margin:4px 0 6px }
.ach-got{ font-size:.76rem; color:var(--ok) }
.ach.shame .ach-got{ color:var(--bad) }
.ach-prog .bar{ height:5px; margin:0 0 3px }
.ach-prog span{ font-size:.72rem }

.ach-tiers{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px }
.ach-tchip{ font-size:.68rem; padding:2px 8px; border-radius:99px;
  border:1px solid var(--tc); color:var(--tc) }

.ach-strip{ display:flex; gap:5px; flex-wrap:wrap }
.ach-mini{ width:32px; height:32px; display:grid; place-items:center;
  font-size:1.05rem; border-radius:var(--r-s);
  background:#0a0604; border:1px solid var(--tc) }
.ach-mini.more{ font-size:.7rem; color:var(--muted);
  border-color:var(--line) }
  /* ---------- Notizbuch ---------- */
.todo-list{ display:flex; flex-direction:column; gap:6px }

.todo{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px;
  background:var(--panel2); border:1px solid var(--line);
  border-left:3px solid var(--pc); border-radius:var(--r-s);
  transition:.15s }
.todo:hover{ border-color:var(--line2) }
.todo.done{ opacity:.5; border-left-color:var(--line) }
.todo.done .todo-t{ text-decoration:line-through }
.todo.pending{ opacity:.55; border-style:dashed }

.todo-box{ flex:0 0 auto; width:22px; height:22px; margin-top:1px;
  display:grid; place-items:center; cursor:pointer;
  background:#0a0604; border:2px solid var(--pc);
  border-radius:5px; color:var(--ok); font-size:.85rem;
  font-weight:700; line-height:1 }
.todo-box:hover{ background:#141008 }
.todo-box:disabled{ cursor:not-allowed; opacity:.4 }

.todo-b{ flex:1; min-width:0 }
.todo-t{ font-size:.94rem; line-height:1.35; word-break:break-word }
.todo-m{ margin-top:3px }

.todo-a{ flex:0 0 auto; display:flex; gap:4px; opacity:0; transition:.15s }
.todo:hover .todo-a{ opacity:1 }
@media (hover:none){ .todo-a{ opacity:1 } }
/* ---------- Server-Info: Regeln neben FAQ ---------- */
.info-cols{
  display:grid; gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  /* start statt stretch: die kürzere Spalte soll nicht auf die
     Höhe der längeren gezogen werden und unten leer stehen */
  align-items:start;
}
@media (max-width:900px){
  .info-cols{ grid-template-columns:1fr }
}

/* Regeln kompakt — kein waagerechtes Scrollen in halber Breite */
.rule-mini-list{
  display:flex; flex-direction:column; gap:5px;
  /* Deckel: bei 30 Regeln würde die linke Spalte sonst dreimal
     so hoch wie das FAQ und man scrollt an ihm vorbei */
  max-height:460px; overflow-y:auto; padding-right:5px;
}
.rule-mini{
  padding:7px 10px;
  background:var(--panel2);
  border:1px solid var(--line);
  border-left:3px solid var(--line2);
  border-radius:var(--r-s);
}
.rule-mini-h{ display:flex; align-items:center; gap:6px; margin-bottom:2px }
.rule-mini-h code{ font-size:.7rem; padding:1px 5px }
.rule-mini b{ font-size:.9rem; line-height:1.35 }

.rule-mini.sev-schwer{ border-left-color:var(--bad) }
.rule-mini.sev-mittel{ border-left-color:var(--warn) }
.rule-mini.sev-leicht{ border-left-color:var(--ok) }
/* ---------- RP-Seite: eigener Stand oben, zweispaltig ---------- */
.rp-cols{
  display:grid; gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  /* start statt stretch — sonst wird die kürzere Spalte auf die
     Höhe der längeren gezogen und steht unten leer */
  align-items:start;
}
@media (max-width:900px){
  .rp-cols{ grid-template-columns:1fr }
}

/* Deckel für beide Listen. Ohne das schiebt jemand mit fünfzehn
   Meldungen die Regeln aus dem Blickfeld — genau das, was das
   Voranstellen verhindern sollte. */
.rp-scroll{
  display:flex; flex-direction:column; gap:8px;
  max-height:340px; overflow-y:auto; padding-right:5px;
}
/* Item-Kopfgelder & Pakte nutzen bereits .list-item, .badge, .price —
   keine neuen Klassen nötig. Nur der Marktereignis-Banner braucht nichts
   Zusätzliches, da er .notice wiederverwendet. */

/* Patchnotes-Popup: Icon-Farben in der Liste */
.modal-body li.ok{ color: var(--ok) }
.modal-body li.bad{ color: var(--bad) }
.modal-body li.warn{ color: var(--warn) }
.bt-note{
  background: rgba(224,101,26,.07);
  border-left: 3px solid rgba(224,101,26,.5);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: 7px 10px;
  margin: 0 0 10px;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--fg);
}
/* ==========================================================
   FUNKKANÄLE — Radio-Gerät Look (v2)
   Jede Karte ist ein Miniatur-Funkgerät: LCD-Display mit
   Scanlines, Signalbalken, "ON AIR" Anzeige, Lautsprecher-
   Gitter und Drehknopf. Compact und übersichtlich.
   ========================================================== */
.radio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}
@media(max-width:680px){
  .radio-grid{ grid-template-columns:1fr }
}

/* --- Suchleiste --- */
.radio-search-bar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.radio-search-bar .search{
  max-width:300px;
  margin:0;
}
.radio-count{
  grid-column:1 / -1;
  text-align:center;
  margin-top:10px;
  font-size:.8rem;
  color:var(--muted);
}

/* ==========================================================
   RADIO-GERÄT (Karte)
   ========================================================== */
.radio-device{
  display:flex;
  flex-direction:column;
  gap:0;
  background:linear-gradient(160deg,#1c18120%, #14100a 50%, #0e0a06 100%);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 8px 24px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(0,0,0,.3);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
  position:relative;
}
.radio-device::before{
  /* Clan-Farb-Akzent oben */
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--rc,var(--acc)) 30%,
    var(--rc,var(--acc)) 70%,
    transparent 100%);
  z-index:1;
}
.radio-device:hover{
  transform:translateY(-4px);
  border-color:var(--rc,var(--acc));
  box-shadow:
    0 14px 32px rgba(0,0,0,.6),
    0 0 16px color-mix(in srgb, var(--rc,var(--acc)) 25%, transparent),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* --- Gehäuse-Header --- */
.radio-case-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:12px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
}
.radio-clan-link{
  text-decoration:none !important;
  color:var(--txt) !important;
  font-family:'Oswald',sans-serif;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1 1 auto;
  min-width:0;
  transition:color .15s;
}
.radio-clan-link:hover{ color:var(--rc,var(--acc)) !important }
.radio-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:22px;
  padding:0 8px;
  border-radius:4px;
  background:var(--rc,var(--acc));
  color:#0a0805;
  font-family:'Oswald',sans-serif;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:1px;
  flex:0 0 auto;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}

/* ==========================================================
   LCD-DISPLAY
   ========================================================== */
.radio-lcd{
  position:relative;
  margin:10px 12px;
  padding:12px 14px 10px;
  background:
    radial-gradient(ellipse at 50% 50%, #0a1a08 0%, #050a04 100%);
  border:1px solid rgba(118,210,117,.25);
  border-radius:6px;
  box-shadow:
    inset 0 0 20px rgba(0,0,0,.85),
    inset 0 1px 2px rgba(0,0,0,.95),
    0 0 8px rgba(118,210,117,.08);
  overflow:hidden;
  font-family:'Courier New',Courier,monospace;
}
/* Scanlines */
.radio-lcd-scan{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0,0,0,.15) 2px,
    rgba(0,0,0,.15) 3px
  );
  z-index:1;
}
/* Glanz oben */
.radio-lcd::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:50%;
  background:linear-gradient(180deg,rgba(118,210,117,.04),transparent);
  pointer-events:none;
  z-index:1;
}

.radio-lcd-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  position:relative;
  z-index:2;
}
.radio-lcd-row.top{
  font-size:.6rem;
  letter-spacing:1.5px;
  color:rgba(118,210,117,.55);
  margin-bottom:4px;
}
.radio-lcd-row.mid{
  margin:2px 0 6px;
  align-items:baseline;
}
.radio-lcd-row.bot{
  font-size:.62rem;
  color:rgba(118,210,117,.6);
}

/* FM-Label */
.radio-lcd-label{
  font-weight:700;
  letter-spacing:2px;
  color:rgba(118,210,117,.7);
}

/* ON AIR Anzeige */
.radio-lcd-onair{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-weight:700;
  font-size:.55rem;
  letter-spacing:1px;
  color:rgba(224,101,26,.9);
  text-shadow:0 0 6px rgba(224,101,26,.5);
}
.radio-lcd-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:#e0651a;
  box-shadow:0 0 6px #e0651a, 0 0 12px rgba(224,101,26,.5);
  animation:radioBlink 1.6s ease-in-out infinite;
}
@keyframes radioBlink{
  0%,100%{ opacity:1 }
  50%{ opacity:.3 }
}

/* Frequenz groß */
.radio-lcd-freq{
  font-size:1.7rem;
  font-weight:700;
  color:#76d275;
  text-shadow:
    0 0 6px rgba(118,210,117,.6),
    0 0 14px rgba(118,210,117,.25);
  letter-spacing:2px;
  white-space:pre;
  font-variant-numeric:tabular-nums;
}
.radio-lcd-unit{
  font-size:.78rem;
  font-weight:700;
  color:rgba(118,210,117,.7);
  letter-spacing:1.5px;
  margin-left:4px;
}

/* Signalbalken */
.radio-signal{
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
  flex:0 0 auto;
}
.radio-signal i{
  display:block;
  width:3px;
  background:rgba(118,210,117,.55);
  border-radius:1px;
  box-shadow:0 0 3px rgba(118,210,117,.3);
}
.radio-signal i:nth-child(1){ height:4px;  opacity:.9 }
.radio-signal i:nth-child(2){ height:6px;  opacity:.85 }
.radio-signal i:nth-child(3){ height:9px;  opacity:.75 }
.radio-signal i:nth-child(4){ height:12px; opacity:.6 }
.radio-signal i:nth-child(5){ height:15px; opacity:.4 }
@keyframes radioSignalPulse{
  0%,100%{ filter:brightness(1) }
  50%{ filter:brightness(1.4) }
}
.radio-signal i{ animation:radioSignalPulse 2s ease-in-out infinite }
.radio-signal i:nth-child(1){ animation-delay:0s }
.radio-signal i:nth-child(2){ animation-delay:.15s }
.radio-signal i:nth-child(3){ animation-delay:.3s }
.radio-signal i:nth-child(4){ animation-delay:.45s }
.radio-signal i:nth-child(5){ animation-delay:.6s }

/* Channel-Text */
.radio-lcd-ch{
  letter-spacing:1px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ==========================================================
   LAUTSPRECHER + DREHKNOBF
   ========================================================== */
.radio-body{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.4));
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
}

/* Lautsprecher-Gitter */
.radio-speaker{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:3px;
  padding:6px;
  background:#050302;
  border:1px solid rgba(0,0,0,.6);
  border-radius:6px;
  box-shadow:inset 0 0 8px rgba(0,0,0,.9);
}
.radio-speaker i{
  display:block;
  height:8px;
  background:rgba(255,255,255,.06);
  border-radius:50%;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8);
}

/* Drehknopf */
.radio-knob{
  flex:0 0 auto;
  width:52px;
  height:52px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
/* Drehknopf */
.radio-knob-outer{
  width:42px; height:42px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #3a2a1a, #1a1410 70%);
  border:2px solid #4a3828;
  box-shadow:
    0 2px 6px rgba(0,0,0,.6),
    inset 0 1px 2px rgba(255,255,255,.12),
    inset 0 -2px 4px rgba(0,0,0,.5);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:rotate(var(--rot,0deg));
  transition:transform .4s ease;
}
.radio-knob-inner{
  width:20px; height:20px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #5a4028, #2a1a0a);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
}
.radio-knob-mark{
  position:absolute;
  top:3px;
  left:50%;
  transform:translateX(-50%);
  width:3px; height:14px;
  background:var(--rc,var(--acc));
  border-radius:2px;
  box-shadow:0 0 6px var(--rc,var(--acc));
}
.radio-knob-ring{
  display:flex;
  gap:20px;
  font-size:.6rem;
  color:var(--muted);
  opacity:.6;
  margin-top:2px;
}

/* ==========================================================
   NOTIZ (Klebeband-Look)
   ========================================================== */
.radio-note{
  position:relative;
  padding:10px 14px;
  font-style:italic;
  font-size:.82rem;
  line-height:1.4;
  color:var(--muted);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.15));
  min-height:2.6em;
  display:flex;
  align-items:center;
}
.radio-note-tape{
  display:block;
  width:40px;
  height:10px;
  background:linear-gradient(180deg,rgba(240,200,100,.25),rgba(220,180,80,.15));
  border:1px solid rgba(240,200,100,.2);
  border-radius:1px;
  position:absolute;
  top:-5px;
  left:50%;
  transform:translateX(-50%) rotate(-2deg);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  opacity:.7;
}

/* ==========================================================
   FOOTER (Gehäuse unten) — Zwei Tasten
   ========================================================== */
.radio-case-bot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.45));
  border-top:1px solid rgba(255,255,255,.08);
}

/* Taste 1: Anführer */
.radio-btn-leader{
  display:flex;
  align-items:center;
  gap:6px;
  text-decoration:none !important;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.3));
  border:1px solid rgba(255,255,255,.12);
  padding:6px 12px;
  border-radius:var(--r-s);
  font-size:.76rem;
  font-weight:600;
  max-width:160px;
  overflow:hidden;
  color:var(--txt) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.4);
  transition:background .15s, border-color .15s;
}
.radio-btn-leader:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.4));
  border-color:rgba(255,255,255,.2);
}
.radio-btn-leader .leader-ico{
  font-size:.9rem;
  filter:drop-shadow(0 0 4px rgba(240,192,64,.4));
  flex:0 0 auto;
}
.radio-btn-leader-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Taste 2: Zum Clan */
.radio-btn-clan{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none !important;
  background:linear-gradient(180deg, color-mix(in srgb, var(--rc,var(--acc)) 25%, #1a1410), #0a0805);
  border:1px solid color-mix(in srgb, var(--rc,var(--acc)) 45%, transparent);
  padding:6px 14px;
  border-radius:var(--r-s);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.5px;
  color:#fff !important;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 2px 6px rgba(0,0,0,.5);
  transition:.15s;
}
.radio-btn-clan:hover{
  filter:brightness(1.2);
  box-shadow:0 0 12px color-mix(in srgb, var(--rc,var(--acc)) 40%, transparent);
  transform:translateY(-1px);
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media(max-width:520px){
  .radio-lcd-freq{ font-size:1.4rem }
  .radio-speaker{ display:none }
  .radio-body{ justify-content:center; padding:12px }
  .radio-btn-leader{ max-width:120px; font-size:.7rem }
  .radio-btn-clan{ font-size:.68rem; padding:6px 10px }
}
/* ==========================================================
   CLAN-BANNER — Übersichtskarten (v2)
   Jede Karte ist ein Banner mit großem Wappen-Tag links,
   Clan-Info mitte und Stats-Footer rechts/unten.
   ========================================================== */
.clan-banner-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:14px;
}
@media(max-width:560px){
  .clan-banner-grid{ grid-template-columns:1fr }
}

.clan-banner-card{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  gap:0;
  background:linear-gradient(160deg, rgba(34,24,20,.9) 0%, rgba(20,16,10,.95) 60%, rgba(14,10,6,1) 100%);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  color:var(--txt);
  box-shadow:
    0 6px 18px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
  position:relative;
  cursor:pointer;
}
/* Farb-Streifen oben */
.clan-banner-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, transparent 0%, var(--cc,var(--acc)) 20%, var(--cc,var(--acc)) 80%, transparent 100%);
  z-index:2;
}
/* Stretched-Link Overlay: macht die ganze Karte klickbar
   für den Clan, ABER liegt UNTER dem Allianz-Link (z-index:1
   vs z-index:3). So klappt beides nebeneinander. */
.clan-banner-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  /* Pointer-Events: auto — aber das Allianz-<a> hat z-index:3
     und "sticht" durch. */
}
/* --- Wappen-Tag (links) --- */
.cbc-crest{
  grid-row:1 / 3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:16px 14px;
  background:
    radial-gradient(circle at 50% 40%,
      color-mix(in srgb, var(--cc) 35%, transparent) 0%,
      transparent 70%),
    linear-gradient(160deg, #14100c, #0a0705);
  border-right:1px solid var(--line);
  min-width:80px;
}
.cbc-crest-inner{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:linear-gradient(160deg, var(--cc,var(--acc)), color-mix(in srgb, var(--cc,var(--acc)) 60%, #000));
  color:#0a0805;
  font-family:'Oswald',sans-serif;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:1px;
  box-shadow:
    0 3px 8px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -2px 4px rgba(0,0,0,.3);
  text-shadow:0 1px 0 rgba(255,255,255,.15);
}
.cbc-rank{
  font-family:'Oswald',sans-serif;
  font-size:.8rem;
  font-weight:700;
  color:var(--gold);
  text-shadow:0 0 8px rgba(240,192,64,.4);
  letter-spacing:1px;
}

/* --- Hauptbereich --- */
.cbc-main{
  padding:14px 16px 8px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  position:relative;
  z-index:2;  /* über dem ::after Overlay */
}
.cbc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.cbc-name{
  font-family:'Oswald',sans-serif;
  font-size:1.12rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .15s;
}
.clan-banner-card:hover .cbc-name{ color:var(--cc,var(--acc)) }

.cbc-status{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:99px;
  border:1px solid;
  white-space:nowrap;
  flex:0 0 auto;
}
.cbc-status.open{
  color:var(--ok);
  border-color:rgba(80,168,48,.45);
  background:rgba(80,168,48,.1);
}
.cbc-status.closed{
  color:var(--muted);
  border-color:var(--line2);
  background:rgba(255,255,255,.03);
}

.cbc-motto{
  font-style:italic;
  font-size:.82rem;
  color:var(--muted);
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cbc-ally{
  margin-top:2px;
  position:relative;
  z-index:2;
}
.clan-banner-card:hover{
  transform:translateY(-4px);
  border-color:var(--cc,var(--acc));
  box-shadow:
    0 12px 28px rgba(0,0,0,.55),
    0 0 16px color-mix(in srgb, var(--cc,var(--acc)) 22%, transparent);
}
.cbc-ally-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.72rem;
  font-weight:600;
  color:var(--acc) !important;
  text-decoration:none !important;
  padding:2px 8px;
  border-radius:99px;
  border:1px solid rgba(224,101,26,.3);
  background:rgba(224,101,26,.06);
  transition:.15s;
  position:relative;
  z-index:3;            /* über dem Overlay → klickbar */
}
.cbc-ally-link:hover{
  border-color:var(--acc);
  background:rgba(224,101,26,.14);
}

/* --- Stats-Footer --- */
.cbc-stats{
  grid-column:2;
  display:flex;
  align-items:center;
  gap:0;
  padding:10px 16px 12px;
  border-top:1px dashed rgba(255,255,255,.06);
    z-index:2;
}
.cbc-stat{
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 12px 0 0;
  font-size:.78rem;
  color:var(--muted);
  border-right:1px solid rgba(255,255,255,.06);
}
.cbc-stat:last-child{ border-right:0; padding-right:0 }
.cbc-stat-ico{ font-size:.85rem; flex:0 0 auto }
.cbc-stat-val{
  font-family:'Oswald',sans-serif;
  font-size:.88rem;
  font-weight:700;
  color:var(--txt);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:90px;
}
.cbc-stat-lbl{
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--muted);
}
.cbc-stat-leader{ flex:1 1 auto; min-width:0 }
.cbc-stat-leader .cbc-stat-val{ color:var(--gold) }

/* Count */
.clan-banner-count{
  grid-column:1 / -1;
  text-align:center;
  margin-top:8px;
  font-size:.8rem;
  color:var(--muted);
}

/* --- Responsive --- */
@media(max-width:560px){
  .clan-banner-card{
    grid-template-columns:auto 1fr;
  }
  .cbc-crest{ padding:12px 10px; min-width:64px }
  .cbc-crest-inner{ width:44px; height:44px; font-size:.95rem }
  .cbc-name{ font-size:1rem }
  .cbc-motto{ font-size:.78rem }
  .cbc-stats{ flex-wrap:wrap; gap:6px }
  .cbc-stat{ padding-right:8px }
  .cbc-stat-lbl{ display:none }
}
/* ==========================================================
   ALLIANZEN — Optionales Feintuning
   ========================================================== */
/* Allianz-Karten bekommen einen dezent bläulichen Akzent 
   statt des Feuer-Orange, um sie von Clans zu unterscheiden */
.clan-banner-card[data-href*="/alliance/"]{
  /* Standard --cc wird aus JS gesetzt, aber der Glow 
     bleibt leicht kühler */
}
.clan-banner-card[data-href*="/alliance/"] .cbc-crest-inner{
  border-radius:50%; /* Rundes Wappen für Allianzen */
  box-shadow:
    0 3px 8px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -2px 4px rgba(0,0,0,.3),
    0 0 12px color-mix(in srgb, var(--cc,var(--acc)) 30%, transparent);
}
/* ==========================================================
   CLAN-BANNER — Übersichtskarten (v2)
   ========================================================== */
.clan-banner-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:14px;
}
@media(max-width:560px){
  .clan-banner-grid{ grid-template-columns:1fr }
}

.clan-banner-card{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  gap:0;
  background:#0a0805; /* Schwarz als Basis */
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  color:var(--txt);
  box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
  position:relative;
  cursor:pointer;
}

/* Farb-Streifen oben */
.clan-banner-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, transparent 0%, var(--cc,var(--acc)) 20%, var(--cc,var(--acc)) 80%, transparent 100%);
  z-index:4;
}

/* Klick-Overlay */
.clan-banner-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}

.clan-banner-card:hover{
  transform:translateY(-4px);
  border-color:var(--cc,var(--acc));
  box-shadow:0 12px 28px rgba(0,0,0,.55), 0 0 16px color-mix(in srgb, var(--cc,var(--acc)) 22%, transparent);
}

/* --- Wappen-Tag (links) --- */
.cbc-crest{
  grid-row:1 / 3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:16px 14px;
  background:linear-gradient(160deg, rgba(20,16,12,.85), rgba(10,8,5,.95));
  border-right:1px solid var(--line);
  min-width:80px;
  position:relative;
  z-index:3;
}
.cbc-crest-inner{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:linear-gradient(160deg, var(--cc,var(--acc)), color-mix(in srgb, var(--cc,var(--acc)) 60%, #000));
  color:#0a0805;
  font-family:'Oswald',sans-serif;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:1px;
  box-shadow:0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 4px rgba(0,0,0,.3);
}
.cbc-rank{
  font-family:'Oswald',sans-serif;
  font-size:.8rem;
  font-weight:700;
  color:var(--gold);
  text-shadow:0 0 8px rgba(240,192,64,.4);
  letter-spacing:1px;
}

/* --- Hauptbereich --- */
.cbc-main{
  padding:14px 16px 8px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  position:relative;
  z-index:3;
}
.cbc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.cbc-name{
  font-family:'Oswald',sans-serif;
  font-size:1.12rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .15s;
}
.clan-banner-card:hover .cbc-name{ color:var(--cc,var(--acc)) }

.cbc-status{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:99px;
  border:1px solid;
  white-space:nowrap;
  flex:0 0 auto;
}
.cbc-status.open{ color:var(--ok); border-color:rgba(80,168,48,.45); background:rgba(80,168,48,.1); }
.cbc-status.closed{ color:var(--muted); border-color:var(--line2); background:rgba(255,255,255,.03); }

.cbc-motto{
  font-style:italic;
  font-size:.82rem;
  color:var(--muted);
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cbc-ally{
  margin-top:2px;
  position:relative;
  z-index:4;
}
.cbc-ally-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.72rem;
  font-weight:600;
  color:var(--acc) !important;
  text-decoration:none !important;
  padding:2px 8px;
  border-radius:99px;
  border:1px solid rgba(224,101,26,.3);
  background:rgba(224,101,26,.06);
  transition:.15s;
  position:relative;
  z-index:5;
}
.cbc-ally-link:hover{ border-color:var(--acc); background:rgba(224,101,26,.14); }

/* --- Stats-Footer --- */
.cbc-stats{
  grid-column:2;
  display:flex;
  align-items:center;
  gap:0;
  padding:10px 16px 12px;
  border-top:1px solid rgba(255,255,255,.06);
  position:relative;
  z-index:3;
  background:linear-gradient(180deg, transparent, rgba(10,8,5,.85));
}
.cbc-stat{
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 12px 0 0;
  font-size:.78rem;
  color:var(--muted);
  border-right:1px solid rgba(255,255,255,.06);
}
.cbc-stat:last-child{ border-right:0; padding-right:0 }
.cbc-stat-ico{ font-size:.85rem; flex:0 0 auto }
.cbc-stat-val{
  font-family:'Oswald',sans-serif;
  font-size:.88rem;
  font-weight:700;
  color:var(--txt);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:90px;
}
.cbc-stat-lbl{ font-size:.62rem; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); }
.cbc-stat-leader{ flex:1 1 auto; min-width:0 }
.cbc-stat-leader .cbc-stat-val{ color:var(--gold) }

/* Count */
.clan-banner-count{
  grid-column:1 / -1;
  text-align:center;
  margin-top:8px;
  font-size:.8rem;
  color:var(--muted);
}

/* --- Responsive --- */
@media(max-width:560px){
  .clan-banner-card{ grid-template-columns:auto 1fr; }
  .cbc-crest{ padding:12px 10px; min-width:64px }
  .cbc-crest-inner{ width:44px; height:44px; font-size:.95rem }
  .cbc-name{ font-size:1rem }
  .cbc-motto{ font-size:.78rem }
  .cbc-stats{ flex-wrap:wrap; gap:6px }
  .cbc-stat{ padding-right:8px }
  .cbc-stat-lbl{ display:none }
}

/* ==========================================================
   ALLIANZEN — Optionales Feintuning
   ========================================================== */
.clan-banner-card[data-href*="/alliance/"] .cbc-crest-inner{
  border-radius:50%;
  box-shadow:0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 4px rgba(0,0,0,.3), 0 0 12px color-mix(in srgb, var(--cc,var(--acc)) 30%, transparent);
}

/* ==========================================================
   BANNER-HINTERGRÜNDE (Clans & Allianzen)
   ========================================================== */
.cbc-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:1;
}

/* Dunkles Overlay für Lesbarkeit */
.cbc-bg-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(10,8,5,.45) 0%, rgba(10,8,5,.55) 50%, rgba(10,8,5,.7) 100%);
}

/* 0: Standard */
.bg-0 { background:transparent; }

/* 1: Verrottetes Holz */
.bg-1 {
  background:
    repeating-linear-gradient(90deg, #4a2e14 0px, #4a2e14 40px, #3a2412 40px, #3a2412 80px, #44280e 80px, #44280e 120px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 16px, rgba(90,55,25,.5) 16px, rgba(90,55,25,.5) 17px),
    linear-gradient(180deg, #3a1c08, #1e0c04);
}

/* 2: Zerschlissener Beton */
.bg-2 {
  background:
    radial-gradient(circle at 25% 30%, rgba(130,115,90,.5) 0%, transparent 20%),
    radial-gradient(circle at 75% 60%, rgba(100,85,65,.5) 0%, transparent 25%),
    radial-gradient(circle at 50% 80%, rgba(70,55,45,.4) 0%, transparent 30%),
    linear-gradient(135deg, #3a3530 0%, #252118 50%, #2a2620 100%);
}

/* 3: Verrostetes Metall */
.bg-3 {
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.5) 0px, rgba(0,0,0,.5) 1px, transparent 1px, transparent 12px),
    repeating-linear-gradient(90deg, rgba(220,90,35,.15) 0px, rgba(220,90,35,.15) 1px, transparent 1px, transparent 40px),
    linear-gradient(135deg, #5c3018 0%, #2e180c 50%, #3a2014 100%);
}

/* 4: Toxischer Nebel */
.bg-4 {
  background:
    radial-gradient(ellipse 60% 40% at 30% 20%, rgba(140,180,40,.35) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 70% 70%, rgba(110,150,30,.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(80,110,20,.2) 0%, transparent 60%),
    #1a1c0a;
}

/* 5: Blutiger Asphalt */
.bg-5 {
  background:
    radial-gradient(ellipse 40% 30% at 30% 60%, rgba(160,25,25,.6) 0%, transparent 30%),
    radial-gradient(circle 80px at 75% 25%, rgba(140,15,15,.5) 0%, transparent 70%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 6px),
    linear-gradient(180deg, #281814, #1a100a);
}
/* ==========================================================
   BG-PICKER — Visuelle Auswahl im Formular
   ========================================================== */
.bg-picker{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}
.bg-opt{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:10px 8px;
  border:2px solid var(--line);
  border-radius:var(--r-s);
  cursor:pointer;
  transition:border-color .15s, transform .15s;
  background:var(--panel2);
  min-width:72px;
}
.bg-opt:hover{
  border-color:var(--line2);
  transform:translateY(-2px);
}
.bg-opt.selected{
  border-color:var(--acc);
  box-shadow:0 0 10px rgba(224,101,26,.3);
  background:rgba(224,101,26,.08);
}
.bg-opt span{
  font-size:1.4rem;
  line-height:1;
}
.bg-opt small{
  font-size:.62rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
}
.bg-opt.selected small{
  color:var(--acc);
}
/* ==========================================================
   CLAN-DETAIL HEADER (Safehouse Look)
   ========================================================== */
.clan-detail-header{
  position:relative;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#0a0805;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  margin-bottom:18px;
}
.clan-detail-header::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg, transparent 0%, var(--cc,var(--acc)) 20%, var(--cc,var(--acc)) 80%, transparent 100%);
  z-index:4;
}

.cdh-inner{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:20px;
  padding:24px;
  flex-wrap:wrap;
}

/* --- Crest --- */
.cdh-crest{
  flex:0 0 auto;
}
.cdh-crest-inner{
  width:84px;
  height:84px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:linear-gradient(160deg, var(--cc,var(--acc)), color-mix(in srgb, var(--cc,var(--acc)) 50%, #000));
  color:#0a0805;
  font-family:'Oswald',sans-serif;
  font-size:1.8rem;
  font-weight:700;
  letter-spacing:1px;
  box-shadow:0 4px 12px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.2), inset 0 -3px 6px rgba(0,0,0,.3);
  border:2px solid rgba(0,0,0,.4);
}

/* --- Info --- */
.cdh-info{
  flex:1 1 300px;
  min-width:0;
}
.cdh-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:4px;
}
.cdh-title-row h1{
  font-size:1.8rem;
  text-transform:uppercase;
  letter-spacing:1px;
  text-shadow:0 2px 4px rgba(0,0,0,.8);
}
.cdh-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:99px;
  border:1px solid;
}
.cdh-badge.open{ color:var(--ok); border-color:rgba(80,168,48,.5); background:rgba(80,168,48,.15); }
.cdh-badge.closed{ color:var(--muted); border-color:var(--line2); background:rgba(255,255,255,.05); }
.cdh-badge.role{ color:var(--gold); border-color:rgba(240,192,64,.5); background:rgba(240,192,64,.1); }

.cdh-motto{
  font-style:italic;
  font-size:1rem;
  color:#d8d0c4;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  margin-bottom:10px !important;
}

.cdh-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.cdh-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.76rem;
  font-weight:600;
  color:#d8d0c4;
  background:rgba(10,8,5,.7);
  border:1px solid rgba(255,255,255,.1);
  padding:5px 12px;
  border-radius:6px;
  backdrop-filter:blur(4px);
}

/* --- Actions --- */
.cdh-actions{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:160px;
}

/* --- Manifest --- */
.cdh-desc{
  border-left:3px solid var(--acc);
  margin-bottom:18px;
}
.cdh-desc-label{
  font-family:'Oswald',sans-serif;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--acc);
  margin-bottom:8px;
}

/* --- Responsive --- */
@media(max-width:768px){
  .cdh-inner{
    flex-direction:column;
    align-items:flex-start;
    padding:18px;
  }
  .cdh-actions{
    width:100%;
    flex-direction:row;
    flex-wrap:wrap;
  }
  .cdh-actions .btn{ flex:1; min-width:140px; }
}
@media(max-width:480px){
  .cdh-title-row h1{ font-size:1.4rem; }
  .cdh-chip{ font-size:.7rem; padding:4px 8px; }
}
/* ==========================================================
   SPIELERPROFIL — S.T.A.L.K.E.R. PDA Style
   ========================================================== */
.stalker-pda{
  background:
    radial-gradient(circle at 50% 50%, rgba(30,20,10,.5) 0%, transparent 80%),
    linear-gradient(160deg, #15100c 0%, #0c0a08 100%);
  border:2px solid #4a3828;
  border-radius:2px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.8), 0 8px 24px rgba(0,0,0,.6);
  position:relative;
  margin-bottom:18px;
  overflow:hidden;
  clip-path: polygon(0 12px, 12px 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
.stalker-pda.banned{
  border-color:rgba(208,32,32,.4);
  background:
    radial-gradient(circle at 50% 50%, rgba(60,10,10,.4) 0%, transparent 80%),
    linear-gradient(160deg, #15100c 0%, #0c0a08 100%);
}

/* --- PDA Top Bar --- */
.spda-top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(0,0,0,.5);
  border-bottom:1px solid #4a3828;
  padding:8px 14px;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:1px;
  color:var(--gold);
  text-transform:uppercase;
}
.spda-status.on{ color:var(--ok); text-shadow:0 0 4px var(--ok); animation:pulse 2s infinite; }
.spda-status.off{ color:var(--bad); }

/* --- PDA Grid --- */
.spda-grid{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:24px;
  padding:24px;
}

/* --- Linke Spalte --- */
.spda-col-left{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  border-right:1px solid #4a3828;
  padding-right:24px;
}
.spda-photo-frame{
  width:96px;
  height:96px;
  padding:6px;
  background:#0a0604;
  border:2px solid #5a3828;
  position:relative;
}
.spda-photo-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.05);
  pointer-events:none;
}
.spda-photo-frame.online{
  border-color:var(--ok);
  box-shadow:0 0 12px rgba(80,168,48,.2);
}
.spda-photo-frame.online::before{
  content:"";
  position:absolute;
  top:-4px; right:-4px;
  width:12px; height:12px;
  background:var(--ok);
  border:2px solid #0c0a08;
  border-radius:50%;
  box-shadow:0 0 6px var(--ok);
}

.spda-id-block{
  text-align:center;
}
.spda-alias{
  font-family:'Oswald',sans-serif;
  font-size:1.4rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--txt);
  margin-bottom:6px;
}
.spda-role{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
}

.spda-data-list{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
  padding-top:16px;
  border-top:1px solid #4a3828;
}
.spda-data-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--mono);
  font-size:.76rem;
  color:var(--muted);
}
.spda-data-row span{
  text-transform:uppercase;
  letter-spacing:1px;
}
.spda-data-row b{
  color:var(--txt);
  font-weight:400;
}
.spda-data-row b.warn{ color:var(--warn); }
.spda-data-row a{ color:var(--gold); text-decoration:none; }

.spda-action-list{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid #4a3828;
}
.spda-btn{
  background:rgba(224,101,26,.05);
  border:1px solid rgba(224,101,26,.2);
  color:var(--gold);
  padding:8px 12px;
  font-family:var(--mono);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:1px;
  cursor:pointer;
  text-align:left;
  text-decoration:none;
  display:block;
  transition:.15s;
}
.spda-btn:hover{
  background:rgba(224,101,26,.15);
  border-color:var(--acc);
  color:var(--acc);
  text-shadow:0 0 4px rgba(224,101,26,.4);
}
.spda-btn.danger{ color:var(--bad); border-color:rgba(208,32,32,.2); }
.spda-btn.danger:hover{ background:rgba(208,32,32,.15); border-color:var(--bad); text-shadow:0 0 4px rgba(208,32,32,.4); }

/* --- Rechte Spalte --- */
.spda-col-right{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.spda-ban{
  background:rgba(208,32,32,.1);
  border:1px solid var(--bad);
  color:var(--bad);
  text-align:center;
  padding:14px;
  font-family:'Oswald',sans-serif;
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:2px;
}
.spda-ban small{
  font-family:var(--mono);
  font-size:.8rem;
  font-weight:400;
  letter-spacing:0;
  display:block;
  margin-top:6px;
  color:var(--muted);
}

.spda-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.spda-chip{
  background:rgba(0,0,0,.4);
  border:1px solid #4a3828;
  padding:4px 10px;
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--txt);
  border-radius:0;
}
.spda-chip.bad{ color:var(--bad); border-color:rgba(208,32,32,.4); }

.spda-bio{
  background:rgba(0,0,0,.3);
  border-left:3px solid var(--gold);
  padding:12px 14px;
}
.spda-bio-label{
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--gold);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.spda-bio p{ font-size:.88rem; color:#d8d0c4; line-height:1.5; margin:0; }

.spda-section-title{
  font-family:'Oswald',sans-serif;
  font-size:1rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid #4a3828;
}

/* --- Vitals Grid --- */
.spda-vitals-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
}
.spda-vital{
  background:linear-gradient(160deg, rgba(20,14,10,.8), #0c0805);
  border:1px solid #4a3828;
  padding:12px 14px;
  position:relative;
  overflow:hidden;
}
.spda-vital::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:3px;
  height:100%;
  background:var(--gold);
  opacity:.6;
}
.spda-vital.lvl::before{ background:var(--acc); }
.spda-vital.bad::before{ background:var(--bad); }
.spda-vital.gold::before{ background:var(--gold); }

.spda-v-ico{
  font-size:1.2rem;
  color:var(--muted);
  display:block;
  margin-bottom:4px;
}
.spda-v-val{
  font-family:'Oswald',sans-serif;
  font-size:1.5rem;
  font-weight:700;
  color:var(--txt);
  display:block;
  line-height:1;
}
.spda-v-lbl{
  font-family:var(--mono);
  font-size:.6rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
  display:block;
  margin-top:4px;
}

/* --- XP & Lifetime --- */
.spda-xp-wrap{
  margin-top:18px;
  padding-top:16px;
  border-top:1px dashed #4a3828;
}
.spda-xp-label{
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--gold);
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.spda-xp-bar{
  height:10px;
  background:#0a0604;
  border:1px solid #4a3828;
  overflow:hidden;
  position:relative;
}
.spda-xp-bar i{
  display:block;
  height:100%;
  background:linear-gradient(90deg, var(--acc-d), var(--acc));
  box-shadow:0 0 8px rgba(224,101,26,.4);
}
.spda-xp-sync{
  font-family:var(--mono);
  font-size:.66rem;
  color:var(--muted);
  margin-top:6px;
  text-align:right;
}

.spda-lifetime{
  margin-top:16px;
  padding:10px 12px;
  background:rgba(0,0,0,.3);
  border:1px solid #4a3828;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center;
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--muted);
}
.spda-lt-title{ color:var(--gold); font-weight:700; }

/* --- Untere Module --- */
.stalker-mod{
  border:1px solid rgba(224,101,26,.3);
  background:linear-gradient(180deg, #15100c, #0c0805);
  border-radius:0;
  box-shadow:inset 0 0 20px rgba(0,0,0,.6);
}
.stalker-death, .stalker-bounty{
  background:linear-gradient(160deg, #15100c, #0c0805);
  border:1px solid #4a3828;
  border-radius:0;
  box-shadow:inset 0 0 20px rgba(0,0,0,.6);
}
.stalker-death h2, .stalker-bounty h2, .stalker-mod h2{
  font-family:'Oswald',sans-serif;
  font-size:1rem;
  letter-spacing:2px;
  color:var(--gold);
  border-bottom:1px solid #4a3828;
  padding-bottom:10px;
  margin-bottom:14px;
}

/* --- Responsive --- */
@media(max-width:860px){
  .spda-grid{
    grid-template-columns:1fr;
    gap:18px;
    padding:18px;
  }
  .spda-col-left{
    border-right:0;
    border-bottom:1px solid #4a3828;
    padding-right:0;
    padding-bottom:18px;
  }
  .spda-data-list{
    grid-template-columns:1fr 1fr;
    display:grid;
    gap:12px;
  }
  .spda-action-list{
    flex-direction:row;
    flex-wrap:wrap;
  }
  .spda-btn{ flex:1; min-width:140px; text-align:center; }
}
@media(max-width:560px){
  .spda-data-list{ grid-template-columns:1fr; }
  .spda-vitals-grid{ grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); }
}
/* ==========================================================
   SPIELERPROFIL — Ruf & Archiv an PDA anpassen
   ========================================================== */
#pdRep .panel, #pdAch .panel {
  background: linear-gradient(160deg, #15100c 0%, #0c0a08 100%);
  border: 1px solid #4a3828;
  border-radius: 0;
  box-shadow: inset 0 0 20px rgba(0,0,0,.6);
  margin-bottom: 18px;
}
#pdRep .panel h2, #pdAch .panel h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  letter-spacing: 2px;
  color: var(--gold);
  border-bottom: 1px solid #4a3828;
  padding-bottom: 10px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
#pdRep .panel h3, #pdAch .panel h3 {
  font-family: 'Oswald', sans-serif;
  font-size: .9rem;
  letter-spacing: 1px;
  color: var(--txt);
  border-bottom: 1px dashed #4a3828;
  padding-bottom: 8px;
  margin-top: 16px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
#pdRep .rep-dial {
  filter: sepia(0.3) hue-rotate(-10deg); /* Leichter Bernstein-Stich für den Ring */
}
#pdRep .rep-ev, #pdAch .ach {
  background: rgba(0,0,0,.3);
  border: 1px solid #4a3828 !important;
  border-radius: 0;
}
#pdRep .rep-scale-bar {
  border: 1px solid #4a3828;
}
#pdRep .rep-marker {
  background: var(--gold);
  box-shadow: 0 0 6px rgba(240,192,64,.5);
}
#pdRep .rep-badge {
  font-family: var(--mono);
}
#pdAch .ach-tiers .ach-tchip {
  border: 1px solid #4a3828 !important;
  color: var(--gold) !important;
  background: rgba(0,0,0,.3) !important;
  border-radius: 0 !important;
}
#pdAch .ach-mini {
  border: 1px solid #4a3828 !important;
  background: rgba(0,0,0,.3) !important;
  border-radius: 0 !important;
}
#pdAch .ach-b b { color: var(--txt); }
#pdAch .ach-note, #pdAch .ach-got { color: var(--muted); }
#pdAch .bar { background: #0a0604; border: 1px solid #4a3828; }

/* Der 'Lade' Spinner im PDA-Look */
#pdRep .loading, #pdAch .loading, #deaths .loading {
  color: var(--gold);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* ==========================================================
   SPIELERÜBERSICHT — Überlebenden-Register (PDA Style)
   ========================================================== */
.survivor-registry{
  background:linear-gradient(160deg, #15100c 0%, #0c0a08 100%);
  border:2px solid #4a3828;
  border-radius:2px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.8), 0 8px 24px rgba(0,0,0,.6);
  padding:24px;
  position:relative;
}
.survivor-registry::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--acc), var(--gold), var(--acc));
  opacity:.5;
}

/* --- Header --- */
.sr-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:18px;
  padding-bottom:18px;
  border-bottom:1px solid #4a3828;
  margin-bottom:18px;
}
.sr-header-left h1{
  font-size:1.4rem;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--gold);
  margin:0 0 4px;
}
.sr-subtitle{
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--muted);
  margin:0;
  letter-spacing:.5px;
}

.sr-header-stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.sr-stat-chip{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(0,0,0,.4);
  border:1px solid #4a3828;
  padding:8px 12px;
}
.sr-stat-chip.online{ border-color:rgba(80,168,48,.3); }
.sr-stat-chip.ok{ border-color:rgba(80,168,48,.3); }
.sr-stat-chip.bad{ border-color:rgba(208,32,32,.3); }

.sr-sc-ico{ font-size:1rem; }
.sr-sc-val{
  font-family:'Oswald',sans-serif;
  font-size:1.2rem;
  font-weight:700;
  color:var(--txt);
}
.sr-stat-chip.online .sr-sc-val{ color:var(--ok); }
.sr-stat-chip.ok .sr-sc-val{ color:var(--ok); }
.sr-stat-chip.bad .sr-sc-val{ color:var(--bad); }
.sr-sc-lbl{
  font-family:var(--mono);
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
}

/* --- Controls --- */
.sr-controls{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.sr-search{
  flex:1;
  min-width:200px;
  max-width:400px;
  margin:0 !important;
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--txt) !important;
  font-family:var(--mono) !important;
  font-size:.84rem !important;
  padding:8px 12px !important;
}
.sr-search:focus{ border-color:var(--acc) !important; }
.sr-search::placeholder{ color:var(--muted); }

.sr-selects{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.sr-selects select{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--txt) !important;
  font-family:var(--mono) !important;
  font-size:.78rem !important;
  padding:8px 10px !important;
  cursor:pointer;
}
.sr-selects select:focus{ border-color:var(--acc) !important; }

/* --- Grid --- */
.sr-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:14px;
}

/* --- Card --- */
.sr-card{
  display:flex;
  flex-direction:column;
  gap:0;
  background:linear-gradient(160deg, rgba(20,14,10,.9), rgba(12,8,5,.95));
  border:1px solid #4a3828;
  text-decoration:none !important;
  color:var(--txt) !important;
  transition:transform .15s, border-color .15s, box-shadow .15s;
  position:relative;
  overflow:hidden;
}
.sr-card:hover{
  transform:translateY(-3px);
  border-color:var(--acc);
  box-shadow:0 6px 16px rgba(0,0,0,.5), 0 0 10px rgba(224,101,26,.15);
}
.sr-card.online{
  border-left:3px solid var(--ok);
}
.sr-card.banned{
  border-left:3px solid var(--bad);
  opacity:.6;
}

.sr-card-top{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-bottom:1px solid rgba(74,56,40,.4);
}
.sr-avatar-frame{
  flex:0 0 auto;
  width:48px;
  height:48px;
  border:2px solid #5a3828;
  padding:2px;
  background:#0a0604;
  position:relative;
}
.sr-card.online .sr-avatar-frame{
  border-color:var(--ok);
}
.sr-card.online .sr-avatar-frame::after{
  content:"";
  position:absolute;
  bottom:-2px;
  right:-2px;
  width:10px;
  height:10px;
  background:var(--ok);
  border:2px solid #0c0a08;
  border-radius:50%;
  box-shadow:0 0 4px var(--ok);
}

.sr-card-id{
  flex:1 1 auto;
  min-width:0;
}
.sr-name-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:4px;
}
.sr-name{
  font-family:'Oswald',sans-serif;
  font-size:1rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--txt);
}
.sr-card:hover .sr-name{ color:var(--acc); }
.sr-banned-tag{
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--bad);
  background:rgba(208,32,32,.15);
  border:1px solid rgba(208,32,32,.4);
  padding:2px 6px;
}

.sr-status-row{
  display:flex;
  align-items:center;
  gap:5px;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--muted);
  flex-wrap:wrap;
}
.sr-status-dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
}
.sr-status-dot.on{ background:var(--ok); box-shadow:0 0 4px var(--ok); animation:pulse 2s infinite; }
.sr-status-dot.off{ background:var(--bad); }
.sr-status-text{ color:var(--muted); }
.sr-sep{ opacity:.4; }
.sr-char{ color:var(--muted); }
.sr-char .warn{ color:var(--warn); }

.sr-clan-row{
  font-size:.74rem;
  color:var(--muted);
  margin-top:4px;
}

/* --- Stats Footer --- */
.sr-card-stats{
  display:flex;
  gap:0;
  padding:10px 14px;
  background:rgba(0,0,0,.3);
}
.sr-stat{
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 10px 0 0;
  border-right:1px solid rgba(74,56,40,.3);
}
.sr-stat:last-child{ border-right:0; padding-right:0; }
.sr-stat-ico{ font-size:.82rem; opacity:.7; }
.sr-stat-val{
  font-family:'Oswald',sans-serif;
  font-size:.84rem;
  font-weight:700;
  color:var(--txt);
}
.sr-stat-lbl{
  font-family:var(--mono);
  font-size:.56rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted);
}
.sr-stat.ach .sr-stat-val{ color:var(--gold); }

/* --- Count / Empty --- */
.sr-count{
  grid-column:1 / -1;
  text-align:center;
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
  padding:14px 0 4px;
}
.sr-empty{
  grid-column:1 / -1;
  text-align:center;
  font-family:var(--mono);
  font-size:.84rem;
  color:var(--muted);
  padding:40px 20px;
  border:1px dashed #4a3828;
}

/* --- Responsive --- */
@media(max-width:560px){
  .survivor-registry{ padding:16px; }
  .sr-header{ flex-direction:column; }
  .sr-header-stats{ width:100%; }
  .sr-grid{ grid-template-columns:1fr; }
  .sr-card-stats{ flex-wrap:wrap; gap:6px; }
  .sr-stat{ border-right:0; padding-right:0; }
}
/* ==========================================================
   NOTIZBUCH — PDA Terminal Style
   ========================================================== */
.td-pda{
  background:linear-gradient(160deg, #15100c 0%, #0c0a08 100%);
  border:2px solid #4a3828;
  border-radius:2px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.8), 0 8px 24px rgba(0,0,0,.6);
  position:relative;
  overflow:hidden;
  margin-bottom:18px;
}
.td-pda::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--acc), var(--gold), var(--acc));
  opacity:.5;
  z-index:10;
}

/* --- Top Bar --- */
.td-top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(0,0,0,.5);
  border-bottom:1px solid #4a3828;
  padding:8px 16px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:1px;
  color:var(--gold);
  text-transform:uppercase;
}
.td-sync-info{ color:var(--muted); }

.td-pda-inner{ padding:24px; }

/* --- Header --- */
.td-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:18px;
  padding-bottom:18px;
  border-bottom:1px solid #4a3828;
  margin-bottom:18px;
}
.td-header-left h1{
  font-size:1.3rem;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--gold);
  margin:0 0 6px;
}
.td-subtitle{
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--muted);
  margin:0;
  max-width:520px;
  line-height:1.5;
}
.td-subtitle b{ color:var(--txt); }

.td-header-stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.td-stat-chip{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(0,0,0,.4);
  border:1px solid #4a3828;
  padding:8px 12px;
}
.td-stat-chip.hot{ border-color:rgba(208,32,32,.3); }
.td-stat-chip.ok{ border-color:rgba(80,168,48,.3); }
.td-sc-ico{ font-size:1rem; }
.td-sc-val{
  font-family:'Oswald',sans-serif;
  font-size:1.2rem;
  font-weight:700;
  color:var(--txt);
}
.td-stat-chip.hot .td-sc-val{ color:var(--bad); }
.td-stat-chip.ok .td-sc-val{ color:var(--ok); }
.td-sc-lbl{
  font-family:var(--mono);
  font-size:.56rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
}

/* --- Form --- */
.td-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.td-input{
  flex:1;
  min-width:200px;
  margin:0 !important;
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--txt) !important;
  font-family:var(--mono) !important;
  font-size:.84rem !important;
  padding:10px 14px !important;
}
.td-input:focus{ border-color:var(--acc) !important; }
.td-input::placeholder{ color:var(--muted); }

.td-select{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--txt) !important;
  font-family:var(--mono) !important;
  font-size:.78rem !important;
  padding:10px 12px !important;
  cursor:pointer;
}
.td-add-btn{
  background:linear-gradient(180deg,var(--acc),var(--acc-d));
  color:#fff;
  border:0;
  padding:10px 18px;
  font-family:'Oswald',sans-serif;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.15s;
}
.td-add-btn:hover{ filter:brightness(1.15); transform:translateY(-1px); }

/* --- List Section --- */
.td-pda-list{
  background:linear-gradient(160deg, #15100c 0%, #0c0a08 100%);
  border:2px solid #4a3828;
  border-radius:2px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.8);
  padding:20px;
}
.td-list-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid #4a3828;
}
.td-filters{
  display:flex;
  gap:0;
  flex-wrap:wrap;
}
.td-filter{
  background:none;
  border:1px solid #4a3828;
  border-right:0;
  color:var(--muted);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:7px 14px;
  cursor:pointer;
  transition:.15s;
}
.td-filter:last-child{ border-right:1px solid #4a3828; }
.td-filter:hover{ color:var(--txt); background:rgba(255,255,255,.03); }
.td-filter.active{
  color:var(--gold);
  background:rgba(240,192,64,.08);
  border-color:var(--gold);
}
.td-filter.active + .td-filter{ border-left:0; }

.td-clear-btn{
  background:none;
  border:1px solid #4a3828;
  color:var(--muted);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:7px 14px;
  cursor:pointer;
  transition:.15s;
}
.td-clear-btn:hover{ color:var(--bad); border-color:rgba(208,32,32,.4); }

/* --- Todo Item --- */
.td-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:rgba(0,0,0,.3);
  border:1px solid #4a3828;
  border-left:3px solid var(--pc, #8a8a7a);
  padding:12px 14px;
  margin-bottom:8px;
  transition:border-color .15s, background .15s;
}
.td-item:hover{
  border-left-color:var(--pc, #8a8a7a);
  background:rgba(0,0,0,.4);
}
.td-item.done{
  opacity:.5;
  border-left-color:var(--ok);
}
.td-item.pending{
  opacity:.6;
  border-left-style:dashed;
}

.td-check{
  flex:0 0 auto;
  width:22px;
  height:22px;
  margin-top:2px;
  background:#0a0604;
  border:2px solid var(--pc, #8a8a7a);
  color:var(--ok);
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  transition:.15s;
}
.td-check:hover{ background:#15100c; }
.td-check:disabled{ cursor:wait; opacity:.5; }
.td-item.done .td-check{ border-color:var(--ok); background:rgba(80,168,48,.1); }

.td-body{
  flex:1 1 auto;
  min-width:0;
}
.td-text{
  font-size:.9rem;
  color:var(--txt);
  line-height:1.4;
  word-break:break-word;
}
.td-text.struck{ text-decoration:line-through; color:var(--muted); }

.td-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
  font-family:var(--mono);
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.td-prio{ font-weight:700; }
.td-src{ color:var(--muted); }
.td-age{ color:var(--muted); }
.td-done{ color:var(--ok); }
.td-pend{ color:var(--warn); }

.td-actions{
  flex:0 0 auto;
  display:flex;
  gap:4px;
  opacity:0;
  transition:opacity .15s;
}
.td-item:hover .td-actions{ opacity:1; }
@media (hover:none){ .td-actions{ opacity:1; } }

.td-act{
  background:none;
  border:1px solid #4a3828;
  color:var(--muted);
  width:28px;
  height:28px;
  cursor:pointer;
  font-size:.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s;
}
.td-act:hover{ color:var(--txt); border-color:var(--line2); }
.td-act.del:hover{ color:var(--bad); border-color:rgba(208,32,32,.4); }

/* --- Responsive --- */
@media(max-width:560px){
  .td-pda-inner{ padding:16px; }
  .td-pda-list{ padding:16px; }
  .td-header{ flex-direction:column; }
  .td-form{ flex-direction:column; }
  .td-input{ width:100%; }
  .td-select{ width:100%; }
  .td-add-btn{ width:100%; }
  .td-filters{ width:100%; }
  .td-filter{ flex:1; text-align:center; }
  .td-list-controls{ flex-direction:column; align-items:stretch; }
}
/* ==========================================================
   ARCHIV — PDA Terminal Style
   ========================================================== */
.ach-pda{
  background:linear-gradient(160deg, #15100c 0%, #0c0a08 100%);
  border:2px solid #4a3828;
  border-radius:2px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.8), 0 8px 24px rgba(0,0,0,.6);
  position:relative;
  overflow:hidden;
  margin-bottom:18px;
}
.ach-pda::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--acc), var(--gold), var(--acc));
  opacity:.5;
  z-index:10;
}
.ach-top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(0,0,0,.5);
  border-bottom:1px solid #4a3828;
  padding:8px 16px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:1px;
  color:var(--gold);
  text-transform:uppercase;
}
.ach-sync{ color:var(--muted); }
.ach-pda-inner{ padding:24px; }
.ach-header h1{
  font-size:1.3rem;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--gold);
  margin:0 0 6px;
}
.ach-subtitle{
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--muted);
  margin:0 0 16px;
  line-height:1.5;
  max-width:640px;
}
.ach-notice{
  background:rgba(80,168,48,.05);
  border:1px solid rgba(80,168,48,.2);
  border-left:3px solid var(--ok);
  padding:12px 14px;
  font-family:var(--mono);
  font-size:.74rem;
  color:#d8d0c4;
  line-height:1.5;
  margin-bottom:18px;
}
.ach-notice b{ color:var(--gold); }
.ach-sum-grid{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.ach-stat-chip{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(0,0,0,.4);
  border:1px solid #4a3828;
  padding:8px 14px;
}
.ach-sc-ico{ font-size:1rem; }
.ach-sc-val{
  font-family:'Oswald',sans-serif;
  font-size:1.2rem;
  font-weight:700;
  color:var(--txt);
}
.ach-sc-lbl{
  font-family:var(--mono);
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
}

/* --- List Section --- */
.ach-pda-list{
  background:linear-gradient(160deg, #15100c 0%, #0c0a08 100%);
  border:2px solid #4a3828;
  border-radius:2px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.8);
  padding:20px;
}
.ach-list-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid #4a3828;
}
.ach-search{
  flex:1;
  min-width:200px;
  max-width:400px;
  margin:0 !important;
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--txt) !important;
  font-family:var(--mono) !important;
  font-size:.84rem !important;
  padding:9px 14px !important;
}
.ach-search:focus{ border-color:var(--acc) !important; }
.ach-search::placeholder{ color:var(--muted); }

.ach-filters{
  display:flex;
  gap:0;
  flex-wrap:wrap;
}
.ach-filter{
  background:none;
  border:1px solid #4a3828;
  border-right:0;
  color:var(--muted);
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:8px 14px;
  cursor:pointer;
  transition:.15s;
}
.ach-filter:last-child{ border-right:1px solid #4a3828; }
.ach-filter:hover{ color:var(--txt); background:rgba(255,255,255,.03); }
.ach-filter.active{
  color:var(--gold);
  background:rgba(240,192,64,.08);
  border-color:var(--gold);
}
.ach-filter.active + .ach-filter{ border-left:0; }

/* --- Category Header --- */
.ach-cat{
  font-family:'Oswald',sans-serif;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--gold);
  margin:24px 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid #4a3828;
}
.ach-cat-count{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:400;
  color:var(--muted);
  letter-spacing:.5px;
}

/* --- Achievement Card --- */
.ach-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:12px;
}
.ach-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:rgba(0,0,0,.3);
  border:1px solid #4a3828;
  border-left:4px solid var(--tc, #a87a4a);
  padding:14px;
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.ach-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.ach-card.got{ border-left-color:var(--ok); background:rgba(80,168,48,.03); }
.ach-card.shame{ border-left-color:var(--bad); background:rgba(208,32,32,.03); }
.ach-card.secret{ opacity:.5; border-left-style:dashed; }

.ach-ico{
  flex:0 0 auto;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  background:#0a0604;
  border:1px solid #4a3828;
  color:var(--tc, var(--gold));
}
.ach-card.got .ach-ico{ border-color:rgba(80,168,48,.3); }

.ach-b{ flex:1 1 auto; min-width:0; }
.ach-h{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  margin-bottom:4px;
}
.ach-h b{
  font-family:'Oswald',sans-serif;
  font-size:.92rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--txt);
}
.ach-tier{
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--tc, var(--muted));
  white-space:nowrap;
}
.ach-desc{
  font-size:.78rem;
  color:var(--muted);
  line-height:1.4;
  margin-bottom:8px;
}
.ach-status{
  font-family:var(--mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--ok);
}
.ach-status b{ color:var(--gold); }
.ach-prog{ margin-top:4px; }
.ach-bar{
  height:8px;
  background:#0a0604;
  border:1px solid #4a3828;
  overflow:hidden;
  margin-bottom:4px;
}
.ach-bar i{ display:block; height:100%; transition:width .3s; }
.ach-prog-txt{
  font-family:var(--mono);
  font-size:.64rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
}

/* --- Profile Block (Compact) --- */
.ach-profile-block{
  background:linear-gradient(160deg, #15100c 0%, #0c0a08 100%) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
  box-shadow:inset 0 0 20px rgba(0,0,0,.6) !important;
}
.ach-pb-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid #4a3828;
}
.ach-pb-header h2{
  font-family:'Oswald',sans-serif;
  font-size:1rem;
  letter-spacing:2px;
  color:var(--gold);
  text-transform:uppercase;
  margin:0;
}
.ach-new-badge{
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ok);
  background:rgba(80,168,48,.1);
  border:1px solid rgba(80,168,48,.3);
  padding:2px 8px;
  margin-left:6px;
}
.ach-pb-stats{ display:flex; gap:14px; }
.ach-pb-stat{ text-align:center; }
.ach-pb-stat b{
  display:block;
  font-family:'Oswald',sans-serif;
  font-size:1.2rem;
  font-weight:700;
  color:var(--txt);
}
.ach-pb-stat span{
  font-family:var(--mono);
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
}
.ach-tiers{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.ach-tchip{
  font-family:var(--mono);
  font-size:.64rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  padding:4px 10px;
  border:1px solid var(--tc, #4a3828);
  color:var(--tc, var(--txt));
  background:rgba(0,0,0,.3);
}
.ach-strip{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.ach-mini{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  background:rgba(0,0,0,.4);
  border:1px solid var(--tc, #4a3828);
}
.ach-mini.more{
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--muted);
  border-color:#4a3828;
}
.ach-pb-link{
  text-align:right;
  margin-top:6px;
}
.ach-pb-link a{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--gold);
  text-decoration:none;
}
.ach-pb-link a:hover{ color:var(--acc); }
.ach-pb-empty{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--muted);
  padding:14px 0;
  text-align:center;
}

/* --- Responsive --- */
@media(max-width:680px){
  .ach-pda-inner{ padding:16px; }
  .ach-pda-list{ padding:16px; }
  .ach-list-controls{ flex-direction:column; align-items:stretch; }
  .ach-search{ max-width:none; width:100%; }
  .ach-filters{ width:100%; }
  .ach-filter{ flex:1; text-align:center; }
  .ach-grid{ grid-template-columns:1fr; }
}
/* ==========================================================
   CLANS — PDA Terminal Style
   ========================================================== */
.clan-pda{
  background:linear-gradient(160deg, #15100c 0%, #0c0a08 100%);
  border:2px solid #4a3828;
  border-radius:2px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.8), 0 8px 24px rgba(0,0,0,.6);
  position:relative;
  overflow:hidden;
  margin-bottom:18px;
}
.clan-pda::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--acc), var(--gold), var(--acc));
  opacity:.5;
  z-index:10;
}
.clan-pda-top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(0,0,0,.5);
  border-bottom:1px solid #4a3828;
  padding:8px 16px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:1px;
  color:var(--gold);
  text-transform:uppercase;
}
.clan-pda-sync{ color:var(--muted); }
.clan-pda-inner{ padding:24px; }

.clan-pda-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:18px;
}
.clan-pda-header-left h1{
  font-size:1.3rem;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--gold);
  margin:0 0 6px;
}
.clan-pda-subtitle{
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--muted);
  margin:0;
  max-width:520px;
  line-height:1.5;
}
.clan-pda-subtitle a{ color:var(--gold); }
.clan-pda-subtitle b{ color:var(--txt); }

.clan-pda-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.clan-pda-search{
  min-width:200px;
  max-width:300px;
  margin:0 !important;
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--txt) !important;
  font-family:var(--mono) !important;
  font-size:.84rem !important;
  padding:9px 14px !important;
}
.clan-pda-search:focus{ border-color:var(--acc) !important; }
.clan-pda-search::placeholder{ color:var(--muted); }

.clan-pda-select{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--txt) !important;
  font-family:var(--mono) !important;
  font-size:.78rem !important;
  padding:9px 12px !important;
  cursor:pointer;
}

.clan-pda-add-btn{
  background:linear-gradient(180deg,var(--acc),var(--acc-d));
  color:#fff;
  border:0;
  padding:9px 18px;
  font-family:'Oswald',sans-serif;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.15s;
}
.clan-pda-add-btn:hover{ filter:brightness(1.15); transform:translateY(-1px); }

.clan-pda-notice{
  margin-top:18px;
  padding:12px 14px;
  background:rgba(80,168,48,.05);
  border:1px solid rgba(80,168,48,.2);
  border-left:3px solid var(--ok);
  font-family:var(--mono);
  font-size:.78rem;
  color:#d8d0c4;
  line-height:1.5;
}
.clan-pda-notice a{ color:var(--gold); }
.clan-pda-notice b{ color:var(--txt); }

.clan-pda-list{
  background:linear-gradient(160deg, #15100c 0%, #0c0a08 100%);
  border:2px solid #4a3828;
  border-radius:2px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.8);
  padding:20px;
}

/* --- Clan Detail: PDA Top Bar --- */
.cdh-top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(0,0,0,.5);
  border-bottom:1px solid #4a3828;
  padding:8px 16px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:1px;
  color:var(--gold);
  text-transform:uppercase;
  position:relative;
  z-index:5;
}
.cdh-status.recruiting{ color:var(--ok); animation:pulse 2s infinite; }
.cdh-status.closed{ color:var(--bad); }

/* --- Clan Admin Layout: PDA Sidebar --- */
.clan-admin-side{
  background:linear-gradient(160deg, #15100c 0%, #0c0a08 100%) !important;
  border:2px solid #4a3828 !important;
  border-radius:2px !important;
  box-shadow:inset 0 0 20px rgba(0,0,0,.6) !important;
}
.clan-admin-side h3{
  font-family:'Oswald',sans-serif !important;
  font-size:.72rem !important;
  letter-spacing:2px !important;
  color:var(--gold) !important;
  border-bottom:1px solid #4a3828 !important;
}
.clan-admin-side button{
  font-family:var(--mono) !important;
  font-size:.78rem !important;
  letter-spacing:.5px !important;
  text-transform:uppercase !important;
}
.clan-admin-side button.active{
  background:rgba(240,192,64,.08) !important;
  color:var(--gold) !important;
  border-left:3px solid var(--gold) !important;
}

.clan-admin-main{
  min-width:0;
}

/* --- PDA Sub-Panel (Tab Content) --- */
.pda-sub-panel{
  background:linear-gradient(160deg, #15100c 0%, #0c0a08 100%);
  border:2px solid #4a3828;
  border-radius:2px;
  box-shadow:inset 0 0 20px rgba(0,0,0,.6);
  padding:20px;
  margin-bottom:0;
}
.pda-sub-panel h2{
  font-family:'Oswald',sans-serif;
  font-size:1rem;
  letter-spacing:2px;
  color:var(--gold);
  text-transform:uppercase;
  border-bottom:1px solid #4a3828;
  padding-bottom:10px;
  margin-bottom:16px;
}

/* --- PDA Stats Grid --- */
.pda-stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:12px;
}
.pda-stat-card{
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(0,0,0,.3);
  border:1px solid #4a3828;
  border-left:4px solid var(--gold);
  padding:14px;
  transition:transform .15s;
}
.pda-stat-card:hover{ transform:translateY(-2px); }
.pda-stat-ico{
  font-size:1.4rem;
  width:36px;
  text-align:center;
}
.pda-stat-info b{
  font-family:'Oswald',sans-serif;
  font-size:1.3rem;
  line-height:1;
  color:var(--txt);
  display:block;
}
.pda-stat-info span{
  font-family:var(--mono);
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  display:block;
  margin-top:2px;
}

/* --- PDA Table --- */
.pda-table th{
  font-family:'Oswald',sans-serif;
  font-size:.72rem;
  letter-spacing:1.2px;
  color:var(--gold);
  background:rgba(0,0,0,.3);
  border-bottom:1px solid #4a3828;
}
.pda-table td{
  border-bottom:1px solid rgba(74,56,40,.4);
}
.pda-table tbody tr:hover{
  background:rgba(240,192,64,.04);
}

/* --- Responsive --- */
@media(max-width:680px){
  .clan-pda-inner{ padding:16px; }
  .clan-pda-header{ flex-direction:column; }
  .clan-pda-controls{ width:100%; }
  .clan-pda-search{ max-width:none; width:100%; }
  .clan-pda-list{ padding:16px; }
  .pda-sub-panel{ padding:16px; }
  .pda-stats-grid{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
}
/* ==========================================================
   MARKTPLATZ — PDA Terminal Style
   ========================================================== */
.market-layout{
  display:grid !important;
  grid-template-columns:1fr 330px;
  gap:16px;
  align-items:start;
  padding:20px;
}
.market-main{ min-width:0; order:1 }
.market-side{
  order:2;
  position:sticky;
  top:70px;
  max-height:calc(100vh - 88px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
@media(max-width:900px){
  .market-layout{ grid-template-columns:1fr; padding:16px; }
  .market-main{ order:2 }
  .market-side{ position:static; max-height:none; overflow:visible; }
}

/* --- Market Side (Vendor List) --- */
.market-side .vendor-tier{
  font-family:var(--mono);
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--gold);
  margin:11px 2px 1px;
  padding-bottom:4px;
  border-bottom:1px solid #4a3828;
}
.vendor-row{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}
.vendor-row:hover{
  border-color:var(--acc) !important;
  background:rgba(224,101,26,.05) !important;
}
.vendor-row.active{
  border-color:var(--gold) !important;
  background:rgba(240,192,64,.08) !important;
  box-shadow:0 0 0 1px var(--gold), 0 4px 14px rgba(240,192,64,.15) !important;
}
.vendor-row.locked{ opacity:.5 }
.vendor-row.cooling .vr-pic{ filter:grayscale(.35) }
.vr-pic{
  background:rgba(0,0,0,.4) !important;
  border:1px solid #4a3828 !important;
}
.vr-body b{ color:var(--txt) !important; }
.vr-prof{ color:var(--muted) !important; }
.vr-n{ color:var(--gold) !important; }
.vr-price{ color:var(--gold) !important; }
.vr-cart, .vr-cool{
  background:rgba(10,8,5,.85) !important;
  border:1px solid var(--gold) !important;
  color:var(--gold) !important;
}
.vr-cool{ border-color:var(--warn) !important; color:var(--warn) !important; }
.vr-cool.hg{ border-color:var(--gold) !important; color:var(--gold) !important; }

/* --- Cart --- */
.mk-cart{
  background:linear-gradient(160deg, #15100c 0%, #0c0a08 100%) !important;
  border:2px solid #4a3828 !important;
  border-left:3px solid var(--gold) !important;
  border-radius:2px !important;
  box-shadow:inset 0 0 20px rgba(0,0,0,.6) !important;
}
.mk-cart h2, .mk-cart .m0{
  color:var(--gold) !important;
  font-family:'Oswald',sans-serif !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
}
.mk-cart .mk-sum b{ color:var(--gold) !important; }
.mk-cl-n b{ color:var(--txt) !important; }
.mk-cl-s{ color:var(--gold) !important; }
.mk-step{
  background:rgba(0,0,0,.4) !important;
  border:1px solid #4a3828 !important;
  color:var(--txt) !important;
}
.mk-step:hover:not([disabled]){ border-color:var(--acc) !important; color:var(--acc) !important; }
.mk-qin{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--txt) !important;
  font-family:var(--mono) !important;
}
.mk-other{ font-family:var(--mono); font-size:.74rem; color:var(--muted); }
.mk-other .chip{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  color:var(--gold) !important;
}

/* --- Shelf --- */
.shelf-head{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}
.shelf-portrait{
  background:rgba(0,0,0,.4) !important;
  border-right:1px solid #4a3828 !important;
}
.shelf-tier{
  font-family:var(--mono) !important;
  color:var(--gold) !important;
}
.shelf-info-col h2{ color:var(--txt) !important; }
.shelf-quote{ color:var(--muted) !important; font-style:italic; }

.shelf-item{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}
.shelf-item:hover{
  border-color:var(--acc) !important;
}
.shelf-item.out{ opacity:.4 }
.shelf-item.notoffered{ border-style:dashed !important; }
.shelf-item.unique{
  border-color:rgba(240,192,64,.4) !important;
  background:linear-gradient(180deg,rgba(240,192,64,.05),rgba(0,0,0,.3)) !important;
}
.shelf-item.incart{
  border-color:rgba(240,192,64,.5) !important;
  box-shadow:inset 2px 0 0 var(--gold) !important;
}
.si-head b{ color:var(--txt) !important; }
.si-price{ color:var(--gold) !important; }
.si-tag{
  font-family:var(--mono) !important;
  border-radius:0 !important;
}
.si-qty{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--txt) !important;
  font-family:var(--mono) !important;
}
.si-stock .bar{ background:#0a0604 !important; border:1px solid #4a3828; }

.mk-toolbar .search{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--txt) !important;
  font-family:var(--mono) !important;
}

/* --- Pickups --- */
.mk-order{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-left:3px solid var(--line2) !important;
  border-radius:0 !important;
}
.mk-order.ph-ready, .mk-order.ph-partial{ border-left-color:var(--ok) !important; }
.mk-order.ph-prep, .mk-order.ph-pending{ border-left-color:var(--warn) !important; }
.mk-order.ph-lapsed{ border-left-color:var(--bad) !important; }
.mk-order-h b{ color:var(--txt) !important; }
.mk-order-sum{ color:var(--gold) !important; font-family:'Oswald',sans-serif; }
.mk-order-items .chip{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  color:var(--txt) !important;
  font-family:var(--mono) !important;
}

/* --- Haggling Dialog --- */
.modal.hg{
  background:linear-gradient(160deg, #15100c 0%, #0c0a08 100%) !important;
  border:2px solid #4a3828 !important;
  border-radius:2px !important;
  box-shadow:inset 0 0 30px rgba(0,0,0,.8), 0 20px 60px rgba(0,0,0,.8) !important;
}
.modal.hg .modal-head{
  background:rgba(0,0,0,.5) !important;
  border-bottom:1px solid #4a3828 !important;
}
.modal.hg .modal-head h3{
  color:var(--gold) !important;
  font-family:'Oswald',sans-serif !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
}
.hg-npc{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}
.hg-npc .shelf-portrait{ border:0 !important; }
.hg-npc-b b{ color:var(--gold) !important; }
.hg-cart{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
  font-family:var(--mono) !important;
}
.hg-cart-row b{ color:var(--gold) !important; }
.hg-price{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}
.hg-price b{ color:var(--gold) !important; }
.hg-log{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
  font-family:var(--mono) !important;
}
.hg-move{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}
.hg-move:hover{
  border-color:var(--acc) !important;
  background:rgba(224,101,26,.08) !important;
}
.hg-move.fraud{
  border-color:rgba(208,32,32,.4) !important;
  background:linear-gradient(180deg,rgba(208,32,32,.08),rgba(0,0,0,.3)) !important;
}
.hg-move-b b{ color:var(--txt) !important; }
.hg-move-c.ok{ color:var(--ok) !important; }
.hg-move-c.warn{ color:var(--warn) !important; }
.hg-move-c.bad{ color:var(--bad) !important; }
.hg-warn{
  background:rgba(240,160,48,.05) !important;
  border:1px solid rgba(240,160,48,.2) !important;
  border-left:3px solid var(--warn) !important;
  font-family:var(--mono) !important;
  color:#d8d0c4 !important;
}
.hg-mood-l{ font-family:var(--mono) !important; }

/* --- Market Events --- */
#mkEvents .notice{
  font-family:var(--mono) !important;
  border-radius:0 !important;
}

/* --- Responsive --- */
@media(max-width:680px){
  .market-layout{ padding:14px; }
}
/* ==========================================================
   RUF-SYSTEM — PDA Terminal Style
   ========================================================== */
.rep-hero{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:rgba(0,0,0,.3);
  border:1px solid #4a3828;
  padding:24px;
}
.rep-dial{
  filter:sepia(0.3) hue-rotate(-10deg);
}
.rep-dial-in b{
  font-family:'Oswald',sans-serif !important;
  text-shadow:0 0 10px currentColor;
}
.rep-dial-in span{
  font-family:var(--mono) !important;
  text-transform:uppercase;
  letter-spacing:1.5px;
}

/* --- Skala --- */
.rep-scale-bar{
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}
.rep-marker{
  background:var(--gold) !important;
  box-shadow:0 0 8px rgba(240,192,64,.5) !important;
}
.rep-marker::after{
  font-family:var(--mono) !important;
  color:var(--gold) !important;
}
.rep-scale-legend{
  font-family:var(--mono) !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
}

/* --- Event-Liste --- */
.rep-ev{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-left:3px solid var(--line2) !important;
  border-radius:0 !important;
}
.rep-ev.pos{ border-left-color:var(--ok) !important; }
.rep-ev.neg{ border-left-color:var(--bad) !important; }
.rep-ev-b b{ color:var(--txt) !important; }
.rep-ev-d{
  font-family:'Oswald',sans-serif !important;
  color:var(--gold) !important;
}
.rep-ev .muted.small{
  font-family:var(--mono) !important;
  font-size:.7rem !important;
  text-transform:uppercase;
  letter-spacing:.5px;
}

/* --- Offene Anmeldungen (Pending Block) --- */
#repPending .panel,
#repPending .list-item{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}
#repPending h2{
  color:var(--gold) !important;
  font-family:'Oswald',sans-serif !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
}
#repPending .list-item{
  border-left:3px solid var(--warn) !important;
}
#repPending .notice{
  border-radius:0 !important;
  font-family:var(--mono) !important;
}
#repPending code{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--gold) !important;
}

/* --- Tabelle & KV --- */
.rep-gate dt{
  font-family:var(--mono) !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  color:var(--muted) !important;
}
.rep-gate dd b{ color:var(--gold) !important; }
.kv span b{ color:var(--txt) !important; }
/* ==========================================================
   KOPFGELDER — PDA Terminal Style
   ========================================================== */
.bt-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:14px;
}
.bt-card{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-left:3px solid var(--blood) !important;
  border-radius:0 !important;
}
.bt-card.me{
  border-left-color:var(--bad) !important;
  background:linear-gradient(180deg,rgba(142,26,26,.12),rgba(0,0,0,.3)) !important;
}
.bt-card.disputed{ border-left-color:var(--warn) !important; }

.bt-head{
  padding:11px 13px;
  background:rgba(0,0,0,.4);
  border-bottom:1px solid #4a3828;
}
.bt-name{
  font-family:'Oswald',sans-serif !important;
  font-size:1.04rem !important;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--txt) !important;
}
.bt-sum{
  font-family:'Oswald',sans-serif !important;
  font-size:1.18rem !important;
  color:var(--gold) !important;
  text-shadow:0 0 10px rgba(240,192,64,.2);
}
.bt-sum span{
  font-family:var(--mono) !important;
  font-size:.62rem !important;
  letter-spacing:.5px;
  color:var(--muted) !important;
  text-shadow:none;
}

.bt-body{ padding:11px 13px }
.bt-body .muted.small{ font-family:var(--mono) !important; }
.bt-body .badge{
  font-family:var(--mono) !important;
  border-radius:0 !important;
}

.bt-placers .chip{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  color:var(--gold) !important;
  font-family:var(--mono) !important;
  border-radius:0 !important;
}

.bt-meta{
  border-top:1px dashed #4a3828;
  padding-top:8px;
  margin-top:9px;
}
.bt-meta .muted.small{ font-family:var(--mono) !important; }
.bt-pos code{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--gold) !important;
}
.bt-cd{ font-family:var(--mono) !important; color:var(--gold); }

/* Timeline */
.timeline .tl-item{
  background:rgba(0,0,0,.2);
  border:1px solid #4a3828;
  border-left:3px solid var(--blood);
  padding:10px 14px;
  margin-bottom:10px;
  border-radius:0;
}
.timeline .tl-item b{ color:var(--gold) !important; }
.timeline .tl-item .meta{
  font-family:var(--mono) !important;
  font-size:.72rem !important;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted) !important;
}

/* Stats & Notice */
#btStats .stat{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}
#btStats .stat b{ color:var(--gold) !important; }
#btStats .stat span{
  font-family:var(--mono) !important;
  font-size:.6rem !important;
  letter-spacing:1px;
  color:var(--muted) !important;
}

.notice.bad{
  background:rgba(142,26,26,.08) !important;
  border:1px solid rgba(208,32,32,.3) !important;
  border-left:3px solid var(--bad) !important;
  border-radius:0 !important;
  font-family:var(--mono) !important;
}
/* ==========================================================
   EVENTS, TOTENBUCH, RANGLISTE — PDA Terminal Style
   ========================================================== */

/* --- PDA Tabs --- */
.pda-tabs{
  border-bottom:1px solid #4a3828 !important;
  margin-bottom:18px !important;
}
.pda-tabs button{
  background:none !important;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  color:var(--muted) !important;
  font-family:'Oswald',sans-serif !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
  font-size:.8rem !important;
  padding:10px 16px !important;
  cursor:pointer !important;
  transition:color .15s, border-color .15s !important;
}
.pda-tabs button:hover{ color:var(--txt) !important; }
.pda-tabs button.active{
  color:var(--gold) !important;
  border-bottom-color:var(--gold) !important;
  background:rgba(240,192,64,.05) !important;
}

/* --- Stats Grid in PDA context --- */
.clan-pda-list .grid-4{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:12px;
}
.clan-pda-list .stat{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
  padding:12px 14px !important;
}
.clan-pda-list .stat span{
  font-family:var(--mono) !important;
  font-size:.6rem !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  color:var(--muted) !important;
}
.clan-pda-list .stat b{
  font-family:'Oswald',sans-serif !important;
  font-size:1.3rem !important;
  color:var(--gold) !important;
}

/* --- List Items (Events) --- */
.clan-pda-list .list-item{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-left:3px solid var(--acc) !important;
  border-radius:0 !important;
  padding:14px !important;
  margin-bottom:8px;
}
.clan-pda-list .list-item.done{
  opacity:.55;
  border-left-color:var(--line2) !important;
}
.clan-pda-list .list-item b{
  font-family:'Oswald',sans-serif !important;
  color:var(--txt) !important;
}
.clan-pda-list .list-item .muted.small{
  font-family:var(--mono) !important;
  font-size:.72rem !important;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.clan-pda-list .chips span,
.clan-pda-list .chips a.chip{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  color:var(--gold) !important;
  font-family:var(--mono) !important;
  border-radius:0 !important;
}

/* --- Timeline (Totenbuch) --- */
.clan-pda-list .timeline{
  padding-left:22px;
}
.clan-pda-list .timeline:before{
  background:#4a3828 !important;
}
.clan-pda-list .tl-item{
  background:rgba(0,0,0,.2) !important;
  border:1px solid #4a3828 !important;
  border-left:3px solid var(--blood) !important;
  border-radius:0 !important;
  padding:12px 14px !important;
  margin-bottom:10px;
}
.clan-pda-list .tl-item:before{
  background:#15100c !important;
  border:2px solid var(--gold) !important;
}
.clan-pda-list .tl-item b{
  color:var(--gold) !important;
}
.clan-pda-list .tl-item .meta{
  font-family:var(--mono) !important;
  font-size:.72rem !important;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted) !important;
}
.clan-pda-list .tl-item .muted.small{
  font-family:var(--mono) !important;
  font-size:.72rem !important;
  text-transform:uppercase;
  letter-spacing:.5px;
}

/* --- Tables (Rangliste) --- */
.clan-pda-list .table th{
  font-family:'Oswald',sans-serif !important;
  font-size:.72rem !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
  color:var(--gold) !important;
  background:rgba(0,0,0,.4) !important;
  border-bottom:1px solid #4a3828 !important;
}
.clan-pda-list .table td{
  border-bottom:1px solid rgba(74,56,40,.4) !important;
}
.clan-pda-list .table tbody tr:hover{
  background:rgba(240,192,64,.04) !important;
}
.clan-pda-list .rank.r1{ color:var(--gold) !important; }
.clan-pda-list .tag{
  border-radius:0 !important;
}
.clan-pda-list h3{
  font-family:'Oswald',sans-serif !important;
  font-size:.9rem !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
  color:var(--gold) !important;
  border-bottom:1px solid #4a3828 !important;
  padding-bottom:8px !important;
}

/* --- Badges in PDA context --- */
.clan-pda-list .badge{
  font-family:var(--mono) !important;
  border-radius:0 !important;
}

/* --- Empty state --- */
.clan-pda-list .empty{
  font-family:var(--mono) !important;
  color:var(--muted) !important;
}
.clan-pda-list .empty .ei{
  filter:grayscale(.5);
}
/* ==========================================================
   ROADMAP & PATCHNOTES — PDA Terminal Style
   ========================================================== */

/* --- Toolbar & Stats --- */
.rm-bar{
  background:linear-gradient(160deg, #15100c 0%, #0c0a08 100%) !important;
  border:1px solid #4a3828 !important;
  border-radius:2px !important;
  box-shadow:inset 0 0 20px rgba(0,0,0,.6) !important;
  margin-bottom:18px !important;
}
.rm-mini{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}
.rm-mini span{
  font-family:var(--mono) !important;
  font-size:.6rem !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  color:var(--muted) !important;
}
.rm-mini b{ color:var(--gold) !important; }
.rm-bar-tools{ border-top:1px solid #4a3828 !important; }
.rm-fchip{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  color:var(--muted) !important;
  font-family:var(--mono) !important;
  border-radius:0 !important;
}
.rm-fchip.active{
  background:rgba(240,192,64,.08) !important;
  border-color:var(--gold) !important;
  color:var(--gold) !important;
}
.rm-vswitch{ border:1px solid #4a3828 !important; border-radius:0 !important; }
.rm-vswitch button{ background:rgba(0,0,0,.3) !important; color:var(--muted) !important; }
.rm-vswitch button.active{ background:rgba(224,101,26,.15) !important; color:var(--acc) !important; }

/* --- Kanban Board --- */
.rm-board{ gap:12px; }
.rm-col{
  background:linear-gradient(180deg, #15100c 0%, #0c0a08 100%) !important;
  border:1px solid #4a3828 !important;
  border-top:3px solid var(--sc, var(--acc)) !important;
  border-radius:2px !important;
  box-shadow:inset 0 0 20px rgba(0,0,0,.6) !important;
}
.rm-col-head{ border-bottom:1px solid #4a3828 !important; }
.rm-col-head h2{
  color:var(--sc, var(--gold)) !important;
  font-family:'Oswald',sans-serif !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
}
.rm-col-n{
  background:rgba(0,0,0,.4) !important;
  color:var(--muted) !important;
  font-family:var(--mono) !important;
  border-radius:0 !important;
}
.rm-col-body::-webkit-scrollbar-thumb{ background:var(--line2) !important; }

/* --- Roadmap Cards --- */
.rm-card{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-left:3px solid var(--sc, var(--acc)) !important;
  border-radius:0 !important;
}
.rm-card:hover{ border-color:var(--line2) !important; }
.rm-card.active{
  border-color:var(--gold) !important;
  box-shadow:0 0 0 1px var(--gold), 0 4px 14px rgba(240,192,64,.2) !important;
}
.rm-card-title{ color:var(--txt) !important; font-family:'Oswald',sans-serif !important; }
.rm-card-desc{ color:var(--muted) !important; }
.rm-card-tags .chip{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  color:var(--gold) !important;
  font-family:var(--mono) !important;
  border-radius:0 !important;
}
.rm-card-foot{ border-top:1px dashed #4a3828 !important; }

/* --- Voting --- */
.rm-votes{
  border:1px solid #4a3828 !important;
  background:rgba(0,0,0,.3) !important;
  border-radius:0 !important;
}
.rm-vote-btn{ color:var(--muted) !important; }
.rm-vote-btn:hover{ background:rgba(255,255,255,.05) !important; color:var(--txt) !important; }
.rm-vote-btn.up.active{
  background:rgba(80,168,48,.16) !important;
  color:var(--ok) !important;
  box-shadow:inset 0 0 0 1px rgba(80,168,48,.45) !important;
}
.rm-vote-btn.down.active{
  background:rgba(208,32,32,.14) !important;
  color:var(--bad) !important;
  box-shadow:inset 0 0 0 1px rgba(208,32,32,.45) !important;
}
.rm-score{
  background:rgba(0,0,0,.4) !important;
  color:var(--muted) !important;
  font-family:'Oswald',sans-serif !important;
}
.rm-score.pos{ color:var(--ok) !important; }
.rm-score.neg{ color:var(--bad) !important; }
.rm-cbadge{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  color:var(--muted) !important;
  border-radius:0 !important;
}
.rm-cbadge:hover{ color:var(--gold) !important; border-color:var(--gold) !important; }

/* --- List View --- */
.rm-listwrap{ background:transparent !important; border:0 !important; box-shadow:none !important; }
.rm-lgroup-head{
  background:rgba(0,0,0,.3) !important;
  border-left:3px solid var(--sc, var(--acc)) !important;
  color:var(--sc, var(--gold)) !important;
  font-family:'Oswald',sans-serif !important;
  border-radius:0 !important;
}
.rm-lrow{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-left:3px solid var(--sc, var(--acc)) !important;
  border-radius:0 !important;
}
.rm-lrow:hover{ border-color:var(--line2) !important; }
.rm-lmain b{ color:var(--txt) !important; }

/* --- Patchnotes --- */
.rm-patch{
  background:linear-gradient(180deg, #15100c 0%, #0c0a08 100%) !important;
  border:1px solid #4a3828 !important;
  border-left:3px solid var(--pc, var(--acc)) !important;
  border-radius:2px !important;
  box-shadow:inset 0 0 20px rgba(0,0,0,.6) !important;
}
.rm-patch-bar{ background:transparent !important; }
.rm-patch-bar:hover{ background:rgba(255,255,255,.03) !important; }
.rm-patch-id b{ color:var(--txt) !important; }
.rm-version{ color:var(--gold) !important; font-family:'Oswald',sans-serif !important; }
.rm-patch-icon{ background:rgba(0,0,0,.3) !important; border-radius:0 !important; }
.rm-patch-panel{ background:transparent !important; }
.rm-changelist{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}
.rm-change{ border-bottom:1px dashed #4a3828 !important; }

/* --- Detail Drawer --- */
.rm-drawer{
  background:linear-gradient(180deg, #15100c 0%, #0c0a08 100%) !important;
  border-left:1px solid #4a3828 !important;
  box-shadow:-18px 0 50px rgba(0,0,0,.8) !important;
}
.rm-dr-head{
  background:rgba(0,0,0,.5) !important;
  border-bottom:1px solid #4a3828 !important;
  border-top:3px solid var(--acc) !important;
}
.rm-dr-head h2{ color:var(--txt) !important; }
.rm-dr-status{ font-family:var(--mono) !important; border-radius:0 !important; }
.rm-dr-meta{ font-family:var(--mono) !important; }
.rm-dr-body::-webkit-scrollbar-thumb{ background:var(--line2) !important; }
.rm-dr-sec + .rm-dr-sec{ border-top:1px solid #4a3828 !important; }
.rm-dr-desc{ color:#d8d0c4 !important; }
.rm-dr-vote{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}
.rm-dr-sec-head b{
  color:var(--gold) !important;
  font-family:'Oswald',sans-serif !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
}
.rm-cmt-body{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}
.rm-cmt.mine .rm-cmt-body{
  border-color:rgba(224,101,26,.35) !important;
  background:linear-gradient(180deg,rgba(224,101,26,.06),rgba(0,0,0,.3)) !important;
}
.rm-cmt-head{ font-family:var(--mono) !important; }
.rm-cmt-head b{ color:var(--txt) !important; }
.rm-cmt-time{ color:var(--muted) !important; }
.rm-cmt-text{ color:#d8d0c4 !important; }
.rm-disc-form textarea{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--txt) !important;
  font-family:var(--mono) !important;
}
/* ==========================================================
   TICKETS & SPENDE — PDA Terminal Style
   ========================================================== */

/* --- Ticket List --- */
.clan-pda-list .list-item{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-left:3px solid var(--acc) !important;
  border-radius:0 !important;
  padding:14px !important;
  margin-bottom:8px;
  text-decoration:none !important;
  color:var(--txt) !important;
}
.clan-pda-list .list-item:hover{ border-color:var(--line2) !important; }
.clan-pda-list .list-item.done{
  opacity:.5;
  border-left-color:var(--line2) !important;
}
.clan-pda-list .list-item b{ color:var(--txt) !important; }
.clan-pda-list .list-item .muted.small{
  font-family:var(--mono) !important;
  font-size:.72rem !important;
  text-transform:uppercase;
  letter-spacing:.5px;
}

/* --- Ticket Detail (Verlauf) --- */
.pda-sub-panel .shout{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
  padding:12px !important;
  margin-bottom:10px;
}
.pda-sub-panel .sh-head{
  font-family:var(--mono) !important;
  font-size:.78rem !important;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.pda-sub-panel .sh-head a{ color:var(--gold) !important; }
.pda-sub-panel .sh-head .muted.small{ color:var(--muted) !important; }
.pda-sub-panel .shout p{
  font-family:var(--mono) !important;
  font-size:.84rem !important;
  color:#d8d0c4 !important;
  line-height:1.5 !important;
  margin-top:4px !important;
}
.pda-sub-panel .form label{
  font-family:var(--mono) !important;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--gold) !important;
}
.pda-sub-panel .form textarea{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--txt) !important;
  font-family:var(--mono) !important;
}

/* --- Badges in PDA context --- */
.clan-pda-list .badge,
.pda-sub-panel .badge{
  font-family:var(--mono) !important;
  border-radius:0 !important;
}
/* ==========================================================
   REGELWERK & RP — PDA Terminal Style
   ========================================================== */
.rp-cols{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:start;
}
@media (max-width:900px){ .rp-cols{ grid-template-columns:1fr; } }

.pda-sub-panel h3{
  font-family:'Oswald',sans-serif !important;
  font-size:.9rem !important;
  letter-spacing:1px !important;
  color:var(--gold) !important;
  text-transform:uppercase !important;
  border-bottom:1px dashed #4a3828 !important;
  padding-bottom:6px !important;
  margin-top:18px !important;
}

/* --- Regel-Karten --- */
.rp-rule{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-left:3px solid var(--line2) !important;
  border-radius:0 !important;
  margin-bottom:9px;
}
.rp-rule.sev-schwer{ border-left-color:var(--bad) !important; }
.rp-rule.sev-mittel{ border-left-color:var(--warn) !important; }
.rp-rule.sev-leicht{ border-left-color:var(--ok) !important; }
.rp-rule-head h3{
  color:var(--txt) !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
  text-transform:none !important;
  font-size:1rem !important;
}
.rp-code{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--gold) !important;
  font-family:var(--mono) !important;
}
.rp-rule p{ color:#d8d0c4 !important; }

/* --- Befehle --- */
.rp-cmd{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px 14px;
  font-size:.88rem;
}
.rp-cmd code{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--gold) !important;
  font-family:var(--mono) !important;
  white-space:nowrap;
}
.rp-cmd span{
  font-family:var(--mono) !important;
  font-size:.82rem !important;
  color:#d8d0c4 !important;
  line-height:1.5;
}

/* --- KV-Listen --- */
.pda-sub-panel .kv{
  border-bottom:1px dashed #4a3828 !important;
}
.pda-sub-panel .kv span{
  font-family:var(--mono) !important;
  color:var(--muted) !important;
}
.pda-sub-panel .kv b{
  color:var(--gold) !important;
  font-family:var(--mono) !important;
}

/* --- Eigene Meldungen & Verwarnungen --- */
.rp-scroll{
  max-height:340px;
  overflow-y:auto;
  padding-right:5px;
}
.rp-scroll::-webkit-scrollbar{ width:5px; }
.rp-scroll::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:3px; }

.rp-rep-card{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-left:3px solid var(--warn) !important;
  border-radius:0 !important;
  margin-bottom:8px;
}
.rp-rep-card.status-open{ border-left-color:var(--bad) !important; }
.rp-rep-card.status-reviewing{ border-left-color:var(--warn) !important; }
.rp-rep-card.status-resolved{ border-left-color:var(--ok) !important; opacity:.75; }
.rp-rep-card.status-rejected{ border-left-color:var(--line2) !important; opacity:.6; }

.rp-rep-head b, .rp-rep-body p{ color:var(--txt) !important; }
.rp-rep-body .muted.small{
  font-family:var(--mono) !important;
  font-size:.72rem !important;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.rp-warn-item{
  background:rgba(208,32,32,.08) !important;
  border:1px solid rgba(208,32,32,.35) !important;
  border-radius:0 !important;
  margin-bottom:8px;
}
.rp-warn-item.ackd{ opacity:.6; background:rgba(255,255,255,.03) !important; border-color:#4a3828 !important; }
.rp-warn-lvl{
  background:var(--blood) !important;
  color:#fff !important;
  border-radius:0 !important;
}
.rp-warn-item b{ color:var(--txt) !important; }
.rp-warn-item .muted.small, .rp-warn-item .small{
  font-family:var(--mono) !important;
  font-size:.74rem !important;
  text-transform:uppercase;
  letter-spacing:.5px;
}

/* --- Badges --- */
.pda-sub-panel .badge{
  font-family:var(--mono) !important;
  border-radius:0 !important;
}

/* --- Notice im PDA-Kontext --- */
.pda-sub-panel .notice.ok{
  background:rgba(80,168,48,.08) !important;
  border:1px solid rgba(80,168,48,.3) !important;
  border-left:3px solid var(--ok) !important;
  border-radius:0 !important;
}
/* ==========================================================
   STARTSEITE — PDA Hero & Terminal Boxes
   ========================================================== */

/* --- Hero Header --- */
.pda-hero-wrap{
  margin-bottom:18px;
  overflow:hidden;
}
.pda-hero{
  display:flex;
  gap:40px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.pda-hero-left{
  flex: 1 1 400px;
}
.pda-hero-right{
  flex: 1 1 300px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.pda-kicker{
  display:inline-block;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:2.5px;
  color:var(--gold);
  border:1px solid rgba(240,192,64,.4);
  background:rgba(240,192,64,.08);
  padding:5px 14px;
  border-radius:2px;
  margin-bottom:18px;
  text-transform:uppercase;
}
.pda-hero h1{
  font-size:clamp(1.8rem, 5vw, 2.6rem);
  text-transform:uppercase;
  color:var(--txt);
  text-shadow:0 4px 10px rgba(0,0,0,.8);
  margin:0 0 14px;
  letter-spacing:1.5px;
}
.pda-hero h1 b{ color:var(--acc); text-shadow:0 0 15px rgba(224,101,26,.4); }
.pda-hero .hero-btns{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}
.pda-hero .hero-btns .btn.big{
  padding:14px 24px;
  font-size:1rem;
}
.pda-hero .hero-btns .btn.ghost{
  background:rgba(0,0,0,.3);
  border:1px solid #4a3828;
}

.pda-hero-ip{
  font-family:var(--mono);
  font-size:.88rem;
  color:var(--gold);
  background:rgba(0,0,0,.4);
  border:1px solid #4a3828;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-radius:2px;
}
.pda-hero-ip code{
  background:transparent !important;
  border:0 !important;
  color:var(--gold);
  font-family:var(--mono);
  font-size:1rem;
  font-weight:700;
}
.pda-hero-ip .icon-btn{
  background:rgba(0,0,0,.4) !important;
  border:1px solid #4a3828 !important;
  border-radius:2px !important;
  color:var(--gold) !important;
}

/* --- Quick Stats im Hero --- */
#quickStats .stat{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:2px !important;
  padding:12px 14px !important;
  text-align:center;
}
#quickStats .stat span{
  font-family:var(--mono) !important;
  font-size:.62rem !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  color:var(--muted) !important;
}
#quickStats .stat b{
  font-family:'Oswald',sans-serif !important;
  color:var(--gold) !important;
  font-size:1.3rem !important;
  display:block;
  margin-top:4px;
}

/* --- Startseiten Boxen (Ankündigungen, etc.) --- */
.pda-sub-panel .ann{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-left:3px solid var(--line2) !important;
  border-radius:0 !important;
  padding:14px 16px !important;
  margin-bottom:12px;
}
.pda-sub-panel .ann.pin{
  border-left-color:var(--gold) !important;
  background:linear-gradient(90deg, rgba(240,192,64,.05), rgba(0,0,0,.3)) !important;
}
.pda-sub-panel .ann h3{
  color:var(--gold) !important;
  font-family:'Oswald',sans-serif !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  border:0 !important;
  margin:0 0 6px !important;
  font-size:1rem !important;
}
.pda-sub-panel .ann .meta{
  font-family:var(--mono) !important;
  font-size:.72rem !important;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted) !important;
}
.pda-sub-panel .ann p{ color:#d8d0c4 !important; line-height:1.5; margin-top:8px; }

/* --- Serverstatus (KV-Listen & Bars) --- */
.pda-sub-panel .kv{
  border-bottom:1px dashed #4a3828 !important;
}
.pda-sub-panel .kv span{
  font-family:var(--mono) !important;
  color:var(--muted) !important;
}
.pda-sub-panel .kv b{
  color:var(--txt) !important;
  font-weight:400 !important;
}
.pda-sub-panel .kv code{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--gold) !important;
}
.pda-sub-panel .bar{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}

/* --- Mini Rangliste --- */
.pda-sub-panel .mini{
  list-style:none; margin:0; padding:0; counter-reset:m;
}
.pda-sub-panel .mini li{
  display:flex; align-items:center; gap:10px;
  padding:10px 0;
  border-bottom:1px dashed #4a3828;
  counter-increment:m;
}
.pda-sub-panel .mini li:last-child{ border-bottom:0; }
.pda-sub-panel .mini li:before{
  content:counter(m);
  font-family:'Oswald',sans-serif;
  color:var(--gold);
  font-size:1rem;
  width:20px;
  text-align:center;
}
.pda-sub-panel .mini li a{
  display:flex; align-items:center; gap:10px;
  flex:1; color:var(--txt) !important; text-decoration:none !important;
  font-family:var(--mono) !important;
  font-size:.86rem;
}
.pda-sub-panel .mini li a:hover{ color:var(--gold) !important; }
.pda-sub-panel .mini li b{
  font-family:'Oswald',sans-serif !important;
  color:var(--gold) !important;
  font-weight:400 !important;
  font-size:.9rem;
}

/* --- Feed / Timeline --- */
.pda-sub-panel .timeline{
  padding-left:22px;
}
.pda-sub-panel .timeline:before{
  background:#4a3828 !important;
}
.pda-sub-panel .tl-item{
  background:rgba(0,0,0,.2) !important;
  border:1px solid #4a3828 !important;
  border-left:3px solid var(--acc) !important;
  border-radius:0 !important;
  padding:10px 14px !important;
  margin-bottom:8px;
}
.pda-sub-panel .tl-item.death{ border-left-color:var(--blood) !important; }
.pda-sub-panel .tl-item:before{
  background:#15100c !important;
  border:2px solid var(--gold) !important;
}
.pda-sub-panel .tl-item b{ color:var(--gold) !important; }
.pda-sub-panel .tl-item .meta{
  font-family:var(--mono) !important;
  font-size:.72rem !important;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted) !important;
}

/* --- Responsive --- */
@media(max-width:768px){
  .pda-hero{
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }
  .pda-hero-right{
    width:100%;
  }
  #quickStats{
    grid-template-columns:1fr 1fr !important;
  }
}
/* ==========================================================
   MEIN PROFIL — PDA Terminal Style
   ========================================================== */
.pda-sub-panel .pzlink{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-left:3px solid var(--warn) !important;
  border-radius:0 !important;
  padding:14px !important;
}
.pda-sub-panel .pzlink.ok{
  border-left-color:var(--acc) !important;
  background:rgba(224,101,26,.05) !important;
}
.pda-sub-panel .pzlink-name{
  font-family:'Oswald',sans-serif !important;
  font-size:1.2rem !important;
  letter-spacing:1px !important;
  margin-top:4px !important;
}
.pda-sub-panel .pzlink b{ color:var(--gold) !important; }

.pda-sub-panel .form label{
  font-family:var(--mono) !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  color:var(--gold) !important;
  font-size:.74rem !important;
}
.pda-sub-panel .form input,
.pda-sub-panel .form textarea,
.pda-sub-panel .form select{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--txt) !important;
  font-family:var(--mono) !important;
  border-radius:0 !important;
}
.pda-sub-panel .form input:focus,
.pda-sub-panel .form textarea:focus,
.pda-sub-panel .form select:focus{
  border-color:var(--acc) !important;
  box-shadow:0 0 0 3px rgba(224,101,26,.14) !important;
}
.pda-sub-panel .form small{
  font-family:var(--mono) !important;
  color:var(--muted) !important;
}
.pda-sub-panel .form small a{ color:var(--gold) !important; }

.pda-sub-panel .stat{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
  padding:12px !important;
  text-align:center;
}
.pda-sub-panel .stat span{
  font-family:var(--mono) !important;
  font-size:.62rem !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  color:var(--muted) !important;
}
.pda-sub-panel .stat b{
  font-family:'Oswald',sans-serif !important;
  color:var(--gold) !important;
  font-size:1.3rem !important;
  display:block;
  margin-top:4px;
}

.pda-sub-panel .bar{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}
.pda-sub-panel .bar i{
  background:linear-gradient(90deg, var(--acc-d), var(--gold)) !important;
}

.pda-sub-panel p{ color:#d8d0c4 !important; line-height:1.5; }
.pda-sub-panel .muted{ color:var(--muted) !important; }
.pda-sub-panel a{ color:var(--gold) !important; }
.pda-sub-panel b{ color:var(--txt) !important; }
.pda-sub-panel hr{ border-color:#4a3828 !important; }
.pda-sub-panel .notice{
  border-radius:0 !important;
  font-family:var(--mono) !important;
  font-size:.82rem !important;
}
/* ==========================================================
   LIVE-CHAT — PDA Terminal Style
   ========================================================== */

/* --- Sidebar Gehäuse --- */
.chat-sidebar{
  background:linear-gradient(160deg, #15100c 0%, #0c0a08 100%) !important;
  border-right:2px solid #4a3828 !important;
  box-shadow:4px 0 30px rgba(0,0,0,.8) !important;
}

/* --- Header --- */
.chat-header{
  background:rgba(0,0,0,.5) !important;
  border-bottom:1px solid #4a3828 !important;
}
.chat-channels button{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  color:var(--muted) !important;
  font-family:var(--mono) !important;
  border-radius:0 !important;
}
.chat-channels button:hover{
  color:var(--txt) !important;
  border-color:var(--line2) !important;
}
.chat-channels button.active{
  background:rgba(240,192,64,.1) !important;
  color:var(--gold) !important;
  border-color:var(--gold) !important;
}
.chat-online{
  font-family:var(--mono) !important;
  color:var(--muted) !important;
  text-transform:uppercase;
  letter-spacing:1px;
}
.chat-online-list .online-chip{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  color:var(--gold) !important;
  font-family:var(--mono) !important;
  border-radius:0 !important;
}
.chat-online-list .online-chip:hover{
  border-color:var(--gold) !important;
  background:rgba(240,192,64,.1) !important;
}
.chat-minimize, .chat-sound-btn{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  color:var(--muted) !important;
  border-radius:0 !important;
  font-family:var(--mono) !important;
}
.chat-minimize:hover, .chat-sound-btn:hover{
  color:var(--gold) !important;
  border-color:var(--gold) !important;
}

/* --- Nachrichten Körper --- */
.chat-body{ background:transparent !important; }
.chat-body::-webkit-scrollbar-thumb{ background:var(--line2) !important; }

.chat-msg{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-left:3px solid var(--line2) !important;
  padding:8px 10px !important;
  margin-bottom:8px !important;
}
.chat-msg.mine{
  border-left-color:var(--acc) !important;
  background:rgba(224,101,26,.05) !important;
}
.chat-msg .cm-head{
  font-family:var(--mono) !important;
}
.chat-msg .cm-head a{
  color:var(--gold) !important;
}
.chat-msg .cm-head a:hover{ color:var(--acc) !important; }
.chat-msg .cm-time{
  font-family:var(--mono) !important;
  color:var(--muted) !important;
  font-size:.7rem !important;
  text-transform:uppercase;
}
.chat-msg .cm-text{
  font-family:var(--mono) !important;
  color:#d8d0c4 !important;
  font-size:.84rem !important;
}
.chat-msg .clan-pill{
  font-family:var(--mono) !important;
  border-radius:0 !important;
}
.chat-msg .cm-del{
  color:var(--muted) !important;
}
.chat-msg .cm-del:hover{ color:var(--bad) !important; }

/* --- Input Bereich --- */
.chat-input{
  background:rgba(0,0,0,.5) !important;
  border-top:1px solid #4a3828 !important;
}
.chat-input input{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  color:var(--txt) !important;
  font-family:var(--mono) !important;
  border-radius:0 !important;
}
.chat-input input:focus{
  border-color:var(--gold) !important;
  box-shadow:0 0 0 2px rgba(240,192,64,.15) !important;
}
.chat-send-btn{
  background:linear-gradient(180deg,var(--acc),var(--acc-d)) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:0 !important;
}
.chat-smiley-btn{
  background:rgba(0,0,0,.3) !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}
.chat-smiley-btn.active,
.chat-smiley-btn:hover{
  border-color:var(--gold) !important;
  color:var(--gold) !important;
}

/* --- Smiley Picker --- */
.smiley-picker{
  background:#0a0604 !important;
  border:1px solid #4a3828 !important;
  border-radius:0 !important;
}
.smiley-item{
  border-radius:0 !important;
}
.smiley-item:hover{
  background:rgba(240,192,64,.1) !important;
}

/* --- Chat Toggle Button (Minimized) --- */
.chat-toggle{
  background:linear-gradient(160deg, #15100c 0%, #0c0a08 100%) !important;
  border:1px solid #4a3828 !important;
  border-left:0 !important;
  border-bottom:0 !important;
  border-radius:0 2px 0 0 !important;
  color:var(--gold) !important;
  box-shadow:4px 0 20px rgba(0,0,0,.6) !important;
}
.chat-toggle:hover{
  border-color:var(--gold) !important;
  color:var(--gold) !important;
}
.chat-toggle.has-unread{
  border-color:var(--bad) !important;
  color:var(--bad) !important;
}
.chat-toggle .chat-badge{
  background:var(--bad) !important;
  color:#fff !important;
  border:2px solid #0c0a08 !important;
  font-family:var(--mono) !important;
  border-radius:0 !important;
}

/* --- Badges im Chat --- */
.chat-msg .badge{
  font-family:var(--mono) !important;
  border-radius:0 !important;
}
/* ==========================================================
   STARTSEITE — PDA HERO & DASHBOARD GRID (Einzigartig)
   ========================================================== */
.pda-hero-banner {
  background: linear-gradient(160deg, #0c0a08 0%, #15100c 100%);
  border: 2px solid #4a3828;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
}
.pda-hero-banner::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--acc), var(--gold), var(--acc));
  z-index: 10;
}
.pda-hero-content {
  padding: 50px 40px 40px;
  text-align: center;
  background: radial-gradient(circle at 50% 50%, rgba(224,101,26,0.05) 0%, transparent 60%);
}
.hero-logo {
  font-family: 'Oswald', sans-serif;
  font-size: 1.4rem;
  color: var(--gold);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 15px;
  text-shadow: 0 0 15px rgba(240,192,64,0.4);
}
.logo-icon {
  font-size: 2rem;
  color: var(--acc);
  filter: drop-shadow(0 0 10px rgba(224,101,26,0.6));
}
.hero-title {
  font-family: 'Oswald', sans-serif;
  font-size: 3rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 30px;
  text-shadow: 3px 3px 0px #0a0805;
  letter-spacing: 2px;
}
.hero-title .hl {
  color: var(--acc);
  text-shadow: 0 0 20px rgba(224,101,26,0.8);
}
.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}
.hero-btns .btn.big {
  padding: 14px 28px;
  font-size: 1.1rem;
  border-radius: 2px;
}
.hero-btns .btn.glow {
  box-shadow: 0 0 15px rgba(224,101,26,0.5);
  animation: glow 2s infinite alternate;
}
@keyframes glow {
  from { box-shadow: 0 0 10px rgba(224,101,26,0.4); }
  to { box-shadow: 0 0 25px rgba(224,101,26,0.8); }
}

.pda-hero-stats {
  display: flex;
  flex-wrap: wrap;
  background: rgba(0,0,0,0.4);
  border-top: 1px solid #4a3828;
  padding: 18px 20px;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.hero-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 80px;
}
.hero-stat-item .hs-ico { font-size: 1.3rem; }
.hero-stat-item b {
  font-family: 'Oswald', sans-serif;
  font-size: 1.4rem;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(240,192,64,0.2);
}
.hero-stat-item small {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.hero-stat-ip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.5);
  border: 1px solid #4a3828;
  padding: 10px 15px;
  border-radius: 2px;
}
.hero-stat-ip code {
  background: transparent !important;
  border: 0 !important;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: bold;
}
.hero-stat-ip .icon-btn {
  background: rgba(0,0,0,0.4) !important;
  border: 1px solid #4a3828 !important;
  color: var(--gold) !important;
  border-radius: 2px !important;
}

.home-grid-container {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  align-items: start;
}
.home-main-col, .home-side-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (max-width: 900px) {
  .home-grid-container { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.2rem; }
  .pda-hero-content { padding: 30px 20px 20px; }
  .pda-hero-stats { justify-content: center; gap: 15px; }
  .hero-stat-ip { width: 100%; justify-content: center; margin-top: 10px; }
}
/* ==========================================================
   STARTSEITE — PDA HERO & DASHBOARD GRID
   ========================================================== */
.pda-hero-banner {
  background: linear-gradient(160deg, #0c0a08 0%, #15100c 100%);
  border: 2px solid #4a3828;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
}
.pda-hero-banner::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--acc), var(--gold), var(--acc));
  z-index: 10;
}
.pda-hero-content {
  padding: 50px 40px 40px;
  text-align: center;
  background: radial-gradient(circle at 50% 50%, rgba(224,101,26,0.05) 0%, transparent 60%);
}
.hero-logo {
  font-family: 'Oswald', sans-serif;
  font-size: 1.4rem;
  color: var(--gold);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 15px;
  text-shadow: 0 0 15px rgba(240,192,64,0.4);
}
.logo-icon {
  font-size: 2rem;
  color: var(--acc);
  filter: drop-shadow(0 0 10px rgba(224,101,26,0.6));
}
.hero-title {
  font-family: 'Oswald', sans-serif;
  font-size: 3rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 30px;
  text-shadow: 3px 3px 0px #0a0805;
  letter-spacing: 2px;
}
.hero-title .hl {
  color: var(--acc);
  text-shadow: 0 0 20px rgba(224,101,26,0.8);
}
.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}
.hero-btns .btn.big {
  padding: 14px 28px;
  font-size: 1.1rem;
  border-radius: 2px;
}
.hero-btns .btn.glow {
  box-shadow: 0 0 15px rgba(224,101,26,0.5);
  animation: glow 2s infinite alternate;
}
@keyframes glow {
  from { box-shadow: 0 0 10px rgba(224,101,26,0.4); }
  to { box-shadow: 0 0 25px rgba(224,101,26,0.8); }
}

.pda-hero-stats {
  display: flex;
  flex-wrap: wrap;
  background: rgba(0,0,0,0.4);
  border-top: 1px solid #4a3828;
  padding: 18px 20px;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.hero-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 80px;
}
.hero-stat-item .hs-ico { font-size: 1.3rem; }
.hero-stat-item b {
  font-family: 'Oswald', sans-serif;
  font-size: 1.4rem;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(240,192,64,0.2);
}
.hero-stat-item small {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.hero-stat-ip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.5);
  border: 1px solid #4a3828;
  padding: 10px 15px;
  border-radius: 2px;
}
.hero-stat-ip code {
  background: transparent !important;
  border: 0 !important;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: bold;
}
.hero-stat-ip .icon-btn {
  background: rgba(0,0,0,0.4) !important;
  border: 1px solid #4a3828 !important;
  color: var(--gold) !important;
  border-radius: 2px !important;
}

.home-grid-container {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  align-items: start;
}
.home-main-col, .home-side-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (max-width: 900px) {
  .home-grid-container { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.2rem; }
  .pda-hero-content { padding: 30px 20px 20px; }
  .pda-hero-stats { justify-content: center; gap: 15px; }
  .hero-stat-ip { width: 100%; justify-content: center; margin-top: 10px; }
}
/* ==========================================================
   STARTSEITE — COOLE ANIMATIONEN
   ========================================================== */

/* --- Glutpartikel (Embers) --- */
.hero-embers{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}
.ember{
  position:absolute;
  bottom:-10px;
  width:var(--es, 2px);
  height:var(--es, 2px);
  background:var(--acc);
  border-radius:50%;
  box-shadow:0 0 6px 2px rgba(224,101,26,.6);
  opacity:var(--eo, .4);
  animation:emberRise linear infinite;
}
@keyframes emberRise{
  0%{
    transform:translateY(0) translateX(0) scale(1);
    opacity:var(--eo, .4);
  }
  50%{
    opacity:calc(var(--eo, .4) * 1.5);
  }
  100%{
    transform:translateY(-500px) translateX(var(--ex, 20px)) scale(0.3);
    opacity:0;
  }
}

/* --- CRT Scanline Sweep --- */
.hero-scanline{
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, transparent, rgba(224,101,26,.15), transparent);
  z-index:2;
  pointer-events:none;
  animation:scanSweep 6s ease-in-out infinite;
}
@keyframes scanSweep{
  0%   { top:0; opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { top:100%; opacity:0; }
}

/* --- Fade-In-Up Animation --- */
.fade-in-up{
  opacity:0;
  transform:translateY(20px);
  animation:fadeInUp .6s ease-out forwards;
  animation-delay:var(--fd, 0s);
}
@keyframes fadeInUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* --- Hero Logo Glitch --- */
.hero-logo{
  position:relative;
  cursor:default;
}
.hero-logo:hover{
  animation:logoGlitch .3s steps(2) infinite;
}
@keyframes logoGlitch{
  0%   { text-shadow:0 0 15px rgba(240,192,64,.4); transform:translateX(0); }
  20%  { text-shadow:2px 0 rgba(224,101,26,.8), -2px 0 rgba(80,168,48,.8); transform:translateX(-2px); }
  40%  { text-shadow:-2px 0 rgba(224,101,26,.8), 2px 0 rgba(80,168,48,.8); transform:translateX(2px); }
  60%  { text-shadow:2px 0 rgba(224,101,26,.8), -2px 0 rgba(80,168,48,.8); transform:translateX(-1px); }
  80%  { text-shadow:-1px 0 rgba(224,101,26,.8), 1px 0 rgba(80,168,48,.8); transform:translateX(1px); }
  100% { text-shadow:0 0 15px rgba(240,192,64,.4); transform:translateX(0); }
}

/* --- Hero Title Glow Puls --- */
.hero-title{
  animation:titleGlow 4s ease-in-out infinite alternate;
}
@keyframes titleGlow{
  0%   { text-shadow:3px 3px 0px #0a0805, 0 0 20px rgba(224,101,26,.3); }
  100% { text-shadow:3px 3px 0px #0a0805, 0 0 40px rgba(224,101,26,.6), 0 0 60px rgba(224,101,26,.3); }
}
.hero-title .hl{
  animation:hlGlow 3s ease-in-out infinite alternate;
}
@keyframes hlGlow{
  0%   { text-shadow:0 0 20px rgba(224,101,26,.8); }
  100% { text-shadow:0 0 40px rgba(224,101,26,1), 0 0 80px rgba(224,101,26,.5); }
}

/* --- Hero Stat Items Hover --- */
.hero-stat-item{
  transition:transform .2s ease, filter .2s ease;
}
.hero-stat-item:hover{
  transform:translateY(-3px);
  filter:brightness(1.3);
}
.hero-stat-item:hover .hs-ico{
  animation:icoBounce .4s ease;
}
@keyframes icoBounce{
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(-5px) scale(1.2); }
}

/* --- CTA Button Pulse --- */
.hero-btns .btn.glow{
  animation:glow 2s infinite alternate, btnPulse 2.5s ease-in-out infinite;
}
@keyframes btnPulse{
  0%, 100% { transform:scale(1); }
  50%      { transform:scale(1.03); }
}

/* --- PDA Clock Boot Effect --- */
#pdaClock{
  font-family:var(--mono);
  transition:color .3s;
}
#pdaClock::before{
  content:"▸ ";
  color:var(--ok);
  animation:cursorBlink 1s steps(2) infinite;
}
@keyframes cursorBlink{
  50% { opacity:0; }
}

/* --- Timeline Items Hover --- */
.pda-sub-panel .tl-item{
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.pda-sub-panel .tl-item:hover{
  transform:translateX(4px);
  border-left-width:5px;
}

/* --- Mini Ranking Hover --- */
.pda-sub-panel .mini li{
  transition:padding-left .15s ease, background .15s ease;
}
.pda-sub-panel .mini li:hover{
  padding-left:8px;
  background:rgba(240,192,64,.04);
}

/* --- Ankündigungen Hover --- */
.pda-sub-panel .ann{
  transition:transform .15s ease, border-left-color .15s;
}
.pda-sub-panel .ann:hover{
  transform:translateX(3px);
}

/* --- Hero Banner Border Glow --- */
.pda-hero-banner{
  animation:borderGlow 4s ease-in-out infinite alternate;
}
@keyframes borderGlow{
  0%   { box-shadow:0 10px 30px rgba(0,0,0,0.6), 0 0 0 rgba(224,101,26,0); }
  100% { box-shadow:0 10px 30px rgba(0,0,0,0.6), 0 0 20px rgba(224,101,26,.15); }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .ember, .hero-scanline{ display:none; }
}
/* ==========================================================
   TOPBAR & NAVIGATION — PDA Terminal Style
   ========================================================== */
.topbar{
  background: rgba(10,8,5,.92) !important;
  backdrop-filter: blur(12px);
  border-bottom: 2px solid #4a3828 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.6), inset 0 -1px 0 rgba(240,192,64,.05) !important;
  height: 64px !important;
}

/* Brand / Logo */
.brand .mark{
  filter: drop-shadow(0 0 12px rgba(224,101,26,.6)) !important;
  animation: logoPulse 3s infinite ease-in-out;
}
.brand-txt{
  letter-spacing: 2px !important;
}
.brand-txt b{
  text-shadow: 0 0 12px rgba(240,192,64,.5) !important;
}
.brand-txt small{
  color: var(--gold) !important;
  opacity: 0.6;
}

/* Nav Items */
.nav-item, .nav-dropdown > button{
  font-family: var(--mono) !important;
  font-size: .76rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  border-radius: 2px !important;
  border: 1px solid transparent !important;
  padding: 8px 14px !important;
  transition: all .15s ease !important;
}
.nav-item:hover, .nav-dropdown:hover > button, .nav-dropdown.open > button{
  background: rgba(224,101,26,.08) !important;
  color: var(--gold) !important;
  border-color: rgba(224,101,26,.2) !important;
  text-shadow: 0 0 6px rgba(240,192,64,.3);
}
.nav-item.active{
  color: var(--acc) !important;
  background: rgba(224,101,26,.12) !important;
  border-color: rgba(224,101,26,.3) !important;
}

/* Dropdown Menus */
.nav-menu{
  background: linear-gradient(160deg, #15100c 0%, #0c0a08 100%) !important;
  border: 2px solid #4a3828 !important;
  border-radius: 2px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.8), inset 0 0 20px rgba(0,0,0,.5) !important;
  padding: 8px !important;
  min-width: 240px !important;
}
.nav-menu::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}
.nav-menu a{
  font-family: var(--mono) !important;
  font-size: .76rem !important;
  color: var(--txt) !important;
  padding: 10px 14px !important;
  border-radius: 2px !important;
  border-left: 2px solid transparent !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: all .15s ease !important;
}
.nav-menu a:hover{
  background: rgba(224,101,26,.08) !important;
  color: var(--gold) !important;
  border-left-color: var(--gold) !important;
  padding-left: 18px !important;
}
.nav-menu a .sub{
  color: var(--muted) !important;
  font-size: .68rem !important;
  font-family: var(--mono) !important;
}
.nav-menu a.danger{
  color: var(--bad) !important;
}
.nav-menu a.danger:hover{
  background: rgba(208,32,32,.08) !important;
  border-left-color: var(--bad) !important;
}
.nav-sep{
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #4a3828, transparent) !important;
  margin: 6px 4px !important;
}

/* User Menu Button */
.ubtn{
  background: rgba(0,0,0,.3) !important;
  border: 1px solid #4a3828 !important;
  border-radius: 2px !important;
  font-family: var(--mono) !important;
  font-size: .78rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  transition: all .15s ease !important;
}
.ubtn:hover{
  border-color: var(--gold) !important;
  background: rgba(240,192,64,.05) !important;
}
.ubtn .uname{
  color: var(--gold) !important;
}

/* User Dropdown */
.udrop{
  background: linear-gradient(160deg, #15100c 0%, #0c0a08 100%) !important;
  border: 2px solid #4a3828 !important;
  border-radius: 2px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.8), inset 0 0 20px rgba(0,0,0,.5) !important;
}
.udrop::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}
.udrop-head{
  font-family: var(--mono) !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: .72rem !important;
  border-bottom: 1px solid #4a3828 !important;
}
.udrop a, .udrop button{
  font-family: var(--mono) !important;
  font-size: .78rem !important;
  color: var(--txt) !important;
  padding: 10px 14px !important;
  border-radius: 2px !important;
  border-left: 2px solid transparent !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: all .15s ease !important;
}
.udrop a:hover, .udrop button:hover{
  background: rgba(224,101,26,.08) !important;
  color: var(--gold) !important;
  border-left-color: var(--gold) !important;
  padding-left: 18px !important;
}

/* Status Strip */
.status-strip{
  background: linear-gradient(90deg, #0a0805, #15100c) !important;
  border-bottom: 1px solid #4a3828 !important;
  font-family: var(--mono) !important;
  font-size: .74rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
}
.status-strip b{
  color: var(--gold) !important;
}

/* Burger Menu Mobile */
.burger{
  border: 1px solid #4a3828 !important;
  border-radius: 2px !important;
  color: var(--gold) !important;
  font-size: 1.1rem !important;
}
.burger:hover{
  border-color: var(--gold) !important;
  background: rgba(240,192,64,.05) !important;
}

/* Mobile Nav */
@media(max-width:860px){
  .nav.open{
    background: linear-gradient(180deg, #15100c 0%, #0c0a08 100%) !important;
    border-bottom: 2px solid #4a3828 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.8) !important;
  }
  .nav-item, .nav-dropdown > button{
    border: 1px solid transparent !important;
    border-left: 2px solid transparent !important;
  }
  .nav-item:hover, .nav-dropdown.open > button{
    border-left-color: var(--gold) !important;
  }
}
/* ==========================================================
   MODALS — PDA Terminal Style
   ========================================================== */
.modal-bg{
  background:rgba(4,3,2,.85) !important;
  backdrop-filter:blur(6px);
}
.modal{
  background:linear-gradient(160deg, #15100c 0%, #0c0a08 100%) !important;
  border:2px solid #4a3828 !important;
  border-radius:2px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), inset 0 0 30px rgba(0,0,0,0.5) !important;
  overflow:hidden;
  position:relative;
}
.modal::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--acc), var(--gold), var(--acc));
  z-index:10;
}
.modal::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 4px);
  pointer-events:none;
  z-index:1;
  opacity:.4;
}
.modal-head{
  background:rgba(0,0,0,.4) !important;
  border-bottom:1px solid #4a3828 !important;
  position:relative;
  z-index:2;
}
.modal-head h3{
  font-family:'Oswald',sans-serif !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
  color:var(--gold) !important;
}
.modal-head .x{
  color:var(--muted) !important;
  font-size:1rem !important;
  transition:.15s;
}
.modal-head .x:hover{
  color:var(--bad) !important;
}
.modal-body{
  position:relative;
  z-index:2;
  color:#d8d0c4 !important;
}
.modal-foot{
  background:rgba(0,0,0,.4) !important;
  border-top:1px solid #4a3828 !important;
  position:relative;
  z-index:2;
}
/* ==========================================================
   ADMIN-BEREICH — PDA Terminal Style
   ========================================================== */

/* --- Sidebar Gehäuse --- */
.admin-side{
  background: linear-gradient(160deg, #15100c 0%, #0c0a08 100%) !important;
  border: 2px solid #4a3828 !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,.6) !important;
  padding: 12px 8px !important;
}

/* --- Gruppen Überschriften --- */
.admin-side h3{
  font-family: var(--mono) !important;
  font-size: .64rem !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin: 18px 6px 8px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid #4a3828 !important;
  opacity: 0.8;
}
.admin-side h3:first-child { margin-top: 4px !important; }

/* --- Sidebar Buttons --- */
.admin-side button{
  font-family: var(--mono) !important;
  font-size: .76rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--muted) !important;
  padding: 9px 12px !important;
  border-radius: 2px !important;
  border-left: 2px solid transparent !important;
  background: transparent !important;
  transition: all .15s ease !important;
}
.admin-side button:hover{
  background: rgba(224,101,26,.08) !important;
  color: var(--gold) !important;
}
.admin-side button.active{
  background: rgba(240,192,64,.1) !important;
  color: var(--gold) !important;
  border-left-color: var(--gold) !important;
}
.admin-side button .ico{
  font-size: .95rem !important;
  width: 20px !important;
  text-align: center !important;
}
.admin-side button .lbl{
  font-weight: 600 !important;
}
.admin-side button .badge-sm{
  background: var(--bad) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-family: var(--mono) !important;
  font-size: .6rem !important;
  padding: 1px 5px !important;
  border: 1px solid rgba(208,32,32,.5) !important;
}

/* --- Toggle Button (Mobile) --- */
.admin-side-toggle{
  background: linear-gradient(160deg, #15100c 0%, #0c0a08 100%) !important;
  border: 2px solid #4a3828 !important;
  border-radius: 2px !important;
  color: var(--gold) !important;
  font-family: var(--mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
}

/* --- Admin Main Content Panels --- */
.admin-main .panel{
  background: linear-gradient(160deg, #15100c 0%, #0c0a08 100%) !important;
  border: 2px solid #4a3828 !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,.6) !important;
  padding: 20px !important;
  margin-bottom: 18px !important;
  position: relative;
  overflow: hidden;
}
.admin-main .panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.4;
}

.admin-main .panel > h1,
.admin-main .panel > h2 {
  color: var(--gold) !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid #4a3828 !important;
  padding-bottom: 10px !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* --- Tabellen im Admin Bereich --- */
.admin-main .table th{
  font-family: var(--mono) !important;
  color: var(--gold) !important;
  background: rgba(0,0,0,.4) !important;
  border-bottom: 2px solid #4a3828 !important;
  font-size: .72rem !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}
.admin-main .table td{
  border-bottom: 1px solid rgba(74,56,40,.4) !important;
  color: #d8d0c4 !important;
}
.admin-main .table tbody tr:hover{
  background: rgba(240,192,64,.04) !important;
}

/* --- Formulare im Admin Bereich --- */
.admin-main label{
  font-family: var(--mono) !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: .74rem !important;
}
.admin-main input,
.admin-main select,
.admin-main textarea{
  background: #0a0604 !important;
  border: 1px solid #4a3828 !important;
  color: var(--txt) !important;
  font-family: var(--mono) !important;
  border-radius: 2px !important;
}
.admin-main input:focus,
.admin-main select:focus,
.admin-main textarea:focus{
  border-color: var(--acc) !important;
  box-shadow: 0 0 0 2px rgba(224,101,26,.15) !important;
}

/* --- Dashboard Stats --- */
.admin-main .stat{
  background: rgba(0,0,0,.3) !important;
  border: 1px solid #4a3828 !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: 2px !important;
  padding: 14px !important;
}
.admin-main .stat span{
  font-family: var(--mono) !important;
  font-size: .6rem !important;
  color: var(--muted) !important;
  letter-spacing: 1px !important;
}
.admin-main .stat b{
  color: var(--gold) !important;
  font-size: 1.4rem !important;
}

/* --- Admin Notices --- */
.admin-main .notice{
  border-radius: 0 !important;
  font-family: var(--mono) !important;
  font-size: .82rem !important;
  border-left-width: 3px !important;
}
.admin-main .notice.warn{
  background: rgba(240,160,48,.08) !important;
  border-color: rgba(240,160,48,.3) !important;
  border-left-color: var(--warn) !important;
  color: #f0d28a !important;
}
.admin-main .notice.bad{
  background: rgba(208,32,32,.08) !important;
  border-color: rgba(208,32,32,.3) !important;
  border-left-color: var(--bad) !important;
  color: #f0a79c !important;
}
.admin-main .notice.ok{
  background: rgba(80,168,48,.08) !important;
  border-color: rgba(80,168,48,.3) !important;
  border-left-color: var(--ok) !important;
  color: #c3e2ab !important;
}
.admin-main .notice code {
  background: #0a0604 !important;
  border: 1px solid #4a3828 !important;
  color: var(--gold) !important;
}
/* ==========================================================
   FAQ — zweispaltig, gruppiert, durchsuchbar

   Zwei Spalten per column-count statt Grid: Grid würde jede
   Gruppe auf gleiche Höhe zwingen und unter kurzen Gruppen
   Löcher lassen. Spalten füllen sich von selbst.
   ========================================================== */
.faq-wrap{
  column-count:2;
  column-gap:18px;
}
@media(max-width:900px){
  .faq-wrap{ column-count:1 }
}

.faq-group{
  break-inside:avoid-column;
  -webkit-column-break-inside:avoid;
  margin-bottom:18px;
}

.faq-cat{
  font-family:'Oswald',sans-serif !important;
  font-size:.82rem !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
  color:var(--gold) !important;
  margin:0 0 8px !important;
  padding-bottom:6px !important;
  border-bottom:1px solid #4a3828 !important;
  display:flex; align-items:center; gap:8px;
}
.faq-n{
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:400;
  color:var(--muted);
  background:rgba(0,0,0,.35);
  border:1px solid #4a3828;
  padding:1px 6px;
  margin-left:auto;
}

/* Einzelfrage — überschreibt die runden Standard-details */
.faq-item{
  background:rgba(0,0,0,.28) !important;
  border:1px solid #4a3828 !important;
  border-left:3px solid var(--line2) !important;
  border-radius:0 !important;
  padding:0 !important;
  margin-bottom:5px !important;
  transition:border-color .15s;
}
.faq-item:hover{ border-left-color:var(--acc) !important }
.faq-item[open]{
  border-left-color:var(--gold) !important;
  background:rgba(0,0,0,.4) !important;
}

.faq-item summary{
  padding:9px 12px 9px 30px;
  position:relative;
  font-size:.86rem;
  line-height:1.4;
  font-weight:500;
  color:var(--txt);
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::before{
  content:"▸";
  position:absolute; left:11px; top:9px;
  color:var(--acc);
  font-size:.8rem;
  transition:transform .15s;
}
.faq-item[open] summary::before{
  content:"▾";
  color:var(--gold);
}
.faq-item[open] summary{ color:var(--gold); margin-bottom:0 }

.faq-item p{
  margin:0 !important;
  padding:0 12px 11px 30px;
  font-size:.82rem;
  line-height:1.6;
  color:#cfc7bb;
}
.faq-item p b{ color:var(--txt) }
.faq-item p code{
  font-size:.78em;
  color:var(--gold);
  background:#0a0604;
  border:1px solid #4a3828;
  padding:1px 5px;
}
.faq-item p a{ color:var(--gold) }

.faq-empty{ padding:10px 0 }
/* Tab-Inhalte der Server-Info */
.pda-tab-panel{ animation: fadeIn .2s ease-out; }
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}

/* FAQ-Gruppen */
.faq-group{ margin-bottom:18px; }
.faq-cat{
  font-family:'Oswald',sans-serif;
  font-size:.92rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 10px;
  padding-bottom:6px;
  border-bottom:1px solid #4a3828;
}
.faq-cat .faq-n{
  font-family:var(--mono);
  font-size:.66rem;
  color:var(--muted);
  font-weight:400;
  margin-left:4px;
}
.faq-item{
  margin-bottom:6px;
  background:rgba(0,0,0,.25);
  border:1px solid #4a3828;
  border-radius:2px;
  overflow:hidden;
}
.faq-item summary{
  cursor:pointer;
  padding:11px 14px;
  font-weight:600;
  font-size:.92rem;
  color:var(--txt);
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::before{
  content:'▸ ';
  color:var(--acc);
  font-weight:700;
}
.faq-item[open] summary::before{ content:'▾ '; }
.faq-item[open] summary{
  background:rgba(224,101,26,.06);
  color:var(--gold);
}
.faq-item p{
  margin:0;
  padding:0 14px 12px 14px;
  color:#d8d0c4;
  line-height:1.55;
  font-size:.88rem;
}
/* Globaler Beta-Banner — über allem, auf jeder Seite */
.beta-global-banner {
  background: linear-gradient(90deg, rgba(90,169,209,.25), rgba(90,169,209,.12));
  border-bottom: 2px solid rgba(90,169,209,.6);
  color: #5aa9d1;
  text-align: center;
  font-family: var(--mono, monospace);
  font-size: .82rem;
  letter-spacing: .5px;
  padding: 6px 16px;
  position: sticky;
  top: 0;
  z-index: 9999;
  text-transform: uppercase;
  animation: betaPulse 3s ease-in-out infinite;
}

.beta-global-banner b {
  color: #7bc4e8;
  font-weight: 700;
}

@keyframes betaPulse {
  0%, 100% { background: linear-gradient(90deg, rgba(90,169,209,.25), rgba(90,169,209,.12)); }
  50%      { background: linear-gradient(90deg, rgba(90,169,209,.15), rgba(90,169,209,.06)); }
}

/* Auf mobilen Geräten etwas kompakter */
@media (max-width: 640px){
  .beta-global-banner {
    font-size: .72rem;
    padding: 5px 10px;
    letter-spacing: 0;
  }
}
/* ==========================================================
   FIX: Beta-Banner, Topbar & Chat Schichtreihenfolge (Z-Index)
   ========================================================== */

/* 1. Beta-Banner ganz oben fixieren, aber UNTER die Topbar legen */
.beta-global-banner {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 28px !important; /* Feste Höhe */
  line-height: 16px !important;
  z-index: 9998 !important; /* Unter der Topbar, damit Menüs sichtbar bleiben */
}

/* 2. Topbar direkt unter den Beta-Banner setzen */
.topbar {
  position: sticky !important;
  top: 28px !important; /* Klebt ab 28px (direkt unter dem Banner) */
  z-index: 10002 !important; /* Über dem Banner und dem Content */
}

/* 3. Statusleiste unter die Topbar setzen */
.status-strip {
  position: sticky !important;
  top: 92px !important; /* 28px (Banner) + 64px (Topbar) */
  z-index: 10001 !important; /* Unter der Topbar, über dem Content */
}

/* 4. Chat-Sidebar exakt an die Topbar-Unterkante setzen */
.chat-sidebar {
  top: 92px !important; /* 28px + 64px = 92px */
  z-index: 10003 !important; /* Über der Topbar, damit der Chat-Header beim Scrollen sichtbar bleibt */
}
/* ==========================================================
   FIX: Boot-Screen (Ladeanimation) über alles heben
   ========================================================== */
.boot {
  z-index: 100000 !important; /* Höher als Topbar (10002) und Beta-Banner (9998) */
}