@import url("/css/styles_fonts.css");

:root { 
	--black: #363131; 
	--white: #ffffff; 
	--grey: #1c1c1c;
	--toplinecolor: #d3b7ac;
	--toplinecolor-font: #363131;
	--toplinecolor-font-alternativ: #ffffff;
	--toplinecolor-hover:#b8887a;
	--formborder: #cccccc;
	--formbackground: #ffffff;
	--formradius: 8px;
	--formcolor:#333333;
	--formfocus:#fefefe;
	--beige: #EFE3D8;
	--beigehell: rgba(239, 227, 216, 0.4); /*EFE3D8 40% */
	--beigedunkel: #D2B8AB; 
	--accent: var(--beigedunkel); 
	--text: var(--black); 
	--bg: var(--white); 
	--bg2: #072834; 
	--bg2-alpha: rgba(7,40,52,0.2); 
	--content-breite:1080px; 
	--content-breite2: 1200px; 
	--nav-breite:1080px; 
	--arsenica: "arsenica-variable", sans-serif; 
	--font-fliesstext: "komet", sans-serif; font-weight: 300; font-style: normal; 
	--arsenica-settings: "opsz" 100, "wght" 700; 
	--kometMedia:"komet", sans-serif; font-weight: 500; font-style: bold; 
	--menu-height: 150px; 
	--content-area: calc(100vh - var(--menu-height)) 
}

* { margin:0px; padding:0px; box-sizing:border-box; }

html { overflow-x: hidden; }
body { font-family: var(--font-fliesstext); height:100%; width:100%; color:var(--text); font-size: 20px; line-height: 30px; font-weight: 300; background-color: var(--bg); margin:0px; padding:0px; }
body.menuOpen { height: 100vh; overflow: hidden }

body a {color: var(--black)}
.bigButton  a, .bigButton  {color: var(--black); text-decoration: none !important}

/* Klassen ---------------------------- */

.bg_0 {background-color: #ffffff}
.bg_1 {background-color: var(--beigehell)}
.bg_2 {background-color: var(--beige)}

.mw1070px, .layout_3 .contentInnen { max-width: 1070px; margin: 0px auto }

.abstand { clear: both; }
.abstand::after { content: " "; display: block; clear: both }
.center { text-align: center }
.pt_0 { padding-top:0px !important; display: block; width: 100%; height: 0px }
.pt_1 { padding-top:20px !important; display: block; width: 100%; height: 0px }
.pt_2 { padding-top:50px !important; display: block; width: 100%; height: 0px }
.pt_3 { padding-top:70px !important; display: block; width: 100%; height: 0px }
.pt_4 { padding-top:120px !important; display: block; width: 100%; height: 0px }
.pt_5 { padding-top:160px !important; display: block; width: 100%; height: 0px }
.pt_6 { padding-top:240px !important; display: block; width: 100%; height: 0px }
.abstand.pt_0 { display: none }
.pb_0 { padding-bottom:0px !important; display: block; width: 100%; height: 0px }
.pb_1 { padding-bottom:20px !important; display: block; width: 100%; height: 0px }
.pb_2 { padding-bottom:50px !important; display: block; width: 100%; height: 0px }
.pb_3 { padding-bottom:70px !important; display: block; width: 100%; height: 0px }
.pb_4 { padding-bottom:120px !important; display: block; width: 100%; height: 0px }
.pb_5 { padding-bottom:160px !important; display: block; width: 100%; height: 0px }
.pb_6 { padding-bottom:240px !important; display: block; width: 100%; height: 0px }
.pb_7 { padding-bottom:80px !important; display: block; width: 100%; height: 0px }
.abstand.pb_0 { display: none }
.uppercaser { text-transform: uppercase }
.cmstext p { margin-bottom: 30px; font-size: 18px; line-height: 26px; }
.w50pro { width: 50% }
.w70pro { width: 70% }
.mr30px { margin-right: 30px }
.kometMedia { font-family: var(--kometMedia); font-weight: bold }
.mobileOnly { display: none !important }
.hc_beige { color:var(--beige) !important }
.hc_schwarz { color:var(--black) !important }
.fs14, .fs14 * { font-size: 14px }
.fs18, .fs18 * { font-size: 18px; line-height: 26px }

/* diverse Divs  ---------------------- */
h1, .h1like {  font-family: var(--arsenica); font-weight: bold; font-size: 40px; padding-top: 70px; padding-bottom: 70px; line-height: 50px }
h2, .h2like {  font-size: 32px; line-height: 40px; margin-bottom: 15px; width: 100% }
h3, .h3like {  font-size: 28px; line-height: 36px; width: 100% }
h4, .h4like {  font-size: 24px; line-height: 32px; width: 100% }
.footer {background-color: var(--beige); padding-top: 50px;}
#adresse h1, #adresse h2, #adresse h3 { color: var(--white) }
.headline-wrap { display: flex; align-items: center }
.adresseLogo { width: 100%; margin: 0px auto; text-align: center;  margin-bottom: 70px }
.adresseLogo img { mix-blend-mode: multiply; filter: brightness(0); width: 750px; max-width: 100% }
.adresseValues { display: flex; margin-bottom: 80px; justify-content: space-between; padding: 0 90px; gap: 20px; }
.adresseValues > div { flex: 1; }
.adresseValues .textRight { text-align: right; font-family: var(--kometMedia); font-size: 25px; font-weight: bold; text-decoration: underline; line-height: 40px }
.footer .textRight a, .adresseValues a{color: var(--black); }
.lastLine { height: 100px; display: flex; flex-wrap: wrap; justify-content: flex-end; background-color: var(--beigedunkel); color: var(--white); align-items: center; font-family: var(--kometMedia); font-size: 25px }
.headline:not(:empty) { font-family: var(--arsenica); font-weight: bold; font-size: 40px; padding-top: 70px; padding-bottom: 70px; line-height: 50px }
.header-content strong { font-family: var(--arsenica); font-weight: bold; font-size: 30px }
.mainContent strong {font-family: var(--font-fliesstext); font-size: 22px; font-weight: bold}
.mainContent a {color: var(--black)}
.mobileOnly { display: none !important }
.lastLine .adresseValues { margin-bottom: 0px }
.subline .beigedunkel { color: var(--beigedunkel); font-family: var(--arsenica); text-align: center; font-size: 50px; font-weight: bold; line-height: 50px; max-width: 80%; margin: 0px auto; }
.c0 { color: var(--text) }
.c1 { color: var(--dark-green) }
.c2 { color: var(--white) }
.black h1 { color: #fff }
.black h2 { color: #fff }
.split h2 { font-size: 50px; line-height: 65px; margin-top: 50px }
.contentAfter .block { margin-top: 126px; margin-left: 7px }
.contentAfter .block .line { width: 180px; height: 3px; margin-top: 30px; margin-bottom: 30px; border-radius: 20px; background-color: var(--white) }

/* FIXING Animation on Load */
.boxOuter { display: flex; justify-content: center }
.work { font-family: var(--font-fliesstext); font-weight: 400 }
.cblack { color: #000000 }
.bold { font-weight: bold }
.normal { font-weight: normal }
.tac { text-align: center }
.mb10 { margin-bottom: 10px }
.mb20 { margin-bottom: 20px }
.mb30 { margin-bottom: 30px }
.mb40 { margin-bottom: 40px }
.mb60 { margin-bottom: 60px }
.mb80 { margin-bottom: 80px }
.mt10 { margin-top: 10px }
.mt20 { margin-top: 20px }
.mt30 { margin-top: 30px }
.mt40 { margin-top: 40px }
.mt60 { margin-top: 60px }
.mt80 { margin-top: 80px }
.flex { display: flex }
.flex.justifyAround { justify-content: space-around }
.flex.justifyBetween { justify-content: space-between }
.flex.alignCenter { align-items: center }
.flex.gap15 { gap: 15px }
.text-center { text-align: center }
.wsnowrap { white-space: nowrap }
.uppercaser { text-transform: uppercase }

/* Basis-Styling für das Headerbild */
.topSection { position: relative; width: 100%; }
.headerbildOuter { width: 100%; overflow: hidden; position: relative; }
.headerbild { width: 100%; height: auto; position: relative; }
.headerbild img { width: 100%; height: auto; display: block; }

/* Navigation Elemente über dem Bild */
.menuOuter { position: fixed; top: 20px; right: 20px; z-index: 1000; display: flex; align-items: center; }
.menu { padding: 10px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; backdrop-filter: blur(10px); transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.menu:hover { background: rgba(210, 180, 170, 1); transform: scale(1.05); }
.logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 900; color: white; font-size: 2.5rem; font-weight: bold; text-align: center; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
.logo img { max-width: 33vw; }
.menu .menuLine { width: 32px; height: 3px; background-color: #eadbdb; margin-bottom: 10px; }
.menu .menuLine:last-child { margin-bottom: 0px; }
.menu:hover .menuLine { background-color: var(--black); }
.langChanger { text-align: center; color: var(--white); margin-left: 20px; font-family: var(--kometMedia); font-size: 30px }
.menuOuter.invers .menu { backdrop-filter: unset; transition: unset; box-shadow: unset; }
.menuOuter.invers .langChanger { color: var(--beigedunkel) }
.menuOuter.invers .menuLine { background-color: var(--black) }
.menuOuter.invers .menu:hover .menuLine { background-color: var(--black) }

.buttons { position: fixed; right: 0px; top: 35vH; transform: translateY(-50%); z-index: 900; color: var(--black); justify-content: space-between; display: flex; flex-direction: column; font-family: var(--arsenica); font-variation-settings: var(--arsenica-settings); }
.buttons .button { width: auto; height: auto; background-color: var(--beige); border-radius: 50px 0px 0px 47px; margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: left; align-items: center; padding: 50px; font-weight: bold; font-size: 40px; border: 1px solid var(--white); line-height: 0px }
.site_ferienwohnungen .buttons {display: none}


/* Fewos */
body.showFerienwohnungen .content_part_ferienwohnungen-und-preise{}

.textLinksGalRechts {display: flex;width: 1600px;max-width: 100%; margin: 0 auto; background: linear-gradient(to bottom, transparent 100%, transparent 0), linear-gradient(to left, var(--beigedunkel) 60%, transparent 0);}
.textLinksGalRechts .texte {flex: 0 0 40%;  padding: 0px 50px; display: flex; flex-direction: column; justify-content: flex-start;}
.textLinksGalRechts .headline {align-self: flex-start;  display: inline-block;  border-bottom: 1px solid black; padding-bottom: 5px; padding-top: 0px}
.textLinksGalRechts .headline2 {font-size: 28px; line-height: 35px; font-family: var(--font-fliesstext); font-weight: 100; margin-top: 10px}
.textLinksGalRechts .subline {}
.textLinksGalRechts .text {margin-top: 30px; font-size: 28px; line-height: 35px; font-family: var(--font-fliesstext); font-weight: 100; }
.textLinksGalRechts .galerie {flex: 0 0 60% ;position: relative;}
.textLinksGalRechts  .content-part-galerie-bild {width: 100%;  height: 100%;  object-fit: cover;  display: block;position: relative;  left: 50px;top: 50px;}
.textLinksGalRechts .bigButtonOuter {margin-top: 30px; padding: 0px; padding-top: 30px}	 
.textLinksGalRechts .bigButtonOuter .bigButton {display: inline}	 


@media (max-width: 768px) {
.textLinksGalRechts {flex-direction: column-reverse; padding-bottom: 30px; margin-bottom: 100px; background: linear-gradient(to bottom, transparent 100%, transparent 0), linear-gradient(to left, var(--beigedunkel) 80%, transparent 0);}
.textLinksGalRechts .content-part-galerie-bild {width: calc(100% - 150px); top: -50px}
.textLinksGalRechts .texte {padding: 0px 20px 0px 25%}
.textLinksGalRechts .headline {font-size: 22px; line-height: 25px; padding: 0px}
.textLinksGalRechts .headline2 {font-size: 16px; line-height: 18px;}
.textLinksGalRechts .subline {font-size: 16px; line-height: 18px;}	 
.textLinksGalRechts .text {font-size: 16px; line-height: 18px;}	 	 
.textLinksGalRechts .galerie {}
}

.textRechtsGalLinks {display: flex;width: 1600px;max-width: 100%; margin: 0 auto; background: linear-gradient(to bottom, transparent 100%, transparent 0), linear-gradient(to right, var(--beigedunkel) 60%, transparent 0); }
.textRechtsGalLinks .galerie {flex: 0 0 60%;position: relative}
.textRechtsGalLinks .content-part-galerie-bild { width: 100%;  height: 100%;  object-fit: cover;  display: block;position: relative;  left: 50px;top: 50px;}
.textRechtsGalLinks .texte {flex: 0 0 40%;  padding: 0px 50px 0px 100px; display: flex; flex-direction: column; justify-content: flex-start;}
.textRechtsGalLinks .headline {align-self: flex-start;  display: inline-block;  border-bottom: 1px solid black; padding-bottom: 5px; padding-top: 0px}
.textRechtsGalLinks .headline2 {font-size: 28px; line-height: 35px; font-family: var(--font-fliesstext); font-weight: 100; margin-top: 10px}
.textRechtsGalLinks .subline {}
.textRechtsGalLinks .text {margin-top: 30px; font-size: 28px; line-height: 35px; font-family: var(--font-fliesstext); font-weight: 100; }
.textRechtsGalLinks .bigButtonOuter {margin-top: 30px; padding: 0px; padding-top: 30px}
.textRechtsGalLinks .bigButtonOuter .bigButton {display: inline}	

.textLinksGalRechts .galerie, .textRechtsGalLinks .galerie {padding-bottom: 100px}
.textLinksGalRechts .galerie .gallery-slider img, .textRechtsGalLinks .galerie .gallery-slider img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}


a .buttonBuchen, a .buttonAnfragen, a .bigButton, a.noliner, .buttons a  {text-decoration: none !important}
a.white {color: var(--white) !important}

/* Kontaktformular */
.kontaktformular { margin: 0 auto; font-size: 1rem; color:var(--formcolor)}
.kontaktformular .split {  display: flex;  flex-wrap: wrap;gap: 1.5rem;  margin-bottom: 1.5rem;}
.kontaktformular .half {  flex: 1 1 45%; display: flex;flex-direction: column;}
.kontaktformular label { font-weight: 600; margin-bottom: 0.25rem;  display: block;color: #222;}
.kontaktformular label p {  display: inline;margin: 0;}
.kontaktformular input,
.kontaktformular textarea {  padding: 0.75rem;  border: 1px solid var(--formborder);  border-radius: var(--formradius);  font-size: 1rem;  background-color: var(--formbackground);  transition: border-color 0.3s ease;}
.kontaktformular input:focus,
.kontaktformular textarea:focus { outline: none;  border-color: var(--black);  background-color: var(--formfocus);}
.kontaktformular textarea { min-height: 120px; resize: vertical; width: 100%}
.accentButton { font-weight: bold; background-color: var(--toplinecolor); color: var(--toplinecolor-font);  border: none;  padding: 0.8rem 1.5rem;  border-radius: 8px;  font-size: 1rem;  cursor: pointer;  transition: background-color 0.3s ease; margin-top: 2rem;font-family: var(--font-fliesstext);	}
.accentButton:hover { background-color: var(--toplinecolor-hover);}
.kontaktformular select { padding: 0.75rem;  border: 1px solid var(--formborder);  border-radius: var(--formradius);  font-size: 1rem; background-color: var(--formbackground);transition: border-color 0.3s ease;  appearance: none;}
.kontaktformular select:focus {outline: none; border-color: var(--black);  background-color: var(--formfocus);}
.kontaktformular input[type="checkbox"] + label::before{font-size: 0.95rem;color: var(--black);}
.kontaktformular .labelLike{font-size: 0.95rem;color: var(--black); font-weight: 600; line-height: 1.2rem}
.checkboxWrapper input[type="checkbox"] {appearance: none;  -webkit-appearance: none;  width: 20px;  height: 20px;  border: 2px solid var(--formborder);  border-radius: 50%;  background-color: var(--formbackground);  cursor: pointer;  position: relative;  transition: background-color 0.2s ease;}
.checkboxWrapper input[type="checkbox"]:checked { background-color: var(--toplinecolor-hover);border-color: var(--toplinecolor-hover);}
.checkboxWrapper input[type="checkbox"]:checked::after {  content: '✔';  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -52%);  font-size: 14px;  color: var(--white);font-weight: bold;}		
button:disabled, button[disabled] {background-color: var(--toplinecolor-hover);color: var(--white);opacity: 0.2;}	
.checkmark {  display: inline-block;  width: 28px;  height: 28px;  border: 2px solid var(--formborder);  border-radius: 50%;  background-color: var(--formbackground);  position: relative;  cursor: pointer;  transition: background-color 0.2s ease;}
.checkmark.aktiv {background-color: var(--toplinecolor-hover); border:var(--toplinecolor-hover);}
.checkmark.aktiv::after {content: '✔'; position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -52%);  font-size: 14px;  color: white;  font-weight: bold;}
.date-wrapper {position: relative;display: flex;align-items: center;}
.date-wrapper input[type="text"] {width: 100%;padding-right: 30px; /* Platz für das Icon */}
.calendar-icon {position: absolute;	right: 10px;	cursor: pointer;	font-size: 18px;	color: #666;}
.awesomplete {width: 100%; display: block}
.styled-input {width: 100%;  padding: 10px 12px;  border: 1px solid var(--formborder);  border-radius: var(--formradius);  font-size: 1rem;}
.awesomplete li {display: flex;align-items: center;  gap: 8px;}
.awesomplete li .flag-icon {display: inline-block;  width: 20px;  height: 15px;  margin-right: 8px;  vertical-align: middle;  background-size: contain !important;  background-position: 50% 50% !important;background-repeat: no-repeat !important;}
.awesomplete > ul > li[aria-selected="true"] {background: var(--toplinecolor) !important; color: var(--toplinecolor-font) !important;}
.adresseSmall {  font-size: 0.9rem;line-height: 1.4;  margin-top: 2rem;}
.adresseSmall .line {margin-bottom: 0.3rem;}
.adresseSmall .line strong {font-weight: 600}
.adresseSmall a {  color: var(--toplinecolor-hover);  text-decoration: none;}
.adresseSmall a:hover {text-decoration: underline;}

@media (max-width: 768px) {
.kontaktformular {padding: 1rem;}
.kontaktformular .half {flex: 1 1 100%;}
.accentButton {width: 100%;margin-top: 1rem;}
.adresseSmall {margin-top: 2rem;width: 100%;}
}
/* Kontaktformular */


 @media (max-width: 768px) {
.textRechtsGalLinks {flex-direction: column; padding-bottom: 30px; margin-bottom: 100px; background: linear-gradient(to bottom, transparent 100%, transparent 0), linear-gradient(to right, var(--beigedunkel) 80%, transparent 0);}
.textRechtsGalLinks .content-part-galerie-bild {width: calc(100% - 150px); top: -50px}
.textRechtsGalLinks .texte {padding:0px 25% 0px 20px;}
.textRechtsGalLinks .headline {padding: 0px}
.textRechtsGalLinks .headline {font-size: 22px; line-height: 25px; padding: 0px}
.textRechtsGalLinks .headline2 {font-size: 16px; line-height: 18px;}
.textRechtsGalLinks .subline {font-size: 16px; line-height: 18px;}	 
.textRechtsGalLinks .text {font-size: 16px; line-height: 18px;}	 	 
.textRechtsGalLinks .galerie {}
.textLinksGalRechts .galerie, .textRechtsGalLinks .galerie {padding-bottom: 0px}	 
}

.dreiSpalten {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.dreiSpalten .spalte {
  flex: 1 1 200px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dreiSpalten .bild {
  width: 100%;
  aspect-ratio: 3 / 2; /* z.B. 1.5 Verhältnis */
  overflow: hidden;
}

.dreiSpalten .bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dreiSpalten .text {
  margin-top: 10px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
}

@media (max-width: 768px) {
  .dreiSpalten {
	display: block
  }

 .dreiSpalten .spalte {
display: block; width: 100%
  }
}


#openmap {
  width: 100%;
  height: 500px;
  max-width: 100%;
}

/* Optional: etwas responsiver bei sehr kleinen Geräten */
@media (max-width: 768px) {
  #openmap {
    height: 300px; /* kleinere Höhe auf kleinen Geräten */
  }
}


/* Mobile Navigation - Slide-in Menü */
.mobile-menu { position: fixed; top: 0; right: -100%; width: 400px; max-width: 80%; height: 100vh; background: var(--beigedunkel); backdrop-filter: blur(15px); z-index: 1100; transition: right 0.4s ease-in-out; padding: 60px 30px 30px; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); }
.mobile-menu.active { right: 0; }
.mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 1050; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }
.menu-close { position: absolute; top: 15px; right: 20px; font-size: 30px; cursor: pointer; color: #333; }

/* Desktop und Tablet - normales responsives Verhalten */
@media screen and (min-width: 768px) {
    .headerbildOuter { height: auto; }
    .headerbild img { width: 100%; height: auto; object-fit: cover; }
}

/* Mobile Geräte - Fullscreen Hero mit Scroll-Möglichkeit */
@media screen and (max-width: 768px) {
.menuOuter { display: flex; flex-direction: column; justify-content: center; position: absolute }
.mobile-menu {width: 90%; max-width: 90%}	
.langChanger { margin-left: 0px; font-size: 25px; margin-top: 10px; font-family: var(--kometMedia); font-weight: bold }
.adresseLogo {margin-bottom: 50px}
.adresseLogo img { max-width: 75% }
.adresseValues { flex-direction:column; padding: 0px; gap:40px; text-align: center}
.adresseValues .textRight {text-align: center; font-size: 22px; line-height: 35px}
.lastLine {justify-content: center}
.lastLine .textRight {font-weight: normal; font-size: 15px}
.mobileOnly { display: block !important }
.header-content strong { font-family: var(--arsenica); font-weight: bold;  line-height: 20px }	
.pt_0 { padding-top:10px !important; display: block; width: 100%; height: 0px }
.pt_1 { padding-top:10px !important; display: block; width: 100%; height: 0px }
.pt_2 { padding-top:10px !important; display: block; width: 100%; height: 0px }
.pt_3 { padding-top:10px !important; display: block; width: 100%; height: 0px }
.pt_4 { padding-top:10px !important; display: block; width: 100%; height: 0px }
.pt_5 { padding-top:10px !important; display: block; width: 100%; height: 0px }
.pt_6 { padding-top:20px !important; display: block; width: 100%; height: 0px }
.pb_0 { padding-bottom:10px !important; display: block; width: 100%; height: 0px }
.pb_1 { padding-bottom:10px !important; display: block; width: 100%; height: 0px }
.pb_2 { padding-bottom:10px !important; display: block; width: 100%; height: 0px }
.pb_3 { padding-bottom:10px !important; display: block; width: 100%; height: 0px }
.pb_4 { padding-bottom:10px !important; display: block; width: 100%; height: 0px }
.pb_5 { padding-bottom:10px !important; display: block; width: 100%; height: 0px }
.pb_6 { padding-bottom:20px !important; display: block; width: 100%; height: 0px }
.pb_7 { padding-bottom:10px !important; display: block; width: 100%; height: 0px }
.subline { padding-left: 40px; padding-right: 40px; font-size: 16px; line-height: 18px }
.headline { font-size:20px; line-height: 25px; padding: 30px 50px }
.headerbildOuter { height: 100vh; overflow: hidden; position: relative; }
.headerbild { height: 100%; width: 100%; }
.headerbild img { width: 100%; height: 100%; object-fit: cover; object-position: right; }
body { overflow-y: auto !important; overflow-x: hidden; }
html, body { height: auto !important; min-height: 100%; }
.logo { top: 40% }
.logo img { max-width: 90vW }
.menu { top: 15px; right: 15px; padding: 8px 12px; font-size: 0.9rem; }
.logo { font-size: 2rem; }
}

/* Sehr kleine Handys - mit angepasster Bildposition */
@media screen and (max-width: 480px) {
.headerbild img { object-position: 85% center; }
.menu { top: 10px; right: 10px; padding: 6px 10px; font-size: 0.8rem; }
.logo { font-size: 1.8rem; }
.buttons { position: fixed; right: -10px; top: 70%; transform: none; padding: 10px; font-size: 0.8rem; }
}

/* Optional: Scroll-Indikator hinzufügen */
@media screen and (max-width: 768px) {
.headerbildOuter::after { content: ""; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 30px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.8); border-top: none; border-radius: 0 0 15px 15px; animation: scrollIndicator 2s infinite; }
@keyframes scrollIndicator {
0%, 20% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
50% { opacity: 1; transform: translateX(-50%) translateY(0px); }
80%, 100% { opacity: 0; transform: translateX(-50%) translateY(5px); }
}
}

/* Den nachfolgenden Content sichtbar machen */
.topSection > div:not(.headerbildOuter) { position: relative; z-index: 2; }
.mailIcon { position: absolute; left: 20px; top: 15px; z-index: 100; }
.arrowDown { position: relative; left: 0px; width: 60px; height: auto; text-align: center; margin: 0px auto; top: -80px; }

.content-part1 .subline:not(:empty) { padding-bottom: 100px; font-size: 28px; line-height: 35px;  font-family: var(--font-fliesstext);font-weight: 100; width: 1070px; max-width: 100%}
div.h1like:empty {padding-top: 0px; padding-bottom: 0px; line-height: 0px; height: 0px; overflow: hidden; display: none}

/* Bildergalerie Home */
.BildergalerieHomeMobile { display: none }
.BildergalerieHomeDesktop { display: block }
.BildergalerieHomeDesktop .wrapper { }
.BildergalerieHomeDesktop .content { position: relative; width: 80%; }
.BildergalerieHomeDesktop .bild-gross { width: 100%; display: block; position: relative; z-index: 1; }
.BildergalerieHomeDesktop .bild-rechts-oben, .BildergalerieHomeDesktop .bild-rechts-unten { position: absolute; width: 45%; right: -5%; z-index: 2; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
.BildergalerieHomeDesktop .bild-rechts-oben { top: -5%; }
.BildergalerieHomeDesktop .bild-rechts-unten { bottom: -10%; }
.BildergalerieHomeDesktop .text { width: 30%; margin-left: 15%; padding-top: 80px; }
.BildergalerieHomeMobile .text { padding: 20px 50px; text-align: center;  }
.BildergalerieHomeMobile .content { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.bildreihe { display: flex; width: 100%; gap: 10px; opacity: 0; transform: translateY(10px); animation: fadeInUp 0.6s ease forwards; }
.bildreihe img { height: auto; object-fit: cover; display: block; transition: transform 0.3s ease; }
.bildreihe img:hover { transform: scale(1.02); }

@keyframes fadeInUp {
to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 2100px) {
.BildergalerieHomeDesktop .textOuter { margin-top: 4% }
}

.roundbutton.bett { background-image: url("/UserFiles/Icons/bett.png") }
.roundbutton.therme { background-image: url("/UserFiles/Icons/therme.png") }
.roundbutton.berg { background-image: url("/UserFiles/Icons/berg.png") }
.roundbutton.brot { background-image: url("/UserFiles/Icons/brot.png") }
.roundbutton.seilbahn { background-image: url("/UserFiles/Icons/seilbahn.png") }
.roundbutton .text { font-family: var(--arsenica); font-weight: bold; position: absolute; text-align: center; width: 100%; top: 50%; font-size: 1.5rem; line-height: 1.5rem}
.roundButtonsOuter { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; padding: 1rem; width: 1350px; max-width: 100%; margin: 100px auto; }
.roundbutton { aspect-ratio: 1 / 1; width: clamp(80px, 18vw, 230px); border-radius: 50%; background-repeat: no-repeat; background-position: top 10px center; background-size: 47%; border: 1px solid var(--black); position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1.5rem; text-align: center; }
body.lang_en .roundbutton {font-size: 17px !important}

/* Teaser Sommer / Winter Home */
#teaserSommer h2 { font-family: var(--arsenica) }
#teaserSommer { width: 100%; position: relative; }
.teaserInner { background: linear-gradient(to bottom, transparent 80%, white 0), linear-gradient(to right, var(--beige) 80%, white 0); display: flex; flex-wrap: wrap; position: relative;  padding-bottom: 50px}
.textBlock { display: flex; text-align: right; padding-top: 90px; max-width: 100%; padding-right: 40px }
.textInner { width: 50%; padding-right: 50px }
.textDescription {width: 550px; max-width: 100%; float: right; font-size: 28px; line-height: 35px;  font-family: var(--font-fliesstext);font-weight: 100;}
#teaserWinter .textDescription {float: left}
.textDescription a {padding-top: 20px; padding-bottom: 50px}
.image { width: 50%; position: relative; display: inline-block; }
.bild-gross { width: 100% }
.image::after { content: ""; position: absolute; top: 20px; left: 20px; width: 100%; height: 100%; border: 2px solid var(--black); z-index: 0; }
#teaserWinter h2 { font-family: var(--arsenica) }
#teaserWinter { width: 100%; position: relative; }
#teaserWinter .teaserInner { background: linear-gradient(to bottom, transparent 80%, white 0), linear-gradient(to left, var(--beige) 80%, white 0); display: flex; flex-wrap: wrap; position: relative; padding-bottom: 50px }
#teaserWinter .textBlock.reverse { display: flex; text-align: left; padding-top: 90px; max-width: 100%; padding-left: 40px; flex-direction: row;}
#teaserWinter .textBlock.reverse .textInner { width: 50%; padding-left: 50px; padding-right: 0; }
#teaserWinter .textBlock.reverse .image { width: 50%; position: relative; display: inline-block; }
#teaserWinter .image::after { content: ""; position: absolute; top: 20px; left: -20px; width: 100%; height: 100%; border: 1px solid var(--black); z-index: 0; }
.teaserLink { display: block; text-transform: uppercase; font-family: var(--arsenica); color: var(--black); font-weight: bold }
.teaserLink:hover { text-decoration: none }

.BildergalerieHomeDesktop .textOuter { display: flex; align-items: center; font-size: 28px; line-height: 35px;  font-family: var(--font-fliesstext);font-weight: 100;}
.bigButtonOuter { text-align: center; padding: 0px 15% }
.bigButton { font-size: 30px; font-family: var(--arsenica); border:1px solid var(--black); border-radius: 50px; height: auto; width: auto; padding: 15px; font-weight: bold; }

/* --- Mobile Layout --- */

@media (max-width: 1350px) {
	#teaserWinter .teaserInner{background: linear-gradient(to bottom, transparent 90%, white 0), linear-gradient(to left, var(--beige) 90%, white 0);}
	#teaserSommer .teaserInner{background: linear-gradient(to bottom, transparent 90%, white 0), linear-gradient(to right, var(--beige) 90%, white 0);}
}

@media (max-width: 1050px) {
.roundbutton .text { font-size: 16px}
.buttons { position: fixed; right: -15px; top: 25vH !important; transform: none; padding: 12px; font-size: 0.9rem;}
.buttons .button { width: auto; height: auto; background-color: var(--beige); border-radius: 50px 0px 0px 47px; margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: left; align-items: center; padding: 30px; font-weight: bold; font-size: 20px; border: 1px solid var(--white) }
	
}
@media (max-width: 900px) {
.roundbutton .text { font-size: 14px; line-height: 1em }
}
@media (max-width: 768px) {
.content-part1 .subline { padding-bottom: 50px }	
.bigButton { font-size: 20px; }
.buttons { position: absolute; }
.arrowDown { display: none }
.BildergalerieHomeMobile { display: block }
.BildergalerieHomeDesktop { display: none }
.BildergalerieHomeDesktop .bild-rechts-oben, .BildergalerieHomeDesktop .bild-rechts-unten { display: none; }
.roundButtonsOuter { justify-content: center; margin: 50px auto 20px auto }
.roundbutton { flex: 0 0 calc(33.333% - 0.75rem); font-size: 16px }
.roundButtonsOuter > .roundbutton:nth-child(5) { margin-left: 1rem; }
.teaserLink { margin-top: 20px }
#teaserSommer .textInner { width: 50%; margin-left: 30%; padding-right: 0px; padding-top: 50px; padding-bottom: 50px; font-size: 16px; line-height: 18px }
#teaserSommer .teaserInner { background: linear-gradient(to top, transparent 85%, white 0), linear-gradient(to left, var(--beige) 80%, white 0); display: flex; flex-wrap: wrap; position: relative; padding-bottom: 0px}
#teaserSommer .textBlock { display: flex; flex-direction: column-reverse; flex: 1 1 100%; position: relative; padding-left: 10%; padding-right: 0px; padding-top: 0px; }
#teaserSommer .image { position: relative; display: inline-block; margin-top: 2rem; width: 80%; }
#teaserSommer .image img { display: block; width: 100%; height: auto; position: relative; z-index: 2; }
#teaserSommer .image::after { content: ""; position: absolute; top: 10px; left: 10px; width: 100%; height: 100%; border: 1px solid var(--black); box-sizing: border-box; z-index: 2; }
#teaserWinter .textInner { width: 50%; margin-left: 30%; padding-right: 0px; padding-top: 50px; padding-bottom: 50px }
#teaserWinter .teaserInner { background: linear-gradient(to top, transparent 70%, white 0), linear-gradient(to right, var(--beige) 80%, white 0); display: flex; flex-wrap: wrap; position: relative; padding-bottom: 0px}
#teaserWinter .textBlock.reverse { padding-left: 10% }
#teaserWinter .textBlock.reverse .image { width: 80%; position: relative; display: inline-block; }
#teaserWinter .textBlock { display: flex; flex-direction: column !important; flex: 1 1 100%; position: relative; padding-left: 40px; padding-right: 0px; }
#teaserWinter .textBlock.reverse .textInner { padding-left: 0px; margin-left: 0px; font-size: 16px; line-height: 18px}
#teaserWinter .image { position: relative; display: inline-block; margin-top: 2rem; width: 80%; }
#teaserWinter .image img { display: block; width: 100%; height: auto; position: relative; z-index: 2; }
#teaserWinter .image::after { content: ""; position: absolute; top: 10px; left: 10px; width: 100%; height: 100%; border: 1px solid var(--black); box-sizing: border-box; z-index: 2; }
.subline .beigedunkel { font-size: 22px; line-height: 30px; max-width: none; text-align: right; margin-right: calc(10% + 5px); padding-top: 60px; padding-bottom: 60px }
#teaserSommer .textInner h2, #teaserWinter .textInner h2 {font-size: 22px; line-height: 25px}	
#teaserSommer .textInner .textDescription, #teaserWinter .textInner .textDescription, .content-part1 .subline:not(:empty), .BildergalerieHomeMobile {font-size: 16px; line-height: 25px}	
.headline:not(:empty), .header-content strong {font-size: 22px; line-height: 25px}	
.textDescription a {padding-bottom: 0px}	
}

@media (max-width: 580px) {
.roundbutton .text { font-size: 14px }
}

@media (max-width: 480px) {
	.roundbutton .text { font-size: 12px}	
}



/* Styles für CMS Editor */
 
body#tinymce {padding: 20px !important; cursor:text; background-color: var(--white); color: var(--black); background: #fff} 
body#tinymce ul {margin-left: 20px}
body#tinymce p, body#tinymce ul {line-height: 22px; font-size: 16px; font-family: var(--font-fliesstext); margin-bottom: 3px} 
body#tinymce .buttonblue {background-color: var(--dark-blue) }
body#tinymce .buttongreen {background-color: var(--green)}
body#tinymce .formattedLink.formattedLinkunderline {cursor: default}

body#tinymce .accord .accordText {max-height: none; font-size: 18px; line-height: 26px; margin-bottom: 30px}