/* Site additions: booking buttons, "Buchen" menu item, anchor offset, headings, images, text contrast */

#header nav ul li.buchen > a,
.button.buchen {
	background: #83d3c9;
	border-color: #83d3c9;
	color: #1f2d2b !important;
	font-weight: 900;
}

#header nav ul li.buchen > a:hover,
.button.buchen:hover {
	background: #96dad1;
	border-color: #96dad1;
}


/* Keep in-page anchors (e.g. #kontakt) clear of the fixed header */
section[id] {
	scroll-margin-top: 4em;
}

/* Logo is a div (not a heading) so each page's own title can be its h1 */
#header #logo {
	font-weight: 900;
	line-height: 1.75em;
	margin: 0;
	text-transform: uppercase;
}

	#header #logo a {
		border: 0;
		color: inherit;
		text-decoration: none;
	}

	#header #logo span {
		font-weight: 300;
	}

	#logo span.leer {
		display: none;
	}

@media only screen and (max-width: 1280px) {
	#header #logo {
		line-height: 1.5em;
	}
}

@media only screen and (max-width: 1200px) {
	#logo span {
		display: none;
	}

	#logo span.leer {
		display: inline;
	}
}

/* Page titles are h1 now; keep the look of the template's h2 */
header.special h1 {
	font-size: 1.5em;
	letter-spacing: 0.1em;
	margin-bottom: 0;
}

	header.special h1 + p {
		margin-bottom: 0;
		padding-top: 1.5em;
	}

@media only screen and (max-width: 840px) {
	header.special h1 + p {
		padding-top: 1.25em;
	}
}

@media only screen and (max-width: 736px) {
	header.special h1 {
		font-size: 1.25em;
	}
}

/* Booking pages: compact title on phones so the search box is visible right away */
@media only screen and (max-width: 736px) {
	header.special.booking {
		margin-bottom: 1.5em;
		padding-top: 1.5em;
	}

		header.special.booking:before,
		header.special.booking:after,
		header.special.booking .icon,
		header.special.booking h1 + p {
			display: none;
		}
}

/* Images carry width/height attributes (no layout shift while loading); keep them fluid */
img[width][height] {
	height: auto;
}

/* Banner photo as WebP where supported (falls back to the JPEG in style.css) */
#banner {
	background-image: url("images/light-bl.svg"), url("images/light-br.svg"), image-set(url("../images/banner.webp") type("image/webp"), url("../images/banner.jpg") type("image/jpeg"));
}

/* Text colour with sufficient contrast (WCAG AA ≥ 4.5:1 on all page backgrounds) */
body, input, select, textarea,
#footer {
	color: #686c6d;
}