/* The landing page carries its own stylesheet. style.css keeps serving
   datenschutz, support and 404 - it shares not a single class name with this
   file, so one common sheet would have meant restyling three text pages just
   to publish a new front page. */
@font-face{font-family:Archivo;src:url('/fonts/archivo-latin.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
:root{--paper:#f6f7ef;--ink:#203d2d;--green:#2f8052;--muted:#657165;--line:#d9dfd1;--lime:#d4e99b;--white:#fff;--radius:24px;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Archivo,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img{display:block;max-width:100%;height:auto}
figure,p,h1,h2,h3{margin:0}
svg{width:24px;height:24px;flex:none}
svg:has(use[href="#arrow"]),svg:has(use[href="#check"]){fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:3px solid var(--green);outline-offset:6px}
.shell{width:min(1240px,calc(100% - 96px));margin-inline:auto}
.symbol-library{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;top:-100px;left:20px;z-index:10;background:var(--ink);color:white;padding:12px 20px}
.skip:focus{top:12px}
.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}
.header{height:108px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;font-size:27px;font-weight:750;letter-spacing:-1.3px;line-height:1}
.brand svg{width:33px;height:33px;margin-right:9px}
.brand-dot{color:var(--green)}
.header nav{display:flex;gap:30px;font-size:13px;font-weight:550}
.header nav a:hover,.footer a:hover{color:var(--green);text-decoration:underline;text-underline-offset:5px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:var(--ink);color:white;padding:17px 25px;border-radius:9px;font-size:14px;font-weight:600;transition:background .2s,transform .2s;line-height:1.5}
.button:hover{background:var(--green);transform:translateY(-2px)}
.button-small{padding:12px 17px;font-size:12px;gap:15px}
.button-small svg{width:18px;height:18px}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:20px;min-height:735px;padding-top:72px;padding-bottom:62px;align-items:center}
.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:650;display:flex;align-items:center;gap:9px;line-height:1.6}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;flex:none}
h1{font-size:clamp(64px,6.6vw,92px);line-height:1.005;letter-spacing:-5.7px;font-weight:650;margin:27px 0 25px}
h1 span{color:var(--green)}
.hero-description{max-width:390px;color:var(--muted);font-size:15px;line-height:1.85}
.hero-actions{display:flex;gap:27px;align-items:center;margin-top:29px}
.text-link{display:inline-flex;align-items:center;gap:17px;font-size:13px;font-weight:600;border-bottom:1px solid var(--ink);padding-block:4px}
.text-link:hover{color:var(--green);border-color:var(--green)}
.text-link span{font-size:19px}
.release-note{display:flex;align-items:center;gap:9px;margin-top:19px;font-size:10px;color:var(--muted)}
.release-note svg{width:13px;height:13px;color:var(--green)}
.release-note>span{width:3px;height:3px;border-radius:50%;background:#8b9689;margin-inline:4px}
.hero-visual{position:relative;min-height:590px;display:grid;place-items:center;isolation:isolate}
.hero-disc{position:absolute;width:480px;max-width:96%;aspect-ratio:1;border-radius:50%;background:#e3eacd;z-index:-2;top:73px;left:50%;transform:translateX(-50%)}
.orbit{position:absolute;border:1px solid #cbd8b8;border-radius:50%;z-index:-1;pointer-events:none;top:100px;left:50%;width:540px;max-width:107%;height:370px;transform:translateX(-50%) rotate(-34deg)}
.orbit-two{transform:translateX(-50%) rotate(41deg);width:490px;height:430px;top:70px;border-color:#d4dfc0}
.orbit-one:after{content:'';width:10px;height:10px;border-radius:50%;position:absolute;background:#8da76e;top:28px;left:87px}
.orbit-label{position:absolute;right:-20px;top:51%;font-size:8px;letter-spacing:2.2px;writing-mode:vertical-rl;color:#677954}
.phone{overflow:hidden;border:7px solid #26342a;border-radius:35px;background:#26342a;box-shadow:0 24px 44px -22px #243b3266,0 0 0 1px #ffffff88 inset}
.hero-phone{width:244px;transform:rotate(7deg);margin-top:-20px;box-shadow:16px 28px 45px -15px #2f432644}
.phone img{width:100%;border-radius:27px}
.floating-note{position:absolute;background:#fffffff5;border:1px solid #e4e8dc;border-radius:12px;box-shadow:0 12px 30px #34422d0a;display:flex;align-items:center;gap:12px}
.quick-note{left:-5px;top:157px;padding:16px 19px;transform:rotate(-5deg)}
.floating-note strong{font-size:12px;display:block;font-weight:650}
.floating-note span:not(.note-icon):not(.tiny-orbit){font-size:9px;color:var(--muted);display:block;line-height:1.8}
.note-icon{display:grid;place-items:center;width:33px;height:38px;background:#eef4e3;border-radius:8px;color:var(--green)}
.note-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.quiet-note{right:-3px;bottom:112px;padding:13px 18px;transform:rotate(4deg)}
.quiet-note strong{color:var(--ink)}
.tiny-orbit{width:30px;height:30px;border:1px solid #95b073;border-radius:50%;position:relative}
.tiny-orbit:before{content:'';position:absolute;inset:6px;border-radius:50%;background:#d3e7ab}
.tiny-orbit:after{content:'';position:absolute;width:36px;height:13px;border:1px solid #6a9457;top:7px;left:-4px;border-radius:50%;transform:rotate(-35deg)}
.visual-caption{position:absolute;bottom:0;font-size:9px;color:var(--muted);letter-spacing:.25px}
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr 1.25fr;padding-block:29px;gap:25px}
.proof>div+div{border-left:1px solid var(--line);padding-left:28px}
.proof-value{font-size:32px;letter-spacing:-1.5px;font-weight:600;line-height:1.2}
.proof-value small{font-size:20px}
.proof p{font-size:10px;color:var(--muted);margin-top:5px}
.proof-message{display:flex;gap:18px;align-items:center}
.proof-message svg{width:33px;height:33px;color:var(--green)}
.proof-message strong{font-weight:500;color:var(--ink)}
.features{padding-block:104px 102px}
.section-heading{position:relative;margin-bottom:38px}
h2{font-size:43px;line-height:1.16;letter-spacing:-1.9px;font-weight:600;margin-top:17px}
.section-heading>p:last-child{position:absolute;right:0;bottom:5px;color:var(--muted);font-size:13px;line-height:1.8}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-card{padding:25px 26px 29px;border-radius:17px;min-width:0}
.feature-speed{background:#e7ecdd}.feature-offline{background:#edf0e5}.feature-macros{background:#eeeadf}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.feature-number{font-size:8px;font-weight:600;letter-spacing:1.25px}
.card-top svg{width:17px;height:17px;transform:rotate(-40deg)}
.feature-card h3{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.5px;margin-bottom:12px}
.feature-card>p{color:#606c5f;font-size:12px;line-height:1.8}
.food-demo{height:78px;background:#fff;border-radius:10px;display:flex;align-items:center;gap:9px;padding:11px;margin-block:43px 40px;box-shadow:0 8px 18px #35402c08;transform:rotate(-3deg)}
.food-demo strong{font-size:10px;display:block}.food-demo div>span{font-size:7px;color:var(--muted);display:block;margin-top:3px}
.food-symbol{width:35px;height:35px;border-radius:50%;background:#f0e7d3;border:5px solid #f7f3e9;flex:none;display:grid;place-items:center;box-shadow:0 0 0 1px #ece4d5}
.food-symbol span{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 65% 30%,#798453 0 2px,transparent 3px),radial-gradient(circle at 20% 60%,#bd9d76 0 3px,transparent 4px),#e2cba3}
.add-symbol{color:var(--green);font-size:22px;margin-left:auto}
.offline-demo{height:161px;display:grid;place-items:center;position:relative}
.offline-ring{position:absolute;width:111px;height:111px;border:1px solid #cdd8bf;border-radius:50%}
.offline-ring:before{content:'';position:absolute;inset:10px;border:1px dashed #cdd8bf;border-radius:50%}
.offline-demo>svg{width:55px;height:55px;color:#528156;margin-top:-16px}
.offline-label{background:white;border-radius:5px;padding:4px 11px;position:absolute;bottom:21px;font-size:9px;box-shadow:0 3px 14px #243b3212;transform:rotate(-4deg)}
.offline-label .status-dot{width:5px;height:5px;margin-right:5px}
.macro-demo{height:161px;display:flex;flex-direction:column;justify-content:center;gap:9px;padding-inline:8px}
.macro-demo>div{display:flex;align-items:center;gap:12px;font-size:9px}.macro-demo span{width:75px;flex:none}
.macro-demo i{height:10px;width:100%;background:#deddd1;border-radius:3px;position:relative;overflow:hidden}
.macro-demo i:after{content:'';position:absolute;inset:0 auto 0 0;width:var(--fill);background:var(--bar);border-radius:3px}
/* Als Klassen statt style-Attribut: die CSP der Seite erlaubt kein Inline-CSS. */
.macro-demo .bar-protein{--fill:73%;--bar:#287849}.macro-demo .bar-carbs{--fill:55%;--bar:#a2b976}.macro-demo .bar-fat{--fill:37%;--bar:#dbad70}
.app-section{background:#e8eddf;overflow:hidden}
.app-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px;padding-top:64px;padding-bottom:46px}
.app-copy{padding-block:30px 55px}.app-copy h2{font-size:51px;letter-spacing:-2.6px}
.app-copy>p:not(.eyebrow){max-width:355px;color:var(--muted);font-size:14px;margin-top:23px;line-height:1.85}
.check-list{padding:0;margin:27px 0 26px;list-style:none;font-size:12px;display:grid;gap:12px}
.check-list li{display:flex;align-items:center;gap:10px}.check-list svg{width:17px;height:17px;color:var(--green)}
.preview-controls{border:1px solid #cad4bd;background:#f6f7ef;display:flex;gap:4px;justify-content:center;width:fit-content;max-width:100%;padding:5px;margin:0 auto 26px;border-radius:9px}
.preview-controls input{position:absolute;opacity:0;width:1px;height:1px}
.preview-controls label{font-size:10px;padding:9px 16px;border-radius:5px;cursor:pointer;transition:background .2s}
.preview-controls input:checked+label{background:var(--ink);color:white}
.preview-controls input:focus-visible+label{outline:3px solid var(--green);outline-offset:3px}
.preview-stage{min-height:489px;position:relative;display:grid;place-items:center}
.preview-stage:before{content:'';position:absolute;width:360px;max-width:100%;height:360px;border:1px solid #cad8b9;border-radius:50%}
.preview-phone{width:226px;position:relative;border-width:6px;border-radius:32px;display:none}
.app-preview:has(#view-today:checked) #screen-today,.app-preview:has(#view-history:checked) #screen-history,.app-preview:has(#view-progress:checked) #screen-progress{display:block;animation:appear .3s ease-out}
.preview-note{text-align:center;font-size:8px;color:var(--muted);margin-top:18px}
.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:85px;padding-block:103px}
.faq h2{margin-bottom:24px}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 0;cursor:pointer;font-size:14px;font-weight:550}
summary::-webkit-details-marker{display:none}
summary>span{font-weight:400;font-size:23px;line-height:1;transition:transform .2s}
details[open] summary>span{transform:rotate(45deg)}
details p{color:var(--muted);font-size:13px;line-height:1.85;padding:0 32px 23px 0}
details p a{text-decoration:underline;text-underline-offset:3px}
.start-card{background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:64px 40px;text-align:center;position:relative;overflow:hidden;isolation:isolate}
.start-card .eyebrow{justify-content:center;color:#d1ddc4;font-size:9px}
.start-card .status-dot{background:var(--lime)}
.start-card h2{font-size:49px;margin-top:23px;letter-spacing:-2px}
.start-card>p:not(.eyebrow){font-size:13px;color:#d0dbc8;margin-top:20px}
.button-light{background:var(--lime);color:var(--ink);margin-top:26px}
.button-light:hover{background:#e3f4b8}
.start-card .start-note{font-size:9px!important;margin-top:17px!important}
.start-art{position:absolute;right:-70px;bottom:-180px;z-index:-1;transform:rotate(-24deg);color:#34513b}
.start-art svg{width:490px;height:490px}
.footer{padding-top:57px;padding-bottom:25px}
.footer-main{display:flex;align-items:center;gap:30px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.footer .brand{font-size:22px}.footer .brand svg{width:27px;height:27px}
.footer-main>p{font-size:10px;color:var(--muted)}
.footer nav{margin-left:auto;display:flex;gap:24px;font-size:10px}
.footer-bottom{display:flex;justify-content:space-between;gap:25px;padding-top:19px;font-size:8px;color:var(--muted)}
.footer-bottom a{text-decoration:underline;text-underline-offset:2px}
@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.hero-copy{animation:appear .6s ease-out}.hero-visual{animation:appear .8s ease-out}
@media(min-width:1500px){.hero{min-height:800px}.hero-visual{transform:scale(1.06)}}
@media(max-width:1100px){.shell{width:calc(100% - 64px)}.header nav{gap:18px}.hero{gap:10px}.hero-visual{min-height:570px}.hero-phone{width:225px}.quick-note{left:-10px;padding:12px;top:140px}.quiet-note{right:-8px}.orbit-label{right:-12px}.proof{gap:15px}.proof>div+div{padding-left:18px}.proof-message{gap:10px}.section-heading>p:last-child{position:static;margin-top:20px}.feature-card{padding:22px 19px}.feature-card h3{font-size:18px}.food-demo{gap:6px;padding:8px}.food-symbol{width:28px;height:28px}.food-demo strong{font-size:8px}.food-demo div>span{font-size:6px}.app-inner{gap:35px}}
@media(max-width:800px){.header{height:88px}.header nav{display:none}.hero{padding-top:50px;grid-template-columns:1fr 1fr;min-height:650px}h1{font-size:65px;letter-spacing:-4px}.hero .eyebrow{font-size:8px;letter-spacing:1px}.hero-description{font-size:13px}.hero-actions{gap:16px;flex-wrap:wrap}.hero-visual{min-height:505px}.hero-phone{width:198px}.floating-note{gap:7px}.quick-note{top:104px;left:-13px;padding:10px}.floating-note strong{font-size:9px}.floating-note span:not(.note-icon):not(.tiny-orbit){font-size:7px}.note-icon{width:25px;height:30px}.quiet-note{bottom:100px;right:-12px;padding:10px}.hero-disc{top:105px}.orbit{top:125px;height:260px}.orbit-two{height:330px;top:85px}.orbit-label{display:none}.visual-caption{font-size:7px;bottom:20px}.proof{grid-template-columns:repeat(3,1fr)}.proof .proof-message{display:none}.proof p{font-size:9px}.features{padding-block:75px}.feature-grid{grid-template-columns:1fr}.feature-card{display:grid;grid-template-columns:1fr 1fr;column-gap:35px;padding:25px}.card-top{grid-column:1/-1}.food-demo,.offline-demo,.macro-demo{grid-column:2;grid-row:2/4;margin-block:15px;align-self:center}.feature-card h3{grid-column:1;grid-row:2;margin-top:25px;font-size:22px}.feature-card>p{grid-column:1;grid-row:3}.food-demo strong{font-size:10px}.food-demo div>span{font-size:7px}.food-symbol{width:35px;height:35px}.macro-demo,.offline-demo{height:140px}.app-inner{gap:25px}.app-copy h2{font-size:40px}.app-copy>p:not(.eyebrow){font-size:12px}.preview-controls label{padding:8px 12px;font-size:9px}.preview-phone{width:200px}.preview-stage{min-height:433px}.faq{gap:35px;padding-block:75px}h2{font-size:37px}.start-card h2{font-size:41px}.footer-main{gap:20px}.footer-main>p{display:none}}
@media(max-width:580px){.shell{width:calc(100% - 40px)}.header{height:80px;gap:10px}.brand{font-size:24px}.brand svg{width:28px;height:28px}.button-small{font-size:10px;padding:10px 12px;gap:8px}.button-small svg{width:14px;height:14px}.hero{grid-template-columns:1fr;padding-top:42px;padding-bottom:25px;gap:32px}.hero .eyebrow{font-size:8px;letter-spacing:1.2px}h1{font-size:clamp(56px,16.7vw,76px);letter-spacing:-4px;margin-top:23px;margin-bottom:22px}.hero-description{font-size:14px;max-width:340px}.hero-actions{margin-top:24px;gap:24px}.hero-actions .button{padding:15px 23px}.release-note{font-size:9px}.hero-visual{min-height:550px;margin-inline:2px}.hero-phone{width:223px}.hero-disc{max-width:100%;top:88px}.orbit{max-width:108%;height:300px;top:110px}.orbit-two{height:380px;top:70px}.quick-note{top:130px;left:-3px;padding:12px}.floating-note strong{font-size:10px}.floating-note span:not(.note-icon):not(.tiny-orbit){font-size:8px}.quiet-note{right:-4px;bottom:89px;padding:12px}.visual-caption{font-size:8px;bottom:6px}.proof{gap:10px;padding-block:23px}.proof>div+div{padding-left:12px}.proof-value{font-size:26px}.proof-value small{font-size:16px}.proof p{font-size:8px;line-height:1.6;max-width:99px}.features{padding-block:62px}.section-heading{margin-bottom:28px}.eyebrow{font-size:8px;letter-spacing:1.3px}h2{font-size:33px;letter-spacing:-1.5px}.section-heading>p:last-child{font-size:12px;margin-top:17px}.feature-card{display:block;padding:24px}.feature-card h3{font-size:23px;margin-top:0}.feature-card>p{font-size:13px}.food-demo{height:80px;margin:32px 8px}.food-demo strong{font-size:12px}.food-demo div>span{font-size:8px}.food-symbol{width:40px;height:40px}.offline-demo,.macro-demo{height:155px;margin-block:0}.macro-demo{padding-inline:16px}.macro-demo>div{font-size:10px;gap:22px}.macro-demo i{height:12px}.feature-grid{gap:14px}.app-inner{grid-template-columns:1fr;gap:30px;padding-block:54px 34px}.app-copy{padding:0}.app-copy h2{font-size:42px}.app-copy>p:not(.eyebrow){font-size:14px}.check-list{font-size:12px}.preview-phone{width:230px}.preview-stage{min-height:498px}.preview-controls label{font-size:10px;padding:9px 17px}.preview-note{font-size:8px}.faq{grid-template-columns:1fr;gap:33px;padding-block:65px}.faq h2 br{display:none}.faq h2{margin-bottom:15px}summary{font-size:13px;padding-block:20px}.start-section{width:calc(100% - 24px)}.start-card{padding:46px 22px;border-radius:18px}.start-card h2{font-size:34px;letter-spacing:-1.5px}.start-card h2 br{display:none}.start-card .start-note{font-size:8px!important}.start-art{right:-190px;bottom:-210px}.footer{padding-top:35px}.footer-main{align-items:flex-start;flex-direction:column;gap:25px}.footer nav{margin-left:0;gap:24px;font-size:11px}.footer-bottom{flex-direction:column;gap:12px;font-size:8px}.footer-bottom p{max-width:310px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* The waiting list, inside the dark closing card. The old front page put the
   same form under the headline; here it is the one thing the whole page walks
   towards, so it sits where the page ends rather than where it starts. Markup
   and script are unchanged from that page - only the paint is new. */
.start-card .signup{margin:30px auto 0;max-width:430px;text-align:left}
.signup-label{display:block;font-size:9px;letter-spacing:1.7px;font-weight:650;text-transform:uppercase;color:#d1ddc4;margin-bottom:10px}
.signup-row{display:grid;gap:10px}
.signup input[type=email]{width:100%;background:var(--paper);color:var(--ink);border:1px solid transparent;border-radius:9px;padding:16px 18px;font-size:14px}
.signup input[type=email]::placeholder{color:#8b9689}
.signup input[type=email]:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.signup .button-light{margin-top:0;width:100%;gap:0}
/* aria-live means the browser reads this out; :empty keeps the gap from
   showing before there is anything to read. */
.signup-status{font-size:12px;color:var(--lime);margin-top:14px;line-height:1.7}
.signup-status:empty{display:none}
.start-card .signup-note{font-size:9px;color:#b9c8ae;margin-top:14px;line-height:1.8}
.start-card .signup-note a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
@media(min-width:520px){.signup-row{grid-template-columns:1fr auto}.signup .button-light{width:auto;padding-inline:22px}}
/* Der Erfolgsfall setzt hidden auf .signup-row. Ohne diese Zeile gewinnt das
   display:grid darueber gegen das display:none des Browsers, und das Feld
   bleibt nach dem Eintragen stehen. */
.signup-row[hidden]{display:none}