/* Lamatics Demo: Stapel -> Ergebnis
   Baut auf styles.css auf (Tokens, Buttons, kbd). Keine Schatten, Tiefe
   ueber Flaechen und Haarlinien, Zinnober nur fuer das Fach "Braucht Sie". */

.st {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ---------- Kopfleiste ---------- */
.st__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.st__title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: auto;
}
.st__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 3px 10px;
}
.st__seg {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--card);
  padding: 3px;
}
.st__segbtn {
  font: inherit;
  font-size: 13.5px;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 16px;
  min-height: 44px;
  cursor: pointer;
}
.st__segbtn.is-on { background: var(--ink); color: var(--paper); }
.st.is-running .st__segbtn { cursor: default; opacity: 0.6; }

/* ---------- Raster ---------- */
.st__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.st__in {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 20px 22px;
  border-right: 1px solid var(--rule);
}
.st__out {
  display: grid;
  gap: 12px;
  padding: 22px 20px;
  align-content: start;
  background: var(--paper);
}

/* ---------- Zaehler ---------- */
.st__inhead { display: grid; gap: 12px; }
.st__count {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-height: 64px;
}
.st__num {
  font-family: var(--font-display);
  font-size: clamp(46px, 6vw, 64px);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.st__num--from { color: var(--muted); }
.st__num--to { color: var(--accent); }
.st__arrow {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 42px);
  color: var(--muted);
}
.st__unit { font-size: 15px; color: var(--ink-soft); }

.st__kanaele {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.st__kanal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
  background: var(--card);
}
.st__kanal b { font-weight: 600; color: var(--ink); }

.st-ico { display: inline-flex; width: 14px; height: 14px; flex: none; color: var(--muted); }
.st-ico svg { width: 100%; height: 100%; }

/* ---------- Stapel ---------- */
.st__stack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.st-c {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 7px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--card);
  transform: rotate(var(--d, 0deg));
  transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.2s ease, background 0.2s ease;
  min-width: 0;
}
.st-c--brief { background: #fffdf8; }
.st-c .st-ico { grid-row: 1 / span 2; }
/* Lange Namen ("Muster Versicherung", "Bestellbestätigung") brechen um
   statt mit "..." abgeschnitten zu werden (Kundenblick 26.10.) */
.st-c__art { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25; min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.st-c__von { font-size: 12px; color: var(--muted); line-height: 1.25; min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

.st.is-dense .st__stack { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px; }
.st.is-dense .st-c { padding: 5px 7px; }
.st.is-dense .st-c__von { display: none; }
.st.is-dense .st-c__art { font-size: 12px; font-weight: 500; }
.st.is-dense .st-c .st-ico { grid-row: auto; width: 12px; height: 12px; }

.st-c.is-read { border-color: var(--accent); }
.st-c.is-done { opacity: 0.28; transform: rotate(0deg) scale(0.97); border-color: var(--rule); }
.st__stack.is-glowing .st-c.is-done { opacity: 0.16; }
.st__stack.is-glowing .st-c.is-glow { opacity: 1; border-color: var(--accent); background: var(--accent-soft); transform: none; }

.st-ghost {
  position: fixed;
  z-index: 60;
  margin: 0;
  pointer-events: none;
  list-style: none;
  border-color: var(--accent) !important;
  transform-origin: center;
}

/* ---------- Start ---------- */
.st__go {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: auto;
  padding-top: 4px;
}
.st__btn { gap: 10px; }
.st__btn:disabled { opacity: 0.7; cursor: default; }
.st.is-done .st__btn { background: var(--card); color: var(--ink); border-color: var(--rule-strong); }
.st.is-done .st__btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.st__clock {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Faecher ---------- */
/* Vor dem Klick: sagt, was hier gleich steht, statt leere Faecher zu zeigen */
.st__hint { margin: 0 0 4px; font-size: 14.5px; color: var(--ink-soft); }
.st.is-running .st__hint, .st.is-done .st__hint { display: none; }

.st-f {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 12px 14px;
}
.st-f--sie { border-color: var(--accent); }
.st-f__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.st-f__name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.st-f--sie .st-f__name { color: var(--accent-ink); }
.st-f__n {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.st-f--sie .st-f__n { color: var(--accent); }
.st-f.is-pulse .st-f__n { animation: st-pop 0.32s ease; }
@keyframes st-pop { 40% { transform: scale(1.22); } }

.st-f__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.st-f__list:not(:empty) { margin-top: 8px; }

.st-r {
  display: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
  outline: none;
  border-radius: 4px;
}
.st-r.is-in { display: grid; animation: st-in 0.3s ease both; }
@keyframes st-in { from { opacity: 0; transform: translateY(-4px); } }
.st-r:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.st-r__txt { display: grid; gap: 1px; min-width: 0; }
.st-r__abt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.st-r__t { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.st-r__s { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.st-r__src { grid-column: 1; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
.st-r__src:empty { display: none; }
.st-r__act {
  grid-column: 2;
  grid-row: 1 / span 2;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 7px 16px;
  min-height: 44px;
  cursor: pointer;
}
.st-r__act:hover:not(:disabled) { background: var(--accent-ink); }
.st-r__act:disabled { cursor: default; opacity: 0.45; }
.st-r.is-ok .st-r__act { opacity: 1; background: none; color: var(--ink-soft); border-color: var(--rule-strong); }
.st-r.is-ok .st-r__act::before { content: "✓ "; color: var(--accent); }
.st-r.is-ok .st-r__t { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--rule-strong); }

.st-f__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-chip {
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px 10px;
  animation: st-in 0.3s ease both;
}
.st-chip b { font-weight: 600; color: var(--ink); margin-left: 2px; }

/* ---------- Ergebnis ---------- */
.st__result:not(:empty) {
  display: grid;
  gap: 10px;
  padding: 18px 20px 20px;
  border-top: 1px solid var(--rule);
}
.st__sum { margin: 0; font-size: 16px; color: var(--ink-soft); }
.st__sum b { color: var(--ink); }
.st__saved { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 14px; color: var(--muted); }
.st__clear {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  color: var(--accent-ink);
  animation: st-in 0.4s ease both;
}

/* ---------- Schmal ---------- */
@media (max-width: 820px) {
  .st__out { scroll-margin-top: 72px; }
  .st__grid { grid-template-columns: 1fr; }
  .st__in { border-right: 0; border-bottom: 1px solid var(--rule); }
  .st__stack { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
@media (max-width: 480px) {
  .st__bar, .st__in, .st__out, .st__result:not(:empty) { padding-left: 14px; padding-right: 14px; }
  .st__seg { width: 100%; }
  .st__segbtn { flex: 1; padding: 6px 8px; font-size: 13px; }
  .st-r { grid-template-columns: 1fr; }
  .st-r__act { grid-column: 1; grid-row: auto; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .st-c, .st-r.is-in, .st-chip, .st__clear { transition: none; animation: none; }
  .st-f.is-pulse .st-f__n { animation: none; }
}

/* Kundenblick Runde 4 (22.10.2026): vor dem Klick keine Nullen und kein
   reservierter Platz. Die Faecher stehen schmal da, mit gedimmtem
   Platzhalter statt Zahl. */
.st-f__n.is-leer {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.75;
}
.st-f--sie .st-f__n.is-leer { color: var(--muted); }
.st:not(.is-running):not(.is-done) .st-f { padding: 9px 14px; }
/* 26.10.2026: Am Handy bleiben die Faecher auch waehrend des Abarbeitens
   kompakt (nur Zaehler), damit Stapel und Faecher zusammen auf den
   Bildschirm passen und man die Karten fliegen sieht. Erst am Ende klappen
   die Listen auf. */
@media (max-width: 820px) {
  .st:not(.is-done) .st__out {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .st:not(.is-done) .st__hint { grid-column: 1 / -1; }
  .st:not(.is-done) .st-f { padding: 8px 12px; }
  .st:not(.is-done) .st-f__head { flex-direction: column; gap: 2px; }
  .st.is-running .st-f__list { display: none; }
  .st-f__n.is-leer { font-size: 11px; letter-spacing: 0; white-space: nowrap; }
}

/* Kundenblick Runde 5 (22.10.2026): Am Desktop steht der Knopf rechts unter
   den Faechern (stapel.js setzt ihn um), der Stapel ist vierspaltig und
   flacher. Beide Spalten enden gleich hoch, alles auf einem Bildschirm. */
@media (min-width: 821px) {
  .st__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .st__in { padding-top: 18px; padding-bottom: 18px; gap: 14px; }
  .st__out { display: flex; flex-direction: column; padding-top: 18px; padding-bottom: 18px; }
  .st__out .st__go { margin-top: auto; padding-top: 8px; }
  .st__stack { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .st-c { padding: 4px 7px; column-gap: 5px; }
  .st-c .st-ico { width: 12px; height: 12px; }
  .st-c__art { font-size: 12.5px; line-height: 1.3; }
  .st-c__von { font-size: 11.5px; line-height: 1.3; }
}
/* Am Handy keine reservierte Hoehe fuer die grosse Zahl */
@media (max-width: 820px) {
  .st__count { min-height: 0; }
}