/**
 * Koh Fehmarn — Responsive Fixes
 * Behebt verzerrte Bilder, Logo-Größe und Layout-Probleme auf Mobile
 */

/* --- Slideshow-Bilder: cover statt fill (verhindert Verzerrung) --- */
.swiper-slide-image {
  object-fit: cover !important;
  object-position: center center;
  width: 100% !important;
  height: 100% !important;
}

.swiper-slide-inner {
  overflow: hidden;
}

/* --- Allgemeine Bild-Responsive-Regeln --- */
img {
  max-width: 100%;
}

img[width][height] {
  max-width: 100%;
}

/* --- Desktop-Logo: auf 100px Höhe begrenzen, Breite proportional --- */
.elementor-element-b0c9a5d img {
  width: auto !important;
  max-width: 100%;
  height: 100px !important;
  object-fit: contain;
}

/* --- SVG height fix (beseitigt Console-Error) --- */
svg[height="auto"] {
  height: initial;
}

/* --- Tablet + Mobile gemeinsame Fixes (Mobile-Header sichtbar ab ≤1024px) --- */
@media (max-width: 1024px) {
  /* Logo: 50px Höhe, proportionale Breite */
  .elementor-element-328d345 img {
    width: auto !important;
    height: 50px !important;
    object-fit: contain;
  }

  /* Header: Logo links, Burger rechts */
  .elementor-element-3553d5b {
    --flex-direction: row-reverse !important;
  }

  .elementor-element-640c67d {
    --justify-content: flex-start !important;
  }

  /* Off-Canvas Menü: von rechts einschieben + schnell */
  .elementor-widget-off-canvas .e-off-canvas__main {
    left: auto !important;
    right: 0;
    justify-content: flex-end !important;
  }

  .elementor-widget-off-canvas {
    --e-off-canvas-animation-duration: 0.3s !important;
  }

  /* Bilder in Elementor-Widgets: proportional (NICHT Logos) */
  .elementor-widget-image:not(.elementor-element-328d345):not(.elementor-element-b0c9a5d) img {
    height: auto !important;
    max-width: 100%;
  }

  /* H1 Tablet */
  h1.elementor-heading-title {
    font-size: 28px !important;
  }

  /* Telefon-Link: größeres Tap-Target */
  a[href^="tel:"] {
    display: inline-block;
    min-height: 44px;
    min-width: 44px;
    line-height: 44px;
  }
}

/* --- Mobile-spezifische Fixes (nur <768px) --- */
@media (max-width: 767px) {
  h1.elementor-heading-title {
    font-size: 24px !important;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .koh-wl-ov {
    max-width: 100% !important;
    margin: 0 16px !important;
  }
}