/* ============================================================================
 * tc-wettschein — Skarns Deckel mit Stempel (17.09.2026, #690)
 * ----------------------------------------------------------------------------
 * Konzept: https://claude.ai/artifact/VbjMPjbQPDSxpmcEh9Y151 (dritte Fassung)
 * Demonstriert in: library-community.html, Kapitel „Skarns Haus"
 * Tokens: css/tokens.css Abschnitt K2 (Papier, Tinte, Stempel)
 * Schrift: Kalam kommt über css/components/kreide.css — die Seite lädt beide.
 *
 * Der Schein ist Papier auf dunklem Tresen: Er soll aus dem Augenwinkel als
 * Gegenstand erkennbar sein, nicht als weitere Karte. Der Stempel sagt, wie
 * es ausgegangen ist, ohne dass man eine Zahl lesen muss.
 *
 * AUFBAU
 *   <div class="tc-wettschein">
 *     <div class="tc-wettschein__kopf">
 *       <span class="tc-wettschein__titel">Dein Schein</span>
 *       <span class="tc-wettschein__art">Deckel · 2 Tipps</span>
 *     </div>
 *     <ul class="tc-wettschein__tipps">
 *       <li class="tc-wettschein__tipp">
 *         <span class="tc-wettschein__frage">AoS · Malkav – Timmay
 *           <b class="tc-wettschein__wahl">Timmay gewinnt</b></span>
 *         <span class="tc-wettschein__quote">1,7</span>
 *       </li>
 *     </ul>
 *     <div class="tc-wettschein__summe">
 *       <span>Einsatz <b>20 SG</b></span> <span>Quote <b>2,38</b></span>
 *       <span>möglich <b>47 SG</b></span>
 *     </div>
 *     <div class="tc-wettschein__aktion"><button class="tc-button …">…</button></div>
 *     <span class="tc-wettschein__stempel tc-wettschein__stempel--gut">Ausgezahlt</span>
 *   </div>
 *
 * VARIANTEN
 *   --leiste     eine Zeile über der Navigation am Handy (Tipps · Einsatz · Knopf)
 *   __stempel--gut | --weg | --erstattet
 *   .is-neu am Stempel  wird aufgedrückt (Animation)
 *
 * ⚠️ DIE STEMPELFARBEN SIND NICHT --tc-success/--tc-danger. Die sind für
 * dunklen Grund gebaut; hellgrün auf Papier hätte 1,6 : 1. Die Stempeltinten
 * stehen deshalb eigens in K2 und sind gegen --tc-papier gerechnet.
 * ========================================================================== */

.tc-wettschein {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2, 8px);
  padding: var(--tc-space-3, 12px) var(--tc-space-4, 16px);
  overflow: hidden;

  color: var(--tc-tinte);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 40%),
    var(--tc-papier);
  border: 1px solid var(--tc-papier-rand);
  border-radius: var(--tc-radius-sm, 4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm, 0.82rem);
}

.tc-wettschein__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px var(--tc-space-3, 12px);
  padding-bottom: var(--tc-space-2, 8px);
  border-bottom: 1px dashed var(--tc-papier-rand);
}

.tc-wettschein__titel {
  font-family: var(--tc-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--tc-tinte);
}

.tc-wettschein__art {
  font-size: var(--tc-text-xs, 0.72rem);
  color: var(--tc-tinte-leise);
}

.tc-wettschein__tipps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2, 8px);
}

.tc-wettschein__tipp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--tc-space-3, 12px);
  align-items: center;
}

.tc-wettschein__frage {
  min-width: 0;
  color: var(--tc-tinte-leise);
  line-height: 1.35;
}

.tc-wettschein__wahl {
  display: block;
  font-weight: 700;
  color: var(--tc-tinte);
}

.tc-wettschein__quote {
  font-family: var(--tc-font-kreide);
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tc-tinte);
}

/* Ein geplatzter Tipp auf einem Deckel: durchgestrichen, nicht entfernt —
   man soll sehen, woran es lag. */
.tc-wettschein__tipp.is-daneben .tc-wettschein__wahl,
.tc-wettschein__tipp.is-daneben .tc-wettschein__quote {
  text-decoration: line-through;
  text-decoration-color: var(--tc-stempel-weg);
}

.tc-wettschein__summe {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px var(--tc-space-3, 12px);
  padding-top: var(--tc-space-2, 8px);
  border-top: 1px dashed var(--tc-papier-rand);
  color: var(--tc-tinte-leise);
  font-variant-numeric: tabular-nums;
}
.tc-wettschein__summe b { color: var(--tc-tinte); }

.tc-wettschein__aktion {
  display: flex;
  justify-content: flex-end;
  gap: var(--tc-space-2, 8px);
}

/* ── Der Stempel ───────────────────────────────────────────────────────── */
/* ⚠️ IN EIGENER ZEILE, NICHT ÜBER DEM TEXT. Der erste Entwurf lag absolut
   in der rechten unteren Ecke — wie ein echter Stempel. Im Browser deckte er
   genau die Zeile „ausgezahlt 36 SG" ab, also die Zahl, nach der man sucht
   (Heuristik 8). Jetzt steht er unten rechts für sich, schräg wie gehabt. */
.tc-wettschein__stempel {
  align-self: flex-end;
  margin: var(--tc-space-1, 4px) var(--tc-space-1, 4px) 2px 0;
  padding: 4px 10px;

  font-family: var(--tc-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-tinte-leise);
  border: 3px double currentColor;
  border-radius: var(--tc-radius-sm, 4px);
  transform: rotate(-6deg);
  pointer-events: none;
}
.tc-wettschein__stempel--gut       { color: var(--tc-stempel-gut); }
.tc-wettschein__stempel--weg       { color: var(--tc-stempel-weg); }
.tc-wettschein__stempel--erstattet { color: var(--tc-tinte-leise); }

.tc-wettschein__stempel.is-neu {
  animation: tc-stempel-auf 360ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes tc-stempel-auf {
  0%   { opacity: 0; transform: rotate(-6deg) scale(1.8); }
  70%  { opacity: 1; transform: rotate(-6deg) scale(0.94); }
  100% { opacity: 1; transform: rotate(-6deg) scale(1); }
}

/* ── Ein Stapel Scheine ─────────────────────────────────────────────────
   Die offenen und die abgerechneten Scheine eines Gastes nebeneinander. */
.tc-wettschein-stapel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: var(--tc-space-3, 12px);
  align-items: start;
}

/* ── Variante: Leiste über der Navigation ─────────────────────────────── */
/* Am Handy liegt der Deckel als eine Zeile unten. Die Seite positioniert
   sie (fixed + safe-area, §9), die Komponente sorgt nur dafür, dass alles
   in eine Zeile passt und der Knopf ein Finger-Ziel bleibt. */
.tc-wettschein--leiste {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-2, 8px) var(--tc-space-3, 12px);
  padding: var(--tc-space-2, 8px) var(--tc-space-3, 12px);
}
.tc-wettschein--leiste .tc-wettschein__kopf,
.tc-wettschein--leiste .tc-wettschein__summe {
  padding: 0;
  border: 0;
}
.tc-wettschein--leiste .tc-wettschein__tipps { display: none; }
.tc-wettschein--leiste .tc-wettschein__summe { justify-content: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .tc-wettschein__stempel.is-neu {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    animation-delay: -1ms;
  }
}