/* familie3000 · Entwurf C "Regenbogen-Papierwelt" — geteilte Basis (Tokens, Welt, Papier-Bausteine) */
:root{
 --fb:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
 --fd:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
 --fm:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
 --clay:#CC7044;--honey:#D5A13C;--sage:#63A471;--sky:#4D9CC7;--berry:#BB6690;--plum:#8A68AE;
 --clay-s:#AE542C;--clay-d:#9A4622;--clay-soft:#FFE1D1;
 --paper:#FBF6EE;--paper-2:#F6EFE5;--surface:#FFFCF6;
 --ink:#32261F;--ink-2:#5C5048;--ink-3:#6E645D;--line:#E0DAD1;--line-2:#CBC3B8;
 --wa:#3D7A4C;--edge:#8F8276;--danger:#B3372D;--good:#2F7A45;
 --sh:rgba(62,42,26,.18);
 --mood:#CC7044;
 --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
 --top:60px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--fb);font-size:1rem;color:var(--ink);background:#BEE3EF;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100svh;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--fd);letter-spacing:-.02em;font-weight:800}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;-webkit-tap-highlight-color:transparent}
a{color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px #fff;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ───────── WELT (Papierlagen) ───────── */
.world{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#BEE3EF;contain:strict}
.sky,.dusk,.wash{position:absolute;inset:0}
.sky{opacity:0;transition:opacity 1.3s ease}
.sky.on{opacity:1}
.sky.winter{background:linear-gradient(180deg,#9CC7E3 0%,#CFE3F1 52%,#ECE8F4 100%)}
.sky.spring{background:linear-gradient(180deg,#AEDDEF 0%,#D8EEDC 56%,#F5F3D6 100%)}
.sky.summer{background:linear-gradient(180deg,#7FCAEE 0%,#C6E9F4 48%,#FFEFC2 100%)}
.sky.autumn{background:linear-gradient(180deg,#AED5E8 0%,#E8E3DA 54%,#F9DAB6 100%)}
.dusk{opacity:0;transition:opacity 1.3s ease;background:linear-gradient(0deg,rgba(255,150,100,.55) 0%,rgba(255,196,130,.32) 30%,rgba(255,220,170,0) 66%)}
.wash{opacity:0;transition:opacity .9s ease}
.wash.on{opacity:.55}
/* Archiv: warmer Altpapier-Schleier statt teurem filter:sepia auf der ganzen Welt */
.sepia{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;background:radial-gradient(120% 90% at 50% 35%,rgba(233,200,150,.55) 0%,rgba(196,150,92,.62) 60%,rgba(122,82,40,.72) 100%)}
body.arch .sepia{opacity:1}
.frost{position:absolute;left:0;right:0;bottom:0;height:46%;opacity:0;transition:opacity 1.2s ease;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(244,249,252,.5))}
.world.winter .frost{opacity:1}
.ly{position:absolute;left:-6%;right:-6%;bottom:0;transition:transform 1.1s var(--spring) var(--d,0s),opacity .8s ease var(--d,0s)}
.px{position:absolute;inset:0;will-change:transform}
.ly.h{height:58vh;height:58svh}
.ly.h svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 -5px 7px rgba(62,42,26,.2))}
.ly.sunl{top:0;bottom:auto;height:60%;left:0;right:0}
.ly.clouds{top:0;bottom:auto;height:46%;left:-10%;right:-10%}
.ly.rb{bottom:14svh;height:52svh;left:0;right:0}
.ly.rb svg{position:absolute;left:50%;bottom:0;width:min(118vw,1350px);height:auto;transform:translateX(-50%);filter:drop-shadow(0 4px 4px rgba(62,42,26,.2))}
body.pre .ly{transform:translateY(60%);opacity:0}
body.pre .ly.sunl,body.pre .ly.clouds{transform:translateY(-30%)}
body.pre .ly.rb{transform:translateY(40%) scale(.9)}
.sun{position:absolute;left:0;top:0;width:clamp(84px,9vw,150px);aspect-ratio:1;transition:transform 1.6s var(--ease)}
.sun svg{width:100%;height:100%;overflow:visible}
.sun .rays{transform-origin:50% 50%;animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cloud{position:absolute;animation:drift var(--t,90s) ease-in-out infinite alternate;animation-delay:var(--w,0s)}
.cloud svg{display:block;filter:drop-shadow(0 6px 5px rgba(62,42,26,.14))}
@keyframes drift{from{transform:translateX(-5vw)}to{transform:translateX(7vw)}}
.rb .arc{opacity:.92}
.crown{fill:var(--crown,#63A471);transition:fill 1.2s ease}
.mound{fill:var(--mound,#7DB88A);transition:fill 1.2s ease}
.snowcap{opacity:0;transition:opacity 1.2s}
.dec{opacity:0;transition:opacity 1s}
.world.winter .snowcap,.world.winter .dec.w,.world.spring .dec.sp,.world.summer .dec.su,.world.autumn .dec.au{opacity:1}
.world.winter .rb .arc{opacity:.45}
.vil{position:absolute;bottom:calc(var(--vb,15svh));width:clamp(220px,32vw,560px);height:auto}
.vil svg{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 5px rgba(62,42,26,.25))}
.ly.vl{left:0;right:0;bottom:0;height:64svh}
.vil.l{left:1vw}.vil.r{right:1vw}
.wheelw{position:absolute;left:25.36%;top:14%;width:38.57%;aspect-ratio:1;animation:spin 70s linear infinite}
.wheelw svg{width:100%;height:100%;display:block;filter:none}
/* Luftraum: Ballon, Vögel, Drachen — reine transform-Animationen (Compositor) */
.ly.air{top:0;bottom:auto;height:62%;left:0;right:0}
.balloon{position:absolute;left:0;top:13%;width:clamp(46px,4.6vw,78px);animation:fly 110s linear infinite;animation-delay:-38s}
.balloon>div{animation:bob 7s ease-in-out infinite alternate}
.balloon svg{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 5px rgba(62,42,26,.18))}
@keyframes fly{from{transform:translateX(-12vw)}to{transform:translateX(112vw)}}
@keyframes bob{from{transform:translateY(-14px) rotate(-3deg)}to{transform:translateY(16px) rotate(3deg)}}
.birds{position:absolute;left:0;top:26%;width:70px;opacity:0;transition:opacity 1s;animation:fly 46s linear infinite;animation-delay:-20s}
.birds i{position:absolute;width:16px;height:7px;animation:flap .5s ease-in-out infinite alternate}
.birds i:nth-child(2){left:22px;top:12px;animation-delay:-.2s;transform-origin:50% 100%}.birds i:nth-child(3){left:40px;top:2px;animation-delay:-.35s}
.birds svg{display:block;width:100%;height:100%}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(-.45)}}
.world.spring .birds,.world.summer .birds{opacity:1}
.kite{position:absolute;right:16%;top:16%;width:clamp(40px,3.6vw,60px);opacity:0;transition:opacity 1s;transform-origin:50% 0;animation:sway 5s ease-in-out infinite alternate}
.kite svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes sway{from{transform:rotate(-7deg) translateY(-6px)}to{transform:rotate(6deg) translateY(8px)}}
.world.autumn .kite{opacity:1}
.snowman{position:absolute;opacity:0;transition:opacity 1.2s}
.world.winter .snowman{opacity:1}
@media(max-width:699px){.balloon{top:9%;width:44px}.kite{right:4%;top:10%}}
#amb{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:45;pointer-events:none;margin:0;padding:0;border:0;background:transparent;overflow:visible}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;transition:opacity .9s;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25  0 0 0 0 .16  0 0 0 0 .1  0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
body.paused *{animation-play-state:paused!important}
body.arch .grain{opacity:1}
/* Touch-Geräte: keine Parallax-Ebenen auf der GPU halten (spart Speicher, Welt bleibt still und scharf) */
@media(hover:none){.px{will-change:auto}}

/* ───────── PAPIER-BAUSTEINE ───────── */
.sheet{position:relative;background:var(--surface);border-radius:22px;box-shadow:inset 0 1px 0 #fff,0 3px 0 -1px #E8DCC8,0 12px 20px -10px var(--sh),0 28px 40px -24px var(--sh)}
.sheet.tint::before{content:"";position:absolute;inset:5px -6px -8px 6px;border-radius:22px;background:var(--mood);opacity:.35;transform:rotate(1.2deg);z-index:-1;transition:background-color .9s ease}
.kick{font-family:var(--fm);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--clay-d)}
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:999px;font-family:var(--fd);font-weight:800;font-size:1rem;letter-spacing:-.005em;text-decoration:none;position:relative;transition:transform .18s var(--spring),box-shadow .2s,background-color .2s;-webkit-user-select:none;user-select:none}
.btn svg{width:20px;height:20px;flex:none}
.btn.pri{background:var(--clay-s);color:#FFFDFA;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 0 #7E3A1B,0 10px 16px -8px rgba(126,58,27,.7)}
.btn.pri:hover{background:#B85A30;transform:translateY(-2px)}
.btn.pri:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 #7E3A1B,0 4px 8px -4px rgba(126,58,27,.7)}
.btn.wa{background:var(--wa);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 0 #27502F,0 10px 16px -8px rgba(39,80,47,.7)}
.btn.wa:hover{background:#33693F;transform:translateY(-2px)}
.btn.wa:active{transform:translateY(2px);box-shadow:0 1px 0 #27502F}
.btn.gh{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 2px var(--edge),0 2px 0 var(--edge)}
.btn.gh:hover{background:#fff;transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--clay-s),0 3px 0 var(--clay-s)}
.btn.gh:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;pointer-events:none}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--surface);font-family:var(--fm);font-weight:600;font-size:.8rem;letter-spacing:.04em;text-transform:lowercase;color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--edge),0 2px 0 var(--edge),0 8px 12px -8px var(--sh);transition:transform .18s var(--spring),box-shadow .2s,background-color .2s}
.pill svg{width:18px;height:18px;flex:none}
.pill:hover{background:#fff;transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--clay-s),0 3px 0 var(--clay-s),0 10px 14px -8px var(--sh)}
.pill:active{transform:translateY(1px)}
.top{position:fixed;top:0;left:0;right:0;z-index:30;height:var(--top);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 max(12px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand img{width:28px;height:auto;filter:drop-shadow(0 2px 2px rgba(62,42,26,.25))}
.brand .bt{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-family:var(--fd);font-weight:800;font-size:1.05rem;color:var(--ink)}
.brand b i{font-style:normal;font-family:var(--fm);font-weight:600;color:#7A3414}
.brand small{font-size:.8rem;color:#4A3F38;display:none}
.top nav{display:flex;gap:8px}
@media(min-width:900px){.brand small{display:block}}
@media(max-width:560px){.top.sub .brand{min-width:44px}.top.sub .brand .bt{display:none}.top.sub .pill{padding:0 13px}}
/* Jahreszeit-Aufkleber */
.stick{display:inline-block;font-family:var(--fm);font-weight:700;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:7px;background:#fff;color:var(--ink);box-shadow:0 0 0 2px #fff,0 2px 3px 1px rgba(62,42,26,.28)}
.stick.s-winter{background:#2A7399;color:#fff}.stick.s-spring{background:#3D7A4C;color:#fff}.stick.s-summer{background:var(--honey);color:var(--ink)}.stick.s-autumn{background:#96466F;color:#fff}.stick.s-spont{background:#6F4F94;color:#fff}.stick.s-arch{background:#7A5A34;color:#FFF3DC}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 body.pre .ly{transform:none;opacity:1}
 .balloon{left:58%;top:6%}.birds{left:12%}
}