/* ABOUTME: Global site stylesheet with CSS custom properties, reset, and base typography. */
/* ABOUTME: Defines color palette, layout variables, navbar, footer, and responsive breakpoints. */
:root {
	--color-dark-blue: #1f2746;
	--text-color: var(--color-dark-blue);
	--color-regular-turquoise: #12c3ce;
	--color-light-turquoise: #e5f4f5;
	--color-regular-grey: #f0f0f0;
	--color-pink: #c62a81;

	/* horizontal spacing and sizing */
	--max-content-width: 1340px;
	--outer-margin: max(15px, 2vw);
	--outer-padding: 2rem;
	--column-gap: 1.5vw;

	--section-padding-block: 2vw;
	--section-padding-inline: 2vw;

	--mcw: var(--max-content-width);
	--cwp: 2vw; /* content wrapper padding */
	--spb: var(--section-padding-block);
	--spi: var(--section-padding-inline);
	--rcg: var(--column-gap); /* regular column gap */
	--rcp: 1vw; /* regular column padding */
	--his: 4em; /* heading icon size */
	--lis: 50px; /* list icon size */
	--rbr: 10px; /* regular border radius*/
}

/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
	--step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
	--step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
	--step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
	--step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
	--step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
	--step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
	--step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
	--step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
	--step-6: clamp(3.3592rem, 2.7827rem + 2.5622vw, 4.7684rem);
	--step-7: clamp(4.0311rem, 3.2418rem + 3.508vw, 5.25rem);
}

@media (min-width: 1600px) {
	:root {
		--step-7: clamp(5.25rem, 2.4rem + 2.8vw, 5.9605rem);
	}
}

/* visual grid */
:root {
	--offset: var(--outer-margin);
	--max_width: var(--mcw);
	--columns: 12;
	--gutter: var(--rcg);
	--color: hsla(38, 100%, 52%, 0.25);

	--repeating-width: calc(100% / var(--columns));
	--column-width: calc((100% / var(--columns)) - var(--gutter));
	--background-width: calc(100% + var(--gutter));
	--background-columns: repeating-linear-gradient(
		to right,
		var(--color),
		var(--color) var(--column-width),
		transparent var(--column-width),
		transparent var(--repeating-width)
	);
}

/* Styling */
html {
	position: relative;
}

strong > em {
	color: var(--color-regular-turquoise);
	font-style: normal;
}
/*  */
body.visualize-grid::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* border-left: var(--outer-margin) solid rgba(104, 85, 47, 0.5);
	border-right: var(--outer-margin) solid rgba(104, 85, 47, 0.5); */
	/* box-shadow: 0 0 0 var(--outer-margin) rgba(215, 35, 35, 0.2); */

	margin-right: auto;
	margin-left: auto;
	width: calc(100% - (2 * var(--offset)));
	/* width: 100%; */
	max-width: var(--max_width);
	/* max-width: var(--max_width); */
	min-height: 100vh;
	content: "";
	background-image: var(--background-columns);
	background-size: var(--background-width) 100%;
	z-index: 1000;
	pointer-events: none;
}

*,
*:after,
*:before {
	box-sizing: border-box;
}

@font-face {
	font-family: "Inter Youth";
	src: url("../fonts/Inter/Inter-VariableFont_opsz,wght.ttf") format("truetype");
	font-weight: 100 900; /* full weight axis */
	font-stretch: 75% 125%; /* optional width axis if available */
	font-display: swap;
}

@font-face {
	font-family: "Inter Youth";
	font-weight: bold;
	src: url("../fonts/InterYouth/InterYouth-Bold.woff2") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter/Inter-VariableFont_opsz,wght.ttf") format("truetype");
	font-weight: 100 900; /* full weight axis */
	font-stretch: 75% 125%; /* optional width axis if available */
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf")
		format("truetype");
	font-weight: 100 900; /* full weight axis */
	font-stretch: 75% 125%; /* optional width axis if available */
	font-display: swap;
	font-style: italic;
}

body {
	margin: 0;
	padding: 0;
	font-family: "Inter";
	color: var(--text-color);
	font-size: var(--step-0);
	line-height: 1.3;
}

a {
	color: currentColor;
}

a:visited {
	color: currentColor;
}

section {
	padding-block: calc(var(--column-gap) * 2);
}

@media screen and (max-width: 768px) {
	section {
		padding-block: calc(var(--column-gap) * 6);
	}
}
section.section--no-top-padding {
	padding-top: 0px;
}

section.section--no-bottom-padding {
	padding-bottom: 0px;
}

section.section--background-colored {
	background-color: var(--section-bg-color);
	color: var(--section-text-color, currentColor);
}

section .content_wrapper .column img {
	max-width: 100%;
	height: auto;
}

.image_object img {
	width: 100%;
	height: auto;
}

.button {
	border-radius: var(--rbr);
	font-weight: bold;
	display: inline-block;
}

p {
	margin: 0;
}

.column p {
	width: 100%;
}

.small * {
	font-size: var(--step--1);
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

li {
	border-top: 1px solid currentColor;
	padding-block: 10px;
}

li:has(svg) {
	/* min-height: calc(var(--lis) + 20px); */
	display: grid;
	grid-template-columns: 28px auto; /* square + flexible text */
	grid-template-rows: 1fr; /* square + flexible text */
	/* align-items: stretch;  */
	align-items: center;
	gap: 1rem;
}

li .list_item_icon {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.list_item_icon .svg-icon {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.list_item_icon .svg-icon svg {
	width: 100%;
	height: auto;
}

li.list_item_content {
	width: 100%;
	display: block;
}

li.list_item:last-child {
	padding-bottom: 0px;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 70px;
	background-color: white;
	border-bottom: 1px solid #eee;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-inline: var(--outer-margin);
	box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
}
.languages {
	display: flex;
	align-items: center;
}

.languages a {
	text-decoration: none;
	color: currentColor;
}

.nav-menu .languages {
	margin-left: 1rem !important;
}

.languages .lang-switch-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--color-dark-blue);
	color: white;
	padding: 0.4rem 0.8rem;
	border-radius: 4px;
}

.languages .lang-switch-item svg {
	width: 1.2em;
	height: 1.2em;
	flex-shrink: 0;
}

.languages .lang-switch-item a {
	color: white;
}

.languages .active {
	display: none;
}

.languages .lang-switch-shortcode {
	display: inline;
}

.nav-menu .languages .lang-switch-shortcode {
	display: inline;
}

.logo {
	line-height: 0;
}
.logo img {
	width: auto;
	height: 55px;
	max-height: 55px;
}

body {
	margin-top: 70px;
}

body.menu-open {
	overflow: hidden;
}

/* Desktop Menu Layout */
.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: var(--mcw);
	width: 100%;
}

.nav-menu {
	display: flex;
	align-items: center;
	list-style: none;
	width: fit-content;
}

.nav-menu li {
	border-top: none;
	margin: 0;
	padding: 0;
}

.nav-item {
	position: relative;
	font-family: "Inter Youth";
	color: currentColor;
}

.nav-item a {
	color: currentColor;
}
.nav-link-wrapper:hover {
	cursor: pointer;
}
.nav-link {
	display: block;
	text-decoration: none;
	padding: 10px 15px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 0.9rem;
}

.nav-link-wrapper {
	display: flex;
	align-items: stretch;
}

.nav-link-wrapper .nav-link {
	flex: 1;
}

.nav-link--static {
	cursor: default;
}

.nav-toggle-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.nav-toggle-trigger {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	text-decoration: none;
	background: none;
	border: 0;
	color: inherit;
	font-family: inherit;
	text-align: left;
	width: 100%;
	padding: 10px 15px;
}

.nav-toggle-trigger-text {
	flex: 1;
}

.nav-toggle-caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid transparent;
	position: relative;
	transition: transform 0.2s ease;
}

.nav-toggle-caret::after {
	content: "▾";
	font-size: 1.5rem;
}

.nav-toggle-trigger:focus-visible {
	outline: 2px solid var(--color-dark-blue);
	outline-offset: 2px;
}

.nav-toggle-input--parent:checked ~ .dropdown {
	display: block;
}

.nav-toggle-input--parent:checked ~ .nav-link-wrapper .nav-toggle-caret {
	transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	background: white;
	border: 1px solid #ccc;
	display: none;
	border-radius: 10px;
	padding: 10px;
	min-width: 150px;
	z-index: 10;
}

.dropdown-item {
	display: block;
	padding: 5px;
	text-decoration: none;
	white-space: nowrap;
}

/* Mobile Menu Button */
.hamburger {
	display: none;
	flex-direction: column;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
}

.hamburger span {
	width: 25px;
	height: 3px;
	background: black;
	margin: 3px 0;
}

.nav-item a[href*="/buchung"],
.nav-item a[href*="/booking"] {
	background-color: var(--color-pink);
	color: white;
	border-radius: var(--rbr);
	margin-left: 20px;
}

#closeMenu {
	display: none;
}

.children_title {
	padding: 5px;
	color: var(--color-regular-turquoise);
	border-bottom: 1px dotted #ccc;
	width: 100%;
	display: block;
	margin-top: 20px;
	font-weight: bold;
	font-size: 85%;
	text-transform: uppercase;
}

/* Mobile Styles */
@media screen and (max-width: 1140px) {
	.hamburger {
		display: flex;
	}

	#closeMenu {
		display: block;
	}

	.nav-menu {
		display: flex;
		align-items: stretch;
		position: fixed;
		right: -500px;
		top: 0;
		flex-direction: column;
		background: white;
		width: 100%;
		max-width: 500px;
		height: 100vh;
		height: 100dvh;
		padding: 50px 20px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transition: 0.3s;
		box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
	}

	.nav-menu.active {
		right: 0;
	}

	.nav-item {
		width: 100%;
	}

	.nav-item.has-dropdown {
		margin-top: 1.5rem;
	}

	.nav-toggle-caret {
		display: none;
	}

	.nav-toggle-trigger {
		cursor: default;
		pointer-events: none;
		color: var(--color-regular-turquoise);
		font-weight: bold;
		font-size: 85%;
		text-transform: uppercase;
		padding: 8px 0;
		border-bottom: 1px dotted #ccc;
	}

	.nav-link {
		padding-left: 0;
		padding-right: 0;
	}

	.dropdown {
		display: block;
		position: static;
		border: none;
		padding-left: 0;
		background: none;
	}

	.dropdown-item {
		border-bottom: 1px solid #e5e5e5;
		padding: 10px 0;
	}

	.dropdown-item ~ .dropdown-item::before {
		display: none;
	}

	.children_title {
		padding-left: 0;
		padding-right: 0;
	}

	.close-menu {
		position: absolute;
		top: 10px;
		right: 20px;
		border: 0;
		background: transparent;
		color: currentColor;
		font-family: inherit;
		font-size: 30px;
		line-height: 1;
		padding: 4px;
		cursor: pointer;
	}

	.close-menu:focus-visible {
		outline: 2px solid var(--color-dark-blue);
		outline-offset: 2px;
	}

	.nav-item:has(a[href*="/buchung"]),
	.nav-item:has(a[href*="/booking"]) {
		order: -1;
	}

	.nav-item a[href*="/buchung"],
	.nav-item a[href*="/booking"] {
		display: block;
		margin-left: 0;
		text-align: center;
		margin-bottom: 1rem;
	}

	.nav-menu .languages {
		margin-left: 0 !important;
		margin-top: auto;
	}

	.nav-menu .languages .lang-switch-shortcode {
		display: inline;
	}

	.nav-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 998;
	}

	.nav-overlay.active {
		display: block;
	}
}

footer {
	background-color: var(--color-regular-grey);
}

/* Mobile collapsible footer */
.footer-toggle-btn {
	display: none;
}

@media screen and (max-width: 767px) {
	footer {
		padding-top: 2rem;
	}

	.footer-toggle-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.5rem;
		width: fit-content;
		padding: 1rem 1.5rem;
		margin: 1rem auto 5rem;
	}

	footer .footer_section {
		max-height: 0;
		overflow: hidden;
		padding-block: 0;
		transition:
			max-height 0.4s ease,
			padding-block 0.4s ease;
	}

	footer.footer--open .footer_section {
		max-height: 2000px;
		padding-block: calc(var(--column-gap) * 6);
	}
}

footer .column_sitemap {
	display: block !important;

	column-count: 2;
	column-gap: 2rem;
}

@media screen and (min-width: 768px) {
	footer section.regular_section .content_wrapper .column_address {
		width: 40%;
		padding-right: 10%;
	}
	footer .column_sitemap {
		column-count: 3;
		column-gap: 8rem;
	}
}

.column_sitemap .link_group {
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
	break-inside: avoid;
	color: currentColor;
}

.link_group a {
	color: currentColor;
	margin-bottom: 4px;
	display: block;
	width: 100%;
	text-align: left;
	word-break: break-word;
	hyphens: auto;
}
.link_group .group_header {
	border-bottom: 1px solid;
	margin-bottom: 10px;
	padding-bottom: 10px;
	text-transform: uppercase;
	font-size: var(--step--1);
	font-weight: 600;
	width: fit-content;
	padding-right: 20%;
}

.section--background-colored .list_item_icon svg *,
.section--card-background-colored .list_item_icon svg * {
	fill: var(--section-text-color, var(--color-dark-blue));
}

.panorama {
	width: min(100%, 1280px);
	aspect-ratio: 2 / 1;
	margin: 0 auto;
	border: 2px solid var(--color-dark-blue);
	border-radius: 5px;
	box-shadow: 0px 0px 5px #ccc;
}

.pnlm-load-button {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 100px;
	margin: -50px 0 0 -100px;
	background-color: var(--color-regular-turquoise);
	color: var(--color-dark-blue);
	font-weight: bold;
	border-radius: 3px;
	text-align: center;
	font-size: 20px;
	display: table;
	cursor: pointer;
	font-family: "Inter Youth";
}

.pnlm-load-button:hover {
	color: var(--color-regular-turquoise);
	background-color: var(--color-dark-blue);
}