/* ===================== Laufschule: Timmys Geschichte (Scroll-Animation, Bilderrahmen-Prinzip) =====================
   Maße kommen aus timmy.js: --ts-top (klebende Leiste), --fw/--fh (Rahmen), --ft (Rahmen oben), --tt (Text oben), je Szene --fl (Rahmen links).
   Der Rahmen hat exakt das Bildformat → es wird nie etwas oben/unten abgeschnitten. */
.ts-story{position:relative;background:#0A1440;color:#13235E;isolation:isolate}
.ts-kicker{display:inline-block;font:700 13px/1 var(--ff-body);letter-spacing:.12em;text-transform:uppercase;color:var(--devil)}
html.ts-snapping{scroll-snap-type:y proximity}
.ts-snap{position:absolute;left:0;top:var(--snap,0px);width:1px;height:1px;scroll-snap-align:start;pointer-events:none}

/* Szene: Bühne klebt, solange die Szene durchscrollt */
.ts-scene{position:relative;height:calc(var(--len,1.35) * 100svh)}
.ts-stage{position:sticky;top:var(--ts-top,0px);height:calc(100svh - var(--ts-top,0px));overflow:hidden;background:#C9D6F0}
.ts-story .ts-stage img{max-width:none}

/* Weichgezeichneter Hintergrund (füllt die Ränder) */
.ts-story .ts-stage img.ts-blur{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(26px) saturate(1.15) brightness(1.06);opacity:.9;scale:calc(1.05 + var(--p,0) * .05)}

/* Bilderrahmen in exakt dem Bildformat */
.ts-frame{position:absolute;left:var(--fl,0px);top:var(--ft,0px);width:var(--fw,100%);height:var(--fh,100%);overflow:hidden;border-radius:var(--fr,16px);box-shadow:0 24px 60px rgba(10,20,64,.28),0 0 0 1px rgba(255,255,255,.35) inset;z-index:2}
.ts-story .ts-frame img.ts-bg,.ts-story .ts-frame img.ts-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:translate,scale}
.ts-frame .ts-bg{scale:calc(1.035 - var(--p,0) * .03);transform-origin:var(--kb,50% 50%)}
.ts-frame .ts-fg{translate:0 calc((var(--p,0) - .5) * -1.2%);transform-origin:50% 100%}

/* Text wie auf der Buchseite */
.ts-text{position:absolute;z-index:3;left:50%;top:var(--tt,auto);bottom:auto;translate:-50% 0;width:min(820px,calc(100% - 32px));margin:0;text-align:center;
  font:700 clamp(18px,2.1vw,30px)/1.3 var(--ff-body);color:#13235E;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:14px;padding:clamp(12px,1.6vw,20px) clamp(16px,2.6vw,30px);box-shadow:0 14px 40px rgba(10,20,64,.18);opacity:0;transition:opacity .45s}
.ts-line{display:block}
.ts-w{display:inline-block;opacity:0;translate:0 .45em;filter:blur(6px);transition:opacity .5s,translate .5s cubic-bezier(.2,.8,.2,1),filter .5s;transition-delay:calc(var(--w) * 60ms)}
.is-in .ts-text{opacity:1}
.is-in .ts-w{opacity:1;translate:0 0;filter:blur(0)}
.is-out .ts-text{opacity:0;transition-delay:0s}

/* ---------- Einstieg (Buchumschlag) ---------- */
.ts-intro .ts-stage{background:#DCE6F7}
.ts-story .ts-intro img.ts-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;scale:calc(1.08 - var(--p,0) * .06)}
.ts-intro .ts-stage::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(220,230,247,.95) 0%,rgba(220,230,247,.82) 36%,rgba(220,230,247,0) 62%)}
.ts-intro-txt{position:absolute;z-index:3;left:max(16px,calc((100% - var(--wrap,1240px)) / 2 + 16px));top:50%;translate:0 -50%;max-width:min(540px,calc(100% - 32px))}
.ts-intro-txt h2{font-size:clamp(40px,5.2vw,80px);line-height:.9;margin:10px 0 16px;color:#0B1335}
.ts-intro-txt p{font:600 clamp(16px,1.5vw,20px)/1.45 var(--ff-body);color:#1B2C6B;margin:0 0 22px;max-width:44ch}
.ts-story .ts-intro img.ts-peek{position:absolute;z-index:2;right:max(0px,calc((100% - var(--wrap,1240px)) / 2 - 40px));bottom:0;width:min(62%,880px);height:auto;object-fit:contain;opacity:0;animation:ts-pop 1.4s .35s cubic-bezier(.34,1.56,.64,1) forwards;transform-origin:50% 100%;translate:0 calc(var(--p,0) * 8%)}
.ts-scroll{display:inline-flex;align-items:center;gap:10px;font:700 13px/1 var(--ff-body);letter-spacing:.1em;text-transform:uppercase;color:var(--devil)}
.ts-scroll i{width:22px;height:34px;border:2px solid currentColor;border-radius:12px;position:relative}
.ts-scroll i::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:currentColor;animation:ts-wheel 1.6s infinite}
@keyframes ts-pop{from{opacity:0;scale:.86}to{opacity:1;scale:1}}
@keyframes ts-wheel{0%{opacity:0;translate:0 0}30%{opacity:1}100%{opacity:0;translate:0 12px}}

/* ---------- Effekte je Szene ---------- */
/* Kamerafahrt (Ken Burns) zum Fokuspunkt */
[data-fx="kenburns"] .ts-frame .ts-bg,[data-fx="sparkle"] .ts-frame .ts-bg,[data-fx="fork"] .ts-frame .ts-bg{scale:calc(1.01 + var(--p,0) * .09)}
/* Ankommen: Figuren laufen auf die Halle zu */
[data-fx="arrive"] .ts-frame .ts-fg{translate:calc((1 - var(--p,0)) * -5%) calc((1 - var(--p,0)) * 3%);scale:calc(1.07 - var(--p,0) * .07)}
[data-fx="arrive"].is-in .ts-frame .ts-fg{animation:ts-walk .9s ease-in-out infinite}
@keyframes ts-walk{0%,100%{rotate:-.5deg}50%{rotate:.5deg}}
/* Hereinwatscheln (von rechts) */
[data-fx="waddle"] .ts-frame .ts-fg{translate:18% 0;opacity:0;transition:translate 1.6s cubic-bezier(.2,.8,.2,1),opacity .5s}
[data-fx="waddle"].is-in .ts-frame .ts-fg{translate:0 0;opacity:1;animation:ts-waddle .45s ease-in-out 4}
@keyframes ts-waddle{0%,100%{rotate:-1.2deg}50%{rotate:1.2deg}}
/* Begrüßen: federt hoch, wiegt sich */
[data-fx="greet"] .ts-frame .ts-fg{opacity:0;translate:0 14%;transition:opacity .5s,translate 1.1s cubic-bezier(.34,1.56,.64,1)}
[data-fx="greet"].is-in .ts-frame .ts-fg{opacity:1;translate:0 0;animation:ts-sway 3.2s 1.1s ease-in-out infinite}
@keyframes ts-sway{0%,100%{rotate:0deg}30%{rotate:.9deg}70%{rotate:-.7deg}}
/* Wackelig */
[data-fx="wobble"].is-in .ts-frame .ts-fg{animation:ts-wobble 1.1s ease-in-out infinite}
@keyframes ts-wobble{0%,100%{rotate:0deg;translate:0 0}25%{rotate:-1.6deg;translate:-.6% 0}75%{rotate:1.6deg;translate:.6% 0}}
/* Gleiten (seitlich mit dem Scrollen) */
[data-fx="glide"] .ts-frame .ts-fg{translate:calc((var(--p,0) - .5) * -8%) 0}
[data-fx="glide"].is-in .ts-frame .ts-fg{animation:ts-glide 2.4s ease-in-out infinite}
@keyframes ts-glide{0%,100%{rotate:-.4deg}50%{rotate:.4deg}}
/* Hinfallen und Aufstehen */
[data-fx="fall"].is-in .ts-frame .ts-fg{animation:ts-fall 2.6s cubic-bezier(.3,.7,.2,1) 1 both}
@keyframes ts-fall{0%{translate:0 -6%;rotate:-3deg}35%{translate:0 1.5%;rotate:1deg}55%{translate:0 0;rotate:0deg}100%{translate:0 0}}
/* Jubeln */
[data-fx="cheer"].is-in .ts-frame .ts-fg{animation:ts-cheer .55s ease-in-out infinite alternate}
@keyframes ts-cheer{from{translate:0 0}to{translate:0 -1.6%}}
/* Glitzernde Eisfläche */
.ts-sparkle{position:absolute;inset:0;z-index:2;pointer-events:none}
.ts-sparkle i{position:absolute;width:var(--s,10px);height:var(--s,10px);background:radial-gradient(circle,#fff 0 18%,rgba(255,255,255,.6) 30%,transparent 62%);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:ts-twinkle var(--d,1.8s) var(--dl,0s) ease-in-out infinite;opacity:0}
.ts-sparkle i:nth-child(3n){--s:16px;--d:2.2s}.ts-sparkle i:nth-child(4n){--s:22px;--d:2.6s}.ts-sparkle i:nth-child(5n){--dl:.7s}.ts-sparkle i:nth-child(7n){--dl:1.3s}
.ts-sparkle i:nth-child(1){left:12%;top:58%}.ts-sparkle i:nth-child(2){left:22%;top:72%}.ts-sparkle i:nth-child(3){left:31%;top:55%}.ts-sparkle i:nth-child(4){left:40%;top:80%}.ts-sparkle i:nth-child(5){left:48%;top:62%}.ts-sparkle i:nth-child(6){left:57%;top:74%}
.ts-sparkle i:nth-child(7){left:63%;top:56%}.ts-sparkle i:nth-child(8){left:71%;top:68%}.ts-sparkle i:nth-child(9){left:79%;top:59%}.ts-sparkle i:nth-child(10){left:86%;top:77%}.ts-sparkle i:nth-child(11){left:8%;top:84%}.ts-sparkle i:nth-child(12){left:35%;top:66%}
.ts-sparkle i:nth-child(13){left:53%;top:86%}.ts-sparkle i:nth-child(14){left:67%;top:84%}.ts-sparkle i:nth-child(15){left:91%;top:63%}.ts-sparkle i:nth-child(16){left:17%;top:64%}.ts-sparkle i:nth-child(17){left:44%;top:57%}.ts-sparkle i:nth-child(18){left:75%;top:79%}
@keyframes ts-twinkle{0%,100%{opacity:0;scale:.4;rotate:0deg}50%{opacity:1;scale:1;rotate:45deg}}
/* Abzeichen mit Konfetti */
.ts-badge{position:absolute;z-index:4;right:7%;top:9%;width:clamp(96px,16%,170px);aspect-ratio:1;opacity:0;scale:.3;rotate:-25deg;transition:opacity .3s .5s,scale .8s .5s cubic-bezier(.34,1.56,.64,1),rotate .8s .5s cubic-bezier(.34,1.56,.64,1)}
.ts-badge span{display:grid;place-content:center;width:100%;height:100%;border-radius:50%;text-align:center;background:radial-gradient(circle at 35% 30%,#FFE79A,#F2B705 55%,#C98A00);color:#13235E;font:900 clamp(15px,1.7vw,22px)/1 var(--ff-display);text-transform:uppercase;box-shadow:0 0 0 6px #fff,0 0 0 9px #F2B705,0 14px 30px rgba(10,20,64,.35)}
.ts-badge small{display:block;font:700 10px/1 var(--ff-body);letter-spacing:.12em;margin-bottom:4px}
.is-in .ts-badge{opacity:1;scale:1;rotate:-8deg}
.ts-confetti{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;container-type:size}
.ts-confetti i{position:absolute;left:calc(var(--i) * 4%);top:-6%;width:9px;height:14px;border-radius:2px;background:var(--c,#3A35F0);opacity:0}
.ts-confetti i:nth-child(3n){--c:#F2B705}.ts-confetti i:nth-child(3n+1){--c:#E0408A}.ts-confetti i:nth-child(4n){--c:#2BB673;width:7px;height:10px}
.ts-confetti i:nth-child(1){--i:2}.ts-confetti i:nth-child(2){--i:6}.ts-confetti i:nth-child(3){--i:10}.ts-confetti i:nth-child(4){--i:14}.ts-confetti i:nth-child(5){--i:18}.ts-confetti i:nth-child(6){--i:22}.ts-confetti i:nth-child(7){--i:3}.ts-confetti i:nth-child(8){--i:8}
.ts-confetti i:nth-child(9){--i:12}.ts-confetti i:nth-child(10){--i:16}.ts-confetti i:nth-child(11){--i:20}.ts-confetti i:nth-child(12){--i:24}.ts-confetti i:nth-child(13){--i:1}.ts-confetti i:nth-child(14){--i:5}.ts-confetti i:nth-child(15){--i:9}.ts-confetti i:nth-child(16){--i:13}
.ts-confetti i:nth-child(17){--i:17}.ts-confetti i:nth-child(18){--i:21}.ts-confetti i:nth-child(19){--i:4}.ts-confetti i:nth-child(20){--i:11}.ts-confetti i:nth-child(21){--i:15}.ts-confetti i:nth-child(22){--i:19}.ts-confetti i:nth-child(23){--i:23}.ts-confetti i:nth-child(24){--i:7}
.is-in .ts-confetti i{animation:ts-confetti 2.6s calc(var(--i) * 45ms + .4s) cubic-bezier(.2,.6,.4,1) both}
@keyframes ts-confetti{0%{opacity:1;translate:0 0;rotate:0deg}100%{opacity:0;translate:calc((var(--i) - 12) * 6px) 125cqh;rotate:540deg}}
/* Weggabelung */
[data-fx="fork"] .ts-frame::after{content:"";position:absolute;z-index:2;left:49.4%;top:0;width:4px;margin-left:-2px;height:calc(var(--p,0) * 180%);max-height:100%;background:linear-gradient(#fff,rgba(255,255,255,.2));box-shadow:0 0 24px #fff;opacity:.9}
.ts-fork{position:absolute;z-index:4;left:var(--fl,0px);width:var(--fw,100%);top:calc(var(--ft,0px) + 16px);display:flex;justify-content:space-between;gap:12px;padding:0 16px;pointer-events:none}
.ts-fork a{pointer-events:auto;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 14px;min-width:min(300px,42%);text-decoration:none;color:#fff;border-radius:14px;padding:14px 18px;box-shadow:0 18px 40px rgba(10,20,64,.3);opacity:0;translate:0 -18px;transition:opacity .6s,translate .8s cubic-bezier(.34,1.56,.64,1),transform .2s}
.ts-fork a small{grid-column:1;font:700 11px/1 var(--ff-body);letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.ts-fork a b{grid-column:1;font:900 clamp(20px,2.2vw,30px)/1 var(--ff-display);text-transform:uppercase}
.ts-fork a span{grid-row:1/3;grid-column:2;font-size:28px;transition:translate .2s}
.ts-fork a:hover{transform:translateY(-3px)}.ts-fork a:hover span{translate:6px 0}
.ts-fork-l{background:linear-gradient(135deg,#B0175A,#E0408A)}
.ts-fork-r{background:linear-gradient(135deg,var(--devil),#2A25D0);text-align:right;grid-template-columns:auto 1fr}
.ts-fork-r small,.ts-fork-r b{grid-column:2}.ts-fork-r span{grid-column:1}
.is-in .ts-fork a{opacity:1;translate:0 0}
.is-in .ts-fork-r{transition-delay:.25s}

/* Infokarten (im Bild verankert) */
.ts-hot{position:absolute;z-index:5;left:var(--x);top:var(--y)}
.ts-hot-btn{display:flex;align-items:center;gap:10px;border:0;cursor:pointer;padding:0;background:none;color:#13235E;opacity:0;scale:.6;transition:opacity .4s .6s,scale .6s .6s cubic-bezier(.34,1.56,.64,1)}
.ts-hot-btn span{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;font:700 26px/1 var(--ff-body);color:var(--devil);box-shadow:0 8px 24px rgba(10,20,64,.3);transition:rotate .2s}
.ts-hot-btn span::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #fff;animation:ts-ping 1.8s infinite}
.ts-hot-btn em{font:700 14px/1 var(--ff-body);font-style:normal;background:rgba(255,255,255,.95);padding:9px 12px;border-radius:999px;box-shadow:0 8px 24px rgba(10,20,64,.2);white-space:nowrap}
.ts-hot-btn[aria-expanded="true"] span{rotate:45deg}
.is-in .ts-hot-btn{opacity:1;scale:1}
@keyframes ts-ping{0%{opacity:.9;scale:1}100%{opacity:0;scale:1.6}}
.ts-hot-card{position:absolute;left:0;top:52px;width:min(300px,70vw);background:#fff;color:#13235E;border-radius:12px;padding:16px 18px;box-shadow:0 18px 40px rgba(10,20,64,.3);animation:ts-card .35s cubic-bezier(.2,.8,.2,1)}
.ts-hot-card b{display:block;font:800 20px/1.1 var(--ff-display);text-transform:uppercase;margin-bottom:6px}
.ts-hot-card p{margin:0;font-size:15px;line-height:1.45;color:#3E4660}
.ts-hot-card a{display:inline-block;margin-top:10px;font-weight:700;color:var(--devil)}
@keyframes ts-card{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}

/* Fortschritt: Puck auf der Eislinie */
.ts-progress{position:sticky;z-index:6;top:calc(100svh - 22px);height:0;pointer-events:none}
.ts-track{position:relative;margin:0 auto;width:min(420px,70vw);height:4px;border-radius:2px;background:rgba(19,35,94,.18);display:flex;justify-content:space-between;opacity:0;transition:opacity .4s}
.ts-on.ts-active .ts-track{opacity:1}
.ts-track b{width:6px;height:6px;margin-top:-1px;border-radius:50%;background:rgba(19,35,94,.35)}
.ts-puck{position:absolute;top:50%;left:calc(var(--sp,0) * 100%);width:18px;height:12px;margin:-6px 0 0 -9px;border-radius:50%;background:#0B1335;box-shadow:0 2px 0 #000,0 4px 10px rgba(0,0,0,.35)}

/* Schnee */
.ts-snow{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:0;transition:opacity .6s}
.ts-on.ts-active .ts-snow{opacity:1}

/* Ausklang */
.ts-outro{position:relative;z-index:6;background:radial-gradient(120% 90% at 50% 0,#2A2FB8,var(--navy) 55%,var(--ink));color:#fff;padding:clamp(60px,9vw,120px) 0;text-align:center}
.ts-outro .ts-kicker{color:#AFAEFF}
.ts-outro h2{font-size:clamp(38px,5.4vw,76px);line-height:.92;margin:12px auto 18px;color:#fff;max-width:16ch}
.ts-outro p{max-width:58ch;margin:0 auto;color:#DCE2F0;font-size:18px}
.ts-outro .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.ts-story .ts-outro img.ts-outro-img{width:min(420px,80%);height:auto;margin:0 auto 10px}

/* ---------- Hochformat (Handy, Tablet hochkant) ---------- */
@media (orientation:portrait){
  .ts-text{font-size:clamp(17px,4.6vw,22px)}
  .ts-fork{flex-direction:column;align-items:stretch;gap:8px;top:calc(var(--ft,0px) + 10px);padding:0 10px}
  .ts-fork a{min-width:0;padding:12px 16px}
  .ts-intro .ts-stage::before{background:linear-gradient(180deg,rgba(220,230,247,.96) 0%,rgba(220,230,247,.85) 40%,rgba(220,230,247,0) 64%)}
  .ts-intro-txt{top:clamp(20px,5vh,48px);translate:0 0}
  .ts-intro-txt h2{font-size:clamp(38px,11vw,60px)}
  .ts-story .ts-intro img.ts-peek{right:-6%;width:112%}
  .ts-hot-btn em{font-size:13px;padding:8px 10px}
  .ts-badge{right:5%;top:6%}
}

/* ---------- Ohne Animation (kein JS oder „Bewegung reduzieren“): Bilderbuch untereinander ---------- */
.ts-story:not(.ts-on){background:#DCE6F7}
.ts-story:not(.ts-on) .ts-scene{height:auto;padding:24px 16px}
.ts-story:not(.ts-on) .ts-intro{padding:0}
.ts-story:not(.ts-on) .ts-stage{position:relative;top:0;height:auto;overflow:visible;background:none}
.ts-story:not(.ts-on) .ts-intro .ts-stage{height:80svh;overflow:hidden}
.ts-story:not(.ts-on) .ts-stage img.ts-blur,.ts-story:not(.ts-on) .ts-progress,.ts-story:not(.ts-on) .ts-snow,.ts-story:not(.ts-on) .ts-confetti,.ts-story:not(.ts-on) .ts-sparkle{display:none}
.ts-story:not(.ts-on) .ts-frame{position:relative;left:0;top:0;width:min(900px,100%);height:auto;aspect-ratio:1600/1304;margin:0 auto}
.ts-story:not(.ts-on) .ts-frame img{scale:none!important;translate:none!important;opacity:1!important;animation:none!important}
.ts-story:not(.ts-on) .ts-text{position:relative;left:auto;top:auto;translate:none;margin:14px auto 0;opacity:1}
.ts-story:not(.ts-on) .ts-w,.ts-story:not(.ts-on) .ts-fork a,.ts-story:not(.ts-on) .ts-hot-btn,.ts-story:not(.ts-on) .ts-badge{opacity:1;translate:none;filter:none;scale:none}
.ts-story:not(.ts-on) .ts-fork{position:relative;left:auto;top:auto;width:min(900px,100%);margin:14px auto 0;padding:0}
.ts-story:not(.ts-on) img.ts-peek{opacity:1;animation:none}
@media (prefers-reduced-motion:reduce){.ts-w,.ts-text,.ts-fork a,.ts-hot-btn,.ts-badge{transition:none}}
/* Infokarte am rechten Rand: Beschriftung und Karte nach links */
.ts-hot.flip .ts-hot-btn{flex-direction:row-reverse;translate:calc(-100% + 40px) 0}
.ts-hot.flip .ts-hot-card{left:auto;right:0}
@media (orientation:portrait){.ts-fork{left:0;width:100%}}
/* Nur im sichtbaren Teil des Rahmens platzieren (Hochformat schneidet seitlich) */
.ts-hot{left:clamp(calc(var(--hidl,0px) + 8px),var(--x),calc(100% - var(--hidr,0px) - 52px))}
.ts-badge{right:calc(var(--hidr,0px) + 4%)}
/* Einstieg: das Wichtigste auf einen Blick + Wahl Geschichte / Infos */
.ts-start{position:relative;overflow:hidden;background:linear-gradient(160deg,#EEF2F8 0%,#DCE6F7 60%,#C9D7F2 100%);padding:clamp(36px,6vw,80px) 0 clamp(40px,6vw,72px);color:#0B1335}
.ts-start-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
.ts-start .ts-kicker{color:var(--devil)}
.ts-start h1{font-size:clamp(44px,6vw,84px);line-height:.9;margin:10px 0 16px;color:#0B1335}
.ts-start-lede{font:600 clamp(16.5px,1.5vw,19px)/1.5 var(--ff-body);color:#1B2C6B;margin:0 0 22px;max-width:52ch}
.ts-facts{margin:0 0 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ts-facts div{background:rgba(255,255,255,.7);border:1px solid rgba(19,35,94,.1);border-radius:8px;padding:12px 14px}
.ts-facts div:first-child{grid-column:1/-1;background:#0B1335;border-color:#0B1335;color:#fff}
.ts-facts dt{font:800 13px/1.2 var(--ff-display);text-transform:uppercase;letter-spacing:.06em;color:var(--devil);margin-bottom:4px}
.ts-facts div:first-child dt{color:#AFAEFF}
.ts-facts dd{margin:0;font-weight:600;line-height:1.4}
.ts-when{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:17px}
.ts-when b{font-family:var(--ff-display);font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.ts-start-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0}
.ts-start-cta span{font-size:14px;color:#3A4A7E;max-width:34ch}
.ts-choice{display:grid;gap:14px}
.ts-choice a{position:relative;display:grid;align-content:end;gap:4px;padding:22px 64px 22px 22px;border-radius:12px;text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .2s,box-shadow .2s}
.ts-choice a:hover,.ts-choice a:focus-visible{transform:translateY(-3px);box-shadow:0 18px 36px rgba(2,7,34,.18)}
.ts-choice small{font:700 12px/1.2 var(--ff-body);letter-spacing:.1em;text-transform:uppercase}
.ts-choice b{font:900 clamp(24px,2.4vw,32px)/.95 var(--ff-display);text-transform:uppercase}
.ts-choice span{font-size:15px;line-height:1.4}
.ts-choice i{position:absolute;right:20px;bottom:20px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font:700 18px/1 var(--ff-body);font-style:normal}
.ts-choice-story{min-height:240px;background:radial-gradient(120% 120% at 100% 0,#2A2FB8,var(--navy) 60%,var(--ink));color:#fff}
.ts-choice-story small{color:#AFAEFF}
.ts-choice-story span{color:#DCE2F0;max-width:min(26ch,58%)}.ts-choice-story b{max-width:62%}
.ts-choice-story i{background:#fff;color:var(--navy);animation:ts-nudge 1.8s infinite}
.ts-story-peek,.ts-choice img.ts-start-peek{position:absolute;z-index:-1;right:-4%;bottom:-10%;width:min(46%,240px);height:auto;max-width:none;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));transition:translate .3s}
.ts-choice-story:hover img.ts-start-peek{translate:0 -6px}
.ts-choice-story::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(6,16,63,.92) 0%,rgba(6,16,63,.7) 45%,rgba(6,16,63,0) 75%)}
.ts-choice-info{background:#fff;color:#0B1335;border:2px solid var(--devil)}
.ts-choice-info small{color:var(--devil)}
.ts-choice-info span{color:#3A4A7E}
.ts-choice-info i{background:var(--devil);color:#fff}
@keyframes ts-nudge{0%,100%{translate:0 0}50%{translate:0 4px}}
@media (max-width:900px){.ts-start-grid{grid-template-columns:1fr}.ts-choice{grid-template-columns:1fr 1fr}.ts-choice-story{min-height:220px}}
@media (max-width:600px){.ts-choice{grid-template-columns:1fr}.ts-when{flex-direction:column}.ts-facts{gap:8px}.ts-facts div{padding:10px 12px}.ts-facts dd{font-size:14.5px}.ts-start{padding-top:28px}.ts-start h1{font-size:46px;margin-bottom:12px}.ts-start-lede{font-size:16px;margin-bottom:18px}.ts-choice-story{min-height:190px}}
@media (prefers-reduced-motion:reduce){.ts-choice-story i{animation:none}}
:root[data-theme="dark"] .ts-start{background:linear-gradient(160deg,#14207A 0%,#0A1440 60%,#060E33 100%);color:#fff}
:root[data-theme="dark"] .ts-start h1{color:#fff}
:root[data-theme="dark"] .ts-start-lede{color:#DCE2F0}
:root[data-theme="dark"] .ts-start .ts-kicker,:root[data-theme="dark"] .ts-facts dt{color:#AFAEFF}
:root[data-theme="dark"] .ts-facts div{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .ts-facts div:first-child{background:var(--devil);border-color:var(--devil)}
:root[data-theme="dark"] .ts-start-cta span{color:#AEB7CC}
/* Während der Geschichte: jederzeit zu den Infos springen */
.ts-skipbar{position:sticky;z-index:7;top:calc(100svh - 22px);height:0;pointer-events:none}
.ts-skip{position:absolute;right:max(12px,calc((100% - var(--wrap,1240px)) / 2));top:-17px;pointer-events:auto;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:rgba(11,19,53,.86);color:#fff;font:700 13px/1 var(--ff-body);text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.25);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.ts-on.ts-active .ts-skip{opacity:1;visibility:visible}
.ts-skip:hover,.ts-skip:focus-visible{background:var(--devil);color:#fff}
.ts-story:not(.ts-on) .ts-skipbar{display:none}
@media (orientation:portrait){.ts-skipbar{top:calc(100svh - 54px)}}
.ts-choice a.ts-choice-story{padding:22px 22px 74px}
.ts-choice-story i{left:22px;right:auto}
#infos:focus,#abenteuer:focus{outline:none}

/* ===================== Kino: formatfüllend mit Kamerafahrt (Entwurf 16.10.2026) ===================== */
.ts-kino .ts-stage{background:#0A1440}
.ts-kino .ts-stage img.ts-blur{display:none}
.ts-kino .ts-frame{border-radius:0;box-shadow:none}
.ts-kino .ts-stage::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:42%;background:linear-gradient(rgba(10,20,64,0),rgba(10,20,64,.55));pointer-events:none}
.ts-kino .ts-intro .ts-stage::after{display:none}
.ts-kino .ts-text{top:auto;bottom:calc(52px + env(safe-area-inset-bottom,0px));width:min(760px,calc(100% - 28px))}
.ts-kino .ts-fork{left:0;width:100%;top:16px}
.ts-kino .ts-hot{top:clamp(calc(var(--hidt,0px) + 10px),var(--y),100%)}
.ts-kino .ts-badge{top:calc(var(--hidt,0px) + 5%)}
.ts-kino .ts-track{background:rgba(255,255,255,.35)}
.ts-kino .ts-track b{background:rgba(255,255,255,.6)}
.ts-kino .ts-puck{background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.4),0 4px 10px rgba(0,0,0,.35)}
@media (orientation:portrait){.ts-kino .ts-text{bottom:calc(60px + env(safe-area-inset-bottom,0px))}}

/* ===================== Ruhige Fassung bei „Bewegung reduzieren“: einrasten + überblenden, nichts bewegt sich ===================== */
.ts-calm .ts-frame img,.ts-calm img.ts-cover,.ts-calm img.ts-peek,.ts-calm img.ts-blur{scale:none!important;translate:none!important;rotate:none!important;animation:none!important;opacity:1!important}
.ts-calm .ts-w{translate:none;filter:none;transition:opacity .45s;transition-delay:calc(var(--w) * 40ms)}
.ts-calm .ts-text{transition:opacity .45s}
.ts-calm .ts-snow,.ts-calm .ts-confetti,.ts-calm .ts-sparkle{display:none}
.ts-calm .ts-badge{scale:1;rotate:-8deg;transition:opacity .45s}
.ts-calm .ts-fork a,.ts-calm .ts-hot-btn{translate:none;scale:1;transition:opacity .45s}
.ts-calm .ts-hot-btn span::before,.ts-calm .ts-scroll i::after{animation:none}
.ts-calm [data-fx="fork"] .ts-frame::after{height:100%}
@media (orientation:portrait){.ts-kino .ts-badge{right:auto;left:calc(var(--hidl,0px) + 14px);top:calc(var(--hidt,0px) + 14px);width:104px}}
/* Einstieg: Schnuppertraining je Sparte */
.ts-sns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ts-sn{position:relative;display:grid;gap:2px;padding:14px 44px 14px 16px;border-radius:10px;background:var(--devil);color:#fff;text-decoration:none;box-shadow:0 10px 24px rgba(58,53,240,.25);transition:transform .2s,box-shadow .2s}
.ts-sn+.ts-sn{background:linear-gradient(135deg,#B0175A,#E0408A);box-shadow:0 10px 24px rgba(176,23,90,.25)}
.ts-sn:hover,.ts-sn:focus-visible{transform:translateY(-3px)}
.ts-sn small{font:700 11.5px/1.2 var(--ff-body);letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.ts-sn b{font:900 22px/1 var(--ff-display);text-transform:uppercase}
.ts-sn span{font-size:14px;line-height:1.35;opacity:.95}
.ts-sn em{font-style:normal;font-weight:700;font-size:13.5px;margin-top:4px}
.ts-sn i{position:absolute;right:14px;top:14px;font-style:normal;font-size:18px}
.ts-sn-note{margin:10px 0 0;font-size:14px;color:#3A4A7E}
:root[data-theme="dark"] .ts-sn-note{color:#AEB7CC}
@media (max-width:600px){.ts-sns{grid-template-columns:1fr}}