/* Layout: Atreia-Bild als Himmel, links Elyos-Licht, rechts Asmodier-Nacht, dazwischen der Abyss.
   Darunter ein dunkles Board: Tabs, Filterleiste, Kartenraster. Bewusst nur ein dunkles Erscheinungsbild. */
@font-face{font-family:"Marcellus";font-weight:400;font-display:swap;src:url(/fonts/marcellus-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Marcellus";font-weight:400;font-display:swap;src:url(/fonts/marcellus-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Marcellus SC";font-weight:400;font-display:swap;src:url(/fonts/marcellus-sc-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD}
@font-face{font-family:"Marcellus SC";font-weight:400;font-display:swap;src:url(/fonts/marcellus-sc-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:"Alegreya Sans";font-weight:400;font-display:swap;src:url(/fonts/alegreya-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD}
@font-face{font-family:"Alegreya Sans";font-weight:400;font-display:swap;src:url(/fonts/alegreya-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:"Alegreya Sans";font-weight:500;font-display:swap;src:url(/fonts/alegreya-sans-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD}
@font-face{font-family:"Alegreya Sans";font-weight:500;font-display:swap;src:url(/fonts/alegreya-sans-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:"Alegreya Sans";font-weight:700;font-display:swap;src:url(/fonts/alegreya-sans-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD}
@font-face{font-family:"Alegreya Sans";font-weight:700;font-display:swap;src:url(/fonts/alegreya-sans-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --abyss:#0b0d17;
  --stone:#141827;
  --stone-2:#1c2135;
  --line:#2b314b;
  --fg:#ece6d6;
  --muted:#a2a3b8;
  --elyos:#f0c869;
  --elyos-soft:#f7e7b8;
  --asmo:#b98bff;
  --aether:#63d9c9;
  --danger:#ff7a8a;
  --warn:#f0b35a;
  --tank:#8fb4ff; --dps:#ff9f7a; --heal:#8ee6a8; --support:#e6d38e;
  --font-display:"Marcellus","Palatino Linotype","Book Antiqua",Georgia,serif;
  --font-caps:"Marcellus SC","Marcellus","Palatino Linotype",Georgia,serif;
  --font-body:"Alegreya Sans","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r:10px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--abyss);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.5}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--aether)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--aether);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Kopfleiste */
.topbar{position:relative;z-index:2;background:rgba(11,13,23,.85);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding-top:env(safe-area-inset-top,0px)}
.brand{font-family:var(--font-caps);font-size:1.15rem;letter-spacing:.05em;color:var(--fg);text-decoration:none}
.brand .tag-aion{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;color:var(--aether);margin-left:6px;text-transform:uppercase}
.account{display:flex;align-items:center;gap:10px;min-width:0}
.account img{width:30px;height:30px;border-radius:50%;border:1px solid var(--line)}
.account .who{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}
.btn-discord{background:#5865f2;border-color:#5865f2;color:#fff}
.btn-discord:hover{background:#6d78f5}

/* Hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:var(--abyss) url(/assets/atreia.webp) center 40%/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(240,200,105,.30) 0%,rgba(143,180,255,.10) 30%,rgba(11,13,23,.55) 50%,rgba(120,60,200,.22) 70%,rgba(185,139,255,.30) 100%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 34% 75% at 50% 55%,rgba(11,13,23,.82),rgba(11,13,23,.1) 100%),linear-gradient(to bottom,rgba(11,13,23,.15) 55%,var(--abyss))}
#motes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr minmax(0,1.3fr) 1fr;align-items:center;gap:16px;padding-block:44px 40px}
.faction{display:grid;justify-items:center;gap:6px;background:none;border:1px solid transparent;border-radius:var(--r);padding:12px 8px;cursor:pointer;transition:border-color .2s,background .2s}
.faction:hover{background:rgba(11,13,23,.35);border-color:rgba(255,255,255,.14)}
.faction[aria-pressed="true"]{border-color:currentColor;background:rgba(11,13,23,.45)}
.faction svg{width:min(190px,100%);height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}
.faction.elyos{color:var(--elyos)}
.faction.asmo{color:var(--asmo)}
.faction-name{font-family:var(--font-caps);font-size:1.45rem;letter-spacing:.06em;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.faction-sub{font-size:.85rem;color:var(--fg);font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.faction-hint{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hero-center{text-align:center;display:grid;gap:12px;justify-items:center}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--aether)}
h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.3rem,5.2vw,3.7rem);line-height:1.02;margin:0;text-wrap:balance;
  background:linear-gradient(90deg,var(--elyos-soft),#fff 50%,#dcc6ff);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.6))}
.lede{margin:0;max-width:36ch;color:var(--fg);text-wrap:balance;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:4px}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 18px;border:1px solid var(--line);background:var(--stone-2);cursor:pointer;font-weight:500;transition:background .15s,border-color .15s;text-decoration:none;color:var(--fg)}
.btn:hover{border-color:var(--muted)}
.btn.small{padding:5px 12px;font-size:.88rem}
.btn.primary{background:var(--aether);border-color:var(--aether);color:#06201c}
.btn.primary:hover{background:#7fe6d8}
.btn.ghost{background:transparent}
.btn.danger{border-color:var(--danger);color:var(--danger);background:transparent}
.btn.danger.armed{background:var(--danger);color:#2a0710}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Eigene Einträge */
.mine-bar{display:flex;flex-wrap:wrap;gap:10px;padding-block:16px 0}
.mine-item{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:var(--stone);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;flex:1 1 320px;min-width:0}
.mine-item .what{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mine-item b{font-family:var(--font-display);font-weight:400;font-size:1.1rem}
.mine-item .state{font-size:.85rem;color:var(--muted)}
.mine-item .state.bad{color:var(--warn)}
.mine-item .acts{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px}

/* Board */
.board{padding-block:24px 64px;display:grid;gap:18px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab{background:none;border:none;border-bottom:2px solid transparent;padding:10px 14px;cursor:pointer;font-family:var(--font-caps);font-size:1.15rem;letter-spacing:.04em;color:var(--muted);margin-bottom:-1px}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--aether)}
.tab .n{font-family:var(--font-mono);font-size:.75rem;margin-left:6px;color:var(--aether);font-variant-numeric:tabular-nums}
#tab-admin .n{color:var(--warn)}
#browse{display:grid;gap:16px}
.filters{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(5,minmax(0,1fr));gap:10px;align-items:end}
.field{display:grid;gap:4px;min-width:0}
.field>span,.legend{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.input{width:100%;background:var(--stone);border:1px solid var(--line);border-radius:8px;padding:9px 11px;min-width:0}
.input:focus{border-color:var(--aether);outline:none}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
select.input:disabled{opacity:.55}
.filter-row2{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{background:none;border:none;padding:6px 14px;cursor:pointer;color:var(--muted);font-size:.9rem}
.seg button[aria-pressed="true"]{background:var(--stone-2);color:var(--fg)}
.seg button[data-race="elyos"][aria-pressed="true"]{color:var(--elyos)}
.seg button[data-race="asmo"][aria-pressed="true"]{color:var(--asmo)}
.check{display:flex;gap:8px;align-items:center;cursor:pointer}
.check.small{font-size:.9rem;color:var(--muted)}
.result-line{margin-left:auto;color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.linkbtn{background:none;border:none;color:var(--aether);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:16px}
.card{position:relative;display:grid;gap:12px;align-content:start;padding:18px;border-radius:var(--r);background:var(--stone);border:1px solid var(--line);overflow:hidden;min-width:0}
.card::before{content:"";position:absolute;inset:0 0 auto;height:90px;pointer-events:none;opacity:.55}
.card[data-race="elyos"]::before{background:radial-gradient(ellipse 70% 100% at 0% 0%,rgba(240,200,105,.22),transparent 70%)}
.card[data-race="asmo"]::before{background:radial-gradient(ellipse 70% 100% at 0% 0%,rgba(185,139,255,.22),transparent 70%)}
.card.mine{border-color:var(--aether)}
.card-head{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center}
.crest{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor;background:var(--abyss);overflow:hidden}
.crest svg{width:36px;height:auto}
.crest img{width:38px;height:38px}
.crest.elyos{color:var(--elyos)} .crest.asmo{color:var(--asmo)}
.card h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.35rem;line-height:1.15;overflow-wrap:anywhere}
.meta{font-size:.85rem;color:var(--muted);overflow-wrap:anywhere}
.meta b{font-weight:500;color:var(--fg)}
.meta .elyos{color:var(--elyos)} .meta .asmo{color:var(--asmo)}
.pill{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.pill.open{color:var(--aether)} .pill.closed{color:var(--muted)} .pill.warn{color:var(--warn)}
.stats{position:relative;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.88rem}
.stat{display:grid;min-width:0}
.stat small{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stat span{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:.8rem;padding:2px 9px;border-radius:6px;background:var(--stone-2);color:var(--fg)}
.cls{font-size:.82rem;padding:2px 9px 2px 3px;border-radius:999px;border:1px solid var(--line);display:inline-flex;align-items:center;gap:6px;background:var(--abyss)}
.cls img{width:20px;height:20px}
.cls.tank{border-color:color-mix(in srgb,var(--tank) 45%,var(--line))}
.cls.dps{border-color:color-mix(in srgb,var(--dps) 45%,var(--line))}
.cls.heal{border-color:color-mix(in srgb,var(--heal) 45%,var(--line))}
.cls.support{border-color:color-mix(in srgb,var(--support) 45%,var(--line))}
.cls.all{padding-left:9px}
.desc{margin:0;color:var(--fg);opacity:.92;white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.desc.open{-webkit-line-clamp:unset;display:block}
.card-foot{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line)}
.contact{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;min-width:0;flex:1 1 200px}
.contact code{font-family:var(--font-mono);font-size:.8rem;background:var(--abyss);border:1px solid var(--line);border-radius:6px;padding:3px 8px;user-select:all;overflow-wrap:anywhere;min-width:0}
.contact .lbl{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.verified{color:#9aa3ff;font-size:.75rem}
.mini{background:none;border:1px solid var(--line);border-radius:6px;padding:3px 8px;font-size:.78rem;cursor:pointer;color:var(--muted)}
.mini:hover{color:var(--fg);border-color:var(--muted)}
.foot-r{display:flex;gap:8px;align-items:center}
.when{font-size:.78rem;color:var(--muted)}

.empty{border:1px dashed var(--line);border-radius:var(--r);padding:36px 20px;text-align:center;display:grid;gap:10px;justify-items:center}
.empty h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.4rem}
.empty p{margin:0;color:var(--muted);max-width:52ch}

/* Moderation */
.admin-list{display:grid;gap:12px}
.admin-row{display:grid;gap:8px;background:var(--stone);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.admin-row .acts{display:flex;flex-wrap:wrap;gap:8px}
.admin-row .why{font-size:.85rem;color:var(--warn)}
.admin-row p{margin:0;white-space:pre-line;overflow-wrap:anywhere;color:var(--muted)}

/* Dialoge */
dialog{width:min(680px,calc(100% - 24px));max-height:92dvh;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--stone);color:var(--fg)}
dialog::backdrop{background:rgba(5,6,12,.75);backdrop-filter:blur(3px)}
.dlg{display:grid;gap:16px;padding:22px}
.dlg h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.6rem}
.dlg .note{margin:-8px 0 0;color:var(--muted);font-size:.9rem}
.form-body{display:grid;gap:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.three{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:12px}
fieldset{border:none;margin:0;padding:0;display:grid;gap:6px;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.chip span img{width:20px;height:20px;margin-left:-5px}
.chip input:checked+span{border-color:var(--aether);color:var(--fg);background:rgba(99,217,201,.12)}
.chip input:focus-visible+span{outline:2px solid var(--aether);outline-offset:2px}
.race-hint{font-size:.85rem;color:var(--muted)}
.race-hint b.elyos{color:var(--elyos)} .race-hint b.asmo{color:var(--asmo)}
textarea.input{min-height:110px;resize:vertical}
.counter{font-size:.75rem;color:var(--muted);text-align:right;margin-top:-10px}
.dlg-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:16px}
.dlg-actions .right{display:flex;gap:10px;margin-left:auto}
.err{color:var(--danger);font-size:.9rem;margin:0}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--stone-2);border:1px solid var(--line);padding:10px 16px;border-radius:999px;box-shadow:0 8px 30px rgba(0,0,0,.4);z-index:20;max-width:calc(100% - 32px)}

.foot{border-top:1px solid var(--line);color:var(--muted);font-size:.82rem}
.foot-in{padding-block:20px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.foot-in p{margin:0;max-width:80ch}
.foot-links a{color:var(--muted)}

@media (max-width:1000px){
  .filters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .filters .field.search{grid-column:1/-1}
}
@media (max-width:720px){
  .hero-grid{grid-template-columns:1fr 1fr;grid-template-areas:"c c" "e a";padding-block:28px 22px}
  .hero-center{grid-area:c}
  .faction.elyos{grid-area:e} .faction.asmo{grid-area:a}
  .faction svg{width:min(120px,100%)}
  .filters{grid-template-columns:1fr 1fr}
  .two,.three{grid-template-columns:1fr}
  .result-line{margin-left:0}
  .account .who{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.head-text{min-width:0}
.admin-list.bans{margin-top:24px}
svg.defs{position:absolute;width:0;height:0}

/* Legionsbilder */
.card .banner{margin:-18px -18px 0;aspect-ratio:3/1;overflow:hidden;border-bottom:1px solid var(--line);background:var(--abyss)}
.card .banner img{width:100%;height:100%;object-fit:cover;display:block}
.card.has-banner::before{display:none}
.card.has-banner .crest{margin-top:-44px}
.card.has-banner .crest{width:64px;height:64px;box-shadow:0 0 0 4px var(--stone)}
.card.has-banner .card-head{grid-template-columns:64px minmax(0,1fr) auto;align-items:start}
.crest img.av{width:100%;height:100%;object-fit:cover}
.imgpick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;min-width:0}
.imgpick-text{display:grid;gap:4px;min-width:0}
.imgpick-text small{color:var(--muted);font-size:.8rem}
.imgpick-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.img-status{font-size:.8rem;color:var(--aether)}
.imgprev{display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);background:var(--abyss);color:var(--muted);font-size:.75rem}
.imgprev.avatar{width:64px;height:64px;border-radius:50%}
.imgprev.avatar.elyos{color:var(--elyos)} .imgprev.avatar.asmo{color:var(--asmo)}
.imgprev.avatar svg{width:46px;height:auto}
.imgprev.banner{width:96px;height:32px;border-radius:6px}
.imgprev img{width:100%;height:100%;object-fit:cover}
.admin-imgs{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.admin-imgs .a{width:56px;height:56px;border-radius:50%}
.admin-imgs .b{width:180px;max-width:100%;aspect-ratio:3/1;object-fit:cover;border-radius:6px}

/* Kopfleiste: Sprache, Hinweisbanner */
.top-right{display:flex;align-items:center;gap:10px;min-width:0}
.lang-pick{display:flex}
.input.small{padding:5px 26px 5px 9px;font-size:.88rem;width:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.announce{background:color-mix(in srgb,var(--aether) 16%,var(--abyss));border-bottom:1px solid color-mix(in srgb,var(--aether) 45%,var(--line))}
.announce.warn{background:color-mix(in srgb,var(--warn) 16%,var(--abyss));border-bottom-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.announce .wrap{padding-block:10px;display:grid;gap:4px}
.announce p{margin:0;white-space:pre-line}

/* Admin-Dashboard */
.admin-main{padding-block:20px 64px;display:grid;gap:18px}
.admin-tabs .tab{font-size:1rem}
.admin-tabs .n:empty{display:none}
#n-reports{color:var(--warn)}
.admin-grid{display:grid;gap:18px}
.admin-list{display:grid;gap:12px}
.panel{background:var(--stone);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:12px;min-width:0}
.panel h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.25rem}
.muted{color:var(--muted)} .small{font-size:.82rem}
p.muted{margin:0}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr));gap:12px}
.tile{background:var(--stone);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:2px}
.tile.warn{border-color:var(--warn)}
.tile-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tile b{font-family:var(--font-display);font-weight:400;font-size:2rem;font-variant-numeric:tabular-nums;line-height:1.1}
.tile small{color:var(--muted);font-size:.8rem}
.legend-row{display:flex;gap:16px;font-size:.85rem;color:var(--muted)}
.key{display:inline-flex;align-items:center;gap:6px}
.key::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
.key.legion,.seg-legion,.hbar.legion{--c:#2a9f91}
.key.player,.seg-player,.hbar.player{--c:#bf8530}
.bars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;align-items:end;height:180px;padding-top:18px;border-bottom:1px solid var(--line)}
.bar-col{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;outline-offset:2px}
.bar-stack{width:min(100%,26px);display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%}
.seg-legion,.seg-player{background:var(--c);height:calc(var(--h,0) * 100%);min-height:3px}
.bar-stack>:first-child{border-radius:4px 4px 0 0}
.bar-x{position:absolute;bottom:-20px;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.bar-v{font-size:.72rem;color:var(--fg);font-variant-numeric:tabular-nums;order:-1;margin-bottom:2px}
.bar-col:hover .bar-stack,.bar-col:focus .bar-stack{filter:brightness(1.2)}
.bars+*{margin-top:0}
.panel:has(.bars){padding-bottom:30px}
.table-wrap{overflow-x:auto;min-width:0}
table.data{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
table.data th,table.data td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.data thead th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
table.data td.acts{text-align:right;white-space:nowrap}
table.data td.acts .btn{margin-left:6px}
.hcell{display:flex;align-items:center;gap:8px;min-width:140px}
.hbar{height:10px;border-radius:0 4px 4px 0;background:var(--c);width:calc(var(--w,0) * 120px);min-width:2px}
.admin-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.admin-filters .field{flex:1 1 200px}
.admin-row{display:grid;gap:8px;background:var(--stone);border:1px solid var(--line);border-radius:var(--r);padding:14px;min-width:0}
.row-head{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:baseline}
.row-title{font-family:var(--font-display);font-weight:400;font-size:1.15rem}
.row-pills{display:flex;gap:6px;flex-wrap:wrap}
.row-desc{margin:0;white-space:pre-line;overflow-wrap:anywhere;color:var(--fg);opacity:.85;max-height:7.5em;overflow:auto}
.admin-row .acts{display:flex;flex-wrap:wrap;gap:8px}
.why{font-size:.85rem;color:var(--warn)}
.pill.ok{color:var(--aether)} .pill.muted{color:var(--muted)}
ul.plain{list-style:none;margin:0;padding:0;display:grid;gap:6px}
ul.plain li{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.form-actions{display:flex;justify-content:flex-end}
.field.narrow{max-width:260px}
.field small{font-size:.78rem}
.panel textarea.input{min-height:90px}

/* Merken, Verifiziert, Links, Zusatzangaben */
.head-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.star{background:none;border:none;color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer;padding:2px 4px}
.star.on{color:var(--elyos)}
.star:hover{color:var(--elyos-soft)}
.verified{display:inline-block;font-size:.72rem;letter-spacing:.06em;color:var(--aether);border:1px solid color-mix(in srgb,var(--aether) 50%,var(--line));border-radius:999px;padding:1px 8px;margin:2px 0}
.title-link{color:inherit;text-decoration:none}
.title-link:hover{text-decoration:underline;text-underline-offset:3px}
.links{display:flex;flex-wrap:wrap;gap:6px}
.link-pill{font-size:.8rem;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--fg);text-decoration:none;background:var(--abyss)}
.link-pill:hover{border-color:var(--muted)}
.link-pill.discord{border-color:color-mix(in srgb,#5865f2 60%,var(--line))}
.facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.85rem;color:var(--muted)}
.facts b{color:var(--fg);font-weight:500}
.card-acts{display:flex;gap:8px;flex-wrap:wrap}
.schedule{display:grid;gap:4px;font-size:.9rem}
.sched-row{display:grid;grid-template-columns:3.2em 3.6em minmax(0,1fr);gap:8px;padding:4px 0;border-bottom:1px solid var(--line)}
.sched-time{font-variant-numeric:tabular-nums;color:var(--aether)}
.sched-edit{display:grid;gap:6px}
.sched-edit-row{display:grid;grid-template-columns:3em 7.5em minmax(0,1fr);gap:8px;align-items:center}
.sched-day{color:var(--muted);font-size:.9rem}
details.more{border:1px solid var(--line);border-radius:8px;padding:8px 12px;display:grid;gap:10px}
details.more[open]{padding-bottom:12px}
details.more summary{cursor:pointer;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
details.more>*+*{margin-top:8px}

/* Detailansicht einer Legion */
dialog.wide{width:min(860px,calc(100% - 24px))}
.legion-detail{padding:0;gap:0;overflow:hidden}
.ld-banner{aspect-ratio:3/1;max-width:100%;overflow:hidden;background:var(--abyss)}
.ld-banner img{width:100%;height:100%;object-fit:cover;display:block}
.ld-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px 22px 6px}
.ld-head.over .crest.big{margin-top:-52px;box-shadow:0 0 0 5px var(--stone)}
.ld-head h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.8rem;line-height:1.1;overflow-wrap:anywhere}
.crest.big{width:88px;height:88px}
.crest.big svg{width:64px}
.ld-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;padding:12px 22px 4px}
.ld-main,.ld-side{display:grid;gap:10px;align-content:start;min-width:0}
.ld-desc{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.ld-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;margin:0;font-size:.9rem}
.ld-facts dt{color:var(--muted)}
.ld-facts dd{margin:0;overflow-wrap:anywhere}
.legion-detail .dlg-actions{padding:14px 22px 20px;margin-top:10px}
.share{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.share code{font-family:var(--font-mono);font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}

/* Bewerbungen */
.inbox-btn{position:relative}
.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--warn);color:#2a1a02;font-size:.72rem;font-weight:700}
.inbox{display:grid;gap:18px}
.inbox h3{margin:0 0 8px;font-family:var(--font-display);font-weight:400;font-size:1.15rem}
.inbox section{display:grid;gap:10px}
.app-row{display:grid;gap:8px;background:var(--abyss);border:1px solid var(--line);border-radius:var(--r);padding:12px;min-width:0}
.app-row .acts{display:flex;gap:8px;flex-wrap:wrap}
.app-msg{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.ok-note{margin:0;color:var(--aether)}

/* Passende Treffer */
.matches{display:grid;gap:12px;padding-block:14px 0}
.match-group{background:var(--stone);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:grid;gap:10px}
.match-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.match-head h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.1rem}
.match-head .n{font-family:var(--font-mono);font-size:.8rem;color:var(--aether)}
.match-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:8px}
.match{display:flex;gap:10px;align-items:center;text-align:left;background:var(--abyss);border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer;min-width:0}
.match:hover{border-color:var(--muted)}
.match-text{display:grid;min-width:0}
.match-text b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match-text small{color:var(--muted)}
.crest.small{width:34px;height:34px;flex:none}
.crest.small img{width:24px;height:24px}
.crest.small img.av{width:100%;height:100%}
.crest.small svg{width:26px}

/* Öffentliche Statistik */
#stats{display:grid;gap:18px}
.cmp{display:grid;gap:10px}
.cmp-row{display:grid;grid-template-columns:minmax(110px,170px) minmax(0,1fr);gap:12px;align-items:center;outline-offset:2px}
.cmp-label{display:flex;gap:8px;align-items:center;font-size:.9rem}
.cmp-label img{width:22px;height:22px}
.cmp-bars{display:grid;gap:2px}
.cmp-bar{height:12px;background:var(--c);border-radius:0 4px 4px 0;width:calc(var(--w,0) * (100% - 40px));min-width:2px;position:relative}
.cmp-bar span{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);font-size:.75rem;color:var(--fg);font-variant-numeric:tabular-nums}
.cmp-bar.legion{--c:#2a9f91}
.cmp-bar.player{--c:#bf8530}
.cmp-row:hover .cmp-bar,.cmp-row:focus .cmp-bar{filter:brightness(1.2)}
.race-dot{font-size:.75rem}
.race-dot.elyos{color:var(--elyos)} .race-dot.asmo{color:var(--asmo)}
#stats .panel{background:var(--stone)}

@media (max-width:720px){
  .ld-grid{grid-template-columns:1fr}
  .ld-head{grid-template-columns:auto minmax(0,1fr)}
  .ld-head .star{grid-column:2;justify-self:end}
  .sched-edit-row{grid-template-columns:2.6em 6.5em minmax(0,1fr)}
  .cmp-row{grid-template-columns:1fr}
}

/* Kopfleiste auf schmalen Bildschirmen umbrechen */
@media (max-width:720px){
  .topbar-in{flex-wrap:wrap;padding-block:8px;gap:8px}
  .top-right{flex-wrap:wrap;justify-content:flex-end;flex:1 1 auto}
  .account{flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .account img{display:none}
  .brand .tag-aion{display:none}
}

/* Ganze Karte öffnet das Detailfenster */
.card.clickable{cursor:pointer;transition:border-color .15s,transform .15s}
.card.clickable:hover{border-color:var(--muted)}
.card.clickable.mine:hover{border-color:var(--aether)}
.card.clickable:focus-visible{outline:2px solid var(--aether);outline-offset:2px}
.card code,.card .contact{cursor:auto}
@media (prefers-reduced-motion:no-preference){.card.clickable:hover{transform:translateY(-1px)}}

/* Formatierte Beschreibungen */
.md{display:grid;gap:6px;overflow-wrap:anywhere}
.md p,.md ul{margin:0}
.md ul{padding-left:1.2em;display:grid;gap:2px}
.md strong{color:var(--fg);font-weight:700}
.md.desc{max-height:7.6em;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent);opacity:.92}
.md.ld-desc{white-space:normal}
.form-hint{display:flex;justify-content:space-between;gap:10px;margin-top:-8px}
.form-hint .counter{margin:0}

/* Abzeichen */
.badges{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0}
.badge-new{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;background:var(--aether);color:#06201c;border-radius:4px;padding:1px 6px}
.flag{font-size:.72rem;border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--muted)}
.flag.beginner{color:var(--heal);border-color:color-mix(in srgb,var(--heal) 45%,var(--line))}
.flag.alliance{color:var(--elyos-soft);border-color:color-mix(in srgb,var(--elyos) 45%,var(--line))}
.badges .verified{margin:0}
.cls.full{opacity:.55;text-decoration:line-through}
.alliance-note{margin:0;font-size:.92rem}

/* Sortieren, Nachladen, Serverkopf */
.sort-pick{margin-left:auto}
.result-line{margin-left:0}
.more-wrap{display:flex;justify-content:center;padding-top:8px}
.cta.left{justify-content:flex-start;margin-bottom:14px}
.server-head{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;background:var(--stone);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.server-head h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.4rem}

/* Gruppensuche */
.group-card{cursor:default}
.group-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.act-badge{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:4px;background:var(--stone-2);color:var(--aether)}
.act-raid,.act-festung{color:var(--elyos)} .act-pvp,.act-abyss{color:var(--asmo)}
.group-when{font-variant-numeric:tabular-nums;font-weight:500}
.group-note{margin:0;white-space:pre-line;overflow-wrap:anywhere;color:var(--fg);opacity:.9}
.group-joins{display:grid;gap:6px}
.group-joins small{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.group-joins .tag{display:inline-flex;gap:4px;align-items:center}
.group-joins .tag img{width:16px;height:16px}

/* Verfügbarkeit, Klassenverteilung, Twinks */
.avail{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:3px;font-size:.78rem;max-width:420px}
.avail-h{color:var(--muted);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avail-d{color:var(--muted);padding-right:6px}
.avail-c{height:20px;border-radius:4px;background:var(--abyss);border:1px solid var(--line)}
.avail-c.on{background:color-mix(in srgb,var(--aether) 55%,var(--abyss));border-color:var(--aether)}
.avail.edit .avail-c{position:relative;display:block;height:28px;cursor:pointer}
.avail.edit .avail-c input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.avail.edit .avail-c span{position:absolute;inset:0;border-radius:3px}
.avail.edit .avail-c input:checked+span{background:color-mix(in srgb,var(--aether) 55%,var(--abyss))}
.avail.edit .avail-c input:focus-visible+span{outline:2px solid var(--aether)}
.roster{display:grid;gap:4px}
.roster-row{display:flex;gap:10px;align-items:center}
.roster-row.full .roster-n{color:var(--muted)}
.roster-n{font-variant-numeric:tabular-nums}
.roster-edit{display:grid;grid-template-columns:minmax(0,1fr) 5.5em 5.5em;gap:6px;align-items:center}
.alts{display:grid;gap:6px}
.alt{display:flex;gap:8px;align-items:center}
.alts-edit{display:grid;gap:6px;margin-bottom:6px}
.alt-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.8fr);gap:6px}
.checks{display:flex;flex-wrap:wrap;gap:8px 18px}
textarea.input.short{min-height:64px}

/* Galerie */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:8px}
.gal-thumb{padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:zoom-in;background:var(--abyss);aspect-ratio:16/10}
.gal-thumb img,.gal-item img{width:100%;height:100%;object-fit:cover;display:block}
.gal-item{display:grid;gap:4px}
.gal-item img{aspect-ratio:16/10;border-radius:8px;border:1px solid var(--line)}
dialog.lightbox{width:auto;max-width:calc(100% - 24px);background:var(--abyss);padding:8px;display:none}
dialog.lightbox[open]{display:grid;gap:8px;justify-items:end}
dialog.lightbox img{max-width:min(1280px,100%);max-height:80dvh;border-radius:8px}

/* Verwalten, Posteingang, Daten */
.manage{display:grid;gap:14px}
.manage .panel{background:var(--abyss)}
.manage h3,.push-box h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.1rem}
.push-box{display:grid;gap:6px;background:var(--abyss);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.push-box .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tiles.small{grid-template-columns:repeat(auto-fill,minmax(min(130px,100%),1fr))}
.tiles.small .tile b{font-size:1.5rem}
.mini-chart{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;height:90px;align-items:end;border-bottom:1px solid var(--line)}
.mc-col{display:flex;gap:2px;align-items:flex-end;height:100%;justify-content:center;outline-offset:2px}
.mc-bar{width:min(45%,10px);height:calc(var(--h,0) * 100%);min-height:2px;border-radius:3px 3px 0 0;background:var(--c)}
.mc-bar.views,.key.views{--c:#2a9f91}
.mc-bar.apps,.key.apps{--c:#bf8530}
.mc-col:hover .mc-bar,.mc-col:focus .mc-bar{filter:brightness(1.25)}
.answers{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin:0;font-size:.9rem}
.answers dt{color:var(--muted);font-size:.8rem}
.answers dd{margin:0 0 6px;white-space:pre-line;overflow-wrap:anywhere}
.reply-note{margin:0;font-size:.9rem}
dialog hr{border:none;border-top:1px solid var(--line);margin:4px 0}

@media (max-width:720px){
  .sort-pick{margin-left:0}
  .roster-edit{grid-template-columns:minmax(0,1fr) 4.5em 4.5em}
  .alt-row{grid-template-columns:1fr 1fr}
  .alt-row input[type=number]{grid-column:1/-1}
}