/* 70-plus Starter: zusätzliche oder überschreibende Styles */
/* Tooltip für das Fragezeichen in der Sprachleiste */

.se-sprachleiste .btn-help {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.se-sprachleiste .btn-help:hover { background: transparent !important; }
.se-sprachleiste img[src*="/sprachleisten-icons/"][src*="help"],
.se-sprachleiste img[src*="/sprachleisten-icons/"][src*="frage"],
.se-sprachleiste img[src*="/sprachleisten-icons/"][src*="question"],
.se-sprachleiste img[src*="/sprachleisten-icons/"][src*="info"] {
  position: relative; /* Anker für das Tooltip */
}

/* Tooltip-Blase */
.se-sprachleiste img[src*="/sprachleisten-icons/"][src*="question"]:hover::after,
.se-sprachleiste img[src*="/sprachleisten-icons/"][src*="info"]:hover::after {
  content: 'Mikro an/aus, Wiederholen, Stopp';
  position: absolute;
  left: 50%;
  bottom: 120%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(20,20,20,.92);
  color: #fff;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.35;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  z-index: 9999;
}

/* kleiner Pfeil */
.se-sprachleiste .btn-help:hover::before,
.se-sprachleiste img[src*="/sprachleisten-icons/"][src*="help"]:hover::before,
.se-sprachleiste img[src*="/sprachleisten-icons/"][src*="frage"]:hover::before,
.se-sprachleiste img[src*="/sprachleisten-icons/"][src*="question"]:hover::before,
.se-sprachleiste img[src*="/sprachleisten-icons/"][src*="info"]:hover::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 110%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(20,20,20,.92);
  z-index: 9999;
}
/* größere Buttons */
.se-sprachleiste .btn-mic,
.se-sprachleiste .btn-repeat,
.se-sprachleiste .btn-stop { width: 56px; height: 56px; }

/* PNGs leicht hochskalieren (falls nötig) */
.se-sprachleiste .btn-mic img,
.se-sprachleiste .btn-repeat img,
.se-sprachleiste .btn-stop img {
  transform: scale(1.25);
  transform-origin: center;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
/* Abstand Mic–Repeat & Repeat–Stop auf 3× erhöhen (10px Gap + 20px extra = 30px) */
.se-sprachleiste .btn-repeat,
.se-sprachleiste .btn-stop {
  margin-left: 8px;  /* ergibt zusammen mit dem bestehenden gap:10px => 30px */
}

<script>
(function(){
  // Dein Icon oben rechts – mit der ID aus Schritt 1:
  var micEl = document.getElementById('dr-mic-icon');
  if(!micEl) return;

  // Falls du mit einem EINZELNEN Icon arbeitest (gleiche Grafik, nur "an/aus" färben):
  function paint(on){
    micEl.classList.toggle('is-on',  !!on);
    micEl.classList.toggle('is-off', !on);
  }

  // Auf Events vom Recorder reagieren:
  document.addEventListener('dr_mic_active', function(e){
    var on = !!(e.detail && e.detail.active);
    paint(on);
  });

  // Initialzustand (falls die Seite bereits im "on"-State ist)
  paint(document.documentElement.classList.contains('dr-mic-on'));
})();
</script>

<style>
/* Variante A: EIN Icon farblich kippen (funktioniert für IMG/SVG) */
#dr-mic-icon.is-on  { filter: hue-rotate(120deg) saturate(1.2); opacity: 1; }
#dr-mic-icon.is-off { filter: none;                         opacity: .9; }

/* Variante B (optional): ZWEI Icons im DOM (mic-on / mic-off) umschalten
#dr-mic-icon .mic-on  { display: none; }
#dr-mic-icon .mic-off { display: inline; }
#dr-mic-icon.is-on  .mic-on  { display: inline; }
#dr-mic-icon.is-on  .mic-off { display: none;  }
*/
</style>