/*
 * Migra-direct Anfrageformular.
 * Farben und Abstaende als Custom Properties, damit sie an einer Stelle
 * gepflegt werden — der Block wird auf einer Seite mit hellem Fond (#f4f7fa)
 * eingebettet und bringt seine eigene weisse Karte mit.
 */
.migra-form{
	--migra-brand:#0a4a6e;
	--migra-brand-dark:#083a58;
	--migra-accent:#9bd3d5;
	--migra-text:#1a2733;
	--migra-mute:#5b6b78;
	--migra-line:#cfd8e0;
	--migra-line-soft:#e1e8ed;
	--migra-soft:#f4f7fa;
	--migra-error:#c0392b;
	--migra-radius:8px;

	background:#fff;
	border-radius:12px;
	padding:2.75rem;
	box-shadow:0 1px 4px rgba(10,74,110,.06);
	max-width:780px;
	margin:0 auto;
	color:var(--migra-text);
}

/* ---------- Aufbau ---------- */

.migra-form .migra-intro{
	margin:0 0 2rem 0;
	padding:.9rem 1.1rem;
	background:var(--migra-soft);
	border-left:3px solid var(--migra-accent);
	border-radius:0 var(--migra-radius) var(--migra-radius) 0;
	font-size:.95rem;
	line-height:1.55;
	color:var(--migra-mute);
}

.migra-form fieldset{border:none;padding:0;margin:0 0 1.75rem 0;}
/* Achtung: padding-top eines Fieldsets landet UNTER der Legende, nicht ueber
   dem Abschnitt. Der Abstand muss deshalb ueber margin-top laufen, der
   Abstand zwischen Trennlinie und Ueberschrift ueber padding der Legende. */
.migra-form fieldset + fieldset{border-top:1px solid var(--migra-line-soft);margin-top:1.75rem;}
.migra-form fieldset + fieldset > legend{padding-top:1.4rem;}

.migra-form legend{
	display:flex;
	align-items:flex-start;
	gap:.6rem;
	font-size:1.1rem;
	font-weight:600;
	color:var(--migra-brand);
	margin-bottom:.55rem;
	padding:0;
	line-height:1.35;
	width:100%;
}
/* Der Titel bricht innerhalb seiner Spalte um; die Schrittnummer bleibt
   daneben stehen, statt allein auf einer eigenen Zeile zu landen. */
.migra-form .migra-legend-text{flex:1 1 auto;min-width:0;}
.migra-form .migra-legend-text .migra-optional{white-space:nowrap;}

/* Schrittnummer vor der Ueberschrift — gibt dem Formular eine Reihenfolge. */
.migra-form .migra-step{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:1.65rem;
	height:1.65rem;
	border-radius:50%;
	background:var(--migra-brand);
	color:#fff;
	font-size:.85rem;
	font-weight:700;
	line-height:1;
}

.migra-form .migra-help{font-size:.92rem;color:var(--migra-mute);margin:0 0 1.35rem 0;line-height:1.55;}
.migra-form .migra-hint{font-size:.85rem;color:var(--migra-mute);margin:.45rem 0 0 0;line-height:1.5;}
.migra-form .migra-hint--above{margin:0 0 .6rem 0;}
.migra-form .migra-hint a{color:var(--migra-brand);}

.migra-form .migra-field{margin-bottom:1.5rem;}
.migra-form .migra-field:last-child{margin-bottom:0;}

.migra-form label.migra-label,.migra-form span.migra-label{
	display:block;
	font-weight:600;
	color:var(--migra-text);
	margin-bottom:.45rem;
	font-size:.98rem;
	line-height:1.4;
}
.migra-form .migra-label .migra-req{color:var(--migra-error);margin-left:.15rem;}

/* „freiwillig" — nimmt Anfaengern die Sorge, etwas ausfuellen zu muessen. */
.migra-form .migra-optional{
	display:inline-block;
	margin-left:.5rem;
	padding:.1rem .45rem;
	border-radius:10px;
	background:var(--migra-soft);
	color:var(--migra-mute);
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.03em;
	text-transform:lowercase;
	vertical-align:middle;
}
.migra-form legend .migra-optional{text-transform:none;}

/* ---------- Eingabefelder ---------- */

.migra-form input[type=text],
.migra-form input[type=email],
.migra-form input[type=tel],
.migra-form input[type=number],
.migra-form textarea,
.migra-form select{
	width:100%;
	border:1px solid var(--migra-line);
	border-radius:var(--migra-radius);
	padding:.75rem .85rem;
	font-size:1rem;
	font-family:inherit;
	background:#fff;
	color:var(--migra-text);
	transition:border-color .15s,box-shadow .15s;
	box-sizing:border-box;
}
.migra-form input::placeholder,.migra-form textarea::placeholder{color:#9aa8b4;}
.migra-form input:focus,.migra-form textarea:focus,.migra-form select:focus{
	outline:none;
	border-color:var(--migra-brand);
	box-shadow:0 0 0 3px rgba(10,74,110,.14);
}
.migra-form textarea{min-height:6rem;resize:vertical;line-height:1.55;}

/* Auswahlfeld mit eigenem Pfeil, damit es nicht wie ein Fremdkoerper wirkt. */
.migra-form select{
	appearance:none;
	-webkit-appearance:none;
	padding-right:2.4rem;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235b6b78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 1rem center;
	cursor:pointer;
}
.migra-form select:invalid{color:var(--migra-mute);}

/* Das Raster traegt den Abstand nach unten; seine Felder selbst nicht,
   sonst summieren sich beide zu einer Luecke. */
.migra-form .migra-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.25rem;margin-bottom:1.5rem;}
.migra-form .migra-grid > .migra-field{margin-bottom:0;}
.migra-form .migra-grid:last-child{margin-bottom:0;}
.migra-form .migra-when[hidden]{display:none;}

/* ---------- Auswahlkarten (Radio / Checkbox) ---------- */

.migra-form .migra-option-list{display:grid;grid-template-columns:1fr;gap:.6rem;}
.migra-form .migra-option-list--split{grid-template-columns:1fr 1fr;}
.migra-form .migra-check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;}

.migra-form .migra-option{
	display:flex;
	align-items:flex-start;
	gap:.65rem;
	border:1px solid var(--migra-line);
	border-radius:var(--migra-radius);
	padding:.8rem .95rem;
	cursor:pointer;
	background:#fff;
	transition:border-color .15s,background .15s,box-shadow .15s;
}
.migra-form .migra-option:hover{border-color:var(--migra-brand);background:#f6fafd;}
.migra-form .migra-option:has(input:checked){
	border-color:var(--migra-brand);
	background:#f2f8fb;
	box-shadow:inset 0 0 0 1px var(--migra-brand);
}
.migra-form .migra-option:has(input:focus-visible){box-shadow:0 0 0 3px rgba(10,74,110,.14);}
.migra-form .migra-option input{margin-top:.15rem;flex-shrink:0;accent-color:var(--migra-brand);width:1.05rem;height:1.05rem;}
.migra-form .migra-option-text strong{display:block;color:var(--migra-text);font-size:.97rem;font-weight:600;line-height:1.4;}
.migra-form .migra-option-text span{display:block;font-size:.86rem;color:var(--migra-mute);margin-top:.2rem;line-height:1.45;}

/* Zielmaerkte als kompakte Chips statt voller Karten. */
.migra-form .migra-chip-row{display:flex;flex-wrap:wrap;gap:.5rem;}
.migra-form .migra-chip{
	display:inline-flex;
	align-items:center;
	gap:.45rem;
	border:1px solid var(--migra-line);
	border-radius:20px;
	padding:.45rem .85rem;
	cursor:pointer;
	font-size:.92rem;
	background:#fff;
	transition:border-color .15s,background .15s;
}
.migra-form .migra-chip:hover{border-color:var(--migra-brand);background:#f6fafd;}
.migra-form .migra-chip:has(input:checked){border-color:var(--migra-brand);background:#f2f8fb;font-weight:600;}
.migra-form .migra-chip input{accent-color:var(--migra-brand);margin:0;}

/* ---------- Aufklappbarer Block „Weitere Angaben" ---------- */

.migra-form .migra-more{
	margin-top:1.5rem;
	border:1px solid var(--migra-line-soft);
	border-radius:var(--migra-radius);
	background:#fcfdfe;
}
.migra-form .migra-more > summary{
	cursor:pointer;
	padding:.9rem 1.1rem;
	font-size:.95rem;
	font-weight:600;
	color:var(--migra-brand);
	list-style:none;
	display:flex;
	align-items:center;
	gap:.6rem;
	border-radius:var(--migra-radius);
}
.migra-form .migra-more > summary::-webkit-details-marker{display:none;}
.migra-form .migra-more > summary::before{
	content:"";
	flex:0 0 auto;
	width:.5rem;height:.5rem;
	border-right:2px solid currentColor;
	border-bottom:2px solid currentColor;
	transform:rotate(-45deg);
	transition:transform .15s;
	margin-left:.2rem;
}
.migra-form .migra-more[open] > summary::before{transform:rotate(45deg);}
.migra-form .migra-more > summary:hover{background:var(--migra-soft);}
.migra-form .migra-more > summary:focus-visible{outline:2px solid var(--migra-brand);outline-offset:2px;}
.migra-form .migra-more-body{padding:.35rem 1.1rem 1.25rem 1.1rem;border-top:1px solid var(--migra-line-soft);}

/* ---------- Datei-Upload ---------- */

.migra-form .migra-file{
	display:block;
	border:1.5px dashed var(--migra-line);
	border-radius:var(--migra-radius);
	padding:1.35rem 1.1rem;
	text-align:center;
	background:#fafcfd;
	cursor:pointer;
	color:var(--migra-mute);
	font-size:.95rem;
	transition:border-color .15s,color .15s,background .15s;
}
.migra-form .migra-file:hover{border-color:var(--migra-brand);color:var(--migra-brand);background:#f6fafd;}
.migra-form .migra-file:focus-within{border-color:var(--migra-brand);box-shadow:0 0 0 3px rgba(10,74,110,.14);}
.migra-form .migra-file.has-file{border-style:solid;border-color:var(--migra-brand);color:var(--migra-brand);background:#f2f8fb;font-weight:600;}
.migra-form .migra-file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}

/* ---------- Abschluss ---------- */

.migra-form .migra-required-note{font-size:.85rem;color:var(--migra-mute);margin:0 0 .85rem 0;text-align:center;}
.migra-form .migra-submit{
	width:100%;
	background:var(--migra-brand);
	color:#fff;
	border:none;
	border-radius:var(--migra-radius);
	padding:1rem 1.5rem;
	font-size:1.05rem;
	font-weight:600;
	cursor:pointer;
	transition:background .15s;
	font-family:inherit;
}
.migra-form .migra-submit:hover{background:var(--migra-brand-dark);}
.migra-form .migra-submit:focus-visible{outline:3px solid rgba(10,74,110,.35);outline-offset:2px;}
.migra-form .migra-submit[disabled]{opacity:.6;cursor:not-allowed;}
.migra-form .migra-privacy{font-size:.85rem;color:var(--migra-mute);margin-top:1rem;text-align:center;line-height:1.5;}
.migra-form .migra-privacy a{color:var(--migra-brand);}

.migra-form .migra-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}

/* ---------- Zustaende ---------- */

.migra-form.is-loading{opacity:.7;pointer-events:none;}
.migra-form .migra-field--error input,
.migra-form .migra-field--error textarea,
.migra-form .migra-field--error select{border-color:var(--migra-error);background:#fff5f3;}
.migra-form .migra-field--error .migra-option,
.migra-form .migra-field--error .migra-chip{border-color:var(--migra-error);}
.migra-form .migra-error-msg{margin:.45rem 0 0 0;color:var(--migra-error);font-size:.86rem;font-weight:500;}
.migra-form .migra-status{display:none;margin:1rem 0 0 0;padding:.85rem 1rem;border-radius:var(--migra-radius);font-size:.95rem;line-height:1.45;}
.migra-form .migra-status.is-success{display:block;background:#e8f5ee;color:#1e6a3a;border-left:3px solid #1e8a4a;}
.migra-form .migra-status.is-error{display:block;background:#fdecea;color:#922c20;border-left:3px solid var(--migra-error);}
.migra-form.is-success{padding:2rem;}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width:640px){
	.migra-form{padding:1.5rem;border-radius:10px;}
	.migra-form .migra-grid,
	.migra-form .migra-check-grid,
	.migra-form .migra-option-list--split{grid-template-columns:1fr;}
	.migra-form legend{font-size:1.05rem;}
}

@media (prefers-reduced-motion:reduce){
	.migra-form *,.migra-form *::before{transition:none !important;}
}

/* ---------- Antwort nach dem Absenden (Stufe 4) ---------- */

.migra-form .migra-reply{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--migra-line-soft);}
.migra-form .migra-reply h3{margin:0 0 .9rem 0;font-size:1.02rem;font-weight:640;color:var(--migra-brand);}
.migra-form .migra-reply ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem;}
.migra-form .migra-reply li{display:flex;flex-direction:column;gap:.2rem;padding-left:1.1rem;position:relative;}
.migra-form .migra-reply li::before{content:"";position:absolute;left:0;top:.55rem;width:.4rem;height:.4rem;border-radius:50%;background:var(--migra-accent);}
.migra-form .migra-reply-main{font-size:.98rem;line-height:1.5;color:var(--migra-text);font-weight:600;}
.migra-form .migra-reply-sub{font-size:.87rem;line-height:1.5;color:var(--migra-mute);font-weight:400;}
/* Die Lueckenliste ist der Hauptteil und bekommt deshalb das staerkere Zeichen. */
.migra-form .migra-reply-need li::before{background:var(--migra-brand);}
.migra-form .migra-reply-disclaimer{margin:1.5rem 0 0 0;padding:.9rem 1.1rem;background:var(--migra-soft);border-radius:var(--migra-radius);font-size:.85rem;line-height:1.55;color:var(--migra-mute);}
.migra-form .migra-optin{margin-top:1rem;}