@font-face {
  font-family: 'Montserrat Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/media/06b16db7a969.woff2) format('woff2-variations');
  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;
}

/* Tokens wie src/styles/global.css (Kit vom 01.11.2026). */
:root {
  --ink: #0a0a0a;
  --white: #ffffff;
  --grau-200: #d9d9d9;
  --grau-300: #c5c5c4;
  --magenta: #b9186a;
  --rand: clamp(1.5rem, 5vw, 2.5rem);
  --kurve-weich: cubic-bezier(0.22, 1, 0.36, 1);
  --kurve-seite-ein: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--white);
  font-family: 'Montserrat Variable', 'Helvetica Neue', Arial, ui-sans-serif, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--magenta); color: var(--white); }
h1, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.seite {
  flex: 1;
  width: 100%;
  max-width: calc(85rem + 2 * var(--rand));
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 6rem) var(--rand) clamp(4rem, 10vw, 8rem);
}

/* Wortmarke groß, Seitenverhältnis aus der viewBox (2738 × 1005). */
.marke { display: block; width: clamp(12rem, 42vw, 36rem); }
.marke svg { display: block; width: 100%; height: auto; }

/* H1 in der Stufe h2 (40 bis 80 px), ExtraBold, Satzform, ausgewogen. */
h1 {
  margin-top: clamp(4rem, 10vw, 8rem);
  max-width: 22ch;
  font-size: clamp(2.5rem, 5.4vw, 5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-wrap: balance;
  hyphens: manual;
}

/* Absatz der Startseite in einleitung (19 px bei 320 px, 27 px ab
   1440 px, Medium, Zeilenhöhe 1,45) in grau-200 (14,0:1 auf ink),
   höchstens 38 em (bei 1440 px 1026 px, 66 und 64 Zeichen je Zeile; Ziel
   65 bis 75 wie die H1, Pascal 01.11.2026). */
.einleitung {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 38em;
  font-size: clamp(1.1875rem, 1.045rem + 0.714vw, 1.6875rem);
  line-height: 1.45;
  font-weight: 500;
  color: var(--grau-200);
  text-wrap: pretty;
}

/* Text der 404 in lead (18 bis 24 px), grau-300 (11,46:1 auf ink), wie
   auf der 404 der Seite. */
.text {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 40rem;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--grau-300);
  text-wrap: pretty;
}

/* Kontakt: Mail und Telefon wie auf /kontakt – plakat, ExtraBold, white,
   der Pixel am Link-Ende; Instagram und LinkedIn klein darunter. */
.kontakt { margin-top: clamp(3.5rem, 8vw, 6rem); display: flex; flex-direction: column; gap: 0.25rem; }
.gross {
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height: 1.25;
  font-weight: 800;
}
.social { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; font-weight: 600; color: var(--grau-300); }

.fuss {
  width: 100%;
  max-width: calc(85rem + 2 * var(--rand));
  margin-inline: auto;
  padding: 2rem var(--rand);
  font-size: 0.875rem;
  color: var(--grau-300);
}
.fuss ul { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }

/* Pixel am Link-Ende (pixel-ende): Hintergrund im rechten Innenabstand. */
.pixel-ende {
  padding-right: 0.75em;
  background: linear-gradient(var(--magenta), var(--magenta)) no-repeat right 0 bottom 0.25em / 0.45em 0.45em;
}

/* Links außerhalb von Sätzen (link-linie): bei Hover und Tastaturfokus
   wächst eine 1-px-Linie in magenta von links, der Text hellt auf. */
.link-linie { position: relative; transition: color 150ms ease-out; }
.link-linie::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -0.2em;
  height: 1px;
  background-color: var(--magenta);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--kurve-seite-ein);
}
.pixel-ende.link-linie::after { inset-inline-end: 0.75em; }
.link-linie:focus-visible { color: var(--white); }
.link-linie:focus-visible::after { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) {
  .link-linie:hover { color: var(--white); }
  .link-linie:hover::after { transform: scaleX(1); transform-origin: left; }
}

/* Link im Satz (link-satz): in Ruhe 1 px magenta unterstrichen, bei Hover
   und Fokus wächst die Linie zur Fläche, Text white. */
.link-satz {
  background-image: linear-gradient(var(--magenta), var(--magenta));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.3s var(--kurve-weich), box-shadow 0.1s ease-out, color 150ms ease-out;
}
.link-satz:focus-visible { color: var(--white); background-size: 100% 100%; box-shadow: -2px 0 0 var(--magenta), 2px 0 0 var(--magenta); }
@media (hover: hover) {
  .link-satz:hover { color: var(--white); background-size: 100% 100%; box-shadow: -2px 0 0 var(--magenta), 2px 0 0 var(--magenta); }
}

/* Der Pixel der Wortmarke blinkt beim Aufruf zweimal und steht dann
   (inhalte-de.md 0.1 Nr. 1, „erster Aufruf“; eine Seite, jeder Aufruf ist
   der erste). Takt 1 s, steps(1), 2 s – unter der Grenze von 5 s. */
/* Der Pixel als Cursor hinter der H1 der 404 (0.1 Nr. 5): an der Stelle
   des Schlusspunkts, fünf Takte, dann steht er. */
.pixel-cursor {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.3em;
  background-color: var(--magenta);
}
@media (forced-colors: active) {
  .pixel-cursor { forced-color-adjust: none; background-color: CanvasText; }
}
.nowrap { white-space: nowrap; }

@keyframes pixel-blinkt { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .cursor-blinkt { animation: pixel-blinkt 1s steps(1, end) 5; }
  .marke path[fill='#B9186A'] { animation: pixel-blinkt 1s steps(1, end) 2; }
}
@media (prefers-reduced-motion: reduce) {
  .link-linie, .link-linie::after, .link-satz { transition: none; }
}