@charset "utf-8";
/* CSS Document */

/*
/////// PLAYFAIR
font-family: playfair-display, serif;
font-weight: 400;
font-style: normal;

font-family: playfair-display, serif;
font-weight: 700;
font-style: normal;

/////// SOURCE SANS PRO
LIGHT
font-family: source-sans-pro, sans-serif;
font-weight: 300;
font-style: normal;
REGULAR
font-family: source-sans-pro, sans-serif;
font-weight: 400;
font-style: normal;
SEMIBOLD
font-family: source-sans-pro, sans-serif;
font-weight: 600;
font-style: normal;


/////// SIX HANDS BRUSH
font-family: six-hands-brush, sans-serif;
font-weight: 400;
font-style: normal;
*/

:root {

	--main-template-width: 100%;
	--header-template-maxwidth: 1090px;
	--main-template-maxwidth: 1720px;

  --main-font: Arial, Helvetica, sans-serif;
  --main-font-color: #2B2B2B;
	--main-font-color-opposite: #fff;
	--font-size-1: 36px; /* NOTE: h1 playfair */
	--font-size-2: 18px;
	--font-size-3: 15px;
	--font-size-4: 28px; /* NOTE: footer */
	--font-size-5: 24px; /* NOTE: für playfair in speisekarte - playfair kommt sonst nur in h1 vor, somit kann ich noch eine zwei grösse definieren */
	--line-height-1: 1.6;

	--text-shadow: 0px 3px 6px #000;

  /* NOTE: playfair */
  --font1: playfair-display, serif;
  --font1-weight1: 400;
  --font1-weight2: 700;

  /* NOTE: source sans pro -> light, regular, semibold */
  --font2: source-sans-pro, sans-serif;
	--font2-weight1: 300;
  --font2-weight2: 400;
  --font2-weight3: 600;

  /* NOTE: six hands brush */
  --font3: six-hands-brush, sans-serif;;
  --font-weight1: 400;

	/* NOTE: nav */
	--font-size-nav: 30px;
}

/*
@media only screen and (max-width: 000px) {}
@media only screen and (max-height: 000px) {}
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;

	box-sizing:border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

img { height: auto; max-width: 100%}

@font-face {
    font-display: swap;
}

html, body { height: 100%; }

body {

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	font-family: var(--main-font);
	font-size: var(--font-size-3);
	font-weight:normal;
	color: var(--main-font-color);
}

h1 {
	font-family: var(--font1);
	font-weight: var(--font1-weight1);
	font-size: var(--font-size-1);
	margin: 10px 0 15px 0;
	color: var(--main-font-color);
}

h2 {
	font-family: var(--font2);
	font-size: var(--font-size-2);
	font-weight: var(--font2-weight1);
	color: var(--main-font-color);
	margin: 0 0 0 0;
	line-height: 1.6;
	line-height: var(--line-height-1);

	/* color: green !important; */
}
/*
h3 {
	font-family: var(--main-font);
	font-size: var(--font-size-3);
	font-weight:normal;
	color: var(--main-font-color);
	margin: 0 0 0 0;
} */

#startseite h1 {
  font-family: var(--font3);
	font-weight:normal;
	font-size: 150px;
	margin: 0 0 0 0;
	color: var(--main-font-color-opposite);
}

#startseite h2 {
	font-family: var(--font2);
	font-size: 53px;
	font-weight: normal;
	color: #fff;
	margin: 0 0 0 0;
	text-shadow: var(--text-shadow);
}

/* NOTE: ein drittel kleiner */
@media only screen and (max-width: 960px) {
	#startseite h1 {
		font-size: 100px;
		line-height: 1;
	}

	#startseite h2 {
		font-size: 35px;
	}
}


a {
	-webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	-ms-transition: all 0.1s linear;
	transition: all 0.1s linear;

	color: var(--main-font-color);
	text-decoration: none;
}

section a {
	text-decoration: underline;
}

strong { font-weight: var(--font2-weight2)}
strong.footer { font-weight: var(--font2-weight3)}
cite { font-style: italic;}

a:hover {
	text-decoration: none;
}



/*--------------------------------------------------------------------------------------------*/
/*HEADER + NAV*/

header, .logo img, .button_container-height, nav ul {
    transition: all 0.4s ease;
}

header {
    width: var(--main-template-width);
    height: auto;
	position: relative;
	z-index: 999999;
}

.home header {
	position: fixed;
}

header.shrink {
    height: 90px;
	background: #fff;
}

header .centered {
	margin: 0px auto;
	width: var(--main-template-width);
	max-width: var(--header-template-maxwidth);
	padding: 0 !important;
}

.logo {
    float: left;
	margin-right: 20px;
}

.logo img {
	height: 117px;
}

.logo img.shrink {
    height: 80px;
	margin-right: 50px;
}

nav ul { list-style-type: none; text-align: justify; }

nav li { list-style: none; display: inline; }

nav {
	font-family: var(--font2);
	font-size: var(--font-size-nav);
	font-weight:normal;
	/*text-shadow: var(--text-shadow);*/
}

nav.shrink {
	text-shadow: none;
	font-size: var(--font-size-5);
}

nav ul {
	padding-top: 5px;
}

nav ul.shrink {
	padding-top: 0;
}

.home nav a {
	color: #fff;
	text-shadow: var(--text-shadow);
}

nav a.shrink {
	color: #2b2b2b;
}

nav a:hover {
	border-bottom: 3px solid #fff;
}

nav.navmenu {
	width: 800px;
	float: right;
	position: relative;
	z-index: 999;
}


.klammer {
	visibility: hidden;
	margin-left: -12px;
}

@media only screen and (max-width: 960px) {

	header.shrink {
		background: transparent;
	}

	nav.head {
		display: none;
	}
	.logo {
    	float: none;
		text-align: center;
		margin-right: 0;
	}

	.logo img.shrink {
		margin-right: 0;
	}

	
	nav.shrink {
		text-shadow: var(--text-shadow);
		font-size: var(--font-size-nav);
	}



	nav.navmenu {
		float: left;
		font-family: var(--font2);
		font-size: var(--font-size-2);
		font-weight: var(--font2-weight2);
	}

	nav.navmenu li {
		float: left;
		width: 100%;
		margin-bottom: 10px;
		text-align: left;
	}


	.klammer {
		margin-left: 0;
		visibility: visible;
	}

	nav a:hover {
		border-bottom: 0px;
	}

	nav a.shrink {
		color: #fff;
	}


}


/* NOTE: nav res */

@media only screen and (max-width: 960px) {


    .navheight {display: none;}

    .button_container-height.open {display: none;}

    nav {
        padding-top: 30px;
    }

    nav li {
        width: 100%;
        text-align: center;
        position: relative;
    }


    .open nav li {
        animation: fadeInRight .5s ease forwards;
        animation-delay: .35s;

        /* left: 40%; */
        opacity: 0;
    }

    .open nav li:nth-of-type(2) {
        animation-delay: .4s;
    }

    .open nav li:nth-of-type(3) {
        animation-delay: .45s;
    }

    .open nav li:nth-of-type(4) {
        animation-delay: .5s;
    }

    .open nav li:nth-of-type(5) {
        animation-delay: .55s;
    }

    @keyframes fadeInRight {
        0% {
            opacity: 0;
            left: 40%;
        }
        100% {
            opacity: 1;
            left: 0;
        }
    }

    .overlay {
        width: 100%;
        float: none;
    }

    .button_container, .closebtn {
        display: block;
    }

    .open {
        height: 100vh !important;
    }

    .overlay {
        height: 0;
        width: 100%;
        position: fixed;
        z-index: 99999;
        left: 0;
        top: 0;
        background-color: rgba(43,43,43,0.9);
        overflow-x: hidden;
        transition: 0.5s;
    }

    .overlay-content {
        position: relative;
        top: 100px;
        width: 100%;
        text-align: center;
    }

    .overlay a {
        text-decoration: none;
        color: #fff;
        display: block;
        transition: 0.3s;
        margin-bottom: 30px;
        /* font-size: 23px; */
    }

    .overlay .closebtn {
        position: absolute;
        top: 20px;
        /* right: 45px; */
    }

	.home .button_container {
        position: relative;
        /*top: 50px;*/
				transform: translateX(-50%);
		    left: 50%;
        height: auto;
        width: 80px;
        cursor: pointer;
        z-index: 99999;
        transition: opacity .25s ease;
        cursor: pointer;
				/* position: fixed; */
    }

	.button_container {
		position: relative;
		top: 30px;
		transform: translateX(-50%);
		right: 10px;
		height: auto;
		width: 50px;
		cursor: pointer;
		z-index: 99999;
		transition: opacity .25s ease;
		cursor: pointer;
		position: fixed;
	}


    .button_container-height {
        height: 30px;
    }

    .button_container-height.shrink {
        height: 15px;
    }

    .button_container.active {
        top: 30px;
				left: 90%;
        width: 35px;
				position: fixed;
    }

    .button_container span:nth-of-type(2) {
        top: 13px;
    }

    .button_container span:nth-of-type(3) {
        top: 27px;
    }

    .button_container:hover {
        opacity: .7;
    }


	.home .button_container span {
        background: #fff;
        border: none;
        height: 6px;
        width: 100%;
        position: absolute;
        /*top: 0;*/
        left: 0;
        transition:  all .35s ease;
        cursor: pointer;
    }

	 .button_container span {
		 background: #2b2b2b;
		 border: none;
		 height: 6px;
		 width: 100%;
		 position: absolute;
		 /* top: 0; */
		 left: 0;
		 transition: all .35s ease;
		 cursor: pointer;
	 }


    .button_container.active .top {
        transform: translateY(12px) translateX(0) rotate(45deg);
    }
    .button_container.active .middle {
        opacity: 0;
    }

    .button_container.active .bottom {
        transform: translateY(-15px) translateX(0) rotate(-45deg);
    }

    .button_container.active span {
        background: #fff;
    }
}

/* NOTE: nav speisekarte */

@media only screen and (max-width: 960px) {

	#speisekarte nav {
			padding-top: 0;
			margin-bottom: 30px;
	}

	#speisekarte nav ul {
			padding-top: 0;
	}

	#speisekarte .zwei_spalten:last-of-type {
		padding-bottom: 50px;
		margin-bottom: 50px;
	}
}



/*--------------------------------------------------------------------------------------------*/
/*HAUPTTEMPLATE*/

/* NOTE: vorlage */


.thema {
  width: var(--main-template-width);
  height: 100%;
  /* min-height: 100%; */
	float: left;

  background-color: #fff;
}

#speisekarte.thema {
	height: auto;
	min-height: 100%;
	padding-bottom: 80px;
}

@media only screen and (max-width: 780px) {
	#speisekarte.thema {
		padding-bottom: 0;
	}
}

@media only screen and (max-height: 870px) {
	.thema {
		height: auto;
		padding: 10% 0;
	}
}

@media only screen and (max-width: 620px) {
	.thema {
		padding-top: 120px;
		height: auto;
	}
}



#startseite.thema {
  /* background: url('../image/hg-startseite.jpg') no-repeat bottom center ; */
  -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
}

#speisekarte.thema {
  background: url('../image/hg-speisekarte.jpg') no-repeat bottom center /*fixed*/;
  -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
}

@media only screen and (max-width: 780px) {
	#speisekarte.thema {
	  background: var(--main-font-color);
		/* background: white; */
	}

}


#wandern.thema {
  background: url('../image/hg-wandern.jpg') no-repeat bottom center /*fixed*/;
  -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
}

.centered {
	margin: 0px auto;
	width: var(--main-template-width);
	max-width: var(--main-template-maxwidth);
	height: 100%;
	width: 100%;
	/* padding: 0 7%; */
	/* background: green; */
	position:relative;
	z-index: 999;
}




#hotel-gasthof .centered {
	/* margin-top: -200px; */
}


/* startseite */
.center {
		padding-top: 17vh;
		width: 100%;
		text-align: center;
}



/*--------------------------------------------------------------------------------------------*/
/*INHALTE SEITEN*/

/* NOTE: spalten / flex */
.spalten {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 100%;
}

.spalte {
	flex-basis: 25%;
	margin: 0 2%;
	height: 620px;
}

.hotel .spalte {
		height: 670px;
}


.startseite-weiss {
	height: 250px;
}

/* NOTE: startseite */
.trenner-berge-01, .trenner-berge-02, .startseite-berge {
	position: relative;

}

.trenner-berge-01, .trenner-berge-02, .startseite-berge {
	/* top: -9.5%; */
	margin-top: -7%;
	margin-bottom: -2px;
}

.startseite-berge {
	margin-top: -10.5%;
}

/* @media only screen and (max-width: 780px) {
	.trenner-berge-01 {
		margin-top: -7%;
	}
} */



/* NOTE: restaurant */


.thema-img-res {display: none;}
@media only screen and (max-width: 620px) {
	.thema-img-res {
		display: block;
		width: 100%;
	}
}



/* NOTE: speisekarte */

#speisekarte .trenner-berge-01 {
	/* top: 5px; */
}

.menu {
		width: 100%;
		padding-top: 150px;


		/* position: relative;
    transform: translateX(-50%);
    left: 50%; */
}

.zwei_spalten {
	width: 50%;
	float: left;
}

.menu h1, .menu h2 {
	color: var(--main-font-color-opposite);
}

.menu_out {
	width: 100%;
	display: flex;
	flex-direction: row;
	float: left;

	color: black;
	/* background: #ccc; */
}

.menu_out_spalten {
	/* flex-basis: 25%; */
	/* margin: 0 2%; */
	/* flex-grow: 1; */
}


/* NOTE: NOCH ANPASSEN, DAS SKRIPT ENTSPRECHENDE BREITE FÜR SPEISEKARTE ERKENNT */


/* NOTE: karten speisekarte, banket */
.menu_out_spalten:nth-child(1) {
	width: 60%;
}

.menu_out_spalten:nth-child(2) {
	width: 1%;
}


/* NOTE: weinkarte */
.menu_out_spalten.weinkarte:nth-child(1) {
	width: 60%;
	padding-right: 5%;
}

.menu_out_spalten.weinkarte:nth-child(2) {
	width: 15%;
}


@media only screen and (max-width: 1330px) {
	.menu_out_spalten.weinkarte:nth-child(1) {
		width: 60%;
	}
	
	.menu_out_spalten.weinkarte:nth-child(2) {
		width: 20%;
	}
}

@media only screen and (max-width: 1040px) {
	.menu_out_spalten.weinkarte:nth-child(1) {
		width: 50%;
	}
	
	.menu_out_spalten.weinkarte:nth-child(2) {
		width: 25%;
	}
}

@media only screen and (max-width: 500px) {
	.menu_out_spalten.weinkarte:nth-child(1) {
		width: 50%;
	}
	
	.menu_out_spalten.weinkarte:nth-child(2) {
		width: 30%;
		padding-right: 5%;
	}

	.menu_out_spalten.weinkarte:nth-child(3) {
		width: 15%;
	}
}


/* NOTE: für wochenmenü */
.menu_out_spalten.wochenmenu:nth-child(1) {
	width: 20%;
}

.menu_out_spalten.wochenmenu:nth-child(2) {
	width: 70%;
	padding-right: 5%;
}


/* NOTE: für speisekarte */
.menu_out_spalten.speisekarte:nth-child(1) {
	width: 60%;
	margin-bottom: 10px;
}

.menu_out_spalten.speisekarte:nth-child(2) {
	width: 20%;
	padding-right: 5%;
}






/*
.menu_out_spalten.weinkarte:nth-child(1),
.menu_out_spalten.speisekarte:nth-child(1),
.menu_out_spalten.banket:nth-child(1)
{
	max-width: none;
}

.menu_out_spalten.weinkarte:nth-child(2),
.menu_out_spalten.speisekarte:nth-child(2),
.menu_out_spalten.banket:nth-child(2)
{
	max-width: 100px;
}
 */


.menu_out_spalten_haupttitel,
.menu_out_spalten_titel
{
	width: 100%;
	float: left;
	/* background: red; */
	/* background: #ccc; */
}

/* NOTE: HAUPTTITEL */
.menu_out_spalten_haupttitel {
	font-family: var(--font1);
	font-size: var(--font-size-1);
	font-weight: var(--font1-weight1);
	color: var(--main-font-color-opposite);
	margin: 100px 0 30px 0;
}

/* NOTE: erster titel nach haupttitel speisekarte aus nav */
/* NOTE: für abstand 1. titel zu erstem 2. titel */
.menu_out_spalten_haupttitel:first-of-type {
	margin: 40px 0 40px 0;
}


/* NOTE: TITEL */
.menu_out_spalten_titel {
	font-family: var(--font1);
	font-size: var(--font-size-5);
	font-weight: var(--font1-weight1);
	color: var(--main-font-color-opposite);
	margin: 50px 0 15px 0;
}

.menu_out_spalten_titel.wochenmenu {
	font-weight: var(--font1-weight2);
	margin: 20px 0 15px 0;
}

/* NOTE: erster titel nach haupttitel speisekarte aus nav */
/* NOTE: für abstand 1. titel zu erstem 2. titel */
/* NOTE: funktioniert nur bei wochenmenü, vermutlich will kein haupttitel kommt */
.menu_out_spalten_titel:first-of-type {
	margin: 10px 0 10px 0;
}

/* NOTE: für restliche menükarten (ausser wochenmenü) */
.menu_out_spalten_titel:nth-child(3) {
	margin: 30px 0 10px 0;
}

.chf {
	float: right;

	font-family: var(--font2);
	font-size: var(--font-size-2);
	font-weight: var(--font2-weight2);
	color: var(--main-font-color-opposite);
}

.wochenmenu.chf {
	padding-right: 6%;
}
.weinkarte.chf {
	padding-right: 10%;
}
.speisekarte.chf {
	padding-right: 10%;
}
.banket.chf {
	padding-right: 35%;
}




/* NOTE: AUSGABE TEXT */
.menu_out_spalten {
	font-family: var(--font2);
	font-size: var(--font-size-2);
	font-weight: var(--font2-weight2);
	color: var(--main-font-color-opposite);
}




/* NOTE: abstände von text zu nächster text zeile */
.menu_out {
	padding-bottom: 5px;
}

/* NOTE: für weine mehr padding bottom */
.menu_out.weinkarte {
	padding-bottom: 20px;

	/* background: green; */
}

.menu_out.weinkarte:last-child {
	/* background: green;
	height: 20px; */
}


/* TEMP: KANN ZEILE NICHT ANSPRECHEN */
.menu_out.weinkarte:first-of-type {
	padding-bottom: 20px;
	background: red;
}


.img_end {display: none;}
@media only screen and (max-width: 780px) {

	/* .menu_out_spalten_haupttitel, .menu_out_spalten_titel, .menu_out_spalten_titel.wochenmenu, .chf, .menu_out_spalten {
		color: var(--main-font-color);
	} */

	.zwei_spalten {
		width: 100%;
	}

	.img_end {
		display: block;
		width: 100%;
	}
}



/* NOTE: hotel */



/* NOTE: drittes bild ab gewieser breite deaktivieren + spalten anpassen */
@media only screen and (max-width: 1530px) {
	.img3 {
		display: none;
	}
	.spalte {
		flex-basis: 33%;
	}
}

@media only screen and (max-width: 1050px) {
	.img3, .img2 {
		display: none;
	}
	.spalte {
		flex-basis: 50%;
	}
}

@media only screen and (max-width: 620px) {
	.img3, .img2, .img1 {
		/*display: none;*/
	}
	.spalten {
		flex-direction: column;
	}
	.spalte {
		flex-basis: 100%;
		float: left;
		width: 100%;
	}
	.spalte.text {
		order: 1;
	}
}


/* NOTE: wandern geniesen und entspannen */
#wandern {
	position: relative;
}

.inhalt-entspannen {
	width: 200%;
	float: left;
	padding-left: 160%;
	margin: 200px 30px 0 -160%;
	background: #fff;
	padding-top: 80px;
	padding-bottom: 100px;
	padding-right: 120px;
}

.wander-vorschlaege {
	/* float: right; */
	bottom: 0;
	position: absolute;
	left: 60%;
}

.wander-vorschlaege h1 {
	color: var(--main-font-color-opposite);
	text-shadow: var(--text-shadow);
	margin-bottom: 20px;
}

.wanderung {
	width: 300px;
	height: 500px;
	background: var(--main-font-color-opposite);
	float: left;
}

.wanderung img {
	margin-bottom: 10px;
}

.wanderung h2 {
	line-height: 1.4;
	padding: 0 15px;
}

.wanderung:first-of-type {
	margin-right: 10px;
}


@media only screen and (max-width: 1600px) {
	.wander-vorschlaege {
		left: 50%;
	}
}

@media only screen and (max-width: 1260px) {
	.wander-vorschlaege {
		left: 45%;
	}

	.inhalt-entspannen {
		margin-top: 0;
	}
}

@media only screen and (max-width: 1160px) {
	.inhalt-entspannen {
		width: 230%;
		margin-bottom: 7%;
	}

	.wander-vorschlaege {
		left: 30%;
	}
}

@media only screen and (max-width: 920px) {
	.wander-vorschlaege {
		left: 0%;
	}
}


@media only screen and (max-width: 780px) {

	#wandern.thema {
	  background: var(--main-font-color);
		padding: 7% 0 15% 0;
		height: auto;
	}

	.inhalt-entspannen h1, .inhalt-entspannen h2 {
		color: var(--main-font-color-opposite);
	}

	.inhalt-entspannen {
		width: auto;
		background: transparent;
		padding-left: 0;
		margin: 0;
		padding: 0;

		margin-bottom: 7%;
	}

	.wander-vorschlaege {
		/* left: 3%; */
		position: relative;
		float: left;
	}

	.wanderung {
		height: auto;
		margin-bottom: 30px;
		padding-bottom: 30px;
	}
}


/*--------------------------------------------------------------------------------------------*/
/*FOOTER + FUNKTIONEN*/



footer {
		background: var(--main-font-color);
		color: var(--main-font-color-opposite);
		font-family: var(--font2);
		font-weight: var(--font2-weight1);
		font-size: var(--font-size-2);
		line-height: var(--line-height-1);
		width: 100%;
}

footer a {
	color: #FFF;
}

.footer-berge {
		margin-top: -7%;
		z-index: 999;
		position: relative;
		float: left;
}

footer .centered {
	display: flex;
	flex-direction: row;
	padding: 0 0 100px 0;
	flex-wrap: wrap;
}

footer .info {
	/* flex-basis: 25%; */
	flex-grow: 1;
	width: 25%;
}

footer .info:first-child {
		padding-right: 10%
}

footer .info:last-child {
	width: 7%;
}

@media only screen and (max-width: 1270px) {
	footer .info:last-child {
		width: 10%;
	}
}
@media only screen and (max-width: 1170px) {
	footer .info:last-child {
		width: 13%;
	}
}



/* NOTE: text formatierung */
footer .info span.titel {
	width: 100%;
	font-family: var(--font2);
	font-weight: var(--font2-weight3);
	font-size: var(--font-size-4);
	float: left;
}

footer .info .trenner {
		width: 100%;
		height: 20px;
}


/* NOTE: nav footer */
/* NOTE: für schrift selbes css wie footer selber */
footer .info nav {
	text-shadow: none;

	font-family: var(--font2);
	font-weight: var(--font2-weight1);
	font-size: var(--font-size-2);
	line-height: var(--line-height-1);
}

footer .info nav ul {
	padding: 0;
}

footer .info nav li {
	/* width: 100%; */
	display: block;
}

@media only screen and (max-width: 1300px) {
	footer .info,
	footer .info:last-child
	{
		width: 50%;
		margin-bottom: 30px;
	}

	footer .info:first-child {
		padding: 0;
		padding-right: 5%;
	}
}

@media only screen and (max-width: 600px) {
	footer .info,
	footer .info:last-child
	{
		width: 100%;
	}
}



/* NOTE: maps */
.maps iframe {
		width: 100%;
		height: 30vh;
}

#map {
	height: 450px;
	width: 100%;
	float: left;
}



@media only screen and (max-width: 1780px) {
	.centered, footer .centered {
		padding: 0 3%;
		padding-top: 50px;
		padding-bottom: 50px
	}

	#restaurant .centered,
	#hotel-gasthof .centered,
	#ueber-uns .centered {
		padding: 0;
	}
}

@media only screen and (max-width: 960px) {

  footer nav li {
      text-align: left;
  }
}

@media only screen and (max-width: 620px) {
	#restaurant .centered,
	#hotel-gasthof .centered,
	#ueber-uns .centered {
 		padding: 7% 3% 15% 3%;
	}
}












/*--------------------------------------------------------------------------------------------*/
/* Bilder Karusell */


/* verdeckt überlappende bilder */
.container-karusell > div:first-child {
	overflow: hidden;
	max-width: 100%;
	margin: 0;
}



/* li */
.animation {
	transition-duration: .7s;
	transition-property: transform;
	transition-timing-function: ease-in-out;
}

/* li */
.eff {
	list-style: none;
	position: relative;
	float: left;
	transform: translateX(-361px)
}




/* 
... von animate
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-o-transition-duration: .5s;

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
*/






/*--------------------------------------------------------------------------------------------*/
/*PAGE UP*/
#back-top {
	position: fixed;
	bottom: 30px;
	z-index: 999;
	right: 5px;
}
#back-top a {
	width: 80px;
	display: block;
	text-align: center;
	font: 11px/100% var(--main-font);
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;

	float: right;
	margin: 0 30px 0 0;
}
#back-top a:hover {
	color: #000;
}

/* arrow icon (span tag) */
#back-top span {
	width: 80px;
	height: 80px;
	display: block;
	margin-bottom: 7px;
	background:url("../image/up-arrow.svg") no-repeat center center;
}
#back-top a:hover span {}

/* FORM CSS*/

.form-label {
    position: absolute;
    left: 0;
    top: 10px;
    color: #999;
    z-index: 10;
    transition: transform 150ms ease-out, font-size 150ms ease-out;
    pointer-events: none;

    padding-left: 20px;
    font-family: roboto, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--font-size-2);
}

input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], textarea, select {
	font-family: var(--main-font);
	background-color:#fff;
	border: 1px solid #ccc;
	/* Textfarbe inaktiv */
	color: var(--main-font-color);
	font-weight: normal;
	font-size: var(--font-size-3);
	padding: 5px;
	width: 400px
}

/*select arrow*/
select {
    background: transparent;
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none; /* Removes Default Firefox style*/
    max-width: 710px;
    width: 105%;
    margin: 0;
}

.styled-select {
    overflow: hidden;
    background: url("../index.html") no-repeat right #fff;
    margin: 0 0 10px 0;
}
/*select arrow end*/

input[type="text"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="tel"]:hover, textarea:hover, select:hover {
	background-color:#fff;
	border: 1px solid #26B7CD;
	color:#26B7CD;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="tel"]:focus, textarea:focus, select:focus {
	background-color:#fff;
	border: 1px solid #26B7CD;
	/* Textfarbe aktiv */
	color: var(--main-font-color);
}

/*platzhalter starttext*/
::-webkit-input-placeholder { color:#F3EDC3; }
::-moz-placeholder { color:#F3EDC3; } /* firefox 19+ */
:-ms-input-placeholder { color:#F3EDC3; } /* ie */
input:-moz-placeholder { color:#F3EDC3; }
/*vorlage html placeholder*/
/*
bei klick in feld verschwindet placeholder
<input name="test" id="test" placeholder="text_test" {literal}onfocus="if(placeholder == 'text_test'){placeholder=''};" onblur="if(placeholder== ''){placeholder='text_test'}"{/literal}>
*/

/*placeholder animation*/
.form-group {
  position:relative;

  & + .form-group {
    margin-top: 30px;
  }
}

.focused .form-label {
  transform: translateY(-125%);
  font-size: .75em;
}

input.send {
	border:1px solid #ccc;
	background-color: #26B7CD;
	width: 90px;
	height: 30px;
	color: #FFF;
	margin-bottom: 20px;
}

/*SUBMIT FELD - NEU VON BENZIN-PREIS (braucht kein style mehr)*/
/*
input[type="submit"] {
    border: 0px;
    background-color: #fff;
    height: 40px;
    margin-bottom: 25px;
    font-family:'sertigregular',Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size:25px;
    text-transform: uppercase;
    color: #2C728D;
    background: url("../index.html") no-repeat right #fff;
    line-height: none;
    padding: 3px 50px 0 10px;
}

input[type="submit"]:active {
    position:relative;
    top:1px;
}
*/

#false_input {
	border: 1px solid #F00;
}

.notice {
	font-family: var(--main-font);
	border:1px solid gold;
	background:lightyellow;
	padding:10px 10px 10px 10px;
	margin:5px 0;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	color:#DEAE00;
	line-height:120%;
	width: 390px;
	vertical-align: center;
	text-shadow:0px 1px rgba(255,255,255,0.5);
	position:relative;
	top:0;
	left:0;
	clear:both;
	font-size: var(--font-size-3);
}

.notice.warning{}/*default*/
.notice.error{border:1px solid red;background:pink;color:red;}
.notice.success{border:1px solid #060;background:#94C01F;color: #060;}
.notice .icon{color:inherit;margin-right:10px;margin-bottom:-5px;*margin-top:-5px;}
.notice a.icon.close,
.notice a.icon.close:active,
.notice a.icon.close:visited{position:absolute;top:5px;right:-5px;left:auto;color:inherit;}

.verweis {
    height: 1px;
    padding: 0;
    visibility: hidden;
}











/* Dropdown-Container */
ul.main-menu {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

ul.main-menu > li {
	position: relative;
	display: inline-block;
	padding: 40px 15px;
}

ul.main-menu.shrink > li {
	position: relative;
	display: inline-block;
	padding: 20px 15px;
}

/* Dropdown-Inhalt */
ul.dropdown-content {
	display: none;
	position: absolute;
	background-color: #fff;
	width: 270px;
	z-index: 1000;
	box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

@media only screen and (max-width: 960px) {
	ul.dropdown-content {
		display: none;
		position: relative;
		background-color: #fff;
		width: 100%;
		z-index: 1000;
		box-shadow: 0 8px 16px rgba(0,0,0,0.2);
	}
}

ul.dropdown-content li {
	display: block;
}

ul.dropdown-content li a {
	display: block;
	padding: 10px;
	color: #333;
	text-decoration: none;
}

ul.dropdown-content li a:hover {
	background-color: #f2f2f2;
}

/* Hover-Anzeige */
li.dropdown:hover .dropdown-content {
	display: block;
}

/* Optional: Pfeil nach unten */
.dropbtn::after {
	content: " ▼";
	font-size: 0.7em;
}