/* =====================================================================
   Gardasee-Ferienwohnungen – Responsive-Korrekturen (Divi), Version 2
   Ohne grid, gap, clamp() und overflow: clip, damit der WordPress-Editor
   beim Einfügen keine Fehler meldet.
   Die Regeln mit .single-houses gelten für alle Ferienhaus-Seiten,
   die Header-Regeln für die gesamte Website.

   Hinweis zum Hero-Bild: Die Zeile mit dem Titel hat im Theme Builder
   margin-top: -150px. Deshalb sind die padding-top-Werte unten um 150 px
   höher, als sie optisch wirken.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Kleine Laptops (981–1500 px): Logo und Menü in einer Zeile
   --------------------------------------------------------------------- */
@media (min-width: 981px) and (max-width: 1500px) {
  #main-header > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 96% !important;
    max-width: none !important;
  }

  .et_header_style_centered #main-header .logo_container,
  .et_header_style_centered #main-header.et-fixed-header .logo_container {
    position: static;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    width: auto;
    height: 72px !important;
    margin-right: 16px;
  }

  .et_header_style_centered #logo,
  .et_header_style_centered #main-header.et-fixed-header #logo {
    width: auto;
    height: auto;
    max-height: 44px !important;
    margin: 0;
  }

  #main-header #et-top-navigation {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    min-width: 0;
    padding: 0 !important;
  }

  #main-header #top-menu-nav,
  #main-header #top-menu {
    display: flex;
    align-items: center;
    width: auto;
  }

  #main-header #top-menu-nav {
    flex: 0 1 auto;
    min-width: 0;
  }

  #top-menu {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  #top-menu > li {
    padding-right: 1.25vw;
  }

  #top-menu > li:last-child {
    padding-right: 0;
  }

  #top-menu > li > a,
  #main-header.et-fixed-header #top-menu > li > a {
    padding: 28px 0 !important;
    font-size: 1.02vw !important;
    line-height: 16px;
    white-space: nowrap;
  }

  #top-menu > li.menu-item-has-children > a {
    padding-right: 18px !important;
  }

  #top-menu .menu-item-has-children > a:first-child::after {
    top: 28px;
  }

  /* Untermenüs am rechten Rand nicht aus dem Fenster laufen lassen */
  #top-menu > li:nth-last-child(-n+2) > ul {
    right: 0;
    left: auto;
  }

  #main-header #et_top_search {
    flex: 0 0 auto;
    margin: 0 0 0 1vw;
  }

  .single-houses .et_pb_section_0_tb_body.et_pb_section {
    margin-top: 103px !important;
    padding-top: 320px !important;
    padding-bottom: 60px !important;
  }
}

/* Schmale Laptops/Tablets quer: Logo über dem Menü, aber trotzdem flach */
@media (min-width: 981px) and (max-width: 1180px) {
  #main-header > .container {
    flex-direction: column;
  }

  .et_header_style_centered #main-header .logo_container,
  .et_header_style_centered #main-header.et-fixed-header .logo_container {
    justify-content: center;
    width: 100%;
    height: 54px !important;
    margin-right: 0;
  }

  .et_header_style_centered #logo,
  .et_header_style_centered #main-header.et-fixed-header #logo {
    max-height: 38px !important;
  }

  #main-header #et-top-navigation {
    justify-content: center;
    width: 100%;
    flex: 0 0 auto;
  }

  #top-menu > li > a,
  #main-header.et-fixed-header #top-menu > li > a {
    padding: 0 0 13px !important;
    font-size: 12px !important;
  }

  #top-menu .menu-item-has-children > a:first-child::after {
    top: 0;
  }

  .single-houses .et_pb_section_0_tb_body.et_pb_section {
    margin-top: 114px !important;
  }
}

/* Laptops mit wenig Bildhöhe: Hero-Bild flacher */
@media (min-width: 981px) and (max-width: 1500px) and (max-height: 820px) {
  .single-houses .et_pb_section_0_tb_body.et_pb_section {
    padding-top: 280px !important;
    padding-bottom: 40px !important;
  }
}


/* ---------------------------------------------------------------------
   2. Klebende Tab-Leiste (Bilder, Umgebung, Preise …)
   --------------------------------------------------------------------- */
/* Reiter auf allen Bildschirmgrößen als Kacheln mit Rahmen */
.single-houses .et_pb_section_2_tb_body .et_pb_row_6_tb_body {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  background: #fff;
}

.single-houses .et_pb_section_2_tb_body .et_pb_row_6_tb_body::before,
.single-houses .et_pb_section_2_tb_body .et_pb_row_6_tb_body::after {
  display: none;
}

body.single-houses.et-db #page-container #et-boc .et-l .et_pb_section .et_pb_row_6_tb_body > .et_pb_column {
  display: flex;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 4px !important;
  border: 0 !important;
}

.single-houses .et_pb_section_2_tb_body .et_pb_row_6_tb_body .et_pb_button_module_wrapper {
  display: flex;
  width: 100%;
  margin: 0 !important;
}

body.single-houses.et-db #page-container #et-boc .et-l .et_pb_section .et_pb_row_6_tb_body .et_pb_button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0 !important;
  padding: 6px 18px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  text-align: center;
  white-space: nowrap;
  color: #6e8e2a !important;
  background-color: #fff !important;
  border: 1px solid #b0b321 !important;
  border-radius: 6px;
}

body.single-houses.et-db #page-container #et-boc .et-l .et_pb_section .et_pb_row_6_tb_body .et_pb_button:hover {
  background-color: #f4f6e8 !important;
}

.single-houses .et_pb_section_2_tb_body .et_pb_row_6_tb_body .et_pb_button::after {
  display: none;
}

@media (min-width: 981px) {
  /* „Was unsere Gäste sagen" nur in der normalen Ansicht zeigen */
  .single-houses .et_pb_section_2_tb_body.et_pb_sticky .et_pb_row_5_tb_body {
    display: none;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  body.single-houses.et-db #page-container #et-boc .et-l .et_pb_section .et_pb_row_6_tb_body .et_pb_button {
    padding: 6px 12px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 980px) {
  .single-houses .et_pb_section_2_tb_body .et_pb_row_5_tb_body {
    padding: 8px 0 !important;
  }

  .single-houses .et_pb_section_2_tb_body.et_pb_sticky .et_pb_row_5_tb_body {
    display: none;
  }

  .single-houses .et_pb_section_2_tb_body .et_pb_row_6_tb_body {
    justify-content: flex-start;
    padding: 5px 7px !important;
  }

  body.single-houses.et-db #page-container #et-boc .et-l .et_pb_section .et_pb_row_6_tb_body > .et_pb_column {
    padding: 3px !important;
  }

  body.single-houses.et-db #page-container #et-boc .et-l .et_pb_section .et_pb_row_6_tb_body .et_pb_button {
    padding: 4px 14px !important;
    font-size: 13px !important;
  }


  /* iOS unterstützt fixierte Hintergründe nur unzuverlässig */
  body.custom-background {
    background-attachment: scroll;
  }

  /* Kompakter mobiler Header */
  #main-header {
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }

  .et_header_style_centered #main-header .logo_container {
    height: 50px !important;
  }

  .et_header_style_centered #logo {
    max-height: 42px !important;
  }

  .single-houses .et_pb_section_0_tb_body.et_pb_section {
    margin-top: 153px !important;
    padding-top: 280px !important;
    padding-bottom: 30px !important;
  }

  body.single-houses.et-db #page-container #et-boc .et-l .et_pb_section_0_tb_body h1 {
    font-size: 60px !important;
    line-height: 1.15 !important;
  }

  /* Galerie mehrspaltig statt 22 Bilder untereinander */
  .single-houses .et_pb_gallery_grid .et_pb_gallery_items {
    display: flex !important;
    flex-wrap: wrap;
    margin: 0 -4px;
  }

  .single-houses .et_pb_gallery_grid .et_pb_gallery_items::before,
  .single-houses .et_pb_gallery_grid .et_pb_gallery_items::after {
    display: none;
  }

  .single-houses .et_pb_gallery_grid .et_pb_gallery_item {
    box-sizing: border-box;
    width: 33.3333% !important;
    margin: 0 !important;
    padding: 4px;
    clear: none !important;
  }

  /* Anfrageformular: 16 px verhindert das automatische Zoomen unter iOS */
  .wpcf7-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  .wpcf7-form select,
  .wpcf7-form textarea {
    font-size: 16px !important;
  }

  .wpcf7-form input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
}


/* Tablets hochkant und Smartphones: Reiter in einer wischbaren Zeile */
@media (max-width: 900px) {
  .single-houses .et_pb_section_2_tb_body .et_pb_row_6_tb_body {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .single-houses .et_pb_section_2_tb_body .et_pb_row_6_tb_body::-webkit-scrollbar {
    display: none;
  }
}


/* ---------------------------------------------------------------------
   3. Smartphones (bis 767 px)
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Volle Breite statt 5 % Rand links und rechts */
  .et_boxed_layout #page-container,
  .et_fixed_nav.et_boxed_layout #page-container #top-header,
  .et_fixed_nav.et_boxed_layout #page-container #main-header {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    left: 0 !important;
  }

  /* Tab-Leiste über die volle Breite, auch im klebenden Zustand */
  .single-houses #page-container {
    overflow-x: hidden;
  }

  body.single-houses.et-db #page-container #et-boc .et-l .et_pb_section.et_pb_section_2_tb_body {
    left: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.single-houses.et-db #page-container #et-boc .et-l .et_pb_section_0_tb_body h1 {
    font-size: 9vw !important;
  }

  .single-houses .et_pb_gallery_grid .et_pb_gallery_item {
    width: 50% !important;
  }

  /* Preistabellen in voller Breite ohne Überlauf */
  .single-houses #reveal5 table {
    width: 100% !important;
    max-width: 100%;
    font-size: 12px;
  }

  .single-houses #reveal5 table td,
  .single-houses #reveal5 table th {
    padding: 4px 3px !important;
    word-break: normal;
    white-space: nowrap;
  }

  /* Lange Seitentitel (z. B. Ferienunterkünfte) nicht abschneiden */
  #page-container .et_pb_fullwidth_header .header-content .et_pb_header_content_wrapper {
    font-size: 6.2vw !important;
    line-height: 1.2 !important;
  }
}

/* Sehr schmale Smartphones */
@media (max-width: 360px) {
  body.single-houses.et-db #page-container #et-boc .et-l .et_pb_section .et_pb_row_6_tb_body .et_pb_button {
    font-size: 12px !important;
  }
}

/* Smartphone quer: Hero nicht bildschirmfüllend */
@media (max-width: 980px) and (max-height: 500px) {
  .single-houses .et_pb_section_0_tb_body.et_pb_section {
    padding-top: 220px !important;
    padding-bottom: 20px !important;
  }
}


/* ---------------------------------------------------------------------
   4. Alle Inhalte sichtbar, Reiter als Ankernavigation
   Die Klasse gf-anker-navigation setzt gardasee-responsive.js.
   --------------------------------------------------------------------- */
.gf-anker-navigation.single-houses [id^="reveal"] {
  display: block !important;
  height: auto !important;
}

body.gf-anker-navigation.single-houses.et-db #page-container #et-boc .et-l .et_pb_section .et_pb_row_6_tb_body .et_pb_button.gf-aktiv {
  color: #fff !important;
  background-color: #6e8e2a !important;
  border-radius: 6px;
}

.gf-anker-navigation .et_pb_section_2_tb_body {
  transition: opacity 0.2s;
}

.gf-anker-navigation .et_pb_section_2_tb_body.gf-leiste-aus {
  opacity: 0;
  pointer-events: none;
}


/* ---------------------------------------------------------------------
   5. Schatten und Wisch-Hinweis für die Ankernavigation
   --------------------------------------------------------------------- */
/* Dezenter Schatten, sobald die Leiste über dem Inhalt klebt */
.single-houses .et_pb_section_2_tb_body.et_pb_sticky {
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.18);
}

/* Ausblenden am Rand zeigt, dass es seitlich weitergeht (Klassen setzt das JS) */
.single-houses .et_pb_section_2_tb_body .et_pb_row_6_tb_body.gf-mehr-rechts {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}

.single-houses .et_pb_section_2_tb_body .et_pb_row_6_tb_body.gf-mehr-links {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
}

.single-houses .et_pb_section_2_tb_body .et_pb_row_6_tb_body.gf-mehr-links.gf-mehr-rechts {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}