/* --- Diagnose-Helfer: kurz sichtbar machen, ob CSS greift --- */
.two-col-hero { outline: 2px dashed #A1C969; } /* später gern löschen */

/* Mobile-Regel: 2. Spalte (Bild) zuerst, 1. Spalte (Text) darunter */
@media (max-width: 992px) {
  /* Zoho hat je nach Template .zrow/.zcolumn oder generische div-Strukturen */
  .two-col-hero, 
  .two-col-hero .zrow, 
  .two-col-hero > .row, 
  .two-col-hero > div {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important; /* Basis: nebeneinander, wir steuern Reihenfolge per order */
  }

  /* direkte Columns (häufig .zcolumn), sonst fallen wir auf generische divs zurück */
  .two-col-hero > .zcolumn,
  .two-col-hero .zrow > .zcolumn,
  .two-col-hero > .row > div,
  .two-col-hero > div > div {
    width: 100% !important;     /* stacked */
  }

  /* Reihenfolge festlegen: 
     1. Spalte = Text -> soll MOBIL nach unten (order:2)
     2. Spalte = Bild (in Box) -> soll MOBIL nach oben (order:1) */
  .two-col-hero > .zcolumn:nth-child(1),
  .two-col-hero .zrow > .zcolumn:nth-child(1),
  .two-col-hero > .row > div:nth-child(1),
  .two-col-hero > div > div:nth-child(1) {
    order: 2 !important;
  }

  .two-col-hero > .zcolumn:nth-child(2),
  .two-col-hero .zrow > .zcolumn:nth-child(2),
  .two-col-hero > .row > div:nth-child(2),
  .two-col-hero > div > div:nth-child(2) {
    order: 1 !important;
  }

  /* Falls dein Bild in einer Box steckt, stellen wir sicher, dass die Box volle Breite nimmt */
  .two-col-hero .zbox,
  .two-col-hero [class*="box"],
  .two-col-hero .zcontainer {
    width: 100% !important;
  }
}



.zplink-element-container.zplink-type-horizontal .zplink-list-container>.zplink-list .zplink-text, .zplink-element-container.zplink-type-vertical .zplink-list-container>.zplink-list .zplink-text{
font-weight: bold !important;
    color:#03363D}
.zplink-element-container.zplink-type-horizontal .zplink-list-container>.zplink-list .zplink-text, .zplink-element-container.zplink-type-vertical .zplink-list-container>.zplink-list .zplink-text:hover{
color: #B2EA79 !important;
}
.zpelement.zpelem-image.certi
 {
    filter: grayscale(1) !important;
}
.zpelement.zpelem-image.certi:hover {
    filter: grayscale(0) !important;
}

.fixed-box {
  width: 426px !important;
  height: 250px !important;
  overflow: hidden !important;
}
.fixed-box img,
.fixed-box .zbackground {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}