:root{
  --grund:#0e0e10;

  --buehne:var(--grund);
  --moewe:#a9b5bd; --moewe-rgb:169 181 189;
  --tinte:#ece9e2;
  --tinte-dunkel:#12161a;
  --regie:var(--moewe);

  --akz:#e5c26a; --akz-rgb:229 194 106;
  --klecks-rgb:var(--moewe-rgb);

  --senden-ruhe:rgb(var(--moewe-rgb) / .14);
  --senden-ruhe-zeichen:rgb(var(--moewe-rgb) / .55);

  --senden-rand:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle cx='20' cy='20' r='19.1' fill='none' stroke='rgb(255,255,255)' stroke-opacity='.32' stroke-width='1.5' stroke-dasharray='4.5 5.5'/></svg>");
  --flieger-rand:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'><circle cx='17' cy='17' r='15.92' fill='none' stroke='rgb(255,255,255)' stroke-opacity='.32' stroke-width='1.5' stroke-dasharray='4.5 5.5'/></svg>");

  --kringel:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5.75 -5.75 11.5 11.5'><path d='M-4.5,-2.7 C-2.7,-6.1 3.5,-5.5 4.9,-1.3 C6.1,2.5 1.3,5.7 -2.5,3.9 C-5.3,2.5 -5.7,-0.3 -4.3,-2.3' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'/></svg>");
  --bobbel:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5.75 -5.75 11.5 11.5'><circle cx='0' cy='0' r='1.9' fill='black'/></svg>");
  --kringel-voll:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5.75 -5.75 11.5 11.5'><path d='M-4.5,-2.7 C-2.7,-6.1 3.5,-5.5 4.9,-1.3 C6.1,2.5 1.3,5.7 -2.5,3.9 C-5.3,2.5 -5.7,-0.3 -4.3,-2.3' fill='black' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");

  --orange:#e07b2f; --pink:#ef6aa8; --walblau:#04adbf; --violett:#a06ce0;
  --s-lesen:'Hanken Grotesk',system-ui,sans-serif;
  --s-regie:'Barlow Condensed',var(--s-lesen);
  --s-hand:'Caveat',cursive;

  --s-fine:'Patrick Hand',cursive;

  --s-lena:'Handlee',cursive;

  --s-quinn:'Chewy',cursive;
  --ts:1;
  --hanken:calc(19px * var(--ts));
  --barlow:calc(17px * var(--ts));
  --caveat-titel:calc(42px * var(--ts));
  --caveat-hand:calc(27.5px * var(--ts));

  --patrick:calc(15.5px * var(--ts));

  --handlee:calc(15px * var(--ts));
  --zeile:calc(26px * var(--ts));
  --zeile-barlow:calc(21px * var(--ts));
  --zeile-werkzeug:1.45;

  --e:1;

  --spalte:362px;

  --wahl-boden:31px;

  --knopf-mitte:70px;
  --fusshoehe:calc(var(--knopf-mitte) * 2);

  --fuss-stapel:130px;

  --flussmin:96px;

  --fluss-stapel:136px;

  --kopf:66px;
  --werkzeug:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --werkzeug-gross:11.5px;

  --strich-orange:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'><path d='M1.8,6.9 C16,4.2 33,5.7 49,5.0 C65,4.3 82,5.4 98.2,5.9 C99.2,10.1 98.9,14.7 97.5,18.5 C81,20.0 64,18.6 48,19.4 C32,20.1 16,19.0 2.4,18.1 C1.0,14.5 0.9,10.4 1.8,6.9 Z' fill='rgb(224,123,47)' fill-opacity='.45'/></svg>");
  --strich-pink:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'><path d='M1.8,6.9 C16,4.2 33,5.7 49,5.0 C65,4.3 82,5.4 98.2,5.9 C99.2,10.1 98.9,14.7 97.5,18.5 C81,20.0 64,18.6 48,19.4 C32,20.1 16,19.0 2.4,18.1 C1.0,14.5 0.9,10.4 1.8,6.9 Z' fill='rgb(239,106,168)' fill-opacity='.45'/></svg>");
  --strich-walblau:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'><path d='M1.8,6.9 C16,4.2 33,5.7 49,5.0 C65,4.3 82,5.4 98.2,5.9 C99.2,10.1 98.9,14.7 97.5,18.5 C81,20.0 64,18.6 48,19.4 C32,20.1 16,19.0 2.4,18.1 C1.0,14.5 0.9,10.4 1.8,6.9 Z' fill='rgb(4,173,191)' fill-opacity='.45'/></svg>");
  --strich-violett:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'><path d='M1.8,6.9 C16,4.2 33,5.7 49,5.0 C65,4.3 82,5.4 98.2,5.9 C99.2,10.1 98.9,14.7 97.5,18.5 C81,20.0 64,18.6 48,19.4 C32,20.1 16,19.0 2.4,18.1 C1.0,14.5 0.9,10.4 1.8,6.9 Z' fill='rgb(160,108,224)' fill-opacity='.45'/></svg>");
  --strich-butter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'><path d='M1.8,6.9 C16,4.2 33,5.7 49,5.0 C65,4.3 82,5.4 98.2,5.9 C99.2,10.1 98.9,14.7 97.5,18.5 C81,20.0 64,18.6 48,19.4 C32,20.1 16,19.0 2.4,18.1 C1.0,14.5 0.9,10.4 1.8,6.9 Z' fill='rgb(229,194,106)' fill-opacity='.45'/></svg>");
  --strich-orange-still:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'><path d='M1.8,6.9 C16,4.2 33,5.7 49,5.0 C65,4.3 82,5.4 98.2,5.9 C99.2,10.1 98.9,14.7 97.5,18.5 C81,20.0 64,18.6 48,19.4 C32,20.1 16,19.0 2.4,18.1 C1.0,14.5 0.9,10.4 1.8,6.9 Z' fill='rgb(224,123,47)' fill-opacity='.17'/></svg>");
  --strich-pink-still:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'><path d='M1.8,6.9 C16,4.2 33,5.7 49,5.0 C65,4.3 82,5.4 98.2,5.9 C99.2,10.1 98.9,14.7 97.5,18.5 C81,20.0 64,18.6 48,19.4 C32,20.1 16,19.0 2.4,18.1 C1.0,14.5 0.9,10.4 1.8,6.9 Z' fill='rgb(239,106,168)' fill-opacity='.17'/></svg>");
  --strich-walblau-still:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'><path d='M1.8,6.9 C16,4.2 33,5.7 49,5.0 C65,4.3 82,5.4 98.2,5.9 C99.2,10.1 98.9,14.7 97.5,18.5 C81,20.0 64,18.6 48,19.4 C32,20.1 16,19.0 2.4,18.1 C1.0,14.5 0.9,10.4 1.8,6.9 Z' fill='rgb(4,173,191)' fill-opacity='.17'/></svg>");
  --strich-violett-still:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'><path d='M1.8,6.9 C16,4.2 33,5.7 49,5.0 C65,4.3 82,5.4 98.2,5.9 C99.2,10.1 98.9,14.7 97.5,18.5 C81,20.0 64,18.6 48,19.4 C32,20.1 16,19.0 2.4,18.1 C1.0,14.5 0.9,10.4 1.8,6.9 Z' fill='rgb(160,108,224)' fill-opacity='.17'/></svg>");
  --strich-butter-still:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'><path d='M1.8,6.9 C16,4.2 33,5.7 49,5.0 C65,4.3 82,5.4 98.2,5.9 C99.2,10.1 98.9,14.7 97.5,18.5 C81,20.0 64,18.6 48,19.4 C32,20.1 16,19.0 2.4,18.1 C1.0,14.5 0.9,10.4 1.8,6.9 Z' fill='rgb(229,194,106)' fill-opacity='.17'/></svg>");

  --gemalt:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50.5,4.2 C64.2,3.3 78.6,9.9 87.3,21.5 C94.7,31.3 96.9,44.7 95.1,56.9 C93.2,70.3 85.3,82.7 73.1,89.5 C61.7,95.9 47.1,97.3 35.1,92.4 C22.3,87.2 11.5,76.3 6.8,63.1 C2.3,50.5 3.5,35.7 10.7,24.5 C18.3,12.7 33.0,5.1 50.5,4.2 Z' fill='black'/></svg>");
  --gemalt-2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M52.4,7.1 C66.8,7.9 79.4,16.2 86.6,28.4 C92.9,39.1 93.4,53.2 88.6,64.7 C83.4,77.1 71.6,86.9 58.3,89.3 C45.1,91.6 30.6,86.7 21.2,77.0 C11.6,67.1 7.4,52.2 10.6,38.9 C13.9,25.2 25.4,13.2 39.2,9.1 C43.4,7.8 47.9,6.8 52.4,7.1 Z' fill='black'/></svg>");
  --gemalt-3:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 96'><path d='M13,50 C9,34 26,20 52,12 C72,6 96,9 120,6 C150,3 190,14 191,34 C192,51 186,71 160,81 C134,92 88,92 56,85 C32,80 16,68 13,50 Z' fill='black'/></svg>");
}

.angestrichen,
.f2y-brief .absatz mark{
  display:inline;-webkit-appearance:none;appearance:none;
  background-color:transparent;color:inherit;
  background-image:var(--strich);
  background-repeat:no-repeat;background-size:100% 100%;

  padding:.1em .22em;margin:-.1em -.22em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  text-decoration:none;border:0;font:inherit;cursor:pointer}

.angestrichen.gelesen,
.f2y-brief .absatz mark.gelesen{background-image:var(--strich-still)}

.angestrichen.orange {--strich:var(--strich-orange); --strich-still:var(--strich-orange-still)}
.angestrichen.pink   {--strich:var(--strich-pink);   --strich-still:var(--strich-pink-still)}
.angestrichen.walblau{--strich:var(--strich-walblau);--strich-still:var(--strich-walblau-still)}
.angestrichen.violett{--strich:var(--strich-violett);--strich-still:var(--strich-violett-still)}
.angestrichen.butter {--strich:var(--strich-butter); --strich-still:var(--strich-butter-still)}

.f2y-brief{--strich:var(--strich-walblau);--strich-still:var(--strich-walblau-still)}

:root{ --handylicht:1 }
@media (pointer:coarse){ :root{ --handylicht:2.1 } }

*{box-sizing:border-box}

*{touch-action:manipulation}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--grund); color:var(--tinte);
  font-family:var(--s-lesen); font-size:var(--hanken);
  line-height:var(--zeile); min-height:100dvh; overscroll-behavior:none;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
@media(pointer:coarse){
  body{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
}

body:has(.schirm:not([hidden])),
body:has(#wirbelschirm),
body:has(.f2y-kreisel){background:#000}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.klecks{position:relative;display:block;width:var(--kl,48px);height:var(--kl,48px);pointer-events:none}
.klecks::before,.klecks::after{
  content:"";position:absolute;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  transition:background-color .2s ease, transform .2s cubic-bezier(.3,.9,.3,1);
}

.klecks::before{inset:0;
  -webkit-mask-image:var(--kringel);mask-image:var(--kringel);
  background-color:rgb(var(--klecks-rgb))}
.klecks::after{inset:0;
  -webkit-mask-image:var(--bobbel);mask-image:var(--bobbel);
  background-color:rgb(var(--klecks-rgb) / .9)}

.klecks.voll::after,
.tipp-hier .klecks::after,
.zieh-zug .klecks::after,
.rolle-wisch .klecks::after,
.wisch-zug .klecks::after,
.d-zug .klecks::after,
.wal-zug .klecks::after,
.bd-zug .klecks::after{content:none}
.klecks.voll::before,
.tipp-hier .klecks::before,
.zieh-zug .klecks::before,
.rolle-wisch .klecks::before,
.wisch-zug .klecks::before,
.d-zug .klecks::before,
.wal-zug .klecks::before,
.bd-zug .klecks::before{
  -webkit-mask-image:var(--kringel-voll);mask-image:var(--kringel-voll)}

.wahlfeld{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.wahl{
  position:relative;display:inline-block;width:auto;max-width:100%;
  padding:.36em .9em;line-height:var(--zeile);text-align:left;background:none;
  border:1.5px solid transparent;border-radius:11px;
  transition:background-color .22s ease, color .22s ease, opacity .22s ease;
}
.w-rand{position:absolute;left:.75px;top:.75px;
  width:calc(100% - 1.5px);height:calc(100% - 1.5px);
  overflow:visible;pointer-events:none;transition:opacity .22s ease}
.w-rand rect{fill:none;stroke:rgb(255 255 255 / .32);stroke-width:1.5;
  stroke-dasharray:4.5 5.5;stroke-linecap:butt}
.wahl.gewaehlt{background:var(--moewe);color:var(--tinte-dunkel)}
.wahl.gewaehlt .w-rand{opacity:0}
.wahl.nicht{opacity:.38}
@keyframes ruf-atem{0%,100%{transform:scale(.985)}50%{transform:scale(1.045)}}
@keyframes ruf-stups{
  0%,84%,100%{transform:rotate(0)}
  88%{transform:rotate(-2.6deg)}
  92%{transform:rotate(1.7deg)}
  96%{transform:rotate(-.5deg)}}

.schirm{position:fixed;inset:0;z-index:90;background:#000;
  display:flex;align-items:center;justify-content:center;padding:0 34px}
.schirm[hidden]{display:none}
.schirm-zeile{margin:0;text-align:center;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:var(--hanken);line-height:var(--zeile);color:var(--tinte)}

.schirm .wahlfeld{position:absolute;left:26px;right:26px;
  max-width:var(--spalte);margin-inline:auto;
  bottom:calc(var(--wahl-boden) + env(safe-area-inset-bottom, 0px));
  align-items:center;justify-content:flex-end}

.schirm .wahl{animation:wahl-rein .35s cubic-bezier(.25,.8,.3,1) backwards}
.schirm .wahlfeld.geht .wahl{transition:opacity .3s ease;opacity:0}

.spiel{position:relative;height:100vh;height:100svh;max-width:430px;margin:0 auto;
  display:flex;flex-direction:column;

  padding-top:calc(var(--kopf) + env(safe-area-inset-top,0px));
  padding-bottom:env(safe-area-inset-bottom,0px)}

.buehne{position:relative;flex:1 1 auto;min-height:230px;overflow:hidden}

.fluss{position:relative;z-index:3;pointer-events:none;
  flex:0 0 auto;min-height:var(--flussmin);display:flex;flex-direction:column;
  justify-content:flex-end;padding:0 26px 2px;overflow:hidden;

  transition:transform .35s ease, min-height .5s cubic-bezier(.3,.8,.3,1)}
.fluss button{pointer-events:auto}

.spiel.amstapel .fuss{flex-basis:var(--fuss-stapel)}
.spiel.amstapel .fluss{min-height:var(--fluss-stapel)}

.spiel.briefoffen .fluss{min-height:0;padding-bottom:0}

.spiel.raetseloffen .fluss{min-height:0}

.spiel.raetseloffen .fuss{flex-basis:48px;min-height:0}

.fuss{transition:flex-basis .5s cubic-bezier(.3,.8,.3,1)}

@media (prefers-reduced-motion: reduce){
  .fluss,.fuss{transition:none}
}

.satz{margin:0 0 12px;max-width:var(--spalte);margin-inline:auto;width:100%;
  font-size:var(--hanken);line-height:var(--zeile);color:var(--tinte);
  transition:opacity var(--takt-zeile-weg, .45s) ease}
.satz.regie{font-family:var(--s-regie);font-size:var(--barlow);line-height:var(--zeile-barlow);
  color:var(--regie);letter-spacing:.14em;text-transform:uppercase}
.satz.jetzt{animation:satz-rein .5s cubic-bezier(.25,.8,.3,1)}
@keyframes satz-rein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.satz.weg{opacity:0}

.satz.mittig{text-align:center}
.satz.mittig .abs{display:block}
.satz.mittig .abs + .abs{margin-top:.5em}

.fuss{position:relative;flex:0 0 var(--fusshoehe);display:flex;align-items:center;justify-content:center}

.daumenzone{position:fixed;left:0;right:0;bottom:0;height:25dvh;
  margin:0;padding:0;border:0;background:none;pointer-events:none}
.daumenzone.frei{pointer-events:auto}
.daumenzone.zu{pointer-events:none}
.daumenzone.oben{z-index:450}
#knopf{z-index:2}

.daumenzone.blitzt{animation:zonen-blitz 1.2s ease-in-out}
@keyframes zonen-blitz{0%,100%{background-color:rgb(255 255 255 / 0)}
  30%{background-color:rgb(255 255 255 / .08)}
  65%{background-color:rgb(255 255 255 / 0)}}
@media (prefers-reduced-motion: reduce){
  .daumenzone.blitzt{animation:none;background-color:rgb(255 255 255 / .08)}
}
.fuss .wahlfeld{position:absolute;left:26px;right:26px;
  bottom:calc(var(--wahl-boden) + env(safe-area-inset-bottom, 0px));
  align-items:center;justify-content:flex-end}

.fuss .wahl{animation:wahl-rein .35s cubic-bezier(.25,.8,.3,1) backwards}
@keyframes wahl-rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fuss .wahlfeld.geht .wahl{transition:opacity .3s ease;opacity:0}

.wnotiz{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;
  align-items:center;justify-content:center;text-align:center;
  font-family:var(--werkzeug);font-size:var(--werkzeug-gross);
  line-height:var(--zeile-werkzeug);letter-spacing:.08em;text-transform:uppercase;
  color:var(--regie);animation:satz-rein .5s ease both}
.wnotiz span{opacity:.45}
.wnotiz button{opacity:.6;padding:8px 14px;letter-spacing:.08em;text-transform:uppercase;
  font-size:var(--werkzeug-gross)}

.buehne svg{display:block}

.ziel{position:absolute;bottom:30px;z-index:3}
.ziel-mit{left:4%;width:min(172px, 45%)}
.ziel-schenk{right:4%;width:min(158px, 41%)}
.ziel .kiste svg{width:100%;height:auto}

.ziel-wort{position:absolute;left:-10%;right:-10%;top:100%;margin-top:5px;
  text-align:center;font-family:var(--s-regie);font-size:var(--barlow);
  line-height:var(--zeile-barlow);letter-spacing:.14em;text-transform:uppercase;
  color:var(--regie);opacity:.6;white-space:nowrap}

.peeks{position:absolute;left:0;right:0;height:52px;overflow:hidden;
  pointer-events:none;bottom:var(--stand, 50%);z-index:1}
.peek{position:absolute;bottom:0;transform:translate(-50%,105%);
  transition:transform .55s cubic-bezier(.3,1.3,.4,1)}
.peek.da{transform:translate(-50%,30%)}
.peek svg{display:block;width:calc(var(--pk, 24px) * var(--e));height:auto}

:root{
  --tag-hell:#ffd49a;

  --tag-farbe:color-mix(in srgb, var(--tag-hell), var(--orange) calc(var(--tf-warm, 0) * 100%));
}

#tagfenster{position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden; opacity:0; transition:opacity 1.4s ease}
#tagfenster.da{opacity:1}

.tf-fenster{position:absolute; transform:translate(-50%,-50%)}

.tf-scheibe{position:absolute; inset:0;

  background:linear-gradient(168deg,
      color-mix(in srgb, var(--tag-farbe), #fff 52%) 0%,
      color-mix(in srgb, var(--tag-farbe), #fff 22%) 56%,
      var(--tag-farbe) 100%);
  opacity:calc(var(--tf-licht, 1) * .30);
  filter:blur(1.5px);
}

.tf-sprosse{position:absolute; background:var(--grund); opacity:.88}
.tf-quer{left:0; right:0; top:48.8%; height:2.4%}
.tf-hoch{top:0; bottom:0; left:49.15%; width:1.7%}

.tf-rahmen{position:absolute; inset:0;
  border:1.4px solid color-mix(in srgb, var(--tinte), transparent 74%);
  border-right:0;
}

.tf-kegel{position:absolute; inset:0; filter:blur(var(--tf-weich, 10px))}
.tf-keil{position:absolute; inset:0;

  background:linear-gradient(var(--tf-achse, 206deg),
      color-mix(in srgb, var(--tag-farbe), #fff 22%) 0%,
      var(--tag-farbe) 22%,
      color-mix(in srgb, var(--tag-farbe), transparent 38%) 62%,
      color-mix(in srgb, var(--tag-farbe), transparent 74%) 88%,
      transparent 100%);

  opacity:calc(var(--tf-licht, 1) * .10 * var(--handylicht, 1));
  transition:clip-path 3.6s cubic-bezier(.4,0,.3,1);
}

.tf-tanz{position:absolute; inset:0;
  transition:clip-path 3.6s cubic-bezier(.4,0,.3,1)}
.tf-korn{
  position:absolute; border-radius:50%;
  background:color-mix(in srgb, var(--tag-farbe), #fff 55%);
  box-shadow:0 0 calc(3px * var(--scale, 1)) rgba(255,240,215,.5);
  animation:tagStaub var(--kdur, 18s) ease-in-out var(--kdelay, 0s) infinite;
  will-change:transform;
}

@keyframes tagStaub{
  0%,100%{transform:translate(0,0)}
  50%    {transform:translate(var(--kx,0), var(--ky,-8px))}
}

.flieger{--imlicht:0}
.flieger svg{
  stroke:color-mix(in srgb, var(--tinte), var(--tag-farbe) calc(var(--imlicht) * 72%));
  transition:transform .22s ease, stroke .25s linear;
}
.flieger svg [stroke]:not([stroke="none"]){
  stroke:color-mix(in srgb, var(--tinte), var(--tag-farbe) calc(var(--imlicht) * 72%));
}
.flieger svg [fill]:not([fill="none"]):not([fill="#fff"]):not([fill="#000"]):not([fill^="var"]){
  fill:color-mix(in srgb, var(--tinte), var(--tag-farbe) calc(var(--imlicht) * 72%));
  transition:fill .25s linear;
}

@media (prefers-reduced-motion: reduce){
  #tagfenster{transition:opacity .3s ease}
  .tf-keil, .tf-tanz{transition:none}
  .tf-korn{animation:none}
}

#morgenfenster{position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden; opacity:0; transition:opacity 1.4s ease;

  --himmel-oben:#5f9fd0;
  --himmel-mitte:#84bade;
  --himmel-unten:#b7d9ec;

  --morgen-strahl:#ffe2b8;
}
#morgenfenster.da{opacity:1}

#morgenfenster .tf-rahmen{border-left:0;
  border-right:1.4px solid color-mix(in srgb, var(--tinte), transparent 74%)}

.mf-scheibe{position:absolute; inset:0; overflow:hidden;
  background:linear-gradient(177deg,
      var(--himmel-oben) 0%, var(--himmel-mitte) 54%, var(--himmel-unten) 100%);
  opacity:calc(var(--mf-licht, 1) * .9);
}

.mf-kegel{position:absolute; inset:0; filter:blur(var(--mf-weich, 10px))}
.mf-keil{position:absolute; inset:0;
  clip-path:polygon(0 0, 0 0, 0 0, 0 0);
  background:linear-gradient(var(--mf-achse, 116deg),
      color-mix(in srgb, var(--morgen-strahl), #fff 26%) 0%,
      var(--morgen-strahl) 20%,
      color-mix(in srgb, var(--morgen-strahl), transparent 40%) 58%,
      color-mix(in srgb, var(--morgen-strahl), transparent 76%) 86%,
      transparent 100%);

  opacity:calc(var(--mf-licht, 1) * .075 * var(--handylicht, 1));
}

.mf-bahn{position:absolute; inset:0; will-change:transform;
  animation:mfZiehen var(--wdur, 120s) linear var(--wstart, 0s) infinite}
@keyframes mfZiehen{
  from{transform:translateX(-100%)}
  to  {transform:translateX(100%)}
}

.mf-wolke{position:absolute; left:0;
  background:
    radial-gradient(closest-side, #fff 0%, rgba(255,255,255,.94) 44%, rgba(255,255,255,0) 100%)  4% 64% / 46% 62% no-repeat,
    radial-gradient(closest-side, #fff 0%, rgba(255,255,255,.97) 48%, rgba(255,255,255,0) 100%) 40% 26% / 50% 86% no-repeat,
    radial-gradient(closest-side, #fff 0%, rgba(255,255,255,.92) 44%, rgba(255,255,255,0) 100%) 76% 58% / 44% 68% no-repeat,
    radial-gradient(closest-side, #fff 0%, rgba(255,255,255,.88) 50%, rgba(255,255,255,0) 100%) 50% 84% / 90% 48% no-repeat;
  opacity:var(--wdeck, .85);
  filter:blur(2.4px);
}

#morgenfenster.still .mf-bahn{animation:none; transform:translateX(var(--wruhe, 0%))}
@media (prefers-reduced-motion: reduce){
  #morgenfenster{transition:opacity .3s ease}
  .mf-bahn{animation:none; transform:translateX(var(--wruhe, 0%))}
}

#lichtregler{
  position:fixed; z-index:880; right:8px; bottom:8px; width:min(230px, 62vw);
  padding:9px 11px 11px; border-radius:6px;
  background:rgba(10,10,10,.92); border:1px solid #333;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px; letter-spacing:.1em; color:#8a8a8a;
}
#lichtregler.klein{width:auto}
#lichtregler.klein > *:not(.lr-kopf):not(#lr-zu){display:none}
#lichtregler .lr-kopf{margin-bottom:7px; color:#c8c8c8; text-transform:uppercase}
#lichtregler .lr-zeile{display:flex; align-items:center; gap:7px; margin-top:5px}
#lichtregler .lr-zeile span{flex:0 0 62px}
#lichtregler .lr-zeile input{flex:1 1 auto; min-width:0; accent-color:#8a8a8a}
#lichtregler .lr-zeile b{flex:0 0 40px; text-align:right; font-weight:400; color:#c8c8c8}
#lichtregler #lr-zu{margin-top:8px; width:100%; padding:5px; font:inherit; letter-spacing:inherit;
  background:#131313; border:1px solid #2a2a2a; border-radius:3px; color:#8a8a8a}

#wirbelschirm{
  position:fixed; inset:0; z-index:95; overflow:hidden;
  background:#000; opacity:0;

  transition:opacity .76s ease;
}
#wirbelschirm.da{opacity:1; transition:opacity .46s ease}

.wfunke{position:absolute; left:0; top:0; will-change:transform}

.wfunke > i{
  position:absolute; inset:0; border-radius:50%;
  background:var(--walblau);
  box-shadow:0 0 calc(5px * var(--scale, 1)) calc(1px * var(--scale, 1)) rgba(4,173,191,.95),
             0 0 calc(15px * var(--scale, 1)) calc(3px * var(--scale, 1)) rgba(4,173,191,.42);
  opacity:var(--wglanz, .8);
  animation:wglitzer var(--wdur, 1.1s) ease-in-out var(--wdelay, 0s) infinite;
}

.wfunke.wweiss > i{
  background:#f4feff;
  box-shadow:0 0 calc(5px * var(--scale, 1)) calc(1px * var(--scale, 1)) rgba(240,253,255,.95),
             0 0 calc(16px * var(--scale, 1)) calc(3px * var(--scale, 1)) rgba(150,225,240,.4);
}

@keyframes wglitzer{
  0%,100%{opacity:calc(var(--wglanz, .8) * .12); transform:scale(.6)}
  9%     {opacity:var(--wglanz, .8);             transform:scale(1.42)}
  18%    {opacity:calc(var(--wglanz, .8) * .2);  transform:scale(.74)}
  47%    {opacity:calc(var(--wglanz, .8) * .08); transform:scale(.58)}
  56%    {opacity:calc(var(--wglanz, .8) * .9);  transform:scale(1.24)}
  66%    {opacity:calc(var(--wglanz, .8) * .18); transform:scale(.7)}
}
@media (prefers-reduced-motion: reduce){
  .wfunke > i{animation:none}
}

.daneben{position:absolute;bottom:0;z-index:4;opacity:0;
  transition:opacity .35s ease}
.daneben.da{opacity:1}
.ziel-mit .daneben{left:100%;margin-left:-58px}
.ziel-schenk .daneben{right:100%;margin-right:-58px}

.f2y-kgross{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:6}

#buehne .flieger #kistenbox{width:325px;height:232.5px}
#buehne .flieger #kistenbox .kartonface{gap:.06rem}
#buehne .flieger #kband{height:24px;font-size:11px}

#buehne .f2y-kgross #kband{top:36%;height:34px;font-size:13px}
#buehne .kausgrab{position:absolute;left:50%;top:2px;transform:translateX(-50%);
  width:min(374px, 96%);z-index:6}

#buehne .kausgrab{height:calc(100% - 4px);justify-content:center}
#buehne .kausgrab .kzeile,
#buehne .kausgrab .kablage,
#buehne .kausgrab .knamenzeile{flex:0 0 auto}

#buehne .kausgrab .kbox{flex:1 1 auto;min-height:120px;height:auto;width:auto;
  aspect-ratio:340 / 240;
  max-height:min(calc(240px * var(--scale)), calc(92vw * 24 / 34));
  max-width:min(92vw, calc(340px * var(--scale)));
  container-type:size}
#buehne .kausgrab .kinnen .kding .objektbild{height:44cqh !important;width:auto !important}
#buehne .kausgrab .kinnen .kdbrief .objektbild{height:33cqh !important;width:auto !important}

@media (max-height: 700px){
  #buehne .kausgrab{gap:.2rem}

  #buehne .kausgrab .kbox{min-height:88px}
  #buehne .kslot, #buehne .kauffalt{height:54px}
  #buehne .kslot .objektbild{max-height:42px}
}

#buehne .kslot{border-width:2px;border-color:#6c6c6c}
#buehne .kauffalt.bereit .kauffalt-bild rect{stroke:#999}

.f2y-brief{position:absolute;left:50%;top:2px;transform:translateX(-50%);
  width:min(374px, 96%);height:calc(100% - 4px);z-index:6;
  display:flex;flex-direction:column;overflow-y:auto;
  padding:clamp(18px, 5.5svh, 46px) 0 14px;

  scrollbar-width:none}
.f2y-brief::-webkit-scrollbar{display:none}

.briefblatt{position:relative;flex:0 0 auto;width:min(360px, 96%);margin:0 auto;
  padding:20px 22px 26px;border-radius:3px;
  background:var(--tinte);
  box-shadow:0 18px 40px rgba(0,0,0,.62), 0 3px 9px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(0,0,0,.07);
  animation:blatt-auf .7s cubic-bezier(.3,.8,.3,1) both}
@keyframes blatt-auf{from{opacity:0;transform:perspective(760px) rotateX(-34deg) translateY(12px)}}

.briefblatt::before,.briefblatt::after{content:'';position:absolute;top:0;bottom:0;
  width:1.5px;pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.12), rgba(255,255,255,.75))}
.briefblatt::before{left:33.3%}
.briefblatt::after{left:66.6%}

.f2y-brief .brieftext{display:flex;flex-direction:column;gap:.9rem}
.f2y-brief .absatz{border-left:0;padding-left:0;color:var(--tinte-dunkel);
  font-family:var(--s-lesen);
  font-size:var(--hanken);line-height:var(--zeile);
  transform-origin:50% 0;
  animation:abs-auf .62s cubic-bezier(.3,.8,.3,1) .08s both}

.f2y-brief .absatz s{color:rgba(18,22,26,.4)}
@keyframes abs-auf{from{opacity:0;transform:perspective(760px) rotateX(-44deg)}}

.f2y-brief .psbrief{flex:0 0 auto;margin:auto;zoom:calc(var(--ding) * 1.15)}

.schirm.ueberm-geraet{z-index:500}

.schirm.ueberm-geraet{flex-direction:column}
.schirm-kopf{margin-bottom:16px}

.schirm.blende{opacity:0;transition:opacity .5s ease;pointer-events:none}
.schirm.blende.da{opacity:1}
.blende-zeile{font-family:var(--s-regie);font-size:var(--barlow);line-height:var(--zeile-barlow);
  letter-spacing:.14em;text-transform:uppercase;color:var(--regie)}

#handy-panel .wahlfeld{align-items:flex-end;gap:5px;padding:.12rem .8rem .25rem}
#handy-panel .wahl{line-height:1.35;font-size:.92rem;text-align:left;
  padding:.16em .62em;border-radius:8px}
#handy-panel .wahl .w-rand rect{rx:7.25px}

.h-status{flex:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:9px 15px 4px;font-family:var(--werkzeug);font-size:11.5px;color:#c2c2c8}
.h-status .netz{display:flex;align-items:flex-end;gap:5px}
.h-status .balken{display:flex;align-items:flex-end;gap:1.5px}
.h-status .balken i{width:2.5px;background:#c2c2c8;border-radius:1px;display:block}
.h-status .balken i:nth-child(1){height:3.5px}
.h-status .balken i:nth-child(2){height:5.5px}
.h-status .balken i:nth-child(3){height:7.5px}
.h-status .balken i:nth-child(4){height:9.5px;opacity:.35}
.h-status .netz svg{width:12px;height:12px;display:block;color:#c2c2c8}
.h-status .zeit{justify-self:center;font-weight:600;letter-spacing:.01em}
.h-status .akku{justify-self:end;display:flex;align-items:center;gap:2px}
.h-status .akku .huelle{width:20px;height:10.5px;border:1.2px solid #c2c2c8;border-radius:3px;
  padding:1.4px;display:block}
.h-status .akku .fuell{display:block;height:100%;width:64%;background:#c2c2c8;border-radius:1px}
.h-status .akku .nase{width:1.6px;height:4px;background:#c2c2c8;border-radius:0 1px 1px 0;display:block}

.h-status.ostatusfall{transition:transform .9s ease-in, opacity .9s ease-in}
.h-status.ostatusfall.faellt{transform:translateY(-46px) rotate(-4deg);opacity:0}

.h-kopf{flex:0 0 auto;padding:10px 16px 12px;display:flex;align-items:center;gap:10px}

.h-kopf .h-zurueck{position:relative;width:9px;height:9px;flex:0 0 auto}
.h-kopf .h-zurueck::before{content:'';position:absolute;inset:0;

  border-left:3.2px solid #9a9aa0;border-bottom:3.2px solid #9a9aa0;
  transform:rotate(45deg)}
.h-kopf .titel{font-family:var(--werkzeug);font-size:14px;font-weight:600;color:#e2e2e6}

.h-kopf .h-zu{position:relative;width:36px;height:36px;margin:-12px 0 -12px -12px;flex:0 0 auto;
  background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.h-kopf .h-zu::before,.h-kopf .h-zu::after{content:'';position:absolute;left:50%;top:50%;
  width:15px;height:3.2px;background:#9a9aa0;border-radius:2px;
  transform:translate(-50%,-50%) rotate(45deg)}
.h-kopf .h-zu::after{transform:translate(-50%,-50%) rotate(-45deg)}
.h-kopf.mit-bild{align-items:center;gap:9px;padding:8px 14px 10px}
.h-kopf.mit-bild .bild{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:#2b2b31;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--werkzeug);font-size:12px;color:#a6a6ac}
.h-kopf.mit-bild .wer{min-width:0;display:flex;flex-direction:column}
.h-kopf.mit-bild .wer .name,.h-kopf.mit-bild .wer .online{display:block}
.h-kopf.mit-bild .wer .name{font-family:var(--werkzeug);font-size:14px;font-weight:600;color:#e2e2e6;line-height:1.2}
.h-kopf.mit-bild .wer .online{font-family:var(--werkzeug);font-size:11px;color:#8c8c92;line-height:1.3}

.h-liste{flex:1;display:flex;flex-direction:column;overflow:hidden}
.h-zeile{display:flex;align-items:center;gap:11px;padding:9px 16px}
.h-zeile .bild{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#2b2b31;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--werkzeug);font-size:12px;color:#a6a6ac}
.h-zeile .mitte{flex:1;min-width:0}
.h-zeile .name{font-family:var(--werkzeug);font-size:13px;color:#e2e2e6;font-weight:600}
.h-zeile .vor{font-family:var(--werkzeug);font-size:12px;color:#8c8c92;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-zeile .zeit{flex:0 0 auto;font-family:var(--werkzeug);font-size:10.5px;color:#75757b}

.h-zeile .neu{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:rgb(var(--klecks-rgb))}

.h-blase{max-width:78%;padding:.35em .8em;border-radius:14px;
  font-family:var(--werkzeug);font-size:13px;line-height:1.4;background:#25252a;color:#e2e2e6}
.h-blase.ich{align-self:flex-end;background:var(--moewe);color:var(--tinte-dunkel)}

.h-ueber{font-family:var(--werkzeug);font-size:10px;color:#75757b;
  margin:3px 0 -3px 4px;display:flex;gap:6px;align-items:baseline}
.h-ueber.ich{align-self:flex-end;margin:3px 4px -3px 0}
.h-ueber .wer{color:#9a9aa0}

.h-haken{display:inline-flex;align-items:center;color:#75757b}
.h-haken svg{width:15px;height:10px;display:block}
.h-haken.einer svg path:first-child{display:none}
.h-haken.gelesen{color:var(--moewe)}

.h-raster{flex:1;display:grid;grid-template-columns:repeat(4,1fr);
  gap:16px 10px;align-content:start;padding:20px 14px}
.h-app{display:flex;flex-direction:column;align-items:center;gap:5px}
.h-app .kachel{width:44px;height:44px;border-radius:12px;background:#25252a;
  display:flex;align-items:center;justify-content:center}
.h-app .kachel.wichtig{background:var(--moewe)}
.h-app .kachel svg{width:20px;height:20px;display:block}
.h-app span{font-family:var(--werkzeug);font-size:9.5px;color:#9a9aa0;text-align:center;line-height:1.2}

.h-fuss{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:8px 12px 14px}
.h-fuss .feld{flex:1;min-width:0;background:var(--grund);border-radius:17px;padding:7px 13px;
  font-family:var(--werkzeug);font-size:12.5px;color:var(--tinte)}

.h-fuss .feld .oph{color:#75757b}

.h-fuss .feld .oschreib{outline:none;white-space:pre-wrap;overflow-wrap:anywhere;
  max-height:76px;overflow-y:auto;line-height:1.35;-webkit-user-select:text;user-select:text}
.h-fuss .feld .oschreib:empty::before{content:attr(data-oph);color:#75757b}

.h-fuss .h-flieger{flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background-color:var(--senden-ruhe);color:var(--senden-ruhe-zeichen);
  background-image:var(--flieger-rand);background-size:100% 100%;
  transition:background-color .25s ease, color .25s ease;
  display:flex;align-items:center;justify-content:center;border:0;cursor:pointer}
.h-fuss .h-flieger.bereit{background-color:var(--moewe);color:var(--tinte-dunkel);
  background-image:none}
.h-fuss .h-flieger svg{width:16px;height:16px;display:block}

.h-log{flex:1;display:flex;flex-direction:column;gap:7px;padding:10px 14px 6px;
  overflow-y:auto;scrollbar-width:none}

.h-raster{transition:filter .7s ease}
.h-raster.weich{filter:blur(2.5px)}

#handy-panel > .obanner{top:34px}
.h-log > .oalt:first-child{margin-top:auto}
.h-log::-webkit-scrollbar{display:none}
.h-log .h-blase{flex:0 0 auto;align-self:flex-start}
.h-log .h-blase.ich{align-self:flex-end}

.h-blase .a-foto{margin-top:.5em;width:220px;max-width:100%}
.h-blase .a-foto svg{width:100%;height:auto}
.h-blase .a-foto.a-fotoklein{width:110px;max-width:100%}

.h-blase .a-fotogrund img{width:151px;max-width:100%}
.h-blase .a-fotogrund.hoch img{width:85px}
.h-blase .a-foto img.a-fotoecht{display:block;width:100%;height:auto;
  border-radius:10px;border:1px solid #3a3a3a;filter:grayscale(1)}

.h-log .h-reaktionen{flex:0 0 auto;align-self:flex-start;display:flex;gap:4px;
  margin:-4px 0 0 6px}
.h-log .h-reaktionen.ich{align-self:flex-end;margin:-4px 6px 0 0}
.h-reaktion{display:inline-flex;align-items:center;gap:3px;
  padding:1px 6px;border:1px solid #2e2e33;border-radius:999px;
  background:#101012;font-size:11px;line-height:1.55}
.h-reaktion i{font-style:normal;color:#8a8a8a;font-size:10px;
  font-variant-numeric:tabular-nums}

.h-reaktion.ploppt{animation:reaktion-ploppt .42s cubic-bezier(.34,1.56,.64,1) both}
@keyframes reaktion-ploppt{0%{transform:scale(0)}65%{transform:scale(1.18)}100%{transform:scale(1)}}
.h-reaktionen.ruft{transform-origin:50% 100%;
  animation:huepf-pfeil 2.2s cubic-bezier(.3,.9,.3,1) infinite}
.h-reaktion.eigene{border-color:var(--moewe)}
.h-blase.reagierbar{position:relative;cursor:pointer}
.h-reagieren{position:absolute;left:0;bottom:calc(100% + 5px);z-index:2;
  display:flex;gap:1px;padding:3px 4px;border-radius:999px;
  background:#1a1a1e;border:1px solid #333338;
  box-shadow:0 6px 16px rgb(0 0 0 / .45)}
.h-reagiere{width:30px;height:30px;padding:0;border:0;border-radius:50%;
  background:none;color:inherit;font:inherit;font-size:18px;line-height:30px;
  text-align:center;cursor:pointer;
  animation:reaktion-ploppt .32s cubic-bezier(.34,1.56,.64,1) both}
.h-reagiere.gewaehlt{background:#2c2c32}
@media (prefers-reduced-motion: reduce){
  .h-reaktion.ploppt,.h-reaktionen.ruft,.h-reagiere{animation:none}
}

.h-zeile .vor .h-haken{margin-right:4px;vertical-align:-1px}
.h-zeile .vor .h-haken svg{width:13px;height:9px}

.h-liste.rollt{overflow-y:auto;scrollbar-width:none}
.h-liste.rollt::-webkit-scrollbar{display:none}

.leseband{position:absolute;right:3px;width:3px;border-radius:2px;
  background:rgb(230 227 220 / .07);pointer-events:none;z-index:3;
  opacity:0;transition:opacity .5s ease}
.leseband.da{opacity:1}
.leseband.leer{opacity:0}
@media (prefers-reduced-motion: reduce){
  .leseband{transition:none}
}
.leseband i{position:absolute;left:0;right:0;display:block;border-radius:2px}

.leseband .lb-ziel{background:rgb(var(--klecks-rgb) / .55)}
.leseband .lb-griff{background:#6f6f75}

.h-kopf .h-zurueck{position:relative;cursor:pointer}
.h-kopf .h-zurueck::after{content:'';position:absolute;inset:-16px}

.h-kopf .h-zurueck.still{opacity:0;pointer-events:none;transition:opacity .35s ease}

.h-kopf .h-zurueck.ruft{animation:huepf-pfeil 2.2s cubic-bezier(.3,.9,.3,1) infinite}

.h-kopf .h-zurueck.ruft-gross{width:18px;height:18px}
.h-kopf .h-zurueck.ruft-gross::before{border-left-width:6.4px;border-bottom-width:6.4px}
@keyframes huepf-pfeil{
  0%,40%,100%{transform:translateY(0) scale(1,1)}
  8%{transform:translateY(-5px) scale(.94,1.08)}
  16%{transform:translateY(0) scale(1.1,.88)}
  22%{transform:translateY(-3px) scale(.97,1.04)}
  30%{transform:translateY(0) scale(1.04,.94)}}
@media (prefers-reduced-motion: reduce){
  .h-kopf .h-zurueck.ruft{animation:none}
}

.h-fuss .h-flieger.still{opacity:.3;pointer-events:none}
.h-fuss .h-flieger.winkt{animation:flieger-winkt 1.7s ease-in-out infinite}
@keyframes flieger-winkt{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

.h-fuss .h-flieger.winkt.winkt-laut{animation:flieger-winkt-laut 1.2s ease-in-out infinite}
@keyframes flieger-winkt-laut{0%,100%{transform:scale(1)}50%{transform:scale(1.32)}}

.h-zeile{position:relative}
.h-zeile.leuchtet{animation:zeile-leuchtet 2.4s ease-in-out infinite}

@keyframes zeile-leuchtet{
  0%,100%{background:#17171b;box-shadow:0 0 8px rgb(230 227 220 / .05)}
  50%{background:#1f1f25;box-shadow:0 0 14px rgb(230 227 220 / .11)}
}
@media (prefers-reduced-motion: reduce){
  .h-zeile.leuchtet{animation:none;background:#1b1b20;box-shadow:0 0 10px rgb(230 227 220 / .08)}
}
.h-zeile.klick{cursor:pointer}

.tipp-hier{position:absolute;--kl:48px;pointer-events:none;z-index:6}
.tipp-hier .klecks{animation:klecks-atmet 3.2s ease-in-out infinite}
@keyframes klecks-atmet{0%,100%{transform:scale(.86);opacity:.5}50%{transform:scale(1.07);opacity:1}}
@media (prefers-reduced-motion: reduce){
  .h-fuss .h-flieger.winkt,.h-zeile.ruft,.tipp-hier .klecks{animation:none}
}

#handy-panel{--h-rot:#8d2f2f}

.h-wisch{position:relative;overflow:hidden;flex:none}
.h-wisch .h-zeile{position:relative;z-index:2;background:#0a0a0a;
  transform:translateX(var(--dx,0px));touch-action:pan-y}

.h-wisch[data-lauf="1"] .h-zeile{transition:transform .3s cubic-bezier(.25,.8,.3,1)}
.h-wisch .h-weg{position:absolute;inset:0;z-index:1;display:flex;
  align-items:center;justify-content:flex-start;background:var(--h-rot)}

.f2y-herbst{position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden}
.f2y-herbst .hb-blatt{position:absolute;left:0;top:0;will-change:transform}

.f2y-herbst .hb-blatt svg{display:block;isolation:isolate;
  stroke-width:1.1px}

.f2y-todo{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  opacity:0;transition:opacity .6s ease}
.f2y-todo.an{opacity:1}
.f2y-todo .td-blatt{width:min(76vw,290px);
  background:#fbf7ee;border-radius:1px;padding:15px 20px 20px;
  font-family:'Patrick Hand',cursive;color:#1f1d1a;
  transform:rotate(-1.4deg);
  box-shadow:0 1px 2px rgba(16,14,10,.26), 0 9px 20px rgba(0,0,0,.38)}
.f2y-todo .td-titel{text-align:center;font-size:clamp(19px,5.4vw,23px);
  line-height:1.25;margin-bottom:.5em}
.f2y-todo .td-zeile{font-size:clamp(15px,4.3vw,18px);line-height:1.5;
  min-height:1.5em}
.f2y-todo .td-neu .td-txt::after{content:'';display:inline-block;
  width:0;height:0}
.f2y-todo .td-neu.schreibt .td-txt::after{width:1px;height:.95em;
  margin-left:1px;vertical-align:-.12em;background:#1f1d1a;opacity:.55}

.wz-schleier{position:absolute;inset:0;z-index:60;
  background:rgb(4 4 5 / .45);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  opacity:0;transition:opacity .3s ease}
.wz-schleier.da{opacity:1}

.wie-zettel{position:absolute;left:50%;top:50%;
  width:min(76vw,300px);
  transform:translate(-50%,-50%) rotate(-1.4deg) scale(.96);
  background:#fbf7ee;border-radius:1px;padding:30px 20px 20px;
  font-family:var(--s-fine);color:#1f1d1a;
  box-shadow:0 1px 2px rgba(16,14,10,.26), 0 9px 20px rgba(0,0,0,.38);
  transition:transform .3s cubic-bezier(.25,.8,.3,1)}
.wz-schleier.da .wie-zettel{transform:translate(-50%,-50%) rotate(-1.4deg) scale(1)}

.panel .wie-zettel{width:min(82%,300px)}
.wz-text{font-size:clamp(15px,4.3vw,18px);line-height:1.5}

.wz-zu{position:absolute;top:12px;right:12px;width:18px;height:18px;
  -webkit-appearance:none;appearance:none;background:none;border:0;padding:0;
  color:#1f1d1a;opacity:.55;cursor:pointer}
.wz-zu::before,.wz-zu::after{content:'';position:absolute;
  left:1px;top:8.2px;width:16px;height:1.7px;background:currentColor;border-radius:1px}
.wz-zu::before{transform:rotate(45deg)}
.wz-zu::after{transform:rotate(-45deg)}
.wz-zu span{position:absolute;inset:-14px}
@media (prefers-reduced-motion: reduce){
  .wz-schleier,.wie-zettel{transition:none}
}

.f2y-schuhblick,
.f2y-kroeteblick,
.f2y-packen,
.f2y-zettelwand{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  opacity:0;transition:opacity .6s ease}
.f2y-schuhblick.an,
.f2y-kroeteblick.an,
.f2y-packen.an,
.f2y-zettelwand.an{opacity:1}
.f2y-schuhblick svg{width:min(58vw,232px);height:auto;display:block}

.f2y-kroeteblick svg{width:min(58vw,232px);height:auto;display:block}

.f2y-packen{width:min(92vw,340px);height:420px}
.f2y-packen .p-kroete{position:absolute;left:2%;top:0}
.f2y-packen .p-kamera{position:absolute;right:2%;top:0}
.f2y-packen .p-dose{position:absolute;left:50%;bottom:206px;
  transform:translateX(-50%)}
.f2y-packen .ding{cursor:grab;touch-action:none;
  transition:transform .28s cubic-bezier(.25,.8,.3,1)}

.f2y-packen .ding.faesst{transition:none}
.f2y-packen .ding.faesst{cursor:grabbing;filter:brightness(1.25)}
.f2y-packen .ding.weg{opacity:0;transition:opacity .4s ease}

.f2y-packen .p-kamera.aufdeckel{position:absolute;left:50%;top:-38px;right:auto;
  transform:translateX(-50%);cursor:default;pointer-events:none;z-index:2}
.f2y-packen .p-kamera.aufdeckel svg{width:76px;height:auto}
.f2y-packen .p-kamera.aufdeckel .objektlabel{display:none}

.f2y-ecken{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  display:grid;grid-template-columns:repeat(2,auto);
  gap:14px 18px;justify-items:center;
  transition:opacity .4s ease}
.f2y-ecken.weg{opacity:0}
.f2y-ecken .p-ecke{appearance:none;border:0;background:none;padding:0;
  cursor:pointer;touch-action:manipulation}
.f2y-ecken .p-ecke svg{width:104px;height:auto}
.f2y-ecken .p-ecke.zug{opacity:.55;cursor:default}

.f2y-zettelwand{width:calc(268px * var(--e));height:calc(340px * var(--e));
  text-align:center}
.f2y-zettelwand .zw-brett{position:absolute;left:0;top:0}
.f2y-zettelwand .zw-brett svg{width:calc(268px * var(--e));height:auto;display:block}

.f2y-zettelwand .zw-zettel{position:absolute;left:calc(50% - 75px * var(--e));
  bottom:0;width:calc(150px * var(--e));cursor:grab;touch-action:none;
  transition:top .34s cubic-bezier(.25,.8,.3,1),
             bottom .34s cubic-bezier(.25,.8,.3,1),
             transform .34s cubic-bezier(.25,.8,.3,1)}
.f2y-zettelwand .zw-zettel svg{width:calc(150px * var(--e));height:auto;display:block}

.f2y-zettelwand .zw-zettel.faesst{transition:none;cursor:grabbing;filter:brightness(1.25)}

.f2y-zettelwand .zw-zettel.haengt{top:calc(27px * var(--e));bottom:auto;
  cursor:default;transform:rotate(-1.2deg)}

.f2y-zettelwand .z-ohr{transition:transform .5s ease;
  transform-box:view-box;transform-origin:46px 41px}
.f2y-zettelwand .zw-zettel.fest .z-ohr{transform:scale(.1)}

.f2y-zettelwand .zw-zwecke{position:absolute;left:calc(50% - 23px * var(--e));
  top:calc(28px * var(--e));width:calc(46px * var(--e));
  cursor:pointer;touch-action:none;z-index:4;opacity:0;
  transition:opacity .4s ease,transform var(--rz-zeit,.9s) linear}
.f2y-zettelwand .zw-zwecke.an{opacity:1}
.f2y-zettelwand .zw-zwecke svg{width:calc(46px * var(--e));height:auto;display:block}
.f2y-zettelwand .zw-zwecke .rz-stift{transform-box:view-box;transform-origin:20px 14px;
  transition:transform var(--rz-zeit,.9s) linear}
.f2y-zettelwand .zw-zwecke.drueckt,
.f2y-zettelwand .zw-zwecke.drin{transform:translateY(calc(23.6px * var(--e)))}
.f2y-zettelwand .zw-zwecke.drueckt .rz-stift,
.f2y-zettelwand .zw-zwecke.drin .rz-stift{transform:scaleY(.03)}

.f2y-zettelwand .zw-zwecke.zurueck,
.f2y-zettelwand .zw-zwecke.zurueck .rz-stift{transition-duration:.24s;
  transition-timing-function:cubic-bezier(.25,1.2,.4,1)}
.f2y-zettelwand .zw-zwecke.drin{cursor:default}

.f2y-zettelwand .zw-tipp{left:50%;top:calc(9px * var(--e));transform:translate(-50%,-50%)}

.f2y-zettelwand .zw-name{position:absolute;left:50%;top:calc(198px * var(--e));
  transform:translateX(-50%);white-space:nowrap}

.f2y-radkarte{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:stretch;opacity:0;transition:opacity .6s ease}
.f2y-radkarte.an{opacity:1}
#radkarte{flex:1 1 auto;width:100%;min-height:0;display:block;
  background:var(--grund);touch-action:none;cursor:pointer}
.radzeile{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  min-height:calc(2.4 * var(--zeile-barlow));padding:.3em .7em 0}

.radfrage{font-family:var(--s-regie);font-size:var(--barlow);
  line-height:var(--zeile-barlow);letter-spacing:.09em;
  color:var(--regie);text-align:center}

.radfrage.fragt{animation:radfrage-atmet 3.2s ease-in-out infinite}
@keyframes radfrage-atmet{0%,100%{opacity:.6}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .radfrage.fragt{animation:none} }

.f2y-kai{position:absolute;inset:0;overflow:hidden;
  --himmel-oben:#5f9fd0; --himmel-mitte:#84bade; --himmel-unten:#b7d9ec;
  opacity:0;transition:opacity .8s ease}
.f2y-kai.an{opacity:1}
.f2y-kai .k-himmel{position:absolute;left:0;right:0;top:0;
  bottom:calc(var(--k-ufer, 20px) + var(--k-meer, 40px));pointer-events:none;
  background:linear-gradient(177deg, var(--himmel-oben) 0%,
    var(--himmel-mitte) 54%, var(--himmel-unten) 100%)}
.f2y-kai .k-wolken{position:absolute;left:0;right:0;top:0;
  bottom:calc(var(--k-ufer, 20px) + var(--k-meer, 40px));
  overflow:hidden;pointer-events:none}
.f2y-kai .k-bahn{position:absolute;inset:0;will-change:transform;
  animation:mfZiehen var(--wdur, 120s) linear var(--wstart, 0s) infinite}

.f2y-kai .k-meer{position:absolute;left:0;right:0;bottom:var(--k-ufer, 20px);
  height:var(--k-meer, 40px);overflow:hidden;pointer-events:none;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--himmel-unten), #24506e 42%) 0%,
    color-mix(in srgb, var(--himmel-mitte), #143247 66%) 58%,
    color-mix(in srgb, var(--himmel-oben), #060d14 82%) 100%)}
.f2y-kai .k-band{position:absolute;
  background:radial-gradient(closest-side, rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.55) 46%, rgba(255,255,255,0) 100%);
  opacity:var(--bdeck, .5);filter:blur(1.4px);
  animation:kaiMeerzug var(--bdur, 60s) linear var(--bstart, 0s) infinite}
@keyframes kaiMeerzug{from{transform:translateX(-130%)}to{transform:translateX(230%)}}

.f2y-kai .k-wasser{position:absolute;left:0;right:0;bottom:var(--k-ufer, 20px);
  height:var(--k-meer, 40px);overflow:hidden;pointer-events:none}
.f2y-kai .k-wasser .welle{position:absolute;left:0;top:0;width:200%;height:100%;
  animation:kaiDrift var(--wdur, 20s) linear infinite}
.f2y-kai .k-wasser .welle.rueck{animation-direction:reverse}
.f2y-kai .k-wasser .welle path{fill:none;stroke:#123043;stroke-width:1.1;
  vector-effect:non-scaling-stroke;stroke-linecap:round}
@keyframes kaiDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.f2y-kai .k-kante{position:absolute;left:0;right:0;bottom:var(--k-ufer, 20px);
  height:calc(16px * var(--e));pointer-events:none}
.f2y-kai .k-kante svg{display:block;width:100%;height:100%}
.f2y-kai .k-kante path{fill:none;stroke:#14242e;stroke-width:1.2}
.f2y-kai .k-kante .ripple{stroke:#1b2f3b;stroke-dasharray:6 12}

.f2y-kai .ding svg path,.f2y-kai .ding svg rect,
.f2y-kai .ding svg line,.f2y-kai .ding svg circle{stroke:#e8f0f4}
.f2y-kai .objektlabel{color:#dfe6ea;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.f2y-kai .k-turm,.f2y-kai .k-stein{position:absolute;pointer-events:none}
.f2y-kai .k-kroete{position:absolute;left:4%;top:6%;
  cursor:grab;touch-action:none;z-index:3;
  opacity:0;transition:opacity .5s ease}
.f2y-kai .k-kroete.an{opacity:1}
.f2y-kai .k-kroete.faesst{cursor:grabbing;filter:brightness(1.25)}
.f2y-kai .k-kroete.sitzt{cursor:default}

.f2y-kai .k-kroete.setzt{animation:kaiSetzt var(--wackel, .24s) ease-out 1;
  transform-origin:50% 100%}
@keyframes kaiSetzt{
  0%{transform:rotate(-2.2deg) translateY(-1.5px)}
  55%{transform:rotate(1.2deg)}
  100%{transform:rotate(0)}
}

.fuss .k-ritual{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  transition:opacity .4s ease}
.fuss .k-ritual.weg{opacity:0}
.fuss .k-ritual .ausloeserbox,
.fuss .k-ritual .kurbelbox{flex-direction:column-reverse;
  padding:0 0 calc(var(--knopf-mitte) - 42px)}
.fuss .k-ritual .ausloeserknopf,
.fuss .k-ritual .kurbelknopf{width:84px;height:84px}

.f2y-kai .k-sucher{position:absolute;pointer-events:none;opacity:0;
  transform:translateY(calc(8px * var(--e)));
  transition:opacity .4s, transform .4s;z-index:8}
.f2y-kai .k-sucher.an{opacity:1;transform:translateY(0)}
.f2y-kai .k-sucher.aktiv{pointer-events:auto;cursor:grab;touch-action:none}
.f2y-kai .k-sucher.aktiv:active{cursor:grabbing}
.f2y-kai .k-sucher.rastet{animation:kaiRuck var(--ruck, .19s) ease-out 1}
@keyframes kaiRuck{
  0%{transform:translateY(-2px) rotate(.5deg)}
  60%{transform:translateY(1px) rotate(-.3deg)}
  100%{transform:translateY(0)}
}
.f2y-kai .k-ecke{position:absolute;border:0 solid #dfe6ea;--ew:4.3px;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.6)) drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.f2y-kai .k-ecke.lo{left:0;top:0;border-left-width:var(--ew);border-top-width:var(--ew);transform-origin:left top}
.f2y-kai .k-ecke.ro{right:0;top:0;border-right-width:var(--ew);border-top-width:var(--ew);transform-origin:right top}
.f2y-kai .k-ecke.lu{left:0;bottom:0;border-left-width:var(--ew);border-bottom-width:var(--ew);transform-origin:left bottom}
.f2y-kai .k-ecke.ru{right:0;bottom:0;border-right-width:var(--ew);border-bottom-width:var(--ew);transform-origin:right bottom}

.f2y-kai .k-sucher.gerastet .k-ecke{--ew:5.6px}
.f2y-kai .k-sucher.rastet .k-ecke{animation:kaiSchnapp var(--ruck,.19s) ease-out 1}
@keyframes kaiSchnapp{
  0%{transform:scale(1);filter:none}
  38%{transform:scale(1.32);filter:drop-shadow(0 0 7px rgba(255,255,255,.9))}
  100%{transform:scale(1);filter:none}
}
.f2y-kai .k-verschluss{position:absolute;inset:0;background:#050505;opacity:0}

.f2y-kai.still .k-bahn{animation:none;transform:translateX(var(--wruhe, 0%))}
.f2y-kai.still .k-band{animation:none;transform:translateX(var(--bruhe, 40%))}
.f2y-kai.still .k-wasser .welle{animation:none}
@media (prefers-reduced-motion: reduce){
  .f2y-kai .k-bahn{animation:none;transform:translateX(var(--wruhe, 0%))}
  .f2y-kai .k-band{animation:none;transform:translateX(var(--bruhe, 40%))}
  .f2y-kai .k-wasser .welle{animation:none}
  .f2y-kai .k-kroete.setzt{animation:none}
  .f2y-kai .k-sucher{transform:none}
  .f2y-kai .k-sucher.rastet,.f2y-kai .k-sucher.rastet .k-ecke{animation:none}
}

.f2y-kecken{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;grid-template-columns:repeat(2,auto);
  gap:calc(16px * var(--e)) calc(20px * var(--e));justify-items:center;
  opacity:0;transition:opacity .5s ease}
.f2y-kecken.an{opacity:1}
.f2y-kecken .p-ecke{appearance:none;border:0;background:none;padding:0;
  cursor:pointer;touch-action:manipulation}
.f2y-kecken .p-ecke svg{width:calc(104px * var(--e));height:auto}
.f2y-kecken .p-ecke.zug{opacity:.55;cursor:default}

.f2y-ltrahmen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(230px * var(--e));max-width:86%;
  border:1px solid #2a2f33;border-radius:2px;overflow:hidden;
  opacity:0;transition:opacity .6s ease}
.f2y-ltrahmen.an{opacity:1}
.f2y-ltrahmen svg{display:block;width:100%;height:auto}

.f2y-falten{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  opacity:0;transition:opacity .6s ease}
.f2y-falten.an{opacity:1}
#buehne .f2y-falten #faltbogen{width:min(190px,56vw);height:min(130px,32vh);position:relative}
#buehne .f2y-falten #faltbogen.offen1{width:min(250px,72vw);height:min(210px,36vh)}
#buehne .f2y-falten #faltbogen.offen2{width:min(300px,84vw);height:min(300px,40vh)}
#buehne .f2y-falten #faltbogen.offen3{width:min(340px,90vw);height:min(360px,44vh)}

.f2y-falten .blackbox{display:flex;align-items:center;justify-content:center;
  border:1px dashed #444;color:#8a8a8a;letter-spacing:.2em;
  font-size:calc(var(--barlow) * .72);font-family:var(--s-regie)}
.f2y-falten .blackbox.als-svg{border-color:transparent;color:transparent}
.f2y-falten #faltbogen.ziehbar{cursor:grab;touch-action:none}

.f2y-falten .halteknopf{appearance:none;background:none;padding:0;
  width:150px;height:60px;cursor:pointer;touch-action:none;
  opacity:0;transition:opacity .4s ease}
.f2y-falten .halteknopf.da{opacity:1}
.f2y-falten .haiku{position:absolute;left:50%;top:50%;
  pointer-events:none;
  transform:translate(-50%,-50%) rotate(-.6deg);
  text-align:center;color:#1a1a1a;line-height:1.9;
  font-family:var(--s-hand);font-weight:500;font-size:1.3rem;letter-spacing:0;
  background:#faf8f1;padding:1.6rem 1.3rem;width:max-content;max-width:min(19rem,80vw);
  border-radius:1px;box-shadow:0 3px 16px rgba(0,0,0,.5);
  opacity:0;transition:opacity .6s ease}
.f2y-falten .haiku.da{opacity:1}
.f2y-falten .haiku::before{content:'';position:absolute;left:0;right:0;top:34%;
  border-top:1px dashed #ddd8ca}
@media (prefers-reduced-motion: reduce){
  .f2y-falten,.f2y-falten .haiku,.f2y-falten .halteknopf{transition:none}
}

.fotorolle{flex:1 1 auto;min-height:0;display:flex;
  align-items:center;justify-content:center;
  padding:8px 16px 34px;

  touch-action:pan-y}
.fotorolle .fotoseite{position:relative;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;max-height:100%;min-height:0;width:100%;
  animation:fotoseite-an .45s ease both}

.fotorolle .rolle-wisch{position:absolute;left:50%;bottom:15%;
  --kl:48px;margin-left:calc(var(--kl) / -2);pointer-events:none;z-index:3}
.fotorolle .rolle-wisch .klecks{
  animation:klecks-wischt-links 2.9s cubic-bezier(.35,0,.3,1) infinite}
@keyframes klecks-wischt-links{
  0%{transform:translateX(34px);opacity:0}
  16%{opacity:.95}
  62%{transform:translateX(-34px);opacity:.95}
  82%,100%{transform:translateX(-48px);opacity:0}}
.fotorolle .fotovoll{max-width:100%;min-height:0;flex:0 1 auto;
  object-fit:contain;display:block;border-radius:4px;
  filter:grayscale(1)}
.fotorolle .fotowort{min-height:0;flex:0 1 auto;overflow-y:auto;
  overscroll-behavior:contain;padding:0 6px}
.fotorolle .fotowort p{margin:0;font-family:var(--s-lesen);
  font-size:calc(var(--hanken) * .88);line-height:1.75;color:#cfcfcf}
.fotorolle .fotowort.gedanke p{color:#bcbcbc;font-style:italic}
.fotopunkte{flex:0 0 auto;display:flex;gap:7px;
  align-items:center;justify-content:center}
.fotopunkte .fpunkt{width:6.5px;height:6.5px;border-radius:50%;
  background:#3a3a3e}
.fotopunkte .fpunkt.an{background:#a8a8ac}
@keyframes fotoseite-an{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .fotorolle .fotoseite{animation:none}
  .fotorolle .rolle-wisch .klecks{animation:none}
}

.f2y-status{position:absolute;left:50%;top:4%;transform:translateX(-50%);
  width:min(85%, 340px);display:flex;flex-direction:column;align-items:flex-start;
  gap:.3rem;z-index:5;

  background:var(--buehne);
  padding:.75rem 2px .85rem;border-top:1px solid #3a3a3a;
  border-bottom:1px solid #3a3a3a;
  font-family:var(--s-regie);font-size:calc(var(--barlow) * .82);
  letter-spacing:.18em;color:#8f8f8f;
  opacity:0;transition:opacity .5s ease}
.f2y-status.da{opacity:1}
.f2y-status .nzeit{flex:none;letter-spacing:.12em;color:#6e6e6e}
@media (prefers-reduced-motion: reduce){ .f2y-status{transition:none} }
.ltfoto .ltf-ding path,.ltfoto .ltf-ding rect,
.ltfoto .ltf-ding line,.ltfoto .ltf-ding circle{stroke:#eef4f8;stroke-width:1.4;
  vector-effect:non-scaling-stroke;fill:none}
.ltfoto .ltf-ding [fill="var(--buehne)"]{fill:#0b0b0b}
.ltfoto .ltf-wfern,.ltfoto .ltf-wnah{filter:blur(2.2px)}
.ltfoto .ltf-wfern path{fill:#fff;fill-opacity:.86;stroke:none}
.ltfoto .ltf-wnah path{fill:#fff;fill-opacity:.94;stroke:none}
.ltfoto .ltf-moewe path{fill:none;stroke:#33454f;stroke-width:1.1;
  vector-effect:non-scaling-stroke;stroke-linecap:round}
.ltfoto .ltf-kante{fill:none;stroke:#1d3140;stroke-width:1.4;
  vector-effect:non-scaling-stroke}
.ltfoto .ltf-horizont{fill:none;stroke:#cfe4f0;stroke-width:1;opacity:.7;
  vector-effect:non-scaling-stroke}
.ltfoto .ltf-ripple{fill:none;stroke:#e8f4fb;stroke-width:1;opacity:.55;
  vector-effect:non-scaling-stroke;stroke-linecap:round}

.satz.blatt{font-size:calc(var(--hanken) * .92);line-height:1.5;
  text-align:left;color:#c8c6c1;
  border-left:1px solid #3a3a3a;padding-left:14px}
.satz.blatt b{font-weight:600;color:var(--tinte)}

.h-wisch.still .h-weg{opacity:0}
.h-wisch.still.gefasst .h-weg{opacity:1}

.h-loeschen{display:flex;align-items:center;justify-content:center;gap:9px;
  color:#f2e6e6;font-family:var(--werkzeug);font-size:12px;
  font-weight:600;letter-spacing:.01em;cursor:pointer}

.h-weg .h-loeschen{height:100%;padding:0 17px;justify-content:flex-start}
.h-loeschen .eimer{flex:0 0 auto;display:flex;width:19px;height:19px}
.h-loeschen .eimer svg{width:100%;height:100%;display:block;overflow:visible}
.h-loeschen.ruft .eimer{animation:ruf-atem 3.4s ease-in-out infinite}
.h-loeschen.ruft .eimer svg{animation:ruf-stups 4.6s ease-in-out infinite}

.h-zeile.zeile-zupft{animation:zeile-zupft 2.6s ease-in-out infinite}
.h-zeile.leuchtet.zeile-zupft{animation:zeile-leuchtet 2.4s ease-in-out infinite,
  zeile-zupft 2.6s ease-in-out infinite}
@keyframes zeile-zupft{
  0%{transform:translateX(0)}
  26%{transform:translateX(40px)}
  38%{transform:translateX(40px)}
  52%{transform:translateX(0)}
  100%{transform:translateX(0)}}
@media (prefers-reduced-motion: reduce){
  .h-zeile.zeile-zupft,.h-zeile.leuchtet.zeile-zupft{animation:none}
}

.h-wisch{transition:height .34s cubic-bezier(.4,0,.2,1),opacity .34s ease}
.h-wisch.faellt{height:0 !important;opacity:0;overflow:hidden}
@media (prefers-reduced-motion: reduce){
  .h-loeschen.ruft .eimer,.h-loeschen.ruft .eimer svg,
  .h-wisch .wisch-zug .klecks{animation:none}
}

.h-schleier{position:absolute;inset:0;z-index:30;background:rgb(4 4 5 / .62);
  opacity:0;transition:opacity .28s ease}
.h-schleier.da{opacity:1}
.h-blatt{position:absolute;left:0;right:0;bottom:0;z-index:31;
  background:#191920;border-radius:16px 16px 0 0;

  padding:20px 20px 24px;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.25,.8,.3,1)}
.h-schleier.da .h-blatt{transform:translateY(0)}
.h-blatt .frage{font-family:var(--werkzeug);font-size:14px;font-weight:600;
  line-height:1.35;color:#e2e2e6;padding-right:34px;margin-bottom:18px}

.h-blatt .h-loeschen{width:100%;height:46px;border-radius:11px;
  background:var(--h-rot);font-size:13.5px}
.h-blatt .h-loeschen:active{filter:brightness(1.14)}

.h-blatt .h-abbruch{width:100%;height:46px;border-radius:11px;margin-top:10px;
  background:#25252a;color:#e2e2e6;font-size:13.5px;
  font-family:var(--werkzeug);font-weight:600;letter-spacing:.01em}
.h-blatt .h-abbruch:active{filter:brightness(1.14)}

.h-blatt .h-zu{position:absolute;top:14px;right:14px;width:20px;height:20px;
  color:#9a9aa0;cursor:pointer}
.h-blatt .h-zu::before,.h-blatt .h-zu::after{content:'';position:absolute;
  left:2px;top:9.2px;width:16px;height:1.6px;background:currentColor;border-radius:1px}
.h-blatt .h-zu::before{transform:rotate(45deg)}
.h-blatt .h-zu::after{transform:rotate(-45deg)}
.h-blatt .h-zu span{position:absolute;inset:-14px}

@media (prefers-reduced-motion: reduce){
  .h-schleier,.h-blatt,.h-wisch,.h-wisch[data-lauf="1"] .h-zeile{transition:none}
}

#ov-handy{line-height:normal}

#buehne .kabgelegt{position:relative}
#buehne .kabgelegt.ruft{animation:ruf-atem 3.4s ease-in-out infinite}
#buehne .kabgelegt.ruft .objektbild{animation:ruf-stups 4.6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  #buehne .kabgelegt.ruft,#buehne .kabgelegt.ruft .objektbild{animation:none}
}

#buehne .kinnen .kding .objektbild{height:min(calc(106px * var(--scale)), 17.6vh) !important;width:auto !important}
#buehne .kinnen .kdbrief .objektbild{height:min(106px, 13.2vh) !important;width:auto !important}

.flugebene{position:absolute;inset:0;pointer-events:none;z-index:5}
.flieger svg{animation:ding-ruht 4.6s ease-in-out infinite;transition:transform .22s ease}
@keyframes ding-ruht{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

.flieger.fassbar{pointer-events:auto;cursor:grab;touch-action:none}
.flieger.fassbar::after{content:"";position:absolute;inset:-18px}
.flieger.gefasst{cursor:grabbing}
.flieger.gefasst svg{animation:none;transform:scale(1.05)}

.ziel .kiste{display:block;position:relative;z-index:2;
  transition:transform .22s ease;transform-origin:50% 100%}
.ziel.will .kiste{transform:scale(1.045)}

.zieh-zug{position:absolute;left:50%;top:50%;--kl:48px;z-index:3;
  pointer-events:none;transform:translate(-50%,-50%)}
.zieh-zug.fest .klecks::before{transform:scale(.9)}

.namensbalken{display:inline-block;width:4.4em;height:.72em;
  background:var(--tinte);border-radius:2px}

.schirm{animation:auftauchen .3s ease both}
.schirm-zeile{max-width:var(--spalte);margin:0 auto}

.gegenlicht{position:relative;display:block}
.gegenlicht > *{position:relative;z-index:2}

.gegenlicht::before{content:'';position:absolute;z-index:1;pointer-events:none;
  inset:-30% -45%;
  background:radial-gradient(66% 54% at 50% 48%,
    rgb(200 200 200 / 25.78875%) 0%,
    rgb(200 200 200 / 17.85375%) 24%,
    rgb(200 200 200 / 8.926875%) 50%,
    rgb(200 200 200 / 2.975625%) 68%,
    rgb(0 0 0 / 0%) 80%)}
.gegenlicht.auf-grund::before{
  background:radial-gradient(66% 54% at 50% 48%,
    rgb(200 200 200 / 13.26%) 0%,
    rgb(200 200 200 / 9.18%) 24%,
    rgb(200 200 200 / 4.59%) 50%,
    rgb(200 200 200 / 1.53%) 68%,
    rgb(0 0 0 / 0%) 80%)}
.schirm-quinn{display:block;width:122px;height:auto}

.f2y-paket{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .6s ease;pointer-events:none}
.f2y-paket.an{opacity:1;pointer-events:auto}
.pk-flaeche{position:relative;display:block;padding:6px;margin:0;
  background:var(--buehne);border:1.5px solid #8a8a8a;border-radius:6px;
  touch-action:none}
.pk-pad{display:block;width:min(300px, 78vw);height:auto}
.pk-tipp{left:50%;top:50%;margin:calc(var(--kl) / -2) 0 0 calc(var(--kl) / -2)}

.f2y-traum{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(374px, 96%);z-index:6}
.flieger{position:absolute;left:0;top:0;will-change:transform}

.tf-buehne{position:relative;min-height:calc(1.72 * 1.05rem * var(--ts))}
.tf-gruppe{position:absolute;left:0;right:0;top:0;margin:0}

.taucht{animation:auftauchen .7s ease both}
@keyframes auftauchen{from{opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

.f2y-demo{position:fixed;inset:0;z-index:600;background:var(--grund);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.de-innen{max-width:var(--spalte);margin:0 auto;
  padding:72px 26px calc(72px + env(safe-area-inset-bottom, 0px))}
.de-marke{font-family:var(--s-regie);font-size:var(--barlow);line-height:var(--zeile-barlow);
  letter-spacing:.22em;text-transform:uppercase;color:var(--regie)}
.de-satz{margin:18px 0 0;color:var(--tinte)}
.de-frage{margin-top:44px}
.de-fragtitel{margin:0;color:var(--tinte)}
.de-fragsatz{margin:8px 0 20px;font-family:var(--s-regie);font-size:var(--barlow);
  line-height:var(--zeile-barlow);color:var(--regie)}
.de-zurueck{display:inline-block;margin-top:52px;font-family:var(--s-regie);
  font-size:var(--barlow);letter-spacing:.14em;text-transform:uppercase;
  color:rgb(var(--moewe-rgb) / .6);text-decoration:none}

.bo-fragen{margin-top:34px}
.bo-frage{margin:0 0 38px}
.bo-text{margin:0 0 6px;color:var(--tinte)}
.bo-nr{display:inline-block;min-width:1.35em;font-family:var(--s-regie);
  font-size:var(--barlow);color:rgb(var(--moewe-rgb) / .6)}
.bo-zusatz{margin:0 0 12px;font-family:var(--s-regie);font-size:var(--barlow);
  line-height:var(--zeile-barlow);color:var(--regie)}

.bo-janein{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.bo-janein .wahl{animation:none;min-width:96px;text-align:center}

.bo-kacheln{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.bo-kacheln.bo-zweispaltig{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
.bo-kachel{display:flex;align-items:center;gap:11px;text-align:left;
  padding:8px 4px;border-radius:8px;
  font-size:calc(var(--hanken) * .87);line-height:1.3;
  color:rgb(236 233 226 / .72);
  transition:color .18s ease, opacity .18s ease}
.bo-kachel .bo-kaest{flex:0 0 auto;width:19px;height:19px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgb(255 255 255 / .34);border-radius:5px;
  transition:background-color .18s ease, border-color .18s ease}
.bo-kachel .bo-kaest svg{width:13px;height:13px;fill:none;
  stroke:var(--tinte-dunkel);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.bo-kachel.gewaehlt{color:var(--tinte)}
.bo-kachel.gewaehlt .bo-kaest{background:var(--moewe);border-color:var(--moewe)}
.bo-kachel.gewaehlt .bo-kaest svg{opacity:1}
.bo-kachel.nicht{opacity:.38}

.bo-kacheln.bo-eine .bo-kaest{border-radius:50%}
.bo-kacheln.bo-eine .bo-kaest svg{display:none}
.bo-kacheln.bo-eine .bo-kaest::after{content:'';width:9px;height:9px;
  border-radius:50%;background:var(--tinte-dunkel);
  opacity:0;transition:opacity .18s ease}
.bo-kacheln.bo-eine .bo-kachel.gewaehlt .bo-kaest::after{opacity:1}

.bo-vorfrage{margin-top:14px}
.bo-stufe2{margin-top:18px}
.bo-stufe2[hidden],.bo-klappinhalt[hidden]{display:none}
.bo-klapp{width:100%;display:flex;align-items:center;gap:10px;
  padding:9px 4px;border-top:1px solid rgb(255 255 255 / .12);
  font-family:var(--s-regie);font-size:var(--barlow);line-height:var(--zeile-barlow);
  letter-spacing:.14em;text-transform:uppercase;color:var(--regie);text-align:left}
.bo-klapp:last-of-type{border-bottom:1px solid rgb(255 255 255 / .12)}
.bo-klapp .bk-zahl{margin-left:auto;letter-spacing:0;color:rgb(var(--moewe-rgb) / .6)}
.bo-klapp .bk-winkel{flex:0 0 auto;width:14px;height:14px;transition:transform .2s ease}
.bo-klapp .bk-winkel polyline{fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.bo-klapp.auf .bk-winkel{transform:rotate(90deg)}
.bo-klappinhalt{padding:0 0 14px}
.bo-klappinhalt .bo-kacheln{margin-top:4px}
.bo-klappinhalt .bo-kachel{align-items:flex-start}
.bo-klappinhalt .bo-kachel .bo-kaest{margin-top:1px}

.bo-regler{margin-top:16px}
.bo-rspur{position:relative;height:32px;display:flex;align-items:center}
.bo-rspur input{-webkit-appearance:none;appearance:none;width:100%;height:32px;
  margin:0;background:none;position:relative;z-index:2}
.bo-rspur input::-webkit-slider-runnable-track{height:2px;
  background:rgb(255 255 255 / .22);border-radius:1px}
.bo-rspur input::-moz-range-track{height:2px;
  background:rgb(255 255 255 / .22);border-radius:1px}
.bo-rspur input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-10px;border-radius:50%;
  background:var(--moewe);border:0}
.bo-rspur input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--moewe);border:0}
.bo-rasten{position:absolute;left:10px;right:10px;top:50%;height:0;z-index:1;
  display:flex;justify-content:space-between;pointer-events:none}
.bo-rasten i{width:4px;height:4px;border-radius:50%;transform:translateY(-2px);
  background:rgb(255 255 255 / .3)}
.bo-renden{display:flex;justify-content:space-between;margin-top:4px;
  font-family:var(--s-regie);font-size:var(--barlow);color:rgb(var(--moewe-rgb) / .6)}
.bo-rwert{min-height:var(--zeile);margin-top:6px;color:var(--tinte);opacity:0;
  transition:opacity .2s ease}
.bo-regler.beruehrt .bo-rwert{opacity:1}

.bo-freitext{margin-top:14px}
.bo-freitext textarea{width:100%;padding:.6em .75em;resize:vertical;
  background:rgb(255 255 255 / .05);color:var(--tinte);
  font-family:var(--s-lesen);font-size:var(--hanken);line-height:var(--zeile);
  border:1.5px solid rgb(255 255 255 / .18);border-radius:11px;outline:none}
.bo-freitext textarea:focus{border-color:rgb(var(--moewe-rgb) / .55)}
.bo-freitext textarea::placeholder{color:rgb(255 255 255 / .28)}

.bo-fuss{margin-top:10px}
.bo-ab{display:block;width:100%;padding:.6em 1em;border-radius:11px;
  background:var(--senden-ruhe);color:var(--senden-ruhe-zeichen);
  transition:background-color .25s ease, color .25s ease, opacity .25s ease}
.bo-ab.fertig{background:var(--moewe);color:var(--tinte-dunkel)}
.bo-ab:disabled{opacity:.4}

#hilfe-zugang{position:fixed;z-index:560;
  top:calc(10px + env(safe-area-inset-top, 0px));right:10px;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  color:rgb(var(--moewe-rgb) / .5)}
#hilfe-zugang:hover{color:rgb(var(--moewe-rgb) / .85)}

#neustart-zugang{position:fixed;z-index:560;
  top:calc(10px + env(safe-area-inset-top, 0px));right:56px;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  color:rgb(var(--moewe-rgb) / .5)}
#neustart-zugang:hover{color:rgb(var(--moewe-rgb) / .85)}
#neustart-zugang span{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  margin-top:-3px;font-family:var(--s-regie);font-size:10px;letter-spacing:.14em;

  line-height:1;
  text-transform:uppercase;white-space:nowrap}

#neustart-schleier{position:fixed;inset:0;z-index:570;background:rgb(0 0 0 / .55);
  opacity:0;pointer-events:none;transition:opacity .25s ease}
#neustart.offen #neustart-schleier{opacity:1;pointer-events:auto}
#neustart-fenster{position:fixed;z-index:575;left:50%;
  top:calc(64px + env(safe-area-inset-top, 0px));
  transform:translateX(-50%) translateY(-8px);
  width:min(330px, calc(100% - 32px));
  background:#16161a;border:1px solid rgb(255 255 255 / .12);border-radius:14px;
  padding:16px 18px 18px;opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease}
#neustart.offen #neustart-fenster{opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0)}
.nf-frage{margin:0;color:var(--tinte)}
.nf-wahl{display:flex;gap:10px;margin-top:16px}
.nf-wahl .wahl{animation:none;min-width:96px;text-align:center}

.nf-weg{display:block;width:100%;margin-top:18px;text-align:left;
  font-family:var(--s-regie);font-size:var(--barlow);line-height:var(--zeile-barlow);
  color:rgb(var(--moewe-rgb) / .5);transition:color .2s ease}
.nf-weg:hover{color:rgb(var(--moewe-rgb) / .85)}
#hilfe-schleier{position:fixed;inset:0;z-index:570;background:rgb(0 0 0 / .55);
  opacity:0;pointer-events:none;transition:opacity .25s ease}
#hilfe.offen #hilfe-schleier{opacity:1;pointer-events:auto}
#hilfe-fenster{position:fixed;z-index:575;left:50%;
  top:calc(64px + env(safe-area-inset-top, 0px));
  transform:translateX(-50%) translateY(-8px);
  width:min(330px, calc(100% - 32px));
  background:#16161a;border:1px solid rgb(255 255 255 / .12);border-radius:14px;
  padding:16px 18px 18px;opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease}
#hilfe.offen #hilfe-fenster{opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0)}
.hf-kopf{display:flex;align-items:baseline;justify-content:space-between}
.hf-titel{color:var(--tinte)}
.hf-zu{font-size:22px;line-height:1;color:rgb(var(--moewe-rgb) / .6);padding:2px 6px}
.hf-marke{margin-top:12px;font-family:var(--s-regie);font-size:var(--barlow);
  letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--moewe-rgb) / .6)}
.hf-ort{margin-top:6px}
.hf-szene{font-family:var(--s-regie);font-size:var(--barlow);color:var(--regie)}
.hf-zeile{margin-top:4px;color:var(--tinte);font-size:calc(var(--hanken) * .88);
  line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.hf-melden{display:block;width:100%;margin-top:16px;padding:.55em 1em;
  border-radius:11px;background:var(--moewe);color:var(--tinte-dunkel);
  transition:opacity .25s ease}
.hf-melden:disabled{opacity:.4}
.hf-danach{margin-top:10px;font-family:var(--s-regie);font-size:var(--barlow);
  line-height:var(--zeile-barlow)}
.hf-danach.gut{color:var(--regie)}
.hf-danach.schief{color:#c96a4a}

.f2y-flur{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:12px;opacity:0;transition:opacity .9s ease}
.f2y-flur.an{opacity:1}
.f2y-flur .a-flur-kasten{width:min(86vw, 360px);max-width:100%}
.a-flur{position:relative;aspect-ratio:320 / 300}
.a-flur svg{position:absolute;inset:0;width:100%;height:100%;display:block}

.a-flur-quinn{position:absolute;left:27%;width:27%;bottom:34.4%}
.a-flur-quinn img{width:100%;height:auto;display:block}

.a-flur-blinzel .a-lid{
  transform-box:fill-box;transform-origin:50% 0;
  transform:scaleY(0);
  animation:quinnBlinzeln 7.2s ease-in-out infinite}
@keyframes quinnBlinzeln{
  0%, 12.5%    {transform:scaleY(0)}
  13.9%, 15.1% {transform:scaleY(1)}
  16.5%, 18.9% {transform:scaleY(0)}
  20.1%, 21.3% {transform:scaleY(1)}
  22.7%, 100%  {transform:scaleY(0)}
}
@media (prefers-reduced-motion: reduce){
  .a-flur-blinzel .a-lid{animation:none}
}

.rsperr{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  padding-top:20%;gap:.5rem}
.rsuhr{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:2rem;font-weight:700;letter-spacing:.18em;
  color:#ccc;font-variant-numeric:tabular-nums;line-height:1}
.rsdat{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:.82rem;font-weight:400;letter-spacing:.06em;color:#8a8a8a}

.hriss{position:absolute;inset:0;pointer-events:none;z-index:420}
.hriss svg{display:block;width:100%;height:100%}

.tr-quinn{position:absolute;left:62.9%;top:20.8%;width:24%;opacity:0;
  transition:opacity 1.4s ease}

.tr-quinn.da{opacity:1}
.tr-quinn img{display:block;width:100%;height:auto}

.traumbild{--tr-klein:.55}

.traumbild .tr-punkte{position:absolute;inset:0;pointer-events:none}
.traumbild .tr-rutsch{transform-origin:170px 150px}
.traumbild .tr-punkte{transform-origin:50% 78.947%}
.traumbild .tr-bankflaeche{transform-origin:0 150px}
.traumbild .tr-rutsch, .traumbild .tr-punkte, .traumbild .tr-bankflaeche{transition:transform 1.1s ease}
.traumbild.rutsch .tr-rutsch{transform:translateX(-28px) scale(var(--tr-klein))}
.traumbild.rutsch .tr-punkte{transform:translateX(-8.235%) scale(var(--tr-klein))}
.traumbild.rutsch .tr-bankflaeche{transform:scaleY(var(--tr-klein))}
@media (prefers-reduced-motion: reduce){
  .tr-quinn{transition:none}
  .traumbild .tr-rutsch, .traumbild .tr-punkte, .traumbild .tr-bankflaeche{transition:none}
}

.f2y-napf{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:12px;opacity:0;transition:opacity .9s ease}
.f2y-napf.an{opacity:1}
.f2y-napf img{display:block;width:min(64vw,260px);height:auto}
@media (prefers-reduced-motion: reduce){ .f2y-napf{transition:none} }

.f2y-qmorgen{--qrechts:85px; --qgrund:min(0.2955vw, 1.2045px);
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:flex-end;justify-content:center;padding:0 12px;
  opacity:0;transform:translateX(var(--qrechts));
  transition:opacity 1.4s ease}
.f2y-qmorgen.an{opacity:1}

.f2y-qmorgen .q-lauf{position:relative;display:block}
.f2y-qmorgen .q-wach{display:block;height:auto;
  width:calc(var(--q-wach-b, 176) * var(--qgrund))}
.f2y-qmorgen .q-schlaf{position:absolute;left:0;bottom:0;height:auto;
  width:calc(var(--q-schlaf-b, 127) * var(--qgrund));

  transform:scaleX(-1)}

.f2y-qmorgen .q-wach{opacity:0}
.f2y-qmorgen .q-schlaf{opacity:1}
.f2y-qmorgen.wacht .q-wach,
.f2y-qmorgen.wacht .q-schlaf{
  transition:opacity var(--q-blende, 780ms) var(--q-schritt, steps(6, end))}
.f2y-qmorgen.wacht .q-wach{opacity:1}
.f2y-qmorgen.wacht .q-schlaf{opacity:0}

.f2y-qmorgen.wach-sofort .q-wach{opacity:1}
.f2y-qmorgen.wach-sofort .q-schlaf{opacity:0}
@media (prefers-reduced-motion: reduce){
  .f2y-qmorgen{transition:none}
  .f2y-qmorgen.wacht .q-wach,
  .f2y-qmorgen.wacht .q-schlaf{transition:none}
}

.f2y-krolle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:12px;opacity:0;transition:opacity .9s ease}
.f2y-krolle.an{opacity:1}
@media (prefers-reduced-motion: reduce){ .f2y-krolle{transition:none} }

.f2y-dose{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:12px;opacity:0;transition:opacity .9s ease}
.f2y-dose.an{opacity:1}
.d-platz{position:relative;display:block;width:min(38vw,150px)}
.d-bild{display:block;width:100%;height:auto;filter:invert(1) brightness(.985);
  transition:opacity .42s ease}
.d-platz .d-auf{position:absolute;left:0;top:0;opacity:0}
.d-platz .d-auf.da{opacity:1}
.d-bild.weg{opacity:0}

.d-schnitt{position:absolute;left:9%;top:9.5%;width:calc(82% * var(--anteil,0));height:2px;
  background:#e8e8e8;opacity:calc(var(--anteil,0) * .9);pointer-events:none;z-index:3;
  transform:rotate(-1.5deg);transform-origin:left center}

.d-oeffner{position:absolute;left:-6%;top:-2%;width:44px;height:44px;padding:0;margin:0;
  background:none;border:0;cursor:grab;touch-action:none;z-index:4;
  transform:translateX(var(--dx,0px)) rotate(calc(var(--anteil,0) * -8deg));
  transition:transform .18s ease}
.d-oeffner.zieht{transition:none;cursor:grabbing}
.d-oeffner.weg{opacity:0;transition:opacity .42s ease}
.d-kurbel{position:absolute;top:12px;left:50%;width:22px;height:9px;margin-left:-11px;
  border:2px solid #e8e8e8;border-radius:2px;background:var(--buehne,#0e0e10)}
.d-klinge{position:absolute;top:21px;left:50%;width:3px;height:12px;margin-left:-1.5px;
  background:#e8e8e8}

.d-zug{position:absolute;left:-6%;top:-2%;width:44px;height:44px;z-index:5;
  display:flex;align-items:center;justify-content:center;--kl:48px;
  pointer-events:none;transition:opacity .25s}
.d-zug .klecks{animation:klecks-zieht-rechts 2.9s cubic-bezier(.35,0,.3,1) infinite}

@keyframes klecks-zieht-rechts{
  0%{transform:translateX(0);opacity:0}
  16%{transform:translateX(6px);opacity:.9}
  74%{transform:translateX(50px);opacity:.9}
  100%{transform:translateX(66px);opacity:0}}
.d-zug.still{opacity:0}
@media (prefers-reduced-motion: reduce){
  .f2y-dose{transition:none}
  .d-bild{transition:none}
  .d-oeffner{transition:none}
  .d-zug .klecks{animation:none}
}

.wal-zug{position:absolute;left:50%;top:36%;margin-left:calc(var(--kl) / -2);
  z-index:4;--kl:48px;pointer-events:none;transition:opacity .25s}
.wal-zug.still{opacity:0}
.wal-zug .klecks{animation:klecks-zieht-runter 2.9s cubic-bezier(.35,0,.3,1) infinite}
@keyframes klecks-zieht-runter{
  0%{transform:translateY(-26px);opacity:0}
  16%{transform:translateY(-20px);opacity:.9}
  74%{transform:translateY(24px);opacity:.9}
  100%{transform:translateY(40px);opacity:0}}
@media (prefers-reduced-motion: reduce){ .wal-zug .klecks{animation:none} }

.f2y-lampe{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;padding:12px;opacity:0;transition:opacity .9s ease}
.f2y-lampe.an{opacity:1}
.ntl{position:relative;width:min(64vw,260px);
  color:var(--tinte);transition:color .55s ease}

.ntl-bild{display:block;width:100%;height:auto;overflow:visible}

.ntl-koerper{fill:var(--grund)}
.ntl-mundflaeche{fill:var(--akz);fill-opacity:.5;
  transition:fill .55s ease, fill-opacity .55s ease}
.ntl-birne{fill:var(--akz);transition:fill .55s ease}
.ntl-licht{opacity:1;transition:opacity .7s ease}
.ntl-halo{transition:opacity .7s ease}

.ntl.aus{color:#5c6267}
.ntl.aus .ntl-mundflaeche{fill:var(--grund);fill-opacity:1}
.ntl.aus .ntl-birne{fill:var(--grund)}
.ntl.aus .ntl-licht,
.ntl.aus .ntl-halo{opacity:0}

.ntl-schalter,
.ntl-schalterkopf{transform-origin:42.5px 121.8px}
.ntl-schalterkopf.wackelt{animation:ntl-wackelt .74s ease-in-out}
@keyframes ntl-wackelt{
  0%{transform:rotate(0)}
  25%{transform:rotate(-2.6deg)}
  50%{transform:rotate(1.7deg)}
  75%{transform:rotate(-.5deg)}
  100%{transform:rotate(0)}}

.ntl-schalter{transition:transform .13s cubic-bezier(.3,.7,.4,1)}
.ntl.gedrueckt .ntl-schalter{transform:scaleY(.5)}
.ntl.gedrueckt .ntl-schalterkopf{animation:none}

.ntl-griff{position:absolute;left:30.4%;top:86.9%;
  transform:translate(-50%,-50%);
  width:56px;height:56px;padding:0;border:0;border-radius:50%;
  background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ntl-griff:focus-visible{outline:2px solid var(--moewe);outline-offset:2px}
.ntl-griff[disabled]{cursor:default}

@media (prefers-reduced-motion: reduce){
  .f2y-lampe{transition:none}
  .ntl-schalterkopf.wackelt{animation:none}
}

.f2y-kreisel{position:fixed;inset:0;z-index:600;background:#000;
  opacity:0;transition:opacity .8s ease}
.f2y-kreisel.an{opacity:1}
.f2y-kreisel .nk-svg{position:absolute;inset:0;width:100%;height:100%;display:block}

.f2y-kreisel .nk-svg text{font-family:'Patrick Hand',cursive;fill:var(--tinte);
  text-rendering:optimizeSpeed}

.f2y-kreisel .nk-svg text.nk-brief{fill:var(--walblau)}
.f2y-kreisel .nk-svg use{color:rgb(236 233 226 / .82)}

.f2y-kreisel .nk-svg text,
.f2y-kreisel .nk-svg use{transition:opacity .8s ease}

.f2y-kreisel .nk-worte{transition:opacity .55s ease}
.f2y-kreisel.liest .nk-worte{opacity:.42}

.f2y-kreisel .nk-dreh,
.f2y-kreisel .nk-vorn,
.f2y-kreisel .nk-loch{transition:opacity 1.4s ease}
.f2y-kreisel.aus .nk-dreh,
.f2y-kreisel.aus .nk-vorn,
.f2y-kreisel.aus .nk-loch{opacity:0}

.f2y-kreisel .nk-schluss{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:74%;text-align:center;font-family:var(--s-lesen);
  font-size:clamp(17px,4.8vw,21px);line-height:1.45;color:var(--tinte);
  opacity:0;transition:opacity 1.8s ease 1s;pointer-events:none}
.f2y-kreisel.aus .nk-schluss{opacity:1}

@media (prefers-reduced-motion: reduce){
  .f2y-kreisel,
  .f2y-kreisel .nk-worte,
  .f2y-kreisel .nk-svg text,
  .f2y-kreisel .nk-svg use{transition:none}
}

.f2y-nacht{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.6rem}

.nacht-uhr{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.18em;
  font-size:2.4rem;color:#ccc;opacity:0;transition:opacity .9s ease}
.nacht-uhr.da{opacity:1}
@media (prefers-reduced-motion: reduce){ .nacht-uhr{transition:none} }

#buehne .f2y-nacht .bogenhalter{width:100%;flex:0 1 auto;min-height:0}
#buehne .f2y-nacht #walbogen{width:min(190px,56vw);height:min(130px,32vh)}
#buehne .f2y-nacht #walbogen.offen1{width:min(250px,72vw);height:min(210px,36vh)}
#buehne .f2y-nacht #walbogen.offen2{width:min(300px,84vw);height:min(300px,40vh)}
#buehne .f2y-nacht #walbogen.offen3{width:min(340px,90vw);height:min(360px,44vh)}

.f2y-nacht .blackbox{display:flex;align-items:center;justify-content:center;
  border:1px dashed #444;color:#8a8a8a;letter-spacing:.2em;
  font-size:calc(var(--barlow) * .72);font-family:var(--s-regie)}
.f2y-nacht .blackbox.als-svg{border-color:transparent;color:transparent}

.f2y-nacht .bonraetsel{width:min(92vw,340px);align-self:center;max-height:100%;overflow-y:auto}

.slothint{font-size:calc(.74rem * var(--ding));color:var(--tinte)}
.bonstreifen{font-size:calc(.84rem * var(--ding))}

.f2y-nacht .bonslot,
.f2y-nacht .bonstreifen{
  height:max(22px, min(calc(36px * var(--ding)),
             calc((100svh - env(safe-area-inset-top,0px) - 264px) / 10)))}

.f2y-nacht .bonslot .bonstreifen{width:100%}
.bonmeldung{min-height:1.3em;text-align:center;color:var(--regie);
  font-family:var(--s-regie);font-size:calc(var(--barlow) * .82);letter-spacing:.14em}

.nacht-kamera{text-align:center;touch-action:none;cursor:pointer}
.nacht-ritual{display:flex;flex-direction:column;align-items:center}

body.dunkel .fuss{z-index:365}
body.dunkel #knopf{z-index:365}

@media (pointer:coarse){
  body.dunkel .spiel{touch-action:none}
}

.fgzeilen{position:absolute;left:1.15rem;right:1.15rem;z-index:4;

  bottom:calc(var(--knopf-mitte) + 52px + env(safe-area-inset-bottom, 0px));
  display:flex;flex-direction:column;gap:.45rem;pointer-events:none}

.fginnen.mitausloeser .fgzeilen{bottom:calc(10rem + env(safe-area-inset-bottom, 0px))}

@media (max-width:700px){
  #fotogeraet .fginnen > .ausloeserbox{
    flex-direction:column-reverse;
    padding-bottom:calc(var(--knopf-mitte) - 42px + env(safe-area-inset-bottom, 0px))}
}
.fgz{margin:0;font-family:var(--s-lesen);font-size:var(--hanken);line-height:var(--zeile);
  color:var(--tinte);opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s ease}
.fgz.da{opacity:1;transform:none}
.fgz.weg{opacity:0;transition:opacity .25s ease}

.fgz.regie{font-family:var(--s-regie);font-size:var(--barlow);line-height:var(--zeile-barlow);
  color:var(--regie);letter-spacing:.14em}
.fgz.gedanke{color:#bcbcbc;font-style:italic}
.fgz.leise{font-size:calc(var(--hanken) * .82);color:#a8a8a8}
@media (prefers-reduced-motion: reduce){ .fgz{transition:none;transform:none} }

.bonstreifen{font-family:var(--s-lesen)}
.knamenzeile{font-family:var(--s-regie)}
#ov-karte.handy .kd-wort{color:var(--regie)}

#ov-karte.handy .kd-sperre{
  font-family:var(--s-regie); font-size:calc(var(--barlow) * .62); letter-spacing:.14em;
  text-transform:uppercase; color:#6f6f6f; margin-top:-10px; line-height:1.55}

#ov-rad{position:fixed;inset:0;background:var(--grund);z-index:720;
  opacity:0;transition:opacity .5s ease}
#ov-rad.an{opacity:1}
#ov-rad canvas{display:block;width:100%;height:100%}
#ov-rad .rr-klicks{position:absolute;left:0;right:0;top:10px;text-align:center;
  font-family:var(--s-regie);font-size:calc(var(--barlow) * .8);
  letter-spacing:.2em;color:var(--tinte);text-transform:uppercase}
#ov-rad .rr-zeile{position:absolute;left:16px;right:16px;
  bottom:max(12px, env(safe-area-inset-bottom));text-align:center;
  font-family:var(--s-regie);font-size:calc(var(--barlow) * .8);
  letter-spacing:.14em;color:var(--regie);text-transform:uppercase;line-height:1.9}

#ov-rad .rr-zeile.denkt{font-family:var(--s-lesen);
  font-size:calc(var(--hanken) * .8);letter-spacing:0;
  color:var(--tinte);text-transform:none;line-height:1.6}

#ov-rad .rr-zeile .rr-tipp{display:block;font-family:var(--s-regie);
  font-size:calc(var(--barlow) * .8);letter-spacing:.14em;
  color:var(--regie);text-transform:uppercase;line-height:1.9}

#ov-rad .rr-zettel{position:absolute;left:50%;top:50%;width:min(400px,78%);
  transform:translate(-50%,-50%) rotate(-1.6deg);
  background:#f6f1e5;color:#1f1d1a;border-radius:3px;
  box-shadow:0 10px 40px rgb(0 0 0 / .5);
  font-family:var(--s-fine);font-size:calc(1.3rem * var(--ts));line-height:1.5;
  padding:24px 30px;text-align:center;cursor:pointer;
  transition:opacity .45s ease;z-index:4}
#ov-rad .rr-zettel.weg{opacity:0;pointer-events:none}

#ov-rad .rad-dreh{position:absolute;inset:0;display:none;place-items:center;
  background:var(--grund);z-index:5;text-align:center;cursor:pointer}
#ov-rad:not(.liegt) .rad-dreh, #ov-rad.zurueck .rad-dreh{display:grid}
#ov-rad .kd-handy{display:block;width:34px;height:60px;border:2px solid #8a8a8a;
  border-radius:7px;position:relative;margin:0 auto 18px;
  animation:kdHandyDrehen 3.2s ease-in-out infinite}
#ov-rad .kd-handy::after{content:'';position:absolute;left:50%;bottom:5px;
  width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#8a8a8a}
#ov-rad.zurueck .kd-handy{animation-name:kdHandyZurueck}
#ov-rad .kd-wort{font-family:var(--s-regie);font-size:calc(var(--barlow) * .8);
  letter-spacing:.18em;color:var(--regie);text-transform:uppercase;line-height:2}
#ov-rad .kd-sperre,#ov-rad .kd-rechner{font-family:var(--s-regie);
  font-size:calc(var(--barlow) * .62);letter-spacing:.14em;
  text-transform:uppercase;color:#6f6f6f;line-height:1.55}
@media (prefers-reduced-motion: reduce){
  #ov-rad .kd-handy{animation:none;transform:rotate(-90deg)}
  #ov-rad.zurueck .kd-handy{animation:none;transform:rotate(0)}
}

#testleiste{position:fixed;z-index:900;
  top:calc(10px + env(safe-area-inset-top,0px));left:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.14em}
#testleiste button{font:inherit;letter-spacing:inherit;
  background:#0d0d0d;border:1px solid #2a2a2a;border-radius:3px;color:#6a6a6a;
  -webkit-tap-highlight-color:transparent}
#testleiste .testlabel{display:block;padding:9px 13px;line-height:1;
  text-transform:uppercase}
#testleiste .testlabel::after{content:' \25B8'}
#testleiste .tl-liste{display:none}

#testleiste.offen{right:10px;
  max-height:calc(100vh - 20px);
  max-height:calc(100dvh - 20px);
  overflow-y:auto;background:#0a0a0a;border:1px solid #333;border-radius:5px}
#testleiste.offen .testlabel{position:sticky;top:0;z-index:1;
  width:100%;text-align:center;background:#0a0a0a;
  border-color:transparent;border-bottom-color:#262626;border-radius:0;
  padding:11px 13px}
#testleiste.offen .testlabel::after{content:' \25BE'}
#testleiste.offen .tl-liste{display:block;padding:0 8px 8px}
#testleiste .tl-liste button{display:block;width:100%;text-align:left;
  padding:11px 12px;margin-top:6px;line-height:1.2}

#testleiste .tl-schalter{color:#8a8a8a;border-color:#3a3a3a}
#testleiste .tl-trenn{margin-top:12px}

#testleiste .tl-liste button.hier{color:#c8c8c8;border-color:#555}

.zurueckstreifen{
  position:fixed;left:50%;transform:translateX(-50%) translateY(6px);
  bottom:calc(var(--knopf-mitte) + 44px + env(safe-area-inset-bottom,0px));
  z-index:700;pointer-events:none;
  max-width:min(var(--spalte), calc(100vw - 32px));
  padding:9px 16px;border-radius:4px;
  background:rgb(14 14 16 / .92);
  box-shadow:0 2px 14px rgb(0 0 0 / .5);
  font-family:var(--s-regie);font-size:var(--barlow);
  line-height:var(--zeile-barlow);letter-spacing:.04em;
  color:rgb(var(--moewe-rgb) / .82);
  text-align:center;white-space:nowrap;
  opacity:0;
  transition:opacity .22s ease, transform .22s ease;
}
.zurueckstreifen.da{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion: reduce){
  .zurueckstreifen{transition:opacity .01s linear;transform:translateX(-50%)}
  .zurueckstreifen.da{transform:translateX(-50%)}
}

.quinnmoment{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-52%);
  opacity:0;transition:opacity .6s ease}
.quinnmoment.an{opacity:1}
.quinnmoment img{display:block;width:100%;height:auto}

.f2y-spachteln{position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(40px * var(--e));
  opacity:0;transition:opacity .6s ease}
.f2y-spachteln.an{opacity:1}
.f2y-spachteln .duebelreihe{display:flex;gap:calc(10px * var(--e));
  align-items:center;justify-content:center;flex-wrap:wrap;
  max-width:min(92vw, 380px)}
.f2y-spachteln .duebel{appearance:none;background:none;border:0;padding:0;
  width:calc(46px * var(--e));height:calc(46px * var(--e));
  cursor:pointer;position:relative;touch-action:manipulation}
.f2y-spachteln .duebel svg{width:100%;height:100%;display:block}

.f2y-spachteln .duebel .loch{fill:#050505;stroke:#999;stroke-width:1.4}
.f2y-spachteln .duebel .masse{fill:rgb(236 233 226 / .82);stroke:none;
  opacity:0;transform:scale(.55);transform-origin:center;
  transition:opacity .28s ease, transform .34s cubic-bezier(.2,.9,.3,1.15)}
.f2y-spachteln .duebel.voll{cursor:default}
.f2y-spachteln .duebel.voll .masse{opacity:1;transform:scale(1)}
.f2y-spachteln .duebel.voll .loch{opacity:0;transition:opacity .28s ease}

.f2y-spachteln .duebel-tipp{--kl:48px;left:50%;top:-57px;transform:translateX(-50%)}
.f2y-spachteln .bodenhandy{opacity:0;transition:opacity .5s ease;
  cursor:pointer;padding:10px}
.f2y-spachteln .bodenhandy.da{opacity:1}
.f2y-spachteln .bodenhandy svg{display:block}
.f2y-spachteln .bodenhandy.ruft{animation:ruf-atem 3.4s ease-in-out infinite}
.f2y-spachteln .bodenhandy.ruft svg{animation:ruf-stups 4.6s ease-in-out infinite}
.f2y-spachteln .bodenhandy.ruckt svg{animation:handy-ruckt .22s ease 2}
@keyframes handy-ruckt{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media (prefers-reduced-motion: reduce){
  .f2y-spachteln .bodenhandy.ruft,
  .f2y-spachteln .bodenhandy.ruft svg,
  .f2y-spachteln .bodenhandy.ruckt svg{animation:none}
  .f2y-spachteln .duebel .masse{transition:none}
}

.f2y-adapterwahl{position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  gap:calc(18px * var(--e));
  opacity:0;transition:opacity .6s ease}
.f2y-adapterwahl.an{opacity:1}
.f2y-adapterwahl .awahl{appearance:none;background:none;border:0;margin:0;padding:10px;
  cursor:pointer;touch-action:manipulation;
  transform:rotate(var(--dreh, 0deg));
  transition:opacity .4s ease, transform .4s ease}

.f2y-adapterwahl .awahl svg{display:block;width:calc(76px * var(--e));height:auto}
.f2y-adapterwahl .awahl.nicht{opacity:0}
.f2y-adapterwahl .awahl.genommen{transform:rotate(0deg) scale(1.1)}
@media (prefers-reduced-motion: reduce){
  .f2y-adapterwahl .awahl{transition:none}
}

.h-log .systemzeile{text-align:center;color:#8a8a8a;
  font-size:.72rem;letter-spacing:.08em;margin:.85rem 0 .35rem}

.h-blase.mit-shot{padding:6px}
.h-blase.mit-shot .a-weiter{display:block;margin:2px 4px 6px}
.shotblase{appearance:none;background:none;border:0;padding:0;
  display:block;cursor:pointer}
.shothuelle{display:block;position:relative;overflow:hidden;
  border-radius:8px;border:1px solid #2a2a2e;background:#0a0a0c}
.shotgeraet{width:390px;height:844px;background:#0e0e10;
  display:flex;flex-direction:column;transform-origin:top left;
  pointer-events:none}

.shotgeraet .h-blase{font-size:16px}
.shotgeraet .h-ueber{font-size:12px}
.shotgeraet .zeittrenner{font-size:12px}
.shotgeraet .h-log{flex:1;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:9px;padding:0 14px 10px}
.shotgeraet.oben .h-log{justify-content:flex-start;padding-top:10px}
.shotgeraet .h-fuss{flex:0 0 auto}

.shotvoll{position:absolute;inset:0;z-index:40;
  background:rgb(0 0 0 / .92);
  display:flex;align-items:center;justify-content:center}

.shotvoll .shotzu,.fotovoll .shotzu{position:absolute;top:10px;right:12px;z-index:2;
  appearance:none;background:none;border:0;padding:0;margin:0;
  width:44px;height:44px;display:grid;place-items:center;
  color:#c8c8c8;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.shotvoll .shotzu svg,.fotovoll .shotzu svg{width:24px;height:24px;display:block}

.a-foto[data-fotovoll]{cursor:pointer}
.fotovoll{position:absolute;inset:0;z-index:40;
  background:rgb(0 0 0 / .92);
  display:flex;align-items:center;justify-content:center}
.fotovoll img{display:block;max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;filter:grayscale(1)}

.f2y-stick{position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .6s ease}
.f2y-stick.an{opacity:1}

.f2y-stick .stickbuehne{position:relative;
  width:min(92vw, 420px);height:190px}
.f2y-stick .sding{position:absolute;top:50%;transform:translateY(-50%);
  appearance:none;background:none;border:0;margin:0;padding:6px;
  cursor:pointer;touch-action:manipulation}
.f2y-stick .sding svg{display:block}
.f2y-stick .slaptop{left:-6px;z-index:40}

.f2y-stick .sadapter{left:29%;z-index:30}
.f2y-stick .sstick{right:4%;z-index:20}

.f2y-stick .sding.gleitet{transition:transform .45s cubic-bezier(.45,.85,.35,1)}
@media (prefers-reduced-motion: reduce){
  .f2y-stick .sding.gleitet{transition:none}
}

.f2y-explorer{position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;
  opacity:0;transition:opacity .6s ease}
.f2y-explorer.an{opacity:1}
.f2y-explorer .explorer{width:min(92vw, 420px);
  max-height:min(68vh, 560px);min-height:230px;
  display:flex;flex-direction:column;position:relative;
  background:#101013;border:1px solid #26262b;border-radius:10px;
  box-shadow:0 14px 40px rgb(0 0 0 / .5);
  overflow:hidden}
.f2y-explorer .exkopf{flex:0 0 auto;padding:10px 14px;
  font-family:var(--s-regie);font-size:calc(var(--barlow) * .9);
  letter-spacing:.14em;color:#b9b5ac;
  border-bottom:1px solid #1d1d21;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f2y-explorer .exliste{flex:1 1 auto;overflow-y:auto;padding:6px 0}
.f2y-explorer .exfuss{flex:0 0 auto;padding:7px 14px;
  font-family:var(--werkzeug, system-ui);font-size:.78rem;
  letter-spacing:.12em;color:#5c5c60;border-top:1px solid #1d1d21}
.f2y-explorer .exdatei{display:flex;align-items:center;gap:9px;
  padding:10px 14px;cursor:pointer;
  font-family:var(--werkzeug, system-ui);font-size:1.05rem;color:#d6d3cc}
.f2y-explorer .exdatei:hover{background:#16161a}

.f2y-explorer .exicon{flex:0 0 auto;display:block}
.f2y-explorer .exname{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.f2y-explorer .exmeta{flex:0 0 auto;font-size:.78rem;color:#6a6a6e;
  letter-spacing:.03em;text-align:right}

.f2y-explorer .exdatei.seins{box-shadow:inset 2px 0 0 rgb(4 173 191 / .55)}
.f2y-explorer .exdatei.gespielt{color:#8a8a8a}

.f2y-explorer .exdatei.versteckt{color:#8f8f93;font-style:italic}

.f2y-explorer .exdoku{flex:1 1 auto;overflow-y:auto;
  padding:12px 16px 16px}
.f2y-explorer .extitel{font-family:var(--werkzeug, system-ui);
  font-weight:700;font-size:1.15rem;color:#e2dfd8;
  text-align:center;margin:4px 0 12px}
.f2y-explorer .filmzeile{font-family:var(--werkzeug, system-ui);
  font-size:1.05rem;line-height:1.5;color:#cfccc5;margin:0 0 .55rem;
  opacity:0;filter:blur(3px);
  transition:opacity .55s ease, filter .55s ease}
.f2y-explorer .filmzeile.entwickelt{opacity:1;filter:blur(0)}
@media (prefers-reduced-motion: reduce){
  .f2y-explorer .filmzeile{transition:none;opacity:1;filter:none}
}

.f2y-explorer .etiketten{flex:0 0 auto;display:flex;flex-wrap:wrap;
  gap:7px;padding:10px 12px;border-bottom:1px solid #1d1d21;
  transition:opacity .5s ease}
.f2y-explorer .etiketten.weg{opacity:0;pointer-events:none}
.etikett{appearance:none;background:#17171b;border:1px solid #34343a;
  border-radius:7px;padding:7px 12px;cursor:grab;
  font-family:var(--s-regie);font-size:calc(var(--barlow) * .98);
  letter-spacing:.1em;color:#c9c5bc;
  touch-action:none;user-select:none;-webkit-user-select:none}
.etikett.gewaehlt{border-color:#ece9e2;color:#ece9e2;background:#222227}
.etikett.platziert{opacity:.34}

.etikett.gepackt{opacity:.25;border-style:dashed;cursor:grabbing}
.etiGeist{position:fixed;left:0;top:0;z-index:90;pointer-events:none;
  background:#1d1d22;border:1px solid #55555c;border-radius:7px;
  padding:7px 12px;width:max-content;
  font-family:var(--s-regie);font-size:calc(var(--barlow) * .98);
  letter-spacing:.1em;color:#ece9e2;
  box-shadow:0 10px 26px rgb(0 0 0 / .55);
  will-change:transform}

.etiGeist.flug{transition:transform .24s cubic-bezier(.3,1.3,.4,1),
  opacity .22s ease}
.f2y-explorer .zuordliste{padding-bottom:8px}
.zuordZeile{position:relative;display:block;
  padding:9px 16px 9px 20px;cursor:pointer;
  font-family:var(--werkzeug, system-ui);font-size:1.05rem;
  line-height:1.5;color:#cfccc5}
.zuordZeile .ztxt{display:block}
.zuordZeile .etikettMarke{display:block;width:max-content;
  margin:0 0 3px;padding:2px 8px;
  border:1px solid #3c3c42;border-radius:5px;
  font-family:var(--s-regie);font-size:calc(var(--barlow) * .9);
  letter-spacing:.12em;color:#d6d3cc;background:#17171b}
.zuordZeile .etikettMarke.leer{display:none}
.zuordZeile.wahlOffen{background:#16161a}

.zuordZeile.dropZiel{background:rgb(236 233 226 / .08);
  box-shadow:inset 2px 0 0 rgb(236 233 226 / .45)}

.zuordZeile.zoneFest{box-shadow:inset 2px 0 0 rgb(169 181 189 / .5);
  background:rgb(169 181 189 / .05)}
.zuordZeile.zoneKopf{border-top-left-radius:6px;border-top-right-radius:6px}
.zuordZeile.zoneEnde{border-bottom-left-radius:6px;border-bottom-right-radius:6px;
  margin-bottom:5px}

.zuordZeile .etikettMarke.schnappt{transform-origin:left center;
  animation:marke-schnappt .38s cubic-bezier(.2,1.5,.4,1) 1}
@keyframes marke-schnappt{0%{transform:scale(1.28)}100%{transform:scale(1)}}

.zuordZeile.rastet{animation:zone-rastet .55s ease 1}
@keyframes zone-rastet{0%{background:rgb(169 181 189 / .24)}
  100%{background:rgb(169 181 189 / .05)}}

.zuordZeile.prallt{animation:handy-ruckt .22s ease 1}

.zuordZeile.glimm{animation:zeile-glimm .65s ease}
@keyframes zeile-glimm{0%,100%{background:transparent}
  45%{background:rgb(236 233 226 / .14)}}
.etiWahl{display:flex;flex-wrap:wrap;gap:6px;
  padding:7px 16px 10px 20px;background:#16161a}

.zuordZeile.geist{opacity:.42;filter:blur(.4px);
  transition:opacity .9s ease, filter .9s ease}
.zuordZeile.aufgeloest{opacity:0 !important;filter:blur(4px) !important;
  transition:opacity 1.1s ease, filter 1.1s ease}
.zuordliste .etikettMarke.luecke{display:block;width:max-content;
  margin:6px 0 6px 20px;padding:2px 8px;
  border:1px solid #3c3c42;border-radius:5px;
  font-family:var(--s-regie);font-size:calc(var(--barlow) * .92);
  letter-spacing:.14em;color:#ece9e2;background:#1b1b20;
  min-height:1.2em}
@media (prefers-reduced-motion: reduce){
  .zuordZeile.glimm,.zuordZeile.prallt,.zuordZeile.rastet,
  .zuordZeile .etikettMarke.schnappt{animation:none}
  .zuordZeile.geist,.zuordZeile.aufgeloest{transition:none}
  .etiGeist.flug{transition:none}
  .f2y-explorer .etiketten{transition:none}
}

.f2y-explorer .griffreihe{flex:0 0 auto;display:flex;gap:14px;
  align-items:center;justify-content:center}
.kappe{appearance:none;position:relative;
  width:58px;height:58px;border-radius:12px;
  background:#141417;border:1px solid #303036;
  color:#d6d3cc;font-size:1.35rem;line-height:1;cursor:pointer;
  box-shadow:0 3px 0 #0a0a0c;
  transition:transform .12s ease, box-shadow .12s ease,
    border-color .2s ease, background-color .2s ease}
.kappe.pulst{animation:ruf-atem 3.4s ease-in-out infinite}
.kappe.gedrueckt{transform:translateY(2px);box-shadow:0 1px 0 #0a0a0c;
  background:#222227;border-color:#4a4a52}
.kappe.blitzt{border-color:#ece9e2}

.kappe .griff-tipp{--kl:48px;left:50%;top:-51px;transform:translateX(-50%)}
@media (prefers-reduced-motion: reduce){
  .kappe.pulst{animation:none;border-color:#5a5a62}
}

.sysdialog{position:absolute;inset:0;z-index:5;
  background:rgb(0 0 0 / .55);
  display:flex;align-items:center;justify-content:center;padding:18px}
.sysdialog-fenster{width:min(86%, 300px);
  background:#1a1a1e;border:1px solid #33333a;border-radius:10px;
  padding:16px 16px 12px;text-align:center;
  font-family:var(--werkzeug, system-ui)}
.sysdialog-titel{font-weight:700;font-size:.9rem;color:#e2dfd8;
  overflow-wrap:anywhere;margin-bottom:8px}
.sysdialog-text{font-size:.88rem;line-height:1.45;color:#b9b5ac;
  margin-bottom:14px}
.sysdialog-knoepfe{display:flex;gap:8px}
.sysdialog-knoepfe button{flex:1;appearance:none;
  background:#232328;border:1px solid #3a3a42;border-radius:7px;
  padding:8px 4px;color:#d6d3cc;font-size:.88rem;cursor:pointer;
  font-family:inherit}

.f2y-explorer .dokublock{flex:0 1 auto;overflow-y:auto;
  padding:14px 18px 16px;border-top:1px solid #1d1d21}
.f2y-explorer .dokuzeile{font-family:var(--werkzeug, system-ui);
  font-size:.95rem;line-height:1.5;color:#e2dfd8;margin:.5rem 0}
.f2y-explorer .dokuwisch{display:block;height:9px;border-radius:4px;
  background:#232327;margin:0 0 7px}

.f2y-streichen{position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .6s ease}
.f2y-streichen.an{opacity:1}
.f2y-streichen .streichwand{position:relative;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;transition:opacity .45s ease;
  touch-action:none;cursor:pointer}
.f2y-streichen .streichwand.da{opacity:1}
.f2y-streichen .streichwand svg{display:block;height:auto}
.f2y-streichen .streichwand .objektlabel{margin-top:0}
@media (prefers-reduced-motion: reduce){
  .f2y-streichen,.f2y-streichen .streichwand{transition:none}
}

.f2y-status .nzeit.lebt{color:#04adbf}
.f2y-status .nzeit.lebt::before{content:'';display:inline-block;
  width:7px;height:7px;border-radius:50%;background:#04adbf;
  box-shadow:0 0 6px 1px rgba(4,173,191,.55);
  margin-right:.5em;vertical-align:.05em}

.satz .onlineHall{font-style:italic}

#fo-log{padding-bottom:56px}

.h-kopf.app{flex-direction:column;align-items:flex-start;gap:2px}
.h-kopf.app .unter{font-family:var(--werkzeug);font-size:11px;
  color:#8c8c92;line-height:1.3}
.pizzalog{display:flex;flex-direction:column;align-items:center;
  overflow-y:auto}
.pizzalog.mittig{justify-content:center}
.pizzalog .zeittrenner{align-self:center}
.pizzabuehne{display:flex;align-items:center;justify-content:center;
  min-height:176px;padding:10px 0 4px}
.pizzasvg{display:block;transition:width .3s ease, height .3s ease}
.belagreihe{display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center;padding:8px 10px;max-width:100%}
.belag{appearance:none;background:#25252a;border:1px solid #3a3a3a;
  border-radius:9px;padding:8px 10px 6px;min-width:64px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:#75757b;cursor:pointer;font-family:var(--werkzeug);
  transition:color .2s ease, border-color .2s ease}
.belag span{font-size:11px;line-height:1.2}
.belag svg{display:block}
.belag.an{color:#e2e2e6;border-color:#8c8c92}

.pizzafuss{display:flex;align-items:center;justify-content:center;
  padding:10px 14px}
.pizzafuss .bestellknopf{appearance:none;flex:1;max-width:280px;
  background:#25252a;border:1px solid #3a3a3a;border-radius:10px;
  padding:10px 12px;color:#75757b;font-family:var(--werkzeug);
  font-size:14px;cursor:pointer;
  transition:background .25s ease, color .25s ease}

.pizzafuss .bestellknopf:not(:disabled){
  background:rgb(var(--klecks-rgb));border-color:transparent;
  color:var(--tinte-dunkel)}
.pizzafuss .bestellknopf:disabled{cursor:default}

.f2y-oktopus{position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .6s ease}
.f2y-oktopus.an{opacity:1}
.f2y-oktopus .oktoding{display:flex;flex-direction:column;
  align-items:center;gap:10px;padding:14px}
.f2y-oktopus .oktoding svg{display:block;
  width:calc(150px * var(--e, 1));height:auto}
@media (prefers-reduced-motion: reduce){
  .f2y-oktopus{transition:none}
}

#papierlayer{position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none}
#oktobogen{position:relative;pointer-events:auto;
  width:min(190px,56vw);height:min(130px,32vh);
  transition:width .7s ease, height .7s ease;
  cursor:grab;touch-action:none;text-align:center}
#oktobogen:active{cursor:grabbing}
#oktobogen.offen1{width:min(250px,72vw);height:min(210px,36vh)}
#oktobogen.offen2{width:min(300px,84vw);height:min(300px,40vh)}
#oktobogen.offen3{width:min(340px,90vw);height:min(360px,44vh)}
#oktobogen.als-svg{border-color:transparent;color:transparent}

#oktobogen .wal-zug{transform:scale(calc(1 / var(--sk, 1)));
  transform-origin:center}

#weissdeckel{position:fixed;inset:0;z-index:700;background:#fff;
  opacity:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){
  #oktobogen{transition:none}
}

#lakenlayer{position:fixed;inset:0;z-index:0;pointer-events:none}
#lakenlayer svg{position:absolute;inset:0;width:100%;height:100%}
#lakenlayer .falte{fill:none;stroke-linecap:round;
  transition:stroke-width 1.4s ease, opacity 1.4s ease, stroke 1.4s ease, filter 1.4s ease}

#lakenlayer .lichtspalt{position:absolute;top:0;bottom:0;left:60%;width:14%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  opacity:0;transition:opacity 1.4s ease}
#lakenlayer .lichtspalt.da{opacity:1}
body.hotelhell{background:#ececec}
body.hotelhell #buehne, body.hotelhell #fluss, body.hotelhell #fuss{
  position:relative;z-index:2}
body.hotelhell .satz{color:#1a1a1a;text-shadow:none}
body.hotelhell .satz.regie{color:#6a6a6a}

body.hotelhell .wahl{color:#1a1a1a}
body.hotelhell .wahl .w-rand rect{stroke:rgb(0 0 0 / .38)}
body.hotelhell .wahl.gewaehlt{color:var(--tinte-dunkel)}

body.hotelhell #topbar{color:#4a4a4a}
body.hotelhell #topbar button{color:#4a4a4a;border-color:#bbb}

#stroboszene{position:fixed;inset:0;z-index:640;
  background:#050505;overflow:hidden;cursor:pointer;
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}

#strobo-puls{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 42%, #000 100%);
  opacity:.04;animation:stroboPuls 500ms ease-in-out infinite}
@keyframes stroboPuls{0%,100%{opacity:.04}50%{opacity:.09}}

#strobo-blitz{position:absolute;inset:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center}
#strobo-blitz .flaeche{position:absolute;inset:0;background:#f2f2f2;opacity:0}
#strobo-blitz .caption{position:relative;
  font-family:var(--s-regie);font-size:calc(var(--barlow) * 1.4);
  line-height:var(--zeile-barlow);
  letter-spacing:.16em;text-transform:uppercase;color:#0a0a0a;
  text-align:center;padding:0 22px;max-width:90%;opacity:0}

#strobo-zeile{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(var(--spalte), 86%);text-align:center;pointer-events:none}
#strobo-zeile .sz{line-height:var(--zeile);font-size:var(--hanken);
  font-family:var(--s-lesen);
  opacity:0;transition:opacity .15s ease-out}
#strobo-zeile .sz.da{opacity:1}
#strobo-zeile .ich{color:#b2b2b2;font-style:italic}
#strobo-zeile .du{color:#e9e9e9}

#strobo-zeile .strobowahl{display:flex;flex-direction:column;gap:11px;
  align-items:center;margin-top:6px;pointer-events:auto;
  opacity:0;transition:opacity .25s ease}
#strobo-zeile .strobowahl.da{opacity:1}

#strobo-intrusion{position:absolute;inset:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  opacity:0;overflow:hidden}
#strobo-intrusion .frag{transform:rotate(180deg);
  font-family:var(--werkzeug, system-ui);
  color:#d3edf1;background:#062e33;border-radius:16px;
  padding:9px 15px;font-size:calc(15px * var(--ts));
  white-space:nowrap;overflow:hidden}

#strobo-lichter{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#strobo-lichter .slicht{position:absolute;top:-6%;width:38%;height:118%;
  transform:translateX(-50%) rotate(var(--rot,0deg));transform-origin:50% 0;
  background:linear-gradient(to bottom, var(--lf) 0%, transparent 78%);
  clip-path:polygon(43% 0, 57% 0, 100% 100%, 0% 100%);
  mix-blend-mode:screen;
  opacity:0;transition:opacity .09s ease}
#strobo-lichter .slicht.an{opacity:.68}
#stroboszene.reduziert #strobo-lichter .slicht{transition:opacity .35s ease}
#stroboszene.reduziert #strobo-lichter .slicht.an{opacity:.4}

#stroboszene.reduziert #strobo-blitz .flaeche{background:#d8d8d8;
  transition:opacity .3s ease}

#stroboszene.haelt #strobo-puls{animation-play-state:paused}
#stroboszene.haelt #strobo-zeile .sz{filter:brightness(1.18);transition:filter .25s}

#stroboszene.film #strobo-zeile .sz{transition:opacity .25s ease}
#stroboszene.film #strobo-zeile .ich{font-style:normal}

#stroboszene.film .sz.insert{display:block;width:max-content;max-width:100%;
  margin:0 auto;padding:8px 17px;border:1px solid #262626;
  font-family:var(--s-regie);font-size:var(--barlow);
  line-height:var(--zeile-barlow);
  letter-spacing:.22em;text-transform:uppercase;color:#c9c9c9}
#stroboszene.film .jschlag{opacity:0;transition:opacity .2s ease}
#stroboszene.film .jschlag.da{opacity:1}
#stroboszene.film .sz.frage{font-size:calc(var(--hanken) * 1.3);
  font-weight:500;color:#e9e9e9}
#stroboszene.film .sz.frage .fwort{opacity:0;transition:opacity .2s ease}
#stroboszene.film .sz.frage .fwort.da{opacity:1}
#stroboszene.film .sz.frage.atmet{animation:frageAtmen 2s ease-in-out infinite}
@keyframes frageAtmen{0%,100%{opacity:1}50%{opacity:.86}}
#stroboszene.film .kipp.an{font-style:italic}
#stroboszene.film .nachschlag{opacity:0;transition:opacity .25s ease}
#stroboszene.film .nachschlag.da{opacity:1}
#stroboszene.film .streich{position:relative;white-space:nowrap}
#stroboszene.film .streich::after{content:'';position:absolute;left:0;
  top:.58em;height:1px;width:0;background:currentColor}
#stroboszene.film .streich.durch::after{width:100%;transition:width .4s linear}
#stroboszene.film .streich.sofort::after{transition:none}

#stroboszene.film .filmgeraet{display:flex;flex-direction:column;
  align-items:center;gap:9px}
#stroboszene.film .gflip{perspective:600px}
#stroboszene.film .gzeile{font-family:var(--werkzeug, system-ui);
  color:#d3edf1;background:#062e33;border-radius:16px;
  padding:9px 15px;font-size:calc(15px * var(--ts));max-width:100%;
  filter:drop-shadow(0 0 18px rgba(4,173,191,.25));
  transition:transform .6s ease, color .6s, background .6s, filter .6s}
#stroboszene.film .gzeile.geflippt{transform:rotateX(180deg);
  color:#1a1a1a;background:#101010;filter:none}
#stroboszene.film .gzeile.ohnedreh{transition:color .6s, background .6s, filter .6s;transform:none}
#stroboszene.film .gantwort{font-family:var(--werkzeug, system-ui);
  color:#6a6a6a;font-size:calc(13.5px * var(--ts));
  opacity:0;transition:opacity .25s ease}
#stroboszene.film .gantwort.an{opacity:1}
#stroboszene.film .gantwort.getippt{color:#bdbdbd}
#stroboszene.film .gantwort.getippt .gcursor{opacity:1;animation:none}
#stroboszene.film .gantwort .gcursor{display:inline-block;width:1px;
  height:1em;margin-left:2px;vertical-align:-2px;background:#04adbf;opacity:0}
#stroboszene.film .gantwort.an .gcursor{animation:stroboCursor 1.05s steps(1) 2}
@keyframes stroboCursor{0%,50%{opacity:1}50.01%,100%{opacity:0}}
#stroboszene.film .gregie{font-family:var(--s-regie);color:#7c7c7c;
  font-size:calc(var(--barlow) * .85);letter-spacing:.14em;
  text-transform:uppercase;opacity:0;transition:opacity .25s ease}
#stroboszene.film .gregie.an{opacity:1}
#stroboszene.film .gso{font-size:calc(var(--hanken) * .9);color:#9a9a9a;
  opacity:0;transition:opacity .25s ease}
#stroboszene.film .gso.an{opacity:1}

.f2y-zugedeckt{position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;padding:10px 0 0;
  opacity:0;transition:opacity .6s ease}
.f2y-zugedeckt.an{opacity:1}

.f2y-zugedeckt .morgenblock{flex:0 0 auto;max-width:var(--spalte);
  width:calc(100% - 52px);margin:0 0 6px;line-height:1.5;
  font-size:calc(var(--hanken) * .9)}
.gestrichen{position:relative;display:inline-block;max-width:100%;
  margin:0 0 .95em;cursor:pointer;color:var(--tinte)}
.gestrichen .wort{color:var(--tinte)}
.gestrichen .balken{position:absolute;left:-.35em;right:-.35em;
  top:calc(-.22em - var(--zu, 0em));
  height:calc(100% + .44em + var(--zu, 0em) * 2);
  background:#ffffff;border:1px solid #d8d4c8;
  transform:rotate(-.5deg);pointer-events:none;z-index:2;
  transition:height .35s ease, top .35s ease, transform .35s ease}
.gestrichen .drauf{position:absolute;left:.2em;right:.2em;z-index:3;
  display:flex;align-items:center;height:1.5em;
  top:calc(-.1em - var(--zu, 0em));
  font-family:var(--s-fine);font-size:1.05em;color:#2a2a28;
  transform:rotate(-.8deg);opacity:0;pointer-events:none;
  transition:opacity .4s ease}
.gestrichen .drauf.da{opacity:1}
.gestrichen.zittert{animation:morgenzitt .16s linear infinite}
@keyframes morgenzitt{0%{transform:translateX(0)}25%{transform:translateX(-1.2px)}
  75%{transform:translateX(1.2px)}100%{transform:translateX(0)}}

.f2y-zugedeckt .kausstapel{position:relative;flex:1 1 auto;
  width:min(var(--spalte), 94%);min-height:150px}
.kkarte{position:absolute;left:50%;top:14px;box-sizing:border-box;
  width:min(300px, 88%);min-height:96px;
  padding:12px 14px 13px;display:flex;flex-direction:column;gap:7px;
  color:#1a1a1a;border:1px solid #cfcfcf;border-radius:2px;
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,.03) 0 1.5px, transparent 1.5px 5px),
    #e9e9e9;
  box-shadow:0 2px 5px rgba(0,0,0,.4), 0 12px 26px rgba(0,0,0,.35)}
.kkarte::before{content:'';position:absolute;top:0;right:0;
  border-width:0 15px 15px 0;border-style:solid;
  border-color:#c4c4c4 #c4c4c4 transparent transparent;
  filter:drop-shadow(-1px 1px 1px rgba(0,0,0,.45))}
.kkarte .kacheltext{margin:0;color:#1a1a1a;
  font-size:calc(var(--hanken) * .9);line-height:1.45}
.kkarte .stempel{align-self:flex-start;margin-top:auto;
  transform:rotate(-3deg) scale(1.35)}
.kkarte .stempel.knall{transform:rotate(-3deg) scale(1)}

.stempel{position:relative;
  border:2px solid #1a1a1a;color:#1a1a1a;
  padding:3px 8px;text-transform:uppercase;font-weight:600;
  font-family:var(--s-regie);
  font-size:calc(.78rem * var(--ts));letter-spacing:.1em;
  text-shadow:.7px .5px 0 rgba(26,26,26,.28);
  border-radius:2px 5px 3px 6px / 5px 2px 6px 3px;
  transform:rotate(-2deg) scale(1.4);opacity:0}
.stempel::after{content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(ellipse 60% 90% at 72% 78%, rgba(233,233,233,.34), transparent 60%),
    repeating-radial-gradient(ellipse 130% 100% at 28% 18%, transparent 0 3px, rgba(233,233,233,.12) 3px 4px, transparent 4px 7px)}
.stempel.knall{transform:rotate(-2deg) scale(1);opacity:1;
  transition:transform .12s cubic-bezier(.2,1.4,.4,1), opacity .12s}
.stempel.ruhigst{transform:rotate(-2deg) scale(1)}

.f2y-zugedeckt .szeneVerblasst{opacity:0;transition:opacity 1.2s ease;
  pointer-events:none}

.stempelspalte{display:flex;flex-direction:column;gap:6px;
  align-items:center;margin:8px 0 4px;padding:3px 0}
.stempel.inspalte{position:static;margin:0;background:#e9e9e9;
  align-self:center;
  box-shadow:0 2px 9px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.65);
  transition:none}

.f2y-zugedeckt .kippsatz{position:relative;flex:0 0 auto;
  text-align:center;font-size:var(--hanken);color:#c8c8c8;
  font-style:italic;margin:14px auto 10px;max-width:var(--spalte)}
.stempel.aufzeile{position:absolute;left:50%;top:-1.25em;margin:0;
  background:#e9e9e9;white-space:nowrap;
  box-shadow:0 2px 9px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.65);
  transform:translateX(-50%) rotate(-2deg) scale(1.4)}
.stempel.aufzeile.knall{transform:translateX(-50%) rotate(-2deg) scale(1)}
.stempel.aufzeile.ruhigst{transform:translateX(-50%) rotate(-2deg) scale(1)}

.f2y-zugedeckt .kachelpaar{display:flex;gap:12px;justify-content:center;
  align-items:stretch;margin:6px auto;width:min(var(--spalte), 92%);
  transform-origin:center;
  transition:transform .6s ease-in-out, opacity .6s ease-in-out}
.f2y-zugedeckt .kachel{flex:1 1 0;min-height:84px;box-sizing:border-box;
  position:relative;border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  --rot:0deg;
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,.03) 0 1.5px, transparent 1.5px 5px),
    #e9e9e9;
  border:1px solid #cfcfcf;
  box-shadow:0 2px 5px rgba(0,0,0,.3), 0 10px 22px rgba(0,0,0,.25);
  transform:rotate(var(--rot));transition:transform .28s ease-out}
.f2y-zugedeckt .kachel::before{content:'';position:absolute;top:0;right:0;
  border-width:0 14px 14px 0;border-style:solid;
  border-color:#c4c4c4 #c4c4c4 transparent transparent;
  filter:drop-shadow(-1px 1px 1px rgba(0,0,0,.3))}
.f2y-zugedeckt .kachel.links{--rot:-1.3deg}
.f2y-zugedeckt .kachel.rechts{--rot:1.1deg}
.f2y-zugedeckt .kachel.lockt{animation:finlockt 2.6s ease-in-out infinite}
.f2y-zugedeckt .kachel.rechts.lockt{animation-duration:3.1s;animation-delay:.5s}
@keyframes finlockt{
  0%,100%{transform:rotate(var(--rot))}
  25%{transform:rotate(calc(var(--rot) - 1.5deg)) translateY(-1.5px)}
  50%{transform:rotate(calc(var(--rot) + .4deg))}
  75%{transform:rotate(calc(var(--rot) - .9deg)) translateY(-1px)}}
.f2y-zugedeckt .kachel.kzerr{animation:finzerr .28s cubic-bezier(.34,.8,.42,1)}
@keyframes finzerr{
  0%{transform:rotate(var(--rot))}
  28%{transform:rotate(var(--rot)) translateY(-6px) scale(1.03)}
  48%{transform:rotate(var(--rot)) translateY(-6px) scale(1.03)}
  72%{transform:rotate(calc(var(--rot) - 1.4deg)) translateY(3px)}
  100%{transform:rotate(var(--rot))}}
.f2y-zugedeckt .fintext{color:#4a4a4a;font-size:calc(var(--hanken) * .9);
  letter-spacing:.02em;padding:8px}
.f2y-zugedeckt .finbst{display:inline-block;
  transition:transform 3s ease-in, opacity 3s ease-in}
.f2y-zugedeckt .finbst.rieselt{transform:translateY(130px);opacity:0}
.f2y-zugedeckt .kachelpaar.zerfall .kachel{filter:blur(7px);opacity:0;
  transition:filter 1.5s ease-in, opacity 1.5s ease-in}
@media (prefers-reduced-motion: reduce){
  .f2y-zugedeckt,.gestrichen .balken,.gestrichen .drauf{transition:none}
  .gestrichen.zittert,.f2y-zugedeckt .kachel.lockt,
  .f2y-zugedeckt .kachel.kzerr{animation:none}
  #strobo-puls,#stroboszene.film .sz.frage.atmet{animation:none}
}

.satz .vwort{transition:opacity .5s ease}
.satz .vwort.vweg{opacity:0}
.satz .vwort.vdunkel{color:#7c7a74;transition:color 1.2s ease}

.f2y-banner{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top, 0px));
  z-index:700;width:min(360px, calc(100vw - 24px));
  transform:translate(-50%, -130%);opacity:0;
  background:#161619;border-radius:14px;padding:9px 14px 10px;
  box-shadow:0 10px 26px rgba(0,0,0,.55), 0 2px 5px rgba(0,0,0,.3);
  font-family:var(--werkzeug);
  transition:transform .45s cubic-bezier(.25,.8,.3,1), opacity .45s ease;
  pointer-events:none}
.f2y-banner.da{transform:translate(-50%, 0);opacity:1}
.f2y-banner .fb-wer{font-size:10.5px;letter-spacing:.04em;color:#9a9aa0;
  margin-bottom:2px}
.f2y-banner .fb-wer:empty{display:none}
.f2y-banner .fb-text{font-size:13px;line-height:1.4;color:#e2e2e6}

.f2y-quinnstelle{display:flex;justify-content:center;padding:26px 0 10px;
  opacity:0;transition:opacity .6s ease}
.f2y-quinnstelle.an{opacity:1}
.f2y-quinnstelle img{display:block;width:min(150px, 40vw);height:auto}

.f2y-herzchen{display:flex;justify-content:center;padding:14px 0 8px;
  opacity:0;transition:opacity .6s ease}
.f2y-herzchen.an{opacity:1}
#herzbogen{position:relative;width:min(340px, 90vw);height:min(360px, 44vh)}
.bogenherz{position:absolute;left:7%;top:6%;width:22px;height:20px;
  z-index:3;cursor:default;opacity:0;transition:opacity .8s ease}
.bogenherz svg{display:block;width:100%;height:100%;overflow:visible}
.bogenherz svg path{fill:none;stroke:#8f8f8f;stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:fill 1.2s ease, stroke 1.2s ease}
.bogenherz.entwickelt{opacity:1;animation:herz-pocht 2.4s ease-in-out infinite}
@keyframes herz-pocht{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.bogenherz.gefuellt svg path{fill:var(--walblau);stroke:var(--walblau)}

.f2y-transporter{opacity:0;transition:opacity .5s ease}
.f2y-transporter.an{opacity:1}
#ov-pack{position:fixed;inset:0;z-index:520;background:var(--grund);
  opacity:0;transition:opacity .35s ease;overflow:hidden auto}
#ov-pack.aktiv{opacity:1}
.packbuehne{position:relative;width:100%}
#ov-pack .packbuehne{height:100%}

.packbuehne.handy .pack-dreh{position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:var(--grund);text-align:center;padding:0 30px}
.packbuehne.handy.liegt .pack-dreh{display:none}
.packbuehne.handy.zurueck.liegt .pack-dreh{display:flex;background:none;
  position:absolute;inset:auto 12px 8px auto;flex-direction:row;gap:8px;
  z-index:8}
.pack-dreh .kd-handy{display:block;width:34px;height:60px;border:2px solid #8a8a8a;
  border-radius:7px;position:relative}
.pack-dreh .kd-handy::after{content:'';position:absolute;left:50%;bottom:5px;
  width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#8a8a8a}
.pack-dreh .kd-wort{font-family:var(--s-regie);font-size:calc(var(--barlow) * .8);
  letter-spacing:.14em;text-transform:uppercase;color:var(--regie)}
.pack-dreh .kd-rechner{font-family:var(--s-regie);font-size:calc(var(--barlow) * .62);
  letter-spacing:.14em;text-transform:uppercase;color:#6f6f6f;line-height:1.55}
.packbuehne.handy .pack-feld{display:none}
.packbuehne.handy.liegt .pack-feld{display:flex}

.pack-feld{position:relative;display:flex;flex-direction:column;padding:8px 0 4px}
#ov-pack .pack-feld{height:100%;box-sizing:border-box;
  padding:8px 10px calc(4px + env(safe-area-inset-bottom, 0px))}

#laderaum{position:relative;margin:6px auto 22px;
  border:1px solid rgb(255 255 255 / .14);border-top-color:rgb(255 255 255 / .08);
  background:rgb(255 255 255 / .02)}
#ov-pack .liegt #laderaum{margin:4px auto auto}
#laderaum .lreifen{position:absolute;left:12%;right:12%;bottom:-16px;
  display:flex;justify-content:space-between;pointer-events:none}
#laderaum .lreifen span{width:26px;height:26px;border-radius:50%;
  border:1.4px solid #5f5f5f;background:var(--buehne);
  box-shadow:inset 0 0 0 4px rgb(255 255 255 / .05)}
#laderaum.traegt{border-color:rgb(255 255 255 / .22)}
#laderaum.lruettelt{animation:lruettel .12s linear infinite}
@keyframes lruettel{0%{transform:translateX(0)}25%{transform:translateX(-2px)}
  75%{transform:translateX(2px)}100%{transform:translateX(0)}}
#laderaum.lnein{animation:lnein .26s ease}
@keyframes lnein{0%,100%{transform:translateX(0)}30%{transform:translateX(-3px)}
  60%{transform:translateX(3px)}}

.rueckwand{position:absolute;inset:0;transform-origin:center bottom;
  opacity:.3;pointer-events:none}
.rwkiste{position:absolute;box-sizing:border-box;
  border:1px solid rgb(255 255 255 / .1);background:var(--buehne)}
.rwkiste .band{position:absolute;background:rgb(255 255 255 / .05)}
.rwkiste .band.quer{left:0;right:0;top:44%;height:12%}
.rwkiste .band.hoch{top:0;bottom:0;left:44%;width:12%}
.rwkiste .naht{position:absolute;background:rgb(255 255 255 / .07)}
.rwkiste .naht.hoch{top:0;bottom:0;left:50%;width:1px}
.rwkiste .naht.quer{left:0;right:0;top:50%;height:1px}

.lschicht{position:absolute;inset:0}
.lteil,.lteilplatz{position:relative}
.lteil{cursor:pointer;touch-action:none}
.lteil.zurueck{animation:lzurueck .9s ease}
@keyframes lzurueck{0%{opacity:.2}40%{opacity:1}100%{opacity:1}}
.lteil.nein{animation:lnein .26s ease}
.lteil.nichtweg{opacity:.35}
.lteilplatz{position:absolute}
.lteilplatz.einrasten{animation:leinrast .22s cubic-bezier(.2,1.3,.4,1)}
@keyframes leinrast{0%{transform:scale(1.06)}100%{transform:scale(1)}}
.lteilplatz.faellt{animation:lfaellt .5s ease-in forwards}
@keyframes lfaellt{to{transform:translateY(26px);opacity:0}}
.lzelle{position:absolute;box-sizing:border-box;background:var(--buehne);
  border:1px solid rgb(255 255 255 / .16)}
.geformt .lbild{position:absolute;inset:0;display:flex;
  align-items:flex-end;justify-content:center;pointer-events:none}
.geformt .lbild svg{width:100%;height:100%;display:block}
.geformt .lbild .drehrahmen{position:absolute;left:50%;top:50%}
.geformt .lbild .drehrahmen svg{width:100%;height:100%}
.geformt.mitbild .lzelle{border-color:rgb(255 255 255 / .05);background:none}

.lbl{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;pointer-events:none;
  font-family:var(--s-fine);line-height:1.15;letter-spacing:.04em;
  color:rgb(236 233 226 / .78)}
.aufgehoben{filter:brightness(1.18);pointer-events:none}

#ldrehknopf{position:absolute;z-index:7;
  left:calc((100% - var(--wagen, 440px)) / 4);top:42%;
  transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;

  background:rgb(var(--klecks-rgb));color:var(--tinte-dunkel);
  display:flex;align-items:center;justify-content:center;
  font-size:27px;line-height:1;
  box-shadow:0 1px 8px rgb(0 0 0 / .45);
  opacity:0;pointer-events:none;transition:opacity .2s ease}
#ldrehknopf::after{content:'';position:absolute;inset:-12px;border-radius:50%}
#laderaum.traegt ~ #ldrehknopf{opacity:1;pointer-events:auto}

#lgriff{font-family:var(--s-regie);font-size:calc(var(--barlow) * .85);
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-dunkel);
  background:var(--tinte);border-radius:4px;padding:2px 10px;
  box-shadow:0 2px 7px rgb(0 0 0 / .4);
  opacity:0;transition:opacity .3s ease}
#lgriff.da{opacity:1}

.lteil.zurwahl{filter:brightness(1.4)}

.lgeist{position:absolute;pointer-events:none;z-index:3}
.lgeist span{position:absolute;box-sizing:border-box;
  background:rgb(var(--moewe-rgb) / .14)}
.lspalte{position:absolute;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom, rgb(var(--moewe-rgb) / 0), rgb(var(--moewe-rgb) / .07))}

.pack-zeile{position:absolute;left:50%;top:6px;transform:translateX(-50%);
  width:min(94%, 36em);display:flex;flex-direction:column;align-items:center;
  gap:6px;z-index:5;pointer-events:none;text-align:center}
#lhinweis{font-family:var(--s-regie);font-size:var(--barlow);line-height:var(--zeile-barlow);
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-dunkel);
  background:var(--tinte);border-radius:4px;padding:3px 10px;
  box-shadow:0 2px 7px rgb(0 0 0 / .4)}
#lhinweis:empty{display:none}
#lstimme{font-size:var(--hanken);line-height:var(--zeile);color:var(--tinte);
  background:rgb(14 14 16 / .84);border-radius:7px;padding:2px 10px;
  opacity:0;transition:opacity .4s ease}
#lstimme.da{opacity:1}

.pack-knoepfe{position:absolute;z-index:5;right:8px;top:6px;
  bottom:calc(var(--gehweg, 72px) + 26px);
  width:calc((100% - var(--wagen, 440px)) / 2 - 18px);min-width:84px;
  display:flex;flex-direction:column;gap:8px;justify-content:center;
  align-items:stretch;pointer-events:none}
.pack-knoepfe .pk-kasten{display:none;pointer-events:auto}
.pack-knoepfe .pk-kasten.an{display:block}

#lanleitung{position:absolute;z-index:9;left:50%;top:50%;
  width:min(30em, 88%);box-sizing:border-box;padding:16px 18px 12px;
  background:var(--tinte);
  transform:translate(-50%,-50%) rotate(-1.2deg);
  box-shadow:0 10px 30px rgb(0 0 0 / .55), 0 2px 6px rgb(0 0 0 / .35);
  transition:transform .38s ease, opacity .3s ease}
.packbuehne:not(.anleitung) #lanleitung{opacity:0;pointer-events:none;
  transform:translate(-110%, 62%) scale(.1) rotate(-4deg)}
.la-text{font-family:var(--s-regie);font-size:var(--barlow);line-height:var(--zeile-barlow);
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-dunkel)}
.la-weiter{margin-top:10px;text-align:right;font-family:var(--s-regie);
  font-size:calc(var(--barlow) * .82);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinte-dunkel);opacity:.6}

#lzettel{position:absolute;left:10px;bottom:calc(6px + env(safe-area-inset-bottom, 0px));
  z-index:8;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:4px 7px;color:var(--regie);opacity:.85;transition:opacity .25s ease}
#lzettel svg{width:30px;height:33px;transform:rotate(-4deg)}
#lzettel .lz-wort{font-family:var(--s-regie);font-size:calc(var(--barlow) * .68);
  letter-spacing:.14em;text-transform:uppercase}
#laderaum.traegt ~ #lzettel{opacity:0;pointer-events:none}
.packbuehne.anleitung #lzettel{opacity:0;pointer-events:none}

#gehweg{position:relative;flex:none;height:var(--gehweg, 72px);
  display:flex;align-items:flex-end;gap:12px;
  padding:6px 14px 8px 92px;box-sizing:content-box;
  overflow:auto hidden;scrollbar-width:thin;touch-action:pan-x;
  border-top:1px solid rgb(255 255 255 / .18)}
#lpool{display:flex;align-items:flex-end;gap:12px;flex:none}
#gehweg .lteil{position:relative;flex:none}
#gehweg .lteil::after{content:'';position:absolute;inset:-8px calc(-1 * var(--griff, 8px))}
#lpool.entscheidung .lteil{outline:none}

#strasse{display:none;position:relative;flex:none;align-items:flex-end;gap:12px;
  padding:14px 14px 0 2px;margin-right:2px;
  border-right:1px dashed rgb(255 255 255 / .25)}
#strasse.bewohnt{display:flex}
#strasse .strasse-wort{position:absolute;left:2px;top:0;white-space:nowrap;
  font-family:var(--s-regie);font-size:calc(var(--barlow) * .68);
  letter-spacing:.14em;text-transform:uppercase;color:var(--regie);opacity:.6}
#strasse .strasse-reihe{display:flex;gap:12px;align-items:flex-end}
.abgestellt{display:flex;flex-direction:column;align-items:center;gap:2px;
  opacity:0;transition:opacity .5s ease, filter .4s ease}
.abgestellt.da{opacity:.8}
.abgestellt.gesehen{opacity:1;filter:brightness(1.2)}
.abgestellt .abgestellt-bild{position:relative}
.abgestellt .lteilplatz{position:relative;left:0;top:0}
.abgestellt .beschriftung{font-family:var(--s-fine);font-size:calc(var(--patrick) * .8);
  color:rgb(236 233 226 / .6)}

.f2y-wieczorek{position:relative}
.wie-ding{display:flex;justify-content:center;padding:14px 0 4px;
  opacity:0;transition:opacity .5s ease}
.wie-ding.an{opacity:1}
.wie-ding .blackbox{position:relative}
.wie-ding .tipp-hier{left:50%;top:38%;margin-left:calc(var(--kl) / -2)}
.wie-tippding .blackbox{cursor:pointer}

.wie-zettel{background:#e9e6df;color:#26241f;border-radius:2px;
  padding:12px 18px;max-width:250px;transform:rotate(-3deg);
  font-family:var(--s-lesen);font-size:calc(var(--hanken) * .88);line-height:1.45;
  box-shadow:0 10px 26px rgba(0,0,0,.55), 0 2px 5px rgba(0,0,0,.3)}
.wie-hand .blackbox{min-width:170px;min-height:64px;cursor:pointer;
  touch-action:none;display:flex;align-items:center;justify-content:center}
.wie-flur .blackbox{width:min(100%, 30rem)}
.wie-flur svg{width:100%;height:auto;display:block}

.namensbalken{display:inline-block;width:5.2em;height:.82em;
  vertical-align:-.06em;background:var(--tinte);border-radius:2px;
  cursor:pointer}
.namensbalken.ruckelt{animation:nbruckel .3s ease}
@keyframes nbruckel{0%,100%{transform:translateX(0) rotate(0)}
  30%{transform:translateX(-2px) rotate(-1deg)}
  65%{transform:translateX(2px) rotate(.8deg)}}

.f2y-schluessel{display:flex;flex-direction:column;align-items:center;
  gap:16px;padding:14px 0 6px;opacity:0;transition:opacity .5s ease}
.f2y-schluessel.an{opacity:1}
.f2y-schluessel .blackbox{position:relative;cursor:pointer}

.es-ruft{animation:ruf-atem 3.4s ease-in-out infinite}
.es-ruft svg{animation:ruf-stups 4.6s ease-in-out infinite}

.f2y-umschlag{position:relative;width:min(300px, 78vw);box-sizing:border-box;
  aspect-ratio:1.62;background:#e9e6df;border-radius:2px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-align:center;
  box-shadow:0 12px 26px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
  opacity:0;transition:opacity .5s ease, transform .45s ease, max-height .45s ease}
.f2y-umschlag.an{opacity:1}
.f2y-umschlag .bu-schrift{font-family:var(--s-hand);font-weight:600;
  font-size:var(--caveat-hand);line-height:1.2;color:#26241f;
  transform:rotate(-1.2deg)}
.f2y-umschlag .bu-klein{opacity:.72}
.f2y-umschlag .bu-falz{position:absolute;left:6%;right:6%;top:50%;height:1px;
  background:#c9c3b5;opacity:0;transition:opacity .4s ease}
.f2y-umschlag.bu-gross{transform:scale(1.12)}
.f2y-umschlag.bu-geknickt .bu-falz{opacity:1}
.f2y-umschlag.bu-gefaltet{transform:scaleY(.5) translateY(50%);
  overflow:hidden}
.f2y-umschlag.bu-gefaltet .bu-schrift{opacity:.4;transition:opacity .3s}
.f2y-umschlag.bu-fort{opacity:0;transform:scaleY(.5) translateY(160%)}

.f2y-ableger{display:flex;justify-content:center;padding:14px 0 4px;
  opacity:0;transition:opacity .5s ease}
.f2y-ableger.an{opacity:1}

@media (prefers-reduced-motion: reduce){
  .satz .vwort,.f2y-banner,.bogenherz,.f2y-quinnstelle,.f2y-herzchen,
  .wie-ding,.f2y-schluessel,.f2y-umschlag,.f2y-ableger,
  .f2y-transporter,.abgestellt,#lanleitung,#lzettel,#ldrehknopf,#lgriff{transition:none}
  .bogenherz.entwickelt,.es-ruft,.es-ruft svg,.namensbalken.ruckelt,
  #laderaum.lruettelt,.lteilplatz.einrasten,.lteil.zurueck{animation:none}
}

.satz.sinkt{transform:translateY(11px);letter-spacing:-.012em;opacity:.55;
  transition:transform 3.5s ease, letter-spacing 3.5s ease, opacity 3.5s ease}

.satz.sinkt.weg{transition:opacity var(--takt-zeile-weg, .45s) ease}

.f2y-klingelschild{opacity:0;transition:opacity .5s ease}
.f2y-klingelschild.an{opacity:1}
.bkwand{display:grid;grid-template-columns:repeat(3, 1fr);gap:10px 12px;
  max-width:min(var(--spalte), 94%);margin:16px auto 6px;
  padding:14px 12px;border:1px solid rgb(255 255 255 / .1)}
@media (max-width: 359px){ .bkwand{grid-template-columns:repeat(2, 1fr)} }
.briefkasten{position:relative;cursor:pointer}
.briefkasten .bkbild{display:block;width:100%;height:auto}
.bkschild{position:absolute;left:14%;right:14%;top:38%;height:30%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:#e9e6df;border-radius:1px;color:#26241f;
  box-shadow:0 1px 2px rgba(0,0,0,.4)}
.bkschild.leer{background:#fbf7ee}
.bkschild .bkschwarz{display:block;height:52%;background:#26241f;
  border-radius:1px;opacity:.92}

.bkschild.aufgedeckt{font-family:var(--s-regie);
  font-size:calc(var(--barlow) * .62);letter-spacing:.08em;
  text-transform:uppercase}

.bkschild.dymo{background:#26241f;color:#e9e6df;
  font-family:var(--s-regie);font-size:calc(var(--barlow) * .62);
  letter-spacing:.12em;text-transform:uppercase}

.bkschild.eingabe{overflow:visible;background:#fbf7ee}
.bkschild.eingabe .bkform{position:absolute;left:-8%;right:-8%;top:-4px;
  display:flex;flex-direction:column;gap:6px;z-index:4}
.bkschild.eingabe input{box-sizing:border-box;width:100%;
  background:#fbf7ee;color:#1f1d1a;border:0;border-radius:1px;
  padding:5px 8px;font-family:var(--s-fine);font-size:var(--patrick);
  line-height:1.45;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.bkschild.eingabe input::placeholder{color:#1f1d1a;opacity:.5}
.bkschild.eingabe .bkform .wahl{align-self:center;
  font-size:calc(var(--barlow) * .8);font-family:var(--s-regie);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.4;
  color:var(--tinte)}
.bkschild.beschriftet{font-family:var(--s-fine);font-size:var(--patrick);
  line-height:1.1;transform:rotate(-.8deg)}

.bk-tipp{left:50%;top:52%;margin-left:calc(var(--kl) / -2);margin-top:calc(var(--kl) / -2)}

.bktuer-sticker{position:absolute;left:56%;top:66%;width:26%;
  transform:rotate(var(--stickerdreh, 0deg));
  opacity:0;transition:opacity .5s ease;pointer-events:none}
.bktuer-sticker.drauf{opacity:1}
.bktuer-sticker svg{display:block;width:100%;height:auto}

.st-reihe{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;
  padding:12px 0 4px;opacity:0;transition:opacity .5s ease}
.st-reihe.an{opacity:1}
.st-reihe .blackbox{width:120px;height:104px}

.f2y-freilassen{position:relative;max-width:min(400px, 94%);
  margin:10px auto;opacity:0;transition:opacity .9s ease}
.f2y-freilassen.an{opacity:1}

.tr-rostock{position:absolute;left:50%;top:26%;
  transform:translateX(-50%) rotate(-2deg);
  font-family:var(--s-fine);font-size:var(--patrick);line-height:1.1;
  color:var(--tinte);opacity:0;transition:opacity 1.4s ease;
  pointer-events:none;white-space:nowrap}
.tr-rostock.da{opacity:.92}

.tr-fly.tr-frei{animation:tr-freilassen 2.6s ease-out forwards}
@keyframes tr-freilassen{
  0%{transform:translateY(0);opacity:1}
  70%{opacity:.85}
  100%{transform:translateY(calc(-1 * var(--freiweg, 64px)));opacity:0}}

@media (prefers-reduced-motion: reduce){
  .satz.sinkt{transition:none}
  .f2y-klingelschild,.st-reihe,.bktuer-sticker,.f2y-freilassen,
  .tr-rostock{transition:none}
  .tr-fly.tr-frei{animation:none;opacity:0}
}

.f2y-ticket{display:flex;flex-direction:column;align-items:center;
  padding:14px 0 6px;opacity:0;transition:opacity .5s ease}
.f2y-ticket.an{opacity:1}
.tk-kiste{position:relative;cursor:pointer;transition:transform .6s ease}
.tk-kiste.tk-zoom{transform:scale(1.15)}
.tk-kiste .tipp-hier{left:50%;top:44%;margin-left:calc(var(--kl) / -2)}
.tk-kopf{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 16px 8px;font-family:var(--werkzeug);
  font-size:14px;font-weight:600;color:#e2e2e6}
.tk-gknopf{font-family:var(--werkzeug);font-size:11.5px;color:#9a9aa0;
  padding:6px 10px;border:1px solid #3a3a3a;border-radius:13px}
.wtabs{display:flex;gap:8px;padding:0 16px 8px}
.wtabs button{flex:1;padding:7px 0;font-family:var(--werkzeug);
  font-size:12px;letter-spacing:.08em;color:#9a9aa0;
  border:1px solid #3a3a3a;border-radius:9px}
.wtabs button.an{color:#e2e2e6;background:#25252a;border-color:#25252a}
.wtabs.tk-ein,.tk-karte.tk-ein,.tk-angebot.tk-ein{animation:tkEin .2s ease}
@keyframes tkEin{from{opacity:0}to{opacity:1}}
.tk-inhalt{flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:6px 16px 10px;font-family:var(--werkzeug);color:#e2e2e6}
.tk-suchfeld{display:flex;align-items:center;gap:7px;
  background:var(--grund);border-radius:15px;padding:8px 13px;
  font-size:13px;color:var(--tinte)}
.tk-lupe{color:#75757b}
.tk-caret{display:inline-block;width:1.5px;height:1.05em;
  background:var(--tinte);opacity:.8;animation:w-blinkt 1.1s steps(1,end) infinite}
@keyframes w-blinkt{0%,49%{opacity:.8}50%,100%{opacity:0}}
.tk-karte{margin-top:12px;background:#25252a;border-radius:11px;
  padding:11px 14px;font-size:13px;line-height:1.45}
.tk-titel{letter-spacing:.04em}
.tk-sub{color:#8c8c92;font-size:11.5px}
.wro-tag{margin:4px 0 8px;font-size:10.5px;letter-spacing:.14em;
  color:#75757b}
.wro-zeile{padding:8px 2px;border-bottom:1px solid rgb(255 255 255 / .06);
  font-size:13px;letter-spacing:.05em;display:flex;flex-direction:column;gap:2px}
.wro-zeile.tk-fest{background:#25252a}
.tk-angebot{margin-top:12px;background:#25252a;border-radius:11px;
  padding:13px 14px;font-size:13px;line-height:1.5;text-align:center}
.tk-preis{display:inline-block;margin:6px 0;font-size:19px}
.tk-korbknopf,.tk-weiter button,.tk-kasse button{margin-top:8px;
  padding:9px 16px;border-radius:9px;background:#2b2b31;color:#e2e2e6;
  font-family:var(--werkzeug);font-size:13px}
.tk-korbknopf:disabled{opacity:.4}
.tk-weiter{text-align:center;padding-top:8px}
.tk-kasse{margin-top:14px;display:flex;flex-direction:column;gap:9px;
  text-align:center}
.tk-posten{display:flex;justify-content:space-between;
  background:#25252a;border-radius:9px;padding:9px 13px;font-size:13px}
.tk-label{color:#8c8c92;letter-spacing:.08em}
.tk-statuszeile{min-height:52px;display:flex;flex-direction:column;
  gap:8px;align-items:center}
.tk-status{font-size:13px;letter-spacing:.1em;color:#e2e2e6}
.tk-storno{padding:7px 13px;border:1px solid #3a3a3a;border-radius:9px;
  color:#9a9aa0;font-family:var(--werkzeug);font-size:12px;
  font-variant-numeric:tabular-nums}
.tk-fertig{margin-top:16px;display:flex;flex-direction:column;
  align-items:center;gap:12px;text-align:center}
.tk-danke{font-size:13.5px}
.tk-denk{flex:0 0 auto;min-height:40px;padding:8px 18px 12px;
  font-family:var(--s-lesen);font-size:var(--hanken);
  line-height:var(--zeile);color:rgb(236 233 226 / .8);text-align:center;
  font-style:italic}

.f2y-warten{position:absolute;inset:0;display:grid;
  place-content:center;place-items:center;
  opacity:0;transition:opacity .5s ease}
.f2y-warten.an{opacity:1}
.wt-tag{grid-area:1/1;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:8px 0 4px;opacity:0;transition:opacity .6s ease}
.wt-tag.an{opacity:1}

.f2y-warten .f2y-quinnstelle img{width:min(172px, 46vw)}
.wt-titel{font-family:var(--s-regie);font-size:var(--barlow);
  line-height:var(--zeile-barlow);letter-spacing:.14em;
  text-transform:uppercase;color:var(--regie)}
.wt-ding{position:relative;cursor:pointer}
.wt-ding .tipp-hier{left:50%;top:42%;margin-left:calc(var(--kl) / -2)}
.wt-wasser{position:absolute;left:50%;top:-4px;transform:translateX(-50%)}
.wt-zelt svg{display:block}
.wwetter{display:flex;flex-direction:column;align-items:center;gap:4px;
  margin-top:16px;font-size:12px;letter-spacing:.1em;color:#8c8c92}
.wwetter .grad{font-size:30px;color:#e2e2e6;letter-spacing:0}
.wwetter .lage{font-size:12px;color:#c2c2c8;letter-spacing:.04em}
.tk-inhalt .tk-gknopf{display:block;margin:16px auto 0}
.wspinner{width:22px;height:22px;margin:26px auto 0;border-radius:50%;
  border:2px solid #3a3a3a;border-top-color:#c2c2c8;
  animation:wdreht .8s linear infinite}
@keyframes wdreht{to{transform:rotate(360deg)}}

.f2y-nordholz{display:flex;flex-direction:column;align-items:center;
  gap:10px;padding:10px 0 4px;opacity:0;transition:opacity .5s ease}
.f2y-nordholz.an{opacity:1}
.bd-reihe{position:relative;display:flex;align-items:center;
  justify-content:center;gap:28px;flex-wrap:wrap;padding:6px 0}
.bd-arm,.bd-band{position:relative}
.bd-band{cursor:grab;touch-action:none}
.bd-band:active{cursor:grabbing}
.bd-klon{position:absolute;z-index:5;pointer-events:none}

.bd-zug{position:absolute;left:18%;top:30%;--kl:48px;z-index:4;
  pointer-events:none;transition:opacity .25s}
.bd-zug.still{opacity:0}
.bd-zug .klecks{animation:bd-zieht 2.9s cubic-bezier(.35,0,.3,1) infinite}
@keyframes bd-zieht{
  0%{transform:translateX(14px);opacity:0}
  16%{transform:translateX(8px);opacity:.9}
  74%{transform:translateX(-30px);opacity:.9}
  100%{transform:translateX(-46px);opacity:0}}
.bd-kurbel{width:min(300px, 84vw)}
.bd-feld{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:6px 0;opacity:0;transition:opacity .5s ease}
.bd-feld.an{opacity:1}
.bd-feld .bkform{display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;justify-content:center}
.bd-feld input{box-sizing:border-box;width:min(300px, 76vw);
  background:#fbf7ee;color:#1f1d1a;border:0;border-radius:1px;
  padding:7px 11px;font-family:var(--s-fine);font-size:var(--patrick);
  line-height:1.45;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.bd-feld input::placeholder{color:#1f1d1a;opacity:.5}
.bd-feld .wahl{font-size:calc(var(--barlow) * .8);
  font-family:var(--s-regie);letter-spacing:.14em;
  text-transform:uppercase;line-height:1.4;color:var(--tinte)}

@media (prefers-reduced-motion: reduce){
  .f2y-ticket,.tk-kiste,.wtabs.tk-ein,.tk-karte.tk-ein,
  .tk-angebot.tk-ein,.f2y-warten,.wt-tag,.f2y-nordholz,.bd-feld{transition:none;animation:none}
  .tk-caret,.wspinner,.bd-zug .klecks{animation:none}
}

.gt-karte{position:fixed;inset:0;z-index:500;background:var(--grund);
  display:block;overflow:clip}

.gt-zeile{position:absolute;left:0;right:0;top:38dvh;transform:translateY(-50%);
  width:min(86vw,362px);margin-inline:auto;
  text-align:center;font-family:var(--s-lesen);
  font-size:var(--hanken);line-height:var(--zeile);color:var(--tinte)}

.gt-karte.gt-satz-unten .gt-zeile{top:auto;bottom:12.5dvh;transform:translateY(50%)}

.gt-vorzeile{top:22dvh}

.gt-uebung{position:absolute;left:0;right:0;top:52dvh;
  width:max-content;max-width:100%;margin-inline:auto;z-index:1}

.gt-zone{position:absolute;left:0;right:0;bottom:0;height:25dvh}
.gt-zone.markiert{background:rgb(255 255 255 / .08)}
.gt-zonenlinie{position:absolute;left:0;top:-1px;width:100%;height:2px;display:block}
@keyframes gt-zonen-wink{0%,100%{background-color:rgb(255 255 255 / 0)}
  18%{background-color:rgb(255 255 255 / .08)}
  36%{background-color:rgb(255 255 255 / 0)}}
.gt-zone.winkt{animation:gt-zonen-wink 1.5s ease-in-out infinite}

@keyframes gt-stups{0%,100%{rotate:0deg}
  25%{rotate:-2.6deg}55%{rotate:1.7deg}80%{rotate:-.5deg}}
.gt-stupst{animation:gt-stups .5s ease}

.gt-papier{background:var(--tinte);border-radius:2px;
  box-shadow:0 14px 26px rgb(0 0 0 / .5),0 3px 7px rgb(122 90 40 / .22)}

.gt-wischfeld{position:relative;width:min(74vw,300px);height:132px}

.gt-wischblatt{position:absolute;left:calc(50% - 38px);top:28px;
  width:76px;height:76px;cursor:grab;touch-action:none;
  transform:rotate(-2deg)}
@keyframes gt-zupf-r{
  0%{transform:translateX(0) rotate(-2deg)}
  26%{transform:translateX(40px) rotate(-2deg)}
  38%{transform:translateX(40px) rotate(-2deg)}
  52%{transform:translateX(0) rotate(-2deg)}
  100%{transform:translateX(0) rotate(-2deg)}}
@keyframes gt-zupf-l{
  0%{transform:translateX(0) rotate(-2deg)}
  26%{transform:translateX(-40px) rotate(-2deg)}
  38%{transform:translateX(-40px) rotate(-2deg)}
  52%{transform:translateX(0) rotate(-2deg)}
  100%{transform:translateX(0) rotate(-2deg)}}
.gt-wischblatt.zupft-r{animation:gt-zupf-r 2.6s ease-in-out infinite}
.gt-wischblatt.zupft-l{animation:gt-zupf-l 2.6s ease-in-out infinite}

.gt-faltfeld{position:relative;width:200px;height:110px;cursor:grab;
  touch-action:none}
.gt-faltlinks{position:absolute;left:calc(50% - 56px);top:17px;
  width:56px;height:76px}
.gt-faltrechts{position:absolute;left:50%;top:17px;width:56px;height:76px;
  transform:scaleX(0);transform-origin:left center;
  border-left:1.5px solid rgb(18 22 26 / .25)}
.gt-faltbobbel{position:absolute;left:calc(50% - 14px);top:39px;
  pointer-events:none;transition:opacity .2s ease}
.gt-faltbobbel .klecks{--kl:29px}
.gt-faltbobbel.hin .klecks{animation:gt-bobbel-hin 2.9s ease-in-out infinite}
.gt-faltbobbel.her .klecks{animation:gt-bobbel-her 2.9s ease-in-out infinite}
@keyframes gt-bobbel-hin{0%{transform:translateX(0);opacity:0}
  14%{opacity:1}72%{transform:translateX(56px);opacity:1}
  100%{transform:translateX(56px);opacity:0}}
@keyframes gt-bobbel-her{0%{transform:translateX(56px);opacity:0}
  14%{opacity:1}72%{transform:translateX(0);opacity:1}
  100%{transform:translateX(0);opacity:0}}

.gt-ziehfeld{position:relative;width:min(74vw,300px);height:190px}
.gt-kasten{position:absolute;right:0;top:0;width:112px;height:86px;overflow:visible}
.gt-kasten rect{fill:none;stroke:rgb(255 255 255 / .32);stroke-width:1.5;
  stroke-dasharray:4.5 5.5}
.gt-ziehding{position:absolute;left:6px;bottom:0;width:56px;height:56px;
  cursor:grab;touch-action:none;transform:rotate(3deg)}

.gt-kritzelfeld{position:relative;width:min(66vw,260px);height:110px;
  touch-action:none;cursor:crosshair}
.gt-kritzelfeld svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gt-kritzellinie{stroke:rgb(236 233 226 / .35);stroke-width:1.5}
.gt-kritzelzug{stroke:rgb(236 233 226 / .9);stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

.gt-sendefeld{width:min(78vw,300px);display:flex;flex-direction:column;gap:14px}
.gt-verlauf{min-height:64px;display:flex;flex-direction:column;
  align-items:flex-end;justify-content:flex-end;gap:3px}
.gt-blasenzeit{font-family:var(--s-regie);font-size:12px;letter-spacing:.08em;
  color:rgb(var(--moewe-rgb) / .6)}
.gt-blase{background:rgb(var(--moewe-rgb) / .18);border-radius:12px;
  padding:.16em .62em;font-size:17px;line-height:1.35;max-width:88%;
  color:var(--tinte)}
.gt-chipzeile{display:flex;gap:11px}
.gt-chipzeile .wahl{font-size:17px;padding:.16em .62em;border-radius:8px}
.gt-eingabezeile{display:flex;align-items:center;gap:10px;
  border-top:1px solid rgb(255 255 255 / .08);padding-top:12px}
.gt-eingabefeld{flex:1;min-height:34px;font-size:17px;line-height:1.35;
  color:var(--tinte);padding:.2em .1em}
.gt-flieger{flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  border:0;padding:0;
  background-color:var(--senden-ruhe);color:var(--senden-ruhe-zeichen);
  background-image:var(--flieger-rand);background-size:100% 100%;
  display:flex;align-items:center;justify-content:center;
  cursor:default;transition:background-color .25s ease,color .25s ease}
.gt-flieger svg{width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linejoin:round}
.gt-flieger.bereit{background-color:var(--moewe);color:var(--tinte-dunkel);
  background-image:none;cursor:pointer}

.gt-kopf{width:min(78vw,300px);display:flex;align-items:center;gap:12px;
  border-bottom:1px solid rgb(255 255 255 / .08);padding-bottom:12px}
.gt-zurueck{position:relative;width:9px;height:9px;flex:0 0 auto;
  cursor:pointer;background:none;border:0;padding:0}
.gt-zurueck::before{content:'';position:absolute;inset:0;
  border-left:3.2px solid #9a9aa0;border-bottom:3.2px solid #9a9aa0;
  transform:rotate(45deg)}
.gt-zurueck::after{content:'';position:absolute;inset:-16px}
.gt-zurueck.ruft{animation:huepf-pfeil 2.2s cubic-bezier(.3,.9,.3,1) infinite}
.gt-kopfname{font-family:var(--s-lesen);font-size:17px;color:var(--tinte)}

.gt-konfetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;
  z-index:520}
.gt-flitter{position:absolute;top:-5dvh;width:7px;height:11px;
  border-radius:1px;animation:gt-flitter-fall linear forwards}
@keyframes gt-flitter-fall{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  85%{opacity:1}
  100%{transform:translate(var(--dx,0),115dvh) rotate(var(--rot,540deg));opacity:.85}}

@media (prefers-reduced-motion: reduce){
  .gt-wischblatt,.gt-faltbobbel .klecks,
  .gt-zurueck.ruft,.gt-zone.winkt,.gt-flitter,.gt-stupst{animation:none}
}

.lf-karte{position:fixed;inset:0;z-index:500;background:var(--grund);
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4dvh;overflow:clip;
  touch-action:none;user-select:none;-webkit-user-select:none}

.lf-zeile{width:min(86vw,362px);text-align:center;
  font-family:var(--s-lesen);font-size:var(--hanken);line-height:var(--zeile);
  color:var(--tinte)}

.lf-buehne{position:relative;flex:0 0 auto;aspect-ratio:1136/2048;
  width:min(78vw, calc(62dvh * 1136 / 2048))}
.lf-buehne canvas{position:absolute;inset:0;width:100%;height:100%;
  display:block;border-radius:4px;

  filter:grayscale(1)}
.lf-kruemel{pointer-events:none}

.lf-auswahl{position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none}
.lf-auswahl polygon{fill:none;stroke:rgb(236 233 226 / .92);
  stroke-width:1.6;stroke-dasharray:5 4.5;vector-effect:non-scaling-stroke}
.lf-auswahl polygon.zieht{animation:lf-linie-zieht 1.4s ease forwards}
.lf-auswahl polygon.laeuft{animation:lf-ameisen 1.1s linear infinite}
@keyframes lf-linie-zieht{from{stroke-dasharray:0 2000;stroke-dashoffset:0}
  to{stroke-dasharray:5 4.5;stroke-dashoffset:0}}
@keyframes lf-ameisen{to{stroke-dashoffset:-19}}

.lf-fang{position:absolute;inset:0;width:100%;height:100%;
  background:none;border:0;padding:0;cursor:pointer}
@media (prefers-reduced-motion: reduce){
  .lf-auswahl polygon.laeuft{animation:none}
}

.wahlfeld.stupst .wahl{animation:wahl-stups .5s ease}
@keyframes wahl-stups{0%,100%{transform:rotate(0)}
  25%{transform:rotate(-2.2deg)}55%{transform:rotate(1.5deg)}80%{transform:rotate(-.5deg)}}

.h-zeile.leuchtet.leuchtet-laut{animation:zeile-leuchtet-laut 1.6s ease-in-out infinite}
@keyframes zeile-leuchtet-laut{
  0%,100%{background:#1b1b20;box-shadow:0 0 10px rgb(230 227 220 / .09)}
  50%{background:#2b2b33;box-shadow:0 0 22px rgb(230 227 220 / .2)}}

.h-loeschen.ruft.ruft-laut .eimer{animation:ruf-atem 1.6s ease-in-out infinite}
.h-loeschen.ruft.ruft-laut .eimer svg{animation:eimer-stups-laut 1.9s ease-in-out infinite}
@keyframes eimer-stups-laut{0%,70%,100%{transform:rotate(0)}
  76%{transform:rotate(-7deg)}84%{transform:rotate(5deg)}92%{transform:rotate(-2deg)}}
@media (prefers-reduced-motion: reduce){
  .wahlfeld.stupst .wahl,
  .h-zeile.leuchtet.leuchtet-laut,
  .h-loeschen.ruft.ruft-laut .eimer,.h-loeschen.ruft.ruft-laut .eimer svg,
  .h-fuss .h-flieger.winkt.winkt-laut{animation:none}
}

.persp-seite{position:fixed;inset:0;z-index:520;
  display:flex;flex-direction:column;align-items:center;
  animation:persp-rein .3s ease}
.persp-seite.geht{opacity:0;transition:opacity .3s ease}
@keyframes persp-rein{from{opacity:0}to{opacity:1}}

.persp-wahl,.persp-bestaetigen{background:var(--tinte);color:var(--tinte-dunkel)}

body.persp-hell #hilfe-zugang,
body.persp-hell #neustart-zugang{color:rgb(18 22 26 / .5)}
body.persp-hell #hilfe-zugang:hover,
body.persp-hell #neustart-zugang:hover{color:rgb(18 22 26 / .85)}

.persp-wahl .wahl .w-rand rect,
.persp-bestaetigen .wahl .w-rand rect{stroke:rgb(0 0 0 / .38)}
.persp-wahl .wahl.gewaehlt,
.persp-bestaetigen .wahl.gewaehlt{background:var(--moewe);color:var(--tinte-dunkel)}

.persp-wahl{overflow-y:auto;justify-content:flex-start;overscroll-behavior:contain}
.pw-innen{width:100%;max-width:var(--spalte);margin:0 auto;
  padding:calc(26px + env(safe-area-inset-top, 0px)) 18px
          calc(170px + env(safe-area-inset-bottom, 0px));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pw-erklaerung{margin:0 0 26px;
  font-family:var(--s-lesen);font-size:var(--hanken);line-height:var(--zeile);

  white-space:pre-line}

.pw-gruppe{margin:0 0 4px;
  font-family:var(--s-regie);font-size:var(--barlow);line-height:var(--zeile-barlow);
  letter-spacing:.14em;text-transform:uppercase;
  color:rgb(18 22 26 / .5)}
.pw-gruppe + .pw-person{margin-top:2px}
.pw-person + .pw-gruppe{margin-top:26px}

.pw-kopf{margin:0 0 18px;font-family:var(--s-regie);font-size:var(--barlow);line-height:var(--zeile-barlow);
  letter-spacing:.14em;text-transform:uppercase;color:rgb(18 22 26 / .5)}
.pw-person{margin:0 0 30px}
.pw-name{margin:0 0 2px 2px;font-family:var(--s-hand);font-weight:500;font-size:40px;line-height:1.05}
.pw-name-lena{font-family:var(--s-lena);font-weight:400;font-size:34px;line-height:1.15}
.pw-name-quinn{font-family:var(--s-quinn);font-weight:400;font-size:31px;line-height:1.2}
.pw-unter{margin:4px 0 8px 2px;
  font-family:var(--s-regie);
  font-size:calc(var(--barlow) + 2px);line-height:calc(var(--zeile-barlow) + 2px);
  color:rgb(18 22 26 / .55)}
.pw-teile{display:flex;gap:9px;margin:12px 0 0 2px}
.pw-teil{width:38px;height:38px;margin:0;padding:0;border-radius:10px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--s-regie);font-size:16px;letter-spacing:.06em;color:rgb(18 22 26 / .45);
  background:none;border:1.5px dotted rgb(18 22 26 / .28);cursor:default;
  transition:transform .15s ease,background-color .22s ease,border-color .22s ease}
.pw-teil.naechster{border:1.5px dashed rgb(18 22 26 / .6);color:var(--tinte-dunkel);cursor:pointer}
.pw-teil.hat{background:var(--tinte-dunkel);color:var(--tinte);border:1.5px solid var(--tinte-dunkel);cursor:pointer}
.pw-teil.gewaehlt{background:var(--moewe);border-color:var(--moewe);color:var(--tinte-dunkel)}
.pw-teil.hat:active,.pw-teil.naechster:active{transform:scale(.94)}
.pw-teil.neu{box-shadow:0 0 0 3px rgb(var(--moewe-rgb) / .75)}
.pw-teil svg{display:block;width:22px;height:22px;fill:rgb(18 22 26 / .3)}
.pw-teil.naechster svg{fill:rgb(18 22 26 / .8)}
.pw-teil.hat svg{fill:var(--tinte)}

.pw-verlassen{position:absolute;left:0;right:0;bottom:0;z-index:2;display:none;flex-direction:column;align-items:center;gap:10px;
  padding:16px 26px calc(34px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(to top, rgb(236 233 226) 85%, rgb(236 233 226 / 0));pointer-events:none}
.pw-verlassen.da{display:flex}
.pw-verlassen .wahl{pointer-events:auto}
.pw-rest{margin:0;font-family:var(--s-regie);font-size:calc(var(--barlow) + 2px);line-height:calc(var(--zeile-barlow) + 2px);
  letter-spacing:.04em;color:rgb(18 22 26 / .55)}

.pw-frage{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  background:rgb(236 233 226 / .94);color:var(--tinte-dunkel);animation:persp-rein .2s ease}
.pw-frage-innen{width:100%;max-width:var(--spalte);padding:0 26px;box-sizing:border-box;text-align:center}
.pw-frage-innen p{margin:0 0 22px;font-family:var(--s-lesen);font-size:var(--hanken);line-height:var(--zeile)}
.pw-frage-innen .wahl{display:block;margin:11px auto 0;width:max-content}

.pw-probe{position:absolute;left:14px;bottom:12px;margin:0;
  pointer-events:none;
  font-family:var(--werkzeug);font-size:var(--werkzeug-gross);
  line-height:var(--zeile-werkzeug);letter-spacing:.12em;text-transform:uppercase;
  color:rgb(18 22 26 / .38)}

.persp-bestaetigen{justify-content:center}
.pb-innen{width:100%;max-width:var(--spalte);margin:0 auto;padding:0 18px;
  text-align:center}

.pb-bild{display:block;width:76px;height:76px;margin:0 auto 18px;object-fit:cover;object-position:50% 24%;
  filter:grayscale(1) contrast(1.05);border-radius:3px}
.pb-bild-quinn{object-fit:contain;filter:none}
.pb-wer{margin:0;font-family:var(--s-hand);
  font-size:calc(var(--caveat-titel) + 2px);line-height:1}

.pb-wer-lena{font-family:var(--s-lena);font-size:calc(var(--caveat-titel) - 2px)}

.pb-wer-quinn{font-family:var(--s-quinn);font-size:calc(var(--caveat-titel) - 4px)}

.pb-unter{margin:14px 0 0;
  font-family:var(--s-regie);
  font-size:calc(var(--barlow) + 4px);line-height:calc(var(--zeile-barlow) + 4px);
  color:rgb(18 22 26 / .55)}
.persp-bestaetigen .wahlfeld{position:absolute;left:26px;right:26px;
  max-width:var(--spalte);margin-inline:auto;
  bottom:calc(var(--wahl-boden) + env(safe-area-inset-bottom, 0px));
  display:flex;flex-direction:column;gap:11px;
  align-items:center;justify-content:flex-end}
.persp-bestaetigen .wahl{animation:wahl-rein .35s cubic-bezier(.25,.8,.3,1) backwards}

.persp-stueck{background:#000;color:var(--tinte);justify-content:flex-start}

.ps-x{position:absolute;left:calc(10px + env(safe-area-inset-left, 0px));top:calc(14px + env(safe-area-inset-top, 0px));
  width:44px;height:44px;z-index:12;display:flex;align-items:center;justify-content:center;
  margin:0;padding:0;border:0;background:rgb(0 0 0 / .45);border-radius:50%;cursor:pointer}
.ps-x svg{display:block;width:20px;height:20px;stroke:var(--regie);stroke-width:1.8;stroke-linecap:round;fill:none}
.ps-x[hidden]{display:none}
.persp-pfoten .ps-x{background:rgb(18 22 26 / .08)}
.persp-pfoten .ps-x svg{stroke:rgb(18 22 26 / .6)}
.persp-stueck .ps-kopf{padding-left:64px}
.ps-kopf{flex:0 0 auto;width:100%;max-width:var(--spalte);margin:0 auto;
  padding:calc(26px + env(safe-area-inset-top, 0px)) 18px 0;
  font-family:var(--s-regie);font-size:var(--barlow);line-height:var(--zeile-barlow);
  letter-spacing:.14em;text-transform:uppercase;color:var(--regie)}
.ps-feld{flex:1 1 auto;width:100%;max-width:var(--spalte);margin:0 auto;
  padding:22px 18px calc(var(--knopf-mitte) * 2 + env(safe-area-inset-bottom, 0px));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ps-block{margin:0 0 var(--zeile);
  font-family:var(--s-lesen);font-size:var(--hanken);line-height:var(--zeile);
  white-space:pre-line;
  animation:persp-block-rein .5s cubic-bezier(.25,.8,.3,1)}
.ps-block:last-child{margin-bottom:0}
@keyframes persp-block-rein{from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}}

.f2y-fprofil{margin:auto;flex:0 0 auto;padding:6px 0 10px}
.fp-karte{width:min(330px, 94%);border-radius:18px;overflow:hidden;
  background:#f6f4ef;color:var(--tinte-dunkel);
  box-shadow:0 16px 34px rgb(0 0 0 / .5), 0 3px 8px rgb(0 0 0 / .38)}

.fp-galerie{position:relative;aspect-ratio:1/1;background:#ece9e2;overflow:hidden}
.fp-blatt{position:absolute;inset:0}
.fp-blatt[hidden]{display:none}
.fp-blatt-foto img{display:block;width:100%;height:100%;object-fit:cover}
.fp-blatt-plan{display:grid;place-items:center;padding:18px 12px 30px}
.fp-blatt-plan .fp-plan{display:block;width:100%;height:auto}
.fp-blatt-leer{padding:12px 12px 26px}
.fp-blatt-leer .fp-vermerk{height:100%;display:grid;place-items:center;border:1.5px dashed rgba(18,22,26,.35);
  font-family:var(--s-regie);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(18,22,26,.5)}
.fp-blaettern{position:absolute;top:0;bottom:0;width:50%;-webkit-tap-highlight-color:transparent}
.fp-zurueck{left:0}
.fp-vor{right:0}
.fp-blaettern:disabled{cursor:default}
.fp-punkte{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:7px;pointer-events:none}
.fp-punkt{pointer-events:auto;width:7px;height:7px;border-radius:50%;padding:0;
  background:rgb(255 255 255 / .5);box-shadow:0 0 0 1px rgb(0 0 0 / .28);transition:background .15s}
.fp-punkt.an{background:#fff}
.fp-punkt:focus-visible{outline:2px solid #fff;outline-offset:2px}

.fp-plan .fp-wand{fill:url(#fp-poche);stroke:none}
.fp-plan .fp-pochelinie{stroke:#12161a;stroke-width:.7;opacity:.55}
.fp-plan .fp-kante{fill:none;stroke:#12161a;stroke-width:1.6}
.fp-plan .fp-oeffnung{fill:#ece9e2;stroke:none}
.fp-plan .fp-glas{stroke:#12161a;stroke-width:.7}
.fp-plan .fp-tuerblatt{stroke:#12161a;stroke-width:1.4}
.fp-plan .fp-bogen{fill:none;stroke:#12161a;stroke-width:.6;stroke-dasharray:2 1.5}
.fp-plan .fp-ding{fill:none;stroke:#12161a;stroke-width:.9}
.fp-plan .fp-mass{stroke:#12161a;stroke-width:.6}
.fp-plan .fp-masszahl{font-family:var(--s-regie);font-size:7.5px;letter-spacing:.04em;fill:#12161a}
.fp-plan .fp-moebelmass{font-size:7px;paint-order:stroke;stroke:#ece9e2;stroke-width:2.4px;stroke-linejoin:round}
.fp-plan .fp-klein{font-size:6px}
.fp-plan .fp-flaeche{font-size:8.5px}
.fp-plan .fp-diele{stroke:#12161a;stroke-width:.35;opacity:.3}
.fp-plan .fp-voll{fill:#ece9e2}
.fp-plan .fp-nord circle{fill:none;stroke:#12161a;stroke-width:.8}
.fp-plan .fp-nord path{fill:#12161a}
.fp-plan .fp-nord text{font-family:var(--s-regie);font-size:8px;fill:#12161a}
.fp-kopf{display:flex;align-items:baseline;gap:8px;padding:12px 16px 0}
.fp-name{font-family:var(--s-lesen);font-size:calc(var(--hanken) * 1.25);font-weight:600;line-height:1.2}
.fp-alter{font-family:var(--s-lesen);font-size:calc(var(--hanken) * 1.05);color:rgb(18 22 26 / .7)}
.fp-ort{margin-left:auto;font-family:var(--s-regie);font-size:calc(var(--barlow) * .78);
  letter-spacing:.1em;text-transform:uppercase;color:rgb(18 22 26 / .5)}
.fp-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px 4px}
.fp-chip{font-family:var(--s-regie);font-size:calc(var(--barlow) * .78);letter-spacing:.1em;
  text-transform:uppercase;padding:2px 9px;border-radius:999px;border:1px solid rgb(18 22 26 / .3);
  color:rgb(18 22 26 / .75)}
.fp-frage{padding:12px 16px 0}
.fp-f{font-family:var(--s-regie);font-size:calc(var(--barlow) * .78);letter-spacing:.1em;
  text-transform:uppercase;color:rgb(18 22 26 / .5);margin-bottom:2px}
.fp-a{font-family:var(--s-lesen);font-size:calc(var(--hanken) * .92);line-height:1.35}
.fp-zeichen{display:flex;justify-content:center;gap:26px;padding:16px 0 14px}
.fp-zeichen svg{width:40px;height:40px;fill:none;stroke:rgb(18 22 26 / .55);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

.f2y-laufgaben{margin:auto;flex:0 0 auto;padding:6px 0 10px}
.lh-blatt{width:min(340px, 94%);padding:20px 20px 22px;
  background:#ece9e2;color:#12161a;
  transform:rotate(.8deg);
  box-shadow:0 16px 34px rgb(0 0 0 / .5), 0 3px 8px rgb(0 0 0 / .38)}
@media (prefers-reduced-motion: reduce){ .lh-blatt{transform:none} }

.lh-blatt{--lh-kuli:#2b4a9e;color:var(--lh-kuli)}
.lh-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin:0 0 10px;padding-bottom:4px;border-bottom:1px solid rgb(43 74 158 / .35)}
.lh-titel{font-family:var(--s-lena);font-size:calc(var(--handlee) * 1.3);line-height:1.2;
  transform:rotate(-.6deg);transform-origin:left center}
.lh-datum{font-family:var(--s-lena);font-size:var(--handlee);color:rgb(43 74 158 / .7);white-space:nowrap}
.lh-liste{margin:0;padding:0 0 0 1.3em}
.lh-punkt{position:relative;margin:0 0 9px;padding-right:2px;
  font-family:var(--s-lena);font-size:calc(var(--handlee) * 1.08);line-height:1.3}
.lh-punkt::marker{font-family:var(--s-lena);color:rgb(43 74 158 / .8)}

.lh-punkt.stift-blau{--lh-stift:#3d5aa8}
.lh-punkt.stift-gruen{--lh-stift:#4f9d5c}
.lh-punkt.stift-rot{--lh-stift:#d0473f}
.lh-punkt.stift-gelb{--lh-stift:#e9c548}
.lh-punkt.stift-orange{--lh-stift:#ec8a3c}
.lh-punkt.stift-gelb .lk-schraff path{opacity:.62}
.lh-punkt.stift-gelb .lk-schraff path.lk-schraff2{opacity:.5}

.lh-wort{position:relative;display:inline-block}
.lh-kringel{position:absolute;left:-8px;top:-5px;width:calc(100% + 16px);height:calc(100% + 10px);
  overflow:visible;pointer-events:none}
.lh-kringel path{fill:none;stroke:var(--lh-stift);stroke-width:2.2;stroke-linecap:round;
  opacity:.75;mix-blend-mode:multiply}

.lh-ausrufe{display:inline-block;margin-left:.3em;transform:rotate(-8deg);
  font-family:var(--s-lena);font-size:calc(var(--handlee) * 1.3);line-height:1;
  color:var(--lh-stift);mix-blend-mode:multiply;vertical-align:-2px}

.lh-rand{display:block;margin:1px 0 0 1.2em;transform:rotate(-2.5deg);transform-origin:left center;
  font-family:var(--s-lena);font-size:var(--handlee);line-height:1.15;
  color:var(--lh-stift);mix-blend-mode:multiply}

.lh-schraff{position:relative;display:inline-block;padding:0 3px;margin:0 -3px}
.lh-schraff > span{position:relative;z-index:1}
.lh-schraff .lk-schraff path{stroke:var(--lh-stift)}

.lh-unter{display:block;margin:2px 0 0 1.2em;font-family:var(--s-lena);font-size:var(--handlee);
  line-height:1.3;color:var(--lh-stift);mix-blend-mode:multiply}
.lh-unterwort{position:relative;display:inline-block;margin-right:.9em;transform:rotate(-2deg)}
.lh-unterwort .lk-strich{position:absolute;left:-2px;right:-3px;top:0;height:100%;width:calc(100% + 5px);
  overflow:visible;pointer-events:none}
.lh-unterwort .lk-strich path{fill:none;stroke:var(--lh-stift);stroke-width:1.6;stroke-linecap:round;
  vector-effect:non-scaling-stroke}

.lh-smileys{display:flex;gap:7px;margin:4px 0 0 1.2em}
.lh-smileys .lk-smiley{width:26px;height:26px}

.f2y-lkalender{position:fixed;inset:0;z-index:10;background:#000;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;
  padding:calc(8px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px))
          calc(8px + env(safe-area-inset-bottom, 0px)) calc(10px + env(safe-area-inset-left, 0px))}
.f2y-lkalender .lk-doppel{transform-origin:center center;will-change:transform}
.f2y-lkalender .lk-dreh{position:absolute;inset:0;display:none;place-items:center;
  background:#000;z-index:5;text-align:center;cursor:pointer}
.f2y-lkalender:not(.liegt) .lk-dreh,.f2y-lkalender.zurueck .lk-dreh{display:grid}
.f2y-lkalender .kd-handy{display:block;width:34px;height:60px;border:2px solid #8a8a8a;
  border-radius:7px;position:relative;margin:0 auto 18px;
  animation:kdHandyDrehen 3.2s ease-in-out infinite}
.f2y-lkalender .kd-handy::after{content:'';position:absolute;left:50%;bottom:5px;
  width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#8a8a8a}
.f2y-lkalender.zurueck .kd-handy{animation-name:kdHandyZurueck}
.f2y-lkalender .kd-wort{font-family:var(--s-regie);font-size:calc(var(--barlow) * .8);
  letter-spacing:.18em;color:var(--regie);text-transform:uppercase;line-height:2}
.f2y-lkalender .kd-sperre,.f2y-lkalender .kd-rechner{font-family:var(--s-regie);
  font-size:calc(var(--barlow) * .62);letter-spacing:.14em;
  text-transform:uppercase;color:#6f6f6f;line-height:1.55}
@media (prefers-reduced-motion: reduce){
  .f2y-lkalender .kd-handy{animation:none;transform:rotate(-90deg)}
  .f2y-lkalender.zurueck .kd-handy{animation:none;transform:rotate(0)}
}

.lk-doppel{display:flex;width:100%;height:100%;max-height:420px;flex:0 1 auto;
  gap:0;color:#26241f;
  box-shadow:0 18px 44px rgb(0 0 0 / .55)}
.lk-blatt{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  background:#e9e6df;padding:8px 10px 10px}
.lk-blatt:first-child{border-radius:3px 0 0 3px;
  box-shadow:inset -14px 0 18px -14px rgb(0 0 0 / .35)}
.lk-blatt:last-child{border-radius:0 3px 3px 0;
  box-shadow:inset 14px 0 18px -14px rgb(0 0 0 / .35)}
.lk-kopf{flex:0 0 auto;height:18px;display:flex;justify-content:space-between;
  font-family:var(--s-regie);font-size:calc(var(--barlow) * .7);line-height:18px;
  letter-spacing:.16em;text-transform:uppercase;color:rgb(38 36 31 / .55)}
.lk-reihe{flex:1 1 auto;min-height:0;display:flex;gap:6px;position:relative}
.lk-leiter{flex:0 0 14px;position:relative;margin-top:22px}
.lk-stunde{position:absolute;right:0;transform:translateY(-50%);
  font-family:var(--s-regie);font-size:calc(var(--barlow) * .58);
  color:rgb(38 36 31 / .45)}
.lk-tag{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.lk-tagkopf{flex:0 0 22px;display:flex;align-items:baseline;gap:5px;
  border-bottom:1px solid rgb(38 36 31 / .45);
  font-family:var(--s-regie);font-size:calc(var(--barlow) * .72);
  letter-spacing:.1em;text-transform:uppercase;color:rgb(38 36 31 / .8)}
.lk-datum{font-size:calc(var(--barlow) * .62);color:rgb(38 36 31 / .5);letter-spacing:.04em}

.lk-morgen{padding:0 2px 1px;font-family:var(--s-lesen);font-size:calc(var(--hanken) * .62);
  line-height:1.2;color:rgb(38 36 31 / .8)}
.lk-haken{display:inline-block;width:11px;height:10px;margin-left:.25em;vertical-align:-1px;
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.lk-weg{position:relative;display:inline-block}
.lk-strich{position:absolute;left:-2px;right:-3px;top:0;height:100%;width:calc(100% + 5px);
  overflow:visible;pointer-events:none}
.lk-strich path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;
  vector-effect:non-scaling-stroke}

.f2y-lkalender .lk-ganz,.f2y-lkalender .lk-ohne,.f2y-lkalender .lk-eintrag,
.f2y-lkalender .lk-notiz,.f2y-lkalender .lk-morgen{
  font-family:var(--s-lena);font-size:var(--handlee);line-height:1.15}
.f2y-lkalender .lk-notiz{line-height:19px}
.f2y-lkalender .lk-um{font-family:var(--s-lena);font-size:calc(var(--handlee) * .82);
  letter-spacing:0;color:rgb(38 36 31 / .8)}
.f2y-lkalender .lk-stimmwort{font-family:var(--s-lena);font-size:calc(var(--handlee) * .82)}
.f2y-lkalender .lk-schraeg,.f2y-lkalender .lk-arbeit{font-family:var(--s-lena);
  font-size:calc(var(--handlee) * 1.35)}

.lk-stimmung{position:absolute;right:0;bottom:0;width:28px;height:28px}
.lk-notizfeld .lk-zeit{display:none}

.lk-stimmwort{position:absolute;left:0;bottom:1px;width:62px;z-index:1;
  font-family:var(--s-lesen);font-size:calc(var(--hanken) * .58);line-height:1.05;
  color:rgb(38 36 31 / .8);text-align:left}
.lk-smiley{flex:0 0 auto;display:block;width:28px;height:28px;overflow:visible;--lk-stift:#3d5aa8}

.lk-stufe-1{--lk-stift:#3d5aa8}
.lk-stufe-2{--lk-stift:#6f8fc9}
.lk-stufe-3{--lk-stift:#8ec0e6}
.lk-stufe-4{--lk-stift:#b9cf5e}
.lk-stufe-5{--lk-stift:#4f9d5c}
.lk-smiley .lk-tinte{fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
.lk-smiley .lk-stiftgrund{fill:var(--lk-stift);opacity:.36;mix-blend-mode:multiply}
.lk-smiley .lk-stift{fill:none;stroke:var(--lk-stift);stroke-width:1.8;opacity:.55;
  stroke-linecap:round;mix-blend-mode:multiply}
.lk-feld{flex:1 1 auto;position:relative;min-height:0}

.lk-zeit{position:absolute;left:0;right:0;top:0;bottom:30px}
.lk-linie{position:absolute;left:0;right:0;height:0;
  border-top:1px solid rgb(38 36 31 / .13)}

.lk-oben{position:absolute;left:0;right:0;top:2px;display:flex;flex-direction:column;gap:2px}

.lk-ganz{position:relative;font-family:var(--s-lesen);font-size:calc(var(--hanken) * .66);
  line-height:1.15;padding:1px 4px;letter-spacing:.02em}
.lk-ganz span{position:relative;z-index:1}
.lk-schraff{position:absolute;left:1px;right:3px;top:1px;bottom:0;width:calc(100% - 4px);height:calc(100% - 1px);
  overflow:visible;pointer-events:none}
.lk-schraff path{fill:none;stroke:#5fae6a;stroke-width:2.6;stroke-linecap:round;
  opacity:.42;mix-blend-mode:multiply;vector-effect:non-scaling-stroke}
.lk-schraff path.lk-schraff2{stroke-width:2.1;opacity:.34}

.lk-schraeg{position:absolute;left:38%;top:44%;transform:rotate(-17deg);
  font-family:var(--s-lesen);font-size:calc(var(--hanken) * .95);line-height:1;
  color:rgb(38 36 31 / .85);pointer-events:none;white-space:nowrap}

.lk-arbeit{position:absolute;left:42%;top:calc(22px + 31% - .5em);transform:rotate(-9deg);
  font-family:var(--s-lesen);font-size:calc(var(--hanken) * 1.05);line-height:1;
  color:rgb(38 36 31 / .8);pointer-events:none;white-space:nowrap}

.lk-notiz.schraeg{margin:9px 0 7px 6px;transform-origin:left center}
.lk-ohne{font-family:var(--s-lesen);font-size:calc(var(--hanken) * .68);line-height:1.2;
  padding:0 2px}
.lk-eintrag{position:absolute;left:0;right:0;padding:0 2px;
  font-family:var(--s-lesen);font-size:calc(var(--hanken) * .68);line-height:1.2;
  transform:translateY(-2px)}
.lk-um{font-family:var(--s-regie);font-size:calc(var(--barlow) * .6);
  letter-spacing:.04em;color:rgb(38 36 31 / .7);margin-right:1px}
.lk-notizen{flex:1.15 1 0}

.lk-notizfeld{padding-top:0;
  background:repeating-linear-gradient(to bottom, transparent 0 18px, rgb(38 36 31 / .13) 18px 19px)}
.lk-notiz{font-family:var(--s-lesen);font-size:calc(var(--hanken) * .68);line-height:19px;
  padding:0 2px}

.f2y-lkalender:not(.liegt) .lk-doppel{visibility:hidden}

.persp-pfoten{justify-content:center;background:var(--tinte);color:var(--tinte-dunkel)}
.persp-pfoten .ps-kopf{color:rgb(18 22 26 / .5)}
.persp-pfoten .pf-pfote svg{fill:rgb(18 22 26 / .16)}
.persp-pfoten .pf-pfote.hat svg{fill:var(--tinte-dunkel)}
.persp-pfoten .pf-zeile{color:var(--tinte-dunkel)}
.persp-pfoten .daumenzone.blitzt{animation-name:zonen-blitz-dunkel}
@keyframes zonen-blitz-dunkel{0%,100%{background-color:rgb(18 22 26 / 0)}
  30%{background-color:rgb(18 22 26 / .07)}
  65%{background-color:rgb(18 22 26 / 0)}}
.pf-reihe{display:flex;align-items:center;justify-content:center;gap:14px;
  width:100%;max-width:var(--spalte);margin:0 auto;padding:0 18px}
.pf-pfote{display:block;width:38px;height:38px}
.pf-pfote svg{display:block;width:100%;height:100%;fill:#2a2a2a}
.pf-pfote.hat svg{fill:var(--tinte)}
.pf-zeile{margin:26px 0 0;max-width:var(--spalte);padding:0 18px;text-align:center;
  font-family:var(--s-lesen);font-size:var(--hanken);line-height:var(--zeile);
  color:var(--tinte)}

.persp-pfoten .ps-kopf{position:absolute;left:0;right:0;top:0}

.persp-abspann{justify-content:center}
.persp-abspann .ps-feld{flex:0 1 auto;padding-top:0}

.pa-zeile{margin-bottom:calc(var(--zeile) * .6);animation-fill-mode:backwards}

@media (prefers-reduced-motion: reduce){
  .persp-seite,.ps-block,.persp-bestaetigen .wahl{animation:none}
  .persp-seite.geht{transition-duration:.001ms}
}

.persp-fund .ps-feld{display:flex}
.f2y-fabizettel{margin:auto;flex:0 0 auto;padding:6px 0 10px}
.fz-zettel{width:min(340px, 92%);padding:22px 22px 26px;
  background:#e9e6df;color:#26241f;
  transform:rotate(-1.2deg);
  box-shadow:0 16px 34px rgb(0 0 0 / .5), 0 3px 8px rgb(0 0 0 / .38)}
@media (prefers-reduced-motion: reduce){ .fz-zettel{transform:none} }

.fz-kopf{margin:0 0 14px;
  font-family:var(--s-lesen);font-size:var(--hanken);line-height:var(--zeile)}
.fz-liste{margin:0;padding:0;list-style:none}
.fz-liste li{font-family:var(--s-lesen);font-size:var(--hanken);line-height:var(--zeile)}

.fz-haken{display:inline-block;width:18px;height:15px;
  margin-left:.42em;vertical-align:-.08em;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.fz-unten{position:relative;margin:18px 0 0;padding:0 4px;
  font-family:var(--s-lesen);font-size:var(--hanken);line-height:var(--zeile)}
.fz-kringel{position:absolute;left:-14px;top:-9px;
  width:calc(100% + 28px);height:calc(100% + 18px);
  overflow:visible;pointer-events:none;
  fill:none;stroke:var(--orange);stroke-width:4.2;opacity:.9;
  mix-blend-mode:multiply;
  stroke-linecap:round;stroke-linejoin:round}

.kblatt.zupft{animation:kblatt-zupf 2.6s ease-in-out}
@keyframes kblatt-zupf{
  0%,52%,100%{translate:0 0}
  14%{translate:-22px 0}
  38%{translate:22px 0}}
.bonstreifen.wackelt{animation:bon-wackelt 2.4s ease-in-out}
@keyframes bon-wackelt{
  0%,55%,100%{rotate:0deg}
  15%{rotate:-5deg}
  35%{rotate:5deg}}
@media (prefers-reduced-motion: reduce){
  .kblatt.zupft,.bonstreifen.wackelt{animation:none}
}