/* ==========================================================================
   Welcher Zauberer bist du? — gemeinsames Stylesheet (Design „Trankküche Deluxe")
   ========================================================================== */

:root{
  --bg:#0F2B24;
  --panel:#163A31;
  --panel-2:#12342C;
  --line:rgba(241,247,236,.14);
  --line-strong:rgba(241,247,236,.28);
  --text:#F1F7EC;
  --dim:#A9C2B6;
  --dim-2:#C7D8CF;
  --acc:#C8F25A;          /* Lime – Flächen */
  --acc-text:#C8F25A;     /* Lime – als Schriftfarbe */
  --on-acc:#0F2B24;       /* Text auf Lime/Flieder */
  --lil:#C9A7FF;
  --cta-shadow:#6E8F1F;
  --flask-bg:#0B221C;
  --glass:#F1F7EC;
  --bubble:rgba(200,242,90,.35);
  --bubble-2:rgba(201,167,255,.4);
  --blob-1:rgba(201,167,255,.18);
  --blob-2:rgba(200,242,90,.13);
  --glow:rgba(200,242,90,.7);
  --radius-xl:40px;
  --radius-l:26px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#EEF4E3;
  --panel:#FFFFFF;
  --panel-2:#E2ECD4;
  --line:rgba(15,43,36,.13);
  --line-strong:rgba(15,43,36,.3);
  --text:#0F2B24;
  --dim:#46625A;
  --dim-2:#36504A;
  --acc:#C8F25A;
  --acc-text:#4A7A0A;
  --on-acc:#0F2B24;
  --lil:#BC9BFA;
  --cta-shadow:#6E8F1F;
  --flask-bg:#183F35;
  --glass:#0F2B24;
  --bubble:rgba(74,122,10,.3);
  --bubble-2:rgba(140,100,220,.3);
  --blob-1:rgba(188,155,250,.3);
  --blob-2:rgba(200,242,90,.35);
  --glow:rgba(110,160,20,.45);
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{overflow-x:hidden;scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:'Figtree',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background-color .4s ease,color .4s ease;
}
a{color:var(--acc-text)}
a:hover{color:var(--text)}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--lil);outline-offset:3px;border-radius:8px}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,48px);position:relative}
.disp{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;letter-spacing:-0.035em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Hintergrund: Blasen & Farbflecken ---------- */
.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fx-blob{position:absolute;border-radius:50%;filter:blur(80px);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.fx-blob.b1{left:-12%;top:-14%;width:620px;height:620px;background:var(--blob-1);transform:translate(calc(var(--mx,0) * 80px),calc(var(--my,0) * 60px))}
.fx-blob.b2{right:-12%;top:38%;width:580px;height:580px;background:var(--blob-2);transform:translate(calc(var(--mx,0) * -100px),calc(var(--my,0) * -60px))}
.fx-bub{position:absolute;bottom:-90px;border-radius:50%;border:2px solid var(--bubble);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.28),rgba(255,255,255,0) 42%);animation:fx-rise var(--t,12s) linear infinite}
.fx-bub.l{border-color:var(--bubble-2)}
.fx-bub i{display:block;width:100%;height:100%;border-radius:50%;animation:fx-wob var(--w,3s) ease-in-out infinite alternate}
@keyframes fx-rise{0%{transform:translateY(0);opacity:0}10%{opacity:1}85%{opacity:.8}100%{transform:translateY(calc(-100vh - 180px));opacity:0}}
@keyframes fx-wob{from{transform:translateX(-24px)}to{transform:translateX(24px) scale(1.08,.94)}}
.page{position:relative;z-index:1}

/* ---------- Kopfzeile ---------- */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand:hover{color:var(--text)}
.brand-icon{width:42px;height:42px;border-radius:13px;background:var(--acc);display:inline-flex;align-items:center;justify-content:center;animation:wob 2.6s ease-in-out infinite;flex:0 0 auto}
.brand-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;letter-spacing:-0.02em}
.brand-name b{color:var(--acc-text);font-weight:800}
.header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line-strong);font-size:13px;font-weight:600;color:var(--text);text-decoration:none;background:transparent}
a.tag:hover{border-color:var(--acc-text);color:var(--text)}
.tag.solid{border-color:transparent;background:var(--panel)}
.tag .dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);animation:pulse 1.4s ease-in-out infinite}
.tag .num{color:var(--acc-text);font-weight:800}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
@keyframes wob{0%,100%{rotate:0deg;translate:0 0}25%{rotate:-5deg;translate:0 -3px}75%{rotate:4deg;translate:0 2px}}

/* Theme-Schalter */
.theme-toggle{position:relative;width:64px;height:36px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--panel);cursor:pointer;padding:0;flex:0 0 auto}
.theme-toggle .knob{position:absolute;top:3px;left:3px;width:27px;height:27px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;color:var(--on-acc);transition:left .45s cubic-bezier(.3,1.7,.5,1),transform .45s cubic-bezier(.3,1.7,.5,1)}
.theme-toggle .knob svg{width:15px;height:15px}
.theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .knob{left:31px;transform:rotate(360deg)}
:root[data-theme="light"] .theme-toggle .i-sun{display:block}
:root[data-theme="light"] .theme-toggle .i-moon{display:none}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 30px;border-radius:999px;border:0;cursor:pointer;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:18px;text-decoration:none;transition:transform .25s cubic-bezier(.3,1.7,.5,1),box-shadow .25s,opacity .2s}
.btn-primary{background:var(--acc);color:var(--on-acc);box-shadow:0 0 50px -12px var(--glow);animation:breath 2.6s ease-in-out infinite}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 3.4s ease-in-out 2.2s infinite;pointer-events:none}
.btn-primary:hover{color:var(--on-acc);transform:translateY(-4px) rotate(-2deg) scale(1.04)}
.btn-primary:active{transform:translateY(2px) scale(.97)}
.btn-primary svg{transition:transform .3s}
.btn-primary:hover svg{transform:translateX(5px) rotate(-12deg)}
.btn-ghost{background:transparent;color:var(--text);border:2px solid var(--line-strong);font-family:'Figtree',sans-serif;font-size:16px}
.btn-ghost:hover{color:var(--text);border-color:var(--lil);transform:rotate(2deg) scale(1.04)}
.btn:disabled{opacity:.38;cursor:not-allowed;animation:none;transform:none!important}
.btn:disabled::after{display:none}
@keyframes breath{0%,100%{box-shadow:0 0 36px -14px var(--glow)}50%{box-shadow:0 0 66px -6px var(--glow)}}
@keyframes sheen{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}

/* ---------- Footer ---------- */
.site-footer{position:relative;max-width:1240px;margin:48px auto 0;padding:26px clamp(16px,4vw,48px) 40px;border-top:2px solid var(--line);text-align:center;font-size:14px;font-weight:600;color:var(--dim)}
.site-footer a{color:var(--dim);text-decoration:none;padding:4px 6px;border-radius:6px;transition:color .25s}
.site-footer a:hover,.site-footer a:focus-visible{color:var(--acc-text)}

/* ---------- Gemeinsame Animationen ---------- */
.l{display:inline-block;animation:drop 1s cubic-bezier(.3,1.7,.5,1) both,wob 3.4s ease-in-out infinite}
@keyframes drop{0%{opacity:0;transform:translateY(-130px) rotate(-30deg) scale(.4)}100%{opacity:1;transform:none}}
@keyframes jelly{0%{transform:scale(1)}30%{transform:scale(1.25,.75)}50%{transform:scale(.85,1.2)}70%{transform:scale(1.08,.94)}100%{transform:scale(1)}}
.pop-in{animation:fadeup .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Rechtliche Seiten ---------- */
.legal{max-width:820px;padding-top:30px;padding-bottom:40px}
.legal h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-0.035em;font-size:clamp(44px,7vw,80px);line-height:.95;margin:0 0 28px}
.legal .placeholder-note{background:var(--panel);border:2px dashed var(--lil);border-radius:22px;padding:20px 22px;font-size:15px;line-height:1.6;color:var(--dim-2);margin-bottom:34px}
.legal .placeholder-note strong{color:var(--text)}
.legal code{background:var(--panel-2);padding:2px 6px;border-radius:6px;font-size:.9em}
.legal-content{background:var(--panel);border-radius:var(--radius-xl);padding:clamp(24px,4vw,44px);border:2px solid var(--line)}
.legal-content h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-0.02em;font-size:24px;margin:30px 0 10px}
.legal-content h2:first-child{margin-top:0}
.legal-content p{margin:0;line-height:1.7;color:var(--dim-2)}
.legal-content p + p{margin-top:12px}
.back-link{display:inline-flex;margin-top:30px}

@media (max-width:640px){
  body{font-size:16px}
  .brand-name{font-size:18px}
  .brand-icon{width:38px;height:38px}
  .header-right .hide-sm{display:none}
  .btn{min-height:54px;padding:0 24px;font-size:17px}
}
/* ==========================================================================
   Feinschliff „Glas & Glanz“ – eine Palette, eine Bewegungssprache
   ========================================================================== */

/* ---------- Gemeinsame Basis: eine Palette, eine Bewegungssprache ---------- */
:root{
  --ink:#0F2B24; --lime:#C8F25A; --lilac:#C9A7FF; --mist:#F1F7EC;
  --lil:#C9A7FF;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.45,0,.25,1);
}
:root[data-theme="light"]{ --lil:#C9A7FF; --acc-text:#3F6B0B; }

/* Hintergrund: weiche Bokeh-Lichter (Canvas) statt Umriss-Blasen */
#fxBubbles, .fx-bub{display:none!important}

/* ruhigere, weichere Bewegungen überall */
.l{animation:b-rise 1.1s var(--ease-out) both}
@keyframes b-rise{from{opacity:0;transform:translateY(.32em);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes b-rise-m{from{opacity:0;transform:translate3d(0,.32em,0)}to{opacity:1;transform:none}}
@media (max-width:760px),(pointer:coarse){.l{animation-name:b-rise-m}}
html .pill{animation:b-pill 1.1s var(--ease-out) .55s both}
@keyframes b-pill{from{opacity:0;transform:rotate(-6deg) scale(.7)}to{opacity:1;transform:rotate(-2deg) scale(1)}}
html .sticker{animation:b-stick 1.2s var(--ease-out) 1.1s both,spin 40s linear 2.3s infinite}
@keyframes b-stick{from{opacity:0;transform:scale(.4) rotate(-90deg)}to{opacity:1;transform:none}}
.pop-in{animation:b-fade 1s var(--ease-out) both}
@keyframes b-fade{from{opacity:0;transform:translateY(14px)}}
.brand-icon{animation:wob 7s ease-in-out infinite}
.btn{transition:translate .45s var(--ease-out),box-shadow .45s var(--ease-out),background-color .3s,border-color .3s,color .3s}
.btn-primary:hover,.btn-ghost:hover{transform:none;translate:0 -3px}
.btn-primary:active{transform:none;translate:0 1px}
.btn-primary{animation:none;box-shadow:0 0 46px -14px var(--glow)}
.btn-primary::after{animation-duration:5.5s}
.tag .dot{animation-duration:2.6s}
html .flask-pool,html .orbit{display:none}
html .loading-flask{animation:b-lwob 2.6s var(--ease-soft) infinite;transform-origin:50% 80%}
@keyframes b-lwob{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-6px)}}
html .r-swirl i:nth-child(3){color:rgba(15,43,36,.18)!important}
.theme-toggle .knob{transition:left .5s var(--ease-out),transform .5s var(--ease-out)}

/* Kolben-Bühne – alle Dauer-Animationen laufen über transform/opacity (GPU), damit nichts ruckelt */
.bf{position:relative}
.bf .flask-float{animation:bf-float 7s var(--ease-soft) infinite;will-change:transform}
@keyframes bf-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}}
.bf .flask-tilt{transition:transform 1.4s var(--ease-out);transform:rotate(calc(var(--mx,0) * 10deg)) translateX(calc(var(--mx,0) * 16px))}
.bf-shadow{position:absolute;left:24%;right:24%;bottom:-2%;height:34px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);animation:bf-shadow 7s var(--ease-soft) infinite;will-change:transform,opacity}
:root[data-theme="light"] .bf-shadow{background:radial-gradient(closest-side,rgba(15,43,36,.28),transparent)}
@keyframes bf-shadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.86);opacity:.7}}
.bf-art{position:relative;width:100%;aspect-ratio:4/5}
.bf-art > svg:not(.bf-star){position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.bf-liq{position:absolute;inset:0;overflow:hidden;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cpath d='M172 150 V184 A146 146 0 1 0 228 184 V150 Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cpath d='M172 150 V184 A146 146 0 1 0 228 184 V150 Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.bf-glassbg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 50%,rgba(255,255,255,.07)),var(--flask-bg)}
.bf-slosh{position:absolute;inset:0;transform-origin:50% 65.4%;transition:transform 1.8s var(--ease-out);transform:rotate(calc(var(--mx,0) * -10deg))}
.bf-wave{position:absolute;left:-50%;top:0;width:250%;max-width:none;height:100%;display:block;will-change:transform}
.bf-wave.w1{animation:bf-wave 9s linear infinite}
.bf-wave.w2{animation:bf-wave 14s linear infinite reverse}
@keyframes bf-wave{from{transform:translate3d(0,0,0)}to{transform:translate3d(-20%,0,0)}}
.bf-core{position:absolute;left:22.5%;top:58%;width:55%;height:32%;border-radius:50%;background:radial-gradient(closest-side,rgba(241,247,236,.7),rgba(241,247,236,0));animation:bf-pulse 4.5s ease-in-out infinite;will-change:transform,opacity}
@keyframes bf-pulse{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.05)}}
.bf-rise{position:absolute;opacity:0;animation:bf-rise var(--d,4s) cubic-bezier(.4,0,.7,1) var(--dl,0s) infinite;will-change:transform,opacity}
@keyframes bf-rise{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translate3d(0,-100%,0);opacity:0}}
.bf-bub{position:absolute;left:0;bottom:0;width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(255,255,255,.25) 40%,rgba(255,255,255,.08) 72%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);animation:bf-sway var(--s,1.6s) ease-in-out infinite alternate}
@keyframes bf-sway{from{transform:translate3d(-45%,0,0)}to{transform:translate3d(45%,0,0)}}
.bf-star{position:absolute;display:block;aspect-ratio:1;opacity:0;animation:bf-tw var(--d,3.2s) ease-in-out var(--dl,0s) infinite;will-change:transform,opacity}
@keyframes bf-tw{0%,100%{transform:scale(.3) rotate(0);opacity:0}45%,55%{transform:scale(1) rotate(45deg);opacity:1}}
.bf .wisp{stroke-dasharray:60 200;animation:bf-wisp var(--d,4.2s) var(--ease-soft) var(--dl,0s) infinite;opacity:0}
@keyframes bf-wisp{0%{stroke-dashoffset:60;opacity:0;transform:translateY(10px)}25%{opacity:.8}100%{stroke-dashoffset:-150;opacity:0;transform:translateY(-30px)}}
.bf .glass-line{stroke:var(--mist)}
:root[data-theme="light"] .bf .glass-line{stroke:var(--ink)}

/* Hintergrund-Lichter (DOM statt Canvas: läuft komplett auf der GPU) */
.bokeh{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;opacity:.48;transform:translate3d(calc(var(--mx,0) * 30px),calc(var(--my,0) * 20px),0);transition:transform 1.6s var(--ease-out),opacity .4s}
:root[data-theme="light"] .bokeh{opacity:1}
.bk{position:absolute;top:100%;border-radius:50%;animation:bk-rise var(--t,70s) linear var(--dl,0s) infinite;will-change:transform}
.bk i{display:block;width:100%;height:100%;border-radius:50%;animation:bk-sway var(--s,9s) ease-in-out infinite alternate}
@keyframes bk-rise{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-145vh,0)}}
@keyframes bk-sway{from{transform:translate3d(-22px,0,0)}to{transform:translate3d(22px,0,0)}}

/* ==========================================================================
   Farben & Textur
   ========================================================================== */
:root{--bg:#0F2B24;--panel:#163830;--panel-2:#12322A;--blob-1:rgba(201,167,255,.16);--blob-2:rgba(200,242,90,.10)}
:root[data-theme="light"]{--bg:#EEF4E6;--panel:#FFFFFF;--panel-2:#E4EDD8;--blob-1:rgba(201,167,255,.30);--blob-2:rgba(200,242,90,.32)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fx-blob{transition:transform 2s var(--ease-out)}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .fx-bub{display:none}
  .bokeh{display:none}
  .bf .wisp{display:none}
}