/* ----------------------------------------------------------------------------
 * Colour
 * ------------------------------------------------------------------------- */
:root {
	--darkgrey: rgb(48, 48, 48);
	--lightgrey: rgb(244, 244, 244);
	--lightgreytransparent: rgba(244, 244, 244, .98);
	--mainred-light: rgb(130, 0, 0);
	--mainred: rgb(110, 0, 0);
	--mediumgrey: rgb(110, 110, 110);
	--mediumlightgrey: rgb(154, 154, 154);
	--secondarygrey: rgb(194, 194, 194);
	--white: rgb(255, 255, 255);
	--green: rgb(41, 174, 0);

	--color-app1: rgb(223, 195, 195);
	--color-app2: rgb(167, 213, 230);
	--color-app3: rgb(233, 218, 196);
	--color-app1-l: rgb(233, 206, 206);
	--color-app2-l: rgb(175, 223, 240);
	--color-app3-l: rgb(243, 227, 205);
}


/* ----------------------------------------------------------------------------
 * Font
 * ------------------------------------------------------------------------- */
body {
	background-color: var(--lightgrey);
	color: var(--mediumgrey);
	font-family: 'Playfair Display', serif;
	font-size: 15px;
}


/* ----------------------------------------------------------------------------
 * Normalize
 * ------------------------------------------------------------------------- */
a {
	color: var(--mediumgrey);
}

strong {
	font-weight: 700;
}

h1 {
	font-size: 32px;
}

h2 {
	font-size: 28px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 4px;
}

.default-list>li {
	list-style-type: disc !important;
	margin-left: 18px;
}

nav {
	background: transparent;
	box-shadow: none;
	height: initial;
	line-height: initial;
}

nav * {
	color: var(--mediumgrey);
}

nav ul a {
	color: var(--mediumgrey);
}

button {
	background-color: var(--lightgrey);
	color: var(--mediumgrey);
	font-family: 'Playfair Display', serif;
}

select,
input {
	color: var(--mediumgrey);
	font-family: 'Playfair Display', serif;
}

button:focus,
button:hover {
	background-color: var(--lightgrey)
}

select:focus,
select:hover {
	outline: none;
}

input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
	border-bottom: 1px solid var(--mainred);
	box-shadow: 0 2px 0 0 var(--mainred);
	box-shadow: none;
}

[type="checkbox"]+span:not(.lever):before,
[type="checkbox"]:not(.filled-in)+span:not(.lever):after {
	border-radius: 4px;
	border: 2px solid var(--secondarygrey);
}

[type="checkbox"]:checked+span:not(.lever):before {
	border-bottom: 2px solid var(--green);
	border-radius: 0;
	border-right: 2px solid var(--green);
}

/* Availability Integration */
.status-cal-module {
	font-family: 'Playfair Display', serif !important;
}

/* ----------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------- */
.header {
	display: flex;
}

.row.header {
	margin-bottom: 0px;
}

#nav-inner {
	display: grid;
	grid-template-areas: "logo language";
	padding: 14px 0;
}

#navbar-logo {
	grid-area: logo;
	height: 74px;
	width: auto;
}

#navbar-lang {
	align-self: flex-start;
	display: flex;
	grid-area: language;
	justify-content: space-between;
	justify-self: end;
	width: 7ch;
}

#navbar-links {
	grid-area: links;
	justify-self: center;
	margin-top: 12px;
	padding: 12px 0;
}

#navbar-links>li>a {
	padding: 12px 16px;
}

#navbar-links>li>a:hover {
	border-radius: 4px;
}

.lang-active {
	font-weight: bold;
}


@media screen and (min-width: 601px) {
	#navbar-lang {
		align-self: center;
	}

	#nav-inner {
		grid-template-areas:
			"logo language"
			"links links";
	}

	#navbar-links {
		justify-self: start;
	}
}

@media screen and (min-width: 993px) {
	#nav-inner {
		grid-template-areas:
			"logo links language";
	}

	#navbar-links {
		align-self: center;
		margin-top: 0;
		padding: 0;
	}
}


/* ----------------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------------- */
.section {
	padding-bottom: 30px;
	padding-top: 30px;
}


/* ----------------------------------------------------------------------------
 * Mobile Menu
 * ------------------------------------------------------------------------- */
#menu-button {
	background: var(--darkgrey);
	border-radius: 50%;
	bottom: 26px;
	cursor: pointer;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	height: 64px;
	position: fixed;
	right: 26px;
	width: 64px;
	z-index: 12;
}

#menu-lines {
	display: flex;
	flex-direction: column;
	height: 22px;
	justify-content: space-between;
	left: 17px;
	position: absolute;
	top: 20px;
	width: 30px;
}

#menu-lines .line {
	background: var(--lightgrey);
	border-radius: 2px;
	display: block;
	height: 2px;
	width: 100%;
}

#menu-lines .line1 {
	transform-origin: 0% 0%;
	transition: 0.4s ease-in-out;
}

#menu-lines .line2 {
	transition: transform 0.2s ease-in-out;
}

#menu-lines .line3 {
	transform-origin: 0% 100%;
	transition: transform 0.4s ease-in-out;
}

.menu-button-active .line1 {
	transform: rotate(45deg) translate(3px, -3px);
}

.menu-button-active .line2 {
	transform: scaleY(0);
}

.menu-button-active .line3 {
	transform: rotate(-45deg) translate(3px, 3px);
}

.mobile-menu {
	background: var(--lightgreytransparent);
	mix-blend-mode: normal;
	opacity: 0.96;
	z-index: 6;
	background-color: var(--lightgrey);
	height: 100vh;
	overflow-x: hidden;
	position: fixed;
	top: 0;
	transition: 0.4s ease-in-out;
	width: 0;
}

.mobile-menu-active {
	width: 100%;
}


/* ----------------------------------------------------------------------------
 * Mobile Menu Content
 * ------------------------------------------------------------------------- */
#mobile-menu-content {
	display: grid;
	font-size: 20px;
	grid-template-rows: 84px 24px 1fr 64px;
	height: 100vh;
	justify-items: center;
	padding: 20px;
}

#menu-logo {
	height: 64px;
	width: auto;
}

#mobile-menu-links {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
}

.menu-active {
	font-weight: bold;
}

/* ----------------------------------------------------------------------------
 * Landing
 * ------------------------------------------------------------------------- */
#landing {
	min-height: calc(100vh - 102px);
}

#img-landing {
	background-size: cover;
	border-radius: 6px;
	margin-bottom: calc(62px);
	min-height: calc(100vh - 102px - 20px);
	min-height: calc(100svh - 102px - 20px);
}

@supports (-webkit-touch-callout: none) {
	#img-landing {
		min-height: calc(100svh - 102px - 20px);
    }
}

#img-host-wrapper {
	align-items: center;
	display: flex;
	justify-content: center;
}

#img-host {
	border-radius: 50%;
	height: 62.8vw;
	width: 62.8vw;
}

#landing-wrapper {
	display: grid;
	gap: 18px;
	grid-template-areas:
		"intro-text-1 intro-text-1"
		"host welcome-text"
		"intro-text-2 intro-text-2"
		"inquiry-button inquiry-button";
	grid-template-columns: 37fr 63fr;
}

#intro-text-1 {
	grid-area: intro-text-1;
}

#intro-text-2 {
	grid-area: intro-text-2;
}

#welcome-text {
	align-self: center;
	grid-area: welcome-text;
}

#intro-text-1>p,
#intro-text-1>h1,
#intro-text-2>p,
#welcome-text>p {
	text-align: center;
}

#img-host-wrapper {
	grid-area: host;
}

#inquiry-button {
	display: flex;
	grid-area: inquiry-button;
	justify-content: center;
}

#img-host {
	height: 146px;
	width: 146px;
}

@media screen and (min-width: 601px) {
	#landing {
		display: flex;
		flex-direction: column;
		gap: 18px;
		min-height: initial;
	}

	#img-landing {
		height: 62.8vw;
		margin-bottom: 0;
		min-height: initial;
		border-radius: 6px;
		max-height: 70vh;
	}

	#landing-wrapper {
		grid-template-areas:
			"intro-text-1 intro-text-1 intro-text-1"
			"host welcome-text ."
			"intro-text-2 intro-text-2 intro-text-2"
			"inquiry-button inquiry-button inquiry-button";
		grid-template-columns: 146px 1fr 1fr;
		padding-top: 8px;
	}

	#img-host-wrapper {
		justify-self: start;
	}

	#img-host {
		height: 146px;
		width: 146px;
	}

	#intro-text-1>p,
	#intro-text-1>h1,
	#intro-text-2>p,
	#welcome-text>p {
		text-align: start;
	}
}

@media screen and (min-width: 1201px) {
	#landing {
		display: grid;
		grid-template-columns: 3fr 2fr;
		margin-bottom: 5vw;
		margin-top: 5vw;
		min-height: initial;
	}

	#img-landing {
		width: 100%;
		height: auto;
	}

	#landing-wrapper {
		grid-template-areas:
			"intro-text-1 intro-text-1"
			"host welcome-text"
			"intro-text-2 intro-text-2"
			"inquiry-button inquiry-button";
		grid-template-columns: 37fr 63fr;
		padding-top: 0;
	}

	#inquiry-button {
		align-items: center;
		display: flex;
		justify-content: center;
	}

	#intro-text-1 > h1 {
		margin-top: 0;
	}
}


/* ----------------------------------------------------------------------------
 * Rooms
 * ------------------------------------------------------------------------- */
#rooms {
	background-color: var(--white);
	padding-top: 96px;
}

#rooms-detail {
	min-height: 88vh;
	padding-bottom: 96px;
	padding-top: 76px;
}

/* ----------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------- */
.btn {
	border-radius: 6px;
	box-shadow:
		inset 0 0 6px rgba(255, 255, 255, 0.4),
		inset 0 0 3px rgba(0, 0, 0, 0.3);
	filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1));
	padding: 14px 52px;
	text-transform: initial;
	font-size: 18px;
	height: initial;
	line-height: initial;
	filter: brightness(100%);
	transition: filter 0.3s;
}

.btn:hover {
	box-shadow:
		inset 0 0 6px rgba(255, 255, 255, 0.4),
		inset 0 0 3px rgba(0, 0, 0, 0.3);
	filter: brightness(108%);
}

.btn-grey {
	background-color: var(--mediumgrey)
}

/* ----------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */
#footer-wrapper {
	background-color: var(--darkgrey);
	margin-bottom: 0;
	padding-bottom: 32px;
	padding-top: 32px;
}

#footer {
	color: var(--mediumlightgrey);
	display: flex;
	flex-direction: column;
	gap: 46px;
}

#footer a {
	color: var(--mediumlightgrey);
}

#footer-location {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 24px;
	justify-content: center;
}

#footer-address {
	text-align: center;
}

#footer-address>p {
	line-height: 1;
}

#footer-logo {
	height: 96px;
	width: auto;
}

#footer-links {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.link-underline {
	text-decoration: underline;
}

#footer-contact {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 24px;
	justify-content: center;
}

#footer-icon-mail {
	height: auto;
	width: 32px;
}

#footer-icon-phone {
	height: auto;
	width: 32px;
}

#footer-contact-mail {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#footer-contact-phone {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}


@media screen and (min-width: 601px) {
	#footer {
		flex-direction: row;
		gap: 0;
		justify-content: space-between;
	}

	#footer-location {
		flex-direction: row;
	}

	#footer-contact {
		align-items: flex-start;
	}

	#footer-contact-mail {
		flex-direction: row;
		gap: 12px;
	}

	#footer-contact-phone {
		flex-direction: row;
		gap: 12px;
	}

	#footer-address {
		text-align: start;
	}
}

/* ----------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */
.room-card-wrapper {
	background-color: var(--white);
	border-radius: 6px;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.16));
	height: 500px;
	max-width: 312px;
	width: 80vw;
}

.rooms-carousel {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.room-card-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 12px;
}

.room-card-headline {
	align-self: flex-start;
	font-size: 34px !important;
	line-height: 1;
	margin: 0 0 18px 12px;
}

.carousel {
	height: 660px;
}

#room-card-img-app-1,
#room-card-img-app-2,
#room-card-img-app-3 {
	border-radius: 5px 5px 0 0;
	height: 53vw;
	max-height: 207px;
	width: auto;
}

.carousel .indicators .indicator-item {
	background-color: var(--secondarygrey);
}

.carousel .indicators .indicator-item.active {
	background-color: var(--mainred);
}

.carousel.carousel-slider .carousel-item {
	height: 90%;
}

.room-card-info {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	justify-items: center;
}

.room-card-icon {
	height: 28px;
	width: 28px;
}

#room-cards-desktop {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media screen and (min-width: 601px) {
	#room-cards-desktop {
		align-items: flex-start;
	}

	.room-card-wrapper {
		height: initial;
		margin: 0;
		max-width: 686px;
		width: 100%;
	}

	#room-cards-desktop> :nth-child(1),
	#room-cards-desktop> :nth-child(2) {
		margin: 0 0 42px 0;
	}

	.room-card-wrapper>a {
		display: flex;
		justify-content: space-between;
	}

	.room-card-wrapper>a>div {
		flex: 1;
	}

	#room-card-img-app-1,
	#room-card-img-app-2,
	#room-card-img-app-3 {
		border-radius: 5px 0 0 5px;
		height: initial;
		max-height: initial;
		width: initial;
	}
}

@media screen and (min-width: 1201px) {
	#room-cards-desktop {
		flex-direction: row;
		justify-content: flex-start;
	}

	#room-cards-desktop> :nth-child(1),
	#room-cards-desktop> :nth-child(2) {
		margin: 0 24px 0 0;
	}

	.room-card-wrapper {
		height: 496px;
		max-width: initial;
		width: 300px;
	}

	.room-card-wrapper>a {
		display: initial;
	}

	#room-card-img-app-1,
	#room-card-img-app-2,
	#room-card-img-app-3 {
		border-radius: 5px 5px 0 0;
		height: 198px;
		width: auto;
	}
}


/* ----------------------------------------------------------------------------
 * Quality
 * ------------------------------------------------------------------------- */
#quality {
	background-color: var(--white);
	margin-bottom: -5vw;
	padding-top: 96px;
}

#quality-wood {
	height: 66vw;
	max-height: 350px;
	width: 100%;
}

#quality-img-wrapper {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: -54vw;
	position: relative;
	top: 54vw;
}

#quality-content {
	margin-bottom: 24px;
	max-width: 400px;
	text-align: center;
}

#quality-img {
	border-radius: 4px;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.16));
	max-width: 420px;
	width: 80%;
}

.edelweiss-img {
	height: 16vw;
	max-height: 84px;
	max-width: 84px;
	opacity: .6;
	width: 16vw;
}

#edelweiss-img-wrapper {
	display: flex;
	gap: 6px;
	margin-top: 32px;
}

@media screen and (min-width: 601px) {
	#quality {
		background-color: var(--white);
		margin-bottom: -20px;
		padding-top: 96px;
	}

	#quality-img-wrapper {
		align-items: flex-start;
		margin-top: -294px;
		top: 294px;
	}

	#quality-img {
		width: 420px;
	}

	#quality-content {
		text-align: start;
	}
}


/* ----------------------------------------------------------------------------
 * Location
 * ------------------------------------------------------------------------- */
#location {
	background-color: var(--white);
	padding-bottom: 96px;
	padding-top: 96px;
}

#location-wrapper {
	display: flex;
	flex-direction: column;
}

#location-content>p {
	text-align: center;
}

#location-button {
	display: flex;
	justify-content: center;
}

#location-img {
	border-radius: 4px;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.16));
	height: 48vw;
	max-width: 100%;
	width: 100vw;
}

#location-info-table {
	display: grid;
	grid-template-columns: 1fr 10ch;
	gap: 12px;
}

#arrival-section {
	margin-top: 38px;
}

#arrival-section>p {
	text-align: center;
}

@media screen and (min-width: 993px) {
	#location-wrapper {
		display: grid;
		gap: 38px;
		grid-template-columns: 1fr 1fr;
	}

	#location-content>p {
		text-align: start;
	}

	#location-img {
		height: 20vw;
		width: 100%;
	}

	#location-content {
		align-items: flex-start;
		align-self: flex-start;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	#arrival-section>p {
		text-align: start;
	}
}

/* ----------------------------------------------------------------------------
 * Availability
 * ------------------------------------------------------------------------- */
#availability {
	background-color: var(--white);
	padding-bottom: 96px;
}

/* ----------------------------------------------------------------------------
 * Imprint
 * ------------------------------------------------------------------------- */
#imprint {
	background-color: var(--white);
	padding: 96px 0;
}

#imprint-wrapper {
	max-width: 624px;
}

#imprint-address {
	margin-bottom: 96px;
}


/* ----------------------------------------------------------------------------
 * Privacy
 * ------------------------------------------------------------------------- */
#privacy {
	background-color: var(--white);
	padding: 96px 0;
}

#privacy-wrapper {
	max-width: 624px;
}

#privacy h3 {
	margin-top: 48px;
}

/* ----------------------------------------------------------------------------
 * Inquiry
 * ------------------------------------------------------------------------- */
#inquiry-text-wrapper {
	margin: 76px 0;
}

#inquiry-form-wrapper {
	background-color: var(--white);
	padding: 76px 0;
}

#inquiry-text,
#inquiry-form {
	max-width: 660px;
}

.formset {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 48px;
}

#inquiry-country {
	border-radius: 4px;
	border: 1px solid var(--secondarygrey);
}

#inquiry-message {
	background-color: var(--white);
	border-radius: 4px;
	border: 1px solid var(--secondarygrey);
	color: var(--mediumgrey);
	font-family: 'Playfair Display', serif;
	height: 20ch;
	padding: 12px;
}

.form-error li {
	background: rgb(255, 187, 187);
	border-radius: 4px;
	color: var(--mainred);
	padding: 6px;
}

.errorlist {
	margin-top: 12px;
	padding-inline-start: 0;
}

.general-form-error {
	margin-top: 12px;
	background: rgb(255, 187, 187);
	border-radius: 4px;
	color: var(--mainred);
	padding: 6px;
}

/* Datepicker */
.datepicker-date-display {
	background-color: var(--mainred);
}

.datepicker-table td.is-selected {
	background-color: var(--mainred);
}

.datepicker-footer {
	display: none;
}

.datepicker {
	color: var(--mediumgrey);
	font-family: 'Playfair Display', serif;
}

.datepicker-table td.is-today {
	color: var(--mainred);
}

.datepicker-modal {
	border-radius: 6px;
}

.datepicker-controls .select-month input,
.datepicker-controls .select-year input {
	display: none;
}

.datepicker-select {
	background-color: #fafafa;
	border-color: var(--secondarygrey);
	margin-top: 6px;
	border-radius: 4px;
}

.selects-container> :nth-child(1) {
	margin-right: 8px;
}

@media screen and (min-width: 601px) {
	#arrival-departure {
		display: grid;
		gap: 24px;
		grid-template-columns: 1fr 1fr;
	}

	#first-last-name {
		display: grid;
		gap: 24px;
		grid-template-columns: 1fr 1fr;
	}

	#postal-code-city {
		display: grid;
		gap: 24px;
		grid-template-columns: 1fr 2fr;
	}
}

/* Select */
select {
	display: initial;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.people-selection {
	display: grid;
	grid-template-columns: 44px 64px 44px;
}

.people-selection * {
	background-color: var(--white);
	color: var(--mediumgrey);
	font-family: 'Playfair Display', serif;
}

#btn-adults-lower,
#btn-adults-raise,
#btn-child-lower,
#btn-child-raise {
	border: 1px solid var(--secondarygrey);
	cursor: pointer;
}

#btn-adults-lower,
#btn-child-lower {
	border-radius: 4px 0 0 4px;
}

#btn-adults-raise,
#btn-child-raise {
	border-radius: 0 4px 4px 0;
}

#adults-input,
#child-input {
	border: none;
	border-bottom: 1px solid var(--secondarygrey);
	border-radius: 0;
	border-top: 1px solid var(--secondarygrey);
	text-align: center;
}

.age-child-label {
	display: none;
}

.age-child-label-active {
	display: initial;
}

.age-child {
	display: none;
}

.age-child-active {
	display: initial;
}

#child-age-selector {
	max-width: 108px;
}

#child-age-selector {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.form-child {
	border-radius: 4px;
	border: 1px solid var(--secondarygrey);
}

.form-btn-inactive {
	color: transparent;
}

/* Checkbox */
.form-checkbox {
	height: 16px;
	margin-right: 24px;
	width: 16px;
}

.form-checkbox-wrapper {
	align-items: center;
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.form-why {
	cursor: pointer;
	margin-left: 4px;
	text-decoration: underline;
}

.checkbox-explanation {
	display: none;
}

.checkbox-explanation-active {
	display: initial;
}

.form-checkbox-label-wrapper {
	align-items: center;
	display: flex;
}

#inquiry-submit-button {
	font-family: 'Playfair Display', serif;
	font-size: 15px;
	width: 24ch;
}

#submit-wrapper {
	margin-bottom: 0;
}

.inquiry-form-inactive {
	opacity: 34%;
}

/* Other */

/* Form Info */
#form-success {
	text-align: center;
	border-radius: 6px;
	border: 1px solid var(--green);
}

.form-submit-hide {
	display: none;
}

#form-success-tick {
	color: var(--green);
	font-size: 34px;
	margin: 0;
	text-align: center;
}

@media screen and (min-width: 601px) {
	#form-success {
		text-align: start;
	}

	#form-success-tick {
		text-align: start;
	}
}

/* ----------------------------------------------------------------------------
 * Arrival
 * ------------------------------------------------------------------------- */
#arrival {
	background-color: var(--white);
	padding: 46px 0 96px 0;
}

#map {
	border-radius: 5px;
	border: 1px solid var(--lightgrey);
	height: 40vh;
	margin-top: 48px;
	max-height: 60vw;
}

#arrival-content {
	max-width: 660px;
}

#arrival-content h2 {
	margin-top: 46px;
}

#arrival-content p,
#arrival-content h2 {
	text-align: center;
}

#arrival-address {
	padding: 46px 0;
}

#arrival-address>p {
	line-height: 1;
}

#attention-card {
	border-radius: 4px;
	border: 1px solid rgb(247, 112, 1);
	max-width: 660px;
}

#airports-table {
	display: grid;
	gap: 16px 6px;
	overflow-x: auto;
	grid-template-columns: 11ch 20ch 9ch 25ch;
}

#airports-table>p {
	margin: 0;
	text-align: start;
}

.airports-table-header {
	font-weight: 700;
}

#airport-transfer {
	margin: 34px 0 0 0;
}

@media screen and (min-width: 601px) {

	#arrival-content p,
	#arrival-content h2 {
		text-align: start;
	}
}

/* ----------------------------------------------------------------------------
 * Rates
 * ------------------------------------------------------------------------- */
#rates-details-wrapper {
	background-color: var(--white);
	padding: 96px 0;
}

#rates-details-wrapper h4 {
	margin-bottom: 0;
	margin-top: 48px;
}

#rates-table {
	margin-top: 48px;
	overflow: auto;
}

#rates-details {
	margin: 0;
	max-width: 860px;
}

#rates-details-misc {
	margin-top: 48px;
}

#rates-table-selector {
	display: flex;
	gap: 12px;
	overflow-x: auto;
}

#rates-table-selector h2,
rates-table-selector p {
	white-space: nowrap;
}

.rates-table-active {
	border: 1px solid black;
}

.rates-switch {
	color: var(--mediumlightgrey);
	padding: 12px;
}

.rates-active {
	border-bottom: 1px solid var(--mediumgrey);
	color: var(--mediumgrey);
}

#rates {
	margin: 38px 0 24px 0;
	position: relative;
}

.nw {
	white-space: nowrap;
}

.cell-nowrap {
	display: flex;
	justify-content: center;
}

.table-header {
	background-color: rgb(234, 234, 234);
}

.table-row-group {
	display: table-row-group;
}

.table-row {
	display: table-row;
}

.table-row :nth-child(2) {
	text-align: left;
}

.table-row-cell {
	display: table-cell;
	min-width: 6ch;
	vertical-align: middle;
}

#rates .table-row-group> :nth-child(n+3):nth-child(-n+4) {
	background-color: var(--color-app1-l);
}

#rates .table-row-group> :nth-child(n+5):nth-child(-n+6) {
	background-color: var(--color-app2-l);
}

#rates .table-row-group> :nth-child(n+7):nth-child(-n+8) {
	background-color: var(--color-app3-l);
}

#rates .table-row-group> :nth-child(n+3):nth-child(-n+4):focus,
#rates .table-row-group> :nth-child(n+3):nth-child(-n+4):hover {
	background-color: var(--color-app1);
}

#rates .table-row-group> :nth-child(n+5):nth-child(-n+6):focus,
#rates .table-row-group> :nth-child(n+5):nth-child(-n+6):hover {
	background-color: var(--color-app2);
}

#rates .table-row-group> :nth-child(n+7):nth-child(-n+8):focus,
#rates .table-row-group> :nth-child(n+7):nth-child(-n+8):hover {
	background-color: var(--color-app3);
}

.table-row-cell {
	padding: 8px 12px;
}

.nw {
	white-space: nowrap;
}

.rates-double,
.rates-additional {
	color: transparent;
	height: 16px;
	margin: 1px;
	width: 16px;
}

.rates-download {
	border-left: 3px solid var(--mainred);
	padding: 12px;
	margin: 48px 0;
}

.detailtable-child {
	gap: 12px;
	display: grid;
	grid-template-columns: 17ch auto;
}

.detailtable-breakfast {
	gap: 12px;
	display: grid;
	grid-template-columns: 16ch auto;
}

.detailtable-cancellation {
	gap: 12px;
	display: grid;
	grid-template-columns: 22ch auto;
	/* grid-template-columns: 26ch auto; */
}

.detailtable-child>p,
.detailtable-breakfast>p,
.detailtable-cancellation>p {
	line-height: 1;
	margin-bottom: 0;
}

.legend {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: flex-start;
}

.legend>p {
	margin: 0;
}

#rates-change-info {
	margin-top: 98px;
}

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

/* ----------------------------------------------------------------------------
 * Room sites
 * ------------------------------------------------------------------------- */
#room-landing-wrapper {
	margin: 46px 0;
}

#room-landing-headlines {
	text-align: center;
}

#room-landing-headlines>h1 {
	margin: 0;
}

#room-description {
	margin: 38px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#img-gallery {
	margin: 48px 0;
	display: grid;
	gap: 4vw;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
}

#img-gallery>a {
	line-height: 0;
}

#img-gallery img {
	border-radius: 4px;
	height: auto;
	width: 100%;
}

#floor-plan-wrapper {
	background-color: var(--white);
	padding: 76px 0;
}

#amenities-wrapper {
	margin: 86px 0;
}

#amenities-img {
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	height: auto;
	width: 100%;
	border-radius: 4px;
}

#room-wood {
	max-height: 240px;
	height: 66vw;
	width: 100%;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.svg-thumbnail {
	max-width: 600px;
}

.svg-thumbnail-no3 {
	max-width: 480px;
}

@media screen and (min-width: 601px) {

	#room-landing-headlines,
	#room-description {
		text-align: start;
	}

	#img-gallery {
		gap: 20px;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		max-width: 660px;
	}

	#amenities-section {
		display: grid;
		gap: 48px;
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (min-width: 993px) {
	#room-floor-plan-section {
		display: grid;
		gap: 48px;
		grid-template-columns: 1fr 1fr;
	}
}


/* ----------------------------------------------------------------------------
 * ------------------------------------------------------------------------- */

.headline-line {
	background-color: var(--mainred);
	height: 1px;
	width: 58px;
}

.icon-no-smoking,
.icon-no-dogs {
	height: 32px;
	width: 32px;
}

.no-dogs-no-smoking {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: flex-start;
	margin-bottom: 12px;
}