pointer-events & touch-action

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* Klicks gehen durch */
  background: linear-gradient(
    135deg,
    rgba(26, 86, 219, 0.1),
    rgba(124, 58, 237, 0.1)
  );
}

<div class="container">
<div class="overlay"></div>
<div class="content">
  <p style="margin: 0 0 1rem 0; font-family: system-ui, sans-serif; color: #111827;">Dieser Text ist unter einem Overlay, aber der Button funktioniert:</p>
  <button onclick="alert('Klick durchgegangen!')">Klick mich</button>
</div>
</div>

/* Sieht deaktiviert aus, ist aber per Tab erreichbar */
.btn-fake-disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* Richtig deaktiviert, auch für Screenreader */
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

<div class="button-group">
<button class="btn btn-pointer-events">
  pointer-events: none (tab fokussierbar!)
</button>
<button class="btn btn-disabled" disabled>
  disabled (richtig deaktiviert)
</button>
</div>

.watermark {
  position: absolute;
  pointer-events: none; /* Text darunter bleibt selektierbar */
  user-select: none;
  color: rgba(220, 38, 38, 0.08);
  font-size: 4rem;
  transform: translate(-50%, -50%) rotate(-45deg);
}

<div class="watermark-container">
<div class="watermark">ENTWURF</div>
<div class="text-content">
  <p>Dieser Text kann normal selektiert und gelesen werden, obwohl ein Wasserzeichen darüber liegt. Das Wasserzeichen blockiert keine Interaktionen.</p>
  <p>Versuch mal, diesen Text zu markieren: funktioniert perfekt!</p>
</div>
</div>

/* Kein Double-Tap-Zoom auf Formularen */
.form-area {
  touch-action: manipulation;
}

/* Pan + Pinch-Zoom bleiben erlaubt,
   nur Double-Tap-Zoom wird deaktiviert */

<div class="form-area">
<div class="form-group">
  <label for="username">Benutzername</label>
  <input type="text" id="username" placeholder="Kein Double-Tap-Zoom">
</div>
<div class="form-group">
  <label for="email">E-Mail</label>
  <input type="email" id="email" placeholder="auf Mobile besser">
</div>
<button>Absenden</button>
</div>

.drag-area {
  touch-action: none; /* Alle Gesten deaktiviert */
  user-select: none;
}

/* JavaScript übernimmt die Touch-Events:
   pointerdown, pointermove, pointerup */

<div class="drag-area">
<div class="drag-box">
  Zieh mich!
</div>
<p class="drag-info">
  touch-action: none, Zoom & Pan deaktiviert
</p>
</div>