/* ==========================================================================
   /websites/ – Webdesign (page-specific layer on top of site.css v6)
   Sections: 1 Hero + responsive website mock (.wm)   2 Build strip (.build)
             3 Features bento (.web-features, .feature-care)
             4 Scope tiles (.scope-grid)   5 Pricing teaser (.web-pricing)
             6 Local map (.lm)             7 Responsive
   Only tokens from site.css; breakpoints from DESIGN-SYSTEM.md §3.
   ========================================================================== */

/* 1 · Hero ---------------------------------------------------------------- */
.web-hero-assurance { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

/* Website mock (large): a richer browser + phone mock than the service-card
   .mock-stage; page-specific. The phone has its own reserved column
   (--phone-w minus --overlap) and only overlaps the browser's side padding
   (24px) below the nav row, never content. */
.wm {
  --phone-w: 172px;
  --phone-h: 344px;
  --phone-top: 96px;
  --overlap: 12px;
  position: relative;
  min-height: calc(var(--phone-top) + var(--phone-h) + 40px);
  padding-right: calc(var(--phone-w) - var(--overlap));
}
.wm-browser {
  position: relative; overflow: hidden; min-width: 0;
  border-radius: 14px;
  font-size: 12px; line-height: 1.4; text-align: left;
  background: var(--surface);
  box-shadow: var(--shadow-window);
}
.wm-bar { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.wm-url {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  height: 22px; padding: 0 10px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.wm-url .i { width: 12px; height: 12px; }
.wm-site { display: flex; flex-direction: column; gap: 14px; padding: 14px 24px 20px 20px; }
.wm-nav { display: flex; align-items: center; gap: 10px; }
.wm-logo { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 12.5px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.wm-logo i { width: 14px; height: 14px; border-radius: 4px; background: var(--grad-brand); }
.wm-links { display: flex; gap: 14px; margin-right: 4px; font-size: 11.5px; color: var(--fg-2); white-space: nowrap; }
.wm-btn { flex: none; padding: 4px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 600; line-height: 1.4; color: #fff; white-space: nowrap; background: var(--grad-brand-strong); }
.wm-btn-lg { padding: 6px 12px; font-size: 12px; }
.wm-btn-ghost { color: var(--fg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.wm-btn-block { align-self: stretch; text-align: center; }
.wm-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; align-items: center; padding-top: 4px; }
.wm-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.wm-kicker { font-family: var(--font-mono); font-size: 11px; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.wm-h { font-size: 21px; font-weight: 650; line-height: 1.12; letter-spacing: -.025em; color: var(--fg); text-wrap: balance; }
.wm-line { display: block; width: 100%; height: 5px; border-radius: 3px; background: var(--surface-3); }
.wm-line.is-short { width: 68%; }
.wm-ctas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wm-img { height: 136px; border-radius: 10px; }
.wm-trust { display: flex; gap: 14px; padding: 8px 12px; border-radius: 9px; font-size: 11.5px; color: var(--fg-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.wm-trust span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.wm-trust .i { width: 12px; height: 12px; color: var(--ok); stroke-width: 2.2; }
.wm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wm-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; border-radius: 9px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.wm-card b { font-size: 12px; font-weight: 600; }
.wm-card .wm-line { height: 4px; }
.wm-card-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.wm-card-ic .i { width: 13px; height: 13px; }

.wm-cap { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
.wm-cap .i { width: 14px; height: 14px; }
.wm-cap-desk { margin-top: 14px; }
.wm-phone-wrap { position: absolute; right: 0; top: var(--phone-top); width: var(--phone-w); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wm-phone {
  position: relative;
  width: 100%; height: var(--phone-h); overflow: hidden;
  border-radius: 26px; text-align: left; font-size: 12px; line-height: 1.4;
  background: var(--surface);
  box-shadow: 0 0 0 5px var(--fg), 0 0 0 6px rgba(255, 255, 255, .16), 0 34px 60px -18px rgba(0, 0, 0, .85), 0 0 60px -20px rgba(30, 123, 255, .6);
}
/* Content runs past the screen edge like a scrollable page: fade it out */
.wm-phone::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--surface) 78%); }
.wm-phone::before { content: ""; position: absolute; z-index: 1; left: 50%; bottom: 7px; width: 42px; height: 4px; border-radius: 2px; transform: translateX(-50%); background: var(--fg); opacity: .8; }
.wm-notch { display: block; width: 56px; height: 14px; margin: 0 auto; border-radius: 0 0 9px 9px; background: var(--fg); }
.wm-site-m { gap: 8px; padding: 10px 13px 14px; }
.wm-site-m .wm-logo { font-size: 11.5px; }
.wm-site-m .wm-h { font-size: 15px; }
.wm-site-m .wm-img { height: 78px; margin-top: 2px; }
.wm-site-m .wm-card { margin-top: 2px; }
.wm-burger { width: 14px; height: 10px; border-block: 2px solid var(--fg-2); }

/* 2 · Build strip: the same page from brief to code --------------------- */
.web-aside-p { color: var(--fg-2); }
.build { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.build-step { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
/* Connector between two cards (sits in the 16px gap, at the art's centre) */
.build-step + .build-step::before { content: ""; position: absolute; z-index: 1; left: -16px; top: 83px; width: 16px; height: 2px; background: var(--grad-brand); }
.build-art, .scope-art {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 60% at 50% 110%, rgba(47, 91, 255, .1), transparent 70%),
    radial-gradient(rgba(20, 25, 80, .12) 1px, transparent 1.3px) 0 0 / 16px 16px,
    var(--surface-2);
}
.build-art { --thumb-w: 170px; height: 168px; border-radius: var(--r-lg) var(--r-lg) 0 0; font-size: 12px; line-height: 1.35; }
.build-body { padding: 20px 22px 24px; }
.build-num { display: block; margin-bottom: .55rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; color: var(--accent-text); }
.build-body h3 { margin-bottom: .35rem; }
.build-body p { font-size: var(--fs-md); color: var(--fg-2); }

/* 01 brief: three questions */
.build-art-brief { flex-direction: column; gap: 7px; }
.bb-q { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 8px; border-radius: 999px; font-weight: 550; white-space: nowrap; color: var(--fg); background: var(--surface); box-shadow: var(--shadow-card); }
.bb-q .i { width: 14px; height: 14px; color: var(--accent-text); }
.bb-q.is-goal { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.bb-s { display: none; }
/* 02 wireframe */
.bw-page { display: flex; flex-direction: column; gap: 7px; width: var(--thumb-w); padding: 10px; border: 1px dashed var(--control-border); border-radius: 8px; background: var(--surface); }
.bw-nav { display: flex; justify-content: space-between; }
.bw-nav i { width: 30%; height: 6px; border-radius: 3px; background: var(--surface-3); }
.bw-nav i + i { width: 20%; }
.bw-h { display: block; width: 88%; height: 9px; border-radius: 3px; background: var(--line-2); }
.bw-h.is-short { width: 60%; }
.bw-cta { align-self: flex-start; padding: 1px 8px; border: 1px dashed var(--fg-3); border-radius: 5px; font-size: 11px; color: var(--fg-3); }
.bw-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.bw-row i { height: 24px; border: 1px dashed var(--line-2); border-radius: 5px; }
/* 03 design */
.bd-page { display: flex; flex-direction: column; gap: 8px; width: var(--thumb-w); padding: 10px; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-lift); }
.bd-nav { display: flex; align-items: center; gap: 6px; }
.bd-nav i { width: 11px; height: 11px; border-radius: 3px; background: var(--grad-brand); }
.bd-nav span { width: 22px; height: 5px; margin-left: auto; border-radius: 3px; background: var(--surface-3); }
.bd-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 6px; align-items: center; }
.bd-h { font-size: 12.5px; font-weight: 650; line-height: 1.15; letter-spacing: -.02em; }
.bd-img { height: 40px; border-radius: 5px; }
.bd-cta { align-self: flex-start; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; color: #fff; background: var(--grad-brand-strong); }
.bd-swatches { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bd-swatches i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-2); }
.bd-swatches i:nth-child(1) { background: var(--brand-navy); }
.bd-swatches i:nth-child(2) { background: var(--brand-blue); }
.bd-swatches i:nth-child(3) { background: var(--brand-cyan); }
.bd-swatches b { font-size: 13px; font-weight: 650; }
/* 04 code (dark) */
.build-art-code { flex-direction: column; background: radial-gradient(ellipse 80% 70% at 80% 0%, var(--accent-soft), transparent 70%), var(--bg); border-bottom-color: var(--line); }
.bc-win { width: calc(var(--thumb-w) + 16px); overflow: hidden; border-radius: 8px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.bc-bar { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 9px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.bc-bar .win-dots i { width: 6px; height: 6px; }
.bc-lines { display: grid; gap: 6px; padding: 10px; }
.bc-lines i { display: block; height: 5px; border-radius: 3px; background: var(--line-2); }
.bc-lines i.is-in { margin-left: 12px; }
.bc-lines .w1 { width: 58%; }
.bc-lines .w2 { width: 72%; background: var(--accent-line); }
.bc-lines .w3 { width: 50%; background: var(--ok-line); }
.bc-lines .w4 { width: 66%; }
.bc-lines .w5 { width: 40%; background: var(--accent-line); }

/* 3 · Features bento ----------------------------------------------------- */
.feature-care { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px 32px; align-items: center; }
.sheet .feature-care {
  background:
    radial-gradient(ellipse 80% 90% at 100% 0%, color-mix(in srgb, var(--brand-blue) 40%, transparent), transparent 65%),
    radial-gradient(ellipse 60% 60% at 0% 100%, color-mix(in srgb, var(--brand-cyan) 12%, transparent), transparent 70%),
    var(--bg);
  box-shadow: 0 24px 50px -28px rgba(11, 14, 44, .7);
}
.care-copy .link-arrow { margin-top: .6rem; }
.care-list { list-style: none; display: grid; gap: 8px; }
.care-list li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 550; color: var(--fg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.care-list .i { width: 16px; height: 16px; color: var(--icon); }

/* 4 · Scope tiles -------------------------------------------------------- */
.scope-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.scope { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.scope-art { height: 196px; font-size: 12px; line-height: 1.35; }
.scope-body { padding: 22px 24px 26px; }
.scope-body h3 { margin-top: .85rem; }
.scope-body > p:not(.tag) { margin-top: .45rem; font-size: var(--fs-md); color: var(--fg-2); }
/* Neue Website: page tree */
.sa-tree { display: flex; flex-direction: column; align-items: center; }
.sa-node { position: relative; display: inline-flex; justify-content: center; width: 84px; padding: 5px 0; border-radius: 8px; font-weight: 550; white-space: nowrap; background: var(--surface); box-shadow: var(--shadow-card); }
.sa-node.is-root { color: #fff; background: var(--grad-brand-strong); box-shadow: 0 8px 18px -8px rgba(30, 123, 255, .7); }
.sa-node.is-root::after { content: ""; position: absolute; left: 50%; top: 100%; height: 14px; border-left: 1.5px solid var(--accent-line); }
.sa-branch { position: relative; display: flex; gap: 10px; margin-top: 28px; }
.sa-branch::before { content: ""; position: absolute; left: 42px; right: 42px; top: -14px; border-top: 1.5px solid var(--accent-line); }
.sa-branch .sa-node::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 14px; border-left: 1.5px solid var(--accent-line); }
/* Relaunch: cluttered page → clear page */
.sa-relaunch { display: flex; align-items: center; gap: 14px; }
.sa-page { display: flex; flex-direction: column; gap: 6px; width: 96px; height: 122px; padding: 10px; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-card); }
.sa-page i { display: block; height: 4px; border-radius: 2px; background: var(--line-2); }
.sa-page.is-old { gap: 5px; background: var(--surface-2); transform: rotate(-3deg); }
.sa-page.is-old i:nth-child(odd) { width: 92%; }
.sa-page.is-old i:nth-child(even) { width: 58%; }
.sa-page.is-old i:nth-child(3) { height: 18px; border-radius: 3px; background: var(--surface-3); }
.sa-page.is-new { box-shadow: var(--shadow-lift); }
.sa-page.is-new b { height: 30px; border-radius: 5px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.sa-page.is-new i.is-short { width: 64%; }
.sa-btn { width: 40px; height: 12px; margin-top: auto; border-radius: 4px; background: var(--grad-brand-strong); }
.sa-arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--accent-text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.sa-arrow .i { width: 14px; height: 14px; }
/* Landingpage: one page, one goal */
.sa-landing { display: flex; flex-direction: column; gap: 6px; width: 140px; padding: 8px; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-lift); }
.sa-sec { display: flex; flex-direction: column; gap: 4px; padding: 7px; border-radius: 5px; background: var(--surface-2); }
.sa-sec i { display: block; height: 4px; border-radius: 2px; background: var(--line-2); }
.sa-sec i.is-short { width: 60%; }
.sa-sec.is-hero b { width: 80%; height: 7px; border-radius: 2px; background: var(--fg); }
.sa-goal { padding: 4px 6px; border-radius: 5px; font-size: 11.5px; font-weight: 600; text-align: center; white-space: nowrap; color: #fff; background: var(--grad-brand-strong); }
/* The pull quote sits under the lead in the split head (no orphaned beat below the cards) */
.scope-aside .scope-quote { margin-top: .9rem; }

/* 5 · Pricing teaser ----------------------------------------------------- */
.web-pricing { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.web-pricing-head .lead { margin: 1.1rem 0 .75rem; }
.price-grid.price-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 6 · Local: modes + schematic map --------------------------------------- */
.local-copy .lead { margin-top: 1.1rem; }
.local-modes { list-style: none; display: grid; gap: 10px; margin-top: 1.75rem; }
.local-modes li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.local-modes p { margin-top: .2rem; font-size: var(--fs-md); color: var(--fg-2); }

/* Region map: schematic HTML/CSS map with pins and service-radius rings
   (percent positions, px labels ≥12px, no map tiles). */
.lm {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg);
  background:
    radial-gradient(rgba(20, 25, 80, .12) 1px, transparent 1.3px) 0 0 / 16px 16px,
    var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* Canvas holds rings, lines and pins; the legend overlays it on wide cards and
   gets its own band below it on phones. Ring centre = Gifhorn pin = SVG origin. */
.lm-canvas { position: relative; aspect-ratio: 5 / 4; }
.lm-ring { position: absolute; left: 47%; top: 45%; z-index: -1; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.lm-ring.r1 { width: 60%; background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-line); }
.lm-ring.r2 { width: 110%; border: 1.5px dashed var(--accent-line); }
.lm-ring.r3 { width: 160%; border: 1px dashed var(--line-2); }
.lm-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.lm-lines path { fill: none; stroke: var(--accent-text); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; opacity: .7; }
.lm-pin { position: absolute; display: flex; align-items: center; gap: 8px; transform: translate(-6px, -50%); }
.lm-pin i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-text); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 0 5px var(--accent-line); }
.lm-pin b { padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--surface); box-shadow: var(--shadow-card); }
.lm-pin.is-home { left: 47%; top: 45%; flex-direction: row-reverse; transform: translate(calc(-100% + 9px), -50%); }
.lm-pin.is-home i { width: 18px; height: 18px; background: var(--grad-brand-strong); box-shadow: 0 0 0 5px var(--surface), 0 0 0 6px var(--accent-line), 0 8px 20px -6px rgba(30, 123, 255, .7); }
.lm-pin.is-home b { color: #fff; background: var(--fg); box-shadow: none; }
.lm-pin.is-wob { left: 68%; top: 56%; }
.lm-pin.is-bs { left: 44%; top: 79%; }
.lm-legend { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.lm-key { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 550; color: var(--fg-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.lm-key::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.lm-key.is-local::before { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-text); }
.lm-key.is-remote::before { border: 1.5px dashed var(--accent-text); }

/* Proof panel foot: link to the full self-check on the homepage (44px hit area, no layout shift) */
.check-foot-link { display: inline-block; padding-block: 12px; margin-block: -12px; line-height: 20px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.check-foot-link:hover { text-decoration-thickness: 2px; }

/* CTA */
.web-cta-title { max-width: 20ch; }

/* Motion (opt-in) */
@media (prefers-reduced-motion: no-preference) {
  .wm-phone-wrap { animation: zf-float 9s ease-in-out -3s infinite; }
  .lm-pin.is-home i { position: relative; }
  .build-step, .scope { transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
  .build-step:hover, .scope:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
}

/* 7 · Responsive (breakpoints from DESIGN-SYSTEM.md §3 only) -------------- */
@media (min-width: 1100px) {
  .web-hero .page-hero-grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
  .web-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-care { grid-column: span 2; }
}
/* Narrow split hero: drop the mock's secondary details */
@media (min-width: 1100px) and (max-width: 1319.98px) {
  .wm { --phone-w: 150px; --phone-h: 318px; }
  .wm-links, .wm-trust .wm-opt, .wm-url .i { display: none; }
  .wm-h { font-size: 18px; }
  .wm-img { height: 112px; }
}

@media (max-width: 1099.98px) {
  .web-hero .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .wm { max-width: 720px; }
  .build { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .build-step:nth-child(3)::before { display: none; }
  .scope-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .scope { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .scope-art { height: auto; min-height: 196px; border-bottom: 0; border-right: 1px solid var(--line); }
  .scope-body { align-self: center; }
  .web-pricing { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .web-pricing-head { max-width: 720px; margin-bottom: 2.25rem; }
}
@media (min-width: 760.02px) and (max-width: 1099.98px) {
  .web-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-care { grid-column: 1 / -1; }
}

@media (max-width: 1020px) {
  .web-local { gap: 2.5rem; }
  .local-map { max-width: 620px; }
}

@media (max-width: 760px) {
  /* Hero mock: smaller phone column, single-column example hero */
  .wm { --phone-w: 138px; --phone-h: 282px; --phone-top: 86px; --overlap: 10px; min-height: calc(var(--phone-top) + var(--phone-h) + 36px); }
  .wm-links { display: none; }
  .wm-site { gap: 12px; padding: 12px 20px 16px 14px; }
  .wm-h { font-size: 18px; }
  .wm-img { height: 104px; }
  .wm-trust .wm-opt { display: none; }
  .wm-site-m { padding: 9px 11px 12px; }
  .wm-site-m .wm-h { font-size: 14px; }
  .wm-phone { border-radius: 22px; }

  /* Build strip: one column, thumbnail beside the text */
  .build { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .build-step { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: stretch; }
  .build-step + .build-step::before { left: 61px; top: -10px; width: 2px; height: 10px; background: var(--grad-rule); }
  .build-step:nth-child(3)::before { display: block; }
  .build-art { --thumb-w: 88px; height: auto; min-height: 118px; border-bottom: 0; border-right: 1px solid var(--line); border-radius: var(--r-lg) 0 0 var(--r-lg); }
  .build-body { padding: 16px 16px 18px; }
  .build-body p { font-size: var(--fs-sm); }
  .bb-q { gap: 5px; padding: 4px 9px 4px 6px; font-size: 11px; }
  .bb-q .i { width: 13px; height: 13px; }
  .bb-t { display: none; }
  .bb-s { display: inline; }
  .bd-hero { grid-template-columns: minmax(0, 1fr); }
  .bd-h, .bd-swatches, .bc-bar .win-dots, .bw-row i:nth-child(3) { display: none; }
  .bw-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-img { height: 30px; }

  .web-hero .btn-row .btn { flex: 1 1 auto; }

  /* Features: icon beside the heading, compact cards; care card stacks */
  .web-features { gap: 10px; }
  .web-features .feature:not(.feature-care) { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 18px 18px 20px; }
  .web-features .feature:not(.feature-care) h3 { margin: 0 0 .3rem; align-self: center; }
  .web-features .feature:not(.feature-care) p { grid-column: 2; }
  .feature-care { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  .care-list { display: flex; flex-wrap: wrap; gap: 6px; }
  .care-list li { min-height: 34px; padding: 0 11px; }

  /* Scope: art above the text again, lower */
  .scope { display: flex; }
  .scope-art { min-height: 0; height: 172px; border-right: 0; border-bottom: 1px solid var(--line); }
  .scope-body { padding: 18px 18px 22px; }

  .price-grid.price-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .local-modes li { padding: 14px; }
}

@media (max-width: 520px) {
  /* Hero mock: essentials only (nav, headline, CTA; phone keeps its image) */
  .wm { --phone-w: 124px; --phone-h: 262px; --phone-top: 84px; }
  .wm-bar { gap: 8px; padding: 0 8px; }
  .wm-bar .win-dots, .wm-url .i, .wm-browser .wm-nav > .wm-btn, .wm-trust, .wm-cards, .wm-browser .wm-ctas .wm-btn-ghost { display: none; }
  .wm-hero .wm-img { height: 72px; }
  .wm-url { padding: 0 7px; font-size: 11px; }
  .wm-bar .app-label { margin-left: auto; padding: 2px 7px; font-size: 11px; }
  .wm-hero { grid-template-columns: minmax(0, 1fr); }
  .wm-site { padding: 12px 18px 16px 12px; }
  .wm-h { font-size: 16px; }
  .wm-cap { font-size: 11px; letter-spacing: .06em; }
  .wm-site-m { gap: 7px; }
  .wm-site-m .wm-h { font-size: 13px; }
  .wm-site-m .wm-img { height: 58px; }
  .wm-site-m .wm-logo { font-size: 11px; }

  .sa-relaunch { gap: 10px; }
  .scope-art { height: 156px; }
  .lm-pin b { font-size: 12px; padding: 2px 8px; }
  /* Map legend gets its own band under the canvas instead of covering pins */
  .lm-legend { position: static; padding: 2px 12px 12px; }
  .web-proof .check-panel-foot { font-size: 12px; }
}

@media (max-width: 370px) {
  /* Very small phone: the browser bar keeps only the "Beispiel" label */
  .wm-url { display: none; }
}