@charset "utf-8";


/*
  Design-Tokens: Almdorf Haidenberg
  Schriften: Gudea (Fliesstext/UI, h2–h4), Marcellus (nur h1)
  Farben: Anthrazit, Weinrot, Haidenberggrün, Haidenbergrot (sparsam), Weiß
*/


/* Font */
@import url('https://fonts.googleapis.com/css2?family=Gudea:ital,wght@0,400;0,700;1,400&family=Marcellus&display=swap');


:root {
	/* Schriften */
	--font-family-gudea: "Gudea", Arial, sans-serif;
	--font-family-marcellus: "Marcellus", Georgia, serif;
	--font-family-base: var(--font-family-gudea);
	--font-family-heading: var(--font-family-marcellus);
	--font-family-heading-serif: var(--font-family-gudea);
	--font-weight-regular: 400;
	--font-weight-bold: 600;
	--font-weight-heading: 700;

	/* Haidenberg Farben */
	--haidenberg-anthrazit: #3F3A37;
	--haidenberg-anthrazit-rgb: 63, 58, 55;
	--haidenberg-rot: #B23936;
	--haidenberg-weinrot: #9D4F4D;
	--haidenberg-weinrot-rgb: 157, 79, 77;
	--haidenberg-gruen: #465247;
	--haidenberg-gruen-rgb: 70, 82, 71;
	--haidenberg-gruen-dark: #3a4a3b;
	--haidenberg-weiss: #FFFFFF;
	--haidenberg-schwarz: #000000;
	--haidenberg-text-muted: #6a6562;
	--haidenberg-border: #c5c0bc;
	--haidenberg-border-input: #92918e;
	--haidenberg-placeholder: #b8b6b2;
	--haidenberg-bg-secondary: #e8e6e4;
	--haidenberg-bg-dark: #6a6562;
	--haidenberg-bg-light: #ECECE8;

	/* Typografie H1 – mobil <768 | tablet 768+ | desktop 992+ | large 1900+ */
	--heading-h1-color: var(--haidenberg-weinrot);
	--heading-h1-size-mobile: 32px;
	--heading-h1-line-height-mobile: 1.2;
	--heading-h1-size-tablet: 45px;
	--heading-h1-line-height-tablet: 1.2;
	--heading-h1-size-desktop: 50px;
	--heading-h1-line-height-desktop: 1.2;
	--heading-h1-size-large: 60px;
	--heading-h1-line-height-large: 1.2;
	--heading-h1-letter-spacing: 1.5px;
	--heading-h1-padding-bottom: 20px;
	--heading-h1-weight: var(--font-weight-regular);
	--heading-h1-transform: uppercase;

	/* Typografie H2 (Gudea) – Herz-Dekor oben mittig */
	--heading-h2-color: var(--haidenberg-gruen);
	--heading-h2-bg-image: url("/fileadmin/user_upload/Hotel-Haidenberg/h2herz.svg");
	--heading-h2-padding-top-mobile: 52px;
	--heading-h2-padding-top-tablet: 56px;
	--heading-h2-padding-top-desktop: 60px;
	--heading-h2-size-mobile: 24px;
	--heading-h2-line-height-mobile: 30px;
	--heading-h2-size-tablet: 26px;
	--heading-h2-line-height-tablet: 28px;
	--heading-h2-size-desktop: 36px;
	--heading-h2-line-height-desktop: 40px;
	--heading-h2-letter-spacing: 1px;
	--heading-h2-weight: var(--font-weight-regular);
	--heading-h2-transform: none;
	--heading-h2-style: normal;

	/* Typografie H3 (Intro / Untertitel) – mobil <768 | tablet 768+ | desktop 992+ | large 1900+ */
	--heading-h3-color: var(--haidenberg-anthrazit);
	--heading-h3-size-mobile: 18px;
	--heading-h3-size-tablet: 20px;
	--heading-h3-size-desktop: 28px;
	--heading-h3-size-large: 28px;
	--heading-h3-line-height-mobile: 27px;
	--heading-h3-line-height-tablet: 30px;
	--heading-h3-line-height-desktop: 32px;
	--heading-h3-line-height-large: 32px;
	--heading-h3-letter-spacing: 1px;
	--heading-h3-weight: var(--font-weight-regular);
	--heading-h3-transform: none;
	--heading-h3-padding-bottom: 20px;

	/* Fliesstext (p, li, table, …) – mobil <768 | tablet 768+ | desktop 992+ | large 1900+ */
	--body-color: var(--haidenberg-anthrazit);
	--body-font-size-mobile: 16px;
	--body-font-size-tablet: 16px;
	--body-font-size-desktop: 18px;
	--body-font-size-large: 20px;
	--body-line-height-mobile: 24px;
	--body-line-height-tablet: 26px;
	--body-line-height-desktop: 24px;
	--body-line-height-large: 28px;
	--body-font-size: var(--body-font-size-mobile);
	--body-line-height: var(--body-line-height-mobile);

	/* UI – Buttons */
	--btn-default-bg: var(--haidenberg-weiss);
	--btn-default-hover-bg: var(--haidenberg-weiss);
	--btn-default-color: var(--haidenberg-gruen);
	--btn-default-border: var(--haidenberg-gruen);
	--btn-default-hover-color: var(--haidenberg-gruen-dark);
	--btn-default-hover-border: var(--haidenberg-gruen-dark);
	--btn-primary-bg: var(--haidenberg-weinrot);
	--btn-primary-hover-bg: #8a4543;
	--btn-primary-color: var(--haidenberg-weiss);
	--btn-primary-border: var(--haidenberg-weinrot);
	--btn-secondary-bg: var(--haidenberg-gruen);
	--btn-secondary-hover-bg: var(--haidenberg-gruen-dark);
	--btn-secondary-color: var(--haidenberg-weiss);
	--btn-secondary-border: var(--haidenberg-gruen);
	--frame-link-color: var(--haidenberg-gruen);
	--frame-link-hover-color: var(--haidenberg-weinrot);
	--selection-bg: rgb(var(--haidenberg-gruen-rgb));
	--selection-color: var(--haidenberg-weiss);

	/* Slider */
	--slider-heading-color: var(--haidenberg-weiss);
	--slider-indicator-active-border: #D7D1C9;
	--slider-indicator-bg: rgba(25, 25, 25, 0.55);
	--carousel-image-overlay-gradient: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.4) 0%,
		rgba(0, 0, 0, 0.15) 35%,
		rgba(0, 0, 0, 0.15) 65%,
		rgba(0, 0, 0, 0.45) 100%
	);
	--werbestudio-carousel-overlay-gradient: linear-gradient(
		to bottom,
		transparent 75%,
		rgba(0, 0, 0, 0.06) 90%,
		rgba(0, 0, 0, 0.22) 100%
	);
	--news-card-overlay-gradient: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.6) 0%,
		rgba(0, 0, 0, 0.15) 35%,
		rgba(0, 0, 0, 0.25) 65%,
		rgba(0, 0, 0, 0.6) 100%
	);

	/* Slider – Navigation */
	--slider-nav-w: 60px;
	--slider-nav-h: 20px;
	--slider-nav-inset: 10px;
	/* Slider – Carousel-Simple Haupttitel (.carousel-header) */
	--slider-header-size-mobile: 30px;
	--slider-header-line-mobile: 34px;
	--slider-header-size-tablet: 40px;
	--slider-header-line-tablet: 48px;
	--slider-header-size-desktop: 40px;
	--slider-header-line-desktop: 48px;
	--slider-header-size-xl: 50px;
	--slider-header-line-xl: 55px;
	--slider-header-size-large: 64px;
	--slider-header-line-large: 77px;

	/* Angebote-Slider .card-title – mobil | desktop 992+ | large 1900+ */
	--offer-card-title-font-family: var(--font-family-gudea);
	--offer-card-title-size-mobile: 34px;
	--offer-card-title-line-height-mobile: 38px;
	--offer-card-title-size-desktop: 40px;
	--offer-card-title-line-height-desktop: 44px;
	--offer-card-title-size-large: 50px;
	--offer-card-title-line-height-large: 50px;
	--offer-card-title-letter-spacing: 0.05em;

	/* News/Angebots-Karten (.card.mb-2) – mobil | tablet | desktop | large */
	--news-card-height-mobile: 450px;
	--news-card-height-tablet: 500px;
	--news-card-height-desktop: 550px;
	--news-card-height-large: 550px;

	/* Modal – Teaserbild (1:1-Uploads begrenzen) */
	--modal-img-height: clamp(180px, 45vh, 400px);

	/* Content-Breite: frame-container max. 1340px */
	--content-frame-max-width: 1340px;

	/* Werbestudio-Slider: seitlicher Track-Abstand ab Desktop */
	--werbestudio-slider-stage-margin-desktop: 120px;

	/* 2-Spalten-Container: seitlicher Abstand (mobil 20px, 75px ab 1900px) */
	--container-2-columns-inset-min: 20px;
	--container-2-columns-inset-desktop: 50px;
	--container-2-columns-inset-max: 75px;
	--container-2-columns-inset: clamp(
		var(--container-2-columns-inset-min),
		calc(var(--container-2-columns-inset-max) * 100vw / 1900),
		var(--container-2-columns-inset-max)
	);
}

*{ margin:0;	padding:0;	border:0;	}
input, textarea, select {  border-radius: 4px; -webkit-border-radius:4px; color: #495057; }
* { -webkit-tap-highlight-color:transparent; }

path {    stroke: rgb(248, 244, 242);    stroke-width: 0.7;    fill-opacity: 0;    }
/* Hiermit können Safari >=1.1, Opera >=9.5, IE9 was anfangen*/
::selection {    background: var(--selection-bg);    color: var(--selection-color); }
::-moz-selection {    background: var(--selection-bg);    color: var(--selection-color);}

html {	  -ms-text-size-adjust: 100%;    -webkit-text-size-adjust: 100%;}
body 	{ background-repeat:repeat; -ms-text-size-adjust: 100%;    -webkit-text-size-adjust: 100%; font-weight: var(--font-weight-regular); color: var(--body-color); font-family: var(--font-family-base); line-height: var(--body-line-height);  }

/* Responsive Utilities */
.mobil { display: none; }
.screen { display: block; }

div#wrap	{ position: relative;  width:100%; margin:0 auto; padding:0;  text-align:center; }

#top-request    		{ position: fixed;  width:100%; margin:0 auto; padding:0;  text-align:center; display:none; z-index:150;  }
#top-request.visible    {  display:block; }
#top-request  a			{   text-decoration:none; padding: 20px 10px 20px 10px;  font-size:18px; font-family: var(--font-family-base); font-weight:var(--font-weight-heading); text-transform:uppercase; letter-spacing:2px; background-color: var(--btn-primary-bg); color: var(--btn-primary-color); }

body.detail #top-request   { display: none;}

/* header / logo */
div#header {
	position: absolute;
	width: 100%;
	text-align: center;
	margin: 0 auto;
	padding: 60px 0 50px 0;
	z-index: 100;
}

div#header img {
	width: auto;
	height: auto;
	max-height: 110px;
	transition: all 0.4s ease;
}

@media screen and (min-width: 992px) {
	div#header img {
		max-height: 220px;
	}
}

@media screen and (min-width: 1600px) {
	div#header {
		padding-top: 80px;
	}
}

@media screen and (min-width: 1900px) {
	div#header img {
		max-height: 220px;
	}
}

@-webkit-keyframes scale-down-center {
	0% {		-webkit-transform: scale(1);		transform: scale(1);	-webkit-transform-origin: 50% 100%;		transform-origin: 50% 100%;}
	100% {		-webkit-transform: scale(0.7);		transform: scale(0.7);	-webkit-transform-origin: 50% 100%;		transform-origin: 50% 100%;}
}
@keyframes scale-down-center {
	0% {		-webkit-transform: scale(1);		transform: scale(1);	 -webkit-transform-origin: 50% 100%;		transform-origin: 50% 100%;}
	100% {		-webkit-transform: scale(0.7);		transform: scale(0.7);	  -webkit-transform-origin: 50% 100%;		transform-origin: 50% 100%;}
}

.fade-in {	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;	animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}
.fade-out {	-webkit-animation: fade-out 1s ease-out both;	animation: fade-out 1s ease-out both;}

@-webkit-keyframes fade-in {
	0% {		opacity: 0;	}
	100% {		opacity: 1;	}
}
@keyframes fade-in {
	0% {		opacity: 0;	}
	100% {		opacity: 1;	}
}

@-webkit-keyframes fade-out {
	0% {		opacity: 1;	}
	100% {		opacity: 0;	}
}
@keyframes fade-out {
	0% {		opacity: 1;	}
	100% {		opacity: 0;	}
}

/* sprache */
div#sprache						{ position:absolute; display: flex;   margin: 0; padding:0;  left:0;	top: 0;    letter-spacing:1px; z-index:2000;   }
div#sprache	 a.button			{ font-size:16px;  font-weight:800; padding: 5px 10px 5px 10px; text-decoration:none; 	transition: all 0.5s ease; background-color: transparent; border: 1px solid rgba(255,255,255,0); border-radius: 8px;}
div#sprache	 a.button:hover		{  background-color: rgba(255,255,255,0.2); border: 1px solid #FFFFFF;}

@media screen and (min-width: 768px){
	div#sprache {left:20px;	top: 20px;}
	div#sprache	 a.button		{ font-size:18px;  	}
}
@media screen and (min-width: 992px){
	div#sprache		{  left:10%;	top: 60px;   }
}


/* kontakt */
div#kontakt						{ position:absolute; top:20px;  right: 40px;  margin: 0;  width:auto;   letter-spacing:1px; display:none; z-index:2000;    }
div#kontakt	 a.button			{ font-size:18px;  padding:0 30px; background-color: transparent; border: 2px solid var(--haidenberg-weiss);	height: 60px !important;		line-height: 60px; text-transform:uppercase; font-weight: bold; border-radius: 8px; color: var(--btn-primary-color);}
div#kontakt	 a.button:hover		{ background-color: transparent; border-color: var(--haidenberg-weiss); text-decoration:none; color: var(--btn-primary-color);   }
body.detail #kontakt   { display: none;}

@media screen and (min-width: 768px){
	div#kontakt {display:block;}
}
@media screen and (min-width: 992px){
	div#kontakt {top:60px; right:10%;}
}

/* detailheader */
.detailhg			{ position:relative; float:left; width:100%; text-align:center; height: 120px; background-color: var(--haidenberg-gruen);  margin:0 auto; padding:0;   }
.detailhg-wrap		{ position:relative;  width:100%;    padding: 0 0;  margin:0 auto; z-index:1;  }

@media (min-width:992px) {
	.detailhg			{ height: 300px;}
}


/* ============================================================
   SECTION: Slider – Mask Carouselsimple
   ============================================================ */

.carousel-item-layout-secondary {
    --carousel-item-color: var(--haidenberg-weiss);
    --carousel-item-background: var(--haidenberg-bg-secondary);
    --carousel-item-link-color: var(--haidenberg-weiss);
    --carousel-item-link-hover-color: var(--haidenberg-weiss);
}

#section-slider {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 0;
}

#section-slider-wrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
    z-index: 1;
}

#section-slider .frame {
    padding: 0;
}

#section-slider .frame-container {
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
}

#section-slider .frame-type-mask_carouselsimple .carousel {
    position: relative;
    --cs-nav-w: var(--slider-nav-w);
    --cs-nav-h: var(--slider-nav-h);
    --cs-nav-inset: var(--slider-nav-inset);
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-item {
    min-height: 100svh;
    padding-left: 0;
    padding-right: 0;
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-backgroundimage-container,
#section-slider .frame-type-mask_carouselsimple .carousel .carousel-backgroundimage {
    position: absolute;
    inset: 0;
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-backgroundimage-container {
    opacity: 1;
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-backgroundimage picture {
    display: block;
    width: 100%;
    height: 100%;
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-backgroundimage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-backgroundimage-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--carousel-image-overlay-gradient);
    pointer-events: none;
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-content {
    position: relative;
    z-index: 2;
    min-height: 100svh;
    overflow: hidden;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0) 25%,
        rgba(0, 0, 0, 0) 75%,
        rgba(0, 0, 0, 0.35) 100%
    );
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-slider-graphic,
#main .frame-type-mask_carouselsimple .carousel .carousel-slider-graphic {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 98%;
    max-height: 98%;
    width: auto;
    pointer-events: none;
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-slider-graphic img,
#main .frame-type-mask_carouselsimple .carousel .carousel-slider-graphic img {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-content-inner {
    position: relative;
    z-index: 2;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 1rem 3rem;
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-text {
    width: 100%;
    max-width: 1100px;
    text-align: center;
    position: relative;
    z-index: 2;
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-text h2.text-center,
#main .frame-type-mask_carouselsimple .carousel .carousel-text h2.text-center {
    margin: 0;
    padding: 0 20px 12px;
    color: var(--slider-heading-color);
    font-family: var(--font-family-heading-serif);
    font-style: var(--heading-h2-style);
    font-weight: var(--heading-h2-weight);
    text-transform: var(--heading-h2-transform);
    letter-spacing: var(--heading-h2-letter-spacing);
    line-height: var(--heading-h2-line-height-mobile);
    font-size: var(--heading-h2-size-mobile);
    text-align: center;
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-header {
    display: block;
    margin: 0;
    padding: 0 20px 40px;
    color: var(--slider-heading-color);
    font-family: var(--font-family-heading);
    font-weight: var(--heading-h1-weight);
    text-transform: var(--heading-h1-transform);
    letter-spacing: var(--heading-h1-letter-spacing);
    font-size: var(--slider-header-size-mobile);
    line-height: var(--slider-header-line-mobile);
    border-bottom: 0;
    background-image: none;
    text-align: center;
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-header.none {
    display: block !important;
}

#section-slider .frame-type-mask_carouselsimple .carousel-indicators.carousel-indicators-navigation {
    display: none !important;
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-control-prev,
#section-slider .frame-type-mask_carouselsimple .carousel .carousel-control-next {
    top: 50%;
    bottom: auto;
    width: auto;
    min-width: calc(var(--cs-nav-w) + 1.5rem);
    height: auto;
    margin: 0;
    padding: 0.75rem;
    background: transparent;
    border: 0;
    z-index: 4;
    transform: translateY(-50%);
    transition: transform 0.2s ease, opacity 0.25s ease;
}

@media (hover: hover) {
    #section-slider .frame-type-mask_carouselsimple .carousel .carousel-control-prev,
    #section-slider .frame-type-mask_carouselsimple .carousel .carousel-control-next {
        opacity: 0;
        pointer-events: none;
    }

    #section-slider .frame-type-mask_carouselsimple .carousel:hover .carousel-control-prev,
    #section-slider .frame-type-mask_carouselsimple .carousel:hover .carousel-control-next,
    #section-slider .frame-type-mask_carouselsimple .carousel:focus-within .carousel-control-prev,
    #section-slider .frame-type-mask_carouselsimple .carousel:focus-within .carousel-control-next {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (hover: none) {
    #section-slider .frame-type-mask_carouselsimple .carousel .carousel-control-prev,
    #section-slider .frame-type-mask_carouselsimple .carousel .carousel-control-next {
        opacity: 1;
        pointer-events: auto;
    }
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-control-prev {
    left: var(--cs-nav-inset);
    right: auto;
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-control-next {
    right: var(--cs-nav-inset);
    left: auto;
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-control-prev:hover {
    transform: translate(calc(-1 * clamp(4px, 0.8vw, 10px)), -50%);
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-control-next:hover {
    transform: translate(clamp(4px, 0.8vw, 10px), -50%);
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-control-icon {
    position: static;
    top: auto;
    transform: none;
    display: block;
    width: var(--cs-nav-w);
    min-width: var(--cs-nav-w);
    height: var(--cs-nav-h);
    padding: 0;
    border: 0;
    color: transparent;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-control-prev .carousel-control-icon {
    background-image: url("/fileadmin/user_upload/Hotel-Haidenberg/arrow-prev-w.svg");
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-control-next .carousel-control-icon {
    background-image: url("/fileadmin/user_upload/Hotel-Haidenberg/arrow-next-w.svg");
}

#section-slider .frame-type-mask_carouselsimple .carousel .carousel-control-icon::before {
    display: none;
}

/* #main – Carouselsimple ausserhalb #section-slider */
#main .frame-type-mask_carouselsimple {
    padding: 0;
}

#main .frame-type-mask_carouselsimple .frame-container {
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
}

#main .frame-type-mask_carouselsimple .carousel {
    position: relative;
    --cs-nav-w: var(--slider-nav-w);
    --cs-nav-h: var(--slider-nav-h);
    --cs-nav-inset: var(--slider-nav-inset);
}

#main .frame-type-mask_carouselsimple .carousel .carousel-item {
    min-height: 80svh;
    padding-left: 0;
    padding-right: 0;
}

#main .frame-type-mask_carouselsimple .carousel .carousel-backgroundimage-container,
#main .frame-type-mask_carouselsimple .carousel .carousel-backgroundimage {
    position: absolute;
    inset: 0;
}

#main .frame-type-mask_carouselsimple .carousel .carousel-backgroundimage picture {
    display: block;
    width: 100%;
    height: 100%;
}

#main .frame-type-mask_carouselsimple .carousel .carousel-backgroundimage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#main .frame-type-mask_carouselsimple .carousel .carousel-backgroundimage-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0.38) 100%
    );
    pointer-events: none;
}

#main .frame-type-mask_carouselsimple .carousel .carousel-content {
    position: relative;
    z-index: 2;
    min-height: 80svh;
    overflow: hidden;
}

#main .frame-type-mask_carouselsimple .carousel .carousel-content-inner {
    min-height: 80svh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 1rem 5rem;
}

#main .frame-type-mask_carouselsimple .carousel .carousel-text {
    width: 100%;
    max-width: 1100px;
    text-align: center;
}

#main .frame-type-mask_carouselsimple .carousel .carousel-header {
    display: block;
    margin: 0;
    padding: 0 20px 40px;
    color: var(--slider-heading-color);
    font-family: var(--font-family-heading);
    font-weight: var(--heading-h1-weight);
    text-transform: var(--heading-h1-transform);
    letter-spacing: var(--heading-h1-letter-spacing);
    font-size: var(--slider-header-size-mobile);
    line-height: var(--slider-header-line-mobile);
    text-align: center;
}

#main .frame-type-mask_carouselsimple .carousel .carousel-header.none {
    display: block !important;
}

#main .frame-type-mask_carouselsimple .carousel-indicators.carousel-indicators-navigation {
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
    z-index: 5;
    opacity: 1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background-color: var(--slider-indicator-bg);
}

#main .frame-type-mask_carouselsimple .carousel-indicators.carousel-indicators-navigation > button {
    position: relative;
    width: auto;
    height: auto !important;
    margin: 0;
    padding: 0.5rem 0.75rem !important;
    border: 0 !important;
    border-radius: 0;
    text-indent: 0;
    background-color: transparent;
    color: var(--haidenberg-weiss);
    font-family: var(--font-family-base);
    font-size: 14px;
    line-height: 1.3;
    opacity: 0.65;
    transition: opacity 0.2s ease;
}

#main .frame-type-mask_carouselsimple .carousel-indicators.carousel-indicators-navigation > button span {
    display: block;
}

#main .frame-type-mask_carouselsimple .carousel-indicators.carousel-indicators-navigation > button.active {
    opacity: 1;
}

#main .frame-type-mask_carouselsimple .carousel-indicators.carousel-indicators-navigation > button.active::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.35rem;
    border-top: 2px solid var(--slider-indicator-active-border);
}

#main .frame-type-mask_carouselsimple .carousel .carousel-control-prev,
#main .frame-type-mask_carouselsimple .carousel .carousel-control-next {
    display: none !important;
}

@media (min-width: 768px) {
    #section-slider .frame-type-mask_carouselsimple .carousel,
    #main .frame-type-mask_carouselsimple .carousel {
        --cs-nav-w: 90px;
        --cs-nav-h: 20px;
    }

    #section-slider .frame-type-mask_carouselsimple .carousel .carousel-text h2.text-center,
    #main .frame-type-mask_carouselsimple .carousel .carousel-text h2.text-center {
        font-size: var(--heading-h2-size-tablet);
        line-height: var(--heading-h2-line-height-tablet);
    }

    #section-slider .frame-type-mask_carouselsimple .carousel .carousel-header,
    #main .frame-type-mask_carouselsimple .carousel .carousel-header {
        font-size: var(--slider-header-size-tablet);
        line-height: var(--slider-header-line-tablet);
    }
}

@media (min-width: 992px) {
    #section-slider .frame-type-mask_carouselsimple .carousel,
    #main .frame-type-mask_carouselsimple .carousel {
        --cs-nav-inset: 50px;
    }

    #section-slider .frame-type-mask_carouselsimple .carousel .carousel-text h2.text-center,
    #main .frame-type-mask_carouselsimple .carousel .carousel-text h2.text-center {
        font-size: var(--heading-h2-size-desktop);
        line-height: var(--heading-h2-line-height-desktop);
    }

    #section-slider .frame-type-mask_carouselsimple .carousel .carousel-header,
    #main .frame-type-mask_carouselsimple .carousel .carousel-header {
        font-size: var(--slider-header-size-desktop);
        line-height: var(--slider-header-line-desktop);
    }

    #section-slider .frame-type-mask_carouselsimple .carousel .carousel-content-inner {
        padding-bottom: 3.5rem;
    }
}

@media (min-width: 1280px) {
    #section-slider .frame-type-mask_carouselsimple .carousel,
    #main .frame-type-mask_carouselsimple .carousel {
        --cs-nav-inset: 140px;
    }
}

@media (min-width: 1600px) {
    #section-slider .frame-type-mask_carouselsimple .carousel .carousel-text {
        max-width: 1100px;
    }

    #section-slider .frame-type-mask_carouselsimple .carousel .carousel-header,
    #main .frame-type-mask_carouselsimple .carousel .carousel-header {
        font-size: var(--slider-header-size-xl);
        line-height: var(--slider-header-line-xl);
    }
}

@media (min-width: 1900px) {
    #section-slider .frame-type-mask_carouselsimple .carousel .carousel-text {
        max-width: 1600px;
    }

    #section-slider .frame-type-mask_carouselsimple .carousel .carousel-header,
    #main .frame-type-mask_carouselsimple .carousel .carousel-header {
        font-size: var(--slider-header-size-large);
        line-height: var(--slider-header-line-large);
        letter-spacing: 10px;
    }
}

@media (min-width: 2200px) {
    #section-slider .frame-type-mask_carouselsimple .carousel,
    #main .frame-type-mask_carouselsimple .carousel {
        --cs-nav-inset: 240px;
    }
}


main, #main	{position:relative; width:100%; float:left;  z-index:0;     }

/* Layout – Spaltenraster (wie Alpenrast) */
.col100w, div#col100w {
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0 auto;
	padding: 0;
}
.col100w .col-12 { padding-right: 0; padding-left: 0; }

div#all-inclusive,
div#footerwrap { width: 100%; }

@media screen and (max-width: 767px) {
	.grey .col-lg-6, .grey .col-xl-6 {
		flex: 0 0 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
	}
}

.col100 { position: relative; width: 100%; height: auto; margin: 0 auto; padding: 0; }

.frame-container {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-right: 0;
	padding-left: 0;
}

.frame-type-text .frame-container { padding-right: 20px; padding-left: 20px; max-width: 100%; }
.modal .frame-type-text .frame-container { max-width: 100%; padding: 0; }
.modal-content .frame-type-table .frame-container {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	padding-right: 0;
	padding-left: 0;
}
.frame-type-textpic .frame-container { padding-right: 20px; padding-left: 20px; max-width: 100%; }
.frame-type-mask_bildergallerie .frame-container { padding-right: 40px; padding-left: 40px; max-width: 100%; }
.frame-type-mask_txtintro .frame-container { max-width: 100%; padding: 0; }

@media (min-width: 768px) {
	.frame-type-text .frame-container { width: 100%; padding: 0 60px; }
	.modal .frame-type-text .frame-container { max-width: 100%; padding: 0; }
}

@media (min-width: 992px) {
	.row .col-12 { padding-right: 20px; padding-left: 20px; }

	.frame-type-text .frame-container { width: 100%; max-width: calc((100% - 280px) / 6 * 6); padding: 0; }
	.modal .frame-type-text .frame-container { max-width: 100%; padding: 0; }
	.frame-type-textpic .frame-container { width: 100%; padding: 0 20px; max-width: var(--content-frame-max-width); }
	.frame-type-mask_bildergallerie .frame-container { width: 100%; max-width: calc((100% - 280px) / 6 * 6); padding: 0; }
	.frame-type-list .frame-container { width: 100%; max-width: calc((100% - 280px) / 6 * 6); padding: 0; }
}

@media (min-width: 1600px) {
	.frame-type-text .frame-container { width: 100%; max-width: calc((100% - 280px) / 12 * 6); padding: 0 37px; }
	.modal .frame-type-text .frame-container { max-width: 100%; padding: 0; }
	.frame-type-mask_bildergallerie .frame-container { width: 100%; max-width: calc((100% - 280px) / 12 * 11); padding: 0 37px; }
	.frame-type-list .frame-container { width: 100%; max-width: calc((100% - 280px) / 12 * 6); padding: 0 37px; }
}

@media (min-width: 2200px) {
	.frame-type-mask_bildergallerie .frame-container { width: 100%; max-width: calc((100% - 480px) / 12 * 11); padding: 0 37px; }
	.frame-type-list .frame-container { width: 100%; max-width: calc((100% - 480px) / 12 * 6); padding: 0 37px; }
}

/* Mobil: Seitenabstand für Textpic */
@media screen and (max-width: 991px) {
	.frame-type-textpic > .frame-container,
	.frame-type-textpic > .frame-group-container > .frame-group-inner > .frame-container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Textpic / Textmedia: Bilder im Bootstrap-Layout (wie Alpenrast) */
.frame-type-textpic .textpic-gallery .gallery-row,
.frame-type-textmedia .textmedia-gallery .gallery-row {
	margin: 0;
	padding: 0;
}

.frame-type-textpic .textpic-gallery .gallery-item img,
.frame-type-textmedia .textmedia-gallery .gallery-item img {
	width: auto;
	height: auto;
	max-height: 800px;
	max-width: 100%;
	opacity: 1;
}

#main .frame-type-textpic .textpic-gallery .gallery-item,
#main .frame-type-textmedia .textmedia-gallery .gallery-item {
	width: 80%;
	max-width: 316px;
}

.frame-type-textpic .textpic-gallery .gallery-item.gallery-item-size-2,
.frame-type-textmedia .textmedia-gallery .gallery-item.gallery-item-size-2 {
	padding-bottom: 14px;
}

.frame-type-textpic .textpic-gallery .gallery-item.gallery-item-size-2 img,
.frame-type-textmedia .textmedia-gallery .gallery-item.gallery-item-size-2 img {
	transform: scale(1);
	transition: 0.9s ease-in-out;
}

.frame-type-textpic .textpic-gallery .gallery-item.gallery-item-size-2 img:hover,
.frame-type-textmedia .textmedia-gallery .gallery-item.gallery-item-size-2 img:hover {
	transform: scale(1.05);
}

@media (max-width: 768px) {
	#main .frame-type-textpic .textpic-gallery .gallery-item,
	#main .frame-type-textmedia .textmedia-gallery .gallery-item {
		padding-bottom: 20px;
	}
}

/* Fallback: altes ce-textpic-Markup (Text links, Bild rechts) */
.frame-type-textpic .ce-textpic {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.frame-type-textpic .ce-textpic .gallery-row,
.frame-type-textpic .ce-textpic .ce-bodytext {
	width: 100%;
	margin: 0;
}

@media (min-width: 768px) {
	.frame-type-textpic .ce-textpic .gallery-row,
	.frame-type-textpic .ce-textpic .ce-bodytext {
		width: calc(50% - 10px);
	}

	.frame-type-textpic .ce-textpic .ce-bodytext {
		order: 1;
	}

	.frame-type-textpic .ce-textpic .gallery-row {
		order: 2;
	}
}

.frame-type-textpic .ce-textpic .gallery-item img {
	width: auto;
	height: auto;
	max-height: 800px;
	max-width: 100%;
	opacity: 1;
}

#main .frame-type-textpic .ce-textpic .gallery-item {
	width: 80%;
	max-width: 316px;
}

/* Verschachtelte Inhalte in Spalten-Containern: volle Spaltenbreite (100 %) */
[class*="frame-type-container_"] .row > [class*="col-"] .frame .frame-group-container,
[class*="frame-type-container_"] .row > [class*="col-"] .frame .frame-container {
	max-width: 100%;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

/* Mobil: 20px Seitenabstand für Inhalte in Spalten-Containern */
@media screen and (max-width: 991px) {
	[class*="frame-type-container_"] > .frame-container {
		padding-left: 0;
		padding-right: 0;
	}

	[class*="frame-type-container_"] .row > [class*="col-"] .frame .frame-group-container,
	[class*="frame-type-container_"] .row > [class*="col-"] .frame .frame-container {
		padding-left: var(--container-2-columns-inset-min);
		padding-right: var(--container-2-columns-inset-min);
	}
}

/* Content-Breite: frame-container max. 1340px */
.frame-type-gridelements_pi1 .frame-container {
	max-width: var(--content-frame-max-width);
}

/* 2-Spalten-Container: Verlauf + seitlicher Abstand */
.frame-type-container_2_columns {
	background: linear-gradient(
		to bottom,
		#ECECE8 0%,
		transparent 100%
	);
}

.frame-type-container_2_columns > .frame-container {
	--bs-gutter-x: 0;
	box-sizing: border-box;
	max-width: var(--content-frame-max-width);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: max(var(--container-2-columns-inset-min), var(--container-2-columns-inset));
	padding-right: max(var(--container-2-columns-inset-min), var(--container-2-columns-inset));
}

.frame-type-container_2_columns .row > [class*="col-"] {
	padding-left: 0;
	padding-right: 0;
}

.frame-type-container_2_columns .row {
	--bs-gutter-x: 0;
	margin-left: 0;
	margin-right: 0;
}

@media screen and (min-width: 992px) {
	.frame-type-container_2_columns > .frame-container {
		padding-left: var(--container-2-columns-inset-desktop);
		padding-right: var(--container-2-columns-inset-desktop);
	}

	/* Gleiche Spaltenbreite: je 50% minus halber Spaltenabstand, 60px Zwischenraum */
	.frame-type-container_2_columns .row > [class*="col-"] {
		flex: 0 0 calc(50% - 30px);
		max-width: calc(50% - 30px);
	}

	.frame-type-container_2_columns .row > [class*="col-"]:last-child {
		margin-left: 60px;
	}
}




/* News-Angebote-Slider: gleicher seitlicher Rand wie 2-Spalten-Container */
.frame-type-news_pi1 > .frame-group-container > .frame-group-inner > .frame-container {
	--bs-gutter-x: 0;
	box-sizing: border-box;
	max-width: var(--content-frame-max-width);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: max(var(--container-2-columns-inset-min), var(--container-2-columns-inset));
	padding-right: max(var(--container-2-columns-inset-min), var(--container-2-columns-inset));
}

@media screen and (min-width: 1900px) {
	.frame-type-news_pi1 > .frame-group-container > .frame-group-inner > .frame-container {
		padding-left: var(--container-2-columns-inset-max);
		padding-right: var(--container-2-columns-inset-max);
	}
}

/* Aktiv-Icons-Slider (Mask werbestudioaktivicons) */
.frame-type-mask_werbestudioaktivicons > .frame-container {
	--aktivicons-inset-min: 20px;
	--aktivicons-inset-max: 170px;
	--aktivicons-inset: clamp(
		var(--aktivicons-inset-min),
		calc(var(--aktivicons-inset-max) * 100vw / 1900),
		var(--aktivicons-inset-max)
	);
	--bs-gutter-x: 0;
	box-sizing: border-box;
	max-width: var(--content-frame-max-width);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: max(var(--aktivicons-inset-min), var(--aktivicons-inset));
	padding-right: max(var(--aktivicons-inset-min), var(--aktivicons-inset));
}



.frame-type-mask_werbestudioaktivicons .owl-aktivicons {
	position: relative;
	--aktivicons-nav-width: 80px;
	--aktivicons-nav-gutter: 12px;
}

@media screen and (min-width: 992px) {
	.frame-type-mask_werbestudioaktivicons .owl-aktivicons {
		--aktivicons-nav-width: 100px;
		--aktivicons-nav-gutter: 0px;
	}

	/* Sichtbarer Track zwischen Prev/Next – Nav liegt im seitlichen Rand */
	.frame-type-mask_werbestudioaktivicons .owl-aktivicons .owl-stage-outer {
		margin-left: var(--werbestudio-slider-stage-margin-desktop);
		margin-right: var(--werbestudio-slider-stage-margin-desktop);
		width: auto;
	}
}

/* Platz für Nav-Pfeile: margin auf .owl-stage-outer ab 992px (siehe Media Query) */

.frame-type-mask_werbestudioaktivicons .owl-aktivicons .owl-nav {
	top: 38%;
	transform: translateY(-50%);
	padding-left: 0;
	padding-right: 0;
}

.frame-type-mask_werbestudioaktivicons .owl-aktivicons .owl-nav button.owl-prev,
.frame-type-mask_werbestudioaktivicons .owl-aktivicons .owl-nav button.owl-next {
	background: transparent !important;
	padding: 0;
	line-height: 0;
	width: var(--aktivicons-nav-width);
	flex: 0 0 var(--aktivicons-nav-width);
}

.frame-type-mask_werbestudioaktivicons .owl-aktivicons .owl-nav button.owl-prev .nav-btn,
.frame-type-mask_werbestudioaktivicons .owl-aktivicons .owl-nav button.owl-next .nav-btn {
	position: relative;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	width: 100%;
	background-position: center center;
}

/* Mobil: Prev/Next unterhalb der Items statt mittig überlagert */
@media screen and (max-width: 991px) {
	.owl-aktivicons .owl-nav,
	.owl-gallery .owl-nav,
	.owl-one .owl-nav,
	.owl-zwei .owl-nav,
	.owl-drei .owl-nav {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		transform: none;
		order: 2;
		margin-top: 1rem;
		padding-left: 0;
		padding-right: 0;
		opacity: 1;
		pointer-events: auto;
	}

	.owl-aktivicons .owl-stage-outer,
	.owl-gallery .owl-stage-outer,
	.owl-one .owl-stage-outer,
	.owl-zwei .owl-stage-outer,
	.owl-drei .owl-stage-outer {
		order: 1;
	}

	.owl-aktivicons .owl-dots,
	.owl-gallery .owl-dots,
	.owl-one .owl-dots,
	.owl-zwei .owl-dots,
	.owl-drei .owl-dots {
		order: 3;
		margin-top: 0.75rem;
	}
}

.frame-type-mask_werbestudioaktivicons .owl-aktivicons .aktivicon-item,
.frame-type-mask_werbestudioaktivicons .owl-aktivicons a.aktivicon-item--linked {
	display: block;
	height: 100%;
	border-right: 1px solid var(--haidenberg-border);
}

.frame-type-mask_werbestudioaktivicons .owl-aktivicons a.aktivicon-item--linked {
	text-decoration: none;
	color: inherit;
}

.frame-type-mask_werbestudioaktivicons .owl-aktivicons a.aktivicon-item--linked:hover,
.frame-type-mask_werbestudioaktivicons .owl-aktivicons a.aktivicon-item--linked:focus {
	text-decoration: none;
	color: var(--haidenberg-gruen);
}

.frame-type-mask_werbestudioaktivicons .owl-aktivicons .owl-item:last-child .aktivicon-item,
.frame-type-mask_werbestudioaktivicons .owl-aktivicons .owl-item:last-child a.aktivicon-item--linked {
	border-right: 0;
}

.frame-type-mask_werbestudioaktivicons .owl-aktivicons .owl-item:nth-child(odd) {
	margin-top: 0;
}

.frame-type-mask_werbestudioaktivicons .owl-aktivicons .owl-item:nth-child(even) {
	margin-top: clamp(24px, calc(48 * 100vw / 1900), 48px);
}

.frame-type-mask_werbestudioaktivicons .aktivicon-figure {
	margin: 0;
	padding: 0 clamp(12px, 2vw, 24px);
	text-align: center;
}

.frame-type-mask_werbestudioaktivicons .aktivicon-caption {
	margin: 1rem 0 0;
	padding: 0;
	font-family: var(--font-family-heading-serif);
	font-size: clamp(14px, calc(18 * 100vw / 1900), 18px);
	font-style: italic;
	font-weight: var(--font-weight-regular);
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--haidenberg-gruen);
}

.frame-type-mask_werbestudioaktivicons .aktivicon-figure img {
	display: block;
	width: auto;
	max-width: 72px;
	height: auto;
	margin: 0 auto;
	opacity: 1;
}

/* Werbestudio-Carousel in 2-Spalten-Container: Bild + Berg-Kontur */
.frame-type-container_2_columns .werbestudio-carousel .carouselimg {
	position: relative;
	overflow: hidden;
	background-color: white;
}

.frame-type-container_2_columns .werbestudio-carousel .carouselimg img {
	opacity: 1;
}

.werbestudio-carousel:not(.werbestudio-carousel-gallery) .owl-item .carouselimg::after {
	background: var(--werbestudio-carousel-overlay-gradient);
}

.frame-type-container_2_columns .werbestudio-carousel .owl-item .offerscontainer {
	position: relative;
	margin-bottom: 20px;
}

.frame-type-container_2_columns .werbestudio-carousel .owl-item .offerscontainer::after {
	content: "";
	position: absolute;
	bottom: 0;
	z-index: 2;
	width: min(586px, 72%);
	height: clamp(48px, calc(110 * 100vw / 1900), 110px);
	background: url("/fileadmin/user_upload/Hotel-Haidenberg/herzgruen.svg") no-repeat;
	background-size: contain;
	pointer-events: none;
	transform: translateY(20px);
}

@media screen and (min-width: 992px) {
	.frame-type-container_2_columns .werbestudio-carousel .owl-item .offerscontainer {
		margin-bottom: 45px;
	}

	.frame-type-container_2_columns .werbestudio-carousel .owl-item .offerscontainer::after {
		transform: translateY(45px);
	}
}

.frame-type-container_2_columns .row > [class*="col-"]:first-child .werbestudio-carousel .owl-item .offerscontainer::after {
	left: 50px;
	right: auto;
	background-position: left bottom;
}

.frame-type-container_2_columns .row > [class*="col-"]:last-child .werbestudio-carousel .owl-item .offerscontainer::after {
	left: auto;
	right: 50px;
	background-position: right bottom;
}

/* Werbestudio-Carousel: Pagination-Dots sichtbar */
.frame-type-container_2_columns .werbestudio-carousel.owl-carousel .owl-dots {
	display: block !important;
	margin-top: 0.5rem;
	order: 3;
	width: 100%;
	text-align: center;
}

@media screen and (max-width: 991px) {
	.frame-type-container_2_columns .werbestudio-carousel.owl-carousel .owl-dots {
		display: flex !important;
		justify-content: center;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
	}
}

.frame-type-container_2_columns .werbestudio-carousel.owl-carousel .owl-dots .owl-dot span {
	width: 10px;
	height: 10px;
	margin: 5px 7px;
	background: var(--haidenberg-border);
	display: block;
	border-radius: 30px;
	transition: background 0.2s ease;
}

.frame-type-container_2_columns .werbestudio-carousel.owl-carousel .owl-dots .owl-dot.active span,
.frame-type-container_2_columns .werbestudio-carousel.owl-carousel .owl-dots .owl-dot:hover span {
	background: var(--haidenberg-gruen);
}

/* Mask Werbestudio Carousel Gallery – Vollbreite */
.frame-type-mask_werbestudiocarouselgallery > .frame-container {
	--carousel-gallery-inset-min: 20px;
	--carousel-gallery-inset-mid: 170px;
	--carousel-gallery-inset-max: 250px;
	--carousel-gallery-inset: clamp(
		var(--carousel-gallery-inset-min),
		calc(var(--carousel-gallery-inset-mid) * 100vw / 1600),
		var(--carousel-gallery-inset-mid)
	);
	--bs-gutter-x: 0;
	box-sizing: border-box;
	max-width: var(--content-frame-max-width);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: max(var(--carousel-gallery-inset-min), var(--carousel-gallery-inset));
	padding-right: max(var(--carousel-gallery-inset-min), var(--carousel-gallery-inset));
}

.frame-type-mask_werbestudiocarouselgallery .frame-inner {
	--aktivicons-nav-width: 80px;
}

.frame-type-mask_werbestudiocarouselgallery .carousel-gallery-header {
	text-align: center;
	padding-top: 0;
	font-size: calc(var(--heading-h2-size-mobile) * 1.5);
	line-height: calc(var(--heading-h2-line-height-mobile) * 1.5);
}

.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery {
	position: relative;
}

.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery .carouselimg {
	position: relative;
	overflow: hidden;
	background-color: var(--haidenberg-weiss);
}

.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery .carouselimg img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 1;
}

.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery .owl-item .offerscontainer {
	position: relative;
	margin-bottom: 20px;
}

.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery .owl-item .offerscontainer::after {
	content: "";
	position: absolute;
	left: 50px;
	right: auto;
	bottom: 0;
	z-index: 2;
	width: min(586px, 72%);
	height: clamp(48px, calc(110 * 100vw / 1900), 110px);
	background: url("/fileadmin/user_upload/Hotel-Haidenberg/herzgallery.svg") no-repeat left bottom;
	background-size: contain;
	pointer-events: none;
	transform: translateY(20px);
}

.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery.owl-carousel .owl-dots {
	display: block !important;
	margin-top: 0.5rem;
	order: 3;
	width: 100%;
	text-align: center;
}

.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery.owl-carousel .owl-dots .owl-dot span {
	width: 10px;
	height: 10px;
	margin: 5px 7px;
	background: var(--haidenberg-border);
	display: block;
	border-radius: 30px;
	transition: background 0.2s ease;
}

.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery.owl-carousel .owl-dots .owl-dot.active span,
.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery.owl-carousel .owl-dots .owl-dot:hover span {
	background: var(--haidenberg-gruen);
}

.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery .owl-nav {
	top: 38%;
	transform: translateY(-50%);
	padding-left: 0;
	padding-right: 0;
}

.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery .owl-nav button.owl-prev,
.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery .owl-nav button.owl-next {
	background: transparent !important;
	padding: 0;
	line-height: 0;
	width: var(--aktivicons-nav-width);
	flex: 0 0 var(--aktivicons-nav-width);
}

.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery .owl-nav button.owl-prev .nav-btn,
.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery .owl-nav button.owl-next .nav-btn {
	position: relative;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	width: 100%;
	background-position: center center;
}

@media screen and (min-width: 768px) {
	.frame-type-mask_werbestudiocarouselgallery .carousel-gallery-header {
		text-align: left;
		padding-left: 100px;
		font-size: calc(var(--heading-h2-size-tablet) * 1.5);
		line-height: calc(var(--heading-h2-line-height-tablet) * 1.5);
	}
}

@media screen and (min-width: 992px) {
	.frame-type-mask_werbestudiocarouselgallery .frame-inner {
		--aktivicons-nav-width: 100px;
	}

	.frame-type-mask_werbestudiocarouselgallery .carousel-gallery-header {
		padding-left: 240px;
		font-size: calc(var(--heading-h2-size-desktop) * 1.5);
		line-height: calc(var(--heading-h2-line-height-desktop) * 3);
	}

	.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery .owl-stage-outer {
		width: auto;
	}

	.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery .owl-item .offerscontainer {
		margin-bottom: 45px;
	}

	.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery .owl-item .offerscontainer::after {
		transform: translateY(45px);
	}
}

@media screen and (min-width: 1600px) {
	.frame-type-mask_werbestudiocarouselgallery > .frame-container {
		padding-left: var(--carousel-gallery-inset-mid);
		padding-right: var(--carousel-gallery-inset-mid);
	}
}

@media screen and (min-width: 1900px) {
	.frame-type-mask_werbestudiocarouselgallery > .frame-container {
		padding-left: 75px;
		padding-right: 75px;
	}
}

@media screen and (max-width: 991px) {
	.frame-type-mask_werbestudiocarouselgallery .werbestudio-carousel-gallery.owl-carousel .owl-dots {
		display: flex !important;
		justify-content: center;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Highlights Tabs: nutzt Standard-H1-Tokens (mobil / tablet / desktop / large) */
.frame-type-mask_highlights_tabs .highlights-title {
	margin: 0;
	font-family: var(--font-family-heading);
	font-weight: var(--heading-h1-weight);
	text-transform: var(--heading-h1-transform);
	letter-spacing: var(--heading-h1-letter-spacing);
	font-size: var(--heading-h1-size-mobile);
	line-height: var(--heading-h1-line-height-mobile);
}

@media screen and (min-width: 768px) {
	.frame-type-mask_highlights_tabs .highlights-title {
		font-size: var(--heading-h1-size-tablet);
		line-height: var(--heading-h1-line-height-tablet);
	}
}

@media screen and (min-width: 992px) {
	.frame-type-mask_highlights_tabs .highlights-title {
		font-size: var(--heading-h1-size-desktop);
		line-height: var(--heading-h1-line-height-desktop);
	}
}

@media screen and (min-width: 1900px) {
	.frame-type-mask_highlights_tabs .highlights-title {
		font-size: var(--heading-h1-size-large);
		line-height: var(--heading-h1-line-height-large);
	}
}


/* Typografie – Almdorf Haidenberg (CSS-Variablen) */
h1, .h1, p.h1 {
    margin: 0;
    line-height: var(--heading-h1-line-height-mobile);
    font-weight: var(--heading-h1-weight);
    text-align: left;
    font-family: var(--font-family-heading);
    text-transform: var(--heading-h1-transform);
    letter-spacing: var(--heading-h1-letter-spacing);
    font-size: var(--heading-h1-size-mobile);
    color: var(--heading-h1-color);
    padding-bottom: var(--heading-h1-padding-bottom);
    margin-bottom: 0;
}

h2, .h2, p.h2 {
    margin: 0;
    font-family: var(--font-family-heading-serif);
    font-style: var(--heading-h2-style);
    font-weight: var(--heading-h2-weight);
    text-transform: var(--heading-h2-transform);
    letter-spacing: var(--heading-h2-letter-spacing);
    line-height: var(--heading-h2-line-height-mobile);
    color: var(--heading-h2-color);
    font-size: var(--heading-h2-size-mobile);
    background-image: var(--heading-h2-bg-image);
    background-repeat: no-repeat;
    background-position: top center;
    padding: var(--heading-h2-padding-top-mobile) 0 20px;
    margin-top: 0;
    text-align: left;
}

h1.text-center, .h1.text-center, p.h1.text-center,
h2.text-center, .h2.text-center, p.h2.text-center {
    text-align: center;
}

h2.element-header {
    padding-top: var(--heading-h2-padding-top-mobile);
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

h3, .h3, p.h3 {
    margin: 0;
    font-family: var(--font-family-heading-serif);
    font-weight: var(--heading-h3-weight);
    font-size: var(--heading-h3-size-mobile);
    line-height: var(--heading-h3-line-height-mobile);
    text-transform: var(--heading-h3-transform);
    letter-spacing: var(--heading-h3-letter-spacing);
    color: var(--heading-h3-color);
    padding-bottom: var(--heading-h3-padding-bottom);
    text-align: left;
}

h3.text-center, .h3.text-center, p.h3.text-center {
    text-align: center;
}

h4, p.h4 {  font-weight: normal;  font-size: 18px; line-height: 22px;  text-transform: uppercase; color: var(--body-color);	 margin-top: 0; letter-spacing: 1px; padding-bottom: 10px;  }
p,
#main .frame-type-textpic ul,
#main .frame-type-text ul,
.frame-type-list ul,
ul.list-normal,
#main .frame-type-textpic li,
#main .frame-type-text li,
.frame-type-list li,
ul.list-normal li,
#main .frame-type-text a:not(.btn),
#main .frame-type-textpic a:not(.btn),
.frame-type-list a:not(.btn),
#main .news .card.mb-2 .card-body .teaser-text .teaser-text-top {
    font-size: var(--body-font-size-mobile);
    line-height: var(--body-line-height-mobile);
}

p {
    font-weight: var(--font-weight-regular);
    margin-bottom: 1.3em;
    font-family: var(--font-family-base);
    color: var(--body-color);
}
a {
    text-decoration: none;
    color: var(--frame-link-color);
    font-family: var(--font-family-base);
}
a:hover { color: var(--frame-link-hover-color); }
#main .frame-type-textpic ul,
#main .frame-type-text ul,
.frame-type-list ul,
ul.list-normal {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	margin-bottom: 1.3em;
}

#main .frame-type-textpic li,
#main .frame-type-text li,
.frame-type-list li,
ul.list-normal li {
    text-align: left;
    list-style: none;
    padding-left: 15px;
    font-weight: 400;
    color: var(--body-color);
    background: url("/fileadmin/user_upload/Hotel-Haidenberg/list.svg") no-repeat left 0.45em;
}

/* Tabellen – Typografie (Design-Tokens) */
.table {
	--bs-table-color: var(--body-color);
	--bs-table-striped-color: var(--body-color);
	--bs-table-active-color: var(--body-color);
	--bs-table-hover-color: var(--body-color);
	--bs-table-border-color: var(--haidenberg-border);
	font-family: var(--font-family-base);
	font-size: var(--body-font-size-mobile);
	line-height: var(--body-line-height-mobile);
	color: var(--body-color);
}
.table > :not(caption) > * > * {
	color: var(--body-color);
	font-size: inherit;
	line-height: inherit;
}
.table th,
.table td,
.table caption {
	font-family: var(--font-family-base);
	font-size: var(--body-font-size-mobile);
	line-height: var(--body-line-height-mobile);
	color: var(--body-color);
}
.table th {
	font-weight: var(--font-weight-bold);
}
.table caption {
	caption-side: top;
	padding-bottom: 0.5rem;
	color: var(--body-color);
}
.table a:not(.btn) {
	color: var(--frame-link-color);
}
.table a:not(.btn):hover {
	color: var(--frame-link-hover-color);
}
.modal-body table,
#main .frame-type-text table,
#main .frame-type-textpic table {
	font-family: var(--font-family-base);
	font-size: var(--body-font-size-mobile);
	line-height: var(--body-line-height-mobile);
	color: var(--body-color);
	border-color: var(--haidenberg-border);
}
.modal-body table th,
.modal-body table td,
#main .frame-type-text table th,
#main .frame-type-text table td,
#main .frame-type-textpic table th,
#main .frame-type-textpic table td {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: var(--body-color);
}
.modal-body table th,
#main .frame-type-text table th,
#main .frame-type-textpic table th {
	font-weight: var(--font-weight-bold);
}
.modal-body table a:not(.btn),
#main .frame-type-text table a:not(.btn),
#main .frame-type-textpic table a:not(.btn) {
	color: var(--frame-link-color);
}
.modal-body table a:not(.btn):hover,
#main .frame-type-text table a:not(.btn):hover,
#main .frame-type-textpic table a:not(.btn):hover {
	color: var(--frame-link-hover-color);
}

@media screen and (min-width: 768px) {
    h1, .h1, p.h1 {
        font-size: var(--heading-h1-size-tablet);
        line-height: var(--heading-h1-line-height-tablet);
    }

    h2, .h2, p.h2 {
        font-size: var(--heading-h2-size-tablet);
        line-height: var(--heading-h2-line-height-tablet);
        padding-top: var(--heading-h2-padding-top-tablet);
    }

    h2.element-header {
        padding-top: var(--heading-h2-padding-top-tablet);
    }

    h3, .h3, p.h3 {
        font-size: var(--heading-h3-size-tablet);
        line-height: var(--heading-h3-line-height-tablet);
    }

    p,
    #main .frame-type-textpic ul,
    #main .frame-type-text ul,
    .frame-type-list ul,
    ul.list-normal,
    #main .frame-type-textpic li,
    #main .frame-type-text li,
    .frame-type-list li,
    ul.list-normal li,
    #main .frame-type-text a:not(.btn),
    #main .frame-type-textpic a:not(.btn),
    .frame-type-list a:not(.btn),
    #main .news .card.mb-2 .card-body .teaser-text .teaser-text-top {
        font-size: var(--body-font-size-tablet);
        line-height: var(--body-line-height-tablet);
    }

    .table,
    .table th,
    .table td,
    .table caption,
    .modal-body table,
    .modal-body table th,
    .modal-body table td,
    #main .frame-type-text table,
    #main .frame-type-text table th,
    #main .frame-type-text table td,
    #main .frame-type-textpic table,
    #main .frame-type-textpic table th,
    #main .frame-type-textpic table td {
        font-size: var(--body-font-size-tablet);
        line-height: var(--body-line-height-tablet);
    }
}

@media screen and (min-width: 992px) {
    h1, .h1, p.h1 {
        font-size: var(--heading-h1-size-desktop);
        line-height: var(--heading-h1-line-height-desktop);
        padding-bottom: var(--heading-h1-padding-bottom);
    }

    h2, .h2, p.h2 {
        font-size: var(--heading-h2-size-desktop);
        line-height: var(--heading-h2-line-height-desktop);
        padding: var(--heading-h2-padding-top-desktop) 0 var(--heading-h1-padding-bottom);
    }

    h2.element-header {
        padding-top: var(--heading-h2-padding-top-desktop);
        padding-bottom: 0;
    }

    h3, .h3, p.h3 {
        font-size: var(--heading-h3-size-desktop);
        line-height: var(--heading-h3-line-height-desktop);
        padding-bottom: var(--heading-h3-padding-bottom);
    }

    p,
    #main .frame-type-textpic ul,
    #main .frame-type-text ul,
    .frame-type-list ul,
    ul.list-normal,
    #main .frame-type-textpic li,
    #main .frame-type-text li,
    .frame-type-list li,
    ul.list-normal li,
    #main .frame-type-text a:not(.btn),
    #main .frame-type-textpic a:not(.btn),
    .frame-type-list a:not(.btn),
    #main .news .card.mb-2 .card-body .teaser-text .teaser-text-top {
        font-size: var(--body-font-size-desktop);
        line-height: var(--body-line-height-desktop);
    }

    .table,
    .table th,
    .table td,
    .table caption,
    .modal-body table,
    .modal-body table th,
    .modal-body table td,
    #main .frame-type-text table,
    #main .frame-type-text table th,
    #main .frame-type-text table td,
    #main .frame-type-textpic table,
    #main .frame-type-textpic table th,
    #main .frame-type-textpic table td {
        font-size: var(--body-font-size-desktop);
        line-height: var(--body-line-height-desktop);
    }
}

@media screen and (min-width: 1900px) {
    h1, .h1, p.h1 {
        font-size: var(--heading-h1-size-large);
        line-height: var(--heading-h1-line-height-large);
    }

    h3, .h3, p.h3 {
        font-size: var(--heading-h3-size-large);
        line-height: var(--heading-h3-line-height-large);
    }

    p,
    #main .frame-type-textpic ul,
    #main .frame-type-text ul,
    .frame-type-list ul,
    ul.list-normal,
    #main .frame-type-textpic li,
    #main .frame-type-text li,
    .frame-type-list li,
    ul.list-normal li,
    #main .frame-type-text a:not(.btn),
    #main .frame-type-textpic a:not(.btn),
    .frame-type-list a:not(.btn),
    #main .news .card.mb-2 .card-body .teaser-text .teaser-text-top {
        font-size: var(--body-font-size-large);
        line-height: var(--body-line-height-large);
    }

    .table,
    .table th,
    .table td,
    .table caption,
    .modal-body table,
    .modal-body table th,
    .modal-body table td,
    #main .frame-type-text table,
    #main .frame-type-text table th,
    #main .frame-type-text table td,
    #main .frame-type-textpic table,
    #main .frame-type-textpic table th,
    #main .frame-type-textpic table td {
        font-size: var(--body-font-size-large);
        line-height: var(--body-line-height-large);
    }

    h4 {
        font-size: 26px;
        line-height: 34px;
        padding: 0;
        margin-bottom: 30px;
    }
}

.frame-background-primary h1, .frame-background-primary p.h1 {	color: var(--haidenberg-weiss);   font-family: var(--font-family-heading); font-weight: var(--heading-h1-weight); text-transform: var(--heading-h1-transform); letter-spacing: var(--heading-h1-letter-spacing);}
.frame-background-primary h2, .frame-background-primary p.h2 {	color: var(--haidenberg-weiss); font-family: var(--font-family-heading-serif); font-style: var(--heading-h2-style);}
.frame-background-primary h4, .frame-background-primary p.h4 {	color: var(--haidenberg-weiss);}
.frame-background-secondary h1, .frame-background-secondary p.h1 {	color: var(--haidenberg-anthrazit);}
.frame-background-secondary h4, .frame-background-secondary p.h4 {	color: var(--haidenberg-anthrazit);}

.frame-background-primary {	color: var(--haidenberg-anthrazit);	padding: 60px 20px; background-color: var(--haidenberg-gruen);  }
.frame-background-secondary {	color: var(--haidenberg-anthrazit);	 padding: 60px 20px; background-color: var(--haidenberg-bg-light); }
.frame-background-light {	color: var(--haidenberg-anthrazit);	background-color: var(--haidenberg-bg-light); }
.frame-background-dark {
	color: var(--haidenberg-weiss);
	background-color: var(--haidenberg-gruen);
}
.frame-background-dark h1,
.frame-background-dark p.h1,
.frame-background-dark h2,
.frame-background-dark p.h2,
.frame-background-dark h3,
.frame-background-dark p.h3,
.frame-background-dark p,
.frame-background-dark li {
	color: var(--haidenberg-weiss);
}

.frame-background-dark .textpic-item.textpic-text h2 {
	background-image: none;
	background-repeat: unset;
	background-position: unset;
	padding-top: 0;
	padding-bottom: 20px;
}
.frame-backgroundimage-fade {opacity: 1;}




hr {
	margin: 20px 0;
	border: none;
	height: 18px;
	background: url('/fileadmin/user_upload/Hotel-Haidenberg/trenner.svg') center center no-repeat;
	background-size: auto 18px;
	display: block;
}


a.internal-link, a.mail, a.download  {  padding: 0 5px;       text-transform:uppercase;     display: inline-block;    cursor: pointer;    outline: 0;        text-decoration: none;    text-shadow: none !important;    text-align: center;      width: 50%;    position: relative;    margin: 24px 25%;	 -moz-box-shadow: none;   -webkit-box-shadow: none;    box-shadow: none;    -moz-appearance: none;    -webkit-appearance: none;    appearance: none;   	 	 -moz-transition-duration: 0.5s;    -o-transition-duration: 0.5s;    -webkit-transition-duration: 0.5s;    transition-duration: 0.5s;    -moz-transform: translateZ(0);    -webkit-transform: translateZ(0);    transform: translateZ(0); }
a.link, a.internal_link {  text-decoration:none;	 -moz-box-shadow: none;   -webkit-box-shadow: none;    box-shadow: none;    -moz-appearance: none;    -webkit-appearance: none;    appearance: none;
		 -moz-transition-duration: 0.5s;    -o-transition-duration: 0.5s;    -webkit-transition-duration: 0.5s;    transition-duration: 0.5s;    -moz-transform: translateZ(0);    -webkit-transform: translateZ(0);    transform: translateZ(0);

}
a.external-link-new-window{  text-decoration:none; }
a.external-link-new-window, a.link, a.internal_link, a.internal-link:hover,  a.link:hover,  a.internal_link:hover, a[href^="tel:"] { color: #3B3B3B; text-decoration: none;}

.btn.btn-default,
.btn.btn-primary,
.btn.btn-secondary {
	--bs-btn-padding-y: 0.5rem;
	--bs-btn-padding-x: 1.25rem;
	--bs-btn-font-family: var(--font-family-base);
	--bs-btn-font-size: 0.8125rem;
	--bs-btn-font-weight: var(--font-weight-bold);
	--bs-btn-line-height: 1.2;
	--bs-btn-border-radius: 5px;
	--bs-btn-box-shadow: none;
	--bs-btn-active-shadow: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-right: 5px;
}

.btn.btn-default {
	--bs-btn-color: var(--btn-default-color);
	--bs-btn-bg: var(--btn-default-bg);
	--bs-btn-border-color: var(--btn-default-border);
	--bs-btn-hover-color: var(--btn-default-hover-color);
	--bs-btn-hover-bg: var(--btn-default-hover-bg);
	--bs-btn-hover-border-color: var(--btn-default-hover-border);
	--bs-btn-focus-shadow-rgb: var(--haidenberg-gruen-rgb);
	--bs-btn-active-color: var(--btn-default-hover-color);
	--bs-btn-active-bg: var(--btn-default-hover-bg);
	--bs-btn-active-border-color: var(--btn-default-hover-border);
	--bs-btn-disabled-color: var(--btn-default-color);
	--bs-btn-disabled-bg: var(--btn-default-bg);
	--bs-btn-disabled-border-color: var(--btn-default-border);
}

a.btn.btn-default,
a.btn.btn-default:visited {
	color: var(--btn-default-color);
}

.btn.btn-primary {
	--bs-btn-color: var(--btn-primary-color);
	--bs-btn-bg: var(--btn-primary-bg);
	--bs-btn-border-color: var(--btn-primary-border);
	--bs-btn-hover-color: var(--btn-primary-color);
	--bs-btn-hover-bg: var(--btn-primary-hover-bg);
	--bs-btn-hover-border-color: var(--btn-primary-hover-bg);
	--bs-btn-focus-shadow-rgb: var(--haidenberg-weinrot-rgb);
	--bs-btn-active-color: var(--btn-primary-color);
	--bs-btn-active-bg: var(--btn-primary-hover-bg);
	--bs-btn-active-border-color: var(--btn-primary-hover-bg);
	--bs-btn-disabled-color: var(--btn-primary-color);
	--bs-btn-disabled-bg: var(--btn-primary-bg);
	--bs-btn-disabled-border-color: var(--btn-primary-border);
}

a.btn.btn-primary,
a.btn.btn-primary:visited,
a.btn-primary[href^="tel:"] {
	color: var(--btn-primary-color);
}

.btn.btn-secondary {
	--bs-btn-color: var(--btn-secondary-color);
	--bs-btn-bg: var(--btn-secondary-bg);
	--bs-btn-border-color: var(--btn-secondary-border);
	--bs-btn-hover-color: var(--btn-secondary-color);
	--bs-btn-hover-bg: var(--btn-secondary-hover-bg);
	--bs-btn-hover-border-color: var(--btn-secondary-hover-bg);
	--bs-btn-focus-shadow-rgb: var(--haidenberg-gruen-rgb);
	--bs-btn-active-color: var(--btn-secondary-color);
	--bs-btn-active-bg: var(--btn-secondary-hover-bg);
	--bs-btn-active-border-color: var(--btn-secondary-hover-bg);
	--bs-btn-disabled-color: var(--btn-secondary-color);
	--bs-btn-disabled-bg: var(--btn-secondary-bg);
	--bs-btn-disabled-border-color: var(--btn-secondary-border);
}

a.btn.btn-secondary,
a.btn.btn-secondary:visited {
	color: var(--btn-secondary-color);
}

.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
	text-decoration: none;
}

#footer #menu-language .btn.btn-primary {
	--bs-btn-color: var(--haidenberg-weiss);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--haidenberg-weiss);
	--bs-btn-hover-color: var(--haidenberg-weiss);
	--bs-btn-hover-bg: rgba(255, 255, 255, 0.2);
	--bs-btn-hover-border-color: var(--haidenberg-weiss);
	--bs-btn-active-color: var(--haidenberg-weiss);
	--bs-btn-active-bg: rgba(255, 255, 255, 0.3);
	--bs-btn-active-border-color: var(--haidenberg-weiss);
}

#footer #menu-language a.btn.btn-primary,
#footer #menu-language a.btn.btn-primary:visited {
	color: var(--haidenberg-weiss);
}




.button {
	font-weight: 400;       margin:0; text-transform:uppercase;  font-size:18px;    outline: 0;    color: #FFFFFF; background-color: transparent;            text-shadow: none !important;    text-align: center;    position: relative;
	-moz-box-shadow: none;   -webkit-box-shadow: none;    box-shadow: none;    -moz-appearance: none;    -webkit-appearance: none;    appearance: none;      -moz-transition-duration: 0.5s;    -o-transition-duration: 0.5s;    -webkit-transition-duration: 0.5s;    transition-duration: 0.5s;    -moz-transform: translateZ(0);    -webkit-transform: translateZ(0);    transform: translateZ(0); border-radius:0;
	display: block;		padding:15px 20px 20px 20px;				text-decoration:none;	cursor: pointer;

}
.button:hover { background-color:#FFFFFF; cursor:pointer; color:#271f1d;}
.button:active, .button.is-checked {  background-color:#FFFFFF;  color:#271f1d; }
.button.is-checked {  background-color:#FFFFFF;		color:#271f1d;}
.button:active {  background-color:#FFFFFF;	color:#271f1d;}
.border { border: 5px solid rgba(255,255,255,1.00); }
#banner { position:relative; width:100%; float:left; height:auto;  text-align:center; padding: 20px 0; min-height:120px;   }



@media (max-width: 768px) {
	.sectionw .row {		flex-wrap: wrap;	}
}

.sectionw.GoogleMap .frame-container {	max-width: 100%;}
.sectionw.zimmerspecial .frame-container {	max-width: 1800px;}
.sectionw.margintop-Default { margin-top: -140px; }
.sectionw.margintop-Large { margin-top: -130px; }
.sectionw.margintop-Medium { margin-top: -60px; }
.sectionw.margintop-Small { margin-top: -40px; }
.sectionw.margintop-xSmall { margin-top: 0;}

@media (max-width: 767px) {
	.sectionw.margintop-Default {		margin-top: 0;		padding-top: 0;	}
}


.sectionw.zimmer .col100w { width: 100%; }

.sectionw.z-index { z-index: 1;}
.sectionw.z-index0 { z-index: 1;}
.sectionw.z-index1 { z-index: 2;}
.sectionw.z-index2 { z-index: 3;}
.sectionw.z-index3 { z-index: 4;}
.sectionw.z-index4 { z-index: 5;}


.sectionw.index { z-index: 0;}
.sectionw.index0 { z-index: 0;}
.sectionw.index1 { z-index: 1;}
.sectionw.index2 { z-index: 2;}
.sectionw.index3 { z-index: 3;}
.sectionw.index4 { z-index: 4;}

.frame.z-index { z-index: 1;}
.frame.z-index0 { z-index: 1;}
.frame.z-index1 { z-index: 2;}
.frame.z-index2 { z-index: 3;}
.frame.z-index3 { z-index: 4;}
.frame.z-index4 { z-index: 5;}
.row {margin-right: 0; margin-left: 0;}


.buttonrequest {		margin: 10px;	border: 1px solid rgba(0,0,0,0.4) ;
	box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5),	0 0 1px 1px rgba(255,255,255,0.8), 0 0 0 6px rgba(0,0,0,0.06),	0 0 0 3px rgba(0,0,0,0.1);	cursor: pointer;}
.card-header {      background-color:#E6E6E3;  border-bottom-color:#646463; border-top-color:#E6E6E3; border-left-width:0; border-right-width:0; border-bottom-width:1px; border-top-width:1px; border-bottom-style:solid; border-top-style:solid; }
.card-header h5 button.btn-link {  font-size:30px; font-weight:normal; font-family: var(--font-family-heading-serif); font-style: var(--heading-h2-style); line-height:36px; color:#646463; margin-bottom:0;   letter-spacing:0; text-transform:none; text-align:center; display: unset; white-space: unset; }
.card-header h5 button.btn-link:hover { text-decoration: none; }

#footer	 { position:relative; width:100%;  text-align:center;  height:auto; padding: 20px 0; margin: 0; float: left;  color: white;	background-color: var(--haidenberg-gruen);}

@media screen and (min-width: 992px) {
	#footer {
		padding: 80px 45px 120px;
	}
}

#footer .frame.footer-main { padding: 20px 0; }
#footer .footer-kontakt-block {
	max-width: 750px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
#footer .footer-brand {
	margin-bottom: 2.5rem;
}
#footer .footer-logo {
	display: block;
	max-width: min(100%, 200px);
	height: auto;
	margin: 0 auto;
}
#footer .footer-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 3rem;
	align-items: start;
	text-align: center;
}
#footer .footer-contact-col p {
	margin: 0 0 0;
}
#footer .footer-contact-details {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#footer .footer-social {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 1.25rem;
}
#footer .footer-social img {
	display: block;
	width: 30px;
	height: 30px;
}

@media screen and (max-width: 767px) {
	#footer .footer-contact-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	#footer .footer-brand {
		margin-bottom: 2rem;
	}
}

#footer .frame{	padding: 20px 0;}
#footer .gallery-item-size-1 img{ max-height: 127px;}
#footer .textpic {margin: 0;}

/* Footer: Schrift und Links immer weiß (auch bei frame-background-* aus dem Content) */
#footer,
#footer .frame-background-primary,
#footer .frame-background-secondary,
#footer .frame-background-light,
#footer .frame-background-dark {
	color: #fff;
}
#footer p,
#footer li,
#footer .footer-contact-col,
#footer .footer-kontakt-block {
	color: #fff;
}
#footer a,
#footer a:visited,
#footer a:hover,
#footer a:focus,
#footer a:active,
#footer a[href^="tel:"],
#footer a[href^="mailto:"] {
	color: #fff;
}
#footer a:hover,
#footer a:focus {
	text-decoration: none;
	opacity: 0.85;
}
#footer button {
	background-color: transparent;
	color: #fff;
}
#footer button:hover,
#footer button:focus {
	text-decoration: none;
	opacity: 0.85;
}
@media (min-width: 992px) {
	#footer .gallery-item-size-1 img{ max-height: 180px; margin-bottom: 60px;}
}

#footer #menu-language {padding: 20px 0;}
#footer img.footerlogos {margin: 20px 20px;}

/* Footer Meta: Partnerlogos + Rechtliches (unterhalb #footer, weißer Hintergrund) */
#footer-meta.footer-meta {
	position: relative;
	width: 100%;
	clear: both;
	float: left;
	text-align: center;
	background-color: #fff;
	color: var(--haidenberg-gruen);
	padding: 2.5rem 20px 2rem;
	box-sizing: border-box;
}
#footer-meta .footer-meta-inner {
	max-width: 1200px;
	margin: 0 auto;
}
#footer-meta,
#footer-meta .footertext {
	color: var(--haidenberg-gruen);
}
#footer-meta a,
#footer-meta a:visited,
#footer-meta a:hover,
#footer-meta a:focus,
#footer-meta a:active {
	color: var(--haidenberg-gruen);
}
#footer-meta a:hover,
#footer-meta a:focus {
	text-decoration: none;
	opacity: 0.75;
}
#footer-meta button {
	background-color: transparent;
	color: var(--haidenberg-gruen);
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
}
#footer-meta button:hover,
#footer-meta button:focus {
	text-decoration: none;
	opacity: 0.75;
}
#footer-meta .footer-partner-logos {
	margin: 0 0 1.5rem;
	padding: 0;
	--footer-partner-logo-height: 30px;
	--footer-partner-logo-height-lead: 38px;
}
#footer-meta .footer-partner-logos p {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 2rem;
}
#footer-meta .footer-partner-logos a {
	display: inline-block;
	margin: 0;
	vertical-align: middle;
}
#footer-meta .footer-partner-logos img.gray {
	display: inline-block;
	height: var(--footer-partner-logo-height);
	width: auto;
	max-width: 100%;
	filter: grayscale(100%);
	transition: filter 0.25s ease;
}
#footer-meta .footer-partner-logos p > a:first-of-type img.gray {
	height: var(--footer-partner-logo-height-lead);
}
#footer-meta .footer-partner-logos a:hover img.gray {
	filter: grayscale(0);
}

@media screen and (min-width: 768px) {
	#footer-meta .footer-partner-logos {
		--footer-partner-logo-height: 48px;
		--footer-partner-logo-height-lead: 58px;
	}
	#footer-meta .footer-partner-logos p {
		gap: 1.25rem 2.5rem;
	}
}

@media screen and (min-width: 1900px) {
	#footer-meta .footer-partner-logos {
		--footer-partner-logo-height: 60px;
		--footer-partner-logo-height-lead: 75px;
	}
}
#footer-meta .footertext {
	text-align: center;
	font-size: 10px;
	padding: 0 20px;
	margin: 0;
}

@media (min-width: 992px) {
	#footer-meta.footer-meta {
		padding: 3rem 45px 2.5rem;
	}
	#footer-meta .footertext {
		font-size: 14px;
	}
}

/* Anfrageformular */
div#main .tx-powermail {display: flex; justify-content: center;}
div#main .container-fluid {max-width: 720px; padding-left: 0; padding-right: 0;}
div#main .powermail_form {
	font-size: var(--body-font-size-mobile);
	line-height: var(--body-line-height-mobile);
	color: var(--body-color);
}
div#main .powermail_form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}
div#main .powermail_form  .nolabel legend.powermail_legend { display:none;}
div#main .powermail_form  .nolabel h3 { display:none;}
div#main .powermail_form  h2 { display:none;}
div#main .powermail_form a:hover {color: var(--haidenberg-gruen); text-decoration: none;}
div#main .powermail_form  form  	{ padding:20px 10px 10px 15px;  max-width:80%; margin:0 auto;  }
div#main .powermail_form  label,
div#main .powermail_form  .powermail_label {
	text-align: left;
	width: 100%;
	position: relative;
	float: left;
	padding: 0 10px 0 0;
	font-size: inherit;
	line-height: var(--body-line-height-mobile);
}
div#main .powermail_form  label.form-check-label label.form-check-label {
	padding: 0 10px 0 80px;
	line-height: var(--body-line-height-mobile);
}
div#main .powermail_form  .clear		{clear:both; }
div#main .powermail_form  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]),
div#main .powermail_form     select,
div#main .powermail_form   textarea {
	width: 100%;
	margin: 0;
	border: 1px solid #dee2e6;
	font-family: var(--font-family-base);
	font-size: var(--body-font-size-mobile);
	line-height: var(--body-line-height-mobile);
	padding: 6px 12px;
	box-sizing: border-box;
	color: var(--haidenberg-gruen);
}
div#main .powermail_form select option {
	color: var(--haidenberg-gruen);
	background-color: var(--haidenberg-weiss);
}
div#main .powermail_form  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]),
div#main .powermail_form     select {
	height: auto;
	min-height: calc(var(--body-line-height-mobile) + 12px);
}
div#main .powermail_form     select {
	appearance: auto;
}
div#main .powermail_form   textarea {
	min-height: 200px;
}
div#main .powermail_form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file])::placeholder,
div#main .powermail_form textarea::placeholder {
	color: var(--haidenberg-placeholder);
	opacity: 1;
}
div#main .powermail_form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file])::-webkit-input-placeholder,
div#main .powermail_form textarea::-webkit-input-placeholder {
	color: var(--haidenberg-placeholder);
}
div#main .powermail_form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file])::-moz-placeholder,
div#main .powermail_form textarea::-moz-placeholder {
	color: var(--haidenberg-placeholder);
	opacity: 1;
}
div#main .powermail_form .form-check,
div#main .powermail_form .checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	width: 100%;
	clear: both;
	margin: 0 0 0.75rem;
	padding: 0;
}
div#main .powermail_form .form-check-input[type=checkbox],
div#main .powermail_form .form-check-input[type=radio],
div#main .powermail_form .checkbox input[type=checkbox] {
	flex-shrink: 0;
	float: none;
	width: 1.25rem;
	height: 1.25rem;
	min-width: 1.25rem;
	margin: 0.2rem 0 0;
	padding: 0;
	border: 1px solid #dee2e6;
	background-color: #fff;
	box-shadow: none;
	vertical-align: middle;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
div#main .powermail_form .form-check-input[type=checkbox]:checked,
div#main .powermail_form .checkbox input[type=checkbox]:checked {
	background-color: var(--haidenberg-gruen);
	border-color: var(--haidenberg-gruen);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 75%;
}
div#main .powermail_form .form-check-input[type=checkbox]:focus,
div#main .powermail_form .checkbox input[type=checkbox]:focus {
	outline: 2px solid rgba(92, 113, 27, 0.35);
	outline-offset: 2px;
	box-shadow: none;
}
div#main .powermail_form .powermail_fieldwrap {
	margin-bottom: 1.5rem;
}
div#main .powermail_form .form-check-label,
div#main .powermail_form .powermail_field .checkbox label {
	width: auto;
	float: none;
	position: static;
	padding: 0;
	font-size: inherit;
	line-height: var(--body-line-height-mobile);
}
div#main .powermail_form  label.form-check-label label.form-check-label {
	padding: 0;
	line-height: var(--body-line-height-mobile);
}
div#main .powermail_form .powermail_fieldwrap_type_check {
	width: 100%;
	clear: both;
	float: none;
}
div#main .powermail_form     input:focus:not([type=checkbox]):not([type=radio]) { 	border-color: rgba(186, 135, 72, 0.4);  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(186, 135, 72, 0.6);    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(186, 135, 72, 0.6);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(186, 135, 72, 0.6);      outline: 0 none; 	}
/* Powermail Layout – flache fieldwraps (numberOfColumns = 0) */
div#main .powermail_form fieldset[class*="powermail_fieldset"]::after {
	content: "";
	display: table;
	clear: both;
}
div#main .powermail_form .powermail_fieldwrap.layout1 {
	width: 48%;
	margin-right: 2%;
	float: left;
	box-sizing: border-box;
}
div#main .powermail_form .powermail_fieldwrap.layout2 {
	width: 50%;
	float: left;
	box-sizing: border-box;
}
div#main .powermail_form .powermail_fieldwrap_erwachsene,
div#main .powermail_form .powermail_fieldwrap_kinder {
	width: 50%;
	float: left;
	box-sizing: border-box;
}
div#main .powermail_form .powermail_fieldwrap_erwachsene {
	clear: both;
	padding-right: 10px;
}
div#main .powermail_form .powermail_fieldwrap_kinder {
	padding-left: 10px;
}
div#main .powermail_form [class*="powermail_fieldwrap_jahrekinder"] {
	width: calc(100% / 3);
	float: left;
	box-sizing: border-box;
	padding-right: 10px;
	min-width: 0;
	display: none;
}
div#main .powermail_form .powermail_fieldwrap_jahrekinder3,
div#main .powermail_form .powermail_fieldwrap_jahrekinder6 {
	padding-right: 0;
}
div#main .powermail_form .powermail_fieldwrap_jahrekinder1,
div#main .powermail_form .powermail_fieldwrap_jahrekinder4 {
	clear: both;
}
div#main .powermail_form [class*="powermail_fieldwrap_jahrekinder"] select {
	min-width: 0;
	max-width: 100%;
}
/* Hunde-Formular: „Anzahl der Hunde“ immer in neuer Zeile (auch bei sichtbaren Kinder-Alter-Feldern) */
div#main .powermail_form .powermail_fieldwrap_anzahlderhunde {
	clear: both;
}
div#main .powermail_form .powermail_fieldwrap_mitteilung,
div#main .powermail_form .powermail_fieldwrap_anrede,
div#main .powermail_form .powermail_fieldwrap_emailadresse,
div#main .powermail_form .powermail_fieldwrap_telefon,
div#main .powermail_form .powermail_fieldwrap_type_check,
div#main .powermail_form .powermail_fieldwrap_type_submit {
	width: 100%;
	clear: both;
	float: none;
}
div#main .powermail_form .powermail_fieldwrap_vorname {
	clear: both;
	padding-right: 10px;
}
div#main .powermail_form .powermail_fieldwrap_nachname {
	padding-left: 10px;
}
div#main .powermail_form .powermail_fieldwrap.nolabel:not(.powermail_fieldwrap_erwachsene):not(.powermail_fieldwrap_kinder):not([class*="powermail_fieldwrap_jahrekinder"]) label.powermail_label {display: none;}
div#main .powermail_form input.powermail_submit {
	cursor: pointer;
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-heading);
	font-size: var(--body-font-size-mobile);
	line-height: var(--body-line-height-mobile);
	text-transform: uppercase;
	margin: 0;
	width: 100%;
	padding: 10px;
	min-height: 50px;
	height: auto;
	letter-spacing: 2px;
	clear: both;
	background-color: var(--btn-primary-bg);
	border: 0 solid var(--haidenberg-weiss);
	color: var(--btn-primary-color);
}
div#main .powermail_form input.powermail_submit:disabled,
div#main .powermail_form input.powermail_submit.powermail_submit--disabled {
	opacity: 0.5;
	cursor: wait;
}
div#main .powermail_progressbar {
	display: block;
	width: 100%;
	height: 8px;
	margin-top: 12px;
	border: 1px solid var(--haidenberg-border);
	border-radius: 4px;
	overflow: hidden;
	background-color: var(--haidenberg-bg-secondary);
}
div#main .powermail_progressbar > .powermail_progress {
	height: 100%;
	width: 0;
	background-color: var(--haidenberg-gruen);
	animation: powermail-progress 5s linear forwards;
}
@keyframes powermail-progress {
	from { width: 0; }
	to { width: 100%; }
}

div#main .powermail_form  .btn-toolbar>.btn-group  {    margin-left: 5px;    width: 100%;  text-transform:uppercase;  }

@media screen and (min-width: 768px) {
	div#main .powermail_form,
	div#main .powermail_form label,
	div#main .powermail_form .powermail_label,
	div#main .powermail_form .form-check-label,
	div#main .powermail_form .powermail_field .checkbox label,
	div#main .powermail_form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]),
	div#main .powermail_form select,
	div#main .powermail_form textarea,
	div#main .powermail_form input.powermail_submit {
		font-size: var(--body-font-size-tablet);
		line-height: var(--body-line-height-tablet);
	}

	div#main .powermail_form label,
	div#main .powermail_form .powermail_label,
	div#main .powermail_form .form-check-label,
	div#main .powermail_form .powermail_field .checkbox label,
	div#main .powermail_form label.form-check-label label.form-check-label {
		line-height: var(--body-line-height-tablet);
	}

	div#main .powermail_form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]),
	div#main .powermail_form select {
		min-height: calc(var(--body-line-height-tablet) + 12px);
	}
}

@media screen and (min-width: 992px) {
	div#main .powermail_form,
	div#main .powermail_form label,
	div#main .powermail_form .powermail_label,
	div#main .powermail_form .form-check-label,
	div#main .powermail_form .powermail_field .checkbox label,
	div#main .powermail_form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]),
	div#main .powermail_form select,
	div#main .powermail_form textarea,
	div#main .powermail_form input.powermail_submit {
		font-size: var(--body-font-size-desktop);
		line-height: var(--body-line-height-desktop);
	}

	div#main .powermail_form label,
	div#main .powermail_form .powermail_label,
	div#main .powermail_form .form-check-label,
	div#main .powermail_form .powermail_field .checkbox label,
	div#main .powermail_form label.form-check-label label.form-check-label {
		line-height: var(--body-line-height-desktop);
	}

	div#main .powermail_form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]),
	div#main .powermail_form select {
		min-height: calc(var(--body-line-height-desktop) + 12px);
	}
}

@media screen and (min-width: 1900px) {
	div#main .powermail_form,
	div#main .powermail_form label,
	div#main .powermail_form .powermail_label,
	div#main .powermail_form .form-check-label,
	div#main .powermail_form .powermail_field .checkbox label,
	div#main .powermail_form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]),
	div#main .powermail_form select,
	div#main .powermail_form textarea,
	div#main .powermail_form input.powermail_submit {
		font-size: var(--body-font-size-large);
		line-height: var(--body-line-height-large);
	}

	div#main .powermail_form label,
	div#main .powermail_form .powermail_label,
	div#main .powermail_form .form-check-label,
	div#main .powermail_form .powermail_field .checkbox label,
	div#main .powermail_form label.form-check-label label.form-check-label {
		line-height: var(--body-line-height-large);
	}

	div#main .powermail_form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]),
	div#main .powermail_form select {
		min-height: calc(var(--body-line-height-large) + 12px);
	}
}


@media screen and (max-width: 991px) {
	/* Nach Ajax-Reload fehlt .container-fluid (Powermail hängt nur <form> in .tx-powermail) */
	div#main .tx-powermail {
		max-width: 100%;
		width: 100%;
		padding-left: var(--container-2-columns-inset-min);
		padding-right: var(--container-2-columns-inset-min);
		box-sizing: border-box;
	}
	div#main .tx-powermail .container-fluid {
		max-width: 100%;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
		box-sizing: border-box;
	}
	div#main .tx-powermail form.powermail_form {
		max-width: 100%;
		width: 100%;
		margin: 0;
		padding: 20px 0 10px;
		box-sizing: border-box;
	}
	div#main .frame-type-list:has(.tx-powermail) > .frame-container {
		padding-left: 0;
		padding-right: 0;
	}
}

@media screen and (max-width: 767px) {
	div#main .powermail_form.powermail_form_1 .clear { clear: both; }
	div#main .powermail_form.powermail_form_1 .powermail_fieldwrap_type_check { padding-top: 15px; }
	div#main .powermail_form .powermail_fieldwrap.layout1,
	div#main .powermail_form .powermail_fieldwrap.layout2,
	div#main .powermail_form .powermail_fieldwrap_erwachsene,
	div#main .powermail_form .powermail_fieldwrap_kinder,
	div#main .powermail_form [class*="powermail_fieldwrap_jahrekinder"] {
		width: 100%;
		float: none;
		clear: both;
		padding-left: 0;
		padding-right: 0;
	}

	.titlerequest { font-weight: 800; font-size: 16px; text-transform: none; }
	.price { color: rgba(0, 0, 0, 0.8); font-weight: 800; font-size: 20px; text-transform: none; }
	#section7 img { max-width: 80px; height: auto; }
}

@media screen and (max-width: 590px){
	div#main .powermail_form .powermail_fieldwrap { margin-bottom: 1.25rem; padding-bottom: 0; }
	div#main .powermail_form .powermail_fieldwrap_vorname .powermail_label,
	div#main .powermail_form .powermail_fieldwrap_nachname .powermail_label,
	div#main .powermail_form .powermail_fieldwrap_emailadresse .powermail_label,
	div#main .powermail_form .powermail_fieldwrap_telefon .powermail_label
	{display: none;}

}


DIV#errormessage			{	color: #ff0000;}
DIV#errormessage ul 		{	margin-top: 10px;}

@media screen and (max-width: 480px){
	.form-group-col1 {  width:98%; margin-left:1%;}
	.form-group-col2 {  width:98%; margin-left:1%;}
	.form-group-col3 {  width:98%; margin-left:1%;}
	.form-group-col4 { width:98%; margin-left:1%;}
	.form-group-col5 { width:98%; margin-left:1%;}
}


.csc-textpic-imagerow { padding:0; margin:0;}
.csc-textpic-image img{ padding:0; margin:0; background-position:top left; }
.csc-textpic-imagecolumn{ padding:0; margin:0;}
.csc-textpic-imagewrap{ padding:0; margin:0;}
.lightbox{ padding:0; margin:0;}
.ce-column {   max-width: 100%;}
.ce-gallery img {    display: block;    float: left;  }
.ce-right .ce-gallery {     float: none;}
.ce-intext.ce-right .ce-gallery {    margin-left: 0; }
.ce-column {    margin-right: 7.2px;}
.ce-row {    margin-top: 7.2px;}

#main .textpic {margin: 0;}
 .gallery-row {margin: 0; padding: 0;}
#main .gallery-item.gallery-item-size-1 {	 width: 80%; max-width: 316px;}

@media screen and (min-width: 992px){
	#main .gallery-item.gallery-item-size-1 {	 width: unset; max-width: 734px;}
}

/*
------------------------------------------------------------------------------------------------------
Scroll to top button
------------------------------------------------------------------------------------------------------
*/
#totop	{ position: fixed;  width: 40px; background-color: #474A4D;  right: 0;	height: auto;	padding: 0;	margin: 0;	margin-right: 15px;		bottom: 30px;	}

.cd-top {   height: 40px;  width: 40px;   border-radius: 0;	overflow: hidden;  text-indent: 100%;  white-space: nowrap; content:url("../images/arrow-top-48.png");	display: none;  opacity: 1;  -webkit-transition: opacity .3s 0s, visibility 0s .3s;  -moz-transition: opacity .3s 0s, visibility 0s .3s;  transition: opacity .3s 0s, visibility 0s .3s;  z-index:100000;	}
.cd-top svg {  fill: #000000; }
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {  -webkit-transition: opacity .3s 0s, visibility 0s 0s;  -moz-transition: opacity .3s 0s, visibility 0s 0s;  transition: opacity .3s 0s, visibility 0s 0s; display: block;}
.cd-top.cd-is-visible {  opacity: 1; }
.cd-top.cd-fade-out {  	opacity: 1;}
.no-touch .cd-top:hover {  opacity: 1; }
#totop:hover { background-color: var(--haidenberg-gruen);}
@media only screen and (min-width: 768px) {
	.cd-top {    right: 20px;    bottom: 20px;  }
}


/* google Maps */
iframe {	padding: 50px 0 0 0;	border: 0;}


/*image Anpassungen */
.gallery-item.gallery-item-size-1 img {	width: auto;	height: auto;	max-height: 800px; max-width: 100%; }
.gallery-item.gallery-item-size-2 {padding-bottom: 14px;}
.gallery-item.gallery-item-size-2 img, .gallery-item.gallery-item-size-1 img  {	-webkit-transform: scale(1);	transform: scale(1);	-webkit-transition: 0.9s ease-in-out;	transition: 0.9s ease-in-out; }
.gallery-item.gallery-item-size-2 img:hover, .gallery-item.gallery-item-size-1 img:hover {	-webkit-transform: scale(1.05);	transform: scale(1.05);}



@media (max-width: 768px) {
	.gallery-item.gallery-item-size-2 { width: 100%;}
	.gallery-item.gallery-item-size-1 {padding-bottom: 20px;}
}




.modal-open {	overflow: hidden}
.modal-open .modal {	overflow-x: hidden;	overflow-y: auto}
.modal {	position: fixed;	top: 0;	left: 0;	display: none;	width: 98%;	height: 100%;	overflow: hidden;	outline: 0; z-index: 1050;}
.modal-dialog {	position: relative;	width: auto;	margin: 0.5rem;	pointer-events: none}
.modal.fade .modal-dialog {	transition: transform 0.3s ease-out;	transform: translate(0, -50px)}

.modal .carousel .item {	height: auto;}

@media (min-width: 768px) {
	.modal .carousel .item {		height: auto;	}
}



.modal.show .modal-dialog {	transform: none}
.modal.modal-static .modal-dialog {	transform: scale(1.02)}
.modal-dialog-scrollable {	display: flex;	max-height: calc(100% - 1rem)}
.modal-dialog-scrollable .modal-content {	max-height: calc(100vh - 1rem);	overflow: hidden}
.modal-dialog-scrollable .modal-header, .modal-dialog-scrollable .modal-footer {	flex-shrink: 0}
.modal-dialog-scrollable .modal-body {	overflow-y: auto}
.modal-dialog-centered {	display: flex;	align-items: center;	min-height: calc(100% - 1rem)}
.modal-dialog-centered::before {	display: block;	height: calc(100vh - 1rem);	content: ""}
.modal-dialog-centered.modal-dialog-scrollable {	flex-direction: column;	justify-content: center;	height: 100%}
.modal-dialog-centered.modal-dialog-scrollable .modal-content {	max-height: none}
.modal-dialog-centered.modal-dialog-scrollable::before {	content: none}
.modal-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, 0.2);
	outline: 0;
	font-family: var(--font-family-base);
	color: var(--body-color);
}
.modal .modal-content ul { padding-top: 20px; }
.modal-backdrop {	position: fixed;	top: 0;	left: 0;	z-index: 0;	width: 100vw;	height: 100vh;	background-color: #000000}
.modal-backdrop.fade {	opacity: 0}
.modal-backdrop.show {	opacity: 0.5}
.modal-header {	display: flex;	align-items: flex-start;	justify-content: space-between;	padding: 1rem 1rem;	border-bottom: 1px solid #dee2e6}
.modal-header .close {	padding: 1rem 1rem;	margin: -1rem -1rem -1rem auto}
.modal-title {
	margin-bottom: 0;
	padding-bottom: 0;
	font-family: var(--font-family-heading-serif);
	font-weight: var(--heading-h3-weight);
	font-size: var(--heading-h3-size-mobile);
	line-height: var(--heading-h3-line-height-mobile);
	letter-spacing: var(--heading-h3-letter-spacing);
	color: var(--haidenberg-gruen);
	text-transform: none;
}
.modal-body {
	position: relative;
	flex: 1 1 auto;
	padding: 1rem;
	font-size: var(--body-font-size-mobile);
	line-height: var(--body-line-height-mobile);
}
.modal-body p,
.modal-body li {
	font-family: var(--font-family-base);
	font-size: var(--body-font-size-mobile);
	line-height: var(--body-line-height-mobile);
	color: var(--body-color);
}
.modal-body p {
	margin-bottom: 1.3em;
}
.modal-body p:last-child {
	margin-bottom: 0;
}
.modal-body strong {
	font-weight: var(--font-weight-bold);
	color: var(--body-color);
}
.modal-body a:not(.btn) {
	color: var(--frame-link-color);
}
.modal-body a:not(.btn):hover {
	color: var(--frame-link-hover-color);
}
.modal-footer {	display: flex;	flex-wrap: wrap;	align-items: center;	justify-content: flex-end;	padding: 0.75rem;	border-top: 1px solid #dee2e6}
.modal-footer>* {	margin: 0.25rem}
.modal-scrollbar-measure {	position: absolute;	top: -9999px;	width: 50px;	height: 50px;	overflow: scroll}
.modal .newsangebotpreispreis2, .modal .newsangebotpreispreis {font-size: 50px;	font-weight: 300; line-height: 60px;}
.modal .news-img-wrap {
	width: 100%;
	height: var(--modal-img-height);
	overflow: hidden;
	border-radius: 6px;
	margin-bottom: 3rem;
}
.modal .news-img-wrap picture {
	display: block;
	width: 100%;
	height: 100%;
}
.modal .news-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media screen and (min-width: 768px) {
	.modal .modal-title {
		font-size: var(--heading-h3-size-tablet);
		line-height: var(--heading-h3-line-height-tablet);
	}
	.modal-body,
	.modal-body p,
	.modal-body li {
		font-size: var(--body-font-size-tablet);
		line-height: var(--body-line-height-tablet);
	}
}

@media screen and (min-width: 992px) {
	.modal .modal-title {
		font-size: var(--heading-h3-size-desktop);
		line-height: var(--heading-h3-line-height-desktop);
	}
	.modal-body,
	.modal-body p,
	.modal-body li {
		font-size: var(--body-font-size-desktop);
		line-height: var(--body-line-height-desktop);
	}
}

@media screen and (min-width: 1900px) {
	.modal .modal-title {
		font-size: var(--heading-h3-size-large);
		line-height: var(--heading-h3-line-height-large);
	}
	.modal-body,
	.modal-body p,
	.modal-body li {
		font-size: var(--body-font-size-large);
		line-height: var(--body-line-height-large);
	}
}

@media (min-width:768px) {
	.modal-dialog { width: 100%; max-width: 500px; margin: 1.75rem auto; margin-top: 10px; }
	.modal-dialog-scrollable {		max-height: calc(100% - 3.5rem)	}
	.modal-dialog-scrollable .modal-content {		max-height: calc(100vh - 3.5rem)	}
	.modal-dialog-centered {		min-height: calc(100% - 3.5rem)	}
	.modal-dialog-centered::before {		height: calc(100vh - 3.5rem)	}
	.modal-sm {		max-width: 300px	}
}

@media (min-width:992px) {
	.modal-lg, .modal-xl {		max-width: 800px	}
	.modal-dialog {		max-width: 800px;		}
}

@media (min-width:1280px) {
	.modal-xl {		max-width: 1140px	}
	.modal-dialog {		max-width: 800px;		}
}

@media (min-width:1600px) {
	.modal-dialog {		max-width: 1000px;		}
}

.GoogleMap  iframe {	border: 0;	filter: gray(100%);		-webkit-backface-visibility: hidden; backface-visibility: hidden;
}


.accordion>.card>.card-header {	 margin-bottom: 0px; }
.accordion-header.card-header {	background-color: #EAEAEA;	border-bottom-color: #191919;	border-top-color: #EAEAEA;
	border-left-width: 0;	border-right-width: 0;	border-bottom-width: 1px;	border-top-width: 1px;	border-bottom-style: solid;	border-top-style: solid;
}
.accordion-item.card { border: 0 solid rgba(0, 0, 0, 0.125); }
.accordion-item+.accordion-item {	 margin-top: 0; }
.accordion-item { border-bottom: 0 solid rgba(0, 0, 0, 0.125) !important; }
.accordion-item  h4.accordion-title:before {	display: block;	height: 0;		background-image: none;		background-size: auto;}
.accordion-item  h4.accordion-title {	padding-bottom: 0; text-transform: none; text-align: left;}
.accordion-item  .accordion-body { border: 0px solid #EAEAEA; 	background-color: #EAEAEA;}


.accordion-title {	font-size: 16px;	font-weight: normal;	margin-bottom: 0;	line-height:28px;}
.accordion-title-link {	padding: 1rem 0;}


.accordion-body.card-body {		padding: 1.5rem 0;}

.card {
	color: var(--haidenberg-gruen);
}
.card a:not(.btn) {
	color: var(--haidenberg-gruen);
}
.card a:not(.btn):hover {
	color: var(--haidenberg-gruen-dark);
}



@media (min-width:992px) {
	.accordion-title-link {	padding: 1rem 1.5rem;}
	.accordion-title {	font-size: 1.1rem;	font-weight: normal;	margin-bottom: 0;	line-height: 1.2em}
	.accordion-body.card-body {		padding: 1.5rem;}
}







.news a{ text-align: right;}
.news hr{  position: relative;	float: left;	width: 100%;	border: 0;	border-top: 2px solid;	display: block;	height: 25px;}
.news .card {border: 0; border-bottom: 0 solid; padding: 0; }
.news .card.mb-2 {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: top center;
	height: var(--news-card-height-mobile);
	width: 100%;
}
.news .card.mb-2::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--news-card-overlay-gradient);
	pointer-events: none;
}
.news .card.mb-2.zimmer-list {
	background-position: center center;
	height: var(--news-card-height-mobile);
}

@media screen and (min-width: 768px) {
	.news .card.mb-2,
	.news .card.mb-2.zimmer-list {
		height: var(--news-card-height-tablet);
	}
}

@media screen and (min-width: 992px) {
	.news .card.mb-2,
	.news .card.mb-2.zimmer-list {
		height: var(--news-card-height-desktop);
	}
}

@media screen and (min-width: 1900px) {
	.news .card.mb-2,
	.news .card.mb-2.zimmer-list {
		height: var(--news-card-height-large);
	}
}
.news .card.mb-2 .card-body .teaser-text .teaser-text-top .card-nights {   content: '';	width: 100%; padding-left: 25px;	background: transparent url("/fileadmin/user_upload/Hotel-Haidenberg/icon-nights.svg") no-repeat top left; 		align-self: center;	background-size: 20px; float:left;}
.news .card.mb-2 .card-body .teaser-text .teaser-text-top .card-calendar p {content: '';	width: 100%; padding-left: 20px;	background: transparent url("/fileadmin/user_upload/Hotel-Haidenberg/icon-calendar.svg") no-repeat top left; 	align-self: center;	background-size: 15px; float:left;}


.news .card.mb-2 .card-body {
	position: relative;
	z-index: 2;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}
.news .card.mb-2 .card-body .card-headline-top h3.card-title,
.news .card.mb-2 .card-body .card-headline-top h3.card-title span {
	color: var(--haidenberg-weiss);
	font-family: var(--offer-card-title-font-family);
	font-style: italic;
	font-weight: var(--font-weight-regular);
	text-align: left;
	text-transform: none;
	letter-spacing: var(--offer-card-title-letter-spacing);
}

.news .card.mb-2.angebote-list .card-body .card-headline-top h3.card-title,
.news .card.mb-2.angebote-list .card-body .card-headline-top h3.card-title span,
.news .card.mb-2.zimmer-list .card-body .card-headline-top h3.card-title,
.news .card.mb-2.zimmer-list .card-body .card-headline-top h3.card-title span {
	font-family: var(--font-family-marcellus);
	font-style: normal;
}

.news .card.mb-2 .card-body .card-headline-top h3.card-title {
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: var(--offer-card-title-size-mobile);
	line-height: var(--offer-card-title-line-height-mobile);
}

@media screen and (min-width: 992px) {
	.news .card.mb-2 .card-body .card-headline-top h3.card-title {
		font-size: var(--offer-card-title-size-desktop);
		line-height: var(--offer-card-title-line-height-desktop);
	}
}

@media screen and (min-width: 1900px) {
	.news .card.mb-2 .card-body .card-headline-top h3.card-title {
		font-size: var(--offer-card-title-size-large);
		line-height: var(--offer-card-title-line-height-large);
	}
}

.news .card.mb-2 .card-body .teaser-text {
	padding: 20px;
	background-color: transparent;
	color: var(--haidenberg-weiss);
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	vertical-align: bottom;
	justify-content: flex-end;
	width: 100%;
	box-shadow: none;
}
.news .card.mb-2 .card-body .teaser-text p,
.news .card.mb-2 .card-body .teaser-text span,
.news .card.mb-2 .card-body .teaser-text strong {
	color: var(--haidenberg-weiss);
}
.news .card.mb-2 .card-body .teaser-text .teaser-text-top {  padding-bottom: 10px;}
.news .card.mb-2 .card-body>*:first-child {	margin-top: 0;	position: absolute;	top: 40px;}
#main .news .card.mb-2 .card-body .teaser-text .teaser-text-top span.card-nights-price {font-size: 1.2em;}
#main .news .card.mb-2 .card-body .teaser-text .teaser-text-button p { text-align: center;}
#main .news .card.mb-2 .card-body .teaser-text .teaser-text-button button.btn-default,
#main .news .card.mb-2 .card-body .teaser-text .teaser-text-button button.btn-primary,
#main .news .card.mb-2 .card-body .teaser-text .teaser-text-button button.btn-secondary { padding: 8px 12px;  letter-spacing: 0;}


 .owl-stage-outer {	position: relative; /* wichtig, damit .owl-nav sich hieran orientiert */}

 .owl-nav {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between; /* verteilt prev/next links und rechts */
	pointer-events: none; /* verhindert, dass die Nav unsichtbar blockiert */
	transition: opacity 0.25s ease;
}

@media (hover: hover) {
	.owl-carousel .owl-nav {
		opacity: 0;
	}

	.owl-carousel:hover .owl-nav,
	.owl-carousel:focus-within .owl-nav {
		opacity: 1;
	}
}

 .owl-nav button.owl-prev,
 .owl-nav button.owl-next {
	pointer-events: auto; /* macht die Buttons wieder klickbar */
	background: rgba(0,0,0,0.5);
	color: #fff;
	border: none;
	padding: 0.5em 1em;
	cursor: pointer;
}

.owl-carousel {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
}

.owl-carousel .owl-stage-outer {
	width: 100%;
}

.owl-theme .owl-dots {
	width: 100%;
	margin-top: 10px;
	text-align: center;
}

.owl-theme .owl-dots .owl-dot span {
	background: var(--haidenberg-border);
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
	background: var(--haidenberg-gruen);
}

.owl-carousel .owl-item .carouselimg {
	position: relative;
	overflow: hidden;
	background-color: white;
	border-radius: 0;
}
.owl-carousel .owl-item .carouselimg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--carousel-image-overlay-gradient);
	pointer-events: none;
}
.owl-carousel .owl-item .carouselimg img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.9;
	border-radius: 0;
}


.owl-carousel .nav-btn{	height: 20px;	position: absolute;	width: 50px;	cursor: pointer;	bottom: 0 !important; background-image: url("/fileadmin/user_upload/Hotel-Haidenberg/arrow-prev.svg"); 
	background-repeat: no-repeat; background-size: 50px 20px}

.owl-carousel .nav-btn.next-slide{background-image: url("/fileadmin/user_upload/Hotel-Haidenberg/arrow-next.svg"); background-repeat: no-repeat; right: 0;}

@media screen and (min-width: 992px) {
	.owl-carousel .nav-btn {
		height: 18.67px;
		position: absolute;
		width: 60px;
		background-size: 60px 18.67px;
	}
}


.news .row { margin: 0; }
.frame-type-list .news picture { max-width: 100%; }
.frame-type-list .news a:hover {text-decoration: none;}
.frame-type-list .news img {width: 100%; height: auto;	opacity: 1; transition: all 0.4s ease;}
.frame-type-list .news img:hover {	opacity: 1;}

#wCookieConsent li	{   background: none; }
@media screen and (min-width: 992px) {
	#wCookieConsent p {   line-height: 24px;  }
}

/* Anpassungen für tablist*/
.nav-tabs .nav-item {	margin-bottom: -1px;	padding-left: 0;	background-image: none; }


.nav-tabs {	border-bottom: 1px solid #dee2e6}
.nav-tabs .nav-link {	border: 1px solid transparent; color: #58595b; text-transform: uppercase;}
.nav-tabs .nav-link:hover,.nav-tabs .nav-link:focus { color: var(--haidenberg-gruen);	border-color: #e9ecef #e9ecef #dee2e6}
.nav-tabs .nav-link.disabled {	color: #6c757d;	background-color: transparent;	border-color: transparent}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
	color: var(--haidenberg-weiss); 	background-color: var(--haidenberg-gruen); 	border-color: var(--haidenberg-gruen) var(--haidenberg-gruen) #fff;}

