/**
 * Smart Buttons – Frontend-Stile.
 *
 * Alle Werte werden über CSS Custom Properties gesetzt:
 *   --sb-bg     Hintergrundfarbe
 *   --sb-fg     Textfarbe
 *   --sb-hover  Hover-Hintergrundfarbe
 *   --sb-r      Eckenradius (mit Einheit, z.B. 4px)
 *
 * Diese Properties werden inline per style="..." gesetzt.
 * Kein !important, keine Inline-<style>-Injektion.
 */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.smart-button-wrapper {
	display: block;
	margin: 0.5em 0;
}

/* ── Basis-Button ────────────────────────────────────────────────────────── */

.smart-button {
	display:         inline-block;
	padding:         0.65em 1.4em;
	font-family:     inherit;
	font-weight:     600;
	text-align:      center;
	text-decoration: none;
	white-space:     nowrap;
	cursor:          pointer;
	border:          none;
	line-height:     1.4;
	letter-spacing:  .02em;
	transition:      background-color .2s ease, box-shadow .2s ease, transform .1s ease;

	/* Farben über CSS Custom Properties */
	background-color: var(--sb-bg,    #0073aa);
	color:            var(--sb-fg,    #ffffff);
	border-radius:    var(--sb-r,     4px);
}

.smart-button:visited { color: var(--sb-fg, #ffffff); }

.smart-button:hover,
.smart-button:focus {
	background-color: var(--sb-hover, #005177);
	color:            var(--sb-fg,    #ffffff);
	text-decoration:  none;
	box-shadow:       0 3px 10px rgba(0, 0, 0, .18);
	outline:          none;
}

.smart-button:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 115, 170, .45);
}

.smart-button:active {
	transform: translateY(1px);
	box-shadow: none;
}

/* ── Größen ──────────────────────────────────────────────────────────────── */

.sb-size-small {
	font-size:  0.78rem;
	padding:    0.4em 0.9em;
}

.sb-size-medium {
	font-size:  0.95rem;
	padding:    0.65em 1.4em;
}

.sb-size-large {
	font-size:  1.1rem;
	padding:    0.8em 1.8em;
}

/* ── Barrierefreiheit ────────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.smart-button {
		transition: none;
	}
}

/* ── Bild-Button ─────────────────────────────────────────────────────────── */

.smart-button-img-wrap {
	display:         inline-block;
	text-decoration: none;
	line-height:     0; /* Verhindert Lücke unter dem Bild */
}

.smart-button-img {
	display:    block;
	max-width:  100%;
	height:     auto;
	transition: opacity .2s ease;
}

.smart-button-img-wrap:hover .smart-button-img,
.smart-button-img-wrap:focus .smart-button-img {
	opacity: .85;
}

.smart-button-img-wrap:focus-visible {
	outline:        3px solid rgba(0, 115, 170, .45);
	outline-offset: 3px;
	border-radius:  2px;
}

.smart-button-img-wrap:active .smart-button-img {
	opacity: .7;
}

@media ( prefers-reduced-motion: reduce ) {
	.smart-button-img {
		transition: none;
	}
}