@charset "utf-8";
/* IBM Plex Mono */
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	src: url("fonts/IBM-Plex-Mono/ttf/IBMPlexMono-Text.ttf") format("truetype"),
	url("fonts/IBM-Plex-Mono/woff2/IBMPlexMono-Text.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: italic;
	src: url("fonts/IBM-Plex-Mono/ttf/IBMPlexMono-TextItalic.ttf") format("truetype"),
	url("fonts/IBM-Plex-Mono/woff2/IBMPlexMono-TextItalic.woff2") format("woff2");
}
/* IBM Plex Sans */
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	src: url("fonts/IBM-Plex-Sans/woff2/IBMPlexSans-Text.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Sans";
	font-style: italic;
	src: url("fonts/IBM-Plex-Sans/woff2/IBMPlexSans-TextItalic.woff2") format("woff2");
}
/* IBM Plex Serif */
@font-face {
	font-family: "IBM Plex Serif";
	font-style: normal;
	src: url("fonts/IBM-Plex-Serif/woff2/IBMPlexSans-Text.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Serif";
	font-style: italic;
	src: url("fonts/IBM-Plex-Serif/woff2/IBMPlexSans-TextItalic.woff2") format("woff2");
}

html {
	scroll-behavior: smooth;
  }

:root {
	--fontsize: 14px;
	--lineheight: 21px;
	/* padding für schwarz hinterlegte Schrift */
	--blackpadding: 0 3.5px;
	/* dokument Padding */
	--padding: 21px;
	--shadow: 2px 2px 5px rgba(0,0,0, 0.5);
	--border: 1.5px solid;
	--transition: 0.75s;
}

body {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0 var(--padding) 0;
	background: white;
	color: black;
	font-family: "IBM Plex Mono";
	font-size: var(--fontsize);
	line-height: var(--lineheight);
	/* Hintergrund Raster */
	/*background-image: linear-gradient(180deg, transparent 0px, rgba(255,0,255, 0.1)  1px, transparent 0px), linear-gradient(90deg, transparent 0px, rgba(0,0,0,0.0) 1px, transparent 0px);
	background-size: var(--lineheight) var(--lineheight);*/
	/*text-rendering: optimizeLegibility;*/
}

a {
	text-decoration: none;
}



.text {
	column-gap: 21px;
	font-family: "IBM Plex Sans";
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	text-align: justify;
}
.nohyphens {
	hyphens: manual;
	-webkit-hyphens: manual;
	-ms-hyphens: manual;
}

.einzug {
	/* 
	einzug erste Zeile = <span>
	einzug Absatz = <div>
	*/
	
	/*margin-left: calc(var(--padding) * 0.5);*/
	margin-left: 21px;
}

.mono {
	font-family: "IBM Plex Mono";
	text-align: left;
	display: inline-block;
}

#details_wrapper {
	width: 100%;
	overflow: hidden;
	height: 0;
	transition: height 0.75s;
}

/* Schrift schwarz hinterlegt */

.black {
	color: transparent;
	transition: color 0.75s;
}
.black_ausnahme {
	color: white;
}
.black, .black_ausnahme {
	font-family: "IBM Plex Mono";
	font-variant: slashed-zero;
	padding: var(--blackpadding);
	
	background-color: black  !important;
	text-align: left;
	hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;

	line-height: 18.5px; 
	margin-bottom: 2.5px;
}

.black_back {
	color: transparent;
	background-color: black;
	transition: background-color 0.75s;
}

.marquee_wrapper {
	box-sizing: border-box;
	z-index: 10;
	position: sticky;
	top: var(--lineheight);
	height: 18.5px;
	margin-bottom: 2.5px;
	width: 100%;
	background-color: black;

	/* outline */
	box-shadow: 0 1.5px 0 white, 0 -1.5px 0 white;


	/*background: linear-gradient(to bottom, transparent 0% 5%, black 5% 90.5%, transparent 90.5% 100%);*/
}

.marquee {
	overflow : hidden;
	box-sizing: border-box;
	position: relative;
}
  
.marquee_content {
	width: fit-content;
	white-space: nowrap;
}

#marquee_einwilligung {
	animation: scroll1 9.83s infinite linear;
	--marquee1: -235.2px;
	transition: opacity 0.75s;
}

@keyframes scroll1 {
	from {
		transform: translateX(0);
	}
	to {
	  transform: translateX(calc(var(--marquee1) * 2));
	  /*transform: translateX(calc(-478.8px * 2));*/
	}
}

#marquee_opfer {
	animation: scroll2 20s infinite linear;
	--marquee2: -478.81px;
	transition: opacity 0.75s;
	opacity: 0;
}
  
@keyframes scroll2 {
	from {
		transform: translateX(0);
	}
	to {
	  transform: translateX(calc(var(--marquee2) * 2));
	  /*transform: translateX(calc(-478.81px * 2));*/
	}
}

#marquee_standorte{
	animation: scroll3 14.39s infinite linear;
	--marquee3: -344.4px;
	transition: opacity 0.75s;
	opacity: 0;
}

@keyframes scroll3 {
	from {
		transform: translateX(0);
	}
	to {
	  transform: translateX(calc(var(--marquee3) * 2));
	}
}

#marquee_datenschutz{
	animation: scroll4 8.07s infinite linear;
	--marquee4: -193.2px;
	transition: opacity 0.75s;
}

@keyframes scroll4 {
	from {
		transform: translateX(0);
	}
	to {
	  transform: translateX(calc(var(--marquee4) * 2));
	}
}


#marquee_impressum{
	animation: scroll5 4.21s infinite linear;
	--marquee5: -100.8px;
	transition: opacity 0.75s;
}

@keyframes scroll5 {
	from {
		transform: translateX(0);
	}
	to {
	  transform: translateX(calc(var(--marquee5) * 2));
	}
}



#audio_img {
	opacity: 0; 
	transition: opacity 0.75s;
}

#audioTime, #repeat {
	display: none;
}

/* Buttons */
.button, .button_ausnahme  {
	cursor: pointer;
	transition: all 0.75s;
}

.button:hover, .button_ausnahme:hover {
	box-shadow: var(--shadow);
}

.button {pointer-events: none;}



/* ads Interests */
#interests {
	height: calc(var(--lineheight) * 14);
	overflow: hidden;
	box-sizing: border-box;
	overflow-anchor: none;
}

#interests div {
	display: inline-block;
	margin-top: 21px;	
}


/* Parallax Bilder */

.image {
	border-color: black;
	border: var(--border);
	
	width: calc(50vw - (2 * var(--padding)));
	max-width: calc(var(--lineheight) * 13);
	aspect-ratio: 2 / 3;
	position: absolute; /* damit nimmt es keinen platz ein */
	/* X - Y - blur - color */
	box-shadow: var(--shadow);
	overflow: hidden;
	z-index: 10;
	background-color: black;
	box-sizing: border-box;
}

.image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	transition: all 0.75s;
	filter: invert(1);
}

.image_close {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
}

.image_flip {
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
}

#image1, #image2, #image3 {
	transition: opacity 0.75s;
}

#image1, #image3 {
	right: calc(var(--padding) * 2);
}

#image2 {
	left: calc(var(--padding) * 2);
}

.flip-card {
	z-index: 10;
	position: absolute;
	background-color: none;
	perspective: 1000px;
	width: calc(45vw - var(--padding));
	max-width: calc(var(--lineheight) * 13);
	aspect-ratio: 2 / 3;
  }
  
  .flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: all 0.75s ease-in-out;
	transform-style: preserve-3d;
	box-shadow: var(--shadow);
	border: var(--border);
	border-color: black;
	box-sizing: border-box;
	margin: 0;
  }
  
  .flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
	box-shadow: -2px 2px 5px rgba(0,0,0, 0.5);
  }
  
  .flip-card-front, .flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
  }
  
  .flip-card-front {
	background-color: black;
	color: black;
  }

  .flip-card-front img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	transition: all 0.75s;
	filter: invert(1);
}
  
.flip-card-back {
	background-color: white;
	transform: rotateY(180deg);
 }

.flip-card-back-text {
	margin: 0 7px 0 7px;
	font-family: "IBM Plex Sans";
	text-align: left;
}

/* User Infoemationen*/

.info {
	width: 100%;
	box-sizing: border-box;
	position: relative;
	display: flex;
	justify-content: space-between;
	white-space: nowrap; 
}

.info_right {
	text-overflow: ellipsis; 
	overflow: hidden;
}


/* Footer */

#footer {
	width: 100%;
	box-sizing: border-box;
	position: relative;
}


#imprint {
	float: right;
}

#scrollTop {
	position: fixed;
	bottom: var(--lineheight);
	font-size: 25px;
	right: 0;
	width: var(--padding);
	color: black;
	text-align: center;
	line-height: 21px;
	transform: translateY(-1px);
	pointer-events: none;
	/* temp */
	/*background-color: rgba(0,0,0,0.05);*/
	
}
#scrollTop span {
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.75s;
}



/* Sky */

#sky {
	padding: var(--lineheight);
	width: 100%;
	box-sizing: border-box;
	background-color: black;
	color: white;

	margin-bottom: 2.5px;
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	pointer-events: none;
}

#NIEDERLANDE, #EUROPA {
	/* hover transition -> JavaScript */
	transition: border-color 3s;
	/*transition-delay: 0.75s;*/
	border: var(--border);
	border-color: transparent;
	box-sizing: border-box;
	position: relative;
	display: flex;
}

.star_wrapper {
	color: white; 
	position: absolute; 
	transform: translate(-12.6px, -10.5px); 
	z-index: 2;
	margin: 0;
	padding: 0;
}

.star {
	cursor: pointer;
}

.star_text {
	opacity: 0;
	padding-left: calc(4 * 8.4px);
	transition: opacity 0.75s;
	pointer-events: none;
	top: calc(var(--lineheight)* -1);
	position: relative;
}

.star:hover + .star_text {
	opacity: 1;
}

.star_bracket {visibility: hidden;}

.star:hover .star_bracket {
	visibility: visible;
	animation: blink 0.75s alternate infinite;
}

@keyframes blink {
	0%		{opacity: 0;}
	100%	{opacity: 1;}
	}



.map_text {
	color: transparent;
	/* hover transition -> JavaScript */
	transition: all 3s;
	/*transition-delay: 0.75s;*/
}

/* SVG */

path {
    fill: none;
    stroke: transparent;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
	transition: all 3s;
	/*transition-delay: 0.75s;*/
}
      
#Grenzen {
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

#Inlandsgrenzen {
	/*stroke-dasharray: 0, 5, 0, 0;*/
    stroke-width: 0.5px;
    vector-effect: non-scaling-stroke;
    }

rect {
    fill: none;
	stroke: none;
	stroke-width: 0px;
    vector-effect: non-scaling-stroke;
}

#Ausschnitt {
	stroke-width: 1px;
	vector-effect: non-scaling-stroke;
}

#Ausschnitt rect {
	fill: white;
	fill-opacity: 0;
	transition: all 3s;
	/*transition-delay: 0.75s;*/
}