/* Speakable Text-To-Speech player 0.4.1-pre | https://github.com/tollwerk/speakable */
.spkbl-player>*{background-color:#eee;vertical-align:middle;border:1px solid #fcc13a;height:1.6rem}
.spkbl-player>*:focus{outline:1px solid #000}
.spkbl-player--inactive .spkbl-ctrl:not(.spkbl-ctrl--play),.spkbl-player--active .spkbl-ctrl--play{display:none}.spkbl-ctrl--play::before{content: "\25B6"; }

.spkbl-ctrl--stop::before{content: "\2716";}

.spkbl-ctrl--reset::before{content:"\25B6";}
.spkbl-ctrl--pause::before{content:"\25A0"}
.spkbl-ctrl--pause[aria-pressed="true"]{color:#666;background-color:#bbb}
.spkbl-ctrl--pause[aria-pressed="true"]::before{content:"\25B6"}
.spkbl-ctrl--progress{width:5em;appearance:none;border-left:none;border-right:none;box-sizing:border-box;position:relative;z-index:-1;padding:2px;}
.spkbl-ctrl--progress::-webkit-progress-bar{background-color:#cffe70}.spkbl-ctrl--progress::-moz-progress-bar{background-color:#295e22}
.spkbl-ctrl--progress::-webkit-progress-value{background-color:#295e22}




/* Basis-Styling für die Icons (optional für besseren Abstand) */
.btn-play::before, 
.btn-stop::before, 
.btn-close::before {
  margin-right: 8px; /* Abstand zum Text */
  font-weight: normal;
}

/* Icon für "Spielen" (Play-Button) */
.btn-play::before {
  content: "\25B6"; /* Unicode für ein ausgefülltes, nach rechts zeigendes Dreieck */
}

/* Icon für "Stopp" */
.btn-stop::before {
  content: "\25A0"; /* Unicode für ein ausgefülltes Quadrat */
}

/* Icon für "Abbrechen / Schließen" */
.btn-close::before {
  content: "\2716"; /* Unicode für ein schweres Multiplikationszeichen (X) */
}