/* Hallmark · shape: Portfolio Showcase (the sample sites are the page: the work first, then what every site includes, how a project runs, the two ways to buy, the quote) · genre: modern-minimal · theme: dose (by request, blue ground, the logo blue as its one signal) · redesign: full · job: hire (quote, WhatsApp, callback) · hero: Stage (text on 4, a desktop and phone capture of one sample site on 8) · nav: three-part bar (shared chrome, five real destinations) · footer: index columns under a mast (shared chrome, a hub with a real sitemap) · signature: the same Musterkanzlei shown at desktop and phone size side by side, linking to the live sample · axes: light/grotesk-sans/cool · posture: restrained, one night band (the four project steps) plus the night footer · imagery: screenshots 8 (img/work and img/lp captures of ornek/, data-kind product) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a web design page in any agency; carried it on the five labelled Musterprojekte at size, desktop and phone, instead of a stock mockup */
/* Hallmark · dropped the Unsplash "Webdesign Mockup" hotlink · 76 and 84, a stock laptop photo where real captures of the sample sites exist */
/* Hallmark · dropped the "01 – Unsere Leistung" badge over the h1 · 54 names the eyebrow and 66 the ordinal, the breadcrumb says where the page sits */
/* Hallmark · dropped the check-circle icon tiles before each feature · 3 names icons in tiles, the five features are hairline rows now */
/* Hallmark · dropped js/motion.js, js/reveal.js and the Material Symbols font on this page · one IntersectionObserver reveal and the shared SVG sprite replace them */
/* Hallmark · reworded "zugeschnitten sind – modern, schnell und DSGVO-konform" to "zugeschnitten sind: modern, schnell und DSGVO-konform" · 19 names the spaced dash */
/* Hallmark · reworded "Perfekte Darstellung auf allen Geräten – Desktop, Tablet, Mobile" to "Perfekte Darstellung auf allen Geräten: Desktop, Tablet, Mobile" · 19 names the spaced dash */
/* Hallmark · reworded "2–4 Wochen" to "2 bis 4 Wochen" · 19 names the dash, the homepage FAQ figure is unchanged */

/* breadcrumb: same rules as css/ueber-uns.css, kept per page until site.css takes them */
.crumbs { margin-bottom: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--color-rule); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-rule); transition: color var(--dur-short) var(--ease-out); }
.crumbs a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.crumbs a:active { color: var(--color-ink); }
.crumbs a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.crumbs li[aria-current] { display: inline-flex; align-items: center; min-height: 44px; }

/* ── hero: the word beside the work ───────────────────────── */
.wd-hero { padding-block: var(--space-xl); }
.wd-hero__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: center; min-height: calc(100dvh - var(--nav-h) - 2 * var(--space-xl)); }
.wd-hero h1 { font-size: clamp(3.25rem, 5.4vw + 0.5rem, 6.25rem); line-height: 1; }
.wd-hero__lead { margin-top: var(--space-lg); max-width: 40ch; }
.wd-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

.wd-pair { margin: 0; }
.wd-pair__link { display: grid; grid-template-columns: minmax(0, 2.886fr) minmax(0, 1fr); gap: var(--space-md); align-items: end; border-radius: var(--radius-card); color: inherit; text-decoration: none; }
.wd-pair__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.wd-pair__desk, .wd-pair__mob { display: block; border-radius: var(--radius-card); }
.wd-pair__desk { aspect-ratio: 4 / 3; }
.wd-pair__mob { aspect-ratio: 520 / 1125; }
.wd-pair__desk img { object-position: 0 0; }
.wd-pair__mob img { object-position: 50% 0; }
.wd-pair img, .wd-phone img { outline: 1px solid color-mix(in oklab, var(--color-ink) 9%, transparent); outline-offset: -1px; border-radius: var(--radius-card); }
.wd-pair figcaption { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); justify-content: space-between; margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.wd-pair figcaption strong { color: var(--color-ink); font-size: var(--text-md); }
.wd-pair__link:hover + figcaption strong { color: var(--color-accent); }

/* ── the work: a wider rail than the homepage ─────────────── */
.wd-rail { grid-auto-columns: min(44rem, 84vw); }

/* ── what every site includes: two phones beside five rows ── */
.wd-incl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: center; }
.wd-phones { grid-column: 1 / 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.wd-phone { display: block; border-radius: var(--radius-card); }
.wd-phone > span { display: block; aspect-ratio: 520 / 1125; border-radius: var(--radius-card); }
.wd-phone:nth-child(2) { margin-top: var(--space-3xl); }
.wd-phone:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.wd-phones__cap { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); }
.wd-incl__body { grid-column: 7 / 13; }
.wd-rows { margin: var(--space-xl) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.wd-rows li { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.wd-rows p { color: var(--color-ink-2); }
.wd-incl__more { margin-top: var(--space-lg); color: var(--color-ink-2); }

/* ── how a project runs: four steps on the night band ─────── */
.wd-night { background: var(--color-night); color: var(--color-night-ink); }
.wd-night .lead { color: var(--color-night-muted); }
.wd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.wd-steps li { counter-increment: step; padding-top: var(--space-lg); border-top: 1px solid var(--color-night-rule); }
.wd-steps li::before { content: counter(step); display: block; margin-bottom: var(--space-2xl); font: 700 var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-night-accent); font-variant-numeric: tabular-nums; }
.wd-steps h3 { color: var(--color-night-ink); }
.wd-steps p { margin-top: var(--space-sm); color: var(--color-night-muted); max-width: 32ch; }

/* ── two ways to buy: the package in a well, the custom site on a hairline ── */
.wd-ways { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: stretch; }
.wd-way { grid-column: 8 / 13; padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.wd-way--pkg { grid-column: 1 / 7; padding: var(--space-xl); border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); }
.wd-way__line { margin-top: var(--space-lg); max-width: 22ch; font: 700 var(--text-2xl)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.wd-way--pkg .link { margin-top: var(--space-xl); }
.wd-price { margin: var(--space-lg) 0 0; }
.wd-price div { padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.wd-price dt { font: 700 var(--text-3xl)/1.1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.wd-price dd { margin: var(--space-2xs) 0 0; color: var(--color-ink-2); }
.wd-way__note { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }

/* ── close: the quote, head and actions on one row ───────── */
.wd-close { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: end; }
.wd-close h2 { grid-column: 1 / 7; font-size: var(--text-display-s); }
.wd-close__end { grid-column: 8 / 13; }
.wd-close__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

@media (prefers-reduced-motion: reduce) { .crumbs a { transition: none; } }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 60rem) {
  .wd-hero__grid, .wd-incl, .wd-ways, .wd-close { grid-template-columns: minmax(0, 1fr); }
  .wd-hero__grid { min-height: 0; gap: var(--space-xl); }
  .wd-incl > *, .wd-ways > *, .wd-close > * { grid-column: 1 / -1 !important; }
  .wd-phones { max-width: 520px; }
  .wd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .wd-hero { padding-block: var(--space-md) var(--space-2xl); }
  .crumbs { margin-bottom: var(--space-md); }
  .wd-steps { grid-template-columns: minmax(0, 1fr); }
  .wd-steps li::before { margin-bottom: var(--space-md); }
  .wd-way--pkg { padding: var(--space-lg); }
  .wd-phone:nth-child(2) { margin-top: var(--space-xl); }
}