/* Mystic – Website. Gleiche Tokens wie die App (src/head.html). */
:root{
  color-scheme:dark;
  --bg:#000; --s1:#141414; --s2:#0C0C0C; --s3:#1E1E1E; --s4:#262626; --line:#141414;
  --gold:#DEBE5D; --gold2:#E2C361; --ok:#8AD8AB; --red:#FF6B6B;
  --t:#fff; --t85:rgba(255,255,255,.85); --t75:rgba(255,255,255,.75); --t70:rgba(255,255,255,.7); --t60:rgba(255,255,255,.6);
  --t55:rgba(255,255,255,.55); --t45:rgba(255,255,255,.45); --t40:rgba(255,255,255,.4); --t35:rgba(255,255,255,.35); --t30:rgba(255,255,255,.3);
  --pad:20px;
}
@media (min-width:900px){:root{--pad:56px}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--t);font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
input,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
img{display:block}

.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t45)}
.eyebrow.gold{color:var(--gold)}
.lead{font-size:15px;font-weight:500;line-height:1.45;color:var(--t60)}
.h1{font-size:40px;font-weight:800;line-height:.95;letter-spacing:-.035em}
.card{aspect-ratio:59/91;border-radius:8%/5%;background:#000 center/cover no-repeat}

/* Buttons */
.cta{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 24px;border-radius:16px;background:var(--gold);color:#000;font-weight:800;font-size:18px;letter-spacing:-.01em;white-space:nowrap;transition:transform .1s,filter .15s}
.cta:hover{filter:brightness(1.05)}
.cta:active{transform:scale(.985)}
.cta.black{background:#000;color:var(--gold)}
.cta.white{background:#fff;color:#000}
.cta.center{justify-content:center}
.btn2{display:flex;justify-content:center;align-items:center;padding:16px;border-radius:16px;background:var(--s1);font-weight:700;font-size:16px;white-space:nowrap;transition:background .15s}
.btn2:hover{background:var(--s3)}
.textlink{display:flex;justify-content:center;padding:6px;font-size:14px;font-weight:600;color:rgba(255,255,255,.5)}
.textlink:hover{color:#fff}

/* Header */
.nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:calc(16px + env(safe-area-inset-top,0px)) var(--pad) 0}
.nav .logo img{width:90px;height:auto}
.nav .links,.nav .right{display:none}
.nav .burger{display:flex;flex-direction:column;gap:5px;padding:10px;margin-right:-10px}
.nav .burger i{width:22px;height:2px;background:#fff;display:block}
.nav .back{font-size:14px;font-weight:700;color:var(--t60)}
.nav .sublabel{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t45)}
.nav.sub .logo,.nav.sub .burger,.nav:not(.sub) .back,.nav:not(.sub) .sublabel{display:none}
@media (min-width:900px){
  .nav,.nav.sub{padding:22px var(--pad)}
  .nav .logo,.nav.sub .logo{display:block}
  .nav .logo img{width:120px}
  .nav .burger,.nav.sub .burger,.nav .back,.nav .sublabel{display:none}
  .nav .links{display:flex;gap:32px;font-size:14px;font-weight:700;color:var(--t70)}
  .nav .links a:hover,.nav .links a[aria-current]{color:#fff}
  .nav .right{display:flex;align-items:center;gap:16px}
}
.langs{display:flex;gap:2px;background:var(--s1);border-radius:999px;padding:3px}
.langs button{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--t55)}
.langs button[aria-pressed="true"]{background:#fff;color:#000}
.navcta{padding:12px 18px;border-radius:12px;background:var(--gold);color:#000;font-weight:800;font-size:14px;white-space:nowrap}
.navcta:hover{filter:brightness(1.05)}

/* Menü (mobil) */
.menu{position:fixed;inset:0;z-index:50;background:var(--s2);display:flex;flex-direction:column;overflow-y:auto;opacity:0;transition:opacity .2s}
.menu.show{opacity:1}
.menu .top{display:flex;align-items:center;justify-content:space-between;padding:calc(16px + env(safe-area-inset-top,0px)) 20px 0}
.menu .top img{width:90px;height:auto}
.menu .close{font-size:22px;font-weight:700;color:var(--t60);padding:6px}
.menu nav{flex:1;padding:44px 20px 0;display:flex;flex-direction:column}
.menu nav a{padding:14px 0;display:flex;align-items:baseline;justify-content:space-between}
.menu nav a b{font-size:38px;font-weight:800;letter-spacing:-.035em;line-height:1}
.menu nav a.gold b{color:var(--gold)}
.menu nav a span{font-size:13px;font-weight:600;color:var(--t35)}
.menu .foot{padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.menu .bigLangs{display:flex;gap:8px}
.menu .bigLangs button{flex:1;text-align:center;padding:14px;border-radius:12px;font-size:15px;font-weight:800;background:var(--s1);color:var(--t60)}
.menu .bigLangs button[aria-pressed="true"]{background:#fff;color:#000}
.menu .small{font-size:13px;font-weight:500;color:var(--t40);line-height:1.5}
.menu .small a:hover{color:#fff}
html.menuOpen,html.menuOpen body{overflow:hidden}

/* Footer */
.sitefoot{padding:40px var(--pad) calc(48px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:flex;flex-direction:column;gap:32px}
.sitefoot .brand{display:flex;flex-direction:column;gap:14px}
.sitefoot .brand img{width:100px;height:auto}
.sitefoot .brand span{font-size:13px;color:var(--t45);font-weight:500;line-height:1.5}
.sitefoot .cols{display:flex;gap:56px;font-size:14px;font-weight:600;color:var(--t60)}
.sitefoot .cols div{display:flex;flex-direction:column;gap:10px}
.sitefoot .cols a:hover{color:#fff}
.sitefoot .cols .h{color:var(--t35);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
@media (min-width:900px){.sitefoot{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:40px}}

/* Unterseiten: schmale Spalte */
.page{max-width:640px;margin:0 auto;padding:28px var(--pad) 0;display:flex;flex-direction:column}
@media (min-width:900px){.page{padding-top:48px;--pad:20px}}
.page .intro{display:flex;flex-direction:column;gap:12px}
.page .acts{padding:24px 0 28px;display:flex;flex-direction:column;gap:10px}
.box{background:var(--s1);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px}
.box .k{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.box .v{font-size:15px;font-weight:500;line-height:1.45;color:var(--t75)}
.ph{background:rgba(222,190,93,.14);color:var(--gold);border-radius:4px;padding:0 4px;font-weight:600}

/* Sheet */
.sheetWrap{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s}
.sheetWrap.show{opacity:1}
.sheet{width:100%;max-width:520px;background:var(--s2);border-radius:28px 28px 0 0;padding:14px 20px calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px;transform:translateY(24px);transition:transform .26s cubic-bezier(.2,.8,.3,1);box-shadow:0 -20px 60px rgba(0,0,0,.8)}
.sheetWrap.show .sheet{transform:none}
.sheet .handle{width:40px;height:4px;border-radius:2px;background:#2A2A2A;align-self:center}
@media (min-width:900px){.sheetWrap{align-items:center}.sheet{border-radius:28px}}

@media (prefers-reduced-motion:reduce){.menu,.sheetWrap,.sheet,.cta{transition:none}}
@media print{.nav,.menu,.sitefoot,.noprint{display:none!important}body{background:#fff;color:#000}}

/* ================= Bewegung ================= */
:root{--ease:cubic-bezier(.2,.8,.2,1);--navh:0px}

/* Seitenwechsel: View Transitions über Dokumente hinweg (Chrome, Safari 18.2+); Navigation bleibt stehen */
@view-transition{navigation:auto}
.nav{view-transition-name:sitenav}
::view-transition-old(root){animation:vtOut .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .45s var(--ease) both}
::view-transition-group(sitenav){animation-duration:.35s}
@keyframes vtOut{to{opacity:0;transform:translateY(-10px) scale(.995)}}
@keyframes vtIn{from{opacity:0;transform:translateY(18px)}}
/* ohne View Transitions: Inhalt blendet beim Laden ein */
html.novt main{animation:vtIn .5s var(--ease) both}

/* Navigation klebt oben und bekommt beim Scrollen Glas */
.nav{position:sticky;top:0;padding-bottom:10px;transition:background .3s,backdrop-filter .3s,box-shadow .3s}
.nav.scrolled{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav .links a{position:relative;transition:color .2s}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav .links a:hover::after,.nav .links a[aria-current]::after{transform:scaleX(1)}
.navcta,.cta,.btn2{transition:transform .2s var(--ease),filter .2s,background .2s,box-shadow .3s}
.navcta:hover{transform:translateY(-1px)}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(222,190,93,.22)}
.cta.black:hover,.cta.white:hover{box-shadow:0 14px 34px rgba(0,0,0,.28)}
.cta:active{transform:scale(.985)}
.cta>span:last-child{transition:transform .25s var(--ease)}
.cta:hover>span:last-child{transform:translateX(4px)}

/* Einblenden beim Scrollen: site.js setzt .rv und später .in, --d staffelt Geschwister */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* Menü: Einträge gestaffelt */
.menu nav a{opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.menu.show nav a{opacity:1;transform:none}
.menu.show nav a:nth-child(2){transition-delay:40ms}.menu.show nav a:nth-child(3){transition-delay:80ms}.menu.show nav a:nth-child(4){transition-delay:120ms}.menu.show nav a:nth-child(5){transition-delay:160ms}.menu.show nav a:nth-child(6){transition-delay:200ms}
.menu nav a b{transition:color .2s,transform .3s var(--ease)}
.menu nav a:hover b{transform:translateX(6px)}

/* kleiner Puls für geänderte Zahlen */
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.bump{animation:bump .35s var(--ease)}
[data-qty] output{display:inline-block}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}
@keyframes dealOne{from{opacity:0;translate:0 120px;scale:.85}to{opacity:1;translate:0 0;scale:1}}
.enter>*{animation:rise .9s var(--ease) both}
.enter>:nth-child(2){animation-delay:.08s}.enter>:nth-child(3){animation-delay:.16s}.enter>:nth-child(4){animation-delay:.24s}.enter>:nth-child(5){animation-delay:.32s}

/* Bewegung reduzieren (System oder App-Einstellung) */
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root),html.novt main{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .menu nav a{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}
html.rm ::view-transition-old(root),html.rm ::view-transition-new(root),html.rm.novt main{animation:none}
html.rm .rv,html.rm .menu nav a{opacity:1;transform:none;transition:none}
html.rm *,html.rm *::before,html.rm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important}