@font-face{font-family:"Barlow Condensed";font-weight:900;font-display:swap;src:url(/assets/barlow-condensed-black.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(/assets/barlow-condensed-semibold.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(/assets/inter-regular.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(/assets/inter-medium.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(/assets/inter-semibold.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(/assets/inter-bold.woff2) format("woff2")}

:root{
  --ink:#111113;--text:#2A2A2E;--mut:#8E8E96;--bg:#fff;--line:#E6E6EB;--foot:#EDECF1;
  --lavender:#ADB0EE;--butter:#FCE0A4;--pink:#EDAADF;
  --cream:#FDF5E6;--sky:#E8F0FE;--rose:#FDE6E0;
  --green:#47B25A;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --radius:72px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light only}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:900;color:var(--ink);letter-spacing:-.005em;margin:0}

.wrap,.wrap-wide{width:min(1200px,100% - 32px);margin-inline:auto}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;padding:30px 36px 32px}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.brand img{width:48px;height:auto}
.brand span{font-family:var(--display);font-weight:900;font-size:32px;line-height:1;color:var(--ink)}
.store{display:inline-flex;align-items:center;gap:9px;background:#000;color:#fff;text-decoration:none;border:1.5px solid #A6A6A6;border-radius:9px;padding:7px 14px 7px 11px;transition:transform .15s ease}
.store:hover{transform:translateY(-1px)}
.store svg{width:22px;height:26px}
.store span{display:flex;flex-direction:column;font:600 21px/1 -apple-system,BlinkMacSystemFont,Inter,sans-serif;letter-spacing:-.02em}
.store small{font:500 10px/1.2 Inter,sans-serif;letter-spacing:0;margin-bottom:2px}

/* Hero */
.scene{position:relative;height:625px;border-radius:var(--radius);overflow:hidden;background:#FBDDBE;isolation:isolate}
.scene .sky{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.scene .sky.next{background:linear-gradient(180deg,#EAC195 0%,#EBC9A6 45%,#F3DDC4 100%)}
.scene .sky.pray{background:linear-gradient(180deg,#CDBBCB 0%,#DDC8CC 40%,#EDDAD3 72%,#F6E6DA 100%)}
.scene .sky.done{background:linear-gradient(180deg,#EEBE7C 0%,#EFC281 40%,#F7DFAB 100%)}
.scene[data-state=next] .sky.next,.scene[data-state=pray] .sky.pray,.scene[data-state=done] .sky.done{opacity:1}
.hills path{transition:fill 1.1s ease}
.hills .h1{fill:#C4DCA6}.hills .h2{fill:#A9CF93}.hills .h3{fill:#7DBA7F}
.scene[data-state=pray] .hills .h1{fill:#BCD2A8}.scene[data-state=pray] .hills .h2{fill:#9EC28E}.scene[data-state=pray] .hills .h3{fill:#72AC7A}
.scene[data-state=done] .hills .h1{fill:#E7DEA3}.scene[data-state=done] .hills .h2{fill:#B5C886}.scene[data-state=done] .hills .h3{fill:#94B973}
.scene[data-state=pray] .sun{transform:translateY(24px) scale(1.05);background:radial-gradient(circle,#FFE3B0 0 38%,rgba(255,227,176,.6) 52%,rgba(255,227,176,0) 70%)}
.scene[data-state=done] .sun{transform:scale(1.25);background:radial-gradient(circle,#FFE08A 0 38%,rgba(255,224,138,.6) 52%,rgba(255,224,138,0) 70%)}
.home-phone video{position:absolute;left:0;top:0;opacity:0;transition:opacity 1.1s ease}
.home-phone video.on{opacity:1}
.home-phone::before{content:"";display:block;padding-top:217.4%}
.scene h1{position:absolute;inset:30px 0 auto;text-align:center;font-size:clamp(40px,5.6vw,60px);line-height:1.02;z-index:4}
.sun{position:absolute;left:50%;top:230px;width:330px;height:330px;margin-left:-165px;border-radius:50%;
  background:radial-gradient(circle,#FFE7A8 0 38%,rgba(255,231,168,.55) 52%,rgba(255,231,168,0) 70%);transition:transform 1.1s ease,opacity 1.1s ease,background 1.1s ease}
.hills,.chapel,.jesus,.cheer,.cloud,.dove,.star,.scene h1{transition:filter 1.4s ease,color 1.4s ease}
.hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:420px}
.deco{position:absolute;pointer-events:none}
.cloud.c1{width:150px;left:7%;top:60px;opacity:.9}
.dove{width:92px;right:12%;top:120px;transform:scaleX(-1) rotate(-6deg)}
.star.s1{width:34px;left:30%;top:150px}
.star.s2{width:26px;right:28%;top:210px;transform:rotate(12deg)}
.chapel{width:150px;right:8%;bottom:245px}
.jesus{width:220px;left:10%;bottom:40px;z-index:2}
.cheer{width:190px;right:14%;bottom:40px;z-index:2}

.phone{position:relative;overflow:hidden;background:#fff;border:9px solid #fff;border-bottom:0;border-radius:52px 52px 0 0;box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.phone img,.phone video{width:100%;height:auto;display:block;border-radius:43px 43px 0 0;background:#fff}
.scene .phone{position:absolute;left:50%;bottom:0;width:282px;height:440px;margin-left:-141px;z-index:3}

/* Stats */
.stats{display:flex;justify-content:center;gap:30px;padding:56px 16px 40px}
.stat{display:flex;align-items:center;gap:6px;color:#C9C9CF}
.laurel{width:22px;height:62px}
.laurel.flip{transform:scaleX(-1)}
.stat p{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:78px}
.stat strong{font-family:var(--display);font-weight:900;font-size:34px;line-height:1;color:var(--ink)}
.stat span{font:700 11px/1.2 Inter,sans-serif;color:var(--ink);margin-top:4px}

/* Features */
.features{display:grid;gap:64px;padding:24px 0 72px}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.feature.flip .copy{order:2}
.copy h2{font-size:clamp(36px,3.6vw,46px);line-height:1.02;margin-bottom:14px}
.copy p{margin:0;color:var(--mut);font-size:19px;max-width:44ch;letter-spacing:.01em}
.visual{position:relative;height:440px;border-radius:var(--radius);overflow:hidden;display:flex;justify-content:center;align-items:flex-end}
.visual.lavender{background:var(--lavender)}
.visual.butter{background:var(--butter)}
.visual.pink{background:var(--pink)}
.phone.sm{width:196px;height:auto;border-width:6px;border-radius:34px 34px 0 0}
.phone.sm img,.phone.sm video{border-radius:28px 28px 0 0}
.float{position:absolute;width:236px;height:auto;border-radius:18px;box-shadow:0 12px 32px rgba(40,30,80,.18);z-index:2}
.float.right{left:calc(50% - 10px);top:30px;--r:-4deg;transform:rotate(var(--r));animation:bob 5s ease-in-out infinite}
.float.left{right:calc(50% - 20px);top:28px;--r:-3deg;transform:rotate(var(--r));animation:bob 5s ease-in-out infinite .8s}
@keyframes bob{50%{transform:translateY(-8px) rotate(var(--r))}}

/* Stages + help (shared heading) */
.stages,.help{text-align:center;padding:24px 0 72px}
.stages h2,.help h2{font-size:clamp(38px,3.6vw,46px);line-height:1.05}
.lead{margin:8px auto 34px;color:var(--mut);font-size:18px;max-width:60ch}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stage{border-radius:56px;padding:28px 34px 34px}
.stage.cream{background:var(--cream)}
.stage.sky{background:var(--sky)}
.stage.rose{background:var(--rose)}
.stage img{height:120px;width:auto;margin:0 auto 12px}
.breathe{transform-origin:50% 100%;animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.035,.975)}}
.mystery{position:relative;width:max-content;margin:0 auto 12px}
.mystery img{margin:0;filter:brightness(0) opacity(.12) blur(1.5px)}
.lock{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#1C1C1E;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.lock svg{width:16px;height:19px}
.cta{display:inline-block;margin-top:30px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:17px;padding:16px 28px;border-radius:999px;transition:transform .15s ease}
.cta:hover{transform:translateY(-2px)}
.cta:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.stage h3{font:600 20px/1.3 Inter,sans-serif;color:var(--ink)}
.stage .meta{margin:4px 0 12px;color:#A3A3AA;font-weight:500;font-size:16px}
.stage p:last-child{margin:0;color:var(--ink);font-weight:500;font-size:19px;line-height:1.55}

.help-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;height:205px;border:2px solid var(--line);border-radius:56px;text-decoration:none;color:var(--ink);font-weight:600;font-size:19px;transition:border-color .15s ease,transform .15s ease}
.help-card:hover{border-color:#CFCFD6;transform:translateY(-2px)}
.help-card:focus-visible,.store:focus-visible,.brand:focus-visible,.foot a:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.help-card svg{height:60px;width:auto}

/* Footer */
.foot{background:var(--foot);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 16px 34px;margin-bottom:32px}
.foot .brand img{width:70px}
.foot .brand span{font-size:34px}
.foot nav{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:6px}
.foot nav a,.foot p{color:#6E6E76;font-size:15px;text-decoration:none;margin:0}
.foot nav a:hover{color:var(--ink)}
.foot p{margin-top:12px}

/* Tablet */
@media (max-width:900px){
  .jesus{width:170px;left:3%}
  .cheer{width:150px;right:4%}
  .chapel{width:120px;right:4%}
  .feature,.feature.flip{grid-template-columns:1fr;gap:22px}
  .feature.flip .copy{order:0}
  .cards{grid-template-columns:1fr}
}
/* Phone */
@media (max-width:600px){
  :root{--radius:40px}
  .top{padding:18px 4px 20px}
  .brand span{font-size:28px}
  .brand img{width:40px}
  .store{padding:6px 11px 6px 9px;gap:7px}
  .store svg{width:17px;height:20px}
  .store span{font-size:16px}
  .store small{font-size:8px}
  .scene{height:560px}
  .scene h1{top:30px;font-size:56px;line-height:.98}
  .scene .phone{width:230px;height:360px;margin-left:-115px;border-width:7px;border-radius:40px 40px 0 0}
  .scene .phone img,.scene .phone video{border-radius:33px 33px 0 0}
  .hills{height:300px}
  .sun{top:190px;width:260px;height:260px;margin-left:-130px}
  .cloud.c1{width:96px;left:2%;top:150px}
  .dove{width:62px;right:4%;top:150px}
  .star.s1{left:14%;top:260px;width:26px}
  .star.s2{right:14%;top:250px}
  .jesus{width:112px;left:-8px;bottom:14px}
  .cheer{width:104px;right:-6px;bottom:14px}
  .chapel{display:none}
  .stats{gap:12px;padding:40px 0 28px}
  .features{gap:48px}
  .copy h2{font-size:36px}
  .copy p{font-size:17px}
  .visual{height:440px}
  .float{width:210px}
  .float.right{left:auto;right:12px;top:22px}
  .float.left{right:auto;left:12px;top:22px}
  .phone.sm{width:180px}
  .stage{border-radius:40px}
  .help-card{height:170px;gap:24px;border-radius:40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Unterseiten (Help Center, Themen, Rechtliches) */
.page-title{font-size:clamp(38px,3.6vw,46px);line-height:1.05}
.help.sub{padding-top:8px}
.faqs{display:grid;gap:10px;margin-top:40px;text-align:left}
.faq{background:#F2F2F5;border-radius:18px;padding:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-weight:600;font-size:17px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid #A3A3AA;border-bottom:2px solid #A3A3AA;transform:rotate(45deg) translateY(-3px);transition:transform .2s ease}
.faq[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq summary:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:18px}
.faq p{margin:0;padding:0 22px 20px;color:#55555C;max-width:75ch}
.faq a,.contact-copy a,.doc a{color:#2E8B45}
.topic{padding:8px 0 72px}
.banner{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:340px;border-radius:var(--radius);padding:40px 64px;overflow:hidden}
.banner.lavender{background:var(--lavender)}
.banner.butter{background:var(--butter)}
.banner.pink{background:var(--pink)}
.banner h1{font-size:clamp(40px,4.4vw,56px);line-height:1.02;max-width:12ch}
.banner img{width:260px;height:auto;flex:none;animation:bob 5s ease-in-out infinite;--r:0deg}
.contact-copy{max-width:640px;margin:36px 0 0 28px;font-size:17px}
.contact-copy p{margin:0 0 14px;color:#55555C}
.contact-copy strong{color:var(--ink);font-weight:600}
.other{font-size:clamp(32px,3vw,38px);margin:56px 0 20px}
.cards.two{grid-template-columns:repeat(3,1fr)}
.help-card.sm{height:170px;gap:22px;border-radius:44px;font-size:17px}
.help-card.sm svg{height:48px}
.doc-wrap{padding:8px 0 72px}
.doc{max-width:760px;margin:0 auto;color:#34343A}
.doc h1{font-size:clamp(38px,3.6vw,46px);line-height:1.05;margin-bottom:6px}
.doc h2{font-family:Inter,sans-serif;font-weight:700;font-size:20px;margin:34px 0 8px}
.doc p,.doc li{line-height:1.65}
.doc .muted{color:var(--mut);font-size:15px}
@media (max-width:900px){
  .cards.two{grid-template-columns:1fr}
  .banner{padding:32px 36px}
  .banner img{width:190px}
}
@media (max-width:600px){
  .banner{min-height:0;flex-direction:column;align-items:flex-start;padding:30px 26px 0;border-radius:40px}
  .banner img{width:170px;align-self:flex-end;margin-top:-10px}
  .faq summary{padding:16px 18px;font-size:16px}
  .faq p{padding:0 18px 18px}
  .contact-copy{margin-left:4px}
  .help-card.sm{border-radius:36px}
}

/* Wortmarke (monoline, geloopte l/b) */
.brand .wordmark{width:auto;height:26px}
.foot .brand .wordmark{height:30px;width:auto}
/* Kopf = Footer-Größen, Desktop und mobil (Icon 70, Schriftzug 30) */
.top .brand img{width:70px}
.top .brand .wordmark{height:30px;width:auto}

/* Sticker im Circle-Visual (Stil = Lambie-Mitteilungen aus Figma) */
@media (max-width:600px){
  .brand .wordmark{height:22px}
  .visual.pink .float{display:none}
}

/* Waitlist */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.waitlist{text-align:center;padding:56px 0 56px}
.waitlist h2{font-size:clamp(34px,3.2vw,42px);line-height:1.05}
.wl-sub{margin:8px 0 22px;color:var(--mut);font-size:18px}
.wl-form{display:flex;gap:8px;max-width:480px;margin:0 auto;padding:6px;border:2px solid var(--line);border-radius:999px;background:#fff;transition:border-color .15s ease}
.wl-form:focus-within{border-color:var(--green)}
.wl-form input{flex:1;min-width:0;border:0;outline:0;background:none;font:500 17px Inter,sans-serif;color:var(--ink);padding:0 16px}
.wl-form button{flex:none;border:0;border-radius:999px;background:var(--ink);color:#fff;font:600 16px Inter,sans-serif;padding:14px 22px;cursor:pointer;transition:transform .15s ease}
.wl-form button:hover{transform:translateY(-1px)}
.wl-form button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.wl-form button:disabled{opacity:.6}
.wl-form.ok{border-color:var(--green);justify-content:center}
.wl-done{margin:0;padding:12px;font-weight:600;color:#2E8B45}
.wl-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wl-android{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;color:var(--text);font-size:15px;cursor:pointer}
.wl-android input{width:18px;height:18px;margin:0;accent-color:var(--green);cursor:pointer}
.wl-form.ok ~ .wl-android{display:none}
.wl-note{margin:12px 0 0;color:var(--mut);font-size:14px}
.wl-note a{color:inherit}
/* Testimonials (BitePal) */
.review{border-radius:56px;padding:32px 34px 36px}
.review.cream{background:var(--cream)}.review.sky{background:var(--sky)}.review.rose{background:var(--rose)}
.avatar{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;background:#fff center/60% no-repeat}
.avatar.initial{display:flex;align-items:center;justify-content:center;color:#fff;font:700 22px/1 Inter,sans-serif}
.avatar.ph{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B8B8C0'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M3 21c1-5 5-7 9-7s8 2 9 7z'/%3E%3C/svg%3E")}
.review h3{font:600 20px/1.3 Inter,sans-serif;color:var(--ink)}
.review .meta{margin:4px 0 14px;color:#A3A3AA;font-weight:500;font-size:16px}
.review p:last-child{margin:0;color:var(--ink);font-weight:500;font-size:19px;line-height:1.55}
@media (max-width:600px){.review{border-radius:40px}.wl-form button{padding:13px 16px}}

/* Circle-Visual: Mitteilungen steigen HINTER dem Handy auf und lösen sich oben auf */
.visual.pink .phone{z-index:2}
.rise{position:absolute;inset:0;z-index:1;pointer-events:none}
.sticker{position:absolute;bottom:40px;display:flex;align-items:center;gap:7px;width:max-content;padding:6px 12px 6px 6px;border-radius:999px;white-space:nowrap;background:rgba(255,255,255,.95);box-shadow:0 10px 28px rgba(60,20,70,.16);text-align:left;opacity:0;animation:rise 7.5s linear infinite}
.sticker .ic{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;flex:none;font-style:normal;font-size:12px;line-height:1}
.sticker .ic.heart{background:#FDE4E7}
.sticker .ic.remind{background:#FFF1CF}
.sticker b{display:block;font-size:12px;line-height:1.2;color:var(--ink)}
.sticker span{display:none}
.sticker.l{right:calc(50% + 88px)}
.sticker.r{left:calc(50% + 88px)}
.rise .sticker:nth-child(2){animation-delay:-5s}
.rise .sticker:nth-child(3){animation-delay:-2.5s}
/* Zu wenig Platz neben dem Handy (zweispaltig, schmal): Pillen davor, am Rand */
@media (min-width:901px) and (max-width:1240px){
  .rise{z-index:3}
  .sticker.l{left:12px;right:auto}
  .sticker.r{right:12px;left:auto}
}
@keyframes rise{
  0%{opacity:0;transform:translateY(30px) scale(.96);filter:blur(2px)}
  10%{opacity:1;filter:blur(0)}
  34%{opacity:1;filter:blur(0)}
  52%,100%{opacity:0;transform:translateY(-170px) scale(.96);filter:blur(3px)}
}
@media (max-width:600px){
  .rise{z-index:3}
  .sticker.l{left:12px;right:auto}
  .sticker.r{right:12px;left:auto}
}