/* aktuellen link türkeis statt schwarz */
/* Logo Größe 395 x 332 */
/* mts Farben */
/* dunkel lila: #754092 */
/* dunkel türkis #0797aa */
/* to import from other files: */
/* @import url(print/print_003.css); */
/*       background: linear-gradient(to right, #f12711, #f5af19); */
body {
color: #000000; 
background-color: #ffffff;
font-size: 1em;
font-family: Helvetica,Arial,sans-serif;
margin: 0; 
padding: 1em;
min-width: 60em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen
Browsern */
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: #754092;
  text-decoration: none;
  padding: .5em;
}

@media (any-pointer: coarse) {
  a {
    padding: 2em;
  }
  li {
    padding: 2em;
  }
}

h1  {
color: #754092;
font-size: 1.5em;
margin: 0 0 0.7em; 
padding: 0.3em;
text-align: center;
}

h2 {
color: #754092;
font-size: 1.5em;
margin: 0 0 0.7em; 
padding: 0.3em;
text-align: center;
}

h3 {
color: #0797aa;
font-size: 1.33em;
margin: 0 0 0.7em; 
padding: 0.3em;
text-align: center;
}

div#Info {
font-size: 1em;
float: right;
width: 12em;
margin: 1.1em;
padding: 1em;
}

div#Info p {
font-size: 1em;
margin: 0.5em;
}

.info {
  background-color: #ffffff;
  padding: 2em;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transform: translateZ(0);
  perspective: 1000px;
}

.info:hover {
  transform: rotateX(10deg) rotateY(10deg);
}

div#Inhalt {
margin: 0 12em 1em 16em;
padding: 0 1em;
}

* html div#Inhalt {
height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
}

div#Inhalt p {
font-size: 1.1em;
margin: 1em 0;
}

div#Inhalt ul li {
list-style: none;
display: block;
padding: 2em;
}

.screenreader {
	color: #ffffff;
	background-color: #ffffff;
	display: inline;
	height: 0px;
	left: -3000px;
	position: absolute;
	top: -2000px;
	width: 0px;
	z-index: 200;
}

.clear {
clear: both;
}

.float-left {
float: left;
}

.float-right {
float: right;
}

ul.language li {
list-style: none;
display: inline;
}

ul#accessibilitylinks {
background-color: #754092;
color: #ffffff;
height: 1.5em;
font-size: 0.8em;
}

ul#accessibilitylinks li {
list-style: none;
display: inline;
padding-right: 2em;
}

ul#accessibilitylinks a {
color: #ffffff;
}

#menue-a {
  color: #754092;
  padding-top: 1em;
  padding-bottom: 1em;
  font-size: 1.3em;
  height: 1.5em;
}

#menue-a a { 
  padding-right: 2.5em;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
}

#menue-a a:hover {
   color: #000000;
}

.menue-a-on {
   color: #000000;
}

#menue-b {
  color: #754092;
  padding-top: 0.5em;
  padding-bottom: 1em;
  font-size: 1.3em;
  height: 1.5em;
}

#menue-b a {
   padding-right: 2.5em;
   text-decoration: none;
}

#menue-b a:hover {
   color: #000000;   
}

.menue-b-on {
   color: #000000;   
}

ul#menue-c {
color: #754092;
font-size: 0.83em;
float: left; width: 18em;
margin: 0 0 1.2em; 
padding: 0;
border: 1px dashed #754092;
list-style-type: none;
background-image: url('pics/treble_clef.png');
background-repeat: no-repeat;
background-size: cover;
}

ul#menue-c li {
list-style: none;
margin: 0; padding: 0.5em;
}

ul#menue-c a {
display: block;
padding: 0.8em;
font-weight: bold;
text-decoration: none;
text-align: right;
}

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #f8f8f8;
}

.logo-wrapper {
  display: flex;
  align-items: center;
}

#logo {
  width: 150px;
  height: 150px;
  margin-right: 10px;
}

.site-title, .site-title h1 {
  font-size: 4em;
  margin: 0;
}

.site-title a {
  text-decoration: none;
  color: #754092;
}

.subtitle {
  font-size: 2em;
  margin: 0;
  color: #777;
}

#headertopright {
  display: flex;
  align-items: center;
}

ul#menue-c a:link {
color: #754092; 
}

ul#menue-c a:visited {
color: #754092;
}

ul#menue-c a:hover {
color: #754092; 
}

ul#menue-c a:active {
color: #754092; 
}

#submit_redefinition {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1em;
  border: 1px solid #754092;
  padding: 0px;
  margin: 0px;
  vertical-align: bottom;
}

p#Fusszeile  {
font-size: 0.8em;
margin: 0; 
padding: 0.1em;
text-align: center;
}

div#menue-d {
background-color: #754092;
color: #ffffff;
padding-top: 2em;
padding-bottom: 2em;
text-align: center;
}

div#menue-d a {
color: #ffffff;
text-decoration: none;
font-size: 0.8em;
font-weight: bold;
padding-right: 2.5em;
}

span#simplepfad {
color: #ffffff;
display: inline;
text-align: left;
padding-right: 8em;
}

span#bogen {
clear: both;
display: block;
text-align: center;
}

span#bogenunten {
clear: both;
display: block;
text-align: center;
}

.table-rahmen
{
  border-collapse: collapse;
  border: 1px solid #FFFFFF;
  text-align: left;
  font-size: 1em;
margin: 0.5em; 
padding: 1em;
}

.table
{
  text-align: left;
  font-size: 1em;
margin: 0.5em; 
padding: 1em;
}

table
{
  text-align: left;
  font-size: 1em;
margin: 0.5em; 
padding: 1em;
}

.web-player {
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s;
}

.play-button:focus {
  outline: none;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background-color: #ff3b58;
  border-radius: 50%;
  transition: transform 0.3s, box-shadow 0.3s;
}

.play-icon:before,
.play-icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  transition: transform 0.3s;
}

.play-icon:before {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.play-icon:after {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.play-icon.pause:before {
  transform: translate(-40%, -50%);
}

.play-icon.pause:after {
  transform: translate(40%, -50%);
}

.play-button:hover .play-icon {
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(255, 59, 88, 0.5);
}

.animated {
  width: 50%;
  height: 2em
  animation: slide-in 2s infinite alternate;
}

@keyframes slide-in {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

  .pulsing {
    animation: pulse 2s infinite;
    background-color: rgba(0, 0, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }

.centered {
  text-align: center;
  align-items: center;
}