/* caloguide-de — eigene Stylesheet-Datei, von Grund auf geschrieben. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
 margin:0;
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 color:#1f2933;
 background:#fff;
 line-height:1.6;
 -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:800;letter-spacing:-.01em;color:#0f2a20;line-height:1.15;margin:0 0 12px}
h2{font-size:28px}
h3{font-size:18px}
p{margin:0 0 14px}

.section-inner{max-width:1120px;margin:0 auto;padding:0 24px}

/* ── Werbebanner ──────────────────────────────────────────────────────── */
.ad-disclosure{background:#0f2a20;color:rgba(255,255,255,.85)}
.ad-disclosure__inner{max-width:1280px;margin:0 auto;padding:10px 20px;font-size:12px;line-height:1.5;text-align:center}
.ad-disclosure__inner strong{color:#fff}
.ad-disclosure__inner a{color:#fff;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* ── Kopfzeile ────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #eef0f2}
.site-header__inner{max-width:1120px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-wordmark{font-weight:800;font-size:20px;letter-spacing:-.02em;color:#0f2a20}
.site-header__cta{background:#2f8f6e;color:#fff;padding:10px 18px;border-radius:9999px;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.site-header__cta:hover{opacity:.85}

/* ── Gesundheitshinweis ──────────────────────────────────────────────── */
.health-notice{background:#fff7e6;border-top:1px solid #ffe6ad;border-bottom:1px solid #ffe6ad}
.health-notice .section-inner{padding-top:14px;padding-bottom:14px}
.health-notice p{margin:0;font-size:13px;color:#7a5b00;line-height:1.6}
.health-notice strong{color:#5c4400}

/* ── Buttons & App-Badges ────────────────────────────────────────────── */
.hero__badges{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 10px}
.store-badge{height:44px;width:auto}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{padding:48px 0 24px;background:linear-gradient(180deg,#eafbf3 0%,#fff 100%)}
.hero__inner{max-width:1120px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#1a6b4d;background:#d5f3e4;padding:6px 14px;border-radius:9999px;margin-bottom:14px}
.hero__text h1{font-size:34px;max-width:560px}
.hero__text p{max-width:520px;color:#4b5563}
.hero__note{font-size:13px;color:#6b7280;margin-top:10px}

.hero__visual{display:flex;justify-content:center}
.mock-phone{width:220px;border-radius:28px;background:#0f2a20;color:#fff;padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.15)}
.mock-phone__stat{text-align:center;margin-bottom:18px}
.mock-phone__stat span{display:block;font-size:28px;font-weight:800}
.mock-phone__stat small{font-size:12px;opacity:.7}
.mock-phone__bars{display:flex;gap:10px;align-items:flex-end;height:90px}
.mock-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.mock-bar span{display:block;width:100%;background:#5fd3a3;border-radius:6px 6px 0 0}
.mock-bar small{margin-top:6px;font-size:10px;opacity:.75}

@media (min-width:860px){
 .hero__inner{grid-template-columns:1.1fr 1fr}
 .hero__text h1{font-size:44px}
}

/* ── Funktionen (Grid) ───────────────────────────────────────────────── */
.features{padding:56px 0}
.features h2{text-align:center;max-width:640px;margin:0 auto 8px}
.features__intro{text-align:center;color:#6b7280;font-size:13px;max-width:560px;margin:0 auto 32px}
.features__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.feature-card{background:#f8faf9;border:1px solid #eef0f2;border-radius:16px;padding:20px}
.feature-card h3{margin-bottom:6px;font-size:16px}
.feature-card p{margin:0;font-size:14px;color:#4b5563}
@media (min-width:760px){.features__grid{grid-template-columns:repeat(3,1fr)}}

/* ── Textblöcke + Visual ─────────────────────────────────────────────── */
.split{padding:40px 0}
.split__inner{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.split--reverse .split__inner{direction:rtl}
.split--reverse .split__inner>*{direction:ltr}
@media (min-width:860px){.split__inner{grid-template-columns:1fr 1fr}}

.mock-card{background:#f8faf9;border:1px solid #eef0f2;border-radius:16px;padding:18px}
.mock-card__row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;border-bottom:1px solid #eef0f2}
.mock-card__row--total{font-weight:800;border-bottom:0;color:#0f2a20}
.mock-card--plans{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.mock-chip{background:#d5f3e4;color:#1a6b4d;border-radius:9999px;padding:8px 16px;font-size:13px;font-weight:700}
.mock-card--about{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 18px}
.mock-card--about p{font-size:22px;font-weight:800;color:#0f2a20;margin:0 0 6px}
.mock-card--about small{color:#6b7280;font-size:13px}

/* ── Preise ───────────────────────────────────────────────────────────── */
.pricing{padding:48px 0;background:#f8faf9;text-align:center}
.pricing .section-inner{max-width:720px}
.pricing p{color:#4b5563}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq{padding:56px 0}
.faq__list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid #e5e7eb}
.faq-item__trigger{width:100%;text-align:left;background:none;border:0;padding:16px 0;font-weight:700;font-size:15px;color:#0f2a20;cursor:pointer;display:flex;justify-content:space-between;gap:16px}
.faq-item__trigger::after{content:"+";font-size:20px;color:#9ca3af;flex-shrink:0}
.faq-item.is-open .faq-item__trigger::after{content:"–"}
.faq-item__content{max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .25s ease}
.faq-item.is-open .faq-item__content{max-height:260px;opacity:1;padding-bottom:16px}
.faq-item__content p{margin:0;color:#4b5563;font-size:14px}

/* ── Fußzeile ─────────────────────────────────────────────────────────── */
.site-footer{background:#f8faf9;border-top:1px solid #eef0f2;padding:40px 0 24px}
.site-footer__inner{max-width:1120px;margin:0 auto;padding:0 24px}
.site-footer__notes p{font-size:13px;color:#4b5563;margin:0 0 8px}
.site-footer__notes strong{color:#0f2a20}
.site-footer__cols{display:flex;flex-wrap:wrap;gap:32px;margin:28px 0}
.site-footer__col{flex:1 1 200px;min-width:180px}
.site-footer__col h2{font-size:14px;margin:0 0 12px}
.site-footer__col ul{list-style:none;margin:0;padding:0}
.site-footer__col li{margin:0 0 8px;font-size:13px;color:#4b5563}
.site-footer__col a{text-decoration:none;color:#0f2a20}
.site-footer__col a:hover{text-decoration:underline}
.operator-name{font-weight:700;color:#0f2a20}
.operator-geo-note{font-weight:400;font-size:.85em;opacity:.7;display:block}
.site-footer__legalese{border-top:1px solid #e5e7eb;padding-top:18px}
.site-footer__legalese p{font-size:12px;color:#6b7280;margin:0 0 8px}
.site-footer__copyright{margin-top:12px}

/* ── Cookie-Einwilligung ─────────────────────────────────────────────── */
.cookie-consent{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#0f2a20;color:#fff;box-shadow:0 -4px 20px rgba(0,0,0,.25)}
.cookie-consent[hidden]{display:none}
.cookie-consent__inner{max-width:1120px;margin:0 auto;padding:16px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between}
.cookie-consent__text{flex:1 1 420px;margin:0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.85)}
.cookie-consent__text a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cookie-consent__actions{display:flex;gap:10px;flex:0 0 auto}
.cookie-consent__btn{border:0;border-radius:9999px;padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.cookie-consent__btn--accept{background:#5fd3a3;color:#0f2a20}
.cookie-consent__btn--accept:hover{opacity:.9}
.cookie-consent__btn--reject{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.cookie-consent__btn--reject:hover{background:rgba(255,255,255,.1)}
@media (max-width:640px){.cookie-consent__inner{flex-direction:column;align-items:stretch}.cookie-consent__actions{justify-content:flex-end}}