#container {
  display: flex;            /* Ensures children are side by side */
  height: 100vh;
}

#links {
  width: 9em;
  box-sizing: border-box;
  padding: 1em;
  border-right: 2px solid #ccc;
  flex-shrink: 0;           /* Prevents shrinking */
}

#right {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  padding: 1em;
  box-sizing: border-box;
}

#title {
  padding: 1em;
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 10;
}

#unten {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1em;
}

/* Responsive (Mobile) Styles */
@media (max-width: 600px) {
  #container {
    flex-direction: column;
  }
  #links {
    width: 100%;
    border-right: none;
    border-bottom: 2px solid #ccc;
    padding: 1em;
  }
  #right {
    padding: 1em;
  }
}


#titelGross 
{
	text-align: right;
	color: black;
	font-family: Arial Narrow, Arial, Helvetica, sans-serif; 
	font-size: 155%;
}
#titelKlein 
{ 	
	text-align: right;
	color: #000000;
	font-family: Arial Narrow, Arial, Helvetica, sans-serif; 
	font-size: 80%;
	line-height: 50%;
}


h1 { font-size: 120%; }

#button {
	text-align: left;
	font-size: 100%; 
	line-height: 100%;
	padding: 0 1em 0em 0;	
 	background-color: transparent;
	color: #333;
	}

#button ul {
	position: absolute;
	top: 0.0em;
	list-style: none;
	margin: 0;
	padding: 0;
	}
		
#button li {
	margin: 0;
	}

#button li a {
	display: block;
	padding: 0.5em 0.5em 0.5em 0.5em;
	background-color: transparent;
	color: #000000;
	text-decoration: none;
	width: 100%; 
	}

html>body #button li a {
	width: 8em;
	}

#button li a:hover {
	background-color: #cccccc;
	font-weight: bold;
	color: #ffffff;
	}