/* ==========================================================================
   FHG Button (Primary + Secondary)
   Design: Figma FHG_Website / PrimaryButtons + SecondaryButton
   Colors: Dark Forest #0D2102, Sun #F4EE8F, Sand #DED7AE
   ========================================================================== */

/* --- Shared Base --- */

.fhg-btn {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.fhg-btn__label {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #0D2102;
	border-radius: 80px;
	padding: 11px 25px 13px;
	background-color: transparent;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.fhg-btn__text {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 30px;
	letter-spacing: -0.72px;
	text-align: center;
	white-space: nowrap;
	color: #0D2102;
	transition: color 0.3s ease;
}

/* ==========================================================================
   PRIMARY
   ========================================================================== */

.fhg-btn--primary {
	gap: 7px;
}

/* --- Arrow Circle (Primary only) --- */

.fhg-btn__arrow-circle {
	position: relative;
	width: 54px;
	height: 54px;
	border-radius: 100%;
	border: 1px solid #0D2102;
	overflow: hidden;
	flex-shrink: 0;
	color: #0D2102;
	background-color: transparent;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.fhg-btn__arrow {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.fhg-btn__arrow svg {
	width: 36px;
	height: 36px;
	display: block;
}

/* Clone: wartet unten-links ausserhalb des sichtbaren Kreises */
.fhg-btn__arrow--clone {
	transform: translate(-100%, 100%);
}

/* Primary hover: Original fliegt diagonal nach oben-rechts raus */
.fhg-btn--primary:hover .fhg-btn__arrow:not(.fhg-btn__arrow--clone) {
	transform: translate(100%, -100%);
}

/* Primary hover: Clone kommt von unten-links in die Mitte */
.fhg-btn--primary:hover .fhg-btn__arrow--clone {
	transform: translate(0, 0);
}

/* ==========================================================================
   SECONDARY
   ========================================================================== */

.fhg-btn--secondary .fhg-btn__label {
	border: none;
	background-color: #ffffff;
	border-radius: 63px;
	padding: 9px 20px 10px;
}

/* Secondary text erbt Typografie vom Elementor Global Preset (Button_primary) */

.fhg-btn--secondary .fhg-btn__inner {
	display: flex;
	align-items: center;
	gap: 15px;
}

/* --- Inline Arrow (Secondary) --- */

.fhg-btn__arrow-inline {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: #0D2102;
	transition: transform 0.3s ease, color 0.3s ease;
}

.fhg-btn__arrow-inline svg {
	width: 21px;
	height: auto;
	display: block;
}

/* Secondary hover: bg becomes Sand, arrow stretches right */
.fhg-btn--secondary:hover .fhg-btn__label {
	background-color: #DED7AE;
}

.fhg-btn--secondary:hover .fhg-btn__arrow-inline {
	transform: translateX(4px);
}

/* ==========================================================================
   FOCUS VISIBLE
   ========================================================================== */

.fhg-btn:focus-visible .fhg-btn__label {
	outline: 2px solid #0D2102;
	outline-offset: 2px;
}

.fhg-btn:focus-visible .fhg-btn__arrow-circle {
	outline: 2px solid #0D2102;
	outline-offset: 2px;
}