/* cleebration store · Liquid Glass nach den Tool-Grundsätzen, hell/dunkel automatisch */
@font-face{font-family:Manrope;src:url(/fonts/manrope-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(/fonts/manrope-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url(/fonts/manrope-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url(/fonts/manrope-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url(/fonts/manrope-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"DM Mono";src:url(/fonts/dm-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url(/fonts/dm-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#E9EDF3; --ink:#14161A; --ink2:#3D4350; --muted:#4A5060; --faint:#5A6170;
  --glass:rgba(255,255,255,.66); --glass-b:rgba(255,255,255,.9); --chip:rgba(20,22,26,.06); --line:rgba(20,22,26,.08);
  --accent:#2A47C9; --accent-ink:#fff; --link:#2A47C9;
  --blob1:#C9D6FF; --blob2:#FFD9BF;
  --g-bg:#E3F4EA; --g-fg:#17603A; --p-bg:rgba(42,71,201,.12); --p-fg:#213A9E; --k-bg:#FDE9DA; --k-fg:#9A4209; --s-bg:#F3E8FB; --s-fg:#6B2E91; --b-bg:rgba(20,22,26,.07); --b-fg:#3D4350;
  --t-tools:#DCE4FF; --t-spiele:#DDF2E6; --t-buecher:#FBE6D6; --t-downloads:#E6E1F7; --t-merch:#F6E0EE; --t-unikate:#F1EBD9; --t-ink:rgba(20,22,26,.82);
  --shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 30px rgba(28,40,70,.10);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0F1218; --ink:#EEF1F6; --ink2:#C9CFDA; --muted:#AAB2C0; --faint:#98A1B1;
  --glass:rgba(30,35,46,.62); --glass-b:rgba(255,255,255,.10); --chip:rgba(255,255,255,.08); --line:rgba(255,255,255,.10);
  --accent:#6F8BFF; --accent-ink:#0B0E14; --link:#9DB0FF;
  --blob1:#1F2C5C; --blob2:#4A2A18;
  --g-bg:rgba(76,200,130,.16); --g-fg:#8FE0B0; --p-bg:rgba(111,139,255,.18); --p-fg:#B9C6FF; --k-bg:rgba(240,140,70,.18); --k-fg:#FFC199; --s-bg:rgba(190,120,230,.18); --s-fg:#E1B8F7; --b-bg:rgba(255,255,255,.08); --b-fg:#C9CFDA;
  --t-tools:#26305A; --t-spiele:#1E3A2C; --t-buecher:#43301F; --t-downloads:#2F2850; --t-merch:#432639; --t-unikate:#3A3424; --t-ink:rgba(238,241,246,.9);
  --shadow:0 1px 0 rgba(255,255,255,.06) inset,0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--link)}
.bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg i{position:absolute;border-radius:50%;filter:blur(100px)}
.bg i:nth-child(1){width:520px;height:520px;background:var(--blob1);top:-160px;left:-120px;opacity:.8}
.bg i:nth-child(2){width:460px;height:460px;background:var(--blob2);top:160px;right:-160px;opacity:.65}
.wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:24px 16px 48px;display:flex;flex-direction:column;gap:28px}
@media (min-width:700px){.wrap{padding:24px 24px 56px;gap:32px}}

.glass{background:var(--glass);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--glass-b);box-shadow:var(--shadow)}
.btn{font:600 14px/1 Manrope,sans-serif;border-radius:999px;padding:0 16px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;border:0;cursor:pointer;color:var(--ink);background:var(--chip);white-space:nowrap}
.btn.dark{background:var(--ink);color:var(--bg)}
.btn.accent{background:var(--accent);color:var(--accent-ink)}
.btn.later{background:transparent;border:1px dashed color-mix(in srgb,var(--ink) 30%,transparent);color:var(--muted);cursor:default}
.btn svg{width:18px;height:18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:"DM Mono",monospace}

header.top{border-radius:999px;padding:8px 8px 8px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
@media (max-width:699px){header.top{border-radius:26px}}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:18px;letter-spacing:-.02em}
.brand b{width:34px;height:34px;border-radius:11px;background:var(--accent);display:flex;align-items:center;justify-content:center}
.brand b svg{width:18px;height:18px;stroke:var(--accent-ink)}
.brand span{font-weight:500;color:var(--faint)}
.search{flex:1 1 220px;display:flex;align-items:center;gap:8px;background:var(--chip);border-radius:999px;padding:0 16px;min-height:44px;order:3}
@media (min-width:900px){.search{order:0}}
.search input{border:0;background:transparent;font:500 15px Manrope,sans-serif;color:var(--ink);outline:none;flex:1;min-width:0}
.search svg{width:18px;height:18px;stroke:var(--faint)}
header.top nav{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.lang{font:500 13px "DM Mono",monospace;color:var(--faint);text-decoration:none;padding:0 8px;min-height:44px;display:inline-flex;align-items:center}

.hero{display:flex;flex-direction:column;gap:12px;padding:12px 6px 0}
.kicker{margin:0;font:500 13px "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.hero h1{margin:0;font-size:clamp(34px,6vw,56px);line-height:1.04;letter-spacing:-.035em;font-weight:800;max-width:760px}
.hero p.lead{margin:0;font-size:clamp(16px,2vw,19px);line-height:1.5;color:var(--ink2);max-width:640px}

.notice{border-radius:28px;padding:20px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.notice .ico{width:48px;height:48px;border-radius:16px;background:var(--g-bg);display:flex;align-items:center;justify-content:center;flex:none}
.notice .ico svg{width:24px;height:24px;stroke:var(--g-fg)}
.notice .txt{display:flex;align-items:center;gap:14px;flex:1 1 360px}
.notice p{margin:0}
.notice .t1{font-weight:700;font-size:17px}
.notice .t2{margin-top:4px;color:var(--muted);font-size:15px}
.notice form{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 320px}
.field{flex:1 1 200px;min-width:0;min-height:44px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);background:color-mix(in srgb,var(--bg) 60%,transparent);padding:0 18px;font:500 15px Manrope,sans-serif;color:var(--ink)}

.msg{border-radius:20px;padding:14px 18px;font-size:15px;font-weight:600}
.msg.ok{background:var(--g-bg);color:var(--g-fg)}
.msg.err{background:var(--k-bg);color:var(--k-fg)}

.cats{display:flex;gap:10px;overflow-x:auto;padding:2px;margin:0 -2px;scrollbar-width:none}
.cats a{flex:none}
.cats a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cats .n{font:500 12px "DM Mono",monospace;opacity:.7}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense;gap:24px}
.sec{display:flex;flex-direction:column;gap:14px;min-width:0}
.sec.s4{grid-column:span 4}.sec.s2{grid-column:span 2}.sec.s1{grid-column:span 1}
.sec h2{margin:0;font-size:22px;letter-spacing:-.02em;padding:0 4px}
.inner{display:grid;gap:20px}
.s4 .inner{grid-template-columns:repeat(4,minmax(0,1fr))}.s2 .inner{grid-template-columns:repeat(2,minmax(0,1fr))}.s1 .inner{grid-template-columns:minmax(0,1fr)}
@media (max-width:960px){.grid{grid-template-columns:minmax(0,1fr)}.sec.s4,.sec.s2,.sec.s1{grid-column:auto}.s4 .inner,.s2 .inner{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.s4 .inner,.s2 .inner{grid-template-columns:minmax(0,1fr)}}

.card{border-radius:26px;padding:12px;display:flex;flex-direction:column;gap:12px;min-width:0}
.tile{display:flex;align-items:flex-end;justify-content:space-between;height:150px;border-radius:18px;padding:14px;text-decoration:none}
.tile .m{font-weight:800;font-size:34px;letter-spacing:-.04em;color:var(--t-ink)}
.t-tools{background:var(--t-tools)}.t-spiele{background:var(--t-spiele)}.t-buecher{background:var(--t-buecher)}.t-downloads{background:var(--t-downloads)}.t-merch{background:var(--t-merch)}.t-unikate{background:var(--t-unikate)}
.card .body{display:flex;flex-direction:column;gap:6px;padding:0 6px;flex:1}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card h3{margin:0;font-size:17px;letter-spacing:-.01em}
.card h3 a{color:inherit;text-decoration:none}
.card p{margin:0;font-size:14px;line-height:1.45;color:var(--muted)}
.card .price{font:500 12px "DM Mono",monospace;color:var(--faint);margin-top:2px}
.card .acts{display:flex;gap:8px;flex-wrap:wrap}
.card .acts .btn{flex:1 1 auto}
.badge{font:600 11px/1 Manrope,sans-serif;letter-spacing:.02em;padding:6px 9px;border-radius:999px;white-space:nowrap}
.b-gratis{background:var(--g-bg);color:var(--g-fg)}.b-pro{background:var(--p-bg);color:var(--p-fg)}.b-kaufen{background:var(--k-bg);color:var(--k-fg)}.b-shop{background:var(--s-bg);color:var(--s-fg)}.b-bald{background:var(--b-bg);color:var(--b-fg)}

.aside{border-radius:26px;padding:22px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.aside h2{padding:0;font-size:19px}
.aside p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}

footer.foot{border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:18px}
footer .links{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;font-weight:600}
footer .links a{text-decoration:none}
footer .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--faint);border-top:1px solid var(--line);padding-top:16px}
footer .legal a{color:var(--faint)}
footer .legal span{display:flex;gap:16px;flex-wrap:wrap}

/* Produktseite */
.crumb{border-radius:999px;padding:8px 8px 8px 8px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.crumb .where{font-size:14px;color:var(--faint)}
.crumb .where strong{color:var(--ink)}
.prod{display:flex;flex-wrap:wrap;gap:28px;align-items:stretch}
.prod .pic{flex:1 1 480px;border-radius:30px;padding:14px;display:flex}
.prod .pic div{flex:1;min-height:300px;border-radius:22px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:72px;letter-spacing:-.05em;color:var(--t-ink)}
.prod .info{flex:1 1 340px;display:flex;flex-direction:column;gap:16px;padding:8px 4px}
.prod h1{margin:0;font-size:clamp(36px,5vw,48px);line-height:1.05;letter-spacing:-.035em;font-weight:800}
.prod .desc{margin:0;font-size:18px;line-height:1.55;color:var(--ink2)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.okbox{border-radius:22px;padding:16px 18px;display:flex;align-items:center;gap:14px}
.okbox .ico{width:40px;height:40px;border-radius:13px;background:var(--g-bg);display:flex;align-items:center;justify-content:center;flex:none}
.okbox .ico svg{width:20px;height:20px;stroke:var(--g-fg)}
.okbox p{margin:0;font-size:15px;line-height:1.45}
.okbox span{color:var(--muted)}
.h2row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:0 4px}
.h2row h2{margin:0;font-size:24px;letter-spacing:-.02em}
.h2row span{font-size:14px;color:var(--faint)}
.sets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.sets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sets{grid-template-columns:minmax(0,1fr)}}
.set{border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:10px}
.set.hi{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent),var(--shadow)}
.set .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.set h3{margin:0;font-size:18px}
.set .pr{font:600 15px "DM Mono",monospace}
.set .pr.free{color:var(--g-fg)}
.set p{margin:0;font-size:14px;line-height:1.5;color:var(--muted);flex:1}
.set .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.set .state{font-size:13px;font-weight:600;color:var(--g-fg)}
.set .btn{min-height:36px;font-size:13px;padding:0 14px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:760px){.two{grid-template-columns:minmax(0,1fr)}}
.box{border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:10px}
.box h2{margin:0;font-size:18px}
.box ul{margin:0;padding-left:20px;font-size:14px;line-height:1.7;color:var(--ink2)}
.box p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.small{margin:0;padding:0 4px;font-size:13px;color:var(--faint)}

/* Konto */
.list{border-radius:28px;padding:8px;display:flex;flex-direction:column}
.li{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.li .ic{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:var(--t-ink);flex:none}
.li .w{flex:1 1 200px;min-width:0}
.li .w p{margin:0}
.li .w .n{font-weight:700;font-size:16px}
.li .w .d{margin-top:3px;font-size:14px;color:var(--muted)}
.li .until{font:500 12px "DM Mono",monospace;color:var(--faint);min-width:140px}
.flex3{display:flex;flex-wrap:wrap;gap:18px}
.flex3>*{flex:1 1 320px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;min-height:44px}
.toggle input{width:22px;height:22px;accent-color:var(--accent)}
.login{border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:14px;max-width:520px}
.login h1{margin:0;font-size:32px;letter-spacing:-.03em}
.login form{display:flex;flex-wrap:wrap;gap:8px}

/* Handy: kompakte Listenkacheln wie im Entwurf */
@media (max-width:560px){
  .card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px 12px;padding:10px;border-radius:22px}
  .tile{width:72px;height:72px;padding:0;justify-content:center;align-items:center;border-radius:16px}
  .tile .m{font-size:24px}
  .card .body{padding:2px 0 0}
  .card .acts{grid-column:1/-1}
  .grid{gap:18px}.inner{gap:12px}
}
@media (max-width:560px){.prod .pic div{min-height:180px;font-size:56px}}