:root{--ink:#262638;--muted:#605d66;--paper:#f8f5ef;--panel:#fffcf7;--line:#e7ded3;--accent:#9a4a38;--night:#252a3d;--peach:#f8ece4;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,select{font:inherit}button,summary,select{cursor:pointer}button:disabled{cursor:wait;opacity:.65}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #af5e49;outline-offset:4px}[hidden]{display:none!important}.shell{width:min(1170px,calc(100% - 72px));margin:auto}.top{border-bottom:1px solid var(--line);background:#fbf8f2}.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-family:Georgia,serif;font-size:24px;white-space:nowrap}.brand img{width:43px}.brand i{font-weight:400}.brand small{display:block;font:700 9px/1.4 system-ui,sans-serif;letter-spacing:.18em;color:var(--muted);margin-top:3px}.nav nav{display:flex;gap:27px;font-size:.88rem;color:var(--muted)}.nav nav a:first-child{color:var(--accent);font-weight:700}.nav a:hover,.footer a:hover{color:var(--accent)}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;min-height:44px;border:1px solid transparent;border-radius:9px;font-weight:650;font-size:.85rem;white-space:nowrap}.outline{background:var(--panel);border-color:var(--line);color:var(--ink)}.outline:hover,.choice:hover{background:#fbf0e6;border-color:#d9af9b}.primary{background:var(--night);color:#fff}.primary:hover{background:#3a4059}.icon{padding:0;width:44px;font-size:1.4rem}.intro{padding:43px 0 33px;display:flex;justify-content:space-between;align-items:center;gap:12px}.eyebrow{margin:0 0 7px;font-size:.68rem;font-weight:750;letter-spacing:.16em;color:var(--accent)}.intro .eyebrow span{display:inline-block;width:18px;border-top:1px solid;margin-right:7px;vertical-align:middle}h1,h2,p{margin:0}h1,h2{font-family:Georgia,serif;font-weight:400}h1{font-size:clamp(2.35rem,5.9vw,4rem);line-height:1.04;letter-spacing:-.047em}h1 em{color:var(--accent);font-weight:400}.intro p:last-child{color:var(--muted);margin-top:13px}.seal{border:1px solid #dcb19f;border-radius:10px;color:#995c48;font:1.35rem/1.05 Georgia,serif;transform:rotate(8deg);padding:8px 10px;background:#f7eee5;margin-right:11px}.training{display:grid;grid-template-columns:1.6fr 1fr;gap:19px;align-items:start}.panel{border:1px solid var(--line);background:var(--panel);border-radius:16px;min-width:0;box-shadow:0 8px 22px #38253a08}.stage,.mirror{padding:16px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:9px;padding:1px 2px 13px}.panel-head h2{font-size:1.85rem;letter-spacing:-.025em}.badge{display:inline-flex;align-items:center;gap:6px;border-radius:100px;background:#f3ebe2;color:#6a5148;padding:6px 10px;white-space:nowrap;font-size:.72rem;font-weight:650}.badge i,.stage-label i{width:6px;height:6px;background:#987a73;display:inline-block;border-radius:50%}.badge.active i{background:#387c64}.scene,.camera{position:relative;isolation:isolate;overflow:hidden;border-radius:11px;height:clamp(245px,29vw,337px)}.scene{background:#343c53}.landscape,.scene canvas,.camera video,.camera canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.stage-label,.view-label{position:absolute;top:12px;left:12px;color:#fff;background:#151a2bc9;padding:6px 9px;border-radius:6px;font-size:.64rem;letter-spacing:.1em}.stage-label i{background:#e3a68f;margin-right:4px}.view-label{top:auto;left:auto;bottom:11px;right:11px;letter-spacing:0}.transport,.cam-controls{display:flex;align-items:center;gap:8px;margin:12px 0}.time{display:flex;align-items:center;gap:9px;flex:1;min-width:37px}.time output{white-space:nowrap;font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums}progress{width:100%;height:7px;border:0;overflow:hidden;border-radius:7px;background:#ebe0d7;accent-color:#a65e49}progress::-webkit-progress-bar{background:#ebe0d7}progress::-webkit-progress-value{background:#a65e49}progress::-moz-progress-bar{background:#a65e49}.speed select{max-width:100%;min-height:44px;padding:4px 6px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--panel);font-size:.78rem}.cue,.feedback{background:var(--peach);border-radius:10px;padding:11px 12px;min-height:66px;display:flex;gap:10px;align-items:flex-start}.cue p,.feedback p,.privacy{font-size:.79rem;color:var(--muted);line-height:1.45}.cue strong,.feedback strong{display:block;font-size:.88rem;margin-bottom:3px}.cue-icon{color:var(--accent)}.camera{background:radial-gradient(ellipse at 50% 47%,#3e445a,#252a3e 75%);color:#f8eee7;display:grid;place-items:center}.camera:after{content:"";position:absolute;inset:14px;border:1px dashed #e8c0ad42;border-radius:10px;pointer-events:none}.camera.live:after{display:none}.cam-placeholder{padding:25px;text-align:center}.cam-placeholder p{font-size:.8rem;color:#dfd5dd;margin-top:7px}.camera-icon{margin:0 auto 12px;width:56px;height:56px;border-radius:15px;border:1px solid #a898a177;display:grid;place-items:center;color:#ebac94;background:#f3d1c116}.camera video,.camera canvas{object-fit:contain;transform:scaleX(-1)}.cam-controls{justify-content:space-between;flex-wrap:wrap}.toggle{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:650;cursor:pointer}.toggle input{accent-color:#944934;width:16px;height:16px}.feedback{display:block;background:#f3efe8}.privacy{font-size:.7rem;margin:8px 0 0 1px}.forms{margin:33px 0 29px}.section-title{display:flex;justify-content:space-between;gap:10px;align-items:end;margin-bottom:12px}.section-title h2,.help h2,dialog h2{font-size:2rem;letter-spacing:-.03em}.section-title>span{color:var(--muted);font-size:.78rem;padding-bottom:3px;text-align:right}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.choice{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);padding:12px;text-align:left}.choice[aria-pressed=true]{border-color:#bc7c65;background:var(--peach)}.choice .num{border-radius:7px;background:#f1e5da;color:var(--accent);padding:6px;font-size:.72rem;font-weight:750}.choice strong{display:block;font-size:.88rem}.choice small{color:var(--muted);font-size:.72rem}.arrow{color:var(--accent)}.help{padding:20px}.help h2{margin:0 0 11px}.help details{border-top:1px solid var(--line);padding:12px 2px;font-size:.88rem}.help summary{font-weight:650}.help details p{color:var(--muted);line-height:1.6;margin:8px 0 0;max-width:80ch}.footer{display:flex;justify-content:space-between;padding:24px 0 28px;color:var(--muted);font-size:.78rem}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);width:min(470px,calc(100% - 28px));padding:24px}dialog::backdrop{background:#181a2abc}dialog p:not(.eyebrow){margin:10px 0;line-height:1.5;color:var(--muted)}dialog .close{float:right}
.view-label{border:1px solid #c6abba70;font-family:inherit}.view-label:hover{background:#272e48}.help details a{text-decoration:underline;color:var(--accent)}
.positions-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:.82rem;font-weight:700;margin-top:10px;padding:6px 1px}.positions-link:hover{text-decoration:underline}#moveTitle{scroll-margin-top:14px}.positions{margin-top:22px;padding:18px}.positions-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}.positions-head h2{font-size:2rem;letter-spacing:-.03em}.positions-head p:last-child{margin-top:5px;font-size:.83rem;color:var(--muted)}.positions-head strong{color:var(--ink)}.position-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.position-card{display:flex;flex-direction:column;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--ink);text-align:left}.position-card:hover,.position-card[aria-pressed=true]{border-color:#bc7c65;background:var(--peach)}.position-art{display:flex;justify-content:center;position:relative;width:100%;height:188px;background:radial-gradient(ellipse at 50% 55%,#576078,#343a50 74%);border-bottom:1px solid #272c3f}.position-art canvas{display:block;max-width:100%;height:100%;object-fit:contain}.position-number{position:absolute;top:10px;left:10px;background:#1f2334;color:#fae4d7;padding:4px 7px;border-radius:6px;font-size:.69rem;font-weight:750}.position-caption{display:grid;gap:4px;padding:10px 11px 12px}.position-caption strong{font-size:.88rem}.position-caption small{font-size:.76rem;line-height:1.42;color:var(--muted)}

body {
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
button, select, summary, .nav a, .positions-link { touch-action: manipulation; }
#vorfuehrung, #kamera, #formen, #positionen, #technik { scroll-margin-top: 12px; }
.nav nav a { display: inline-flex; align-items: center; min-height: 44px; }
.scene canvas { object-fit: fill; }
.view-label, .positions-link, .toggle, .help summary { min-height: 44px; }
.view-label { padding-inline: 10px; }
.toggle { padding-inline: 4px; gap: 7px; }
.toggle input { width: 19px; height: 19px; }
.help summary { display: list-item; padding-block: 12px; }
.help details { padding-block: 2px; }
.help details p { margin-bottom: 10px; }
.speed { min-width: 0; }
dialog {
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  overflow: auto;
}

@media (max-width: 1080px) {
  .shell { width: calc(100% - 40px); }
  .nav nav { gap: 16px; }
  .training { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
  .panel-head h2 { font-size: clamp(1.45rem, 2.75vw, 1.8rem); }

  .transport { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
  .time { grid-column: 1 / -1; grid-row: 2; min-height: 23px; }
  .speed { grid-column: 3; grid-row: 1; }
}

@media (max-width: 760px) {
  .shell { width: calc(100% - 28px); }
  .nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    gap: 3px 10px;
    padding-top: 9px;
  }
  .nav nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 5px;
    border-top: 1px solid var(--line);
    font-size: .77rem;
  }
  .brand { font-size: 1.35rem; gap: 8px; }
  .brand img { width: 38px; flex-shrink: 0; }
  .brand small { letter-spacing: .09em; white-space: normal; }
  .intro { padding: 25px 0 19px; }
  .intro p:last-child { font-size: .91rem; }
  .seal { display: none; }
  .training { grid-template-columns: minmax(0, 1fr); }
  .stage, .mirror, .positions { padding: 12px; }

  .speed select { font-size: 1rem; }
  .cam-controls { gap: 5px 10px; }
  .positions-head { align-items: flex-start; flex-wrap: wrap; }
  .positions-head h2, .section-title h2 { font-size: 1.75rem; }
  .positions-instruction { display: block; }
  .position-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .position-art { height: clamp(128px, 38vw, 185px); }
  .position-caption { padding: 8px; }
  .forms { margin-top: 26px; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice { min-height: 59px; }
  .section-title > span { font-size: .72rem; }
}

@media (max-width: 520px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .section-title { align-items: flex-start; }
}

@media (max-width: 350px) {
  .button { padding-inline: 8px; }
  .button.icon { padding-inline: 0; }
  .transport { gap: 6px; }
  .nav nav a { font-size: .72rem; }
  .view-label { padding-inline: 7px; }
}

@media (orientation: landscape) and (max-height: 540px) and (min-width: 680px) {
  .intro { padding: 12px 0; }
  .intro h1 { font-size: clamp(1.8rem, 4vw, 2.45rem); }
  .intro p:last-child { margin-top: 4px; }
  .training { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .scene, .camera {
    height: clamp(160px, 50vh, 250px);
    height: clamp(160px, 50svh, 250px);
  }
}

@media (any-pointer: coarse) {
  .speed select { font-size: 1rem; }
}

.intro { display:grid; grid-template-columns:minmax(0,1fr) clamp(220px,29vw,324px); gap:20px; padding:22px 0; }
.intro .intro-text { color:var(--muted); margin-top:13px; max-width:48ch; line-height:1.5; }
.intro-music { display:inline-flex; min-height:44px; align-items:center; gap:7px; margin-top:9px; color:var(--accent); font-size:.87rem; font-weight:750; touch-action:manipulation; }
.intro-music:hover { text-decoration:underline; }
.intro-cover { position:relative; width:100%; margin:0; aspect-ratio:3/2; overflow:hidden; border-radius:14px; background:#303348; box-shadow:0 8px 25px #28223625; }
.intro-cover img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.intro-cover figcaption { position:absolute; left:12px; bottom:12px; color:#fff8ec; background:#171b2ad9; border:1px solid #f5cdbb40; border-radius:6px; padding:7px 9px; font-size:.62rem; font-weight:700; letter-spacing:.13em; }
.soundtrack { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:18px; align-items:center; margin-top:22px; padding:18px; scroll-margin-top:12px; }
.soundtrack-copy h2 { font-size:2rem; letter-spacing:-.03em; }
.soundtrack-copy p:not(.eyebrow), .soundtrack-status { margin-top:6px; color:var(--muted); font-size:.83rem; line-height:1.45; }
.track-list { display:flex; flex-wrap:wrap; gap:7px; }
.track[aria-pressed=true] { background:var(--peach); border-color:#bc7c65; }
.track span { color:var(--accent); font-size:.72rem; }
.soundtrack audio { display:block; width:100%; height:46px; margin-top:8px; }
@media (max-width:760px) {
  .intro { grid-template-columns:minmax(0,1fr); gap:13px; }
  .intro-cover { width:min(100%,232px); }
  .soundtrack { grid-template-columns:minmax(0,1fr); padding:12px; gap:10px; }
  .soundtrack-copy h2 { font-size:1.75rem; }
}
@media (orientation:landscape) and (max-height:540px) and (min-width:680px) {
  .intro { grid-template-columns:minmax(0,1fr) minmax(200px,32%); }
}

.portal-media { margin-top:9px; touch-action:manipulation; }
.soundtrack-copy .portal-media-hint { font-size:.75rem; }

/* Shared sizing keeps the practice surfaces steady across content changes. */
body { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.intro h1 { font-size:clamp(1.9rem,4vw,3.35rem); line-height:1.08; }
.intro .intro-text { margin-top:9px; }
.intro-copy, .panel-head > div, .time, .soundtrack-copy, .soundtrack-player,
.positions-head > div, .section-title > div, .choice > span:nth-child(2) { min-width:0; }
.panel-head { min-height:87px; }
.panel-head h2 { font-size:clamp(1.25rem,2.25vw,1.6rem); line-height:1.12; overflow-wrap:anywhere; }
.badge { flex-shrink:0; }
#play { min-width:120px; }
.scene, .camera { height:clamp(200px,26vw,300px); }
.cue, .feedback { min-height:80px; }
.portal-media, .track { max-width:100%; white-space:normal; text-align:left; }
.soundtrack audio { min-width:0; max-width:100%; }
.section-title { align-items:center; flex-wrap:wrap; }
.forms-summary { color:var(--muted); font-size:.82rem; margin:0 0 12px; }
.footer { align-items:center; flex-wrap:wrap; gap:8px 15px; }
.footer nav { display:flex; flex-wrap:wrap; gap:3px 15px; }
.footer a { display:inline-flex; min-height:44px; align-items:center; }
.legal { margin-block:24px 8px; }
.legal section { margin-bottom:16px; padding:clamp(15px,3vw,25px); scroll-margin-top:12px; }
.legal h2 { margin:16px 0 5px; font-size:1.25rem; }
.legal p { line-height:1.55; margin-block:8px; max-width:78ch; }
.legal p a { text-decoration:underline; overflow-wrap:anywhere; }
.legal .legal-links { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 17px; }

@media (max-width:880px) {
  .nav { display:grid; grid-template-columns:minmax(0,1fr) auto; min-height:0; gap:3px 10px; padding-top:9px; }
  .nav nav { grid-column:1 / -1; grid-row:2; flex-wrap:wrap; justify-content:space-between; gap:0 5px; border-top:1px solid var(--line); }
}
@media (max-width:760px) {
  .intro { padding-block:17px; gap:9px; }
  .scene, .camera { height:clamp(190px,59vw,270px); }
  .cue, .feedback { min-height:94px; }
  #play { min-width:0; }
}
@media (max-width:360px) {
  .nav nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); text-align:center; }
  .nav nav a { justify-content:center; white-space:nowrap; }
  .intro-cover { width:min(100%,205px); }
  .panel-head { gap:5px; }
  .badge { font-size:.67rem; padding-inline:7px; }
  .transport { grid-template-columns:minmax(0,1fr) 44px minmax(0,auto); }
  .speed select { font-size:1rem; }
  .cue, .feedback { min-height:106px; }
}
@media (orientation:landscape) and (max-height:540px) and (min-width:680px) {
  .intro { padding-block:10px; }
  .scene, .camera { height:clamp(160px,50vh,250px); height:clamp(160px,50svh,250px); }
}
.legal address { font-style:normal; line-height:1.55; }
.legal section h2:first-child { margin-top:0; }
.privacy a { text-decoration:underline; }
@media (min-width:761px) {
  .position-art { height:clamp(130px,14vw,166px); }
  .position-caption { min-height:105px; align-content:start; }
}
@media (max-width:679px) {
  .intro { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
  .intro-copy { display:contents; }
  .intro .eyebrow, .intro h1, .intro .intro-text { grid-column:1 / -1; margin:0; }
  .intro-cover { grid-column:1; grid-row:4; }
  .intro-music { grid-column:2; grid-row:4; margin:0; }
  .intro-cover figcaption { left:4px; bottom:4px; padding:4px; letter-spacing:.04em; font-size:.52rem; }
}