/* ============================================================
   MARCEL MENKE — Decision Coaching  ·  static site
   Clean hand-built stylesheet (no WordPress / Impreza).
   ============================================================ */

:root {
  --ink-900:#0A0A0A; --ink-600:#404040; --ink-400:#737373;
  --sand-300:#A3A3A3; --paper:#FAFAFA; --cream:#F5F5F5;
  --ember:#DC2626; --ember-600:#B91C1C;
  --line:rgba(0,0,0,0.10); --line-d:rgba(255,255,255,0.14);
  --f-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-body:"Geist","Inter","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Geist Mono","JetBrains Mono",ui-monospace,monospace;
  --f-serif:"IBM Plex Serif",Georgia,serif;
  --f-hand:"Caveat","Bradley Hand",cursive;
  --wrap:1180px;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink-900);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }

/* ---------- Layout ---------- */
.section { padding:6.5rem 0; }
.section--sm { padding:4rem 0; }
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.bg-paper { background:var(--paper); }
.bg-cream { background:var(--cream); }
.bg-dark  { background:var(--ink-900); color:var(--paper); }
.bg-black { background:#000; color:var(--paper); }

/* ---------- Typography ---------- */
.eyebrow {
  font-family:var(--f-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ember);
  margin:0 0 1.4rem; display:block;
}
.eyebrow::before {
  content:""; display:inline-block; width:28px; height:1px;
  background:currentColor; vertical-align:middle; margin-right:14px; position:relative; top:-1px;
}
.eyebrow.center { text-align:center; }
.h1 {
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(28px,3.3vw,44px); line-height:1.08; letter-spacing:-0.035em;
  margin:0 0 1.6rem; color:var(--ink-900);
}
.h1 em { color:var(--ember); font-style:normal; }
.h2 {
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(28px,3.6vw,44px); line-height:1.12; letter-spacing:-0.02em;
  margin:0 0 1.4rem; color:var(--ink-900);
}
.bg-dark .h2, .bg-black .h2, .bg-dark .h1 { color:var(--paper); }
.lead { font-size:1.125rem; line-height:1.6; color:var(--ink-600); margin:0 0 1.1em; }
.lead:last-child { margin-bottom:0; }
.body { color:var(--ink-600); }
.body p { margin:0 0 1em; } .body p:last-child { margin-bottom:0; }
.body strong { color:var(--ink-900); font-weight:600; }
.bg-dark .lead, .bg-black .lead, .bg-dark .body, .bg-black .body { color:var(--sand-300); }
.bg-dark .body strong, .bg-black .body strong { color:#fff; }
.muted { color:var(--ink-400); font-size:.9rem; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  font-family:var(--f-body); font-weight:500; font-size:1rem; line-height:1;
  padding:16px 26px; border-radius:2px; border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease; white-space:nowrap;
}
.btn::after { content:"\2192"; }
.btn-dark { background:var(--ink-900); color:#fff; }
.btn-dark:hover { background:#000; }
.btn-ember { background:var(--ember); color:#fff; }
.btn-ember:hover { background:var(--ember-600); }
.btn-ghost { background:transparent; color:var(--ink-900); border-color:rgba(0,0,0,0.25); }
.btn-ghost:hover { border-color:var(--ink-900); }

/* ---------- Nav ---------- */
.nav {
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,250,0.88); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in { display:flex; align-items:center; justify-content:space-between; padding:1rem 28px; max-width:var(--wrap); margin:0 auto; gap:1rem; }
.brand { font-family:var(--f-display); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:1.05rem; }

/* ---------- Hero ---------- */
.hero-grid { display:grid; grid-template-columns:1.65fr 1fr; gap:3.5rem; align-items:start; }
.hero-portrait img { border-radius:2px; width:100%; }
.hero-note { font-family:var(--f-mono); font-size:.8rem; letter-spacing:.04em; color:var(--ink-400); margin-top:1.6rem; }
.hero-cta { margin-top:1.8rem; }

/* ---------- Stats row ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; margin-top:4.5rem; }
.stat { border-top:1px solid var(--line); padding-top:1.4rem; }
.stat-n { font-family:var(--f-display); font-weight:700; font-size:2.6rem; line-height:1; letter-spacing:-0.03em; }
.stat-l { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-400); margin-top:.7rem; }

/* ---------- Split heading layout (heading col + body col) ---------- */
.split { display:grid; grid-template-columns:1fr 1.4fr; gap:3.5rem; align-items:start; }
.split-sticky { position:sticky; top:6rem; }

/* ---------- Question grid (diagnose) ---------- */
.qhead { display:flex; align-items:baseline; gap:1rem; margin:3.5rem 0 2rem; }
.qhead .eyebrow { margin:0; }
.qgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.qcell { border-top:1px solid var(--line); padding:1.5rem 1.5rem 1.5rem 0; }
.qcell-n { font-family:var(--f-mono); font-size:.8rem; color:var(--sand-300); }
.qcell-q { font-family:var(--f-display); font-weight:500; font-size:1.05rem; line-height:1.3; margin-top:.6rem; letter-spacing:-0.01em; }

/* ---------- Numbered cards (programm / ergebnis) ---------- */
.cards { display:grid; gap:2.5rem; margin-top:3.5rem; }
.cards-3 { grid-template-columns:repeat(3,1fr); }
.cards-4 { grid-template-columns:repeat(4,1fr); }
.card { border-top:2px solid var(--ink-900); padding-top:1.4rem; }
.bg-dark .card { border-top-color:var(--paper); }
.card-n { font-family:var(--f-mono); font-size:.8rem; color:var(--ember); letter-spacing:.08em; }
.card-t { font-family:var(--f-display); font-weight:600; font-size:1.25rem; line-height:1.2; margin:.8rem 0 .7rem; letter-spacing:-0.01em; }
.bg-dark .card-t { color:var(--paper); }
.card-d { color:var(--ink-600); font-size:.98rem; line-height:1.6; }
.bg-dark .card-d { color:var(--sand-300); }

/* ---------- Testimonials ---------- */
.tgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3.5rem; }
.tcard { background:#fff; border:1px solid var(--line); border-radius:2px; padding:2.2rem 2rem; display:flex; flex-direction:column; }
.tcard-mark { font-family:var(--f-serif); color:var(--ember); font-size:2.6rem; line-height:.4; height:1.2rem; }
.tcard-q { font-family:var(--f-serif); font-style:italic; font-size:1.18rem; line-height:1.5; color:var(--ink-900); margin:1.4rem 0 auto; }
.tcard-who { font-family:var(--f-mono); font-size:.8rem; letter-spacing:.04em; color:var(--ink-900); margin-top:1.6rem; text-transform:uppercase; }
.tcard-role { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; color:var(--ink-400); margin-top:.4rem; text-transform:uppercase; }
.tnote { text-align:center; margin-top:2.5rem; }

/* ---------- Trust logos ---------- */
.trust-label { font-family:var(--f-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400); text-align:center; margin-bottom:2.5rem; }
.trust-row { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.trust-row img { filter:grayscale(100%); opacity:.6; transition:filter .25s ease, opacity .25s ease; width:auto; }
.trust-row img:hover { filter:grayscale(0); opacity:1; }
.logo-rm  { max-height:60px; }
.logo-rmt { max-height:92px; }
.logo-tms { max-height:104px; }

/* ---------- About ---------- */
.about-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:3.5rem; align-items:start; }
.about-photos { display:grid; gap:12px; }
.about-photo-main { position:relative; border-radius:2px; overflow:hidden; }
.about-photo-main img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.about-cap { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; padding:14px 16px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; color:#fff; text-transform:uppercase; background:linear-gradient(to top,rgba(0,0,0,.55),transparent); }
.about-photos-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.about-photos-2 img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:2px; }
.about-creds { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem; }
.cred { border-top:1px solid var(--line); padding-top:1rem; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.04em; color:var(--ink-600); text-transform:uppercase; line-height:1.4; }

/* ---------- Decision fan tiles + carousel ---------- */
.wege-head { margin-bottom:3rem; }
.carousel { position:relative; }
.track { display:flex; flex-wrap:nowrap; gap:2.5rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.track::-webkit-scrollbar { display:none; }
.tile { flex:0 0 calc((100% - 5rem)/3); scroll-snap-align:start; background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,0.05); padding:42px 24px 22px; text-align:center; }
.stage { position:relative; width:100%; }
.fan { display:block; width:100%; aspect-ratio:360/300; background:url("img/fan-hand5.svg") center/contain no-repeat; }
.lbl { position:absolute; transform:translateX(-50%); width:38%; margin:0; font-family:var(--f-hand); font-weight:700; font-size:1.3rem; line-height:1.05; color:var(--ink-900); text-align:center; }
.lbl.t1 { left:16.1%; bottom:calc(66.7% + 18px); }
.lbl.t2 { left:50%;   bottom:calc(81.3% + 18px); width:52%; }
.lbl.t3 { left:83.9%; bottom:calc(66.7% + 18px); }
.tile-origin { font-family:var(--f-hand); font-weight:700; font-size:1.5rem; margin-top:8px; color:var(--ink-900); }
.car-btn { position:absolute; top:42%; transform:translateY(-50%); z-index:5; width:42px; height:42px; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,0.12); color:var(--ink-900); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; box-shadow:0 2px 8px rgba(0,0,0,0.08); transition:color .15s ease, border-color .15s ease; }
.car-btn:hover { color:var(--ember); border-color:rgba(0,0,0,0.25); }
.car-prev { left:-10px; } .car-next { right:-10px; }
.car-btn:disabled { opacity:0; pointer-events:none; }
.car-single .car-btn { display:none; }
.car-dots { display:flex; justify-content:center; gap:9px; margin-top:22px; }
.car-single .car-dots { display:none; }
.car-dot { width:8px; height:8px; border-radius:999px; border:0; padding:0; cursor:pointer; background:rgba(0,0,0,0.18); transition:background .15s ease, transform .15s ease; }
.car-dot.is-active { background:var(--ember); transform:scale(1.15); }

/* ---------- FAQ accordion ---------- */
.faq-list { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-q { width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:1.4rem 2.5rem 1.4rem 0; position:relative; font-family:var(--f-display); font-weight:500; font-size:1.1rem; letter-spacing:-0.01em; color:var(--ink-900); line-height:1.3; }
.faq-q::after { content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%); font-weight:400; font-size:1.5rem; color:var(--ember); transition:transform .2s ease; }
.faq-item.open .faq-q::after { content:"\2212"; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a-in { padding:0 0 1.6rem; color:var(--ink-600); line-height:1.65; max-width:62ch; }

/* ---------- Herz statement ---------- */
.statement { text-align:center; max-width:820px; margin:0 auto; }
.statement .quote { font-family:var(--f-serif); font-style:italic; font-size:1.5rem; line-height:1.5; color:var(--ink-900); max-width:740px; margin:0 auto; }

/* ---------- Booking form ---------- */
.book-grid { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; }
.bullets { list-style:none; margin:1.8rem 0 0; padding:0; }
.bullets li { position:relative; padding-left:1.5rem; margin-bottom:.7rem; color:var(--sand-300); }
.bullets li::before { content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; background:var(--ember); }
.form { background:var(--paper); border-radius:2px; padding:2.2rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form input, .form textarea { width:100%; font-family:var(--f-body); font-size:1rem; color:var(--ink-900); background:#fff; border:1px solid rgba(0,0,0,0.22); border-radius:2px; padding:13px 14px; margin-bottom:1rem; }
.form textarea { min-height:130px; resize:vertical; }
.form input:focus, .form textarea:focus { outline:none; border-color:var(--ember); }
.form .btn-ember { width:100%; justify-content:center; padding:15px; border:0; }
.form-status { margin-top:1rem; font-size:.95rem; }
.form-status.ok { color:#1F7A3D; } .form-status.err { color:var(--ember); }

/* ---------- Footer ---------- */
.foot-grid { display:grid; grid-template-columns:2.4fr 1.2fr 1.2fr; gap:2.5rem; }
.foot-brand { font-family:var(--f-display); font-weight:700; font-size:2rem; letter-spacing:-0.02em; margin:.2rem 0 1rem; }
.foot-h5 { font-family:var(--f-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sand-300); margin:0 0 1.1rem; }
.foot-link { display:block; color:var(--sand-300); margin-bottom:.7rem; transition:color .15s ease; }
.foot-link:hover { color:#fff; }
.foot-bottom { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--line-d); margin-top:3rem; padding-top:1.6rem; color:var(--sand-300); font-size:.85rem; }

/* ---------- Legal pages ---------- */
.legal { max-width:780px; margin:0 auto; padding:5rem 0; }
.legal h1 { font-family:var(--f-display); font-weight:700; font-size:clamp(28px,4vw,40px); letter-spacing:-0.02em; margin:0 0 2.5rem; }
.legal h2 { font-family:var(--f-display); font-weight:600; font-size:1.25rem; margin:2.5rem 0 .8rem; }
.legal p, .legal li { color:var(--ink-600); line-height:1.7; margin:0 0 1rem; }
.legal a { color:var(--ember); }
.legal .back { font-family:var(--f-mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-400); display:inline-block; margin-bottom:2.5rem; }
.legal .note { background:var(--cream); border-left:3px solid var(--ember); padding:1rem 1.2rem; font-size:.92rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
  .hero-grid, .split, .about-grid, .book-grid { grid-template-columns:1fr; gap:2.5rem; }
  .split-sticky { position:static; }
  .cards-4 { grid-template-columns:repeat(2,1fr); }
  .qgrid { grid-template-columns:repeat(2,1fr); }
  .about-creds { grid-template-columns:repeat(2,1fr); }
  .tile { flex-basis:calc((100% - 2.5rem)/2); }
}
@media (max-width:767px) {
  .section { padding:4rem 0; }
  .wrap { padding:0 20px; }
  .stats { grid-template-columns:repeat(2,1fr); gap:1.8rem; margin-top:3rem; }
  .cards-3, .cards-4, .qgrid, .tgrid, .foot-grid { grid-template-columns:1fr; }
  .qcell { padding-right:0; }
  .h1 { font-size:clamp(26px,7.7vw,34px); }
  .h2 { font-size:clamp(25px,7vw,32px); }
  .statement .quote { font-size:1.22rem; }
  .form-row { grid-template-columns:1fr; gap:0; }
  .track { gap:1.25rem; }
  .tile { flex-basis:84%; }
  .car-btn { display:none; }
  .foot-bottom { flex-direction:column; gap:.4rem; }
  .nav-in { padding:.85rem 20px; }
  .brand { font-size:.95rem; }
  .btn { padding:13px 18px; font-size:.95rem; }
}