/*
 * planung-starten – AQM-Langseite (Hybrid).
 * Lange Scroll-Verkaufsseite in der AQM-Sektionsfolge; der bestehende
 * 4-Fragen-Funnel bleibt als Handlungsschritt (Sektion #einordnung, .ps-*).
 * .psx-*  = neue Langseiten-Sektionen.  .ps-*  = bestehender Funnel.
 */

:root {
  /* Marken-Tokens (siehe PRODUCT.md "Brand Commitments") */
  --psx-ink: #1f2937;
  --psx-paper: #fbfaf7;
  --psx-paper2: #f5f1eb;
  --psx-oak: #8c6a4f;
  --psx-oak-dark: #6f5039;
  --psx-nut: #c49a7a;
  --psx-graphit: #555555;
  --psx-line: rgba(140, 106, 79, 0.22);
  --psx-display: var(--font-display, "Space Grotesk", system-ui, sans-serif);

  /* Funnel-Tokens (bestehend) */
  --ps-accent: #946b49;
  --ps-accent-dark: #76533d;
  --ps-surface: #ffffff;
  --ps-text: #172033;
  --ps-muted: #596273;
  --ps-line: rgba(118, 83, 61, 0.26);
  --ps-danger: #a12c2c;
}

html { scroll-behavior: smooth; }

body.page-planung-starten {
  margin: 0;
  overflow-x: hidden;
  background: var(--psx-paper);
  color: var(--psx-ink);
}

/* Anker-Ziel des Funnels: Offset für den Sticky-Header, damit die
   Langseiten-CTAs (href="#einordnung") nativ sauber dorthin scrollen. */
#einordnung { scroll-margin-top: 76px; }

/* ============================================================= HEADER */
.psx-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px clamp(16px, 4vw, 32px);
  background: rgba(251, 250, 247, 0.94);
  border-bottom: 1px solid var(--psx-line);
  -webkit-backdrop-filter: saturate(160%) blur(6px);
  backdrop-filter: saturate(160%) blur(6px);
}
.psx-brand {
  display: grid;
  justify-items: start;
  color: var(--psx-ink);
  text-decoration: none;
  line-height: 1;
  text-transform: uppercase;
}
.psx-brand span { font-family: var(--psx-display); font-size: 1.15rem; letter-spacing: 0.16em; }
.psx-brand small { margin-top: 4px; font-size: 0.55rem; letter-spacing: 0.3em; color: var(--psx-graphit); }
.psx-header-claim {
  flex: 1;
  margin: 0;
  color: var(--psx-graphit);
  font-size: 0.82rem;
  text-align: center;
}

/* ================================================================ CTA */
.psx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 26px;
  border: 2px solid var(--psx-oak-dark);
  border-radius: 11px;
  background: var(--psx-oak-dark);
  color: #fff;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.psx-btn:hover { background: #5c4230; transform: translateY(-1px); }
.psx-btn:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
.psx-btn--sm { min-height: 42px; padding: 9px 16px; font-size: 0.9rem; flex: 0 0 auto; }

/* =============================================================== HERO */
.psx-hero {
  padding: clamp(40px, 7vw, 84px) clamp(16px, 4vw, 32px) clamp(32px, 5vw, 56px);
}
.psx-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  max-width: 1140px;
  margin-inline: auto;
}
.psx-eyebrow {
  margin: 0 0 14px;
  color: var(--psx-oak-dark);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.psx-hero-text h1 {
  margin: 0 0 18px;
  max-width: 20ch;
  font-family: var(--psx-display);
  font-size: clamp(2.05rem, 5.2vw, 3.3rem);
  font-weight: 700;
  line-height: 1.05;
  text-wrap: balance;
}
.psx-lead {
  margin: 0 0 22px;
  max-width: 54ch;
  color: var(--psx-graphit);
  font-size: clamp(1.02rem, 2.1vw, 1.16rem);
  line-height: 1.55;
}
.psx-hero-list {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.psx-hero-list li {
  position: relative;
  padding-left: 30px;
  font-weight: 600;
  line-height: 1.4;
}
.psx-hero-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    linear-gradient(transparent, transparent),
    var(--psx-oak);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.psx-hero-note { margin: 12px 0 0; color: var(--psx-graphit); font-size: 0.82rem; }
.psx-hero-media { position: relative; margin: 0; }
.psx-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 24px 60px -24px rgba(31, 41, 55, 0.45);
}
.psx-hero-media figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(31, 41, 55, 0.86);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.25;
}

/* ============================================================== TRUST */
.psx-trust {
  padding: 16px clamp(16px, 4vw, 32px);
  background: var(--psx-paper2);
  border-block: 1px solid var(--psx-line);
}
.psx-trust-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  max-width: 1080px;
  margin-inline: auto;
  color: var(--psx-graphit);
  font-size: 0.86rem;
  text-align: center;
}
.psx-trust-inner span { position: relative; }
.psx-trust-inner span + span::before {
  content: "·";
  position: absolute;
  left: -13px;
  color: var(--psx-nut);
}
.psx-trust-inner a { color: var(--psx-oak-dark); text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================== SECTIONS */
.psx-section {
  padding: clamp(44px, 7vw, 84px) clamp(16px, 4vw, 32px);
}
.psx-section > * {
  max-width: 1080px;
  margin-inline: auto;
}
.psx-section--alt { background: var(--psx-paper2); }

.psx-section-head { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.psx-section-head .psx-eyebrow { margin-bottom: 10px; }
.psx-section-head h2 {
  margin: 0 auto 12px;
  max-width: 26ch;
  font-family: var(--psx-display);
  font-size: clamp(1.55rem, 3.6vw, 2.35rem);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}
.psx-section-sub {
  margin: 8px auto 0;
  max-width: 62ch;
  color: var(--psx-graphit);
  font-size: clamp(0.98rem, 2vw, 1.08rem);
  line-height: 1.55;
}
.psx-section-sub a { color: var(--psx-oak-dark); font-weight: 700; }

.psx-section > .psx-btn {
  display: flex;
  width: fit-content;
  margin: clamp(26px, 4vw, 40px) auto 0;
}

/* ============================================================== CARDS */
.psx-cards {
  display: grid;
  gap: 18px;
}
.psx-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.psx-card {
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--psx-line);
  border-radius: 14px;
  background: #fff;
}
.psx-card h3 {
  margin: 0 0 10px;
  font-size: 1.02rem;
  line-height: 1.35;
}
.psx-card p { margin: 0; color: var(--psx-graphit); font-size: 0.94rem; line-height: 1.55; }

.psx-bridge,
.psx-highlight {
  margin: clamp(24px, 4vw, 36px) auto 0;
  max-width: 44ch;
  color: var(--psx-oak-dark);
  font-family: var(--psx-display);
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

/* ============================================================== STEPS */
.psx-steps {
  display: grid;
  gap: 18px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.psx-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.psx-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.psx-steps li {
  padding: 20px;
  border: 1px solid var(--psx-line);
  border-radius: 14px;
  background: #fff;
}
.psx-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--psx-oak);
  color: #fff;
  font-family: var(--psx-display);
  font-weight: 700;
}
.psx-steps li b { display: block; margin-bottom: 5px; font-size: 1rem; }
.psx-steps li p { margin: 0; color: var(--psx-graphit); font-size: 0.9rem; line-height: 1.5; }

/* =============================================================== LIST */
.psx-list { margin: 0; padding-left: 1.3em; line-height: 1.6; }
.psx-list li { margin: 0.3em 0; }
.psx-list--check { list-style: none; padding-left: 0; }
.psx-list--check li {
  position: relative;
  padding-left: 28px;
}
.psx-list--check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--psx-oak);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.psx-list--2col { columns: 2; column-gap: 40px; }
.psx-list--2col li { break-inside: avoid; }

/* ============================================================== ABOUT */
.psx-about {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
}
.psx-about img {
  width: 160px;
  height: 160px;
  border-radius: 20px;
  object-fit: cover;
  object-position: center 30%;
  border: 1px solid var(--psx-line);
}
.psx-about h2 {
  margin: 0 0 12px;
  font-family: var(--psx-display);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
}
.psx-about p { margin: 0 0 14px; color: var(--psx-graphit); line-height: 1.6; }
.psx-about .psx-btn { margin-top: 8px; }

/* =============================================================== PROOF */
.psx-projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: clamp(22px, 4vw, 34px);
}
.psx-project {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--psx-line);
  border-radius: 14px;
  background: #fff;
}
.psx-project img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.psx-project figcaption {
  display: grid;
  gap: 6px;
  padding: 16px 18px 18px;
}
.psx-project strong { line-height: 1.35; }
.psx-project span {
  color: var(--psx-graphit);
  font-size: 0.9rem;
  line-height: 1.5;
}
.psx-project span b { color: var(--psx-ink); }
.psx-projects-note {
  max-width: 68ch;
  margin: 0 auto clamp(24px, 4vw, 36px);
  color: var(--psx-graphit);
  line-height: 1.6;
  text-align: center;
}
.psx-rating { display: flex; justify-content: center; margin-bottom: 18px; }
.psx-rating :is(img, iframe) { max-width: 100%; }

/* ================================================================ FAQ */
.psx-faq { display: grid; gap: 12px; }
.psx-faq details {
  border: 1px solid var(--psx-line);
  border-radius: 12px;
  background: #fff;
  padding: 4px 18px;
}
.psx-faq summary {
  padding: 14px 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.psx-faq summary::-webkit-details-marker { display: none; }
.psx-faq summary::after { content: "+"; float: right; color: var(--psx-oak-dark); font-weight: 700; }
.psx-faq details[open] summary::after { content: "–"; }
.psx-faq details p { margin: 0 0 14px; color: var(--psx-graphit); line-height: 1.6; }

/* ====================================================== FUNNEL (.ps-*) */
.psx-funnel-shell {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
}
.ps-form { position: relative; }
.ps-step { display: none; }
.ps-step.is-active { display: block; }
.ps-step[hidden] { display: none !important; }

.ps-card {
  width: 100%;
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid var(--psx-line);
  border-radius: 18px;
  background: var(--ps-surface);
  box-shadow: 0 16px 44px -22px rgba(31, 41, 55, 0.35);
}

.ps-kicker {
  margin: 0 0 12px;
  color: var(--ps-accent-dark);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-align: center;
  text-transform: uppercase;
}

.ps-card h2 {
  max-width: 26ch;
  margin: 0 auto 20px;
  color: var(--ps-text);
  font-family: var(--psx-display);
  font-size: clamp(1.4rem, 3.4vw, 1.95rem);
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
}
.ps-card h2:focus { outline: none; }

.ps-intro {
  max-width: 56ch;
  margin: -2px auto 22px;
  color: var(--ps-muted);
  font-size: clamp(0.98rem, 2vw, 1.08rem);
  line-height: 1.55;
  text-align: center;
}
.ps-prep { max-width: 46ch; margin: 0 auto 22px; padding: 0 0 0 1.2em; color: var(--ps-muted); font-size: 0.94rem; line-height: 1.6; text-align: left; }
.ps-prep li { margin: 0.25em 0; }

.ps-booking-wrap { margin: 24px 0; padding-top: 20px; border-top: 1px solid var(--ps-line); }
.ps-booking-lead { max-width: 46ch; margin: 0 auto 12px; color: var(--ps-text); font-size: 0.94rem; font-weight: 700; text-align: center; }
.ps-booking-frame { min-height: 600px; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--ps-line); position: relative; }
.ps-booking-frame iframe { display: block; width: 100%; height: 600px; min-height: 600px; border: 0; }
.ps-booking-note { max-width: 46ch; margin: 10px auto 0; color: var(--ps-muted); font-size: 0.82rem; text-align: center; }
.ps-booking-note a { color: var(--ps-accent-dark); font-weight: 700; }

.ps-choice-group { margin: 0; padding: 0; border: 0; }
.ps-choice-group legend {
  width: 100%;
  margin: 0 0 14px;
  color: var(--ps-text);
  font-size: 1rem;
  font-weight: 750;
  text-align: center;
}
.ps-choices { display: grid; gap: 12px; }
.ps-choices--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-choice--wide { grid-column: 1 / -1; }
.ps-choice { position: relative; display: block; margin: 0; cursor: pointer; }
.ps-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ps-choice span {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  padding: 13px 17px;
  border: 2px solid var(--ps-line);
  border-radius: 12px;
  background: #fff;
  color: var(--ps-text);
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.ps-choice:hover span { border-color: var(--ps-accent); }
.ps-choice input:checked + span {
  border-color: var(--ps-accent-dark);
  background: rgba(140, 106, 79, 0.13);
  box-shadow: inset 0 0 0 1px var(--ps-accent-dark);
}
.ps-choice input:focus-visible + span { outline: 3px solid #1d4ed8; outline-offset: 3px; }

.ps-field { display: grid; gap: 7px; margin: 0 0 14px; }
.ps-field > span { color: var(--ps-text); font-size: 0.94rem; font-weight: 750; }
.ps-field input {
  width: 100%;
  min-height: 54px;
  padding: 12px 15px;
  border: 2px solid var(--ps-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ps-text);
  font: inherit;
  font-size: 1rem;
}
.ps-field input:focus {
  border-color: var(--ps-accent-dark);
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(140, 106, 79, 0.18);
}
.ps-fields-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ps-field-note {
  margin: -5px 0 14px;
  color: var(--ps-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}
.ps-reachability { margin-top: 4px; }

.ps-privacy {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 18px 0 0;
  color: var(--ps-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.ps-privacy input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--ps-accent-dark); }
.ps-privacy a { color: var(--ps-accent-dark); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }

.ps-nav { display: grid; grid-template-columns: 1fr 1.45fr; gap: 12px; margin-top: 24px; }
.ps-nav--single { grid-template-columns: minmax(150px, 0.45fr); justify-content: start; }
.ps-button {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border: 2px solid var(--ps-accent-dark);
  border-radius: 10px;
  background: var(--ps-accent-dark);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.ps-button:hover { background: #654631; transform: translateY(-1px); }
.ps-button:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
.ps-button:disabled { cursor: wait; opacity: 0.7; transform: none; }
.ps-button--secondary { border-color: var(--ps-line); background: #fff; color: var(--ps-text); }
.ps-button--secondary:hover { border-color: var(--ps-accent); background: #f6f0eb; }
.ps-home { width: min(360px, 100%); margin: 24px auto 0; }
.ps-message { min-height: 1.4em; margin-top: 12px; color: var(--ps-danger); font-weight: 700; text-align: center; }
.ps-message.is-success { color: #2e6b3c; }
.ps-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.ps-progress[hidden] { display: none !important; }
.ps-progress {
  display: grid;
  gap: 7px;
  justify-items: center;
  margin: 18px auto 0;
  color: var(--psx-graphit);
  font-size: 0.78rem;
  font-weight: 750;
}
.ps-progress-track { display: block; width: min(380px, 82vw); height: 4px; overflow: hidden; border-radius: 999px; background: rgba(31, 41, 55, 0.14); }
.ps-progress-track i { display: block; width: 20%; height: 100%; border-radius: inherit; background: var(--psx-oak); transition: width 0.24s ease; }

.ps-noscript { margin: 0 0 18px; padding: 14px 18px; border-radius: 12px; background: #fff4cf; color: #2d261e; text-align: center; }
.ps-noscript a { color: var(--ps-accent-dark); font-weight: 700; }

/* =========================================================== RESPONSIVE */
@media (max-width: 900px) {
  .psx-hero-inner { grid-template-columns: 1fr; }
  .psx-hero-media { order: -1; }
  .psx-cards--3,
  .psx-projects,
  .psx-steps--3,
  .psx-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psx-about { grid-template-columns: 1fr; }
  .psx-about img { width: 120px; height: 120px; }
}

@media (max-width: 640px) {
  .psx-header-claim { display: none; }
  .psx-cards--3,
  .psx-projects,
  .psx-steps--3,
  .psx-steps--4 { grid-template-columns: 1fr; }
  .psx-list--2col { columns: 1; }
  .ps-choices--two,
  .ps-fields-two { grid-template-columns: 1fr; }
  .ps-choice--wide { grid-column: auto; }
  .ps-nav { grid-template-columns: 0.8fr 1.35fr; }
  .ps-nav--single { grid-template-columns: minmax(135px, 0.6fr); }
}

@media (max-width: 430px) {
  .ps-nav { grid-template-columns: 1fr; }
  .ps-nav .ps-button--secondary { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .psx-btn,
  .ps-choice span,
  .ps-button,
  .ps-progress-track i { transition: none; }
}