body{--bg:#fff8e9;--ink:#23483b;--accent:#ef684d}.nav{border-bottom:1px solid #23483b25}.hero .dog{position:absolute;transform:translate(var(--x),var(--y));z-index:2}.hero .sun{position:absolute;border-radius:50%;background:#ffda69}.hero .cloud{z-index:1}.hero .hill{z-index:0}.hero .path{z-index:1}.hero .sign{color:#23483b;border-color:#23483b;box-shadow:5px 5px 0 #23483b}.hero .flower{z-index:3}.hero .word{position:absolute;font:900 65px/.9 Baloo;color:#ed6847;z-index:3;transform:rotate(-9deg)}.hero .spark{position:absolute;font-size:65px;color:#ef684d;animation:spin 30s linear infinite;z-index:3}.hero .bubble{border-color:#23483b;box-shadow:4px 5px 0 #23483b;animation:bob 5s ease-in-out infinite;z-index:4}.hero .copy{position:relative;z-index:4}.ticker{background:#23483b;color:#fff8e9}.comics{background:#dce9d1}.cover img{box-shadow:12px 14px 0 #23483b}.productart{border-radius:90px 90px 20px 20px}.button{background:#23483b;color:#fff8e9}.m5 .hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;min-height:790px;background:linear-gradient(90deg,#fff8e9 45%,#e4efdf);padding-top:45px;padding-bottom:105px}.m5 h1{font-size:clamp(70px,7.2vw,104px)}.m5 h1 em{display:inline-block;background:#ffdc69;padding:4px 18px;transform:rotate(-4deg);color:#23483b;line-height:.95}.m5 .terrain{position:absolute;inset:0;pointer-events:none}.m5 .terrain .h1{width:80%;left:40%;bottom:-400px;background:#adc795}.m5 .terrain .h2{left:70%;bottom:-420px;background:#8fba9f}.m5 .terrain .path{left:72%;bottom:-300px;width:150px}.m5 .art{height:570px}.m5 .sun{width:370px;height:370px;left:12%;top:70px;background:#f7bec3}.m5 .dog{width:360px;left:9%;top:70px;rotate:-5deg}.m5 .word{left:12%;top:15px}.m5 .bubble{right:-5px;top:200px;font-size:22px;width:180px}.m5 .sign{top:auto;bottom:0;left:18%;background:#ffdc69;transform:rotate(-5deg)}.m5 .flower{bottom:10px;left:auto;right:3%;font-size:75px}.m5 .spark{left:0;top:210px;color:#eb7c65}.m5 .cloud{left:auto;right:0;top:35px;scale:.7}.m6 .hero{text-align:center;min-height:940px;padding-top:35px;padding-bottom:45px;background:radial-gradient(#e6cdbf 1px,transparent 1px),#fff8e9;background-size:16px 16px}.m6 h1{font-size:90px;position:relative;z-index:4}.m6 h1 em{display:inline-block;background:#ffdc69;transform:rotate(-2deg);padding:0 25px;color:#23483b}.m6 .centerstage{position:relative;height:450px;max-width:1150px;margin:20px auto 0;border-radius:50% 50% 18px 18px;background:#e1eee4;overflow:visible}.m6 .sun{width:330px;height:330px;left:calc(50% - 165px);top:50px}.m6 .dog{width:300px;left:calc(50% - 150px);top:20px}.m6 .hill{height:110px;bottom:0;left:0;width:65%;border-radius:100% 100% 18px 18px;background:#b2c89d;transform:none}.m6 .h2{left:auto;right:0;width:60%;height:80px;background:#8cb69d}.m6 .bubble{top:65px;right:14%;width:190px;font-size:21px}.m6 .floatingcomic{position:absolute;left:8%;top:65px;width:180px;background:#fff8e9;border:3px solid #23483b;transform:rotate(-11deg);box-shadow:7px 7px 0 #23483b;z-index:3;transition:rotate .3s}.floatingcomic:hover{rotate:6deg}.floatingcomic img{width:100%;display:block}.floatingcomic span{display:block;padding:12px 8px;font-size:9px;font-weight:950}.m6 .sign{left:auto;right:4%;top:320px;background:#f5b8bc;font-size:17px;transform:rotate(7deg)}.m6 .spark{left:28%;top:20px;font-size:70px;color:#e57558}.m6 .flower{bottom:20px;left:28%;font-size:50px}.m6 .c1{left:4%;top:0;scale:.6}.m6 .c2{right:3%;top:0;scale:.8}.m6 .hero-bottom{display:flex;align-items:center;justify-content:space-between;max-width:1000px;margin:30px auto 0;text-align:left;gap:30px}.m6 .hero-bottom p,.m6 .actions{margin:0}.m6 .intro{background:#fff8e9}.m6 .comics{background:#f8d6d4}.m6 .ticker{background:#ffdc69;color:#23483b}.m7 .hero{display:grid;grid-template-columns:1fr 1.13fr;align-items:center;min-height:810px;padding:50px 5% 70px;background:#dceddf;gap:4%}.m7 .copy{padding:45px 36px;background:#fff8e9;border-radius:40px 40px 8px 40px;box-shadow:0 12px 0 #23483b0d;transform:rotate(-2deg)}.m7 h1{font-size:85px;line-height:.98}.m7 h1 em{color:#ef684d}.m7 .copy p{font-size:17px;margin-top:22px}.m7 .copy .eyebrow{font-size:9px}.m7 .actions{gap:18px}.m7 .handnote{display:block;margin-top:30px;font:600 16px Baloo;transform:rotate(-4deg)}.m7 .art{height:650px}.m7 .sun{width:390px;height:390px;left:8%;top:100px;background:#f9da74}.m7 .dog{width:345px;left:10%;top:130px;rotate:4deg}.m7 .word{left:9%;top:0;font-size:62px}.m7 .bubble{right:0;top:190px;width:155px;font-size:19px}.m7 .hill{height:170px;width:110%;left:-20%;bottom:0;transform:rotate(8deg);background:#acc597}.m7 .h2{width:80%;left:40%;height:110px;bottom:0;background:#8fb7a0;transform:rotate(-10deg)}.m7 .path{bottom:-30px;left:50%;height:160px;width:100px;background:#f5d59b}.m7 .comicstamp{position:absolute;right:0;bottom:30px;width:150px;background:#fff8e9;padding:8px;border:2px solid #23483b;transform:rotate(10deg);z-index:4;box-shadow:5px 5px 0 #23483b}.comicstamp img{width:100%;display:block}.comicstamp span{display:block;font-size:9px;font-weight:950;padding-top:8px}.m7 .flower{bottom:25px;left:8%;font-size:70px}.m7 .c1{left:auto;right:-30px;top:45px;scale:.7}.m7 .c2{left:0;top:110px;scale:.5}.m7 .ticker{background:#ef684d;color:#fff8e9}.m7 .intro{background:#fff8e9}.m7 .comics{background:#ffe6a5}
@media(max-width:800px){.m5 .hero,.m7 .hero{display:block;padding:35px 6% 65px}.m5 h1{font-size:66px}.m5 .art{height:460px;margin-top:20px}.m5 .sun{width:280px;height:280px;left:0;top:60px}.m5 .dog{width:270px;left:0;top:55px}.m5 .word{font-size:50px;left:4%}.m5 .bubble{right:0;top:185px;width:130px;font-size:17px;padding:16px}.m5 .sign{bottom:5px;left:8%;font-size:12px}.m5 .flower{right:0;bottom:0;font-size:50px}.m5 .spark{left:auto;right:0;top:90px;font-size:45px}.m5 .terrain .h1{left:-20%;width:150%;bottom:-440px}.m5 .terrain .h2{left:40%;bottom:-460px}.m6 .hero{padding:35px 6% 40px;min-height:unset}.m6 h1{font-size:59px;letter-spacing:-2px}.m6 h1 em{padding:0 7px;font-size:52px}.m6 .centerstage{height:540px;margin-top:25px;border-radius:160px 160px 20px 20px}.m6 .sun{width:240px;height:240px;left:calc(50% - 120px);top:55px}.m6 .dog{width:240px;left:calc(50% - 120px);top:50px}.m6 .bubble{right:0;top:280px;width:140px;font-size:17px;padding:15px}.m6 .floatingcomic{width:115px;left:3%;top:340px;transform:rotate(-8deg)}.floatingcomic span{font-size:7px;padding:7px}.m6 .sign{top:455px;right:0;font-size:11px;padding:12px}.m6 .spark{left:0;top:80px;font-size:45px}.m6 .flower{left:55%;bottom:25px;font-size:35px}.m6 .hero-bottom{display:block;text-align:center;margin-top:25px}.m6 .hero-bottom p{font-size:15px}.m6 .actions{justify-content:center;margin-top:22px}.m7 .copy{padding:30px 22px;border-radius:28px;transform:rotate(-1deg)}.m7 h1{font-size:64px;letter-spacing:-2px}.m7 .copy .eyebrow{font-size:8px;letter-spacing:1px}.m7 .handnote{font-size:12px;margin-top:22px}.m7 .art{height:560px;margin-top:35px}.m7 .word{font-size:50px;top:0;left:2%}.m7 .sun{width:275px;height:275px;left:0;top:110px}.m7 .dog{width:270px;left:0;top:125px}.m7 .bubble{right:-5px;top:250px;width:125px;font-size:16px;padding:16px}.m7 .comicstamp{width:105px;right:0;bottom:5px}.m7 .hill{width:120%;height:120px;bottom:20px}.m7 .h2{height:90px;bottom:25px}.m7 .flower{font-size:50px;bottom:10px;left:5%}.m7 .c1{right:0;top:100px;scale:.5}.m7 .c2{display:none}.m7 .path{height:120px;bottom:0;left:40%}.m7 .comicstamp span{font-size:7px}}

/* Variante B: gleiche Bühne, fließende Größen bis zur mobilen Referenz. */
.m6 .dog{height:auto}
.floatingcomic img,.cover img{height:auto}
.introgrid,.comicgrid,.products,.sectionhead,.shopnote,.shop>.small{max-width:1200px;margin-left:auto;margin-right:auto}
.m6 .hero-bottom .actions{flex-shrink:0}
@media(min-width:601px) and (max-width:1000px){
  .m6 h1{font-size:clamp(60px,7.5vw,75px);letter-spacing:-2px}
  .m6 h1 em{font-size:inherit;padding:0}
  .m6 .centerstage{height:440px;border-radius:50% 50% 18px 18px}
  .m6 .dog{width:270px;left:calc(50% - 135px);top:25px}
  .m6 .floatingcomic{width:135px;left:3%;top:110px}
  .m6 .bubble{width:155px;right:2%;top:110px;font-size:18px;padding:18px}
  .m6 .sign{top:330px;right:3%;font-size:13px}
  .m6 .spark{left:24%;top:35px}
  .m6 .flower{left:26%;bottom:20px}
  .m6 .hero-bottom{display:block;text-align:center}
  .m6 .hero-bottom p{max-width:none}
  .m6 .actions{justify-content:center;margin-top:24px}
}
@media(max-width:600px){
  .m6 h1{font-size:clamp(46px,15.1vw,59px);letter-spacing:-2px}
  .m6 h1 em{font-size:clamp(43px,13.3vw,52px);padding:0 7px}
  .hero>.eyebrow{font-size:10px;letter-spacing:1.5px}
  .m6 .hero-bottom .actions{gap:18px}
  .m6 .hero-bottom .textlink{min-height:44px;display:inline-flex;align-items:center}
}
@media(max-width:359px){
  .brand{font-size:26px}
  .motion{font-size:9px;padding:8px}
  .links{font-size:11px}
  .m6 .dog{width:220px;left:calc(50% - 110px)}
  .m6 .floatingcomic{width:100px}
  .m6 .bubble{width:130px;font-size:16px}
}