/* ==========================================================================
   0. Die fertige Variante des Readers ist: tts-app-solo-5.js alles in einem Script(solo) letzte Version (5)
   
   1. SCHRIFTARTEN & GEMEINSAME DESIGN-ELEMENTE
   ========================================================================== */
 @import url('/_fonts/futuralc.css');

#tts-sidebar-container {
  font-family: 'Futuralc', sans-serif;
} 
   
@font-face {
  font-family: 'futuralc';
  src: local('futuralc'), local('Futura-Light'), local('Futura');
}

/* Farbliche Markierung des gerade vorgelesenen Textes im Buch */
.tts-active-chunk {
  background-color: #fff3a3 !important;
  transition: background-color 0.3s ease;
}

/* Barrierefreie Rahmen und Hilfsklassen */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.alternating-border {
  border: 4px solid transparent; 
  border-image: repeating-linear-gradient(90deg, #000000, #000000 10px, #ffcc00 10px, #ffcc00 20px) 1;
}

.dashed-alternating-border {
  border: 4px dashed #000;
  background: linear-gradient(#fff, #fff) padding-box, repeating-linear-gradient(70deg, #000 0 10px, #ffcc00 10px 20px) border-box;
  background-origin: border-box;
}

.blind-border {
  border: 4px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #ffff00, #ffff00 10px, #000000 10px, #000000 20px) 1;
}

/* ==========================================================================
   2. DER HAUPTCONTAINER (Fest verankert unten rechts)
   ========================================================================== */
#tts-sidebar-container {
 	
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;
  max-height: 80vh; /* Maximal 80% der Bildschirmhöhe */
  background: #222222; /* Einheitlich dunkles, edles Design */
  color: #ffffff;
  border: 2px solid #444444;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  z-index: 9999;
  font-family: 'futuralc', sans-serif;
  overflow: hidden;
  transition: border-image 0.2s ease, border-color 0.2s ease;
}

/* KORREKTUR: Der Hover-Effekt mit dem nahtlosen Gelb-Schwarz-Streifenmuster */
#tts-sidebar-container:hover {
  border: 4px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #ffff00, #ffff00 10px, #000000 10px, #000000 20px) 1;
}

/* ==========================================================================
   3. DAS INTEGRIERTE NAVIGATIONS-MENÜ (Flache Liste)
   ========================================================================== */
#tts-navigation {
  flex-grow: 1;
  overflow-y: auto; /* Scrollbalken nur fürs Menü bei langen Listen */
  max-height: 45vh;
  border-bottom: 1px solid #444444;
  background: #1a1a1a;
  padding: 5px;
}

.tts-nav-list {
  list-style: none;
  margin: 0;
  padding: 5px;
}

.tts-nav-item {
  margin-bottom: 6px;
  padding: 6px 8px;
  border-radius: 4px;
  background: #2a2a2a;
}

.tts-nav-item a {
  text-decoration: none;
  color: #eeeeee;
  font-size: 14px;
  display: block;
  font-family: 'futuralc', sans-serif;
}

.tts-nav-item a:hover {
  color: #ffff00; /* Barrierefreies Gelb beim Drüberfahren */
}

/* Visuelle Unterscheidung der 5 Triggerpunkte in der Sidebar */
.tts-nav-seite { border-left: 4px solid #4CAF50; font-weight: bold; }
.tts-nav-h2 { border-left: 4px solid #007bff; padding-left: 12px; }
.tts-nav-comment { border-left: 4px solid #ffc107; font-style: italic; }
.tts-nav-footnote { border-left: 4px solid #6c757d; font-size: 12px; }
.tts-nav-cite { border-left: 4px solid #17a2b8; }

/* ==========================================================================
   4. DAS BEDIENFELD (Dockt direkt unter dem Menü an)
   ========================================================================== */
#tts-panel {
  padding: 16px;
  background: #222222;
  font-family: 'futuralc', sans-serif;
}

.tts-controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tts-controls button {
  font-family: 'futuralc', sans-serif;
  font-size: 16px;
  cursor: pointer;
  padding: 8px 12px;
  background: #444444;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.tts-controls button:hover {
  background: #666666;
}

.tts-settings {
  font-size: 13px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tts-settings label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tts-settings select, 
.tts-settings input {
  font-family: 'futuralc', sans-serif;
  background: #444444;
  color: #ffffff;
  border: 1px solid #555555;
  border-radius: 4px;
  padding: 2px 4px;
}

.tts-settings input[type="range"] {
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Fortschrittsbalken und Status-Text */
.tts-progress-container {
  margin-top: 10px;
  width: 100%;
}

.tts-progress-bar {
  width: 100%;
  height: 6px;
  background-color: #444444;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}

#tts-progress-fill {
  height: 100%;
  width: 0%;
  background-color: #4CAF50;
  transition: width 0.3s ease;
}

#tts-status-text {
  font-size: 11px;
  color: #cccccc;
  display: flex;
  justify-content: space-between;
}

/* Farbliche Markierung des gerade vorgelesenen Textes im Buch */
.tts-active-chunk {
  background-color: #fff3cd !important;
  transition: background-color 0.3s ease;
}