#body {
	font-family: 'Source Sans Pro', 'Arial', sans-serif;
	font-weight: 400;
	font-size: 16px;
	padding: 0 !important;
	margin: 0;
	background-color: #EEE;
}


#body.nomotiv #content { margin-top: 180px; }

.maxwidth {
	width: 1200px;
	margin: 0 auto;
}

.maxwidthsmall {
	max-width: 900px;
	margin: 0 auto;
}

#body.responsivehelper .maxwidth {
	background-color: rgba(255,0,0,0.1);
}


#page * { box-sizing: border-box; }
#page .inlineeditors a { box-sizing: content-box; }

picture, img { display: block; }
figure { margin:0; padding: 0; }

#content {
	position: relative;
	z-index: 2;
}

.TraminoVorlage { 
	margin-top: 70px;
	margin-bottom: 70px;
	background-color: #FFF;
}

.TraminoVorlage.nobackground { background-color: transparent; }

.padding-lr {
	padding-left: 40px;
	padding-right: 40px;
}

.padding-tb {
	padding-top: 40px;
	padding-bottom: 40px;
}



.orange {
	border-left: 5px solid #FF7E00;
	padding-left: 20px;
}

.videoiframe {
	display: block;
	width: 100%;
	position: relative;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover; 
}

.videoiframe .play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #FFF;
	font-size: 100px;
	line-height: 1;
}

.videoiframe .play i {
	text-shadow: 0px 0px 10px rgba(0,0,0,0.2);

}

.videoiframe iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.left { float: left; }
.right { float: right; }
.clear { clear: left; }
.break { clear: both; }


#body .slick-arrow { background-color: #EEE !important; z-index: 50 !important; }
#body .slick-prev { left: -15px !important; }
#body .slick-next { right: -15px !important; }
#body .slick-disabled { display: none !important; }


.fancybox-title-float-wrap {
	width: 100% !important;
	position: static !important;
	bottom: auto !important;
	right: auto !important;
	margin-bottom: -35px !important;
	text-align: center !important;
}

.fancybox-title-float-wrap .child {
    display: inline-block !important;
    margin-right: 0 !important;
    padding: 2px 20px !important;
    background: transparent !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    text-shadow: none !important;
    color: #000 !important;
    font-weight: bold !important;
    line-height: 24px !important;
    white-space: nowrap !important;
    width:100% !important;
    text-align: center !important;
}

/* Preislisten aus altem Layout stylen */
table.pricing {
	margin: 0 auto;
}

.scrollable .infotext {
	text-align: center;
	max-width: 790px;
	margin: 0 auto;
	font-size: 12px;
}

.lazyload {
	opacity: 0;
}
.lazyloading {
    opacity: 1;
    transition: 600ms opacity;
    min-height: 60px;
    background-color: #DDD;
    animation-name: laoding;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 1500ms;
}
.lazyloaded {
    opacity: 1;
    transition: 10ms opacity;
}
.ratio-container {
    position: relative;
}
.ratio-container:after {
    content:'';
    display: block;
    height: 0;
    width: 100%;
  }



@keyframes laoding {
	0% { background-color: #DDD; }
	20% { background-color: #CCC; }
	40% { background-color: #BBB; }
	60% { background-color: #AAA; }
	80% { background-color: #BBB; }
	100% { background-color: #CCC; }
}


#badge {
	display: block;
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 100;
	width: 20vw;
	max-width: 150px;
}

.badge {

    --size: 24vw;

    position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 100;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
    color: #FFF;
    text-decoration: none;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    font-size: 2.6vw;
    box-shadow: 0rem 0rem 1rem rgba(0,0,0,0.7);
	-webkit-user-select: none;
	-ms-user-select: none;
    user-select: none;
}

.badge .badge-inner {
    text-align: center;
}

.badge .line1 {
    font-size: 0.85em;
    line-height: 1;
    opacity: 0.8;
}
.badge .line2 {
    font-size: 1.15em;
    line-height: 1;
    margin-top: 0.1em
}

.badge .line3 {
    display: flex;
    justify-content: center;
    align-items: baseline;
    font-size: 2.8em;
    line-height: 1;
    margin-top: 0.1em
}


.badge .line3 .procent {
    font-size: 0.4em;
    margin-left: 0.2em;
    transform: translateY(-0.2em);
}

#badge img { width: 100%; height: auto; filter: drop-shadow( 0rem 0rem 1rem rgba(0,0,0,0.7)); }

@media (min-width: 567px) {
	#badge { bottom: 1.8rem; right: 1.8rem; }
	.badge { 
		--size: 20vw;
		font-size: 2.0vw;
		bottom: 1.8rem; right: 1.8rem;
	}

}

@media (min-width: 768px) {
	#badge { bottom: 2.5rem; right: 2.5rem; }
	.badge { 
		--size: 16vw;
		font-size: 1.8vw;
		bottom: 2.5rem; right: 2.5rem;
	}
}

@media (min-width: 1024px) {
	#badge { bottom: 3rem; right: 3rem; }
	.badge { 
		--size: 150px;
		font-size: 1rem;
		bottom: 3rem; right: 3rem;
	}
}




.T4532 {
	padding: 1.3rem 0;
}

.T4532 .font_special1 { font-size: 1.8rem; }

.T2886 #cart { padding: 20px 0; }
					
					

#TraminoForm.newcss .Widgets { margin-bottom: .5rem; }

#TraminoForm.newcss .Widgets > .mandatory { display: flex; justify-content: flex-end; }
#TraminoForm.newcss .groups {
	display: flex;
	flex-wrap: wrap;
}

#TraminoForm.newcss .groups .group {
	width:  100%;
}


#TraminoForm.newcss .groups :is(.break,.clear) {
	width: 100%;
}

#TraminoForm.newcss .element {
	margin: 0 0 1.3rem 0;
}

#TraminoForm.newcss .label .help {
	font-size: 0.9rem;
  	margin-bottom: 0.7rem;
}

#TraminoForm.newcss .element.cond_hide {
	display: none;
}
#TraminoForm.newcss .element .label h4 {
	margin: 0 0 0.3rem 0;
}

#TraminoForm.newcss .footer {
	margin:  0 0 0.5rem 0;
}

#TraminoForm.newcss .footer .form_buttons {
	display: flex;
	justify-content:  flex-end;
}

#TraminoForm.newcss .element :is(input[type="text"],input[type="email"],input[type="number"],input[type="password"],input[type="date"]) {
	width: 100% !important;
	box-sizing: border-box;
	font-size: 1rem;
	border: 1px solid #cacaca;
	background-color: #fff;
	padding: .5rem;
}

#TraminoForm.newcss .element select { width: 100%; }
#TraminoForm.newcss .element textarea { width: 100%; box-sizing: border-box; font-family: Arial; border: 1px solid #cacaca; padding: .3rem; }


#TraminoForm.newcss .element :is(input[type="text"],input[type="email"],input[type="number"],input[type="password"],input[type="date"]):focus, #TraminoForm.newcss .element textarea:focus {
	outline: 0;
	border: 1px solid #000;
	box-shadow: 0 0 5px #cacaca;
}

#TraminoForm.newcss .AdresseWidget .Zeile {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.2rem;
}

#TraminoForm.newcss .AdresseWidget :is(.clear,.break) { width: 0; display: none; }

#TraminoForm.newcss .AdresseWidget .Zeile .Feld { flex-grow: 0; flex-shrink: 0; }
#TraminoForm.newcss .AdresseWidget .Zeile .Feld .Label { font-size: 0.85rem; }


#TraminoForm.newcss .AdresseWidget .adresse_vorname { width: calc(45% - 0.5rem) }
#TraminoForm.newcss .AdresseWidget .adresse_nachname { width: 55%; }

#TraminoForm.newcss .AdresseWidget .adresse_firma { width: calc(50% - 0.25rem); }
#TraminoForm.newcss .AdresseWidget .adresse_abteilung { width: calc(50% - 0.25rem); }

#TraminoForm.newcss .AdresseWidget .adresse_strasse { width: 80%; }
#TraminoForm.newcss .AdresseWidget .adresse_hausnr { width: calc(20% - 0.5rem); }

#TraminoForm.newcss .AdresseWidget .adresse_plz { width: 20%; }
#TraminoForm.newcss .AdresseWidget .adresse_ort { width: calc(50% - 0.5rem); }
#TraminoForm.newcss .AdresseWidget .adresse_ortsteil { width: calc(30% - 0.5rem); }

#TraminoForm.newcss .AdresseWidget.noortsteil .adresse_ort { width: calc(80% - 0.5rem) !important; }


#TraminoForm.newcss .AdresseWidget .adresse_telefon { width: 33%; }
#TraminoForm.newcss .AdresseWidget .adresse_fax { width: calc(33% - 0.5rem); }
#TraminoForm.newcss .AdresseWidget .adresse_mobil { width: calc(33% - 0.5rem); }

#TraminoForm.newcss .AdresseWidget.no_fax .adresse_telefon { width: 50% !important; }
#TraminoForm.newcss .AdresseWidget.no_fax .adresse_mobil { width:  calc(50% - 0.5rem) !important; }
		
#TraminoForm.newcss .AdresseWidget.no_fax.no_mobil .adresse_telefon { width: 100% !important; }

#TraminoForm.newcss .AdresseWidget.telonly .adresse_telefon { width: 100%; }

#TraminoForm.newcss .AdresseWidget .adresse_email { width: 100%; }
#TraminoForm.newcss .AdresseWidget .adresse_land { width: 100%; }


/* Test mit Grid die Radiofelder schöner darzustellen */
#TraminoForm.newcss .RadioWidget .Element {
	display: flex;
	/*display: grid; 
	gap: 0 0.5rem; 
	grid-template-areas: 
	"checkbox headline ."
	"checkbox info ."
	". . ."; */
	margin-bottom:  1rem;
	width:  auto !important;
}
#TraminoForm.newcss .RadioWidget .Element input { grid-area: checkbox; display: flex; align-self: flex-start; }
#TraminoForm.newcss .RadioWidget .Element span { grid-area: headline; }
#TraminoForm.newcss .RadioWidget .Element .info { grid-area: info; font-size: 0.8rem; }


#TraminoForm.newcss .Widget.Zeitraum .dates { display: flex; flex-wrap: wrap; margin-top: 0.5rem; }
#TraminoForm.newcss .Widget.Zeitraum .dates .zeitraum { display: flex; flex-wrap: wrap; margin-bottom: 0.3rem; margin-right: 0.3rem; align-items: center; }
#TraminoForm.newcss .Widget.Zeitraum .dates .zeitraum .Widget { width: 100px; }
#TraminoForm.newcss .Widget.Zeitraum .dates .zeitraum label {  display: inline-block;  width: 80px;}


@media (min-width: 768px) {
	#TraminoForm.newcss .groups {
		justify-content: space-between;
	}
	#TraminoForm.newcss .groups .group {
		width:  48%;
		padding: 0 2% 1% 0;
		padding: 0 2% 1% 0;
	}

	#TraminoForm.newcss .groups .group + #TraminoForm.newcss .groups > div.clear {
		width:  100%;
	}
}


.TraminoForm.newcss .Widgets { margin-bottom: .5rem; }

.TraminoForm.newcss .Widgets > .mandatory { display: flex; justify-content: flex-end; }
.TraminoForm.newcss .groups {
	display: flex;
	flex-wrap: wrap;
}

.TraminoForm.newcss .groups .group {
	width:  100%;
}


.TraminoForm.newcss .groups :is(.break,.clear) {
	width: 100%;
}

.TraminoForm.newcss .element {
	margin: 0 0 1.3rem 0;
}
.TraminoForm.newcss .element.cond_hide {
	display: none;
}
.TraminoForm.newcss .element .label h4 {
	margin: 0 0 0.3rem 0;
}

.TraminoForm.newcss .footer {
	margin:  0 0 0.5rem 0;
}

.TraminoForm.newcss .footer .form_buttons {
	display: flex;
	justify-content:  flex-end;
}

.TraminoForm.newcss .element :is(input[type="text"],input[type="email"],input[type="number"],input[type="password"],input[type="date"]) {
	width: 100% !important;
	box-sizing: border-box;
	font-size: 1rem;
	border: 1px solid #cacaca;
	background-color: #fff;
	padding: .5rem;
}

.TraminoForm.newcss .element select { width: 100%; }
.TraminoForm.newcss .element textarea { width: 100%; box-sizing: border-box; font-family: Arial; border: 1px solid #cacaca; padding: .3rem; }


.TraminoForm.newcss .element :is(input[type="text"],input[type="email"],input[type="number"],input[type="password"],input[type="date"]):focus, .TraminoForm.newcss .element textarea:focus {
	outline: 0;
	border: 1px solid #000;
	box-shadow: 0 0 5px #cacaca;
}

.TraminoForm.newcss .AdresseWidget .Zeile {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.2rem;
}

.TraminoForm.newcss .AdresseWidget :is(.clear,.break) { width: 0; display: none; }

.TraminoForm.newcss .AdresseWidget .Zeile .Feld { flex-grow: 0; flex-shrink: 0; margin-bottom: 4px; }
.TraminoForm.newcss .AdresseWidget .Zeile .Feld .Label { font-size: 0.85rem; }

.TraminoForm.newcss .AdresseWidget .adresse_vorname { width: calc(45% - 0.5rem) }
.TraminoForm.newcss .AdresseWidget .adresse_nachname { width: 55%; }

.TraminoForm.newcss .AdresseWidget .adresse_firma { width: calc(50% - 0.25rem); }
.TraminoForm.newcss .AdresseWidget .adresse_abteilung { width: calc(50% - 0.25rem); }

.TraminoForm.newcss .AdresseWidget .adresse_strasse { width: 80%; }
.TraminoForm.newcss .AdresseWidget .adresse_hausnr { width: calc(20% - 0.5rem); }

.TraminoForm.newcss .AdresseWidget .adresse_plz { width: 20%; }
.TraminoForm.newcss .AdresseWidget .adresse_ort { width: calc(50% - 0.5rem); }
.TraminoForm.newcss .AdresseWidget .adresse_ortsteil { width: calc(30% - 0.5rem); }

.TraminoForm.newcss .AdresseWidget.noortsteil .adresse_ort { width: calc(80% - 0.5rem) !important; }


.TraminoForm.newcss .AdresseWidget .adresse_telefon { width: 33%; }
.TraminoForm.newcss .AdresseWidget .adresse_fax { width: calc(33% - 0.5rem); }
.TraminoForm.newcss .AdresseWidget .adresse_mobil { width: calc(33% - 0.5rem); }

.TraminoForm.newcss .AdresseWidget.no_fax .adresse_telefon { width: 50% !important; }
.TraminoForm.newcss .AdresseWidget.no_fax .adresse_mobil { width:  calc(50% - 0.5rem) !important; }

.TraminoForm.newcss .AdresseWidget.telonly .adresse_telefon { width: 100%; }

.TraminoForm.newcss .AdresseWidget .adresse_email { width: 100%; }
.TraminoForm.newcss .AdresseWidget .adresse_land { width: 100%; }

.Widget.StaticStarsWidget {
	height:16px;
	width:80px;
	background: transparent url(/tramino/gfx/rating/ui.stars.gif) 0 -32px;
}

.Widget.StaticStarsWidget .StativStarsAktiv{
	height:16px;
	background: transparent url(/tramino/gfx/rating/ui.stars.gif) 0 -48px;
}

.Widget.StaticStarsWidgetSmall {
	height:10px;
	width:50px;
	background: transparent url(/tramino/gfx/rating/ui.stars_s.gif) 0 -10px;
	padding:0px !important;
	margin:0px !important;
}

.Widget.StaticStarsWidgetSmall .StativStarsAktiv{
	height:10px;
	background: transparent url(/tramino/gfx/rating/ui.stars_s.gif) 0 -20px;
}

.TraminoPaginator {
	margin: 0px;
	line-height: 1.6em;
}


.TraminoPaginator span.anzahl {
	padding-right: 30px;
	font-size: 11px;
}

.TraminoPaginator span a {
	padding: 2px 5px 2px 5px !important;
	text-decoration: none;
	border: 0px !important;
	color: #666;
}

.TraminoPaginator span.button a {
	display:inline-block;
	font-size:13px;
	background-color: #ccc;
	padding: 2px 10px 2px 10px !important;
	margin-right:4px;
}

.TraminoPaginator span.button.active a {
	background-color: #333;
	color:#fff;

}

.TraminoPaginator span a:hover {
	background-color: #000 !important;
	color: #fff !important;
}

.TraminoPaginator span.aktiv a {
	font-size: 1.4em;
	font-weight: bold;
	color: #000;
}

#lightroom .TraminoPaginator {
	color: #666;
}

#lightroom .TraminoPaginator span a {
	color: #666;
}

#lightroom .TraminoPaginator span.aktiv a {
	color: #fff;
}

#lightroom .TraminoPaginator span a:hover {
	background-color: #fff !important;
	color: #000 !important;
}

.TraminoForm.newcss .SchulnotenWidget .break { display: none; width: 0px; }
.TraminoForm.newcss .SchulnotenWidget .Bewertung { display: flex; }
.TraminoForm.newcss .SchulnotenWidget .Bewertung.Absatz { margin-top: 1rem; }
.TraminoForm.newcss .SchulnotenWidget .Bewertung { margin-bottom: 0.1rem; }

.TraminoForm.newcss .SchulnotenWidget .Bewertung.Absatz .Name { font-weight: bold; hyphens: auto; }

.TraminoForm.newcss .SchulnotenWidget .Bewertung .Noten { display: flex; margin-right: 1rem; }
.TraminoForm.newcss .SchulnotenWidget .Bewertung .Noten span.Note { display: block; width: 20px; text-align: center; }

.TraminoForm.newcss .formtype_Divider .divider { font-weight: bold;font-size: 1.3rem; }

@media (max-width: 567px) {
	.TraminoForm.newcss .SchulnotenWidget .Bewertung .Noten span.Note { width: 15px; }
	.TraminoForm.newcss .SchulnotenWidget .Bewertung { border-top: 1px solid #CCC; padding-top: 0.5rem; margin-top: 0.5rem; }
}





@media (min-width: 768px) {
	.TraminoForm.newcss .groups {
		justify-content: space-between;
	}
	.TraminoForm.newcss .groups .group {
		width:  48%;
		padding: 0 2% 1% 0;
	}

	.TraminoForm.newcss .groups .group + .TraminoForm.newcss .groups > div.clear {
		width:  100%;
	}
}
/*
* Hotel Mohren 
*/
#body.Mandant_105 .color { color: #A88039; }
#body.Mandant_105 .color_headlines h1, #body.Mandant_105 .color_headlines h2, #body.Mandant_105 .color_headlines h3 { color: #A88039; }
#body.Mandant_105 .bgcolor { background-color: #A88039; }
#body.Mandant_105 .bgcolor-light { background-color: rgba(167,127,57,0.2); }
#body.Mandant_105 .bordercolor { border-color: #A88039; }
#body.Mandant_105 #cart #button_finish { border-color: #FF7E00; background-color: #FF7E00; }
#body.Mandant_105 .T2886 table.cart td.total { color: #111 !important; }

/*
* Hotel Oberstdorf 
*/
#body.Mandant_106 { background-color: #ede9e4; }
#body.Mandant_106 .color { color: #88785E;  }
#body.Mandant_106 .color_headlines h1, #body.Mandant_106 .color_headlines h2, #body.Mandant_106 .color_headlines h3 { color: #88785E; }
#body.Mandant_106 .bgcolor { background-color: #88785E;  }
#body.Mandant_106 .bgcolor-light { background-color: rgba(136,120,94,0.2); }
#body.Mandant_106 .bordercolor { border-color: #88785E;  }
#body.Mandant_106 #cart #button_finish { border-color: #FF7E00; background-color: #FF7E00; }
#body.Mandant_106 .T2886 table.cart td.total { color: #111 !important; }
/*
* Oberstdorf Hostel 
*/
#body.Mandant_14495 .color { color: #00688D; }
#body.Mandant_14495 .color_headlines h1, #body.Mandant_14495 .color_headlines h2, #body.Mandant_14495 .color_headlines h3 { color: #00688D; }
#body.Mandant_14495 .bgcolor { background-color: #00688D; }
#body.Mandant_14495 .bgcolor-light { background-color: rgba(0,103,140,0.2); }
#body.Mandant_14495 .bordercolor { border-color: #00688D; }
#body.Mandant_14495 #cart #button_finish { border-color: #FF7E00; background-color: #FF7E00; }
#body.Mandant_14495 .T2886 table.cart td.total { color: #111 !important; }
/*
* Wannenkopfhütte
*/
#body.Mandant_111 .color { color: #925A00; }
#body.Mandant_111 .color_headlines h1, #body.Mandant_111 .color_headlines h2, #body.Mandant_111 .color_headlines h3 { color: #925A00; }
#body.Mandant_111 .bgcolor { background-color: #925A00; }
#body.Mandant_111 .bgcolor-light { background-color: rgba(146,90,0,0.2); }
#body.Mandant_111 .bordercolor { border-color: #925A00; }
#body.Mandant_111 #cart #button_finish { border-color: #FF7E00; background-color: #FF7E00; }
#body.Mandant_111 .T2886 table.cart td.total { color: #111 !important; }
/*
* Alpe Oberstdorf
*/
#body.Mandant_14479 .color { color: #88785E; }
#body.Mandant_14479 .color_headlines h1, #body.Mandant_14479 .color_headlines h2, #body.Mandant_14479 .color_headlines h3 { color: #88785E; }
#body.Mandant_14479 .bgcolor { background-color: #88785E; }
#body.Mandant_14479 .bgcolor-light { background-color: rgba(136,120,94,0.2); }
#body.Mandant_14479 .bordercolor { border-color: #88785E; }
#body.Mandant_14479 #cart #button_finish { border-color: #FF7E00; background-color: #FF7E00; }
#body.Mandant_14479 .T2886 table.cart td.total { color: #111 !important; }


/*
* Hörnerhaus
*/
#body.Mandant_38853 .color { color: #925A00; }
#body.Mandant_38853 .color_headlines h1, #body.Mandant_111 .color_headlines h2, #body.Mandant_111 .color_headlines h3 { color: #925A00; }
#body.Mandant_38853 .bgcolor { background-color: #925A00; }
#body.Mandant_38853 .bgcolor-light { background-color: rgba(146,90,0,0.2); }
#body.Mandant_38853 .bordercolor { border-color: #925A00; }
#body.Mandant_38853 #cart #button_finish { border-color: #FF7E00; background-color: #FF7E00; }
#body.Mandant_38853 .T2886 table.cart td.total { color: #111 !important; }



/*
* Booking 
*/
#body .booking.color { color: #FF7E00; }
#body .booking.bgcolor { background-color: #FF7E00; }
#body .booking.bgcolor-light { background-color: rgba(255,126,0,0.2); }
#body .booking.bordercolor { border-color: #FF7E00; }

#body .font_special1 { font-family: 'Arial', serif; font-weight: 400; }
#body .special_font_headlines h1, #body .special_font_headlines h2, #body .special_font_headlines h3 { font-family: 'Arial', serif; font-weight: 400; }
#body .font_special2 { font-family: Arial, sans-serif; font-weight: 400; }
#body .font_special2_bold { font-family: Arial, sans-serif; font-weight: 600; }

/* Hotel Mohren */
#body.Mandant_105 :is(.font_special1,.specialfont) { font-family: 'Cinzel',Arial, serif; font-weight: 400; }
#body.Mandant_105 .special_font_headlines h1, #body.Mandant_105 .special_font_headlines h2, #body.Mandant_105 .special_font_headlines h3 { font-family: 'Cinzel',Arial, serif; font-weight: 400; }
#body.Mandant_105 .font_special2 { font-family: 'Montserrat', Arial, sans-serif; font-weight: 400; }
#body.Mandant_105 .font_special2_bold { font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; }

/* Hotel Oberstdorf */
#body.Mandant_106 :is(.font_special1,.specialfont) { font-family: 'Lobster', Arial; font-weight: 400; }
#body.Mandant_106 .special_font_headlines h1, #body.Mandant_106 .special_font_headlines h2, #body.Mandant_106 .special_font_headlines h3 { font-family: 'Lobster', Arial; font-weight: 400; }
#body.Mandant_106 .font_special2 { font-family: 'Montserrat', Arial, sans-serif; font-weight: 400; }
#body.Mandant_106 .font_special2_bold { font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; }


/* Oberstdorf Hostel */
#body.Mandant_14495 :is(.font_special1,.specialfont) { font-family: 'Rock Salt', Arial, cursive; font-weight: 400; line-height: 1.3; }
#body.Mandant_14495.newfont1 :is(.font_special1,.specialfont) { font-family: 'Gochi Hand', cursive; font-weight: 400; line-height: 1.3; }
#body.Mandant_14495.newfont2 :is(.font_special1,.specialfont) { font-family: 'Sedgwick Ave', cursive; font-weight: 400; line-height: 1.3; }
#body.Mandant_14495 .special_font_headlines h1, #body.Mandant_14495 .special_font_headlines h2, #body.Mandant_14495 .special_font_headlines h3 { font-family: 'Rock Salt', Arial, cursive; font-weight: 400; line-height: 1.3; }
#body.Mandant_14495 .font_special2 { font-family: 'Montserrat', Arial, sans-serif; font-weight: 400; }
#body.Mandant_14495 .font_special2_bold { font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; }

#body.Mandant_14495 .font_special1.headline35 { line-height: 1.45; }



/* Wannenkopfhütte */
#body.Mandant_111 :is(.font_special1,.specialfont) { font-family: 'Mogra', Arial, cursive; font-weight: 400; }
#body.Mandant_111 .special_font_headlines h1, #body.Mandant_111 .special_font_headlines h2, #body.Mandant_111 .special_font_headlines h3 { font-family: 'Mogra', Arial, cursive; font-weight: 400; }
#body.Mandant_111 .font_special2 { font-family: 'Montserrat', Arial, sans-serif; font-weight: 400; }
#body.Mandant_111 .font_special2_bold { font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; }

/* Alpe Oberstdorf */
#body.Mandant_14479 :is(.font_special1,.specialfont) { font-family: 'Fugaz One', Arial, cursive; font-weight: 400; }
#body.Mandant_14479 .special_font_headlines h1, #body.Mandant_14479 .special_font_headlines h2, #body.Mandant_14479 .special_font_headlines h3 { font-family: 'Fugaz One', Arial, cursive; font-weight: 400; }
#body.Mandant_14479 .font_special2 { font-family: 'Montserrat', Arial, sans-serif; font-weight: 400; }
#body.Mandant_14479 .font_special2_bold { font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; }


/* Hörnerhaus */
#body.Mandant_38853 :is(.font_special1,.specialfont) { font-family: 'Mogra', Arial, cursive; font-weight: 400; }
#body.Mandant_38853 .special_font_headlines h1, #body.Mandant_111 .special_font_headlines h2, #body.Mandant_111 .special_font_headlines h3 { font-family: 'Mogra', Arial, cursive; font-weight: 400; }
#body.Mandant_38853 .font_special2 { font-family: 'Montserrat', Arial, sans-serif; font-weight: 400; }
#body.Mandant_38853 .font_special2_bold { font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; }





.tofilter { min-height: 700px; }
.tofilter .filterbar {
	width: 240px;
	background-color: #EEEEEE;
	position: absolute;
	top: 30px;
	left: 0;
	z-index: 2;
	padding: 15px 0;
}

.tofilter .filterbar .inner { position: relative; }
.tofilter .filterbar .mobileclose { display: none; position: absolute; top: -5px; right: 10px; cursor: pointer; }

.tofilter .filterbar .box {
	margin: 0 0 20px 30px;
}

.tofilter .filterbar .box .headline {
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 15px 0;
}

.tofilter .filterbar .box ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.tofilter .filterbar .box ul li {
	margin: 0;
	padding: 0;
}

.tofilter .filterbar .box ul li span.name {
	position: relative;
	font-size: 16px;
	line-height: 1;
	padding: 0 0 0 25px;
	cursor: pointer;
}

.tofilter .filterbar .box ul li span.name:before {
	content: '';
	display: block;
	position: absolute;
	top: 5px;
	left: 0;
	background: #fff;
	vertical-align: middle;
	width: 12px;
	height: 12px;
	text-align: center;
}

.tofilter .filterbar .box ul li span.info {
	display: block;
	font-size: 12px;
	margin: 0 8px 0 25px;
}

.tofilter .filterbar .box ul li span.active:before {
	background-color: #00698C;
	background-image: url(https://tramino.s3.amazonaws.com/s/explorer-hotels/767029/checkbox.png);
	background-position: top left;
	background-repeat: no-repeat;
}


.tofilter .filterbar .box[data-filtertype=slider] .sliderwrapper {
	position: relative;
	width: 180px;
}

.tofilter .filterbar .box[data-filtertype=slider] .sliderwrapper .minvalue {
	position: absolute;
	top: 0;
	left: 0;
}

.tofilter .filterbar .box[data-filtertype=slider] .sliderwrapper .maxvalue {
	position: absolute;
	top: 0;
	right: 0;
}

.tofilter .filterbar .box[data-filtertype=slider] .sliderwrapper .sliderrangewrapper {
	padding-top: 30px;
}
.tofilter .filterbar .box[data-filtertype=slider] .sliderwrapper .sliderrange {
	width: 100%;
}


.tofilter .mobilefilter { 
	cursor: pointer;
	display: none;
	margin: 0 0 20px 20px;
	border: 1px solid #555;
	color: #555;
	padding: 4px 12px;
	font-size: 14px;
}
.tofilter .mobilefilter i { font-size: 16px; } 

.tofilter .mobilefilter.open { background-color: #555; color: #FFF; }

.tofilter .nomatch { display: none; }


@media all and (min-width: 1024px) and (max-width: 1279px) {
	.tofilter .filterbar { width: 220px; }
	.tofilter .filterbar .box .headline { font-size: 18px; }
	.tofilter .filterbar .box ul li span { font-size: 15px; }
}

@media all and (min-width: 768px) and (max-width:1023px) {
	.tofilter .filterbar { width: 200px; top: 0px; padding-top: 0; }
	.tofilter .filterbar .box .headline { font-size: 17px; }
	.tofilter .filterbar .box ul li { margin: 0 0 5px 0; }
	.tofilter .filterbar .box ul li span { font-size: 14px; padding-top: 3px; }

	.tofilter .filterbar .box[data-filtertype="slider"] .sliderwrapper { width: 160px; }
	.tofilter .filterbar .box[data-filtertype="slider"] .sliderwrapper .sliderrange { width: 95%; }
}

@media all and (min-width: 568px) and (max-width: 767px) {
	.tofilter .mobilefilter { display: block; }
	.tofilter .filterbar {
		width: 200px;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		transition: transform 300ms linear;
	}
	.tofilter .filterbar.open {
		-webkit-transform: none;
		transform: none;
		transition: transform 300ms linear;
	}
	.tofilter .filterbar .mobileclose { display: block; }

	.tofilter .filterbar .box .headline { font-size: 17px; }
	.tofilter .filterbar .box ul li { margin: 0 0 5px 0; }
	.tofilter .filterbar .box ul li span { font-size: 14px; padding-top: 3px; }

	.tofilter .filterbar .box[data-filtertype="slider"] .sliderwrapper { width: 160px; }
	.tofilter .filterbar .box[data-filtertype="slider"] .sliderwrapper .sliderrange { width: 95%; }
}

@media all and (max-width: 567px) {
	.tofilter .mobilefilter { display: block; }
	.tofilter .filterbar {
		width: 200px;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		transition: transform 300ms linear;
	}
	.tofilter .filterbar.open {
		-webkit-transform: none;
		transform: none;
		transition: transform 300ms linear;
	}
	.tofilter .filterbar .mobileclose { display: block; }

	.tofilter .filterbar .box .headline { font-size: 16px; }
	.tofilter .filterbar .box ul li { margin: 0 0 5px 0; }
	.tofilter .filterbar .box ul li span { font-size: 14px; padding-top: 3px; }
}

.font-ssp-sbold { font-weight: 600; }
.font-ssp-bold { font-weight: 700; }


.textstyle { font-size: 20px; line-height: 1.3; }
.textstyle19 { font-size: 19px; line-height: 1.3; }
.textstyle17 { font-size: 17px; line-height: 1.4; }
.textstyle16 { font-size: 16px; line-height: 1.3; }

.headline27 { font-size: 27px; line-height: 1.1; }
.headline30 { font-size: 30px; line-height: 1.1; }
.headline35 { font-size: 35px; line-height: 1.1; }
.headline40 { font-size: 40px; line-height: 1.1; }
.headline50 { font-size: 50px; line-height: 1.1; }


.headlinemargin { margin: 0 0 0.8em 0; }

.textile a, a.linkcolor, .linkcolor a { color: #000; text-decoration: underline; transition: color 100ms; }
.textile a:hover, a.linkcolor:hover, .linkcolor a:hover { color: #2852AD; transition: color 100ms; }


.textile table {
	border-spacing: 0px; border-width: 0px;
	margin: 0 0 20px 0;
}
.textile table td {
	border-bottom: 1px solid #CCC;
	padding: 6px 10px;
	vertical-align: top;
}

.textile table tr:first-child td { border-top: 1px solid #CCC; }


ul.list-nostyling {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul.list-nostyling > li { margin: 0; padding: 0; }

ul.list-floated:after { display: block; content: ""; clear: left; }
ul.list-floated > li { float: left; }

.textile ul { padding-left: 20px }

.btn {
	display: inline-block;
	text-decoration: none;
	font-size: 16px;
	border: 2px solid #555555;
	color: #555555;
	padding: 5px 20px;
	cursor: pointer;
}

.btn-filled {
	color: #FFF;
	background-color: #555555;
}

.btn.booking {
	color: #FFF;
	background-color: #FF7E00;
	border-color: #FF7E00;
}




@media all and (min-width: 1024px) and (max-width: 1279px) {
	.textstyle { font-size: 18px; }
	.textstyle19 { font-size: 17px; }
	.textstyle17 { font-size: 16px; }
	.textstyle16 { font-size: 15px; }

	.headline27 { font-size: 25px; }
	.headline30 { font-size: 28px; }
	.headline35 { font-size: 32px; }
	.headline40 { font-size: 35px; }
	.headline50 { font-size: 45px; }

	.textile ul { padding-left: 18px }

	.btn {
		font-size: 15px;
		padding: 4px 18px;
	}
}

@media all and (min-width: 768px) and (max-width:1023px) {
	.textstyle { font-size: 16px; }
	.textstyle19 { font-size: 15px; }
	.textstyle17 { font-size: 15px; }
	.textstyle16 { font-size: 14px; }

	.headline27 { font-size: 21px; }
	.headline30 { font-size: 24px; }
	.headline35 { font-size: 28px; }
	.headline40 { font-size: 30px; }
	.headline50 { font-size: 40px; }

	.textile ul { padding-left: 15px }

	.btn {
		font-size: 14px;
		padding: 3px 16px;
	}
	
	
}

@media all and (min-width: 568px) and (max-width: 767px) {
	.textstyle { font-size: 14px; }
	.textstyle19 { font-size: 14px; }
	.textstyle17 { font-size: 14px; }
	.textstyle16 { font-size: 13px; }

	.headline27 { font-size: 16px; }
	.headline30 { font-size: 18px; }
	.headline35 { font-size: 24px; }
	.headline40 { font-size: 25px; }
	.headline50 { font-size: 35px; }

	.textile ul { padding-left: 12px }

	.btn {
		font-size: 14px;
		padding: 3px 16px;
	}

	
}

@media all and (max-width: 567px) {
	.textstyle { font-size: 13px; }
	.textstyle19 { font-size: 13px; }
	.textstyle17 { font-size: 13px; }
	.textstyle16 { font-size: 12px; }
	

	.headline27 { font-size: 14px; }
	.headline30 { font-size: 16px; }
	.headline35 { font-size: 18px; }
	.headline40 { font-size: 20px; }
	.headline50 { font-size: 30px; }

	.textile ul { padding-left: 10px }

	.btn {
		font-size: 13px;
		padding: 2px 14px;
	}

}

.offerbox { width: 540px; height: 80px; margin-top: 25px; }

.offerbox:after { display: block; content: ""; clear: left; }

.offerbox .offerwrapper { float: left; width: 440px; }

.offerbox .offerwrapper:after { display: block; content: ""; clear: both; }
.offerbox .item-offer { padding: 0 0 0 15px; float: left; width: 335px; }
.offerbox .item-preis { padding: 0 15px 0 0; float: right; }
.offerbox .item-left { padding: 0 0 0 15px; float: left; }

.offerbox .item .label {
	font-size: 12px;
	line-height: 1;
	color: #999999;
	text-transform: uppercase;
	padding: 10px 0 6px 0;
}

.offerbox .item .text { font-size: 17px; line-height: 1.2; }
.offerbox .item .text p {
	margin: 0;
}

.offerbox .booking {
	width: 100px;
	height: 100%;
	float: left;
	border-left: 1px solid #FFF;
} 


.offerbox .booking a {
	color: #FFF;
	text-decoration: none;
	display: block;
	width: 100%;
	height: 100%;
	text-transform: uppercase;
	font-size: 15px;
	text-align: center;
	padding: 50px 0 0 0;
}


.offerbox .booking.split a {
	height: 50%;
	padding: 10px 0 0 0;
}

.offerbox .booking.split a.first { height: calc( 50% - 1px ); border-bottom: 1px solid #FFF; }


@media all and (min-width: 1024px) and (max-width: 1279px) {
	.offerbox { width: 440px; height: 70px; margin-top: 20px; }


	.offerbox .offerwrapper { width: 340px; }

	.offerbox .item-offer { padding: 0 0 0 13px; width: 248px; }
	.offerbox .item-preis { padding: 0 13px 0 0; }

	.offerbox .item-left { padding: 0 0 0 13px;  }



	.offerbox .item .label { padding: 9px 0 5px 0; }

	.offerbox .item .text { font-size: 15px; }


	.offerbox .booking a {
		font-size: 14px;
		padding: 45px 0 0 0;
	}

	.offerbox .booking.split a { padding: 8px 0 0 0; }
}

@media all and (min-width: 768px) and (max-width:1023px) {
	.offerbox { width: 365px; height: 65px; margin-top: 15px; }


	.offerbox .offerwrapper { width: 280px; display: flex; }

	.offerbox .item-offer { padding: 0 0 0 13px; float: none; flex: 1; width: auto; }
	.offerbox .item-preis { padding: 0 13px 0 0; float: none; }
	.offerbox .item-left { padding: 0 0 0 13px; float: none; flex: 1; }

	.offerbox .item .label { padding: 8px 0 4px 0; }

	.offerbox .item .text { font-size: 13px; }


	.offerbox .booking { width: 85px; }
	.offerbox .booking a {
		font-size: 13px;
		padding: 40px 0 0 0;
	}

	.offerbox .booking.split a { padding: 7px 0 0 0; }
}

@media all and (min-width: 568px) and (max-width: 767px) {
	.offerbox { width: auto; height: 60px; margin-top: 10px; display: flex; }
	

	.offerbox .offerwrapper { width: auto; flex: 1; display: flex; }
	.offerbox .item-offer { padding: 0 0 0 12px; float: none; flex: 1; width: auto;  }
	.offerbox .item-preis { padding: 0 12px 0 0; float: none;  }
	.offerbox .item-left { padding: 0 0 0 12px; float: none; flex: 1; }


	.offerbox .item .label { padding: 7px 0 3px 0; font-size: 11px; }

	.offerbox .item .text { font-size: 12px; }


	.offerbox .booking { width: 80px; }
	
	.offerbox .booking a {
		font-size: 12px;
		padding: 30px 0 0 0;
	}

	.offerbox.tabletbreak { display: block; }
	.offerbox.tabletbreak .offerwrapper { float: none; flex: 0; }
	.offerbox.tabletbreak .booking { float: none; width: 100%; height: 25px; border-left-width: 0px; border-top: 1px solid #FFF; }
	.offerbox.tabletbreak .booking a { padding-top: 5px; }

	.offerbox .booking.split a { float: left; width: 50%; height: 100%; padding: 5px 0 0 0; }
	.offerbox .booking.split a.first { height: 100%; border-bottom-width: 0px; border-right: 1px solid #FFF; }

}

@media all and (max-width: 567px) {
	.offerbox { width: auto; height: 50px; margin-top: 8px; display: flex; }


	.offerbox .offerwrapper { width: auto; flex: 1; display: flex; }

	.offerbox .item-offer { padding: 0 0 0 3px; float: none; flex: 1; width: auto;  }
	.offerbox .item-preis { padding: 0 3px 0 0; float: none; }
	.offerbox .item-left { padding: 0 0 0 3px; float: none; flex: 1; }


	.offerbox .item .label { padding: 6px 0 2px 0; font-size: 9px; }

	.offerbox .item .text { font-size: 11px; }


	.offerbox .booking { width: 65px; }
	.offerbox .booking a {
		font-size: 11px;
		padding: 30px 0 0 0;
	}

	.offerbox .booking.split a { padding: 5px 0 0 0; }


}

.arrowbox {
	position: absolute;
	top: 0px;
	right: 0px;
	display: inline-block;
	font-size: 16px;
	margin: 0 0 0 8px;
	background-image: url(https://tramino.s3.amazonaws.com/s/oberstdorf-event/806520/linknameflag.png);
	background-position: bottom 0px right 0px;
	background-repeat: no-repeat;
	padding: 0 0 14px 0;
}

.arrowbox i {
	font-size: 21px;
	color: #666666;
	background-color: #FFF;
	padding: 5px 15px;
}

.arrowbox i.booking { color: #FFF; }



@media all and (min-width: 1024px) and (max-width: 1279px) {
	.arrowbox {
		margin: 0 0 0 7px;
		padding: 0 0 11px 0;
		background-size: 35px auto;
	}

	.arrowbox i {
		font-size: 19px;
		padding: 4px 13px;
	}
}

@media all and (min-width: 768px) and (max-width:1023px) {
	.arrowbox {
		margin: 0 0 0 7px;
		padding: 0 0 11px 0;
		background-size: 35px auto;
	}

	.arrowbox i {
		font-size: 17px;
		padding: 3px 11px;
	}
}

@media all and (min-width: 568px) and (max-width: 767px) {
	.arrowbox {
		margin: 0 0 0 7px;
		padding: 0 0 11px 0;
		background-size: 35px auto;
	}

	.arrowbox i {
		font-size: 17px;
		padding: 3px 11px;
	}
}

@media all and (max-width: 567px) {
	.arrowbox {
		margin: 0 0 0 7px;
		padding: 0 0 8px 0;
		background-size: 30px auto;
	}

	.arrowbox i {
		font-size: 15px;
		padding: 2px 9px;
	}
}

@media all and (min-width: 1024px) and (max-width: 1279px) {
	
	#body.nomotiv #content { margin-top: 150px; }

	.maxwidth {
		width: 980px;
	}

	.TraminoVorlage { 
		margin-top: 60px;
		margin-bottom: 60px;
	}

	.padding-lr {
		padding-left: 35px;
		padding-right: 35px;
	}

	.padding-tb {
		padding-top: 35px;
		padding-bottom: 35px;
	}

	.textile table { margin: 0 0 18px 0; }
	.textile table td { padding: 3px 8px; }

	#body .slick-arrow:before { font-size: 45px !important; }
	#body .slick-arrow { width: 45px !important; height: 45px !important; }

}

@media all and (min-width: 768px) and (max-width:1023px) {
	body { -webkit-text-size-adjust: 100%; }
	
	#body.nomotiv #content { margin-top: 120px; }

	body.openmenu { overflow: hidden; }
	body.openibe { overflow: hidden; }

	body.openmenu #page, body.openibe { position: fixed; top: 0; left: 0; right: 0; }

	.maxwidth {
		width: auto;
		margin: 0 20px;
	}

	.maxwidthsmall {
		width: auto;
		margin: 0 30px;
	}

	.TraminoVorlage { 
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.padding-lr {
		padding-left: 25px;
		padding-right: 25px;
	}
	.padding-tb {
		padding-top: 25px;
		padding-bottom: 25px;
	}

	.textile table { margin: 0 0 15px 0; }
	.textile table td { padding: 2px 6px; }

	#body .slick-arrow:before { font-size: 40px !important; }
	#body .slick-arrow { width: 40px !important; height: 40px !important; }

}

@media all and (min-width: 568px) and (max-width: 767px) {
	body { -webkit-text-size-adjust: 100%; }

	#body.nomotiv #content { margin-top: 90px; }

	body.openmenu { overflow: hidden; }
	body.openibe { overflow: hidden; }

	body.openmenu #page, body.openibe { position: fixed; top: 0; left: 0; right: 0; }

	.maxwidth {
		width: auto;
		margin: 0 15px;
	}

	.maxwidthsmall {
		width: auto;
		margin: 0 20px;
	}

	.maxwidth-tablet {
		width: auto;
		margin: 0 15px;
	}

	.TraminoVorlage { 
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.padding-lr {
		padding-left: 20px;
		padding-right: 20px;
	}

	.padding-tb {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.textile table { margin: 0 0 13px 0; }
	.textile table td { padding: 2px 4px; }

	#body .slick-arrow:before { font-size: 35px !important; }
	#body .slick-arrow { width: 35px !important; height: 35px !important; }

}

@media all and (max-width: 567px) {
	body { -webkit-text-size-adjust: 100%; }

	#body.nomotiv #content { margin-top: 75px; }

	body.openmenu { overflow: hidden; }
	body.openibe { overflow: hidden; }

	body.openmenu #page, body.openibe { position: fixed; top: 0; left: 0; right: 0; }


	.maxwidth {
		width: auto;
		margin: 0 15px;
	}

	.maxwidth-mobile {
		width: auto;
		margin: 0 15px;
	}

	.maxwidthsmall {
		width: auto;
		margin: 0 15px;
	}

	.maxwidth_break_mobile {
		width: auto;
		margin: 0;
	}
	
	.TraminoVorlage { 
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.padding-lr {
		padding-left: 15px;
		padding-right: 15px;
	}

	.padding-tb {
		padding-top: 15px;
		padding-bottom: 15px;
	}
	
	.textile table { margin: 0 0 10px 0; }
	.textile table td { padding: 2px 4px; }


	#body .slick-arrow:before { font-size: 30px !important; }
	#body .slick-arrow { width: 30px !important; height: 30px !important; }

}