body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;

  background-image:
    linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0)),   /* 1. Ebene: Abdunkel-Overlay */
    url('../audioPicsVideo/LivingInTheShadows.png'),                     /* 2. Ebene: das Foto */
    linear-gradient(to bottom, #ebebeb, #050505);      /* 3. Ebene: Verlauf als "Farbe" dahinter */

  /* Achtung: die Werte gelten pro Ebene, in derselben Reihenfolge */
  background-size: cover, contain, cover;
  background-position: center, center bottom, center;
  background-repeat: no-repeat;
}

@media (orientation: portrait) {
  body::before {
    background-size: cover, auto 100%, cover;
    background-position: center, center bottom, center;
    background-repeat: no-repeat;
  }
  .content {
    max-width: 100%;
  }
}

.no-border,
.no-border td {
	  border: none;
	  border-collapse: collapse;
}

.center-table {
	  margin-left: auto;
	  margin-right: auto;
	  /* Optional: Breite einstellen */
	  width: 100%;
}

.content {
/*	margin:top right bottom left*/
  	margin: 0 auto;
  	max-width: min(100%, calc(100vh * 1.51246)); /* 1.51246 ist das Verhältnis Breite/Höhe des Hintergrundbildes Die maximale Breite des contents ist also das Minimum aus 100% der Bildschirmbreite (für schmalere Bildschirme, auf denen dasBild ohenhin die gesamt Breite ausfüllt, und dem Breite/Höhe - Faktor des Bildes multipliziert mit 100% der Bildschirmhöhe. */
  	padding: 0 3% 100px 3%;
	border-style: none;
	text-align: center;
	z-index: -1;
	color:white;
	font-size: 20px; 
}

.content li {
	list-style-type: none;
	/*color:red;*/
	padding: 0;
	margin: 0;
	/*display:inline;*/
	margin-right: 10px; 
}

.content li a {
	color:white;
	text-align: center;
	padding: 0;
	margin:0;
	text-decoration: none;
}

.content li a:hover {
	color:#400EE6;
}
        

.content ul {
	display:inline-block;
	text-align:left;
}

.menu-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center; /* Zentriert den Navbar-Container horizontal */
	z-index: 1000;
background: transparent; /* Kein Hintergrund, damit nur das Menü sichtbar bleibt */
}

 
.menu {  
	position: fixed;
	top:0;
	/*left:30%;*/
	transform:tanslateX(-50%);
	border-style: none;
	background-color: #e5e4e2 ;
	padding: 5px;
	z-index:1000;
	min-width:300px;
	box-shadow: 0 2px 8px  rgba(0,0,0,0);
	margin: 0;  /*5px 5px 5px 5px;  */
	color: black;
	text-align: center;
}

.menu a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 3px; /* optional: Dicke der Linie */
	text-underline-offset: 4px;     /* optional: Abstand zum Text */
	color: black;                    /* optional: Farbe anpassen */
}

.menu li {
	padding: 0% 0%;
	text-align: center;
	list-style-type: none;
	display:inline;
	font-size:100%;
}

.menu li a {
	text-decoration: none;
	font-weight: bold;
	color:black;
	padding:0px 5px;
}
 

.menu li a:hover {
	color: #400EE6;
}

.menu a,
.menu a:link,
.menu a:visited,
.menu a:active {
    color: black;
}

/* ...aber rot beim Überfahren */
.menu a:hover {
    color: red;
}


div.h1 {
	font-size: 200%;
	font-weight: bold;  
}

div.h2 {
	font-size: 140%;
	font-weight: bold;  
}

div.italic {
	font-size: 120%;
	font-style: italic;  
}

div.bold {
	font-size: 100%;
	font-weight: bold;  
}

span {
	font-size: 100%;
	font-weight: bold;
	font-style: italic;  
}

div.pause {
	font-size: 70%;
	font-style: italic;
}