.f4 .seite{overflow:hidden}
.f4 .top{position:relative;z-index:5}

.f4 .hero{position:relative;padding:70px var(--edge) 90px;isolation:isolate}
.f4 .hero::before{content:"";position:absolute;inset:0;background:var(--streifen);border-bottom:5px solid var(--k);z-index:-1}
.f4 .top{border-bottom:5px solid var(--k)}
.f4 .hero-kasten{background:var(--w);border:8px solid var(--k);box-shadow:20px 20px 0 var(--k);padding:52px;max-width:860px}
.f4 .hero-fenster{transform:rotate(5deg);margin:140px 0 0 -120px;z-index:2;width:min(560px,100%)}
.f4 .hero + .band{display:none}
.f4 .krakel{display:inline-block;background:var(--w);border:3px solid var(--k);box-shadow:5px 5px 0 var(--k);padding:6px 14px;float:right;transform:rotate(-6deg)}
.f4 h1{font-size:clamp(40px,4.6vw,88px)}
.f4 .mark{transform:rotate(4deg);background:var(--o);color:var(--ink)}

.f4 h2{display:inline-block;background:var(--w);border:6px solid var(--k);box-shadow:12px 12px 0 var(--l);padding:10px 26px;transform:rotate(-2deg);margin-bottom:34px}
.f4 .produkte h2{transform:rotate(1.5deg);box-shadow:12px 12px 0 var(--o)}
.f4 .regal h2{transform:rotate(-1deg)}
.f4 .bald h2{transform:rotate(2deg);box-shadow:12px 12px 0 var(--o)}
.f4 .post-text h2{transform:rotate(-2.5deg)}

.f4 .band{height:56px;transform:skewY(-3deg);margin:70px -4vw;border-width:5px}

.f4 .ueber{padding:40px var(--edge) 60px}
.f4 .ueber-bild{position:relative;transform:rotate(-3deg);margin-right:clamp(40px,5vw,80px)}
.f4 .ueber-bild::before{content:"";position:absolute;inset:40px -40px -40px 40px;background:var(--streifen);border:5px solid var(--k);transform:rotate(7deg);z-index:-1}
.f4 .foto img{box-shadow:14px 14px 0 var(--k)}
.f4 .zettel{transform:rotate(2.5deg);clear:both;margin:40px 0 28px 60px;box-shadow:10px 10px 0 var(--l)}
.f4 .ueber-bild h2{margin-bottom:30px}
.f4 .ueber-bild{margin-bottom:30px}

.f4 .produkte{position:relative;padding:80px var(--edge) 140px;isolation:isolate}
.f4 .produkte::before{content:"";position:absolute;inset:0 -10vw;background:var(--streifen);transform:skewY(3deg);border-top:5px solid var(--k);border-bottom:5px solid var(--k);z-index:-1}
.f4 .kopf p{background:var(--w);border:5px solid var(--k);box-shadow:10px 10px 0 var(--k);padding:18px 24px;display:inline-block;transform:rotate(1deg);max-width:70ch}
.f4 .cards{gap:0;margin-top:60px}
.f4 .card.links{transform:rotate(-5deg);z-index:1;margin-top:40px}
.f4 .card.mitte{transform:rotate(3deg);z-index:2;margin:0 -30px}
.f4 .card.rechts{transform:rotate(-2deg);z-index:3;margin-top:70px}
.f4 .card.mitte{box-shadow:14px 14px 0 var(--o)}
.f4 .card.rechts{box-shadow:14px 14px 0 var(--l)}
.f4 .card.links{box-shadow:14px 14px 0 var(--k)}
.f4 .card:hover{z-index:9}

.f4 .regal{padding:60px var(--edge) 40px}
.f4 .mini:nth-child(odd){transform:rotate(-1.6deg)}
.f4 .mini:nth-child(even){transform:rotate(1.4deg)}
.f4 .mini:nth-child(3){transform:rotate(2.2deg)}

.f4 .regal + .band{display:none}
.f4 .bald{position:relative;padding:110px var(--edge) 40px;isolation:isolate}
.f4 .bald::before{content:"";position:absolute;inset:0 -10vw -520px;background:var(--streifen);transform:skewY(-2.5deg);border-top:5px solid var(--k);z-index:-1}
.f4 .bald-text{background:var(--w);border:6px solid var(--k);box-shadow:14px 14px 0 var(--k);padding:36px;transform:rotate(-1.2deg);max-width:820px}
.f4 .tuer{transform:rotate(8deg);width:200px;margin-left:-40px}
.f4 .post{padding:60px var(--edge) 70px;position:relative;z-index:1}
.f4 .postkarte{transform:rotate(-7deg);box-shadow:16px 16px 0 var(--k)}
.f4 .post-text{background:var(--w);border:6px solid var(--k);box-shadow:14px 14px 0 var(--o);padding:36px;transform:rotate(2deg)}
.f4 .post + .band{display:none}
.f4 footer{padding:40px var(--edge) 48px;border-top:5px solid var(--k);background:var(--w);position:relative;z-index:2}

@media(max-width:1120px){
  .f4 .hero-fenster{margin:40px 0 0 0;width:min(520px,100%)}
  .f4 .cards{gap:40px}
  .f4 .card.mitte{margin:0}
  .f4 .card.links,.f4 .card.rechts{margin-top:0}
  .f4 .ueber-bild{margin-right:0}
}
@media(max-width:640px){
  .f4 .hero{padding:50px var(--edge) 90px}
  .f4 .hero-kasten{padding:26px;border-width:6px;box-shadow:12px 12px 0 var(--k)}
  .f4 .band{margin:40px -4vw}
  .f4 .bald-text,.f4 .post-text{padding:22px}
  .f4 .tuer{margin:0 0 8px 18px;width:120px}
  .f4 .zettel{margin-left:0}
  .f4 .ueber-bild::before{inset:30px -16px 30px 30px;transform:rotate(5deg)}
  .f4 .ueber-bild{margin-bottom:50px}
}

.f4 .hero::before,.f4 .produkte::before,.f4 .bald::before,.f4 .band{background-size:calc(100% + var(--s) * 26) 100%;background-position:calc(var(--s) * -16.97) 0}
@keyframes streifen-lauf{from{background-position:calc(var(--s) * -25.46) 0}to{background-position:calc(var(--s) * -16.97) 0}}
@keyframes streifen-zurueck{from{background-position:calc(var(--s) * -11.31) 0}to{background-position:calc(var(--s) * -16.97) 0}}
.js .f4 .hero::before{animation:streifen-lauf 3.2s cubic-bezier(.15,.5,.2,1) 1 both}
.js .f4 .produkte.laeuft::before,.js .f4 .bald.laeuft::before{animation:streifen-lauf 2.4s cubic-bezier(.15,.5,.2,1) 1 both}
.js .f4 .band.da{animation:streifen-zurueck 2s cubic-bezier(.15,.5,.2,1) 1 both}

@keyframes faellt{0%{transform:translateY(-120vh) rotate(-14deg)}70%{transform:translateY(16px) rotate(1.5deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes von-rechts{0%{transform:translateX(70vw) rotate(25deg);opacity:0}60%{transform:translateX(-20px) rotate(3deg);opacity:1}100%{transform:translateX(0) rotate(5deg)}}
@keyframes plopp{0%{transform:scale(0) rotate(14deg)}70%{transform:scale(1.35) rotate(22deg)}100%{transform:scale(1) rotate(14deg)}}
@keyframes stempel{0%{transform:scale(3) rotate(-25deg);opacity:0}60%{transform:scale(.92) rotate(-3deg);opacity:1}100%{transform:scale(1) rotate(-5deg)}}
@keyframes wort{0%{transform:translateY(40px) rotate(6deg);opacity:0}60%{transform:translateY(-6px) rotate(-2deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes wackelt{0%,100%{transform:rotate(-3deg)}30%{transform:rotate(3deg) scale(1.06)}60%{transform:rotate(-6deg)}}
.js .f4 .hero-kasten{animation:faellt .9s cubic-bezier(.3,1.3,.5,1) both}
.js .f4 .hero-fenster{animation:von-rechts 1s cubic-bezier(.3,1.3,.5,1) .5s both}
.js .f4 .herz{animation:plopp .5s cubic-bezier(.3,1.6,.5,1) 1.2s both}
.js .f4 .hero-fenster .sticker{animation:stempel .45s cubic-bezier(.3,1.5,.5,1) 1.5s both}
.js .f4 .hero-fenster .krakel{animation:wort .5s cubic-bezier(.3,1.4,.5,1) 1.8s both}
.js .f4 h1 .w{display:inline-block;animation:wort .55s cubic-bezier(.3,1.4,.5,1) both}
.js .f4 h1 .mark.w{animation-name:wort}

.js .f4 .rein{opacity:0;transition:transform .7s cubic-bezier(.3,1.3,.5,1),opacity .4s}
.js .f4 .rein.da{opacity:1;transform:none}
.js .f4 .ueber-bild.rein{transform:translateX(-60vw) rotate(-20deg)}
.js .f4 .ueber-bild.rein.da{transform:rotate(-3deg)}
.js .f4 .prose p.rein{transform:translateX(60px)}
.js .f4 .prose p.rein.da{transform:none}
.js .f4 .zettel.rein{transform:translateY(60px) rotate(12deg) scale(.6)}
.js .f4 .zettel.rein.da{transform:rotate(2.5deg)}
.js .f4 h2.rein{transform:translateX(-40vw) rotate(-10deg)}
.js .f4 .produkte h2.rein.da{transform:rotate(1.5deg)}
.js .f4 .regal h2.rein.da{transform:rotate(-1deg)}
.js .f4 .kopf p.rein{transform:translateY(60px) rotate(4deg)}
.js .f4 .kopf p.rein.da{transform:rotate(1deg)}
.js .f4 .card.rein{transform:translateY(-80vh) rotate(-20deg)}
.js .f4 .card.links.rein.da{transform:rotate(-5deg)}
.js .f4 .card.mitte.rein.da{transform:rotate(3deg)}
.js .f4 .card.rechts.rein.da{transform:rotate(-2deg)}
.js .f4 .mini.rein{transform:scale(.3) rotate(10deg)}
.js .f4 .mini.rein.da:nth-child(odd){transform:rotate(-1.6deg)}
.js .f4 .mini.rein.da:nth-child(even){transform:rotate(1.4deg)}
.js .f4 .mini.rein.da:nth-child(3){transform:rotate(2.2deg)}
.js .f4 .bald-text.rein{transform:translateX(-50vw) rotate(-8deg)}
.js .f4 .bald-text.rein.da{transform:rotate(-1.2deg)}
.js .f4 .tuer.rein{transform:translateY(-200px) rotate(40deg)}
.js .f4 .tuer.rein.da{transform:rotate(8deg)}
.js .f4 .postkarte.rein{transform:translateX(-80vw) rotate(-30deg)}
.js .f4 .postkarte.rein.da{transform:rotate(-7deg)}
.js .f4 .post-text.rein{transform:translateX(50vw) rotate(10deg)}
.js .f4 .post-text.rein.da{transform:rotate(2deg)}
.js .f4 .band.rein{transform:skewY(-3deg) scaleX(0);transform-origin:left}
.js .f4 .band.rein.da{transform:skewY(-3deg) scaleX(1)}

.js .f4 .card.da:hover{transform:rotate(0) scale(1.03);box-shadow:18px 18px 0 var(--k);z-index:9}
.js .f4 .mini.da:hover{transform:rotate(0) scale(1.04)}
@keyframes huepf{0%,100%{transform:translate(-2px,-2px)}50%{transform:translate(-2px,-10px)}}
.js .f4 .btn:hover{animation:huepf .4s ease-in-out}
@keyframes ruettel{0%,100%{transform:rotate(8deg)}20%{transform:rotate(4deg) translateX(-4px)}40%{transform:rotate(12deg) translateX(4px)}60%{transform:rotate(6deg)}80%{transform:rotate(10deg)}}
.js .f4 .tuer.ruettelt{animation:ruettel .5s}

@media(prefers-reduced-motion:reduce){
  .js .f4 *,.js .f4 *::before,.js .f4 *::after{animation:none !important;transition:none !important}
  .js .f4 .rein{opacity:1}
}

.ruhig .f4 .hero::before,.ruhig .f4 .produkte.laeuft::before,.ruhig .f4 .bald.laeuft::before,.ruhig .f4 .band.da{animation:none}