/* MWD Headerbild – wego vti */
.mwd-header-image { 
  --mwd-min-h: 580px;
  --mwd-text: #ffffff;
  --mwd-grad-start: rgba(10,34,48,0.85);
  --mwd-grad-end: rgba(10,34,48,0);
  --mwd-grad-width: 50%; /* entspricht Verlauf-Breite */
  /* Button-Variablen (per Widget setzbar) */
  --mwd-btn-text: #ffffff;
  --mwd-btn-text-hover: var(--mwd-btn-text);
  --mwd-btn-bg: #0a3b52;
  --mwd-btn-bg-hover: var(--mwd-btn-bg);
  --mwd-btn-border: var(--mwd-btn-bg);
  --mwd-btn-border-hover: var(--mwd-btn-bg-hover);
  --mwd-btn-radius: 6px;
  position: relative;
  min-height: var(--mwd-min-h);
  isolation: isolate;
}
.mwd-header-image .mwd-media { position: absolute; inset: 0; z-index: 0; }
.mwd-header-image .mwd-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
/* Desktop/Mittel: Overlay zwischen Bild und Content, verläuft links -> rechts */
.mwd-header-image .mwd-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--mwd-grad-start) 0%, var(--mwd-grad-end) var(--mwd-grad-width), transparent calc(var(--mwd-grad-width) + 1px)); }
.mwd-header-image .mwd-content { position: relative; z-index: 2; display: grid; align-content: var(--mwd-valign, center); min-height: inherit; padding: clamp(16px, 4vw, 48px); color: var(--mwd-text); }
.mwd-header-image .mwd-pre { font-weight: 700; opacity: .95; margin: 0 0 .35rem 0; }
.mwd-header-image .mwd-head { margin: 0 0 .5rem 0; line-height: 1.05; }
.mwd-header-image .mwd-sub { margin: 0 0 1rem 0; opacity: .95; }
.mwd-header-image .mwd-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
/* Bild-Umschaltung: Standard nur Desktop-Bild sichtbar */
.mwd-header-image .mwd-bg-img.mwd-mobile { display: none; }

/* Elementor Button Skin (nutzt vorhandene .bg-ani Styles) */
.mwd-header-image .elementor-widget-button .elementor-button { color: var(--mwd-btn-text, #fff); background-color: var(--mwd-btn-bg, #0a3b52); border-radius: var(--mwd-btn-radius, 6px); border: 2px solid var(--mwd-btn-border, var(--mwd-btn-bg, #0a3b52)); }
.mwd-header-image .elementor-widget-button .elementor-button:hover,
.mwd-header-image .elementor-widget-button .elementor-button:focus {
  background-color: var(--mwd-btn-bg-hover, var(--mwd-btn-bg, #0a3b52));
  border-color: var(--mwd-btn-border-hover, var(--mwd-btn-border, var(--mwd-btn-bg-hover, var(--mwd-btn-bg))));
  color: var(--mwd-btn-text-hover, var(--mwd-btn-text, #fff));
}
.mwd-header-image .bg-ani .elementor-button-wrapper > .mwd-btn-bg { background: var(--e-global-color-primary, #0a3b52); }

/* Responsive: Textbreite begrenzen für bessere Lesbarkeit */
.mwd-header-image .mwd-inner { max-width: 70ch; }
@media (max-width: 767px){
  .mwd-header-image { min-height: 0; }
  /* Media oben, quadratisch */
  .mwd-header-image .mwd-media { position: relative; inset: auto; z-index: 0; aspect-ratio: 1 / 1; }
  /* Bild füllt das quadratische Media-Box */
  .mwd-header-image .mwd-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Optionales Mobilbild verwenden, wenn vorhanden */
  .mwd-header-image.has-mobile-img .mwd-bg-img.mwd-desktop { display: none; }
  .mwd-header-image.has-mobile-img .mwd-bg-img.mwd-mobile { display: block; }
  /* Overlay deckt gesamte Section ab, Verlauf von unten nach oben – Start an Unterkante des Contents */
  .mwd-header-image .mwd-overlay { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, var(--mwd-grad-start) 0%, var(--mwd-grad-end) var(--mwd-grad-width), transparent calc(var(--mwd-grad-width) + 1px)); }
  .mwd-header-image .mwd-content { position: relative; z-index: 2; display: block; min-height: 0; }
}

@media (min-width: 1024px){
  .mwd-header-image .mwd-content { padding: clamp(24px, 6vw, 80px); }
}


/* Mobile height fix: aspect-ratio fallback and explicit block formatting */
@media (max-width: 767px){
  .mwd-header-image .mwd-media { display: block; }
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
  @media (max-width: 767px){
    .mwd-header-image .mwd-media {
      position: relative;
      width: 100%;
      padding-top: 100%; /* 1:1 square */
      height: auto; /* ensure non-zero height */
    }
    .mwd-header-image .mwd-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  }
}


/* Additional mobile robustness: ensure auto height and visible overflow to prevent clipping */
@media (max-width: 767px){
  .mwd-header-image { height: auto; overflow: visible; }
  .mwd-header-image .mwd-content { height: auto; }
}