/* wpFAZ Survey – Frontend-Widget */
.wfz-survey-widget {
	--wfz-survey-accent: #2563eb;
	--wfz-survey-bg: #ffffff;
	--wfz-survey-text: #1f2937;
	position: fixed;
	bottom: 20px;
	z-index: 99990;
	width: 340px;
	max-width: calc(100vw - 32px);
	background: var(--wfz-survey-bg);
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	color: var(--wfz-survey-text);
	overflow: hidden;
	animation: wfz-survey-in 0.28s ease;
}
@keyframes wfz-survey-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}
.wfz-survey-pos-bottom-right { right: 20px; }
.wfz-survey-pos-bottom-left  { left: 20px; }
.wfz-survey-pos-bottom-center { left: 50%; transform: translateX(-50%); }

.wfz-survey-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--wfz-survey-accent);
	color: #fff;
}
.wfz-survey-title { font-weight: 600; font-size: 15px; line-height: 1.3; }
.wfz-survey-close {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 0 6px;
	opacity: 0.95;
}
.wfz-survey-close:hover { opacity: 1; }

.wfz-survey-body { padding: 16px; }
.wfz-survey-qtext { margin: 0 0 12px; font-weight: 500; }

/* Begrüßungs-Slide */
.wfz-survey-intro-title { margin: 0 0 8px; font-weight: 700; font-size: 17px; }
.wfz-survey-intro-text  { margin: 0; opacity: 0.85; line-height: 1.5; white-space: pre-line; }

.wfz-survey-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	margin-bottom: 6px;
	border: 1px solid rgba(127, 127, 127, 0.35);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.wfz-survey-opt:hover { border-color: var(--wfz-survey-accent); }
.wfz-survey-opt input { margin: 0; }

.wfz-survey-stars { display: flex; gap: 4px; }
.wfz-survey-star {
	background: transparent;
	border: 0;
	font-size: 30px;
	line-height: 1;
	color: rgba(127, 127, 127, 0.4);
	cursor: pointer;
	padding: 0;
}
.wfz-survey-star-on { color: #f59e0b; }

/* Emoji-Reaktion */
.wfz-survey-reactions { display: flex; gap: 8px; justify-content: space-between; }
.wfz-survey-reaction {
	background: transparent;
	border: 0;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
	border-radius: 8px;
	filter: grayscale(0.55);
	opacity: 0.75;
	transition: transform 0.12s, filter 0.12s, opacity 0.12s;
}
.wfz-survey-reaction:hover { transform: scale(1.12); }
.wfz-survey-reaction-on { filter: none; opacity: 1; transform: scale(1.18); }

.wfz-survey-nps { display: flex; flex-wrap: wrap; gap: 4px; }
.wfz-survey-nps-btn {
	width: 30px;
	height: 34px;
	border: 1px solid rgba(127, 127, 127, 0.35);
	border-radius: 6px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-size: 13px;
}
.wfz-survey-nps-btn:hover { border-color: var(--wfz-survey-accent); }
.wfz-survey-nps-on { background: var(--wfz-survey-accent); color: #fff; border-color: var(--wfz-survey-accent); }

/* Bewertungsmatrix */
.wfz-survey-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.wfz-survey-matrix th, .wfz-survey-matrix td { padding: 6px 4px; text-align: center; }
.wfz-survey-matrix th { font-weight: 600; }
.wfz-survey-matrix-row { text-align: left !important; font-weight: 500; padding-right: 8px; }
.wfz-survey-matrix tr + tr { border-top: 1px solid rgba(127, 127, 127, 0.2); }
.wfz-survey-matrix td input { accent-color: var(--wfz-survey-accent); }

.wfz-survey-textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(127, 127, 127, 0.35);
	border-radius: 8px;
	padding: 10px;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
	background: transparent;
	color: inherit;
}

.wfz-survey-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	font-size: 12.5px;
	opacity: 0.85;
	line-height: 1.4;
}
.wfz-survey-error { color: #dc2626; font-size: 13px; margin: 8px 0 0; min-height: 1em; }

.wfz-survey-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-top: 1px solid rgba(127, 127, 127, 0.18);
}
.wfz-survey-progress { font-size: 12px; opacity: 0.6; }
.wfz-survey-btn {
	background: var(--wfz-survey-accent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.wfz-survey-btn:hover { filter: brightness(0.94); }

.wfz-survey-thanks { text-align: center; padding: 16px 8px; }
.wfz-survey-thanks-title { font-weight: 700; font-size: 16px; margin: 0 0 6px; }
.wfz-survey-thanks-text  { font-weight: 500; margin: 0; }

@media (max-width: 480px) {
	.wfz-survey-widget { width: calc(100vw - 24px); bottom: 12px; }
	.wfz-survey-pos-bottom-right { right: 12px; }
	.wfz-survey-pos-bottom-left  { left: 12px; }
}

/* ---- v1.2: Kopfzeile, Logo, Einklappen ---- */
.wfz-survey-head-btns { display: inline-flex; align-items: center; gap: 4px; }
.wfz-survey-head-logo { height: 22px; width: auto; margin-right: 10px; background: transparent; }
.wfz-survey-collapse {
	background: transparent; border: 0; color: #fff; font-size: 22px; line-height: 1;
	cursor: pointer; padding: 0 6px; opacity: 0.95;
}
.wfz-survey-collapse:hover { opacity: 1; transform: scale(1.1); }
.wfz-survey-head-clickable { cursor: pointer; }
.wfz-survey-head-clickable .wfz-survey-title { pointer-events: none; }
.wfz-survey-widget.wfz-survey-collapsed .wfz-survey-body,
.wfz-survey-widget.wfz-survey-collapsed .wfz-survey-footer { display: none; }
.wfz-survey-logo { display: block; max-height: 40px; width: auto; margin: 0 auto 12px; }

/* ---- Kennzeichnung Pflicht/Optional ---- */
.wfz-survey-q-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wfz-survey-q-head .wfz-survey-qtext { margin: 0 0 8px; }
.wfz-survey-mark { font-size: 12px; font-weight: 500; opacity: 0.7; }
.wfz-survey-mark-req { color: var(--wfz-survey-accent); opacity: 1; font-weight: 700; margin-left: -4px; }
.wfz-survey-mark-opt { font-size: 11.5px; font-style: italic; }
.wfz-survey-qdesc { margin: -4px 0 12px; font-size: 13px; opacity: 0.75; line-height: 1.4; }
.wfz-survey-hint { font-size: 12px; opacity: 0.65; margin: 6px 0 0; }

/* ---- Navigation (Zurück / Überspringen / Weiter) ---- */
.wfz-survey-nav { display: inline-flex; gap: 14px; align-items: center; margin-left: auto; }
.wfz-survey-link {
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	opacity: 0.8;
	font-size: 13.5px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	font-family: inherit;
}
.wfz-survey-link:hover { opacity: 1; }
.wfz-survey-footer { flex-wrap: wrap; gap: 8px; }
.wfz-survey-progress { white-space: nowrap; }

/* ---- NPS zweizeilig: 0–5 / 6–10 ---- */
.wfz-survey-nps { display: flex; flex-direction: column; gap: 6px; }
.wfz-survey-nps-row { display: flex; gap: 5px; }
.wfz-survey-nps-row .wfz-survey-nps-btn { flex: 1 1 0; width: auto; }

/* ---- Danke-Link ---- */
.wfz-survey-thanks-link { display: inline-block; margin-top: 12px; text-decoration: none; }

/* ---- Größe „groß“ ---- */
.wfz-survey-size-large { width: 440px; }
.wfz-survey-size-large .wfz-survey-body { padding: 22px; }
.wfz-survey-size-large .wfz-survey-qtext { font-size: 17px; }

/* ---- Position „zentriert“ (Modal) ---- */
.wfz-survey-overlay {
	position: fixed; inset: 0; background: rgba(15,23,42,0.55); z-index: 99989;
}
.wfz-survey-pos-center {
	position: fixed; top: 50%; left: 50%; right: auto; bottom: auto;
	transform: translate(-50%, -50%); width: 460px; max-width: calc(100vw - 32px);
}
.wfz-survey-pos-center.wfz-survey-size-large { width: 560px; }

@media (max-width: 480px) {
	.wfz-survey-size-large, .wfz-survey-pos-center, .wfz-survey-pos-center.wfz-survey-size-large { width: calc(100vw - 24px); }
}

/* Senden-Zustand */
.wfz-survey-btn:disabled { cursor: default; opacity: 0.75; filter: none; }
.wfz-survey-btn-sending { opacity: 0.9; }
.wfz-survey-link:disabled { cursor: default; opacity: 0.4; }

/* Skalen-Beschriftung niedrig/hoch */
.wfz-survey-scale-labels { display: flex; justify-content: space-between; font-size: 12.5px; opacity: 0.75; margin-top: 6px; }
/* „Sonstiges" mit Freitext */
.wfz-survey-opt-other-wrap { margin-bottom: 6px; }
.wfz-survey-opt-other-wrap .wfz-survey-opt { margin-bottom: 0; }
.wfz-survey-other-field { padding: 8px 0 2px 2px; }
.wfz-survey-other-text {
	display: block; width: 100%; box-sizing: border-box;
	border: 1px solid rgba(127,127,127,0.35); border-radius: 8px; background: transparent; color: inherit;
	font-family: inherit; padding: 8px 10px; outline: 0;
}
.wfz-survey-other-text:focus { border-color: var(--wfz-survey-accent); }

/* Numerische Bewertungsskala */
.wfz-survey-scale-row { display: flex; gap: 6px; }
.wfz-survey-scale-row .wfz-survey-nps-btn { flex: 1 1 0; width: auto; height: 38px; font-size: 14px; border-radius: 8px; }

/* ---- Einheitliche Schriftgröße: Fragetext = Antwortoptionen ---- */
.wfz-survey-widget { --wfz-survey-q-size: 15px; }
.wfz-survey-size-large { --wfz-survey-q-size: 17px; }
.wfz-survey-widget .wfz-survey-qtext { font-size: var(--wfz-survey-q-size); line-height: 1.4; }
.wfz-survey-widget .wfz-survey-opt,
.wfz-survey-widget .wfz-survey-opt span,
.wfz-survey-widget .wfz-survey-matrix-row,
.wfz-survey-widget .wfz-survey-other-text { font-size: var(--wfz-survey-q-size); line-height: 1.4; }
/* Theme-Einflüsse auf Labels/Inputs im Widget neutralisieren */
.wfz-survey-widget label { font-family: inherit; font-weight: 400; margin: 0; color: inherit; text-transform: none; letter-spacing: normal; }
.wfz-survey-widget .wfz-survey-opt { margin-bottom: 6px; }
.wfz-survey-widget .wfz-survey-opt input[type="radio"],
.wfz-survey-widget .wfz-survey-opt input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--wfz-survey-accent); }

/* ---- Skalen über volle Breite: Labels unter erstem/letztem Symbol ---- */
.wfz-survey-widget .wfz-survey-stars,
.wfz-survey-widget .wfz-survey-reactions { display: flex; justify-content: space-between; align-items: center; gap: 0; width: 100%; }
.wfz-survey-widget .wfz-survey-star { font-size: 34px; padding: 0; line-height: 1; }
.wfz-survey-widget .wfz-survey-reaction { font-size: 32px; padding: 2px; }
.wfz-survey-widget .wfz-survey-scale-labels { margin-top: 8px; }
.wfz-survey-widget .wfz-survey-scale-low { text-align: left; }
.wfz-survey-widget .wfz-survey-scale-high { text-align: right; }
.wfz-survey-widget .wfz-survey-scale-labels span { max-width: 48%; }

/* Kennzeichnung im Fließtext hinter der Frage */
.wfz-survey-widget .wfz-survey-qtext .wfz-survey-mark { display: inline; margin-left: 6px; white-space: nowrap; vertical-align: baseline; }
.wfz-survey-widget .wfz-survey-qtext .wfz-survey-mark-req { margin-left: 2px; }
.wfz-survey-widget .wfz-survey-qtext .wfz-survey-mark-opt { font-size: 0.8em; font-style: italic; opacity: 0.7; }

/* ---- Abgerundete SVG-Sterne, größer; Abstand unter jeder Frage ---- */
.wfz-survey-widget .wfz-survey-star { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.wfz-survey-widget .wfz-survey-star svg { width: 38px; height: 38px; display: block; }
.wfz-survey-widget .wfz-survey-star svg path { fill: rgba(127,127,127,0.28); stroke: rgba(127,127,127,0.28); transition: fill 0.12s, stroke 0.12s; }
.wfz-survey-widget .wfz-survey-star-hover svg path { fill: rgba(245,158,11,0.6); stroke: rgba(245,158,11,0.6); }
.wfz-survey-widget .wfz-survey-star-on svg path { fill: #f59e0b; stroke: #f59e0b; }
.wfz-survey-widget .wfz-survey-question-block { margin-bottom: 18px; }
.wfz-survey-widget .wfz-survey-question-block:last-of-type { margin-bottom: 4px; }
.wfz-survey-widget .wfz-survey-input { margin-bottom: 4px; }

/* „Sonstiges": größeres Kommentarfeld */
.wfz-survey-widget .wfz-survey-other-field { padding: 10px 0 4px; }
.wfz-survey-widget .wfz-survey-other-hint { margin: 0 0 6px; font-size: 13px; opacity: 0.85; }
.wfz-survey-widget textarea.wfz-survey-other-text { min-height: 84px; resize: vertical; font-size: 14px; line-height: 1.4; }

/* Eigene Button-Farben (Fallback: Akzent / Weiß) */
.wfz-survey-widget .wfz-survey-btn { background: var(--wfz-survey-btn-bg, var(--wfz-survey-accent)); color: var(--wfz-survey-btn-text, #fff); }
.wfz-survey-widget .wfz-survey-thanks-link { background: var(--wfz-survey-btn-bg, var(--wfz-survey-accent)); color: var(--wfz-survey-btn-text, #fff); }

/* Kopfzeilen-Textfarbe (Fallback Weiß) */
.wfz-survey-widget .wfz-survey-head { color: var(--wfz-survey-head-text, #fff); }
.wfz-survey-widget .wfz-survey-close, .wfz-survey-widget .wfz-survey-collapse { color: var(--wfz-survey-head-text, #fff); }

/* Shortcode: Umfrage an fester Stelle im Inhalt (kein Slide-in, keine Kopfzeilen-Buttons). */
.wfz-survey-widget.wfz-survey-widget-embed {
	position: static;
	width: 100%;
	max-width: 100%;
	margin: 24px 0;
	z-index: auto;
	animation: none;
	box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}
.wfz-survey-widget-embed .wfz-survey-head { cursor: default; }
.wfz-survey-widget.wfz-survey-widget-noframe { box-shadow: none; border-radius: 0; }