/* ═══════════════════════════════════════════════════════════
   BREATHFLOW v1 — Views
   ═══════════════════════════════════════════════════════════ */

/* ══════════ ATMEN ══════════ */
/* Der Orb steht in der Mitte — auf jedem Gerät. Die Bedienung ordnet sich darunter an,
   auf dem Desktop zweispaltig, damit man ohne Scrollen alles im Blick hat. */
/* stretch, nicht center: sonst fällt das Deck während einer Session auf seine
   Inhaltsbreite zusammen, sobald Vorlagen und Sessions ausgeblendet sind.
   Der Hero zentriert sich ohnehin selbst über seinen Flex-Container. */
/* minmax(0, 1fr): die Spalte ist exakt so breit wie der Platz, den sie hat.
   Ohne die Null-Untergrenze wächst ein Grid-Track mit seinem breitesten Inhalt
   mit — die lange Runden-Vorschau hat damit auf dem Handy die ganze Seite
   auseinandergezogen. Auf PC fiel das nie auf, weil dort max-width greift. */
.breathe-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); justify-items: stretch; }
/* Der erste Bildschirm gehört dem Atem: Orb, Zahlen und der Start-Knopf —
   danach ist Schluss. Alles Weitere holt man sich mit einem Wisch. Auf PC war
   das schon so, auf dem Handy fehlte es. Läuft eine Session, fällt die
   Mindesthöhe weg, sonst klaffte unter dem Orb ein leeres Feld. */
.hero-col {
  width: 100%;
  min-height: calc(100dvh - var(--topbar-h) - var(--nav-h) - var(--nav-pad-b) - var(--sp-5));
  display: flex; flex-direction: column; justify-content: center;
  padding-bottom: var(--sp-4);
}
body.running .hero-col { min-height: 0; padding-bottom: 0; }

.hero { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }

.phase-indicator {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--glass-bd);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em;
  transition: box-shadow var(--t-slow) var(--ease);
}
body.running .phase-indicator {
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 28px -10px var(--phase-c, var(--c-inhale));
}
.phase-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-inhale); box-shadow: 0 0 12px var(--c-inhale);
  transition: background var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.phase-round { color: var(--t-faint); font-variant-numeric: tabular-nums; }

/* Ohne Rhythmus-Ring braucht der Orb weniger Fläche — sonst steht er verloren da. */
.orb-stage {
  position: relative;
  width: min(286px, 72vw); height: min(286px, 72vw);
  display: grid; place-items: center;
  transition: width var(--t-slow) var(--ease), height var(--t-slow) var(--ease);
}
body.ring-on .orb-stage { width: min(340px, 86vw); height: min(340px, 86vw); }
/* Weicher Farbabdruck der aktuellen Phase hinter dem Orb */
.orb-stage::before {
  /* Bleibt innerhalb der Bühne — ein überstehendes Pseudo-Element erzeugt
     auf schmalen Bildschirmen sonst waagerechtes Scrollen. */
  content: ''; position: absolute; inset: 0;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--phase-c, transparent) 0%, transparent 72%);
  opacity: 0; transition: opacity var(--t-slow) var(--ease), background var(--t-slow) var(--ease);
}
body.running .orb-stage::before { opacity: 0.10; }
#orb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.radial-editor {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; opacity: 0.85;
  transition: opacity var(--t-slow) var(--ease);
}
.radial-editor.dim { opacity: 0.2; pointer-events: none; }
.radial-editor.off { opacity: 0; pointer-events: none; visibility: hidden; }
.re-arc { fill: none; stroke-width: 4; stroke-linecap: round; opacity: 0.75; }
.re-handle {
  fill: var(--bg-1); stroke-width: 2.5; cursor: grab;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
}
.re-handle:active { cursor: grabbing; }

.countdown {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 4.5rem; font-weight: 200; color: var(--countdown-c);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.countdown.show span { animation: cdPop 0.9s var(--ease); display: block; }
.countdown.fade-out { opacity: 0; transition: opacity 0.35s; }
@keyframes cdPop {
  0%   { transform: scale(0.6); opacity: 0; }
  25%  { transform: scale(1); opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}

.live-stats {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center;
  width: 100%;
}
.stat {
  flex: 1 1 82px; min-width: 78px;
  padding: var(--sp-3) var(--sp-2); border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--glass-bd);
  backdrop-filter: blur(14px);
  text-align: center; line-height: 1.15;
  transition: border-color var(--t-fast);
}
.stat:hover { border-color: var(--accent); }
.stat-val { display: block; font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-lbl { display: block; font-size: 0.6rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--t-faint); }
.stat--accent .stat-val {
  color: var(--accent);
  transition: color var(--t-slow), text-shadow var(--t-slow);
}
/* Ab 3 Atemzügen pro Minute abwärts: leuchtendes Hellblau, aber dunkel genug,
   dass es auf Weiß trägt. Der Schein macht die Tiefe sichtbar. */
.stat--accent .stat-val.deep  {
  color: var(--c-deep);
  text-shadow: 0 0 16px color-mix(in srgb, var(--c-deep) 55%, transparent);
}
.stat--accent .stat-val.warn  { color: var(--c-warn); text-shadow: none; }
.stat--accent .stat-val.alert { color: var(--c-alert); text-shadow: none; }
.stat--bio { position: relative; }
.bio-arr {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 20px; height: 26px; color: var(--t-faint); font-size: 1rem;
}
#bio-prev { left: 2px; } #bio-next { right: 2px; }

.rhythm-readout {
  font-size: var(--fs-xs); letter-spacing: 0.06em;
  color: var(--t-faint); text-align: center; min-height: 1.2em;
  font-variant-numeric: tabular-nums;
}

.cta-bar { width: 100%; max-width: 420px; align-self: center; }
body.running .cta-bar { display: none; }

/* ── Deck ──
   Auf dem Handy eine Spalte, die Reihenfolge steuert `order`.
   Auf dem Desktop echte Spalten-Container — dadurch stapeln sich die Karten
   bündig und dünne Klapp-Leisten hängen nicht in leeren Rasterzeilen. */
.deck { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
/* Die Sektionen fließen mit der Spalte mit. Zwei Regeln halten sie ruhig:
   sie dehnen sich auf die volle Breite (sonst misst sich eine zugeklappte
   Karte an ihrer Überschrift), und sie dürfen nie breiter werden als der
   Platz, den sie haben — egal wie lang ihr Inhalt ist. */
.deck > *, .deck-cols > *, .deck-col > * { align-self: stretch; min-width: 0; max-width: 100%; }
.deck-cols { display: contents; }
.deck-col { display: contents; }
.deck > .mode-switches { order: 1; }
#panel-timer  { order: 2; }
#panel-rounds { order: 2; }
#panel-prog   { order: 3; }
#card-rhythm   { order: 4; }
#card-presets  { order: 5; }
#card-sessions { order: 6; }
#card-settings { order: 7; }
#card-sounds   { order: 8; }
body.running .deck .mode-switches,
body.running #card-presets,
body.running #card-sessions,
body.running #settings-data,
body.running .app-footer { display: none; }

/* Läuft die Session, verschwinden ihre Einstellungen. Sie sind ohnehin
   festgelegt — die Engine hat sie beim Start übernommen — und anklicken
   ließen sie sich nicht. Weg damit: Einstellungen und Hintergrund-Sounds
   rücken hoch, und der Blick hat Ruhe. Nach dem Ende sind sie wieder da. */
body.running #panel-rounds,
body.running #panel-timer,
body.running #panel-prog { display: none; }

/* Der Rhythmus verschwindet nur, wenn er ohnehin festgelegt ist — bei Dauer,
   Runden oder Atemverlängerung. Im reinen Flow bleibt er stehen und lässt
   sich weiter verstellen: dort liest die Engine ihn bei jedem Atemzug neu. */
body.running:not([data-mode="flow"]) #card-rhythm,
body.running.prog-on #card-rhythm { display: none; }

.est-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) 0 0; margin-top: var(--sp-2);
  border-top: 1px solid var(--glass-bd);
  font-size: var(--fs-sm); color: var(--t-soft);
}
.est-row strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; color: var(--t); }

.prog-summary {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-sm);
}
.prog-summary > span { display: flex; flex-direction: column; }
.prog-summary .mini-label { margin: 0; }
.prog-summary b { font-variant-numeric: tabular-nums; }
.prog-summary .btn-mini { margin-left: auto; }

/* ── Presets ── */
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.preset {
  padding: var(--sp-3) var(--sp-2); border-radius: var(--r-md);
  background: var(--glass-2); border: 1px solid var(--glass-bd);
  text-align: center; line-height: 1.25; transition: all var(--t-fast);
}
.preset:hover { border-color: var(--accent); transform: translateY(-2px); }
.preset.active { background: var(--accent); color: var(--accent-ct); border-color: transparent; }
.preset.active .preset-val { color: inherit; opacity: 0.8; }
.preset-name { display: block; font-size: var(--fs-sm); font-weight: 700; }
.preset-val { display: block; font-size: 0.66rem; color: var(--t-faint); font-variant-numeric: tabular-nums; }
.preset.flash { animation: presetFlash 0.6s var(--ease); }
@keyframes presetFlash { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { box-shadow: 0 0 0 12px transparent; } }

.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }

/* ── Meine Sessions ── */
.save-dialog { display: flex; gap: 6px; margin-bottom: var(--sp-3); }
/* Drei Spalten auf PC und Handy — genau wie in der bisherigen App.
   Die Namen dürfen dabei umbrechen, statt abgeschnitten zu werden. */
.session-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.session-row {
  /* Umbrechend: der Name nimmt die volle Spaltenbreite, die Aktionsknöpfe
     rutschen darunter. Sonst bleibt in einer 99-px-Spalte nichts vom Namen übrig. */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px;
  padding: 10px 8px; border-radius: var(--r-md);
  background: var(--glass-2); border: 1px solid var(--glass-bd);
  transition: all var(--t-fast);
}
.session-row:hover { border-color: var(--accent); }
.session-main { flex: 1 1 100%; min-width: 0; cursor: pointer; text-align: center; }
.session-name {
  display: block; font-weight: 700; font-size: var(--fs-sm);
  line-height: 1.25; overflow-wrap: break-word; hyphens: auto;
}
.session-meta {
  display: block; font-size: 0.66rem; color: var(--t-faint);
  font-variant-numeric: tabular-nums; line-height: 1.35;
}
.session-pin { color: var(--t-faint); font-size: 0.7rem; }
.session-act {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; color: var(--t-faint);
  transition: color var(--t-fast), background var(--t-fast);
}
.session-act svg { width: 13px; height: 13px; }
.session-act:hover { color: var(--accent); background: var(--glass); }
.session-act--del:hover { color: var(--c-alert); }
.session-row--edit { grid-column: 1 / -1; gap: 6px; padding: 8px; }
.session-rename { padding: 8px 12px; font-size: var(--fs-sm); }
.empty-hint { padding: var(--sp-4); text-align: center; font-size: var(--fs-sm); color: var(--t-faint); }

/* ── Timeline ── */
/* Die Vorschau wird bei vielen Runden beliebig lang. Sie muss sich selbst
   begrenzen — nicht darauf hoffen, dass ein Vorfahre kappt. Sonst zieht sie
   auf dem Handy die ganze Seite in die Breite. */
.timeline-scroll {
  overflow-x: auto; overflow-y: hidden;
  width: 100%; max-width: 100%; min-width: 0;
  /* Sagt der Engine: meine Breite hat mit meinem Inhalt nichts zu tun.
     Egal wie viele Runden die Vorschau zeigt, sie bleibt in ihrem Fenster. */
  contain: inline-size;
  overscroll-behavior-x: contain;
  margin-top: var(--sp-4); padding-bottom: 6px;
}
.timeline { display: flex; align-items: stretch; gap: 3px; min-height: 54px; width: max-content; }

/* Sichtbar, aber leise: eine dünne Leiste zeigt, dass hier noch mehr kommt. */
.timeline-scroll, .bfz-wrap, .ble-modes {
  scrollbar-width: thin;
  scrollbar-color: var(--glass-bd) transparent;
}
.timeline-scroll::-webkit-scrollbar,
.bfz-wrap::-webkit-scrollbar,
.ble-modes::-webkit-scrollbar { height: 5px; }
.timeline-scroll::-webkit-scrollbar-track,
.bfz-wrap::-webkit-scrollbar-track,
.ble-modes::-webkit-scrollbar-track { background: transparent; }
.timeline-scroll::-webkit-scrollbar-thumb,
.bfz-wrap::-webkit-scrollbar-thumb,
.ble-modes::-webkit-scrollbar-thumb {
  background: var(--glass-bd); border-radius: 3px;
}
.tl-seg {
  flex: 0 0 auto; min-width: 46px; padding: 6px 8px;
  border-radius: var(--r-xs); border-left: 3px solid var(--c-inhale);
  background: var(--glass-2);
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--t-faint); text-align: center;
  transition: all var(--t-mid);
}
.tl-seg b { display: block; font-size: var(--fs-md); font-weight: 800; color: var(--t); font-variant-numeric: tabular-nums; }
.tl-seg.hold { border-left-color: var(--c-hold-bottom); }
.tl-seg.hold-in { border-left-color: var(--c-hold-top); }
.tl-seg.rest { border-left-color: var(--c-rest); }
.tl-seg.active { background: var(--accent); color: var(--accent-ct); box-shadow: var(--shadow-m); }
.tl-seg.active b { color: var(--accent-ct); }
.tl-conn { flex: 0 0 10px; align-self: center; height: 1px; background: var(--glass-bd); }
/* Trennt die beiden Teile einer verketteten Session — hier hängt die zweite
   Session an der ersten. */
.tl-plus {
  flex: 0 0 auto; align-self: center;
  padding: 0 10px;
  font-size: var(--fs-lg); font-weight: 800; line-height: 1;
  color: var(--accent);
}

/* ── Sounds ──
   Kachel schaltet an/aus, der schmale Regler darunter setzt die Lautstärke.
   Genau die Bedienung der bisherigen App. */
.sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-2); }
.sound-slot { display: flex; flex-direction: column; gap: 6px; }
.sound-item {
  position: relative; aspect-ratio: 1; width: 100%;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--glass-bd);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 8px 6px;
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.8);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.sound-item::before {
  content: ''; position: absolute; inset: 0;
  background: center/cover no-repeat;
  filter: brightness(0.5) saturate(0.8);
  transition: filter var(--t-mid);
}
/* Die Pfade stehen bewusst hier und nicht als Inline-Variable im HTML:
   ein url() in einer CSS-Variablen wird gegen die Stylesheet-Adresse
   aufgelöst, nicht gegen die Seite — die Bilder landeten sonst unter /css/. */
.sound-item[data-sound="forest"]::before { background-image: url("../imgs/wald-forest-600px.jpg"); }
.sound-item[data-sound="river"]::before { background-image: url("../imgs/river-flow-small-1.jpg"); }
.sound-item[data-sound="binaural"]::before { background-image: url("../imgs/binaural-600px.jpg"); }
.sound-item[data-sound="396hz"]::before { background-image: url("../imgs/bowls-small.jpg"); }
.sound-item[data-sound="drum"]::before { background-image: url("../imgs/breathflow.app-drum.jpg"); }
.sound-item > * { position: relative; z-index: 1; }
.sound-item:hover { transform: translateY(-2px); }
.sound-item.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sound-item.active::before { filter: brightness(0.86) saturate(1.2); }
.s-name {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
  text-align: center; line-height: 1.25;
}
.sound-vol { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; background: transparent; cursor: pointer; }
.sound-vol::-webkit-slider-runnable-track { height: 3px; border-radius: var(--r-pill); background: var(--track); }
.sound-vol::-moz-range-track { height: 3px; border-radius: var(--r-pill); background: var(--track); }
.sound-vol::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; margin-top: -4px;
  border-radius: 50%; background: var(--t-faint);
}
.sound-vol::-moz-range-thumb { width: 11px; height: 11px; border: none; border-radius: 50%; background: var(--t-faint); }
.sound-slot:has(.sound-item.active) .sound-vol::-webkit-slider-thumb { background: var(--accent); }
.sound-slot:has(.sound-item.active) .sound-vol::-moz-range-thumb { background: var(--accent); }

.app-version { margin-top: var(--sp-4); text-align: center; font-size: var(--fs-xs); color: var(--t-faint); }

/* ══════════ ADAPTIVE ══════════ */
.adapt-screen { animation: viewIn var(--t-mid) var(--ease); }
.intent-grid { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .intent-grid { grid-template-columns: repeat(3, 1fr); } }
.intent-card {
  padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg);
  background: var(--glass); border: 1px solid var(--glass-bd);
  backdrop-filter: blur(16px);
  text-align: left; transition: all var(--t-fast);
}
.intent-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-m); }
.intent-ico { display: block; font-size: 1.7rem; color: var(--accent); line-height: 1; margin-bottom: var(--sp-2); }
.intent-title { display: block; font-size: var(--fs-lg); font-weight: 800; }
.intent-desc { display: block; font-size: var(--fs-sm); color: var(--t-soft); }

.baseline-ring { position: relative; width: 190px; margin: var(--sp-5) auto; }
.baseline-ring svg { width: 100%; transform: rotate(-90deg); }
.br-track { fill: none; stroke: var(--track); stroke-width: 5; }
.br-progress { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 0.2s linear; }
.br-center { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; }
.br-hr { font-size: 2.4rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.br-lbl { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--t-faint); }

.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin: var(--sp-4) 0; }
.mini-stats--4 { grid-template-columns: repeat(4, 1fr); }
.mini-stats > div {
  padding: var(--sp-3) 4px; border-radius: var(--r-md);
  background: var(--glass-2); border: 1px solid var(--glass-bd); text-align: center;
}
.mini-stats b { display: block; font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.mini-stats span { font-size: 0.58rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--t-faint); }

.adapt-preset-readout {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--t-faint); letter-spacing: 0.08em;
}
.adapt-preset-readout b { font-size: var(--fs-2xl); font-weight: 200; color: var(--t); font-variant-numeric: tabular-nums; }
.adapt-status { text-align: center; color: var(--t-soft); min-height: 1.5em; margin: var(--sp-3) 0; }

.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2); }
.result-cell { padding: var(--sp-3); border-radius: var(--r-md); background: var(--glass-2); border: 1px solid var(--glass-bd); }
.result-label { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-faint); }
.result-val { font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.result-unit { font-size: var(--fs-xs); font-weight: 500; color: var(--t-faint); }

/* ══════════ TEST ══════════ */
.test-choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.test-card {
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--glass-2); border: 1px solid var(--glass-bd);
  text-align: left; line-height: 1.35; transition: all var(--t-fast); opacity: 0.6;
}
.test-card b { display: block; font-size: var(--fs-md); }
.test-card small { font-size: var(--fs-xs); color: var(--t-faint); }
.test-card.active { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.info-box {
  padding: var(--sp-4); border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--glass-2); border-left: 3px solid var(--accent);
  font-size: var(--fs-sm); line-height: 1.6; margin-bottom: var(--sp-4);
}
.info-box h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.info-box.result { border-left-color: var(--c-good); }
.best-badge {
  display: inline-block; margin-top: var(--sp-3);
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--glass); font-size: var(--fs-sm); font-weight: 700; color: var(--accent);
}

.big-timer-box {
  padding: var(--sp-6) var(--sp-4); border-radius: var(--r-lg); text-align: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ct); box-shadow: var(--shadow-m);
}
.big-timer-lbl { font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; }
.big-timer { font-size: 4.2rem; font-weight: 200; font-variant-numeric: tabular-nums; line-height: 1.1; }

.test-history { display: grid; gap: 4px; margin-top: var(--sp-5); }
.th-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  background: var(--glass-2); font-size: var(--fs-sm);
}
.th-row b { font-variant-numeric: tabular-nums; }

/* ══════════ STATS ══════════ */
.streak-card { text-align: center; }
.streak-num { font-size: var(--fs-2xl); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.streak-unit { display: block; font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-faint); font-weight: 600; }
.streak-line { height: 5px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.streak-fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width var(--t-slow) var(--ease); }
.streak-ms { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.streak-ms .ms {
  width: 30px; height: 24px; display: grid; place-items: center;
  border-radius: var(--r-xs); background: var(--glass-2);
  font-size: var(--fs-xs); font-weight: 700; color: var(--t-faint);
  border: 1px solid transparent; transition: all var(--t-mid);
}
.streak-ms .ms.reached { background: var(--accent); color: var(--accent-ct); }

.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: var(--sp-2); }
.tile {
  padding: var(--sp-3) var(--sp-2); border-radius: var(--r-md); text-align: center;
  background: var(--glass-2); border: 1px solid var(--glass-bd);
}
.tile b { display: block; font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tile span { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-faint); }
.tile-grid--extra .tile b, .tile-grid--ble .tile b { color: var(--accent); }

.chart-wrap { width: 100%; height: 140px; }
#stats-chart { width: 100%; height: 100%; }

.recent-item {
  padding: var(--sp-3); border-radius: var(--r-md); margin-bottom: 6px;
  background: var(--glass-2); border: 1px solid var(--glass-bd);
  transition: all var(--t-fast);
}
.recent-item.has-ble { cursor: pointer; }
.recent-item.has-ble:hover { border-color: var(--c-heart); }
.rs-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; }
.rs-count, .rs-last { font-weight: 400; color: var(--t-faint); font-size: var(--fs-xs); }
.rs-badge { padding: 1px 7px; border-radius: var(--r-pill); background: var(--glass); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; color: var(--t-faint); }
.rs-badge.heart { color: var(--c-heart); }
.rs-vals { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: 4px; font-size: var(--fs-xs); color: var(--t-soft); font-variant-numeric: tabular-nums; }
.rs-vals .accent { color: var(--accent); font-weight: 700; }
.rs-ble { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--glass-bd); font-size: var(--fs-xs); color: var(--c-heart); }

/* ══════════ INFO ══════════ */
.info-content h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-lg); font-weight: 800; margin: var(--sp-6) 0 var(--sp-3);
}
.info-content h2 span:first-child {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-sm);
  background: var(--accent); color: var(--accent-ct);
}
.info-content p { color: var(--t-soft); }
.info-content ul { margin: var(--sp-2) 0; padding-left: 1.1rem; color: var(--t-soft); }
.info-content img { border-radius: var(--r-lg); display: block; margin: var(--sp-4) 0; box-shadow: var(--shadow-m); }

.state-compare { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
@media (min-width: 560px) { .state-compare { grid-template-columns: repeat(2, 1fr); } }
.state-card { padding: var(--sp-4); border-radius: var(--r-md); background: var(--glass-2); border-left: 3px solid var(--c-alert); font-size: var(--fs-sm); line-height: 1.55; }
.state-card.safe { border-left-color: var(--c-good); }

.bfz-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.bfz-wrap { overflow-x: auto; max-width: 100%; min-width: 0; border-radius: var(--r-md); }
.bfz-table th { padding: 9px 12px; text-align: left; font-weight: 700; background: linear-gradient(105deg, var(--accent), var(--accent-2)); color: var(--accent-ct); white-space: nowrap; }
.bfz-table td { padding: 8px 12px; border-bottom: 1px solid var(--glass-bd); white-space: nowrap; }
.bfz-table tr.hl { background: var(--glass); outline: 1px solid var(--accent); outline-offset: -1px; }
.bfz-table .st { font-weight: 400; font-size: 0.72rem; opacity: 0.65; }

.bf-system { display: grid; gap: var(--sp-2); }
.bf-sys-card {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: linear-gradient(105deg, var(--accent), var(--accent-2)); color: var(--accent-ct);
}
.bf-sys-card b { display: block; font-size: var(--fs-md); }
.bf-sys-card span { font-size: var(--fs-xs); opacity: 0.85; }
.bf-sys-desc { font-size: var(--fs-sm); color: var(--t-soft); margin: 0 0 var(--sp-2); }
.bf-sys-arrow { text-align: center; color: var(--t-faint); }

.hrv-visual { margin: var(--sp-4) 0; }
.hrv-labels { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--t-soft); margin-bottom: 6px; }
.hrv-labels .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.hrv-labels .stress .dot { background: #e07878; }
.hrv-labels .coh .dot { background: var(--accent); }

.newsletter-form { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.newsletter-form input[type=text], .newsletter-form input[type=email] {
  padding: 13px 16px; border-radius: var(--r-sm);
  background: var(--glass-2); border: 1px solid var(--glass-bd);
  color: var(--t); font-size: var(--fs-md); outline: none; width: 100%;
}
.newsletter-form label.consent { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-xs); color: var(--t-faint); line-height: 1.5; }

/* ══════════════ ATMEN — DESKTOP ══════════════
   Der Orb bekommt den ersten Bildschirm für sich, mittig und ruhig.
   Darunter liegen alle Regler nebeneinander — eine Seite, ein Scroll. */
@media (min-width: 900px) {
  .breathe-grid { gap: 0; }

  .hero-col {
    display: grid; place-items: center;
    min-height: calc(100dvh - var(--topbar-h) - var(--sp-6));
    padding-bottom: var(--sp-6);
  }
  .hero { gap: var(--sp-4); }
  .orb-stage { width: clamp(260px, 34vh, 340px); height: clamp(260px, 34vh, 340px); }
  body.ring-on .orb-stage { width: clamp(300px, 40vh, 400px); height: clamp(300px, 40vh, 400px); }
  .live-stats { max-width: 620px; }

  /* Sanfter Hinweis, dass unter dem Orb noch etwas kommt */
  .hero-col::after {
    content: '';
    width: 1px; height: 42px; margin-top: var(--sp-5);
    background: linear-gradient(to bottom, var(--glass-bd), transparent);
  }
  body.running .hero-col::after { display: none; }

  /* Eine Spalte, zentriert — alle Sektionen liegen unter den drei Tabs. */
  .deck {
    width: 100%; max-width: 680px; margin: 0 auto;
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding-bottom: var(--sp-6);
  }
  .deck > * { margin-bottom: 0; }


  #panel-rounds .stepper-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #panel-rounds .stepper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1500px) {
  .deck { max-width: 760px; }
}

/* ── Verkettete Sessions ──
   Zwei fertige Sessions hintereinander. Sie bekommen eine eigene Reihe unter
   den Vorlagen, damit klar ist: hier läuft mehr als eine Übung. */
.session-sep {
  grid-column: 1 / -1;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--t-faint);
}
.session-row--chain {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--glass-bd));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 7%, transparent), transparent);
}
.session-row--chain .session-pin { color: var(--accent); }

/* Die gesetzten Umbrüche gelten nur auf dem Handy — auf PC ist die Kachel
   breit genug, dort darf der Name normal fließen. Getrennt wird nie mitten
   im Wort, „Re-connect" liest sich wie ein Fehler. */
.session-row--chain .session-name { hyphens: none; }
.m-br { display: none; }
@media (max-width: 899px) { .m-br { display: inline; } }