/* Kurzzeitwecker (uhren.js): der Knopf im Rezeptschritt und die Leiste über dem Dock. Eigene Datei, weil auch die eingebetteten
   Seiten unter „Mehr“ sie laden (Küchenbuch live, seit 22.09.2026) — dort ohne style.css; die Tokens kommen aus artefakt-bruecke.css. */
.uhr { font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--akzent); background: var(--akzent-sanft); border: 0; border-radius: 999px; padding: 1px 10px 2px; margin: 0 1px; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: transform .28s var(--feder); }
.uhr::before { content: "⏱ "; font-weight: 400; }
.uhr:active { transform: scale(.92); }
.uhr.gestellt { animation: uhr-an .7s ease-out; }
@keyframes uhr-an { 0% { background: var(--jetzt); color: #1d1400; } }

/* Wecker-Leiste: schwebt über dem Dock, auf jeder Seite */
.uhren { position: fixed; z-index: 45; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom) + 66px + 10px); transform: translateX(-50%); width: min(430px, calc(100vw - 24px)); display: grid; gap: 6px; pointer-events: none; }
.uhr-lauf { pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 16px; border-radius: 999px; color: var(--tinte); background: linear-gradient(var(--glas-chrom), var(--glas-chrom)), var(--grund); border: 1px solid var(--glas-kontur); box-shadow: var(--rand-chrom), var(--chrom-schatten); }
.uhr-lauf a { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; padding: 7px 0; color: inherit; text-decoration: none; }
.uhr-zeit { flex: none; min-width: 3.4em; font-size: 1.0625rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--akzent); }
.uhr-lauf a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; color: var(--leise); }
.uhr-weg { flex: none; width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--leise); font: inherit; font-size: 1.375rem; line-height: 1; cursor: pointer; }
.uhr-weg:active { background: var(--akzent-sanft); }
.uhr-lauf.fertig { border-color: var(--jetzt); animation: uhr-ruft 1.1s ease-in-out infinite; }
.uhr-lauf.fertig .uhr-zeit { color: var(--jetzt-text); }
@keyframes uhr-ruft { 50% { opacity: .55; } }
:root.hat-uhren main { padding-bottom: 96px; }