/* ==========================================================================
   Terminal: Intro (index.html) und Fehlerseite (404.html)
   Vollflächig, ohne Fenster, Rahmen und Titelleiste. Die Terminalwirkung entsteht über Schrift, Zeilenaufbau und Cursor.
   Beide Seiten laden diese Datei. Hier steht alles, was zum Terminal gehört: Schrift, Farben, Zeilen, Cursor.
   Akzentfarben kommen im Terminal nicht vor.
   ========================================================================== */

/* Monospace. Das Intro tippt erst, wenn die Schrift geladen ist, deshalb block: kein Schriftwechsel mitten im Text. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: block;
  src: url("../fonts/jetbrains-mono-variable-latin.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;
}

:root {
  --terminal-bg: #141414;               /* sehr dunkler Grund */
  --terminal-text: #d6d6d6;             /* hellgrau, 12,7:1 auf dem Grund */
  --terminal-prompt: #8c8c8c;           /* gedämpftes Grau für die Prompt-Zeile, 5,5:1 auf dem Grund */
  --terminal-dim: #8c8c8c;              /* Zeilen des Speicherauszugs, ebenso 5,5:1 */
  --terminal-font: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --terminal-size: clamp(1rem, 0.9375rem + 0.15vw, 1.125rem);   /* 16 bis 18 px, am Smartphone nie unter 16 px */
  --terminal-leading: 1.5;
  --terminal-pad: 16px;                 /* Abstand zum Rand, ab Tablet 24 px; Safe-Area-Abstände kommen dazu (max) */
  --terminal-fade: 400ms;               /* Ausblenden der Intro-Ebene, wie FADE in intro.js */
  --terminal-blink: 1.06s;              /* Cursor: halbe Periode an, halbe aus */
  --terminal-cursor-width: 2px;
  --terminal-cursor-height: 1.1em;
  --terminal-z: 1000;
}

@media (min-width: 48rem) {
  :root {
    --terminal-pad: 24px;
  }
}

/* Abstand zum Rand: mindestens der Wert oben, mindestens die Safe-Area am Gerät (Notch, Home-Balken) */
.terminal,
.error-terminal {
  box-sizing: border-box;
  padding-top: max(var(--terminal-pad), env(safe-area-inset-top, 0px));
  padding-right: max(var(--terminal-pad), env(safe-area-inset-right, 0px));
  padding-bottom: max(var(--terminal-pad), env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--terminal-pad), env(safe-area-inset-left, 0px));
  background: var(--terminal-bg);
  color: var(--terminal-text);
  font-family: var(--terminal-font);
  font-size: var(--terminal-size);
  font-weight: 400;
  line-height: var(--terminal-leading);
}

/* Intro: Terminal-Ebene. Sichtbar nur, solange das Skript im head die Klasse intro-active setzt. */
.terminal {
  display: none;
}

html.intro-active {
  overflow: hidden;                     /* kein Scrollbalken, kein Wegscrollen hinter der Ebene */
  scrollbar-gutter: stable;             /* Platz des Balkens bleibt reserviert, die Seite springt danach nicht */
  overscroll-behavior: none;
  background: var(--terminal-bg);       /* auch ein reservierter Balkenplatz hat den Grund des Terminals */
}

/* Fehlerseite: Grund und Rand der ganzen Seite im Ton des Terminals (404.html setzt die Klasse auf html) */
html.terminal-page,
html.terminal-page body {
  margin: 0;
  background: var(--terminal-bg);
}

/* Markierter Text bleibt grau-weiß, ohne die Farbe der Hauptseite */
.terminal ::selection,
.error-terminal ::selection {
  background: var(--terminal-text);
  color: var(--terminal-bg);
}

html.intro-active .terminal {
  position: fixed;
  inset: 0;
  z-index: var(--terminal-z);
  display: block;
  box-sizing: border-box;
  border-radius: 0;                     /* die Fokusregel der Hauptseite (:focus-visible) rundet sonst die Ecken, und dort scheint die Seite durch */
  cursor: pointer;
  touch-action: none;
  transition: opacity var(--terminal-fade) ease;
}

/* Die Ebene nimmt nur den Fokus auf (Enter, Leertaste und Escape wirken dort), sie ist selbst nichts zum Bedienen: kein Ring. */
html.intro-active .terminal:focus-visible {
  outline: none;
}

html.intro-active .terminal.is-leaving {
  opacity: 0;
  pointer-events: none;
}

/* Eine Zeile: Prompt, ein Leerzeichen, der getippte Text, der Cursor. Verborgen, bis die Schrift bereit ist (sonst springt der Cursor beim Schriftwechsel). */
.terminal__line {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  visibility: hidden;
}

.terminal__line.is-ready {
  visibility: visible;
}

.terminal__prompt {
  color: var(--terminal-prompt);
}

.terminal__typed {
  color: var(--terminal-text);
}

/* Cursor: dünner senkrechter Strich in der Textfarbe, per CSS gezeichnet (kein Zeichen). Er behält die Textfarbe auch am Ende einer gedämpften Zeile. */
.terminal__cursor {
  display: inline-block;
  width: var(--terminal-cursor-width);
  height: var(--terminal-cursor-height);
  vertical-align: middle;
  color: var(--terminal-text);
  background: currentColor;
  animation: terminal-blink var(--terminal-blink) step-end infinite;
}

/* Beim Tippen leuchtet der Cursor ruhig, davor und danach blinkt er */
.terminal__line.is-typing .terminal__cursor,
.error-terminal.is-typing .terminal__cursor {
  animation: none;
}

@keyframes terminal-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

/* Fehlerseite 404 (404.html, error.js): dieselbe Optik, die Zeilen bauen sich von oben links auf, der Link steht unten */
.error-terminal {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: 12px;
  box-sizing: border-box;
  height: 100vh;                        /* feste Höhe, damit die Zeilen oben abgeschnitten werden statt die Seite zu verlängern */
  height: 100dvh;
  margin: 0;
}

.error-terminal__log {
  min-height: 0;
  overflow: hidden;                     /* nie ein Scrollbalken, error.js entfernt oben, was nicht mehr passt */
}

.error-terminal__line {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.error-terminal__line--prompt {
  color: var(--terminal-prompt);
}

.error-terminal__line--prompt .terminal__cursor {
  margin-left: 1ch;                     /* wie das Leerzeichen hinter dem Prompt im Intro */
}

.error-terminal__line--dim {
  color: var(--terminal-dim);
}

.error-terminal__line--error {
  color: var(--terminal-text);
  font-weight: 700;                     /* Hervorhebung ohne Farbe */
}

.error-terminal__link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;                     /* Tippfläche */
  color: var(--terminal-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.error-terminal__link:hover {
  color: #ffffff;
}

.error-terminal__link:focus-visible {
  outline: 2px solid var(--terminal-text);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  /* Cursor bleibt sichtbar, blinkt aber nicht (auch nicht beim Warten am Ende) */
  .terminal__cursor {
    animation: none;
  }
}