/* ==========================================================================
   Infoseite von Nordcode ("Coming soon") und ihre zwei Rechtsseiten.
   Ein Stylesheet für alle drei Seiten, von Hand ausgeliefert, kein Bau.
   Grund, Farben und Schrift wie die Bühne "pixel" der neuen Startseite
   (site-neu/src/styles/buehne-pixel.css). Kein Sternenfeld.
   Inhalt: Schrift, Farben und Maße, Grundlagen, Fuß (alle Seiten),
   Infoseite mit Zeichen, Schriftzug, Hinweis und Pause-Schaltfläche,
   Rechtsseiten (Sprunglink, Kopf, Fließtext).
   Die Seiten laufen mit einer Schutzanweisung ohne eingebettete Stile:
   alles Aussehen steht hier, die Schleife zeichnet info.js auf ihre Fläche.
   ========================================================================== */

/* Inter Variable mit optischer Größe, nur lateinische Zeichen, lokal (SIL OFL 1.1,
   Lizenztext: /lizenzen/inter-OFL.txt). */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/schrift/inter-latin-opsz-normal.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;
}

:root {
  color-scheme: dark;

  /* ---- Farben der Bühne "pixel". Feste Werte stehen nur hier. ------------- */
  --grund: #060b24; /* tiefes Blauschwarz */
  --tinte: #f2f4fb; /* Schrift */
  --tinte-leise: #a3adcc; /* Nebentext */
  --akzent: #73a3fc; /* Lichtfarbe: helles Blau aus dem Stern des Zeichens */

  /* ---- Abgeleitet aus diesen Farben, keine weiteren Töne ------------------ */
  --linie: color-mix(in srgb, var(--tinte) 16%, var(--grund));
  --fokus: var(--tinte);
  --licht: color-mix(in srgb, var(--akzent) 55%, transparent); /* Leuchten an Linien */

  /* ---- Schrift ------------------------------------------------------------ */
  --schrift: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Festbreitenschrift des Systems für kleine Beschriftungen (keine neue Schrift) */
  --mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;

  /* ---- Maße (Raster 8 px) -------------------------------------------------- */
  --rand-seite: 24px; /* Abstand des Inhalts zum Fensterrand */
  --breite-inhalt: 1280px;
  --dauer: 180ms; /* Übergänge an Bedienelementen, Grenze 300 ms */

  /* Infoseite: Breite des Zeichens. Der Schriftzug ist 1,45-mal so breit wie das Zeichen (wie im
     Einstieg der Startseite; 1,49 mit dem Rand der Bilddatei), aber höchstens 18rem: Die Datei
     ist 591 Bildpunkte breit und bleibt so auch bei doppelter Bildschirmdichte scharf. */
  --zeichen-breite: clamp(7.5rem, min(44vw, 28vh), 15rem);
  --wort-breite: min(calc(var(--zeichen-breite) * 1.49), 18rem);
}
@media (min-width: 768px) {
  :root {
    --rand-seite: 32px;
  }
}

/* ==========================================================================
   GRUNDLAGEN
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--grund);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  position: relative; /* Bezug für Zeichenfläche und Pause-Schaltfläche */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ==========================================================================
   FUSS (alle drei Seiten): eine Linie, Kontakt, Rechtliches, Trägerzeile.
   ========================================================================== */
.fuss {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 32px;
  padding: 8px max(var(--rand-seite), (100% - var(--breite-inhalt)) / 2) 24px;
  border-top: 1px solid var(--linie);
  font-size: 0.9375rem;
}
.fuss p {
  margin: 0;
}
.fuss__kontakt,
.fuss__recht {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}
.fuss a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  overflow-wrap: anywhere;
}
.fuss__kontakt a {
  text-decoration-color: var(--akzent);
}
.fuss__recht a {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fuss a:hover {
  text-decoration-color: var(--akzent);
  text-decoration-thickness: 2px;
}
.fuss__firma {
  flex-basis: 100%;
  color: var(--tinte-leise);
}
@media (prefers-reduced-motion: no-preference) {
  .fuss a {
    transition: text-decoration-color var(--dauer) ease-out;
  }
}

/* ==========================================================================
   INFOSEITE. Mitte des Fensters: Zeichen, darunter Schriftzug, Hinweis, Satz.
   Das Zeichen steht im HTML als Bild. Läuft info.js, zeichnet es das Zeichen als
   Punkteschwarm auf seine Fläche hinter dem Inhalt, und das Bild tritt zurück
   (es behält seinen Platz: Dort setzt sich der Schwarm). Zustände: data-schleife
   am <html>-Element, siehe info.js.
   ========================================================================== */
.info {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px var(--rand-seite) 48px;
  text-align: center;
}
.info__zeichen {
  width: var(--zeichen-breite);
  aspect-ratio: 384 / 338;
}
.info__bild {
  width: 100%;
}
.info__name {
  width: var(--wort-breite);
  max-width: 100%;
  margin: calc(var(--zeichen-breite) * 0.16) 0 0; /* Abstand wie im Einstieg der Startseite */
  /* Lädt das Bild nicht, steht hier sein Alt-Text als Überschrift. */
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.info__name img {
  width: 100%;
}
/* Hinweis: Versalien in Festbreitenschrift unter einer kurzen Linie aus Licht. */
.info__hinweis {
  margin: 40px 0 0;
  padding-left: 0.32em; /* gleicht die Sperrung nach dem letzten Buchstaben aus */
  font-family: var(--mono);
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  line-height: 1.5;
  text-transform: uppercase;
}
.info__hinweis::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 auto 32px;
  background: var(--akzent);
  box-shadow: 0 0 8px var(--licht);
}
.info__satz {
  margin: 8px 0 0;
  color: var(--tinte-leise);
}

/* Zeichenfläche: legt info.js an. Sie deckt die ganze Seite, liegt hinter dem Inhalt und läuft
   beim Rollen mit. */
.info-flaeche {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
html[data-schleife='ruhe'] .info-flaeche {
  display: none;
}
/* Solange die Schleife läuft oder angehalten ist, zeichnet die Fläche das Zeichen. */
html[data-schleife]:not([data-schleife='ruhe']) .info__bild {
  visibility: hidden;
}
/* Wartezustand: Bis das Skript startet, bleibt das Bild des Zeichens unsichtbar, damit es nicht
   kurz aufblitzt, bevor der Schwarm einfliegt ("transition: none", sonst zeichnet Firefox es
   vorher). Rettungsweg: Startet das Skript nicht, zeigt sich das Bild nach drei Sekunden von
   selbst. Wer weniger Bewegung wünscht, bekommt keinen Wartezustand: Das Bild steht sofort. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-schleife]) .info__bild {
    opacity: 0;
    transition: none;
    animation: info-rettung 400ms ease-out 3s forwards;
  }
}
/* Ohne JavaScript gibt es keine Schleife: Das Bild steht sofort. */
@media (scripting: none) {
  html:not([data-schleife]) .info__bild {
    opacity: 1;
    animation: none;
  }
}
@keyframes info-rettung {
  to {
    opacity: 1;
  }
}

/* Pause-Schaltfläche (wie auf der neuen Startseite): Im HTML steht sie mit dem Merkmal "hidden";
   info.js nimmt es weg. Zu sehen ist nur ein kleines Zeichen, 16 x 18 px, aus Rändern gezeichnet:
   zwei Striche (anhalten), ein Dreieck (fortsetzen). Den Namen trägt aria-label. Die Trefferfläche
   ist 44 x 44 px. Platz: oben rechts, erstes Bedienelement der Seite. */
.pause {
  position: absolute;
  top: 12px;
  right: calc(var(--rand-seite) - 14px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinte-leise);
  cursor: pointer;
}
.pause[hidden] {
  display: none;
}
.pause:hover,
.pause:focus-visible {
  color: var(--tinte);
}
/* Der Fokus-Rahmen liegt um das Zeichen, nicht um die unsichtbare Trefferfläche. */
.pause:focus-visible {
  outline: none;
}
.pause:focus-visible .pause__zeichen {
  outline: 2px solid var(--fokus);
  outline-offset: 6px;
}
.pause__zeichen {
  width: 16px;
  height: 18px;
  border: 0 solid currentColor;
  border-inline-width: 5px;
}
html[data-schleife='pause'] .pause__zeichen {
  width: 0;
  height: 0;
  border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent currentColor;
}
@media (prefers-reduced-motion: no-preference) {
  .pause {
    transition: color var(--dauer) ease-out;
  }
}
/* Wer weniger Bewegung wünscht, bekommt ein stehendes Bild; es gibt nichts anzuhalten. */
@media (prefers-reduced-motion: reduce) {
  .pause {
    display: none;
  }
}

/* Niedriges Fenster (kleines Handy, Handy quer): weniger Luft, damit der Fuß nah bleibt. */
@media (max-height: 640px) {
  .info {
    padding-block: 56px 24px;
  }
  .info__hinweis {
    margin-top: 24px;
  }
  .info__hinweis::before {
    margin-bottom: 16px;
  }
}

/* ==========================================================================
   RECHTSSEITEN (Impressum, Datenschutz): body.seite-text, Sprunglink, Kopf mit
   Rückweg zur Infoseite, Fließtext in einer Spalte. Unter .text nur
   Element-Selektoren.
   ========================================================================== */
.sprung {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  background: var(--tinte);
  color: var(--grund);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transform: translateY(-200%);
}
.sprung:focus {
  transform: none;
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
}
.kopf {
  padding: 12px max(var(--rand-seite), (100% - var(--breite-inhalt)) / 2);
  border-bottom: 1px solid var(--linie);
}
/* Rückweg: Versalien in Festbreitenschrift, davor eine Linie aus Licht, die beim Überfahren
   länger wird (wie der Auslöser "Menü" der Startseite). */
.kopf__zurueck {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.kopf__zurueck::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--akzent);
  box-shadow: 0 0 8px var(--licht);
}
.kopf__zurueck:hover::before {
  width: 36px;
}
@media (prefers-reduced-motion: no-preference) {
  .kopf__zurueck::before {
    transition: width var(--dauer) ease-out;
  }
}

.text {
  flex: 1;
  width: min(100% - 2 * var(--rand-seite), 68ch);
  margin-inline: auto;
  padding-block: 48px 96px;
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}
.text h1,
.text h2,
.text h3 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.text h1 {
  margin: 0 0 32px;
  font-size: clamp(1.5rem, 7.2vw, 2.75rem);
  font-weight: 650;
  letter-spacing: -0.02em;
}
.text h2 {
  margin: 48px 0 16px;
  font-size: 1.375rem;
  font-weight: 600;
}
.text h3 {
  margin: 32px 0 8px;
  font-size: 1.125rem;
  font-weight: 600;
}
.text p,
.text address {
  margin: 0 0 16px;
}
.text address {
  font-style: normal;
}
/* Anschrift: Zeile für Zeile als Absatz, ohne Abstand dazwischen. */
.text address p {
  margin: 0;
}
.text ul,
.text ol {
  margin: 0 0 16px;
  padding-left: 1.5rem;
}
.text li {
  margin-bottom: 8px;
}
.text li::marker {
  color: var(--akzent);
}
.text strong {
  font-weight: 650;
}
.text a {
  text-decoration: underline;
  text-decoration-color: var(--akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}
.text a:hover {
  text-decoration-thickness: 2px;
}
@media (min-width: 768px) {
  .text {
    padding-block: 64px 128px;
  }
}