/* Button-Style: Icon statt Text und festes 4:3 Seitenverhältnis */
.color-picker-button {
    text-indent: -9999px; /* Text verstecken */
    background-image: url('../assets/icons/ruler.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    aspect-ratio: 4 / 3;
    background-color: inherit; /* Hintergrundfarbe des umgebenden Elements übernehmen */
}

/* Demo Menü: 50% Breite, ohne Rahmen, mit Akzentfarbe als Hintergrund */
.demo-menu {
    width: 50%;
    border: none;
    background-color: var(--accent-color); /* Akzentfarbe, z.B. aus Theme-Variablen */
}

/* Farbfelder: Label oberhalb, fett, Rahmen entfernen */
.color-field {
    border: none; /* Rahmen entfernen */
}

.color-field label {
    display: block;
    font-weight: bold;
}