/* Druckio – Utility & Typography Classes */

.heading-hero-highlight {
	color: var(--primary);
}

/*
 * Layout-Fix für Elementor Div Blocks in Column-Flex-Parents.
 * In Elementor: Erweitert → CSS-Klassen → z. B. „druckio-flex-fit“
 */
.druckio-flex-fit {
	align-self: start;
	width: fit-content;
	max-width: 100%;
}

/*
 * Druckio CTA (ersetzt generische Klassen wie „button“).
 * In Elementor: Erweitert → CSS-Klassen → „druckio-cta“
 */
.druckio-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	align-self: start;
	width: fit-content;
	max-width: 100%;
	padding: 20px 24px;
	font-family: var(--druckio-font-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
	text-decoration: none;
	background-color: var(--primary);
	border: 0;
	border-radius: var(--druckio-radius-button);
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--druckio-transition),
		color var(--druckio-transition),
		transform var(--druckio-transition);
}

.druckio-cta:hover,
.druckio-cta:focus,
.druckio-cta:focus-visible,
.druckio-cta:active,
.druckio-cta:visited {
	color: #ffffff;
}

.druckio-cta:hover {
	background-color: var(--druckio-color-accent-hover);
}

.druckio-cta:active {
	background-color: var(--druckio-color-accent-active);
	transform: scale(0.98);
}

.druckio-cta__label {
	color: inherit;
}