/* 4-7-8 Atem-Guide (geteilt: Folie und Einzelseite). Phasen: einatmen = Grün, halten = Gold, ausatmen = Warmrot; zusätzlich immer als Text und Zahl */
.br { --c: var(--accent); --s: .45; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; align-items: center; }
.br[data-phase="hold"] { --c: var(--gold); }
.br[data-phase="out"] { --c: var(--warm); }
.br-stage { position: relative; width: 420px; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; display: grid; place-items: center; }
.br-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.br-ring circle { fill: none; stroke-width: 7; }
.br-ring .trk { stroke: var(--line); }
.br-ring .bar { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.br-orb { position: absolute; width: 78.5%; height: 78.5%; border-radius: 50%; background: color-mix(in srgb, var(--c) 28%, transparent); border: 4px solid var(--c); transform: scale(var(--s)); }
.br-num { position: relative; font: 700 6.2em/1 var(--mono); color: var(--text); }
.br-phase { position: absolute; bottom: 14%; font: 600 1.15em var(--font); color: var(--text); }
.br-side { display: flex; flex-direction: column; gap: .8em; }
.br-round { margin: 0; font: .8em var(--mono); color: var(--muted); }
.br-bar { position: relative; display: flex; height: 3.2em; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); }
.br-bar .seg { display: flex; align-items: center; justify-content: center; gap: .3em; font-size: .62em; color: var(--muted); background: var(--surface); border-right: 1px solid var(--line-strong); transition: background .3s, color .3s; }
.br-bar .seg:last-of-type { border-right: 0; }
.br-bar .seg b { font: 700 1.5em var(--mono); }
.br[data-phase="in"] .seg.in, .br[data-phase="hold"] .seg.hold, .br[data-phase="out"] .seg.out { color: var(--on-accent); background: var(--c); }
.br-marker { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--text); transform: translateX(-2px); opacity: 0; }
.br[data-running="1"] .br-marker { opacity: 1; }
.br-next { margin: 0; font-size: 1.15em; min-height: 2.6em; }
.br-actions { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; }
.br-start, .br-stop, .br-restart { font: inherit; font-weight: 600; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 2px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; }
.br-start { align-self: flex-start; padding: .55em 2.2em; font-size: 1.2em; font-weight: 700; background: var(--accent); color: var(--on-accent); }
.br-start:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.br[data-running="1"] .br-start { display: none; }
.br:not([data-running="1"]):not([data-phase="done"]) .br-ring .bar { opacity: 0; }
.br:not([data-running="1"]):not([data-phase="done"]) .br-phase { bottom: 44%; font-size: 1.5em; }
.br-stop, .br-restart { padding: .5em 1.4em; }
.br-stop { color: var(--warm); border-color: var(--warm); }
.br-stop:hover { background: var(--warm-soft); border-color: var(--warm); }
.br-restart { color: var(--accent); }
.br-restart:hover { background: var(--accent-soft); color: var(--accent); }
.br:not([data-running="1"]) .br-stop, .br:not([data-running="1"]) .br-restart { display: none; }
@media (max-width: 760px) {
  .br { grid-template-columns: 1fr; gap: 1em; }
  .br-stage { width: min(86vw, 340px); }
}