/**
 * SDH Kontakt — Ansprechpartner-Karte, Raster und Kontaktformular.
 *
 * Global geladen: Die Karte steht auch in der per AJAX nachgeladenen
 * Vorteil-Detailansicht, und nachgeladenes HTML kann kein Stylesheet mehr
 * anfordern.
 *
 * Alles Einstellbare läuft über Properties am Wrapper (--cc-* Karte/Raster,
 * --kf-* Formular). Der Rückfallwert im var() ist die Vorgabe.
 * Keine runden Ecken (Kundenvorgabe) — einzige Ausnahme: Ladeanzeige.
 */

/* ==========================================================================
   Ansprechpartner — Raster
   ========================================================================== */
.sdh-cc-grid {
	--cc-columns-fallback: 3;
	display: grid;
	grid-template-columns: repeat(var(--cc-columns, var(--cc-columns-fallback)), minmax(0, 1fr));
	gap: var(--cc-gap, 20px);
}

@media (max-width: 1024px) {
	.sdh-cc-grid { --cc-columns-fallback: 2; }
}

@media (max-width: 767px) {
	.sdh-cc-grid { --cc-columns-fallback: 1; }
}

.sdh-cc-empty {
	margin: 0;
	color: var(--sdh-gray-600, #6c757d);
}

/* ==========================================================================
   Ansprechpartner — Karte
   Vorgaben entsprechen den Karten der Vorteil-Detailansicht (.sdh-vd-card),
   damit beide Orte gleich aussehen. In der Detailansicht trägt die Karte
   zusätzlich deren Klassen und übernimmt so auch deren Stil-Einstellungen.
   ========================================================================== */
.sdh-contact-card {
	display: flex;
	flex-direction: column;
	background: var(--cc-card-bg, #fff);
	border: 1px solid var(--cc-border, var(--sdh-gray-200, #e9ecef));
	border-radius: var(--cc-card-radius, 0);
	overflow: hidden;
}

.sdh-contact-card__head {
	padding: var(--cc-head-padding, 18px 24px);
	background: var(--cc-head-bg, transparent);
	border-bottom: 1px solid var(--cc-border, var(--sdh-gray-200, #e9ecef));
}

.sdh-contact-card__heading {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--cc-head-color, var(--sdh-gray-800, #343a40));
}

.sdh-contact-card__body {
	display: flex;
	flex-direction: column;
	padding: var(--cc-body-padding, 24px);
	flex: 1 1 auto;
}

.sdh-contact-card__person {
	display: flex;
	align-items: center;
	gap: var(--cc-person-gap, 16px);
}

.sdh-contact-card__photo {
	flex: 0 0 auto;
	width: var(--cc-photo-size, 72px);
	height: var(--cc-photo-size, 72px);
	border-radius: var(--cc-photo-radius, 0);
	overflow: hidden;
	background: var(--sdh-gray-100, #f8f9fa);
	color: var(--sdh-gray-400, #ced4da);
}

.sdh-contact-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sdh-contact-card__photo--empty {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sdh-contact-card__photo--empty svg {
	width: 55%;
	height: 55%;
}

.sdh-contact-card__who {
	min-width: 0;
}

.sdh-contact-card__name {
	margin: 0 0 var(--cc-name-spacing, 2px);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--cc-name-color, var(--sdh-gray-800, #343a40));
	overflow-wrap: anywhere;
}

.sdh-contact-card__position {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--cc-position-color, var(--sdh-gray-600, #6c757d));
}

/* Trenner: beidseitig 20px (Projektregel) */
.sdh-contact-card__lines {
	list-style: none;
	margin: 20px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--cc-border, var(--sdh-gray-200, #e9ecef));
	display: flex;
	flex-direction: column;
	gap: var(--cc-lines-gap, 10px);
}

.sdh-contact-card__line {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--cc-line-color, var(--sdh-gray-800, #343a40));
	overflow-wrap: anywhere;
}

.sdh-contact-card__icon {
	flex: 0 0 auto;
	width: var(--cc-icon-size, 16px);
	height: var(--cc-icon-size, 16px);
	margin-top: 1px;
	color: var(--cc-icon-color, var(--sdh-accent, #be1623));
}

.sdh-contact-card__line a {
	color: var(--cc-link-color, inherit);
	text-decoration: none;
}

.sdh-contact-card__line a:hover,
.sdh-contact-card__line a:focus-visible {
	color: var(--cc-link-hover, var(--sdh-accent, #be1623));
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   In der Vorteil-Detailansicht: Werte der Vorteilswelt übernehmen (--vd-*),
   damit die Karte den Stil-Einstellungen folgt wie jede Karte dort.
   -------------------------------------------------------------------------- */
.sdh-vd .sdh-contact-card.sdh-vd-card {
	background: var(--vd-card-bg, #fff);
	border-color: var(--vd-border);
	border-radius: var(--vd-radius);
}

.sdh-vd .sdh-contact-card__head.sdh-vd-card-head {
	padding: var(--vd-head-padding, 18px 24px);
	background: var(--vd-head-bg, transparent);
	border-bottom-color: var(--vd-border);
}

.sdh-vd .sdh-contact-card__head .sdh-contact-card__heading {
	color: var(--vd-head-color, var(--vd-ink));
}

.sdh-vd .sdh-contact-card__body.sdh-vd-card-body {
	padding: var(--vd-body-padding, 24px);
}

.sdh-vd .sdh-contact-card__lines {
	border-top-color: var(--vd-border);
}

.sdh-vd .sdh-contact-card__icon,
.sdh-vd .sdh-contact-card__line a:hover,
.sdh-vd .sdh-contact-card__line a:focus-visible {
	color: var(--vd-accent);
}

/* Einlösen über den Ansprechpartner: Karte im Stil der Einlöse-Karte
   (roter Rahmen + roter Kopf, Werte aus den Stil-Einstellungen der
   Vorteilswelt). Muss nach den Regeln oben stehen und sie überstimmen. */
.sdh-vd .sdh-contact-card.sdh-vd-action {
	background: var(--vd-action-bg, #fff);
	border-color: var(--vd-action-border, var(--vd-accent));
}

.sdh-vd .sdh-vd-action .sdh-contact-card__head.sdh-vd-card-head {
	background: var(--vd-action-head-bg, var(--vd-accent));
	border-bottom-color: var(--vd-action-head-bg, var(--vd-accent));
}

.sdh-vd .sdh-vd-action .sdh-contact-card__heading {
	color: var(--vd-action-head-color, #fff);
}

/* Hinweis über der Person */
.sdh-contact-card__note {
	margin: 0 0 20px;
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--sdh-gray-800, #343a40);
}

.sdh-vd .sdh-contact-card__note {
	color: var(--vd-ink);
}

/* ==========================================================================
   Kontaktformular
   ========================================================================== */
.sdh-kf {
	max-width: var(--kf-max-width, none);
}

.sdh-kf__heading {
	margin: 0 0 var(--kf-heading-spacing, 8px);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--kf-heading-color, var(--sdh-gray-800, #343a40));
}

.sdh-kf__intro {
	margin: 0 0 var(--kf-intro-spacing, 20px);
	color: var(--kf-intro-color, var(--sdh-gray-600, #6c757d));
}

.sdh-kf__form {
	display: flex;
	flex-direction: column;
	gap: var(--kf-gap, 18px);
}

.sdh-kf__form[hidden] {
	display: none;
}

.sdh-kf__field {
	display: flex;
	flex-direction: column;
	gap: var(--kf-label-gap, 6px);
}

.sdh-kf__label {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--kf-label-color, var(--sdh-gray-800, #343a40));
}

.sdh-kf__required {
	color: var(--kf-required-color, var(--sdh-accent, #be1623));
}

.sdh-kf__input {
	width: 100%;
	box-sizing: border-box;
	padding: var(--kf-input-padding, 12px 14px);
	font: inherit;
	font-size: 0.95rem;
	color: var(--kf-input-color, var(--sdh-gray-800, #343a40));
	background: var(--kf-input-bg, #fff);
	border: var(--kf-input-border-width, 1px) solid var(--kf-input-border, var(--sdh-gray-300, #dee2e6));
	border-radius: var(--kf-input-radius, 0);
	outline: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.sdh-kf__select {
	min-height: var(--kf-input-height, 46px);
}

.sdh-kf__textarea {
	min-height: var(--kf-textarea-height, 160px);
	resize: vertical;
}

.sdh-kf__input::placeholder {
	color: var(--kf-placeholder-color, var(--sdh-gray-500, #adb5bd));
	opacity: 1;
}

/* Fokus: Rahmen + optionaler Ring (Vorgabe 0). Ohne Rahmenwechsel wäre der
   Fokus bei Tastaturbedienung nicht erkennbar. */
.sdh-kf__input:focus,
.sdh-kf__input:focus-visible {
	border-color: var(--kf-focus-border, var(--sdh-accent, #be1623));
	background: var(--kf-focus-bg, var(--kf-input-bg, #fff));
	box-shadow: 0 0 0 var(--kf-focus-ring, 0) var(--kf-focus-ring-color, rgba(190, 22, 35, 0.2));
}

.sdh-kf__input.is-invalid {
	border-color: var(--kf-error-color, #b42318);
}

.sdh-kf__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sdh-kf__note {
	margin: 0;
	font-size: 0.8rem;
	color: var(--kf-note-color, var(--sdh-gray-600, #6c757d));
}

.sdh-kf__actions {
	display: flex;
	justify-content: var(--kf-button-align, flex-start);
}

.sdh-kf__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: var(--kf-button-width, auto);
	padding: var(--kf-button-padding, 12px 28px);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--kf-button-color, #fff);
	background: var(--kf-button-bg, var(--sdh-accent, #be1623));
	border: 1px solid var(--kf-button-border, var(--kf-button-bg, var(--sdh-accent, #be1623)));
	border-radius: var(--kf-button-radius, 0);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.sdh-kf__submit:hover {
	color: var(--kf-button-color-hover, var(--kf-button-color, #fff));
	background: var(--kf-button-bg-hover, var(--sdh-accent-dark, #9a1019));
	border-color: var(--kf-button-border-hover, var(--kf-button-bg-hover, var(--sdh-accent-dark, #9a1019)));
}

.sdh-kf__submit:active {
	color: var(--kf-button-color-active, var(--kf-button-color, #fff));
	background: var(--kf-button-bg-active, var(--sdh-accent-dark, #9a1019));
	border-color: var(--kf-button-border-active, var(--kf-button-bg-active, var(--sdh-accent-dark, #9a1019)));
	transform: translateY(1px);
}

.sdh-kf__submit:focus-visible {
	outline: var(--kf-button-focus-width, 2px) solid var(--kf-button-focus-color, var(--sdh-gray-800, #343a40));
	outline-offset: 2px;
}

.sdh-kf__submit:disabled,
.sdh-kf__submit.is-busy {
	color: var(--kf-button-color-disabled, #fff);
	background: var(--kf-button-bg-disabled, var(--sdh-gray-400, #ced4da));
	border-color: var(--kf-button-bg-disabled, var(--sdh-gray-400, #ced4da));
	cursor: not-allowed;
	transform: none;
}

/* Ladeanzeige: einzige erlaubte Rundung */
.sdh-kf__spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: sdh-kf-spin 0.6s linear infinite;
}

.sdh-kf__submit.is-busy .sdh-kf__spinner {
	display: inline-block;
}

@keyframes sdh-kf-spin {
	to { transform: rotate(360deg); }
}

/* Meldungen */
.sdh-kf__msg {
	padding: var(--kf-msg-padding, 14px 18px);
	border: 1px solid transparent;
	border-left-width: 4px;
	border-radius: var(--kf-msg-radius, 0);
	font-size: 0.95rem;
	line-height: 1.5;
}

.sdh-kf__msg[hidden] {
	display: none;
}

.sdh-kf__msg--success {
	color: var(--kf-success-color, #1e8449);
	background: var(--kf-success-bg, #eafaf1);
	border-color: var(--kf-success-border, #27ae60);
}

.sdh-kf__msg--error {
	color: var(--kf-error-color, #b42318);
	background: var(--kf-error-bg, #fdecea);
	border-color: var(--kf-error-border, #d92d20);
}