@font-face {
	font-family: 'ModernDOS'; /* Name der Schriftart */
	src: url('../fonts/ModernDOS8x16.ttf') format('truetype'); /* TTF-Datei */
}

body {
	font-family: 'ModernDOS';
	background-color: #5e3aff;
	width: 100vw;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
	display: flex;
	flex-direction: column;
	top: 0;
	bottom: 0;
	position: fixed;
}

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

figure {
	margin: 0;
	padding: 0;
}

figcaption {
	margin-top: 0.5em;
}

.pictures {
	width: 100%;
	max-width: 100%;
	margin: 0;
	box-sizing: border-box;
	overflow: hidden;
}

.pictures img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

body.privacy-dialog-open > *:not(#enter-fp-bios) {
	filter: blur(4px);
	-webkit-filter: blur(4px);
	pointer-events: none;
	user-select: none;
}

body.privacy-dialog-open {
	overflow: hidden;
}

/* Box für den Datenschutzdialog */
#enter-fp-bios {
	display: none;
	text-align: left;
	flex-direction: column;
	gap: 0.8em;
	width: min(40em, calc(100vw - 1rem));
	max-width: 40em;
	max-height: calc(100vh - 1rem);
    z-index: 999999; 
    box-sizing: border-box; 
	box-shadow: 7px 7px 0px rgba(119, 119, 131, 0.55);
    outline: 2px solid rgb(185, 185, 185);
    outline-offset: -5px;
    background-color: #f0f0f0;


    /* Damit es wirklich über allem liegt */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    justify-content: center;
    align-items: stretch;
    padding: 1em;
    overflow-y: auto;
}

#enter-fp-bios-button-box {
	display: flex;
	gap: 0.6em;
	flex-wrap: wrap;
	width: 100%;
	align-items: stretch;
}

#accept-privacy,
#decline-privacy {
	font-family: inherit;
	font-size: 1em;
	border: none;
	box-sizing: border-box;
	padding: 0.45em 0.9em;
	min-height: 2.2em;
	min-width: 0;
	flex: 1 1 12em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	-webkit-appearance: none;
	color: #000000;
	cursor: pointer;
  	transition: background-color 0.3s ease;
}

@supports not ((filter: blur(2px)) or (-webkit-filter: blur(2px))) {
	body.privacy-dialog-open > *:not(#enter-fp-bios) {
		opacity: 0.8;
	}
}

@media (max-width: 520px) {
	#enter-fp-bios {
		padding: 0.8em;
	}

	#accept-privacy,
	#decline-privacy {
		flex-basis: 100%;
	}
}

/* Button für den Datenschutzdialog */
#accept-privacy {
	background-color: #b9b9b9;
}

#accept-privacy:hover {
	background-color: #dededf;
}

/* Button für den Datenschutzdialog */
#decline-privacy {
	background-color: #e69a9a;
}

#decline-privacy:hover {
	background-color: #dededf;
}

/* oberster header mit fp versionsnummer */
#title-banner-box {
	width: 100vw;
	margin: 0px;
	display: flex;
	justify-content: center;
	background-color: #56CDF0;
	font-size: 1.8em;
}

/* home funktion oben leiste button title */
#title-banner-button {
	display: flex;
	padding-top: 0.2em;
	padding-bottom: 0.1em;
	justify-content: center;
	align-items: center;
	font: inherit;
	font-size: inherit;
	font-weight: normal;
	background-color: inherit;
	border: none;
	border-radius: 0px;
  	cursor: pointer;
  	transition: background-color 0.3s ease;
}

#title-banner-button:hover {
	color: #dededf;
}

/* Container für die topic buttons */
#topics-titles-box {
	width: 100vw;
	background-color: #EDEAEA;
	font-size: 1.8em;
	display: flex;
	justify-content: flex-start; /* Linksbündig */
	flex-direction: row;
	flex-wrap: wrap;
	
}

/* button for the topics*/
.topic-title-button {
	display: flex;
	background-color: inherit;
	justify-content: center;
	font: inherit;
	padding-left: 1em;
	padding-right: 0.5em;
	font-size: inherit;
	font-weight: normal;
	border: none; /* Kein Rand */
  	cursor: pointer;
  	transition: background-color 0.3s ease;
}

.topic-title-button:hover {
	background-color: #D7D8CF;
}

.topic-title-button.active {
    background-color: #D7D8CF;
}

.topic-title-button:focus {
  outline: none;
  box-shadow: none;
}

/* Container für Container topic-content-left-box und topic-content-right-box */
#topics-contents-box {
	width: 100vw;
	background-color: #D7D8CF;
	display: flex;
	overflow: hidden; /* verhindert, dass der äußere div scrollt */
}

/* Container für Content links */
#topic-content-left-box {
	width: 100%;
	border-left: 3px solid #000000;
	border-right: 3px solid #000000;
	border-top: 2px solid #000000;
	border-bottom: 2px solid #000000;
	padding: 1em;
	margin-left: 0.7em;
	margin-top: 0.7em;
	margin-bottom: 0.7em;
	overflow-y: auto; /* Erzeugt einen Scrollbalken, wenn der Inhalt zu lang wird */
}

/* Container für topic-content-top-right-box und topic-content-bottom-right-box rechts */
#topic-content-right-box {
	display: flex;
  	flex-direction: column;
	width: 50vw;
}

/* Container für Content rechts oben */
#topic-content-top-right-box { 
	border-right: 3px solid #000000;
	border-top: 2px solid #000000;
	border-bottom: 2px solid #000000;
	padding: 1em;
	margin-left: 0em;
	margin-top: 0.7em;
	margin-right: 0.7em;
	height: 45vh;
	overflow-y: auto; /* Erzeugt einen Scrollbalken, wenn der Inhalt zu lang wird */
}

/* Container für Content rechts unten */
#topic-content-bottom-right-box {
	border-right: 3px solid #000000;
	border-bottom: 2px solid #000000;
	margin-top: 0em;
	padding: 1em;
	scroll-padding-right: 1em;
	margin-left: 0em;
	margin-bottom: 0.7em;
	margin-right: 0.7em;
	height: 100vh;
	overflow-y: auto; /* Erzeugt einen Scrollbalken, wenn der Inhalt zu lang wird */
}

.topic-content-button {
	display: flex;
	padding-top: 0.2em;
	background-color: inherit;
	color: #000000;
	justify-content: flex-start;
	text-align: left;
	width: 100%;
	font-family: inherit;
	font-size: 1.8em;
	border: none; /* Kein Rand */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.topic-content-button:hover {
	color: white;
}

.topic-content-button.active {
    /* z.B. Hintergrundfarbe, Rahmen, etc. */
    color: white;
}

.topic-content-button:focus {
  outline: none;
  box-shadow: none;
}

#topics-controls-box {
	width: 100vw;
	background-color: #56CDF0;
	display: flex;
	justify-content: flex-start; /* Linksbündig */
	flex-direction: row;
	flex-wrap: wrap;
	font-size: 1.8em;
	font-weight: normal;
}

/*button for the topics*/
.topic-control-button {
	display: flex;
	height: 1.2em;
	background-color: inherit;
	justify-content: center;
	white-space: nowrap;
  	overflow: hidden;         /* schneidet überflüssigen text ab */
  	text-overflow: ellipsis;
	font: inherit;
	padding-left: 1em;
	padding-right: 0.5em;
	border: none;
  	/*cursor: pointer;*/
	margin: 0;
	padding-top: 0.1em;
	padding-bottom: 0;
  	/*transition: background-color 0.3s ease;*/
}

/*
.topic-control-button:hover {
	background-color: #90DDF4;
/*}
*/


/* impressum footer container */
#impressum-box {
	bottom: 0em;
	width: 100vw;
	display: flex;
	justify-content: center;
	background-color: #5e3aff;
}

#impressum-button {
	display: flex;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	background-color: inherit;
	color: white;
	font-size: 1.3em;
	justify-content: center;
	font-family: inherit;
	font-weight: normal;
	border: none; /* Kein Rand */
  	cursor: pointer;
  	transition: background-color 0.3s ease;
}

#impressum-button:hover {
	color: #dededf;
}