@font-face {
  font-family: 'UnifrakturMaguntia';
  font-style: normal;
  font-weight: 400;
  src: local('UnifrakturMaguntia'), url(UnifrakturMaguntia.woff) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body{
	background-color: #f9e7c3;
}

.responsive_map {
    position: relative;
    overflow: hidden;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
}

.responsive_map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.kopf {
	position: relative;
	margin-bottom: 0px;
}

.kopf-banner img {
	width: 100%;
	border-radius: 0px 0px 10px 10px;
}

.slider {
	position: absolute;
	bottom: -41px;
	width: 50%;
	right: 30px;
}

.infobox {
	margin-top: 20px;
	left: 0px;
	right: 0px;
	margin: 0px auto 70px auto;
}

.infobox h2 {
	font-size: 1.8em;
	text-align: center;
}

.infobox p {
	font-size: 1em;
	text-align: center;
}

.container-content a:hover {
	color: #022648;
}

.fuss {
	position: fixed;
	z-index: 100;
	bottom: 0;
	height: 45px;
	width: 100%;
	background: #022648 no-repeat bottom center;
}

.w960fuss {

	left: 0px;
	right: 0px;
	margin: 0 auto;
	padding-top: 10px;
	padding-left: 0px;
	color: #ffffff;
	text-align: center;
	font-size: 0.9em;
}

.content {
	margin-left: 10px;
	margin-bottom: 100px;
	text-align: left;
}

.container-content {
	margin-top: 120px;
}

.content h1{
	font-size: 2.5em;
}

.content p{
	margin: 0px 5px 0px 5px;
	font-size: 1em;
}

.navi {
	position: relative;
	margin-top: -200px;
	width: 495px;
	height: 100px;
	float: right;
	z-index: 300;
	font-size: 0.5em;
}

.navi ul {
	list-style: none;
}

.navi ul li {
	float: left;
	margin-right: 20px;
	display: inline-block;
	line-height: 115px;
	vertical-align: bottom;
}

.navi ul li a {
	text-decoration: none;
	color: #ffffff;
	display: inline-block;
	font-size: 1.2em;
}

.navi ul li a:hover {
	color: #c98f46;
	background: url(../index/posthorn.png) no-repeat top center;
	background-position: top;
}

/* ========== Dropdown-Menü unter "Zimmer" ========== */

.navi ul li {
  position: relative;
}

.navi ul li ul.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #022648;
  padding: 0;
  margin: 0;
  min-width: 150px;
  z-index: 999;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.navi ul li:hover ul.dropdown {
  display: block;
}

.navi ul li ul.dropdown li {
  float: none;
  display: block;
  margin: 0;
  line-height: 40px;
  text-align: center;
}

.navi ul li ul.dropdown li a {
  display: block;
  padding: 8px 15px;
  background-color: #022648;
  color: white;
  font-size: 1em;
  text-decoration: none;
  white-space: nowrap;
}

.navi ul li ul.dropdown li a:hover {
  background-color: #c98f46;
  color: #022648;
}

/* ========== Mobil: Dropdown als klickbarer Block oder sichtbar machen ========== */

@media (max-width: 575px) {
  .navi ul li {
    float: none;
    text-align: center;
  }

  .navi ul li ul.dropdown {
    position: static;
    transform: none;
    left: auto;
    background-color: #022648;
    box-shadow: none;
  }

  .navi ul li:hover ul.dropdown {
    display: block;
  }

  .navi ul li ul.dropdown li {
    display: block;
  }

  .navi ul li ul.dropdown li a {
    padding: 10px;
  }
}

/* Bootstrap-Dropdown dunkler gestalten */
/* Dropdown-Menü-Stil */
.dropdown-menu {
  background-color: #022648;
  border: none;
  border-radius: 0 0 5px 5px;
  padding: 0;
  min-width: 200px;
  margin-top: 0;
}

.dropdown-menu .dropdown-item {
  color: #fff;
  padding: 10px 20px;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #c98f46;
  color: #022648;
}


.link {
    text-decoration: underline;
    color: #965F3B;
}

.implink {
    text-decoration: none;
    color: #ffffff;
}

.contentboxli {
	background: url(../images/box_bg.jpg) no-repeat top center;
	padding: 30px;
	text-align: center;
	width: 227px;
	height: 270px;
	margin: 5px auto;
}

.contentboxre {
	 background: url(../images/box_bg2.jpg) no-repeat center top;
	 padding: 30px;
	 text-align: center;
	 width: 235px;
	 height: 270px;
	 margin: 5px auto;
 }

.contentbox-li-re-text {
	margin-top: 160px;
	font-size: 0.8em;
}

h1 {
	font-family: UnifrakturMaguntia, arial;
}

h2 {
	font-family: UnifrakturMaguntia, arial;
	margin-top: 30px;
	margin-bottom: 20px;

}

h3 { 
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

/*<agl.folder "Formular ">*/



input {
	border: solid 1px #c19f85;
}

textarea {
	width: 360px;
	border: solid 1px #c19f85;
}

.buchungsanfrage {
	height: 350px;
	margin-top: 20px;
	padding: 10px;
}

.buchungsanfrage input {
	margin: 5px 0px;

}

/*</agl.folder>*/
.hidden {
	width: 0;
	height: 0;
	visibility: hidden;
	margin: 0;
	padding: 0;
	border-width: 0;
}

#content3 {
	color: #b22222;
	font-size: 15px;
	font-weight: bold;
	background-color: #c1c1c1;
	padding: 10px;
	border: solid 1px;
}

.contentimg {
	margin: 10px;
	border: 5px solid #ffffff;
	webkit-box-shadow: 0px 0px 5px 1px rgba(00, 00, 00, 0.1);
	box-shadow: 0px 0px 5px 1px rgba(00, 00, 00, 0.3);
}

.navbar{
	position: static;
	margin-top: -72px;
	margin-bottom: 25px;
	border-radius: 5px;
}

.navbar-nav li {
	text-align: center;
}

.navbar-light .navbar-nav .nav-link {
	color: white;
	background-color: #08315d;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
	color: white;
	background-color: #083b70;
	border-bottom: black;
}

#nav-link-oben {
	border-radius: 5px 5px 0px 0px;
	margin-top: 5px;
	padding-top: 30px;
	border-top-style: double;
}



#nav-link-unten {
	border-radius: 0px 0px 5px 5px;
	padding-bottom: 30px;
	border-bottom-style: double;
}

.div-center {
	text-align: center;
}

.header-background {
	background: #022648;
}

.buchungsanfrage-container {
	width: 365px;
	margin: auto;
}

.buchungsanfrage-container h1{
	text-align: center;
}


@media (max-width: 575px) {

	.w960fuss {
		text-align: center;
		font-size: 0.6em;
	}

	.fuss {
		height: 65px;
	}

	.infobox {
		margin: 0px auto 80px auto;
	}

	.slider {
		bottom: -34px;
		width: 69%;
		right: -7px;
	}

	.content {
		margin-left: 0 px;
		margin-bottom: 20px;
		text-align: center;
	}

	.navi {
		visibility: hidden;
	}

	p{
		text-align: center;
	}

	h1{
		text-align: center;
	}

	.img-fluid {
		width: -moz-available;
	}
}

@media (min-width: 576px) {

	.w960fuss {
		text-align: center;
		font-size: 0.8em;
	}

	.fuss {
		height: 60px;
	}

	.slider {
		/*bottom: 20px;*/
		width: 60%;
		right: 10px;
	}

	.navi {
		visibility: hidden;
	}

	/*.mittig {*/
	/*	text-align: center !important;*/
	/*}*/

	.links {
		text-align: left;
		width: 70%;
	}

	.rechts {
		text-align: right;
		width: 30%;
		float: right;
	}

	.linktippimg {
		margin: 0px 20px 20px 0px;
	}

	/*.link {*/
	/*	text-decoration: underline;*/
	/*	color: #965F3B;*/
	/*	font-weight: bold;*/
	/*}*/

	.content {
		margin-left: 0 px;
		margin-bottom: 50px;
		text-align: center;
	}

	.img-fluid {
		width: -moz-available;
	}
}

@media (min-width: 768px) {

	.slider {
		bottom: -40px;
		right: 10px;
	}

	.w960fuss {
		text-align: center;
	}

	.content p{
		margin: 0px -5px 0px 5px;
	}

	.navi {
		/*margin-top: -260px;*/
		/*width: 490px;*/
		/*font-size: 0.52em;*/
		/*visibility: visible;*/
		visibility: hidden;
	}

	.navbar{
		/*visibility: hidden;*/
	}

	.fuss {
		height: 60px;
	}

	.content {
		margin-left: 0 px;
		margin-bottom: 50px;
		text-align: left;
	}

	.img-fluid {
		width: -moz-available;
	}
}

@media (min-width: 992px) {

	.slider {
		bottom: -60px;
		right: 10px;
	}

	.navi {
		margin-top: -330px;
		width: 650px;
		font-size: 0.8em;
		visibility: visible;
	}

	.navbar{
		visibility: hidden;
	}

	.content h1{
		font-size: 3em;
	}

	.fuss {
		height: 40px;
	}

	.img-fluid {
		width: unset;
	}
}

@media (min-width: 1200px) {

	.slider {
		bottom: -80px;
		right: 10px;
	}

	.navi {
		margin-top: -380px;
		width: 785px;
		font-size: 1em;
	}

	.content h1{
		font-size: 3em;
	}

	.fuss {
		height: 40px;
	}
}

@media (max-width: 768px) {
  #priceChart {
    height: 250px; /* Kleine Höhe für kleinere Bildschirme */
  }
}

@media (max-width: 480px) {
  #priceChart {
    height: 200px; /* Noch kleinere Höhe für sehr kleine Bildschirme */
  }
}

#happy-hour-row {
  display: none;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s ease;
}

.price-original {
  text-decoration: line-through;
  color: #e53935; /* Rot durchgestrichen */
  margin-right: 0.5em;
}

.price-now {
  color: #43a047; /* Grün für aktuellen Preis */
  font-weight: bold;
}

/* Styling für die Buttons-Section */
.buttons-section {
  margin-top: 20px;  /* Fügt Abstand über den Buttons hinzu */
}

/* Styling für die Buttons */
.buttons-section .btn {
  margin: 10px;
  padding: 12px 20px;
  font-size: 16px;
  display: inline-block;
  text-align: center;
  text-decoration: none;  /* Entfernt den Standard-Unterstrich */
  border-radius: 4px;     /* Macht die Ecken der Buttons abgerundet */
}

/* Stil für den primären Button */
.buttons-section .btn-primary {
  background-color: #022648;
  border-color: #022648;
  color: white;
}

/* Stil für den sekundären Button */
.buttons-section .btn-secondary {
  background-color: #022648;
  border-color: #022648;
  color: white;
}

/* Mobile Responsive Styling */
@media (max-width: 768px) {
  .buttons-section .btn {
    width: 80%;  /* Lässt die Buttons auf mobilen Geräten die volle Breite einnehmen */
    margin-bottom: 10px;
  }
}

.price-original {
  text-decoration: line-through;
  color: red;
  margin-right: 0.5em;
}

.price-now {
  color: green;
  font-weight: bold;
}

.button,
.hh-mail-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.4rem 0.9rem;
  background-color: #022648;
  color: #fff;
  font-weight: normal;
  font-size: 1rem;
  font-family: inherit;
  text-decoration: none !important;  /* 🚫 kein Unterstrich */
  border: 2px solid transparent;
  border-radius: 6px;
  box-shadow: none;
  line-height: 1.4;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.button:hover,
.hh-mail-btn:hover {
  background-color: #c98f46;
  color: #fff;
  text-decoration: none !important;  /* sicherstellen, dass auch beim Hover kein Unterstrich */
  transform: translateY(-1px);
}

.button:active,
.hh-mail-btn:active {
  background-color: #8a5c28;
  color: #fff;
  transform: scale(0.97);
}

.daterangepicker td.in-range {
  background-color: #0056b3 !important;   /* Bootstrap-Blau */
  color: white !important;
  border-radius: 0 !important;
}

.daterangepicker td.start-date,
.daterangepicker td.end-date {
  background-color: #0056b3 !important;   /* etwas dunkler */
  color: white !important;
  border-radius: 0 !important;
}