/**
 * TIM Buttons – desktop / iPad only (≥ 768px).
 */

.timb-edge {
	display: none;
}

@media screen and (min-width: 768px) {
	.timb-edge {
		display: block;
		position: fixed;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 99999;
		margin: 0;
		padding: 0;
		pointer-events: none;
	}

	.timb-edge__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 8px;
		pointer-events: auto;
	}

	.timb-edge__item {
		margin: 0;
		padding: 0;
	}

	.timb-edge__btn,
	.timb-edge__btn:link,
	.timb-edge__btn:visited,
	.timb-edge__btn:hover,
	.timb-edge__btn:focus,
	.timb-edge__btn:focus-visible,
	.timb-edge__btn:active {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 8px 0 0 8px;
		background: var(--timb-color, #333);
		color: #fff !important;
		text-decoration: none !important;
		box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.15);
		transition: width 0.2s ease, filter 0.2s ease;
		/* Kein translateX – rechter Rand bleibt bündig, kein weißer Spalt */
	}

	.timb-edge__btn:hover,
	.timb-edge__btn:focus-visible {
		/* Nur nach links wachsen, rechter Rand bleibt am Viewport */
		width: 56px;
		filter: brightness(1.08);
		outline: none;
		color: #fff !important;
	}

	.timb-edge__btn:focus-visible {
		box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 5px var(--timb-color, #333);
	}

	.timb-edge__icon {
		display: flex;
		line-height: 0;
		color: #fff !important;
	}

	.timb-edge__btn svg,
	.timb-edge__btn:hover svg,
	.timb-edge__btn:focus svg,
	.timb-edge__btn:focus-visible svg,
	.timb-edge__btn:active svg {
		display: block;
		fill: #fff !important;
		color: #fff !important;
	}

	.timb-edge__btn--instagram,
	.timb-edge__btn--instagram:hover,
	.timb-edge__btn--instagram:focus-visible {
		background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	}
}