:root{
  --ink:#0e1312; --ink2:#141c1a; --green:#193f37; --green2:#24564b; --bronze:#b98746; --bronze2:#e2b874;
  --paper:#f4f2ed; --muted:#a9b3ae; --line:#ffffff17;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden}
.serif{font-family:Fraunces,Georgia,serif;font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:500;letter-spacing:-.015em}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
a{color:inherit}

nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,4vw,40px);transition:background .3s,backdrop-filter .3s}
nav.solid{background:#0e1312d9;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav img{height:46px;display:block;margin:-6px 0 -6px -6px}
@media(max-width:720px){nav img{height:40px}}
nav ul{display:flex;gap:28px;list-style:none;font-size:.92rem;margin-right:22px}
nav ul a{text-decoration:none;color:var(--muted);transition:color .2s}
nav ul a:hover{color:var(--bronze2)}
nav ul a,.snd{white-space:nowrap}

/* HERO */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;padding:110px 16px 70px;overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 50% 45%,#193f3799,transparent 70%),radial-gradient(ellipse at 50% 120%,#24564b66,transparent 60%),var(--ink)}
.mark{width:min(380px,74vw);height:auto;overflow:visible}
.mark .loop{fill:none;stroke-width:15;stroke-linecap:round}
.mark .star>path:first-child{transform:scale(0) rotate(-90deg);transition:transform .8s cubic-bezier(.2,1.7,.4,1)}
.mark .star>path:last-child{opacity:0;transition:opacity .6s .5s}
.mark .star.on>path:first-child{transform:none;animation:twinkle 3s 1.2s ease-in-out infinite}
.mark .star.on>path:last-child{opacity:1}
@keyframes twinkle{50%{transform:scale(.82) rotate(12deg)}}
.intro{display:flex;justify-content:center;align-items:baseline;font-family:Inter,sans-serif;font-weight:600;font-size:clamp(1.5rem,3.8vw,2.3rem);letter-spacing:-.025em;margin:22px 0 6px;min-height:1.3em;white-space:nowrap}
.w-a,.w-n{color:var(--paper)}
.w-n{display:inline-block;max-width:0;overflow:hidden;vertical-align:baseline;opacity:0;transition:max-width .9s cubic-bezier(.6,0,.2,1),opacity .6s}
.intro.wide .w-n{max-width:6em;opacity:1}
.w-b{color:var(--paper)}
.dot{position:relative;display:inline-block;width:.42em;height:.5em;margin:0 .04em;opacity:0;transition:opacity .2s}
.dot.on{opacity:1}
.dot i{position:absolute;left:50%;bottom:.02em;width:.17em;height:.17em;margin-left:-.085em;border-radius:50%;background:var(--bronze);transition:transform .45s cubic-bezier(.5,-0.6,.5,1)}
.dot svg{position:absolute;left:50%;top:50%;width:.62em;height:.62em;margin:-.36em 0 0 -.31em;fill:var(--bronze2);transform:scale(0) rotate(-120deg);transition:transform .7s cubic-bezier(.2,1.6,.4,1);filter:drop-shadow(0 0 10px #e2b874aa)}
.dot.spark i{transform:scale(0)}
.dot.spark svg{transform:scale(1) rotate(0);animation:tw 2.6s 1s ease-in-out infinite}
@keyframes tw{50%{transform:scale(.8) rotate(45deg)}}
.caret{display:inline-block;width:.06em;height:.9em;margin-left:.06em;background:var(--bronze2);align-self:center;animation:blink .9s steps(2) infinite}
.caret.off{opacity:0;animation:none;transition:opacity .4s}
@keyframes blink{50%{opacity:0}}
.eyebrow{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--bronze2);margin:26px 0 14px}
.hero h1{font-size:clamp(2.6rem,7vw,5.4rem);line-height:1.04;max-width:14ch;margin:0 auto}
.hero h1 em{font-style:italic;padding:0 .08em .16em 0;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(100deg,var(--bronze2) 42%,#fff6df 50%,var(--bronze2) 58%) 100% 0/260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s 4s ease-in-out infinite}
@keyframes shimmer{0%{background-position:100% 0}35%,100%{background-position:0 0}}
.mark{cursor:pointer}
.kicker::before{content:"✦";margin-right:.6em;display:inline-block;animation:twinkle 3s ease-in-out infinite}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.frame::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--ang),transparent 0 70%,#b9874600 72%,#e2b874 86%,#fff6df 89%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.feature.in .frame::before{animation:trace 2.4s .5s ease-in-out}
.media:hover .frame::before{animation:trace 1.8s ease-in-out}
@keyframes trace{0%{--ang:0deg;opacity:0}10%,85%{opacity:1}100%{--ang:360deg;opacity:0}}
.hero p{max-width:600px;margin:22px auto 34px;color:var(--muted);font-size:clamp(1rem,2vw,1.15rem)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.btn.primary{background:var(--bronze);color:#1a1208;box-shadow:0 10px 40px #b9874655}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 50px #b987468a}
.btn.ghost{border:1px solid #ffffff33;color:var(--paper)}
.btn.ghost:hover{background:#ffffff10}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.scroll{position:absolute;bottom:26px;left:50%;width:24px;height:38px;margin-left:-12px;border:1.5px solid #ffffff40;border-radius:12px}
.scroll::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--bronze2);animation:sc 1.8s infinite}
@keyframes sc{to{transform:translateY(12px);opacity:0}}

section{position:relative;z-index:2;padding:120px clamp(16px,4vw,40px);max-width:1200px;margin:0 auto}
.kicker{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bronze2)}
h2{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.1;margin:12px 0 16px}
.lead{max-width:640px;color:var(--muted);font-size:1.08rem}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:56px}

/* FILTER */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid #ffffff2a;background:transparent;color:var(--muted);padding:9px 18px;border-radius:999px;font:inherit;font-size:.88rem;cursor:pointer;transition:all .25s}
.chip:hover{color:var(--paper);border-color:#ffffff55}
.chip.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* FEATURED */
.feature{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin-bottom:120px;transition:opacity .5s,transform .5s}
.feature:nth-of-type(even){grid-template-columns:1fr 1.25fr}
.feature:nth-of-type(even) .media{order:2}
.feature.hide{display:none}
@media(max-width:860px){.feature,.feature:nth-of-type(even){grid-template-columns:1fr}.feature:nth-of-type(even) .media{order:0}}
.media{position:relative;perspective:1200px}
.frame{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 40px 90px #000a,0 0 0 1px #ffffff14;transition:transform .2s ease-out;transform-style:preserve-3d;background:var(--ink2)}
.frame img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),#ffffff2e,transparent 45%);opacity:0;transition:opacity .3s}
.media:hover .frame::after{opacity:1}
.shot2{position:absolute;width:44%;height:auto;right:-4%;bottom:-12%;border-radius:14px;box-shadow:0 20px 50px #000c,0 0 0 1px #ffffff22;transform:rotate(3deg);transition:transform .4s}
.media:hover .shot2{transform:rotate(0) translateY(-6px)}
@media(max-width:860px){.shot2{display:none}}
.status{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:#ffffff0d;border:1px solid var(--line)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,#7bd3a8);box-shadow:0 0 10px var(--c,#7bd3a8)}
.status.prod{--c:var(--bronze2)}
.status.review{--c:#8ec5ff}
.feature h3{font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.1;margin:16px 0 6px}
.meta{color:var(--bronze2);font-size:.9rem;margin-bottom:16px}
.feature p{color:#cfd6d2;margin-bottom:22px}
.links{display:flex;gap:10px;flex-wrap:wrap}
.links .btn{padding:10px 20px;font-size:.88rem}

/* MORE */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.tile{display:block;text-decoration:none;border-radius:18px;overflow:hidden;background:var(--ink2);border:1px solid var(--line);transition:transform .3s,border-color .3s,box-shadow .3s}
.tile:hover{transform:translateY(-6px);border-color:#b9874699;box-shadow:0 24px 50px #0008}
.tile img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s}
.tile:hover img{transform:scale(1.05)}
.tile div{padding:16px 18px 20px}
.tile h4{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:1.25rem}
.tile span{display:block;color:var(--muted);font-size:.88rem;margin-top:4px}
.apps .tile img{aspect-ratio:16/10}

/* VALUES */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.value{background:var(--ink);padding:34px 28px;transition:background .3s}
.value:hover{background:#193f3755}
.value b{display:block;font-family:Fraunces,Georgia,serif;font-weight:500;font-size:1.35rem;margin:14px 0 8px}
.value p{color:var(--muted);font-size:.95rem}
.value svg{width:30px;height:30px;stroke:var(--bronze2);fill:none;stroke-width:1.6}

/* CONTACT */
.contact{text-align:center;padding-bottom:140px}
.mail{font-family:Fraunces,Georgia,serif;font-size:clamp(1.6rem,5vw,3.2rem);text-decoration:none;background:linear-gradient(var(--bronze),var(--bronze)) 0 100%/0 2px no-repeat;transition:background-size .4s}
.mail:hover{background-size:100% 2px}
footer{position:relative;z-index:2;border-top:1px solid var(--line);padding:30px clamp(16px,4vw,40px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:.86rem}
footer a{color:var(--muted);text-decoration:none;margin-left:18px}
footer a:hover{color:var(--paper)}
.tm{flex-basis:100%;font-size:.75rem;line-height:1.4}


.lang{margin-left:10px;padding:7px 12px;border-radius:999px;border:1px solid #ffffff2a;color:var(--muted);text-decoration:none;font-size:.8rem;font-weight:600;letter-spacing:.08em;transition:all .25s}
.lang:hover{color:var(--paper);border-color:#ffffff55}
/* sound toggle */
.snd{display:inline-flex;align-items:center;gap:8px;border:1px solid #ffffff2a;background:transparent;color:var(--muted);font:inherit;font-size:.85rem;padding:7px 14px;border-radius:999px;cursor:pointer;transition:all .25s}
.snd:hover{color:var(--paper);border-color:#ffffff55}
.snd[aria-pressed="true"]{color:var(--ink);background:var(--bronze2);border-color:var(--bronze2)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.eq i{width:3px;height:4px;background:currentColor;border-radius:1px}
.snd[aria-pressed="true"] .eq i{animation:eq .9s ease-in-out infinite}
.snd[aria-pressed="true"] .eq i:nth-child(2){animation-delay:.2s}.snd[aria-pressed="true"] .eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{50%{height:12px}}
/* hover video */
.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s;pointer-events:none}
.frame.vid video{opacity:1}
/* mini-moments */
.try{position:absolute;left:14px;bottom:14px;z-index:6;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:1px solid #ffffff40;background:#0e1312b3;backdrop-filter:blur(8px);color:var(--paper);font:600 .82rem Inter,sans-serif;cursor:pointer;transition:transform .2s,background .2s}
.try:hover{transform:translateY(-2px);background:#193f37e6}
.try b{color:var(--bronze2)}
.moment{position:absolute;inset:0;z-index:5;display:none;cursor:crosshair;overflow:hidden;touch-action:none}
.frame.play .moment{display:block}
.frame.play{transform:none!important}
.hint{position:absolute;top:12px;left:12px;max-width:62%;padding:6px 14px;border-radius:14px;background:#0e1312cc;color:var(--paper);font:500 .8rem/1.35 Inter,sans-serif;pointer-events:none}
.media:has(.frame.play) .shot2{opacity:0;pointer-events:none}
.banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;padding:14px 24px;border-radius:18px;background:#0e1312e6;border:1px solid var(--bronze);color:var(--paper);font:500 1.15rem Fraunces,Georgia,serif;text-align:center;pointer-events:none;transition:all .5s cubic-bezier(.2,1.6,.4,1)}
.banner.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.note{position:absolute;font-size:28px;pointer-events:none;animation:note 1.8s ease-out forwards;text-shadow:0 2px 8px #0006}
@keyframes note{from{transform:translate(-50%,-50%) scale(.4);opacity:1}to{transform:translate(calc(-50% + var(--dx)),-160%) scale(1.3) rotate(var(--r));opacity:0}}
.night{position:absolute;inset:0;background:radial-gradient(circle at 80% 18%,#2b3b6a55,#0a1030e6 60%);opacity:0;transition:opacity 1.6s}
.frame.play .night.on{opacity:1}
.moon{position:absolute;right:9%;top:9%;width:54px;height:54px;border-radius:50%;box-shadow:-12px 6px 0 0 #fff3c4;transform:rotate(-20deg);filter:drop-shadow(0 0 14px #fff3c488);opacity:0;transition:opacity 1.6s .6s}
.night.on .moon{opacity:1}
.nstar{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;background:#fff3c4;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:nst 2.4s ease-in-out infinite;filter:drop-shadow(0 0 6px #fff3c4)}
@keyframes nst{50%{transform:scale(.6);opacity:.6}}
.screw{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f2f2f2,#9aa3a8 60%,#5f686d);box-shadow:0 4px 12px #0007,0 0 0 3px #ffffff55;cursor:pointer;transition:transform .5s cubic-bezier(.3,1.5,.5,1);animation:wob 1.2s ease-in-out infinite}
.screw::before,.screw::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:5px;margin:-2.5px 0 0 -12px;background:#4a5257;border-radius:2px}
.screw::after{transform:rotate(90deg)}
.screw.done{animation:none;box-shadow:0 2px 6px #0006,0 0 0 3px #59e5b1}
@keyframes wob{50%{transform:rotate(-14deg) scale(1.06)}}
.seal{position:absolute;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:47% 53% 50% 50%;background:radial-gradient(circle at 38% 32%,#c4473a,#8e231b 70%);box-shadow:0 6px 16px #0008,inset 0 -4px 8px #0005,inset 0 4px 6px #ffffff33;display:grid;place-items:center;color:#f1c9a5;font:600 30px Fraunces,Georgia,serif;animation:stamp .45s cubic-bezier(.3,1.6,.5,1) both}
.seal::after{content:"";position:absolute;inset:9px;border-radius:50%;border:2px solid #f1c9a555}
@keyframes stamp{from{transform:scale(2.4) rotate(-25deg);opacity:0}to{transform:scale(1) rotate(var(--r,0deg));opacity:1}}
.alert{position:absolute;padding:7px 12px;border-radius:10px;background:#ff806e;color:#2a0b06;font:700 .8rem Inter,sans-serif;box-shadow:0 0 24px #ff806e99;cursor:pointer;transform:translate(-50%,-50%);animation:pop .35s cubic-bezier(.3,1.7,.5,1) both,pulse 1s .35s ease-in-out infinite;white-space:nowrap}
.alert.ok{background:#59e5b1;box-shadow:0 0 24px #59e5b199;color:#06291c;animation:none;transition:opacity .6s .5s;opacity:0}
.alert.miss{animation:none;opacity:0;transition:opacity .4s;filter:grayscale(1)}
@keyframes pop{from{transform:translate(-50%,-50%) scale(0)}}
@keyframes pulse{50%{box-shadow:0 0 6px #ff806e66}}
.score{position:absolute;right:12px;top:12px;padding:6px 12px;border-radius:999px;background:#0e1312cc;color:var(--paper);font:600 .8rem Inter,sans-serif;pointer-events:none}
.moment canvas{position:absolute;inset:0;width:100%;height:100%}
@media (hover:none){.try{bottom:10px;left:10px}}
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* CATALOG */
#apps .head{margin-bottom:40px}
.group{margin-bottom:46px}
.group.hide{display:none}
.group>h2{font-size:1.5rem;line-height:1.25;margin:0 0 4px}
.hint-note{color:var(--muted);font-size:.86rem;margin-bottom:6px}
.cat{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:14px}
@media(max-width:400px){.cat{grid-template-columns:1fr}}
.app{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:18px;background:var(--ink2);border:1px solid var(--line);transition:border-color .3s,transform .3s}
.app:hover{border-color:#b9874699;transform:translateY(-3px)}
.ico{width:56px;height:56px;border-radius:14px;flex:none;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.app h3{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:1.18rem;line-height:1.25}
.app h3 a{text-decoration:none}
.app h3 a:hover{color:var(--bronze2)}
.app p{color:var(--muted);font-size:.9rem;line-height:1.45;margin:4px 0 10px}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.pf,.st{font-size:.72rem;font-weight:600;letter-spacing:.03em;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.st{display:inline-flex;align-items:center;gap:6px}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.st.ok{--c:#4fbf8a;color:var(--paper)}
.st.soon{--c:var(--bronze2);color:var(--paper)}
.go{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:14px;font-size:.85rem;align-items:center}
.mono{display:grid;place-items:center;background:var(--green);color:#f4f2ed;font:500 1.6rem Fraunces,Georgia,serif}
.app small{font:400 .72rem Inter,sans-serif;color:var(--muted)}
.badge{display:inline-block;line-height:0}
.badge img{display:block;height:44px;width:auto;max-width:100%}
.badge:focus-visible{outline:2px solid var(--bronze2);outline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--bronze2);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:1000;padding:10px 16px;border-radius:10px;background:var(--bronze2);color:#0e1312;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.links:has(.badge){gap:12px}
.more{color:var(--muted);text-decoration:none}
.more:hover{color:var(--bronze2)}
/* GUIDES */
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.guides>div{padding:24px;border-radius:18px;background:var(--ink2);border:1px solid var(--line)}
.guides h3{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:1.25rem;margin-bottom:10px}
.guides ul{list-style:none}
.guides li{padding:7px 0;border-top:1px solid var(--line);font-size:.93rem}
.guides li:first-child{border-top:0}
.guides a{text-decoration:none;color:var(--paper)}
.guides a:hover{color:var(--bronze2)}
@media(max-width:720px){section{padding:80px 16px}}
/* Navigation: Menü auf schmalen Bildschirmen */
.navx{display:flex;align-items:center;margin-left:auto}
.tools{display:flex;align-items:center;gap:8px}
.tl,.menu{display:none}
.bars{display:grid;gap:4px;width:18px}
.bars i{height:2px;border-radius:2px;background:currentColor;transition:transform .25s,opacity .2s}
.menu[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.menu[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:940px){
  .lang{order:2;margin-left:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 14px}
  .menu{order:3;display:inline-flex;margin-left:8px;min-height:44px;color:var(--paper)}
  .navx{display:none;position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;padding:4px clamp(16px,4vw,40px) 20px;background:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 30px 50px #0000004d;max-height:calc(100svh - 68px);overflow-y:auto}
  nav.open{background:var(--ink)}
  nav.open .navx{display:flex}
  nav ul{flex-direction:column;gap:0;margin:0;font-size:1.12rem}
  nav ul a{display:flex;align-items:center;min-height:54px;border-bottom:1px solid var(--line);color:var(--paper);font-family:Fraunces,Georgia,serif}
  .tools{padding-top:16px}
  .tools .snd{min-height:44px}
  .tl{display:inline}
}
@media(max-width:350px){.menu .ml{display:none}}

/* Hero: direkter Weg zu den verfügbaren Titeln */
.quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:22px;font-size:.88rem;color:var(--muted)}
.quick a{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border-radius:999px;border:1px solid #ffffff2a;color:var(--paper);text-decoration:none;transition:border-color .2s,color .2s}
.quick a:hover{border-color:var(--bronze2);color:var(--bronze2)}
:root[data-theme="light"] .quick a{border-color:#16201d33}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .quick a{border-color:#16201d33}}
@media(max-width:720px){
  .hero{padding:92px 16px 44px}
  .mark{width:min(240px,56vw)}
  .hero p{margin:16px auto 24px}
  .hero .scroll{display:none}
  .actions .btn{flex:1 1 100%;justify-content:center;max-width:340px;min-height:50px}
  .quick span{flex-basis:100%}
  .chip{min-height:44px}
}

/* Katalog: Status, Gerät und Store-Knopf auf einen Blick */
#apps .head{margin-bottom:36px}
.filters{flex-basis:100%;display:grid;gap:10px}
.app{align-items:stretch}
.app.hide{display:none}
.app>div{display:flex;flex-direction:column;flex:1;min-width:0}
.app .badges{margin-top:8px}
.app p{margin:10px 0 0}
.pf,.st{font-size:.76rem;padding:4px 10px}
.st.ok{background:#4fbf8a1f;border-color:#4fbf8a80}
.st.soon{background:#b987461f;border-color:#b9874680}
.go{margin-top:auto;padding-top:14px;gap:10px 12px}
.more{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);color:var(--paper);font-weight:600;transition:border-color .2s,color .2s}
.more:hover{border-color:var(--bronze2)}
.app.wip{background:transparent;border-style:dashed}
.app.wip .ico{opacity:.8}
.none{color:var(--muted);padding:8px 0 30px}


/* MAGIE: Stimmung je Spiel, erwachende Karten; nur bei den Spielen, Werkzeuge bleiben ruhig */
#mood{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;background-color:var(--mood,transparent);transition:opacity 1.4s ease,background-color 1.4s ease;-webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 55%,#000,transparent 100%);mask-image:radial-gradient(ellipse 85% 75% at 50% 55%,#000,transparent 100%)}
#mood.on{opacity:.26}
#mood.flood{-webkit-mask-image:linear-gradient(to top,#000,transparent 62%);mask-image:linear-gradient(to top,#000,transparent 62%)}
:root[data-theme="light"] #mood.on{opacity:.15}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) #mood.on{opacity:.15}}
.app[data-a="cogwisp"]:hover .ico,.app[data-a="cogwisp"]:focus-within .ico{animation:wCog 1.3s cubic-bezier(.3,.7,.3,1)}
@keyframes wCog{to{transform:rotate(360deg)}}
.app[data-a="nomad"]:hover .ico,.app[data-a="nomad"]:focus-within .ico{animation:wRoll 1.1s ease-in-out}
@keyframes wRoll{35%{transform:translateX(7px) rotate(1.5deg)}70%{transform:translateX(-2px)}}
.app:is([data-a="rootling"],[data-a="mushbloom"]):hover .ico,.app:is([data-a="rootling"],[data-a="mushbloom"]):focus-within .ico{transform-origin:50% 100%;animation:wGrow .9s cubic-bezier(.2,1.5,.4,1)}
@keyframes wGrow{0%{transform:scale(.9)}60%{transform:scale(1.1)}}
.app[data-a="summgarten"]:hover .ico,.app[data-a="summgarten"]:focus-within .ico{animation:wSing 1s ease-in-out}
@keyframes wSing{25%{transform:rotate(-5deg) scale(1.04)}60%{transform:rotate(5deg) scale(1.04)}}
.app[data-a="reparierer"]:hover .ico,.app[data-a="reparierer"]:focus-within .ico{animation:wTap .8s ease-in-out}
@keyframes wTap{20%,60%{transform:rotate(-7deg)}40%,80%{transform:rotate(3deg)}}
.app[data-a="shelterfall"]:hover .ico,.app[data-a="shelterfall"]:focus-within .ico{animation:wGlow 1.3s ease-in-out}
@keyframes wGlow{45%{filter:brightness(1.35);box-shadow:0 0 22px #ff806e88}}
.app[data-a="littlekeepings"]:hover .ico,.app[data-a="littlekeepings"]:focus-within .ico{animation:wTidy .9s ease-in-out}
@keyframes wTidy{35%{transform:translateY(-5px)}70%{transform:translateY(1px)}}
.app[data-a="ringjahr"]:hover .ico,.app[data-a="ringjahr"]:focus-within .ico{animation:wCog 2s ease-in-out}

.try,.hint,.score,.banner{color:#f4f2ed}
.try b{color:#e2b874}

/* LIGHT MODE: per Schalter (data-theme) oder Systemeinstellung */
.logo-l{display:none!important}
#theme span{font-size:1rem;line-height:1}
:root[data-theme="light"]{--ink:#f4f2ed;--ink2:#ffffff;--paper:#16201d;--muted:#56625d;--line:#16201d1c;--bronze2:#8d6224}
:root[data-theme="light"] nav.solid{background:#f4f2ede0}
:root[data-theme="light"] .logo-d{display:none!important}
:root[data-theme="light"] .logo-l{display:block!important}
:root[data-theme="light"] #s1{stroke:#16201d}
:root[data-theme="light"] .chip,:root[data-theme="light"] .lang,:root[data-theme="light"] .snd,:root[data-theme="light"] .btn.ghost{border-color:#16201d33}
:root[data-theme="light"] .chip:hover,:root[data-theme="light"] .lang:hover,:root[data-theme="light"] .snd:hover{border-color:#16201d66}
:root[data-theme="light"] .btn.ghost:hover{background:#16201d0d}
:root[data-theme="light"] .feature p{color:#3a4642}
:root[data-theme="light"] .status{background:#16201d08}
:root[data-theme="light"] .frame{box-shadow:0 30px 70px #16201d33,0 0 0 1px #16201d14}
:root[data-theme="light"] .app:hover{box-shadow:0 18px 40px #16201d1f}
:root[data-theme="light"] .hero{background:radial-gradient(ellipse 80% 60% at 50% 45%,#e2b87433,transparent 70%),radial-gradient(ellipse at 50% 120%,#24564b22,transparent 60%),var(--ink)}
:root[data-theme="light"] .hero h1 em{background-image:linear-gradient(100deg,#8d6224 42%,#c9974f 50%,#8d6224 58%)}
@media(prefers-color-scheme:light){
:root:not([data-theme="dark"]){--ink:#f4f2ed;--ink2:#ffffff;--paper:#16201d;--muted:#56625d;--line:#16201d1c;--bronze2:#8d6224}
:root:not([data-theme="dark"]) nav.solid{background:#f4f2ede0}
:root:not([data-theme="dark"]) .logo-d{display:none!important}
:root:not([data-theme="dark"]) .logo-l{display:block!important}
:root:not([data-theme="dark"]) #s1{stroke:#16201d}
:root:not([data-theme="dark"]) .chip,:root:not([data-theme="dark"]) .lang,:root:not([data-theme="dark"]) .snd,:root:not([data-theme="dark"]) .btn.ghost{border-color:#16201d33}
:root:not([data-theme="dark"]) .chip:hover,:root:not([data-theme="dark"]) .lang:hover,:root:not([data-theme="dark"]) .snd:hover{border-color:#16201d66}
:root:not([data-theme="dark"]) .btn.ghost:hover{background:#16201d0d}
:root:not([data-theme="dark"]) .feature p{color:#3a4642}
:root:not([data-theme="dark"]) .status{background:#16201d08}
:root:not([data-theme="dark"]) .frame{box-shadow:0 30px 70px #16201d33,0 0 0 1px #16201d14}
:root:not([data-theme="dark"]) .app:hover{box-shadow:0 18px 40px #16201d1f}
:root:not([data-theme="dark"]) .hero{background:radial-gradient(ellipse 80% 60% at 50% 45%,#e2b87433,transparent 70%),radial-gradient(ellipse at 50% 120%,#24564b22,transparent 60%),var(--ink)}
:root:not([data-theme="dark"]) .hero h1 em{background-image:linear-gradient(100deg,#8d6224 42%,#c9974f 50%,#8d6224 58%)}
}

/* Zwei Seiten: Streifen "Jetzt verfügbar" auf der Startseite, Katalog auf apps/ */
h1.pagetitle{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.1;margin:12px 0 16px}
.catalog-page{padding-top:130px}
nav ul a[aria-current]{color:var(--paper)}
.now{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.nowi{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--ink2);border:1px solid var(--line)}
.nowi .ico{width:48px;height:48px;border-radius:12px}
.nowi>div{min-width:0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.nowi b{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:1.08rem;line-height:1.2}
.nowi b a{text-decoration:none}
.nowi b a:hover{color:var(--bronze2)}
.nowi b small{font:400 .76rem Inter,sans-serif;color:var(--muted);margin-left:8px;white-space:nowrap}
.nowmore{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-top:28px}
.nowmore span{color:var(--muted);font-size:.92rem}
@media(max-width:720px){.nowi:nth-child(n+5){display:none}.nowmore .btn{flex:1 1 100%;justify-content:center;min-height:50px}}
/* Katalogkarten: eine Regel für alle – Store-Badges in einer Reihe (Apple, Google, Microsoft), Website immer darunter */
.cat{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));align-items:start}
.app{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 16px;align-items:start}
.app>div{display:block}
.app .go{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:16px;padding-top:0}
.app .stores{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.app .badge img{height:44px}