/* ==========================================================================
   Werks Makler GmbH – Beratungsseiten (Privathaftpflicht, Hausrat, Rechtsschutz …)
   Pfad: /wm-shared/wm-landing.css · ergänzt wm-base.css
   ========================================================================== */

.wm-landing{background:#fff}
.wm-sec{padding:88px 0}
.wm-sec--tint{background:var(--c-surf)}
.wm-sec--deep{background:var(--c-deep);color:#fff}
.wm-narrow{max-width:760px;margin-inline:auto}

.wm-eyebrow{display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#397a84;margin-bottom:14px}
.wm-h2{font-family:var(--font-h);font-weight:800;letter-spacing:-.035em;line-height:1.1;font-size:clamp(1.75rem,3.4vw,2.6rem);color:var(--c-deep);margin:0 0 14px}
.wm-lead{font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.65;color:var(--c-ink-s);margin:0;max-width:680px}

/* ---------- Einstieg ---------- */
.wm-hero{padding:72px 0 40px;text-align:center}
.wm-hero h1{font-family:var(--font-h);font-weight:800;letter-spacing:-.045em;line-height:1.04;font-size:clamp(2.3rem,5.6vw,4.1rem);color:var(--c-deep);margin:0 auto 18px;max-width:900px}
.wm-hero h1 span{color:var(--c-pri-dk)}
.wm-hero .wm-lead{margin-inline:auto;text-align:center}
.wm-hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.wm-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;list-style:none;padding:0;margin:30px 0 0;font-size:.86rem;color:var(--c-ink-f)}
.wm-trust li{display:flex;align-items:center;gap:8px}
.wm-trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-pri)}

/* ---------- Buttons ---------- */
.wm-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:50px;padding:0 1.5rem;border-radius:999px;font-family:var(--font-h);font-weight:700;font-size:.98rem;text-decoration:none;cursor:pointer;border:0;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.wm-btn--pri{background:var(--c-deep);color:#fff;box-shadow:0 10px 26px rgba(23,61,67,.16)}
.wm-btn--pri:hover{background:#1f525a;transform:translateY(-1px)}
.wm-btn--ghost{background:transparent;color:var(--c-deep);box-shadow:inset 0 0 0 1.5px #c9dadd}
.wm-btn--ghost:hover{background:var(--c-pri-lt)}
.wm-btn--light{background:#fff;color:var(--c-deep)}
.wm-btn--light:hover{background:var(--c-pri-lt)}
.wm-btn--text{background:none;color:var(--c-ink-s);padding:0 .6rem;min-height:44px;font-weight:600}
.wm-btn--text:hover{color:var(--c-deep)}

/* ---------- Ablauf in drei Schritten ---------- */
.wm-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;counter-reset:flow}
.wm-flow__item{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:28px 26px}
.wm-flow__item::before{counter-increment:flow;content:counter(flow);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--c-pri-lt);color:var(--c-deep);font-family:var(--font-h);font-weight:800;margin-bottom:16px}
.wm-flow__item h3{font-family:var(--font-h);font-size:1.08rem;margin:0 0 8px;color:var(--c-ink)}
.wm-flow__item p{margin:0;font-size:.94rem;color:var(--c-ink-s)}

/* ---------- Aufklapper ---------- */
.wm-acc{margin-top:36px;border-top:1px solid var(--c-border)}
.wm-acc details{border-bottom:1px solid var(--c-border)}
.wm-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;font-family:var(--font-h);font-weight:700;font-size:1.06rem;color:var(--c-ink)}
.wm-acc summary::-webkit-details-marker{display:none}
.wm-acc summary::after{content:"";flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--c-pri-lt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23173d43' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .25s ease}
.wm-acc details[open] summary::after{transform:rotate(45deg)}
.wm-acc .wm-acc__body{padding:0 4px 24px;color:var(--c-ink-s);font-size:.97rem;max-width:720px}
.wm-acc .wm-acc__body p{margin:0 0 10px}
.wm-acc .wm-acc__body ul{margin:6px 0 10px;padding-left:1.2rem}
.wm-acc .wm-acc__body li{margin:4px 0}

/* ---------- Infokarten (Beamte) ---------- */
.wm-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:36px}
.wm-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:26px}
.wm-card h3{font-family:var(--font-h);font-size:1.04rem;margin:0 0 8px;color:var(--c-ink)}
.wm-card p,.wm-card li{font-size:.94rem;color:var(--c-ink-s)}
.wm-card p{margin:0}
.wm-card ul{margin:8px 0 0;padding-left:1.15rem}

/* ---------- Persönliche Beratung ---------- */

/* ---------- Abschluss ---------- */
.wm-final{text-align:center}
.wm-final .wm-h2{color:#fff}
.wm-final p{color:rgba(255,255,255,.78);margin:0 auto 26px;max-width:560px}

/* ---------- Mobil ---------- */
@media (max-width:860px){
  .wm-sec{padding:64px 0}
  .wm-flow,.wm-cards{grid-template-columns:1fr}
}
@media (max-width:600px){
  .wm-hero{padding:28px 0 18px;text-align:left}
  .wm-hero h1{font-size:2.05rem;margin-bottom:12px}
  .wm-hero .wm-lead{text-align:left;font-size:.98rem}
  .wm-hero__cta{justify-content:flex-start;margin-top:20px}
  .wm-hero__cta .wm-btn--ghost{display:none} /* Formular folgt direkt */
  .wm-trust{display:none} /* Formular soll mobil früh beginnen; Inhalte stehen weiter unten */
  .wm-sec{padding:52px 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}