/* Hallmark · shape: Offer Page (the work, the price, the way) · genre: editorial · theme: brand (locked, DESIGN.md) · redesign: full · job: hire, the enquiry and the call in the hero, beside each package and at the close
 * paper: oklch(95.6% 0.006 62) · accent: oklch(64.4% 0.192 41.7) · display: Plus Jakarta Sans 800 · body: Plus Jakarta Sans 400 · hero: Stage (text 5, the live Kleiner site 7) · nav: edge-aligned bar copied from index.html · footer: index columns copied from index.html · signature: the Kleiner site scrolling inside one phone while its four notes change beside it
 * axes: light/grotesk-heavy/chromatic-orange · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5 · weakest: P, the old page argued with claims (conversion, Schnickschnack); it now argues with two real sites and three real prices, and the claim sections went */
/* Hallmark · scroll pattern: pinned chapter (scroll-choreography.md § 1) as the Handy-Rundgang in #beispiel, the page's only scroll-linked pattern; the static end state is the four-screen strip in base CSS, the pin runs only with js, motion allowed and 60rem or wider */
/* Hallmark · waive 47b · one phone frame in #beispiel, real screenshots of landgasthof-kleiner.netlify.app inside · the page sells mobile websites and the phone is the product's own medium */
/* Hallmark · dropped the sections "Eine schwache Website kostet täglich Kunden.", "Conversion-optimierte Websites, die für dich arbeiten." with its Vorher/Mit-KO list, and "Kein Schnickschnack. Nur was wirkt." · Axel asked for the interchangeable claims to go; their facts live on in "In jeder Website drin." */
/* Hallmark · reworded the h1 "Eine Website erstellen lassen, die Kunden bringt." to "Website erstellen lassen. Ab 1.590 €." and the price FAQ from "Preis auf Anfrage" to the three ab-prices · Axel approved showing the prices, now from his price plan of 30.10.2026 */
/* Hallmark · reworded the packages Onepage, Mehrseitige Website, Website Premium to Landingpage, Business-Website, Premium-Website at 1.590, 2.490 and 3.490 € · Axel's price plan "Preismodell: Basis plus Add-ons" (30.10.2026), column Neu */
/* Hallmark · second scroll pattern: the AC Car Care quote lights up word by word as it scrolls through the screen (scroll-craft kinetic) · Axel asked for this exact moment; F8 is noted, the quote is fully readable without script, under reduced motion and at rest */
@import url("./site.css");

/* ---------- Pfad ---------- */
.breadcrumbs { padding-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.breadcrumbs li + li::before { content: "/"; color: var(--color-muted); }
.breadcrumbs a { color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.22em; }
.breadcrumbs a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.breadcrumbs [aria-current="page"] { color: var(--color-ink); }

/* ---------- Kopf: Stage ---------- */
.ws-hero { padding-block: var(--space-lg) var(--space-2xl); }
.ws-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; min-height: calc(100dvh - 72px - 44px - var(--space-lg) - var(--space-2xl)); }
.ws-hero h1 { max-width: 13ch; font-size: clamp(2.5rem, 4.4vw + 0.75rem, 5.25rem); line-height: 1; }
.nowrap { white-space: nowrap; }
.ws-hero .lead { margin-top: var(--space-lg); max-width: 32ch; }
.ws-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.ws-hero-more { margin-top: var(--space-md); font-size: var(--text-sm); }
.ws-hero-more a, .ws-handy-foot a, .ws-preise-notes a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.ws-hero-shot { margin: 0; }
.ws-hero-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; border-radius: var(--radius-card); outline: 1px solid var(--color-rule); outline-offset: -1px; }
.ws-hero-shot figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---------- Handy-Rundgang ---------- */
.ws-handy { background: var(--color-paper-2); }
.ws-handy-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.ws-handy-head h2 { grid-column: 1 / 7; }
.ws-handy-head .lead { grid-column: 8 / 13; }
.ws-phone { display: none; }
.ws-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.ws-note { display: grid; gap: var(--space-md); align-content: start; }
.ws-note-shot { margin: 0; padding: var(--space-xs); border-radius: var(--radius-card); background: var(--color-ink); }
.ws-note-shot img { width: 100%; aspect-ratio: 390 / 600; object-fit: cover; object-position: 50% 0; border-radius: calc(var(--radius-card) - var(--space-xs)); }
.ws-note-text h3 { font-size: var(--text-lg); }
.ws-note-text p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.ws-handy-foot { margin-top: var(--space-2xl); font-size: var(--text-sm); color: var(--color-ink-2); }

.ws-handy.is-live .ws-handy-pin { height: 380vh; }
.ws-handy.is-live .ws-handy-stage { position: sticky; top: 72px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; height: calc(100dvh - 72px); }
.ws-handy.is-live .ws-phone { display: block; justify-self: center; height: min(680px, calc(100dvh - 72px - var(--space-2xl) * 2)); aspect-ratio: 390 / 844; padding: var(--space-sm); border-radius: 44px; background: var(--color-ink); }
.ws-handy.is-live .ws-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 34px; background: var(--color-paper-3); }
.ws-handy.is-live .ws-phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; will-change: transform; }
.ws-handy.is-live .ws-notes { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--color-ink); }
.ws-handy.is-live .ws-note { padding: var(--space-md) 0 var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); border-left: 2px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.ws-handy.is-live .ws-note-shot { display: none; }
.ws-handy.is-live .ws-note:not(.is-current) p { display: none; }
.ws-handy.is-live .ws-note:not(.is-current) h3 { color: var(--color-ink-2); }
.ws-handy.is-live .ws-note.is-current { border-left-color: var(--color-accent); }
.ws-handy.is-live .ws-note.is-current h3 { font-size: var(--text-xl); }

/* ---------- Preise ---------- */
.ws-preise-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.ws-preise-head h2 { grid-column: 1 / 7; }
.ws-preise-head .lead { grid-column: 8 / 13; }
.ws-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-ink); }
.ws-col { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-xl) var(--space-xl) var(--space-xl) 0; }
.ws-col + .ws-col { padding-left: var(--space-xl); border-left: 1px solid var(--color-rule); }
.ws-col:last-child { padding-right: 0; }
.ws-col--pick { box-shadow: inset 0 3px 0 var(--color-accent); }
.ws-cell--name h3 { font-size: var(--text-xl); }
.ws-cell--name p { margin-top: var(--space-2xs); color: var(--color-ink-2); }
.ws-cell--price { font-size: var(--text-md); color: var(--color-ink-2); }
.ws-cell--price strong { display: block; margin-top: var(--space-2xs); font-size: var(--text-display-s); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-col-fit { color: var(--color-ink-2); max-width: 30ch; }
.ws-col .btn { margin-top: auto; align-self: flex-start; }
.ws-extras { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-lg) var(--gap-columns); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.ws-extras h3 { font-size: var(--text-lg); }
.ws-extras ul { margin: 0; padding: 0; list-style: none; }
.ws-extras li { display: flex; justify-content: space-between; gap: var(--space-lg); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.ws-extras li span:last-child { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ws-preise-notes { display: grid; gap: var(--space-xs); margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---------- In jeder Website ---------- */
.ws-drin { background: var(--color-paper-2); }
.ws-drin-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.ws-drin-grid h2 { grid-column: 1 / 5; align-self: start; }
.ws-drin-list { grid-column: 5 / 13; margin: 0; border-top: 1px solid var(--color-ink); }
.ws-drin-list > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-lg); padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); }
.ws-drin-list dt { font-size: var(--text-lg); font-weight: 800; }
.ws-drin-list dd { margin: 0; color: var(--color-ink-2); }

/* ---------- Ablauf ---------- */
.ws-ablauf h2 { margin-bottom: var(--space-2xl); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.step { padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); counter-increment: schritt; }
.step h3::before { content: counter(schritt); display: block; margin-bottom: var(--space-sm); font-size: var(--text-display-s); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.step p { margin-top: var(--space-xs); color: var(--color-ink-2); }

/* ---------- Stimme ---------- */
.ws-stimme { background: var(--color-band); color: var(--color-band-ink); padding-block: var(--section-gap-s); }
.ws-quote { margin: 0; }
.ws-quote blockquote { margin: 0; font-size: var(--text-section); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; hanging-punctuation: first; text-wrap: balance; }
.ws-quote blockquote::before { content: "„"; }
.ws-quote blockquote::after { content: "“"; }
.ws-stimme.is-live .wort { opacity: var(--o, 0.16); transition: opacity var(--dur-micro) linear; }
.ws-quote figcaption { display: grid; gap: var(--space-3xs); margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-band-ink-2); }
.ws-quote-name { font-size: var(--text-md); font-weight: 800; color: var(--color-band-ink); }

/* ---------- Abschluss (wie Startseite) ---------- */
.closing { background: var(--color-paper-2); border-top: 1px solid var(--color-rule); }
.closing-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }
.closing-text h2 { max-width: 14ch; }
.closing-text .lead { margin-top: var(--space-lg); }
.closing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.closing-trust { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: var(--space-xl) 0 0; padding: var(--space-md) 0 0; list-style: none; border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---------- Schmal ---------- */
@media (max-width: 60rem) {
  .ws-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; }
  .ws-handy-head, .ws-preise-head, .ws-drin-grid { grid-template-columns: minmax(0, 1fr); }
  .ws-handy-head h2, .ws-handy-head .lead, .ws-preise-head h2, .ws-preise-head .lead, .ws-drin-grid h2, .ws-drin-list { grid-column: 1 / -1; }
  .ws-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-2xl); }
  .ws-table { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .ws-col, .ws-col + .ws-col { padding: var(--space-xl) 0; border-left: 0; border-top: 1px solid var(--color-ink); }
  .ws-col--pick { box-shadow: inset 0 3px 0 var(--color-accent); }
  .ws-drin-list > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .ws-extras { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .closing-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}
@media (max-width: 40rem) {
  .ws-notes { gap: var(--space-xl) var(--space-sm); }
  .steps { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ws-handy.is-live .ws-note, .ws-stimme.is-live .wort { transition: none; }
}