/* ---------------------------------------------------------------
 * "Liquid Glass" Design (angelehnt an Apples iOS/macOS 26 Optik)
 * – durchscheinendes, geschliffenes Glas-Material
 * – weiche, große Rundungen
 * – dezente Kanten-Highlights (reduziert, kein breiter weißer Rahmen)
 * – sanfte Feder-Animationen bei Interaktion
 * ------------------------------------------------------------- */

.umfragen-box {
    --umfragen-accent: #2563eb;
    --umfragen-accent-2: #6dc4be;

    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    margin: 28px 0;
    padding: 30px 32px;
    border-radius: 28px;
    color: #1c1c1e;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.612) 0%, rgba(255, 255, 255, 0.425) 100%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: none;
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.22),
        0 20px 40px -12px rgba(0, 0, 0, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Simulierte Glas-Reflexion: heller Schimmer oben links (stark reduziert) */
.umfragen-box::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(120% 90% at 12% -10%, rgba(255, 255, 255, 0.165) 0%, rgba(255, 255, 255, 0) 55%);
    mix-blend-mode: overlay;
}

/* Glas-Kantenlicht – mehrere überlagerte Inset-Schatten simulieren
 * die Lichtbrechung an einer echten Glasfläche:
 * helles Highlight oben, leichtere Highlights an den Seiten,
 * hauchzarte untere Kante + ein subtiler Gesamtring */
.umfragen-box::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        0  1px 0 0    rgba(255, 255, 255, 0.65) inset,   /* obere Kante – helles Licht */
        1px 0  0 0    rgba(255, 255, 255, 0.28) inset,   /* linke Kante */
       -1px 0  0 0    rgba(255, 255, 255, 0.28) inset,   /* rechte Kante */
        0 -1px 0 0    rgba(255, 255, 255, 0.08) inset,   /* untere Kante – Schattenzone */
        0  0   0 1px  rgba(255, 255, 255, 0.18) inset;   /* subtiler Gesamtring */
}

.umfragen-label {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-size: 0.76em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #000;
    background: linear-gradient(180deg, rgba(120, 209, 202, 0.81) 0%, rgba(93, 180, 173, 0.81) 100%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 5px 16px;
    border-radius: 999px;
    margin: 0 0 14px 0;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.425) inset,
        0 4px 10px -2px rgba(93, 180, 173, 0.38);
}

.umfragen-frage {
    position: relative;
    z-index: 1;
    font-size: 1.28em;
    font-weight: 700;
    color: #0f0f10;
    margin: 0 0 16px 0;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
 * Badges (Enddatum)
 * ------------------------------------------------------------- */

.umfragen-enddatum {
    position: relative;
    z-index: 1;
    margin: 0 0 14px 0;
}

.umfragen-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.01em;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) inset;
}

.umfragen-badge--active {
    background: rgba(52, 199, 89, 0.136);
    color: #1b7a34;
    border: 1px solid rgba(52, 199, 89, 0.3);
}

.umfragen-badge--ended {
    background: rgba(255, 59, 48, 0.119);
    color: #a4231b;
    border: 1px solid rgba(255, 59, 48, 0.272);
}

/* ---------------------------------------------------------------
 * Info-Zeile (Anzahl Antworten)
 * ------------------------------------------------------------- */

.umfragen-info {
    position: relative;
    z-index: 1;
    font-size: 0.88em;
    color: #000;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.umfragen-info strong {
    color: #000;
}

/* ---------------------------------------------------------------
 * Formular / Optionen
 * ------------------------------------------------------------- */

.umfragen-optionen {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

.umfragen-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.97em;
    color: #1c1c1e;
    user-select: none;

    background: rgba(255, 255, 255, 0.4675);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.51) inset,
        0 1px 3px rgba(0, 0, 0, 0.04);

    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
}

.umfragen-option:hover {
    background: rgba(255, 255, 255, 0.6375);
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 6px 14px -4px rgba(0, 0, 0, 0.1);
}

.umfragen-option:active {
    transform: scale(0.985);
}

.umfragen-option:has(input:checked) {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.16) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow:
        0 0 0 1px rgba(37, 99, 235, 0.35) inset,
        0 1px 0 rgba(255, 255, 255, 0.425) inset;
}

.umfragen-option input {
    width: 19px;
    height: 19px;
    accent-color: var(--umfragen-accent);
    flex-shrink: 0;
    cursor: pointer;
}

/* ---------------------------------------------------------------
 * Abstimmen-Button
 * ------------------------------------------------------------- */

/* Alle Button-States über Klasse gesteuert – kein :disabled-Pseudo-Selektor,
   damit Theme-Overrides keine Chance haben. Hohe Spezifität via .umfragen-box. */

.umfragen-box button.umfragen-btn {
    position: relative;
    z-index: 1;
    display: inline-block;
    background: linear-gradient(180deg, #4c8dff 0%, var(--umfragen-accent) 100%) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 999px;
    padding: 12px 30px;
    font-size: 0.97em;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.01em;
    opacity: 1;
    outline: none !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3825) inset,
        0 8px 20px -6px rgba(37, 99, 235, 0.55) !important;
    transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                opacity 0.2s ease,
                background 0.2s ease;
}

.umfragen-box button.umfragen-btn:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.425) inset,
        0 10px 24px -6px rgba(37, 99, 235, 0.65) !important;
    transform: translateY(-1px);
}

.umfragen-box button.umfragen-btn:active {
    transform: scale(0.96);
}

/* Inaktiver Zustand – nur über Klasse, kein :disabled */
.umfragen-box button.umfragen-btn.umfragen-btn--inactive {
    background: rgba(0, 0, 0, 0.28) !important;
    color: rgba(0, 0, 0, 0.7) !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2975) inset !important;
    transform: none !important;
    pointer-events: none;
}

/* ---------------------------------------------------------------
 * Meldungen
 * ------------------------------------------------------------- */

.umfragen-msg {
    position: relative;
    z-index: 1;
    margin-top: 12px;
    color: #d70015;
    font-size: 0.9em;
    font-weight: 500;
}

.umfragen-danke {
    position: relative;
    z-index: 1;
    font-size: 1.05em;
    font-weight: 700;
    color: #0f0f10;
    margin: 0 0 20px 0;
    padding: 0 0 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

/* ---------------------------------------------------------------
 * Ergebnisbereich
 * ------------------------------------------------------------- */

.umfragen-ergebnisse {
    position: relative;
    z-index: 1;
    margin-top: 4px;
}

.umfragen-ergebnisse-title {
    font-size: 0.9em;
    font-weight: 700;
    color: #000;
    margin: 0 0 18px 0;
    letter-spacing: 0.02em;
}

.umfragen-ergebnisse-inner {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.umfragen-chart-wrap {
    flex: 0 0 220px;
    max-width: 220px;
    width: 100%;
    padding: 12px;
    border-radius: 20px;
    background: transparent;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
}

@media (max-width: 500px) {
    .umfragen-box {
        padding: 22px 18px;
        border-radius: 22px;
    }
    .umfragen-chart-wrap {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .umfragen-ergebnisse-inner {
        flex-direction: column;
    }
}

/* ---------------------------------------------------------------
 * Legende
 * ------------------------------------------------------------- */

.umfragen-legende-wrap {
    flex: 1;
    min-width: 160px;
}

.umfragen-legende {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.umfragen-legende li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92em;
    color: #1c1c1e;
    padding: 9px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.3825);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4675);
}

.umfragen-legende-color {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.51);
}

.umfragen-legende-text {
    flex: 1;
    color: #1c1c1e;
}

.umfragen-legende-wert {
    font-weight: 700;
    color: #0f0f10;
    white-space: nowrap;
}

.umfragen-legende-wert small {
    font-weight: 400;
    color: #000;
}

.umfragen-gesamt {
    position: relative;
    z-index: 1;
    font-size: 0.85em;
    color: #000;
    margin: 0;
}

/* ---------------------------------------------------------------
 * Fehlermeldung
 * ------------------------------------------------------------- */

.umfragen-error {
    color: #d70015;
    font-style: italic;
}

/* ---------------------------------------------------------------
 * Fallback für Browser ohne backdrop-filter-Unterstützung
 * ------------------------------------------------------------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .umfragen-box {
        background: #eef1f5;
    }
    .umfragen-option,
    .umfragen-legende li {
        background: #ffffff;
    }
}