/* Erklärstrecke „So läuft eine Session“ – Karussell: am Handy wischen, am Computer klicken.
   Plakatstil wie die Bandmaschine: Creme, Schwarz, Musik-Rot. */
.strecke{--s-rot:var(--rot-flae); --s-creme:var(--creme-hoch); --s-schwarz:var(--dunkel-buehne); --s-hell:#FFF8EA; position:relative; margin:clamp(24px,4vw,44px) 0}
.strecke-kopf{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:0 0 14px}
.strecke-kopf h2{margin:0}
.strecke-zaehler{font-weight:700; font-size:.82rem; letter-spacing:.12em; color:var(--grau,#453C34); font-variant-numeric:tabular-nums}
.strecke-bahn{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-x:contain;
  padding:6px 4px 14px; margin:0 -4px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.strecke-bahn::-webkit-scrollbar{display:none}
.strecke-bahn:focus-visible{outline:3px solid var(--s-rot); outline-offset:4px; border-radius:24px}
.strecke-karte{flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; box-sizing:border-box;
  display:grid; grid-template-rows:auto 1fr; border:3px solid var(--s-schwarz); border-radius:24px; overflow:hidden;
  background:var(--s-hell); box-shadow:6px 6px 0 var(--s-schwarz)}
@media (min-width:760px){
  .strecke-karte{grid-template-columns:1.15fr 1fr; grid-template-rows:auto}
}
.strecke-bild{background:var(--s-creme); border-bottom:3px solid var(--s-schwarz); display:grid; place-items:center; padding:10px}
.strecke-karte.rot .strecke-bild{background:var(--s-rot)}
@media (min-width:760px){ .strecke-bild{border-bottom:0; border-right:3px solid var(--s-schwarz); padding:18px} }
.strecke-bild svg{display:block; width:100%; height:auto; max-height:320px}
.strecke-text{padding:clamp(18px,3vw,30px); display:flex; flex-direction:column; justify-content:center}
.strecke-nr{margin:0 0 8px; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--s-rot)}
.strecke-text h3{margin:0 0 10px; font-size:clamp(1.35rem,2.6vw,1.8rem); line-height:1.15}
.strecke-text p{margin:0; color:var(--grau,#453C34)}
.strecke-text .knopf{align-self:flex-start; margin-top:18px}

.strecke-steuer{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:6px}
.strecke-pfeil{width:46px; height:46px; border-radius:50%; border:3px solid var(--s-schwarz); background:var(--s-hell); cursor:pointer;
  display:grid; place-items:center; box-shadow:3px 3px 0 var(--s-schwarz); transition:transform .12s, box-shadow .12s}
.strecke-pfeil:hover{background:var(--s-rot); color:#fff}
.strecke-pfeil:active{transform:translate(3px,3px); box-shadow:none}
.strecke-pfeil:disabled{opacity:.3; cursor:default; transform:none; box-shadow:3px 3px 0 var(--s-schwarz); background:var(--s-hell); color:inherit}
.strecke-pfeil svg{width:18px; height:18px}
.strecke-punkte{display:flex; gap:8px}
.strecke-punkte button{width:11px; height:11px; padding:0; border-radius:999px; border:2px solid var(--s-schwarz); background:transparent; cursor:pointer; transition:width .25s, background .25s}
.strecke-punkte button[aria-current="true"]{width:28px; background:var(--s-rot)}
.strecke-wischen{display:none; text-align:center; font-size:.78rem; color:var(--grau,#453C34); margin:8px 0 0}
@media (hover:none){ .strecke-wischen{display:block} }

/* ---------- Animationen in den Grafiken ---------- */
.strecke svg .dreh{transform-box:fill-box; transform-origin:center; animation:sk-dreh 3.2s linear infinite; animation-direction:reverse} /* Tonbandspulen: gegen den Uhrzeigersinn */
.strecke svg .dreh.schnell{animation-duration:1.4s; animation-direction:normal} /* Räder des Busses */
.strecke svg .dreh.rueck{animation-direction:reverse}
@keyframes sk-dreh{to{transform:rotate(360deg)}}
.strecke svg .note{transform-box:fill-box; animation:sk-note 3.6s ease-in infinite; opacity:0}
.strecke svg .note.n2{animation-delay:1.2s} .strecke svg .note.n3{animation-delay:2.4s}
@keyframes sk-note{0%{opacity:0; transform:translate(0,10px) rotate(-8deg)} 20%{opacity:1} 100%{opacity:0; transform:translate(14px,-52px) rotate(10deg)}}
.strecke svg .wiegen{transform-box:fill-box; transform-origin:50% 100%; animation:sk-wiegen 4s ease-in-out infinite}
.strecke svg .wiegen.w2{animation-delay:-1.3s} .strecke svg .wiegen.w3{animation-delay:-2.6s}
@keyframes sk-wiegen{50%{transform:rotate(4deg)}}
.strecke svg .huepf{animation:sk-huepf .5s ease-in-out infinite alternate}
@keyframes sk-huepf{to{transform:translateY(-3px)}}
.strecke svg .strasse{animation:sk-strasse .7s linear infinite}
@keyframes sk-strasse{to{transform:translateX(-60px)}}
.strecke svg .wolke{animation:sk-wolke 14s linear infinite}
.strecke svg .wolke.w2{animation-duration:20s; animation-delay:-8s}
@keyframes sk-wolke{from{transform:translateX(120px)} to{transform:translateX(-520px)}}
.strecke svg .nadel{transform-box:fill-box; transform-origin:50% 100%; animation:sk-nadel 2.6s ease-in-out infinite}
@keyframes sk-nadel{0%{transform:rotate(-28deg)} 20%{transform:rotate(6deg)} 35%{transform:rotate(-8deg)} 55%{transform:rotate(14deg)} 70%{transform:rotate(-4deg)} 100%{transform:rotate(-28deg)}}
.strecke svg .welle{transform-box:fill-box; transform-origin:0 50%; animation:sk-welle 1.8s ease-out infinite; opacity:0}
.strecke svg .welle.w2{animation-delay:.6s} .strecke svg .welle.w3{animation-delay:1.2s}
@keyframes sk-welle{0%{opacity:0; transform:scale(.7)} 30%{opacity:1} 100%{opacity:0; transform:scale(1.25)}}
.strecke svg .zeile{transform-box:fill-box; transform-origin:0 50%; animation:sk-zeile 4.5s ease-in-out infinite}
.strecke svg .zeile.z2{animation-delay:.5s} .strecke svg .zeile.z3{animation-delay:1s}
@keyframes sk-zeile{0%{transform:scaleX(0)} 30%,80%{transform:scaleX(1)} 100%{transform:scaleX(0)}}
/* Nur die sichtbare Karte bewegt sich */
.strecke-karte:not(.aktiv) svg *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .strecke svg *{animation:none !important} .strecke svg .note,.strecke svg .welle{opacity:1} .strecke-bahn{scroll-behavior:auto} }
.strecke svg .note.li{animation-name:sk-note-l}
@keyframes sk-note-l{0%{opacity:0; transform:translate(0,10px) rotate(8deg)} 20%{opacity:1} 100%{opacity:0; transform:translate(-14px,-52px) rotate(-10deg)}}
.strecke svg .dreh.langsam{animation-duration:9s}
.strecke svg .wandern{animation:sk-wandern 4.2s ease-in-out infinite}
@keyframes sk-wandern{0%{transform:translate(0,40px); opacity:0} 15%{transform:translate(0,0); opacity:1} 65%{transform:translate(52px,-98px) scale(.75); opacity:1} 80%,100%{transform:translate(56px,-100px) scale(.7); opacity:0}}
.strecke svg .funkeln{transform-box:fill-box; transform-origin:center; animation:sk-funkeln 2.4s ease-in-out infinite}
.strecke svg .funkeln.f2{animation-delay:-1.2s}
@keyframes sk-funkeln{0%,100%{opacity:.2; transform:scale(.6) rotate(0)} 50%{opacity:1; transform:scale(1.1) rotate(45deg)}}
.strecke svg .einwurf{animation:sk-einwurf 3.4s ease-in infinite}
@keyframes sk-einwurf{0%{transform:translateY(-40px); opacity:0} 20%{opacity:1} 55%{transform:translateY(0); opacity:1} 70%,100%{transform:translateY(46px); opacity:0}}
.strecke svg .herz{transform-box:fill-box; transform-origin:center; animation:sk-herz 3.4s ease-in-out infinite}
@keyframes sk-herz{0%,60%{opacity:0; transform:scale(.4)} 72%{opacity:1; transform:scale(1.15)} 90%{opacity:1; transform:scale(1)} 100%{opacity:0; transform:translateY(-10px)}}
.strecke svg .puls{transform-box:fill-box; transform-origin:center; animation:sk-puls .6s ease-in-out infinite alternate}
.strecke svg g.puls:nth-of-type(2){animation-delay:-.3s}
@keyframes sk-puls{to{transform:scale(1.08)}}
.strecke svg .band{stroke-dasharray:6 6; animation:sk-band .6s linear infinite}
@keyframes sk-band{to{stroke-dashoffset:-12}}
.strecke svg .fortschritt{transform-box:fill-box; transform-origin:0 50%; animation:sk-fort 8s linear infinite}
@keyframes sk-fort{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.strecke svg .blase{transform-box:fill-box; transform-origin:30% 100%; animation:sk-blase 4s ease-in-out infinite}
.strecke svg .blase.b2{animation-delay:-2s}
@keyframes sk-blase{0%,10%{opacity:0; transform:scale(.3)} 22%{opacity:1; transform:scale(1.05)} 30%,60%{opacity:1; transform:scale(1)} 72%,100%{opacity:0; transform:scale(.9)}}
.strecke svg .schwingen{transform-box:view-box; transform-origin:240px 70px; animation:sk-schwingen 3s ease-in-out infinite alternate}
@keyframes sk-schwingen{from{transform:rotate(-5deg)} to{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){ .strecke svg .wandern,.strecke svg .einwurf,.strecke svg .herz,.strecke svg .blase{opacity:1} .strecke svg .fortschritt{transform:scaleX(.6)} }
.strecke svg .haken{transform-box:fill-box; transform-origin:center; animation:sk-haken 3.6s ease-in-out infinite}
@keyframes sk-haken{0%,25%{opacity:0; transform:scale(.3)} 38%{opacity:1; transform:scale(1.15)} 46%,85%{opacity:1; transform:scale(1)} 100%{opacity:0; transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){ .strecke svg .haken{opacity:1} }

/* Links unter der Strecke (Startseite) */
.strecke-weiter{display:flex;flex-wrap:wrap;gap:.6em 1.6em;justify-content:center;margin:1.4em 0 0;font-weight:700}
.strecke-weiter a{color:var(--rot-text);text-decoration:none;border-bottom:1.5px solid currentColor}
.strecke-weiter a:hover{color:var(--dunkel-buehne)}
section.strecke{padding:0}
#so-laeuft .strecke{margin-top:clamp(20px,3vw,32px)}

/* Erklärstrecke im Stil der Bestandteile-Galerie */
.bst.strecke{margin:clamp(30px,3.6vw,46px) 0 0}
#so-laeuft .bst.strecke{margin-top:clamp(18px,3vw,30px)}
.bst-karte svg.erkl-bild{width:300px;height:auto;flex:none;background:var(--s-creme);border-radius:var(--radius);padding:12px;box-sizing:border-box}
.bst-karte svg.erkl-bild.rot{background:var(--s-rot)}
.bst-karte .bst-innen .knopf{margin-top:.6em}
@media (max-width:699px){.bst-karte svg.erkl-bild{width:100%;max-width:240px}}