/* base.css — Reset, Grundtypografie, Schrifteinbindung, Hintergrund-Glow und Seitenwechsel.
   Keine Custom-Property-Definition hier; die stehen in tokens.css. */

/* Inter liegt lokal unter public/fonts/ und wird nicht von Google Fonts geladen.
   Die CSP kommt damit mit `font-src 'self'` aus. Lizenz: SIL Open Font License 1.1,
   siehe public/fonts/LICENSE-Inter.txt. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400.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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-600.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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-latin-700.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;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.6;
  font-size: 16px;
}

/* Hintergrund-Glow: zwei weiche Lichtflecken, violett oben links und cyan unten rechts, wie
   in der Hauptgrafik. Sie atmen langsam (--glow-puls); animiert werden nur opacity und
   transform, das läuft auf der GPU und kostet auch auf dem Handy kaum. z-index: -1 legt sie
   über die Leinwand, die den body-Hintergrund trägt, und unter jeden Inhalt. */
body::before,
body::after {
  content: '';
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  opacity: var(--glow-staerke);
  animation: glow-atmen var(--glow-puls) ease-in-out infinite alternate;
}

body::before {
  top: -36vmax;
  left: -24vmax;
  width: 80vmax;
  height: 80vmax;
  background: radial-gradient(
    closest-side,
    var(--glow-violett),
    var(--glow-violett-rand) 55%,
    transparent
  );
}

body::after {
  right: -26vmax;
  bottom: -36vmax;
  width: 72vmax;
  height: 72vmax;
  background: radial-gradient(
    closest-side,
    var(--glow-cyan),
    var(--glow-cyan-rand) 55%,
    transparent
  );
  animation-delay: calc(var(--glow-puls) / -2);
}

@keyframes glow-atmen {
  from {
    opacity: calc(var(--glow-staerke) * 0.5);
    transform: scale(1);
  }

  to {
    opacity: var(--glow-staerke);
    transform: scale(1.08) translate3d(1.5vmax, 1vmax, 0);
  }
}

/* Überblenden zwischen Seiten: der Browser blendet die alte Seite aus und die neue ein, ganz
   ohne JavaScript. Browser ohne Unterstützung wechseln wie bisher ohne Übergang. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 160ms ease both ueberblenden-aus;
}

::view-transition-new(root) {
  animation: 260ms ease both ueberblenden-ein;
}

@keyframes ueberblenden-aus {
  to {
    opacity: 0;
  }
}

@keyframes ueberblenden-ein {
  from {
    opacity: 0;
  }
}

h1,
h2,
h3,
h4 {
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
}

h1 {
  font-size: 1.75rem;
}

h2 {
  font-size: 1.3rem;
}

h3 {
  font-size: 1.05rem;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Nur für Screenreader — u. a. der Sprunglink im Seitengerüst. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

  /* Die Regel oben erfasst weder die Überblend-Pseudoelemente noch Verzögerungen. Der Glow
     steht dann still in voller --glow-staerke, Seitenwechsel bleiben hart. */
  body::before,
  body::after {
    animation: none;
  }

  @view-transition {
    navigation: none;
  }
}