/* ══════════════════════════════════════════════════════════════════
   LN-Design — Weiche auf dem Telefon (ergänzt nx-weiche.css, ändert den Desktop nicht)

   Auf nexeth.art stehen die Hälften auf schmalen Geräten untereinander und
   der Effekt ist aus. Hier bleiben sie wie am Desktop NEBENEINANDER über die
   volle Höhe, und der Partikel-Effekt läuft auch ohne Maus (Steuerung in
   index.php): Er wechselt von selbst zwischen Art und Design, ein Wisch lenkt
   ihn zur jeweiligen Seite, ein Tipp baut das Bild auf und öffnet die Seite.
══════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  .wch-fx.pb-footer-canvas { flex-direction: row; }

  .wch-fx .pf-side {
    flex: 1 1 50%;
    padding: 18px 14px calc(26px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    border-top: 0;
  }
  .wch-fx .pf-side--left { padding-left: max(14px, env(safe-area-inset-left, 0px)); }
  .wch-fx .pf-side--right { padding-right: max(14px, env(safe-area-inset-right, 0px)); }

  /* „DESIGN" muss in eine halbe Bildschirmbreite passen (320 px → 128 px Platz) */
  .wch-fx .pf-nav-title {
    font-size: clamp(1.75rem, 9.2vw, 3.2rem);
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: visible;
  }
  .wch-fx .pf-nav-word {
    font-size: 10px;
    letter-spacing: .24em;
  }
  .wch-copy {
    margin-top: 10px;
    max-width: none;
    font-size: 12.5px;
    line-height: 1.5;
  }

  .wch-marke { top: calc(18px + env(safe-area-inset-top, 0px)); }

  /* dünne Trennlinie in der Mitte, damit die zwei Tippflächen erkennbar sind */
  .wch-fx .pf-side--right { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .14); }
}

/* Welche Seite der Effekt gerade zeigt: die andere Beschriftung tritt zurück */
.wch-touch .pf-label { transition: opacity .6s ease; }
.wch-touch[data-zeigt="art"] .pf-side--right .pf-label,
.wch-touch[data-zeigt="design"] .pf-side--left .pf-label { opacity: .5; }

/* Touch: kein eigener Mauszeiger, keine Tipp-Markierung vom Browser */
.wch-touch, .wch-touch .pf-side { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  #cur { display: none !important; }
  body.nx-weiche, .wch-fx .pf-side { cursor: auto; }
}

/* Telefon: Schrift steht auf beiden Bildern sicher (das Branding-Bild ist sehr hell) */
@media (max-width: 900px) and (hover: none) {
  .wch-fx .pf-side::before {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0)   38%,
      rgba(0, 0, 0, .35) 58%,
      rgba(0, 0, 0, .78) 80%,
      rgba(0, 0, 0, .95) 100%);
  }
}

/* Rechte Hälfte: Beschreibung rechtsbündig mit „LN-Design“ und „Design“
   (der Text ist auf 34ch begrenzt und stand dadurch links im Block) */
.wch-fx .pf-side--right .wch-copy { margin-left: auto; text-align: right; }