/**

 * Buttons & CTAs – warmes Orange (abgestimmt auf Titelfoto / Spielblöcke, ca. #F58220).

 */



:root {

	--site-accent: #ea7619;

	--site-accent-light: #ffa040;

	--site-accent-deep: #c9550e;

	--site-accent-soft: #fff5eb;

	--site-btn-shadow: 0 2px 10px rgba(185, 75, 15, 0.28);

	--site-btn-shadow-hover: 0 4px 16px rgba(185, 75, 15, 0.36);

	--site-btn-inset: inset 0 1px 0 rgba(255, 255, 255, 0.28);

}



/* Primär-CTA (Links im Fließtext) */

.btn-site-primary,

.content-main a.btn-site-primary {

	display: inline-block;

	margin-top: 0.5rem;

	padding: 0.85em 1.75em;

	border-radius: 10px;

	font-size: 1.05em;

	font-weight: 600;

	line-height: 1.3;

	text-align: center;

	text-decoration: none !important;

	color: #fff !important;

	background: linear-gradient(

		180deg,

		var(--site-accent-light) 0%,

		var(--site-accent) 42%,

		var(--site-accent-deep) 100%

	);

	border: 1px solid rgba(255, 255, 255, 0.25);

	/* Unterstreich-Schatten bei .content-main a aushebeln */

	box-shadow: var(--site-btn-inset), var(--site-btn-shadow) !important;

	-webkit-box-shadow: var(--site-btn-inset), var(--site-btn-shadow) !important;

	cursor: pointer;

	position: relative;

	z-index: 1;

	transition:

		transform 0.15s ease,

		box-shadow 0.15s ease;

}



/* Link-Zustände: Theme-Unterstrich ignorieren */

.content-main a.btn-site-primary:link,

.content-main a.btn-site-primary:visited {

	color: #fff !important;

	-webkit-box-shadow: var(--site-btn-inset), var(--site-btn-shadow) !important;

	box-shadow: var(--site-btn-inset), var(--site-btn-shadow) !important;

}



.btn-site-primary:hover,

.content-main a.btn-site-primary:hover {

	color: #fff !important;

	background: linear-gradient(

		180deg,

		var(--site-accent) 0%,

		var(--site-accent-deep) 48%,

		#a84308 100%

	);

	-webkit-box-shadow:

		inset 0 1px 0 rgba(255, 255, 255, 0.2),

		var(--site-btn-shadow-hover) !important;

	box-shadow:

		inset 0 1px 0 rgba(255, 255, 255, 0.2),

		var(--site-btn-shadow-hover) !important;

	transform: translateY(-1px);

}



.btn-site-primary:focus,

.btn-site-primary:focus-visible,

.content-main a.btn-site-primary:focus,

.content-main a.btn-site-primary:focus-visible {

	outline: 2px solid var(--site-accent-deep);

	outline-offset: 3px;

	box-shadow: var(--site-btn-inset), var(--site-btn-shadow-hover) !important;

	-webkit-box-shadow: var(--site-btn-inset), var(--site-btn-shadow-hover) !important;

}



.btn-site-primary:active,

.content-main a.btn-site-primary:active {

	transform: translateY(0);

	-webkit-box-shadow: var(--site-btn-inset), var(--site-btn-shadow) !important;

	box-shadow: var(--site-btn-inset), var(--site-btn-shadow) !important;

}



/* Gutenberg-Buttons */

.content-block-button__link,

.content-block-file__button {

	border-radius: 10px !important;

	font-weight: 600 !important;

	border: 1px solid rgba(255, 255, 255, 0.25) !important;

	background: linear-gradient(

		180deg,

		var(--site-accent-light) 0%,

		var(--site-accent) 42%,

		var(--site-accent-deep) 100%

	) !important;

	color: #fff !important;

	box-shadow: var(--site-btn-inset), var(--site-btn-shadow) !important;

	-webkit-box-shadow: var(--site-btn-inset), var(--site-btn-shadow) !important;

	transition:

		transform 0.15s ease,

		box-shadow 0.15s ease;

}



.content-block-button__link:hover,

.content-block-file__button:hover {

	color: #fff !important;

	background: linear-gradient(

		180deg,

		var(--site-accent) 0%,

		var(--site-accent-deep) 48%,

		#a84308 100%

	) !important;

	-webkit-box-shadow:

		inset 0 1px 0 rgba(255, 255, 255, 0.2),

		var(--site-btn-shadow-hover) !important;

	box-shadow:

		inset 0 1px 0 rgba(255, 255, 255, 0.2),

		var(--site-btn-shadow-hover) !important;

	transform: translateY(-1px);

}



.content-block-button__link:focus-visible,

.content-block-file__button:focus-visible {

	color: #fff !important;

	outline: 2px solid var(--site-accent-deep);

	outline-offset: 3px;

	box-shadow: var(--site-btn-inset), var(--site-btn-shadow-hover) !important;

	-webkit-box-shadow: var(--site-btn-inset), var(--site-btn-shadow-hover) !important;

	transform: translateY(-1px);

}



/* Sekundär */

.btn-site-soft,

.content-main a.btn-site-soft {

	display: inline-block;

	margin-top: 0.35rem;

	padding: 0.65em 1.25em;

	border-radius: 8px;

	font-weight: 600;

	text-decoration: none !important;

	color: var(--site-accent-deep) !important;

	background: var(--site-accent-soft);

	border: 1px solid rgba(234, 118, 25, 0.4);

	-webkit-box-shadow: 0 1px 3px rgba(185, 75, 15, 0.12) !important;

	box-shadow: 0 1px 3px rgba(185, 75, 15, 0.12) !important;

	transition:

		background 0.15s ease,

		border-color 0.15s ease,

		transform 0.15s ease;

}



.content-main a.btn-site-soft:link,

.content-main a.btn-site-soft:visited {

	color: var(--site-accent-deep) !important;

	-webkit-box-shadow: 0 1px 3px rgba(185, 75, 15, 0.12) !important;

	box-shadow: 0 1px 3px rgba(185, 75, 15, 0.12) !important;

}



.btn-site-soft:hover,

.content-main a.btn-site-soft:hover {

	background: #ffe8d2;

	border-color: rgba(234, 118, 25, 0.55);

	transform: translateY(-1px);

	color: var(--site-accent-deep) !important;

	-webkit-box-shadow: 0 2px 8px rgba(185, 75, 15, 0.2) !important;

	box-shadow: 0 2px 8px rgba(185, 75, 15, 0.2) !important;

}



.btn-site-soft:focus-visible,

.content-main a.btn-site-soft:focus-visible {

	outline: 2px solid var(--site-accent-deep);

	outline-offset: 3px;

}



.content-main .btn-site-primary + p,

.content-main .btn-site-soft + p,

.content-main .content-block-button + p {

	margin-top: 1rem;

}



.content-main p + .btn-site-primary,

.content-main p + .btn-site-soft {

	margin-top: 0.75rem;

}



@media (prefers-reduced-motion: reduce) {

	.btn-site-primary,

	.content-main a.btn-site-primary,

	.content-block-button__link,

	.content-block-file__button,

	.btn-site-soft,

	.content-main a.btn-site-soft {

		transition: none;

		transform: none !important;

	}

}

