/* ── Rahmen Button Block – Frontend ── */

.rbb-wrapper {
	display: block;
	line-height: 1;
}

.rbb-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	box-sizing: border-box;
	background: none;
	outline: none;
	line-height: 1;
}

.rbb-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ── Icon ── */
.rbb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-style: normal;
}

/* ── Effekte ── */

/* Scale */
.rbb-effect-scale {
	transform: scale(1);
}
.rbb-effect-scale:hover {
	transform: scale(1.06) !important;
}

/* Shadow */
.rbb-effect-shadow:hover {
	box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Slide Fill – Hintergrund fährt von links ein */
.rbb-effect-slide-fill {
	background-image: linear-gradient(to right, currentColor 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: right center;
}
.rbb-effect-slide-fill:hover {
	background-position: left center !important;
}

/* Underline */
.rbb-effect-underline .rbb-label {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Glow */
.rbb-effect-glow:hover {
	box-shadow: 0 0 12px 2px currentColor !important;
}

/* Shake */
@keyframes rbb-shake {
	0%, 100% { transform: translateX(0); }
	20%       { transform: translateX(-4px); }
	40%       { transform: translateX(4px); }
	60%       { transform: translateX(-3px); }
	80%       { transform: translateX(3px); }
}
.rbb-effect-shake:hover {
	animation: rbb-shake 0.4s ease;
}

/* Bounce */
@keyframes rbb-bounce {
	0%, 100% { transform: translateY(0); }
	40%       { transform: translateY(-6px); }
	70%       { transform: translateY(-3px); }
}
.rbb-effect-bounce:hover {
	animation: rbb-bounce 0.5s ease;
}