/* PURPLERHINO REAL ESTATE — Onepager
   Startseite unverändert aus dem Design-Prototyp (Entwurf 2a "Splitter").
   Unterseiten überarbeitet: die Szene tritt hinter Inhalt zurück, statt mit ihm
   um dieselbe Fläche zu konkurrieren.
   Alle cqw-Einheiten beziehen sich auf .viewport (container-type:inline-size),
   das im echten Build die Fensterbreite ist — im Prototyp war es der 1440/390er Rahmen. */

/* ---------- Fonts ---------- */

/* Archivo — Grotesk mit fester Statik, trägt Überschriften und Fließtext.
   Variabel 400–700, damit eine Datei den ganzen Gewichtsbereich abdeckt. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/archivo-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono — ausschliesslich für Kleindaten: Navigation, Marken, Register-
   angaben. Nie für Fliesstext, nie als Überschrift. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Basis ---------- */

:root {
  --ink: #0b0819;

  --text: #f3eefa;
  --text-bright: #f4f0fa;
  --text-soft: #e2dbf0;
  /* Kleindaten stehen auf 10–12px; die beiden Stufen sind gegenüber dem Prototyp
     angehoben, damit sie auch über der Szene 4.5:1 halten. */
  --text-muted: #b6acd2;
  --text-dim: #a094c4;

  --lilac: #a294c4;
  --lilac-bright: #d5cbe8;
  --magenta: #ab1473;
  --pink: #f0b8dd;
  --rule: rgba(199, 155, 214, 0.2);
  --rule-soft: rgba(199, 155, 214, 0.12);

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ruhige, exponentielle Verzögerung — kein Überschwingen. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --z-backdrop: 0;
  --z-page: 5;
  --z-header: 10;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--pink);
}

/* Ohne Tap-Rückmeldung fühlt sich ein Link auf dem Touchgerät unbestätigt an —
   dort gibt es keinen Hover, der den Treffer vorher quittiert. */
a:active {
  opacity: 0.7;
}

:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

::selection {
  background: var(--magenta);
  color: #fff;
}

img {
  max-width: 100%;
}

/* ---------- Rahmen ---------- */

.viewport {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  container-type: inline-size;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
}

/* Die drei Hintergrundebenen: Schein, Szene, Abdunklung darüber.
   Sie liegen ausserhalb von <main>, damit die Animation beim Seitenwechsel
   ohne Neustart weiterläuft. */
.backdrop {
  position: absolute;
  inset: 0;
  z-index: var(--z-backdrop);
}

.backdrop__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    46% 46% at 50% 46%,
    rgba(93, 27, 111, 0.5) 0%,
    rgba(11, 8, 25, 0) 70%
  );
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}

.backdrop__scene {
  position: absolute;
  inset: 0;
  display: block;
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}

.backdrop__scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.backdrop__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    50% 50% at 50% 48%,
    rgba(11, 8, 25, 0.88) 0%,
    rgba(11, 8, 25, 0.58) 46%,
    rgba(11, 8, 25, 0.05) 82%
  );
  transition: opacity 900ms var(--ease-out);
}

/* Textseiten: die Szene bleibt mittig wie auf der Startseite, tritt aber
   zurück — kleiner und gedimmt.
   :has() greift auf <main>, das der Router austauscht; der Übergang läuft
   deshalb beim Seitenwechsel von selbst. */
.viewport:has(> .page--text) .backdrop__scene {
  opacity: 0.55;
  transform: scale(0.94);
}

.viewport:has(> .page--text) .backdrop__glow {
  opacity: 0.6;
}

/* Derselbe Aufbau wie auf der Startseite, nur kräftiger: tiefer Grund in der
   Mitte, wo der Inhalt steht, Szene nach aussen hin sichtbar. Ersetzt die
   früheren Verläufe auf den einzelnen Seiten.

   Die Deckung im Kern ist bewusst nicht höher als 0.9 — darüber verschwindet
   die Szene ganz, und der Hintergrund ist dann nur noch dunkelgrau. Bei 0.9
   bleibt der schwächste Textton über dem hellsten Splitter bei 6.0:1 —
   nachgerechnet, nicht geschätzt. */
.viewport:has(> .page--text) .backdrop__veil {
  background: radial-gradient(
    82% 82% at 50% 48%,
    rgba(11, 8, 25, 0.9) 0%,
    rgba(11, 8, 25, 0.87) 48%,
    rgba(11, 8, 25, 0.62) 80%,
    rgba(11, 8, 25, 0.3) 100%
  );
}

/* ---------- Header ---------- */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: clamp(16px, 2cqw, 30px) clamp(20px, 4cqw, 56px);
}

.site-header__brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--mono);
  font-size: clamp(10px, 0.9cqw, 11px);
  letter-spacing: 0.2em;
  color: var(--lilac);
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2cqw, 30px);
  font-family: var(--mono);
  font-size: clamp(10px, 0.9cqw, 11px);
  letter-spacing: 0.16em;
  color: var(--lilac-bright);
  text-transform: uppercase;
}

.site-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  transition: color 260ms var(--ease-out);
}

/* Aktive Seite — im Prototyp gab es nur eine Ansicht, echte Unterseiten
   brauchen eine Markierung. Strich statt nur Farbe: die Markierung darf nicht
   allein über Farbe laufen. */
.site-nav a[aria-current="page"] {
  color: var(--pink);
}

.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11px;
  height: 1px;
  background: currentColor;
}

/* ---------- Seiten ---------- */

.page {
  position: absolute;
  inset: 0;
  z-index: var(--z-page);
  display: flex;
  flex-direction: column;
}

/* Inhalt kann auf kleinen/niedrigen Fenstern länger sein als der Rahmen:
   innerhalb der Seite scrollen, aber nie den oberen Rand abschneiden. */
.page--text {
  --column: 100%;

  justify-content: flex-start;
  /* Die Spalte steht mittig, der Text darin bleibt linksbündig — zentrierter
     Fliesstext wäre auf einer Unternehmensseite unlesbar. */
  align-items: center;
  gap: clamp(24px, 2.9cqw, 44px);
  padding: clamp(92px, 12.5vh, 146px) clamp(22px, 4cqw, 64px)
    clamp(34px, 4cqw, 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Ab Tabletbreite hält der Inhalt eine feste Spaltenbreite; links und rechts
   daneben bleibt die gedimmte Szene sichtbar. */
@container (min-width: 900px) {
  .page--text {
    --column: min(1080px, 86cqw);
  }
}

/* Blöcke behalten ihre natürliche Höhe — sonst quetscht der Flexcontainer sie
   auf niedrigen Fenstern zusammen, statt die Seite scrollen zu lassen. */
.page--text > *,
.hero > * {
  flex-shrink: 0;
}

.page--text > * {
  width: 100%;
  max-width: var(--column);
}

.page:focus {
  outline: none;
}

/* ---------- Start (unverändert) ---------- */

.hero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  gap: clamp(24px, 3.2cqw, 42px);
  padding: clamp(80px, 10cqw, 130px) clamp(22px, 4cqw, 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hero__logo {
  width: clamp(250px, 38cqw, 540px);
  height: auto;
  /* verhindert, dass das Logo auf flachen Fenstern aus dem Rahmen wächst */
  max-height: 46vh;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 22px 70px rgba(6, 3, 18, 0.92));
}

.hero__claim {
  margin: 0;
  font-size: clamp(26px, 3.2cqw, 46px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--text-bright);
  text-align: center;
  text-shadow: 0 6px 40px rgba(11, 8, 25, 0.9);
  text-wrap: balance;
}

.hero__keywords {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(10px, 0.92cqw, 12px);
  line-height: 2;
  letter-spacing: 0.3em;
  color: var(--text-soft);
  text-transform: uppercase;
  text-align: center;
}

.hero__footnote {
  position: absolute;
  bottom: clamp(18px, 2.2cqw, 30px);
  left: 0;
  right: 0;
  z-index: var(--z-page);
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* ---------- Typografische Bausteine ---------- */

/* Trägt die Spaltenbreite; die Überschrift darin begrenzt ihr eigenes Mass. */
.page-head {
  display: block;
}

.page-title {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(32px, 4.6cqw, 62px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--text-bright);
  text-wrap: balance;
}

.page-title--imprint {
  max-width: 22ch;
  font-size: clamp(28px, 3.8cqw, 54px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* Kleindaten: Marken, Register, Ortsangaben. */
.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.8cqw, 52px);
}

.lead {
  flex: 1 1 340px;
  margin: 0;
  max-width: 46ch;
  font-size: clamp(17px, 1.55cqw, 23px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--text-soft);
  text-wrap: pretty;
}

.copy {
  flex: 1 1 300px;
  margin: 0;
  max-width: 58ch;
  font-size: clamp(14px, 1.15cqw, 16px);
  line-height: 1.72;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---------- Unternehmen: die Kette ---------- */

/* Vier Schritte als Folge, nicht als vier gleichwertige Kacheln: eine Linie
   läuft durch, jeder Schritt setzt eine Marke darauf. Der letzte Schritt ist
   die These des Hauses und darum farbig abgesetzt. */
.chain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(20px, 2.4cqw, 40px) clamp(18px, 2.2cqw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.chain__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: clamp(18px, 1.8cqw, 26px);
}

/* Die Marke auf der Linie. */
.chain__step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(28px, 3cqw, 44px);
  height: 2px;
  background: var(--lilac);
}

.chain__step h2 {
  margin: 0;
  font-size: clamp(17px, 1.5cqw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.chain__step p {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(14px, 1.05cqw, 15px);
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}

.chain__step--hold::before {
  background: var(--pink);
  height: 3px;
}

.chain__step--hold h2 {
  color: var(--pink);
}

/* ---------- Bildbänder ---------- */

.band {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.band__img {
  display: block;
  width: 100%;
  height: clamp(140px, 16cqw, 198px);
  object-fit: cover;
  /* Der Grund ist sehr tief. Ein Foto mit hartem Beschnitt steht darauf als
     Fremdkörper, deshalb löst sich die Unterkante in den Seitengrund auf und
     die Helligkeit ist leicht zurückgenommen. */
  filter: brightness(0.88) saturate(0.88) contrast(1.05);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 74%,
    rgba(0, 0, 0, 0.6) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 74%,
    rgba(0, 0, 0, 0.6) 90%,
    rgba(0, 0, 0, 0) 100%
  );
}

.band__caption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.16em;
  color: var(--lilac);
  text-transform: uppercase;
}

.band__caption .credit {
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

/* ---------- Karriere ---------- */

/* Auf der Karriere-Seite ist das Foto Beiwerk — die Stellenliste ist der
   Inhalt. Es bleibt deshalb flacher als das Gebäudeband auf der
   Unternehmen-Seite, damit die Seite in einen Bildschirm passt. */
.page--karriere .band__img {
  height: clamp(130px, 14cqw, 190px);
}

.career-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(16px, 2.4cqw, 44px);
}

.career-head__title {
  flex: 1 1 360px;
}

.career-head__intro {
  flex: 1 1 300px;
  margin: 0;
  max-width: 46ch;
  font-size: clamp(14px, 1.15cqw, 16px);
  line-height: 1.72;
  color: var(--text-muted);
  text-wrap: pretty;
}

.jobs {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

/* gilt für <li> wie für <a class="job">, sobald es Stellen-Detailseiten gibt */
.job {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 20px;
  min-height: 56px;
  padding: clamp(13px, 1.3cqw, 18px) 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: clamp(16px, 1.5cqw, 21px);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--text);
}

.job__meta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
  white-space: nowrap;
}

.career-foot {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.6cqw, 48px);
  padding-top: clamp(2px, 0.6cqw, 8px);
}

.career-foot__block {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.career-foot__block h2 {
  margin: 0;
  font-size: clamp(16px, 1.4cqw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.career-foot__block p {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(14px, 1.1cqw, 15px);
  line-height: 1.7;
  color: var(--text-muted);
  text-wrap: pretty;
}

.career-foot__contact {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: flex-start;
  padding-left: clamp(0px, 1.6cqw, 28px);
  border-left: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: clamp(11px, 0.92cqw, 12px);
  line-height: 1.9;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Kontaktdaten im Fliesstext sind anklickbar, nicht zum Abtippen. */
.inline-link {
  border-bottom: 1px solid var(--rule);
  transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}

.inline-link:hover {
  border-bottom-color: currentColor;
}

/* Die Bewerbungsadresse ist die einzige Handlung der Karriere-Seite — sie ist
   ein echter Link, kein Text zum Abtippen. */
.mail-link {
  align-self: flex-start;
  margin-top: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  color: var(--pink);
  text-transform: none;
  letter-spacing: 0.08em;
  transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}

.mail-link:hover {
  color: var(--text-bright);
}

/* Textlinks sind nur so hoch wie ihre Zeile — mit dem Finger zu wenig. Die
   Trefferfläche wächst über ein Pseudoelement, damit das Layout unberührt
   bleibt. Die Bewerbungsadresse steht allein und bekommt die vollen 44px;
   Telefon und E-Mail im Impressum stehen untereinander und werden nur so weit
   vergrössert, dass sich ihre Flächen nicht überlappen. */
@media (pointer: coarse) {
  .mail-link,
  .inline-link {
    position: relative;
  }

  .mail-link::after,
  .inline-link::after {
    content: "";
    position: absolute;
    inset: -6px -4px;
  }

  .mail-link::after {
    inset: -12px -6px;
  }
}

/* ---------- Impressum ---------- */

/* Das Impressum ist kurz. Oben angeschlagen liesse es zwei Drittel des
   Bildschirms leer, deshalb sitzt es mittig — und die vier Angaben stehen
   im 2×2 statt drei nebeneinander und eine allein darunter. */
.page--impressum {
  justify-content: safe center;
}

.imprint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(22px, 2.6cqw, 40px) clamp(22px, 3cqw, 56px);
}

@container (min-width: 700px) {
  .imprint-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.imprint-grid__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.imprint-grid__item p {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(14px, 1.15cqw, 16px);
  line-height: 1.75;
  color: var(--text-soft);
}

/* Registerangaben sind Datensätze, keine Prosa — die Ziffernbreite der
   Monospace hält Nummern und Zeilen in Flucht. */
.imprint-grid__item--record p {
  font-family: var(--mono);
  font-size: clamp(13px, 1cqw, 13.5px);
  line-height: 1.95;
  letter-spacing: 0.04em;
}

.imprint-grid--legal {
  border-top: 1px solid var(--rule);
  padding-top: clamp(18px, 2.2cqw, 32px);
}

.imprint-grid--legal .imprint-grid__item p {
  max-width: 56ch;
  font-size: clamp(14px, 1.05cqw, 15px);
  line-height: 1.72;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---------- Mobil ---------- */

/* Unter ~480px passen Firmenname und vier Navigationspunkte nicht in eine
   Zeile. Der Name bleibt stehen — er ist die Marke, nicht bloss ein zweiter Weg
   zur Startseite —, die Navigation rutscht darunter und verteilt sich über die
   volle Breite. */
@container (max-width: 479px) {
  .site-header {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .site-header__brand {
    min-height: 34px;
  }

  .site-nav {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    letter-spacing: 0.1em;
  }

  /* Der zweizeilige Header ist höher als der einzeilige — der Inhalt muss
     entsprechend tiefer anfangen, sonst schiebt er sich darunter. */
  .page--text {
    padding-top: clamp(120px, 16vh, 156px);
  }
}

/* Auf schmalen Geräten trägt der Inhalt die ganze Breite; die Szene läuft
   ungerückt dahinter, gedimmt bleibt sie trotzdem. */
@container (max-width: 899px) {
  .viewport:has(> .page--text) .backdrop__scene {
    opacity: 0.26;
    transform: none;
  }

  .viewport:has(> .page--text) .backdrop__glow {
    transform: none;
  }

  .viewport:has(> .page--text) .backdrop__veil {
    background: linear-gradient(
      180deg,
      rgba(11, 8, 25, 0.96) 0%,
      rgba(11, 8, 25, 0.94) 100%
    );
  }

  .career-foot__contact {
    padding-left: 0;
    border-left: 0;
  }
}

/* Schmal reicht die Zeile nicht für Titel und Ortsangabe nebeneinander. Ohne
   feste Regel bricht mal die eine und mal die andere um, und die Liste franst
   aus — deshalb steht die Ortsangabe hier grundsätzlich darunter. */
@container (max-width: 599px) {
  .job {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}

@media (max-height: 640px) {
  .hero {
    gap: clamp(16px, 2.4cqw, 28px);
    padding-top: clamp(64px, 8cqw, 100px);
    padding-bottom: clamp(48px, 6cqw, 80px);
  }

  .hero__logo {
    max-height: 38vh;
  }

  .page--text {
    padding-top: clamp(84px, 12vh, 120px);
    gap: clamp(20px, 2.6cqw, 34px);
  }
}

/* ---------- Bewegung ---------- */

/* Der Router tauscht nur <main> aus. Die Blöcke der neuen Seite laufen gestaffelt
   ein — kurz, ohne Überschwingen, passend zum Zurücktreten der Szene.
   `both` sorgt dafür, dass bei ausgeschalteter Bewegung sofort der Endzustand
   steht, statt dass der Inhalt unsichtbar bleibt. */
@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page--text > * {
  animation: page-enter 620ms var(--ease-out) both;
}

.page--text > *:nth-child(2) {
  animation-delay: 70ms;
}
.page--text > *:nth-child(3) {
  animation-delay: 140ms;
}
.page--text > *:nth-child(4) {
  animation-delay: 200ms;
}
.page--text > *:nth-child(n + 5) {
  animation-delay: 250ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Druck ---------- */

/* Das Impressum wird ausgedruckt oder als PDF abgelegt — Anbieterkennzeichnung
   ist ein Dokument. Ohne diesen Block käme eine einzelne, abgeschnittene Seite
   mit hellem Text auf Weiss heraus, weil der Rahmen 100dvh hoch ist und
   html/body auf overflow:hidden stehen.

   Die Farbtoken werden für den Druck neu belegt, statt Dutzende Regeln zu
   überschreiben — genau dafür sind Token da. */
@media print {
  :root {
    --ink: #fff;
    --text: #111;
    --text-bright: #000;
    --text-soft: #1a1a1a;
    --text-muted: #333;
    --text-dim: #555;
    --lilac: #555;
    --lilac-bright: #222;
    --pink: #000;
    --rule: rgba(0, 0, 0, 0.3);
    --rule-soft: rgba(0, 0, 0, 0.18);
  }

  html,
  body {
    height: auto;
    overflow: visible;
  }

  .viewport {
    height: auto;
    overflow: visible;
    container-type: normal;
  }

  /* Die Szene ist Bildschirmatmosphäre und hat auf Papier nichts zu suchen. */
  .backdrop {
    display: none;
  }

  .page {
    position: static;
    display: block;
  }

  .page--text,
  .hero {
    padding: 0;
    overflow: visible;
  }

  .page--text > * {
    max-width: none;
    animation: none;
    margin-bottom: 20px;
  }

  .site-header {
    position: static;
    padding: 0 0 24px;
  }

  /* Die Navigation ist auf Papier ein toter Link. */
  .site-nav {
    display: none;
  }

  .hero__logo {
    filter: none;
  }

  .hero__claim {
    text-shadow: none;
  }

  .hero__footnote {
    position: static;
  }

  .band__img {
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  a {
    text-decoration: underline;
  }

  /* Die Wortmarke ist zwar ein Link, auf Papier aber ein Briefkopf. */
  .site-header__brand {
    text-decoration: none;
  }
}