/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/

/* =========================================================
   MOBILE ONLY FINAL FIX
   - weißer Balken über ganze Breite/Höhe hinter Logo + Burger
   - Logo links beim Start sichtbar
   - Logo verschwindet beim Scrollen
   - Burger bleibt oben rechts
   - Menü öffnet über volle Viewport-Höhe
========================================================= */

@media (max-width: 767px) {

  /* gesamter mobiler Header */
  #mfn-header-template .mcb-section-3bc555651 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;

    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* weißer Balken wirklich über volle Breite */
  #mfn-header-template .mcb-section-3bc555651 .section_wrapper,
  #mfn-header-template .mcb-section-3bc555651 .mcb-section-inner {
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  /* beide Wraps sauber nebeneinander */
  #mfn-header-template .mcb-section-3bc555651 .wrap.mcb-wrap-356f61c40,
  #mfn-header-template .mcb-section-3bc555651 .wrap.mcb-wrap-88e51f289 {
    width: 50% !important;
    float: left !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Logo links */
  #mfn-header-template .mcb-section-3bc555651 .column_header_logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  /* beim Scrollen Logo ausblenden */
  body.has-scrolled-header #mfn-header-template .mcb-section-3bc555651 .column_header_logo {
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
  }

  /* Burger rechts */
  #mfn-header-template .mcb-section-3bc555651 .column_header_burger {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: right !important;
    width: 100% !important;
  }

  #mfn-header-template .mcb-section-3bc555651 .mfn-header-menu-burger,
  #mfn-header-template .mcb-section-3bc555651 .mfn-header-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
  }

  /* Overlays neutralisieren */
  #mfn-header-template .mcb-section-3bc555651 .mcb-background-overlay,
  #mfn-header-template .mcb-section-3bc555651 .mcb-wrap-background-overlay {
    background: transparent !important;
    opacity: 0 !important;
  }

  /* ========== MOBILE MENU / SIDEBAR ========== */

  /* Menüfläche über volle Höhe */
  #mfn-header-template .mcb-section-3bc555651 .mfn-header-tmpl-menu-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow-y: auto !important;
    z-index: 999999 !important;
  }

  /* innerer Menü-Wrapper */
  #mfn-header-template .mcb-section-3bc555651 .mfn-header-tmpl-menu-sidebar-wrapper {
    min-height: 100vh !important;
    height: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 20px 20px 40px !important;
    overflow-y: auto !important;
  }

  /* Menü-Liste darf nicht abgeschnitten werden */
  #mfn-header-template .mcb-section-3bc555651 ul#menu-mobilnav {
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 40px !important;
  }

  /* Content nicht unter den fixen Header schieben */
  body {
    padding-top: 76px !important;
  }
}
/* =========================================================
   MOBILE: weißer Balken beim Scrollen ausblenden,
   Burger bleibt sichtbar
========================================================= */
@media (max-width: 767px) {

  /* Start: weißer Balken sichtbar */
  #mfn-header-template .mcb-section-3bc555651 {
    background: #ffffff !important;
    transition: background 0.35s ease, box-shadow 0.35s ease;
  }

  #mfn-header-template .mcb-section-3bc555651 .section_wrapper,
  #mfn-header-template .mcb-section-3bc555651 .mcb-section-inner {
    background: #ffffff !important;
    transition: background 0.35s ease, padding 0.35s ease;
  }

  /* Beim Scrollen: Balken transparent */
  body.has-scrolled-header #mfn-header-template .mcb-section-3bc555651 {
    background: transparent !important;
    box-shadow: none !important;
  }

  body.has-scrolled-header #mfn-header-template .mcb-section-3bc555651 .section_wrapper,
  body.has-scrolled-header #mfn-header-template .mcb-section-3bc555651 .mcb-section-inner {
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}
/* =========================================================
   MOBILE: Burger Button mit weißem Background beim Scrollen
========================================================= */
@media (max-width: 767px) {

  body.has-scrolled-header 
  #mfn-header-template .mfn-header-menu-burger {

    /* Abstand vom Rand */
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 99999 !important;

    /* Weißer Hintergrund */
    background: #ffffff !important;

    /* Abstand um das Icon */
    padding: 10px !important;

    /* Rund / modern */
    border-radius: 999px !important;

    /* Schatten für bessere Sichtbarkeit */
    box-shadow: 0 6px 18px rgba(0,0,0,0.15) !important;

    /* Smooth */
    transition: all 0.3s ease;
  }

  /* Icon mittig halten */
  #mfn-header-template .mfn-header-menu-burger .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/* =========================================================
   MOBILE: Logo +6% größer
========================================================= */
@media (max-width: 767px) {

  #mfn-header-template .mcb-section-3bc555651 
  .column_header_logo img {
    transform: scale(1.20);
    transform-origin: left center;
  }

}

/* =========================================================
   0) Variablen
========================================================= */
:root{
  --topbar-h: 78px;
  --nav-h: 62px;
  --sticky-stack: calc(var(--topbar-h) + var(--nav-h));
  --brand-pink: #b61351;
  --white: #ffffff;
}

/* =========================================================
   1) Basis
========================================================= */
#Content{
  padding-top: 0 !important;
}

h1, h2, h3, h4, h5, h6{
  margin-bottom: 11px;
}

/* Nur Header-Sections im Header-Template */
#mfn-header-template .mcb-header-section{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   2) Headings / Custom Titles
========================================================= */
.custom-h1{
  position: relative;
  display: inline-block;
}

.custom-h1 .h1-script{
  position: absolute;
  top: 17px;
  left: 0;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;

  font-family: "absolute-beauty", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: rgba(182, 19, 81, 0.37);
  font-size: 150px;
}

.custom-h1 .h1-main{
  position: relative;
  z-index: 2;
  font-family: "owners-wide",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  font-weight: 700;
}

.custom-h2{
  position: relative;
  display: inline-block;
}

.custom-h2 .h2-script{
  position: absolute;
  top: 77px;
  left: 0;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;

  font-family: "absolute-beauty", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: rgba(182, 19, 81, 0.4);
  font-size: 120px;
}

.custom-h2 .h2-main{
  position: relative;
  z-index: 2;
  font-family: "owners-wide",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  font-weight: 700;
}

@media (max-width: 600px) and (orientation: portrait){
  .custom-h1 .h1-script{
    top: 17px;
    font-size: 75px;
  }

  .custom-h2 .h2-script{
    top: 70px;
    font-size: 85px;
  }
}

.head-title{
  font-family: "owners-wide",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !important;
}

.headertitel{
  font-family: "absolute-beauty", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #f4f4f4;
  font-size: 150px;
  line-height: 1.05;
  margin: 0;
}

@media (max-width: 1400px){
  .headertitel{ font-size: 100px; }
}
@media (max-width: 1024px){
  .headertitel{ font-size: 105px; }
}
@media (max-width: 768px){
  .headertitel{
    font-size: 90px;
    line-height: 1.1;
  }
}
@media (max-width: 480px){
  .headertitel{
    font-size: 80px;
    line-height: 0.65;
  }
}

/* =========================================================
   3) Header Spacer (kein body padding jump)
========================================================= */
@media (min-width: 1024px){
  #mfn-header-template{
    position: relative;
  }

  #mfn-header-template::before{
    content: "";
    display: block;
    height: 0;
    transition: height 0.75s ease;
  }

  body.has-scrolled-header #mfn-header-template::before{
    height: var(--sticky-stack);
  }
}

/* =========================================================
   4) Top Bar: #top-nav-sticky
========================================================= */
#top-nav-sticky{
  background-color: var(--white) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}

#top-nav-sticky .mcb-background-overlay{
  background-color: var(--white) !important;
  opacity: 1 !important;
}

#top-nav-sticky .sticky-logo{
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.65s ease, transform 0.65s ease;
}

body.has-scrolled-header #top-nav-sticky .sticky-logo{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =========================================================
   5) Navigation Section
========================================================= */
.mcb-section-372020885,
.mcb-section-inner-372020885,
.mcb-section-372020885 .section_wrapper{
  background-color: var(--white) !important;
}

.mcb-section-372020885 .mcb-background-overlay{
  background-color: transparent !important;
  opacity: 1 !important;
  transition: background-color 0.45s ease, box-shadow 0.45s ease;
}

.mcb-section-372020885{
  transition: background-color 0.45s ease, box-shadow 0.45s ease;
}

body.has-scrolled-header .mcb-section-372020885{
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

body.has-scrolled-header .mcb-section-372020885 .mcb-background-overlay{
  background-color: var(--white) !important;
}

/* =========================================================
   6) Main Logo Section
========================================================= */
.mcb-section-f7f3171bb,
.mcb-section-inner-f7f3171bb,
.mcb-section-f7f3171bb .section_wrapper{
  background-color: var(--white) !important;
}

.mcb-section-f7f3171bb .mcb-background-overlay{
  background-color: var(--white) !important;
  opacity: 1 !important;
}

#mfn-header-template .mcb-section-f7f3171bb{
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  max-height: 600px;
  overflow: hidden;
  transition:
    max-height 0.75s ease,
    padding 0.75s ease,
    margin 0.75s ease,
    opacity 0.75s ease,
    transform 0.75s ease;
}

body.has-scrolled-header #mfn-header-template .mcb-section-f7f3171bb{
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  opacity: 0 !important;
  transform: translateY(-12px) !important;
  pointer-events: none !important;
}

body.has-scrolled-header #mfn-header-template .mcb-section-f7f3171bb .section_wrapper,
body.has-scrolled-header #mfn-header-template .mcb-section-f7f3171bb .mcb-section-inner,
body.has-scrolled-header #mfn-header-template .mcb-section-f7f3171bb .wrap,
body.has-scrolled-header #mfn-header-template .mcb-section-f7f3171bb .mcb-wrap{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   7) Desktop / Laptop sticky only on scroll
========================================================= */
@media (min-width: 1024px){
  #top-nav-sticky{
    position: static;
    z-index: auto;
  }

  .mcb-section-372020885{
    position: static;
    z-index: auto;
  }

  body.has-scrolled-header #top-nav-sticky{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }

  body.has-scrolled-header .mcb-section-372020885{
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    z-index: 9998;
  }
}

/* =========================================================
   8) Gap fix between logo section and nav
========================================================= */
@media (min-width: 1024px){
  body:not(.has-scrolled-header) #mfn-header-template .mcb-section-f7f3171bb + .mcb-section-372020885{
    margin-top: -20px !important;
  }
}

#mfn-header-template .mcb-section-372020885 .section_wrapper,
#mfn-header-template .mcb-section-372020885 .mcb-section-inner{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* =========================================================
   9) Tablet portrait
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
  #top-nav-sticky .column_button .button{
    transform: scale(0.8);
    transform-origin: right center;
    white-space: nowrap;
  }

  #top-nav-sticky .column_button .button .button_label{
    font-size: 0.9em;
  }
}

/* =========================================================
   10) Tablet landscape touch: sticky on load for subpages only
========================================================= */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse){

  body:not(.home):not(.front-page) #mfn-header-template::before{
    content: "" !important;
    display: block !important;
    height: var(--sticky-stack) !important;
    transition: height 0.55s ease;
  }

  body:not(.home):not(.front-page) #top-nav-sticky{
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 9999 !important;
  }

  body:not(.home):not(.front-page) .mcb-section-372020885{
    position: fixed !important;
    top: var(--topbar-h) !important;
    left: 0;
    right: 0;
    z-index: 9998 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
  }

  body:not(.home):not(.front-page) #top-nav-sticky .sticky-logo{
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  body:not(.home):not(.front-page) #mfn-header-template .mcb-section-f7f3171bb{
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    transform: translateY(-12px) !important;
    pointer-events: none !important;
    transition: max-height 0.55s ease, opacity 0.55s ease, transform 0.55s ease;
  }

  body:not(.home):not(.front-page) #mfn-header-template .mcb-section-f7f3171bb .section_wrapper,
  body:not(.home):not(.front-page) #mfn-header-template .mcb-section-f7f3171bb .mcb-section-inner,
  body:not(.home):not(.front-page) #mfn-header-template .mcb-section-f7f3171bb .wrap,
  body:not(.home):not(.front-page) #mfn-header-template .mcb-section-f7f3171bb .mcb-wrap{
    margin: 0 !important;
    padding: 0 !important;
  }

  body:not(.home):not(.front-page) #mfn-header-template .mcb-section-f7f3171bb + .mcb-section-372020885{
    margin-top: 0 !important;
  }

  body:not(.home):not(.front-page) .mcb-section-372020885 .mcb-background-overlay{
    background-color: var(--white) !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   11) Mobile nav button
========================================================= */
li.button-mobi-nav > a.mfn-menu-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Oswald", sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  padding: 15px 22px !important;
  border: 2px solid var(--brand-pink);
  border-radius: 0;
  background-color: var(--white);
  color: var(--brand-pink);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

li.button-mobi-nav > a.mfn-menu-link .menu-label{
  color: var(--brand-pink) !important;
}

li.button-mobi-nav > a.mfn-menu-link .mfn-menu-subicon i{
  color: var(--brand-pink) !important;
  transition: inherit;
}

li.button-mobi-nav:hover > a.mfn-menu-link{
  background-color: var(--brand-pink);
  color: var(--white);
  border-color: var(--brand-pink);
}

li.button-mobi-nav:hover > a.mfn-menu-link .menu-label,
li.button-mobi-nav:hover > a.mfn-menu-link .mfn-menu-subicon i{
  color: var(--white) !important;
}

/* =========================================================
   12) Overlays
========================================================= */
.mcb-background-overlay{
  display: block;
}

.mcb-wrap-background-overlay,
.mcb-background-overlay{
  pointer-events: none;
}

/* =========================================================
   13) Hotel layout base
========================================================= */
@media (min-width: 960px){
  .drei-tannen-hotel-gallery{
    min-height: 560px;
  }
}

.drei-tannen-hotel{
  display: flex;
  gap: 32px;
  align-items: stretch;
}

.drei-tannen-hotel-gallery{
  position: relative;
  flex: 1 1 auto;
  min-height: 420px;
  border-radius: 2px;
  overflow: hidden;
}

.drei-tannen-hotel-gallery img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
  display: block;
}

.drei-tannen-hotel-gallery img.current{
  opacity: 1;
  visibility: visible;
}

.drei-tannen-hotel-legend{
  flex: 0 0 320px;
  max-width: 320px;
  min-width: 0;
}

.drei-tannen-hotel-legend h2,
.drei-tannen-hotel-legend h3{
  margin-top: 0;
}

.drei-tannen-hotel-legend ul.drei-tannen-hotel-list{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drei-tannen-hotel-legend ul.drei-tannen-hotel-list > li{
  list-style: none !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  user-select: none !important;
  background: rgba(0,0,0,.03) !important;
  box-sizing: border-box;
}

.drei-tannen-hotel-legend ul.drei-tannen-hotel-list > li::before,
.drei-tannen-hotel-legend ul.drei-tannen-hotel-list > li::after{
  content: none !important;
  display: none !important;
}

.drei-tannen-hotel-icon{
  width: 10px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.25) !important;
  flex: 0 0 10px !important;
}

.drei-tannen-hotel-legend ul.drei-tannen-hotel-list > li.current{
  background: rgba(0,0,0,.06) !important;
  font-weight: 600 !important;
  color: var(--brand-pink) !important;
}

.drei-tannen-hotel-legend ul.drei-tannen-hotel-list > li.current .drei-tannen-hotel-icon{
  background: var(--brand-pink) !important;
}

.drei-tannen-hotel-legend ul.drei-tannen-hotel-list > li:hover{
  background: rgba(0,0,0,.05) !important;
}

.drei-tannen-hotel-legend ul.drei-tannen-hotel-list > li:focus{
  outline: 2px solid rgba(0,0,0,.35) !important;
  outline-offset: 2px !important;
}

@media (max-width: 959px){
  .drei-tannen-hotel{
    flex-direction: column;
  }

  .drei-tannen-hotel-legend{
    flex: 0 0 auto;
    max-width: none;
    order: -1;
  }

  .drei-tannen-hotel-gallery{
    min-height: 280px;
  }
}

/* =========================================================
   14) Hotel tablet landscape overflow fix
========================================================= */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape){

  .mcb-wrap-98647071e,
  .mcb-wrap-98647071e .mcb-wrap-inner,
  .mcb-wrap-98647071e .mcb-column,
  .mcb-wrap-98647071e .mcb-column-inner,
  .mcb-wrap-98647071e .mfn-html-editor-wrapper,
  .mcb-wrap-98647071e .drei-tannen-hotel-legend{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .mcb-wrap-98647071e ul.drei-tannen-hotel-list{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .mcb-wrap-98647071e ul.drei-tannen-hotel-list > li{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  .mcb-wrap-98647071e ul.drei-tannen-hotel-list > li > span{
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  .mcb-wrap-98647071e .drei-tannen-hotel-icon{
    flex: 0 0 10px !important;
    flex-shrink: 0 !important;
  }

  .mcb-wrap-98647071e .button{
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/* Fallback stacking */
body.dth-stack .mcb-section-c10e9f70c .wrap{
  width: 100% !important;
}

body.dth-stack .mcb-section-c10e9f70c .mcb-wrap-98647071e{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* =========================================================
   15) Hero video
========================================================= */
.dth-hero{
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.dth-hero__video{
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

.dth-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
  z-index: 1;
  pointer-events: none;
}

.dth-hero__overlay{
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 28px 18px;
  text-align: center;
}

.dth-hero__inner{
  max-width: 980px;
  width: 100%;
}

.dth-hero__logo{
  width: min(280px, 72vw);
  height: auto;
  margin-bottom: 14px;
  display: inline-block;
}

.dth-hero__headline{
  color: #fff;
  margin: 0;
}

@media (min-width: 1025px){
  .dth-hero{
    height: 62vh;
    min-height: 520px;
    max-height: 880px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
  .dth-hero{
    height: 52vh;
    min-height: 420px;
    max-height: 620px;
  }
}

@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape){
  .dth-hero{
    height: calc(100vh - var(--sticky-stack));
    min-height: 520px;
  }
}

@media (max-width: 767px){
  .dth-hero{
    height: calc(100vh - 116px);
    min-height: 520px;
  }

  .dth-hero__overlay{
    padding: 20px 14px;
  }

  .dth-hero__logo{
    width: min(240px, 78vw);
  }
}

/* =========================================================
   16) Speisekarte tablet portrait fixes
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){

  .price_wrapper.spl_main_content_box.custom-style-4,
  .price_wrapper.spl_main_content_box.custom-style-4 .masonary-section,
  .price_wrapper.spl_main_content_box.custom-style-4 .style-4-main-section{
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  .custom-style-4 ul#tiles{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .custom-style-4 ul#tiles li{
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
  }

  .price_wrapper.spl_main_content_box.custom-style-4{
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-left: 70px !important;
    padding-right: 70px !important;
    box-sizing: border-box !important;
  }

  .price_wrapper.spl_main_content_box.custom-style-4 .masonary-section{
    max-width: 708px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .price_wrapper.spl_main_content_box{
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  .price_wrapper ul[id^="tiles"]{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .price_wrapper ul[id^="tiles"] > li{
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    float: none !important;
    display: block !important;
  }

  .price_wrapper .col-sm-6{
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  .price_wrapper .name-price-desc{
    margin-bottom: 14px !important;
  }
}

/* =========================================================
   17) Speisekarte style
========================================================= */
.ui-tabs .ui-tabs-nav li a{
  font-size: 22px;
  font-weight: 600;
}

.price_wrapper ul.tab-links_spl{
  text-align: left !important;
  margin-bottom: 10px !important;
}

ul.tab-links_spl li{
  margin: 2px 0 !important;
}

@media screen and (max-width: 600px){
  .price_wrapper ul.tab-links_spl{
    text-align: center !important;
  }
}

#spl_1769598375.price_wrapper ul.tab-links_spl:not(.style-6) li a,
#spl_1769598375.price_wrapper h3.tab-links_spl,
#spl_8865334910.price_wrapper ul.tab-links_spl:not(.style-6) li a,
#spl_8865334910.price_wrapper h3.tab-links_spl,
#spl_3270043983.price_wrapper ul.tab-links_spl:not(.style-6) li a,
#spl_3270043983.price_wrapper h3.tab-links_spl{
  letter-spacing: 0 !important;
}

/* =========================================================
   18) Veranstaltungen / Reservation
========================================================= */
.post-desc{
  background-color: #fff;
}

.col-xs-3.col-sm-3.col-md-3.col-lg-3{
  position: relative;
  padding-right: 5px !important;
  padding-left: 5px !important;
}

.single-post .dt-single-post-reservation-wrap{
  margin: 25px 0 0;
  text-align: right;
}

.single-post .dt-single-post-reservation-button{
  display: inline-block;
  background: var(--brand-pink);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 0;
  text-decoration: none;
  border: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

.single-post .dt-single-post-reservation-button:hover{
  background: #a8844c;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

.single-post .dt-single-post-reservation-button:active{
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.wrap.mcb-wrap.mcb-wrap-7c314bdbe.two-third.tablet-two-third.laptop-two-third.mobile-one.vb-item.clearfix {
  margin-bottom: -90px;
}
.wrap.mcb-wrap.mcb-wrap-4233a87d7.two-third.tablet-two-third.laptop-two-third.mobile-one.vb-item.clearfix {
  margin-bottom: -90px;
}

/* Hotel */
.drei-tannen-hotel.container{
  display:flex;
  gap:32px;
}

.drei-tannen-hotel-gallery{
  position:relative;
  width:100%;
  min-height:320px;
  overflow:hidden;
}

.drei-tannen-hotel-gallery img.fullwidth{
  position:absolute;
  inset:0;
  width:100%;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease;
}

.drei-tannen-hotel-gallery img.current{
  position:relative;
  opacity:1;
  visibility:visible;
}

.drei-tannen-hotel-legend{
  width:320px;
}

.drei-tannen-hotel-list{
  list-style:none;
  padding:0;
  margin-top:20px;
}

.drei-tannen-hotel-list li{
  padding:10px 12px;
  cursor:pointer;
  border-radius:8px;
}

.drei-tannen-hotel-list li.current{
  background:#eee;
  font-weight:600;
}

@media (max-width: 959px){
  .drei-tannen-hotel.container{
    flex-direction:column;
  }
}