/* ============================================================
   Dein Gespräch — Relaunch (hell, warmes Papier · 3 Produkte)
   Klassenbasierte Umsetzung des Design-Handoffs.
   Palette: Tageslicht · Akzent je Bereich · Breakpoint 900px
   ============================================================ */

:root{
  /* Helle Palette (Tageslicht) */
  --page:#F7F6F2;
  --page-2:#EFEDE6;
  --card-hi:#FBFAF7;
  --ink:#0B0B0B;
  --body:#3C3934;
  --muted:#837F76;
  --line:#DEDAD0;

  /* Akzente pro Bereich (oklch, Hex-Fallback) */
  --a-b2b:#FF4200;
  --a-privat:#2E6E8E;
  --a-gruppe:#3C7B57;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Manrope', sans-serif;

  /* Aktiver Bereichsakzent der jeweiligen Seite (Default: B2B) */
  --accent:var(--a-b2b);
}
@supports (color: oklch(0.5 0.1 200)){
  :root{ --a-privat:oklch(0.52 0.09 218); --a-gruppe:oklch(0.53 0.10 148); }
}

body.page-privat{ --accent:var(--a-privat); }
body.page-gruppe{ --accent:var(--a-gruppe); }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--page); color:var(--body);
  font-family:var(--font-body); font-weight:300;
  font-size:20px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--a-b2b); }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; }
::selection{ background:#FF4200; color:#fff; }

:focus-visible{ outline:2px solid var(--a-b2b); outline-offset:3px; }

.container{ max-width:1120px; margin:0 auto; padding-inline:40px; }

/* ── Header ─────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(247,246,242,0.88);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1120px; margin:0 auto; padding:22px 40px;
  display:flex; align-items:baseline; justify-content:space-between; gap:40px;
}
.wordmark{
  font-family:var(--font-display); font-weight:700; font-size:19px;
  letter-spacing:-0.03em; color:var(--ink);
}
.nav{
  display:flex; align-items:baseline; gap:30px; flex-wrap:wrap;
  font-family:var(--font-display); font-weight:500; font-size:14px; letter-spacing:-0.01em;
}
.nav a{ color:var(--ink); padding-bottom:3px; }
.nav a:hover{ color:var(--a-b2b); }
.nav a.nav-martin{ color:var(--muted); }
.nav a[aria-current="page"]{ color:var(--accent); }
.nav a.nav-martin[aria-current="page"]{ color:var(--ink); }
.nav a.nav-kontakt{
  font-size:13px; letter-spacing:0.02em; color:var(--ink);
  border:1px solid var(--ink); border-radius:2px; padding:9px 16px;
}
.nav a.nav-kontakt:hover{ background:var(--ink); color:var(--page); }

/* ── Main / Motion ──────────────────────────────────────── */
main{ animation:dgRise 500ms cubic-bezier(0.2,0,0.2,1) both; }
@keyframes dgRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ── Bausteine ──────────────────────────────────────────── */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-display); font-weight:500; font-size:13px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--accent); flex:none; }
.eyebrow--accent{ color:var(--accent); }

.h1-home{
  margin:32px 0 0; max-width:15ch;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(44px,6.2vw,88px); line-height:1.0; letter-spacing:-0.04em;
  color:var(--ink); text-wrap:balance;
}
.h1-lp{
  margin:32px 0 0; max-width:20ch;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(38px,5.2vw,74px); line-height:1.02; letter-spacing:-0.04em;
  color:var(--ink); text-wrap:balance;
}
.h1-narrow{
  margin:0; font-family:var(--font-display); font-weight:700;
  font-size:clamp(36px,4.6vw,62px); line-height:1.04; letter-spacing:-0.035em;
  color:var(--ink); text-wrap:balance;
}
.h2{
  margin:0; font-family:var(--font-display); font-weight:700;
  font-size:clamp(28px,3.2vw,44px); line-height:1.1; letter-spacing:-0.03em;
  color:var(--ink); text-wrap:pretty;
}
.h2-cta{ font-size:clamp(30px,3.6vw,46px); line-height:1.08; text-wrap:balance; }

.lead{ margin:0; font-size:22px; line-height:1.7; color:var(--body); }
.subline{ margin:34px 0 0; max-width:44ch; font-size:21px; line-height:1.75; color:var(--body); }
.body-p{ margin:0; font-size:20px; line-height:1.8; color:var(--body); max-width:52ch; }
.body-p.muted{ color:var(--muted); }
.small-muted{ margin:0; font-size:19px; line-height:1.8; color:var(--muted); max-width:52ch; }
.pull{
  border-left:2px solid var(--accent); padding-left:24px;
  font-family:var(--font-display); font-weight:500; font-size:26px;
  line-height:1.4; letter-spacing:-0.015em; color:var(--ink);
}

/* Hero-Zeile Startseite: Subline links, Chips rechts */
.hero-row{
  margin-top:40px; display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:flex-end; gap:40px;
}
.hero-row .lead{ flex:1 1 380px; max-width:38ch; }
.chips{ display:flex; flex-wrap:wrap; gap:12px; font-family:var(--font-display); font-weight:500; font-size:13px; letter-spacing:0.02em; }
.chip{ border:1px solid var(--line); border-radius:100px; padding:9px 16px; color:var(--body); }
.chip--accent{ border-color:var(--a-b2b); color:var(--a-b2b); }

/* ── Bereichskarten (Startseite) ────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.card{
  text-align:left; display:grid; grid-template-rows:auto 1fr auto; gap:22px;
  background:var(--card-hi); border:1px solid var(--line); border-top:2px solid var(--card-accent,var(--a-b2b));
  border-radius:3px; padding:38px 30px 30px; min-height:320px;
  transition:transform 300ms cubic-bezier(0.4,0,0.2,1), box-shadow 300ms;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(11,11,11,0.07); }
.card--b2b{ --card-accent:var(--a-b2b); }
.card--privat{ --card-accent:var(--a-privat); }
.card--gruppe{ --card-accent:var(--a-gruppe); }
.card-label{
  font-family:var(--font-display); font-weight:500; font-size:12px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--card-accent,var(--a-b2b));
}
.card-title{
  font-family:var(--font-display); font-weight:500; font-size:27px;
  line-height:1.22; letter-spacing:-0.025em; color:var(--ink); text-wrap:pretty;
}
.card-more{ font-family:var(--font-display); font-weight:500; font-size:14px; color:var(--ink); }

/* ── Abgesetzte Bänder & Splits ─────────────────────────── */
.band{ margin-top:0; background:var(--page-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.band.band--spaced{ margin-top:80px; }
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:72px; align-items:start; }
.even{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:start; }
.stack-22{ display:grid; gap:22px; }
.stack-30{ display:grid; gap:30px; }
.stack-34{ display:grid; gap:34px; }

/* Sektions-Paddings */
.sec{ max-width:1120px; margin:0 auto; padding:110px 40px; }
.sec--hero-home{ padding:96px 40px 88px; }
.sec--hero-lp{ padding:100px 40px 80px; }
.sec--band{ padding:110px 40px; }
.sec--band-lp{ padding:100px 40px; }
.sec--ablauf{ padding:100px 40px 30px; }
.sec--cta-card{ padding:80px 40px 130px; }
.sec--cta-home{ padding:110px 40px 130px; display:grid; gap:30px; justify-items:start; }
.sec--cards{ padding:0 40px 40px; }
.sec--gruppe{ padding:100px 40px 130px; }
.sec--narrow{ max-width:820px; margin:0 auto; padding:110px 40px 130px; display:grid; gap:36px; }
.sec--kontakt{ padding:110px 40px 130px; }

/* ── Ablauf-Schritte ────────────────────────────────────── */
.steps{ margin-top:44px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.steps--2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; }
.step{ border-top:1px solid var(--line); padding-top:22px; display:grid; gap:14px; }
.step--first{ border-top-color:var(--ink); }
.step-num{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:0.1em; color:var(--muted); }
.step--first .step-num{ color:var(--accent); }
.step-title{ font-family:var(--font-display); font-weight:500; font-size:23px; line-height:1.25; letter-spacing:-0.02em; color:var(--ink); }
.step-desc{ font-size:16px; line-height:1.75; color:var(--muted); }

/* ── CTA-Karte + Formular ───────────────────────────────── */
.cta-card{
  background:var(--card-hi); border:1px solid var(--line); border-top:2px solid var(--accent);
  border-radius:3px; padding:60px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:64px; align-items:start;
}
.cta-card__intro{ display:grid; gap:20px; }
.cta-card h3{ margin:0; font-family:var(--font-display); font-weight:700; font-size:34px; line-height:1.1; letter-spacing:-0.03em; color:var(--ink); }
.cta-card__intro p{ margin:0; font-size:18px; line-height:1.75; color:var(--muted); }
.confidential{ font-size:15px; line-height:1.7; color:var(--muted); }

.form{ display:grid; gap:26px; }
.field{ display:grid; gap:8px; }
.field > span{
  font-family:var(--font-display); font-weight:500; font-size:12px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
}
.field input, .field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:8px 0; font-size:18px; font-weight:300; outline:none; width:100%;
}
.field textarea{ resize:none; }
.field input:focus, .field textarea:focus{ border-bottom-color:var(--accent); }
.consent{ display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.6; color:var(--muted); }
.consent input{ width:17px; height:17px; margin-top:3px; accent-color:var(--accent); flex:none; }
.consent a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.btn{
  justify-self:start; font-family:var(--font-display); font-weight:500; font-size:15px;
  background:var(--ink); color:var(--page); border-radius:2px; padding:15px 28px;
}
.btn:hover{ background:var(--accent); color:var(--page); }
.btn--lg{ padding:17px 32px; font-size:16px; }
.form-done{ display:none; font-size:19px; line-height:1.7; color:var(--body); }
.form-done.is-visible{ display:block; }
.form.is-hidden{ display:none; }
.form-card{ background:var(--card-hi); border:1px solid var(--line); border-radius:3px; padding:44px; }

/* ── Gruppe: Rahmen + Termine ───────────────────────────── */
.deflist{ display:grid; gap:0; }
.deflist .row{
  display:flex; justify-content:space-between; gap:24px;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.deflist .row span:first-child{ color:var(--muted); font-size:17px; }
.deflist .row span:last-child{ font-family:var(--font-display); font-weight:500; font-size:17px; color:var(--ink); }
.deflist .row .accent{ color:var(--a-gruppe); }
.termine-card{
  background:var(--card-hi); border:1px solid var(--line); border-top:2px solid var(--a-gruppe);
  border-radius:3px; padding:44px; display:grid; gap:26px;
}
.termine-card h3{ margin:0; font-family:var(--font-display); font-weight:700; font-size:30px; line-height:1.12; letter-spacing:-0.03em; color:var(--ink); }
.termine{ display:grid; gap:0; }
.termin{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:20px 0; border-bottom:1px solid var(--line); width:100%; text-align:left;
}
.termin:hover{ color:var(--a-gruppe); }
.termin .date{ font-family:var(--font-display); font-weight:500; font-size:19px; color:var(--ink); }
.termin:hover .date{ color:var(--a-gruppe); }
.termin .free{ font-size:14px; color:var(--muted); }

/* Kontaktzeilen */
.contact-lines{ margin-top:10px; display:grid; gap:14px; font-size:17px; line-height:1.7; }
.contact-lines .lbl{ color:var(--muted); }
.hairline{ height:1px; background:var(--line); }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer{ border-top:1px solid var(--line); background:var(--page-2); }
.footer-inner{
  max-width:1120px; margin:0 auto; padding:56px 40px;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:24px;
}
.footer-mark{ font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-0.03em; color:var(--ink); }
.footer-links{ display:flex; flex-wrap:wrap; gap:26px; font-size:15px; color:var(--muted); }
.footer-links a{ color:var(--muted); }
.footer-links a:hover{ color:var(--ink); }
.footer-meta{ font-size:14px; color:var(--muted); }

/* ── Rechtsseiten (Impressum / Datenschutz) ─────────────── */
.legal{ max-width:820px; margin:0 auto; padding:110px 40px 130px; }
.legal h1{ margin:0; font-family:var(--font-display); font-weight:700; font-size:clamp(36px,4.6vw,62px); line-height:1.04; letter-spacing:-0.035em; color:var(--ink); text-wrap:balance; }
.legal .divider{ width:48px; height:2px; background:var(--accent); margin:20px 0 48px; }
.legal h2{ font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-0.02em; color:var(--ink); margin:48px 0 16px; padding-top:40px; border-top:1px solid var(--line); }
.legal h2:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.legal p, .legal li{ font-size:17px; line-height:1.8; color:var(--body); margin:0 0 14px; }
.legal ul{ padding-left:20px; margin:0 0 14px; }
.legal li{ margin-bottom:6px; }
.legal strong{ color:var(--ink); font-weight:500; }
.legal a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.legal code{ font-family:monospace; color:var(--accent); font-size:0.95em; }
.legal .info-box{ background:var(--card-hi); border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:3px; padding:20px 24px; margin:0 0 8px; }
.legal .info-box p{ margin:0; font-size:15px; color:var(--muted); }
.legal .stand{ margin-top:56px; font-size:14px; color:var(--muted); }
.footer-meta a{ color:var(--muted); }
.footer-meta a:hover{ color:var(--ink); }

/* ── Responsive (Breakpoint 900px) ──────────────────────── */
@media (max-width:900px){
  .container, .header-inner, .footer-inner,
  .sec, .sec--hero-home, .sec--hero-lp, .sec--band, .sec--band-lp,
  .sec--ablauf, .sec--cta-card, .sec--cta-home, .sec--cards,
  .sec--gruppe, .sec--narrow, .sec--kontakt, .legal{ padding-inline:22px; }

  .nav{ font-size:13px; gap:20px; }
  .cards, .split, .even, .steps, .steps--2{ grid-template-columns:1fr; }
  .split{ gap:34px; }
  .even{ gap:40px; }
  .cta-card{ grid-template-columns:1fr; gap:40px; padding:34px 26px; }
  .termine-card, .form-card{ padding:34px 26px; }
  .hero-row{ align-items:flex-start; }
}

/* ── Reduced Motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  main{ animation:none; }
  .card{ transition:none; }
  .card:hover{ transform:none; }
}

/* ── Select-Feld (Allein / Als Paar) ────────────────────── */
.field select{
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:8px 0; font-size:18px; font-weight:300; outline:none; width:100%; color:var(--body);
}
.field select:focus{ border-bottom-color:var(--accent); }

/* ── Zweite Checkbox / Datenschutz-Microcopy ────────────── */
.form-note{ margin:2px 0 0; font-size:14px; line-height:1.6; color:var(--muted); }
.form-note a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* ── Termin-Zustände + Buchungsbutton ───────────────────── */
.termin[disabled]{ opacity:.5; cursor:default; }
.termin[disabled]:hover{ color:inherit; }
.termin[disabled] .date{ color:var(--muted); }
.termin.is-selected .date, .termin.is-selected .free{ color:var(--a-gruppe); }
.btn[disabled]{ opacity:.45; cursor:default; }
.btn[disabled]:hover{ background:var(--ink); color:var(--page); }

/* ── Krisen-/Verantwortungshinweis (nicht dramatisch) ───── */
.crisis{ max-width:1120px; margin:0 auto; padding:0 40px 96px; }
.crisis__box{ border:1px solid var(--line); border-left:2px solid var(--muted); background:var(--card-hi); border-radius:3px; padding:24px 28px; }
.crisis__box p{ margin:0; font-size:15px; line-height:1.75; color:var(--muted); }
.crisis__box strong{ color:var(--ink); font-weight:500; }
.crisis__box a{ color:var(--body); text-decoration:underline; text-underline-offset:2px; }

/* ── „Wer dir gegenübersitzt“-Modul-Link ────────────────── */
.module-link{ font-family:var(--font-display); font-weight:500; font-size:15px; color:var(--ink); }
.module-link:hover{ color:var(--accent); }

/* ── Mobile Burger-Navigation (< 680px, Master-Vorgabe) ─── */
.nav-toggle{ display:none; }
@media (max-width:680px){
  .header-inner{ position:relative; align-items:center; }
  .nav-toggle{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:30px; height:24px; align-self:center;
  }
  .nav-toggle span{ display:block; height:2px; width:24px; background:var(--ink); border-radius:1px; transition:transform .2s, opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav{
    display:none; position:absolute; top:calc(100% + 1px); left:0; right:0;
    background:var(--page); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 22px 18px;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:12px 0; font-size:16px; width:100%; }
  .nav a.nav-kontakt{ margin-top:10px; padding:11px 16px; }
  .crisis{ padding-inline:22px; }
}


/* ── Tiefe: Lesespalte + Takeaways ──────────────────────── */
.rcol{ max-width:680px; }
.takeaways{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; margin-top:44px; max-width:900px; }
.takeaway{ border-top:1px solid var(--line); padding:22px 0; }
.takeaway h3{ margin:0 0 8px; font-family:var(--font-display); font-weight:500; font-size:20px; line-height:1.2; letter-spacing:-0.02em; color:var(--ink); }
.takeaway p{ margin:0; font-size:16px; line-height:1.7; color:var(--muted); }
@media (max-width:900px){ .takeaways{ grid-template-columns:1fr; } }


/* ── Bild-Band (vollflächig, dezente Ken-Burns-Animation) ── */
.media-band{
  position:relative; width:100%; margin:0; overflow:hidden; line-height:0;
  background:var(--page-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.media-band__img{
  display:block; width:100%; height:clamp(300px, 52vw, 660px);
  object-fit:cover; transform:scale(1.03); will-change:transform;
}
/* sanfte Randabdunklung, damit das Band ruhig in die Seite übergeht */
.media-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 120px rgba(11,11,11,0.05);
}
@media (prefers-reduced-motion: no-preference){
  .media-band__img{ animation:dgKenIn 28s ease-in-out infinite alternate; }
  .media-band--out .media-band__img{ animation-name:dgKenOut; }
  .media-band--pan .media-band__img{ animation-name:dgKenPan; }
}
@keyframes dgKenIn{ from{ transform:scale(1.03); } to{ transform:scale(1.13); } }
@keyframes dgKenOut{ from{ transform:scale(1.13); } to{ transform:scale(1.03); } }
@keyframes dgKenPan{
  from{ transform:scale(1.10) translate3d(-1.6%,0,0); }
  to{ transform:scale(1.10) translate3d(1.6%,0,0); }
}
@media (prefers-reduced-motion: reduce){
  .media-band__img{ animation:none; transform:none; }
}


/* ── Regeln des Raums (prominent auf der Gruppe-Seite) ───── */
.rules{ margin-top:48px; display:grid; gap:0; max-width:900px; }
.rule{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:28px; padding:28px 0; border-top:1px solid var(--line); align-items:start; }
.rule:last-child{ border-bottom:1px solid var(--line); }
.rule-num{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:0.1em; color:var(--accent); padding-top:7px; }
.rule-body h3{ margin:0 0 8px; font-family:var(--font-display); font-weight:500; font-size:23px; line-height:1.2; letter-spacing:-0.02em; color:var(--ink); }
.rule-body p{ margin:0; font-size:17px; line-height:1.75; color:var(--muted); max-width:60ch; }
@media (max-width:900px){ .rule{ grid-template-columns:1fr; gap:8px; padding:22px 0; } .rules{ margin-top:34px; } }