/* Umfrage Studio – Frontend
 * Stil "card": eigene Fläche mit festen Farben (sieht in jedem Theme gleich aus).
 * Stil "plain": übernimmt Hintergrund und Textfarbe des Themes.
 */
.ust {
	--ust-accent: #2f5d62;
	--ust-surface: #ffffff;
	--ust-surface-2: #f4f5f7;
	--ust-ink: #1b1d21;
	--ust-muted: #686d76;
	--ust-line: #e3e5e9;
	--ust-danger: #c0362c;
	--ust-radius: 12px;
	--ust-soft: rgba(47, 93, 98, .1);
	--ust-ring: rgba(47, 93, 98, .28);
	position: relative;
	max-width: 680px;
	margin: 0 auto 2.5em;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
@supports (color: color-mix(in srgb, red, blue)) {
	.ust {
		--ust-soft: color-mix(in srgb, var(--ust-accent) 11%, var(--ust-surface));
		--ust-ring: color-mix(in srgb, var(--ust-accent) 30%, transparent);
	}
}

/* Dunkles Farbschema */
.ust--card.ust--scheme-dark {
	--ust-surface: #17191d;
	--ust-surface-2: #22252b;
	--ust-ink: #eceef1;
	--ust-muted: #9aa0a9;
	--ust-line: #30343b;
	--ust-danger: #ff8a7f;
}
@media (prefers-color-scheme: dark) {
	.ust--card.ust--scheme-auto {
		--ust-surface: #17191d;
		--ust-surface-2: #22252b;
		--ust-ink: #eceef1;
		--ust-muted: #9aa0a9;
		--ust-line: #30343b;
		--ust-danger: #ff8a7f;
	}
}

/* Schlicht: Farben vom Theme */
.ust--plain {
	--ust-surface: transparent;
	--ust-ink: currentColor;
	--ust-surface-2: rgba(127, 127, 127, .08);
	--ust-line: rgba(127, 127, 127, .3);
	--ust-muted: rgba(127, 127, 127, 1);
	--ust-soft: rgba(127, 127, 127, .1);
}

.ust *, .ust *::before, .ust *::after { box-sizing: border-box; }
.ust [hidden] { display: none !important; }
.ust-sr, .ust-hp {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.ust svg { flex: 0 0 auto; }

/* ---------- Rahmen ---------- */
.ust-shell { position: relative; color: var(--ust-ink); }
.ust--card .ust-shell {
	background: var(--ust-surface);
	border: 1px solid var(--ust-line);
	border-radius: 20px;
	padding: clamp(22px, 5vw, 44px);
	box-shadow: 0 1px 2px rgba(16, 18, 24, .04), 0 18px 40px -22px rgba(16, 18, 24, .22);
	overflow: hidden;
}
.ust--card .ust-shell a { color: var(--ust-accent); }

/* Fortschritt als feine Linie an der Oberkante der Karte */
.ust-topbar { margin: 0 0 1.8em; }
.ust--card .ust-topbar { position: absolute; left: 0; right: 0; top: 0; margin: 0; }
.ust-progress { height: 4px; background: var(--ust-line); overflow: hidden; border-radius: 4px; }
.ust--card .ust-progress { border-radius: 0; background: transparent; }
.ust-progress span {
	display: block; height: 100%; width: 0; background: var(--ust-accent);
	border-radius: 0 4px 4px 0; transition: width .45s cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Kopf / Startbildschirm ---------- */
.ust-head { margin-bottom: 2em; }
.ust-title {
	margin: 0 0 .35em; font-size: clamp(1.45em, 3.4vw, 1.9em); line-height: 1.15;
	font-weight: 700; letter-spacing: -.015em; color: var(--ust-ink);
}
.ust-desc { color: var(--ust-muted); font-size: 1.02em; }
.ust-desc > :last-child { margin-bottom: 0; }
.ust-meta { margin: .8em 0 0; font-size: .88em; color: var(--ust-muted); }

.ust-welcome { padding: 1.2em 0 .4em; }
.ust-welcome .ust-title { font-size: clamp(1.7em, 4.4vw, 2.3em); max-width: 18em; }
.ust-welcome .ust-desc { max-width: 34em; margin-bottom: 1.4em; }
.ust-facts { list-style: none; margin: 0 0 2em; padding: 0; display: flex; flex-wrap: wrap; gap: .5em; }
.ust-facts li {
	display: inline-flex; align-items: center; gap: .45em; margin: 0;
	padding: .35em .8em .35em .6em; border-radius: 999px; background: var(--ust-surface-2);
	font-size: .88em; color: var(--ust-muted);
}
.ust-facts svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ust-hint--start { margin: .9em 0 0; }

/* ---------- Fragen ---------- */
.ust-q { margin: 0 0 2.4em; }
.ust-q.ust-is-hidden { display: none; }
.ust:not(.ust--conv) .ust-q:not(.ust-final) + .ust-q:not(.ust-final) { padding-top: 2.4em; border-top: 1px solid var(--ust-line); }
.ust-q-inner { border: 0; margin: 0; padding: 0; min-width: 0; }
.ust-q-title {
	display: flex; gap: .65em; align-items: baseline; float: none; width: 100%;
	font-weight: 600; font-size: 1.12em; line-height: 1.35; padding: 0; margin: 0 0 .45em; color: var(--ust-ink);
}
.ust-q-num {
	flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 1.75em; height: 1.75em; padding: 0 .3em;
	border-radius: 7px; background: var(--ust-soft); color: var(--ust-accent);
	font-size: .78em; font-weight: 700; font-variant-numeric: tabular-nums; transform: translateY(-.1em);
}
.ust-req { color: var(--ust-danger); margin-left: .2em; }
.ust-q-desc { color: var(--ust-muted); font-size: .94em; margin: 0 0 1em; }
.ust-field { margin-top: .9em; }
.ust-help { font-size: .85em; color: var(--ust-muted); margin: 0 0 .6em; }
.ust-info-title { margin: 0 0 .4em; font-size: 1.25em; line-height: 1.3; color: var(--ust-ink); }
.ust-info-text { color: var(--ust-muted); }
.ust-info-text > :last-child { margin-bottom: 0; }

/* ---------- Auswahl mit Tasten-Badge ---------- */
.ust-options { display: grid; gap: .55em; }
.ust-options--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14em), 1fr)); }
.ust-choice {
	position: relative; display: flex; align-items: center; gap: .85em; margin: 0; cursor: pointer;
	padding: .75em 1em .75em .75em; border: 1.5px solid var(--ust-line); border-radius: var(--ust-radius);
	background: var(--ust-surface); color: var(--ust-ink); font-weight: 500;
	transition: border-color .15s, background-color .15s, transform .1s;
}
.ust-choice:hover { border-color: var(--ust-accent); }
.ust-choice:active { transform: scale(.995); }
.ust-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ust-key {
	flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.7em; height: 1.7em;
	border-radius: 7px; border: 1.5px solid var(--ust-line); background: var(--ust-surface-2);
	font-size: .78em; font-weight: 700; color: var(--ust-muted); transition: all .15s;
}
.ust-choice-label { flex: 1; min-width: 0; }
.ust-tick { width: 1.2em; height: 1.2em; fill: none; stroke: var(--ust-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s; }
.ust-choice:has(input:checked) { border-color: var(--ust-accent); background: var(--ust-soft); }
.ust-choice:has(input:checked) .ust-key { background: var(--ust-accent); border-color: var(--ust-accent); color: #fff; }
.ust-choice:has(input:checked) .ust-tick { opacity: 1; transform: none; }
.ust-choice:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ust-ring); }
.ust-choice.is-disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Eingabefelder ---------- */
.ust-input {
	display: block; width: 100%; max-width: 100%; font: inherit; font-size: 1em; color: var(--ust-ink);
	padding: .8em 1em; border: 1.5px solid var(--ust-line); border-radius: var(--ust-radius);
	background: var(--ust-surface-2); transition: border-color .15s, box-shadow .15s, background-color .15s;
	-webkit-appearance: none; appearance: none;
}
.ust-input::placeholder { color: var(--ust-muted); opacity: .8; }
.ust-input:hover { border-color: var(--ust-muted); }
.ust-input:focus { outline: none; border-color: var(--ust-accent); background: var(--ust-surface); box-shadow: 0 0 0 4px var(--ust-ring); }
.ust-input--number { max-width: 12em; font-variant-numeric: tabular-nums; }
.ust-textarea { resize: vertical; min-height: 8em; }

.ust-input--date { max-width: 14em; min-height: 3em; }

/* ---------- Bildauswahl ---------- */
.ust-options--images { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11em), 1fr)); gap: .8em; }
.ust-choice--img { flex-direction: column; align-items: stretch; gap: .55em; padding: .5em .5em .7em; text-align: center; }
.ust-choice--img .ust-pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--ust-radius) - 4px); background: var(--ust-surface-2); }
.ust-choice--img .ust-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.ust-choice--img:hover .ust-pic img { transform: scale(1.04); }
.ust-choice--img .ust-key { position: absolute; top: .9em; left: .9em; background: rgba(255, 255, 255, .92); }
.ust-choice--img .ust-tick { position: absolute; top: .9em; right: .9em; background: var(--ust-surface); border-radius: 50%; padding: .15em; }
.ust-choice--img .ust-choice-label { flex: 0 0 auto; padding: 0 .3em; }
@media (prefers-reduced-motion: reduce) { .ust-choice--img .ust-pic img { transition: none; } }

/* ---------- Schieberegler ---------- */
.ust-slider { --pct: 50%; max-width: 34em; }
.ust-range-out {
	display: inline-block; min-width: 3.2em; margin: 0 0 .6em; padding: .25em .8em; border-radius: 999px;
	background: var(--ust-surface-2); color: var(--ust-muted); font-weight: 700; font-size: 1.15em;
	text-align: center; font-variant-numeric: tabular-nums; transition: background-color .15s, color .15s;
}
.ust-slider.is-set .ust-range-out { background: var(--ust-accent); color: #fff; }
.ust-range {
	-webkit-appearance: none; appearance: none; display: block; width: 100%; height: 2.2em; margin: 0; padding: 0;
	background: transparent; cursor: pointer; --track: var(--ust-line);
}
.ust-range:focus { outline: none; }
.ust-range::-webkit-slider-runnable-track {
	height: .5em; border-radius: 999px;
	background: linear-gradient(to right, var(--ust-accent) var(--pct), var(--track) var(--pct));
}
.ust-range::-moz-range-track { height: .5em; border-radius: 999px; background: var(--track); }
.ust-range::-moz-range-progress { height: .5em; border-radius: 999px; background: var(--ust-accent); }
.ust-slider:not(.is-set) .ust-range::-webkit-slider-runnable-track { background: var(--track); }
.ust-slider:not(.is-set) .ust-range::-moz-range-progress { background: transparent; }
.ust-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; width: 1.7em; height: 1.7em; margin-top: -.6em; border-radius: 50%;
	background: var(--ust-surface); border: 3px solid var(--ust-accent); box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	transition: transform .15s;
}
.ust-range::-moz-range-thumb {
	width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--ust-surface); border: 3px solid var(--ust-accent);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.ust-slider:not(.is-set) .ust-range::-webkit-slider-thumb { border-color: var(--ust-muted); }
.ust-slider:not(.is-set) .ust-range::-moz-range-thumb { border-color: var(--ust-muted); }
.ust-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.ust-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--ust-ring); }
.ust-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--ust-ring); }
.ust-range-ends { display: flex; justify-content: space-between; gap: 1em; color: var(--ust-muted); font-size: .85em; }
.ust-range-ends span:last-child { text-align: right; }

/* ---------- Hinweis: Entwurf wiederhergestellt ---------- */
.ust-draft-note {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1em; margin: 0 0 1.2em; padding: .7em 1em;
	border-radius: var(--ust-radius); background: var(--ust-soft); color: var(--ust-ink); font-size: .9em;
	transition: opacity .6s;
}
.ust-draft-note.is-fading { opacity: .35; }
.ust-draft-note:hover { opacity: 1; }
.ust-draft-reset {
	margin-left: auto; padding: .3em .8em; border: 1.5px solid var(--ust-accent); border-radius: 999px; background: transparent;
	color: var(--ust-accent); font: inherit; font-size: .95em; font-weight: 600; cursor: pointer;
}
.ust-draft-reset:hover { background: var(--ust-accent); color: #fff; }

.ust-select-wrap { position: relative; max-width: 30em; }
.ust-select-wrap::after {
	content: ""; position: absolute; right: 1.1em; top: 50%; width: .5em; height: .5em; margin-top: -.35em;
	border: solid var(--ust-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none;
}
.ust-select { padding-right: 2.6em; cursor: pointer; }

/* ---------- Sterne ---------- */
.ust-stars { display: inline-flex; gap: .15em; }
.ust-star { cursor: pointer; margin: 0; position: relative; padding: .1em; }
.ust-star input { position: absolute; opacity: 0; }
.ust-star svg {
	width: 2.4em; height: 2.4em; display: block; fill: var(--ust-surface-2);
	stroke: var(--ust-line); stroke-width: 1.3; stroke-linejoin: round;
	transition: fill .15s, stroke .15s, transform .18s cubic-bezier(.3, 1.6, .5, 1);
}
.ust-star:hover svg { transform: scale(1.12); }
.ust-star.is-on svg { fill: var(--ust-accent); stroke: var(--ust-accent); }
.ust-star input:focus-visible + svg { outline: 3px solid var(--ust-ring); outline-offset: 2px; border-radius: 6px; }

/* ---------- Skala & NPS als Segment-Leiste ---------- */
.ust-scale {
	display: grid; grid-template-columns: repeat(var(--ust-cols), minmax(0, 1fr));
	border: 1.5px solid var(--ust-line); border-radius: var(--ust-radius); overflow: hidden; max-width: 38em;
	background: var(--ust-surface);
}
.ust-scale-item { margin: 0; cursor: pointer; position: relative; }
.ust-scale-item + .ust-scale-item { border-left: 1px solid var(--ust-line); }
.ust-scale-item input { position: absolute; opacity: 0; }
.ust-scale-item span {
	display: grid; place-items: center; height: 3em; font-weight: 600; font-variant-numeric: tabular-nums;
	color: var(--ust-ink); transition: background-color .15s, color .15s;
}
.ust-scale-item:hover span { background: var(--ust-soft); }
.ust-scale-item input:checked + span { background: var(--ust-accent); color: #fff; }
.ust-scale-item input:focus-visible + span { box-shadow: inset 0 0 0 3px var(--ust-ring); }
.ust-scale-labels {
	display: flex; justify-content: space-between; gap: 1em; max-width: 38em;
	font-size: .84em; color: var(--ust-muted); margin-top: .5em;
}
.ust-scale-labels span:last-child { text-align: right; }

/* NPS: Kritiker / Passive / Promotoren farblich erkennbar, sobald gewählt */
.ust-q--nps .ust-scale-item:nth-child(-n+7) input:checked + span { background: #c2410c; }
.ust-q--nps .ust-scale-item:nth-child(8) input:checked + span,
.ust-q--nps .ust-scale-item:nth-child(9) input:checked + span { background: #a16207; }
.ust-q--nps .ust-scale-item:nth-child(n+10) input:checked + span { background: #15803d; }

/* ---------- Matrix ---------- */
.ust-matrix-wrap { overflow-x: auto; border: 1.5px solid var(--ust-line); border-radius: var(--ust-radius); }
.ust-matrix { border-collapse: collapse; width: 100%; font-size: .95em; margin: 0; color: var(--ust-ink); }
.ust-matrix th, .ust-matrix td { padding: .7em .5em; border: 0; text-align: center; background: none; }
.ust-matrix thead th { font-weight: 600; font-size: .82em; color: var(--ust-muted); vertical-align: bottom; background: var(--ust-surface-2); }
.ust-matrix thead td { background: var(--ust-surface-2); }
.ust-matrix tbody tr + tr { border-top: 1px solid var(--ust-line); }
.ust-matrix tbody th { text-align: left; font-weight: 500; padding-left: 1em; }
.ust-matrix-cell { display: inline-grid; place-items: center; cursor: pointer; margin: 0; padding: .3em; position: relative; }
.ust-matrix-cell input { position: absolute; opacity: 0; }
.ust-dot {
	width: 1.35em; height: 1.35em; border-radius: 50%; border: 2px solid var(--ust-line); background: var(--ust-surface);
	transition: border-color .15s, box-shadow .15s;
}
.ust-matrix-cell:hover .ust-dot { border-color: var(--ust-accent); }
.ust-matrix-cell input:checked + .ust-dot { border-color: var(--ust-accent); box-shadow: inset 0 0 0 4px var(--ust-surface), inset 0 0 0 10px var(--ust-accent); }
.ust-matrix-cell input:focus-visible + .ust-dot { outline: 3px solid var(--ust-ring); outline-offset: 2px; }
.ust-matrix-mlabel { display: none; }

@media (max-width: 600px) {
	.ust-matrix-wrap { border: 0; border-radius: 0; }
	.ust-matrix thead { display: none; }
	.ust-matrix, .ust-matrix tbody, .ust-matrix tr, .ust-matrix th, .ust-matrix td { display: block; width: 100%; }
	.ust-matrix tr { border: 1.5px solid var(--ust-line) !important; border-radius: var(--ust-radius); padding: .7em .9em; margin-bottom: .6em; }
	.ust-matrix tbody th { padding: 0 0 .4em; }
	.ust-matrix td { padding: .2em 0; text-align: left; }
	.ust-matrix-cell { display: flex; gap: .7em; align-items: center; }
	.ust-matrix-mlabel { display: inline; }
	.ust-has-error .ust-matrix tr { border-color: var(--ust-danger) !important; }
	.ust-q--nps .ust-scale-item span { height: 2.6em; font-size: .88em; }
}

/* ---------- Fehler ---------- */
.ust-error { color: var(--ust-danger); font-size: .9em; font-weight: 500; margin: .6em 0 0; display: flex; gap: .4em; align-items: center; }
.ust-error:empty { display: none; }
.ust-error::before { content: "!"; display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--ust-danger); color: var(--ust-surface); font-size: .8em; font-weight: 800; flex: 0 0 auto; }
.ust-has-error .ust-choice, .ust-has-error .ust-input, .ust-has-error .ust-scale, .ust-has-error .ust-matrix-wrap { border-color: var(--ust-danger); }
.ust-has-error .ust-q-inner { animation: ust-shake .3s; }
.ust-form-error { color: var(--ust-danger); font-weight: 600; margin: 0 0 1em; }
.ust-form-error:empty { display: none; }
@keyframes ust-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- Abschluss, Einwilligung, Buttons ---------- */
.ust-final { margin-bottom: 0; }
.ust-final-title { margin: 0 0 .3em; font-size: 1.35em; font-weight: 700; color: var(--ust-ink); }
.ust-final-text { margin: 0 0 1.4em; color: var(--ust-muted); }
.ust-consent { margin-bottom: 1.5em; padding: 1em 1.1em; border-radius: var(--ust-radius); background: var(--ust-surface-2); }
.ust-check { display: flex; gap: .75em; align-items: flex-start; cursor: pointer; font-size: .92em; margin: 0; color: var(--ust-ink); }
.ust-check input { position: absolute; opacity: 0; }
.ust-box {
	flex: 0 0 auto; width: 1.3em; height: 1.3em; margin-top: .1em; border-radius: 6px;
	border: 2px solid var(--ust-muted); background: var(--ust-surface); display: grid; place-items: center; transition: all .15s;
}
.ust-check input:checked + .ust-box { background: var(--ust-accent); border-color: var(--ust-accent); }
.ust-check input:checked + .ust-box::after {
	content: ""; width: .32em; height: .62em; border: solid #fff; border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}
.ust-check input:focus-visible + .ust-box { box-shadow: 0 0 0 3px var(--ust-ring); }

.ust-actions, .ust-nav { display: flex; align-items: center; gap: .7em; flex-wrap: wrap; }
.ust-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4em;
	font: inherit; font-weight: 600; font-size: 1em; line-height: 1; cursor: pointer;
	min-height: 2.9em; padding: 0 1.4em; border-radius: var(--ust-radius);
	background: var(--ust-accent); color: #fff; border: 1.5px solid var(--ust-accent);
	transition: filter .15s, transform .1s, box-shadow .15s; text-decoration: none;
}
.ust-btn:hover { filter: brightness(1.08); }
.ust-btn:active { transform: translateY(1px); }
.ust-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ust-ring); }
.ust-btn[disabled] { opacity: .6; cursor: progress; }
.ust-btn--lg { min-height: 3.3em; padding: 0 1.9em; font-size: 1.04em; }
.ust-btn--ghost { background: transparent; color: var(--ust-ink); border-color: var(--ust-line); }
.ust-btn--ghost:hover { border-color: var(--ust-muted); filter: none; }
.ust-btn svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ust-nav .ust-back { padding: 0; width: 2.9em; }
.ust-hint { font-size: .84em; color: var(--ust-muted); }
.ust-hint kbd { font: inherit; font-weight: 600; font-size: .92em; border: 1px solid var(--ust-line); border-bottom-width: 2px; border-radius: 5px; padding: .05em .4em; background: var(--ust-surface-2); }

/* ---------- Gesprächsmodus: eine Frage pro Schritt ---------- */
.ust--conv .ust-q { display: none; margin-bottom: 1.8em; }
.ust--conv .ust-q.is-current { display: block; animation: ust-in .35s cubic-bezier(.2, .8, .2, 1); }
.ust--conv.ust-dir-back .ust-q.is-current { animation-name: ust-in-back; }
.ust--conv .ust-q-title { font-size: clamp(1.2em, 3vw, 1.45em); }
.ust--conv .ust-q-num { display: none; }
.ust--conv .ust-questions { min-height: 16em; }
.ust-counter { font-size: .82em; font-weight: 600; color: var(--ust-muted); font-variant-numeric: tabular-nums; margin: 0 0 1.4em; min-height: 1.2em; }
@keyframes ust-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ust-in-back { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
	.ust--conv .ust-nav { position: sticky; bottom: 0; background: var(--ust-surface); padding: .8em 0 .2em; margin-bottom: -.2em; }
	.ust--conv .ust-nav .ust-next { flex: 1; }
	.ust-hint { display: none; }
	.ust-actions .ust-submit { flex: 1; }
}

/* ---------- Erfolg & Hinweise ---------- */
.ust-success { text-align: center; padding: 1.5em 0 .5em; outline: none; }
.ust-success-icon { width: 64px; height: 64px; margin-bottom: 1em; fill: none; stroke: var(--ust-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ust-success-icon circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: ust-draw .6s ease-out forwards; }
.ust-success-icon path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ust-draw .35s .5s ease-out forwards; }
.ust-success-title { margin: 0 0 .3em; font-size: 1.6em; font-weight: 700; letter-spacing: -.01em; color: var(--ust-ink); }
.ust-success-text { font-size: 1.04em; white-space: pre-line; margin: 0 auto; color: var(--ust-muted); max-width: 30em; }
.ust-success-results { margin-top: 1.5em; }
@keyframes ust-draw { to { stroke-dashoffset: 0; } }

.ust-closed .ust-shell { text-align: center; }
.ust-closed-icon { color: var(--ust-accent); margin-bottom: .6em; }
.ust-closed-title { margin: 0 0 .3em; font-size: 1.3em; font-weight: 700; color: var(--ust-ink); }
.ust-closed-text { margin: 0 auto; color: var(--ust-muted); max-width: 30em; }
.ust--plain.ust-closed .ust-shell { padding: 1.2em 1.4em; border-left: 3px solid var(--ust-accent); background: var(--ust-soft); border-radius: 6px; text-align: left; }
.ust--plain .ust-closed-icon { display: none; }

@media (prefers-reduced-motion: reduce) {
	.ust *, .ust *::before, .ust *::after { animation: none !important; transition: none !important; }
	.ust-success-icon circle, .ust-success-icon path { stroke-dashoffset: 0; }
}

/* ------------------------------------------------------------------
 * Öffentliche Ergebnisse
 * ------------------------------------------------------------------ */
.ust-pr { margin-top: 0; }
.ust-success-results { margin-top: .5em; }
.ust-success-results .ust-pr { max-width: none; }
.ust-pr-head { margin-bottom: 1.6em; padding-bottom: 1em; border-bottom: 1px solid var(--ust-line); }
.ust-pr-title { margin: 0 0 .2em; font-size: 1.35em; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--ust-ink); }
.ust-pr-q h4 { color: var(--ust-ink); }
.ust-pr-meta { margin: 0; color: var(--ust-muted); font-size: .9em; }
.ust-pr-q { margin: 0 0 1.8em; }
.ust-pr-q h4 { margin: 0 0 .7em; font-size: 1.02em; line-height: 1.35; }
.ust-pr-row { margin: 0 0 .55em; }
.ust-pr-label { display: flex; justify-content: space-between; gap: 1em; font-size: .93em; margin-bottom: .2em; }
.ust-pr-label strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ust-pr-track { height: .6em; border-radius: .3em; background: var(--ust-surface-2); overflow: hidden; }
.ust-pr-track span { transition: width .9s cubic-bezier(.2, .8, .2, 1); display: block; height: 100%; background: var(--ust-accent); border-radius: .3em; }
.ust-pr-note { font-size: .82em; color: var(--ust-muted); margin: .3em 0 0; }

.ust-pr-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2em .6em; margin: 0 0 .8em; }
.ust-pr-big strong { font-size: 2.2em; line-height: 1; color: var(--ust-accent); font-variant-numeric: tabular-nums; }
.ust-pr-big span { color: var(--ust-muted); font-size: .9em; }
.ust-pr-stars {
	--ust-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.84 5.76 6.36.92-4.6 4.48 1.08 6.34L12 17.3l-5.68 3 1.08-6.34-4.6-4.48 6.36-.92z'/%3E%3C/svg%3E");
	position: relative; display: inline-block; height: 1.1em; width: calc(var(--ust-n) * 1.2em);
	background: linear-gradient(90deg, var(--ust-accent) var(--ust-fill), var(--ust-line) var(--ust-fill));
	-webkit-mask: var(--ust-star) left / 1.2em 1.1em repeat-x; mask: var(--ust-star) left / 1.2em 1.1em repeat-x;
	align-self: center;
}

.ust-pr-stack { display: flex; height: 1.6em; border-radius: .35em; overflow: hidden; background: var(--ust-line); flex: 1; }
.ust-pr-stack > span { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 0; }
.ust-pr-det { background: #c2410c; }
.ust-pr-pas { background: #a16207; }
.ust-pr-pro { background: #15803d; }
.ust-pr-seg { background: var(--ust-accent); opacity: .6; }
@supports (color: color-mix(in srgb, red, blue)) {
	.ust-pr-seg { opacity: 1; background: color-mix(in srgb, var(--ust-accent) var(--o, 100%), #fff); }
}
.ust-pr-seg em { font-style: normal; font-size: .75em; font-weight: 600; color: #1d2327; font-variant-numeric: tabular-nums; }
.ust-pr-seg.is-dark em { color: #fff; }
.ust-pr-legend { list-style: none; margin: .6em 0 .9em; padding: 0; display: flex; flex-wrap: wrap; gap: .3em 1.2em; font-size: .85em; }
.ust-pr-legend li { display: inline-flex; align-items: center; gap: .4em; margin: 0; }
.ust-pr-legend i { display: inline-block; width: .8em; height: .8em; border-radius: 2px; }
.ust-pr-mrow { display: grid; grid-template-columns: minmax(6em, 30%) 1fr; gap: .8em; align-items: center; margin-bottom: .45em; font-size: .93em; }
@media (max-width: 600px) { .ust-pr-mrow { grid-template-columns: 1fr; gap: .25em; } }

.ust-pr-stats { display: flex; flex-wrap: wrap; gap: .5em 2em; margin: 0; }
.ust-pr-stats dt { font-size: .82em; color: var(--ust-muted); }
.ust-pr-stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------
 * 1.3.0 – Theme-Anpassung, Einbettung, Animationen
 * ------------------------------------------------------------------ */

/* Look der Seite übernehmen (Variablen des Bella-Themes, mit Rückfall auf die eigenen Werte) */
.ust.ust--themed {
	--ust-accent: var(--b-primary, var(--ust-accent-own, #2f5d62));
	--ust-radius: var(--b-r, 12px);
	font-family: var(--b-sans, inherit);
}
.ust.ust--themed.ust--card {
	--ust-surface: var(--b-surface, #fff);
	--ust-surface-2: var(--b-tint, var(--b-satin, #f4f5f7));
	--ust-ink: var(--b-ink, #1b1d21);
	--ust-muted: var(--b-muted, #686d76);
	--ust-line: var(--b-line, #e3e5e9);
}
.ust.ust--themed .ust-title,
.ust.ust--themed .ust-pr-title,
.ust.ust--themed .ust-success-title,
.ust.ust--themed .ust-closed-title { font-family: var(--b-display, inherit); }

/* Eingebettet: schmaler, ohne Außenabstand der Einzelseite */
.ust.ust--embed { max-width: none; margin: 1.6em 0; }
.ust-poll-slot { margin: 1.6em 0; clear: both; }
.ust-poll-slot .ust { margin-left: 0; margin-right: 0; }
.ust.ust--embed .ust-title { font-size: 1.25em; }

/* Auftritt */
@keyframes ust-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ust-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ust-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes ust-burst { 0% { transform: translate(0, 0) scale(.3); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }

.ust.ust--embed { animation: ust-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.ust-pr-track span { transform-origin: left center; animation: ust-grow 1s cubic-bezier(.2, .8, .2, 1) both; }
.ust-pr-row:nth-child(2) .ust-pr-track span { animation-delay: .08s; }
.ust-pr-row:nth-child(3) .ust-pr-track span { animation-delay: .16s; }
.ust-pr-row:nth-child(4) .ust-pr-track span { animation-delay: .24s; }
.ust-pr-row:nth-child(5) .ust-pr-track span { animation-delay: .32s; }
.ust-pr-row:nth-child(n+6) .ust-pr-track span { animation-delay: .4s; }
.ust-success-icon { animation: ust-pop .5s cubic-bezier(.2, .9, .3, 1.3) both; }

/* Konfetti-Funken beim Absenden (reines CSS, vom Script nur eingehängt) */
.ust-burst { position: absolute; left: 50%; top: 2.2em; width: 0; height: 0; pointer-events: none; }
.ust-burst i {
	position: absolute; width: 8px; height: 8px; border-radius: 2px;
	background: var(--ust-accent); opacity: 0;
	animation: ust-burst .9s cubic-bezier(.1, .8, .3, 1) forwards;
}
.ust-burst i:nth-child(3n) { background: #f5b942; }
.ust-burst i:nth-child(3n+1) { background: #ef6f8b; }
.ust-success { position: relative; }

@media (prefers-reduced-motion: reduce) {
	.ust.ust--embed, .ust-pr-track span, .ust-success-icon { animation: none; }
	.ust-burst { display: none; }
}

/* Rangfolge */
.ust-rank { list-style: none; margin: .4em 0 0; padding: 0; display: grid; gap: .5em; }
.ust-rank-item {
	display: flex; align-items: center; gap: .7em; padding: .65em .8em;
	background: var(--ust-surface); border: 1px solid var(--ust-line); border-radius: var(--ust-radius);
	touch-action: none; user-select: none; transition: box-shadow .15s, border-color .15s, transform .15s;
}
.ust-rank-item.is-drag { border-color: var(--ust-accent); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); transform: scale(1.01); }
.ust-rank-grip { color: var(--ust-muted); cursor: grab; font-size: 1.1em; line-height: 1; }
.ust-rank-n { min-width: 1.6em; font-weight: 700; color: var(--ust-accent); font-variant-numeric: tabular-nums; }
.ust-rank-label { flex: 1; cursor: grab; }
.ust-rank-btns { display: flex; gap: .25em; }
.ust-rank-btns button {
	width: 2em; height: 2em; border-radius: 50%; border: 1px solid var(--ust-line); background: var(--ust-surface-2);
	color: var(--ust-ink); cursor: pointer; font-size: 1em; line-height: 1;
}
.ust-rank-btns button:hover, .ust-rank-btns button:focus-visible { border-color: var(--ust-accent); outline: 2px solid var(--ust-ring); outline-offset: 1px; }

@keyframes ust-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); color: var(--ust-accent); } 100% { transform: scale(1); } }
.ust-pr-label strong.is-bump { display: inline-block; animation: ust-bump .6s ease; }
@media (prefers-reduced-motion: reduce) { .ust-pr-track span { transition: none; } .ust-pr-label strong.is-bump { animation: none; } }

/* Sprachumschalter */
.ust-langs { display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: flex-end; margin: 0 0 10px; font-size: 12px; }
.ust-langs a { padding: 2px 9px; border-radius: 999px; color: inherit; opacity: .7; text-decoration: none; border: 1px solid transparent; }
.ust-langs a:hover, .ust-langs a:focus-visible { opacity: 1; border-color: currentColor; }
.ust-langs a.is-on { opacity: 1; font-weight: 600; background: rgba(127, 127, 127, .16); }
[dir="rtl"].ust { text-align: right; }
[dir="rtl"] .ust-langs { justify-content: flex-start; }
[dir="rtl"] .ust-tick, [dir="rtl"] .ust-key { margin-inline-start: 0; }

/* ---------- Ergebnisse als Säulen, Kreis oder Ring ---------- */
.ust-pr-cols { display: flex; align-items: flex-end; gap: .6em; min-height: calc(var(--h, 200px) + 4.5em); padding-top: .4em; }
.ust-pr-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; gap: .3em; }
.ust-pr-col strong { font-size: .85em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ust-pr-colbar { display: flex; align-items: flex-end; width: 100%; max-width: 4.5em; height: var(--h, 200px); background: var(--ust-surface-2); border-radius: .35em .35em 0 0; overflow: hidden; }
.ust-pr-colbar i { display: block; width: 100%; background: var(--ust-accent); border-radius: .35em .35em 0 0; transition: height .9s cubic-bezier(.2, .8, .2, 1); }
.ust-pr-col em { font-style: normal; font-size: .8em; color: var(--ust-muted); line-height: 1.25; overflow-wrap: anywhere; }
.ust-pr-donutbox { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2em 2em; }
.ust-pr-donut { flex: none; width: var(--h, 200px); height: var(--h, 200px); max-width: 100%; aspect-ratio: 1; border-radius: 50%; }
.ust-pr-donut.is-ring { -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%); mask: radial-gradient(circle, transparent 54%, #000 55%); }
.ust-pr-donutleg { list-style: none; margin: 0; padding: 0; flex: 1 1 12em; font-size: .93em; }
.ust-pr-donutleg li { display: flex; align-items: baseline; gap: .55em; margin: 0 0 .4em; }
.ust-pr-donutleg i { flex: none; width: .8em; height: .8em; border-radius: 2px; align-self: center; }
.ust-pr-donutleg span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ust-pr-donutleg strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ust-pr-colbar i { transition: none; } }