/* TEAMDROP · Animierter Ablauf (td-anim)
   Nutzt die Variablen aus style.css (--blue, --lime, --ink, --soft, --line, --rule, --quiet, --display, --text).
   Ohne JavaScript oder bei "Bewegung reduzieren" zeigt die Sektion die sechs Schritte statisch. */

.td-anim{--td-blue:var(--blue,#32349a);--td-lime:var(--lime,#9fd122);--td-ink:var(--ink,#0f1118);--td-soft:var(--soft,#f6f7fb);--td-line:var(--line,#e5e8ef);--td-quiet:var(--quiet,rgba(15,17,24,.66));--td-display:var(--display,Guton,Inter,system-ui,sans-serif);--td-text:var(--text,Inter,system-ui,sans-serif);--td-ease:cubic-bezier(.22,.8,.22,1)}
.td-anim__sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.td-anim__defs{position:absolute;width:0;height:0;overflow:hidden}
.td-anim h3,.td-anim h4{margin:0}
.td-anim ul,.td-anim ol{list-style:none;margin:0;padding:0}
.td-anim figure{margin:0}

/* ---------- Statische Ansicht (Standard, ohne JS / reduzierte Bewegung) ---------- */
.td-anim__stage{position:relative}
.td-anim__s1,.td-anim__s2,.td-anim__s4,.td-anim__layer,.td-anim__rail,.td-anim__visuals,.td-anim__drop,.td-anim__mdrop,.td-anim__controls,.td-anim__crew{display:none}
.td-anim__s3-head{margin-bottom:28px}
.td-anim__s3-head .td-anim__kicker{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--td-quiet);margin:0 0 12px}
.td-anim__s3-head .td-anim__title{font-family:var(--td-display);font-weight:900;letter-spacing:-.05em;line-height:1;font-size:clamp(26px,3vw,40px)}
.td-anim__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule,rgba(15,17,24,.13))}
.td-anim__step{padding:26px 24px 30px 0;border-bottom:1px solid var(--rule,rgba(15,17,24,.13));display:grid;gap:6px;align-content:start}
.td-anim__step-n{font-size:12px;font-weight:600;letter-spacing:.09em;color:var(--td-quiet)}
.td-anim__step-time{margin:0;font-family:var(--td-display);font-weight:600;color:var(--td-blue);font-size:15px;letter-spacing:-.01em}
.td-anim__step-time b{font-weight:600;font-size:clamp(40px,4vw,56px);letter-spacing:-.05em;line-height:1;margin-right:6px}
.td-anim__step h4{font-family:var(--td-display);font-weight:900;font-size:22px;letter-spacing:-.04em;line-height:1.1;margin-top:4px}
.td-anim__step p:last-child{margin:0;color:var(--td-quiet);font-size:15px;line-height:1.6;max-width:36ch}
.td-anim__s5{margin-top:36px}
.td-anim__s5-copy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.td-anim__s5 .td-anim__title{font-family:var(--td-display);font-weight:900;letter-spacing:-.05em;line-height:1;font-size:clamp(26px,3vw,40px)}
.td-anim__s5 .td-anim__title span:last-child{color:var(--td-blue)}
@media (max-width:900px){.td-anim__steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.td-anim__steps{grid-template-columns:1fr}}

/* ---------- Animierte Ansicht ---------- */
.td-anim--motion .td-anim__stage{--u:1cqw;font-size:var(--u);container-type:inline-size;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--td-line);isolation:isolate;font-family:var(--td-text);color:var(--td-ink);line-height:1.35;-webkit-user-select:none;user-select:none}
.td-anim--motion .td-anim__stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent calc(25% - 1px),rgba(15,17,24,.035) 25%,transparent calc(25% + 1px),transparent calc(50% - 1px),rgba(15,17,24,.035) 50%,transparent calc(50% + 1px),transparent calc(75% - 1px),rgba(15,17,24,.035) 75%,transparent calc(75% + 1px))}
.td-anim--motion .td-anim__s1,.td-anim--motion .td-anim__s2,.td-anim--motion .td-anim__s4,.td-anim--motion .td-anim__layer,.td-anim--motion .td-anim__rail,.td-anim--motion .td-anim__visuals,.td-anim--motion .td-anim__crew{display:block}
.td-anim--motion .td-anim__controls{display:flex}
.td-anim--motion .td-anim__drop,.td-anim--motion .td-anim__mdrop{display:block}
.td-anim--motion .td-anim__scene{position:absolute;inset:0;margin:0;pointer-events:none;opacity:0}
.td-anim--motion .td-anim__layer{position:absolute;inset:0;clip-path:circle(0% at 50% 50%)}
.td-anim--motion .td-anim__wave{background:var(--td-blue);z-index:2}
.td-anim--motion .td-anim__s1{z-index:1}
.td-anim--motion .td-anim__s2{z-index:3}
.td-anim--motion .td-anim__s3{z-index:4}
.td-anim--motion .td-anim__ink{background:var(--td-ink);z-index:5}
.td-anim--motion .td-anim__s4{z-index:6}
.td-anim--motion .td-anim__soft{background:var(--td-soft);z-index:7}
.td-anim--motion .td-anim__s5{z-index:8}
.td-anim--motion .td-anim__drop,.td-anim--motion .td-anim__mdrop{position:absolute;left:0;top:0;z-index:10;width:calc(var(--u)*4.2);height:auto;aspect-ratio:100/128;fill:var(--td-blue);transform-origin:50% 100%;opacity:0;overflow:visible;pointer-events:none}
.td-anim--motion .td-anim__mdrop{width:calc(var(--u)*1.9)}

/* Typo in der Bühne */
.td-anim--motion .td-anim__kicker{margin:0 0 calc(var(--u)*1.3);font-size:calc(var(--u)*1.02);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--td-quiet)}
.td-anim--motion .td-anim__title{font-family:var(--td-display);font-weight:900;letter-spacing:-.05em;line-height:.95;font-size:calc(var(--u)*5.2);text-wrap:balance}
.td-anim--motion .td-anim__title span{display:inline-block}
.td-anim--motion .td-anim__sub{margin:calc(var(--u)*2) 0 0;font-size:calc(var(--u)*1.42);line-height:1.6;color:var(--td-quiet);max-width:calc(var(--u)*34)}

/* Szene 1 */
.td-anim--motion .td-anim__s1-copy{position:absolute;left:5%;top:0;bottom:0;width:38%;display:flex;flex-direction:column;justify-content:center}
.td-anim--motion .td-anim__chaos{position:absolute;right:3.5%;top:7%;width:51%;height:86%;filter:saturate(.55)}
.td-anim__ci{position:absolute;opacity:0}
.td-anim__mail{background:#fff;border:1px solid var(--td-line);border-radius:calc(var(--u)*.9);padding:calc(var(--u)*1.1) calc(var(--u)*1.3);box-shadow:0 calc(var(--u)*.5) calc(var(--u)*1.6) rgba(15,17,24,.07)}
.td-anim__mail p{margin:0}
.td-anim__mail-from{display:flex;align-items:center;gap:calc(var(--u)*.6);font-size:calc(var(--u)*1);color:#727892}
.td-anim__mail-from i{width:calc(var(--u)*1.7);height:calc(var(--u)*1.7);border-radius:50%;background:#d6d9e4;flex:none}
.td-anim__mail-from b{color:#4a4e62;font-weight:600}
.td-anim__mail-from span{margin-left:auto}
.td-anim__mail-sub{margin-top:calc(var(--u)*.6)!important;font-size:calc(var(--u)*1.2);font-weight:600;color:#3b3f52;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-anim__bars{display:grid;gap:calc(var(--u)*.45);margin-top:calc(var(--u)*.8)!important}
.td-anim__bars i{display:block;height:calc(var(--u)*.55);border-radius:9px;background:#eceef4}
.td-anim__bars i:last-child{width:62%}
.td-anim__unread{position:absolute;right:calc(var(--u)*-1);top:calc(var(--u)*-1);min-width:calc(var(--u)*2.4);height:calc(var(--u)*2.4);padding:0 calc(var(--u)*.5);border-radius:99px;background:#b24c4c;color:#fff;font-size:calc(var(--u)*1.1);font-weight:700;display:grid;place-items:center}
.td-anim__m1{left:0;top:3%;width:47%}
.td-anim__m2{left:22%;top:25%;width:52%}
.td-anim__m3{left:6%;top:85%;width:56%}
.td-anim__shirts{left:58%;top:0;width:40%;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*.6);background:#fff;border:1px solid var(--td-line);border-radius:calc(var(--u)*.9);padding:calc(var(--u)*1) calc(var(--u)*1.1) calc(var(--u)*.8)}
.td-anim__shirts figure{flex:1;text-align:center}
.td-anim__shirts svg{display:block;width:100%;height:auto}
.td-anim__shirts figcaption{font-size:calc(var(--u)*.85);color:#727892;margin-top:calc(var(--u)*.3);white-space:nowrap}
.td-anim__neq{font-family:var(--td-display);font-weight:900;font-size:calc(var(--u)*2.6);color:#b24c4c;line-height:1}
.td-anim__sheet{left:36%;top:47%;width:62%;background:#fff;border:1px solid var(--td-line);border-radius:calc(var(--u)*.9);overflow:hidden;box-shadow:0 calc(var(--u)*.5) calc(var(--u)*1.6) rgba(15,17,24,.07)}
.td-anim__sheet-h{margin:0;padding:calc(var(--u)*.7) calc(var(--u)*1.1);font-size:calc(var(--u)*.95);font-weight:600;color:#4f7a5c;background:#eef3ef;border-bottom:1px solid var(--td-line)}
.td-anim__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;font-size:calc(var(--u)*1.05)}
.td-anim__grid>*{padding:calc(var(--u)*.55) calc(var(--u)*1.1);border-bottom:1px solid #f0f1f5;border-right:1px solid #f0f1f5;color:#4a4e62;min-height:calc(var(--u)*2.5)}
.td-anim__grid b{font-weight:600;color:#727892;background:#fafbfc}
.td-anim__gap{background:#fbf3e4;color:#b24c4c!important;font-weight:700}
.td-anim__cats{left:0;top:51%;width:33%;height:30%}
.td-anim__cats span{position:absolute;left:0;width:86%;height:74%;border-radius:calc(var(--u)*.6);background:#e9ebf2;border:1px solid #dcdfe8;padding:calc(var(--u)*1);font-family:var(--td-display);font-weight:900;font-size:calc(var(--u)*1.25);letter-spacing:-.03em;color:#5d6178;line-height:1.05}
.td-anim__cats span:nth-child(1){top:0;left:14%;background:#e2e4ec;color:transparent}
.td-anim__cats span:nth-child(2){top:12%;left:7%;background:#eceef3;color:transparent}
.td-anim__cats span:nth-child(3){top:24%;left:0;background:#f4f5f8}

/* Szene 2 */
.td-anim--motion .td-anim__s2-shirt{position:absolute;left:11%;top:calc(50% - var(--u)*15);width:calc(var(--u)*30);aspect-ratio:1}
.td-anim__s2-tee{display:block;width:100%;height:100%;fill:#fff;stroke:rgba(15,17,24,.16);stroke-width:1.6;overflow:visible}
.td-anim__s2-mark{position:absolute;left:34%;top:26%;width:32%;height:auto;aspect-ratio:53.2/30.9;color:var(--td-blue);opacity:0;overflow:visible}
.td-anim__ripple{position:absolute;left:50%;top:34%;width:22%;aspect-ratio:1;margin:-11% 0 0 -11%;border-radius:50%;border:calc(var(--u)*.3) solid var(--td-lime);opacity:0}
.td-anim--motion .td-anim__s2-title{position:absolute;left:47%;top:0;bottom:0;width:47%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:#fff;font-size:calc(var(--u)*5.6)}
.td-anim--motion .td-anim__s2-title span:last-child{color:var(--td-lime)}

/* Szene 3 */
.td-anim--motion .td-anim__s3-head{position:absolute;left:5%;top:7%;margin:0}
.td-anim--motion .td-anim__s3-head .td-anim__kicker{font-size:calc(var(--u)*1.02);margin:0 0 calc(var(--u)*1)}
.td-anim--motion .td-anim__s3-head .td-anim__title{font-size:calc(var(--u)*2.9);letter-spacing:-.045em}
.td-anim__rail{position:absolute;left:5%;right:5%;top:25%;height:calc(var(--u)*8)}
.td-anim__rail-track{position:absolute;left:5%;right:5%;top:calc(var(--u)*1.25);height:calc(var(--u)*.22)}
.td-anim__rail-line,.td-anim__rail-fill{position:absolute;inset:0;border-radius:9px;transform-origin:0 50%}
.td-anim__rail-line{background:var(--td-line)}
.td-anim__rail-fill{background:var(--td-blue);transform:scaleX(0)}
.td-anim__node{position:absolute;top:0;left:calc(5% + var(--i) * 18%);width:calc(var(--u)*12);margin-left:calc(var(--u)*-6);display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0}
.td-anim__dot{position:relative;display:block;width:calc(var(--u)*2.7);height:calc(var(--u)*2.7);border-radius:50%;background:#fff;border:calc(var(--u)*.22) solid var(--td-line);box-sizing:border-box}
.td-anim__dot i{position:absolute;inset:calc(var(--u)*-.22);border-radius:50%;background:var(--td-blue);transform:scale(0)}
.td-anim__node b{margin-top:calc(var(--u)*.8);font-size:calc(var(--u)*.95);font-weight:600;letter-spacing:.08em;color:var(--td-quiet)}
.td-anim__node>span{font-size:calc(var(--u)*1.15);font-weight:600;color:var(--td-ink);white-space:nowrap}
.td-anim--motion .td-anim__steps{position:absolute;left:5%;top:47%;width:41%;height:46%;display:block;border:0}
.td-anim--motion .td-anim__step{position:absolute;left:0;top:0;right:0;padding:0;border:0;gap:0;opacity:0}
.td-anim--motion .td-anim__step-n{display:block;font-size:calc(var(--u)*1.02);letter-spacing:.09em}
.td-anim--motion .td-anim__step-time{margin-top:calc(var(--u)*.6);font-size:calc(var(--u)*1.5);color:var(--td-blue)}
.td-anim--motion .td-anim__step-time b{font-size:calc(var(--u)*6.8);margin-right:calc(var(--u)*.6)}
.td-anim--motion .td-anim__step h4{margin-top:calc(var(--u)*1.1);font-size:calc(var(--u)*2.5)}
.td-anim--motion .td-anim__step p:last-child{margin-top:calc(var(--u)*.8);font-size:calc(var(--u)*1.38);max-width:calc(var(--u)*33)}
.td-anim__visuals{position:absolute;left:50%;top:40%;width:45%;height:55%}
.td-anim__v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*1.6);opacity:0}
.td-anim__chips{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--u)*.6)}
.td-anim__chips span{display:inline-block;padding:calc(var(--u)*.55) calc(var(--u)*1.1);border-radius:99px;border:1px solid var(--td-line);background:#fff;font-size:calc(var(--u)*1.02);font-weight:600;color:var(--td-ink);white-space:nowrap}

/* V1 Anfrage */
.td-anim__form{width:calc(var(--u)*30);background:#fff;border:1px solid var(--td-line);border-radius:calc(var(--u)*1.2);padding:calc(var(--u)*1.8);box-shadow:0 calc(var(--u)*.8) calc(var(--u)*2.4) rgba(50,52,154,.08)}
.td-anim__form-h{margin:0 0 calc(var(--u)*1);font-family:var(--td-display);font-weight:900;font-size:calc(var(--u)*1.6);letter-spacing:-.03em}
.td-anim__row{margin:0;display:flex;align-items:center;gap:calc(var(--u)*1);padding:calc(var(--u)*.85) 0;border-bottom:1px solid var(--td-line);font-size:calc(var(--u)*1.1)}
.td-anim__row>span{width:calc(var(--u)*8);color:var(--td-quiet)}
.td-anim__val{font-weight:600;clip-path:inset(0 100% 0 0)}
.td-anim__file{font-style:normal;display:inline-block;padding:calc(var(--u)*.2) calc(var(--u)*.7);border-radius:6px;background:#eef0fa;color:var(--td-blue)}
.td-anim__chk{margin-left:auto;width:calc(var(--u)*1.7);height:calc(var(--u)*1.7);border-radius:50%;background:var(--td-lime);position:relative;opacity:0}
.td-anim__chk::after{content:"";position:absolute;left:34%;top:22%;width:24%;height:44%;border:solid var(--td-ink);border-width:0 calc(var(--u)*.22) calc(var(--u)*.22) 0;transform:rotate(45deg)}
.td-anim__pill{margin-top:calc(var(--u)*1.4);display:inline-flex;align-items:center;gap:calc(var(--u)*.8);padding:calc(var(--u)*.7) calc(var(--u)*.7) calc(var(--u)*.7) calc(var(--u)*1.5);border-radius:99px;background:var(--td-lime);font-size:calc(var(--u)*1.05);font-weight:600}
.td-anim__pill i{font-style:normal;width:calc(var(--u)*2.2);height:calc(var(--u)*2.2);border-radius:50%;background:var(--td-ink);color:#fff;display:grid;place-items:center}

/* V2 Briefing */
.td-anim__call{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*.7);width:calc(var(--u)*30);padding:calc(var(--u)*.7);border-radius:calc(var(--u)*1.2);background:var(--td-ink)}
.td-anim__tile{position:relative;aspect-ratio:4/3.2;border-radius:calc(var(--u)*.8);background:#2a2d3d;display:grid;place-items:center;opacity:0}
.td-anim__tile--b{background:var(--td-blue)}
.td-anim__tile svg{width:46%;fill:#c3c7d4}
.td-anim__tile--b svg{fill:#dfe1f3}
.td-anim__tile span{position:absolute;left:calc(var(--u)*.7);bottom:calc(var(--u)*.6);font-size:calc(var(--u)*.95);font-weight:600;color:#fff}
.td-anim__ring{position:absolute;right:calc(var(--u)*-2.4);bottom:calc(var(--u)*-2.4);width:calc(var(--u)*8.4);aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--td-line);display:grid;place-items:center}
.td-anim__ring svg{position:absolute;inset:6%;transform:rotate(-90deg);fill:none;stroke-width:6}
.td-anim__ring circle{stroke:var(--td-line)}
.td-anim__ring .td-anim__ring-arc{stroke:var(--td-blue);stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round}
.td-anim__ring>span{position:relative;display:grid;text-align:center;font-size:calc(var(--u)*.9);font-weight:600;color:var(--td-quiet);line-height:1}
.td-anim__ring b{font-family:var(--td-display);font-size:calc(var(--u)*2.3);color:var(--td-blue);letter-spacing:-.04em}

/* V3 Kollektion */
.td-anim__garments{display:flex;gap:calc(var(--u)*1.2)}
.td-anim__gm{width:calc(var(--u)*11);aspect-ratio:1;border-radius:calc(var(--u)*1.2);background:var(--td-soft);display:grid;place-items:center;opacity:0}
.td-anim__gm svg{width:78%;height:auto;overflow:visible}
.td-anim__gm-mark{transform-box:fill-box;transform-origin:50% 50%}

/* V4/5 Team-Shop */
.td-anim__v45{flex-direction:row;gap:calc(var(--u)*2.4)}
.td-anim__phone{--pw:14;--p:calc(var(--u)*var(--pw)/14);position:relative;width:calc(var(--u)*var(--pw));aspect-ratio:9/18.5;border-radius:calc(var(--u)*2.4);background:var(--td-ink);padding:calc(var(--u)*.6);flex:none}
.td-anim__screen{position:relative;height:100%;border-radius:calc(var(--p)*1.9);background:#fff;overflow:hidden;padding:calc(var(--p)*1) calc(var(--p)*.9);display:flex;flex-direction:column;gap:calc(var(--p)*.55)}
.td-anim__screen p{margin:0}
.td-anim__url{display:flex;align-items:center;gap:calc(var(--p)*.35);padding:calc(var(--p)*.35) calc(var(--p)*.6);border-radius:99px;background:var(--td-soft);font-size:calc(var(--p)*.72);font-weight:600;color:var(--td-blue);white-space:nowrap;overflow:hidden}
.td-anim__url i{width:calc(var(--p)*.6);height:calc(var(--p)*.6);border-radius:2px;background:var(--td-lime);flex:none}
.td-anim__url span{clip-path:inset(0 100% 0 0)}
.td-anim__ph{font-family:var(--td-display);font-weight:900;font-size:calc(var(--p)*1.3);letter-spacing:-.03em;margin-top:calc(var(--p)*.3)!important}
.td-anim__prod{display:flex;align-items:center;gap:calc(var(--p)*.6);padding:calc(var(--p)*.4);border-radius:calc(var(--p)*.6);border:1px solid var(--td-line);opacity:0}
.td-anim__thumb{width:calc(var(--p)*3);aspect-ratio:1;border-radius:calc(var(--p)*.45);background:var(--td-soft);display:grid;place-items:center;flex:none}
.td-anim__thumb svg{width:74%}
.td-anim__prod>span:last-child{display:grid;line-height:1.2}
.td-anim__prod b{font-size:calc(var(--p)*.82);font-weight:600}
.td-anim__prod small{font-size:calc(var(--p)*.68);color:var(--td-quiet)}
.td-anim__sizes{display:flex;gap:calc(var(--p)*.35);opacity:0}
.td-anim__sizes span{flex:1;text-align:center;padding:calc(var(--p)*.3) 0;border-radius:calc(var(--p)*.4);border:1px solid var(--td-line);font-size:calc(var(--p)*.75);font-weight:600;background:#fff;color:var(--td-ink)}
.td-anim__order{position:relative;margin-top:auto;display:grid;place-items:center;height:calc(var(--p)*2.6);border-radius:99px;background:var(--td-lime);color:var(--td-ink);font-size:calc(var(--p)*.8);font-weight:700;opacity:0}
.td-anim__order>span{grid-area:1/1;white-space:nowrap}
.td-anim__order-b{opacity:0;color:#fff}
.td-anim__toast{position:absolute;left:calc(var(--p)*.7);right:calc(var(--p)*.7);top:calc(var(--p)*.7);padding:calc(var(--p)*.7);border-radius:calc(var(--p)*.7);background:var(--td-ink);color:#fff;font-size:calc(var(--p)*.78);font-weight:600;text-align:center;opacity:0}
.td-anim__tap{position:absolute;left:50%;bottom:calc(var(--p)*2.1);width:calc(var(--p)*4);aspect-ratio:1;margin-left:calc(var(--p)*-2);border-radius:50%;background:rgba(15,17,24,.28);opacity:0}
.td-anim__side{position:relative;width:calc(var(--u)*17);height:calc(var(--u)*14)}
.td-anim__side .td-anim__chips{position:absolute;inset:0;flex-direction:column;align-items:flex-start;justify-content:center;flex-wrap:nowrap}
.td-anim__side .td-anim__chips span{opacity:0}

/* V6 Lieferung */
.td-anim__v6{gap:calc(var(--u)*2.2)}
.td-anim__route{position:relative;width:calc(var(--u)*36);height:calc(var(--u)*12)}
.td-anim__road{position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*.22);background:var(--td-ink);border-radius:9px;transform-origin:0 50%}
.td-anim__box{position:absolute;left:0;bottom:calc(var(--u)*.22);width:calc(var(--u)*11);height:auto;transform-origin:50% 100%;overflow:visible}
.td-anim__dest{position:absolute;right:0;bottom:calc(var(--u)*.22);width:calc(var(--u)*8);display:flex;flex-direction:column;align-items:center;opacity:0}
.td-anim__dest svg{width:100%}
.td-anim__dest span{position:absolute;top:calc(100% + var(--u)*.8);font-size:calc(var(--u)*1.02);font-weight:600;white-space:nowrap}
.td-anim__stamp{padding:calc(var(--u)*.6) calc(var(--u)*1.4);border:calc(var(--u)*.22) solid var(--td-blue);border-radius:99px;color:var(--td-blue);font-family:var(--td-display);font-weight:900;font-size:calc(var(--u)*1.35);letter-spacing:-.02em;opacity:0;margin-top:calc(var(--u)*1.6)}

/* Szene 4 */
.td-anim--motion .td-anim__s4{color:#fff}
.td-anim--motion .td-anim__s4-head{position:absolute;left:5%;top:10%;width:80%}
.td-anim--motion .td-anim__s4 .td-anim__kicker{color:rgba(255,255,255,.6)}
.td-anim--motion .td-anim__s4 .td-anim__title{font-size:calc(var(--u)*4.8)}
.td-anim--motion .td-anim__s4 .td-anim__title span:last-child{color:var(--td-lime)}
.td-anim__facts{position:absolute;left:5%;right:5%;top:52%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.td-anim__fact{padding:0 calc(var(--u)*2);border-left:1px solid rgba(255,255,255,.16);opacity:0}
.td-anim__fact:first-child{padding-left:0;border-left:0}
.td-anim__fact-v{margin:0;font-family:var(--td-display);font-weight:600;font-size:calc(var(--u)*6.2);letter-spacing:-.05em;line-height:1;color:var(--td-lime);white-space:nowrap;font-variant-numeric:tabular-nums}
.td-anim__pop{display:inline-block;transform-origin:50% 100%}
.td-anim__fact-v small{font-size:.4em;letter-spacing:-.02em;color:rgba(255,255,255,.75)}
.td-anim__fact-bar{display:block;margin:calc(var(--u)*1.4) 0 calc(var(--u)*1.2);height:calc(var(--u)*.22);background:var(--td-lime);transform-origin:0 50%;transform:scaleX(0)}
.td-anim__fact-l{margin:0;font-size:calc(var(--u)*1.3);line-height:1.5;color:rgba(255,255,255,.72);max-width:calc(var(--u)*19)}

/* Szene 5 */
.td-anim--motion .td-anim__s5{margin:0}
.td-anim--motion .td-anim__s5-copy{position:absolute;left:5%;top:0;bottom:0;width:44%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:calc(var(--u)*3);flex-wrap:nowrap}
.td-anim--motion .td-anim__s5 .td-anim__title{font-size:calc(var(--u)*4.9);display:flex;flex-direction:column}
.td-anim--motion .td-anim__s5 .td-anim__title span{white-space:nowrap}
.td-anim__s5-logo{display:none}
.td-anim--motion .td-anim__s5-logo{display:block;width:calc(var(--u)*17);height:auto;color:var(--td-blue);opacity:0}
.td-anim__cta-wrap{display:inline-block}
.td-anim--motion .td-anim__cta{pointer-events:none}
.td-anim--motion .td-anim__cta.is-live{pointer-events:auto}
.td-anim--motion .td-anim__crew{position:absolute;right:4%;bottom:9%;width:46%;height:74%;display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--u)*1)}
.td-anim__fig{flex:1;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1);opacity:0}
.td-anim__fig svg{width:100%;height:auto;overflow:visible}
.td-anim__fig>span{font-size:calc(var(--u)*1.1);font-weight:600;color:var(--td-quiet)}
.td-anim__cloth{fill:var(--td-blue)}
.td-anim__fig-mark{transform-box:fill-box;transform-origin:50% 50%;opacity:0}

/* Steuerung */
.td-anim__controls{align-items:center;gap:10px;margin-top:14px}
.td-anim__btn{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--td-ink);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .2s var(--td-ease),background .2s}
.td-anim__btn svg{width:18px;height:18px;fill:currentColor}
.td-anim__btn:hover{transform:translateY(-2px)}
.td-anim__btn--ghost{background:transparent;color:var(--td-ink);box-shadow:inset 0 0 0 1px var(--td-ink)}
.td-anim__i-play{display:none}
.td-anim.is-paused .td-anim__i-play{display:block}
.td-anim.is-paused .td-anim__i-pause{display:none}
.td-anim__chapters{flex:1;display:grid;grid-template-columns:5fr 3.8fr 17.2fr 7.8fr 6.2fr;gap:6px;margin-left:8px!important}
.td-anim__chapters button{width:100%;min-height:44px;padding:0;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;text-align:left;font:600 12px/1.2 var(--td-text);color:var(--td-quiet)}
.td-anim__chapters button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-anim__chapters button>i{display:block;height:4px;border-radius:4px;background:var(--td-line);overflow:hidden;margin-bottom:6px}
.td-anim__chapters button>i>i{display:block;height:100%;background:var(--td-lime);transform-origin:0 50%;transform:scaleX(0)}
.td-anim__chapters button[aria-current="step"]{color:var(--td-ink)}
.td-anim__chapters button:hover>i{background:#d6d9e4}
.td-anim__btn:focus-visible,.td-anim__chapters button:focus-visible{outline:3px solid var(--td-blue);outline-offset:3px}

/* ---------- Handy: hochkant gestapelt ---------- */
@media (max-width:700px){
  .td-anim--motion .td-anim__stage{--u:2.15cqw;aspect-ratio:3/4}
  .td-anim--motion .td-anim__title{font-size:calc(var(--u)*4.3)}
  .td-anim--motion .td-anim__kicker,.td-anim--motion .td-anim__s3-head .td-anim__kicker{font-size:calc(var(--u)*1.35)}
  .td-anim--motion .td-anim__sub{font-size:calc(var(--u)*1.5);margin-top:calc(var(--u)*1.2);max-width:none}
  .td-anim--motion .td-anim__s1-copy{left:6%;right:6%;width:auto;top:6%;bottom:auto;justify-content:flex-start}
  .td-anim--motion .td-anim__chaos{left:4%;right:4%;width:auto;top:43%;height:52%}
  .td-anim__m1{width:56%}.td-anim__m2{left:16%;width:62%}.td-anim__m3{left:4%;width:66%;top:84%}
  .td-anim__shirts{left:60%;width:40%}
  .td-anim__shirts figcaption{display:none}
  .td-anim__sheet{left:30%;width:70%;top:44%}
  .td-anim__cats{width:34%;top:50%}
  .td-anim--motion .td-anim__s2-shirt{left:calc(50% - var(--u)*12);top:8%;width:calc(var(--u)*24)}
  .td-anim--motion .td-anim__s2-title{left:6%;right:6%;width:auto;top:auto;bottom:9%;font-size:calc(var(--u)*4.6)}
  .td-anim--motion .td-anim__s3-head{left:6%;right:6%;top:5%}
  .td-anim--motion .td-anim__s3-head .td-anim__title{font-size:calc(var(--u)*2.6)}
  .td-anim__rail{left:2%;right:2%;top:21%}
  .td-anim__node>span{display:none}
  .td-anim__node b{font-size:calc(var(--u)*1.15);margin-top:calc(var(--u)*.6)}
  .td-anim__visuals{left:4%;width:92%;top:29%;height:37%}
  .td-anim--motion .td-anim__steps{left:6%;width:88%;top:68%;height:29%}
  .td-anim--motion .td-anim__step-n{font-size:calc(var(--u)*1.1)}
  .td-anim--motion .td-anim__step-time{margin-top:calc(var(--u)*.3);font-size:calc(var(--u)*1.5)}
  .td-anim--motion .td-anim__step-time b{font-size:calc(var(--u)*4.6)}
  .td-anim--motion .td-anim__step h4{margin-top:calc(var(--u)*.5);font-size:calc(var(--u)*2.2)}
  .td-anim--motion .td-anim__step p:last-child{margin-top:calc(var(--u)*.4);font-size:calc(var(--u)*1.55);max-width:none}
  .td-anim__form{width:calc(var(--u)*32);padding:calc(var(--u)*1.4)}
  .td-anim__form-h{font-size:calc(var(--u)*1.5);margin-bottom:calc(var(--u)*.4)}
  .td-anim__row{padding:calc(var(--u)*.6) 0;font-size:calc(var(--u)*1.2)}
  .td-anim__pill{margin-top:calc(var(--u)*1)}
  .td-anim__v{gap:calc(var(--u)*1.2)}
  .td-anim__call{width:calc(var(--u)*27)}
  .td-anim__ring{width:calc(var(--u)*7.4);right:calc(var(--u)*-1.6);bottom:calc(var(--u)*-1.6)}
  .td-anim__gm{width:calc(var(--u)*10)}
  .td-anim__chips span{font-size:calc(var(--u)*1.1)}
  .td-anim__v45{gap:calc(var(--u)*1.6)}
  .td-anim__phone{--pw:10.4}
  .td-anim__side{width:calc(var(--u)*19);height:calc(var(--u)*13)}
  .td-anim__route{width:calc(var(--u)*34);height:calc(var(--u)*11)}
  .td-anim__stamp{margin-top:calc(var(--u)*.6)}
  .td-anim--motion .td-anim__s4-head{left:6%;right:6%;width:auto;top:7%}
  .td-anim--motion .td-anim__s4 .td-anim__title{font-size:calc(var(--u)*4)}
  .td-anim__facts{left:6%;right:6%;top:40%;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:calc(var(--u)*3.2)}
  .td-anim__fact{padding:0 0 0 calc(var(--u)*2)}
  .td-anim__fact:nth-child(odd){padding-left:0;border-left:0}
  .td-anim__fact-v{font-size:calc(var(--u)*5.4)}
  .td-anim__fact-bar{margin:calc(var(--u)*1) 0 calc(var(--u)*.8)}
  .td-anim__fact-l{font-size:calc(var(--u)*1.35);max-width:none}
  .td-anim--motion .td-anim__s5-copy{left:6%;right:6%;width:auto;top:6%;bottom:auto;gap:calc(var(--u)*2.2)}
  .td-anim--motion .td-anim__s5 .td-anim__title{font-size:calc(var(--u)*4.6)}
  .td-anim--motion .td-anim__crew{left:6%;right:6%;width:auto;bottom:6%;height:48%}
  .td-anim__fig>span{font-size:calc(var(--u)*1.2)}
  .td-anim__chapters{grid-template-columns:repeat(5,minmax(0,1fr))}
  .td-anim__chapters button span{display:none}
}