body 
{
  background-color: #2F5D3A;
  color: white;
  font-family: "Segoe UI", sans-serif;
  font-size: 16pt;
  line-height: 1.6;
}

/* Links */
a {
  color: #7FD7FF; /* etwas kräftigeres Hellblau */
  text-decoration: underline;
}

a:visited {
  color: #FFD966; /* helleres, klareres Gold */
}

a:hover,
a:focus {
  outline: 2px solid #FFFFFF;
}

/* Überschriften */
h1 {
  text-align: center;
  color: #FFC000;
  font-size: 20pt;
}

h2 {
  font-size: 18pt;
}

/* Vererbung für Form-Elemente */
button,
input {
  font-family: inherit;
  font-size: inherit;
}

/* Standard-Buttons (für normale Seite) */
button {
  background-color: #FFC000;
  color: black;
  border: none;
  border-radius: 8px;
  padding: 0.5em 1em;
  cursor: pointer;
}

button:focus {
  outline: 3px solid white;
  outline-offset: 2px;
}

/* ========================= */
/*        AUDIO PLAYER       */
/* ========================= */

.audio-player {
  max-width: 600px;
  margin-top: 1em;
  background: #000;
  color: #fff;
  padding: 1em;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Button-Reihe */
.button-row {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
}

/* Player-Buttons überschreiben das gelbe Standarddesign */
.audio-player button {
  background: #222;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 0.6em 1em;
}

.audio-player button:hover {
  background: #333;
}

/* Slider nur im Player */
.audio-player input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #666;
  border-radius: 4px;
  margin-top: 0.5em;
}

/* WebKit */
.audio-player input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  margin-top: -6px;
}

/* Firefox */
.audio-player input[type="range"]::-moz-range-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #fff;
  border: none;
}

#timeDisplay {
  margin-top: 0.5em;
}

.story-image-small {
  display: block;
  width: 250px;        /* feste, kleine Breite */
  max-width: 90%;      /* auf Handy trotzdem anpassbar */
  height: auto;
  margin: 1em auto;
  border-radius: 8px;  /* leicht abgerundet – optional */
}