/*
 * Startseite und 404 von mockup.niclex.de. Token aus dem Niclex Design System,
 * wie in Webapps/Niclex-Website/app/globals.css: neutrale Bühne, Wortmarke,
 * Marken-Verlauf genau einmal. Schriften liegen selbst hier, damit kein Aufruf
 * an Google geht.
 */
@font-face {
  font-family: "Archivo Black";
  src: url("/schrift/archivo-black-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/schrift/archivo-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/schrift/archivo-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --nic-rot: #ff4d5e;
  --lex-blau: #4d7cff;
  --verlauf-marke: linear-gradient(90deg, #ff4d5e, #4d7cff);
  --buehne-neutral: #0b0a10;
  --bg-buehne-neutral: linear-gradient(115deg, #101018, #0b0a10 60%, #0d0b12);
  --text-1: #ffffff;
  --text-2: rgba(255, 255, 255, 0.72);
  --text-3: rgba(255, 255, 255, 0.48);
  --glas: rgba(255, 255, 255, 0.08);
  --glas-rand: rgba(255, 255, 255, 0.18);
  --ease-tv: cubic-bezier(0.22, 1, 0.36, 1);
  --staffel: 120ms;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--buehne-neutral);
  background-image: var(--bg-buehne-neutral);
  background-attachment: fixed;
  color: var(--text-1);
  font-family: "Archivo", system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 18vh 16px 48px;
}

.wortmarke {
  margin: 0 0 32px;
  font-family: "Archivo Black", "Archivo", sans-serif;
  font-size: 28px;
  letter-spacing: 0.04em;
}
.wortmarke .nic {
  color: var(--nic-rot);
  text-shadow: 0 0 24px rgba(255, 77, 94, 0.55);
}
.wortmarke .lex {
  color: var(--lex-blau);
  text-shadow: 0 0 24px rgba(77, 124, 255, 0.55);
}

h1 {
  margin: 0;
  font-family: "Archivo Black", "Archivo", sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 7vw, 52px);
  line-height: 1.08;
}

.linie {
  width: 72px;
  height: 4px;
  margin: 24px 0;
  border-radius: 999px;
  background: var(--verlauf-marke);
}

p {
  margin: 0 0 16px;
  color: var(--text-2);
  font-size: 18px;
}

a {
  color: var(--text-1);
}

.pille {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 22px;
  border: 1px solid var(--glas-rand);
  border-radius: 999px;
  background: var(--glas);
  font-weight: 700;
  text-decoration: none;
  transition: border-color 180ms var(--ease-tv), background 180ms var(--ease-tv);
}
.pille:hover,
.pille:focus-visible {
  border-color: var(--lex-blau);
  background: rgba(77, 124, 255, 0.16);
}

footer {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}
footer a {
  color: var(--text-3);
}

@keyframes auftritt {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
main > * {
  animation: auftritt 420ms var(--ease-tv) both;
}
main > :nth-child(2) {
  animation-delay: var(--staffel);
}
main > :nth-child(3) {
  animation-delay: calc(2 * var(--staffel));
}
main > :nth-child(n + 4) {
  animation-delay: calc(3 * var(--staffel));
}

@media (prefers-reduced-motion: reduce) {
  main > * {
    animation: none;
  }
}