body {
    font-family: Garamond;
    font-size: 1.4em;
    letter-spacing: 0.04em;
    line-height: 1.3em;
    background-attachment: fixed;
    background-color: white;
    background-repeat: repeat;
    color: black;
    text-align: center;
    margin-bottom: 0.0em;
}

li {margin: 0; padding: 0;}
a {font-weight: bold; text-decoration: none;}

#Verweise a:link {color:white}
#Verweise a:visited {color: white}
#Verweise a:hover {color: white; transition: 0.5s}
#Verweise a:active {color: white} 

#Hauptteil a:link {color: #6F6F6F}
#Hauptteil a:visited {color: #6F6F6F}
#Hauptteil a:hover {color: #000000; transition: 0.5s}
#Hauptteil a:active {color: #000000} 

/* Skip-Link */
#skip-link { 
    position: absolute; 
    left: 0; top: 0; 
    background: black; 
    color: white; 
    padding: 0.25em; 
    transform: translateY(-100%);
    transition: 0.2s transform; 
    z-index: 1001; 
} 
#skip-link:focus { 
    transform: translateY(0); 
}

input.nav-trigger {
    display: none;	
}  
label[for="nav-trigger"] {
    display: none;
}

#linkerRand {	
    position: fixed;
    top: 0.0em;
    left: 0.0em;
    opacity: .25;	
    z-index: -1;
}	
#rechterRand {	
    position: fixed;
    top: 0.0em;
    right: 0.0em;
    opacity: .25;
    z-index: -1;
}
	
#Verweise {
    margin: -1.0em -1.0em 0.0em -1.0em;
    padding: 0.4em 1.0em 0.0em 1.0em;
    background: black;
    z-index: 2;
}
#Verweise a:link {color: white}
#Verweise a:visited {color: white}
#Verweise a:hover {color: white}
#Verweise a:active {color: white} 

#Ueberschrift {
    font-size: 1.8em;
    color: white;
    background: black;
    line-height: 1.2em;
    margin-top: 0.6em;
    padding: 0.0em 1.0em 0.0em 1.0em;
    z-index: 2;
}
#Zwischenueberschrift {
    margin-right: 1.5em; 
    margin-bottom: 0.0em; 
    margin-top: 1.2em;
    z-index: 2;
}

nav {
    width: 100%;
}
nav ul {
    display: inline-table;
    z-index: 1;
}
nav ul li {
    position: relative;
    left: -0.3em;
    float: left;	
    list-style-type: none;
    background: black;
    line-height: 1.8em;
    padding-left: 1.2em;
    padding-right: 1.2em;
}
nav ul li:hover {
    background: #6F6F6F;	
    transition: 0.5s;
}
.nav .dropdown ul {
  position: absolute;
  top: calc(100% + 30px);
  left: 2.0em;
  right: 1.2em;
  display: block;
  margin: 0;
  padding: 0 0;
  z-index: 3;
  visibility: hidden;
  background: white;
  transition: 0.3s;
}
.nav .dropdown ul li {
  min-width: 12em;
}
.nav .dropdown ul a {
  padding: 0 0;
  font-size: 1.0em;
  font-weight: 500;
  line-height: 1.6em;
  text-transform: none;
}
.nav .dropdown ul a:hover, .nav .dropdown ul .active:hover, .nav .dropdown ul li:hover > a {
  color: #1e90ff;
}
.nav .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

#main {
    max-width: 40em;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    height: auto;
    padding-top: 0.2em;
    padding-left: 2.0em;
    padding-right: 2.0em;
}
#main p{
    text-align: justify;
}

#main a:link {color: #6F6F6F}
#main a:visited {color: #6F6F6F}
#main a:hover { color: #000000; background-color: #E0E0E0}
#main a:active {color: #000000}

#Tabelle {
    text-align:left;
}
#Tabelle td{
    vertical-align:top;
}

img {
    width: 100%;
}
img.flagge {
    max-width: 15px;
}
img.inText {
    max-width: 12em;
    float: left; 
    margin-right: 1.5em;
}
img.griffbrett {
    max-width: 14em;
}

.CDs {
    display: flex;
    justify-content: center;
}	
.einzelneCD {
    width: 100%;
    float: left;
    margin-top: 0em;
    line-height: 1.4em;
}
.einzelneCD img {
    width:100%;
    max-width:300px; 
    border-style:solid; 
    border-width:1px; 
    border-color:#000000;
    margin-bottom: 0em;		
}	

.tab {
    position: relative;
    margin-bottom: 0.2em;
}
.tab input {
    display: none;
}
/* Schaltflaeche */
.tab label {
    text-align: left;
    white-space: pre;
    display: block;
    background: lightgrey;
    padding: 0.2em;
    cursor: pointer;
}
/* Pfeilspitze in wechselnder Richtung */
.tab label::after {
    content: "\25b6";
    position: absolute;
    top: 0.2em;
    display: block;
    transition: all 0.2s;
}
.tab input[type=checkbox]:checked + label::after,
.tab input[type=radio]:checked + label::after {
    transform: rotate(90deg);
}
/* Inhalt */
.tab-content {
    overflow: hidden;
    transition: max-height 0.2s; 
    max-height: 0;
}
.tab-content p {
    margin: 0px;
    overflow: hidden;
}
.tab input:checked ~ .tab-content {
    max-height: 200vh;
}

@media (max-width: 40em) {
#main {
    p{text-align: left};
}
body {
    font-size: 0.7em;
    letter-spacing: 0.01em;
    line-height: 1.0em;
}
#Ueberschrift {
    font-size: 1.3em;
    line-height: 1.1em;
    margin-top: 0.6em;
}
img.inText {
    float: none; 
    margin-bottom: 0.5em;
}
/* Wegfall der Zierleisten */
#linkerRand {	
    display: none;
}	
#rechterRand {	
    display: none;
}
}