/* Rollbogen. Seitenstil. Die Engine-Klassen (.sc-*, [data-sc-*]) bleiben unangetastet;
   hier stehen Marke, Bühnen, Figur, Kette am Rand und der Kursplan. */
:root {
  --sc-canvas:     #EEF1F4;   /* Kreide, kühl */
  --sc-surface:    #E2E8EF;
  --sc-ink:        #14213D;   /* Kobalt als Tinte */
  --sc-ink-soft:   #46536B;
  --sc-accent:     #C2391F;   /* Zinnober, der einzige Akzent */
  --sc-accent-ink: #FBF6F2;
  --akzent-hell:   #E0573A;   /* derselbe Ton heller, nur für Grafik */
  --haut:          #DCE4EE;
  --sc-font-display: "Epilogue", system-ui, sans-serif;
  --sc-font-text:    "Atkinson Hyperlegible", system-ui, sans-serif;
  --sc-font-mono:    "Atkinson Hyperlegible", system-ui, sans-serif;
  --sc-shadow-color: 218 40% 30%;
  --kette-b: 92px;
  color-scheme: light;
}
html { background: var(--sc-canvas); scrollbar-color: #A8B3C4 var(--sc-canvas); }
body { font-family: var(--sc-font-text); background: var(--sc-canvas); color: var(--sc-ink); }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 4px; }
input { caret-color: var(--sc-accent); }

.sc-display { font-family: var(--sc-font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; }
.sc-display--xl { font-size: clamp(2.7rem, 1.5rem + 5vw, 6.4rem); letter-spacing: -0.035em; }
.sc-display--lg { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.7rem); line-height: 1.04; }
.sc-body { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.58; }
.sc-lede { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl); line-height: 1.25; }
@media (max-width: 700px) {
  .sc-display--xl { font-size: clamp(2.35rem, 1.4rem + 5.4vw, 3.3rem); }
  .sc-display--lg { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.4rem); }
  .sc-body { font-size: 1.04rem; line-height: 1.55; }
}

/* ---------- Knöpfe und Links ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font: 700 1rem/1 var(--sc-font-text); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.knopf:active { transform: translateY(1px); }
.knopf--voll {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--sc-accent-ink); background: var(--sc-accent);
  box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, var(--sc-e2);
}
.knopf--voll::before { /* feines Raster, über das alle paar Sekunden ein Lichtstreif läuft */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .3) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(90deg, rgb(0 0 0 / .06) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgb(0 0 0 / .06) 0 1px, transparent 1px 6px);
  animation: streif 4.8s var(--sc-ease-in-out) infinite;
}
@keyframes streif { 0%, 55% { background-position: -200% 0, 0 0, 0 0; } 100% { background-position: 200% 0, 0 0, 0 0; } }
@media (hover: hover) and (pointer: fine) { .knopf--voll:hover { background: #A93118; } }
@media (prefers-reduced-motion: reduce) { .knopf--voll::before { animation: none; } }
.textlink {
  color: var(--sc-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 5px;
  text-decoration-thickness: 2px; text-decoration-color: var(--sc-accent);
}

/* ---------- Kette am Rand (Navigation) ---------- */
.kette {
  position: fixed; z-index: var(--sc-z-chrome);
  left: 18px; top: 50%; translate: 0 -50%;
  width: var(--kette-b); height: min(560px, 74svh);
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 10px;
  will-change: transform;
}
.kette__kopf {
  font: 800 13px/1 var(--sc-font-display); letter-spacing: .02em; color: var(--sc-ink); text-decoration: none;
  padding: 8px 10px; border-radius: 999px; background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
}
.kette__wirbel { position: relative; list-style: none; margin: 0; padding: 0; width: 100%; }
.kette__wirbel li { position: absolute; left: 50%; top: calc(var(--y) * 100%); translate: calc(-50% + var(--x) * 9px) -50%; }
.kette__punkt {
  --bew: 0;
  display: grid; place-items: center; width: 22px; height: 15px; text-decoration: none; position: relative;
}
.kette__punkt::before {
  content: ""; width: calc(9px * var(--g)); height: 7px; border-radius: 3px;
  border: 1.5px solid color-mix(in oklab, var(--sc-ink) 70%, transparent);
  background: transparent;
  scale: calc(1 + var(--bew) * 0.55);
  transition: background-color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out);
}
.kette__punkt.ist-gerollt::before { background: var(--sc-ink); border-color: var(--sc-ink); }
.kette__punkt::before { background-color: color-mix(in oklab, var(--akzent-hell) calc(var(--bew) * 100%), transparent); }
.kette__punkt.ist-gerollt::before { background-color: color-mix(in oklab, var(--akzent-hell) calc(var(--bew) * 100%), var(--sc-ink)); }
.kette__punkt::after { /* Name beim Zeigen */
  content: attr(data-name); position: absolute; left: calc(100% + 8px); top: 50%; translate: 0 -50%;
  white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--sc-ink);
  background: var(--sc-canvas); padding: 3px 8px; border-radius: 6px; box-shadow: var(--sc-e1);
  opacity: 0; pointer-events: none; transition: opacity 160ms var(--sc-ease-out);
}
.kette__punkt:focus-visible::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .kette__punkt:hover::after { opacity: 1; } }
.kette__becken {
  display: grid; justify-items: center; gap: 6px;
  font: 700 12.5px/1.15 var(--sc-font-text); color: var(--sc-accent); text-decoration: none; text-align: center;
  padding: 4px 6px; border-radius: 8px; background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
}
.kette__becken i {
  width: 30px; height: 14px; border: 1.5px solid var(--sc-ink); border-radius: 4px 4px 14px 14px;
  rotate: calc(var(--becken, 0) * 40deg);
}
@media (hover: hover) and (pointer: fine) { .kette__becken:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* Handy: die Kette liegt unten wie auf der Matte, nur Anzeige, zwei Links an den Enden. */
@media (max-width: 860px) {
  .kette {
    left: 0; right: 0; top: auto; bottom: 0; translate: none; width: auto; height: 46px;
    grid-template-rows: none; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px;
    padding: 0 10px calc(env(safe-area-inset-bottom) * 0.5);
    background: color-mix(in oklab, var(--sc-canvas) 92%, transparent);
    border-top: 1px solid var(--sc-hairline); backdrop-filter: blur(6px);
  }
  .kette__wirbel { height: 100%; pointer-events: none; }
  .kette__wirbel li { left: calc((1 - var(--y)) * 100%); top: 50%; translate: -50% calc(-50% + var(--x) * -3px); }
  .kette__punkt { width: 8px; height: 14px; }
  .kette__punkt::before { width: 4px; height: calc(7px * var(--g)); border-width: 1.2px; border-radius: 2px; }
  .kette__punkt::after { display: none; }
  .kette__becken { grid-auto-flow: column; align-items: center; font-size: 12.5px; background: none; padding: 6px 2px; }
  .kette__becken i { display: none; }
  .kette__kopf { background: none; padding: 6px 2px; }
}

/* ---------- Bühnen mit Figur ---------- */
.buehne { background: var(--sc-canvas); }
.buehne::after { /* Dielenkante und Raster am Boden */
  content: ""; position: absolute; inset: auto 0 0 0; height: 15%;
  background-image: radial-gradient(color-mix(in oklab, var(--sc-ink) 9%, transparent) 1px, transparent 1.3px);
  background-size: 18px 18px; border-top: 1px solid var(--sc-hairline);
  mask-image: linear-gradient(to bottom, #000, transparent 90%);
  pointer-events: none;
}
.ebene { position: absolute; inset: 0; pointer-events: none; }
.licht { /* Fensterlicht auf der Wand, sehr leise */
  position: absolute; pointer-events: none; top: 6%; width: 22vw; height: 64%;
  background: linear-gradient(180deg, rgb(255 255 255 / .38), rgb(255 255 255 / 0));
  transform: skewX(-14deg); border-radius: 2px;
}
.licht--a { left: 46%; }
.licht--b { left: 72%; width: 12vw; opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .licht--a::after { content: ""; position: absolute; inset: 0; background: inherit; animation: atmen-licht 11s var(--sc-ease-in-out) infinite alternate; opacity: .4; }
}
@keyframes atmen-licht { to { opacity: 0; } }

.texte {
  position: absolute; z-index: var(--sc-z-copy);
  left: calc(var(--kette-b) + 40px); top: clamp(6rem, 22vh, 12rem);
  width: min(34rem, 40vw); display: grid;
}
.texte > * { grid-area: 1 / 1; }
.texte .sc-body { margin-top: var(--sc-4); max-width: 34ch; }
.held h1 { max-width: 9ch; }
.held .knopf { margin-top: var(--sc-6); }

.figurplatz {
  position: absolute; z-index: 2; right: 3vw; bottom: 4svh;
  width: min(56vw, 68svh); height: 88svh;
}
.figur { width: 100%; height: 100%; overflow: visible; --fs: 4; }
.f-matte { fill: #7F93B2; }
.f-schatten { fill: color-mix(in oklab, var(--sc-ink) 10%, transparent); }
.f-umriss path { fill: #5B6B88; stroke: #5B6B88; stroke-width: 1.3; stroke-linejoin: round; }
.f-haut path { fill: var(--haut); }
.f-haut--arm path { fill: color-mix(in oklab, var(--haut) 80%, transparent); }
.f-knochen-flaeche { fill: color-mix(in oklab, var(--sc-ink) 14%, transparent); stroke: var(--sc-ink); stroke-width: .45; }
.f-knochen-linie { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 55%, transparent); stroke-width: 1.1; stroke-linecap: round; }
.f-knochen-linie--arm { stroke-width: .8; stroke: color-mix(in oklab, var(--sc-ink) 38%, transparent); }
.f-rippe { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 30%, transparent); stroke-width: .5; stroke-linecap: round; }
.f-wirbel { stroke: var(--sc-canvas); stroke-width: .35; }
.f-dorn { stroke: none; }
.f-leine { fill: none; stroke: var(--sc-accent); stroke-width: .45; opacity: 0; }
.f-marke { font: 700 calc(var(--fs) * 1px) var(--sc-font-text); fill: var(--sc-accent); opacity: 0; }
.f-atem-spur { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 14%, transparent); stroke-width: .8; stroke-linecap: round; }
.f-atem { fill: none; stroke: var(--sc-ink); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 0 100; }
.f-atem-wort { font: 700 calc(var(--fs) * 0.95px) var(--sc-font-text); fill: var(--sc-ink-soft); letter-spacing: .06em; }
.f-bogen { fill: none; stroke: var(--akzent-hell); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.f-bogen-wort { font: italic 700 calc(var(--fs) * 1.5px) var(--sc-font-display); fill: var(--sc-accent); opacity: 0; dominant-baseline: hanging; }

@media (max-width: 860px) {
  .texte { left: var(--sc-gutter); right: var(--sc-gutter); top: clamp(4.2rem, 9svh, 6rem); width: auto; }
  .texte .sc-body { max-width: 40ch; }
  .held .knopf { margin-top: var(--sc-5); }
  .figurplatz { left: 50%; right: auto; translate: -50% 0; bottom: 58px; width: 94vw; height: 54svh; }
  .licht { display: none; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .figurplatz { height: 41svh; }
  .held .knopf { min-height: 46px; margin-top: var(--sc-4); }
  .texte .sc-body { font-size: .98rem; }
}

/* ---------- Unten: der dunkle Anker ---------- */
.unten {
  --sc-canvas: #14213D; --sc-ink: #E9EDF3; --sc-ink-soft: #AEB9CC; --sc-hairline: rgb(233 237 243 / .14);
  background: var(--sc-canvas); color: var(--sc-ink); padding-block: clamp(4rem, 8vw, 9rem);
  position: relative; isolation: isolate;
}
.unten::before { /* feines Punktraster, nach unten ausgeblendet */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgb(233 237 243 / .06) 1px, transparent 1.2px); background-size: 22px 22px;
  mask-image: radial-gradient(80% 60% at 30% 20%, #000, transparent);
}
.unten .sc-display, .unten h3, .unten dd { color: var(--sc-ink); }
.unten .sc-body { color: var(--sc-ink-soft); letter-spacing: .005em; line-height: 1.64; }
.unten__raster {
  display: grid; gap: clamp(2rem, 4vw, 4rem) clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1.15fr 1fr; padding-left: calc(var(--kette-b) + 24px);
}
.unten__kopf { grid-column: 1 / -1; max-width: 44rem; }
.vorzeile { font-size: var(--sc-t-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.unten__gross { margin: 0; grid-column: 1 / -1; }
.unten__gross img { width: 100%; height: auto; border-radius: 14px; }
.unten__text { align-self: start; }
.unten__h3 { font: 700 var(--sc-t-xl)/1.1 var(--sc-font-display); margin: 0; }
.daten { margin: 0; display: grid; }
.daten div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--sc-hairline); }
.daten dt { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); font-weight: 700; padding-top: .15em; }
.daten dd { margin: 0; font-size: var(--sc-t-base); }
.hinweis {
  margin-top: var(--sc-6) !important; padding: 1rem 1.1rem; border-radius: 14px; font-size: var(--sc-t-sm); line-height: 1.6;
  background: rgb(233 237 243 / .06); border: 1px solid var(--sc-hairline); color: var(--sc-ink-soft);
}
.hinweis strong { color: var(--sc-ink); }
.unten__klein { margin: 0; margin-top: clamp(0rem, 6vw, 5rem); }
.unten__klein img { width: 100%; height: auto; border-radius: 14px; }
.unten__klein figcaption { margin-top: .8rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 36ch; }
@media (max-width: 860px) {
  .unten__raster { grid-template-columns: 1fr; padding-left: var(--sc-gutter); }
  .daten div { grid-template-columns: 7rem 1fr; }
  .unten__klein { max-width: 22rem; }
}

/* ---------- Kurse: Schiene ---------- */
.kurse { background: var(--sc-canvas); display: grid; align-items: center; }
.schiene { gap: clamp(1rem, 2vw, 2rem); padding-inline: calc(var(--kette-b) + 40px) 6vw; align-items: stretch; }
.kurs {
  flex: 0 0 clamp(17rem, 24vw, 23rem); display: grid; grid-template-rows: auto auto 1fr auto; align-content: start;
  background: var(--sc-surface); border-radius: 14px; padding: 12px 12px 18px; box-shadow: var(--sc-edge), var(--sc-e1);
  position: relative; overflow: hidden; isolation: isolate;
}
.kurs::before { /* Raster im Material */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(color-mix(in oklab, var(--sc-ink) 8%, transparent) 1px, transparent 1.2px); background-size: 16px 16px;
  mask-image: linear-gradient(to top, #000, transparent 60%);
}
.kurs img { width: 100%; height: auto; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 9px; }
.kurs h3 { font: 700 var(--sc-t-xl)/1.1 var(--sc-font-display); letter-spacing: -0.02em; margin: 1rem 6px .4rem; }
.kurs p { margin: 0 6px; color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.5; }
.kurs .kurs__preis { margin-top: 1rem; color: var(--sc-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.kurs--kopf, .kurs--schluss { background: none; box-shadow: none; flex-basis: clamp(18rem, 30vw, 28rem); align-content: center; grid-template-rows: none; }
.kurs--kopf::before, .kurs--schluss::before { display: none; }
.kurs--kopf .sc-body { margin-top: 1rem; }
.kurs--schluss .textlink { margin-top: 1.2rem; justify-self: start; }
.kurs__figur { aspect-ratio: 4 / 4.4; border-radius: 9px; background: var(--sc-canvas); padding: 6% 4% 0; }
@media (max-width: 860px) {
  .schiene { padding-inline: var(--sc-gutter); }
  .kurs { flex-basis: 76vw; }
  .kurs--kopf, .kurs--schluss { flex-basis: 82vw; }
  .kurs img, .kurs__figur { aspect-ratio: 4 / 3.3; }
  .kurse { align-items: center; padding-bottom: 46px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .kurs img, .kurs__figur { aspect-ratio: 4 / 2.6; }
  .kurs h3 { margin-top: .6rem; }
}

/* ---------- Schluss: Kursplan ---------- */
.schluss { padding-block: clamp(5rem, 9vw, 9rem) 0; }
.schluss__raster {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr) 120px; padding-left: calc(var(--kette-b) + 24px);
}
.schluss__kopf { grid-column: 1; }
.schluss__kopf .sc-body { margin-top: 1rem; max-width: 46ch; }
.schluss__kette { grid-column: 2; grid-row: 1 / 3; height: min(560px, 74svh); align-self: center; }
.plan {
  grid-column: 1; background: var(--sc-surface); border-radius: 18px; padding: clamp(14px, 2vw, 26px);
  box-shadow: var(--sc-edge), var(--sc-e2); position: relative; isolation: isolate; overflow: hidden;
}
.plan::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(color-mix(in oklab, var(--sc-ink) 9%, transparent) 1px, transparent 1.3px);
  background-size: 20px 20px; mask-image: radial-gradient(90% 80% at 20% 0%, #000, transparent);
}
.plan__tafel { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
.plan__tafel caption { text-align: left; font: 700 var(--sc-t-sm)/1.2 var(--sc-font-text); color: var(--sc-ink-soft); padding: 0 6px 8px; }
.plan__tafel th { font: 800 var(--sc-t-base)/1 var(--sc-font-display); text-align: left; padding: 0 6px 6px; color: var(--sc-ink); }
.plan__tafel td { vertical-align: top; height: 64px; }
.plan__tafel button {
  width: 100%; height: 100%; display: grid; align-content: center; gap: 2px; text-align: left; cursor: pointer;
  border: 1.5px solid color-mix(in oklab, var(--sc-ink) 22%, transparent); background: var(--sc-canvas);
  border-radius: 10px; padding: 8px 9px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.plan__tafel button b { font: 800 var(--sc-t-base)/1 var(--sc-font-display); color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.plan__tafel button:active { transform: translateY(1px); }
.plan__tafel button[aria-pressed="true"] { background: var(--sc-ink); border-color: var(--sc-ink); color: #C9D2E1; }
.plan__tafel button[aria-pressed="true"] b { color: #fff; }
@media (hover: hover) and (pointer: fine) { .plan__tafel button:hover { border-color: var(--sc-accent); } }
.anmeldung { margin-top: 1rem; padding: 0 6px; display: grid; gap: .9rem; }
.anmeldung__satz { margin: 0; font: 600 var(--sc-t-lg)/1.35 var(--sc-font-display); }
.anmeldung__satz b { color: var(--sc-accent); }
.anmeldung__felder { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.feld { display: grid; gap: .35rem; }
.feld label { font-size: var(--sc-t-sm); font-weight: 700; }
.feld input {
  min-height: 48px; padding: 0 14px; border-radius: 10px; background: var(--sc-canvas);
  border: 1.5px solid color-mix(in oklab, var(--sc-ink) 40%, transparent);
}
.feld input:focus { border-color: var(--sc-ink); }
.feld input[aria-invalid="true"] { border-color: var(--sc-accent); }
.feld__fehler { color: var(--sc-accent); font-weight: 700; font-size: var(--sc-t-sm); }
.anmeldung .knopf { justify-self: start; }
.anmeldung__hinweis { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.ist-gesendet .anmeldung__hinweis { color: var(--sc-ink); font-weight: 700; }
.fuss {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  margin-top: clamp(2rem, 5vw, 4rem); padding: 1.4rem 0 2.2rem; border-top: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.fuss p { margin: 0; }

/* Die angekommene Kette steht, ihre Punkte leuchten nicht mehr. */
.kette.ist-angekommen .kette__kopf, .kette.ist-angekommen .kette__becken { background: none; }

@media (max-width: 860px) {
  .schluss__raster { grid-template-columns: minmax(0, 1fr) 44px; padding-left: var(--sc-gutter); gap: 1.5rem 12px; }
  .schluss__kopf { grid-column: 1; }
  .plan { grid-column: 1 / -1; }
  .schluss__kette { grid-row: 1; height: auto; align-self: start; padding-top: .3rem; }
  .anmeldung__felder { grid-template-columns: 1fr; }
  .plan__tafel { border-spacing: 3px; }
  .plan__tafel th { padding: 0 3px 4px; font-size: .9rem; }
  .plan__tafel button { padding: 6px 4px; font-size: .74rem; border-radius: 8px; }
  .plan__tafel button b { font-size: .86rem; }
  .plan__tafel td { height: 56px; }
  .fuss { padding-bottom: 4.6rem; }
}

/* Über dem dunklen Anker wird die Kette hell. */
.kette.ist-dunkel { --sc-ink: #E9EDF3; --sc-canvas: #14213D; }
.kette.ist-dunkel .kette__becken { color: #F08A70; }
.kette { transition: color 200ms var(--sc-ease-out); }
/* Die Schiene läuft unter der Kette weich aus. */
@media (min-width: 861px) {
  .kurse { mask-image: linear-gradient(90deg, transparent 0, transparent 70px, #000 150px); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 861px) { .kurse { mask-image: none; } }

.stehkette { display: none; width: 100%; height: auto; }
.stehkette__kopf { fill: none; stroke: var(--sc-ink); stroke-width: .8; }
.stehkette__w { fill: var(--sc-ink); }
@media (max-width: 860px) { .stehkette { display: block; max-height: 200px; } }