/* ==========================================================
   DRK Rottenburg Wiki
   Anzeigefarbe-Picker im Editor
   Kompakte Darstellung
   ========================================================== */

.drk-color-picker-box {
    position: relative !important;

    margin: 8px 0 10px 0 !important;
    padding: 8px 12px !important;

    min-height: 0 !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;

    border-radius: 12px !important;
    border: 1px solid rgba(176, 0, 32, 0.18) !important;

    background: rgba(128, 128, 128, 0.075) !important;
    box-shadow: none !important;

    overflow: hidden !important;
}

/* Vorschau kleiner */
.drk-color-picker-preview {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;

    border-radius: 10px !important;
    margin: 0 !important;

    box-shadow: 0 4px 10px rgba(0,0,0,0.14) !important;
}

/* Inhalt kompakt */
.drk-color-picker-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Label kleiner */
.drk-color-picker-label {
    margin: 0 !important;

    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Controls nebeneinander */
.drk-color-picker-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Farbeingabe kleiner */
.drk-color-picker-controls input[type="color"],
#drkColorPickerInput {
    width: 34px !important;
    height: 30px !important;
    min-width: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 7px !important;
}

/* Auswahlfeld kompakter */
.drk-color-picker-controls select,
#drkColorPickerSelect {
    height: 34px !important;
    min-height: 34px !important;

    max-width: 220px !important;

    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Hinweistext ausblenden */
.drk-color-picker-hint {
    display: none !important;
}

/* Im Editor besonders kompakt */
.page-editor .drk-color-picker-box,
.page-editor-form .drk-color-picker-box,
#page-editor .drk-color-picker-box {
    max-height: 54px !important;
}

/* Mobile */
@media screen and (max-width: 700px) {
    .drk-color-picker-box {
        padding: 7px 9px !important;
        gap: 8px !important;
    }

    .drk-color-picker-preview {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
    }

    .drk-color-picker-controls select,
    #drkColorPickerSelect {
        max-width: 150px !important;
    }
}