/**
 * 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: größer (130px) --- */
.elementor-element-b0c9a5d img {
  width: auto !important;
  max-width: 100%;
  height: 130px !important;
  object-fit: contain;
}

/* --- Große-Gruppen-Seite: Hero-Template auf volle Breite --- */
.elementor-1167 .elementor-element.elementor-element-7ce2c397 {
  width: 100% !important;
  max-width: 100% !important;
}

/* --- D3: Startseite Bilder (Yakisugi, Interieur) auf volle Breite --- */
.elementor-9 .elementor-element.elementor-element-d7a352c,
.elementor-9 .elementor-element.elementor-element-341ddb1,
.elementor-9 .elementor-element.elementor-element-52eb626 {
  width: 100% !important;
  max-width: 100% !important;
}

/* --- H1 auf Slideshow-Bildern lesbar machen (kein Hintergrund-Box) --- */
h1.elementor-heading-title {
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  color: #ffffff !important;
}

/* Hero-Container braucht position:relative für H1-Positionierung */
.elementor-element-36cda05 {
  position: relative !important;
}

/* H1-Container: mittig im Hero-Bild — nur auf Tablet/Mobile */
@media (max-width: 1024px) {
  .elementor-element-715b946 {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2;
    width: 90%;
    text-align: center;
    pointer-events: none;
  }
}

/* --- Sticky Header: immer sichtbar, kein Flackern --- */
.elementor-sticky--effects {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* --- Off-Canvas Close: Sticky-Header einfrieren während Animation --- */
body[data-oc-closing] .elementor-sticky--active,
body[data-oc-closing] .elementor-sticky--effects,
body[data-oc-closing] [data-settings*="sticky"] {
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}

/* --- Scroll-Padding für sticky Header + Anchor-Links --- */
html {
  scroll-padding-top: 90px;
}

/* --- Seiten ohne Elementor-Content (Datenschutz, Impressum, Insel-Fehmarn) --- */
body:not(.elementor-page) .site-main {
  padding-top: 20px;
}

body:not(.elementor-page) .site-main > .page-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 30px 60px;
}

/* --- SVG height fix --- */
svg[height="auto"] {
  height: initial;
}

/* --- Tablet: Swiper Slideshow nur 1 Slide sichtbar --- */
@media (max-width: 1024px) {
  .swiper-slide {
    min-width: 100% !important;
    flex-shrink: 0;
  }
}

/* --- Tablet + Mobile (≤1024px) --- */
@media (max-width: 1024px) {
  /* Logo: größer (65px statt 50px) */
  .elementor-element-328d345 img {
    width: auto !important;
    height: 65px !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;
  }
}

/* --- Newsletter E-Mail-Input: Höhe begrenzen (flex-direction:column Bug) --- */
.koh-cta-form input[type="email"] {
  height: 48px !important;
  max-height: 48px !important;
  flex: none !important;
}

/* --- Mobile (≤767px) --- */
@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;
  }
}