@charset "utf-8";

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

:root {
	--noto-sans-semibold: "Noto Sans Semibold", "Noto Sans Semibold AR", "Noto Sans Semibold HE", "Noto Sans Semibold HI";
	--noto-sans-regular:  "Noto Sans Regular", "Noto Sans Regular AR", "Noto Sans Regular HE", "Noto Sans Regular HI";
	--noto-sans-light:    "Noto Sans Light", "Noto Sans Light AR", "Noto Sans Light HE", "Noto Sans Light HI";

	--schwarz:   #1c1c1cff;
	--schwarz80: #1c1c1ccc; /* 80% = 204 Dec = cc Hex */
	--rot:       #d9232eff;
	--orange:    #fe7716ff;
	--gelb:      #f2d114ff;
	--grün:      #80bd01ff;
	--cyan:      #01b6b2ff;
	--blau:      #1393dcff;
	--violett:   #6d46c5ff;

	--tag1:      #ebe3cdff;
	--tag2:      #a5b076ff;
	--nacht1:    #141c32ff;
	--nacht2:    #5a4f89ff;

	--regenbogen:  linear-gradient(90deg, var(--rot), var(--orange), var(--gelb), var(--grün), var(--cyan), var(--blau), var(--violett), var(--blau), var(--cyan), var(--grün), var(--gelb), var(--orange), var(--rot), var(--orange), var(--gelb), var(--grün), var(--cyan), var(--blau), var(--violett));
	--streifen:    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MCIgaGVpZ2h0PSI5Ij4KPHJlY3Qgd2lkdGg9IjkwIiBoZWlnaHQ9IjkiIGZpbGw9IiNmMmYyZjIiPjwvcmVjdD4KPHJlY3Qgd2lkdGg9IjkwIiBoZWlnaHQ9IjIiIGZpbGw9IiNmZmZhZmEiPjwvcmVjdD4KPHJlY3QgeT0iMiIgd2lkdGg9IjkwIiBoZWlnaHQ9IjMiIGZpbGw9IiNlY2VjZWMiPjwvcmVjdD4KPC9zdmc+");	
	--rauschen:    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC42NSIgbnVtT2N0YXZlcz0iMTAiIHN0aXRjaFRpbGVzPSJzdGl0Y2giPjwvZmVUdXJidWxlbmNlPgo8L2ZpbHRlcj4KPHJlY3Qgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiMwMDAiPjwvcmVjdD4KPHJlY3Qgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIGZpbHRlcj0idXJsKCNuKSIgb3BhY2l0eT0iMC4yNSI+PC9yZWN0Pgo8L3N2Zz4=");
	--icon:        url("/icons/michaelianger.svg");
	--youtube:     url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2OCA0OCI+PHBhdGggZD0iTTY2LjUyIDcuNzRjLS43OC0yLjkzLTIuNDktNS40MS01LjQyLTYuMTlDNTUuNzkuMTMgMzQgMCAzNCAwUzEyLjIxLjEzIDYuOSAxLjU1Yy0yLjkzLjc4LTQuNjMgMy4yNi01LjQyIDYuMTlDLjA2IDEzLjA1IDAgMjQgMCAyNHMuMDYgMTAuOTUgMS40OCAxNi4yNmMuNzggMi45MyAyLjQ5IDUuNDEgNS40MiA2LjE5QzEyLjIxIDQ3Ljg3IDM0IDQ4IDM0IDQ4czIxLjc5LS4xMyAyNy4xLTEuNTVjMi45My0uNzggNC42NC0zLjI2IDUuNDItNi4xOUM2Ny45NCAzNC45NSA2OCAyNCA2OCAyNHMtLjA2LTEwLjk1LTEuNDgtMTYuMjZ6IiBmaWxsPSJyZWQiIC8+PHBhdGggZD0iTTQ1IDI0IDI3IDE0djIwIiBmaWxsPSJ3aGl0ZSIgLz48L3N2Zz4=");
	--google-maps: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDgwIiBoZWlnaHQ9IjIwNDAiIHZpZXdCb3g9IjAgMCAxNDgwIDIwNDAiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZCI+DQoJPHBhdGggZmlsbD0iI2VhNDMzNSIgZD0iTTcxOC41IDkuNWMxNzMuNDU2LTEuMjM1IDMyOS4xMiA0OS45MzIgNDY3IDE1My41YTExNTMuNDIzIDExNTMuNDIzIDAgMCAxIDQ0IDM3YzQwLjA2IDM5LjQ0NyA3Ny45IDgwLjYxMyAxMTMuNSAxMjMuNSA5Ni40MSAxMjcuMjMzIDEzOC43NCAyNzAuOSAxMjcgNDMxLTUuODcgNzQuMDE0LTIwLjIgMTQ2LjM0Ny00MyAyMTdhMTUwNi44OTggMTUwNi44OTggMCAwIDEtOTMuNSAyMjVjLTQyLjYzIDgxLjMtODguOCAxNjAuMy0xMzguNSAyMzdhNzUwMC4wNCA3NTAwLjA0IDAgMCAxLTE0OSAyMTNjLTUwLjYzNiA2Ni42NC0xMDEuMzAyIDEzMy4zMS0xNTIgMjAwYTkyOTQuNjYzIDkyOTQuNjYzIDAgMCAwLTE0OSAxNzVjLTEuNzM5IDIuMjQtMy45MDYgMy45MS02LjUgNWEyNzkzLjI1NyAyNzkzLjI1NyAwIDAgMC05NS41LTEwNGMtMjEuMDI5LTIzLjY5LTQyLjAyOS00Ny4zNi02My03MWE0ODkwMS4xOTIgNDg5MDEuMTkyIDAgMCAwLTE4OS0yNDcgMTIwOTkuMjU1IDEyMDk5LjI1NSAwIDAgMS0xMjItMTY4Yy01OC45MDUtODUuNjctMTEyLjIzOC0xNzUtMTYwLTI2OC00MS4yMi04Mi45OS03MC44ODctMTY5Ljk5NC04OS0yNjFDOS4yNDMgODQzLjQ1NiA0Ljc0MyA3NzguOTU2IDYuNSA3MTRjNS41NzQtMjI4LjE0NCA5Ny4yNC00MTIuNDc3IDI3NS01NTNDNDEwLjkxIDY0LjY5MiA1NTYuNTc3IDE0LjE5MiA3MTguNSA5LjV6Ii8+Cgk8cGF0aCBmaWxsPSIjZWE0MzM1IiBkPSJNNzIwLjUgMTMwLjVhNzY1LjQ4MSA3NjUuNDgxIDAgMCAxIDE1OSAxNS41YzgwLjQ4OCAyMi4wODMgMTU0LjQ5IDU3LjI0OSAyMjIgMTA1LjUgMzAuMDkgMjMuNTggNTguMjYgNDkuNTggODQuNSA3OGEzMzUxLjEzIDMzNTEuMTMgMCAwIDEgNzAgODBjMzcuMyA1My45NDUgNjQuOTcgMTEyLjYxMiA4MyAxNzYgMTkuMyAxMTMuMTA1IDExLjk3IDIyNC40MzktMjIgMzM0YTE1MDAuOTA1IDE1MDAuOTA1IDAgMCAxLTY4IDE3MmMtNDIuMzQgODYuMzgtODkuMDEgMTcwLjA1LTE0MCAyNTFhNTA1Ni41OTcgNTA1Ni41OTcgMCAwIDEtMTUzIDIyMmMtNDkuNjI5IDY1LjIxLTk5LjI5NiAxMzAuNTQtMTQ5IDE5NmE0Mjc3LjY0NiA0Mjc3LjY0NiAwIDAgMC03MSA4MiA0MDQ4LjI5OCA0MDQ4LjI5OCAwIDAgMS03OC04OCA5MDc3LjIyMyA5MDc3LjIyMyAwIDAgMC0xMzctMTc5IDEwMzgyLjY4IDEwMzgyLjY4IDAgMCAxLTE0NS0xOTcgMzE0OS41NTggMzE0OS41NTggMCAwIDEtOTktMTU2IDE5OTcuNjIyIDE5OTcuNjIyIDAgMCAxLTc4LTE1MCAxMDcwLjY5IDEwNzAuNjkgMCAwIDEtNTQtMTUxYy0xMy4xODctNjguNTMyLTE4LjY4Ny0xMzcuNjk5LTE2LjUtMjA3LjVBNzI1LjIzMyA3MjUuMjMzIDAgMCAxIDE0MiA1ODAuNWMxOS4wODgtNjYuNDk2IDQ3LjA4OC0xMjguODI5IDg0LTE4NyA0MC42NzItNTUuMzQgODguMTcyLTEwNC4xNzQgMTQyLjUtMTQ2LjUgNjIuMTk3LTQyLjQyNyAxMjkuNTMtNzQuNzYgMjAyLTk3YTQ4NC4wNzIgNDg0LjA3MiAwIDAgMSA4My0xNSAxMTY5LjI4NCAxMTY5LjI4NCAwIDAgMSA2Ny00LjV6Ii8+Cgk8cGF0aCBmaWxsPSIjYjQxNDEyIiBkPSJNNzIxLjUgNDE1LjVjMTIwLjU4OC0zLjA4NiAyMTkuNzU1IDQwLjU4MSAyOTcuNSAxMzEgNjkuMjIgOTAuMDY5IDkyLjU1IDE5MS4wNjkgNzAgMzAzLTMyLjE1IDEyNS44NzctMTA4Ljk3OSAyMTEuMzgtMjMwLjUgMjU2LjUtMTA3IDM0LjIzLTIwOSAyMy4yMy0zMDYtMzMtOTIuNDA1LTU4LjU3LTE0Ny41NzItMTQyLjQwMy0xNjUuNS0yNTEuNS0xNC4xNzctMTI0LjUwOCAyMy42NTYtMjI5LjY3NSAxMTMuNS0zMTUuNSA2My40MzItNTQuNjU3IDEzNy4wOTktODQuODIzIDIyMS05MC41eiIvPgoJPHBhdGggZmlsbD0iI2I0MTQxMiIgZD0iTTcyNS41IDUzNy41YzkxLjkzMy0yLjI4OCAxNjMuNDMzIDM0LjM3OSAyMTQuNSAxMTAgNDcuMzMxIDgyLjA0NCA0Ny4zMzEgMTY0LjA0NCAwIDI0Ni00My40NDUgNjYuMzI4LTEwNC45NDUgMTAyLjgyOC0xODQuNSAxMDkuNS05MS45NiAyLjc3LTE2My40Ni0zMy43MjctMjE0LjUtMTA5LjUtNDkuNjc3LTg3LjY4LTQ3LjAxMS0xNzMuNjggOC0yNTggNDMuOTg3LTU5LjA4NCAxMDIuODIxLTkxLjc1MSAxNzYuNS05OHoiLz4KPC9zdmc+DQo=");

	--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)); --px9: calc(9 * 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));

	--px70: calc(70 * var(--m)); --px85: calc(85 * var(--m)); --px96: calc(96 * 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)); --px9: calc(9 * 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));

		--px70: calc(70 * var(--t)); --px85: calc(85 * var(--t)); --px96: calc(96 * 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)); --px9: calc(9 * 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));

		--px70: calc(70 * var(--d)); --px85: calc(85 * var(--d)); --px96: calc(96 * var(--d));
	}
	
}

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

@font-face {
	font-family: "Noto Sans Semibold";
	font-display: swap;
	src: url("../fonts/noto-sans-semibold.woff2") format("woff2");
}

@font-face {
	font-family: "Noto Sans Semibold AR";
	font-display: swap;
	src: url("../fonts/noto-sans-semibold.ar.woff2") format("woff2");
}

@font-face {
	font-family: "Noto Sans Semibold HE";
	font-display: swap;
	src: url("../fonts/noto-sans-semibold.he.woff2") format("woff2");
}

@font-face {
	font-family: "Noto Sans Semibold HI";
	font-display: swap;
	src: url("../fonts/noto-sans-semibold.hi.woff2") format("woff2");
}

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

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

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

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

@font-face {
	font-family: "Noto Sans Light";
	font-display: swap;
	src: url("../fonts/noto-sans-light.woff2") format("woff2");
}

@font-face {
	font-family: "Noto Sans Light AR";
	font-display: swap;
	src: url("../fonts/noto-sans-light.ar.woff2") format("woff2");
}

@font-face {
	font-family: "Noto Sans Light HE";
	font-display: swap;
	src: url("../fonts/noto-sans-light.he.woff2") format("woff2");
}

@font-face {
	font-family: "Noto Sans Light HI";
	font-display: swap;
	src: url("../fonts/noto-sans-light.hi.woff2") format("woff2");
}

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

@keyframes regenbogen-ltr {
	from { } 
	to   { transform: translate(-66.6666%, 0); }
}

@keyframes regenbogen-rtl {
	from { } 
	to   { transform: translate(66.6666%, 0); }
}

@keyframes titel {
	from { } 
	to   { transform: translate(0, var(--px70)); opacity: 1; }
}

@keyframes live { 
	from { } 
	to   { opacity: 1; }
}

@keyframes sprachmenü-ein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes sprachmenü-aus {
	from { opacity: 1; }
	to   { opacity: 0; }
}

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

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

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

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

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

	background-color: transparent;
}

html {
	font-size: 16px;

	overflow-x: hidden;
}

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

svg {
	aspect-ratio: 1 / 1;
}

html[dir="rtl"] svg {
	transform: scale(-1, 1);
}

ul {
	list-style: none;
}

p {
	hyphens: auto;
}

html[dir="rtl"] p {
	hyphens: none;
}

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

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

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

	display: grid;
	grid-template-columns: [header-start footer-start] 1fr [main-start] 96vw [main-end] 1fr [footer-end header-end];
	grid-template-rows: [header-start] 2.5vw 26.5625vw 17.8125vw [header-end main-start] auto [main-end footer-start] 13.125vw 21.5625vw 2.5vw [footer-end];

	background-color: snow;
}

@media ( min-width: 720px ) {

	body {
		display: grid;
		grid-template-columns: [header-start footer-start] 1fr [main-start] 98vw [main-end] 1fr [footer-end header-end];
		grid-template-rows: [header-start] 1.6vw 13vw 8.4vw [header-end main-start] auto [main-end footer-start] 8.4vw 13.8vw 1.6vw [footer-end];
	}

}

@media ( min-width: 1000px ) {

	body {
		display: grid;
		grid-template-columns: [header-start footer-start] 1fr [main-start] 980px [main-end] 1fr [footer-end header-end];
		grid-template-rows: [header-start] 16px 130px 84px [header-end main-start] auto [main-end footer-start] 84px 138px 16px [footer-end];
	
		background-image: var(--streifen);
		background-size: 90px 9px;
		background-position: center top;
		background-repeat: repeat;
	}

}

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

header {
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	grid-area: header;
}

/* HEADER > REGENBOGEN */

header > :nth-child(1) {
	grid-column: header-start / header-end;
	grid-row: 1;
	z-index: 5;

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

header > :nth-child(1) > div {
	width: 300%;
  	height: 100%;

	background-image: var(--regenbogen);
	background-size: 100% 100%;
	animation: regenbogen-ltr normal 12s linear infinite backwards;
}

html[dir="rtl"] header > :nth-child(1) > div {
	animation: regenbogen-rtl normal 12s linear infinite backwards;
}

/* HEADER > TITEL */

header > :nth-child(2) {
	grid-column: main-start / main-end;
	grid-row: 2;
	z-index: 4;
}

header > :nth-child(2) > h1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	font: var(--px30) / var(--px44) var(--noto-sans-semibold);
	letter-spacing: calc(var(--px1) * -1);
	color: snow;

	transform: translate(0, calc(var(--px96) * -1));
	opacity: 0;
	animation: titel 3.5s ease-in-out 0s forwards;
}

@media ( min-width: 720px ) {

	header > :nth-child(2) > h1 {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		font: var(--px34) / var(--px48) var(--noto-sans-semibold);

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

@media ( min-width: 1000px ) {

	header > :nth-child(2) > h1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		transform: translate(0, -42px);
	}
}

html[dir="rtl"] header > :nth-child(2) > h1 {
	letter-spacing: 0;
}

header > :nth-child(2) > h1 > span:first-of-type::after {
	display: inline-block;

	content: "";
	margin-inline: 0;
}

@media ( min-width: 720px ) {

	header > :nth-child(2) > h1 > span:first-of-type::after {
		margin-inline: 0 var(--px8);
	}
}

header > :nth-child(3) {
	grid-column: header-start / header-end;
	grid-row: 2;
	z-index: 3;

	background-color: black;
	background-image: var(--rauschen);
	box-shadow: 0 var(--px12) var(--px6) calc(var(--px6) * -1) var(--schwarz80);
}

/* HEADER > LIVE */

header > :nth-child(4) {
	grid-column: main-start / main-end;
	grid-row: 3;
	z-index: 2;
}

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

	padding: var(--px14) 0 var(--px10) 0;
	font: var(--px28) / var(--px32) var(--noto-sans-semibold);
	color: var(--schwarz);
	
	letter-spacing: calc(var(--px1) * -1);
	opacity: 0;
	animation: live 4s ease-in-out .5s forwards;
}

@media ( min-width: 720px ) {

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

		font: var(--px30) / var(--px34) var(--noto-sans-semibold);
	}
}

@media ( min-width: 1000px ) {

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

html[dir="rtl"] header > :nth-child(4) > h2 {
	letter-spacing: 0;
}

header > :nth-child(4) > h2 > span:first-of-type > svg {
	height: var(--px50);
	display: inline;

	margin: var(--px2) 0;
	margin-inline: 0 var(--px6);
	vertical-align: calc(var(--px16) * -1);
}

header > :nth-child(4) > h2 > span:first-of-type:after {
	content: "";
	margin-inline: 0;
}

@media ( min-width: 720px ) {
	header > :nth-child(4) > h2 > span:first-of-type:after {
		content: "•";
		margin-inline: var(--px8);
	}
}

header > :nth-child(4) > h2 > span:last-of-type {
	padding: var(--px4) 0 0 0;
}

@media ( min-width: 720px ) {
	header > :nth-child(4) > h2 > span:last-of-type {
		padding: var(--px14) 0 var(--px10) 0;
	}
}

header > :nth-child(5) {
	grid-column: header-start / header-end;
	grid-row: 3;
	z-index: 1;

	background-color: var(--cyan);
	box-shadow: 0 var(--px12) var(--px6) calc(var(--px6) * -1) var(--schwarz80);
}

/* HEADER > SPRACHEN */

header > :nth-child(6) {
	width: max-content;

	display: none;

	position: absolute;
	top: var(--px16);
	z-index: 9;
}

html[dir="ltr"] header > :nth-child(6) {
	right: 50%;
	transform: translate(50%, 0);
}

html[dir="rtl"] header > :nth-child(6) {
	left: 50%;
	transform: translate(-50%, 0);
}

@media ( min-width: 1000px ) {

	html[dir="ltr"] header > :nth-child(6) {
		right: 0;
		transform: translate(calc(var(--px24) * -1), 0);
	}

	html[dir="rtl"] header > :nth-child(6) {
		left: 0;
		transform: translate(var(--px24), 0);
	}
}

header > :nth-child(6) > ul {
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-template-rows: repeat(8, auto);
	justify-items: start;
	align-items: center;
	
	border: var(--px3) solid snow;
	border-top: 0;
	border-radius: 0 0 var(--px12) var(--px12);
	padding: var(--px8) 0;

	background-color: black;
	background-image: var(--rauschen);
	box-shadow: 0 var(--px12) var(--px6) calc(var(--px6) * -1) var(--schwarz80);
}

@media ( min-width: 720px ) {

	header > :nth-child(6) > ul {
		display: grid;
		grid-template-columns: repeat(4, auto);
		grid-template-rows: repeat(6, auto);
		justify-items: end;
		align-items: center;
	}
}

@media ( min-width: 1000px ) {

	header > :nth-child(6) > ul {
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: repeat(24, auto);
		justify-items: end;
		align-items: center;
	}
}

header > :nth-child(6) > ul > li {
	width: calc(100% - 2 * var(--px12));

	display: none;

	border-radius: 0 0 var(--px12) var(--px12);
	padding: var(--px6) var(--px12);
	font: var(--px20) / var(--px20) var(--noto-sans-semibold);
	color: snow;

	opacity: 1;
}

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

@media ( min-width: 1000px ) {
	header > :nth-child(6) > ul > li span {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
}

header > :nth-child(6) > ul > li span > img {
	width: var(--px36);
	aspect-ratio: 36 / 24;

	display: inline-block;

	margin-inline: 0 var(--px12);
	border-radius: var(--px4);
	vertical-align: calc(var(--px4) * -1);

	order: 1;
}

@media ( min-width: 1000px ) {
	header > :nth-child(6) > ul > li span > img {
		margin-inline: var(--px12) 0;

		order: 2;
	}
}

header > :nth-child(6) > ul > li span > span {
	order: 2;
}

@media ( min-width: 1000px ) {
	header > :nth-child(6) > ul > li span > span {
		order: 1;
	}
}

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

main {
	grid-area: main;

	display: grid;
	grid-template-columns: [webcam-start standort-start sonne-start wetter-start wetterradar-start pwa-start] 1fr [webcam-end standort-end sonne-end wetter-end wetterradar-end pwa-end];
	grid-template-rows: [webcam-start] auto [webcam-end standort-start] auto [standort-end sonne-start] calc(var(--px46) + var(--px20) + 53.8786vw + 2 * var(--px3) + var(--px12)) [sonne-end wetter-start] calc(var(--px46) + var(--px20) + 365px + 2 * var(--px3) + var(--px12)) [wetter-end wetterradar-start] calc(var(--px46) + var(--px20) + 95.0625vw + 2 * var(--px3) + var(--px12)) [wetterradar-end pwa-start] auto [pwa-end];
	column-gap: var(--px24);
	row-gap: var(--px24);
	justify-items: stretch;
	
	padding: var(--px24) 0;
}

@media ( min-width: 720px ) {

	main {
		grid-template-columns: [webcam-start standort-start sonne-start wetterradar-start pwa-start] 1fr [sonne-end wetter-start] calc(300px + 2 * .3vw) [webcam-end standort-end wetter-end wetterradar-end pwa-end];
		grid-template-rows: [webcam-start] auto [webcam-end standort-start] auto [standort-end sonne-start wetter-start] calc(4.6vw + 2vw + 365px + 2 * .3vw + 1.2vw) [sonne-end wetter-end wetterradar-start] calc(4.6vw + 2vw + 97.6vw + 2 * .3vw + 1.2vw) [wetterradar-end pwa-start] auto [pwa-end];
	}

}

@media ( min-width: 1000px ) {

	main {
		grid-template-columns: [webcam-start standort-start sonne-start wetterradar-start pwa-start] 1fr [sonne-end wetter-start] calc(300px + 2 * 3px) [webcam-end standort-end wetter-end wetterradar-end pwa-end];
		grid-template-rows: [webcam-start] auto [webcam-end standort-start] auto [standort-end sonne-start wetter-start] calc(46px + 20px + 365px + 2 * 3px + 12px) [sonne-end wetter-end wetterradar-start] calc(46px + 20px + 976px + 2 * 3px + 12px) [wetterradar-end pwa-start] auto [pwa-end];
	}
}

/* MAIN > ÜBERSCHRIFT & TEXT */

main > section > h3 {
	max-width: 96vw; /* Nur relevant für Mobile mit langem Text für "6. PROGRESSIVE WEB APP (PWA)". "overflow: hidden" funktioniert nicht richtig in Zusammenhang mit Pseudo-Element "::before" */
	
	font: var(--px30) / var(--px30) var(--noto-sans-semibold);
	color: var(--schwarz);
	text-align: start;

	letter-spacing: calc(var(--px1) * -1);
}

html[dir="rtl"] main > section > h3 {
	letter-spacing: 0;
}

main > section > h3::before {
	display: inline-block;

	content: "";
	width: var(--px46);
	height: var(--px46);
	margin-inline: 0 var(--px12);
	background-image: var(--icon);
	background-size: var(--px46) var(--px46);
	background-position: center center;
	background-repeat: no-repeat;
	vertical-align: calc(var(--px12) * -1);
}

html[dir="rtl"] main > section > h3::before {
	transform: scale(-1, 1);
}

main > section p {
	padding: var(--px12) 0 0 0;
	font: var(--px22) / var(--px28) var(--noto-sans-light);
	color: var(--schwarz);
	text-align: justify;
}

/* MAIN > WEBCAM */

main > :nth-child(1) {
	grid-area: webcam;
}

main > :nth-child(1) > p:first-of-type > span {
	display: inline;

	font-family: var(--noto-sans-semibold);
	cursor: pointer;
}

main > :nth-child(1) > div:has(> div > p) {
	display: grid;
	grid-template-rows: 0fr;
}

main > :nth-child(1) > div:has(> div > p) > div {
	overflow: hidden;
}

main > :nth-child(1) > div:has(> div > p) > div > p > span {
	display: none;

	font-family: var(--noto-sans-semibold);
	cursor: pointer;
}

main > :nth-child(1) > div:has(> img) {
	position: relative;

	width: calc(100% - 2 * var(--px3));
	height: auto;
	aspect-ratio: 974 / 547.875;

	margin: var(--px24) 0 0 0;
	border: var(--px3) solid snow;
	border-radius: var(--px12);

	background-color: snow;
	box-shadow: 0 calc(var(--px10) * -1) var(--px6) calc(var(--px6) * -1) var(--schwarz80), 0 var(--px12) var(--px6) calc(var(--px6) * -1) var(--schwarz80);
}

main > :nth-child(1) > div:has(> img) > img {
	width: 100%;
	height: auto;
	aspect-ratio: 974 / 547.875;

	border-radius: var(--px9);
}

main > :nth-child(1) > div:has(> img) > div {
	width: 100%;
	height: auto;
	aspect-ratio: 974 / 547.875;

	position: absolute;
	top: 0;
	left: 0;

	border-radius: var(--px9);

	background-color: transparent;
	background-image: var(--youtube);
	background-size: 68px 48px;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
}

main > :nth-child(1) > iframe {
	width: calc(100% - 2 * var(--px3));
	height: auto;
	aspect-ratio: 974 / 547.875;

	margin: var(--px24) 0 0 0;
	border: var(--px3) solid snow;
	border-radius: var(--px12);

	background-color: snow;
	box-shadow: 0 calc(var(--px10) * -1) var(--px6) calc(var(--px6) * -1) var(--schwarz80), 0 var(--px12) var(--px6) calc(var(--px6) * -1) var(--schwarz80);
}

main > :nth-child(1) > div:has(> div > svg) {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	width: max-content;
	margin: var(--px24) auto var(--px4) auto;
	padding: var(--px4) var(--px12) var(--px8) var(--px12);
	border: var(--px3) solid snow;
	border-radius: var(--px12);

	background-image: var(--rauschen);
	box-shadow: 0 calc(var(--px10) * -1) var(--px6) calc(var(--px6) * -1) var(--schwarz80), 0 var(--px12) var(--px6) calc(var(--px6) * -1) var(--schwarz80);
}

main > :nth-child(1) > div:has(> div > svg) > div {
	margin-inline: var(--px8);
}

main > :nth-child(1) > div:has(> div > svg) > div > svg {
	height: var(--px26);
	display: inline;

	margin-inline: 0 var(--px6);
	color: snow;
	transform: translate(0, var(--px6));
}

html[dir="rtl"] main > :nth-child(1) > div:has(> div > svg) > div > svg {
	transform: scale(-1, 1) translate(0, var(--px6));
}

main > :nth-child(1) > div:has(> div > svg) > div > span {
	font: var(--px22) / var(--px26) var(--noto-sans-light);
	color: snow;
}

/* MAIN > STANDORT */

main > :nth-child(2) {
	grid-area: standort;
}

main > :nth-child(2) > div {
	width: calc(100% - 2 * var(--px3));
	height: auto;
	aspect-ratio: 974 / 547.875;

	position: relative;

	margin: var(--px20) 0 var(--px16) 0;
	border: var(--px3) solid snow;
	border-radius: var(--px12);

	background-color: snow;
	box-shadow: 0 calc(var(--px10) * -1) var(--px6) calc(var(--px6) * -1) var(--schwarz80), 0 var(--px12) var(--px6) calc(var(--px6) * -1) var(--schwarz80);
}

main > :nth-child(2) > div > img {
	width: 100%;
	height: auto;
	aspect-ratio: 974 / 547.875;

	border-radius: var(--px9);
}

main > :nth-child(2) > div > div {
	width: 100%;
	height: auto;
	aspect-ratio: 974 / 547.875;

	position: absolute;
	top: 0;
	left: 0;

	border-radius: var(--px9);

	background-color: transparent;
	background-image: var(--google-maps);
	background-size: 29px 40px;
	background-position: center calc(50% - 20px);
	background-repeat: no-repeat;
	cursor: default;
}

/* MAIN > STANDORT > INFO (WENDELSTEIN & ZUGSPITZE) */

.info {
	position: relative;

	border: 3px solid snow;
	border-radius: 4px;
	padding: 6px 10px;
	font: 16px / 16px var(--noto-sans-regular);
	color: snow;
}

.tag {
	background-color: var(--tag2);
}

.nacht {
	background-color: var(--nacht2);
}

.info::after {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%, 2.5px);

	content: "";
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid snow;
}

/* MAIN > SONNENAUFGANG & SONNENUNTERGANG */

main > :nth-child(3) {
	grid-area: sonne;
}

main > :nth-child(3) > div {
	width: calc(100% - 2 * var(--px3));
	height: 53.8786vw /* ( 96vw - 2 * 0.46875vw ) / 644 * 365 */;

	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: stretch;

	margin: var(--px20) 0 var(--px12) 0;
	border: var(--px3) solid snow;
	border-radius: var(--px12);

	background-color: snow;
	box-shadow: 0 calc(var(--px10) * -1) var(--px6) calc(var(--px6) * -1) var(--schwarz80), 0 var(--px12) var(--px6) calc(var(--px6) * -1) var(--schwarz80);
}

@media ( min-width: 720px ) {

	main > :nth-child(3) > div {
		height: 365px;
	}

}

main > :nth-child(3) > div.tag {
	background-color: var(--tag1);
}

main > :nth-child(3) > div.nacht {
	background-color: var(--nacht1);
}

main > :nth-child(3) > div > div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	border-top: var(--px3) solid snow;
	border-bottom: var(--px3) solid snow;
	padding: var(--px6) 0;

	font: var(--px24) / var(--px24) var(--noto-sans-regular);
	color: snow;
}

main > :nth-child(3) > div > div.tag {
	background-color: var(--tag2);
}

main > :nth-child(3) > div > div.nacht {
	background-color: var(--nacht2);
}

main > :nth-child(3) > div > div > svg {
	height: var(--px32);

	color: snow;
	vertical-align: calc(var(--px8) * -1);
}

main > :nth-child(3) > div > div > svg:first-child {
	margin-inline: 0 var(--px12);
}

main > :nth-child(3) > div > div > svg:last-child {
	margin-inline: var(--px12) 0;
}

/* MAIN > WETTERVORHERSAGE */

main > :nth-child(4) {
	grid-area: wetter;
	justify-self: center;
}

main > :nth-child(4) > iframe {
	width: 300px;
	height: 365px;

	margin: var(--px20) 0 var(--px12) 0;
	border: var(--px3) solid snow;
	border-radius: var(--px12);

	background-color: snow;
	box-shadow: 0 calc(var(--px10) * -1) var(--px6) calc(var(--px6) * -1) var(--schwarz80), 0 var(--px12) var(--px6) calc(var(--px6) * -1) var(--schwarz80);
	overflow: hidden;
}

/* MAIN > WETTERRADAR */

main > :nth-child(5) {
	grid-area: wetterradar;
}

main > :nth-child(5) > iframe {
	width: calc(100% - 2 * var(--px3));
	height: auto;
	aspect-ratio: 974 / 974;

	margin: var(--px20) 0 var(--px12) 0;
	border: var(--px3) solid snow;
	border-radius: var(--px12);

	background-color: snow;
	box-shadow: 0 calc(var(--px10) * -1) var(--px6) calc(var(--px6) * -1) var(--schwarz80), 0 var(--px12) var(--px6) calc(var(--px6) * -1) var(--schwarz80);
}

/* MAIN > PROGRESSIVE WEB APP (PWA) */

main > :nth-child(6) {
	grid-area: pwa;

	display: none;
}

main > :nth-child(6) > div {
	display: flex;
	justify-content: center;

	margin: var(--px18) auto var(--px8) auto;
}

main > :nth-child(6) > div > :is(button, div) {
	width: max-content;

	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--px12);

	padding: var(--px8) var(--px16);
	border: var(--px3) solid snow;
	border-radius: var(--px12);

	color: snow;

	box-shadow: 0 calc(var(--px10) * -1) var(--px6) calc(var(--px6) * -1) var(--schwarz80), 0 var(--px12) var(--px6) calc(var(--px6) * -1) var(--schwarz80);
}

main > :nth-child(6) > div > :is(button, div) > svg {
	height: var(--px26);

	color: snow;
}

main > :nth-child(6) > div > div {
	background-image: var(--rauschen);
	}

main > :nth-child(6) > div > button {
	cursor: pointer;

	background-color: var(--orange);
	
	transition: filter .2s ease-in-out, transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

main > :nth-child(6) > div > button:hover {
	filter: brightness(1.15);
	transform: translateY(calc(var(--px2) * -1));
}

main > :nth-child(6) > div > button:focus-visible {
	outline: var(--px3) solid snow;
	outline-offset: var(--px3);
}

html[dir="rtl"] main > :nth-child(6) > div > div > svg:has(use[href$="arrow"]) {
	transform: scaleX(-1);
}

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

footer {
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	grid-area: footer;
}

/* FOOTER > ZURÜCK */

footer > :nth-child(1) {
	grid-column: footer-start / footer-end;
	grid-row: 1;
	z-index: 1;

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

	background-color: var(--cyan);
	box-shadow: 0 calc(var(--px10) * -1) var(--px6) calc(var(--px6) * -1) var(--schwarz80);
}

footer > :nth-child(1) > a {
	padding: var(--px28) var(--px12);
	font: var(--px26) / var(--px26) var(--noto-sans-semibold);
	color: var(--schwarz);
	transition: color .4s ease-in-out 0s;
}

footer > :nth-child(1) > a:hover {
	color: snow;
}

footer > :nth-child(1) > a:focus-visible {
	border-radius: var(--px12);
	outline: var(--px3) solid snow;
	outline-offset: calc(var(--px3) * -1);
}

/* FOOTER > MEDIEN & COPYRIGHT */

footer > :nth-child(2) {
	grid-column: footer-start / footer-end;
	grid-row: 2;
	z-index: 3;

	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: var(--px52) var(--px26);
	column-gap: var(--px12);
	row-gap: var(--px20);

	position: relative;

	padding: var(--px20) 0;

	background-color: black;
	background-image: var(--rauschen);
	box-shadow: 0 calc(var(--px10) * -1) var(--px6) calc(var(--px6) * -1) var(--schwarz80);
}

/* FOOTER > MEDIEN */

footer > :nth-child(2) > ul {
	display: flex;
	flex-direction: row;
	align-items: center;
}

footer > :nth-child(2) > ul:first-of-type {
	justify-self: end;
}

footer > :nth-child(2) > ul:last-of-type {
	justify-self: start;
}

footer > :nth-child(2) > ul > li {
	width: var(--px46);
	height: var(--px46);

	margin-inline: var(--px6);
	border: var(--px3) solid snow;
	border-radius: var(--px8);

	transition: filter .2s ease-in-out, transform .2s ease-in-out;
}

footer > :nth-child(2) > ul > li:first-child {
	width: auto;
	height: var(--px46);

	border: 0;
}

footer > :nth-child(2) > ul:first-of-type > li:first-child {
	margin-inline: var(--px6);
}

footer > :nth-child(2) > ul:last-of-type > li:first-child {
	margin-inline: var(--px18) var(--px6);
}

footer > :nth-child(2) > ul > li svg {
	height: var(--px38);
	margin-inline: auto;

	color: snow;

	transform: translate(0, var(--px4));
}

html[dir="rtl"] footer > :nth-child(2) > ul > li:first-child svg {
	transform: scale(-1, 1) translate(0, var(--px4));
}

footer > :nth-child(2) > ul > li:has(use[href$="info"]) {
	background-color: var(--orange);
}

footer > :nth-child(2) > ul > li:has(use[href$="youtube"]) {
	background-color: var(--rot);
}

footer > :nth-child(2) > ul > li:has(use[href$="e-mail"]) {
	background-color: var(--violett);
}

footer > :nth-child(2) > ul > li:has(use[href$="facebook"]) {
	background-color: var(--blau);
}

footer > :nth-child(2) > ul > li:has(use[href$="x"]) {
	background-color: var(--schwarz);
}

footer > :nth-child(2) > ul > li:has(use[href$="whatsapp"]) {
	background-color: var(--grün);
}

footer > :nth-child(2) > ul > li:has(use[href$="whatsapp"]) {
	display: block;
}

footer > :nth-child(2) > ul > li:has(a):hover {
	filter: brightness(1.15);
	transform: translateY(calc(var(--px2) * -1));
}

footer > :nth-child(2) > ul > li:has(a:focus-visible) {
	outline: var(--px3) solid snow;
	outline-offset: var(--px3);
}

footer > :nth-child(2) > ul > li> a:focus-visible {
	outline: none;
}

@media ( min-width: 720px ) {

	footer > :nth-child(2) > ul > li:has(use[href$="whatsapp"]) {
		display: none;
	}

}

/* FOOTER > COPYRIGHT */

footer > :nth-child(2) > small {
	grid-column: 1 / -1;
	justify-self: center;

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

	font: var(--px26) / var(--px26) var(--noto-sans-semibold);
	color: snow;
}

footer > :nth-child(2) > small > svg {
	height: var(--px26);
	display: inline;

	margin-inline: var(--px8);

	color: snow;
}

html[dir="rtl"] footer > :nth-child(2) > small > svg {
	transform: scale(1, 1);
}

footer > :nth-child(2) > small > span {
	margin-inline: 0 var(--px8);
}

/* FOOTER > TOOLTIP */

footer > :nth-child(2) > div {
	width: max-content;
	height: auto;

	display: none;

	position: absolute;
	left: 50%;
	top: 0;
	z-index: 9;

	padding: var(--px6) var(--px12);
	border: var(--px3) solid snow;
	border-radius: var(--px8);

	font: var(--px22) / var(--px22) var(--noto-sans-regular);
	color: snow;

	background-color: var(--cyan);
	transform: translate(-50%, var(--px85));
}

/* FOOTER > REGENBOGEN */

footer > :nth-child(3) {
	grid-column: footer-start / footer-end;
	grid-row: 3;
	z-index: 5;

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

footer > :nth-child(3) > div {
	width: 300%;
  	height: 100%;

	background-image: var(--regenbogen);
	background-size: 100% 100%;
	animation: regenbogen-ltr reverse 12s linear infinite backwards;
}

html[dir="rtl"] footer > :nth-child(3) > div {
	animation: regenbogen-rtl reverse 12s linear infinite backwards;
}