/**
 * VARENO Responsive Devices — Sichtbarkeit Desktop / Tablet / Mobil
 * Klassen: vcms-hide-desktop | vcms-hide-tablet | vcms-hide-mobile
 * Breakpoints werden serverseitig als CSS-Variablen gesetzt (siehe ThemeCss / layout).
 */
:root {
  --vcms-bp-tablet: 992px;
  --vcms-bp-mobile: 480px;
}

/* Desktop-first: hide helpers apply only in their range */
@media (min-width: 993px) {
  .vcms-hide-desktop { display: none !important; }
}

@media (max-width: 992px) and (min-width: 481px) {
  .vcms-hide-tablet { display: none !important; }
}

@media (max-width: 480px) {
  .vcms-hide-mobile { display: none !important; }
}

/* CMS Live-Editor: Geräte-Rahmen */
body.cms-device-preview-tablet .shell,
body.cms-device-preview-mobile .shell {
  margin-inline: auto;
}
body.cms-device-preview-tablet { --cms-preview-width: 768px; }
body.cms-device-preview-mobile { --cms-preview-width: 375px; }