/* ===== Einstellungen ===== */
:root {
  --typo-deckkraft: 0.9; /* Deckkraft der SVG-Schriftzüge (0.9 = 90 %) */
  --farbe: #ff85c8;      /* Pink (vorher #ec5e8c) */
  --ring: 5.8vh;         /* Breite eines Rings (Pink- bzw. Weiß-Streifen) */
  --mitte-oben: -7%;     /* Mittelpunkt der oberen Kreise (über dem Rand) */
  --mitte-unten: 107%;   /* Mittelpunkt der unteren Kreise (unter dem Rand) */
  --dauer: 6s;           /* Zeit für eine Schleife (Ringe wandern um 2 Ringbreiten) */
}

/* Variable für die Ringverschiebung (wird von js/main.js gesetzt) */
@property --shift {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #fff; }

.layer {
  position: fixed;
  inset: 0;
}

/* ===== Layer 1: Ring-Schachbrett =====
   Zwei Ringsysteme in Schwarz/Weiß werden per "difference" überlagert:
   gleich = schwarz, verschieden = weiß (wie ein XOR → Schachbrett).
   Die oberste Pink-Fläche mit "lighten" färbt Schwarz pink, Weiß bleibt weiß. */
.layer--grafik1 {
  z-index: 0;
  --shift: 0px;
  background-image:
    linear-gradient(var(--farbe), var(--farbe)),
    repeating-radial-gradient(circle at 50% var(--mitte-oben),
      #000 var(--shift), #000 calc(var(--shift) + var(--ring)),
      #fff calc(var(--shift) + var(--ring)), #fff calc(var(--shift) + 2 * var(--ring))),
    repeating-radial-gradient(circle at 50% var(--mitte-unten),
      #000 var(--shift), #000 calc(var(--shift) + var(--ring)),
      #fff calc(var(--shift) + var(--ring)), #fff calc(var(--shift) + 2 * var(--ring)));
  background-blend-mode: lighten, difference, normal;
  /* Bewegung: js/main.js setzt --shift in jedem Bild (0 → 2 Ringbreiten in --dauer).
     Per JavaScript statt CSS-Animation, weil Firefox animierte Variablen in
     Verläufen nicht neu zeichnet. */
}

/* ===== Layer 2: Metallic-Grau, wird per JavaScript in ein Canvas gezeichnet (js/main.js) =====
   Farben und Blend-Mode werden hier eingestellt. */
.layer--grafik2 {
  --metallic: 1;             /* 1 = Metall mit Lichteffekten, 0 = flache Farbe (--farbe2) */
  --farbe2: #d4d4d4;         /* Hellgrau (flach); vorher Grün #aed0a2 */
  --metall-hell: #ececec;    /* Lichtkanten */
  --metall-mittel: #c6c7c9;  /* Grundton */
  --metall-dunkel: #8c8f94;  /* Schattenkanten */
  --glanz-staerke: 0.4;      /* 0–1: Helligkeit des wandernden Glanzstreifens */
  z-index: 30;               /* ganz oben (über Typo und Text), multipliziert mit allem darunter */
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: multiply;
}

/* ===== Layer 3: Typo – zwei Schriftzüge, gesteuert durch Scrollen =====
   Grundstellung: beide in der Mitte, FORMAL über SETTINGS, Buchstaben
   überschneiden sich um --ueberschneidung. Beim Scrollen läuft FORMAL nach
   unten, SETTINGS nach oben; wer unten/oben hinausläuft, kommt auf der
   anderen Seite wieder herein (endlos). Die Bewegung macht js/main.js. */
html, body { overflow: hidden; }               /* die Seite selbst scrollt nicht */

.layer--typo {
  --typo-breite: 90vw;                         /* Breite eines Schriftzugs */
  /* Überschneidung der Buchstaben in der Grundstellung:
     höchstens 30px (großer Desktop), auf schmaleren Bildschirmen 2,1 % der
     Fensterbreite – schrumpft also im selben Verhältnis wie die Schriftzüge. */
  --ueberschneidung: min(30px, 2.1vw);
  --scroll-tempo: 1;                           /* 1 = Schriftzug bewegt sich so weit wie gescrollt, 2 = doppelt … */
  z-index: 10;
  overflow: hidden;
  opacity: var(--typo-deckkraft);
  pointer-events: none;
}
/* Die Schriftzüge sind Links (https://formal-settings.com/). Die Ebene selbst
   und alle Ebenen darüber lassen Klicks durch (pointer-events: none),
   nur die beiden Bilder fangen sie auf. */
.typo-bild {
  pointer-events: auto;
  cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--typo-breite);
  height: auto;
  margin-left: calc(var(--typo-breite) / -2);
  will-change: transform;
}

/* ===== Layer 4: Text oben und unten ===== */
.layer--text {
  --text-deckkraft: 0.7;                      /* Deckkraft der Schrift */
  opacity: var(--text-deckkraft);
  --schrift: "Times New Roman", Times, serif;
  --schriftgroesse: 6.5vw;
  --sperrung: -0.02em;                      /* Laufweite */
  --text-farbe: #000;
  --rand: 16px;                               /* Abstand zum oberen/unteren Rand */
  z-index: 20;
  pointer-events: none;
}
.text {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--schrift);
  font-size: var(--schriftgroesse);
  line-height: 0.9em;
  letter-spacing: var(--sperrung);
  color: var(--text-farbe);
}
.text p { margin: 0; }
.text--oben { top: var(--rand); }
.text--unten { bottom: var(--rand); }

/* Text nur für Screenreader/Suchmaschinen, unsichtbar */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}