@charset "UTF-8";

/* Schrift und Body */
body {
	margin: 0;
	height: 100vh;
	background-color: #000000;
	transition: 0.5s;
overflow: hidden;
}
.fixed-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('backw.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
	transition: 0.5s;
}
.timer {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 12px;
    width: 100%;
    transition: 1s;
    background-color: #000;
}
h1 {
	//font-family: "ruddy", sans-serif;
	//font-weight: 900;
	font-family: "brag-pro", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 12vw;
	line-height: 10vw;
	color: #000000;
}
h2 {
	//font-family: "droid-sans-mono", monospace;
	//font-weight: 700;
	font-family: "brag-pro", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 22pt;
	margin-bottom: 10px;
	margin-top: 10px;
}
h3 {
	//font-family: "droid-sans-mono", monospace;
	//font-weight: 700;
	font-family: "brag-pro", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 22pt;
	margin-bottom: 10px;
	margin-top: 10px;
}
p {
	font-family: "droid-sans-mono", monospace;
	font-weight: 400;
	font-style: normal;
	font-size: 14pt;
	margin-top: 0px;
	margin-bottom: 10px;
}
a {
	font-family: "droid-sans-mono", monospace;
	font-weight: 400;
	font-style: normal;
	font-size: 11pt;
	margin-top: 0px;
	color: #000000;
	text-decoration: none;
}
a:hover {
	background-color: #000000;
}
zuoben {
	background-color: #000000;
	font-size: 9vw;
	line-height: 12vw;
}
zu {
	//background-color: #000000;
}
zu:hover, zuoben:hover {
	//background: none;
}
::selection {
    background-color: #000000;
    color: #000000;
}

/* Inhaltliches */
.box {
	position: fixed;
	top: 5vmin;
	left: 50%;
	transform: translateX(-50%);
	width: 90vmin;
	height: 90vmin;
	overflow-y: scroll;
}
box {
	width: 100%;
	margin: 20px;
}
.inhalt {
	z-index: 1;
	position: relative;
	margin-top: 0vh;
	padding: 10px 60px;
	overflow: hidden;
}
.textlinks{
	width: 65%;
	padding-left: 15px;
}
.textrechts{
	width: 80%;
	padding-left: 15%;
}
.rechts {
	width: 40%;
}
.seite-container {
    position: relative;
	padding-right: 15px;
    max-width: 300px;
    margin-left: auto;
    }
.seite {
	position: sticky;
	top: 10px;
	right: 15%;
	text-align: right;
	margin-left: 70%;
	margin-bottom: 240px;
}
.footer {
	position: fixed;
	bottom: 15px;
	right: 15px;
}
.popup {
	display: none; /* Unsichtbar, bis es angezeigt wird */
	position: fixed;
	top: 50%;
	left: 65%;
	transform: translate(-50%, -50%);
	padding: 15px;
	border: 2px solid #000000;
}
.popup button {
margin-bottom: 12px;
}
.last-button a {
	display: none; /* Unsichtbar, bis es angezeigt wird */
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 15px;
	border: 2px solid #000000;
	background-color: #fff;
	border-radius: 1000px;
	
}


/* Special Things */
.abstand {
	height: 20vh;
}
.fenster {
	height: 90vh;
}
.space-oben {
	height: 8vh;
}
button {
	background: none;
	color: #000;
	padding: 2px 6px;
	border: 2px solid #000;
	cursor: pointer;
}

.content .delete-btn {
	margin-left: 15px;
}
.delete-btn {
	color: red;
    border: 2px solid red;
}
.audio-player {
    max-width: 300px;
    background: none;
    border: 2px solid black;
    border-radius: 0px;
    padding: 15px;
    text-align: left;
	float: right;
}
.play-button, .play-buttoon {
	background: none;
	color: black;
	
	width: 50px;
	height: 50px;
	font-size: 30px;
	cursor: pointer;
	border: 2px solid black;
	text-align: center; /* Horizontale Zentrierung */
    line-height: 45px; /* Vertikale Zentrierung, gleiche Höhe wie der Button */
	padding-left: 10px;
}
.audio-player p {
	font-size: 10pt;
	margin-bottom: 0px;
}
.audio-player h3 {
	font-size: 17pt;
	margin-bottom: 0px;
}

/* Streamfenster */
.streamloch {
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: -10;
}
streamcube {
	position: fixed;
	top: 5vmin;
	left: 50%;
	transform: translateX(-50%);
	width: 90vmin;
	height: 90vmin;
	overflow: hidden;
}
iframe {
	position: absolute;
	top: 0;
	left: 40%;
	transform: translateX(-50%);
	width: 180%;
	height: 100%;
	object-fit: cover;
	border: none;
}

/* Handy: */
@media screen and (max-width: 800px) {
	.inhalt {
	padding: 0px 20px;
}
.textlinks{
	width: 100%;
}
.textrechts{
	width: 85%;
	padding-left: 15%;
}
.rechts {
	width: 40%;
}
}