@charset "utf-8";

/* --------- */
/* VARIABLEN */
/* --------- */

:root {
	--schriftart1: "Big John Pro Bold";
	--schriftart2: "Encode Sans Regular";

	--grau-hell:   #393939ff;
	--grau-dunkel: #282828ff;
	--schwarz:     #0a0a0aff;

	--rot:     #8f2b21ff;
	--blau:    #1f6a80ff;
	--gelb:    #e0b83aff;
	--grau:    #8f9491ff;
	--violett: #6f5a78ff;
	--rosa:    #d08a96ff;
	--grün:    #5e877bff;
	--braun:   #5a3e36ff;

	--muster: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSI+DQo8cmVjdCB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiMyODI4MjgiPjwvcmVjdD4NCjxjaXJjbGUgY3g9IjMiIGN5PSI0LjMiIHI9IjEuOCIgZmlsbD0iIzM5MzkzOSI+PC9jaXJjbGU+DQo8Y2lyY2xlIGN4PSIzIiBjeT0iMyIgcj0iMS44IiBmaWxsPSIjMGEwYTBhIj48L2NpcmNsZT4NCjxjaXJjbGUgY3g9IjEwLjUiIGN5PSIxMi41IiByPSIxLjgiIGZpbGw9IiMzOTM5MzkiPjwvY2lyY2xlPg0KPGNpcmNsZSBjeD0iMTAuNSIgY3k9IjExLjMiIHI9IjEuOCIgZmlsbD0iIzBhMGEwYSI+PC9jaXJjbGU+DQo8L3N2Zz4=");

	--m: .15625vw; /* Mobile  |    < 720px     |  2vw  96vw  2vw | vw  = px / 6.4 */
	--t: .1vw;     /* Tablet  | 720px - 1000px |  1vw  98vw  1vw | vw  = px / 10  */
	--d: 1px;      /* Desktop |   > 1000px     | auto 980px auto | px             */

	--px1:  calc(1  * var(--m)); --px2:  calc(2  * var(--m)); --px3:  calc(3  * var(--m)); --px4:  calc(4  * var(--m)); --px5:  calc(5  * var(--m)); --px6: calc(6 * var(--m)); --px7: calc(7 * var(--m)); --px8: calc(8 * var(--m));
	--px10: calc(10 * var(--m)); --px12: calc(12 * var(--m)); --px14: calc(14 * var(--m)); --px16: calc(16 * var(--m)); --px18: calc(18 * var(--m));
	--px20: calc(20 * var(--m)); --px22: calc(22 * var(--m)); --px24: calc(24 * var(--m)); --px26: calc(26 * var(--m)); --px28: calc(28 * var(--m));
	--px30: calc(30 * var(--m)); --px32: calc(32 * var(--m)); --px34: calc(34 * var(--m)); --px36: calc(36 * var(--m)); --px38: calc(38 * var(--m));
	--px40: calc(40 * var(--m)); --px42: calc(42 * var(--m)); --px44: calc(44 * var(--m)); --px46: calc(46 * var(--m)); --px48: calc(48 * var(--m));
	--px50: calc(50 * var(--m)); --px52: calc(52 * var(--m)); --px54: calc(54 * var(--m)); --px56: calc(56 * var(--m)); --px58: calc(58 * var(--m));
	--px60: calc(60 * var(--m)); --px64: calc(64 * var(--m)); --px66: calc(66 * var(--m));

	--px73: calc(73 * var(--m)); --px198: calc(198 * var(--m)); --px932: calc(932 * var(--m));
}

@media ( min-width: 720px ) {

	:root { 
		--px1:  calc(1  * var(--t)); --px2:  calc(2  * var(--t)); --px3:  calc(3  * var(--t)); --px4:  calc(4  * var(--t)); --px5:  calc(5  * var(--t)); --px6: calc(6 * var(--t)); --px7: calc(7 * var(--t)); --px8: calc(8 * var(--t));
		--px10: calc(10 * var(--t)); --px12: calc(12 * var(--t)); --px14: calc(14 * var(--t)); --px16: calc(16 * var(--t)); --px18: calc(18 * var(--t));
		--px20: calc(20 * var(--t)); --px22: calc(22 * var(--t)); --px24: calc(24 * var(--t)); --px26: calc(26 * var(--t)); --px28: calc(28 * var(--t));
		--px30: calc(30 * var(--t)); --px32: calc(32 * var(--t)); --px34: calc(34 * var(--t)); --px36: calc(36 * var(--t)); --px38: calc(38 * var(--t));
		--px40: calc(40 * var(--t)); --px42: calc(42 * var(--t)); --px44: calc(44 * var(--t)); --px46: calc(46 * var(--t)); --px48: calc(48 * var(--t));
		--px50: calc(50 * var(--t)); --px52: calc(52 * var(--t)); --px54: calc(54 * var(--t)); --px56: calc(56 * var(--t)); --px58: calc(58 * var(--t));
		--px60: calc(60 * var(--t)); --px64: calc(64 * var(--t)); --px66: calc(66 * var(--t));

		--px73: calc(73 * var(--t)); --px198: calc(198 * var(--t)); --px932: calc(932 * var(--t));
	}
	
}
	
@media ( min-width: 1000px ) {
	
	:root { 
		--px1:  calc(1  * var(--d)); --px2:  calc(2  * var(--d)); --px3:  calc(3  * var(--d)); --px4:  calc(4  * var(--d)); --px5:  calc(5  * var(--d)); --px6: calc(6 * var(--d)); --px7: calc(7 * var(--d)); --px8: calc(8 * var(--d));
		--px10: calc(10 * var(--d)); --px12: calc(12 * var(--d)); --px14: calc(14 * var(--d)); --px16: calc(16 * var(--d)); --px18: calc(18 * var(--d));
		--px20: calc(20 * var(--d)); --px22: calc(22 * var(--d)); --px24: calc(24 * var(--d)); --px26: calc(26 * var(--d)); --px28: calc(28 * var(--d));
		--px30: calc(30 * var(--d)); --px32: calc(32 * var(--d)); --px34: calc(34 * var(--d)); --px36: calc(36 * var(--d)); --px38: calc(38 * var(--d));
		--px40: calc(40 * var(--d)); --px42: calc(42 * var(--d)); --px44: calc(44 * var(--d)); --px46: calc(46 * var(--d)); --px48: calc(48 * var(--d));
		--px50: calc(50 * var(--d)); --px52: calc(52 * var(--d)); --px54: calc(54 * var(--d)); --px56: calc(56 * var(--d)); --px58: calc(58 * var(--d));
		--px60: calc(60 * var(--d)); --px64: calc(64 * var(--d)); --px66: calc(66 * var(--d));

		--px73: calc(73 * var(--d)); --px198: calc(198 * var(--d)); --px932: calc(932 * var(--d));
	}
	
}

/* ------------ */
/* SCHRIFTARTEN */
/* ------------ */

@font-face {
	font-family: "Big John Pro Bold";
	font-display: swap;
	src: url("../fonts/big-john-pro.bold.woff2") format("woff2");
}

@font-face {
	font-family: "Encode Sans Regular";
	font-display: swap;
	src: url("../fonts/encode-sans.regular.woff2") format("woff2");
}

/* --------- */
/* KEYFRAMES */
/* --------- */

@keyframes foto-groß {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes foto-klein {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes karte-ein { 
	from { grid-template-rows: 0fr; } 
	to   { grid-template-rows: 1fr; }
}

@keyframes karte-aus { 
	from { grid-template-rows: 1fr; } 
	to   { grid-template-rows: 0fr; } 
}

/* ------------- */
/* STANDARDWERTE */
/* ------------- */

html, body, header, main, footer, section, figure, nav, aside, div, iframe, hr, h1, h2, h3, h4, strong, figcaption, small, img, svg, button, ul, li, p, a {
	display: block;

	margin: 0;
	border: 0;
	padding: 0;

	background-color: transparent;
}

html {
	font-size: 16px;
}

h1, h2, h3, h4, strong, figcaption {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

svg {
	aspect-ratio: 1 / 1;
}

ul {
	list-style: none;
}

p {
	hyphens: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

hr {
	width: calc(100% + var(--px12));
	height: var(--px24);

	transform: translate(calc(var(--px6) * -1), 0);

	background-color: var(--grau-hell);
}

/* ---- */
/* BODY */
/* ---- */

body {
	width: 100%;
	height: auto;
	overflow-x: hidden;

	display: grid;
	grid-template-columns: 1fr [header-start main-start footer-start] 96vw [footer-end main-end header-end] 1fr;
	grid-template-rows: 6.25vw [header-start] 48.4375vw 12.5vw 55.6395vw auto 3.75vw 11.25vw [header-end main-start] auto [main-end footer-start] 15vw [footer-end] 6.25vw;
	column-gap: var(--px4);
	row-gap: var(--px4);

	background-color: var(--grau-dunkel);
	background-image: var(--muster);
	background-size: 15px 15px;
	background-position: center top;
	background-repeat: repeat;
}

@media ( min-width: 720px ) {

	body {
		grid-template-columns: 1fr [header-start main-start footer-start] 25.4vw 72.2vw [footer-end main-end header-end] 1fr;
		grid-template-rows: 4vw [header-start] 10.4vw 43vw 4.8vw 2.4vw 7.2vw [header-end main-start] auto [main-end footer-start] 9.6vw [footer-end] 4vw;
	}

}

@media ( min-width: 1000px ) {

	body {
		grid-template-columns: 1fr [header-start main-start footer-start] 254px 722px [footer-end main-end header-end] 1fr;
		grid-template-rows: 40px [header-start] 104px 430px 48px 24px 72px [header-end main-start] auto [main-end footer-start] 96px [footer-end] 40px;
	} /* Da "subgrid" "border" (20px) und "padding" (4px) hat, müssen 24px auf die äußeren Spalten und Reihen addiert werden. */

}

/* ------ */
/* HEADER */
/* ------ */

header {
	grid-area: header;

	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	column-gap: var(--px4);
	row-gap: var(--px4);
	
	border: var(--px20) solid var(--grau-hell);
	padding: var(--px4);

	background-color: var(--schwarz);
}

/* HEADER > LOGO & TITEL */

header > :nth-child(1) {
	grid-column: 1;
	grid-row: 1;

	display: grid;
  	place-items: center;
	place-content: center;
	text-align: center;
	gap: var(--px12);

	background-color: var(--rot);
}

@media ( min-width: 720px ) {

	header > :nth-child(1) {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

}

header > :nth-child(1) > img {
	width: var(--px198);
	aspect-ratio: 198 / 198;
}

header > :nth-child(1) > h1 {
	font: var(--px40) / var(--px44) var(--schriftart1);
	color: whitesmoke;
	text-transform: uppercase;
}

header > :nth-child(1) > h1 > span {
	white-space: normal;
}

	@media ( min-width: 720px ) {

		header > :nth-child(1) > h1 > span {
			white-space: wrap;
	}

}

/* HEADER > SUBTITEL */

header > :nth-child(2) {
	grid-column: 1;
	grid-row: 2;

	display: grid;
  	place-items: center;
	place-content: center;
	text-align: center;

	background-color: var(--blau);
}

@media ( min-width: 720px ) {

	header > :nth-child(2) {
		grid-column: 2;
		grid-row: 1;
	}

}

header > :nth-child(2) > h2 {
	font: var(--px28) / var(--px34) var(--schriftart1);
	color: whitesmoke;
	text-transform: uppercase;
}

header > :nth-child(2) > h2 > span {
	white-space: wrap;
}

@media ( min-width: 720px ) {

	header > :nth-child(2) > h2 > span {
		white-space: normal;
	}

}

/* HEADER > TITELFOTO */

header > :nth-child(3) {
	grid-column: 1;
	grid-row: 3;

	display: grid;
  	place-items: stretch;
	place-content: stretch;
	text-align: center;
	gap: var(--px4);
}

@media ( min-width: 720px ) {

	header > :nth-child(3) {
		grid-column: 2;
		grid-row: 2;
	}

}

header > :nth-child(3) > img {
	width: 100%;
	aspect-ratio: 698 / 392;
}

header > :nth-child(3) > figcaption {
	height: var(--px22);

	padding: var(--px6) 0;

	font: var(--px22) / var(--px22) var(--schriftart1);
	color: whitesmoke;
	text-transform: uppercase;
	
	background-color: var(--gelb);
}

/* HEADER > MENÜ */

header > :nth-child(4) {
	grid-column: 1;
	grid-row: 4;
}

@media ( min-width: 720px ) {

	header > :nth-child(4) {
		grid-column: 1 / span 2;
		grid-row: 3;
	}

}

header > :nth-child(4) > ul {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;

	background-color: var(--grau);
}

header > :nth-child(4) > ul li {
	position: static;

	border-top: var(--px4) solid transparent;
	border-bottom: var(--px4) solid transparent;
	border-left: 0;
	border-right: 0;
	padding: var(--px12) var(--px18);

	font: var(--px24) / var(--px24) var(--schriftart1);
	color: whitesmoke;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;

	background-color: transparent;
}

header > :nth-child(4) > ul li:hover {
	border-top: var(--px4) solid var(--schwarz);
	border-bottom: var(--px4) solid var(--schwarz);
	border-left: 0;
	border-right: 0;

	color: whitesmoke;

	background-color: var(--violett);
}

header > :nth-child(4) > ul li:first-of-type:hover {
	border-top: var(--px4) solid transparent;
	border-bottom: var(--px4) solid var(--schwarz);
	border-left: 0;
	border-right: 0;
}

header > :nth-child(4) > ul li:last-of-type:hover {
	border-top: var(--px4) solid var(--schwarz);
	border-bottom: var(--px4) solid transparent;
	border-left: 0;
	border-right: 0;
}

header > :nth-child(4) > ul > li > ul {
	display: none;

	position: static;

	margin: var(--px12) 0 var(--px8) 0;
	border: var(--px4) solid var(--schwarz);

	background-color: var(--grau);
}

header > :nth-child(4) > ul > li:hover > ul {
	display: block;
}

header > :nth-child(4) > ul > li > ul > li {
	font: var(--px22) / var(--px22) var(--schriftart1);
}

@media ( min-width: 720px ) {

	header > :nth-child(4) > ul {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	header > :nth-child(4) > ul > li {
		position: relative;

		border-top: 0;
		border-bottom: 0;
		border-left: var(--px4) solid transparent;
		border-right: var(--px4) solid transparent;
	}
	
	header > :nth-child(4) > ul > li:hover {
		border-top: 0;
		border-bottom: 0;
		border-left: var(--px4) solid var(--schwarz);
		border-right: var(--px4) solid var(--schwarz);
	}

	header > :nth-child(4) > ul > li:is(:first-of-type, :last-of-type):hover {
		border-top: 0;
		border-bottom: 0;
		border-left: var(--px4) solid var(--schwarz);
		border-right: var(--px4) solid var(--schwarz);
	}

	header > :nth-child(4) > ul > li > ul {
		display: none;

		position: absolute;
		left: 50%;
		bottom: 0;
  		transform: translate(-50%, 100%);
		z-index: 9;

		margin: 0;
		border: var(--px4) solid var(--schwarz);

		background-color: var(--grau);
	}

	header > :nth-child(4) > ul > li:hover > ul {
		display: block;
	}

}

/* HEADER > TRENNER */

header > :nth-child(5) {
	grid-column: 1;
	grid-row: 5;
}

@media ( min-width: 720px ) {

	header > :nth-child(5) {
		grid-column: 1 / span 2;
		grid-row: 4;
	}

}

/* HEADER > VERZEICHNIS */

header > :nth-child(6) {
	grid-column: 1;
	grid-row: 6;

	height: var(--px48);

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	color: whitesmoke;

	background-color: var(--rosa);
}

@media ( min-width: 720px ) {

	header > :nth-child(6) {
		grid-column: 1 / span 2;
		grid-row: 5;
	}

}

header > :nth-child(6) > div:nth-of-type(1) {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;

	font: var(--px24) / var(--px24) var(--schriftart1);
	text-transform: uppercase;
}

header > :nth-child(6) > div:nth-of-type(1) > span:first-of-type {
	margin: 0 var(--px16) 0 0;
	border-right: var(--px4) solid var(--schwarz);
	padding: var(--px12) var(--px16);

	font: var(--px24) / var(--p24) var(--schriftart1);
	color: rgba(245, 245, 245, .5); /* whitesmoke - halbtransparent*/
	text-transform: uppercase;
}

header > :nth-child(6) > div:nth-of-type(1) > span:last-of-type {
	display: none;
}

@media ( min-width: 720px ) {

	header > :nth-child(6) > div:nth-of-type(1) > span:last-of-type {
		display: inline;
	}

}

header > :nth-child(6) > div:nth-of-type(1) > span:last-of-type > svg {
	display: inline;

	height: var(--px32);

	padding: 0 var(--px10);

	fill: whitesmoke;
	vertical-align: calc(var(--px8) * -1);
}

header > :nth-child(6) > div:nth-of-type(2) {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

header > :nth-child(6) > div:nth-of-type(2) svg {
	height: var(--px28);

	padding: var(--px10) var(--px16);

	transition: fill .4s ease-in-out 0s;
	fill: whitesmoke;
}

header > :nth-child(6) > div:nth-of-type(2) svg:hover {
	fill: rgba(245, 245, 245, .5);
}

/* ---- */
/* MAIN */
/* ---- */

main {
	grid-area: main;

	margin: calc(var(--px4) * -1) 0; /* Entferne grid gap oben und unten */
	border-left: var(--px20) solid var(--grau-hell);
	border-right: var(--px20) solid var(--grau-hell);
	padding: 0 var(--px4);

	background-color: var(--schwarz);
}

main > section {
	border-top: var(--px4) solid var(--schwarz);
	border-bottom: var(--px4) solid var(--schwarz);

	background-color: var(--grau-dunkel);
}

/* MAIN > TITEL */

main > section > div {
	border-bottom: var(--px4) solid var(--schwarz);

	display: grid;
  	place-items: start;
	place-content: stretch;

	background-color: var(--grün);
}

main > section > div > h3 {
	padding: var(--px12) var(--px16) var(--px10) var(--px16);

	font: var(--px28) / var(--px28) var(--schriftart1);
	color: whitesmoke;
	text-transform: uppercase;
}

main > section > div > h3 > svg {
	padding: 0 var(--px10);

	font-size: var(--px34);
}

/* MAIN > TEXT */

main > section > p {
	padding: var(--px16) var(--px16) 0 var(--px16);

	font: var(--px22) / var(--px26) var(--schriftart2);
	color: whitesmoke;
	text-align: justify;
}

main > section > p:last-of-type {
	padding: var(--px16);
}

main > section > small {
	padding: var(--px8) 0 var(--px24) 0;

	font: var(--px22) / var(--px22) var(--schriftart2);
	color: whitesmoke;
	text-align: center;
}

main > section > small > svg {
	display: inline;

	height: var(--px22);

	padding: 0 var(--px4);
	fill: whitesmoke;
	vertical-align: calc(var(--px3) * -1);
}

/* MAIN > HINWEIS */

main > aside {
	border-top: var(--px4) solid var(--schwarz);
	border-bottom: var(--px4) solid var(--schwarz);
	padding: var(--px20) 0;

	background-color: var(--grau);
}

main > aside > strong {
	padding: 0 var(--px16);

	font: var(--px26) / var(--px26) var(--schriftart1);
	color: whitesmoke;
	text-transform: uppercase;
	text-align: left;
}

main > aside > p {
	padding: var(--px12) var(--px16) 0 var(--px16);

	font: var(--px22) / var(--px26) var(--schriftart2);
	color: whitesmoke;
	text-align: justify;
}

main > aside > p > a {
	display: inline;

	padding: 0 var(--px2);

	font: var(--px22) / var(--px26) var(--schriftart1);
	text-transform: uppercase;
	color: whitesmoke;
}

main > aside > p > a > svg {
	display: inline;

	height: var(--px22);

	padding: 0 var(--px2) 0 0;
	fill: whitesmoke;
	vertical-align: calc(var(--px3) * -1);
}

main > aside > a {
	width: max-content;
	max-width: calc(100% - 2 * var(--px16));

	padding: var(--px16) var(--px16) var(--px4) var(--px16);

	font: var(--px22) / var(--px22) var(--schriftart1);
	color: whitesmoke;
	transition: color .4s ease-in-out 0s;
	text-transform: uppercase;
	text-align: left;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

main > aside > a:hover {
	color: rgba(245, 245, 245, .5);
}

main > aside > a > svg {
	display: inline;

	height: var(--px26);

	padding: 0 var(--px6) 0 0;
	fill: whitesmoke;
	transition: fill .4s ease-in-out 0s;
	vertical-align: calc(var(--px3) * -1);
}

main > aside > a:hover > svg {
	fill: rgba(245, 245, 245, .5);
}

main > aside > android-ios {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	padding: var(--px16) 0 0 0;

	font: var(--px22) / var(--px22) var(--schriftart2);
	color: whitesmoke;
	text-align: center;
}

main > aside > android-ios > span > svg {
	display: inline;

	height: var(--px22);

	padding: 0 var(--px4);
	fill: whitesmoke;
	vertical-align: calc(var(--px3) * -1);
}

main > aside > android-ios > span:last-child::before {
	content: "•";

	padding: 0 var(--px8);
}

main > aside > android-ios > span:nth-of-type(2) > svg:nth-of-type(3) { /* square-arrow */
	transform: scale(1.1);
}

main > aside > android-ios > span:nth-of-type(2) > svg:nth-of-type(5) { /* square-plus */
	transform: scale(1.2) translate(var(--px2), var(--px1));
}

/* MAIN > INFO */

main > figure.info {
	border-top: var(--px4) solid var(--schwarz);
	border-bottom: var(--px4) solid var(--schwarz);

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(2, auto);
	column-gap: 0;
	row-gap: 0;
	place-content: stretch;

	background-color: var(--schwarz);
}

main > figure.info > div:first-of-type {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	padding: 0;

	background-color: var(--grau-dunkel);
}

main > figure.info > div:last-of-type {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	padding: 0 0 var(--px16) 0;

	background-color: var(--grau-dunkel);
}

@media ( min-width: 720px ) {

	main > figure.info {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto;
		column-gap: var(--px4);
		row-gap: 0;
		place-content: stretch;
	}

	main > figure.info > div:first-of-type {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		padding: 0;

		background-color: whitesmoke;
	}

	main > figure.info > div:last-of-type {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;

		padding: var(--px16) 0;

		background-color: var(--grau-dunkel);
	}

}

main > figure.info > div:first-of-type > img.unterbringung {
	width: 62.5vw;
	aspect-ratio: 749 / 245;

	margin: 0;
}

main > figure.info > div:first-of-type > img.tourismusbüro {
	width: 70vw;
	aspect-ratio: 2604 / 1396;

	margin: var(--px16);
}

main > figure.info > div:first-of-type > img.fluggesellschaft {
	width: 70vw;
	aspect-ratio: 3840 / 1327;

	margin: var(--px16);
}

main > figure.info > div:first-of-type > img.mobilität1 {
	width: 70vw;
	aspect-ratio: 2500 / 1835;

	margin: var(--px16);
}

main > figure.info > div:first-of-type > img.mobilität2 {
	width: 70vw;
	aspect-ratio: 2500 / 1090;

	margin: var(--px16);
}

main > figure.info > div:first-of-type > img.mobilität3 {
	width: 70vw;
	aspect-ratio: 408 / 79;

	margin: var(--px16);
}

main > figure.info > div:first-of-type > img.reiseführer {
	width: 56.25vw;
	aspect-ratio: 360 / 552;

	margin: 0;
}

main > figure.info > div:first-of-type > img.wanderführer {
	width: 56.25vw;
	aspect-ratio: 1210 / 1726;

	margin: 0;
}

main > figure.info > div:first-of-type > img.wanderkarte {
	width: 50vw;
	aspect-ratio: 862 / 1700;

	margin: 0;
	}

main > figure.info > div:first-of-type > img.wetter {
	width: 70vw;
	aspect-ratio: 793 / 265;

	margin: var(--px16);
}


@media ( min-width: 720px ) {

	main > figure.info > div:first-of-type > img.unterbringung {
		width: 40vw;
	}

	main > figure.info > div:first-of-type > img.tourismusbüro {
		width: 44.8vw;
	}

	main > figure.info > div:first-of-type > img.fluggesellschaft {
		width: 44.8vw;
	}

	main > figure.info > div:first-of-type > img.mobilität1,
	main > figure.info > div:first-of-type > img.mobilität2,
	main > figure.info > div:first-of-type > img.mobilität3 {
		width: 44.8vw;
	}

	main > figure.info > div:first-of-type > img.reiseführer {
		width: 36vw;
	}

	main > figure.info > div:first-of-type > img.wanderführer {
		width: 36vw;
	}

	main > figure.info > div:first-of-type > img.wanderkarte {
		width: 32vw;
	}

	main > figure.info > div:first-of-type > img.wetter {
		width: 44.8vw;
	}

}

@media ( min-width: 1000px ) {

	main > figure.info > div:first-of-type > img.unterbringung {
		width: 400px;
	}

	main > figure.info > div:first-of-type > img.tourismusbüro {
		width: 448px;
	}

	main > figure.info > div:first-of-type > img.fluggesellschaft {
		width: 448px;
	}

	main > figure.info > div:first-of-type > img.mobilität1,
	main > figure.info > div:first-of-type > img.mobilität2,
	main > figure.info > div:first-of-type > img.mobilität3 {
		width: 448px;
	}

	main > figure.info > div:first-of-type > img.reiseführer {
		width: 360px;
	}

	main > figure.info > div:first-of-type > img.wanderführer {
		width: 360px;
	}

	main > figure.info > div:first-of-type > img.wanderkarte {
		width: 320px;
	}

	main > figure.info > div:first-of-type > img.wetter {
		width: 448px;
	}

}

main > figure.info > div:last-of-type > strong {
	width: calc(100% - 2 * var(--px16));

	margin: 0 0 var(--px6) 0;
	border-top: var(--px4) solid var(--schwarz);
	border-bottom: var(--px4) solid var(--schwarz);
	padding: var(--px10) var(--px16) var(--px6) var(--px16);

	font: var(--px24) / var(--px24) var(--schriftart1);
	color: whitesmoke;
	text-transform: uppercase;
	text-align: center;

	background-color: var(--grün);
}

@media ( min-width: 720px ) {

	main > figure.info > div:last-of-type > strong {
		text-align: left;
	}

}

main > figure.info > div:last-of-type > span {
	padding: var(--px6) var(--px16) 0 var(--px16);

	font: var(--px24) / var(--px28) var(--schriftart2);
	color: whitesmoke;
}

main > figure.info > div:last-of-type > a {
	padding: var(--px10) var(--px16) var(--px2) var(--px16);

	font: var(--px22) / var(--px22) var(--schriftart1);
	color: whitesmoke;
	transition: color .4s ease-in-out 0s;
	text-transform: uppercase;
}

main > figure.info > div:last-of-type > a:hover {
	color: rgba(245, 245, 245, .5);
}

main > figure.info > div:last-of-type svg {
	display: inline;

	height: var(--px26);
	
	padding: 0 var(--px6) 0 0;

	fill: whitesmoke;
	transition: fill .4s ease-in-out 0s;
	vertical-align: calc(var(--px3) * -1);
}

main > figure.info > div:last-of-type > a:hover > svg {
	fill: rgba(245, 245, 245, .5);
}

/* MAIN > MEDIEN */

main > nav.medien {
	border-top: var(--px4) solid var(--schwarz);
	border-bottom: var(--px4) solid var(--schwarz);

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(2, auto);
	column-gap: 0;
	row-gap: 0;
	justify-items: stretch;
	align-items: center;

	background-color: var(--braun);
}

@media ( min-width: 720px ) {

	main > nav.medien {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
		column-gap: 0;
		row-gap: 0;
		justify-items: stretch;
		align-items: center;
	}

}

main > nav.medien > ul {
	width: 100%;
	height: auto;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	justify-self: center;

	padding: 0 var(--px12);
	color: whitesmoke;
}

@media ( min-width: 720px ) {

	main > nav.medien > ul {
		width: max-content;
		height: auto;
	}

	main > nav.medien > ul:first-of-type {
		justify-self: end;
	}

	main > nav.medien > ul:last-of-type {
		justify-self: start;
	}

}

main > nav.medien > ul > li > svg {
	height: var(--px38);

	padding: var(--px10) var(--px14);
	fill: whitesmoke;
}

main > nav.medien > ul > li:first-of-type > svg {
	fill: rgba(245, 245, 245, .5); /* whitesmoke - halbtransparent*/
}

main > nav.medien > ul > li > a[href^="whatsapp"] {
	display: block;
}

@media ( min-width: 720px ) {

	main > nav.medien > ul > li > a[href^="whatsapp"] {
		display: none;
	}

}

main > nav.medien > ul > li > a > svg {
	height: var(--px38);

	padding: var(--px10);
	transition: fill .4s ease-in-out 0s;
	fill: whitesmoke;
}

main > nav.medien > ul > li > a > svg:hover {
	fill: rgba(245, 245, 245, .5); /* whitesmoke - halbtransparent*/
}

/* MAIN > KARTE */

main > figure.karte {
	border-top: var(--px4) solid var(--schwarz);
	border-bottom: var(--px4) solid var(--schwarz);

	background-color: var(--schwarz);
}

main > figure.karte > div {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	justify-items: center;
	align-items: center;

	background-color: var(--grau);
}

@media ( min-width: 720px ) {

	main > figure.karte > div {
		justify-items: start;
		align-items: center;
	}

}

main > figure.karte > div > a[download] {
	padding: var(--px16) var(--px20) var(--px8) var(--px20);

	font: var(--px26) / var(--px26) var(--schriftart1);
	color: whitesmoke;
	transition: color .4s ease-in-out 0s;
	text-transform: uppercase;
}

main > figure.karte > div > a[download]:hover {
	color: rgba(245, 245, 245, .5); /* whitesmoke - halbtransparent*/
}

main > figure.karte > div > a:not([download]) {
	display: none;
}

main > figure.karte > div > button {
	padding: var(--px8) var(--px20) var(--px16) var(--px20);

	font: var(--px26) / var(--px26) var(--schriftart1);
	color: whitesmoke;
	transition: color .4s ease-in-out 0s;
	text-transform: uppercase;

	cursor: pointer;
}

main > figure.karte > div > button:hover {
	color: rgba(245, 245, 245, .5); /* whitesmoke - halbtransparent*/
}

main > figure.karte > div > a:not([download]) + button {
	padding: var(--px16) var(--px20) var(--px16) var(--px20);
}

main > figure.karte > div > a > svg,
main > figure.karte > div > button > svg {
	display: inline;

	height: var(--px32);

	padding: 0 var(--px8) 0 0;
	fill: whitesmoke;
	transition: fill .4s ease-in-out 0s;
	vertical-align: calc(var(--px6) * -1);
}

main > figure.karte > div > a:hover > svg,
main > figure.karte > div > button:hover > svg {
	fill: rgba(245, 245, 245, .5); /* whitesmoke - halbtransparent*/
}

main > figure.karte > figure {
	display: grid;
	grid-template-rows: 0fr;

	padding: 0;

	background-color: var(--grau);
}

main > figure.karte > figure > div {
	overflow: hidden;
}

main > figure.karte > figure > div > div:first-child {
	width: 100%;
	height: auto;
	aspect-ratio: 100 / 60;
	border-top: var(--px4) solid var(--schwarz);
	border-bottom: var(--px4) solid var(--schwarz);
	padding: 0;

	z-index: 1;
}

main > figure.karte > figure > div > div:last-child:has(> p:last-child) {
	padding: var(--px24) 0;

	font: var(--px22) / var(--px26) var(--schriftart2);
	color: whitesmoke;
	text-align: center;
}

main > figure.karte > figure > div > div:last-child:has(> p:last-child) > span {
	line-height: var(--px30);
}

main > figure.karte > figure > div > div:last-child:has(> span:last-child) {
	padding: var(--px10) 0 var(--px8) 0;

	font: var(--px24) / var(--px24) var(--schriftart1);
	color: whitesmoke;
	text-transform: uppercase;
	text-align: center;
}

@media ( min-width: 720px ) {

	main > figure.karte > figure > div > div:last-child > br:first-of-type {
		display: none;
	}

}

main > figure.karte > figure > div > div:last-child > p {
	padding: var(--px8) 0 0 0;

	font: var(--px14) / var(--px18) var(--schriftart2);
}

main > figure.karte > figure > div > div:last-child > p > span {
	white-space: nowrap;
}

main > figure.karte > figure > div > div:last-child > svg {
	height: var(--px26);
	display: inline;

	padding: 0 var(--px8) 0 0;
	fill: whitesmoke;
	vertical-align: calc(var(--px4) * -1);
}

/* MAIN > FOTO */

main > figure.foto {
	border-top: var(--px4) solid var(--schwarz);
	border-bottom: var(--px4) solid var(--schwarz);

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(4, 1fr);
	column-gap: 0;
	row-gap: var(--px4);
	position: relative;

	background-color: var(--schwarz);
}

@media ( min-width: 720px ) {

	main > figure.foto {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		column-gap: var(--px4);
		row-gap: var(--px4);
	}

}

main > figure.foto > figure {
	display: grid;
  	place-items: stretch;
	place-content: stretch;
	text-align: center;
	gap: var(--px4);

	background-color: var(--schwarz);
}

main > figure.foto > figure > img {
	width: 100%;
	aspect-ratio: 464 / 348;

	cursor: default;
}

@media ( min-width: 720px ) {

	main > figure.foto > figure > img {
		cursor: pointer;
	}

	main > figure.foto > figure:nth-of-type(1) > img,
	main > figure.foto > figure:nth-of-type(2) > img {
		order: 2;
	}

	main > figure.foto > figure:nth-of-type(3) > img,
	main > figure.foto > figure:nth-of-type(4) > img {
		order: 1;
	}

}

main > figure.foto > figure > figcaption {
	height: var(--px22);

	padding: var(--px6) 0;

	font: var(--px22) / var(--px22) var(--schriftart1);
	color: whitesmoke;
	text-transform: uppercase;
	
	background-color: var(--gelb);
}

@media ( min-width: 720px ) {

	main > figure.foto > figure:nth-of-type(1) > figcaption,
	main > figure.foto > figure:nth-of-type(2) > figcaption {
		order: 1;
	}

	main > figure.foto > figure:nth-of-type(3) > figcaption,
	main > figure.foto > figure:nth-of-type(4) > figcaption {
		order: 2;
	}

}

main > figure.foto > div {
	display: none;
}

@media ( min-width: 720px ) {

	main > figure.foto > div {
		width: 100%;
		height: auto;
		aspect-ratio: 932 / 776;

		display: none;

		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;

		background-color: var(--schwarz);
	}

	main > figure.foto > div > img {
		width: 100%;
		aspect-ratio: 932 / 699;

		position: absolute;
		top: 0;
		left: 0;
		transform: translate(0, 0);
		z-index: 2;

		cursor: pointer;
	}
	
	main > figure.foto > div > div:first-of-type {
		width: var(--px932);
		height: var(--px73);

		display: grid;
		place-items: center;

		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 3;

		font: var(--px24) / var(--px24) var(--schriftart1);
		color: whitesmoke;
		text-transform: uppercase;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

		background-color: var(--gelb);
	}
	
	main > figure.foto > div > div:last-of-type {
		width: 100%;
		height: auto;
		aspect-ratio: 932 / 699;

		display: none;

		position: absolute;
		top: 0;
		left: 0;
		transform: translate(0, 0);
		z-index: 4;
	}
	
	main > figure.foto > div > button {
		display: none;

		position: absolute;
		bottom: 0;
		right: 0;
		transform: translate(calc(var(--px16) * -1), calc(var(--px10) * -1));
		z-index: 5;
		
		cursor: pointer;
	}

	main > figure.foto > div > button > svg {
		height: var(--px42);

		padding: var(--px6);

		transition: fill .4s ease-in-out 0s;
		fill: whitesmoke;
	}

	main > figure.foto > div > button > svg:hover {
		fill: rgba(245, 245, 245, .5); /* whitesmoke - halbtransparent*/
	}

}

/* MAIN > VIDEO */

main > figure.video {
	border-top: var(--px4) solid var(--schwarz);
	border-bottom: var(--px4) solid var(--schwarz);

	display: grid;
  	place-items: stretch;
	place-content: stretch;
	text-align: center;
	gap: var(--px4);

	background-color: var(--schwarz);
}

main > figure.video > iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 932 / 524.25;
}

main > figure.video > figcaption {
	height: var(--px22);

	padding: var(--px6) 0;

	font: var(--px22) / var(--px22) var(--schriftart1);
	color: whitesmoke;
	text-transform: uppercase;
	
	background-color: var(--gelb);
}

/* ------ */
/* FOOTER */
/* ------ */

footer {
	grid-area: footer;

	border: var(--px20) solid var(--grau-hell);
	padding: var(--px4);

	background-color: var(--schwarz);
}

/* FOOTER > NAVIGATION */

footer > :nth-child(1) > ul {
	display: grid;
	grid-template-columns: 7.5vw 1fr 7.5vw;
	grid-template-rows: 7.5vw;
	column-gap: var(--px4);
	row-gap: 0;
}

@media ( min-width: 720px ) {

	footer > :nth-child(1) > ul {
		grid-template-columns: 4.8vw 1fr 4.8vw;
		grid-template-rows: 4.8vw;
	}

}

@media ( min-width: 1000px ) {

	footer > :nth-child(1) > ul {
		grid-template-columns: 48px 1fr 48px;
		grid-template-rows: 48px;
	}

}

footer > :nth-child(1) > ul > li {
	display: grid;
  	place-items: center;
}

footer > :nth-child(1) > ul > li:nth-of-type(1),
footer > :nth-child(1) > ul > li:nth-of-type(3) {
	background-color: var(--violett);
}

footer > :nth-child(1) > ul > li:nth-of-type(2) {
	background-color: var(--grau);
}


footer > :nth-child(1) > ul > li svg {
	height: var(--px36);

	padding: var(--px6) var(--px14);

	transition: fill .4s ease-in-out 0s;
	fill: whitesmoke;
}

footer > :nth-child(1) > ul > li:has(a) svg:hover {
	fill: rgba(245, 245, 245, .5);
}

footer > :nth-child(1) > ul > li > a[href^="https"] {
	font: var(--px20) / var(--px20) var(--schriftart1);
	color: whitesmoke;
	transition: color .4s ease-in-out 0s;
	text-transform: uppercase;
}

@media ( min-width: 720px ) {

	footer > :nth-child(1) > ul > li > a[href^="https"] {
		font: var(--px26) / var(--px26) var(--schriftart1);
	}

}

footer > :nth-child(1) > ul > li > a[href^="https"]:hover {
	color: rgba(245, 245, 245, .5);
}

/* -------- */
/* KURZINFO */
/* -------- */

body > div:last-of-type {
	width: max-content;
	height: auto;

	border: var(--px4) solid var(--schwarz);

	display: none;

	position: absolute;
	z-index: 9;
}

body > div:last-of-type.braun {
	background-color: var(--braun);
}

body > div:last-of-type.gelb {
	background-color: var(--gelb);
}

body > div:last-of-type.grau {
	background-color: var(--grau);
}

body > div:last-of-type.grün {
	background-color: var(--grün);
}

body > div:last-of-type.rosa {
	background-color: var(--rosa);
}

body > div:last-of-type.violett {
	background-color: var(--violett);
}

body > div:last-of-type > p {
	padding: var(--px8) var(--px14);
	
	font: var(--px18) / var(--px18) var(--schriftart1);
	color: whitesmoke;
	text-transform: uppercase;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}