/* Kartenalbum
   Leitbild: eine Sammelmappe. Der Raster ist eine 9er-Seite, fehlende Karten
   sind leere Taschen. Deshalb drei Spalten, deshalb die vertieften Slots. */

:root {
  --desk:        #DDE1E6;
  --desk-deep:   #C6CCD3;
  --vinyl:       #12161D;
  --pocket:      #1B2230;
  --pocket-edge: #2B3648;
  --ink:         #0C0F14;
  --ink-soft:    #59626E;
  --paper:       #F4F6F8;
  --accent:      #3457D5;
  --accent-soft: #6E8CF0;
  --amber:       #C08A2E;

  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --gap: 6px;
  --radius: 4px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--body);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------------------------------------------------------------- Kopfbereich */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--desk);
  border-bottom: 1px solid var(--desk-deep);
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
}

.topbar__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.topbar__eyebrow,
.worth__label {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2px;
}

.topbar__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

.titleline { display: flex; align-items: center; gap: 10px; min-width: 0; }

.back {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--desk-deep);
  color: var(--ink);
  font-size: 17px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.worth { text-align: right; flex: none; }

.worth__value {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 19px;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

/* Fortschritt: bewusst als Balken mit Kerben, nicht als Prozentring.
   Ein Album füllt sich von links nach rechts, nicht im Kreis. */
.progress { margin-top: 12px; }

.progress__track {
  height: 5px;
  background: var(--desk-deep);
  border-radius: 99px;
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 99px;
  transition: width .35s cubic-bezier(.2,.7,.3,1);
}

.progress__text {
  margin: 5px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}

.seg {
  display: inline-flex;
  background: var(--desk-deep);
  border-radius: var(--radius);
  padding: 2px;
}

.seg__btn {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 3px;
  padding: 6px 11px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.seg__btn.is-active {
  background: var(--accent);
  color: #fff;
}

.filters { display: inline-flex; gap: 6px; }

.chip {
  font-family: var(--body);
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--desk-deep);
  border-radius: 99px;
  padding: 5px 11px;
  cursor: pointer;
}

.chip.is-active {
  color: var(--ink);
  border-color: var(--ink);
}

/* ------------------------------------------------------------ Die Albumseite */

.page {
  background: var(--vinyl);
  padding: 14px;
  min-height: 60dvh;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* eine Albumseite ist drei Taschen breit */
  gap: var(--gap);
  margin: 0 auto;
  max-width: 760px;
}

/* Das Regal. Jedes Album ist eine Mappe mit Ruecken links und Fuellstand
   unten - dieselbe Sprache wie die Taschen darin. */
.shelf {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 auto;
  max-width: 760px;
}

.album {
  display: flex;
  align-items: stretch;
  gap: 12px;
  background: var(--pocket);
  border-radius: 6px;
  padding: 12px;
  text-decoration: none;
  color: var(--paper);
  box-shadow: inset 0 1px 0 var(--pocket-edge);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}

.album:active { transform: scale(.99); }

.album:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

/* Der Ruecken: schmaler farbiger Streifen, wie bei einer Mappe im Regal */
.album__cover {
  flex: none;
  width: 84px;
  display: grid;
  place-items: center;
  padding: 6px;
  border-radius: 4px;
  background: rgba(0,0,0,.28);
  box-shadow: inset 2px 0 0 var(--accent);
}

.album.is-complete .album__cover { box-shadow: inset 2px 0 0 var(--amber); }

.album__logo { max-width: 100%; max-height: 46px; object-fit: contain; }

/* Sets ohne Grafik bekommen ein gesetztes Ruecken-Etikett statt einer Luecke.
   Sieht nach Absicht aus, nicht nach fehlendem Bild. */
.album__fallback {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
  color: #C8D0DC;
  padding: 0 2px;
}

.album__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}

.album__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.album__track {
  display: block;
  height: 4px;
  background: rgba(255,255,255,.09);
  border-radius: 99px;
  overflow: hidden;
}

.album__fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
}

.album.is-complete .album__fill { background: var(--amber); }

.album__stats {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: #96A1B0;
  font-variant-numeric: tabular-nums;
}

.album__value { color: var(--amber); }

/* Die leere Tasche ist das Kernbild: vertieft, mit sichtbarer Nummer.
   Der Sammler sieht auf einen Blick, welche Plätze noch offen sind. */
.pocket {
  position: relative;
  aspect-ratio: 63 / 88;
  border-radius: var(--radius);
  background: var(--pocket);
  box-shadow: inset 0 1px 0 var(--pocket-edge),
              inset 0 0 0 1px rgba(255,255,255,.04);
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  transition: transform .12s ease;
}

.pocket:active { transform: scale(.97); }

.pocket:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

.pocket__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: #4C5768;
  letter-spacing: .04em;
}

.pocket__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
}

.pocket.is-owned .pocket__img { opacity: 1; }

/* Nicht besessene Karten bleiben als Schemen sichtbar, sobald ein Bild da ist –
   sonst kann man nicht erkennen, was einem fehlt. */
.pocket.has-image:not(.is-owned) .pocket__img {
  opacity: .17;
  filter: grayscale(1) contrast(.8);
}

.pocket.has-image:not(.is-owned) .pocket__num {
  background: linear-gradient(to top, rgba(18,22,29,.9), transparent 55%);
  align-items: flex-end;
  padding-bottom: 5px;
}

.pocket__count {
  position: absolute;
  right: 3px;
  bottom: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* Der Preis sitzt rechts oben. Links oben steht die Ausfuehrungsmarkierung,
   und dort ueberdeckten sich beide. */
.pocket__price {
  position: absolute;
  right: 3px;
  top: 3px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(12,15,20,.78);
  color: #E4E8EE;
  font-family: var(--mono);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

/* Holo bekommt einen schillernden Rand statt eines Labels – das ist die
   Eigenschaft, die man am echten Karton auch sieht. */
.pocket.is-owned.is-holo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(120deg, #7BE3D3, #9B8CF5, #F0A6C8, #F5D98C, #7BE3D3);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Variante gibt es bei dieser Karte gar nicht */
/* .pocket.is-unavailable ist entfallen: Nicht erschienene Ausfuehrungen
   werden gar nicht mehr gezeigt. Ein graues Fach fuer eine Karte, die es
   als Reverse nie gab, ist keine Luecke in der Sammlung - es ist gar kein
   Fach. */

.empty {
  color: #7B8595;
  font-size: 14px;
  text-align: center;
  padding: 48px 20px;
  margin: 0;
}

/* ------------------------------------------------------------------- Detail */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8,10,14,.6);
  backdrop-filter: blur(2px);
}

.sheet__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: 14px 14px 0 0;
  padding: 18px 18px calc(20px + env(safe-area-inset-bottom));
  animation: rise .22s cubic-bezier(.2,.8,.3,1);
}

@keyframes rise { from { transform: translateY(14px); opacity: 0; } }

.sheet__close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}

.sheet__img {
  display: block;
  width: 140px;
  border-radius: 6px;
  margin: 4px auto 12px;
  box-shadow: 0 6px 18px rgba(12,15,20,.22);
}

.sheet__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  margin: 0 0 3px;
  text-align: center;
}

.sheet__meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  margin: 0 0 16px;
}

.steppers { display: grid; gap: 8px; }

.stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--desk-deep);
  border-radius: 8px;
  padding: 9px 10px;
}

.stepper__label {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 14px;
}

.stepper__price {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.stepper__btn {
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--desk-deep);
  border-radius: 7px;
  background: var(--paper);
  font-size: 19px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.stepper__btn:disabled { opacity: .35; cursor: default; }

.stepper__qty {
  width: 30px;
  text-align: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.sheet__updated {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  text-align: center;
  margin: 14px 0 0;
}

/* -------------------------------------------------------------------- Toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  padding: 9px 15px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(12,15,20,.3);
}

/* ------------------------------------------------------------------ Größere Schirme */

@media (min-width: 620px) {
  .grid { grid-template-columns: repeat(6, 1fr); }   /* zwei Albumseiten nebeneinander */
  .shelf { grid-template-columns: repeat(2, 1fr); }
  .page { padding: 22px; }
  .topbar__title { font-size: 26px; }
  .worth__value { font-size: 24px; }
}

@media (min-width: 980px) {
  .grid { grid-template-columns: repeat(9, 1fr); max-width: 1100px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Das hidden-Attribut muss die Anzeige oben schlagen, sonst liegt die
   Detailansicht dauerhaft ueber der Seite. */
.sheet[hidden] { display: none; }

/* --------------------------------------------------------------- Kurven */

/* Die Wertentwicklung sitzt ueber dem Regal - beim Oeffnen die erste Zahl,
   die man sehen will. */
.trend {
  background: var(--pocket);
  border-radius: 6px;
  padding: 12px 12px 0;
  margin: 0 auto 12px;
  max-width: 760px;
  box-shadow: inset 0 1px 0 var(--pocket-edge);
  overflow: hidden;
}

.trend__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.trend__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7E8899;
}

.trend__deltas {
  display: flex;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: #6FCF97;
  font-variant-numeric: tabular-nums;
}

.trend.is-falling .trend__deltas { color: #E2857A; }

.trend__wait {
  margin: 0 auto 12px;
  max-width: 760px;
  padding: 14px;
  background: var(--pocket);
  border-radius: 6px;
  font-size: 12px;
  color: #8B94A3;
  text-align: center;
}

.spark { display: block; width: 100%; height: 64px; }

.spark__line {
  fill: none;
  stroke: #6FCF97;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.spark__area { fill: #6FCF97; opacity: .13; }

.spark.is-falling .spark__line { stroke: #E2857A; }
.spark.is-falling .spark__area { fill: #E2857A; }

/* In der Detailansicht: eine kleine Kurve je Ausfuehrung */
.charts { margin-top: 14px; }

.chart {
  margin: 0 0 10px;
  padding: 8px 8px 0;
  background: #fff;
  border: 1px solid var(--desk-deep);
  border-radius: 8px;
  overflow: hidden;
}

.chart__cap {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.chart__delta { color: #2F8F5B; font-variant-numeric: tabular-nums; }
.chart__delta.is-falling { color: #B4483C; }

.chart .spark { height: 48px; }

.chart__wait {
  margin: 0;
  padding: 10px;
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
}

/* Aufteilung der Wertaenderung */
.split {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0 11px;
  margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.split__part { display: flex; align-items: baseline; gap: 6px; }

.split__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7E8899;
}

.split__value {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: #6FCF97;
  font-variant-numeric: tabular-nums;
}

.split__part.is-falling .split__value { color: #E2857A; }

.split__note {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  color: #616B7A;
}

.trend--slim { padding-bottom: 0; }
.trend--slim .spark { height: 44px; }

/* ---------------------------------------------------------------- Suche */

.searchrow { position: relative; margin-top: 10px; }

.search {
  width: 100%;
  font-family: var(--body);
  font-size: 15px;               /* unter 16px zoomt iOS beim Tippen hinein */
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--desk-deep);
  border-radius: 8px;
  padding: 9px 34px 9px 12px;
  appearance: none;
}

.search::placeholder { color: #939CA9; }

.search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(52,87,213,.14);
}

.search::-webkit-search-cancel-button { display: none; }

.search__clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}

/* Treffer: Bild, Name, Album - genug, um die richtige Karte zu erkennen */
.hits { display: grid; gap: 6px; margin: 0 auto; max-width: 760px; }

.hit {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: var(--pocket);
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--paper);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--pocket-edge);
  -webkit-tap-highlight-color: transparent;
}

.hit:active { transform: scale(.995); }
.hit:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

.hit__thumb {
  flex: none;
  width: 34px;
  aspect-ratio: 63 / 88;
  object-fit: cover;
  border-radius: 3px;
  background: rgba(0,0,0,.3);
}

.hit__body { flex: 1; min-width: 0; }

.hit__name {
  display: block;
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hit__meta {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: #8B94A3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hit__side {
  flex: none;
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.hit__price { display: block; color: var(--amber); }

.hit__owned {
  display: inline-block;
  margin-top: 2px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.sheet__link {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

/* ----------------------------------------------------------- Fehlliste */

.linkbtn {
  display: block;
  margin-left: auto;
  margin-top: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}

.chip--action {
  margin-left: auto;
  color: var(--accent);
  border-color: rgba(52,87,213,.35);
  font-weight: 600;
}

.sheet__panel--wide { max-width: 560px; }

.seg--full { display: flex; width: 100%; margin-bottom: 10px; }
.seg--full .seg__btn { flex: 1; }

.listbox {
  width: 100%;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--desk-deep);
  border-radius: 8px;
  padding: 10px;
  resize: vertical;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.bigbtn {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.bigbtn:active { opacity: .85; }

.homelink { color: inherit; text-decoration: none; }

.sheet__home {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  margin: -6px 0 12px;
}

.linkrow { display: flex; gap: 10px; justify-content: flex-end; margin-top: 3px; }
.linkrow .linkbtn { margin-left: 0; margin-top: 0; }
.chip--action + .chip--action { margin-left: 0; }

/* ------------------------------------------------------ Schnellerfassung */

.quickinput {
  width: 100%;
  font-family: var(--mono);
  font-size: 17px;              /* gross genug, dass iOS nicht hineinzoomt */
  letter-spacing: .04em;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 12px;
  appearance: none;
}

.quickinput:focus { outline: none; box-shadow: 0 0 0 3px rgba(52,87,213,.16); }

.quickhelp { margin: 7px 0 12px; font-size: 11px; line-height: 1.6; color: var(--ink-soft); }

.quickhelp code {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--desk-deep);
  border-radius: 3px;
  padding: 1px 4px;
}

/* Der Verlauf ist die Rueckmeldung: Man tippt mit Blick auf den Stapel und
   prueft nur gelegentlich, ob das Richtige angekommen ist. */
.quicklog {
  max-height: 42dvh;
  overflow-y: auto;
  border-top: 1px solid var(--desk-deep);
  padding-top: 8px;
}

.logline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 2px;
  font-size: 13px;
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.logline__num {
  flex: none;
  min-width: 42px;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--ink-soft);
}

.logline__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.logline__qty {
  flex: none;
  font-family: var(--mono);
  font-weight: 700;
  color: #2F8F5B;
  font-variant-numeric: tabular-nums;
}

.logline__qty.is-down { color: #B4483C; }
.logline--problem, .logline--problem .logline__num { color: #B4483C; }

/* Stapelmodus: sichtbar machen, dass Tippen jetzt hochzaehlt */
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.page.is-stacking .pocket { box-shadow: inset 0 1px 0 var(--pocket-edge), inset 0 0 0 1px rgba(52,87,213,.45); }

/* ------------------------------------------------------ Rueckfrage */

.choices { display: grid; gap: 8px; margin-top: 4px; }

.bigbtn--quiet { background: var(--desk-deep); color: var(--ink); }
.bigbtn--warn { background: #B4483C; }
.bigbtn--plain { background: transparent; color: var(--ink-soft); font-weight: 500; }

/* Der Rueckgaengig-Knopf im Hinweis - die Sicherung fuer den Normalfall */
.toast { display: flex; align-items: center; gap: 12px; }
.toast[hidden] { display: none; }

.toast__undo {
  border: 0;
  background: transparent;
  color: #8FB4FF;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

/* Ersatz fuer die Tasten, die auf der Zifferntastatur des iPhones fehlen */
.quickkeys {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.6fr;
  gap: 6px;
  margin-top: 8px;
}

.keybtn {
  padding: 12px 4px;
  border: 1px solid var(--desk-deep);
  border-radius: 8px;
  background: #fff;
  font-family: var(--mono);
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.keybtn:active { background: var(--desk-deep); }

.keybtn--back { color: var(--ink-soft); }

.keybtn--go {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
}

/* ---------------------------------------------------------- Serien */

/* Der Serien-Ruecken zeigt statt eines Logos die Zahl der Alben darin -
   eine Serie hat kein eigenes Bild, ein erfundenes waere Beiwerk. */
.album--serie .album__cover {
  flex-direction: column;
  gap: 1px;
}

.album__count {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  color: var(--paper);
}

.album__countlabel {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7E8899;
}

.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 10px;
  max-width: 760px;
  font-family: var(--mono);
  font-size: 11px;
  color: #7E8899;
}

.crumb a { color: var(--accent-soft); text-decoration: none; }
.crumb a::after { content: " ›"; color: #58627240; }
.crumb span { color: #AEB7C4; }

/* ------------------------------------------------------- Bewegungen */

.section { margin: 18px auto 0; max-width: 760px; }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.section__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7E8899;
}

.section__more {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-soft);
  text-decoration: none;
}

.section__note {
  margin: 8px 2px 0;
  font-family: var(--mono);
  font-size: 11px;
  color: #7E8899;
  font-variant-numeric: tabular-nums;
}

.mover { text-decoration: none; }

.mover__delta {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  color: #6FCF97;
  font-variant-numeric: tabular-nums;
}

.mover__delta.is-down { color: #E2857A; }

.mover__sub {
  display: block;
  margin-top: 1px;
  font-family: var(--mono);
  font-size: 9px;
  color: #7E8899;
  font-variant-numeric: tabular-nums;
}

.moverbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 auto 12px;
  max-width: 760px;
}

.moverbar .seg { background: rgba(255,255,255,.07); }
.moverbar .seg__btn { color: #96A1B0; }
.moverbar .seg__btn.is-active { background: var(--accent); color: #fff; }

.section__empty {
  margin: 0;
  padding: 14px;
  background: var(--pocket);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #8B94A3;
  text-align: center;
}

/* --------------------------------------------------------- Zustand */

.gradepick {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--desk-deep);
  border: 0;
  border-radius: var(--radius);
  padding: 6px 22px 6px 10px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: right 9px center, right 4px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.option {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 4px 2px 12px;
}

.option input { width: 20px; height: 20px; margin-top: 2px; flex: none; }

.option__title { display: block; font-weight: 600; font-size: 15px; }

.option__note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Aufschluesselung in der Detailansicht */
.gradelist {
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--desk-deep);
}

.gradeline {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
}

.gradeline__qty { font-weight: 700; color: var(--ink); }

/* -------------------------------------------------- Wertvollste Karten */

.top__rank {
  flex: none;
  width: 22px;
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #6B7585;
  font-variant-numeric: tabular-nums;
}

.top { text-decoration: none; }

.top__value {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ Import und Export */

.rule { border: 0; border-top: 1px solid var(--desk-deep); margin: 16px 0 14px; }

.bigbtn[href], label.bigbtn {
  display: block;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.importbox {
  margin-top: 12px;
  padding: 11px;
  background: #fff;
  border: 1px solid var(--desk-deep);
  border-radius: 8px;
  font-size: 13px;
}

.importbox__head { font-weight: 600; margin: 0 0 6px; }

.importbox__note {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.importbox__problems {
  max-height: 22dvh;
  overflow-y: auto;
  margin: 8px 0 0;
  padding: 8px;
  background: #FBF3F2;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: #8C3A30;
}

.importbox__problems div { padding: 1px 0; }

/* ------------------------------------------------ Sortieren und filtern */

.fieldlabel {
  margin: 14px 0 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.fieldlabel:first-of-type { margin-top: 6px; }

.raritylist { display: flex; flex-wrap: wrap; gap: 6px; }

.raritychip {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--desk-deep);
  border-radius: 99px;
  padding: 5px 11px;
  cursor: pointer;
}

.raritychip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Zeigt an, dass die Ansicht gerade nicht die Standardreihenfolge hat */
.chip.is-tuned {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ------------------------------------------------------------ Teilen */

.sharelist { display: grid; gap: 6px; }

.shareitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--desk-deep);
  border-radius: 8px;
  font-size: 13px;
}

.shareitem__body { flex: 1; min-width: 0; }

.shareitem__name { display: block; font-weight: 600; }

.shareitem__meta {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shareitem__btn {
  flex: none;
  border: 1px solid var(--desk-deep);
  border-radius: 6px;
  background: var(--paper);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 10px;
  cursor: pointer;
}

.shareitem__btn--danger { color: #B4483C; border-color: #E4C4C0; }

.sharelink {
  display: block;
  margin: 8px 0;
  padding: 9px;
  background: var(--desk-deep);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
  word-break: break-all;
  color: var(--ink);
}

/* Fußzeile der öffentlichen Seite */
.sharefoot {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 16px calc(28px + env(safe-area-inset-bottom));
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
}

.sharefoot p { margin: 0 0 8px; }
.sharefoot__note { font-size: 11px; line-height: 1.6; color: #8B94A3; }

/* --------------------------------------------------------- Anmeldung */

.login {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--vinyl);
  overflow-y: auto;
}

.login__box {
  width: 100%;
  max-width: 340px;
  background: var(--paper);
  border-radius: 12px;
  padding: 22px;
}

.login__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -.02em;
  margin: 0 0 4px;
}

.login__note { margin: 0 0 16px; font-size: 13px; color: var(--ink-soft); }

.login__label {
  display: block;
  margin: 10px 0 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.login__input {
  width: 100%;
  font-family: var(--body);
  font-size: 16px;             /* 16px verhindert das Hineinzoomen auf iOS */
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--desk-deep);
  border-radius: 8px;
  padding: 11px;
  margin-bottom: 2px;
  appearance: none;
}

.login__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(52,87,213,.14);
}

.login__error {
  margin: 12px 0 0;
  padding: 9px 11px;
  background: #FBF3F2;
  border-radius: 8px;
  font-size: 13px;
  color: #8C3A30;
}

.login__box .bigbtn { margin-top: 14px; }

.login__switch { margin: 14px auto 0; }

/* Das hidden-Attribut muss die Anzeigeart oben schlagen. Ohne diese Regeln
   bleibt die Anmeldemaske nach erfolgreicher Anmeldung stehen - es sieht
   dann so aus, als wuerde der Knopf gar nichts tun. */
.login[hidden] { display: none; }
.linkbtn[hidden] { display: none; }

/* ================================================== Leiste unten ====== */
/* Hauptnavigation gehoert auf dem Telefon nach unten: dort kommt der
   Daumen hin, und beide Plattformen fuehren es so. Ein Schubladenmenue
   oben links versteckt alles gleich stark und liegt am schlechtesten Ort. */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  background: rgba(18, 22, 29, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--pocket-edge);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar[hidden] { display: none; }

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px 7px;
  color: #7E8899;
  text-decoration: none;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}

.tab svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab.is-active { color: var(--accent-soft); }
.tab.is-active svg { stroke-width: 2.1; }

/* Platz, damit die Leiste nichts verdeckt */
.page { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }

/* ------------------------------------------------ Erfassungsknopf ---- */
/* Die haeufigste Handlung im Album bekommt einen eigenen Platz, statt
   sich zwischen Ansichtsschaltern zu verstecken. */

.fab {
  position: fixed;
  right: 16px;
  bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 35;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 4px 14px rgba(12, 15, 20, .45);
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}

.fab[hidden] { display: none; }

.fab svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.fab:active { transform: scale(.94); }

/* ------------------------------------------------------- Mehr-Seite -- */

.menu { display: grid; gap: 6px; margin: 0 auto; max-width: 760px; }

.menuitem {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 14px;
  background: var(--pocket);
  border: 0;
  border-radius: 8px;
  color: var(--paper);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--pocket-edge);
  -webkit-tap-highlight-color: transparent;
}

.menuitem__note {
  display: block;
  margin-top: 2px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 400;
  color: #8B94A3;
}

.menuitem--danger { color: #E2857A; }

.menugroup {
  margin: 18px auto 6px;
  max-width: 760px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7E8899;
}

.menugroup:first-child { margin-top: 0; }

/* ----------------------------------------------- Unterseiten-Wechsel - */

.subnav {
  display: flex;
  gap: 6px;
  margin: 0 auto 12px;
  max-width: 760px;
}

.subnav a {
  flex: 1;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: #96A1B0;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.subnav a.is-active { background: var(--accent); color: #fff; }

/* ============================================ Fenster mit Tastatur ==== */
/* Auf dem iPhone richtet sich ein fest positioniertes Element am
   Layout-Fenster aus, nicht am sichtbaren. Geht die Tastatur auf, bleibt ein
   unten verankertes Fenster dahinter kleben. Fenster mit Eingabefeldern
   werden deshalb oben verankert - dort kommt die Tastatur nicht hin. */

.sheet--top { align-items: flex-start; }

/* Um --vv-oben nach unten geschoben: Scrollt iOS die Seite fuer die
   Tastatur, wandert ein fest positioniertes Fenster sonst oben aus dem
   Bild. */
.sheet--top { padding-top: var(--vv-oben, 0px); }

.sheet--top .sheet__panel {
  border-radius: 0 0 14px 14px;
  padding-top: calc(18px + env(safe-area-inset-top));
  /* --sichtbar wird aus dem tatsaechlich sichtbaren Fenster gesetzt, sobald
     die Tastatur offen ist. Ohne Unterstuetzung greift der Ersatzwert. */
  max-height: var(--sichtbar, 92dvh);
  animation: sinken .22s cubic-bezier(.2,.8,.3,1);
}

@keyframes sinken { from { transform: translateY(-14px); opacity: 0; } }

.sheet--top .sheet__close { top: calc(8px + env(safe-area-inset-top)); }

/* Hinweis auf Buchungen, die noch auf Verbindung warten. Er steht ueber dem
   Inhalt, damit man ihn nicht uebersieht - wer offline erfasst, muss wissen,
   dass noch nichts beim Server ist. */
.pending {
  position: sticky;
  top: 0;
  z-index: 25;
  margin: 0;
  padding: 8px 14px;
  background: var(--amber);
  color: #201603;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.pending[hidden] { display: none; }

/* --------------------------------------------------------- Kaufliste */
/* Die Meilensteine sind der Grund fuer diese Seite: Sie zeigen, wo der
   Preis springt. Deshalb stehen sie ueber der Liste, nicht darunter. */

.milestones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 0 auto 12px;
  max-width: 760px;
}

.milestone {
  background: var(--pocket);
  border-radius: 6px;
  padding: 9px 11px;
  box-shadow: inset 0 1px 0 var(--pocket-edge);
}

.milestone__share {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: #7E8899;
}

.milestone__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
}

.milestone__cards { font-family: var(--body); font-size: 12px; color: #AEB7C4; }

.milestone__cost {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.milestone__note {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 9px;
  color: #616B7A;
}

@media (min-width: 620px) {
  .milestones { grid-template-columns: repeat(4, 1fr); }
}

/* -------------------------------------------------------- Kartendaten */
/* Ruhig gehalten: Die Detailansicht bleibt eine Buchungsmaske mit
   Kartendaten, nicht eine Kartenseite mit Buchungsmöglichkeit. */

.cardfacts { margin: 10px 0 4px; }
.cardfacts[hidden] { display: none; }

.facts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }

.typechip {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: var(--desk-deep);
  border-radius: 99px;
  padding: 3px 9px;
}

.fact {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
}

.fact b { color: var(--ink); font-weight: 700; }

.attacks {
  margin-top: 8px;
  border-top: 1px solid var(--desk-deep);
}

.attack {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--desk-deep);
}

.attack__cost { flex: none; display: flex; gap: 2px; }

.energy {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ink-soft);
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
}

.attack__name {
  flex: 1;
  min-width: 0;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.attack__dmg {
  flex: none;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.cardfoot {
  margin: 7px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
}

/* ------------------------------------------------------- Suchfilter --- */

.facetbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 auto 12px;
  max-width: 760px;
}

.facet {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  color: #96A1B0;
  background: rgba(255,255,255,.06);
  border: 0;
  border-radius: 99px;
  padding: 6px 11px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.facet[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 600; }

.facetgroup {
  width: 100%;
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6B7585;
}

/* Filterknopf in der Suchzeile. Die Filter gehoeren in die Suchmaske, nicht
   ueber die Ergebnisse - und sie muessen setzbar sein, bevor man tippt. */
.filterbtn {
  flex: none;
  border: 1px solid var(--pocket-edge);
  border-radius: 8px;
  background: transparent;
  color: #96A1B0;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 12px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.filterbtn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.searchrow { display: flex; gap: 6px; align-items: center; }
.searchrow[hidden] { display: none; }
.searchrow .search { flex: 1; min-width: 0; }

/* ------------------------------------------------------ Wunschliste --- */

.wishbtn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--desk-deep);
  border-radius: 8px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wishbtn[aria-pressed="true"] {
  background: #FFF6E2;
  border-color: var(--amber);
  color: #6A4B05;
}

.wishbtn__star { font-size: 16px; line-height: 1; }

.wishrow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.limit {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
}

.limit--unter { color: #2F7A3E; font-weight: 700; }
.limit--drueber { color: #A2564B; }

.wishnote {
  display: block;
  margin-top: 2px;
  font-family: var(--body);
  font-size: 12px;
  font-style: italic;
  color: #8B94A3;
}

.limitfeld {
  width: 74px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--desk-deep);
  border-radius: 6px;
  padding: 5px 7px;
  text-align: right;
}

/* -------------------------------------------------- Turnierlegalität */

.legalmark {
  display: inline-block;
  margin: 8px 0 0;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--desk-deep);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.legalmark[hidden] { display: none; }
.legalmark--drin { background: #E4F3E6; color: #2F7A3E; }
.legalmark--raus { background: #F7E7E4; color: #A2564B; }

/* Kartenname im Fach, wenn kein Bild vorhanden ist. Bei alten Sets liefert
   TCGdex oft keine Bilder - ohne diesen Rückfall wäre so ein Album eine Wand
   aus nummerierten Leerfeldern. */
.pocket__name {
  position: absolute;
  inset: 6px 4px 16px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--body);
  font-size: 10px;
  line-height: 1.25;
  font-weight: 600;
  text-align: center;
  color: #8B94A3;
  word-break: break-word;
}

.pocket.is-owned .pocket__name { color: var(--paper); }

/* ------------------------------------------------- Zusammenfassung --- */
/* Steht über den Zahlenseiten und beantwortet die Frage, wegen der man
   hinsieht. Jeder Satz führt zu der Liste, die ihn belegt - eine Behauptung
   ohne Nachweis ist wenig wert. */

.digest {
  display: grid;
  gap: 1px;
  margin: 0 auto 14px;
  max-width: 760px;
  background: var(--pocket-edge);
  border-radius: 8px;
  overflow: hidden;
}

.digest__satz {
  display: block;
  padding: 11px 13px;
  background: var(--pocket);
  color: var(--paper);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.digest__satz:active { background: #232A35; }

/* --------------------------------------------------------- Kaufpreise */

.buyrow { display: flex; gap: 6px; align-items: center; margin-top: 10px; }
.buyrow .limitfeld { flex: 1; text-align: left; }

.buylist { display: grid; gap: 3px; margin-top: 6px; }

.buyitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  background: var(--desk-deep);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
}

/* -------------------------------------------------------- Statistik */
/* Balken statt Zahlenkolonne: Der Groessenunterschied ist die Aussage. */

.statblock { margin: 0 auto 18px; max-width: 760px; }

.statblock__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  color: var(--paper);
}

.statblock__fuss {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  color: #7E8899;
}

.bars { display: grid; gap: 4px; }

.bar {
  display: grid;
  grid-template-columns: minmax(70px, 30%) 1fr auto;
  align-items: center;
  gap: 8px;
}

.bar__name {
  font-family: var(--body);
  font-size: 12px;
  color: #AEB7C4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar__track {
  height: 16px;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
}

.bar__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  border-radius: 3px;
}

.bar__wert {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================== Nichts ragt hinaus ==================== */
/* Ein Flex-Element schrumpft nicht unter seine Inhaltsbreite, solange
   min-width fehlt - das ist der Vorgabewert "auto". Bei langen Betraegen
   oder fuenf Wechslern ragt die Zeile dann rechts aus dem Bild.
   Deshalb hier gesammelt fuer alle Stellen, an denen Text in einem
   Flex-Element steht. */

.shareitem__body,
.milestone__body,
.statblock__kopf span,
.bar__name,
.searchrow .search,
.wishrow {
  min-width: 0;
}

/* Die rechte Spalte darf wachsen, aber nicht unbegrenzt. Zwei Zeilen
   Betrag sind laenger als der Platz, den sie verdienen. */
.hit__side {
  max-width: 42%;
  overflow-wrap: anywhere;
}

/* Der Wechsler mit fuenf Eintraegen: schrumpfen erlauben und notfalls
   umbrechen, statt hinauszuragen. */
.subnav { flex-wrap: wrap; }

.subnav a {
  min-width: 0;
  flex: 1 1 28%;
  padding: 8px 4px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Auch die Filterleisten und Knopfreihen duerfen umbrechen */
.moverbar, .choices, .buyrow { flex-wrap: wrap; }

.seg { min-width: 0; max-width: 100%; }
.seg__btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Lange Kartennamen brechen um, statt die Zeile zu dehnen */
.hit__name, .hit__meta, .shareitem__name {
  overflow-wrap: anywhere;
}

/* Nichts im Seiteninhalt darf breiter sein als die Seite */
.page, .page * { max-width: 100%; }
.page img { height: auto; }

/* Rasterzellen haben dasselbe Problem wie Flex-Elemente: Ohne min-width
   schrumpfen sie nicht unter ihre Inhaltsbreite. Aufgefallen an der
   Kaufliste ohne Filter - dort werden die Meilensteinbetraege sechsstellig
   und sprengen das Raster. */
.milestone,
.milestones > *,
.quickkeys > *,
.bar > *,
.menu > *,
.shelf > *,
.grid > * {
  min-width: 0;
}

/* Der Betrag selbst darf umbrechen statt zu schieben */
.milestone__cost,
.milestone__body {
  overflow-wrap: anywhere;
}

/* Bei schmalen Schirmen lieber untereinander als hinausragend */
@media (max-width: 400px) {
  .milestones { grid-template-columns: 1fr; }
}

/* Ein Raster ohne grid-template-columns bekommt eine Spalte der Breite
   "auto" - und die ist so breit wie ihr breitester Inhalt. Bei langen
   Set-Namen wuchs die Spalte, statt den Text zu kuerzen, und die ganze
   Liste ragte hinaus.
   Das betrifft AUCH einspaltige Raster: Genau diese hatte ich zuerst aus
   der Pruefung ausgeschlossen, weil ich sie fuer unproblematisch hielt. */
.hits,
.menu,
.bars,
.digest,
.buylist,
.sharelist,
.choices,
.steppers,
.shelf {
  grid-template-columns: minmax(0, 1fr);
}

/* ====================== Bedienung auf dem Telefon ==================== */

/* Safari zoomt beim Antippen eines Eingabefeldes genau dann, wenn dessen
   Schrift kleiner als 16px ist. Der Zoom laesst sich nicht abschalten -
   Safari ignoriert maximum-scale seit Jahren, damit Seiten das Vergroessern
   nicht sperren koennen. Ab 16px entsteht er gar nicht erst.
   Das ist die Ursache, nicht ein Symptom. */
.limitfeld,
.gradepick,
.listbox,
.search,
input,
textarea,
select {
  font-size: 16px;
}

/* Die Detailansicht wird durch langes Gedrückthalten geoeffnet. iOS beginnt
   dabei eine Textmarkierung an der Stelle, wo der Finger liegt - und das ist
   nach dem Oeffnen mitten in der Detailansicht.
   Deshalb dort nichts markierbar. Ausgenommen bleibt, was man kopieren
   koennen muss. */
.sheet,
.pocket,
.grid,
.tabbar,
.fab {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Fehlliste und Tauschstapel sind zum Kopieren da - dort muss Markieren
   moeglich bleiben. Eingabefelder ohnehin. */
.sheet input,
.sheet textarea,
.sheet .listbox,
.sharelink {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Die feste Breite von 74px stammt aus der Zeit mit 13px-Schrift. Bei 16px
   passt der Platzhaltertext nicht mehr hinein - deshalb eine Mindestbreite,
   die mitwaechst, statt einer festen. */
.limitfeld {
  width: auto;
  min-width: 0;
  max-width: 110px;
  flex: 0 1 92px;
}

/* In der Kaufzeile darf es die freie Breite nehmen */
.buyrow .limitfeld { flex: 1 1 92px; max-width: none; }

/* Fuer aeltere Sets fuehrt TCGdex oft kein deutsches Kartenbild. Dann steht
   dort die englische Fassung - dieselbe Illustration, anderer Text. Das zu
   zeigen, ohne es zu sagen, waere irrefuehrend. */
.imglang {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
}

.imglang[hidden] { display: none; }

/* ------------------------------------------------- Einkaufszettel --- */
/* Der Haken steht neben dem Verweis, nicht darin: Ein Knopf innerhalb eines
   <a> ist ungueltiges HTML, und ein Antippen traefe beides. */

/* Eine Zeile aus anklickbarer Karte und danebenliegenden Bedienelementen.
   Ineinander ginge nicht: Ein Knopf oder Eingabefeld in einem Knopf ist
   ungueltiges HTML, und ein Antippen traefe beides.
   .kaufrow ist dasselbe mit dem Haken davor. */
.kaufrow,
.listrow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.kaufrow > .hit,
.listrow > .hit { flex: 1; min-width: 0; }

.listrow__seite {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Die Kaufzeile ist jetzt ein Knopf, kein Verweis - der Knopf bringt eigene
   Vorgabewerte mit, die hier nicht gewollt sind. */
.kaufrow > button.hit,
.listrow > button.hit {
  font: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

.kaufcheck {
  flex: none;
  width: 34px;
  height: 34px;
  border: 2px solid var(--pocket-edge);
  border-radius: 8px;
  background: var(--pocket);
  color: var(--amber);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kaufcheck[aria-pressed="true"] {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--desk-deep);
}

/* Angehaktes bleibt lesbar, tritt aber zurueck - man hat es ja schon */
.kaufrow.is-checked > .hit { opacity: .55; }

.korb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 auto 12px;
  max-width: 760px;
  min-width: 0;
  padding: 9px 11px;
  background: var(--pocket);
  border: 1px solid var(--amber);
  border-radius: 8px;
}

.korb__zahl {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--paper);
  min-width: 0;
  overflow-wrap: anywhere;
}

.korb__zahl b { color: var(--amber); }

.korb__knoepfe { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

/* Ein Schalter, der wie ein Verweis aussieht - fuer Hinweise im Fliesstext,
   wo ein Knopf die Zeile sprengen wuerde. */
.linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--amber);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ------------------------------------------------ Kartenscanner ----- */
/* Die Voransicht wird GENAU in #scanview gelegt, nicht hinter die
   Oberflaeche. Der Weg dahinter verlangt, dass die ganze Seite bis hinunter
   zum nativen Hintergrund der Webansicht durchsichtig ist - daran kommt man
   aus dem Stylesheet nicht heran, und die Kamera lief unsichtbar.

   So braucht es gar keine Durchsichtigkeit. */

/* Fest verankert, nicht mitscrollend.
   Die Kameraansicht ist ein NATIVES Element an festen
   Bildschirmkoordinaten - sie kann gar nicht mitscrollen. Scrollte der
   Rahmen darunter mit, liefen beide auseinander, und es fühlte sich kaputt
   an. Also bleibt auch der Rahmen stehen. */
.scanview {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  z-index: 5;
  margin: 0 auto;
  max-width: 760px;
  /* Höher als nötig zum Zielen: Der Rahmen bestimmt auch, wie viel man
     von der Karte sieht - und damit, wie sicher man die Nummer trifft. */
  height: 240px;
  pointer-events: none;   /* der Bereich ist zum Zielen, nicht zum Tippen */
  background: #000;
  border: 2px solid var(--amber);
  border-radius: 10px;
  overflow: hidden;
}



.scanframe__hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--amber);
  text-align: center;
  padding: 4px 10px;
  background: rgba(11, 15, 20, .75);
  border-radius: 4px;
}

/* Während des Scannens: Kopfbereich weg, Inhalt unter die feste
   Kameraansicht. Die Höhe muss zu .scanview passen - stimmt sie nicht,
   verdeckt die Kamera die ersten Meldungen. */
body.scanning .topbar { display: none; }

body.scanning .page {
  padding-top: calc(240px + 20px + env(safe-area-inset-top));
}

/* Der Hinweis sitzt direkt unter der Kameraansicht */
body.scanning .scanframe__hint {
  display: block;
  margin: 0 auto 10px;
  max-width: 760px;
  text-align: center;
}

/* ================= Kopfbereich im Album: kompakt ==================== */
/* Der Kern des Albums sind die Karten, nicht die Bedienung darueber.
   Vorher nahm der Kopf mit Titel, Wert, Fortschritt und zwei Knopfreihen
   den halben Bildschirm ein. */

/* Auswahllisten statt Knopfreihen. Zwei Reihen zu je drei Knoepfen brauchen
   zwei Zeilen; zwei Auswahllisten passen in eine. */
.pick {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 40%;
  padding: 6px 8px;
  border: 1px solid var(--pocket-edge);
  border-radius: 6px;
  background: var(--pocket);
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;   /* darunter zoomt Safari beim Antippen */
}

/* Der Mehr-Knopf gehoert in dieselbe Zeile, nicht auf eine eigene */
.controls { margin-top: 8px; flex-wrap: nowrap; align-items: center; }
.controls .chip--action { flex: 0 0 auto; }

/* Kleinerer Kopftext - der Albumname muss lesbar sein, nicht praechtig */
#albumBar .topbar__title { font-size: 15px; }
#albumBar .topbar__eyebrow { font-size: 8px; }
#albumBar .topbar__row { padding-bottom: 2px; }
#albumBar .progress { margin-top: 6px; }
#albumBar .worth__value { font-size: 15px; }

/* Ist eine Sortierung eingestellt, sieht man es am Mehr-Knopf - der eigene
   Sortierknopf ist entfallen, und ohne Hinweis wundert man sich ueber die
   Reihenfolge. */
.chip--action.is-tuned {
  border-color: var(--amber);
  color: var(--amber);
}

/* Das Ausfuehrungskuerzel im Fach.
   Bei "Alle" liegen Normal und Reverse derselben Karte nebeneinander und
   zeigen dasselbe Bild - ohne Kuerzel tippt man auf das falsche Fach. */
.pocket__var {
  position: absolute;
  top: 3px;
  left: 4px;
  z-index: 2;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(11, 15, 20, .85);
  /* Feste, helle Farbe. var(--paper-dim) gibt es nicht - die Markierung
     erbte dadurch das dunkle Grau der Kartennummer und war auf dunklem
     Grund praktisch unsichtbar. */
  color: #E4E8EE;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Reverse und Holo bekommen eine eigene Farbe - so erkennt man sie auch
   aus dem Augenwinkel, ohne das Kuerzel zu lesen. */
.pocket.is-reverse .pocket__var { color: var(--amber); }
.pocket.is-holo .pocket__var { color: #7FD4FF; }