:root{
  --bg:#0A0E16; --surface:#101724; --line:#1D2941;
  --text:#E8EEF6; --muted:#93A4BB; --faint:#70829A;
  --cyan:#3EC9D6; --cyan-deep:#14818E;
  --serif:Georgia,'Iowan Old Style','Palatino Linotype','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.wrap{max-width:1020px;margin:0 auto;padding:0 20px;width:100%}

/* ── Hero ── */
.hero{padding:48px 0 40px;background:radial-gradient(1100px 540px at 82% 8%,rgba(62,201,214,.07),transparent 65%)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.eyebrow{color:var(--cyan);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
h1{font-family:var(--serif);font-weight:400;font-size:2.1rem;line-height:1.06;letter-spacing:-.015em}
h1 .dot{color:var(--cyan)}
.hero-sub{font-size:1.1rem;font-weight:600;margin-top:10px}
.hero-text{color:var(--muted);margin-top:16px;font-size:.95rem}
.status{margin-top:24px;font-size:.8rem;color:var(--faint);border-left:2px solid var(--cyan-deep);padding-left:12px}
.hero-logo{text-align:center;order:-1}
.hero-logo img{width:130px;display:block;margin:0 auto;filter:drop-shadow(0 16px 48px rgba(62,201,214,.16))}

/* ── SMS-Beispiel ── */
.sms{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);margin-top:8px}
.sms-inner{padding:40px 0;display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.bubble{background:#0F3D2E;border:1px solid rgba(46,184,122,.35);border-radius:16px 16px 16px 4px;padding:14px 16px;max-width:100%;font-size:.9rem;color:#CFEDE2;word-wrap:break-word;overflow-wrap:anywhere}
.bubble .sender{display:block;font-weight:600;color:#7EE2B0;margin-bottom:6px;font-size:.82rem}
.bubble .link{color:var(--cyan);text-decoration:underline}
.phone-meta{color:var(--faint);font-size:.76rem;margin-top:8px}
.sms h2{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin-bottom:12px;line-height:1.15}
.sms p{color:var(--muted);font-size:.92rem}

/* ── Showcase ── */
.showcase{padding:48px 0}
.show{display:grid;grid-template-columns:1fr;gap:20px;padding:32px 0;border-top:1px solid var(--line)}
.show:first-of-type{border-top:none;padding-top:0}
.show:last-of-type{border-bottom:1px solid var(--line)}
.show.flip>.card{order:0}
.show h2{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin-bottom:10px;line-height:1.2}
.show p{color:var(--muted);font-size:.92rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.card-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.lesson-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.lesson-row:last-child{border-bottom:none;padding-bottom:2px}
.lesson-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);opacity:.65;flex:none}
.lesson-title{font-weight:600;font-size:.88rem}
.lesson-meta{margin-left:auto;color:var(--faint);font-size:.72rem;white-space:nowrap}
.quiz-q{font-weight:600;font-size:.92rem;margin-bottom:12px}
.quiz-opt{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;font-size:.85rem;color:var(--muted)}
.quiz-opt .tick{width:18px;height:18px;border-radius:50%;border:1px solid var(--faint);flex:none;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--faint)}
.quiz-opt.right{border-color:var(--cyan);color:var(--text);background:rgba(62,201,214,.07)}
.quiz-opt.right .tick{background:var(--cyan);border-color:var(--cyan);color:#04222b;font-weight:700}
.quiz-note{margin-top:10px;font-size:.82rem;color:var(--muted);border-left:2px solid var(--cyan-deep);padding-left:10px}

/* ── Für wen ── */
.family{padding:48px 0;text-align:center}
.family .eyebrow{margin-bottom:12px}
.family h2{font-family:var(--serif);font-weight:400;font-size:1.6rem;margin-bottom:12px;line-height:1.15}
.family-lead{color:var(--muted);max-width:none;margin:0 auto;font-size:.92rem}
.chat{max-width:480px;margin:28px auto 0;text-align:left}
.chat-row{display:flex;margin-bottom:10px}
.chat-row.in{justify-content:flex-start}
.chat-row.out{justify-content:flex-end}
.chat-msg{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:11px 14px;font-size:.9rem;max-width:88%;line-height:1.5}
.chat-row.in .chat-msg{border-radius:16px 16px 16px 4px;color:var(--text)}
.chat-row.out .chat-msg{border-radius:16px 16px 4px 16px;background:rgba(62,201,214,.08);border-color:var(--cyan-deep)}
.chat-name{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.chat-note{text-align:center;color:var(--faint);font-size:.85rem;margin-top:18px}

/* ── Footer ── */
footer{border-top:1px solid var(--line);padding:28px 0;margin-top:24px}
.foot-inner{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.foot-logo{width:26px;height:26px;display:block}
a.foot-brand{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text);text-decoration:none}
.foot-copy{color:var(--faint);font-size:.82rem}
footer nav{margin-left:auto}
footer nav a{color:var(--muted);text-decoration:none;margin-left:18px;font-size:.88rem}
footer nav a:hover{color:var(--cyan)}

/* ── Rechtsseiten ── */
.legal{padding:40px 0}
.legal h1{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin-bottom:6px}
.legal .meta{color:var(--faint);font-size:.82rem;margin-bottom:12px}
.legal .intro{color:var(--muted);max-width:none;margin-bottom:8px;font-size:.92rem}
.legal h2{font-size:1.08rem;font-weight:700;margin:28px 0 10px;color:var(--text)}
.legal p,.legal ul{color:var(--muted);margin-bottom:10px;max-width:none;font-size:.92rem}
.legal ul{padding-left:18px}
.legal li{margin-bottom:5px}
.legal strong{color:var(--text)}
.legal address{font-style:normal;color:var(--text);margin-bottom:12px;line-height:1.55}
.legal a{color:var(--cyan)}

/* ═══ DESKTOP ═══ */
@media(min-width:821px){
  .wrap{padding:0 24px}
  body{font-size:16.5px;line-height:1.65}

  .hero{padding:96px 0 72px}
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:48px}
  .hero-logo{order:0}
  .hero-logo img{width:min(100%,260px)}
  .eyebrow{font-size:.72rem;margin-bottom:16px}
  h1{font-size:clamp(2.7rem,6.5vw,4.3rem)}
  .hero-sub{font-size:clamp(1.15rem,2.4vw,1.45rem);margin-top:14px}
  .hero-text{margin-top:22px;max-width:34em;font-size:1rem}
  .status{margin-top:30px;font-size:.85rem;padding-left:14px}

  .sms-inner{padding:64px 0;grid-template-columns:1fr 1fr;gap:48px}
  .bubble{font-size:.95rem;padding:16px 18px;border-radius:18px 18px 18px 4px;max-width:34em}
  .bubble .sender{font-size:.85rem}
  .phone-meta{font-size:.8rem;margin-top:10px}
  .sms h2{font-size:clamp(1.7rem,3.5vw,2.2rem);margin-bottom:14px}
  .sms p{max-width:30em;font-size:1rem}

  .showcase{padding:64px 0}
  .show{grid-template-columns:1fr 1fr;gap:52px;padding:44px 0}
  .show:first-of-type{padding-top:44px;border-top:1px solid var(--line)}
  .show h2{font-size:clamp(1.55rem,3vw,1.95rem);margin-bottom:12px}
  .show p{font-size:1rem}
  .card{padding:20px 22px;border-radius:16px}
  .card-label{font-size:.7rem;letter-spacing:.16em;margin-bottom:14px}
  .lesson-row{padding:11px 0;gap:12px}
  .lesson-dot{width:8px;height:8px}
  .lesson-title{font-size:.95rem}
  .lesson-meta{font-size:.78rem}
  .quiz-q{font-size:.98rem;margin-bottom:14px}
  .quiz-opt{padding:10px 12px;gap:10px;font-size:.92rem}
  .quiz-opt .tick{width:20px;height:20px;font-size:.7rem}
  .quiz-note{margin-top:12px;font-size:.85rem;padding-left:12px}

  .family{padding:72px 0}
  .family .eyebrow{margin-bottom:14px}
  .family h2{font-size:clamp(1.8rem,3.6vw,2.4rem);margin-bottom:14px}
  .family-lead{max-width:36em;font-size:1rem}
  .chat{margin:36px auto 0}
  .chat-row{margin-bottom:12px}
  .chat-msg{padding:12px 16px;font-size:.95rem;max-width:85%}
  .chat-name{font-size:.72rem;margin-bottom:5px}
  .chat-note{font-size:.9rem;margin-top:22px}

  footer{padding:34px 0}
  .foot-inner{gap:12px}
  .foot-logo{width:28px;height:28px}
  a.foot-brand{gap:10px}
  .foot-copy{font-size:.85rem}
  footer nav a{margin-left:20px;font-size:.9rem}

  .legal{padding:64px 0}
  .legal h1{font-size:2.3rem;margin-bottom:6px}
  .legal .meta{font-size:.85rem;margin-bottom:14px}
  .legal .intro{max-width:38em;font-size:1rem}
  .legal h2{font-size:1.16rem;margin:36px 0 12px}
  .legal p,.legal ul{margin-bottom:12px;max-width:46em;font-size:1rem}
  .legal ul{padding-left:22px}
  .legal li{margin-bottom:6px}
  .legal address{margin-bottom:14px;line-height:1.6}
}