/* ===== RAIBA-IMMO SIDEBAR BUILD-MARKER: v6.9.11 ===== */
/**
 * Raiba Immo – Seiten-Panel (Kontakt · Suchauftrag · Social).
 * Ruhige weiße Reiter-Leiste an der Bildschirmkante; beim Öffnen (Hover/Tap)
 * fährt die Info-Schublade nach innen aus – die Leiste bleibt an der Kante.
 * Wichtig: Viele Themes stylen button/a mit !important. Layout- und
 * Farb-relevante Eigenschaften sind daher hier bewusst mit !important
 * abgesichert (Theme-Bleed-Schutz).
 */
.ri-sidebar {
	position: fixed !important;
	top: 0 !important;
	bottom: 0 !important;
	z-index: 99990 !important;
	display: flex !important;
	align-items: center !important;
	pointer-events: none;
	font-family: inherit;
	--ri-accent: #FF6600;
	--ri-panel-bg: #ffffff;
	--ri-text: #15212C;
	--ri-muted: #5E6976;
	--ri-line: #E4E8EF;
	--ri-soft: #F3F6FA;
	--ri-w: min(330px, 86vw);
	--ri-ease: cubic-bezier(.22, .61, .36, 1);
}
.ri-sidebar *,
.ri-sidebar *::before,
.ri-sidebar *::after { box-sizing: border-box; }
.ri-sidebar > * { pointer-events: auto; }
.ri-backdrop { display: none; border: 0; }

.ri-sidebar--right { right: 0 !important; left: auto !important; flex-direction: row-reverse !important; }
.ri-sidebar--left  { left: 0 !important; right: auto !important; flex-direction: row !important; }

/* ---------- Schublade ---------- */
.ri-drawer {
	width: 0;
	overflow: hidden;
	display: flex !important;
	transition: width .34s var(--ri-ease);
}
.ri-sidebar--right .ri-drawer { justify-content: flex-end !important; }
.ri-sidebar--left  .ri-drawer { justify-content: flex-start !important; }
.ri-sidebar.is-open .ri-drawer { width: var(--ri-w); }

.ri-flyout {
	width: var(--ri-w);
	flex: none;
	background: var(--ri-panel-bg) !important;
	color: var(--ri-text) !important;
	border: 1px solid var(--ri-line);
	padding: 22px 24px 24px;
	display: none;
	overflow-y: auto;
	max-height: calc(100vh - 32px);
	scrollbar-width: thin;
	scrollbar-color: var(--ri-line) transparent;
}
.ri-flyout::-webkit-scrollbar { width: 8px; }
.ri-flyout::-webkit-scrollbar-thumb { background: var(--ri-line); border-radius: 99px; }
.ri-flyout::-webkit-scrollbar-track { background: transparent; }
.ri-sidebar--right .ri-flyout { border-right: none; border-radius: 18px 0 0 18px; box-shadow: -22px 0 50px -20px rgba(0, 45, 103, .30); }
.ri-sidebar--left  .ri-flyout { border-left: none;  border-radius: 0 18px 18px 0; box-shadow: 22px 0 50px -20px rgba(0, 45, 103, .30); }
.ri-flyout.is-active { display: block !important; animation: ri-fly .34s var(--ri-ease) both; }
@keyframes ri-fly { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Reiter-Leiste ---------- */
.ri-rail {
	display: flex !important;
	flex-direction: column !important;
	flex: none;
	background: var(--ri-panel-bg) !important;
	border: 1px solid var(--ri-line);
	overflow: hidden;
	position: relative;
	z-index: 2;
	transition: border-radius .2s;
}
.ri-sidebar--right .ri-rail { border-right: none; border-radius: 16px 0 0 16px; box-shadow: -10px 0 34px -14px rgba(0, 45, 103, .28), 0 2px 10px rgba(21, 33, 44, .05); }
.ri-sidebar--left  .ri-rail { border-left: none;  border-radius: 0 16px 16px 0; box-shadow: 10px 0 34px -14px rgba(0, 45, 103, .28), 0 2px 10px rgba(21, 33, 44, .05); }
.ri-sidebar.is-open .ri-rail { border-radius: 0; }

/* ---------- Desktop: Flyout als frei schwebende, rundum abgerundete Karte ----------
   Warum: Bisher wurde die Karte an die Reiter-Leiste „geklebt" (nur links rund, rechts
   eckig) und vom overflow:hidden der Schublade beschnitten -> abgeschnittener Schatten
   und eckige Ecken, die über die (kürzere) Leiste hinausstanden. Jetzt schwebt die Karte
   mit kleinem Abstand neben der Leiste: rundum abgerundet, weicher Schatten, kein Naht.
   Die Schublade behält ihre Breite (inkl. Lücke), damit die Hover-Fläche von der Leiste
   bis zur Karte reicht und beim Rübergehen nicht schließt; overflow:visible zeigt den
   Schatten. Sichtbarkeit läuft über opacity/visibility (an .is-open gekoppelt). */
@media (min-width: 601px) {
	.ri-drawer { overflow: visible !important; transition: none; }
	.ri-sidebar--right .ri-drawer { justify-content: flex-end; }
	.ri-sidebar--left  .ri-drawer { justify-content: flex-start; }
	.ri-sidebar--right.is-open .ri-drawer { padding-right: 14px; }
	.ri-sidebar--left.is-open  .ri-drawer { padding-left: 14px; }
	.ri-sidebar.is-open .ri-drawer { width: calc(var(--ri-w) + 14px); }

	.ri-flyout {
		flex: none;
		opacity: 0; visibility: hidden; pointer-events: none;
		transform: translateX(8px);
		transition: opacity .24s var(--ri-ease), transform .28s var(--ri-ease), visibility 0s linear .28s;
		border: 1px solid var(--ri-line) !important;
		border-radius: 20px !important;
		box-shadow: 0 24px 58px -24px rgba(0, 45, 103, .38), 0 6px 18px -12px rgba(21, 33, 44, .10) !important;
		animation: none !important;
	}
	.ri-sidebar--left .ri-flyout { transform: translateX(-8px); }
	.ri-sidebar.is-open .ri-flyout.is-active {
		opacity: 1; visibility: visible; pointer-events: auto;
		transform: translateX(0);
		transition: opacity .24s var(--ri-ease), transform .28s var(--ri-ease);
	}

	/* Leiste bleibt die abgerundete Pille – auch im geöffneten Zustand. */
	.ri-sidebar--right.is-open .ri-rail { border-radius: 16px 0 0 16px; }
	.ri-sidebar--left.is-open  .ri-rail { border-radius: 0 16px 16px 0; }
}

.ri-tab {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 80px !important;
	min-height: 70px !important;
	padding: 14px 9px 12px !important;
	gap: 7px;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	position: relative;
	color: var(--ri-text) !important;
	text-decoration: none !important;
	transition: background .2s, color .2s;
	font-family: inherit;
}
.ri-tab + .ri-tab { border-top: 1px solid var(--ri-line) !important; }
.ri-tab svg { width: 24px !important; height: 24px !important; color: inherit !important; fill: currentColor !important; transition: transform .2s var(--ri-ease); }
.ri-tab-lb {
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	color: var(--ri-muted) !important;
	letter-spacing: .005em;
	text-transform: none !important;
	word-break: break-word;
	transition: color .2s;
}
.ri-tab::before {
	content: "";
	position: absolute;
	top: 13px;
	bottom: 13px;
	width: 3px;
	background: var(--ri-accent) !important;
	transform: scaleY(0);
	transition: transform .22s var(--ri-ease);
}
.ri-sidebar--right .ri-tab::before { left: 0; border-radius: 0 3px 3px 0; }
.ri-sidebar--left  .ri-tab::before { right: 0; border-radius: 3px 0 0 3px; }
.ri-tab:hover { color: var(--ri-accent) !important; background: transparent !important; }
.ri-tab:hover .ri-tab-lb { color: var(--ri-accent) !important; }
.ri-tab:hover svg { transform: translateY(-1px); }
.ri-tab.is-active { color: var(--ri-accent) !important; background: #F6F8FC !important; }
@supports (background: color-mix(in srgb, red, #fff)) {
	.ri-tab.is-active { background: color-mix(in srgb, var(--ri-accent) 8%, #fff) !important; }
}
.ri-tab.is-active .ri-tab-lb { color: var(--ri-accent) !important; }
.ri-tab.is-active::before { transform: scaleY(1); }
.ri-tab:focus-visible { outline: 3px solid rgba(255, 102, 0, .42) !important; outline-offset: -3px; }

/* ---------- Flyout-Inhalt ---------- */
.ri-flyout-head { display: flex !important; align-items: center !important; gap: 11px; margin: 0 0 16px !important; }
.ri-flyout-chip {
	width: 34px !important; height: 34px !important; border-radius: 10px !important; flex: none;
	display: grid !important; place-items: center !important;
	color: var(--ri-accent) !important; background: #FFF1E7 !important;
}
@supports (background: color-mix(in srgb, red, #fff)) {
	.ri-flyout-chip { background: color-mix(in srgb, var(--ri-accent) 12%, #fff) !important; }
}
.ri-flyout-chip svg { width: 19px !important; height: 19px !important; color: inherit !important; fill: currentColor !important; }
.ri-flyout-title { margin: 0 !important; font-size: 17px !important; font-weight: 800; letter-spacing: -.01em; color: var(--ri-text) !important; }

.ri-row {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 11px 0 !important;
	border-top: 1px solid var(--ri-line) !important;
	color: var(--ri-text) !important;
	background: transparent !important;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 600;
	transition: color .18s;
}
.ri-row:first-of-type { border-top: none !important; }
.ri-row svg { width: 18px !important; height: 18px !important; flex: none; color: var(--ri-text) !important; fill: currentColor !important; transition: color .18s; }
a.ri-row:hover { color: var(--ri-accent) !important; }
a.ri-row:hover svg { color: var(--ri-accent) !important; }
.ri-row--addr { align-items: flex-start; }
.ri-row--addr svg { margin-top: 2px; }
.ri-addr { font-style: normal; line-height: 1.5; color: var(--ri-muted) !important; font-size: 13.5px; font-weight: 500; }
.ri-text { margin: 0 0 16px; color: var(--ri-muted) !important; font-size: 14px; line-height: 1.6; }

/* Freies HTML/Code im Reiter (unter Titel/Text/Button ausgegeben) */
.ri-html { color: var(--ri-text); font-size: 14px; line-height: 1.6; }
.ri-html > *:first-child { margin-top: 0; }
.ri-html > *:last-child { margin-bottom: 0; }
.ri-html img, .ri-html iframe, .ri-html video, .ri-html table { max-width: 100%; }
.ri-html a { color: var(--ri-accent); }

.ri-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	width: 100% !important;
	margin-top: 16px;
	padding: 13px 18px !important;
	background: var(--ri-accent) !important;
	color: #fff !important;
	text-decoration: none !important;
	border: none !important;
	font-weight: 800;
	font-size: 14px;
	border-radius: 12px !important;
	box-shadow: none !important;
	transition: filter .18s ease, transform .18s var(--ri-ease), gap .18s var(--ri-ease);
}
.ri-btn:hover { filter: brightness(1.05); gap: 11px; }
.ri-btn:active { transform: scale(.985); }
.ri-btn svg { width: 16px !important; height: 16px !important; color: inherit !important; fill: currentColor !important; }

.ri-social { display: flex !important; flex-wrap: wrap !important; gap: 10px; margin-top: 4px; }
.ri-social a {
	width: 46px !important; height: 46px !important; border-radius: 13px !important;
	display: grid !important; place-items: center !important;
	background: var(--ri-soft) !important; color: var(--ri-text) !important;
	text-decoration: none !important; border: none !important;
	transition: background .18s ease, color .18s ease, transform .18s var(--ri-ease);
}
.ri-social a:hover { background: var(--ri-accent) !important; color: #fff !important; transform: translateY(-2px); }
.ri-social svg { width: 20px !important; height: 20px !important; color: inherit !important; fill: currentColor !important; }

/* ---------- Mobil: Bottom-Sheet ---------- */
@media (max-width: 600px) {
	/* Wunsch: mobil komplett ausblenden */
	.ri-sidebar.ri-hide-mobile { display: none !important; }

	/* Kompaktere Leiste, bleibt an der Kante mittig */
	.ri-tab { width: 60px !important; min-height: 56px !important; padding: 10px 6px 8px !important; gap: 5px; }
	.ri-tab svg { width: 21px !important; height: 21px !important; }
	.ri-tab-lb { font-size: 9px; }

	/* Leiste ausblenden, solange das Sheet offen ist */
	.ri-rail { transition: opacity .25s ease; }
	.ri-sidebar.is-open .ri-rail { opacity: 0; pointer-events: none; }

	/* Abdunkelnder Hintergrund */
	.ri-backdrop {
		display: block; position: fixed; inset: 0; border: 0;
		background: rgba(10, 20, 35, .5);
		opacity: 0; visibility: hidden;
		transition: opacity .3s ease, visibility .3s;
		z-index: 1;
	}
	.ri-sidebar.is-open .ri-backdrop { opacity: 1; visibility: visible; }

	/* Schublade wird zum Host für das Sheet am unteren Rand */
	.ri-drawer {
		position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
		width: auto !important; height: auto !important; overflow: visible !important;
		display: block !important; z-index: 2; pointer-events: none;
	}
	.ri-sidebar.is-open .ri-drawer { width: auto !important; }

	.ri-flyout {
		display: block !important;
		position: absolute; left: 0; right: 0; bottom: 0;
		width: 100% !important; height: auto !important; max-height: 82vh;
		border: 0 !important; border-radius: 22px 22px 0 0 !important;
		box-shadow: 0 -18px 50px -16px rgba(0, 45, 103, .45) !important;
		padding: 28px 20px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
		transform: translateY(102%);
		opacity: 0; visibility: hidden;
		transition: transform .34s var(--ri-ease), opacity .2s ease, visibility .34s;
		pointer-events: auto; overflow-y: auto;
	}
	.ri-sidebar.is-open .ri-flyout.is-active {
		transform: translateY(0); opacity: 1; visibility: visible; animation: none;
	}
	/* Griff oben */
	.ri-flyout::before {
		content: ""; position: absolute; top: 11px; left: 50%; margin-left: -21px;
		width: 42px; height: 4px; border-radius: 99px; background: var(--ri-line);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ri-drawer, .ri-flyout, .ri-tab, .ri-tab svg, .ri-btn, .ri-social a { transition: none; animation: none; }
}