.elementor-4545 .elementor-element.elementor-element-bdccc5c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4545 .elementor-element.elementor-element-290b8859{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;border-width:0px 2px 0px 0px;--border-top-width:0px;--border-right-width:2px;--border-bottom-width:0px;--border-left-width:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4545 .elementor-element.elementor-element-290b8859.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-4545 .elementor-element.elementor-element-11185c20{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-widget-nested-tabs.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-4545 .elementor-element.elementor-element-5b3a925f{--display:flex;--padding-top:12px;--padding-bottom:12px;--padding-left:12px;--padding-right:12px;}.elementor-4545 .elementor-element.elementor-element-20c91b30 > .elementor-widget-container{margin:24px 0px 0px 0px;}.elementor-4545 .elementor-element.elementor-element-20c91b30.elementor-element{--align-self:center;}.elementor-4545 .elementor-element.elementor-element-32b886c4{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--padding-top:12px;--padding-bottom:12px;--padding-left:12px;--padding-right:12px;}.elementor-4545 .elementor-element.elementor-element-52145080{--display:flex;--padding-top:12px;--padding-bottom:12px;--padding-left:12px;--padding-right:12px;}.elementor-4545 .elementor-element.elementor-element-2c914dc9{--n-tabs-heading-justify-content:initial;--n-tabs-title-width:100%;--n-tabs-title-height:initial;--n-tabs-title-align-items:center;--n-tabs-title-flex-grow:1;--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;--n-tabs-title-gap:0px;--n-tabs-gap:0px;--n-tabs-title-border-radius:0px 0px 0px 0px;--n-tabs-title-padding-top:16px;--n-tabs-title-padding-right:16px;--n-tabs-title-padding-bottom:16px;--n-tabs-title-padding-left:16px;}.elementor-4545 .elementor-element.elementor-element-2c914dc9 > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:var( --e-global-color-33e9574 );}.elementor-4545 .elementor-element.elementor-element-2c914dc9.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );border-style:solid;border-width:0px 1px 2px 1px;border-color:var( --e-global-color-primary );}.elementor-4545 .elementor-element.elementor-element-2c914dc9.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-4545 .elementor-element.elementor-element-2c914dc9.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );border-style:solid;border-width:1px 1px 2px 1px;border-color:var( --e-global-color-primary );}.elementor-4545 .elementor-element.elementor-element-2c914dc9 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-4545 .elementor-element.elementor-element-2c914dc9.elementor-element{--align-self:center;}.elementor-4545 .elementor-element.elementor-element-2c914dc9.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:not( :hover ){border-style:solid;border-width:0px 1px 2px 1px;border-color:var( --e-global-color-primary );}.elementor-4545 .elementor-element.elementor-element-701b111f{--display:flex;--border-radius:15px 15px 15px 15px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}.elementor-4545 .elementor-element.elementor-element-1bbaa3c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4545 .elementor-element.elementor-element-1bbaa3c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-4545 .elementor-element.elementor-element-4fa8ee97{--display:flex;--border-radius:0px 0px 0px 0px;--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}.elementor-4545 .elementor-element.elementor-element-606ba65d{--display:flex;--min-height:40vh;--border-radius:15px 15px 15px 15px;--padding-top:48px;--padding-bottom:48px;--padding-left:48px;--padding-right:48px;}.elementor-4545 .elementor-element.elementor-element-22b1f2d{--display:flex;--min-height:91vh;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:0px 0px 0px 0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4545 .elementor-element.elementor-element-2c5b9ec9{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:15px 15px 15px 15px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4545 .elementor-element.elementor-element-1ec09ab0 > .elementor-widget-container{margin:0px 0px 200px 0px;}.elementor-4545 .elementor-element.elementor-element-4fb9f06{--n-tabs-heading-justify-content:initial;--n-tabs-title-width:100%;--n-tabs-title-height:initial;--n-tabs-title-align-items:center;--n-tabs-title-flex-grow:1;--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;--n-tabs-title-gap:0px;--n-tabs-gap:0px;--n-tabs-title-border-radius:0px 0px 0px 0px;--n-tabs-title-padding-top:16px;--n-tabs-title-padding-right:16px;--n-tabs-title-padding-bottom:16px;--n-tabs-title-padding-left:16px;}.elementor-4545 .elementor-element.elementor-element-4fb9f06 > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:var( --e-global-color-33e9574 );}.elementor-4545 .elementor-element.elementor-element-4fb9f06 > .elementor-widget-container{padding:0px 0px 0px 0px;border-radius:15px 15px 15px 15px;}.elementor-4545 .elementor-element.elementor-element-4fb9f06.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:not( :hover ){border-style:solid;border-width:0px 1px 0px 1px;border-color:var( --e-global-color-primary );}.elementor-4545 .elementor-element.elementor-element-4fb9f06.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{border-style:solid;border-width:0px 1px 0px 1px;border-color:var( --e-global-color-primary );}:where( .elementor-4545 .elementor-element.elementor-element-4fb9f06.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs > .e-n-tabs-content ) > .e-con{border-style:solid;border-width:2px 0px 2px 0px;}.elementor-4545 .elementor-element.elementor-element-462703dd{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4545 .elementor-element.elementor-element-42aad64e{--display:flex;--min-height:97vh;border-style:solid;--border-style:solid;border-width:0px 0px 0px 2px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:2px;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-4545 .elementor-element.elementor-element-bdccc5c{--width:100%;}.elementor-4545 .elementor-element.elementor-element-290b8859{--width:400px;}.elementor-4545 .elementor-element.elementor-element-1bbaa3c{--width:60%;}}/* Start custom CSS for shortcode, class: .elementor-element-20c91b30 */.wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30, #rgb-wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30 {
    width: 10px !important;
    height: 10px !important;
    background: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 50% !important;
    position: absolute !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30 {
    position: absolute;
    height: 1px;
    width: 1px;
    background: red;
}

.field-.elementor-4545 .elementor-element.elementor-element-20c91b30 {
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.hue-.elementor-4545 .elementor-element.elementor-element-20c91b30 {
    width: 4px;
    height: 20px;
    background: #fff;
    border: 2px solid #000;
    position: absolute;
    pointer-events: none;
    transform: translateX(-50%);
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.css-color-wheel-container,
.css-color-picker-container {
    position: relative;
}

.css-color-wheel-container {
    display: flex;
    gap: 16px;
    align-items: center;
}

.wheel-section {
    position: relative;
    width: 250px;
    height: 250px;
}

.brightness-slider {
    width: 16px;
    height: 250px;
    position: relative;
}

.brightness-slider .slider-track {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 0px solid #404040;
    overflow: hidden;
    position: relative;
}

.brightness-slider input[type="range"] {
    position: absolute;
    width: 250px;
    height: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    -webkit-appearance: none;
    background: transparent;
}

.brightness-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #404040;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.brightness-slider input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 0px solid #000;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.wheel-shape-controls {
    width: 25px;
}

.wheel-shape-controls img {
    opacity: .6;
    width: 20px;
    cursor: pointer;
}

.wheel-shape-controls img:hover {
    opacity: .4;
}

.wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30-complementary {
    z-index: 100;
    pointer-events: none;
}

.marker-connection-complementary {
    z-index: 99;
    pointer-events: none;
    opacity: 0.6;
}

.harmony-control {
    margin-top: 10px;
    padding: 5px;
    border-top: 1px solid #eee;
}

.harmony-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: #666;
}

.harmony-checkbox {
    margin: 0;
}

.wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30-harmony {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-63eec4bc *//* Container für die Schieberegler */
.css-color-sliders {
    background: #000;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

/* Einzelne Slider-Gruppe */
.css-color-sliders .slider-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}

/* Label (R,G,B,A) */
.css-color-sliders .slider-group label {
    color: #9AA0A6;
    min-width: 20px;
    font-size: 11px;
    font-weight: 500;
}

/* Range Slider */
.css-color-sliders input[type="range"] {
    flex-grow: 1;
    height: 6px;
    border-radius: 3px;
    -webkit-appearance: none;
    position: relative;
}

/* Slider Thumb */
.css-color-sliders input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #E8EAED;
    border: 2px solid #313539;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

.css-color-sliders input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #E8EAED;
    border: 2px solid #313539;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

/* Numerische Eingabefelder */
.css-color-sliders input[type="number"] {
    width: 50px;
    padding: 4px 8px;
    background: #404040;
    border: none;
    border-radius: 4px;
    color: #E8EAED;
    font-size: 11px;
    text-align: center;
}

/* Spinner-Pfeile für Nummer-Inputs */
.css-color-sliders input[type="number"]::-webkit-inner-spin-button {
    opacity: 1;
    background: transparent;
    cursor: pointer;
}

/* Slider Track Farben */
.css-color-sliders .rSlider {
    background: linear-gradient(to right, transparent, #ff0000);
}

.css-color-sliders .gSlider {
    background: linear-gradient(to right, transparent, #00ff00);
}

.css-color-sliders .bSlider {
    background: linear-gradient(to right, transparent, #0000ff);
}

.css-color-sliders .aSlider {
    background: linear-gradient(to right, transparent, #E8EAED);
    border: 1px solid #404040;
}

/* Hover-Effekte */
.css-color-sliders input[type="range"]:hover::-webkit-slider-thumb {
    background: #fff;
}

.css-color-sliders input[type="number"]:hover {
    background: #4a4a4a;
}

/* Focus-Styles */
.css-color-sliders input[type="range"]:focus,
.css-color-sliders input[type="number"]:focus {
    outline: none;
}

.css-color-sliders input[type="number"]:focus {
    background: #4a4a4a;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-305c2617 */.css-icons svg {
    fill: white !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-32b886c4 */.css-hue-slider-container, .css-color-field-container {
    text-align: center;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4546069a */.color-picker-3d__container {
            width: 350px;
            height: 350px;
            border: 0px solid #ccc;
            cursor: crosshair;
        }
        .color-picker-3d__preview {
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 0px solid black;
        }
        .color-picker-3d__controls {
            margin: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .color-picker-3d__value {
            font-family: monospace;
        }
        .color-picker-3d__rgb-display {
            display: flex;
            gap: 10px;
        }
        
.color-picker-3d__controls {
    margin-top: -60px;
}

.color-picker-3d__preview {
    padding: 0px;
    height: 50px;
    width: 50px;
    border-radius: 50px;
    z-index: 9999;
}

.color-picker-3d__rgb-display {
    font-size: 12px !important;
    color: #D8DFE6aa;
    gap: 3px;
}

.color-picker-3d__rgb-display span {
    padding-right: 6px;
    color: #D8DFE6;
}

.saturation-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 16px;
    border-radius: 15px;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.saturation-slider:hover {
    opacity: 1;
}

/* Thumb Styles */
.saturation-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 0px solid #666;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    margin-top: -4px;
}

.saturation-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #666;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Track Styles */
.saturation-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    border-radius: 4px;
}

.saturation-slider::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    border-radius: 4px;
}

/* Container Styles */
.saturation-control {
    margin: 10px 0;
    padding: 5px;
}

.saturation-control label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    color: #666;
    font-size: 14px;
}

.saturation-value {
    background: #313539;
    color: #D8DFE6;
    border: none !important;
    padding: 3px 8px;
    font-size: 14px;
}

.picker-overlay {
    pointer-events: none;
}

.picker-overlay circle {
    transition: all 0.2s ease;
}

.single-highlight {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { r: 5; }
    50% { r: 7; }
    100% { r: 5; }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-20c91b30 */.wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30, #rgb-wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30 {
    width: 10px !important;
    height: 10px !important;
    background: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 50% !important;
    position: absolute !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30 {
    position: absolute;
    height: 1px;
    width: 1px;
    background: red;
}

.field-.elementor-4545 .elementor-element.elementor-element-20c91b30 {
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.hue-.elementor-4545 .elementor-element.elementor-element-20c91b30 {
    width: 4px;
    height: 20px;
    background: #fff;
    border: 2px solid #000;
    position: absolute;
    pointer-events: none;
    transform: translateX(-50%);
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.css-color-wheel-container,
.css-color-picker-container {
    position: relative;
}

.css-color-wheel-container {
    display: flex;
    gap: 16px;
    align-items: center;
}

.wheel-section {
    position: relative;
    width: 250px;
    height: 250px;
}

.brightness-slider {
    width: 16px;
    height: 250px;
    position: relative;
}

.brightness-slider .slider-track {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 0px solid #404040;
    overflow: hidden;
    position: relative;
}

.brightness-slider input[type="range"] {
    position: absolute;
    width: 250px;
    height: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    -webkit-appearance: none;
    background: transparent;
}

.brightness-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #404040;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.brightness-slider input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 0px solid #000;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.wheel-shape-controls {
    width: 25px;
}

.wheel-shape-controls img {
    opacity: .6;
    width: 20px;
    cursor: pointer;
}

.wheel-shape-controls img:hover {
    opacity: .4;
}

.wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30-complementary {
    z-index: 100;
    pointer-events: none;
}

.marker-connection-complementary {
    z-index: 99;
    pointer-events: none;
    opacity: 0.6;
}

.harmony-control {
    margin-top: 10px;
    padding: 5px;
    border-top: 1px solid #eee;
}

.harmony-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: #666;
}

.harmony-checkbox {
    margin: 0;
}

.wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30-harmony {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-63eec4bc *//* Container für die Schieberegler */
.css-color-sliders {
    background: #000;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

/* Einzelne Slider-Gruppe */
.css-color-sliders .slider-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}

/* Label (R,G,B,A) */
.css-color-sliders .slider-group label {
    color: #9AA0A6;
    min-width: 20px;
    font-size: 11px;
    font-weight: 500;
}

/* Range Slider */
.css-color-sliders input[type="range"] {
    flex-grow: 1;
    height: 6px;
    border-radius: 3px;
    -webkit-appearance: none;
    position: relative;
}

/* Slider Thumb */
.css-color-sliders input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #E8EAED;
    border: 2px solid #313539;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

.css-color-sliders input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #E8EAED;
    border: 2px solid #313539;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

/* Numerische Eingabefelder */
.css-color-sliders input[type="number"] {
    width: 50px;
    padding: 4px 8px;
    background: #404040;
    border: none;
    border-radius: 4px;
    color: #E8EAED;
    font-size: 11px;
    text-align: center;
}

/* Spinner-Pfeile für Nummer-Inputs */
.css-color-sliders input[type="number"]::-webkit-inner-spin-button {
    opacity: 1;
    background: transparent;
    cursor: pointer;
}

/* Slider Track Farben */
.css-color-sliders .rSlider {
    background: linear-gradient(to right, transparent, #ff0000);
}

.css-color-sliders .gSlider {
    background: linear-gradient(to right, transparent, #00ff00);
}

.css-color-sliders .bSlider {
    background: linear-gradient(to right, transparent, #0000ff);
}

.css-color-sliders .aSlider {
    background: linear-gradient(to right, transparent, #E8EAED);
    border: 1px solid #404040;
}

/* Hover-Effekte */
.css-color-sliders input[type="range"]:hover::-webkit-slider-thumb {
    background: #fff;
}

.css-color-sliders input[type="number"]:hover {
    background: #4a4a4a;
}

/* Focus-Styles */
.css-color-sliders input[type="range"]:focus,
.css-color-sliders input[type="number"]:focus {
    outline: none;
}

.css-color-sliders input[type="number"]:focus {
    background: #4a4a4a;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-305c2617 */.css-icons svg {
    fill: white !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-32b886c4 */.css-hue-slider-container, .css-color-field-container {
    text-align: center;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4546069a */.color-picker-3d__container {
            width: 350px;
            height: 350px;
            border: 0px solid #ccc;
            cursor: crosshair;
        }
        .color-picker-3d__preview {
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 0px solid black;
        }
        .color-picker-3d__controls {
            margin: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .color-picker-3d__value {
            font-family: monospace;
        }
        .color-picker-3d__rgb-display {
            display: flex;
            gap: 10px;
        }
        
.color-picker-3d__controls {
    margin-top: -60px;
}

.color-picker-3d__preview {
    padding: 0px;
    height: 50px;
    width: 50px;
    border-radius: 50px;
    z-index: 9999;
}

.color-picker-3d__rgb-display {
    font-size: 12px !important;
    color: #D8DFE6aa;
    gap: 3px;
}

.color-picker-3d__rgb-display span {
    padding-right: 6px;
    color: #D8DFE6;
}

.saturation-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 16px;
    border-radius: 15px;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.saturation-slider:hover {
    opacity: 1;
}

/* Thumb Styles */
.saturation-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 0px solid #666;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    margin-top: -4px;
}

.saturation-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #666;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Track Styles */
.saturation-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    border-radius: 4px;
}

.saturation-slider::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    border-radius: 4px;
}

/* Container Styles */
.saturation-control {
    margin: 10px 0;
    padding: 5px;
}

.saturation-control label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    color: #666;
    font-size: 14px;
}

.saturation-value {
    background: #313539;
    color: #D8DFE6;
    border: none !important;
    padding: 3px 8px;
    font-size: 14px;
}

.picker-overlay {
    pointer-events: none;
}

.picker-overlay circle {
    transition: all 0.2s ease;
}

.single-highlight {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { r: 5; }
    50% { r: 7; }
    100% { r: 5; }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-20c91b30 */.wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30, #rgb-wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30 {
    width: 10px !important;
    height: 10px !important;
    background: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 50% !important;
    position: absolute !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30 {
    position: absolute;
    height: 1px;
    width: 1px;
    background: red;
}

.field-.elementor-4545 .elementor-element.elementor-element-20c91b30 {
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.hue-.elementor-4545 .elementor-element.elementor-element-20c91b30 {
    width: 4px;
    height: 20px;
    background: #fff;
    border: 2px solid #000;
    position: absolute;
    pointer-events: none;
    transform: translateX(-50%);
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.css-color-wheel-container,
.css-color-picker-container {
    position: relative;
}

.css-color-wheel-container {
    display: flex;
    gap: 16px;
    align-items: center;
}

.wheel-section {
    position: relative;
    width: 250px;
    height: 250px;
}

.brightness-slider {
    width: 16px;
    height: 250px;
    position: relative;
}

.brightness-slider .slider-track {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 0px solid #404040;
    overflow: hidden;
    position: relative;
}

.brightness-slider input[type="range"] {
    position: absolute;
    width: 250px;
    height: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    -webkit-appearance: none;
    background: transparent;
}

.brightness-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #404040;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.brightness-slider input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 0px solid #000;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.wheel-shape-controls {
    width: 25px;
}

.wheel-shape-controls img {
    opacity: .6;
    width: 20px;
    cursor: pointer;
}

.wheel-shape-controls img:hover {
    opacity: .4;
}

.wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30-complementary {
    z-index: 100;
    pointer-events: none;
}

.marker-connection-complementary {
    z-index: 99;
    pointer-events: none;
    opacity: 0.6;
}

.harmony-control {
    margin-top: 10px;
    padding: 5px;
    border-top: 1px solid #eee;
}

.harmony-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: #666;
}

.harmony-checkbox {
    margin: 0;
}

.wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30-harmony {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-63eec4bc *//* Container für die Schieberegler */
.css-color-sliders {
    background: #000;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

/* Einzelne Slider-Gruppe */
.css-color-sliders .slider-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}

/* Label (R,G,B,A) */
.css-color-sliders .slider-group label {
    color: #9AA0A6;
    min-width: 20px;
    font-size: 11px;
    font-weight: 500;
}

/* Range Slider */
.css-color-sliders input[type="range"] {
    flex-grow: 1;
    height: 6px;
    border-radius: 3px;
    -webkit-appearance: none;
    position: relative;
}

/* Slider Thumb */
.css-color-sliders input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #E8EAED;
    border: 2px solid #313539;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

.css-color-sliders input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #E8EAED;
    border: 2px solid #313539;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

/* Numerische Eingabefelder */
.css-color-sliders input[type="number"] {
    width: 50px;
    padding: 4px 8px;
    background: #404040;
    border: none;
    border-radius: 4px;
    color: #E8EAED;
    font-size: 11px;
    text-align: center;
}

/* Spinner-Pfeile für Nummer-Inputs */
.css-color-sliders input[type="number"]::-webkit-inner-spin-button {
    opacity: 1;
    background: transparent;
    cursor: pointer;
}

/* Slider Track Farben */
.css-color-sliders .rSlider {
    background: linear-gradient(to right, transparent, #ff0000);
}

.css-color-sliders .gSlider {
    background: linear-gradient(to right, transparent, #00ff00);
}

.css-color-sliders .bSlider {
    background: linear-gradient(to right, transparent, #0000ff);
}

.css-color-sliders .aSlider {
    background: linear-gradient(to right, transparent, #E8EAED);
    border: 1px solid #404040;
}

/* Hover-Effekte */
.css-color-sliders input[type="range"]:hover::-webkit-slider-thumb {
    background: #fff;
}

.css-color-sliders input[type="number"]:hover {
    background: #4a4a4a;
}

/* Focus-Styles */
.css-color-sliders input[type="range"]:focus,
.css-color-sliders input[type="number"]:focus {
    outline: none;
}

.css-color-sliders input[type="number"]:focus {
    background: #4a4a4a;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-305c2617 */.css-icons svg {
    fill: white !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-32b886c4 */.css-hue-slider-container, .css-color-field-container {
    text-align: center;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4546069a */.color-picker-3d__container {
            width: 350px;
            height: 350px;
            border: 0px solid #ccc;
            cursor: crosshair;
        }
        .color-picker-3d__preview {
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 0px solid black;
        }
        .color-picker-3d__controls {
            margin: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .color-picker-3d__value {
            font-family: monospace;
        }
        .color-picker-3d__rgb-display {
            display: flex;
            gap: 10px;
        }
        
.color-picker-3d__controls {
    margin-top: -60px;
}

.color-picker-3d__preview {
    padding: 0px;
    height: 50px;
    width: 50px;
    border-radius: 50px;
    z-index: 9999;
}

.color-picker-3d__rgb-display {
    font-size: 12px !important;
    color: #D8DFE6aa;
    gap: 3px;
}

.color-picker-3d__rgb-display span {
    padding-right: 6px;
    color: #D8DFE6;
}

.saturation-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 16px;
    border-radius: 15px;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.saturation-slider:hover {
    opacity: 1;
}

/* Thumb Styles */
.saturation-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 0px solid #666;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    margin-top: -4px;
}

.saturation-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #666;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Track Styles */
.saturation-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    border-radius: 4px;
}

.saturation-slider::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    border-radius: 4px;
}

/* Container Styles */
.saturation-control {
    margin: 10px 0;
    padding: 5px;
}

.saturation-control label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    color: #666;
    font-size: 14px;
}

.saturation-value {
    background: #313539;
    color: #D8DFE6;
    border: none !important;
    padding: 3px 8px;
    font-size: 14px;
}

.picker-overlay {
    pointer-events: none;
}

.picker-overlay circle {
    transition: all 0.2s ease;
}

.single-highlight {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { r: 5; }
    50% { r: 7; }
    100% { r: 5; }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-20c91b30 */.wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30, #rgb-wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30 {
    width: 10px !important;
    height: 10px !important;
    background: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 50% !important;
    position: absolute !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30 {
    position: absolute;
    height: 1px;
    width: 1px;
    background: red;
}

.field-.elementor-4545 .elementor-element.elementor-element-20c91b30 {
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.hue-.elementor-4545 .elementor-element.elementor-element-20c91b30 {
    width: 4px;
    height: 20px;
    background: #fff;
    border: 2px solid #000;
    position: absolute;
    pointer-events: none;
    transform: translateX(-50%);
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.css-color-wheel-container,
.css-color-picker-container {
    position: relative;
}

.css-color-wheel-container {
    display: flex;
    gap: 16px;
    align-items: center;
}

.wheel-section {
    position: relative;
    width: 250px;
    height: 250px;
}

.brightness-slider {
    width: 16px;
    height: 250px;
    position: relative;
}

.brightness-slider .slider-track {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 0px solid #404040;
    overflow: hidden;
    position: relative;
}

.brightness-slider input[type="range"] {
    position: absolute;
    width: 250px;
    height: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    -webkit-appearance: none;
    background: transparent;
}

.brightness-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #404040;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.brightness-slider input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 0px solid #000;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.wheel-shape-controls {
    width: 25px;
}

.wheel-shape-controls img {
    opacity: .6;
    width: 20px;
    cursor: pointer;
}

.wheel-shape-controls img:hover {
    opacity: .4;
}

.wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30-complementary {
    z-index: 100;
    pointer-events: none;
}

.marker-connection-complementary {
    z-index: 99;
    pointer-events: none;
    opacity: 0.6;
}

.harmony-control {
    margin-top: 10px;
    padding: 5px;
    border-top: 1px solid #eee;
}

.harmony-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: #666;
}

.harmony-checkbox {
    margin: 0;
}

.wheel-.elementor-4545 .elementor-element.elementor-element-20c91b30-harmony {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-63eec4bc *//* Container für die Schieberegler */
.css-color-sliders {
    background: #000;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

/* Einzelne Slider-Gruppe */
.css-color-sliders .slider-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}

/* Label (R,G,B,A) */
.css-color-sliders .slider-group label {
    color: #9AA0A6;
    min-width: 20px;
    font-size: 11px;
    font-weight: 500;
}

/* Range Slider */
.css-color-sliders input[type="range"] {
    flex-grow: 1;
    height: 6px;
    border-radius: 3px;
    -webkit-appearance: none;
    position: relative;
}

/* Slider Thumb */
.css-color-sliders input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #E8EAED;
    border: 2px solid #313539;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

.css-color-sliders input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #E8EAED;
    border: 2px solid #313539;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

/* Numerische Eingabefelder */
.css-color-sliders input[type="number"] {
    width: 50px;
    padding: 4px 8px;
    background: #404040;
    border: none;
    border-radius: 4px;
    color: #E8EAED;
    font-size: 11px;
    text-align: center;
}

/* Spinner-Pfeile für Nummer-Inputs */
.css-color-sliders input[type="number"]::-webkit-inner-spin-button {
    opacity: 1;
    background: transparent;
    cursor: pointer;
}

/* Slider Track Farben */
.css-color-sliders .rSlider {
    background: linear-gradient(to right, transparent, #ff0000);
}

.css-color-sliders .gSlider {
    background: linear-gradient(to right, transparent, #00ff00);
}

.css-color-sliders .bSlider {
    background: linear-gradient(to right, transparent, #0000ff);
}

.css-color-sliders .aSlider {
    background: linear-gradient(to right, transparent, #E8EAED);
    border: 1px solid #404040;
}

/* Hover-Effekte */
.css-color-sliders input[type="range"]:hover::-webkit-slider-thumb {
    background: #fff;
}

.css-color-sliders input[type="number"]:hover {
    background: #4a4a4a;
}

/* Focus-Styles */
.css-color-sliders input[type="range"]:focus,
.css-color-sliders input[type="number"]:focus {
    outline: none;
}

.css-color-sliders input[type="number"]:focus {
    background: #4a4a4a;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-305c2617 */.css-icons svg {
    fill: white !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-32b886c4 */.css-hue-slider-container, .css-color-field-container {
    text-align: center;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4546069a */.color-picker-3d__container {
            width: 350px;
            height: 350px;
            border: 0px solid #ccc;
            cursor: crosshair;
        }
        .color-picker-3d__preview {
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 0px solid black;
        }
        .color-picker-3d__controls {
            margin: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .color-picker-3d__value {
            font-family: monospace;
        }
        .color-picker-3d__rgb-display {
            display: flex;
            gap: 10px;
        }
        
.color-picker-3d__controls {
    margin-top: -60px;
}

.color-picker-3d__preview {
    padding: 0px;
    height: 50px;
    width: 50px;
    border-radius: 50px;
    z-index: 9999;
}

.color-picker-3d__rgb-display {
    font-size: 12px !important;
    color: #D8DFE6aa;
    gap: 3px;
}

.color-picker-3d__rgb-display span {
    padding-right: 6px;
    color: #D8DFE6;
}

.saturation-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 16px;
    border-radius: 15px;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.saturation-slider:hover {
    opacity: 1;
}

/* Thumb Styles */
.saturation-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 0px solid #666;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    margin-top: -4px;
}

.saturation-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #666;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Track Styles */
.saturation-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    border-radius: 4px;
}

.saturation-slider::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    border-radius: 4px;
}

/* Container Styles */
.saturation-control {
    margin: 10px 0;
    padding: 5px;
}

.saturation-control label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    color: #666;
    font-size: 14px;
}

.saturation-value {
    background: #313539;
    color: #D8DFE6;
    border: none !important;
    padding: 3px 8px;
    font-size: 14px;
}

.picker-overlay {
    pointer-events: none;
}

.picker-overlay circle {
    transition: all 0.2s ease;
}

.single-highlight {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { r: 5; }
    50% { r: 7; }
    100% { r: 5; }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-316ac380 *//* Input Container */
.css-main-color-wrapper {
    display: flex;
    align-items: stretch;
    margin-bottom: 12px;
}

/* Farbvorschau */
.css-main-color {
    width: 40px;
    border-radius: 0px 0 0 0px;
    border: 0px solid #fff;
    border-right: none;
    background-color: #000000;
}

/* Input Container */
.css-main-color-input {
    flex-grow: 1;
}

/* Das eigentliche Input-Feld */
.colorInput {
    width: 100%;
    height: 100%;
    padding: 8px 16px !important;
    background: #222;
    border: 0px solid #fff !important;
    border-top: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;
    border-radius: 0px 0px 0px 0px !important;
    color: #fff !important;
    font-size: 23px;
    letter-spacing: 1px;
}

.colorInput:focus {
    outline: none;
    border-color: #5f6368;
    background: #333;
    color: #fff;
}

.css-main-color-input {
    position: relative;
    display: flex;
    align-items: center;
}

.shuffle-button {
    width: 32px;
    height: 32px;
    padding: 0;
    margin-left: 8px;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.6;
    color: #fff;
    transition: opacity 0.3s;
}

.shuffle-button svg {
    position: absolute;
}

.shuffle-button:hover {
    opacity: 1 !important;
    color: black;
}

.shuffle-button:hover svg {
    fill: #fff !important;
}

.shuffle-icon{
    position: absolute !important;
    width: 100%;
    height: 100%;
    fill: #fff;
}

.shuffle-button:hover .shuffle-icon {
    fill: #fff;
}

.color-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.shuffle-button {
    position: absolute;
    right: 8px;
    background: none !important;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
    color: #000;
}

.shuffle-button svg {
    fill: #fff;
}

.shuffle-button:hover {
    opacity: 1;
    transform: scale(1.1);
}

.shuffle-button:focus {
    border: none !important;
    outline: 0 !important;
}

.shuffle-button svg {
    width: 16px;
    height: 16px;
}

/* Anpassung des bestehenden Input-Felds */
.colorInput {
    padding-right: 32px !important; /* Platz für das Icon */
}

.color-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.shuffle-button {
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 8px;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.shuffle-button:hover {
    opacity: 1;
}

.shuffle-icon {
    width: 100%;
    height: 100%;
    fill: currentColor;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-1aaef2d4 */.color-suggestions {
    margin: 20px 0;
}

.suggestions-group {
    margin-bottom: 20px;
}

.suggestions-title {
    font-size: 16px !important;
    margin-bottom: 10px;
}

.suggestions-swatches {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.suggestion-row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.suggestion-row:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.suggestion-row .color-swatch {
    /* Behält die Basis-Styles von color-swatch, aber mit fester Größe */
    min-width: 60px;
    flex-shrink: 0;
}

.suggestion-name {
    font-size: 14px;
    color: #D8DFE6 !important;
}

.suggestions-error {
    color: #ff4444;
    padding: 10px;
    text-align: center;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-701b111f */.css-color-picker-meta-2 .text-content {
    height: 85px;
}

.css-color-picker-meta-2 .color-psychology .text-content {
    height: 60px;
}

.color-analysis {
    margin-top: 0px;
    font-size: 13px;
}

.color-format {
    line-height: 1.2em;
}

.analysis-item {
    margin: 0px 0;
    display: flex;
    justify-content: space-between;}

.analysis-category {
    color: #9AA0A6;
}

.analysis-value {
    color: #E8EAED;
    font-weight: 500;
}
        
.color-analysis-row {
    margin: 0px 0;
    display: flex;
    gap: 10px;
    font-size: 11px;
    line-height: 1.2em;
}

.analysis-label {
    min-width: 85px;
    color: #9AA0A6;
}

.analysis-value {
    color: #E8EAED;
    font-weight: 500;
    cursor: pointer;
}

.slider-container {
            padding: 20px 0;
            border-bottom: 1px solid #404040;
        }
        .analysis-row {
            display: flex;
            align-items: center;
            gap: 5px;
            margin: 12px 0;
            font-size: 12px;
            line-height: 1.2em;
        }
        .label-left, .label-right {
            color: #9AA0A6;
            min-width: 90px;
            font-size: 11px;
        }
        .label-left {
            text-align: right;
        }
        .slider-track {
            flex-grow: 1;
            height: 2px;
            background: #404040;
            position: relative;
        }
        .slider-marker {
            position: absolute;
            width: 8px;
            height: 8px;
            background: var(--current-color, #fff);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: left 0.3s ease;
            box-shadow: 0 0 0 2px #313539;
        }
        .color-psychology, .cultural-meaning {
            margin-top: 20px;
            color: #E8EAED;
            font-size: 13px;
            line-height: 1.6;
        }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-11185c20 */.color-picker-wrapper {
    height: 97vh;
    overflow-y: scroll;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-1ec09ab0 */.shades-generator {
    background: #000;
    padding-top: 0px;
    border-radius: 8px;
    margin: 0px;
}

.shades-controls {
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: sticky;
    top: 0px;
    background: #000;
    padding: 12px 24px;
    z-index: 99;
    border-radius: 0px;
    border: 1px solid white;
}

.control-group {
    text-align: center;
    width: 50%;
}

.control-group label {
    width: 30%;
    font-size: 12px;
    margin-top: -6px;
    opacity: .8
}

.control-group span {
    padding: 3px;
    font-size: 12px;
    border: 0px solid white;
    vertical-align: ;
    margin-bottom: -3px;
}

#shadesCountValue {
    
}

.shades-controls label {
    color: #eee;
}

.shades-controls input[type="range"] {
    flex: 1;
    width: 50%;
    max-width 90% !important;
    border: none;
}

.shades-controls input[type="range"]::-webkit-slider-runnable-track {
    border: none;
    background: #fff;
    border-radius: 0px;
    height: 4px;
    margin-bottom: 0px;
}

.shades-controls input[type="range"] {
    flex-grow: 1;
    height: 12px;
    border-radius: 0px;
    -webkit-appearance: none;
    position: relative;
}


.shades-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 20px;
    border-radius: 0px;
    background: #fff;
    border: 1px solid #313539;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
    margin-top: -8px;
}

.shades-controls input[type="range"]::-moz-range-thumb {
    width: 6px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #313539;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

.shades-generator .shades-container {
    display: flex;
    flex-wrap: wrap !important;
    border: 0px solid white;
    gap: 0%;
}

.shades-generator .shades-column {
    width: 25%;
    background: #000;
    padding: 0px;
    border-radius: 0px;
    border: 1px solid white;
}

.shades-column h4 {
    margin: 0 0 15px 0 !important;
    color: #fff;
    font-size: 12px;
    text-wrap: nowrap;
    border-bottom: 1px solid white;
    padding: 12px;
    
}

.shades-list {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 12px;
}

.shades-generator .color-swatch {
    width: 100%;
    height: 40px;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: monospace;
    transition: transform 0.2s;
    position: relative;
    cursor: pointer;
}

.color-swatch:hover {
    transform: scale(1.02);
}

.color-swatch::after {
    content: attr(data-hex);
    position: absolute;
    right: 8px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
}

/* Hervorhebung für die Originalfarbe */
.color-swatch.original {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--current-color);
    z-index: 1;
}

.color-swatch.original:hover {
    transform: scale(1.07);
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-1ec09ab0 */.shades-generator {
    background: #000;
    padding-top: 0px;
    border-radius: 8px;
    margin: 0px;
}

.shades-controls {
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: sticky;
    top: 0px;
    background: #000;
    padding: 12px 24px;
    z-index: 99;
    border-radius: 0px;
    border: 1px solid white;
}

.control-group {
    text-align: center;
    width: 50%;
}

.control-group label {
    width: 30%;
    font-size: 12px;
    margin-top: -6px;
    opacity: .8
}

.control-group span {
    padding: 3px;
    font-size: 12px;
    border: 0px solid white;
    vertical-align: ;
    margin-bottom: -3px;
}

#shadesCountValue {
    
}

.shades-controls label {
    color: #eee;
}

.shades-controls input[type="range"] {
    flex: 1;
    width: 50%;
    max-width 90% !important;
    border: none;
}

.shades-controls input[type="range"]::-webkit-slider-runnable-track {
    border: none;
    background: #fff;
    border-radius: 0px;
    height: 4px;
    margin-bottom: 0px;
}

.shades-controls input[type="range"] {
    flex-grow: 1;
    height: 12px;
    border-radius: 0px;
    -webkit-appearance: none;
    position: relative;
}


.shades-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 20px;
    border-radius: 0px;
    background: #fff;
    border: 1px solid #313539;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
    margin-top: -8px;
}

.shades-controls input[type="range"]::-moz-range-thumb {
    width: 6px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #313539;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

.shades-generator .shades-container {
    display: flex;
    flex-wrap: wrap !important;
    border: 0px solid white;
    gap: 0%;
}

.shades-generator .shades-column {
    width: 25%;
    background: #000;
    padding: 0px;
    border-radius: 0px;
    border: 1px solid white;
}

.shades-column h4 {
    margin: 0 0 15px 0 !important;
    color: #fff;
    font-size: 12px;
    text-wrap: nowrap;
    border-bottom: 1px solid white;
    padding: 12px;
    
}

.shades-list {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 12px;
}

.shades-generator .color-swatch {
    width: 100%;
    height: 40px;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: monospace;
    transition: transform 0.2s;
    position: relative;
    cursor: pointer;
}

.color-swatch:hover {
    transform: scale(1.02);
}

.color-swatch::after {
    content: attr(data-hex);
    position: absolute;
    right: 8px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
}

/* Hervorhebung für die Originalfarbe */
.color-swatch.original {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--current-color);
    z-index: 1;
}

.color-swatch.original:hover {
    transform: scale(1.07);
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-1ec09ab0 */.shades-generator {
    background: #000;
    padding-top: 0px;
    border-radius: 8px;
    margin: 0px;
}

.shades-controls {
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: sticky;
    top: 0px;
    background: #000;
    padding: 12px 24px;
    z-index: 99;
    border-radius: 0px;
    border: 1px solid white;
}

.control-group {
    text-align: center;
    width: 50%;
}

.control-group label {
    width: 30%;
    font-size: 12px;
    margin-top: -6px;
    opacity: .8
}

.control-group span {
    padding: 3px;
    font-size: 12px;
    border: 0px solid white;
    vertical-align: ;
    margin-bottom: -3px;
}

#shadesCountValue {
    
}

.shades-controls label {
    color: #eee;
}

.shades-controls input[type="range"] {
    flex: 1;
    width: 50%;
    max-width 90% !important;
    border: none;
}

.shades-controls input[type="range"]::-webkit-slider-runnable-track {
    border: none;
    background: #fff;
    border-radius: 0px;
    height: 4px;
    margin-bottom: 0px;
}

.shades-controls input[type="range"] {
    flex-grow: 1;
    height: 12px;
    border-radius: 0px;
    -webkit-appearance: none;
    position: relative;
}


.shades-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 20px;
    border-radius: 0px;
    background: #fff;
    border: 1px solid #313539;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
    margin-top: -8px;
}

.shades-controls input[type="range"]::-moz-range-thumb {
    width: 6px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #313539;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

.shades-generator .shades-container {
    display: flex;
    flex-wrap: wrap !important;
    border: 0px solid white;
    gap: 0%;
}

.shades-generator .shades-column {
    width: 25%;
    background: #000;
    padding: 0px;
    border-radius: 0px;
    border: 1px solid white;
}

.shades-column h4 {
    margin: 0 0 15px 0 !important;
    color: #fff;
    font-size: 12px;
    text-wrap: nowrap;
    border-bottom: 1px solid white;
    padding: 12px;
    
}

.shades-list {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 12px;
}

.shades-generator .color-swatch {
    width: 100%;
    height: 40px;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: monospace;
    transition: transform 0.2s;
    position: relative;
    cursor: pointer;
}

.color-swatch:hover {
    transform: scale(1.02);
}

.color-swatch::after {
    content: attr(data-hex);
    position: absolute;
    right: 8px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
}

/* Hervorhebung für die Originalfarbe */
.color-swatch.original {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--current-color);
    z-index: 1;
}

.color-swatch.original:hover {
    transform: scale(1.07);
}/* End custom CSS */
/* Start custom CSS */:root {
    --current-color: #000000; /* Beispielwert, wird dynamisch gesetzt */

    --palette-complementary-color-1: #ff0000; /* Beispielwert, wird dynamisch gesetzt */
    --palette-complementary-color-2: #00ff00; /* Beispielwert, wird dynamisch gesetzt */
    --palette-complementary-count: 2; /* Beispielwert, wird dynamisch gesetzt */

    --palette-complementaryOptimized-color-1: #ff0000; /* Beispielwert, wird dynamisch gesetzt */
    --palette-complementaryOptimized-color-2: #00ff00; /* Beispielwert, wird dynamisch gesetzt */
    --palette-complementaryOptimized-count: 2; /* Beispielwert, wird dynamisch gesetzt */

    --palette-analogous-color-1: #ff0000; /* Beispielwert, wird dynamisch gesetzt */
    --palette-analogous-color-2: #00ff00; /* Beispielwert, wird dynamisch gesetzt */
    --palette-analogous-color-3: #0000ff; /* Beispielwert, wird dynamisch gesetzt */
    --palette-analogous-count: 3; /* Beispielwert, wird dynamisch gesetzt */

    --palette-triadic-color-1: #ff0000; /* Beispielwert, wird dynamisch gesetzt */
    --palette-triadic-color-2: #00ff00; /* Beispielwert, wird dynamisch gesetzt */
    --palette-triadic-color-3: #0000ff; /* Beispielwert, wird dynamisch gesetzt */
    --palette-triadic-count: 3; /* Beispielwert, wird dynamisch gesetzt */

    --palette-splitComplementary-color-1: #ff0000; /* Beispielwert, wird dynamisch gesetzt */
    --palette-splitComplementary-color-2: #00ff00; /* Beispielwert, wird dynamisch gesetzt */
    --palette-splitComplementary-color-3: #0000ff; /* Beispielwert, wird dynamisch gesetzt */
    --palette-splitComplementary-count: 3; /* Beispielwert, wird dynamisch gesetzt */
}



.export-buttons button {
    background: transparent !important;
    color: #D8DFE6 !important;
}

.export-buttons button:hover {
    opacity: .8;
}

.palette-description {
    font-size: 13px;
    color: #D8DFE6aa;
    padding: 0px !important;
    margin-bottom: 12px !important;
}

.soul-color-sticky {
    height: 95vh;
    overflow-y: scroll;
}

.soul-overflow-none {
    height: 90vh;
    overflow: hidden;
}/* End custom CSS */