/* ══════════════════════════════════════════════════════════════════
   NEXETH — Weiche: Art oder Design (23.09.2026)
   ──────────────────────────────────────────────────────────────────
   Geteilter Bildschirm auf nexeth.art/. Links Art (weiter zu
   studio.html), rechts Design (weiter zu ln-design.net).

   Der Effekt ist "Partikel 1" (footer-11) — derselbe, der auf den
   Projektseiten zwischen vorherigem und nächstem Projekt überblendet:
   texturierte Dreiecksplitter lösen sich aus dem einen Bild und bauen
   das andere auf. Deshalb übernimmt diese Seite Gerüst und Grundregeln
   des Projekt-Footers aus css/project-builder.css; hier stehen nur die
   Abweichungen für die Startseite.

   ENTFERNEN: Diese Datei und index.html betreffen nur die Weiche. Die
   eigentliche Startseite liegt unter studio.html und hängt nicht daran.
══════════════════════════════════════════════════════════════════ */

html, body { height: 100%; }

body.nx-weiche {
  margin: 0;
  background: #141414;
  color: #e8e8e8;
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  overflow: hidden;
}

/* Der Projekt-Footer ist ein Band von 58vh. Als Startseite füllt er den
   ganzen Bildschirm. */
.wch-fx.pb-footer-canvas {
  height: 100dvh;
  display: flex;
  margin: 0;
}

/* Überschrift für Screenreader und Suchmaschinen: Die sichtbaren Titel
   "Art" und "Design" sind Teil der beiden Flächen, eine eigene h1 wäre
   dort doppelt. Sie ist vorhanden, aber nicht im Weg. */
.wch-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Beschriftung ─────────────────────────────────────────────────
   Größer als im Projekt-Footer: Hier ist es die einzige Aussage der
   Seite, dort nur eine Fußzeile. */
.wch-fx .pf-nav-title {
  font-size: clamp(2.6rem, 7vw, 8rem);
  line-height: .9;
  letter-spacing: -.01em;
  font-weight: 800;
  text-transform: uppercase;
}
.wch-fx .pf-nav-word {
  font-size: clamp(12px, 0.96vw, 14px);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #ff6b00;
}
.wch-copy {
  margin: 14px 0 0;
  font-size: clamp(14px, 1.12vw, 16px);
  line-height: 1.6;
  max-width: 34ch;
  color: rgba(232, 232, 232, .78);
}

/* ── Marke oben ───────────────────────────────────────────────────
   mix-blend-mode difference, damit sie auf der dunklen wie auf der
   hellen Hälfte lesbar bleibt, egal wie weit der Effekt gerade
   übergeblendet hat. */
.wch-marke {
  position: fixed; top: clamp(18px, 3vh, 34px); left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: clamp(12px, 1.15vw, 15px);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  mix-blend-mode: difference;
  pointer-events: none;
}

/* ── Ohne Effekt ──────────────────────────────────────────────────
   Kein WebGL2 oder "Bewegung reduzieren": Dann zeichnet nichts auf das
   Canvas, und die Seite wäre leer. Deshalb bekommen die beiden Hälften
   hier ihr Bild direkt als Hintergrund. Die Pfade setzt index.html als
   CSS-Variablen, damit sie nur an einer Stelle stehen.

   Gilt seit 23.09.2026 auch fuer Geraete ohne Mauszeiger: Der Effekt
   wird ausschliesslich von mouseenter gesteuert (nachgemessen: eine
   reine Beruehrung laesst das Canvas 2,5 s lang unveraendert). Auf dem
   Tablet stand deshalb dauerhaft der Mischstand in der Mitte — beide
   Bilder halb ineinander, keines erkennbar. Die eigene Abdunklung
   entfaellt hier, die uebernimmt jetzt .pf-side::before fuer beide Faelle. */
.wch-ohne-effekt .pf-canvas { display: none; }
.wch-ohne-effekt .pf-side--left  { background: var(--wch-art)    center/cover no-repeat; }
.wch-ohne-effekt .pf-side--right { background: var(--wch-design) center/cover no-repeat; }

/* ── Tastatur ─────────────────────────────────────────────────────
   Der Effekt folgt der Maus. Wer mit der Tastatur kommt, hat keine —
   deshalb hier eine deutliche Umrandung, damit sichtbar bleibt, welche
   Hälfte gerade dran ist. */
.wch-fx .pf-side:focus-visible {
  outline: 2px solid #ff6b00;
  outline-offset: -8px;
}

/* ── Schmale Geräte ───────────────────────────────────────────────
   Untereinander statt nebeneinander. Der Effekt blendet über die
   waagerechte Mausposition — auf dem Telefon gibt es keine, deshalb
   liegt dort ohnehin die ruhige Fassung. */
@media (max-width: 760px) {
  .wch-fx.pb-footer-canvas { flex-direction: column; }
  .wch-fx .pf-side { flex: 1 1 50%; }
  .wch-fx .pf-nav-title { font-size: clamp(2.4rem, 13vw, 4.2rem); }
  .wch-copy { max-width: 28ch; }
}

/* ── Abdunklung hinter der Schrift ────────────────────────────────
   Der Effekt blendet zwei sehr unterschiedliche Bilder ineinander:
   das Branding-Mockup ist oben hell (weisses Papier), die Kunst unten
   hell (Sonnenlicht). Weisse Copy und der orange Titel standen deshalb
   je nach Blendstand auf hellem Grund und waren kaum zu lesen.

   Ein Verlauf nur in der unteren Haelfte, wo die Beschriftung sitzt —
   oben bleibt das Bild unberuehrt. Liegt ueber dem Canvas, aber unter
   der Beschriftung (.pf-label bekommt dafuer eine eigene Ebene). */
.wch-fx .pf-side::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0)   30%,
    rgba(0, 0, 0, .18) 50%,
    rgba(0, 0, 0, .62) 76%,
    rgba(0, 0, 0, .92) 100%);
}
.wch-fx .pf-label { position: relative; z-index: 1; }

/* Die Copy darf jetzt wieder klarer stehen — auf dem abgedunkelten
   Grund war der frueher noetige Grauton unnoetig zurueckhaltend. */
.wch-fx .wch-copy { color: rgba(255, 255, 255, .88); }

/* ── Eigener Zeiger ───────────────────────────────────────────────
   Wie auf der übrigen Website: Der Systemzeiger verschwindet, an seiner
   Stelle läuft der Punkt mit dem Textfähnchen. Die beiden Hälften
   tragen ihre Beschriftung über data-ct. */
body.nx-weiche, .wch-fx .pf-side { cursor: none; }

/* Die Beschriftung ist hier ein Gesicht, kein Wort: Sperrung und
   Großbuchstaben aus, sonst zerfällt „٩(^‿^)۶" in Einzelzeichen. Etwas
   mehr Breite, damit nichts abgeschnitten wird. */
#cur .c-t {
  letter-spacing: 0;
  text-transform: none;
  font-size: 1rem;
}
#cur .c-box.h .c-label-wrap { width: 124px; }