/*
 * Edge Badge – ID-Selektoren schlagen die Link-Styles von Divi ohne !important.
 * WICHTIG: #ebdg-edge darf kein transform/filter/will-change haben, sonst
 * bricht das mobile position:fixed der Kontakt-Leiste.
 */

/* Gemeinsamer Container: volle Höhe rechts, Inhalt vertikal mittig gestapelt. */
#ebdg-edge {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99990; /* Unter Divi-Header/Menü (99999), über dem Seiteninhalt. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 12px;
	margin: 0;
	padding: 0;
	pointer-events: none; /* Nur die Kinder sind klickbar. */
}

#ebdg-edge > * {
	pointer-events: auto;
}

/* ---- Text-Badge ---- */
#ebdg-badge {
	box-sizing: border-box;
	margin: 0;
	padding: 16px 9px;
	background: var(--ebdg-bg, #722f37);
	color: var(--ebdg-fg, #fff);
	border-radius: var(--ebdg-radius, 8px) 0 0 var(--ebdg-radius, 8px);
	box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.25);
	writing-mode: vertical-rl; /* Lesbar von oben nach unten. */
	text-orientation: mixed;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-decoration: none;
}

#ebdg-badge:link,
#ebdg-badge:visited,
#ebdg-badge:hover,
#ebdg-badge:focus,
#ebdg-badge:active {
	color: var(--ebdg-fg, #fff);
	text-decoration: none;
}

#ebdg-badge:hover,
#ebdg-badge:focus {
	filter: brightness(1.12);
}

#ebdg-badge:focus-visible {
	outline: 2px solid var(--ebdg-fg, #fff);
	outline-offset: -4px;
}

/* ---- Kontakt-Leiste ---- */
#ebdg-contact {
	position: relative; /* Bezug für das Info-Fenster. */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 10px;
	background: var(--ebdg-c-bg, #722f37);
	color: var(--ebdg-c-fg, #fff);
	border-radius: var(--ebdg-radius, 8px) 0 0 var(--ebdg-radius, 8px);
	box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.25);
}

#ebdg-contact .ebdg-icon,
#ebdg-contact .ebdg-info {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ebdg-c-fg, #fff);
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

#ebdg-contact .ebdg-icon:link,
#ebdg-contact .ebdg-icon:visited,
#ebdg-contact .ebdg-icon:hover,
#ebdg-contact .ebdg-icon:focus,
#ebdg-contact .ebdg-icon:active {
	color: var(--ebdg-c-fg, #fff);
	text-decoration: none;
}

#ebdg-contact .ebdg-icon:hover,
#ebdg-contact .ebdg-icon:focus-visible,
#ebdg-contact .ebdg-info:hover,
#ebdg-contact .ebdg-info:focus-visible {
	background: rgba(255, 255, 255, 0.18);
}

#ebdg-contact .ebdg-icon:focus-visible,
#ebdg-contact .ebdg-info:focus-visible {
	outline: 2px solid var(--ebdg-c-fg, #fff);
	outline-offset: -3px;
}

#ebdg-contact .ebdg-icon svg,
#ebdg-contact .ebdg-info svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* Info-Button: nur auf Geräten ohne Hover (Touch) und auf kleinen Bildschirmen. */
#ebdg-contact .ebdg-info {
	display: none;
}

@media (hover: none), (max-width: 767px) {
	#ebdg-contact .ebdg-info {
		display: flex;
	}
}

/* Info-Fenster mit Adresse, Telefon, Öffnungszeiten. */
#ebdg-contact .ebdg-tooltip {
	position: absolute;
	top: 50%;
	right: 100%;
	transform: translateY(-50%);
	box-sizing: border-box;
	width: 220px;
	margin-right: 12px;
	padding: 12px;
	background: #fff;
	color: #000;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: left;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s;
}

/* Maus: Hover oder Tastatur-Fokus (nur :focus-visible, damit es nach einem Mausklick nicht "hängt"). */
@media (hover: hover) {
	#ebdg-contact:hover .ebdg-tooltip,
	#ebdg-contact .ebdg-icon:focus-visible ~ .ebdg-tooltip {
		opacity: 1;
		visibility: visible;
	}
}

/* Touch/alle: per Info-Button geöffnet (badge.js setzt .is-open). */
#ebdg-contact.is-open .ebdg-tooltip {
	opacity: 1;
	visibility: visible;
	pointer-events: auto; /* Ein Tipp aufs Fenster darf nicht auf die Seite darunter durchfallen. */
}

@media (prefers-reduced-motion: reduce) {
	#ebdg-contact .ebdg-tooltip {
		transition: none;
	}
}

/* ---- Mobil (Divi-Smartphone-Breakpoint) ---- */
@media (max-width: 767px) {
	#ebdg-badge.ebdg-hide-mobile,
	#ebdg-contact.ebdg-hide-mobile {
		display: none;
	}

	/* Kontakt-Leiste wird zur Leiste am unteren Rand. */
	#ebdg-contact:not(.ebdg-hide-mobile) {
		position: fixed;
		bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		left: 50%;
		transform: translateX(-50%);
		flex-direction: row;
		padding: 10px 14px;
		border-radius: 50px;
	}

	/* Info-Fenster öffnet sich oberhalb der Leiste, mittig. */
	#ebdg-contact .ebdg-tooltip {
		top: auto;
		right: auto;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		width: 260px;
		width: min(280px, calc(100vw - 32px));
		margin: 0 0 10px;
	}
}

@media print {
	#ebdg-edge {
		display: none;
	}
}