/* =========================================================
   Startseite — nutzt ausschließlich Tokens aus base.css
   ========================================================= */

/* ---------- Hero: Vollbild, Text auf dem Bild ---------- */
.hero{
  position:relative;overflow:hidden;background:var(--invert-bg);color:var(--invert-ink);
  min-height:min(calc(100svh - var(--nav-h)),900px);display:flex;flex-direction:column;
}
.hero__bg{
  position:absolute;top:0;bottom:0;left:28%;width:72%;height:100%;
  object-fit:cover;object-position:40% 50%;
}
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--invert-bg) 0%,var(--invert-bg) 28%,var(--scrim) 36%,var(--scrim-mid) 58%,var(--scrim-0) 82%),
    linear-gradient(0deg,var(--invert-bg) 0%,var(--scrim-0) 30%);
}
.hero__inner{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(40px,5vw,72px)}
.hero .eyebrow{color:var(--silver)}
.hero h1{max-width:none;margin-bottom:var(--space-6);color:var(--invert-ink)}
.hero h1 em{color:var(--accent-hi)}
.hero__text{font-size:var(--fs-lede);line-height:1.55;color:var(--silver-hi);max-width:540px;margin-bottom:var(--space-7)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-7)}
.hero__stats{display:flex;flex-wrap:wrap;gap:var(--space-5) var(--space-7);list-style:none;margin:0;padding:0}
.hero__stats li{border-left:1px solid var(--silver-lo);padding-left:var(--space-4)}
.hero__stats b{display:block;font-family:var(--serif);font-weight:500;font-size:1.375rem;line-height:1.2;color:var(--invert-ink)}
.hero__stats span{font-family:var(--mono);font-size:0.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--silver)}
.hero__strip{position:relative;border-top:1px solid var(--invert-line)}
.hero__strip .wrap{display:flex;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-5);padding-bottom:var(--space-5)}
.hero__strip p{margin:0;font-family:var(--serif);font-style:italic;color:var(--invert-muted)}
.hero__strip .mono{color:var(--silver)}

/* ---------- Leistungen ---------- */
.offers{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
.offer{
  position:relative;background:var(--ground);border:1px solid var(--line);
  padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.offer::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.offer:hover{border-color:var(--silver)}
.offer:hover::before{transform:scaleX(1)}
.offer__num{font-family:var(--serif);font-size:3rem;line-height:1;color:var(--silver);margin-bottom:var(--space-5)}
.offer h3{font-size:clamp(1.5rem,1.25rem + .8vw,1.875rem);margin-bottom:var(--space-4)}
.offer p{color:var(--muted)}
.offer .mono{display:block;margin:var(--space-2) 0 var(--space-5);color:var(--silver-lo)}
.offer__link{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--line);font-weight:600;font-size:var(--fs-small);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.offer__link:hover{color:var(--accent-strong)}

/* ---------- KI-Automatisierung (dunkel) ---------- */
.ki__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--invert-line)}
.ki__col{padding:var(--space-6) var(--space-5) var(--space-6) 0;border-right:1px solid var(--invert-line)}
.ki__col + .ki__col{padding-left:var(--space-5)}
.ki__col:last-child{border-right:0}
.ki__num{font-family:var(--serif);font-size:2.5rem;line-height:1;color:var(--silver-lo);display:block;margin-bottom:var(--space-3)}
.ki__col h3{font-size:1.375rem;margin-bottom:var(--space-2)}
.ki__col .mono{display:block;margin-bottom:var(--space-5)}
.ki__col ul{list-style:none;margin:0;padding:0}
.ki__col li{position:relative;padding:var(--space-2) 0 var(--space-2) 1.4em;color:var(--silver-hi);font-size:0.9688rem;border-bottom:1px solid var(--invert-line)}
.ki__col li:last-child{border-bottom:0}
.ki__col li::before{content:"—";position:absolute;left:0;color:var(--accent-hi)}
.ki__note{margin-top:var(--space-7);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-5);padding-top:var(--space-6);border-top:1px solid var(--invert-line)}
.ki__note p{margin:0;font-family:var(--serif);font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);line-height:1.3;max-width:640px}

/* ---------- Ablauf ---------- */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);list-style:none;margin:0;padding:0}
.phase{border-top:1px solid var(--ink);padding-top:var(--space-5)}
.phase__num{font-family:var(--serif);font-size:3rem;line-height:1;color:var(--silver);display:block;margin-bottom:var(--space-4)}
.phase h3{margin-bottom:var(--space-1)}
.phase .mono{display:block;margin-bottom:var(--space-4);color:var(--accent)}
.phase p{color:var(--muted);margin:0}
.section-cta{margin-top:var(--space-7);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.section-cta__note{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver-lo)}

/* ---------- Qualität ---------- */
.quality__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.checks{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.checks li{display:flex;gap:var(--space-4);align-items:baseline;padding:var(--space-4) 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:1.25rem;line-height:1.35}
.checks li::before{content:"✓";font-family:var(--sans);font-size:0.9375rem;font-weight:600;color:var(--accent);flex:none}
.trust{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--space-8);border-top:1px solid var(--line)}
.trust__item{padding:var(--space-5) var(--space-5) 0 0}
.trust__item + .trust__item{padding-left:var(--space-5);border-left:1px solid var(--line)}
.trust__item .mono{display:block;margin-bottom:var(--space-2);color:var(--accent)}
.trust__item p{margin:0;font-size:0.9688rem;color:var(--muted)}

/* ---------- Über uns (dunkel) ---------- */
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,112px);align-items:center}
.portraits{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.portrait{margin:0}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--invert-surface);filter:grayscale(.15) contrast(1.02)}
.portrait:nth-child(2){margin-top:var(--space-8)}
.portrait figcaption{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--silver-lo)}
.portrait figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:1.25rem;color:var(--invert-ink)}
.portrait figcaption span{font-family:var(--mono);font-size:0.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--silver)}
.about__big{font-family:var(--serif);font-size:clamp(4rem,2.5rem + 6vw,7.5rem);line-height:.9;color:var(--silver-hi);margin-bottom:var(--space-4);letter-spacing:-0.02em}
.about h2{margin-bottom:var(--space-5)}
.about__text{color:var(--invert-muted);font-size:1.125rem;max-width:520px;margin-bottom:var(--space-6)}
.about blockquote{margin:0 0 var(--space-7);padding-left:var(--space-5);border-left:2px solid var(--accent-hi);font-family:var(--serif);font-size:1.375rem;line-height:1.35;color:var(--invert-ink)}

/* ---------- Blog-Teaser ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.post-card{
  display:flex;flex-direction:column;background:var(--ground);border:1px solid var(--line);
  padding:var(--space-6);text-decoration:none;color:var(--ink);
  transition:border-color .25s var(--ease);
}
.post-card:hover{border-color:var(--accent)}
.post-card .mono{color:var(--accent);margin-bottom:var(--space-4)}
.post-card h3{font-size:1.3125rem;line-height:1.3;margin-bottom:var(--space-5)}
.post-card__more{margin-top:auto;font-weight:600;font-size:0.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

/* ---------- Abschluss-CTA (dunkel) ---------- */
.final{text-align:center;position:relative}
.final h2{max-width:820px;margin:0 auto var(--space-5)}
.final p{color:var(--invert-muted);max-width:560px;margin:0 auto var(--space-7);font-size:var(--fs-lede)}
.final .section-cta{justify-content:center;margin-top:0}
.final .section-cta__note a{color:var(--silver-hi)}

/* ---------- Responsive ---------- */
.about__grid > *,.quality__grid > *,.portraits > *{min-width:0}
@media (max-width:1024px){
  .ki__grid{grid-template-columns:1fr 1fr}
  .ki__col:nth-child(2){border-right:0}
  .ki__col:nth-child(3){padding-left:0}
  .ki__col:nth-child(-n+2){border-bottom:1px solid var(--invert-line)}
  .trust{grid-template-columns:1fr 1fr;row-gap:var(--space-5)}
  .trust__item:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:860px){
  .hero__bg{left:0;width:100%;object-position:38% 50%}
  .hero__scrim{background:linear-gradient(0deg,var(--invert-bg) 0%,var(--scrim) 45%,var(--scrim-mid) 75%,var(--scrim-mid) 100%)}
  .hero__inner{justify-content:flex-end}
  .offers,.posts,.phases{grid-template-columns:1fr}
  .quality__grid,.about__grid{grid-template-columns:1fr}
  .hero__strip .wrap{flex-direction:column}
}
@media (max-width:640px){
  .hero{min-height:min(calc(100svh - var(--nav-h)),760px)}
  .hero__stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
  .hero__stats b{font-size:1.125rem}
  .hero__cta{margin-bottom:var(--space-7)}
  .ki__grid{grid-template-columns:1fr}
  .ki__col,.ki__col + .ki__col,.ki__col:nth-child(3){padding:var(--space-5) 0;border-right:0;border-bottom:1px solid var(--invert-line)}
  .ki__col:last-child{border-bottom:0}
  .trust{grid-template-columns:1fr}
  .trust__item,.trust__item + .trust__item{padding:var(--space-4) 0 0;border-left:0}
  .portrait:nth-child(2){margin-top:var(--space-6)}
  .section-cta{flex-direction:column;align-items:stretch;text-align:center}
}
.quality__lead{color:var(--muted);font-size:var(--fs-lede);margin-bottom:var(--space-6)}

/* ---------- FAQ ---------- */
.faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.faq__grid > *{min-width:0}
.faq__lead{color:var(--muted);font-size:var(--fs-lede);margin:var(--space-5) 0 var(--space-6)}
.faq__list{border-top:1px solid var(--ink)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;gap:var(--space-5);align-items:baseline;padding:var(--space-5) 0}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:1.125rem;color:var(--accent);transition:transform .3s var(--ease)}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__num{font-family:var(--mono);font-size:0.75rem;letter-spacing:.14em;color:var(--silver-lo);flex:none}
.faq__q{font-family:var(--serif);font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.3}
.faq__item summary:hover .faq__q{color:var(--accent)}
.faq__item p{margin:0;padding:0 var(--space-7) var(--space-5) calc(var(--space-5) + 2.2em);color:var(--muted)}
@media (max-width:860px){
  .offers{grid-template-columns:1fr}
  .faq__grid{grid-template-columns:1fr}
  .faq__item p{padding:0 0 var(--space-5) 0}
}