pointchoice {
    display: inline-block;
}

/* Wrapper für alles */
.pointchoice-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

/* Wrapper nur für Slider + Ticks + Tooltip */
.pointchoice-slider-wrapper {
    position: relative;
    width: 100px; /* wird per Attribut überschrieben */
    padding-bottom: 14px; /* etwas mehr Platz für größere Text-Ticks */
}

/* ===========================
   FARB-FÜLLUNG
   =========================== */

.pointchoice-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 0;
}

/* Basis: kompletter Farbverlauf (0..max) */
.pointchoice-fill-base {
    left: 6px; /* passt zu Ticks und Thumb */
    width: 0;  /* wird per JS auf innerWidth gesetzt */
    background: linear-gradient(
        to right,
        #d60000,   /* rot */
        #ff7a00,   /* orange */
        #ffd000,   /* gelb */
        #b6ff5a,   /* hellgrün */
        #00a200    /* dunkelgrün */
    );
}

/* invertierter Verlauf für die Basis (bei inverse=1) */
.pointchoice-fill-base.pointchoice-fill-inverse {
    background: linear-gradient(
        to right,
        #00a200,   /* dunkelgrün */
        #b6ff5a,   /* hellgrün */
        #ffd000,   /* gelb */
        #ff7a00,   /* orange */
        #d60000    /* rot */
    );
}

/* Cover: neutrale Abdeckung von Sliderposition bis Ende */
.pointchoice-fill-cover {
    background: #ddd;           /* neutrale Farbe, ggf. anpassen */
    width: 0;                   /* wird per JS gesetzt */
    left: 6px;                  /* Start, wird per JS verschoben */
    /*transition: left 0.2s ease-out, width 0.2s ease-out;*/
}

/* Wenn colored aktiv ist: Slidertrack selbst unsichtbar */
.pointchoice-colored::-webkit-slider-runnable-track {
    background: transparent;
}
.pointchoice-colored::-moz-range-track {
    background: transparent;
}


/* ===========================
   SLIDER
   =========================== */
.pointchoice-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background-color: #ddd;
    outline: none;
    position: relative;
    z-index: 1;
}

/* Thumb (Schiebeknopf) */
.pointchoice-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
    margin-top: -4px; /* zentriert auf 6px-Track */
}

.pointchoice-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
}

/* Track */
.pointchoice-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
}
.pointchoice-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
}

/* ===========================
   TICKS
   =========================== */
.pointchoice-ticks {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 0;
    height: 10px; /* genug Höhe für Text-Ticks */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    z-index: 0;
}

/* Standard kleiner Punkt */
.pointchoice-tick {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #555;
}

/* Variante: Text-Ticks (bei textticks=1) */
.pointchoice-tick-text {
    width: fit-content;
    height: fit-content;
    border-radius: 5px;
    padding: 2px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
}

/* ===========================
   contenteditable-Zahlenfeld
   =========================== */
.pointchoice-input {
    min-width: 2ch;
    padding: 2px 6px;
    border: 1px solid #777;
    border-radius: 4px;
    text-align: center;
    font-family: inherit;
    font-size: inherit;    /* <- deine Einstellung */
    cursor: text;
    background-color: white; /* <- deine Einstellung */
}

.pointchoice-input:focus {
    outline: none;
    border-color: #666;
}

/* ===========================
   TOOLTIP
   =========================== */
.pointchoice-tooltip {
    position: absolute;
    bottom: 120%;          /* über dem Slider */
    left: 0;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: #333;
    color: #fff;
    font-size: 1.25rem;      /* <- deine Einstellung */
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 10;
    margin-left: 6px;        /* <- deine Einstellung */
}

.pointchoice-tooltip.visible {
    opacity: 1;
}