/* MM2 Market — dunkles Grundthema, Seltenheitsfarben als Ordnungssystem */
/* Moonly - Nachtthema. Tiefes Indigo als Grund, Mondlicht als Akzent,
   Seltenheitsfarben unveraendert: die sind ein Ordnungssystem aus dem Spiel
   und nicht meine Gestaltung. */
:root{
  --ground:#0f0f11; --surface:#18191b; --surface-2:#212327; --surface-3:#2c2d32;
  --hairline:#2f3137; --hairline-2:#40434a;
  --ink:#e8f3ff; --ink-2:#b1b6bb; --ink-3:#494c54;

  /* Mondlicht: kuehles Violett fuers Handeln, warmes Gelb fuer den Mond selbst */
  --accent:#a6d1fe; --accent-ink:#18191b; --mond:#ffe4a8;
  --good:#4fd39a; --warn:#ffc45e; --bad:#ff6b7a;

  /* Farben nach der MM2-Rangfolge: Grau/Hellblau/Gruen/Rot/Pink/Gelb/Lila/Orange */
  --r-common:#9aa7b4; --r-uncommon:#55afeb; --r-rare:#3cc850; --r-legendary:#e63c3c;
  --r-godly:#e91e8c; --r-classic:#f0d73c; --r-ancient:#9650e6; --r-unique:#f5911e;
  --r-chroma:#5ee8d8;
  /* Vintage ist Gold - vom Besitzer angesagt, nicht geraten. Bewusst tiefer
     und waermer als --r-classic (#f0d73c): das ist ein helles Zitronengelb,
     und zwei Stufen, die man nebeneinander nicht auseinanderhaelt, sind
     dasselbe wie keine Farbe. */
  --r-vintage:#d4af37;
  /* Evo gibt es in MM2 gar nicht zum Handeln. Die Stufe steht nur deshalb in
     RASTER_REIHENFOLGE (app/main.py), und die ist Bot-Logik - dort etwas zu
     streichen kostet mehr, als es einbringt. Eine eigene Farbe bekommt sie
     trotzdem: ohne sie faellt sie auf Grau zurueck und ist von 'common' nicht
     zu unterscheiden. Taucht hier jemals eine Kachel auf, soll das auffallen. */
  --r-evo:#7a6f9c;

  /* Diese vier wurden im Stylesheet benutzt, aber nie definiert - Auswahl-
     leiste und Filterspalte standen dadurch ohne Hintergrund und Rand da. */
  --card:var(--surface); --line:var(--hairline); --muted:var(--ink-2);
  --mono:"Nunito",system-ui,sans-serif;
  --rot:var(--bad); --gelb:var(--warn);

  --r:12px;
  --shadow:0 1px 2px rgba(17,18,20,.6), 0 18px 40px -24px rgba(17,18,20,.95);
  --schein:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),
           0 8px 30px -10px color-mix(in srgb,var(--accent) 55%,transparent);
}
*{box-sizing:border-box}
/* `hidden` muss hidden bedeuten.
   Jedes `display:` in einer Klassenregel gewinnt sonst gegen das Attribut.
   Das ist hier so oft passiert, dass sieben Einzelregeln dagegen im
   Stylesheet stehen - Chatfenster, Muenzkacheln, Spaltenkoepfe, zuletzt die
   Emoji-Auswahl, die im Gespraech dauerhaft aufgeklappt war. Einmal fuer
   alle ist besser als beim naechsten Mal wieder einzeln. */
[hidden]{display:none !important}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:15.5px;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:"Chakra Petch",Barlow,sans-serif; letter-spacing:-.01em; margin:0}
h1{font-size:clamp(26px,3.6vw,36px); font-weight:700}
h2{font-size:19px; font-weight:600}
.mono{font-family:"Nunito",system-ui,sans-serif; font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.small{font-size:13px}

/* Navigation */
nav{
  position:sticky; top:0; z-index:20; background:rgba(7,7,8,.9);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--hairline);
}
nav .inner{max-width:1180px; margin:0 auto; padding:12px 18px;
  display:flex; align-items:center; gap:22px}
.brand{font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:18px;
  letter-spacing:.02em; display:flex; align-items:center; gap:9px}
.brand .mark{width:9px; height:20px; background:var(--accent); border-radius:2px;
  transform:skewX(-14deg)}
nav a.link{color:var(--ink-2); font-weight:500; font-size:14.5px}
nav a.link:hover,nav a.link.on{color:var(--ink)}
nav .spacer{flex:1}

main{max-width:1180px; margin:0 auto; padding:26px 18px 70px;
  display:flex; flex-direction:column; gap:20px}

/* Bausteine */
.card{background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r); padding:18px; box-shadow:var(--shadow)}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.grid{display:grid; gap:13px}
.cols{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:15px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 16px; border-radius:8px; border:1px solid var(--hairline-2);
  background:var(--surface-2); color:var(--ink); font:inherit; font-weight:600;
  font-size:14px; cursor:pointer; transition:filter .12s, border-color .12s;
}
.btn:hover{filter:brightness(1.18)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad); border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.btn:disabled{opacity:.45; cursor:not-allowed}

input,select{
  padding:9px 12px; border-radius:8px; border:1px solid var(--hairline-2);
  background:var(--surface-2); color:var(--ink); font:inherit; font-size:14px;
}
input:focus,select:focus{outline:2px solid var(--accent); outline-offset:1px}
label{font-size:12px; color:var(--ink-3); text-transform:uppercase;
  letter-spacing:.08em; font-weight:600}

/* Seltenheit */
.rar{--c:var(--r-common)}
.rar-common{--c:var(--r-common)} .rar-uncommon{--c:var(--r-uncommon)}
.rar-rare{--c:var(--r-rare)} .rar-legendary{--c:var(--r-legendary)}
.rar-unique{--c:var(--r-unique)} .rar-godly{--c:var(--r-godly)}
.rar-classic{--c:var(--r-classic)}
.rar-ancient{--c:var(--r-ancient)} .rar-chroma{--c:var(--r-chroma)}
.tag{
  display:inline-block; padding:2px 8px; border-radius:5px; font-size:10.5px;
  font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--c); border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  background:color-mix(in srgb,var(--c) 12%,transparent);
}

/* Itemkachel */
.item{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; min-width:0;
}
.item .top{height:3px; background:var(--c)}

/* Bildflaeche der Itemkarte. Die Kachel kommt entweder als Ausschnitt aus dem
   Spiel oder als neutraler Platzhalter - beide sind quadratisch, deshalb
   contain statt cover: lieber Rand als abgeschnittenes Item. */
.item .bild{display:flex; align-items:center; justify-content:center;
  height:96px; background:#222427; border-bottom:1px solid var(--line)}
.item .bild img{max-height:82px; max-width:82px; object-fit:contain;
  image-rendering:auto}
.item .body{padding:13px 14px; display:flex; flex-direction:column; gap:7px; flex:1}
.item .nm{font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:15.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.item .price{font-family:var(--mono); font-size:19px; font-weight:600;
  color:var(--accent)}
.item .foot{padding:11px 14px; border-top:1px solid var(--hairline);
  background:var(--surface-2); display:flex; align-items:center; gap:9px;
  justify-content:space-between}

/* Ablaufschritte */
.steps{counter-reset:s; display:flex; flex-direction:column; gap:11px}
.step{display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:start}
.step .n{
  width:26px; height:26px; border-radius:50%; background:var(--surface-3);
  color:var(--ink-2); display:grid; place-items:center; font-size:12.5px;
  font-weight:700; font-family:var(--mono);
}
.step.on .n{background:var(--accent); color:var(--accent-ink)}
.step.done .n{background:color-mix(in srgb,var(--good) 25%,transparent); color:var(--good)}

.code{
  font-family:var(--mono); font-size:19px; letter-spacing:.06em;
  background:var(--surface-3); padding:11px 15px; border-radius:8px;
  border:1px dashed var(--hairline-2); display:inline-block; color:var(--accent);
  user-select:all;
}
.notice{padding:11px 14px; border-radius:8px; font-size:14px;
  border:1px solid var(--hairline-2); background:var(--surface-2)}
.notice.bad{color:var(--bad); border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.notice.ok{color:var(--good); border-color:color-mix(in srgb,var(--good) 40%,transparent)}

table{width:100%; border-collapse:collapse; font-size:14.5px}
th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--hairline)}
th{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3)}
tbody tr:last-child td{border-bottom:none}
.tablewrap{overflow-x:auto}

.empty{padding:38px 20px; text-align:center; color:var(--ink-2);
  border:1px dashed var(--hairline-2); border-radius:var(--r); background:var(--surface)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ---------- Verkaufen: Raster links, Auswahl rechts ---------- */
.verkauf-flaeche{display:flex; gap:18px; align-items:flex-start}
@media (max-width: 900px){ .verkauf-flaeche{flex-direction:column} }

.item.waehlbar{cursor:pointer; position:relative; user-select:none;
  transition:transform .08s ease, box-shadow .12s ease}
.item.waehlbar:hover{transform:none}
.item.waehlbar:focus-visible{outline:2px solid var(--c); outline-offset:2px}
.item.waehlbar .haken{position:absolute; top:8px; right:8px; width:22px;
  height:22px; border-radius:50%; background:var(--c); color:#1c1d20;
  display:none; align-items:center; justify-content:center; font-size:13px;
  font-weight:700}
.item.waehlbar.gewaehlt{box-shadow:0 0 0 2px var(--c) inset}
.item.waehlbar.gewaehlt .haken{display:flex}
.item .menge{position:absolute; top:8px; left:8px; background:#0d0d10cc;
  border:1px solid var(--line); border-radius:6px; padding:1px 6px;
  font-size:11px; font-family:var(--mono, monospace)}

/* Die Auswahl bleibt beim Scrollen stehen - bei zwanzig Posten sonst
   staendiges Hoch und Runter zwischen Karte und Preisfeld. */
/* Muss VOR .auswahl stehen bzw. spezifischer sein: das hidden-Attribut
   setzt display:none, aber .auswahl{display:flex} gewinnt sonst und die
   leere Leiste bleibt sichtbar. */
.auswahl[hidden]{display:none}
.auswahl{position:sticky; top:14px; width:330px; flex:none;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  display:flex; flex-direction:column; max-height:calc(100vh - 28px)}
@media (max-width: 900px){ .auswahl{width:100%; position:static; max-height:none} }
.auswahl-kopf{display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; border-bottom:1px solid var(--line)}
#auswahl-liste{overflow-y:auto; padding:6px 10px; flex:1}
.auswahl-fuss{padding:12px 14px; border-top:1px solid var(--line)}
.posten{display:flex; gap:9px; padding:9px 4px; border-bottom:1px solid var(--hairline)}
.posten:last-child{border-bottom:none}
.posten img{width:38px; height:38px; object-fit:contain; border-radius:6px;
  background:#222427; flex:none}
.posten .felder{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px}
.posten .zeile{display:flex; gap:6px; align-items:center}
.posten input{width:100%; min-width:0}
.posten .weg{background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:16px; line-height:1; padding:2px 4px}
.posten .weg:hover{color:var(--rot, #e05561)}
.posten .hinweis{font-size:11px; color:var(--muted)}


/* ---------- Marktplatz: Filter links, Ergebnisse rechts ---------- */
.marktflaeche{display:flex; gap:18px; align-items:flex-start; margin-top:14px}
/* align-items:flex-start richtet in der Spaltenrichtung QUER aus - die
   Ergebnisspalte schrumpfte damit auf ihre Inhaltsbreite, und aus dem
   Raster wurde unter 860 px eine einzige Kachelspalte. */
@media (max-width: 860px){
  .marktflaeche{flex-direction:column; align-items:stretch}
}

.filter{width:238px; flex:none; position:sticky; top:14px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:12px 13px; display:flex; flex-direction:column; gap:4px}
@media (max-width: 860px){ .filter{width:100%; position:static} }
.filter-kopf{display:flex; justify-content:space-between; align-items:center;
  margin-bottom:6px}
.filter-titel{display:block; font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; color:var(--muted); margin:12px 0 5px}
.filter input[type=text], .filter input:not([type]){width:100%}
.filterliste{display:flex; flex-direction:column; gap:1px}
.filterzeile{display:flex; align-items:center; gap:8px; padding:5px 6px;
  border-radius:7px; cursor:pointer; font-size:13px}
.filterzeile:hover{background:#ffffff0d}
.filterzeile input{margin:0; accent-color:var(--c, #f0b232)}
/* Farbpunkt in der Seltenheitsfarbe - dieselbe Zuordnung wie auf den Karten,
   damit man die Stufe wiedererkennt statt sie zu lesen. */
.filterzeile .punkt{width:9px; height:9px; border-radius:50%;
  background:var(--c); flex:none}


/* ================= Moonly: Nachthimmel und Bewegung ================= */

/* Sternenfeld und Mondschein.
   Beides sind Farbverlaeufe, keine Bilder: nichts nachzuladen, beliebig
   scharf auf jedem Bildschirm, und es kostet kein Kilobyte. Die Ebene liegt
   fest hinter allem und scrollt nicht mit - so wirkt der Himmel weit statt
   wie eine mitlaufende Tapete. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%, #ffffffcc, transparent 60%),
    radial-gradient(1.2px 1.2px at 71% 9%,  #ffffffaa, transparent 60%),
    radial-gradient(1.6px 1.6px at 34% 62%, #ffffff88, transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 44%, #ffffff99, transparent 60%),
    radial-gradient(1.3px 1.3px at 55% 31%, #ffffff77, transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 84%, #ffffff88, transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 76%, #ffffff66, transparent 60%),
    radial-gradient(1.4px 1.4px at 47% 92%, #ffffff77, transparent 60%),
    radial-gradient(1.1px 1.1px at 66% 55%, #ffffff55, transparent 60%);
  opacity:.55;
}
body::after{
  content:""; position:fixed; z-index:-1; pointer-events:none;
  top:-220px; right:-160px; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--mond) 16%,transparent) 0%,
    color-mix(in srgb,var(--accent) 9%,transparent) 42%,
    transparent 68%);
  filter:blur(6px);
}

/* Beim Laden aufziehen - einmal, nicht bei jeder Kleinigkeit. */
main{animation:auftauchen .5s cubic-bezier(.22,1,.36,1) both}
@keyframes auftauchen{from{opacity:0; transform:translateY(10px)} to{opacity:1}}

/* ---- Marke ---- */
nav{background:color-mix(in srgb,var(--ground) 82%,transparent);
  backdrop-filter:blur(14px) saturate(1.2)}
.brand{gap:10px}
.brand .mark{
  width:20px; height:20px; border-radius:50%; background:transparent;
  transform:none; position:relative;
  box-shadow:inset -6px 2px 0 0 var(--mond),
             0 0 14px color-mix(in srgb,var(--mond) 55%,transparent);
}
.brand:hover .mark{animation:mondschein 2.4s ease-in-out infinite}
@keyframes mondschein{
  0%,100%{box-shadow:inset -6px 2px 0 0 var(--mond),
                     0 0 14px color-mix(in srgb,var(--mond) 55%,transparent)}
  50%    {box-shadow:inset -6px 2px 0 0 var(--mond),
                     0 0 26px color-mix(in srgb,var(--mond) 85%,transparent)}
}

/* Navigationslinks: Licht faehrt von links unter den Text. */
nav a.link{position:relative; padding-bottom:2px}
nav a.link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--mond));
  transform:scaleX(0); transform-origin:left;
  transition:transform .26s cubic-bezier(.22,1,.36,1);
}
nav a.link:hover::after,nav a.link.on::after{transform:scaleX(1)}

/* ---- Knoepfe: waechst und leuchtet beim Darueberfahren ---- */
.btn{
  position:relative; overflow:hidden;
  transition:transform .16s cubic-bezier(.22,1,.36,1), box-shadow .2s,
             filter .16s, border-color .16s;
}
.btn:hover:not(:disabled){transform:translateY(-2px) scale(1.045);
  filter:brightness(1.14); box-shadow:var(--schein)}
.btn:active:not(:disabled){transform:translateY(0) scale(.99)}
/* Lichtstreif, der einmal ueber den Knopf laeuft. */
.btn::before{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 30%,
    color-mix(in srgb,#fff 26%,transparent) 50%,transparent 70%);
}
.btn:hover:not(:disabled)::before{animation:streif .7s ease-out}
@keyframes streif{to{transform:translateX(120%)}}
.btn.primary{box-shadow:0 6px 22px -10px color-mix(in srgb,var(--accent) 80%,transparent)}

/* ---- Karten: heben sich an und bekommen ihren Seltenheitsschein ---- */
.card,.item{transition:transform .2s cubic-bezier(.22,1,.36,1),
  box-shadow .24s, border-color .2s}
.item:hover{
  transform:none;
  border-color:color-mix(in srgb,var(--c) 55%,transparent);
  box-shadow:0 18px 40px -18px color-mix(in srgb,var(--c) 60%,transparent),
             0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent);
}
.item:hover .bild img{transform:scale(1.16) translateY(-3px)}
.item .bild img{transition:transform .28s cubic-bezier(.22,1,.36,1)}
.item .bild{background:radial-gradient(circle at 50% 40%,
  color-mix(in srgb,var(--c) 12%,transparent), transparent 70%), #141517}
.item .top{box-shadow:0 0 12px color-mix(in srgb,var(--c) 70%,transparent)}
/* Auf der Verkaufsseite heissen die Kacheln `.item.waehlbar` - auch sie
   sprangen als Ganzes. Gleiche Regel, gleicher Grund. */
.item.waehlbar:hover{transform:none}
.item.waehlbar:hover .bild img{transform:scale(1.16) translateY(-3px)}
.item.waehlbar.gewaehlt{box-shadow:0 0 0 2px var(--c) inset,
  0 0 26px -6px color-mix(in srgb,var(--c) 55%,transparent)}

/* Preise im Mondlicht statt in Bernstein. */
.item .price{color:var(--mond); text-shadow:0 0 18px
  color-mix(in srgb,var(--mond) 45%,transparent)}

/* ---- Eingabefelder ---- */
input,select{transition:border-color .16s, box-shadow .2s, background .16s}
input:hover,select:hover{border-color:var(--hairline-2)}
input:focus,select:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}

.filterzeile{transition:background .14s, transform .14s}
.filterzeile:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);
  transform:translateX(2px)}

tbody tr{transition:background .14s}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}

/* Wer Bewegung abgestellt hat, bekommt keine. Das ist keine Kuer:
   Animationen koennen bei Migraene und Vestibularstoerungen Beschwerden
   ausloesen, und das Betriebssystem sagt es uns. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important; transition:none!important;
  }
  .btn:hover,.item:hover,.item.waehlbar:hover{transform:none!important}
}

/* ---- Anmeldung und Registrierung ---- */
.tor{display:grid; place-items:center; min-height:calc(100vh - 200px); padding:20px 0}
.tor-karte{width:100%; max-width:400px; position:relative; overflow:hidden}
/* Ein Mondstrahl von oben - dieselbe Sprache wie im Kopf der Seite. */
.tor-karte::before{
  content:""; position:absolute; top:-90px; left:50%; transform:translateX(-50%);
  width:260px; height:180px; border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--mond) 14%,transparent), transparent 70%);
  pointer-events:none;
}
.tor-form{display:flex; flex-direction:column; gap:14px; margin-top:18px}
.tor-form > div{display:flex; flex-direction:column; gap:5px}
.tor-form input{width:100%}
.verweis{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.verweis:hover{color:var(--mond)}

/* ---- Online-Anzeige ---- */
.online{display:inline-flex; align-items:center; gap:6px; font-size:13px;
  color:var(--ink-2); font-family:var(--mono)}
.online .punkt{width:7px; height:7px; border-radius:50%; background:var(--good);
  box-shadow:0 0 8px var(--good); animation:pochen 2.4s ease-in-out infinite}
@keyframes pochen{0%,100%{opacity:1} 50%{opacity:.45}}

/* ---- Chat ---- */
.chat-schalter{
  position:fixed; right:20px; bottom:20px; z-index:40;
  padding:11px 20px; border-radius:999px; border:1px solid var(--hairline-2);
  background:var(--surface-2); color:var(--ink); font:inherit; font-weight:600;
  font-size:14px; cursor:pointer; box-shadow:var(--shadow);
  transition:transform .16s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.chat-schalter:hover{transform:translateY(-2px) scale(1.05); box-shadow:var(--schein)}
.chat-schalter.offen{background:var(--accent); color:var(--accent-ink);
  border-color:transparent}

.chat{
  position:fixed; right:20px; bottom:74px; z-index:40; width:330px;
  max-height:min(62vh, 520px); display:flex; flex-direction:column;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  backdrop-filter:blur(14px);
  border:1px solid var(--hairline-2); border-radius:14px; box-shadow:var(--shadow);
  animation:chat-auf .22s cubic-bezier(.22,1,.36,1) both;
}
/* display:flex wuerde sonst gegen das hidden-Attribut gewinnen - genau der
   Fehler, der die Auswahlleiste beim Verkaufen sichtbar gelassen hat. */
.chat[hidden]{display:none}
@keyframes chat-auf{from{opacity:0; transform:translateY(12px) scale(.97)}}
.chat-kopf{display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; border-bottom:1px solid var(--hairline)}
.chat-zeilen{flex:1; overflow-y:auto; padding:10px 12px; display:flex;
  flex-direction:column; gap:8px; scrollbar-width:thin}
.chat-zeile{display:grid; grid-template-columns:auto auto 1fr; gap:7px;
  align-items:baseline; font-size:13.5px; line-height:1.4}
.chat-zeit{font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
.chat-name{font-weight:600; color:var(--accent); white-space:nowrap}
.chat-text{color:var(--ink-2); overflow-wrap:anywhere}
.chat-form{display:flex; gap:7px; padding:10px 12px; border-top:1px solid var(--hairline)}
.chat-form input{flex:1; min-width:0}
.chat-fehler{color:var(--bad); margin:0; padding:0 12px 10px}
@media (max-width:520px){
  .chat{left:12px; right:12px; width:auto}
}

/* ---- Verlauf und Rangliste ---- */
.verlauf{display:flex; flex-direction:column; gap:1px; max-height:420px;
  overflow-y:auto}
.v-zeile{display:flex; gap:9px; align-items:baseline; padding:7px 9px;
  border-radius:8px; font-size:13.5px; border-left:2px solid var(--c);
  transition:background .14s}
.v-zeile:hover{background:color-mix(in srgb,var(--c) 10%,transparent)}
.v-art{font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3)}
.v-kauf{color:var(--good)} .v-einzahlung{color:var(--accent)}
.v-auszahlung{color:var(--warn)}
.v-name{font-weight:600}
.v-item{color:var(--ink-2); flex:1; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.v-preis{color:var(--mond)}

.rang .platz{font-weight:700; color:var(--ink-3)}
.rang-1 .platz{color:#ffd75e; text-shadow:0 0 12px #ffd75e88}
.rang-2 .platz{color:#dddfe2}
.rang-3 .platz{color:#e0a878}

/* ---- Sprachwahl ---- */
.sprachwahl{display:flex; gap:2px; align-items:center}
.flagge{font-size:17px; line-height:1; padding:5px 6px; border-radius:7px;
  filter:grayscale(.75) opacity(.6);
  transition:filter .18s, transform .18s cubic-bezier(.22,1,.36,1),
             background .18s}
.flagge:hover{filter:none; transform:scale(1.22)}
.flagge.on{filter:none; background:color-mix(in srgb,var(--accent) 16%,transparent)}

/* ---- Einzahlen ---- */
.einzahl-kopf{display:flex; align-items:center; gap:14px}
.zurueck{width:34px; height:34px; flex:none; display:grid; place-items:center;
  border:1px solid var(--hairline-2); border-radius:9px; font-size:20px;
  color:var(--ink-2); transition:transform .16s, background .16s}
.zurueck:hover{background:var(--surface-2); transform:translateX(-2px)}
.einzahl-symbol{width:44px; height:44px; flex:none; display:grid;
  place-items:center; font-size:22px; border-radius:11px;
  background:color-mix(in srgb,var(--r-legendary) 22%,transparent);
  border:1px solid color-mix(in srgb,var(--r-legendary) 45%,transparent)}

.botliste{display:flex; flex-direction:column; gap:10px}
.botzeile{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px;
  border-radius:12px; background:var(--surface);
  border:1px solid var(--hairline);
  border-left:3px solid var(--good);
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .2s,
             border-color .2s}
.botzeile:hover{transform:translateX(3px);
  box-shadow:0 14px 34px -20px color-mix(in srgb,var(--good) 70%,transparent)}
.botzeile.aus{border-left-color:var(--ink-3); opacity:.62}
.botzeile.aus:hover{transform:none; box-shadow:none}
.bot-bild{width:38px; height:38px; flex:none; display:grid; place-items:center;
  font-size:20px; border-radius:9px; background:var(--surface-3)}
.bot-name{font-weight:600; font-size:15px}
.bot-zustand{display:inline-flex; align-items:center; gap:6px; font-size:10.5px;
  font-weight:700; letter-spacing:.09em; color:var(--ink-3)}
.bot-zustand .punkt{width:7px; height:7px; border-radius:50%; background:var(--ink-3)}
.bot-zustand.an{color:var(--good)}
.bot-zustand.an .punkt{background:var(--good); box-shadow:0 0 8px var(--good);
  animation:pochen 2.4s ease-in-out infinite}
.botzeile .spacer{flex:1}

.wiegehts{border-color:color-mix(in srgb,var(--accent) 34%,transparent);
  background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.wie-kopf{display:flex; align-items:center; gap:9px}
.wie-symbol{width:21px; height:21px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:var(--accent); color:var(--accent-ink);
  font-size:12px; font-weight:700; font-family:var(--mono)}
.wie-schritte{list-style:none; margin:12px 0 0; padding:0;
  display:flex; flex-direction:column; gap:9px}
.wie-schritte li{display:flex; align-items:center; gap:11px; font-size:14px;
  color:var(--ink-2)}
.wie-schritte .n{width:22px; height:22px; flex:none; display:grid;
  place-items:center; border-radius:6px; font-family:var(--mono);
  font-size:12px; font-weight:700; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 16%,transparent)}

/* ---- Erscheinen beim Scrollen ---- */
/* Startzustand nur setzen, wenn JS die Klasse vergeben hat. Ohne JS ist
   nichts unsichtbar - eine Seite, die ohne Skript leer bleibt, ist kaputt. */
/* Kurz halten. Gemessen bei 132 Kacheln: mit .5s Uebergang, bis zu 300ms
   Staffelung und einem Ausloeser erst 6% im Bild waren 120ms nach dem
   Scrollen NULL von 16 sichtbaren Karten da - die Seite war beim Blaettern
   durchgehend schwarz. Eine Einblendung, die man beim Scrollen bemerkt,
   ist keine Gestaltung mehr, sondern eine Ladezeit. */
.kommt{opacity:0; transform:translateY(9px);
  transition:opacity .22s ease-out, transform .22s ease-out}
.kommt.da{opacity:1; transform:none}

/* ---- Kippen beim Darueberfahren ---- */
.kippbar{
  --lx:50%; --ly:50%;
  /* Kein transition auf transform: den Winkel setzt bewegung.js in jedem
     Bild selbst. Eine Transition wuerde bei jeder Mausbewegung neu
     anfangen, nie ankommen und genau das Ruckeln erzeugen, das sie
     verhindern soll. Box-shadow und Rahmen duerfen weich bleiben - die
     aendern sich nur beim Betreten und Verlassen. */
  transform-style:preserve-3d;
  will-change:transform;
  transition:box-shadow .28s ease, border-color .24s ease;
}
/* Lichtreflex, der dem Zeiger folgt. Liegt ueber der Karte, faengt aber
   keine Klicks ab - sonst waere die Karte nicht mehr anklickbar. */
.kippbar::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; opacity:0; transition:opacity .24s;
  background:radial-gradient(380px circle at var(--lx) var(--ly),
    color-mix(in srgb,#fff 13%,transparent), transparent 45%);
}
.kippbar:hover::after{opacity:1}
.item{position:relative}

@media (prefers-reduced-motion:reduce){
  .kommt{opacity:1!important; transform:none!important}
  .kippbar:hover{transform:none!important}
}

/* ---- Item-Statistik ---- */
.kennzahlen{display:grid; gap:10px; margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.kz{background:var(--surface-2); border:1px solid var(--hairline);
  border-radius:10px; padding:12px 14px; display:flex; flex-direction:column;
  gap:3px; transition:transform .18s cubic-bezier(.22,1,.36,1), border-color .2s}
.kz:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--c) 50%,transparent)}
.kz-wert{font-family:var(--mono); font-size:24px; font-weight:600;
  font-variant-numeric:tabular-nums; line-height:1.1}
.kz-wert.mond{color:var(--mond)}
.kz-schild{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink-3); font-weight:600}

/* Linie statt Balken: der Verlauf ueber 30 Tage ist eine Bewegung, keine
   Reihe einzelner Messwerte - und beim Darueberfahren steht der Wert da.
   Gezeichnet wird in graph.js, hier steht nur das Aussehen. */
.graph{position:relative; height:190px; margin-top:16px; color:var(--c)}
.g-svg{width:100%; height:100%; display:block; overflow:visible}
/* Das SVG wird in der Breite gedehnt. Ohne non-scaling-stroke waeren
   Linien auf einem breiten Bildschirm dicker als auf einem schmalen und
   die Strichmuster laenger. */
.g-svg line,.g-svg path,.g-svg circle{vector-effect:non-scaling-stroke}
/* Das hidden-Attribut versteckt SVG-Elemente NICHT: die Regel im
   Browser-Stylesheet gilt nur fuer den HTML-Namensraum. Fadenkreuz und
   Punkt standen deshalb dauerhaft am linken Rand bei (0,0) - sichtbar
   als kleiner Kreis und eine gestrichelte Senkrechte, die niemand
   angefasst hatte. Eine eigene Regel greift, weil Autor-Stylesheets
   keinen Standard-Namensraum haben. */
.g-svg [hidden]{display:none}
.g-raster{stroke:var(--hairline); stroke-width:1; stroke-dasharray:3 5}
.g-linie{fill:none; stroke:currentColor; stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c) 65%,transparent));
  stroke-dasharray:2400; stroke-dashoffset:2400;
  animation:linie-ziehen 1.1s cubic-bezier(.22,1,.36,1) .1s forwards}
@keyframes linie-ziehen{to{stroke-dashoffset:0}}
.g-flaeche{animation:flaeche-auf .8s ease .5s both}
@keyframes flaeche-auf{from{opacity:0}}
.g-punkt{fill:var(--ground); stroke:currentColor; stroke-width:2.5;
  filter:drop-shadow(0 0 8px var(--c))}
/* display:flex gewinnt sonst gegen das hidden-Attribut - derselbe Fehler
   wie bei der Auswahlleiste und beim Chat. Sichtbar war das als graue
   leere Pille oben links im Graphen, die nie verschwand. */
.g-tipp[hidden]{display:none}
.g-tipp{position:absolute; top:-6px; transform:translateX(-50%);
  background:var(--surface-3); border:1px solid var(--hairline-2);
  border-radius:9px; padding:7px 11px; pointer-events:none; white-space:nowrap;
  display:flex; flex-direction:column; gap:1px; font-size:12px;
  box-shadow:var(--shadow); z-index:2}
.g-tipp strong{font-family:var(--mono); font-size:11px; color:var(--ink-3); order:3}
.g-tipp .g-menge{font-weight:700; color:var(--ink); order:1}
.g-tipp .g-preis{color:var(--mond); font-family:var(--mono); order:2}
.g-achsen{position:absolute;inset:0;pointer-events:none;font:10px var(--mono);color:var(--ink-3)}
.g-achse-links,.g-achse-rechts{position:absolute;transform:translateY(-50%);white-space:nowrap;line-height:1}
.g-achse-links{left:0;width:calc(7.15% - 7px);text-align:right}
.g-achse-rechts{left:calc(93.15% + 7px);right:0;text-align:left}
.g-raster-menge{stroke:var(--hairline);stroke-width:1;stroke-dasharray:3 5}
@media (prefers-reduced-motion:reduce){
  .g-linie{animation:none; stroke-dashoffset:0}
  .g-flaeche{animation:none}
}
.graph-achse{display:flex; justify-content:space-between; margin-top:5px;
  font-family:var(--mono); font-size:10.5px}

/* Bild im Kopf der Itemseite.
   Die Begrenzung aus `.item .bild img` greift hier nicht - die gilt nur
   innerhalb einer Itemkarte. Ohne eigene Regel stand das Bild in voller
   Groesse da und lief ueber die Karte hinaus. */
.kopfbild{width:92px; height:92px; flex:none; display:grid; place-items:center;
  border-radius:11px; overflow:hidden;
  background:radial-gradient(circle at 50% 40%,
    color-mix(in srgb,var(--c) 20%,transparent), transparent 70%), #141517}
.kopfbild img{max-width:82px; max-height:82px; object-fit:contain; display:block}

/* ================= Karten farbiger ================= */

/* Das Bildfeld traegt die Farbe, nicht nur ein Streifen oben.
   Vorher lag die Waffe auf fast schwarzem Grund - bei 132 Karten wirkte
   die Seite dadurch grau, obwohl jede Seltenheit ihre Farbe hat. */
.item .bild{
  height:118px;
  /* Wie stark die Seltenheitsfarbe das Bildfeld traegt. Steht als
     Variable da, weil die Wertstufen der Marktkarte sie abstufen -
     ein teures Item leuchtet staerker als ein billiges. */
  --glanz:40%; --glanz-2:13%;
  background:
    radial-gradient(120% 90% at 50% 0%,
      color-mix(in srgb,var(--c) var(--glanz),transparent) 0%,
      color-mix(in srgb,var(--c) var(--glanz-2),transparent) 45%,
      transparent 78%),
    linear-gradient(160deg, #1f2024 0%, #141517 100%);
  border-bottom:1px solid color-mix(in srgb,var(--c) 28%,transparent);
  position:relative; overflow:hidden;
}
/* Lichtschein hinter der Waffe - laesst sie schweben statt kleben. */
.item .bild::before{
  content:""; position:absolute; left:50%; top:52%; width:118px; height:118px;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--c) 55%,transparent), transparent 65%);
  filter:blur(16px); opacity:.75;
}
.item .bild img{max-height:96px; max-width:96px; position:relative;
  filter:drop-shadow(0 6px 14px rgba(17,18,20,.6))}

/* Rahmen und Streifen tragen die Farbe schon im Ruhezustand. */
.item{border-color:color-mix(in srgb,var(--c) 26%,var(--hairline));
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--c) 6%,var(--surface)), var(--surface) 55%)}
.item .top{height:4px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--c) 55%,transparent), var(--c) 50%,
    color-mix(in srgb,var(--c) 55%,transparent))}

/* Das Seltenheitsschild gefuellt statt nur umrandet - das ist der Punkt,
   an dem man die Stufe auf einen Blick erkennt. */
.item .tag{color:#131316; font-weight:800;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--c) 100%,white 18%), var(--c));
  border-color:transparent;
  box-shadow:0 3px 12px -4px var(--c)}

.item .price{font-size:22px; color:var(--c);
  text-shadow:0 0 20px color-mix(in srgb,var(--c) 55%,transparent)}
.item .foot{background:color-mix(in srgb,var(--c) 8%,var(--surface-2));
  border-top-color:color-mix(in srgb,var(--c) 22%,transparent)}
.item .foot .btn{background:color-mix(in srgb,var(--c) 22%,var(--surface-3));
  border-color:color-mix(in srgb,var(--c) 45%,transparent); color:var(--ink)}
.item .foot .btn:hover{background:var(--c); color:#131316}

/* ---- Google-Anmeldung ---- */
.btn.google{width:100%; background:#fff; color:#28292e; border-color:#fff;
  font-weight:600; margin-top:18px}
.btn.google:hover{background:#f1f3f7; border-color:#f1f3f7;
  box-shadow:0 8px 26px -10px rgba(255,255,255,.45)}
.btn.google svg{flex:none}
.btn.discord-login{width:100%; background:#5865f2; color:#fff; border-color:#5865f2;
  font-weight:600; margin-top:10px; gap:9px}
.btn.discord-login:hover{background:#4752c4; border-color:#4752c4}
.btn.discord-login:first-of-type{margin-top:18px}
.oder{display:flex; align-items:center; gap:12px; margin:16px 0 -4px;
  color:var(--ink-3); font-size:12px; text-transform:uppercase;
  letter-spacing:.1em}
.oder::before,.oder::after{content:""; flex:1; height:1px;
  background:var(--hairline)}

/* ---- Zwei-Faktor ---- */
.code-feld{font-size:22px; letter-spacing:.32em; text-align:center;
  font-variant-numeric:tabular-nums}
.qr{display:grid; place-items:center; padding:14px; margin-top:12px;
  background:#fff; border-radius:12px}
.qr svg{display:block; width:100%; max-width:210px; height:auto}
.notfallcodes{display:grid; gap:7px; margin-top:12px;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.notfallcodes code{font-family:var(--mono); font-size:15px; letter-spacing:.05em;
  background:var(--surface-3); border:1px dashed var(--hairline-2);
  border-radius:8px; padding:9px 12px; text-align:center; user-select:all;
  color:var(--mond)}

.tfa-wahl{display:grid; gap:12px; margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.tfa-wahl form{display:flex; flex-direction:column; gap:7px; padding:14px;
  border:1px solid var(--hairline); border-radius:11px;
  background:var(--surface-2); transition:border-color .2s, transform .18s}
.tfa-wahl form:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  transform:translateY(-2px)}
.tfa-wahl .btn{margin-top:4px}

/* ==================================================================
   Guthaben aufladen
   ==================================================================
   Zwei Spalten, wie man es von Aufladeseiten kennt: links WOMIT, rechts
   WIE VIEL. Der Zusammenhang zwischen beidem ist der Grund fuer die
   Aufteilung - der Mindestbetrag haengt am Coin, und wer erst den Betrag
   eintippt und dann erfaehrt, dass dieser Coin ihn nicht annimmt, hat
   umsonst getippt. Deshalb steht die Wahl links und wirkt nach rechts. */
.auf-raster{display:grid; gap:16px; margin-top:16px;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);
  align-items:start}
@media (max-width:900px){
  .auf-raster{grid-template-columns:1fr}
}

/* ---- links: die Coins ---- */
.muenzen{display:grid; gap:9px; margin-top:9px;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.muenze{position:relative; display:flex; flex-direction:column;
  align-items:flex-start; gap:3px; padding:14px 12px 11px; border-radius:12px;
  cursor:pointer; text-align:left; border:1px solid var(--hairline-2);
  background:var(--surface-2); color:var(--ink); font:inherit;
  transition:transform .16s cubic-bezier(.22,1,.36,1), border-color .18s,
             box-shadow .22s, background .18s}
.muenze:hover{transform:translateY(-2px); border-color:var(--accent)}
/* `display:flex` oben steht im Autoren-Stylesheet und schlaegt damit das
   `[hidden]{display:none}` des Browsers - die Suche setzte das Attribut
   korrekt, und die Kacheln blieben trotzdem stehen. */
.muenze[hidden]{display:none}
.muenze.an{border-color:var(--accent); background:var(--surface-3);
  box-shadow:var(--schein)}
/* Der Haken sitzt in der Ecke und nicht im Fluss: er soll die Hoehe der
   Kachel nicht veraendern, sonst springt beim Auswaehlen das Raster. */
.muenze.an::after{content:"✓"; position:absolute; right:9px; bottom:8px;
  font-size:13px; line-height:1; color:var(--accent)}
.muenze-symbol{width:26px; height:26px; font-size:22px; line-height:1;
  object-fit:contain}
.muenze-name{font-weight:600; font-size:14px; line-height:1.25;
  /* Coin-Namen werden lang ("Binance Coin (BSC)"). Zwei Zeilen sind
     erlaubt, danach wird abgeschnitten - sonst sind die Kacheln in einer
     Reihe verschieden hoch. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden}
.muenze-netz{font-size:11px; color:var(--ink-3); font-family:var(--mono)}

/* Das Gebuehren-Abzeichen oben links, wie auf den Vorbildern. */
.muenze-abzeichen{position:absolute; top:-1px; left:-1px;
  padding:3px 8px; border-radius:12px 0 12px 0; font-size:10.5px;
  font-family:var(--mono); color:var(--ink-2);
  background:var(--surface-3); border:1px solid var(--hairline-2)}
.muenze.an .muenze-abzeichen{color:var(--accent-ink); background:var(--accent);
  border-color:transparent}
/* Ueber dem Abzeichen bleibt Platz - ohne das ueberdeckt es das Symbol. */
.muenze-abzeichen ~ .muenze-symbol{margin-top:9px}

.auf-mehr{margin-top:12px; width:100%}
.auf-mehr-feld{margin-top:10px}
.auf-suche{width:100%; margin-bottom:10px}
/* Die uebrigen Coins sind ueber 350 Stueck. Kleinere Kacheln, feste
   Hoehe und ein eigener Rollbereich - sonst waere die Seite zehn
   Bildschirme lang. */
.muenzen.klein{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  max-height:340px; overflow-y:auto; padding:2px}
.muenzen.klein .muenze{padding:10px 9px}
.muenzen.klein .muenze-symbol{width:21px; height:21px}
.muenzen.klein .muenze-name{font-size:12.5px}

/* ---- rechts: der Betrag ---- */
.auf-summe{position:sticky; top:16px}
.auf-kopf{display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin-bottom:14px;
  padding-bottom:12px; border-bottom:1px solid var(--hairline)}

.auf-spalten{display:grid; gap:10px; grid-template-columns:1fr 1fr}
.auf-spalte{display:flex; flex-direction:column; gap:5px; min-width:0}
.auf-feld{display:flex; align-items:center; min-width:0;
  border:1px solid var(--hairline-2); border-radius:10px;
  background:var(--surface-2); overflow:hidden;
  transition:border-color .18s, box-shadow .2s}
.auf-feld:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
/* Das rechte Feld wird nur beschrieben, nicht bedient. Es sieht dem
   linken bewusst aehnlich - es ist dieselbe Groesse in derselben
   Waehrung -, aber gedaempft, damit niemand hineinzutippen versucht. */
.auf-feld.starr{background:var(--surface); color:var(--ink-2)}
.auf-zeichen{padding:0 2px 0 12px; color:var(--ink-3);
  font-family:var(--mono); font-size:16px}
.auf-feld input{flex:1; min-width:0; border:0; background:none;
  box-shadow:none; font-family:var(--mono); font-size:16px; padding-left:2px}
.auf-feld input:focus{outline:none; box-shadow:none; border:0}
.auf-feld output{padding:11px 12px; font-size:16px; width:100%}

.auf-hinweis{margin-top:12px}
.auf-schnell{margin-top:16px}
.auf-los{width:100%; margin-top:16px; justify-content:center}

/* ---- Schnellbetraege ---- */
.betraege{display:grid; gap:9px; margin-top:9px;
  grid-template-columns:repeat(auto-fit,minmax(84px,1fr))}
.betrag{padding:11px 8px; border-radius:10px; cursor:pointer;
  border:1px solid var(--hairline-2); background:var(--surface-2);
  color:var(--ink); font:inherit; font-family:var(--mono); font-size:14px;
  font-weight:600; transition:transform .16s cubic-bezier(.22,1,.36,1),
  border-color .18s, background .18s}
.betrag:hover{transform:translateY(-2px); border-color:var(--accent)}
.betrag.an{background:var(--accent); color:var(--accent-ink);
  border-color:transparent; box-shadow:var(--schein)}

/* ---- Bezahlseite ----
   Zwei Dinge muessen hier stimmen, sonst geht Geld verloren: der Betrag
   und die Adresse. Beide stehen deshalb gross, in Mono, mit eigenem
   Kopierknopf - und nichts anderes lenkt davon ab. */
.zahl-karte{max-width:820px}
.zahl-kopf{display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; padding-bottom:14px; margin-bottom:16px;
  border-bottom:1px solid var(--hairline)}
.zahl-muenze{display:flex; align-items:center; gap:11px}
.zahl-muenze img{object-fit:contain}
.zahl-muenze span{display:block}
/* Die Uhr faellt auf, wenn es knapp wird - aber ohne Blinken: das liest
   sich als Fehler, und abgelaufen ist hier kein Fehler. */
.zahl-uhr{font-size:19px; font-weight:600; color:var(--warn);
  font-variant-numeric:tabular-nums}

.zahl-raster{display:grid; gap:22px; align-items:start;
  grid-template-columns:minmax(0,1fr) auto}
@media (max-width:720px){
  .zahl-raster{grid-template-columns:1fr}
  .zahl-qr{justify-self:center}
}
.zahl-links{min-width:0}
.zahl-feld{display:flex; align-items:center; gap:10px; margin-top:6px;
  padding:12px 12px 12px 14px; border-radius:10px;
  border:1px solid var(--hairline-2); background:var(--surface-2)}
.zahl-wert{font-family:var(--mono); font-size:17px; color:var(--ink);
  flex:1; min-width:0; user-select:all}
/* Adressen sind lang und haben keine Trennstellen - ohne das laeuft die
   Karte auf dem Handy seitlich aus dem Bild. */
.zahl-wert.bruch{font-size:14px; overflow-wrap:anywhere; line-height:1.45}
.zahl-einheit{font-family:var(--mono); color:var(--ink-3); font-size:14px}
.zahl-kopieren{flex-shrink:0; padding:7px 13px; font-size:13px}
.zahl-warnung{margin-top:16px}
.zahl-warten{margin-top:16px}

/* Der QR-Code kommt als SVG mit `currentColor`; der Rahmen gibt ihm den
   hellen Grund, den Kameras brauchen. */
.zahl-qr{padding:12px; border-radius:12px; background:#fff; color:#111214;
  line-height:0}
.zahl-qr svg{width:168px; height:168px; display:block}

/* ---- Auszahlen ----
   Die auszahlbare Summe steht gross und allein: es ist die einzige Zahl,
   die hier wirklich zaehlt, und sie ist nicht das Guthaben. */
.aus-kopf{display:flex; align-items:flex-start; justify-content:space-between;
  gap:18px; flex-wrap:wrap}
.aus-summe{display:block; font-size:30px; line-height:1.15; margin-top:2px}
.aus-warum{max-width:46ch; margin:0}
.aus-adresse{width:100%; font-size:14px}

/* ---- Auszahlen: Sichtung ---- */
.aus-posten-kopf{display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:12px}
.aus-posten-kopf strong{font-size:19px; margin-right:8px}
.aus-daten{display:grid; gap:4px 16px; margin:0 0 16px;
  grid-template-columns:auto minmax(0,1fr)}
.aus-daten dt{grid-column:1}
.aus-daten dd{grid-column:2; margin:0; min-width:0}
/* Ein Klick markiert die ganze Adresse - abtippen waere hier der
   wahrscheinlichste Weg, Geld zu verlieren. */
.aus-adr{font-family:var(--mono); font-size:13px; user-select:all;
  overflow-wrap:anywhere}
.aus-taten{display:flex; gap:12px; flex-wrap:wrap;
  padding-top:14px; border-top:1px solid var(--hairline)}
.aus-taten form{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.aus-taten input{min-width:180px}

/* Der Stapelkasten steht ueber der Liste: was hier passiert, betrifft
   alle Posten darunter auf einmal. */
.aus-stapel{display:grid; gap:12px}
.aus-stapel .aus-taten{border-top:none; padding-top:0;
  align-items:center; justify-content:space-between}
.aus-stapel .aus-taten > div{flex:1 1 240px}
.aus-stapel strong{display:block}


/* ==================================================================
   Handelsplatz statt Tabelle
   ==================================================================
   Drei Dinge tragen die Marktseite: das Kopfband sagt in vier Zahlen,
   was der Markt gerade hergibt; die Spitzenreihe stellt die teuersten
   Stuecke heraus; das Raster stuft Preise nach Wert. Ohne diese
   Abstufung sah eine Kachel fuer 3 $ genauso aus wie eine fuer 240 $ -
   132 gleich grosse Karten, also eine Tabelle mit Bildern. */

/* ---- Kopfband ---- */
.markt-kopf{display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:18px}
.markt-kopf-text{min-width:min(100%,260px); flex:1 1 260px}
.markt-kopf-text p{margin:4px 0 0; max-width:46ch}

/* Die Zahlen stehen in einer Reihe wie eine Kurstafel: gleiche Breite,
   Mono, damit die Ziffern untereinander stehen. */
.markt-zahlen{display:flex; flex-wrap:wrap; gap:1px; margin:0;
  border:1px solid var(--hairline); border-radius:12px; overflow:hidden;
  background:var(--hairline)}
.markt-zahlen > div{display:flex; flex-direction:column; gap:1px;
  padding:9px 15px; background:var(--surface); min-width:88px; flex:1 1 auto}
.markt-zahlen dt{font-size:10px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink-3); font-weight:700}
.markt-zahlen dd{margin:0; font-family:var(--mono); font-size:17px;
  font-variant-numeric:tabular-nums; font-weight:600; line-height:1.2}
.markt-zahlen dd.mond{color:var(--mond)}

/* ---- Spitzenreihe ---- */
.spitze{display:flex; flex-direction:column; gap:11px}
.abschnitt{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.abschnitt h2{font-size:17px}
/* Eine duenne Linie, die den Abschnitt bis zum Rand zieht - das trennt
   ohne einen weiteren Kasten aufzumachen. */
.abschnitt::after{content:""; flex:1; height:1px; min-width:20px;
  background:linear-gradient(90deg,var(--hairline-2),transparent)}
.spitze-reihe{display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

.spitzenkarte{flex-direction:row; align-items:stretch; overflow:hidden}
.spitzenkarte .top{position:absolute; inset:0 auto 0 0; width:4px; height:auto}
.spitzenkarte .bild{width:104px; height:auto; flex:none; border-bottom:none;
  border-right:1px solid color-mix(in srgb,var(--c) 28%,transparent)}
.spitzenkarte .bild img{max-height:78px; max-width:78px}
/* min-width:0, sonst wehrt sich der Flex-Kasten gegen das Schrumpfen und
   der Name laeuft aus der Karte statt mit Auslassungspunkten zu enden.
   align-items:flex-start, weil das Seltenheitsschild sonst auf die volle
   Breite gezogen wird - in der Rasterkachel liegt es absolut, hier nicht. */
.spitzenkarte .body{padding:12px 14px; gap:3px; justify-content:center;
  align-items:flex-start; min-width:0}
.spitzenkarte .nm,.spitzenkarte .zeile{max-width:100%}
.spitzenkarte .nm{font-size:16.5px}
.spitzenkarte .price{font-size:23px}
.spitzenkarte .zeile{display:flex; align-items:baseline; gap:8px;
  flex-wrap:wrap; margin-top:2px}

/* ---- Raster ---- */
.markt-raster{display:grid; gap:13px;
  grid-template-columns:repeat(auto-fill,minmax(198px,1fr))}

/* Beim Kippen darf die Karte ihre Nachbarn ueberdecken - sonst schneidet
   die naechste Karte die angehobene Ecke ab. */
.item:hover,.item:focus-visible{z-index:3}

/* Seltenheitsschild und Menge liegen auf dem Bild, nicht darunter:
   das spart eine Zeile und sieht aus wie eine Kachel im Spiel. */
.marktkarte .bild .tag,.marktkarte .bild .stueck{position:absolute; z-index:2}
.marktkarte .bild .tag{top:7px; left:7px}
.marktkarte .bild .stueck{top:7px; right:7px; font-size:11px; font-weight:600;
  padding:2px 6px; border-radius:6px; color:var(--ink-2);
  background:color-mix(in srgb,var(--ground) 72%,transparent);
  border:1px solid var(--hairline-2); backdrop-filter:blur(4px)}
.marktkarte .body{gap:2px; padding:12px 13px 13px}
.marktkarte .ab{font-size:10.5px; text-transform:uppercase;
  letter-spacing:.09em; margin-top:3px}
.marktkarte .foot{padding:9px 13px; justify-content:space-between}
.marktkarte .pfeil{color:var(--c); font-size:15px; opacity:.55;
  transition:transform .2s cubic-bezier(.22,1,.36,1), opacity .2s}
.marktkarte:hover .pfeil{opacity:1; transform:translateX(4px)}

/* ---- Wertstufen ----
   Die Schwelle kommt aus der Verteilung der Preise auf dieser Seite
   (oberstes Zehntel, obere Haelfte), nicht aus einem festen Betrag.
   Ein fester Betrag waere bei einem Markt aus lauter Godlies genauso
   falsch wie bei einem aus lauter Commons. */
.marktkarte .price{font-size:18px; color:var(--mond);
  text-shadow:0 0 20px color-mix(in srgb,var(--mond) 40%,transparent)}
.spitzenkarte .price{color:var(--mond);
  text-shadow:0 0 22px color-mix(in srgb,var(--mond) 45%,transparent)}
.wert-2 .price{font-size:21px}
.wert-3 .price{font-size:25px; letter-spacing:-.01em}
.wert-1 .bild{--glanz:24%; --glanz-2:7%}
.wert-1 .bild::before{opacity:.4}
.wert-3 .bild{--glanz:54%; --glanz-2:19%}
.wert-3 .bild::before{opacity:1; width:150px; height:150px}
.wert-3 .top{height:5px}
.wert-3{border-color:color-mix(in srgb,var(--c) 42%,var(--hairline));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 16%,transparent),
             0 16px 44px -32px color-mix(in srgb,var(--c) 95%,transparent)}

/* ---- Werkzeugleiste ueber dem Raster ---- */
.markt-leiste{display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap}
.markt-leiste .zaehler{font-family:var(--mono); font-size:13px; color:var(--ink-2)}
.markt-leiste .zaehler b{color:var(--ink); font-weight:600}
.sortierung{display:flex; align-items:center; gap:3px; margin:0; padding:3px;
  min-inline-size:0; border:1px solid var(--line); border-radius:12px;
  background:color-mix(in srgb,var(--card) 82%,black)}
.sortierung legend{position:absolute;inline-size:1px;block-size:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sort-option{cursor:pointer; padding:7px 10px; border-radius:8px;
  color:var(--ink-2); font-size:12px; font-weight:700; white-space:nowrap;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease}
.sort-option input{position:absolute;opacity:0;pointer-events:none}
.sort-option:hover{color:var(--ink); background:color-mix(in srgb,var(--accent) 11%,transparent)}
.sort-option.an{color:var(--accent-ink); background:var(--accent);
  box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 32%,transparent)}
.sort-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* ---- Filterleiste ---- */
.filterbox{width:252px; flex:none; position:sticky; top:14px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:12px 13px}
.filterbox > summary{display:none}
.filter-inhalt{display:flex; flex-direction:column; gap:2px}
.filter-inhalt input:not([type=checkbox]){width:100%}

/* Suchfeld mit Lupe. Das Zeichen liegt im Feld, nicht daneben - sonst
   steht das Feld in der schmalen Spalte noch enger. */
.suchfeld{position:relative; display:flex; align-items:center}
.suchfeld input{padding-left:31px}
.suchfeld .lupe{position:absolute; left:11px; color:var(--ink-3);
  font-size:13px; pointer-events:none; line-height:1}

.preisspanne{display:flex; align-items:center; gap:7px}
.preisspanne input{flex:1; min-width:0; font-family:var(--mono)}
.preisspanne .bis{color:var(--ink-3); font-size:13px}

/* Seltenheiten als Marken statt als Kaestchenliste: die Farbe IST die
   Auskunft, der Text nur die Beschriftung dazu. Das Kaestchen selbst ist
   weg, aber nicht entfernt - es traegt weiter den Zustand und den Fokus. */
.chips{display:flex; flex-wrap:wrap; gap:6px; --c:var(--accent)}
.chip{position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:5px 9px 5px 8px; border-radius:999px; cursor:pointer;
  font-size:12.5px; font-weight:600; text-transform:none; letter-spacing:0;
  color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--hairline-2);
  transition:background .16s, border-color .16s, color .16s, transform .16s}
.chip input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.chip .punkt{width:8px; height:8px; border-radius:50%; background:var(--c);
  flex:none; box-shadow:0 0 7px color-mix(in srgb,var(--c) 70%,transparent)}
.chip .zahl{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.chip:hover{color:var(--ink); transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.chip:has(input:checked){color:var(--ink); border-color:var(--c);
  background:color-mix(in srgb,var(--c) 20%,var(--surface-2))}
.chip:has(input:checked) .zahl{color:var(--ink-2)}
.chip:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
/* Stufen ohne Angebot bleiben anklickbar, treten aber zurueck - sonst
   probiert man der Reihe nach Filter durch, die nichts liefern koennen. */
.chip.leer{opacity:.45}
.chip.leer:hover{opacity:.8}
/* Angehakt ist angehakt - eine gewaehlte Stufe darf nicht blass sein,
   auch wenn sie gerade nichts liefert. */
.chip.leer:has(input:checked){opacity:1}

/* ---- Leere Ergebnisliste ---- */
.leer-tat{display:inline-flex; margin-top:14px}


/* ==================================================================
   Itemseite: die Kaufentscheidung
   ==================================================================
   Die Frage ist "ist das ein guter Preis?". Sie wird oben beantwortet -
   bester Preis, Abstand zum 30-Tage-Schnitt, Spanne der Angebote - und
   erst danach kommt die Liste. Vorher stand der Preis nur in einer
   Tabellenzelle und man musste ihn selbst einordnen. */

.kaufkopf{display:flex; flex-direction:column; gap:16px; overflow:hidden;
  position:relative}
/* Mondschein in der Seltenheitsfarbe hinter dem Kopf. */
.kaufkopf::before{content:""; position:absolute; top:-160px; left:-60px;
  width:340px; height:280px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--c) 16%,transparent), transparent 68%)}
.kk-oben{display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  position:relative}
.kk-text{flex:1 1 200px; min-width:0}
.kk-text h1{margin-top:5px; font-size:clamp(23px,3vw,32px)}
.kk-text .zeile{margin:3px 0 0; display:flex; flex-wrap:wrap; gap:8px;
  align-items:baseline}

.kk-preis{flex:0 0 auto; display:flex; flex-direction:column; gap:3px;
  align-items:flex-end; text-align:right; padding:11px 15px; border-radius:12px;
  background:color-mix(in srgb,var(--c) 9%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.kk-aktionen{display:flex; justify-content:flex-end; align-items:center; gap:7px;
  margin-top:7px}
.instant-kauf{margin:0}
.instant-kauf .btn{min-height:34px; padding:7px 10px; font-size:12px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px}
.instant-kauf .btn span{font-family:var(--mono); font-size:11px;
  padding-left:7px; border-left:1px solid color-mix(in srgb,currentColor 28%,transparent)}
.instant-verhandeln{min-height:34px; padding:7px 10px; font-size:12px}
.kk-zahl{font-family:var(--mono); font-size:clamp(26px,4.4vw,34px);
  font-weight:600; font-variant-numeric:tabular-nums; line-height:1.1;
  color:var(--mond); text-shadow:0 0 24px color-mix(in srgb,var(--mond) 40%,transparent)}

/* Das Urteil. Gruen heisst guenstiger als sonst, Gelb teurer - mehr sagt
   es nicht, und mehr weiss die Seite auch nicht. */
.urteil{display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap}
.urteil::before{content:""; width:0; height:0; border-left:4px solid transparent;
  border-right:4px solid transparent}
.urteil.gut{color:var(--good);
  background:color-mix(in srgb,var(--good) 14%,transparent)}
.urteil.gut::before{border-top:6px solid var(--good)}
.urteil.teuer{color:var(--warn);
  background:color-mix(in srgb,var(--warn) 14%,transparent)}
.urteil.teuer::before{border-bottom:6px solid var(--warn)}
.urteil.gleich,.urteil.neu{color:var(--ink-2);
  background:color-mix(in srgb,var(--ink-2) 12%,transparent)}
.urteil.gleich::before,.urteil.neu::before{border:none; width:8px; height:2px;
  border-radius:1px; background:var(--ink-3)}

/* ---- Spanne der Angebote ---- */
.spanne{position:relative}
.sp-bahn{position:relative; height:8px; border-radius:999px;
  background:var(--surface-3); border:1px solid var(--hairline)}
/* Ort und Breite kommen als Prozentwerte aus der Vorlage. Gerechnet wird
   hier, damit ein einzelnes Angebot (Breite 0) nicht unsichtbar wird und
   ein Feld am rechten Rand nicht aus der Bahn laeuft. */
.sp-feld{position:absolute; top:0; bottom:0; border-radius:999px;
  left:min(var(--von,0%), calc(100% - 12px));
  width:max(12px, var(--breite,0%));
  background:linear-gradient(90deg,var(--c),
    color-mix(in srgb,var(--c) 45%,transparent));
  box-shadow:0 0 14px -2px color-mix(in srgb,var(--c) 70%,transparent)}
/* Der Schnittpreis als Lot durch die Bahn - da lag der Markt zuletzt. */
.sp-schnitt{position:absolute; top:-4px; bottom:-4px; width:2px;
  left:min(var(--x,0%), calc(100% - 2px));
  background:var(--mond); border-radius:1px;
  box-shadow:0 0 10px var(--mond)}
.sp-marken{display:flex; justify-content:space-between; gap:10px;
  margin-top:9px; flex-wrap:wrap}
/* Erste Marke linksbuendig, letzte rechtsbuendig, alles dazwischen
   mittig - so stehen sie unter der Stelle der Bahn, die sie meinen. */
.sp-marke{display:flex; flex-direction:column; gap:1px; min-width:0;
  align-items:center; text-align:center}
.sp-marke:first-child{align-items:flex-start; text-align:left}
.sp-marke:last-child{align-items:flex-end; text-align:right}
.sp-marke dt{font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-3); font-weight:700}
.sp-marke dd{margin:0; font-family:var(--mono); font-size:14px;
  font-variant-numeric:tabular-nums}
.sp-marke.schnittwert dd{color:var(--mond)}

/* ---- Angebotsliste ----
   Keine Tabelle: vier Spalten samt Mengenfeld und Knopf passen auf einem
   Handy nicht nebeneinander, und eine waagerecht scrollende Tabelle ist
   auf der Kaufseite die schlechteste aller Loesungen. */
.angebote{list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-direction:column; gap:8px}
.angebot{display:grid; gap:4px 13px; align-items:center;
  grid-template-columns:26px minmax(112px,auto) 1fr auto;
  padding:11px 13px; border-radius:12px; background:var(--surface-2);
  border:1px solid var(--hairline);
  transition:border-color .18s, background .18s, transform .18s}
.angebot:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent);
  background:color-mix(in srgb,var(--c) 6%,var(--surface-2))}
.angebot.bester{border-color:color-mix(in srgb,var(--good) 45%,transparent);
  background:color-mix(in srgb,var(--good) 8%,var(--surface-2))}
.a-rang{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.a-preis{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.a-preis strong{font-family:var(--mono); font-size:19px; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--ink)}
.angebot.bester .a-preis strong{color:var(--mond)}
.a-mehr{font-family:var(--mono); font-size:11.5px; color:var(--warn)}
.a-tag{font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--good); padding:2px 7px;
  border-radius:5px; background:color-mix(in srgb,var(--good) 16%,transparent)}
.a-daten{display:flex; align-items:baseline; gap:8px; min-width:0;
  color:var(--ink-2); font-size:13px}
.a-daten .wer{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.a-tat{display:flex; justify-content:flex-end}
.a-tat form{display:flex; gap:7px; align-items:center}
.a-tat input[type=number]{width:70px; font-family:var(--mono); text-align:center}

/* ---- Graphlegende ---- */
.g-legende{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.g-legende span{display:inline-flex; align-items:center; gap:7px;
  padding:6px 9px; border:1px solid var(--hairline); border-radius:7px;
  background:color-mix(in srgb,var(--surface-2) 72%,transparent);
  font-size:11.5px; font-weight:600; color:var(--ink-2)}
.g-legende i{width:13px; height:0; border-top-width:2px; border-top-style:solid;
  border-radius:2px; flex:none}
.g-legende .l-preis i{border-color:var(--mond)}
.g-legende .l-menge i{border-top-width:2px;border-color:#24a8ed}
.g-balken{fill:currentColor; opacity:.24}
.g-datenpunkt{fill:currentColor; opacity:.9}


/* ==================================================================
   Schmale Bildschirme
   ==================================================================
   MM2 wird ueberwiegend am Handy gespielt. Geprueft bei 390 px:
   die Navigation lief vorher waagerecht aus dem Bild, das Raster
   zeigte eine Karte pro Reihe, und die Angebotstabelle musste
   seitwaerts gescrollt werden. */

/* Abschnittsleiste der Navigation. Auf breiten Schirmen loest sich der
   Kasten auf (display:contents), damit die Reihe bleibt wie sie war. */
.navlinks{display:contents}

/* Zwischenbreiten: angemeldet traegt die Kopfzeile acht Abschnitte plus
   Sprachen, Guthaben, Namen und Ausgang. Unterhalb von ~1100 px passt das
   nicht mehr in eine Reihe - der "Abmelden"-Knopf stand rechts heraus und
   die GANZE Seite liess sich seitwaerts schieben. Von aussen sieht das aus
   wie ein kaputtes Layout, dabei fehlt nur Platz.

   Dieselbe Loesung wie auf dem Handy, aber nur diese eine: die Abschnitte
   bekommen ihre eigene Zeile. Alles andere (kleinere Schrift, nicht
   klebender Kopf) bleibt dem Handy vorbehalten. */
/* `nav-eng` setzt bewegung.js, wenn der Inhalt nicht in eine Reihe passt -
   gemessen, nicht geraten. Ohne JavaScript bleibt es bei einer Reihe; dann
   sieht es aus wie frueher. */
nav.nav-eng .inner{flex-wrap:wrap; row-gap:9px}
nav.nav-eng .spacer{display:none}
nav.nav-eng .brand{margin-right:auto}
nav.nav-eng .navlinks{display:flex; order:9; width:100%; gap:18px;
  overflow-x:auto; scrollbar-width:none; padding-bottom:1px}
nav.nav-eng .navlinks::-webkit-scrollbar{display:none}
nav.nav-eng .navlinks a.link{white-space:nowrap}

@media (max-width:760px){
  /* Der Kopf scrollt mit, statt stehenzubleiben. Angemeldet braucht er
     drei Reihen - als klebende Leiste waeren das ueber 140 px, ein
     Sechstel des Bildschirms, dauerhaft weg. Hochscrollen holt ihn
     zurueck; das versteht jeder. */
  nav{position:static}
  /* Alles im Kopf eine Spur kleiner. Ohne das brauchte die Kopfzeile bei
     375 px drei Reihen - ein Drittel des Bildschirms, und sie bleibt beim
     Scrollen stehen. */
  nav .inner{flex-wrap:wrap; gap:8px 11px; padding:8px 12px}
  nav .spacer{display:none}
  .brand{margin-right:auto; font-size:16px; gap:8px}
  .brand .mark{width:17px; height:17px;
    box-shadow:inset -5px 2px 0 0 var(--mond),
               0 0 12px color-mix(in srgb,var(--mond) 55%,transparent)}
  nav .btn{padding:7px 13px; font-size:13px}
  nav a.link{font-size:13.5px}
  nav .online{font-size:12px}
  .flagge{font-size:15px; padding:4px 5px}
  /* Die Abschnitte wandern in eine eigene, seitwaerts schiebbare Zeile -
     so bleiben sie alle erreichbar, ohne die Kopfzeile zu sprengen. */
  .navlinks{display:flex; order:9; width:100%; gap:17px; overflow-x:auto;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:1px}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a.link{white-space:nowrap}
  /* Lange Roblox-Namen sonst am Bildschirmrand abgeschnitten - ein
     Wortende, das aussieht wie ein Darstellungsfehler. */
  .konto{max-width:11ch; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap}
  main{padding:20px 14px 88px; gap:16px}
}

@media (max-width:520px){
  /* Der Online-Zaehler ist Beiwerk und drueckt den Kopf in eine
     zusaetzliche Reihe. */
  nav .online{display:none}
  nav .btn{padding:6px 11px; font-size:12.5px}
  .konto{max-width:9ch}
}

@media (max-width:860px){
  .marktflaeche{gap:14px}
  /* Die Filterleiste faltet sich zusammen. Ohne das stehen auf dem Handy
     600 px Filter vor dem ersten Item. */
  /* Deckend, nicht durchscheinend: aufgeklappt liegt die Leiste ueber
     dem Raster, und durchscheinende Itemnamen hinter den Filtern lesen
     sich wie ein Darstellungsfehler. */
  .filterbox{width:100%; position:sticky; top:8px; z-index:11; padding:0;
    background:var(--surface); border-color:var(--hairline-2);
    box-shadow:var(--shadow)}
  /* "Filter" steht schon in der Zeile darueber. */
  .filter-kopf strong{display:none}
  .filter-kopf{justify-content:flex-end; margin-bottom:0}
  .filterbox > summary{display:flex; align-items:center; gap:9px;
    padding:11px 14px; cursor:pointer; list-style:none;
    font-family:"Chakra Petch",sans-serif; font-weight:600}
  .filterbox > summary::-webkit-details-marker{display:none}
  .filterbox > summary .zahl{font-family:var(--mono); font-size:11px;
    padding:1px 7px; border-radius:999px; color:var(--accent-ink);
    background:var(--accent); font-weight:700}
  .filterbox > summary .pfeil{margin-left:auto; color:var(--ink-3);
    transition:transform .2s}
  .filterbox[open] > summary .pfeil{transform:rotate(180deg)}
  .filterbox[open] > summary{border-bottom:1px solid var(--line)}
  .filter-inhalt{padding:11px 13px 13px}
}

@media (max-width:560px){
  .markt-raster{grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
  .marktkarte .bild{height:96px}
  .marktkarte .bild img{max-height:78px; max-width:78px}
  .marktkarte .body{padding:10px 10px 11px}
  .marktkarte .nm{font-size:14px}
  .marktkarte .price{font-size:16px}
  .wert-2 .price{font-size:18px}
  .wert-3 .price{font-size:20px}
  .marktkarte .foot{padding:8px 10px}
  .marktkarte .foot .small{font-size:11px}
  /* Vier Zahlen in EINER Reihe statt im Zweierblock: das spart eine
     halbe Bildschirmhoehe, bevor das erste Item zu sehen ist. */
  .markt-zahlen{flex-wrap:nowrap; width:100%; flex:1 1 100%}
  .markt-zahlen > div{padding:7px 8px; min-width:0; flex:1 1 0}
  .markt-zahlen dt{font-size:9px; letter-spacing:.05em}
  .markt-zahlen dd{font-size:14px}
  .markt-kopf{gap:12px}
  .markt-kopf-text p{font-size:14px}
  .spitzenkarte .bild{width:88px}
  .spitzenkarte .bild img{max-height:66px; max-width:66px}
  .spitzenkarte .body{padding:10px 12px}
  .spitzenkarte .price{font-size:20px}
  .spitzenkarte .nm{font-size:15px}
  .card{padding:15px 14px}
  h2{font-size:17px}

  /* Die Spitzenreihe wird zum Wischband: drei breite Karten nebeneinander
     wuerden auf 390 px zu drei Briefmarken. */
  .spitze-reihe{display:flex; overflow-x:auto; gap:10px; padding-bottom:4px;
    scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:-14px; padding-inline:14px}
  .spitze-reihe::-webkit-scrollbar{display:none}
  .spitzenkarte{flex:0 0 82%; scroll-snap-align:start}
  /* Die Linie hinter der Abschnittsueberschrift haengt neben dem
     umgebrochenen Untertitel in der Luft. */
  .abschnitt{gap:2px}
  .abschnitt::after{display:none}
}

@media (max-width:640px){
  /* Angebotszeile: Preis oben, Daten darunter, Kaufen ueber die volle
     Breite - ein 44 px hohes Ziel statt eines Knopfs am Rand. */
  .angebot{grid-template-columns:26px 1fr; padding:12px}
  .a-daten{grid-column:1/-1}
  /* Kaufen ueber die volle Breite: ein Knopf am Zeilenrand ist auf dem
     Handy ein Ziel von 80 px in einer Reihe voller anderer Ziele. */
  .a-tat{grid-column:1/-1}
  .a-tat > *{flex:1}
  .a-tat form{width:100%}
  .a-tat form .btn{flex:1}
  .a-tat input[type=number]{width:64px}
  .kk-preis{width:100%; align-items:flex-start; text-align:left}
  .kk-aktionen{justify-content:flex-start; flex-wrap:wrap}
  .kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .graph{height:160px}
}

/* Kippen nur mit echtem Zeiger. Auf einem Handy loest jede Beruehrung
   pointermove aus - die Karte kippt beim Antippen weg, statt zu oeffnen. */
@media (hover:none){
  .item:hover{transform:none}
  .kippbar::after{display:none}
}

/* ================= Option B: dichtes Raster =================
   Vom Besitzer gewaehlt (27.08.2026). Vorbild Starpets: mehr Items pro
   Bildschirm statt groesserer Kacheln.

   Bewusst als Ueberschreibung am Ende, nicht als Umbau der Vorlage: so
   bleiben Filterlogik, Formularfelder und alle Uebersetzungsschluessel
   unangetastet - es dreht sich nur die Richtung und die Groesse.

   Und bewusst NUR im Marktraster (.markt-raster ...). Im Inventar bleiben
   die Kacheln gross: dort waehlt man aus, was man verkauft, und trifft mit
   dem Finger. Hier stoebert man. */

/* Filter waagerecht ueber das Raster statt als Spalte daneben - das gibt
   dem Raster die vollen 238 px zurueck, die die Spalte gekostet hat. */
.marktflaeche{flex-direction:column; align-items:stretch}
/* Die Vorlage benutzt .filterbox, nicht .filter - beide nennen, sonst
   bleibt die Spalte auf ihren 238 px stehen und das Raster gewinnt nichts. */
.filter, .filterbox{width:100%; max-width:none; position:static; flex:none}
/* flex-direction MUSS hier stehen: die urspruengliche Regel setzt column,
   und ohne ausdrueckliches row bleibt sie stehen - display:flex allein
   aendert die Richtung nicht. Genau daran hing die 461-px-Leiste. */
.filter-inhalt{display:flex; flex-direction:row; flex-wrap:wrap;
  align-items:flex-end; gap:9px 18px}
.filter-inhalt > *{min-width:0}
/* Der Knopf war 1116 px breit und erzwang damit eine eigene Zeile - allein
   dadurch war die Leiste 424 px hoch, also hoeher als drei Kachelreihen.
   In einer Spalte ist volle Breite richtig, in einer Leiste nicht. */
.filter-inhalt .btn.primary{width:auto; flex:0 0 auto; padding:9px 20px}
/* Beschriftungen stehen als eigene Elemente neben ihren Feldern; klein und
   am Boden ausgerichtet lesen sie sich als Vorsatz statt als Ueberschrift. */
.filter-inhalt .filter-titel{margin:0 0 11px; font-size:10.5px}
.filter-inhalt .chips{flex-wrap:wrap}
.filter-titel{margin:0 0 4px}

/* 146 px statt 198 px: acht Spalten statt fuenf auf einem 1400er Fenster. */
.markt-raster{grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:9px}
.markt-raster .item .bild img{max-height:58px; max-width:58px}
.markt-raster .item .body{padding:8px 9px; gap:4px}
.markt-raster .item .nm{font-size:13px}
.markt-raster .item .price{font-size:15.5px}
.markt-raster .item .foot{padding:7px 9px}

/* Auf dem Handy bleibt es bei zwei Spalten - acht waeren dort unlesbar. */
@media (max-width: 760px){
  .markt-raster{grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
  .markt-raster .item .bild img{max-height:74px; max-width:74px}
}

/* ---- Breite Fenster: der Rahmen war der Engpass, nicht die Kacheln ----
   main hatte max-width:1180px. Auf einem 1900er Bildschirm standen damit
   links und rechts je 350 px leer, waehrend das Raster sich auf sieben
   Spalten quetschte. Fliessend statt fest: 96vw bis 1760 px. */
main, nav .inner{max-width:min(1760px, 96vw)}

/* Kachelbreite je Fenster. auto-fill regelt die Anzahl von selbst - hier
   steht nur, wie schmal eine Kachel werden darf, bevor umgebrochen wird. */
@media (min-width: 1500px){
  .markt-raster{grid-template-columns:repeat(auto-fill,minmax(152px,1fr)); gap:10px}
}
@media (max-width: 1100px){
  .markt-raster{grid-template-columns:repeat(auto-fill,minmax(134px,1fr)); gap:8px}
}

/* Filterleiste auf schmalen Fenstern: die Preisspanne ist 458 px breit und
   wuerde sonst ueber den Rand laufen. Schrumpfen erlauben, nicht abschneiden. */
.filter-inhalt .preisspanne, .filter-inhalt .suchfeld{flex:1 1 auto; max-width:100%}
.filter-inhalt .preisspanne input, .filter-inhalt .suchfeld input{min-width:0}
@media (max-width: 700px){
  .filter-inhalt{gap:7px 12px}
  .filter-inhalt .preisspanne, .filter-inhalt .suchfeld{flex-basis:100%}
  .filter-inhalt .filter-titel{margin-bottom:0}
}

/* Handy: zwei Spalten, groessere Bilder, Fingerziele ueber 44 px.
   Acht Spalten waeren hier 45 px breit - unlesbar und nicht treffbar. */
@media (max-width: 560px){
  main, nav .inner{max-width:100%; padding-left:12px; padding-right:12px}
  .markt-raster{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .markt-raster .item .bild img{max-height:88px; max-width:88px}
  .markt-raster .item .nm{font-size:14px}
  .markt-raster .item .price{font-size:17px}
  .markt-raster .item .foot{min-height:44px; align-items:center}
}
@media (max-width: 380px){
  .markt-raster .item .bild img{max-height:76px; max-width:76px}
}

/* Ein zugeklapptes <details> versteckt seinen Inhalt selbst - aber meine
   Regel oben setzt display:flex auf .filter-inhalt und hebt das auf. Auf dem
   Handy stand die Leiste dadurch offen und war 496 px hoch, obwohl das
   Skript sie zugeklappt hatte. Wer display auf ein Kind eines <details>
   setzt, muss den zugeklappten Fall ausdruecklich wieder herstellen. */
.filterbox:not([open]) .filter-inhalt{display:none}

/* ---- Einzahl-Kachel im Inventarraster ----
   Gestrichelter Rand und keine Fuellung: sie sieht nach Leerstelle aus, die
   man fuellen kann, statt nach Ware. Genauso hoch wie eine Itemkachel, damit
   die erste Reihe nicht verrutscht. */
.einzahlkachel{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; min-height:186px; padding:16px 12px; text-align:center;
  border:1.5px dashed var(--hairline-2); background:transparent;
  color:var(--ink-2); border-radius:var(--r); text-decoration:none;
  transition:border-color .16s, color .16s, background .16s}
.einzahlkachel:hover,.einzahlkachel:focus-visible{
  border-color:var(--accent); color:var(--ink); background:#ffffff08}
.einzahlkachel .plus{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--surface-3); color:var(--accent)}
.einzahlkachel .einzahl-text{
  font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:14.5px}
.einzahlkachel .einzahl-klein{font-size:11.5px; color:var(--ink-3); line-height:1.4}

/* ---- Warnung vor Namensfaelschern (auf /deposit) ---- */
/* Sass hier frueher im zweiten Einzahl-Fenster, das ueber dem Inventar
   lag. Das Fenster ist weg, die Warnung nicht: sie ist das Wichtigste
   auf der Seite - wer den Botnamen falsch abliest, tradet einem Fremden.

   Bernstein, nicht Rot: Rot heisst hier "etwas ist kaputt". Das hier ist
   eine Vorsichtsmassnahme, kein Fehler. */
.dep-warnung{
  display:flex; gap:11px; align-items:flex-start; margin:0 0 14px;
  padding:12px 14px; border-radius:10px;
  background:#ffc45e14; border:1px solid #ffc45e33; color:var(--ink-2)}
.dep-warnung p{margin:0; font-size:13px; line-height:1.5}
.dep-ruf{
  flex:none; width:19px; height:19px; border-radius:50%; margin-top:1px;
  background:var(--warn); color:#1a1200; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center}
/* Schmal: Name oben, die beiden Knoepfe darunter nebeneinander.
   Nebeneinander mit dem Namen liefen sie ueber den Rand hinaus. */
@media (max-width: 560px){
  .botzeile .spacer{flex-basis:100%; height:0}
  .botzeile .btn{flex:1; min-width:0}
}

/* ---- Zustand einer Abholung ---- */
.zustand{display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  padding:3px 9px; border-radius:20px; background:var(--surface-3);
  color:var(--ink-2); white-space:nowrap}
.zustand::before{content:""; width:6px; height:6px; border-radius:50%;
  background:currentColor}
/* Nur drei Farben, und jede sagt etwas anderes: gruen = fertig, gelb = laeuft
   noch, rot = zurueckgenommen. Grau bleibt "wird geprueft" - dort ist gerade
   ein Mensch dran, und eine Ampelfarbe waere eine Behauptung. */
.zustand.z-done{color:var(--good); background:#4fd39a1a}
.zustand.z-open,.zustand.z-accepted,.zustand.z-aktiv{color:var(--warn); background:#ffc45e1a}
.zustand.z-cancelled{color:var(--bad); background:#ff6b7a1a}
tr.laeuft td{background:#b9a5ff08}

/* ════════════════════════════════════════════════════════════════════════
   RICHTUNG A — "TRADING FLOOR"                                 28.08.2026

   Umsetzung des Entwurfs auf die echte Seite. Bewusst als Ueberschreibung
   am Ende: das Mondlicht-Schema und der Rasterumbau vom 27.08. bleiben
   stehen, es aendert sich Farbe, Tiefe und Bewegung.

   Der Farbgedanke: die Chrome-Flaechen bleiben Graphit, die FARBE kommt
   aus den Items selbst. Jede Karte traegt ihre Seltenheit schon als --c
   (.rar-godly, .rar-ancient ...) - das sind zehn Farben, und jede
   bedeutet etwas. Erfundene Farbe daneben wuerde diese Bedeutung nur
   verwaessern.

   Zum Zurueckdrehen: diesen Block bis zum Dateiende loeschen.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --ground:#080809;      /* Seitengrund */
  --surface:#0c0d0e;     /* Karten */
  --surface-2:#101112;   /* Leisten, Kopfzeilen */
  --surface-3:#151618;

  --hairline:#191a1c;
  --hairline-2:#232428;

  --ink:#ecedee;
  --ink-2:#a2a3a6;
  --ink-3:#6b7484;

  /* Bernstein als einzige eigene Signalfarbe: Preise, Guthaben, Aktion.
     Alles andere Farbige auf der Seite ist eine Seltenheitsfarbe. */
  --accent:#ffb020; --accent-ink:#160f00; --mond:#ffb020;

  --schnell:.16s cubic-bezier(.2,.7,.35,1);
  --ruhig:.26s cubic-bezier(.2,.7,.35,1);
}

/* ── Karten: Farbe aus der Seltenheit ──────────────────────────────── */

.marktkarte{
  position:relative;
  background:
    /* schwacher Schimmer der Seltenheitsfarbe oben in der Karte */
    linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, transparent) 0%,
                            transparent 92px),
    var(--surface);
  border:1px solid var(--hairline);
  transition:transform var(--schnell), border-color var(--schnell),
             box-shadow var(--ruhig), background-color var(--schnell);
  will-change:transform;
}

/* Die Bildflaeche bekommt einen Hof in der Seltenheitsfarbe - dadurch
   sitzt das Item auf seiner Farbe statt auf Neutralgrau. overflow:hidden
   ist Pflicht, sonst waechst das Bild beim Hovern aus der Karte heraus. */
.marktkarte .bild{
  overflow:hidden;
  background:
    radial-gradient(120% 96% at 50% 116%,
      color-mix(in srgb, var(--c) 34%, transparent) 0%,
      color-mix(in srgb, var(--c) 8%, transparent) 46%,
      transparent 72%),
    #090a0b;
}
.marktkarte .bild img{
  transition:transform var(--ruhig), filter var(--ruhig);
  filter:drop-shadow(0 5px 12px rgba(17,18,20,.55));
}

/* Seltenheits-Tag: volle Farbe statt gedaempft. */
.marktkarte .bild .tag{
  background:var(--c);
  box-shadow:0 2px 10px -2px color-mix(in srgb, var(--c) 70%, transparent);
  letter-spacing:.06em;
}

/* Stueckzahl als Plakette, nicht als loser Text. */
.marktkarte .bild .stueck{
  background:color-mix(in srgb, #040505 78%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 30%, transparent);
  color:var(--ink);
  padding:3px 7px; border-radius:999px;
  backdrop-filter:blur(3px);
}

.marktkarte .nm{color:var(--ink)}
.marktkarte .ab{color:var(--ink-3); letter-spacing:.1em}
.marktkarte .price{color:var(--accent); font-weight:600}

.marktkarte .foot{
  border-top:1px solid var(--hairline);
  background:color-mix(in srgb, var(--c) 4%, transparent);
}

/* ── Bewegung ──────────────────────────────────────────────────────── */

/* Anheben statt aufblasen: 1.5 % Vergroesserung plus 5 px nach oben liest
   sich als "kommt naeher", ohne dass das Raster ins Rutschen geraet. Das
   Bild darin geht weiter (6 %), damit die Karte Tiefe bekommt. */
/* Beim Zeigen hebt sich die WAFFE, nicht die Kachel. Vorher stieg das
   ganze Feld an, bekam einen farbigen Schein und einen Schlagschatten -
   auf einem Raster aus zwanzig Kacheln ist das viel Bewegung fuer die
   Auskunft "hier ist der Zeiger".

   Die Karte selbst bleibt jetzt liegen; nur der Rahmen faerbt sich leicht
   und das Bild kommt nach vorn. Das ist dieselbe Auskunft, nur leiser -
   und die Ware ist das, was man ansehen will. */
.marktkarte:hover{
  transform:none;
  border-color:color-mix(in srgb, var(--c) 45%, var(--hairline));
  box-shadow:none;
  z-index:3;
}
.marktkarte:hover .bild img{transform:scale(1.16) translateY(-3px)}
.marktkarte:hover .price{color:#ffc85c}
.marktkarte .bild img{transition:transform .26s cubic-bezier(.22,1,.36,1)}

.marktkarte:active{transform:none}
.marktkarte:active .bild img{transform:scale(1.1) translateY(-1px)}

/* Die Spitzenreihe ist waagerecht - dort schiebt sich die Karte zur
   Seite statt nach oben, sonst kippt die ganze Reihe optisch. */
.spitzenkarte{
  transition:transform var(--schnell), border-color var(--schnell),
             box-shadow var(--ruhig);
}
.spitzenkarte:hover{
  transform:translateX(4px);
  border-color:color-mix(in srgb, var(--c) 50%, var(--hairline));
  box-shadow:0 16px 34px -20px color-mix(in srgb, var(--c) 55%, transparent);
}
.spitzenkarte .bild{
  background:
    radial-gradient(120% 110% at 50% 120%,
      color-mix(in srgb, var(--c) 30%, transparent) 0%, transparent 70%),
    #090a0b;
}

/* Wer Bewegung abgestellt hat, bekommt die Farbe trotzdem - nur ohne
   Verschieben und Skalieren. */
@media (prefers-reduced-motion: reduce){
  .marktkarte, .marktkarte .bild img, .spitzenkarte{transition:none}
  .marktkarte:hover, .spitzenkarte:hover, .marktkarte:active{transform:none}
  .marktkarte:hover .bild img{transform:none}
}

/* ── Leisten, Filter, Zahlen ───────────────────────────────────────── */

.markt-zahlen{color:var(--ink-2)}
.markt-zahlen .mono, .markt-zahlen strong{color:var(--ink)}

/* Seltenheits-Chips tragen ihre Farbe ohnehin als --c: hier bekommt sie
   Flaeche statt nur Schrift, damit die Filterleiste die Farbskala des
   Rasters vorwegnimmt. */
.chip.rar{
  border-color:color-mix(in srgb, var(--c) 34%, var(--hairline));
  background:color-mix(in srgb, var(--c) 9%, transparent);
  color:var(--c);
  transition:background-color var(--schnell), border-color var(--schnell),
             transform var(--schnell);
}
.chip.rar:hover{
  background:color-mix(in srgb, var(--c) 18%, transparent);
  border-color:color-mix(in srgb, var(--c) 60%, transparent);
  transform:translateY(-1px);
}
.chip.rar.leer{opacity:.32}

.btn.primary{
  background:var(--accent); color:var(--accent-ink); font-weight:700;
  transition:transform var(--schnell), box-shadow var(--ruhig),
             background-color var(--schnell);
}
.btn.primary:hover{
  background:#ffc040;
  transform:translateY(-1px);
  box-shadow:0 10px 24px -12px color-mix(in srgb, var(--accent) 75%, transparent);
}

/* Der Trennstrich im Kopf war Violett aus dem alten Schema. */
tr.laeuft td{background:color-mix(in srgb, var(--accent) 6%, transparent)}

/* ════════════════════════════════════════════════════════════════════════
   ARCADE-SCHICHT auf "Trading Floor"                           28.08.2026

   Nicht die ganze Arcade-Richtung, sondern ihre vier wirksamsten Griffe
   auf den bestehenden Aufbau gelegt: kleinere Radien, Aufkleber statt
   Etiketten, harte versetzte Schatten, Knoepfe zum Druecken.

   Keine neue Schrift: die Seite hat mit Chakra Petch bereits eine
   Display-Schrift mit genau diesem Zungenschlag - sie wird hier nur
   haerter eingesetzt (Versalien, enger Satz) statt daneben eine zweite
   einzufuehren.

   Der harte Schatten ist in der SELTENHEITSFARBE, nicht schwarz. Der
   uebliche schwarze Versatz dieser Machart lebt von hellem Grund; auf
   diesem Dunkel waere er unsichtbar.

   Zum Zurueckdrehen: diesen Block bis zum Dateiende loeschen.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --r:6px;               /* war 12px - halbiert, das macht alles kantiger */
  --tinte:#040505;       /* das "Schwarz" fuer Raender auf Farbflaechen */
}

/* ── Aufkleber statt Etikett ───────────────────────────────────────── */

.marktkarte .bild .tag,
.spitzenkarte .bild .tag{
  background:var(--c);
  color:var(--tinte);
  border:2px solid var(--tinte);
  border-radius:3px;
  font-family:"Chakra Petch", Barlow, sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:3px 7px;
  box-shadow:2px 2px 0 var(--tinte);
}

.marktkarte .bild .stueck{
  border-radius:3px;
  border:2px solid var(--tinte);
  background:color-mix(in srgb, var(--tinte) 88%, transparent);
  font-weight:700;
  box-shadow:2px 2px 0 color-mix(in srgb, var(--tinte) 70%, transparent);
}

/* ── Beim Zeigen bewegt sich die WAFFE, nicht die Kachel ───────────── */

/* Hier stand ein harter Versatz: die Karte sprang nach links oben und
   warf rechts unten einen scharfen Schatten. Zweimal gemeldet ("dann
   wird diese ganze Kachel groesser und das sieht haesslich aus") - bei
   zwanzig Kacheln nebeneinander ist das viel Bewegung fuer die Auskunft
   "hier ist der Zeiger".

   ACHTUNG, hier lag die Falle: weiter oben (Zeile ~1626) steht dasselbe
   schon einmal, bereits auf "nur das Bild" umgestellt. Diese Fassung
   kam spaeter im Stylesheet und hat sie ueberschrieben - die Aenderung
   sah im Quelltext richtig aus und wirkte trotzdem nicht. Wer hier
   etwas aendert, muss BEIDE Stellen ansehen. */
.marktkarte:hover{
  transform:none;
  border-color:color-mix(in srgb, var(--c) 60%, var(--hairline));
  box-shadow:none;
}
.marktkarte:hover .bild img{transform:scale(1.16) translateY(-3px)}
.marktkarte:active{transform:none; box-shadow:none}
.marktkarte:active .bild img{transform:scale(1.1) translateY(-1px)}

.spitzenkarte:hover{
  transform:translate(-3px, -3px);
  border-color:var(--c);
  box-shadow:6px 7px 0 -1px color-mix(in srgb, var(--c) 78%, var(--tinte));
}

/* ── Preis: groesser, fetter, gleiche Laufweite ────────────────────── */

/* Bleibt Monospace. Bei sechs Spalten nebeneinander ist die feste
   Ziffernbreite mehr wert als eine zweite Displayschrift - man
   vergleicht Preise spaltenweise, nicht einzeln. */
.marktkarte .price{
  font-size:20px;
  font-weight:600;
  letter-spacing:-.01em;
}
.marktkarte:hover .price{color:#ffc85c}

/* Versalien waeren hier arcade-typisch, kosten aber Platz: sie schneiden
   "Elderwood Scythe" und drei weitere Namen ab - und der Name IST die Ware.
   Fettung allein traegt den Zungenschlag genauso. */
.marktkarte .nm{
  letter-spacing:.01em;
  font-weight:700;
}

/* ── Knoepfe zum Druecken ──────────────────────────────────────────── */

.btn.primary{
  border-radius:4px;
  border:2px solid var(--tinte);
  box-shadow:3px 3px 0 #6d4400;
  transition:transform .1s ease, box-shadow .1s ease, background-color var(--schnell);
}
.btn.primary:hover{
  transform:translate(-1px, -1px);
  box-shadow:4px 4px 0 #6d4400;
}
.btn.primary:active{
  transform:translate(3px, 3px);
  box-shadow:0 0 0 #6d4400;
}

.chip, .chip.rar{border-radius:4px}
.chip.rar:hover{
  transform:translate(-1px, -1px);
  box-shadow:2px 2px 0 color-mix(in srgb, var(--c) 55%, var(--tinte));
}

@media (prefers-reduced-motion: reduce){
  .marktkarte:hover, .marktkarte:active,
  .spitzenkarte:hover, .chip.rar:hover,
  .btn.primary:hover, .btn.primary:active{transform:none}
}

/* ════════════════════════════════════════════════════════════════════════
   1v1-DUELLE                                                   28.08.2026

   Rollenfarben aus dem Spiel: der Sheriff traegt Blau, der Moerder Rot.
   Nicht erfunden - so kennt es jeder, der MM2 spielt, und eine eigene
   Farbwahl waere hier nur eine zweite Sprache fuer dieselbe Sache.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --sheriff:#55afeb;
  --moerder:#e63c3c;
}

.duell-kopf{display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:20px}
.duell-kopf p{margin:6px 0 0; max-width:52ch}

.bilanz{display:flex; gap:1px; background:var(--hairline);
  border:1px solid var(--hairline); border-radius:var(--r); overflow:hidden}
.bilanz > div{display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--surface); padding:12px 22px}
.bilanz .zahl{font-size:24px; font-weight:600; line-height:1}
.bilanz .lbl{font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3)}

.btn.gross{padding:14px 26px; font-size:15px}

/* ── Laufendes Duell / Wartezustaende ──────────────────────────────── */

.laufendes, .wartet, .gemeldet{display:flex; align-items:center; gap:14px;
  padding:16px 18px; text-decoration:none; color:inherit}
.laufendes{border-left:3px solid var(--accent)}
.laufendes .pfeil{margin-left:auto; color:var(--accent); font-size:18px;
  transition:transform var(--schnell)}
.laufendes:hover .pfeil{transform:translateX(4px)}
.wartet{border-left:3px solid var(--warn)}
.gemeldet{border-left:3px solid var(--good)}
.wartet p, .gemeldet p{margin:4px 0 0}

/* Der pulsende Punkt sagt "es passiert noch etwas" - ohne ihn sieht ein
   Wartezustand aus wie ein haengengebliebener. */
.laufendes .punkt, .wartet .punkt, .gemeldet .punkt{
  width:9px; height:9px; border-radius:50%; flex:none; background:var(--warn);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--warn) 60%, transparent);
  animation:puls 1.8s ease-out infinite}
.gemeldet .punkt{background:var(--good);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent)}
@keyframes puls{
  70%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
@media (prefers-reduced-motion: reduce){
  .laufendes .punkt, .wartet .punkt, .gemeldet .punkt{animation:none}
}

/* ── Liste offener Duelle ──────────────────────────────────────────── */

.duell-liste{display:flex; flex-direction:column; gap:10px}
.duellzeile{display:grid; grid-template-columns:1fr auto auto; gap:20px;
  align-items:center; padding:14px 18px;
  transition:border-color var(--schnell), transform var(--schnell)}
.duellzeile:hover{border-color:var(--hairline-2); transform:translateX(2px)}

.duellzeile .wer{display:flex; align-items:center; gap:12px; min-width:0}
.duellzeile .wer > span:last-child{display:flex; flex-direction:column; gap:1px;
  min-width:0}
.duellzeile .wer strong{white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.avatar{width:36px; height:36px; border-radius:6px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); border:1px solid var(--hairline-2);
  font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:13px;
  color:var(--ink-2)}

.duellzeile .modus{display:flex; flex-direction:column; gap:2px;
  align-items:flex-end; text-align:right}
.modus-marke{font-family:"Chakra Petch",sans-serif; font-weight:700;
  font-size:12.5px; letter-spacing:.02em; padding:5px 10px; border-radius:4px;
  background:var(--surface-3); border:1px solid var(--hairline-2)}
.modus-marke.gross{font-size:16px; padding:8px 14px; display:inline-block;
  margin:6px 0 10px}

/* Jeder Modus bekommt seine Kante in der Farbe der beteiligten Rollen -
   damit sieht man in der Liste auf einen Blick, worum es geht. */
.modus-sm .modus-marke{border-left:3px solid var(--sheriff);
  border-right:3px solid var(--moerder)}
.modus-ss .modus-marke{border-left:3px solid var(--sheriff);
  border-right:3px solid var(--sheriff)}
.modus-mm .modus-marke{border-left:3px solid var(--moerder);
  border-right:3px solid var(--moerder)}
.modus-beide .modus-marke,.modus-zufall .modus-marke{border-left:3px solid var(--accent);
  border-right:3px solid var(--accent)}

.duellzeile .tat form{margin:0}

/* ── Das Auswahl-Overlay ───────────────────────────────────────────── */

dialog.overlay{border:1px solid var(--hairline-2); border-radius:var(--r);
  background:var(--surface); color:var(--ink); padding:0; width:min(94vw,560px);
  box-shadow:0 40px 90px -30px rgba(17,18,20,.9)}
dialog.overlay::backdrop{background:rgba(4,4,4,.72);
  backdrop-filter:blur(3px)}
dialog.overlay form{padding:22px 24px 20px; margin:0}

.overlay-kopf{display:flex; align-items:center; justify-content:space-between;
  gap:16px}
.overlay-kopf h2{margin:0; font-size:22px}
.schliessen{background:none; border:none; color:var(--ink-3); font-size:26px;
  line-height:1; cursor:pointer; padding:0 4px}
.schliessen:hover{color:var(--ink)}

.modi{display:flex; flex-direction:column; gap:9px; margin:18px 0 20px}
.modus-karte{display:block; cursor:pointer; position:relative}
.modus-karte input{position:absolute; opacity:0; pointer-events:none}
.modus-karte .inhalt{display:flex; flex-direction:column; gap:5px;
  border:1px solid var(--hairline); border-radius:6px; padding:13px 15px;
  background:var(--surface-2);
  transition:border-color var(--schnell), background-color var(--schnell),
             transform var(--schnell)}
.modus-karte:hover .inhalt{border-color:var(--hairline-2);
  transform:translate(-1px,-1px)}
/* Die Auswahl muss ohne Radiopunkt erkennbar sein - der ist ausgeblendet,
   weil die ganze Karte der Knopf ist. */
.modus-karte input:checked + .inhalt{border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  box-shadow:3px 3px 0 -1px color-mix(in srgb, var(--accent) 45%, transparent)}
.modus-karte input:focus-visible + .inhalt{outline:2px solid var(--accent);
  outline-offset:2px}

.rollen{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.rolle{font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:13px;
  padding:4px 9px; border-radius:4px; border:2px solid var(--tinte, #040505)}
.rolle.sheriff{background:var(--sheriff); color:#04121e}
.rolle.moerder{background:var(--moerder); color:#1e0505}
.rolle.zufall{background:var(--accent); color:var(--accent-ink)}
.gegen{font-size:11px; letter-spacing:.1em; color:var(--ink-3)}

.overlay-fuss{display:flex; justify-content:flex-end; gap:10px}

/* ── Die Gegenueberstellung ────────────────────────────────────────── */

.gegenueber{display:grid; grid-template-columns:1fr auto 1fr; gap:16px;
  align-items:stretch; margin:18px 0}
.gegenueber .seite{display:flex; flex-direction:column; gap:7px;
  border:1px solid var(--hairline); border-radius:var(--r);
  background:var(--surface); padding:18px 20px}
.gegenueber .seite.ich{border-color:var(--hairline-2)}
.gegenueber .seite .lbl{font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3)}
.gegenueber .seite .name{font-family:"Chakra Petch",sans-serif; font-size:19px;
  overflow:hidden; text-overflow:ellipsis}
.gegenueber .vs{display:flex; align-items:center;
  font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:15px;
  color:var(--ink-3); letter-spacing:.08em}

.rolle-marke{align-self:flex-start; font-family:"Chakra Petch",sans-serif;
  font-weight:700; font-size:13.5px; padding:5px 11px; border-radius:4px;
  border:2px solid var(--tinte, #040505)}
.rolle-sheriff .rolle-marke{background:var(--sheriff); color:#04121e}
.rolle-moerder .rolle-marke{background:var(--moerder); color:#1e0505}
.rolle-beide .rolle-marke{background:linear-gradient(90deg,var(--moerder) 0 50%,var(--sheriff) 50%);color:#09090a}
.rolle-sheriff{box-shadow:inset 3px 0 0 var(--sheriff)}
.rolle-moerder{box-shadow:inset 3px 0 0 var(--moerder)}

/* ── Anleitung ─────────────────────────────────────────────────────── */

.anleitung{padding:18px 20px}
.schritte{margin:12px 0 0; padding-left:20px; display:flex;
  flex-direction:column; gap:8px; color:var(--ink-2); font-size:14px}
.schritte li::marker{color:var(--accent); font-weight:700}

/* ── Ergebnis melden ───────────────────────────────────────────────── */

.melden{padding:20px 22px}
.melden h2{margin:0 0 4px; font-size:20px}
.ausgaenge{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px; margin:16px 0 4px}
.ausgaenge.zwei{grid-template-columns:repeat(2, minmax(0, 1fr))}
.ausgang-karte{display:block; cursor:pointer; position:relative}
.ausgang-karte input{position:absolute; opacity:0; pointer-events:none}
.ausgang-karte .inhalt{display:flex; flex-direction:column; gap:4px;
  border:1px solid var(--hairline); border-radius:6px; padding:14px;
  background:var(--surface-2); min-height:44px;
  transition:border-color var(--schnell), background-color var(--schnell),
             transform var(--schnell)}
.ausgang-karte:hover .inhalt{transform:translate(-1px,-1px)}
.ausgang-karte input:checked + .inhalt{border-width:2px; padding:13px}
.a-sheriff input:checked + .inhalt{border-color:var(--sheriff);
  background:color-mix(in srgb, var(--sheriff) 12%, var(--surface-2))}
.a-moerder input:checked + .inhalt{border-color:var(--moerder);
  background:color-mix(in srgb, var(--moerder) 12%, var(--surface-2))}
.a-innocent input:checked + .inhalt{border-color:var(--ink-2);
  background:color-mix(in srgb, var(--ink-2) 10%, var(--surface-2))}
.ausgang-karte input:checked + .inhalt{border-color:var(--accent)}
.ausgang-karte input:focus-visible + .inhalt{outline:2px solid var(--accent);
  outline-offset:2px}

.wer-gewann{margin-top:18px; padding-top:16px;
  border-top:1px solid var(--hairline)}
.wer-gewann .lbl{font-size:12px; color:var(--ink-2)}
.melden .btn{margin-top:18px}

/* ── Ausgang ───────────────────────────────────────────────────────── */

.ergebnis{display:flex; flex-direction:column; gap:5px; padding:26px 24px;
  margin:18px 0}
.ergebnis .lbl{font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3)}
.ergebnis .gross{font-family:"Chakra Petch",sans-serif; font-size:34px;
  line-height:1.1}
.ergebnis p{margin:4px 0 0}
.ergebnis.sieg{border-color:color-mix(in srgb, var(--good) 45%, var(--hairline));
  background:color-mix(in srgb, var(--good) 7%, var(--surface))}
.ergebnis.sieg .gross{color:var(--good)}
.ergebnis.niederlage{border-color:color-mix(in srgb, var(--bad) 35%, var(--hairline))}
.ergebnis.niederlage .gross{color:var(--bad)}
.ergebnis.remis .gross{color:var(--ink-2)}

.strittig{border-left:3px solid var(--warn); padding:18px 20px}
.strittig p{margin:6px 0 0}

.zurueck{display:inline-block; margin-bottom:10px; text-decoration:none}
.zurueck:hover{color:var(--ink)}

/* ── Schmale Bildschirme ───────────────────────────────────────────── */

@media (max-width: 720px){
  .duellzeile{grid-template-columns:1fr; gap:12px}
  .duellzeile .modus{align-items:flex-start; text-align:left}
  .duellzeile .tat .btn{width:100%}
  .gegenueber{grid-template-columns:1fr}
  .gegenueber .vs{justify-content:center}
  .ausgaenge{grid-template-columns:1fr}
}

/* ── Strittige Duelle (Sichtung) ───────────────────────────────────── */

.streitfall{display:flex; flex-direction:column; gap:14px; padding:16px 18px;
  border-left:3px solid var(--warn)}
.streitfall .kopf{display:flex; align-items:center; gap:12px; flex-wrap:wrap}

/* Beide Meldungen nebeneinander - der Widerspruch soll ins Auge springen,
   nicht erst durch Vergleichen auffallen. */
.streitfall .meldungen{display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
.streitfall .partei{display:flex; flex-direction:column; gap:6px;
  align-items:flex-start; padding:12px 14px; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--hairline)}
.streitfall .partei .mono{color:var(--warn)}
.streitfall .entscheidung{display:flex; gap:8px; flex-wrap:wrap; margin:0}

@media (max-width: 720px){
  .streitfall .meldungen{grid-template-columns:1fr}
  .streitfall .entscheidung .btn{width:100%}
}


/* ══════════════════════════════════════════════════════════════════════
   WELTRAUM
   ══════════════════════════════════════════════════════════════════════
   Atmosphaere, kein Dekor. Zwei feste Ebenen hinter der ganzen Seite:
   ein Sternenfeld und ein warmer Lichtkegel oben rechts. Beide liegen
   FEST (position:fixed) - mitscrollende Sterne sehen aus wie Schmutz auf
   dem Bildschirm, ein stehendes Feld wie ein Fenster nach draussen.

   Warum das die Marktkarten nicht stoert: die leben von den
   Seltenheitsfarben, und die brauchen einen ruhigen Grund. Deshalb keine
   Farbverlaeufe auf Flaechen, kein zweiter Akzent - nur Tiefe.

   Zum Zurueckdrehen: diesen Block bis zum Dateiende loeschen.
   ══════════════════════════════════════════════════════════════════════ */

body::before,
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
}

/* Sternenfeld. Als Radial-Gradienten statt hundert Elementen: kostet ein
   Element statt hundert und bleibt beim Zoomen scharf. Drei Helligkeiten,
   damit es Tiefe hat statt gleichmaessig gesprenkelt zu wirken. */
body::before{
  background-image:
    radial-gradient(1px 1px at 7% 12%, var(--ink) 50%, transparent 50%),
    radial-gradient(1px 1px at 19% 63%, var(--ink-3) 50%, transparent 50%),
    radial-gradient(1px 1px at 28% 27%, var(--ink-2) 50%, transparent 50%),
    radial-gradient(1px 1px at 37% 81%, var(--ink-3) 50%, transparent 50%),
    radial-gradient(1px 1px at 46% 9%, var(--ink) 50%, transparent 50%),
    radial-gradient(1px 1px at 54% 48%, var(--ink-3) 50%, transparent 50%),
    radial-gradient(1px 1px at 63% 72%, var(--ink-2) 50%, transparent 50%),
    radial-gradient(1px 1px at 71% 19%, var(--ink) 50%, transparent 50%),
    radial-gradient(1px 1px at 79% 57%, var(--ink-3) 50%, transparent 50%),
    radial-gradient(1px 1px at 86% 88%, var(--ink-2) 50%, transparent 50%),
    radial-gradient(1px 1px at 93% 34%, var(--ink-3) 50%, transparent 50%),
    radial-gradient(1px 1px at 97% 68%, var(--ink) 50%, transparent 50%);
  opacity:.55;
}

/* Mondlicht: die einzige grosse Lichtquelle, oben rechts. Gibt der Seite
   eine Richtung - ohne sie ist Dunkelheit nur Abwesenheit von Licht. */
body::after{
  background:radial-gradient(760px 620px at 88% -12%,
    color-mix(in srgb, var(--accent) 11%, transparent) 0%,
    color-mix(in srgb, var(--accent) 3%, transparent) 40%,
    transparent 72%);
}

/* Alles Sichtbare gehoert ueber die beiden Ebenen. `nav` und `main` haben
   keinen eigenen Stapelkontext, deshalb hier ausdruecklich.

   NICHT `.chat` und `.chat-schalter`: die stehen weiter oben auf
   `position:fixed`, und diese Regel hat sie auf `relative` zurueckgesetzt.
   Damit war das Chatfenster nicht mehr am Bildschirm verankert, sondern
   floss ans Seitenende - und `right:20px` schob es als relativer Versatz
   um 20 px nach LINKS aus dem Bild heraus. Genau so sah man es: der Chat
   am unteren Rand angeschnitten, das Emoji-Feld halb abgeschnitten.
   Ein eigenes z-index brauchen sie nicht, sie haben laengst 40. */
/* `nav` steht hier bewusst NICHT mehr drin.
   `position:relative` hat das `sticky` aus der Grundregel ueberschrieben -
   die Kopfzeile scrollte damit einfach weg. Aufgefallen ist es an den
   Marktfiltern: die kleben bei `top:82px`, weil dort die Navigation stehen
   sollte. Ohne sie blieb ein 82 px hoher Streifen, durch den die Kacheln
   sichtbar durchliefen.
   Fuer die Ebene ueber den Sternen braucht `nav` das gar nicht: es ist
   durch `sticky` bereits positioniert, und sein z-index steht weiter
   unten auf 1000. */
main{position:relative; z-index:1}

/* Grosse weiche Farbflaechen sind auf schwachen Geraeten teuer. Wer
   "weniger Effekte" eingestellt hat, bekommt die Sterne, aber kein
   Leuchten. */
@media (prefers-reduced-motion: reduce){
  body::after{background:none}
}

/* ── Guthaben oben rechts: Schalter statt Zahl ────────────────────────
   Aufladen und Auszahlen haengen am GELD, nicht am Profil. Vorher musste
   man ueber das Konto gehen, um sein Guthaben zu bewegen - eine Ebene,
   die nichts erklaert. */

.guthaben{position:relative}

.guthaben-knopf{
  display:flex; align-items:center; gap:8px; height:36px; padding:0 12px;
  border-radius:var(--r); cursor:pointer; font:inherit;
  border:1px solid var(--hairline-2); background:var(--surface-2);
  color:var(--accent); font-family:var(--mono); font-size:14.5px; font-weight:600;
  transition:border-color var(--schnell), background var(--schnell);
}
.guthaben-knopf:hover{border-color:var(--accent)}
.guthaben-knopf[aria-expanded="true"]{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}
/* Der Pfeil dreht sich - die einzige Bewegung hier, und sie sagt etwas. */
.guthaben-pfeil{transition:transform var(--schnell)}
.guthaben-knopf[aria-expanded="true"] .guthaben-pfeil{transform:rotate(180deg)}

.guthaben-feld{
  position:absolute; top:calc(100% + 9px); right:0; width:286px; z-index:60;
  background:var(--surface); border:1px solid var(--hairline-2);
  border-radius:var(--r); overflow:hidden;
  box-shadow:0 24px 60px -18px rgba(17,18,20,.9),
             0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}
.guthaben-kopf{
  padding:14px 16px 12px; border-bottom:1px solid var(--hairline);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 7%, transparent), transparent);
}
.guthaben-zeile{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.guthaben-gross{font-family:var(--mono); font-size:21px; font-weight:600; color:var(--accent)}
.guthaben-liste{display:flex; flex-direction:column; padding:6px}
.guthaben-liste a{
  display:flex; align-items:center; gap:11px; padding:10px 11px;
  border-radius:5px; transition:background var(--schnell);
}
.guthaben-liste a:hover{background:var(--surface-2)}
.guthaben-liste svg{flex-shrink:0}
.guthaben-liste strong{display:block; font-size:14px; font-weight:500}
.guthaben-liste em{display:block; font-size:12px; color:var(--ink-3); font-style:normal}

@media (max-width:720px){
  /* Auf dem Handy von der rechten Kante weg, sonst haengt es halb draussen. */
  .guthaben-feld{right:auto; left:0; width:min(286px, calc(100vw - 32px))}
}

/* ── Verlauf ─────────────────────────────────────────────────────────
   Ein Zeitstrahl aus sechs Quellen. Die Farbe sagt die RICHTUNG des
   Geldes, nicht die Art des Vorgangs: beim Ueberfliegen sucht man
   "rein oder raus", nicht "Kauf oder Auszahlung". */

.verlauf-reiter{display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 4px}
.verlauf-reiter a{
  padding:6px 12px; border-radius:5px; font-size:13px;
  border:1px solid var(--hairline-2); color:var(--ink-2);
  transition:border-color var(--schnell), color var(--schnell);
}
.verlauf-reiter a:hover{color:var(--ink); border-color:var(--accent)}
.verlauf-reiter a.an{
  background:var(--accent); color:var(--accent-ink); border-color:transparent;
}

.verlauf{display:flex; flex-direction:column}
.verlauf-posten{
  display:flex; align-items:center; gap:14px;
  padding:13px 2px; border-bottom:1px solid var(--hairline);
}
.verlauf-posten:last-child{border-bottom:none}
.verlauf-zeichen{
  width:32px; height:32px; border-radius:var(--r); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hairline-2); background:var(--surface-2);
  color:var(--ink-2);
}
/* Gruen rein, Bernstein raus, Grau bewegt kein Geld. */
.verlauf-posten.rein .verlauf-zeichen{
  color:var(--good); border-color:color-mix(in srgb, var(--good) 35%, transparent);
  background:color-mix(in srgb, var(--good) 10%, transparent);
}
.verlauf-posten.raus .verlauf-zeichen{
  color:var(--accent); border-color:color-mix(in srgb, var(--accent) 35%, transparent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}
.verlauf-text{flex:1; min-width:0}
.verlauf-text strong{display:block; font-size:14px; font-weight:500}
.verlauf-text span{display:block; font-size:12px; color:var(--ink-3); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.verlauf-betrag{text-align:right; flex-shrink:0}
.verlauf-betrag strong{
  display:block; font-family:var(--mono); font-size:14px; font-weight:600;
  color:var(--ink-2);
}
.verlauf-posten.rein .verlauf-betrag strong{color:var(--good)}
.verlauf-posten.raus .verlauf-betrag strong{color:var(--accent)}
.verlauf-betrag span{
  display:block; font-family:var(--mono); font-size:11px; color:var(--ink-3);
  margin-top:2px;
}
.verlauf-zustand{flex-shrink:0; width:86px; text-align:right}
.verlauf-zustand span{
  font-family:"Chakra Petch",Barlow,sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:3px; border:1px solid var(--hairline);
  color:var(--ink-3);
}
.verlauf-posten.offen .verlauf-zustand span{
  color:var(--warn); border-color:color-mix(in srgb, var(--warn) 40%, transparent);
}
.verlauf-posten.schlecht .verlauf-zustand span{
  color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, transparent);
}

@media (max-width:720px){
  /* Der Zustand faellt zuerst weg - die Farbe des Betrags sagt das Meiste
     schon, und die Zeile darf auf dem Handy nicht umbrechen. */
  .verlauf-zustand{display:none}
  .verlauf-text span{white-space:normal}
}

/* ── Die vier Zahlen ueber dem Verlauf ──────────────────────────────── */
.konto-zahlen{
  display:grid; gap:1px; margin:0; background:var(--hairline);
  border:1px solid var(--hairline); border-radius:var(--r); overflow:hidden;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
}
.konto-zahlen > div{background:var(--surface); padding:12px 16px}
.konto-zahlen dt{
  font-family:"Chakra Petch",Barlow,sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
.konto-zahlen dd{
  margin:4px 0 0; font-family:var(--mono); font-size:19px; font-weight:600;
}
.konto-zahlen dd.betont{color:var(--accent)}

/* ---------------------------------------------------------- Kaufgesuche

   Der Markt hat zwei Seiten: was angeboten wird und was gesucht wird. Der
   Schalter steht ueber beiden Listen - nicht als Menuepunkt irgendwo, denn
   es ist dieselbe Sache aus zwei Richtungen.

   Die Gesuchliste ist bewusst eine LISTE, kein Kachelraster. Beim Markt
   stoebert man; hier sucht man eine Antwort auf genau eine Frage - kann ich
   das liefern, und was bekomme ich dafuer. Zeilen lassen sich vergleichen,
   Kacheln nicht. */

.markt-schalter {
  display: flex;
  gap: 2px;
  margin: 0 0 14px;
  padding: 3px;
  border-radius: 11px;
  background: var(--flaeche-2, #1f2124);
  width: fit-content;
}
.mschalter {
  padding: 7px 20px;
  border-radius: 9px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--text-schwach, #a8a9af);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.mschalter:hover { color: var(--text, #e9ecf8); }
.mschalter.an {
  background: var(--flaeche, #28292e);
  color: var(--text, #e9ecf8);
  box-shadow: 0 1px 3px rgba(29,30,32,.35);
}

.gesuch-liste { display: flex; flex-direction: column; gap: 8px; }

.gesuch {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--flaeche, #28292e);
  border: 1px solid var(--rand, #323439);
  /* Die Seltenheitsfarbe als schmale Kante links - dieselbe Sprache wie
     auf den Marktkarten, nur ruhiger. */
  border-left: 3px solid var(--c, #323439);
}
/* Was ich liefern kann, steht optisch vorn. Alles andere ist fuer einen
   Verkaeufer Hintergrundrauschen. */
.gesuch.lieferbar { border-color: color-mix(in srgb, var(--akzent) 45%, var(--rand)); }
.gesuch:not(.lieferbar) { opacity: .62; }

.gesuch .bild { width: 56px; height: 56px; position: relative; }
.gesuch .bild img { width: 100%; height: 100%; object-fit: contain; }
.gesuch .bild .tag { display: none; }
.gesuch .was { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gesuch .was .nm {
  font-weight: 600;
  color: var(--text, #e9ecf8);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gesuch .geld { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.gesuch .geld .price { font-size: 1.05rem; }
.gesuch .tat { display: flex; align-items: center; gap: 6px; }
.gesuch .tat form { display: flex; align-items: center; gap: 6px; margin: 0; }
.gesuch .menge { width: 62px; text-align: center; }

/* Die Leiste beim Anlegen - dieselbe Bauart wie beim Verkaufen. */
.gesuchleiste {
  width: 300px;
  flex: 0 0 300px;
  align-self: flex-start;
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  background: var(--flaeche, #28292e);
  border: 1px solid var(--rand, #323439);
}
.posten { display: flex; flex-direction: column; gap: 8px; }
.posten-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 74px;
  gap: 6px;
  align-items: center;
}
.posten-zeile .nm {
  font-size: .85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gesuch-summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid var(--rand, #323439);
}
.waehlbar { cursor: pointer; }
.waehlbar .karte-haken { position: absolute; opacity: 0; pointer-events: none; }
.waehlbar.gewaehlt { outline: 2px solid var(--akzent, #f0b429); outline-offset: -2px; }

@media (max-width: 860px) {
  .gesuchleiste { width: 100%; flex: 1 1 100%; position: static; }
  .gesuch {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas: "bild was" "geld geld" "tat tat";
    row-gap: 8px;
  }
  .gesuch .bild { grid-area: bild; width: 48px; height: 48px; }
  .gesuch .was { grid-area: was; }
  .gesuch .geld { grid-area: geld; align-items: flex-start; }
  .gesuch .tat { grid-area: tat; }
  .gesuch .tat form { width: 100%; }
  .gesuch .tat .btn { flex: 1; }
}

/* ==================================================================
   Meine Gesuche - Kacheln, nicht Liste
   ==================================================================
   Auf der Verkaufsseite ist die Frage "was koennte ich liefern?", und
   dafuer ist eine Liste richtig: viele fremde Posten, schnell zu
   ueberfliegen. Hier ist die Frage "was habe ich laufen und was kostet
   es mich" - wenige eigene Posten, zu jedem drei Zahlen. Dafuer sind
   Kacheln richtig.

   Die erste Kachel ist das Anlegen. Auf einer leeren Seite ist das die
   einzige sinnvolle Handlung; ein Knopf in der Ecke laesst sie wie eine
   Nebensache aussehen. */
.gesuch-gebunden{display:flex; flex-direction:column; align-items:flex-end;
  gap:2px}
.gesuch-gebunden b{font-size:18px; font-variant-numeric:tabular-nums}

.gesuch-raster{display:grid; gap:12px; margin-top:18px;
  grid-template-columns:repeat(auto-fill,minmax(236px,1fr))}

.gesuch-neu{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; min-height:186px; padding:14px;
  border-radius:var(--r); border:1px dashed var(--hairline-2);
  background:transparent; color:var(--ink-2);
  font:inherit; font-weight:600; cursor:pointer; text-decoration:none;
  transition:border-color .18s, color .18s, background .18s;
}
.gesuch-neu .kreuz{font-size:30px; line-height:1; font-weight:400}
.gesuch-neu:hover,.gesuch-neu:focus-visible{
  border-color:var(--accent); color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);
}

.gkarte{
  display:flex; flex-direction:column; gap:11px; padding:13px 15px;
  border-radius:var(--r); background:var(--surface-2);
  border:1px solid var(--hairline);
  /* Die Seltenheitsfarbe oben als schmale Kante - dieselbe Sprache wie
     auf den Marktkarten, nur ruhiger. */
  border-top:3px solid var(--c,var(--hairline));
}
.gk-kopf{display:flex; align-items:center; gap:10px; min-width:0}
.gk-bild{flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center}
.gk-bild img{max-width:100%; max-height:100%; object-fit:contain}
.gk-namen{display:flex; flex-direction:column; gap:1px; min-width:0}
.gk-namen .nm{font-weight:600; color:var(--ink); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gk-namen .nm:hover{color:var(--accent)}

/* Beschriftung links, Zahl rechts - so stehen die Zahlen untereinander,
   auch wenn eine Beschriftung laenger ist als die andere. Nebeneinander
   in Spalten verrutschen sie, sobald eine davon umbricht. */
.gk-zahlen{display:grid; gap:3px; margin:0}
.gk-zahlen > div{display:flex; align-items:baseline; justify-content:space-between;
  gap:12px}
.gk-zahlen dt{font-size:12.5px; color:var(--ink-3)}
.gk-zahlen dd{margin:0; font-family:var(--mono); font-size:14px;
  font-variant-numeric:tabular-nums}
.gk-zahlen dd.mond{color:var(--mond)}

.gk-lauf{height:4px; border-radius:99px; background:var(--hairline); overflow:hidden}
.gk-lauf span{display:block; height:100%; background:var(--accent)}

.gk-fuss{margin-top:auto; display:flex; align-items:flex-end;
  justify-content:space-between; gap:10px; padding-top:2px}
.gk-fuss form{margin:0}

/* Auf der Verkaufsseite: "das kann ich liefern". Die Kachel bekommt dazu
   einen Rand in der Akzentfarbe - nicht die ganze Farbe, sonst gewinnt sie
   gegen die Seltenheit, und die ist das Ordnungssystem aus dem Spiel. */
.marktkarte.lieferbar{border-color:color-mix(in srgb,var(--accent) 45%,var(--hairline))}
.foot .kannst{color:var(--mond); font-weight:600}

/* Auf dem Handy steht alles untereinander. Eine 186 px hohe Kachel nur zum
   Anlegen waere dort ein halber Bildschirm, bevor das erste Gesuch kommt. */
@media (max-width:520px){
  .gesuch-neu{flex-direction:row; gap:10px; min-height:0; padding:16px}
  .gesuch-neu .kreuz{font-size:22px}
}

/* Passwortformular auf der Kontoseite. Drei Felder untereinander, damit
   die Beschriftungen lesbar bleiben - nebeneinander wird es auf dem Handy
   zu eng, und genau von dort kommt der Anlass. */
.pwform { display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.pwform label { display: flex; flex-direction: column; gap: 4px; }
.hinweis { padding: 8px 11px; border-radius: 9px; font-size: .9rem; }
.hinweis.gut { background: rgba(80, 200, 120, .12); color: #7fd6a0; }
.hinweis.schlecht { background: rgba(230, 90, 90, .12); color: #e88; }

/* Auf schmalen Schirmen wird aus der Seitenleiste eine Leiste UNTEN, die
   stehen bleibt.

   Vorher rutschte sie ans Ende der Seite: wer oben ein Item anklickte,
   musste an hundert Kacheln vorbeiscrollen, um Menge und Preis zu setzen -
   und wieder hoch fuer das naechste. Jetzt bleibt sie im Blick, und die
   Postenliste scrollt in sich selbst statt die ganze Seite zu verlaengern. */
@media (max-width: 860px) {
  .gesuchleiste {
    position: sticky;
    bottom: 0;
    top: auto;
    z-index: 5;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -10px 26px rgba(17,18,20,.45);
    /* Leer nimmt sie keinen Platz weg - sie taucht erst auf, wenn wirklich
       etwas ausgewaehlt ist. */
    max-height: 62vh;
  }
  .gesuchleiste.leer { display: none; }
  .posten { max-height: 34vh; overflow-y: auto; }
}

/* Auch auf breiten Schirmen darf die Liste nicht ueber den Rand wachsen:
   bei zwanzig Posten stuende der Knopf sonst unterhalb des Bildschirms. */
.gesuchleiste .posten { max-height: 52vh; overflow-y: auto; }

/* Eigene Flaeche fuer das Anlegen von Kaufgesuchen - NICHT .marktflaeche.
   Die traegt weiter oben ein globales `flex-direction: column`, damit auf
   der Marktseite die Filterleiste ueber dem Raster sitzt. Wer sie hier
   mitbenutzt, bekommt die Auswahlleiste unter das Raster geschoben, auf
   jeder Bildschirmbreite. Genau das war der Fall. */
.gesuchflaeche {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 18px;
  margin-top: 14px;
}
@media (max-width: 860px) {
  .gesuchflaeche { flex-direction: column; align-items: stretch; }
}

/* Filterspalte auf der Gesuchseite - links, nicht oben.

   Die Marktseite draengt ihre Filter unter `@media (hover:none)` in eine
   Leiste ueber dem Raster. Das spart dort Platz, liest sich aber schlecht:
   Suche, Preisspanne und zwei Reihen Chips nebeneinander brechen um, und
   der Anwenden-Knopf landet mittendrin. Hier bekommt jede Gruppe ihre
   eigene Zeile. */
.gesuchfilter {
  width: 216px;
  flex: 0 0 216px;
  align-self: flex-start;
  position: sticky;
  top: 76px;
  padding: 14px;
  border-radius: 14px;
  background: var(--flaeche, #28292e);
  border: 1px solid var(--rand, #323439);
}
.gesuchfilter form { display: flex; flex-direction: column; gap: 9px; }
.gesuchfilter .suchfeld { width: 100%; }
.chips.spalte { display: flex; flex-direction: column; gap: 5px; }
.chips.spalte .chip { justify-content: flex-start; }
.chips.spalte .chip input { position: absolute; opacity: 0; pointer-events: none; }
.chips.spalte .chip.an { outline: 1px solid var(--akzent, #f0b429); }

@media (max-width: 860px) {
  .gesuchfilter { width: 100%; flex: 1 1 100%; position: static; }
  .chips.spalte { flex-direction: row; flex-wrap: wrap; }
}

/* ------------------------------------------------- Fenster: Gesuch anlegen

   Kein eigener Seitenaufruf, sondern ein Fenster ueber der Liste - man
   verliert die laufenden Gesuche nicht aus dem Blick, und Escape schliesst
   es. Innen zwei Spalten, beide gleichzeitig sichtbar: links stoebern,
   rechts einstellen. Wer erst auswaehlt und dann scrollen muss, um Menge und
   Preis zu setzen, hat die Auswahl schon wieder vergessen. */
.gfenster {
  width: min(940px, 94vw);
  max-height: 88vh;
  padding: 0;
  border: 1px solid var(--rand, #323439);
  border-radius: 16px;
  background: var(--flaeche, #28292e);
  color: var(--text, #e9ecf8);
  overflow: hidden;
}
.gfenster::backdrop { background: rgba(7,7,8,.72); }
.gfenster form:last-of-type { display: flex; flex-direction: column;
  max-height: calc(88vh - 78px); }
.gf-schliessen { position: absolute; top: 10px; right: 12px; }
.gf-schliessen button {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--rand, #323439);
  background: transparent; color: var(--text-schwach, #a8a9af); font-size: 1.1rem;
}
.gf-kopf { padding: 18px 20px 12px; border-bottom: 1px solid var(--rand, #323439); }
.gf-kopf h2 { margin: 0 0 2px; font-size: 1.15rem; }

.gf-koerper { display: grid; grid-template-columns: 1fr 330px;
  gap: 0; min-height: 0; flex: 1 1 auto; overflow: hidden; }
/* `min-height: 0` ist hier kein Feinschliff, sondern der Unterschied
   zwischen "scrollt" und "scrollt nicht". Ein Flex-Kind bekommt als
   Mindesthoehe seinen Inhalt - das Raster wuchs also auf volle Hoehe, das
   Fenster schnitt es ab, und `overflow-y: auto` lief ins Leere. Man konnte
   nur noch suchen. */
.gf-katalog { display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; min-width: 0; min-height: 0;
  border-right: 1px solid var(--rand, #323439); }
.gf-katalog .suchfeld { width: 100%; }

.gf-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 4px;
}
.gf-kachel {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 5px; cursor: pointer;
  border-radius: 10px;
  border: 1px solid var(--rand, #323439);
  border-top: 2px solid var(--c, #323439);
  background: var(--flaeche-2, #1f2124);
  color: var(--text, #e9ecf8);
}
.gf-kachel img { width: 100%; height: 46px; object-fit: contain; }
.gf-kachel .gf-nm { font-size: .72rem; line-height: 1.15; text-align: center;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; }
.gf-kachel:hover { border-color: var(--akzent, #f0b429); }
.gf-kachel.an { outline: 2px solid var(--akzent, #f0b429); outline-offset: -2px; }

.gf-wahl { display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; min-width: 0; overflow-y: auto; }
.gf-wahl-titel { font-size: .95rem; }
.gf-posten { display: flex; flex-direction: column; gap: 7px; }
.gf-zeile {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 52px 66px 24px;
  gap: 5px; align-items: center;
}
.gf-zeile img { width: 30px; height: 30px; object-fit: contain; }
.gf-zeile .nm { font-size: .8rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.gf-weg { border: 0; background: transparent; cursor: pointer;
  color: var(--text-schwach, #a8a9af); font-size: 1.05rem; }

.gf-fuss {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 13px 18px;
  border-top: 1px solid var(--rand, #323439);
  background: var(--flaeche-2, #1f2124);
}
.gf-laufzeit { display: flex; flex-direction: column; gap: 3px; }
.gf-summe { display: flex; flex-direction: column; gap: 2px; margin-left: auto; }

@media (max-width: 760px) {
  .gfenster { width: 96vw; max-height: 92vh; }
  .gf-koerper { grid-template-columns: 1fr; }
  .gf-katalog { border-right: 0;
    border-bottom: 1px solid var(--rand, #323439); }
  .gf-raster { max-height: 34vh; }
  .gf-fuss .btn { flex: 1; }
}

/* Menge und Preis. Die Mindestabnahme stand hier als dritte Spalte und
   ist weggefallen - beide Raster muessen dieselbe Zahl Spalten haben,
   sonst stehen die Kopfzeilen ueber den falschen Feldern. */
.gf-zeile { grid-template-columns: 28px minmax(0, 1fr) 48px 60px 22px; }
/* display:grid gewinnt sonst gegen das hidden-Attribut - dieselbe Falle
   wie beim Chatfenster. Die Spaltenkoepfe standen deshalb ueber einer
   leeren Auswahl. */
.gf-spalten[hidden] { display: none; }
.gf-spalten {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 48px 60px 22px;
  gap: 5px;
  font-size: .7rem;
  padding-bottom: 2px;
}

/* ------------------------------------------------------------ Nachrichten

   Bewusst schlicht: Liste, Verlauf, Eingabezeile. Der Chat ist hier kein
   Selbstzweck, sondern der Weg zu einem Handel - alles, was davon ablenkt,
   waere Beiwerk. */
/* ---- Nachrichten: Liste links, Gespraech rechts ----
   Wie in jedem Chat-Programm, und aus demselben Grund: man springt zwischen
   Leuten hin und her, und wer dafuer jedes Mal ueber eine Uebersichtsseite
   muss, verliert den Faden. Die Liste bleibt stehen, nur rechts wechselt
   der Inhalt.

   Feste Hoehe statt mitwachsender Seite: sonst scrollt bei einem langen
   Gespraech die ganze Seite, die Liste rutscht nach oben aus dem Bild und
   das Eingabefeld wandert ans Ende. */
.dm-flaeche {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 14px;
  height: clamp(420px, 68vh, 760px);
}
.dm-spalte, .dm-fenster {
  display: flex; flex-direction: column; min-height: 0;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.dm-suche { padding: 10px; border-bottom: 1px solid var(--hairline); margin: 0; }
.dm-suche .suchfeld { width: 100%; }
.dm-suche input { width: 100%; }
/* min-height:0 ist der Teil, ohne den die Spalte nicht scrollt, sondern
   waechst - derselbe Fallstrick wie im Anlegen-Fenster. */
.dm-rollbar { flex: 1; min-height: 0; overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 5px; scrollbar-width: thin; }
.dm-abschnitt { padding: 2px 4px 4px; }

.dm-titel { margin-bottom: 2px; }
.dm-titel.weg { display: none; }

/* Die Kopfzeile des Gespraechs - schmaler als eine Seitenueberschrift,
   sie steht ja innerhalb einer Spalte. */
.dm-kopf {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-bottom: 1px solid var(--hairline);
}
.dm-kopf-text { display: flex; flex-direction: column; gap: 1px;
  min-width: 0; flex: 1; }
.dm-kopf-text strong { font-size: 15px; }
.dm-kreis.gross { width: 38px; height: 38px; }
/* Auf breiten Schirmen steht die Liste daneben - dann ist ein
   Zurueck-Knopf eine Tuer, die ins selbe Zimmer fuehrt. */
.dm-zurueck { display: none; }

.dm-leer {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  color: var(--ink-2); text-align: center; padding: 24px;
}
.dm-leer-zeichen { font-size: 34px; opacity: .5; line-height: 1; }
.empty.klein { border: 0; padding: 18px 10px; }

.dm-liste, .dm-treffer { display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; }
.dm-person {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: 12px; text-decoration: none;
  background: var(--flaeche, #28292e);
  border: 1px solid var(--rand, #323439);
  color: var(--text, #e9ecf8);
}
.dm-person:hover { border-color: var(--akzent, #f0b429); }
.dm-person.neu { border-color: color-mix(in srgb, var(--akzent) 55%, var(--rand)); }
/* In der Spalte: ruhiger, dafuer eine deutliche Markierung fuer das
   Gespraech, das gerade rechts steht. */
.dm-rollbar .dm-person { background: transparent; border-color: transparent;
  padding: 9px 10px; }
.dm-rollbar .dm-person:hover { background: var(--surface-2);
  border-color: var(--hairline); }
.dm-rollbar .dm-person.an { background: var(--surface-2);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--hairline)); }
.dm-rollbar .dm-person.an .nm { color: var(--accent); }
.dm-person .was { display: flex; flex-direction: column; gap: 1px;
  min-width: 0; flex: 1; }
.dm-person .nm { font-weight: 600; }
.dm-person .small { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.dm-kreis {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: var(--flaeche-2, #1f2124);
  border: 1px solid var(--rand, #323439);
}
.dm-zahl {
  min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: var(--akzent, #f0b429); color: #1a1200;
  font-size: .72rem; font-weight: 700; text-align: center;
}
.dm-zahl.klein { font-size: .66rem; margin-left: 4px; }

.dm-verlauf {
  display: flex; flex-direction: column; gap: 8px;
  flex: 1; min-height: 0; overflow-y: auto; padding: 12px 13px;
  scrollbar-width: thin;
}
.dm-zeile { max-width: 74%; padding: 8px 12px; border-radius: 13px;
  display: flex; align-items: baseline; gap: 9px; }
.dm-zeile.meins { align-self: flex-end;
  background: color-mix(in srgb, var(--akzent) 20%, var(--flaeche)); }
.dm-zeile.seins { align-self: flex-start; background: var(--flaeche, #28292e);
  border: 1px solid var(--rand, #323439); }
.dm-text { white-space: pre-wrap; word-break: break-word; }

/* Ein Angebot ist keine Nachricht - es sieht auch nicht so aus. Beim
   Annehmen wird gebucht, also bekommt es eine eigene Karte mit Zahlen. */
.dm-angebot {
  align-self: stretch; max-width: 460px;
  padding: 12px 14px; border-radius: 13px;
  background: var(--flaeche, #28292e);
  border: 1px solid var(--akzent, #f0b429);
  display: flex; flex-direction: column; gap: 9px;
}
.dm-angebot.meins { align-self: flex-end; }
.dm-angebot.seins { align-self: flex-start; }
.dm-angebot.zustand-abgelehnt, .dm-angebot.zustand-zurueckgezogen,
.dm-angebot.zustand-hinfaellig { border-color: var(--rand, #323439); opacity: .66; }
.dm-angebot.zustand-angenommen { border-color: var(--good, #5c9); }
.dm-a-kopf { display: flex; align-items: center; gap: 10px; }
.dm-a-kopf img { width: 44px; height: 44px; object-fit: contain; }
.dm-a-kopf > div { display: flex; flex-direction: column; gap: 1px; }
.dm-a-zahlen { display: flex; gap: 18px; margin: 0; }
.dm-a-zahlen div { display: flex; flex-direction: column; gap: 1px; }
.dm-a-zahlen dt { font-size: .72rem; color: var(--text-schwach, #a8a9af); }
.dm-a-zahlen dd { margin: 0; }
.dm-a-tat { display: flex; gap: 7px; }
.dm-a-tat form { margin: 0; }
.warn { color: var(--warn, #e8b04b); }

.dm-senden { display: flex; gap: 8px; margin: 0;
  padding: 10px 13px; border-top: 1px solid var(--hairline); }
.dm-senden input { flex: 1; }
/* Schritt 1 im Angebotsfenster: verkaufen oder kaufen. Zwei grosse
   Flaechen statt eines Auswahlfeldes - es ist die Frage, die alles
   Weitere bestimmt, und keine Einstellung unter vielen. */
.gf-richtung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; padding: 18px; }
.gf-wahlknopf {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 22px 16px; cursor: pointer; text-align: center;
  border-radius: var(--r); border: 1px dashed var(--hairline-2);
  background: transparent; color: var(--ink); font: inherit;
  transition: border-color .16s, background .16s, color .16s;
}
.gf-wahlknopf strong { font-size: 15px; }
.gf-wk-zeichen { font-size: 22px; line-height: 1; color: var(--ink-3); }
.gf-wahlknopf:hover, .gf-wahlknopf:focus-visible {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.gf-wahlknopf:hover .gf-wk-zeichen { color: var(--accent); }
.gf-richtung-schild { margin-right: auto; }

/* Der Befund der Auszahlungspruefung. Warnfarbe, aber kein Alarm: hier
   steht ein Verdacht, kein Urteil. */
.aus-befund {
  margin: 10px 0 0; padding: 11px 13px; border-radius: 10px;
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}
.aus-befund strong { color: var(--warn); }
.aus-befund p { margin: 4px 0 0; }

/* Der letzte Schritt: nur noch der Satz, der gleich gilt. Bewusst ohne
   Katalog und ohne Felder daneben - wer hier noch etwas anderes sieht,
   liest den Satz nicht. */
.gf-pruefen { display: flex; flex-direction: column; gap: 10px;
  padding: 22px 20px; }
.gf-satz { margin: 0; font-size: 15.5px; line-height: 1.5; }
.gf-pruefen-tat { display: flex; gap: 10px; justify-content: flex-end;
  flex-wrap: wrap; margin-top: 4px; }

.dm-gewaehlt { display: flex; align-items: center; gap: 9px; }
.dm-gewaehlt img { width: 40px; height: 40px; object-fit: contain; }
.gf-wahl label { display: flex; flex-direction: column; gap: 3px; }

@media (max-width: 760px) {
  .dm-flaeche { grid-template-columns: minmax(0, 1fr);
    height: calc(100vh - 190px); min-height: 380px; }
  .dm-flaeche.offen .dm-spalte { display: none; }
  .dm-flaeche:not(.offen) .dm-fenster { display: none; }
  .dm-zurueck { display: inline-flex; }
  .dm-titel { display: none; }
  /* Der Knopf fuer den Live-Chat sitzt unten rechts - und damit genau auf
     dem Senden-Knopf des Gespraechs. Er rueckt hoch, solange ein Gespraech
     offen ist. */
  body:has(.dm-flaeche.offen) .chat-schalter { bottom: 84px; }
}
@media (max-width: 640px) {
  .dm-zeile, .dm-angebot { max-width: 92%; }
}

/* Emoji-Auswahl. Das Feld klappt NACH OBEN auf: die Eingabezeile sitzt in
   beiden Chats unten, ein Feld darunter waere ausserhalb des Bildschirms. */
.emoji-knopf {
  width: 38px; height: 38px; flex: none; cursor: pointer;
  display: inline-grid; place-items: center; padding: 0;
  border-radius: 10px; color: var(--ink-2, #c9cbd0);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18,19,21,.72);
  transition: color .15s, border-color .15s, background .15s;
}
.emoji-knopf:hover, .emoji-knopf[aria-expanded="true"] {
  color: var(--accent, #5eead4); border-color: var(--accent, #5eead4);
}
/* Fest im Fenster, damit keine Wand mit overflow:hidden es abschneidet
   (emoji.js setzt left/bottom am Knopf). */
.emoji-feld {
  position: fixed; z-index: 3000; width: 320px; max-width: calc(100vw - 16px);
  display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
  background: #1c1d20; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.emoji-reiter { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
.emoji-reiter button {
  flex: 1; border: 0; background: transparent; cursor: pointer; padding: 6px 0;
  font-size: 18px; line-height: 1; border-radius: 8px; opacity: .55;
}
.emoji-reiter button.an { opacity: 1; background: rgba(255,255,255,.08); }
.emoji-raster {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  padding: 8px; height: 232px; overflow-y: auto; overscroll-behavior: contain;
  align-content: start;
}
.emoji-raster button {
  border: 0; background: transparent; cursor: pointer; aspect-ratio: 1;
  font-size: 24px; line-height: 1; padding: 0; border-radius: 8px;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.emoji-raster button:hover { background: rgba(255,255,255,.08); }
.emoji-tipp { margin: 0; padding: 7px 10px 9px; font-size: 11.5px; color: var(--ink-3, #8b8e96);
  border-top: 1px solid rgba(255,255,255,.08); }
/* Handy: Blatt von unten, ueber die ganze Breite und ueber der Leiste. */
.emoji-feld.blatt { left: 6px; right: 6px; width: auto; max-width: none; }


/* ==================================================================
   MOONLY CANDY ARCADE — gemeinsames Erscheinungsbild
   ==================================================================
   Diese letzte Schicht ist absichtlich kompakt und rueckbaubar. Sie setzt
   nur das Design neu auf; Struktur, Formulare und Bot-relevante Ablaufe
   bleiben unveraendert. */

:root {
  /* Grau statt Violett. Der Grund traegt die ganze Seite, und ein
     neutraler Grund laesst die Seltenheitsfarben der Items fuer sich
     sprechen - vorher lag ueber allem derselbe Lilaschleier. Die
     Flaechen darauf bleiben, wie sie waren. */
  --ground:#232528; --surface:rgba(42,44,48,.88);
  --surface-2:rgba(51,53,58,.9); --surface-3:rgba(65,67,74,.92);
  --hairline:rgba(223,224,226,.13); --hairline-2:rgba(230,231,232,.25);
  --ink:#fafcff; --ink-2:#cbcfd3; --ink-3:#979ba0;
  --accent:#7cf7d4; --accent-ink:#10271f; --mond:#ffd86b;
  --good:#70f2b8; --warn:#ffd166; --bad:#ff7795;
  --card:var(--surface); --line:var(--hairline); --muted:var(--ink-2);
  /* Dieselbe Farbe, aber DECKEND. Alles, was ueber der Seite schwebt -
     Kontomenue, Fenster -, braucht sie: --surface ist zu 12 % durchsichtig,
     und darunter durchscheinender Text liest sich als Fehler. Der Wert ist
     der Kompositwert von --surface ueber --ground, sieht also genauso aus
     wie bisher, nur ohne Durchblick. */
  --surface-fest:#282a2e;   /* --surface deckend ueber dem Grund */
  --r:20px;
  --shadow:0 18px 50px -26px rgba(0,24,49,.9),0 2px 0 rgba(255,255,255,.035) inset;
  --schein:0 0 0 4px rgba(124,247,212,.12),0 14px 32px -16px rgba(124,247,212,.65);
  --schnell:.16s cubic-bezier(.2,.85,.3,1);
  --ruhig:.3s cubic-bezier(.2,.85,.3,1);
}

html{scrollbar-color:#4a4d57 #242529}
body{
  min-height:100vh;
  /* Grau. Vorher lag hier ein violetter Verlauf, und der - nicht
     `--ground` - war es, der die ganze Seite eingefaerbt hat: eine
     Hintergrundfarbe am selben Element wird davon ueberdeckt.

     Die zwei weichen Lichter bleiben, nur ohne Farbe. Ohne sie ist die
     Flaeche eine tote Platte; mit ihnen hat sie Tiefe, ohne den
     Seltenheitsfarben der Items ins Gehege zu kommen - und genau die
     sollen auf einem Marktplatz sprechen, nicht der Grund. */
  background:
    radial-gradient(70vw 55vw at -8% -12%,rgba(255,255,255,.055),transparent 70%),
    radial-gradient(60vw 50vw at 108% 8%,rgba(255,255,255,.035),transparent 72%),
    linear-gradient(145deg,#0d0e0f 0%,#121315 48%,#212327 100%);
  color:var(--ink); font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; font-weight:600; line-height:1.55;
}
body::before{
  opacity:.55;
  background-image:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.75) 0 1.5px,transparent 2px),
    radial-gradient(circle at 77% 14%,rgba(255,216,107,.7) 0 1.5px,transparent 2px),
    radial-gradient(circle at 34% 72%,rgba(124,247,212,.55) 0 1px,transparent 2px),
    radial-gradient(circle at 91% 68%,rgba(255,255,255,.6) 0 1.5px,transparent 2px),
    radial-gradient(circle at 58% 42%,rgba(172,212,254,.55) 0 1px,transparent 2px);
  background-size:270px 270px,360px 360px,230px 230px,320px 320px,190px 190px;
}
body::after{
  inset:auto; top:-180px; right:-150px; width:620px; height:620px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,216,107,.13),
  rgba(171,173,178,.08) 42%,transparent 70%); filter:blur(3px);
}
h1,h2,h3,.brand,.item .nm{font-family:"Fredoka","Nunito",sans-serif}
h1{font-size:clamp(31px,4vw,48px);line-height:1.04;letter-spacing:-.035em;
  color:#fff;text-shadow:0 5px 24px rgba(176,178,182,.28)}
h2{font-size:clamp(20px,2vw,25px);letter-spacing:-.02em}
h3{letter-spacing:-.01em}.muted{color:var(--ink-2)}

/* Schwebende Spieleleiste */
/* Die Kopfzeile ist eine LEISTE, keine schwebende Karte. Vorher lag sie
   als abgerundeter Kasten mit Rand, Schatten und 12 px Luft ringsum auf
   der Seite - gemeldet als "das schwebt irgendwie so".

   Vorbild ist Starpets (Aufnahme vom 06.09.): dort stoesst die Leiste an
   alle drei Kanten, und die Filterwand haengt unmittelbar darunter. Kein
   Spalt, kein Radius, kein Schatten - drei Flaechen, die sich beruehren.

   Nebenwirkung, die willkommen ist: die zehn Pixel, um die die klebenden
   Spalten bisher zu tief sassen, waren genau diese Polsterung. */
nav{
  padding:0; border:0; border-bottom:1px solid var(--line);
  background:rgba(13,13,15,.86);
  backdrop-filter:blur(22px) saturate(1.35);
}
nav .inner{
  max-width:none;min-height:64px;padding:9px 18px;gap:10px;
  border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none;
}
.brand{margin-right:10px;font-size:21px;letter-spacing:.025em;color:#fff}
.brand .mark{width:29px;height:29px;border-radius:50%;
  box-shadow:inset -9px 3px 0 0 var(--mond),0 0 20px rgba(255,216,107,.42)}
.navlinks{gap:3px}
nav a.link{
  padding:8px 11px;border-radius:12px;color:var(--ink-2);font-size:14px;
  font-weight:800;transition:color var(--schnell),background var(--schnell),transform var(--schnell)}
nav a.link::after{display:none}
nav a.link:hover{color:#fff;background:rgba(255,255,255,.065);transform:translateY(-1px)}
nav a.link.on{color:#1e1f23;background:var(--accent);box-shadow:0 7px 20px -12px var(--accent)}

main{width:min(1500px,calc(100% - 28px));max-width:none;padding:38px 4px 90px;gap:24px}

/* Flaechen */
.card,.filterbox,.filter,.gesuchfilter,.gesuchleiste,.auswahl,.gfenster,
dialog.overlay,.dm-person,.dm-angebot,.notice,.empty,.gkarte{
  border:1px solid var(--hairline-2);border-radius:var(--r);
  background:linear-gradient(145deg,rgba(57,60,66,.9),rgba(37,39,43,.93));
  box-shadow:var(--shadow);
}
.card{padding:clamp(17px,2vw,25px)}
.notice{padding:13px 16px}.notice.ok{background:rgba(44,116,94,.34)}
.notice.bad{background:rgba(129,40,70,.3)}
.empty{padding:48px 24px;border-style:dashed}

/* Weiche Arcade-Tasten und Eingaben */
.btn,button,input,select,textarea{font-family:"Nunito",sans-serif}
.btn{
  min-height:40px;padding:9px 17px;border:1px solid rgba(235,235,236,.2);
  border-radius:14px;background:rgba(255,255,255,.07);color:var(--ink);
  font-weight:800;box-shadow:0 4px 0 rgba(24,24,25,.34);
  transition:transform .12s ease,box-shadow .12s ease,filter .16s ease,border-color .16s ease;
}
.btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.1);
  box-shadow:0 7px 0 rgba(24,24,25,.28),var(--schein)}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 rgba(24,24,25,.3)}
.btn.primary{
  color:#18251e;border:1px solid rgba(255,255,255,.38);border-radius:14px;
  background:linear-gradient(135deg,#a2ffe4,#64eecb 55%,#5edee8);
  box-shadow:0 5px 0 #238e7b,0 14px 30px -18px #7cf7d4;
}
.btn.primary:hover{background:linear-gradient(135deg,#c1ffed,#72f6d3 55%,#69e9f2);
  box-shadow:0 7px 0 #238e7b,0 17px 34px -15px #7cf7d4}
.btn.primary:active{box-shadow:0 1px 0 #238e7b}
.btn.ghost{background:rgba(255,255,255,.035)}
.btn.danger{background:rgba(255,119,149,.08)}
input,select,textarea{
  min-height:42px;border:1px solid rgba(230,231,232,.22);border-radius:13px;
  background:rgba(22,23,25,.62);color:var(--ink);font-size:14px;font-weight:700;
  box-shadow:0 2px 0 rgba(255,255,255,.025) inset;
}
input:hover,select:hover,textarea:hover{border-color:rgba(207,230,255,.4)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(124,247,212,.13)}
label{color:var(--ink-2);font-weight:800;letter-spacing:.07em}

/* Marktkopf und Kennzahlen */
.markt-kopf{
  position:relative;overflow:hidden;padding:clamp(21px,3vw,34px);
  border:1px solid rgba(231,232,233,.17);border-radius:26px;
  background:radial-gradient(520px 220px at 8% 0%,rgba(175,177,182,.23),transparent 72%),
  radial-gradient(420px 220px at 90% 110%,rgba(92,235,222,.14),transparent 72%),
  rgba(39,40,44,.84);box-shadow:var(--shadow);
}
.markt-kopf::after{content:"";position:absolute;width:180px;height:180px;right:-65px;
  top:-95px;border:30px solid rgba(255,216,107,.07);border-radius:50%;pointer-events:none}
.markt-kopf-text p{font-size:16px}
.markt-zahlen{gap:8px;background:transparent;border:0}
.markt-zahlen>div{min-width:100px;padding:10px 14px;border:1px solid rgba(232,233,234,.15);
  border-radius:15px;background:rgba(255,255,255,.055)}
.markt-zahlen dt{color:var(--ink-3);font-weight:800}
.markt-zahlen dd{font-size:19px;color:#fff}.markt-zahlen dd.mond{color:var(--mond)}
.markt-schalter{padding:5px;border-radius:16px;background:rgba(20,20,22,.45);
  border:1px solid var(--hairline)}
.mschalter{border-radius:11px;font-weight:800}.mschalter.an{color:var(--accent-ink);background:var(--accent)}
.markt-leiste{padding:10px 13px;border-radius:16px;background:rgba(42,44,48,.7);
  border:1px solid var(--hairline)}
.filterbox{overflow:hidden}.filterbox>summary{padding:14px 17px;
  font-family:"Fredoka",sans-serif;font-size:16px}.filter-inhalt{padding:14px 16px 18px}
.suchfeld{border-radius:14px}
.chip,.chip.rar{min-height:34px;padding:6px 10px;border-radius:999px;font-weight:800;
  background:color-mix(in srgb,var(--c,var(--accent)) 10%,rgba(255,255,255,.035));
  border-color:color-mix(in srgb,var(--c,var(--accent)) 34%,transparent)}
.chip.rar:hover{transform:translateY(-2px);box-shadow:0 6px 16px -12px var(--c)}
.chip:has(input:checked){box-shadow:0 0 0 2px color-mix(in srgb,var(--c,var(--accent)) 70%,white 8%)}

/* Itemkarten */
.markt-raster{gap:16px;grid-template-columns:repeat(auto-fill,minmax(174px,1fr))}
.item,.marktkarte{
  overflow:hidden;border:1px solid color-mix(in srgb,var(--c) 31%,var(--hairline));
  border-radius:20px;background:linear-gradient(180deg,
  color-mix(in srgb,var(--c) 10%,rgba(49,51,56,.95)),rgba(34,35,39,.96) 54%);
  box-shadow:0 16px 34px -26px rgba(17,18,20,.9),0 1px rgba(255,255,255,.035) inset;
}
.item .top{height:5px;background:linear-gradient(90deg,transparent,var(--c),transparent)}
.item .bild,.marktkarte .bild{
  height:142px;background:radial-gradient(circle at 50% 58%,
  color-mix(in srgb,var(--c) 31%,transparent),transparent 58%),
  linear-gradient(160deg,color-mix(in srgb,var(--c) 8%,#28292e),#1c1e21);
  border-bottom-color:color-mix(in srgb,var(--c) 25%,transparent)}
.item .bild::before{width:140px;height:140px;opacity:.7}
.item .bild img,.marktkarte .bild img{max-width:116px;max-height:116px;
  filter:drop-shadow(0 12px 13px rgba(0,24,49,.54))}
.item .body{padding:14px 15px}.item .nm{font-size:16px;font-weight:700}
.item .price,.marktkarte .price{color:var(--mond);font-family:"Fredoka",sans-serif;
  font-size:21px;font-weight:700;text-shadow:0 4px 18px rgba(255,216,107,.25)}
.item .foot{padding:10px 15px 13px;background:rgba(255,255,255,.025)}
.item .tag,.marktkarte .bild .tag,.spitzenkarte .bild .tag{
  padding:4px 9px;border:0;border-radius:999px;background:var(--c);color:#18191b;
  font-family:"Fredoka",sans-serif;font-size:10px;font-weight:700;
  box-shadow:0 5px 16px -8px var(--c)}
.marktkarte .bild .stueck{padding:4px 8px;border:1px solid rgba(255,255,255,.15);
  border-radius:999px;background:rgba(20,21,23,.78);box-shadow:none}
.marktkarte:hover,.spitzenkarte:hover,.item:hover{
  transform:translateY(-7px) rotate(.15deg);
  border-color:color-mix(in srgb,var(--c) 72%,white 8%);
  box-shadow:0 20px 40px -22px color-mix(in srgb,var(--c) 52%,transparent),
  0 0 0 3px color-mix(in srgb,var(--c) 10%,transparent)}
.marktkarte:active,.item:active{transform:translateY(-2px) scale(.985)}
.spitze{padding:16px;border-radius:22px;background:rgba(37,38,42,.55);
  border:1px solid var(--hairline)}
.spitze-reihe{gap:12px}.spitzenkarte{border-radius:17px}

/* Tabellen, Status, Dialoge, Nachrichten */
.tablewrap{border:1px solid var(--hairline);border-radius:18px;background:rgba(36,38,42,.65)}
th{color:var(--ink-3);font-weight:800}th,td{border-bottom-color:var(--hairline)}
tbody tr:hover{background:rgba(124,247,212,.045)}
.zustand{border-radius:999px;padding:5px 10px;font-weight:800}
.avatar,.dm-kreis,.step .n,.verlauf-zeichen{border-radius:13px}
.code{border-radius:14px;background:rgba(20,21,23,.62);color:var(--accent)}
dialog.overlay::backdrop,.gfenster::backdrop{background:rgba(7,28,49,.77);backdrop-filter:blur(8px)}
.gfenster,dialog.overlay{color:var(--ink)}
.gf-kachel{border-radius:14px;background:rgba(26,27,30,.72)}
.gf-kachel:hover{transform:translateY(-2px)}.dm-person:hover{transform:translateX(3px)}
.dm-zeile{border-radius:17px}.dm-zeile.meins{background:linear-gradient(135deg,
  rgba(124,247,212,.22),rgba(159,161,167,.12))}
.guthaben-knopf{height:41px;border-radius:13px;background:rgba(255,216,107,.08);
  color:var(--mond);font-weight:800}
.guthaben-feld{border-radius:18px;background:#2b2d32}
.chat-schalter{border-radius:18px;background:linear-gradient(135deg,#a2ffe4,#64eecb);
  color:#14271f;font-family:"Fredoka",sans-serif;font-weight:700;
  box-shadow:0 7px 0 #238e7b,0 18px 34px -18px #7cf7d4}
.chat{border-radius:22px;background:rgba(39,41,45,.95);border-color:var(--hairline-2)}

@media(max-width:900px){
  nav{padding:6px 7px 0}nav .inner{border-radius:18px;padding:8px 10px}
  main{width:min(100% - 18px,1500px);padding-top:25px}
  .markt-kopf{padding:22px 18px}
  .markt-raster{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
  .item .bild,.marktkarte .bild{height:121px}
  .item .bild img,.marktkarte .bild img{max-width:94px;max-height:94px}
}
@media(max-width:560px){
  body{font-size:15px}h1{font-size:33px}nav .inner{min-height:58px}
  .brand{font-size:18px}.brand .mark{width:25px;height:25px}
  .navlinks{padding:5px 0 2px}
  nav a.link{min-height:38px;display:inline-flex;align-items:center;padding:7px 11px}
  main{gap:18px;padding-bottom:82px}
  .markt-zahlen{width:100%;display:grid;grid-template-columns:repeat(2,1fr)}
  .markt-zahlen>div{min-width:0}
  .markt-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .marktkarte .body{padding:10px 11px}.marktkarte .foot{padding:8px 11px 10px}
  .item .nm{font-size:14px}.item .price,.marktkarte .price{font-size:18px}
  .card{border-radius:18px}.btn{min-height:43px}
  .chat{left:8px;right:8px;width:auto;bottom:74px}
  .chat-schalter{right:12px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  .marktkarte:hover,.spitzenkarte:hover,.item:hover,nav a.link:hover,
  .dm-person:hover,.gf-kachel:hover{transform:none}
}
/* Misc: warmes Korallorange, getrennt von Vintage-Gold und Unique-Orange. */
:root{--r-misc:#ff7f6e;}
.rar-misc{--c:var(--r-misc)}


/* Groessere Produktbilder und ein ruhiger, weicher Hover. */
.markt-raster{grid-template-columns:repeat(auto-fill,minmax(226px,1fr))}
.item .bild,.marktkarte .bild{height:210px}
.item .bild img,.marktkarte .bild img{
  max-width:188px;max-height:188px;
  transition:transform .46s cubic-bezier(.16,1,.3,1),
             filter .46s cubic-bezier(.16,1,.3,1);
}
.item,.marktkarte,.spitzenkarte{
  transition:transform .38s cubic-bezier(.16,1,.3,1),
             border-color .38s ease,box-shadow .48s ease;
}
/* Die VIERTE und letzte Fassung dieser Regel - und die einzige, die
   bisher gewirkt hat. Dieselbe Sache steht im Stylesheet an den Zeilen
   ~338, ~349, ~1626 und hier; jede spaetere ueberschreibt die frueheren.
   Ich habe zuerst nur die oberen umgestellt, und die Kachel sprang
   weiter - die Aenderung sah richtig aus und traf nichts.

   Wer das anfasst: `grep -n "karte:hover\|item:hover" style.css` und
   ALLE Treffer ansehen. */
.marktkarte:hover,.spitzenkarte:hover,.item:hover{
  transform:none;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent);
}
.item:hover .bild img,.marktkarte:hover .bild img,.spitzenkarte:hover .bild img{
  transform:scale(1.18) translateY(-4px);
  filter:drop-shadow(0 16px 20px rgba(0,24,49,.46))
         drop-shadow(0 0 14px color-mix(in srgb,var(--c) 24%,transparent));
}
@media(max-width:900px){
  .markt-raster{grid-template-columns:repeat(auto-fill,minmax(175px,1fr))}
  .item .bild,.marktkarte .bild{height:156px}
  .item .bild img,.marktkarte .bild img{max-width:136px;max-height:136px}
}
@media(max-width:560px){
  .markt-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .item .bild,.marktkarte .bild{height:148px}
  .item .bild img,.marktkarte .bild img{max-width:126px;max-height:126px}
}

/* Das grosse Bild auf der einzelnen Itemseite folgt den Marktkarten. */
.kopfbild{width:176px;height:176px;border-radius:24px;
  background:radial-gradient(circle at 50% 55%,
  color-mix(in srgb,var(--c) 34%,transparent),transparent 62%),#1c1e21}
.kopfbild img{max-width:158px;max-height:158px;
  transition:transform .46s cubic-bezier(.16,1,.3,1),filter .46s ease}
.kopfbild:hover img{transform:scale(1.08) translateY(-2px);
  filter:drop-shadow(0 16px 22px rgba(0,24,49,.5))
  drop-shadow(0 0 16px color-mix(in srgb,var(--c) 24%,transparent))}
@media(max-width:560px){
  .kopfbild{width:138px;height:138px}
  .kopfbild img{max-width:124px;max-height:124px}
}

/* Normale Marktkarten brauchen wegen der alten Kompaktregel eine bewusst
   hoehere Spezifitaet. width/height skalieren auch kleine Quelldateien hoch;
   max-width allein tat das nicht. Die Spitzenkarten bleiben unveraendert. */
.markt-raster .item.marktkarte .bild{height:210px}
.markt-raster .item.marktkarte .bild img{
  width:188px;height:188px;max-width:188px;max-height:188px;object-fit:contain;
}
@media(max-width:900px){
  .markt-raster .item.marktkarte .bild{height:156px}
  .markt-raster .item.marktkarte .bild img{
    width:136px;height:136px;max-width:136px;max-height:136px;
  }
}
@media(max-width:560px){
  .markt-raster .item.marktkarte .bild{height:148px}
  .markt-raster .item.marktkarte .bild img{
    width:126px;height:126px;max-width:126px;max-height:126px;
  }
}
/* Letzter Groessenabgleich: normale Karten nur leicht kompakter, waehrend
   Top-of-the-Market bewusst mehr Luft um lange Waffen bekommt. Feste
   Bildboxen plus object-fit:contain verhindern abgeschnittene Waffen. */
.markt-raster .item.marktkarte .bild{height:194px}
.markt-raster .item.marktkarte .bild img{
  width:172px;height:172px;max-width:172px;max-height:172px;object-fit:contain;
}
.spitze-reihe .spitzenkarte .bild{
  width:126px;min-height:126px;height:126px;overflow:visible;
}
.spitze-reihe .spitzenkarte .bild img{
  width:102px;height:102px;max-width:102px;max-height:102px;object-fit:contain;
}

/* Das Guthaben-Menue liegt garantiert ueber dem Seiteninhalt und nimmt
   Klicks selbst entgegen. backdrop-filter erzeugt eigene Stapelkontexte,
   daher braucht schon die Navigation die hoehere Ebene. */
nav{z-index:1000;overflow:visible}
nav .inner{overflow:visible}
.guthaben{z-index:1001;overflow:visible}
.guthaben-feld{z-index:2000;pointer-events:auto;isolation:isolate}
.guthaben-feld a,.guthaben-feld button{pointer-events:auto}

/* Die Marktfilter bleiben beim Scrollen direkt unter der Navigation.
   `--navhoehe` misst bewegung.js an der echten Kopfzeile; die 74px sind nur
   der Ersatzwert fuer den Fall ohne JavaScript. Eine feste Zahl war hier
   falsch: bei zweizeiliger Navigation blieb ein Streifen offen, durch den
   die Kacheln sichtbar durchliefen. */
.marktflaeche .filterbox{position:sticky;top:var(--navhoehe,74px);z-index:18;
  align-self:flex-start}

/* Der Seltenheitsfilter nutzt die volle Breite im Angebotsfenster. */
.gf-filter{display:grid;grid-template-columns:1fr;gap:8px}
.gf-filter select{width:100%;min-width:0}

@media(max-width:900px){
  .markt-raster .item.marktkarte .bild{height:148px}
  .markt-raster .item.marktkarte .bild img{
    width:128px;height:128px;max-width:128px;max-height:128px;
  }
  .spitze-reihe .spitzenkarte .bild{width:112px;min-height:112px;height:112px}
  .spitze-reihe .spitzenkarte .bild img{
    width:90px;height:90px;max-width:90px;max-height:90px;
  }
  .marktflaeche .filterbox{align-self:stretch}
}
@media(max-width:560px){
  .markt-raster .item.marktkarte .bild{height:140px}
  .markt-raster .item.marktkarte .bild img{
    width:116px;height:116px;max-width:116px;max-height:116px;
  }
  .spitze-reihe .spitzenkarte .bild{width:104px;min-height:104px;height:104px}
  .spitze-reihe .spitzenkarte .bild img{
    width:82px;height:82px;max-width:82px;max-height:82px;
  }
  .gf-filter{grid-template-columns:1fr}
}
/* Bei Tablets ist die Navigation zweizeilig. Wie hoch genau, misst
   bewegung.js - hier stand vorher 116px, und die echte Hoehe war 120. Die
   vier Pixel Unterschied waren der Streifen, durch den die Kacheln liefen.
   Der Ersatzwert gilt nur ohne JavaScript. */
@media(max-width:1100px) and (min-width:761px){
  .marktflaeche .filterbox{top:var(--navhoehe,120px)}
}
/* Am Handy scrollt die Navigation mit (position:static), es gibt also
   nichts, worunter man andocken koennte.

   Deshalb bis GANZ nach oben, nicht mit acht Pixeln Abstand: durch diese
   acht Pixel liefen die Kacheln sichtbar hindurch, und ein Streifen mit
   abgeschnittenen Kartenraendern ueber der Filterleiste sieht aus wie ein
   Darstellungsfehler.

   Dazu ueber die volle Breite, also aus dem Seitenpolster heraus, und ohne
   runde Ecken: eine schwebende Karte laesst an ihren Raendern immer etwas
   durchscheinen. Starpets macht es genauso - dort ist die Filterzeile Teil
   eines blickdichten Kopfes von Kante zu Kante. */
@media(max-width:760px){
  .marktflaeche .filterbox{
    top:0;
    /* `width:auto` MUSS dabeistehen: die Handyregel weiter oben setzt
       `width:100%`, und dann verschieben die negativen Aussenabstaende die
       Leiste nur nach links, statt sie zu verbreitern. Rechts blieb ein
       14 px breiter Streifen offen. */
    width:auto; margin-left:-14px; margin-right:-14px;
    border-radius:0; border-left:0; border-right:0;
  }
}

/* Sticky wie eine echte Kategorieleiste: bis zum oberen Rand bleibt sie im
   normalen Fluss, danach dockt sie blickdicht unter der Navigation an. */
.marktflaeche .filterbox{
  background:#2b2d32;backdrop-filter:none;
  box-shadow:0 14px 35px -22px rgba(0,24,49,.95),0 1px rgba(255,255,255,.05) inset;
}

/* Author-CSS mit display:flex kann das native hidden sonst aushebeln. */
.gf-raster .gf-kachel[hidden]{display:none!important}

/* Lange Laufzeittexte wie "Runs for 3 days" duerfen nicht im Select
   abgeschnitten werden. */
.gf-laufzeit{flex:0 0 190px;min-width:190px}
.gf-laufzeit select{width:100%;max-width:none;padding-right:36px}
.gf-fuss{overflow:visible}
@media(max-width:560px){
  .gf-laufzeit{flex:1 1 100%;width:100%;min-width:0}
}

/* Duel item stakes */
dialog.duell-dialog{width:min(94vw,760px);max-height:min(90vh,860px);overflow:auto}
.duell-mitte{display:flex;align-items:center;gap:18px;justify-content:flex-end}
.einsatz-kurz{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;max-width:310px}
.einsatz-kurz .lbl,.pot-kopf .lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.einsatz-chip{font-size:11px;padding:3px 7px;border:1px solid var(--hairline-2);border-radius:999px;background:var(--surface-2);white-space:nowrap}
.einsatz-kopfzeile{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:20px 0 10px;padding-top:18px;border-top:1px solid var(--hairline)}
.einsatz-kopfzeile>div{display:flex;flex-direction:column;gap:3px}
.einsatz-zaehler{color:var(--accent);font-size:12px}
.einsatz-check{position:absolute;opacity:0;pointer-events:none}
.einsatz-fehler{color:var(--bad);margin:9px 0 0}
.einsatz-leer{margin:10px 0}
.duell-pot{padding:16px 18px;margin:14px 0 18px;border-color:color-mix(in srgb,var(--accent) 35%,var(--hairline))}
.pot-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px}
.pot-kopf strong{font-size:13px;color:var(--accent)}
.pot-seiten{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.pot-seiten>div{min-width:0}
.pot-items{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
.pot-item{display:flex;align-items:center;gap:7px;padding:5px 9px 5px 5px;border:1px solid var(--hairline);border-radius:7px;background:var(--surface-2);font-size:11.5px}
.pot-item img{width:38px;height:30px;object-fit:contain;border-radius:4px;background:var(--surface-3)}
.pot-plus{color:var(--accent);font-size:20px;font-weight:700}
.losgehen{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px}
.losgehen p{margin:5px 0 0}
@media(max-width:900px){.duell-mitte{align-items:flex-start;flex-direction:column;gap:8px}.einsatz-kurz{justify-content:flex-start}.duellzeile .modus{align-items:flex-start;text-align:left}}
@media(max-width:720px){.pot-seiten{grid-template-columns:1fr}.pot-plus{text-align:center}.losgehen{align-items:stretch;flex-direction:column}.losgehen .btn{width:100%}}
/* Chroma ist eine eigene Regenbogenstufe, Vintage klares Gold. */
.rar-vintage{--c:var(--r-vintage)}
.rar-chroma.item .top,.rar-chroma .top{
  background:linear-gradient(90deg,#ff4d7d,#ffae35,#fff36a,#52ee8a,#47d9ff,#6cb3fe,#57a7fd)
}
.rar-chroma.tag,.rar-chroma .tag{
  color:#fff;border-color:rgba(255,255,255,.42);
  background:linear-gradient(110deg,rgba(255,67,122,.28),rgba(255,194,70,.26),rgba(153,155,161,.27),rgba(167,169,174,.3));
  box-shadow:0 0 13px rgba(181,183,187,.22)
}
.rar-chroma.item,.item.rar-chroma{
  border-color:transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
             linear-gradient(135deg,#ff4d7d,#ffd75e,#51ec9a,#42d8ff,#6db3fe,#ff59cf) border-box
}
.rar-vintage.item,.item.rar-vintage{
  border-color:color-mix(in srgb,var(--r-vintage) 65%,var(--hairline));
  box-shadow:inset 0 0 24px color-mix(in srgb,var(--r-vintage) 7%,transparent)
}
.rar-vintage.item .top,.rar-vintage .top{
  background:linear-gradient(90deg,#8b5b08,#ffd96a,#fff1a8,#c88a16)
}

.inventar-kopf{justify-content:space-between;align-items:flex-end;gap:14px}
.inventar-kopf h2{margin-bottom:3px}
.inventar-sortierung{display:flex;align-items:center;gap:9px}
.inventar-sortierung label{white-space:nowrap}

.gewinnfenster{width:min(92vw,720px);border:1px solid color-mix(in srgb,var(--good) 55%,var(--hairline));
  border-radius:24px;padding:30px;background:linear-gradient(155deg,#152921 0%,var(--surface) 42%,#1e1f22 100%);
  color:var(--ink);text-align:center;box-shadow:0 40px 110px rgba(17,18,20,.8),0 0 55px color-mix(in srgb,var(--good) 16%,transparent)}
.gewinnfenster::backdrop{background:rgba(3,3,4,.8);backdrop-filter:blur(9px)}
.gewinnfenster form{position:absolute;right:16px;top:12px}
.gewinn-schliessen{border:0;background:transparent;color:var(--ink-2);font-size:30px;cursor:pointer}
.gewinn-konfetti{font-size:28px;letter-spacing:18px;color:#ffe77a;text-shadow:0 0 22px #ffd84f;margin-bottom:5px}
.gewinn-kicker{display:block;color:var(--good);font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:12px}
.gewinnfenster h2{font-size:34px;margin:5px 0 20px}
.gewinn-items{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin:0 auto 20px}
.gewinn-item{position:relative;width:180px;padding:12px;border:1px solid var(--c);border-radius:16px;background:rgba(6,7,7,.74);display:flex;flex-direction:column;align-items:center;gap:7px}
.gewinn-bild{width:100%;height:125px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:rgba(255,255,255,.035)}
.gewinn-bild img{max-width:150px;max-height:115px;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(17,18,20,.45))}
.gewinn-item .menge{position:absolute;right:10px;top:10px;padding:3px 7px;border-radius:20px;background:var(--accent);color:var(--accent-ink);font-weight:800}
.gewinnfenster>p{color:var(--ink-2);margin:4px 0 18px}
@media(max-width:600px){.inventar-kopf{align-items:stretch;flex-direction:column}.inventar-sortierung{justify-content:space-between}.gewinnfenster{padding:25px 16px}.gewinn-item{width:145px}.gewinn-bild{height:100px}}
/* Moonly-Maskottchen: gemeinsames Markenbild in Navigation und Browser-Tab. */
.brand-logo{width:52px;height:52px;object-fit:contain;flex:0 0 52px;margin:-12px 0;filter:drop-shadow(0 5px 11px rgba(85,166,253,.52));transition:transform .24s ease,filter .24s ease}
.brand:hover .brand-logo{transform:rotate(-5deg) scale(1.08);filter:drop-shadow(0 6px 12px rgba(0,213,255,.6))}
@media(max-width:620px){.brand-logo{width:40px;height:40px;flex-basis:40px;margin:-7px 0}}

/* ================= Filter als Panel an der Seite =================
   Vorbild Starpets (Bildschirmaufnahme vom 04.09.2026): die Filter stehen
   dort in einem eigenen Feld, nach Abschnitten getrennt, und JEDE Auswahl
   ist ein Knopf zum Antippen - keine Auswahlfelder, keine Listen.

   Damit faellt die waagerechte Leiste von weiter oben wieder weg. Sie war
   ein Kompromiss um Platz: gewonnen hat sie 238 px Rasterbreite, gekostet
   hat sie die Uebersicht. Acht Gruppen nebeneinander in einer Zeile lesen
   sich nicht als Gruppen, sondern als Haufen - und genau deshalb wollte
   der Besitzer sie zurueck an die Seite.

   Erst ab 901 px: darunter bleibt die aufklappbare Leiste von oben, denn
   dort ist fuer zwei Spalten kein Platz. */
@media (min-width:901px){
  .marktflaeche{flex-direction:row; align-items:flex-start}
  .marktflaeche .filterbox{
    width:274px; max-width:274px; flex:0 0 274px;
    position:sticky; top:var(--navhoehe,74px); align-self:flex-start;
    padding:14px 15px 15px;
  }
  /* Wieder eine Spalte. `flex-direction` MUSS ausdruecklich stehen - die
     Leistenregel setzt `row`, und `display:flex` allein dreht sie nicht
     zurueck. Dieselbe Falle wie beim Bau der Leiste. */
  /* `align-items` MUSS mit zurueckgesetzt werden. Die Leistenregel setzt
     `flex-end` - in einer Zeile heisst das "unten buendig", in einer Spalte
     aber "rechts buendig". Die Abschnittsueberschriften klebten dadurch am
     rechten Rand, 43 px breit statt ueber die volle Spalte. */
  .marktflaeche .filter-inhalt{display:flex; flex-direction:column; gap:0;
    align-items:stretch}

  /* Abschnitte: Ueberschrift, darunter die Knoepfe. Die duenne Linie
     darueber trennt, ohne einen weiteren Kasten aufzumachen. */
  .marktflaeche .filter-titel{
    display:block; margin:16px 0 8px; font-size:11px; font-weight:700;
    letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
    padding-top:14px; border-top:1px solid var(--hairline);
  }
  /* Der erste Abschnitt braucht keine Trennlinie nach oben. */
  .marktflaeche .filter-kopf + .filter-titel{
    margin-top:6px; padding-top:0; border-top:0;
  }
  .marktflaeche .filter-kopf{margin-bottom:2px}

  /* Suchfeld und Preisspanne ueber die volle Breite - in einer Spalte ist
     das richtig, in der Leiste war es falsch. */
  .marktflaeche .filter-inhalt .suchfeld,
  .marktflaeche .filter-inhalt .preisspanne{width:100%; max-width:none}
  .marktflaeche .filter-inhalt .preisspanne{display:flex; align-items:center;
    gap:8px}
  .marktflaeche .filter-inhalt .preisspanne input{flex:1 1 0; min-width:0}

  /* Knoepfe statt Kaestchen: etwas groesser als in der Leiste, damit sie
     als anklickbar gelesen werden. */
  .marktflaeche .chips{gap:7px}
  .marktflaeche .chip{padding:7px 11px 7px 10px; font-size:13px}

  .marktflaeche .filter-inhalt .btn.primary{
    width:100%; margin-top:18px; padding:10px 16px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Der Markt: die SEITE rollt, zwei Dinge bleiben stehen
   ══════════════════════════════════════════════════════════════════════

   Hier stand vorher das Gegenteil - eine Anwendungsschale, in der nur das
   Raster rollte und die Seite die Fensterhoehe behielt. Der Grund damals
   war richtig beobachtet: beim Rollen liefen Buy/Sell und die Sortierung
   nach oben weg, und die Filterspalte lehnte sich sichtbar an die
   Kopfzeile.

   Die Loesung war nur zu gross. Wer die ganze Seite festnagelt, um zwei
   Zeilen zu halten, verliert dafuer alles andere: der Marktkopf frisst
   dauerhaft Hoehe, obwohl man ihn einmal liest, und auf flachen Schirmen
   blieben fuer das Raster 331 px.

   Jetzt bleibt genau das stehen, was man beim Stoebern BEDIENT - die
   Filterspalte und die Leiste mit Suche, Anzahl und Sortierung -, und
   alles, was man einmal LIEST, rollt weg. Vorbild ist Starpets (Aufnahme
   vom 06.09.): dort dockt die Suchzeile oben an, sobald sie sonst aus dem
   Bild liefe.

   Bedingung dafuer: KEIN Vorfahr darf `overflow:hidden` haben, sonst
   klebt nichts. Genau das stand hier vorher an `body`. */

/* Die Filterspalte steht still, waehrend die Seite an ihr vorbeirollt.
   `align-items:flex-start` an der Flaeche ist die Voraussetzung - ein
   gestrecktes Flex-Kind kann nicht kleben. */
@media (min-width:901px){
  /* Ohne das faengt die Flaeche 14 px unter der Kopfzeile an, und die
     Filterspalte kann nicht bis an sie heran kleben - sie stand 10 px
     tiefer, und ihr unterer Rand entsprechend unter dem Fensterrand. */
  body.markt-app .marktflaeche{margin-top:0}
  body.markt-app .filterbox{
    position:sticky; top:var(--navhoehe,74px);
    /* Hier stand ein Abzug von zehn Pixeln, weil die Spalte zehn Pixel
       unter ihrem `top` zu stehen kam. Die Ursache war die Polsterung
       der schwebenden Kopfzeile; seit sie eine buendige Leiste ist, kommt
       die Spalte genau auf `top` an, und der Abzug hinterliesse unten
       einen Spalt. Nachgemessen bei 1500x820: 65 bis 820. */
    height:calc(100dvh - var(--navhoehe,74px));
    overflow-y:auto; overscroll-behavior:contain;
  }
  body.markt-app .filterbox::-webkit-scrollbar{width:8px}
  body.markt-app .filterbox::-webkit-scrollbar-thumb{
    background:var(--hairline-2); border-radius:99px;
    border:2px solid transparent; background-clip:content-box;
  }
  body.markt-app .filterbox::-webkit-scrollbar-track{background:transparent}
}

/* Die eine Leiste, die oben andockt. Sie traegt jetzt auch die Suche -
   das Feld, das man am haeufigsten anfasst.

   Deckend, nicht durchscheinend: darunter laufen Kacheln durch, und
   halbdurchsichtige Itemnamen hinter der Sortierung lesen sich als
   Darstellungsfehler. Die Aussenabstaende ziehen sie ueber die Polsterung
   der Spalte hinaus, damit an den Seiten nichts vorbeischaut. */
body.markt-app .markt-leiste{
  position:sticky; top:var(--navhoehe,74px); z-index:12;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 -20px; padding:10px 20px;
  background:var(--ground);
  border-bottom:1px solid var(--line);
}
body.markt-app .markt-leiste .leiste-suche{flex:1 1 240px; min-width:0; max-width:420px}
body.markt-app .markt-leiste .sortierung{margin-left:auto; flex:none}

/* Der Kopf ist Beiwerk und rollt weg - er darf deshalb wieder atmen. */
body.markt-app .markt-kopf{gap:12px}
body.markt-app .spitze{margin-top:0}

@media (max-width:900px){
  body.markt-app .markt-zahlen{display:none}
  body.markt-app .markt-kopf h1{font-size:22px}
  body.markt-app .markt-kopf-text p{display:none}
  body.markt-app .marktflaeche{flex-direction:column; gap:9px}
  body.markt-app .filterbox{flex:none}
  body.markt-app .filterbox .filter-inhalt{max-height:52vh}
  /* Schmal klebt die Filterleiste selbst schon oben - diese hier haengt
     sich direkt darunter. Sie mitrollen zu lassen waere bequemer zu
     schreiben und falsch: seit die Suche darin steht, waere sie beim
     dritten Bildschirm Ware nicht mehr erreichbar, und genau das war der
     Grund, sie ueberhaupt dorthin zu holen.

     55 px ist die zugeklappte Filterleiste, gemessen bei 375 px. Klappt
     jemand die Filter auf, legen sie sich darueber - das ist richtig so:
     wer filtert, scrollt gerade nicht. */
  body.markt-app .markt-leiste{
    position:sticky; top:55px; z-index:11;
    margin:0 -14px; padding:8px 14px;
    background:var(--ground); border-bottom:1px solid var(--line);
  }
  /* Schmal in zwei Reihen: die Suche ueber die volle Breite, darunter
     Anzahl und Sortierung. Nebeneinander gequetscht schob die Sortierung
     die Anzahl ueber den rechten Rand hinaus. */
  body.markt-app .markt-leiste{gap:8px}
  body.markt-app .markt-leiste .leiste-suche{flex:1 0 100%; max-width:none}
  body.markt-app .markt-leiste .sortierung{margin-left:auto; min-width:0}
  body.markt-app .markt-leiste .sort-option{padding:7px 8px;font-size:11px}
}

/* ---- Die Kachel: ganze Flaeche verlinkt, Knopf darueber ----
   In einem <a> darf kein <form> stehen. Also ist die Kachel ein DIV, der
   Link eine unsichtbare Flaeche darin, und der Warenkorbknopf liegt eine
   Ebene darueber. Sonst waere entweder die Kachel nicht mehr anklickbar
   oder der Knopf nicht erreichbar. */
.marktkarte{position:relative}
.karte-link{position:absolute; inset:0; z-index:1; border-radius:inherit}
.karte-link:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.marktkarte .foot{position:relative; z-index:2}
.karte-korb{display:flex}
.karte-korb-knopf{
  display:grid; place-items:center; width:30px; height:30px;
  border-radius:9px; border:1px solid var(--hairline-2);
  background:var(--surface-2); color:var(--ink-2);
  cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.karte-korb-knopf:hover{
  background:color-mix(in srgb,var(--accent) 22%,var(--surface-2));
  border-color:var(--accent); color:var(--ink);
}
.karte-korb-knopf:active{transform:translateY(1px)}

/* ---- Warenkorb in der Kopfzeile ---- */
.korb-knopf-nav{
  position:relative; display:grid; place-items:center;
  width:34px; height:34px; border-radius:10px;
  border:1px solid var(--hairline); background:var(--surface);
  color:var(--ink-2); transition:color .15s, border-color .15s;
}
.korb-knopf-nav:hover,.korb-knopf-nav.on{color:var(--ink); border-color:var(--hairline-2)}
.korb-zahl{
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px;
  padding:0 4px; border-radius:99px;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  display:grid; place-items:center;
}

/* ---- Die Warenkorbseite ---- */
.korb{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px;
  align-items:start; margin-top:14px}
.korb-liste{display:flex; flex-direction:column; gap:10px; min-width:0}
.korb-zeile{
  display:grid; grid-template-columns:56px minmax(0,1fr) auto auto;
  gap:13px; align-items:center; padding:12px 14px; margin:0;
}
.korb-tot{opacity:.55}
.korb-bild{width:56px; height:56px; display:grid; place-items:center}
.korb-bild img{max-width:52px; max-height:52px; object-fit:contain}
.korb-text{display:flex; flex-direction:column; gap:2px; min-width:0}
.korb-name{font-weight:700; color:var(--ink); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.korb-name:hover{color:var(--accent)}
.korb-menge{display:flex; flex-direction:column; gap:3px; align-items:flex-end}
.korb-menge input{width:64px; text-align:center}
.korb-summe{display:flex; flex-direction:column; gap:5px; align-items:flex-end}
.korb-summe strong{font-size:16px}

.korb-schluss{position:sticky; top:calc(var(--navhoehe,64px) + 12px);
  display:flex; flex-direction:column; gap:10px; margin:0}
.korb-zusammen{display:flex; flex-direction:column; gap:6px;
  padding-bottom:10px; border-bottom:1px solid var(--hairline)}
.korb-gesamt{display:flex; align-items:baseline; justify-content:space-between}
.korb-gesamt strong{font-size:22px}
.korb-frage{display:flex; flex-direction:column; gap:8px;
  padding:11px; border-radius:var(--r);
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--hairline));
  background:color-mix(in srgb,var(--accent) 8%,var(--surface-2))}
.korb-frage p{margin:0}
.korb-frage-tat{display:flex; gap:8px}
.korb-frage-tat .btn{flex:1}

@media (max-width:900px){
  .korb{grid-template-columns:1fr}
  /* NICHT klebend auf dem Handy. Als `sticky bottom:0` legte sich die
     Summenkarte ueber die Liste, sobald die kuerzer war als das Fenster -
     bei einem einzigen Posten stand "1 Stueck" quer ueber der Zeile
     darunter. Ein klebender Abschluss lohnt sich erst bei einer Liste,
     die man scrollen muss, und dann steht er ohnehin am Ende. */
  .korb-schluss{position:static; order:2}
  .korb-zeile{grid-template-columns:44px minmax(0,1fr) auto;
    gap:10px; padding:10px 11px}
  .korb-bild{width:44px; height:44px}
  .korb-bild img{max-width:42px; max-height:42px}
  .korb-menge{grid-column:2; align-items:flex-start}
  .korb-summe{grid-row:1; grid-column:3}
}

/* ---- Kaufen mit Rueckfrage (Artikelseite) ---- */
.kaufblock{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.kaufform{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.kauf-menge{width:62px; text-align:center}
.kauf-frage{display:flex; gap:6px; align-items:center}
.korb-knopf{padding:7px 9px; display:grid; place-items:center}
.a-stueck{color:var(--ink); font-weight:600}

/* ---- Kompakte Kacheln in der App-Ansicht ----
   Weiter oben steht eine Fassung mit grossen Produktbildern (226 px Spalte,
   194 px Bildkasten). Das ergibt Kacheln von 327 px Hoehe - in einem
   Rollbereich von rund 550 px sind das eineinhalb Reihen, und man scrollt
   die ganze Zeit.

   Hier wird das nur fuer die App-Ansicht zurueckgenommen. Die Regeln oben
   bleiben stehen: sie gelten weiter fuer jede andere Seite mit einem
   Raster, und dort ist gross richtig. */
/* Groessere Kacheln, seit die Spitzenreihe weg ist und die rechte Wand
   dazugekommen ist. Beides zusammen hatte den Eindruck erzeugt, das
   Raster stehe verloren in der Mitte: kleine Bilder in kleinen Karten,
   daneben zwei kraeftige Waende.

   Sechs pro Reihe waeren die andere Moeglichkeit gewesen und die
   schlechtere: neben der Wand bleiben rund 700 px, das waeren 110 px je
   Kachel - fuer ein Bild, an dem man eine Waffe erkennen soll, zu wenig.
   Lieber vier grosse als sechs winzige. */
body.markt-app .markt-raster{
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:12px;
}
body.markt-app .markt-raster .item.marktkarte .bild{height:132px}
body.markt-app .markt-raster .item.marktkarte .bild img{
  width:auto; height:auto; max-width:118px; max-height:118px;
}
body.markt-app .markt-raster .item .body{padding:8px 10px; gap:2px}
body.markt-app .markt-raster .item .nm{font-size:13px}
body.markt-app .markt-raster .item .price{font-size:15.5px}
body.markt-app .markt-raster .item .ab{font-size:10.5px}
body.markt-app .markt-raster .item .foot{padding:6px 10px; min-height:0}

/* Die Spitzenreihe ist aus der Vorlage geflogen; die Regeln bleiben, weil
   `.spitze` auch anderswo vorkommt und sie dort nichts kaputtmachen. */
body.markt-app .spitze-reihe .spitzenkarte .bild{
  width:84px; height:84px; min-height:84px;
}
body.markt-app .spitze-reihe .spitzenkarte .bild img{max-width:76px; max-height:76px}
body.markt-app .spitze .abschnitt h2{font-size:15px}

/* Breit hiess frueher "mehr Kacheln" - 162 px statt 152. Seit rechts die
   Wand steht, ist breit nicht mehr so breit, und die Kacheln wurden hier
   wieder kleiner als eine Stufe darunter. Jetzt andersherum: mehr Platz
   heisst groessere Kacheln, nicht mehr davon. */
@media (min-width:1500px){
  body.markt-app .markt-raster{
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  }
  body.markt-app .markt-raster .item.marktkarte .bild{height:142px}
  body.markt-app .markt-raster .item.marktkarte .bild img{
    max-width:126px; max-height:126px;
  }
}
@media (max-width:900px){
  body.markt-app .markt-raster{
    grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:8px;
  }
  body.markt-app .markt-raster .item.marktkarte .bild{height:92px}
  body.markt-app .markt-raster .item.marktkarte .bild img{
    max-width:80px; max-height:80px;
  }
  /* Die Spitzenreihe faellt auf dem Handy weg: sie zeigt drei Kacheln, die
     unten im Raster ohnehin stehen, und kostet die halbe erste Ansicht. */
  body.markt-app .spitze{display:none}
}
@media (max-width:560px){
  body.markt-app .markt-raster{
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
  }
  body.markt-app .markt-raster .item.marktkarte .bild{height:104px}
  body.markt-app .markt-raster .item.marktkarte .bild img{
    max-width:92px; max-height:92px;
  }
  body.markt-app .markt-raster .item .nm{font-size:13.5px}
  body.markt-app .markt-raster .item .price{font-size:16px}
}

/* ---- Handy: der feste Teil muss klein bleiben ----
   Solange die Seite scrollte, war eine hohe Kopfzeile nur beim ersten
   Blick im Weg - danach lief sie weg. In der App-Ansicht bleibt sie
   stehen, und dann ist jeder Pixel dort dauerhaft weg vom Raster.

   Gemessen an einem 375x812-Schirm: Kopfzeile 170 px, Marktkopf 50 px,
   Schalter 40 px, Sortierleiste 40 px - fuer die Waffen blieben 331 px,
   also anderthalb Reihen. */
@media (max-width:900px){
  /* "Marktplatz - alle Items liegen auf dem Bot-Account" beantwortet keine
     Frage, die man auf dem Handy hat. Wo man ist, sagt die Navigation. */
  body.markt-app .markt-kopf{display:none}

  /* Enger, nicht anders: dieselbe Zeile, weniger Luft drumherum. */
  body.markt-app nav .inner{padding:7px 12px; gap:8px 12px; row-gap:6px}
  body.markt-app nav.nav-eng .navlinks{gap:14px; padding-bottom:1px}
  body.markt-app .brand{font-size:15px}
  body.markt-app .brand-logo{width:20px; height:20px}
  body.markt-app nav .btn{padding:6px 12px; font-size:13px}
  body.markt-app nav a.link{font-size:13.5px}
  /* Der Online-Zaehler ist auf einem 375er Schirm die erste Angabe, die
     man weglassen kann, ohne dass etwas fehlt. */
  body.markt-app nav .online{display:none}
}

/* Sehr schmal: auch die Sortierleiste wird zur einzeiligen Zeile ohne
   eigene Ueberschrift - "Sortieren" davor kostet mehr Platz, als das Wort
   erklaert. */
@media (max-width:420px){
  body.markt-app .markt-leiste{padding:0}
}

/* ══════════════════════════════════════════════════════════════════════
   Kontomenue, Einstellungs- und Verlaufsfenster
   ══════════════════════════════════════════════════════════════════════ */

.konto-menue{position:relative}
.konto-knopf{
  display:flex; align-items:center; gap:7px;
  padding:5px 9px 5px 5px; border-radius:99px;
  border:1px solid var(--hairline); background:var(--surface);
  color:var(--ink); cursor:pointer; font:inherit; font-size:14px;
  transition:border-color .15s, background .15s;
}
.konto-knopf:hover{border-color:var(--hairline-2);
  background:var(--surface-2)}
.konto-avatar{width:24px; height:24px; border-radius:50%; object-fit:cover;
  background:var(--surface-3)}
.konto-initial{
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  background:color-mix(in srgb,var(--accent) 30%,var(--surface-3));
  color:var(--ink); font-weight:700; font-size:12.5px;
}
.konto-name{max-width:132px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-weight:600}

.konto-feld{
  position:absolute; right:0; top:calc(100% + 8px); z-index:1200;
  width:268px; padding:0; border-radius:14px;
  border:1px solid var(--hairline); background:var(--surface);
  box-shadow:var(--shadow); overflow:hidden;
}
.konto-kopf{display:flex; flex-direction:column; gap:2px;
  padding:12px 14px; border-bottom:1px solid var(--hairline)}
.konto-kopf strong{font-size:14.5px}
.konto-liste a.konto-aus{border-top:1px solid var(--hairline)}

/* ---- Das Fenster ---- */
.kfenster{
  width:min(680px,94vw); max-height:88vh; padding:0;
  border:1px solid var(--hairline); border-radius:16px;
  background:var(--surface); box-shadow:var(--shadow);
  overflow:hidden;
}
.kfenster-inhalt{
  padding:20px 22px 24px; max-height:88vh; overflow-y:auto;
  overscroll-behavior:contain;
}
.kfenster-inhalt[aria-busy="true"]{opacity:.55}
.fenster-kopf{display:flex; align-items:flex-start;
  justify-content:space-between; gap:14px; margin-bottom:16px}
.fenster-kopf h2{margin:0; font-size:20px}
.fenster-kopf p{margin:3px 0 0}

@media (max-width:620px){
  .kfenster{width:100vw; max-width:100vw; max-height:100dvh;
    border-radius:0; border:0}
  .kfenster-inhalt{max-height:100dvh; padding:18px 15px 26px}
}

/* ---- Einstellungen ---- */
.einst{display:flex; flex-direction:column; gap:2px}
.einst-block{
  padding:14px 0; border-top:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:8px;
}
.einst-block:first-child{border-top:0; padding-top:0}
.einst-kopf{display:flex; align-items:center; gap:10px}
.einst-kopf h3{margin:0; font-size:15px}
.einst-zeile{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.einst-wert{font-weight:700; font-size:16px}
.einst-block p{margin:0}
.einst-tat{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.einst-tat:has(.tfa-eingabe-titel){display:grid; grid-template-columns:1fr auto; gap:10px}
.tfa-eingabe-titel{grid-column:1 / -1; color:var(--ink); font-size:17px;
  font-weight:800; letter-spacing:.01em}
.einst-tat:has(.tfa-eingabe-titel) .code-feld{min-width:0; width:100%}
.einst-sprachen{display:flex; gap:7px; flex-wrap:wrap}

/* ---- Roblox: am Avatar erkennen ---- */
.rbx-suche{display:flex; flex-direction:column; gap:8px}
.rbx-suche .suchfeld{width:100%; max-width:none}
.rbx-treffer{display:flex; flex-direction:column; gap:6px}
.rbx-treffer-zeile{
  display:grid; grid-template-columns:42px minmax(0,1fr) auto;
  gap:11px; align-items:center;
  padding:8px 10px; border-radius:11px;
  border:1px solid var(--hairline); background:var(--surface-2);
}
.rbx-treffer-zeile:hover{border-color:var(--hairline-2)}
.rbx-avatar{width:42px; height:42px; border-radius:50%;
  object-fit:cover; background:var(--surface-3)}
.rbx-namen{display:flex; flex-direction:column; gap:1px; min-width:0}
.rbx-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rbx-fertig{display:flex; align-items:center; gap:12px}
.rbx-fertig p{margin:2px 0 0}
.rbx-code{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:11px 13px; border-radius:11px;
  border:1px dashed color-mix(in srgb,var(--accent) 50%,var(--hairline));
  background:color-mix(in srgb,var(--accent) 7%,var(--surface-2));
}
.rbx-code code{font-size:15px; font-weight:700; color:var(--mond);
  user-select:all; word-break:break-all}

/* ---- Verlaufsfenster ---- */
.verlauf-filter{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.vfilter{
  padding:6px 12px; border-radius:99px; font-size:13px;
  border:1px solid var(--hairline); background:var(--surface-2);
  color:var(--ink-2); white-space:nowrap;
}
.vfilter:hover{color:var(--ink); border-color:var(--hairline-2)}
.vfilter.an{
  background:color-mix(in srgb,var(--accent) 22%,var(--surface-2));
  border-color:var(--accent); color:var(--ink); font-weight:600;
}

/* Das Auge sitzt als eigene Spalte rechts am Posten. Die Postenzeile ist
   ein Raster - eine Spalte mehr, sonst rutscht es unter den Text. */
.vf-liste .verlauf-posten{position:relative; padding-right:42px}
.vf-auge{position:static}
.vf-auge > summary{
  position:absolute; top:50%; right:10px; transform:translateY(-50%);
  list-style:none; cursor:pointer; color:var(--ink-3);
  width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center;
  transition:color .15s, background .15s;
}
.vf-auge > summary::-webkit-details-marker{display:none}
.vf-auge > summary:hover{color:var(--ink); background:var(--surface-3)}
.vf-auge[open] > summary{color:var(--accent); background:var(--surface-3)}

.vf-detail{
  grid-column:1 / -1; margin-top:11px; padding:13px;
  border-radius:11px; border:1px solid var(--hairline);
  background:var(--surface-2);
  display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start;
}
.vf-bild{width:78px; height:78px; display:grid; place-items:center;
  border-radius:10px; background:var(--surface-3); flex:none}
.vf-bild img{max-width:70px; max-height:70px; object-fit:contain}
.vf-daten{display:grid; gap:5px 16px; margin:0; flex:1 1 240px; min-width:0}
.vf-daten > div{display:flex; justify-content:space-between; gap:12px;
  align-items:baseline}
.vf-daten dt{color:var(--ink-3); font-size:12px; white-space:nowrap}
.vf-daten dd{margin:0; font-size:12.5px; text-align:right;
  word-break:break-all; min-width:0}
.vf-notiz{flex:1 1 100%; padding:10px 12px; border-radius:9px;
  background:color-mix(in srgb,var(--warn) 11%,var(--surface-3));
  border:1px solid color-mix(in srgb,var(--warn) 34%,transparent)}
.vf-notiz p{margin:3px 0 0}
.vf-kennung{flex:1 1 100%; display:flex; align-items:baseline; gap:9px;
  flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--hairline)}
.vf-kennung code{font-size:13.5px; font-weight:700; color:var(--mond);
  user-select:all}

/* Verlauf ist eine eigene Seite: genug Platz fuer die Belegdaten, statt
   einer hohen, engen Liste im Kontofenster. */
.history-page{width:min(1180px,100%); margin:0 auto}
.history-karte{margin-top:12px; padding:24px}
.history-page .vf-liste{max-height:none; overflow:visible; gap:5px}
.history-page .vf-liste .verlauf-posten{flex-wrap:wrap}
.history-page .vf-auge[open]{display:block; flex-basis:100%; width:100%}
.history-page .vf-detail{
  display:grid; grid-template-columns:minmax(0,1fr); gap:16px;
  margin-top:4px; width:100%;
}
.history-page .vf-detail.mit-bild{grid-template-columns:104px minmax(0,1fr)}
.history-page .vf-bild{width:104px; height:104px}
.history-page .vf-bild img{max-width:94px; max-height:94px}
.history-page .vf-daten{width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 24px}
.history-page .vf-daten > div{
  display:grid; grid-template-columns:minmax(104px,max-content) minmax(0,1fr);
  align-items:baseline; gap:10px;
}
.history-page .vf-daten dd{text-align:left; overflow-wrap:anywhere; word-break:break-word}
.history-page .vf-notiz,.history-page .vf-kennung{grid-column:1 / -1}
@media (max-width:680px){
  .history-karte{padding:16px}
  .history-page .vf-detail{grid-template-columns:1fr}
  .history-page .vf-bild{width:78px; height:78px}
  .history-page .vf-bild img{max-width:70px; max-height:70px}
  .history-page .vf-detail.mit-bild,.history-page .vf-daten{grid-template-columns:1fr}
}

@media (max-width:620px){
  .vf-daten > div{flex-direction:column; gap:1px; align-items:flex-start}
  .vf-daten dd{text-align:left}
  .vf-bild{width:60px; height:60px}
  .vf-bild img{max-width:54px; max-height:54px}
}

/* Der Verweis aufs eigene Roblox-Profil steht neben dem Code, nicht
   darunter: dort schaut man hin, waehrend man ihn kopiert. */
.rbx-profil{display:inline-flex; align-items:center; gap:7px; width:fit-content}

/* ══════════════════════════════════════════════════════════════════════
   Bildkontrolle
   ══════════════════════════════════════════════════════════════════════

   Knapp tausend Kacheln durchsehen. Das Bild ist die Hauptsache und
   bekommt den Platz; Name und Felder stehen darunter, klein genug, dass
   sechs Karten nebeneinander passen, und gross genug zum Treffen. */
.pic-fortschritt{
  height:6px; border-radius:99px; background:var(--surface-2);
  overflow:hidden; margin:10px 0 16px;
}
.pic-fortschritt span{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--mond));
  transition:width .4s ease;
}

.pic-filter{display:flex; flex-direction:column; gap:11px; margin:0 0 16px}
.pic-reiter{display:flex; gap:6px; flex-wrap:wrap}
.pic-felder{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.pic-felder .suchfeld{flex:1 1 200px; max-width:none}

.pic-raster{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(184px,1fr));
}
.pic-karte{
  display:flex; flex-direction:column; gap:8px; padding:11px; margin:0;
}
/* Geprueft tritt zurueck, ohne zu verschwinden: man will sehen, was noch
   offen ist, aber auch nachschlagen koennen, was man abgehakt hat. */
.pic-fertig{opacity:.62}
.pic-fertig:hover{opacity:1}
/* Angefasst, aber noch nicht gespeichert - sonst tippt man, blaettert
   weiter und die Aenderung ist weg. */
.pic-geaendert{
  outline:2px solid var(--warn); outline-offset:2px; opacity:1;
}
.pic-geaendert .pic-speichern{background:var(--warn); color:#241a05}

.pic-bild{
  position:relative; height:118px; display:grid; place-items:center;
  border-radius:10px; background:var(--surface-2);
}
.pic-bild img{max-width:118px; max-height:118px; object-fit:contain}
.pic-leer{font-size:12px; color:var(--ink-3)}
.pic-haken{
  position:absolute; top:6px; right:7px;
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; font-size:12px; font-weight:700;
  background:var(--good); color:#04221a;
}

.pic-form{display:flex; flex-direction:column; gap:6px}
.pic-name{width:100%; font-weight:600}
.pic-zeile{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px}
.pic-zeile select{min-width:0; font-size:11.5px; padding:4px 5px}
.pic-slug{font-size:10.5px; color:var(--ink-3); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; cursor:help}
.pic-tat{display:grid; grid-template-columns:1fr 1fr; gap:5px}
.pic-tat form{display:flex}
.pic-tat .btn{width:100%; padding:6px 8px; font-size:12.5px}

.pic-blaetter{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:20px 0 10px;
}

@media (max-width:560px){
  .pic-raster{grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
  .pic-bild{height:104px}
  .pic-bild img{max-width:92px; max-height:92px}
  .pic-zeile{grid-template-columns:1fr}
}

/* Im Kontrollraster wird gearbeitet, nicht gestaunt: 48 Karten, die beim
   Scrollen nacheinander auftauchen, heisst 48 Mal warten - und wer schnell
   blaettert, sieht eine leere Seite. Das Einblenden gilt hier nicht. */
.pic-karte.kommt, .pic-filter.kommt{opacity:1; transform:none}

/* Der Normalfall ist "passt", und der kostet keinen Klick: an der Kachel
   steht nichts, solange nichts geaendert wurde. Erst eine Aenderung holt
   den Speichern-Knopf hervor.

   Nur mit JavaScript - ohne steht er sichtbar da, sonst liesse sich eine
   Aenderung gar nicht abschicken. */
.pic-mit-js .pic-karte:not(.pic-geaendert) .pic-speichern{display:none}

.pic-alle{
  display:flex; align-items:center; justify-content:center; gap:12px;
  flex-wrap:wrap; margin:18px 0 4px;
}
.pic-alle-knopf{padding:11px 22px; font-size:15px}
.pic-alle-warnung{color:var(--warn)}

/* Zurücknehmen in der Auszahlungsliste. Die Rückfrage steht in derselben
   Zelle wie der Knopf - sie ersetzt ihn, statt die Zeile zu verschieben. */
.aus-zurueck{display:inline-flex}
.aus-frage{display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap;
  justify-content:flex-end}
.aus-frage .small{max-width:32ch; text-align:right}

/* ---- Fehler: Sprechblase und Seite ----
   Vorher landete jedes abgelehnte Formular auf einer nackten Seite -
   schwarzer Grund, ein Wort Englisch, der Text als JSON. Das sah nach
   einem Defekt aus und kostete alles, was man eingetippt hatte. */
.meldungen{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:3000; display:flex; flex-direction:column; gap:8px;
  width:min(440px,92vw); pointer-events:none;
}
.meldung{
  position:relative; pointer-events:auto;
  padding:13px 40px 13px 15px; border-radius:12px;
  background:var(--surface-2); color:var(--ink);
  border:1px solid var(--hairline-2); box-shadow:var(--shadow);
  font-size:14px; line-height:1.45;
  /* Die Einblendung bewegt NUR, sie blendet nicht.
     Zuerst lief hier `opacity:0 -> 1`. Nachgemessen blieb die Blase dann
     unsichtbar (opacity 0), obwohl sie korrekt positioniert und
     anklickbar war: startet die Animation nicht - gedrosselter Tab,
     langsames Geraet -, gilt ihr Startwert, und `forwards` greift erst
     NACH dem Ende. Eine Fehlermeldung, die niemand sieht, ist schlimmer
     als gar keine.
     Ueber `transform` kann das nicht passieren: bleibt die Animation
     aus, steht die Blase eben sofort an ihrem Platz. */
  animation:meldung-kommt .22s cubic-bezier(.22,1,.36,1);
}
.meldung.schlecht{
  border-color:color-mix(in srgb,var(--bad) 55%,var(--hairline));
  background:color-mix(in srgb,var(--bad) 13%,var(--surface-2));
}
.meldung.gut{
  border-color:color-mix(in srgb,var(--good) 55%,var(--hairline));
  background:color-mix(in srgb,var(--good) 13%,var(--surface-2));
}
.meldung.geht{animation:meldung-geht .24s ease forwards}
.meldung-zu{
  position:absolute; top:7px; right:9px;
  border:0; background:transparent; color:var(--ink-3);
  font-size:19px; line-height:1; cursor:pointer; padding:2px 5px;
}
.meldung-zu:hover{color:var(--ink)}
@keyframes meldung-kommt{
  from{transform:translateY(10px) scale(.98)}
  to{transform:none}
}
@keyframes meldung-geht{
  to{opacity:0; transform:translateY(6px) scale(.98)}
}
/* Wer Bewegung abgestellt hat, bekommt sie auch hier nicht. */
@media (prefers-reduced-motion:reduce){
  .meldung,.meldung.geht{animation:none}
}

.fehlerkarte{text-align:center}
.fehler-zeichen{
  display:grid; place-items:center; width:52px; height:52px;
  margin:0 auto 14px; border-radius:50%;
  background:color-mix(in srgb,var(--bad) 16%,var(--surface-2));
  color:var(--bad);
}
.fehler-text{font-size:15.5px; margin:8px 0 4px}
.fehler-wege{display:flex; gap:9px; justify-content:center;
  flex-wrap:wrap; margin-top:18px}


/* ---- Einzahlen: das Hinweisfenster ----
   Aufbau nach dem Vorbild (Starpets, Aufnahme vom 05.09.): Kopfzeile mit
   Symbol, Buehne, die Kernaussage hervorgehoben, der Erklaerkasten
   darunter, unten Schrittzaehler und ein grosser Weiter-Knopf.

   Die Buehne traegt hier keine Zeichnung, sondern den Inhalt selbst - im
   ersten Schritt die gesperrten Items. Ein huebsches Bild anzusehen und
   die Liste woanders suchen zu muessen waere die schlechtere Haelfte von
   beidem. */
.hinweis{
  width:min(560px,94vw); padding:0; overflow:hidden;
  border:1px solid var(--hairline); border-radius:16px;
  background:var(--surface); box-shadow:var(--shadow); color:var(--ink);
}
.hinweis::backdrop{background:rgba(7,28,49,.77); backdrop-filter:blur(8px)}

.hinweis-kopf{
  display:flex; align-items:center; gap:11px;
  padding:14px 16px; border-bottom:1px solid var(--hairline);
}
.hinweis-kopf strong{font-size:16px; flex:1}
.hinweis-symbol{
  display:grid; place-items:center; width:32px; height:32px;
  border-radius:9px; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 18%,var(--surface-2));
}
.hinweis-zu button{
  width:32px; height:32px; border-radius:9px; cursor:pointer;
  border:1px solid var(--hairline); background:var(--surface-2);
  color:var(--ink-2); font-size:19px; line-height:1;
}
.hinweis-zu button:hover{color:var(--ink); border-color:var(--hairline-2)}

.hinweis-schritt{display:flex; flex-direction:column; gap:11px;
  padding:16px}
.dep-illustration{margin:0;overflow:hidden;border-radius:13px;
  border:1px solid var(--hairline);background:var(--surface-2)}
.dep-illustration img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.dep-trade-illustration{border-radius:10px}

/* Die Buehne: heller Kasten wie im Vorbild, aber mit echtem Inhalt. */
.hinweis-buehne{
  border-radius:13px; padding:12px;
  background:var(--surface-2); border:1px solid var(--hairline);
  /* Hoch genug, dass ein Satz nicht mitten im Wort an der Kante
     endet - das sieht nach Fehler aus, nicht nach Rollbereich. */
  max-height:min(52vh,380px); overflow-y:auto; overscroll-behavior:contain;
}

/* Die Kernaussage - ein Satz, hervorgehoben. */
.hinweis-satz{
  display:flex; align-items:flex-start; gap:10px; margin:0;
  padding:12px 13px; border-radius:11px; font-weight:600; font-size:14px;
  color:var(--ink);
  background:color-mix(in srgb,var(--accent) 13%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
}
.hinweis-i{
  flex:none; width:19px; height:19px; border-radius:50%;
  display:grid; place-items:center; font-size:12px; font-weight:700;
  color:var(--accent-ink); background:var(--accent); margin-left:auto;
}
.hinweis-detail{
  margin:0; padding:12px 13px; border-radius:11px; font-size:13.5px;
  color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--hairline);
}

.hinweis-fuss{
  display:flex; align-items:center; gap:9px;
  padding-top:12px; border-top:1px solid var(--hairline);
}
.hinweis-fuss .spacer{flex:1}
.hinweis-zaehler{
  padding:8px 14px; border-radius:10px; font-size:13px; font-weight:600;
  color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--hairline);
}
/* Der Weiter-Knopf ist die eine Sache, die man hier tut - entsprechend
   gross. Im Vorbild ist er orange; hier bleibt es beim Mondlicht, sonst
   haette die Seite ploetzlich zwei Signalfarben. */
.btn.gross{
  padding:12px 26px; font-size:15px; font-weight:700;
  background:linear-gradient(135deg,var(--accent),var(--mond));
  color:var(--accent-ink); border:0;
}
.btn.gross:hover{filter:brightness(1.06)}
.hinweis-fuss .btn.ghost{padding:9px 15px; font-size:16px; line-height:1}

/* Die gesperrten Items in der Buehne. */
.dep-raster{
  display:grid; gap:7px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
.dep-eintrag{
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:9px;
  align-items:center; padding:6px 8px; border-radius:9px;
  background:var(--surface); border-left:3px solid var(--c,var(--hairline-2));
}
.dep-bild{width:34px; height:34px; display:grid; place-items:center}
.dep-bild img{max-width:30px; max-height:30px; object-fit:contain}
.dep-namen{display:flex; flex-direction:column; gap:0; min-width:0}
.dep-namen strong{font-size:13px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}

/* Die beiden Wege im zweiten Schritt. */
.hinweis-wege{display:flex; flex-direction:column; gap:9px}
.depot-alte-seite{display:none!important}
.dep-botkarte{display:flex;align-items:center;gap:10px;padding:12px;border-radius:11px;
  background:var(--surface);border:1px solid var(--hairline)}
.dep-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;
  background:var(--surface-3);font-size:24px}
.dep-avatar img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.dep-bottext{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.dep-bottext strong{font-size:14px}.dep-bottext small{font-size:12px;color:var(--ink-3)}
.dep-add{font-size:17px;line-height:1;padding:8px 9px!important;white-space:nowrap}
.dep-weg{
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  padding:11px; border-radius:10px; background:var(--surface);
  border:1px solid var(--hairline);
}
.dep-weg p{margin:0}
.dep-marke{
  font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent);
}
.dep-wip{color:var(--warn)}

@media (max-width:560px){
  .hinweis{width:100vw; max-width:100vw; border-radius:0; border:0}
  .dep-raster{grid-template-columns:1fr}
  .hinweis-fuss .btn.gross{flex:1}
}

/* Der Umtauschaufschlag auf der Coin-Kachel, klein neben der
   Netzwerkgebuehr. Zwei getrennte Abzeichen waeren zwei Zahlen ohne
   Zusammenhang; so liest es sich als "Gebuehr plus Aufschlag". */
.muenze-tausch{opacity:.75; font-size:.85em; margin-left:2px}
.auf-gebuehrnote{margin:10px 2px 0; line-height:1.5}

/* ---- Was ueber der Seite schwebt, ist deckend ---- */
/* Gemeldet als "mach nicht, dass es transparent ist. Man soll da nicht
   durchsehen." Betrifft das Kontomenue und die Fenster darin. */
.konto-feld, .kfenster, .guthaben-feld{background:var(--surface-fest)}

/* ---- Aufgeraeumte Kopfzeile ---- */
/* Oben stehen nur noch Markt, Duelle und Inventar; alles Weitere liegt im
   Profilmenue. Damit ist die Leiste kurz genug, dass sie nicht mehr
   umbricht - die Ausweichregeln dafuer bleiben trotzdem stehen, weil
   Sprache und Anmeldezustand die Breite weiter aendern. */

/* Die ungelesenen Nachrichten im Menue: rechts an der Zeile, nicht
   hinter dem Wort. Hinter dem Wort schoebe sie den Untertitel um. */
.konto-liste a{position:relative}
.konto-liste .dm-zahl{position:absolute; right:13px; top:50%;
  transform:translateY(-50%)}

/* Die Sprachwahl als eigene Zeile, nicht als Menueeintrag: es sind zwei
   Schalter, keine zwei Wege. */
.konto-sprache{display:flex; gap:8px; padding:10px 14px;
  border-top:1px solid var(--hairline)}
.konto-sprache .flagge{font-size:17px; line-height:1; opacity:.5;
  text-decoration:none; transition:opacity .15s}
.konto-sprache .flagge:hover{opacity:.85}
.konto-sprache .flagge.on{opacity:1}

/* Das Menue traegt jetzt neun Eintraege statt fuenf. Auf einem flachen
   Fenster reicht die Hoehe nicht mehr, und ohne Begrenzung waere der
   letzte - Abmelden - unerreichbar. */
.konto-feld{max-height:calc(100dvh - var(--navhoehe, 70px) - 24px);
  overflow-y:auto; overscroll-behavior:contain}

/* ---- Der Filter ist eine Wand, kein Kaestchen (ab 861 px) ---- */
/* Gemeldet als "er schwebt so maessig". Er stand als Karte mit runden
   Ecken mitten in der Flaeche, weil `main` seine Polsterung und seine
   Maximalbreite an alles darin weitergab.

   Vorbild ist Starpets (Aufnahme vom 06.09.): die Filterspalte geht von
   der Kante bis zur Kante und von oben bis unten, getrennt nur durch
   eine Linie. Dafuer musste der Marktkopf NEBEN sie wandern - solange er
   darueber stand, konnte sie oben gar nicht anstossen. */
/* 901 px, nicht 861: DIESE Grenze entscheidet, ob der Filter eine Spalte
   ist (`marktflaeche{flex-direction:row}` weiter oben) oder eine
   aufklappbare Leiste. Bei 861 haette die Wand-Gestaltung fuer Breiten
   gegolten, in denen es gar keine Wand gibt - bei 900 px stand dann eine
   264 px breite, 42 px hohe Kachel oben links und sonst nichts. */
@media (min-width:901px){
  /* `width:100%` gehoert dazu: ohne das blieb `main` 28 px schmaler als
     der Koerper (1323 statt 1351 bei 1366 px Fenster), und rechts neben
     der Wand stand ein leerer Streifen. */
  body.markt-app main{max-width:none; margin:0; padding:0; width:100%;
    /* `animation:none` ist hier kein Schoenheitswunsch. Die
       Auftauch-Animation setzt `transform`, und ein Vorfahr mit
       Transform wird zum Bezugsrahmen fuer `position:sticky` - die
       klebenden Spalten sassen dadurch zehn Pixel zu tief (genau die
       `translateY(10px)` des Keyframes) und ihr unterer Rand entsprechend
       unter dem Fensterrand. */
    animation:none}
  body.markt-app .marktflaeche{gap:0}
  body.markt-app .filterbox{
    width:264px; border:0; border-right:1px solid var(--line);
    border-radius:0; background:var(--surface-2);
    padding:16px 16px 26px;
  }
  /* Die rechte Spalte holt sich die Polsterung zurueck, die `main`
     abgegeben hat - und deckelt ihre Breite, damit die Kacheln auf einem
     sehr breiten Schirm nicht auseinanderlaufen. */
  /* `flex:1` MUSS hier stehen. Es stand frueher in der App-Schale und
     ist mit ihr verschwunden; solange der Marktkopf da war, machte
     dessen Breite die Spalte trotzdem breit, und der Verlust fiel nicht
     auf. Ohne Kopf schrumpfte sie auf ihren Inhalt - zwei Kacheln pro
     Reihe und rechts ein leeres Drittel.

     `min-width:0` dazu, sonst kann eine Flex-Spalte nicht unter die
     Breite ihres Inhalts. */
  body.markt-app .markt-spalte{
    flex:1; min-width:0; display:flex; flex-direction:column;
    padding:14px 20px 0; max-width:1560px;
  }
  body.markt-app .markt-fest{margin-bottom:2px}
}

/* ══════════════════════════════════════════════════════════════════════
   Die rechte Wand: Chat und Quests
   ══════════════════════════════════════════════════════════════════════

   Rechts war seit dem Umbau der Filterspalte nichts mehr. Die Wand ist
   bewusst dieselbe Bauart wie links - an der Kante, ohne runde Ecken, von
   oben bis unten, getrennt durch eine Linie. Zwei Waende, die verschieden
   aussehen, waeren zwei Gestaltungen fuer dieselbe Rolle.

   Die Reiter sind Radioknoepfe, kein JavaScript: welches Blatt sichtbar
   ist, entscheidet CSS ueber `:checked`. Damit steht der Chat auch ohne
   Skript da - er kann dann nur nichts nachladen, aber das gilt fuer die
   schwebende Fassung genauso. */
.rechte-wand{display:none}

@media (min-width:1240px){
  .rechte-wand{
    display:flex; flex-direction:column; flex:none; width:296px;
    border-left:1px solid var(--line); background:var(--surface-2);
    position:sticky; top:var(--navhoehe,74px);
    height:calc(100dvh - var(--navhoehe,74px));
    min-height:0;
  }
}

.wand-reiter{display:flex; border-bottom:1px solid var(--line); flex:none}
.wand-reiter input{position:absolute; opacity:0; pointer-events:none}
.wand-reiter label{
  flex:1; text-align:center; padding:12px 8px; cursor:pointer;
  font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:13.5px;
  color:var(--ink-3); border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.wand-reiter label:hover{color:var(--ink-2)}
.wand-reiter input:checked + label{color:var(--ink); border-bottom-color:var(--accent)}
.wand-reiter input:focus-visible + label{outline:2px solid var(--accent);
  outline-offset:-2px}

/* Standardmaessig ist nichts zu sehen; der angehakte Reiter zeigt seins.
   Ueber `:has` am Kasten, damit die Blaetter nicht unmittelbar auf die
   Knoepfe folgen muessen und die Reihenfolge im Quelltext frei bleibt. */
/* `flex-direction:column` ist hier keine Feinheit: als Zeile (die
   Vorgabe) nimmt der Chat seine Inhaltsbreite - gemessen 358 px in einer
   296 px breiten Wand -, und die Eingabezeile samt Sendeknopf lief rechts
   aus dem Bild. `min-width:0` am Kind, damit es ueberhaupt schrumpfen
   darf. */
.wand-blatt{display:none; flex:1; min-height:0; min-width:0;
  flex-direction:column; overflow:hidden}
.wand-blatt > *{min-width:0; width:100%}
.rechte-wand:has(#wand-chat:checked) .wand-blatt[data-blatt="chat"]{display:flex}
.rechte-wand:has(#wand-quests:checked) .wand-blatt[data-blatt="quests"]{display:flex}

/* Der Chat in der Wand ist kein schwebendes Fenster mehr: keine feste
   Lage, kein Rahmen, keine runden Ecken, kein Auftauchen. Er fuellt sein
   Blatt. */
.wand-blatt .chat{
  position:static; width:auto; max-height:none; height:100%;
  border:0; border-radius:0; box-shadow:none; backdrop-filter:none;
  background:none; animation:none; z-index:auto;
}
.wand-blatt .chat-kopf{display:none}   /* Der Reiter sagt es schon */

/* Schmal ist rechts kein Platz fuer eine Wand. Sie wird dann zu einem
   gewoehnlichen Abschnitt unter dem Raster - mit denselben Reitern.
   Die schwebende Fassung mit Knopf gibt es auf dieser Seite NICHT: sie
   waere ein zweiter Chat mit denselben Kennungen, und `chat.js` faende
   dann den falschen. Ein Abschnitt am Ende der Seite braucht dafuer
   keinerlei Umschaltlogik. */
@media (max-width:1239px){
  /* `flex-direction:column` MUSS hier nochmal stehen: gesetzt war es nur
     in der breiten Regel darueber. Schmal standen Kopf, Blatt und Fuss
     dadurch nebeneinander, und der Fuss lief rechts aus dem Kasten
     (gemessen 375 px, Verkaufsseite, 10.09.2026). */
  .rechte-wand{
    display:flex; flex-direction:column; width:auto; margin:16px 0 0;
    border:1px solid var(--line); border-radius:12px; overflow:hidden;
    background:var(--surface-2);
  }
  .rechte-wand .wand-blatt{height:min(58vh,420px)}
}

.wand-leer{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:30px 22px; width:100%;
}
.wand-leer-zeichen{font-size:26px; color:var(--ink-3); line-height:1}
.wand-leer p{margin:0; max-width:24ch}

/* ---- Der Filter darf Platz nehmen ---- */
/* Die Wand ist 264 px breit und war mit 12,5-px-Chips und 10,5-px-
   Ueberschriften auf Sparflamme beschriftet - gemeldet als "da steht so
   viel, mach einfach alles groesser". Sie hat den Platz; die Enge stammte
   aus der Zeit, als der Filter eine schmale Spalte neben dem Raster war. */
@media (min-width:901px){
  body.markt-app .filterbox .filter-titel{
    font-size:11.5px; letter-spacing:.1em; margin:16px 0 8px;
  }
  body.markt-app .filterbox .chip{
    font-size:13.5px; padding:7px 12px 7px 10px; gap:8px;
  }
  body.markt-app .filterbox .chip .punkt{width:9px; height:9px}
  body.markt-app .filterbox .chip .zahl{font-size:12px}
  body.markt-app .filterbox .chips{gap:7px}
  body.markt-app .filterbox input:not([type=checkbox]){
    font-size:14px; padding:9px 11px;
  }
  body.markt-app .filterbox .filter-kopf strong{font-size:15px}
  body.markt-app .filterbox .btn.primary{font-size:14.5px; padding:11px 16px}
}

/* Chroma ist keine Farbe, sondern alle. Der Punkt am Chip war bisher das
   Tuerkis aus `--r-chroma` - also blau, und damit von Ancient kaum zu
   unterscheiden. Jetzt traegt er denselben Regenbogen wie der Streifen
   ueber der Kachel. */
.chip.rar-chroma .punkt{
  background:conic-gradient(#ff4d7d,#ffae35,#fff36a,#52ee8a,#47d9ff,#8d6bff,#ff55dc,#ff4d7d);
  box-shadow:0 0 8px rgba(255,255,255,.35);
}
.chip.rar-chroma input:checked ~ span:not(.punkt){color:var(--ink)}

/* Beim Filtern werden Kacheln per `hidden` weggeschaltet. `.item` ist
   `display:flex`, und Autoren-CSS schlaegt das eingebaute `hidden` - ohne
   diese Zeile blieben die versteckten Kacheln stehen. Derselbe Fehler wie
   damals bei der Auswahlleiste im Verkaufen. */
.markt-raster .item[hidden]{display:none!important}
.markt-nichts{margin:26px 2px; color:var(--ink-2)}

/* Markt-Finish: Die Ware bleibt bunt, die Oberflaeche darum wird ruhiger.
   Vorher bekam jede Godly-Karte eine fast vollflaechige pinke Umrandung.
   Das zog den Blick vom Item weg und machte das Raster bei vielen Karten
   unruhig. Jetzt traegt nur die schmale obere Kante die Seltenheitsfarbe;
   Bildhof und Hover geben sie gezielt wieder auf. */
body.markt-app .marktkarte{
  border-color:color-mix(in srgb,var(--c) 22%,var(--hairline));
  background:linear-gradient(180deg,#242629 0%,#1e2023 100%);
  box-shadow:0 13px 28px -24px rgba(17,18,20,.96),
             0 1px rgba(255,255,255,.035) inset;
}
body.markt-app .marktkarte .top{
  height:4px;
  background:linear-gradient(90deg,transparent 0%,var(--c) 16%,var(--c) 84%,transparent 100%);
  opacity:.88;
}
body.markt-app .marktkarte .bild{
  background:radial-gradient(ellipse 78% 72% at 50% 61%,
      color-mix(in srgb,var(--c) 28%,transparent),transparent 74%),
    linear-gradient(160deg,#282a2e,#1c1d20 74%);
  border-bottom:1px solid color-mix(in srgb,var(--c) 19%,var(--hairline));
}
body.markt-app .marktkarte .body{padding:10px 11px 11px}
body.markt-app .marktkarte .foot{
  padding:8px 11px;
  background:rgba(25,26,28,.18);
  border-top:1px solid rgba(255,255,255,.055);
}
body.markt-app .marktkarte:hover{
  border-color:color-mix(in srgb,var(--c) 64%,white 5%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 19%,transparent),
             0 18px 30px -25px rgba(17,18,20,.98);
}

/* Suche und Sortierung gehoeren sichtbar zusammen. Die Leiste grenzt sich
   als Werkzeugflaeche vom Sternenhintergrund ab, ohne wie ein dritter
   grosser Kasten auszusehen. */
body.markt-app .markt-leiste{
  margin:0 -14px 10px;
  padding:10px 14px;
  border-top:1px solid rgba(255,255,255,.045);
  border-bottom:1px solid var(--hairline);
  background:linear-gradient(90deg,rgba(28,29,32,.96),rgba(23,24,26,.94));
  box-shadow:0 9px 20px -22px rgba(17,18,20,.9);
}
body.markt-app .leiste-suche input{
  background:rgba(18,18,20,.72);
  border-color:rgba(154,156,161,.34);
}
body.markt-app .leiste-suche:focus-within input{
  border-color:color-mix(in srgb,var(--accent) 72%,white 8%);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
}
body.markt-app .sortierung{
  padding:4px;
  border-color:rgba(154,156,161,.32);
  background:rgba(18,18,20,.72);
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
body.markt-app .sort-option{padding:8px 12px;letter-spacing:.02em}
body.markt-app .sort-option.an{
  box-shadow:0 4px 13px color-mix(in srgb,var(--accent) 24%,transparent);
}

/* Der Buy/Sell-Schalter bekommt dieselbe Sprache wie die Sortierung. */
body.markt-app .markt-schalter{
  padding:4px;
  margin:0 0 12px;
  border-color:rgba(154,156,161,.32);
  background:rgba(18,18,20,.62);
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
body.markt-app .mschalter{padding:8px 22px;color:var(--ink-2)}
body.markt-app .mschalter.an{
  /* Der Akzent ist hell; die Menuefarbe aus aelteren Regeln war auf manchen
     Browsern ebenfalls hell. Ein fester dunkler Kontrastwert macht Buy und
     Sell in jedem aktiven Zustand lesbar. */
  color:#101112 !important;
  text-shadow:none;
  box-shadow:0 4px 13px color-mix(in srgb,var(--accent) 22%,transparent);
}

/* Die Filterwand ist etwas dunkler als die Karten; dadurch bleibt sie ein
   Werkzeug und konkurriert nicht mit den Seltenheitsfarben. */
@media(min-width:901px){
  body.markt-app .filterbox{
    background:linear-gradient(180deg,#2d2f34,#26272b 78%);
    box-shadow:inset -1px 0 rgba(255,255,255,.035);
  }
  body.markt-app .filterbox .chip.leer{opacity:.44;filter:saturate(.58)}
}

/* Das Seltenheitsschild ("GODLY", "ANCIENT") ist von den Kacheln
   verschwunden. Es stand ueber dem Bild und sagte, was der farbige
   Streifen darueber und der Rahmen ohnehin sagen - dreimal dieselbe
   Auskunft, und die Schrift verdeckte dabei die Waffe.

   Die Klasse bleibt: sie kommt auf der Artikelseite und in den
   Kaufgesuchen weiter vor, wo es keinen Streifen gibt. */

/* ---- Die Auswahl als rechte Wand (Verkaufsseite) ---- */
/* Sie war ein Kasten, der erst auftauchte, wenn man etwas angeklickt
   hatte. Als Wand ist sie von Anfang an da - also braucht sie einen
   leeren Zustand und einen Fuss, der blass bleibt, solange nichts drin
   ist. Ein voll aussehender Knopf ohne Wirkung waere schlechter als ein
   sichtbar wartender. */
.rechte-wand .wand-reiter{
  align-items:center; gap:10px; padding:10px 14px; justify-content:space-between;
}
.wand-titel{
  font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:13.5px;
  color:var(--ink);
}
.auswahl-blatt{display:flex; flex-direction:column; overflow-y:auto;
  overscroll-behavior:contain; padding:10px 12px}
.auswahl-fuss{
  flex:none; padding:12px 14px; border-top:1px solid var(--line);
  transition:opacity .18s;
}
.auswahl-fuss.still{opacity:.45}
.auswahl-fuss.still button{pointer-events:none}

/* Die Tabellen unter dem Raster stehen in der Rasterspalte und brauchen
   deshalb wieder etwas Luft nach oben. */
.inv-unten{margin-top:26px; padding-bottom:40px}
.inv-unten h2{margin-bottom:0}

/* Die Verkaufsseite hat keinen zweiten Reiter - der Titel steht links,
   der Aufraeumknopf rechts. */
.rechte-wand:has(.auswahl-fuss) .wand-blatt{display:flex}

/* Rechte Wand: Chat und Quests bekommen eine eigene, ruhige Oberflaeche.
   Die Reiter lesen sich jetzt als zwei Modi derselben Seitenleiste statt
   als zwei Ueberschriften ueber einer leeren Flaeche. */
@media(min-width:1240px){
  :is(body.markt-app,body.duell-app) .rechte-wand{
    background:linear-gradient(180deg,#292b2f 0%,#1e2023 48%,#1a1b1e 100%);
    box-shadow:inset 1px 0 rgba(255,255,255,.035);
  }
}
:is(body.markt-app,body.duell-app) .wand-reiter{
  gap:6px; padding:10px 12px; border-bottom-color:rgba(255,255,255,.07);
  background:rgba(30,31,33,.32);
}
:is(body.markt-app,body.duell-app) .wand-reiter label{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 7px; border:1px solid transparent; border-radius:10px;
  border-bottom:1px solid transparent; letter-spacing:.04em; font-size:12px;
}
.wand-reiter label{display:flex; align-items:center; justify-content:center; gap:7px}
.wand-icon{flex:none; opacity:.8; transition:transform .2s}
.wand-reiter input:checked + label .wand-icon{opacity:1}
.wand-reiter label:hover .wand-icon{transform:translateY(-1px) rotate(-6deg)}
:is(body.markt-app,body.duell-app) .wand-reiter input:checked + label{
  color:var(--accent-ink); border-color:transparent; background:var(--accent);
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 20%,transparent);
}

/* Einzelne Chatzeilen erhalten genug Luft zum Lesen, ohne wie Nachrichten-
   Blasen den schmalen Bereich noch enger zu machen. */
:is(body.markt-app,body.duell-app) .wand-blatt .chat-zeilen{
  padding:12px 10px 14px; gap:4px;
  background:radial-gradient(ellipse 92% 44% at 50% 0%,rgba(154,156,161,.12),transparent 74%);
}
:is(body.markt-app,body.duell-app) .wand-blatt .chat-zeile{
  grid-template-columns:34px auto minmax(0,1fr); gap:6px;
  padding:7px 7px; border-radius:9px; transition:background .16s ease;
}
:is(body.markt-app,body.duell-app) .wand-blatt .chat-zeile:hover{background:rgba(255,255,255,.045)}
:is(body.markt-app,body.duell-app) .wand-blatt .chat-zeit{font-size:10px;align-self:center}
:is(body.markt-app,body.duell-app) .wand-blatt .chat-name{font-weight:700}
:is(body.markt-app,body.duell-app) .wand-blatt .chat-text{color:color-mix(in srgb,var(--ink) 78%,var(--ink-3))}
:is(body.markt-app,body.duell-app) .wand-blatt .chat-form{
  gap:8px; padding:12px 10px; border-top-color:rgba(255,255,255,.08);
  background:rgba(27,28,29,.35);
}
:is(body.markt-app,body.duell-app) .wand-blatt .chat-form input{background:rgba(18,19,21,.72)}
:is(body.markt-app,body.duell-app) .wand-blatt .chat-form .btn{padding-inline:13px;min-height:38px}

/* Quests ist noch leer, sieht aber bereits wie ein geplanter Spielbereich
   aus statt wie eine fehlende Seite. */
:is(body.markt-app,body.duell-app) .wand-leer{
  position:relative; isolation:isolate; gap:10px; padding:34px 24px;
  background:radial-gradient(circle at 50% 35%,rgba(176,178,183,.16),transparent 38%);
}
:is(body.markt-app,body.duell-app) .wand-leer::before{
  content:"COMING SOON"; font-size:9px; font-weight:800; letter-spacing:.16em;
  color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
  border-radius:999px; padding:5px 9px;
}
:is(body.markt-app,body.duell-app) .wand-leer-zeichen{
  display:grid; place-items:center; width:54px; height:54px; border-radius:18px;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  box-shadow:0 0 26px -9px color-mix(in srgb,var(--accent) 62%,transparent);
  font-size:27px;
}
:is(body.markt-app,body.duell-app) .wand-leer strong{font-size:16px;letter-spacing:.02em}

/* Filter als kompaktes Raster: die Seltenheiten sind schneller scannbar,
   jede Zeile bleibt aber breit genug fuer Namen und Anzahl. */
@media(min-width:901px){
  body.markt-app .filterbox .filter-kopf{
    padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.075);
  }
  body.markt-app .filterbox .filter-titel{
    display:flex; align-items:center; gap:7px; color:var(--ink-2);
  }
  body.markt-app .filterbox .filter-titel::before{
    content:""; width:5px; height:5px; border-radius:50%; background:var(--accent);
    box-shadow:0 0 8px color-mix(in srgb,var(--accent) 72%,transparent);
  }
  body.markt-app .filterbox .chips{
    display:grid; grid-template-columns:minmax(0,1fr); gap:7px;
  }
  body.markt-app .filterbox .chip{
    min-width:0; box-sizing:border-box; overflow:hidden;
    justify-content:flex-start; padding:9px 12px; gap:8px;
  }
  body.markt-app .filterbox .chip > span:nth-of-type(2){
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  body.markt-app .filterbox .chip .zahl{flex:0 0 auto; margin-left:auto}
  body.markt-app .filterbox .preisspanne{
    padding:4px; border:1px solid rgba(255,255,255,.07); border-radius:12px;
    background:rgba(27,28,29,.2);
  }
  body.markt-app .filterbox .preisspanne input{border-color:rgba(154,156,161,.3)}
}

/* Duell anlegen: zuerst die Rolle als klare Entscheidung, danach erst die
   eigenen Items. Die Szene gibt den Karten einen gemeinsamen, spielbaren
   Kontext, ohne ihre Texte zu ueberdecken. */
.duell-szene{height:330px; margin:16px 0 14px; overflow:hidden; border-radius:14px;
  border:1px solid rgba(105,164,227,.38); background:#1c1d20}
.duell-szene img{width:100%; height:100%; object-fit:cover; object-position:center 30%;
  display:block; filter:saturate(1.08) contrast(1.04)}
.duell-dialog .modi{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px;
  margin:0 0 18px}
.duell-dialog .modus-karte .inhalt{height:100%; min-height:104px; box-sizing:border-box;
  padding:13px; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:11px;
  align-content:start; border-radius:12px; background:rgba(21,22,24,.55)}
.duell-dialog .modus-karte .small{grid-column:2; margin-top:4px; line-height:1.28}
.modus-nummer{font:700 12px var(--mono); color:var(--ink-3); padding-top:2px}
.duell-dialog .rollen{display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.duell-dialog .rolle{font-family:"Fredoka",sans-serif; font-size:17px; letter-spacing:.01em}
.modus-kurz{font:700 10px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.duell-dialog .modus-karte.modus-sm input:checked + .inhalt{border-color:#8dc4fe; box-shadow:0 0 0 1px #8dc4fe,0 10px 26px -18px #79b9fe}
.duell-dialog .modus-karte.modus-mm input:checked + .inhalt{border-color:var(--moerder); box-shadow:0 0 0 1px var(--moerder),0 10px 26px -18px var(--moerder)}
.duell-einsatz{animation:meldung-kommt .22s cubic-bezier(.22,1,.36,1)}
@media(max-width:620px){.duell-dialog .modi{grid-template-columns:1fr}.duell-szene{height:240px}}

/* Der Einsatz ist ein eigener, kompakter Katalogschritt: neun Kacheln auf
   einen Blick, weitere erst beim bewussten Scrollen. */
dialog.duell-katalog{width:min(94vw,720px);max-height:min(84vh,740px)}
.duell-katalog .einsatz-suche{margin:12px 0 10px}

/* Die oeffentliche Duellliste zeigt beide Seiten wie einen kleinen Pot:
   Spieler, Einsatz und ein klarer freier Platz bleiben voneinander getrennt. */
.duellkarte{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;
  align-items:stretch;padding:13px;overflow:hidden}
.duellspieler{min-width:0;padding:11px;border:1px solid var(--hairline-2);border-radius:10px;
  background:rgba(37,38,41,.34)}
.duellspieler.gegner{background:rgba(28,29,32,.48)}
.duellprofil{display:flex;align-items:center;gap:9px;min-width:0}
.duellprofil>img,.duell-avatar{width:42px;height:42px;border-radius:50%;flex:none;object-fit:cover;
  border:1px solid var(--hairline-2);background:var(--surface-3)}
.duell-avatar{display:grid;place-items:center;font:700 13px "Chakra Petch",sans-serif;color:var(--ink-2)}
.duellprofil>div{min-width:0;display:grid;gap:1px}.duellprofil strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duellprofil .lbl{font-size:9px}.duell-einsatzliste{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;min-height:70px}
.duell-item{position:relative;width:70px;height:70px;display:grid;place-items:center;overflow:hidden;border-radius:11px;
  border:1px solid var(--hairline-2);background:radial-gradient(circle at 50% 40%,rgba(137,140,147,.2),rgba(18,19,21,.72))}
.duell-item img{width:90%;height:90%;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(29,30,32,.35))}
.duell-item b{position:absolute;right:1px;bottom:1px;padding:1px 4px;border-radius:5px;background:#151618;color:#fff;font:700 10px var(--mono)}
.duell-trenner{align-self:center;display:flex;flex-direction:column;align-items:center;gap:7px}.duell-trenner .modus-marke{white-space:nowrap}
.duell-vs{font:700 12px var(--mono);letter-spacing:.12em;color:var(--ink-3)}
.duellspieler.frei{display:flex;align-items:center;gap:9px;border-style:dashed;background:rgba(37,38,41,.16)}
.duellspieler.frei>div:not(.duell-aktion){min-width:0;display:grid;gap:3px}.duellspieler.frei .small{line-height:1.25}
.duell-avatar.plus{color:var(--accent);font-size:24px;border-color:rgba(109,234,206,.42)}.duell-aktion{margin-left:auto}.duell-aktion form{margin:0}
.duell-queue{display:flex;align-items:center;gap:13px;border-color:rgba(109,234,206,.3);background:linear-gradient(100deg,rgba(33,99,92,.2),rgba(26,27,30,.72))}
.queue-nummer{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(109,234,206,.14);border:1px solid rgba(109,234,206,.46);color:var(--accent);font:700 16px var(--mono)}
@media(max-width:760px){.duellkarte{grid-template-columns:1fr;gap:8px}.duell-trenner{flex-direction:row;justify-content:center}.duellspieler.frei{justify-content:flex-start}.duell-aktion{margin-left:auto}}

/* Einzelnes Duell: Der Kopf ist eine echte Zeile und der Pot zeigt die
   eingesetzten Items als grosse Karten statt als winzige Beschriftungen. */
.duell-spiel-kopf{display:flex;align-items:center;gap:14px;margin:2px 0 20px}
.duell-spiel-kopf .zurueck{width:auto;height:38px;margin:0;padding:0 11px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:17px}
.duell-spiel-kopf .zurueck span{font-size:13px}.duell-spiel-kopf h1{margin-top:1px}
.duell-spiel-kopf .lbl{font-size:10px;letter-spacing:.14em;color:var(--ink-3)}
.duell-aktualisieren-wrap{margin-left:auto;display:flex;align-items:center;gap:8px}.duell-aktualisieren{white-space:nowrap}
.verlustfenster{max-width:470px;text-align:center;border-color:color-mix(in srgb,var(--bad) 52%,var(--hairline));background:linear-gradient(155deg,#331323 0%,var(--surface) 45%,#1e1f22 100%)}.verlustfenster form{position:static;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}.verlustfenster h2,.verlustfenster p{margin:0}.verlust-warnung{padding:10px 12px;border:1px solid rgba(255,91,113,.34);border-radius:10px;background:rgba(255,91,113,.08);text-align:left}.verlust-aktionen{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.duell-pot{padding:20px 22px;margin:0 0 18px;border-color:rgba(103,161,222,.55);background:linear-gradient(125deg,rgba(63,66,73,.72),rgba(35,37,40,.9))}
.pot-kopf{margin-bottom:17px}.pot-kopf strong{font-size:12px}.pot-seiten{gap:18px;align-items:stretch}
.pot-seite{min-width:0;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(31,32,34,.24)}
.pot-seite.gegner{background:rgba(29,30,33,.42)}.pot-items{gap:10px;margin-top:10px;min-height:106px}
.pot-item{width:108px;min-height:104px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding:7px;border-radius:10px;background:rgba(20,21,23,.58);font-size:11px;text-align:center}
.pot-item img{width:92px;height:78px;max-width:100%;object-fit:contain;border-radius:6px;background:transparent;filter:drop-shadow(0 6px 7px rgba(29,30,32,.34))}
.pot-item span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pot-item b{color:var(--accent)}
.pot-plus{align-self:center;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(109,234,206,.13);border:1px solid rgba(109,234,206,.35);font:700 10px var(--mono);letter-spacing:.08em}
.pot-leer{align-self:center;display:flex;align-items:center;min-height:104px;padding:0 5px}.duell-modus-info{display:flex;align-items:center;gap:18px;padding:17px 20px}.duell-modus-info>div{display:flex;align-items:center;gap:15px;min-width:0}.duell-modus-info .modus-marke.gross{margin:0;white-space:nowrap}.duell-modus-info p{margin:0;max-width:48ch}
@media(max-width:720px){.duell-spiel-kopf{align-items:flex-start;flex-wrap:wrap}.duell-aktualisieren-wrap{margin-left:0;width:100%}.duell-pot{padding:15px}.pot-seiten{grid-template-columns:1fr;gap:10px}.pot-plus{justify-self:center}.pot-items{min-height:92px}.pot-item{width:96px;min-height:92px}.pot-item img{width:80px;height:64px}.duell-modus-info,.duell-modus-info>div{align-items:flex-start;flex-direction:column;gap:7px}}

/* Marktkarte: Das Item ist die Hauptsache. Es sitzt mittig in einem etwas
   groesseren, beschnittenen Bildfeld; der Hover bleibt vollstaendig darin. */
.markt-raster{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.markt-raster .marktkarte .bild{height:174px;box-sizing:border-box;display:grid;place-items:center;padding:9px;overflow:hidden}
.markt-raster .marktkarte .bild img{max-width:108px;max-height:108px;object-fit:contain;object-position:center;transform-origin:center}
.markt-raster .marktkarte:hover .bild img{transform:scale(1.04)}
.markt-raster .marktkarte:active .bild img{transform:scale(1.02)}
.markt-raster .marktkarte.duell-gesperrt{border-color:rgba(255,91,113,.78);background:linear-gradient(145deg,rgba(111,22,42,.56),var(--surface));cursor:not-allowed}.markt-raster .marktkarte.duell-gesperrt .bild{filter:saturate(.58)}.duell-sperre{position:absolute;z-index:4;right:8px;bottom:8px;padding:3px 7px;border-radius:6px;background:rgba(110,18,37,.92);border:1px solid rgba(255,110,126,.68);color:#ffd6dc;font:700 10px var(--mono);text-transform:uppercase}.duell-sperre-text{color:#ffacb8;line-height:1.3}.duell-hinweis{position:absolute;z-index:5;left:50%;bottom:13px;width:min(195px,calc(100% - 22px));padding:9px 11px;border:1px solid rgba(130,190,254,.55);border-radius:10px;background:linear-gradient(145deg,#33353a,#212326);box-shadow:0 10px 28px rgba(17,18,20,.48);color:#ebf5ff;font:600 11px/1.35 var(--font);text-align:center;opacity:0;pointer-events:none;transform:translate(-50%,8px) scale(.97);transition:opacity .16s ease,transform .16s ease}.duell-hinweis::after{content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;background:#313338;border-left:1px solid rgba(130,190,254,.55);border-top:1px solid rgba(130,190,254,.55);transform:translateX(-50%) rotate(45deg)}.markt-raster .marktkarte.duell-abkuehlend{position:relative;overflow:hidden;cursor:not-allowed}.markt-raster .marktkarte.duell-abkuehlend>*:not(.duell-sperre):not(.duell-hinweis){filter:blur(4px);opacity:.58;pointer-events:none}.markt-raster .marktkarte.duell-abkuehlend::after{content:"";position:absolute;z-index:3;inset:0;background:rgba(25,5,12,.35);pointer-events:none}.markt-raster .marktkarte.duell-abkuehlend .duell-sperre{inset:50% auto auto 50%;right:auto;bottom:auto;transform:translate(-50%,-50%);min-width:104px;padding:11px 15px;border-radius:11px;text-align:center;background:linear-gradient(135deg,#ff3158,#b9092d);border:1px solid rgba(255,211,218,.84);box-shadow:0 8px 26px rgba(95,0,18,.65),0 0 20px rgba(255,42,76,.36);color:#fff;font:800 21px var(--mono);letter-spacing:.04em;text-shadow:0 1px 2px rgba(17,18,20,.5);text-transform:none;pointer-events:auto}.markt-raster .marktkarte.duell-abkuehlend:hover .duell-hinweis,.markt-raster .marktkarte.duell-abkuehlend:focus-within .duell-hinweis{opacity:1;transform:translate(-50%,0) scale(1)}.markt-raster .marktkarte.duell-abkuehlend .duell-sperre:hover{filter:brightness(1.13);transform:translate(-50%,-50%) scale(1.04)}
.markt-raster .marktkarte.duell-gesperrt{position:relative;overflow:hidden}.markt-raster .marktkarte.duell-gesperrt>*:not(.duell-sperre):not(.duell-hinweis){filter:blur(4px);opacity:.5;pointer-events:none}.markt-raster .marktkarte.duell-gesperrt::after{content:"";position:absolute;z-index:3;inset:0;background:rgba(80,4,21,.43);pointer-events:none}.markt-raster .marktkarte.duell-gesperrt .duell-sperre{inset:50% auto auto 50%;right:auto;bottom:auto;transform:translate(-50%,-50%);min-width:112px;padding:11px 15px;border-radius:11px;text-align:center;background:linear-gradient(135deg,#a70729,#570415);border-color:rgba(255,168,181,.82);box-shadow:0 8px 26px rgba(83,0,16,.7),0 0 20px rgba(255,37,76,.32);color:#fff;font:800 17px var(--font);letter-spacing:.06em;text-transform:uppercase}.markt-raster .marktkarte.duell-gesperrt:hover .duell-hinweis{opacity:1;transform:translate(-50%,0) scale(1)}
.markt-raster .marktkarte .foot{position:absolute;right:10px;bottom:9px;z-index:2;padding:0;border:0;background:transparent;min-height:0}
.markt-raster .marktkarte .body{padding-bottom:15px}
@media(max-width:760px){.markt-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.markt-raster .marktkarte .bild{height:132px}.markt-raster .marktkarte .bild img{max-width:88px;max-height:88px}.markt-raster .marktkarte:hover .bild img{transform:scale(1.03)}.markt-raster .marktkarte:active .bild img{transform:scale(1.01)}}

/* Verkaufsgraph: Preis als klare goldene Startup-Kurve, Volumen getrennt
   in Blau. Die zwei Skalen machen sofort sichtbar, was gerade steigt. */
.graph{height:220px;color:var(--mond)}
.g-linie{stroke:var(--mond);stroke-width:3}.g-datenpunkt{fill:var(--mond);stroke:#282a2e;stroke-width:1.5;opacity:1}
.g-menge-linie{fill:none;stroke:#24a8ed;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.g-tipp{border-color:color-mix(in srgb,var(--mond) 48%,var(--hairline-2));background:#1c1d20}

/* ==== Verkaufsseite (10.09.2026) ====
   Vorbild war eine Aufnahme von StarPets. Gemeldet: "das sind verschiedene
   Formen, die sollen zusammenschmelzen". Gemeint war keine einzelne Regel,
   sondern die Summe: die Leiste als runder Kasten mit eigenem Rand, darin
   die Sortierung als zweiter Kasten, darunter ein gestrichelter Kasten und
   eine Tabellenkarte, rechts ein anderer Verlauf mit Leuchtschild, und drei
   verschieden runde Knoepfe untereinander.

   Deshalb EINE Sprache fuer alles auf dieser Seite:
   - eine Kantenfarbe (--vk-kante), ein Radius fuer Felder und Knoepfe
     (--vk-r), ein Feldgrund (--vk-feld);
   - die rechte Wand im selben Verlauf wie die Filterwand links;
   - Reiterzeile, klebende Leiste und die Koepfe beider Waende gleich hoch
     (--vk-kopf). Dann laufen die Linien ueber die ganze Breite durch,
     statt dreimal knapp aneinander vorbei. */
body.verkauf-app{
  --vk-kante:rgba(255,255,255,.08);
  --vk-kante-hell:rgba(255,255,255,.16);
  --vk-feld:rgba(20,21,23,.5);
  --vk-r:12px;
  --vk-kopf:64px;
  --vk-wand:330px;
}

/* ---- Die Kopfzeilen auf eine Linie ---- */
@media (min-width:901px){
  body.verkauf-app .markt-spalte{padding-top:0}
  /* Die Filterbox hat am Desktop SELBST 16 px Innenabstand, die Inhalts-
     flaeche noch einmal 16. Mit nur einem Ausgleich endete der Kopf 16 px
     tiefer als die Reiterzeile und stand eingerueckt - gemessen, nicht
     vermutet (Unterkante 145 gegen 129). */
  body.verkauf-app .filterbox{padding-top:0; padding-left:0; padding-right:0}
  body.verkauf-app .filterbox .filter-inhalt{padding-top:0}
  body.verkauf-app .filterbox .filter-kopf{
    box-sizing:border-box; min-height:var(--vk-kopf);
    margin:0 -16px 4px; padding:0 16px;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid var(--vk-kante);
  }
  .verkauf-kopf{margin:0 -20px; padding:0 20px}
  body.verkauf-app .markt-leiste.verkauf-leiste{margin:0 -20px 16px; padding:10px 20px}
}

/* ---- Reiter ---- */
.verkauf-kopf{
  display:flex; align-items:center; gap:12px; box-sizing:border-box;
  min-height:var(--vk-kopf); border-bottom:1px solid var(--vk-kante);
}
.verkauf-reiter{
  display:flex; gap:4px; padding:4px; max-width:100%; overflow-x:auto;
  border:1px solid var(--vk-kante); border-radius:calc(var(--vk-r) + 2px);
  background:var(--vk-feld); scrollbar-width:none;
}
.verkauf-reiter::-webkit-scrollbar{display:none}
.vreiter{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px;
  border:1px solid transparent; border-radius:10px; white-space:nowrap;
  font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:14px;
  color:var(--ink-3); text-decoration:none;
  transition:color .15s, background .15s, border-color .15s;
}
.vreiter:hover{color:var(--ink)}
.vreiter:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.vreiter.an{color:var(--ink); background:rgba(255,255,255,.07); border-color:var(--vk-kante-hell)}
.vzahl{
  min-width:20px; padding:1px 6px; border-radius:6px; text-align:center;
  font:600 11.5px var(--mono); color:var(--ink-3); background:rgba(255,255,255,.06);
}
.vreiter.an .vzahl{color:var(--ink)}
.vzahl.laeuft{color:var(--accent-ink); background:var(--accent)}

/* ---- Die klebende Leiste: flach, ohne eigenen Kasten ---- */
body.verkauf-app .markt-leiste.verkauf-leiste{
  box-sizing:border-box; min-height:var(--vk-kopf);
  border:0; border-bottom:1px solid var(--vk-kante); border-radius:0;
  background:var(--ground); box-shadow:none;
}
body.verkauf-app .verkauf-leiste .suchfeld{border-radius:var(--vk-r)}
body.verkauf-app .verkauf-leiste .leiste-suche input,
body.verkauf-app .verkauf-leiste select{
  min-height:42px; border:1px solid var(--vk-kante); border-radius:var(--vk-r);
  background:var(--vk-feld); box-shadow:none;
}
body.verkauf-app .verkauf-leiste .leiste-suche:focus-within input,
body.verkauf-app .verkauf-leiste select:focus{
  outline:none; border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);
}
/* Die Sortierung war ein Kasten, in dem ein zweiter Kasten stand. */
body.verkauf-app .verkauf-leiste .sortierung{padding:0; border:0; background:none; box-shadow:none}
.vk-aus{
  margin-left:auto; min-height:42px; padding:0 16px; border-radius:var(--vk-r);
  border:1px solid var(--vk-kante); background:var(--vk-feld); color:var(--ink); box-shadow:none;
}
.vk-aus:not(:disabled):hover{border-color:rgba(255,110,130,.5); color:#ffd6dc}
.vk-aus:disabled{opacity:.5; cursor:default}
body.verkauf-app .verkauf-leiste .vk-aus + .sortierung{margin-left:0}
#aus-fehler{margin:0 0 12px}

/* ---- Kacheln ---- */
body.verkauf-app .marktkarte .body{display:flex; flex-direction:column; gap:3px}
.vk-preis{font-size:13.5px; font-weight:600; color:var(--ink)}
.vk-preis.leer{font-size:12px; font-weight:500; color:var(--ink-3)}
body.verkauf-app .einzahlkachel{
  border:1px dashed color-mix(in srgb,var(--accent) 26%,var(--vk-kante));
  background:rgba(35,36,38,.28);
}
body.verkauf-app .einzahlkachel:hover,
body.verkauf-app .einzahlkachel:focus-visible{
  border-style:solid; border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  background:rgba(20,21,23,.45);
}
body.verkauf-app .einzahlkachel .plus{
  border-radius:var(--vk-r); background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
}

/* ---- Leere Reiter und die Abholungen ---- */
.vk-leer{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:56px 20px; text-align:center; color:var(--ink-2);
  border:1px solid var(--vk-kante); border-radius:14px; background:rgba(35,36,38,.3);
}
.vk-leer p{margin:0; max-width:46ch}
.vk-hin{border-radius:var(--vk-r)}
.vk-tabelle{
  overflow-x:auto; border:1px solid var(--vk-kante); border-radius:14px;
  background:rgba(35,36,38,.3);
}
.vk-tabelle table{width:100%; min-width:560px; border-collapse:collapse}
.vk-tabelle th{
  padding:13px 16px; text-align:left; background:transparent;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); border-bottom:1px solid var(--vk-kante);
}
.vk-tabelle td{
  padding:10px 16px; vertical-align:middle; background:transparent;
  border-bottom:1px solid rgba(255,255,255,.045);
}
.vk-tabelle tbody tr:last-child td{border-bottom:0}
.vk-tabelle tr[hidden]{display:none}
.vk-zelle{display:inline-flex; align-items:center; gap:10px; font-weight:600}
.vk-mini{
  display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:9px;
  background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c,var(--accent)) 30%,transparent),transparent 70%),var(--vk-feld);
  border:1px solid color-mix(in srgb,var(--c,var(--accent)) 28%,var(--vk-kante));
}
.vk-mini img{width:28px; height:28px; object-fit:contain}

/* ---- Rechte Wand: dieselbe Bauart wie die Filterwand ---- */
@media (min-width:1240px){
  body.verkauf-app .verkauf-wand{
    width:var(--vk-wand);
    border-left:1px solid var(--vk-kante);
    background:linear-gradient(180deg,#2d2f34,#26272b 78%);
    box-shadow:inset 1px 0 rgba(255,255,255,.035);
  }
  /* Der schwebende Chatknopf lag genau auf "Withdraw". */
  body.verkauf-app:has(.verkauf-wand) .chat-schalter,
  body.verkauf-app:has(.verkauf-wand) .chat{right:calc(var(--vk-wand) + 20px)}
}
@media (max-width:1239px){
  body.verkauf-app .verkauf-wand{
    border-color:var(--vk-kante); border-radius:14px;
    background:linear-gradient(180deg,#2d2f34,#26272b);
  }
  body.verkauf-app .verkauf-wand .wand-blatt{height:auto; min-height:280px; max-height:70vh}
}
body.verkauf-app .rechte-wand .vk-kopf{
  box-sizing:border-box; min-height:var(--vk-kopf); padding:0 16px; gap:11px;
  justify-content:flex-start; background:transparent; border-bottom:1px solid var(--vk-kante);
}
body.verkauf-app .vk-kopf .wand-titel{font-size:15px}
.vk-symbol{
  display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:10px;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
}
body.verkauf-app .auswahl-blatt{padding:14px; gap:12px}
.vk-liste{display:flex; flex-direction:column; gap:12px}
.vk-liste:empty{display:none}

/* Der leere Zustand: der Mond und zwei Zeilen. Vorher stand hier ein
   "COMING SOON"-Schild - die Regel dafuer gehoert zu den Quests auf dem
   Markt und griff hier nur, weil beide `.wand-leer` hiessen. */
.vk-leerstelle{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:12px 18px 40px; text-align:center;
}
.vk-leerstelle[hidden]{display:none}
.vk-mond{
  width:min(210px,80%); height:auto; margin-bottom:16px;
  filter:drop-shadow(0 18px 28px rgba(29,30,32,.35));
  /* steht still (03.10.2026, Betreiber) - kein Schweben mehr */
}
@keyframes vk-schweben{50%{transform:translateY(-7px)}}
.vk-leerstelle strong{font-family:"Chakra Petch",sans-serif; font-size:17px; font-weight:600; color:var(--ink)}
.vk-leerstelle p{margin:0; max-width:26ch; font-size:13px; line-height:1.5; color:var(--ink-3)}

/* ---- Ein gewaehltes Item ---- */
.vk-posten{
  display:flex; flex-direction:column; gap:10px; padding:12px;
  border:1px solid var(--vk-kante); border-radius:14px; background:rgba(35,36,38,.34);
  animation:vk-rein .18s ease-out both;
}
@keyframes vk-rein{from{opacity:0; transform:translateY(6px)}}
.vk-posten-kopf{display:flex; align-items:center; gap:11px}
.vk-posten-bild{
  display:grid; place-items:center; flex:none; width:54px; height:54px; border-radius:12px;
  background:radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--c) 34%,transparent),transparent 72%),var(--vk-feld);
  border:1px solid color-mix(in srgb,var(--c) 32%,var(--vk-kante));
}
.vk-posten-bild img{width:46px; height:46px; object-fit:contain}
.vk-posten-name{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.vk-posten-name strong{font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vk-posten-name small{font-size:11.5px; font-weight:600; color:var(--c); text-transform:capitalize}
.vk-muell{
  display:grid; place-items:center; flex:none; width:36px; height:36px; padding:0;
  border:1px solid var(--vk-kante); border-radius:10px; background:var(--vk-feld);
  color:var(--ink-3); cursor:pointer; transition:color .15s, border-color .15s, background .15s;
}
.vk-muell:hover:not(:disabled){color:#ff8a9a; border-color:rgba(255,110,130,.45); background:rgba(255,80,110,.08)}
.vk-muell:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.vk-abschnitt{display:flex; align-items:center; gap:7px; margin-top:2px; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.vk-abschnitt svg{flex:none; color:var(--accent)}
.vk-felder{display:grid; grid-template-columns:minmax(0,1fr); gap:8px}
.vk-felder:has(.vk-menge){grid-template-columns:minmax(0,1fr) 96px}
.vk-feld,.vk-stat{
  display:flex; flex-direction:column; gap:2px; min-width:0; padding:8px 11px 9px;
  border:1px solid var(--vk-kante); border-radius:var(--vk-r); background:var(--vk-feld);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.vk-feld{cursor:text}
.vk-feld:hover{border-color:var(--vk-kante-hell)}
.vk-feld:focus-within{
  border-color:color-mix(in srgb,var(--accent) 65%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
}
.vk-feld.fehlt{border-color:#ff5b71; box-shadow:0 0 0 3px rgba(255,91,113,.16)}
.vk-feld-name{font-size:11px; color:var(--ink-3); white-space:nowrap}
.vk-feld-wert{display:flex; align-items:baseline; gap:2px; min-width:0}
.vk-waehrung{font:600 16px var(--mono); color:var(--ink-3)}
.vk-feld input{
  width:100%; min-width:0; margin:0; padding:0; border:0; border-radius:0;
  background:none; box-shadow:none; outline:none; -moz-appearance:textfield;
  font:600 16px var(--mono); color:var(--ink);
}
.vk-feld input:focus{box-shadow:none; border:0; outline:none}
.vk-feld input::-webkit-outer-spin-button,
.vk-feld input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.vk-feld input::placeholder{color:rgba(255,255,255,.22)}
.vk-stats{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.vk-stat{align-items:flex-start; color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.vk-stat strong{font:600 14.5px var(--mono)}
.vk-stat span{max-width:100%; font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vk-stat:hover:not(:disabled){
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 6%,var(--vk-feld));
}
.vk-stat:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.vk-stat:disabled{cursor:default}
.vk-stat:disabled strong{color:var(--ink-3)}

/* ---- Fuss ---- */
body.verkauf-app .vk-fuss{
  display:flex; flex-direction:column; gap:10px; padding:14px 16px 16px;
  border-top:1px solid var(--vk-kante); background:rgba(35,36,38,.3);
}
/* Blass wird nur, was nichts tun kann - nicht die ganze Leiste. */
body.verkauf-app .vk-fuss.still{opacity:1}
body.verkauf-app .vk-fuss.still .vk-summe,
body.verkauf-app .vk-fuss.still button{opacity:.5}
.vk-fuss-zeile{display:flex; align-items:center; gap:8px}
.vk-summe{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.vk-summe span{font-size:12.5px; color:var(--ink-3); white-space:nowrap}
.vk-summe strong{font-size:19px; color:var(--ink); white-space:nowrap}
body.verkauf-app .vk-los{
  flex:1; min-width:0; display:inline-flex; align-items:center; justify-content:center;
  gap:8px; min-height:44px; padding:0 16px;
  border-radius:var(--vk-r); white-space:nowrap;
  box-shadow:0 10px 24px -14px color-mix(in srgb,var(--accent) 80%,transparent);
}
body.verkauf-app .vk-fuss .vk-muell{width:44px; height:44px; border-radius:var(--vk-r)}
body.verkauf-app .vk-spiel{
  width:100%; min-height:40px; border-radius:var(--vk-r); box-shadow:none;
  border:1px solid var(--vk-kante); background:transparent; color:var(--ink-2);
}
body.verkauf-app .vk-spiel:hover:not(:disabled){border-color:var(--vk-kante-hell); color:var(--ink); background:rgba(255,255,255,.03)}
.vk-fehler{margin:0; font-size:12.5px; color:#ff8a9a}
.vk-fehler[hidden]{display:none}

@media (max-width:900px){
  .verkauf-kopf{min-height:0; margin:0 0 10px; border-bottom:0}
  .verkauf-reiter{width:100%}
  .vreiter{flex:1; justify-content:center; padding:7px 10px; font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .vk-mond,.vk-posten{animation:none}
}

/* ==== Himmel (10.09.2026) ====
   Gemeldet: "die Sterne im Hintergrund will ich nicht - mach eine Farbe,
   himmelblau, dass alles blaeulich ist". Zwei Schritte:

   1. Alle lila und fast schwarzen FESTEN Farben weiter oben wurden per
      Skript nach Blau umgerechnet (Farbton 211 Grad, dunkle Flaechen
      aufgehellt). Ausgenommen: Seltenheitsvariablen (--r-...) und der
      Chroma-Regenbogen - sonst waere Ancient blau und Chroma ohne Violett.
   2. Hier wird der Grund selbst Himmel; Sterne und Lichtkegel verschwinden.

   Die Flaechen darauf bleiben bewusst tiefer blau. Weisse Schrift braucht
   einen dunkleren Grund als Himmelblau, und die Seltenheitsfarben der Items
   leuchten auf Marineblau, auf Hellblau wuerden sie verwaschen. */
/* ==== Schwarz statt Himmel (10.09.2026, abends) ====
   Am selben Tag zurueckgenommen: "mach alles nicht blau, sondern schwarz -
   nicht komplett schwarz, andere Schwarztoene, manchmal heller, manchmal
   dunkler". Die Blautoene weiter oben wurden wieder per Skript umgerechnet,
   diesmal in kuehle Schwarz- und Grautoene: Flaechen dunkel, bislang
   blaeuliche Schrift neutral grau, blaue Schleier neutral. Kraeftige Blaus
   mit Absicht (Symbol "Nachrichten", Mengenlinie im Diagramm), die
   Seltenheiten und der Chroma-Regenbogen blieben, wie sie waren.

   Die Abstufung traegt die Tiefe: Grund am dunkelsten, Waende und Kacheln
   ein paar Stufen heller, Felder darin wieder dunkler. */
:root{
  --ground:#0f1012;
  --ink-3:#9a9ea6;
  --himmel-glas:rgba(16,17,20,.86);
}
html{background:#0d0e10}
body{
  background:
    radial-gradient(80vw 55vh at 10% -12%,rgba(255,255,255,.05),transparent 70%),
    radial-gradient(60vw 45vh at 100% 0%,rgba(255,255,255,.03),transparent 72%),
    linear-gradient(180deg,#141518 0%,#0f1012 45%,#0c0d0f 100%);
  /* Fest am Fenster: sonst streckt sich der Verlauf ueber eine lange Seite. */
  background-attachment:fixed;
}
body::before,body::after{content:none!important; display:none!important}

/* Klebende Leisten liegen ueber einem Verlauf. Ein einfarbiges Band
   (`var(--ground)`) passt dort nur an einer Stelle - Glas passt ueberall. */
body.markt-app .markt-leiste,
body.verkauf-app .markt-leiste.verkauf-leiste{
  background:var(--himmel-glas);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}

/* ---- "Withdraw to Roblox" gruen (10.09.2026) ----
   Gemeldet: "der steht zwar, aber er faellt nicht auf". Er war ein
   durchsichtiger Knopf mit duennem Rand - neben dem tuerkisen "List for
   sale" sah er deaktiviert aus, auch wenn er es nicht war. Gruen, weil
   Tuerkis schon "verkaufen" heisst: zwei Wege, zwei Farben. Und in der
   Leiste in normaler Breite - die Fussregel `width:100%` zog ihn dort auf
   eine eigene Zeile. */
body.verkauf-app .vk-spiel{
  background:#22c55e; border:1px solid #22c55e; color:#052e14;
  font-weight:800; box-shadow:0 8px 20px -12px rgba(34,197,94,.85);
}
body.verkauf-app .vk-spiel:hover:not(:disabled){
  background:#34d672; border-color:#34d672; color:#052e14;
}
body.verkauf-app .vk-spiel:disabled{opacity:.6; cursor:default}
body.verkauf-app .verkauf-leiste .vk-spiel{
  width:auto; min-height:42px; padding:0 18px; border-radius:var(--vk-r);
}

/* ==== Einstellungen mit Reitern (10.09.2026) ====
   Gemeldet: "bei Settings ist alles auf einer Seite, das ist
   unuebersichtlich - links Spalten zum Anklicken, rechts die Einstellung".
   Radioknoepfe plus `:has`, kein Skript: das Fenster wird per innerHTML
   nachgeladen, und ein Skript darin liefe gar nicht. Ohne JavaScript
   (Vollseite) funktioniert es genauso. Die Symbole sind dieselben
   Kaestchen wie in den Menues. */
.kfenster:has(.einst-tabs){width:min(820px,94vw)}
.einst-tabs{display:grid; grid-template-columns:212px minmax(0,1fr); gap:20px; align-items:start}
.einst-radio{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.einst-nav{
  display:flex; flex-direction:column; gap:3px; padding:6px;
  border:1px solid var(--hairline); border-radius:14px; background:rgba(255,255,255,.025);
}
/* `text-transform` und `letter-spacing` zuruecksetzen: die allgemeine
   `label`-Regel ganz oben schreibt jedes Label in Grossbuchstaben - fuer
   Formularueberschriften gedacht, nicht fuer Reiter. */
.einst-nav label{
  text-transform:none; letter-spacing:0; font-size:inherit;
  display:flex; align-items:center; gap:11px; padding:6px 10px 6px 6px;
  border-radius:11px; cursor:pointer; color:var(--ink-2);
  transition:background var(--schnell), color var(--schnell);
}
.einst-nav label:hover{background:rgba(255,255,255,.05); color:var(--ink)}
.einst-nav strong{flex:1; font-size:14.5px; font-weight:700}
.einst-nav .menue-symbol{width:32px; height:32px; border-radius:10px}
.einst-nav .menue-symbol svg{width:17px; height:17px}
.einst-punkt{width:7px; height:7px; border-radius:50%; background:#ffc24d;
  box-shadow:0 0 0 3px rgba(255,194,77,.18)}
.einst-blatt{display:none; flex-direction:column; gap:2px; min-width:0}
.einst-tabs:has(#einst-konto:checked) .einst-blatt[data-reiter="konto"],
.einst-tabs:has(#einst-privat:checked) .einst-blatt[data-reiter="privat"],
.einst-tabs:has(#einst-sicher:checked) .einst-blatt[data-reiter="sicher"],
.einst-tabs:has(#einst-roblox:checked) .einst-blatt[data-reiter="roblox"],
.einst-tabs:has(#einst-discord:checked) .einst-blatt[data-reiter="discord"]{display:flex}
.einst-tabs:has(#einst-konto:checked) label[for="einst-konto"],
.einst-tabs:has(#einst-privat:checked) label[for="einst-privat"],
.einst-tabs:has(#einst-sicher:checked) label[for="einst-sicher"],
.einst-tabs:has(#einst-roblox:checked) label[for="einst-roblox"],
.einst-tabs:has(#einst-discord:checked) label[for="einst-discord"]{
  background:rgba(255,255,255,.08); color:var(--ink);
}
.einst-tabs:has(#einst-konto:focus-visible) label[for="einst-konto"],
.einst-tabs:has(#einst-privat:focus-visible) label[for="einst-privat"],
.einst-tabs:has(#einst-sicher:focus-visible) label[for="einst-sicher"],
.einst-tabs:has(#einst-roblox:focus-visible) label[for="einst-roblox"],
.einst-tabs:has(#einst-discord:focus-visible) label[for="einst-discord"]{
  outline:2px solid var(--accent); outline-offset:-2px;
}
@media (max-width:620px){
  .einst-tabs{grid-template-columns:1fr; gap:14px}
  .einst-nav{flex-direction:row; overflow-x:auto}
  .einst-nav label{flex:none}
  .einst-nav strong{font-size:13.5px}
}

/* ==== Top-up und Cash-out im StarPets-Aufbau (10.09.2026) ====
   Vorbild: der Aufladeschirm von StarPets (Screenshot). Links die Methoden
   als grosse Kacheln, die Gebuehr als Abzeichen oben links; rechts eine
   Spalte mit der gewaehlten Methode, zwei Feldern nebeneinander ("You'll
   get / You'll pay"), der Gebuehr als Infozeile, beliebten Betraegen und
   dem Knopf. Beide Seiten - Aufladen und Auszahlen - teilen sich diese
   Regeln, damit sie wie zwei Richtungen desselben Weges aussehen.

   Die alten `.auf-*`- und `.muenze`-Regeln weiter oben bleiben stehen: die
   "weiteren Coins" und die Bezahlseite benutzen sie noch. Hier wird nur
   ueberschrieben, was in `.geld-seite` anders aussieht. */
.geld-seite{
  display:grid; grid-template-columns:minmax(0,1fr) 400px; margin-top:6px;
  border:1px solid var(--hairline); border-radius:18px; overflow:hidden;
  background:rgba(255,255,255,.015);
}
.geld-links{padding:20px 22px 24px; min-width:0}
.geld-rechts{
  display:flex; flex-direction:column; gap:14px; padding:20px 22px 24px;
  border-left:1px solid var(--hairline); background:rgba(255,255,255,.025);
}
@media (max-width:980px){
  .geld-seite{grid-template-columns:1fr}
  .geld-rechts{border-left:0; border-top:1px solid var(--hairline)}
}

.geld-kopf{
  display:flex; align-items:center; gap:12px;
  padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--hairline);
}
.geld-kopf .menue-symbol{width:44px; height:44px; border-radius:12px}
.geld-kopf .menue-symbol svg{width:22px; height:22px}
.geld-titel h1{margin:0; font-size:19px; line-height:1.2; letter-spacing:0; text-shadow:none}
.geld-titel span{display:block; font-size:13px; color:var(--ink-3)}

/* ---- Die Kacheln ---- */
.geld-methoden{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}
.geld-seite .geld-methode.muenze{
  align-items:center; justify-content:center; text-align:center; gap:5px;
  min-height:138px; padding:36px 12px 14px; border-radius:14px;
  border:1px solid var(--hairline);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 58%,rgba(0,0,0,.18));
}
.geld-seite .geld-methode.muenze:hover{transform:translateY(-2px); border-color:var(--hairline-2)}
.geld-seite .geld-methode.muenze.an{
  border-color:#42e08a;
  background:linear-gradient(180deg,rgba(66,224,138,.13),rgba(255,255,255,.02) 58%,rgba(0,0,0,.18));
  box-shadow:0 0 0 1px #42e08a inset, 0 12px 28px -20px rgba(66,224,138,.9);
}
.geld-seite .geld-methode.muenze.an::after{
  content:"✓"; right:9px; bottom:9px; width:20px; height:20px; border-radius:6px;
  display:grid; place-items:center; font-size:12px; color:#42e08a;
  background:rgba(66,224,138,.16);
}
.geld-seite .geld-methode .muenze-abzeichen{
  top:9px; left:9px; padding:3px 8px; border:0; border-radius:7px;
  font-size:11.5px; font-weight:700; color:#8fbcff; background:rgba(91,157,255,.14);
}
.geld-seite .geld-methode.muenze.an .muenze-abzeichen{color:#052e14; background:#42e08a}
.geld-seite .geld-methode .muenze-symbol{width:46px; height:46px; margin-top:0}
.geld-seite .geld-methode .geld-emoji{font-size:40px; line-height:46px}
.geld-seite .geld-methode .muenze-name{font-size:15px; font-weight:700; -webkit-line-clamp:1}
.geld-seite .geld-methode .muenze-netz{font-size:11.5px}

/* ---- Die rechte Spalte ---- */
.geld-auswahl{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:14px; border-bottom:1px solid var(--hairline);
}
.geld-auswahl strong{display:block; font-size:16px}
.geld-auswahl span{font-size:12.5px; color:var(--ink-3)}
.geld-auswahl-logo{
  display:grid; place-items:center; flex:none; width:56px; height:42px;
  border-radius:10px; background:rgba(255,255,255,.06); border:1px solid var(--hairline);
}
.geld-auswahl-logo img{width:28px; height:28px; object-fit:contain}
.geld-zeile{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.geld-zeile strong{font-size:14.5px}
.geld-zeile span{font-size:12.5px; color:var(--ink-3)}
.geld-verfuegbar{color:var(--ink)!important; font-size:15px!important; font-weight:600}

.geld-felder{display:grid; grid-template-columns:1fr 1fr; gap:10px}
/* Die allgemeine `label`-Regel schreibt alles in Grossbuchstaben - fuer
   diese Felder zuruecksetzen. */
.geld-feld{
  display:flex; align-items:center; gap:10px; min-width:0; padding:10px 12px;
  border:1px solid var(--hairline-2); border-radius:12px; background:rgba(0,0,0,.2);
  cursor:text; text-transform:none; letter-spacing:0; font-size:inherit;
  font-weight:600; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.geld-feld > svg{flex:none; color:var(--ink-3)}
.geld-feld:focus-within{
  border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);
}
.geld-feld.starr{cursor:default; background:rgba(255,255,255,.02)}
.geld-feld-inhalt{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1}
.geld-feld-name{font-size:11.5px; color:var(--ink-3); white-space:nowrap}
.geld-feld-wert{display:flex; align-items:baseline; gap:2px; min-width:0;
  font:600 16px var(--mono); color:var(--ink)}
.geld-zeichen{color:var(--ink-3)}
.geld-feld input{
  width:100%; min-width:0; margin:0; padding:0; border:0; border-radius:0;
  background:none; box-shadow:none; outline:none; -moz-appearance:textfield;
  font:600 16px var(--mono); color:var(--ink);
}
.geld-feld input:focus{border:0; box-shadow:none; outline:none}
.geld-feld input::-webkit-outer-spin-button,
.geld-feld input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.geld-adresse input{font-size:13.5px}
.geld-klein{margin:-6px 2px 0}

.geld-info, .geld-sicher{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 14px; border-radius:12px; font-size:14px; font-weight:700;
}
.geld-info{color:#8fbcff; background:rgba(91,157,255,.10); border:1px solid rgba(91,157,255,.18)}
.geld-sicher{font-size:13px; color:#6ee7a0; background:rgba(66,224,138,.08);
  border:1px solid rgba(66,224,138,.18)}
.geld-info svg, .geld-sicher svg{flex:none}

.geld-rechts .betraege{grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:0; gap:8px}
.geld-rechts .betrag{
  padding:10px 6px; border-radius:10px; font-size:14px;
  background:rgba(255,255,255,.04); border-color:var(--hairline); color:var(--ink-2);
}
.geld-rechts .betrag:hover{border-color:var(--hairline-2); color:var(--ink)}
.geld-rechts .betrag.an{background:#42e08a; color:#052e14; border-color:transparent; box-shadow:none}

.geld-los.btn{width:100%; justify-content:center; min-height:50px; border-radius:12px; font-size:16px}
.geld-verlauf{margin-top:18px}

/* Der Zustand im Verlauf: dieselben Pillen wie im Verlaufsfenster. */
.geld-zustand{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:99px;
  font-size:12px; font-weight:700; text-decoration:none;
  color:#ffc24d; background:color-mix(in srgb,#ffc24d 14%,transparent);
}
.geld-zustand::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.geld-zustand.z-bezahlt, .geld-zustand.z-erledigt, .geld-zustand.z-unterwegs{
  color:#42e08a; background:color-mix(in srgb,#42e08a 14%,transparent);
}
.geld-zustand.z-abgebrochen, .geld-zustand.z-zurueckgenommen{
  color:var(--ink-3); background:rgba(255,255,255,.06);
}
.geld-zustand.z-pruefen, .geld-zustand.z-abgelehnt, .geld-zustand.z-untersuchung{
  color:#ff6b7a; background:color-mix(in srgb,#ff6b7a 14%,transparent);
}

/* ---- Einzahlung: Schritte, "erkannt", Erfolg (10.09.2026) ----
   Gemeldet: "wenn ein Top-up erkannt wird, soll dort Confirming stehen,
   mit Blockchain-Link, und wenn es ankommt ein kleines Feuerwerk". Die
   drei Schritte stehen ueber der Karte; `data-schritt` am Kasten
   entscheidet, welcher pulsiert und welche abgehakt sind. */
.zahl-schritte{
  list-style:none; display:grid; grid-template-columns:repeat(3,1fr);
  max-width:820px; margin:14px 0; padding:0;
}
.zahl-schritte li{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color:var(--ink-3); text-align:center;
}
.zahl-schritte li::before{
  content:""; position:absolute; top:11px; left:-50%; width:100%; height:2px;
  background:var(--hairline);
}
.zahl-schritte li:first-child::before{display:none}
.zs-punkt{
  position:relative; z-index:1; display:grid; place-items:center;
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--hairline-2); background:var(--ground);
}
.zahl-schritte[data-schritt="1"] li[data-nr="1"],
.zahl-schritte[data-schritt="2"] li[data-nr="2"]{color:var(--ink)}
.zahl-schritte[data-schritt="1"] li[data-nr="1"] .zs-punkt,
.zahl-schritte[data-schritt="2"] li[data-nr="2"] .zs-punkt{
  border-color:#ffc24d; box-shadow:0 0 0 4px rgba(255,194,77,.15);
  animation:zs-puls 1.6s ease-in-out infinite;
}
.zahl-schritte[data-schritt="2"] li[data-nr="1"],
.zahl-schritte[data-schritt="3"] li{color:#6ee7a0}
.zahl-schritte[data-schritt="2"] li[data-nr="1"] .zs-punkt,
.zahl-schritte[data-schritt="3"] li .zs-punkt{border-color:#42e08a; background:#42e08a}
.zahl-schritte[data-schritt="2"] li[data-nr="1"] .zs-punkt::after,
.zahl-schritte[data-schritt="3"] li .zs-punkt::after{
  content:"✓"; color:#052e14; font-size:12px; font-weight:900;
}
.zahl-schritte[data-schritt="2"] li[data-nr="2"]::before,
.zahl-schritte[data-schritt="3"] li::before{background:#42e08a}
@keyframes zs-puls{50%{box-shadow:0 0 0 8px rgba(255,194,77,.05)}}

.zahl-erkannt{
  display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:18px;
  border-radius:14px; background:rgba(255,194,77,.08); border:1px solid rgba(255,194,77,.25);
}
.zahl-erkannt[hidden]{display:none}
.zahl-erkannt-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.zahl-erkannt-text strong{font-size:15px; color:#ffd48a}
.zahl-erkannt-text span{font-size:13px; color:var(--ink-2)}
.zahl-kreisel{
  flex:none; width:26px; height:26px; border-radius:50%;
  border:3px solid rgba(255,194,77,.25); border-top-color:#ffc24d;
  animation:zahl-dreh .9s linear infinite;
}
@keyframes zahl-dreh{to{transform:rotate(360deg)}}

.zahl-erfolg{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:26px 12px 8px; text-align:center; overflow:hidden;
}
.zahl-erfolg[hidden]{display:none}
.zahl-konfetti{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.zahl-haken{
  display:grid; place-items:center; width:74px; height:74px; border-radius:50%;
  color:#052e14; background:#42e08a;
  box-shadow:0 0 0 10px rgba(66,224,138,.14), 0 18px 40px -16px rgba(66,224,138,.8);
  animation:zahl-plopp .5s cubic-bezier(.2,1.6,.4,1) both;
}
.zahl-haken svg{width:40px; height:40px}
@keyframes zahl-plopp{from{transform:scale(.4); opacity:0}}
.zahl-erfolg h2{margin:14px 0 0}
.zahl-erfolg-betrag{margin:0; font:700 34px var(--mono); color:#42e08a}
.zahl-erfolg-wege{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:12px}
@media (prefers-reduced-motion:reduce){
  .zahl-kreisel,.zahl-schritte .zs-punkt,.zahl-haken{animation:none}
}

/* ---- Minispiele beim Warten (10.09.2026) ----
   Karte links, Spiele rechts im Platz, der vorher schwarz war. Schmal
   untereinander. Die Spielfarben sind dieselben wie ueberall: gruen du,
   pink die KI, gelb die Gewinnlinie. */
.zahl-buehne{
  display:grid; grid-template-columns:minmax(0,820px) minmax(300px,380px);
  gap:20px; align-items:start;
}
@media (max-width:1180px){.zahl-buehne{grid-template-columns:minmax(0,1fr)}}
.spiele{
  display:flex; flex-direction:column; gap:12px; padding:16px;
  border:1px solid var(--hairline); border-radius:18px; background:rgba(255,255,255,.025);
}
.spiele-kopf strong{display:block; font-size:16px}
.spiele-kopf span{font-size:12.5px; color:var(--ink-3)}
.spiele-reiter{
  display:flex; gap:4px; padding:4px;
  border:1px solid var(--hairline); border-radius:12px; background:rgba(0,0,0,.2);
}
.spiele-reiter button{
  flex:1; padding:7px 6px; border:0; border-radius:9px; background:none; cursor:pointer;
  font:inherit; font-size:13px; font-weight:700; color:var(--ink-3);
}
.spiele-reiter button:hover{color:var(--ink)}
.spiele-reiter button.an{background:rgba(255,255,255,.08); color:var(--ink)}
.spiele-reiter button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.spiele-feld{display:grid; place-items:center; min-height:300px}
.spiele-fuss{display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:13px; color:var(--ink-2)}

.ttt{display:grid; grid-template-columns:repeat(3,84px); gap:8px}
.ttt-zelle{
  width:84px; height:84px; border-radius:14px; border:1px solid var(--hairline-2);
  background:rgba(0,0,0,.25); color:var(--ink); font-size:38px; font-weight:800;
  cursor:pointer; transition:background .15s, transform .15s;
}
.ttt-zelle:hover:not(.du):not(.ki){background:rgba(255,255,255,.06)}
.ttt-zelle.du{color:#42e08a}
.ttt-zelle.ki{color:#ff5ca8}
.ttt-zelle.linie{background:rgba(255,211,92,.16); border-color:#ffd35c; transform:scale(1.04)}

.vier{
  display:grid; grid-template-columns:repeat(7,38px); gap:6px; padding:10px;
  border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--hairline-2);
}
.vier-loch{
  width:38px; height:38px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(0,0,0,.5); box-shadow:inset 0 2px 4px rgba(0,0,0,.6);
}
.vier-loch:hover{background:rgba(255,255,255,.08)}
.vier-loch.du{background:#42e08a}
.vier-loch.ki{background:#ff5ca8}
.vier-loch.neu{animation:vier-fall .28s cubic-bezier(.3,1.4,.5,1) both}
.vier-loch.linie{box-shadow:0 0 0 3px #ffd35c}
@keyframes vier-fall{from{transform:translateY(-120px); opacity:.2}}

.memory{display:grid; grid-template-columns:repeat(4,70px); gap:8px}
.memory-karte{
  position:relative; width:70px; height:70px; padding:0; border:0; border-radius:12px;
  background:none; cursor:pointer; perspective:400px;
}
.memory-hinten,.memory-vorn{
  position:absolute; inset:0; display:grid; place-items:center; border-radius:12px;
  backface-visibility:hidden; transition:transform .35s;
}
.memory-hinten{
  background:linear-gradient(145deg,#2c2d32,#1c1d20); border:1px solid var(--hairline-2);
  color:var(--ink-3); font-size:22px; font-weight:800;
}
.memory-vorn{
  background:rgba(255,255,255,.07); border:1px solid var(--hairline-2);
  transform:rotateY(180deg); font-size:30px;
}
.memory-vorn img{width:56px; height:56px; object-fit:contain}
.memory-karte.auf .memory-hinten{transform:rotateY(180deg)}
.memory-karte.auf .memory-vorn{transform:rotateY(0)}
.memory-karte.weg .memory-vorn{border-color:#42e08a; box-shadow:0 0 0 2px rgba(66,224,138,.35)}

/* ---- Netzwahl und Abbrechen auf den Geldseiten (10.09.2026) ---- */
.geld-netze .betraege{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.geld-netze .betrag{padding:9px 8px; font-size:12.5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.zahl-abbrechen{display:flex; justify-content:flex-end; margin-top:12px}

/* ---- Support: Themen, Ticketverlauf, roter Knopf (13.09.2026) ---- */
.sup-kopf{margin-bottom:16px}
.sup-kopf h1{margin:6px 0 2px}
.sup-themen{display:grid; gap:12px; margin-bottom:20px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.sup-thema{display:flex; align-items:center; gap:11px; padding:14px;
  border:1px solid var(--hairline); border-radius:14px;
  background:var(--surface); color:var(--ink); text-decoration:none;
  transition:transform .15s, border-color .15s}
.sup-thema:hover{transform:translateY(-2px); border-color:var(--accent)}
.sup-form{display:flex; flex-direction:column; gap:14px; margin-bottom:20px}
.sup-form-kopf{display:flex; align-items:center; justify-content:space-between; gap:10px}
.sup-form-kopf h2{margin:0}
.sup-bezug{display:flex; flex-direction:column; gap:7px; margin:0;
  border:1px solid var(--hairline); border-radius:13px; padding:12px}
.sup-bezug legend{padding:0 6px; font-size:13px; color:var(--ink-2);
  text-transform:none; letter-spacing:0}
.sup-wahl{display:flex; align-items:flex-start; gap:9px; padding:8px 10px;
  border-radius:10px; cursor:pointer; font-size:13.5px;
  text-transform:none; letter-spacing:0}
.sup-wahl:hover{background:rgba(255,255,255,.05)}
.sup-wahl input{margin-top:2px}
.sup-feld{display:flex; flex-direction:column; gap:6px;
  text-transform:none; letter-spacing:0; font-size:13.5px; color:var(--ink-2)}
.sup-feld input,.sup-feld textarea{width:100%}
.sup-beweis{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.sup-los{align-self:flex-start}
.sup-knopf{background:#d9304a; border-color:#d9304a; color:#fff}
.sup-knopf:hover{background:#ef4159; border-color:#ef4159; color:#fff}
.sup-verlauf{display:flex; flex-direction:column; gap:10px; margin:16px 0}
.sup-zeile{padding:12px 14px; border-radius:13px; border:1px solid var(--hairline);
  background:var(--surface)}
.sup-zeile header{display:flex; align-items:baseline; gap:9px; margin-bottom:6px}
.sup-zeile p{margin:0 0 6px; white-space:pre-wrap}
.sup-zeile.von-support,.sup-zeile.von-ki{border-color:rgba(66,224,138,.5)}
.sup-zeile.von-system{opacity:.75}
.sup-bezug-karte{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.sup-antwort{display:flex; flex-direction:column; gap:14px; margin-top:16px}
.sup-zu{margin:10px 0 24px; display:flex; justify-content:flex-end}
.sup-filter{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px}
.sup-dran{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  background:#d9304a; color:#fff; font-size:11px}

/* ---- Supportfenster unten links (13.09.2026) ----
   Aufbau und Masse wie der Chat unten rechts; was dort die Zeilen sind,
   ist hier die Ticketliste oder das offene Gespraech. */
.sup-fenster{
  position:fixed; left:20px; bottom:74px; z-index:41; width:340px;
  max-height:min(66vh, 560px); display:flex; flex-direction:column;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  backdrop-filter:blur(14px);
  border:1px solid var(--hairline-2); border-radius:14px; box-shadow:var(--shadow);
  animation:chat-auf .22s cubic-bezier(.22,1,.36,1) both;
}
.sup-fenster[hidden]{display:none}
.sup-f-kopf{display:flex; align-items:center; gap:8px; padding:11px 12px;
  border-bottom:1px solid var(--hairline)}
.sup-f-kopf strong{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sup-f-pfeil{border:0; background:none; color:var(--ink-2); cursor:pointer;
  font:inherit; font-size:16px; line-height:1; padding:2px 6px; border-radius:8px}
.sup-f-pfeil:hover{background:rgba(255,255,255,.08); color:var(--ink)}
.sup-f-inhalt{flex:1; overflow-y:auto; padding:12px; display:flex;
  flex-direction:column; gap:9px; scrollbar-width:thin}
.sup-f-frage{margin:0; font-size:12.5px; color:var(--ink-3)}
.sup-chips{display:flex; flex-wrap:wrap; gap:6px}
.sup-chip{padding:7px 10px; border-radius:999px; border:1px solid var(--hairline-2);
  background:var(--surface-2); color:var(--ink); font:inherit; font-size:12.5px;
  cursor:pointer}
.sup-chip:hover{border-color:var(--accent)}
.sup-tickets{display:flex; flex-direction:column; gap:7px; margin-top:4px}
.sup-ticketzeile{display:flex; flex-direction:column; gap:5px; width:100%;
  padding:9px 11px; border-radius:11px; border:1px solid var(--hairline);
  background:var(--surface-2); color:var(--ink); font:inherit; text-align:left;
  cursor:pointer}
.sup-ticketzeile:hover{border-color:var(--accent)}
.sup-tz-kopf,.sup-tz-fuss{display:flex; justify-content:space-between;
  align-items:center; gap:8px; font-size:12.5px}
.sup-tz-zeit{font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
/* Sprechblasen: eigene Nachrichten rechts, Support und Assistent links. */
.sup-blase{max-width:88%; padding:9px 12px; border-radius:14px;
  border:1px solid var(--hairline); background:var(--surface-2);
  align-self:flex-start; border-bottom-left-radius:5px}
.sup-blase header{display:flex; justify-content:space-between; gap:10px;
  align-items:baseline; margin-bottom:3px; font-size:11.5px; color:var(--ink-3)}
.sup-blase header strong{color:var(--ink-2); font-weight:600}
.sup-blase p{margin:0; font-size:13.5px; color:var(--ink); line-height:1.45;
  white-space:pre-wrap; overflow-wrap:anywhere}
.sup-blase.von-nutzer{align-self:flex-end; border-bottom-left-radius:14px;
  border-bottom-right-radius:5px; background:color-mix(in srgb,var(--accent) 14%,var(--surface-2));
  border-color:color-mix(in srgb,var(--accent) 35%,var(--hairline))}
.sup-blase.von-ki,.sup-blase.von-support{border-color:rgba(66,224,138,.35)}
.sup-blase.von-system{opacity:.75}

/* Drei Punkte, waehrend die Antwort laeuft. */
.sup-tippt{display:flex; gap:4px; align-self:flex-start; margin:0; padding:10px 13px;
  border-radius:14px; border:1px solid var(--hairline); background:var(--surface-2)}
.sup-tippt span{width:6px; height:6px; border-radius:50%; background:var(--ink-3);
  animation:sup-punkt 1s infinite ease-in-out}
.sup-tippt span:nth-child(2){animation-delay:.15s}
.sup-tippt span:nth-child(3){animation-delay:.3s}
@keyframes sup-punkt{0%,80%,100%{opacity:.25; transform:translateY(0)}
  40%{opacity:1; transform:translateY(-3px)}}
.sup-f-anhang{display:inline-block; margin-top:6px; font-size:12.5px}
.sup-f-bezug{margin:0; padding:8px 10px; border-radius:10px;
  background:rgba(255,255,255,.05); font-size:12.5px; color:var(--ink-2)}
.sup-f-leer,.sup-f-laedt{margin:0; font-size:12.5px; color:var(--ink-3)}
.sup-f-form{display:flex; gap:7px; align-items:center; padding:10px 12px;
  border-top:1px solid var(--hairline)}
.sup-f-form input[type=text],.sup-f-form input:not([type]){flex:1; min-width:0}
.sup-f-form input#sup-f-text{flex:1; min-width:0}
.sup-f-klammer{cursor:pointer; font-size:17px; padding:2px 4px; border-radius:8px}
.sup-f-klammer.hat{background:var(--accent); color:var(--accent-ink)}
.sup-f-fehler{color:var(--bad); margin:0; padding:0 12px 10px; font-size:12.5px}


/* ---- Feinschliff am Supportfenster (13.09.2026) ---- */
.sup-fenster{width:360px; border-radius:18px; overflow:hidden}
.sup-f-kopf{padding:13px 14px; background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.sup-f-kopf strong{font-size:14.5px}
.sup-f-inhalt{gap:10px; padding:14px}
.sup-f-frage{font-size:12px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink-3)}
.sup-chips{display:grid; grid-template-columns:1fr 1fr; gap:7px}
.sup-chip{padding:10px 11px; border-radius:12px; text-align:left; font-size:13px;
  line-height:1.25; transition:transform .14s, border-color .14s, background .14s}
.sup-chip:hover{transform:translateY(-1px);
  background:color-mix(in srgb,var(--accent) 10%,var(--surface-2))}
.sup-tickets{gap:8px; margin-top:8px}
.sup-ticketzeile{padding:11px 12px; border-radius:13px;
  transition:transform .14s, border-color .14s}
.sup-ticketzeile:hover{transform:translateY(-1px)}
.sup-ticketzeile .sup-tz-kopf strong{font-size:13.5px}
.sup-f-bezug{border-left:3px solid color-mix(in srgb,var(--accent) 55%,transparent);
  border-radius:0 10px 10px 0; align-self:stretch}
.sup-f-form{padding:11px 12px; gap:9px;
  background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.sup-f-form input#sup-f-text{border-radius:999px; padding:9px 14px}
.sup-f-form .btn{border-radius:999px; padding:9px 16px}
.sup-f-klammer{font-size:18px; opacity:.75}
.sup-f-klammer:hover{opacity:1}
.sup-f-laedt{align-self:center; color:var(--ink-3)}

/* ---- Ticket aufmachen: Fenster in der Mitte ---- */
.sup-modal{position:fixed; inset:0; z-index:1400; display:grid; place-items:center;
  padding:16px; background:rgba(0,0,0,.55); backdrop-filter:blur(3px)}
.sup-modal[hidden]{display:none}
.sup-modal-karte{width:min(460px,100%); max-height:88vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:13px; padding:18px;
  border-radius:17px; border:1px solid var(--hairline-2); background:var(--surface);
  box-shadow:var(--shadow)}
.sup-modal-kopf{display:flex; align-items:center; justify-content:space-between; gap:8px}
.sup-schritt{display:flex; flex-direction:column; gap:6px}
.sup-schritt-name{font-size:12.5px; color:var(--ink-3)}
.sup-wahl{position:relative}
.sup-wahl-knopf{width:100%; text-align:left; padding:11px 13px; border-radius:12px;
  border:1px solid var(--hairline-2); background:var(--surface-2); color:var(--ink);
  font:inherit; font-size:13.5px; cursor:pointer}
.sup-wahl-knopf::after{content:"▾"; float:right; color:var(--ink-3)}
.sup-wahl-knopf:hover{border-color:var(--accent)}
.sup-wahl-liste{position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:5;
  max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:3px;
  padding:6px; border-radius:12px; border:1px solid var(--hairline-2);
  background:var(--surface); box-shadow:var(--shadow)}
.sup-wahl-liste[hidden]{display:none}
.sup-wahl-zeile{display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 9px; border:0; border-radius:9px; background:none; color:var(--ink);
  font:inherit; font-size:13px; text-align:left; cursor:pointer}
.sup-wahl-zeile:hover{background:rgba(255,255,255,.07)}
.sup-wz-symbol{font-size:16px}
.sup-wz-bilder{display:flex; flex-shrink:0; gap:2px}
.sup-wz-bilder img{width:30px; height:30px; object-fit:contain; border-radius:7px;
  background:rgba(255,255,255,.05)}
.sup-wz-text{overflow-wrap:anywhere}
.sup-modal-beweis{display:grid; gap:11px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
@media (max-width:520px){
  .sup-fenster{left:12px; right:12px; width:auto}
}
.sup-schalter{position:fixed; left:20px; bottom:20px; z-index:41;
  display:inline-flex; align-items:center; gap:7px; padding:10px 14px;
  border-radius:999px; border:1px solid var(--hairline);
  background:var(--himmel-glas); backdrop-filter:blur(9px);
  color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:700}
.sup-schalter:hover{border-color:var(--accent)}
@media (max-width:700px){.sup-schalter span:not(.sup-zahl){display:none}}
/* Seit der Support auch auf dem Markt steht (01.10.2026), liegt er unten
   links ueber der Filterspalte - ohne Platz darunter verdeckte er die
   letzten Filter ("Sets only"). */
@media (min-width:761px){body:has(.sup-schalter) .filterbox .filter-inhalt{padding-bottom:64px}}

@media (max-width:420px){
  .ttt{grid-template-columns:repeat(3,72px)} .ttt-zelle{width:72px; height:72px}
  .vier{grid-template-columns:repeat(7,32px)} .vier-loch{width:32px; height:32px}
  .memory{grid-template-columns:repeat(4,62px)} .memory-karte{width:62px; height:62px}
}
@media (prefers-reduced-motion:reduce){
  .vier-loch.neu{animation:none}
  .memory-hinten,.memory-vorn{transition:none}
}

/* ==== Menues oben rechts (10.09.2026) ====
   Vorbild: das Profilmenue von StarPets (Screenshot). Gemeldet: "die
   Knoepfe sehen komisch aus - da soll einfach Deposit oder Withdraw
   stehen". Jeder Eintrag ist jetzt ein farbiges Kaestchen mit Symbol und
   EIN Wort; die Erklaerzeilen darunter sind weg. Die Farbe unterscheidet
   die Eintraege - nach dem zweiten Oeffnen findet man sie, ohne zu lesen.

   Die Symbole zeichnen mit `currentColor`, das Kaestchen setzt die Farbe
   ueber `--f`. Vorher stand die Strichfarbe fest im SVG, und jeder Eintrag
   war dasselbe Grau. */
.guthaben-liste{padding:8px; gap:2px}
.guthaben-liste a{
  gap:12px; padding:7px 10px 7px 7px; border-radius:12px;
  color:var(--ink); text-decoration:none; transition:background var(--schnell);
}
.guthaben-liste a:hover{background:rgba(255,255,255,.07)}
.guthaben-liste a:focus-visible{background:rgba(255,255,255,.07);
  outline:2px solid var(--accent); outline-offset:-2px}
.guthaben-liste strong{font-size:15px; font-weight:700; letter-spacing:.005em}
.menue-symbol{
  --f:var(--ink-2);
  display:grid; place-items:center; flex:none; width:36px; height:36px;
  border-radius:11px; color:var(--f);
  background:color-mix(in srgb,var(--f) 17%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f) 22%,transparent);
  transition:background var(--schnell);
}
.guthaben-liste a:hover .menue-symbol{background:color-mix(in srgb,var(--f) 27%,transparent)}
.menue-symbol svg{width:19px; height:19px}
.m-gruen{--f:#42e08a} .m-orange{--f:#ffa53d} .m-pink{--f:#ff5ca8}
.m-blau{--f:#5b9dff} .m-gelb{--f:#ffd35c} .m-lila{--f:#b07cff}
.m-tuerkis{--f:#3ee0c8} .m-rot{--f:#ff6166}
/* Die Trennlinie vor "Abmelden" sass am runden Eintrag selbst und sah aus
   wie ein abgeschnittener Rahmen. Sie gehoert an die Sprachzeile. */
.konto-liste a.konto-aus{border-top:0}
.konto-liste .konto-sprache{margin:4px -8px; padding:10px 17px;
  border-bottom:1px solid var(--hairline)}

/* ==== Verlaufsfenster in derselben Sprache (10.09.2026) ====
   Gemeldet: "History sieht auch komisch aus". Drei Dinge wichen von den
   neuen Menues ab: graue Kreise als Symbol, der Zustand in Code-Schrift und
   Grossbuchstaben mit eckigem Rahmen ("ERLEDIGT"), und Trennlinien statt
   Zeilen, die man anfassen kann. Jetzt: Kaestchen in der Farbe der
   Richtung (Geld rein gruen, raus pink, Items blaugrau), der Zustand als
   ruhige Pille mit Punkt. */
.vf-liste{gap:2px}
.vf-liste .verlauf-posten{
  gap:12px; padding:10px 46px 10px 6px; border-bottom:0; border-radius:12px;
  transition:background var(--schnell);
}
.vf-liste .verlauf-posten:hover{background:rgba(255,255,255,.05)}
/* Drei Klassen, nicht zwei: `.verlauf-posten.raus .verlauf-zeichen` weiter
   oben setzt Farbe und Hintergrund direkt und hat selbst drei. Mit zwei
   gewann die alte Regel - das Kaestchen bei "Gekauft" blieb tuerkis statt
   pink, obwohl `--f` richtig gesetzt war. */
.vf-liste .verlauf-posten .verlauf-zeichen{
  --f:#b5bac0;
  width:38px; height:38px; border-radius:11px; border:0; color:var(--f);
  background:color-mix(in srgb,var(--f) 17%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f) 22%,transparent);
}
.vf-liste .verlauf-posten.rein .verlauf-zeichen{--f:#42e08a}
.vf-liste .verlauf-posten.raus .verlauf-zeichen{--f:#ff5ca8}
.vf-liste .verlauf-text strong{font-size:14.5px; font-weight:700}
.vf-liste .verlauf-posten.rein .verlauf-betrag strong{color:#42e08a}
.vf-liste .verlauf-posten.raus .verlauf-betrag strong{color:#ff8cc0}
.vf-liste .verlauf-zustand{width:auto; min-width:92px}
.vf-liste .verlauf-zustand span{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border:0; border-radius:99px;
  font-family:inherit; font-size:12px; font-weight:700;
  letter-spacing:0; text-transform:none;
  color:#42e08a; background:color-mix(in srgb,#42e08a 14%,transparent);
}
.vf-liste .verlauf-zustand span::before{
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor;
}
.vf-liste .verlauf-posten.offen .verlauf-zustand span{
  color:#ffc24d; background:color-mix(in srgb,#ffc24d 14%,transparent);
}
.vf-liste .verlauf-posten.schlecht .verlauf-zustand span{
  color:#ff6b7a; background:color-mix(in srgb,#ff6b7a 14%,transparent);
}


/* Offene Auszahlungen sehen aus wie Inventaritems und bleiben auswählbar. */
.withdraw-bereich,.withdraw-history{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.withdraw-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.withdraw-kopf h2,.withdraw-history h2{margin:0;font-size:20px}
.withdraw-kopf p{margin:0}
.withdraw-raster .withdraw-karte{cursor:pointer}
.withdraw-aktionen{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.withdraw-aktionen form{margin:0}
.withdraw-aktionen .btn{min-height:42px}
@media (max-width:560px){.withdraw-aktionen,.withdraw-aktionen form{display:grid;width:100%}.withdraw-aktionen .btn{width:100%}}


/* Logo: nur Schriftzug, BETA schraeg ueber dem Y (30.09.2026) */
.brand-wort{position:relative; display:inline-block; padding-right:2px}
.brand-beta{position:absolute; right:-14px; top:-9px; transform:rotate(-14deg);
  font-family:"Chakra Petch",sans-serif; font-size:8.5px; font-weight:700;
  letter-spacing:.08em; line-height:1; padding:2px 4px; border-radius:4px;
  background:#ff5d8f; color:#fff; box-shadow:0 2px 6px rgba(255,93,143,.45);
  pointer-events:none}


/* Chat neu (30.09.2026): Zeilen wie im Messenger, Avatar-Kreis, kein Glas.
   Selektoren mit Absicht spezifisch, weil aeltere Bloecke die Zeile
   als Raster mit drei Spalten setzen. */
.chat,.wand-blatt .chat{background:#15161a; backdrop-filter:none; border-radius:12px;
  border:1px solid rgba(255,255,255,.08)}
.chat .chat-kopf{background:#1b1c21; border-radius:12px 12px 0 0; font-size:13px;
  letter-spacing:.02em}
.chat .chat-zeilen{gap:2px; padding:8px 6px}
.chat .chat-zeile,:is(body.markt-app,body.duell-app) .wand-blatt .chat-zeile{display:flex; gap:9px;
  align-items:flex-start; padding:6px 8px; border-radius:8px; font-size:13.5px}
.chat .chat-zeile:hover{background:rgba(255,255,255,.04)}
.chat .chat-bild{flex:0 0 30px; height:30px; border-radius:50%; display:grid;
  place-items:center; font-weight:700; font-size:13px; color:#fff;
  background:hsl(var(--h) 45% 38%)}
.chat .chat-inhalt{min-width:0; flex:1}
.chat .chat-kopfzeile{display:flex; align-items:baseline; gap:7px}
.chat .chat-name,:is(body.markt-app,body.duell-app) .wand-blatt .chat-name{font-weight:700; font-size:13px;
  color:#e9eaee}
.chat a.chat-name:hover{text-decoration:underline}
.chat .chat-zeit,:is(body.markt-app,body.duell-app) .wand-blatt .chat-zeit{font-size:10.5px; color:#7d8088;
  align-self:baseline}
.chat .chat-text{color:#c4c6cc; margin-top:1px; line-height:1.4}
.chat .chat-form{background:#1b1c21; border-radius:0 0 12px 12px; border-top:0}
.chat .chat-form input{border-radius:999px; background:#0f1013;
  border:1px solid rgba(255,255,255,.08)}
.chat .chat-form .btn{border-radius:999px}
.chat-schalter{border-radius:999px; background:#22242a; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.4);
  font-family:inherit; border:1px solid rgba(255,255,255,.1)}


/* Buy-Seite: Warenkorb-Reiter in der rechten Wand (30.09.2026) */
.korb-leer{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:18px}


/* Sets (30.09.2026) */
.set-leiste{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px}
.set-leiste .chip.an{background:var(--accent); color:var(--accent-ink)}
.set-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px}
.set-karte{display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:12px;
  background:#17181c; border:1px solid rgba(255,255,255,.07); color:inherit; text-decoration:none;
  transition:transform .15s, border-color .15s}
.set-karte[hidden]{display:none}
.set-karte:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.2)}
.set-karte.bereit{border-color:#3ddc97; box-shadow:0 0 0 1px #3ddc97 inset}
.set-karte.nicht-da{opacity:.5}
.set-bild{position:relative; height:96px; display:flex; align-items:center; justify-content:center; gap:0}
.set-bild img{max-height:96px; max-width:100%; object-fit:contain}
.set-menge{position:absolute; right:0; top:0; font-size:11px; font-weight:700; padding:2px 6px;
  border-radius:6px; background:#3ddc97; color:#08210f}
.set-name{font-size:14px}
.set-balken{height:5px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden}
.set-balken i{display:block; height:100%; background:#3ddc97}
.set-detail{display:grid; grid-template-columns:minmax(220px,340px) 1fr; gap:24px; align-items:start}
@media(max-width:800px){.set-detail{grid-template-columns:1fr}}
.set-gross{display:flex; align-items:center; justify-content:center; padding:20px; border-radius:14px;
  background:#17181c; border:1px solid rgba(255,255,255,.07)}
.set-gross img{max-height:200px; max-width:100%; object-fit:contain}
.set-teil{display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:8px;
  border-radius:10px; background:#17181c; border:1px solid rgba(255,255,255,.07)}
.set-teil.hat{border-color:#3ddc97}
.set-teil-bild{width:56px; height:56px; flex:none; display:flex; align-items:center; justify-content:center}
.set-teil-bild img{max-width:100%; max-height:100%; object-fit:contain}
.set-teil-text{flex:1; display:flex; flex-direction:column; min-width:0}
.set-teil-stand{display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:13px}
.set-teil-stand .ok{color:#3ddc97; font-weight:600}
.set-teil-stand .fehlt{color:#ff7a8a}
.set-aktionen{display:flex; gap:16px; flex-wrap:wrap; margin-top:16px}
.set-banner{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; padding:10px 14px;
  border-radius:10px; background:rgba(61,220,151,.08); border:1px solid rgba(61,220,151,.35)}
.set-banner form{margin:0}

/* Set-Info: Knopf im Filter, Marke an der Karte, Fenster (30.09.2026) */
.set-info-knopf{width:100%; margin-top:14px; justify-content:center}
.set-info-zeichen{color:#ff5d8f; margin-right:4px}
.set-marke{position:absolute; left:6px; top:6px; z-index:3; display:inline-flex; align-items:center; gap:5px;
  cursor:pointer; padding:4px 7px 4px 6px; border-radius:99px; color:#ff8db0;
  background:rgba(14,15,18,.82); border:1px solid rgba(255,93,143,.55);
  backdrop-filter:blur(4px); transition:transform .15s, box-shadow .15s}
.set-marke:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(255,93,143,.35)}
.set-punkte{display:inline-flex; gap:3px}
.set-punkte i{width:6px; height:6px; border-radius:50%; border:1.5px solid currentColor; opacity:.55}
.set-punkte i.an{background:currentColor; opacity:1}
.set-marke.fertig{color:#3ddc97; border-color:#3ddc97; box-shadow:0 0 12px rgba(61,220,151,.45)}
.setfenster .kfenster-inhalt{max-width:760px}
.setfenster .set-titel{margin:0 0 10px}
.setfenster .set-karte{font:inherit; text-align:left; cursor:pointer}
.setfenster .set-gross{margin:10px 0; display:flex; justify-content:center}
.set-meldung{color:#ff7a8a; min-height:1em}

/* Buy-Seite: Kachelfuss und Abbrechen-Kreuz; Schliessen-Kreuz der Fenster nach vorn */
.gesuch-fuss{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 10px 10px}
.gesuch-fuss form{margin:0}
.gesuch-ab{width:24px; height:24px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:transparent;
  color:inherit; font-size:16px; line-height:1; cursor:pointer}
.gesuch-ab:hover{background:#ff5d8f; border-color:#ff5d8f; color:#fff}
.kfenster .gf-schliessen{z-index:20}
.kfenster .gf-schliessen button{cursor:pointer}


/* Sets: Bilder bleiben im Rahmen; Gesuch-Fenster: Fuss immer sichtbar (30.09.2026) */
.set-bild{overflow:hidden}
.set-bild img,.set-gross img{min-width:0; object-fit:contain}
.set-bild img{flex:0 1 auto; max-width:100%; max-height:96px}
.set-bild.mehrere img{max-width:52%}
.set-gross{overflow:hidden}
.set-gross img{max-width:100%; max-height:200px}
.set-gross.mehrere img{max-width:55%}
.set-teil-bild img{max-width:100%; max-height:100%}
.gfenster[open]{display:flex; flex-direction:column}
.gfenster[open] .gf-kopf{flex:none}
.gfenster[open] #gform{flex:1 1 auto; min-height:0; max-height:none; display:flex; flex-direction:column}
.gfenster[open] #gform .gf-koerper{flex:1 1 auto; min-height:0}
.gfenster[open] #gform .gf-fuss{flex:none}

.chat img.chat-bild{object-fit:cover; background:#22242a}

/* Set-Popup: Suche; Ersatzbilder als Raster ohne Ueberlappung */
.set-suche{width:100%; margin:0 0 14px; padding:10px 14px; border-radius:10px;
  background:#0f1013; border:1px solid rgba(255,255,255,.1); color:inherit; font:inherit}
.set-bild.mehrere,.set-gross.mehrere{display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:6px; align-items:center; justify-items:center}
.set-bild.mehrere img,.set-gross.mehrere img{max-width:100%}
.markt-sets-chip{margin-top:12px}

.setfenster .set-bild{height:130px}
.setfenster .set-bild img{max-height:130px}


/* Support: rote Zahl fuer neue Antworten (30.09.2026) */
.sup-schalter{position:fixed}
.sup-zahl{position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px;
  border-radius:99px; background:#ff3b5c; color:#fff; font:700 11px/19px "Chakra Petch",sans-serif;
  text-align:center; box-shadow:0 0 0 2px #121316; animation:sup-puls 1.8s ease-in-out infinite}
.sup-zahl[hidden]{display:none}
@keyframes sup-puls{50%{transform:scale(1.12)}}
.sup-neu-punkt{display:inline-block; width:8px; height:8px; border-radius:50%; background:#ff3b5c;
  margin-right:6px; vertical-align:middle}

/* Set-Info-Knopf: Icon, Text, Pfeil - statt Raute auf grauem Knopf (30.09.2026) */
.btn.set-info-knopf{display:flex; align-items:center; gap:10px; width:100%; margin-top:16px;
  padding:10px 12px; border-radius:12px; text-align:left; justify-content:flex-start;
  background:linear-gradient(135deg,rgba(255,93,143,.14),rgba(124,92,255,.10));
  border:1px solid rgba(255,93,143,.35); color:#f3f4f7; font-weight:700; letter-spacing:.01em;
  transition:border-color .15s, transform .15s, box-shadow .15s}
.btn.set-info-knopf:hover{border-color:#ff5d8f; transform:translateY(-1px);
  box-shadow:0 6px 18px -8px rgba(255,93,143,.6)}
.set-info-icon{display:grid; place-items:center; width:28px; height:28px; border-radius:8px;
  background:rgba(255,93,143,.18); color:#ff8db0; flex:none}
.set-info-text{flex:1}
.set-info-pfeil{font-size:20px; line-height:1; opacity:.6}

/* Unten in der Filterspalte Platz fuer den schwebenden Support-Knopf */
.filterbox .filter-inhalt{padding-bottom:72px}

/* ---- Werte (Supreme Values) neben dem Preis, 01.10.2026 ----
   Eigene Farbe (Tuerkis), damit die Zahl nicht als zweiter Preis gelesen
   wird. Aus per Schalter: html.werte-aus (werte.js). */
/* Preis und Wert auf EINER Mittellinie - `baseline` setzte die kleine
   Marke sichtbar tiefer als die grosse Preiszahl. */
.preis-zeile{display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0}
.preis-zeile .price{line-height:1.1}
.wert-marke{display:inline-flex; align-items:center; font-size:12px;
  font-weight:600; line-height:1; padding:4px 7px; border-radius:6px;
  color:#5eead4; background:rgba(94,234,212,.1); border:1px solid rgba(94,234,212,.25);
  white-space:nowrap; position:relative; z-index:3; cursor:help}
html.werte-aus .marktkarte .wert-marke,
html.werte-aus .gesuch-karte .wert-marke{display:none}
.item-wert{display:flex; align-items:center; gap:8px; margin:6px 0 0}
.wert-marke.gross{font-size:15px; padding:5px 9px}
/* Infobox: wird von werte.js als eigenes Element FEST ins Fenster gelegt -
   als ::after sass sie in der Kachel und wurde von deren overflow:hidden
   abgeschnitten. */
.wert-tipp{position:fixed; z-index:4000; max-width:220px; padding:8px 10px;
  border-radius:8px; background:#111214; color:var(--ink);
  border:1px solid rgba(94,234,212,.35); box-shadow:0 8px 24px rgba(0,0,0,.45);
  font:500 12px/1.4 system-ui,sans-serif; pointer-events:none}
.wert-marke:focus{outline:none; border-color:#5eead4}
.werte-schalter{display:inline-flex; align-items:center; gap:6px; flex:none;
  padding:6px 10px; border-radius:999px; font:inherit; font-size:12.5px;
  color:var(--ink-2); background:transparent; border:1px solid rgba(255,255,255,.14);
  cursor:pointer}
.werte-punkt{width:9px; height:9px; border-radius:50%; background:#5eead4;
  box-shadow:0 0 8px rgba(94,234,212,.6)}
.werte-schalter[aria-pressed="false"] .werte-punkt{background:transparent;
  box-shadow:none; border:1.5px solid var(--ink-3)}
.duell-wert{font-size:12px; margin-top:4px}
.einsatz-wertzeile{display:flex; justify-content:space-between; gap:8px;
  flex-wrap:wrap; font-size:13px; margin:6px 0}
.einsatz-wertzeile.daneben{color:var(--bad)}

/* ---- 1v1 mit Chat-Wand wie auf dem Markt (01.10.2026) ---- */
/* Wie auf dem Markt: die Wand liegt buendig am rechten Rand, von der
   Kopfzeile bis unten, und die Seite laeuft links daneben. Als schwebende
   Karte mit Abstand wirkte sie "einfach irgendwo da" (01.10.2026). */
@media (min-width:1240px){
  /* animation/transform aus: solange main die Einblende-Animation
     traegt, ist es der Rahmen fuer position:fixed - die Wand sass dann
     mitten in der Seite statt am Fensterrand. */
  body.duell-app main{width:auto; max-width:none; animation:none; transform:none;
    margin:0 calc(296px + 24px) 0 24px}
  body.duell-app .rechte-wand{
    position:fixed; right:0; top:var(--navhoehe,74px); bottom:0;
    width:296px; height:auto; z-index:5;
    border:0; border-left:1px solid var(--line); border-radius:0;
  }
}

.chip.chip-sets .punkt{background:conic-gradient(#f472b6,#facc15,#5eead4,#818cf8,#f472b6)}

.set-unter{display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap}
.gf-wert{font-size:11px; color:#5eead4}
.korb-text .wert-marke{align-self:flex-start; margin-top:2px}

/* ---- Support uebersichtlicher (01.10.2026) ----
   Vorher trugen alle Zustaende dasselbe Bernstein - "Escalated", "Waiting
   for us" und "Answered" sahen gleich aus. Jetzt sagt die Farbe, wer dran
   ist: GRUEN = da ist eine Antwort fuer dich, BERNSTEIN = wir sind dran,
   LILA = liegt beim Team, GRAU = erledigt. */
.sup-st{--st:#fbbf24}
.sup-st.z-antwort,.sup-st.z-ki{--st:#34d399}
.sup-st.z-eskaliert{--st:#ffe36b}
.sup-st.z-geschlossen{--st:#9ca3af}
.geld-zustand.sup-st{color:var(--st); background:color-mix(in srgb,var(--st) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--st) 35%,transparent)}
.geld-zustand.sup-st::before{background:var(--st)}
.sup-st.z-geschlossen::before{content:"✓"; background:none; width:auto; height:auto;
  font-size:10px; line-height:1}
.sup-fenster{width:410px; max-height:min(78vh,680px)}
.sup-ticketzeile{border-left:3px solid var(--st,#fbbf24) !important}
.sup-ticketzeile.st-antwort,.sup-ticketzeile.st-ki{--st:#34d399;
  background:linear-gradient(90deg,rgba(52,211,153,.08),transparent 60%)}
.sup-ticketzeile.st-eskaliert{--st:#ffe36b}
.sup-ticketzeile.st-geschlossen{--st:#4b5563; opacity:.72}
.sup-ticketzeile.st-geschlossen:hover{opacity:1}
@media (max-width:760px){ .sup-fenster{width:auto; max-height:none} }

/* Sortierung als Auswahl (01.10.2026) */
.sort-wahl{display:inline-flex; align-items:center; gap:8px; margin-left:auto; flex:none;
  padding:4px 4px 4px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:rgba(18,19,21,.6); text-transform:none; font-size:13px}
.sort-wahl-text{color:var(--ink-3); font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:11px}
.sort-wahl select{appearance:none; -webkit-appearance:none; border:0; border-radius:9px;
  padding:8px 30px 8px 12px; font:inherit; font-weight:700; color:var(--accent-ink,#06231f);
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2306231f' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  cursor:pointer}

/* ==================== Minigames (01.10.2026) ==================== */
.mg-kopf h1{margin:0 0 4px}
.mg-spass{display:inline-block; margin-left:6px; padding:3px 9px; border-radius:999px; font-size:12px;
  font-weight:700; color:#fbbf24; background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.3)}
.mg-anlegen{margin:16px 0}.mg-anlegen h2{margin:0 0 12px; font-size:18px}
.mg-liste{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
.mg-karte{display:flex; flex-direction:column; gap:10px; padding:14px}
.mg-spieler,.mg-person{display:flex; align-items:center; gap:10px}
.mg-spieler img,.mg-person img{width:42px; height:42px; border-radius:50%; object-fit:cover}
.mg-spieler div,.mg-person div{display:flex; flex-direction:column}
.mg-einsatz,.mg-pot{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.mg-einsatz .duell-item,.mg-pot .duell-item{width:44px; height:44px}
.mg-aktion{display:flex; gap:8px; justify-content:flex-end; margin-top:auto}
.mg-seite{display:flex; align-items:center; gap:6px; font-size:13px}
.mg-verlauf{display:flex; flex-direction:column; gap:6px}
.mg-verlauf-zeile{display:flex; justify-content:space-between; padding:9px 12px; border-radius:10px;
  background:rgba(18,19,21,.5); color:var(--ink-2); text-decoration:none; font-size:14px}

/* Spielraum */
.mg-raum{display:flex; flex-direction:column; gap:14px}
.mg-buehne-kopf{display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:start}
.mg-seite-spieler{display:flex; flex-direction:column; gap:8px}
.mg-seite-spieler.rechts{align-items:flex-end; text-align:right}
.mg-person.rechts{flex-direction:row-reverse}
.mg-person.sieger img,.mg-person.sieger .duell-avatar{box-shadow:0 0 0 3px #facc15, 0 0 22px rgba(250,204,21,.5)}
.mg-mitte{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center}
.mg-art{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3)}
#mg-status{font-size:20px}#mg-status.gewonnen{color:#facc15}
.mg-leerplatz{color:var(--ink-3); font-style:italic}
.mg-buehne{min-height:300px; padding:18px; border-radius:18px; background:
  radial-gradient(ellipse at 50% 0%, rgba(94,234,212,.08), transparent 60%), rgba(14,15,17,.7);
  border:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column; align-items:center; gap:14px}
.mg-leiste{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.mg-fehler{color:var(--bad)}
.mg-wartet{display:flex; flex-direction:column; align-items:center; font-size:46px; margin:auto}
.mg-wartet p{font-size:15px; color:var(--ink-3)}
.mg-beitritt{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.mg-ergebnis{font-size:18px; font-weight:700; margin:0; transition:opacity .3s}
.mg-ergebnis.versteckt{opacity:0}
.mg-punkte{display:flex; align-items:center; gap:12px; font-weight:700}
.mg-punkte span{display:flex; align-items:center; gap:8px}
.mg-punkte b{font-size:26px; color:var(--accent)}.mg-punkte i{color:var(--ink-3); font-style:normal}
.mg-runden{display:flex; gap:6px; flex-wrap:wrap; justify-content:center}
.mg-runden span{padding:4px 10px; border-radius:999px; font-size:13px; background:rgba(255,255,255,.06)}
.mg-runden .gut{background:rgba(52,211,153,.18); color:#34d399}
.mg-runden .schlecht{background:rgba(248,113,113,.15); color:#f87171}
.mg-vs{font-weight:900; color:var(--ink-3); letter-spacing:.1em}

/* Schiffe */
.mg-schiffe{display:flex; gap:28px; flex-wrap:wrap; justify-content:center}
.mg-feld-box h3{margin:0 0 8px; font-size:14px; text-align:center; color:var(--ink-2)}
.mg-feld{--n:8; display:grid; grid-template-columns:repeat(var(--n), 34px); gap:3px; padding:6px;
  border-radius:12px; background:linear-gradient(180deg,#0b2a3d,#071a28); box-shadow:inset 0 0 24px rgba(0,0,0,.5)}
.mg-feld-box.dran .mg-feld{box-shadow:0 0 0 2px var(--accent), 0 0 24px rgba(94,234,212,.35)}
.mg-zelle{width:34px; height:34px; border:0; border-radius:6px; background:rgba(56,189,248,.12);
  position:relative; padding:0; cursor:default}
.mg-feld.klickbar .mg-zelle:not(.beschossen){cursor:crosshair}
.mg-feld.klickbar .mg-zelle:not(.beschossen):hover{background:rgba(94,234,212,.35)}
.mg-zelle.schiff{background:linear-gradient(180deg,#94a3b8,#64748b)}
.mg-zelle.wasser::after{content:""; position:absolute; inset:12px; border-radius:50%; background:rgba(255,255,255,.55);
  animation:mg-platsch .4s ease-out}
.mg-zelle.treffer{background:radial-gradient(circle,#fb923c 0 30%,#dc2626 70%); animation:mg-boom .45s ease-out}
.mg-zelle.versenkt{background:radial-gradient(circle,#7f1d1d 0 40%,#450a0a)}
.mg-zelle.zielt{outline:2px solid #facc15}
@keyframes mg-boom{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes mg-platsch{0%{transform:scale(0); opacity:0}100%{transform:scale(1); opacity:1}}
.mg-aufstellen{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center}
.mg-zug{margin:0; font-weight:700; color:var(--ink-2)}.mg-zug.du{color:var(--accent)}
@media (max-width:760px){.mg-feld{grid-template-columns:repeat(var(--n), 30px)}.mg-zelle{width:30px;height:30px}
  .mg-buehne-kopf{grid-template-columns:1fr 1fr}.mg-mitte{grid-column:1/-1; order:-1}}


/* ===== Dunkle Auswahllisten, Spielkacheln, Einsatzwahl (01.10.2026) =====
   color-scheme sagt dem Browser, dass die Seite dunkel ist: aufgeklappte
   <select>-Listen, Rollbalken und Datumsfelder kommen dann dunkel statt
   weiss - auf JEDER Seite, auch dort, wo niemand nachgesehen hat. */
:root{color-scheme:dark}
select option,select optgroup{background:#17181b; color:#e9eaec}

/* Sortierung: eigene Liste ueber dem <select> (auswahlmenue.js) */
.am-versteckt{position:absolute!important; width:1px; height:1px; opacity:0; pointer-events:none}
.sort-wahl{position:relative}
.am{position:relative}
.am-knopf{display:inline-flex; align-items:center; gap:10px; border:0; border-radius:9px; padding:8px 12px;
  font:inherit; font-weight:700; color:var(--accent-ink,#06231f); background:var(--accent); cursor:pointer;
  white-space:nowrap; transition:filter .15s}
.am-knopf:hover{filter:brightness(1.08)}
.am-knopf svg{transition:transform .2s}
.am.offen .am-knopf svg{transform:rotate(180deg)}
.am-liste{position:absolute; right:0; top:calc(100% + 8px); z-index:60; min-width:210px; margin:0; padding:6px;
  list-style:none; border-radius:14px; border:1px solid rgba(255,255,255,.1);
  background:rgba(20,21,24,.97); backdrop-filter:blur(14px);
  box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.3);
  opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top right; pointer-events:none;
  transition:opacity .16s, transform .16s}
.am.offen .am-liste{opacity:1; transform:none; pointer-events:auto}
.am-liste li{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 12px;
  border-radius:9px; font-weight:600; color:var(--ink-2); cursor:pointer; outline:none; white-space:nowrap}
.am-liste li svg{opacity:0; color:var(--accent)}
.am-liste li:hover,.am-liste li:focus{background:rgba(255,255,255,.07); color:var(--ink)}
.am-liste li.an{color:var(--accent)}
.am-liste li.an svg{opacity:1}

/* Spielauswahl oben: grosse Kacheln statt einer Knopfreihe */
.mg-reiter{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin:0 0 20px}
.mg-reiter a{--farbe:#5eead4; position:relative; display:flex; align-items:center; gap:14px; padding:14px 16px;
  border-radius:16px; text-decoration:none; color:var(--ink); overflow:hidden; isolation:isolate;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, color-mix(in srgb,var(--farbe) 14%,transparent), rgba(18,19,21,.75) 60%);
  transition:transform .18s, border-color .18s, box-shadow .18s}
.mg-reiter a::after{content:""; position:absolute; right:-30px; top:-40px; width:140px; height:140px; z-index:-1;
  border-radius:50%; background:radial-gradient(circle, color-mix(in srgb,var(--farbe) 30%,transparent), transparent 70%);
  opacity:.5; transition:opacity .2s}
.mg-reiter a:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--farbe) 45%,transparent)}
.mg-reiter a:hover::after{opacity:.9}
.mg-reiter a.an{border-color:var(--farbe);
  box-shadow:0 0 0 1px var(--farbe), 0 10px 30px color-mix(in srgb,var(--farbe) 22%,transparent)}
.mg-reiter a.an::after{opacity:1}
.mg-reiter .symbol{flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:13px;
  color:var(--farbe); background:color-mix(in srgb,var(--farbe) 14%,rgba(0,0,0,.35));
  border:1px solid color-mix(in srgb,var(--farbe) 35%,transparent)}
.mg-reiter a.an .symbol{color:#0b0c0e; background:var(--farbe)}
.mg-reiter .text{display:flex; flex-direction:column; gap:2px; min-width:0}
.mg-reiter .text strong{font-size:16px}
.mg-reiter .text small{font-size:12px; color:var(--ink-3)}
.mg-reiter .marke{margin-left:auto; align-self:flex-start; font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:3px 7px; border-radius:999px; color:var(--farbe);
  background:color-mix(in srgb,var(--farbe) 14%,transparent)}
.mg-reiter a.duell{--farbe:#f87171}
.mg-reiter a.schiffe{--farbe:#38bdf8}
@media (max-width:760px){
  .mg-reiter{display:flex; overflow-x:auto; scrollbar-width:none; gap:10px; margin-bottom:14px}
  .mg-reiter::-webkit-scrollbar{display:none}
  .mg-reiter a{flex:0 0 78%; padding:12px}
}

/* Einsatzwahl: das Bild ist die Hauptsache */
.einsatz-auswahl{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px;
  max-height:min(52vh,430px); overflow:auto; padding:4px 4px 6px}
.einsatz-item{position:relative; display:flex; flex-direction:column; border-radius:14px; cursor:pointer;
  overflow:hidden; background:#141518; border:1px solid rgba(255,255,255,.07);
  transition:transform .15s, border-color .15s, box-shadow .15s}
.einsatz-item:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--c) 55%,transparent);
  box-shadow:0 10px 24px rgba(0,0,0,.45)}
.einsatz-check{position:absolute; opacity:0; pointer-events:none}
.einsatz-bild{position:relative; display:grid; place-items:center; height:104px; padding:8px;
  background:radial-gradient(circle at 50% 60%, color-mix(in srgb,var(--c) 34%,transparent), transparent 70%),
             linear-gradient(180deg, color-mix(in srgb,var(--c) 10%,#1b1c20), #121316)}
.einsatz-bild::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--c);
  box-shadow:0 0 12px var(--c)}
.einsatz-bild img{max-width:100%; max-height:88px; object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)); transition:transform .2s}
.einsatz-item:hover .einsatz-bild img{transform:scale(1.08) rotate(-3deg)}
.einsatz-haken{position:absolute; top:7px; right:7px; display:grid; place-items:center; width:24px; height:24px;
  border-radius:50%; background:rgba(0,0,0,.5); border:2px solid rgba(255,255,255,.35); color:transparent;
  transition:background .15s, border-color .15s, transform .15s}
.einsatz-anzahl{position:absolute; top:8px; left:8px; padding:2px 7px; border-radius:999px; font-size:11px;
  font-weight:800; background:rgba(0,0,0,.55); color:var(--ink-2)}
.einsatz-name{display:flex; flex-direction:column; gap:3px; padding:8px 10px 4px; min-width:0}
.einsatz-name strong{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.einsatz-name .wert-marke{align-self:flex-start}
.einsatz-schritte{display:flex; align-items:center; gap:4px; padding:4px 8px 9px; opacity:.35; transition:opacity .15s}
.einsatz-schritte button{flex:none; width:26px; height:26px; border-radius:8px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05); color:var(--ink); font:inherit; font-weight:800; cursor:pointer; line-height:1}
.einsatz-schritte button:hover{background:rgba(255,255,255,.12)}
.einsatz-menge{flex:1; min-width:0; width:100%; padding:4px 2px; border:0; border-radius:7px; background:rgba(0,0,0,.35);
  color:var(--ink); font:inherit; font-weight:700; text-align:center; -moz-appearance:textfield}
.einsatz-menge::-webkit-inner-spin-button,.einsatz-menge::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.einsatz-item.gewaehlt{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,#141518);
  box-shadow:0 0 0 1px var(--accent), 0 10px 26px color-mix(in srgb,var(--accent) 25%,transparent)}
.einsatz-item.gewaehlt .einsatz-haken{background:var(--accent); border-color:var(--accent); color:#06231f; transform:scale(1.1)}
.einsatz-item.gewaehlt .einsatz-schritte{opacity:1}
.einsatz-item.ohne-wert{opacity:.4; cursor:not-allowed}
.einsatz-item.ohne-wert:hover{transform:none; box-shadow:none}
@media (max-width:560px){.einsatz-auswahl{grid-template-columns:repeat(2,minmax(0,1fr))}.einsatz-bild{height:92px}}
.einsatz-item{text-transform:none; letter-spacing:normal; font-weight:400}
.duell-katalog .einsatz-kopfzeile>div>strong{display:none}
.mg-kopf{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.mg-kopf p{margin:0}
.mg-reiter{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.mg-reiter a{padding-right:70px}
.mg-reiter .marke{position:absolute; top:12px; right:12px; margin:0}
@media (max-width:760px){.mg-reiter a{flex:0 0 82%}}

/* Connect 4 */
.mg-vier{--sp:7; --loch:52px; display:grid; grid-template-columns:repeat(var(--sp), var(--loch)); gap:6px;
  padding:12px; border-radius:20px; background:linear-gradient(180deg,#1d4ed8,#1e3a8a);
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.3), 0 18px 40px rgba(0,0,0,.5)}
.mg-vier-spalte{display:flex; flex-direction:column; gap:6px; padding:0; border:0; background:none;
  border-radius:14px; cursor:default}
.mg-vier.klickbar .mg-vier-spalte:not(:disabled){cursor:pointer}
.mg-vier.klickbar .mg-vier-spalte:not(:disabled):hover{background:rgba(255,255,255,.12)}
.mg-vier-loch{position:relative; width:var(--loch); height:var(--loch); border-radius:50%;
  background:#0b1020; box-shadow:inset 0 4px 8px rgba(0,0,0,.7)}
.mg-vier-stein{position:absolute; inset:3px; border-radius:50%}
.mg-vier-stein.f1,.mg-vier-punkt.f1{background:radial-gradient(circle at 35% 30%,#fca5a5,#ef4444 55%,#991b1b)}
.mg-vier-stein.f2,.mg-vier-punkt.f2{background:radial-gradient(circle at 35% 30%,#fef08a,#facc15 55%,#a16207)}
.mg-vier-stein.faellt{animation:mg-vier-fall calc(.12s + var(--tiefe) * .06s) cubic-bezier(.5,0,1,1) both}
@keyframes mg-vier-fall{0%{transform:translateY(calc(var(--tiefe) * -58px - 30px))}
  80%{transform:translateY(0)} 90%{transform:translateY(-6px)} 100%{transform:translateY(0)}}
.mg-vier-stein.sieg{box-shadow:0 0 0 3px #fff, 0 0 20px 4px rgba(255,255,255,.7); animation:mg-vier-glanz 1s ease-in-out infinite alternate}
@keyframes mg-vier-glanz{to{box-shadow:0 0 0 3px #fff, 0 0 30px 8px rgba(255,255,255,.9)}}
.mg-vier-punkt{display:inline-block; width:14px; height:14px; border-radius:50%; vertical-align:-2px; margin-right:6px}
.mg-vier-legende{display:flex; gap:18px; flex-wrap:wrap; justify-content:center; color:var(--ink-2); font-weight:700}
.mg-reiter a.vier{--farbe:#facc15}
@media (max-width:560px){.mg-vier{--loch:38px; gap:4px; padding:8px}.mg-vier-spalte{gap:4px}}
.mg-kopf-rechts{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-left:auto}
@media (max-width:640px){.mg-kopf-rechts{width:100%; justify-content:space-between}}

/* ===== Ruhiger statt futuristisch (01.10.2026) =====
   Rueckmeldung: "zu futuristisch, sieht nach KI aus". Gemeint waren vor
   allem: Neon-Verlauf auf den Knoepfen samt Leuchtschatten, Maschinenschrift
   (JetBrains Mono) fuer jede Zahl, gesperrte Grossbuchstaben ueberall und
   Lichthoefe hinter Kacheln. Statt das an hundert Stellen einzeln
   zurueckzubauen, setzt dieser Block die Grundtoene neu - er steht deshalb
   am Ende und gewinnt. */
:root{
  --mono:"Nunito",system-ui,sans-serif;
  --schein:0 0 0 1px rgba(255,255,255,.14);
  --gruen:#2fbf71; --gruen-hover:#28a862;
  /* Das Mint (#7cf7d4) war die Leuchtfarbe - jetzt ein gewoehnliches Gruen. */
  --accent:#2fbf71; --accent-ink:#fff;
}
/* Leuchtende Schrift (Preise, Ueberschriften, Raenge) wirkt wie Neon. */
body *{text-shadow:none !important}
.chat-schalter{background:var(--gruen); box-shadow:none}
body{font-variant-numeric:tabular-nums}
.mono{font-family:"Nunito",system-ui,sans-serif; font-weight:700}
h1,h2,h3{letter-spacing:0}

/* Knoepfe: eine flache Farbe, kein Verlauf, kein Leuchten, kein 3D-Sockel */
.btn,.btn:hover:not(:disabled),.btn:active:not(:disabled){box-shadow:none; filter:none}
.btn:hover:not(:disabled){transform:none; background:rgba(255,255,255,.1)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.primary,.am-knopf{background:var(--gruen); color:#fff; border:1px solid transparent;
  border-radius:10px; box-shadow:none}
.btn.primary:hover:not(:disabled),.am-knopf:hover{background:var(--gruen-hover); box-shadow:none; filter:none}
.btn.primary:active:not(:disabled){box-shadow:none}

/* Kleine Ueberschriften: gross geschrieben darf bleiben, aber nicht gesperrt */
.lbl,.sort-wahl-text,.mg-art,.einsatz-kurz .lbl,.pot-kopf .lbl,.bilanz .lbl,
.mg-reiter .marke{letter-spacing:.03em}

/* Spielauswahl: schlichte Karten, Farbe nur am Symbol */
.mg-reiter a{background:var(--surface); border:1px solid var(--hairline); padding-right:16px}
.mg-reiter a::after{display:none}
.mg-reiter a:hover{transform:none; background:var(--surface-2); border-color:var(--hairline-2)}
.mg-reiter a.an{background:var(--surface-2); border-color:var(--farbe); box-shadow:none}
.mg-reiter .symbol{background:color-mix(in srgb,var(--farbe) 16%,transparent); border:0}
.mg-reiter .marke{position:static; align-self:center; margin-left:auto; background:var(--surface-3); color:var(--ink-2)}

/* Einsatzwahl: Bild vorn, ohne Lichthof */
.einsatz-item:hover{transform:none; box-shadow:none; border-color:var(--hairline-2)}
.einsatz-bild{background:var(--surface-2)}
.einsatz-bild::after{box-shadow:none}
.einsatz-bild img{filter:none}
.einsatz-item:hover .einsatz-bild img{transform:scale(1.04)}
.einsatz-item.gewaehlt{background:var(--surface-2); border-color:var(--gruen); box-shadow:0 0 0 1px var(--gruen)}
.einsatz-item.gewaehlt .einsatz-haken{background:var(--gruen); border-color:var(--gruen); color:#fff}
.einsatz-zaehler{color:var(--ink-2)}

/* Sortierliste und Spielfelder ohne Leuchten */
.am-liste{box-shadow:0 10px 24px rgba(0,0,0,.45); backdrop-filter:none; background:var(--surface-2)}
.am-liste li.an,.am-liste li svg{color:var(--gruen)}
.mg-vier-stein.sieg{animation:none; box-shadow:0 0 0 3px #fff}
.mg-feld-box.dran .mg-feld{box-shadow:0 0 0 2px var(--gruen)}
.mg-buehne{background:var(--surface)}

/* ===== Kartenhintergrund "B: ruhige Flaeche" (01.10.2026) =====
   Vom Betreiber aus sieben Varianten gewaehlt: kaum Farbe im Grund, die
   Stufe steht als volle Leiste oben, kein Lichthof hinter dem Item. Gilt
   fuer jede Stelle, an der ein Item mit Stufenfarbe (--c) steht. */
.item,.marktkarte,body.markt-app .marktkarte{
  background:var(--surface); border:1px solid var(--hairline); box-shadow:none}
.item .top,body.markt-app .marktkarte .top{
  height:3px; background:var(--c); opacity:1; box-shadow:none}
.item .bild,.marktkarte .bild,body.markt-app .marktkarte .bild,.spitzenkarte .bild,
.kopfbild,.vk-mini,.vk-posten-bild,.einsatz-bild{
  background:color-mix(in srgb,var(--c) 7%,var(--surface))}
.item .bild,.marktkarte .bild,body.markt-app .marktkarte .bild{border-bottom:1px solid var(--hairline)}
.einsatz-bild::after{height:3px; top:0; bottom:auto}
/* Chroma bekommt die Leiste als Regenbogen statt einer Farbe */
.rar-chroma .top,.item.rar-chroma .top,.marktkarte.rar-chroma .top{
  background:linear-gradient(90deg,#ff5d5d,#ffd35d,#5dff8a,#5dd6ff,#b45dff)}
.item:hover,.marktkarte:hover,body.markt-app .marktkarte:hover{
  border-color:color-mix(in srgb,var(--c) 45%,var(--hairline)); box-shadow:none}
.item .bild::before,.marktkarte .bild::before{display:none}
.item .bild img{filter:none}
.einsatz-kopf-rechts{display:flex; align-items:center; gap:10px}
.einsatz-auto-hinweis{margin:0 0 8px; color:var(--ink-2)}
.einsatz-auto-hinweis.daneben{color:var(--bad)}

/* ---- Wishlist und Discord-Benachrichtigungen (02.10.2026) ----
   Ruhiger Ton wie der Rest: eine Flaeche, eine Farbe, kein Glow. */
.wl-zeile{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center;
  justify-content:space-between; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--line, rgba(255,255,255,.08))}
.wl-seite{max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:14px}
.wl-kopf{display:flex; justify-content:space-between; align-items:flex-end; gap:12px}
.wl-kopf h1{margin:0 0 4px}
.wl-kopf p{margin:0}
.wl-kopf > span{white-space:nowrap}
.wl-hinweis a{text-decoration:underline}
.wl-suche{display:flex; gap:8px}
.wl-suche input{flex:1; min-width:0}
.wl-treffer{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:10px; margin-top:14px}
.wl-kachel{display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 8px; border-radius:12px; text-align:center; text-decoration:none;
  color:var(--ink); background:var(--surface-2, rgba(255,255,255,.04));
  border-top:3px solid var(--rar, var(--line, #444))}
.wl-kachel:hover{background:rgba(255,255,255,.08)}
.wl-kachel img{width:72px; height:72px; object-fit:contain}
.wl-name{font-weight:700; font-size:13.5px; line-height:1.2}
.wl-item{display:flex; align-items:center; gap:12px; min-width:0;
  text-decoration:none; color:var(--ink)}
.wl-item img{width:56px; height:56px; object-fit:contain; flex:none}
.wl-item div{display:flex; flex-direction:column; min-width:0}
.wl-item strong{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wl-form{display:flex; flex-direction:column; gap:14px}
.wl-preise{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.wl-preise label{display:flex; flex-direction:column; gap:6px;
  text-transform:none; letter-spacing:0; font-size:13px; font-weight:700}
.wl-liste{display:flex; flex-direction:column; gap:10px}
.wl-zeile-eintrag{display:grid; grid-template-columns:minmax(0,1.6fr) 1fr 1.2fr auto;
  align-items:center; gap:12px; padding:12px 14px}
.wl-zeile-eintrag.wl-da{box-shadow:inset 3px 0 0 var(--accent)}
.wl-spanne{display:flex; flex-direction:column; gap:2px}
.wl-tat{display:flex; gap:6px; align-items:center}
.wl-tat form{margin:0}
.discord-form{display:flex; gap:8px; flex-wrap:wrap}
.discord-form input{flex:1; min-width:200px}
.discord-knoepfe{gap:8px; margin-top:8px}
.discord-knoepfe form{margin:0}
.discord-hilfe{margin:4px 0 10px}
.discord-hilfe summary{cursor:pointer}
.discord-hilfe ol{margin:8px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px}
@media (max-width:700px){
  .wl-zeile-eintrag{grid-template-columns:1fr auto; grid-template-areas:"item tat" "spanne markt"}
  .wl-zeile-eintrag .wl-item{grid-area:item}
  .wl-zeile-eintrag .wl-tat{grid-area:tat}
  .wl-zeile-eintrag .wl-spanne{grid-area:spanne}
  .wl-zeile-eintrag .wl-markt{grid-area:markt; text-align:right}
  .wl-preise{grid-template-columns:1fr}
}
/* Aus einer Discord-Nachricht verlinkter Vorgang (02.10.2026). */
.verlauf-posten.vf-ziel{box-shadow:inset 3px 0 0 var(--accent); background:rgba(255,255,255,.04)}

/* ---- Buy-offer-Fenster gross wie der Markt (02.10.2026) ----
   Gemeldet: "Format komisch und zu klein". Vorher 940 px breit, Kacheln
   92 px mit 46-px-Bildern, die Auswahl rechts eine Zeile mit abgeschnittenem
   Namen und zwei winzigen Feldern. Jetzt fast bildschirmfuellend, Kacheln im
   Stil der Marktkarten (Bildfeld mit Stufenleiste, Kartenhintergrund B) und
   je Posten zwei Zeilen mit Stepper, Dollarfeld und Zeilensumme. */
.gfenster{width:min(1240px,96vw); height:min(860px,92vh); max-height:92vh}
.gfenster form:last-of-type{max-height:none}
.gf-koerper{grid-template-columns:minmax(0,1fr) 400px}
.gf-katalog{padding:16px 18px; gap:12px}
.gf-suchzeile{display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:10px}
.gf-suchzeile .suchfeld{width:100%}
.gf-suchzeile .suchfeld input{width:100%}
.gf-raster{grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px;
  align-content:start; grid-auto-rows:max-content; padding:2px 6px 8px 2px}
.gf-kachel{position:relative; align-items:stretch; gap:6px; padding:0 0 10px;
  border-radius:14px; border:1px solid var(--hairline, rgba(255,255,255,.08));
  border-top:0; background:var(--surface, #1b1c20); overflow:hidden;
  text-align:left; transition:border-color .15s, background .15s}
.gf-bild{position:relative; display:flex; align-items:center; justify-content:center;
  height:118px; padding:10px;
  background:color-mix(in srgb, var(--c, #888) 7%, var(--surface, #1b1c20));
  border-top:3px solid var(--c, #555)}
.gf-kachel.rar-chroma .gf-bild{border-image:linear-gradient(90deg,#ff5d8f,#f5b942,#3ddc97,#4f8ef7,#b06cf2) 1}
.gf-kachel img{width:100%; height:100%; max-height:98px; object-fit:contain}
.gf-kachel .gf-nm{padding:0 10px; font-size:13.5px; font-weight:700; line-height:1.25;
  text-align:left; -webkit-line-clamp:2; min-height:2.5em}
.gf-unter{display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:0 10px; font-size:12px}
.gf-stufe{color:var(--c, var(--ink-3)); text-transform:capitalize; font-weight:700}
.gf-wert{font-size:12px}
.gf-haken{position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
  display:none; place-items:center; background:var(--accent,#2fbf71); color:#fff;
  font-size:14px; font-weight:800}
.gf-kachel:hover{border-color:rgba(255,255,255,.22); transform:none}
.gf-kachel.an{outline:2px solid var(--accent,#2fbf71); outline-offset:-2px}
.gf-kachel.an .gf-haken{display:grid}

.gf-wahl{padding:16px 18px; gap:10px}
.gf-wahl-titel{font-size:16px}
.gf-spalten, .gf-spalten[hidden]{display:none !important}
.gf-posten{gap:10px}
.gf-zeile{display:grid; grid-template-columns:52px minmax(0,1fr) minmax(0,1fr) auto;
  grid-template-areas:"bild text text weg" "menge menge preis summe";
  gap:10px 10px; align-items:center; padding:12px; border-radius:12px;
  background:var(--surface-2, rgba(255,255,255,.04));
  border:1px solid var(--hairline, rgba(255,255,255,.08));
  border-left:3px solid var(--c, #555)}
.gf-z-bild{grid-area:bild; width:52px; height:52px; display:grid; place-items:center;
  border-radius:10px; background:color-mix(in srgb, var(--c, #888) 10%, transparent)}
.gf-z-bild img{width:44px; height:44px; object-fit:contain}
.gf-z-text{grid-area:text; display:flex; flex-direction:column; min-width:0}
.gf-z-text strong{font-size:14px; line-height:1.25; overflow-wrap:anywhere}
.gf-z-text span{text-transform:capitalize}
.gf-weg{grid-area:weg; align-self:start; justify-self:end; width:28px; height:28px; border-radius:8px;
  font-size:18px; line-height:1}
.gf-weg:hover{background:rgba(255,93,143,.15); color:#ff5d8f}
.gf-z-feld{display:flex; flex-direction:column; gap:4px; text-transform:none;
  letter-spacing:0; min-width:0}
.gf-z-feld:nth-of-type(1){grid-area:menge}
.gf-z-feld:nth-of-type(2){grid-area:preis}
.gf-stepper{display:grid; grid-template-columns:30px minmax(0,1fr) 30px;
  border:1px solid var(--hairline-2, rgba(255,255,255,.14)); border-radius:10px; overflow:hidden}
.gf-stepper button{border:0; background:rgba(255,255,255,.05); color:inherit;
  font-size:16px; cursor:pointer; padding:0}
.gf-stepper button:hover{background:rgba(255,255,255,.1)}
.gf-stepper input{width:100%; min-width:0; border:0; border-radius:0; text-align:center;
  padding:8px 2px; background:transparent; -moz-appearance:textfield}
.gf-stepper input::-webkit-outer-spin-button,
.gf-stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.gf-geldfeld{display:flex; align-items:center; gap:4px; padding:0 10px;
  border:1px solid var(--hairline-2, rgba(255,255,255,.14)); border-radius:10px}
.gf-geldfeld:focus-within{border-color:var(--accent,#2fbf71)}
.gf-geldfeld > span{color:var(--ink-3, #9aa0aa); font-weight:700}
.gf-geldfeld input{width:100%; min-width:0; border:0; padding:8px 0; background:transparent}
.gf-geldfeld input:focus{outline:none; box-shadow:none}
.gf-z-summe{grid-area:summe; align-self:end; padding-bottom:9px; text-align:right;
  font-weight:800; white-space:nowrap}
@media (max-width:1000px){
  .gf-koerper{grid-template-columns:minmax(0,1fr) 340px}
}
@media (max-width:760px){
  .gfenster{width:100vw; height:auto}
  .gf-koerper{grid-template-columns:1fr}
  .gf-suchzeile{grid-template-columns:1fr}
  .gf-raster{grid-template-columns:repeat(2,minmax(0,1fr)); max-height:none;
    overflow:visible; flex:none}
  .gf-bild{height:100px}
  /* Am Handy rollt das ganze Fenster statt zwei winziger Kaesten, und die
     Auswahl steht OBEN - sonst verschwindet, was man gerade angetippt hat,
     unter hundert Kacheln. */
  .gfenster[open] #gform .gf-koerper{display:flex; flex-direction:column; overflow-y:auto}
  .gf-katalog{flex:none; min-height:auto; border-bottom:0}
  .gf-wahl{order:-1; flex:none; overflow:visible;
    border-bottom:1px solid var(--hairline, rgba(255,255,255,.08))}
  /* Der Knopf zum Absenden klebt unten (02.10.2026). Gemeldet aus den
     Nachrichten: "man muss durch alle Items scrollen, um das Offer zu
     senden" - der Fuss stand am Handy HINTER dem ganzen Katalog (1766 px
     bei 844 px Schirm). Gilt fuer Buy-Offer- und Angebotsfenster. */
  .gfenster .gf-fuss{position:sticky; bottom:0; z-index:6;
    padding-bottom:calc(13px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -10px 24px rgba(0,0,0,.35)}
}

/* Set-Info: Auswahl (All / Started / Ready) und Sortierung (02.10.2026) */
.set-leiste{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; margin:-4px 0 14px}
.set-chips{display:flex; flex-wrap:wrap; gap:6px}
.set-chip{display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px;
  border:1px solid var(--hairline-2, rgba(255,255,255,.14)); background:transparent;
  color:var(--ink-2, #c8ccd4); font:inherit; font-size:13px; font-weight:700; cursor:pointer}
.set-chip b{font-size:11.5px; padding:1px 7px; border-radius:999px;
  background:rgba(255,255,255,.08); color:var(--ink-3, #9aa0aa)}
.set-chip:hover{border-color:rgba(255,255,255,.3)}
.set-chip.an{background:var(--accent,#2fbf71); border-color:var(--accent,#2fbf71); color:#fff}
.set-chip.an b{background:rgba(0,0,0,.18); color:#fff}
.set-sort{padding:8px 12px; border-radius:10px; font:inherit; font-size:13px; font-weight:700;
  background:#0f1013; color:inherit; border:1px solid rgba(255,255,255,.12); min-width:180px}
@media (max-width:760px){ .set-sort{flex:1 1 100%} }
/* Mit Auswahl und Sortierung braucht das Set-Fenster am PC mehr Breite -
   bei 560 px standen nur zwei Sets nebeneinander. */
@media (min-width:761px){ .setfenster{width:min(980px,94vw); max-width:min(980px,94vw)} }

/* Set direkt im Inventar trennen (02.10.2026) */
.marktkarte .set-trennen{position:absolute; left:8px; top:8px; z-index:4; margin:0}
.marktkarte .set-trennen .btn{display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; font-size:12px; border-radius:999px;
  background:rgba(15,16,19,.82); border:1px solid rgba(255,255,255,.18)}
.marktkarte .set-trennen .btn:hover{background:var(--accent,#2fbf71); border-color:var(--accent,#2fbf71); color:#fff}

/* Set direkt im Inventar trennen (02.10.2026) */
.marktkarte .set-trennen{position:absolute; left:8px; top:8px; z-index:4; margin:0}
.marktkarte .set-trennen .btn{display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; font-size:12px; border-radius:999px;
  background:rgba(15,16,19,.82); border:1px solid rgba(255,255,255,.18)}
.marktkarte .set-trennen .btn:hover{background:var(--accent,#2fbf71); border-color:var(--accent,#2fbf71); color:#fff}


/* Angebot in den Nachrichten, Schritt 1: "I want to…" + Sell / Buy (02.10.2026) */
.gf-richtung-block{padding:18px 18px 4px}
.gf-richtung-titel{margin:0 0 2px; font-size:18px}
.gf-richtung-block .gf-richtung{padding:12px 0 14px}
.gf-richtung-block .gf-wahlknopf{border-style:solid; padding:26px 16px; gap:6px}
.gf-richtung-block .gf-wahlknopf strong{font-size:20px}
.gf-richtung-block .gf-wahlknopf[data-richtung="verkaufen"] .gf-wk-zeichen{color:#3ddc97}
.gf-richtung-block .gf-wahlknopf[data-richtung="kaufen"] .gf-wk-zeichen{color:#4f8ef7}
/* Solange nur "I want to…" dasteht, braucht das Fenster keine volle Hoehe. */
.gfenster:has(#ang-schritt1:not([hidden])){height:fit-content; width:min(760px,96vw)}

/* Karten-Ecke im Inventar: Menge, Set-Info, Split untereinander (02.10.2026).
   Vorher lagen alle drei absolut auf derselben Stelle. */
.marktkarte .karte-ecke{position:absolute; left:8px; top:8px; z-index:4;
  display:flex; flex-direction:column; align-items:flex-start; gap:5px}
.marktkarte .karte-ecke .menge{position:static}
/* Split oben rechts; ist die Karte gewaehlt, steht dort der Haken -
   dann rueckt Split daneben. */
.marktkarte .set-trennen{left:auto; right:8px; top:8px}
.marktkarte.gewaehlt .set-trennen{right:36px}
.marktkarte .set-trennen .btn{padding:4px 9px; font-size:11.5px; font-weight:700;
  backdrop-filter:blur(4px)}
/* Set-Knopf unten rechts in der Wertzeile: Stapel-Symbol + Zahl der Sets,
   in denen das Item steckt. Rosa = schon Teile davon, gruen = fertig. */
.set-knopf{position:relative; z-index:2; margin-left:auto;
  display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 7px;
  border-radius:7px; cursor:pointer; font:800 11.5px var(--mono,monospace);
  color:var(--ink-2,#a9adb6); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  transition:background .12s, color .12s, border-color .12s}
.set-knopf:hover{color:#fff; background:rgba(255,93,143,.22); border-color:rgba(255,93,143,.6)}
.set-knopf.angefangen{color:#ff8db0; border-color:rgba(255,93,143,.5); background:rgba(255,93,143,.1)}
.set-knopf.fertig{color:#3ddc97; border-color:rgba(61,220,151,.6); background:rgba(61,220,151,.12)}
.set-nur-item{display:flex; align-items:center; gap:8px; margin:0 0 10px; flex-wrap:wrap}
.set-nur-item .set-chip{cursor:pointer}

/* Menge in der Verkaufsleiste (02.10.2026): eine Kapsel mit -/+ und
   "3 of 5", daneben MAX, darunter ein Regler fuer grosse Stapel. Bewusst
   NICHT wie StarPets (vier gleiche Kaesten mit "Select all"). */
.vk-mengen-zeile{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center}
.vk-posten .vk-kapsel{display:flex; align-items:center; height:40px; padding:4px; border-radius:999px;
  background:var(--surface-2,#17181c); border:1px solid var(--line,#2a2c31)}
.vk-kapsel:focus-within{border-color:var(--accent,#2fbf71)}
.vk-kapsel .vk-schritt{flex:0 0 32px; height:32px; border-radius:50%; border:0; padding:0;
  cursor:pointer; font:700 18px/1 var(--font,inherit); color:#fff;
  background:rgba(255,255,255,.08); transition:background .12s, transform .08s}
.vk-kapsel .vk-schritt:hover:not(:disabled){background:var(--accent,#2fbf71)}
.vk-kapsel .vk-schritt:active:not(:disabled){transform:scale(.92)}
.vk-kapsel .vk-schritt:disabled{opacity:.3; cursor:default}
.vk-posten .vk-zahl{text-transform:none; letter-spacing:0; margin:0; flex:1; display:flex; align-items:baseline; justify-content:center; gap:5px; cursor:text; min-width:0}
.vk-zahl input{width:3.2ch; min-width:2ch; text-align:right; padding:0; border:0; background:none;
  color:#fff; font:800 17px var(--mono,monospace); -moz-appearance:textfield; appearance:textfield}
.vk-zahl input:focus{outline:none}
.vk-zahl input::-webkit-outer-spin-button,.vk-zahl input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.vk-zahl span{font-size:12px; font-weight:700; color:var(--ink-3,#7b808b); white-space:nowrap}
.vk-posten .vk-mengen-zeile .vk-alle{height:40px; padding:0 14px; text-transform:uppercase; border-radius:999px; cursor:pointer;
  font:800 12px var(--font,inherit); letter-spacing:.08em; color:var(--accent,#2fbf71);
  background:transparent; border:1.5px solid var(--accent,#2fbf71); transition:background .12s, color .12s}
.vk-posten .vk-mengen-zeile .vk-alle:hover,.vk-posten .vk-mengen-zeile .vk-alle.an{background:var(--accent,#2fbf71); color:#0d0d10}
.vk-posten input.vk-regler{grid-column:1 / -1; width:100%; height:18px; margin:2px 0 0; padding:0;
  background:none; border:0; box-shadow:none; border-radius:0; cursor:pointer;
  -webkit-appearance:none; appearance:none}
.vk-regler::-webkit-slider-runnable-track{height:5px; border-radius:99px;
  background:linear-gradient(90deg,var(--accent,#2fbf71) var(--anteil),rgba(255,255,255,.1) var(--anteil))}
.vk-regler::-moz-range-track{height:5px; border-radius:99px;
  background:linear-gradient(90deg,var(--accent,#2fbf71) var(--anteil),rgba(255,255,255,.1) var(--anteil))}
.vk-regler::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; margin-top:-5.5px;
  border-radius:50%; background:#fff; border:3px solid var(--accent,#2fbf71)}
.vk-regler::-moz-range-thumb{width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid var(--accent,#2fbf71)}

/* Battleship: Schiffe selbst stellen (02.10.2026) */
.mg-feld.stellen .mg-zelle{cursor:pointer}
.mg-feld.stellen .mg-zelle.gewaehlt{background:#facc15; box-shadow:0 0 0 2px #fff inset}
.mg-feld.stellen .mg-zelle:not(.schiff):hover{outline:2px dashed rgba(250,204,21,.7); outline-offset:-3px}
.mg-vier-stein.faellt{animation-delay:var(--verz,0s)}
.mg-feld.stellen .mg-zelle.schiff.konflikt{background:#ef4444; box-shadow:0 0 0 2px #fecaca inset}
.mg-stell-fehler{color:#fca5a5; font-weight:700}
.mg-frage{width:min(420px,92vw); padding:24px; border-radius:16px; text-align:center}
.mg-frage h2{margin:0 0 6px}
.mg-frage p{margin:0 0 18px}
.mg-frage-knoepfe{justify-content:center; gap:10px}
.mg-frage .btn.rot{background:#ef4444; border-color:#ef4444; color:#fff}
.mg-frage .btn.rot:hover{background:#dc2626}
@keyframes mg-vier-fall{0%{opacity:0; transform:translateY(calc(var(--tiefe) * -58px - 30px))}
  1%{opacity:1} 80%{transform:translateY(0)} 90%{transform:translateY(-6px)} 100%{opacity:1; transform:translateY(0)}}

/* Standard-Avatar statt Buchstabenkreis (02.10.2026). Die bunten Kreise
   mit Anfangsbuchstaben sahen aus wie Googles Standardbild - gemeldet als
   "im Chat sind immer noch die Google-Profilbilder". Konten ohne Roblox
   bekommen jetzt alle dieselbe neutrale Figur. */
.avatar-standard{background:#1d2129 url("/static/img/avatar-standard.svg") center/cover no-repeat !important;
  color:transparent !important; font-size:0 !important; overflow:hidden}

/* ---- Bearbeiten, Remove-from-sale, Buy-Statistik (02.10.2026) ---- */
.karte-fuss{display:flex; padding:0 10px 10px}
.karte-edit{display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:var(--ink);
  font:inherit; font-size:12px; font-weight:700; cursor:pointer; position:relative; z-index:3}
.karte-fuss .karte-edit{flex:1; justify-content:center}
.karte-edit:hover{background:var(--accent,#2fbf71); border-color:var(--accent,#2fbf71); color:#fff}
.gesuch-fuss .karte-edit{margin-left:auto}
/* "Remove from sale" war ein grauer Kasten wie jedes Feld daneben. Ohne
   Auswahl jetzt gestrichelt mit Hinweis, mit Auswahl ein voller roter
   Knopf mit Muelleimer - und damit anders als der Support-Knopf daneben. */
body.verkauf-app .verkauf-leiste .vk-aus,.vk-aus{
  display:inline-flex; align-items:center; gap:7px;
  background:transparent; border:1px dashed rgba(255,255,255,.28); color:var(--muted,#9aa3ad); font-weight:700}
body.verkauf-app .verkauf-leiste .vk-aus:not(:disabled),.vk-aus:not(:disabled){
  background:#b91c1c; border:1px solid #ef4444; color:#fff; box-shadow:0 0 0 3px rgba(239,68,68,.25)}
body.verkauf-app .verkauf-leiste .vk-aus:not(:disabled):hover,.vk-aus:not(:disabled):hover{background:#dc2626; color:#fff}
body.verkauf-app .verkauf-leiste .vk-aus:disabled,.vk-aus:disabled{opacity:1}
.vk-aus svg{flex:none}

.bearb-fenster{width:min(420px,92vw); padding:22px; border-radius:16px}
.bearb-fenster form{display:flex; flex-direction:column; gap:14px; margin:0}
.bearb-kopf{display:flex; gap:12px; align-items:center}
.bearb-kopf img{width:56px; height:56px; object-fit:contain; border-radius:10px; background:rgba(255,255,255,.05)}
.bearb-kopf h2{margin:0; font-size:18px}
.bearb-kopf p{margin:2px 0 0}
.bearb-feld{display:flex; flex-direction:column; gap:6px; text-transform:none; letter-spacing:0}
.bearb-feld > span{font-size:13px; font-weight:700; color:var(--muted,#9aa3ad)}
.bearb-geld{display:flex; align-items:center; gap:6px; padding:0 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04)}
.bearb-geld input{flex:1; border:0; background:none; min-height:42px; color:var(--ink); font:inherit; font-size:16px; outline:none; padding:0}
.bearb-menge{display:flex; align-items:center; gap:6px}
.bearb-menge input{width:80px; text-align:center; min-height:40px; border-radius:10px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:var(--ink); font:inherit; font-size:16px}
.bearb-pm{width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); color:var(--ink); font-size:20px; cursor:pointer}
.bearb-pm:hover{background:rgba(255,255,255,.12)}
.bearb-summe{margin:0; font-weight:700; min-height:1.2em}
.bearb-knoepfe{justify-content:flex-end; gap:10px}

.gs-stats{display:flex; flex-direction:column; gap:14px; padding:4px 2px}
.gs-gross{display:flex; flex-direction:column; gap:4px; padding:16px; border-radius:14px;
  background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.35)}
.gs-gross span{font-size:13px; font-weight:700; color:#fbbf24}
.gs-gross strong{font-size:28px; line-height:1.1}
.gs-gross small{font-size:12px}
.gs-gitter{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.gs-gitter > div{display:flex; flex-direction:column; gap:3px; padding:12px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
.gs-gitter span{font-size:12px; color:var(--muted,#9aa3ad)}
.gs-gitter strong{font-size:17px}
.gs-gitter .gs-breit{grid-column:1 / -1}
.gs-tipp{margin:0}
.bearb-maxknopf{height:40px; padding:0 14px; border-radius:10px; border:1px solid var(--accent,#2fbf71);
  background:transparent; color:var(--accent,#2fbf71); font:inherit; font-weight:800; cursor:pointer}
.bearb-maxknopf:hover{background:var(--accent,#2fbf71); color:#fff}

/* ---- Einzahlung in Pruefung (03.10.2026) ---- */
.markt-raster .marktkarte.pruef-kachel{position:relative;border-color:rgba(245,158,11,.7);cursor:default}
.marktkarte.pruef-kachel .bild img{filter:grayscale(.55) brightness(.8)}
.pruef-marke{position:absolute;z-index:4;top:8px;right:8px;padding:3px 8px;border-radius:999px;
  background:#b45309;color:#fff;font-size:11px;font-weight:800;letter-spacing:.03em}
.pruef-text{display:block;margin-top:4px;font-size:11.5px;line-height:1.35;color:#fcd34d}
.pruef-support{display:block;margin-top:8px;padding:7px 10px;border-radius:9px;text-align:center;
  background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.55);color:#fde68a;
  font-size:12.5px;font-weight:800;text-decoration:none}
.pruef-support:hover{background:#b45309;color:#fff}

/* Items ohne Angebot im Markt (03.10.2026): da, aber ausgegraut. */
.marktkarte.ohne-angebot .bild img{filter:grayscale(1);opacity:.45}
.marktkarte.ohne-angebot .nm{opacity:.6}
.marktkarte.ohne-angebot .top{opacity:.35}
.marktkarte.ohne-angebot:hover .bild img{opacity:.7}
/* Set-Info: "Buy item" bei fehlenden Teilen */
.set-kaufen{margin-left:8px;text-decoration:none}

/* ---- Warenkorb, neu (03.10.2026) ----
   Eine Spalte, Zeilen als ruhige Liste, unten Summe und Kauf. Gilt fuer
   das Fenster und die Seite /cart gleich. */
.korb2{display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto}
.korb2-kopf{display:flex;align-items:baseline;gap:10px;padding-right:40px}
.korb2-kopf h2{margin:0;font-size:22px}
.korb2-liste{display:flex;flex-direction:column;gap:8px}
.korb2-zeile{display:grid;grid-template-columns:56px 1fr auto auto 30px;align-items:center;gap:12px;
  padding:9px 10px;border-radius:12px;background:var(--surface-2);border:1px solid var(--hairline)}
.korb2-zeile.tot{opacity:.55}
.korb2-bild{width:56px;height:56px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,#888) 10%,var(--surface));overflow:hidden}
.korb2-bild img{max-width:88%;max-height:88%;object-fit:contain}
.korb2-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.korb2-name{font-weight:800;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.korb2-name:hover{text-decoration:underline}
.korb2-text .warn{color:var(--warn)}
.korb2-menge{display:flex;flex-direction:column;align-items:center;gap:3px}
.korb2-stepper{display:flex;align-items:center;gap:2px;border:1px solid var(--hairline-2);border-radius:999px;padding:2px}
.korb2-stepper span{min-width:22px;text-align:center;font-weight:700}
.korb2-pm{width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:var(--ink);
  font-size:16px;line-height:1;cursor:pointer}
.korb2-pm:hover:not(:disabled){background:var(--surface-3)}
.korb2-pm:disabled{opacity:.3;cursor:default}
.korb2-summe{min-width:64px;text-align:right}
.korb2-weg button{width:30px;height:30px;border-radius:50%;border:0;background:transparent;
  color:var(--ink-3,#8a8d94);display:grid;place-items:center;cursor:pointer}
.korb2-weg button:hover{background:rgba(239,68,68,.14);color:#f87171}
.korb2-fuss{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--hairline)}
.korb2-gesamt{display:flex;justify-content:space-between;align-items:baseline}
.korb2-gesamt strong{font-size:22px}
.korb2-tat .btn,.korb2-weiter{width:100%;justify-content:center}
.korb2-frage{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--hairline-2)}
.korb2-frage p{margin:0}
.korb2-frage-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.korb2-start{display:none}
.js-korb .korb2-start{display:flex}
.js-korb .korb2-frage{display:none}
.js-korb .korb2.frage-offen .korb2-start{display:none}
.js-korb .korb2.frage-offen .korb2-frage{display:flex}
.korb2-leer{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:12px 0 4px}
.korb2-leer img{width:170px;height:auto}
.korb2-leer p{margin:0 0 6px}
.kfenster.korb-modus{width:min(560px,94vw)}
@media (max-width:620px){
  .korb2-zeile{grid-template-columns:48px 1fr auto 28px;grid-template-areas:"b t s w" "b m m w"}
  .korb2-bild{grid-area:b;width:48px;height:48px}
  .korb2-text{grid-area:t}.korb2-summe{grid-area:s}.korb2-weg{grid-area:w}
  .korb2-menge{grid-area:m;flex-direction:row;justify-content:flex-start;gap:10px}
}

/* Korbknopf an der Marktkachel, zweite Fassung (03.10.2026): ein klarer
   gruener Knopf unten rechts. Das nackte Symbol davor war zu klein und
   sah aus wie verrutscht. */
.marktkarte .karte-korb-knopf{width:34px;height:34px;border-radius:10px;
  border:1px solid rgba(47,191,113,.45);background:rgba(47,191,113,.14);color:#4ade80;
  box-shadow:none;transition:background .15s,color .15s,transform .1s}
.marktkarte .karte-korb-knopf svg{width:17px;height:17px}
.marktkarte .karte-korb-knopf:hover{background:#2fbf71;border-color:#2fbf71;color:#0f1a13}
.marktkarte .karte-korb-knopf.drin{background:#2fbf71;border-color:#2fbf71;color:#0f1a13}
.marktkarte .karte-korb-knopf:disabled{opacity:.6}
.korb-zahl.hops{animation:korb-hops .35s ease}
@keyframes korb-hops{40%{transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){.korb-zahl.hops{animation:none}}
.korb2 form.korb2-stepper{flex-direction:row;height:32px;margin:0;padding:2px;box-sizing:border-box}
.korb2 form.korb2-weg{margin:0;padding:0}
.korb2-zeile{padding-right:6px}

/* ---- Rechtliches (03.10.2026) ---- */
.seitenfuss{max-width:1100px;margin:40px auto 0;padding:22px 16px 90px;border-top:1px solid var(--hairline);
  color:var(--ink-3,#8a8d94);font-size:12px;line-height:1.55;text-align:center}
.seitenfuss p{margin:6px auto;max-width:80ch}
.seitenfuss-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-bottom:8px}
.seitenfuss a{color:var(--ink-2);text-decoration:none}
.seitenfuss a:hover{text-decoration:underline}
body.markt-app .seitenfuss,body.duell-app .seitenfuss{display:none}
.seitenfuss-sozial{display:flex;justify-content:center;gap:10px;margin:4px 0 10px}
.seitenfuss .sozial-knopf{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:13.5px}
.seitenfuss .sozial-discord:hover{background:#5865f2;border-color:#5865f2;color:#fff;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Discord in den Einstellungen (05.10.2026) ---- */
.einst-block.dc-konto{display:flex;flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap;padding:16px;border-radius:14px;text-align:left;
  background:linear-gradient(0deg,rgba(88,101,242,.10),rgba(88,101,242,.10)),var(--surface);
  border:1px solid rgba(88,101,242,.45)!important}
.einst-block.dc-konto.verbunden{background:var(--surface);border-color:var(--line)!important}
.dc-konto-logo{width:52px;height:52px;border-radius:14px;background:#5865f2;color:#fff;display:grid;place-items:center;flex:none}
.dc-konto-text{flex:1;min-width:200px}
.dc-konto-text h3{margin:0 0 3px}
.dc-konto-text p{margin:0}
.dc-konto-tat{display:flex;gap:8px;align-items:center}
.dc-konto-tat form{margin:0}
.btn.dc-knopf{background:#5865f2;border-color:#5865f2;color:#fff;gap:8px;font-weight:700}
.btn.dc-knopf:hover{background:#4752c4;border-color:#4752c4}
.dc-form{display:flex;flex-direction:column;gap:14px}
.dc-schritt{display:flex;gap:12px;align-items:flex-start}
.dc-nr{width:26px;height:26px;border-radius:50%;background:var(--surface-3);color:var(--ink);
  display:grid;place-items:center;font-weight:800;font-size:13px;flex:none;margin-top:1px}
.dc-schritt-inhalt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.dc-eingabe{display:flex;gap:6px;align-items:center;margin-top:6px}
.dc-eingabe input{flex:1;min-width:0;font-size:13px}
.dc-arten{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.dc-art{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);transition:opacity .15s}
.dc-art.ist-aus{opacity:.55}
.dc-art-symbol{font-size:20px;line-height:1;width:26px;text-align:center;margin-top:2px}
.dc-art-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dc-art-text .small{line-height:1.35}
.dc-eigen summary{cursor:pointer;color:var(--ink-2);margin-top:3px;width:max-content;max-width:100%}
.dc-art.ist-aus .dc-eigen{display:none}
.dc-schalter{position:relative;flex:none;width:42px;height:24px;margin-top:2px;cursor:pointer;text-transform:none}
.dc-schalter input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.dc-schalter span[aria-hidden]{position:absolute;inset:0;border-radius:24px;background:var(--surface-3);transition:background .15s}
.dc-schalter span[aria-hidden]::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .15s}
.dc-schalter input:checked + span{background:var(--accent,#2fbf71)}
.dc-schalter input:checked + span::after{transform:translateX(18px)}
.dc-schalter input:focus-visible + span{outline:2px solid var(--accent,#2fbf71);outline-offset:2px}
.konto-recht{padding:8px 14px;color:var(--ink-3,#8a8d94);border-top:1px solid var(--hairline)}
.konto-recht a{color:var(--ink-2);text-decoration:none}
.konto-recht a:hover{text-decoration:underline}
.recht{max-width:760px;margin:0 auto;padding:10px 4px 30px;line-height:1.65}
.recht h1{font-size:30px;margin:0 0 4px}
.recht h2{font-size:18px;margin:28px 0 8px}
.recht p,.recht li{color:var(--ink-2);font-size:14.5px}
.recht ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.recht a{color:var(--accent)}
.recht-daten{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;margin:18px 0}
.recht-daten dt{color:var(--ink-3,#8a8d94);font-size:13px}
.recht-daten dd{margin:0;font-weight:600}
.agb-haken{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;
  text-transform:none;letter-spacing:0;color:var(--ink-2);cursor:pointer}
.agb-haken input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:#2fbf71}
.agb-haken a{color:var(--accent)}
.agb-schleier{position:fixed;inset:0;z-index:5000;background:rgba(5,6,8,.78);
  display:grid;place-items:center;padding:16px}
.agb-karte{width:min(460px,100%);background:var(--surface);border:1px solid var(--hairline-2);
  border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:12px}
.agb-karte h2{margin:0;font-size:22px}
.agb-karte p{margin:0}
.agb-liste{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.agb-liste a{color:var(--accent)}
.agb-karte .btn{width:100%;justify-content:center}
.agb-karte > a{text-align:center}

/* Verlauf: alle Items eines Trades im Auge (04.10.2026) */
.vf-items{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-bottom:10px}
.vf-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;
  border-radius:10px;background:var(--surface-2);border:1px solid var(--hairline);border-top:3px solid var(--c,#888)}
.vf-item-bild{width:58px;height:58px;display:grid;place-items:center}
.vf-item-bild img{max-width:100%;max-height:100%;object-fit:contain}
.vf-item-nm{font-size:12px;font-weight:700;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vf-item-menge{position:absolute;top:5px;right:7px;font-size:11px;color:var(--ink-3,#8a8d94)}

/* Markt mit ~2000 Kacheln (04.10.2026): Kacheln ausserhalb des Bildes
   zeichnet der Browser erst, wenn sie hineinrollen. Vorher baute jedes
   Neuladen alle auf - "es laggt alles". */
.markt-raster > .marktkarte{content-visibility:auto;contain-intrinsic-size:auto 260px}

/* Pets als eigene Kategorie (04.10.2026, Item.stufe): Immergruen-Blau,
   von keiner Spielstufe belegt. Chroma-Pets bleiben Regenbogen. */
:root{--r-pet:#6fa8ff}
.rar-pet{--c:var(--r-pet)}

/* ---- Die Glocke (04.10.2026, Vorbild StarPets) ----
   Eine Flaeche, eine Farbe je Zustand: gruen erledigt, rot fehlgeschlagen,
   bernstein in Pruefung. Der Knopf sieht aus wie der Warenkorbknopf daneben. */
.glocke{position:relative}
.glocke-knopf{
  position:relative; display:grid; place-items:center;
  width:34px; height:34px; border-radius:10px;
  border:1px solid var(--hairline); background:var(--surface);
  color:var(--ink-2); transition:color .15s, border-color .15s;
}
.glocke-knopf:hover,.glocke-knopf[aria-expanded="true"]{color:var(--ink); border-color:var(--hairline-2)}
.glocke-zahl{
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px;
  padding:0 4px; border-radius:99px; background:var(--bad); color:#fff;
  font-size:10.5px; font-weight:700; display:grid; place-items:center;
}
.glocke-feld{
  position:absolute; top:calc(100% + 9px); right:-90px; width:380px; z-index:2000;
  background:var(--surface-fest); border:1px solid var(--hairline-2);
  border-radius:14px; overflow:hidden;
  box-shadow:0 24px 60px -18px rgba(17,18,20,.9);
}
.glocke-inhalt{max-height:min(520px, 70vh); overflow:auto}
.glocke-kopf{display:none}
.glocke-inhalt[aria-busy="true"]{opacity:.6}
.glocke-reiter{
  position:sticky; top:0; z-index:1; display:grid; grid-template-columns:repeat(5,1fr);
  gap:4px; padding:8px; background:var(--surface-fest);
  border-bottom:1px solid var(--hairline);
}
.glocke-reiter a{
  position:relative; text-align:center; padding:8px 4px; border-radius:8px;
  font-size:13px; font-weight:600; color:var(--ink-3);
}
.glocke-reiter a:hover{color:var(--ink); background:var(--surface-2)}
.glocke-reiter a.an{color:var(--ink); background:var(--surface-2)}
.glocke-punkt{position:absolute; top:6px; right:8px; width:7px; height:7px;
  border-radius:50%; background:var(--bad)}
.glocke-liste{list-style:none; margin:0; padding:6px}
.glocke-eintrag{border-radius:10px; padding:2px 0}
.glocke-eintrag + .glocke-eintrag{border-top:1px solid var(--hairline)}
.glocke-eintrag > a:first-child{display:flex; gap:11px; padding:9px 8px; border-radius:8px; color:inherit}
.glocke-eintrag > a:first-child:hover{background:var(--surface-2)}
.glocke-eintrag.neu > a:first-child{background:color-mix(in srgb, var(--accent) 6%, transparent)}
.glocke-bild{
  position:relative; flex:0 0 44px; height:44px; border-radius:8px;
  background:var(--surface-2); display:grid; place-items:center; overflow:hidden;
  border-left:3px solid var(--ink-3);
}
.glocke-bild img{width:40px; height:40px; object-fit:contain}
.ton-ok .glocke-bild{border-left-color:var(--good)}
.ton-fehler .glocke-bild{border-left-color:var(--bad)}
.ton-warten .glocke-bild{border-left-color:var(--warn)}
.glocke-zeichen{width:12px; height:12px; border-radius:50%; background:var(--ink-3)}
.ton-ok .glocke-zeichen{background:var(--good)}
.ton-fehler .glocke-zeichen{background:var(--bad)}
.ton-warten .glocke-zeichen{background:var(--warn)}
.glocke-text{display:flex; flex-direction:column; gap:2px; min-width:0}
.glocke-text strong{font-size:13.5px; font-weight:600}
.ton-fehler .glocke-text strong{color:var(--bad)}
.ton-warten .glocke-text strong{color:var(--warn)}
.glocke-text > span{font-size:12.5px; color:var(--ink-2); line-height:1.4}
.glocke-hilfe{display:inline-block; margin:0 0 8px 63px; color:var(--accent); font-weight:600}
.glocke-leer{padding:28px 18px; text-align:center}
@media (max-width:720px){
  .glocke-feld{right:auto; left:50%; transform:translateX(-50%); width:min(380px, calc(100vw - 24px))}
}

/* Supportfenster: der Trade hinter dem Ticket als Kacheln nebeneinander
   (04.10.2026) statt "Withdrawal #399 · Carrot · under review" als Text. */
.sup-b{display:flex; flex-direction:column; gap:8px}
.sup-b-kopf{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:12.5px; color:var(--ink-2)}
.sup-b-kopf a{color:var(--accent); font-weight:600; white-space:nowrap}
.sup-b-items{display:flex; gap:6px; overflow-x:auto; padding-bottom:2px}
.sup-b-item{flex:0 0 74px; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 4px 5px; border-radius:8px; background:var(--surface-2);
  border-top:3px solid var(--c, var(--ink-3))}
.sup-b-item img{width:48px; height:48px; object-fit:contain}
.sup-b-nm{font-size:11px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sup-b-q{font-size:10.5px; color:var(--ink-3)}

/* Verlauf: die Items als Reihe von links nach rechts unter der
   Vorgangsnummer (04.10.2026), bei vielen seitlich rollbar. */
.vf-items.vf-reihe{display:flex; flex-wrap:nowrap; overflow-x:auto; gap:8px;
  margin:10px 0 0; padding-bottom:4px; grid-column:1/-1}
.vf-items.vf-reihe .vf-item{flex:0 0 96px}

/* Marktfilter ohne Rollen (04.10.2026): der schwebende Support-Knopf lag
   ueber "Vintage", und um es zu sehen musste man in der Spalte rollen.
   Etwas engere Knoepfe statt eines kleineren Support-Knopfs - je Knopf
   rund 9 px, bei 13 Stufen gut 110 px. */
@media (min-width:901px){
  body.markt-app .filterbox .chip{padding-top:4px; padding-bottom:4px; min-height:28px}
  body.markt-app .filterbox .chips{gap:5px}
  body.markt-app .filterbox .filter-titel{margin:12px 0 6px}
  body.markt-app .filterbox .filter-inhalt{padding-bottom:50px}
}

/* Verlaufsfenster: das aufgeklappte Auge bekommt eine eigene Zeile unter
   dem Posten (04.10.2026). Vorher stand das Detail IN der Zeile und
   quetschte Titel und Text auf 0 px - "hinter Items deposited steht noch
   irgendwas". Dieselbe Regel wie auf der Verlaufsseite (.history-page). */
.vf-liste .verlauf-posten{flex-wrap:wrap}
.vf-liste .vf-auge[open]{display:block; flex-basis:100%; width:100%; min-width:0}
.vf-liste .vf-detail{width:100%; box-sizing:border-box; min-width:0}
.vf-liste .vf-daten > div{display:grid; grid-template-columns:minmax(96px,max-content) minmax(0,1fr);
  gap:10px; align-items:baseline}
.vf-liste .vf-daten dd{text-align:left; overflow-wrap:anywhere; word-break:break-word}
/* Das Auge bleibt beim Aufklappen auf Hoehe der Zeile, statt in die Mitte
   des nun hohen Postens zu wandern. */
.vf-liste .vf-auge[open] > summary{top:26px}

/* Graues Kaestchen um den Korbknopf (04.10.2026): der Kachelfuss ist dort
   nur so gross wie der Knopf und trug seinen eigenen Grund - das ergab
   einen grauen Rahmen um den gruenen Knopf. */
body.markt-app .marktkarte .foot:has(.karte-korb),
.marktkarte .foot:has(.karte-korb){background:transparent; box-shadow:none; border:0}

/* ---- Battleship: Treffer, Wasser, versenkt (04.10.2026) ----
   Animiert wird nur, was NEU ist (Klasse .neu von spielraum.js) - vorher
   lief die Animation bei jedem Neuzeichnen auf allen Treffern. */
.mg-zelle.treffer, .mg-zelle.wasser::after{animation:none}
.mg-zelle.treffer{box-shadow:inset 0 0 8px rgba(0,0,0,.35)}
.mg-zelle.treffer::before{content:"✕"; position:absolute; inset:0; display:grid; place-items:center;
  color:rgba(255,255,255,.85); font-weight:900; font-size:15px}
.mg-zelle.neu.treffer{animation:mg-treffer .7s cubic-bezier(.2,.8,.2,1); z-index:2}
.mg-zelle.neu.treffer::after{content:""; position:absolute; inset:-14px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,230,140,.95) 0 18%,rgba(251,146,60,.8) 40%,rgba(220,38,38,0) 70%);
  animation:mg-explosion .7s ease-out forwards; pointer-events:none}
.mg-zelle.neu.wasser::after{animation:mg-platsch .45s ease-out}
.mg-zelle.neu.wasser::before{content:""; position:absolute; inset:2px; border-radius:50%;
  border:2px solid rgba(186,230,253,.9); animation:mg-welle .8s ease-out forwards; pointer-events:none}
.mg-zelle.versenkt{background:radial-gradient(circle,#3f0d0d 0 35%,#1f0606); filter:saturate(.7)}
.mg-zelle.neu-versenkt{animation:mg-sinkt 1.1s ease-in-out var(--v,0s) both}
.mg-feld-box{position:relative}
.mg-feld-box.bebt{animation:mg-beben .35s ease-in-out}
.mg-feld-box.bebt-stark{animation:mg-beben-stark .6s ease-in-out}
.mg-versenkt-banner{position:absolute; left:50%; top:52%; z-index:5; white-space:nowrap;
  padding:10px 22px; border-radius:12px; font-weight:900; font-size:22px; letter-spacing:.02em;
  color:#fff; background:linear-gradient(135deg,#dc2626,#7f1d1d);
  box-shadow:0 12px 40px -8px rgba(220,38,38,.75); pointer-events:none;
  animation:mg-banner 1.9s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes mg-treffer{0%{transform:scale(.3); filter:brightness(2.2)}45%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes mg-explosion{0%{transform:scale(.2); opacity:1}100%{transform:scale(1.6); opacity:0}}
@keyframes mg-welle{0%{transform:scale(.3); opacity:1}100%{transform:scale(1.9); opacity:0}}
@keyframes mg-sinkt{0%{filter:brightness(2.5) saturate(1.4)}30%{transform:scale(1.15)}
  100%{transform:scale(.88) translateY(3px); filter:saturate(.7)}}
@keyframes mg-beben{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
@keyframes mg-beben-stark{15%{transform:translate(-7px,2px) rotate(-.6deg)}30%{transform:translate(7px,-2px) rotate(.6deg)}
  45%{transform:translate(-5px,1px)}60%{transform:translate(5px,-1px)}80%{transform:translate(-2px,0)}}
@keyframes mg-banner{0%{transform:translate(-50%,-50%) scale(.3) rotate(-8deg); opacity:0}
  15%{transform:translate(-50%,-50%) scale(1.12) rotate(2deg); opacity:1}
  25%{transform:translate(-50%,-50%) scale(1) rotate(0)}
  80%{transform:translate(-50%,-50%) scale(1); opacity:1}
  100%{transform:translate(-50%,-60%) scale(.95); opacity:0}}
@media (prefers-reduced-motion:reduce){
  .mg-zelle.neu.treffer,.mg-zelle.neu.treffer::after,.mg-zelle.neu-versenkt,
  .mg-feld-box.bebt,.mg-feld-box.bebt-stark,.mg-zelle.neu.wasser::before{animation:none}
  .mg-versenkt-banner{animation:none; transform:translate(-50%,-50%)}
}

/* ---- Minigames: Recent results wie ein laufendes Duell (04.10.2026) ----
   Links und rechts je Spieler Bild, Name, Einsatz; der Gewinner mit gelbem
   Ring. Die ganze Zeile oeffnet das Spiel (Endstand und Einsaetze). */
.mg-ergebnis{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:14px;
  align-items:center; padding:12px 14px; border-radius:14px; color:inherit;
  background:var(--surface); border:1px solid var(--hairline);
  transition:border-color .15s, transform .15s}
.mg-ergebnis:hover{border-color:var(--hairline-2); transform:translateY(-1px)}
.mg-ergebnis-seite{display:flex; flex-direction:column; gap:8px; min-width:0}
.mg-ergebnis-seite.rechts{align-items:flex-end; text-align:right}
.mg-ergebnis-seite.rechts .mg-ergebnis-person{flex-direction:row-reverse}
.mg-ergebnis-seite.rechts .mg-einsatz{justify-content:flex-end}
.mg-ergebnis-person{display:flex; align-items:center; gap:10px; min-width:0}
.mg-ergebnis-person > div{display:flex; flex-direction:column; min-width:0}
.mg-ergebnis-person strong{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mg-ergebnis-bild{flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  box-shadow:0 0 0 2px var(--hairline-2)}
.mg-ergebnis-bild img,.mg-ergebnis-bild .duell-avatar{width:40px; height:40px; border-radius:50%; object-fit:cover}
.mg-ergebnis-seite.sieger .mg-ergebnis-bild{box-shadow:0 0 0 3px #facc15, 0 0 18px rgba(250,204,21,.45)}
.mg-ergebnis-seite.sieger strong{color:#facc15}
.mg-ergebnis-seite:not(.sieger){opacity:.82}
.mg-ergebnis .mg-einsatz .duell-item{width:38px; height:38px}
.mg-ergebnis-mitte{display:flex; flex-direction:column; align-items:center; gap:3px}
.mg-vs{font-weight:900; font-size:15px; color:var(--ink-3); letter-spacing:.06em}
.mg-krone{font-size:13px}
@media (max-width:640px){
  .mg-ergebnis{gap:8px; padding:10px}
  .mg-ergebnis-bild{width:36px; height:36px}
  .mg-ergebnis-bild img,.mg-ergebnis-bild .duell-avatar{width:32px; height:32px}
  .mg-ergebnis .mg-einsatz .duell-item{width:30px; height:30px}
}

/* Nachrichten: echtes Profilbild und gruener Punkt, wenn online (04.10.2026). */
.dm-kreis{position:relative; overflow:visible}
.dm-kreis img{width:100%; height:100%; border-radius:inherit; object-fit:cover; display:block}
.dm-online{position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%;
  background:#22c55e; box-shadow:0 0 0 2px var(--surface-fest, #17181a)}
.dm-kreis.gross .dm-online{width:13px; height:13px}
.dm-online-text{color:#22c55e; font-weight:600}
.dm-zeile.vorab{opacity:.65}

/* ---- Profilkarte im Chat (04.10.2026, wie bei Twitch) ---- */
.chat-name{background:none; border:0; padding:0; font:inherit; font-weight:700; cursor:pointer; color:inherit}
.chat-name[data-profil]:hover{text-decoration:underline}
.chat-bild[data-profil]{cursor:pointer}
.profil-karte{position:fixed; z-index:3000; padding:14px; border-radius:16px;
  background:var(--surface-fest, #17181a); border:1px solid var(--hairline-2);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.85); display:flex; flex-direction:column; gap:12px;
  animation:pk-auf .16s ease-out}
@keyframes pk-auf{from{opacity:0; transform:translateY(6px) scale(.98)}to{opacity:1; transform:none}}
.pk-laedt{padding:18px; text-align:center; color:var(--ink-3)}
.pk-zu{position:absolute; top:6px; right:8px; background:none; border:0; color:var(--ink-3);
  font-size:22px; cursor:pointer; line-height:1}
.pk-kopf{display:flex; align-items:center; gap:12px; padding-right:18px}
.pk-kopf > div{display:flex; flex-direction:column; min-width:0}
.pk-kopf strong{font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pk-bild{position:relative; flex:none; width:54px; height:54px; border-radius:50%;
  background:var(--surface-2); display:grid; place-items:center}
.pk-bild img,.pk-bild .avatar-standard{width:54px; height:54px; border-radius:50%; object-fit:cover; display:block}
.pk-online{position:absolute; right:1px; bottom:1px; width:13px; height:13px; border-radius:50%;
  background:#22c55e; box-shadow:0 0 0 2px var(--surface-fest, #17181a)}
.pk-online-text{color:#22c55e; font-weight:600}
.pk-zahlen{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.pk-zahlen > div{display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px;
  border-radius:10px; background:var(--surface-2)}
.pk-zahlen b{font-size:16px}
.pk-zahlen small{font-size:11px; color:var(--ink-3); font-weight:600}
.pk-zahlen span{font-size:11px; color:var(--ink-3)}
.pk-abschnitt{margin-bottom:-6px}
.pk-items{display:flex; gap:6px; flex-wrap:wrap}
.pk-item{position:relative; width:40px; height:40px; border-radius:9px; background:var(--surface-2);
  border-top:2px solid var(--c, var(--ink-3)); display:grid; place-items:center}
.pk-item img{width:34px; height:34px; object-fit:contain}
.pk-item b{position:absolute; right:2px; bottom:0; font-size:9.5px; color:var(--ink-2)}
.pk-schreiben{justify-content:center; width:100%}

/* ---- Admin-Dashboard (05.10.2026) ---- */
.db-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.db-aktionen{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.db-zeitraum{display:flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px}
.db-zeitraum a{padding:6px 11px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-size:13px;font-weight:600}
.db-zeitraum a.an{background:var(--surface-3);color:var(--ink)}
.db-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.db-kachel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px}
.db-kachel strong{font-size:28px;font-variant-numeric:tabular-nums;color:var(--ink)}
.db-gewinn{grid-column:span 2;border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.db-gewinn strong{font-size:36px;color:var(--accent)}
.db-label{font-size:12px;font-weight:700;color:var(--ink-2);letter-spacing:.02em}
.db-fein{font-size:12.5px;color:var(--ink-2)}
.db-warn{color:var(--warn)}
.db-diagramme{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-bottom:16px}
.db-diagramm{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px 10px}
.db-diagramm figcaption{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;font-size:13px;color:var(--ink-2);font-weight:600}
.db-diagramm figcaption strong{color:var(--ink);font-size:16px;font-variant-numeric:tabular-nums}
.db-diagramm svg{width:100%;height:110px;display:block;overflow:visible}
.db-achse{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.db-wert{fill:var(--accent);rx:.6}
.db-treffer{fill:transparent}
.db-saeule:hover .db-wert{fill:color-mix(in srgb,var(--accent) 70%,#fff)}
.db-saeule:hover .db-treffer{fill:color-mix(in srgb,var(--ink) 6%,transparent)}
.db-skala{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3,var(--ink-2));margin-top:6px;font-variant-numeric:tabular-nums}
.db-zwei{display:grid;grid-template-columns:1.6fr 1fr;gap:12px}
.db-tabelle .r{text-align:right}
@media (max-width:760px){
  .db-gewinn{grid-column:auto}
  .db-zwei{grid-template-columns:1fr}
  .db-kachel strong{font-size:24px}
}

/* ---- Info & Rules: alles Rechtliche auf einer Seite (05.10.2026) ---- */
.recht-seite{max-width:860px;margin:0 auto}
.recht-reiter{display:flex;gap:4px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px;margin:6px 0 22px}
.recht-reiter a{flex:1 1 auto;text-align:center;padding:8px 12px;border-radius:9px;color:var(--ink-2);text-decoration:none;font-weight:700;font-size:13.5px}
.recht-reiter a.an{background:var(--surface-3);color:var(--ink)}
.recht-held h1{font-size:32px;margin:0 0 6px}
.recht-kurz{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:18px 0 34px}
.recht-kurz div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 14px;display:flex;flex-direction:column;gap:4px}
.recht-kurz strong{font-size:14.5px;color:var(--ink)}
.recht-kurz span{font-size:13px;color:var(--ink-2);line-height:1.45}
.recht-seite .recht{max-width:none;padding-left:0;padding-right:0}
.recht-seite .recht + .recht{border-top:1px solid var(--line);margin-top:26px;padding-top:26px}
.recht-seite .recht{scroll-margin-top:90px}
@media (max-width:760px){.recht-reiter a{flex:1 1 40%}}
.geld-zustimmung{display:flex;gap:9px;align-items:flex-start;margin:4px 0 10px;font-size:12.5px;line-height:1.45;color:var(--ink-2);text-transform:none;letter-spacing:0;font-weight:500;cursor:pointer}
.geld-zustimmung input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--accent)}
.geld-zustimmung a{color:var(--ink);text-decoration:underline}
.name-karte .name-feld{width:100%;font-size:16px;padding:11px 12px}

/* ---- Roter Hinweis: Roblox noch nicht verknuepft (05.10.2026) ---- */
.rbx-hinweis{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;
  background:#b3261e;color:#fff;font-size:14px;font-weight:600;padding:8px 16px;text-align:center}
.rbx-hinweis a{color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.rbx-hinweis a:hover{text-decoration-thickness:2px}
.rbx-fenster{display:flex;flex-direction:column;gap:12px;padding:4px 2px}
.rbx-fenster h2{margin:0;font-size:22px}
.rbx-fenster > p{margin:0}
.rbx-zustimmung{margin:4px 0 10px}
#rbx-feld:disabled{opacity:.55;cursor:not-allowed}
@media (max-width:760px){.rbx-hinweis{font-size:13px;padding:7px 12px;border-radius:10px;margin:0 2px 6px}}
.agb-haken input[type=checkbox],.geld-zustimmung input[type=checkbox]{appearance:auto;-webkit-appearance:checkbox;padding:0;border:0;background:none;box-shadow:none;min-height:0}

/* ---- Minigames: Einsatz groesser, Ergebnisse umschaltbar, Rekord (05.10.2026) ---- */
.mg-einsatz .duell-item,.mg-pot .duell-item{width:64px;height:64px}
.mg-ergebnis .mg-einsatz .duell-item{width:56px;height:56px}
.duell-item[class*="rar-"]{border-color:color-mix(in srgb,var(--c,#888) 55%,transparent);
  background:color-mix(in srgb,var(--c,#888) 12%,var(--surface-2))}
.duell-item[class*="rar-"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c,#888)}
.duell-item b{font-size:11px;padding:1px 5px;bottom:5px;right:3px}
.mg-ergebnis-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px}
.mg-ansicht{display:flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px}
.mg-ansicht a{padding:6px 12px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-weight:700;font-size:13px}
.mg-ansicht a.an{background:var(--surface-3);color:var(--ink)}
.mg-sieg-marke{display:inline-block;width:max-content;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#1b1300;background:#facc15;border-radius:5px;padding:1px 6px;margin-top:2px}
.mg-ergebnis-seite.rechts .mg-sieg-marke{align-self:flex-end}
.mg-rekord{border:1px solid color-mix(in srgb,#facc15 45%,var(--line));border-radius:14px;background:color-mix(in srgb,#facc15 5%,var(--surface));margin:10px 0 12px}
.mg-rekord summary{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none}
.mg-rekord summary::-webkit-details-marker{display:none}
.mg-rekord-titel{font-weight:800;color:#facc15;white-space:nowrap}
.mg-rekord-kurz{color:var(--ink-2);font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-rekord-pfeil{transition:transform .2s;color:var(--ink-2)}
.mg-rekord[open] .mg-rekord-pfeil{transform:rotate(180deg)}
.mg-rekord .mg-verlauf{padding:0 10px 10px}
@media (max-width:760px){
  .mg-einsatz .duell-item,.mg-pot .duell-item{width:52px;height:52px}
  .mg-ergebnis .mg-einsatz .duell-item{width:42px;height:42px}
  .mg-rekord-kurz{white-space:normal}
}
.sup-knopf .sup-kurz{display:none}

/* ---- Shop-Seite und "Share your shop" (05.10.2026) ---- */
.shop-seite{max-width:1180px;margin:0 auto;width:100%;box-sizing:border-box}
/* Vier je Reihe am PC (05.10.2026) - ohne width:100% schrumpfte die Seite
   auf ihren Kopf, und das Raster hatte Platz fuer genau eine Spalte. */
.shop-seite .shop-raster{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.shop-seite .shop-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.shop-seite .shop-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
button.karte-link{background:none;border:0;padding:0;cursor:pointer;width:100%;height:100%}
@media (max-width:700px){.shop-name h1{font-size:21px;white-space:normal;word-break:break-word}
  .shop-aktionen{width:100%}.shop-aktionen .btn{flex:1}}
.shop-kauf{width:min(380px,calc(100vw - 32px));border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);padding:20px;box-sizing:border-box}
.shop-kauf::backdrop{background:rgba(0,0,0,.6)}
.shop-kauf form{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;text-align:center}
.shop-kauf-zu{position:absolute;top:-8px;right:-6px;background:none;border:0;color:var(--ink-2);font-size:26px;cursor:pointer;line-height:1}
.shop-kauf-bild{width:100%;height:170px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--c,#888) 8%,var(--surface-2));border-top:3px solid var(--c,#888)}
.shop-kauf-bild img{max-width:130px;max-height:130px;object-fit:contain}
.shop-kauf h2{margin:4px 0 0;font-size:20px}
.shop-kauf p{margin:0}
.shop-kauf-menge{display:flex;gap:6px;align-items:center}
.shop-kauf-menge input{width:72px;text-align:center}
.shop-kauf-menge .btn{width:38px;padding:6px 0}
.shop-kauf-summe{font-size:15px}
.shop-kauf-summe strong{font-size:20px;margin-left:6px}
.shop-kauf-knoepfe{display:flex;gap:8px;width:100%}
.shop-kauf-knoepfe .btn{flex:1}
.shop-kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 16px}
.shop-bild{position:relative;width:64px;height:64px;flex:none}
.shop-bild img,.shop-bild .avatar-standard{width:64px;height:64px;border-radius:50%;display:block;background:var(--surface-2)}
.shop-bild .dm-online{position:absolute;right:2px;bottom:2px}
.shop-name{flex:1;min-width:0}
.shop-name h1{margin:0;font-size:26px;overflow:hidden;text-overflow:ellipsis}
.shop-name p{margin:2px 0 0}
.shop-aktionen{display:flex;gap:8px}
.shop-reiter{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:16px;width:max-content;max-width:100%}
.shop-reiter a{padding:8px 14px;border-radius:9px;color:var(--ink-2);text-decoration:none;font-weight:700;font-size:14px}
.shop-reiter a.an{background:var(--surface-3);color:var(--ink)}
.shop-teilen{display:flex;flex-direction:column;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin:0 0 14px}
.shop-teilen > div:first-child{display:flex;flex-direction:column;gap:2px}
.shop-teilen-link{display:flex;gap:6px;align-items:center}
.shop-teilen-link input{flex:1;min-width:0;font-size:13px;padding:7px 9px}
.gs-stats .shop-teilen{margin:14px 0 0}

/* ---- Discord-Kanaele je Art (05.10.2026) ---- */
.discord-kanaele{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.discord-kanal{display:grid;grid-template-columns:minmax(150px,210px) 1fr auto;gap:10px;align-items:center;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.discord-kanal-kopf{display:flex;flex-direction:column;gap:2px;min-width:0}
.discord-kanal-kopf .small{line-height:1.35}
.discord-kanal input{min-width:0;font-size:13px}
.discord-kanal-tat{display:flex;gap:6px}
.discord-speichern{align-self:flex-start}
@media (max-width:760px){.discord-kanal{grid-template-columns:1fr}}
.einst-block form.discord-kanaele{padding:0;margin:10px 0 0;border:0;background:none}
/* Discord-Reiter: nichts darf die Spalte breiter machen als das Fenster -
   das Raster nimmt sonst die Mindestbreite des laengsten Inhalts. */
.einst-blaetter,.einst-blatt,.einst-block.dc-konto{min-width:0;max-width:100%;box-sizing:border-box}
.dc-konto-text{min-width:0;flex:1 1 180px}

/* ---- Freundschaftsanfrage an den Bot (05.10.2026) ---- */
.freund-fenster{width:min(430px,calc(100vw - 32px));border:1px solid var(--line);border-radius:20px;
  background:var(--surface);color:var(--ink);padding:24px 22px 20px;box-sizing:border-box;text-align:center}
.freund-fenster::backdrop{background:rgba(0,0,0,.62)}
.freund-zu{position:absolute;top:10px;right:12px;margin:0}
.freund-zu button{background:none;border:0;color:var(--ink-2);font-size:26px;cursor:pointer;line-height:1}
.freund-bilder{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px 0 14px}
.freund-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--surface-2);
  border:2px solid var(--line);display:grid;place-items:center}
.freund-avatar img,.freund-avatar .avatar-standard{width:100%;height:100%;object-fit:cover;display:block}
.freund-bot{border-color:#5865f2}
.freund-pfeil{display:flex;gap:5px}
.freund-pfeil i{width:7px;height:7px;border-radius:50%;background:var(--accent,#2fbf71);opacity:.25;
  animation:freund-puls 1.2s infinite}
.freund-pfeil i:nth-child(2){animation-delay:.2s}.freund-pfeil i:nth-child(3){animation-delay:.4s}
@keyframes freund-puls{50%{opacity:1;transform:scale(1.25)}}
.freund-fenster.angenommen .freund-pfeil i{animation:none;opacity:1}
.freund-titel{margin:0 0 6px;font-size:20px}
.freund-text{margin:0 0 14px;font-size:14px}
.freund-schritte{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.freund-schritte li{display:flex;gap:10px;align-items:center;background:var(--surface-2);border-radius:12px;padding:9px 12px;font-size:14px}
.freund-schritte li span{flex:none;width:22px;height:22px;border-radius:50%;background:var(--surface-3);
  display:grid;place-items:center;font-weight:800;font-size:12px}
.freund-stand{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;margin-bottom:14px;color:var(--ink-2)}
.freund-punkt{width:9px;height:9px;border-radius:50%;background:#f5b942;animation:freund-puls 1.2s infinite;flex:none}
.freund-stand[data-stand="angenommen"]{color:var(--accent,#2fbf71);font-weight:700}
.freund-stand[data-stand="angenommen"] .freund-punkt{background:var(--accent,#2fbf71);animation:none}
.freund-stand[data-stand="fehler"]{color:#e5484d}
.freund-stand[data-stand="fehler"] .freund-punkt{background:#e5484d;animation:none}
.freund-knoepfe{display:flex;gap:8px}
.freund-knoepfe .btn{flex:1}
.freund-schritte li p{margin:0}
.freund-stand[data-stand="pruefen"] .freund-punkt{background:#5865f2}
.freund-stand[data-stand="hinweis"]{color:#f5b942}
.losgehen-knoepfe{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---- 1v1: Wartezimmer, Paarungswahl (05.10.2026) ----
   Ruhig wie der Rest: eine Flaeche, eine Farbe je Rolle, kein Glow. */
.modus-symbole{display:inline-flex;align-items:center;gap:6px;font-size:22px;line-height:1}
.modus-symbole i{font:800 10px var(--mono,monospace);font-style:normal;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em}

.arena{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;
  align-items:stretch;padding:22px;margin-bottom:12px}
.arena-spieler{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:20px 14px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);min-width:0}
.arena-spieler.ich{border-color:color-mix(in srgb,var(--accent,#2fbf71) 45%,var(--line))}
.arena-bild{position:relative;width:88px;height:88px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--surface-3);display:grid;place-items:center;border:3px solid var(--surface-3)}
.arena-spieler.ich .arena-bild{border-color:var(--accent,#2fbf71)}
.arena-bild img,.arena-bild .avatar-standard{width:100%;height:100%;object-fit:cover;display:block}
.arena-bild.wartet{overflow:visible;background:transparent;border:2px dashed var(--ink-3)}
.arena-frage{font:800 34px/1 var(--font,inherit);color:var(--ink-3)}
.arena-ring{position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--accent,#2fbf71);
  opacity:0;animation:arena-puls 2s ease-out infinite}
@keyframes arena-puls{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.25);opacity:0}}
.arena-name{font-size:18px;margin-top:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arena-spieler.frei .arena-name{color:var(--ink-2);white-space:normal}
.arena-unter{font-size:12.5px;color:var(--ink-3)}
.arena-items{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
.arena-item{position:relative;width:52px;height:52px;border-radius:10px;background:var(--surface);
  border:1px solid var(--line);border-top:3px solid var(--c,#888);display:grid;place-items:center}
.arena-item img{max-width:40px;max-height:40px;object-fit:contain}
.arena-item b{position:absolute;right:2px;bottom:1px;font-size:10px;background:var(--surface-3);
  border-radius:6px;padding:0 4px}
.arena-wert{font-size:13px;color:var(--ink-2);margin-top:4px}
.arena-punkte{display:flex;gap:5px;margin-top:6px}
.arena-punkte i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);opacity:.3;
  animation:freund-puls 1.2s infinite}
.arena-punkte i:nth-child(2){animation-delay:.2s}.arena-punkte i:nth-child(3){animation-delay:.4s}
.arena-mitte{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;min-width:150px}
.arena-mitte .modus-symbole{font-size:30px}
.arena-vs{font-weight:900;font-size:26px;letter-spacing:.04em;color:var(--ink)}
.arena-modus{font-size:15px}
.arena-hinweis{margin:0 4px 12px;line-height:1.5}
.arena-abbrechen{margin-bottom:14px}
@media (max-width:700px){
  .arena{grid-template-columns:1fr;padding:14px;gap:10px}
  .arena-mitte{flex-direction:row;flex-wrap:wrap;gap:8px 10px;min-width:0}
  .arena-mitte .arena-unter{flex-basis:100%}
  .arena-bild{width:72px;height:72px}
}

/* Gegenueber (nach dem Beitritt) mit Profilbildern */
.gegenueber .seite{align-items:flex-start}
.seite-bild{width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--surface-3);
  display:block;margin-bottom:4px}
.seite-bild img,.seite-bild .avatar-standard{width:100%;height:100%;object-fit:cover;display:block}

/* Paarungswahl: Symbole oben, normale Schrift statt GROSS und gesperrt
   (die allgemeine label-Regel schrieb alles in Versalien). */
.duell-dialog .duell-szene{height:180px}
.duell-dialog .modi{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.duell-dialog .modus-karte,.duell-dialog .modus-karte *{text-transform:none;letter-spacing:normal}
.duell-dialog .modus-karte .inhalt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  min-height:0;padding:14px 14px 13px;position:relative;border-top:3px solid var(--modus-farbe,var(--line))}
.duell-dialog .modus-karte.modus-sm{--modus-farbe:var(--sheriff)}
.duell-dialog .modus-karte.modus-sm .inhalt{border-image:linear-gradient(90deg,var(--sheriff) 50%,var(--moerder) 50%) 1 0 0 0}
.duell-dialog .modus-karte.modus-mm{--modus-farbe:var(--moerder)}
.duell-dialog .modus-karte.modus-ss{--modus-farbe:var(--sheriff)}
.duell-dialog .modus-karte.modus-beide{--modus-farbe:#f5b942}
.duell-dialog .modus-karte.modus-zufall{--modus-farbe:var(--accent,#2fbf71)}
.duell-dialog .modus-karte .modus-symbole{font-size:24px;margin-bottom:6px}
.modus-titel{font-weight:800;font-size:15.5px;color:var(--ink);line-height:1.25}
.duell-dialog .modus-kurz{font:700 11px var(--mono,monospace);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.modus-text{font-size:13px;color:var(--ink-2);line-height:1.4;margin-top:2px}
.modus-haken{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;
  background:var(--accent,#2fbf71);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:900;
  opacity:0;transform:scale(.6);transition:.15s}
.duell-dialog .modus-karte input:checked + .inhalt .modus-haken{opacity:1;transform:none}
.duell-dialog .modus-karte input:checked + .inhalt{background:color-mix(in srgb,var(--accent,#2fbf71) 8%,var(--surface-2));
  border-color:var(--accent,#2fbf71);box-shadow:0 0 0 1px var(--accent,#2fbf71)}
.duell-trenner .modus-symbole{font-size:18px}

/* Freundes-Fenster: verschwommener Hintergrund wie die anderen Fenster,
   Profilbilder immer auf fester Flaeche. */
.freund-fenster::backdrop{background:rgba(6,8,12,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.freund-avatar{background:var(--surface-3);position:relative;font-size:30px}
.freund-avatar img{position:absolute;inset:0}
.dep-avatar{position:relative;overflow:hidden}
.dep-avatar img{position:absolute;inset:0}
.modus-text{font-weight:500}

/* ── Einsatzwahl: Knopfleiste bleibt stehen (05.10.2026) ─────────────
   Auto-select setzte eine Hinweiszeile ein und hakte Kacheln an - alles
   darunter rutschte, und "Join" lag unter dem Fensterrand. Wertzeile und
   Knopfleiste kleben jetzt unten im Fenster, egal wie viel darueber steht.
   Die Hinweiszeile hat ihren Platz von Anfang an (kein Springen). */
dialog.duell-katalog{--fuss-h:62px}
dialog.duell-katalog .overlay-fuss{position:sticky; bottom:-20px; z-index:4; margin:0 -24px -20px;
  padding:12px 24px 18px; background:var(--surface,#16181d); border-top:1px solid var(--hairline,rgba(255,255,255,.08))}
.einsatz-auto{white-space:nowrap}
dialog.duell-katalog .einsatz-wertzeile{position:sticky; bottom:calc(var(--fuss-h) - 20px); z-index:4; margin:0 -24px;
  padding:9px 24px; background:var(--surface,#16181d)}
dialog.duell-katalog .einsatz-auto-hinweis{min-height:1.4em; margin:4px 0 0}
dialog.duell-katalog .einsatz-auto-hinweis[hidden]{display:block; visibility:hidden}

/* ── Paarung als Text (05.10.2026) ─────────────────────────────────────
   Ersetzt die Emoji-Symbole. Normale Schrift, keine Versalien, die Rollen
   in ihren Spielfarben. */
.modus-rollen{display:inline-flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  font:700 15px/1.25 "Nunito",system-ui,sans-serif; letter-spacing:0; text-transform:none; white-space:nowrap}
.modus-rollen b{font-weight:800}
.modus-rollen i{font-style:normal; font-weight:600; font-size:.82em; color:var(--ink-3)}
.modus-rollen .rolle-s{color:#6fb3ff}
.modus-rollen .rolle-m{color:#ff6b6b}
.modus-rollen .rolle-b{color:#f5b942}
.modus-rollen .rolle-z{color:var(--accent,#2fbf71)}
.modus-rollen.gross{font-size:20px; justify-content:center}
.modus-symbole{display:none}

/* Wahlkarten: Titel + ein Satz, sonst nichts. */
.duell-dialog .modus-karte .inhalt{gap:6px; min-height:0; padding:14px 16px}
.duell-dialog .modus-karte .modus-titel{display:block; padding-right:26px}
.duell-dialog .modus-karte .modus-titel .modus-rollen{font-size:16px}
.duell-dialog .modus-kurz{display:none}

/* Liste: die Paarung als ruhige Pille zwischen den Spielern. */
.duell-trenner{gap:0}
.duell-trenner .modus-rollen{padding:6px 12px; border-radius:999px; font-size:13.5px;
  background:var(--surface-2,#1d2026); border:1px solid var(--hairline,rgba(255,255,255,.08))}
.arena-mitte{gap:10px}

@media (max-width:620px){
  /* Am Handy ohne Szenenbild, Karten kompakt in einer Spalte. */
  .duell-dialog .duell-szene{display:none}
  .duell-dialog .modi{gap:8px; margin:12px 0 14px}
  .duell-dialog .modus-karte .inhalt{padding:12px 14px}
  .duell-dialog .modus-text{font-size:12.5px}
  .modus-rollen.gross{font-size:17px}
}

/* ── 1v1 am Handy: aufgeraeumt (05.10.2026) ────────────────────────── */
.laufendes > span:nth-child(2){display:flex; flex-direction:column; gap:2px; min-width:0}
@media (max-width:760px){
  .duell-haupt .mg-kopf > div:first-child p{display:none}
  .duell-haupt .mg-kopf{gap:10px; margin-bottom:10px}
  .duell-haupt .bilanz > div{padding:6px 14px}
  .duell-haupt .bilanz .zahl{font-size:18px}
  .duellkarte{padding:12px; gap:10px}
  .duellkarte .duellspieler{border:0; padding:0; background:none}
  .duellkarte .duellprofil img,.duellkarte .duell-avatar{width:36px; height:36px}
  .duellkarte .duellprofil .lbl{display:none}
  .duellkarte .duell-trenner{justify-content:flex-start}
  /* Freier Platz = nur noch der Join-Knopf, volle Breite. */
  .duellspieler.frei > .duell-avatar,
  .duellspieler.frei > div:not(.duell-aktion){display:none}
  .duellspieler.frei .duell-aktion{margin:0; width:100%}
  .duellspieler.frei .duell-aktion .btn,.duellspieler.frei .duell-aktion form{width:100%}
}

/* Admin: Ticketverlauf am Duell (05.10.2026) */
.adm-duell-chat{margin-top:12px; padding:12px 14px; border:1px solid var(--hairline,rgba(255,255,255,.08));
  border-radius:10px; background:var(--surface-2,#1d2026); display:grid; gap:8px}
.adm-duell-chat-kopf{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.adm-duell-chat-kopf .btn{margin-left:auto}
.adm-duell-zeile{margin:0; font-size:13.5px; line-height:1.45; white-space:pre-wrap}

/* Duellraum: Stand der Server-Freigabeliste (05.10.2026) */
.serverliste{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700}
.serverliste.ok{color:var(--accent,#2fbf71)}
.serverliste.wartet{color:var(--ink-2)}
.serverliste .punkt{width:9px; height:9px; border-radius:50%; background:#f5b942;
  animation:sl-puls 1.2s ease-in-out infinite}
@keyframes sl-puls{50%{opacity:.35}}

/* Verlustfenster zweistufig: erst Fair/Report, dann die Warnung */
.verlustfenster .verlust-schritt2{display:none}
.verlustfenster form.melden .verlust-schritt1{display:none}
.verlustfenster form.melden .verlust-schritt2{display:block}
.verlustfenster .verlust-warnung{line-height:1.5}

/* Duellraum ab "bereit": Spieler + Einsatz je Seite in einer Karte (05.10.2026) */
.arena-pot-kopf{margin:4px 0 8px; display:flex; gap:8px; align-items:baseline; color:var(--ink-2); font-weight:700}
.arena-voll .arena-spieler{border:1px solid var(--hairline,rgba(255,255,255,.08)); border-radius:14px;
  padding:16px 12px; background:var(--surface-2,#1d2026)}
.arena-voll .arena-spieler.rolle-sheriff{border-color:color-mix(in srgb,var(--sheriff) 55%,transparent)}
.arena-voll .arena-spieler.rolle-moerder{border-color:color-mix(in srgb,var(--moerder) 55%,transparent)}
.arena-voll .rolle-marke{align-self:center}
/* Ersatzbild hinter Bot-Bildern (statt Roboter-Emoji) */
.dep-avatar > .avatar-standard,.freund-bot > .avatar-standard,.bot-bild > .avatar-standard{
  position:absolute; inset:0; width:100%; height:100%; border-radius:inherit}
.dep-avatar,.freund-bot,.bot-bild{position:relative; overflow:hidden}
.dep-add svg,.sup-f-klammer svg{display:block}
.einzahl-symbol svg{display:block}

/* ===== Marktkarte im Ladenstil (06.10.2026) =====
   Wunsch des Betreibers, "ein bisschen orientiert an Bloxymarket": Stufe
   als Pille oben links, ein leichter Schein der Stufenfarbe hinter dem
   Item, unten EINE Leiste mit Preis-Pille und grossem gruenen Korbknopf.
   Der alte Knopf (32 px) wurde uebersehen. Nur Markt-Kacheln. */
.markt-raster .marktkarte{
  background:#12161c; border:1px solid #1f2630; border-radius:14px;
  transition:border-color .15s, transform .15s;
}
.markt-raster .marktkarte:hover{border-color:color-mix(in srgb,var(--c) 55%,#1f2630); transform:translateY(-2px)}
.markt-raster .marktkarte .top{display:none}
.markt-raster .marktkarte .bild{
  position:relative;
  background:radial-gradient(60% 55% at 50% 55%, color-mix(in srgb,var(--c) 22%,transparent), transparent 75%), #151a22 !important;
  border-bottom:1px solid #1f2630;
}
.markt-raster .marktkarte .stufe-pille{
  position:absolute; left:9px; top:9px; z-index:2;
  font:800 10px/1 Nunito,system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c); padding:4px 8px; border-radius:999px;
  background:color-mix(in srgb,var(--c) 14%,#0d1117);
  border:1px solid color-mix(in srgb,var(--c) 40%,transparent);
}
.markt-raster .marktkarte.rar-chroma .stufe-pille{
  background:linear-gradient(90deg,#ff5f6d33,#ffc37133,#47e6a133,#5b8cff33,#c86bff33),#0d1117;
  border-color:#ffffff30; color:#fff;
}
.markt-raster .marktkarte .body{padding:10px 12px 4px; gap:4px}
.markt-raster .marktkarte .nm{font-size:15px; font-weight:800}
.markt-raster .marktkarte .wert-zeile:empty{display:none}
.markt-raster .marktkarte .foot.kauf-leiste{
  position:static; display:flex; align-items:center; gap:8px;
  margin:6px 10px 10px; padding:5px 5px 5px 12px !important; min-height:0;
  background:#0d1117 !important; border:1px solid #1f2630 !important;
  border-radius:12px; box-shadow:none !important;
}
.markt-raster .marktkarte .preis-pille{display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.1}
.markt-raster .marktkarte .preis-pille .ab{
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.markt-raster .marktkarte .preis-pille .price{font-size:17px; font-weight:800; color:#fff}
.markt-raster .marktkarte .karte-korb{margin:0}
.markt-raster .marktkarte .karte-korb-knopf{
  width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:#2fbf71; border:0; color:#0b130e;
  box-shadow:0 0 0 1px #3fd583 inset;
}
.markt-raster .marktkarte .karte-korb-knopf svg{width:22px; height:22px}
.markt-raster .marktkarte .karte-korb-knopf:hover{background:#3fd583; transform:scale(1.05)}
.markt-raster .marktkarte .karte-korb-knopf.drin{background:#1f8f53; color:#eafff2}
.markt-raster .marktkarte .kauf-leiste .pfeil{
  width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:#171d26; color:var(--muted);
}
.markt-raster .marktkarte.ohne-angebot .preis-pille{min-height:34px; justify-content:center}
@media (max-width:760px){
  .markt-raster .marktkarte .foot.kauf-leiste{margin:4px 7px 7px; padding:4px 4px 4px 9px !important}
  .markt-raster .marktkarte .karte-korb-knopf,
  .markt-raster .marktkarte .kauf-leiste .pfeil{width:40px; height:40px}
  .markt-raster .marktkarte .preis-pille .price{font-size:15px}
  .markt-raster .marktkarte .stufe-pille{font-size:9px; padding:3px 6px; left:6px; top:6px}
}
.markt-raster .marktkarte .body{background:transparent !important}
.markt-raster .marktkarte{background:#12161c !important}
/* Profilkarte im Chat: Name fuehrt in den Shop (06.10.2026) */
.profil-karte .pk-name{color:inherit; text-decoration:none}
.profil-karte .pk-name:hover strong{color:#2fbf71; text-decoration:underline}
.profil-karte .pk-knoepfe{display:flex; gap:8px; margin-top:10px}
.profil-karte .pk-knoepfe .btn{flex:1; justify-content:center; margin:0}
/* "Make an offer" in den Nachrichten liess sich nicht rollen (05.10.2026):
   die Rollregeln oben haengen an #gform (Buy-offer-Fenster), das
   Angebotsformular heisst #ang-schritt2 - der Katalog wuchs ueber das
   Fenster hinaus und wurde abgeschnitten. Dieselben Regeln auch dort; nur
   wenn es sichtbar ist, sonst hebelt display:flex das hidden aus. */
.gfenster[open] #ang-schritt2:not([hidden]){flex:1 1 auto; min-height:0; max-height:none;
  display:flex; flex-direction:column}
.gfenster[open] #ang-schritt2 .gf-koerper{flex:1 1 auto; min-height:0}
.gfenster[open] #ang-schritt2 .gf-fuss{flex:none}
@media (max-width:760px){
  .gfenster[open] #ang-schritt2 .gf-koerper{display:flex; flex-direction:column; overflow-y:auto}
}
/* Shop-Link nur so breit wie der Name (06.10.2026): in der Flex-Spalte
   streckte sich der Link sonst ueber die ganze Kartenbreite. */
.profil-karte .pk-kopf .pk-name{align-self:flex-start; max-width:100%; display:block; overflow:hidden}
.profil-karte .pk-kopf .pk-name strong{display:block}

/* ===== Spielplatz-Look (06.10.2026) =====
   Rueckmeldung: "sieht nach KI aus - mach es wie Bloxymarket, StarPets,
   BloxChance: einfach, cool, fuer Kinder gut zu benutzen". Was den KI-Eindruck
   machte: graues Einheitsschwarz, Kaesten in Kaesten mit duennen Rahmen und
   ueberall kleine gesperrte Versal-Labels (PRICE EACH, FROM, SORT).
   Die Vorbilder: Marineblau statt Grau, runde fette Spielschrift (Fredoka),
   Flaechen statt Rahmen, und wenige kraeftige Knoepfe mit 3D-Kante zum
   Draufdruecken. Blau = Navigation/Auswahl, Gruen = kaufen/Geld.
   Steht am Ende und gewinnt; Logik und Vorlagen bleiben unveraendert. */
:root{
  --ground:#0c1120; --surface:#141b2d; --surface-2:#1b2439; --surface-3:#25304b;
  --hairline:#212b44; --hairline-2:#2e3a5a;
  --ink:#f4f7ff; --ink-2:#9daccc; --ink-3:#5d6b8c; --muted:var(--ink-2);
  --card:var(--surface); --line:var(--hairline);
  --blau:#3d7bff; --blau-tief:#2453c4; --blau-hell:#5a91ff;
  --gruen:#21c25e; --gruen-tief:#138a3f; --gruen-hover:#2bd46b;
  --accent:var(--gruen); --accent-ink:#fff;
  --spiel:"Fredoka","Nunito",system-ui,sans-serif;
  --mono:"Nunito",system-ui,sans-serif;
  --r:14px;
}
body{background:var(--ground); font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:600; color:var(--ink)}
h1,h2,h3,.brand,.nm,.price,.btn,button,.mschalter,nav a.link{font-family:var(--spiel)}
h1{font-weight:700; letter-spacing:0} h2,h3{font-weight:600; letter-spacing:0}
.mono{font-family:"Nunito",system-ui,sans-serif; font-weight:800}

/* Kleine Ueberschriften: normal geschrieben, nicht gesperrt, nicht GROSS.
   Die Stufen-Pille an der Kachel bleibt gross - die ist ein Abzeichen. */
label,th,.filter-titel,.marktflaeche .filter-titel,.markt-raster .marktkarte .preis-pille .ab,
.marktkarte .ab,.sort-wahl-text,.bilanz .lbl,.ergebnis .lbl,.einsatz-kurz .lbl,.pot-kopf .lbl,
.gegenueber .seite .lbl,.konto-zahlen dt,.markt-zahlen dt,.sp-marke dt,.kz-schild,.vk-tabelle th,
.verlauf-zustand span,.mg-art,.mg-reiter .marke,.sup-f-frage,.oder,.v-art,.dep-marke,
.vk-posten .vk-mengen-zeile .vk-alle,.gewinn-kicker,.modus-kurz,.duell-dialog .modus-kurz,.a-tag,.lbl{
  text-transform:none !important; letter-spacing:0 !important}
.filter-titel,.marktflaeche .filter-titel,body.markt-app .filterbox .filter-titel{
  font-family:var(--spiel); font-size:15px; font-weight:600; color:var(--ink)}
body.markt-app .filterbox .filter-titel::before{display:none}

/* ---- Kopfzeile ---- */
nav,body nav{background:#0f1526 !important; border-bottom:1px solid var(--hairline);
  backdrop-filter:none !important; box-shadow:0 2px 0 rgba(0,0,0,.25)}
nav .brand{font-family:var(--spiel); font-weight:700; letter-spacing:.02em}
nav a.link{color:var(--ink-2); font-weight:600; font-size:16px; padding:8px 14px !important;
  border-radius:12px; transition:background .12s,color .12s}
nav a.link::after{display:none !important}
nav a.link:hover{color:#fff; background:var(--surface-2)}
nav a.link.on{color:#fff !important; background:var(--blau) !important;
  box-shadow:0 3px 0 var(--blau-tief) !important}
.glocke-knopf,.korb-knopf-nav,.konto-knopf{background:var(--surface-2) !important;
  border:0 !important; border-radius:12px !important; box-shadow:0 3px 0 #0a0f1c !important}
.guthaben-knopf{background:var(--surface-2) !important; border:0 !important; border-radius:12px !important;
  color:#ffd25a !important; font-family:var(--spiel); font-weight:600; font-size:16px;
  box-shadow:0 3px 0 #0a0f1c !important}

/* ---- Knoepfe: 3D-Kante zum Draufdruecken ---- */
.btn{font-family:var(--spiel); font-weight:600; letter-spacing:0; text-transform:none;
  border:0 !important; border-radius:12px; background:var(--surface-3); color:#fff;
  box-shadow:0 3px 0 #10172a !important; transition:transform .06s, filter .12s}
.btn:hover:not(:disabled){background:var(--surface-3); filter:brightness(1.12)}
.btn:not(:disabled):active{transform:translateY(2px); box-shadow:0 1px 0 #10172a !important}
.btn.primary,.am-knopf,.chat-schalter{background:var(--gruen) !important; color:#fff !important;
  box-shadow:0 3px 0 var(--gruen-tief) !important}
.btn.primary:hover:not(:disabled),.am-knopf:hover{background:var(--gruen-hover) !important; filter:none}
.btn.primary:not(:disabled):active{box-shadow:0 1px 0 var(--gruen-tief) !important}
.btn:disabled{opacity:.5; box-shadow:none !important}

/* ---- Eingabefelder: Flaeche statt Rahmen ---- */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{
  background:#0f1526 !important; border:2px solid var(--hairline) !important; border-radius:12px !important;
  color:var(--ink); font-family:"Nunito",system-ui,sans-serif; font-weight:700}
input:focus,select:focus,textarea:focus{border-color:var(--blau) !important; outline:none}

/* ---- Markt: Schalter, Leiste, Filter ---- */
body.markt-app .markt-schalter,.markt-schalter{background:var(--surface) !important;
  border:0 !important; box-shadow:none !important; border-radius:14px; padding:5px}
.mschalter,body.markt-app .mschalter{font-family:var(--spiel); font-weight:600; font-size:16px;
  color:var(--ink-2); border-radius:10px}
.mschalter.an,body.markt-app .mschalter.an{background:var(--blau) !important; color:#fff !important;
  box-shadow:0 3px 0 var(--blau-tief) !important}
.markt-leiste{background:transparent !important; border:0 !important; box-shadow:none !important}
.werte-schalter{background:var(--surface-2) !important; border:0 !important; border-radius:12px !important;
  font-family:var(--spiel); font-weight:600}
.sort-wahl{background:transparent !important; border:0 !important; box-shadow:none !important}
.sort-wahl-text{color:var(--ink-2); font-size:14px}
.sort-wahl .am-knopf{box-shadow:0 3px 0 var(--blau-tief) !important; background:var(--blau) !important}
.sort-wahl .am-knopf:hover{background:var(--blau-hell) !important}

.filterbox,body.markt-app .filterbox,.marktflaeche .filterbox{
  background:var(--surface) !important; box-shadow:none !important; border:0 !important}
body.markt-app .filterbox .preisspanne{border:0; background:transparent; padding:0}
/* Seltenheiten: neutrale Zeile mit farbigem Punkt; gewaehlt = in der Farbe */
.chip,.chip.rar,body.markt-app .filterbox .chip{background:var(--surface-2) !important;
  border:2px solid transparent !important; border-radius:12px !important; color:var(--ink) !important;
  font-family:var(--spiel); font-weight:600; font-size:15px; box-shadow:none !important}
.chip .punkt{width:12px !important; height:12px !important; border-radius:4px !important; box-shadow:none !important}
.chip .zahl{color:var(--ink-3) !important; font-family:"Nunito",sans-serif; font-weight:800}
.chip:hover,.chip.rar:hover{transform:none !important; background:var(--surface-3) !important}
.chip:has(input:checked),.chip.rar:has(input:checked){
  background:color-mix(in srgb,var(--c,var(--blau)) 22%,var(--surface-2)) !important;
  border-color:var(--c,var(--blau)) !important}
.chip.leer,body.markt-app .filterbox .chip.leer{opacity:.4; filter:none}

/* ---- Marktkacheln: eine Flaeche, Preis gross, Korb als 3D-Knopf ---- */
.markt-raster .marktkarte{background:var(--surface) !important; border:2px solid transparent !important;
  border-radius:16px}
.markt-raster .marktkarte:hover{border-color:color-mix(in srgb,var(--c) 70%,transparent) !important;
  transform:translateY(-3px)}
.markt-raster .marktkarte .bild{border-bottom:0 !important;
  background:radial-gradient(62% 58% at 50% 55%, color-mix(in srgb,var(--c) 30%,transparent), transparent 76%),
    var(--surface-2) !important; border-radius:14px; margin:6px 6px 0}
.markt-raster .marktkarte .stufe-pille{background:var(--c) !important; color:#0b0f1a !important;
  border:0 !important; font-family:var(--spiel); font-weight:600; font-size:11px; letter-spacing:.03em}
.markt-raster .marktkarte.rar-chroma .stufe-pille{
  background:linear-gradient(90deg,#ff6b6b,#ffd166,#4ade80,#60a5fa,#c084fc) !important; color:#0b0f1a !important}
.markt-raster .marktkarte .stueck{background:rgba(8,12,22,.7) !important; border:0 !important;
  border-radius:8px; font-family:var(--spiel); font-weight:600}
.markt-raster .marktkarte .nm{font-family:var(--spiel); font-weight:600; font-size:16px}
.markt-raster .marktkarte .foot.kauf-leiste{background:transparent !important; border:0 !important;
  padding:0 !important; margin:4px 12px 12px}
.markt-raster .marktkarte .preis-pille .ab{font-size:12px; font-weight:700; color:var(--ink-3)}
.markt-raster .marktkarte .preis-pille .price{font-family:var(--spiel); font-size:20px; font-weight:600; color:#4ade80}
.markt-raster .marktkarte .karte-korb-knopf{background:var(--gruen) !important; color:#fff !important;
  border-radius:12px; box-shadow:0 3px 0 var(--gruen-tief) !important}
.markt-raster .marktkarte .karte-korb-knopf:hover{background:var(--gruen-hover) !important; transform:none}
.markt-raster .marktkarte .karte-korb-knopf:active{transform:translateY(2px); box-shadow:0 1px 0 var(--gruen-tief) !important}
.markt-raster .marktkarte .karte-korb-knopf.drin{background:var(--gruen-tief) !important}
.markt-raster .marktkarte .kauf-leiste .pfeil{background:var(--surface-2) !important; border-radius:12px}
.markt-raster .marktkarte.ohne-angebot{opacity:.6}

/* ---- Allgemeine Karten und Flaechen: Rahmen raus ---- */
.card,.panel,.kachel,.box{background:var(--surface); border-color:transparent !important}
.item:not(.marktkarte){background:var(--surface) !important; border:2px solid transparent !important; border-radius:16px}
.item:not(.marktkarte):hover{border-color:color-mix(in srgb,var(--c) 70%,transparent) !important}
.item:not(.marktkarte) .bild{border-bottom:0 !important; border-radius:14px; margin:6px 6px 0;
  background:radial-gradient(62% 58% at 50% 55%, color-mix(in srgb,var(--c) 26%,transparent), transparent 76%),
    var(--surface-2) !important}

/* ---- Rechte Wand (Chat/Quests) ---- */
.rechte-wand{background:var(--surface) !important; border-left:0 !important}
.support-knopf,#sup-knopf,.sup-schalter{font-family:var(--spiel); font-weight:600}
/* Spielplatz-Look, zweiter Durchgang: was oben noch durchrutschte */
.sup-knopf,.btn.sup-knopf{background:#e5394f !important; color:#fff !important;
  box-shadow:0 3px 0 #9e1f31 !important}
.sup-knopf:hover,.btn.sup-knopf:hover:not(:disabled){background:#f04a60 !important}
.btn.danger,.btn.rot{box-shadow:0 3px 0 #9e1f31 !important}
.empty,.empty.klein{background:var(--surface) !important; border:2px dashed var(--hairline-2) !important;
  border-radius:16px !important; color:var(--ink-2); font-family:var(--spiel); font-weight:500; font-size:16px}
.abschnitt::after{display:none !important}
.verkauf-reiter,.wand-reiter{background:var(--surface) !important; border:0 !important; border-radius:14px}
.vreiter{font-family:var(--spiel); font-weight:600; font-size:15px; color:var(--ink-2) !important;
  border:0 !important; border-radius:10px !important; background:transparent !important}
.vreiter.an{background:var(--blau) !important; color:#fff !important; box-shadow:0 3px 0 var(--blau-tief) !important}
.vreiter .vzahl{background:rgba(255,255,255,.14) !important; color:inherit !important; border-radius:7px}
:is(body.markt-app,body.duell-app) .rechte-wand,.rechte-wand{background:var(--surface) !important;
  box-shadow:none !important}
:is(body.markt-app,body.duell-app) .wand-reiter{background:transparent !important; border-bottom:0 !important}
:is(body.markt-app,body.duell-app) .wand-reiter label,.wand-reiter label{font-family:var(--spiel);
  font-weight:600; font-size:15px !important; letter-spacing:0 !important; text-transform:none !important}
.wand-reiter input:checked + label{background:var(--gruen) !important; color:#fff !important;
  box-shadow:0 3px 0 var(--gruen-tief) !important; border-color:transparent !important}
.chat-form input,.chat-form textarea{background:#0f1526 !important}
.tag,.marktkarte .bild .tag,.kopf-stufe{border:0 !important; border-radius:999px !important;
  background:var(--c,var(--surface-3)) !important; color:#0b0f1a !important; font-family:var(--spiel);
  font-weight:600; letter-spacing:.03em}
.rar-chroma .tag{background:linear-gradient(90deg,#ff6b6b,#ffd166,#4ade80,#60a5fa,#c084fc) !important}
.mg-reiter a,.mg-reiter a.an{background:var(--surface) !important; border:2px solid transparent !important;
  border-radius:16px !important}
.mg-reiter a.an{border-color:var(--farbe) !important}
.mg-reiter .marke{background:var(--surface-3) !important; color:var(--ink-2) !important; border-radius:8px}
.bilanz,.mg-kopf .bilanz{background:var(--surface) !important; border:0 !important; border-radius:14px}
.rechte-wand .chat,.wand-blatt .chat{background:transparent !important}
.rechte-wand .chat-zeilen{background:none !important}
.chat-form{background:transparent !important; border-top:1px solid var(--hairline) !important}
/* Itemseite: Kaufknopf so gross wie wichtig, Preise gruen wie im Markt */
.btn.primary.gross,.kaufen-knopf,.item-kauf .btn.primary{font-size:17px; padding:12px 20px}
.instant-kauf .btn,.instant-verhandeln{min-height:46px !important; padding:10px 18px !important;
  font-size:16px !important}
.instant-kauf .btn span{font-size:15px !important}
.tablewrap,table{background:var(--surface-2) !important; border-color:transparent !important; border-radius:14px}
th{color:var(--ink-3) !important; font-family:var(--spiel); font-weight:500}
td{border-bottom-color:var(--hairline) !important}

/* ===== Lila Nacht, ganz Lila - Variante G (06.10.2026) =====
   Vom Betreiber aus elf Varianten gewaehlt ("G, und weniger nach KI").
   Grund violett, alle Knoepfe lila - auch Kaufen und Chat; gruen bleibt
   nur der Preis. Dazu drei Dinge, die nach KI aussahen:
   - die weichen Leuchtwolken hinter den Items -> eine feste Kachel in der
     Stufenfarbe mit Band unten, wie die Seltenheitsbanner in MM2 selbst;
   - "from" ueber jedem Preis -> nur noch der Preis;
   - das Logo war nur Text -> ein Mond davor. */
:root{
  --ground:#09090b; --surface:#131315; --surface-2:#1d1d20; --surface-3:#29292d;
  --hairline:#2c2c30; --hairline-2:#414146;
  --ink-2:#b5b5bd; --ink-3:#96969d; --muted:var(--ink-2);
  --blau:#ffd400; --blau-tief:#c5a400; --blau-hell:#ffe36b;
  --gruen:#ffd400; --gruen-tief:#c5a400; --gruen-hover:#ffe36b;
  --accent:#ffd400; --preis:#4ade80; --mond:#ffd25a;
}
nav,body nav{background:#0b0b0c !important}
/* Eingabefelder: eine lila Flaeche mit Rand, der beim Tippen lila wird
   (06.10.2026). Vorher fast schwarz (#101012) - in Feldern mit eigenem
   Rahmen (Preis, Menge) stand dadurch ein schwarzer Kasten im Kasten. */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.chat-form input{
  background:var(--surface-2) !important; border:2px solid var(--hairline-2) !important;
  border-radius:12px; box-shadow:none !important}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus{
  border-color:var(--blau) !important; outline:none !important}
@media (max-width:760px){ .handy-leiste{background:#0b0b0c !important} }

/* Kacheln: fest statt Leuchten, mit Stufenband unten und Druckkante */
.markt-raster .marktkarte,.item:not(.marktkarte){box-shadow:0 4px 0 #09090b !important}
.markt-raster .marktkarte .bild,.item:not(.marktkarte) .bild{
  background:color-mix(in srgb,var(--c) 16%,var(--surface-2)) !important;
  border-bottom:4px solid var(--c) !important; border-radius:12px 12px 6px 6px}
.markt-raster .marktkarte.rar-chroma .bild,.item.rar-chroma:not(.marktkarte) .bild{
  border-image:linear-gradient(90deg,#ff6b6b,#ffd166,#4ade80,#60a5fa,#c084fc) 1 !important;
  border-bottom-width:4px !important}
.markt-raster .marktkarte .bild::before,.markt-raster .marktkarte .bild::after{display:none !important}
.markt-raster .marktkarte .bild img,.item .bild img{filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}

/* Preis allein, gross und gruen */
.markt-raster .marktkarte:not(.ohne-angebot) .preis-pille .ab{display:none}
.markt-raster .marktkarte .preis-pille .price{color:var(--preis); font-size:21px}
.preis-gross,.kk-preis,.item-preis{color:var(--preis)}

/* Logo ohne Mond (06.10.2026, Betreiber: "den Mond weg"). */
.brand-beta{background:var(--blau) !important; color:#fff !important}
/* G: auch "Withdraw to Roblox" lila - ein Gruen daneben waere eine zweite
   Knopfsprache. Gruen bleibt allein den Preisen. */
body.verkauf-app .vk-spiel{
  background:var(--blau) !important; border-color:var(--blau) !important;
  color:#fff !important; box-shadow:0 3px 0 var(--blau-tief) !important;
}
body.verkauf-app .vk-spiel:hover:not(:disabled){background:var(--blau-hell) !important; border-color:var(--blau-hell) !important}
/* G: Fenster auf der Flaeche, nicht im alten Grauverlauf aus "Schwarz
   statt Himmel" (06.10.2026). */
dialog.overlay, .gfenster, dialog.hinweis, dialog.kfenster, dialog.shop-kauf{
  background:var(--surface) !important; border-color:var(--hairline) !important;
}
/* Ein Schliessknopf fuer alle Fenster: rund, Flaeche, kein lila Rahmen. */
dialog .schliessen, dialog .gf-schliessen button, dialog .kfenster-zu,
dialog .shop-kauf-zu, dialog .freund-zu button{
  width:38px !important; height:38px !important; border-radius:50% !important;
  border:0 !important; outline:0; background:var(--surface-3) !important;
  color:var(--ink) !important; font-size:22px !important; line-height:1;
  display:inline-grid; place-items:center; padding:0 !important; box-shadow:none !important;
}
/* Einsatzwahl: Titel und Hinweis stehen schon im Fensterkopf. */
.duell-katalog .einsatz-kopfzeile > div > span.small{display:none}
.duell-katalog .einsatz-kopfzeile{margin-top:8px; padding-top:10px}
.einsatz-zaehler{white-space:nowrap}
.einsatz-zaehler.voll{color:#fbbf24!important;font-weight:700}
.mg-testbot{max-width:100%; box-sizing:border-box; overflow-wrap:anywhere}
/* Ein Fenster setzt den Fokus auf den ersten Knopf - der lila Ring sah
   aus wie eine Vorauswahl. Nur bei Tastaturbedienung zeigen. */
dialog .btn:focus:not(:focus-visible), dialog button:focus:not(:focus-visible){outline:none !important}
.abschnitt > .muted.small{margin-left:6px; font-weight:600}
/* Duellraum: die Rolle ist ein Abzeichen, kein Knopf (sah mit Rand und
   Ecken aus wie einer). Der Pot-Kopf trennt Titel und Satz. */
.rolle-marke{border:0 !important; border-radius:999px !important; padding:5px 14px !important;
  box-shadow:none !important; font-family:var(--spiel); font-weight:600}
.arena-pot-kopf .lbl{margin-right:8px; color:var(--ink); font-family:var(--spiel); font-size:15px}
/* G: der deckende Flaechenton war noch das alte Grau (#282a2e) - Glocke,
   Konto- und Guthabenmenue standen grau zwischen lila Flaechen. */
:root{--surface-fest:#131315}

/* Felder mit eigenem Rahmen (Preis mit $, Mengen-Kapsel): der Rahmen ist
   das Feld, das Eingabefeld darin ist durchsichtig. */
.vk-feld, .bearb-geld, .vk-kapsel{
  background:var(--surface-2) !important; border:2px solid var(--hairline-2) !important;
  border-radius:12px !important; box-shadow:none !important}
.vk-feld:focus-within, .bearb-geld:focus-within, .vk-kapsel:focus-within{border-color:var(--blau) !important}
/* Die Grundregel fuer input hat drei :not() - ohne dieselbe Gewichtung
   gewinnt sie trotz !important, und der Kasten im Kasten bliebe. */
:is(.vk-feld, .bearb-geld, .vk-kapsel) input:not([type=checkbox]):not([type=radio]):not([type=range]),
:is(.vk-feld, .bearb-geld, .vk-kapsel) input:not([type=checkbox]):not([type=radio]):not([type=range]):focus{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  outline:none !important; border-radius:0}
.vk-feld .vk-waehrung, .bearb-geld b{color:var(--ink-2)}
.bearb-pm, .vk-kapsel button{background:var(--surface-3) !important; border:0 !important}

/* Verlauf: Itemkacheln nicht abschneiden (06.10.2026). Die Reihe ist ein
   Flex-Kind von .vf-detail (flex-wrap); ohne eigene Basis und mit
   overflow-x:auto schrumpfte Safari sie auf eine Kachel und schnitt die
   zweite ab. Jetzt volle Breite und Umbruch statt Seitwaertsrollen. */
.vf-detail > .vf-items.vf-reihe{flex:1 1 100%; width:100%; min-width:0;
  flex-wrap:wrap; overflow:visible}
.vf-detail > .vf-items.vf-reihe .vf-item{flex:0 0 96px; box-sizing:border-box}

/* ===== Weniger KI, mehr Spiel (06.10.2026) =====
   Rueckmeldung: "sieht voll KI-generiert aus". Lila (Variante G), Fredoka,
   Stufen-Pille und gruener Preis bleiben - was den Eindruck machte, war
   etwas anderes:
   - ALLES war lila: Navigation, Reiter, Sortierung, Chat, Kaufen. Eine
     Farbe fuer alles ist keine Sprache. Jetzt drei Rollen: lila = etwas
     tun (Kaufen, Verkaufen, Senden), hell = was gerade gewaehlt ist
     (Reiter, Buy/Sell, Sortierung), gruen = Geld.
   - Die Navigation sah aus wie eine Reihe Knoepfe. Jetzt Text mit einem
     Balken unter dem aktiven Abschnitt, wie in jedem Spielmenue.
   - Grauviolette Schrift auf violetter Flaeche (zu wenig Kontrast) wirkte
     verwaschen. Zweite und dritte Schriftfarbe heller.
   - Weiche Riesenecken und Leuchten (Chat-Knopf). Jetzt 12 px, Kante oben
     hell, unten dunkel - eine Spieloberflaeche statt einer Blase. */
:root{
  --ink-2:#d0d0d3; --ink-3:#96969d; --muted:var(--ink-2);
  --wahl-grund:#ffd400; --wahl-schrift:#101012;
  --kante:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 0 rgba(0,0,0,.35);
}

/* -- Navigation: Text + Balken statt Knopfreihe -- */
nav a.link{background:transparent !important; box-shadow:none !important; border-radius:0 !important;
  position:relative; padding:8px 12px !important}
nav a.link:hover{background:transparent !important; color:#fff}
nav a.link.on{background:transparent !important; box-shadow:none !important; color:#fff !important}
nav a.link.on::after{content:"" !important; display:block !important; position:absolute;
  left:12px; right:12px; bottom:-2px; height:3px; border-radius:3px; background:var(--blau)}
@media (max-width:760px){ nav a.link.on::after{display:none !important} }

/* -- Gewaehlt ist hell, nicht lila -- */
.mschalter.an,body.markt-app .mschalter.an,
.vreiter.an,
.wand-reiter input:checked + label{
  background:var(--wahl-grund) !important; color:var(--wahl-schrift) !important;
  box-shadow:0 2px 0 rgba(0,0,0,.35) !important}
.vreiter.an .vzahl{background:rgba(23,18,43,.12) !important; color:var(--wahl-schrift) !important}
.sort-wahl .am-knopf{background:var(--surface-2) !important; color:var(--ink) !important;
  box-shadow:var(--kante) !important; border:0 !important}
.sort-wahl .am-knopf:hover{background:var(--surface-3) !important}
.werte-schalter{box-shadow:var(--kante) !important}

/* -- Flaechen: Spieloberflaeche statt Blase -- */
.markt-raster .marktkarte,.item:not(.marktkarte){border-radius:12px !important;
  box-shadow:var(--kante) !important}
.filterbox,body.markt-app .filterbox,.rechte-wand,.verkauf-reiter,.markt-schalter{box-shadow:var(--kante) !important}
.chat-schalter{box-shadow:0 3px 0 var(--blau-tief) !important; filter:none !important}
.btn,.am-knopf{border-radius:11px !important}

/* -- Filter: Gewaehltes steht deutlich da (Rueckmeldung: "man sieht nicht,
   welche man ausgewaehlt hat"). Rahmen in der Stufenfarbe, Haken statt
   Punkt, und sobald etwas gewaehlt ist, treten die anderen zurueck. -- */
.chip:has(input:checked),.chip.rar:has(input:checked),
body.markt-app .filterbox .chip:has(input:checked){
  background:color-mix(in srgb,var(--c,var(--blau)) 26%,var(--surface-2)) !important;
  border:2px solid color-mix(in srgb,var(--c,var(--blau)) 85%,#fff) !important;
  color:#fff !important; opacity:1 !important}
.chip:has(input:checked) .punkt{position:relative; width:16px !important; height:16px !important;
  border-radius:5px !important; background:var(--c,var(--blau)) !important}
.chip:has(input:checked) .punkt::after{content:""; position:absolute; left:5px; top:2px;
  width:4px; height:8px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg)}
.chip.rar-chroma:has(input:checked) .punkt{background:conic-gradient(#ff6b6b,#ffd166,#4ade80,#60a5fa,#c084fc,#ff6b6b) !important}
.chip:has(input:checked) .zahl{color:#fff !important}
.filterbox:has(.chip input:checked) .chip:not(:has(input:checked)){opacity:.5}
.filterbox:has(.chip input:checked) .chip:not(:has(input:checked)):hover{opacity:1}

/* -- Inventar: Sortierung als Umschalter -- */
.inv-sort{display:inline-flex; gap:3px; padding:4px; border-radius:12px; flex:none;
  background:var(--surface); box-shadow:var(--kante)}
.inv-sort a{padding:6px 13px; border-radius:9px; font-family:var(--spiel); font-weight:600;
  font-size:14px; color:var(--ink-2); text-decoration:none; white-space:nowrap}
.inv-sort a:hover{color:#fff; background:var(--surface-2)}
.inv-sort a[aria-current]{background:var(--wahl-grund); color:var(--wahl-schrift)}
.inv-sort a:focus-visible{outline:2px solid var(--blau); outline-offset:2px}

/* -- Inventar: Einzahlungen in Pruefung als eigene Leiste -- */
.pruef-leiste{margin:0 0 14px; padding:12px 14px; border-radius:12px;
  background:color-mix(in srgb,#f59e0b 10%,var(--surface)); border:1px solid rgba(245,158,11,.35);
  box-shadow:var(--kante); display:flex; flex-direction:column; gap:10px}
.pruef-kopf{display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:#fcd34d;
  font-size:13.5px; font-weight:700}
.pruef-leiste .pruef-marke{position:static; padding:3px 9px; border-radius:999px;
  background:#f59e0b; color:#1b1206; font-family:var(--spiel); font-weight:600; font-size:12px}
.pruef-reihe{display:flex; flex-wrap:wrap; gap:8px}
.pruef-posten{flex:none; display:flex; align-items:center; gap:10px; padding:6px 8px 6px 6px;
  border-radius:10px; background:var(--surface-2); max-width:320px}
.pruef-bild{width:44px; height:44px; flex:none; border-radius:8px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--c,#888) 18%,var(--surface-3)); border-bottom:3px solid var(--c,#888)}
.pruef-bild img{max-width:38px; max-height:38px; object-fit:contain}
.pruef-name{font-family:var(--spiel); font-weight:600; font-size:14px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.pruef-leiste .pruef-support{display:inline-block; margin:0; flex:none; padding:6px 10px;
  border-radius:8px; font-size:12.5px; font-weight:800; background:#b45309; color:#fff;
  text-decoration:none; white-space:nowrap}
.pruef-leiste .pruef-support:hover{background:#d97706}
@media (max-width:760px){
  .pruef-reihe{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px}
  .pruef-posten{max-width:85vw}
  .pruef-leiste{padding:10px 12px}
  .inv-sort a{padding:6px 10px}
}

/* ===== Mondlicht (06.10.2026) =====
   Betreiber: "komplett anders, wie du willst". Weg vom Lila - Lila auf
   Dunkel ist DIE Farbe generierter Seiten. Neu, aus dem Namen
   abgeleitet: Moonly = Mondlicht ueber einer Nacht.
   - Grund warmes Graphit statt Violett, Schrift elfenbeinfarben.
   - EINE Signalfarbe: Mondgold fuer alles, was man tut (Kaufen, Senden,
     Verkaufen) - mit dunkler Schrift darauf, nicht weiss.
   - Gewaehltes ist elfenbeinhell (Reiter, Umschalter), Geld ist gruen,
     Stufen behalten ihre Spielfarben. Mehr Farbe gibt es nicht.
   - Ueberschriften und Knoepfe in Bricolage Grotesque statt Fredoka:
     eigenwillig, aber erwachsen - Fredoka las sich wie ein Kinderspiel.
   - Flaechen flach mit 1-px-Kante, 10 px Ecken, keine Schatten-Kanten. */
/* Lila Schwarz zurueck (06.10.2026, Betreiber: "mach das Design wieder so
   Lila Schwarz"): die Farben von Variante G, die Bauteile von Mondlicht
   (Schliessknopf, Settings, Felder) bleiben. --mond heisst weiter so, ist
   aber jetzt das Lila zum Tun, mit weisser Schrift darauf. */
:root{
  --ground:#09090b; --surface:#131315; --surface-2:#1d1d20; --surface-3:#29292d;
  --surface-fest:#131315;
  --hairline:#2c2c30; --hairline-2:#414146;
  --ink:#f5f5f5; --ink-2:#d0d0d3; --ink-3:#96969d; --muted:var(--ink-2);
  --card:var(--surface); --line:var(--hairline);
  --mond:#ffd400; --mond-tief:#c5a400; --mond-hell:#ffe36b; --mond-schrift:#ffffff;
  --blau:var(--mond); --blau-tief:var(--mond-tief); --blau-hell:var(--mond-hell);
  --gruen:var(--mond); --gruen-tief:var(--mond-tief); --gruen-hover:var(--mond-hell);
  --accent:var(--mond); --accent-ink:var(--mond-schrift);
  --preis:#4ade80;
  --wahl-grund:#ffd400; --wahl-schrift:#101012;
  --kante:none;
  --spiel:"Fredoka","Nunito",system-ui,sans-serif;
}
html,body{background:var(--ground) !important}
body{color:var(--ink)}
h1,h2,h3{font-family:var(--spiel); letter-spacing:-.01em}
h1{font-weight:800} h2,h3{font-weight:700}

/* -- Kopfzeile -- */
nav,body nav{background:#0b0b0c !important; border-bottom:1px solid var(--hairline) !important;
  box-shadow:none !important}
nav .brand{font-family:var(--spiel) !important; font-weight:800; letter-spacing:-.02em; color:var(--ink)}
.brand-beta{background:var(--mond) !important; color:var(--mond-schrift) !important}
nav a.link{font-family:var(--spiel); font-weight:600; color:var(--ink-2)}
nav a.link.on::after{background:var(--mond) !important}
.glocke-knopf,.korb-knopf-nav,.konto-knopf,.guthaben-knopf{
  background:var(--surface) !important; border:1px solid var(--hairline) !important;
  box-shadow:none !important; border-radius:10px !important}
.guthaben-knopf{color:var(--preis) !important; font-family:var(--spiel) !important}
.rbx-hinweis{background:color-mix(in srgb,var(--mond) 14%,var(--ground)) !important;
  color:var(--ink) !important; border-bottom:1px solid color-mix(in srgb,var(--mond) 30%,transparent)}
.rbx-hinweis a{color:var(--mond) !important}

/* -- Knoepfe: Gold zum Tun, Flaeche fuer den Rest -- */
.btn{background:var(--surface-2) !important; color:var(--ink) !important;
  border:1px solid var(--hairline-2) !important; box-shadow:none !important;
  border-radius:10px !important; font-family:var(--spiel); font-weight:600}
.btn:hover:not(:disabled){background:var(--surface-3) !important}
.btn:not(:disabled):active{transform:translateY(1px); box-shadow:none !important}
.btn.primary,.am-knopf,.chat-schalter,.markt-raster .marktkarte .karte-korb-knopf,
body.verkauf-app .vk-spiel,.einsatz-item.gewaehlt .einsatz-haken{
  background:var(--mond) !important; color:var(--mond-schrift) !important;
  border:1px solid var(--mond) !important; box-shadow:none !important}
.btn.primary:hover:not(:disabled),.am-knopf:hover,.chat-schalter:hover,
.markt-raster .marktkarte .karte-korb-knopf:hover,body.verkauf-app .vk-spiel:hover:not(:disabled){
  background:var(--mond-hell) !important; border-color:var(--mond-hell) !important}
.markt-raster .marktkarte .karte-korb-knopf.drin{background:var(--mond-tief) !important}
.btn.primary *,.am-knopf *,.chat-schalter *{color:inherit}
.btn.danger,.btn.rot,.sup-knopf,.btn.sup-knopf{background:#c8364a !important; color:#fff !important;
  border-color:#c8364a !important; box-shadow:none !important}
.sort-wahl .am-knopf{background:var(--surface) !important; color:var(--ink) !important;
  border:1px solid var(--hairline-2) !important}
.vzahl.laeuft,.step.on .n,.betrag.an,.sort-option.an,.muenze.an .muenze-abzeichen,
.gewinn-item .menge,.sup-f-klammer.hat,.set-leiste .chip.an,.gk-lauf span{color:var(--mond-schrift) !important}

/* -- Gewaehlt: elfenbein -- */
.mschalter.an,body.markt-app .mschalter.an,.vreiter.an,.wand-reiter input:checked + label,
.inv-sort a[aria-current]{background:var(--wahl-grund) !important; color:var(--wahl-schrift) !important;
  box-shadow:none !important}
.markt-schalter,body.markt-app .markt-schalter,.verkauf-reiter,.inv-sort{
  background:var(--surface) !important; border:1px solid var(--hairline) !important; box-shadow:none !important}
.mschalter,.vreiter,.inv-sort a{font-family:var(--spiel) !important}

/* -- Flaechen und Kacheln -- */
.filterbox,body.markt-app .filterbox,.marktflaeche .filterbox,.rechte-wand,
:is(body.markt-app,body.duell-app) .rechte-wand,.card,.panel,.box{
  background:var(--surface) !important; border:1px solid var(--hairline) !important; box-shadow:none !important}
.markt-raster .marktkarte,.item:not(.marktkarte){
  background:var(--surface) !important; border:1px solid var(--hairline) !important;
  border-radius:10px !important; box-shadow:none !important}
.markt-raster .marktkarte:hover,.item:not(.marktkarte):hover{
  border-color:color-mix(in srgb,var(--c) 60%,var(--hairline)) !important; transform:translateY(-2px)}
.markt-raster .marktkarte .bild,.item:not(.marktkarte) .bild{
  background:color-mix(in srgb,var(--c) 11%,var(--surface-2)) !important;
  border-bottom:3px solid var(--c) !important; border-radius:9px 9px 0 0 !important; margin:0 !important}
.markt-raster .marktkarte .stufe-pille{background:color-mix(in srgb,var(--c) 22%,#09090b) !important;
  color:var(--c) !important; border:1px solid color-mix(in srgb,var(--c) 45%,transparent) !important;
  font-family:"Nunito",sans-serif !important; font-weight:800 !important; letter-spacing:.06em !important}
.markt-raster .marktkarte.rar-common .stufe-pille{color:#dcd8ea !important}
.markt-raster .marktkarte .nm,.item .nm{font-family:var(--spiel) !important; font-weight:600 !important;
  letter-spacing:-.005em}
.markt-raster .marktkarte .preis-pille .price,.preis-gross,.kk-preis,.item-preis{color:var(--preis) !important;
  font-family:var(--spiel) !important; font-weight:700 !important}
.markt-raster .marktkarte .stueck{background:rgba(18,15,36,.75) !important}

/* -- Filter -- */
.chip,.chip.rar,body.markt-app .filterbox .chip{background:transparent !important;
  border:1px solid transparent !important; border-radius:9px !important; font-family:"Nunito",sans-serif !important;
  font-weight:700 !important}
.chip:hover,.chip.rar:hover{background:var(--surface-2) !important}
.chip:has(input:checked),.chip.rar:has(input:checked),body.markt-app .filterbox .chip:has(input:checked){
  background:color-mix(in srgb,var(--c,var(--mond)) 16%,var(--surface-2)) !important;
  border:1px solid color-mix(in srgb,var(--c,var(--mond)) 80%,#fff) !important}
.filter-titel,.marktflaeche .filter-titel,body.markt-app .filterbox .filter-titel{
  font-family:var(--spiel) !important; font-weight:700 !important}

/* -- Eingabefelder -- */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.chat-form input{
  background:var(--surface-2) !important; border:1px solid var(--hairline-2) !important;
  border-radius:10px !important; color:var(--ink) !important}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus{
  border-color:var(--mond) !important; outline:none !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mond) 22%,transparent) !important}
input[type=checkbox],input[type=radio]{accent-color:var(--mond)}

/* Felder mit eigenem Rahmen: Top-up/Cash-out-Betrag, Preis, Menge. Der
   Rahmen ist das Feld, das Eingabefeld darin bleibt durchsichtig -
   vorher stand im Betragsfeld ein lila Kasten im Kasten. */
.geld-feld,.vk-feld,.bearb-geld,.vk-kapsel,.gf-geldfeld,.gf-stepper{background:var(--surface-2) !important;
  border:1px solid var(--hairline-2) !important; border-radius:10px !important; box-shadow:none !important}
.geld-feld:focus-within,.vk-feld:focus-within,.bearb-geld:focus-within,.vk-kapsel:focus-within,
.gf-geldfeld:focus-within,.gf-stepper:focus-within{
  border-color:var(--mond) !important; box-shadow:0 0 0 3px color-mix(in srgb,var(--mond) 22%,transparent) !important}
:is(.geld-feld,.vk-feld,.bearb-geld,.vk-kapsel,.gf-geldfeld,.gf-stepper,.ang-preis) input:not([type=checkbox]):not([type=radio]):not([type=range]),
:is(.geld-feld,.vk-feld,.bearb-geld,.vk-kapsel,.gf-geldfeld,.gf-stepper,.ang-preis) input:not([type=checkbox]):not([type=radio]):not([type=range]):focus{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  outline:none !important; border-radius:0 !important; padding-left:2px !important}
/* Buy-offer-Fenster (08.10.2026): auch dort stand ein Kasten im Kasten. */
.gf-stepper{overflow:hidden}
.gf-stepper input{text-align:center !important; padding-left:0 !important}
.gf-stepper button{background:transparent !important; border:0 !important; box-shadow:none !important}
.gf-stepper button:hover{background:var(--surface-3) !important}

/* -- Fenster und EIN Schliessknopf fuer alle --
   Das "x" war ein Schriftzeichen im runden Knopf: je nach Schrift sass es
   zu tief, und der Knopf stand tiefer als die Ueberschrift daneben. Jetzt
   zwei gezeichnete Striche, oben rechts auf Hoehe des Titels. */
dialog.overlay,.gfenster,dialog.hinweis,dialog.kfenster,dialog.shop-kauf,.kfenster{
  background:var(--surface) !important; border:1px solid var(--hairline-2) !important;
  border-radius:14px !important; box-shadow:0 24px 60px rgba(0,0,0,.55) !important}
dialog::backdrop{background:rgba(9,7,20,.72) !important}
dialog .gf-schliessen{position:absolute !important; top:18px !important; right:16px !important; padding:0 !important;
  z-index:20; margin:0}
dialog .schliessen,dialog .gf-schliessen button,dialog .kfenster-zu,
dialog .shop-kauf-zu,dialog .freund-zu button{
  position:relative; width:34px !important; height:34px !important; padding:0 !important;
  border-radius:9px !important; border:1px solid var(--hairline-2) !important;
  background:var(--surface-2) !important; color:transparent !important; font-size:0 !important;
  box-shadow:none !important; cursor:pointer; display:inline-block}
dialog .schliessen::before,dialog .schliessen::after,
dialog .gf-schliessen button::before,dialog .gf-schliessen button::after,
dialog .kfenster-zu::before,dialog .kfenster-zu::after,
dialog .shop-kauf-zu::before,dialog .shop-kauf-zu::after,
dialog .freund-zu button::before,dialog .freund-zu button::after{
  content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; border-radius:2px;
  background:var(--ink-2); transform:translate(-50%,-50%) rotate(45deg)}
dialog .schliessen::after,dialog .gf-schliessen button::after,dialog .kfenster-zu::after,
dialog .shop-kauf-zu::after,dialog .freund-zu button::after{transform:translate(-50%,-50%) rotate(-45deg)}
dialog .schliessen:hover,dialog .gf-schliessen button:hover,dialog .kfenster-zu:hover,
dialog .shop-kauf-zu:hover,dialog .freund-zu button:hover{background:var(--surface-3) !important}
/* Platz fuer den Knopf, damit Ueberschriften nicht darunter laufen */
.kfenster .fenster-kopf,.kfenster .korb2-kopf{padding-right:46px}

/* -- Settings: von Anfang an so gross wie mit Discord, Inhalt rollt
   innen. Vorher wuchs das Fenster beim Reiter Discord auf volle Hoehe,
   und die Reiterliste links stand verloren darin. -- */
.kfenster:has(.einst-tabs){width:min(940px,94vw) !important; height:min(700px,88vh)}
.kfenster:has(.einst-tabs) .kfenster-inhalt{height:100%; max-height:none !important; box-sizing:border-box}
.einst-tabs{grid-template-columns:230px minmax(0,1fr) !important; gap:24px !important}
.einst-nav{position:sticky; top:0; background:var(--surface-2) !important;
  border:1px solid var(--hairline) !important; border-radius:12px !important; padding:6px !important}
.einst-nav label{padding:9px 10px 9px 8px !important; border-radius:9px !important}
.einst-nav strong{font-family:var(--spiel); font-weight:600; font-size:15px !important}
.einst-tabs:has(#einst-konto:checked) label[for="einst-konto"],
.einst-tabs:has(#einst-privat:checked) label[for="einst-privat"],
.einst-tabs:has(#einst-sicher:checked) label[for="einst-sicher"],
.einst-tabs:has(#einst-roblox:checked) label[for="einst-roblox"],
.einst-tabs:has(#einst-discord:checked) label[for="einst-discord"]{
  background:var(--wahl-grund) !important; color:var(--wahl-schrift) !important}
@media (max-width:760px){
  .kfenster:has(.einst-tabs){height:auto; width:100vw !important; max-width:100vw !important}
  .einst-tabs{grid-template-columns:1fr !important; gap:14px !important}
  .einst-nav{position:static}
}

/* -- Rest -- */
.empty,.empty.klein{background:var(--surface) !important; border:1px dashed var(--hairline-2) !important;
  border-radius:12px !important}
.handy-leiste{background:#0b0b0c !important; border-top:1px solid var(--hairline) !important}
@media (max-width:760px){ .handy-leiste{background:#0b0b0c !important} }
.pruef-leiste{box-shadow:none !important}
/* Geldseiten: Coin-Kacheln flach, gewaehlt in Gold statt Gruen/Blau */
.geld-seite .geld-methode.muenze{background:var(--surface-2) !important; border:1px solid var(--hairline) !important;
  box-shadow:none !important}
.geld-seite .geld-methode.muenze.an{border-color:var(--mond) !important;
  background:color-mix(in srgb,var(--mond) 9%,var(--surface-2)) !important;
  box-shadow:inset 0 0 0 1px var(--mond) !important}
.geld-seite .geld-methode.muenze.an::after{color:var(--mond-schrift) !important; background:var(--mond) !important}
.geld-seite .geld-methode .muenze-abzeichen{color:var(--ink-2) !important; background:var(--surface-3) !important}
.geld-seite .geld-methode.muenze.an .muenze-abzeichen{color:var(--mond-schrift) !important; background:var(--mond) !important}
.geld-info{color:var(--ink-2) !important; background:var(--surface-2) !important; border:1px solid var(--hairline) !important}
.betrag{background:var(--surface-2) !important; border:1px solid var(--hairline) !important; color:var(--ink) !important}
.betrag.an{background:var(--mond) !important; border-color:var(--mond) !important}
.einst-nav .menue-symbol{background:var(--surface-3) !important; color:var(--ink-2) !important; box-shadow:none !important}
.einst-tabs label[for] .menue-symbol svg{stroke:currentColor}
*{scrollbar-color:var(--hairline-2) transparent}

/* ---- Settings fuellen das Fenster (06.10.2026, zweiter Anlauf) ----
   Rueckmeldung: "alles groesser, damit nichts mehr frei ist". Die Reiter
   links teilen sich die ganze Hoehe, jeder Abschnitt rechts ist eine Karte,
   die mitwaechst; Schrift und Knoepfe eine Stufe groesser. Discord hat mehr
   Inhalt und rollt innen. */
.kfenster:has(.einst-tabs) .kfenster-inhalt{display:flex; flex-direction:column;
  overflow:hidden !important; padding:22px 24px 24px !important}
.kfenster:has(.einst-tabs) .fenster-kopf h2{font-size:26px}
.einst-tabs{flex:1 1 auto; min-height:0; align-items:stretch !important}
.einst-nav{position:static !important; height:100%; box-sizing:border-box; gap:6px !important}
.einst-nav label{flex:1 1 0; min-height:56px; padding:0 14px 0 12px !important; gap:14px !important}
.einst-nav strong{font-size:17px !important}
.einst-nav .menue-symbol{width:42px !important; height:42px !important; border-radius:11px !important}
.einst-nav .menue-symbol svg{width:21px !important; height:21px !important}
.einst-blaetter{height:100%; overflow-y:auto; min-height:0; padding-right:4px}
.einst-blatt{min-height:100%; gap:14px !important}
.einst-blatt > .einst-block{flex:1 1 auto; margin:0 !important; padding:22px 24px !important;
  background:var(--surface-2); border:1px solid var(--hairline) !important; border-radius:12px;
  display:flex; flex-direction:column; gap:12px}
.einst-blatt > .einst-block + .einst-block{border-top:1px solid var(--hairline) !important}
.einst-blatt .einst-kopf h3{font-size:20px !important; font-family:var(--spiel)}
.einst-blatt .einst-wert{font-size:22px !important; font-family:var(--spiel)}
.einst-blatt p,.einst-blatt .small,.einst-blatt label{font-size:15px !important}
.einst-blatt .muted.small{font-size:14.5px !important}
.einst-blatt .btn,.einst-blatt .btn.small,.einst-blatt summary.btn{min-height:46px; padding:0 22px !important;
  font-size:16px !important; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:fit-content}
.einst-blatt input:not([type=checkbox]):not([type=radio]):not([type=range]){min-height:48px; font-size:16px !important}
.einst-blatt input[type=checkbox]{width:20px; height:20px}
.einst-schritte ol{margin:0; padding:0; list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:14px}
.einst-schritte li{counter-increment:s; display:grid; grid-template-columns:38px 1fr; column-gap:14px; row-gap:2px}
.einst-schritte li::before{content:counter(s); grid-row:span 2; width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center; background:var(--surface-3); color:var(--mond);
  font-family:var(--spiel); font-weight:700; font-size:18px}
.einst-schritte li strong{font-family:var(--spiel); font-size:17px}
.einst-schritte li span{color:var(--ink-2); font-size:15px}
.einst-schritte code{background:var(--surface-3); padding:1px 6px; border-radius:6px; font-size:13.5px}
@media (max-width:760px){
  .kfenster:has(.einst-tabs) .kfenster-inhalt{overflow-y:auto !important; display:block}
  .einst-nav{height:auto}
  .einst-nav label{flex:none; min-height:48px}
  .einst-blaetter{height:auto; overflow:visible}
}

/* ===== Support-Team im Fenster (07.10.2026) =====
   Owner und Moderatoren: Reiter ueber der Ticketliste, im Ticket ein Kopf
   mit Nutzer, Thema und Knoepfen. Gewaehlt = hell, wie alle Reiter. */
.sup-team-reiter{display:flex; gap:4px; flex-wrap:wrap; margin:0 0 10px;
  padding:4px; border-radius:12px; background:var(--surface-2)}
.sup-team-reiter button{flex:1 1 auto; border:0; border-radius:9px; padding:7px 9px;
  background:transparent; color:var(--ink-2); font-family:var(--spiel); font-weight:600;
  font-size:13px; cursor:pointer; white-space:nowrap}
.sup-team-reiter button:hover{color:#fff; background:var(--surface-3)}
.sup-team-reiter button.an{background:var(--wahl-grund); color:var(--wahl-schrift)}
.sup-team-reiter button b{display:inline-block; min-width:18px; padding:0 5px; margin-left:3px;
  border-radius:999px; background:var(--surface-3); color:var(--ink); font-size:11.5px}
.sup-team-reiter button.rot b{background:#c8364a; color:#fff}
.sup-team-reiter button.an b{background:rgba(23,18,43,.14); color:var(--wahl-schrift)}
.sup-tz-wer{font-weight:700; color:var(--ink)}
.sup-team-kopf{display:flex; align-items:center; justify-content:space-between; gap:8px;
  flex-wrap:wrap; margin:0 0 10px; padding:8px 10px; border-radius:10px;
  background:var(--surface-2); font-size:13px; color:var(--ink-2)}
.sup-team-kopf strong{color:var(--ink)}
.sup-team-knoepfe{display:flex; gap:6px}
.sup-team-leute{display:flex; flex-direction:column; gap:6px}
.sup-team-person{display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:0; padding:7px 10px; border-radius:10px; background:var(--surface-2)}
.sup-rolle{padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700}
.sup-rolle.owner{background:var(--mond); color:var(--mond-schrift)}
.sup-team-neu{display:flex; gap:6px; margin-top:6px}
.sup-team-neu input{flex:1; min-width:0}
/* Team-Sicht: eigene Antworten rechts, der Kunde links. Dazu wartet nach
   einer Team-Antwort niemand auf den Assistenten - keine drei Punkte. */
.team-sicht .sup-blase.von-nutzer{align-self:flex-start; border-bottom-left-radius:5px;
  border-bottom-right-radius:14px; background:var(--surface-2); border-color:var(--hairline)}
.team-sicht .sup-blase.von-support{align-self:flex-end; border-bottom-left-radius:14px;
  border-bottom-right-radius:5px; background:color-mix(in srgb,var(--accent) 14%,var(--surface-2));
  border-color:color-mix(in srgb,var(--accent) 35%,var(--hairline))}

/* Supportbefehle (07.10.2026): Chips unter dem Teamkopf, Vorschlagsliste
   ueber dem Eingabefeld, Antworten nur fuers Team (gestrichelt). */
.sup-befehle{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.sup-befehl-chip{font:600 12px/1 var(--spiel,inherit);padding:6px 9px;border-radius:999px;
  border:1px solid var(--line,#29292d);background:var(--surface-2,#1a1a1d);color:var(--text,#ffd400);cursor:pointer}
.sup-befehl-chip.owner{border-color:color-mix(in srgb,var(--mond,#ffd400) 55%,transparent)}
.sup-befehl-chip:hover{background:color-mix(in srgb,var(--mond,#ffd400) 25%,var(--surface-2,#1a1a1d))}
#sup-f-form{position:relative}
.sup-befehl-hilfe{position:absolute;left:0;right:0;bottom:100%;margin-bottom:6px;z-index:5;
  max-height:240px;overflow:auto;background:var(--surface,#131315);border:1px solid var(--line,#29292d);
  border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.4);padding:4px}
.sup-befehl-hilfe[hidden]{display:none}
.sup-befehl-hilfe button{display:block;width:100%;text-align:left;background:none;border:0;
  color:var(--text,#ffd400);padding:7px 9px;border-radius:8px;cursor:pointer;font-size:13px}
.sup-befehl-hilfe button:hover{background:var(--surface-2,#1a1a1d)}
.sup-befehl-hilfe small{display:block;color:var(--muted,#a49bc9);font-size:11.5px;margin-top:2px}
.sup-notiz{margin:8px 0;padding:8px 10px;border:1px dashed color-mix(in srgb,var(--mond,#ffd400) 60%,transparent);
  border-radius:10px;font-size:12.5px;white-space:pre-wrap;color:var(--text,#ffd400);
  background:color-mix(in srgb,var(--mond,#ffd400) 8%,transparent)}
.sup-notiz.fehler{border-color:#e05a5a;background:rgba(224,90,90,.08)}
.sup-notiz-kopf{display:block;font-size:11px;color:var(--muted,#a49bc9);margin-bottom:4px;font-family:var(--mono,monospace)}

/* Klebende Marktleiste schliesst an die Kopfzeile an (07.10.2026).
   Gemeldet: beim Scrollen am PC ein Spalt zwischen Kopfzeile und
   Filterleiste, durch den die Kacheln laufen. Die Leiste war durchsichtig
   (nur Unschaerfe) und hatte runde Ecken - oben lief der Inhalt scharf
   durch. Jetzt eine getoente Glasflaeche ohne Rundung, die 6 px unter die
   Kopfzeile reicht (`::before`), damit auch ein Bruchteil-Pixel bei
   Windows-Skalierung nichts durchlaesst. Die Kopfzeile liegt darueber. */
@media (min-width:761px){
body.markt-app .markt-leiste{
  /* Deckend (14.10.2026): mit 82 % schimmerten die "1x"-Marken der
     Kacheln beim Scrollen durch. */
  background:var(--ground) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-radius:0 !important;
}
body.markt-app .markt-leiste::before{
  content:""; position:absolute; left:0; right:0; top:-6px; height:6px;
  background:inherit; -webkit-backdrop-filter:inherit; backdrop-filter:inherit;
  pointer-events:none;
}
}

/* ===== Antworten und Reaktionen (07.10.2026) =====
   Live-Chat und Direktnachrichten. Leiste beim Drueberfahren oben rechts
   an der Nachricht (am Handy nach Antippen, Klasse .aktiv), darunter die
   Reaktionen als Pillen, ueber dem Text das Zitat der beantworteten Zeile. */
.nachr{position:relative}
.nachr-leiste{position:absolute; top:-15px; right:8px; z-index:5; display:none;
  align-items:center; gap:1px; padding:3px; border-radius:12px;
  background:var(--surface-2, #1d1d20); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 6px 18px rgba(0,0,0,.4)}
.nachr:first-child .nachr-leiste{top:2px}
/* Blasen: die Leiste waechst von der Kante der Blase weg, die am Rand
   des Gespraechs liegt - sonst laeuft sie bei kurzen Nachrichten aus dem
   Bild (am Handy so gesehen). Am PC steht sie NEBEN der Blase und deckt
   keinen Text zu; ::before ueberbrueckt die Luecke fuer die Maus. */
.dm-zeile.seins .nachr-leiste{right:auto; left:0}
.dm-zeile.meins .nachr-leiste{right:0; left:auto}
@media (min-width:761px){
  .dm-zeile .nachr-leiste{top:50%; transform:translateY(-50%)}
  .dm-zeile.seins .nachr-leiste{left:calc(100% + 6px)}
  .dm-zeile.meins .nachr-leiste{right:calc(100% + 6px)}
  .dm-zeile .nachr-leiste::before{content:""; position:absolute; top:0; bottom:0;
    left:-10px; right:-10px; z-index:-1}
}
@media (hover:hover){ .nachr:hover .nachr-leiste{display:flex} }
.nachr.aktiv .nachr-leiste,.nachr:focus-within .nachr-leiste{display:flex}
.nachr-leiste button{all:unset; box-sizing:border-box; width:28px; height:28px;
  display:grid; place-items:center; border-radius:8px; cursor:pointer;
  font-size:16px; line-height:1; color:var(--ink-2, #d6d6da);
  transition:transform .12s, background .12s}
.nachr-leiste button:hover{background:rgba(255,255,255,.09); transform:scale(1.18)}
.nachr-leiste .nl-mehr,.nachr-leiste .nl-antwort{transform:none !important}
.nachr-leiste .nl-mehr{border-left:1px solid rgba(255,255,255,.1); border-radius:0 8px 8px 0;
  margin-left:2px}
.nachr-leiste button:focus-visible{outline:2px solid var(--blau, #ffd400)}

.reakt-reihe{display:flex; flex-wrap:wrap; gap:4px}
.reakt-reihe:empty{display:none}
.chat-inhalt .reakt-reihe{margin-top:4px}
.reakt-pille{all:unset; box-sizing:border-box; display:inline-flex; align-items:center;
  gap:4px; height:24px; padding:0 8px; border-radius:999px; cursor:pointer;
  font-size:14px; line-height:1; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1); transition:background .12s}
.reakt-pille b{font-size:11.5px; font-weight:700; color:var(--ink-2, #d6d6da);
  font-family:var(--spiel, inherit)}
.reakt-pille:hover{background:rgba(255,255,255,.11)}
.reakt-pille.ich{background:color-mix(in srgb, #ffd400 28%, transparent);
  border-color:#ffd400}
.reakt-pille.ich b{color:#fff}

.nachr-zitat{all:unset; box-sizing:border-box; display:block; max-width:100%;
  margin:2px 0 3px; padding:2px 0 2px 9px; border-left:3px solid #ffd400;
  font-size:12px; line-height:1.35; color:var(--ink-3, #9a92c4); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nachr-zitat b{color:var(--ink-2, #d6d6da); font-weight:700}
.nachr-zitat:hover{color:var(--ink-2, #d6d6da)}
@keyframes nachr-blitz{0%,40%{background:color-mix(in srgb,#ffd400 30%,transparent)}}
.nachr-blitz{animation:nachr-blitz 1.4s ease-out}

/* Direktnachrichten: Zitat und Pillen in eigener Zeile der Blase. */
/* Als Raster, nicht als umbrechende Flex-Zeile: dort zaehlt jede Zeile mit
   100 % Breite zur Breite der Blase, und kurze Nachrichten mit Reaktion
   wurden so breit wie erlaubt. Das Zitat traegt gar nicht zur Breite bei
   (width:0 + min-width:100%) - es kuerzt sich auf die Blase. */
.dm-zeile.nachr{display:grid; grid-template-columns:minmax(0,auto) auto;
  column-gap:9px; align-items:baseline; justify-content:start}
.dm-zeile.meins.nachr{justify-content:end}
.dm-zeile .nachr-zitat,.dm-zeile .reakt-reihe{grid-column:1 / -1}
.dm-zeile .nachr-zitat{width:0; min-width:100%}
.dm-zeile .reakt-reihe{margin-top:2px}

/* "Replying to ..." ueber dem Eingabefeld. */
.antwort-leiste{display:flex; align-items:center; gap:8px; padding:6px 10px 6px 12px;
  border-top:1px solid rgba(255,255,255,.08); background:rgba(255,212,0,.1);
  font-size:12.5px; color:var(--ink-3, #9a92c4)}
.antwort-leiste[hidden]{display:none}
.antwort-text{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.antwort-text b{color:var(--ink, #ffd400)}
.antwort-pfeil{width:14px; height:14px; flex:0 0 14px; background:#ffd400;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5A5.5 5.5 0 0 1 20 14.5A5.5 5.5 0 0 1 14.5 20H11'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5A5.5 5.5 0 0 1 20 14.5A5.5 5.5 0 0 1 14.5 20H11'/%3E%3C/svg%3E") center/contain no-repeat}
.antwort-zu{all:unset; cursor:pointer; width:22px; height:22px; display:grid;
  place-items:center; border-radius:50%; font-size:17px; color:var(--ink-2, #d6d6da)}
.antwort-zu:hover{background:rgba(255,255,255,.1)}

/* ===== Chat: Abzeichen, Anpinnen, Leiste am Handy (07.10.2026) ===== */
.abzeichen{display:inline-flex; align-items:center; height:17px; padding:0 6px;
  margin-left:5px; border-radius:6px; font-size:10.5px; font-weight:700;
  letter-spacing:.02em; line-height:1; vertical-align:1px;
  font-family:var(--spiel, inherit); text-transform:none}
.ab-owner{background:#f5b301; color:#2a1c00}
.ab-mod{background:#22c55e; color:#06240f}
.chat-pins{display:flex; flex-direction:column; gap:2px; padding:6px 8px;
  border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,212,0,.08)}
.chat-pins[hidden]{display:none}
.chat-pin{all:unset; box-sizing:border-box; display:flex; align-items:center; gap:7px;
  padding:4px 6px; border-radius:7px; cursor:pointer; font-size:12.5px;
  color:var(--ink-2, #d6d6da); min-width:0}
.chat-pin:hover{background:rgba(255,255,255,.06)}
.chat-pin-zeichen{color:#ffd400; display:grid; flex:0 0 auto}
.chat-pin-text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.chat-pin-text b{color:var(--ink, #ffd400)}
.chat-zeile.ist-angepinnt{box-shadow:inset 3px 0 0 #ffd400}
.nachr-leiste .nl-pin{border-left:1px solid rgba(255,255,255,.1); border-radius:0 8px 8px 0;
  margin-left:2px; transform:none !important}
.nachr-leiste .nl-pin.an{color:#ffd400}
/* Im Chat steht die Leiste jetzt in .chat-inhalt; am PC weiter oben rechts
   an der Zeile (positioniert ist nur .nachr). */
.chat-inhalt{position:static}
/* Am Handy (ohne Drueberfahren): die Leiste steht UNTER der Nachricht,
   nicht ueber dem Text - vorher deckte sie im Privatchat den Text zu. */
@media (hover:none){
  .nachr.aktiv .nachr-leiste{position:static; transform:none; margin-top:6px;
    width:max-content; max-width:100%; flex-wrap:wrap; box-shadow:none}
  .dm-zeile.nachr.aktiv{grid-template-columns:1fr auto; max-width:92%}
  .dm-zeile.nachr.aktiv .nachr-leiste{grid-column:1 / -1}
  .dm-zeile.meins.aktiv .nachr-leiste{justify-self:end}
  .nachr-leiste button{width:34px; height:34px; font-size:19px}
  .nachr:focus-within:not(.aktiv) .nachr-leiste{display:none}
}

/* ===== Claim-Fenster "You got ..." (07.10.2026) =====
   Wie das Auspacken im Spiel: grosses Bild im Licht der Stufenfarbe, ein
   Knopf. --c kommt aus der Stufe (data-stufe). */
.claim-fenster{--c:#ffd400; width:min(360px, calc(100vw - 32px)); padding:26px 22px 20px;
  border:0; border-radius:20px; text-align:center; color:var(--ink, #ffd400);
  background:radial-gradient(120% 70% at 50% 30%, color-mix(in srgb, var(--c) 32%, #131315) 0%, #131315 70%);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--c) 60%, transparent), 0 24px 60px rgba(0,0,0,.6)}
.claim-fenster::backdrop{background:rgba(6,4,16,.72)}
.claim-fenster[data-stufe="common"]{--c:#b8b8c8}
.claim-fenster[data-stufe="uncommon"]{--c:#22c7d4}
.claim-fenster[data-stufe="rare"]{--c:#3b82f6}
.claim-fenster[data-stufe="legendary"]{--c:#ef4444}
.claim-fenster[data-stufe="godly"]{--c:#e040e0}
.claim-fenster[data-stufe="ancient"]{--c:#a855f7}
.claim-fenster[data-stufe="unique"]{--c:#f59e0b}
.claim-fenster[data-stufe="vintage"]{--c:#c8a46a}
.claim-fenster[data-stufe="chroma"]{--c:#ff7ad9}
.claim-fenster[data-stufe="pet"]{--c:#4ade80}
.claim-zu{all:unset; position:absolute; top:10px; right:12px; width:30px; height:30px;
  display:grid; place-items:center; border-radius:50%; cursor:pointer; font-size:22px;
  color:var(--ink-2, #d6d6da)}
.claim-zu:hover{background:rgba(255,255,255,.1)}
.claim-quelle{margin:0 0 2px; font-size:13px; color:var(--ink-2, #d6d6da); font-family:var(--spiel, inherit)}
.claim-titel{margin:0 0 10px; font-size:26px; font-family:var(--spiel, inherit)}
.claim-bild{position:relative; height:170px; display:grid; place-items:center}
.claim-bild::before{content:""; position:absolute; inset:10px 40px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--c) 55%, transparent) 0%, transparent 70%);
  animation:claim-schein 2.4s ease-in-out infinite}
.claim-bild img{position:relative; max-width:170px; max-height:160px;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.claim-name{margin:8px 0 2px; font-size:20px; font-weight:700; font-family:var(--spiel, inherit)}
.claim-stufe{margin:0 0 16px; font-size:13px; font-weight:700; text-transform:capitalize; color:var(--c)}
.claim-knopf{width:100%; min-height:46px; font-size:17px}
.claim-hinweis{margin:10px 0 0}
.claim-neu .claim-bild img{animation:claim-pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes claim-pop{from{transform:scale(.3) rotate(-12deg); opacity:0}}
@keyframes claim-schein{50%{transform:scale(1.12); opacity:.75}}
@media (prefers-reduced-motion: reduce){
  .claim-bild::before, .claim-neu .claim-bild img{animation:none}
}

/* "Trust this device" unter dem 2FA-Code (07.10.2026) */
.tfa-vertrauen{display:flex; align-items:center; gap:9px; margin:4px 0 2px;
  font-size:14px; text-transform:none; letter-spacing:0; font-weight:600;
  color:var(--ink-2, #d6d6da); cursor:pointer}
.tfa-vertrauen input{width:18px; height:18px; accent-color:#ffd400; margin:0}
.dc-woche{display:flex; align-items:center; justify-content:space-between; gap:14px}
.dc-woche .dc-art-text{display:flex; flex-direction:column; gap:3px; min-width:0}

/* Deckung im Dashboard (08.10.2026): fehlt Geld bei NOWPayments, faellt die Kachel auf. */
.db-deckung{margin-bottom:14px}
.db-kachel.db-warnung{border-color:#f59e0b;box-shadow:0 0 0 1px #f59e0b inset}
.db-kachel.db-warnung strong{color:#fbbf24}

/* Set craften (08.10.2026): Teile fliegen zusammen, Blitz, das Set springt heraus. */
.craft-buehne{position:relative; height:260px; display:grid; place-items:center; overflow:hidden;
  border-radius:16px; margin-top:6px;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--blau, #ffd400) 30%, transparent), transparent 65%)}
.craft-teil{position:absolute; width:96px; height:96px; display:grid; place-items:center;
  transform:translate(var(--dx), var(--dy)) rotate(-8deg); opacity:1}
.craft-teil img{max-width:100%; max-height:100%; filter:drop-shadow(0 6px 0 rgba(0,0,0,.4))}
.craft-buehne.los .craft-teil{animation:craft-zusammen .55s cubic-bezier(.6,0,.9,.5) var(--verz) forwards}
@keyframes craft-zusammen{to{transform:translate(0,0) rotate(0) scale(.5); opacity:0}}
.craft-blitz{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none}
.craft-buehne.los .craft-blitz{animation:craft-blitz .5s ease-out .62s}
@keyframes craft-blitz{0%{opacity:.85} 100%{opacity:0}}
.craft-ergebnis{display:flex; align-items:center; justify-content:center; gap:6px; transform:scale(0)}
.craft-ergebnis img{max-height:190px; max-width:260px; filter:drop-shadow(0 10px 0 rgba(0,0,0,.45))}
.craft-buehne.los .craft-ergebnis{animation:craft-raus .6s cubic-bezier(.3,1.6,.5,1) .65s forwards}
@keyframes craft-raus{from{transform:scale(0) rotate(-14deg)} to{transform:scale(1) rotate(0)}}
.craft-konfetti{position:absolute; left:50%; top:50%; width:0; height:0}
.craft-konfetti i{position:absolute; width:56px; height:56px; margin:-28px 0 0 -28px; opacity:0;
  display:grid; place-items:center}
.craft-konfetti i img{max-width:100%; max-height:100%; filter:drop-shadow(0 4px 0 rgba(0,0,0,.4))}
.craft-buehne.los .craft-konfetti i{animation:craft-konfetti 1.6s cubic-bezier(.15,.6,.35,1) var(--verz) forwards}
@keyframes craft-konfetti{
  0%{opacity:1; transform:translate(0,0) rotate(0) scale(.3)}
  70%{opacity:1}
  100%{opacity:0; transform:translate(calc(var(--x) * 330px), calc(var(--y) * 210px + 150px)) rotate(var(--r)) scale(var(--g))}}
.craft-text{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; margin-top:12px;
  opacity:0; animation:craft-text .4s ease-out 1s forwards}
.craft-text strong{font-size:1.6rem}
@keyframes craft-text{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.craft-knoepfe{display:flex; gap:10px; justify-content:center; margin-top:14px; opacity:0;
  animation:craft-text .4s ease-out 1.15s forwards}
@media (prefers-reduced-motion: reduce){
  .craft-teil{display:none}
  .craft-ergebnis{transform:none}
  .craft-buehne.los .craft-ergebnis, .craft-buehne.los .craft-blitz, .craft-buehne.los .craft-konfetti i{animation:none}
  .craft-text, .craft-knoepfe{opacity:1; animation:none}
}

/* Tutorials (08.10.2026): Video mit Kapiteln wie bei YouTube */
.tut-seite{max-width:1080px; margin:0 auto; padding:24px 16px 48px; display:flex; flex-direction:column; gap:20px}
.tut-kopf h1{margin:0 0 6px}
.tut-buehne{display:flex; flex-direction:column; gap:8px}
.tut-video{border-radius:16px; overflow:hidden; background:#000; box-shadow:0 24px 60px rgba(0,0,0,.45)}
.tut-video video{display:block; width:100%; aspect-ratio:16/9; background:#000}
.tut-leiste{display:flex; gap:4px; height:8px}
.tut-abschnitt{position:relative; padding:0; border:0; border-radius:4px; overflow:hidden; cursor:pointer;
  background:var(--surface-2, #241f3f); min-width:6px}
.tut-abschnitt:hover{background:var(--surface-3, #2e2850)}
.tut-fuell{position:absolute; inset:0 auto 0 0; width:0; background:var(--blau, #ffd400)}
.tut-kapitel{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px}
.tut-kapitel a{display:flex; gap:14px; align-items:flex-start; padding:12px 14px; border-radius:12px; text-decoration:none;
  color:inherit; background:var(--surface, #131315); border:1px solid transparent}
.tut-kapitel a:hover{border-color:var(--hairline-2, rgba(255,255,255,.12))}
.tut-kapitel a.an{border-color:var(--blau, #ffd400); background:color-mix(in srgb, var(--blau, #ffd400) 12%, var(--surface, #131315))}
.tut-zeit{font-variant-numeric:tabular-nums; font-weight:800; color:var(--blau, #ffd400); background:rgba(255,212,0,.14);
  padding:2px 8px; border-radius:6px; flex:none}
.tut-text{display:flex; flex-direction:column; gap:2px}
.tut-text .muted{font-size:.88rem}

/* "How it works"-Verweis auf den Feature-Seiten */
.wie-link{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; white-space:nowrap;
  font-size:.85rem; font-weight:800; text-decoration:none; color:var(--ink-2, #cfc6ff);
  background:rgba(255,255,255,.05); border:1px solid var(--hairline-2, rgba(255,255,255,.12))}
.wie-link:hover{color:#fff; border-color:var(--blau, #ffd400)}
.markt-leiste .wie-link{margin-left:auto}
.markt-leiste .sort-wahl + .wie-link{margin-left:8px}
.dm-titel{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.set-wie{padding:0 56px 0 4px; margin:-4px 0 6px}
@media (max-width:760px){
  .wie-link span{display:none}
  .wie-link{padding:7px}
  .tut-kapitel{grid-template-columns:1fr}
}
/* ==== How it works (08.10.2026) ====================================
   Aufklappbare Karte mit nummerierten Schritten: Minigames, 1v1 und das
   Sets-Fenster. Eine Flaeche, lila Nummern, keine Rahmenlinien. */
.wie-box{background:var(--surface,#131315);border-radius:16px;margin:4px 0 18px;padding:0}
.wie-box > summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:12px 16px;font-family:var(--spiel,inherit);font-weight:600;font-size:1rem;
  color:var(--text,#ffd400);user-select:none;text-transform:none;letter-spacing:0}
.wie-box > summary::-webkit-details-marker{display:none}
.wie-frage{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:#ffd400;color:#fff;font-weight:700;font-size:.9rem;flex:none}
.wie-pfeil{margin-left:auto;width:9px;height:9px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);opacity:.6;transition:transform .2s}
.wie-box[open] > summary .wie-pfeil{transform:rotate(-135deg) translateY(-2px)}
.wie-schritte{list-style:none;margin:0;padding:0 16px 4px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;counter-reset:none}
.wie-schritte li{background:var(--surface-2,#1d1d20);border-radius:12px;padding:12px 14px;
  display:flex;flex-direction:column;gap:4px;min-width:0}
.wie-nr{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;
  background:rgba(255,212,0,.22);color:#ffeaa3;font-size:.85rem;margin-bottom:4px}
.wie-schritte strong{font-family:var(--spiel,inherit);font-size:.95rem;color:var(--text,#ffd400)}
.wie-schritte span{font-size:.84rem;line-height:1.4;color:var(--muted,#b0a8d6)}
.wie-fuss{margin:8px 16px 0;padding:0 0 14px;font-size:.82rem;color:var(--muted,#b0a8d6)}
.wie-box:not([open]){margin-bottom:12px}
@media (max-width:900px){.wie-schritte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){
  .wie-schritte{grid-template-columns:1fr;gap:8px}
  .wie-schritte li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:2px;padding:10px 12px}
  .wie-nr{grid-row:span 2;margin:0}
}
/* Im Sets-Fenster: Titel mit Satz darunter, die Karte zwei Spalten breit
   (das Fenster ist schmal), auf dem zweiten Grund statt dem ersten. */
.setfenster .set-kopf{margin:0 52px 12px 0}
.setfenster .set-kopf .set-titel{margin:0 0 4px}
.setfenster .set-kopf p{margin:0;line-height:1.4}
.setfenster .wie-box{background:var(--surface-2,#1d1d20);margin:0 0 14px}
.setfenster .wie-schritte{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:14px}
.setfenster .wie-schritte li{background:var(--surface,#131315)}
@media (max-width:480px){.setfenster .wie-schritte{grid-template-columns:1fr}}
.wie-schritte li{text-align:left;align-items:flex-start}
@media (max-width:480px){.wie-nr{align-self:start;margin-top:1px}}
/* Video-Verweis in der How-it-works-Karte (statt eines losen Links oben
   links im Set-Fenster bzw. im Kopf der Minigames). */
.wie-video{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:.8rem;font-weight:700;text-decoration:none;color:#ffeaa3;background:rgba(255,212,0,.16)}
.wie-video:hover{background:rgba(255,212,0,.3);color:#fff}
.wie-video + .wie-pfeil{margin-left:6px}
.setfenster .wie-video::before{content:"";width:0;height:0;border-left:8px solid currentColor;
  border-top:5px solid transparent;border-bottom:5px solid transparent}

/* Tutorials: "Still have questions?" unter den Kapiteln (08.10.2026) */
.tut-fragen{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 20px;border-radius:16px;background:var(--surface,#131315)}
.tut-fragen > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.tut-fragen strong{font-family:var(--spiel,inherit);font-size:1.15rem}
@media (max-width:760px){.tut-fragen .btn{width:100%;justify-content:center}}

/* "How it works" am Handy (08.10.2026): vorher nur ein kleiner Kreis mit
   Play-Zeichen, der zwischen den Knoepfen unterging. Jetzt eine lila Pille
   mit "Tutorial" - sieht man, ohne zu suchen. */
@media (max-width:760px){
  .wie-link{padding:6px 11px 6px 8px;gap:5px;color:#fff;background:#ffd400;border-color:transparent;
    box-shadow:0 2px 0 #6d3fe0}
  .wie-link span{display:inline;font-size:.8rem}
  .wie-link span{font-size:0}
  .wie-link span::after{content:"Tutorial";font-size:.8rem}
}

/* Verkaufsgraph am Handy (09.10.2026): Tippen zeigt den Tag. Seitwaerts
   wischen fuehrt ihn mit, hoch/runter rollt weiter die Seite. Das Schild
   steht ueber dem Graphen, nicht darin - sonst deckt es die Linie zu. */
.graph svg.g-svg{touch-action:pan-y; cursor:crosshair; -webkit-tap-highlight-color:transparent}
.graph .g-tipp{top:6px; bottom:auto}
.g-fuehrung{stroke:var(--ink-3,#8a83ad); stroke-width:1; stroke-dasharray:3 4; vector-effect:non-scaling-stroke}
.g-fuehrung[hidden],.g-punkt[hidden]{display:none}
.g-tipp strong{order:0 !important; color:var(--ink-2,#cfc6ff)}
.g-tipp .g-menge{order:1 !important}
.g-tipp .g-preis{order:2 !important; color:var(--preis,#4ade80)}
.g-tipp .g-preis.g-leer{color:var(--ink-3)}
.card:has(> .graph){overflow:visible}

/* Sortierung: das gewoehnliche <select> stand beim Laden kurz in
   Browseroptik da, bis auswahlmenue.js die eigene Liste baute - nach jedem
   Wechsel (die Seite laedt neu) blitzte es auf. html.js setzt ein
   Inline-Skript im <head>; bis zum Umbau bleibt der Platz, aber leer. */
html.js .sort-wahl select:not(.am-versteckt){visibility:hidden}

/* ===== Verkaufsgraph: 7 / 30 Tage (09.10.2026) =====
   Umschalter wie die Inventar-Sortierung; Knoepfe statt Verweise, weil
   nur graph.js neu zeichnet. Die allgemeinen Knopfregeln (lila, 3D-Kante)
   muessen hier ausdruecklich zurueckgesetzt werden. */
.graph-zeitraum{display:inline-flex; align-items:center; gap:10px}
.graph-tage{padding:3px}
.graph-tage button{all:unset; box-sizing:border-box; cursor:pointer;
  padding:5px 12px !important; border-radius:9px !important; font-family:var(--spiel) !important;
  font-weight:600 !important; font-size:13px !important; color:var(--ink-2) !important;
  background:transparent !important; box-shadow:none !important; white-space:nowrap;
  transform:none !important}
.graph-tage button:hover{color:#fff !important; background:var(--surface-2) !important}
.graph-tage button[aria-pressed="true"]{background:var(--wahl-grund) !important;
  color:var(--wahl-schrift) !important}
.graph-tage button:focus-visible{outline:2px solid var(--blau); outline-offset:2px}

/* ===== Verkaufsgraph als Kurschart (09.10.2026) =====
   graph.js zeichnet in echten Pixeln: oben Preis (Linie + Flaeche),
   darunter Verkaeufe je Tag (Balken), eine Zeitachse. Die alten Regeln
   fuer .graph (feste Hoehe, gedehntes SVG) gelten hier nicht mehr. */
.graph{height:auto !important; min-height:0; margin-top:18px; color:var(--mond)}
.graph .vg-svg{display:block; width:100%; height:auto; overflow:visible;
  touch-action:pan-y; cursor:crosshair; -webkit-tap-highlight-color:transparent}
.vg-titel{font:600 11px var(--spiel,inherit); fill:var(--ink-3)}
.vg-skala,.vg-tag{font:600 11px var(--spiel,inherit); fill:var(--ink-3);
  font-variant-numeric:tabular-nums}
.vg-tag{fill:var(--ink-2)}
.vg-raster{stroke:var(--hairline); stroke-width:1; stroke-dasharray:2 5}
.vg-grund{stroke:var(--hairline-2,var(--hairline)); stroke-width:1}
.vg-flaeche{fill:url(#vg-flaeche)}
.vg-linie{fill:none; stroke:currentColor; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.vg-marke{fill:currentColor; stroke:var(--surface); stroke-width:2}
.vg-punkt{fill:var(--surface); stroke:currentColor; stroke-width:3}
.vg-punkt[hidden],.vg-band[hidden]{display:none}
.vg-wert{font:700 13px var(--spiel,inherit); fill:var(--ink); paint-order:stroke;
  stroke:var(--surface); stroke-width:4px; stroke-linejoin:round}
.vg-leer{font:600 13px var(--spiel,inherit); fill:var(--ink-3)}
.vg-balken{fill:color-mix(in srgb, var(--mond) 55%, var(--surface-2))}
.vg-band{fill:color-mix(in srgb, var(--ink) 7%, transparent)}
.graph .vg-tipp{top:30px; bottom:auto}
/* Stueckzahl ueber den Balken (09.10.2026) */
.vg-zahl{font:700 13px var(--spiel,inherit); fill:var(--ink); font-variant-numeric:tabular-nums}
.vg-zahl.vg-null{font-weight:600; font-size:11px; fill:var(--ink-3); opacity:.6}
.vg-balken{fill:color-mix(in srgb, var(--mond) 75%, var(--surface-2))}

/* ===== Verkaufsgraph mit zwei Linien (09.10.2026, nach StarPets) =====
   Ein Feld: gruen der Preis (Skala links), lila die Stueck (Skala rechts),
   Datum darunter, Karte ueber dem Punkt beim Tippen. */
.graph{position:relative}
.vg-preis{fill:none; stroke:var(--preis,#4ade80); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.vg-menge{fill:none; stroke:var(--mond); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.vg-preis-einzel{fill:var(--preis,#4ade80)}
.vg-skala-p{fill:color-mix(in srgb, var(--preis,#4ade80) 70%, var(--ink-3))}
.vg-skala-m{fill:color-mix(in srgb, var(--mond) 70%, var(--ink-3))}
.vg-raster{stroke-dasharray:none; opacity:.55}
.vg-fuehrung{stroke:var(--ink-3); stroke-width:1.5; stroke-dasharray:4 4}
.vg-punkt-preis,.vg-punkt-menge{stroke:var(--surface); stroke-width:3}
.vg-punkt-preis{fill:var(--preis,#4ade80)}
.vg-punkt-menge{fill:var(--mond)}
.vg-fuehrung[hidden],.vg-punkt-preis[hidden],.vg-punkt-menge[hidden]{display:none}
.vg-karte{position:absolute; z-index:3; pointer-events:none; display:flex; flex-direction:column;
  align-items:flex-start; gap:1px; padding:8px 12px; border-radius:12px; white-space:nowrap;
  background:var(--surface-2); border:1px solid var(--hairline);
  box-shadow:0 6px 18px rgba(0,0,0,.35)}
.vg-karte[hidden]{display:none}
.vg-karte .k-preis{font:700 22px/1.1 var(--spiel,inherit); color:var(--preis,#4ade80);
  font-variant-numeric:tabular-nums}
.vg-karte .k-preis.k-leer{font-size:16px; color:var(--ink-3)}
.vg-karte .k-menge{font:700 14px var(--spiel,inherit); color:var(--ink)}
.vg-karte .k-tag{font:600 12px var(--spiel,inherit); color:var(--ink-3)}
.vg-legende{display:flex; justify-content:center; gap:18px; margin-top:6px;
  font:600 12px var(--spiel,inherit); color:var(--ink-2)}
.vg-legende span{display:inline-flex; align-items:center; gap:6px}
.vg-legende i{display:inline-block; width:16px; height:3px; border-radius:2px}
.vg-legende .l-p i{background:var(--preis,#4ade80)}
.vg-legende .l-m i{background:var(--mond)}

/* ── Angebot im Chat: Ablage ueber dem Eingabefeld (10.10.2026) ─────────
   Das Fenster waehlt nur noch Items; Menge und Preis stehen hier, mitten im
   Gespraech. Jede Zeile wird ein eigenes Angebot. */
/* Nur am PC begrenzt: am Handy rollt das ganze Fenster, und eine feste
   Hoehe hier liess den klebenden Fuss mitten im Raster stehen (iPhone,
   10.10.2026) - sticky klebt nur innerhalb seines Kastens. */
@media (min-width:761px){
  .ang-wahlfenster #ang-schritt2:not([hidden]){display:flex; flex-direction:column;
    max-height:calc(88vh - 78px); min-height:0}
}
.ang-wahlfenster .ang-katalog{border-right:0; flex:1 1 auto; min-height:0}
.ang-wahlfenster .gf-raster{max-height:none}
.ang-wahlfenster .gf-fuss{align-items:center}
.ang-wahlfenster #ang-uebernehmen{margin-left:auto}
.gf-kachel{position:relative}
.gf-kachel .gf-habe{position:absolute; top:4px; right:5px; font-size:.66rem;
  color:var(--text-schwach, #a8a9af)}
.gf-kachel.an::after{content:""; position:absolute; top:5px; left:5px; width:16px; height:16px;
  border-radius:50%; background:var(--mond, #ffd400) no-repeat center/10px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E")}

.ang-ablage{display:flex; flex-direction:column; gap:8px; margin:0;
  padding:10px 13px; border-top:1px solid var(--hairline);
  background:var(--surface-2, #1a1a1d); max-height:46vh; overflow-y:auto;
  overscroll-behavior:contain}
.ang-ablage[hidden]{display:none}
.ang-kopf{display:flex; align-items:center; gap:8px}
.ang-seite{display:inline-flex; padding:3px; gap:2px; border-radius:999px;
  background:var(--surface, #131315); border:1px solid var(--hairline)}
.ang-seite button{border:0; background:transparent; color:var(--text-schwach, #a8a9af);
  font:inherit; font-size:.82rem; padding:4px 12px; border-radius:999px; cursor:pointer}
.ang-seite button.an{background:var(--wahl-grund, #ffd400); color:#0b0b0c; font-weight:600}
.ang-kopf #ang-plus{margin-left:auto}
.ang-zu{width:30px; height:30px; flex:0 0 30px; border-radius:50%; cursor:pointer; position:relative;
  border:1px solid var(--hairline); background:transparent}
.ang-zu::before,.ang-zu::after,.ang-weg::before,.ang-weg::after{content:""; position:absolute;
  left:50%; top:50%; width:12px; height:2px; border-radius:2px;
  background:var(--text-schwach, #a8a9af)}
.ang-zu::before,.ang-weg::before{transform:translate(-50%,-50%) rotate(45deg)}
.ang-zu::after,.ang-weg::after{transform:translate(-50%,-50%) rotate(-45deg)}
.ang-hinweis{margin:0}
.ang-liste{display:flex; flex-direction:column; gap:6px}
.ang-liste[hidden]{display:none}
.ang-zeile{display:grid; grid-template-columns:40px minmax(0,1fr) 64px 10px 104px 30px;
  align-items:center; gap:7px; padding:6px 8px; border-radius:12px;
  background:var(--surface, #131315); border:1px solid var(--hairline)}
.ang-zeile:not(:has(img)){grid-template-columns:minmax(0,1fr) 64px 10px 104px 30px}
.ang-zeile.fehlt{border-color:var(--warn, #e8b04b)}
.ang-zeile img{width:40px; height:40px; object-fit:contain}
.ang-name{display:flex; flex-direction:column; min-width:0}
.ang-name strong{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem}
.ang-zeile.fehlt .ang-habe{color:var(--warn, #e8b04b)}
.ang-zeile input.ang-menge{width:100%; padding:6px 8px; text-align:center}
.ang-mal{text-align:center}
.ang-preis{display:flex; align-items:center; gap:3px; padding:0 8px; border-radius:10px;
  border:2px solid var(--hairline); background:var(--surface-2, #1a1a1d);
  text-transform:none; letter-spacing:0; margin:0}
.ang-preis:focus-within{border-color:var(--mond, #ffd400)}
.ang-preis span{color:var(--text-schwach, #a8a9af)}
.ang-preis input{flex:1; min-width:0; border:0 !important; background:transparent !important;
  padding:6px 0 !important; box-shadow:none !important; outline:0}
.ang-weg{width:30px; height:30px; border-radius:50%; border:0; cursor:pointer;
  background:transparent; position:relative}
.ang-fuss{display:flex; align-items:center; justify-content:space-between; gap:10px;
  position:sticky; bottom:-10px; margin:0 -13px -10px; padding:8px 13px 10px;
  background:var(--surface-2, #1a1a1d); border-top:1px solid var(--hairline); z-index:1;
  flex-wrap:wrap}
.ang-fuss #ang-fehler{flex:1 0 100%; margin:0}
.ang-fuss[hidden]{display:none}
.ang-summe{color:var(--preis, #4ade80); font-size:1rem; margin-left:4px}
.ang-pruefen{display:flex; flex-direction:column; gap:6px}
.ang-pruefen[hidden]{display:none}
.ang-satz{margin:0}
.ang-posten{margin:0; padding-left:18px}
.ang-posten:empty{display:none}
.ang-pruefen-tat{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
@media (max-width:760px){
  .ang-ablage{padding:8px 10px; max-height:52vh}
  .ang-fuss{bottom:-8px; margin:0 -10px -8px; padding:8px 10px}
  .ang-zeile,.ang-zeile:not(:has(img)){display:flex; flex-wrap:wrap; row-gap:6px}
  .ang-zeile img{width:36px; height:36px; order:1}
  .ang-name{order:2; flex:1 1 calc(100% - 90px)}
  .ang-weg{order:3}
  .ang-zeile .ang-menge{order:4; width:76px; flex:0 0 76px}
  .ang-mal{order:5; width:12px}
  .ang-preis{order:6; flex:1 1 0; min-width:0}
  .ang-preis input{width:100% !important; min-width:0 !important}
  .ang-zeile input,.ang-preis input{font-size:16px} /* iOS zoomt sonst */
  .ang-pruefen-tat .btn{flex:1}
}
@media (max-width:760px){
  /* Am Handy hat die Auswahl ihre natuerliche Hoehe - das Fenster rollt,
     und "Add to offer" klebt am unteren Rand des Fensters, nicht am Ende
     eines zu kurzen Kastens. */
  .gfenster[open].ang-wahlfenster #ang-schritt2:not([hidden]){flex:1 0 auto; min-height:auto;
    display:flex; flex-direction:column}
  .gfenster[open].ang-wahlfenster .ang-katalog{flex:1 0 auto; min-height:auto}
}

/* "Yours" an Kacheln mit nur eigenen Angeboten (10.10.2026): die Regel
   oben blendet "from" aus - der Hinweis aufs eigene Angebot muss stehen. */
.markt-raster .marktkarte .preis-pille .ab.eigen{display:inline-block !important;
  font-family:var(--spiel); font-size:12px; font-weight:700; color:#fff;
  background:var(--blau); border-radius:999px; padding:2px 8px; margin-bottom:2px;
  align-self:flex-start; width:fit-content}

/* ---- Verhandeln im lila Design (10.10.2026) ----
   Angebotskarte und Fuss des Angebotsfensters waren noch im Grauverlauf aus
   "Schwarz statt Himmel". Jetzt Flaechen wie ueberall, die Karte mit
   lila Rand, solange das Angebot offen ist. */
.dm-angebot{background:var(--surface-2) !important; border:1px solid var(--mond) !important;
  box-shadow:0 4px 0 rgba(0,0,0,.25) !important}
.dm-angebot.zustand-abgelehnt,.dm-angebot.zustand-zurueckgezogen,
.dm-angebot.zustand-hinfaellig{border-color:var(--hairline-2) !important}
.dm-angebot.zustand-angenommen{border-color:var(--preis,#4ade80) !important}
.dm-a-kopf img{width:48px; height:48px; padding:4px; border-radius:10px;
  background:var(--surface-3)}
.dm-a-zahlen dd.mond{color:var(--preis,#4ade80)}
.gfenster .gf-fuss{background:var(--surface) !important; border-top:1px solid var(--hairline) !important}

/* "You pay" im Kaufgesuch-Fenster und "You get/You pay" in der Angebots-
   Ablage: gross, damit man den Betrag sofort sieht (10.10.2026). */
.gf-zahlst{align-items:flex-end; text-align:right}
.gf-zahlst-titel{font-family:var(--spiel,inherit); font-weight:700; font-size:15px; color:var(--text,#ffd400)}
.gf-zahlst #gf-summe{font-size:24px; line-height:1.1; color:var(--preis,#4ade80)}
.vk-gebuehr{margin:-4px 0 6px; text-align:right}
.vk-netto{margin:4px 2px 0}
.vk-netto:empty{display:none}
.ang-betrag{display:flex; flex-direction:column; align-items:flex-end; gap:1px; margin-left:auto; text-align:right}
.ang-betrag-titel{font-family:var(--spiel,inherit); font-weight:700; font-size:14px}
.ang-betrag .ang-summe{font-size:20px; color:var(--preis,#4ade80)}

/* ===== Codex: Coinflip, Affiliate und Interaktionen (11.10.2026) ===== */
.mg-reiter a.muenze{--farbe:#facc15}.coin-symbol{font-size:34px;color:#facc15}.coin-choice{display:flex;gap:12px;margin:12px 0 18px}.coin-choice label{flex:1;padding:13px;border:1px solid var(--hairline);border-radius:12px;font-weight:800;text-align:center;cursor:pointer}.coin-choice input{margin-right:7px}.coinflip-result{max-width:720px;margin:32px auto;padding:30px;text-align:center}.coin-big{font-size:26px;font-weight:800;margin:28px 0}.coin-participants{display:flex;justify-content:center;gap:16px;margin-top:24px}.coin-participants>div{min-width:150px;padding:18px;background:var(--surface-2);border-radius:12px;display:flex;flex-direction:column;gap:5px}
/* Shared game switch and Moonly coin artwork. */
.game-switch{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px;margin-bottom:24px}
.game-switch a{display:flex!important;flex-direction:row!important;align-items:center!important;text-align:left!important;padding:18px!important;gap:15px;min-height:94px;border-radius:18px!important}
.game-switch a.duell{--farbe:#ffe36b}.game-switch a.muenze{--farbe:#f6cc67}
.game-switch .game-icon{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:16px;background:color-mix(in srgb,var(--farbe) 12%,transparent);color:var(--farbe)}
.game-icon>svg{width:32px;height:32px}.game-switch .text strong{font-size:19px!important}.game-switch .text small{display:block!important;font-size:12px}
.flip-coin{display:inline-flex;flex:none;width:54px;height:54px;filter:drop-shadow(0 5px 6px #0005)}
.flip-coin svg{width:100%;height:100%;fill:#f6ce71;stroke:#b47832;stroke-width:3}.flip-coin .coin-ring{fill:#e7b94e;stroke:#ffe6a3;stroke-width:2}.flip-coin .coin-engraving{fill:#fff0b6;stroke:#b98534;stroke-width:1.5}
.flip-coin.tails svg{fill:#c3b3f9;stroke:#7661ae}.flip-coin.tails .coin-ring{fill:#a995df;stroke:#e0d5ff}.flip-coin.tails .coin-engraving{fill:#f6f0ff;stroke:#7d68af}
.flip-coin.large{width:140px;height:140px}.coin-choice label{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--surface-2);border:2px solid transparent;transition:background .15s,border-color .15s}
.coin-choice label input{position:absolute;opacity:0}.coin-choice label:has(input:checked){border-color:var(--mond,#ffd400);background:color-mix(in srgb,var(--mond,#ffd400) 15%,var(--surface-2))}.coin-choice label:hover{border-color:#ffe36b66}.coin-choice label:focus-within{outline:2px solid #ffeaa3}.coin-choice label strong{font-size:21px}.coin-choice label>span:last-child{font-size:12px;color:var(--ink-3)}
.flip-fee-note{font-size:12px;color:var(--ink-3);line-height:1.5;margin:12px 0 18px}.flip-empty-avatar{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#ffd40020;color:#b8a0ee}.flip-empty-avatar svg{width:30px;height:30px}
.flip-arena{padding:26px;border-radius:22px;background:linear-gradient(140deg,#ffd4000c,transparent 55%),var(--surface)}.flip-arena-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.flip-arena-heading h1{font-size:28px;margin:8px 0 22px}.flip-status{padding:7px 13px;border-radius:99px;background:#ffd40022;color:#ffeaa3;font-size:12px;font-weight:800}.flip-status.fertig{color:#5eead4;background:#5eead418}
.flip-match{display:grid;grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr);gap:20px;align-items:center}.flip-player{align-self:stretch;padding:20px;border:1px solid var(--hairline);border-radius:18px;background:var(--surface-2);min-width:0}.flip-player.winner{border-color:#f6cc67;box-shadow:0 0 28px #f6cc6710}.flip-profile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.flip-profile>img,.flip-profile>.avatar-standard{width:44px;height:44px;border-radius:50%}.flip-side{margin-left:auto;font-size:12px;font-weight:800;border-radius:8px;background:#ffd40022;padding:5px 9px;color:#ffeaa3}.flip-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:9px;margin:18px 0}.flip-item{position:relative;display:flex;flex-direction:column;align-items:center;padding:10px 6px 7px;border-radius:12px;background:color-mix(in srgb,var(--c,#ffd400) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--c,#ffd400) 35%,transparent)}.flip-item img{width:100%;height:80px;object-fit:contain}.flip-item strong{font-size:11px;text-align:center;margin-top:8px}.flip-item b{position:absolute;top:6px;right:6px;font-size:11px;background:#17112acc;padding:2px 5px;border-radius:5px}.flip-value{display:block;text-align:right;font-size:12px;color:var(--ink-3)}.flip-value strong{color:var(--ink)}
.flip-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}.flip-center>strong{font-size:22px}.flip-center.waiting .flip-coin{animation:coin-bob 3s ease-in-out infinite}.empty-player{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-style:dashed;min-height:240px}.empty-player h2{font-size:20px;margin:16px 0 0}.flip-arena-footer{display:flex;justify-content:center;gap:12px;margin-top:28px;flex-wrap:wrap}@keyframes coin-bob{50%{transform:translateY(-8px) rotate(-5deg)}}
.ang-wahlfenster .gf-kachel.an,.ang-wahlfenster .gf-kachel[aria-pressed="true"]{outline:2px solid #ffe36b!important;outline-offset:-2px;border-color:#ffe36b!important;box-shadow:inset 0 0 0 2px #ffe36b!important;background:color-mix(in srgb,#ffd400 18%,var(--surface-2))!important}.ang-wahlfenster .gf-kachel.an::after{display:none!important}
.filterbox .chip:hover,.filterbox .chip.rar:hover,.filterbox .chip:focus-within{background:color-mix(in srgb,#ffe36b 18%,var(--surface-2))!important;box-shadow:inset 0 0 0 1px #ffe36b88!important;color:#fff!important;border-radius:10px!important;opacity:1!important;transition:background .12s,box-shadow .12s}
.affiliate-page{max-width:1000px;margin:32px auto;padding:0 18px}.affiliate-hero{display:grid;grid-template-columns:160px 1fr;gap:26px;padding:30px;align-items:center}.affiliate-percent{font-family:var(--spiel);font-size:76px;font-weight:700;color:#ffeaa3;text-align:center}.affiliate-hero h2{font-size:26px}.affiliate-link{display:flex;gap:10px;margin:10px 0 16px}.affiliate-link input{flex:1;min-width:0}.affiliate-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.affiliate-stats section{display:flex;flex-direction:column;padding:24px;gap:12px}.affiliate-stats strong{font-size:32px}
@media(max-width:760px){.game-switch a{padding:12px!important;gap:9px;min-height:76px}.game-switch .game-icon{width:40px;height:40px}.game-switch .text strong{font-size:15px!important}.game-switch .text small{display:none!important}.game-switch .flip-coin{width:38px;height:38px}.flip-match{grid-template-columns:1fr 1fr;gap:12px}.flip-center{grid-column:1/-1;grid-row:1}.flip-center .flip-coin.large{width:100px;height:100px}.flip-player{padding:12px}.flip-arena{padding:16px}.flip-arena-heading h1{font-size:23px}.flip-profile{justify-content:center}.flip-profile strong{width:100%;text-align:center}.flip-side{margin:0 auto}.affiliate-hero{grid-template-columns:1fr;padding:22px}.affiliate-percent{font-size:58px}.affiliate-link{flex-wrap:wrap}.affiliate-link input{flex-basis:100%}.flip-item img{height:64px}}
@media(prefers-reduced-motion:reduce){.flip-center.waiting .flip-coin{animation:none}}
/* Shared hover treatment, including Sets: light, without an extra outline. */
.filterbox .chip:hover,.filterbox .chip.rar:hover,.filterbox .chip:focus-within,
.filterbox .set-info-knopf:hover,.filterbox .set-info-knopf:focus-visible{
 background:rgba(255,255,255,.12)!important;box-shadow:none!important;outline:none;color:#fff!important;transition:background .12s}
nav a.link.on::after{left:50%;right:auto;width:24px;transform:translateX(-50%);height:3px;bottom:0}
.einst-tabs:has(#einst-affiliate:checked) .einst-blatt[data-reiter="affiliate"]{display:flex}
.einst-tabs:has(#einst-affiliate:checked) label[for="einst-affiliate"]{background:rgba(255,255,255,.08);color:var(--ink)}
.einst-blatt[data-reiter="affiliate"] input{width:100%;min-width:0}
.flip-center{perspective:650px}
.flip-revealing .flip-player.winner{border-color:var(--hairline)!important;box-shadow:none!important}
.flip-revealing .flip-arena-heading h1,.flip-revealing .flip-center>strong,.flip-revealing .flip-center>.small{visibility:hidden}
@media(hover:hover){
 .nachr:hover .nachr-leiste,.nachr:focus-within .nachr-leiste,.dm-zeile:hover .nachr-leiste{
 position:relative;top:auto;bottom:auto;left:auto;right:auto;transform:none;grid-column:1/-1;width:max-content;margin:6px 0 0 auto;display:flex}
 .nachr-leiste::before{display:none}
}
.gs-stats{gap:10px}.gs-gross{padding:12px}.gs-gross strong{font-size:25px}
.gs-gitter>div{padding:9px;gap:2px}.gs-stats .shop-teilen{margin-top:6px}
dialog.duell-katalog{height:min(90dvh,860px);max-height:90dvh;overflow:hidden;box-sizing:border-box}
dialog.duell-katalog .einsatz-form{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box}
dialog.duell-katalog .einsatz-form>*{flex-shrink:0}
dialog.duell-katalog .einsatz-auswahl{flex:1 1 0;min-height:60px;max-height:none;overflow:auto;grid-auto-rows:max-content;align-content:start}
dialog.duell-katalog .overlay-fuss,dialog.duell-katalog .einsatz-wertzeile{position:static;margin:0;padding:9px 0}
dialog.duell-katalog .coin-choice{margin:8px 0;gap:10px}
dialog.duell-katalog .coin-choice label{padding:8px}.coin-choice .flip-coin{width:44px;height:44px}
dialog.duell-katalog .einsatz-auto-hinweis[hidden]{display:none}

/* Match the specificity of the base market filter, also for unselected Sets. */
body.markt-app .filterbox .chip:hover,body.markt-app .filterbox .chip.rar:hover,
body.markt-app .filterbox .chip.chip-sets:hover,
body.markt-app .filterbox .chip:focus-within{background:#39304f!important;box-shadow:none!important;opacity:1!important;transform:none!important}
dialog.duell-katalog .einsatz-item{min-height:208px;height:auto;align-self:start}
dialog.duell-katalog .einsatz-item>*{flex-shrink:0}
/* Coinflip list: avatar, side, items, value and actions in one row. */
.flip-lobby-row{display:grid;grid-template-columns:64px 54px minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:18px;border:1px solid var(--hairline);border-radius:14px;background:var(--surface-2)}
.flip-lobby-owner{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;color:var(--ink)}
.flip-lobby-owner img,.flip-lobby-owner .avatar-standard{width:48px;height:48px;border-radius:50%}
.flip-lobby-owner strong{font-size:11px;max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flip-lobby-items{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.flip-thumb{--c:#ffe36b;position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 20%,transparent),#171329 75%);border:1px solid color-mix(in srgb,var(--c) 20%,transparent)}
.flip-thumb img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c) 45%,transparent))}
.flip-thumb b{position:absolute;right:-3px;bottom:-2px;background:#241b38;font-size:11px;border-radius:6px;padding:2px 4px}
.flip-more{font-weight:800;color:var(--ink-3);padding:8px}.flip-lobby-value{text-align:right;white-space:nowrap;font-weight:800;color:#bde8d4;font-size:19px}.flip-lobby-value small{display:block;color:var(--ink-3);font-size:11px;font-weight:500;margin-top:4px}
.flip-lobby-actions{display:flex;flex-direction:column;gap:7px}.flip-lobby-actions .btn{min-width:80px;text-align:center}
.flip-items{grid-template-columns:1fr;align-content:start;max-height:380px;overflow:auto}
.flip-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;padding:10px;text-align:left;border-radius:10px;min-height:80px;background:var(--surface);border:1px solid var(--hairline)}
.flip-item img{grid-row:1;grid-column:1;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 0 9px color-mix(in srgb,var(--c,#ffe36b) 50%,transparent))}
.flip-item strong{grid-column:2;font-size:13px;text-align:left;margin:0;overflow-wrap:anywhere}
.flip-item b{position:static;grid-column:3;font-size:12px}.flip-item .flip-item-value{grid-column:2/4;font-size:11px;color:var(--ink-3);margin-top:-10px}
.flip-match{grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr);gap:16px}.flip-player{padding:16px}.flip-center .flip-coin.large{width:110px;height:110px}
@media(max-width:760px){.flip-lobby-row{grid-template-columns:46px 38px minmax(0,1fr) auto;gap:9px;padding:12px}.flip-lobby-owner img,.flip-lobby-owner .avatar-standard{width:40px;height:40px}.flip-lobby-row>.flip-coin{width:38px;height:38px}.flip-thumb{width:48px;height:48px}.flip-lobby-value{grid-column:3;font-size:16px;text-align:left}.flip-lobby-actions{grid-column:4;grid-row:1/3}.flip-match{grid-template-columns:1fr 1fr;gap:12px}.flip-item{grid-template-columns:46px minmax(0,1fr);gap:8px;padding:8px}.flip-item img{width:46px;height:46px}.flip-item b{grid-column:2;justify-self:start}.flip-item .flip-item-value{grid-column:2;margin:0}.flip-item strong{font-size:12px}}
/* Leave room for a complete item row on laptop screens. */
dialog.duell-katalog .coin-choice label{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;text-align:left;padding:8px 14px}
dialog.duell-katalog .coin-choice .flip-coin{grid-column:1;grid-row:1/3;width:44px;height:44px}
dialog.duell-katalog .coin-choice label strong{grid-column:2;font-size:18px}
dialog.duell-katalog .coin-choice label>span:last-child{grid-column:2;font-size:11px}

/* Embossed Moonly coins: shared geometry keeps both animation faces consistent. */
.flip-coin{--coin-dark:#784510;--coin-mid:#d49a35;--coin-light:#ffe7a0;--coin-face:#f4c861;--coin-center:#bf822a;--coin-mark:#fff2c4}
.flip-coin.tails{--coin-dark:#3e246c;--coin-mid:#9470d0;--coin-light:#e9dbff;--coin-face:#c4a4f2;--coin-center:#7852ac;--coin-mark:#fbf4ff}
.flip-coin svg .coin-edge{fill:var(--coin-dark);stroke:var(--coin-dark);stroke-width:2}
.flip-coin svg .coin-face{fill:var(--coin-face);stroke:var(--coin-light);stroke-width:1.2}
.flip-coin svg .coin-milling{fill:none;stroke:var(--coin-dark);stroke-width:3;stroke-dasharray:1 2.45;opacity:.7}
.flip-coin svg .coin-ring{fill:var(--coin-mid);stroke:var(--coin-light);stroke-width:1.6}
.flip-coin svg .coin-inner{fill:var(--coin-center);stroke:var(--coin-dark);stroke-width:.8}
.flip-coin svg .coin-rays{fill:none;stroke:var(--coin-light);stroke-width:.8;opacity:.45}
.flip-coin svg .coin-shadow{fill:var(--coin-dark);stroke:var(--coin-dark);stroke-width:1.5}
.flip-coin svg .coin-engraving{fill:var(--coin-mark);stroke:var(--coin-light);stroke-width:.7}
.flip-coin svg .coin-glint{fill:none;stroke:var(--coin-mark);stroke-width:1.4;stroke-linecap:round;opacity:.85}
.flip-coin svg .coin-stars{fill:var(--coin-light);stroke:none}
.flip-rules-link{display:inline-block;font-size:12px;color:var(--ink-3);margin:8px 0 12px;text-decoration:underline;text-underline-offset:3px}
.mg-test-label{font-size:10px;line-height:1.4;color:#c8b4ef;background:#9270ca20;border-radius:6px;padding:4px 6px;text-align:center}
/* ===== Ende Codex-Block (11.10.2026) ===== */

/* ===== Weniger nach KI (11.10.2026) =====
   Betreiber: "die ganze Website ueberarbeiten, damit sie weniger nach KI
   ausschaut", dazu ein Video mit der Liste der typischen Merkmale:
   Pillen-Knoepfe, Verlaeufe, Leuchten, Einblend- und Zeiger-Animationen.
   Vorbild fuer das Gegenteil: Skinport (eckig, dicht, eine Akzentfarbe,
   Information statt Schmuck). Lila bleibt die Akzentfarbe - das hat der
   Betreiber ausdruecklich so gewollt. Neue Regeln bitte in dieser Sprache:
   Ecken 6 px (kleine Marken 3 px), keine Schatten, keine Verlaeufe auf
   Flaechen, kein Glow. Runde Formen nur noch fuer Profilbilder. */

/* `:not(#_)` hebt die Regeln ueber die vielen aelteren Schichten mit
   `!important` (sie bekommen damit ID-Gewicht) - sonst bleibt jede
   zweite Pille stehen, weil weiter oben `.x .btn` genauer war. */

/* Knoepfe, Reiter, Felder: kleine Ecken statt Pille, keine 3D-Kante */
:is(.btn,.wie-link,.wie-video,.werte-schalter,.sort-wahl,.karte-korb-knopf,
  .markt-schalter,.markt-schalter a,.markt-schalter label,.mschalter,.mschalter a,
  .glocke-knopf,.korb-knopf-nav,.guthaben-knopf,
  .sup-schalter,.chat-schalter,.sup-knopf,.inv-sort,.inv-sort a,.leer-tat,
  .wand-reiter,.wand-reiter label,.sup-befehl-chip,.set-chip,.set-info-knopf,
  .verkauf-reiter,.verkauf-reiter a,.verkauf-reiter label,.zaehler,.chip,
  .suchfeld,.suchfeld input,.sort-wahl select,.auswahl-knopf,
  .einst-nav label,.sup-team-reiter,.sup-team-reiter button,
  .filter-knopf,.handy-leiste a,.mg-reiter a,.mg-reiter label):not(#_){
  border-radius:6px !important; box-shadow:none !important}
:is(.btn,.karte-korb-knopf):active:not(#_){transform:none !important}
:is(.btn.primary,.karte-korb-knopf):not(#_){background-image:none !important}
.zahl:not(#_),.vzahl:not(#_){border-radius:3px !important}

/* Marken und Schilder: eckig und klein */
:is(.stufe-pille,.stueck,.wert-marke,.tag,.urteil,.kz-schild,.brand-beta,
  .korb-zahl,.dm-zahl,.sup-rolle,.chip .zahl):not(#_){border-radius:3px !important}

/* Karten: flach, kleine Ecken, keine Schatten, kein Lichthof */
:is(.card,.marktkarte,.item,.wie-box,.wie-schritte li,.filterbox,.rechte-wand,
  .kfenster,dialog.overlay,.gfenster,.kk-preis):not(#_){box-shadow:none !important}
:is(.card,.wie-box,.kk-preis):not(#_){border-radius:8px !important}
:is(.markt-raster .marktkarte,.item):not(#_){border-radius:6px !important}
.markt-raster:not(#_){gap:10px !important}
:is(.kaufkopf,.tor-karte,.claim-bild):not(#_)::before,
:is(.kaufkopf,.tor-karte):not(#_)::after,
.markt-raster .marktkarte .bild:not(#_)::before,
.markt-raster .marktkarte .bild:not(#_)::after{display:none !important}
:is(.kaufkopf,.tor-karte,.fehlerkarte,.kk-preis):not(#_){background-image:none !important}
:is(.markt-raster .marktkarte .bild img,.item .bild img):not(#_){filter:none !important}
:is(.markt-raster .marktkarte,.item):hover:not(#_){transform:none !important}

/* Keine Bewegung beim Erscheinen */
.kommt:not(#_){opacity:1 !important; transform:none !important; transition:none !important}

/* Leere Zustaende: ruhige Flaeche statt gestrichelter Platzhalter */
.empty:not(#_){border-style:solid !important; border-color:var(--hairline) !important}
.suchfeld .lupe{display:inline-flex; align-items:center; line-height:0}

/* Muenze 3c (12.10.2026, Betreiber): gepraegt mit Doppelrand, Kopf =
   goldenes Messer + MURDERER, Zahl = lila Revolver + SHERIFF. Beide
   Seiten stehen im SVG, die Klasse heads/tails waehlt - so wechselt die
   Flip-Animation (coinflip.js schaltet die Klassen) wirklich das Bild.
   Die alten Regeln faerben das svg selbst; hier zurueckgesetzt, sonst
   bekaeme jede Form einen braunen Rand. */
.flip-coin svg{fill:none !important;stroke:none !important;stroke-width:0 !important;overflow:visible}
.flip-coin .coin-zahl,.flip-coin.tails .coin-kopf{display:none}
.flip-coin.tails .coin-zahl{display:inline}
/* Fertiges Spiel: die Vorlage zeigt das Ergebnis (ohne JavaScript richtig),
   bis die Animation laeuft aber neutral den Kopf - sonst verriete die
   Muenze das Ergebnis vor dem Wurf. coinflip.js setzt flip-wirft. */
.flip-revealing:not(.flip-wirft) .flip-center .flip-coin .coin-kopf{display:inline}
.flip-revealing:not(.flip-wirft) .flip-center .flip-coin .coin-zahl{display:none}

/* Marktkachel: Value neben dem Preis, Item tiefer (12.10.2026, Betreiber).
   Der Value stand als eigene Zeile ueber dem Preis; jetzt in der Preis-
   Pille rechts daneben. Das Item sass oben mittig und wurde von der
   Stufen-Pille ("GODLY") verdeckt - es rutscht unter die Pille. */
/* Preis und Wert in EINER Reihe (.preis-reihe), "Yours" wie vorher
   darueber. Der Preis wird NIE gekuerzt - reicht der Platz bei sehr
   langen Preisen/Werten nicht, rutscht der Wert darunter. */
.markt-raster .marktkarte .preis-reihe{display:flex;align-items:center;column-gap:8px;row-gap:3px;min-width:0;flex-wrap:wrap}
.markt-raster .marktkarte .preis-reihe .price,.markt-raster .marktkarte .preis-reihe .ab{flex:none;white-space:nowrap}
.markt-raster .marktkarte .preis-pille .wert-zeile{display:inline-flex;margin:0;flex:none}
.markt-raster .marktkarte .preis-pille .wert-zeile:empty{display:none}
/* Stufen-Pille in der Namenszeile rechts statt oben links im Bild
   (12.10.2026, Betreiber): dort verdeckte sie das Item, und Abstand
   darunter machte die Items zu klein. Das Bild hat wieder die ganze
   Flaeche. */
.markt-raster .marktkarte .bild{grid-template-rows:minmax(0,1fr);box-sizing:border-box;padding:6px 0}
.markt-raster .marktkarte .name-reihe{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.markt-raster .marktkarte .name-reihe .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.markt-raster .marktkarte .name-reihe .stufe-pille{position:static !important;flex:none;left:auto;top:auto}
/* Schmale Kacheln (Handy): Pille UNTER den Namen - daneben blieben vom
   Namen nur "Chr..." (Pruefer, 12.10.2026). */
@media(max-width:560px){
  .markt-raster .marktkarte .name-reihe{flex-direction:column;align-items:flex-start;gap:4px}
  .markt-raster .marktkarte .name-reihe .nm{max-width:100%}
}
.markt-raster .marktkarte .bild img{max-height:100% !important;height:auto !important;width:auto !important;object-fit:contain}
@media(max-width:760px){
  .markt-raster .marktkarte .preis-reihe{column-gap:5px}
  .markt-raster .marktkarte .preis-pille .price{font-size:16px !important}
  .markt-raster .marktkarte .preis-pille .wert-marke{font-size:10.5px;padding:1px 4px}
}

/* ---- Withdraw to Roblox: zweiter Knopf, nicht lila gefuellt (12.10.2026) ----
   Betreiber: "andere Farbe oder Design". Unter "List for sale" stand ein
   zweiter gleicher lila Knopf - jetzt dunkle Flaeche mit Rand und
   Controller-Symbol, damit Verkaufen der Hauptknopf bleibt. */
body.verkauf-app .vk-spiel:not(#_){
  align-items:center;justify-content:center;gap:8px;
  background:#101012 !important;color:#ffeaa3 !important;
  border:1.5px solid #55554f !important;box-shadow:none !important;
  margin-top:8px;
}
body.verkauf-app .vk-spiel:not(#_):hover:not(:disabled){
  background:#1d1d20 !important;border-color:#ffd400 !important;color:#fff !important;
}
body.verkauf-app .vk-spiel:not(#_):disabled{opacity:.45;cursor:not-allowed}
body.verkauf-app .vk-spiel:not(#_):not(:disabled){display:flex}
body.verkauf-app .vk-spiel svg{flex:none;vertical-align:-3px;margin-right:6px}
body.verkauf-app .vk-spiel::before{display:none}

/* ---- Gebuehr-Schild "Fee 5%" (12.10.2026, Betreiber, Vorbild StarPets) ----
   Bernstein statt Lila, damit es nicht wie ein Knopf aussieht. Nur dort,
   wo wirklich eine Gebuehr abgeht (Verkaufen); Details in den Terms. */
.fee-pill:not(#_){
  display:inline-flex;align-items:center;gap:4px;vertical-align:middle;
  padding:2px 7px;border-radius:3px;
  background:rgba(251,191,36,.12);color:#fbbf24;
  font:600 11.5px/1.4 var(--spiel,inherit);letter-spacing:0;text-transform:none;
  white-space:nowrap;
}
.fee-pill[hidden]{display:none !important}
.fee-pill svg{flex:none}
.vk-summe .fee-pill{margin-left:6px}
.fee-zeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#bearb-fee{margin:-4px 0 10px;align-self:flex-start;justify-self:start;width:max-content}
.ang-betrag .fee-pill{margin-top:2px}

/* ---- Eigene Sets (13.10.2026) ----
   Auswahlfenster fuer 2-4 Items, oben die vier Plaetze als Vorschau des
   Set-Bilds und der Name, wie er entsteht (A-Z mit "&"). Fuss klebt unten. */
.set-eigen-knopf:not(#_){display:inline-flex;align-items:center;gap:8px;margin-top:4px}
.set-eigen-plus{font-size:18px;line-height:1;font-weight:700}
.set-chip[hidden]{display:none !important}
.set-bild{position:relative}
.set-eigen{position:absolute;left:6px;top:6px;padding:1px 6px;border-radius:3px;
  background:#34301b;color:#ffeaa3;font:600 11px/1.5 var(--spiel,inherit)}
dialog.eigenset-fenster:not(#_){width:min(860px,94vw);max-width:min(860px,94vw)}
.es-inhalt{display:flex;flex-direction:column;gap:10px}
.es-titel{margin:0}
.es-sub{margin:-6px 0 0}
.es-vorschau{display:flex;align-items:center;gap:14px;padding:10px;border-radius:6px;background:var(--surface-2,#1a1a1d)}
.es-slots{display:grid;grid-template-columns:repeat(2,44px);grid-template-rows:repeat(2,44px);gap:4px;flex:none}
.es-slot{border:1.5px dashed #55554f;border-radius:5px;display:grid;place-items:center;overflow:hidden}
.es-slot.voll{border-style:solid;border-color:#ffd400;background:#131315}
.es-slot img{max-width:90%;max-height:90%;object-fit:contain}
.es-vtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.es-name{font:600 16px/1.25 var(--spiel,inherit);overflow-wrap:anywhere}
.es-suche:not(#_){width:100%}
.es-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;
  max-height:46vh;overflow-y:auto;padding:2px}
.es-kachel:not(#_){display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:6px;
  border:1.5px solid transparent;background:var(--surface-2,#1a1a1d);color:inherit;font:inherit;
  cursor:pointer;text-align:center;min-width:0}
.es-kachel[hidden]{display:none !important}
.es-kachel:hover{border-color:#55554f}
.es-kachel.an{border-color:#ffd400;background:#34301b}
.es-bild{position:relative;height:64px;display:grid;place-items:center}
.es-bild img{max-width:100%;max-height:64px;object-fit:contain}
.es-haken{position:absolute;right:0;top:0;width:20px;height:20px;border-radius:50%;
  background:#ffd400;color:#fff;font-size:12px;display:none;place-items:center}
.es-kachel.an .es-haken{display:grid}
.es-menge{position:absolute;left:0;top:0;font:600 11px/1.4 var(--spiel,inherit);color:#ffeaa3}
.es-nm{font:600 13px/1.2 var(--spiel,inherit);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.es-unter{display:flex;justify-content:center;gap:6px;font-size:11px;color:var(--muted,#b5b5bd);text-transform:capitalize}
.es-w{color:#5eead4}
.es-fuss{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:12px;
  padding:10px 0 2px;background:var(--surface,#131315)}
.es-meldung{margin:0;flex:1}
.es-meldung.fehler{color:#f87171}
.gf-eigenset:not(#_){display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* ---- Set trennen: Rueckfrage mit Bestandteilen (13.10.2026) ---- */
dialog.split-frage:not(#_){width:min(520px,94vw);max-width:min(520px,94vw)}
.split-inhalt{display:flex;flex-direction:column;gap:10px}
.split-titel{margin:0;overflow-wrap:anywhere}
.split-warnung{margin:0;padding:10px 12px;border-radius:6px;
  background:rgba(251,191,36,.12);color:#fbbf24;font-size:14px}
.split-unter{margin:0}
.split-teile{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;
  max-height:46vh;overflow-y:auto}
.split-teil{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:6px;
  background:var(--surface-2,#1a1a1d);text-align:center;min-width:0}
.split-bild{height:56px;display:grid;place-items:center}
.split-bild img{max-width:100%;max-height:56px;object-fit:contain}
.split-nm{font:600 12px/1.2 var(--spiel,inherit);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.split-knoepfe{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}

/* ---- Markt Sell: "I own", Besitz-Marke, Set aus Teilen (13.10.2026) ---- */
.besitz-schalter:not(#_){display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:6px 10px;border-radius:6px;cursor:pointer;user-select:none;
  background:var(--surface-2);color:var(--ink-2);
  font:600 13px/1.2 var(--spiel,inherit);text-transform:none;letter-spacing:0;margin:0}
.besitz-schalter input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.besitz-schalter svg{width:15px;height:15px;color:var(--ink-3);flex:none}
.besitz-zahl{min-width:20px;padding:1px 6px;border-radius:3px;text-align:center;
  background:rgba(255,255,255,.08);font-size:11.5px}
.besitz-schalter.an:not(#_){background:color-mix(in srgb,var(--preis) 18%,var(--surface-2));color:var(--preis)}
.besitz-schalter.an svg{color:var(--preis)}
.besitz-schalter.an .besitz-zahl{background:var(--preis);color:#0b1f13}
.besitz-schalter:focus-within{outline:2px solid var(--preis);outline-offset:2px}
.marktkarte .bild .besitz-marke{position:absolute;z-index:2;top:7px;left:7px;
  display:inline-flex;align-items:center;gap:4px;padding:3px 7px 3px 5px;border-radius:3px;
  background:var(--preis);color:#0b1f13;font:700 11.5px/1.2 var(--spiel,inherit)}
.marktkarte .bild .besitz-marke svg{width:12px;height:12px}
.markt-raster .marktkarte.lieferbar:not(#_){box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--preis) 55%,transparent)}

/* Sell now / Negotiate immer untereinander (13.10.2026): mit der
   Gebuehr-Zeile unter dem Knopf rutschte Negotiate sonst daneben. */
.kk-aktionen:not(#_){flex-direction:column;align-items:stretch;flex-wrap:nowrap;width:100%}
.kk-aktionen:not(#_) .instant-kauf .btn,.kk-aktionen:not(#_) .instant-verhandeln{width:100%;justify-content:center}
.kk-aktionen:not(#_) .fee-zeile{text-align:center;justify-content:center;margin:4px 0 0}
.test-verkauf{display:block;max-width:100%;box-sizing:border-box;text-align:left;margin:8px 0;padding:8px 10px;border-radius:6px;background:color-mix(in srgb,var(--preis) 12%,var(--surface-2));overflow-wrap:anywhere}
.teile-leiste{margin-top:14px;padding:12px;border-radius:8px;background:var(--surface-2);
  display:flex;flex-direction:column;gap:10px}
.teile-leiste.komplett{background:color-mix(in srgb,var(--preis) 12%,var(--surface-2))}
.teile-kopf{display:flex;flex-direction:column;gap:2px}
.teile-kopf strong{font:600 15px/1.25 var(--spiel,inherit)}
.teile-leiste.komplett .teile-kopf strong{color:var(--preis)}
.teile-reihe{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.teile-reihe .teil{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 6px;border-radius:6px;background:var(--surface);color:inherit;text-decoration:none;
  min-width:0;opacity:.45}
.teile-reihe .teil.hat{opacity:1}
.teile-reihe .teil-bild{height:56px;width:100%;display:grid;place-items:center}
.teile-reihe .teil img{max-height:56px;max-width:100%;object-fit:contain}
.teile-reihe .teil-nm{font:600 12px/1.2 var(--spiel,inherit);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teile-reihe .teil-marke{position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;border:1.5px dashed rgba(255,255,255,.35)}
.teile-reihe .teil.hat .teil-marke{border:0;background:var(--preis);color:#0b1f13}
.teile-reihe .teil-marke svg{width:11px;height:11px}
/* Schmale Gesuch-Kacheln: "1 buyer" lag absolut ueber Preis und Wert. */
@media (max-width:560px){
  #marktform .markt-raster .marktkarte .foot:not(#_){position:static;width:auto;
    margin:0 10px 10px;padding:6px 0 0;border-top:1px solid rgba(255,255,255,.07);
    justify-content:space-between}
}
/* Eigenes-Set-Fenster: Titel und Erklaerung nicht unter dem X (13.10.2026,
   am Handy lag das X auf "one deal" / "items"). */
.es-inhalt .es-titel:not(#_),.es-inhalt .es-sub:not(#_){padding-right:48px}