/* =============================================================
   Kursmodus v2 — Redesign (Zen Focus)
   Scoped via .km-root — safe to coexist with other styles
   ============================================================= */

/* Extra tokens not in app.css :root */
:root{
  --teal-2:#63b68f;
  --teal-soft:#e6f2ed;
  --bg-2:#eef4ef;
  --sur-muted:#f1f5f2;
  --brd-strong:rgba(47,133,90,.22);
  --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:22px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(26,32,44,.04), 0 8px 24px rgba(26,32,44,.06);
  --shadow-2:0 20px 50px rgba(26,32,44,.14), 0 4px 14px rgba(47,133,90,.08);
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
  --touch:44px;
}
[data-theme="dark"]{
  --teal-2:#8fd4b3;
  --teal-soft:rgba(99,182,143,.14);
  --sur-muted:#222d3c;
  --bg-2:#121924;
  --brd-strong:rgba(99,182,143,.22);
  --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
  --shadow-2:0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(99,182,143,.08);
}

/* Body lockdown when Kursmodus active — overscroll-behavior verhindert Bounce-/Chain-Scroll */
body.playback-open{overflow:hidden; overscroll-behavior:none}
html.playback-open{overflow:hidden; overscroll-behavior:none}

/* Kursmodus Overlay Root — covers viewport when active */
#playbackDock.km-root{
  position:fixed !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:100vw; height:100vh; height:100dvh;
  z-index:500;
  display:none;
  flex-direction:column;
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-size:14.5px; line-height:1.5; color:var(--tx);
  background:
    radial-gradient(1000px 600px at 85% -10%, var(--teal-soft), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--teal-soft), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  margin:0; padding:0;
}
#playbackDock.km-root.is-active{display:flex !important}
#playbackDock.km-root:not(.is-active){display:none !important}
[data-theme="dark"] .km-root{
  background:
    radial-gradient(1200px 700px at 90% -20%, rgba(99,182,143,.1), transparent 60%),
    radial-gradient(900px 600px at -10% 120%, rgba(99,182,143,.07), transparent 60%),
    linear-gradient(180deg, #0a0f15, #0d1218 60%);
}
.km-root button{font-family:inherit}

/* =============================================================
   Preview-CSS (unchanged, applies inside .km-root context)
   ============================================================= */

/* ============ Tokens ============ */

/* ============ Chips & Buttons ============ */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; font-size:11.5px; font-weight:500; line-height:1.2;
  border-radius:var(--r-pill);
  background:var(--sur-muted); color:var(--tx);
  border:1px solid var(--brd); white-space:nowrap;
}
.chip svg{width:12px; height:12px; opacity:.7; flex-shrink:0}
.chip--teal{background:var(--teal-soft); color:var(--teal); border-color:transparent}
.chip--ghost{background:transparent; color:var(--mu); border-color:var(--brd)}

.btn-icon{
  width:var(--touch); height:var(--touch); min-width:var(--touch); min-height:var(--touch);
  border-radius:var(--r-pill); border:1px solid var(--brd);
  background:transparent; color:var(--tx);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s;
}
.btn-icon:hover{border-color:var(--teal); color:var(--teal); background:var(--teal-soft)}
.btn-icon:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.btn-icon svg{width:18px; height:18px}
.btn-icon.is-muted{opacity:.55}
.btn-icon.is-primary{
  width:52px; height:52px;
  background:linear-gradient(135deg, var(--teal), var(--teal-2));
  border-color:transparent; color:#fff;
  box-shadow:0 8px 22px rgba(47,133,90,.28);
}
.btn-icon.is-primary:hover{transform:scale(1.04)}
.btn-icon.is-primary svg{width:20px; height:20px}

/* ============ Chrome ============ */
.chrome{
  position:fixed; top:calc(var(--s-2) + env(safe-area-inset-top));
  right:var(--s-2); z-index:200;
  display:flex; align-items:center; gap:var(--s-2);
}
.chrome-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; background:var(--sur); border:1px solid var(--brd);
  border-radius:var(--r-pill); box-shadow:var(--shadow-1);
  font-size:11px; color:var(--mu);
}
.chrome-badge .dot{width:7px; height:7px; border-radius:var(--r-pill); background:var(--teal)}
.chrome-badge .b{color:var(--tx); font-weight:600}
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  background:var(--sur); border:1px solid var(--brd);
  border-radius:var(--r-pill); box-shadow:var(--shadow-1);
  font-size:11px; cursor:pointer; color:var(--tx);
}
.theme-toggle:hover{border-color:var(--teal); color:var(--teal)}
.theme-toggle svg{width:14px; height:14px}

/* ============ Stage ============ */
.stage{
  flex:1; min-height:0;
  display:grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap:var(--s-2);
  padding: calc(var(--s-2) + env(safe-area-inset-top)) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom));
  /* width:min(...) ist robuster als max-width im Flex-column-Parent (WebKit-Bug: max-width auf flex-child mit flex:1 greift dort nicht zuverlässig) */
  width:min(100%, 1280px);
  margin:0 auto;
  align-self:center;
  overflow:hidden;
}

/* ============ Top (einzeilig auf Mobile) ============ */
.top{
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--s-3); padding-right:80px;
  min-height:36px;
}
.top-main{min-width:0; flex:1; display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap}
.kicker{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); font-weight:700;
  display:flex; align-items:center; gap:6px;
  flex-shrink:0;
}
.kicker .dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--teal);animation:pulse 2s ease-in-out infinite}
.seq-title{
  font-family:'Lora',serif; font-weight:500;
  font-size:clamp(15px, 3.5vw, 20px); line-height:1.2;
  margin:0; letter-spacing:-.01em; color:var(--tx);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0;
}
.seq-title em{font-style:italic; color:var(--teal); font-weight:400}
.seq-meta-line{
  font-size:11px; color:var(--mu);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex-shrink:0;
}
.seq-meta-line b{color:var(--tx); font-weight:600}
@media (max-width:559px){
  .seq-meta-line{display:none}
  .kicker{display:none}
}

/* ============ Timeline-Wrap mit Overview-Button ============ */
.timeline-wrap{
  display:flex; align-items:center; gap:var(--s-2);
}
.overview-btn{
  flex-shrink:0;
  width:36px; height:30px; border-radius:var(--r-xs);
  background:var(--sur); border:1px solid var(--brd);
  color:var(--mu); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .18s;
}
.overview-btn:hover{color:var(--teal); border-color:var(--teal)}
.overview-btn:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.overview-btn svg{width:15px; height:15px}

/* ============ Timeline ============ */
.timeline{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:3px;
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  padding:4px 0; min-height:0;
}
.timeline::-webkit-scrollbar{display:none}
.tl-step{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:pointer; min-width:36px; padding:4px 2px;
  background:transparent; border:none; border-radius:8px;
  transition:background .2s; scroll-snap-align:center;
}
.tl-step:hover{background:var(--teal-soft)}
.tl-step:focus-visible{outline:2px solid var(--teal); outline-offset:1px}
.tl-bar{
  width:26px; height:3px; border-radius:var(--r-pill); background:var(--brd);
  transition:background .3s, height .3s, box-shadow .3s;
}
.tl-step.is-done .tl-bar{background:var(--teal)}
.tl-step.is-current .tl-bar{
  background:linear-gradient(90deg, var(--teal), var(--teal-2));
  height:5px; box-shadow:0 0 0 3px var(--teal-soft);
}
.tl-num{font-size:9.5px; color:var(--mu); font-variant-numeric:tabular-nums}
.tl-step.is-current .tl-num{color:var(--teal); font-weight:700}
.tl-step.is-done .tl-num{color:var(--tx)}

/* ============================================================
   Main Pane — Mobile-First:
   Row 1 (hero 1fr): Foto komplett, Timer+Progress am unteren Rand
   Row 2 (info auto): Pose-Name, Sanskrit · Gruppe · Wirkung
   Row 3 (hints auto): 3 Cues
   ============================================================ */
.main-pane{
  min-height:0;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto minmax(0, 1fr) auto;
  grid-template-areas:
    "info"
    "hero"
    "hints";
  gap:var(--s-2);
  overflow:hidden;
}
.info-card{grid-area:info}
.photo-card{grid-area:hero; z-index:1}
.hints-card{grid-area:hints}
.timer-block{display:none}  /* Mobile: Timer steckt auf dem Foto */

/* ---- Photo Card (Mobile-Hero) ---- */
.photo-card{
  position:relative; overflow:hidden;
  background:var(--sur); border:1px solid var(--brd);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:0;
}
.photo-thumb{
  position:relative;
  width:100%; height:100%;
  border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(135deg, #e8f0e9, #dceee4);
}
[data-theme="dark"] .photo-thumb{background:linear-gradient(135deg, #1c2b22, #162019)}

/* Blurred background — füllt jede Aspect-Ratio */
.photo-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:blur(24px) saturate(1.15);
  transform:scale(1.2);
  z-index:0;
}
/* Foreground image — immer komplett sichtbar, nie beschnitten */
.photo-thumb img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; display:block;
  z-index:1;
}
/* Placeholder wenn kein Bild — zentrierte Yoga-Silhouette via Flex */
.photo-thumb.no-img{
  display:flex; align-items:center; justify-content:center;
}
.photo-thumb.no-img::before{
  content:'';
  width:min(40%, 180px);
  aspect-ratio:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%232F855A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='50' cy='20' r='8' fill='%232F855A' stroke='none'/><path d='M42 38 Q 50 32 58 38' stroke-width='2.2'/><path d='M50 32 L 50 60' stroke-width='2.2'/><path d='M37 46 Q 32 58 30 72' stroke-width='2'/><path d='M63 46 Q 68 58 70 72' stroke-width='2'/><path d='M24 82 C 28 68 40 62 50 62 C 60 62 72 68 76 82 Z' fill='%232F855A' fill-opacity='.15' stroke-width='2.2'/></svg>");
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.35;
  z-index:1;
  pointer-events:none;
}
/* Dunkler Gradient nur am UNTEREN Rand — für Timer-Lesbarkeit */
.photo-thumb::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:45%;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 100%);
  z-index:2; pointer-events:none;
}

/* Step pill — nur Desktop (Mobile: Timeline oben zeigt Schritt) */
.photo-step-pill{
  position:absolute; top:12px; left:12px; z-index:4;
  padding:5px 11px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.95); color:var(--teal);
  font-size:11px; font-weight:700; letter-spacing:.04em;
  backdrop-filter:blur(6px);
  display:none;  /* Mobile: ausgeblendet */
}

/* Progress-Leiste am unteren Bildrand */
.photo-progress{
  position:absolute; left:0; right:0; bottom:0; height:5px;
  background:rgba(255,255,255,.2);
  z-index:4; overflow:hidden;
}
.photo-progress-fill{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--teal), var(--teal-2));
  box-shadow:0 0 12px rgba(99,182,143,.7);
  transition:width .8s linear;
}

/* Footer: nur noch Timer, rechtsbündig */
.photo-footer{
  position:absolute; right:18px; bottom:16px;
  z-index:4; pointer-events:none;
}

/* Timer-Column (unten rechts) */
.photo-timer{
  display:flex; flex-direction:column; align-items:flex-end;
  text-align:right; line-height:1;
  flex-shrink:0;
}
.photo-timer-time{
  font-family:'Lora',serif; font-weight:500;
  font-size:clamp(52px, 15vw, 76px); line-height:.85;
  color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.03em;
  text-shadow:0 3px 24px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.4);
}
.photo-timer-label{
  font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.78); font-weight:600;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
  margin-top:4px;
}

/* Effects (Wirkung) — unten LINKS, groß, mehrere stacken vertikal */
.photo-effects{
  position:absolute; left:18px; bottom:32px; z-index:4;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:6px;
  max-width:55%; pointer-events:none;
}
.photo-effect{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'DM Sans',sans-serif; font-weight:600;
  font-size:clamp(14px, 4vw, 18px); line-height:1.2;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.5);
  letter-spacing:.01em;
}
.photo-effect svg{width:14px; height:14px; opacity:.9; flex-shrink:0}

/* Side-Chip oben RECHTS (über der Uhr) */
.photo-side-chip{
  position:absolute; top:14px; right:14px; z-index:4;
  padding:6px 13px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.95); color:var(--teal);
  font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  backdrop-filter:blur(6px);
  animation:sideIn .35s ease both;
}
.photo-side-chip:empty{display:none}
[data-theme="dark"] .photo-side-chip{background:rgba(10,14,20,.85); color:var(--teal-2)}
[data-theme="dark"] .photo-step-pill{background:rgba(10,14,20,.85); color:var(--teal-2)}

/* --- Info card (Name + Sanskrit) - Mobile: unter Foto --- */
.info-card{
  background:var(--sur); border:1px solid var(--brd);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:var(--s-3) var(--s-4);
  display:flex; flex-direction:column; gap:2px;
  min-width:0; overflow:hidden;
  justify-content:center;
}
.info-kicker{
  display:none;  /* auf Mobile unnötig — Kontext ist klar */
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mu); font-weight:600;
}
.info-name{
  font-family:'Lora',serif; font-weight:500;
  font-size:clamp(18px, 5vw, 24px); line-height:1.15;
  color:var(--tx); margin:0; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.info-sanskrit{
  font-family:'Lora',serif; font-style:italic;
  color:var(--teal); font-size:13.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.info-meta{display:none}  /* Mobile: Meta ausblenden */

/* Hints Card — Cues als Stichpunkte (NIE scrollen) */
.hints-card{
  background:var(--sur); border:1px solid var(--brd);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:var(--s-3) var(--s-4);
  display:flex; flex-direction:column; gap:var(--s-2);
  min-height:0; overflow:hidden;
}
.hints-label{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal); font-weight:700;
  display:flex; align-items:center; gap:6px;
  flex-shrink:0;
}
.hints-label svg{width:12px;height:12px}
.cues{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px;
  overflow:hidden; min-height:0;
}
.cues li{
  font-size:15.5px; line-height:1.4; color:var(--tx);
  padding-left:22px; position:relative;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
}
.cues li::before{
  content:''; position:absolute;
  left:4px; top:.55em;
  width:8px; height:8px; border-radius:var(--r-pill);
  background:var(--teal);
}
/* Sprech-Cue wird hervorgehoben (größer, teal, bold) */
.cues li.is-cue-say{
  color:var(--teal); font-style:italic; font-weight:600;
  font-size:16.5px;
}
.cues li.is-cue-say::before{
  background:var(--teal-2);
  box-shadow:0 0 0 4px var(--teal-soft);
  width:8px; height:8px;
}

/* Mobile: max 3 cues sichtbar */
.cues li:nth-child(n+4){display:none}

/* --- Timer Block (nur Desktop) --- */
.timer-block{
  border-radius:var(--r-lg);
  padding:var(--s-3);
  flex-direction:column; align-items:center;
  justify-content:center;
  gap:var(--s-2);
  min-height:0;
  position:relative;
}

/* Mobile default: externe side-labels + tracker hidden, ring-side drinnen sichtbar */
.side-header{display:none}
.side-big{display:none}
.phase-tracker{display:none}

.side-header{
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mu); font-weight:600; text-align:center;
}
.side-big{
  font-family:'DM Sans',sans-serif; font-weight:700;
  font-size:clamp(22px, 5vw, 42px); line-height:1;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--teal);
  text-align:center;
  animation:sideIn .35s ease both;
}
@keyframes sideIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.side-big.is-single{color:var(--tx); letter-spacing:.01em; text-transform:none; font-family:'Lora',serif; font-weight:500; font-size:clamp(18px, 4vw, 28px)}

.ring-wrap{
  position:relative;
  width:min(220px, 52vw, 38vh);
  aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ring-wrap::before{
  content:''; position:absolute; inset:-6%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 45%, transparent 70%);
  z-index:0; pointer-events:none;
}
.ring-breath{
  position:absolute; inset:8px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0%, transparent 65%);
  animation:breath 8s ease-in-out infinite;
  z-index:0;
}
@keyframes breath{0%,100%{transform:scale(.92); opacity:.5} 50%{transform:scale(1.05); opacity:.9}}
.ring-svg{position:relative; width:100%; height:100%; transform:rotate(-90deg); z-index:1}
.ring-track{stroke:rgba(255,255,255,.35); stroke-width:5; fill:none}
.ring-prog{
  stroke:url(#ringGrad); stroke-width:7; fill:none; stroke-linecap:round;
  transition:stroke-dashoffset .6s ease;
  filter:drop-shadow(0 0 8px rgba(99,182,143,.6));
}
.ring-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  text-align:center; padding:0 var(--s-3); z-index:2;
}
.ring-side{
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; font-weight:700;
  line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  animation:sideIn .35s ease both;
}
.ring-side:empty{display:none}
.ring-time{
  font-family:'Lora',serif; font-weight:500;
  font-size:clamp(40px, 12vw, 64px); line-height:1;
  color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  text-shadow:0 2px 16px rgba(0,0,0,.55);
}
.ring-label{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.85); font-weight:600;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* Phase tracker (Seiten-Fortschritt) */
.phase-tracker{
  display:flex; flex-wrap:nowrap; gap:4px;
  justify-content:center;
  width:100%;
}
.phase-slot{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  padding:4px 8px; border-radius:var(--r-pill);
  background:var(--sur-muted); border:1px solid var(--brd);
  font-size:10.5px; color:var(--mu);
  transition:all .3s ease;
  gap:6px;
  text-align:center;
}
.phase-slot .slot-side{
  font-weight:700; font-size:11px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--tx);
}
.phase-slot .slot-time{
  font-variant-numeric:tabular-nums; font-size:10.5px;
}
.phase-slot.is-done{background:var(--teal-soft); border-color:transparent; opacity:.65}
.phase-slot.is-done .slot-side{color:var(--teal)}
.phase-slot.is-current{
  background:linear-gradient(135deg, var(--teal), var(--teal-2));
  border-color:transparent;
  color:#fff;
  box-shadow:0 4px 12px rgba(47,133,90,.28);
}
.phase-slot.is-current .slot-side{color:#fff}
.phase-slot.is-current .slot-time{color:rgba(255,255,255,.9)}

.next-phase-hint{display:none}

/* ============ Next row — mit Teal-Akzent prominent ============ */
.next-row{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-2) var(--s-3);
  border-radius:var(--r-pill);
  background:var(--teal-soft);
  border:1px solid var(--brd-strong);
  text-decoration:none; color:inherit;
  transition:all .22s ease;
  cursor:pointer; min-width:0;
  position:relative; overflow:hidden;
}
.next-row:hover{
  background:rgba(99,182,143,.16);
  transform:translateY(-1px);
}
.next-row:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.next-row .nr-thumb{
  width:32px; height:32px; border-radius:var(--r-xs); overflow:hidden;
  background:linear-gradient(135deg, #e8f0e9, #dceee4); flex-shrink:0;
  border:1px solid var(--teal);
}
[data-theme="dark"] .next-row .nr-thumb{background:#1c2b22}
.next-row .nr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.next-row .nr-text{flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; gap:1px}
.next-row .nr-kicker{
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); font-weight:700;
}
.next-row .nr-name{
  font-family:'Lora',serif; font-size:13.5px; font-weight:500;
  color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.next-row .nr-arrow{
  width:26px; height:26px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  background:var(--teal);
  color:#fff; flex-shrink:0;
}
.next-row .nr-arrow svg{width:13px; height:13px}
.next-row:hover .nr-arrow{transform:translateX(2px)}

/* ============ Controls ============ */
.controls{display:flex; justify-content:center}
.controls-inner{
  display:flex; align-items:center; gap:var(--s-2);
  padding:6px;
  background:var(--sur); border:1px solid var(--brd);
  border-radius:var(--r-pill); box-shadow:var(--shadow-2);
  max-width:100%;
}
.controls-inner .btn-icon{width:40px; height:40px}
.controls-inner .btn-icon.is-primary{width:50px; height:50px}
.ctl-sep{width:1px; height:22px; background:var(--brd); flex-shrink:0; margin:0 var(--s-1); display:none}
.ctl-label{padding:0 var(--s-2); font-size:11.5px; color:var(--mu); font-variant-numeric:tabular-nums; white-space:nowrap; display:none}
.ctl-label strong{color:var(--tx); font-family:'Lora',serif; font-size:13.5px}

/* ============ Breakpoints ============ */
@media (min-width:560px){
  .stage{padding-left:var(--s-5); padding-right:var(--s-5); gap:var(--s-3)}
  .main-pane{gap:var(--s-3)}
  .tl-bar{width:34px}
  .tl-step{min-width:44px}
  .controls-inner{gap:var(--s-2); padding:var(--s-2)}
  .controls-inner .btn-icon{width:44px; height:44px}
  .controls-inner .btn-icon.is-primary{width:54px; height:54px}
  .ctl-sep, .ctl-label{display:flex}
  .ctl-sep{display:block}
  .cues li{font-size:14px}
  .ring-wrap{width:min(180px, 40vw, 34vh)}
  .side-big{font-size:clamp(26px, 5.5vw, 42px)}
  .ring-time{font-size:clamp(32px, 7vw, 52px)}
}

/* Desktop: 3-Spalten (Foto · Name+Cues · Timer) */
@media (min-width:900px){
  .stage{
    gap:var(--s-4);
    padding:calc(var(--s-5) + env(safe-area-inset-top)) var(--s-6) calc(var(--s-5) + env(safe-area-inset-bottom));
  }
  .main-pane{
    /* Photo-Spalte fix begrenzen (WebKit berechnet `auto` Tracks aggressiver als Firefox und drueckt sonst Timer raus). Timer-Spalte minmax-min auf 0 fuer mehr Spielraum bei mittelbreiten Viewports. */
    grid-template-columns: minmax(0, 232px) minmax(0, 1fr) minmax(280px, 380px);
    grid-template-rows:auto 1fr;
    grid-template-areas:
      "photo info  timer"
      "photo hints timer";
    gap:var(--s-4);
  }
  .photo-card{
    grid-area:photo; padding:var(--s-4); z-index:auto;
    display:flex; align-items:center; justify-content:center;
  }
  .photo-card .photo-thumb{
    width:clamp(160px, 16vw, 200px); height:auto;
    aspect-ratio:1; border-radius:var(--r-md);
    border:1px solid var(--brd);
    flex-shrink:0;
  }
  .photo-thumb::after{display:none}
  .photo-effects{display:none}
  .photo-side-chip{display:none}
  .photo-footer{display:none}
  .photo-progress{display:none}
  .timer-block{display:flex}
  .info-card{
    grid-area:info;
    padding:var(--s-4) var(--s-5); gap:var(--s-2);
  }
  .info-card .info-name{white-space:normal}
  .info-card .info-sanskrit{white-space:normal}
  .info-card .info-kicker{display:block}
  .hints-card{grid-area:hints; padding:var(--s-4) var(--s-5); gap:var(--s-3)}
  .timer-block{
    grid-area:timer; padding:var(--s-5);
    background:var(--sur); border:1px solid var(--brd); box-shadow:var(--shadow-1);
    backdrop-filter:none; -webkit-backdrop-filter:none;
    align-self:stretch; justify-self:stretch;
    min-width:0;
  }
  [data-theme="dark"] .timer-block{background:var(--sur); border-color:var(--brd)}
  .info-name{font-size:clamp(22px, 2vw, 28px)}
  .info-sanskrit{font-size:15px}
  .info-meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
  .info-meta .chip{padding:5px 10px; font-size:11.5px}
  .info-meta .chip svg{width:12px; height:12px}
  .ring-side{display:none}  /* Desktop: nicht innen, sondern als side-big drüber */
  .cues{gap:var(--s-2)}
  .cues li{font-size:15px; line-height:1.4; padding-left:20px}
  .cues li::before{width:7px; height:7px; left:5px}
  .cues li:nth-child(n+4){display:-webkit-box}
  .cues li:nth-child(n+6){display:none}
  .tl-bar{width:40px}
  .tl-step{min-width:52px}
  .seq-title{font-size:clamp(19px, 1.8vw, 24px)}
  .controls-inner .btn-icon{width:46px; height:46px}
  .controls-inner .btn-icon.is-primary{width:58px; height:58px}
  .ring-wrap{width:min(220px, 22vw, 34vh)}
  .ring-wrap::before{display:none}  /* kein dunkler Halo auf Desktop */
  .ring-track{stroke:var(--brd); stroke-width:6}
  .ring-prog{stroke-width:8; filter:none}
  .ring-time{font-size:clamp(38px, 4vw, 54px); color:var(--tx); text-shadow:none}
  .ring-label{color:var(--mu); text-shadow:none}
  .side-big{font-size:clamp(30px, 3vw, 44px)}
  .side-header{display:block}
  .side-big{display:block}
  .phase-tracker{display:flex}
}

@media (min-width:1200px){
  .main-pane{grid-template-columns: minmax(0, 252px) minmax(0, 1fr) minmax(320px, 440px)}
  .photo-thumb{width:clamp(180px, 18vw, 220px)}
  .ring-wrap{width:min(240px, 22vw, 36vh)}
}

/* Landscape phones — 3 Bereiche: photo+info links, timer rechts, hints unten */
@media (max-width:899px) and (orientation:landscape) and (max-height:560px){
  .main-pane{
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto 1fr;
    grid-template-areas:
      "photo info  timer"
      "photo hints timer";
    gap:var(--s-2);
  }
  .ring-wrap{width:min(130px, 24vw, 40vh)}
  .photo-thumb{width:80px}
  .info-name{font-size:16px}
  .timer-block{padding:var(--s-3)}
  .cues li{font-size:12.5px; line-height:1.3}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
  .ring-prog{transition:none}
}

/* Shared pulse */
@keyframes pulse{
  0%,100%{opacity:.35; transform:scale(.8)}
  50%{opacity:1; transform:scale(1.2)}
}

/* ============================================================
   Bottom-Sheet: Sequenz-Übersicht
   ============================================================ */
.sheet-backdrop{
  position:fixed; inset:0; z-index:300;
  background:rgba(17,24,39,.4);
  backdrop-filter:blur(3px);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
.sheet-backdrop.is-open{opacity:1; pointer-events:auto}

.overview-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:301;
  max-height:min(82dvh, 720px);
  background:var(--sur);
  border-radius:24px 24px 0 0;
  border-top:1px solid var(--brd);
  box-shadow:0 -20px 60px rgba(0,0,0,.22);
  transform:translateY(105%);
  transition:transform .32s cubic-bezier(.32,.72,.28,1);
  display:flex; flex-direction:column;
  overflow:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}
.overview-sheet.is-open{transform:translateY(0)}

.sheet-handle{
  width:40px; height:4px; border-radius:var(--r-pill);
  background:var(--brd);
  margin:10px auto 2px;
  flex-shrink:0;
}

.sheet-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--s-3) var(--s-5) var(--s-3);
  flex-shrink:0;
  border-bottom:1px solid var(--brd);
}
.sheet-title{
  font-family:'Lora',serif; font-weight:500;
  font-size:18px; line-height:1.2; color:var(--tx);
}
.sheet-subtitle{
  font-size:12px; color:var(--mu); margin-top:2px;
}

.sheet-list{
  overflow-y:auto; flex:1;
  padding:var(--s-3) var(--s-4) var(--s-5);
  display:flex; flex-direction:column; gap:6px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;  /* kein Weiterschieben auf Body */
  touch-action:pan-y;
}
.sheet-list::-webkit-scrollbar{width:6px}
.sheet-list::-webkit-scrollbar-thumb{background:var(--brd); border-radius:var(--r-pill)}

.sheet-item{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-2) var(--s-3);
  border-radius:var(--r-sm);
  background:var(--sur-muted);
  border:1px solid var(--brd);
  cursor:pointer; text-align:left;
  font-family:inherit;
  transition:border-color .15s, background .15s, transform .15s;
  color:var(--tx);
}
.sheet-item:hover{border-color:var(--brd-strong); background:var(--bg-2)}
.sheet-item:focus-visible{outline:2px solid var(--teal); outline-offset:1px}
.sheet-item.is-current{
  background:var(--teal-soft);
  border-color:var(--teal);
  box-shadow:0 4px 14px rgba(47,133,90,.12);
}
.sheet-item.is-done{opacity:.55}
.sheet-item.is-done .sheet-item-thumb{filter:saturate(.5)}

.sheet-item-num{
  width:22px; flex-shrink:0;
  font-size:11px; font-weight:700; color:var(--mu);
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.sheet-item.is-current .sheet-item-num{color:var(--teal)}

.sheet-item-thumb{
  width:48px; height:48px; flex-shrink:0;
  border-radius:var(--r-xs); overflow:hidden;
  background:linear-gradient(135deg, #e8f0e9, #dceee4);
  position:relative;
}
[data-theme="dark"] .sheet-item-thumb{background:linear-gradient(135deg, #1c2b22, #162019)}
.sheet-item-thumb img{
  width:100%; height:100%; object-fit:contain; display:block;
}

.sheet-item-info{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:1px;
}
.sheet-item-name{
  font-family:'Lora',serif; font-weight:500;
  font-size:15px; color:var(--tx);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sheet-item-sanskrit{
  font-family:'Lora',serif; font-style:italic;
  font-size:12px; color:var(--teal);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.sheet-item-meta{
  flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  text-align:right;
}
.sheet-item-dur{
  font-size:12px; color:var(--tx); font-weight:600;
  font-variant-numeric:tabular-nums;
}
.sheet-item-side{
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal); font-weight:700;
}
.sheet-item.is-current .sheet-item-side{color:var(--teal)}

/* Desktop: sheet centered as modal */
@media (min-width:900px){
  .overview-sheet{
    left:50%; right:auto; bottom:auto; top:50%;
    transform:translate(-50%, -50%) scale(.95);
    opacity:0; pointer-events:none; visibility:hidden;
    max-width:560px; width:92vw;
    max-height:min(80vh, 720px);
    border-radius:var(--r-lg);
    border:1px solid var(--brd);
    transition:transform .24s cubic-bezier(.32,.72,.28,1),
               opacity .2s ease,
               visibility .2s ease;
  }
  .overview-sheet.is-open{
    transform:translate(-50%, -50%) scale(1);
    opacity:1; pointer-events:auto; visibility:visible;
  }
  .sheet-handle{display:none}
}


/* ============ Mobile-Polish (überschreibt alle früheren Regeln bis 899px) ============
   Trainer-Fokus: Hints-Bereich groß, Schrift gut lesbar beim Blick aus Abstand */
@media (max-width:899px){
  #playbackDock.km-root{
    overflow-x:hidden;
  }
  #playbackDock.km-root .stage,
  #playbackDock.km-root .top,
  #playbackDock.km-root .timeline-wrap,
  #playbackDock.km-root .main-pane,
  #playbackDock.km-root .photo-card,
  #playbackDock.km-root .info-card,
  #playbackDock.km-root .hints-card,
  #playbackDock.km-root .next-row,
  #playbackDock.km-root .controls{
    max-width:100%;
    min-width:0;
  }

  #playbackDock.km-root .stage{
    padding:calc(var(--s-2) + env(safe-area-inset-top)) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom));
    gap:8px;
  }

  /* Main-Pane: Photo kompakt, Hints prominent (Content-Driven, nicht Leerraum) */
  #playbackDock.km-root .main-pane{
    grid-template-rows: auto minmax(160px, 1fr) auto !important;
    grid-template-areas:
      "info"
      "hero"
      "hints" !important;
    gap:8px;
  }

  #playbackDock.km-root .top{padding-right:52px; min-height:30px}
  #playbackDock.km-root .seq-title{font-size:clamp(14px, 3.6vw, 17px)}
  #playbackDock.km-root .kicker{display:none}
  #playbackDock.km-root .seq-meta-line{display:none}
  #playbackDock.km-root .timeline{padding:2px 0}
  #playbackDock.km-root .tl-bar{width:22px; height:3px}
  #playbackDock.km-root .tl-step.is-current .tl-bar{height:5px}
  #playbackDock.km-root .tl-num{font-size:9px}
  #playbackDock.km-root .tl-step{min-width:30px}
  #playbackDock.km-root .overview-btn{width:32px; height:26px}
  #playbackDock.km-root .overview-btn svg{width:13px; height:13px}

  /* Info-Card kompakt (nur Name + Sanskrit) */
  #playbackDock.km-root .info-card{padding:10px 16px; gap:2px}
  #playbackDock.km-root .info-kicker{display:none}
  #playbackDock.km-root .info-meta{display:none}
  #playbackDock.km-root .info-name{
    font-size:clamp(17px, 4.4vw, 22px); line-height:1.2;
    white-space:normal; overflow:visible; text-overflow:clip;
    overflow-wrap:anywhere; hyphens:auto;
  }
  #playbackDock.km-root .info-sanskrit{
    font-size:12.5px;
    white-space:normal; overflow:visible; text-overflow:clip;
  }

  /* Photo: kompakter — gibt Hints Raum */
  #playbackDock.km-root .photo-card{min-height:0}

  /* HINTS-CARD: dominant für den Trainer-Blick */
  #playbackDock.km-root .hints-card{
    padding:14px 16px 12px;
    display:flex; flex-direction:column;
    gap:8px;
    overflow:hidden;
    min-height:0;
  }
  #playbackDock.km-root .hints-label{
    font-size:10.5px; letter-spacing:.14em;
    margin-bottom:2px; font-weight:700; color:var(--teal);
    display:flex; align-items:center; gap:6px;
    flex-shrink:0;
  }
  #playbackDock.km-root .cues{
    gap:8px; overflow:hidden;
    display:flex; flex-direction:column;
  }
  #playbackDock.km-root .cues li{
    font-size:clamp(14.5px, 4vw, 17px);
    line-height:1.4;
    padding-left:20px;
    font-weight:500;
    color:var(--tx);
    -webkit-line-clamp:unset;
    line-clamp:unset;
    display:list-item;
    overflow:visible;
  }
  #playbackDock.km-root .cues li::before{
    width:7px; height:7px; left:4px; top:.55em;
    background:var(--teal);
  }
  #playbackDock.km-root .cues li.is-cue-say{
    color:var(--teal); font-style:italic; font-weight:600;
    font-size:clamp(15px, 4.2vw, 18px);
  }
  #playbackDock.km-root .cues li.is-cue-say::before{
    background:var(--teal-2); box-shadow:0 0 0 4px var(--teal-soft);
    width:7px; height:7px;
  }
  #playbackDock.km-root .cues li:nth-child(n+5){display:none}  /* max 4 cues */

  /* Kompakte Next-Row + Controls */
  #playbackDock.km-root .next-row{
    width:100%;
    padding:6px 10px;
    border-radius:var(--r-lg);
  }
  #playbackDock.km-root .next-row .nr-name{font-size:12.5px}
  #playbackDock.km-root .next-row .nr-kicker{font-size:9px}
  #playbackDock.km-root .next-row .nr-thumb{width:28px; height:28px}
  #playbackDock.km-root .next-row .nr-arrow{width:24px; height:24px}
  #playbackDock.km-root .controls-inner{padding:4px; gap:3px}
  #playbackDock.km-root .controls-inner .btn-icon{width:36px; height:36px; min-width:36px; min-height:36px}
  #playbackDock.km-root .controls-inner .btn-icon.is-primary{width:44px; height:44px; min-width:44px; min-height:44px}
  #playbackDock.km-root .controls-inner .btn-icon svg{width:15px; height:15px}
  #playbackDock.km-root .controls-inner .btn-icon.is-primary svg{width:17px; height:17px}
  #playbackDock.km-root .ctl-sep,
  #playbackDock.km-root .ctl-label{display:none !important}
  #playbackDock.km-root .timer-block{display:none !important}
  /* Sehr schmale Viewports: noch kleinere Buttons */
  @media (max-width:400px){
    #playbackDock.km-root .controls-inner .btn-icon{width:32px; height:32px; min-width:32px; min-height:32px}
    #playbackDock.km-root .controls-inner .btn-icon.is-primary{width:40px; height:40px; min-width:40px; min-height:40px}
    #playbackDock.km-root .controls-inner{padding:3px; gap:2px}
    #playbackDock.km-root .next-row .nr-arrow{display:none}
    #playbackDock.km-root .photo-effects{max-width:calc(100% - 132px)}
  }

  /* Foto-Overlays kompakt */
  #playbackDock.km-root .photo-footer{
    right:10px;
    bottom:14px;
    max-width:calc(100% - 20px);
  }
  #playbackDock.km-root .photo-timer-time{font-size:clamp(30px, 8.5vw, 42px); line-height:.9; letter-spacing:-.02em}
  #playbackDock.km-root .photo-timer-label{font-size:8.5px}
  #playbackDock.km-root .photo-side-chip{top:8px; right:8px; padding:4px 9px; font-size:10.5px}
  #playbackDock.km-root .photo-effects{left:10px; bottom:28px; gap:4px; max-width:calc(100% - 150px)}
  #playbackDock.km-root .photo-effect{max-width:100%; font-size:clamp(11px, 3vw, 13px); overflow-wrap:anywhere}
  #playbackDock.km-root .photo-progress{height:4px}
}