/* ============================================================
   Prof. Benstoem — profbenstoem.com
   Shared design system, extracted verbatim from the approved
   July 2026 mockups. Do not restyle without a design decision.

   Page-specific registers (wrap width, button padding, line
   height, nav height) are set per page via the CSS variables
   below, so every page renders pixel-identical to its mockup.
   ============================================================ */

:root { color-scheme: light;
  /* tokens */
  --ink:#1F242B; --sec:#6E7480; --faint:#6B7280; --hair:#E4E5E9;
  --bg:#ffffff; --tint:#F4F4F6; --accent:#323944;
  /* button register (graphite ink) */
  --btn-bg:var(--accent); --btn-fg:#ffffff; --btn-border:var(--accent); --btn-bg-hover:#272D36;
  /* per-page parameters (defaults; pages override in their own <style>) */
  --wrap-max:1020px; --lh:1.55; --btn-pad:9px 20px; --nav-h:58px;
  --footer-pad:22px 0 36px;
}
body[data-btn="ink"] { --btn-bg:var(--ink); --btn-fg:#fff; --btn-border:var(--ink); }
body[data-btn="outline"] { --btn-bg:transparent; --btn-fg:var(--ink); --btn-border:var(--ink); }

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:var(--lh); -webkit-font-smoothing:antialiased; }
.wrap { max-width:var(--wrap-max); margin:0 auto; padding:0 28px; }
section { position:relative; }

/* ---------- buttons: pill, one solid per screen ---------- */
.btn { display:inline-block; background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-border);
  border-radius:999px; padding:var(--btn-pad); font-size:14px; font-weight:500; letter-spacing:-.008em;
  text-decoration:none; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s cubic-bezier(.2,.7,.3,1), background .15s, border-color .15s; }
.btn:hover { background:var(--btn-bg-hover); border-color:var(--btn-bg-hover); color:var(--btn-fg);
  transform:translateY(-1.5px); box-shadow:0 6px 18px rgba(50,57,68,.20); }
.btn:active { transform:translateY(0); box-shadow:0 2px 6px rgba(50,57,68,.18); }
.btn.small { padding:6px 14px; font-size:13px; }
.btn.ghost { background:transparent; color:var(--accent); border-color:var(--accent); }
.btn.ghost:hover { background:var(--accent); color:#fff; }
.btn.block { display:block; text-align:center; width:100%; }

.kicker { font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.textlink { font-size:14.5px; font-weight:600; color:var(--accent); text-decoration:none; }
.textlink .arw { display:inline-block; transition:transform .22s cubic-bezier(.2,.7,.3,1); }
.textlink:hover .arw { transform:translateX(4px); }

/* ---------- header ---------- */
header.site { border-bottom:1px solid var(--hair); background:#fff; }
header.site.sticky { position:sticky; top:0; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); z-index:50; }
.nav { display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); }
.logo { font-size:19px; }
.logo a { color:inherit; text-decoration:none; }
.logo .serif { font-family:Georgia,"Times New Roman",serif; font-weight:400; }
.logo .sans { font-weight:800; }
nav.links { display:flex; gap:26px; font-size:14px; color:var(--sec); }
nav.links a { color:inherit; text-decoration:none; }
nav.links a:hover { color:var(--ink); }

/* ---------- facts table (product / about / waitlist) ---------- */
.facts { border-block:1px solid var(--hair); }
.facts .row { display:flex; justify-content:space-between; gap:24px; padding:9px 0; font-size:14.5px; border-bottom:1px solid var(--hair); }
.facts .row:last-child { border-bottom:none; }
.facts .row span:first-child { color:var(--sec); flex:none; }
.facts .row b { font-weight:600; text-align:right; }

/* ---------- FAQ accordion ---------- */
details { border-bottom:1px solid var(--hair); padding:14px 0; }
details summary { font-weight:600; font-size:15.5px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; }
details summary::-webkit-details-marker { display:none; }
details summary::after { content:"+"; color:var(--faint); font-weight:400; flex:none; }
details[open] summary::after { content:"–"; }
details p { margin-top:8px; font-size:14.5px; color:var(--sec); max-width:58em; }

/* ---------- 3-step cards ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.step { border:none; background:none; border-radius:0; padding:18px 0 0; border-top:1px solid var(--ink); }
.step .n { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
.step b { display:block; margin-bottom:6px; font-size:17px; letter-spacing:-.012em; }
.step p { font-size:14.5px; color:var(--sec); line-height:1.6; }

/* ---------- photo placeholder ---------- */
.photo { aspect-ratio:4/5; border-radius:18px; background:linear-gradient(160deg,#ececef,#dcdce1);
  display:flex; align-items:center; justify-content:center; color:var(--faint); font-size:13px; text-align:center; padding:20px; }

/* ---------- AI Twin pill ---------- */
.twin { display:inline-block; padding:3px 11px; border-radius:999px; color:#fff; font-weight:600; font-size:11px;
  letter-spacing:.02em; text-transform:none; vertical-align:middle;
  background:linear-gradient(135deg,#4D7CFE 0%,#A05CE6 38%,#E9535D 72%,#F0B44C 100%); }

/* ---------- footer: one line, no link blocks ---------- */
footer.site { border-top:1px solid var(--hair); padding:var(--footer-pad); font-size:13px; color:var(--sec); }
footer.site .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
footer.site a { color:var(--sec); text-decoration:none; margin-right:16px; }

@media (max-width:860px){
  .steps { grid-template-columns:1fr; }
}

/* ---------- announcement bar ---------- */
.announce { display:block; background:var(--tint); border-bottom:1px solid var(--hair); text-align:center;
  padding:13px 28px; font-size:15px; color:var(--ink); text-decoration:none; }
.announce:hover { color:var(--ink); background:#F0F0F3; }

/* ---------- mobile navigation ---------- */
html, body { overflow-x:clip; }
.mnav { display:none; }
@media (max-width:767px){
  header.site .nav3 { grid-template-columns:1fr auto; padding:0 20px; }
  header.site .nav3 nav.links { display:none; }
  header.site .right { display:flex; align-items:center; gap:10px; position:relative; }
  .mnav { display:block; border:none; padding:0; }
  .mnav summary { width:44px; height:44px; border-radius:999px; border:1px solid var(--hair); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; list-style:none; }
  .mnav summary::-webkit-details-marker { display:none; }
  .mnav summary::after, .mnav[open] summary::after { content:none; }
  .mnav-ic { display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; box-shadow:0 -6px 0 var(--ink), 0 6px 0 var(--ink); }
  .mnav[open] .mnav-ic { background:transparent; box-shadow:none; position:relative; }
  .mnav[open] .mnav-ic::before, .mnav[open] .mnav-ic::after { content:""; position:absolute; left:0; top:0; width:18px; height:2px; background:var(--ink); border-radius:2px; }
  .mnav[open] .mnav-ic::before { transform:rotate(45deg); }
  .mnav[open] .mnav-ic::after { transform:rotate(-45deg); }
  .mnav-list { position:absolute; right:0; top:calc(100% + 12px); width:min(300px, calc(100vw - 40px)); background:#fff; border:1px solid var(--hair); border-radius:14px; box-shadow:0 12px 32px rgba(31,36,43,.12); padding:8px; display:grid; z-index:60; }
  .mnav-list a { display:flex; align-items:center; min-height:44px; padding:0 14px; font-size:16px; color:var(--ink); text-decoration:none; border-radius:10px; }
  .mnav-list a:hover { background:var(--tint); }
}

/* Klaviyo-Formulare: Rückmeldung */
.kl-done{max-width:420px;margin:0 auto;font-size:15.5px;color:var(--ink);padding:8px 0 2px}
.kl-error{max-width:420px;margin:10px auto 0;font-size:13px;color:#b42318}