/* =====================================================================================
   Stemmhalle · Gestaltung
   Aufbau: Grundlagen · Kopf · Knöpfe · Muskelkarte · Zwölf Wochen · Halle · Mitgliedschaft · Kursplan ·
           Trainerinnen · Probetraining · Fragen · Kontakt · Fuß · Auftritt · Schmal
   Bewegt wird nur transform und opacity. Ohne JavaScript ist alles sichtbar.
   ===================================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 12px); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--schrift); font-size: 18px; line-height: 1.55; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent-text); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.behaelter { width: min(100% - 40px, var(--breite)); margin-inline: auto; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--radius-klein); background: var(--accent); color: var(--on-accent); font-weight: 700; }
.sprung:focus { top: 12px; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.marke { margin-bottom: 14px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.leise { color: var(--muted); }
.klein { font-size: 14px; }
h1, h2, h3 { font-family: var(--schrift-gross); font-weight: 800; text-transform: uppercase; text-wrap: balance; }
h1 { font-size: clamp(42px, 4.4vw, 56px); line-height: .98; letter-spacing: .005em; }
h2 { font-size: clamp(34px, 3.6vw, 46px); line-height: 1.02; letter-spacing: .005em; }
h3 { font-size: 27px; line-height: 1.1; letter-spacing: .01em; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 30; height: var(--kopf); background: rgba(13, 13, 14, .94); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.kopf-innen { height: 100%; display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: var(--schrift-gross); font-weight: 800; font-size: 26px; letter-spacing: .03em; text-transform: uppercase; }
.logo-zeichen { width: 34px; height: 22px; color: var(--accent); }
.menue { display: flex; gap: 24px; margin-left: auto; }
.menue a { color: var(--dunkel-text); text-decoration: none; font-weight: 700; font-size: 16px; }
.menue a:hover { color: var(--accent); }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s; }
.knopf:hover { background: #ff6a40; }
.knopf:active { transform: translateY(1px); }
.knopf-klein { min-height: 44px; padding: 0 18px; font-size: 15px; }
.knopf-dunkel { background: var(--dunkel-2); color: var(--dunkel-text); box-shadow: inset 0 0 0 1px #3a3d44; }
.knopf-dunkel:hover { background: var(--dunkel-3); }
.knopf-rand { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--text); }
.knopf-rand:hover { background: var(--text); color: #fff; }

/* =====================================================================================
   1 · Muskelkarte (js/muskeln.js)
   ===================================================================================== */
.held { position: relative; padding: 56px 0 88px; background: radial-gradient(60% 70% at 88% 0%, rgba(255, 79, 31, .16), rgba(255, 79, 31, 0) 70%), var(--dunkel); color: var(--dunkel-text); }
.held .marke { color: var(--accent); }
.held-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "text buehne" "karten buehne"; gap: 28px 56px; align-items: start; }
.held-text { grid-area: text; padding-top: 24px; }
.held-buehne { grid-area: buehne; }
.uebungen { grid-area: karten; }
.einleitung { margin-top: 20px; max-width: 32rem; font-size: 20px; color: var(--dunkel-leise); }
.held-knoepfe { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Übungswahl: nur mit JavaScript, ohne stehen alle Karten da */
.uebung-wahl { display: none; }
html.js .uebung-wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.uebung-wahl button { position: relative; overflow: hidden; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--dunkel-2); color: var(--dunkel-text); box-shadow: inset 0 0 0 1px #3a3d44; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; transition: background .2s, color .2s; }
.uebung-wahl button:hover { background: var(--dunkel-3); }
.uebung-wahl button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.uebung-wahl button span { position: relative; }
/* Die Karte zeigt sich von selbst durch: dünner Balken läuft im aktiven Knopf */
.uebung-wahl button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(13, 13, 14, .45); transform: scaleX(0); transform-origin: left; }
.uebung-wahl button.laeuft-auto::after { animation: auto-balken var(--takt, 3.6s) linear forwards; }
@keyframes auto-balken { to { transform: scaleX(1); } }

/* Körper: zwei Ansichten in einem SVG (440 × 460). Seitenrand für die Schilder: --rand */
.figur { --rand: 140px; position: relative; max-width: calc(500px + 2 * var(--rand)); margin-inline: auto; padding: 0 var(--rand) 30px; }
.koerper { display: block; width: 100%; height: auto; overflow: visible; }
.umriss { fill: var(--haut); stroke: var(--haut); }
.m .grund { fill: var(--muskel); stroke: var(--muskel-kante); stroke-width: .8; }
.m .glut { fill: var(--accent); stroke: var(--accent); stroke-width: 5; stroke-opacity: .3; stroke-linejoin: round; }
html.js .m:not([data-stufe]) .glut { opacity: 0; }
.m[data-stufe="1"] .glut { opacity: 1; }
html:not(.js) .m:not([data-stufe]) .glut, html:not(.js) .figur-tipp, html:not(.js) .figur-linien, html:not(.js) .figur-schilder { display: none; }
.m[data-stufe="2"] .glut { opacity: .55; }
.m[data-stufe="3"] .glut { opacity: .26; }
html.js .m { cursor: pointer; }
.m.ist-gezeigt .grund { fill: #5a5f68; }
html.js[data-bewegung="mittel"] .m .glut, html.js[data-bewegung="dynamisch"] .m .glut { transition: opacity .45s ease; }
/* dynamisch: Hauptmuskeln „atmen", nur solange der Körper zu sehen ist */
html.js[data-bewegung="dynamisch"] .figur.ist-sichtbar .m[data-stufe="1"] .glut { animation: atmen 2.6s ease-in-out infinite; }
@keyframes atmen { 50% { opacity: .72; } }

.figur-seite { position: absolute; bottom: 0; transform: translateX(-50%); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dunkel-leise); }
.figur-vorne { left: calc(var(--rand) + (100% - 2 * var(--rand)) * .2273); }
.figur-hinten { left: calc(var(--rand) + (100% - 2 * var(--rand)) * .7727); }

/* Schilder und Linien (js/muskeln.js legt sie an) */
.figur-linien { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.figur-linien line { stroke: rgba(243, 243, 244, .4); stroke-width: 1; opacity: 0; transition: opacity .3s; }
.figur-linien circle { fill: #fff; opacity: 0; transition: opacity .3s; }
.figur-linien .an { opacity: 1; }
.figur-schilder { position: absolute; inset: 0; pointer-events: none; }
.fschild { position: absolute; left: 0; top: 0; padding: 5px 11px; border-radius: 999px; background: var(--dunkel-2); color: var(--dunkel-text); box-shadow: inset 0 0 0 1px #3a3d44; font-size: 14px; font-weight: 700; line-height: 1.25; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.fschild.an { opacity: 1; }
.fschild.stufe-1 { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.fschild.stufe-2 { box-shadow: inset 0 0 0 1.5px var(--accent); }
.fschild.stufe-3 { color: var(--dunkel-leise); }
html.js[data-bewegung="mittel"] .fschild, html.js[data-bewegung="dynamisch"] .fschild { transition: opacity .3s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.figur-tipp { position: absolute; left: 0; top: 0; z-index: 3; max-width: 250px; padding: 9px 13px; border-radius: var(--radius-klein); background: #fff; color: var(--text); font-size: 14px; line-height: 1.35; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); pointer-events: none; transition: opacity .2s; }
html.js .figur-tipp { opacity: 0; }
html.js .figur-tipp.an { opacity: 1; }
.figur-tipp b { display: block; font-size: 15px; }

.legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--dunkel-text); }
.legende li, .uebung-muskeln dt { position: relative; padding-left: 20px; }
.legende li::before, .uebung-muskeln dt::before { content: ""; position: absolute; left: 0; top: .32em; width: 12px; height: 12px; border-radius: 4px; background: var(--accent); }
.stufe-2::before, .stufe-2 dt::before { opacity: .55; }
.stufe-3::before, .stufe-3 dt::before { opacity: .3; }
.held-hinweis { margin-top: 8px; text-align: center; font-size: 14px; color: var(--dunkel-leise); }
html:not(.js) .held-hinweis { display: none; }
.nur-finger { display: none; }
@media (hover: none) { .nur-maus { display: none; } .nur-finger { display: inline; } }

/* Übungskarten: ohne JavaScript alle untereinander, mit JavaScript nur die gewählte */
.uebungen { display: grid; gap: 14px; }
.uebung { padding: 24px 26px; border-radius: var(--radius); background: var(--dunkel-2); }
html.js .uebung:not(.ist-aktiv) { display: none; }
html.js[data-bewegung="mittel"] .uebung.ist-aktiv, html.js[data-bewegung="dynamisch"] .uebung.ist-aktiv { animation: karte-ein .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes karte-ein { from { opacity: 0; transform: translateY(8px); } }
.uebung-titel { font-size: 34px; line-height: 1; color: #fff; }
.uebung-tipp { margin-top: 12px; font-size: 18px; color: var(--dunkel-text); }
.uebung-muskeln { margin-top: 16px; display: grid; gap: 8px; }
.uebung-muskeln div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; }
.uebung-muskeln dt { font-size: 15px; font-weight: 700; color: var(--dunkel-leise); }
.uebung-muskeln dd { font-size: 16px; color: var(--dunkel-text); }
.uebung-start { margin-top: 16px; padding-top: 14px; border-top: 1px solid #2f3238; font-size: 16px; color: var(--dunkel-leise); }
.uebung-start b { margin-right: 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* =====================================================================================
   2 · Zwölf Wochen (js/wochen.js)
   Ruhige Fassung (ohne JavaScript, starr, schmal): Szene zeigt Woche 12, Schritte als Karten.
   Mit .wochen-an: Szene klebt rechts, die Schritte scrollen links vorbei.
   ===================================================================================== */
.wochen { padding: var(--abstand) 0; background: var(--surface); }
.wochen-kopf { margin-bottom: 44px; }
.wochen-kopf > * { max-width: 46rem; }
.wochen-kopf .leise { margin-top: 16px; }
.wochen-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.schritte { display: grid; gap: 16px; }
.schritt { padding: 24px 26px; border-radius: var(--radius); background: #fff; }
.schritt-woche { font-family: var(--schrift-gross); font-weight: 800; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.schritt h3 { margin: 4px 0 10px; }
.schritt p { color: var(--muted); }
.schritt .schritt-werte { margin-top: 12px; font-family: var(--schrift-gross); font-weight: 800; font-size: 26px; color: var(--text); font-variant-numeric: tabular-nums; }
.schritt .knopf { margin-top: 18px; }

.wochen-buehne { display: flex; flex-direction: column; gap: 14px; }
.fortschritt-text { font-family: var(--schrift-gross); font-weight: 800; font-size: 30px; line-height: 1; text-transform: uppercase; }
.fortschritt-text b { display: inline-block; min-width: 1.3em; font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.fortschritt-text span { font-size: 20px; color: var(--muted); }
.balken { position: relative; height: 10px; margin-top: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.balken i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(1); }
.balken::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 2px), var(--surface) calc(100% / 12 - 2px) calc(100% / 12)); }
.balken-marken { position: relative; height: 20px; margin-top: 4px; }
.balken-marken li { position: absolute; top: 0; left: calc((var(--w) - .5) / 12 * 100%); transform: translateX(-50%); font-size: 13px; font-weight: 700; color: var(--muted); }

.szene { position: relative; width: min(100%, 640px); aspect-ratio: 640 / 500; margin-inline: auto; }
.szene-bild { display: block; width: 100%; height: 100%; }
.boden { stroke: #c9ccd2; stroke-width: 2; }
.hilfslinie line { stroke: var(--accent-text); stroke-width: 2; stroke-dasharray: 6 7; }
.trainerin line, .trainerin polyline { stroke: var(--figur-leise); stroke-linecap: round; stroke-linejoin: round; fill: none; }
.trainerin circle, .trainerin .schuh { fill: var(--figur-leise); }
.trainerin .trainerin-arm { stroke: #8a9099; }
.sportlerin .schuh, .sportlerin .kopf { fill: var(--figur); }
.sportlerin .glied { stroke: var(--figur); stroke-linecap: round; }
.sportlerin .arm { fill: none; stroke: var(--figur-arm); stroke-linecap: round; stroke-linejoin: round; }
.glut-linie { stroke: var(--accent); stroke-linecap: round; opacity: .7; }
.glut-flaeche { fill: var(--accent); opacity: .7; }
.glut-leise { opacity: .4; }
.scheibe circle { fill: #2a2c31; stroke: #4a4e56; stroke-width: 3; }
.scheibe-rand circle { fill: none; stroke: #6b7079; stroke-width: 2; }
.stange { fill: #9aa0a8; stroke: #2a2c31; stroke-width: 2; }

/* Teile, die je Woche erscheinen. Ohne JavaScript: Stand Woche 12 (.teil-ende) */
html:not(.js) .teil:not(.teil-ende) { display: none; }
html.js .teil { opacity: 0; }
html.js .teil.an { opacity: 1; }
html.js[data-bewegung="mittel"] .teil, html.js[data-bewegung="dynamisch"] .teil { transition: opacity .35s, transform .35s cubic-bezier(.2, .8, .2, 1); }
svg .teil { transform-box: fill-box; transform-origin: center; }
html.js svg .teil:not(.an) { transform: scale(.88); }

.szene-schild, .szene-marke { position: absolute; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.szene-schild { background: #fff; color: var(--text); box-shadow: 0 4px 14px rgba(13, 13, 14, .12); }
.szene-marke { left: 0; top: 1%; background: var(--text); color: #fff; letter-spacing: .06em; text-transform: uppercase; }
.schild-trainerin { left: 77.5%; top: 3%; translate: -50% 0; }
.schild-stange { left: 41.6%; top: 1%; translate: -50% 0; }
.schild-huefte { left: 60.5%; top: 72%; translate: 0 -50%; }

.anzeige { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 18px; padding: 18px 22px 20px; border-radius: var(--radius); background: var(--dunkel); color: var(--dunkel-text); }
.wert { grid-column: span 2; }
.wert-name { display: block; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--dunkel-leise); }
.wert b { font-family: var(--schrift-gross); font-weight: 800; font-size: 46px; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; }
.wert-puls b { color: var(--accent); }
.wert-einheit { margin-left: 5px; font-size: 16px; color: var(--dunkel-leise); }
.anzeige-klein { grid-column: span 3; padding-top: 12px; border-top: 1px solid #2a2c31; }
.anzeige-klein .wert-name span { color: var(--dunkel-text); }
.beladung, .verlauf { display: block; width: 100%; height: auto; max-height: 72px; margin-top: 8px; }
.stange-lang { fill: #6b7079; }
.stange-huelse { fill: #8a9099; }
.stange-ring { fill: #b5bac1; }
.platte { fill: var(--accent); }
.platte-hell { opacity: .65; }
.verlauf-achse { stroke: #33363c; stroke-width: 1; }
.verlauf-plan { fill: none; stroke: #4a4e56; stroke-width: 2; stroke-dasharray: 3 4; }
.verlauf-ist { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.verlauf-punkt { fill: #fff; stroke: var(--accent); stroke-width: 3; }
.wochen-hinweis { font-size: 14px; color: var(--muted); }

/* klebende Fassung */
html.wochen-an .wochen-raster { align-items: stretch; }
html.wochen-an .schritte { gap: 0; padding: 4vh 0 34vh; }
html.wochen-an .schritt { display: flex; flex-direction: column; justify-content: center; min-height: 72vh; padding: 0 0 0 28px; border-radius: 0; background: transparent; border-left: 3px solid var(--border); opacity: .4; transition: opacity .4s, border-color .4s; }
html.wochen-an .schritt.ist-aktiv { opacity: 1; border-left-color: var(--accent); }
html.wochen-an .wochen-buehne { position: sticky; top: calc(var(--kopf) + 16px); height: calc(100vh - var(--kopf) - 32px); justify-content: center; }
html.wochen-an .szene { width: min(100%, 640px, calc((100vh - var(--kopf) - 380px) * 1.28)); }

/* =====================================================================================
   Ruhige Abschnitte
   ===================================================================================== */
.abschnitt-kopf { max-width: 42rem; margin-bottom: 40px; }
.abschnitt-kopf .leise { margin-top: 14px; }
.abschnitt-kopf-breit { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 48px; align-items: end; }

/* Bildplatzhalter: gewollt, warmer Hauch, feine Diagonale */
.bild-platzhalter {
  position: relative; display: flex; align-items: flex-end; margin: 0; overflow: hidden;
  aspect-ratio: var(--format, 3 / 2); border-radius: var(--radius);
  background:
    radial-gradient(110% 80% at 85% 12%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 60%),
    repeating-linear-gradient(135deg, rgba(194, 53, 11, .08) 0 1px, transparent 1px 13px),
    var(--accent-hell);
}
.bild-platzhalter figcaption { margin: 18px; padding: 9px 13px; border-radius: var(--radius-klein); max-width: calc(100% - 36px); background: rgba(255, 255, 255, .94); color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.35; }
.bild-portrait { border-radius: 50%; justify-content: center; align-items: center; }
.bild-portrait figcaption { margin: 0; max-width: 72%; text-align: center; font-size: 14px; }

/* ---------- 3 · Halle ---------- */
.halle { padding: var(--abstand) 0 0; }
.halle-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; align-items: center; }
.halle-bild { border-radius: var(--radius-gross); }
.zahlen-liste { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 24px; }
.zahlen-liste li { padding: 6px 24px; border-left: 1px solid var(--border); }
.zahlen-liste li:first-child { padding-left: 0; border-left: 0; }
.zahlen-liste b { display: block; font-family: var(--schrift-gross); font-weight: 800; font-size: clamp(48px, 5.4vw, 72px); line-height: 1; font-variant-numeric: tabular-nums; }
.zahlen-liste span { display: block; margin-top: 8px; color: var(--muted); font-size: 16px; }

/* ---------- 4 · Mitgliedschaft ---------- */
.mitgliedschaft, .kursplan, .trainerinnen, .fragen { padding: var(--abstand) 0 0; }
.tarife { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.tarif { display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--radius); background: var(--surface); }
.tarif ul { margin: 18px 0 26px; display: grid; gap: 8px; align-content: start; flex: 1; }
.tarif li { position: relative; padding-left: 22px; color: var(--muted); }
.tarif li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.tarif-preis { margin-top: 10px; display: flex; align-items: baseline; gap: 10px; }
.tarif-preis b { font-family: var(--schrift-gross); font-weight: 800; font-size: 60px; line-height: 1; }
.tarif-preis span { color: var(--muted); }
.tarif-hervor { background: var(--dunkel); color: var(--dunkel-text); }
.tarif-hervor li, .tarif-hervor .tarif-preis span { color: var(--dunkel-leise); }
.tarif-marke { align-self: flex-start; margin-bottom: 14px; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.tarif-fuss { margin-top: 20px; font-size: 16px; }

/* ---------- 5 · Kursplan ---------- */
.kursplan .leise a { color: var(--accent-text); }
.woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.tag { border-radius: var(--radius); background: var(--surface); padding: 18px 14px 14px; min-width: 0; }
.tag h3 { margin: 0 4px 12px; font-size: 24px; }
.tag ul { display: grid; gap: 8px; }
.tag li { display: grid; gap: 1px; padding: 10px 12px; border-radius: 14px; background: #fff; }
.tag time { font-family: var(--schrift-gross); font-weight: 800; font-size: 21px; line-height: 1.1; }
.tag li b { font-size: 16px; line-height: 1.3; }
.tag li span { font-size: 15px; color: var(--muted); }
.tag li.einstieg b::before, .legende-einstieg { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.tag.heute { background: var(--dunkel); }
.tag.heute h3 { color: #fff; }
.tag.heute h3::after { content: "Heute"; display: inline-block; margin-left: 8px; padding: 3px 9px 2px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: var(--schrift); font-size: 13px; font-weight: 700; letter-spacing: .04em; vertical-align: 5px; }
.tag.heute li { background: var(--dunkel-2); color: #fff; }
.tag.heute li span { color: var(--dunkel-leise); }
.kursplan-legende { margin-top: 16px; font-size: 15px; color: var(--muted); }

/* ---------- 6 · Trainerinnen ---------- */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.person .bild-portrait { width: min(220px, 70%); margin-bottom: 22px; }
.person-rolle { margin: 6px 0 10px; font-size: 15px; font-weight: 700; color: var(--accent-text); }
.person p:last-child { color: var(--muted); }
.stimme { margin-top: 48px; padding: 36px 40px; border-radius: var(--radius-gross); background: var(--accent-hell); }
.stimme blockquote p { max-width: 46rem; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.35; font-weight: 700; }
.stimme figcaption { margin-top: 16px; color: var(--muted); font-size: 15px; }

/* ---------- 7 · Probetraining ---------- */
.probe { margin-top: var(--abstand); padding: var(--abstand) 0; background: var(--surface); }
.probe-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.probe-ablauf { margin: 28px 0 22px; display: grid; gap: 16px; counter-reset: ablauf; }
.probe-ablauf li { position: relative; padding-left: 56px; counter-increment: ablauf; }
.probe-ablauf li::before { content: counter(ablauf); position: absolute; left: 0; top: -2px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--text); color: #fff; font-family: var(--schrift-gross); font-weight: 800; font-size: 22px; }
.probe-ablauf b { display: block; font-size: 19px; }
.probe-ablauf span { color: var(--muted); }
.formular { padding: 30px; border-radius: var(--radius); background: #fff; }
.formular h3 { margin-bottom: 18px; }
.feld { margin-bottom: 16px; min-width: 0; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.feld label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 15px; }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #b9bdc4; border-radius: var(--radius-klein); background: #fff; color: var(--text); font: inherit; font-size: 17px; }
.formular .knopf { width: 100%; margin-top: 4px; }
.formular-meldung { margin-top: 12px; font-weight: 700; }
.formular .leise { margin-top: 12px; }

/* ---------- 8 · Fragen ---------- */
.fragen-raster { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
.fragen-liste details { border-bottom: 1px solid var(--border); }
.fragen-liste summary { position: relative; padding: 20px 44px 20px 0; font-weight: 700; font-size: 19px; list-style: none; cursor: pointer; }
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 28px; font-weight: 400; color: var(--accent-text); }
.fragen-liste details[open] summary::after { content: "−"; }
.fragen-liste details p { max-width: 40rem; padding: 0 0 22px; color: var(--muted); }

/* ---------- 9 · Kontakt ---------- */
.kontakt { margin-top: var(--abstand); padding: var(--abstand) 0; background: var(--dunkel); color: var(--dunkel-text); }
.kontakt .marke { color: var(--accent); }
.kontakt-raster { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 48px; align-items: start; }
.kontakt address { margin-top: 22px; font-style: normal; line-height: 1.75; }
.kontakt a { color: #fff; }
.kontakt-text > p:last-child { margin-top: 16px; color: var(--dunkel-leise); }
.kontakt-zeiten h3 { margin-bottom: 12px; }
.zeiten { width: 100%; border-collapse: collapse; }
.zeiten th, .zeiten td { padding: 12px 0; border-bottom: 1px solid #2a2c31; text-align: left; font-weight: 400; }
.zeiten td { text-align: right; font-variant-numeric: tabular-nums; }
.zeiten tr.heute th, .zeiten tr.heute td { color: #fff; font-weight: 700; }
.zeiten tr.heute th::after { content: "Heute"; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; letter-spacing: .04em; vertical-align: 2px; }
.zeiten-hinweis { margin-top: 14px; font-size: 15px; color: var(--dunkel-leise); }
.kontakt-bild { border-radius: var(--radius); }

/* ---------- Fuß ---------- */
.fuss { padding: 56px 0 0; background: #060607; color: var(--dunkel-leise); font-size: 15px; }
.fuss-raster { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.fuss address { font-style: normal; }
.fuss a { color: var(--dunkel-text); }
.fuss-logo { margin-bottom: 6px; color: #fff; font-family: var(--schrift-gross); font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: .03em; }
.fuss-links a { margin-right: 16px; }
.fuss-demo { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
.fuss-zeile { width: 100%; max-width: none; margin: 0; padding: 22px 20px 26px; text-align: center; font-size: 13px; color: #8b9098; }
.fuss-zeile a { color: #a9adb4; }

/* ---------- Auftritt beim Scrollen (mittel, dynamisch) ---------- */
html.js[data-bewegung="mittel"] [data-auftritt], html.js[data-bewegung="dynamisch"] [data-auftritt] { opacity: 0; transform: translateY(22px); transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .2, 1); }
html.js [data-auftritt].ist-da { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-auftritt] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .m .glut, html.js .fschild, html.js .teil, html.js .uebung { transition: none !important; animation: none !important; }
  .uebung-wahl button::after { display: none; }
}

/* ---------- Schmal ---------- */
@media (max-width: 1180px) {
  .held-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "buehne" "karten"; }
  .held-text { padding-top: 0; }
  .uebungen { max-width: 760px; width: 100%; margin-inline: auto; }
  .woche { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .menue { display: none; }
  .kopf .knopf-klein { margin-left: auto; }
  .wochen-raster, .halle-raster, .probe-raster, .fragen-raster { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .wochen-buehne { order: -1; }
  .kontakt-raster { grid-template-columns: 1fr 1fr; }
  .kontakt-bild { grid-column: 1 / -1; }
  .tarife { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .tarif-hervor { order: -1; }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .abschnitt-kopf-breit { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .figur { --rand: 0px; max-width: 460px; }
  .figur-linien, .figur-schilder { display: none; }
  .zahlen-liste { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .zahlen-liste li:nth-child(3) { padding-left: 0; border-left: 0; }
  .team { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .person .bild-portrait { width: 200px; }
  .anzeige { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px 16px 18px; gap: 12px; }
  .wert { grid-column: span 1; }
  .wert b { font-size: 36px; }
  .anzeige-klein { grid-column: 1 / -1; }
  .kontakt-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .behaelter { width: min(100% - 32px, var(--breite)); }
  .held { padding: 36px 0 64px; }
  .einleitung { font-size: 18px; }
  .uebung { padding: 20px; }
  .uebung-muskeln div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .uebung-wahl button { padding: 0 14px; font-size: 15px; }
  .schritt { padding: 20px; }
  .woche { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tag { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 14px; }
  .tag h3 { margin: 6px 0 0 4px; font-size: 22px; }
  .tag.heute h3::after { display: table; margin: 6px 0 0; }
  .tag ul { gap: 6px; }
  .tag li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 8px; padding: 8px 12px; align-items: baseline; }
  .tag time { grid-row: span 2; font-size: 19px; }
  .tag li b { font-size: 15px; }
  .tag li span { font-size: 14px; }
  .feld-paar { grid-template-columns: minmax(0, 1fr); }
  .formular { padding: 22px; }
  .stimme { padding: 26px 24px; }
  .fuss-raster { grid-template-columns: minmax(0, 1fr); }
  .szene-schild { font-size: 12px; padding: 3px 9px; }
  .szene-marke { display: none; }
  .wert-name { font-size: 11px; letter-spacing: .04em; }
  .wert-einheit { font-size: 14px; margin-left: 3px; }
  .wert b { font-size: 32px; }
}