/* ===== Kostenlose Werkzeuge · Timer (28.10.2026) – nur /tools/timer, nach tools.css einbinden =====
   Ring = verbleibende Zeit, Ziffern wachsen mit dem Ring (Container-Einheiten, Rückfall vw).
   Zustände an .tm-uhr[data-zustand]: bereit · laeuft · pause · letzte (letzte Minute) · um (Zeit um). */
.tm-uhr{position:relative;width:min(100%,23rem);aspect-ratio:1/1;container-type:inline-size;margin:0 auto}
.tm-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.tm-ring circle{fill:none;stroke-width:7}
.tm-ring-grund{stroke:var(--wz-ton)}
.tm-ring-rest{stroke:#2F6A91;stroke-linecap:round;transition:stroke-dashoffset .3s linear,stroke .3s ease}
.wz-gross[data-thema="dunkel"] .tm-ring-rest{stroke:#8cc0e6}
.wz-gross[data-thema="dunkel"] .tm-ring-rest{stroke:#7db3dc}
.tm-mitte{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 12%}
.tm-zeit{font-size:clamp(2.6rem,14vw,5.6rem);font-size:23cqi;letter-spacing:0}
.tm-status{font-size:clamp(.95rem,4vw,1.15rem);font-size:5.4cqi;font-weight:700;min-height:1.4em}
.tm-uhr[data-zustand="letzte"] .tm-ring-rest{stroke:#B85C36}
.tm-uhr[data-zustand="letzte"] .tm-zeit,.tm-uhr[data-zustand="letzte"] .tm-status{color:var(--wz-warm-text)}
.tm-uhr[data-zustand="um"] .tm-ring-grund{stroke:var(--wz-alarm)}
.tm-uhr[data-zustand="um"] .tm-zeit,.tm-uhr[data-zustand="um"] .tm-status{color:var(--wz-alarm-text)}
.tm-uhr[data-zustand="pause"] .tm-zeit{opacity:.75}
.tm-buehne[data-zustand="um"]{background:var(--wz-alarm)}
@media (prefers-reduced-motion: no-preference){
  .tm-buehne[data-zustand="um"] .tm-zeit{animation:tmPuls 1s ease-in-out 3}
}
@keyframes tmPuls{0%,100%{transform:none}50%{transform:scale(1.06)}}
.tm-steuer{margin-top:4px}
.tm-steuer .wz-knopf-haupt{min-width:9.5em}
.wz-buehne.wz-gross .tm-uhr{width:min(88vw,70vh)}
.wz-buehne.wz-gross .tm-zeit{font-size:min(20vw,15vh);font-size:23cqi}
.wz-buehne.wz-gross .tm-steuer .wz-knopf{font-size:clamp(1.05rem,1.8vw,1.5rem);min-height:56px}
.tm-ton-zeile{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tm-ton-zeile .wz-knopf{flex:1 1 6rem}
.tm-eigen .wz-knopf{margin-left:auto}
@media (max-width:420px){.tm-eigen .wz-knopf{margin-left:0;width:100%}}