/* =========================================================================
   SPRACHSTEUERUNG V13.0 - KONFLIKTFREIE CSS-KLASSEN
   ========================================================================= */
/* 🎯 Alle Klassen haben jetzt das Präfix "splr-" (Sprachsteuerung Lothar Reuter)
   um Konflikte mit anderen Plugins zu vermeiden */

/* === Hilfebox Style: Modern Blue Theme V2 (Konfliktfrei) === */
#splr-help-box {
  position: fixed !important; 
  bottom: 80px !important;    
  right: 20px !important;
  background: #1976D2; /* Sattes, modernes Blau */
  color: #FFFFFF;     /* Weißer Text für Kontrast */
  padding: 18px !important; /* Etwas mehr Padding */
  border: 2px solid #FFC107 !important; /* KRITISCH: Gelber Rand */
  border-radius: 12px; /* Abgerundete Ecken */
  box-shadow: 0 6px 15px rgba(0,0,0,0.4), 0 0 8px rgba(255,255,0,0.5); /* Optimierter Schatten */
  font-size: 14px;
  line-height: 1.5;
  max-width: 300px !important; /* KRITISCH: Breite erhöhen */
  width: 300px !important;     /* KRITISCH: Breite erhöhen */
  display: none;
  z-index: 10000 !important; /* Wichtig: Über allem liegen */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Styling für die Kopfzeile (mit Icons) */
#splr-help-box .splr-help-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px; 
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Icons */
#splr-help-box .splr-help-icon {
  cursor: pointer;
  font-size: 20px;
}

/* Icon für Einstellungen */
#splr-help-box .splr-settings-icon {
    color: #FFFF00 !important; /* Gelb */
}

/* Icon für Befehle (📚) */
#splr-help-box .splr-commands-icon { 
    color: #FFFFFF !important; /* Weiß */
    margin: 0 10px; 
}

/* Icon für Info (ℹ) */
#splr-help-box .splr-info-icon { 
    color: #A8D5FF !important; /* Helles Blau */
    margin-right: 10px;
}

/* Icon für Schließen (✖) */
#splr-help-box .splr-close-icon {
    color: #FF0000 !important; /* Rot */
}

/* Text-Container und List-Items */
#splr-help-box p, 
#splr-help-box ul {
  margin: 0 0 10px 0;
  color: white; 
}

#splr-help-box ul {
  list-style: none;
  padding-left: 0;
}

/* Stil für Befehls-Tags */
#splr-help-box code {
  background: #0d47a1;
  color: #FFF0B5;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: bold;
}

/* =========================================================================
   GOOGLE-STYLE WORD HIGHLIGHTING (KONFLIKTFREI)
   ========================================================================= */

/* Basis für alle highlightbaren Wörter - NEUE Klassen */
.splr-word {
  display: inline;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 3px;
  padding: 2px 0;
}

/* Basis für alle highlightbaren Wörter - ALTE Klassen (Kompatibilität) */
.sp-word {
  display: inline;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 3px;
  padding: 2px 0;
}

/* Aktives Wort (wird gerade vorgelesen) - Google-Style - NEUE Klasse */
.splr-word-active {
  background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%) !important;
  color: #000000 !important;
  font-weight: 500 !important;
  padding: 3px 5px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(132, 250, 176, 0.4) !important;
  transform: scale(1.02);
  position: relative;
  z-index: 1;
  animation: splr-wordPulse 0.3s ease-out;
}

/* Aktives Wort - ALTE Klasse (Kompatibilität) */
.sp-word-active {
  background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%) !important;
  color: #000000 !important;
  font-weight: 500 !important;
  padding: 3px 5px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(132, 250, 176, 0.4) !important;
  transform: scale(1.02);
  position: relative;
  z-index: 1;
  animation: splr-wordPulse 0.3s ease-out;
}

/* Bereits gelesene Wörter (optional) - NEUE Klassen */
.splr-word-read {
  color: #888888;
  opacity: 0.7;
}

/* Bereits gelesene Wörter - ALTE Klasse (Kompatibilität) */
.sp-word-read {
  color: #888888;
  opacity: 0.7;
}

/* Animation für Wort-Wechsel */
@keyframes splr-wordPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1.02); }
}

/* Mobile-optimiert - NEUE Klasse */
@media (max-width: 768px) {
  .splr-word-active {
    padding: 4px 6px !important;
    font-size: 1.02em;
  }
  
  .sp-word-active {
    padding: 4px 6px !important;
    font-size: 1.02em;
  }
}

/* Verhindert Layout-Shifts - NEUE Klasse */
.splr-highlighting-active {
  line-height: 1.3 !important;
}

/* Verhindert Layout-Shifts - ALTE Klasse (Kompatibilität) */
.sp-highlighting-active {
  line-height: 1.3 !important;
}

/* =========================================================================
   SPRACHSTEUERUNGS-BUTTON (Alte ID beibehalten - ist spezifisch genug!)
   ========================================================================= */

/* Button-Styles */
#sprachBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  
  /* Größe - 50px + 2px Border = 54px Gesamt (wie vorher) */
  width: 50px;
  height: 50px;
  /* box-sizing: border-box ENTFERNT - Border kommt ZUSÄTZLICH zu 50px */
  
  border-radius: 50%;
  border: 2px solid white;
  background-color: #4b0082; /* Standard: Indigo */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3), 0 0 10px rgba(255,255,255,0.5);
  z-index: 9999;
  transition: all 0.3s ease;
}

#sprachBtn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0,0,0,0.4), 0 0 15px rgba(255,255,255,0.6);
}

#sprachBtn:active {
  transform: scale(0.95);
}

/* Status-Bar */
.splr-status-bar {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 9998;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  animation: splr-fadeIn 0.3s ease;
}

@keyframes splr-fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================================
   MODAL/DIALOG STYLES (KONFLIKTFREI)
   ========================================================================= */

.splr-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: splr-fadeIn 0.3s ease;
}

.splr-modal-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  animation: splr-slideUp 0.3s ease;
}

@keyframes splr-slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.splr-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e0e0e0;
}

.splr-modal-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.splr-modal-close {
  font-size: 24px;
  cursor: pointer;
  color: #666;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}

.splr-modal-close:hover {
  color: #d32f2f;
}

.splr-modal-body {
  color: #555;
  line-height: 1.6;
}

/* =========================================================================
   SETTINGS PANEL (KONFLIKTFREI)
   ========================================================================= */

.splr-settings-panel {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.splr-settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e0e0e0;
}

.splr-settings-row:last-child {
  border-bottom: none;
}

.splr-settings-label {
  font-weight: 500;
  color: #333;
}

.splr-settings-control {
  min-width: 200px;
}

.splr-settings-select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.splr-settings-slider {
  width: 100%;
}

.splr-settings-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* =========================================================================
   RESPONSIVE DESIGN
   ========================================================================= */

@media (max-width: 768px) {
  #splr-help-box {
    max-width: calc(100vw - 40px) !important;
    width: calc(100vw - 40px) !important;
    right: 20px !important;
  }
  
  .splr-modal-content {
    max-width: calc(100vw - 40px);
    margin: 20px;
  }
  
  .splr-settings-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .splr-settings-control {
    width: 100%;
  }
}

/* =========================================================================
   ACCESSIBILITY (A11Y)
   ========================================================================= */

.splr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus styles für Tastaturnavigation */
#splr-sprachBtn:focus,
.splr-help-icon:focus,
.splr-modal-close:focus {
  outline: 2px solid #2271b1;
  outline-offset: 2px;
}

/* =========================================================================
   PRINT STYLES (Verstecke UI-Elemente beim Drucken)
   ========================================================================= */

@media print {
  #splr-help-box,
  #splr-sprachBtn,
  .splr-status-bar,
  .splr-modal-overlay {
    display: none !important;
  }
}

/* =========================================================================
   DARK MODE SUPPORT (Optional)
   ========================================================================= */

@media (prefers-color-scheme: dark) {
  .splr-modal-content {
    background: #2d2d2d;
    color: #e0e0e0;
  }
  
  .splr-modal-title {
    color: #ffffff;
  }
  
  .splr-settings-panel {
    background: #3d3d3d;
  }
  
  .splr-settings-label {
    color: #e0e0e0;
  }
  
  .splr-settings-select {
    background: #4d4d4d;
    color: #e0e0e0;
    border-color: #5d5d5d;
  }
}

/* =========================================================================
   HIGH CONTRAST MODE (Barrierefreiheit)
   ========================================================================= */

@media (prefers-contrast: high) {
  #splr-help-box {
    border: 3px solid #FFC107 !important;
  }
  
  .splr-word-active {
    border: 2px solid #000000 !important;
  }
  
  #splr-sprachBtn {
    border: 3px solid white !important;
  }
}

/* =========================================================================
   REDUCED MOTION (Barrierefreiheit)
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .splr-word,
  .splr-word-active,
  #splr-sprachBtn,
  .splr-status-bar,
  .splr-modal-overlay,
  .splr-modal-content {
    animation: none !important;
    transition: none !important;
  }
  
  .splr-word-active {
    transform: none !important;
  }
  
  @keyframes splr-wordPulse {
    0%, 100% { transform: none; }
  }
}