/* Template for Panorama Resort © admotion */


html
{
   height:			100%;
   overflow-x:		clip;
}


body
{
   height:			100%;
   margin:			0px;
   padding:			0px;
   font-family:		'Lato';
   font-weight:		300;
   font-size:		17px;
   color:			#767265;
   line-height:		160%;
   letter-spacing:	0.03em;
   overflow-x:		clip;
}


#system-message { margin: 0px; }

img { height: auto; max-width: 100%; vertical-align: middle; border: 0; }
.grecaptcha-badge {display: none;}

#topimg { height: 30vh; }
.logo { margin-right: auto; }

#languages p { display: none; }
#languages-mobile p { display: none; }
div.mod-languages ul li.lang-active { background: none; }
div.mod-languages a { padding: 0px; }


#showbox { position: relative; }

.com-content-article .item-image { display: none; }

#box-telefon { display: none; }

#hidemobile { display: none; }
#showmobile { display: block; }

.hidemobile { display: none; }
.showmobile { display: block; }

.filmdesktop { display: none; }
.filmmobile { display: block; }

#news .uk-scope .uk-padding { padding: 0px 20px 30px 20px; }

.showdesktop { display: none; }

#header { position: fixed; width: 100%; z-index: 9998; animation: fadeInStickyNav 500ms ease; display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; }
.scrollingdown { background: #ffffff; box-shadow: 0 0.2rem 0.25rem -0.1rem rgba(0, 0, 0, 0.2); height: 60px; transition: 1s; }

.scrollingup { background: none; }

.scrollingdown #menu-small { margin: 20px 30px 0px 20px; }
.scrollingdown #menu-small span { background: #969080; }


#packages-button-zimmer { float: left; margin: 0px 20px 0px 0px; }
#packages-button-gutschein { float: left; }


#logo { width: 240px; height: 39px; background: url(../images/panorama-resort-negativ.svg) no-repeat scroll 0 0; background-size: 240px 39px; margin: 20px 0px 0px 30px; cursor: pointer; transition: .3s ease-out; }
.scrollingdown #logo { width: 200px; height: 32px; background: url(../images/panorama-resort.svg) no-repeat scroll 0 0; background-size: 200px 32px; margin: 15px 0px 0px 30px; }

.scrollingdown #languages a { color: #969080; }

.scrollingdown #booking { background: url(../images/booking-black.png) no-repeat scroll 0 3px; background-size: 25px 25px; }
.scrollingdown #email { background: url(../images/email-black.png) no-repeat scroll 6px 8px; background-size: 20px 20px; }
.scrollingdown #gutschein { background: url(../images/gutscheine-black.png) no-repeat scroll 8px 6px; background-size: 19px 22px; }
.scrollingdown #telephone { background: url(../images/telephone-black.png) no-repeat scroll 8px 7px; background-size: 20px 21px; }







#gutschein a { display: block; }

#schwangerschaftspackage .img-fulltext-left { display: none; }
#pregnancy-package .img-fulltext-left { display: none; }

#verlauf { position: absolute; height: 300px; width: 100%; background: url(../images/verlauf.png) repeat-x scroll 0 0; z-index: 9; }

#news { margin: 30px 30px 30px 30px; }

#menu { background: #c3bdac; display: none; z-index: 9999; position: fixed; width: 100%; bottom: 0; top: 0; }
#menu-inhalt { padding: 130px 30px 30px 30px; }
#icons-mobile { position: absolute; top: 16px; left: 80px; }

#verwandt { padding: 0px 20px; }
#verwandt h3 { margin: 0px 0px 25px 0px; }



#icons { padding: 0px; margin: 24px 0px 0px 0px; transition: .3s ease-out; display: none; }
.scrollingdown #icons { padding: 0px; margin: 20px 0px 0px 0px; }
#languages { display: none;  }

div.mod-languages li { margin: 9px 0px 0px 0px; padding: 0px 10px 0px 15px; background: url(../images/languages-line-black.png) no-repeat scroll 0 4px; }
div.mod-languages li:first-child { background: none; padding: 0px 10px 0px 0px; }


#languages-mobile { position: absolute; left: 30px; top: 10px; font-size: 18px; }
#languages-mobile a { color: #ffffff; }

#text a { color: #969080; font-weight: 400; }
#text ul { margin: 0px 0px 10px 0px; padding: 0px; }
#text ul li { margin: 0px; padding: 0px 0px 0px 22px; list-style: none; background: url(../images/list.jpg) no-repeat scroll 0 14px; line-height: 160%; }

#angebote #text ul li { margin: 0px; padding: 9px 20px 7px !important; list-style: none !important; background: none !important; border: 1px solid #969080 !important; margin-right: 20px !important; margin-bottom: 20px !important; -webkit-transition: background-color 500ms ease-out, color 500ms ease-out; -moz-transition: background-color 500ms ease-out, color 500ms ease-out; -o-transition: background-color 500ms ease-out, color 500ms ease-out; transition: background-color 500ms ease-out, color 500ms ease-out; }
#angebote #text ul li:hover { background-color: #969080 !important; color: #ffffff !important; cursor: pointer; }
#angebote #text ul li.uk-active { background-color: #969080 !important; color: #ffffff !important; cursor: pointer; }
#angebote #text ul li:hover a { color: #ffffff !important; }
#angebote #text ul li.uk-active a { color: #ffffff !important; }


#text ul { margin: 0px 0px 10px 0px; padding: 0px; }
#text ol li { line-height: 170%; list-style: inherit; padding: 0px 0px 0px 10px !important; }
.uk-accordion ol li { margin: 0px !important; }




#text ul.uk-accordion { margin: 0px 0px 10px 0px !important; }

.socialwall ul { display: flex; flex-wrap: wrap; margin: 50px 0 0 0 !important;}
.socialwall li { padding: 0px !important; background: none !important; margin: 0px 20px 20px 0px !important; text-transform: uppercase; letter-spacing: 0.07em; }
.socialwall li a { border: 1px solid #969080; padding: 9px 20px 7px 20px !important; display: inline-block; -webkit-transition: background-color 500ms ease-out; -moz-transition: background-color 500ms ease-out; -o-transition: background-color 500ms ease-out; transition: background-color 500ms ease-out; }
.socialwall li a:hover { background-color: #969080; color: #ffffff !important; }
.socialactiv a { background-color: #969080; color: #ffffff !important; }





.items-leading { padding: 30px; }
.category-desc { padding: 30px; }
#zimmer-suiten .category-desc { padding: 30px 30px 0px 30px; }



.blog-items { margin: 0px 30px; }
.blog-items:nth-child(odd) { background: #ffffff; padding: 30px 0px; }
.blog-items:nth-child(even) { background: #f4f4ea; padding: 30px; }




.blog-items:nth-child(even) .uk-scope .uk-card-default { background: #ffffff; }

.com-content-article__body { padding: 30px; }


#packages #container-packages { background: #f4f4ea; }


#first img { min-width: 100%; }
#first-mobile img { min-width: 100%; }
#second img { min-width: 100%; }

.first { margin: 0px 0px 30px 0px; }
.second { margin: 0px 0px 30px 0px; }
.third { margin: 0px 0px 30px 0px; }
.fourth { margin: 0px; }


#container-angebotebereich { background: #C3BDAC; overflow-x: hidden; max-width: 100vw; box-sizing: border-box; }
#angebotebereich-titel { margin: 0px 0px 20px 0px; }
#angebotebereich { padding: 30px 30px 60px 30px; }
#angebotebereich .uk-scope .uk-card-default { background: #ffffff; }
#angebotebereich h2 { margin: 0px 0px 30px 0px; padding: 0px; font-size: 40px; line-height: 110%; font-weight: 400; color: #b9b89a; letter-spacing: 0.03em; text-transform: uppercase; font-family: "quiche-sans", sans-serif; position: relative; color: #ffffff; }
#angebotebereich h2::after { content: ""; width: 150px; background: #ffffff; height: 2px; display: block; margin: 30px 0px 0px 0px;}

#angebotebereich > .uk-scope .uk-button-default { border-color: #ffffff; color: #ffffff; background: transparent; }
#angebotebereich > .uk-scope .uk-button-default:hover,
#angebotebereich > .uk-scope .uk-button-default:focus { background-color: #ffffff; color: #838078 !important; border-color: #ffffff; }

#container-verwandt { background: #E7E4DD; color: #b9b89a; margin: 0px; }
#verwandt { padding: 30px; }

#details { padding: 60px 30px 30px 30px; }

#details ol { margin: 0px 0px 10px 0px; padding: 0px 0px 0px 27px; }


footer { background: #838078; padding: 30px 30px 100px 30px; }
footer a { color: #EBEAE1; }
#footer { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#footer-first { grid-column: 1 / -1; margin: 0px 0px 20px 0px;}
#footer-first img { width: 250px; }
#footer-second { margin: 0px; }
#footer-third { display: none; }
#footer-third p { margin: 0px; }
#footer-fourth { margin: 0px; }
#footer-fourth p { margin: 0px; }


.hotelicons img { max-width: 180px; margin: 0px 0px 10px 0px; }
.socialmedia-icons { margin: 0px auto; display: flex; flex-wrap: wrap; }
.socialmedia { width: 35px; height: 35px; margin: 20px 10px 0px 0px; border-radius: 50%; border: 1px solid #ebeae1; }
.socialmedia p { margin: 0px;}
.last { margin: 20px 0px 0px 0px; }

#haupttitel { display: none; padding: 15px 80px 0px 30px; font-size: 30px; line-height: 130%; font-weight: 400; letter-spacing: 0.03em; text-transform: uppercase; font-family: "quiche-sans", sans-serif; }

.badges { display: flex; flex-wrap: wrap; gap: 15px;  }
.badge { width: 200px; }

#info { position: absolute; left: 20px; width: 50px; height: 50px; bottom: 20px; border-radius: 25px; cursor: pointer; background: #E3E5C6 url(../images/info.png) no-repeat scroll center center; background-size: 10px 22px; z-index: 9997;}
#infobox { background: #E3E5C6 url(../images/close.png) no-repeat scroll right 10px top 10px; background-size: 15px 15px; position: absolute; top: 20px; left: 20px; right: 20px; padding: 25px 30px 20px 30px; cursor: pointer; z-index: 9999; -webkit-box-shadow: 0px 0px 14px -1px #555555; box-shadow: 0px 0px 14px -1px #555555; transition: .3s ease-out; }
#info:hover { background: #969080 url(../images/info-white.png) no-repeat scroll center center; background-size: 10px 22px; }



.responsiveContainer { position: relative; padding-bottom: 45%; height: 0; overflow: hidden; }
.responsiveContainer iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


.leading-0 h2 { display: none; }


h1 { margin: 0px 0px 30px 0px; padding: 0px; font-size: 27px; line-height: 110%; font-weight: 400; color: #b9b89a; letter-spacing: 0.03em; text-transform: uppercase; font-family: "quiche-sans", sans-serif; position: relative; color: #B7B09C; }
h1::after { content: ""; width: 150px; background: #B7B09C; height: 2px; display: block; margin: 30px 0px 0px 0px;}

h2 { margin: 0px 0px 25px 0px; padding: 0px; font-size: 35px; line-height: 130%; font-weight: 400; color: #969080; letter-spacing: 0.03em; text-transform: uppercase; font-family: "quiche-sans", sans-serif; }
h3 { margin: 0px 0px 15px 0px; padding: 0px; font-size: 24px; line-height: 130%; font-weight: 300; color: #969080; letter-spacing: 0.03em; text-transform: uppercase; }
h4 { margin: 0px 0px 5px 0px; padding: 20px 0px 0px 0px; font-size: 20px; line-height: 130%; font-weight: 700; text-transform: uppercase; color: #969080; letter-spacing: 0.04em; }
h5 { margin: 0px 0px 20px 0px; padding: 0px; font-size: 25px; line-height: 140%; font-weight: 400; color: #969080; letter-spacing: 0.04em; text-transform: uppercase; }
h6 { margin: 0px 0px 15px 0px; padding: 0px; font-size: 30px; line-height: 130%; font-weight: 300; color: #969080; letter-spacing: 0.06em; text-transform: uppercase; }




h2 + h4 { padding: 0px; }
h4:first-of-type { padding: 0px; }

.lead { font-family: "quiche-sans", sans-serif; font-size: 17px; line-height: 160%;letter-spacing: 0.02em; color: #969080; margin: 0px 0px 30px 0px;}

p { margin: 0px 0px 10px 0px; }

a { text-decoration: none !important; outline: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; outline: none; }

strong { font-weight: 700; }

.clear { line-height: 0; }

table { width: 100%; margin: 0px 0px 30px 0px; }
td { border-bottom: 1px solid #969080; padding: 8px 0px; }
table p { margin: 0px;}


/* Spezielle Änderungen ID */

#impressum h2, #rechtliches h2 { padding: 10px 0px 0px 0px; margin: 0px 0px 10px 0px; }
#impressum h3 { padding: 10px 0px 0px 0px; }

#restaurants-bar .img-intro-left { display: none; }
#zimmer-suiten .img-intro-left { display: none; }



.tablehint p { font-size: 14px;}

table td.tablelist { display: block; border: 0px; padding-bottom: 0;}
table td.tablelist p { margin: 0;}
table td.tablelist.spalteeins { border-bottom: 0px !important; padding-bottom: 0 !important; margin-bottom: -48px;}

.resptable table { font-size: 14px; letter-spacing: 0;}
.resptable table th {vertical-align: top;}
.resptable table td {vertical-align: top;}
.resptable table thead th:first-child { min-width: 60px;}




article { position: relative; }

#newsbutton { background: #b7b09c; text-align: center; box-sizing: border-box; padding: 20px 20px 10px 20px; position: absolute; right: 15px; z-index: 999; width: 170px; height: 170px; border-radius: 50%; display: flex; align-items: center; top: -190px; font-size: 16px; line-height: 150%; -webkit-box-shadow: 0px 0px 14px -1px #555555; box-shadow: 0px 0px 14px -1px #555555; }
#newsbutton a { color: #ffffff !important; }

.newstitle { font-size: 40px; font-weight: 600; margin: 0px 0px 10px 0px; }
.newslead { font-size: 14px; text-transform: uppercase; font-weight: 500; margin: 0px 0px 0px 0px; }

figure { margin: 0px; padding: 0px; }
.newsflash-title { position: absolute; left: 20px; top: 20px; z-index: 9999; }
.newsflash-title a { color: #ffffff !important; font-weight: 700 !important; }
.packages-vorschau { position: absolute; bottom: 0px; z-index: 9998; left: 0px; right: 0; top: 0; background: rgb(0,0,0,.7); color: #ffffff; display: flex; align-items: flex-end; opacity: 0; transition: .5s ease-out; font-size: 19px; line-height: 160%; }
.vorschau-inhalt { padding: 20px 20px 10px 20px; }

.packages-vorschau:hover { opacity: 1; }

.newsflash { display: grid; grid-template-columns: 1fr; column-gap: 30px; grid-row-gap: 30px; }
.mod-articlesnews__item { position: relative; }
.mod-articlesnews__item:first-child { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }
.mod-articlesnews__item:nth-child(2) { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; }
.mod-articlesnews__item:nth-child(3) { grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; }
.mod-articlesnews__item:nth-child(4) { grid-column-start: 1; grid-column-end: 2; grid-row-start: 4; grid-row-end: 5; }
.mod-articlesnews__item:nth-child(5) { grid-column-start: 1; grid-column-end: 2; grid-row-start: 5; grid-row-end: 6; }
.mod-articlesnews__item:nth-child(6) { grid-column-start: 1; grid-column-end: 2; grid-row-start: 6; grid-row-end: 7; }
.mod-articlesnews__item:nth-child(7) { grid-column-start: 1; grid-column-end: 2; grid-row-start: 7; grid-row-end: 8; }

.newsflash-image img { height: 300px; width: 100%; object-fit: cover; object-position: center center; }



@media(min-width:550px)
{
    #newsbutton { position: absolute; right: 30px; z-index: 9997; width: 200px; height: 200px; border-radius: 50%; display: flex; align-items: center; top: -230px; font-size: 16px; line-height: 150%; box-shadow: 3px 3px 15px #C8C3B4; }
    
    #info { left: 30px; bottom: 30px; }
    #infobox { left: 30px; right: 30px; bottom: 100px; top: auto; }
    #news { margin: 18px 30px 0px 30px; }
    #news .uk-scope .uk-padding { padding: 0px 30px 30px 30px; }

    #logo { margin: 20px 0px 0px 30px; }
    
    .scrollingdown #menu-small { margin: 20px 0px 0px 20px; }
    
    #details { padding: 60px 30px 30px 30px; }
    
    #packagesbereich { padding: 30px; }
    
	#footer-first img { width: 260px; padding: 5px 0px 0px 0px; }


    #newsbutton { right: 30px; width: 200px; height: 200px; top: -230px; font-size: 16px; line-height: 150%; }

    .newstitle { font-size: 50px; margin: 0px 0px 15px 0px; }
    .newslead { font-size: 18px; }
}



@media(max-height:800px)
{
    #infobox { top: 20px; bottom: auto; }
}




@media(min-width:750px)
{
    .resptable table { font-size: 1em; letter-spacing: 0.04em;}

    h1 { font-size: 45px; }
    #buchungsbereich { position: absolute; bottom: 0px; width: 600px; left: 50%; margin: 0px 0px 0px -300px; }
    #infobox { margin: 0px 0px 0px 60px; width: 540px; }
    #haupttitel { display: block; position: absolute; bottom: 10px; color: #ffffff; font-size: 40px; padding: 0px 0px 0px 30px; }
#topimg { height: 50vh; }

    
    #news { margin: 20px auto 0px; width: 600px; position: relative; z-index: 9990; }
    
    .hidemobile { display: block; }
    .showmobile { display: none; }

    
    .items-leading { margin: 0px auto; width: 600px; padding: 50px 0px; }
    .category-desc { margin: 0px auto; width: 600px; padding: 50px 0px 50px 0px; }
    .blog-item { margin: 0px auto; width: 600px; }
    .blog-items:nth-child(odd) { padding: 50px 0px; }
    .blog-items:nth-child(even) { padding: 50px 0px; }
    
    .com-content-article__body { margin: 0px auto; width: 600px; padding: 50px 0px; }
    

    #form-left { float: left; width: 49%; }
    #form-right { float: right; width: 49%; }
    #angaben-left { float: left; width: 49%; }
    #angaben-right { float: right; width: 49%; }
    #persoenlich { margin: 30px 0px 0px 0px; }
    
    
    #angebotebereich { margin: 0px auto; width: 600px; padding: 50px 0px 100px 0px; }
    
    #details { margin: 0px auto; width: 600px; padding: 50px 0px; }
    
    #verwandt { margin: 0px auto; width: 600px; padding: 80px 0px; }
        
    #footer { margin: 0px auto; width: 600px; padding: 0px; }

    h3 { font-size: 24px; }

    
    h4 { font-size: 18px; }
    .packages-vorschau { font-size: 15px; line-height: 150%; }
    .newsflash { grid-template-columns: 1fr 1fr; }
    .mod-articlesnews__item:first-child { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; }
    .mod-articlesnews__item:nth-child(2) { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; }
    .mod-articlesnews__item:nth-child(3) { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; }
    .mod-articlesnews__item:nth-child(4) { grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; }
    .mod-articlesnews__item:nth-child(5) { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; }
    .mod-articlesnews__item:nth-child(6) { grid-column-start: 1; grid-column-end: 3; grid-row-start: 4; grid-row-end: 5; }
    .mod-articlesnews__item:nth-child(7) { grid-column-start: 1; grid-column-end: 2; grid-row-start: 5; grid-row-end: 6; }
    
    .newsflash-image img { height: 285px; }
}



@media(min-width:950px)
{    
    body { font-size: 19px; }
    .readMoreCnt .inner { max-height: 390px; }

    #infobox { width: 740px; }

    #top-img { display: block; }
    #header { box-shadow: none; }

    .scrollingdown { box-shadow: 0 0.2rem 0.25rem -0.1rem rgba(0, 0, 0, 0.2) !important; height: 75px; background: #ffffff !important; }

    .scrollingdown .booking { stroke:#000000; }
    .scrollingdown #booking { background: url(../images/booking-black.png) no-repeat scroll 0 3px; background-size: 25px 25px; }
    #haupttitel { bottom: 20px; padding: 0px 0px 0px 50px; }

    #logo { width: 300px; height: 49px; background: url(../images/panorama-resort-negativ.svg) no-repeat scroll 0 0; background-size: 300px 49px; margin: 27px 0px 0px 50px; z-index: 9996; transition: .3s ease-out; }
    .scrollingdown #logo { width: 220px; height: 38px; background: url(../images/panorama-resort.svg) no-repeat scroll 0 0; background-size: 220px 38px; margin: 20px 0px 0px 50px; }
    .scrollingdown #menu-small { margin: 28px 50px 0px 30px; }
    
    #buchungsbereich { width: 800px; margin: 0px 0px 0px -400px; }

    #news { width: 800px; margin: 80px auto 0px; }

    #news .uk-scope .uk-padding { padding: 30px; }

    #languages-mobile { display: none; }
    #languages { display: block; font-size: 15px; margin: 18px 20px 0px 0px; transition: .3s ease-out; }
    #languages a { color: #ffffff; }
    .scrollingdown #languages { margin: 17px 20px 0px 0px; }

    header { padding: 0px; }
    
    .items-leading { width: 800px; }
    .category-desc { width: 800px; }
    .blog-item { width: 800px; }
    .com-content-article__body { width: 800px; }
    
    #angebotebereich { width: 800px; }
    
    #details { width: 800px; }
    
    #verwandt { width: 800px; }

    #footer { width: 800px; padding: 30px 0px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
    #footer-first { grid-column: auto; margin: 0px; min-height: 280px; box-sizing: border-box; padding: 15px 30px 0px 0px; }
    #footer-second { border-left: 1px solid #BEBAAD; box-sizing: border-box; padding: 20px 0px 0px 30px; margin: 0; }
    #footer-fourth { border-left: 1px solid #BEBAAD; box-sizing: border-box; padding: 20px 0px 0px 30px; margin: 0; }

    .socialmedia-icons { margin: 0px; }
    .socialmedia { margin: 30px 10px 0px 0px; }
    .last { margin: 30px 0px 0px 0px;}

    .packages-vorschau { font-size: 19px; line-height: 160%; }

    h1 { font-size: 55px; margin: 0px 0px 40px 0px; }
    h1::after { margin: 40px 0px 0px 0px;}
   h4 { font-size: 22px; }
    .newsflash-image img { height: 385px; }

    .lead { font-size: 22px; margin: 0px 0px 30px 0px; }

}




@media(min-width:1050px)
{
    #logo { margin: 35px 0px 0px 50px; }
    #icons { margin: 35px 0px 0px 0px; display: block; }
    .scrollingdown #icons { margin: 20px 0px 0px 0px; }
    #languages { margin: 28px 25px 0px 0px; }

    .filmdesktop { display: block; }
    .filmmobile { display: none; }
    #haupttitel { padding: 0px 0px 0px 120px; bottom: 25px;}

    table td.tablelist { display: table-cell;}
    table td.tablelist.spalteeins { border-bottom: 1px solid #000000 !important; padding-bottom: 10px !important; margin-bottom: 0px;}

    /* .showdesktop { display: block; }
    .hidedesktop { display: none; } */

    #buchungsbereich { width: 900px; margin: 0px 0px 0px -450px; }
    
    .scrollingdown #logo { width: 200px; height: 32px; background: url(../images/panorama-resort.svg) no-repeat scroll 0 0; background-size: 200px 32px; margin: 24px 0px 0px 50px; }
    .scrollingdown #menu-small { float: left; margin: 29px 50px 0px 40px; }

    #menu { background: none; bottom: auto; }
    #menu-inhalt { background: #EBEAE1; padding: 50px 0px; }

    #hidemobile { display: block; }
    #showmobile { display: none; }

    #icons-mobile { display: none; }
    
    #news { width: 900px; }
    #verwandt { width: 900px; }
    
    div.mod-languages li { background: url(../images/languages-line.png) no-repeat scroll 0 4px; }
    .scrollingdown div.mod-languages li { background: url(../images/languages-line-black.png) no-repeat scroll 0 4px; }
    .scrollingdown div.mod-languages li:first-child { background: none; }
     
    #box-telefon { background: #969080; color: #ffffff; position: absolute; right: 0px; top: 60px; padding: 10px; width: 190px; text-align: center; font-weight: 700; }
    
    
    
    .blog-items { margin: 0px 40px; }
    .items-leading { width: 900px; padding: 80px 0px; }
    #zimmer-suiten .items-leading { padding: 40px 0px 80px 0px; }
    #restaurants-bar .items-leading { padding: 40px 0px 80px 0px; }

    .category-desc { width: 900px; padding: 80px 0px 80px 0px; }
    #zimmer-suiten .category-desc { padding: 80px 0px 30px 0px; }

    .blog-item { width: 900px; }
    .blog-items:nth-child(odd) { padding: 80px 0px; }
    .blog-items:nth-child(even) { padding: 80px 0px; }
    
    .com-content-article__body { width: 900px; padding: 80px 0px; }


    #container-angebotebereich { margin: 0px; }
    #angebotebereich { width: 900px; padding: 80px 0px 120px 0px; }
    
    #details { width: 900px; padding: 80px 0px; }

    footer { margin: 0px; text-align: left; }
    #footer { width: 900px; padding: 60px 0px; }

    #footer-second { padding: 20px 0px 0px 30px; }
    
    .socialmedia-icons { margin: 0px; }



    .newsflash-image img { height: 430px; }
}






@media(min-width:1350px)
{

    .tablehint { display: none;}

    .readMoreCnt .inner { max-height: 485px; }
    #buchungsbereich { width: 1200px; margin: 0px 0px 0px -600px; }
    
    #news { width: 1200px; }
    #verwandt { width: 1200px; }

    .items-leading { width: 1200px; }
    .category-desc { width: 1200px; }
    .blog-item { width: 1200px; }
    .com-content-article__body { width: 1200px; }
    
    .lead { width: 75%;}

    #container-details h2 { width: 60%;}

    #angebotebereich { width: 1200px; }
    
    #details { width: 1200px; }
    

    #footer { width: 1200px; grid-template-columns: 1fr 1fr 1fr 1fr; }
	#footer-first img { width: 260px; }
    #footer-third { display: block; border-left: 1px solid #BEBAAD; box-sizing: border-box; padding: 20px 0px 0px 30px; }

    
    .newsflash { grid-template-columns: 1fr 1fr 1fr; }
    .mod-articlesnews__item:first-child { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; }
    .mod-articlesnews__item:nth-child(2) { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; }
    .mod-articlesnews__item:nth-child(3) { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; }
    .mod-articlesnews__item:nth-child(4) { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; }
    .mod-articlesnews__item:nth-child(5) { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; }
    .mod-articlesnews__item:nth-child(6) { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; }
    .mod-articlesnews__item:nth-child(7) { grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; }
    
    .newsflash-image img { height: 380px; width: 100%; object-fit: cover; object-position: center center; }

}




@media(min-width:1500px)
{
    #newsbutton { right: 50px; top: -250px; }
    
    #topimg { height: 70vh; }
    
    #buchungsbereich { width: 1350px; margin: 0px 0px 0px -675px; }
    
    #news { width: 1350px; }
    #verwandt { width: 1350px; }

    .items-leading { width: 1350px; }
    .category-desc { width: 1350px; }
    .blog-item { width: 1350px; }
    .com-content-article__body { width: 1350px; }
    
    .zimmer-text { float: right; width: 50%; }
    .zimmer-slider { float: left; width: 50%; }
    
    
    .newsflash-image img { height: 420px; }

    
    #packagesbereich { width: 1350px; }
    
    #angebotebereich { width: 1350px; }
    
    #details { width: 1350px; }
    
    #footer { width: 1350px; }
}
.mouseover-packages {
  position: relative;
  overflow: hidden;
}

.mouseover-packages::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}


@media (max-width: 750px) {

  /* Kompaktere Bilder */
  .newsflash-image img {
    height: 140px;
  }

  /* Overlay komplett umfunktionieren */
  .packages-vorschau {
    opacity: 1;
    background: transparent !important;
    pointer-events: none;
    align-items: flex-end;
  }

  /* Hover-Effekt komplett deaktivieren */
  .packages-vorschau:hover {
    background: transparent !important;
  }

  /* Beschreibungstext komplett weg */
  .vorschau-inhalt p:first-child {
    display: none;
  }

  /* Button immer sichtbar und klickbar */
  .vorschau-inhalt p:last-child {
    pointer-events: auto;
  }

  .vorschau-inhalt p:last-child a {
    display: inline-block;
    border: 1px solid #ffffff;
    padding: 9px 20px 7px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.35);
    transition: background-color 500ms ease-out;
    pointer-events: auto;
  }

  .vorschau-inhalt p:last-child a:hover {
    background-color: rgba(0, 0, 0, 0.6);
  }
}

li#uk-slider-2, li#uk-slider-3, li#uk-slider-4, li#uk-slider-5  {
    margin: unset !important; 
    list-style: unset !important;
    background: unset !important;
    line-height: unset !important;
    padding-left: 40px !important;
}

.seminare .uk-panel .uk-scope {
  margin-top: -20px;
}

.uk-scope .seminare .uk-panel {
  box-shadow: none !important;
}

.seminare.uk-slider.uk-slider-container {
    margin-left: -40px;
    /* overflow:visible damit die seitlichen Pfeile aus dem Container ragen
       koennen. Das Clipping der Slides uebernimmt der Viewport darunter. */
    overflow: visible !important;
    position: relative;
}

.seminare > .uk-position-relative.uk-visible-toggle.uk-margin {
  overflow: hidden;
}

.seminare > .uk-slider-nav {
  display: flex !important;
  justify-content: center !important;
  margin-left: 40px !important;
}

/* Aeussere Karussell-Pfeile: links/rechts neben dem Carousel,
   vertikal auf der Bildmitte. Hoehe + Top werden via JS auf den
   Viewport synchronisiert. */
.seminare > .seminare-slider-arrows {
  position: absolute;
  top: 0;
  left: 0;
  right: -40px;             /* erlaubt dem rechten Pfeil aus .seminare herauszuragen, symmetrisch zum -40px margin-left */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 6;
  pointer-events: none;
  margin: 0;
}

.seminare > .seminare-slider-arrows a.uk-slidenav[uk-slider-item] {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 5px 17px !important;
}

.seminare > .seminare-slider-arrows a.uk-slidenav[uk-slider-item] svg {
  width: 14px !important;
  height: 24px !important;
}

.elfsight-flipbook {
  width: 80vw;
  margin-left: calc(-40vw + 50%);
  overflow-x: hidden;
}




/* ==========================================
   Seminaranfrage Section
   ========================================== */

.seminar-anfrage-banner {
	position: relative;
	overflow: hidden;
}

.seminar-anfrage-banner > img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.seminar-anfrage-banner-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 40px 30px 30px 30px;
	background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
	color: #ffffff;
}

.seminar-anfrage-title {
	font-family: "quiche-sans", sans-serif !important;
	font-size: 28px !important;
	line-height: 130% !important;
	font-weight: 400 !important;
	color: #ffffff !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	margin: 0 0 5px 0 !important;
	padding: 0 !important;
}

.seminar-anfrage-title::after {
	display: none !important;
}

.seminar-anfrage-text {
	font-size: 16px;
	opacity: 0.85;
	margin: 0 0 15px 0;
}

.seminar-anfrage-kontakt {
	display: flex;
	align-items: center;
	gap: 10px;
}

.seminar-anfrage-kontakt-label {
	font-size: 13px;
	opacity: 0.7;
}

.seminar-anfrage-kontakt-nummer {
	font-size: 16px;
	font-weight: 700;
}

.seminar-anfrage-formular {
	background: #EBEAE1;
	padding: 40px 30px;
}

.seminar-anfrage-formular fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

.seminar-anfrage-formular legend {
	font-family: "quiche-sans", sans-serif;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #b7b09c;
	font-weight: 400;
	margin: 0 0 15px 0;
	padding: 0;
}

.seminar-anfrage-formular input[type="text"],
.seminar-anfrage-formular input[type="email"],
.seminar-anfrage-formular input[type="tel"],
.seminar-anfrage-formular input[type="number"],
.seminar-anfrage-formular input[type="date"],
.seminar-anfrage-formular select,
.seminar-anfrage-formular textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #d4d1c7;
	background: #ffffff;
	padding: 12px 15px;
	font-family: 'Lato';
	font-size: 15px;
	font-weight: 300;
	color: #767265;
	letter-spacing: 0.03em;
	transition: border-color 300ms ease;
}

.seminar-anfrage-formular input:focus,
.seminar-anfrage-formular select:focus,
.seminar-anfrage-formular textarea:focus {
	outline: none;
	border-color: #b7b09c;
}

.seminar-anfrage-formular textarea {
	resize: vertical;
	min-height: 100px;
}

.seminar-anfrage-formular button[type="submit"],
.seminar-anfrage-formular input[type="submit"],
.seminar-anfrage-formular .button,
.seminar-anfrage-formular .btn {
	display: inline-block;
	background: #b7b09c;
	color: #ffffff;
	border: none;
	padding: 15px 50px;
	font-family: 'Lato';
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 500ms ease-out;
}

.seminar-anfrage-formular button[type="submit"]:hover,
.seminar-anfrage-formular input[type="submit"]:hover,
.seminar-anfrage-formular .button:hover,
.seminar-anfrage-formular .btn:hover {
	background: #969080;
}

@media(min-width: 750px) {
	.seminar-anfrage-banner > img {
		height: 350px;
	}

	.seminar-anfrage-banner-overlay {
		padding: 50px;
	}

    button#anfragen{
    margin-top: 30px;
    }

	.seminar-anfrage-title {
		font-size: 35px !important;
	}
}

@media(min-width: 950px) {
	.seminar-anfrage-banner > img {
		height: 400px;
	}

	.seminar-anfrage-formular {
		padding: 60px;
	}

	.seminar-anfrage-title {
		font-size: 42px !important;
	}
}


/* ==========================================
   Angebot Detail – Aufwertung
   ========================================== */

.angebot-detail .angebot-highlight-box {
    background: #f4f4ea;
    padding: 35px 40px;
    margin: 40px 0;
    border-left: 3px solid #b7b09c;
}

.angebot-detail .angebot-highlight-box h3 {
    margin: 0 0 20px 0;
    font-size: 14px;
    letter-spacing: 3px;
    color: #b7b09c;
}

.angebot-detail .angebot-highlight-box ul {
    margin: 0;
    padding: 0;
}

.angebot-detail .angebot-highlight-box ul li {
    padding: 6px 0 6px 22px !important;
    background: url(../images/list.jpg) no-repeat scroll 0 14px;
    line-height: 160%;
    list-style: none;
}

.angebot-detail .angebot-preis-box {
    background: #f4f4ea;
    padding: 35px 40px;
    margin: 0 0 40px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.angebot-detail .angebot-preis-label {
    font-family: "quiche-sans", sans-serif;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #b7b09c;
    margin: 0 0 5px 0;
}

.angebot-detail .angebot-preis-wert {
    font-family: "quiche-sans", sans-serif;
    font-size: 38px;
    font-weight: 400;
    color: #969080;
    letter-spacing: 0.02em;
    line-height: 110%;
}

.angebot-detail .angebot-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.angebot-detail .angebot-buttons a {
    display: inline-block;
    border: 1px solid #969080;
    padding: 12px 28px 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #969080;
    transition: background-color 500ms ease-out, color 500ms ease-out;
}

.angebot-detail .angebot-buttons a:hover {
    background: #969080;
    color: #ffffff;
}

.angebot-detail .angebot-buttons a.angebot-btn-primary {
    background: #969080;
    color: #ffffff;
    border-color: #969080;
}

.angebot-detail .angebot-buttons a.angebot-btn-primary:hover {
    background: #838078;
    border-color: #838078;
}

.angebot-detail .angebot-stimmungsbild {
    margin: 40px 0;
    overflow: hidden;
}

.angebot-detail .angebot-stimmungsbild img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.angebot-detail .angebot-konditionen {
    border-top: 1px solid #BEBAAD;
    padding-top: 30px;
    margin-top: 40px;
}

.angebot-detail .angebot-konditionen h3 {
    font-size: 14px;
    letter-spacing: 3px;
    color: #b7b09c;
    margin: 0 0 15px 0;
}

.angebot-detail .angebot-konditionen p,
.angebot-detail .angebot-konditionen ul li {
    font-size: 15px;
    color: #969080;
}

.angebot-detail .angebot-closing {
    text-align: center;
    padding: 40px 0 10px;
    border-top: 1px solid #BEBAAD;
    margin-top: 40px;
}

.angebot-detail .angebot-closing p {
    font-family: "quiche-sans", sans-serif;
    font-size: 18px;
    font-style: italic;
    color: #b7b09c;
    letter-spacing: 0.02em;
}

@media(min-width: 750px) {
    .angebot-detail .angebot-stimmungsbild img {
        height: 350px;
    }
}

@media(min-width: 950px) {
    .angebot-detail .angebot-preis-wert {
        font-size: 44px;
    }

    .angebot-detail .angebot-stimmungsbild img {
        height: 400px;
    }
}

@media(max-width: 549px) {
    .angebot-detail .angebot-preis-box {
        padding: 25px;
    }

    .angebot-detail .angebot-highlight-box {
        padding: 25px;
    }

    .angebot-detail .angebot-preis-wert {
        font-size: 30px;
    }

    .angebot-detail .angebot-buttons {
        width: 100%;
    }

    .angebot-detail .angebot-buttons a {
        width: 100%;
        text-align: center;
    }
}

.item-page a {
  word-break: break-all;
  overflow-wrap: break-word;
}

ul.uk-slider-nav.uk-dotnav.uk-flex-center.uk-margin-remove-bottom {
    margin-top: 30px;
}

.formBody:not(:has(#bemerkungen)) {
    height: 50px;
}


.formRow:last-of-type .formSpan6:last-child{
    margin-top: 50px;
}

.seminare .uk-panel > .uk-margin > .uk-scope ~ * {
    padding-left: 30px;
    padding-right: 30px;
}

.seminare .uk-panel > .uk-margin > h3 {
    padding-top: 30px;
}

.seminare .uk-panel > .uk-margin > *:last-child {
    padding-bottom: 30px;
}

@media(min-width:750px)
{
    .seminare .uk-panel > .uk-margin > .uk-scope ~ * {
        padding-left: 35px;
        padding-right: 35px;
    }
    
    .seminare .uk-panel > .uk-margin > h3 {
        padding-top: 40px;
    }
    
    .seminare .uk-panel > .uk-margin > *:last-child {
        padding-bottom: 40px;
    }
}

.seminare .uk-panel > .uk-margin > p:empty {
    margin: 0;
}

/* ─────────────────────────────────────────────
   BEREICHE — STICKY STACK (nur Mobile, <750px)
   Markup bleibt unverändert. .content-wrapper /
   .content werden per JS (bereiche-stack.js)
   ergänzt. Block ans Ende von template.css.
   ───────────────────────────────────────────── */
@media (max-width: 749px) {

  /* Newsflash wird zur vertikalen Stack-Bühne */
  .newsflash {
    display: block !important;
    grid-template-columns: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Scroll-Slot: voller Viewport, wird von ScrollTrigger
     gepinnt. NICHT die sichtbare Kartenhöhe — die Karte und
     ihre Zentrierung steuert das JS (bereiche-stack.js:
     CARD_HEIGHT). Scroll-Weg pro Karte: SCROLL_PER_CARD. */
  .mod-articlesnews__item {
    height: 100vh;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    /* Zentriert den (jetzt card-grossen) .content-wrapper
       vertikal. Slot bleibt 100vh, Wrapper ist nur noch
       CARD_HEIGHT hoch — kein leerer Wrapper-Bereich mehr,
       der vor der Karte den Tap abfängt. */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hinweis: .content-wrapper (Flex-Zentrierung, Höhe,
     perspective) und .content (Höhe = CARD_HEIGHT,
     position, transform-origin) bekommen ihre Layout-
     Styles inline vom JS gesetzt — bewusst nicht hier,
     damit es nur EINE Quelle der Wahrheit gibt. */

  /* Bild + Overlays füllen die Kachel */
  .mouseover-packages {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-shadow: 0 -6px 30px rgba(0,0,0,0.15);
  }
  .newsflash-image {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .newsflash-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }
  .newsflash-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
      rgba(0,0,0,0.45) 0%,
      rgba(0,0,0,0.08) 28%,
      rgba(0,0,0,0.08) 55%,
      rgba(0,0,0,0.70) 100%);
    pointer-events: none;
  }

  /* Titel gross oben links */
  .newsflash-title {
    position: absolute !important;
    top: 36px !important;
    left: 26px !important;
    right: 26px !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 3;
  }
  .newsflash-title a {
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 30px;
    line-height: 1.1;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45);
    text-decoration: none;
  }

  /* Beschreibungstext aus, nur „Mehr erfahren"-Button bleibt. */
  .packages-vorschau {
    display: block !important;
    position: absolute !important;
    inset: auto !important;
    left: 26px !important;
    bottom: 36px !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    z-index: 3;
  }
  .vorschau-inhalt { background: transparent !important; padding: 0 !important; }
  .vorschau-inhalt p:not(:has(a)) { display: none !important; }
  .vorschau-inhalt p:has(a)       { margin: 0 !important; }

  .vorschau-inhalt p a {
    display: inline-block;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #fff !important;
    background: transparent;
    border: 1px solid #fff;
    padding: 11px 20px;
    text-decoration: none;
    transition: background-color 500ms ease-out,
                color 500ms ease-out;
  }
  .vorschau-inhalt p a:hover,
  .vorschau-inhalt p a:focus {
    background: #fff;
    color: #838078 !important;
  }

  /* Tap-Routing:
     Die KOMPLETTE Wrapper-Kette der Bereiche-Karten ist tap-
     transparent (newsflash, item, pin-spacer, content-wrapper,
     content, mouseover-packages, Bild). Nur die echten Link-
     Elemente — Titel und „Mehr erfahren"-Button — fangen Taps.
     So schluckt kein Wrapper-Layer einen Klick, auch wenn es
     beim Scrollen über die Vorgängerkarte schiebt. */
  .mod-articlesnews.newsflash,
  .mod-articlesnews__item,
  .newsflash .pin-spacer,
  .content-wrapper,
  .content,
  .mouseover-packages,
  .newsflash-image,
  .newsflash-image img {
    pointer-events: none;
  }
  .newsflash-title,
  .newsflash-title a,
  .packages-vorschau,
  .packages-vorschau a,
  .vorschau-inhalt a {
    pointer-events: auto;
  }
}


.readmore{
  padding: 0px !important;
  border: none !important;
}