:root{
  --page:#0A100F; --panel:#101817; --raised:#16201F; --hover:#1C2827;
  --line:rgba(255,255,255,.07);
  --tq:#24A7A1; --tq-hi:#4FD4CD; --tq-text:#57D9D2; --tq-tint:rgba(36,167,161,.12);
  --or:#FF9810; --or-hi:#FFAA33;
  --tx:#E6EDEC; --mut:#7C918F;
  --ok:#5FBF6A; --bad:#D9534F;
  --r-s:6px; --r-m:10px; --head:64px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--tx);font:15px/1.55 Inter,system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}
svg,img{display:block;flex:0 0 auto;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,.money,.stat__v,.row__name,.brand__name{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.02em}
.money,.stat__v,.row__qty,dd{font-variant-numeric:tabular-nums}
.money{color:var(--or);font-weight:600}
.money--gross{color:var(--or-hi);font-size:28px}
.muted{color:var(--mut)}
.klein{font-size:13px}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--tq);outline-offset:2px;border-radius:var(--r-s)}

/* Kopfleiste */
.appbar{position:sticky;top:0;z-index:40;height:var(--head);background:var(--page);border-bottom:1px solid var(--line)}
.appbar__inner{max-width:1440px;margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand__logo{height:36px;width:auto}
.brand__name{font-size:17px;font-weight:600}
.brand__sub{font-size:13px;color:var(--mut)}
.nav{display:flex;gap:4px;margin:0 auto}
.nav__link{padding:8px 14px;border-radius:var(--r-s);color:var(--mut);font-size:15px;transition:all .14s ease-out}
.nav__link:hover{color:var(--tx);background:var(--hover)}
.nav__link.is-active{color:var(--tq-text);background:var(--tq-tint);font-weight:600}
.appbar__right{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.who{display:flex;align-items:center;gap:8px}
.who__head{border-radius:var(--r-s)}

/* Grundgerüst */
.wrap{flex:1 1 auto;max-width:1440px;width:100%;margin:0 auto;padding:24px 32px 64px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:24px;margin-bottom:24px}
.schmal{max-width:640px}
.mitte{margin-left:auto;margin-right:auto}
.h1{margin:0 0 6px;font-size:26px;font-weight:600}
.h2{margin:0 0 14px;font-size:20px;font-weight:600}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.col__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.zurueck{display:inline-block;margin-bottom:16px;color:var(--tq-text);font-size:13px}
.hinweis{margin:0 0 20px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-s);color:var(--mut);font-size:14px}
.fehler{margin:0 0 16px;padding:10px 14px;border:1px solid rgba(217,83,79,.4);border-radius:var(--r-s);color:var(--bad);font-size:14px}
.ok{margin:0 0 16px;color:var(--tq-text);font-size:14px}
.trefferzeile{margin:0 0 12px;font-size:13px}

/* Kennzahlen */
.stats{display:flex;gap:32px;margin-bottom:20px}
.stat{display:flex;flex-direction:column;gap:2px}
.stat__v{font-size:24px;font-weight:600}
.stat__l{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}

/* Listen */
.list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.row+.row{border-top:1px solid var(--line)}
.row__link{display:grid;grid-template-columns:1fr 90px 170px 160px;gap:16px;align-items:center;min-height:52px;padding:8px 16px;border-left:2px solid transparent;transition:background .14s ease-out,border-color .14s ease-out}
a.row__link:hover{background:var(--hover);border-left-color:var(--tq)}
.row__main{display:flex;align-items:center;gap:12px;min-width:0}
.row__name{font-size:17px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row__qty{text-align:right;color:var(--mut)}
.row__price,.row__by{display:flex;flex-direction:column;gap:2px;text-align:right}
.row__by{align-items:flex-end}
.row__sub{font-size:12px;color:var(--mut)}
.slot{width:36px;height:36px;flex:0 0 auto;padding:3px;border:1px solid var(--line);border-radius:var(--r-s);background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 4px,transparent 4px 8px),var(--raised);display:grid;place-items:center;font:600 14px/1 "Space Grotesk",sans-serif;color:var(--mut)}
.slot img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.dev{font-size:12px;padding:1px 6px;border-radius:var(--r-s)}
.dev--up{color:var(--bad);background:rgba(217,83,79,.12)}
.dev--down{color:var(--ok);background:rgba(95,191,106,.12)}
.empty{padding:40px 16px;text-align:center}

/* Marken */
.pill{display:inline-block;padding:3px 10px;border-radius:var(--r-s);font-size:12px;font-weight:600}
.pill--open{background:var(--tq-tint);color:var(--tq-text)}
.pill--done{background:rgba(95,191,106,.12);color:var(--ok)}
.pill--off{background:rgba(217,83,79,.12);color:var(--bad)}

/* Formulare */
.feld{width:100%;padding:10px 12px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-s);resize:vertical}
.feld:focus{outline:none;border-color:var(--tq);box-shadow:0 0 0 2px rgba(36,167,161,.35)}
.feld--kurz{width:110px}
.feld--breit{min-width:220px}
.feldblock{display:block;margin-bottom:16px}
.feldblock>span{display:block;margin-bottom:6px;font-size:13px;color:var(--mut)}
.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formular{margin-top:16px}
.btn{display:inline-block;padding:11px 22px;background:var(--tq);color:var(--page);font-weight:600;border-radius:var(--r-s);transition:background .14s ease-out}
.btn:hover{background:var(--tq-hi)}
.btn:disabled{opacity:.55;cursor:default}
.btn--sm{padding:7px 14px;font-size:14px}
.btn--still{background:none;border:1px solid var(--line);color:var(--mut)}
.btn--still:hover{background:var(--hover);color:var(--tx)}
.linkbtn{color:var(--tq-text);font-size:13px}
.linkbtn:hover{color:var(--tq-hi)}
.segmented{display:flex;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;margin-bottom:20px;width:fit-content}
.segmented__btn{padding:9px 18px;color:var(--mut);cursor:pointer}
.segmented__btn+.segmented__btn{border-left:1px solid var(--line)}
.segmented__btn input{display:none}
.segmented__btn:has(input:checked){background:var(--tq-tint);color:var(--tq-text);font-weight:600}
.vorschau{margin:0 0 16px;color:var(--mut);font-size:14px;min-height:20px}

/* Detail */
.detail__kopf{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.detail__kopf .slot{width:52px;height:52px}
.detail__kopf .pill{margin-left:auto}
.werte{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin:0 0 20px}
.werte div{border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px}
.werte dt{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin-bottom:4px}
.werte dd{margin:0;font-size:18px;font-family:"Space Grotesk",sans-serif}
.notiz{margin:0 0 20px;padding:12px 16px;background:var(--raised);border-radius:var(--r-s);color:var(--mut)}
.detail__fuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.detail__fuss form{display:flex;align-items:center;gap:8px}

/* Chat */
.chat__liste{list-style:none;margin:0 0 16px;padding:0;max-height:420px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.chat__m{padding:10px 14px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-s);max-width:75%}
.chat__m--ich{align-self:flex-end;background:var(--tq-tint);border-color:transparent}
.chat__wer{display:block;font-size:12px;color:var(--mut);margin-bottom:2px}
.chat__zeit{display:block;font-size:11px;color:var(--mut);margin-top:4px}
.chat__form{display:flex;gap:8px}

/* Profil, Portfolio, Login */
.profil{display:flex;align-items:center;gap:24px}
.profil__head{border-radius:var(--r-m);border:1px solid var(--line)}
.ruf{margin:8px 0 0;color:var(--mut);font-size:14px}
.gesamt{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.befehl{display:flex;align-items:center;gap:12px;margin:16px 0;padding:14px 16px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-s)}
.befehl code{font-family:"Space Grotesk",monospace;font-size:17px;color:var(--tq-text);flex:1 1 auto;word-break:break-all}
.warten{color:var(--mut);font-size:14px}

/* Fuss */
.footer{border-top:1px solid var(--line);margin-top:auto}
.footer__inner{max-width:1440px;margin:0 auto;padding:20px 32px;display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--mut);flex-wrap:wrap}
.footer__links{display:flex;gap:16px}
.footer a:hover{color:var(--tx)}

@media (max-width:1023px){
  .zwei,.zweispalt{grid-template-columns:1fr}
  .nav{margin:0;overflow-x:auto}
  .row__link{grid-template-columns:1fr 70px 130px}
  .row__by{display:none}
}
@media (max-width:719px){
  .appbar{height:auto}
  .appbar__inner{flex-wrap:wrap;padding:10px 16px;gap:10px}
  .wrap,.footer__inner{padding-left:16px;padding-right:16px}
  .row__link{grid-template-columns:1fr auto}
  .row__qty{display:none}
  .profil{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Ablaufuhr auf der Anmeldeseite */
.uhr{height:4px;background:var(--raised);border-radius:var(--r-s);overflow:hidden;margin:14px 0 8px}
.uhr__balken{height:100%;width:100%;background:var(--tq);transition:width 1s linear}

/* Premium, Maparts, Rechtstexte, Discord */
.prem{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r-s);font-size:11px;font-weight:600;background:rgba(255,152,16,.14);color:var(--or)}
.row--premium{background:linear-gradient(90deg,rgba(255,152,16,.05),transparent 40%)}
.vorteile{margin:16px 0 20px;padding-left:20px;color:var(--mut);line-height:2}
.vorteile strong{color:var(--tx)}
.rechtstext{color:var(--mut);line-height:1.7}
.rechtstext .h2{margin-top:22px;color:var(--tx)}
.rechtstext code{background:var(--raised);padding:1px 5px;border-radius:4px;color:var(--tq-text)}
.mapartliste{list-style:none;margin:16px 0 24px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.mapart{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--panel)}
.mapart.is-mein{border-color:var(--tq)}
.mapart__bild{width:100%;aspect-ratio:1;object-fit:cover;image-rendering:pixelated;display:block}
.mapart__bild--leer{background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 6px,transparent 6px 12px),var(--raised)}
.mapart__fuss{padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.mapart__name{font-size:14px}
.trenner{display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:var(--mut);font-size:13px}
.trenner::before,.trenner::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.btn--discord{background:#5865F2;color:#fff}
.btn--discord:hover{background:#4752c4}
.marktkopf{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.marktkopf .trefferzeile{margin:0}