@property --tausch-fuge{syntax:"<angle>";inherits:false;initial-value:360deg}.tausch{--fuge:3px;--platte:color-mix(in srgb,color-mix(in srgb,var(--fuge-dunkel) 55%,var(--tinte-2)) 82%,var(--nacht));--fugenfarbe:var(--hell-2);position:relative;display:block;margin:0;color:var(--hell)}.tausch__brett{position:relative;display:grid;grid-template:repeat(4,minmax(0,1fr))/repeat(4,minmax(0,1fr));gap:var(--fuge);aspect-ratio:1;padding:var(--fuge);background:var(--fugenfarbe);isolation:isolate}.tausch__brett::after{content:"";position:absolute;inset:0;z-index:6;background:linear-gradient(118deg,color-mix(in srgb,var(--licht) 26%,transparent) 0%,color-mix(in srgb,var(--licht) 6%,transparent) 38%,transparent 62%);mix-blend-mode:soft-light;pointer-events:none}.tausch__p,.tausch__alt,.tausch__neu{position:relative;background-color:var(--platte);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.016' numOctaves='3' seed='5' stitchTiles='stitch' result='w'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='9' stitchTiles='stitch' result='k'/%3E%3CfeComposite in='w' in2='k' operator='arithmetic' k2='.7' k3='.3'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)'/%3E%3C/svg%3E");background-size:180px 180px;background-blend-mode:overlay;box-shadow:inset 1px 1px 0 color-mix(in srgb,var(--hell) 12%,transparent),inset -1px -1px 0 color-mix(in srgb,var(--nacht) 60%,transparent)}.tausch__p:nth-child(3n+1){background-position:61px 17px}.tausch__p:nth-child(3n+2){background-position:113px 89px;background-color:color-mix(in srgb,var(--platte) 90%,var(--nacht))}.tausch__p:nth-child(3n){background-position:29px 141px;background-color:color-mix(in srgb,var(--platte) 94%,var(--hell))}.tausch__p:nth-child(4n){background-position:151px 53px}.tausch__ziel{position:relative;grid-area:2/3}.tausch__ziel>*{position:absolute;inset:0}.tausch__bett{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--hell-3) 70%,var(--nacht)) 0 3px,var(--hell-3) 3px 4px,color-mix(in srgb,var(--hell-3) 52%,var(--nacht)) 4px 7px)}.tausch__ring{inset:calc(var(--fuge) * -1);border:var(--fuge) solid var(--nacht);opacity:0}.tausch__alt{background-position:79px 121px;opacity:0;z-index:2}.tausch__neu{background-position:7px 58px;z-index:3}.tausch__riss{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible;pointer-events:none}.tausch__riss path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}.tausch__riss .riss-schatten{stroke:color-mix(in srgb,var(--nacht) 85%,transparent);stroke-width:3}.tausch__riss .riss-kante{stroke:var(--hell);stroke-width:1.5}.tausch__fuge{inset:calc(var(--fuge) * -1);z-index:4;border:var(--fuge) solid var(--signal);-webkit-mask-image:conic-gradient(var(--tinte) var(--tausch-fuge),transparent 0);mask-image:conic-gradient(var(--tinte) var(--tausch-fuge),transparent 0)}html.js.bewegt .tausch:not([data-tausch=luecke]):not(.tausch--an) .tausch__alt,.tausch--start .tausch__alt{opacity:1}html.js.bewegt .tausch:not([data-tausch=luecke]):not(.tausch--an) .tausch__riss path,.tausch--start .tausch__riss path{stroke-dashoffset:1}html.js.bewegt .tausch:not([data-tausch=luecke]):not(.tausch--an) .tausch__neu,.tausch--start .tausch__neu{opacity:0}html.js.bewegt .tausch:not([data-tausch=luecke]):not(.tausch--an) .tausch__fuge,.tausch--start .tausch__fuge{--tausch-fuge:0deg}html.js.bewegt .tausch:not([data-tausch=luecke]):not(.tausch--an) :is(.tausch__alt,.tausch__neu,.tausch__riss path,.tausch__fuge){animation:tausch-notfall 1ms 4s both}@keyframes tausch-notfall{to{opacity:var(--ende-o,1);stroke-dashoffset:0;--tausch-fuge:360deg}}html.js.bewegt .tausch:not(.tausch--an) .tausch__alt{--ende-o:0}html.js.bewegt .tausch:not(.tausch--an) .tausch__schritt{animation:tausch-hell 1ms 4s both}html.js.bewegt .tausch:not(.tausch--an) .tausch__schritt::before{animation:tausch-strich 1ms 4s both}.tausch--laeuft .tausch__riss path{animation:tausch-riss 650ms var(--weich) 0ms both}.tausch--laeuft .tausch__ring{animation:tausch-ring 1900ms linear 550ms both}.tausch--laeuft .tausch__alt{animation:tausch-raus 760ms var(--schnitt) 1000ms both}.tausch--laeuft .tausch__neu{animation:tausch-rein 720ms var(--aus) 1650ms both}.tausch--laeuft .tausch__fuge{animation:tausch-fugen 640ms var(--weich) 2260ms both}@keyframes tausch-riss{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes tausch-ring{0%{opacity:0}20%,88%{opacity:1}100%{opacity:0}}@keyframes tausch-raus{0%{opacity:1;transform:none;box-shadow:0 0 0 transparent}30%{opacity:1;transform:translate(-2%,-7%) scale(1.05);box-shadow:var(--schatten-setzen)}100%{opacity:0;transform:translate(26%,-150%) rotate(9deg) scale(1.08);box-shadow:var(--schatten-setzen)}}@keyframes tausch-rein{0%{opacity:0;transform:translateY(-46%) scale(1.12);box-shadow:var(--schatten-setzen)}45%{opacity:1}78%{transform:translateY(1.5%) scale(.995);box-shadow:0 6px 10px -6px color-mix(in srgb,var(--nacht) 60%,transparent)}100%{opacity:1;transform:none;box-shadow:0 0 0 transparent}}@keyframes tausch-fugen{from{--tausch-fuge:0deg}to{--tausch-fuge:360deg}}.tausch--kachel{position:absolute;inset:0;overflow:hidden;container-type:size;background:var(--fugenfarbe)}.tausch--kachel .tausch__brett{position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:max(100cqw,100cqh);translate:-50% -50%}.tausch--kopf,.tausch--luecke{--fuge:4px;inline-size:min(100%,34rem);margin-inline:auto}.tausch--kopf .tausch__brett,.tausch--luecke .tausch__brett{box-shadow:0 30px 60px -28px color-mix(in srgb,var(--nacht) 85%,transparent)}.tausch--kopf.tausch--an .tausch__brett{cursor:pointer}.tausch__unter{display:grid;gap:var(--a-4);margin-block-start:var(--a-5)}.tausch__schritte{counter-reset:schritt;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--a-3);margin:0;padding:0;list-style:none}.tausch__schritt{counter-increment:schritt;position:relative;display:flex;flex-direction:column;gap:var(--a-1);padding-block-start:var(--a-3);font-size:var(--fs-klein);font-weight:650;line-height:1.3;color:var(--t-text)}.tausch__schritt::before{content:"";position:absolute;inset:0 0 auto;block-size:2px;background:var(--t-text);transform-origin:0 50%}.tausch__schritt::after{content:counter(schritt,decimal-leading-zero);order:-1;font:800 var(--fs-dachzeile)/1.3 var(--font-plakat);font-stretch:75%;letter-spacing:.14em;color:var(--t-text-3)}.tausch--laeuft .tausch__schritt:nth-child(1){animation:tausch-hell 1450ms linear 450ms both}.tausch--laeuft .tausch__schritt:nth-child(2){animation:tausch-hell 1400ms linear 1000ms both}.tausch--laeuft .tausch__schritt:nth-child(3){animation:tausch-hell 1000ms linear 2200ms both}.tausch--laeuft .tausch__schritt:nth-child(1)::before{animation:tausch-strich 600ms var(--weich) 450ms both}.tausch--laeuft .tausch__schritt:nth-child(2)::before{animation:tausch-strich 1300ms var(--weich) 1000ms both}.tausch--laeuft .tausch__schritt:nth-child(3)::before{animation:tausch-strich 700ms var(--weich) 2250ms both}@keyframes tausch-hell{from{color:var(--t-text-3)}1%,to{color:var(--t-text)}}@keyframes tausch-strich{from{scale:0 1}to{scale:1 1}}.tausch--start .tausch__schritt,html.js.bewegt .tausch:not(.tausch--an) .tausch__schritt{color:var(--t-text-3)}.tausch--start .tausch__schritt::before,html.js.bewegt .tausch:not(.tausch--an) .tausch__schritt::before{scale:0 1}.tausch__wieder,.tausch__knopf{justify-self:start}.tausch--luecke:not(.tausch--gesetzt) .tausch__neu{opacity:0}.tausch--luecke:not(.tausch--gesetzt) .tausch__fuge{--tausch-fuge:0deg}.tausch--luecke:not(.tausch--gesetzt) .tausch__ring{opacity:1}.tausch--luecke.tausch--laeuft .tausch__neu{animation:tausch-rein 720ms var(--aus) 0ms both}.tausch--luecke.tausch--laeuft .tausch__fuge{animation:tausch-fugen 640ms var(--weich) 600ms both}.tausch--luecke.tausch--laeuft .tausch__ring{animation:tausch-ring-zu 640ms linear 600ms both}@keyframes tausch-ring-zu{from{opacity:1}to{opacity:0}}.tausch-abschnitt__raster{display:grid;gap:var(--a-7)}@media (min-width: 960px){.tausch-abschnitt__raster--text{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}}@media (max-width: 639px){.tausch--kopf,.tausch--luecke{--fuge:3px;inline-size:min(100%,20rem)}.tausch__schritte{gap:var(--a-2)}}