/* DENKRAUM — Shared Stylesheet v4
   ============================================================ */

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── TOKENS ─────────────────────────────────────────────────── */
:root{
  --white:#FFFFFF;--black:#0A0A0A;--body:#3A3A3A;--muted:#909090;
  --rule:#E4E4E4;--bg-off:#F8F8F8;--bg-alt:#F5F5F5;
  --max:1100px;--gutter:clamp(24px,5.5vw,64px);--section:clamp(88px,13vw,152px);
}

/* ── BASE ───────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',system-ui,sans-serif;background:var(--white);color:var(--black);
  line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
.eyebrow{display:block;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
h1{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(3.25rem,8vw,6.75rem);line-height:1.03;letter-spacing:-.03em}
h1 em{font-style:italic}
h2{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(2rem,4.5vw,3.375rem);line-height:1.1;letter-spacing:-.025em;margin-top:14px}
h3{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.125rem,2.2vw,1.4rem);line-height:1.25;letter-spacing:-.018em;margin-bottom:10px}
p{color:var(--body)}

/* ── SCROLL REVEAL ──────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn{
  display:inline-block;font-family:'DM Sans',sans-serif;font-size:.9375rem;
  font-weight:400;letter-spacing:.01em;text-decoration:none;padding:13px 30px;
  cursor:pointer;border:none;transition:opacity .2s,background .2s,border-color .2s;
}
.btn-dark{background:var(--black);color:var(--white)}
.btn-dark:hover{opacity:.72}
.btn-outline-dark{background:transparent;color:var(--black);border:1px solid var(--rule)}
.btn-outline-dark:hover{border-color:var(--black)}
.btn-outline-light{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.32)}
.btn-outline-light:hover{border-color:rgba(255,255,255,.75)}

/* ── NAV ────────────────────────────────────────────────────── */
#nav{
  position:fixed;inset:0 0 auto 0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);
  border-bottom:1px solid transparent;transition:background .4s,border-color .4s,backdrop-filter .4s;
}
#nav.scrolled{background:rgba(255,255,255,.9);border-color:var(--rule);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav-logo{font-family:'Instrument Serif',Georgia,serif;font-size:1.1875rem;letter-spacing:-.02em;color:var(--black);text-decoration:none}
.nav-links{display:flex;align-items:center;gap:36px;list-style:none}
.nav-links a{font-size:.875rem;color:var(--body);text-decoration:none;transition:color .2s;position:relative}
.nav-links a:hover{color:var(--black)}
.nav-links a.active{color:var(--black)}
.nav-links a.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;background:var(--black)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;z-index:201;padding:4px}
.nav-hamburger span{display:block;width:22px;height:1px;background:var(--black);transition:transform .3s,opacity .3s}
.nav-hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-mobile-overlay{display:none;position:fixed;inset:0;background:var(--white);z-index:199;flex-direction:column;justify-content:center;align-items:center;gap:36px}
.nav-mobile-overlay.open{display:flex}
.nav-mobile-overlay a{font-family:'Instrument Serif',serif;font-size:2rem;letter-spacing:-.02em;color:var(--black);text-decoration:none}

/* dark-hero nav state */
#nav[data-theme="dark"] .nav-logo{color:white}
#nav[data-theme="dark"] .nav-links a{color:rgba(255,255,255,.6)}
#nav[data-theme="dark"] .nav-links a:hover{color:white}
#nav[data-theme="dark"] .nav-links a.active{color:white}
#nav[data-theme="dark"] .nav-links a.active::after{background:rgba(255,255,255,.5)}
#nav[data-theme="dark"] .nav-hamburger span{background:white}

/* ── HERO VARIANTS ──────────────────────────────────────────── */
#hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
#hero.hero-dark{background:var(--black)}
#hero.hero-light{background:var(--white);border-bottom:1px solid var(--rule)}
#net-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-body{position:relative;z-index:1;padding:120px 0 80px;max-width:700px}
.hero-dark .eyebrow{color:rgba(255,255,255,.35)}
.hero-dark h1{color:var(--white)}
.hero-sub{font-size:clamp(1rem,1.9vw,1.125rem);line-height:1.75;color:var(--body);max-width:500px;margin-bottom:48px}
.hero-dark .hero-sub{color:rgba(255,255,255,.55)}
.hero-scroll-hint{margin-top:72px;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.2);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.hero-scroll-hint::before{content:'';display:block;width:32px;height:1px;background:rgba(255,255,255,.15)}

/* ── PROBLEM ────────────────────────────────────────────────── */
#problem{padding:var(--section) 0;background:var(--bg-off)}
.problem-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(48px,9vw,120px);align-items:start}
.stat-num{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(7rem,18vw,12.5rem);line-height:.85;letter-spacing:-.04em;color:var(--black);display:block}
.stat-caption{margin-top:16px;font-size:.8125rem;color:var(--muted);max-width:180px;line-height:1.55}
.problem-text h2{max-width:460px}
.problem-text p{margin-top:24px;font-size:1.0625rem;line-height:1.78;max-width:480px}
.problem-text p+p{margin-top:16px}
.pain-list{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:10px}
.pain-list li{font-size:1rem;color:var(--body);padding-left:18px;position:relative;line-height:1.55}
.pain-list li::before{content:'—';position:absolute;left:0;color:var(--muted)}

/* ── SECTION HEADS ──────────────────────────────────────────── */
.section-head{margin-bottom:clamp(52px,9vw,96px)}
.section-head h2{max-width:540px}

/* ============================================================
   MOCKUP SYSTEM — dark chrome, no colored dots
   ============================================================ */
.mockup{background:#111111;border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.mockup-chrome{background:#0e0e0e;border-bottom:1px solid #222;padding:8px 14px;display:flex;align-items:center;flex-shrink:0}
.mockup-label{font-family:'JetBrains Mono',monospace;font-size:.5625rem;color:#555;letter-spacing:.05em;text-transform:lowercase}
.mockup-body{flex:1;overflow:hidden;display:flex;flex-direction:column}

/* Editor layout (sidebar + main) */
.mk-editor{display:flex;flex:1;overflow:hidden}
.mk-sidebar{width:148px;flex-shrink:0;background:#0d0d0d;border-right:1px solid #1a1a1a;padding:8px 0;overflow:hidden}
.mk-sidebar-sect{font-family:'DM Sans',sans-serif;font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:#3a3a3a;padding:10px 12px 4px;display:block}
.mk-sidebar-item{font-family:'DM Sans',sans-serif;font-size:.625rem;color:#505050;padding:4px 12px 4px 20px;display:block;cursor:default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-sidebar-item.active{color:#C0C0C0;background:rgba(255,255,255,.05)}

/* Main editor area */
.mk-main{flex:1;padding:14px 16px;overflow:hidden;font-family:'JetBrains Mono',monospace;font-size:.5875rem;line-height:1.7;color:#888}
.mk-date{font-family:'DM Sans',sans-serif;font-size:.6875rem;color:#444;margin-bottom:12px}
.mk-h2{color:#888;font-size:.5875rem;margin-bottom:3px}
.mk-text{color:#666;white-space:pre-wrap;font-size:.5875rem}
.mk-link{color:#888;text-decoration:underline;text-underline-offset:2px}
.mk-tag{color:#4a4a4a}
.mk-cursor{display:inline-block;width:6px;height:.85em;background:rgba(255,255,255,.38);vertical-align:text-bottom;animation:blink 1.1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* Terminal */
.mk-terminal{flex:1;padding:14px 16px;overflow:hidden;font-family:'JetBrains Mono',monospace;font-size:.5875rem;line-height:1.65}
.mk-prompt{color:rgba(255,255,255,.65);margin-bottom:10px}
.mk-prompt-char{color:#444;margin-right:6px}
.mk-cmd{color:#C0C0C0}
.mk-out-title{font-family:'DM Sans',sans-serif;font-size:.5rem;font-weight:500;color:#777;margin:10px 0 6px;letter-spacing:.08em;text-transform:uppercase}
.mk-out-item{color:#999;margin-bottom:3px;padding-left:14px;position:relative;font-size:.5875rem}
.mk-out-item::before{content:'›';position:absolute;left:0;color:#444}
.mk-out-sub{font-size:.5125rem;color:#565656;padding-left:14px;margin-top:2px;margin-bottom:7px;line-height:1.55}
.mk-out-conn{font-size:.5125rem;color:#565656;padding-left:14px;font-style:italic;margin-bottom:7px}
hr.mk-div{border:none;border-top:1px solid #1e1e1e;margin:10px 0}

/* Graph insight bar */
.mk-insight{border-top:1px solid #1a1a1a;padding:10px 14px;background:#0d0d0d;flex-shrink:0}
.mk-insight-label{font-family:'DM Sans',sans-serif;font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:#444;margin-bottom:5px;display:block}
.mk-insight-text{font-family:'DM Sans',sans-serif;font-size:.625rem;color:#777;line-height:1.6}

/* Chat-style (for business Q&A mockup) */
.mk-chat{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:10px;overflow:hidden;font-family:'DM Sans',sans-serif;font-size:.625rem}
.mk-chat-q{align-self:flex-end;background:#1e1e1e;color:#aaa;padding:7px 11px;border-radius:4px 4px 0 4px;max-width:80%;line-height:1.5}
.mk-chat-a{align-self:flex-start;background:#141414;color:#888;padding:9px 11px;border-radius:4px 4px 4px 0;max-width:90%;line-height:1.55;border:1px solid #1e1e1e}
.mk-chat-sources{font-size:.5125rem;color:#555;margin-top:5px;font-style:italic;line-height:1.5}

/* ── 3-COLUMN DEMO GRID (Homepage) ──────────────────────────── */
.demo-section{padding:var(--section) 0;background:var(--bg-alt)}
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.demo-card{display:flex;flex-direction:column;gap:16px}
.demo-card-head{display:flex;align-items:baseline;gap:12px}
.demo-card-num{font-family:'Instrument Serif',serif;font-size:.8125rem;color:var(--muted);letter-spacing:.04em}
.demo-card-title{font-family:'Instrument Serif',serif;font-size:1.125rem;letter-spacing:-.015em;color:var(--black)}
.demo-card-mockup{height:320px;overflow:hidden;flex-shrink:0}
.demo-card-mockup .mockup{height:100%}
.demo-card-desc{font-size:.875rem;color:var(--muted);line-height:1.65}

/* ── VERTICAL ALTERNATING STEPS (Subpages) ───────────────────── */
.vert-section{padding:var(--section) 0;background:var(--bg-alt)}
.vert-steps{display:flex;flex-direction:column}
.vert-step{
  display:flex;gap:clamp(48px,8vw,96px);align-items:center;
  padding:clamp(56px,9vw,88px) 0;border-bottom:1px solid var(--rule);
}
.vert-step:last-child{border-bottom:none}
.vert-step.flip{flex-direction:row-reverse}
.vert-step-text,.vert-step-visual{flex:1 1 0;min-width:0}
.vert-step-num{font-family:'Instrument Serif',serif;font-size:.8125rem;color:var(--muted);letter-spacing:.06em;display:block;margin-bottom:14px}
.vert-step h3{font-size:clamp(1.375rem,2.5vw,1.875rem);line-height:1.2;letter-spacing:-.02em;margin-bottom:14px}
.vert-step-desc{font-size:1rem;color:var(--body);line-height:1.75}

/* ── ZWEI WEGE CARDS ─────────────────────────────────────────── */
.zwei-wege{padding:var(--section) 0}
.zwei-wege-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.weg-card{background:var(--white);padding:clamp(40px,6vw,64px)}
.weg-card-eyebrow{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;display:block}
.weg-card-pain{font-family:'Instrument Serif',serif;font-size:clamp(1.125rem,2vw,1.5rem);letter-spacing:-.018em;color:var(--black);margin-bottom:14px;line-height:1.35}
.weg-card-desc{font-size:1rem;color:var(--body);margin-bottom:28px;line-height:1.7}
.weg-bullets{list-style:none;margin-bottom:36px;display:flex;flex-direction:column;gap:9px}
.weg-bullets li{font-size:.875rem;color:var(--body);padding-left:18px;position:relative}
.weg-bullets li::before{content:'—';position:absolute;left:0;color:var(--muted)}

/* ── FEATURES — animated SVG icons ──────────────────────────── */
.feat-section{padding:var(--section) 0}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule)}
.feat-item{padding:clamp(24px,3.5vw,40px) clamp(22px,3vw,36px);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:14px}
.feat-item:nth-child(3n){border-right:none}
.feat-item:nth-last-child(-n+3){border-bottom:none}
.feat-icon{height:48px;display:flex;align-items:center}
.feat-item h3{font-size:.9375rem;margin-bottom:4px;color:var(--black)}
.feat-item p{font-size:.8125rem;line-height:1.65;color:var(--muted)}

/* SVG animation keyframes */
@keyframes fa-pulse{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}
@keyframes fa-draw{0%{stroke-dashoffset:70}100%{stroke-dashoffset:0}}
@keyframes fa-trace{0%{stroke-dashoffset:110}100%{stroke-dashoffset:0}}
@keyframes fa-blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes fa-fade-draw{0%{opacity:0;stroke-dashoffset:80}40%{opacity:.8}100%{stroke-dashoffset:0;opacity:.8}}
@keyframes fa-r-pulse{0%,100%{r:4}50%{r:6.5}}
@keyframes fa-spin-slow{from{transform-origin:50% 50%;transform:rotate(0)}to{transform-origin:50% 50%;transform:rotate(360deg)}}

.fa-p{animation:fa-pulse 2s ease-in-out infinite}
.fa-p:nth-child(2){animation-delay:.3s}
.fa-p:nth-child(3){animation-delay:.6s}
.fa-p:nth-child(4){animation-delay:.9s}
.fa-draw{stroke-dasharray:70;stroke-dashoffset:70;animation:fa-draw 1.6s ease-out infinite;animation-delay:.5s}
.fa-trace{stroke-dasharray:110;animation:fa-trace 2.2s ease-out infinite}
.fa-blink{animation:fa-blink 1s step-end infinite}
.fa-fade-draw{stroke-dasharray:80;stroke-dashoffset:80;animation:fa-fade-draw 2.2s ease-out infinite}
.fa-rpulse{animation:fa-r-pulse 2s ease-in-out infinite}

/* ── QUOTE ──────────────────────────────────────────────────── */
#quote-section{padding:var(--section) 0;background:var(--bg-off)}
.quote-wrap{max-width:820px}
.open-quote{font-family:'Instrument Serif',serif;font-size:4.5rem;line-height:.4;color:var(--rule);display:block;margin-bottom:36px;user-select:none}
blockquote{font-family:'Instrument Serif',serif;font-size:clamp(1.375rem,2.8vw,2rem);line-height:1.48;letter-spacing:-.018em;color:var(--black);margin-bottom:32px}
blockquote em{font-style:italic}
.attribution{font-size:.875rem;color:var(--muted);line-height:1.6}
.attribution strong{font-weight:500;color:var(--body);display:block}

/* ── TIMELINE ───────────────────────────────────────────────── */
.timeline-section{padding:var(--section) 0}
.timeline{position:relative;padding-left:clamp(80px,14vw,160px)}
.timeline-rule{position:absolute;left:clamp(30px,5vw,56px);top:8px;bottom:8px;width:1px;background:var(--rule)}
.tl-item{
  position:relative;margin-bottom:clamp(52px,8vw,88px);
  opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s ease;
}
.tl-item:last-child{margin-bottom:0}
.tl-item.visible{opacity:1;transform:translateY(0)}
.tl-time{
  position:absolute;
  left:calc(-1 * clamp(80px,14vw,160px));
  width:calc(clamp(80px,14vw,160px) - 22px);
  text-align:right;
  font-family:'JetBrains Mono',monospace;font-size:.625rem;
  color:var(--muted);line-height:1;padding-top:4px;
}
.tl-dot{
  position:absolute;
  left:calc(-1 * (clamp(80px,14vw,160px) - clamp(30px,5vw,56px)) - 3px);
  top:5px;width:6px;height:6px;border-radius:50%;
  background:var(--white);border:1px solid #bbb;
}
.tl-title{font-family:'Instrument Serif',serif;font-size:clamp(1rem,1.8vw,1.25rem);letter-spacing:-.015em;color:var(--black);margin-bottom:8px}
.tl-desc{font-size:.9375rem;color:var(--body);line-height:1.7;margin-bottom:18px;max-width:540px}
.tl-mockup{max-width:540px}

/* ── COMMANDS (fuer-mich) ────────────────────────────────────── */
.commands-section{padding:var(--section) 0;background:var(--bg-off)}
.commands-intro{font-size:1rem;color:var(--muted);margin-bottom:clamp(36px,5vw,56px);max-width:520px;line-height:1.7}
.commands-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule)}
.cmd-card{background:var(--white);padding:22px 24px 18px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cmd-card:nth-child(3n){border-right:none}
.cmd-card:nth-last-child(-n+3){border-bottom:none}
.cmd-name{font-family:'JetBrains Mono',monospace;font-size:.875rem;color:var(--black);display:block;margin-bottom:8px}
.cmd-desc{font-size:.8125rem;color:var(--muted);line-height:1.55}

/* ── COMPOUND GROWTH (fuer-mich) ─────────────────────────────── */
.compound-section{padding:var(--section) 0;background:var(--bg-alt)}
.compound-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:40px}
.compound-card{background:var(--white);padding:clamp(36px,5vw,52px) clamp(28px,4vw,44px)}
.compound-week{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:28px}
.compound-num{font-family:'Instrument Serif',serif;font-size:clamp(2.5rem,5vw,3.75rem);letter-spacing:-.03em;color:var(--black);display:block;line-height:.9;margin-bottom:4px}
.compound-label{font-size:.8125rem;color:var(--muted);display:block;margin-bottom:16px}
.compound-note{font-size:.875rem;color:var(--muted);line-height:1.65;max-width:560px}

/* ── ROI STATS (fuer-unternehmen) ────────────────────────────── */
.stats-section{padding:var(--section) 0}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule)}
.stat-roi{background:var(--bg-off);padding:clamp(36px,5vw,52px) clamp(24px,4vw,44px);border-right:1px solid var(--rule);text-align:center}
.stat-roi:last-child{border-right:none}
.stat-roi-num{font-family:'Instrument Serif',serif;font-size:clamp(2.5rem,5vw,4rem);letter-spacing:-.03em;color:var(--black);display:block;margin-bottom:10px}
.stat-roi-label{font-size:.875rem;color:var(--muted);line-height:1.55}

/* ── COLLAB STEPS (fuer-unternehmen) ─────────────────────────── */
.collab-section{padding:var(--section) 0;background:var(--bg-off)}
.collab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,5vw,52px)}
.collab-num{font-family:'Instrument Serif',serif;font-size:2.5rem;color:var(--rule);letter-spacing:-.03em;display:block;margin-bottom:14px;line-height:1}
.collab-step h3{margin-bottom:8px}
.collab-step p{font-size:.875rem;color:var(--muted);line-height:1.65}

/* ── CTA ────────────────────────────────────────────────────── */
#cta{padding:var(--section) 0;background:var(--black)}
#cta .eyebrow{color:rgba(255,255,255,.3)}
#cta h2{color:var(--white);max-width:580px;margin-bottom:52px}
.cta-note{font-size:.8rem;color:rgba(255,255,255,.28);letter-spacing:.02em;margin-top:16px}

/* ── WAITLIST FORM ──────────────────────────────────────────── */
.waitlist-form{display:flex;gap:0;max-width:480px;margin-bottom:0}
.waitlist-input{
  flex:1;min-width:0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);border-right:none;
  color:var(--white);font-family:'DM Sans',sans-serif;font-size:.9375rem;
  padding:13px 18px;outline:none;transition:background .2s,border-color .2s;
}
.waitlist-input::placeholder{color:rgba(255,255,255,.28)}
.waitlist-input:focus{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32)}
.waitlist-btn{
  background:var(--white);color:var(--black);border:none;
  font-family:'DM Sans',sans-serif;font-size:.9375rem;font-weight:400;
  padding:13px 24px;cursor:pointer;white-space:nowrap;
  transition:opacity .2s;flex-shrink:0;
}
.waitlist-btn:hover{opacity:.82}
.waitlist-btn:disabled{opacity:.45;cursor:default}
.waitlist-success{
  display:none;font-size:.875rem;
  color:rgba(255,255,255,.45);line-height:1.6;padding:13px 0;
}
.waitlist-success.shown{display:block}
@media(max-width:560px){
  .waitlist-form{flex-direction:column;max-width:100%}
  .waitlist-input{border-right:1px solid rgba(255,255,255,.15)}
  .waitlist-btn{width:100%}
}

/* ── LEGAL PAGES (Datenschutz, Impressum) ───────────────────── */
.legal-page{padding-top:clamp(80px,12vw,128px);padding-bottom:clamp(80px,12vw,128px)}
.legal-wrap{max-width:740px;margin:0 auto;padding:0 var(--gutter)}
.legal-wrap h1{font-family:'Instrument Serif',serif;font-size:clamp(2rem,5vw,3rem);line-height:1.15;margin-bottom:40px}
.legal-wrap h2{font-size:1.25rem;font-weight:500;margin:48px 0 12px;padding-top:48px;border-top:1px solid var(--rule)}
.legal-wrap h2:first-of-type{margin-top:0;padding-top:0;border-top:none}
.legal-wrap h3{font-size:1rem;font-weight:500;margin:28px 0 8px}
.legal-wrap h4{font-size:.9375rem;font-weight:500;margin:20px 0 6px}
.legal-wrap p{color:var(--body);margin-bottom:16px;line-height:1.75}
.legal-wrap ul,.legal-wrap ol{margin:0 0 16px 20px;color:var(--body);line-height:1.75}
.legal-wrap li{margin-bottom:6px}
.legal-wrap a{color:var(--black);text-underline-offset:3px}
.legal-wrap strong{font-weight:500;color:var(--black)}
.legal-wrap .notice{background:var(--bg-off);border-left:3px solid var(--black);padding:16px 20px;margin:24px 0;border-radius:0 2px 2px 0}
.legal-wrap .notice p{margin-bottom:0}
.legal-toc{background:var(--bg-off);border-radius:4px;padding:24px 28px;margin-bottom:48px}
.legal-toc p{font-weight:500;margin-bottom:10px;color:var(--black)}
.legal-toc ol{margin:0 0 0 16px;color:var(--body)}
.legal-toc li{margin-bottom:4px}
.legal-toc a{color:var(--body);text-decoration:none;text-underline-offset:3px}
.legal-toc a:hover{color:var(--black);text-decoration:underline}

/* ── FOOTER ─────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule);padding:36px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-logo{font-family:'Instrument Serif',serif;font-size:1rem;color:var(--black);text-decoration:none}
.foot-links{display:flex;gap:28px;list-style:none}
.foot-links a,.foot-email{font-size:.8125rem;color:var(--muted);text-decoration:none;transition:color .2s}
.foot-links a:hover,.foot-email:hover{color:var(--black)}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:1024px){
  .demo-grid{grid-template-columns:1fr}
  .demo-card-mockup{height:300px}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .feat-item:nth-child(3n){border-right:1px solid var(--rule)}
  .feat-item:nth-child(2n){border-right:none}
  .feat-item:nth-last-child(-n+3){border-bottom:1px solid var(--rule)}
  .feat-item:nth-last-child(-n+2){border-bottom:none}
  .feat-item:last-child{border-bottom:none}
  .zwei-wege-grid{grid-template-columns:1fr}
  .vert-step{gap:40px}
  .collab-grid{grid-template-columns:repeat(2,1fr)}
  .compound-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
  .stat-roi{border-right:none;border-bottom:1px solid var(--rule)}
  .stat-roi:last-child{border-bottom:none}
}
@media(max-width:768px){
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  .problem-grid{grid-template-columns:1fr;gap:32px}
  .stat-num{font-size:clamp(5.5rem,22vw,8rem)}
  .vert-step,.vert-step.flip{flex-direction:column;gap:28px}
  .feat-grid{grid-template-columns:1fr}
  .feat-item{border-right:none!important}
  .feat-item:nth-last-child(-n+3){border-bottom:1px solid var(--rule)}
  .feat-item:last-child{border-bottom:none}
  .commands-grid{grid-template-columns:repeat(2,1fr)}
  .cmd-card:nth-child(3n){border-right:1px solid var(--rule)}
  .cmd-card:nth-child(2n){border-right:none}
  .cmd-card:nth-last-child(-n+3){border-bottom:1px solid var(--rule)}
  .cmd-card:nth-last-child(-n+2){border-bottom:none}
  .cmd-card:last-child{border-bottom:none}
  .collab-grid{grid-template-columns:1fr;gap:28px}
  .cta-btns{flex-direction:column}
  .btn{text-align:center;width:100%}
  footer{flex-direction:column;align-items:flex-start;gap:18px}
  .timeline{padding-left:64px}
  .tl-time{width:44px;left:-64px;font-size:.5625rem}
}