/* Teaser daybuilt.de: nur Formregeln. Alle Farben, Größen und Radien kommen aus packages/brand (tokens.css, site.css). */
@font-face { font-family: "Archivo"; src: url("fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

a { color: inherit; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.brand svg { width: var(--s-6); height: var(--s-6); color: var(--acc); flex: none; }
.wm { font-family: var(--font-display); font-stretch: var(--font-stretch-label); font-weight: 600; font-size: var(--fs-site-h3); letter-spacing: 0.145em; }
.foot { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); font-size: var(--fs-md); color: var(--ink-2); }
.foot a { text-underline-offset: 3px; }

/* Startseite: ein Bildschirm, Foto vollflächig, Inhalt unten links. */
.stage { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; }
.stage > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--canvas) 62%, transparent) 0%,
    transparent 24%,
    color-mix(in oklch, var(--canvas) 30%, transparent) 50%,
    color-mix(in oklch, var(--canvas) 95%, transparent) 100%);
}
.stage header, .stage main, .stage footer { width: 100%; }
.stage header { padding-block: var(--s-6); }
.stage main { margin-top: auto; padding-block: var(--s-10) var(--s-8); display: grid; gap: var(--s-6); }
.stage .cap { color: var(--acc); text-shadow: 0 1px 14px var(--canvas); }
.stage h1 { max-width: 13ch; }
.next { display: grid; gap: var(--s-1); max-width: 44ch; }
.next strong { font-family: var(--font-display); font-stretch: var(--font-stretch-heading); font-weight: 600; font-size: var(--fs-site-h3); color: var(--hi); }
.next span { color: var(--ink-2); }
.stage footer { padding-block: 0 max(var(--s-6), env(safe-area-inset-bottom, 0px)); }

/* Die eine bewegte Idee: langsamer Zoom auf das Foto. */
@media (prefers-reduced-motion: no-preference) {
  .stage > img { animation: push 9s var(--ease) both; }
  @keyframes push { from { transform: scale(1.06); } to { transform: none; } }
}

/* Rechtstexte */
.top { padding-block: var(--s-6); }
.legal { padding-block: var(--s-6) var(--s-10); display: grid; gap: var(--s-10); }
.legal article { display: grid; gap: var(--s-4); max-width: 68ch; }
.legal h2 { margin-top: var(--s-6); }
.legal h3 { margin-top: var(--s-4); }
.legal p { color: var(--ink-2); }
.legal ul { margin: 0; padding-left: var(--s-5); color: var(--ink-2); }
.legal .todo { color: var(--warn); font-weight: 600; }