/* ============================================================
   HERZWERK · WEBSITE & LANDINGPAGE (/webseite/) + Startseiten-Teaser
   Ergänzt lebendig.css (wird danach geladen) und nutzt nur deren
   Tokens. Präfix ws- für alle neuen Bausteine.
   ============================================================ */

/* ── Hero (weiß) ── */
.ws-hero { background:var(--white); position:relative; overflow:hidden; }
.ws-hero__glow { top:-260px; right:-200px; width:640px; height:640px; background:radial-gradient(circle,rgba(239,131,84,.16),transparent 65%); }
.ws-hero__grid { padding-top:96px; padding-bottom:112px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:72px; align-items:center; position:relative; }
.ws-hero__copy { display:flex; flex-direction:column; gap:28px; }
.ws-hero h1 { font-size:clamp(40px,5.2vw,72px); line-height:.98; letter-spacing:-0.04em; text-wrap:balance; }
.ws-hero__lead { font-size:clamp(17px,1.4vw,20px); line-height:1.6; color:var(--slate); max-width:560px; text-wrap:pretty; }
.ws-hero__ctas { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.ws-hero__ctas .btn--outline { font-size:17px; padding:17px 28px; }
.ws-hero__note { display:flex; align-items:flex-end; gap:6px; margin-top:-14px; padding-left:24px; }
.ws-hero__note svg { width:64px; height:48px; flex-shrink:0; filter:url(#hwChalk); overflow:visible; }
.ws-hero__note svg path { stroke-dasharray:120; stroke-dashoffset:120; animation:hwDraw .9s cubic-bezier(.45,0,.2,1) 1.2s forwards; }
.ws-hero__note p { font-family:var(--f-hand); font-weight:700; font-size:clamp(26px,2.4vw,32px); line-height:1; color:var(--slate); transform:rotate(-3deg); padding-bottom:6px; }
.ws-hero__micro { font-size:15px; color:var(--slate); font-weight:500; max-width:520px; }
.ws-hero__visual { position:relative; justify-self:center; width:min(100%,400px); }
.ws-hero__visual-bg { position:absolute; inset:-14px; border-radius:32px; background:var(--coral); transform:rotate(4deg); opacity:.9; }
.ws-hero__photo { position:relative; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:28px; display:block; height:auto; }
.ws-hero__chip { position:absolute; left:-28px; bottom:44px; background:var(--navy); color:var(--white); border-radius:16px; padding:14px 18px; box-shadow:0 20px 50px rgba(45,49,66,.25); }
.ws-hero__chip b { display:block; font-family:var(--f-head); font-weight:800; font-size:24px; line-height:1; letter-spacing:-0.03em; color:var(--coral); }
.ws-hero__chip span { display:block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-top:4px; color:var(--silver); }
@media (max-width:560px) {
  .ws-hero__grid { padding-top:56px; padding-bottom:88px; gap:56px; }
  .ws-hero__ctas .btn { width:100%; }
  .ws-hero__note { padding-left:12px; }
  .ws-hero__chip { left:-8px; }
}

/* ── Drei Türen (hellgrau) ── */
.ws-doors { align-items:stretch; }
.ws-door { background:var(--white); border:1px solid var(--line); border-radius:24px; padding:40px 32px 32px; display:flex; flex-direction:column; gap:16px; position:relative; }
.ws-door__quote { font-family:var(--f-head); font-weight:800; font-size:clamp(24px,2.2vw,30px); line-height:1.1; letter-spacing:-0.03em; color:var(--navy); text-wrap:balance; min-height:2.2em; }
.ws-door__quote::before { content:"„"; display:block; font-size:56px; line-height:.6; color:var(--coral); margin-bottom:12px; }
.ws-door__label { font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); padding-top:16px; border-top:1px solid var(--line); }
.ws-door__price { font-family:var(--f-head); font-weight:800; font-size:32px; line-height:1; letter-spacing:-0.03em; color:var(--coral-ink); }
.ws-door__text { font-size:16px; line-height:1.55; color:var(--slate); flex:1; text-wrap:pretty; }
.ws-door .btn { margin-top:8px; }
.ws-door__link { font-size:14px; font-weight:600; color:var(--slate); align-self:center; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); }
.ws-door__link:hover { text-decoration-color:var(--coral); }

/* ── Website-Check (weiß) ── */
.ws-check-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:48px 56px; }
.ws-check-col h3 { font-size:clamp(24px,2.4vw,30px); letter-spacing:-0.025em; line-height:1.1; margin-bottom:20px; }
.ws-qlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; counter-reset:q; }
.ws-qlist li { counter-increment:q; display:flex; gap:16px; align-items:flex-start; background:var(--mist); border-radius:16px; padding:16px 20px; font-size:16px; line-height:1.5; font-weight:500; text-wrap:pretty; }
.ws-qlist li::before { content:counter(q, decimal-leading-zero); font-family:var(--f-head); font-weight:800; font-size:20px; line-height:1.2; color:var(--coral-ink); letter-spacing:-0.02em; flex-shrink:0; min-width:28px; }
.ws-get { margin-top:56px; background:var(--navy); color:var(--white); border-radius:20px; padding:40px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:24px 48px; align-items:center; position:relative; overflow:hidden; }
.ws-get__glow { inset:auto -160px -220px auto; width:480px; height:480px; background:radial-gradient(circle,rgba(239,131,84,.28),transparent 65%); }
.ws-get h3 { font-size:clamp(26px,2.6vw,34px); letter-spacing:-0.03em; line-height:1.05; margin-bottom:12px; position:relative; }
.ws-get p { font-size:17px; line-height:1.6; color:var(--silver); position:relative; text-wrap:pretty; }
.ws-get__side { display:flex; flex-direction:column; gap:20px; align-items:flex-start; position:relative; }
.ws-get .ws-get__price { font-family:var(--f-head); font-weight:800; font-size:clamp(44px,4.4vw,60px); line-height:1; letter-spacing:-0.04em; color:var(--coral); }
.ws-get .ws-get__price span { display:block; font-family:var(--f-body); font-size:15px; font-weight:500; letter-spacing:0; color:var(--silver); margin-top:8px; }
.ws-fine { margin-top:24px; font-size:15px; line-height:1.6; color:var(--slate); max-width:820px; }
@media (max-width:560px) { .ws-get { padding:32px 24px; } .ws-get .btn { width:100%; } }

/* ── Feinschliff (hellgrau) ── */
.ws-fs { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:64px; align-items:center; }
.ws-fs__copy { display:flex; flex-direction:column; gap:24px; }
.ws-fs__copy > p:not(.eyebrow):not(.ws-fs__price) { font-size:17px; line-height:1.65; color:var(--slate); text-wrap:pretty; }
.ws-fs__list-title { font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--navy); }
.ws-checks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ws-checks li { display:flex; gap:12px; font-size:16px; line-height:1.5; font-weight:500; }
.ws-checks li::before { content:"✓"; color:var(--coral-ink); font-weight:700; flex-shrink:0; }
.ws-fs__price { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; }
.ws-fs__price b { font-family:var(--f-head); font-weight:800; font-size:48px; line-height:1; letter-spacing:-0.04em; color:var(--coral-ink); }
.ws-fs__price span { font-size:15px; color:var(--slate); font-weight:500; }
.ws-fs__diff { font-size:14px; line-height:1.55; color:var(--slate); max-width:520px; }
.ws-fs__visual { position:relative; justify-self:center; width:min(100%,560px); }
.ws-fs__visual-bg { position:absolute; inset:-12px; border-radius:32px; background:var(--slate); transform:rotate(-3deg); }
.ws-fs__visual img { position:relative; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:24px; display:block; }
.ws-fs__tag { position:absolute; right:-12px; bottom:-20px; background:var(--white); color:var(--navy); border-radius:16px; padding:14px 18px; box-shadow:0 16px 40px rgba(45,49,66,.15); }
.ws-fs__tag b { display:block; font-family:var(--f-head); font-weight:800; font-size:28px; line-height:1; letter-spacing:-0.03em; color:var(--coral-ink); }
.ws-fs__tag span { display:block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-top:4px; color:var(--slate); }
@media (max-width:560px) { .ws-fs__copy .btn { width:100%; } .ws-fs__tag { right:-4px; } }

/* ── Neu bauen (Nacht) ── */
.ws-neu-glow { top:-260px; right:-180px; width:760px; height:760px; background:radial-gradient(circle,rgba(239,131,84,.22),transparent 62%); }
.ws-builds { align-items:stretch; }
.ws-build { background:var(--white); color:var(--navy); border-radius:24px; padding:36px 32px 32px; display:flex; flex-direction:column; gap:14px; position:relative; }
.ws-build--rec { box-shadow:0 0 0 3px var(--coral); }
.ws-build__chip { position:absolute; top:-13px; right:24px; background:var(--coral); color:var(--navy); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:999px; }
.ws-build h3 { font-size:28px; letter-spacing:-0.03em; line-height:1; }
.ws-build__price { font-family:var(--f-head); font-weight:800; font-size:32px; line-height:1; letter-spacing:-0.03em; color:var(--coral-ink); }
.ws-build__text { font-size:16px; line-height:1.55; color:var(--navy); text-wrap:pretty; }
.ws-build__incl { font-size:15px; line-height:1.55; color:var(--slate); border-top:1px solid var(--line); padding-top:14px; flex:1; text-wrap:pretty; }
.ws-build__incl strong { color:var(--navy); }
.ws-build .btn { margin-top:8px; }
.ws-alt { margin-top:40px; font-size:16px; line-height:1.65; color:var(--silver); max-width:820px; text-wrap:pretty; }
.ws-compare { margin-top:40px; width:100%; max-width:880px; border-collapse:collapse; font-size:15px; }
.ws-compare caption { caption-side:top; text-align:left; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--silver); padding-bottom:12px; }
.ws-compare th, .ws-compare td { text-align:left; padding:14px 16px; border-bottom:1px solid rgba(191,192,192,.2); vertical-align:top; }
.ws-compare thead th { font-family:var(--f-head); font-weight:800; font-size:17px; letter-spacing:-0.01em; color:var(--white); }
.ws-compare thead th.ws-compare__hand { color:var(--coral); }
.ws-compare tbody th { font-weight:700; color:var(--white); width:24%; }
.ws-compare td { color:var(--silver); }
.ws-compare td.ws-compare__hand { color:var(--white); font-weight:500; }
@media (max-width:640px) {
  .ws-compare, .ws-compare tbody { display:block; }
  .ws-compare caption { display:block; width:100%; }
  .ws-compare thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .ws-compare tr { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; padding:16px 0; border-bottom:1px solid rgba(191,192,192,.2); }
  .ws-compare tbody th { grid-column:1 / -1; width:auto; padding:0 0 4px; border:0; }
  .ws-compare td { padding:0; border:0; }
  .ws-compare td::before { content:attr(data-label); display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--silver); opacity:.8; margin-bottom:2px; }
  .ws-compare td.ws-compare__hand::before { color:var(--coral); opacity:1; }
}

/* ── Pflege (hellgrau) ── */
.ws-care-layout { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:48px 64px; align-items:center; }
.ws-care-layout .intro { margin-bottom:0; }
.ws-care { grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.ws-care-cta { margin-top:32px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.ws-care-cta p { font-size:15px; color:var(--slate); max-width:640px; }
.ws-care-cta p a { color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--coral); }

/* ── Startseite: Teaser-Sektion #webseite (weiß) ── */
.ws-teaser .entry { padding:36px 32px 32px; gap:12px; }
.ws-teaser .entry h3 { font-size:30px; }
.ws-teaser .entry h3 a { color:inherit; }
.ws-teaser .entry h3 a::after { content:""; position:absolute; inset:0; border-radius:24px; }
.ws-teaser .entry h3 a:focus-visible { outline:none; }
.ws-teaser .entry:focus-within { outline:3px solid var(--coral); outline-offset:3px; }
.ws-teaser .entry:hover h3 a { color:var(--navy); }
.ws-teaser__go { font-size:15px; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:10px; margin-top:4px; }
.ws-teaser__go span { width:36px; height:36px; border-radius:50%; background:var(--coral); color:var(--navy); display:grid; place-items:center; font-size:17px; transition:transform .25s var(--ease); }
.ws-teaser .entry:hover .ws-teaser__go span { transform:translateX(4px); }
.ws-teaser__cta { margin-top:48px; display:flex; justify-content:center; }
.ws-teaser__cta .btn { font-size:17px; padding:18px 32px; }

/* kleine Verweise an bestehenden Karten der Startseite */
.ws-inline { display:inline-block; margin-top:8px; font-size:14px; font-weight:700; color:var(--coral-ink); }
.ws-inline:hover { color:var(--navy); }
.ws-more { margin-top:auto; padding-top:6px; font-size:14px; font-weight:700; color:var(--coral-ink); align-self:flex-start; }
.ws-more:hover { color:var(--navy); }

@media (prefers-reduced-motion: reduce) {
  .ws-hero__note svg path { stroke-dashoffset:0; }
}

/* ── Korrekturen nach Prüfdurchgang 1 ── */
@media (min-width:980px) {
  .ws-hero__grid { grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); }
  .ws-doors { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ws-door { display:grid; grid-template-rows:subgrid; grid-row:span 6; gap:16px; align-content:start; }
}
@media (max-width:760px) { .ws-hero .palm { display:none; } }
@media (max-width:560px) {
  .ws-hero__ctas .btn--lg { font-size:16px; padding:17px 20px; }
}
@media (max-width:440px) {
  .ws-door .btn, .ws-build .btn { font-size:15px; padding:15px 18px; }
}
.ws-page .cta .cta__sign { font-size:36px; color:var(--coral); }
.ws-teaser .entry__text { flex:1; }
.ws-door__link { justify-self:center; }

/* Kreide-Unterstrich unter einem Headline-Wort (zeichnet sich beim Einblenden) */
.ws-mark { position:relative; display:inline-block; }
.ws-mark svg { position:absolute; left:-3%; width:106%; bottom:-.12em; height:.28em; pointer-events:none; overflow:visible; filter:url(#hwChalkU); }
.ws-mark path { stroke-dasharray:310; stroke-dashoffset:310; }
.is-in .ws-mark path, .no-reveal .ws-mark path { animation:hwDraw .9s cubic-bezier(.45,0,.2,1) .5s forwards; }
html:not(.js) .ws-mark path { stroke-dashoffset:0; }
@media (prefers-reduced-motion: reduce) { .ws-mark path { stroke-dashoffset:0; } }

/* ── SEO-Audit (Nacht) ── */
.ws-seo-glow { bottom:-280px; right:-200px; width:760px; height:760px; background:radial-gradient(circle,rgba(239,131,84,.22),transparent 62%); }
.ws-seo__kicker { font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--silver); margin-bottom:20px; }
.ws-seo-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; }
.ws-seo-item { background:rgba(255,255,255,.04); border:1px solid rgba(191,192,192,.2); border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:10px; transition:background .3s, transform .3s var(--ease); }
.ws-seo-item:hover { background:rgba(255,255,255,.08); transform:translateY(-4px); }
.ws-seo-item__n { font-family:var(--f-head); font-weight:800; font-size:32px; line-height:1; letter-spacing:-0.03em; color:var(--coral); }
.ws-seo-item h3 { font-size:22px; letter-spacing:-0.02em; line-height:1.15; color:var(--white); }
.ws-seo-item p { font-size:15px; line-height:1.55; color:var(--silver); text-wrap:pretty; }
.ws-seo-deal { margin-top:48px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:20px; align-items:stretch; }
.ws-seo-get { background:var(--white); color:var(--navy); border-radius:24px; padding:40px 36px 36px; display:flex; flex-direction:column; gap:20px; }
.ws-seo-get h3, .ws-seo-ways h3 { font-size:clamp(24px,2.4vw,30px); letter-spacing:-0.03em; line-height:1.05; }
.ws-seo-get .ws-checks li { color:var(--navy); }
.ws-seo-get__foot { margin-top:auto; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.ws-seo-get .ws-seo-get__price { font-family:var(--f-head); font-weight:800; font-size:48px; line-height:1; letter-spacing:-0.04em; color:var(--coral-ink); display:flex; align-items:baseline; gap:10px; }
.ws-seo-get .ws-seo-get__price span { font-family:var(--f-body); font-size:15px; font-weight:600; letter-spacing:0; color:var(--slate); }
.ws-seo-ways { border:1px solid rgba(191,192,192,.2); border-radius:24px; padding:40px 36px 36px; display:flex; flex-direction:column; gap:16px; }
.ws-seo-ways h3 { color:var(--white); margin-bottom:4px; }
.ws-seo-way { background:rgba(255,255,255,.06); border-radius:16px; padding:20px 22px; display:flex; flex-direction:column; gap:6px; }
.ws-seo-way__title { font-family:var(--f-head); font-weight:800; font-size:20px; letter-spacing:-0.02em; color:var(--white); }
.ws-seo-way p:not(.ws-seo-way__title) { font-size:15px; line-height:1.55; color:var(--silver); }
.ws-seo-ways__note { margin-top:auto; font-size:15px; line-height:1.55; color:var(--silver); }
@media (max-width:560px) {
  .ws-seo-get, .ws-seo-ways { padding:32px 24px 28px; }
  .ws-seo-get__foot .btn { width:100%; }
}

/* Website-Check: Hinweis auf das SEO-Audit */
.ws-check-hint { margin-top:16px; font-size:15px; line-height:1.55; color:var(--slate); }
.ws-check-hint a { color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--coral); }

/* Vier Türen: 2 × 2 auf breiten Bildschirmen */
@media (min-width:980px) {
  .ws-doors { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Unterseite hat sieben Nav-Punkte: zwischen Tablet und Desktop enger setzen */
@media (min-width:921px) and (max-width:1160px) {
  .ws-page .nav__links { gap:16px; font-size:14px; }
  .ws-page .nav__in { gap:16px; }
  .ws-page .nav__logo img { height:52px; }
}

/* Empfohlene Tür: Sichtbarkeits-Audit (einzige Koralle-Karte der Sektion) */
.ws-door--featured { background:var(--coral); border-color:var(--coral); color:var(--navy); }
.ws-door--featured .ws-door__quote, .ws-door--featured .ws-door__price, .ws-door--featured .ws-door__text, .ws-door--featured .ws-door__label { color:var(--navy); }
.ws-door--featured .ws-door__quote::before { color:var(--navy); }
.ws-door--featured .ws-door__label { border-top-color:rgba(45,49,66,.25); }
.ws-door--featured .ws-door__link { color:var(--navy); text-decoration-color:rgba(45,49,66,.5); }
.ws-door--featured .btn--navy:hover { background:var(--white); color:var(--navy); }
.ws-door__badge { position:absolute; top:20px; right:20px; background:var(--navy); color:var(--white); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:999px; }

/* Hinweis zu den Texten (Rohversion vom Kunden) */
.ws-texts { margin-top:32px; font-size:17px; line-height:1.6; color:var(--white); background:rgba(255,255,255,.06); border:1px solid rgba(191,192,192,.2); border-radius:16px; padding:18px 22px; max-width:820px; }
.ws-texts strong { color:var(--white); }

/* Startseite #webseite: vier Karten als 2 × 2, Audit-Karte in Koralle */
@media (min-width:980px) { .ws-teaser__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ws-teaser .entry--featured .ws-teaser__go span { background:var(--navy); color:var(--white); }
.ws-teaser .entry--featured:focus-within { outline-color:var(--navy); }