/* Color Picker Modal Styles */
.color-picker-modal {
  position: fixed;
  display: none;
    /* Position wird komplett vom PopupManager verwaltet - keine Defaults hier */
    width: 600px;
    max-height: 500px;
    background-color: #fff;
    border: 1px solid #888;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 8px;
    overflow-y: auto;
    z-index: 5000;
    font-size: 0.75em; /* Gesamte Schriftgröße kleiner */
  }
  
  /* Header */
  .color-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f1f1f1;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: move;
  }
  .color-picker-header h2 {
    margin: 0;
    font-size: 1em;
  }
  .color-picker-close {
    font-size: 1.2em;
    cursor: pointer;
  }
  
  /* Body */
  .color-picker-body {
    display: flex;
    padding: 10px;
  }
  .color-picker-left,
  .color-picker-right {
    flex: 1;
    padding: 10px;
  }
  
  /* Basic Colors Bar */
  .basic-colors p {
    margin: 0 0 5px;
  }
  .basic-colors-bar {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
  }
  .basic-color-swatch {
    width: 24px;
    height: 24px;
    border: 1px solid #ccc;
    cursor: pointer;
  }
  
  .basic-color-swatch:hover {
    border-color: #007bff;
  }
  
  .basic-color-swatch.selected {
    border: 2px solid #007bff;
  }
  
  /* Color Grid */
  .color-grid p {
    margin: 0 0 5px;
  }
  .grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .color-grid-item {
    width: calc(100% / 10 - 5px);
    padding-bottom: calc(100% / 10 - 5px);
    cursor: pointer;
    border: 1px solid #ddd;
    box-sizing: border-box;
  }
  .color-grid-item:hover {
    border-color: #007bff;
  }
  .color-grid-item.selected {
    border: 2px solid #007bff;
  }
  
  /* Font Options */
  .font-options p {
    margin: 0 0 5px;
  }
  .font-options label {
    display: block;
    margin-bottom: 5px;
  }
  
  /* Current Color Display */
  .current-color-display p {
    margin: 0 0 8px;
  }
  #current-color {
    width: 50px !important;
    height: 50px !important;
    border: 1px solid #ccc !important;
  }
  
  /* Color Slider */
  .color-slider p {
    margin: 0 0 5px;
  }
  .color-slider input[type="range"] {
    width: 100%;
  }
  
  /* Current Color Display */
  .current-color-display p {
    margin: 0 0 5px;
  }
  
  /* Footer */
  .color-picker-footer {
    padding: 10px;
    text-align: right;
    border-top: 1px solid #ddd;
  }
  .color-picker-footer .btn,
  #color-picker-save.btn {
    background-color: #007bff !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer;
    box-shadow: 0 2px 8px #007bff22;
    font-weight: bold;
  }
  .color-picker-footer .btn:hover,
  #color-picker-save.btn:hover {
    background-color: #0056b3 !important;
  }

@media (max-width: 600px) {
  .color-picker-modal {
    width: 98vw;
    max-width: 100vw;
    min-width: unset;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 0;
    font-size: 1em;
    height: auto;
    max-height: 95vh;
    padding: 0;
    box-sizing: border-box;
    overflow-y: auto;
  }
  .color-picker-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px;
    font-size: 1em;
  }
  .color-picker-header h2 {
    font-size: 1.1em;
  }
  .color-picker-body {
    flex-direction: column;
    padding: 8px;
  }
  .color-picker-left,
  .color-picker-right {
    padding: 5px;
  }
  .basic-colors-bar,
  .grid-container {
    gap: 3px;
  }
  .basic-color-swatch,
  .color-grid-item {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding-bottom: 0;
  }
  .color-picker-footer {
    padding: 8px;
  }
  .color-picker-footer .btn {
    width: 100%;
    font-size: 1em;
    padding: 12px 0;
  }
}