/* Hallmark · shape: his booth in red light, then the hall, the person, the handle, the enquiry · genre: atmospheric · theme: custom · job: hire · idea: "music and light for your party, under his own booth, with the heartbeat from his logo as a tempo line from ABBA to Gabber" · vibe: "graphite night, white logo, club light"
 * paper: oklch(18.5% 0.012 262) · accent: oklch(97% 0.005 262) · display: Antonio · body: Hanken Grotesk · hero: his booth at the Celona bleeds in from the right and fades into graphite, head on the left, tempo line across the foot · nav: logo left, one text link right, no button, no rule · footer: logo, address as the imprint, three links · imagery: photographs, the client's own 3 · signature: the tempo line, 100 to 190 BPM, under his lit booth
 * axes: dark/display-condensed/neutral · posture: monochrome graphite, the colour comes from the light in his photographs · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: P, a dark DJ page is expected; the booth with his logo and the real tempo line carry it, nothing else decorates */
/* Hallmark · finish-review: subagent (Entwurf 3) · 8 findings · 8 resolved (line tied to screen height, head without echo, hall full width as the green answer to the red bar, hero caption, axis tracks the line, band without slab until the feed, occasions said once, form in three columns with a sticky head) · open from Entwurf 2: his own tracks on the line, BPM endpoints to confirm */
/* Hallmark · dismissed render · only the file:// pass loses the fonts (preload over a null origin), the URL pass loads antonio.woff2 and hanken.woff2 from the server */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Antonio"; src: url("schriften/antonio.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("schriften/hanken.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

body { font-synthesis: none; }
h2 { font-size: var(--text-section); font-weight: 700; line-height: 1.02; letter-spacing: var(--tracking-display); max-width: 18ch; }

/* Logo als Maske, damit es die Farbe aus den Tokens nimmt */
.logo { display: block; aspect-ratio: 3492 / 867; background: var(--color-ink); -webkit-mask: url("bilder/logo.svg") center / contain no-repeat; mask: url("bilder/logo.svg") center / contain no-repeat; }
.logo--kopf { width: 132px; }
.logo--fuss { width: 168px; }

/* Kopf */
.kopf { display: flex; align-items: center; justify-content: space-between; min-height: 76px; }
.kopf__links { display: flex; gap: var(--space-xl); }
.kopf__links a { text-decoration: none; color: var(--color-ink-2); font-size: var(--text-md); white-space: nowrap; }
.kopf__links a:hover { color: var(--color-ink); }
.logo--kopf:focus-visible, .kopf__links a:focus-visible { outline-offset: 6px; }

/* Knöpfe und Links */
.knopf { display: inline-flex; align-items: center; min-height: 52px; padding: var(--space-sm) var(--space-lg); background: var(--color-accent); color: var(--color-accent-ink); border: 0; border-radius: var(--radius-card); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.knopf:hover { transform: translateY(-1px); }
.knopf:active { transform: translateY(0); opacity: 0.85; }
.knopf:disabled { opacity: 0.55; cursor: not-allowed; }
.knopf:focus-visible { outline-offset: 3px; }
.textlink { color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-rule); white-space: nowrap; }
.textlink:hover { color: var(--color-ink); text-decoration-color: var(--color-ink); }

/* Erster Bildschirm */
.held { position: relative; isolation: isolate; min-height: calc(100svh - 76px); display: grid; grid-template-rows: 1fr auto; padding-block: var(--space-2xl) var(--space-xl); gap: var(--space-xl); }
.held__bild { position: absolute; z-index: -1; top: 0; right: 0; bottom: calc(clamp(100px, min(16vw, 20svh), 220px) + var(--space-2xl)); width: 68%; display: block; }
.held__bild { margin: 0; }
.held__bild picture { display: block; height: 100%; }
.held__bild figcaption { position: absolute; z-index: 1; right: var(--gutter); bottom: var(--space-sm); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-card); background: color-mix(in oklch, var(--color-paper) 78%, transparent); color: var(--color-ink-2); font-size: var(--text-sm); }
.held__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 62%; }
.held__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--color-paper) 0%, color-mix(in oklch, var(--color-paper) 55%, transparent) 30%, transparent 62%), linear-gradient(to top, var(--color-paper) 0%, transparent 22%), linear-gradient(to bottom, var(--color-paper) 0%, transparent 14%); }
.held__text { align-self: center; }
.held h1 { font-size: var(--text-display); font-weight: 700; line-height: 0.96; letter-spacing: var(--tracking-display); max-width: 11ch; }
.held__satz { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 30ch; }
.held__aktionen { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-xl); }

.puls { margin: 0; }
.puls__linie { width: 100%; height: clamp(100px, min(16vw, 20svh), 220px); }
.puls__linie--schmal { display: none; }
.puls__linie path { fill: none; stroke: var(--color-ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: puls-auf 0.8s var(--ease-out) both; }
@keyframes puls-auf { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .puls__linie path { animation: none; } }
.puls__achse { display: flex; justify-content: space-between; margin-top: var(--space-sm); padding-inline: var(--gutter); }
.puls__marke { display: flex; align-items: baseline; gap: var(--space-xs); }
.puls__marke--rechts { text-align: right; }
.puls__stil { font-weight: 600; font-size: var(--text-md); }
.puls__bpm { color: var(--color-ink-2); font-size: var(--text-md); }

/* Orte */
.orte { margin-top: var(--section-gap); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.orte__bild { grid-column: 1 / -1; margin: 0; }
.orte__bild img { aspect-ratio: 2 / 1; object-fit: cover; width: 100%; }
.orte h2 { grid-column: 1 / span 6; }
.orte__text { grid-column: 8 / span 5; color: var(--color-ink-2); font-size: var(--text-lead); }
figure figcaption { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.orte__bild img, .person img { border-radius: min(1vw, var(--radius-card)); outline: 1px solid color-mix(in oklch, var(--color-ink) 8%, transparent); outline-offset: -1px; }

/* Person */
.person { margin-top: var(--section-gap-l); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.person__bild { grid-column: 8 / span 5; grid-row: 1; margin: 0; }
.person__bild img { aspect-ratio: 5 / 6; object-fit: cover; object-position: 50% 30%; width: 100%; }
.person__text { grid-column: 1 / span 6; grid-row: 1; display: grid; gap: var(--space-lg); }
.person__text p { color: var(--color-ink-2); font-size: var(--text-lead); }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Instagram */
.insta { margin-top: var(--section-gap-l); padding-block: var(--space-3xl) 0; }
.insta--feed { background: var(--color-paper-2); padding-block: var(--space-4xl); }
.insta__innen { display: grid; gap: var(--space-lg); }
.insta h2 { font-size: var(--text-display); max-width: none; line-height: 1.05; }
.insta h2 a { text-decoration: none; }
.insta h2 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em; }
.insta p { color: var(--color-ink-2); font-size: var(--text-lead); }
.insta__beitraege { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.insta__beitrag { position: relative; display: block; border-radius: min(1vw, var(--radius-card)); overflow: hidden; outline: 1px solid color-mix(in oklch, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.insta__beitrag img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; transition: opacity var(--dur-short) var(--ease-out); }
.insta__beitrag:hover img { opacity: 0.82; }
.insta__beitrag:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.insta__art { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 24px; height: 24px; fill: none; stroke: var(--color-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px color-mix(in oklch, var(--color-paper) 60%, transparent)); }

/* Anfrage */
.anfrage { margin-block: var(--section-gap) var(--section-gap-s); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.anfrage__kopf { grid-column: 1 / span 4; display: grid; gap: var(--space-lg); align-content: start; align-self: start; position: sticky; top: var(--space-2xl); }
.anfrage__kopf p { color: var(--color-ink-2); }
.formular { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
.feld--halb { grid-column: span 3; }
.feld--drittel { grid-column: span 2; }
.feld { display: grid; gap: var(--space-xs); min-width: 0; }
.feld--breit, .formular__fuss { grid-column: 1 / -1; }
.feld--falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feld label { color: var(--color-ink-2); font-size: var(--text-sm); }
.feld input, .feld textarea { min-height: 52px; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); color: var(--color-ink); border: 1px solid var(--color-muted); border-radius: var(--radius-card); font-size: var(--text-md); color-scheme: dark; }
.feld textarea { resize: vertical; }
.feld input:hover, .feld textarea:hover { border-color: var(--color-ink-2); }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.feld [aria-invalid="true"] { border-color: var(--color-error); }
.feld input:disabled, .feld textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.formular__datenschutz { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--text-sm); max-width: 60ch; }
.formular__datenschutz a { color: var(--color-ink-2); }
.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xs); }
.formular__hinweis { min-height: 1lh; color: var(--color-ink-2); }

/* Fuß */
.fuss { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-2xl); }
.fuss__innen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.fuss .logo { grid-column: 1 / span 3; }
.fuss__adresse { grid-column: 6 / span 4; font-style: normal; color: var(--color-ink-2); }
.fuss__links { grid-column: 10 / span 3; display: grid; gap: var(--space-xs); justify-items: start; }
.fuss a { color: var(--color-ink-2); }
.fuss a:hover { color: var(--color-ink); }

/* Impressum und Datenschutz */
.recht { padding-block: var(--space-3xl) var(--section-gap-s); display: grid; gap: var(--space-lg); justify-items: start; }
.recht > * { max-width: 65ch; }
.recht p { line-height: 1.7; }
.recht h1 { font-size: var(--text-section); font-weight: 700; line-height: 1.02; margin-bottom: var(--space-lg); }
.recht h2 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; margin-top: var(--space-lg); max-width: none; }
.recht p { color: var(--color-ink-2); }
.recht__stand { margin-top: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }

@media (max-width: 60rem) {
  .orte h2, .orte__text, .person__bild, .person__text, .anfrage__kopf, .formular { grid-column: 1 / -1; }
  .person__bild, .person__text { grid-row: auto; }
  .fuss .logo, .fuss__adresse, .fuss__links { grid-column: 1 / -1; }
  .kopf__links { gap: var(--space-lg); }
}
@media (max-width: 40rem) {
  .held { padding-top: 0; min-height: 0; grid-template-rows: auto auto auto; }
  .held__bild { position: relative; inset: auto; bottom: auto; width: 100%; aspect-ratio: 1; margin-bottom: calc(-1 * var(--space-3xl)); }
  .held__bild::after { background: linear-gradient(to top, var(--color-paper) 0%, transparent 45%); }
  .held__text { grid-row: auto; }
  .formular { grid-template-columns: minmax(0, 1fr); }
  .feld--halb, .feld--drittel { grid-column: 1 / -1; }
  .anfrage__kopf { position: static; }
  .held__bild figcaption { right: var(--space-md); bottom: var(--space-3xl); }
  .insta { padding-block: var(--space-2xl) 0; }
  .puls__linie--breit { display: none; }
  .puls__linie--schmal { display: block; }
  .insta__beitraege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .held__aktionen { gap: var(--space-md) var(--space-lg); }
}