/* ---------------------------------------------------
   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: 16px;
  max-width: 800px;
  padding: 8px 0;
}
.wortwolke-link {
  display: inline-block;
  font-size: 12px;
  color: #333;
  background: #f5f7fa;
  border-radius: 6px;
  padding: 6px 14px;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border: 1px solid #e0e4ea;
}

/* Pastelltöne für die Buttons */
.wortwolke-link.wortwolke-color1 { background: #ffe5ec; border-color: #ffd6e0; }
.wortwolke-link.wortwolke-color2 { background: #e0f7fa; border-color: #b2ebf2; }
.wortwolke-link.wortwolke-color3 { background: #e8f5e9; border-color: #c8e6c9; }
.wortwolke-link.wortwolke-color4 { background: #fff9c4; border-color: #fff59d; }
.wortwolke-link.wortwolke-color5 { background: #ede7f6; border-color: #d1c4e9; }
.wortwolke-link.wortwolke-color6 { background: #f3e5f5; border-color: #ce93d8; }
.wortwolke-link.wortwolke-color7 { background: #ffe0b2; border-color: #ffcc80; }
.wortwolke-link.wortwolke-color8 { background: #dcedc8; border-color: #c5e1a5; }
.wortwolke-link.wortwolke-color9 { background: #f8bbd0; border-color: #f48fb1; }
.wortwolke-link.wortwolke-color10 { background: #b3e5fc; border-color: #81d4fa; }
.wortwolke-link.wortwolke-color11 { background: #cfd8dc; border-color: #b0bec5; }
.wortwolke-link.wortwolke-color12 { background: #fff3e0; border-color: #ffe0b2; }
.wortwolke-link.wortwolke-color13 { background: #f0f4c3; border-color: #e6ee9c; }
.wortwolke-link.wortwolke-color14 { background: #fbe9e7; border-color: #ffccbc; }
.wortwolke-link.wortwolke-color15 { background: #e1f5fe; border-color: #b3e5fc; }
.wortwolke-link.wortwolke-color16 { background: #f9fbe7; border-color: #f0f4c3; }
.wortwolke-link.wortwolke-color17 { background: #f3e5f5; border-color: #ce93d8; }
.wortwolke-link.wortwolke-color18 { background: #e0f2f1; border-color: #b2dfdb; }
.wortwolke-link.wortwolke-color19 { background: #fce4ec; border-color: #f8bbd0; }
.wortwolke-link.wortwolke-color20 { background: #f1f8e9; border-color: #dcedc8; }
.wortwolke-link.wortwolke-color21 { background: #fffde7; border-color: #fff9c4; }

.wortwolke-link.wortwolke-color1:hover, .wortwolke-link.wortwolke-color1:focus { color: #fff; background: #ff6090; border-color: #ff6090; }
.wortwolke-link.wortwolke-color2:hover, .wortwolke-link.wortwolke-color2:focus { color: #fff; background: #26c6da; border-color: #26c6da; }
.wortwolke-link.wortwolke-color3:hover, .wortwolke-link.wortwolke-color3:focus { color: #fff; background: #66bb6a; border-color: #66bb6a; }
.wortwolke-link.wortwolke-color4:hover, .wortwolke-link.wortwolke-color4:focus { color: #fff; background: #ffe082; border-color: #ffe082; }
.wortwolke-link.wortwolke-color5:hover, .wortwolke-link.wortwolke-color5:focus { color: #fff; background: #9575cd; border-color: #9575cd; }
.wortwolke-link.wortwolke-color6:hover, .wortwolke-link.wortwolke-color6:focus { color: #fff; background: #ba68c8; border-color: #ba68c8; }
.wortwolke-link.wortwolke-color7:hover, .wortwolke-link.wortwolke-color7:focus { color: #fff; background: #ff9800; border-color: #ff9800; }
.wortwolke-link.wortwolke-color8:hover, .wortwolke-link.wortwolke-color8:focus { color: #fff; background: #8bc34a; border-color: #8bc34a; }
.wortwolke-link.wortwolke-color9:hover, .wortwolke-link.wortwolke-color9:focus { color: #fff; background: #ec407a; border-color: #ec407a; }
.wortwolke-link.wortwolke-color10:hover, .wortwolke-link.wortwolke-color10:focus { color: #fff; background: #039be5; border-color: #039be5; }
.wortwolke-link.wortwolke-color11:hover, .wortwolke-link.wortwolke-color11:focus { color: #fff; background: #78909c; border-color: #78909c; }
.wortwolke-link.wortwolke-color12:hover, .wortwolke-link.wortwolke-color12:focus { color: #fff; background: #ffb300; border-color: #ffb300; }
.wortwolke-link.wortwolke-color13:hover, .wortwolke-link.wortwolke-color13:focus { color: #fff; background: #cddc39; border-color: #cddc39; }
.wortwolke-link.wortwolke-color14:hover, .wortwolke-link.wortwolke-color14:focus { color: #fff; background: #ff7043; border-color: #ff7043; }
.wortwolke-link.wortwolke-color15:hover, .wortwolke-link.wortwolke-color15:focus { color: #fff; background: #0288d1; border-color: #0288d1; }
.wortwolke-link.wortwolke-color16:hover, .wortwolke-link.wortwolke-color16:focus { color: #fff; background: #afb42b; border-color: #afb42b; }
.wortwolke-link.wortwolke-color17:hover, .wortwolke-link.wortwolke-color17:focus { color: #fff; background: #ab47bc; border-color: #ab47bc; }
.wortwolke-link.wortwolke-color18:hover, .wortwolke-link.wortwolke-color18:focus { color: #fff; background: #26a69a; border-color: #26a69a; }
.wortwolke-link.wortwolke-color19:hover, .wortwolke-link.wortwolke-color19:focus { color: #fff; background: #d81b60; border-color: #d81b60; }
.wortwolke-link.wortwolke-color20:hover, .wortwolke-link.wortwolke-color20:focus { color: #fff; background: #7cb342; border-color: #7cb342; }
.wortwolke-link.wortwolke-color21:hover, .wortwolke-link.wortwolke-color21:focus { color: #fff; background: #ffd600; border-color: #ffd600; }