/**
 * DB Mobile Visibility — Frontend & Editor Styles
 *
 * .hide-on-mobile → hidden at ≤768px viewport width.
 * Editor preview uses a visual indicator instead of truly hiding,
 * so the author always sees the block.
 */

/* ── Frontend ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
}

/* ── Editor: visual indicator (never truly hide in editor) ───── */
.block-editor-block-list__layout .hide-on-mobile {
  opacity: 0.4;
  position: relative;
  outline: 2px dashed #64b331;
  outline-offset: 2px;
}

.block-editor-block-list__layout .hide-on-mobile::after {
  content: "📵 Auf Mobile ausgeblendet";
  position: absolute;
  top: 4px;
  right: 4px;
  background: #64b331;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  z-index: 10;
  pointer-events: none;
  font-family: -apple-system, sans-serif;
}