/**
 * heytalo Portal Button – Frontend-Styles
 * Markenfarben übernommen von heytalo.de.
 *
 * Hinweis: Die wichtigsten Eigenschaften sind bewusst mit !important und
 * über den Wrapper gescoped, damit aggressive Themes (z. B. Divi, die ihre
 * Schrift teils mit !important erzwingen) den Button nicht verfälschen.
 */

.heytalo-btn-wrap {
	--ht-blue: #144673;
	--ht-blue-dark: #103a60;
	--ht-tint: #e4eef6;
	display: block;
}

.heytalo-btn-wrap--center {
	text-align: center;
}

.heytalo-btn-wrap--right {
	text-align: right;
}

.heytalo-btn-wrap a.heytalo-btn {
	--ht-blue: #144673;
	--ht-blue-dark: #103a60;
	--ht-tint: #e4eef6;

	display: inline-flex !important;
	align-items: center;
	gap: 0.6em;
	padding: 0.75em 1.4em;
	margin: 0;
	font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: 1rem;
	line-height: 1.2 !important;
	text-decoration: none !important;
	white-space: nowrap;
	border: 2px solid transparent !important;
	border-radius: 10px !important;
	cursor: pointer;
	box-shadow: none;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.05s ease;
}

.heytalo-btn-wrap .heytalo-btn:hover,
.heytalo-btn-wrap .heytalo-btn:focus,
.heytalo-btn-wrap .heytalo-btn:active {
	text-decoration: none !important;
}

.heytalo-btn-wrap .heytalo-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(20, 70, 115, 0.35);
}

.heytalo-btn-wrap .heytalo-btn:active {
	transform: translateY(1px);
}

.heytalo-btn-wrap .heytalo-btn__icon {
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
	display: inline-block;
}

.heytalo-btn-wrap .heytalo-btn__label {
	display: inline-block;
}

/*
 * Wichtig: Die Textfarbe wird für ALLE Link-Zustände erzwungen – inklusive
 * :visited. Sonst färben manche Themes besuchte Links um (z. B. schwarz),
 * während das SVG-Icon (fill: currentColor) aus Datenschutzgründen NICHT auf
 * :visited reagieren darf – dann wäre der Text eine andere Farbe als das Icon.
 * Label und Icon/Logo erben/folgen der erzwungenen Farbe.
 */
.heytalo-btn-wrap a.heytalo-btn .heytalo-btn__label {
	color: inherit !important;
}

.heytalo-btn-wrap a.heytalo-btn .heytalo-btn__icon,
.heytalo-btn-wrap a.heytalo-btn .heytalo-btn__logo {
	fill: currentColor !important;
}

/* Variante: Primär (blau) */
.heytalo-btn-wrap a.heytalo-btn--primary,
.heytalo-btn-wrap a.heytalo-btn--primary:link,
.heytalo-btn-wrap a.heytalo-btn--primary:visited {
	background-color: var(--ht-blue) !important;
	color: #ffffff !important;
	border-color: transparent !important;
	box-shadow: 0 2px 6px rgba(20, 70, 115, 0.25);
}

.heytalo-btn-wrap a.heytalo-btn--primary:hover,
.heytalo-btn-wrap a.heytalo-btn--primary:focus,
.heytalo-btn-wrap a.heytalo-btn--primary:active {
	background-color: var(--ht-blue-dark) !important;
	color: #ffffff !important;
}

/* Variante: Weiß */
.heytalo-btn-wrap a.heytalo-btn--white,
.heytalo-btn-wrap a.heytalo-btn--white:link,
.heytalo-btn-wrap a.heytalo-btn--white:visited {
	background-color: #ffffff !important;
	color: var(--ht-blue) !important;
	border-color: var(--ht-tint) !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.heytalo-btn-wrap a.heytalo-btn--white:hover,
.heytalo-btn-wrap a.heytalo-btn--white:focus,
.heytalo-btn-wrap a.heytalo-btn--white:active {
	background-color: var(--ht-tint) !important;
	color: var(--ht-blue-dark) !important;
}

/* Variante: Outline */
.heytalo-btn-wrap a.heytalo-btn--outline,
.heytalo-btn-wrap a.heytalo-btn--outline:link,
.heytalo-btn-wrap a.heytalo-btn--outline:visited {
	background-color: transparent !important;
	color: var(--ht-blue) !important;
	border-color: var(--ht-blue) !important;
}

.heytalo-btn-wrap a.heytalo-btn--outline:hover,
.heytalo-btn-wrap a.heytalo-btn--outline:focus,
.heytalo-btn-wrap a.heytalo-btn--outline:active {
	background-color: var(--ht-blue) !important;
	color: #ffffff !important;
}

/* Volles Logo (Icon + Wortmarke) im Logo-Modus */
.heytalo-btn-wrap a.heytalo-btn--logo {
	padding: 0.7em 1.4em;
}

.heytalo-btn-wrap a.heytalo-btn .heytalo-btn__logo {
	height: 1.4em;
	width: auto;
	display: inline-block;
}

/* Erklärungstext unter dem Button */
.heytalo-btn-wrap p.heytalo-btn__desc {
	margin: 0.85em 0 0;
	padding: 0;
	max-width: 44em;
	font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-weight: 500 !important;
	font-size: 0.9rem;
	line-height: 1.55;
	color: #51687a;
}

/*
 * Ohne Karte: Erklärungstext folgt der Ausrichtung (direktes Kind des Wrappers).
 * Der "> "-Selektor stellt sicher, dass die Karten-Variante (Text im inneren
 * .heytalo-card) hiervon NICHT betroffen ist – dort bleibt der Text linksbündig.
 * !important, da viele Themes Absätze hart auf text-align:left setzen.
 */
.heytalo-btn-wrap--center > .heytalo-btn__desc {
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}

.heytalo-btn-wrap--right > .heytalo-btn__desc {
	margin-left: auto !important;
	margin-right: 0 !important;
	text-align: right !important;
}

/* ===== Rahmen-Stil "Karte" (invertiert: blaue Box, weißer Button) =====
 * Die Karte ist ein eigenes inline-block-Element. Dadurch zentriert/rechts-
 * bündig sie der äußere Wrapper zuverlässig per text-align – auch dann, wenn
 * der Button in einem <span> o. ä. steckt (margin:auto wäre dort unsicher).
 */
.heytalo-btn-wrap .heytalo-card {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	max-width: 40em;
	background: var(--ht-blue);
	border: 0;
	border-radius: 16px;
	padding: 24px 28px;
	box-shadow: 0 8px 28px rgba(20, 70, 115, 0.22);
}

/*
 * In der blauen Karte ist der Button immer weiß (invertiert) – unabhängig von
 * der gewählten Stil-Variante, damit er sich klar abhebt.
 */
.heytalo-btn-wrap .heytalo-card a.heytalo-btn,
.heytalo-btn-wrap .heytalo-card a.heytalo-btn:link,
.heytalo-btn-wrap .heytalo-card a.heytalo-btn:visited {
	background-color: #ffffff !important;
	color: var(--ht-blue) !important;
	border-color: #ffffff !important;
	/* Dunkelblauer, markengerechter Schatten – passt auf die blaue Karte (kein Grau). */
	box-shadow: 0 4px 12px rgba(9, 30, 53, 0.40) !important;
}

.heytalo-btn-wrap .heytalo-card a.heytalo-btn:hover,
.heytalo-btn-wrap .heytalo-card a.heytalo-btn:focus,
.heytalo-btn-wrap .heytalo-card a.heytalo-btn:active {
	background-color: var(--ht-tint) !important;
	color: var(--ht-blue-dark) !important;
	border-color: var(--ht-tint) !important;
}

/* Kleine Überschrift "heytalo Portal" – hell auf Blau */
.heytalo-btn-wrap .heytalo-card .heytalo-card__eyebrow {
	display: block;
	margin: 16px 0 5px;
	font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 0.72rem;
	line-height: 1.2;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #9fc1da !important;
}

/* Erklärungstext in der Karte – hell auf Blau, standardmäßig linksbündig */
.heytalo-btn-wrap .heytalo-card .heytalo-btn__desc {
	margin: 0;
	max-width: none;
	text-align: left !important;
	color: #e4eef6 !important;
}

/*
 * In der Karte folgt der gesamte Inhalt (Button, Überschrift, Text) der
 * gewählten Ausrichtung, damit Button und Text dieselbe Kante teilen.
 */
.heytalo-btn-wrap--center .heytalo-card {
	text-align: center;
}

.heytalo-btn-wrap--right .heytalo-card {
	text-align: right;
}

.heytalo-btn-wrap--center .heytalo-card .heytalo-btn__desc {
	text-align: center !important;
}

.heytalo-btn-wrap--right .heytalo-card .heytalo-btn__desc {
	text-align: right !important;
}