/* Seiten-Anordnung Heute: nur Layout, Komponenten kommen aus app.css. */

/* ── Mitarbeiter: ruhiger Stempel-Bildschirm ── */
.page-heute-staff { max-width: 440px; margin: 0 auto; }
.stamp { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s4); padding: var(--s4) 0 var(--s5); }
.stamp-hello h1 { font-size: var(--fs-2xl); }
.stamp-hello .sub { color: var(--text-2); font-size: var(--fs-ui); margin-top: var(--s1); }
.stamp-where { min-height: var(--ctl); display: flex; align-items: center; justify-content: center; max-width: 100%; }
.stamp-where .seg { max-width: 100%; }
.stamp-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2);
  width: 184px; height: 184px; margin: var(--s3) 0 var(--s2); border-radius: 50%; border: 0; cursor: pointer;
  font: 600 var(--fs-md)/1.1 var(--sans); color: var(--accent-ink);
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease; -webkit-user-select: none; user-select: none; }
.stamp-btn .ic { font-size: 34px; }
.stamp-btn:active { transform: scale(0.97); }
.stamp-btn:disabled { opacity: .6; cursor: default; }
.stamp-btn.in { background: var(--accent); box-shadow: 0 10px 28px -10px rgba(169, 118, 63, .55), 0 2px 6px rgba(46, 44, 41, .08); }
.stamp-btn.out { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent-deep), 0 8px 24px -12px rgba(46, 44, 41, .28); }
.stamp-btn.out .ic { color: var(--accent-deep); }
/* laeuft: ein ruhiger Ring als Zustand, keine Dekoration */
.stamp-btn.running::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--accent); opacity: .7; animation: stamp-breathe 2.8s ease-in-out infinite; }
.stamp-btn.paused::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px dashed var(--line-2); }
@keyframes stamp-breathe { 0%, 100% { transform: scale(1); opacity: .65; } 50% { transform: scale(1.04); opacity: .25; } }
@media (hover: hover) and (pointer: fine) {
  .stamp-btn.in:hover { background: var(--accent-hover); }
  .stamp-btn.out:hover { background: var(--accent-soft); }
}
.stamp-time { font: 400 52px/1 var(--serif); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stamp-meta { color: var(--text-2); font-size: var(--fs-ui); margin-top: calc(-1 * var(--s2)); }
.stamp-pause { margin-top: var(--s2); }
.stamp .msg { width: 100%; text-align: left; }
.stamp-foot { border-top: 1px solid var(--line); padding-top: var(--s3); display: flex; flex-direction: column; }
.stamp-line { display: flex; align-items: center; gap: var(--s3); min-height: var(--ctl); font-size: var(--fs-ui); line-height: 1.35; }
.stamp-line > .ic { font-size: 17px; color: var(--text-3); flex: none; }
.stamp-line > span { flex: 1; min-width: 0; }
.stamp-line .clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stamp-line .stamp-more { font-weight: 600; flex: none; }
@media (min-width: 768px) { .page-heute-staff { padding-top: var(--s6); } .stamp-btn { width: 200px; height: 200px; } .stamp-time { font-size: 60px; } }
@media (prefers-reduced-motion: reduce) { .stamp-btn.running::after { animation: none; } }

/* ── Leitung und GF ── */
.stampbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.stampbar b { font-size: var(--fs-md); }
.stampbar .select { min-width: 150px; }
.stampbar .msg { flex: 1 1 100%; }
.home-grid { margin-top: var(--s2); }
.home-grid .sec-title:first-child { margin-top: var(--s5); }
.plan-today .pt-time { flex: none; width: 116px; font-weight: 600; font-size: var(--fs-ui); }
.note-text { font-size: var(--fs-ui); line-height: 1.45; margin-top: 2px; white-space: pre-line; overflow-wrap: anywhere; }
.ink { color: var(--ink); }
@media (max-width: 520px) {
  .stampbar .il.grow { flex: 1 1 100%; }
  .stampbar .btn { flex: 1 1 auto; }
  .stampbar .select { flex: 1 1 100%; }
  .plan-today .pt-time { width: 92px; font-size: var(--fs-sm); }
}