@font-face {
  font-family: "ALT Picaro";
  src: url("../fonts/ALTPicaro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  /* Ring erst zeigen, wenn die Schrift da ist: keine Ersatzschrift aufblitzen lassen */
  font-display: block;
}

:root {
  --gold: #716b47;
  --blue: #00065c;
  --bg: var(--gold);
  --ink: var(--blue);
  --side: #3b43a8; /* Seitenflächen der Buchstaben, wird in ring.js beigemischt */
  --glint: #7c86ff; /* Licht auf dem Grat an der Vorderkante */
}

/* Dark Mode: Farben getauscht, Blau als Fläche, Gold für die Schrift */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--blue);
    --ink: var(--gold);
    --side: #b8ae78;
    --glint: #f3e7ae;
  }
}

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

body {
  background: var(--bg);
  overflow: hidden;
  transition: background-color 0.9s ease; /* Intro: Weiss zur Grundfarbe, gleich lang wie INTRO_FADE in ring.js */
}

/* Intro: die Seite startet weiss, der Absender kommt erst, wenn der erste Begriff eingelettert ist.
   Die Klassen setzt index.html, ring.js nimmt sie im Ablauf wieder weg. */
.intro body {
  background: #fff;
}

.intro-wait .contact {
  opacity: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Ganzer Bildschirm, damit Maus und Finger überall greifen */
.ring {
  position: fixed;
  inset: 0;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.ring.is-dragging {
  cursor: grabbing;
}

.ring.is-ready {
  opacity: 1;
}

/* Jeder Buchstabe hat eine eigene Kamera in der Ringmitte (waagrecht mittig, Höhe aus ring.js: --ring-y). So kann jeder einzeln
   unscharf werden (filter), ohne dass sein 3D-Körper flachgedrückt wird. */
.slot {
  position: absolute;
  left: 50%;
  top: var(--ring-y, 50%);
  width: 0;
  height: 0;
  perspective-origin: 0 0;
  will-change: filter, opacity;
}

.glyph {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.glyph span {
  position: absolute;
  left: 0;
  top: 0;
  font-family: "ALT Picaro", serif;
  font-size: var(--size, 200px);
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Begriffe auf der Drehachse, ein Span pro Buchstabe. Ursprung oben links: die Lage kommt ganz aus ring.js. */
.phrase {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
  font-family: "ALT Picaro", serif;
  font-size: var(--phrase-size, 40px);
  line-height: 1;
  white-space: pre;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Feiner Grat an den Kanten der Ring-Buchstaben, die zum Licht zeigen (Lage aus ring.js) */
.glyph .grat {
  color: color-mix(in srgb, var(--ink), var(--glint) 50%);
}

/* Absender oben rechts, rechtsbündig, über dem Ring, immer in der Farbe des Rings (hell Blau, dunkel Gold) */
.contact {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 10;
  margin: 0;
  text-align: right;
  font: 400 18px/1.2 "ALT Picaro", sans-serif;
  font-style: normal;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  transition: opacity 0.6s ease;
}

.contact p {
  margin: 0;
}

/* Leerzeile zwischen Adresse und Telefon/E-Mail */
.contact p + p {
  margin-top: 1.2em;
}

.contact a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.contact a:hover,
.contact a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.fallback {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  font: 400 16vmin/1 "ALT Picaro", serif;
  color: var(--ink);
}