/* Atemrunden – eine ruhige Spalte, der Atemkreis ist das Zentrum; Einstellungen darunter */
:root{
  --bg:#ECEFF6; --surface:#FFFFFF; --fg:#1B2236; --muted:#5C6580; --line:#D3D8E6;
  --breath:#4C5BD4; --breath-soft:#C9CEF5; --hold:#D9634B; --hold-soft:#F6D3CA; --calm:#2F8F7A;
  --display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body:"Figtree", -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#10131D; --surface:#191D2B; --fg:#E6E9F2; --muted:#98A0B8; --line:#2A3043;
  --breath:#8F9BFF; --breath-soft:#2B3266; --hold:#F29780; --hold-soft:#4A2A25; --calm:#5CC7AE; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#10131D; --surface:#191D2B; --fg:#E6E9F2; --muted:#98A0B8; --line:#2A3043;
  --breath:#8F9BFF; --breath-soft:#2B3266; --hold:#F29780; --hold-soft:#4A2A25; --calm:#5CC7AE; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.5;
  -webkit-tap-highlight-color:transparent;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:calc(env(safe-area-inset-top,0px) + 20px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 32px)}
.wrap{max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
header{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
h1{font-family:var(--display);font-weight:700;font-size:1.7rem;letter-spacing:-.02em;margin:0}
.round-tag{font-family:var(--mono);font-size:.8rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

.picker{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.picker button{min-height:40px;padding:8px 16px;white-space:nowrap}
.picker button[aria-pressed="true"]{background:var(--breath-soft);border-color:var(--breath)}

.stage{position:relative;aspect-ratio:1;max-width:100%;display:grid;place-items:center;user-select:none;-webkit-user-select:none}
.halo{position:absolute;inset:4%;border-radius:50%;border:1.5px dashed var(--line)}
.orb{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 35%, var(--breath-soft), var(--breath) 78%);
  transform:scale(.55);transition-property:transform,background,opacity;transition-timing-function:cubic-bezier(.45,0,.35,1)}
.orb.hold{background:radial-gradient(circle at 38% 35%, var(--hold-soft), var(--hold) 80%)}
.orb.recover{background:radial-gradient(circle at 38% 35%, var(--breath-soft), var(--calm) 80%)}
.readout{position:relative;text-align:center;color:#fff;display:flex;flex-direction:column;gap:2px;pointer-events:none;
  text-shadow:0 1px 8px rgba(0,0,0,.18)}
.idle .readout{color:var(--fg);text-shadow:none}
.big{font-family:var(--display);font-weight:700;font-size:clamp(3rem,18vw,5.2rem);line-height:1;font-variant-numeric:tabular-nums}
.big.time{font-family:var(--mono);font-weight:500;font-size:clamp(2.6rem,15vw,4.4rem)}
.cue{font-size:1.05rem;font-weight:600;letter-spacing:.02em}

.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
button{font:inherit;cursor:pointer;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--fg);
  padding:12px 22px;font-weight:600;min-height:48px;touch-action:manipulation}
button.primary{background:var(--breath);border-color:var(--breath);color:#fff}
button.holdbtn{background:var(--hold);border-color:var(--hold);color:#fff}
button:focus-visible{outline:3px solid var(--breath);outline-offset:3px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:16px}
.panel-group{display:flex;flex-direction:column;gap:16px}
.panel h2{font-family:var(--display);font-weight:500;font-size:1.1rem;margin:0}
.field{display:flex;flex-direction:column;gap:8px}
.label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{flex:1;min-width:64px;text-align:center;padding:9px 10px;border-radius:12px;border:1.5px solid var(--line);cursor:pointer;font-weight:500;font-variant-numeric:tabular-nums}
.seg input:checked + label{border-color:var(--breath);background:var(--breath-soft);color:var(--fg)}
.seg input:focus-visible + label{outline:3px solid var(--breath);outline-offset:2px}
input[type=range]{width:100%;accent-color:var(--breath);height:28px}
.scale{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted)}
.voicerow{display:flex;gap:8px}
.voicerow select{flex:1;min-width:0;font:inherit;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--fg)}
.voicerow button{min-height:44px;padding:8px 16px}
.toggle{display:flex;align-items:center;gap:10px;font-weight:500}
.toggle input{width:20px;height:20px;accent-color:var(--breath)}

table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
td,th{padding:8px 4px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
td.num{font-family:var(--mono);text-align:right}
.best{color:var(--hold);font-weight:600}
.sub{font-size:.78rem;color:var(--calm);margin-top:2px}
.exname{display:block;font-size:.75rem;color:var(--muted)}
.empty{color:var(--muted);margin:0}
.note{font-size:.88rem;color:var(--muted);margin:0;line-height:1.5}
.note strong{color:var(--fg)}
.foot{font-size:.75rem;color:var(--muted);text-align:center;font-family:var(--mono);letter-spacing:.04em}

.update{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  width:min(440px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--fg);color:var(--bg);border-radius:16px;padding:10px 10px 10px 18px;font-weight:600;
  box-shadow:0 8px 28px rgba(0,0,0,.25)}
.update button{min-height:40px;padding:8px 16px;background:var(--breath);border-color:var(--breath);color:#fff}

@media (prefers-reduced-motion: reduce){.orb{transition-duration:.01ms!important}}