/* KI-Sichtbarkeit — luxury design system */
:root{
  --ink-900:#14110E; --ink-800:#1C1813; --ink-700:#2A2520;
  --ink-500:#4A433B; --ink-300:#8A8076;
  --paper-50:#FAF8F4; --paper-100:#F3EFE8; --paper-200:#E8E2D8;
  --gold-500:#B89B6E; --gold-400:#C9B286; --gold-600:#9A7F52;
  --line-dark:rgba(184,155,110,.22); --line-light:rgba(20,17,14,.10);
  --ff-display:"Fraunces",Georgia,serif;
  --ff-body:"Inter",-apple-system,"Segoe UI",system-ui,sans-serif;
  --fs-hero:clamp(2.6rem,6.4vw,4.6rem); --fs-h1:clamp(2rem,4vw,3rem);
  --fs-h2:clamp(1.7rem,3vw,2.2rem); --fs-h3:1.375rem;
  --fs-body-lg:1.25rem; --fs-body:1.0625rem; --fs-small:.9375rem; --fs-eyebrow:.75rem;
  --s-2:1rem;--s-3:1.5rem;--s-4:2rem;--s-5:3rem;--s-6:4rem;--s-7:6rem;--s-8:8rem;--s-9:12rem;
  --w-max:1200px; --w-text:62ch; --gutter:clamp(1.5rem,5vw,4rem);
  --ease-luxe:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.22,.61,.36,1);
  --dur-fast:240ms; --dur-base:600ms; --dur-slow:900ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper-50);color:var(--ink-800);
  font-family:var(--ff-body);font-size:var(--fs-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.container{max-width:var(--w-max);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--ff-display);font-weight:300;line-height:1.1;letter-spacing:-.015em;color:inherit}
h2{font-size:var(--fs-h2);letter-spacing:-.01em;line-height:1.15}
h3{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.005em}
p{font-size:var(--fs-body)}
a{color:inherit}
.prose{max-width:var(--w-text)}
.prose p+p{margin-top:var(--s-3)}
.quiet{color:var(--ink-300)}
.eyebrow{font-family:var(--ff-body);font-size:var(--fs-eyebrow);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-600);margin-bottom:var(--s-3)}
.eyebrow.gold{color:var(--gold-400)}

/* grain texture */
.grain{position:relative}
.grain::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* header */
.site-head{position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-4) var(--gutter)}
.brand{font-family:var(--ff-display);font-weight:400;font-size:1.15rem;letter-spacing:.02em;
  color:var(--paper-50);text-decoration:none}
.btn-ghost{display:inline-block;font-family:var(--ff-body);font-size:var(--fs-small);
  letter-spacing:.04em;padding:.9rem 1.8rem;border:1px solid var(--gold-500);color:inherit;
  background:transparent;text-decoration:none;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-soft),letter-spacing var(--dur-fast) var(--ease-soft),border-color var(--dur-fast)}
.btn-ghost:hover{background:rgba(184,155,110,.08);letter-spacing:.05em;border-color:var(--gold-400)}
.btn-sm{padding:.6rem 1.2rem;font-size:.8125rem}
.btn-lg{padding:1.1rem 2.4rem;margin-top:var(--s-5)}
.site-head .btn-ghost{color:var(--paper-50)}
.link-underline{position:relative;text-decoration:none;color:inherit;padding-bottom:2px}
.link-underline::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--gold-500);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-fast) var(--ease-soft)}
.link-underline:hover::after{transform:scaleX(1)}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;
  background:radial-gradient(120% 120% at 50% 30%,var(--ink-800),var(--ink-900) 70%);
  color:var(--paper-50);overflow:hidden}
.hero-inner{padding-block:var(--s-9) var(--s-8)}
.hero-title{font-size:var(--fs-hero);font-weight:300;letter-spacing:-.02em;line-height:1.04;margin-bottom:var(--s-5)}
.hero-sub{font-size:var(--fs-body-lg);color:#D9D2C7;line-height:1.55}
.hero-cta{display:flex;align-items:center;gap:var(--s-5);margin-top:var(--s-6);flex-wrap:wrap}

/* sections */
.section{padding-block:var(--s-8)}
.section-light{background:var(--paper-50);color:var(--ink-800)}
.section-dark{background:var(--ink-900);color:var(--paper-50)}
.section-dark .quiet{color:#9A9087}
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--s-7)}
.split-l h2{position:sticky;top:var(--s-6)}
.headline-narrow{max-width:18ch}
.center{text-align:center;display:flex;flex-direction:column;align-items:center}
.center-prose{margin-inline:auto}
.stat{font-family:var(--ff-display);font-size:1.5rem;font-weight:300;line-height:1.4;
  color:var(--ink-800);border-top:1px solid var(--line-light);padding-top:var(--s-4);margin-top:var(--s-4)}
.stat span{color:var(--gold-600);font-size:2.4rem;display:block;margin-bottom:.3rem}

/* answer-first definition */
.lead-answer{font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:300;line-height:1.3;
  max-width:24ch;letter-spacing:-.01em;margin-bottom:var(--s-7)}

/* compare table */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin-top:var(--s-4)}
.compare-col{border-top:1px solid var(--line-dark);padding-top:var(--s-4)}
.compare-accent{border-top-color:var(--gold-500)}
.rule-list{list-style:none}
.rule-list li{padding:var(--s-3) 0;border-bottom:1px solid var(--line-dark);font-size:var(--fs-body)}
.section-light .rule-list li{border-bottom-color:var(--line-light)}
.rule-list-lg li{font-size:var(--fs-body-lg);line-height:1.5;color:#D9D2C7}
.rule-list-lg strong{color:var(--paper-50);font-weight:500;display:block;font-size:var(--fs-body)}

/* steps */
.steps{list-style:none;counter-reset:s;margin-top:var(--s-6);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-7)}
.steps li{border-top:1px solid var(--line-dark);padding-top:var(--s-4)}
.step-no{font-family:var(--ff-display);font-size:1rem;color:var(--gold-400);display:block;margin-bottom:var(--s-3)}
.steps h3{margin-bottom:var(--s-2)}
.steps p{color:#C9C2B8;max-width:42ch}

/* vertical list */
.vertical-list{list-style:none;margin-top:var(--s-6)}
.vertical-list li{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--s-5);align-items:baseline;
  padding:var(--s-5) 0;border-top:1px solid var(--line-light)}
.vertical-list li:last-child{border-bottom:1px solid var(--line-light)}
.vertical-list span{font-family:var(--ff-display);font-size:1.6rem;font-weight:300}
.vertical-list em{font-style:normal;color:var(--ink-500)}

/* faq */
.faq{margin-top:var(--s-6);border-top:1px solid var(--line-light)}
.faq details{border-bottom:1px solid var(--line-light)}
.faq summary{list-style:none;cursor:pointer;padding:var(--s-4) 0;
  font-family:var(--ff-display);font-size:1.3rem;font-weight:400;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-600);font-family:var(--ff-body);font-weight:400;transition:transform var(--dur-fast)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{max-width:60ch;padding-bottom:var(--s-4);color:var(--ink-500)}

/* cta */
.cta-final{text-align:center}

/* footer */
.site-foot{background:var(--ink-900);color:var(--paper-50);padding-block:var(--s-7);border-top:1px solid var(--line-dark)}
.foot-grid{display:flex;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap}
.brand-foot{font-family:var(--ff-display);font-size:1.1rem;margin-bottom:var(--s-2)}
.imprint{font-size:var(--fs-small);line-height:1.8;text-align:right}
.imprint a{color:var(--gold-400);text-decoration:none}

/* reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-base) var(--ease-luxe),transform var(--dur-base) var(--ease-luxe)}
.reveal.in{opacity:1;transform:none}

@media (max-width:820px){
  .split,.steps,.compare{grid-template-columns:1fr;gap:var(--s-5)}
  .split-l h2{position:static}
  .vertical-list li{grid-template-columns:1fr;gap:var(--s-2)}
  .imprint{text-align:left}
  .foot-grid{flex-direction:column}
  .section{padding-block:var(--s-6)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}