/* My Story Formular – Handy zuerst. Nur auf Seiten mit dem Widget geladen. */
.msf {
	--msf-label: inherit;
	--msf-input-text: #111111;
	--msf-input-bg: #ffffff;
	--msf-input-border: #6b6b6b;
	--msf-radius: 6px;
	--msf-accent: #ff8f00;
	--msf-error: #b00020;
	--msf-btn-text: #111111;
	--msf-btn-bg: #ff8f00;
	--msf-btn-bg-hover: #e07f00;
	--msf-gap: 20px;
	--msf-tap: 48px;
	width: 100%;
	max-width: 760px;
	margin-inline: auto;
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}
.elementor-widget-msf_form { width: 100%; min-width: 0; }
.msf *, .msf *::before, .msf *::after { box-sizing: border-box; }
.msf-pending [data-show-if-field] { display: none; }

.msf-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.msf [hidden] { display: none !important; }

.msf-notice, .msf-admin-note, .msf-privacy-line { font-size: 14px; line-height: 1.55; }
.msf-notice { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--msf-input-border); border-radius: var(--msf-radius); }
.msf-admin-note { margin: 0 0 16px; padding: 12px 16px; background: #fff3cd; color: #3a2d00; border: 1px solid #e0c36b; border-radius: var(--msf-radius); }
.msf-unavailable { padding: 16px; border: 1px solid var(--msf-input-border); border-radius: var(--msf-radius); }
.msf-req-note { margin: 0 0 12px; font-size: 14px; }

.msf-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.msf-step-title { font-size: 1.35em; font-weight: 700; margin: 0 0 16px; padding: 0; scroll-margin-top: 90px; }
.msf-step-title:focus { outline: none; }
.msf-progress { margin: 0 0 6px; font-size: 14px; }
.msf-progress-bar { height: 6px; background: rgba(127, 127, 127, 0.3); border-radius: 3px; margin: 0 0 18px; overflow: hidden; }
.msf-progress-bar span { display: block; height: 100%; background: var(--msf-accent); transition: width 0.25s; }

.msf-grid { display: flex; flex-wrap: wrap; gap: var(--msf-gap); }
.msf-field, .msf-heading, .msf-html { width: 100%; min-width: 0; }
.msf-heading { font-size: 1.15em; margin: 12px 0 0; }
.msf-html ul { padding-left: 1.2em; margin: 0.5em 0; }
.msf-html li { margin: 0 0 0.45em; }
@media (min-width: 640px) {
	.msf-w-50 { width: calc(50% - var(--msf-gap) / 2); }
	.msf-w-33 { width: calc(33.333% - var(--msf-gap) * 2 / 3); }
	.msf-w-66 { width: calc(66.666% - var(--msf-gap) / 3); }
	.msf-w-25 { width: calc(25% - var(--msf-gap) * 3 / 4); }
	.msf-w-75 { width: calc(75% - var(--msf-gap) / 4); }
}

.msf-label { display: block; margin: 0 0 6px; padding: 0; color: var(--msf-label); font-weight: 600; }
.msf-req { color: var(--msf-error); margin-left: 2px; }
.msf-optional { font-weight: 400; font-size: 0.9em; opacity: 0.8; }
.msf-help { margin: 0 0 8px; font-size: 14px; opacity: 0.85; }

.msf-input {
	display: block; width: 100%; min-height: var(--msf-tap);
	padding: 10px 14px; font: inherit; font-size: 16px; /* 16 px verhindert das Heranzoomen am iPhone */
	color: var(--msf-input-text); background: var(--msf-input-bg);
	border: 2px solid var(--msf-input-border); border-radius: var(--msf-radius);
	appearance: none; -webkit-appearance: none;
}
.msf-textarea { min-height: 130px; resize: vertical; }
.msf-select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.msf input[type="date"].msf-input { min-height: var(--msf-tap); }
.msf-input:focus, .msf-canvas:focus-visible, .msf-btn:focus-visible, .msf-choice input:focus-visible + span, .msf-consent input:focus-visible, .msf-swatch input:focus-visible + .msf-swatch-dot {
	outline: 3px solid var(--msf-accent); outline-offset: 2px;
}
.msf-field.has-error .msf-input, .msf-field.has-error .msf-canvas { border-color: var(--msf-error); }
.msf-error { margin: 6px 0 0; color: var(--msf-error); font-size: 15px; font-weight: 600; }
.msf-error::before { content: "\26A0\FE0E  "; }

.msf-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.msf-choices { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.msf-group-checkboxes .msf-choices, .msf-group-radio .msf-choices { flex-direction: column; flex-wrap: nowrap; }
@media (min-width: 640px) { .msf-group-radio .msf-choices { flex-direction: row; flex-wrap: wrap; } }
.msf-choice { display: flex; align-items: center; gap: 12px; min-height: var(--msf-tap); padding: 6px 14px; border: 2px solid var(--msf-input-border); border-radius: var(--msf-radius); cursor: pointer; background: var(--msf-input-bg); color: var(--msf-input-text); }
.msf-choice input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--msf-accent); }
.msf-choice:has(input:checked) { border-color: var(--msf-accent); box-shadow: inset 0 0 0 1px var(--msf-accent); }
.msf-gender .msf-choice { min-width: 130px; }

.msf-consent { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.msf-consent input { width: 26px; height: 26px; flex: none; margin: 2px 0 0; accent-color: var(--msf-accent); }
.msf-consent label { min-height: var(--msf-tap); padding-top: 2px; cursor: pointer; }

.msf-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; min-height: var(--msf-tap); cursor: pointer; text-align: center; font-size: 13px; }
.msf-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.msf-swatch-dot { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #8a8a8a; display: block; }
.msf-swatch input:checked + .msf-swatch-dot { border-color: var(--msf-accent); box-shadow: 0 0 0 3px var(--msf-accent); }
.msf-swatch-text { display: block; line-height: 1.2; }

.msf-file-input { display: block; width: 100%; min-height: var(--msf-tap); font: inherit; }
.msf-file-input::file-selector-button { min-height: 44px; padding: 8px 16px; margin-right: 12px; font: inherit; font-weight: 600; color: var(--msf-btn-text); background: var(--msf-btn-bg); border: 0; border-radius: var(--msf-radius); cursor: pointer; }
.msf-file-list { list-style: none; margin: 8px 0 0; padding: 0; }
.msf-file-list li { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid rgba(127, 127, 127, 0.4); word-break: break-all; }
.msf-file-list button { margin-left: auto; flex: none; }

.msf-pad { position: relative; }
.msf-canvas { display: block; width: 100%; background: #ffffff; border: 2px solid var(--msf-input-border); border-radius: var(--msf-radius); touch-action: none; /* Zeichnen verschiebt die Seite nicht */ user-select: none; -webkit-user-select: none; cursor: crosshair; }
.msf-canvas-sig { aspect-ratio: 5 / 2; }
.msf-canvas-body { aspect-ratio: 400 / 490; max-width: 440px; margin-inline: auto; }
.msf-pad > .msf-pad-clear { margin-top: 8px; }
.msf-pad-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; justify-content: center; }

.msf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--msf-tap); min-width: 120px; padding: 10px 24px; font: inherit; font-weight: 700; color: var(--msf-btn-text); background: var(--msf-btn-bg); border: 2px solid transparent; border-radius: var(--msf-radius); cursor: pointer; text-align: center; }
.msf-btn:hover { background: var(--msf-btn-bg-hover); }
.msf-btn[disabled] { opacity: 0.6; cursor: wait; }
.msf-btn-secondary, .msf-btn-small { background: transparent; color: inherit; border-color: var(--msf-input-border); }
.msf-btn-secondary:hover, .msf-btn-small:hover { background: rgba(127, 127, 127, 0.15); }
.msf-btn-small { min-width: 0; padding: 8px 16px; font-weight: 600; }

.msf-actions { display: flex; gap: 12px; margin-top: 24px; flex-direction: column-reverse; }
.msf-actions .msf-btn { width: 100%; }
@media (min-width: 640px) { .msf-actions { flex-direction: row; justify-content: flex-start; } .msf-actions .msf-btn { width: auto; } }
.msf-privacy-line { margin: 20px 0 0; }

.msf-summary, .msf-fail { margin: 0 0 16px; padding: 12px 16px; border: 2px solid var(--msf-error); border-radius: var(--msf-radius); color: var(--msf-error); font-weight: 600; }
.msf-fail { margin-top: 16px; }
.msf-success { padding: 20px; border: 2px solid var(--msf-accent); border-radius: var(--msf-radius); font-weight: 600; }
.msf-success:focus { outline: 3px solid var(--msf-accent); }

@media (prefers-reduced-motion: reduce) { .msf-progress-bar span { transition: none; } }

.msf-gender { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }

.msf-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }