@import url("/css/styles_fonts.css");
@import url("/css/styles_forms.css");
:root { 
	--black: #363131; 
	--white: #ffffff; 
	--grey: #1c1c1c;
	--braun: #50473e;
	--toplinecolor: #d16318;
	--toplinecolorRGB: rgba(208, 136, 83, 1);
	--toplinecolor-font: #f4ebd8;
	--toplinecolor-font-alternativ: #ffffff;
	--toplinecolor-hover:#b8887a;
	--formborder: #cccccc;
	--formbackground: #ffffff;
	--formradius: 8px;
	--formcolor:#333333;
	--formfocus:#fefefe;
	--beige: #EFE3D8;
	--beigehell: rgba(249, 244, 235, 1); /*EFE3D8 40% */
	--beigedunkel: #D2B8AB; 
	--accent: var(--beigedunkel); 
	--text: var(--black); 
	--bg: rgba(249, 244, 235, 1); 
	--bg2: #072834; 
	--bg2-alpha: rgba(7,40,52,0.2); 
	--content-breite:1080px; 
	--content-breite2: 1200px; 
	--nav-breite:1080px; 
	--apparat-light: "apparat-light", sans-serif; 
	--font-fliesstext: "apparat-light", sans-serif; font-weight: 300; font-style: normal; 
	--arsenica-settings: "opsz" 100, "wght" 700; 
	--chantal:"chantal"; font-weight: 800; font-style: bold; 
	--zapf:"zapf"; font-weight: 800; 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: 18px; line-height: 30px; font-weight: 300; background-color: var(--bg); margin:0px; padding:0px; }
body.menuOpen { height: 100vh; overflow: hidden }
div:empty:not(.menuLine),
span:empty:not(.menuLine),
p:empty:not(.menuLine) {
	display: none !important;
}

.haupttext img {max-width: 100% !important; height: auto !important}

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

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

.bg_0 {background-color: var(--beigehell)}
.bg_1 {background-color: var(--beigehell)}
.bg_2 {background-color: var(--beige)}
.apparat {font-family: apparat;}
.apparatLight {font-family: apparat-light;}

.mw1070px, .layout_3 .contentInnen { width: 1070px !important; max-width: 100%; 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% }
.mr10px { margin-right: 10px }
.dotafter::after {content: "."}
.mr30px { margin-right: 30px }
.chantal { font-family: var(--chantal); font-weight: bold }
.mobileOnly { display: none !important }
.hc_beige { color:var(--beige) !important }
.hc_schwarz { color:var(--black) !important }
.hc_braun {color:var(--braun) !important;}
.hc_orange {color:var(--toplinecolor) !important;}
.fs14, .fs14 * { font-size: 14px }
.fs25, .fs25 * { font-size: 25px }
.fs32, .fs32 * { font-size: 32px }
.fs18, .fs18 * { font-size: 18px; line-height: 26px }
.zweispaltig {
  column-count: 2;     /* Anzahl der Spalten */
  column-gap: 20px;    /* Abstand zwischen Spalten */
}
.divzweispaltig{  display: flex;  gap: 40px;}
.divzweispaltig .spalte {flex: 1}
.divzweispaltig .leftCol{}
.divzweispaltig .rightcol{}
.divzweispaltig.withImage .leftCol, .divzweispaltig.withImage .rightCol {width: 50%}
.divzweispaltig.withImage img {width: 700px; max-width: 100%;  height: auto}

.infoZeilen {margin-top: 30px; margin-bottom: 30px}
.infoZeilen .line {height: 4px; width: 100%; background-color: var(--toplinecolor)}

strong {font-weight: bold}
strong.toplinecolor {color: var(--toplinecolor)}
.bgToplineColor {background-color: var(--toplinecolor)}
.fontToplineColor {color:var(--toplinecolor-font)}
.underline {border-bottom: 1px solid var(--toplinecolor)}
/* diverse Divs  ---------------------- */
.zapf {font-family: var(--zapf)}
h1, .h1like {  font-family: var(--zapf);  font-size: 50px; }
h2, .h2like {  font-family: var(--chantal); color: var(--braun); font-size: 40px; margin-top: 15px; 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(--beigehell); padding-top: 50px;}
#adresse {text-align: center; color: var(--toplinecolor); font-size: 22px}
#adresse a {color: var(--toplinecolor) !important; text-decoration: none}
#adresse h1, #adresse h2, #adresse h3 { color: var(--white) }
#adresse a.white {var(--toplinecolor) !important}
.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: 20px; justify-content: space-between; padding: 0;}
.adresseValues > div { flex: 1; padding: 0px 20px }
.adresseValues .textRight { text-align: right; font-family: var(--chantal); font-size: 25px; font-weight: bold; text-decoration: underline; line-height: 40px }
.footer .textRight a, .adresseValues a{color: var(--toplinecolor); text-decoration: none !important}
.lastLine { height: auto; display: flex; flex-wrap: wrap; justify-content:center; background-color: var(--beigehell); color: var(--toplinecolor); align-items: center; padding-bottom: 50px }
.headline:not(:empty) { font-family: var(--apparat-light); font-weight: bold; font-size: 40px; padding-top: 70px; padding-bottom: 70px; line-height: 50px }
.header-content strong { font-family: var(--apparat-light); 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(--apparat-light); 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) }

/* anwendungen */
.hotline {display: flex; width: 100%; margin-top: 40px; margin-bottom: 40px}
.hotline a {color: var(--toplinecolor-font); text-decoration: none !important}
.hotline > div {flex: 1}
.hotline > div.textHochkant {flex: 0}
.hotline div.divzweispaltig  {gap:0}
.hotline div.divzweispaltig .spalte  {text-align: center; padding: 40px 0px}
.hotline div.divzweispaltig .spalte.rightCol {padding: 40px 0px; display: flex; color: #fff}
.hotline div.divzweispaltig .spalte.rightCol .borderleft {border-left: 5px solid var(--toplinecolor-font); flex: 1; align-content: flex-end; text-align: left; padding: 0px 60px}
.hotline .telefon {font-size: 2rem}
.hotline .zahlBig {font-size: 120px;  font-weight: bold;   padding-bottom: 100px}
.hotline .zahlMiddel {font-size: 75px;  font-weight: bold; }
.hotline .zahlSmall {font-size: 35px;   padding-bottom: 10px}
img.smallerIcon {max-width: 160px}

/* Slider Wrapper */

.hotline-slider {
	position: relative;
	overflow: hidden;
}


/* Track */

.hotline-track {
	display: flex;
	transition: transform 0.5s ease;
	width: 100%;
}


/* Jeder Slide */

.hotline-track .hotline {
	min-width: 100%;
	margin-top: 40px;
	margin-bottom: 40px;
}


/* Punkte */

.hotline-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
}

.hotline-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ccc;
	cursor: pointer;
	transition: 0.3s;
}

.hotline-dot.active {
	background: var(--toplinecolor-font);
}




.miteinander{display: flex; width: 100%; justify-content: center; flex-direction: column; align-items: center}
.miteinander .headline.zapf {font-family: var(--zapf); text-align: center; color: var(--toplinecolor); font-size: clamp(1.75rem, 5vw + 1rem, 2.8125rem); line-height: 1.2;    font-weight: 800;     margin-bottom: 1rem; padding: 0px}
.miteinander .haende {width:900px; max-width: 80%; text-align: center; display: flex; border-bottom: 3px solid var(--toplinecolor); justify-content: center}
.miteinander .haende img {max-width: 100%; width: 500px}


.deinespende {width: 100%; background-color: var(--toplinecolor); color: var(--toplinecolor-font); text-align: center; margin-top: 40px}
.deinespende .claim {font-size: 25px}
.deinespende .info {font-size: 25px; padding: 10px 10px}

.danke .headline {padding-left: 50px; color: var(--toplinecolor)}
.danke .headline .zapf {font-size: 1.5em;}



.textHochkant {
   /* height: 100%; */         /* Höhe vom Parent übernehmen */
    
    writing-mode: vertical-rl;    /* Text vertikal */
    transform: rotate(180deg);   /* auf den Kopf stellen */

    display: flex;
    align-items: center;          /* vertikal zentrieren */
    justify-content: center;      /* horizontal zentrieren */

    font-size: 9vh;               /* skaliert mit Höhe */
    white-space: nowrap;          /* kein Umbruch */
	
	min-width: 100px;
}



/* 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 }
.mb50 { margin-bottom: 50px }
.mb60 { margin-bottom: 60px }
.mb70 { margin-bottom: 70px }
.mb80 { margin-bottom: 80px }
.mb90 { margin-bottom: 90px }
.mb100 { margin-bottom: 100px }
.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 }
.normal {font-weight:200}


/* Basis-Styling für das Headerbild */
.topSection { position: relative; width: 100%; height: auto; background-color: var(--toplinecolor) }
.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 {
  background-color: var(--toplinecolor-font); /* Deine Wunschfarbe oben, z.B. Rot */
  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 .menuLine {
  background-color: white; /* Farbe der Linien oben */
  height: 2px;
  width: 25px;
  margin: 4px 0;
  transition: all 0.3s ease;
}

/* Zustand wenn gescrollt (wird durch JS getriggert) */
.menu.is-scrolled {
  background-color: var(--toplinecolor); /* Die Farbe nach 200px Scrollweg */
}

.menu.is-scrolled .menuLine {
  background-color: var(--toplinecolor-font); /* Linienfarbe nach Scrollweg */
}


.menu:hover { background: var(--toplinecolorRGB); transform: scale(1.05); }
.logoOuter {height: auto; display: flex; justify-content: end; padding: 40px 150px 40px 0px; background-color: var(--toplinecolor)}
.logo { position: relative;  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: var(--toplinecolor); 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(--chantal); font-size: 30px }
nav .langChanger {text-align: left; margin-left: 0px; font-size: 1.2rem; color: #333; line-height: 30px; font-weight: 300;}
nav .langChanger a {color: #333 !important; font-weight: 300 !important}
.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(--apparat-light); 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}
.subline:empty, .einleitung:empty {display: none !important}


.galerie {margin-top: 30px}

.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 {}
.divzweispaltig .spalte	 {flex: 0}
.hotline .zahlSmall {font-size: 20px;}
}

.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: 400px; /* 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; color:var(--toplinecolor-font); background: var(--toplinecolor); backdrop-filter: blur(15px); z-index: 1100; transition: right 0.4s ease-in-out; padding: 60px 30px 30px; box-shadow: -5px 0 15px rgba(208, 136, 83, 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; }
.mobile-menu a {color: var(--toplinecolor-font) !important; text-transform: capitalize}

/* 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(--chantal); font-weight: bold }
nav .langChanger {font-weight: normal}	
.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(--apparat-light); font-weight: bold;  line-height: 20px }	
.pt_0 { padding-top:0px !important; display: block; width: 100%; height: 0px }
.pt_1 { padding-top:0px !important; display: block; width: 100%; height: 0px }
.pt_2 { padding-top:0px !important; display: block; width: 100%; height: 0px }
.pt_3 { padding-top:0px !important; display: block; width: 100%; height: 0px }
.pt_4 { padding-top:0px !important; display: block; width: 100%; height: 0px }
.pt_5 { padding-top:0px !important; display: block; width: 100%; height: 0px }
.pt_6 { padding-top:0px !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: auto; overflow: hidden; position: relative; }
.headerbild { height: auto; width: auto; }
.headerbild img { width: 100%; height: auto; object-fit: cover; object-position: right; }
body { overflow-y: auto !important; overflow-x: hidden; }
html, body { height: auto !important; min-height: 100%; }
.logo { top: auto }
.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) {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(--apparat-light); font-weight: bold; position: absolute; text-align: center; width: 100%; top: 50%; font-size: 1.5rem; line-height: 1.5rem}
body.lang_en .roundbutton .text {font-size: 1.3rem}
.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(--apparat-light) }
#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(--apparat-light) }
#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(--apparat-light); 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(--apparat-light); 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: 70vH !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 }
.h1like {line-height: 1em}	
}
@media (max-width: 768px) {
h1, .h1like {
  font-family: var(--zapf);
  font-size: 33px;
}	
	
.logoOuter {justify-content: center; padding:20px 0px}	
.logo img { max-width: 40vW }	
.contentInnen {padding: 0px 20px}
.contentInnen .divzweispaltig {flex-direction: column; width: 100%; align-items: center; padding: 20px 0px}
.contentInnen .divzweispaltig div {text-align: left !important}	
.contentInnen .hotline .zahlBig {font-size: 50px;  font-weight: bold;   padding-bottom: 20px; text-align: center !important}	
.contentInnen .divzweispaltig div .auto {text-align: center !important}	
.contentInnen .divzweispaltig div .telefon {text-align: center !important}		
.hotline {flex-direction: column; align-items: center; width: 100%}
.hotline .auto img {width: 100px !important; max-width: 100%; margin-bottom: 20px}
.hotline div.divzweispaltig .spalte.rightCol {padding: 0px}	
.hotline div.divzweispaltig .spalte.rightCol .mb40 {margin-bottom: 10px}
.hotline div.divzweispaltig .spalte.rightCol .mb20 {margin-bottom: 10px}	
.hotline div.divzweispaltig .spalte {padding: 0px}
.hotline div.divzweispaltig .spalte.rightCol .borderleft {border-left: 0px solid var(--toplinecolor) }
.divzweispaltig.withImage .leftCol, .divzweispaltig.withImage .rightCol {width: 100%}	
.hotline .zahlMiddel {font-size: 30px;  font-weight: bold; line-height: 1em}	
.hotline div.divzweispaltig .spalte.rightCol .borderleft {padding: 20px}	
.textHochkant {
/* height: 100%; */         /* Höhe vom Parent übernehmen */

writing-mode: lr;   /* Text vertikal */
transform: none;   /* auf den Kopf stellen */

display: flex;
align-items: center;          /* vertikal zentrieren */
justify-content: center;      /* horizontal zentrieren */

font-size: 6vh;               /* skaliert mit Höhe */
white-space: nowrap;          /* kein Umbruch */

min-width: auto;
	
margin-bottom: 10px;
}	
	
.galerie {margin-bottom: 30px}	
	
.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 }

.headline:not(:empty), .header-content strong {font-size: 22px; line-height: 25px}	
.textDescription a {padding-bottom: 0px}	
.mainContent, .haupttext{padding: 0px 0px; white-space: normal;}
.headline:not(:empty) {padding: 40px 20px}

}

@media (max-width: 580px) {
.logo img {max-width: 40vW }	
.menuOuter {top:8px}	
.mailIcon {top: 6px;}	
.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}
body#tinymce img {max-width: 100%; height: auto}