/* ===========================================================
   AktenGenie — Design-Tokens (warm, nahbar)
   =========================================================== */
:root{
  /* Farben — warme Papier-Bühne, tiefe Tinte, EIN Akzent (Petrol) */
  --bg:        #FBF7F1;   /* warmes Papier */
  --sand:      #F3ECE0;   /* alternierende Sektion */
  --surface:   #FFFFFF;
  --ink:       #1C1A17;   /* warmes Fast-Schwarz */
  --muted:     #5B554C;
  --faint:     #8A8378;
  --border:    #E7DED0;
  --accent:    #0E6E63;   /* Genie-Petrol — Vertrauen */
  --accent-strong:#0A574E;
  --accent-tint:#E3F0ED;
  --accent-ink:#093F39;   /* Petrol für Text auf hell */
  --spark:     #C98A2B;   /* warmes Gold — nur Mini-Akzent */
  --cta-bg:    #0E2E2A;   /* tiefe Petrol-Bühne für CTA/Footer */

  /* Maße */
  --maxw: 1140px;
  --radius: 16px;
  --radius-sm: 10px;
  --gap: clamp(1rem, 3vw, 2rem);

  /* Type */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: .55s;
}

/* ===========================================================
   Reset / Basis
   =========================================================== */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; display:block }
a{ color:var(--accent-ink); text-underline-offset:3px }
h1,h2,h3{ line-height:1.12; letter-spacing:-.015em; margin:0 0 .5em }
p{ margin:0 0 1em }
b{ font-weight:650 }

.wrap{ width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto }
.narrow{ max-width:760px }
.skip{ position:absolute; left:-9999px }
.skip:focus{ left:1rem; top:1rem; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:8px; z-index:50 }

:where(a,button,summary,input,textarea):focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}

/* ===========================================================
   Buttons
   =========================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--accent); color:#fff; font-weight:600; font-size:1rem;
  padding:.85rem 1.4rem; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow:0 1px 2px rgba(14,46,42,.18);
}
.btn:hover{ background:var(--accent-strong); transform:translateY(-1px); box-shadow:0 8px 22px -8px rgba(14,110,99,.5) }
.btn--lg{ padding:1.05rem 1.9rem; font-size:1.06rem }
.btn--sm{ padding:.6rem 1.1rem; font-size:.95rem }
.btn--full{ width:100%; margin-top:.4rem }
.btn--ghost{ background:transparent; color:var(--accent-ink); border-color:var(--border); box-shadow:none }
.btn--ghost:hover{ background:var(--surface); border-color:var(--accent); color:var(--accent-ink) }

/* ===========================================================
   Nav
   =========================================================== */
.nav{ position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--border) }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:64px }
.brand{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--ink) }
.brand__mark{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--accent-tint); color:var(--accent) }
.brand__name{ font-weight:600; font-size:1.15rem; letter-spacing:-.01em }
.brand__name b{ color:var(--accent-ink); font-weight:750 }

/* ===========================================================
   Hero
   =========================================================== */
.hero{ padding:clamp(2.5rem,7vw,5.5rem) 0 clamp(2rem,5vw,4rem) }
.hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center }
.eyebrow{ font-size:.85rem; font-weight:600; letter-spacing:.02em; color:var(--accent-ink); background:var(--accent-tint); display:inline-block; padding:.35rem .7rem; border-radius:999px; margin:0 0 1rem }
.eyebrow--center{ display:block; text-align:center; background:none; padding:0; color:var(--faint); letter-spacing:.12em; text-transform:uppercase; font-size:.78rem }
.hero__h1{ font-size:clamp(2rem, 5.2vw, 3.4rem); font-weight:750 }
.hero__sub{ font-size:clamp(1.05rem,2.4vw,1.28rem); color:var(--muted); max-width:34ch }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin:1.6rem 0 1.2rem }
.trustline{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; color:var(--muted); font-size:.92rem; margin:0 }
.trustline span{ white-space:nowrap }

/* Hero-Mock (Konzept-Illustration, kein echter Screenshot) */
.hero__art{ perspective:1200px }
.mock{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 30px 60px -30px rgba(28,26,23,.28), 0 2px 6px rgba(28,26,23,.05);
  overflow:hidden; transform:rotateY(-6deg) rotateX(2deg); transform-style:preserve-3d;
}
.mock__bar{ display:flex; gap:.4rem; padding:.75rem .9rem; background:var(--sand); border-bottom:1px solid var(--border) }
.mock__bar span{ width:10px; height:10px; border-radius:50%; background:#d9cfbf }
.mock__body{ padding:1rem; display:grid; gap:.75rem }
.bubble{ font-size:.95rem; padding:.7rem .9rem; border-radius:14px; max-width:88% }
.bubble--you{ background:var(--accent); color:#fff; border-bottom-right-radius:5px; justify-self:end }
.bubble--genie{ background:var(--sand); border:1px solid var(--border); border-bottom-left-radius:5px; justify-self:start; width:100% }
.doc{ display:grid; gap:.35rem }
.doc__row{ font-size:.85rem; color:var(--muted); padding:.35rem .5rem; background:var(--surface); border-radius:7px }
.doc__row--head{ font-weight:650; color:var(--ink) }
.doc__row--sum{ font-weight:650; color:var(--accent-ink); background:var(--accent-tint) }

/* ===========================================================
   Sektionen
   =========================================================== */
.section{ padding:clamp(2.8rem,7vw,5.5rem) 0 }
.section--sand{ background:var(--sand); border-block:1px solid var(--border) }
.h2{ font-size:clamp(1.6rem,3.6vw,2.4rem); font-weight:730 }
.h2--center{ text-align:center }
.lead{ font-size:clamp(1.1rem,2.3vw,1.32rem); color:var(--ink) }
.lead--center{ text-align:center; max-width:60ch; margin-inline:auto }
.center{ text-align:center; max-width:62ch; margin-inline:auto; color:var(--muted) }
.narrow p{ color:var(--muted) }
.narrow .lead{ color:var(--ink) }

/* Steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:2.5rem }
.step{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem 1.5rem }
.step__num{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--accent-tint); color:var(--accent-ink); font-weight:750; font-size:1.15rem; margin-bottom:1rem }
.step__h{ font-size:1.2rem; font-weight:680; margin:0 0 .4rem }
.step p{ margin:0; color:var(--muted); font-size:1rem }

/* Benefits */
.benefits{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin-top:2.5rem }
.benefit{ padding:1.5rem 1.6rem; border-left:3px solid var(--accent); background:var(--surface); border-radius:0 var(--radius) var(--radius) 0; border:1px solid var(--border); border-left-width:3px }
.benefit__h{ font-size:1.18rem; font-weight:680; margin:0 0 .4rem }
.benefit p{ margin:0; color:var(--muted) }

/* Fit */
.fit{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) }
.fit__col{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.7rem 1.6rem }
.fit__h{ font-size:1.2rem; font-weight:680; margin:0 0 .9rem }
.fit__col ul{ margin:0; padding:0; list-style:none; display:grid; gap:.6rem }
.fit__col li{ position:relative; padding-left:1.8rem; color:var(--muted) }
.fit__col--yes li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700 }
.fit__col--no li::before{ content:"–"; position:absolute; left:.15rem; color:var(--faint); font-weight:700 }
.fit__col--yes{ border-top:3px solid var(--accent) }

/* FAQ */
.faq{ margin-top:2rem; display:grid; gap:.7rem }
.faq__item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden }
.faq__item summary{ cursor:pointer; padding:1.05rem 1.3rem; font-weight:620; font-size:1.06rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem }
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary::after{ content:"+"; color:var(--accent); font-weight:700; font-size:1.4rem; transition:transform .2s var(--ease) }
.faq__item[open] summary::after{ transform:rotate(45deg) }
.faq__a{ padding:0 1.3rem 1.1rem; color:var(--muted) }
.faq__a p{ margin:0 }

/* CTA / Pilot */
.section--cta{ background:var(--cta-bg); color:#F4F1EA }
.h2--onDark{ color:#fff }
.lead--onDark{ color:#CBD8D4 }
.eyebrow--onDark{ color:#7FB8AE }
.lead-form{ margin-top:2rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:clamp(1.3rem,3vw,2rem) }
.lead-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.field{ display:grid; gap:.35rem; margin-bottom:1rem }
.field > span{ font-size:.92rem; color:#CBD8D4; font-weight:550 }
.field i{ color:#8FA8A2; font-style:normal }
.field input,.field textarea{
  font:inherit; font-size:1rem; color:#fff; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:.8rem .9rem; width:100%;
}
.field input::placeholder,.field textarea::placeholder{ color:#7f938e }
.field input:focus,.field textarea:focus{ border-color:var(--spark); background:rgba(255,255,255,.09); outline:none }
.form-note{ font-size:.85rem; color:#9FB2AD; margin:.9rem 0 0; text-align:center }
.form-note a{ color:#CFE6E1 }
.hp{ position:absolute; left:-9999px }

/* ===========================================================
   Footer
   =========================================================== */
.footer{ background:var(--cta-bg); color:#C8D4D0; padding:3rem 0 2rem; border-top:1px solid rgba(255,255,255,.08) }
.footer__inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.5rem; align-items:start }
.footer .brand__name{ color:#fff; font-size:1.25rem }
.footer .brand__name b{ color:#7FB8AE }
.footer__tag{ margin:.5rem 0 0; color:#9FB2AD; font-size:.95rem; max-width:42ch }
.footer__links{ display:flex; flex-direction:column; gap:.6rem; text-align:right }
.footer__links a{ color:#C8D4D0; text-decoration:none }
.footer__links a:hover{ color:#fff; text-decoration:underline }
.footer__legal{ margin-top:2rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.08); color:#7f938e; font-size:.85rem }

/* ===========================================================
   Reveal-Animation
   =========================================================== */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease) }
.reveal.in{ opacity:1; transform:none }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width:860px){
  .hero__grid{ grid-template-columns:1fr }
  .hero__sub{ max-width:46ch }
  .hero__art{ order:1; max-width:360px; margin-top:.5rem }
  .mock{ transform:none }
  .steps{ grid-template-columns:1fr }
  .benefits{ grid-template-columns:1fr }
  .fit{ grid-template-columns:1fr }
}
@media (max-width:560px){
  body{ font-size:16px }
  .lead-form__row{ grid-template-columns:1fr }
  .footer__inner{ flex-direction:column }
  .footer__links{ text-align:left }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none; transition:none }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}