/* Aus dem Claude-Design-Canvas übernommen (apps/web/premium/export.mjs) – nicht von Hand ändern. */
.s-wenn{display:contents}.s-wenn[hidden]{display:none}
.s-seite .s-kugel{position:relative;border-radius:50%;flex-shrink:0}
.s-seite .s-kugel .s-k{position:absolute;inset:0;border-radius:50%}
.s-seite .s-kugel .s-glanz{position:absolute;left:52%;top:13%;width:30%;height:21%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.92),rgba(255,255,255,0) 70%);transform:rotate(38deg)}
.s-seite .s-kugel .s-wirbel{position:absolute;inset:10%;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0) 40%,rgba(255,220,180,.4) 60%,rgba(255,255,255,0));filter:blur(6px);animation:s-drehen 2.4s linear infinite;mix-blend-mode:screen}
.s-seite .s-kugel .s-welle{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(235,235,255,.55);animation:s-welle 2.2s ease-out infinite}
.s-seite .s-kugel .s-welle.s-w2{animation-delay:.73s}
.s-seite .s-kugel .s-welle.s-w3{animation-delay:1.46s}
.s-seite .s-kugel .s-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,221,140,.7);animation:s-ringaus 2.6s ease-out infinite}
@keyframes s-atmen{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes s-bluehen{0%,100%{transform:scale(1);filter:brightness(1)}18%{transform:scale(1.08);filter:brightness(1.18)}36%{transform:scale(.98)}52%{transform:scale(1.01)}}
@keyframes s-lauschen{0%,100%{transform:scale(1.02)}50%{transform:scale(1.07)}}
@keyframes s-neigen{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(5%) scale(1.02)}}
@keyframes s-erfolg{0%,100%{transform:scale(1);filter:brightness(1)}12%{transform:scale(1.1);filter:brightness(1.3)}30%{transform:scale(.97);filter:brightness(1.05)}46%{transform:scale(1)}}
@keyframes s-melden{0%,56%,100%{transform:translateY(0)}10%{transform:translateY(-7%)}20%{transform:translateY(0)}30%{transform:translateY(-5%)}40%{transform:translateY(0)}}
@keyframes s-drehen{to{transform:rotate(360deg)}}
@keyframes s-welle{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.9);opacity:0}}
@keyframes s-ringaus{0%,8%{transform:scale(1);opacity:0}14%{opacity:.9}60%,100%{transform:scale(1.8);opacity:0}}
@media (prefers-reduced-motion: reduce){.s-seite .s-kugel,.s-seite .s-kugel *{animation:none!important}
}
:root{--feder:cubic-bezier(.2,.9,.25,1.02)}
@supports (transition-timing-function: linear(0, 1)){:root{--feder:linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1)}
}
html{scroll-behavior:smooth}
.s-seite a,.s-seite button{-webkit-tap-highlight-color:transparent}
.s-seite a:focus-visible,.s-seite button:focus-visible{outline:2px solid #FF7A45;outline-offset:3px;border-radius:8px}
.s-seite .s-inhalt{max-width:1200px;margin:0 auto;padding-left:40px;padding-right:40px;box-sizing:border-box}
.s-seite .s-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px}
.s-seite .s-h1{font-size:clamp(46px,7.2vw,96px)}
.s-seite .s-h2{font-size:clamp(38px,5vw,64px)}
.s-seite .s-nur-klein{display:none!important}
.s-seite .s-knopf{transition:transform .25s var(--feder),box-shadow .25s ease,background-color .2s ease}
.s-seite .s-knopf:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.18)}
.s-seite .s-knopf:active{transform:scale(.97)}
.s-seite .s-navlink{transition:color .2s ease}
.s-seite .s-navlink:hover{color:#FFFFFF!important}
.s-seite .s-wort{display:inline-block;animation:s-wort 1.1s var(--feder) both}
.s-seite .s-w1{animation-delay:.1s}
.s-seite .s-w2{animation-delay:.22s}
.s-seite .s-w3{animation-delay:.42s}
.s-seite .s-w4{animation-delay:.54s}
@keyframes s-wort{from{opacity:0;transform:translateY(.45em);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.s-seite .s-auftritt{animation:s-auftritt 1s var(--feder) both}
.s-seite .s-k1{animation-delay:.05s}
.s-seite .s-k3{animation-delay:.7s}
.s-seite .s-k4{animation-delay:.85s}
@keyframes s-auftritt{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.s-seite .s-kugel-auftritt{animation:s-kugelauf 1.8s var(--feder) both}
@keyframes s-kugelauf{from{opacity:0;transform:scale(.7);filter:blur(16px)}to{opacity:.9;transform:none;filter:none}}
.s-seite .s-telefon-auftritt{animation:s-telefonauf 1.4s var(--feder) .3s both}
@keyframes s-telefonauf{from{opacity:0;transform:translateY(60px) rotate(3deg)}to{opacity:1;transform:none}}
.s-seite .s-schweben{animation:s-schweben 7s ease-in-out infinite}
@keyframes s-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.s-seite .s-laufband-spur{animation:s-laufband 38s linear infinite}
@keyframes s-laufband{to{transform:translateX(-50%)}}
.s-seite .s-haken{animation:s-haken 8s ease-in-out infinite}
.s-seite .s-posten{animation:s-durch 8s ease-in-out infinite}
.s-seite .s-hk1,.s-seite .s-pt1{animation-delay:.6s}
.s-seite .s-hk2,.s-seite .s-pt2{animation-delay:1.6s}
.s-seite .s-hk4,.s-seite .s-pt4{animation-delay:2.8s}
.s-seite .s-hk0,.s-seite .s-pt0,.s-seite .s-hk3,.s-seite .s-pt3{animation:none}
.s-seite .s-hk0{background:#0E0E10;border-color:#0E0E10}
.s-seite .s-pt0{color:#86868B;text-decoration:line-through}
@keyframes s-haken{0%,8%{background:transparent;border-color:#86868B}14%,86%{background:#0E0E10;border-color:#0E0E10}94%,100%{background:transparent;border-color:#86868B}}
@keyframes s-durch{0%,8%{color:#0E0E10;text-decoration:none}14%,86%{color:#86868B;text-decoration:line-through}94%,100%{color:#0E0E10;text-decoration:none}}
.s-seite .s-sam-toast{animation:s-samtoast 8s var(--feder) infinite}
@keyframes s-samtoast{0%,30%{opacity:0;transform:translate(-50%,16px)}36%,80%{opacity:1;transform:translate(-50%,0)}88%,100%{opacity:0;transform:translate(-50%,16px)}}
.s-seite .s-scanlinie{animation:s-scan 3.2s ease-in-out infinite}
@keyframes s-scan{from{top:-120px}to{top:100%}}
.s-seite .s-planzeile{animation:s-planzeile 6s ease-in-out infinite}
.s-seite .s-z1{animation-delay:.2s}
.s-seite .s-z2{animation-delay:.5s}
.s-seite .s-z3{animation-delay:.8s}
.s-seite .s-z4{animation-delay:1.1s}
@keyframes s-planzeile{0%{opacity:0;transform:translateX(-12px)}10%,85%{opacity:1;transform:none}100%{opacity:0}}
.s-seite .s-pfeil svg{animation:s-pfeil 2s ease-in-out infinite}
@keyframes s-pfeil{50%{transform:translateX(8px)}}
.s-seite .s-blase{animation:s-blase 9s var(--feder) infinite}
.s-seite .s-c2{animation-delay:1.2s}
.s-seite .s-c3{animation-delay:2.4s}
@keyframes s-blase{0%{opacity:0;transform:translateY(14px) scale(.98)}8%,82%{opacity:1;transform:none}92%,100%{opacity:0}}
.s-seite .s-quelle-icon{transition:transform .5s var(--feder),background-color .3s}
.s-seite .s-quelle:hover .s-quelle-icon{transform:scale(1.08) rotate(-4deg);background:#0E0E10;color:#FFFFFF}
.s-seite .s-schieber{transition:left .5s var(--feder)}
.s-seite .s-antwort{animation:s-auftritt .5s var(--feder) both}
@supports (animation-timeline: view()){.s-seite .s-einblenden{animation:s-einblenden linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
@keyframes s-einblenden{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
.s-seite .s-ringseg{animation:s-ringzeichnen linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
@keyframes s-ringzeichnen{from{stroke-dasharray:0 999}}
.s-seite .s-zoomen{animation:s-zoomen linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
@keyframes s-zoomen{from{transform:scale(1.14)}to{transform:scale(1)}}
.s-seite .s-erzaehlung{timeline-scope:--s1,--s2,--s3}
.s-seite .s-s1{view-timeline:--s1 block}
.s-seite .s-s2{view-timeline:--s2 block}
.s-seite .s-s3{view-timeline:--s3 block}
.s-seite .s-buehnenbild{opacity:0}
.s-seite .s-b1{animation:s-bild1 linear both;animation-timeline:--s1;animation-range:cover 0% cover 100%}
.s-seite .s-b2{animation:s-bild linear both;animation-timeline:--s2;animation-range:cover 0% cover 100%}
.s-seite .s-b3{animation:s-bild3 linear both;animation-timeline:--s3;animation-range:cover 0% cover 100%}
@keyframes s-bild{0%,25%{opacity:0;transform:translateY(40px) scale(.96)}35%,65%{opacity:1;transform:none}75%,100%{opacity:0;transform:translateY(-40px) scale(.96)}}
@keyframes s-bild1{0%,65%{opacity:1;transform:none}75%,100%{opacity:0;transform:translateY(-40px) scale(.96)}}
@keyframes s-bild3{0%,25%{opacity:0;transform:translateY(40px) scale(.96)}35%,100%{opacity:1;transform:none}}
.s-seite .s-held-bild .s-telefon-held{animation:s-telefonauf 1.4s var(--feder) .3s both,s-parallax linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 900px}
@keyframes s-parallax{to{translate:0 -120px}}

}
@supports not (animation-timeline: view()){.s-seite .s-buehnenbild{opacity:0}
.s-seite .s-b1{opacity:1}
}
@media (max-width: 980px){.s-seite .s-inhalt{padding-left:24px;padding-right:24px}
.s-seite .s-zwei{grid-template-columns:minmax(0,1fr);gap:48px}
.s-seite .s-nur-gross{display:none!important}
.s-seite .s-nur-klein{display:flex!important}
.s-seite .s-erzaehlung{grid-template-columns:minmax(0,1fr)!important}
.s-seite .s-schritt{min-height:0!important;padding:48px 0}
.s-seite .s-held-bild{height:620px!important}
.s-seite .s-telefon-held{zoom:.82}
.s-seite .s-drei{grid-template-columns:minmax(0,1fr)!important}
.s-seite .s-plan-fluss{grid-template-columns:minmax(0,1fr)!important}
.s-seite .s-plan-fluss .s-pfeil{transform:rotate(90deg)}
.s-seite .s-fuss{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.s-seite #fragen .s-zwei>div:first-child{position:static!important}

}
@media (max-width: 640px){.s-seite .s-inhalt{padding-left:16px;padding-right:16px}
.s-seite .s-held-bild{height:560px!important}
.s-seite .s-telefon-held{zoom:.7}
.s-seite .s-held-bild .s-chip{display:none!important}
.s-seite > section:not(.s-held){padding-top:88px!important;padding-bottom:88px!important}
.s-seite .s-kochbuch-bild{min-height:420px!important}
.s-seite .s-fuss{grid-template-columns:minmax(0,1fr)!important}
.s-seite section{scroll-margin-top:72px}

}
.s-seite .s-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.s-seite .s-s7{grid-column:span 7}
.s-seite .s-s5{grid-column:span 5}
.s-seite .s-s6{grid-column:span 6}
.s-seite .s-vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.s-seite .s-wring{width:168px;height:168px}
.s-seite .s-wring-zahl{font-size:46px}
.s-seite .s-stern{position:absolute;width:2px;height:2px;border-radius:1px;background:#FFFFFF;box-shadow:0 0 6px rgba(255,255,255,.8);animation:s-funkeln 4.2s ease-in-out infinite}
@keyframes s-funkeln{0%,100%{opacity:.12}50%{opacity:.85}}
.s-seite .s-live{animation:s-livepuls 2.4s ease-in-out infinite}
@keyframes s-livepuls{0%,100%{box-shadow:0 0 0 0 rgba(55,201,168,.5)}50%{box-shadow:0 0 0 6px rgba(55,201,168,0)}}
.s-seite .s-haptik{position:absolute;inset:-6px;border-radius:46px;border:2px solid rgba(255,154,85,.5);animation:s-haptik 2.2s ease-out infinite}
@keyframes s-haptik{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.18);opacity:0}}
.s-seite .s-uhr-schweben{animation:s-schweben 6s ease-in-out infinite}
.s-seite .s-rahmen-puls{animation:s-rahmenpuls 2.4s ease-in-out infinite}
@keyframes s-rahmenpuls{50%{opacity:.45}}
.s-seite .s-mitteilung{animation:s-mitteilung 7s var(--feder) infinite}
@keyframes s-mitteilung{0%,6%{opacity:0;transform:translateY(-14px) scale(.97)}14%,90%{opacity:1;transform:none}100%{opacity:1}}
.s-seite .s-welle-w span{animation:s-wellew 1.1s ease-in-out infinite;transform-origin:center}
@keyframes s-wellew{50%{transform:scaleY(.45)}}
.s-seite .s-zahl-wechsel{transition:color .3s ease}
.s-seite .s-quelle-link{text-decoration:underline;text-underline-offset:3px}
@supports (animation-timeline: view()){.s-seite .s-hypno{view-timeline:--hy block}
.s-seite .s-phase{transform-box:fill-box;transform-origin:center;animation:s-phase linear both;animation-timeline:--hy}
@keyframes s-phase{from{transform:scaleY(0);opacity:0}}
.s-seite .s-linie-zeichnen{animation:s-einblenden linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
.s-seite .s-balken-fuellen{animation:s-balkenf linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
@keyframes s-balkenf{from{width:0}}

}
@media (max-width: 980px){.s-seite .s-bento{grid-template-columns:minmax(0,1fr)}
.s-seite .s-s7,.s-seite .s-s5,.s-seite .s-s6{grid-column:auto}
.s-seite .s-vier{grid-template-columns:repeat(2,minmax(0,1fr))}
.s-seite .s-rechner-ergebnis{position:static!important}
}
@media (max-width: 640px){.s-seite .s-alarm-bild{flex-direction:column;align-items:center}
.s-seite .s-alarm-bild .s-uhr-schweben{position:relative!important;right:auto!important;bottom:auto!important;margin:-6px 18px 0 0;align-self:flex-end}
.s-seite .s-vier{grid-template-columns:minmax(0,1fr)}
.s-seite .s-wring{width:92px;height:92px}
.s-seite .s-wring-zahl{font-size:26px}
.s-seite .s-ringe b{font-size:15px!important}
.s-seite .s-werte{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.s-seite .s-dial{transform:scale(.86)}
}
@media (prefers-reduced-motion: reduce){.s-seite *{animation:none!important;transition:none!important}
.s-seite .s-buehnenbild{opacity:0}
.s-seite .s-b1{opacity:1}
html{scroll-behavior:auto}
}



/* Ergänzungen der echten Website zur übernommenen Startseite (nicht aus dem Canvas). */
/* Browser ohne Scroll-Zeitleisten (start.js setzt .s-ohne-zeitleiste): Einblenden und Szenenwechsel über Klassen. */
.s-seite.s-ohne-zeitleiste .s-einblenden{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform 1s var(--feder)}
.s-seite.s-ohne-zeitleiste .s-einblenden.s-sichtbar{opacity:1;transform:none}
.s-seite.s-ohne-zeitleiste .s-buehnenbild{opacity:0;transform:translateY(28px) scale(.97);transition:opacity .6s ease,transform .8s var(--feder)}
.s-seite.s-ohne-zeitleiste .s-buehnenbild.s-aktiv{opacity:1;transform:none}
/* Die Startseite beginnt unter dem Kopf der Website; Anker landen unter ihm. */
.s-seite section[id]{scroll-margin-top:76px}
.s-seite [hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){.s-seite.s-ohne-zeitleiste .s-einblenden,.s-seite.s-ohne-zeitleiste .s-buehnenbild.s-b1{opacity:1;transform:none}}
/* Kalorienrechner-Seite: derselbe Rechner direkt unter dem Seitenkopf (build.mjs, calculator). */
@media (max-width: 640px){.s-seite > section.rechner-premium{padding-top:0!important;padding-bottom:72px!important}}