/* Jelly Glass – gemeinsames Material für Landingpage und Studio.
   Farbe lebt in den Objekten, die Leinwand bleibt fast weiß. Heldenfarbe: Tang (Orange). */
:root {
  --canvas:#F1F0F5; --canvas-2:#E7E6EE; --ink:#16151A; --ink-soft:#6E6C78; --line:rgb(22 21 26 / .07);
  --tang-core:#F26B1D; --tang-body:#FF9A4D; --tang-rim:#FFE3CC;
  --lime-core:#5CC93B; --lime-body:#A2E57F; --lime-rim:#E8F9DC;
  --butter:#FFD84D;
  --au-1:#4F8EF7; --au-2:#F2708A; --au-3:#FFC89A; --au-4:#B79CFF;
  --hue-core:var(--tang-core); --hue-body:var(--tang-body); --hue-rim:var(--tang-rim);
  --r-s:12px; --r-m:22px; --r-l:34px; --r-pill:999px;
  --shadow-float:0 30px 60px -20px color-mix(in oklab,var(--hue-core) 35%,transparent),0 8px 18px -8px color-mix(in oklab,var(--hue-core) 25%,transparent);
  --shadow-rest:0 14px 28px -14px color-mix(in oklab,var(--hue-core) 22%,rgb(40 30 60 / .25));
  --spring-juicy:linear(0,.2 6%,.7 13%,1.12 21%,1.22 27%,1.2 32%,1.08 40%,.96 50%,.93 55%,.97 64%,1.02 74%,1.01 84%,1);
  --spring-bounce:linear(0,.063,.25 9.6%,.954 22.4%,1.089 29.5%,1.117 33.5%,1.114 37.5%,1.021 50.1%,.992 57.8%,.991 66.1%,1.002 84.8%,1);
  --spring-soft:linear(0,.1 5%,.4 14%,.8 26%,1.03 40%,1.04 48%,1.01 65%,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --t-press:90ms; --t-bounce:520ms; --t-juicy:750ms; --t-soft:700ms;
  --serif:"Bodoni Moda",Didot,serif; --sans:"Schibsted Grotesk",system-ui,sans-serif; --body:"Schibsted Grotesk",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,monospace;
  --sky-core:#3E9BEA; --sky-body:#74B9F0; --sky-rim:#DDEEFC;
  --bub-core:#F0458F; --bub-body:#FF8DBF; --bub-rim:#FFE1EE;
  --panel:rgb(255 255 255 / .55); --panel-edge:rgb(255 255 255 / .85);
  color-scheme:light;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) { --canvas:#121118; --canvas-2:#1B1A23; --ink:#F4F2F8; --ink-soft:#A09DB0; --line:rgb(255 255 255 / .07);
    --panel:rgb(255 255 255 / .05); --panel-edge:rgb(255 255 255 / .12); color-scheme:dark; }
}
:root[data-theme="dark"] { --canvas:#121118; --canvas-2:#1B1A23; --ink:#F4F2F8; --ink-soft:#A09DB0; --line:rgb(255 255 255 / .07);
  --panel:rgb(255 255 255 / .05); --panel-edge:rgb(255 255 255 / .12); color-scheme:dark; }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; min-height:100vh; color:var(--ink); font:400 16px/1.55 var(--body); overflow-x:hidden;
  background:radial-gradient(120% 80% at 50% 30%,var(--canvas),var(--canvas-2)) fixed;
  background-color:var(--canvas);
}
/* Punktfeld (field.js) liegt fest hinter allem */
.field { position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; }
::selection { background:color-mix(in oklab,var(--hue-core) 30%,transparent); }
a { color:inherit; }
a.chip, a.pill, a.brand { text-decoration:none; }
button, input, textarea, select { font:inherit; color:inherit; }
.serif { font-family:var(--serif); font-weight:700; letter-spacing:.02em; }
.meta { color:color-mix(in oklab,var(--hue-core) 70%,var(--ink)); font-size:13px; }
.soft { color:var(--ink-soft); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Bewegung: hover/press über `scale`/`translate`, Klick-Wobble über `transform` (composite add) */
.bouncy { cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:scale var(--t-juicy) var(--spring-juicy), translate var(--t-juicy) var(--spring-juicy), box-shadow var(--t-juicy) var(--spring-juicy); }
.bouncy:hover { scale:1.04; translate:0 -4px; }
.bouncy:active { scale:.94 .9; translate:0 2px; transition-duration:var(--t-press); transition-timing-function:var(--ease-out); }
.bouncy:disabled, .bouncy[aria-disabled="true"] { filter:saturate(.3); opacity:.55; cursor:not-allowed; scale:1; translate:0; }
:focus-visible { outline:3px solid var(--hue-core); outline-offset:3px; border-radius:var(--r-s); }
@keyframes jelly-in { from { scale:.3; opacity:0 } 40% { opacity:1 } }
.appear { animation:jelly-in 900ms var(--spring-juicy) backwards; animation-delay:calc(var(--i,0) * 90ms + 150ms); }
@keyframes rise { from { translate:0 18px; opacity:0 } }
.rise { animation:rise 700ms var(--spring-soft) backwards; animation-delay:calc(var(--i,0) * 80ms); }
@keyframes breathe { 50% { transform:scale(1.02,.98) translateY(2px); } }

/* Gummi-Körper: Kern → Körper → milchiger Rand, plus Korn */
.jelly {
  position:relative; isolation:isolate; border-radius:var(--r-l);
  background:
    radial-gradient(120% 90% at var(--mx,30%) var(--my,20%),rgb(255 255 255 / .5),transparent 45%),
    radial-gradient(75% 75% at 50% 55%,var(--hue-core) 0%,var(--hue-body) 58%,var(--hue-rim) 100%);
  box-shadow:inset 0 2px 1px rgb(255 255 255 / .7), inset 0 -10px 24px color-mix(in oklab,var(--hue-core) 40%,transparent),
    inset 0 0 0 1.5px rgb(255 255 255 / .35), var(--shadow-float);
}
.grain::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; mix-blend-mode:overlay; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E"); }

/* Mattglas-Platte: immer mit Inhalt dahinter */
.slab {
  position:relative; border-radius:var(--r-m);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgb(255 255 255 / .38),transparent 60%),
    color-mix(in oklab,var(--hue-body) 55%,transparent);
  backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .75), inset 0 -1px 0 color-mix(in oklab,var(--hue-core) 30%,transparent),
    0 40px 80px -30px color-mix(in oklab,var(--hue-core) 30%,rgb(40 60 90 / .3));
}
/* neutrale Glasfläche für Panels */
.glass {
  border-radius:var(--r-m);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgb(255 255 255 / .32),transparent 60%),var(--panel);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 var(--panel-edge), inset 0 -1px 0 var(--line), var(--shadow-rest);
}

/* Aurora-Pille: der eine Fokus pro Ansicht */
.pill { position:relative; overflow:hidden; isolation:isolate; border:0; display:inline-flex; align-items:center; gap:12px;
  min-height:56px; padding:0 34px; border-radius:var(--r-pill); background:linear-gradient(#FBFBFD,#EFEFF3);
  box-shadow:inset 0 2px 2px #fff, inset 0 -3px 6px rgb(0 0 0 / .06), 0 1px 0 rgb(255 255 255 / .9), 0 18px 30px -16px rgb(30 30 60 / .25); }
.pill:hover { box-shadow:inset 0 2px 2px #fff, inset 0 -3px 6px rgb(0 0 0 / .06), 0 1px 0 rgb(255 255 255 / .9), 0 30px 44px -18px rgb(242 112 138 / .45); }
.pill::before { content:""; position:absolute; z-index:-1; width:62%; aspect-ratio:1; top:-70%;
  left:calc(42% + (var(--mx,70%) - 50%) * .3);
  background:radial-gradient(closest-side at 45% 35%,var(--au-1),transparent),radial-gradient(closest-side at 35% 75%,var(--au-2),transparent),
    radial-gradient(closest-side at 75% 60%,var(--au-3),transparent);
  filter:blur(18px); opacity:.9; transition:left var(--t-soft) var(--spring-soft), scale var(--t-juicy) var(--spring-juicy);
  animation:swirl 6s linear infinite; }
.pill:hover::before { scale:1.25; }
.pill.flare::before { animation:swirl 6s linear infinite, flare 700ms var(--ease-out); }
.pill[data-state="loading"]::before { animation:swirl 1.2s linear infinite, orbit 2.4s ease-in-out infinite; }
@keyframes swirl { to { rotate:360deg; } }
@keyframes flare { 30% { scale:2.2; opacity:1; } }
@keyframes orbit { 50% { left:-10%; } }
.pill-label { display:inline-block; background:linear-gradient(90deg,#8C7DA3 0%,#3A3647 38%,#3A3647 62%,#fff 96%); -webkit-background-clip:text; background-clip:text; color:transparent;
  font:600 18px/1 var(--sans); white-space:nowrap; }
.pill:focus-visible { outline-color:var(--au-1); border-radius:var(--r-pill); }

/* Tasten-Chips */
.chip { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:44px; min-height:44px; padding:0 16px; border-radius:14px; border:0;
  background:linear-gradient(#F6F5F9,#E6E5EC); color:#55535F; font:500 14px var(--sans);
  box-shadow:inset 0 1px 0 #fff, inset 0 -3px 0 rgb(0 0 0 / .07), 0 8px 14px -10px rgb(30 30 60 / .3); }
.chip:active { box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgb(0 0 0 / .07); }
.chip[aria-pressed="true"] { color:#fff; text-shadow:0 1px 2px color-mix(in oklab,var(--hue-core) 60%,black);
  background:radial-gradient(90% 90% at 35% 25%,var(--hue-body),var(--hue-core));
  box-shadow:inset 0 1px 1px rgb(255 255 255 / .6), inset 0 -3px 6px color-mix(in oklab,var(--hue-core) 60%,black 10%), 0 10px 18px -10px var(--hue-core); }
kbd { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:7px; font:500 10px var(--mono); color:var(--ink-soft);
  background:linear-gradient(#F6F5F9,#E6E5EC); box-shadow:inset 0 1px 0 #fff, inset 0 -2px 0 rgb(0 0 0 / .08); }

/* Jelly-Icons: eine Bewegung pro Icon, ausgelöst vom Elternteil */
.ico { width:28px; height:28px; overflow:visible; flex:none; }
.ico * { transform-box:fill-box; transition:transform var(--t-bounce) var(--spring-bounce); }
.ico .m { transform-origin:50% 100%; }
:is(button,a,.card):is(:hover,:focus-visible,[aria-current="page"],[aria-pressed="true"]) .ico-cube .m { transform:translateY(-3px) rotate(-8deg); }
:is(button,a,.card):is(:hover,:focus-visible,[aria-current="page"],[aria-pressed="true"]) .ico-sprite .m { transform:scale(1.18,.86); }
:is(button,a,.card):is(:hover,:focus-visible,[aria-current="page"],[aria-pressed="true"]) .ico-wave .m { transform:scaleY(1.5); }
:is(button,a,.card):is(:hover,:focus-visible,[aria-current="page"],[aria-pressed="true"]) .ico-pad .m { transform:translateY(-2px) scale(1.2); }
:is(button,a,.card):is(:hover,:focus-visible,[aria-current="page"],[aria-pressed="true"]) .ico-folder .m { transform:perspective(40px) rotateX(-18deg) scaleY(.94); }
.ico-wave .m:nth-of-type(2) { transition-delay:50ms } .ico-wave .m:nth-of-type(3) { transition-delay:100ms }

/* Saft-Schicht */
.fx { position:fixed; pointer-events:none; z-index:50; border-radius:50%; }
.float { position:fixed; pointer-events:none; z-index:50; font:600 16px var(--sans); }
@property --n { syntax:'<integer>'; inherits:false; initial-value:0; }
.count { display:inline-block; counter-reset:n var(--n); transition:--n 800ms var(--spring-soft); }
.count::after { content:counter(n); font-variant-numeric:tabular-nums; }

/* Ton-Schalter */
.sound svg { width:18px; height:18px; overflow:visible; }
.sound .wave { transform-box:fill-box; transform-origin:0 50%; transition:scale 500ms var(--spring-juicy), opacity 200ms; }
.sound .wave:nth-of-type(2) { transition-delay:60ms; }
.sound[aria-pressed="false"] .wave { scale:0 1; opacity:0; }
.sound .slash { stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset 300ms var(--ease-out); }
.sound[aria-pressed="false"] .slash { stroke-dashoffset:0; }

@keyframes nope { 20% { translate:-6px 0 } 45% { translate:5px 0 } 70% { translate:-3px 0 } }
.nope { animation:nope 360ms linear; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; }
  [data-glow] { --mx:50% !important; --my:0% !important; }
}
@media (prefers-reduced-transparency:reduce) { .slab, .glass { backdrop-filter:none; -webkit-backdrop-filter:none; } .slab { background:var(--hue-body); } .glass { background:var(--canvas-2); } }
@supports not (backdrop-filter:blur(1px)) { .slab { background:color-mix(in oklab,var(--hue-body) 92%,white); } .glass { background:var(--canvas-2); } }

/* Kopfleiste nach Higgsfield-Schnitt: Logo, flache Linkreihe, rechts Preise + Aktion.
   Genutzt von Landingpage und Preisseite; das Studio hat stattdessen die Seitenleiste. */
.topnav { position:fixed; inset:0 0 auto; z-index:40; height:56px; display:flex; align-items:center; gap:4px; padding:0 16px;
  background:color-mix(in oklab,var(--canvas) 78%,transparent); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 var(--line); }
.topnav .logo { font:700 15px var(--serif); letter-spacing:.06em; text-decoration:none; margin-right:14px; white-space:nowrap; }
.topnav .links { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; min-width:0; flex:1; }
.topnav .links a { font:500 14px var(--sans); color:var(--ink-soft); text-decoration:none; padding:8px 10px; border-radius:10px; white-space:nowrap; display:inline-flex; gap:6px; align-items:center; }
.topnav .links a:hover, .topnav .links a[aria-current="page"] { color:var(--ink); background:rgb(22 21 26 / .05); }
.topnav .sep { width:1px; height:18px; background:var(--line); align-self:center; margin:0 6px; flex:none; }
.tag { font:600 9px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase; padding:4px 6px; border-radius:6px; color:#fff; background:var(--tang-core); }
.tag.soft { color:var(--ink-soft); background:rgb(22 21 26 / .06); }
.topnav .right { display:flex; gap:8px; align-items:center; flex:none; }
.topnav .right .chip { min-height:38px; font-size:13px; padding:0 14px; }
.topnav .price-chip { position:relative; }
.topnav .price-chip .tag { position:absolute; left:50%; bottom:-8px; translate:-50% 0; white-space:nowrap; }
.btn-hero { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:0 16px; border:0; border-radius:12px; text-decoration:none; cursor:pointer;
  font:600 14px var(--sans); color:#fff; background:radial-gradient(120% 140% at 30% 0%,var(--tang-body),var(--tang-core));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .5), inset 0 -3px 0 rgb(0 0 0 / .12), 0 10px 22px -12px var(--tang-core); }
@media (max-width:760px) { .topnav .links { display:none; } .topnav { justify-content:space-between; } }