/* ======================================================================= Stempelkreise — EIN Design für Kundenkarte und Manager-/Inhaber-Scan. Feste 5er-Reihen (5 + 5 bei zehn Stempeln), große Kreise. Design „Grüner Ring" (vom Inhaber gewählt, nach Vorlage): dunkle Füllung mit grünem Umriss-Ring, kein Haken — stattdessen drei Zeilen in Weiß: Mitarbeitername, Tag/Monat (01/09), Jahr. Leere Kreise sind sanfte Mulden, die Lösch-Markierung ist Rot. Dazu die Bestätigungs-Animationen (Pop mit Ring-Welle, Halo, Burst) im Stil der NexoMilo-Umsatzerfassung. ======================================================================= */ .dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 4px 2px 2px; } .dot { width: 100%; aspect-ratio: 1; border-radius: 50%; position: relative; /* Leere Kreise folgen der Umgebung: dunkle Team-App als Vorgabe, die Creme-Kundenkarte setzt --dot-leer-* in card.css hell. */ border: 2px solid var(--dot-leer-rand, rgba(255, 255, 255, 0.10)); background: var(--dot-leer-bg, #1a1a20); box-shadow: var(--dot-leer-schatten, inset 0 3px 7px rgba(0, 0, 0, 0.32)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; overflow: hidden; transition: background 0.3s, border-color 0.3s; } .dot.voll { /* Dunkle Füllung + grüner Umriss-Ring (Vorlage des Inhabers). Die Creme-Kundenkarte stellt über --dot-voll-* auf Weiß/Schwarz um. */ background: var(--dot-voll-bg, #182420); border: 3px solid var(--dot-voll-ring, #4ad489); box-shadow: var(--dot-voll-schatten, 0 4px 12px rgba(74, 212, 137, 0.16)); } /* Zum Löschen markiert (erster Tipp): Rot — der zweite Tipp fragt nach. */ .dot.voll.loeschen { background: #2a1615; border-color: #ff4d45; box-shadow: 0 4px 12px rgba(255, 77, 69, 0.2); } .dot.voll span { color: var(--dot-voll-schrift, #fff); line-height: 1.16; /* weiche Kante — auf der dunklen Füllung reicht das für Lesbarkeit */ text-shadow: var(--dot-voll-schrift-schatten, 0 1px 2px rgba(0, 0, 0, 0.55)); } .dot .dname { font-size: 12px; font-weight: bold; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dot .ddm { font-size: 13px; font-weight: bold; font-variant-numeric: tabular-nums; } .dot .djahr { font-size: 10px; font-weight: bold; opacity: 0.94; font-variant-numeric: tabular-nums; } /* Stand darunter: "2 / 10" in Weiß. */ .standzeile { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 12px; } .stand { font-size: 34px; font-weight: bold; color: var(--stand-farbe, #fff); font-variant-numeric: tabular-nums; } /* ---------- Animationen ---------- */ /* Der frisch vergebene Stempel springt ins Bild — mit grüner Ring-Welle, die vom Kreis nach außen läuft. */ .dot.pop { animation: stempel-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes stempel-pop { 0% { transform: scale(0.3); box-shadow: 0 0 0 0 rgba(74, 212, 137, 0.55); } 60% { transform: scale(1.12); } 100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(74, 212, 137, 0); } } /* Grüner Bestätigungs-Halo, läuft einmal über die Karte (NexoMilo-Stil). */ .stempel-halo { position: absolute; width: 150px; height: 150px; margin: -75px 0 0 -75px; left: 50%; top: 50%; border: 3px solid #35d07f; border-radius: 50%; pointer-events: none; animation: stempel-halo 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes stempel-halo { from { transform: scale(0.35); opacity: 0.75; } to { transform: scale(1.9); opacity: 0; } } /* Burst-Ebene (Ring + abhebender Text) — wie die NexoMilo-Umsatzbuchung. Liegt auf , damit ein Neuzeichnen der Ansicht sie nicht abreißt. */ .confirm-burst { position: absolute; pointer-events: none; z-index: 500; } .cb-ring { position: absolute; inset: 0; border: 2px solid #35d07f; opacity: 0; will-change: transform, opacity; } .cb-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; font-weight: bold; color: #fff; will-change: transform, opacity, filter; } @media (prefers-reduced-motion: reduce) { .dot.pop, .stempel-halo { animation: none; } .stempel-halo { display: none; } }