/* =========================================================
   DATEI: /assets/css/pages/content-umfragen.css
   UMFRAGEN
========================================================= */



/* =========================================================
   1) WIDGET CONTAINER
========================================================= */

            .umfrage-widget{
                max-width: 680px;
                margin: 0 auto 2rem;
                box-sizing: border-box;
            }

            .umfrage-box{
                padding: calc(var(--menu-gap) * 1.05);
                background: var(--color-highlight-section-bg, rgba(0,0,20,0.35));
                border: 1px solid var(--color-highlight-section-border, rgba(255,255,255,0.18));
                border-radius: var(--radius-sm);
                box-shadow: 0 10px 28px rgba(0,0,0,0.45);
                transition: background .2s ease, border-color .2s ease;
            }

            .umfrage-box:hover{
                background: var(--color-highlight-section-bg-hover, rgba(0,0,30,0.45));
                border-color: var(--color-highlight-section-border-hover, rgba(255,255,255,0.26));
            }



/* =========================================================
   2) HEADER
========================================================= */

            .umfrage-header{
                display: flex;
                align-items: flex-start;
                gap: 14px;
                margin-bottom: calc(var(--menu-gap) * 1.1);
            }

            .umfrage-icon{
                font-size: 1.5rem;
                flex-shrink: 0;
                line-height: 1;
                margin-top: 3px;
            }

            .umfrage-title{
                margin: 0 0 4px;
                font-family: var(--font-style-headline);
                font-size: calc(var(--font-size-headline-section) * 0.88);
                color: #ffffff;
                line-height: 1.3;
            }

            .umfrage-desc{
                margin: 0 0 6px;
                font-family: var(--font-style-text);
                font-size: var(--font-size-content);
                line-height: var(--line-height-text);
                color: rgba(255,255,255,0.68);
            }

            .umfrage-meta{
                display: flex;
                align-items: center;
                gap: 14px;
                flex-wrap: wrap;
                margin-top: 6px;
            }

            .umfrage-meta-zeitraum,
            .umfrage-meta-stimmen{
                display: inline-flex;
                align-items: center;
                gap: 5px;
                font-family: var(--font-style-ui);
                font-size: calc(var(--font-size-content) * 0.78);
                font-weight: 700;
                color: rgba(255,255,255,0.45);
                letter-spacing: 0.02em;
            }

            .umfrage-meta-zeitraum + .umfrage-meta-stimmen::before{
                content: "·";
                font-size: 1em;
                margin-right: 14px;
                opacity: 0.4;
            }

            .umfrage-meta-stimmen::before{
                content: "";
            }

            .umfrage-meta-typ{
                margin: 4px 0 0;
                font-family: var(--font-style-ui);
                font-size: calc(var(--font-size-content) * 0.78);
                font-weight: 700;
                color: rgba(255,255,255,.45);
                letter-spacing: 0.02em;
            }



/* =========================================================
   3) OPTIONEN
========================================================= */

            .umfrage-options{
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-bottom: calc(var(--menu-gap) * 1.1);
            }

            .umfrage-option{
                display: flex;
                align-items: center;
                gap: 14px;
                padding: 13px 18px;

                background: var(--color-box-bg);
                border: 1px solid var(--color-box-border);
                border-radius: var(--radius-sm);
                box-shadow: var(--shadow-soft);

                cursor: pointer;
                user-select: none;

                transition:
                    background 0.2s ease,
                    border-color 0.2s ease,
                    transform 0.15s ease,
                    box-shadow 0.15s ease;
            }

            .umfrage-option:hover{
                background: var(--color-box-bg-strong);
                border-color: var(--color-box-border-strong);
                transform: translateY(-1px);
                box-shadow: var(--shadow-medium);
            }

            .umfrage-option:active{
                transform: translateY(0);
            }

            .umfrage-option input[type="radio"],
            .umfrage-option input[type="checkbox"]{
                width: 18px;
                height: 18px;
                accent-color: var(--color-link, #0b2fd6);
                cursor: pointer;
                flex-shrink: 0;
            }

            .umfrage-option-label{
                font-family: var(--font-style-text);
                font-size: var(--font-size-content);
                font-weight: 700;
                color: rgba(255,255,255,0.92);
                line-height: 1.4;
            }

            .umfrage-option:has(input:checked){
                background: var(--color-highlight-box-bg, rgba(11,47,214,0.12));
                border-color: var(--color-highlight-box-border, rgba(11,47,214,0.4));
                box-shadow: var(--shadow-medium);
            }



/* =========================================================
   4) FORM FOOTER
========================================================= */

            .umfrage-form-footer{
                display: flex;
                align-items: center;
                gap: 16px;
                flex-wrap: wrap;
            }

            .umfrage-btn{
                height: 42px;
                padding: 0 32px;
                display: inline-flex;
                align-items: center;
                justify-content: center;

                border: 0;
                border-radius: var(--radius-sm);
                background: linear-gradient(90deg, #0b2fd6 0%, #2e56ff 100%);
                color: #ffffff;

                font-family: var(--font-style-ui);
                font-size: var(--font-size-content);
                font-weight: 800;
                letter-spacing: 0.02em;
                white-space: nowrap;

                cursor: pointer;
                box-shadow: 0 8px 20px rgba(11,47,214,0.28);
                transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
            }

            .umfrage-btn:hover{
                transform: translateY(-1px);
                filter: brightness(1.08);
                box-shadow: 0 12px 28px rgba(11,47,214,0.38);
            }

            .umfrage-btn:active{ transform: translateY(0); }
            .umfrage-btn:disabled{ opacity: .5; cursor: default; transform: none; }

            .umfrage-error{
                margin: 0;
                font-family: var(--font-style-text);
                font-size: calc(var(--font-size-content) * 0.88);
                font-weight: 700;
                color: #ff6b6b;
                min-height: 1.2em;
            }



/* =========================================================
   5) ERGEBNISSE
========================================================= */

            .umfrage-results{
                display: flex;
                flex-direction: column;
                gap: 12px;
                margin-bottom: calc(var(--menu-gap) * 0.9);

                padding: calc(var(--menu-gap) * 0.95);
                background: rgba(0,0,0,0.12);
                border: 1px solid rgba(255,255,255,0.14);
                border-radius: var(--radius-sm);
            }

            .umfrage-result-row{
                display: flex;
                flex-direction: column;
                gap: 6px;
            }

            .umfrage-result-top{
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                gap: 8px;
            }

            .umfrage-result-label{
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
                font-family: var(--font-style-text);
                font-size: var(--font-size-content);
                font-weight: 700;
                color: rgba(255,255,255,0.88);
            }

            .umfrage-mine{
                display: inline-block;
                padding: 1px 8px;
                background: rgba(11,47,214,0.18);
                border: 1px solid rgba(11,47,214,0.32);
                border-radius: 999px;
                font-family: var(--font-style-ui);
                font-size: calc(var(--font-size-content) * 0.72);
                font-weight: 800;
                color: rgba(180,200,255,0.9);
                white-space: nowrap;
            }

            .umfrage-result-pct{
                font-family: var(--font-style-ui);
                font-size: calc(var(--font-size-content) * 0.88);
                font-weight: 800;
                color: rgba(255,255,255,0.55);
                flex-shrink: 0;
            }

            .umfrage-result-bar-wrap{
                background: rgba(255,255,255,0.08);
                border-radius: 999px;
                height: 7px;
                overflow: hidden;
            }

            .umfrage-result-bar{
                height: 100%;
                border-radius: 999px;
                background: rgba(255,255,255,0.22);
                transition: width 0.7s cubic-bezier(.4,0,.2,1);
            }

            .umfrage-result-bar.is-winner{
                background: linear-gradient(90deg, #ffd38a, #ffb347);
                box-shadow: 0 0 10px rgba(255,193,77,0.3);
            }

            .umfrage-total{
                margin: 4px 0 0;
                font-family: var(--font-style-text);
                font-size: calc(var(--font-size-content) * 0.78);
                font-weight: 700;
                color: rgba(255,255,255,0.38);
                text-align: right;
            }

            .umfrage-voted-note{
                margin: 0;
                font-family: var(--font-style-text);
                font-size: calc(var(--font-size-content) * 0.88);
                font-weight: 700;
                color: rgba(255,255,255,0.5);
            }

            .umfrage-box .umfrage-results-link{
                display: inline-block;
                margin-top: calc(var(--menu-gap) * 0.6);
                background: none;
                border: none;
                padding: 0;
                font-family: var(--font-style-text);
                font-size: calc(var(--font-size-content) * 0.82);
                font-weight: 700;
                color: rgba(255,255,255,.4);
                cursor: pointer;
                text-decoration: underline;
                text-underline-offset: 3px;
                transition: color .2s ease;
            }

            .umfrage-box .umfrage-results-link:hover{
                color: rgba(255,255,255,.7);
            }



/* =========================================================
   6) RESPONSIVE
========================================================= */

@media (max-width: 700px){

            .umfrage-option{
                padding: 11px 14px;
                gap: 12px;
            }

            .umfrage-btn{
                width: 100%;
            }

            .umfrage-form-footer{
                flex-direction: column;
                align-items: flex-start;
            }
}