/* Hallmark · shape: one column, the customer's own address set large, then the one form or the three ways in · genre: modern-minimal · theme: custom · job: sign up · idea: "the page is the customer's address, everything else steps back" · vibe: "quiet, exact, a post office counter"
 * paper: oklch(97.5% 0.005 250) · accent: oklch(80% 0.15 75) · display: Onest · body: Onest · hero: the address as the headline over one line of lede · nav: none, a single-purpose page · footer: one sentence on what happens with the password, imprint and privacy links · imagery: none · signature: their own address at display size
 * axes: light/grotesk-sans/chromatic-amber · posture: restrained, post yellow only on the primary button · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H5 E4 S4 R5 V4 · weakest: P, a password form has little to argue; kept it to the address, one form and plain words, nothing decorative */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Onest"; src: url("schriften/onest.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

body { font-synthesis: none; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; }
.seite { width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--space-3xl) var(--gutter) var(--space-2xl); }
h1 { font-size: var(--text-display); font-weight: 700; line-height: 1.08; letter-spacing: var(--tracking-display); max-width: 24ch; }
h1.adresse { overflow-wrap: break-word; max-width: none; }
h2 { font-size: var(--text-section); font-weight: 600; line-height: 1.3; }
.zustand p { color: var(--color-ink-2); max-width: 60ch; }
.zustand > p { margin-top: var(--space-md); }
.lede { font-size: var(--text-lead); }
.still { color: var(--color-muted); }

.formular { margin-top: var(--space-xl); display: grid; gap: var(--space-lg); max-width: 28rem; }
.feld { display: grid; gap: var(--space-xs); }
.feld label { font-weight: 600; }
.feld input { min-height: 48px; padding: var(--space-sm) var(--space-md); font-size: var(--text-md); color: var(--color-ink); background: var(--color-paper); border: 1px solid var(--color-muted); border-radius: var(--radius-card); }
.feld input:hover { border-color: var(--color-ink-2); }
.feld input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.feld input[aria-invalid="true"] { border-color: var(--color-error); }
.hilfe { color: var(--color-muted); font-size: var(--text-sm); }
.zeigen { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-ink-2); }
.zeigen input { width: 18px; height: 18px; accent-color: var(--color-ink); }
.zeigen input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fuss { display: grid; gap: var(--space-sm); justify-items: start; }
.meldung { min-height: 1lh; color: var(--color-ink-2); }

.knopf { display: inline-flex; align-items: center; min-height: 48px; 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), background-color var(--dur-micro) var(--ease-out); }
.knopf:hover { background: color-mix(in oklch, var(--color-accent) 88%, var(--color-ink)); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: 0.55; cursor: not-allowed; }
.knopf:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.knopf--hell { background: var(--color-paper); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-muted); }
.knopf--hell:hover { background: var(--color-paper-2); }

.weg { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-sm); }
.weg p { margin: 0; }
.daten { margin: var(--space-xs) 0 0; display: grid; gap: var(--space-sm); }
.daten > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-md); }
.daten dt { font-weight: 600; color: var(--color-ink); }
.daten dd { margin: 0; color: var(--color-ink-2); overflow-wrap: break-word; min-width: 0; }
.zustand > .still:last-child { margin-top: var(--space-2xl); }

.abspann { width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--space-lg) var(--gutter) var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-lg); }
.abspann nav { display: flex; gap: var(--space-lg); }
.abspann a { color: var(--color-ink-2); }
.abspann a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (max-width: 40rem) {
  .seite { padding-top: var(--space-2xl); }
  .daten > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}