/* Hallmark · shape: Founder Letter (the person who answers, then how the work runs, the facts, the services, the call) · 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 7, the founder portrait on 5, mirrored against the homepage founder row) · nav: three-part bar (shared chrome, five real destinations) · footer: index columns under a mast (shared chrome, a hub with a real sitemap) · signature: Akin Kiyak's portrait at full height beside the page head, named in its caption · axes: light/grotesk-sans/cool · posture: restrained, one night band (the four steps) plus the night footer · imagery: founder portrait (real, img/work/akin.webp) · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S4 R4 V4 · weakest: P, an about page argues little; led with the one person who answers and set "one contact for everything" as the page's statement instead of claims */
/* Hallmark · dismissed 3 · the six service cells carry no icon tile, only a trailing arrow under a hairline, and each is a link to its own page */
/* Hallmark · reworded "Kunden – Handwerksbetriebe, Praxen, Restaurants und Einzelhändler in ganz Deutschland – macht" to "Kunden (Handwerksbetriebe, Praxen, Restaurants und Einzelhändler in ganz Deutschland) macht" · 19 names the spaced dash */
/* Hallmark · reworded "zueinander passen – ohne Verpflichtung" to "zueinander passen. Ohne Verpflichtung" · 19 names the spaced dash, same words in two sentences */
/* Hallmark · dropped the "Über uns" badge over the h1 · 54 names the eyebrow, the breadcrumb now says where the page sits */
/* Hallmark · dropped the Standort label over the address card · 67 names tracked caps, the address is a ledger row 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 "Wöchentlich: Content-Rhythmus" to "Wöchentlich: Ein fester Content-Rhythmus für Ihre Kanäle" · the ledger row needs a line a reader can picture */
/* Hallmark · reworded "Deutschlandweit: Remote betreut" to "Deutschlandweit: Remote betreut, per Video-Call, E-Mail und WhatsApp" · the homepage states how, so the row says it */

/* ── hero: the founder beside the page head ───────────────── */
.uu-hero { padding-block: var(--space-xl); }
.uu-hero__grid { display: grid; grid-template-columns: fit-content(40rem) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; min-height: calc(100dvh - var(--nav-h) - 2 * var(--space-xl)); }
.uu-hero h1 { max-width: 17ch; }
.uu-hero__lead { margin-top: var(--space-lg); max-width: 44ch; }
.uu-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

.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; }

.uu-portrait { margin: 0; }
.uu-portrait__frame { width: 100%; height: min(calc(100dvh - var(--nav-h) - 2 * var(--space-xl) - var(--space-3xl)), 760px); min-height: 440px; border-radius: var(--radius-card); }
.uu-portrait__frame img { object-position: 50% 28%; outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; border-radius: var(--radius-card); }
.uu-portrait figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.uu-portrait figcaption strong { display: block; color: var(--color-ink); font-size: var(--text-md); }

/* ── one contact: the statement over two columns ──────────── */
.uu-one__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.uu-one__head { grid-column: 1 / -1; max-width: 16ch; font-size: var(--text-display); }
.uu-one__col { padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.uu-one__grid > :nth-child(2) { grid-column: 5 / 9; }
.uu-one__grid > :nth-child(3) { grid-column: 9 / 13; }
.uu-one__col p { font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-2); }
.uu-one__col .link { margin-top: var(--space-lg); }

/* ── how it runs: four steps on the night band ────────────── */
.uu-night { background: var(--color-night); color: var(--color-night-ink); }
.uu-night .lead { color: var(--color-night-muted); }
.uu-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; }
.uu-steps li { counter-increment: step; padding-top: var(--space-lg); border-top: 1px solid var(--color-night-rule); }
.uu-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; }
.uu-steps h3 { color: var(--color-night-ink); }
.uu-steps p { margin-top: var(--space-sm); color: var(--color-night-muted); max-width: 32ch; }

/* ── the facts: a ledger beside its head ──────────────────── */
.uu-ledger { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.uu-ledger__head { grid-column: 1 / 6; }
.uu-ledger__list { grid-column: 7 / 13; margin: 0; border-top: 1px solid var(--color-rule); }
.uu-ledger__list > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-2xs) var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.uu-ledger__list dt { font: 700 var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.uu-ledger__list dd { margin: 0; color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.45; }

/* ── what via35 builds: six services, hairline grid ───────── */
.uu-does { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.uu-does li { border-top: 1px solid var(--color-rule); }
.uu-does a { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-sm); min-height: 184px; padding-block: var(--space-lg) var(--space-xl); color: inherit; text-decoration: none; border-radius: var(--radius-inner); }
.uu-does h3 { transition: color var(--dur-short) var(--ease-out); }
.uu-does p { color: var(--color-ink-2); max-width: 36ch; }
.uu-does .icon { color: var(--color-muted); transition: color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.uu-does a:hover h3, .uu-does a:hover .icon { color: var(--color-accent); }
.uu-does a:hover .icon { transform: translateX(4px); }
.uu-does a:active h3 { color: var(--color-ink); }
.uu-does a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.uu-does__all { margin-top: var(--space-xl); }

/* ── close: the quote beside the direct lines ─────────────── */
.uu-close .callback { align-items: center; }
.uu-close .btn.uu-close__btn { width: auto; margin-top: var(--space-xl); }
.uu-close__direct { grid-column: 7 / 13; margin-top: 0; }
.uu-close__direct a { min-height: 72px; font-size: var(--text-lg); }

@media (prefers-reduced-motion: reduce) { .uu-does .icon, .uu-does h3, .crumbs a { transition: none; } .uu-does a:hover .icon { transform: none; } }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 60rem) {
  .uu-hero__grid, .uu-one__grid, .uu-ledger { grid-template-columns: minmax(0, 1fr); }
  .uu-hero__grid { min-height: 0; gap: var(--space-xl); }
  .uu-one__grid > *, .uu-ledger > * { grid-column: 1 / -1 !important; }
  .uu-one__grid { gap: var(--space-xl); }
  .uu-portrait { max-width: 420px; }
  .uu-portrait__frame { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .uu-steps, .uu-does { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .uu-hero { padding-block: var(--space-md) var(--space-2xl); }
  .crumbs { margin-bottom: var(--space-md); }
  .uu-one__head { font-size: var(--text-display-s); }
  .uu-steps, .uu-does { grid-template-columns: minmax(0, 1fr); }
  .uu-steps li::before { margin-bottom: var(--space-md); }
  .uu-does a { min-height: 0; }
  .uu-ledger__list > div { grid-template-columns: minmax(0, 1fr); }
  .uu-close__direct a { font-size: var(--text-md); }
}