/* Stil der Seiten Impressum und Datenschutz (aus der 1. Variante, dazu die Korrektur am Anfang der Logo-Animation). Schrift: Archivo, selbst gehostet. Lizenz: assets/fonts/LICENSE-Archivo.txt */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* Farben und Grundwerte */
:root {
  --white: #fff;
  --black: #1d1d1b;
  --grey: #555;
  --dot: rgba(29, 29, 27, 0.22);
  --dot-strong: rgba(29, 29, 27, 0.8);
  --halo: 0 0 3px #fff, 0 0 3px #fff, 0 0 7px #fff;
  --gap: 3cm;
  --space: 4.05rem; /* sichtbarer Abstand: Logo bis Titel und letzte graue Zeile bis schwarzes Feld */
  --tight: 1cm;
  --pad: clamp(1.25rem, 5vw, 2rem);
  --block-w: min(100%, 36rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}

@supports (width: 1cqw) {
  :root {
    --block-w: min(100cqw, 36rem);
  }
}

/* Grundlagen */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
strong {
  font-weight: 500;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

::selection {
  background: var(--black);
  color: var(--white);
}

.dark ::selection {
  background: var(--white);
  color: var(--black);
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Aufbau: alles mittig, Felder in gleicher Größe */
.band {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  container-type: inline-size;
  padding-inline: var(--pad);
  text-align: center;
}

/* Unten: --space gilt von der Grundlinie der letzten Zeile bis zum schwarzen Feld (0,44rem sind der Rest der Zeile unter der Grundlinie) */
.band--intro {
  padding-block: clamp(2rem, 6vh, 3.5rem) calc(var(--space) - 0.44rem);
  overflow: hidden;
}

.band--contact {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--gap);
  overflow: hidden;
}

.block {
  width: var(--block-w);
  aspect-ratio: 3 / 2;
}

/* Teil 1: Logo (3 mal 3 cm). Die schwarze Kachel ist der Rahmen, im Feld des weißen UN läuft das Video. */
.logo {
  position: relative;
  display: block;
  width: 3cm;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--black);
  line-height: 0;
  transition: transform 0.35s var(--ease);
}

.logo:hover,
.logo:focus-visible {
  transform: translateY(-3px);
}

.logo-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.logo-field {
  position: absolute;
  top: 25.761%;
  left: 9.998%;
  width: 80.004%;
  height: 48.487%;
}

.logo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  will-change: opacity;
}

/* Mit JavaScript: erst ein leeres weißes Feld, in dem das Video das UN aufbaut. Das Video ist vor dem Start unsichtbar.
   Vor dem Start ist die ganze Fläche des Feldes weiß, sonst scheinen am Rand die schwarzen Lücken des ruhenden Logos
   als dunkle Balken durch. Läuft das Video, zieht sich die weiße Fläche nach 0,3 Sekunden 1 Pixel nach innen,
   sonst blitzt am Videorand ein heller Strich unter dem Video hervor. */
.js .logo-field {
  background: linear-gradient(var(--white), var(--white)) center / 100% 100% no-repeat;
}

.js .logo.is-playing .logo-field {
  animation: logo-inset 0.001s steps(1, end) 0.3s forwards;
}

@keyframes logo-inset {
  from {
    background-size: 100% 100%;
  }

  to {
    background-size: calc(100% - 2px) calc(100% - 2px);
  }
}

.js .logo.is-playing .logo-video {
  opacity: 1;
}

/* Das ruhende Logo darunter bleibt bis zum Ende des ersten Laufs unsichtbar (die schwarze Kachel bleibt).
   Sonst zeichnet sich sein Umriss am Rand des weißen Feldes ab, auch nur um einen Bildschirmpunkt. */
.js .logo:not(.is-rest):not(.is-replay) .logo-base {
  visibility: hidden;
}

/* Übergang ins ruhende Logo: Die weiße Fläche fällt sofort weg (das Video deckt das Feld noch voll ab),
   danach blendet nur das Video aus und gibt das Logo darunter frei. Die weiße Fläche wird nicht mit ausgeblendet,
   denn das hellte die schwarzen Formen kurz auf und sah aus wie ein Blinken. */
.js .logo.is-rest .logo-field,
.js .logo.is-replay .logo-field {
  background: transparent;
}

.js .logo.is-rest .logo-video {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.js .logo.is-replay .logo-video {
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* Oben: --space gilt von der Unterkante des Logos bis zur Oberkante der Großbuchstaben (0,2em sind der Rest der Zeile über den Großbuchstaben) */
.band--intro h1 {
  margin: calc(var(--space) - 0.2em) 0 1.5rem;
  font-size: clamp(1.9rem, 8vw, 3rem);
  font-stretch: 125%;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-shadow: var(--halo);
  text-wrap: balance;
}

/* Die Schrift richtet sich nach der Breite der Felder darunter (die Zeile ist etwa drei Viertel so breit wie das schwarze Feld) */
@supports (width: 1cqw) {
  .band--intro h1 {
    position: relative;
    left: -0.05em;
    font-size: calc(var(--block-w) * 0.063);
    white-space: nowrap;
  }
}

.meta {
  margin: 0;
  color: var(--grey);
  font-size: 1rem;
  letter-spacing: 1px;
  text-shadow: var(--halo);
  text-wrap: balance;
}

.meta + .meta {
  margin-top: 0.75rem;
}

.meta + .meta--names {
  margin-top: 1.75rem;
}

/* Teil 2: Textfeld in Schwarz */
.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 6vw, 2.5rem);
}

.block--text {
  margin-bottom: var(--tight);
  background: var(--black);
  color: var(--white);
}

.block h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.25rem, 4.6vw, 1.75rem);
}

.block p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.7;
}

h2 {
  margin: 0 0 2rem;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-stretch: 125%;
  line-height: 1.25;
  text-wrap: balance;
}

/* Punktraster: liegt fest im Hintergrund der ganzen Seite. Logo und schwarzes Feld decken es ab. */
.dots {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--dot) 0.6px, transparent 1.1px),
    radial-gradient(circle, var(--dot) 0.6px, transparent 1.1px);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}

.dots--focus {
  --dot: var(--dot-strong);
  opacity: 0;
  transition: opacity 0.5s ease;
  -webkit-mask-image: radial-gradient(circle 150px at var(--mx, -500px) var(--my, -500px), #000, transparent);
  mask-image: radial-gradient(circle 150px at var(--mx, -500px) var(--my, -500px), #000, transparent);
}

.has-pointer .dots--focus {
  opacity: 1;
}

/* Teil 3: Kontakt */
.contact {
  position: relative;
  z-index: 1;
  margin-block: auto;
}

.contact h2 {
  text-shadow: var(--halo);
}

.address {
  font-size: 1.1rem;
  font-style: normal;
  line-height: 1.8;
  text-shadow: var(--halo);
}

.address p {
  margin: 0 0 1rem;
}

.address p:last-child {
  margin-bottom: 0;
}

.address .space {
  margin-bottom: 1.5rem;
}

.link {
  position: relative;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  text-decoration: none;
  transition: background-size 0.3s var(--ease);
}

.link::after {
  content: "";
  position: absolute;
  inset: -0.85rem -0.5rem;
}

.link:hover,
.link:focus-visible {
  background-size: 100% 1px;
}

/* Fußzeile: Impressum und Datenschutz */
.site-footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--gap);
  padding-bottom: 2rem;
  font-size: 0.875rem;
  text-shadow: var(--halo);
}

.site-footer nav {
  display: flex;
  gap: 1.75rem;
}

.site-footer p {
  margin: 0;
}

/* Mauszeiger als kleines Quadrat (nur mit Maus, wird per JavaScript aktiviert) */
.cursor {
  --c: #1d1d1b;
  --e: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 10px;
  height: 10px;
  background: var(--c);
  box-shadow: 0 0 0 1px var(--e);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: opacity 0.25s ease, width 0.3s var(--ease), height 0.3s var(--ease), background-color 0.3s ease;
}

.cursor.on-dark {
  --c: #fff;
  --e: #1d1d1b;
}

.has-pointer .cursor {
  opacity: 1;
}

.has-pointer .cursor.is-hidden {
  opacity: 0;
}

.cursor.is-link {
  width: 34px;
  height: 34px;
  background: transparent;
  border: 2px solid var(--c);
  box-shadow: 0 0 0 1px var(--e), inset 0 0 0 1px var(--e);
}

.cursor.is-down {
  width: 7px;
  height: 7px;
}

.cursor.is-link.is-down {
  width: 26px;
  height: 26px;
}

.has-pointer,
.has-pointer * {
  cursor: none !important;
}

/* Rechtliche Seiten: Impressum und Datenschutz */
.band--legal {
  padding-top: clamp(2rem, 6vh, 3.5rem);
}

.legal-main {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 2.5rem var(--pad) 3.5rem;
}

/* Der Text steht auf einer weißen Fläche, damit das Punktraster nicht beim Lesen stört */
.legal {
  width: min(100%, 44rem);
  padding: clamp(1.5rem, 5vw, 3rem);
  background: var(--white);
  font-weight: 400;
}

/* Kurze Seiten (zum Beispiel "Seite nicht gefunden") mit mittigem Text und dauerhaft unterstrichenem Link */
.legal--center {
  text-align: center;
}

.legal--center .link {
  background-size: 100% 1px;
}

.legal h1 {
  margin: 0 0 1.75rem;
  font-size: clamp(2rem, 6vw, 3rem);
  font-stretch: 125%;
  line-height: 1.15;
  text-align: center;
}

.legal h2 {
  margin: 2rem 0 0.5rem;
  font-size: 1.1rem;
  font-stretch: 100%;
  line-height: 1.4;
  text-align: left;
}

.legal p,
.legal ul,
.legal address {
  margin: 0 0 1rem;
  font-style: normal;
}

.legal ul {
  padding-left: 1.2rem;
}

.legal .link {
  white-space: nowrap;
}

.notice {
  margin: 0 0 2rem;
  padding: 1rem 1.15rem;
  border: 2px solid var(--black);
  font-size: 0.95rem;
}

.todo {
  padding: 0 0.35em;
  background: var(--black);
  color: var(--white);
  font-weight: 500;
}

.band--foot {
  padding-block: 2.5rem 0.5rem;
}

.band--foot .site-footer {
  margin-top: 0;
}

/* Sanftes Einblenden: beim Laden und beim Scrollen */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.reveal {
  animation: rise 0.9s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 120ms + 80ms);
}

/* Reihenfolge beim Einblenden (statt Stilangaben im HTML, das erlaubt strengere Sicherheitsregeln am Server) */
.reveal--1 {
  --i: 1;
}

.reveal--2 {
  --i: 2;
}

.reveal--3 {
  --i: 3;
}

.reveal--4 {
  --i: 4;
}

.js .rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.js .rv.is-in {
  opacity: 1;
  transform: none;
}

/* Mobile Ansicht: Felder laufen über die volle Breite */
@media (max-width: 40rem) {
  :root {
    --gap: 2.4cm;
    --block-w: calc(100% + 2 * var(--pad));
  }

  @supports (width: 1cqw) {
    :root {
      --block-w: calc(100cqw + 2 * var(--pad));
    }
  }

  .legal {
    width: calc(100% + 2 * var(--pad));
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
  }
}

/* Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: none;
  }

  .js .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .dots--focus {
    display: none;
  }

  .js .logo-field {
    background: transparent;
  }

  .js .logo-video {
    opacity: 0;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}