/* Hallmark · shape: Letter (/), Long Document (/impressum.html, /datenschutz.html) · genre: modern-minimal · theme: Cobalt (deal 2/3, seed freelance-consulting-practice-owner-managed-1aca·09dfcd22·2026-10-29·r0) · redesign: full
 * hero: Banner · nav: edge-aligned · footer: mast · imagery: the owner's portrait and logo, nothing else · signature: the headline set large beside the e-mail key on a dot-grid field
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · fold: pass · copy: verbatim · draw: b93bff · job: hire · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: P, the owner's words carry the argument; the page only orders them and puts the e-mail beside the claim */
/* Hallmark · nav swapped from the draw's masthead to edge-aligned after the hero review · hero-review: fix · 4 findings · 4 resolved */
/* Hallmark · finish-review: subagent · 4 findings · 3 resolved 1 declined (phone order: the e-mail key stays on the first screen, 44b and the hire anatomy; a JS-free reorder would split the hero) · gap: the Cobalt material is thin below the hero */
/* Hallmark · waive 78 · Long Document legal pages, row heads are annotations at --text-title beside their text · Impressum and Datenschutzerklärung read as a legal register of short rows, not as marketing sections */
/* Hallmark · dismissed 77 · three sections is the whole owner copy · the brief forbids adding sections to Büro Büttner's verbatim text, so the page stays short */
/* Hallmark · reworded "ANGABEN GEMÄSS § 5 DDG" to "Angaben gemäß § 5 DDG" · 67 names the capitals; letters unchanged, case only, ß restored */
/* Hallmark · reworded "← ZURÜCK" to "Zurück" · 63 names the arrow glued to the link; 67 the capitals */
/* Hallmark · reworded "CHRISTIAN BÜTTNER · KI-BERATUNG · SOFTWAREENTWICKLUNG" to a three-item list · 63 names the middle-dot string; 67 the capitals */
/* Hallmark · reworded "— BERATEN, AUTOMATISIEREN, ENTWICKELN." to "Beraten, automatisieren, entwickeln." · 19 names the leading dash; 67 the capitals */
/* Hallmark · dropped portrait.png · replaced by portrait-300.webp and portrait-600.webp at 1x and 2x of the 300px display; the 712 KB original left the publish folder */

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
}

body { font-synthesis: none; }
a { text-decoration-color: var(--color-rule-2); transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
a:hover { text-decoration-color: var(--color-accent); }
a:active { color: var(--color-accent-deep); }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-modal); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

/* masthead */
.masthead { border-bottom: var(--rule-hair) solid var(--color-rule); }
.masthead .container { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 80px; }
.wordmark { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; }
.wordmark img { width: 32px; height: auto; flex-shrink: 0; }
.wordmark span { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.motto { font-size: var(--text-sm); color: var(--color-muted); }
.back { order: 2; display: inline-block; padding-block: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }

/* hero */
.hero { position: relative; isolation: isolate; padding-block: var(--space-2xl); }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: var(--cell-w) var(--cell-h); }
.hero::before { background-image: radial-gradient(circle at 50% 50%, var(--color-glyph-3) 1.1px, transparent 1.5px); -webkit-mask-image: radial-gradient(ellipse 70% 100% at 100% 40%, var(--color-ink) 30%, transparent 72%); mask-image: radial-gradient(ellipse 70% 100% at 100% 40%, var(--color-ink) 30%, transparent 72%); }
.hero::after { background-image: radial-gradient(circle at 50% 50%, var(--color-glyph-4) 1.3px, transparent 1.7px); -webkit-mask-image: radial-gradient(ellipse 30% 55% at 92% 30%, var(--color-ink) 10%, transparent 70%), radial-gradient(ellipse 22% 40% at 70% 85%, var(--color-ink) 5%, transparent 70%); mask-image: radial-gradient(ellipse 30% 55% at 92% 30%, var(--color-ink) 10%, transparent 70%), radial-gradient(ellipse 22% 40% at 70% 85%, var(--color-ink) 5%, transparent 70%); }
.hero .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.hero h1 { max-width: none; font-size: clamp(2.75rem, 5.5vw + 1rem, 6rem); line-height: 1.02; }
.field { padding-block: var(--space-xl); }
.contact { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-xl); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); border-top: 2px solid var(--color-ink); }
.contact h2 { font-size: var(--text-2xl); max-width: none; }
.contact p { color: var(--color-ink-2); max-width: 46ch; }

.key { display: inline-flex; align-items: center; align-self: flex-start; min-height: 48px; margin-top: var(--space-xs); padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-accent-edge); border-radius: var(--radius-input); background: var(--color-accent); color: var(--color-accent-ink); font: 500 var(--text-md)/1 var(--font-display); white-space: nowrap; text-decoration: none; box-shadow: var(--shadow-key-accent); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.key:hover { transform: translateY(-1px); background: var(--color-accent-deep); }
.key:active { transform: translateY(3px); box-shadow: var(--shadow-key-press); color: var(--color-accent-ink); }
.key:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* the letter */
.letter { padding-block: 0 var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.letter .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; padding-top: var(--space-2xl); }
.byline { grid-column: 1 / span 4; margin: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.byline img { width: 300px; max-width: 100%; aspect-ratio: 1; object-fit: cover; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.byline figcaption { display: flex; flex-direction: column; gap: var(--space-xs); }
.byline-name { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1.05; color: var(--color-ink); }
.roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: var(--text-md); line-height: 1.4; color: var(--color-ink-2); }
.prose { grid-column: 6 / span 7; align-self: center; display: flex; flex-direction: column; gap: var(--space-lg); }
.prose p { font-size: var(--text-lead); line-height: 1.6; max-width: 60ch; color: var(--color-ink); }

/* legal pages */
.doc-head { padding-block: var(--space-3xl) var(--space-2xl); }
.doc-head h1 { font-size: var(--text-display-s); max-width: none; }
.doc { padding-bottom: var(--section-gap-s); }
.doc .container > section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.doc .container > section:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.doc h2 { grid-column: 1 / span 4; font-size: var(--text-title); font-weight: 500; line-height: 1.25; max-width: none; }
.doc p { grid-column: 6 / span 7; font-size: var(--text-lead); line-height: 1.6; max-width: 62ch; color: var(--color-ink-2); }

/* footer */
.mast { background: var(--color-graphite); color: var(--color-graphite-ink); padding-block: var(--space-3xl) var(--space-xl); }
.mast .container { display: flex; flex-direction: column; gap: var(--space-2xl); }
.mast-mark { font-family: var(--font-display); font-size: var(--text-section); font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1; color: var(--color-graphite-ink); }
.mast-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md) var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-graphite-glyph-2); font-size: var(--text-sm); color: var(--color-graphite-muted); }
.mast nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-lg); }
.mast nav ul { margin-block: calc(var(--space-2xs) * -1); }
.mast nav a { display: inline-block; padding-block: var(--space-2xs); color: var(--color-graphite-ink); text-decoration-color: var(--color-graphite-glyph-3); }
.mast nav a:hover { text-decoration-color: var(--color-accent-2); }
.mast nav a:active { color: var(--color-accent-2); }
.mast nav a[aria-current="page"] { text-decoration-color: var(--color-accent-2); text-decoration-thickness: 2px; }
.mast a:focus-visible { outline-color: var(--color-accent-2); }

@media (max-width: 60rem) {
  .hero { position: relative; isolation: isolate; padding-block: var(--space-2xl); }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: var(--cell-w) var(--cell-h); }
.hero::before { background-image: radial-gradient(circle at 50% 50%, var(--color-glyph-3) 1.1px, transparent 1.5px); -webkit-mask-image: radial-gradient(ellipse 70% 100% at 100% 40%, var(--color-ink) 30%, transparent 72%); mask-image: radial-gradient(ellipse 70% 100% at 100% 40%, var(--color-ink) 30%, transparent 72%); }
.hero::after { background-image: radial-gradient(circle at 50% 50%, var(--color-glyph-4) 1.3px, transparent 1.7px); -webkit-mask-image: radial-gradient(ellipse 30% 55% at 92% 30%, var(--color-ink) 10%, transparent 70%), radial-gradient(ellipse 22% 40% at 70% 85%, var(--color-ink) 5%, transparent 70%); mask-image: radial-gradient(ellipse 30% 55% at 92% 30%, var(--color-ink) 10%, transparent 70%), radial-gradient(ellipse 22% 40% at 70% 85%, var(--color-ink) 5%, transparent 70%); }
  .hero .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .letter .container > * { grid-column: 1 / -1; }
  .doc .container > section > * { grid-column: 1 / -1; }
  .doc-head { padding-block: var(--space-2xl) var(--space-xl); }
}
@media (max-width: 40rem) {
  .motto { display: none; }
  .contact { padding: var(--space-lg); }
  .contact h2 { font-size: var(--text-xl); }
  .field { padding-block: var(--space-md); }
  .letter { padding-top: var(--space-md); }
  .masthead .container { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .key, a { transition: none; }
  .key:hover, .key:active { transform: none; }
}