/* 1025DEX Community v0.31.35 · css/modal.css · ausgelagert aus index.html */
/* ---------- Modal ---------- */
.lightbox{position:fixed;inset:0;z-index:80;display:none;background:rgba(0,0,0,.93);
  align-items:center;justify-content:center;flex-direction:column;padding:16px}
.lightbox.on{display:flex}
.lightbox.on{animation:backdropIn var(--motion-base) ease both}
.lightbox.closing{display:flex;pointer-events:none;animation:backdropOut 240ms ease both}
.lightbox img{max-width:96vw;max-height:74vh;border-radius:10px;box-shadow:0 8px 40px rgba(0,0,0,.7)}
.lightbox.on img{animation:cardZoomIn 360ms var(--ease-fluid) both}
.lightbox.closing img{animation:cardZoomOut 240ms ease both}
.lbclose{position:absolute;top:calc(12px + env(safe-area-inset-top));right:14px;z-index:2;
  background:#fff;color:#111;border:3px solid #000;border-radius:10px;padding:5px 11px;font-weight:800;font-size:15px}
.lbfoot{margin-top:14px;text-align:center;max-width:520px}
.lbcap{color:#fff;font-size:13px;line-height:1.35;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.zoomable{cursor:zoom-in}
.modal{position:fixed;inset:0;z-index:60;display:none}
.modal.on{display:block}
.modal.on .bd{animation:backdropIn var(--motion-base) ease both}
.modal.on .sheetbox{animation:sheetIn 360ms var(--ease-fluid) both;will-change:transform,opacity}
.modal.closing{display:block;pointer-events:none}
.modal.closing .bd{animation:backdropOut 240ms ease both}
.modal.closing .sheetbox{animation:sheetOut 260ms cubic-bezier(.4,0,1,1) both}
.modal .bd{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.modal .sheetbox{
  position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;
  max-width:760px;margin:0 auto;
  background:var(--bg);border-top:4px solid var(--line);border-radius:18px 18px 0 0;
  padding:14px 14px calc(20px + env(safe-area-inset-bottom));
}
.grab{width:44px;height:5px;cursor:pointer;border-radius:99px;background:var(--line-soft);margin:0 auto 12px}
.slotcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.slotcard{border:3px solid var(--line);border-radius:12px;background:var(--panel);padding:8px;text-align:center}
.slotcard img{width:100%;aspect-ratio:.72;object-fit:contain;border-radius:6px}
.slotcard .ph{width:100%;aspect-ratio:.72;border-radius:6px;background:var(--panel-2);display:grid;place-items:center;font-size:11px;color:var(--ink-soft);border:2px dashed var(--line-soft)}
.btn{display:block;width:100%;border:3px solid var(--line);border-radius:11px;padding:10px;font-weight:800;background:var(--panel);margin-top:8px}
.btn:active{transform:translateY(2px)}
/* Ohne diese Zeile setzt sich display:block oben gegen das hidden-Attribut
   durch - genau daran war der Lichtknopf auf Geraeten ohne Lampe sichtbar. */
[hidden]{display:none !important}
.btn.w{background:var(--wish);color:#fff}
.btn.o{background:var(--owned);color:#fff}
.btn.d{background:var(--panel);color:#c0392b}
/* ---- Gastmodus ----
   Wer nicht angemeldet ist, sieht alles, kann aber nichts eintragen. Statt
   Knoepfe anzubieten, die die Datenbank hinterher ablehnt, verschwinden sie.
   Die Notizen bleiben lesbar, nur nicht mehr anfassbar. */
html[data-gast] .btn.w,
html[data-gast] .btn.o,
html[data-gast] .btn.d,
html[data-gast] .btn.t,
html[data-gast] .taux,
/* v0.28.6 · Die ganze Aktionszeile der Suchtreffer, nicht nur "Tauschen".
   Blieben Wunsch und Bereitgestellt stehen, war der Finder die einzige
   Stelle, an der ein Gast Knoepfe sah, die nichts tun. Eine leere Zeile
   waere nur eine Luecke - deshalb faellt der ganze Kasten weg, und der
   Hinweis oben im Finder erklaert, warum. */
html[data-gast] .acts,
html[data-gast] [data-upload],
html[data-gast] [data-up],
html[data-gast] [data-art],
html[data-gast] [data-clr],
html[data-gast] .bkrow button,
html[data-gast] #bkImport,
html[data-gast] #preisBtn,
html[data-gast] .shopholt,
/* v0.28.4 · Binder-Layout und Anordnen schreiben in die Datenbank. Ohne
   Anmeldung lehnt sie ab - also gar nicht erst anbieten, wie bei allen
   anderen Eintragefunktionen auch. */
html[data-gast] #binderLayoutBtn,
html[data-gast] #binderArrangeBtn,
html[data-gast] #blSave,
html[data-gast] #baSave,
html[data-gast] #shopRefresh{display:none!important}
html[data-gast] textarea.note{pointer-events:none;background:var(--panel-2);color:var(--ink-soft)}
.gastband{display:none}
html[data-gast] .gastband{display:flex;align-items:center;gap:10px;margin-bottom:13px;padding:11px 13px;
  border:3px solid var(--line);border-radius:13px;background:var(--panel);box-shadow:var(--shadow)}
.gastband svg{width:21px;height:21px;flex:0 0 21px;fill:none;stroke:var(--ink-soft);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html[data-gast] .gastband{flex-wrap:wrap;row-gap:8px}
.gastband .gb-txt{flex:1 1 200px;min-width:0;font-size:12px;font-weight:700;line-height:1.35;color:var(--ink-soft)}
.gastband .gb-txt b{display:block;font-size:13px;color:var(--ink)}
.gastband .gb-an{margin-left:auto;flex:0 0 auto;font-size:12px;font-weight:800;color:#fff;
  background:var(--red-dark);border:3px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer}

/* Statuszeile der täglichen Preisaktualisierung, unten im Hero-Panel.
   Sie ist bewusst leise: interessant ist sie nur, wenn etwas hakt. */
.preiszeile{display:flex;align-items:center;gap:9px;width:100%;margin-top:11px;
  padding:8px 10px;border:2px solid var(--line-soft);border-radius:10px;
  background:transparent;color:var(--ink-soft);font-size:11px;font-weight:700;
  text-align:left;line-height:1.35;cursor:pointer}
.preiszeile b{color:var(--ink)}
.preiszeile .pz-punkt{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--owned)}
.preiszeile.laeuft .pz-punkt{background:var(--red);animation:pzPuls 1.1s ease-in-out infinite}
.preiszeile.fehler{border-color:var(--red)}
.preiszeile.fehler .pz-punkt{background:var(--red)}
@keyframes pzPuls{0%,100%{opacity:1}50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.preiszeile.laeuft .pz-punkt{animation:none}}

/* Der Preisalarm ist gute Nachricht, deshalb gruen; der Tauschstapel ist
   eine Information unter Freunden, deshalb ruhig. */
/* Zwei Klassen, damit sie die Grundfarbe von .shopbtn schlagen - sonst
   entscheidet die Reihenfolge im Stylesheet und alles waere rot. */
.btn.alarmbtn{background:var(--owned)}
.btn.tauschbtn{background:var(--panel-2);color:var(--ink)}
.btn.tauschbtn small{color:var(--ink-soft)}
.btn.tauschbtn svg{stroke:var(--ink)}

/* Tauschstapel in der Pokémon-Ansicht */
.tauschbox{margin-top:11px;border:2px solid var(--line-soft);border-radius:11px;padding:9px 10px}
.taurow{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:2px solid var(--line-soft)}
.taurow{flex-wrap:wrap}
.taurow .chip{font-size:11px;white-space:normal}
.taurow:last-of-type{border-bottom:0}
.taurow b{display:block;font-size:12px;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
.taurow small{display:block;font-size:10px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.taurow .av{border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:#fff;font-weight:800}
.taupreis{font-size:12px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.taux{border:2px solid var(--line);background:var(--panel);color:var(--ink);border-radius:50%;
  width:22px;height:22px;flex:0 0 22px;font-size:11px;line-height:1;cursor:pointer}
.btn.t{background:var(--lens);color:#fff}
.acts .bt{background:var(--lens);color:#fff}

/* Einkaufsliste ist der einzige Knopf auf der Übersicht, der irgendwohin
   führt - er bekommt deshalb als einziger die dunkle Hausfarbe und liegt
   damit eine Stufe über den übrigen Flächen. */
.shopbtn{display:flex;align-items:center;gap:11px;text-align:left;
  background:var(--red-dark);color:#fff;padding:12px 14px;margin:0 0 13px}
.shopbtn b{display:block;font-size:15px;line-height:1.2;letter-spacing:.01em}
.shopbtn small{display:block;font-size:12px;font-weight:600;margin-top:2px;
  color:rgba(255,255,255,.82)}
.shopbtn .sb-txt{min-width:0}
.shopbtn svg{fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.shopbtn .sb-korb{width:23px;height:23px;flex:0 0 23px}
.shopbtn .sb-pfeil{width:19px;height:19px;flex:0 0 19px;margin-left:auto;opacity:.8}
.whobtn{display:flex;align-items:center;gap:12px;font-size:17px;padding:13px 16px;text-align:left}
.whoav{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:rgba(255,255,255,.28);
  border:2px solid var(--line);display:grid;place-items:center;font-size:14px;font-weight:800}
.mform{display:grid;gap:9px;margin-bottom:4px}
.mform label{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.mform .search{margin-top:3px;padding:9px 10px;box-shadow:none}
.mform .req{color:#c0392b}
textarea.note{width:100%;border:3px solid var(--line);border-radius:11px;padding:9px;background:var(--panel);min-height:60px;resize:vertical}
.spin{
  position:relative;display:inline-block;width:15px;height:15px;border:2px solid var(--line);border-radius:50%;
  background:linear-gradient(to bottom,var(--red) 0 42%,var(--line) 42% 58%,#fff 58% 100%);
  animation:sp .82s var(--ease-soft) infinite;vertical-align:-3px;
}
.spin::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;border:1px solid var(--line)}
@keyframes sp{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.92)}100%{transform:rotate(360deg) scale(1)}}
.empty-state{text-align:center;padding:22px 16px}
.empty-state img{width:110px;height:110px;object-fit:contain;display:block;margin:0 auto 8px;filter:grayscale(1) contrast(.9);opacity:.34}
html[data-theme="dark"] .empty-state img{filter:grayscale(1) brightness(1.6);opacity:.3}
.empty-state b{display:block;font-size:16px}
.empty-state p{max-width:390px;margin:6px auto 12px;color:var(--ink-soft);font-size:13px}
.banner{border:3px solid var(--line);border-radius:12px;padding:8px 10px;background:#ffd76e;color:#16161c;font-size:12px;font-weight:700;margin-bottom:8px}

/* v0.31.35 · Blättern in der Großansicht. Während gewischt wird, darf die
   Einblend-Animation das Bild nicht festhalten - sonst folgt es dem Finger
   nicht. Beim Schließen fällt die Klasse weg, die Ausblendung läuft normal. */
.lightbox.on.lb-blaettert img{animation:none}
/* Ziehen und Wischen übernimmt die App selbst; der Browser soll dabei weder
   die Seite dahinter bewegen noch neu laden. Zoomen mit zwei Fingern bleibt. */
.lightbox.on{touch-action:pinch-zoom}
/* v0.31.35 · Heruntergezogen und losgelassen: Das Bild fliegt von der
   Stelle weiter, an der der Finger es gelassen hat - die normale
   Ausblend-Animation würde es vorher in die Mitte zurückholen. */
.lightbox.closing.lb-gezogen img{animation:none}
/* Pokémon ohne Karte: das Sprite groß, ohne Kartenrahmen und -schatten */
.lightbox img.lb-sprite{width:min(78vw,380px);height:auto;max-height:60vh;object-fit:contain;
  border-radius:0;box-shadow:none;background:none;filter:drop-shadow(0 12px 28px rgba(0,0,0,.55))}