/* BDE-Terminal — dunkel, große Ziele, Handschuh-tauglich. Tokens: /ui/tokens.css (HK Design Basics). */
:root {
  --blau: var(--hk-blau); --dunkel: var(--hk-dunkelblau);
  --gedimmt: var(--text-gedimmt);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font-family: var(--schrift); background: var(--atmo) fixed, var(--nacht);
  color: var(--text); -webkit-font-smoothing: antialiased; }
.uebersicht-titel { font-size: 0.82rem; font-weight: 700; color: var(--text-gedimmt);
  text-transform: uppercase; letter-spacing: 0.08em; margin: 1.2rem 0 0.3rem; text-align: left; }
.uebersicht-leer { text-align: center; color: var(--text-gedimmt); }

header { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1rem;
  background: var(--kopf-flaeche); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rand); box-shadow: var(--schatten-1);
  position: sticky; top: 0; z-index: 5; }
.logo { background: linear-gradient(135deg, var(--blau), var(--dunkel)); color: #fff; font-weight: 700;
  padding: 0.15rem 0.5rem; border-radius: 6px; box-shadow: var(--schatten-blau); }
.titel { color: var(--gedimmt); }
.netz { margin-left: auto; font-size: 1.1rem; }
.netz.online { color: var(--gruen); text-shadow: 0 0 10px rgba(60, 179, 113, 0.6); }
.netz.offline { color: var(--rot); text-shadow: 0 0 10px rgba(217, 83, 79, 0.6); }
.queue { background: var(--gelb); color: #201700; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; }

main { max-width: 640px; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.2rem; text-align: center; letter-spacing: var(--titel-spationierung); }
.versteckt { display: none !important; }

button { font-family: inherit; border: none; border-radius: 12px; cursor: pointer; color: var(--text); }
.klein { background: var(--flaeche); border: 1px solid var(--rand); padding: 0.5rem 0.9rem; font-size: 0.9rem; }
.klein:hover { border-color: var(--blau); }

.kuerzel-eingabe { display: block; width: 100%; max-width: 300px; margin: 0 auto 0.8rem;
  text-align: center; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.05em;
  background: var(--flaeche); color: var(--text); border: 2px solid var(--rand-stark);
  border-radius: 14px; padding: 0.75rem; font-family: inherit; text-transform: uppercase; }
.kuerzel-eingabe:focus { outline: none; border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(18, 117, 187, 0.15); }

.pin-anzeige { text-align: center; font-size: 2rem; letter-spacing: 0.5rem; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: 14px; padding: 0.6rem; margin: 0 auto 1rem;
  max-width: 300px; font-variant-numeric: tabular-nums; }

.ziffern { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; max-width: 340px; margin: 0 auto; }
.ziffern button { background: var(--flaeche); border: 1px solid var(--rand); font-size: 1.6rem;
  padding: 1.1rem 0; font-weight: 600; box-shadow: var(--schatten-1); }
.ziffern button:active { background: var(--dunkel); transform: scale(0.96); }

/* Stempeluhr: Arbeitszeit-Nachweis (kommen/gehen), bewusst getrennt von FA-Buchungen */
.stempel-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 0.4rem 0 0.3rem; }
.stempel { font-size: 1.1rem; font-weight: 700; padding: 1.1rem 0.5rem;
  box-shadow: var(--schatten-2), inset 0 1px 0 rgba(255,255,255,0.12); }
.stempel.kommen { background: linear-gradient(180deg, #3cb371, #2a9257); color: #06220f; }
.stempel.gehen { background: linear-gradient(180deg, #0a6391, var(--dunkel)); }
.stempel:active { filter: brightness(1.2); transform: scale(0.985); }
.stempel-status { text-align: center; color: var(--gedimmt); font-size: 0.85rem; min-height: 1.2em; margin: 0 0 0.5rem; }

/* Vollbild-Bestätigung beim Stempeln/Buchen: nicht zu übersehen, auch mit Handschuhen */
#stempel-blitz { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.6rem;
  background: rgba(244, 247, 250, 0.94); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: blitz-rein 200ms ease-out; }
#stempel-blitz.versteckt { display: none; }
#stempel-blitz.gehen .blitz-symbol { background: linear-gradient(180deg, #0a6391, var(--dunkel)); color: #fff; }
.blitz-symbol { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 4rem; font-weight: 700; color: #06220f;
  background: linear-gradient(180deg, #3cb371, #2a9257);
  box-shadow: 0 12px 40px -8px rgba(46, 158, 91, 0.7); animation: blitz-plopp 400ms ease; }
.blitz-text { font-size: 1.4rem; font-weight: 700; text-align: center; color: var(--text); }
@keyframes blitz-plopp { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes blitz-rein { from { opacity: 0; } }

.zeit-tag { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; padding: 0.8rem 1rem; }
.zeit-tag .datum { font-weight: 700; }
.zeit-tag .paare { color: var(--gedimmt); font-size: 0.85rem; }
.zeit-tag .stunden { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.zeit-tag .stunden.offen { color: var(--gelb); }

.fa-liste { display: flex; flex-direction: column; gap: 0.7rem; }
.fa-karte { background: var(--flaeche); border: 2px solid var(--rand); border-radius: 14px;
  padding: 1rem; text-align: left; font-size: 1rem; box-shadow: var(--schatten-2);
  transition: border-color var(--schnell), transform var(--schnell);
  animation: hkm-auftauchen var(--sanft) both; }
.fa-karte:hover { border-color: var(--blau); }
.fa-karte:active { border-color: var(--blau); transform: scale(0.99); }
.fa-karte .nr { color: var(--akzent-nr); font-weight: 700; }
.fa-karte .maschine { color: var(--gedimmt); font-size: 0.9rem; }

.buchen-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1rem; }
.buchen { font-size: 1.15rem; font-weight: 700; padding: 1.6rem 0.5rem; line-height: 1.4;
  box-shadow: var(--schatten-2), inset 0 1px 0 rgba(255,255,255,0.12); }
.buchen.ruesten { background: linear-gradient(180deg, #0a6391, var(--dunkel)); }
.buchen.fertigung { background: linear-gradient(180deg, #3cb371, #2a9257); color: #06220f; }
.buchen.stoerung { background: linear-gradient(180deg, #e4645f, var(--rot)); }
.buchen.teile { background: linear-gradient(180deg, var(--hk-blau-hell), var(--blau)); grid-column: span 2; }
.buchen:active { filter: brightness(1.2); transform: scale(0.985); }

#eingabe-text { width: 100%; min-height: 100px; background: var(--flaeche); color: var(--text);
  border: 1px solid var(--rand); border-radius: 14px; padding: 0.8rem; font-size: 1.1rem; font-family: inherit; }
#eingabe-text:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgba(18, 117, 187, 0.25); }
.eingabe-aktionen { display: flex; gap: 0.8rem; justify-content: center; margin-top: 1rem; }
.eingabe-aktionen .buchen { padding: 1rem 2rem; }

#toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
  background: var(--flaeche); border: 1px solid var(--rand); border-left: 4px solid var(--gruen);
  border-radius: 10px; padding: 0.8rem 1.2rem; font-size: 1rem; opacity: 0; transition: opacity 0.2s;
  pointer-events: none; max-width: 90vw; box-shadow: var(--schatten-3); }
#toast.sichtbar { opacity: 1; }
#toast.fehler { border-left-color: var(--rot); }
#toast.puffer { border-left-color: var(--gelb); }