/* Der Kreis ist das dominante Objekt: die Bühne bekommt den ganzen Platz zwischen Wortmarke und Text-Block (flex 1).
   Die Ringe füllen sie, so groß es Höhe und Breite (abzüglich 16px je Seite) erlauben, zentriert (viewBox, meet).
   Oben 24px Versatz: gleicht die Luft unter der Wortmarke aus, damit der Kreis optisch mittig zwischen Wortmarke und Text steht.
   viewBox 36…364: die farbigen Ringe (Ø ≈ 300 Einheiten) füllen ~91 % der Fläche; die blassen Echo-Ringe dürfen leicht darüber hinausreichen.
   Auf niedrigen Bildschirmen schrumpft zuerst die Bühne (bis 120px), erst dann die Luft um den Text-Block. */
.visual-stage { position: relative; flex: 1 1 0; min-height: 120px; display: grid; place-items: center; }
.sound-orb { position: absolute; top: 24px; left: 0; right: 0; margin: 0 auto; width: calc(100% - var(--raster) * 4); height: calc(100% - 24px); overflow: visible; }
.orb-halo { position: absolute; width: 76%; max-height: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(ellipse, #6768d813, #2184920b 43%, transparent 70%); filter: blur(12px); }
/* Im Countdown bleibt unter den Ringen ein eigener Streifen für die echte Restzeit frei. */
.visual-stage[data-countdown="true"] { min-height: 160px; }
.visual-stage[data-countdown="true"] .sound-orb { top: 8px; height: calc(100% - 88px); }
.visual-stage[data-countdown="true"] .orb-halo { top: 0; max-height: calc(100% - 80px); }
@font-face { font-family: "Ansage Digital"; src: url("./countdown-digital.woff") format("woff"); font-style: normal; font-weight: 400; font-display: swap; }
.countdown-display { position: absolute; bottom: 4px; left: 16px; right: 16px; text-align: center;
  font-family: "Ansage Digital", ui-monospace, monospace; font-size: clamp(40px, 14cqw, 64px);
  font-weight: 400; line-height: 1.15; letter-spacing: .06em; font-variant-numeric: tabular-nums;
  color: #ff3630; text-shadow: 0 0 3px #ff332b, 0 0 12px #ff160c, 0 0 28px #ff160c99;
  pointer-events: none; }
@media (forced-colors: active) { .countdown-display { color: CanvasText; text-shadow: none; } }
@media (max-height: 650px) {
  .visual-stage[data-countdown="true"] { min-height: 88px; }
  .visual-stage[data-countdown="true"] .sound-orb { top: 0; height: calc(100% - 52px); }
  .countdown-display { bottom: 0; font-size: 40px; }
}
/* Ein zusammenhängender Alarm-Look ausschließlich im Countdown-Modus.
   Dringlichkeit folgt derselben Restzeit wie beide Uhren; kein Blinken der Ziffern. */
.visual-stage[data-countdown="true"] { --warn-pulse: 3s; }
.visual-stage[data-countdown="true"] #ring-gradient stop:nth-child(1) { stop-color: #ffb29c; }
.visual-stage[data-countdown="true"] #ring-gradient stop:nth-child(2) { stop-color: #ff654f; }
.visual-stage[data-countdown="true"] #ring-gradient stop:nth-child(3) { stop-color: #ff302b; }
.visual-stage[data-countdown="true"] #ring-gradient stop:nth-child(4) { stop-color: #d91434; }
.visual-stage[data-countdown="true"] #ring-gradient stop:nth-child(5) { stop-color: #ff8064; }
.visual-stage[data-countdown="true"] #ring-gradient-reverse stop { stop-color: #ff4e43; }
.visual-stage[data-countdown="true"] #ring-gradient-reverse stop:nth-child(even) { stop-color: #ffab8c; }
.visual-stage[data-countdown="true"] #center-glow stop { stop-color: #a92122; }
.visual-stage[data-countdown="true"] .voice-mark { stroke: #ffd1c5; }
.visual-stage[data-countdown="true"] .orb-halo { background: radial-gradient(ellipse, #e92c2526, #a0121b0d 48%, transparent 70%); }
.visual-stage[data-countdown="true"] .countdown-display { color: #ff6253; text-shadow: 0 0 3px #ff332b, 0 0 16px #ff160c99, 0 0 36px #ff160c55; }
.visual-stage[data-countdown="true"] .countdown-display::after { content: 'BEREIT'; position: absolute; left: 0; right: 0; bottom: -20px;
  color: #b7837e; font: 600 10px/16px system-ui, sans-serif; letter-spacing: .22em; text-shadow: none; }
.visual-stage[data-urgency="active"] .countdown-display::after { content: 'VERBLEIBENDE ZEIT'; }
.visual-stage[data-urgency="soon"] { --warn-pulse: 2s; }
.visual-stage[data-urgency="soon"] .countdown-display::after { content: 'LETZTE MINUTE'; color: #ff9e8b; }
.visual-stage[data-urgency="critical"] { --warn-pulse: 1.2s; }
.visual-stage[data-urgency="critical"] .countdown-display { color: #ff9985; text-shadow: 0 0 4px #ff332b, 0 0 18px #ff160c, 0 0 38px #ff160c88; }
.visual-stage[data-urgency="critical"] .countdown-display::after { content: 'LETZTE SEKUNDEN'; color: #ffc4b6; }
.visual-stage[data-urgency="done"] .countdown-display::after { content: 'ZEIT ABGELAUFEN'; color: #ff9e8b; }
.visual-stage[data-countdown="true"]:is([data-urgency="active"], [data-urgency="soon"], [data-urgency="critical"]) .ring-glow {
  animation: countdown-warning var(--warn-pulse) ease-in-out infinite; }
@keyframes countdown-warning { 0%, 100% { opacity: .25; } 50% { opacity: .65; } }
.screen:has(.visual-stage[data-countdown="true"]) .wordmark > svg,
.screen:has(.visual-stage[data-countdown="true"]) .wordmark > span,
.screen:has(.visual-stage[data-countdown="true"]) .composer-icon { color: #ff9484; }
.screen:has(.visual-stage[data-countdown="true"]) .composer textarea { caret-color: #ff9484; }
.screen:has(.visual-stage[data-countdown="true"]) .tool-button { color: #b9928f; border-color: #70423e; }
.screen:has(.visual-stage[data-countdown="true"]) .tool-button[aria-pressed="true"] { color: #ff9b88; border-color: #ff7864;
  box-shadow: 0 0 16px #ff3b2526, inset 0 0 12px #ff3b2514; }
.screen:has(.visual-stage[data-countdown="true"]) .timer-button[data-rest]::after { color: #ffac99; }
.screen:has(.visual-stage[data-countdown="true"]) .send-button { background: #ff7966; color: #250d10; box-shadow: 0 4px 24px #ff3b2526; }
.screen:has(.visual-stage[data-countdown="true"]) .send-button:not(:disabled):hover { background: #ff9b88; }
.screen:has(.visual-stage[data-countdown="true"]) .scenario-nav { border-top-color: #ff8d7026; }
.screen:has(.visual-stage[data-countdown="true"]) .nav-item { color: #b99995; }
.screen:has(.visual-stage[data-countdown="true"]) .nav-value { color: #dec4bf; }
.screen:has(.visual-stage[data-countdown="true"]) .sheet { background: #180e11; border-color: #683c37; }
.screen:has(.visual-stage[data-countdown="true"]) .chip[aria-pressed="true"] { color: #ffc4b6; border-color: #ff7966; background: #ff796619; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .visual-stage[data-countdown="true"] .ring-glow { animation: none !important; }
}
@media (forced-colors: active) {
  .visual-stage[data-countdown="true"] .countdown-display { color: CanvasText; text-shadow: none; }
}
.echo { opacity: .12; transform-origin: 200px 200px; animation: echo-breathe 6s ease-in-out infinite; }
.echo-two { animation-delay: -2s; opacity: .08; }
.echo-three { animation-delay: -4s; opacity: .05; }
.voice-mark { transform-origin: 200px 200px; animation: voice-breathe 4s ease-in-out infinite; }
.screen.is-active .voice-mark { animation-duration: .85s; }
.screen.is-active .echo { animation-duration: 1.8s; }
.screen.is-paused .echo, .screen.is-paused .voice-mark { animation-play-state: paused; }
@keyframes echo-breathe { 0%, 100% { transform: scale(.97); } 50% { transform: scale(1.025); } }
@keyframes voice-breathe { 0%, 100% { transform: scaleY(.8); opacity: .6; } 50% { transform: scaleY(1.05); opacity: 1; } }