/*
Theme Name: Hazel Child
Template:   hazel
*/

@media (max-width: 1024px) {
  /* Spalten auf volle Breite zwingen */
  .vc_col-sm-6,
  .vc_column_container .vc_col-sm-6,
  .vc_col-sm-8,
  .vc_column_container .vc_col-sm-8,
  .vc_col-sm-4,
  .vc_column_container .vc_col-sm-4 {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }
}

/* =========================================
   Hover-Rotate (auf Basis deiner Klassen)
   Fixes: Hover ohne Link, Clipping, z-index
   ========================================= */

/* Optional: Element nach vorn holen */
.elevate-on-hover:hover {
  position: relative;
  z-index: 1000;
}

/* --- Gemeinsame Basis für alle Varianten --- */
.hover-rotate,
.hover-rotate1,
.hover-rotate2,
.hover-rotate-img {
  position: relative;                 /* erlaubt z-index */
  overflow: visible !important;       /* nix abschneiden */
  margin: 0;                          /* wie gehabt */
  /* KEINE dauerhafte Rotation/Skalierung im Idle-Zustand */
}

/* Typische WPBakery/Theme-Wrapper innerhalb deiner Komponente „entclippen“ */
.hover-rotate .wpb_single_image,
.hover-rotate figure,
.hover-rotate .vc_single_image-wrapper,
.hover-rotate .wpb_wrapper,
.hover-rotate .vc_column-inner,
.hover-rotate1 .wpb_single_image,
.hover-rotate1 figure,
.hover-rotate1 .vc_single_image-wrapper,
.hover-rotate1 .wpb_wrapper,
.hover-rotate1 .vc_column-inner,
.hover-rotate2 .wpb_single_image,
.hover-rotate2 figure,
.hover-rotate2 .vc_single_image-wrapper,
.hover-rotate2 .wpb_wrapper,
.hover-rotate2 .vc_column-inner,
.hover-rotate-img .wpb_single_image,
.hover-rotate-img figure,
.hover-rotate-img .vc_single_image-wrapper,
.hover-rotate-img .wpb_wrapper,
.hover-rotate-img .vc_column-inner {
  overflow: visible !important;
}

/* Falls das Bild verlinkt ist: der -Wrap darf nicht clippen */
.hover-rotate a,
.hover-rotate1 a,
.hover-rotate2 a,
.hover-rotate-img a {
  display: inline-block;
  overflow: visible !important;
}

/* Das Bild selbst */
.hover-rotate img,
.hover-rotate1 img,
.hover-rotate2 img,
.hover-rotate-img img {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  position: relative;                 /* z-index wirksam machen */
  z-index: 1;
  transform-origin: 50% 50%;
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform;
}

/* --- HOVER-EFFEKTE ---
   Wichtig: Sowohl Hover auf dem Wrapper ALS AUCH auf dem Link */
.hover-rotate:hover img,
.hover-rotate a:hover img {
  transform: scale(1.3) rotate(-5deg);
  opacity: 1;
  z-index: 2;
}

.hover-rotate1:hover img,
.hover-rotate1 a:hover img {
  /* 363deg in deinem Code entspricht effektiv +3deg */
  transform: scale(1.3) rotate(3deg);
  opacity: 1;
  z-index: 2;
}

.hover-rotate2:hover img,
.hover-rotate2 a:hover img {
  transform: scale(1.3) rotate(5deg);
  opacity: 1;
  z-index: 2;
}

.hover-rotate-img:hover img,
.hover-rotate-img a:hover img {
  transform: scale(1.2) rotate(-5deg);
  opacity: 1;
  z-index: 2;
}

/* Bei Hover den Wrapper über Nachbarn legen */
.hover-rotate:hover,
.hover-rotate1:hover,
.hover-rotate2:hover,
.hover-rotate-img:hover {
  z-index: 10;
}

/* Deine sonstigen Utilities beibehalten */
a:link {
  text-decoration: underline;
}

.text-white {
  color: #ffffff !important;
}