@font-face{font-family:Nunito;src:url(assets/nunito.ttf)}@font-face{font-family:Baloo;src:url(assets/baloo.ttf)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;font:17px Nunito,sans-serif;background:var(--bg);color:var(--ink);--bg:#fff9ef;--ink:#20201b;--accent:#ff633a;--x:0px;--y:0px}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #fa3a85;outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Baloo,sans-serif;line-height:1.02}h1{font-size:clamp(65px,7.4vw,112px);letter-spacing:-4px}h2{font-size:clamp(38px,4.5vw,64px);letter-spacing:-2px}h3{font-size:38px}p{line-height:1.65}em{font-style:normal;color:var(--accent)}.nav{display:flex;align-items:center;justify-content:space-between;padding:25px 5%;gap:24px;position:relative;z-index:3;border-bottom:1px solid #20201b25}.brand{font:900 30px/1 Baloo;letter-spacing:-1px}.brand span{display:block;font:900 10px/1.5 Nunito;letter-spacing:2.5px}.links{display:flex;gap:32px;font-weight:850;font-size:14px}.motion{font-size:11px;background:none;border:1px solid currentColor;border-radius:30px;padding:9px 12px;opacity:.7}.eyebrow{font-size:11px;font-weight:950;letter-spacing:2px;display:block;margin-bottom:23px}.hero{min-height:740px;position:relative;padding:64px 5% 65px;overflow:hidden}.hero p{max-width:465px;margin-top:25px;font-size:18px}.actions{display:flex;gap:25px;align-items:center;margin-top:32px}.button{background:var(--ink);color:var(--bg);border:2px solid var(--ink);border-radius:99px;padding:15px 25px;font-weight:900;display:inline-flex;gap:26px;align-items:center;transition:transform .25s,box-shadow .25s}.button:hover{transform:translateY(-5px);box-shadow:0 8px 0 var(--accent)}.textlink{font-size:14px;font-weight:900;border-bottom:1px solid currentColor;padding-bottom:4px}.dog{width:100%;mix-blend-mode:multiply}.art{position:relative}.bubble{font-family:Baloo;font-size:23px;line-height:1.15;background:#fff;color:#20201b;border:2px solid #20201b;border-radius:50%;padding:22px 25px;position:absolute;box-shadow:4px 5px 0 #20201b;transform:rotate(8deg);z-index:2}.bubble:after{content:'';position:absolute;width:18px;height:18px;background:#fff;border-bottom:2px solid;border-right:2px solid;bottom:-8px;left:30%;transform:rotate(35deg)}.footnote{position:absolute;bottom:20px;left:5%;right:5%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;font-weight:900}.v1 .hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;background:radial-gradient(#20201b12 1px,transparent 1px);background-size:12px 12px}.v1 .copy{z-index:2}.v1 h1 em{display:inline-block;transform:rotate(-3deg);background:#ffe04b;padding:0 14px;color:#20201b}.v1 .art{height:580px}.v1 .dog{width:390px;position:absolute;left:10%;top:30px;transform:translate(var(--x),var(--y)) rotate(-6deg)}.v1 .sun{width:430px;height:430px;border-radius:50%;background:#ffc7ce;position:absolute;top:70px;left:5%}.v1 .word{position:absolute;top:0;left:14%;font:900 72px Baloo;color:#ff633a;transform:rotate(10deg)}.v1 .bubble{right:0;top:150px;max-width:180px;animation:bob 4s ease-in-out infinite}.v1 .spark{position:absolute;left:0;top:210px;font-size:100px;color:#7b68df;animation:spin 24s linear infinite}.smallcover{position:absolute;right:0;bottom:0;width:160px;transform:rotate(12deg);border:4px solid #20201b;box-shadow:8px 8px 0 #20201b}.smallcover img{width:100%;display:block}.label{position:absolute;left:12%;bottom:35px;font-size:10px;font-weight:950;letter-spacing:1px;transform:rotate(-6deg);background:#ffe04b;padding:13px}.ticker{overflow:hidden;background:var(--accent);color:var(--ink);padding:15px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);font:900 22px Baloo;white-space:nowrap;letter-spacing:2px}.ticker div{width:max-content;animation:marquee 28s linear infinite}.intro,.comics,.shop{padding:90px 7%}.introgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:10%}.introgrid p{margin-bottom:20px}.sectionhead{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:48px}.tag{font-size:10px;letter-spacing:1px;border:1px solid currentColor;padding:10px 15px;border-radius:30px;white-space:nowrap}.comics{background:#f2ecdf}.comicgrid{display:grid;grid-template-columns:.9fr 1fr;gap:10%;align-items:center}.cover{background:none;border:0;max-width:350px;justify-self:center;transform:rotate(-5deg);transition:transform .4s}.cover:hover{transform:rotate(0deg) scale(1.03)}.cover img{width:100%;box-shadow:12px 14px 0 #20201b}.comiccopy h3{font-size:58px}.comiccopy p{max-width:460px;margin:22px 0}.small{font-size:12px!important;opacity:.7}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-bottom:25px}.product{border:0;padding:0;text-align:left;background:none}.productart{height:310px;background:#ffdf76;display:grid;place-items:center;overflow:hidden;border-radius:15px;transition:transform .3s}.product:nth-child(2) .productart{background:#c7b9ee}.product:nth-child(3) .productart{background:#a8d7bc}.product:hover .productart{transform:translateY(-8px) rotate(2deg)}.product h3{font:900 23px Baloo;margin-top:22px;display:flex;justify-content:space-between}.product p{font-size:14px}.book img{height:250px;transform:rotate(-8deg);box-shadow:8px 8px 0 #20201b}.shirt{height:225px;width:235px;background:#fff;clip-path:polygon(22% 0,38% 0,44% 6%,56% 6%,62% 0,78% 0,100% 20%,85% 40%,75% 30%,75% 100%,25% 100%,25% 30%,15% 40%,0 20%);display:grid;place-items:center;transform:rotate(7deg)}.shirt img{height:140px}.mug{height:160px;width:145px;background:white;border-radius:4px 4px 35px 35px;position:relative;transform:rotate(-7deg);box-shadow:6px 12px 0 #20201b18}.mug:after{content:'';position:absolute;width:45px;height:85px;border:15px solid white;border-radius:0 35px 35px 0;right:-40px;top:25px}.mug img{height:140px;display:block;margin:auto}footer{padding:60px 7%;background:var(--ink);color:var(--bg);display:flex;gap:25px;align-items:center;flex-wrap:wrap}footer small{width:100%;font-size:10px;opacity:.6;margin-top:20px}footer a{margin-left:auto;font-size:13px}.v2{--bg:#191c39;--ink:#fff6e6;--accent:#ff9eab}.v2 .nav{border-color:#ffffff25}.v2 .hero{text-align:center;min-height:970px;padding-top:50px;background:radial-gradient(ellipse at 50% 60%,#424475,transparent 60%)}.v2 h1{font-size:105px;position:relative;z-index:2}.v2 h1 em{font-family:Georgia,serif;font-style:italic;font-weight:400}.v2 .stage{height:475px;position:relative;width:650px;margin:-20px auto 0}.v2 .planet{width:420px;height:420px;background:#fff5df;border-radius:50%;position:absolute;left:110px;top:35px;box-shadow:0 0 100px #ffaab333}.v2 .dog{position:absolute;width:335px;left:155px;top:35px;transform:translate(var(--x),var(--y));border-radius:45%}.v2 .bubble{right:-20px;top:180px;width:190px;background:#ffe2a8;animation:bob 6s ease-in-out infinite}.v2 .bubble:after{background:#ffe2a8}.v2 .star{position:absolute;font-size:60px;color:#ffc974;animation:spin 30s linear infinite}.v2 .star1{left:0;top:80px}.v2 .star2{right:60px;bottom:30px}.v2 .hero-bottom{display:flex;align-items:center;justify-content:space-between;text-align:left;margin:20px auto 0;max-width:1080px}.v2 .hero-bottom p,.v2 .actions{margin:0}.v2 .orbit{border:1px solid #ffffff18;width:120%;height:420px;position:absolute;border-radius:50%;left:-10%;top:290px;transform:rotate(-15deg)}.v2 .o2{transform:rotate(20deg)}.v2 .comics{background:#252947}.v2 .cover img{box-shadow:15px 15px 0 #ff9eab}.v2 .button{background:#ff9eab;color:#191c39;border-color:#ff9eab}.v2 .ticker{background:#ff9eab;color:#191c39}.v3{--bg:#f9f5eb;--ink:#101010;--accent:#fd522d}.v3 h1,.v3 h2,.v3 .brand{font-family:Arial,sans-serif;font-weight:950;letter-spacing:-6px}.v3 .brand{letter-spacing:-2px}.v3 .hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;padding-top:45px;min-height:810px}.v3 h1{font-size:clamp(80px,9.2vw,145px);line-height:.86}.v3 h1 em{font-style:italic}.v3 .copy{position:relative;z-index:2}.v3 .art{height:650px}.v3 .panel{position:absolute;inset:15px 0 10px 0;background:#bac6fb;border:3px solid black;transform:rotate(5deg);overflow:hidden;box-shadow:14px 14px 0 #101010}.v3 .dog{height:580px;width:auto;position:absolute;left:5%;top:30px;transform:translate(var(--x),var(--y)) rotate(-8deg)}.v3 .bubble{font-family:Arial;font-weight:900;top:45px;right:15px;max-width:200px;transform:rotate(-7deg)}.v3 .issue{position:absolute;right:-15px;bottom:15px;background:#d8fb57;border:2px solid black;padding:25px;font:900 19px/1 Arial;transform:rotate(-10deg);animation:bob 5s ease-in-out infinite}.v3 .button{border-radius:0;box-shadow:5px 5px 0 #fd522d}.v3 .intro{border-bottom:3px solid black}.v3 h2{font-size:55px;letter-spacing:-3px}.v3 .productart{border-radius:0;border:2px solid #101010}.v3 .comics{background:#d8fb57}.v3 .ticker{transform:rotate(-1deg);background:#fd522d}.v4{--bg:#f5f4dc;--ink:#183f34;--accent:#ed6847}.v4 .hero{min-height:960px;text-align:center;padding-top:45px;background:#dfefec}.v4 h1{font-size:100px;position:relative;z-index:2}.v4 h1 em{color:#183f34}.v4 .hero p{margin:20px auto;position:relative;z-index:2}.v4 .actions{justify-content:center;position:relative;z-index:2}.v4 .world{height:500px;position:relative;margin-top:-15px}.hill{position:absolute;bottom:-300px;width:95%;height:570px;border-radius:50%;background:#a6c494;left:-25%;transform:rotate(15deg)}.h2{background:#6fa58a;left:45%;bottom:-330px;transform:rotate(-18deg)}.path{position:absolute;width:200px;height:430px;background:#f5d59b;border-radius:50%;bottom:-220px;left:43%;transform:rotate(30deg)}.v4 .dog{width:305px;position:absolute;top:80px;left:calc(50% - 153px);transform:translate(var(--x),var(--y));z-index:1}.cloud{width:150px;height:55px;background:white;border-radius:100px;position:absolute;top:50px;left:5%;opacity:.7;animation:cloud 14s ease-in-out infinite alternate}.cloud:before{content:'';position:absolute;width:90px;height:80px;border-radius:50%;background:white;top:-25px;left:25px}.c2{left:auto;right:5%;top:0;transform:scale(.7);animation-delay:-7s}.sign{position:absolute;top:250px;left:5%;background:#ffcb78;color:#183f34;border:2px solid #183f34;padding:17px 23px;transform:rotate(-8deg);font-weight:900;box-shadow:5px 5px 0 #183f34;z-index:2}.sign2{left:auto;right:5%;top:300px;transform:rotate(8deg);background:#f7b5b5}.flower{position:absolute;font-size:70px;color:#ed6847;bottom:10px;left:14%;animation:spin 30s linear infinite}.f2{left:auto;right:22%;font-size:45px;color:#ffe4a2}.v4 .comics{background:#e1e9cb}.v4 .ticker{background:#183f34;color:#f5f4dc}.v4 .cover img{box-shadow:12px 14px 0 #183f34}.v4 .productart{border-radius:50% 50% 12px 12px}.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}dialog{border:0;border-radius:18px;padding:0;width:min(760px,94vw);max-height:94vh;background:var(--bg);color:var(--ink)}dialog::backdrop{background:#1119;backdrop-filter:blur(8px)}.dialogbar{display:flex;justify-content:space-between;align-items:center;padding:15px 25px;position:sticky;top:0;background:var(--bg);z-index:2}.dialogbar button{border:0;background:none;font-size:25px}#page{display:block;width:100%}.readercontrols{display:flex;justify-content:space-between;align-items:center;padding:20px;background:var(--bg);position:sticky;bottom:0}.readercontrols button{border:1px solid currentColor;border-radius:30px;background:none;padding:8px 20px}.readercontrols button:disabled{opacity:.3;cursor:default}.dialogcopy{padding:40px}.dialogcopy p{margin:20px 0}.paused *{animation-play-state:paused!important}.paused .dog{transform:none!important}.paused html{scroll-behavior:auto}@keyframes bob{50%{translate:0 -13px;rotate:-3deg}}@keyframes spin{to{rotate:360deg}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes cloud{to{translate:35px 12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}.dog{transform:none!important}.reveal{opacity:1;transform:none}}@media(max-width:800px){.nav{padding:20px 6%;flex-wrap:wrap;gap:15px}.links{order:3;width:100%;justify-content:space-between;gap:10px;font-size:12px}.motion{font-size:10px}h1{font-size:63px;letter-spacing:-2px}.hero{padding:40px 6% 60px;min-height:unset}.hero p{font-size:16px}.actions{gap:18px;flex-wrap:wrap}.button{font-size:14px;padding:12px 20px}.v1 .hero,.v3 .hero{display:block}.v1 .art{height:450px;margin-top:25px}.v1 .dog{width:270px;left:5%;top:45px}.v1 .sun{width:310px;height:310px;top:65px;left:0}.v1 .word{font-size:54px}.v1 .bubble{font-size:17px;width:125px;top:120px;right:0;padding:17px}.v1 .spark{font-size:60px;left:auto;right:0;top:30px}.smallcover{width:105px;bottom:10px}.label{font-size:8px;left:0;bottom:20px}.v2 .hero{min-height:850px;padding-top:35px}.v2 h1{font-size:64px}.v2 .stage{width:100%;height:390px;margin-top:0}.v2 .planet{width:300px;height:300px;left:calc(50% - 150px);top:35px}.v2 .dog{width:240px;left:calc(50% - 120px);top:40px}.v2 .bubble{right:0;top:240px;font-size:16px;width:150px;padding:15px}.v2 .star1{font-size:40px;left:0}.v2 .star2{right:20px;font-size:35px;bottom:0}.v2 .hero-bottom{display:block;text-align:center;margin-top:0}.v2 .hero-bottom p{margin:0 auto}.v2 .actions{justify-content:center;margin-top:25px}.v3 .hero{min-height:unset}.v3 h1{font-size:85px;letter-spacing:-5px}.v3 .art{height:485px;margin-top:25px}.v3 .panel{inset:10px 10px 30px}.v3 .dog{height:430px;left:5%;top:25px}.v3 .bubble{font-size:18px;max-width:160px;top:20px;padding:18px}.v3 .issue{font-size:15px;right:0;bottom:25px;padding:20px}.v3 h2{font-size:40px;letter-spacing:-2px}.v4 .hero{min-height:900px}.v4 h1{font-size:66px}.v4 .world{margin-top:20px;height:430px}.v4 .dog{width:240px;left:calc(50% - 120px);top:60px}.sign{font-size:11px;padding:12px;left:0;top:300px}.sign2{right:0;top:350px}.cloud{scale:.6;left:-15px}.c2{right:-15px}.hill{width:150%;left:-85%;bottom:-345px}.h2{left:40%;bottom:-380px}.path{bottom:-280px;width:140px;left:35%}.flower{font-size:45px;left:8%;bottom:50px}.f2{right:8%;bottom:0}.intro,.comics,.shop{padding:60px 6%}.introgrid,.comicgrid{grid-template-columns:1fr;gap:30px}.sectionhead{display:block;margin-bottom:30px}.tag{display:inline-block;margin-top:20px}.comiccopy h3{font-size:44px}.cover{max-width:230px}.products{grid-template-columns:1fr}.productart{height:300px}.product{margin-bottom:20px}.footnote{font-size:7px;letter-spacing:1px}.ticker{font-size:17px}footer{padding:40px 6%;display:block}footer p,footer a,footer small{display:block;margin-top:20px} .introgrid h2{margin-bottom:8px}}
body{overflow-x:hidden}

/* Zugänglichkeit und robuste Interaktion der weiterentwickelten Vorlage. */
@font-face{font-family:Nunito;src:url(assets/nunito.ttf) format('truetype');font-weight:200 1000;font-display:swap}
@font-face{font-family:Baloo;src:url(assets/baloo.ttf) format('truetype');font-weight:400 800;font-display:swap}
[hidden]{display:none!important}
img{max-width:100%;height:auto}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.skiplink{position:fixed;top:12px;left:12px;padding:12px 20px;background:var(--bg);border:2px solid var(--ink);border-radius:30px;z-index:20;transform:translateY(-150%)}
.skiplink:focus{transform:none}
.motion{min-height:44px;opacity:1}
.motion:disabled{cursor:default}
.links a{display:inline-flex;align-items:center;min-height:44px}
.reveal{opacity:1;transform:none}
.reveal.pending{opacity:0;transform:translateY(24px)}
.reveal:target,.reveal:focus-within,.paused .reveal.pending{opacity:1;transform:none}
.paused{scroll-behavior:auto}
.paused *{transition:none!important}
.draft{display:block;font-size:12px;font-weight:800;letter-spacing:.3px;margin-top:12px}
.introgrid .draft{margin-top:0;margin-bottom:16px}
.shopnote{max-width:620px;margin-bottom:32px}
.product-title{font:800 23px Baloo;line-height:1.2;margin-top:22px;display:flex;justify-content:space-between;gap:12px}
.product-description{display:block;font-size:14px;line-height:1.65;margin-top:8px}
.product{border-radius:20px;min-width:0}
.small{opacity:1}
.dialog-open{overflow:hidden}
dialog{max-height:calc(100dvh - 24px);max-width:calc(100vw - 24px)}
#reader[open]{display:flex;flex-direction:column;overflow:hidden;height:min(960px,calc(100dvh - 24px))}
.dialogbar,.readercontrols{flex-shrink:0;position:static;gap:12px}
.dialogbar button{min-width:44px;min-height:44px;flex-shrink:0;border-radius:50%}
.dialogbar strong{font-size:16px;line-height:1.35}
.readerbody{overflow:auto;min-height:0;overscroll-behavior:contain;scroll-behavior:auto}
.reader-help{font-size:12px;padding:8px 20px;text-align:center}
.readercontrols button{min-height:44px;padding:8px 16px;font-size:14px}
#pagecount{font-size:13px;font-weight:800;text-align:center}
#pageerror{padding:20px}
.transcript{padding:20px;border-top:1px solid #493c3325;font-size:15px;line-height:1.65}
.transcript summary{cursor:pointer;font-weight:800;min-height:44px}
.transcript p+p{margin-top:14px}
@media(prefers-reduced-motion:reduce){.reveal.pending{opacity:1;transform:none}}
@media(max-width:600px){
  .dialogbar{padding:8px 12px}
  .readercontrols{padding:12px 10px;gap:6px}
  .readercontrols button{padding:8px 12px;font-size:13px}
  .dialogcopy{padding:24px}
  .dialogcopy h2{font-size:36px}
  .introgrid,.comicgrid{gap:32px}
  .textlink{line-height:1.8}
  .productart{height:280px}
}