/* 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:"JetBrains Mono",ui-monospace,monospace;
  --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:"JetBrains Mono",ui-monospace,monospace; 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:"JetBrains Mono",monospace; 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:"JetBrains Mono",monospace;
}
.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:"JetBrains Mono",monospace; 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}
.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-huelle { position: relative; display: inline-flex; }
.emoji-knopf {
  width: 34px; height: 34px; flex: none; cursor: pointer;
  border-radius: 9px; font-size: 1rem; line-height: 1;
  border: 1px solid var(--rand, #323439);
  background: var(--flaeche-2, #1f2124);
}
.emoji-knopf:hover { border-color: var(--akzent, #f0b429); }
.emoji-feld {
  position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  padding: 8px; width: 268px;
  border-radius: 12px;
  background: var(--flaeche, #28292e);
  border: 1px solid var(--rand, #323439);
  box-shadow: 0 10px 26px rgba(17,18,20,.5);
}
.emoji-feld button {
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 4px; border-radius: 7px;
}
.emoji-feld button:hover { background: var(--flaeche-2, #1f2124); }


/* ==================================================================
   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-auswahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:310px;overflow:auto;padding:2px}
.einsatz-item{display:grid;grid-template-columns:62px minmax(0,1fr) 58px;align-items:center;gap:10px;padding:8px;border:1px solid var(--hairline);border-radius:8px;background:var(--surface-2);cursor:pointer;transition:transform var(--schnell),border-color var(--schnell),background var(--schnell)}
.einsatz-item:hover{transform:translateY(-1px);border-color:var(--hairline-2)}
.einsatz-item.gewaehlt{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface-2));box-shadow:inset 3px 0 var(--accent)}
.einsatz-check{position:absolute;opacity:0;pointer-events:none}
.einsatz-bild{height:52px;border-radius:6px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;overflow:hidden}
.einsatz-bild img{width:100%;height:100%;object-fit:contain;transition:transform .2s ease}
.einsatz-item:hover .einsatz-bild img{transform:scale(1.06)}
.einsatz-name{display:flex;flex-direction:column;min-width:0;gap:3px}
.einsatz-name strong{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.einsatz-name small{font-size:10px;color:var(--ink-3)}
.einsatz-menge{width:100%;padding:7px 5px;border:1px solid var(--hairline-2);border-radius:5px;background:var(--surface);color:var(--ink);font:inherit;text-align:center}
.einsatz-menge:disabled{opacity:.35}
.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){.einsatz-auswahl{grid-template-columns:1fr}.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){
  body.markt-app .rechte-wand{
    background:linear-gradient(180deg,#292b2f 0%,#1e2023 48%,#1a1b1e 100%);
    box-shadow:inset 1px 0 rgba(255,255,255,.035);
  }
}
body.markt-app .wand-reiter{
  gap:6px; padding:10px 12px; border-bottom-color:rgba(255,255,255,.07);
  background:rgba(30,31,33,.32);
}
body.markt-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;
}
body.markt-app .wand-reiter label::before{font-size:13px;line-height:1;opacity:.72}
body.markt-app .wand-reiter label[for="wand-chat"]::before{content:"◌"}
body.markt-app .wand-reiter label[for="wand-quests"]::before{content:"✦"}
body.markt-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);
}
body.markt-app .wand-reiter input:checked + label::before{opacity:1}

/* Einzelne Chatzeilen erhalten genug Luft zum Lesen, ohne wie Nachrichten-
   Blasen den schmalen Bereich noch enger zu machen. */
body.markt-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%);
}
body.markt-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;
}
body.markt-app .wand-blatt .chat-zeile:hover{background:rgba(255,255,255,.045)}
body.markt-app .wand-blatt .chat-zeit{font-size:10px;align-self:center}
body.markt-app .wand-blatt .chat-name{font-weight:700}
body.markt-app .wand-blatt .chat-text{color:color-mix(in srgb,var(--ink) 78%,var(--ink-3))}
body.markt-app .wand-blatt .chat-form{
  gap:8px; padding:12px 10px; border-top-color:rgba(255,255,255,.08);
  background:rgba(27,28,29,.35);
}
body.markt-app .wand-blatt .chat-form input{background:rgba(18,19,21,.72)}
body.markt-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. */
body.markt-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%);
}
body.markt-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;
}
body.markt-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;
}
body.markt-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}
.duell-katalog .einsatz-auswahl{grid-template-columns:repeat(3,minmax(0,1fr));
  max-height:352px; gap:9px; padding:2px 3px}
.duell-katalog .einsatz-item{grid-template-columns:1fr; gap:5px; min-height:104px;
  padding:8px; text-align:center}
.duell-katalog .einsatz-bild{height:52px; display:grid; place-items:center}
.duell-katalog .einsatz-bild img{max-width:58px; max-height:52px; object-fit:contain}
.duell-katalog .einsatz-name{min-width:0; display:flex; flex-direction:column; gap:1px}
.duell-katalog .einsatz-name strong{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:12px}
.duell-katalog .einsatz-name small{font-size:10px}
.duell-katalog .einsatz-menge{width:100%; box-sizing:border-box; text-align:center; padding:4px 5px}
@media(max-width:560px){.duell-katalog .einsatz-auswahl{grid-template-columns:repeat(2,minmax(0,1fr));max-height:330px}}

/* 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));
  animation:vk-schweben 6s ease-in-out infinite;
}
@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"]{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"]{
  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"]{
  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{display:none}}

@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%}}