/* =========================================================================
   EINLEITUNG – Gestaltung
   ========================================================================= */

/* Schrift lokal (dieselbe Datei wie in der Detailansicht der Map) */
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  src: url("../assets/schriften/IBMPlexMono-Regular.woff2") format("woff2");
}

/* zweite Schrift für Unterüberschriften und Text (wie in der Detailansicht) */
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-weight: 400;
  src: url("../assets/schriften/IBMPlexSansCondensed-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-weight: 600;
  src: url("../assets/schriften/IBMPlexSansCondensed-SemiBold.woff2") format("woff2");
}

/* ---------- Farben & Tempo (hier leicht anpassbar) ---------- */
:root {
  --hintergrund: #000000;
  --hinweis-farbe: #5a5a5a;      /* grau, leicht angedeutet */
  --titel-farbe: #ffffff;         /* weiß */
  --titel-einblenden: 2.4s;       /* wie langsam das Wort einblendet */
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--hintergrund);
  cursor: default;
}

#buehne canvas {
  display: block;
}

/* ---------- Hinweis "Press any key to start" ----------
   Pulsiert ganz leicht, damit man merkt, dass etwas passieren kann. */
#start-hinweis {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--hinweis-farbe);
  white-space: nowrap;
  user-select: none;
  animation: pulsieren 3.2s ease-in-out infinite;
  transition: opacity 0.4s ease;
}

@keyframes pulsieren {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* nach dem Tastendruck ausblenden */
#start-hinweis.weg {
  animation: none;
  opacity: 0;
}

/* ---------- Das Wort "Möglichkeitsfeld" in der Mitte ----------
   Schriftgröße setzt einleitung.js passend zum Loch in der Mitte. */
#einleitung-titel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.04em;        /* wie der Titel in der Detailansicht */
  line-height: 1.05;              /* Abstand zwischen den zwei Zeilen */
  text-align: center;             /* beide Zeilen mittig */
  color: var(--titel-farbe);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--titel-einblenden) ease-in-out;
}

#einleitung-titel.sichtbar {
  opacity: 1;
}


/* ---------- Beschriftung eines Parameters ----------
   Name (Unterüberschrift) + ganz kleiner Erklärtext darunter.
   einleitung.js setzt left/top auf das linke Ende des Strichs. Der Block
   endet rechts kurz vor dem Strich (translate −100 %) und der Name sitzt
   mittig auf der Strichhöhe. */
.beschriftung {
  position: fixed;
  width: 310px;                   /* etwas breiter, seit die Schrift größer ist */
  transform: translate(calc(-100% - 16px), -0.65em);
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  font-size: 33px;                /* Größe des Namens (23.09.2026: war 26 px) */
  line-height: 1.3;
  color: #ffffff;
  text-align: right;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.beschriftung.sichtbar {
  opacity: 1;
  transition-delay: 0.3s;         /* erst wenn der Strich schon ein Stück da ist */
}

.beschriftung h2 {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
}

.beschriftung p {
  margin: 6px 0 0;
  font-size: 20px;                /* Erklärtext (23.09.2026: war 13 px) */
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}


/* ---------- Hinweis "Press any key to continue" (unten) ---------- */
#weiter-hinweis {
  position: fixed;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--hinweis-farbe);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}

#weiter-hinweis.sichtbar {
  opacity: 0.8;
}


/* ---------- Abblenden vor dem Wechsel zur Karte ---------- */
#abblende {
  position: fixed;
  inset: 0;
  background: var(--hintergrund);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

#abblende.aktiv {
  opacity: 1;
}