/* ============================================================
 * HD Contact Box — flexible Kontakt-/CTA-Box.
 * Optionales Icon (links/rechts/oben), Heading, Text und beliebig viele
 * Aktionen (Primaer-Button / Outline / Text-Link), je mit/ohne Icon.
 * Brand: Rajdhani, Tuerkis #0796a6 / #0d5460, Ink #1a1a1a.
 * ============================================================ */

.hd-contact {
	font-family: 'Rajdhani', Helvetica, Arial, sans-serif;
	color: var(--hd-contact-text, #1a1a1a);
	scroll-margin-top: 100px;   /* Anchor-Sprung (Floating-Icon) nicht unter den Header */
}

/* Karten-Stil (optional) */
.hd-contact--card {
	background: var(--hd-contact-bg, #ffffff);
	border: 1px solid rgba(13, 84, 96, 0.10);
	border-radius: var(--hd-contact-radius, 10px);   /* Page-Standard 10px, im Widget einstellbar */
	padding: clamp(28px, 4vw, 48px);
	box-shadow: 0 18px 40px -24px rgba(13, 84, 96, 0.40), 0 2px 6px -2px rgba(13, 84, 96, 0.12);
}

/* Layout: Icon + Body */
.hd-contact__inner {
	display: flex;
	align-items: flex-start;
	gap: clamp(20px, 3vw, 40px);
}
.hd-contact--icon-right .hd-contact__inner { flex-direction: row-reverse; }
.hd-contact--icon-top   .hd-contact__inner { flex-direction: column; }

/* zentrierte Variante */
.hd-contact--align-center .hd-contact__inner { align-items: center; text-align: center; }
.hd-contact--align-center.hd-contact--icon-left .hd-contact__inner,
.hd-contact--align-center.hd-contact--icon-right .hd-contact__inner { flex-direction: column; }
.hd-contact--align-center .hd-contact__actions { justify-content: center; }

/* Icon-Badge */
.hd-contact__icon {
	flex: 0 0 auto;
	width: var(--hd-contact-icon-size, 64px);
	height: var(--hd-contact-icon-size, 64px);
	border-radius: var(--hd-contact-radius, 10px);
	display: grid;
	place-items: center;
	color: #ffffff;
	background: linear-gradient(145deg, #0796a6, #0d5460);
	box-shadow: 0 10px 22px -8px rgba(7, 150, 166, 0.6);
}
.hd-contact__icon i { font-size: calc(var(--hd-contact-icon-size, 64px) * 0.44); line-height: 1; color: #fff; }
.hd-contact__icon svg { width: calc(var(--hd-contact-icon-size, 64px) * 0.47); height: calc(var(--hd-contact-icon-size, 64px) * 0.47); fill: currentColor; }

.hd-contact__body { flex: 1 1 auto; min-width: 0; }

.hd-contact__eyebrow {
	margin: 0 0 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 13px;
	color: var(--hd-contact-accent, #0796a6);
}
.hd-contact__heading {
	margin: 0 0 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.015em;
	line-height: 1.08;
	font-size: clamp(24px, 3.4vw, 38px);
	color: var(--hd-contact-heading, #1a1a1a);
	text-wrap: balance;
}
.hd-contact__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--hd-contact-text, #1a1a1a);
}
.hd-contact__text p { margin: 0 0 8px; }
.hd-contact__text p:last-child { margin-bottom: 0; }

/* Aktionen */
.hd-contact__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: clamp(20px, 2.6vw, 28px);
}
.hd-contact__action {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	border-radius: 8px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	cursor: pointer;
}
.hd-contact__action i  { font-size: 16px; line-height: 1; }
.hd-contact__action svg { width: 17px; height: 17px; fill: currentColor; }
.hd-contact__action--icon-right { flex-direction: row-reverse; }

/* Primaer = gefuellt */
.hd-contact__action--primary {
	background: var(--hd-contact-primary-bg, #0796a6);
	color: var(--hd-contact-primary-color, #ffffff);
	padding: 14px 28px;
	box-shadow: 0 10px 22px -12px rgba(7, 150, 166, 0.7);
}
.hd-contact__action--primary:hover { background: #0d5460; transform: translateY(-1px); }

/* Sekundaer = Outline */
.hd-contact__action--secondary {
	background: transparent;
	color: var(--hd-contact-accent, #0796a6);
	border: 2px solid currentColor;
	padding: 12px 26px;
}
.hd-contact__action--secondary:hover { background: rgba(7, 150, 166, 0.08); transform: translateY(-1px); }

/* Text-Link */
.hd-contact__action--link {
	color: var(--hd-contact-accent, #0796a6);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 6px 2px;
	border-radius: 0;
}
.hd-contact__action--link:hover { color: #0d5460; }

.hd-contact__action:focus-visible { outline: 3px solid rgba(7, 150, 166, 0.5); outline-offset: 3px; }

/* Mobile: Icon ueber den Text stapeln */
@media (max-width: 600px) {
	.hd-contact--icon-left .hd-contact__inner,
	.hd-contact--icon-right .hd-contact__inner { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.hd-contact__action { transition: none; }
	.hd-contact__action:hover { transform: none; }
}

/* --- Floating-Icon (FAB): schwebender Button, Klick scrollt zur Box --- */
.hd-contact__fab {
	position: fixed;
	z-index: 900;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #ffffff;
	background: linear-gradient(145deg, var(--hd-contact-fab-bg, #0796a6), #0d5460);
	box-shadow: 0 12px 28px -8px rgba(7, 150, 166, 0.7);
	text-decoration: none;
	transition: transform 0.25s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.hd-contact__fab:hover { transform: scale(1.08); }
.hd-contact__fab:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.7); outline-offset: 3px; }
.hd-contact__fab i { font-size: 24px; line-height: 1; color: #fff; }
.hd-contact__fab svg { width: 26px; height: 26px; fill: currentColor; }
.hd-contact__fab--bottom-right { right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); }
.hd-contact__fab--bottom-left  { left: clamp(16px, 3vw, 32px);  bottom: clamp(16px, 3vw, 32px); }
/* wird versteckt, sobald die Box im Viewport ist (per JS) */
.hd-contact__fab--hidden { opacity: 0; visibility: hidden; transform: scale(0.6); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.hd-contact__fab { transition: opacity 0.3s ease, visibility 0.3s ease; }
	.hd-contact__fab:hover { transform: none; }
}