/* Hallmark · shape: Index-First, swapped from Narrative Workflow (the work is four finished edits, not a process) · genre: atmospheric · theme: Kiln (deal 3/3, seed hiwebdesign-webdesign-studio-geroldswil-schweiz-c98c·a9916831·2026-11-09·r0) · job: hire · draw: 4babf6
 * hero: Stage, a portrait reel on five columns · nav: banner over a retracting bar · footer: index columns · imagery: the user's own videos 5 (car edits), stills from one · signature: the M4 Cabrio reel running in the hero, then one edit taken apart second by second · kiln: ember
 * axes: dark/high-contrast-serif/warm · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: R, five videos on one page; the grid loads none until played and only the hero loops */
/* Hallmark · waive 77 · datenschutz.html and impressum.html are one prose column · a Datenschutzerklärung reads as a legal document at 62ch, not as a ten-column section */
/* Hallmark · waive 78 · legal page heads sit at the item-title step · numbered clauses of the Datenschutzerklärung are annotations of one document, the Long Document shape */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Boska"; src: url("./fonts/boska-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("./fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root { --nav-h: 72px; --banner-h: 40px; }

h1, h2, h3 { line-height: 1.04; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-pill); }
.skip:focus-visible { top: var(--space-md); }

/* Controls */
.btn { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 50px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-focus); color: var(--color-accent-ink); }
.btn--ghost { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.btn--ghost:hover { background: var(--color-paper-2); color: var(--color-ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

a:hover { color: var(--color-ink-2); }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }

/* Banner and bar */
.banner { min-height: var(--banner-h); display: flex; align-items: center; background: var(--color-paper-2); color: var(--color-ink-2); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.banner .container { display: flex; justify-content: space-between; gap: var(--space-md); }
.banner a { color: var(--color-ink); }
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid transparent; transition: transform var(--dur-long) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.bar.is-scrolled { border-bottom-color: var(--color-rule); }
.bar.is-hidden { transform: translateY(-100%); }
.bar__inner { min-height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.wordmark { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-xl); letter-spacing: -0.01em; text-decoration: none; color: var(--color-ink); }
.bar__links { display: flex; align-items: center; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.bar__links a:not(.btn) { text-decoration: none; font-size: var(--text-sm); color: var(--color-ink-2); }
.bar__links a:not(.btn):hover { color: var(--color-ink); }

/* Hero: Stage with a portrait reel */
.hero { min-height: calc(100dvh - var(--nav-h) - var(--banner-h)); display: flex; align-items: center; padding-block: var(--space-xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--space-2xl); align-items: center; }
.hero__text { display: grid; gap: var(--space-lg); justify-items: start; }
.hero h1 { max-width: 12ch; }
.hero .lead { color: var(--color-ink-2); }
.reel { position: relative; margin: 0; justify-self: start; height: min(72dvh, 720px); aspect-ratio: 9 / 16; border-radius: min(2vw, var(--radius-card)); box-shadow: var(--shadow-card); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.reel > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; border-radius: inherit; }
.reel__toggle { position: absolute; z-index: 2; right: var(--space-md); bottom: var(--space-md); }
html:not(.js) .reel__toggle { display: none; }
.reel__caption { position: absolute; z-index: 2; left: var(--space-md); bottom: var(--space-md); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-paper) 70%, transparent); color: var(--color-ink); font-size: var(--text-sm); }
.reel__toggle.btn--ghost { background: color-mix(in oklab, var(--color-paper) 70%, transparent); }

/* Sections */
.section { padding-block: var(--section-gap) 0; }
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: end; margin-bottom: var(--space-2xl); }
.section-head h2 { grid-column: 1 / 8; }
.section-head p { grid-column: 9 / -1; color: var(--color-ink-2); }

/* The work: four edits */
.work { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.work figure { margin: 0; display: grid; gap: var(--space-md); }
.work video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: min(1.6vw, var(--radius-well)); background: var(--color-paper-2); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.work figcaption { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: baseline; }
.work .name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-title); line-height: 1.2; }
.work .meta { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }

/* One edit, second by second */
.beats { width: 100%; border-collapse: collapse; }
.beats th, .beats td { text-align: left; vertical-align: middle; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.beats thead th { padding-top: 0; padding-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.beats .time { width: 22%; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-3xl); letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; }
.beats .frame { width: 18%; }
.beats .frame img { width: 96px; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.beats tbody th { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-title); }
.beats td:last-child { color: var(--color-ink-2); }

/* The offer */
.offer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: center; padding: var(--space-3xl) var(--space-2xl); background: var(--color-paper-2); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.offer__price { grid-column: 1 / 8; margin: 0; display: grid; gap: var(--space-sm); }
.offer__price .figure { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(4rem, 11vw, 10rem); line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: break-word; min-width: 0; }
.offer__price .from { font-size: var(--text-lead); color: var(--color-ink-2); }
.offer__side { grid-column: 8 / -1; display: grid; gap: var(--space-lg); justify-items: start; }
.offer__side h2 { font-size: var(--text-section); }
.offer__side p { color: var(--color-ink-2); }

/* Close: contact */
.contact { padding-block: var(--section-gap) var(--section-gap-s); }
.contact .section-head h2 { font-size: var(--text-display); }
.ways { margin: 0; }
.ways div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.ways div:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.ways dt { grid-column: 1 / 4; font-size: var(--text-sm); color: var(--color-muted); }
.ways dd { grid-column: 4 / -1; margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-2xl); line-height: 1.2; overflow-wrap: break-word; min-width: 0; }
.ways a { text-decoration-color: var(--color-rule); }
.ways a:hover { text-decoration-color: var(--color-ink-2); }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-lg); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Footer: index columns */
.footer { padding-block: var(--space-3xl) var(--space-xl); background: var(--color-paper-2); color: var(--color-ink); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.footer__mark { grid-column: 1 / 6; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-section); line-height: 1; letter-spacing: var(--tracking-display); }
.footer__col { grid-column: span 2; display: grid; gap: var(--space-xs); align-content: start; }
.footer__col:first-of-type { grid-column: 7 / 9; }
.footer__col h2 { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); letter-spacing: 0; color: var(--color-muted); margin-bottom: var(--space-xs); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.footer__col a { text-decoration: none; color: var(--color-ink); }
.footer__col a:hover { text-decoration: underline; }
.footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); }
address { font-style: normal; }

/* Legal pages */
.doc { padding-block: var(--space-3xl) var(--section-gap); }
.doc h1 { font-size: var(--text-display-s); max-width: 24ch; margin-bottom: var(--space-lg); }
.doc .lead { color: var(--color-ink-2); margin-bottom: var(--space-2xl); }
.doc__body { max-width: 62ch; display: grid; gap: var(--space-md); line-height: 1.7; }
.doc__body h2 { font-size: var(--text-title); line-height: 1.2; margin-top: var(--space-xl); max-width: none; }
.doc__body p, .doc__body li { max-width: 62ch; color: var(--color-ink-2); }
.doc__body ul { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-xs); }
.doc__body strong { color: var(--color-ink); font-weight: 500; }
.doc__body a { color: var(--color-ink); }

@media (max-width: 60rem) {
  :root { --nav-h: 64px; }
  .hero { min-height: 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .reel { height: auto; width: min(100%, 360px); }
  .section-head h2, .section-head p { grid-column: 1 / -1; }
  .work { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-2xl); }
  .offer { padding: var(--space-2xl) var(--space-lg); }
  .offer__price, .offer__side { grid-column: 1 / -1; }
  .ways dt, .ways dd { grid-column: 1 / -1; }
  .ways dd { margin-top: var(--space-xs); }
  .footer__mark, .footer__col, .footer__col:first-of-type { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .bar__links li:not(:last-child) { display: none; }
  .banner .container > :last-child { display: none; }
  .work { grid-template-columns: minmax(0, 1fr); }
  .work figure { width: min(100%, 360px); justify-self: center; }
  .beats thead { display: none; }
  .beats .time { font-size: var(--text-2xl); }
  .beats .frame img { width: 64px; }
  .beats td:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bar { transition: none; }
  .bar.is-hidden { transform: none; }
  .btn { transition: background-color var(--dur-short) linear; }
  .btn:active { transform: none; }
}