:root {
    --warm-orange: #FFA500;
    --friendly-blue: #89CFF0;
    --dark-blue: #136292;
    --light-grey-blue: #8ecdeb;
    --dark-grey-brown: #121212;
    --dark-lila-4: #dc74b9;
}

body {
    margin: 0 auto;
    max-width: 50em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    /*background-color: rgb(245, 245, 220);*/
    background-color: #121212; /* Dunkelgrau */
    color: #E8E6E3; /* Abgeschwächtes Weiß */
  }

.cover-bild {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    max-width: 100%;
    height: auto; 
}

.bild {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    max-width: 100%;
    height: auto; 
}

h1, h2, h3, h4, h5, h6 {
    color: #89CFF0; /* Helles, freundliches Blau für Überschriften */

}

strong, b { /* Fett markierter Text */
    color: #89CFF0; /* Gleiches helles Blau wie für Überschriften */
}

p { /* Absaetze */
    /*color: #89CFF0;*/
    color: var(--dark-lila-4);
    font-size: 18px;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(137, 207, 240, 0), rgba(137, 207, 240, 0.75), rgba(137, 207, 240, 0)); /* Übergang von transparent zu hellem Blau und zurück */
}

a:link, a:visited { /* Unbesuchte und besuchte Links */
    color: #FFA500; /* Warmes Orange */
}

a:hover { /* Links beim Darüberfahren */
    color: #FFD700; /* Helleres Gold für Hover */
}

a:active { /* Aktive Links */
    color: #FF4500; /* Dunkleres Orange */
}

.mittig {
    text-align: center;
}

.small-text {
    font-size: 0.75em;
}

@media only screen and (max-width: 767px) {
    body {
        margin: 8px; 
    }
}

audio {
    width: 100%;
}

audio::-webkit-media-controls-panel {
  background-color: var(--dark-grey-brown);
}

audio::-webkit-media-controls-enclosure {
    border-radius: 0;
}

audio::-webkit-media-controls-mute-button {
  background-color: var(--light-grey-blue);
  border-radius: 50%;
}

audio::-webkit-media-controls-play-button {
  background-color: var(--light-grey-blue);
  border-radius: 50%;
}

audio::-webkit-media-controls-play-button:hover {
  background-color: var(--dark-blue);
}

audio::-webkit-media-controls-current-time-display {
  color: var(--warm-orange);
  text-shadow : none;
}

audio::-webkit-media-controls-time-remaining-display {
  color: var(--warm-orange);
  text-shadow : none;
}

audio::-webkit-media-controls-timeline {
  background-color: var(--light-grey-blue);
  border-radius: 25px;
  margin-left: 10px;
  margin-right: 10px;
}

audio::-webkit-media-controls-volume-slider {
  background-color: var(--light-grey-blue);
  border-radius: 25px;
  padding-left: 8px;
  padding-right: 8px;
}