/* ==========================================================================
   Umfrage-Darstellung (umfrage_runner.js)

   Wird sowohl von der Vorschau in der Verwaltung als auch von der
   oeffentlichen Umfrage im Portal geladen. Farben ueber Theme-Variablen;
   Linien wie im globalen Tabellenstil mit rgba(0,0,0,...), weil
   --whitetrans im Light-Theme praktisch unsichtbar ist.
   ========================================================================== */

/* Knopf-Grundstil: im Popup greift der Modulcontainer nicht */
.umfrage-runner .btn {
    display: inline-block;
    background-color: var(--primcol);
    color: var(--bgcolmid);
    border: none;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.umfrage-runner .btn:hover {
    background-color: var(--accent);
}

.umfrage-runner .btn-sekundaer {
    background-color: var(--bgcolmid);
    color: var(--textcol);
}

.umfrage-runner .btn-sekundaer:hover {
    background-color: var(--bgcoldark);
}

/* ==========================================================================
   Vorschau (Umfrage-Runner im Popup)
   ========================================================================== */

.umfrage-runner {
    padding: 10px;
    max-width: 40rem;
}

/* Kennzeichnet die Vorschau eindeutig als Test */
.umfrage-testhinweis {
    background-color: rgba(var(--warncol-rgb), 0.15);
    border-left: 3px solid var(--warncol);
    padding: 6px 10px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Technische Angaben, nur im Testmodus */
.umfrage-technik {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}

.umfrage-runner h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

.umfrage-nummer {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--primcol);
}

.umfrage-hilfetext,
.umfrage-dauer,
.umfrage-datenschutz {
    font-size: 0.85rem;
    opacity: 0.85;
    margin: 0 0 8px 0;
}

/* ── Antwortoptionen ───────────────────────────────────────────────────── */

.umfrage-optionen {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.umfrage-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
}

.umfrage-option:hover {
    background-color: var(--blacktrans);
}

.umfrage-option input {
    margin-top: 2px;
    flex-shrink: 0;
}

.umfrage-optionstext {
    margin: 0 0 4px 1.8rem;
    padding: 4px 8px;
    width: calc(100% - 1.8rem);
    box-sizing: border-box;
    font-size: 0.85rem;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    background-color: var(--bgcoldark);
    color: var(--textcol);
}

.umfrage-textfeld {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    font-size: 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    background-color: var(--bgcoldark);
    color: var(--textcol);
    resize: vertical;
}

.umfrage-limit {
    font-size: 0.8rem;
    opacity: 0.8;
    margin: 4px 0 0 0;
}

/* Hinweis bei fehlender Pflichtangabe */
.umfrage-meldung {
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 0.85rem;
    background-color: rgba(var(--errcol-rgb), 0.15);
    border-left: 3px solid var(--errcol);
}

/* ── Fusszeile ─────────────────────────────────────────────────────────── */

.umfrage-fuss {
    display: flex;
    flex-wrap: wrap; /* drei Knoepfe passen auf dem Handy sonst nicht nebeneinander */
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.35);
}

/* ── Auswertung am Ende ────────────────────────────────────────────────── */

.umfrage-zusammenfassung {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.35);
}

.umfrage-zusammenfassung h4 {
    margin: 0 0 6px 0;
    font-size: 0.9rem;
}

/* Rahmen bewusst aus styles.css - nur Abstaende hier */
.umfrage-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.umfrage-tabelle th,
.umfrage-tabelle td {
    padding: 4px 8px;
    text-align: left;
}

.umfrage-abbruch {
    background-color: rgba(var(--errcol-rgb), 0.15);
    border-left: 3px solid var(--errcol);
    padding: 10px;
}

/* ── Einleitung mit Bild ───────────────────────────────────────────────── */

.umfrage-einleitung {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.umfrage-einleitung-text {
    flex: 1;
    min-width: 0;
}

.umfrage-bild {
    flex: 0 0 11rem;
    margin: 0;
    text-align: center;
}

.umfrage-bild img {
    width: 100%;
    height: auto;
    display: block;
}

/* Kennzeichnung der KI-Herkunft - bewusst dauerhaft sichtbar und nicht
   nur als Titel-Attribut (Transparenzpflicht der EU-KI-Verordnung). */
.umfrage-bild figcaption {
    font-size: 0.7rem;
    opacity: 0.75;
    margin-top: 2px;
    font-style: italic;
}

/* Auf schmalen Bildschirmen rutscht das Bild unter den Text */
@media (max-width: 560px) {
    .umfrage-einleitung {
        flex-direction: column;
    }

    .umfrage-bild {
        flex: none;
        align-self: center;
        max-width: 12rem;
    }
}

/* Honeypot: fuer Menschen unsichtbar, fuer Automaten ein ausfuellbares Feld.
   Bewusst nicht display:none - manche Automaten ueberspringen versteckte
   Felder, ausserhalb des Sichtfelds geparkte fuellen sie dagegen aus. */
.umfrage-falle {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Verweis auf die Datenschutzerklaerung in der Einleitung */
.umfrage-datenschutz a {
    color: var(--primcol);
    text-decoration: underline;
    white-space: nowrap;
}

.umfrage-datenschutz a:hover {
    color: var(--accent);
}