@font-face{font-family:"Maru";font-weight:400;font-display:swap;src:url(fonts/m-plus-rounded-1c-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Maru";font-weight:700;font-display:swap;src:url(fonts/m-plus-rounded-1c-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Maru";font-weight:800;font-display:swap;src:url(fonts/m-plus-rounded-1c-latin-800-normal.woff2) format("woff2")}
:root{
 --cream:#fff8ef;--paper:#fff8ef;--paper2:#ffefd9;--ink:#4a3226;--muted:#7b6457;
 --pink:#ff8fab;--pink2:#ffe3ea;--mint:#bfeedd;--mint2:#e3f8ef;--teal:#5cc4a4;--butter:#fff1c2;--sand:#fff1c2;
 --lav:#e3defc;--lav2:#efecff;--sky:#cfe7ff;--sky2:#e6f2ff;--moon:#fff3a8;--plum:#ff6f96;--night:#4b4785;--line:#4a3226
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Maru,"Hiragino Maru Gothic ProN","Arial Rounded MT Bold",system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;font-size:17px;overflow-x:hidden;
 background-image:radial-gradient(#ffd9e3 1.4px,transparent 1.6px);background-size:26px 26px}
h1,h2,h3{font-family:Maru,sans-serif;font-weight:800;line-height:1.2;letter-spacing:.01em}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px;position:relative}
.hand,.kicker{display:inline-block;font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;background:var(--butter);border:2.5px solid var(--line);border-radius:999px;padding:4px 14px;margin-bottom:14px;color:var(--ink)}

/* Navigation */
nav{position:sticky;top:0;z-index:40;background:rgba(255,248,239,.95);backdrop-filter:blur(6px);border-bottom:3px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.brand{font-weight:800;font-size:21px;text-decoration:none;display:flex;align-items:center;gap:8px}
.brand svg{width:44px;height:44px}
nav ul{display:flex;gap:18px;list-style:none;font-size:15px;font-weight:700}
nav ul a{text-decoration:none;color:var(--muted);padding:4px 10px;border-radius:999px}
nav ul a:hover{background:var(--pink2);color:var(--ink)}

/* Sticker-Buttons */
.btn{display:inline-block;background:var(--pink);color:#fff;text-decoration:none;font-weight:800;padding:12px 24px;border-radius:999px;font-size:15px;border:3px solid var(--line);box-shadow:0 5px 0 var(--line);transition:transform .15s,box-shadow .15s;text-shadow:0 1px 0 rgba(74,50,38,.25)}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--line)}
.btn.ghost{background:#fff;color:var(--ink);text-shadow:none}

/* Wackel-Animationen */
@keyframes wobble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes drip{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes twinkle{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
.bot{transform-box:fill-box;transform-origin:50% 100%;animation:wobble 2.6s ease-in-out infinite}
.bot.b2{animation:hop 1.8s ease-in-out infinite}.bot.b3{animation-delay:-1.2s}
.drop{animation:drip 1.4s linear infinite}.drop.d2{animation-delay:-.5s}.drop.d3{animation-delay:-1s}
.kauz-float{animation:float 4s ease-in-out infinite}
.eyes{transform-box:fill-box;transform-origin:center;animation:blink 5s infinite}
.spark{animation:twinkle 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.spark:nth-child(2n){animation-delay:-1.1s}.spark:nth-child(3n){animation-delay:-.6s}
@media (prefers-reduced-motion:reduce){.bot,.drop,.kauz-float,.eyes,.spark{animation:none}}

/* Hero */
.hero,.page-hero{background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 70%);position:relative;padding:70px 0 0;overflow:hidden;border-bottom:3px solid var(--line)}
.moon{position:absolute;width:120px;height:120px;border-radius:50%;background:var(--moon);border:3px solid var(--line);top:50px;left:54%}
.cloud{position:absolute;background:#fff;border:3px solid var(--line);border-radius:60px}
.cloud.c1{width:200px;height:56px;top:110px;left:-40px}.cloud.c2{width:170px;height:50px;top:210px;right:5%}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;z-index:2;padding-bottom:10px}
.hero-card{background:#fff;padding:34px;border-radius:32px;border:3px solid var(--line);box-shadow:0 8px 0 var(--line);position:relative}
.tape{position:absolute;width:90px;height:26px;background:var(--pink2);border:2px dashed var(--pink);top:-14px;left:50%;transform:translateX(-50%) rotate(-4deg);border-radius:6px}
.hero h1{font-size:clamp(34px,5vw,58px)}
.hero h1 em,.page-hero h1 em{font-style:normal;color:var(--plum);background:linear-gradient(transparent 62%,var(--butter) 62%)}
.lead,.hero p.lead{font-size:18px;color:var(--muted);margin:16px 0 24px}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.frames{position:relative;height:430px}
.frame{position:absolute;width:52%;background:#fff;padding:10px 10px 38px;border:3px solid var(--line);border-radius:18px;box-shadow:0 7px 0 var(--line)}
.frame img{width:100%;display:block;border-radius:10px}
.frame span{position:absolute;bottom:8px;left:14px;font-weight:800;font-size:15px;color:var(--muted)}
.frame.f1{left:0;top:60px;transform:rotate(-6deg)}.frame.f2{right:0;top:0;transform:rotate(5deg)}
.scene{display:block;width:100%;height:auto;margin-top:-20px;position:relative;z-index:3}
.scene path:nth-of-type(1){fill:var(--lav)}.scene path:nth-of-type(2){fill:var(--mint)}.scene path:nth-of-type(3){fill:var(--cream)}

/* Maskottchen */
.mascot{display:flex;align-items:flex-end;gap:14px;margin-top:22px}
.mascot svg{width:110px;height:120px;flex:none}
.bubble{position:relative;background:var(--butter);border:3px solid var(--line);border-radius:22px;padding:12px 16px;font-size:15px;font-weight:700;line-height:1.5}
.bubble::before{content:"";position:absolute;left:-14px;bottom:18px;border:10px solid transparent;border-right:12px solid var(--line)}
.bubble::after{content:"";position:absolute;left:-9px;bottom:20px;border:8px solid transparent;border-right:10px solid var(--butter)}
.kauz-corner{position:absolute;right:20px;top:-58px;width:96px;height:104px;z-index:5}
.hero-mascot{position:absolute;left:-30px;bottom:-30px;width:120px;height:130px;z-index:4}

section{padding:84px 0;position:relative}
h2{font-size:clamp(28px,4vw,44px);margin-bottom:16px;max-width:820px}
.intro{font-size:18px;color:var(--muted);max-width:720px}
.divider{display:none}

/* Karten allgemein */
.mate,.step,.how div,.loopline div,.card,.facts div,.steps div,.faq details,.label,.legal .sheet,.rarity,.vw-field,.portrait,.gallery figure{border:3px solid var(--line);border-radius:24px;box-shadow:0 6px 0 var(--line);background:#fff}

/* Baumhelfer */
.helfer{background:var(--mint2)}
.crew{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.mate{padding:18px 18px 22px;text-align:center}
.mate:nth-child(odd){transform:rotate(-1.5deg)}.mate:nth-child(even){transform:rotate(1.5deg)}
.mate svg{width:120px;height:120px;display:block;margin:0 auto 6px}
.mate h3{font-size:21px;margin-bottom:4px}.mate p{font-size:15px;color:var(--muted)}
.loopline{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.loopline div{padding:18px 22px;background:var(--butter)}
.loopline div[style]{background:var(--pink)!important;color:#fff!important}
.loopline div[style] p{color:#fff!important}
.loopline h3{font-size:19px;margin-bottom:4px}.loopline p{font-size:15px;color:var(--muted)}

/* Kunst */
.kunst{background:var(--lav2)}
.kunst .intro{color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:44px}
.gallery figure{padding:10px 10px 14px;position:relative;transition:transform .25s;min-width:0}
.gallery figure:nth-child(odd){transform:rotate(-1.5deg)}.gallery figure:nth-child(even){transform:rotate(1.5deg)}
.gallery figure:hover{transform:rotate(0) translateY(-4px)}
.gallery img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;border-radius:14px}
.gallery figcaption{font-weight:800;font-size:15px;margin-top:6px;color:var(--ink)}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.how div{padding:20px 22px}.how h3{font-size:20px;margin-bottom:4px}.how p{color:var(--muted);font-size:15px}

/* Virtuelle Wiese – Nacht */
.vwiese{background:var(--night);color:#fff;border-top:3px solid var(--line);border-bottom:3px solid var(--line)}
.vwiese .intro{color:#e3e0ff}.vwiese .kicker{background:var(--moon)}
.vw-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;margin-top:40px;align-items:start}
.vw-field{padding:16px;background:var(--cream)}
.vw-field svg{display:block;width:100%;height:auto}
.vw-legend{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-bottom:22px;font-size:15px;font-weight:700}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--line);vertical-align:-2px;margin-right:8px}
.dot.c{background:#86c7b6}.dot.u{background:#2f8576}.dot.r{background:#a8a7cc}.dot.s{background:#c9ced6}.dot.g{background:#e9c46a}.dot.e{background:#fff;opacity:.6;width:8px;height:8px;border:0;margin:0 11px 0 3px}
.vw-video{width:100%;display:block;background:#000;border:3px solid var(--line);border-radius:20px;box-shadow:0 6px 0 #2c2960;margin-bottom:24px}
.vw-note{font-size:14px;color:#e3e0ff;margin-top:18px}

/* Künstler */
.kuenstler{background:var(--butter)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.kuenstler .intro{color:var(--muted)}
ul.checks{list-style:none;margin-top:22px}
ul.checks li{padding:7px 0 7px 36px;position:relative;font-weight:700}
ul.checks li::before{content:"";position:absolute;left:0;top:10px;width:22px;height:22px;border-radius:50%;background:var(--teal);border:2.5px solid var(--line)}
ul.checks li.no::before{background:var(--pink)}
.portrait{padding:12px 12px 46px;transform:rotate(2deg);position:relative}
.portrait img{width:100%;display:block;border-radius:14px}
.portrait span{position:absolute;bottom:12px;left:16px;font-weight:800;font-size:15px;color:var(--muted)}

/* Echtheit */
.echtheit{background:var(--cream)}
.label{padding:28px 30px;position:relative;transform:rotate(-1.5deg)}
.label h3{font-size:23px;margin-bottom:12px}
.label .row{display:flex;justify-content:space-between;border-bottom:2px dashed #e6cfc0;padding:9px 0;gap:16px;font-size:15px}
.label .row:last-child{border:0}.label .row b{font-weight:800}
.label .stamp{position:absolute;bottom:-18px;right:20px;font-weight:800;font-size:15px;color:#fff;background:var(--pink);transform:rotate(-8deg);border:3px solid var(--line);padding:4px 14px;border-radius:999px}

/* Mitmachen */
.mitmachen{background:var(--pink2);color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.card{padding:28px 24px;display:flex;flex-direction:column}
.card:nth-child(1){transform:rotate(-1deg)}.card:nth-child(3){transform:rotate(1deg)}
.card h3{font-size:22px;margin-bottom:8px}.card p{color:var(--muted);font-size:15px;flex:1;margin-bottom:22px}
.card .btn{align-self:flex-start}

/* Verein */
.verein{background:var(--mint)}
.verein .intro{color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
.facts div{padding:18px;font-size:15px;font-weight:700}
.facts div:nth-child(even){transform:rotate(1deg)}.facts div:nth-child(odd){transform:rotate(-1deg)}
.facts b{display:block;font-size:34px;font-weight:800;color:var(--plum);margin-bottom:2px}

footer{background:var(--ink);color:#f7e6d8;padding:34px 0 40px;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer a{color:#fff}
footer .bye{display:flex;align-items:center;gap:12px}
footer .bye svg{width:60px;height:64px}

/* Unterseiten */
.page-hero .hero-card{max-width:780px}
.page-hero h1{font-size:clamp(32px,4.6vw,52px)}
.legal{background:var(--cream)}
.legal .sheet{max-width:820px;padding:40px 44px}
.legal h2{font-size:26px;margin:28px 0 8px}.legal h2:first-child{margin-top:0}
.legal h3{font-size:18px;margin:18px 0 4px}
.legal p,.legal li{font-size:16px;color:var(--ink)}.legal ul{margin:6px 0 6px 22px}
.legal a{color:var(--plum)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.steps div{padding:22px 20px}
.steps b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--pink);color:#fff;border:3px solid var(--line);font-size:20px;font-weight:800}
.steps h3{font-size:19px;margin:10px 0 4px}.steps p{font-size:15px;color:var(--muted)}
.faq details{padding:16px 20px;margin-bottom:14px}
.faq summary{font-weight:800;font-size:18px;cursor:pointer}
.faq p{margin-top:8px;color:var(--muted)}

/* Galerie */
.filter{display:flex;flex-wrap:wrap;gap:10px}
.filter button{font:800 14px Maru,sans-serif;border:3px solid var(--line);background:#fff;color:var(--ink);padding:7px 16px;border-radius:999px;cursor:pointer;box-shadow:0 4px 0 var(--line)}
.filter button.on{background:var(--pink);color:#fff}
.gallery.big .meta{font-size:12.5px;color:var(--muted);line-height:1.35;margin-top:2px}
.rar{position:absolute;top:18px;right:18px;font:800 11px Maru,sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;background:#fff;border:2.5px solid var(--line);border-radius:999px;transform:rotate(4deg)}
.rar.u{background:var(--mint)}.rar.r{background:var(--lav)}.rar.s{background:#e9edf2}.rar.g{background:#ffe08a}
.soon .ph{aspect-ratio:2/3;border-radius:14px;background:repeating-linear-gradient(-45deg,var(--pink2),var(--pink2) 10px,#fff 10px,#fff 20px);display:grid;place-items:center;align-content:center;gap:6px}
.soon .ph svg{width:72px;height:78px}.soon .ph span{font-weight:800;font-size:16px;color:var(--muted)}
.rarity{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;padding:28px 30px;margin:34px 0 10px}
.pyr .py{display:grid;grid-template-columns:120px 1fr 44px;align-items:center;gap:10px;margin:5px 0;font-size:13.5px;font-weight:700}
.pyr .pc{text-align:right;font-weight:800}
.pyr .pb{height:14px;border-radius:99px;background:var(--teal);display:block;border:2px solid var(--line)}
.pyr .py:nth-child(n+4) .pb{background:var(--lav)}.pyr .py:nth-child(n+5) .pb{background:#ffe08a}.pyr .py:nth-child(n+6) .pb{background:var(--pink)}

@media (max-width:900px){
 nav ul{display:none}
 .hero .wrap,.split,.vw-grid,.rarity{grid-template-columns:1fr}
 .frames{height:340px}
 .moon{width:80px;height:80px;left:auto;right:20px;top:24px}
 .crew,.steps,.facts{grid-template-columns:1fr 1fr}
 .gallery,.gallery.big{grid-template-columns:repeat(2,minmax(0,1fr))}
 .how,.cards,.loopline{grid-template-columns:1fr}
 section{padding:60px 0}
 nav .btn{padding:9px 14px;font-size:14px}
 .hero-mascot{left:auto;right:-6px;bottom:-40px;width:90px;height:98px}
 .kauz-corner{width:70px;height:76px;top:-44px}
 .legal .sheet{padding:26px 20px}
}
.bubble-r::before{left:auto;right:-14px;border-right:10px solid transparent;border-left:12px solid var(--line)}
.bubble-r::after{left:auto;right:-9px;border-right:8px solid transparent;border-left:10px solid var(--butter)}
section .wrap>.mascot svg{width:90px;height:98px}
@media (max-width:900px){section .wrap>.mascot{position:static!important;margin:0 0 20px!important;max-width:none!important}}
nav ul{gap:4px;font-size:14.5px}nav ul a{white-space:nowrap;padding:4px 9px}
.brand,nav .btn{white-space:nowrap}
@media (max-width:1100px){nav ul li:nth-child(1),nav ul li:nth-child(5){display:none}}