/* ══════════════════════════════════════════════════════════════════════
   Handy (bis 760 px) - eigene Datei, nach style.css geladen
   ══════════════════════════════════════════════════════════════════════

   Vorbild StarPets am Handy (01.10.2026): eine schmale Kopfzeile, die
   Abschnitte als Leiste UNTEN am Daumen, und alles, was aufgeht - Filter,
   Menues, Fenster - liegt ueber dem ganzen Bildschirm statt als kleine
   Karte irgendwo dazwischen.

   Warum eine eigene Datei: style.css ist ueber 6000 Zeilen aus vielen
   Umbauten, und an main.py/style.css arbeitet parallel ein zweiter Agent.
   Hier steht alles, was NUR das Handy betrifft, an einer Stelle - und
   die `!important` sind Absicht: sie gewinnen gegen die verstreuten
   Breitbild-Regeln, ohne dass dort etwas angefasst werden muss.

   Gemessen per Playwright auf 390x844 (iPhone 12-14). */

.handy-leiste{display:none}
/* Der Fertig-Knopf im Filter und der Filter-Knopf neben der Suche
   (beide aus handy.js) gehoeren nur zum Handy. */
.filter-fertig, .filter-knopf, .filter-schwebend{display:none}
/* Nur am Handy: z. B. Support im Kontomenue (am PC schwebt der Knopf). */
@media (min-width:761px){ .nur-handy{display:none !important} }
.such-zeile{display:contents}
.geld-zu{display:none}

@media (max-width:760px){
  :root{--unten:60px}

  /* Platz fuer die Leiste unten - sonst liegt der letzte Inhalt darunter. */
  body{padding-bottom:calc(var(--unten) + env(safe-area-inset-bottom, 0px))}

  /* ── Kopfzeile: EINE Reihe ──────────────────────────────────────────
     Vorher drei Reihen und ~155 px: Logo/Korb/Guthaben, darunter der
     Kontoknopf mit Namen, darunter die Abschnitte. Die Abschnitte stehen
     jetzt unten, der Name im Menue - oben bleibt, was man staendig
     braucht: Geld und Korb. */
  nav .inner{flex-wrap:nowrap !important; gap:8px !important;
    padding:8px 12px !important; row-gap:0 !important}
  nav .navlinks, nav .online, nav .konto-name,
  nav .konto-knopf .guthaben-pfeil{display:none !important}
  nav .spacer{display:block !important; flex:1 1 auto}
  nav .brand{margin-right:0 !important; flex:none}
  nav .brand-wort{font-size:18px}
  nav .guthaben-knopf{padding:7px 10px; font-size:13.5px}
  nav .konto-knopf{padding:3px !important; gap:0 !important}
  /* Ohne das ist `position:fixed` der Menues an die Kopfzeile gebunden:
     backdrop-filter macht sie zum Bezugsrahmen fuer feste Kinder, und das
     "ganzer Bildschirm"-Menue waere 52 px hoch. */
  /* relative statt static: nur so ist die Kopfzeile ein eigener Stapel,
     ueber den die Menues sich heben (siehe nav:has unten). Am Handy rollt
     sie ohnehin weg - die Warnung in CLAUDE.md betrifft das sticky am PC. */
  nav{backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    position:relative !important; z-index:1000 !important}
  main{padding-top:8px !important}
  /* `main` traegt aus der Einblendung ein transform und z-index:1. Beides
     macht es zum Rahmen fuer `position:fixed` - der Vollbild-Filter war
     dadurch an main gebunden, 10 px eingerueckt und lag UNTER der
     Kopfzeile. Die Sternenebenen, fuer die z-index:1 da war, sind aus. */
  main{transform:none !important; z-index:auto !important; animation:none !important}
  /* Menues stecken in der Kopfzeile (z-index 1000); offen muss die ganze
     Kopfzeile ueber die Leiste unten (1500), sonst liegt die ueber dem
     unteren Teil des Menues. */
  nav:has(.guthaben-feld:not([hidden])), nav:has(.konto-feld:not([hidden])){
    z-index:2000 !important}
  .marktflaeche{margin-top:0 !important}
  /* "Did something go wrong?" stand als grosser roter Balken ueber der
     Ware. Der Weg bleibt, nur kleiner - Hilfe gibt es auch unten links. */
  .sup-knopf{min-height:0 !important; padding:6px 10px !important;
    font-size:12.5px !important}

  /* ── Leiste unten ────────────────────────────────────────────────── */
  .handy-leiste{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1500;
    height:calc(var(--unten) + env(safe-area-inset-bottom, 0px));
    padding-bottom:env(safe-area-inset-bottom, 0px);
    background:rgb(18,19,22); border-top:1px solid var(--hairline-2);
    transform:translateZ(0);
  }
  /* Beim Scrollen hob sich die Leiste vom unteren Rand ab (gemeldet
     01.10.2026): waehrend die Browserleiste ein- und ausfaehrt und beim
     Nachfedern am Seitenende liegt der Bildschirmrand kurz UNTER der
     Leiste, und dort schien die Seite durch. Die Flaeche darunter traegt
     jetzt dieselbe Farbe, und die Seite federt nicht mehr nach. */
  .handy-leiste::after{content:""; position:absolute; left:0; right:0;
    top:100%; height:200px; background:rgb(18,19,22)}

  /* Die Seite rollt INNEN, nicht das Browserfenster. Solange das Fenster
     rollte, fuhr die Browserleiste (Safari, Chrome, Google-App) beim
     schnellen Scrollen ein und aus - und alles mit position:fixed ruckte
     mit: die Leiste unten hob sich sichtbar vom Rand ab (zweimal gemeldet
     am 01.10.2026, "passiert voll oft"). Die Fuellflaeche darunter half
     nur halb. Mit festem html und rollendem body bleibt die Browserleiste
     stehen, wie in einer App, und der Rand bewegt sich nicht mehr.
     Kein Skript liest window.scrollY - nachgesehen, bevor es umgestellt
     wurde. */
  /* 03.10.2026 zurueckgebaut: der rollende body (html fest, body
     overflow:auto, overscroll-behavior:none) liess das Scrollen haengen -
     "nach unten gescrollt, wieder hoch geht nicht, erst andersrum wischen"
     (Warenkorb, Nachrichten). Ein Scrollfehler ist schlimmer als eine
     wackelnde Leiste; die Fuellflaeche unter .handy-leiste deckt den Spalt.
     Wieder das Fenster rollt; die Sperren unten greifen ueber :has am html. */
  html,body{overflow-x:hidden}
  html:has(body.filter-offen), html:has(body.wand-offen),
  html:has(body.auswahl-offen), html:has(body.geld-offen),
  html:has(dialog[open]){overflow:hidden !important}
  /* Hinter offenen Vollbildern rollt nichts mit (handy.js setzt die Klasse
     beim Filter; die anderen Vollbilder haben eigene Klassen weiter unten).
     !important, weil die Zeile darueber es auch ist. */
  body.filter-offen{overflow:hidden !important}
  .handy-leiste > a, .handy-leiste > button{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px;
    background:none; border:0; border-radius:0; padding:0; margin:0;
    color:var(--ink-3); font:inherit; font-size:11px; font-weight:700;
    letter-spacing:.01em; position:relative; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .handy-leiste svg{width:22px; height:22px}
  .handy-leiste .on, .handy-leiste [aria-expanded="true"]{color:var(--accent)}
  .handy-leiste .on::before{content:""; position:absolute; top:0; left:28%;
    right:28%; height:2px; border-radius:0 0 2px 2px; background:var(--accent)}
  .handy-leiste .hl-zahl{position:absolute; top:6px; left:calc(50% + 6px);
    min-width:16px; height:16px; padding:0 4px; border-radius:8px;
    background:var(--warn, #f5a524); color:#111; font-size:10px; line-height:16px}

  /* Die schwebenden Knoepfe: der Chat steckt in der Leiste, Support im
     Kontomenue (`#sup-menue`, base.html). Schwebend lag der Rettungsring
     auf Kacheln und Knoepfen; als Symbol in der Kopfzeile sah er
     "komisch" aus (02.10.2026). Ungelesenes zeigt ein Punkt am Avatar. */
  .chat-schalter, .sup-schalter{display:none !important}
  .konto-knopf{position:relative}
  .konto-knopf.hat-support::after, .konto-knopf.hat-nachricht::after{content:""; position:absolute; top:2px; right:2px;
    width:9px; height:9px; border-radius:50%; background:#e5484d;
    box-shadow:0 0 0 2px var(--ground)}

  /* ── Alles, was aufgeht: ganzer Bildschirm ───────────────────────── */

  /* Fenster (<dialog>): Einstellungen, Verlauf, Warenkorb, Sets, Duell,
     Gesuch, Einzahlen. */
  dialog.overlay, dialog.gfenster, dialog.hinweis{
    width:100vw !important; max-width:none !important;
    height:100dvh !important; max-height:none !important;
    margin:0 !important; inset:0 !important; border-radius:0 !important;
    border:0 !important; overflow:auto;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  /* EIN Rollbereich je Fenster (03.10.2026): das Fenster selbst. Rollte
     zusaetzlich der Inhalt darin, hingen die Wischgesten zwischen beiden. */
  dialog.overlay, dialog.gfenster{overscroll-behavior:contain}
  .kfenster .kfenster-inhalt{max-height:none !important; overflow:visible !important}
  /* Der Schliessknopf bleibt beim Rollen oben stehen. */
  dialog .gf-schliessen{position:sticky !important; top:0; z-index:5;
    display:flex; justify-content:flex-end}
  dialog .gf-schliessen button{width:44px; height:44px; font-size:26px}

  /* Guthaben- und Kontomenue: von unten herein, darueber abgedunkelt.
     Der Schatten IST der Hintergrund - ein Tipp darauf ist ein Klick
     neben das Menue, und den schliesst bewegung.js/kontofenster.js
     ohnehin schon. */
  .guthaben-feld, .konto-feld{
    position:fixed !important; left:0 !important; right:0 !important;
    top:auto !important; bottom:0 !important; width:auto !important;
    max-height:82dvh !important; overflow:auto !important;
    border-radius:20px 20px 0 0 !important; z-index:2100 !important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 0 0 100vmax rgba(0,0,0,.6) !important;
    transform:none !important;
  }
  .guthaben-feld::before, .konto-feld::before{content:""; display:block;
    width:40px; height:4px; border-radius:2px; margin:9px auto 2px;
    background:var(--hairline-2)}
  .guthaben-liste a{padding:14px 12px}
  .guthaben-liste strong{font-size:15.5px}

  /* Filter: der Kasten oben bleibt ein Knopf; offen liegt der Inhalt
     ueber dem ganzen Schirm, unten "Fertig" (handy.js). Als aufgeklappte
     Leiste schob er vorher Raster und Knoepfe eine Bildschirmhoehe nach
     unten. */
  /* Der Kasten klebt (z-index 18) und ist damit eigener Stapel - offen
     muss ER ueber die Kopfzeile, nicht nur sein Inhalt. */
  /* Bis handy.js zugeklappt hat (siehe dort), nichts vom offenen Filter
     zeigen - sonst blitzt er beim Laden als Vollbild auf. */
  .filterbox[open]{z-index:1400 !important}
  .filterbox[open] > .filter-inhalt{
    position:fixed !important; inset:0 0 calc(var(--unten) + env(safe-area-inset-bottom, 0px)) 0 !important;
    z-index:1400 !important; max-height:none !important; height:auto !important;
    overflow:auto !important; margin:0 !important; border-radius:0 !important;
    padding:16px 16px 84px !important; background:var(--surface-fest, #1b1c20) !important;
    display:block !important;
  }
  .filterbox[open] > .filter-inhalt .filter-kopf{position:sticky; top:-16px;
    z-index:2; margin:-16px -16px 12px; padding:14px 16px;
    background:inherit; border-bottom:1px solid var(--hairline);
    display:flex; align-items:center; gap:10px}
  .filterbox[open] > .filter-inhalt .filter-kopf strong{display:block !important; flex:1; font-size:18px}
  .filterbox[open] .filter-fertig{display:block; position:fixed; z-index:1401;
    left:16px; right:16px;
    bottom:calc(var(--unten) + 14px + env(safe-area-inset-bottom, 0px));
    padding:14px; font-size:16px; border-radius:14px}
  .filterbox .chip{padding:9px 12px}
  /* Kleben darf nur die Filterzeile (55 px). Die Leiste darunter klebte
     mit - Suche, Sortierung, im Inventar dazu Abholknopf: 170-210 px, ein
     Viertel des Schirms dauerhaft weg. */
  .markt-leiste{position:static !important}
  /* Auswahlmenues liegen jetzt als feste Popover ueber den Kacheln.
     Die Leiste bleibt auch beim Oeffnen static: relative wuerde den
     Desktop-top-Abstand aktivieren und sie 55 px nach unten versetzen. */
  .am-liste{background:#161b22 !important; backdrop-filter:none !important}

  /* Statt des Balkens "Filter ⌄" ein Knopf neben der Suche; der Balken
     selbst verschwindet, der Kasten bleibt (er traegt den Vollbild-Inhalt). */
  .filterbox > summary{display:none !important}
  /* Bis handy.js zugeklappt hat, gilt der Kasten als ZU. Die erste
     Fassung (`.filterbox.start-offen > .filter-inhalt`) hatte dieselbe
     Spezifitaet wie `.filterbox[open] > .filter-inhalt{display:block}`
     weiter unten - die spaetere Regel gewann, und der Filter blitzte
     weiter auf (02.10.2026). Deshalb mit [open] und HINTER den offenen
     Regeln. */
  .filterbox.start-offen[open] > .filter-inhalt,
  .filterbox.start-offen[open] .filter-fertig{display:none !important}
  .filterbox.start-offen,
  .filterbox:not([open]){border:0 !important; padding:0 !important;
    margin:0 !important; background:none !important; min-height:0 !important;
    box-shadow:none !important}
  .such-zeile{display:flex; gap:8px; flex:1 0 100%; min-width:0}
  .markt-leiste .leiste-suche{flex:1 1 0 !important; min-width:0 !important;
    max-width:none !important}
  .filter-knopf{display:inline-flex; flex:none; align-items:center; gap:7px;
    height:44px; padding:0 14px; border-radius:12px; cursor:pointer;
    border:1px solid var(--hairline-2); background:var(--surface-2, #24262b);
    color:var(--ink); font:inherit; font-size:14px; font-weight:700;
    position:relative}
  .filter-knopf:active{transform:scale(.97)}
  /* Derselbe Knopf schwebend, sobald die Suchzeile aus dem Bild ist -
     sonst muesste man zum Filtern ganz nach oben (handy.js). */
  .filter-schwebend{display:inline-flex; position:fixed; z-index:1300;
    right:14px; bottom:calc(var(--unten) + 14px + env(safe-area-inset-bottom, 0px));
    height:46px; padding:0 18px; border-radius:23px;
    box-shadow:0 10px 28px -6px rgba(0,0,0,.8);
    opacity:0; transform:translateY(12px); pointer-events:none;
    transition:opacity .18s, transform .18s}
  .filter-schwebend.sichtbar{opacity:1; transform:none; pointer-events:auto}
  /* Ueber dem Verkaufsstreifen statt darauf. */
  body:has(#auswahl .auswahl-fuss:not(.still)) .filter-schwebend{
    bottom:calc(var(--unten) + 76px + env(safe-area-inset-bottom, 0px))}
  body.auswahl-offen .filter-schwebend, body.wand-offen .filter-schwebend,
  body:has(.filterbox[open]) .filter-schwebend{display:none !important}
  .filter-knopf-zahl{min-width:18px; height:18px; padding:0 5px;
    border-radius:9px; background:var(--accent); color:var(--accent-ink, #0b2a22);
    font-size:11px; line-height:18px; text-align:center}

  /* Chat und Quests (Markt, Gesuche): dort steht die Wand sonst als
     zweite Seite UNTER der Ware. Am Handy hinter dem Chat-Knopf unten. */
  .rechte-wand:not(.verkauf-wand){display:none !important}
  body.wand-offen .rechte-wand:not(.verkauf-wand){
    display:flex !important; flex-direction:column !important;
    position:fixed !important; inset:0 0 calc(var(--unten) + env(safe-area-inset-bottom, 0px)) 0 !important;
    z-index:1400 !important; width:auto !important; max-width:none !important;
    height:auto !important; max-height:none !important; margin:0 !important;
    border-radius:0 !important; background:var(--surface-fest, #1b1c20) !important;
  }
  body.wand-offen{overflow:hidden !important}
  body.wand-offen .rechte-wand .wand-blatt{height:auto !important; flex:1 1 auto}
  body.wand-offen .rechte-wand .wand-blatt .chat{display:flex !important;
    flex-direction:column; flex:1 1 auto; min-height:0; height:auto !important}

  /* Schwebender Chat (alle anderen Seiten): ebenfalls ganzer Schirm. */
  aside.chat:not([hidden]){
    position:fixed !important; inset:0 0 calc(var(--unten) + env(safe-area-inset-bottom, 0px)) 0 !important;
    width:auto !important; height:auto !important; max-height:none !important;
    border-radius:0 !important; z-index:1400 !important;
    display:flex; flex-direction:column;
  }
  .rechte-wand aside.chat{position:static !important; inset:auto !important;
    flex:1 1 auto; min-height:0}
  aside.chat .chat-zeilen{flex:1 1 auto; max-height:none !important; min-height:0}
  /* 16 px, sonst zoomt iOS beim Antippen in das Feld hinein. */
  input, select, textarea{font-size:16px !important}

  /* Support: das Fenster unten links und das Anlegen in der Mitte. */
  .sup-fenster:not([hidden]){
    position:fixed !important; inset:0 0 calc(var(--unten) + env(safe-area-inset-bottom, 0px)) 0 !important;
    width:auto !important; height:auto !important; max-height:none !important;
    border-radius:0 !important; z-index:1450 !important;
  }
  .sup-modal:not([hidden]){padding:0 !important; z-index:1600 !important}
  .sup-modal-karte{width:100vw !important; max-width:none !important;
    height:100dvh !important; max-height:none !important;
    border-radius:0 !important; overflow:auto}

  /* ── Verkaufen: die Auswahl als Leiste ueber der Navigation ─────────
     Vorbild StarPets: nichts gewaehlt = nichts zu sehen; etwas gewaehlt =
     ein Streifen "2 selected / You get $4.20 / Sell" ueber der Leiste
     unten; Antippen des Kopfs klappt das Blatt mit den Preisfeldern auf
     den ganzen Schirm (handy.js). Vorher stand die Wand als zweite Seite
     UNTER dem ganzen Inventar - wer ein Item antippte, sah nichts
     passieren. */
  #auswahl:has(.auswahl-fuss.still){display:none !important}
  #auswahl{
    position:fixed !important; left:0 !important; right:0 !important;
    bottom:calc(var(--unten) + env(safe-area-inset-bottom, 0px)) !important;
    top:auto !important; z-index:1300 !important; margin:0 !important;
    width:auto !important; max-width:none !important; height:auto !important;
    border-radius:18px 18px 0 0 !important; border-bottom:0 !important;
    box-shadow:0 -14px 40px -10px rgba(0,0,0,.75);
    display:flex !important; flex-direction:column !important;
    background:var(--surface-fest, #1b1c20) !important;
  }
  #auswahl .vk-kopf{cursor:pointer; position:relative; padding-right:44px}
  #auswahl .vk-kopf::after{content:""; position:absolute; right:18px; top:50%;
    width:9px; height:9px; border:solid var(--ink-2); border-width:2px 2px 0 0;
    transform:translateY(-30%) rotate(-45deg); transition:transform .2s}
  #auswahl .auswahl-blatt{display:none !important}
  #auswahl .auswahl-fuss{padding:10px 14px 12px !important}
  body.auswahl-offen #auswahl{top:0 !important; border-radius:0 !important}
  body.auswahl-offen #auswahl .auswahl-blatt{display:flex !important;
    flex:1 1 auto !important; min-height:0; height:auto !important;
    overflow:auto !important}
  body.auswahl-offen #auswahl .vk-kopf::after{transform:translateY(-70%) rotate(135deg)}
  body.auswahl-offen{overflow:hidden !important}
  /* Per Knopf geoeffnet darf das Fenster auch leer sein (Anleitung). */
  body.auswahl-offen #auswahl:has(.auswahl-fuss.still){display:flex !important}

  /* Zugeklappt ist der Streifen EINE Zeile: links "2 selected" mit Pfeil,
     rechts "List for sale". Zweistoeckig (Kopf, Summe, Knopf) nahm er
     ~170 px und verdeckte gut eine Reihe Kacheln (gemeldet 01.10.2026).
     Summe und Papierkorb stehen im aufgeklappten Blatt. */
  body:not(.auswahl-offen) #auswahl{flex-direction:row !important;
    align-items:center !important}
  body:not(.auswahl-offen) #auswahl .vk-kopf{flex:1 1 auto; min-width:0;
    border:0 !important; padding:10px 40px 10px 12px !important;
    min-height:0 !important; gap:8px}
  body:not(.auswahl-offen) #auswahl .vk-kopf::after{right:14px}
  body:not(.auswahl-offen) #auswahl .vk-symbol{width:28px !important;
    height:28px !important}
  body:not(.auswahl-offen) #auswahl .wand-titel{font-size:14px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  body:not(.auswahl-offen) #auswahl .auswahl-fuss{flex:none;
    border:0 !important; padding:8px 10px 8px 0 !important; background:none !important}
  body:not(.auswahl-offen) #auswahl .vk-summe,
  body:not(.auswahl-offen) #auswahl .vk-muell{display:none !important}
  body:not(.auswahl-offen) #auswahl .vk-los{min-height:40px !important;
    padding:0 14px !important; font-size:14px}
  body:not(.auswahl-offen) #auswahl .vk-fehler{display:none !important}

  /* Die letzten Kacheln duerfen nicht unter dem Streifen verschwinden. */
  body:has(#auswahl .auswahl-fuss:not(.still)) main{padding-bottom:80px !important}
  body:has(#auswahl .auswahl-fuss:not(.still)) .sup-schalter{display:none !important}

  /* ── Aufladen / Auszahlen ──────────────────────────────────────────
     Coins zu zweit, und der Tipp auf einen Coin oeffnet Betrag, Gebuehr
     und Knopf als Vollbild (handy.js). Vorher eine Kachel je Reihe, 140 px
     hoch, und das Formular erst unter allen Kacheln. */
  .geld-seite .geld-methoden{display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important}
  .geld-seite .geld-methoden .muenze{min-height:0 !important; height:auto !important;
    padding:30px 8px 12px !important}
  .geld-seite .geld-methoden .karte-kachel{grid-column:1 / -1}
  .geld-seite .geld-rechts{display:none !important}
  body.geld-offen .geld-seite .geld-rechts{
    display:flex !important; flex-direction:column !important;
    position:fixed !important; inset:0 0 calc(var(--unten) + env(safe-area-inset-bottom, 0px)) 0 !important;
    z-index:1400 !important; overflow:auto !important; margin:0 !important;
    width:auto !important; max-width:none !important; height:auto !important;
    border-radius:0 !important; padding:58px 16px 24px !important;
    background:var(--surface-fest, #1b1c20) !important;
  }
  body.geld-offen{overflow:hidden !important}
  .geld-zu{display:flex; position:absolute; top:8px; right:8px; z-index:2;
    width:44px; height:44px; align-items:center; justify-content:center;
    border:1px solid var(--hairline-2); border-radius:12px; cursor:pointer;
    background:var(--surface-2, #24262b); color:var(--ink); font-size:26px;
    line-height:1}

  /* ── Was seitwaerts herauslief (gemessen) ────────────────────────── */
  /* Sortierung: eine schiebbare Reihe statt einer zu breiten Zeile. */
  .sortierung{max-width:100%; overflow-x:auto; scrollbar-width:none;
    flex-wrap:nowrap !important}
  .sortierung::-webkit-scrollbar{display:none}
  .sortierung label{flex:none}
  /* Itemseite: "Noch nie verkauft ..." stand 3 px ueber den Rand. */
  .urteil{white-space:normal !important; max-width:100%}
  /* Einstellungen: die Reiter liefen bis 533 px. */
  .einst-nav{flex-wrap:wrap !important; overflow:visible !important}
  .einst-nav > label{flex:1 1 calc(50% - 6px)}

  /* Sets: zwei je Reihe. Mit 190 px Mindestbreite passte nur eine, und
     eine Kachel war fast so hoch wie der halbe Schirm. */
  .set-raster{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important}

  /* Tippziele: mindestens 44 px, wie Apple und Google es verlangen. */
  .btn{min-height:42px}
  .btn.small{min-height:36px}
}



/* ── Privatnachrichten am Handy (04.10.2026) ──────────────────────────
   Ein offenes Gespraech ist eine App-Ansicht: fest zwischen Kopfzeile und
   Leiste unten, nur der Verlauf rollt. Vorher rollte die Seite UND der
   Verlauf darin (Hoehe aus 100vh geraten) - Wischen nach oben blieb
   haengen, und die Eingabezeile wanderte mit. */
@media (max-width: 760px){
  html:has(.dm-flaeche.offen){overflow:hidden !important}
  .dm-flaeche.offen{position:fixed; left:0; right:0; z-index:5;
    top:var(--navhoehe, 64px);
    bottom:calc(60px + env(safe-area-inset-bottom, 0px));
    height:auto !important; min-height:0 !important; margin:0; gap:0}
  .dm-flaeche.offen .dm-fenster{border-radius:0; border:0; border-top:1px solid var(--hairline)}
  .dm-flaeche.offen .dm-kopf{padding:8px 12px}
  .dm-flaeche.offen .dm-verlauf{overscroll-behavior:contain; padding:10px 12px}
  .dm-flaeche.offen .dm-senden{padding:8px 10px; border-top:1px solid var(--hairline)}
  .dm-flaeche.offen .dm-senden input{font-size:16px} /* iOS zoomt sonst beim Tippen */
  body:has(.dm-flaeche.offen) .seitenfuss{display:none}
  /* Die Liste der Gespraeche: ohne Kasten, volle Breite. */
  .dm-flaeche:not(.offen){height:auto !important; min-height:0}
  .dm-flaeche:not(.offen) .dm-spalte{border-radius:12px}
  .dm-flaeche:not(.offen) .dm-rollbar{overflow:visible}
  .dm-person{padding:10px 8px}
}

/* Glocke am Handy: ganzes Fenster (Wunsch des Betreibers, 04.10.2026),
   oben Titel und Schliessen, darunter Reiter und Liste. */
@media (max-width:760px){
  nav:has(.glocke-feld:not([hidden])){z-index:2000 !important}
  html:has(body.glocke-offen){overflow:hidden}
  .glocke-feld{
    position:fixed !important; inset:0 !important; width:auto !important;
    height:100dvh !important; transform:none !important;
    border:0 !important; border-radius:0 !important; z-index:2100 !important;
    display:flex; flex-direction:column; box-shadow:none !important;
  }
  .glocke-feld[hidden]{display:none}
  .glocke-kopf{
    display:flex; align-items:center; justify-content:space-between;
    padding:calc(10px + env(safe-area-inset-top, 0px)) 12px 10px 16px;
    border-bottom:1px solid var(--hairline);
  }
  .glocke-kopf strong{font-size:17px}
  .glocke-zu{width:44px; height:44px; display:grid; place-items:center;
    border-radius:10px; color:var(--ink-2); background:transparent; border:0}
  .glocke-inhalt{flex:1; max-height:none !important;
    padding-bottom:env(safe-area-inset-bottom, 0px)}
  .glocke-reiter a{padding:11px 4px; font-size:14px}
}

/* ── Sell-Seite: Werkzeugleiste aufgeraeumt (05.10.2026) ─────────────
   Vorher drei volle Zeilen: Suche+Filter, dann Anzahl, Values und ein
   grosser roter "Did something go wrong?", dann Sortierung und ein
   ausgegrautes "Withdraw to Roblox". Jetzt: Suche+Filter, darunter EINE
   ruhige Zeile. Hilfe ist ein kleines "Help", Abholen erscheint erst,
   wenn etwas ausgewaehlt ist. */
@media (max-width:760px){
  body.verkauf-app .markt-leiste.verkauf-leiste{display:flex !important; flex-wrap:wrap;
    align-items:center; gap:8px 8px !important}
  body.verkauf-app .verkauf-leiste .such-zeile{flex:1 1 100%}
  body.verkauf-app .verkauf-leiste .zaehler{order:1; font-size:12.5px; color:var(--ink-2)}
  body.verkauf-app .verkauf-leiste .werte-schalter{order:2; padding:5px 9px !important;
    font-size:12px !important; min-height:0 !important}
  body.verkauf-app .verkauf-leiste .sup-knopf{order:3; background:none !important;
    border:1px solid color-mix(in srgb,var(--bad) 55%,transparent) !important;
    color:var(--bad) !important; box-shadow:none !important;
    padding:4px 10px !important; font-size:12px !important; border-radius:999px !important}
  body.verkauf-app .verkauf-leiste .sup-knopf .sup-lang{display:none}
  body.verkauf-app .verkauf-leiste .sup-knopf .sup-kurz{display:inline}
  body.verkauf-app .verkauf-leiste .sortierung{order:4; margin-left:auto !important}
  body.verkauf-app .verkauf-leiste .sortierung select{min-height:0 !important;
    padding:6px 28px 6px 10px !important; font-size:13px !important; width:auto !important}
  body.verkauf-app .verkauf-leiste .vk-spiel{order:5; flex:1 1 100%}
  body.verkauf-app .verkauf-leiste .vk-spiel:disabled{display:none}
  body.verkauf-app .verkauf-leiste .vk-aus{order:5; flex:1 1 100%}
}

/* Spielplatz-Look (06.10.2026): die Leiste unten in derselben Sprache -
   gewaehlter Abschnitt blau, wie oben am PC. */
@media (max-width:760px){
  .handy-leiste{background:#0f1526 !important; border-top:1px solid var(--hairline) !important}
  .handy-leiste > a, .handy-leiste > button{font-family:var(--spiel); font-weight:600}
  .handy-leiste .on, .handy-leiste [aria-expanded="true"]{color:var(--blau-hell) !important}
  .handy-leiste .on::before{background:var(--blau) !important}
}

/* Buy -> My offers: die Statistik-Spalte faellt am Handy weg. Sie rollte
   beim Hochwischen in sich selbst, statt die Seite zu bewegen, und zeigt
   nichts, was man unterwegs braucht. Der Shop-Link steht dafuer ueber
   den Kacheln (06.10.2026). */
@media (max-width:760px){
  aside.gs-wand{display:none !important}
}

/* Fenster am Handy, zweite Fassung (06.10.2026). Gemeldet: "sehen komisch
   aus, unten ist was frei". Kleine Fenster (Bearbeiten, Rueckfragen,
   Paarung, Warenkorb, Shop-Kauf) wurden auf den ganzen Schirm gezogen und
   liessen darunter eine leere Flaeche. Jetzt kommen sie als Blatt von
   unten, so hoch wie ihr Inhalt. Grosse Fenster (Einsatzwahl, Sets,
   Einstellungen, Verlauf) bleiben ganzer Schirm. */
@media (max-width:760px){
  dialog#bearbeiten-fenster, dialog#seiten-frage, dialog#mg-frage,
  dialog#anlegen, dialog#shop-kauf, dialog#freund-fenster,
  dialog.kfenster:has(.korb2){
    position:fixed !important; inset:auto 0 0 0 !important;
    width:100vw !important; max-width:none !important;
    height:auto !important; max-height:92dvh !important;
    margin:0 !important; border-radius:22px 22px 0 0 !important;
    border:0 !important; overflow:auto !important;
    padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    animation:blatt-hoch .22s ease-out;
  }
  dialog.kfenster:has(.korb2) .kfenster-inhalt{max-height:none !important}
  dialog#bearbeiten-fenster::backdrop, dialog#seiten-frage::backdrop,
  dialog#mg-frage::backdrop, dialog#anlegen::backdrop, dialog#shop-kauf::backdrop,
  dialog#freund-fenster::backdrop, dialog.kfenster:has(.korb2)::backdrop{
    background:rgba(6,4,14,.72);
  }
  /* Griffleiste oben, damit es als Blatt gelesen wird. */
  dialog#bearbeiten-fenster::before, dialog#seiten-frage::before,
  dialog#mg-frage::before, dialog#anlegen::before, dialog#shop-kauf::before,
  dialog.kfenster:has(.korb2)::before{
    content:""; display:block; width:42px; height:5px; border-radius:3px;
    background:var(--hairline-2); margin:8px auto 2px;
  }
  /* Knoepfe unten im Blatt gleich breit nebeneinander. */
  dialog#bearbeiten-fenster .overlay-fuss > *, dialog#seiten-frage .overlay-fuss > *,
  dialog#mg-frage .overlay-fuss > *, dialog#anlegen .overlay-fuss > *{flex:1}

  /* Einsatzwahl: Fuss und Wertzeile kleben am unteren Rand. Die Regeln
     am PC rechnen mit 20 px Innenabstand (bottom:-20px) - am Handy hat
     das Fenster keinen, und der Fuss schwebte 46 px ueber dem Rand. */
  dialog.duell-katalog .overlay-fuss{bottom:0 !important; margin:0 !important;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important}
  dialog.duell-katalog .einsatz-wertzeile{bottom:var(--fuss-h) !important; margin:0 !important}
  dialog.duell-katalog .overlay-fuss > *{flex:1}
  dialog.duell-katalog .einsatz-suche{width:100%}
  dialog.duell-katalog .einsatz-suche input{width:100%}
  /* Codex: Einsatzdialog mit erreichbarem Fuss (11.10.2026).
     Nur das Itemraster scrollt; Formular und Aktionen bleiben im Viewport. */
  dialog.duell-katalog{height:100dvh !important;max-height:100dvh !important;overflow:hidden !important}
  dialog.duell-katalog > form{height:100%;min-height:0;display:flex;flex-direction:column}
  dialog.duell-katalog .einsatz-auswahl{max-height:none !important;overflow:auto !important;flex:1 1 0;min-height:0;align-content:start}
  dialog.duell-katalog .overlay-fuss{margin-top:0 !important;flex-wrap:wrap;gap:8px}
  dialog.duell-katalog .overlay-fuss .flip-rules-link{flex:0 0 100%;margin:0;text-align:center}
  .mg-frage-knoepfe > *, .bearb-knoepfe > *{flex:1}
  .mg-frage-knoepfe, .bearb-knoepfe{display:flex; gap:10px}
  /* Warenkorb: Kopf und Schliessknopf in einer Zeile statt zwei. */
  dialog.kfenster:has(.korb2) .gf-schliessen{position:absolute !important; top:14px; right:12px}
  dialog.kfenster:has(.korb2) .korb2-kopf{padding-right:48px}
}
@keyframes blatt-hoch{from{transform:translateY(40px); opacity:.4} to{transform:none; opacity:1}}

/* Minigames am Handy (06.10.2026): die Spielauswahl lief als Wischleiste
   mit 78 % breiten Karten - das GEWAEHLTE Spiel (Connect 4) lag ausserhalb
   des Bildes, man sah nur MM2 Duel. Jetzt drei kleine Kacheln
   nebeneinander, Symbol ueber Name, alle immer sichtbar. */
@media (max-width:760px){
  .mg-reiter{display:grid !important; grid-template-columns:repeat(3,1fr) !important;
    overflow:visible !important; gap:8px !important; margin-bottom:14px}
  .mg-reiter a{flex:none !important; flex-direction:column; align-items:center; text-align:center;
    gap:6px !important; padding:10px 6px !important; min-width:0}
  .mg-reiter .symbol{width:40px; height:40px; border-radius:12px}
  .mg-reiter .symbol svg{width:22px; height:22px}
  .mg-reiter .text strong{font-size:13px; white-space:nowrap}
  .mg-reiter .text small, .mg-reiter .marke{display:none !important}
  .mg-reiter a::after{display:none}
  /* Codex: zwei aktuelle Spielarten statt drei alter Modi (11.10.2026). */
  .mg-reiter.game-switch{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .mg-reiter.game-switch a{min-width:0;gap:7px;padding:9px !important}
  .mg-reiter.game-switch .text strong{font-size:13px !important;white-space:normal}
  .mg-reiter.game-switch .game-icon{width:32px;height:32px}
  .mg-reiter.game-switch .flip-coin{width:32px;height:32px}

}

/* Battleship am Handy (06.10.2026): im Spiel kommt das gegnerische Feld
   ZUERST - dort wird getippt. Vorher stand die eigene Flotte oben, und
   "Your shot" zeigte auf ein Feld unterhalb des Bildschirms. Die eigene
   Flotte darunter kleiner. Beim Aufstellen ist das Gegnerfeld leer und
   nutzlos - dann ganz weg. */
@media (max-width:760px){
  .mg-schiffe.phase-spiel{display:flex !important; flex-direction:column}
  .mg-schiffe.phase-spiel > .mg-feld-box:last-child{order:-1}
  .mg-schiffe.phase-spiel > .mg-feld-box:first-child .mg-feld{max-width:230px; margin-inline:auto}
  .mg-schiffe.phase-aufstellen > .mg-feld-box:last-child{display:none}
  .mg-aufstellen{display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
  .mg-aufstellen > .btn{flex:1 1 30%}
  .mg-aufstellen > span{flex-basis:100%; text-align:center}
}
@media (max-width:760px){
  /* "Updated" stand im Duellkopf als einzelnes Wort ohne Bezug. */
  .duell-aktualisieren-wrap{display:none}
}

/* Leerplatz in Fenstern am Handy (06.10.2026). Gemeldet beim Verlauf, galt
   fuer alle: der Schliessknopf stand in einer EIGENEN Zeile (60-80 px
   leer ueber dem Titel), und die Verlaufsliste rollte in einem eigenen
   Kasten (420 px) - darunter blieb das halbe Fenster frei. Jetzt liegt der
   Knopf ueber dem Kopf (klebt beim Rollen weiter oben), der Inhalt beginnt
   gleich oben, und die Liste rollt mit dem Fenster. */
@media (max-width:760px){
  dialog .gf-schliessen{position:sticky !important; top:0; height:0 !important;
    overflow:visible; margin:0 !important; padding:0 !important; z-index:6}
  dialog .gf-schliessen button{position:absolute !important; top:10px; right:10px}
  .kfenster .kfenster-inhalt{padding-top:16px !important}
  .kfenster .fenster-kopf, .kfenster .korb2-kopf,
  .setfenster .fenster-kopf{padding-right:50px; margin-top:0}
  .kfenster .verlauf, .kfenster .vf-liste{max-height:none !important; overflow:visible !important}
  .vf-liste .vf-auge[open] .vf-detail{margin-top:8px}
  .glocke-feld{background:var(--surface) !important}
}
@media (max-width:760px){
  .kfenster .korb2-kopf{justify-content:flex-start !important; gap:8px; align-items:baseline}
}

/* Leiste unten "schwebt" beim schnellen Scrollen (06.10.2026): die
   Fuellflaeche UNTER der Leiste (::after, sichtbar waehrend die
   Browserleiste ein-/ausfaehrt) und der html-Grund standen noch auf dem
   Grau von "Schwarz statt Himmel", die Leiste selbst auf Blau. Der graue
   Streifen darunter liess sie abgehoben aussehen. Alles eine Farbe, aus
   dem Lila-Schema. Wer die Leistenfarbe aendert: ::after erbt sie. */
@media (max-width:760px){
  .handy-leiste{background:#0b0b0c !important}
  .handy-leiste::after{background:inherit !important}
  html{background:#0b0b0c}
}

/* Markt, Sell und Minigames als App-Ansicht (06.10.2026): nur `main` rollt,
   nicht das Browserfenster. Rollt das Fenster, faehrt Safaris Leiste beim
   schnellen Wischen ein und aus, und iOS malt feste Elemente waehrenddessen
   nur im sichtbaren Bereich - die Leiste unten sprang hoch, darunter liefen
   die Kacheln durch (Bildschirmvideo vom 06.10.). Keine Fuellfarbe deckt
   das ab. Mit festem Fenster bleibt Safaris Leiste stehen. Dieselbe Bauart
   wie das offene Gespraech in den Nachrichten. NICHT der body als
   Rollbereich (03.10.: Wischen hing) - ein inneres Element. */
@media (max-width:760px){
  html:has(body:is(.markt-app,.duell-app)){height:100%; overflow:hidden}
  body:is(.markt-app,.duell-app){height:100dvh; box-sizing:border-box;
    overflow:hidden; display:flex; flex-direction:column}
  body:is(.markt-app,.duell-app) > nav{flex:none}
  body:is(.markt-app,.duell-app) > main{flex:1 1 auto; min-height:0;
    overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain}
}

/* ---- Claude: Einsatzwahl am Handy kompakter (12.10.2026) ----
   Gemeldet: in der Itemauswahl (Coin Flip, 1v1) musste man weit scrollen.
   Kopf, Seitenwahl und Kacheln nahmen so viel Platz, dass vom Raster
   anderthalb Reihen blieben. Jetzt kleinerer Kopf, flache Seitenwahl und
   niedrigere Kacheln - der Fuss mit "Create" bleibt wie bei Codex stehen. */
@media (max-width:760px){
  dialog.duell-katalog .overlay-kopf{margin-bottom:6px !important}
  dialog.duell-katalog .overlay-kopf h2{font-size:21px !important}
  dialog.duell-katalog .einsatz-form > p.muted.small:not([id]){display:none}
  dialog.duell-katalog .einsatz-form > p.muted.small[id]{margin:0 0 6px !important; font-size:13px !important}
  dialog.duell-katalog .coin-choice{gap:8px !important; margin:4px 0 8px !important}
  dialog.duell-katalog .coin-choice label{padding:8px 10px !important; gap:8px !important; min-height:0 !important}
  dialog.duell-katalog .coin-choice label{grid-template-columns:32px 1fr !important; align-items:center}
  dialog.duell-katalog .coin-choice .flip-coin{width:32px !important; height:32px !important; grid-row:1 !important}
  dialog.duell-katalog .coin-choice label > span:last-child{display:none}
  dialog.duell-katalog .einsatz-kopfzeile{margin:0 0 6px !important; padding:0 !important; border:0 !important}
  dialog.duell-katalog .einsatz-suche{margin:0 0 8px !important}
  dialog.duell-katalog .einsatz-suche input{height:40px !important}
  dialog.duell-katalog .einsatz-auswahl{gap:8px !important}
  dialog.duell-katalog .einsatz-bild{height:92px !important; min-height:0 !important}
  dialog.duell-katalog .einsatz-bild img{max-height:76px !important}
  dialog.duell-katalog .einsatz-name{padding:6px 8px 2px !important}
  dialog.duell-katalog .einsatz-schritte{padding:4px 8px 8px !important}
  dialog.duell-katalog .einsatz-schritte button,
  dialog.duell-katalog .einsatz-schritte input{height:32px !important; min-height:0 !important}
  dialog.duell-katalog .einsatz-wertzeile{margin:6px 0 !important}
  dialog.duell-katalog .overlay-fuss .btn{padding-left:10px !important; padding-right:10px !important; font-size:14px !important; line-height:1.15 !important}
}

/* ---- Claude: Einzahlfenster als Blatt von unten (12.10.2026) ----
   Am Handy fuellte es den ganzen Schirm, die untere Haelfte blieb leer.
   Jetzt wie die anderen kleinen Fenster: so hoch wie der Inhalt. */
@media (max-width:760px){
  dialog#dep-fenster{
    position:fixed !important; inset:auto 0 0 0 !important;
    width:100vw !important; max-width:none !important;
    height:auto !important; min-height:0 !important; max-height:92dvh !important;
    margin:0 !important; border-radius:22px 22px 0 0 !important;
    border:0 !important; overflow:auto !important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    animation:blatt-hoch .22s ease-out;
  }
  dialog#dep-fenster::backdrop{background:rgba(6,4,14,.72)}
}

/* Withdraw to Roblox steht unter "List for sale" (12.10.2026). Zugeklappt
   bleibt der Streifen EINE Zeile - der Knopf erscheint erst im
   aufgeklappten Blatt, sonst verdeckt der Streifen die letzte Reihe. */
@media(max-width:760px){
  body:not(.auswahl-offen) #auswahl #abholen{display:none !important}
}

/* Eigene Sets am Handy (13.10.2026): das Fenster rollt als Ganzes, das
   Raster nicht selbst - sonst zwei Rollbereiche ineinander. */
@media (max-width:760px){
  .es-raster{max-height:none;overflow:visible;grid-template-columns:repeat(3,minmax(0,1fr))}
  .es-bild{height:52px}
  .es-bild img{max-height:52px}
  .es-fuss .btn{flex:none}
}

/* Set-Trennen-Rueckfrage am Handy als Blatt von unten (13.10.2026). */
@media (max-width:760px){
  dialog.split-frage:not(#_){
    position:fixed !important; inset:auto 0 0 0 !important;
    width:100vw !important; max-width:none !important;
    height:auto !important; max-height:92dvh !important;
    margin:0 !important; border-radius:22px 22px 0 0 !important;
    border:0 !important; overflow:auto !important;
    padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    animation:blatt-hoch .22s ease-out;
  }
  dialog.split-frage::backdrop{background:rgba(6,4,14,.72)}
  .split-teile{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none}
  .split-knoepfe > *{flex:1}
}

/* Sell-Reiter in EINER Reihe ohne Seitwaertsrollen (13.10.2026):
   "Withdrawals" lief rechts aus dem Bild. */
@media (max-width:760px){
  .verkauf-reiter:not(#_){display:flex !important;width:100%;gap:3px !important;
    overflow:visible !important;padding:3px !important}
  .verkauf-reiter .vreiter:not(#_){flex:1 1 0 !important;min-width:0 !important;
    justify-content:center !important;gap:4px !important;padding:8px 4px !important;
    font-size:13px !important;white-space:nowrap !important;letter-spacing:0 !important}
  .verkauf-reiter .vreiter .vzahl:not(#_){padding:1px 4px !important;font-size:10.5px !important;
    min-width:0 !important}
}
@media (max-width:350px){
  .verkauf-reiter .vreiter:not(#_){font-size:11.5px !important;padding:8px 2px !important;gap:3px !important}
}

/* Sehr schmale Handys (<=350 px): Kopfzeile lief 26 px rechts heraus,
   das Profilbild war abgeschnitten (Pruefer 13.10.2026). */
@media (max-width:350px){
  nav .inner:not(#_){column-gap:4px !important;padding-left:10px !important;padding-right:10px !important}
  .guthaben-knopf:not(#_){gap:5px !important;padding-left:8px !important;padding-right:8px !important}
  .guthaben-knopf > svg:first-child:not(#_){display:none !important}
}

/* ===== Duenne Linie oben beim Scrollen (14.10.2026) =====
   Der zugeklappte Filterkasten klebt (sticky, top:0) und behielt 1 px
   Rand oben und unten - eine spaetere Regel mit :not(#_) schlug das
   border:0 weiter oben. Zugeklappt hat er am Handy keine Flaeche. */
@media (max-width:760px){
  details.filterbox:not([open]):not(#_){border:0 !important;
    background:none !important; height:0 !important; min-height:0 !important;
    overflow:hidden !important}
}