:root{
  --bg:#f6f7f8; --card:#fff; --ink:#16241b; --mut:#6b7380;
  --p1:#188c41; --p2:#21b566; --ring:rgba(34,197,94,.16);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0}
body{font:16px/1.55 system-ui,Segoe UI,Roboto,Inter,Arial;background:var(--bg);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1000px;margin:0 auto;padding:16px}
.mt{margin-top:16px}
.center{text-align:center}
.sm{font-size:.9rem}
.mut{color:var(--mut)}
.nowrap{white-space:nowrap}
.emoji{margin-right:.35em}

/* ===== Navigation ===== */
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e9ecf0}
.nav .brand{display:flex;gap:12px;align-items:center;padding:12px 16px;flex:1}
.logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#f0fff4,#dcfce7);box-shadow:0 6px 18px rgba(34,197,94,.18);font-size:22px}
.brand strong{display:block;font-weight:900;font-size:clamp(24px,5.8vw,34px);letter-spacing:.2px;line-height:1.05;background:linear-gradient(135deg,#1f4726,#17a34a 60%,#38d39f);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{display:block;margin-top:2px;color:#667085;font-size:clamp(12px,3.4vw,14px);font-weight:600}
.menu{display:none;gap:16px;margin-left:auto;padding-right:12px}
.menu a{padding:10px 12px;border-radius:12px}
.menu a.btn{background:linear-gradient(90deg,var(--p1),var(--p2));color:#fff}
@media(min-width:820px){.menu{display:flex}}

/* ===== Hero ===== */
.hero{background:radial-gradient(1200px 420px at 20% -10%,#ddf5e6,transparent),#fff;border-bottom:1px solid #e9ecf0}
.hero .badge{display:inline-block;background:#eaf7f0;border-radius:999px;padding:6px 12px;margin-top:10px}
.hero h1{font-size:clamp(32px,6.6vw,54px);margin:10px 0;letter-spacing:.2px}
.accent{color:#1fb36b}
.lead{max-width:60ch}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.ticks{display:flex;gap:14px;flex-wrap:wrap;color:var(--mut);padding:0;margin:6px 0;list-style:none}
.ticks li::before{content:"✓ ";color:#21b566;font-weight:800}

/* ===== Sections / Cards ===== */
.section{padding:40px 0}
.alt{background:#fff;border-top:1px solid #e9ecf0;border-bottom:1px solid #e9ecf0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.card{background:#fff;border-radius:18px;box-shadow:0 10px 26px rgba(17,24,39,.08);padding:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.tag{background:#fff;border:1px solid #e9ecf0;border-radius:999px;padding:10px 12px;text-align:center}

/* ===== Reviews & Footer ===== */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.review{background:#fff;border-radius:16px;padding:18px;border:1px solid #e9ecf0}
.stars{color:#f59e0b}
.footer{background:#fff;border-top:1px solid #e9ecf0;margin-top:32px}
.foot{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand.mini{display:flex;gap:10px;align-items:center}

/* ===== Buttons ===== */
.btn{display:inline-block;padding:12px 16px;border-radius:999px;background:linear-gradient(90deg,var(--p1),var(--p2));color:#fff;border:0;font-weight:800}
.btn.ghost{background:#eef2f6;color:#0f172a}
.btn.sm{padding:8px 12px}
.btn.lg{padding:14px 18px;font-size:1.05rem}

/* ===== Quiz / Panels ===== */
.box{background:#fff;border-radius:18px;padding:14px;margin:16px 0;box-shadow:0 10px 26px rgba(17,24,39,.08)}
.progress{height:8px;background:#e9ecf0;border-radius:999px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:#22c55e}
.stack{display:grid;gap:12px}
.panel{background:#fff;border-radius:18px;padding:16px;box-shadow:0 10px 26px rgba(17,24,39,.08)}
.hidden{display:none!important}
.options{display:grid;grid-template-columns:1fr;gap:10px}
.opt{padding:14px;border:2px solid #e9ecf0;border-radius:14px;background:#fff;text-align:left}
.opt.selected{border-color:#22b768;background:#f1fbf5;box-shadow:0 0 0 6px var(--ring)}
.multi .opt{display:flex;justify-content:space-between}
.actions{display:flex;gap:8px;justify-content:space-between;margin-top:10px}
.stickyBar{position:sticky;bottom:0;background:linear-gradient(90deg,#188c41,#21b566);color:#fff;border-radius:16px;margin:16px 0;padding:12px 14px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.range{font-weight:900;font-size:18px}
.form label{display:grid;gap:6px;margin-bottom:10px}
.form input, .form textarea{border:2px solid #e9ecf0;border-radius:12px;padding:12px}
.form input:focus, .form textarea:focus{outline:none;border-color:#22c55e;box-shadow:0 0 0 6px var(--ring)}
.form .row{display:grid;gap:10px}
@media(min-width:680px){.form .row{grid-template-columns:1fr 1fr}}

.hp{position:absolute;left:-9999px}
.prose{max-width:80ch;padding:16px}
.logo{width:56px;height:56px;display:inline-grid;place-items:center;border-radius:12px;background:#eef7f0}
.logo img{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:inherit}
@media (min-width:820px){.logo{width:64px;height:64px}}
/* ===== Header / Brand ===== */
.nav { padding-inline: 14px; }
.brand { display:flex; align-items:center; gap:14px; text-decoration:none; }

.logo {
  --size: 60px;            /* Logo-Größe (mobil) */
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  border-radius: 16px;     /* runde Ecken */
  background: radial-gradient(120% 120% at 20% 20%, #eaf8ef 0%, #f3faf5 60%, #ffffff 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  overflow: hidden;        /* falls das Bild größer ist */
}

.logo img{
  width:100%;
  height:100%;
  object-fit: cover;       /* füllt den Badge sauber */
  display:block;
  border-radius: inherit;
}

/* Brand-Typo größer & breiter */
.brand strong{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1.05;
}
.brand small{
  color:#49705a;
  font-weight: 600;
  letter-spacing: .3px;
  font-size: clamp(13px, 3.6vw, 16px);
}

/* auf großen Screens Logo noch größer */
@media (min-width: 820px){
  .logo{ --size: 68px; border-radius: 18px; }
  .brand{ gap:16px; }
}