/* ---------------------------------------------------
   Animierte WordCloud (Canvas & Fade-In)
   --------------------------------------------------- */

/* 1) Container: max 800×400 px, responsiv */
#wc_container {
  width: 800px !important;          /* Feste Breite für optimale Darstellung */
  min-height: 150px !important;     /* Minimale Höhe */
  max-height: 400px !important;     /* Maximale Höhe */
  margin: 20px auto;
  position: relative;
  opacity: 0;                       /* Start unsichtbar, fade-in per JS */
  transition: opacity 1s ease-in-out;
  background-color: #ffffff;        /* Sicherstellen eines weißen Hintergrunds */
}

/* 2) Responsive Anpassung für kleine Bildschirme */
@media (max-width: 840px) {
  #wc_container {
    width: 100% !important;
    max-width: 800px !important;
  }
}

/* 3) Canvas-Element Optimierungen */
#wc_container canvas {
  pointer-events: auto !important;             /* Aktiviert Maus-Interaktionen */
  cursor: pointer !important;                  /* Hand-Cursor für bessere UX */
  transition: all 0.3s ease-in-out !important; /* Sanfte Animation für alle Änderungen */
  filter: brightness(1) !important;            /* Normaler Zustand */
}

/* 4) Hover-Effekte für besseres visuelles Feedback */
#wc_container canvas:hover {
  transform: scale(1.02) !important;           /* Deutlicherer Zoom-Effekt */
  filter: brightness(1.1) !important;          /* Aufhellung beim Hover */
  box-shadow: 0 0 15px rgba(0,0,0,0.1) !important; /* Leichter Schatten-Effekt */
}

/* 5) Aktiver Zustand (beim Klicken) */
#wc_container canvas:active {
  transform: scale(0.98) !important;           /* Leicht eingedrückter Effekt */
  filter: brightness(0.95) !important;         /* Abdunkeln beim Klick */
}

/* 6) Keyframe-Animation: leichtes Pulsieren */
@keyframes pulsieren {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* 7) Admin-Tabellen Styling */
.wortwolke-admin table.widefat.striped {
  width: 100%;
  border-collapse: collapse;
}

.wortwolke-admin table.widefat.striped th,
.wortwolke-admin table.widefat.striped td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

/* 8) Admin-Bereich spezifische Styles */
.wortwolke-admin .button-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

.wortwolke-admin .button-danger:hover {
  background-color: #c82333;
  border-color: #bd2130;
  color: #fff;
}

/* Einfache Wortwolke-Liste */
.wortwolke-simple-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  padding: 8px 0;
}
.wortwolke-link {
  display: inline-block;
  font-size: 12px;
  color: #fff;
  border-radius: 6px;
  padding: 6px 14px;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  border: none;
}

/* Kräftige Farben für die Buttons - sofort sichtbar */
.wortwolke-link.wortwolke-color1 { background: #e91e63; }
.wortwolke-link.wortwolke-color2 { background: #00bcd4; }
.wortwolke-link.wortwolke-color3 { background: #4caf50; }
.wortwolke-link.wortwolke-color4 { background: #ff9800; color: #333; }
.wortwolke-link.wortwolke-color5 { background: #673ab7; }
.wortwolke-link.wortwolke-color6 { background: #9c27b0; }
.wortwolke-link.wortwolke-color7 { background: #ff5722; }
.wortwolke-link.wortwolke-color8 { background: #8bc34a; }
.wortwolke-link.wortwolke-color9 { background: #f06292; }
.wortwolke-link.wortwolke-color10 { background: #03a9f4; }
.wortwolke-link.wortwolke-color11 { background: #607d8b; }
.wortwolke-link.wortwolke-color12 { background: #ffc107; color: #333; }
.wortwolke-link.wortwolke-color13 { background: #cddc39; color: #333; }
.wortwolke-link.wortwolke-color14 { background: #ff7043; }
.wortwolke-link.wortwolke-color15 { background: #2196f3; }
.wortwolke-link.wortwolke-color16 { background: #c0ca33; color: #333; }
.wortwolke-link.wortwolke-color17 { background: #ab47bc; }
.wortwolke-link.wortwolke-color18 { background: #009688; }
.wortwolke-link.wortwolke-color19 { background: #ec407a; }
.wortwolke-link.wortwolke-color20 { background: #7cb342; }
.wortwolke-link.wortwolke-color21 { background: #ffeb3b; color: #333; }

/* Hover: noch kräftiger/dunkler */
.wortwolke-link.wortwolke-color1:hover, .wortwolke-link.wortwolke-color1:focus { background: #c2185b; }
.wortwolke-link.wortwolke-color2:hover, .wortwolke-link.wortwolke-color2:focus { background: #0097a7; }
.wortwolke-link.wortwolke-color3:hover, .wortwolke-link.wortwolke-color3:focus { background: #388e3c; }
.wortwolke-link.wortwolke-color4:hover, .wortwolke-link.wortwolke-color4:focus { background: #f57c00; color: #333; }
.wortwolke-link.wortwolke-color5:hover, .wortwolke-link.wortwolke-color5:focus { background: #512da8; }
.wortwolke-link.wortwolke-color6:hover, .wortwolke-link.wortwolke-color6:focus { background: #7b1fa2; }
.wortwolke-link.wortwolke-color7:hover, .wortwolke-link.wortwolke-color7:focus { background: #e64a19; }
.wortwolke-link.wortwolke-color8:hover, .wortwolke-link.wortwolke-color8:focus { background: #689f38; }
.wortwolke-link.wortwolke-color9:hover, .wortwolke-link.wortwolke-color9:focus { background: #d81b60; }
.wortwolke-link.wortwolke-color10:hover, .wortwolke-link.wortwolke-color10:focus { background: #0288d1; }
.wortwolke-link.wortwolke-color11:hover, .wortwolke-link.wortwolke-color11:focus { background: #455a64; }
.wortwolke-link.wortwolke-color12:hover, .wortwolke-link.wortwolke-color12:focus { background: #ffa000; color: #333; }
.wortwolke-link.wortwolke-color13:hover, .wortwolke-link.wortwolke-color13:focus { background: #afb42b; color: #333; }
.wortwolke-link.wortwolke-color14:hover, .wortwolke-link.wortwolke-color14:focus { background: #e64a19; }
.wortwolke-link.wortwolke-color15:hover, .wortwolke-link.wortwolke-color15:focus { background: #1976d2; }
.wortwolke-link.wortwolke-color16:hover, .wortwolke-link.wortwolke-color16:focus { background: #9e9d24; color: #333; }
.wortwolke-link.wortwolke-color17:hover, .wortwolke-link.wortwolke-color17:focus { background: #8e24aa; }
.wortwolke-link.wortwolke-color18:hover, .wortwolke-link.wortwolke-color18:focus { background: #00796b; }
.wortwolke-link.wortwolke-color19:hover, .wortwolke-link.wortwolke-color19:focus { background: #c2185b; }
.wortwolke-link.wortwolke-color20:hover, .wortwolke-link.wortwolke-color20:focus { background: #558b2f; }
.wortwolke-link.wortwolke-color21:hover, .wortwolke-link.wortwolke-color21:focus { background: #fbc02d; color: #333; }