/* === Zeichenzähler für Body-Feld und User-Question-Feld === */
#edit-body-wrapper .mms-character-counter,
#edit-field-user-question-wrapper .mms-character-counter {
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 10px 0;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid #005c78;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 92, 120, 0.15);
  position: relative;
  display: block;
  text-align: center;
  font-weight: 500;
}

/* Warnmeldung bei Überschreitung */
#edit-body-wrapper .length-warning,
#edit-field-user-question-wrapper .length-warning {
  color: #d32f2f;
  font-size: 12px;
  margin-top: 8px;
  font-weight: bold;
  animation: pulse 2s infinite;
  background: #ffebee;
  border: 2px solid #f44336;
  border-radius: 6px;
  padding: 8px 12px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(244, 67, 54, 0.2);
}

/* Animation für Warnung */
@keyframes pulse {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

/* Label-Erweiterung mit Zeichenlimit-Info */
#edit-body-wrapper .max-chars-info,
#edit-field-user-question-wrapper .max-chars-info {
  font-weight: bold;
  color: #005c78;
  font-size: 0.85em;
  background: #e3f2fd;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  display: inline-block;
  border: 1px solid #bbdefb;
}

/* CKEditor-spezifische Anpassungen */
#edit-body-wrapper .cke_bottom,
#edit-field-user-question-wrapper .cke_bottom {
  border-bottom: none !important;
  margin-bottom: 5px;
}

#edit-body-wrapper #cke_edit-body-0-value,
#edit-field-user-question-wrapper #cke_edit-field-user-question-0-value {
  margin-bottom: 8px;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  #edit-body-wrapper .mms-character-counter,
  #edit-field-user-question-wrapper .mms-character-counter {
    font-size: 12px;
    padding: 10px 12px;
    margin: 8px 0;
  }
  
  #edit-body-wrapper .max-chars-info,
  #edit-field-user-question-wrapper .max-chars-info {
    display: block;
    margin: 4px 0 0 0;
    text-align: center;
  }
}

/* Hover-Effekte für bessere Interaktivität */
#edit-body-wrapper .mms-character-counter:hover,
#edit-field-user-question-wrapper .mms-character-counter:hover {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-color: #0277bd;
  box-shadow: 0 3px 8px rgba(0, 92, 120, 0.2);
  transition: all 0.3s ease;
}

/* Spezielle Styling für verschiedene Zustandsfarben */
.mms-character-counter .counter-safe {
  color: #2e7d32 !important;
  font-weight: 600;
}

.mms-character-counter .counter-warning {
  color: #f57c00 !important;
  font-weight: 600;
}

.mms-character-counter .counter-danger {
  color: #d32f2f !important;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(211, 47, 47, 0.2);
}