/* =========================================================
   custom.css – Inline-Styles ausgelagert (responsive-sicher)
   ========================================================= */

/* Große Header-/Artikelbilder (featured images) */
.img-featured-cover {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Mini-Post Bilder (Lesenswert) */
.img-mini-responsive {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

/* Qualität & Vertraulichkeit (beratung.png) */
.img-seal {
  width: 20%;
  max-width: 20%;
  height: auto;
  display: block;
  margin-bottom: 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

/* Optional: Siegel auf sehr kleinen Screens größer */
@media (max-width: 480px) {
  .img-seal {
    width: 40%;
    max-width: 40%;
  }
}

/* =========================================================
   Hover-Effekte wiederherstellen (Bilder + Buttons/Links)
   ========================================================= */

/* 1) Stelle sicher, dass der Template-Image-Wrapper korrekt arbeitet */
.image {
  position: relative;      /* wichtig für Overlay */
  display: block;
  overflow: hidden;        /* wichtig, damit Zoom nicht rausläuft */
}

/* 2) Bild-Transition (Zoom) */
.image img {
  transition: transform 0.25s ease;
  transform: translateZ(0); /* verhindert Flackern */
}

/* 3) Zoom beim Hover auf den Link/Wrapper */
.image:hover img {
  transform: scale(1.04);
}

/* 4) Optional: dunkles Overlay beim Hover (wie viele HTML5UP Templates) */
.image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.25s ease;
  pointer-events: none;
}

.image:hover::after {
  background: rgba(0,0,0,0.12);
}

/* 5) Buttons/Links: klarer Hover-Zustand */
a.button,
input[type="submit"],
input[type="reset"],
button {
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

a.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  filter: brightness(0.96);
}

/* 6) Normale Links (Textlinks) ebenfalls sichtbar beim Hover */
a:hover {
  text-decoration: none;
}