:root{
  --ballet-bg:#f4f0e8;
  --ballet-paper:#fffdf8;
  --ballet-ink:#202124;
  --ballet-muted:#62656a;
  --ballet-line:#d8c7ae;
  --ballet-gold:#b8884f;
  --ballet-gold-dark:#7e5b32;
  --ballet-deep:#111318;
  --ballet-deep-soft:#1b2028;
  --figure-body:#c9a287;
  --figure-clothes:#292c31;
  --figure-leg:#d8d0c4;
  --figure-shoe:#b88f73;
  --analysis-axis:#7f8794;
  --analysis-head-joint:#8f7285;
  --analysis-joint:#b8884f;
  --analysis-arm-axis:#8b6f55;
  --analysis-leg-axis:#aa602b;
  --analysis-foot-axis:#65715d;
  --analysis-motion:#5c526b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ballet-ink);
  background:var(--ballet-bg);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
}
button,input{font:inherit}
a{color:var(--ballet-gold-dark)}
.container{width:min(1180px,calc(100% - 2rem));margin-inline:auto}

.site-header{
  color:#fff;
  background:
    radial-gradient(circle at 18% 25%,rgba(184,136,79,.28),transparent 31%),
    radial-gradient(circle at 82% 18%,rgba(124,94,122,.18),transparent 30%),
    linear-gradient(135deg,#090b0f,#1a1d22 56%,#252018);
}
.hero{
  display:grid;
  grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
  min-height:850px;
  padding-block:4rem;
}
.eyebrow{
  margin:0 0 .75rem;
  color:#d7b98c;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hero>div:first-child{
  min-width:0;
}
.hero h1{
  max-width:100%;
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.15rem,5.25vw,4.95rem);
  font-weight:500;
  line-height:.94;
  letter-spacing:-.025em;
  text-wrap:balance;
  overflow-wrap:normal;
  hyphens:auto;
}
.hero .lead{
  max-width:760px;
  margin:1.4rem 0 0;
  color:rgba(255,255,255,.92);
  font-size:clamp(1.05rem,2vw,1.25rem);
}
.hero-principle{
  margin-top:1.6rem;
  padding:1rem 1.2rem;
  color:rgba(255,255,255,.94);
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.16);
  border-left:4px solid #d7b98c;
  border-radius:0 12px 12px 0;
}

.movement-player{
  overflow:hidden;
  color:var(--ballet-ink);
  background:var(--ballet-paper);
  border:1px solid var(--ballet-line);
  border-radius:16px;
  box-shadow:0 22px 55px rgba(0,0,0,.27);
}
.player-toolbar{
  display:grid;
  gap:.7rem;
  padding:1rem;
  background:linear-gradient(135deg,#fffdf8,#efe7da);
  border-bottom:1px solid var(--ballet-line);
}
.control-row{
  display:grid;
  grid-template-columns:115px minmax(0,1fr);
  gap:.7rem;
  align-items:start;
}
.control-row>strong{
  padding-top:.48rem;
  color:#3b3e43;
  font-size:.78rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.segmented{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.segment-button{
  min-height:38px;
  padding:.48rem .68rem;
  color:#35383d;
  background:#fffdf8;
  border:1px solid #cfc1ae;
  border-radius:6px;
  font-weight:800;
  cursor:pointer;
}
.segment-button[aria-pressed="true"]{
  color:#fff;
  background:var(--ballet-deep-soft);
  border-color:var(--ballet-deep-soft);
}
.conditional-row{display:none}
.conditional-row.is-visible{display:grid}

.player-canvas{
  position:relative;
  background:
    linear-gradient(
      90deg,
      transparent 39.4%,
      rgba(126,91,50,.07) 39.5%,
      transparent 39.6%
    ),
    linear-gradient(145deg,#f7f3ec,#e7ddd0);
}
.player-canvas svg{
  display:block;
  width:100%;
  height:675px;
}

/*
  Relevé braucht oberhalb der Figur zusätzliche reale Layoutfläche,
  weil der gesamte Körper beim Aufstieg nach oben wandert.
  Die Status-Chips liegen deshalb beim Relevé nicht über dem SVG,
  sondern in einer eigenen Zeile davor. So bleibt der Kopf auch in
  Demi-pointe/Pointe und bei umgebrochenen Chips auf kleinen Displays frei.
*/
.movement-player[data-movement="releve"] .player-status,
.movement-player[data-movement="saute"] .player-status,
.movement-player[data-movement="echappe"] .player-status,
.movement-player[data-movement="assemble"] .player-status,
.movement-player[data-movement="sissonne"] .player-status,
.movement-player[data-movement="jete"] .player-status,
.movement-player[data-movement="grand-jete"] .player-status,
.movement-player[data-movement="cabriole"] .player-status,
.movement-player[data-movement="glissade"] .player-status,
.movement-player[data-movement="pas-de-chat"] .player-status,
.movement-player[data-movement="temps-leve"] .player-status,
.movement-player[data-movement="entrechat-quatre"] .player-status,
.movement-player[data-movement="pique"] .player-status{
  position:relative;
  top:auto;
  left:auto;
  z-index:3;
  max-width:none;
  padding:1rem 1rem .35rem;
}
.player-status{
  position:absolute;
  top:1rem;
  left:1rem;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  max-width:calc(100% - 2rem);
}
.status-chip{
  padding:.4rem .58rem;
  color:#fff;
  background:rgba(17,19,24,.88);
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  font-size:.75rem;
  font-weight:800;
}
.player-timeline{
  padding:1rem;
  background:#fffdf8;
  border-top:1px solid var(--ballet-line);
}
.timeline-head{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1rem;
  align-items:center;
  justify-content:space-between;
}
.play-button{
  min-height:42px;
  padding:.58rem .85rem;
  color:#fff;
  background:var(--ballet-deep-soft);
  border:0;
  border-radius:7px;
  font-weight:850;
  cursor:pointer;
}
.movement-range{
  width:100%;
  margin-top:.8rem;
  accent-color:var(--ballet-gold-dark);
}
.timeline-scale{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  color:#74787e;
  font-size:.78rem;
}
.timeline-scale span:nth-child(2){text-align:center}
.timeline-scale span:nth-child(3){text-align:right}

.analysis-panel{
  display:grid;
  grid-template-columns:115px minmax(0,1fr);
  gap:.7rem;
  padding:1rem;
  background:#f1e9de;
  border-top:1px solid var(--ballet-line);
}
.analysis-panel>strong{
  padding-top:.35rem;
  color:#3b3e43;
  font-size:.78rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.analysis-options{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.analysis-option{
  display:inline-flex;
  gap:.4rem;
  align-items:center;
  min-height:34px;
  padding:.35rem .5rem;
  background:rgba(255,255,255,.72);
  border:1px solid #d1c4b3;
  border-radius:6px;
  font-size:.83rem;
  font-weight:700;
}
.player-note,.player-error{
  margin:0;
  padding:.8rem 1rem;
  background:#fbf8f3;
  border-top:1px solid #e5ddd2;
  color:#5f6268;
  font-size:.82rem;
}
.player-error{
  color:#7d2f2f;
  background:#fff0ed;
  font-weight:700;
}

main section{padding-block:clamp(3.8rem,7vw,6rem)}
main section:nth-child(even){background:rgba(255,255,255,.58)}
main h2{
  max-width:1000px;
  margin:0;
  padding-bottom:.8rem;
  color:#212225;
  border-bottom:3px solid var(--ballet-gold);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,4vw,3.15rem);
  font-weight:500;
  line-height:1.15;
}
.section-intro{max-width:92ch;margin-top:1.3rem}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(235px,1fr));
  gap:1rem;
  margin-top:1.5rem;
}
.card{
  padding:1.2rem;
  background:var(--ballet-paper);
  border:1px solid var(--ballet-line);
  border-radius:11px;
  box-shadow:0 5px 16px rgba(38,30,22,.055);
}
.card strong{color:var(--ballet-gold-dark)}
.card p:last-child{margin-bottom:0}
.notice{
  margin-top:1.4rem;
  padding:1rem 1.2rem;
  background:#f5ead9;
  border-left:4px solid var(--ballet-gold);
}
.book-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-top:1.5rem;
}
.book-card{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:1rem;
  padding:1rem;
  background:#fffdf8;
  border:1px solid var(--ballet-line);
  border-radius:10px;
}
.book-card img{width:100%;height:auto}
.author-grid{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:2rem;
  align-items:start;
  margin-top:1.5rem;
}
.author-grid img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border:3px solid var(--ballet-gold);
  border-radius:50%;
}
.translation-tools{
  padding:.65rem 0;
  color:#4d5055;
  background:#eee7dc;
  border-bottom:1px solid #ded1bf;
}
.translation-tools p{
  display:inline;
  margin:0 .75rem 0 0;
  font-size:.92rem;
}
#google_translate_element{
  display:inline-block;
  min-height:1.2rem;
}
.site-footer{
  padding-block:2rem;
  color:rgba(255,255,255,.8);
  background:#0d0f12;
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  align-items:center;
  justify-content:space-between;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.footer-links a{color:rgba(255,255,255,.8)}


@media(max-width:1180px) and (min-width:1061px){
  .hero{grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:2rem}
  .hero h1{font-size:clamp(3rem,4.6vw,4.35rem)}
}

@media(max-width:1060px){
  .hero{grid-template-columns:1fr;min-height:auto}
}
@media(max-width:720px){
  .control-row,.analysis-panel{grid-template-columns:1fr}
  .player-canvas svg{height:570px}
  .book-grid{grid-template-columns:1fr}
  .author-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .container{width:min(100% - 1rem,1180px)}
  .player-canvas svg{height:510px}
  .book-card{grid-template-columns:90px 1fr}
}

.control-help{
  margin:.45rem 0 0;
  max-width:70ch;
  color:var(--ballet-muted);
  font-size:.82rem;
  line-height:1.45;
}
.variant-comparison{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin:1.5rem 0 1.25rem;
}
@media (max-width:720px){
  .variant-comparison{grid-template-columns:1fr}
}

/* 2026-09-02: robuste Langtitel- und Mobilkorrektur */
.movement-player,.player-canvas,[data-pose-host]{min-width:0}
.player-canvas{overflow:hidden}
@media(max-width:1060px){
  .hero{padding-block:2.25rem 3rem}
  .hero h1{font-size:clamp(3rem,10vw,5rem)}
}
@media(max-width:520px){
  .hero h1{font-size:clamp(2.65rem,12vw,4rem)}
  .player-status{left:.55rem;top:.55rem;max-width:calc(100% - 1.1rem)}
}


.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1000;

  padding: 0.75rem 1rem;

  color: #fff;
  background: #000;

  transform: translateY(-150%);
  transition: transform 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}